/* =============================================================================
   Su Luz Regresa  ·  Congreso Virtual de Duelo y Recuerdo
   assets/css/styles.css

   Tema OSCURO alusivo a Dia de Muertos: base nocturna aubergine, cempasuchil
   (marigold) como acento principal, magenta/rosa de marca para acciones,
   con papel picado y petalos como decoracion sobria.

   Todo ajuste de paleta se hace AQUI (tokens en :root), sin tocar el HTML.

   Orden:
     1. Design tokens
     2. Reset y base
     3. Tipografia
     4. Layout / utilidades
     5. Header + nav
     6. Hero (banner completo + cuerpo)
     7. CTA (boton, pulse-glow "veladora", sticky mobile)
     8. Contador
     9. Secciones de contenido / tarjetas
    10. Agenda (tabs ARIA)
    11. Formulario de registro
    12. FAQ
    13. Enlaces cruzados
    14. Footer
    15. Paginas de estado
    16. Decoracion Dia de Muertos (petalos, papel picado, flor)
    17. Animaciones de scroll (.reveal)
    18. prefers-reduced-motion
    19. Breakpoints
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Base nocturna (antes eran los claros; ahora invertidos a oscuro) */
  --color-bg:            #1C1420;   /* fondo principal, aubergine casi negro */
  --color-bg-alt:        #241A2B;   /* secciones alternas / letterbox del banner */
  --color-surface:       #2E2036;   /* tarjetas, inputs elevados */
  --color-surface-raised: #392843;  /* hover de tarjetas */
  --color-border:        #4B3656;   /* bordes y lineas sutiles */

  /* Marca: magenta/rosa aclarado para leerse sobre oscuro */
  --color-magenta:       #C8437A;   /* botones primarios */
  --color-magenta-mid:   #B63A6D;   /* variante intermedia */
  --color-magenta-dark:  #A32E5C;   /* hover / active */
  --color-magenta-soft:  #F0A9C6;   /* texto/enlaces magenta sobre oscuro */
  --color-plum:          #A98CB5;   /* lavanda (logo Requiem) para etiquetas */

  /* Cempasuchil: acento PRINCIPAL de este tema */
  --color-marigold:      #F2A63C;
  --color-marigold-bright: #FFC062;
  --color-marigold-soft: #F7D29A;
  --color-marigold-deep: #D07D1E;

  /* Texto (antes eran los fondos claros) */
  --color-text:          #F2E9E0;   /* cuerpo, blanco calido */
  --color-text-soft:     #CBB9C6;   /* texto atenuado */
  --color-heading:       #FBF1E4;   /* encabezados */
  --color-ink:           #1C1420;   /* texto sobre superficies claras (chips, botones marigold) */
  --color-white:         #FFFFFF;

  --radius-card:         16px;
  --radius-pill:         999px;
  --shadow-card:         0 16px 44px rgba(0, 0, 0, 0.45);
  --shadow-soft:         0 6px 20px rgba(0, 0, 0, 0.38);
  --glow-marigold:       0 0 32px rgba(242, 166, 60, 0.20);

  --container:           1120px;
  --container-narrow:    760px;

  --space-section:       clamp(3rem, 8vw, 6rem);

  --font-eyebrow: "Cinzel", "Playfair Display", Georgia, serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-script:  "Pinyon Script", "Playfair Display", cursive;
  --font-body:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Flor de cempasuchil reutilizable (bullets, divisor) */
  --flor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23F2A63C'%3E%3Ccircle cx='12' cy='4' r='3.3'/%3E%3Ccircle cx='12' cy='20' r='3.3'/%3E%3Ccircle cx='4' cy='12' r='3.3'/%3E%3Ccircle cx='20' cy='12' r='3.3'/%3E%3Ccircle cx='6.3' cy='6.3' r='3.3'/%3E%3Ccircle cx='17.7' cy='6.3' r='3.3'/%3E%3Ccircle cx='6.3' cy='17.7' r='3.3'/%3E%3Ccircle cx='17.7' cy='17.7' r='3.3'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='4' fill='%23D07D1E'/%3E%3C/svg%3E");

  /* Papel picado (tira decorativa) */
  --papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='22' viewBox='0 0 84 22'%3E%3Cpath d='M0 0h84v11l-10.5 11L63 11 52.5 22 42 11 31.5 22 21 11 10.5 22 0 11z' fill='%23F2A63C'/%3E%3Ccircle cx='21' cy='6.5' r='2.1' fill='%231C1420'/%3E%3Ccircle cx='42' cy='6.5' r='2.1' fill='%231C1420'/%3E%3Ccircle cx='63' cy='6.5' r='2.1' fill='%231C1420'/%3E%3Cpath d='M42 12l3 3-3 3-3-3z' fill='%231C1420'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------------
   2. Reset y base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--color-magenta-soft); }
