/* ══════════════════════════════════════════════════════════════
   ADNIUS · LOGO AND BRAND MANUAL · 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: /logo-brand/   ·   De adnius-brand-v3.html

   Se encola SOLO en esa pagina, desde adnius_enqueue_brand() 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.

   Todo lo que va desde aqui hasta el bloque "CONTRA DIVI" del final
   es el prototipo tal cual, sin tocar una linea. Lo del final es lo
   unico que no existe en el prototipo, y existe porque el prototipo
   corria en una pagina en blanco y esto corre dentro de Divi.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   ADNIUS · LOGO AND BRAND MANUAL · VERSION 3

   EL LENGUAJE VISUAL, Y POR QUE ES DISTINTO A LAS CINCO ANTERIORES.

   Promo web       fotografia
   SEO avanzado    interfaz plana: buscadores, listas, reportes
   Correos         interfaz con profundidad: ventanas apiladas
   Redes           el feed vivo, vertical
   YouTube         el marco apaisado y la linea de tiempo
   Marca           LA PALETA Y LA RETICULA

   Esta es la unica de las seis que puede hacer una cosa: la pagina ES
   el entregable. Muestras de color con su codigo, especimenes de
   tipografia, la zona de seguridad del logo, la cuadricula de
   construccion. Quien la lee esta viendo un manual de marca de verdad,
   asi que no hay que explicarle que recibe.

   Por eso aqui hay COLOR y en las otras no. Es la unica landing donde
   una paleta no es adorno: es la demostracion.

   CERO FOTOGRAFIAS. Todo es SVG y HTML dibujado.
   ══════════════════════════════════════════════════════════════════ */

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

:root{
  --black:#000;
  --ink:#0a0a0a;
  --yellow:#ffc600;
  --white:#fff;

  /* La paleta de muestra del hero. No es la de ADNIUS: es una marca
     inventada, para que se lea como el trabajo de un cliente y no
     como la agencia hablando de si misma. */
  --s1:#1b3a5c;
  --s2:#e8613c;
  --s3:#f4ede3;
  --s4:#2f8f6b;

  --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;
}
@media (max-width:900px){
  .duo{grid-template-columns:1fr;gap:2.6rem}
  /* Sin order aqui a proposito: primero el texto, despues el dibujo */
}


/* ══════════════════ 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,.75);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,.92);font-weight:500}

.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 en ch va en el hijo, nunca en el contenedor: en el
   contenedor se mide contra los 16px del cuerpo y el titular se parte
   en cinco lineas con media pantalla vacia al lado. */
.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,.68);max-width:56ch;
}


/* ══════════════════ 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,.62);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,.24)}
.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}

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


/* ══════════════════ 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: LA HOJA DE MARCA ══════════════════
   Una hoja de manual armandose sola: la marca dibujandose dentro de su
   cuadricula de construccion, las muestras de color entrando una tras
   otra con su codigo, y el especimen de tipografia debajo.

   Es el unico momento orquestado de la pagina y es literalmente el
   entregable. Un titular puede prometer una marca; esto la enseña
   construyendose. */

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

/* La cuadricula de fondo es la reticula de un manual, no una textura
   cualquiera: cuadrada, fina y regular. */
.hero .grid{
  position:absolute;inset:-2px;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);
  background-size:3rem 3rem;
  -webkit-mask-image:radial-gradient(ellipse 84% 84% at 56% 44%,#000 30%,transparent 88%);
          mask-image:radial-gradient(ellipse 84% 84% at 56% 44%,#000 30%,transparent 88%);
}
.hero .halo{
  position:absolute;left:68%;top:48%;z-index:0;pointer-events:none;
  width:min(61.25rem,112%);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,198,0,.1),rgba(232,97,60,.05) 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,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.4rem,5.6vw,4.2rem);
  line-height:.98;letter-spacing:-.045em;
}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero .claim{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,2vw,1.5rem);line-height:1.3;letter-spacing:-.02em;
  color:rgba(255,255,255,.9);margin:1.3rem 0 1rem;max-width:24ch;
}
.hero .lede{margin-bottom:2.1rem}
.hero .acts{margin-bottom:2.4rem}

.value{display:flex;align-items:center;gap:clamp(1rem,2.4vw,1.9rem);flex-wrap:wrap}
.value .n{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.2rem,2.2vw,1.7rem);letter-spacing:-.03em;color:var(--yellow);
}
.value .n span{
  display:block;font-family:var(--body);font-weight:200;font-size:.68rem;
  letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-top:.2rem;
}
.value .sep{width:1px;height:1.875rem;background:var(--line);flex:none}
.under{font-weight:200;font-size:.84rem;color:rgba(255,255,255,.44);margin-top:1.1rem}
.under b{color:rgba(255,255,255,.72);font-weight:400}


