/* =============================================================
   PAOLA E IAN · Invitación Vaquera
   Edición "Midnight Rodeo" — modo NOCHE por defecto + modo DÍA
   Mobile-first · paneles desplegables · botones premium
   ============================================================= */

/* ---------- TEMA NOCHE (principal) ---------- */
:root,
html[data-theme="dark"]{
  color-scheme: dark;

  --paper:        #14100e;   /* fondo base */
  --paper-2:      #1c1613;   /* secciones alternas */
  --paper-3:      #241c18;   /* superficies */
  --sand:         #2a201a;
  --tint:         #191310;

  --surface:      #221a16;
  --surface-2:    #2b211b;
  --surface-hi:   rgba(255,255,255,.05);

  --ink:          #f6e9d6;   /* texto principal */
  --ink-soft:     #d7c1a5;
  --ink-mute:     #a4886c;
  --ink-title:    #ffdcae;

  --terra:        #e2703a;   /* terracota luminosa */
  --terra-2:      #ff8f4d;
  --terra-deep:   #b8501f;
  --terra-soft:   rgba(226,112,58,.22);
  --gold:         #f0b94a;
  --gold-soft:    rgba(240,185,74,.18);
  --sage:         #93b06a;
  --wa:           #25d366;
  --wa-2:         #128c4a;

  --line:         rgba(240,185,74,.16);
  --line-strong:  rgba(240,185,74,.34);

  --sh-1: 0 2px 8px rgba(0,0,0,.45);
  --sh-2: 0 12px 30px -14px rgba(0,0,0,.72);
  --sh-3: 0 28px 64px -28px rgba(0,0,0,.85);

  --grain-op:     .22;
  --grain-blend:  overlay;

  --hero-wash: linear-gradient(180deg,
      rgba(10,8,7,.66) 0%,
      rgba(10,8,7,.40) 22%,
      rgba(16,12,9,.56) 50%,
      rgba(18,14,12,.90) 80%,
      var(--paper) 100%);
  --hero-glow: radial-gradient(circle,
      rgba(226,238,252,.28), rgba(255,170,90,.14) 46%, transparent 72%);
  --hero-img-filter: brightness(.70) saturate(1.02) contrast(1.06);
  /* NOMBRES EN ORO — color fijo, sin brillo animado, trazo negro delgado */
  --name-gold:    #f4cd5e;
  --name-stroke:  #000000;
  --name-stroke-w: 1.6px;
  --hero-name-shadow: 0 2px 0 rgba(0,0,0,.7), 0 8px 18px rgba(0,0,0,.6);
  --silver:       #dfe8f2;
  --silver-soft:  rgba(214,228,244,.16);
  --silver-line:  rgba(214,228,244,.44);

  --map-filter: invert(.9) hue-rotate(180deg) saturate(.75) brightness(.92);
  --dust-color: 255, 224, 170;
  --toast-bg:  #f6e9d6;
  --toast-ink: #1b1310;
}

/* =============================================================
   TEMA DÍA · "Desert Noon" (rediseñado)
   Papel cálido de cantina, tinta café oscura muy legible,
   terracota saturada y acento verde nopal. Alto contraste.
   ============================================================= */
html[data-theme="light"]{
  color-scheme: light;

  --paper:        #fff8ec;   /* crema cálido */
  --paper-2:      #fdefd9;   /* secciones alternas */
  --paper-3:      #ffffff;
  --sand:         #f6e2c0;
  --tint:         #f8ead1;

  --surface:      #ffffff;
  --surface-2:    #fff4e2;
  --surface-hi:   rgba(255,255,255,.96);

  --ink:          #2f1c10;   /* café casi negro: máxima legibilidad */
  --ink-soft:     #55371f;
  --ink-mute:     #7a5636;
  --ink-title:    #7a2f10;   /* títulos en terracota profunda */

  --terra:        #c1451a;
  --terra-2:      #e2611f;
  --terra-deep:   #97300f;
  --terra-soft:   rgba(226,97,31,.20);
  --gold:         #9a6410;   /* oro oscurecido: legible sobre crema */
  --gold-soft:    rgba(200,145,35,.20);
  --sage:         #4d6b2a;
  --wa:           #12924a;
  --wa-2:         #0b7439;

  --line:         rgba(120, 74, 40, .26);
  --line-strong:  rgba(120, 74, 40, .48);

  --sh-1: 0 2px 6px rgba(120, 74, 40, .12);
  --sh-2: 0 10px 24px -12px rgba(120, 74, 40, .34);
  --sh-3: 0 24px 54px -26px rgba(95, 55, 26, .46);

  --grain-op:     .16;
  --grain-blend:  multiply;

  /* El hero de día: la foto se aclara y el texto descansa sobre
     un velo crema fuerte en la parte baja */
  --hero-wash: linear-gradient(180deg,
      rgba(255,248,236,.34) 0%,
      rgba(255,248,236,.14) 20%,
      rgba(255,244,226,.46) 48%,
      rgba(255,248,236,.90) 78%,
      var(--paper) 100%);
  --hero-glow: radial-gradient(circle,
      rgba(255,236,186,.72), rgba(255,206,132,.30) 45%, transparent 72%);
  --hero-img-filter: brightness(1.06) saturate(1.06) contrast(1.02);

  /* Nombres de día: mismo oro con trazo negro delgado */
  --name-gold:    #e0a52c;
  --name-stroke:  #000000;
  --name-stroke-w: 1.6px;
  --hero-name-shadow: 0 1px 0 rgba(0,0,0,.45), 0 6px 14px rgba(120,74,40,.35);

  --silver:       #55371f;
  --silver-soft:  rgba(120,74,40,.12);
  --silver-line:  rgba(120,74,40,.42);

  --map-filter: saturate(1.02) contrast(1.03);
  --dust-color: 168, 108, 52;
  --toast-bg:  #2f1c10;
  --toast-ink: #fff8ec;
}

