/* ══════════════════════════════════════════════════════════════
   ADNIUS · BUSINESS EMAILS · HOJA DE ESTILOS · v2 PANTALLAS GRANDES (27/09/2026)
   v2: 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 hero y el logo, igual que en
   SEO v14. Se quedan en px las rayas de 1px y 2px, las pildoras de
   999px, los breakpoints y lo que va en @keyframes.
   Pagina: /business-emails/   ·   De adnius-business-emails-v6.html

   Dos partes, y la division importa:

   ARRIBA, el prototipo tal cual. No se toca. Si algo se ve distinto
   a como se aprobo, el problema esta abajo y no aqui.

   ABAJO, desde el separador doble, las correcciones que hacen falta
   por estar dentro de Divi. Cada una dice contra que pelea.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   ADNIUS · BUSINESS EMAILS · VERSION 6

   EL LENGUAJE VISUAL, Y POR QUE NO SE PARECE A LAS OTRAS DOS.

   La landing de la promo web se sostiene en FOTOGRAFIA.
   La de SEO avanzado en INTERFAZ PLANA: barras de busqueda, listas de
   resultados, hojas de reporte.

   Esta va un paso mas alla: INTERFAZ CON PROFUNDIDAD. Ventanas de
   correo inclinadas, apiladas una detras de otra, con la del frente
   enfocada y las de atras desenfocadas y mas chicas. Se logra con
   transform 3D y filtros, no con una sola imagen.

   Se eligio asi por dos razones. La primera es que las tres landings
   se van a ver seguidas y no pueden sentirse la misma pagina. La
   segunda es que el correo ES una ventana: es lo que el visitante mira
   todo el dia, y reconocerla no le cuesta nada.

   CERO IMAGENES. Todo son SVG y HTML dibujados. Pesan una fraccion de
   una foto, se ven nitidos en cualquier pantalla, y nadie mas los
   tiene: una foto de banco de imagenes la puede estar usando la
   competencia esta misma semana.
   ══════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

:root{
  --black:#000;
  --ink:#0a0a0a;
  --yellow:#ffc600;
  --orange:#ff7000;
  --green:#29d264;
  --red:#ff4d4d;
  --white:#fff;

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

  --pad:clamp(1.5rem,5vw,5rem);
  --line:rgba(255,255,255,.16);
}

body{background:var(--black);color:var(--white);font-family:var(--body);overflow-x:clip}
::selection{background:var(--yellow);color:var(--black)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--yellow);outline-offset:0.25rem;border-radius:0.1875rem}


/* ══════════════════ ESTRUCTURA ══════════════════ */

.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)}

.duo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);align-items:center;
}
.duo.flip .art{order:-1}
@media (max-width:900px){
  .duo{grid-template-columns:1fr;gap:2.6rem}
  .duo .art{order:-1}
}


/* ══════════════════ TIPOGRAFIA ══════════════════ */

.big{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.9rem,4.6vw,3.6rem);
  line-height:1.03;letter-spacing:-.035em;
}
.big em{font-style:normal;color:var(--yellow)}

.lede{
  font-weight:200;font-size:clamp(1rem,1.6vw,1.3rem);
  line-height:1.55;color:rgba(255,255,255,.72);max-width:46ch;
}
.body{
  font-weight:200;font-size:clamp(.95rem,1.3vw,1.06rem);
  line-height:1.65;color:rgba(255,255,255,.72);max-width:52ch;
}
.body + .body{margin-top:1.1rem}
.body b{color:rgba(255,255,255,.9);font-weight:500}

/* El aire debajo de un titular. Va con hermano adyacente para que solo
   aparezca cuando de verdad hay algo debajo: un titular que cierra su
   bloque no arrastra espacio muerto. Y los que llevan revelado por
   lineas necesitan un poco mas, porque la ventana de recorte tiene un
   margen negativo que se come parte del hueco. */
.big + .body,.big + .lede,.big + .sub{margin-top:clamp(1.2rem,2.4vw,1.9rem)}
.big.reveal-lines + .body,
.big.reveal-lines + .lede,
.big.reveal-lines + .sub{margin-top:clamp(1.4rem,2.8vw,2.2rem)}

.tag{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--display);font-weight:600;font-size:.82rem;
  letter-spacing:.01em;color:var(--yellow);margin-bottom:1.3rem;
}
.tag::before{content:'';width:1.6rem;height:1px;background:var(--yellow);flex:none}

