/* ══════════════════════════════════════════════════════════════
   ADNIUS · WEBSITE PROMO LANDING · HOJA DE ESTILOS · v2 PANTALLAS GRANDES (27/09/2026)
   v2: 100 medidas de px a rem para que la pagina crezca parejo en
   pantallas grandes (ver PANTALLAS-GRANDES.md), y el .wrap mide su
   tope SIN contar el margen de los lados, para que las secciones
   arranquen en la misma linea que el logo, igual que en SEO v14.
   Hasta 1600px se ve igual. Se quedan en px las rayas de 1px y 2px,
   las pildoras de 999px, los breakpoints y lo que va en @keyframes.
   Pagina: /website-promo/   ·   Portado de adnius-web-promo-v15.html

   Se encola SOLO en esa pagina, desde adnius_enqueue_promo() en
   functions.php, a prioridad 39.

   NO TRAE: las dos fuentes ni GSAP. Las fuentes las carga
   adnius_enqueue_header() y GSAP lo carga divifx_enqueue_motion(),
   los dos en todo el sitio. Volver a cargarlos aqui seria pedirlos
   dos veces.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════ 1 · VARIABLES ══════════════════
   Copiadas de adnius-home-v59.html, linea 12. Mismo lenguaje visual,
   mismos valores. Esta landing no inventa una paleta nueva. */

:root{
  --black:#000;
  --yellow:#ffc600;
  --orange:#ff7000;
  --green:#29d264;
  --white:#fff;

  --display:'Hanken Grotesk',Helvetica,Arial,sans-serif;
  --body:'Inter',Helvetica,Arial,sans-serif;

  --pad:clamp(1.5rem,5vw,5rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--black);color:var(--white);font-family:var(--body);overflow-x:clip}
@supports not (overflow:clip){ body{overflow-x:hidden} }
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--yellow);color:var(--black)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--yellow);outline-offset:0.25rem}


/* ══════════════════ 2 · BARRA DE PROGRESO ══════════════════ */

.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;background:rgba(255,255,255,.06)}
.prog i{display:block;height:100%;width:0;background:var(--yellow)}


/* ══════════════════ 3 · CABECERA REDUCIDA ══════════════════
   SIN NAVEGACION, a proposito. Cada enlace en una landing de campaña es
   una salida, y las salidas cuestan dinero: el trafico es pago. */

.hdr{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--pad);
  transition:background .4s ease,backdrop-filter .4s ease,padding .4s ease;
}
.hdr.solid{
  background:rgba(0,0,0,.78);
  -webkit-backdrop-filter:blur(0.875rem);backdrop-filter:blur(0.875rem);
  padding:.75rem var(--pad);
  border-bottom:1px solid rgba(255,255,255,.07);
}
/* EL LOGO REAL, con isotipo y tagline. En una landing sin navegacion
   la marca es lo unico que dice quien esta detras, asi que el logo
   completo trabaja mas que la palabra sola.

   line-height:0 en el enlace: sin eso el contenedor de una imagen se
   queda con el espacio de la linea de texto por debajo y el logo
   parece descentrado. */
.hdr .mark{display:block;line-height:0;text-decoration:none}
.hdr .mark img{
  height:clamp(1.875rem,3.2vw,2.625rem);width:auto;max-width:none;display:block;
  transition:height .4s ease;
}
.hdr.solid .mark img{height:clamp(1.625rem,2.7vw,2.125rem)}

.hdr .top{
  font-family:var(--display);font-weight:600;font-size:.78rem;
  text-decoration:none;padding:.62rem 1.25rem;border-radius:999px;
  background:var(--yellow);color:var(--black);white-space:nowrap;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.hdr .top:hover{transform:translateY(-2px);box-shadow:0 0.625rem 1.875rem rgba(255,198,0,.3)}


/* ══════════════════ 4 · TIPOGRAFIA COMPARTIDA ══════════════════ */

.eyebrow{
  display:flex;flex-wrap:wrap;
  font-family:var(--display);font-weight:300;
  font-size:clamp(.6rem,1vw,.76rem);
  letter-spacing:.6em;text-transform:uppercase;
}
.eyebrow.mid{justify-content:center}
/* CADA PALABRA EN SU PROPIA CAJA.
   El eyebrow es un flex con wrap y cada letra es un item, asi que el
   navegador puede cortar entre dos letras cualesquiera: en el telefono
   "TEMPLATE" quedaba partido en TEMPL y ATE. Agrupando las letras por
   palabra, el corte solo puede caer entre palabras. El espacio va
   DENTRO de la palabra anterior para que no quede como sangria al
   principio de la linea siguiente. */
.eyebrow i{display:inline-flex;font-style:normal;white-space:nowrap}

.eyebrow span{
  display:inline-block;
  animation:spectrum 9s linear infinite;
  animation-delay:calc(var(--i) * -.42s);
}

/* Salto forzado despues de la coma, solo en pantalla angosta. Sin esto
   el corte cae donde quepa y parte la frase por la mitad de una idea.
   flex-basis:100% ocupa la linea entera sin alto, que es como se fuerza
   un salto dentro de un contenedor flex. */
.eyebrow .lb{display:none}
@media (max-width:620px){
  .eyebrow .lb{display:block;flex-basis:100%;height:0}
}
@keyframes spectrum{
  0%,100%{color:var(--white)}
  20%{color:var(--yellow)}
  40%{color:var(--orange)}
  60%{color:var(--green)}
  80%{color:var(--white)}
}

.big{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.1rem,6vw,5rem);
  line-height:1;letter-spacing:-.03em;color:var(--white);
}
.big em{font-style:normal;color:var(--yellow)}

.lw{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln{display:block;will-change:transform;backface-visibility:hidden}

.lede{font-weight:200;font-size:clamp(1rem,1.6vw,1.35rem);line-height:1.55;color:rgba(255,255,255,.7);max-width:46ch}

.sec{position:relative;padding:clamp(4rem,10vh,7.5rem) 0}
.wrap{max-width:calc(93.75rem + var(--pad) * 2);margin:0 auto;padding:0 var(--pad)}

.shead{margin-bottom:clamp(2.5rem,6vh,4rem)}
.shead .eyebrow{margin-bottom:1.4rem}
.shead .big{font-size:clamp(1.7rem,3.8vw,3.1rem);max-width:20ch}
.shead.mid{text-align:center}
.shead.mid .big{margin:0 auto;max-width:22ch}
.shead.mid .lede{margin-left:auto;margin-right:auto}


/* ══════════════════ 5 · BOTONES ══════════════════ */

.acts{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.acts.mid{justify-content:center}

.book{
  position:relative;overflow:hidden;isolation:isolate;display:inline-block;
  font-family:var(--display);font-weight:600;font-size:.95rem;
  text-decoration:none;padding:1.05rem 2.2rem;border-radius:999px;
  background:var(--yellow);color:var(--black);border:0;cursor:pointer;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.book:hover{transform:translateY(-2px);box-shadow:0 0.75rem 2.5rem rgba(255,198,0,.4)}
/* Un destello cruza el boton al pasar el mouse. Llama la atencion por
   movimiento, no por peso: el boton no crece ni cambia de color. */
.book::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.72) 50%,transparent 66%);
  background-size:260% 100%;background-position:150% 0;
  transition:background-position 1.1s cubic-bezier(.16,1,.3,1);
}
.book:hover::after{background-position:-60% 0}

@keyframes ctaHalo{
  0%,100%{box-shadow:0 0 0 0 rgba(255,198,0,.3)}
  55%{box-shadow:0 0 0 16px rgba(255,198,0,0)}
}
.book.pulse{animation:ctaHalo 3.4s ease-out infinite}
.book.pulse:hover{animation:none}

.ghost{
  position:relative;font-family:var(--body);font-size:.86rem;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  color:rgba(255,255,255,.6);padding-bottom:.42rem;transition:color .35s ease;
}
.ghost::before,.ghost::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px}
.ghost::before{background:rgba(255,255,255,.22)}
.ghost::after{
  background:var(--yellow);transform:scaleX(0);transform-origin:left center;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.ghost:hover{color:var(--white)}
.ghost:hover::after{transform:scaleX(1)}


/* ══════════════════ 6 · EL LLAMADO REPETIDO ══════════════════
   Aparece siete veces en la pagina y siempre dice lo mismo: bloquear el
   precio. Una landing con siete mensajes distintos no tiene ninguno.

   CRECIO RESPECTO A LA v2. Antes el precio era una nota pequeña encima
   del boton; ahora es el protagonista del bloque y el boton lo remata.
   Quien baja rapido tiene que tropezar con el numero, no buscarlo. */

.cta{
  position:relative;overflow:hidden;
  margin-top:clamp(2.8rem,6vh,4.2rem);
  padding:clamp(2rem,4.5vw,3.2rem) clamp(1.4rem,3vw,2.4rem);
  border:1px solid rgba(255,198,0,.22);border-radius:1.25rem;
  background:linear-gradient(155deg,rgba(255,198,0,.06),rgba(255,198,0,.008));
  text-align:center;
}
/* El barrido de luz, el mismo gesto del boton y de las condiciones */
.cta::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,198,0,.07) 50%,transparent 62%);
  background-size:280% 100%;background-position:130% 0;
  transition:background-position 1.5s cubic-bezier(.16,1,.3,1);
}
.cta:hover::after{background-position:-50% 0}

