/* ─────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
/* iOS Safari hace zoom automático al enfocar un input/textarea con
   font-size menor a 16px — se fuerza aquí para que no pase en ningún campo. */
input, textarea, select { font-size: 16px !important; }
:root {
  /* Huichol palette */
  --wood:      #000000;
  --wood-2:    #080808;
  --wood-3:    #101010;
  --wood-4:    #1A1A1A;
  --cobalt:    #1B4890;
  --cobalt-h:  #2762C8;
  --teal:      #097A7E;
  --teal-h:    #0CA0A6;
  --purple:    #5E2A96;
  --purple-h:  #7B40BE;
  --gold:      #B8820A;
  --gold-lt:   #D4A820;
  --gold-dk:   #7A5208;
  --gold-pale: rgba(184,130,10,.14);
  --coral:     #A83418;
  --forest:    #1A5E38;
  --cream:     #FAF7F0;
  --cream-2:   #F2ECD8;
  --cream-3:   #EDE5C8;
  /* Derived via oklch for interaction states */
  --cobalt-glow:  oklch(from #1B4890 l c h / .25);
  --teal-glow:    oklch(from #097A7E l c h / .25);
  --purple-glow:  oklch(from #5E2A96 l c h / .25);
  --gold-glow:    oklch(from #B8820A l c h / .25);
  /* Structural */
  --border-dk: rgba(184,130,10,.3);
  --border-lt: #D4C090;
  --radius:    12px;
  --radius-sm: 8px;
  --display:   'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --body:      'DM Sans', system-ui, sans-serif;
  --max-w:     1280px;
  /* 8px spacing scale */
  --sp-1: .5rem;   /* 8px  */
  --sp-2: 1rem;    /* 16px */
  --sp-3: 1.5rem;  /* 24px */
  --sp-4: 2rem;    /* 32px */
  /* Single subtle shadow reserved for primary cards */
  --shadow-card:       0 1px 2px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.06);
  --shadow-card-hover: 0 2px 6px rgba(0,0,0,.05), 0 14px 30px rgba(0,0,0,.10);
  /* Icon badge tiers */
  --icon-lg:   52px;
  --icon-md:   34px;
  --icon-chip: 22px;
  /* Expanded Huichol-inspired system: navy is the new sober "protagonist"
     background for headers/splash; turquoise/coral are sparing functional
     accents (tags, active nav icon), never large fills. Distinct names from
     the cobalt/teal/purple/coral/forest tokens above — those stay untouched,
     they feed the decorative Huichol rainbow strips (footer dots, tab-bar
     top border), not general UI. */
  --navy:      #0B1B2E;
  --navy-2:    #13273D;
  --turquoise: #2EC4C6;
  --blue-mid:  #3D6B9E;
  --coral-2:   #C0392B;
  /* Acceso Rápido card accents (Inicio) — deep navy replaces turquoise,
     mustard gold replaces coral, each with a precomputed soft icon-badge
     tint rather than a color-mix derivation, to match the exact hexes
     given for this pass. Independent from --navy/--turquoise above,
     which stay as-is for headers/tags. */
  --card-navy:    #12242B;
  --card-navy-bg: #E7EBEC;
  --card-gold:    #B8860B;
  --card-gold-bg: #F5EDDA;
  /* Brand gold used for the restaurant-card top border, distinct from
     --gold/--gold-dk/--gold-lt (different shades used elsewhere). */
  --gold-brand: #D9A62E;
  /* Agenda audience-tag palette (point 7) */
  --tag-turq-mut: #4A8B8C;
}

body {
  font-family: var(--body);
  background: #FFFFFF;
  color: rgba(0,0,0,.82);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }

/* ─────────────────────────────────────────
   SCROLL REVEAL ANIMATION
───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ─────────────────────────────────────────
   LANG SWITCHER (shared)
───────────────────────────────────────── */
.lang-switcher {
  display: flex;
  align-items: center;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 6px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255,255,255,.55);
}
.lang-btn {
  padding: 0 .8rem;
  height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.5);
  transition: color .15s, background .15s;
}
.lang-btn.active {
  color: var(--gold-dk);
  background: rgba(184,130,10,.16);
}
.lang-btn:hover:not(.active) {
  color: var(--wood);
  background: rgba(0,0,0,.06);
}
.lang-sep {
  width: 1px;
  height: 16px;
  background: rgba(0,0,0,.16);
  flex-shrink: 0;
}
.mini-lang-row {
  position: absolute;
  top: .6rem;
  right: .8rem;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
}
.mini-lang-row .lang-switcher {
  background: rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.35);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mini-lang-row .lang-btn {
  height: 24px;
  padding: 0 .65rem;
  font-size: .56rem;
  color: rgba(255,255,255,.7);
}
.mini-lang-row .lang-btn.active {
  background: #fff;
  color: var(--wood);
}

/* ─────────────────────────────────────────
   HUICHOL BEADWORK DIVIDER
───────────────────────────────────────── */
.huichol-div {
  display: block;
  width: 100%;
  height: 84px;
  background: #000 url('../img/huichol-strip.jpg') left center / auto 84px repeat-x;
  overflow: hidden;
  flex-shrink: 0;
}
.huichol-div-top {
  position: relative;
  height: 99px;                 /* +15px vs. the plain strip — lets the logo breathe */
  background-size: auto 99px;
}
.huichol-div-top::before {
  /* Mutes the beadwork pattern so the logo reads as the focal point,
     without hiding the texture entirely. */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.42);
  z-index: 1;
}
.huichol-div-logo {
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: 64px;
  width: auto;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.6));
  z-index: 2;
}

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  will-change: transform;
}


/* Nav bar */
.hero-nav {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2.5rem;
}
.hero-logo-img {
  height: 64px;
  width: auto;
  display: block;
}

