/* La persona que falta · ISMMA by DANIA
   Branding de ismma.com: tierra casi negra, verde ISMMA, Space Grotesk + Inter. Móvil primero. */

:root {
  --tierra: #05070a;
  --tierra-2: #0a0e12;
  --tierra-3: #0f1519;
  --verde: #10e098;
  --verde-hondo: #06b67c;
  --menta: #34f5b0;
  --tinta: #04231a;
  --texto: #eef4f1;
  --suave: #b8c6c0;
  --tenue: #7f918a;
  --linea: rgba(16, 224, 152, .11);
  --linea-media: rgba(16, 224, 152, .24);
  --linea-viva: rgba(16, 224, 152, .55);
  --rojo: #ff6b5e;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --margen: clamp(1.1rem, 5vw, 2.5rem);
  --ancho: 1180px;
  --r: 18px;
  --sal: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--tierra);
  color: var(--texto);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--menta); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

/* ── Barra ───────────────────────────────────────── */
.barra {
  position: absolute; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--margen);
}
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.marca b { font: 700 1.15rem/1 var(--display); letter-spacing: .02em; }
.marca span {
  font: 500 .66rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tenue);
  padding-left: .6rem; border-left: 1px solid var(--linea-media);
}
.barra-vivo {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 600 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--menta);
}
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 rgba(16,224,152,.6); animation: latido 2s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 9px rgba(16,224,152,0); } 100% { box-shadow: 0 0 0 0 rgba(16,224,152,0); } }

/* ── Portada con el vórtice ─────────────────────── */
.portada {
  position: relative;
  min-height: 100svh;
  padding: 4.1rem var(--margen) 2rem;
  display: grid; align-content: start;
  overflow: hidden;
}
#vortice {
  position: absolute; z-index: -1;
  width: 170vw; height: 170vw; max-width: 1100px; max-height: 1100px;
  right: -78vw; top: 22svh;
  opacity: 1;
  pointer-events: none;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%); mask: radial-gradient(closest-side, #000 55%, transparent 100%);
}
.portada::after { /* velo para que el texto respire sobre el remolino */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 70% at 0% 40%, var(--tierra) 35%, transparent 75%),
    linear-gradient(to top, var(--tierra) 0%, transparent 30%);
}
.invitacion {
  display: inline-flex; align-items: center; gap: .55rem; width: fit-content;
  padding: .38rem .75rem .38rem .45rem; margin-bottom: .75rem;
  border: 1px solid var(--linea-media); border-radius: 99px;
  background: rgba(16, 224, 152, .06);
  font: 600 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--menta);
}
.invitacion i {
  font-style: normal; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--verde); color: var(--tinta); font-size: .7rem;
}
.portada h1 {
  margin: 0;
  font: 700 clamp(2rem, 9.1vw, 5.2rem)/1 var(--display);
  letter-spacing: -.035em; white-space: nowrap;
}
.portada h1 em { font-style: normal; color: var(--verde); }
.lema {
  margin: .45rem 0 0; max-width: 30ch; text-wrap: balance;
  font: 600 clamp(1.35rem, 6vw, 2.1rem)/1.15 var(--display); letter-spacing: -.02em; color: var(--texto);
}
.lema em { font-style: normal; color: var(--verde); }
.lema mark { /* el mismo marcador verde de los anuncios; «no reemplaza.» nunca se parte */
  white-space: nowrap; color: var(--tinta); padding: 0 .14em; margin-left: .04em; border-radius: .14em;
  background: linear-gradient(transparent 10%, var(--verde) 10%, var(--verde) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  box-shadow: 0 0 28px -6px rgba(16,224,152,.55);
}
.video-portada { margin-top: .95rem; box-shadow: 0 30px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(16,224,152,.06); }
.video-portada::before { /* aro que respira alrededor del vídeo */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--linea-viva); opacity: .6;
}
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video.reproduciendo { cursor: default; }

.video.reproduciendo > button, .video.reproduciendo figcaption { display: none; }
.entrada {
  margin: 1.3rem 0 0; max-width: 40ch;
  font-size: clamp(1.02rem, 3.9vw, 1.2rem); line-height: 1.5; color: var(--suave);
}
.entrada strong { color: var(--texto); font-weight: 600; }

.fechas {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.15rem 0 0; padding: 0; list-style: none;
}
.fechas li {
  font: 600 .74rem/1 var(--mono); letter-spacing: .04em; color: var(--texto);
  padding: .5rem .65rem; border-radius: 9px; background: var(--tierra-3); border: 1px solid var(--linea);
}
.fechas li span { color: var(--verde); }
.hora-local { margin: .55rem 0 0; font-size: .82rem; color: var(--tenue); }
.hora-local b { color: var(--suave); font-weight: 600; }