.cta .inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.1rem}

.cta .lead{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,2.1vw,1.5rem);line-height:1.2;letter-spacing:-.02em;
  color:rgba(255,255,255,.9);max-width:28ch;
}
.cta .lead em{font-style:normal;color:var(--yellow)}

/* El precio grande del llamado */
.cta .num{
  display:flex;align-items:baseline;justify-content:center;gap:.55rem;flex-wrap:wrap;
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.8rem,7vw,4.4rem);line-height:.92;letter-spacing:-.05em;
  color:var(--yellow);font-variant-numeric:tabular-nums;
}
.cta .num small{
  font-size:clamp(.82rem,1.5vw,1.05rem);font-weight:400;letter-spacing:-.01em;
  color:rgba(255,255,255,.82);
}
.cta .num del{
  font-size:clamp(1rem,1.8vw,1.3rem);font-weight:400;letter-spacing:-.01em;
  color:rgba(255,255,255,.3);text-decoration-thickness:1px;
}

.cta .sub{
  display:flex;align-items:center;justify-content:center;gap:.55rem;flex-wrap:wrap;
  font-size:.82rem;font-weight:300;color:rgba(255,255,255,.52);
}
.cta .sub i{font-style:normal;width:0.375rem;height:0.375rem;border-radius:50%;background:var(--green);flex:none}
.cta .sub b{color:rgba(255,255,255,.82);font-weight:500}

.cta .row{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:.4rem}
.cta .book{font-size:1.02rem;padding:1.15rem 2.6rem}


/* ══════════════════ 7 · EL HERO ══════════════════
   El precio va ARRIBA y grande. Esconderlo no crea deseo, crea
   abandono: la gente busca el numero, no lo encuentra y se va. */

.hero{
  position:relative;min-height:100svh;
  display:grid;place-items:center;
  overflow:hidden;isolation:isolate;
  padding:7rem var(--pad) 3rem;
}

.hero .wall{
  position:absolute;inset:-20% -8%;
  display:flex;gap:0.875rem;align-items:flex-start;
  transform:rotate(-4deg) scale(1.16);z-index:0;
}
.hero .reel-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.875rem;will-change:transform}
.hero .tile{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:#0a0a0a}
/* Posicion absoluta y no height:100%. Dentro de una columna flexible
   ese porcentaje puede no resolverse y deja la imagen en cero de alto. */
.hero .tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.25) contrast(1.06);opacity:.70;
}

/* El velo es plano y no linterna. En el home la linterna es el juego
   principal; aqui el protagonista es el precio, y un fondo que pide
   atencion le robaria la mirada. */
.hero .veil{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.55)}
.hero .vig{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 62% 52% at 50% 45%,rgba(0,0,0,.62) 0%,rgba(0,0,0,.3) 55%,transparent 100%),
    linear-gradient(to bottom,rgba(0,0,0,.8) 0%,transparent 22%,transparent 68%,rgba(0,0,0,.96) 100%);
}
.hero .glow{
  position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle 26.25rem at 50% 42%,rgba(255,198,0,.09) 0%,rgba(255,112,0,.04) 45%,transparent 75%);
}


/* --- Los dispositivos en perspectiva ---
   Dibujados a trazo, no fotografias: una foto de un laptop generico se
   lee como banco de imagenes. El trazo amarillo es el mismo lenguaje de
   los dibujos del portafolio en el home.

   DOS CAPAS ANIDADAS, y hace falta que sean dos.

   La de fuera, .fl, flota: solo escribe translateY.
   La de dentro, el SVG, gira: solo escribe rotateY y rotateX.

   Si las dos vivieran en el mismo elemento, el segundo transform
   pisaria al primero. La propiedad transform no se acumula entre
   reglas ni entre animaciones: la ultima declaracion gana y la otra
   desaparece. Es la misma leccion del .ln del home, donde GSAP y el
   CSS no pueden escribir el mismo transform.

   La perspectiva vive en el contenedor y no en la pieza: puesta en el
   propio elemento, cada uno tendria su punto de fuga y el conjunto no
   se leeria como una misma escena. */

.floaters{
  position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;
  perspective:75rem;
  perspective-origin:50% 45%;
}
.fl{
  position:absolute;
  transform-style:preserve-3d;
  animation:bob var(--dur,7s) ease-in-out infinite;
  animation-delay:var(--del,0s);
}
.fl svg{
  display:block;width:100%;height:auto;
  stroke:var(--yellow);stroke-width:1.3;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.24;
  transform:rotateY(var(--ry,-25deg)) rotateX(var(--rx,8deg)) rotateZ(var(--rz,0deg));
  transform-origin:50% 50%;
}
.fl .f{fill:var(--yellow);stroke:none}
.fl .dim{stroke:rgba(255,255,255,.28)}

@keyframes bob{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-20px,0)}
}

/* Los que quedan a la izquierda giran hacia la derecha y al reves: asi
   las cuatro piezas miran hacia el centro, que es donde esta el texto. */
.fl-1{width:clamp(10rem,16vw,16.875rem);left:2%;top:19%;--ry:26deg;--rx:9deg;--rz:-4deg;--dur:8s}
.fl-2{width:clamp(4.375rem,7vw,7rem);right:5.5%;top:15%;--ry:-28deg;--rx:6deg;--rz:5deg;--dur:6.4s;--del:-2s}
.fl-3{width:clamp(7.5rem,12vw,11.5625rem);right:5%;bottom:13%;--ry:-24deg;--rx:-8deg;--rz:3deg;--dur:9s;--del:-3.5s}
.fl-4{width:clamp(5.375rem,8.5vw,8.25rem);left:7%;bottom:11%;--ry:30deg;--rx:-6deg;--rz:-3deg;--dur:7.2s;--del:-1.2s}

@media (max-width:1180px){ .fl-1,.fl-3{display:none} }
@media (max-width:820px){ .floaters{display:none} }

.hero .inner{position:relative;z-index:4;text-align:center;max-width:67.5rem;margin:0 auto}
.hero .eyebrow{margin-bottom:1.8rem}
.hero .big{margin-bottom:1.5rem;font-size:clamp(2.3rem,6.4vw,5.2rem)}
.hero .lede{
  margin:0 auto 2.4rem;font-weight:300;color:rgba(255,255,255,.92);
  text-shadow:0 2px 1.625rem rgba(0,0,0,.85);max-width:52ch;
}

/* --- El bloque del precio --- */

.pricebox{
  display:inline-flex;flex-direction:column;align-items:center;
  gap:.5rem;margin-bottom:1.3rem;
  padding:1.7rem 2.8rem;
  border:1px solid rgba(255,198,0,.28);border-radius:1.125rem;
  background:linear-gradient(155deg,rgba(255,198,0,.07),rgba(255,198,0,.012));
  position:relative;overflow:hidden;
}
.pricebox::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,198,0,.09) 50%,transparent 62%);
  background-size:280% 100%;background-position:130% 0;
  animation:sweepBox 6s ease-in-out infinite;
}
@keyframes sweepBox{
  0%,100%{background-position:130% 0}
  50%{background-position:-40% 0}
}

.pricebox .save{
  font-family:var(--display);font-weight:600;font-size:.64rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--green);
}
.pricebox .fig{
  display:flex;align-items:baseline;gap:.5rem;
  font-family:var(--display);font-weight:800;
  font-size:clamp(3.6rem,9.5vw,6rem);
  line-height:.92;letter-spacing:-.05em;
  color:var(--yellow);font-variant-numeric:tabular-nums;
}
.pricebox .fig small{
  font-size:clamp(.9rem,1.7vw,1.15rem);font-weight:400;letter-spacing:-.01em;
  color:rgba(255,255,255,.86);
}
.pricebox .then{font-size:.82rem;font-weight:300;color:rgba(255,255,255,.52)}
.pricebox .then b{color:rgba(255,255,255,.82);font-weight:500}