/* --- Ajustes finos exclusivos del modo DÍA --- */
html[data-theme="light"] .grain{ opacity:.10; }

/* Cintillos e insignias: fondo sólido cálido en vez de translúcido */
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .hero__strip{
  background:rgba(255,252,245,.94);
  border-color:var(--line-strong);
  color:var(--ink-soft);
}
html[data-theme="light"] .hero__strip b{ color:var(--ink-title); }

/* "Asistir con Vestimenta Vaquera": chapa terracota, se lee de lejos */
html[data-theme="light"] .hero__dress{
  color:#fff;
  background:linear-gradient(140deg,var(--terra-2),var(--terra) 60%,var(--terra-deep));
  border:1.5px dashed rgba(255,255,255,.65);
  text-shadow:0 1px 2px rgba(80,30,10,.55);
  box-shadow:0 12px 26px -14px rgba(193,69,26,.7), inset 0 1px 0 rgba(255,255,255,.4);
}

/* Estrella del sheriff y detalles metálicos legibles */
html[data-theme="light"] .sheriff-star{
  color:var(--terra);
  filter:drop-shadow(0 3px 10px rgba(193,69,26,.35));
}
html[data-theme="light"] .scroll-cue{ color:var(--ink-soft); }

/* Cartel WANTED: papel envejecido real */
html[data-theme="light"] .poster{
  background:
    radial-gradient(120% 100% at 20% 0%, #fffdf6, transparent 62%),
    linear-gradient(180deg,#fdf3df,#f7e6c8);
  color:var(--ink-soft);
}
html[data-theme="light"] .poster__badge{
  background:var(--terra);
  color:#fff;
  border-color:transparent;
}
html[data-theme="light"] .poster__lead b{ color:var(--terra); }

/* Superficies con borde definido para que no se "pierdan" */
html[data-theme="light"] .card,
html[data-theme="light"] .dress-item,
html[data-theme="light"] .cd-cell,
html[data-theme="light"] .mini-facts li,
html[data-theme="light"] .rsvp,
html[data-theme="light"] .map-card,
html[data-theme="light"] .panel__item{
  border-color:var(--line-strong);
}
html[data-theme="light"] .card__icon,
html[data-theme="light"] .panel__ico{
  background:linear-gradient(150deg,#fff3dc,#f7e2bd);
  color:var(--terra);
  border-color:var(--line-strong);
}
html[data-theme="light"] .tl-time,
html[data-theme="light"] .dress-note i,
html[data-theme="light"] .form-note i,
html[data-theme="light"] .panel__foot i,
html[data-theme="light"] .divider{ color:var(--terra); }

html[data-theme="light"] .dress-note{
  background:linear-gradient(180deg,#fff6e6,#fdecd2);
  border-color:var(--line-strong);
  color:var(--ink-soft);
}

/* Botón suave: en día usa terracota sobre crema, no oro pálido */
html[data-theme="light"] .btn--soft{
  color:var(--terra-deep);
  background:#fff6e8;
  border-color:var(--line-strong);
}
html[data-theme="light"] .btn--soft:hover{ color:#fff; background:var(--terra); border-color:var(--terra); }
html[data-theme="light"] .btn--outline{ color:var(--ink-soft); }

/* Dock y selector de tema con fondo opaco */
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .dock{ background:rgba(255,252,245,.96); }
html[data-theme="light"] .theme-toggle i{ color:var(--terra); }
html[data-theme="light"] .dock__btn{
  color:var(--terra-deep);
  background:#fff6e8;
}
html[data-theme="light"] .dock__btn--primary{ color:#fff; background:linear-gradient(140deg,#1fbf68,var(--wa) 60%,var(--wa-2)); }

/* Footer de día */
html[data-theme="light"] .footer{ background:linear-gradient(180deg,#fdefd9,#fff8ec); }
html[data-theme="light"] .footer__scape{ color:rgba(77,107,42,.28); }

/* Panel desplegable de día */
html[data-theme="light"] .panel__backdrop{ background:rgba(70,40,18,.46); }
html[data-theme="light"] .panel__card{
  background:linear-gradient(180deg,#fffdf7,#fdefd9);
}
html[data-theme="light"] .form-msg.err{ color:#b3260f; }

:root{
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --font-west: 'Rye', Georgia, serif;
  --font-type: 'Special Elite', 'Courier New', monospace;
  --font-body: 'Alegreya Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:16px;
}

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.62;
  font-size:17px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:calc(78px + var(--safe-b));
  transition:background-color .5s ease, color .5s ease;
}
body.no-scroll{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }
::selection{ background:var(--terra); color:#fff; }

.skip-link{
  position:fixed; top:-100px; left:12px; z-index:200;
  background:var(--terra); color:#fff; padding:10px 16px; border-radius:0 0 12px 12px;
  font-weight:700;
}
.skip-link:focus{ top:0; }

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- textura de grano ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:var(--grain-blend);
}

/* ---------- barra de progreso ---------- */
.progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:70;
  background:var(--line);
}
.progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--terra));
  transition:width .1s linear;
}

/* =============================================================
   SELECTOR DE TEMA
   ============================================================= */
.theme-toggle{
  position:fixed;
  top:calc(12px + var(--safe-t)); right:12px;
  z-index:110;
  display:inline-flex; align-items:center; gap:8px;
  min-height:42px; padding:0 15px;
  border-radius:999px;
  font-family:var(--font-type); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
  background:var(--surface);
  border:1px solid var(--line-strong);
  box-shadow:var(--sh-2);
  backdrop-filter:blur(10px);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .2s ease, color .2s ease, border-color .2s ease;
}
.theme-toggle i{ font-size:.95rem; color:var(--gold); }
.theme-toggle:hover{ color:var(--terra); border-color:var(--gold); }
.theme-toggle:active{ transform:scale(.95); }

/* =============================================================
   HERO
   ============================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px 20px calc(38px + var(--safe-b));
  overflow:hidden;
  isolation:isolate;
  background:var(--sand);
}

.hero__media{ position:absolute; inset:0; z-index:-3; }
.hero__img{
  width:100%; height:100%; object-fit:cover;
  object-position:50% 28%;
  transform:scale(1.06);
  filter:var(--hero-img-filter);
  animation:heroDrift 26s ease-in-out infinite alternate;
  transition:filter .6s ease;
}
@keyframes heroDrift{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to{ transform:scale(1.13) translate3d(0,-1.6%,0); }
}

.hero__wash{ position:absolute; inset:0; background:var(--hero-wash); }
.hero__glow{
  position:absolute; left:50%; top:24%;
  width:min(88vw,620px); aspect-ratio:1; transform:translate(-50%,-50%);
  background:var(--hero-glow);
  animation:pulseSun 7s ease-in-out infinite;
}
@keyframes pulseSun{ 0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1);} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.07);} }

#dust{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; }

.hero__inner{
  position:relative; z-index:2;
  text-align:center;
  max-width:720px; margin:0 auto; width:100%;
  animation:riseIn 1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes riseIn{ from{opacity:0;transform:translateY(26px);} to{opacity:1;transform:none;} }

.eyebrow{
  font-family:var(--font-type);
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:center;
  background:var(--surface);
  border:1px solid var(--line-strong);
  padding:7px 15px; border-radius:999px;
  box-shadow:var(--sh-1);
  backdrop-filter:blur(6px);
}
.eyebrow .dot{ width:4px; height:4px; border-radius:50%; background:var(--terra); display:inline-block; }

.sheriff-star{
  width:46px; height:46px; color:var(--gold); margin:16px auto 6px;
  filter:drop-shadow(0 3px 12px rgba(240,185,74,.45));
  animation:spinStar 26s linear infinite;
}
@keyframes spinStar{ to{ transform:rotate(360deg); } }

.hero__names{
  font-family:var(--font-west);
  font-weight:400;
  font-size:clamp(2.9rem,15vw,6.6rem);
  line-height:.94;
  letter-spacing:.01em;
  color:var(--ink-title);
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
/* Nombres en ORO con trazo negro delgado · color fijo, sin brillo */
.hero__name{
  position:relative;
  display:inline-block;
  white-space:nowrap;
  color:var(--name-gold);
  -webkit-text-stroke:var(--name-stroke-w) var(--name-stroke);
  paint-order:stroke fill;
  text-shadow:var(--hero-name-shadow);
  animation:none;
}
.hero__amp{
  font-family:var(--font-body); font-weight:800;
  font-size:.32em; letter-spacing:.08em;
  color:var(--silver);
  display:inline-flex; align-items:center; gap:12px;
  margin:2px 0;
  text-shadow:0 1px 0 rgba(0,0,0,.65), 0 0 14px rgba(214,232,252,.45);
}
.hero__amp::before,.hero__amp::after{
  content:''; width:clamp(34px,12vw,80px); height:2px;
  background:linear-gradient(90deg,transparent,var(--silver-line),transparent);
}
html[data-theme="light"] .hero__amp{
  color:var(--terra);
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}
html[data-theme="light"] .hero__amp::before,
html[data-theme="light"] .hero__amp::after{
  background:linear-gradient(90deg,transparent,var(--terra),transparent);
}

.hero__sub{
  font-family:var(--font-type);
  font-size:clamp(.9rem,3.6vw,1.2rem);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:12px;
}

.hero__strip{
  margin:18px auto 0;
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:9px 16px;
  box-shadow:var(--sh-2);
  backdrop-filter:blur(8px);
}
.hero__strip b{
  font-family:var(--font-west); font-weight:400;
  font-size:.82rem; letter-spacing:.04em; color:var(--ink-title);
}
.hero__strip i{ color:var(--terra); font-size:.78rem; }

.hero__dress{
  margin:16px auto 0;
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  font-family:var(--font-type);
  font-size:clamp(.82rem,3.5vw,1.25rem);
  font-weight:700;
  line-height:1.3;
  letter-spacing:.08em; text-transform:uppercase;
  text-wrap:balance;
  max-width:min(100%,20ch);
  color:var(--silver);
  background:var(--silver-soft);
  border:1.5px dashed var(--silver-line);
  border-radius:var(--r-xl);
  padding:11px clamp(16px,4.5vw,26px);
  text-shadow:0 2px 10px rgba(0,0,0,.7);
  box-shadow:var(--sh-1), inset 0 0 24px rgba(214,232,252,.10);
  backdrop-filter:blur(6px);
}
.hero__dress i{ font-size:1.25em; flex:0 0 auto; }
@media (min-width:560px){
  .hero__dress{ max-width:none; border-radius:999px; white-space:nowrap; }
}

/* flecha del botón "Confirmar asistencia" (indica que despliega un menú) */
.btn__caret{
  font-size:.72em !important;
  opacity:.85;
  transition:transform .3s ease;
}
.btn[aria-expanded="true"] .btn__caret{ transform:rotate(180deg); }

.hero__cta{
  margin-top:22px;
  display:flex; flex-direction:column; gap:11px;
}

.scroll-cue{
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  margin-top:22px;
  font-family:var(--font-type); font-size:.66rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute);
}
.scroll-cue i{ font-size:1rem; color:var(--terra); animation:bob 1.9s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0);opacity:.6;} 50%{transform:translateY(6px);opacity:1;} }

/* =============================================================
   BOTONES
   ============================================================= */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px;
  padding:14px 22px;
  border:0; border-radius:999px;
  font-family:var(--font-body);
  font-weight:700; font-size:1rem; letter-spacing:.02em;
  cursor:pointer;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
  will-change:transform;
}
.btn i{ font-size:1.06em; }
.btn span{ display:inline-block; }

.btn::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.30) 48%,transparent 66%);
  transform:translateX(-120%);
  transition:transform .65s ease;
}
.btn:hover::after,.btn:focus-visible::after{ transform:translateX(120%); }
.btn:active{ transform:scale(.97); }