/* LA HOJA ------------------------------------------------------ */

.sheet{
  border:1px solid var(--line);border-radius:0.875rem;overflow:hidden;
  background:var(--ink);
  box-shadow:0 2.5rem 5.625rem -1.875rem rgba(0,0,0,.9);
}
.sheet .top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line);
}
.sheet .top b{
  font-family:var(--display);font-weight:700;font-size:.8rem;
  letter-spacing:-.01em;color:rgba(255,255,255,.85);
}
.sheet .top span{
  font-weight:200;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.34);
}

/* La marca dentro de su cuadricula de construccion. Es la pagina que
   TODO manual tiene y que casi nadie fuera del oficio ha visto: por eso
   funciona como gancho. */
.sheet .mark{
  position:relative;aspect-ratio:16/10;
  display:grid;place-items:center;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    rgba(255,255,255,.02);
  background-size:1.625rem 1.625rem,1.625rem 1.625rem,auto;
}
.sheet .mark svg{width:min(46%,11.875rem);height:auto;overflow:visible}

/* La zona de seguridad, punteada, alrededor de la marca */
.sheet .safe{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(64%,16.75rem);aspect-ratio:1.5;
  border:1px dashed rgba(255,198,0,.4);border-radius:0.25rem;
  opacity:0;transition:opacity .9s ease;
}
.sheet.on .safe{opacity:1}

/* LAS MUESTRAS DE COLOR.
   Entran una tras otra y cada una trae su codigo. Es la pieza que
   convierte la landing en demostracion: nadie tiene que explicar que
   es una paleta si la esta viendo. */
.swat{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.swat div{
  padding:.9rem .7rem 1rem;background:var(--ink);
  opacity:0;transform:translateY(0.625rem);
  transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1);
}
.sheet.on .swat div{opacity:1;transform:none}
.sheet.on .swat div:nth-child(2){transition-delay:.1s}
.sheet.on .swat div:nth-child(3){transition-delay:.2s}
.sheet.on .swat div:nth-child(4){transition-delay:.3s}
.swat i{
  display:block;height:2.75rem;border-radius:0.3125rem;margin-bottom:.55rem;
  background:var(--c);
}
.swat b{
  display:block;font-family:var(--body);font-weight:500;font-size:.62rem;
  letter-spacing:.04em;color:rgba(255,255,255,.8);
}
.swat span{
  display:block;font-weight:200;font-size:.58rem;
  color:rgba(255,255,255,.36);margin-top:.15rem;
}
@media (max-width:420px){
  .swat{grid-template-columns:repeat(2,1fr)}
}