/* EL LIMITE DE ANCHO VA EN CADA HIJO, NO EN EL CONTENEDOR.
   La unidad ch se resuelve contra el tamaño de letra del elemento que
   la lleva. Puesta en .shead, que hereda los 16px del cuerpo, 34ch no
   son 34 caracteres del titular: son unos 270 pixeles. Un titular de
   3.6rem se partia en cinco lineas dentro de una columna estrecha,
   con media pantalla vacia al lado.

   Puesto en el h2, esos 24ch se miden con SU tamaño y dan lo que
   deberian dar: un titular de dos o tres lineas largas. */
.shead{margin-bottom:clamp(2.4rem,5vh,3.6rem)}
.shead .big{max-width:24ch}
.shead .sub,
.shead .lede{
  font-weight:200;font-size:clamp(.95rem,1.35vw,1.1rem);line-height:1.55;
  color:rgba(255,255,255,.66);max-width:52ch;
}


/* ══════════════════ BOTONES ══════════════════ */

.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:600;font-size:.92rem;
  padding:1rem 2rem;border-radius:999px;
  background:var(--yellow);color:var(--black);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 0.75rem 2.5rem rgba(255,198,0,.3)}
.btn::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.7) 50%,transparent 66%);
  background-size:260% 100%;background-position:150% 0;
  transition:background-position 1.1s cubic-bezier(.16,1,.3,1);
}
.btn:hover::after{background-position:-60% 0}

.ghost{
  position:relative;display:inline-block;
  font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.6);padding-bottom:.4rem;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)}

.acts{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}


/* ══════════════════ EL DIBUJO DE LINEA ══════════════════ */

.ink{
  stroke:var(--yellow);stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.ink .dim{stroke:rgba(255,255,255,.45)}
.ink .fill{fill:var(--yellow);stroke:none}


/* ══════════════════ LA VENTANA DE CORREO ══════════════════
   La pieza base de toda la pagina. Se usa en seis secciones, asi que
   vive aqui una sola vez. */

.win{
  position:relative;
  background:var(--ink);
  border:1px solid var(--line);border-radius:0.875rem;
  overflow:hidden;
}
.win .bar{
  display:flex;align-items:center;gap:.45rem;
  padding:.8rem 1rem;border-bottom:1px solid var(--line);
}
.win .bar i{width:0.5rem;height:0.5rem;border-radius:50%;background:rgba(255,255,255,.3)}
.win .bar span{
  flex:1;margin-left:.6rem;font-size:.66rem;font-weight:300;
  letter-spacing:.02em;color:rgba(255,255,255,.55);
}
.win .pad{padding:clamp(1rem,2.4vw,1.6rem)}

/* La fila de un campo: From, To, Subject. Es lo que hace que se lea
   como una ventana de correo y no como una caja cualquiera. */
.fld-row{
  display:flex;align-items:center;gap:.8rem;
  padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.11);
}
.fld-row .lb{
  width:4.2ch;flex:none;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.46);
}
.fld-row .vl{
  flex:1;min-width:0;font-size:clamp(.8rem,1.4vw,.95rem);font-weight:300;
  color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;
}


/* ══════════════════ CINTA SUPERIOR ══════════════════ */

.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--yellow);z-index:60}

.hdr{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem var(--pad);
  border-bottom:1px solid transparent;
  transition:background .5s ease,backdrop-filter .5s ease,border-color .5s ease;
}
.hdr.on{background:rgba(0,0,0,.72);backdrop-filter:blur(0.875rem);border-bottom-color:var(--line)}
.hdr .logo{height:2.125rem;width:auto}
.hdr .btn{padding:.62rem 1.3rem;font-size:.8rem}
@media (max-width:520px){
  .hdr .logo{height:1.625rem}
  .hdr .btn{padding:.55rem 1rem;font-size:.72rem}
}


/* ══════════════════ 1 · HERO ══════════════════
   EL UNICO MOMENTO ORQUESTADO DE LA PAGINA.

   Una ventana de correo donde el remitente se escribe solo. Primero
   sale una direccion gratuita, se tacha, y se reescribe con el dominio
   propio y su marca de verificado.

   Se eligio esto y no una foto porque es literalmente el cambio que se
   vende, ocurriendo. Un titular puede decirlo; esto lo enseña. Y es lo
   unico que se mueve por su cuenta: el resto de la pagina responde al
   scroll o al cursor. */