/* Primario — terracota */
.btn--primary{
  color:#fff;
  background:linear-gradient(140deg,var(--terra-2) 0%,var(--terra) 55%,var(--terra-deep) 100%);
  box-shadow:0 12px 28px -12px rgba(226,112,58,.75), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(226,112,58,.85); }

/* Suave — superficie con borde dorado */
.btn--soft{
  color:var(--gold);
  background:var(--surface-2);
  border:1.5px solid var(--line-strong);
  box-shadow:var(--sh-2);
}
.btn--soft:hover{ transform:translateY(-2px); border-color:var(--gold); color:var(--terra); }

/* Contorno */
.btn--outline{
  color:var(--ink-soft);
  background:transparent;
  border:1.5px solid var(--line-strong);
}
.btn--outline:hover{
  transform:translateY(-2px);
  background:var(--surface);
  border-color:var(--terra);
  color:var(--terra);
  box-shadow:var(--sh-2);
}

/* WhatsApp */
.btn--wa{
  color:#fff;
  background:linear-gradient(140deg,#34e07a,var(--wa) 55%,var(--wa-2));
  box-shadow:0 12px 28px -12px rgba(37,211,102,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--wa:hover{ transform:translateY(-2px); }

.btn--lg{ min-height:58px; font-size:1.05rem; padding:16px 26px; }
.btn--sm{ min-height:44px; font-size:.9rem; padding:10px 18px; margin-top:14px; }
.btn--block{ width:100%; }

.btn-row{ display:flex; flex-direction:column; gap:11px; margin-top:24px; }
.btn-row--tight{ margin-top:16px; }

/* =============================================================
   ESTRUCTURA DE SECCIONES
   ============================================================= */
.sheet{ position:relative; padding:64px 18px; }
.sheet--tint{ background:var(--tint); }
.sheet--paper{
  background:
    radial-gradient(120% 60% at 50% 0%,var(--surface-hi),transparent 70%),
    var(--paper-2);
}
.sheet--tint::before,.sheet--paper::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);
}

.wrap{ max-width:1080px; margin:0 auto; }
.narrow{ max-width:640px; margin:0 auto; }

.sec-head{ text-align:center; margin-bottom:34px; }
.sec-kicker{
  font-family:var(--font-type);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--terra);
  margin-bottom:8px;
}
.sec-title{
  font-family:var(--font-west); font-weight:400;
  font-size:clamp(1.75rem,7.4vw,2.9rem);
  line-height:1.12;
  color:var(--ink-title);
}
.sec-lead{
  margin:18px auto 0; max-width:56ch;
  font-size:1rem; color:var(--ink-soft);
}
.sec-lead b{ color:var(--gold); }
.divider{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:14px; color:var(--gold);
}
.divider i{ font-size:.8rem; }
.divider i:nth-child(2){ font-size:1.15rem; color:var(--terra); }
.divider::before,.divider::after{
  content:''; height:1px; width:min(22vw,110px);
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);
}