/* Botón principal */
.boton {
  --sombra: 0 10px 30px -8px rgba(16, 224, 152, .55);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; min-height: 3.6rem; padding: 1rem 1.4rem;
  border: 0; border-radius: 14px; cursor: pointer; text-decoration: none;
  background: linear-gradient(135deg, var(--menta), var(--verde) 45%, var(--verde-hondo));
  color: var(--tinta); font: 700 1.04rem/1.1 var(--display); letter-spacing: -.005em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), var(--sombra);
  transition: transform .4s var(--sal), box-shadow .4s var(--sal);
}
.boton::after { /* brillo que cruza */
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  animation: brillo 4.5s 1.2s infinite;
}
@keyframes brillo { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.boton:hover { transform: translateY(-2px); --sombra: 0 16px 40px -8px rgba(16, 224, 152, .7); }
.boton:active { transform: translateY(0) scale(.99); }
.boton svg { width: 1.15em; height: 1.15em; flex: none; }
.cta-portada { margin-top: .95rem; max-width: 26rem; }
.fechas li .punto { display: inline-block; vertical-align: middle; margin-right: .25rem; width: 6px; height: 6px; }
.bajo-boton { margin: .65rem 0 0; font-size: .8rem; color: var(--tenue); display: flex; gap: .45rem; align-items: center; }
.bajo-boton svg { width: 14px; height: 14px; color: var(--verde); flex: none; }

/* Panel del formulario: hoja inferior en móvil, centro del vórtice en escritorio */
.panel {
  position: fixed; z-index: 60; inset: auto 0 0 0;
  max-height: 92svh; overflow: auto;
  padding: 1.4rem var(--margen) calc(1.2rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #0c1215, #070a0c);
  border-top: 1px solid var(--linea-media); border-radius: 22px 22px 0 0;
  box-shadow: 0 -30px 80px rgba(0,0,0,.6);
  transform: translateY(105%); visibility: hidden;
  transition: transform .55s var(--sal), visibility 0s .55s;
}
.panel.abierto { transform: none; visibility: visible; transition: transform .55s var(--sal); }
.velo {
  position: fixed; inset: 0; z-index: 55; background: rgba(2, 4, 5, .7);
  backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .4s;
}
.velo.abierto { opacity: 1; pointer-events: auto; }
.panel-asa { width: 44px; height: 4px; border-radius: 4px; background: var(--linea-media); margin: -.4rem auto 1rem; }
.panel-cerrar {
  position: absolute; top: .8rem; right: .8rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--linea); background: transparent; cursor: pointer; color: var(--suave);
}
.panel h2 { margin: 0; font: 700 1.45rem/1.15 var(--display); letter-spacing: -.02em; }
.panel h2 + p { margin: .4rem 0 1.1rem; color: var(--suave); font-size: .93rem; }

.campo { display: grid; gap: .35rem; margin-bottom: .75rem; }
.campo label { font: 600 .74rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.campo input, .campo select {
  width: 100%; height: 3.25rem; padding: 0 1rem;
  border-radius: 12px; border: 1px solid var(--linea-media); background: rgba(5, 9, 11, .8);
  color: var(--texto); font: 500 1rem var(--sans);
  transition: border-color .25s, box-shadow .25s;
}
.campo input::placeholder { color: #55665f; }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 4px rgba(16,224,152,.13); }
.campo.mal input { border-color: var(--rojo); }
.campo .nota-tel { display: block; margin-top: .35rem; font-size: .76rem; line-height: 1.4; color: var(--tenue); }
.campo .error { display: none; font-size: .8rem; color: var(--rojo); }
.campo.mal .error { display: block; }
.telefono { display: grid; grid-template-columns: 8.9rem 1fr; gap: .5rem; }
/* Campo trampa del antispam (#4300): fuera de la vista y del lector de pantalla. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.telefono select { padding: 0 1.6rem 0 .6rem; text-overflow: ellipsis; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tenue) 50%), linear-gradient(135deg, var(--tenue) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.legal { margin: .8rem 0 0; font-size: .74rem; line-height: 1.5; color: var(--tenue); }
.legal a { color: var(--suave); }
.panel .boton { margin-top: .4rem; }
.boton[disabled] { opacity: .7; cursor: progress; }

/* ── Secciones ───────────────────────────────────── */
section { position: relative; padding: clamp(3.6rem, 10vw, 7rem) 0; }
.etiqueta {
  display: inline-block; margin-bottom: .9rem;
  font: 600 .7rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--verde);
}
.titulo {
  margin: 0; max-width: 20ch; text-wrap: balance;
  font: 700 clamp(1.85rem, 7.4vw, 3.5rem)/1.02 var(--display); letter-spacing: -.03em;
}
.titulo em { font-style: normal; color: var(--verde); }
.parrafo { max-width: 52ch; color: var(--suave); font-size: clamp(1rem, 3.6vw, 1.13rem); }

/* Vídeo de Daniel (VSL pendiente) */
.video {
  position: relative; margin-top: 1.6rem; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden;
  background:
    linear-gradient(180deg, rgba(5,7,10,0) 45%, rgba(5,7,10,.88)),
    url("img/vsl-portada.webp") center 30% / cover no-repeat,
    var(--tierra-3);
  border: 1px solid var(--linea-media);
  display: grid; place-items: center; cursor: pointer;
}
.video button {
  width: 4.6rem; height: 4.6rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--verde); color: var(--tinta); display: grid; place-items: center;
  box-shadow: 0 0 0 10px rgba(16,224,152,.18), 0 0 0 22px rgba(16,224,152,.07);
  transition: transform .4s var(--sal);
}
.video:hover button { transform: scale(1.07); }
.video button svg { width: 1.6rem; height: 1.6rem; margin-left: 4px; }
.video figcaption {
  position: absolute; left: 1rem; right: 1rem; bottom: .9rem;
  display: flex; justify-content: space-between; gap: 1rem; align-items: end;
  font-size: .82rem; color: var(--suave);
}
.video figcaption b { display: block; font: 600 1rem/1.2 var(--display); color: var(--texto); }
.video .duracion { font: 600 .7rem/1 var(--mono); padding: .35rem .5rem; border-radius: 6px; background: rgba(0,0,0,.55); white-space: nowrap; }
.video-aviso { margin: .6rem 0 0; font-size: .8rem; color: var(--tenue); }

/* Lo que no vas a escuchar */
.tachados { margin: 1.6rem 0 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.tachados li {
  position: relative; padding: .9rem 0 .9rem 0;
  border-bottom: 1px solid var(--linea);
  font: 600 clamp(1.15rem, 5vw, 1.7rem)/1.2 var(--display); letter-spacing: -.02em; color: var(--tenue);
}
.tachados li s { text-decoration: none; background: linear-gradient(var(--rojo), var(--rojo)) 0 55% / 0 2px no-repeat; transition: background-size .9s var(--sal); }
.tachados li.visto s { background-size: 100% 2px; }
.tachados li small { display: block; margin-top: .3rem; font: 400 .95rem/1.5 var(--sans); color: var(--suave); letter-spacing: 0; }
.giro {
  margin-top: 2rem; padding: 1.4rem 1.3rem; border-radius: var(--r);
  background: linear-gradient(135deg, rgba(16,224,152,.13), rgba(16,224,152,.02));
  border: 1px solid var(--linea-media);
  font: 600 clamp(1.15rem, 4.6vw, 1.5rem)/1.3 var(--display); letter-spacing: -.015em;
}
.giro span { color: var(--verde); }

/* El reparto: quién hace qué */
.reparto { margin-top: 2rem; }
.pestanas { display: flex; gap: .4rem; padding: .3rem; border-radius: 14px; background: var(--tierra-3); border: 1px solid var(--linea); width: fit-content; max-width: 100%; overflow-x: auto; }
.pestanas button {
  border: 0; background: transparent; cursor: pointer; padding: .7rem clamp(.6rem, 2.6vw, 1rem); border-radius: 10px;
  font: 600 clamp(.8rem, 3.4vw, .88rem)/1 var(--display); color: var(--suave); white-space: nowrap;
  transition: background .3s, color .3s;
}
.pestanas button[aria-selected="true"] { background: var(--verde); color: var(--tinta); }
.lamina { margin-top: 1.1rem; display: grid; gap: 1.2rem; }
.lamina[hidden] { display: none; }
.lamina h3 { margin: 0; font: 700 clamp(1.4rem, 6vw, 2.1rem)/1.1 var(--display); letter-spacing: -.02em; }
.lamina ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.lamina li { display: flex; gap: .7rem; align-items: start; color: var(--suave); }
.lamina li::before { content: ""; flex: none; width: .55rem; height: .55rem; margin-top: .55rem; border-radius: 2px; background: var(--verde); transform: rotate(45deg); }
.lamina.entra > * { animation: entra .6s var(--sal) both; }
.lamina.entra > *:nth-child(2) { animation-delay: .08s; }
@keyframes entra { from { opacity: 0; transform: translateY(12px); } }
.nota-reparto { margin: 0; padding-top: 1rem; border-top: 1px dashed var(--linea-media); font-size: .9rem; color: var(--tenue); }

/* Las tres clases */
.clases { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; counter-reset: clase; }
.clase {
  position: relative; padding: 1.4rem 1.3rem 1.3rem 4.4rem; border-radius: var(--r);
  background: var(--tierra-2); border: 1px solid var(--linea);
  transition: border-color .3s, transform .5s var(--sal);
}
.clase:hover { border-color: var(--linea-media); }
.clase .num {
  position: absolute; left: 1.2rem; top: 1.25rem;
  font: 700 2.2rem/1 var(--display); color: transparent; -webkit-text-stroke: 1px var(--verde);
}
.clase .cuando { font: 600 .72rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--verde); }
.clase h3 { margin: .3rem 0 .45rem; font: 700 1.35rem/1.15 var(--display); letter-spacing: -.015em; }
.clase p { margin: 0; color: var(--suave); font-size: .97rem; }
.clase .local { display: block; margin-top: .7rem; font-size: .82rem; color: var(--tenue); }
.clase.condiciones { background: linear-gradient(135deg, rgba(16,224,152,.1), var(--tierra-2) 60%); border-color: var(--linea-media); }
.sello {
  display: inline-block; margin-top: .75rem; padding: .3rem .55rem; border-radius: 6px;
  font: 600 .66rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta); background: var(--menta);
}