.hero{
  position:relative;min-height:100svh;
  display:grid;align-items:center;
  padding:8rem var(--pad) 4rem;
  overflow:hidden;isolation:isolate;
  /* La perspectiva vive aqui, en el padre: si se pone en cada ventana,
     cada una tendria su propio punto de fuga y se verian torcidas
     entre si en vez de apiladas. */
  perspective:87.5rem;
}

.hero .grid{
  position:absolute;inset:-2px;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:4rem 4rem;
  -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 42%,#000 10%,transparent 78%);
          mask-image:radial-gradient(ellipse 78% 78% at 50% 42%,#000 10%,transparent 78%);
}
.hero .halo{
  position:absolute;left:62%;top:44%;z-index:0;pointer-events:none;
  width:min(1000px,110%);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,198,0,.1),rgba(255,112,0,.03) 42%,transparent 68%);
}

.hero .in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center;
  max-width:93.75rem;margin:0 auto;width:100%;
}
@media (max-width:980px){
  .hero{min-height:0;padding:7rem var(--pad) 3.5rem}
  .hero .in{grid-template-columns:1fr;gap:2.8rem}
}

.hero h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.7rem,7vw,5.4rem);
  line-height:.95;letter-spacing:-.05em;margin-bottom:1.1rem;
}
.hero h1 em{font-style:normal;color:var(--yellow)}

/* La frase de gancho ronda el 45% del titular, no el 20%: el nombre
   del servicio manda, pero esto tiene que leerse como el mensaje de la
   pagina y no como una nota al pie. */
.hero .claim{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.3rem,2.8vw,2.25rem);
  line-height:1.14;letter-spacing:-.03em;
  color:rgba(255,255,255,.92);max-width:20ch;margin-bottom:1.5rem;
}
.hero .lede{margin-bottom:2.4rem;max-width:42ch}
/* EL VALOR VA ARRIBA, NO ENTERRADO EN UNA LINEA GRIS.
   Antes el hero decia el precio pero callaba los 50 GB, que es justo
   lo que hace la diferencia con Google y con Microsoft. Un visitante
   que se va antes de la seccion de comparacion nunca se enteraba del
   unico argumento que no se puede discutir. */