/* CORREGIDO EN LA v2 Y SE MANTIENE. Era inline-flex y en pantallas
   anchas se colocaba AL LADO del bloque del precio en vez de debajo:
   un inline flota junto a lo que tenga cerca si hay sitio.

   Con flex de ancho completo ocupa su propia linea siempre. El centrado
   lo hace justify-content, porque sobre un contenedor flex el
   text-align del padre no coloca las cajas. */
.lockline{
  display:flex;align-items:center;justify-content:center;
  gap:.6rem;flex-wrap:wrap;
  width:100%;margin:0 auto 2.4rem;
  font-size:.82rem;font-weight:300;line-height:1.5;
  color:rgba(255,255,255,.58);text-align:center;
}
.lockline i{
  width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 0 rgba(41,210,100,.5);
  animation:pip 2.6s ease-out infinite;
}
@keyframes pip{
  0%{box-shadow:0 0 0 0 rgba(41,210,100,.5)}
  70%{box-shadow:0 0 0 10px rgba(41,210,100,0)}
  100%{box-shadow:0 0 0 0 rgba(41,210,100,0)}
}
.lockline b{color:var(--white);font-weight:500}

.hero .figs{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(1.6rem,6vw,4.5rem);margin-top:3rem}
.hero .figs b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:1;letter-spacing:-.02em;
  /* Sin esto los digitos bailan mientras el contador sube */
  font-variant-numeric:tabular-nums;text-align:center;
}
.hero .figs span{
  display:block;margin-top:.5rem;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.45);text-align:center;
}


/* ══════════════════ 8 · POR QUE $499 ══════════════════
   Va INMEDIATAMENTE despues del hero, no al final.

   En la version venezolana las condiciones estan escondidas tras todo
   el contenido, y eso quema presupuesto de campaña: la gente llega, se
   entusiasma, descubre lo que falta en la llamada y se cae. */

.why{background:var(--black);border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.why .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
@media (max-width:900px){ .why .grid{grid-template-columns:1fr} }

.cond{
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);border-radius:1rem;
  padding:clamp(1.5rem,3vw,2.1rem);
  background:linear-gradient(155deg,rgba(255,255,255,.035),rgba(255,255,255,.006));
  transition:border-color .45s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.cond:hover{border-color:rgba(255,198,0,.35);transform:translateY(-0.25rem)}
.cond::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,198,0,.06) 50%,transparent 62%);
  background-size:280% 100%;background-position:130% 0;
  transition:background-position 1.4s cubic-bezier(.16,1,.3,1);
}
.cond:hover::after{background-position:-50% 0}

.cond .ico{
  width:2.875rem;height:2.875rem;margin-bottom:1.1rem;
  display:grid;place-items:center;border-radius:0.75rem;
  background:rgba(255,198,0,.09);border:1px solid rgba(255,198,0,.22);
}
/* Sin ancho, sin trazo y sin fill:none un SVG sale invisible */
.cond .ico svg{width:1.3125rem;height:1.3125rem;stroke:var(--yellow);stroke-width:1.6;fill:none}
.cond .n{
  font-family:var(--display);font-weight:800;font-size:.62rem;
  letter-spacing:.24em;color:rgba(255,255,255,.3);
  display:block;margin-bottom:.7rem;
}
.cond h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.1rem,1.9vw,1.35rem);line-height:1.15;letter-spacing:-.02em;
  margin-bottom:.7rem;
}
.cond .amt{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.9rem}
.cond .amt b{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1;letter-spacing:-.03em;
  color:var(--white);font-variant-numeric:tabular-nums;
}
.cond .amt span{font-size:.78rem;font-weight:300;color:rgba(255,255,255,.5)}
.cond p{font-weight:200;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.62)}

.whynote{
  margin-top:clamp(2rem,4vh,3rem);
  padding:clamp(1.4rem,3vw,2rem);
  border-left:2px solid var(--yellow);
  background:rgba(255,255,255,.02);
  font-weight:200;font-size:clamp(.95rem,1.3vw,1.08rem);line-height:1.65;
  color:rgba(255,255,255,.72);max-width:70ch;
}
.whynote b{color:var(--white);font-weight:500}
.whynote a{color:var(--yellow);text-decoration:underline;text-underline-offset:0.1875rem}


/* ══════════════════ 9 · QUE RECIBES ══════════════════ */

.pages .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.8vw,1.3rem)}
@media (max-width:900px){ .pages .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .pages .grid{grid-template-columns:1fr} }

.pg{
  border:1px solid rgba(255,255,255,.09);border-radius:0.75rem;
  padding:1.5rem;background:rgba(255,255,255,.018);
  transition:border-color .4s ease,background .4s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.pg:hover{border-color:rgba(255,198,0,.32);background:rgba(255,198,0,.035);transform:translateY(-0.1875rem)}
.pg .tick{
  width:1.375rem;height:1.375rem;border-radius:50%;
  display:grid;place-items:center;margin-bottom:.9rem;
  background:rgba(255,198,0,.12);border:1px solid rgba(255,198,0,.3);
}
.pg .tick svg{width:0.6875rem;height:0.6875rem;stroke:var(--yellow);stroke-width:2.6;fill:none}
.pg h3{font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;margin-bottom:.4rem}
.pg p{font-weight:200;font-size:.85rem;line-height:1.55;color:rgba(255,255,255,.55)}

/* La nota de las paginas extra. Va pegada a la rejilla, no perdida al
   final: quien cuenta las paginas y ve que le faltan dos necesita saber
   ahi mismo que se pueden sumar. */
.pgnote{
  margin-top:clamp(1.4rem,3vh,2rem);
  padding:1.2rem 1.4rem;
  border:1px dashed rgba(255,255,255,.16);border-radius:0.75rem;
  font-weight:200;font-size:.92rem;line-height:1.6;
  color:rgba(255,255,255,.58);max-width:74ch;
}
.pgnote b{color:rgba(255,255,255,.85);font-weight:500}


/* ══════════════════ 10 · LO QUE HACE QUE FUNCIONE ══════════════════ */

.feat{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;
  padding:clamp(2.5rem,6vh,4.5rem) 0;
  border-top:1px solid rgba(255,255,255,.08);
}
/* Sin linea divisoria arriba, el padding superior del primer bloque
   solo esta repitiendo el de la seccion. En telefono eso sumaba 48px de
   negro entre el boton de la seccion anterior y la ilustracion. */
.feat:first-of-type{border-top:0;padding-top:0}
@media (max-width:900px){
  .feat{grid-template-columns:1fr;gap:2rem}
  /* En telefono la imagen es lo que detiene el pulgar, no el titular */
  .feat .art{order:-1}

  /* ESTA SECCION ARRANCA CON DIBUJO Y NO CON TEXTO, y es la unica de la
     pagina que lo hace. Un titular contra el borde se lee apretado, pero
     un dibujo no: tiene su propio margen visual. Con el padding completo
     quedaban casi 250px de negro entre el boton de arriba y la
     ilustracion.

     Va con clase propia y no tocando .sec, para no alterar el ritmo del
     resto de la pagina. */
  .sec.arttop{padding-top:clamp(2rem,5vh,3.5rem)}
}

.feat h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.06;letter-spacing:-.03em;
  margin-bottom:1.1rem;
}
.feat h3 em{font-style:normal;color:var(--yellow)}
.feat p{font-weight:200;font-size:clamp(.95rem,1.3vw,1.08rem);line-height:1.65;color:rgba(255,255,255,.62);max-width:46ch}
.feat p + p{margin-top:.9rem}

/* La escena tambien va en perspectiva, con el mismo criterio del hero:
   la perspectiva en el contenedor y la rotacion en la pieza. */
