/* Transición suave entre páginas (sobre → invitación) en navegadores que
   la soportan (Chrome/Edge recientes). Progressive enhancement: en los
   navegadores que no la reconocen simplemente no pasa nada, no rompe nada. */
@view-transition {
    navigation: auto;
}

/* =========================================================
   TOKENS
   Paleta: papel de lino + tinta botánica + sello de bronce
   ========================================================= */
:root {
    --tinta: #24312B;
    --tinta-suave: #4C5A52;
    --papel: #EDE7D8;
    --papel-claro: #F6F2E7;
    --sage: #47593F;
    --sage-claro: #8AA179;
    --bronce: #A6812E;
    --bronce-claro: #C7A75B;
    --vino: #6E3F4C;
    --linea: #CBC2A4;
    --blanco: #FFFDF8;

    --display: "Fraunces", serif;
    --cuerpo: "Literata", serif;
    --utilitaria: "Work Sans", sans-serif;

    --ancho-lectura: 640px;
    --radio: 3px;
    --sombra-suave: 0 12px 32px -18px rgba(36, 49, 43, 0.45);

    --ornamento-sage: url("/static/img/ornamento-floral-sage.svg");
    --ornamento-sage-claro: url("/static/img/ornamento-floral-sage-claro.svg");
    --ornamento-bronce: url("/static/img/ornamento-floral-bronce.svg");
    --ornamento-vino: url("/static/img/ornamento-floral-vino.svg");
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--cuerpo);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; }

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--bronce);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   LAYOUT BASE
   ========================================================= */
.contenedor {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.pantalla-centrada {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(166, 129, 46, 0.07), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(71, 89, 63, 0.07), transparent 45%);
}

/* Ramitas florales que enmarcan cualquier pantalla centrada (bienvenida,
   sobre, revisá tu correo, token inválido, admin...). Sutiles: dan aire de
   papelería de bodas sin competir con el contenido. */
.pantalla-centrada::before,
.pantalla-centrada::after {
    content: "";
    position: absolute;
    width: clamp(90px, 18vw, 150px);
    height: clamp(80px, 16.1vw, 135px);
    background: var(--ornamento-sage) center / contain no-repeat;
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
}
.pantalla-centrada::before {
    top: 10px;
    left: 10px;
    transform: rotate(-8deg);
}
.pantalla-centrada::after {
    bottom: 10px;
    right: 10px;
    transform: rotate(180deg);
}
.pantalla-centrada > * { position: relative; z-index: 1; }

.franja {
    width: 100%;
    max-width: var(--ancho-lectura);
    margin: 0 auto;
    padding: 64px 24px;
}

.franja--angosta { max-width: 480px; }

/* Marca visual del sitio: una patita de perro que representa la unión de
   los novios (antes era un "&"), aparece como sello y como divisor. */
.ampersand {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    color: var(--bronce);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ampersand svg {
    width: 1em;
    height: 1em;
    display: block;
}

.divisor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 8px 0 40px;
    color: var(--bronce-claro);
}
.divisor::before,
.divisor::after {
    content: "";
    height: 1px;
    flex: 1;
    max-width: 96px;
    background: var(--linea);
}
.divisor .ampersand { font-size: 22px; }

/* =========================================================
   TIPOGRAFÍA
   ========================================================= */
h1, h2, h3 {
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--tinta);
    margin: 0 0 0.4em;
}

h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 500; }
h2 { font-size: clamp(1.6rem, 4vw, 2rem); font-style: italic; font-weight: 400; }
h3 { font-size: 1.15rem; font-weight: 600; font-style: normal; }

.eyebrow {
    font-family: var(--utilitaria);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sage);
    display: block;
    margin-bottom: 14px;
}

p { margin: 0 0 1em; color: var(--tinta-suave); }
p:last-child { margin-bottom: 0; }

.texto-fino {
    font-family: var(--utilitaria);
    font-size: 0.85rem;
    color: var(--tinta-suave);
}

/* =========================================================
   BOTONES Y ENLACES DE ACCIÓN
   ========================================================= */
.boton {
    font-family: var(--utilitaria);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: var(--radio);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }

.boton--primario {
    background: var(--sage);
    color: var(--blanco);
    box-shadow: var(--sombra-suave);
}
.boton--primario:hover { background: #3c4b35; }

.boton--fantasma {
    background: transparent;
    border-color: var(--tinta);
    color: var(--tinta);
}
.boton--fantasma:hover { background: rgba(36, 49, 43, 0.06); }

.boton--ancho { width: 100%; }

.boton--google {
    background: var(--blanco);
    color: #3c4043;
    border-color: #dadce0;
    text-transform: none;
    letter-spacing: normal;
}
.boton--google:hover { background: #f8f8f8; }

.separador-o {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--tinta-suave);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.separador-o::before,
.separador-o::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(36, 49, 43, 0.15);
}

/* =========================================================
   FORMULARIOS
   ========================================================= */
.campo {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--papel-claro);
    font-family: var(--cuerpo);
}
.campo:focus { border-color: var(--bronce); }

.form-bienvenida {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 360px;
    margin-top: 28px;
}

.grupo-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    margin-bottom: 16px;
}
.grupo-campo label {
    font-family: var(--utilitaria);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--tinta-suave);
}

/* =========================================================
   EL SOBRE (pantalla de entrada personalizada)
   ========================================================= */
.escena-sobre {
    perspective: 1400px;
    /* Un lino más profundo que el papel del sobre (--blanco / --papel-claro)
       para que el sobre se destaque como el protagonista de la escena. */
    background:
        radial-gradient(circle at 50% 12%, rgba(166, 129, 46, 0.14), transparent 55%),
        radial-gradient(circle at 12% 88%, rgba(71, 89, 63, 0.22), transparent 50%),
        radial-gradient(circle at 88% 90%, rgba(71, 89, 63, 0.16), transparent 45%),
        linear-gradient(160deg, #E2D8BE 0%, #D6C9A5 55%, #C9B98D 100%);
}
.escena-sobre::before { opacity: 0.22; }
.escena-sobre::after { opacity: 0.22; }

/* Ramita extra, pequeña, saliendo por detrás del sobre para darle
   profundidad de "flatlay" a la escena. */
.escena-sobre .sobre::before {
    content: "";
    position: absolute;
    bottom: -6px;
    right: -34px;
    width: 88px;
    height: 79px;
    background: var(--ornamento-vino) center / contain no-repeat;
    opacity: 0.5;
    transform: rotate(-20deg);
}

.sobre {
    position: relative;
    width: min(320px, 78vw);
    height: 210px;
    cursor: pointer;
    margin-bottom: 28px;
}

.sobre-cuerpo {
    position: absolute;
    inset: 0;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 26px;
    overflow: hidden;
}

.sobre-cuerpo::before,
.sobre-cuerpo::after {
    content: "";
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-top: 105px solid var(--papel-claro);
}
.sobre-cuerpo::before {
    left: 0;
    border-left: 160px solid transparent;
}
.sobre-cuerpo::after {
    right: 0;
    border-right: 160px solid transparent;
}

.solapa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 105px;
    background: var(--papel-claro);
    border-bottom: 1px solid var(--linea);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top;
    transition: transform 0.6s cubic-bezier(0.6, 0, 0.4, 1);
    z-index: 2;
}

.sello {
    position: absolute;
    top: 78px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--bronce-claro), var(--bronce) 70%);
    box-shadow: 0 4px 10px rgba(36, 49, 43, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.sello .ampersand {
    color: var(--papel-claro);
    font-size: 26px;
}

.texto-sobre {
    font-family: var(--utilitaria);
    font-size: 0.82rem;
    color: var(--tinta-suave);
    z-index: 1;
    line-height: 1.5;
}
.texto-sobre strong {
    display: block;
    font-family: var(--display);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--tinta);
    margin-top: 4px;
}

.sobre.abierto .solapa {
    transform: rotateX(180deg);
}
.sobre.abierto .sello {
    opacity: 0;
    transform: translate(-50%, -14px) scale(0.7);
}