/* EL ESPECIMEN DE TIPOGRAFIA */
.spec{padding:1rem 1.1rem 1.2rem;border-top:1px solid var(--line)}
.spec .row{display:flex;align-items:baseline;gap:.8rem}
.spec .aa{
  font-family:var(--display);font-weight:800;font-size:2.5rem;
  line-height:1;letter-spacing:-.05em;color:var(--white);
}
.spec .nm{flex:1;min-width:0}
.spec .nm b{
  display:block;font-family:var(--display);font-weight:600;font-size:.82rem;
  color:rgba(255,255,255,.86);
}
.spec .nm span{
  display:block;font-weight:200;font-size:.66rem;
  color:rgba(255,255,255,.36);margin-top:.15rem;
}
.spec .abc{
  margin-top:.7rem;font-weight:200;font-size:.66rem;letter-spacing:.06em;
  color:rgba(255,255,255,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}


/* ══════════════════ 2 · EL PDF QUE SE MUERE ══════════════════
   Una bandeja de correo con el manual enterrado seis mensajes abajo.
   Es la unica seccion de la pagina con un dibujo triste a proposito:
   viene justo antes de la que enseña la alternativa. */

.inbox{
  border:1px solid var(--line);border-radius:1rem;overflow:hidden;
  background:var(--ink);
}
.inbox .hd{
  display:flex;align-items:center;gap:.5rem;
  padding:.85rem 1rem;border-bottom:1px solid var(--line);
}
.inbox .hd i{width:0.5rem;height:0.5rem;border-radius:50%;background:rgba(255,255,255,.16)}
.inbox .hd span{
  flex:1;margin-left:.6rem;font-weight:300;font-size:.68rem;
  color:rgba(255,255,255,.4);
}
.mail{
  display:flex;align-items:center;gap:.8rem;
  padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.06);
  opacity:.34;transition:opacity .8s ease,background .8s ease;
}
.mail:last-child{border-bottom:0}
.mail .dot{width:0.375rem;height:0.375rem;border-radius:50%;flex:none;background:rgba(255,255,255,.18)}
.mail .tx{flex:1;min-width:0}
.mail .tx b{
  display:block;font-family:var(--display);font-weight:600;font-size:.78rem;
  color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mail .tx i{
  display:block;font-style:normal;margin-top:.28rem;height:0.3125rem;border-radius:0.1875rem;
  background:rgba(255,255,255,.07);width:var(--w,68%);
}
.mail .when{font-weight:200;font-size:.62rem;color:rgba(255,255,255,.26);flex:none}

/* El que importa: se enciende al entrar en pantalla y se queda solo */
.mail.it{opacity:1;background:rgba(255,198,0,.045)}
.mail.it .dot{background:var(--yellow)}
.mail.it .tx b{color:rgba(255,255,255,.9)}
.mail.it .clip{
  display:inline-flex;align-items:center;gap:.35rem;flex:none;
  font-weight:300;font-size:.62rem;color:rgba(255,198,0,.85);
  border:1px solid rgba(255,198,0,.3);border-radius:0.25rem;padding:.16rem .4rem;
}
.inbox .foot{
  padding:.8rem 1rem;border-top:1px solid var(--line);
  font-weight:200;font-size:.72rem;color:rgba(255,255,255,.32);
}


/* ══════════════════ 3 · LA PAGINA VIVA ══════════════════
   Un navegador con la marca del cliente dentro y un telefono al lado.
   Enseña de un vistazo las dos cosas que el PDF no puede: que vive en
   su dominio y que funciona en el bolsillo. */

.live{position:relative;padding-bottom:clamp(2rem,6vw,3.4rem)}

.win{
  border:1px solid var(--line);border-radius:0.75rem;overflow:hidden;
  background:var(--ink);box-shadow:0 2.125rem 5rem -1.875rem rgba(0,0,0,.9);
}
.win .bar{
  display:flex;align-items:center;gap:.45rem;
  padding:.7rem .9rem;border-bottom:1px solid var(--line);
}
.win .bar i{width:0.5rem;height:0.5rem;border-radius:50%;background:rgba(255,255,255,.16)}
.win .url{
  flex:1;margin-left:.6rem;padding:.3rem .7rem;border-radius:999px;
  background:rgba(255,255,255,.05);
  font-weight:300;font-size:.64rem;color:rgba(255,255,255,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.win .url b{color:rgba(255,198,0,.9);font-weight:500}

.page{padding:clamp(1rem,2.4vw,1.6rem)}
.page .h{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.1rem,2.4vw,1.6rem);letter-spacing:-.035em;
  color:rgba(255,255,255,.92);margin-bottom:.15rem;
}
.page .k{
  font-weight:200;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.32);margin-bottom:1rem;
}
.page .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0.375rem;margin-bottom:1rem}
.page .strip i{height:2.25rem;border-radius:0.3125rem;background:var(--c)}
.page .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem}
.page .cols div{
  border:1px solid var(--line);border-radius:0.4375rem;padding:.6rem .55rem;
  background:rgba(255,255,255,.02);
}
.page .cols b{
  display:block;font-family:var(--display);font-weight:600;font-size:.6rem;
  color:rgba(255,255,255,.6);margin-bottom:.35rem;
}
.page .cols i{display:block;height:0.25rem;border-radius:0.1875rem;background:rgba(255,255,255,.1);margin-bottom:0.1875rem}
.page .cols i:last-child{width:60%}
@media (max-width:520px){ .page .cols{grid-template-columns:1fr} }

/* El telefono, montado sobre la esquina del navegador */
.fone{
  position:absolute;right:0;bottom:0;z-index:3;
  width:clamp(6rem,13vw,8.25rem);aspect-ratio:9/19;
  border:1px solid rgba(255,255,255,.28);border-radius:1rem;
  background:#050505;padding:0.4375rem 0.3125rem;
  box-shadow:0 1.625rem 3.125rem -0.875rem rgba(0,0,0,.95);
}
.fone .scr{
  height:100%;border-radius:0.6875rem;overflow:hidden;
  background:rgba(255,255,255,.03);padding:.45rem .4rem;
}
.fone .t{height:0.3125rem;border-radius:0.1875rem;background:rgba(255,255,255,.22);width:66%;margin-bottom:.5rem}
.fone .sw{display:grid;grid-template-columns:repeat(2,1fr);gap:0.25rem;margin-bottom:.5rem}
.fone .sw i{height:1.25rem;border-radius:0.25rem;background:var(--c)}
.fone .ln{height:0.1875rem;border-radius:2px;background:rgba(255,255,255,.09);margin-bottom:0.25rem}
.fone .ln:nth-child(even){width:72%}
@media (max-width:640px){ .fone{display:none} }