.feat .art{
  position:relative;justify-self:center;
  width:100%;max-width:30rem;aspect-ratio:4/3;
  perspective:68.75rem;
}
.feat .art svg{
  width:100%;height:100%;display:block;
  stroke:var(--yellow);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  transform:rotateY(var(--ry,-18deg)) rotateX(var(--rx,6deg));
  transform-origin:50% 50%;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
/* Al pasar el mouse la escena se endereza: responde sin moverse de
   sitio, que es el mismo gesto del resto del sitio. */
.feat:hover .art svg{transform:rotateY(calc(var(--ry,-18deg) * .35)) rotateX(calc(var(--rx,6deg) * .35))}

.feat .art .f{fill:var(--yellow);stroke:none}
.feat .art .dim{stroke:rgba(255,255,255,.22)}
/* Lo que respira dentro de cada escena, con ritmos distintos para que
   no suene a metronomo */
.feat .art .drift{animation:driftY 5.5s ease-in-out infinite}
.feat .art .drift2{animation:driftY 7s ease-in-out infinite;animation-delay:-1.4s}
@keyframes driftY{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}


/* ══════════════════ 11 · EL ENLACE PRIVADO ══════════════════
   Comprar algo que todavia no existe da ansiedad, y esa ansiedad es la
   que hace que el cliente escriba cada tres dias preguntando como va.

   El enlace privado responde eso sin una sola llamada: el sitio se
   construye en linea y se puede mirar cuando quiera. */

.live{
  background:var(--black);
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  overflow:hidden;
}
.live .grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(18.75rem,46%);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
@media (max-width:900px){
  .live .grid{grid-template-columns:1fr;gap:2.4rem}
  .live .art{order:-1}
}

.live .art{position:relative;justify-self:center;width:100%;max-width:27.5rem;perspective:68.75rem}
.live .art svg{
  width:100%;height:auto;display:block;
  stroke:var(--yellow);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  transform:rotateY(20deg) rotateX(7deg);
  transform-origin:50% 50%;
}
.live .art .f{fill:var(--yellow);stroke:none}
.live .art .dim{stroke:rgba(255,255,255,.24)}

/* El punto que late: dice "esto esta pasando ahora" sin escribirlo */
.live .art .pulse-dot{animation:dotPulse 2.4s ease-in-out infinite}
@keyframes dotPulse{
  0%,100%{opacity:.35}
  50%{opacity:1}
}


/* ══════════════════ 12 · EL ACOMPAÑAMIENTO ══════════════════
   Esta seccion pesa tanto como la del sitio, y no es casualidad: el
   negocio real son las mensualidades.

   Se cuenta en lenguaje de cliente. Nadie fuera de este oficio sabe que
   es un plugin ni le importa: lo que entiende es que le cambian cosas
   cuando lo pide, que no se le cae y que aparece en Google. */

.after{background:var(--black);overflow:hidden;position:relative}
.after::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(100deg,transparent 38%,rgba(255,198,0,.04) 50%,transparent 62%);
  background-size:280% 100%;background-position:130% 0;
  transition:background-position 1.6s cubic-bezier(.16,1,.3,1);
}
.after:hover::after{background-position:-50% 0}
.after .wrap{position:relative;z-index:1}

.after .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.6vw,2.2rem)}
@media (max-width:1000px){ .after .grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .after .grid{grid-template-columns:1fr} }

.inc{padding:1.3rem 0;border-top:1px solid rgba(255,255,255,.09);transition:padding-left .45s cubic-bezier(.16,1,.3,1)}
.inc:hover{padding-left:.5rem}
.inc h4{
  font-family:var(--display);font-weight:600;font-size:.98rem;
  letter-spacing:-.01em;margin-bottom:.4rem;
  display:flex;align-items:center;gap:.6rem;
}
.inc h4::before{content:'';width:.55rem;height:1px;background:var(--yellow);flex:none}
.inc p{font-weight:200;font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.55)}


/* ══════════════════ 13 · LA PRUEBA ══════════════════ */

.proof{overflow:hidden;background:var(--black);border-top:1px solid rgba(255,255,255,.1)}
.proof .mqv{margin-top:clamp(1.5rem,3vh,2.5rem)}
.shot{width:clamp(14.375rem,26vw,21.25rem);flex:none;text-decoration:none;color:inherit;display:block}
.shot .frame{
  position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:0.3125rem;
  background:#0a0a0a;border:1px solid rgba(255,255,255,.06);
}
.shot img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.66);
  transition:filter .6s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}
.shot:hover img{filter:none;transform:scale(1.05)}

/* LA TARJETA DEL CENTRO, EN COLOR.
   El motor ya le pone la clase mid a la tarjeta mas cercana al centro
   del visor, en cada cuadro y en las dos anchuras. Lo que faltaba era
   esto: el CSS solo existia para .card, que son las cintas de personas
   y marcas, y nunca se escribio para .shot.

   SIN ESCALA, a diferencia del hover. Una tarjeta que crece mientras se
   desplaza se ve saltona. Asi quedan dos estados distintos: el centro
   se ilumina, el hover ademas acerca. */
.shot.mid img{filter:none}
.shot.mid .meta b{color:var(--yellow)}
.shot .meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:.7rem;gap:.8rem}
.shot .meta b{font-family:var(--display);font-weight:600;font-size:.86rem;letter-spacing:.02em;transition:color .4s ease}
.shot:hover .meta b{color:var(--yellow)}
.shot .meta span{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.32)}


/* ══════════════════ 14 · EL PROCESO ══════════════════ */

.steps{counter-reset:st}
.steps .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.8rem)}
@media (max-width:900px){ .steps .grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .steps .grid{grid-template-columns:1fr} }

.st{position:relative;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14)}
/* El numero lo pone el CSS con un contador: si se agrega o se mueve un
   paso, la numeracion se recalcula sola y no hay que renumerar a mano */
.st::before{
  counter-increment:st;content:counter(st,decimal-leading-zero);
  position:absolute;top:-.72rem;left:0;
  font-family:var(--display);font-weight:800;font-size:.68rem;letter-spacing:.12em;
  color:var(--yellow);background:var(--black);padding-right:.7rem;
}
.st h3{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.015em;margin-bottom:.6rem}
.st p{font-weight:200;font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.58)}

.clock{
  margin-top:clamp(2.2rem,5vh,3.4rem);
  display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.2rem);flex-wrap:wrap;
  padding:clamp(1.4rem,3vw,2rem);
  border:1px solid rgba(41,210,100,.25);border-radius:1rem;
  background:linear-gradient(155deg,rgba(41,210,100,.05),rgba(41,210,100,.008));
}
.clock b{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.4rem,5.5vw,3.8rem);line-height:1;letter-spacing:-.04em;
  color:var(--green);font-variant-numeric:tabular-nums;flex:none;
}
.clock div{min-width:0}
.clock h4{font-family:var(--display);font-weight:600;font-size:1.05rem;margin-bottom:.35rem}
.clock p{font-weight:200;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.58);max-width:60ch}


/* ══════════════════ 15 · OBJECIONES ══════════════════ */

.faq .qs{max-width:56.25rem;margin:0 auto}
.q{border-bottom:1px solid rgba(255,255,255,.1)}
.q:first-child{border-top:1px solid rgba(255,255,255,.1)}
.qbtn{
  width:100%;background:none;border:0;cursor:pointer;color:inherit;
  display:flex;align-items:center;gap:1.2rem;
  padding:clamp(1.1rem,2.4vh,1.6rem) 0;text-align:left;
  transition:padding-left .4s cubic-bezier(.16,1,.3,1);
}
.q:hover .qbtn{padding-left:.5rem}
.qbtn .qt{
  flex:1;font-family:var(--display);font-weight:600;
  font-size:clamp(1rem,1.8vw,1.25rem);line-height:1.25;letter-spacing:-.015em;
  color:rgba(255,255,255,.82);transition:color .4s ease;
}
.q:hover .qt,.q.open .qt{color:var(--white)}
.qbtn .plus{position:relative;width:0.875rem;height:0.875rem;flex:none;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.qbtn .plus::before,.qbtn .plus::after{
  content:'';position:absolute;left:0;top:0.4062rem;width:0.875rem;height:1px;
  background:rgba(255,255,255,.45);transition:background .4s ease;
}
.qbtn .plus::after{transform:rotate(90deg)}
.q.open .plus{transform:rotate(135deg)}
.q.open .plus::before,.q.open .plus::after{background:var(--yellow)}
.qbody{overflow:hidden;height:0}
.qbody .in{padding:0 0 1.6rem;max-width:70ch}
.qbody p{font-weight:200;font-size:.96rem;line-height:1.7;color:rgba(255,255,255,.62)}
.qbody p + p{margin-top:.9rem}
.qbody b{color:var(--white);font-weight:500}


/* ══════════════════ 16 · EL FORMULARIO ══════════════════
   Cuatro campos y la casilla. Los datos de 2026: tres campos convierten
   al 10.1%, cinco al 7.8%, nueve al 3.6%. Cada campo de mas cuesta.

   No se pide presupuesto ni plazos: eso califica, y calificar en el
   primer contacto espanta. La calificacion ocurre en la llamada. */

.reserve{position:relative;background:var(--black);border-top:1px solid rgba(255,255,255,.1);overflow:hidden}
.reserve .glowb{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(56.25rem,100%);height:25rem;pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 50% 0%,rgba(255,198,0,.08),transparent 70%);
}
.reserve .wrap{position:relative;z-index:1}

.rgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(21.25rem,44%);gap:clamp(2.5rem,6vw,5rem);align-items:start}
@media (max-width:900px){ .rgrid{grid-template-columns:1fr;gap:2.5rem} }