/* Hero content */
.hero-body {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 2.5rem 4.5rem;
  max-width: 960px;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .42em;
  color: var(--gold-lt);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.hero-tag-dot {
  width: 5px; height: 5px;
  background: var(--gold-lt);
  border-radius: 50%;
  flex-shrink: 0;
}
/* ── Orbes de luz ── */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.orb-gold {
  width: 340px; height: 340px;
  background: radial-gradient(circle, #D4A820 0%, transparent 70%);
  opacity: .22;
  top: -100px; left: -80px;
  animation: orbDrift1 14s ease-in-out infinite;
}
.orb-cobalt {
  width: 280px; height: 280px;
  background: radial-gradient(circle, #2762C8 0%, transparent 70%);
  opacity: .28;
  bottom: 18%; right: -70px;
  animation: orbDrift2 18s ease-in-out infinite;
}
.orb-teal {
  width: 220px; height: 220px;
  background: radial-gradient(circle, #0CA0A6 0%, transparent 70%);
  opacity: .24;
  top: 35%; left: 25%;
  animation: orbDrift3 22s ease-in-out infinite;
}
@keyframes orbDrift1 {
  0%,100% { transform: translate(0,0) scale(1);    }
  33%      { transform: translate(50px,40px) scale(1.12); }
  66%      { transform: translate(-25px,70px) scale(.92); }
}
@keyframes orbDrift2 {
  0%,100% { transform: translate(0,0) scale(1);     }
  40%      { transform: translate(-40px,-50px) scale(1.1); }
  70%      { transform: translate(25px,-20px) scale(.95); }
}
@keyframes orbDrift3 {
  0%,100% { transform: translate(0,0) scale(1);     }
  50%      { transform: translate(-50px,35px) scale(1.15); }
}

.hero-title {
  font-family: var(--display);
  font-size: clamp(3.8rem, 10vw, 8.5rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--wood);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.hero-title span {
  display: block;
  color: var(--gold-lt);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 2.25rem;
}
.hero-meta-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--body);
  font-size: .875rem;
  color: rgba(0,0,0,.6);
}
.hero-meta-item i {
  font-size: 1rem;
  color: var(--gold);
  flex-shrink: 0;
}
.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 2rem;
  height: 52px;
  background: var(--gold);
  color: var(--wood);
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 5px;
  transition: background .2s, transform .15s, box-shadow .2s;
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--gold-lt);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(184,130,10,.4);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 1.75rem;
  height: 52px;
  border: 1.5px solid rgba(0,0,0,.25);
  color: var(--wood);
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 5px;
  transition: border-color .2s, background .2s, transform .15s;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
.btn-secondary:hover {
  border-color: rgba(0,0,0,.55);
  background: rgba(0,0,0,.05);
  transform: translateY(-2px);
}
/* Focus rings for keyboard nav */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.lang-btn:focus-visible {
  outline: 2px solid var(--gold-lt);
  outline-offset: 3px;
}

/* Pixel-strip at bottom of hero */
.hero-strip {
  position: relative;
  z-index: 15;
  height: 6px;
  background:
    linear-gradient(90deg,
      #0F4C75 0%   25%,
      #1F93B8 25%  50%,
      #4FC3D9 50%  75%,
      #6C57A6 75%  100%
    );
}

/* ─────────────────────────────────────────
   RESPONSIVE — HERO
───────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-nav { padding: 1rem 1.25rem; justify-content: center; }
  .hero-nav .lang-switcher { position: absolute; top: 50%; right: 1.25rem; transform: translateY(-50%); }
  .hero-logo-img { height: 60px; }
  /* Hero height = small viewport height (excludes browser chrome) */
  .hero { min-height: 100svh; }
}

/* ─────────────────────────────────────────
   COUNTDOWN BAR
───────────────────────────────────────── */
.cd-bar {
  background: #FFFFFF;
  border-top: 1px solid rgba(184,130,10,.2);
  border-bottom: 1px solid rgba(184,130,10,.2);
  padding: 1.15rem 2rem;
}
.cd-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.cd-label {
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
}
.cd-units {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
/* Días restantes — el número que de verdad importa */
.cd-days { display: flex; flex-direction: column; align-items: center; }
.cd-num.cd-num-days { font-size: 3.4rem; color: var(--gold-dk); }
.cd-lbl.cd-lbl-days { color: var(--gold-dk); font-weight: 700; }
/* HRS:MIN:SEG — el "reloj", secundario frente a los días */
.cd-clock { display: flex; align-items: center; gap: .3rem; }
.cd-clock-icon { font-size: .85rem; color: rgba(0,0,0,.3); margin-right: .2rem; }
.cd-clock .cd-num { font-size: 1.5rem; color: rgba(0,0,0,.4); }
.cd-clock .cd-lbl { font-size: .52rem; color: rgba(0,0,0,.32); }
.cd-clock .cd-colon { font-size: 1.25rem; color: rgba(0,0,0,.2); }
.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
}
.cd-num {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--wood);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cd-lbl {
  font-family: var(--body);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: rgba(0,0,0,.4);
  text-transform: uppercase;
  margin-top: .15rem;
}
.cd-colon {
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: .5rem;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ─────────────────────────────────────────
   CARDS SECTION
───────────────────────────────────────── */
.cards-section {
  padding: 4rem 2rem;
  max-width: var(--max-w);
  margin: 0 auto;
}
.sec-eyebrow {
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .42em;
  color: var(--gold-lt);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: .55rem;
}
.sec-heading {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--wood);
  line-height: 1;
  text-align: center;
  margin-bottom: 2.75rem;
}

/* Featured */
.cards-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.card-feat {
  --ca: var(--gold);       /* card accent color, overridden inline */
  position: relative;
  background: linear-gradient(155deg, #FFFFFF 0%, #F7F6F2 68%);
  border: 1px solid var(--border-dk);
  border-radius: 18px;
  padding: 1.75rem 2rem;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.22,.9,.32,1), box-shadow .25s, border-color .22s, background .25s;
  overflow: hidden;
  min-height: auto;
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: .5rem;
  text-align: left;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
/* Accent top strip */
.card-feat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--ca);
  transition: height .22s;
}
/* Dot pattern on hover (chaquira echo) */
.card-feat::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--ca) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.card-feat:hover::after,
.card-feat:focus-visible::after,
.card-feat.open::after  { opacity: .07; }
.card-feat:hover,
.card-feat:focus-visible,
.card-feat.open {
  transform: translateY(-5px);
  box-shadow: 0 18px 50px rgba(0,0,0,.16);
  border-color: var(--ca);
  background: linear-gradient(155deg, #FFFFFF 0%, #F7F6F2 68%);
}
.card-feat:hover::before,
.card-feat:focus-visible::before,
.card-feat.open::before { height: 6px; }

.card-feat:focus-visible { outline: 2px solid var(--ca); outline-offset: 3px; }

.cf-icon {
  grid-column: 1;
  grid-row: 1;
  width: 70px;
  height: 70px;
  border-radius: 16px;
  background: var(--ca-bg, color-mix(in srgb, var(--ca) 15%, transparent));
  font-size: 1.85rem;
  color: var(--wood);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s, background .25s;
}
.card-feat:hover .cf-icon,
.card-feat.open .cf-icon { transform: scale(1.08) rotate(-4deg); background: color-mix(in srgb, var(--ca) 22%, transparent); }
.cf-body { grid-column: 2; grid-row: 1; min-width: 0; }
.cf-title {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--wood);
  line-height: 1.1;
}
.cf-desc {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--body);
  font-size: .82rem;
  color: rgba(0,0,0,.6);
  line-height: 1.5;
}
.cf-cta {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  background: var(--ca);
  color: #fff;
  font-family: var(--display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .2s, box-shadow .2s;
}
.card-feat:hover .cf-cta,
.card-feat:focus-visible .cf-cta,
.card-feat.open .cf-cta {
  transform: translateX(3px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ca) 45%, transparent);
}
.cf-arrow { display: inline-block; transition: transform .18s; }
.card-feat:hover .cf-arrow { transform: translateX(4px); }
.cf-arrow-ind { display: none; }

/* Small card grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}
.card-sm {
  --ca: var(--gold);
  position: relative;
  background: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 1.5rem 1.35rem 1.65rem;
  cursor: pointer;
  transition: transform .22s, box-shadow .22s, border-color .22s, background .22s;
  overflow: hidden;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .6rem;
  box-shadow: 0 2px 14px rgba(0,0,0,.07);
}
.card-sm::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ca);
  transition: height .22s;
}
.card-sm::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--ca) 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.card-sm:hover::after,
.card-sm:focus-visible::after,
.card-sm.open::after { opacity: .07; }
.card-sm:hover,
.card-sm:focus-visible,
.card-sm.open {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  border-color: var(--ca);
  background: #F7F6F2;
}
.card-sm:hover::before,
.card-sm:focus-visible::before,
.card-sm.open::before { height: 5px; }
.card-sm:focus-visible { outline: 2px solid var(--ca); outline-offset: 3px; }

.cs-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: var(--ca-bg, color-mix(in srgb, var(--ca) 15%, transparent));
  font-size: 1.5rem;
  color: var(--wood);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s, background .2s;
}
.card-sm:hover .cs-icon,
.card-sm.open .cs-icon { transform: scale(1.1); background: color-mix(in srgb, var(--ca) 24%, transparent); }
.cs-title {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--wood);
  letter-spacing: .03em;
  line-height: 1.1;
}
.cs-badge-new {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: .4rem;
  border-radius: 50%;
  background: var(--card-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-gold) 16%, transparent);
  vertical-align: middle;
}
/* "Agenda Reunión General" — only shown while that block is actually
   happening, so it needs to read as urgent/live at a glance instead of
   blending in with the other quick-access cards. */
.card-sm.card-live {
  background: var(--card-gold-bg);
  border-color: var(--card-gold);
  animation: cardLivePulse 2.2s ease-in-out infinite;
}
.card-live-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-family: var(--display);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  background: var(--forest);
  padding: .15rem .4rem;
  border-radius: 100px;
  vertical-align: middle;
}
@keyframes cardLivePulse {
  0%, 100% { box-shadow: 0 2px 14px rgba(0,0,0,.07); }
  50% { box-shadow: 0 2px 14px rgba(0,0,0,.07), 0 0 0 4px color-mix(in srgb, var(--card-gold) 20%, transparent); }
}
.cs-sub {
  font-family: var(--body);
  font-size: .62rem;
  color: rgba(0,0,0,.6);
  line-height: 1.4;
  padding-right: 1.4rem;
}
.cs-highlight {
  display: block;
  font-family: var(--body);
  font-size: .64rem;
  font-weight: 800;
  color: var(--ca);
  margin-top: .2rem;
}
.cs-arrow {
  position: absolute;
  right: 1.15rem;
  bottom: 1.2rem;
  font-size: .85rem;
  color: var(--ca);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
}
.card-sm:hover .cs-arrow,
.card-sm:focus-visible .cs-arrow,
.card-sm.open .cs-arrow { opacity: 1; transform: translateX(0); }

/* ─────────────────────────────────────────
   PANELS WRAPPER
───────────────────────────────────────── */
.panels-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem 3rem;
}
.sec-panel {
  display: none;
  background: var(--cream);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
  animation: panelIn .24s ease;
  color: var(--wood);
}
.sec-panel.open { display: block; }
#sec-agenda { background: #fff; }
#sec-fotos { background: #fff; }
#sec-stands{ background: #fff; }
#sec-perfil { background: #fff; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
/* Panel header (click to close) — navy protagonist background per the
   Huichol-inspired system; gold icon, cream/white text on top. */