/* Para quién */
.filtro { margin-top: 2rem; display: grid; gap: 1rem; }
.filtro > div { padding: 1.3rem; border-radius: var(--r); border: 1px solid var(--linea); background: var(--tierra-2); }
.filtro h3 { margin: 0 0 .8rem; font: 700 1.1rem/1.2 var(--display); }
.filtro ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.filtro li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .55rem; color: var(--suave); font-size: .97rem; }
.filtro li b { font-family: var(--display); }
.si li b { color: var(--verde); }
.no { opacity: .92; }
.no li b { color: var(--rojo); }

/* Daniel */
.ponente { display: grid; gap: 1.6rem; align-items: center; }
.retrato { position: relative; width: min(82%, 22rem); }
@media (min-width: 760px) { .retrato { width: min(100%, 22rem); } }
.retrato img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: var(--r); }
.retrato::before { content: ""; position: absolute; inset: -10px -10px 10px 10px; border-radius: var(--r); border: 1px solid var(--linea-media); z-index: -1; }
.retrato figcaption { margin-top: .7rem; font: 600 .72rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.cita { margin: 1.4rem 0 0; padding: 0; }
.cita p { margin: 0; font: 600 clamp(1.25rem, 5vw, 1.75rem)/1.3 var(--display); letter-spacing: -.015em; }
.cita p::before { content: "«"; color: var(--verde); }
.cita p::after { content: "»"; color: var(--verde); }
.cita footer { margin-top: .6rem; font-size: .85rem; color: var(--tenue); }

/* Preguntas */
.preguntas { margin-top: 1.6rem; border-top: 1px solid var(--linea); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1.15rem 0; font: 600 1.05rem/1.3 var(--display);
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; flex: none; font: 400 1.5rem/1 var(--display); color: var(--verde); transition: transform .35s var(--sal); }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { margin: 0 0 1.2rem; color: var(--suave); max-width: 60ch; }

/* Cierre con cuenta atrás */
.cierre { text-align: center; overflow: hidden; overflow: clip; }
.cierre .titulo { margin-inline: auto; max-width: 22ch; }
.cuenta { display: flex; justify-content: center; gap: .5rem; margin: 1.6rem 0 1.8rem; }
.cuenta div { min-width: 4.3rem; padding: .8rem .4rem .6rem; border-radius: 12px; background: var(--tierra-2); border: 1px solid var(--linea); }
.cuenta b { display: block; font: 700 clamp(1.6rem, 7vw, 2.3rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.cuenta span { font: 600 .62rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.cierre .boton { max-width: 26rem; }
.anillos { position: absolute; z-index: -1; left: 50%; top: 50%; width: 140vw; max-width: 1100px; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-radial-gradient(circle, transparent 0 46px, rgba(16,224,152,.06) 47px 48px); mask: radial-gradient(circle, #000 20%, transparent 65%); }

/* Pie */
.pie { padding: 2.4rem 0 7rem; border-top: 1px solid var(--linea); font-size: .78rem; color: var(--tenue); }
.pie p { margin: .4rem 0; max-width: 70ch; }

/* Botón fijo en móvil */
.fijo {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  padding: .7rem var(--margen) calc(.7rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(5,7,10,.98) 60%, rgba(5,7,10,0));
  transform: translateY(110%); transition: transform .5s var(--sal);
}
.fijo.visible { transform: none; }
.fijo .boton { min-height: 3.3rem; }

/* Aparición al hacer scroll */
.aparece { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--sal), transform .9s var(--sal); }
.aparece.visto { opacity: 1; transform: none; }

/* Aviso de vista previa */
.aviso-preview {
  position: fixed; z-index: 90; bottom: .6rem; left: .6rem; opacity: .92; pointer-events: none;
  padding: .4rem .75rem; border-radius: 99px; background: #e8c074; color: #231a04;
  font: 700 .64rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}

/* ── Tableta y escritorio ────────────────────────── */
@media (min-width: 760px) {
  .clases { grid-template-columns: repeat(3, 1fr); }
  .clase { padding: 4.6rem 1.4rem 1.5rem; }
  .clase .num { top: 1.3rem; font-size: 2.6rem; }
  .filtro { grid-template-columns: 1fr 1fr; }
  .ponente { grid-template-columns: minmax(16rem, 22rem) 1fr; gap: clamp(2rem, 6vw, 5rem); }
  .lamina { grid-template-columns: 1fr 1.2fr; align-items: start; }
  .lamina .nota-reparto { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .portada {
    grid-template-columns: minmax(0, 1.15fr) minmax(22rem, .85fr);
    align-items: center; gap: clamp(2rem, 4vw, 4rem);
    padding: 6rem max(var(--margen), calc((100vw - var(--ancho)) / 2)) 4rem;
    min-height: min(100vh, 960px);
  }
  #vortice { width: 1000px; height: 1000px; right: calc(-500px + (100vw - min(100vw, var(--ancho))) / 2 + 17rem); top: calc(50% - 500px); left: auto; }
  .portada::after { background: radial-gradient(70% 90% at 15% 50%, var(--tierra) 30%, transparent 70%), linear-gradient(to top, var(--tierra), transparent 18%); }
  .portada h1 { font-size: clamp(3.4rem, 5vw, 4.8rem); }
  .lema { font-size: clamp(1.6rem, 2.3vw, 2.2rem); max-width: 34ch; }
  .video-portada { margin-top: 1.3rem; }
  .entrada { margin-top: 1.2rem; max-width: 46ch; font-size: 1.08rem; }
  .cta-portada, .portada .bajo-boton { display: none; }
  /* En escritorio el formulario vive en el centro del remolino */
  .panel {
    position: relative; inset: auto; z-index: 1; transform: none; visibility: visible;
    max-height: none; overflow: visible; border-radius: 22px;
    border: 1px solid var(--linea-media);
    background: linear-gradient(180deg, rgba(12,18,21,.88), rgba(7,10,12,.92));
    backdrop-filter: blur(10px);
    box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(16,224,152,.05), 0 0 80px -20px rgba(16,224,152,.25);
    padding: 2rem 1.9rem 1.6rem;
  }
  .panel-asa, .panel-cerrar { display: none; }
  .velo { display: none; }
  .fijo { display: none; }
  .tachados { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}

@media (min-width: 1600px) {
  :root { --ancho: 1320px; }
  body { font-size: 1.06rem; }
}

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

/* ── Página de gracias ───────────────────────────── */
.gracias .g-portada { position: relative; isolation: isolate; overflow: hidden; padding: 4.4rem 0 .6rem; }
.gracias .g-portada .entrada { margin-top: .7rem; font-size: 1rem; }
.gracias .progreso-texto { margin-bottom: .9rem; }
.gracias #vortice { right: -55vw; top: -35vw; opacity: .7; }
.gracias .g-portada::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 0% 50%, var(--tierra) 40%, transparent 80%); }
.progreso { height: 8px; border-radius: 99px; background: var(--tierra-3); border: 1px solid var(--linea); overflow: hidden; max-width: 24rem; }
.progreso span { display: block; height: 100%; width: var(--p); background: linear-gradient(90deg, var(--verde-hondo), var(--menta)); border-radius: 99px; transition: width .8s var(--sal); }
.progreso-texto { margin: .55rem 0 1.2rem; font: 600 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--menta); }
.g-titulo { margin: 0; max-width: 16ch; font: 700 clamp(2.3rem, 10vw, 4.6rem)/.98 var(--display); letter-spacing: -.035em; }
.g-titulo em { font-style: normal; color: var(--verde); display: block; }
.g-pasos { padding-top: 1rem; }
.pasos { margin: 0; padding: 0; list-style: none; display: grid; gap: .9rem; max-width: 46rem; }
.paso { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; padding: 1.25rem 1.2rem; border-radius: var(--r); background: var(--tierra-2); border: 1px solid var(--linea-media); }
.paso-n { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font: 700 1.05rem/1 var(--display); border: 1.5px solid var(--verde); color: var(--verde); }
.paso h2 { margin: .25rem 0 .35rem; font: 700 1.2rem/1.2 var(--display); letter-spacing: -.01em; }
.paso p { margin: 0; color: var(--suave); font-size: .95rem; }
.paso.hecho { border-color: var(--linea); background: transparent; }
.paso.hecho .paso-n { background: var(--verde); color: var(--tinta); }
.paso.hecho h2 { color: var(--suave); }
.paso-botones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.paso-botones .boton { width: auto; min-height: 3.1rem; font-size: .95rem; flex: 1 1 12rem; }
.cal-nota { margin: .6rem 0 0; font-size: .8rem; color: var(--tenue); }
.boton-sec { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--linea-viva); }
.boton-sec::after { display: none; }
.boton-sec:hover { box-shadow: inset 0 0 0 1.5px var(--verde); --sombra: none; }
.cierre .boton-sec { width: 100%; max-width: 26rem; }
@media (min-width: 1024px) {
  .gracias .g-portada { padding: 7rem 0 2rem; }
  .gracias #vortice { width: 900px; height: 900px; right: -200px; top: -260px; }
}

/* Vídeo en móvil: play más pequeño para no pisar el pie */
@media (max-width: 759px) {
  .video > button { width: 3.4rem; height: 3.4rem; margin-bottom: 1.6rem; box-shadow: 0 0 0 7px rgba(16,224,152,.18), 0 0 0 15px rgba(16,224,152,.07); }
  .video > button svg { width: 1.25rem; height: 1.25rem; }
  .video figcaption { left: .75rem; right: .75rem; bottom: .6rem; font-size: .74rem; }
  .video figcaption b { font-size: .88rem; }
}

/* Gracias · paso clave de WhatsApp */
.paso-clave:not(.hecho) { border-color: var(--linea-viva); background: linear-gradient(135deg, rgba(16,224,152,.12), var(--tierra-2) 65%); box-shadow: 0 0 40px -18px rgba(16,224,152,.55); }
.paso-clave:not(.hecho) .paso-n { background: var(--verde); color: var(--tinta); animation: latido 2s infinite; }
.paso-clave .boton svg { width: 1.3em; height: 1.3em; }
.boton[aria-disabled="true"] { opacity: .75; }
.qr { margin-top: 1rem; display: flex; gap: 1rem; align-items: center; }
.qr #qr-img { flex: none; padding: 8px; border-radius: 12px; background: #eef4f1; line-height: 0; }
.qr p { margin: 0; font-size: .88rem; color: var(--tenue); max-width: 22ch; }
.codigo { margin: .8rem 0 0 !important; font-size: .82rem !important; color: var(--tenue) !important; }
.codigo b { font-family: var(--mono); letter-spacing: .08em; color: var(--menta); }

/* Daniel · credenciales */
#t-daniel { max-width: 22ch; font-size: clamp(1.6rem, 6.4vw, 2.7rem); }
.credenciales { margin: 1.3rem 0 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.credenciales li { padding: .8rem 0; border-top: 1px solid var(--linea); color: var(--suave); font-size: .95rem; }
.credenciales li b { display: block; font: 700 1.02rem/1.3 var(--display); color: var(--texto); }
.credenciales li b::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .55rem; border-radius: 2px; background: var(--verde); transform: rotate(45deg) translateY(-2px); }

/* Vídeo de la portada · flotante, con luz detrás */
.video-portada { overflow: visible; animation: flotar 6s ease-in-out infinite, halo 6s ease-in-out infinite; }
.video-portada::before { /* borde de luz que recorre el marco */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 1;
  background: conic-gradient(from var(--giro, 0deg), transparent 0 70%, var(--menta) 85%, transparent 100%), linear-gradient(var(--linea-media), var(--linea-media));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: recorrido 5s linear infinite; box-shadow: none;
}
.video-portada { border-radius: var(--r); border-color: transparent; background-color: var(--tierra-3); }
.video-portada > iframe, .video-portada > video { border-radius: inherit; }
.video-portada > iframe, .video-portada > video { overflow: hidden; }
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes recorrido { to { --giro: 360deg; } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes halo { /* luz detrás del reproductor que respira */
  0%, 100% { box-shadow: 0 40px 80px -30px rgba(0,0,0,.95), 0 0 50px -6px rgba(16,224,152,.38), 0 26px 110px -14px rgba(52,245,176,.26); }
  50% { box-shadow: 0 48px 90px -30px rgba(0,0,0,.95), 0 0 70px 0 rgba(16,224,152,.5), 0 34px 140px -10px rgba(52,245,176,.36); }
}
.video-portada:hover { animation-play-state: paused; }
.video-portada.reproduciendo { animation: none; }

/* El hueco · herida, sal, el otro lado y el giro */
.herida { margin: 1.6rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; max-width: 38rem; }
.herida li {
  position: relative; padding: .85rem 1rem .85rem 2.6rem; border-radius: 12px;
  background: rgba(255,107,94,.06); border: 1px solid rgba(255,107,94,.18);
  font: 500 clamp(1rem, 4vw, 1.18rem)/1.4 var(--sans); color: var(--suave);
}
.herida li::before { content: "✕"; position: absolute; left: 1rem; top: .85rem; font-weight: 700; color: var(--rojo); }
.herida strong { color: var(--texto); }
.sal { margin: 1rem 0 0; max-width: 38rem; font: 600 clamp(1.08rem, 4.4vw, 1.35rem)/1.35 var(--display); letter-spacing: -.01em; color: var(--texto); }
.sal strong { color: var(--rojo); font-weight: 700; }
.otro-lado { margin-top: 2.2rem; padding: 1.3rem 1.2rem; border-radius: var(--r); background: var(--tierra-2); border: 1px solid var(--linea); max-width: 46rem; }
.otro-lado p { margin: 0; color: var(--suave); font-size: clamp(.98rem, 3.8vw, 1.08rem); }
.otro-lado strong { color: var(--texto); }
.lamina h3 em { font-style: normal; color: var(--verde); }
.nota-reparto b { color: var(--suave); }
@media (min-width: 1024px) {
  .herida { grid-template-columns: repeat(3, 1fr); max-width: none; }
  .herida li { padding: 1.1rem 1.1rem 1.1rem 2.6rem; }
  .herida li::before { top: 1.1rem; }
}

/* Las tres clases · gancho de dolor y «te llevas» */
.clase .gancho { margin: .55rem 0 0; font: 500 .9rem/1.4 var(--sans); font-style: italic; color: var(--menta); }
.clase h3 { margin-top: .35rem; }
.clase .lleva { margin-top: .8rem; padding-top: .75rem; border-top: 1px dashed var(--linea-media); font-size: .9rem; }
.clase .lleva b { display: block; margin-bottom: .15rem; font: 600 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--verde); }
.cta-medio { margin-top: 2rem; max-width: 26rem; }
@media (min-width: 760px) { .cta-medio { margin-inline: auto; } }

/* ═══ Elementos de ismma.com (28-oct) ═══ */

/* Barra: botón en escritorio */
.barra-cta { display: none; }
@media (min-width: 1024px) {
  .barra-vivo { margin-left: auto; margin-right: 1.2rem; }
  .barra-cta {
    display: inline-flex; align-items: center; padding: .55rem 1rem; border: 0; border-radius: 10px; cursor: pointer;
    background: linear-gradient(135deg, var(--menta), var(--verde) 50%, var(--verde-hondo)); color: var(--tinta);
    font: 700 .84rem/1 var(--display); box-shadow: 0 8px 24px -10px rgba(16,224,152,.7);
  }
}

/* Carrusel de redes bajo el vídeo */
.redes { position: relative; margin-top: 1rem; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.redes-pista { display: flex; gap: clamp(1.6rem, 6vw, 2.6rem); width: max-content; animation: deslizar 22s linear infinite; }
.logo-red { flex: none; display: grid; place-items: center; width: clamp(1.5rem, 6vw, 1.9rem); height: clamp(1.5rem, 6vw, 1.9rem); opacity: .92; }
.logo-red svg { width: 100%; height: 100%; }
@keyframes deslizar { to { transform: translateX(-50%); } }

/* Sello de confianza 400+ */
.confianza { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .65rem; margin-top: .8rem; }
.confianza p { margin: 0; font-size: .82rem; color: var(--suave); }
.confianza strong { color: var(--texto); }
.caras { display: inline-flex; }
.caras img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--tierra); margin-left: -9px; }
.caras img:first-child { margin-left: 0; }
.estrellas { color: #f5c451; letter-spacing: .08em; font-size: .9rem; }
.confianza-panel { justify-content: center; margin-top: .9rem; }

/* Cuenta atrás en el formulario */
.mini-cuenta { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .7rem; padding: .35rem .6rem; border-radius: 99px; border: 1px solid var(--linea-media); background: rgba(16,224,152,.06); font: 600 .72rem/1 var(--mono); letter-spacing: .04em; color: var(--suave); }
.mini-cuenta b { color: var(--menta); font-variant-numeric: tabular-nums; }
.mini-cuenta .punto { width: 6px; height: 6px; }

/* La diferencia */
.comparar { margin-top: 1.8rem; display: grid; gap: 1rem; }
.lado { padding: 1.4rem 1.3rem; border-radius: var(--r); }
.lado h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font: 700 1.1rem/1.2 var(--display); }
.lado h3 span { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 8px; font-size: .9rem; }
.lado ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.lado li { position: relative; padding-left: 1.7rem; color: var(--suave); font-size: .97rem; }
.lado li::before { position: absolute; left: 0; top: .05rem; font-weight: 700; }
.lado-no { background: linear-gradient(160deg, rgba(255,107,94,.1), rgba(255,107,94,.02)); border: 1px solid rgba(255,107,94,.28); }
.lado-no h3 span { background: rgba(255,107,94,.15); color: var(--rojo); }
.lado-no li::before { content: "✕"; color: var(--rojo); }
.lado-si { background: linear-gradient(160deg, rgba(16,224,152,.12), rgba(16,224,152,.02)); border: 1px solid var(--linea-media); }
.lado-si h3 span { background: var(--verde); color: var(--tinta); }
.lado-si li::before { content: "✓"; color: var(--verde); }
.remate { margin: 1.6rem 0 0; font: 600 clamp(1.1rem, 4.4vw, 1.4rem)/1.3 var(--display); }
.remate span { color: var(--verde); }
@media (min-width: 760px) { .comparar { grid-template-columns: 1fr 1fr; } .remate { text-align: center; } }

/* Reseñas en vídeo */
.resenas .titulo { max-width: 24ch; }
.pastilla { display: inline-flex; align-items: center; gap: .6rem; margin: 1rem 0 0; padding: .35rem .8rem .35rem .4rem; border-radius: 99px; border: 1px solid var(--linea-media); font-size: .8rem; color: var(--suave); }
.pastilla .caras img { width: 24px; height: 24px; margin-left: -7px; }
.filas { margin-top: 2rem; display: grid; gap: .8rem; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fila-pista { display: flex; gap: .8rem; width: max-content; animation: deslizar 70s linear infinite; }
.fila-2 .fila-pista { animation-direction: reverse; animation-duration: 80s; }
.fila-3 .fila-pista { animation-duration: 64s; }
.filas:hover .fila-pista, .filas:focus-within .fila-pista { animation-play-state: paused; }
.resena {
  position: relative; flex: none; width: clamp(15rem, 62vw, 19rem); aspect-ratio: 16 / 10; padding: 0; border: 1px solid var(--linea); border-radius: 14px;
  overflow: hidden; cursor: pointer; background: var(--tierra-3); text-align: left; color: var(--texto);
  transition: transform .4s var(--sal), border-color .3s;
}
.resena:hover { transform: translateY(-3px); border-color: var(--linea-viva); }
.resena img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.resena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,10,0) 35%, rgba(5,7,10,.92)); }
.resena-tag { position: absolute; z-index: 1; top: .6rem; left: .6rem; padding: .25rem .45rem; border-radius: 6px; background: rgba(5,7,10,.7); border: 1px solid var(--linea-media); font: 600 .6rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--menta); }
.resena-play { position: absolute; z-index: 1; top: 50%; left: 50%; width: 2.8rem; height: 2.8rem; margin: -1.9rem 0 0 -1.4rem; display: grid; place-items: center; border-radius: 50%; background: rgba(238,244,241,.92); color: var(--tierra); }
.resena-play svg { width: 1.1rem; height: 1.1rem; margin-left: 3px; }
.resena-pie { position: absolute; z-index: 1; left: .75rem; right: .75rem; bottom: .65rem; display: grid; gap: .15rem; }
.resena-pie b { font: 700 .92rem/1.2 var(--display); }
.resena-pie span { font-size: .74rem; line-height: 1.3; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.resena-pie strong { color: var(--menta); font-weight: 600; }
.resenas .cta-medio { margin-inline: auto; }

/* Visor de vídeo */
.visor { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--margen); background: rgba(2,4,5,.88); backdrop-filter: blur(4px); }
.visor[hidden] { display: none; }
.visor-caja { position: relative; width: min(100%, 26rem); }
.visor-video { position: relative; aspect-ratio: 9 / 16; max-height: 78svh; margin-inline: auto; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--linea-media); }
.visor-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.visor-cerrar { position: absolute; z-index: 2; top: -.9rem; right: -.6rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--linea-media); background: var(--tierra-2); color: var(--texto); cursor: pointer; }
.visor-nombre { margin: .7rem 0 0; text-align: center; font: 600 .95rem/1.3 var(--display); }