.pista {
    font-family: var(--utilitaria);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

/* =========================================================
   HERO DE LA INVITACIÓN
   ========================================================= */
.hero-invitacion {
    position: relative;
    text-align: center;
    padding: 88px 24px 64px;
    overflow: hidden;
    min-height: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image:
        linear-gradient(180deg, rgba(20, 26, 20, 0.42) 0%, rgba(20, 26, 20, 0.34) 45%, rgba(16, 21, 16, 0.62) 100%),
        url("/static/img/hero-fondo.jpg");
    background-size: cover;
    background-position: center;
    color: var(--blanco);
}
.hero-invitacion::before,
.hero-invitacion::after {
    content: "";
    position: absolute;
    top: 18px;
    width: clamp(56px, 12vw, 100px);
    height: clamp(50px, 10.8vw, 90px);
    background: var(--ornamento-sage-claro) center / contain no-repeat;
    --opacidad-ornamento: 0.55;
    opacity: 0;
    animation: hero-ornamento-entra 1.1s ease 0.15s forwards;
    filter: brightness(0) invert(1);
}
.hero-invitacion::before {
    left: clamp(4px, 6vw, 48px);
    transform: rotate(35deg);
}
.hero-invitacion::after {
    right: clamp(4px, 6vw, 48px);
    transform: scaleX(-1) rotate(35deg);
}
.hero-invitacion .ampersand {
    font-size: clamp(2.6rem, 8vw, 4rem);
    display: block;
    margin-bottom: 8px;
    color: var(--blanco);
}
.hero-invitacion h1 {
    color: var(--blanco);
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.hero-invitacion .fecha {
    font-family: var(--utilitaria);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--papel-claro);
    margin-top: 10px;
}
.hero-invitacion .lugar {
    color: var(--papel-claro);
    opacity: 0.9;
    margin-top: 4px;
}

/* Entrada escalonada: el sello, el nombre, la fecha/lugar y la cuenta
   regresiva aparecen uno después de otro apenas se carga la página, en
   vez de mostrarse todos de golpe (y de paso evita que la cuenta
   regresiva se vea "vacía" el instante antes de que el script la calcule,
   porque para cuando termina su fade-in ya tiene los números listos). */
@keyframes hero-elemento-entra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-ornamento-entra {
    from { opacity: 0; }
    to   { opacity: var(--opacidad-ornamento); }
}
.hero-invitacion .ampersand,
.hero-invitacion h1,
.hero-invitacion .fecha,
.hero-invitacion .lugar,
.hero-invitacion .cuenta-regresiva {
    opacity: 0;
    animation: hero-elemento-entra 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-invitacion .ampersand { animation-delay: 0.05s; }
.hero-invitacion h1 { animation-delay: 0.16s; }
.hero-invitacion .fecha { animation-delay: 0.34s; }
.hero-invitacion .lugar { animation-delay: 0.42s; }
.hero-invitacion .cuenta-regresiva { animation-delay: 0.55s; }

/* =========================================================
   CUENTA REGRESIVA
   ========================================================= */
.cuenta-regresiva {
    display: flex;
    justify-content: center;
    gap: clamp(10px, 4vw, 28px);
    flex-wrap: wrap;
    margin: 36px 0 4px;
}
.cuenta-regresiva .unidad {
    min-width: 68px;
    text-align: center;
}
.cuenta-regresiva .numero {
    font-family: var(--display);
    font-size: clamp(1.5rem, 4.6vw, 2.4rem);
    font-weight: 500;
    color: var(--blanco);
    display: block;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
}
.cuenta-regresiva .etiqueta {
    font-family: var(--utilitaria);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--papel-claro);
    opacity: 0.9;
}
.hero-invitacion .cuenta-regresiva .texto-fino {
    color: var(--blanco);
    font-family: var(--display);
    font-size: 1.3rem;
}

/* =========================================================
   SECCIÓN GENÉRICA
   ========================================================= */
.seccion { text-align: center; }
.seccion + .seccion {
    position: relative;
    border-top: 1px solid var(--linea);
}
/* Una florecita pequeña "sentada" sobre la línea divisoria, en vez de una
   raya seca entre secciones. */
.seccion + .seccion::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 50%;
    width: 30px;
    height: 27px;
    background: var(--ornamento-bronce) center / contain no-repeat;
    opacity: 0.55;
    transform: translateX(-50%) rotate(200deg);
}

