/**
 * Fifth Anniversary landing — Laudato Si' Action Platform
 * Roma, 5–6 November 2026.
 *
 * Estilos aislados bajo .anniv para no tocar main.min.css.
 * La paleta reutiliza los colores de marca del tema.
 */

.anniv {
    /* Paleta tomada de la referencia de Lovable (allí en OKLCH, aquí en hex).
       Coincide de cerca con la marca del tema: su teal #1c484b ≈ el #184a4e de main.min.css. */
    --anniv-ink: #1c484b;        /* brand-teal   */
    --anniv-ink-deep: #102323;   /* foreground   */
    --anniv-mint: #52caa4;       /* brand-mint   */
    --anniv-mint-soft: #e8f2ef;  /* secondary    */
    --anniv-teal: #1f846f;       /* brand-green  */
    --anniv-sage: #7cc290;       /* brand-sage   */
    --anniv-coral: #ff6b35;      /* accent       */
    --anniv-coral-deep: #e2551f;
    --anniv-coral-soft: #ff9978; /* brand-coral  */
    --anniv-cream: #f0ede4;      /* muted        */
    --anniv-sand: #facb85;       /* brand-amber  */
    --anniv-paper: #faf4ec;      /* background   */
    --anniv-line: #e0dcd1;       /* border       */
    --anniv-muted: #506261;      /* muted-foreground */

    --anniv-space: clamp(56px, 7vw, 104px);
    --anniv-radius: 12px;

    /* Archivo (display) y Barlow (texto) son las de la referencia; se cargan en
       page-anniversary.php. El stack de respaldo evita depender de Google Fonts. */
    --anniv-font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
    --anniv-font-sans: "Barlow", "Segoe UI", system-ui, sans-serif;

    color: var(--anniv-ink);
    font-family: var(--anniv-font-sans);
    font-size: 16.5px;
    line-height: 1.6;
}

.anniv *,
.anniv *::before,
.anniv *::after {
    box-sizing: border-box;
}

/* Scroll suave en los enlaces del navbar, dejando aire bajo la barra sticky */
html:has(.anniv) {
    scroll-behavior: smooth;
}

.anniv [id] {
    scroll-margin-top: 84px;
}

@media (prefers-reduced-motion: reduce) {
    html:has(.anniv) {
        scroll-behavior: auto;
    }
}

.anniv p {
    margin: 0 0 1em;
}

/* Los enlaces heredan el color del texto, salvo los que tienen el suyo
   propio: `.anniv a` (clase + elemento) gana a una clase suelta como
   `.anniv-btn--primary`, y dejaba los botones con el color del contenedor. */
.anniv a:not([class*="anniv-btn"]):not([class*="anniv-link"]) {
    color: inherit;
}

/* ---------- Layout ---------- */

.anniv-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.anniv-container--narrow {
    max-width: 820px;
}

.anniv-section {
    padding: var(--anniv-space) 0;
}

.anniv-section--paper { background: var(--anniv-paper); }
.anniv-section--mint  { background: var(--anniv-mint-soft); }
.anniv-section--sand  { background: var(--anniv-cream); }
.anniv-section--dark  { background: var(--anniv-ink); color: #fff; }

/* Verde muy desaturado, derivado del teal de marca: separa el programa
   de las secciones crema sin salirse de la paleta. */
.anniv-section--sage {
    background:
        radial-gradient(120% 80% at 88% 0%, rgba(124, 194, 144, .16), transparent 62%),
        #eef4ef;
}

/* Secciones con textura: un fragmento ampliado del "5" asomando por un borde.
   No se reconoce como cifra, funciona como textura de marca. */
.anniv-section--textured {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.anniv-texture {
    position: absolute;
    top: -10%;
    z-index: -1;
    width: 46%;
    height: 120%;
    background-repeat: no-repeat;
    opacity: .07;
    pointer-events: none;
    user-select: none;
}

.anniv-texture--right { right: -8%; }
.anniv-texture--left  { left: -8%; }

.anniv-section--textured > .anniv-container {
    position: relative;
    z-index: 1;
}

/* Sección con el "5" de marca de agua asomando por la izquierda */
.anniv-section--watermark {
    position: relative;
    overflow: hidden;
}

/* Se sale por la izquierda: solo asoma una parte de la cifra.
   El desplazamiento va en left/top (no en transform) para dejar libre
   la propiedad transform, que usa GSAP para el parallax. */
.anniv-watermark {
    position: absolute;
    top: -25%;
    left: -13%;
    height: 150%;
    width: auto;
    opacity: .14;
    pointer-events: none;
    user-select: none;
}

/* El contenido se alinea a la izquierda del ancho completo, como la referencia,
   en vez de centrarse: así deja respirar la marca de agua. */
.anniv-section--watermark > .anniv-container {
    position: relative;
    z-index: 1;
    max-width: 1120px;
}

.anniv-section--watermark .anniv-eyebrow,
.anniv-section--watermark .anniv-h2,
.anniv-section--watermark .anniv-prose {
    max-width: 760px;
}

/* ---------- Tipografía ---------- */

.anniv-eyebrow {
    margin: 0 0 12px;
    font-family: var(--anniv-font-display);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--anniv-coral);
}

.anniv-eyebrow--light {
    color: var(--anniv-mint);
}

.anniv-h2 {
    margin: 0 0 20px;
    font-family: var(--anniv-font-display);
    font-size: clamp(27px, 3.2vw, 37px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--anniv-ink-deep);
}

.anniv-h2--light { color: #fff; }

.anniv-intro,
.anniv-prose {
    max-width: 68ch;
    color: var(--anniv-muted);
}

.anniv-prose {
    font-size: clamp(16px, 1.5vw, 18px);
    color: var(--anniv-ink);
}

.anniv-footnote {
    margin-top: 24px;
    font-size: 13px;
    color: var(--anniv-muted);
}

.anniv-link {
    color: var(--anniv-teal);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.anniv-link:hover { color: var(--anniv-ink); }

/* ---------- Botones ---------- */

.anniv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.anniv-btn--primary {
    background: var(--anniv-coral);
    color: #fff;
}

.anniv-btn--primary:hover {
    background: var(--anniv-coral-deep);
    color: #fff;
}

.anniv-btn--ghost {
    border-color: currentColor;
    color: #fff;
}

.anniv-btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.anniv-btn--sm {
    padding: 9px 18px;
    font-size: 13px;
}

/* ---------- Sub-navegación ---------- */

/* Barra de 5 colores, pegada al borde inferior del navbar */
.anniv-stripe {
    display: flex;
    width: 100%;
    height: 5px;
}

.anniv-stripe__band { flex: 1; }

.anniv-stripe__band--sage  { background: var(--anniv-sage); }
.anniv-stripe__band--amber { background: var(--anniv-sand); }
.anniv-stripe__band--coral { background: var(--anniv-coral-soft); }
.anniv-stripe__band--green { background: var(--anniv-teal); }
.anniv-stripe__band--mint  { background: var(--anniv-mint); }

.anniv-subnav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(250, 244, 236, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--anniv-ink);
}

.anniv-subnav__inner {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 14px 24px;
}

.anniv-subnav__brand {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
    line-height: 1.25;
    text-decoration: none;
}

/* Más pequeño que el bloque de texto, para que quede holgado entre las
   dos franjas de color y no las toque. */
.anniv-subnav__brand-mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* El logo del navbar es transparente: sin fondo ni recorte */
.anniv-subnav__brand-mark .anniv-five-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.anniv-subnav__brand-lines {
    display: flex;
    flex-direction: column;
}

.anniv-subnav__brand-name {
    font-family: var(--anniv-font-display);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--anniv-ink);
}

.anniv-subnav__brand-meta {
    font-size: 12px;
    color: var(--anniv-muted);
}

.anniv-subnav__links {
    display: flex;
    gap: 20px;
    margin-left: auto;
    font-size: 14px;
}

.anniv-subnav__links a {
    color: var(--anniv-muted);
    text-decoration: none;
    transition: color .18s ease;
}

.anniv-subnav__links a:hover { color: var(--anniv-ink); }

/* En la referencia el CTA del navbar va en el teal de marca (bg-primary),
   no en el naranja de acento, que se reserva para el botón del hero.
   El selector incluye el elemento porque `.anniv a { color: inherit }` tiene
   más especificidad que una clase suelta y dejaba el texto en teal sobre teal. */
a.anniv-subnav__cta {
    flex-shrink: 0;
    margin-left: 4px;
    background: var(--anniv-ink);
    color: #fff;
}

a.anniv-subnav__cta:hover {
    background: var(--anniv-teal);
    color: #fff;
}

/* ---------- Hero ---------- */

.anniv-hero {
    background: var(--anniv-ink);
    color: #fff;
    padding: clamp(44px, 5.5vw, 76px) 0 clamp(56px, 7vw, 96px);
}

.anniv-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.anniv-hero__title {
    margin: 0 0 20px;
    font-family: var(--anniv-font-display);
    font-size: clamp(38px, 6.4vw, 76px);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

/* En la referencia solo "Laudato Si'" va en color, no la línea entera */
.anniv-hero__title-accent { color: var(--anniv-sand); }

.anniv-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    margin: 0 0 20px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--anniv-mint);
}