.hero .value{
  margin-top:1.8rem;display:inline-flex;align-items:center;
  gap:clamp(.8rem,2vw,1.4rem);flex-wrap:wrap;
  padding:.9rem 1.4rem;border-radius:0.875rem;
  border:1px solid rgba(255,198,0,.28);
  background:linear-gradient(120deg,rgba(255,198,0,.07),rgba(255,198,0,.015));
}
.hero .value .n{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;letter-spacing:-.04em;
  color:var(--yellow);
}
.hero .value .n span{
  display:block;margin-top:.3rem;
  font-family:var(--body);font-size:.72rem;font-weight:300;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.hero .value .sep{width:1px;align-self:stretch;background:rgba(255,198,0,.22)}
@media (max-width:420px){ .hero .value .sep{display:none} }

.hero .under{margin-top:1.1rem;font-size:.82rem;font-weight:200;color:rgba(255,255,255,.5)}
.hero .under b{color:rgba(255,255,255,.78);font-weight:500}

/* --- La pila de ventanas ---
   Tres capas: la del frente enfocada, las de atras mas chicas,
   desenfocadas y giradas. Eso es lo que da volumen sin una sola
   imagen. */

.stack{position:relative;transform-style:preserve-3d}

.stack .back{
  position:absolute;inset:0;
  border:1px solid var(--line);border-radius:0.875rem;background:var(--ink);
  pointer-events:none;
}
.stack .b1{
  transform:translate3d(5%,-7%,-7.5rem) rotateY(-9deg);
  opacity:.7;filter:blur(0.0688rem);
}
.stack .b2{
  transform:translate3d(9%,-13%,-15rem) rotateY(-14deg);
  opacity:.45;filter:blur(0.1375rem);
}

.stack .front{
  position:relative;
  transform:rotateY(-7deg) rotateX(2deg);
  box-shadow:0 2.125rem 5.625rem rgba(0,0,0,.75);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.stack:hover .front{transform:rotateY(-3deg) rotateX(1deg)}
@media (max-width:980px){
  .stack .front{transform:none}
  .stack .b1{transform:translate3d(4%,-5%,0) scale(.97)}
  .stack .b2{transform:translate3d(7%,-9%,0) scale(.94)}
}

/* --- El remitente que se reescribe --- */

.from-old{
  position:relative;display:inline-block;
  color:rgba(255,255,255,.55);
}
/* La tachadura se dibuja de izquierda a derecha, no aparece de golpe:
   asi se lee como alguien corrigiendo. */
.from-old::after{
  content:'';position:absolute;left:0;right:0;top:52%;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.5,0,.15,1);
}
.from-old.cut::after{transform:scaleX(1)}

.from-new{color:var(--yellow);font-weight:500}

.car{
  display:inline-block;width:1px;height:1.05em;
  background:var(--yellow);vertical-align:-.15em;margin-left:1px;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* El sello de verificado entra cuando el dominio propio termina de
   escribirse. Es el remate del gesto entero. */
.seal{
  display:inline-flex;align-items:center;gap:.35rem;
  margin-left:.6rem;padding:.18rem .5rem;border-radius:999px;
  background:rgba(41,210,100,.12);border:1px solid rgba(41,210,100,.3);
  font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green);
  opacity:0;transform:translateY(0.25rem);
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.seal.on{opacity:1;transform:none}
.seal svg{width:0.5625rem;height:0.5625rem;stroke:var(--green);stroke-width:2.6;fill:none}

.mail-body{padding-top:1rem}
.mail-body i{
  display:block;height:0.375rem;border-radius:0.1875rem;
  background:rgba(255,255,255,.14);margin-bottom:.6rem;width:var(--w,100%);
}


/* ══════════════════ 2 · GRATIS CONTRA PROPIO ══════════════════
   Dos bandejas lado a lado. La misma propuesta enviada desde una
   direccion gratuita y desde un dominio propio: una cae en spam y la
   otra entra a bandeja de entrada con su sello.

   Es la comparacion entera dicha sin una palabra, y es la razon por la
   que esta seccion no lleva lista de puntos. */

.vs2{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.4rem);
  perspective:75rem;
}
@media (max-width:620px){ .vs2{grid-template-columns:1fr} }

.inbox{
  border:1px solid var(--line);border-radius:0.875rem;background:var(--ink);
  overflow:hidden;transition:transform .7s cubic-bezier(.16,1,.3,1),border-color .7s ease;
}
.inbox .hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.05rem 1.35rem;border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:700;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
}
.inbox.bad .hd{color:rgba(255,77,77,.72);background:rgba(255,77,77,.05)}
.inbox.good .hd{color:var(--green);background:rgba(41,210,100,.06)}
.inbox .hd svg{width:1.0625rem;height:1.0625rem;stroke-width:2.2;fill:none}
.inbox.bad .hd svg{stroke:rgba(255,77,77,.72)}
.inbox.good .hd svg{stroke:var(--green)}

.inbox.good{
  border-color:rgba(41,210,100,.34);
  box-shadow:0 0 2.75rem rgba(41,210,100,.07);
}
.inbox.good:hover{transform:translateY(-0.25rem);border-color:rgba(41,210,100,.45)}
.inbox.bad:hover{transform:translateY(-0.25rem)}

.msg{padding:1.4rem 1.35rem;display:flex;gap:1rem;align-items:flex-start}
.msg .av{
  width:2.625rem;height:2.625rem;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:.78rem;
}
.inbox.bad .msg .av{background:rgba(255,255,255,.11);color:rgba(255,255,255,.5)}
.inbox.good .msg .av{background:rgba(255,198,0,.16);color:var(--yellow)}

