/* ===== PALETA OFICIAL DE YAMILET ===== */
:root {
    --julia:          #FFF7E4; /* Fondo crema suave */
    --magenta:        #C44188; /* Facinating Magenta */
    --maroon:         #A22D62; /* Maroon */
    --neon-gold:      #FFBD2A; /* Neon Gold */
    --la-rioja:       #B3B614; /* La Rioja */
    --dark-aqua:      #1E949F; /* Dark Aqua */
    --true-orange:    #EF8332; /* True Orange */

    --text-dark:      #452830;
    --text-soft:      #785b63;

    /* Tipografías */
    --f-script: 'Playball', cursive;                        /* títulos */
    --f-pixel:  'Pixelify Sans', monospace;                 /* acento retro */
    --f-serif:  'Fraunces', Georgia, serif;                 /* textos */
        --f-sans:   'Montserrat', sans-serif;                   /* etiquetas */

    /* Florecita de talavera (esquinas del RSVP) */
    --flor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%231E949F'%3E%3Cellipse cx='20' cy='8.5' rx='3.4' ry='7'/%3E%3Cellipse cx='20' cy='8.5' rx='3.4' ry='7' transform='rotate(45 20 20)'/%3E%3Cellipse cx='20' cy='8.5' rx='3.4' ry='7' transform='rotate(90 20 20)'/%3E%3Cellipse cx='20' cy='8.5' rx='3.4' ry='7' transform='rotate(135 20 20)'/%3E%3Cellipse cx='20' cy='8.5' rx='3.4' ry='7' transform='rotate(180 20 20)'/%3E%3Cellipse cx='20' cy='8.5' rx='3.4' ry='7' transform='rotate(225 20 20)'/%3E%3Cellipse cx='20' cy='8.5' rx='3.4' ry='7' transform='rotate(270 20 20)'/%3E%3Cellipse cx='20' cy='8.5' rx='3.4' ry='7' transform='rotate(315 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='3.6' fill='%23EF8332'/%3E%3C/svg%3E");
}

/* ===== RESET ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden; /* los stickers se asoman por los bordes sin generar scroll horizontal */
}

/* ===== BODY ===== */
body {
    font-family: var(--f-serif);
    color: var(--text-dark);
    background-color: var(--julia);
    min-height: 100vh;
    overflow-x: clip;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(rgba(196, 65, 136, 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

/* ===== PAPEL PICADO: tira que se repite (nunca se deforma) ===== */
.papel-picado {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(64px, 11vw, 104px);
    z-index: 20;
    pointer-events: none;
}

/* Tira de atrás: más pequeña, desfasada y con menos opacidad (da profundidad) */
.papel-picado::before,
.papel-picado::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    background-repeat: repeat-x;
    background-image: url('assets/papel_picado_tira.png');
    transform-origin: top center;
}

.papel-picado::before {
    top: 7px;
    bottom: -7px;
    background-size: auto 92%;
    background-position: 45px 0;
    opacity: .55;
    filter: saturate(.9);
    animation: sway 7s ease-in-out infinite reverse;
}

.papel-picado::after {
    top: 0;
    bottom: 0;
    background-size: auto 100%;
    background-position: 0 0;
    filter: drop-shadow(0 4px 5px rgba(162, 45, 98, .18));
    animation: sway 6s ease-in-out infinite;
}

@keyframes sway {
    0%, 100% { transform: skewX(0deg); }
    50%      { transform: skewX(1.6deg); }
}

/* ===== STICKERS (borde blanco recortado + sombrita) ===== */
.sticker {
    display: block;
    height: auto;
    pointer-events: none;
    filter:
        drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
        drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
        drop-shadow(0 6px 10px rgba(162, 45, 98, .22));
}

/* Las fotos llevan el borde un poco más grueso */
.sticker.photo {
    filter:
        drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
        drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
        drop-shadow(0 8px 12px rgba(162, 45, 98, .28));
}

@keyframes bob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -7px; }
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: clamp(5.6rem, 13vw, 8rem) 2rem 3.5rem;
    text-align: center;
}