.anniv-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.anniv-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.anniv-hero__lead {
    max-width: 56ch;
    font-size: clamp(15px, 1.6vw, 17px);
    color: rgba(255, 255, 255, .82);
}

.anniv-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 16px;
}

.anniv-hero__note {
    margin: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
}

.anniv-hero__mark {
    display: grid;
    place-items: center;
}

.anniv-five {
    display: grid;
    place-items: center;
    width: min(280px, 100%);
    border-radius: 20px;
    overflow: hidden;
    background: var(--anniv-paper);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}

/* El PNG ya trae su propio margen crema, así que llena la tarjeta */
.anniv-five .anniv-five-logo {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Grids y tarjetas ---------- */

.anniv-grid {
    display: grid;
    gap: 20px;
    margin-top: 32px;
    align-items: stretch;
}

.anniv-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* align-items: stretch ya iguala las alturas de la fila; height:100% sobre
   un hijo estirado es redundante y puede provocar desbordes, así que no se usa. */

/* Cuatro en una sola fila: con minmax(0,1fr) no hay ancho mínimo que
   fuerce el salto a 3+1 como hacía auto-fit. */
.anniv-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.anniv-grid--tight { gap: 16px; }

.anniv-card {
    /* align-self: stretch garantiza que todas las tarjetas de la fila
       compartan borde superior e inferior, pase lo que pase con su contenido. */
    align-self: stretch;
    padding: 26px 28px;
    background: #fff;
    border: 1px solid var(--anniv-line);
    border-radius: var(--anniv-radius);
    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        box-shadow .45s cubic-bezier(.22, 1, .36, 1),
        border-color .3s ease;
}

.anniv-card:hover {
    transform: translateY(-4px);
    border-color: rgba(31, 132, 111, .3);
    box-shadow: 0 14px 34px -10px rgba(28, 72, 75, .18);
}

/* El título vira a teal al pasar el ratón */
.anniv-card__title {
    transition: color .3s ease;
}

.anniv-card:hover .anniv-card__title { color: var(--anniv-teal); }

.anniv-card__kicker {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--anniv-coral);
}

.anniv-card__title {
    font-family: var(--anniv-font-display);
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}

/* Filas con icono: hora y lugar */
.anniv-card__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 14.5px;
}

.anniv-card__row--place { margin-bottom: 0; }

.anniv-card__row > span { min-width: 0; }

.anniv-icon--accent {
    color: var(--anniv-coral);
    margin-top: 1px;
}

.anniv-icon--xs {
    width: 12px;
    height: 12px;
}

.anniv-card__venue {
    display: block;
    font-weight: 600;
    color: var(--anniv-ink-deep);
}

.anniv-card__address {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    color: var(--anniv-muted);
}

.anniv-card__map {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    font-size: 13.5px;
    color: var(--anniv-coral);
}

.anniv-card__map:hover { color: var(--anniv-coral-deep); }

.anniv-card__text {
    margin: 0;
    font-size: 15px;
    color: var(--anniv-muted);
}

/* Tarjetas de "lo que presentamos": el título reserva dos líneas para que
   todos los textos arranquen a la misma altura dentro de la fila. */
.anniv-grid > .anniv-card:not(.anniv-card--day) {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    overflow: hidden;
}