.msg .txt{flex:1;min-width:0}
.msg .txt b{
  display:block;font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.inbox.bad .msg .txt b{color:rgba(255,255,255,.62)}
.inbox.good .msg .txt b{color:var(--white)}
.msg .txt span{
  display:block;margin-top:.35rem;font-size:.86rem;font-weight:300;
  color:rgba(255,255,255,.52);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.msg .txt i{
  display:block;margin-top:.75rem;height:0.4375rem;border-radius:0.25rem;
  background:rgba(255,255,255,.14);width:var(--w,80%);
}

.inbox .note{
  padding:1.1rem 1.35rem;border-top:1px solid var(--line);
  font-size:.88rem;font-weight:200;line-height:1.55;
}
.inbox.bad .note{color:rgba(255,255,255,.52)}
.inbox.good .note{color:rgba(255,255,255,.74)}


/* ══════════════════ 3 · LO QUE RECIBES ══════════════════ */

.gains{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:1rem;overflow:hidden;
}
@media (max-width:760px){ .gains{grid-template-columns:1fr} }
.gain{background:var(--black);padding:clamp(1.6rem,3.4vw,2.4rem);transition:background .5s ease}
.gain:hover{background:rgba(255,198,0,.035)}
.gain svg{width:2.125rem;height:2.125rem;margin-bottom:1.3rem}
.gain h3{
  font-family:var(--display);font-weight:600;font-size:clamp(1.02rem,1.6vw,1.2rem);
  letter-spacing:-.02em;margin-bottom:.6rem;
}
.gain p{font-weight:200;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.68)}


/* ══════════════════ 4 · LA COMPARACION DE ESPACIO ══════════════════
   Tres barras que se llenan al entrar en pantalla. El numero es el
   argumento entero, asi que la barra tiene que ser proporcional de
   verdad: 15, 30 y 50 sobre una escala de 50. Falsearlas para que la
   diferencia se vea mas seria mentir con un dibujo. */

.bars{display:flex;flex-direction:column;gap:1.4rem}
.barrow{display:grid;grid-template-columns:minmax(0,15ch) 1fr auto;gap:1rem;align-items:center}
@media (max-width:620px){
  .barrow{grid-template-columns:1fr auto;gap:.5rem 1rem}
  .barrow .who{grid-column:1/-1}
}
.barrow .who{
  font-weight:200;font-size:.86rem;line-height:1.3;color:rgba(255,255,255,.64);
}
.barrow.us .who{color:var(--white);font-weight:500}
.barrow .track{height:0.75rem;border-radius:0.375rem;background:rgba(255,255,255,.1);overflow:hidden}
.barrow .track i{
  display:block;height:100%;width:0;border-radius:0.3125rem;
  background:rgba(255,255,255,.4);
}
.barrow.us .track i{background:linear-gradient(90deg,rgba(255,198,0,.45),var(--yellow))}
.barrow .gb{
  font-family:var(--display);font-weight:800;font-size:1.02rem;
  color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;min-width:6.5ch;text-align:right;
}
.barrow.us .gb{color:var(--yellow);font-size:1.3rem}

.foot-note{
  margin-top:clamp(1.6rem,3vh,2.4rem);padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-weight:200;font-size:.86rem;line-height:1.6;
  color:rgba(255,255,255,.58);max-width:62ch;
}


/* ══════════════════ 5 · DONDE LO ABRES ══════════════════
   Tres ventanas apiladas en profundidad. Al pasar el mouse por una,
   se adelanta y las otras retroceden: el visitante elige con el cursor
   la que ya usa, y eso es exactamente el mensaje de la seccion. */

.apps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.4rem);
  perspective:75rem;
}
@media (max-width:760px){ .apps{grid-template-columns:1fr} }

.app{
  border:1px solid var(--line);border-radius:0.875rem;background:var(--ink);
  padding:clamp(1.2rem,2.6vw,1.7rem);
  transform:rotateY(6deg) translateZ(-1.875rem);
  transition:transform .8s cubic-bezier(.16,1,.3,1),border-color .6s ease,background .6s ease;
}
.app:nth-child(2){transform:rotateY(0deg)}
.app:nth-child(3){transform:rotateY(-6deg) translateZ(-1.875rem)}
.app:hover{transform:rotateY(0deg) translateZ(1.875rem);border-color:rgba(255,198,0,.35);background:rgba(255,198,0,.03)}
@media (max-width:760px){
  .app,.app:nth-child(2),.app:nth-child(3){transform:none}
  .app:hover{transform:translateY(-0.25rem)}
}

.app .ic{
  width:2.75rem;height:2.75rem;border-radius:0.6875rem;margin-bottom:1.2rem;
  display:grid;place-items:center;
  background:rgba(255,255,255,.09);border:1px solid var(--line);
}
.app .ic svg{width:1.3125rem;height:1.3125rem}
.app h3{font-family:var(--display);font-weight:600;font-size:1.04rem;letter-spacing:-.02em;margin-bottom:.55rem}
.app p{font-weight:200;font-size:.88rem;line-height:1.58;color:rgba(255,255,255,.68)}


/* ══════════════════ 6 · LA CONFIGURACION ══════════════════
   Tres comprobaciones que se encienden una detras de otra al entrar en
   pantalla. NINGUNA nombra un termino tecnico: el visitante no sabe ni
   tiene por que saber que existen esos registros. Lo que le importa es
   el resultado. */

.checks{display:flex;flex-direction:column;gap:.9rem}
.check{
  display:flex;align-items:center;gap:1rem;
  padding:1.05rem 1.2rem;border-radius:0.75rem;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  transition:border-color .7s ease,background .7s ease;
}
.check.on{border-color:rgba(41,210,100,.32);background:rgba(41,210,100,.045)}