.panel-hd {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.1rem 1.5rem;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.panel-hd:hover { background: var(--navy-2); }
.panel-hd-icon {
  font-size: 1.2rem;
  color: var(--gold-lt);
  flex-shrink: 0;
}
.panel-hd-title {
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
  flex: 1;
}
.panel-close-btn {
  font-size: 1rem;
  color: rgba(255,255,255,.45);
  transition: color .15s, transform .2s;
  flex-shrink: 0;
}
.panel-hd:hover .panel-close-btn {
  color: var(--gold-lt);
  transform: rotate(90deg);
}
.panel-bd { padding: 1.75rem; }

/* ── Panel typography (light bg) ── */
.p-sub {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin: 1.25rem 0 .5rem;
}
.p-sub:first-child { margin-top: 0; }
.p-text {
  font-family: var(--body);
  font-size: .875rem;
  color: #8A6830;
  line-height: 1.65;
}
.p-text p  { margin-bottom: .6rem; }
.p-text ul { padding-left: 1.25rem; margin-bottom: .5rem; }
.p-text li { margin-bottom: .2rem; }
.p-text strong { color: var(--wood); }
.p-note {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: .65rem 1rem;
  margin: .5rem 0;
  font-family: var(--body);
  font-size: .82rem;
  color: #8A6830;
  line-height: 1.55;
}
.p-note strong { color: var(--wood); }
.p-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: .75rem; }

/* ── Restaurant cards ── */
.rest-intro {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.rest-intro-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--gold-dk);
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
}
.rest-intro-txt { font-family: var(--body); font-size: .9rem; color: #8A6830; line-height: 1.4; }
.rest-intro-txt strong { display: block; color: var(--wood); font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }

.rest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin-bottom: .9rem;
}
.rest-card {
  --ca: var(--gold-dk);
  position: relative;
  display: flex;
  background: #fff;
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.rest-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--ca);
  z-index: 2;
}
.rest-card:hover {
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.rc-photo { flex-shrink: 0; width: 104px; background-size: cover; background-position: center; }
.rc-body { flex: 1; min-width: 0; padding: .85rem 1.9rem .85rem .9rem; position: relative; display: flex; flex-direction: column; justify-content: center; }
.rc-chevron { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); color: rgba(0,0,0,.2); font-size: 1.2rem; }
.rc-name { font-family: var(--display); font-size: 1.05rem; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; color: var(--wood); line-height: 1.15; }
.rc-type { font-family: var(--body); font-size: .75rem; letter-spacing: .02em; text-transform: uppercase; color: #8A6830; font-weight: 700; margin: .18rem 0 .4rem; }
.rc-desc {
  font-family: var(--body); font-size: .78rem; color: #8A6830; line-height: 1.4; margin: 0 0 .55rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rc-foot { display: flex; flex-wrap: wrap; gap: .35rem; }
.rc-tag {
  display: inline-flex; align-items: center; gap: .28rem;
  font-family: var(--body); font-size: .62rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  padding: .22rem .55rem; border-radius: 9px; line-height: 1.3;
  background: #000; color: #fff; border: none;
}
.rc-tag i { font-size: .72rem; }
.rc-tag.rc-res { color: #fff; background: var(--card-gold); }
.rc-tag.rc-free { color: #fff; background: var(--forest); }

/* "Cena de especialidades" summary — plain text, no card */
.rest-summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
}
.rest-summary-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--gold-dk);
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.rest-summary-lbl { font-family: var(--display); font-size: .64rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: .25rem; }
.rest-summary-title { font-family: var(--display); font-size: .95rem; font-weight: 700; text-transform: uppercase; color: var(--wood); margin-bottom: .3rem; }
.rest-summary-desc { font-family: var(--display); font-size: .78rem; font-weight: 700; text-transform: uppercase; color: #8A6830; line-height: 1.5; }
@media (max-width: 640px) {
  .rest-grid { grid-template-columns: 1fr; }
  .rc-photo { width: 92px; }
  .rc-body { padding: .8rem 1.7rem .8rem .8rem; }
}
#sec-clima { background: #fff; }
#sec-clima .p-sub { color: var(--wood); }
/* ── Weather hero (Apple Weather / Airbnb inspired):
      one elevated card, headline temp as the clear focal
      point, max/min/humidity nested as a quiet detail row ── */
.wx-hero {
  background: #fff;
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  margin-bottom: var(--sp-3);
}
.wx-hero-top { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.wx-hero-icon {
  flex-shrink: 0;
  width: var(--icon-lg); height: var(--icon-lg);
  border-radius: 50%;
  background: #fff;
  color: var(--teal);
  font-size: 1.55rem;
  display: flex; align-items: center; justify-content: center;
}
.wx-hero-txt { min-width: 0; }
.wx-hero-temp {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wood);
  line-height: 1;
}
.wx-hero-desc { font-family: var(--body); font-size: .92rem; font-weight: 600; color: var(--wood); margin-top: .15rem; }
.wx-hero-sub { font-family: var(--body); font-size: .72rem; font-weight: 400; color: rgba(0,0,0,.48); line-height: 1.4; margin-top: .1rem; }
.wx-hero-stats {
  display: flex;
  background: var(--card-navy);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.wx-hero-stat { flex: 1; text-align: center; padding: var(--sp-2) .3rem; border-left: 1px solid rgba(255,255,255,.15); }
.wx-hero-stat:first-child { border-left: none; }
.wx-hero-stat i { font-size: 1.05rem; color: var(--card-gold); }
.wx-hero-stat-val { font-family: var(--display); font-size: 1.1rem; font-weight: 800; color: #fff; line-height: 1.3; margin-top: .15rem; }
.wx-hero-stat-lbl { font-family: var(--body); font-size: .6rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.55); }
@media (max-width: 480px) {
  .wx-hero-icon { width: 44px; height: 44px; font-size: 1.3rem; }
  .wx-hero-temp { font-size: 2.2rem; }
  .wx-hero-stat-val { font-size: 1rem; }
}

/* ── Packing checklist, grouped by category, as compact chips ── */
.chip-group { margin-bottom: var(--sp-2); }
.chip-group:last-of-type { margin-bottom: var(--sp-3); }
.chip-group-lbl {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--display);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wood);
  margin-bottom: var(--sp-1);
}
.chip-group-lbl i { font-size: .85rem; }
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--cream-2);
  border-radius: 100px;
  padding: .35rem .8rem .35rem .45rem;
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 500;
  color: #8A6830;
  transition: transform .15s ease, background-color .15s ease;
}
.chip:hover, .chip:active { transform: scale(.96); background: var(--cream-3); }
.chip i {
  flex-shrink: 0;
  width: var(--icon-chip);
  height: var(--icon-chip);
  border-radius: 50%;
  background: rgba(184,130,10,.14);
  color: var(--gold-dk);
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Priority chip per category — the single most important item, visually promoted */
.chip.chip-primary { background: var(--card-navy); color: #fff; font-weight: 700; }
.chip.chip-primary i { background: rgba(255,255,255,.22); color: #fff; }
.chip.chip-primary:hover, .chip.chip-primary:active { background: var(--card-navy); }

/* ── Recommendations: individual info cards with icons ── */
.wx-tips { display: flex; flex-direction: column; gap: var(--sp-1); }
.wx-tip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--body);
  font-size: .8rem;
  font-weight: 400;
  color: #8A6830;
  line-height: 1.4;
}
.wx-tip i {
  flex-shrink: 0;
  width: var(--icon-md); height: var(--icon-md);
  border-radius: 50%;
  background: #fff;
  color: var(--gold-dk);
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}

/* ── Agenda: dress code / transportation info row ── */
.agenda-info-row {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 1.5rem;
}
.agenda-info-plain {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-left: 1.35rem;
}
.agenda-info-plain i { flex-shrink: 0; font-size: 1.1rem; color: #8A6830; margin-top: .15rem; }
.agenda-info-plain > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.agenda-info-lbl {
  font-family: var(--display);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #8A6830;
}
.agenda-info-plain-val {
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #8A6830;
  text-transform: uppercase;
}

/* ── Transporte tab: timeline with connecting line + dot markers + card
   per period. Route header sits outside any card, plain text; the black/
   gold accent lives on the time buttons and dot markers, not the header. ── */
.transport-route { margin-bottom: 1.2rem; }
.transport-route-name { font-family: var(--display); font-weight: 900; font-size: 1.05rem; letter-spacing: .02em; color: var(--wood); }
.transport-route-arrow { font-weight: 900; -webkit-text-stroke: 1.5px currentColor; }
.transport-route-note { font-family: var(--body); color: #8A6830; font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; margin-top: .4rem; }

.transport-day { margin-top: 1.6rem; }
.transport-day:first-child { margin-top: 0; }
.transport-day-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--wood);
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--card-gold);
}