/* Cifras */
.cifras { padding: clamp(2.6rem, 8vw, 4rem) 0; border-block: 1px solid var(--linea); background: radial-gradient(80% 140% at 50% 0%, rgba(16,224,152,.08), transparent 70%); }
.cifras-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; text-align: center; }
.cifras b { display: block; font: 700 clamp(2.2rem, 10vw, 3.4rem)/1 var(--display); color: var(--verde); letter-spacing: -.03em; }
.cifras span { display: block; margin-top: .4rem; font: 600 .95rem/1.2 var(--display); }
.cifras small { display: block; margin-top: .2rem; font-size: .78rem; color: var(--tenue); }
@media (min-width: 760px) { .cifras-rejilla { grid-template-columns: repeat(4, 1fr); } }

/* Preguntas + ficha de DANIA */
.faq-rejilla { display: grid; gap: 2rem; align-items: start; }
.ficha-dania { padding: 1.5rem 1.3rem; border-radius: 20px; border: 1px solid var(--linea-media); background: linear-gradient(180deg, rgba(16,224,152,.08), var(--tierra-2) 40%); box-shadow: 0 0 60px -25px rgba(16,224,152,.5); }
.ficha-marca { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; font: 600 .72rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.ficha-marca span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--menta), var(--verde-hondo)); color: var(--tinta); font: 700 .7rem/1 var(--display); letter-spacing: .04em; }
.ficha-dania h3 { margin: 0; font: 700 1.3rem/1.2 var(--display); }
.ficha-dania h3 em { font-style: italic; color: var(--verde); }
.ficha-dania > p { margin: .6rem 0 0; color: var(--suave); font-size: .93rem; }
.ficha-dania ul { margin: 1rem 0 1.2rem; padding: 0; list-style: none; display: grid; gap: .75rem; }
.ficha-dania li { padding-left: .9rem; border-left: 2px solid var(--verde); color: var(--suave); font-size: .88rem; }
.ficha-dania li b { display: block; color: var(--texto); font: 600 .95rem/1.3 var(--display); }
.ficha-dania small { display: block; margin-top: .6rem; text-align: center; font-size: .75rem; color: var(--tenue); }
@media (min-width: 1024px) { .faq-rejilla { grid-template-columns: 1.4fr 1fr; gap: 3rem; } .ficha-dania { position: sticky; top: 1.5rem; } }