.check .dot{
  width:1.375rem;height:1.375rem;border-radius:50%;flex:none;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.34);
  transition:border-color .7s ease,background .7s ease;
}
.check.on .dot{border-color:var(--green);background:rgba(41,210,100,.16)}
.check .dot svg{
  width:0.6875rem;height:0.6875rem;stroke:var(--green);stroke-width:2.6;fill:none;
  opacity:0;transition:opacity .5s ease .15s;
}
.check.on .dot svg{opacity:1}

.check p{flex:1;font-weight:200;font-size:.92rem;line-height:1.45;color:rgba(255,255,255,.72)}
.check p b{display:block;font-family:var(--display);font-weight:600;color:var(--white);font-size:.96rem;margin-bottom:.2rem}

.clock{
  margin-top:1.6rem;display:flex;align-items:center;gap:.8rem;
  padding:1rem 1.2rem;border-radius:0.75rem;
  border:1px solid rgba(255,198,0,.2);background:rgba(255,198,0,.04);
}
.clock svg{width:1.1875rem;height:1.1875rem;flex:none}
.clock p{font-weight:200;font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.7)}
.clock p b{color:var(--yellow);font-weight:600}


/* ══════════════════ 7 · EL PRECIO ══════════════════ */

.price{
  position:relative;overflow:hidden;
  border:1px solid rgba(255,198,0,.28);border-radius:1.25rem;
  padding:clamp(2rem,4.5vw,3.4rem);
  background:
    radial-gradient(ellipse 70% 120% at 20% 50%,rgba(255,198,0,.07),transparent 62%),
    var(--black);
  text-align:center;
}
/* El barrido de luz, el mismo gesto de las otras dos landings */
.price::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,198,0,.055) 50%,transparent 62%);
  background-size:280% 100%;background-position:130% 0;
  transition:background-position 1.5s cubic-bezier(.16,1,.3,1);
}
.price:hover::after{background-position:-50% 0}
.price > *{position:relative;z-index:1}

.price .amt{
  font-family:var(--display);font-weight:800;
  font-size:clamp(3.4rem,10vw,7rem);line-height:.9;letter-spacing:-.05em;
  color:var(--yellow);margin-bottom:.5rem;
}
.price .amt small{
  font-family:var(--body);font-size:clamp(.9rem,1.8vw,1.2rem);font-weight:300;
  letter-spacing:.01em;color:rgba(255,255,255,.6);margin-left:.5rem;
}
.price .per{
  font-weight:200;font-size:clamp(.95rem,1.5vw,1.12rem);
  color:rgba(255,255,255,.6);margin-bottom:2rem;
}

.terms{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.8rem 2rem;margin-bottom:2.2rem;
}
.terms span{
  display:flex;align-items:center;gap:.55rem;
  font-weight:200;font-size:.88rem;color:rgba(255,255,255,.62);
}
.terms svg{width:0.875rem;height:0.875rem;flex:none;stroke:var(--yellow);stroke-width:2.2;fill:none}

.price .acts{justify-content:center}


/* ══════════════════ 8 · BLOQUES DE TEXTO CLARO ══════════════════ */

.plain{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:1rem;overflow:hidden;
}
@media (max-width:760px){ .plain{grid-template-columns:1fr} }
/* Estas tarjetas se leian como notas al pie: letra chica y gris sobre
   negro. Y no son una nota al pie, son donde se resuelven las dudas
   que deciden la compra. Suben de tamaño y de contraste, y el titular
   pasa a amarillo para que se distinga del cuerpo de un vistazo. */
.plain div{background:var(--black);padding:clamp(1.5rem,3vw,2rem)}
.plain b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.02rem,1.6vw,1.15rem);letter-spacing:-.02em;
  color:var(--yellow);margin-bottom:.6rem;
}
.plain p{
  font-weight:300;font-size:clamp(.92rem,1.25vw,1rem);line-height:1.62;
  color:rgba(255,255,255,.8);
}


/* ══════════════════ 9 · PREGUNTAS ══════════════════ */