.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-in{ opacity:1; transform:none; }

/* =============================================================
   CARTEL "WANTED"
   ============================================================= */
.poster{
  position:relative;
  background:
    radial-gradient(120% 100% at 20% 0%,var(--surface-hi),transparent 60%),
    linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  padding:34px 22px 30px;
  text-align:center;
  box-shadow:var(--sh-3);
  font-family:var(--font-type);
  color:var(--ink-soft);
}
.poster::before{
  content:''; position:absolute; inset:9px; border:1px dashed var(--line-strong);
  border-radius:calc(var(--r-md) - 6px); pointer-events:none;
}
.poster__pin{
  position:absolute; width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#f6d68f,#a9791f);
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.poster__pin--tl{ top:12px; left:12px; }
.poster__pin--tr{ top:12px; right:12px; }
.poster__pin--bl{ bottom:12px; left:12px; }
.poster__pin--br{ bottom:12px; right:12px; }

.poster__top{
  font-size:.86rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--terra);
}
.poster__rule{
  border:0; height:2px; margin:14px auto; width:78%;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);
}
.poster__lead{ font-size:.9rem; }
.poster__lead b{ color:var(--gold); letter-spacing:.06em; }
.poster__names{
  font-family:var(--font-west);
  font-size:clamp(1.9rem,10vw,3.2rem);
  line-height:1.06;
  margin:12px 0 10px;
  color:var(--ink-title);
}
.poster__text{ font-size:.92rem; color:var(--ink-soft); }
.poster__badge{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px; padding:7px 15px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:var(--gold-soft);
  color:var(--gold);
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
}
.poster__foot{
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--ink-title);
}