.anniv-grid > .anniv-card:not(.anniv-card--day) .anniv-card__title {
    min-height: 2.5em;
    font-size: 18px;
}

/* Halo de color que crece desde la esquina superior al pasar el ratón */
.anniv-grid--4 > .anniv-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 130px;
    height: 130px;
    background: radial-gradient(circle at top right, rgba(82, 202, 164, .22), transparent 70%);
    opacity: 0;
    transform: scale(.6);
    transform-origin: top right;
    transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

.anniv-grid--4 > .anniv-card:hover::before {
    opacity: 1;
    transform: scale(1);
}

/* Y una línea de acento que se dibuja en el borde superior */
.anniv-grid--4 > .anniv-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--anniv-teal), var(--anniv-mint));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.anniv-grid--4 > .anniv-card:hover::after {
    transform: scaleX(1);
}

/* Tarjeta de día: borde uniforme, sin banda superior de color.
   En columna para que el bloque del lugar empuje el enlace al pie y las
   dos tarjetas terminen a la misma altura aunque el título ocupe 1 o 2 líneas. */
.anniv-card--day {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 26px 26px;
    overflow: hidden;
}

/* El título reserva dos líneas: así la hora y el lugar arrancan a la misma
   altura en ambas tarjetas, sin dejar hueco muerto en medio. */
.anniv-card--day .anniv-card__title {
    min-height: 2.6em;
    margin-bottom: 14px;
}

/* Hover: la tarjeta se eleva y una línea de color crece desde la izquierda */
.anniv-card--day::after {
    content: "";
    position: absolute;
    inset: auto auto 0 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--anniv-teal), var(--anniv-mint), var(--anniv-sand));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.anniv-card--day:hover::after,
.anniv-card--day:focus-within::after {
    transform: scaleX(1);
}

/* Tarjeta ancha: ocupa todo el ancho bajo las dos de día. Con una sola línea
   de título no necesita reservar dos; en escritorio horario y lugar van en dos
   columnas alineadas con las tarjetas de arriba. */
.anniv-card--wide {
    grid-column: 1 / -1;
}

.anniv-card--wide .anniv-card__title {
    min-height: 0;
}

@media (min-width: 861px) {
    /* auto-fit abría una 3.ª columna al haber 3 tarjetas: se fijan 2 */
    .anniv-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .anniv-card--wide {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 46px;
        align-items: start;
    }

    .anniv-card--wide .anniv-card__kicker,
    .anniv-card--wide .anniv-card__title {
        grid-column: 1 / -1;
    }

    .anniv-card--wide .anniv-card__row {
        margin-bottom: 0;
    }
}

/* ---------- Notas de agenda ---------- */

/* Bloque de notas: rejilla compacta y pareja.
   Las filas se ajustan al contenido (no a la más alta de la fila), así que
   no quedan huecos verticales; cada nota se separa con una línea sutil. */
/* 5 notas en dos filas: 3 arriba y 2 abajo.
   La rejilla de 6 columnas permite que la segunda fila reparta 2 celdas
   de 3 columnas cada una, quedando simétrica bajo las 3 de arriba. */
.anniv-notes {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 36px;
    row-gap: 0;
    margin-top: 22px;
    padding: 4px 28px;
    border: 1px dashed var(--anniv-line);
    border-radius: var(--anniv-radius);
}

.anniv-note {
    grid-column: span 2;
    padding: 18px 0;
}

/* Fila 1: línea inferior común, y alto mínimo para que las tres queden
   parejas aunque su texto ocupe una o dos líneas. */
.anniv-note:nth-child(-n+3) {
    min-height: 104px;
    border-bottom: 1px solid rgba(224, 220, 209, .7);
}

/* Fila 2: las dos últimas se alinean con las columnas de arriba (1-2 y 3-4),
   no centradas: así los textos comparten el mismo eje vertical que la fila 1
   y el bloque se lee como una rejilla, no como dos filas sueltas. */
.anniv-note:nth-child(4) {
    grid-column: 1 / span 2;
}

.anniv-note:nth-child(5) {
    grid-column: 3 / span 2;
}

.anniv-note__label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--anniv-ink-deep);
}

/* Punto de color que ancla visualmente cada etiqueta */
.anniv-note__label::before {
    content: "";
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--anniv-coral);
}

.anniv-note__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--anniv-muted);
}

/* ---------- Programa ---------- */

/* Los 8 puntos van en dos columnas de 4: aprovecha el ancho y evita
   la columna vacía que dejaba la lista a página completa. */
.anniv-programme {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.anniv-programme__item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
    padding: 17px 16px 17px 4px;
    border-bottom: 1px solid var(--anniv-line);
    border-radius: 8px;
    transition: background-color .3s ease, padding-left .3s ease;
}

/* 1-4 en la columna izquierda, 5-8 en la derecha.
   La FILA debe declararse también: con solo grid-column, el auto-placement
   manda cada ítem a la siguiente fila libre y la segunda columna arranca
   a la altura del ítem 5 en vez de alinearse con el 1. */
.anniv-programme__item:nth-child(1),
.anniv-programme__item:nth-child(5) { grid-row: 1; }

.anniv-programme__item:nth-child(2),
.anniv-programme__item:nth-child(6) { grid-row: 2; }

.anniv-programme__item:nth-child(3),
.anniv-programme__item:nth-child(7) { grid-row: 3; }

.anniv-programme__item:nth-child(4),
.anniv-programme__item:nth-child(8) { grid-row: 4; }

.anniv-programme__item:nth-child(-n+4) { grid-column: 1; }
.anniv-programme__item:nth-child(n+5)  { grid-column: 2; }

/* Sin línea bajo el último de cada columna */
.anniv-programme__item:nth-child(4),
.anniv-programme__item:nth-child(8) {
    border-bottom: 0;
}

.anniv-programme__item:hover {
    background: rgba(255, 255, 255, .65);
    padding-left: 14px;
}

.anniv-programme__num {
    font-family: var(--anniv-font-display);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--anniv-coral);
    transition: color .3s ease;
}

.anniv-programme__item:hover .anniv-programme__num { color: var(--anniv-teal); }

.anniv-programme__q {
    font-family: var(--anniv-font-display);
    margin: 0 0 4px;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--anniv-ink-deep);
    transition: color .3s ease;
}