/* Cierre: sellos */
.sellos { display: grid; gap: .7rem; max-width: 56rem; margin: 2rem auto 0; text-align: left; }
.sellos div { padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--linea); background: var(--tierra-2); font-size: .85rem; color: var(--tenue); }
.sellos b { display: block; color: var(--texto); font: 600 .98rem/1.3 var(--display); }
@media (min-width: 760px) { .sellos { grid-template-columns: repeat(3, 1fr); } }

/* Pie */
.pie { text-align: center; }
.pie p { margin-inline: auto; }
.pie-marca { font: 700 1.1rem/1 var(--display); color: var(--texto); }
.pie-marca b { letter-spacing: .02em; }
.pie-lema { color: var(--suave); font-weight: 600; }
.pie-enlaces a { color: var(--suave); }

@media (prefers-reduced-motion: reduce) {
  .redes-pista, .fila-pista { animation: none !important; }
  .filas, .redes { overflow-x: auto; }
}
.portada > *, .portada-texto { min-width: 0; }
.redes { max-width: 100%; }

/* Reproductor de la portada (fv-) dentro del marco flotante de ISMMA */
.fv-video.video-portada { max-width: none; margin: .95rem 0 0; }
.fv-video .fv-video__play { left: 24%; }
.fv-ov__t, .fv-anuncio b, .fv-video__rotulo strong { font-family: var(--display); }
.fv-flotando { animation: none; }
@media (min-width: 1024px) { .fv-video.video-portada { margin-top: 1.3rem; } }

