/* ============================================================
   Invitación Expo CIHAC 2026 — Teckio ERP
   Depende de tokens.css. Sin imágenes de fondo: todo CSS.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }

/* Un solo contenedor para todas las secciones.
   · Secciones: 15 % del ancho a cada lado (≈ la referencia: 288 px en 1920,
     216 px en 1440), sin dejar que el contenido baje de 1000 px; cuando el
     margen llega a 40 px el contenido ya se encoge. Tablet/móvil: 24 / 20 px.
   · Hero (sección principal): conserva su escala original 180/96/56/40.
     Se aplica redefiniendo --lateral dentro de .hero, así sus reglas no cambian.
   · En pantallas de más de ~2560 px el contenido se detiene en 1560 px. */
:root {
  --lateral: max(40px, min(15vw, calc((100vw - 1000px) / 2)));
  --lateral-hero: 180px;
  --ancho-max: 1560px;
}
@media (max-width: 1599px) { :root { --lateral-hero: 96px; } }
@media (max-width: 1439px) { :root { --lateral-hero: 56px; } }
@media (max-width: 1279px) { :root { --lateral-hero: 40px; } }
@media (max-width: 980px)  { :root { --lateral: 24px; --lateral-hero: 24px; } }
@media (max-width: 720px)  { :root { --lateral: 20px; --lateral-hero: 20px; } }

.hero { --lateral: var(--lateral-hero); }

.wrap {
  width: min(100% - 2 * var(--lateral), var(--ancho-max));
  margin-inline: auto;
}


.centrado { text-align: center; }
.salto { display: block; }

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

.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--white); color: var(--navy); font-weight: 600;
  text-decoration: none; transition: top .2s var(--ease);
}
.saltar:focus { top: 16px; }

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

/* ---------- Tipografía de sección ---------- */
.titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 4.1vw, 54px);
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--navy);
  font-variation-settings: "opsz" 60, "WONK" 0, "SOFT" 0;
  text-wrap: balance;
}
.titulo em { font-style: normal; color: var(--orange); }
.titulo--md { font-size: clamp(34px, 3.6vw, 46px); }
.titulo--claro { color: var(--white); }

.eyebrow {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 30px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
/* Fondo --orange-deep: blanco encima da 5.02:1 (AA). Con --orange daba 3.19:1.
   El hover oscurece (7.09:1) en vez de aclarar: aclarar bajaba a 2.15:1. */
.btn--primario {
  background: var(--orange-deep);
  color: var(--white);
  box-shadow: 0 8px 20px -10px rgba(180, 83, 9, .75);
}
.btn--primario:hover {
  background: var(--orange-deeper);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(180, 83, 9, .8);
}
.btn--primario:active { transform: translateY(0); }
.btn[disabled], .btn[aria-busy="true"] { cursor: progress; opacity: .8; transform: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow-x: clip; /* el stand sale por abajo, nunca por los lados */
  color: var(--white);
}

.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(38% 30% at 62% 66%, var(--orange-glow), transparent 70%),
    radial-gradient(75% 50% at 50% 66%, var(--blue-glow), transparent 72%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 46%, var(--navy-soft) 64%, var(--navy-deep) 100%);
}
/* viñeta: oscurece arriba y abajo para dar profundidad */
.hero__fondo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 28, 48, .55) 0%, transparent 40%, transparent 70%, rgba(13, 28, 48, .5) 100%);
}

/* Retícula de plano, versión navy */
.hero__reticula {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px),
    linear-gradient(var(--grid-dark-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dark-fine) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  -webkit-mask-image: radial-gradient(70% 80% at 30% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(70% 80% at 30% 30%, #000 0%, transparent 75%);
}

/* Agua: líneas horizontales finas bajo el horizonte */
.hero__agua {
  position: absolute;
  left: 0; right: 0; top: 66%; bottom: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 6px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
}
.hero__horizonte {
  position: absolute;
  left: 0; right: 0; top: 66%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .28) 25%, var(--orange-bright) 58%, rgba(255, 255, 255, .25) 80%, transparent 100%);
  box-shadow: 0 0 22px 3px var(--blue-glow);
  opacity: .8;
}