.transport-timeline { position: relative; padding-left: 1.35rem; margin-top: .95rem; }
.transport-timeline::before {
  content: '';
  position: absolute;
  left: .4rem;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 1.5px;
  background: rgba(184,130,10,.35);
}

.transport-period { position: relative; margin-bottom: 1rem; }
.transport-period:last-child { margin-bottom: 0; }
.transport-period-lbl {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--display);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold-dk);
  background: var(--card-gold-bg);
  padding: .22rem .6rem;
  border-radius: 100px;
  margin: 0 0 .55rem .2rem;
}
.transport-period-lbl i { color: var(--gold-dk); font-size: .82rem; }

.transport-card {
  position: relative;
  border: none;
  background: #fff;
  border-radius: 12px;
  padding: .7rem .9rem;
}
.transport-card::before {
  content: '';
  position: absolute;
  left: -1.44rem;
  top: .55rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #8A6830;
}

.transport-entry {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #000;
  border-radius: 9px;
  padding: .4rem .75rem;
}
.transport-entry + .transport-entry { margin-top: .4rem; }
.transport-entry.transport-divide { margin-top: .55rem; }
.transport-entry i { font-size: .78rem; color: #F7C948; flex-shrink: 0; }
.transport-time { font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .01em; color: #fff; white-space: nowrap; }
.transport-caption { font-family: var(--body); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #8A6830; margin-top: .35rem; padding-left: .1rem; }
.transport-caption + .transport-entry { margin-top: .4rem; }

.transport-note {
  margin-top: 1.2rem;
  padding: .7rem .85rem;
  border-radius: 12px;
  background: var(--card-gold-bg);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.transport-note i { color: var(--tag-turq-mut); font-size: 1.05rem; flex-shrink: 0; }
.transport-note-txt { font-family: var(--body); font-size: .52rem; font-style: italic; font-weight: 400; letter-spacing: -.01em; text-transform: uppercase; color: #8A6830; }
.transport-note-txt strong { color: var(--card-navy); font-weight: 700; }
.transport-note-txt strong.tq { color: var(--tag-turq-mut); }

.p-contact { background: var(--cream-2); border-radius: var(--radius-sm); border: 1px solid var(--cream-3); padding: .75rem 1rem; margin-top: .75rem; font-family: var(--body); font-size: .875rem; color: #8A6830; line-height: 1.8; }

/* ── News items ── */
.news-item { border: 1px solid var(--cream-3); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.news-date { font-family: var(--display); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: .35rem; }
.news-title { font-family: var(--display); font-size: 1.05rem; font-weight: 900; letter-spacing: .02em; color: var(--wood); text-transform: uppercase; margin-bottom: .5rem; line-height: 1.2; }

/* ── Gallery empty state ── */
.gal-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: 1.75rem 1rem; background: var(--card-navy); border-radius: var(--radius-sm); border: none; font-family: var(--body); font-size: .78rem; color: rgba(255,255,255,.6); }
.gal-empty i { font-size: 1.6rem; color: var(--card-gold); }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .5rem; margin-bottom: .5rem; }
.gal-grid:empty { display: none; }
.gal-thumb { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--cream-3); background: var(--cream-2); cursor: pointer; }

/* ── Photo lightbox ── */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #fff;
  flex-direction: column;
}
.lightbox.open { display: flex; }
.lightbox-topbar {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-bottom: 1px solid var(--cream-3);
}
.lightbox-counter {
  font-family: var(--body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--wood);
}
.lightbox-close {
  position: absolute;
  top: 50%; right: 1.1rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: none;
  color: rgba(0,0,0,.55);
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 50%;
  transition: background .18s;
}
.lightbox-close:hover { background: var(--cream-2); }
.lightbox-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 4rem;
}
.lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(0,0,0,.45);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.lightbox-nav:hover { background: var(--cream-2); color: var(--wood); }
.lightbox-prev { left: .5rem; }
.lightbox-next { right: .5rem; }
.lightbox-bottombar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--cream-3);
}
.lightbox-filename {
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 600;
  color: var(--wood);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lightbox-download {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .45rem;
  background: var(--card-gold);
  border: 1px solid var(--card-gold);
  color: var(--card-navy);
  border-radius: 100px;
  height: 40px;
  padding: 0 1.1rem 0 .9rem;
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.lightbox-download:hover { background: #E8C878; transform: translateY(-1px); }
.lightbox-download i { font-size: 1.1rem; }
.lightbox-download.is-loading { opacity: .7; pointer-events: none; }
.lightbox-download.is-error { background: var(--coral-2); color: #fff; }

/* ── "Agregar a pantalla de inicio" install banner ── */
.install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 500;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  max-width: 420px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--cream-3);
  border-radius: 14px;
  padding: 1rem 2rem 1rem 1rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .32s;
}
.install-banner.open { transform: translateY(0); opacity: 1; }
.install-banner-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--cream-2);
  color: var(--gold-dk);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
}
.install-banner-body { flex: 1; min-width: 0; }
.install-banner-title { font-family: var(--display); font-size: .85rem; font-weight: 700; color: var(--wood); margin-bottom: .2rem; }
.install-banner-text { font-family: var(--body); font-size: .74rem; color: rgba(0,0,0,.55); line-height: 1.4; margin-bottom: .6rem; }
.install-banner-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gold-dk);
  border: none;
  border-radius: 100px;
  padding: .45rem 1rem;
  cursor: pointer;
}
.install-banner-close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--cream-2);
  color: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: .75rem;
  padding: 0;
}
@media (max-width: 600px) {
  .lightbox-stage { padding: .5rem 3.4rem; }
  /* Kept at a real tappable size (44px+) instead of shrinking further —
     a small target is what made prev/next feel unresponsive on phones. */
  .lightbox-nav { width: 46px; height: 46px; font-size: 1.25rem; background: rgba(255,255,255,.65); }
  .lightbox-prev { left: .15rem; }
  .lightbox-next { right: .15rem; }
  .lightbox-filename { font-size: .68rem; }
  .lightbox-download { height: 36px; padding: 0 .8rem 0 .7rem; gap: .3rem; font-size: 0; }
  .lightbox-download i { font-size: 1.05rem; }
}
.p-contact a { color: var(--gold-dk); }
.p-contact a:hover { text-decoration: underline; }

/* ── Form fields (registro panel) ── */
.p-label { display: block; font-family: var(--body); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #8A6830; margin-bottom: .32rem; }
.p-label .req { color: var(--coral); margin-left: 2px; font-weight: 700; }
.p-input {
  display: block; width: 100%; padding: .6rem .8rem;
  background: #fff; border: 1.5px solid var(--cream-3);
  border-radius: 8px; font-family: var(--body); font-size: .875rem;
  color: #1A1A1A; transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none; appearance: none;
}
.p-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,130,10,.12); }
.p-input::placeholder { color: #B8A888; }
/* Safari/iOS autofill paints inputs bright yellow by default, clashing
   with the gold/cream palette — repaint the fill in the brand cream tone. */
.p-input:-webkit-autofill,
.p-input:-webkit-autofill:hover,
.p-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--cream-2) inset !important;
  -webkit-text-fill-color: #1A1A1A !important;
  caret-color: #1A1A1A;
  transition: background-color 5000s ease-in-out 0s;
}
.p-field { margin-bottom: .85rem; }
.reg-success-check { font-size: 2.8rem; color: var(--gold-lt); display: block; margin-bottom: .75rem; }