a:hover { color: var(--color-marigold); }

button { font-family: inherit; }

:focus-visible {
  outline: 3px solid var(--color-marigold);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 8px; top: -60px;
  background: var(--color-marigold);
  color: var(--color-ink);
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 200;
  transition: top .2s ease;
}
.skip-link:focus { top: 8px; color: var(--color-ink); }

/* -----------------------------------------------------------------------------
   3. Tipografia
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-heading);
  margin: 0 0 .6em;
}

h1 { font-size: clamp(1.9rem, 6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4.5vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 3.5vw, 1.5rem); color: var(--color-marigold-soft); }
h4 { font-size: 1.05rem; color: var(--color-plum); }

p { margin: 0 0 1.1em; max-width: 68ch; }

/* .eyebrow: SOLO para encabezados de marca (tipo el del poster). Cinzel. */
.eyebrow {
  font-family: var(--font-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--color-marigold);
  margin: 0 0 .8rem;
}

/* .kicker: etiquetas genericas (fechas, "una iniciativa de"). Mulish. */
.kicker {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .74rem;
  color: var(--color-marigold);
  margin: 0 0 .6rem;
}

.script-logo {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--color-marigold-soft);
  line-height: 1;
  font-size: clamp(3.2rem, 15vw, 6.5rem);
  text-shadow: 0 0 28px rgba(242, 166, 60, 0.35);
}

.lede {
  font-size: 1.12rem;
  color: var(--color-text);
  font-weight: 500;
}

/* -----------------------------------------------------------------------------
   4. Layout / utilidades
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 5vw, 2.5rem);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-section); }
.section--alt { background-color: var(--color-bg-alt); }
.section--plum { background-color: var(--color-surface); color: var(--color-text); }
.section--plum h2, .section--plum h3 { color: var(--color-heading); }

.section-head { margin-bottom: 2.5rem; }
.section-head p { color: var(--color-text-soft); }

/* Divisor con flor de cempasuchil al centro */
.divider {
  width: 140px; height: 20px; border: 0;
  margin: 1.2rem 0 0;
  background:
    linear-gradient(var(--color-marigold-deep), var(--color-marigold-deep)) left center / 52px 2px no-repeat,
    linear-gradient(var(--color-marigold-deep), var(--color-marigold-deep)) right center / 52px 2px no-repeat,
    var(--flor) center center / 20px 20px no-repeat;
  border-radius: 0;
}
.text-center { text-align: center; }
.text-center .divider, .text-center p { margin-inline: auto; }

/* -----------------------------------------------------------------------------
   5. Header + nav
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(28, 20, 32, 0.90);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(242, 166, 60, 0.28);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
  padding-block: .55rem;
}

/* Ambos logos, siempre juntos, sobre una placa clara para que se lean en oscuro */
.brand-lockup,
.hero__eyebrow-brands,
.site-footer__brands {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: rgba(244, 233, 224, 0.95);
  border-radius: 12px;
  padding: 6px 14px;
}
.brand-lockup { flex: 0 1 auto; min-width: 0; }
.brand-lockup img { height: 40px; width: auto; }
.brand-lockup .brand-sep,
.hero__eyebrow-brands .brand-sep,
.site-footer__brands .brand-sep {
  width: 1px;
  align-self: stretch;
  min-height: 30px;
  background: rgba(28, 20, 32, 0.22);
}
.brand-lockup a { display: inline-flex; }

.site-nav {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 1.4rem;
}
.site-nav a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}
.site-nav a:hover { color: var(--color-marigold); }

.header-cta { margin-left: auto; }
.site-nav + .header-cta { margin-left: 1.4rem; }