/* Arcos de luz: solo el borde superior de un círculo gigante.
   Los extremos se afilan solos en la unión con los bordes transparentes. */
.hero__arco {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--orange-bright);
  filter: drop-shadow(0 0 3px var(--orange-glow)) drop-shadow(0 0 14px var(--orange-glow));
}
.hero__arco--a {
  width: 150vw; aspect-ratio: 1;
  left: -86vw; top: -12vw;
  transform: rotate(52deg);
  opacity: .95;
}
.hero__arco--b {
  width: 70vw; aspect-ratio: 1;
  right: -44vw; top: 1.5vw;
  transform: rotate(-40deg);
  opacity: .9;
}
.hero__arco--c {
  width: 150vw; aspect-ratio: 1;
  left: -84vw; top: -9vw;
  transform: rotate(56deg);
  border-width: 1px;
  opacity: .35;
}

/* Layout */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  grid-template-areas:
    "marcas marcas"
    "copy   stand";
  align-items: center;
  column-gap: clamp(16px, 3vw, 40px);
  padding-top: clamp(20px, 2.6vw, 34px);
  min-height: clamp(460px, 38vw, 580px);
}

.hero__marcas {
  grid-area: marcas;
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Igual que .nav-brand del sitio: isotipo (versión para fondo oscuro) + texto */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  color: var(--paper);
  text-decoration: none;
}
.marca img { height: 30px; width: auto; }
.marca__texto {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  font-variation-settings: "opsz" 48, "WONK" 0, "SOFT" 0;
}
.hero__separador { width: 1px; height: 22px; background: rgba(255, 255, 255, .3); }
.expo-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
}
.expo-tag__anillo {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  box-shadow: inset 0 0 0 2px var(--navy-deep), inset 0 0 0 3.5px currentColor;
}

.hero__copy {
  grid-area: copy;
  padding-block: clamp(24px, 4vw, 48px) clamp(56px, 7vw, 96px);
}
.hero__kicker {
  margin: 0 0 12px;
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 500;
  color: var(--orange-bright);
}
.hero__titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(60px, 7vw, 104px);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-variation-settings: "opsz" 72, "WONK" 0, "SOFT" 0;
}
.hero__titulo span { display: block; }
.hero__espera {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  font-size: clamp(18px, 1.45vw, 21px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--orange-bright);
}
.hero__espera::after {
  content: "";
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--orange);
  box-shadow: 0 0 12px var(--orange-glow);
}

.hero__stand {
  grid-area: stand;
  align-self: end;
  margin-right: calc(-1 * min(var(--lateral), 64px)); /* sale un poco del contenedor, nunca de la pantalla */
  margin-bottom: calc(-1 * clamp(32px, 4.5vw, 72px));
}
.hero__stand img {
  width: 100%;
  filter: drop-shadow(0 28px 36px var(--shade));
  animation: entrar-stand 1s var(--ease) both .1s;
}

@keyframes entrar-stand {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   FONDO CLARO (main)
   ============================================================ */
.fondo-claro {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(38% 26% at 92% 8%, rgba(0, 64, 172, .05), transparent 70%),
    radial-gradient(30% 18% at 2% 46%, rgba(217, 119, 6, .07), transparent 70%),
    radial-gradient(40% 26% at 96% 84%, rgba(0, 64, 172, .04), transparent 70%),
    var(--paper);
}
.fondo-claro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-light) 1px, transparent 1px),
    linear-gradient(var(--grid-light-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-light-fine) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 8%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.55) 92%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 8%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.55) 92%, transparent 100%);
}
.fondo-claro > * { position: relative; }

.seccion { padding-block: clamp(64px, 8vw, 112px); }

/* ============================================================
   ESTAREMOS PRESENTANDO
   ============================================================ */
.presenta { padding-top: clamp(88px, 10vw, 140px); }

.presenta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  margin-top: clamp(40px, 5vw, 64px);
}