.rcopy .big{font-size:clamp(1.9rem,4.4vw,3.4rem);max-width:16ch;margin-bottom:1.3rem}
.rcopy .lede{margin-bottom:2rem}

.rlist{display:flex;flex-direction:column;gap:.85rem}
.rlist li{
  list-style:none;position:relative;padding-left:1.5rem;
  font-weight:200;font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.7);
}
.rlist li::before{content:'';position:absolute;left:0;top:.62em;width:.7rem;height:1px;background:var(--yellow)}
.rlist b{color:var(--white);font-weight:500}

.pays{
  margin-top:2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.09);
  font-size:.78rem;font-weight:200;line-height:1.6;color:rgba(255,255,255,.42);
}
.pays b{color:rgba(255,255,255,.68);font-weight:500}

.form{
  border:1px solid rgba(255,198,0,.24);border-radius:1.125rem;
  padding:clamp(1.6rem,3.4vw,2.4rem);
  background:linear-gradient(155deg,rgba(255,198,0,.05),rgba(255,255,255,.01));
}
.form > h3{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;margin-bottom:.5rem}
.form .sub{font-size:.86rem;font-weight:200;line-height:1.5;color:rgba(255,255,255,.55);margin-bottom:1.7rem}

.fld{display:flex;flex-direction:column;margin-bottom:1rem}
.fld label{
  font-family:var(--display);font-weight:600;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:.5rem;
}
.fld label .req{color:var(--yellow);margin-left:.25em}
.fld label .opt{color:rgba(255,255,255,.26);letter-spacing:.1em;margin-left:.6em}
.fld input{
  width:100%;font-family:var(--body);font-weight:300;font-size:.94rem;
  color:var(--white);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);border-radius:0.375rem;
  /* 48px minimos: es lo que Google recomienda para que un dedo acierte */
  padding:.95rem 1.05rem;min-height:3rem;
  transition:border-color .35s ease,background .35s ease;
}
.fld input::placeholder{color:rgba(255,255,255,.3)}
.fld input:focus{outline:none;border-color:var(--yellow);background:rgba(255,255,255,.06)}

.consent{display:flex;align-items:flex-start;gap:.7rem;margin:1.2rem 0 1.5rem;cursor:pointer}
/* El input se esconde en su sitio y NO con display:none, que lo sacaria
   del orden de tabulacion */
.consent input{position:absolute;opacity:0;width:0;height:0}
.consent i{
  display:block;flex:none;width:1.125rem;height:1.125rem;margin-top:.1rem;
  border:1px solid rgba(255,255,255,.3);border-radius:0.25rem;
  transition:background .3s ease,border-color .3s ease;
}
.consent input:checked + i{background:var(--yellow);border-color:var(--yellow)}
.consent input:checked + i::after{
  content:'';display:block;width:0.3125rem;height:0.5625rem;margin:1px auto 0;
  border:solid var(--black);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.consent span{font-size:.76rem;font-weight:300;line-height:1.5;color:rgba(255,255,255,.5)}

.form .book{width:100%;text-align:center;font-size:1.02rem;padding:1.15rem 2rem}
.form .fine{margin-top:1rem;font-size:.72rem;font-weight:200;line-height:1.5;color:rgba(255,255,255,.34);text-align:center}

.done{display:none;text-align:center;padding:2rem 0}
.form.sent .done{display:block}
.form.sent form,.form.sent > h3,.form.sent .sub{display:none}
.done .ok{
  width:3.375rem;height:3.375rem;border-radius:50%;margin:0 auto 1.2rem;
  display:grid;place-items:center;
  background:rgba(41,210,100,.12);border:1px solid rgba(41,210,100,.4);
}
.done .ok svg{width:1.5rem;height:1.5rem;stroke:var(--green);stroke-width:2.4;fill:none}
.done h3{display:block;font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--green);margin-bottom:.7rem}
.done p{font-weight:200;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.6);max-width:40ch;margin:0 auto}


/* ══════════════════ 17 · LA LETRA CLARA ══════════════════
   Va al FINAL a proposito: es lo aburrido y no debe estorbar a quien
   llega con ganas. Pero va, y completo.

   La razon no es solo legal. Un cliente que descubre en el mes tres que
   sacar su sitio cuesta $600 se siente engañado aunque el cobro sea
   justo, y ese cliente se va y lo cuenta. Dicho aqui, el mismo cobro se
   lee como una condicion que acepto.

   Se ve mas apagado que el resto, no escondido: quien lo busca lo
   encuentra, quien no, no tropieza con el. */

.fineprint{background:#050505;border-top:1px solid rgba(255,255,255,.08);padding:clamp(3rem,7vh,5rem) 0}
.fineprint .head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:clamp(1.8rem,4vh,2.6rem)}
.fineprint h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.2rem,2.2vw,1.6rem);letter-spacing:-.02em;
  color:rgba(255,255,255,.86);
}
.fineprint .head span{font-size:.74rem;font-weight:200;color:rgba(255,255,255,.34)}
.fineprint .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,3vw,2.6rem);max-width:68.75rem}
@media (max-width:800px){ .fineprint .grid{grid-template-columns:1fr} }

.fp h3{
  font-family:var(--display);font-weight:600;font-size:.92rem;
  color:rgba(255,255,255,.8);margin-bottom:.5rem;
  display:flex;align-items:center;gap:.55rem;
}
.fp h3::before{content:'';width:.5rem;height:1px;background:rgba(255,198,0,.7);flex:none}
.fp p{font-weight:200;font-size:.85rem;line-height:1.65;color:rgba(255,255,255,.48)}
.fp b{color:rgba(255,255,255,.72);font-weight:500}


/* ══════════════════ 18 · BARRA FIJA EN TELEFONO ══════════════════
   En un telefono el llamado se pierde al bajar. Esta barra lo mantiene
   siempre a un dedo. Aparece pasado el hero, para no competir con el
   llamado principal cuando todavia se esta viendo. */

.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:none;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem var(--pad);
  /* Sin esto queda bajo la barra de gestos del iPhone */
  padding-bottom:calc(.8rem + env(safe-area-inset-bottom, 0px));
  background:rgba(10,10,10,.94);
  -webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);
  border-top:1px solid rgba(255,255,255,.1);
  transform:translateY(110%);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.sticky.up{transform:none}
.sticky .p{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.sticky .p b{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--yellow);letter-spacing:-.03em}
.sticky .p span{font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-top:.2rem}
.sticky .book{padding:.9rem 1.5rem;font-size:.86rem;white-space:nowrap}
@media (max-width:900px){ .sticky{display:flex} }


/* ══════════════════ 19 · PIE REDUCIDO ══════════════════ */