/* ── Agenda ── */
.day-block { margin-bottom: 2rem; }
.day-hdr { margin-bottom: .85rem; }
.day-hdr-num { display: block; font-family: var(--display); font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #8A6830; line-height: 1; margin-bottom: .3rem; }
.day-hdr-date { display: flex; align-items: center; gap: .45rem; font-family: var(--display); font-size: 1.05rem; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; color: var(--wood); padding-bottom: .55rem; border-bottom: 2px solid #8A6830; }
.day-hdr-date i { color: #8A6830; font-size: 1.05rem; flex-shrink: 0; }

/* ── Agenda: day tabs (Día 1-4 on top, content swaps below) ── */
.agenda-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .4rem;
  margin-bottom: 1.75rem;
}
.agenda-tab {
  text-align: center;
  padding: .6rem .2rem;
  border: 1.5px solid var(--cream-3);
  border-radius: 12px;
  background: #fff;
  transition: background .18s, border-color .18s;
  min-width: 0;
}
.agenda-tab:hover { border-color: var(--card-navy); }
.agenda-tab.active { background: var(--card-navy); border-color: var(--card-navy); }
.agenda-tab-num {
  display: block;
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--card-navy);
  line-height: 1.15;
  margin-bottom: .3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda-tab.active .agenda-tab-num { color: var(--card-gold); }
.agenda-tab-date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  font-family: var(--display);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(0,0,0,.45);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda-tab.active .agenda-tab-date { color: rgba(255,255,255,.85); }
.agenda-tab-date i { display: none; }
.agenda-tab-date-short { display: none; }
.agenda-tab-icon-mobile { display: none; }
.agenda-day { display: none; }
.agenda-day.active { display: block; animation: panelIn .22s ease; }
@media (max-width: 480px) {
  .agenda-tabs { gap: .2rem; }
  .agenda-tab { padding: .5rem .08rem; }
  .agenda-tab-num { font-size: .88rem; letter-spacing: 0; }
  .agenda-tab-date { font-size: .56rem; }
  .agenda-tab-date-full { display: none; }
  .agenda-tab-date-short { display: inline; }
  /* "TRANSPORTE" doesn't fit legibly in a fifth of the row on small
     phones — a bus icon reads instantly instead of getting clipped. */
  .agenda-tab-transporte .agenda-tab-num,
  .agenda-tab-transporte .agenda-tab-date { display: none; }
  .agenda-tab-transporte .agenda-tab-icon-mobile {
    display: block;
    font-size: 1.35rem;
    color: var(--card-navy);
  }
  .agenda-tab-transporte.active .agenda-tab-icon-mobile { color: #fff; }
}

/* ── Timeline: dot + connecting line + card per item ── */
.a-item {
  position: relative;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: .9rem 1rem .9rem .9rem;
  margin: 0 0 .75rem 1.35rem;
  background: none;
  border: 1.5px solid var(--card-gold);
  border-radius: 14px;
  font-family: var(--body);
  font-size: .875rem;
  color: #8A6830;
}
.a-item::before {
  content: '';
  position: absolute;
  left: -1.35rem; top: 1.05rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #8A6830;
  z-index: 1;
}
.a-item::after {
  content: '';
  position: absolute;
  left: -1.107rem; top: 1.05rem; bottom: -1.6rem;
  width: 1.5px;
  background: rgba(184,130,10,.35);
}
.a-item:last-child::after { display: none; }
.a-item:first-child { margin-left: 1.35rem; }
.a-time { font-family: var(--display); font-size: .78rem; font-weight: 700; letter-spacing: .01em; color: var(--wood); min-width: 78px; padding: .1rem 0 0 0; white-space: nowrap; }
.a-time.a-time-split {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  text-align: center;
  padding-top: .15rem;
  white-space: normal;
}
.a-time-start, .a-time-end { font-size: .72rem; line-height: 1.1; }
.a-time-sep { width: 20px; height: 2px; background: var(--gold); border-radius: 2px; flex-shrink: 0; }
.a-info { display: flex; flex-direction: column; gap: .2rem; padding-top: 1px; }
.a-title { font-family: var(--display); font-weight: 700; font-size: .85rem; letter-spacing: .03em; color: var(--wood); text-transform: uppercase; }
.a-loc { display: flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: #8A6830; text-transform: uppercase; }
.a-loc i { font-size: .85rem; flex-shrink: 0; }
/* Audience tags: solid fill, white text for everyone/restricted; the
   "espacio libre" opportunity tag keeps its own gold/navy solid style.
   Classified by whoTag()/the audience-tag scan in effects.js based on
   the label's data-es value. */
.a-who {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: #000;
  border: 1px solid #000;
  border-radius: 9px;
  padding: .4rem .75rem;
  margin-top: .1rem;
}
.a-who.tag-restricted { color: #fff; background: #000; border-color: #000; }
.a-who.tag-highlight { color: var(--navy); background: var(--gold-brand); border-color: var(--gold-brand); }
.a-sponsor { display: block; font-size: .52rem; font-style: italic; font-weight: 400; letter-spacing: -.01em; color: #8A6830; text-transform: none; line-height: 1.5; white-space: nowrap; }
.a-note { font-family: var(--display); font-size: .74rem; letter-spacing: .06em; color: var(--gold-dk); font-weight: 700; text-transform: uppercase; margin-top: .1rem; }

/* Items with no time (Llegadas / Salidas) become a centered divider label */
.a-item:has(.a-time:empty) {
  box-shadow: none;
  border: none;
  background: none;
  padding: .75rem 0 .25rem;
  margin-left: 0;
}
.a-item:has(.a-time:empty)::before,
.a-item:has(.a-time:empty)::after { display: none; }
.a-item:has(.a-time:empty) .a-time { display: none; }
.a-item:has(.a-time:empty) .a-info { flex-direction: row; align-items: center; width: 100%; }
.a-item:has(.a-time:empty) .a-info::before,
.a-item:has(.a-time:empty) .a-info::after { content: ''; flex: 1; height: 1px; background: var(--cream-3); }
.a-item:has(.a-time:empty) .a-title { display: flex; align-items: center; gap: .5rem; white-space: nowrap; padding: 0 .9rem; font-size: .95rem; }
.a-note-dress span { color: #D0202B; }

/* ── Floor plan ── */
.fp-iframe-wrap { width: 100%; }
.fp-iframe-wrap iframe { display: block; width: 100%; aspect-ratio: 1644 / 744; height: auto; border: none; }

.stand-chips { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: .8rem; }
.stand-chip { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--body); font-weight: 600; font-size: .78rem; color: var(--wood); }
.stand-chip i { color: var(--gold-dk); font-size: .95rem; }
.stand-titlebar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .7rem; margin-top: .2rem; border-top: 1px solid var(--cream-3); }
.stand-titlebar-name { font-family: var(--display); font-weight: 900; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; color: var(--wood); }
.stand-fullscreen-btn { display: inline-flex; align-items: center; gap: .3rem; background: var(--cream-2); border: 1px solid var(--cream-3); border-radius: 100px; padding: .35rem .7rem; font-family: var(--display); font-weight: 700; font-size: .68rem; letter-spacing: .05em; color: var(--gold-dk); cursor: pointer; white-space: nowrap; }
.stand-fullscreen-btn i { font-size: .9rem; }
.stand-titlebar-sub { font-family: var(--body); font-size: .74rem; color: var(--gold-dk); opacity: .8; margin: .35rem 0 .9rem; }
/* ─────────────────────────────────────────
   PATROCINADORES PLATINO
───────────────────────────────────────── */
.patros-section {
  background: #F7F6F2;
  padding: 4rem 2rem;
  text-align: center;
  border-top: 1px solid rgba(212,168,32,.12);
  scroll-margin-top: 84px;
}
.patros-eyebrow {
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
}
.patros-title {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wood);
  line-height: 1.1;
  margin-bottom: .75rem;
}
.patros-title em { color: var(--gold-dk); font-style: normal; }
.patros-legend {
  font-family: var(--body);
  font-size: .9rem;
  color: rgba(0,0,0,.55);
  text-align: center;
  margin-bottom: 1.75rem;
}
.patros-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}
.patro-card {
  position: relative;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(212,168,32,.18);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  width: 170px;
  min-height: 100px;
  transition: background .22s, border-color .22s, transform .18s;
}
.patro-card:hover {
  background: rgba(212,168,32,.08);
  border-color: rgba(212,168,32,.45);
  transform: translateY(-3px);
}
.patro-card img {
  max-width: 130px;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: .55;
  transition: opacity .22s, filter .22s;
}
.patro-card:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.patro-name {
  font-family: var(--display);
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(212,168,32,.55);
  font-weight: 700;
}
.patro-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--display);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-lt);
  background: rgba(212,168,32,.1);
  border: 1px solid rgba(212,168,32,.25);
  border-radius: 100px;
  padding: .2rem .65rem;
  margin-bottom: 1.75rem;
}
/* Tier badges (Oro / Plata / Invitados) — same shape as .patro-badge,
   just a quieter neutral tint instead of gold, so the wall reads as one
   sober recognition list with 4 clearly labeled groups, not 4 clashing
   colors. Platino keeps the existing gold .patro-badge treatment. */
.patro-badge.tier-oro { color: var(--gold-dk); background: rgba(184,130,10,.1); border-color: rgba(184,130,10,.25); }
.patro-badge.tier-plata { color: rgba(0,0,0,.55); background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.14); }
.patro-badge.tier-invitados { color: var(--gold-dk); background: var(--cream-2); border-color: var(--cream-3); }
.patros-tier-hdr {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 2.5rem 0 1.75rem;
}
.patros-tier-hdr:first-of-type { margin-top: 0; }
.patros-tier-hdr::before, .patros-tier-hdr::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(212,168,32,.2);
}
@media (max-width: 600px) {
  .patros-section { padding: 2.5rem 1.25rem; }
  .patros-grid { gap: .6rem; }
  .patro-card { width: 80px; min-height: 52px; padding: .5rem .6rem; gap: .3rem; }
  .patro-card img { max-width: 60px; max-height: 24px; }
  .patro-name { font-size: .5rem; }
  .patros-tier-hdr { margin: 1.75rem 0 1.1rem; }
}