.anniv-programme__item:hover .anniv-programme__q { color: var(--anniv-teal); }

.anniv-programme__a {
    margin: 0;
    font-size: 14px;
    color: var(--anniv-muted);
}

/* ---------- Tabs ---------- */

.anniv-tabs { margin-top: 32px; }

.anniv-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    background: rgba(24, 74, 78, .06);
    border-radius: 999px;
}

.anniv-tabs__tab {
    padding: 10px 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--anniv-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.anniv-tabs__tab:hover { color: var(--anniv-ink); }

.anniv-tabs__tab[aria-selected="true"] {
    background: #fff;
    color: var(--anniv-ink);
    box-shadow: 0 1px 3px rgba(24, 74, 78, .16);
}

.anniv-tabs__panel {
    margin-top: 26px;
}

.anniv-callout {
    padding: 18px 22px;
    margin-bottom: 24px;
    background: var(--anniv-mint-soft);
    border-left: 3px solid var(--anniv-teal);
    border-radius: 0 10px 10px 0;
    font-size: 15px;
}

/* ---------- Listas de definición ---------- */

.anniv-dl {
    margin: 0;
    border-top: 1px solid var(--anniv-line);
}

.anniv-dl__row {
    display: grid;
    grid-template-columns: minmax(150px, 240px) 1fr;
    gap: 12px 28px;
    padding: 15px 4px;
    border-bottom: 1px solid var(--anniv-line);
}

.anniv-dl dt {
    font-size: 14px;
    font-weight: 700;
}

.anniv-dl dd {
    margin: 0;
    font-size: 14.5px;
    color: var(--anniv-muted);
}

/* ---------- Checklist ---------- */

.anniv-check {
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.anniv-check__item + .anniv-check__item { margin-top: 2px; }

.anniv-check__label {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 13px 16px;
    background: rgba(255, 255, 255, .6);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}

.anniv-check__label:hover {
    background: #fff;
    border-color: var(--anniv-line);
}

.anniv-check__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.anniv-check__box {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 2px solid rgba(24, 74, 78, .3);
    border-radius: 6px;
    background: #fff;
    transition: background-color .18s ease, border-color .18s ease;
}

.anniv-check__input:focus-visible + .anniv-check__box {
    outline: 2px solid var(--anniv-teal);
    outline-offset: 2px;
}

.anniv-check__input:checked + .anniv-check__box {
    background: var(--anniv-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3,8.5 6.5,12 13,4.5'/%3E%3C/svg%3E") center / 13px no-repeat;
    border-color: var(--anniv-teal);
}

.anniv-check__text { font-size: 15px; }

.anniv-check__input:checked ~ .anniv-check__text {
    color: var(--anniv-muted);
    text-decoration: line-through;
}

.anniv-check__progress {
    margin-top: 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--anniv-teal);
}

.anniv-soon {
    margin-top: 30px;
    padding: 20px 22px;
    background: rgba(255, 255, 255, .55);
    border-radius: 10px;
}

.anniv-soon__label {
    margin: 0 0 5px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--anniv-coral);
}

.anniv-soon__text {
    margin: 0;
    font-size: 13.5px;
    color: var(--anniv-muted);
}

/* ---------- Personas ---------- */

/* ---------- Carrusel de ponentes ----------
   Cinco tarjetas visibles: una central y dos a cada lado, que se alejan
   en perspectiva y se difuminan hacia los bordes. El desplazamiento y la
   profundidad los aplica el JS; aquí van la escena y las máscaras. */

.anniv-carousel {
    margin-top: 36px;
}

.anniv-carousel__stage {
    position: relative;
    overflow: hidden;
    padding: 30px 0;
    /* Se desvanece hacia los lados para que las tarjetas se pierdan
       en la lejanía en vez de cortarse en seco. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    perspective: 1200px;
}

/* Formato retrato 3:4, pensado para fotos de personas */
.anniv-carousel__track {
    position: relative;
    display: block;
    height: 340px;
    margin: 0;
    padding: 0;
    list-style: none;
    transform-style: preserve-3d;
}

.anniv-carousel__slide {
    position: absolute;
    top: 0;
    left: 50%;
    width: 255px;
    height: 340px;
    margin-left: -127px;
    /* La posición real la calcula el JS; sin él las tarjetas quedarían
       apiladas, así que el estado inicial ya lleva una transición suave. */
    transition:
        transform .6s cubic-bezier(.22, 1, .36, 1),
        opacity .6s ease,
        filter .6s ease;
    will-change: transform, opacity;
}

/* Solo la tarjeta central es interactiva */
.anniv-carousel__slide[data-active="false"] {
    pointer-events: none;
}

.anniv-carousel__slide .anniv-person {
    height: 100%;
}

.anniv-carousel__controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

.anniv-carousel__btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--anniv-line);
    border-radius: 50%;
    background: #fff;
    color: var(--anniv-ink);
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.anniv-carousel__btn svg {
    width: 18px;
    height: 18px;
}

.anniv-carousel__btn:hover {
    background: var(--anniv-teal);
    border-color: var(--anniv-teal);
    color: #fff;
    transform: scale(1.06);
}

.anniv-carousel__btn:focus-visible {
    outline: 2px solid var(--anniv-teal);
    outline-offset: 3px;
}

/* Tarjeta de ponente: retrato 3:4 con la foto a sangre. La ficha con el
   nombre asoma al pie y se despliega al pasar el ratón. */
.anniv-person {
    position: relative;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: var(--anniv-radius);
    background: var(--anniv-mint-soft);
    box-shadow: 0 8px 24px -14px rgba(28, 72, 75, .3);
    transition: box-shadow .35s ease;
}

.anniv-person__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

/* El avatar de relleno no se recorta: es una silueta, no una foto */
.anniv-person--placeholder .anniv-person__photo {
    object-fit: contain;
    object-position: center bottom;
}

/* Velo oscuro que aparece con el hover para dar contraste al texto */
.anniv-person::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(16, 35, 35, .92) 0%, rgba(16, 35, 35, .55) 34%, rgba(16, 35, 35, 0) 66%);
    opacity: .75;
    transition: opacity .45s ease;
    pointer-events: none;
}