.mensaje-novios {
    font-family: var(--cuerpo);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--tinta);
    max-width: 52ch;
    margin: 0 auto;
}

/* =========================================================
   ITINERARIO (línea de tiempo real → la numeración sí aporta info)
   Cada paso es un acordeón: el encabezado (hora + actividad) siempre
   se ve, y al tocarlo se despliega el detalle sin recargar la página.
   ========================================================= */
.itinerario {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    max-width: 420px;
    margin-inline: auto;
    text-align: left;
}
.itinerario-item { border-top: 1px solid var(--linea); }
.itinerario-item:first-child { border-top: none; }

.itinerario-cabecera {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 16px 0;
    text-align: left;
}
/* Encabezados sin detalle (por si algún paso no lo tiene): mismo look,
   pero sin pinta de botón clickeable. */
.itinerario-cabecera--simple { color: inherit; }

button.itinerario-cabecera {
    background: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}
button.itinerario-cabecera:hover .actividad,
button.itinerario-cabecera:focus-visible .actividad {
    color: var(--sage);
}

.itinerario .hora {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--bronce);
    min-width: 64px;
    flex-shrink: 0;
}
.itinerario .actividad {
    font-family: var(--utilitaria);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    color: var(--tinta);
    padding-top: 2px;
    transition: color 0.2s ease;
}

.itinerario-flecha {
    margin-left: auto;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--bronce-claro);
    transition: transform 0.3s ease;
}
.itinerario-cabecera[aria-expanded="true"] .itinerario-flecha {
    transform: rotate(180deg);
}

/* Truco de grid para animar de alto 0 a "alto real" sin tener que medir
   nada por JS: el contenedor pasa de 0fr a 1fr y el contenido interior,
   que tiene overflow oculto, se revela de forma suave. */
.itinerario-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}
.itinerario-panel.abierto {
    grid-template-rows: 1fr;
}
.itinerario-panel-interior {
    overflow: hidden;
}
.itinerario-panel-interior p {
    margin: 0 0 18px;
    padding-right: 26px;
    padding-left: 84px;
    font-family: var(--utilitaria);
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--tinta-suave);
}
@media (max-width: 480px) {
    .itinerario-panel-interior p { padding-left: 0; }
}

.itinerario-imagen {
    display: block;
    width: calc(100% - 84px);
    margin: 0 26px 14px 84px;
    max-height: 220px;
    object-fit: cover;
    border-radius: 6px;
}
@media (max-width: 480px) {
    .itinerario-imagen { width: 100%; margin-left: 0; margin-right: 0; }
}

/* Sub-bloque "Opción vegetariana" dentro del paso de la cena */
.itinerario-vegetariana {
    margin: 4px 26px 18px 84px;
    padding: 14px 16px;
    background: var(--fondo-alterno, #FAF7EF);
    border-left: 3px solid var(--sage);
    border-radius: 0 6px 6px 0;
}
.itinerario-vegetariana .itinerario-imagen {
    width: 100%;
    margin: 8px 0 10px;
    max-height: 180px;
}
.itinerario-vegetariana-etiqueta {
    display: inline-block;
    font-family: var(--utilitaria);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sage);
    font-weight: 600;
    margin-bottom: 8px;
}
.itinerario-vegetariana p {
    margin: 0;
    padding: 0;
    font-family: var(--utilitaria);
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--tinta-suave);
}
@media (max-width: 480px) {
    .itinerario-vegetariana { margin-left: 0; margin-right: 0; }
}

/* =========================================================
   MAPA / UBICACIÓN
   ========================================================= */
.mapa-envoltorio {
    margin-top: 28px;
    border-radius: var(--radio);
    overflow: hidden;
    border: 1px solid var(--linea);
    box-shadow: var(--sombra-suave);
}
.mapa-envoltorio iframe { display: block; width: 100%; height: 280px; border: 0; }

/* =========================================================
   DRESS CODE
   ========================================================= */
.tarjeta-dresscode {
    display: inline-block;
    margin-top: 8px;
    padding: 20px 32px;
    border: 1px solid var(--bronce-claro);
    border-radius: var(--radio);
    background: var(--papel-claro);
}
.tarjeta-dresscode .nombre-codigo {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--sage);
}