/* =============================================================
   CUENTA REGRESIVA
   ============================================================= */
.countdown{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:8px; max-width:560px; margin:0 auto;
}
.cd-cell{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:14px 4px 11px;
  text-align:center;
  box-shadow:var(--sh-2);
  position:relative; overflow:hidden;
}
.cd-cell::before{
  content:''; position:absolute; top:0; left:14%; right:14%; height:3px; border-radius:0 0 6px 6px;
  background:linear-gradient(90deg,var(--gold),var(--terra));
}
.cd-cell b{
  display:block;
  font-family:var(--font-west); font-weight:400;
  font-size:clamp(1.55rem,7.4vw,2.9rem);
  line-height:1; color:var(--ink-title);
  font-variant-numeric:tabular-nums;
}
.cd-cell span{
  display:block; margin-top:6px;
  font-family:var(--font-type); font-size:.58rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute);
}
.cd-cell.is-tick b{ animation:tickPop .5s ease; }
@keyframes tickPop{ 0%{transform:scale(1);} 40%{transform:scale(1.09); color:var(--terra);} 100%{transform:scale(1);} }

.cd-note{
  text-align:center; margin-top:16px;
  font-family:var(--font-type); font-size:.8rem;
  letter-spacing:.08em; color:var(--ink-mute);
}

/* =============================================================
   TARJETAS DE DETALLES
   ============================================================= */
.cards{ display:grid; gap:16px; }
.card{
  position:relative;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px 20px 24px;
  text-align:center;
  box-shadow:var(--sh-2);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--sh-3); border-color:var(--line-strong); }