.gains{
  list-style:none;display:flex;flex-direction:column;gap:1.05rem;margin-top:.4rem;
}
.gains li{
  font-weight:200;font-size:clamp(.94rem,1.3vw,1.04rem);line-height:1.58;
  color:rgba(255,255,255,.72);
  padding-left:1.6rem;position:relative;
}
.gains li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:0.5625rem;height:1px;background:var(--yellow);
}
.gains b{color:var(--white);font-weight:500}

.aside{
  margin-top:1.7rem;padding:1rem 1.2rem;
  border-left:2px solid rgba(255,198,0,.4);
  font-weight:200;font-size:.92rem;line-height:1.6;
  color:rgba(255,255,255,.6);
}
.aside a{color:var(--yellow);border-bottom:1px solid rgba(255,198,0,.4)}


/* ══════════════════ 3b · LA TIPOGRAFIA ══════════════════
   Va ANTES de los paquetes a proposito. Despues de los precios se
   leeria como letra chica; antes se lee como criterio, y de paso ordena
   la expectativa del que sigue leyendo.

   El dibujo enseña la misma letra en su forma original y modificada.
   Sin el, la seccion solo dice lo que NO se hace. Con el, demuestra en
   un segundo que si hay trabajo tipografico. */

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

.typo p{
  font-weight:200;font-size:clamp(.95rem,1.3vw,1.06rem);line-height:1.65;
  color:rgba(255,255,255,.72);max-width:56ch;
}
.typo p + p{margin-top:1.1rem}
.typo p b{color:var(--white);font-weight:500}

.glyphs{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:1rem;overflow:hidden;
}
.glyphs > div{
  background:var(--ink);padding:clamp(1.2rem,2.6vw,1.7rem);
  display:flex;flex-direction:column;align-items:center;gap:1rem;
}
.glyphs .lab{
  font-family:var(--display);font-weight:700;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.38);
}
.glyphs .lab.hit{color:var(--yellow)}
.glyphs svg{width:100%;max-width:9.375rem;height:auto;overflow:visible}
.glyphs .foot2{
  grid-column:1/-1;background:var(--ink);
  padding:.9rem 1.1rem;border-top:1px solid var(--line);
  font-weight:200;font-size:.8rem;line-height:1.5;
  color:rgba(255,255,255,.5);text-align:center;
}


/* ══════════════════ 4 · LOS TRES PAQUETES ══════════════════ */

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

.pack{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:1.125rem;
  padding:clamp(1.5rem,3vw,2.1rem);
  transition:border-color .5s ease,background .5s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.pack:hover{border-color:rgba(255,198,0,.34);transform:translateY(-0.25rem)}
.pack.pick{border-color:rgba(255,198,0,.44);background:rgba(255,198,0,.04)}
.pack .badge{
  align-self:flex-start;margin-bottom:1rem;
  font-family:var(--display);font-weight:700;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--black);background:var(--yellow);
  padding:.3rem .7rem;border-radius:999px;
}
.pack h3{font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:-.03em;margin-bottom:.4rem}
.pack .sub{font-weight:200;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.6);margin-bottom:1.3rem;flex:1}
.pack .amt{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,4vw,2.7rem);line-height:1;letter-spacing:-.04em;
  color:var(--yellow);margin-bottom:.4rem;
}
/* El letter-spacing negativo del numero grande lo hereda el <small>
   como valor absoluto y a 12px las letras se montan. Se reinicia. */
.pack .amt small{
  font-family:var(--body);font-size:.74rem;font-weight:300;
  letter-spacing:normal;color:rgba(255,255,255,.5);margin-left:.4rem;
}
.pack .days{font-size:.76rem;font-weight:200;color:rgba(255,255,255,.42);margin-bottom:1.5rem}
.pack .go .btn{width:100%;justify-content:center;padding:.85rem 1rem;font-size:.86rem}
.pack .save{
  display:inline-block;margin-top:.9rem;
  font-family:var(--display);font-weight:700;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);
}


/* ══════════════════ 5 · EL PROCESO DEL LOGO ══════════════════ */

.flow{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:1rem;overflow:hidden;
}
@media (max-width:900px){ .flow{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .flow{grid-template-columns:1fr} }
.flow div{background:var(--black);padding:clamp(1.4rem,2.6vw,1.8rem)}
.flow b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1rem,1.5vw,1.1rem);letter-spacing:-.02em;
  color:var(--yellow);margin-bottom:.55rem;
}
.flow p{font-weight:200;font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.72)}