/* ===== TIPOGRAFÍA DE TÍTULOS (Playball, estilo sticker) ===== */
.script-heading {
    font-family: var(--f-script);
    font-weight: 400;
    color: var(--magenta);
    -webkit-text-stroke: .14em #fff;
    paint-order: stroke fill;
    stroke-linejoin: round;
    filter: drop-shadow(2px 3px 0 rgba(255, 189, 42, .95));
}

/* ===== HERO ===== */
.hero {
    position: relative;
    margin-bottom: 4.2rem;
}

.hero-heart {
    width: 30%;
    margin: 0 auto .7rem;
    rotate: -4deg;
    animation: bob 5s ease-in-out infinite;
}

.welcome-label {
    font-family: var(--f-sans);
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--dark-aqua);
    font-weight: 700;
    margin-bottom: 0.9rem;
    line-height: 1.5;
}

/* Título con contorno, como el "México" de la inspo */
.main-title.script-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: .95;
    color: #fff;
    -webkit-text-stroke: .17em var(--magenta);
    filter: drop-shadow(3px 4px 0 var(--neon-gold));
    margin-bottom: .9rem;
}

.title-mis {
    font-size: clamp(2.4rem, 9vw, 3rem);
    rotate: -6deg;
    margin-bottom: -.12em;
}

.title-big {
    font-size: clamp(3rem, 13.5vw, 4.4rem);
    max-width: 100%;
}

.name-sub {
    font-family: var(--f-pixel);
    font-size: 1.15rem;
    letter-spacing: 7px;
    padding-left: 7px; /* compensa el letter-spacing para que quede centrado */
    color: var(--true-orange);
    font-weight: 700;
    text-shadow: 2px 2px 0 var(--maroon);
}

/* ===== COUNTDOWN ===== */
.countdown-section {
    position: relative;
    margin-bottom: 2.8rem;
}

.deco-concha {
    position: absolute;
    right: -4px;
    top: -70px;
    width: 30%;
    rotate: 12deg;
    animation: bob 8s ease-in-out infinite .5s;
}

.countdown-label {
    font-family: var(--f-sans);
    font-size: 0.75rem;
    letter-spacing: 3px;
    color: var(--text-soft);
    margin-bottom: 0.8rem;
    font-weight: 700;
}

.countdown-container {
    display: flex;
    justify-content: center;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 62px;
    position: relative;
}

.countdown-item:not(:last-child)::after {
    content: ":";
    position: absolute;
    right: -4px;
    top: -3px;
    font-size: 2rem;
    color: var(--true-orange);
    opacity: 0.6;
    font-family: var(--f-pixel);
}

.countdown-item span {
    font-family: var(--f-pixel);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--magenta);
    font-weight: 700;
    text-shadow: 2px 2px 0 var(--maroon);
}

.countdown-item small {
    font-family: var(--f-sans);
    font-size: 0.55rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-top: 8px;
    font-weight: 700;
}

/* ===== DETALLES DEL EVENTO ===== */
.event-info,
.dress-code-section,
.gifts-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2.8rem;
}

.event-info         { margin-bottom: 5.5rem; }
.dress-code-section { margin-bottom: 6.8rem; }
.gifts-section      { margin-bottom: 6.2rem; }

.info-line {
    font-family: var(--f-serif);
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--text-dark);
}

.info-date {
    font-weight: 700;
    color: var(--true-orange);
    font-size: clamp(1.1rem, 5.6vw, 1.4rem);
    white-space: nowrap;
}

.info-time {
    font-style: italic;
    font-weight: 500;
}

.info-place {
    font-weight: 700;
}

.info-address {
    font-size: 0.95em;
    opacity: 0.85;
}

.section-title {
    font-size: clamp(2.6rem, 11vw, 3.2rem);
    line-height: 1.1;
    margin-bottom: 0.4rem;
}

.dc-tag {
    font-family: var(--f-sans);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--la-rioja);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.instruction-text {
    font-family: var(--f-serif);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-soft);
    max-width: 360px;
    margin: 0.3rem auto 0;
}