.anniv-person__info {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 16px 18px;
    color: #fff;
    text-align: left;
    transform: translateY(calc(100% - 46px));
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.anniv-person__name {
    margin: 0 0 4px;
    font-family: var(--anniv-font-display);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.anniv-person__role {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .8);
}

/* Solo la tarjeta central reacciona al ratón (las demás no reciben eventos) */
.anniv-carousel__slide[data-active="true"] .anniv-person:hover {
    box-shadow: 0 20px 40px -16px rgba(28, 72, 75, .45);
}

.anniv-carousel__slide[data-active="true"] .anniv-person:hover .anniv-person__photo {
    transform: scale(1.06);
}

.anniv-carousel__slide[data-active="true"] .anniv-person:hover::after {
    opacity: 1;
}

.anniv-carousel__slide[data-active="true"] .anniv-person:hover .anniv-person__info {
    transform: translateY(0);
}

/* Sin ratón (táctil) la ficha de la tarjeta central va siempre desplegada:
   de lo contrario esa información sería inalcanzable. */
@media (hover: none) {
    .anniv-carousel__slide[data-active="true"] .anniv-person__info {
        transform: translateY(0);
    }

    .anniv-carousel__slide[data-active="true"] .anniv-person::after {
        opacity: 1;
    }
}

/* ---------- Etiqueta ---------- */

/* Lista de normas en dos columnas: el icono hace de ancla visual y el
   texto respira. No son tarjetas. */
.anniv-etiq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 40px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

/* Con 7 normas la última quedaría suelta a la izquierda: se centra
   ocupando las dos columnas. */
.anniv-etiq--center {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 460px;
}

.anniv-etiq {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 12px;
    background: transparent;
    transition: background-color .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}

.anniv-etiq:hover {
    background: rgba(255, 255, 255, .72);
    transform: translateX(4px);
}

/* Icono en pastilla circular: presencia sin cargar la sección */
.anniv-etiq__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--anniv-teal);
    box-shadow: 0 3px 10px -4px rgba(28, 72, 75, .3);
    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        background-color .3s ease,
        color .3s ease;
}

.anniv-etiq__svg {
    width: 21px;
    height: 21px;
}

.anniv-etiq:hover .anniv-etiq__icon {
    transform: scale(1.08);
    background: var(--anniv-teal);
    color: #fff;
}

.anniv-etiq__body { min-width: 0; }

.anniv-etiq__label {
    margin: 0 0 4px;
    font-family: var(--anniv-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--anniv-ink-deep);
}

.anniv-etiq__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--anniv-muted);
}

/* ---------- FAQ ---------- */

/* Dos columnas independientes: al desplegar una respuesta solo se
   desplaza su propia columna, no la mitad de la lista. */
.anniv-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 56px;
    margin-top: 34px;
}

.anniv-faq__col {
    border-top: 1px solid var(--anniv-line);
}

.anniv-faq__item {
    border-bottom: 1px solid var(--anniv-line);
    transition: background-color .35s ease;
}

.anniv-faq__item[open] {
    background: linear-gradient(180deg, rgba(232, 242, 239, .5), transparent);
}

.anniv-faq__q {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 16px;
    align-items: baseline;
    gap: 14px;
    padding: 18px 10px 18px 4px;
    cursor: pointer;
    list-style: none;
}

.anniv-faq__q::-webkit-details-marker { display: none; }

/* Número: guía discreta que ordena la lectura de las dos columnas */
.anniv-faq__num {
    font-family: var(--anniv-font-display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--anniv-muted);
    opacity: .55;
    transition: color .3s ease, opacity .3s ease;
}

.anniv-faq__text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--anniv-ink-deep);
    transition: color .3s ease;
}

.anniv-faq__q:hover .anniv-faq__text,
.anniv-faq__item[open] .anniv-faq__text {
    color: var(--anniv-teal);
}

.anniv-faq__q:hover .anniv-faq__num,
.anniv-faq__item[open] .anniv-faq__num {
    color: var(--anniv-teal);
    opacity: 1;
}

/* Cruz que gira 90° al abrirse y se convierte en guion */
.anniv-faq__icon {
    position: relative;
    align-self: center;
    width: 14px;
    height: 14px;
    color: var(--anniv-teal);
}

.anniv-faq__icon::before,
.anniv-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.anniv-faq__icon::before { transform: translateY(-50%); }
.anniv-faq__icon::after  { transform: translateY(-50%) rotate(90deg); }

.anniv-faq__item[open] .anniv-faq__icon::before { transform: translateY(-50%) rotate(180deg); }
.anniv-faq__item[open] .anniv-faq__icon::after  { transform: translateY(-50%) rotate(180deg); }

/* La respuesta se alinea con la pregunta, no con el número */
.anniv-faq__a {
    padding: 0 34px 20px 48px;
    overflow: hidden;
}

.anniv-faq__a p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--anniv-muted);
}

/* ---------- Contacto ---------- */

.anniv-contact {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* El "?" como elemento gráfico: enorme, recortado por el borde derecho y
   apenas visible. Da carácter al cierre sin añadir ruido. */
.anniv-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}

.anniv-contact__note {
    max-width: 52ch;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .7);
}

/* Tarjeta del correo: sobre + dirección + flecha en una sola fila.
   El correo es largo, así que la dirección tiene su propia columna flexible
   y se parte por el arroba en lugar de desbordar. */
.anniv-contact__card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
    text-decoration: none;
    transition:
        background-color .35s ease,
        border-color .35s ease,
        transform .35s cubic-bezier(.22, 1, .36, 1);
}

.anniv-contact__card:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(82, 202, 164, .55);
    transform: translateY(-3px);
}

.anniv-contact__card-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(82, 202, 164, .14);
    color: var(--anniv-mint);
    transition: background-color .35s ease;
}

.anniv-contact__card-icon svg {
    width: 22px;
    height: 22px;
}

.anniv-contact__card:hover .anniv-contact__card-icon {
    background: rgba(82, 202, 164, .24);
}

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

.anniv-contact__card-label {
    display: block;
    margin-bottom: 5px;
    font-family: var(--anniv-font-display);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--anniv-mint);
}