/* -----------------------------------------------------------------------------
   6. Hero  (banner completo a todo lo ancho + cuerpo)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
}

/* Banner: la imagen COMPLETA, a todo lo ancho, sin recortar ni deformar,
   con o sin cambio de orientacion. object-fit: contain la mantiene entera. */
.hero__banner {
  position: relative;
  width: 100%;
  background: var(--color-bg-alt);
  line-height: 0;
  z-index: 0;
}
.hero__banner-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(86vh, 780px);
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
}
/* Fundido inferior del banner hacia el fondo de la pagina */
.hero__banner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 96px;
  background: linear-gradient(to bottom, rgba(28, 20, 32, 0), var(--color-bg));
  pointer-events: none;
}

/* Cuerpo del hero: va DESPUES del banner. Aqui vive el contador primero. */
.hero__body {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-block: clamp(1.4rem, 5vw, 2.4rem) clamp(2.4rem, 7vw, 4rem);
}
.hero__eyebrow-brands {
  justify-content: center;
  width: max-content;
  margin: .4rem auto 1.2rem;
}
.hero__eyebrow-brands img { height: 38px; width: auto; }

.hero h1 {
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  color: var(--color-heading);
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: .4rem;
}
.hero h1 .script-logo,
.hero__script { display: block; margin: .1rem 0 .5rem; }
.hero__h1-sub {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 3.2vw, 1.4rem);
  color: var(--color-plum);
  line-height: 1.25;
}
.hero__tagline {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  max-width: 40ch;
  margin-inline: auto;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.4rem;
  margin: 1.4rem 0 1.8rem;
  font-weight: 600;
  color: var(--color-marigold);
}
.hero__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.hero__meta svg { width: 20px; height: 20px; flex: none; }

/* -----------------------------------------------------------------------------
   7. CTA
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .8rem 1.7rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.btn--primary {
  background: var(--color-magenta);
  color: var(--color-white);
}
.btn--primary:hover { background: var(--color-magenta-dark); color: var(--color-white); transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  color: var(--color-marigold);
  border-color: var(--color-marigold);
}
.btn--ghost:hover { background: var(--color-marigold); color: var(--color-ink); }
.btn--on-plum { background: var(--color-marigold); color: var(--color-ink); }
.btn--on-plum:hover { background: var(--color-marigold-bright); color: var(--color-ink); }
.btn--block { display: flex; width: 100%; }

/* Pulse-glow "veladora" (latencia): halo calido que se expande alrededor del CTA */
.btn--pulse { position: relative; }
.btn--pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: pulse-glow 2.4s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 166, 60, 0), 0 0 16px 2px rgba(242, 166, 60, 0.05); }
  22%      { box-shadow: 0 0 0 0 rgba(242, 166, 60, 0.45), 0 0 24px 5px rgba(242, 166, 60, 0.32); }
  70%      { box-shadow: 0 0 0 15px rgba(242, 166, 60, 0), 0 0 28px 7px rgba(242, 166, 60, 0.10); }
}

/* Beat: latido doble sutil (usa la propiedad `scale` para no pisar el hover) */
.btn--beat { animation: btn-beat 2.8s ease-in-out infinite; }
@keyframes btn-beat {
  0%, 42%, 100% { scale: 1; }
  8%            { scale: 1.035; }
  16%           { scale: 1; }
  24%           { scale: 1.022; }
  32%           { scale: 1; }
}

/* CTA sticky (mobile) */
.cta-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem clamp(.9rem, 4vw, 1.2rem);
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(28, 20, 32, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(242, 166, 60, 0.30);
  transform: translateY(120%);
  transition: transform .35s ease;
}
.cta-sticky.is-visible { transform: translateY(0); }
.cta-sticky__text {
  font-weight: 700;
  color: var(--color-heading);
  font-size: .95rem;
  line-height: 1.2;
}
.cta-sticky__text small {
  display: block;
  font-weight: 600;
  color: var(--color-marigold);
  font-size: .78rem;
}
.cta-sticky .btn { flex: 1; margin-left: auto; padding-inline: 1rem; }

/* -----------------------------------------------------------------------------
   8. Contador
   -------------------------------------------------------------------------- */
