/* ============================================================
   Invitaciones — Página pública de RSVP (mobile-first, JS vanilla)
   Segunda iteración de diseño: sistema de 5 colores fijo
   (crema / rosa polvoriento / oliva / azul grisáceo / dorado),
   look "mockup de celular + tarjetas flotantes". `color_tema` del
   evento solo tiñe el acento rosa/dorado (--tema); la base
   crema/oliva/azul-grisáceo NUNCA cambia por evento.
   Tipografía: Playfair Display (serif) + Parisienne (script) + Jost (sans).
   ============================================================ */

:root {
    /* Paleta fija (no la cambia color_tema) */
    --crema: #FAF3EA;
    --crema-alta: #FFFDFA;
    --oliva: #8A8B5E;
    --azul: #5C6B73;
    --dorado: #C9A227;
    --linea: #E9DFCE;

    /* Acento tintable por evento.color_tema — fallback rosa polvoriento */
    --tema: #C97B84;
    /* Variante oscura, derivada automáticamente: se usa donde el acento
       lleva texto/ícono blanco encima (botones sólidos, segmented control) o
       como texto sobre crema/blanco, porque #C97B84 puro no da suficiente
       contraste (~3.2:1 con blanco). Se oscurece lo mínimo necesario para
       llegar a ~4.9:1 (AA) sin perder el tono "rosa polvoriento". */
    --tema-oscuro: color-mix(in srgb, var(--tema) 78%, #000 22%);
    --tema-suave: color-mix(in srgb, var(--tema) 14%, #fff 86%);
    --dorado-suave: color-mix(in srgb, var(--dorado) 16%, #fff 84%);
    --oliva-suave: color-mix(in srgb, var(--oliva) 14%, #fff 86%);

    --ink: #3a332e;
    --muted: var(--azul);
    --paper: var(--crema);

    /* ---- Variables de variante visual (estilo), default = clásico ----
       El body lleva una clase estilo-clasico/estilo-moderno/estilo-rustico
       (ver invitacion.js) que redefine estas variables; el markup y el
       resto de reglas de abajo son una sola plantilla para las 3. */
    --font-titulo: "Playfair Display", Georgia, serif;
    --font-cuerpo: "Jost", system-ui, -apple-system, sans-serif;
    --radio-tarjeta: 1.35rem;
    --radio-elemento: 1rem;
    --espaciado-tarjeta: 1.6rem 1.35rem;
    --separacion-tarjeta: 1.35rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-cuerpo);
    -webkit-text-size-adjust: 100%;
    /* Defensivo: las columnas de grid/flex de abajo ya llevan minmax(0, 1fr)
       / min-width:0 para no desbordar, pero esto evita que cualquier otro
       elemento empuje un scroll horizontal en pantallas angostas. */
    overflow-x: hidden;
}

/* Watermark muy sutil de ramas de olivo en dos esquinas. Opacidad baja
   horneada en el propio SVG (fill-opacity/stroke-opacity), no en el
   elemento, para no aclarar el fondo crema. */
body {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M10 190 C60 150 40 90 100 40 C130 15 160 10 190 10' fill='none' stroke='%238A8B5E' stroke-width='3' stroke-opacity='0.3' stroke-linecap='round'/%3E%3Cg fill='%238A8B5E' fill-opacity='0.25'%3E%3Cellipse cx='40' cy='150' rx='14' ry='7' transform='rotate(-30 40 150)'/%3E%3Cellipse cx='62' cy='118' rx='14' ry='7' transform='rotate(-8 62 118)'/%3E%3Cellipse cx='86' cy='88' rx='14' ry='7' transform='rotate(18 86 88)'/%3E%3Cellipse cx='114' cy='63' rx='13' ry='6' transform='rotate(38 114 63)'/%3E%3Cellipse cx='144' cy='39' rx='13' ry='6' transform='rotate(55 144 39)'/%3E%3Cellipse cx='170' cy='19' rx='12' ry='6' transform='rotate(65 170 19)'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='rotate(180 100 100)'%3E%3Cpath d='M10 190 C60 150 40 90 100 40 C130 15 160 10 190 10' fill='none' stroke='%238A8B5E' stroke-width='3' stroke-opacity='0.3' stroke-linecap='round'/%3E%3Cg fill='%238A8B5E' fill-opacity='0.25'%3E%3Cellipse cx='40' cy='150' rx='14' ry='7' transform='rotate(-30 40 150)'/%3E%3Cellipse cx='62' cy='118' rx='14' ry='7' transform='rotate(-8 62 118)'/%3E%3Cellipse cx='86' cy='88' rx='14' ry='7' transform='rotate(18 86 88)'/%3E%3Cellipse cx='114' cy='63' rx='13' ry='6' transform='rotate(38 114 63)'/%3E%3Cellipse cx='144' cy='39' rx='13' ry='6' transform='rotate(55 144 39)'/%3E%3Cellipse cx='170' cy='19' rx='12' ry='6' transform='rotate(65 170 19)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: -30px -30px, calc(100% + 30px) calc(100% + 30px);
    background-size: 240px 240px, 240px 240px;
    background-attachment: fixed, fixed;
}

h1, h2 {
    font-family: var(--font-titulo);
}

.d-none { display: none !important; }

.pantalla { min-height: 100vh; position: relative; }

.pantalla-centrada {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

/* ---------- Loading ---------- */
.spinner-elegante {
    width: 44px;
    height: 44px;
    border: 4px solid var(--linea);
    border-top-color: var(--tema);
    border-radius: 50%;
    animation: girar 0.9s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Error ---------- */
.error-card { max-width: 360px; }
.error-icono { width: 52px; height: 52px; margin: 0 auto .75rem; color: var(--tema-oscuro); }
.error-icono svg { width: 100%; height: 100%; }
.error-card h1 { font-size: 1.5rem; margin-bottom: .5rem; }
.error-card p { color: var(--muted); font-family: var(--font-cuerpo); }

/* ---------- Kickers y acentos ---------- */
.kicker {
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .72rem;
    font-weight: 600;
    margin: 0 0 .5rem;
}

.kicker-oscuro { color: var(--tema-oscuro); }
.kicker-dorado { color: var(--dorado); text-align: center; }

.acento-script {
    font-family: var(--font-script, "Parisienne"), cursive;
    font-size: 1.9rem;
    line-height: 1.1;
    margin: 0 0 .1rem;
    color: var(--tema-oscuro);
}

.acento-script-chico {
    font-size: 1.5rem;
    color: var(--tema-oscuro);
    margin-bottom: .1rem;
}

/* ---------- Divisor ornamental ---------- */
.divisor {
    width: 130px;
    max-width: 40%;
    margin: 0 auto 1.25rem;
    color: var(--dorado);
    opacity: .6;
}

.divisor svg { width: 100%; height: 14px; display: block; }

/* ---------- Barra superior (encabezado) ---------- */
.topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1.2rem;
    background: linear-gradient(180deg, var(--tema-suave) 0%, var(--crema) 100%);
    position: relative;
    z-index: 3;
}

.menu-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    background: var(--superficie, #fff);
    border-radius: 50%;
    color: var(--tema-oscuro);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 .25rem .6rem rgba(60, 45, 40, .1);
    cursor: pointer;
}

.menu-btn svg { width: 19px; height: 19px; }

.topbar-nombre {
    flex: 1;
    text-align: center;
    margin: 0;
    font-family: var(--font-titulo);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
    line-height: 1.5;
    padding: .15rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-spacer { width: 40px; flex-shrink: 0; }

.menu-nav {
    position: relative;
    z-index: 3;
    background: var(--superficie, #fff);
    margin: 0 1.2rem;
    border-radius: 1rem;
    box-shadow: 0 .8rem 1.6rem rgba(60, 45, 40, .14);
    padding: .4rem;
    display: flex;
    flex-direction: column;
    transform: translateY(-.6rem);
}

.menu-nav a {
    padding: .65rem .9rem;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    border-radius: .7rem;
}

.menu-nav a:hover,
.menu-nav a:focus-visible { background: var(--tema-suave); color: var(--tema-oscuro); }

/* ---------- Contenido ---------- */
.contenido {
    max-width: 480px;
    margin: 0 auto;
    padding: .6rem 1.1rem 3rem;
    position: relative;
    z-index: 1;
}

.tarjeta {
    background: var(--crema-alta);
    border: 1px solid var(--linea);
    border-radius: var(--radio-tarjeta);
    padding: var(--espaciado-tarjeta);
    margin-bottom: var(--separacion-tarjeta);
    box-shadow: 0 1rem 2.2rem rgba(60, 45, 40, .08);
    position: relative;
}

.seccion-titulo { font-size: 1.3rem; margin: 0 0 .5rem; }

/* ---------- Save the date ---------- */
.savedate-card { text-align: center; }

.savedate-foto-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radio-elemento);
    overflow: hidden;
    margin-bottom: 1rem;
    background: linear-gradient(155deg, var(--oliva-suave) 0%, var(--tema-suave) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.savedate-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.savedate-foto-vacia { width: 46px; height: 46px; color: var(--oliva); }
.savedate-foto-vacia svg { width: 100%; height: 100%; }

.savedate-script { font-size: 2.1rem; }

.hero-fecha {
    margin: .15rem 0 0;
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.savedate-mensaje {
    color: #55494c;
    line-height: 1.6;
    margin: .9rem 0 0;
    white-space: pre-line;
}

/* ---------- Cuenta regresiva ---------- */
.countdown-wrap {
    margin-top: 1.35rem;
    background: linear-gradient(155deg, var(--dorado-suave) 0%, var(--crema) 100%);
    border: 1px solid color-mix(in srgb, var(--dorado) 35%, var(--linea));
    border-radius: var(--radio-elemento);
    padding: 1rem .7rem;
}

.countdown-grid {
    display: grid;
    /* minmax(0, 1fr), no solo 1fr: por default un track de grid no se
       encoge más allá del min-content de su contenido, y eso desbordaba
       el número de 3 cifras ("103" días) empujando la 4a columna fuera
       de la tarjeta en viewports angostos. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .4rem;
}

.countdown-box {
    background: var(--superficie, #fff);
    border-radius: .8rem;
    padding: .65rem .2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--dorado) 25%, transparent);
}

.countdown-num {
    font-family: var(--font-titulo);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
}

.countdown-label {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin-top: .3rem;
}

.countdown-hoy {
    margin: .9rem 0 0;
    font-weight: 700;
    color: var(--tema-oscuro);
    font-family: var(--font-titulo);
    font-size: 1.15rem;
}

/* ---------- Botones de save-the-date ---------- */
.savedate-botones {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .55rem;
    margin-top: 1.35rem;
}

.savedate-botones .btn-pill {
    font-size: .68rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .7rem .35rem;
    white-space: normal;
    line-height: 1.25;
    min-width: 0;
}

/* ---------- Botones tipo píldora (reutilizables) ---------- */
.btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .92rem;
    padding: .7rem 1.3rem;
    min-height: 44px;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .12s, opacity .15s;
}

.btn-pill:active { transform: translateY(1px); }

.btn-pill-solido { background: var(--tema-oscuro); color: var(--on-tema, #fff); border-color: var(--tema-oscuro); }
.btn-pill-solido:hover { color: var(--on-tema, #fff); opacity: .92; }
.btn-pill-solido:disabled { opacity: .6; }

/* Dorado con texto oscuro: el dorado sobre blanco no da suficiente
   contraste para texto blanco (~2.4:1); con texto tinta oscura sí (~7.7:1). */
.btn-dorado { background: var(--dorado); color: var(--ink); border-color: var(--dorado); }
.btn-dorado:hover { color: var(--ink); opacity: .92; }

.btn-pill-outline { background: var(--superficie, #fff); color: var(--tema-oscuro); border-color: var(--tema); }
.btn-pill-outline:hover { color: var(--tema-oscuro); }

.detalle-mapa-link { margin-top: .8rem; font-size: .85rem; padding: .55rem 1.1rem; min-height: 38px; }
.detalle-mapa-link svg { width: 15px; height: 15px; }

.btn-enviar { font-size: 1.05rem; padding: .95rem 1rem; min-height: 54px; }

/* ---------- Galería de fotos ---------- */
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
}

.galeria-item {
    aspect-ratio: 1 / 1;
    border-radius: calc(var(--radio-elemento) * .9);
    overflow: hidden;
    background: var(--tema-suave);
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Ubicaciones ---------- */
.ubicacion-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.ubicacion-icono {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--oliva-suave);
    color: var(--oliva);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ubicacion-icono svg { width: 26px; height: 26px; }

.ubicacion-body { flex: 1; min-width: 0; }
.ubicacion-nombre { font-weight: 700; font-family: var(--font-cuerpo); margin: 0 0 .15rem; color: var(--ink); }
.ubicacion-direccion { font-size: .85rem; color: var(--muted); margin: 0 0 .15rem; }
.ubicacion-hora { font-size: .82rem; color: var(--tema-oscuro); font-weight: 600; margin: 0; }

/* ---------- Vestimenta ---------- */
.vestimenta-card { display: flex; gap: 1rem; align-items: flex-start; }

.vestimenta-icono {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--oliva-suave);
    color: var(--oliva);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vestimenta-icono svg { width: 22px; height: 22px; }

.vestimenta-body { flex: 1; min-width: 0; }

.vestimenta-codigo {
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0 0 .3rem;
    color: var(--ink);
}

.vestimenta-nota {
    font-size: .88rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}

/* ---------- Reglas / indicaciones ---------- */
.reglas-lista { list-style: none; margin: .3rem 0 0; padding: 0; }

.regla-item {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: .7rem 0;
    border-top: 1px solid var(--linea);
}
.regla-item:first-child { border-top: 0; padding-top: .2rem; }

.regla-icono {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--oliva-suave);
    color: var(--oliva);
    display: flex;
    align-items: center;
    justify-content: center;
}
.regla-icono svg { width: 20px; height: 20px; }

.regla-texto {
    flex: 1;
    min-width: 0;
    padding-top: .5rem;
    font-size: .95rem;
    line-height: 1.45;
    color: var(--ink);
}

.solo-adultos-nota {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: .8rem 0 0;
    font-size: .82rem;
    color: var(--muted);
}
.solo-adultos-nota svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--oliva); }

/* ---------- Itinerario (línea de tiempo) ---------- */
.itinerario-lista { margin-top: .3rem; }

.itinerario-item {
    display: flex;
    gap: .85rem;
}

.itinerario-marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.itinerario-icono {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tema-suave);
    color: var(--tema-oscuro);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.itinerario-icono svg { width: 19px; height: 19px; }

.itinerario-linea {
    flex: 1;
    width: 2px;
    min-height: .75rem;
    background: var(--linea);
    margin: .25rem 0;
}

.itinerario-item:last-child .itinerario-linea { display: none; }

.itinerario-cuerpo {
    flex: 1;
    min-width: 0;
    padding-bottom: 1.4rem;
}

.itinerario-item:last-child .itinerario-cuerpo { padding-bottom: 0; }

.itinerario-hora {
    font-size: .76rem;
    font-weight: 700;
    color: var(--tema-oscuro);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: .35rem 0 .2rem;
}

/* Momento sin hora definida: discreto, no un "00:00" — texto en itálica,
   sin mayúsculas ni acento de color, más tenue que los que sí tienen hora. */
.itinerario-hora.itinerario-sin-hora {
    color: var(--muted);
    font-weight: 600;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    opacity: .68;
}

.itinerario-titulo {
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 .2rem;
    color: var(--ink);
}

.itinerario-descripcion {
    font-size: .84rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}

/* ---------- Saludo ---------- */
.saludo-card { text-align: center; }
.saludo-para { color: var(--muted); margin: 0; font-size: .92rem; letter-spacing: .02em; }
.saludo-nombre { font-family: var(--font-titulo); font-size: 1.7rem; font-weight: 700; margin: .15rem 0 .6rem; color: var(--tema-oscuro); }
.saludo-linea { color: #55494c; line-height: 1.6; margin: 0; }

/* ---------- RSVP ---------- */
.rsvp-titulo { font-size: 1.4rem; margin: 0 0 .5rem; }
.rsvp-pases { color: var(--muted); margin: 0 0 1.1rem; }
.rsvp-previa {
    background: var(--tema-suave);
    border-radius: .8rem;
    padding: .65rem .9rem;
    font-size: .85rem;
    color: var(--tema-oscuro);
    margin-bottom: 1.1rem;
}

/* Segmented control: dos radios nativos accesibles, ocultos visualmente,
   estilizados como par de botones tipo píldora unidos. */
.rsvp-opciones {
    display: flex;
    flex-direction: row;
    gap: .6rem;
    margin-bottom: 1.2rem;
    background: var(--paper);
    border-radius: 999px;
    padding: .35rem;
}

.opcion-radio {
    flex: 1 1 0;
    /* min-width:0 — sin esto, un flex item no se encoge más allá de su
       min-content y "No podré asistir" empujaba la tarjeta a desbordar
       en viewports angostos (mismo gotcha que las columnas de grid). */
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 999px;
    padding: .8rem .4rem;
    font-weight: 700;
    font-size: .86rem;
    cursor: pointer;
    transition: background-color .15s, color .15s, box-shadow .15s;
    min-height: 44px;
    color: var(--ink);
}

.opcion-radio input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.opcion-radio:has(input:checked),
.opcion-radio.is-checked {
    background: var(--tema-oscuro);
    color: var(--on-tema, #fff);
    box-shadow: 0 .4rem 1rem color-mix(in srgb, var(--tema-oscuro) 45%, transparent);
}

.opcion-radio:has(input:focus-visible) {
    outline: 2px solid var(--tema-oscuro);
    outline-offset: 2px;
}

.form-label { font-weight: 700; font-size: .9rem; }

.form-control {
    border-radius: .9rem;
    border: 2px solid var(--linea);
    padding: .65rem .8rem;
    min-height: 48px;
    font-family: var(--font-cuerpo);
}

.form-control:focus {
    border-color: var(--tema);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tema) 25%, transparent);
}

/* ---------- Stepper de pases ---------- */
.stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--paper);
    border-radius: 999px;
    padding: .35rem;
    border: 2px solid var(--linea);
}

.stepper-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--superficie, #fff);
    color: var(--tema-oscuro);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 .2rem .5rem rgba(60, 40, 45, .1);
    cursor: pointer;
    flex-shrink: 0;
}

.stepper-btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }

.stepper-valor {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    justify-content: center;
    flex: 1;
}

.stepper-num {
    font-family: var(--font-titulo);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--tema-oscuro);
}

.stepper-label {
    font-size: .85rem;
    color: var(--muted);
}

/* ---------- Gracias / QR ---------- */
.gracias-header {
    text-align: center;
    padding: 3rem 1.5rem 2.5rem;
    background: linear-gradient(160deg, var(--tema-suave) 0%, var(--crema) 100%);
    position: relative;
    z-index: 1;
}

.gracias-header .acento-script { font-size: 2.2rem; }

.gracias-titulo {
    font-size: 1.5rem;
    margin: .2rem 0 0;
    color: var(--ink);
    line-height: 1.25;
}

.gracias-resumen-card p { margin: 0; font-size: 1.05rem; }
.qr-card { text-align: center; }
#qr-canvas { max-width: 100%; border-radius: .8rem; margin-top: .25rem; }

/* ---------- Regalos ---------- */
.regalo-item {
    display: flex;
    gap: .9rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-elemento);
    padding: 1rem;
    margin-bottom: .9rem;
}

.regalo-item:last-child { margin-bottom: 0; }

.regalo-imagen {
    width: 72px;
    height: 72px;
    border-radius: calc(var(--radio-elemento) * .7);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--tema-suave);
}

.regalo-info { flex: 1; min-width: 0; }
.regalo-nombre { font-weight: 700; margin: 0 0 .2rem; font-family: var(--font-titulo); font-size: 1.05rem; }
.regalo-descripcion { font-size: .85rem; color: var(--muted); margin: 0 0 .6rem; }

.regalo-estado {
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    padding: .25rem .65rem;
    border-radius: 2rem;
    margin-bottom: .5rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.regalo-estado-disponible { background: var(--oliva-suave); color: color-mix(in srgb, var(--oliva) 70%, #000 30%); }
.regalo-estado-apartado { background: #eee; color: #6a6265; }

.regalo-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }

.btn-mini {
    font-size: .82rem;
    font-weight: 700;
    padding: .5rem .95rem;
    border-radius: 999px;
    border: 2px solid var(--tema);
    background: var(--superficie, #fff);
    color: var(--tema-oscuro);
    text-decoration: none;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

.btn-mini.btn-mini-solido { background: var(--tema-oscuro); border-color: var(--tema-oscuro); color: var(--on-tema, #fff); }

.apartar-form { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.apartar-form input {
    flex: 1;
    min-width: 140px;
    border: 2px solid var(--linea);
    border-radius: 999px;
    padding: .45rem .9rem;
    font-family: var(--font-cuerpo);
}

.regalo-mensaje-inline {
    font-size: .78rem;
    margin-top: .4rem;
}

.regalo-mensaje-inline.error { color: #b23b3b; }
.regalo-mensaje-inline.ok { color: color-mix(in srgb, var(--oliva) 70%, #000 30%); }

@media (min-width: 480px) {
    .saludo-nombre { font-size: 1.9rem; }
    .savedate-script { font-size: 2.4rem; }
}

@media (min-width: 620px) {
    .contenido { max-width: 560px; }
}

/* ============================================================
   Barra de acciones inferior (móvil) — 3 accesos rápidos.
   Oculta en escritorio con la utilidad d-md-none de Bootstrap
   (ya cargado); aquí solo el look y el padding compensatorio.
   ============================================================ */
.barra-inferior {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    background: var(--crema-alta);
    border-top: 1px solid var(--linea);
    box-shadow: 0 -.5rem 1.4rem rgba(60, 45, 40, .12);
    padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom, 0px));
}

.barra-inferior-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .3rem .2rem;
    border: none;
    background: none;
    color: var(--muted);
    font-family: var(--font-cuerpo);
    font-size: .66rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: .8rem;
    cursor: pointer;
    min-height: 44px;
}

.barra-inferior-item svg,
.barra-inferior-icono svg { width: 20px; height: 20px; }
.barra-inferior-item svg,
.barra-inferior-icono { color: var(--tema-oscuro); }

.barra-inferior-item:active,
.barra-inferior-item:focus-visible { background: var(--tema-suave); outline: none; }

/* Compensa la barra fija para que el último elemento del contenido
   (mesa de regalos / RSVP) no quede tapado. Solo aplica donde la barra
   es visible (mismo corte que la utilidad d-md-none de Bootstrap: <768px). */
@media (max-width: 767.98px) {
    #pantalla-invitacion .contenido {
        padding-bottom: calc(3rem + 4.6rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================================
   Variantes de estilo — clásico (default), moderno, rústico.
   Una sola plantilla: cada variante solo redefine variables CSS
   y unos pocos selectores puntuales (nunca duplica el markup).
   ============================================================ */

/* ---- Clásico: valores por defecto ya declarados en :root, se deja
   explícito por claridad y como fallback si `estilo` viene vacío o
   con un valor desconocido (invitacion.js ya cae aquí por default). */
.estilo-clasico {
    --font-titulo: "Playfair Display", Georgia, serif;
    --radio-tarjeta: 1.35rem;
    --radio-elemento: 1rem;
    --espaciado-tarjeta: 1.6rem 1.35rem;
    --separacion-tarjeta: 1.35rem;
}

/* ---- Moderno: editorial, minimalista, un solo acento, alineado a la
   izquierda, mucho aire, radios chicos y ornamento reducido a una línea. */
.estilo-moderno {
    --font-titulo: "Jost", var(--font-cuerpo);
    --radio-tarjeta: .5rem;
    --radio-elemento: .35rem;
    --espaciado-tarjeta: 2.15rem 1.75rem;
    --separacion-tarjeta: 1.9rem;
}

.estilo-moderno .savedate-card,
.estilo-moderno .saludo-card,
.estilo-moderno .qr-card,
.estilo-moderno .gracias-header {
    text-align: left;
}

.estilo-moderno .kicker-dorado { text-align: left; }

/* El script cursivo no encaja en un estilo editorial: se reemplaza por
   un kicker uppercase con la tipografía sans del cuerpo, no una fuente
   nueva ni markup nuevo. */
.estilo-moderno .acento-script,
.estilo-moderno .acento-script-chico,
.estilo-moderno .gracias-header .acento-script {
    font-family: var(--font-cuerpo);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .26em;
    font-size: .74rem;
    color: var(--tema-oscuro);
}

/* Un solo acento dominante: el dorado deja de aparecer aparte, todo lo
   que antes era dorado usa el mismo --tema/--tema-oscuro que ya trae el
   evento (tintable por color_tema, técnica sin cambios). */
.estilo-moderno .kicker-dorado { color: var(--tema-oscuro); }

.estilo-moderno .btn-dorado {
    background: transparent;
    color: var(--tema-oscuro);
    border-color: var(--tema-oscuro);
}
.estilo-moderno .btn-dorado:hover { color: var(--tema-oscuro); }

.estilo-moderno .countdown-wrap {
    background: linear-gradient(155deg, var(--tema-suave) 0%, var(--crema) 100%);
    border-color: color-mix(in srgb, var(--tema) 35%, var(--linea));
}

/* Divisor ornamental → línea fina simple (se oculta el SVG con círculo y
   se usa el propio contenedor como línea, mismo elemento del markup). */
.estilo-moderno .divisor {
    height: 1px;
    background: var(--tema);
    opacity: .35;
}
.estilo-moderno .divisor svg { display: none; }

/* ---- Rústico: el oliva lidera en vez del rosa (ver invitacion.js,
   colorSeguro cae a oliva cuando no hay color_tema válido), crema más
   cálido, textura sutil de papel y watermark de ramas más presente. */
.estilo-rustico {
    --font-titulo: "Cormorant Garamond", Georgia, serif;
    --crema: #FBF0DD;
    --crema-alta: #FFFAF0;
    --radio-tarjeta: 1.15rem;
    --radio-elemento: .9rem;
    --espaciado-tarjeta: 1.7rem 1.45rem;
    --separacion-tarjeta: 1.4rem;
}

.estilo-rustico .saludo-nombre,
.estilo-rustico .rsvp-titulo,
.estilo-rustico .seccion-titulo,
.estilo-rustico .gracias-titulo,
.estilo-rustico .regalo-nombre {
    font-weight: 700;
}

/* Textura sutil de papel (fibra diagonal) + ramas de olivo más visibles
   y más grandes que en las otras 2 variantes (misma técnica de fondo en
   capas ya usada en la regla base de `body`, con opacidades más altas). */
body.estilo-rustico {
    background-image:
        repeating-linear-gradient(135deg, rgba(138, 139, 94, .05) 0, rgba(138, 139, 94, .05) 1px, transparent 1px, transparent 7px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M10 190 C60 150 40 90 100 40 C130 15 160 10 190 10' fill='none' stroke='%238A8B5E' stroke-width='3.4' stroke-opacity='0.5' stroke-linecap='round'/%3E%3Cg fill='%238A8B5E' fill-opacity='0.42'%3E%3Cellipse cx='40' cy='150' rx='15' ry='7.5' transform='rotate(-30 40 150)'/%3E%3Cellipse cx='62' cy='118' rx='15' ry='7.5' transform='rotate(-8 62 118)'/%3E%3Cellipse cx='86' cy='88' rx='15' ry='7.5' transform='rotate(18 86 88)'/%3E%3Cellipse cx='114' cy='63' rx='14' ry='6.5' transform='rotate(38 114 63)'/%3E%3Cellipse cx='144' cy='39' rx='14' ry='6.5' transform='rotate(55 144 39)'/%3E%3Cellipse cx='170' cy='19' rx='13' ry='6.5' transform='rotate(65 170 19)'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='rotate(180 100 100)'%3E%3Cpath d='M10 190 C60 150 40 90 100 40 C130 15 160 10 190 10' fill='none' stroke='%238A8B5E' stroke-width='3.4' stroke-opacity='0.5' stroke-linecap='round'/%3E%3Cg fill='%238A8B5E' fill-opacity='0.42'%3E%3Cellipse cx='40' cy='150' rx='15' ry='7.5' transform='rotate(-30 40 150)'/%3E%3Cellipse cx='62' cy='118' rx='15' ry='7.5' transform='rotate(-8 62 118)'/%3E%3Cellipse cx='86' cy='88' rx='15' ry='7.5' transform='rotate(18 86 88)'/%3E%3Cellipse cx='114' cy='63' rx='14' ry='6.5' transform='rotate(38 114 63)'/%3E%3Cellipse cx='144' cy='39' rx='14' ry='6.5' transform='rotate(55 144 39)'/%3E%3Cellipse cx='170' cy='19' rx='13' ry='6.5' transform='rotate(65 170 19)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat, no-repeat, no-repeat;
    background-position: 0 0, -15px -15px, calc(100% + 15px) calc(100% + 15px);
    background-size: 9px 9px, 300px 300px, 300px 300px;
    background-attachment: fixed, fixed, fixed;
}

/* ---------- Galería del evento (la suben los invitados) ---------- */
.galeria-evento-lead {
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.5;
    margin: 0 0 1.1rem;
}

/* Es un <label> y no un <button>: así el input de archivo queda oculto y el
   área táctil grande la da el propio label, sin JS de por medio. */
.galeria-subir-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 999px;
    border: 2px dashed color-mix(in srgb, var(--tema) 45%, transparent);
    background: color-mix(in srgb, var(--tema) 8%, transparent);
    color: var(--tema-oscuro, var(--tema));
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.galeria-subir-btn:hover,
.galeria-subir-btn:focus-within {
    background: color-mix(in srgb, var(--tema) 15%, transparent);
    border-color: var(--tema);
}

.galeria-subir-btn svg { width: 24px; height: 24px; flex: 0 0 auto; }

.galeria-progreso { margin-top: 1rem; }

.galeria-progreso-barra {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tema) 15%, transparent);
    overflow: hidden;
}

.galeria-progreso-barra span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--tema);
    transition: width .25s ease;
}

.galeria-progreso-texto {
    margin: .5rem 0 0;
    font-size: .88rem;
    color: var(--muted);
    text-align: center;
}

.galeria-alerta { margin-top: 1rem; font-size: .9rem; }

.galeria-ok {
    margin-top: 1rem;
    padding: .8rem 1rem;
    border-radius: .9rem;
    background: color-mix(in srgb, var(--oliva) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--oliva) 35%, transparent);
    color: var(--oliva-oscuro, #5e5f37);
    font-size: .92rem;
    text-align: center;
}

.galeria-evento-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin-top: 1.25rem;
}

.galeria-evento-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: .75rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--tema) 8%, transparent);
}

.galeria-evento-item img,
.galeria-evento-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.galeria-evento-badge {
    position: absolute;
    top: .35rem;
    right: .35rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .62rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    pointer-events: none;
}

.galeria-evento-vacio {
    margin: 1.25rem 0 0;
    text-align: center;
    color: var(--muted);
    font-size: .9rem;
}

/* ============================================================
   ANIMACIONES AL SCROLL
   [data-anim="izq|der|arriba|abajo|zoom|fade"] — solo opacity/transform.
   `.js-anim` en <html> la pone invitacion.js (sin JS / sin
   IntersectionObserver / prefers-reduced-motion nunca existe y todo
   queda visible). `.visible` se agrega UNA vez al entrar al viewport.
   ============================================================ */
.js-anim [data-anim] {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity .9s cubic-bezier(.22, .8, .3, 1) var(--delay, 0s),
                transform .9s cubic-bezier(.22, .8, .3, 1) var(--delay, 0s);
}
.js-anim [data-anim="izq"]    { transform: translateX(-120%); }
.js-anim [data-anim="der"]    { transform: translateX(120%); }
.js-anim [data-anim="arriba"] { transform: translateY(-28px); }
.js-anim [data-anim="abajo"]  { transform: translateY(36px); }
.js-anim [data-anim="zoom"]   { transform: scale(.86); }
.js-anim [data-anim="fade"]   { transform: none; }
.js-anim [data-anim].visible  { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
    .js-anim [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
    body.con-plantilla .tw { animation: none !important; }
}

/* Ningún adorno puede generar scroll horizontal. */
#pantalla-invitacion, #pantalla-gracias { overflow-x: clip; }

/* ============================================================
   PLANTILLAS (body.con-plantilla + body.plantilla-<clave> + body.fam-<familia>)
   Redefinen variables (fondo, acento, acento2, texto, tipografías) y
   agregan adornos como capas; el markup es el mismo para todas.
   ============================================================ */
body.con-plantilla {
    --crema: var(--fondo);
    --crema-alta: var(--card-bg);
    --paper: var(--fondo);
    --tema: var(--acento);
    --tema-oscuro: var(--oscuro);
    --tema-suave: color-mix(in srgb, var(--acento) 16%, var(--fondo));
    --dorado: var(--acento2);
    --dorado-suave: color-mix(in srgb, var(--acento2) 16%, var(--fondo));
    --oliva: var(--oscuro);
    --oliva-suave: color-mix(in srgb, var(--acento) 16%, var(--fondo));
    --ink: var(--texto);
    --muted: color-mix(in srgb, var(--texto) 78%, var(--fondo));
    --linea: color-mix(in srgb, var(--acento) 38%, var(--fondo));
    --superficie: #fff;
    --card-bg: rgba(255, 255, 255, .8);
    --acento3: var(--acento);
    --on-tema: #fff;
    --w1: color-mix(in srgb, var(--acento) 58%, transparent);
    --w2: color-mix(in srgb, var(--acento) 34%, transparent);
    --w3: color-mix(in srgb, var(--acento) 18%, transparent);
    --d1: color-mix(in srgb, var(--acento2) 30%, transparent);
    --d2: color-mix(in srgb, var(--acento2) 16%, transparent);
    background-color: var(--fondo);
    background-image: none;
    font-family: var(--font-cuerpo);
}

/* ---- Paletas: [fondo, acento, acento2, texto] + --oscuro (acento oscurecido
   para texto/botones, contraste >= 4.5:1 sobre blanco) + --hoja ---- */
body.plantilla-xv-rosa {
    --fondo: #FDF0F2; --acento: #E8A0B0; --acento2: #C9A227; --texto: #5A3A42; --oscuro: #B0475F; --hoja: #9DB89A; --acento3: #F4C6D0;
    --font-titulo: "Playfair Display", Georgia, serif; --font-script: "Satisfy", cursive;
}
body.plantilla-xv-lila {
    --fondo: #F4EEFA; --acento: #B79BD6; --acento2: #C0B283; --texto: #43365A; --oscuro: #7B55A8; --hoja: #A9BFA0; --acento3: #D9C9EC;
    --font-titulo: "Playfair Display", Georgia, serif; --font-script: "Satisfy", cursive;
}
body.plantilla-xv-turquesa {
    --fondo: #EAF8F7; --acento: #2BB5AD; --acento2: #C9A227; --texto: #1F4A48; --oscuro: #17807A; --hoja: #7DBFA6; --acento3: #8EDCD6;
    --font-titulo: "Playfair Display", Georgia, serif; --font-script: "Satisfy", cursive;
}
body.plantilla-boda-champana {
    --fondo: #FAF5EA; --acento: #D9C4A0; --acento2: #B8923A; --texto: #4A3F2E; --oscuro: #7F6025; --hoja: #A8A47E;
    --font-titulo: "Cormorant Garamond", Georgia, serif; --font-script: "Great Vibes", cursive;
}
body.plantilla-boda-salvia {
    --fondo: #FFFFFF; --acento: #9CAF88; --acento2: #6F8560; --texto: #38422F; --oscuro: #4F6B3F; --hoja: #9CAF88;
    --font-titulo: "Cormorant Garamond", Georgia, serif; --font-script: "Parisienne", cursive;
}
body.plantilla-boda-borgona {
    --fondo: #FBF2EF; --acento: #722F37; --acento2: #C99A8B; --texto: #3B1A1E; --oscuro: #722F37; --hoja: #7C8C6A;
    --font-titulo: "Playfair Display", Georgia, serif; --font-script: "Parisienne", cursive;
}
body.plantilla-bautizo-celeste {
    --fondo: #EEF6FC; --acento: #8EC5E8; --acento2: #C9A227; --texto: #34506A; --oscuro: #2F77A8; --hoja: #9CC9B8;
    --font-titulo: "Cormorant Garamond", Georgia, serif; --font-script: "Satisfy", cursive;
}
body.plantilla-bautizo-blanco {
    --fondo: #FFFDF8; --acento: #E9E0CC; --acento2: #CDB873; --texto: #5A5242; --oscuro: #7A6A3A; --hoja: #C8C0A0;
    --font-titulo: "Cormorant Garamond", Georgia, serif; --font-script: "Great Vibes", cursive;
}
body.plantilla-infantil-confeti {
    --fondo: #FFF8E1; --acento: #FF7FAF; --acento2: #FFD54A; --texto: #3E3A5C; --oscuro: #C2255C; --acento3: #4DD0B8; --hoja: #4DD0B8;
    --font-titulo: "Fredoka", system-ui, sans-serif; --font-script: "Fredoka", system-ui, sans-serif; --script-peso: 600;
    --card-bg: rgba(255, 255, 255, .88);
}
body.plantilla-infantil-safari {
    --fondo: #F6EDD6; --acento: #5E8C4A; --acento2: #E8822C; --texto: #3F3320; --oscuro: #3E6A2D; --acento3: #8B5E34; --hoja: #3E6A2D;
    --font-titulo: "Fredoka", system-ui, sans-serif; --font-script: "Fredoka", system-ui, sans-serif; --script-peso: 600;
    --card-bg: rgba(255, 252, 242, .86);
}
body.plantilla-babyshower-rosa {
    --fondo: #FFF3F6; --acento: #F4A6BC; --acento2: #FCD9E3; --texto: #5E3C48; --oscuro: #B8456B; --acento3: #FCD9E3; --hoja: #F4A6BC;
    --font-titulo: "Quicksand", system-ui, sans-serif; --font-script: "Great Vibes", cursive; --font-cuerpo: "Quicksand", system-ui, sans-serif;
}
body.plantilla-babyshower-azul {
    --fondo: #F0F7FD; --acento: #8FBFE6; --acento2: #CFE4F5; --texto: #33506B; --oscuro: #3A74A5; --acento3: #CFE4F5; --hoja: #8FBFE6;
    --font-titulo: "Quicksand", system-ui, sans-serif; --font-script: "Great Vibes", cursive; --font-cuerpo: "Quicksand", system-ui, sans-serif;
}
body.plantilla-graduacion-marino {
    --fondo: #12233F; --acento: #C9A227; --acento2: #E6D08A; --texto: #F5F1E6; --oscuro: #D9B94A; --hoja: #C9A227;
    --on-tema: #12233F; --superficie: #1B3258; --card-bg: rgba(255, 255, 255, .06);
    --font-titulo: "Cormorant Garamond", Georgia, serif; --font-script: "Great Vibes", cursive;
}
body.plantilla-graduacion-negro {
    --fondo: #141414; --acento: #C9A227; --acento2: #E6D08A; --texto: #F5F1E6; --oscuro: #D9B94A; --hoja: #C9A227;
    --on-tema: #141414; --superficie: #262626; --card-bg: rgba(255, 255, 255, .06);
    --font-titulo: "Cormorant Garamond", Georgia, serif; --font-script: "Great Vibes", cursive;
}

/* ---- Capa de fondo (fija, detrás de todo): acuarela / confeti / estrellas ---- */
.fondo-plantilla {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
body.fam-flores .fondo-plantilla {
    background:
        radial-gradient(72% 38% at 0% 0%, var(--w1), transparent 72%),
        radial-gradient(52% 30% at 100% 3%, var(--w2), transparent 70%),
        radial-gradient(26% 16% at 68% 13%, var(--d1), transparent 70%),
        radial-gradient(62% 34% at 100% 100%, var(--w1), transparent 72%),
        radial-gradient(48% 26% at 0% 97%, var(--d1), transparent 70%),
        radial-gradient(40% 22% at 8% 58%, var(--w3), transparent 70%);
}
body.fam-rama .fondo-plantilla {
    background:
        radial-gradient(90% 22% at 50% 0%, var(--w2), transparent 70%),
        radial-gradient(55% 28% at 0% 100%, var(--w2), transparent 70%),
        radial-gradient(44% 22% at 100% 100%, var(--d1), transparent 70%),
        radial-gradient(40% 20% at 100% 40%, var(--w3), transparent 70%);
}
body.fam-nubes .fondo-plantilla {
    background:
        radial-gradient(46% 11% at 18% 9%, rgba(255, 255, 255, .95), transparent 72%),
        radial-gradient(40% 9% at 86% 22%, rgba(255, 255, 255, .9), transparent 72%),
        radial-gradient(50% 10% at 30% 92%, rgba(255, 255, 255, .9), transparent 72%),
        linear-gradient(180deg, var(--w2) 0%, transparent 34%),
        linear-gradient(0deg, var(--w3) 0%, transparent 28%);
}
body.fam-confeti .fondo-plantilla {
    --cf1: color-mix(in srgb, var(--acento) 45%, transparent);
    --cf2: color-mix(in srgb, var(--acento3) 50%, transparent);
    --cf3: color-mix(in srgb, var(--acento2) 80%, transparent);
    background-image:
        radial-gradient(circle at 12% 18%, var(--cf1) 0 5px, transparent 6px),
        radial-gradient(circle at 62% 8%, var(--cf2) 0 4px, transparent 5px),
        radial-gradient(circle at 85% 55%, var(--cf3) 0 6px, transparent 7px),
        radial-gradient(circle at 35% 72%, var(--cf2) 0 3px, transparent 4px),
        radial-gradient(circle at 70% 90%, var(--cf1) 0 4px, transparent 5px),
        radial-gradient(circle at 8% 52%, var(--cf3) 0 4px, transparent 5px),
        linear-gradient(180deg, var(--w3) 0%, transparent 30%);
    background-size: 170px 190px, 170px 190px, 170px 190px, 170px 190px, 170px 190px, 170px 190px, 100% 100%;
}
body.fam-safari .fondo-plantilla {
    background:
        radial-gradient(70% 34% at 0% 0%, var(--w2), transparent 72%),
        radial-gradient(60% 30% at 100% 100%, var(--d1), transparent 72%),
        radial-gradient(40% 20% at 100% 30%, var(--w3), transparent 70%);
}
body.fam-estrellas .fondo-plantilla {
    background-image:
        radial-gradient(circle at 20% 20%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 70% 60%, #fff 0 1.6px, transparent 2.6px),
        radial-gradient(circle at 45% 85%, #fff 0 2px, transparent 3px),
        radial-gradient(60% 30% at 0% 0%, var(--w2), transparent 72%),
        radial-gradient(60% 30% at 100% 100%, var(--w2), transparent 72%);
    background-size: 130px 150px, 130px 150px, 130px 150px, 100% 100%, 100% 100%;
}
/* Confeti dorado sutil (puntos suaves) sobre el fondo */
body.fam-geo .fondo-plantilla {
    background:
        radial-gradient(circle at 14% 22%, color-mix(in srgb, var(--acento2) 55%, transparent) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--acento) 55%, transparent) 0 1.6px, transparent 2.6px),
        radial-gradient(circle at 66% 70%, color-mix(in srgb, var(--acento2) 45%, transparent) 0 2px, transparent 3px),
        radial-gradient(circle at 28% 88%, color-mix(in srgb, var(--acento) 50%, transparent) 0 1.6px, transparent 2.6px),
        radial-gradient(80% 36% at 50% 0%, color-mix(in srgb, var(--acento) 20%, transparent), transparent 72%),
        radial-gradient(70% 30% at 50% 100%, color-mix(in srgb, var(--acento) 12%, transparent), transparent 72%);
    background-size: 210px 260px, 210px 260px, 210px 260px, 210px 260px, 100% 100%, 100% 100%;
}
/* Marco curvo tipo portal: doble filo dorado con esquinas generosas */
body.fam-geo .fondo-plantilla::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid color-mix(in srgb, var(--acento) 50%, transparent);
    border-radius: 34px;
    box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6px color-mix(in srgb, var(--acento) 22%, transparent);
}

/* ---- Adornos (capas decorativas) ---- */
.adorno {
    position: absolute;
    width: 104px;
    height: 104px;
    z-index: 2;
    pointer-events: none;
}
.adorno svg { width: 100%; height: 100%; display: block; overflow: visible; }
.adorno-sup-izq { top: -.9rem; left: -1.1rem; }
.adorno-sup-der { top: -.9rem; right: -1.1rem; }
.adorno-sup-der svg { transform: scaleX(-1); }
.adorno-inf-izq { bottom: 0; left: -1.1rem; }
.adorno-inf-der { bottom: 0; right: -1.1rem; }
.adorno-inf-izq svg { transform: scaleY(-1); }
.adorno-inf-der svg { transform: scale(-1, -1); }

.plantilla-pie { position: relative; height: 92px; margin-top: -.3rem; pointer-events: none; }
.gracias-header .adorno-sup-izq { top: .2rem; left: 0; }
.gracias-header .adorno-sup-der { top: .2rem; right: 0; }

/* Colores de los dibujos (clases dentro de los SVG generados por JS) */
body.con-plantilla .a1  { fill: var(--acento); }
body.con-plantilla .a1d { fill: var(--oscuro); opacity: .5; }
body.con-plantilla .a2  { fill: var(--acento2); }
body.con-plantilla .a3  { fill: var(--acento3); }
body.con-plantilla .hj  { fill: var(--hoja); }
body.con-plantilla .tl  { fill: none; stroke: var(--acento2); stroke-width: 1.5; stroke-linecap: round; }
body.con-plantilla .th  { fill: none; stroke: var(--hoja); stroke-width: 1.8; stroke-linecap: round; }
body.con-plantilla .ts  { fill: none; stroke: var(--texto); stroke-width: 1; opacity: .45; stroke-linecap: round; }
body.con-plantilla .nb  { fill: #fff; stroke: var(--acento); stroke-width: 1.4; }
body.con-plantilla .tw  { animation: destello 3.4s ease-in-out infinite; }
body.con-plantilla .tw:nth-of-type(2n) { animation-delay: 1.2s; }
@keyframes destello { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Divisores */
body.con-plantilla .divisor { width: 220px; max-width: 72%; opacity: 1; margin: 0 auto 1.35rem; height: auto; background: none; }
body.con-plantilla .divisor svg { display: block; height: auto; width: 100%; }
body.con-plantilla .divisor-p { margin-top: -.25rem; }

/* ---- Base común de plantillas ---- */
body.con-plantilla .topbar { background: transparent; }
body.con-plantilla .tarjeta { border-color: var(--linea); box-shadow: 0 .9rem 2rem color-mix(in srgb, var(--texto) 9%, transparent); }
body.con-plantilla .savedate-card {
    background: transparent; border-color: transparent; box-shadow: none;
    padding-top: 3.2rem; text-align: center;
}
body.con-plantilla .saludo-card, body.con-plantilla .qr-card, body.con-plantilla .gracias-header { text-align: center; }
body.con-plantilla .gracias-header { background: transparent; }
body.con-plantilla .kicker-dorado,
body.con-plantilla .kicker-oscuro {
    color: var(--tema-oscuro);
    font-family: var(--font-titulo);
    letter-spacing: .3em;
}
body.con-plantilla .kicker-dorado { text-align: center; font-size: .8rem; }
body.con-plantilla .acento-script {
    font-family: var(--font-script), cursive;
    font-weight: var(--script-peso, 400);
    text-transform: none; letter-spacing: 0;
    color: var(--tema-oscuro);
}
body.con-plantilla .hero-fecha { display: none; }
body.con-plantilla .savedate-script {
    font-family: var(--font-titulo);
    font-size: .74rem; font-weight: 600;
    letter-spacing: .36em; text-transform: uppercase;
    color: var(--muted); margin-top: 1.1rem;
}
body.con-plantilla .savedate-mensaje,
body.con-plantilla .saludo-linea { color: var(--texto); }
body.con-plantilla .text-muted { color: var(--muted) !important; }
body.con-plantilla .btn-dorado {
    background: var(--superficie); color: var(--tema-oscuro); border-color: var(--tema-oscuro);
}
body.con-plantilla .btn-dorado:hover { color: var(--tema-oscuro); }
body.con-plantilla .form-control { background: var(--superficie); color: var(--texto); border-color: var(--linea); }
body.con-plantilla .apartar-form input { background: var(--superficie); color: var(--texto); }
body.con-plantilla .barra-inferior { background: var(--superficie); }
body.con-plantilla .spinner-elegante { border-color: var(--linea); border-top-color: var(--tema); }

/* Nombre del evento (solo con plantilla): script grande */
.hero-nombre { display: none; }
body.con-plantilla .hero-nombre {
    display: block;
    font-family: var(--font-script), cursive;
    font-weight: var(--script-peso, 400);
    font-size: 3rem; line-height: 1.05;
    margin: .1rem 0 1.1rem;
    color: var(--tema-oscuro);
    overflow-wrap: anywhere;
}

/* Foto en arco con marco fino */
body.con-plantilla .savedate-foto-wrap {
    width: 86%;
    aspect-ratio: 4 / 4.6;
    margin: 0 auto 1rem;
    border-radius: 999px 999px 1.1rem 1.1rem;
    box-shadow: 0 0 0 5px var(--card-bg), 0 0 0 6.5px var(--acento2);
}

/* ---- Fecha grande: mes pequeño | día enorme | año pequeño — línea — hora ---- */
.fecha-grande { display: none; }
body.con-plantilla .fecha-grande {
    display: flex; align-items: stretch; justify-content: center;
    gap: 1.2rem; margin: 1.1rem auto .6rem;
}
.fg-fecha { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.fg-dsem { font-size: .66rem; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); margin-bottom: .45rem; font-weight: 600; margin-right: -.32em; }
.fg-mes { font-size: .86rem; letter-spacing: .34em; text-transform: uppercase; color: var(--tema-oscuro); font-weight: 600; margin-right: -.34em; }
.fg-dia { font-variant-numeric: lining-nums; font-family: var(--font-titulo); font-size: 5.4rem; font-weight: 600; line-height: 1.02; color: var(--texto); margin: .1rem 0 .4rem; }
.fg-anio { font-size: .86rem; letter-spacing: .32em; color: var(--muted); margin-right: -.32em; font-weight: 500; }
.fg-linea { width: 1px; flex: 0 0 1px; background: linear-gradient(180deg, transparent, var(--acento2) 22%, var(--acento2) 78%, transparent); }
.fg-hora { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; line-height: 1; min-width: 5.2rem; }
.fg-icono { width: 34px; height: 34px; color: var(--tema-oscuro); }
.fg-icono svg { width: 100%; height: 100%; }
.fg-hora-num { font-family: var(--font-titulo); font-size: 1.8rem; font-weight: 600; color: var(--texto); }
.fg-ampm { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-right: -.3em; font-weight: 600; }

/* ---- Variaciones por familia ---- */
body.fam-confeti .tarjeta, body.fam-safari .tarjeta {
    border: 2px solid var(--acento);
    border-radius: 1.7rem;
    box-shadow: 0 .4rem 0 color-mix(in srgb, var(--acento) 45%, transparent);
}
body.fam-safari .tarjeta { border-color: var(--acento2); box-shadow: 0 .4rem 0 color-mix(in srgb, var(--acento2) 45%, transparent); }
body.fam-confeti .savedate-card, body.fam-safari .savedate-card { border-color: transparent; box-shadow: none; }
body.fam-confeti .hero-nombre, body.fam-safari .hero-nombre { font-size: 2.4rem; text-transform: uppercase; letter-spacing: .01em; }
body.fam-confeti .savedate-foto-wrap, body.fam-safari .savedate-foto-wrap {
    aspect-ratio: 4 / 3.4; width: 100%; border-radius: 1.6rem;
    box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--acento);
}
body.fam-safari .savedate-foto-wrap { box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--acento2); }
body.fam-confeti .fg-dia, body.fam-safari .fg-dia { color: var(--oscuro); }
body.fam-confeti .kicker-dorado, body.fam-safari .kicker-dorado,
body.fam-confeti .kicker-oscuro, body.fam-safari .kicker-oscuro { letter-spacing: .14em; }

body.fam-estrellas .hero-nombre { font-size: 3.1rem; }
body.fam-estrellas .tarjeta { border-radius: 1.8rem; }
body.fam-estrellas .kicker-dorado, body.fam-estrellas .kicker-oscuro { letter-spacing: .24em; }
body.fam-estrellas .savedate-foto-wrap { border-radius: 50%; aspect-ratio: 1 / 1; width: 78%; }

body.fam-nubes .savedate-foto-wrap { box-shadow: 0 0 0 5px #fff, 0 0 0 6.5px var(--acento); }
body.fam-geo .tarjeta {
    border-radius: 1.9rem;
    border-color: color-mix(in srgb, var(--acento) 40%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--superficie) 96%, #fff), color-mix(in srgb, var(--superficie) 88%, var(--fondo)));
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06);
}
body.fam-geo .savedate-card { border-color: transparent; background: transparent; box-shadow: none; }
body.fam-geo .hero-nombre {
    font-family: var(--font-script), cursive; font-weight: 400; font-size: 3.1rem;
    text-transform: none; letter-spacing: 0; line-height: 1.12;
    color: var(--acento2);
}
body.fam-geo .kicker, body.fam-geo .kicker-dorado, body.fam-geo .kicker-oscuro, body.fam-geo .savedate-script {
    font-family: "Cinzel", Georgia, serif; text-transform: uppercase; letter-spacing: .26em; font-size: .74rem; font-weight: 600;
}
body.fam-geo .acento-script { font-size: 1.7rem; line-height: 1.2; }
body.fam-geo .savedate-foto-wrap {
    border-radius: 999px 999px 1.6rem 1.6rem; aspect-ratio: 4 / 4.6; width: 86%;
    box-shadow: 0 0 0 5px var(--fondo), 0 0 0 6.5px var(--acento), 0 0 0 12px color-mix(in srgb, var(--acento) 16%, transparent);
}
body.fam-geo .fg-dia { color: var(--acento2); font-weight: 500; }
body.fam-geo .btn, body.fam-geo .btn-dorado, body.fam-geo .form-control { border-radius: 999px; }
body.fam-geo textarea.form-control { border-radius: 1.2rem; }

/* ---- Plantillas oscuras (graduación): superficies y estados legibles ---- */
body.fam-geo { color-scheme: dark; }
body.fam-geo .regalo-estado-disponible { background: rgba(217, 185, 74, .16); color: #E6D08A; }
body.fam-geo .regalo-estado-apartado { background: rgba(255, 255, 255, .1); color: #cfd3dc; }
body.fam-geo .regalo-mensaje-inline.ok, body.fam-geo .galeria-ok { color: #E6D08A; }
body.fam-geo .regalo-mensaje-inline.error { color: #ff9d9d; }
body.fam-geo .countdown-box { border-color: color-mix(in srgb, var(--acento) 35%, transparent); }
body.fam-geo .nb { fill: var(--superficie); }

@media (min-width: 480px) {
    body.con-plantilla .hero-nombre { font-size: 3.4rem; }
    body.fam-confeti .hero-nombre, body.fam-safari .hero-nombre { font-size: 2.7rem; }
    .adorno { width: 124px; height: 124px; }
}

/* El riel del Sí/No usa --paper; con fondo blanco (boda-salvia) desaparecía. */
body.con-plantilla .rsvp-opciones {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--oscuro, #777) 28%, transparent);
}

/* Graduación: destellos dorados que respiran sin apagarse del todo */
@keyframes destello-gala { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
body.fam-geo .tw { animation-name: destello-gala; }
@media (prefers-reduced-motion: reduce) { body.fam-geo .tw { animation: none !important; } }

/* ============================================================
   PLANTILLA PERSONALIZADA (body.plantilla-personalizada)
   Los colores base (--fondo, --acento, --acento2, --texto, --oscuro,
   --on-tema, --superficie, --card-bg), tipografías y radios los pone
   invitacion.js como estilos en línea, ya validados. Aquí solo lo derivado
   y las variaciones por adornos / intensidad / tarjetas.
   ============================================================ */
body.plantilla-personalizada {
    --hoja: color-mix(in srgb, var(--acento) 55%, var(--acento2));
    --acento3: color-mix(in srgb, var(--acento) 55%, var(--acento2));
}

/* Fondos de las familias exclusivas de la personalizada */
body.fam-hojas .fondo-plantilla {
    background:
        radial-gradient(80% 24% at 50% 0%, var(--w2), transparent 70%),
        radial-gradient(52% 28% at 0% 100%, var(--w2), transparent 70%),
        radial-gradient(44% 22% at 100% 100%, var(--d1), transparent 70%);
}
body.fam-geosuave .fondo-plantilla {
    background:
        radial-gradient(circle at 14% 22%, color-mix(in srgb, var(--acento2) 45%, transparent) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--acento) 45%, transparent) 0 1.6px, transparent 2.6px),
        radial-gradient(circle at 66% 70%, color-mix(in srgb, var(--acento2) 35%, transparent) 0 2px, transparent 3px),
        radial-gradient(circle at 28% 88%, color-mix(in srgb, var(--acento) 40%, transparent) 0 1.6px, transparent 2.6px),
        radial-gradient(80% 30% at 50% 0%, var(--w3), transparent 72%);
    background-size: 210px 260px, 210px 260px, 210px 260px, 210px 260px, 100% 100%;
}
body.fam-ninguno .fondo-plantilla { background: none; }
body.fam-ninguno .divisor, body.fam-ninguno .divisor-p { display: none; }

/* Confeti dentro de la personalizada: las tarjetas siguen el radio elegido
   (las reglas fam-confeti de arriba son de la plantilla infantil). */
body.plantilla-personalizada.fam-confeti .tarjeta {
    border: 1px solid var(--linea);
    border-radius: var(--radio-tarjeta);
    box-shadow: 0 .9rem 2rem color-mix(in srgb, var(--texto) 9%, transparent);
}
body.plantilla-personalizada.fam-confeti .savedate-card { border-color: transparent; box-shadow: none; }
body.plantilla-personalizada.fam-confeti .hero-nombre { font-size: 3rem; text-transform: none; letter-spacing: 0; }
body.plantilla-personalizada.fam-confeti .savedate-foto-wrap {
    aspect-ratio: 4 / 4.6; width: 86%; border-radius: 999px 999px 1.1rem 1.1rem;
    box-shadow: 0 0 0 5px var(--card-bg), 0 0 0 6.5px var(--acento2);
}
body.plantilla-personalizada.fam-confeti .fg-dia { color: var(--texto); }
body.plantilla-personalizada.fam-confeti .kicker-dorado,
body.plantilla-personalizada.fam-confeti .kicker-oscuro { letter-spacing: .3em; }
@media (min-width: 480px) {
    body.plantilla-personalizada.fam-confeti .hero-nombre { font-size: 3.4rem; }
}

/* Formas de tarjeta: la foto en arco se suaviza con tarjetas rectas */
body.tarj-recta .savedate-foto-wrap { border-radius: 999px 999px .3rem .3rem; }
body.tarj-recta .btn-pill, body.tarj-recta .btn-mini, body.tarj-recta .form-control { border-radius: .35rem; }
body.tarj-suave .btn-pill, body.tarj-suave .btn-mini { border-radius: .8rem; }

/* Intensidad sutil: adornos más pequeños y tenues */
body.int-sutil .adorno { width: 78px; height: 78px; }
body.int-sutil .adorno svg { opacity: .55; }
body.int-sutil .fondo-plantilla { opacity: .5; }
body.int-sutil .plantilla-pie { height: 64px; }
@media (min-width: 480px) { body.int-sutil .adorno { width: 92px; height: 92px; } }

/* Fondos oscuros (calculado en JS por luminancia): superficies y estados legibles */
body.pers-oscuro { color-scheme: dark; }
body.pers-oscuro .regalo-estado-disponible { background: color-mix(in srgb, var(--oscuro) 20%, transparent); color: var(--oscuro); }
body.pers-oscuro .regalo-estado-apartado { background: rgba(255, 255, 255, .1); color: color-mix(in srgb, var(--texto) 85%, transparent); }
body.pers-oscuro .regalo-mensaje-inline.ok, body.pers-oscuro .galeria-ok { color: var(--oscuro); }
body.pers-oscuro .regalo-mensaje-inline.error { color: #ff9d9d; }
body.pers-oscuro .countdown-box { border-color: color-mix(in srgb, var(--acento) 35%, transparent); }
body.pers-oscuro .nb { fill: var(--superficie); }