.card__icon{
  width:60px; height:60px; margin:0 auto 14px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--gold-soft);
  border:1px solid var(--line-strong);
  color:var(--gold); font-size:1.4rem;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.6);
}
.card h3{
  font-family:var(--font-type); font-weight:400;
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--terra); margin-bottom:8px;
}
.card__big{
  font-family:var(--font-west); font-weight:400;
  font-size:1.5rem; line-height:1.2; color:var(--ink-title);
}
.card__small{ margin-top:10px; font-size:.94rem; color:var(--ink-soft); }

.mini-facts{
  list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center; gap:9px;
  margin-top:26px;
}
.mini-facts li{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:9px 15px;
  font-size:.88rem; color:var(--ink-soft);
  box-shadow:var(--sh-1);
}
.mini-facts i{ color:var(--terra); }

/* =============================================================
   TIMELINE / PROGRAMA
   ============================================================= */
.timeline{ list-style:none; position:relative; padding-left:22px; }
.timeline::before{
  content:''; position:absolute; left:5px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent);
}
.tl-item{ position:relative; padding-bottom:22px; }
.tl-item::before{
  content:''; position:absolute; left:-22px; top:8px;
  width:12px; height:12px; border-radius:50%;
  background:linear-gradient(150deg,var(--gold),var(--terra));
  box-shadow:0 0 0 4px var(--paper), 0 0 14px rgba(240,185,74,.5);
}
.tl-time{
  display:inline-block;
  font-family:var(--font-type); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:999px; padding:4px 12px;
  margin-bottom:7px;
}
.tl-body h3{
  font-family:var(--font-west); font-weight:400;
  font-size:1.14rem; color:var(--ink-title); line-height:1.25;
}
.tl-body p{ font-size:.95rem; color:var(--ink-soft); margin-top:3px; }

/* =============================================================
   MAPA
   ============================================================= */
.map-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-3);
}
.map-card__frame{ position:relative; height:270px; background:var(--sand); }
.map-card__frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  filter:var(--map-filter);
}
.map-card__info{ padding:20px 18px 22px; }
.map-card__name{
  font-family:var(--font-west); font-weight:400;
  font-size:1.2rem; color:var(--ink-title);
  display:flex; align-items:center; gap:9px;
}
.map-card__name i{ color:var(--terra); font-size:1rem; }
.map-card__addr{ margin-top:6px; font-size:.95rem; color:var(--ink-soft); }

/* =============================================================
   VESTIMENTA VAQUERA
   ============================================================= */
.dress{ display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }
.dress-item{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:20px 12px 16px;
  text-align:center;
  box-shadow:var(--sh-1);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.dress-item:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-strong); }
.dress-item i{ font-size:1.7rem; color:var(--terra); }
.dress-item b{
  display:block; margin-top:10px;
  font-family:var(--font-west); font-weight:400; font-size:1.02rem; color:var(--ink-title);
}
.dress-item span{ display:block; font-size:.85rem; color:var(--ink-mute); margin-top:3px; }

.dress-note{
  margin:22px auto 0; max-width:52ch; text-align:center;
  font-size:.92rem; color:var(--ink-soft);
  background:var(--gold-soft);
  border:1px dashed var(--line-strong);
  border-radius:var(--r-md);
  padding:14px 18px;
}
.dress-note i{ color:var(--gold); margin-right:6px; }

/* =============================================================
   RSVP
   ============================================================= */
.rsvp{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px 18px 26px;
  box-shadow:var(--sh-3);
}
.field{ margin-bottom:18px; border:0; }
.field > label,.field legend{
  display:block; margin-bottom:8px;
  font-family:var(--font-type); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.field > label em{ font-style:normal; text-transform:none; letter-spacing:0; color:var(--ink-mute); }

.control{ position:relative; }
.control__icon{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:var(--gold); font-size:.95rem; pointer-events:none;
}
.control__caret{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:var(--ink-mute); font-size:.8rem; pointer-events:none;
}

input[type=text],select,textarea{
  width:100%;
  font-family:var(--font-body); font-size:16px;
  color:var(--ink);
  background:var(--paper-2);
  border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm);
  padding:15px 16px 15px 42px;
  min-height:54px;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  -webkit-appearance:none; appearance:none;
}
textarea{ padding-left:16px; resize:vertical; min-height:96px; line-height:1.55; }
select{ padding-right:42px; cursor:pointer; }
input::placeholder,textarea::placeholder{ color:var(--ink-mute); opacity:.75; }
input[type=text]:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--terra);
  background:var(--paper);
  box-shadow:0 0 0 4px var(--terra-soft);
}