.foot{padding:clamp(2.5rem,6vh,4rem) 0 clamp(6rem,10vh,4rem);border-top:1px solid rgba(255,255,255,.1)}
.foot .row{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.foot .bd{height:clamp(1.5rem,2.6vw,2rem);width:auto;display:block;opacity:.75}
.foot .set{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot a{font-size:.76rem;font-weight:300;text-decoration:none;color:rgba(255,255,255,.42);transition:color .3s ease}
.foot a:hover{color:var(--yellow)}
.foot .cr{margin-top:1.6rem;font-size:.7rem;font-weight:300;color:rgba(255,255,255,.28)}


/* ══════════════════ 20 · PANTALLA ANGOSTA ══════════════════
   Al final a proposito: una media query no suma especificidad, asi que
   todo lo que pise reglas de arriba vive aqui abajo. */

@media (max-width:620px){
  .hero{padding-top:6rem}
  .pricebox{padding:1.4rem 1.6rem;width:100%}
  .acts,.cta .row{flex-direction:column;align-items:stretch;width:100%;gap:1rem}
  .acts .book,.cta .row .book{width:100%;text-align:center}
  .acts .ghost,.cta .row .ghost{align-self:center}
  .hero .figs{gap:1.4rem}
  .clock{flex-direction:column;align-items:flex-start;gap:.8rem}
  .cta{padding:1.8rem 1.2rem}
}

@media (prefers-reduced-motion:reduce){
  .eyebrow span{animation:none;color:var(--white)}
  .book.pulse,.lockline i,.pricebox::after,.fl,
  .feat .art .drift,.feat .art .drift2,.live .art .pulse-dot{animation:none}
  .ln{opacity:1 !important;transform:none !important}
  *{transition-duration:.001ms !important}
}



/* ══════════════════ 21 · LAS DOS CINTAS DE PRUEBA ══════════════════
   Portado de adnius-home-v59.html y de js/home.js, bloque 12a.

   Son DOS y no una a proposito. La de personas prueba que hay gente
   real detras, con nombre y ciudad. La de marcas prueba que hay
   empresas. Juntas pesan mas que cualquiera de las dos sola: una
   responde "quien", la otra responde "cuantos".

   EL MOTOR ES EL DEL HOME, con scrollLeft y no con transform. Con
   scrollLeft el arrastre es cambiar un numero y el navegador pone la
   inercia; con transform habria que escribir a mano toda esa mecanica.

   SIN ENLACES, a diferencia del home. Alli las tarjetas llevan al
   perfil de cada cliente; aqui eso seria abrir una salida en una
   pagina de campaña, que es justo lo que no se hace. El arrastre si se
   conserva: sirve para mirar las tarjetas, no solo para hacer clic. */

/* --- El contenedor que desborda ---
   El ancho es lo que hace que esto funcione. La .mqv tiene que medir la
   pantalla y no su contenido: si mide lo que lleva dentro, no hay
   desborde, scrollLeft se queda en cero y la cinta no rueda. */
.mqv{
  width:100%;max-width:100vw;flex:0 0 100%;min-width:0;
  overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  /* Sin esto, al llegar al borde el gesto se lo lleva la pagina y en un
     trackpad se dispara el gesto de atras del navegador. */
  overscroll-behavior-x:contain;

  /* El aire de arriba y de abajo es para que la tarjeta pueda crecer al
     pasar el mouse. No se puede usar overflow-y:visible: en CSS, si un
     eje es auto o scroll, el otro no puede ser visible y el navegador
     lo convierte en auto por su cuenta. La unica salida es dejar sitio
     de sobra y recuperarlo con margenes negativos. */
  padding:0.875rem 0;
  margin:-0.875rem 0;

  cursor:grab;
}
.mqv::-webkit-scrollbar{display:none}
.mqv.grab{cursor:grabbing}

/* Mientras se arrastra, el navegador no puede seleccionar el texto de
   las tarjetas ni arrancar su propio arrastre de imagenes. */
.mqv.grab,.mqv.grab *{user-select:none;-webkit-user-select:none}
.mqv img{-webkit-user-drag:none;user-drag:none}

/* Los 14px de arriba y de abajo ya estan compensados por el margen
   negativo, asi que aqui solo va la separacion real entre cintas. */
.mqv + .mqv{margin-top:calc(.9rem - 1.75rem)}

/* --- Las cintas ---
   width:max-content es lo que deja que la fila crezca todo lo que
   necesite. En un contenedor flex en columna el estirado por defecto la
   aplastaria al ancho de la seccion, asi que lleva align-self. */
.row-mq{
  display:flex;gap:.85rem;
  width:max-content;align-self:flex-start;
}

.card{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:.85rem;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  border-radius:6.25rem;padding:.6rem 1.3rem .6rem .6rem;
  white-space:nowrap;color:var(--white);
  /* Sin transition en transform: de eso se encarga GSAP con el efecto
     magnetico. Si el CSS tambien lo anima, pelean. */
  transition:background .45s ease,border-color .45s ease,box-shadow .45s ease;
  will-change:transform;
}
.card:hover{
  z-index:5;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,198,0,.55);
  box-shadow:0 0.875rem 2.75rem rgba(0,0,0,.6),0 0 0 1px rgba(255,198,0,.12);
}
.card img{
  width:2.75rem;height:2.75rem;border-radius:50%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);flex:none;background:#141414;display:block;
  transition:filter .55s cubic-bezier(.16,1,.3,1);
}
.card:hover img{filter:none}
.card b{display:block;font-family:var(--display);font-weight:600;font-size:.9rem}
.card span{
  display:block;font-family:var(--body);font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-top:.14rem;
  transition:color .4s ease;
}
.card:hover span{color:rgba(255,198,0,.75)}

/* El circulo de iniciales cuando no hay logo. Mide lo mismo que la foto
   para que las dos cintas queden a la misma altura. */
.card .mono{
  width:2.75rem;height:2.75rem;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  font-family:var(--display);font-weight:800;font-size:.78rem;
  color:rgba(255,255,255,.5);
  transition:color .5s ease,background .5s ease,border-color .5s ease;
}
.card:hover .mono{color:var(--yellow);background:rgba(255,198,0,.1);border-color:rgba(255,198,0,.35)}

/* --- La del centro ---
   Sin cursor no hay hover, asi que el color lo decide la posicion: lo
   que pasa por el centro se enciende. En escritorio tambien corre,
   porque la cinta se mueve sola y la del centro va guiando la vista. */
.card.mid{border-color:rgba(255,198,0,.32);background:rgba(255,255,255,.045)}
.card.mid img{filter:none}

@media (max-width:900px){
  /* En telefono no hay puntero, asi que la mano sobra */
  .mqv{cursor:auto}
}

/* La cinta de sitios usa el mismo motor, asi que hereda el visor */
.mq{display:flex;gap:1rem;width:max-content;align-self:flex-start}


/* ══════════════════ 22 · QUIENES SOMOS ══════════════════
   Va DESPUES de la prueba y no antes: primero se ve el trabajo, y solo
   entonces interesa quien lo hizo.

   Se dice Caracas de frente. Esconderlo es peor que decirlo: si el
   cliente lo descubre despues de pagar, se rompe la confianza justo
   cuando ya esta en una mensualidad. Dicho aqui, con doce años y
   clientes en San Diego, Austin y Atlanta, deja de ser una objecion. */

.who{
  background:var(--black);
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  overflow:hidden;position:relative;
}
.who::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(100deg,transparent 38%,rgba(255,198,0,.045) 50%,transparent 62%);
  background-size:280% 100%;background-position:130% 0;
  transition:background-position 1.5s cubic-bezier(.16,1,.3,1);
}
.who:hover::after{background-position:-50% 0}
.who .wrap{position:relative;z-index:1}

.who .grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(17.5rem,.92fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
@media (max-width:900px){ .who .grid{grid-template-columns:1fr;gap:2.6rem} }

.who h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,3.8vw,3rem);line-height:1.05;letter-spacing:-.035em;
  margin-bottom:1.5rem;max-width:18ch;
}
.who h2 em{font-style:normal;color:var(--yellow)}
.who .wtext{font-weight:200;font-size:clamp(.95rem,1.3vw,1.08rem);line-height:1.62;color:rgba(255,255,255,.62);max-width:50ch}
.who .wtext + .wtext{margin-top:1rem}
.who .wtext b{color:rgba(255,255,255,.88);font-weight:500}

/* La firma de la marca. Es la frase que cierra el pie del sitio
   venezolano y funciona igual de bien aqui. */
.who .sig{
  margin-top:1.8rem;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--display);font-weight:600;
  font-size:clamp(1rem,1.7vw,1.22rem);line-height:1.3;letter-spacing:-.02em;
  color:rgba(255,255,255,.75);max-width:34ch;
}
.who .sig em{font-style:normal;color:var(--yellow)}

/* Los cuatro datos. El borde va en el li y el flex en su contenido:
   son dos trabajos distintos y cada uno hace el suyo. */
.who .facts{display:flex;flex-direction:column;list-style:none}
.who .fact{
  display:flex;align-items:baseline;gap:1.2rem;
  padding:1.05rem 0;
  border-top:1px solid rgba(255,255,255,.09);
  transition:padding-left .45s cubic-bezier(.16,1,.3,1);
}
.who .fact:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
.who .fact:hover{padding-left:.5rem}
.who .fact b{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,3vw,2.3rem);line-height:1;letter-spacing:-.035em;
  color:var(--yellow);font-variant-numeric:tabular-nums;
  min-width:3.2ch;flex:none;
}
.who .fact span{font-weight:200;font-size:clamp(.85rem,1.15vw,.98rem);line-height:1.45;color:rgba(255,255,255,.5);transition:color .4s ease}
.who .fact span i{font-style:normal;display:block;color:rgba(255,255,255,.82);font-weight:400}
.who .fact:hover span{color:rgba(255,255,255,.7)}


/* ══════════════════ 23 · REMATES DE PANTALLA ANGOSTA ══════════════════
   Revisados uno por uno contra los cortes reales, no a ojo.

   Los tres anchos que importan: 900 donde caen las rejillas, 620 donde
   los botones pasan a ocupar la linea entera, y 380 que es el telefono
   pequeño de verdad, donde los clamp con minimo alto empiezan a
   desbordar.

   Van al final por lo de siempre: una media query no suma
   especificidad, asi que todo lo que pise reglas de arriba vive aqui
   abajo. */