/* Escena de la laptop: tarjeta durazno detrás */
.laptop-escena {
  position: relative;
  padding-block: 8% 9%;
}
.laptop-escena__fondo {
  position: absolute;
  left: 17%; right: 16%; top: 0; bottom: 0;
  border-radius: 32px;
  background:
    linear-gradient(180deg, transparent 0%, var(--orange-tint) 100%),
    var(--bone);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 20px 40px -30px var(--shade);
}

/* ---------- Laptop 100 % CSS ---------- */
.laptop {
  position: relative;
  width: 100%;
}
.laptop__tapa {
  position: relative;
  width: 84%;
  margin-inline: auto;
  padding: 1.7% 1.7% 2.6%;
  border-radius: 18px 18px 5px 5px;
  background: var(--device-bezel);
  box-shadow:
    0 0 0 1.5px var(--device-edge),
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 30px 50px -28px var(--shade);
}
.laptop__pantalla {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  background: var(--white);
}
.laptop__pantalla img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.laptop__notch {
  position: absolute;
  top: 0; left: 50%;
  width: 9%;
  height: 3.6%;
  transform: translateX(-50%);
  border-radius: 0 0 7px 7px;
  background: var(--device-bezel);
}
.laptop__notch::after {
  content: "";
  position: absolute;
  top: 28%; left: 50%;
  width: 5px; height: 5px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--device-body);
}
.laptop__reflejo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 32%);
}
.laptop__base {
  position: relative;
  width: 100%;
  height: clamp(10px, 1.5vw, 18px);
  margin-top: -1px;
  border-radius: 2px 2px 50% 50% / 2px 2px 100% 100%;
  background: linear-gradient(180deg, var(--device-edge) 0%, var(--device-body) 30%, var(--device-body-dark) 100%);
  box-shadow: 0 18px 28px -14px var(--shade);
}
.laptop__muesca {
  position: absolute;
  top: 0; left: 50%;
  width: 15%;
  height: 42%;
  transform: translateX(-50%);
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, var(--device-body-dark), var(--device-body));
}
.laptop::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  bottom: -20px;
  height: 22px;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, var(--shade), transparent 72%);
}

/* ---------- Copy ---------- */
.producto {
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 1.3;
  color: var(--orange);
}
.producto strong {
  display: block;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.producto span { display: block; font-weight: 400; }

.presenta__lead {
  margin: 0 0 30px;
  max-width: 30ch;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--navy);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chips li {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--orange);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  box-shadow: 0 6px 14px -9px rgba(217, 119, 6, .9);
}

/* ============================================================
   BANDA
   ============================================================ */
.banda__card,
.registro__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-band);
  background: linear-gradient(160deg, var(--azul-teckio) 0%, var(--navy-soft) 100%);
  color: var(--white);
  box-shadow: 0 30px 60px -34px rgba(0, 64, 172, .55);
}
.banda__card::before,
.registro__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px),
    linear-gradient(var(--grid-dark-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dark-fine) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  -webkit-mask-image: radial-gradient(80% 90% at 85% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(80% 90% at 85% 0%, #000 0%, transparent 70%);
}

.banda__card {
  padding: clamp(40px, 5.5vw, 68px) clamp(24px, 6vw, 88px);
  text-align: center;
}
.banda__texto {
  max-width: 34ch;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: clamp(22px, 2.3vw, 29px);
  font-weight: 600;
  line-height: 1.38;
  font-variation-settings: "opsz" 48, "WONK" 0, "SOFT" 0;
  text-wrap: balance;
}

/* ============================================================
   INFORMACIÓN DEL EVENTO
   ============================================================ */
.evento__grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: stretch;
  gap: clamp(32px, 5vw, 64px);
}
/* Las dos columnas miden lo mismo: el título queda a ras del borde superior
   de la foto y la última tarjeta a ras del inferior. */
.evento__datos {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 3vw, 40px);
}