.countdown-wrap { position: relative; }
.countdown-wrap::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(360px, 90%); height: 220px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(242, 166, 60, 0.22), rgba(242, 166, 60, 0) 70%);
  pointer-events: none;
}
.countdown {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin: 1.4rem 0;
}
.countdown__unit {
  min-width: 68px;
  padding: .7rem .5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.countdown__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--color-marigold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  display: block;
  margin-top: .3rem;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.countdown__message {
  position: relative;
  text-align: center;
  font-weight: 700;
  color: var(--color-marigold-soft);
  font-size: 1.05rem;
  margin: 1.2rem 0;
}
.countdown__message--evergreen { font-weight: 600; color: var(--color-text); }

/* -----------------------------------------------------------------------------
   9. Secciones de contenido / tarjetas
   -------------------------------------------------------------------------- */
.prose > p:first-of-type { font-size: 1.12rem; font-weight: 500; }
.prose h2 { margin-top: 2.2rem; }

.answer-block {
  background: var(--color-surface);
  border-left: 4px solid var(--color-marigold);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-soft), var(--glow-marigold);
  margin-bottom: 2rem;
}
.answer-block p { margin: 0; font-size: 1.12rem; font-weight: 500; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.4rem;
  box-shadow: var(--shadow-card);
}

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.checklist li {
  position: relative;
  padding-left: 2.1rem;
  font-weight: 500;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .1em;
  width: 22px; height: 22px;
  background: var(--flor) center / contain no-repeat;
}

/* Tarjeta de sesion (ponente + fecha + CTA) */
.session-card {
  display: grid;
  gap: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.session-card__date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 14px;
  font-weight: 700;
  line-height: 1;
}
.session-card__date .d { font-size: 1.4rem; }
.session-card__date .m { font-size: .7rem; letter-spacing: .1em; margin-top: .2rem; }
.badge-plum { background: var(--color-plum); color: var(--color-ink); }
.badge-magenta { background: var(--color-magenta); color: var(--color-white); }

.session-card__speaker { display: block; font-weight: 700; color: var(--color-marigold-soft); }
.session-card__cred { display: block; color: var(--color-text-soft); font-size: .92rem; }
.session-card__bio { color: var(--color-text-soft); font-size: .94rem; }
.session-card__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.session-card__speaker-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: .5rem 0 .2rem;
}
.session-card__avatar {
  width: 60px; height: 60px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-alt);
}
.session-card__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--color-plum), var(--color-magenta-mid));
  color: var(--color-heading);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
}

/* -----------------------------------------------------------------------------
   10. Agenda (tabs ARIA)
   -------------------------------------------------------------------------- */
.agenda__tablist {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.4rem;
}
.agenda__tab {
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  padding: .6rem 1.1rem;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.agenda__tab[aria-selected="true"] {
  background: var(--color-marigold);
  border-color: var(--color-marigold);
  color: var(--color-ink);
}
.agenda__tab:hover:not([aria-selected="true"]) { border-color: var(--color-marigold); }

.agenda__panel { animation: panel-in .2s ease-out; }
.agenda__panel[hidden] { display: none; }
@keyframes panel-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* -----------------------------------------------------------------------------
   11. Formulario de registro
   -------------------------------------------------------------------------- */
.form-registro {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: clamp(1.3rem, 5vw, 2rem);
  box-shadow: var(--shadow-card), var(--glow-marigold);
}
.form-registro__title { margin-bottom: .3rem; }
.form-registro__intro { color: var(--color-text-soft); margin-bottom: 1.4rem; }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-weight: 700;
  margin-bottom: .35rem;
  font-size: .95rem;
  color: var(--color-text);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.field input::placeholder { color: var(--color-text-soft); opacity: .75; }
.field input:focus {
  border-color: var(--color-marigold);
  background: var(--color-surface-raised);
}
.field--check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.field--check input {
  width: 22px; height: 22px;
  min-width: 22px;
  margin-top: .15rem;
  accent-color: var(--color-marigold);
}
.field--check label { font-weight: 500; font-size: .92rem; }

.field__error {
  display: none;
  color: var(--color-magenta-soft);
  font-size: .85rem;
  font-weight: 600;
  margin-top: .3rem;
}
.field.has-error input { border-color: var(--color-magenta-soft); }
.field.has-error .field__error { display: block; }

/* Honeypot: oculto por recorte (no display:none, no empuja el layout) */
.hp-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}