.deadline-text {
    font-family: var(--f-sans);
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--true-orange);
    margin-bottom: 1.2rem;
    font-weight: 600;
}

/* Stickers de sección: esparcidos, asomándose por los bordes */
.deco-lele {
    position: absolute;
    left: -34px;
    bottom: -116px;
    width: 30%;
    rotate: -9deg;
    animation: bob 7s ease-in-out infinite .8s;
}

.deco-nina {
    position: absolute;
    right: -38px;
    bottom: -22px;
    width: 30%;
    rotate: 6deg;
    animation: bob 9s ease-in-out infinite .4s;
}

.deco-bebe {
    position: absolute;
    left: -38px;
    top: -80px;
    width: 30%;
    rotate: -7deg;
    animation: bob 8s ease-in-out infinite;
}

.deco-nopal {
    position: absolute;
    right: -34px;
    bottom: -110px;
    width: 30%;
    rotate: 10deg;
    animation: bob 10s ease-in-out infinite .8s;
}

.deco-molcajete {
    position: absolute;
    left: -30px;
    bottom: -120px;
    width: 30%;
    rotate: -5deg;
    animation: bob 11s ease-in-out infinite 2s;
}

/* ===== PALETA DRESS CODE ===== */
.color-palette {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.color-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(162, 45, 98, 0.15);
    border: 2px solid #fff;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.color-circle:hover {
    transform: scale(1.18);
}

/* ===== BOTONES ===== */
.btn-ghost {
    display: inline-block;
    margin-top: 1.1rem;
    color: var(--magenta);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 1.5px solid var(--magenta);
    padding: 10px 24px;
    border-radius: 30px;
    transition: all 0.3s ease;
    font-family: var(--f-sans);
    background: transparent;
    cursor: pointer;
}

.btn-ghost:hover {
    background: var(--magenta);
    color: #fff;
    box-shadow: 0 4px 14px rgba(196, 65, 136, 0.25);
}

/* ===== RSVP (con marco de talavera) ===== */
.rsvp-simple {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1rem 0;
}

.rsvp-box {
    position: relative;
    width: 100%;
    max-width: 360px;
    padding: 3rem 1.8rem 2.6rem;
    border: 3px solid var(--dark-aqua);
    border-radius: 28px;
    outline: 2px dotted var(--dark-aqua);
    outline-offset: -11px;
    box-shadow: 0 10px 30px rgba(30, 148, 159, 0.14);
    background:
        var(--flor) top 14px left 14px / 26px no-repeat,
        var(--flor) top 14px right 14px / 26px no-repeat,
        var(--flor) bottom 14px left 14px / 26px no-repeat,
        var(--flor) bottom 14px right 14px / 26px no-repeat,
        rgba(255, 255, 255, 0.94);
}

.rsvp-title {
    font-size: 3.6rem;
    line-height: 1;
    margin-bottom: 0.8rem;
}

.step-container,
.custom-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 0.8rem;
}

.guest-pass-banner {
    background: rgba(30, 148, 159, 0.12);
    padding: 7px 14px;
    border-radius: 20px;
    margin-bottom: 0.5rem;
}

.guest-pass-banner span {
    font-family: var(--f-pixel);
    font-size: 0.85rem;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--dark-aqua);
}

.input-group {
    width: 100%;
}

.form-input {
    width: 100%;
    padding: 10px 0;
    border: none;
    border-bottom: 1.5px solid rgba(162, 45, 98, 0.3);
    background: transparent;
    font-family: var(--f-sans);
    font-size: 1rem;
    color: var(--text-dark);
    outline: none;
    transition: border-color 0.3s;
}

.form-input:focus {
    border-bottom-color: var(--magenta);
}

.form-input::placeholder {
    font-family: var(--f-sans);
    font-size: 0.85rem;
    color: rgba(120, 91, 99, 0.6);
    letter-spacing: 1px;
}

.text-center { text-align: center; }
.uppercase   { text-transform: uppercase; }