.anniv-contact__card-mail {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    /* break-word (no `anywhere`) parte solo cuando no cabe de otro modo, y
       nunca a mitad de palabra si hay un punto de corte mejor: `anywhere`
       era lo que dejaba el correo cortado como "...or / g". */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

/* La tarjeta crece con su contenido en vez de recortarlo, y el texto dispone
   de todo el ancho que le deja el icono y la flecha. */
.anniv-contact__card-body {
    min-width: 0;
    flex: 1 1 auto;
}

/* El rótulo de arriba repetía el correo entero en mayúsculas y con mucho
   espaciado, que es lo que estrechaba la caja: se deja en una sola línea y,
   si no cabe, se recorta con puntos suspensivos en vez de partirse. */
.anniv-contact__card-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

@media (max-width: 620px) {
    .anniv-contact__card {
        gap: 14px;
        padding: 18px 16px;
    }

    .anniv-contact__card-mail {
        font-size: 14px;
    }
}

.anniv-contact__card-arrow {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--anniv-mint);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.anniv-contact__card-arrow svg {
    width: 20px;
    height: 20px;
}

.anniv-contact__card:hover .anniv-contact__card-arrow {
    transform: translateX(5px);
}

/* Pie: el logo del "5" junto a la línea legal */
.anniv-contact__foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: clamp(40px, 6vw, 68px);
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.anniv-contact__mark {
    width: 30px;
    height: auto;
    flex-shrink: 0;
    opacity: .9;
}

.anniv-contact__footer {
    margin: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .48);
}

/* ---------- Responsive ---------- */

/* Tablet: las notas pasan a 2 columnas (3 filas) antes de apilarse del todo */
@media (max-width: 1020px) and (min-width: 861px) {
    .anniv-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .anniv-notes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .anniv-note,
    .anniv-note:nth-child(-n+3),
    .anniv-note:nth-child(4),
    .anniv-note:nth-child(5) {
        grid-column: auto;
        min-height: 0;
        border-bottom: 1px solid rgba(224, 220, 209, .7);
    }

    .anniv-note:last-child {
        grid-column: 1 / -1;
        border-bottom: 0;
    }
}

@media (max-width: 860px) {
    .anniv-hero__inner {
        grid-template-columns: 1fr;
    }

    .anniv-hero__mark {
        order: -1;
        justify-items: start;
    }

    .anniv-five {
        width: min(180px, 55%);
    }

    .anniv-subnav__links {
        display: none;
    }

    .anniv-subnav__cta {
        margin-left: auto;
    }

    .anniv-grid--4 {
        grid-template-columns: 1fr;
    }

    /* En móvil las texturas se reducen para no competir con el texto */
    .anniv-texture {
        width: 62%;
        opacity: .05;
    }

    .anniv-etiq-list {
        grid-template-columns: 1fr;
    }

    .anniv-faq {
        grid-template-columns: 1fr;
    }

    .anniv-contact__grid {
        grid-template-columns: 1fr;
    }

    /* Sin la línea superior duplicada al apilar las columnas */
    .anniv-faq__col + .anniv-faq__col {
        border-top: 0;
    }

    .anniv-faq__a {
        padding-left: 4px;
        padding-right: 4px;
    }

    .anniv-etiq--center {
        justify-self: stretch;
        max-width: none;
    }

    .anniv-carousel__slide {
        width: 210px;
        height: 280px;
        margin-left: -105px;
    }

    .anniv-carousel__track {
        height: 280px;
    }

    .anniv-carousel__stage {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    }

    .anniv-grid > .anniv-card:not(.anniv-card--day) .anniv-card__title,
    .anniv-card--day .anniv-card__title {
        min-height: 0;
    }

    /* En móvil el programa vuelve a una sola columna */
    .anniv-programme {
        grid-template-columns: 1fr;
    }

    /* Se anula también grid-row: si no, los ítems 5-8 conservan las filas
       1-4 asignadas en escritorio y se solapan con los cuatro primeros. */
    .anniv-programme__item:nth-child(-n+4),
    .anniv-programme__item:nth-child(n+5),
    .anniv-programme__item:nth-child(1),
    .anniv-programme__item:nth-child(2),
    .anniv-programme__item:nth-child(3),
    .anniv-programme__item:nth-child(4),
    .anniv-programme__item:nth-child(5),
    .anniv-programme__item:nth-child(6),
    .anniv-programme__item:nth-child(7),
    .anniv-programme__item:nth-child(8) {
        grid-column: 1;
        grid-row: auto;
    }

    .anniv-programme__item:nth-child(4) {
        border-bottom: 1px solid var(--anniv-line);
    }

    .anniv-programme__item {
        grid-template-columns: 32px 1fr;
    }

    .anniv-dl__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .anniv-notes {
        grid-template-columns: 1fr;
        padding: 4px 22px;
    }

    .anniv-note,
    .anniv-note:nth-child(-n+3),
    .anniv-note:nth-child(4),
    .anniv-note:nth-child(5) {
        grid-column: 1 / -1;
        min-height: 0;
        border-bottom: 1px solid rgba(224, 220, 209, .7);
    }

    .anniv-note:last-child {
        border-bottom: 0;
    }

    .anniv-watermark {
        height: 115%;
        top: -8%;
        left: -30%;
        opacity: .1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .anniv *,
    .anniv *::before,
    .anniv *::after {
        transition: none !important;
        animation: none !important;
    }

    .anniv-card:hover {
        transform: none;
    }
}

/* ============================================================
   SELECTOR DE IDIOMA (navbar)
   <details>/<summary> nativo: abre y cierra sin JavaScript.
   ============================================================ */

.anniv-lang {
    position: relative;
    margin-left: auto;
    flex: 0 0 auto;
}

.anniv-lang__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--anniv-line);
    border-radius: 999px;
    background: #fff;
    color: var(--anniv-ink);
    font-family: var(--anniv-font-sans);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .18s ease, background .18s ease;
    /* Oculta el triangulito por defecto de <summary>. */
    list-style: none;
}

.anniv-lang__toggle::-webkit-details-marker { display: none; }
.anniv-lang__toggle::marker { content: ""; }

.anniv-lang__toggle:hover { border-color: var(--anniv-mint); background: var(--anniv-mint-soft); }

/* Foco visible por teclado: requisito de accesibilidad, no decorativo. */
.anniv-lang__toggle:focus-visible {
    outline: 2px solid var(--anniv-teal);
    outline-offset: 2px;
}