.choice{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice input{ position:absolute; opacity:0; width:1px; height:1px; }
.choice label{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:12px 10px;
  border:1.5px solid var(--line-strong);
  border-radius:999px;
  background:var(--paper-2);
  font-weight:700; font-size:.95rem; color:var(--ink-soft);
  cursor:pointer;
  transition:all .22s ease;
  text-align:center;
}
.choice label i{ font-size:.9em; }
.choice input:checked + label{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(140deg,var(--terra-2),var(--terra));
  box-shadow:0 10px 24px -12px rgba(226,112,58,.8);
  transform:translateY(-1px);
}
.choice input:focus-visible + label{ outline:3px solid var(--gold); outline-offset:3px; }

.form-msg{
  margin-top:12px; text-align:center; font-size:.92rem; font-weight:600;
  min-height:1.2em; color:var(--sage);
}
.form-msg.err{ color:#ff8b73; }
.form-note{ margin-top:12px; text-align:center; font-size:.8rem; color:var(--ink-mute); }
.form-note i{ color:var(--gold); }

.is-hidden{ display:none; }

/* =============================================================
   FOOTER
   ============================================================= */
.footer{
  position:relative;
  text-align:center;
  padding:56px 20px 48px;
  background:linear-gradient(180deg,var(--paper-2),var(--paper));
  overflow:hidden;
  border-top:1px solid var(--line);
}
.footer__scape{ position:absolute; inset:0; color:rgba(147,176,106,.22); pointer-events:none; }
.footer__cactus{ position:absolute; bottom:-4px; height:88px; }
.footer__cactus--l{ left:6%; }
.footer__cactus--r{ right:7%; height:64px; transform:scaleX(-1); }
.footer h2{
  position:relative;
  font-family:var(--font-west); font-weight:400;
  font-size:clamp(1.5rem,7vw,2.3rem); color:var(--ink-title);
}
.footer__date{
  position:relative; margin-top:10px;
  font-family:var(--font-type); letter-spacing:.24em; font-size:.86rem; color:var(--terra);
}
.footer__mini{ position:relative; margin-top:8px; font-size:.82rem; color:var(--ink-mute); }

/* =============================================================
   DOCK FLOTANTE
   ============================================================= */
.dock{
  position:fixed; left:10px; right:10px; bottom:calc(10px + var(--safe-b));
  z-index:80;
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:8px;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:999px;
  box-shadow:var(--sh-3);
  backdrop-filter:blur(14px) saturate(1.1);
  transform:translateY(160%);
  opacity:0;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.dock.is-visible{ transform:none; opacity:1; }

.dock__btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; border-radius:999px;
  font-weight:700; font-size:.95rem;
  color:var(--gold);
  background:var(--surface-2);
  border:1.5px solid var(--line-strong);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.dock__btn--primary{
  color:#fff; border-color:transparent;
  background:linear-gradient(140deg,#34e07a,var(--wa) 60%,var(--wa-2));
  box-shadow:0 10px 22px -11px rgba(37,211,102,.85);
}
.dock__btn:active{ transform:scale(.96); }
.dock__caret{ font-size:.7rem; opacity:.7; transition:transform .3s ease; }
.dock__btn[aria-expanded="true"] .dock__caret{ transform:rotate(180deg); }

/* =============================================================
   PANELES DESPLEGABLES (bottom sheet)
   ============================================================= */
.panel{ position:fixed; inset:0; z-index:150; }
.panel[hidden]{ display:none; }

.panel__backdrop{
  position:absolute; inset:0;
  background:rgba(8,5,4,.66);
  backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity .3s ease;
}
.panel.is-open .panel__backdrop{ opacity:1; }

.panel__card{
  position:absolute; left:0; right:0; bottom:0;
  max-height:88svh; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 16px calc(22px + var(--safe-b));
  background:linear-gradient(180deg,var(--paper-3),var(--paper-2));
  border-top:1px solid var(--line-strong);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -20px 60px -24px rgba(0,0,0,.8);
  transform:translateY(100%);
  transition:transform .42s cubic-bezier(.2,.8,.2,1);
}
.panel.is-open .panel__card{ transform:none; }

.panel__grip{
  display:block; width:46px; height:5px; border-radius:99px;
  background:var(--line-strong); margin:0 auto 14px;
}

.panel__head{ position:relative; text-align:left; padding:0 46px 14px 4px; }
.panel__kicker{
  font-family:var(--font-type); font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--terra);
}
.panel__kicker i{ margin-right:6px; }
.panel__title{
  font-family:var(--font-west); font-weight:400;
  font-size:1.45rem; line-height:1.18; color:var(--ink-title);
  margin-top:4px;
}
.panel__addr{
  margin-top:6px; font-size:1rem; font-weight:600; color:var(--ink-soft);
}
.panel__close{
  position:absolute; top:-2px; right:0;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--line-strong);
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.panel__close:hover{ color:var(--terra); border-color:var(--terra); }
.panel__close:active{ transform:scale(.92); }

.panel__actions{
  display:grid; gap:9px;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.panel__item{
  display:flex; align-items:center; gap:13px;
  width:100%; text-align:left;
  min-height:62px; padding:12px 14px;
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink);
  cursor:pointer;
  box-shadow:var(--sh-1);
  transition:transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.panel__item:hover{ border-color:var(--line-strong); background:var(--surface-2); box-shadow:var(--sh-2); }
.panel__item:active{ transform:scale(.985); }

.panel__ico{
  flex:0 0 auto;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-size:1.1rem; color:var(--gold);
  background:var(--gold-soft);
  border:1px solid var(--line-strong);
}
.panel__txt{ flex:1 1 auto; min-width:0; display:block; }
.panel__txt b{
  display:block; font-size:1rem; font-weight:700; color:var(--ink);
  line-height:1.25;
}
.panel__txt small{
  display:block; font-size:.82rem; color:var(--ink-mute); line-height:1.35;
}
.panel__go{ flex:0 0 auto; font-size:.85rem; color:var(--ink-mute); }

.panel__item--maps .panel__ico{
  color:#fff; border-color:transparent;
  background:linear-gradient(140deg,var(--terra-2),var(--terra));
}
.panel__item--waze .panel__ico{
  color:#fff; border-color:transparent;
  background:linear-gradient(140deg,#42c8f5,#1b8ecf);
}
.panel__item--wa .panel__ico{
  color:#fff; border-color:transparent;
  background:linear-gradient(140deg,#34e07a,var(--wa) 60%,var(--wa-2));
}

.panel__foot{
  margin-top:16px; text-align:center;
  font-size:.9rem; font-weight:700; color:var(--ink-soft);
}
.panel__foot i{ color:var(--gold); margin-right:6px; }
.panel__legal{
  margin-top:5px; text-align:center;
  font-family:var(--font-type);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute);
}

/* =============================================================
   TOAST
   ============================================================= */
.toast{
  position:fixed; left:50%; bottom:calc(84px + var(--safe-b));
  transform:translate(-50%,20px);
  z-index:190;
  max-width:min(90vw,420px);
  background:var(--toast-bg); color:var(--toast-ink);
  border-radius:14px; padding:13px 20px;
  font-size:.92rem; font-weight:700; text-align:center;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.7);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.toast.is-visible{ opacity:1; transform:translate(-50%,0); }

/* =============================================================
   BREAKPOINTS
   ============================================================= */
@media (min-width:480px){
  .hero__cta{ flex-direction:row; justify-content:center; }
  .hero__cta .btn{ flex:1 1 0; min-width:0; }
  .countdown{ gap:12px; }
  .cd-cell{ padding:16px 8px 12px; }
  .cd-cell span{ font-size:.66rem; letter-spacing:.2em; }
  .btn-row{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .btn-row .btn{ flex:1 1 210px; }
}

@media (min-width:768px){
  body{ font-size:18px; padding-bottom:0; }
  .sheet{ padding:88px 28px; }
  .hero{ padding:34px 28px 46px; }
  .hero__img{ object-position:50% 26%; }
  .cards{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .dress{ grid-template-columns:repeat(4,1fr); }
  .poster{ padding:44px 40px 38px; }
  .rsvp{ padding:34px 32px 34px; }
  .map-card{ display:grid; grid-template-columns:1.15fr .85fr; }
  .map-card__frame{ height:100%; min-height:360px; }
  .map-card__info{ padding:30px 28px; display:flex; flex-direction:column; justify-content:center; }
  .timeline{ padding-left:28px; }
  .footer__cactus{ height:120px; }
  .footer__cactus--r{ height:88px; }

  .dock{
    left:auto; right:22px; bottom:22px;
    grid-template-columns:auto auto;
  }
  .dock__btn{ padding:0 20px; }
  .toast{ bottom:96px; }

  /* paneles centrados en escritorio */
  .panel__card{
    left:50%; right:auto; bottom:auto; top:50%;
    width:min(560px,92vw);
    transform:translate(-50%,-46%) scale(.96);
    opacity:0;
    border-radius:var(--r-xl);
    border:1px solid var(--line-strong);
    max-height:86svh;
    padding:20px 24px 24px;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
  }
  .panel.is-open .panel__card{ transform:translate(-50%,-50%); opacity:1; }
  .panel__grip{ display:none; }
}

@media (min-width:1024px){
  .hero__names{ font-size:clamp(4rem,7.4vw,7.2rem); flex-direction:row; align-items:center; gap:18px; }
  .hero__amp::before,.hero__amp::after{ width:56px; }
  .sheet{ padding:104px 32px; }
  .cards{ grid-template-columns:repeat(4,1fr); }
}

@media (hover:none){
  .card:hover,.dress-item:hover,.btn:hover{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .dock,.progress,.grain,#dust,.scroll-cue,.btn-row,.map-card__frame,.theme-toggle,.panel{ display:none !important; }
  body{ background:#fff; color:#000; padding:0; }
  .reveal{ opacity:1 !important; transform:none !important; }
}