@media (max-width:620px){
  /* El titular del hero baja su minimo: a 2.3rem la palabra "complete"
     no cabe en 320px y se sale de la caja. */
  .hero .big{font-size:clamp(1.9rem,8vw,5.2rem)}
  .hero .lede{font-size:.98rem}

  /* El precio del llamado tambien: con "$60 a month" en una linea, el
     minimo de 2.8rem desbordaba. */
  .cta .num{font-size:clamp(2.2rem,11vw,4.4rem)}
  .cta .lead{font-size:1.05rem}

  .pricebox .fig{font-size:clamp(2.9rem,15vw,6rem)}

  /* La cinta de tarjetas se achica: a 44px de foto y con el nombre
     completo, dos tarjetas no entran en pantalla y la cinta se lee
     como una sola pieza gigante. */
  .card{padding:.5rem 1.1rem .5rem .5rem;gap:.7rem}
  .card img,.card .mono{width:2.375rem;height:2.375rem}
  .card b{font-size:.82rem}
  .card span{font-size:.6rem}

  .who .fact{gap:.9rem}
  .fineprint .head{gap:.4rem}
}

@media (max-width:380px){
  /* La barra fija se aprieta: "Locked when you reserve" mas el boton no
     caben en 320px sin partirse. Se queda el precio y el boton. */
  .sticky .p span{display:none}
  .sticky .book{padding:.85rem 1.15rem;font-size:.8rem}
  .sticky{gap:.7rem}

  .hero .figs{gap:1rem}
  .hero .figs b{font-size:1.25rem}
  .hero .figs span{font-size:.52rem;letter-spacing:.12em}

  .pricebox{padding:1.2rem 1rem}
  .pricebox .then{font-size:.76rem}
  .cta{padding:1.5rem 1rem}
  .sec{padding:3rem 0}
}

/* Ninguna cinta debe poder ensanchar la pagina. El overflow de la
   seccion recorta, pero si algun contenedor intermedio se queda con el
   ancho de su contenido, la barra horizontal aparece igual. */
.rows,.mqv,.proof,.hero{max-width:100vw}



/* ══════════════════ 24 · LOS FLANCOS DEL LLAMADO ══════════════════
   El problema que resuelve: la caja del llamado ocupa el ancho entero
   y el contenido es una columna centrada de unos 500px. A los lados
   quedaban 400px de negro puro por banda, y a esa anchura el vacio no
   se lee como aire, se lee como que falta algo.

   CORREGIDO RESPECTO A LA v7. Antes eran seis fichas pequeñas
   repartidas por los lados y el efecto era de estrellas en el cielo:
   mucho elemento suelto y ninguna figura. Ahora son CUATRO dibujos
   grandes, dos por banda, montados uno encima del otro para que cada
   par se lea como una sola composicion.

   TRES REGLAS QUE MANDAN AQUI:

     1. GRANDES Y APAGADOS. El de atras mide hasta 300px y va casi
        invisible; el de adelante mide la mitad y es el unico con algo
        de color. Un dibujo grande y tenue es fondo. Uno pequeño y
        brillante es ruido.
     2. SOLAPADOS DE VERDAD. El de adelante cae sobre la esquina del de
        atras, no al lado. Si no se tocan son dos iconos sueltos, que
        es justo lo que se corrigio.
     3. SIN TEXTO. Copy en los flancos competiria con el precio, que es
        el unico mensaje que esta caja tiene permitido dar.

   DOS COMPOSICIONES QUE SE ALTERNAN, una caja si y una caja no:
     A · la pagina funcionando: navegador con el cursor haciendo clic,
         y el telefono con el rayo de la velocidad
     B · el negocio creciendo: la grafica con el cohete, y el escudo
         con la estrella

   Seis cajas seguidas con el mismo dibujo se leen como una plantilla.
   Alternadas, cada llamado se siente escrito para su seccion.

   NADA DE ESTO ES INTERACTIVO. La capa entera lleva pointer-events
   none: el visitante tiene que poder tirarle el mouse al boton sin que
   un adorno se lo intercepte. */

.cta .cdeco{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;border-radius:inherit;
}

/* El resplandor sale de detras del precio y se apaga hacia afuera.
   Convierte la oscuridad de los bordes en profundidad intencional en
   vez de en hueco. */
.cta .cglow{
  position:absolute;left:50%;top:50%;
  width:min(51.25rem,80%);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,198,0,.13),rgba(255,198,0,.035) 44%,transparent 70%);
}

/* --- Los dibujos ---
   DOS CAPAS Y CADA UNA CON SU PROPIEDAD. El div de afuera lleva el
   paralaje en transform, y el <i> de adentro lleva el giro en rotate y
   la flotacion en translate. Son propiedades distintas justamente para
   que ninguna borre a la otra: escritas las tres en un solo transform,
   la ultima gana y las demas desaparecen. */
.cta .cbig{
  position:absolute;width:var(--w);opacity:0;
  will-change:transform,opacity;
  transition:opacity 1.4s cubic-bezier(.16,1,.3,1);
}
.cta .cdeco.on .cbig{opacity:var(--o)}

.cta .cbig i{
  display:block;rotate:var(--r);
  animation:cbFloat var(--d) ease-in-out infinite alternate;
  animation-delay:var(--dl);
}
.cta .cbig svg{display:block;width:100%;height:auto;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  /* El trazo se mantiene fino aunque el dibujo mida 300px: sin esto la
     escala lo engorda y el contorno pasa de grabado a marcador. */
  vector-effect:non-scaling-stroke;
  transition:stroke .9s ease;
}

/* El de atras es contorno blanco casi apagado. El de adelante es el
   unico amarillo, y es lo que hace que el par tenga un punto de
   atencion en vez de dos manchas iguales. */
.cta .cbig.back svg {stroke:rgba(255,255,255,.6);stroke-width:1.1}
.cta .cbig.front svg{stroke:var(--yellow);stroke-width:1.4}

.cta:hover .cbig.back svg {stroke:rgba(255,255,255,.85)}
.cta:hover .cbig.front svg{stroke:var(--yellow)}
.cta .cdeco.on .cbig.back {transition:opacity 1.4s cubic-bezier(.16,1,.3,1)}
.cta:hover .cdeco.on .cbig{opacity:calc(var(--o) * 1.45)}

/* Poco recorrido y muy lento. Un dibujo de 300px moviendose como uno
   de 40px se ve como un globo, no como una capa de fondo. */
@keyframes cbFloat{
  from{translate:0 -7px}
  to  {translate:0 7px}
}

/* Bajo 1080px los flancos ya no existen: el contenido ocupa casi todo
   el ancho y los dibujos se le meterian encima al precio. */
@media (max-width:1080px){
  .cta .cbig{display:none}
}
@media (max-width:620px){
  .cta .cglow{width:120%}
}

@media (prefers-reduced-motion:reduce){
  .cta .cbig i{animation:none}
}



/* ══════════════════ 25 · EL SEO AVANZADO ══════════════════
   Dos llamados a un servicio OPCIONAL de $300 al mes que vive en su
   propia landing. Los dos van ABAJO, despues de las condiciones y del
   acompañamiento. Arriba competirian con los $499 y el lector se
   pondria a sumar antes de haber decidido nada.

   POR QUE NO USAN LA CAJA .cta AMARILLA. En esta pagina esa caja
   significa una sola cosa, que son los $499. Prestarsela a otro
   producto le quita fuerza al principal. Estas dos secciones tienen
   lenguaje visual propio: fondo distinto, borde fino y el amarillo
   solo en los acentos. Resaltan, pero se leen como otra cosa y no como
   una segunda oferta compitiendo con la primera.

   LOS DOS ENLACES ABREN EN PESTAÑA NUEVA. Es una pagina de campaña:
   quien se va, no vuelve. */

/* --- Llamado grande, despues del acompañamiento --- */
.adv{
  position:relative;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(ellipse 70% 120% at 18% 50%,rgba(255,198,0,.07),transparent 60%),
    var(--black);
}
/* El barrido de luz, el mismo gesto del resto de la pagina */
.adv::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(100deg,transparent 38%,rgba(255,198,0,.05) 50%,transparent 62%);
  background-size:280% 100%;background-position:130% 0;
  transition:background-position 1.5s cubic-bezier(.16,1,.3,1);
}
.adv:hover::after{background-position:-50% 0}
.adv .wrap{position:relative;z-index:1}

.adv .agrid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(18.75rem,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
@media (max-width:900px){ .adv .agrid{grid-template-columns:1fr;gap:2.4rem} }

/* EL TITULO DEL SERVICIO ES EL PROTAGONISTA. Va en el tamaño de los
   titulares grandes de la pagina y es lo primero que se ve, no una
   linea de apoyo dentro de un parrafo. */
.adv h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:.94;letter-spacing:-.05em;
  margin:1rem 0 1.1rem;
}
.adv h2 em{font-style:normal;color:var(--yellow)}