.files{
  margin-top:clamp(1.4rem,3vh,2rem);
  border:1px solid var(--line);border-radius:1rem;
  padding:clamp(1.4rem,2.8vw,1.9rem);
  background:linear-gradient(130deg,rgba(255,198,0,.04),transparent 62%);
}
.files b{
  display:block;font-family:var(--display);font-weight:700;font-size:1.05rem;
  color:var(--yellow);margin-bottom:.9rem;
}
.files p{font-weight:200;font-size:.94rem;line-height:1.6;color:rgba(255,255,255,.74);max-width:70ch}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.chips span{
  font-family:var(--body);font-weight:500;font-size:.68rem;letter-spacing:.05em;
  color:rgba(255,255,255,.7);
  border:1px solid var(--line);border-radius:0.3125rem;padding:.3rem .6rem;
}


/* ══════════════════ 6 · TRES CONCEPTOS, NO TREINTA ══════════════════
   Va tipografica y sin dibujo. Es la unica seccion de la pagina que
   pone un limite, y un limite dicho con adornos alrededor se lee como
   excusa. */

.stand{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(2.6rem,6vh,4.4rem) 0;
}
.stand .kick{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.8rem,4.4vw,3.2rem);
  line-height:1.02;letter-spacing:-.042em;max-width:16ch;margin-bottom:1.6rem;
}
.stand .kick em{font-style:normal;color:var(--yellow)}
.stand p{
  font-weight:200;font-size:clamp(.98rem,1.4vw,1.12rem);line-height:1.65;
  color:rgba(255,255,255,.7);max-width:58ch;
}
.stand p + p{margin-top:1.1rem}
.stand .last{color:rgba(255,255,255,.9);font-weight:400}


/* ══════════════════ 7 · LAS OCHO SECCIONES ══════════════════ */

.eight{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:820px){ .eight{grid-template-columns:1fr} }
.eight div{background:var(--black);padding:clamp(1.4rem,2.6vw,1.9rem);transition:background .5s ease}
.eight div:hover{background:rgba(255,198,0,.035)}
.eight b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1rem,1.55vw,1.12rem);letter-spacing:-.02em;
  color:var(--yellow);margin-bottom:.55rem;
}
.eight p{font-weight:200;font-size:clamp(.9rem,1.2vw,.99rem);line-height:1.6;color:rgba(255,255,255,.72)}
.eight .note{
  display:block;margin-top:.6rem;font-size:.8rem;font-style:italic;
  color:rgba(255,255,255,.42);
}


/* ══════════════════ 6b · LOS TRES CONCEPTOS DIBUJADOS ══════════════════
   Las tres marcas son para el MISMO negocio inventado, no para tres
   clientes: es lo que hace entender que son tres caminos y no tres
   trabajos. Y la primera es la que ya salio en el hero, asi que se lee
   sola cual fue la escogida. */

.stand-in{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
@media (max-width:900px){ .stand-in{grid-template-columns:1fr;gap:2.4rem} }

.cons{display:flex;flex-direction:column;gap:.9rem}
.con{
  display:flex;align-items:center;gap:clamp(1rem,2.4vw,1.7rem);
  border:1px solid var(--line);border-radius:0.75rem;
  padding:clamp(.9rem,2vw,1.2rem) clamp(1rem,2.4vw,1.5rem);
  background:rgba(255,255,255,.02);
  transition:border-color .5s ease,background .5s ease;
}
.con:hover{border-color:rgba(255,198,0,.34);background:rgba(255,198,0,.03)}
.con svg{width:clamp(3.625rem,9vw,4.875rem);height:auto;flex:none}
.con .lbl2{flex:1;min-width:0}
.con .lbl2 b{
  display:block;font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:.3rem;
}
.con .lbl2 span{
  display:block;font-weight:200;font-size:.86rem;line-height:1.45;
  color:rgba(255,255,255,.62);
}
/* La escogida. El punto amarillo dice mas que cualquier rotulo. */
.con.won{border-color:rgba(255,198,0,.44);background:rgba(255,198,0,.05)}
.con .chosen{
  flex:none;display:flex;align-items:center;gap:.45rem;
  font-family:var(--display);font-weight:700;font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);
  opacity:0;transition:opacity .7s ease;
}
.con.won .chosen{opacity:1}
.con .chosen i{width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--yellow);flex:none}
@media (max-width:560px){ .con .chosen span{display:none} }


/* ══════════════════ 8 · LO QUE SE ENTREGA ══════════════════
   SIN NUMEROS A PROPOSITO. Contar piezas obliga a cumplir el conteo, y
   ademas la cuenta vieja sumaba dos veces: un mockup del polo no es una
   pieza aparte del polo. Con iconos se ve el bulto y no se promete una
   cifra que despues hay que defender. */