/* ─────────────────────────────────────────
   MEMORIA SECTION (video Huatulco 2024)
───────────────────────────────────────── */
.memoria-section {
  background: #FFFFFF;
  padding: 4rem 2rem;
  text-align: center;
}
.memoria-eyebrow {
  font-family: var(--display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .6rem;
}
.memoria-title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wood);
  line-height: 1.1;
  margin-bottom: 1.75rem;
}
.memoria-title em {
  color: var(--gold-dk);
  font-style: normal;
}
.video-wrap {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,.55);
  border: 1px solid rgba(184,130,10,.2);
}
.video-aspect {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background: #111;
}
.video-aspect iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
.memoria-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 42%, #1c2b31 0%, #0c1417 74%);
}
.memoria-soon-msg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.memoria-soon-msg i { font-size: 1.9rem; color: #e8b94a; opacity: .9; }
.memoria-soon-msg span {
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  text-align: center;
  max-width: 70%;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .memoria-section { padding: 2.5rem 1.25rem; }
}

/* ─────────────────────────────────────────
   SEDE SECTION
───────────────────────────────────────── */
.sede-section {
  background: #FFFFFF;
  padding: 4.5rem 2rem;
}
.sede-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3.5rem;
  align-items: center;
}
.sede-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,0) 65%);
  pointer-events: none;
  z-index: 1;
}
.sede-visual-logo {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  height: 84px;
  width: auto;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.55));
  z-index: 2;
}
.sede-visual {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #F7F6F2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-dk);
}
.sede-eyebrow {
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .4em;
  color: var(--gold-lt);
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.sede-name {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--wood);
  line-height: 1.0;
  margin-bottom: .7rem;
  letter-spacing: .02em;
}
.sede-addr {
  font-family: var(--body);
  font-size: .6rem;
  color: rgba(0,0,0,.55);
  line-height: 1.65;
  margin-bottom: 1.75rem;
  font-style: italic;
  white-space: nowrap;
}
/* Event card content — same visual language as the agenda's .a-item:
   bold uppercase title, then time, location and audience tag as
   distinct, clearly separated lines instead of one crowded row. */