.qs{border-top:1px solid var(--line)}
.qrow{border-bottom:1px solid var(--line)}
.qbtn{width:100%;display:flex;align-items:center;gap:1.2rem;padding:clamp(1.1rem,2.4vh,1.5rem) 0;text-align:left}
.qbtn .qt{
  flex:1;font-family:var(--display);font-weight:600;
  font-size:clamp(.98rem,1.7vw,1.16rem);letter-spacing:-.02em;
  color:rgba(255,255,255,.82);transition:color .4s ease;
}
.qrow:hover .qt{color:var(--white)}
.qrow.open .qt{color:var(--yellow)}
.qbtn .pl{position:relative;width:0.875rem;height:0.875rem;flex:none;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.qbtn .pl::before,.qbtn .pl::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 .pl::after{transform:rotate(90deg)}
.qrow.open .pl{transform:rotate(135deg)}
.qrow.open .pl::before,.qrow.open .pl::after{background:var(--yellow)}
.qbody{overflow:hidden;height:0}
.qbody p{
  padding:0 0 1.5rem;max-width:64ch;
  font-weight:200;font-size:clamp(.9rem,1.25vw,1rem);line-height:1.68;
  color:rgba(255,255,255,.6);
}


/* ══════════════════ 10 · EL FORMULARIO ══════════════════ */

.form{
  border:1px solid var(--line);border-radius:1.25rem;
  padding:clamp(1.8rem,4vw,3rem);
  background:linear-gradient(150deg,rgba(255,198,0,.04),transparent 55%);
}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem 1.4rem}
@media (max-width:720px){ .fgrid{grid-template-columns:1fr} }
.fld{display:flex;flex-direction:column}
.fld.wide{grid-column:1/-1}
.fld label{
  font-family:var(--display);font-weight:600;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:.55rem;
}
.fld label .req{color:var(--yellow);margin-left:.25em}
.fld label .opt{color:rgba(255,255,255,.24);letter-spacing:.08em;margin-left:.5em}
.fld input,.fld textarea,.fld select{
  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;padding:.95rem 1.05rem;
  transition:border-color .35s ease,background .35s ease;
}
.fld textarea{min-height:6.875rem;resize:vertical;line-height:1.6}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.28)}
.fld input:focus,.fld textarea:focus,.fld select:focus{
  outline:none;border-color:var(--yellow);background:rgba(255,255,255,.06);
}
.fld select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),
                   linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
  background-position:calc(100% - 1.1875rem) 50%,calc(100% - 0.8125rem) 50%;
  background-size:0.375rem 0.375rem,0.375rem 0.375rem;background-repeat:no-repeat;
}
.fld select option{background:#101010;color:#fff}

.consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:.75rem;cursor:pointer;margin-top:.3rem}
.consent input{position:absolute;opacity:0;width:0;height:0}
.consent i{
  width:1.125rem;height:1.125rem;flex:none;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 input:focus-visible + i{outline:2px solid var(--yellow);outline-offset:0.1875rem}
.consent span{font-weight:300;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.5)}

.send{grid-column:1/-1;margin-top:.7rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.send .fine{font-weight:200;font-size:.78rem;color:rgba(255,255,255,.34);max-width:34ch}

.done{display:none;text-align:center;padding:clamp(2.5rem,6vh,4rem) 1rem}
.form.sent .fgrid{display:none}
.form.sent .done{display:block}
.done svg{width:3rem;height:3rem;margin:0 auto 1.4rem;stroke:var(--yellow);stroke-width:1.6;fill:none}
.done h3{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;margin-bottom:.8rem}
.done p{font-weight:200;font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.6);max-width:44ch;margin:0 auto}


/* ══════════════════ PIE Y BARRA PEGADA ══════════════════ */

.foot{
  border-top:1px solid var(--line);padding:clamp(2.5rem,5vh,3.5rem) var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.foot img{height:1.875rem;width:auto;opacity:.75}
.foot .lk{display:flex;gap:1.6rem;flex-wrap:wrap}
.foot a{font-size:.82rem;color:rgba(255,255,255,.44);transition:color .35s ease}
.foot a:hover{color:var(--yellow)}
.foot .cr{font-size:.74rem;color:rgba(255,255,255,.26);width:100%}

.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem var(--pad);
  background:rgba(0,0,0,.86);backdrop-filter:blur(0.875rem);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.sticky.on{transform:none}
.sticky p{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--yellow)}
.sticky p span{
  display:block;font-family:var(--body);font-weight:200;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:.15rem;
}
.sticky .btn{padding:.7rem 1.5rem;font-size:.84rem}
@media (max-width:420px){
  .sticky p{font-size:.9rem}
  .sticky .btn{padding:.6rem 1.1rem;font-size:.76rem}
}