.kit{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:1.125rem;overflow:hidden;
}
@media (max-width:820px){ .kit{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .kit{grid-template-columns:1fr} }
.kit div{
  background:var(--black);padding:clamp(1.4rem,2.8vw,1.9rem);
  transition:background .5s ease;
}
.kit div:hover{background:rgba(255,198,0,.035)}
.kit svg{
  width:2.125rem;height:2.125rem;margin-bottom:1rem;
  stroke:var(--yellow);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.kit b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1rem,1.5vw,1.1rem);letter-spacing:-.02em;
  color:rgba(255,255,255,.92);margin-bottom:.45rem;
}
.kit p{font-weight:200;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.66)}

.kit-tail{
  margin-top:clamp(1.3rem,2.6vh,1.8rem);
  font-weight:200;font-size:clamp(.96rem,1.35vw,1.1rem);line-height:1.6;
  color:rgba(255,255,255,.7);max-width:60ch;
}
.kit-tail b{color:var(--white);font-weight:500}


/* ══════════════════ 10 · LA BANDA DE MARCA COMPLETA ══════════════════
   Es lo ultimo que se lee antes del formulario, o sea donde se decide.
   Iba escrita como nota al pie y por eso se leia aburrida: ahora es la
   pieza mas grande de la pagina. */

.deal{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(2.8rem,7vh,5rem) 0;
  background:linear-gradient(130deg,rgba(255,198,0,.055),transparent 62%);
}
.deal .lb{
  font-family:var(--display);font-weight:600;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:1.1rem;
}
.deal .price{display:flex;align-items:baseline;gap:clamp(.8rem,2vw,1.4rem);flex-wrap:wrap;margin-bottom:.9rem}
.deal .now{
  font-family:var(--display);font-weight:800;
  font-size:clamp(3rem,9vw,6.5rem);line-height:.9;letter-spacing:-.05em;
  color:var(--yellow);
}
.deal .was{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.2rem,2.6vw,2rem);letter-spacing:-.03em;
  color:rgba(255,255,255,.34);text-decoration:line-through;
}
.deal .off{
  font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--black);background:var(--yellow);
  padding:.36rem .8rem;border-radius:999px;
}
.deal .one{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.15rem,2.4vw,1.8rem);line-height:1.2;letter-spacing:-.028em;
  color:rgba(255,255,255,.92);margin-bottom:1.8rem;
}
.deal .facts{
  display:flex;gap:clamp(1rem,2.4vw,2.2rem);flex-wrap:wrap;
  margin-top:1.7rem;padding-top:1.4rem;border-top:1px solid var(--line);
}
.deal .facts span{
  font-weight:200;font-size:.82rem;color:rgba(255,255,255,.46);
}
.deal .facts b{color:rgba(255,255,255,.78);font-weight:500}

/* ══════════════════ 9 · LO QUE ESCOGE EL CLIENTE ══════════════════ */