.adv .sub{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,2vw,1.45rem);line-height:1.2;letter-spacing:-.02em;
  color:rgba(255,255,255,.9);max-width:26ch;
}
.adv .body{
  font-weight:200;font-size:clamp(.95rem,1.3vw,1.06rem);line-height:1.62;
  color:rgba(255,255,255,.6);max-width:52ch;margin-top:1.1rem;
}

/* Las tres pruebas. Dan sustancia sin explicar el servicio completo,
   que es trabajo de la otra landing. */
.adv .pts{list-style:none;display:flex;flex-direction:column;margin-bottom:1.8rem}
.adv .pt{
  display:flex;align-items:flex-start;gap:1rem;padding:1.05rem 0;
  border-top:1px solid rgba(255,255,255,.09);
  transition:padding-left .45s cubic-bezier(.16,1,.3,1);
}
.adv .pt:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
.adv .pt:hover{padding-left:.5rem}
.adv .pt svg{
  width:1.375rem;height:1.375rem;flex:none;margin-top:.15rem;fill:none;
  stroke:var(--yellow);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.adv .pt span{font-weight:300;font-size:clamp(.9rem,1.2vw,1rem);line-height:1.45;color:rgba(255,255,255,.72)}

/* El precio NO va en caja. Es una linea, para que no compita con la
   caja de los $499 que el lector ya vio seis veces. */
.adv .price{
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1;letter-spacing:-.04em;
  color:var(--yellow);margin-bottom:1.5rem;
}
.adv .price small{
  font-family:var(--body);font-size:.8rem;font-weight:300;letter-spacing:.02em;
  color:rgba(255,255,255,.5);
}

/* --- Franja delgada, justo antes del formulario ---
   Aqui el trabajo no es que decida, es que marque la casilla. Por eso
   no lleva precio ni titular grande: estorbarian. */
.advbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.2rem,3vw,2.5rem);flex-wrap:wrap;
  padding:clamp(1.4rem,2.5vw,1.9rem) clamp(1.4rem,3vw,2.2rem);
  border:1px solid rgba(255,198,0,.2);border-radius:1rem;
  background:linear-gradient(120deg,rgba(255,198,0,.05),rgba(255,198,0,.008));
  transition:border-color .6s ease;
}
.advbar:hover{border-color:rgba(255,198,0,.4)}
.advbar .txt{flex:1 1 21.25rem;min-width:0}
.advbar b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.35rem,2.7vw,1.95rem);line-height:1.18;letter-spacing:-.03em;
  color:var(--white);margin-bottom:.7rem;
}
.advbar b em{font-style:normal;color:var(--yellow)}
.advbar p{font-weight:200;font-size:clamp(.87rem,1.15vw,.97rem);line-height:1.55;color:rgba(255,255,255,.58);max-width:56ch}
.advbar .ghost{flex:none}

@media (max-width:620px){
  .advbar{flex-direction:column;align-items:flex-start}

  /* AQUI ESTABA EL HUECO NEGRO. En columna, el flex-basis de 340px deja
     de ser ancho y pasa a ser ALTO, y encima flex-grow lo estiraba mas.
     La caja media 340px con dos lineas de texto adentro. */
  .advbar .txt{flex:0 0 auto;width:100%}

  .advbar .ghost{align-self:stretch;text-align:center}
}

/* --- La casilla opcional del formulario ---
   Va ENCIMA de la del consentimiento y sin asterisco: es interes, no
   permiso. Hereda toda la mecanica visual de .consent y solo cambia el
   color del texto, para que se vea que es la secundaria de las dos. */
.form .consent.opt span{color:rgba(255,255,255,.62)}
.form .consent.opt{margin-bottom:-.4rem}



/* ══════════════════ 26 · LOS TITULARES CONTRA DIVI ══════════════════
   Divi le pone color:#333 a todos los titulares. En el prototipo eso no
   existia porque corria en una pagina en blanco donde nadie mas los
   tocaba, asi que la hoja los dejaba heredar el blanco del body.

   Montada dentro de Divi, ese #333 gana y los titulares salen gris
   oscuro sobre negro. Medido en consola: rgb(51,51,51) en el h3 de
   "Designed around your brand", con opacidad 1 en el elemento y en sus
   cinco padres. No era la animacion ni un velo: era el color heredado.

   POR QUE :where() Y NO UNA LISTA NORMAL.
   :where() vale CERO en especificidad, asi que la regla entera pesa lo
   que pesa .adn-promo sola: 0,0,1,0.

     - Le gana a Divi, que es 0,0,0,1
     - Pierde contra las reglas propias de esta hoja, que son 0,0,1,1
       (.fineprint h2, .fp h3, .done h3 y las demas que si declaran
       color)

   Escrito como lista normal, esta regla iria de ultima en el archivo y
   les pisaria el color a esas cuatro. Con :where() conviven sin que
   importe el orden.

   Los guiones amarillos de .inc h4::before y .fp h3::before no se ven
   afectados: usan background:var(--yellow), no heredan el color.

   Dos selectores por seguridad: .adn-promo lo pone el body_class de
   functions.php, y .et_pb_code_inner es el contenedor que Divi genera
   alrededor del modulo. Si algun dia se cae uno, el otro sostiene. */

.adn-promo      :where(h1,h2,h3,h4,h5,h6),
.et_pb_code_inner :where(h1,h2,h3,h4,h5,h6){
  color:var(--white);
}



/* ══════════════════ LOS CAMPOS CONTRA DIVI ══════════════════
   Mismo caso que los titulares del bloque anterior: Divi le pone su
   color a los input, a los textarea y a los select, y le gana al
   color:var(--white) que este archivo ya declara mas arriba.
   Resultado: lo que la persona escribe sale gris oscuro sobre negro y
   casi no se lee mientras esta escribiendo.

   Aqui NO se usa :where(), al reves que en los titulares. Alli hacia
   falta PERDER contra las reglas propias del archivo; aqui hace falta
   GANARLE a Divi y no hay ninguna regla propia posterior con la que
   convivir, asi que va con especificidad normal y se resuelve por
   orden de aparicion, al ser lo ultimo del archivo.

   El autocompletado del navegador va aparte: Chrome pinta el campo con
   su propio amarillo del sistema y eso no se cambia con background.
   La sombra interior gigante es el truco de siempre para taparlo. */

.adn-promo .fld input,
.adn-promo .fld textarea,
.adn-promo .fld select,
.et_pb_code_inner .fld input,
.et_pb_code_inner .fld textarea,
.et_pb_code_inner .fld select{
  color:var(--white);
  -webkit-text-fill-color:var(--white);
}

.adn-promo .fld input::placeholder,
.adn-promo .fld textarea::placeholder,
.et_pb_code_inner .fld input::placeholder,
.et_pb_code_inner .fld textarea::placeholder{
  color:rgba(255,255,255,.3);
  -webkit-text-fill-color:rgba(255,255,255,.3);
}

.adn-promo .fld input:-webkit-autofill,
.et_pb_code_inner .fld input:-webkit-autofill{
  -webkit-text-fill-color:var(--white);
  -webkit-box-shadow:0 0 0 1000px #0d0d0d inset;
  caret-color:var(--white);
}

/* ══════════════════ EL LOGO LLEVA AL INICIO ══════════════════
   DIVERGENCIA DECIDIDA DEL PROTOTIPO. NO REVERTIR.

   En el prototipo el logo es un <img> suelto, sin enlace: se le da
   clic y no pasa nada, ni arriba ni en el pie. En esta pagina los dos
   logos van envueltos en un <a class="home" href="/">.

   Estas reglas son para que ese enlace no cambie nada de como se ve.
   line-height:0 quita el espacio de linea base que un <a> mete debajo
   de la imagen; sin eso el header crece unos pixeles y la barra deja
   de coincidir con la del resto del sitio.

   Va colgado de .et_pb_code_inner a proposito, que es el envoltorio
   del modulo Code de Divi: asi el mismo bloque sirve igual en todas
   las landings sin depender de la clase del body. */

.et_pb_code_inner .hdr .home,
.et_pb_code_inner .foot .home{
  display:block;
  line-height:0;
  flex:none;
  border:0;
}

/* El pie pinta todos sus enlaces de gris y los amarillea al pasar el
   mouse. Al logo no le toca eso: es una imagen, no un texto. Lo que
   recibe es una subida leve de opacidad, que es la señal de que se
   puede pulsar. */
.et_pb_code_inner .hdr .home img,
.et_pb_code_inner .foot .home img{
  transition:opacity .35s ease;
}
.et_pb_code_inner .hdr .home:hover img{
  opacity:.82;
}
.et_pb_code_inner .foot .home:hover img{
  opacity:1;
}