.form-feedback {
  display: none;
  margin-top: 1rem;
  padding: .9rem 1rem;
  border-radius: 10px;
  font-weight: 600;
}
.form-feedback.is-ok { display: block; background: rgba(126, 196, 140, 0.16); color: #A9E2B4; }
.form-feedback.is-error { display: block; background: rgba(233, 120, 150, 0.16); color: var(--color-magenta-soft); }

/* -----------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .8rem; }
.faq__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.faq__q {
  display: block;
  list-style: none;
  padding: 1rem 3rem 1rem 1.1rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-heading);
  cursor: pointer;
  position: relative;
  min-height: 44px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  position: absolute;
  right: 1.1rem; top: 1rem;
  font-size: 1.4rem;
  color: var(--color-marigold);
  line-height: 1;
}
.faq__item[open] .faq__q::after { content: "\2013"; }
.faq__a { padding: 0 1.1rem 1.1rem; }
.faq__a p { margin: 0; color: var(--color-text-soft); }

/* -----------------------------------------------------------------------------
   13. Enlaces cruzados
   -------------------------------------------------------------------------- */
.crosslinks { display: grid; gap: 1rem; }
.crosslinks a {
  display: block;
  padding: 1.1rem 1.2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-plum);
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.crosslinks a:hover {
  border-left-color: var(--color-marigold);
  background: var(--color-surface-raised);
  transform: translateX(3px);
}
.crosslinks a span { display: block; color: var(--color-text-soft); font-weight: 500; font-size: .9rem; margin-top: .2rem; }

/* -----------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding-block: 3rem 6rem;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 22px;
  background: var(--papel) repeat-x top center;
  background-size: auto 22px;
  opacity: .92;
}
.site-footer__brands {
  justify-content: center;
  width: max-content;
  margin: .6rem auto 1.2rem;
}
.site-footer__brands img { height: 42px; width: auto; }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.2rem;
  margin-bottom: 1rem;
}
.site-footer__links a { color: var(--color-text); font-weight: 600; font-size: .92rem; }
.site-footer__links a:hover { color: var(--color-marigold); }
.site-footer p {
  text-align: center;
  color: var(--color-text-soft);
  font-size: .85rem;
  margin: .3rem auto;
  max-width: none;
}
.site-footer__signature {
  font-weight: 700;
  color: var(--color-marigold-soft);
}

/* -----------------------------------------------------------------------------
   15. Paginas de estado
   -------------------------------------------------------------------------- */
.estado {
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.estado__inner { text-align: center; padding-block: var(--space-section); }
.estado__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 12vw, 5rem);
  color: var(--color-plum);
  opacity: .45;
  line-height: 1;
  margin-bottom: .5rem;
}
.estado__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin: 1.6rem 0 2rem;
}
.estado__links {
  display: grid;
  gap: .6rem;
  max-width: 420px;
  margin-inline: auto;
  text-align: left;
}

/* -----------------------------------------------------------------------------
   16. Decoracion Dia de Muertos
   -------------------------------------------------------------------------- */