.pickable{
  border:1px solid var(--line);border-radius:1rem;
  padding:clamp(1.5rem,3vw,2.1rem);background:var(--ink);
}
.pickable .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);margin-bottom:1.4rem}
@media (max-width:760px){ .pickable .grid3{grid-template-columns:1fr} }
.pickable .grid3 b{
  display:block;font-family:var(--display);font-weight:700;font-size:.98rem;
  color:var(--yellow);margin-bottom:.7rem;
}
.pickable ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.pickable li{
  display:flex;align-items:center;gap:.6rem;
  font-weight:200;font-size:.88rem;color:rgba(255,255,255,.7);
}
.pickable li i{
  width:0.875rem;height:0.875rem;flex:none;border-radius:0.1875rem;
  border:1px solid rgba(255,255,255,.28);
}
.pickable li.on i{background:var(--yellow);border-color:var(--yellow);position:relative}
.pickable li.on i::after{
  content:'';position:absolute;left:0.25rem;top:1px;width:0.25rem;height:0.4375rem;
  border:solid var(--black);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.pickable .tail{
  padding-top:1.3rem;border-top:1px solid var(--line);
  font-weight:200;font-size:.94rem;line-height:1.6;color:rgba(255,255,255,.66);
}
.pickable .tail b{color:var(--white);font-weight:500}


/* ══════════════════ 10 · LA LETRA CLARA ══════════════════ */

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


/* ══════════════════ 11 · 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,.85);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,.5);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(.92rem,1.25vw,1.02rem);line-height:1.68;
  color:rgba(255,255,255,.72);
}


/* ══════════════════ 12 · 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,.46);margin-bottom:.55rem;
}
.fld label .req{color:var(--yellow);margin-left:.25em}
.fld label .opt{color:rgba(255,255,255,.26);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,.14);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,.3)}
.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,.32);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,.55)}

.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,.38);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,.68);max-width:46ch;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,.48);transition:color .35s ease}
.foot a:hover{color:var(--yellow)}
.foot .cr{font-size:.74rem;color:rgba(255,255,255,.3);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,.44);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 opacity:0 declarado aqui, un gsap.from() lee ESE cero como
   estado final y anima de cero a cero. El bloque no vuelve a aparecer
   nunca. Por eso la entrada usa fromTo con el destino escrito a mano. */
.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}
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
  /* Sin esto las muestras de color y los correos se quedarian en su
     estado de partida, o sea invisibles o apagados. */
  .sheet .safe,.sheet .swat div{opacity:1 !important;transform:none !important}
  .mail{opacity:1 !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-brand .et_pb_section,
.adn-brand .et_pb_row,
.adn-brand .et_pb_column,
.adn-brand .et_pb_module,
.adn-brand .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-brand 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-brand 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-brand        :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-brand .fld input,
.adn-brand .fld textarea,
.adn-brand .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-brand .fld input::placeholder,
.adn-brand .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-brand .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-brand .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-brand .hdr .home,
.adn-brand .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-brand .foot .home img,
.et_pb_code_inner .foot .home img{
  transition:opacity .35s ease;
}
.adn-brand .foot .home:hover img,
.et_pb_code_inner .foot .home:hover img{
  opacity:1;
}

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


/* ══════════════════ EL AIRE BAJO LA BANDA DE $2,000 ══════════════════
   DIVERGENCIA DECIDIDA DEL PROTOTIPO. NO REVERTIR.

   La seccion de la letra clara trae style="padding-top:0" escrito a
   mano en el marcado, linea 1534 del prototipo. Ese recurso se usa en
   otras cuatro secciones de la pagina y ahi esta bien, porque encima
   de ellas hay una .sec normal que ya aporta su relleno inferior.

   Encima de esta no. Encima esta la banda de Complete Brand, y el
   borde inferior de esa banda es el filo mismo de la seccion, asi que
   debajo no queda nada.

   MEDIDO EN EL PROTOTIPO, a 1440 de ancho:
     Del borde de la banda al rotulo "Before you hire us"     0px
     El mismo sitio en la otra banda con borde de la pagina,
     la de "Three concepts. Not thirty"                     180px

   Se devuelve el relleno estandar de .sec. Quedan 90px, que es
   exactamente el aire que hay encima del borde superior de la banda,
   asi que la franja queda pareja por los dos lados.

   VA CON !important PORQUE PELEA CONTRA UN ESTILO EN LINEA, y esos le
   ganan a cualquier selector por clase. Es el unico sitio del archivo
   donde hace falta, y esta es la razon. */

.adn-brand .deal + .sec,
.et_pb_code_inner .deal + .sec{
  padding-top:clamp(4rem,10vh,7.5rem) !important;
}


/* ══════════════════════════════════════════════════════════════════
   LOS ICONOS DE LAS TRES REJILLAS
   ══════════════════════════════════════════════════════════════════

   DIVERGENCIA DECIDIDA DEL PROTOTIPO. NO REVERTIR.

   El prototipo solo tiene iconos en una de las tres rejillas, la de
   "Everything your brand needs", y son de 34px, de un solo color y
   con el trazo tan fino que a ese tamaño se leen como adorno.

   Aqui llevan icono las tres:
     .eight   las ocho secciones del manual
     .kit     los seis entregables
     .plain   la letra clara

   TRES DECISIONES QUE EXPLICAN TODO LO DE ABAJO.

   1. EL MISMO CONCEPTO USA EL MISMO SIMBOLO, aunque salga en dos
      rejillas distintas. Papeleria, merchandising, uniformes, redes y
      mockups aparecen en .eight y otra vez en .kit, y llevan el mismo
      dibujo en los dos sitios. Dibujarlos distinto seria una ironia
      en una pagina que vende consistencia de marca.

   2. EL TRAZO SIEMPRE ES AMARILLO Y EL ACENTO ROTA. Asi los veinte se
      leen como una familia y no como veinte iconos sueltos, pero
      ninguna rejilla sale monocroma. Los tres acentos no son colores
      nuevos: son los de la paleta de muestra que la pagina ya enseña
      en el hero, o sea que ya estan declarados y el ojo ya los vio.

   3. EL ACENTO SE REPARTE POR POSICION, con nth-child de tres en
      tres. En una rejilla de dos columnas eso deja los colores en
      diagonal, y en una de tres columnas deja cada fila completa de
      un color. Se reparte solo: si mañana se agrega o se quita una
      tarjeta, no hay que reasignar nada a mano.
   ══════════════════════════════════════════════════════════════════ */


/* ─── La base de los veinte ─── */

.adn-brand .ico,
.et_pb_code_inner .ico{
  width:clamp(3.25rem,5.4vw,4.125rem);
  height:auto;
  margin-bottom:clamp(1rem,2vw,1.35rem);

  fill:none;
  stroke:var(--yellow);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;

  /* Sin esto, un trazo que toca el borde del lienzo sale cortado por
     la mitad: el SVG recorta en el viewBox y la mitad de fuera del
     trazo queda afuera. */
  overflow:visible;

  transition:transform .5s cubic-bezier(.16,1,.3,1);
}

/* La pieza maciza. Toma el color de acento de su tarjeta, que lo pone
   el reparto de mas abajo. */
.adn-brand .ico .sol,
.et_pb_code_inner .ico .sol{
  fill:var(--ac,var(--yellow));
  stroke:none;
}

/* Lo que va calado ENCIMA de una pieza maciza: el eje de la brujula.
   Va del color del fondo, que es lo que lo hace leerse como un hueco. */
.adn-brand .ico .hole,
.et_pb_code_inner .ico .hole{
  fill:var(--black);
  stroke:none;
}

/* Igual que lo anterior pero dibujado con trazo y no relleno: el visto
   dentro del sello. Con relleno saldria un borron. */
.adn-brand .ico .cut,
.et_pb_code_inner .ico .cut{
  fill:none;
  stroke:var(--black);
  stroke-width:2.6;
}

/* La unica letra dibujada de los veinte, la Aa del icono de
   tipografias. Es texto, no trazo: se rellena. */
.adn-brand .ico .glyph,
.et_pb_code_inner .ico .glyph{
  fill:var(--yellow);
  stroke:none;
}

/* El icono acompaña el realce que la tarjeta ya tenia al pasar el
   mouse. Muy poco: son veinte, y cualquier gesto mayor convierte la
   pagina en un tablero de luces. */
.adn-brand .eight div:hover .ico,
.adn-brand .kit div:hover .ico,
.adn-brand .plain div:hover .ico,
.et_pb_code_inner .eight div:hover .ico,
.et_pb_code_inner .kit div:hover .ico,
.et_pb_code_inner .plain div:hover .ico{
  transform:translateY(-2px) scale(1.04);
}


/* ─── EL REPARTO DEL ACENTO ───
   Tres colores rotando de tres en tres. Los tres salen de la paleta
   de muestra del hero, ya declarada arriba en :root. */

.adn-brand .eight > div:nth-child(3n+1),
.adn-brand .kit   > div:nth-child(3n+1),
.adn-brand .plain > div:nth-child(3n+1),
.et_pb_code_inner .eight > div:nth-child(3n+1),
.et_pb_code_inner .kit   > div:nth-child(3n+1),
.et_pb_code_inner .plain > div:nth-child(3n+1){ --ac:var(--s2); }

.adn-brand .eight > div:nth-child(3n+2),
.adn-brand .kit   > div:nth-child(3n+2),
.adn-brand .plain > div:nth-child(3n+2),
.et_pb_code_inner .eight > div:nth-child(3n+2),
.et_pb_code_inner .kit   > div:nth-child(3n+2),
.et_pb_code_inner .plain > div:nth-child(3n+2){ --ac:var(--s4); }

.adn-brand .eight > div:nth-child(3n+3),
.adn-brand .kit   > div:nth-child(3n+3),
.adn-brand .plain > div:nth-child(3n+3),
.et_pb_code_inner .eight > div:nth-child(3n+3),
.et_pb_code_inner .kit   > div:nth-child(3n+3),
.et_pb_code_inner .plain > div:nth-child(3n+3){ --ac:var(--s3); }


/* ─── EL TITULO DE LA LETRA CLARA, AHORA QUE HAY ICONO ───
   .plain nacio sin icono, asi que su <b> no tenia nada encima y no
   necesitaba separacion propia. Ahora si. */
.adn-brand .plain b,
.et_pb_code_inner .plain b{
  margin-bottom:.6rem;
}


/* ─── QUIEN PIDE MENOS MOVIMIENTO ───
   Los iconos se quedan quietos. No pierde nada: ninguno depende de
   moverse para decir lo que dice. */
@media (prefers-reduced-motion:reduce){
  .adn-brand .ico,
  .et_pb_code_inner .ico{
    transition:none;
    transform:none !important;
  }
}