.ev-name {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--wood);
  line-height: 1.2;
  margin-bottom: .35rem;
}
.ev-time {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  color: var(--wood);
  margin-bottom: .3rem;
}
.ev-loc {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--body);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #8A6830;
  margin-bottom: .35rem;
}
.ev-loc i { font-size: .9em; flex-shrink: 0; }
.ev-who {
  display: inline-block;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  background: #000;
  border: 1px solid #000;
  border-radius: 9px;
  padding: .4rem .75rem;
}
.ev-who.tag-restricted { color: #fff; background: #000; border-color: #000; }
.ev-who.tag-highlight { color: var(--navy); background: var(--gold-brand); border-color: var(--gold-brand); }

.sede-facts-plain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 600;
  color: var(--wood);
}
.sede-facts-plain-item { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.sede-facts-plain-item i { font-size: .95rem; color: #8A6830; }
.sede-facts-plain-sep { color: rgba(0,0,0,.3); }
.sede-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.sede-fact {
  --fc: var(--gold-dk);
  background: #FFFFFF;
  border: 1px solid var(--border-dk);
  border-left: 3px solid var(--fc);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
}
.sede-fact-val {
  font-family: var(--body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--wood);
  line-height: 1.35;
}
.sede-fact-live  { --fc: #D9A400; background: color-mix(in srgb, var(--fc) 18%, #fff); }
.sede-fact-next  { --fc: #8A6830; }
.sede-fact-live .sf-badge { background: var(--forest); }

.sf-hd { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.sf-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .9rem;
  background: color-mix(in srgb, var(--fc) 16%, transparent);
  color: var(--fc);
}
.sf-title {
  font-family: var(--display);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wood);
}
.sf-badge {
  margin-left: auto;
  font-family: var(--display);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--fc);
  padding: .22rem .55rem;
  border-radius: 100px;
  flex-shrink: 0;
}
.sf-sub {
  font-family: var(--body);
  font-size: .72rem;
  color: rgba(0,0,0,.45);
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(0,0,0,.1);
}
.sf-sub:empty { display: none; }


/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.site-footer {
  background: var(--card-navy);
  border-top: 1px solid var(--border-dk);
  padding: 3.5rem 2rem 2rem;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-dk);
}
.footer-brand {}
.footer-brand-name {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: .22em;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.footer-brand-year {
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .32em;
  color: var(--gold-lt);
  text-transform: uppercase;
  margin-bottom: .85rem;
}
.footer-brand-desc {
  font-family: var(--body);
  font-size: .8rem;
  color: rgba(255,255,255,.3);
  line-height: 1.7;
  max-width: 26ch;
}
.footer-col-title {
  font-family: var(--display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.footer-links a {
  font-family: var(--body);
  font-size: .82rem;
  color: rgba(255,255,255,.38);
  transition: color .15s;
}
.footer-links a:hover { color: rgba(255,255,255,.82); }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-family: var(--body);
  font-size: .82rem;
  color: rgba(255,255,255,.38);
  margin-bottom: .55rem;
  line-height: 1.45;
}
.footer-contact-item i { font-size: .95rem; color: var(--gold); flex-shrink: 0; margin-top: .1rem; }
.footer-contact-item a { color: rgba(255,255,255,.38); transition: color .15s; }
.footer-contact-item a:hover { color: rgba(255,255,255,.82); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}
.footer-copy {
  font-family: var(--body);
  font-size: .52rem;
  color: rgba(255,255,255,.18);
}
.footer-huichol {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.footer-dots-strip {
  height: 6px;
  width: 60px;
  background:
    radial-gradient(circle at 8.3%  50%, var(--cobalt) 2px, transparent 2px),
    radial-gradient(circle at 25%   50%, var(--teal)   2px, transparent 2px),
    radial-gradient(circle at 41.6% 50%, var(--gold)   2px, transparent 2px),
    radial-gradient(circle at 58.3% 50%, var(--purple) 2px, transparent 2px),
    radial-gradient(circle at 75%   50%, var(--coral)  2px, transparent 2px),
    radial-gradient(circle at 91.6% 50%, var(--forest) 2px, transparent 2px);
  background-size: 100% 100%;
}
.footer-craft {
  font-family: var(--display);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.18);
}

/* ─────────────────────────────────────────
   RESPONSIVE — ALL BELOW 900px / 600px
───────────────────────────────────────── */
@media (max-width: 900px) {
  .cards-featured { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .sede-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "img"
      "eyebrow"
      "name"
      "addr";
    gap: 0;
    align-items: start;
    background: #fff;
    border: 1px solid var(--border-dk);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 16px rgba(0,0,0,.05);
    overflow: hidden;
  }
  .sede-content { display: contents; }
  .sede-visual  { grid-area: img; aspect-ratio: 16/8; border: none; border-radius: 0; }
  .sede-visual-logo { height: 60px; top: .85rem; left: .85rem; }
  .sede-eyebrow { grid-area: eyebrow; font-size: .6rem; letter-spacing: .2em; margin: 1.1rem 1.1rem 0; }
  .sede-name    { grid-area: name; font-size: 1.4rem; margin: .3rem 1.1rem .4rem; line-height: 1.05; }
  .sede-addr    { grid-area: addr; font-size: .6rem; margin: 0 1.1rem 1.1rem; }
  .sede-facts-plain { grid-column: 1 / -1; margin: 0 1.1rem 1.1rem; }
  .sede-facts   { grid-column: 1 / -1; margin: 0 1.1rem 1.1rem; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top > .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .cards-section  { padding: 2.75rem 1.25rem; }
  .panels-wrap    { padding: 0 1.25rem 2.5rem; }
  .sede-section   { padding: 2.5rem 1.25rem; }
  .site-footer    { padding: 2.5rem 1.25rem 1.5rem; }
  .cd-bar         { padding: .85rem 1rem; }
  .cd-inner       { gap: 1rem; }
  .cd-units       { gap: .3rem; }
  .cd-unit        { min-width: 46px; }
  .cd-num         { font-size: 1.9rem; }
  .cd-colon       { font-size: 1.6rem; }
  .cd-label       { font-size: .68rem; }
  .p-g2           { grid-template-columns: 1fr; }
  .sede-facts     { grid-template-columns: 1fr; }
  .sede-fact      { padding: .65rem .75rem; }
  .sede-fact-val  { font-size: .78rem; line-height: 1.25; }
  .footer-top     { grid-template-columns: 1fr; gap: 2rem; }
  .footer-brand   { grid-column: auto; }
}

/* ═══════════════════════════════════════════════
   APP EXPERIENCE — MOBILE-FIRST LAYER
   (everything below only fires at ≤ 768px
    except the global touch/PWA rules at top)
═══════════════════════════════════════════════ */

/* Global touch improvements */
* { -webkit-tap-highlight-color: transparent; }
button, [role="button"], a { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; }

/* Active tap feedback on cards */
.card-feat:active { transform: scale(0.98) !important; }
.card-sm:active   { transform: scale(0.97) !important; }

/* ── Sheet backdrop ── */
.sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 350;
  opacity: 0;
  transition: opacity .28s;
}
.sheet-backdrop.open {
  display: block;
  opacity: 1;
}

/* ══════════════════════════════════════ */
@media (max-width: 768px) {

  /* Body padding for tab bar + safe area */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y: none;
  }

  /* Taller art strips on mobile, using a wider crop made for this
     narrower viewport instead of the desktop tiled strip. */
  .huichol-div { height: 85px; background: #000 url('../img/arte-huichol-movil.jpg') center / cover no-repeat; }
  .huichol-div-top { height: 95px; background-size: cover; }
  .huichol-div-logo { height: 56px; }

  /* Smaller venue address on mobile (Safari renders it a bit large) */
  .sede-addr { font-size: .55rem; line-height: 1.5; margin-bottom: 1.25rem; white-space: nowrap; }

  /* Footer: not needed in the mobile app-like view (tab bar covers nav) */
  .site-footer { display: none; }

  /* Smaller ES/EN switcher, tighter to the banner above and the heading below */
  .lang-btn { height: 30px; padding: 0 .55rem; font-size: .58rem; }

  /* Smaller "Cerrar sesión" so it doesn't compete with the content below it */
  .welcome-bar-inner { padding: .5rem 1.1rem; }
  .welcome-bar-text { font-size: .76rem; }
  .welcome-bar-text i { font-size: .95rem; }
  .welcome-bar-logout { padding: .32rem .65rem; font-size: .58rem; }
  .welcome-bar-logout i { font-size: .82rem; }

  /* Quick-access cards: icon-left row, full-width, compact.
     Extra top padding gives the welcome-thanks bar room to breathe
     before "Acceso Rápido" starts, so they don't read as glued together. */
  .cards-section { padding: 1.75rem 1.1rem .5rem; }
  .sec-eyebrow { margin-bottom: .3rem; }
  .sec-heading { margin-bottom: 1rem; }
  .cards-featured, .cards-grid { gap: .7rem; }
  .card-feat, .card-sm {
    text-align: left;
    align-items: center;
  }
  .card-feat {
    grid-template-columns: 65px 1fr auto;
    min-height: auto;
    padding: 1.1rem 1.15rem;
    column-gap: .95rem;
    row-gap: .45rem;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.06);
  }
  .card-sm {
    flex-direction: row;
    min-height: auto;
    padding: 1rem .85rem;
    gap: .65rem;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 6px 16px rgba(0,0,0,.05);
  }
  .cf-icon {
    width: 65px; height: 65px; font-size: 1.62rem; border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  }
  .cf-title { font-size: 1.08rem; }
  .cf-desc { font-size: .72rem; }
  .cf-cta { display: none; }
  .cf-arrow-ind {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ca) 12%, transparent);
    color: var(--ca);
    font-size: 1.05rem;
  }
  .cs-icon {
    width: 51px; height: 51px; font-size: 1.28rem; border-radius: 12px; flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  }
  .cs-body { flex: 1; min-width: 0; }
  .cs-title { font-size: .76rem; line-height: 1.15; }
  .cs-sub { display: block; font-size: .6rem; padding-right: 0; margin-top: .15rem; line-height: 1.3; }
  .cs-highlight { font-size: .58rem; margin-top: .15rem; }
  /* Stands already shows its stat via cs-highlight — skip cs-sub there so
     every card keeps a single info line and the same height. */
  #card-stands .cs-sub { display: none; }
  .cs-arrow { display: none; }

  /* Event countdown: hidden everywhere by default (see header.hero, .cd-bar
     rule), brought back just on mobile, placed after the cards grid, with
     bigger, more elegant numbers and more breathing room between units.
     Selector needs the extra .cd-cards-wrap ancestor for specificity —
     otherwise the global "display:none" rule (same specificity, later
     in the file) wins the cascade tie and re-hides it. */
  .cd-cards-wrap .cd-bar {
    display: block;
    margin-top: 0;
    border-radius: 0;
    /* Extra bottom clearance so the numbers never render under the fixed
       bottom tab bar (~58px + safe-area) if this block lands near the
       edge of the viewport before the user scrolls. */
    padding: 1rem 1rem calc(1.1rem + 58px + env(safe-area-inset-bottom, 0px));
    border-top: none;
    border-bottom: none;
    background: none;
  }
  .cd-cards-wrap .cd-inner { flex-direction: column; gap: .4rem; }
  .cd-cards-wrap .cd-units { flex-direction: column; gap: .28rem; }
  .cd-cards-wrap .cd-unit { min-width: auto; }
  .cd-cards-wrap .cd-label { font-size: .58rem; letter-spacing: .18em; font-weight: 700; }
  .cd-cards-wrap .cd-num { font-size: 2rem; }
  .cd-cards-wrap .cd-lbl { display: none; }
  .cd-cards-wrap .cd-colon { font-size: 1.55rem; margin-bottom: 0; color: rgba(0,0,0,.22); animation: none; }
  /* Días: el número protagonista. Reloj (hrs:min:seg): fila compacta y
     apagada debajo, sin etiquetas — se lee como un reloj, no como datos. */
  .cd-cards-wrap .cd-num-days { font-size: 2.7rem; }
  .cd-cards-wrap .cd-lbl-days { display: block; font-size: .6rem; }
  .cd-cards-wrap .cd-clock { margin-top: .1rem; }
  .cd-cards-wrap .cd-clock .cd-num { font-size: 1.05rem; }
  .cd-cards-wrap .cd-clock .cd-colon { font-size: .9rem; }

  /* ── Hero: 2-column layout (title left · CTAs right) ──
     Everything visible at once, no scroll needed.         */
  .hero-body {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "tag   tag"
      "ttl   ctas"
      "meta  ctas";
    align-items: end;
    gap: 0;
    text-align: left;
    padding: 0 1.25rem calc(1.75rem + env(safe-area-inset-bottom, 0px));
  }
  .hero-tag   { grid-area: tag;  margin-bottom: .6rem; justify-content: flex-start; }
  .hero-title {
    grid-area: ttl;
    font-size: clamp(2.2rem, 9vw, 2.9rem);
    margin-bottom: .45rem;
    line-height: .92;
  }
  .hero-meta {
    grid-area: meta;
    flex-direction: column;
    align-items: flex-start;
    gap: .22rem;
    margin-bottom: 0;
  }
  .hero-meta-item { font-size: .78rem; }
  /* CTAs: vertical stack on the RIGHT, aligned to bottom of grid */
  .hero-ctas {
    grid-area: ctas;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: .5rem;
    align-self: end;
    align-items: stretch;
    padding-left: .875rem;
    margin-bottom: 0;
  }
  .btn-primary,
  .btn-secondary {
    height: 48px;
    min-height: 48px;
    padding: 0 1rem;
    font-size: .72rem;
    letter-spacing: .1em;
    width: auto;
    min-width: 118px;
    justify-content: center;
  }
  /* Hide icon on mobile to keep buttons compact */
  .btn-primary i,
  .btn-secondary i { display: none; }

  /* Panels wrapper becomes a fixed full-screen portal */
  .panels-wrap {
    position: fixed;
    inset: 0;
    z-index: 360;
    padding: 0;
    pointer-events: none;
    overflow: hidden;
  }

  /* All panels become bottom sheets */
  .sec-panel {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    display: block !important;  /* always rendered, hidden via transform */
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
    transition: transform .36s cubic-bezier(.16,1,.3,1),
                visibility 0s linear .36s;
    height: 100dvh;
    height: 100vh;
    border-radius: 0;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    animation: none !important;
    margin: 0 !important;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 60px rgba(0,0,0,.5);
  }
  .sec-panel.open {
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
    transition: transform .36s cubic-bezier(.16,1,.3,1),
                visibility 0s;
  }

  /* Drag handle indicator */
  .sec-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(0,0,0,.14);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }

  /* Panel header pinned to the top of the sheet while scrolling.
     Deliberately `fixed`, not `sticky`: iOS Safari has long-standing bugs
     where `position: sticky` fails inside a scroll container that also has
     `-webkit-overflow-scrolling: touch` (used below on .sec-panel), letting
     content scroll on top of the header instead of under it. `.sec-panel`
     has its own `transform` for the slide-up animation, which makes it the
     containing block for `fixed` descendants — so this still pins to the
     panel, not the whole viewport, without the sticky bug. */
  .panel-hd {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: var(--navy);
  }

  /* ── Bottom tab bar ── */
  .tab-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 400;
    background: var(--card-navy);
    border-top: none;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    padding: .55rem .1rem;
    min-height: 58px;
    color: rgba(255,255,255,.9);
    transition: color .18s, transform .15s;
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }
  .tab-item::after {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 3px;
    background: var(--tc, var(--turquoise));
    transform: scaleX(0);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
    border-radius: 0 0 3px 3px;
  }
  .tab-item.active {
    color: var(--tc, var(--turquoise));
    transform: translateY(-1px);
  }
  .tab-item.active::after {
    transform: scaleX(1);
  }
  .tab-item:active {
    opacity: .65;
    transform: scale(.94);
  }

  .tab-icon {
    font-size: 1.35rem;
    line-height: 1;
    padding: .15rem .55rem;
    border-radius: 10px;
    transition: background .18s, transform .18s;
  }
  .tab-item.active .tab-icon {
    background: color-mix(in srgb, var(--tc, var(--turquoise)) 16%, transparent);
    transform: scale(1.05);
  }
  .tab-label {
    font-family: var(--body);
    font-size: .5rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 56px;
  }
  .tab-item.active .tab-label { font-weight: 700; }

  /* Panel content tweaks inside sheet. Top padding clears the now-fixed
     .panel-hd (~56px tall) so content never starts hidden underneath it. */
  .panel-bd { padding: calc(56px + 1.25rem) 1rem 1.25rem; }
  .p-g2     { grid-template-columns: 1fr; }

}/* end @media 768px */