/* =========================================================
   GALERÍA
   ========================================================= */
.galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 32px;
}
.galeria img,
.galeria .marcador {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radio);
}
.galeria .marcador {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(155deg, var(--papel-claro), var(--papel));
    border: 1px dashed var(--linea);
    color: var(--tinta-suave);
    font-family: var(--utilitaria);
    font-size: 0.7rem;
    text-align: center;
    padding: 8px;
}

/* =========================================================
   MESA DE REGALOS
   ========================================================= */
.regalos .boton { margin-top: 20px; }

/* =========================================================
   RSVP
   ========================================================= */
.rsvp-opciones {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}
.rsvp-opciones input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.rsvp-opciones label {
    flex: 1;
    text-align: center;
    padding: 16px 12px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    font-family: var(--utilitaria);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.rsvp-opciones input:checked + label {
    border-color: var(--sage);
    background: var(--sage);
    color: var(--blanco);
}
.rsvp-opciones input:focus-visible + label {
    outline: 2px solid var(--bronce);
    outline-offset: 2px;
}

.linea-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    font-family: var(--utilitaria);
    font-size: 0.88rem;
    justify-content: center;
}

#datos-acompanante {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

textarea.campo { min-height: 96px; resize: vertical; }

.respuesta-actual {
    margin-top: 24px;
    padding: 14px 18px;
    border-radius: var(--radio);
    background: var(--papel-claro);
    font-family: var(--utilitaria);
    font-size: 0.85rem;
}

/* =========================================================
   MENSAJES DE ESTADO (revisa tu correo / token inválido / error)
   ========================================================= */
.icono-circulo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--papel-claro);
    border: 1px solid var(--bronce-claro);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
.icono-circulo .ampersand { font-size: 30px; }

/* =========================================================
   PANEL DE ADMINISTRACIÓN
   ========================================================= */
.admin-envoltorio {
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 24px 80px;
    width: 100%;
}
.admin-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
}
.admin-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}
.admin-resumen .tarjeta {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 16px;
    text-align: center;
}
.admin-resumen .tarjeta .numero {
    font-family: var(--display);
    font-size: 1.8rem;
    color: var(--sage);
    display: block;
}
.admin-resumen .tarjeta .etiqueta {
    font-family: var(--utilitaria);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tinta-suave);
}

.tabla-envoltorio {
    overflow-x: auto;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--blanco);
}
table.admin-tabla {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--utilitaria);
    font-size: 0.85rem;
}
table.admin-tabla th,
table.admin-tabla td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--linea);
    white-space: nowrap;
}
table.admin-tabla th {
    background: var(--papel-claro);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.7rem;
}
.etiqueta-estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}
.etiqueta-estado--si { background: rgba(71, 89, 63, 0.15); color: var(--sage); }
.etiqueta-estado--no { background: rgba(110, 63, 76, 0.14); color: var(--vino); }
.etiqueta-estado--pendiente { background: rgba(166, 129, 46, 0.15); color: var(--bronce); }

.admin-login-tarjeta {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 40px 36px;
    max-width: 360px;
    width: 100%;
    box-shadow: var(--sombra-suave);
}
.admin-error {
    color: var(--vino);
    font-family: var(--utilitaria);
    font-size: 0.85rem;
    margin-bottom: 16px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 640px) {
    .franja { padding: 48px 20px; }
    .hero-invitacion { padding: 64px 20px 40px; }
    .galeria { grid-template-columns: repeat(2, 1fr); }
    .rsvp-opciones { flex-direction: column; }
    .admin-cabecera { flex-direction: column; align-items: flex-start; }

    /* En pantallas angostas las ramitas laterales quedan muy pegadas al
       título; se achican y se corren un poco más afuera. */
    .hero-invitacion::before,
    .hero-invitacion::after {
        width: 56px;
        --opacidad-ornamento: 0.32;
        top: 4px;
    }
    .pantalla-centrada::before,
    .pantalla-centrada::after {
        width: 100px;
        opacity: 0.14;
    }
}