/* ══════════════════ REVELADO ══════════════════
   OJO CON ESTO: con opacity:0 declarado aqui, un gsap.from() lee el
   estado final desde el CSS, encuentra cero, y anima DE CERO A CERO.
   El bloque no vuelve a aparecer nunca. Por eso la animacion usa
   fromTo con el destino escrito a mano. Ya paso una vez. */
.fx{opacity:0}
.ln{display:block;will-change:transform;backface-visibility:hidden}
.lw{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.reveal-lines .ln{opacity:0}

@media (prefers-reduced-motion:reduce){
  .fx{opacity:1}
  .reveal-lines .ln{opacity:1;transform:none}
  .car{animation:none}
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
}
/* ══════════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════════

   DE AQUI EN ADELANTE, NADA DE ESTO ESTA EN EL PROTOTIPO

   Son las correcciones que hacen falta por estar dentro de Divi y no
   en una pagina en blanco. Cada una dice contra que pelea.

   ══════════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════ EL LIENZO DE DIVI ══════════════════
   La pagina entera vive dentro de UN modulo Code, dentro de una
   columna, dentro de una fila, dentro de una seccion. Cada una de esas
   cuatro capas trae de fabrica su propio relleno, su propio ancho
   maximo y, en Divi 5, su propio gap.

   Sumadas, meten la landing en una caja de 1080px centrada y con aire
   arriba y abajo: el hero deja de ser a sangre, el fondo negro se
   corta por los lados y las secciones quedan separadas por huecos que
   nadie declaro.

   SE ANULA AQUI Y NO EN EL PANEL DE DIVI A PROPOSITO. Si mañana se
   duplica la pagina, se rehace, o alguien toca un ajuste sin querer,
   esto sigue en pie. El panel se olvida, el archivo no.

   Es la contra del punto 0 del documento de contexto: Divi 5 le pone
   gap a todo lo que hace flex. */

.adn-emails .et_pb_section,
.adn-emails .et_pb_row,
.adn-emails .et_pb_column,
.adn-emails .et_pb_module,
.adn-emails .et_pb_code_inner{
  padding:0;
  margin:0;
  gap:0;
  width:100%;
  max-width:none;
}


/* ══════════════════ 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. El <em> amarillo se ve intacto porque si declara
   color propio, y todo lo demas del titular queda apagado.

   POR QUE :where() Y NO UNA LISTA NORMAL.
   :where() vale CERO en especificidad, asi que la regla entera pesa lo
   que pesa .adn-emails 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
       (.pack h3, .done h3 y las demas que si declaran color)

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

   Dos selectores por seguridad: .adn-emails 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-emails        :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: Divi le pone su color a los input, a
   los textarea y a los select, y le gana al color:var(--white) que ya
   declara este archivo mas arriba. Resultado: lo que la persona
   escribe sale gris oscuro sobre negro y casi no se lee.

   Aqui NO se usa :where() a proposito, 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.

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

.adn-emails .fld input,
.adn-emails .fld textarea,
.adn-emails .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-emails .fld input::placeholder,
.adn-emails .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-emails .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);
}


/* ══════════════════ LA CASILLA DE CONSENTIMIENTO ══════════════════
   Divi le pone class="input" a las casillas de verificacion y las
   pinta. Aqui la casilla real esta escondida y lo que se ve es el <i>
   de al lado, asi que hay que asegurarse de que la de verdad siga
   invisible aunque Divi le declare tamaño o fondo. */

.adn-emails .consent input,
.et_pb_code_inner .consent input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  margin:0;
  padding:0;
  border:0;
}


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

   En el prototipo, lineas 996 y 1627, el logo es un <img> suelto, sin
   enlace. Se le da clic y no pasa nada, ni arriba ni en el pie.

   Esto ya esta pasando en /advanced-seo/ y en /website-promo/, que
   salieron del mismo molde, y hay que arreglarlo alli tambien.

   En el marcado de esta pagina los dos logos van envueltos en un <a>
   con clase .home. Estas reglas son para que el 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. */

.adn-emails .hdr .home,
.adn-emails .foot .home,
.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. */
.adn-emails .foot .home img,
.et_pb_code_inner .foot .home img{
  transition:opacity .35s ease;
}
.adn-emails .foot .home:hover img,
.et_pb_code_inner .foot .home:hover img{
  opacity:1;
}

.adn-emails .hdr .home img,
.et_pb_code_inner .hdr .home img{
  transition:opacity .35s ease;
}
.adn-emails .hdr .home:hover img,
.et_pb_code_inner .hdr .home:hover img{
  opacity:.82;
}