/* Hide tab-bar on desktop */
@media (min-width: 769px) {
  .tab-bar        { display: none; }
  .sheet-backdrop { pointer-events: none; }
}

/* ── Access gate: shown first, hides the rest of the app until "login" ──
   Demo-only gate (no real backend) — just to preview the intended flow. */
body.gate-locked > *:not(#loginGate) { display: none !important; }
.login-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), #000 url('../img/fondo-huichol.jpg') center / cover no-repeat;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--cream);
  border-radius: var(--radius);
  border: 1px solid var(--border-dk);
  padding: 2.25rem 2rem;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  text-align: center;
}
.login-logo { height: 96px; width: auto; margin: 0 auto 1.25rem; display: block; }
.login-title {
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8A6830;
  line-height: 1.5;
  margin-bottom: .4rem;
}
.login-label {
  display: block;
  text-align: left;
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A6830;
  margin: 0 0 .32rem;
}
.login-field { margin-bottom: 1rem; }
.login-btn {
  width: 100%;
  justify-content: center;
  margin-top: .5rem;
}
.login-error {
  font-family: var(--body);
  font-size: .78rem;
  color: var(--coral);
  margin-top: .85rem;
}
.login-msg {
  font-family: var(--body);
  font-size: .78rem;
  color: var(--forest);
  margin-top: .85rem;
}
.login-tabs {
  display: flex;
  gap: .25rem;
  background: var(--cream-2);
  border-radius: 100px;
  padding: .25rem;
  margin-bottom: 1.5rem;
}
.login-tab {
  flex: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: .5rem .8rem;
  border-radius: 100px;
  font-family: var(--body);
  font-size: .75rem;
  font-weight: 700;
  color: rgba(0,0,0,.45);
  transition: background .18s, color .18s;
}
.login-tab.active { background: #fff; color: var(--gold-dk); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.login-link {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: .85rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--body);
  font-size: .74rem;
  font-weight: 600;
  color: var(--gold-dk);
  text-decoration: underline;
}
.news-pdf-embed {
  margin-top: .85rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--cream-3);
  background: #fff;
}
.news-pdf-embed img {
  display: block;
  width: 100%;
  height: auto;
}
.news-pdf-embed-zoomable {
  position: relative;
  cursor: pointer;
}
.news-pdf-embed-zoom-hint {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,.62);
  border-radius: 100px;
  padding: .3rem .65rem;
  pointer-events: none;
}
.news-pdf-embed-zoom-hint i { font-size: .85rem; }

@media (max-width: 768px) {
  #sec-noticias { background: #fff; }
  #sec-noticias .panel-bd { background: #fff; }
  #sec-noticias .news-item {
    border: 1px solid var(--cream-3);
    background: #fff;
    border-radius: 18px;
    padding: 1.35rem 1.25rem 1.5rem;
    box-shadow: 0 8px 22px rgba(0,0,0,.06);
  }
  #sec-noticias .news-date {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(184,130,10,.1);
    border: 1px solid rgba(184,130,10,.25);
    color: var(--gold-dk);
    padding: .3rem .75rem;
    border-radius: 100px;
    letter-spacing: .1em;
    font-size: .62rem;
    margin-bottom: .75rem;
  }
  #sec-noticias .news-item p.p-text { color: #8A6830; }
  #sec-noticias .news-pdf-embed {
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,.07);
  }
}

/* ── Countdown vs. Cards order: mobile keeps countdown first (source
   order); desktop shows the cards grid first, countdown after — same
   two elements, just resequenced per viewport. ── */
.cd-cards-wrap { display: flex; flex-direction: column; }
/* Flex auto-margins override "stretch", so #cards/.cd-bar (which center
   themselves with margin:0 auto) were shrinking to their content width
   instead of filling out to max-width like every other section. */
.cd-cards-wrap > * { width: 100%; }

/* Hero splash + countdown removed from the flow: after login the app
   jumps straight to the information (kept in the markup, just hidden,
   in case this needs to come back later). */
header.hero, .cd-bar { display: none; }

/* ── Welcome bar (shown once logged in) ── */
.welcome-bar {
  background: var(--card-navy);
  border-bottom: none;
}
.welcome-bar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: .65rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.welcome-bar-text {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--body);
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
}
.welcome-bar-text i { color: var(--card-gold); font-size: 1.05rem; }
.welcome-bar-logout {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--display);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--card-gold);
  padding: .4rem .85rem;
  border: 1px solid var(--card-gold);
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  transition: background .18s;
}
.welcome-bar-logout:hover { background: color-mix(in srgb, var(--card-gold) 15%, transparent); }

/* ─────────────────────────────────────────
   WELCOME THANKS — a dismissible greeting
   above "Acceso Rápido". JS toggles .is-hidden
   on scroll (past a small threshold) and when
   any section panel opens; it reappears once
   the visitor is back at the very top, and
   fresh again on every page load/reload.
───────────────────────────────────────── */
.welcome-thanks {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: .85rem 2rem;
  overflow: hidden;
  max-height: 90px;
  opacity: 1;
  background: linear-gradient(180deg, var(--cream-2), var(--cream) 70%);
  border-top: 3px solid var(--card-gold);
  border-bottom: 1px solid var(--border-dk);
  box-shadow: var(--shadow-card);
  transition: max-height .35s ease, opacity .28s ease, padding .35s ease, border-width .35s ease;
}
.welcome-thanks.is-hidden {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  pointer-events: none;
}
.welcome-thanks-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
  border-radius: 50%;
  background: var(--gold-pale);
}
.welcome-thanks-icon i { color: var(--gold-dk); font-size: 1rem; }
.welcome-thanks-name {
  flex-shrink: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--card-navy);
  position: relative;
  padding-right: .8rem;
}
.welcome-thanks-name:empty { display: none; padding-right: 0; }
.welcome-thanks-name::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.1em;
  background: var(--border-dk);
}
.welcome-thanks-name:empty::after { content: none; }
.welcome-thanks-msg {
  font-family: var(--body);
  font-size: .82rem;
  color: var(--wood);
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.welcome-thanks-msg strong { color: var(--card-navy); font-weight: 700; opacity: 1; }
@media (max-width: 900px) {
  .welcome-thanks { flex-wrap: wrap; text-align: center; padding: 1rem 1.25rem; max-height: 220px; }
  .welcome-thanks-name { padding-right: 0; }
  .welcome-thanks-name::after { content: none; }
  .welcome-thanks-msg { white-space: normal; font-size: .76rem; }
}

@media (max-width: 600px) {
  .welcome-bar-inner { padding: .6rem 1.25rem; }
}
.cd-cards-wrap #cards  { order: 1; }
.cd-cards-wrap .cd-bar { order: 2; }

/* ── Hero entrance animations ── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero-tag   { animation: heroFadeIn .6s .1s both; }
.hero-title { animation: heroFadeUp .7s .2s both; }
.hero-meta  { animation: heroFadeUp .7s .5s both; }
.hero-ctas  { animation: heroFadeUp .7s .7s both; }

/* Particle canvas — sits behind hero content */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: .55;
}