/* Petalos de cempasuchil cayendo en el hero */
.petals {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.petals span {
  position: absolute;
  top: -6%;
  width: 12px; height: 12px;
  background: radial-gradient(circle at 30% 30%, var(--color-marigold-bright), var(--color-marigold-deep));
  border-radius: 60% 10% 60% 10%;
  opacity: 0;
  animation: petal-fall linear infinite;
}
.petals span:nth-child(1) { left: 7%;  animation-duration: 16s; animation-delay: 0s; }
.petals span:nth-child(2) { left: 23%; animation-duration: 21s; animation-delay: 5s; width: 9px; height: 9px; }
.petals span:nth-child(3) { left: 44%; animation-duration: 24s; animation-delay: 9s; }
.petals span:nth-child(4) { left: 61%; animation-duration: 18s; animation-delay: 2.5s; width: 10px; height: 10px; }
.petals span:nth-child(5) { left: 78%; animation-duration: 26s; animation-delay: 12s; }
.petals span:nth-child(6) { left: 92%; animation-duration: 20s; animation-delay: 6.5s; width: 8px; height: 8px; }
@keyframes petal-fall {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  12%  { opacity: .55; }
  88%  { opacity: .5; }
  100% { transform: translateY(120vh) rotate(340deg); opacity: 0; }
}

.marigold-accent { color: var(--color-marigold); display: inline-block; }

.section--petals { position: relative; overflow: hidden; }
.section--petals::before,
.section--petals::after {
  content: "";
  position: absolute;
  width: 150px; height: 150px;
  background: radial-gradient(circle at center, rgba(242, 166, 60, 0.28) 0%, rgba(242, 166, 60, 0) 70%);
  pointer-events: none;
}
.section--petals::before { left: -36px; top: 8%; }
.section--petals::after { right: -36px; bottom: 8%; }

/* -----------------------------------------------------------------------------
   16b. Ponentes · Por que asistir (ventajas) · CTA banner intermedio
   -------------------------------------------------------------------------- */
.section-cta { margin-top: 2.6rem; text-align: center; }

/* Ponentes */
.ponentes {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ponente-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.ponente-card__media { position: relative; }
.ponente-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--color-bg-alt);
}
.ponente-card__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--color-plum), var(--color-magenta-mid));
  color: var(--color-heading);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 3rem);
  letter-spacing: .04em;
}
.ponente-card__day {
  position: absolute;
  left: 12px; bottom: 12px;
  padding: .32rem .7rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .06em;
}
.ponente-card__body {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.1rem 1.2rem 1.3rem;
}
.ponente-card__body h3 { margin: .1rem 0 0; color: var(--color-heading); }
.ponente-card__cred { color: var(--color-marigold); font-weight: 700; font-size: .84rem; margin: 0; }
.ponente-card__bio { color: var(--color-text-soft); font-size: .92rem; margin: .35rem 0 0; }
.ponente-card__session { color: var(--color-text); font-weight: 600; font-size: .9rem; margin: .5rem 0 0; }
.ponente-card__link {
  margin-top: .7rem;
  font-weight: 700;
  font-size: .9rem;
  color: var(--color-magenta-soft);
  text-decoration: none;
}
.ponente-card__link::after { content: " \2192"; }
.ponente-card__link:hover { color: var(--color-marigold); }

/* Ventajas / por que asistir */
.ventajas {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
.ventaja {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.4rem;
  box-shadow: var(--shadow-soft);
}
.ventaja__icon {
  display: inline-flex;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(242, 166, 60, 0.14);
  color: var(--color-marigold);
  margin-bottom: .8rem;
}
.ventaja__icon svg { width: 24px; height: 24px; }
.ventaja h3 { font-size: 1.1rem; color: var(--color-heading); margin: 0 0 .3rem; }
.ventaja p { margin: 0; color: var(--color-text-soft); font-size: .94rem; }

/* CTA banner intermedio */
.cta-banner {
  background: linear-gradient(160deg, var(--color-surface-raised), var(--color-surface));
  border-block: 1px solid var(--color-border);
}
.cta-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.cta-banner__brands {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: rgba(244, 233, 224, 0.95);
  border-radius: 12px;
  padding: 6px 14px;
}
.cta-banner__brands img { height: 38px; width: auto; }
.cta-banner__brands .brand-sep { width: 1px; align-self: stretch; min-height: 26px; background: rgba(28, 20, 32, 0.22); }
.cta-banner h2 { margin: 0; }
.cta-banner p { margin: 0; color: var(--color-text-soft); max-width: 54ch; }

/* -----------------------------------------------------------------------------
   17. Animaciones de scroll
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease-out, transform .6s ease-out;
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* -----------------------------------------------------------------------------
   18. prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn--pulse::after { animation: none; content: none; }
  .btn--beat { animation: none; scale: 1; }
  .cta-sticky { transition: none; }
  .agenda__panel { animation: none; }
  .petals { display: none; }
}

/* -----------------------------------------------------------------------------
   19. Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .hero__tagline, .hero__meta { margin-inline: auto; }

  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .grid-2--wide-gap { gap: 2.5rem; }

  .session-card { grid-template-columns: auto 1fr; align-items: start; }
  .session-card__body { grid-column: 2; }

  .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }

  .cta-sticky { display: none; }
}

@media (min-width: 1024px) {
  .site-nav { display: flex; }
  .faq { grid-template-columns: 1fr 1fr; align-items: start; }
  .crosslinks { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .header-cta { display: none; }
  .site-header__inner { justify-content: center; }
  .brand-lockup { margin-inline: auto; }
}