/* Gracias v2 · falta un paso */
.progreso-vivo span { position: relative; overflow: hidden; }
.progreso-vivo span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); animation: barrido 1.8s ease-in-out infinite; }
@keyframes barrido { to { transform: translateX(100%); } }
.progreso-vivo + .progreso-texto { color: #f5c451; }
.progreso-vivo.completo + .progreso-texto { color: var(--menta); }
.g-cta { margin-top: 1.3rem; max-width: 26rem; }
.boton-wa { background: linear-gradient(135deg, #3ae374, #25D366 50%, #1aa851); color: #04231a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 12px 34px -10px rgba(37,211,102,.7); animation: latidoWa 1.8s ease-in-out infinite; }
.boton-wa svg { width: 1.35em; height: 1.35em; }
@keyframes latidoWa { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 0 rgba(37,211,102,.5); } 50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 10px rgba(37,211,102,0); } }
.g-salto { margin: .7rem 0 0; font-size: .86rem; color: var(--suave); }
.g-salto b { color: var(--menta); font-variant-numeric: tabular-nums; }
.g-salto button { border: 0; background: none; padding: 0; color: var(--tenue); text-decoration: underline; cursor: pointer; font: inherit; }
.g-cta .codigo { margin-top: .5rem !important; }
.instrucciones { margin: 1.8rem 0 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.instrucciones li { position: relative; display: grid; gap: .3rem; padding: 1.3rem 1.2rem 1.2rem; border-radius: var(--r); border: 1px solid var(--linea); background: linear-gradient(160deg, rgba(16,224,152,.07), var(--tierra-2) 55%); overflow: hidden; transition: transform .5s var(--sal), border-color .3s; }
.instrucciones li:hover { transform: translateY(-3px); border-color: var(--linea-media); }
.instrucciones li::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--verde), transparent); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--sal) .2s; }
.instrucciones li.visto::before { transform: scaleX(1); }
.ins-n { font: 700 2rem/1 var(--display); color: transparent; -webkit-text-stroke: 1px var(--verde); }
.instrucciones b { font: 700 1.1rem/1.25 var(--display); }
.instrucciones li > span:last-child { color: var(--suave); font-size: .95rem; }
@media (min-width: 760px) { .instrucciones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .instrucciones { grid-template-columns: repeat(4, 1fr); } }