.datos {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dato {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--bone-dark);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--navy);
}
.dato--accion { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.dato--accion:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--line-strong);
}
.dato__icono {
  flex: none;
  width: 34px; height: 34px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dato__icono circle[r="1.1"] { fill: var(--orange); stroke: none; }
.dato__texto { display: grid; gap: 4px; }
.dato__texto strong {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  font-variation-settings: "opsz" 24, "WONK" 0;
}
.dato__pista {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
}
.dato__pista::after { content: " →"; transition: margin .2s var(--ease); }
.dato--accion:hover .dato__pista { color: var(--orange); }

.evento__stand {
  position: relative;
  isolation: isolate;
  min-height: clamp(340px, 32vw, 520px);
  overflow: hidden;
  border-radius: 24px;
  box-shadow: var(--shadow-card-hover);
}
/* Glass: misma receta que el .hero__cta de teckio.mx. El velo navy de abajo
   asegura que el texto blanco se lea aunque detrás haya luces del techo. */
.stand-pill {
  position: absolute;
  z-index: 1;
  top: clamp(14px, 1.6vw, 22px);
  left: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 8px 26px;
  border: 1px solid rgba(250, 248, 243, .30);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(rgba(250, 248, 243, .14), rgba(250, 248, 243, .14)),
    rgba(13, 28, 48, .38);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 28px); /* ≥24 px: cuenta como texto grande (3:1) */
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(13, 28, 48, .35);
  box-shadow:
    0 8px 24px rgba(20, 42, 71, .18),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}
/* La foto llena la columna: su alto lo marca la columna de datos
   (o el min-height), así que el recorte se ajusta solo. */
.evento__stand img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 55%;
}

/* ============================================================
   REGISTRO
   ============================================================ */
.registro { padding-block: clamp(8px, 2vw, 24px) 0; }

.registro__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 64px);
}
.registro__copy .titulo { font-weight: 700; font-size: clamp(34px, 3.4vw, 52px); }
.registro__copy p {
  max-width: 30ch;
  margin: 16px 0 0;
  font-size: 18px;
  color: rgba(255, 255, 255, .88);
}

/* Opción B: sin tarjeta blanca. Campos claros sólidos directo sobre el azul
   (8.5:1 contra el fondo), etiquetas claras y estados pensados para fondo
   oscuro: error con --danger-soft/--danger-tint y foco en --orange-bright. */
.form { position: relative; color: var(--paper); }
.campo + .campo { margin-top: 6px; }
.campo label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--paper);
  font-variation-settings: "opsz" 24, "WONK" 0;
}
.req { color: var(--orange-bright); margin-left: 1px; }
.campo input {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 16px; /* 16 px mínimo: iOS no hace zoom */
  line-height: 1.3;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.campo input:hover { border-color: rgba(250, 248, 243, .55); }
.campo input:focus { outline: none; border-color: var(--orange-bright); box-shadow: 0 0 0 3px rgba(240, 162, 58, .45); }
.campo input[aria-invalid="true"] { border-color: var(--danger-soft); }
.campo input[aria-invalid="true"]:focus { border-color: var(--orange-bright); }
/* El espacio del mensaje está reservado siempre: si aparece al salir del
   campo, el botón no se mueve y el clic no se pierde. */
.campo__error {
  min-height: 20px;
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--danger-tint);
}

.trampa {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Botón del formulario con el naranja original (#D97706). A 19 px en negrita
   cuenta como texto grande: 3.19:1 cumple AA (mínimo 3:1). El hover oscurece. */
.form .btn {
  display: flex;
  margin: 14px 0 0;
  font-size: 19px;
  background: var(--orange);
  box-shadow: 0 10px 24px -12px rgba(13, 28, 48, .7);
}
.form .btn:hover { background: var(--orange-deep); }
.registro__card :focus-visible { outline-color: var(--paper); }
.form__estado {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--paper);
}
.form__estado:empty { display: none; }
.form__estado.es-error { color: var(--danger-tint); }
.form__nota {
  margin: 14px 0 0;
  font-size: 13px;
  color: rgba(250, 248, 243, .85);
}
.form__nota a { color: var(--paper); font-weight: 700; }

/* ============================================================
   CIERRE
   ============================================================ */
.cierre { padding-top: clamp(80px, 9vw, 128px); }

/* Escritorio: imagen a la izquierda; título, texto y botón a la derecha,
   centrados en vertical (las filas 1fr de arriba y abajo reparten el aire).
   Móvil: título arriba, luego imagen y texto (ver responsive). */
.cierre__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas:
    "imagen ."
    "imagen titulo"
    "imagen copy"
    "imagen .";
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 24px;
  align-items: center;
}
.cierre__titulo {
  grid-area: titulo;
  font-size: clamp(34px, 3.3vw, 48px);
  text-align: left;
}
.cierre__grid .movil-escena { grid-area: imagen; }
.cierre__grid .cierre__copy { grid-area: copy; }