.anniv-lang__globe { flex: 0 0 auto; opacity: .75; }

.anniv-lang__caret {
    flex: 0 0 auto;
    opacity: .6;
    transition: transform .18s ease;
}

.anniv-lang[open] .anniv-lang__caret { transform: rotate(180deg); }

.anniv-lang__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 172px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--anniv-line);
    border-radius: var(--anniv-radius);
    box-shadow: 0 12px 32px rgba(16, 35, 35, .14);
}

.anniv-lang__menu li { margin: 0; }

.anniv-lang__menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--anniv-ink);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease;
}

.anniv-lang__menu a:hover,
.anniv-lang__menu a:focus-visible { background: var(--anniv-mint-soft); }

.anniv-lang__menu a.is-current {
    font-weight: 700;
    color: var(--anniv-teal);
    background: var(--anniv-mint-soft);
}

/* Idioma activo marcado con un check, no solo con color
   (no debe depender únicamente del color para distinguirse). */
.anniv-lang__menu a.is-current::after {
    content: "✓";
    float: right;
    font-weight: 700;
}

@media (max-width: 860px) {
    /* En móvil el nombre del idioma se oculta: queda el globo, que ya lo
       identifica y evita que la barra se rompa en dos líneas. */
    .anniv-lang__current { display: none; }
    .anniv-lang__toggle { padding: 7px 9px; }
    .anniv-lang__menu { min-width: 158px; }
}

@media (prefers-reduced-motion: reduce) {
    .anniv-lang__caret { transition: none; }
}

/* ============================================================
   IMÁGENES ADMINISTRABLES
   Todas son opcionales: sin imagen, la sección se ve igual que
   antes. Por eso los estilos van en modificadores --photo y en
   .anniv-figure, que solo existe si hay imagen cargada.
   ============================================================ */

/* Banda de imagen dentro de una sección. */
.anniv-figure {
    margin: 0 0 clamp(24px, 3vw, 40px);
    border-radius: var(--anniv-radius);
    overflow: hidden;
    background: var(--anniv-cream);
    box-shadow: 0 8px 28px rgba(16, 35, 35, .10);
}

.anniv-figure img {
    display: block;
    width: 100%;
    height: clamp(200px, 34vw, 420px);
    object-fit: cover;
}

/* Portada con pase de fotos: las imágenes se funden unas con otras detrás
   del texto, con un velo que garantiza el contraste del titular sea cual
   sea la fotografía. */
.anniv-hero--photo {
    position: relative;
    isolation: isolate;
}

.anniv-hero__slider {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.anniv-hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    /* La transición es la que produce el fundido entre fotos. */
    transition: opacity 1.6s ease-in-out;
}

.anniv-hero__slide.is-active {
    opacity: 1;
}

/* Velo sobre las fotos: sin él, un titular blanco sobre una foto clara
   sería ilegible. */
.anniv-hero--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        100deg,
        rgba(16, 35, 35, .93) 0%,
        rgba(16, 35, 35, .80) 46%,
        rgba(16, 35, 35, .52) 100%
    );
}

/* En móvil el texto ocupa todo el ancho: el velo debe ser parejo. */
@media (max-width: 780px) {
    .anniv-hero--photo::after {
        background: rgba(16, 35, 35, .88);
    }
}

/* Sin el logotipo a la derecha, el texto de la portada dispone de todo el
   ancho; se le pone un tope para que las líneas no queden demasiado largas. */
.anniv-hero--photo .anniv-hero__body {
    max-width: 780px;
}

/* Quien haya pedido menos animación ve la primera foto, fija. */
@media (prefers-reduced-motion: reduce) {
    .anniv-hero__slide {
        transition: none;
    }
}

/* Franja de contacto con fotografía de fondo. */
.anniv-contact--photo {
    position: relative;
    isolation: isolate;
}

.anniv-contact--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--anniv-contact-photo);
    background-size: cover;
    background-position: center;
}

.anniv-contact--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(28, 72, 75, .90);
}

/* ============================================================
   CABECERA GLOBAL DEL SITIO
   La landing es una página independiente con su propia barra de
   navegación del evento, así que la cabecera del sitio se oculta
   para no apilar dos menús.

   Se hace con la clase que WordPress añade al <body> para esta
   plantilla (page-template-page-anniversary), de modo que solo
   afecta a esta página: header.php sirve a todo el sitio y no se
   toca. Este archivo solo se carga en esta plantilla, pero el
   selector se acota igualmente para que sea explícito.
   ============================================================ */

.page-template-page-anniversary .c-global-header {
    display: none;
}

/* El tema reserva espacio para la cabecera fija; sin ella, la
   landing debe empezar pegada al borde superior. */
.page-template-page-anniversary .l-main {
    margin-top: 0;
    padding-top: 0;
}

/* La subnav del evento pasa a ser la barra fija de la página. */
.page-template-page-anniversary .anniv-subnav {
    top: 0;
}

/* ============================================================
   AJUSTES DEL NAVBAR
   Van al final para ganar a las reglas base por orden de cascada,
   sin tocarlas: así el bloque original sigue documentando el
   diseño de partida y aquí queda el porqué de cada corrección.
   ============================================================ */

/* Los enlaces se partían en dos líneas ("Prepara tu / viaje"), lo que
   descuadraba la altura de la barra. Cada enlace se mantiene en una línea
   y el conjunto reparte el espacio disponible. */
.anniv-subnav__links {
    gap: clamp(14px, 1.8vw, 26px);
    flex-wrap: nowrap;
    align-items: center;
}

.anniv-subnav__links a {
    white-space: nowrap;
    font-weight: 500;
    line-height: 1.2;
}

/* La marca no debe encogerse ni partirse cuando el menú crece. */
.anniv-subnav__brand {
    flex-shrink: 0;
}

.anniv-subnav__brand-name,
.anniv-subnav__brand-meta {
    white-space: nowrap;
}

/* El selector de idioma iba en .82rem, más pequeño que el menú (14px).
   Se iguala para que la barra se lea como una sola pieza. */
.anniv-lang__toggle {
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    gap: 7px;
}

.anniv-lang__globe {
    width: 18px;
    height: 18px;
}