.error-text {
    color: #D32F2F;
    font-size: 0.8rem;
    font-family: var(--f-sans);
    font-weight: 600;
}

/* RADIO BUTTONS */
.radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0.5rem auto;
    width: fit-content;
}

.radio-label {
    font-family: var(--f-serif);
    font-size: 1.1rem;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 30px;
    user-select: none;
}

.radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.custom-radio {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    width: 18px;
    border: 1.5px solid var(--true-orange);
    border-radius: 50%;
    transition: all 0.25s ease;
}

.custom-radio::after {
    content: "";
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--magenta);
}

.radio-label input:checked ~ .custom-radio::after {
    display: block;
}

.radio-label input:checked ~ .custom-radio {
    border-color: var(--magenta);
}

.btn-rsvp {
    background: var(--magenta);
    color: #fff;
    border: none;
    padding: 14px 26px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--f-sans);
    box-shadow: 0 4px 15px rgba(196, 65, 136, 0.25);
    transition: all 0.25s ease;
    width: 100%;
}

.btn-rsvp:hover {
    background: var(--true-orange);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 131, 50, 0.35);
}

.success-text {
    font-size: 3.2rem;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

/* ===== FOOTER ===== */
footer {
    margin-top: 3.5rem;
    padding-bottom: 1rem;
}

footer a {
    font-size: 0.58rem;
    letter-spacing: 3px;
    color: var(--text-soft);
    text-decoration: none;
    opacity: 0.65;
    font-family: var(--f-sans);
    text-transform: uppercase;
    font-weight: 600;
    transition: opacity 0.2s ease, color 0.2s ease;
}

footer a:hover {
    opacity: 1;
    color: var(--magenta);
}

/* ===== ANIMACIONES DE ENTRADA ===== */
.fade-in > * {
    opacity: 0;
    animation: riseIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.fade-in > *:nth-child(1) { animation-delay: 0.08s; }
.fade-in > *:nth-child(2) { animation-delay: 0.20s; }
.fade-in > *:nth-child(3) { animation-delay: 0.32s; }
.fade-in > *:nth-child(4) { animation-delay: 0.44s; }
.fade-in > *:nth-child(5) { animation-delay: 0.56s; }
.fade-in > *:nth-child(6) { animation-delay: 0.68s; }
.fade-in > *:nth-child(7) { animation-delay: 0.80s; }
.fade-in > *:nth-child(8) { animation-delay: 0.92s; }

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== ESCRITORIO: los stickers salen a los lados de la columna ===== */
@media (min-width: 960px) {
    .container { padding-bottom: 5rem; }

    .hero { margin-bottom: 2.6rem; }
    .event-info, .dress-code-section, .gifts-section { margin-bottom: 3.2rem; }

    .hero-heart { width: 30%; }

    .deco-lele {
        left: auto;
        right: -260px;
        bottom: auto;
        top: 30px;
        width: 165px;
        rotate: 8deg;
    }

    .deco-concha {
        right: auto;
        left: -235px;
        top: -30px;
        width: 165px;
        rotate: -10deg;
    }

    .deco-nina {
        right: -250px;
        bottom: auto;
        top: -90px;
        width: 105px;
        rotate: 6deg;
    }

    .deco-bebe {
        left: -260px;
        top: 10px;
        width: 160px;
        rotate: -7deg;
    }

    .deco-nopal {
        right: -235px;
        bottom: auto;
        top: 50px;
        width: 150px;
        rotate: 8deg;
    }

    .deco-molcajete {
        left: -235px;
        bottom: auto;
        top: -10px;
        width: 175px;
        rotate: -6deg;
    }
}

/* ===== MÓVIL CHICO ===== */
@media (max-width: 380px) {
    .container { padding-left: 1.4rem; padding-right: 1.4rem; }
}

/* ===== ACCESIBILIDAD: menos movimiento ===== */
@media (prefers-reduced-motion: reduce) {
    .papel-picado::before,
    .papel-picado::after,
    .sticker { animation: none !important; }
}