/* La imagen ya trae su tarjeta durazno, el celular asomando por arriba y la
   muñeca cortada abajo: va suelta, sin tarjeta CSS ni recorte. */
.movil-escena {
  width: min(100%, 383px); /* ancho real de la imagen: no se agranda */
  justify-self: center;
}
.movil-escena__img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 30px rgba(13, 28, 48, .12));
}

.cierre__copy {
  display: grid;
  justify-items: start;
  gap: 16px;
}
.cierre__copy p {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  color: var(--navy);
}

/* ============================================================
   PIE
   ============================================================ */
.pie {
  padding: 28px 0 36px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  text-align: center;
  font-size: 14px;
  color: var(--text-soft);
}
.pie p { margin: 0; }
.pie a { color: var(--navy); font-weight: 600; text-decoration: none; }
.pie a:hover { text-decoration: underline; }

/* ============================================================
   MODAL
   ============================================================ */
.modal {
  width: min(440px, calc(100% - 32px));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}
.modal::backdrop {
  background: rgba(13, 28, 48, .62);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.modal[open] { animation: entrar-modal .3s var(--ease); }
@keyframes entrar-modal {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.modal__card {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 36px 32px 32px;
  border-radius: 24px;
  background: var(--white);
  text-align: center;
  box-shadow: 0 40px 80px -30px rgba(13, 28, 48, .6);
}
.modal__icono {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--orange-tint);
}
.modal__icono svg {
  width: 34px; height: 34px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.modal__titulo {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy);
}
.modal__texto { margin: 0 0 8px; color: var(--text-soft); }

/* ============================================================
   APARICIÓN AL HACER SCROLL (solo con JS)
   ============================================================ */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero__stand img, .modal[open] { animation: none; }
  .btn, .dato--accion { transition: none; }
}

/* ============================================================
   RESPONSIVE — un corte por componente
   ============================================================ */
@media (max-width: 720px) {
  body { font-size: 17px; }

  /* Hero */
  .hero__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "marcas" "copy" "stand";
    min-height: 0;
  }
  .hero__copy { padding-block: 40px 8px; }
  .hero__titulo { font-size: clamp(56px, 17vw, 84px); }
  .hero__stand { margin-right: calc(-1 * var(--lateral)); margin-left: -2%; margin-bottom: -40px; }
  .hero__arco--a { width: 260vw; left: -170vw; top: -40vw; }
  .hero__arco--c { width: 260vw; left: -166vw; top: -34vw; }
  .hero__arco--b { width: 120vw; right: -80vw; top: 10vw; }
  .hero__agua, .hero__horizonte { top: 58%; }

  /* Presentando */
  .presenta__grid { grid-template-columns: 1fr; }
  .laptop-escena__fondo { left: 12%; right: 12%; }

  /* Evento */
  .evento__grid { grid-template-columns: 1fr; }
  .evento__stand { min-height: 0; aspect-ratio: 4 / 3; }

  /* Registro */
  .registro__card { grid-template-columns: 1fr; text-align: left; }

  /* Cierre: título arriba, centrado */
  .cierre__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "titulo" "imagen" "copy";
    row-gap: 32px;
  }
  .cierre__titulo { text-align: center; }
  .movil-escena { width: min(100%, 340px); }
}

@media (max-width: 480px) {
  .chips li { font-size: 14px; padding: 8px 14px; }
  .dato { padding: 14px 16px; gap: 14px; }
  .dato__texto strong { font-size: 17px; }
}