.anniv-lang__menu a {
    font-size: 14px;
}

/* Con el menú, el selector y el botón compitiendo por el ancho, el aire
   entre bloques se ajusta al espacio real disponible. */
.anniv-subnav__inner {
    gap: clamp(12px, 1.6vw, 20px);
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Por debajo de 1180 px ya no caben menú completo + selector + botón:
   se retira el menú de secciones (la página se recorre con scroll) y se
   conservan idioma y llamada a la acción, que son lo accionable. */
@media (max-width: 1180px) {
    .anniv-subnav__links {
        display: none;
    }

    .anniv-lang {
        margin-left: auto;
    }
}

/* En móvil la barra se compacta: la fecha bajo el nombre sobra. */
@media (max-width: 620px) {
    .anniv-subnav__brand-meta {
        display: none;
    }

    .anniv-subnav__inner {
        gap: 10px;
        padding: 10px 16px;
    }

    a.anniv-subnav__cta {
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* ============================================================
   FORMULARIO DE CONFIRMACIÓN DE ASISTENCIA
   <dialog> nativo: el navegador pone el fondo (::backdrop) y
   gestiona el foco.
   ============================================================ */

/* El <dialog> cuelga del <body>, FUERA del contenedor .anniv donde viven las
   variables de color del diseño. Sin redeclararlas aquí, var(--anniv-paper)
   no resuelve y el modal sale transparente sobre la página. */
.anniv-rsvp {
    --anniv-ink: #1c484b;
    --anniv-mint: #52caa4;
    --anniv-mint-soft: #e8f2ef;
    --anniv-teal: #1f846f;
    --anniv-coral: #ff6b35;
    --anniv-cream: #f0ede4;
    --anniv-paper: #faf4ec;
    --anniv-line: #e0dcd1;
    --anniv-muted: #506261;
    --anniv-radius: 12px;
    --anniv-font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
    --anniv-font-sans: "Barlow", "Segoe UI", system-ui, sans-serif;

    width: min(520px, calc(100vw - 32px));
    padding: 0;
    border: none;
    border-radius: var(--anniv-radius);
    /* Color opaco explícito: es lo que garantiza que el hero no se lea por
       detrás aunque una variable fallara. */
    background: #faf4ec;
    color: #1c484b;
    font-family: var(--anniv-font-sans);
    font-size: 16px;
    line-height: 1.5;
    box-shadow: 0 24px 64px rgba(16, 35, 35, .28);
}

/* El tema pinta los enlaces y titulares del sitio; dentro del modal manda
   la tipografía de la landing. */
.anniv-rsvp * {
    box-sizing: border-box;
}

.anniv-rsvp::backdrop {
    background: rgba(16, 35, 35, .62);
    backdrop-filter: blur(3px);
}

.anniv-rsvp__close-wrap {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 10px 12px 0;
}

.anniv-rsvp__close {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--anniv-muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.anniv-rsvp__close:hover {
    background: var(--anniv-cream);
    color: var(--anniv-ink);
}

.anniv-rsvp__body {
    padding: 4px 32px 32px;
}

.anniv-rsvp__title {
    margin: 0 0 6px;
    font-family: var(--anniv-font-display);
    font-size: clamp(22px, 3vw, 27px);
    font-weight: 700;
    line-height: 1.2;
    color: #1c484b;
}

.anniv-rsvp__field label {
    color: #1c484b;
}

.anniv-rsvp__intro {
    margin: 0 0 22px;
    color: #506261;
    font-size: 15px;
    line-height: 1.5;
}

.anniv-rsvp__field {
    margin-bottom: 16px;
}

.anniv-rsvp__field label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.anniv-rsvp__field input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--anniv-line);
    border-radius: 8px;
    background: #fff;
    color: var(--anniv-ink);
    font-family: var(--anniv-font-sans);
    font-size: 15px;
}

.anniv-rsvp__field input:focus {
    outline: 2px solid var(--anniv-teal);
    outline-offset: 1px;
    border-color: var(--anniv-teal);
}

.anniv-rsvp__privacy {
    margin: 0 0 20px;
    color: var(--anniv-muted);
    font-size: 13px;
    line-height: 1.45;
}

/* .anniv-btn está definido dentro de .anniv, así que aquí el botón se pinta
   por completo en vez de heredar. */
.anniv-rsvp__submit {
    display: block;
    width: 100%;
    padding: 13px 20px;
    border: none;
    border-radius: 999px;
    background: #ff6b35;
    color: #fff;
    font-family: var(--anniv-font-sans);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background .18s ease;
}

.anniv-rsvp__submit:hover {
    background: #e2551f;
}

.anniv-rsvp__submit:focus-visible {
    outline: 2px solid #1f846f;
    outline-offset: 2px;
}

.anniv-rsvp__submit:disabled {
    opacity: .65;
    cursor: default;
}

/* El campo trampa debe quedar fuera de la vista pero seguir existiendo
   para el robot que rellena todo: display:none lo omitiría en algunos. */
.anniv-rsvp__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.anniv-rsvp__msg {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.45;
}

.anniv-rsvp__msg.is-ok {
    background: var(--anniv-mint-soft);
    border: 1px solid var(--anniv-mint);
    color: var(--anniv-ink);
}

.anniv-rsvp__msg.is-error {
    background: #fdeceb;
    border: 1px solid #f1a9a4;
    color: #8a1f18;
}

@media (max-width: 520px) {
    .anniv-rsvp__body {
        padding: 4px 20px 24px;
    }
}

/* --- Modal en modo invitación --------------------------------------- */

/* Con invitación: se saluda por su nombre en vez de pedir datos. */
.anniv-rsvp__guest {
    margin: 0 0 2px;
    font-size: 17px;
    font-weight: 600;
    color: #1c484b;
}

.anniv-rsvp__guest-mail {
    margin: 0 0 20px;
    color: #506261;
    font-size: 14px;
}

/* Sin invitación: solo el aviso de que el acceso es personal. */
.anniv-rsvp__note {
    margin: 0 0 14px;
    color: #506261;
    font-size: 15px;
    line-height: 1.55;
}

.anniv-rsvp__contact-line {
    margin: 0;
    font-size: 15px;
}

.anniv-rsvp__contact-line a {
    color: #1f846f;
    font-weight: 600;
}