/* ==================================================================
   ADNIUS · Home · v2 PANTALLAS GRANDES (27/09/2026)
   v2: 155 medidas de px a rem para que el inicio crezca parejo en
   pantallas grandes (ver PANTALLAS-GRANDES.md). Hasta 1600px se ve
   exactamente igual. Se quedan en px las rayas de 1px y 2px, las
   pildoras de 999px, los breakpoints, lo que va en @keyframes y el
   texto de 13px dentro del dibujo SVG del banner de YouTube.
   La regla que agranda la raiz NO va aqui: va una sola vez en
   header.css al terminar todas las paginas.
   ------------------------------------------------------------------
   Portado de adnius-home-v59.html. Todo va prefijado con .adn-home
   para que nada se escape a otras paginas ni pelee con Divi.

   Orden del archivo, y no es casual:
     1 · Variables
     2 · Puente con Divi
     3 · Hero: estructura y capas
     4 · Tipografia compartida
     5 · Hero: contenido
     6 · Botones
     7 · Cifras
     8 · Movil
     9 · Manifiesto

   El puente con Divi va arriba porque neutraliza estilos de fabrica y
   nuestras reglas tienen que poder pisarlo por orden de aparicion.

   El bloque de movil va al final por lo mismo al reves: una media
   query NO suma especificidad. Si se escribe antes que una regla
   general con el mismo selector, la general gana por venir despues y
   el ajuste de movil no se aplica nunca.
   ================================================================== */


/* ══════════════════ 1 · VARIABLES ══════════════════ */

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

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

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

  /* La posicion del haz la reescribe home.js sobre .adn-hero. Estos
     valores son solo el arranque, para que el primer cuadro no salga
     descolocado. --beam si vive aqui: sin ella la mascara del velo es
     invalida y el velo desaparece entero. */
  --mx:50%; --my:45%; --beam:16.875rem;
}


/* ══════════════════ 2 · PUENTE CON DIVI ══════════════════ */

/* Nuestras secciones van a sangre. Divi les pone relleno propio,
   ancho maximo de 1080px y margenes automaticos. */
.adn-home .adn-sec{
  position:relative;
  padding:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--body);
}
.adn-home .adn-sec .et_pb_row{
  width:100%;max-width:none;margin:0;padding:0;
}
.adn-home .adn-sec .et_pb_column{
  width:100%;margin:0;padding:0;
}
.adn-home .adn-sec .et_pb_module{
  margin:0;
}

/* Divi envuelve el contenido de cada modulo de texto en varios div y
   un <p>, y cada capa trae color, tamano y margen propios. Aqui todo
   eso pasa a heredar, para que las reglas de tipografia de mas abajo
   manden desde el modulo hacia adentro sin tener que repetirse.

   font es abreviatura: resetea familia, tamano, peso, estilo e
   interlineado de un solo golpe. */
.adn-home .adn-sec .et_pb_text,
.adn-home .adn-sec .et_pb_text_inner,
.adn-home .adn-sec .et_pb_text p{
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-align:inherit;
  margin:0;
}

/* Divi le pone et_pb_bg_layout_light a cada modulo y con esa clase
   pinta el texto en gris, porque da por sentado un fondo claro. */
.adn-home .adn-sec .et_pb_bg_layout_light,
.adn-home .adn-sec .et_pb_bg_layout_light p{
  color:inherit;
}

/* Dentro del hero, Row, Column y los envoltorios del modulo Code se
   quedan sin posicion propia.

   Es la regla mas importante del archivo. Si alguno de esos es
   relative, las cuatro capas del muro se anclan a el en vez de a la
   seccion: quedan del ancho de la columna y de cero de alto, y
   desaparecen. El muro lo disimula porque sus columnas de imagenes se
   desbordan y la seccion las recorta; el velo no, porque no tiene
   hijos y su unico contenido es su propio fondo. */
.adn-home .adn-hero .et_pb_row,
.adn-home .adn-hero .et_pb_column,
.adn-home .adn-hero .et_pb_code,
.adn-home .adn-hero .et_pb_code_inner{
  position:static;
}


/* ══════════════════ 3 · HERO: ESTRUCTURA Y CAPAS ══════════════════ */

.adn-home .adn-hero{
  position:relative;
  min-height:100svh;
  display:grid;place-items:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--black);
}

/* --- El muro: columnas de portadas que ruedan sin parar --- */

.adn-home .adn-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;
}
.adn-home .adn-hero .reel-col{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:0.875rem;
  will-change:transform;
}
.adn-home .adn-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. */
.adn-home .adn-hero .tile img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.28) contrast(1.02);
  transition:filter .9s cubic-bezier(.16,1,.3,1);
}
.adn-home .adn-hero .tile.touched img{filter:grayscale(0) contrast(1.02)}

/* --- El velo: cubre el muro y se abre bajo el cursor ---
   Una sola capa negra sobre el muro, con un agujero donde esta el
   cursor. La mascara va al reves de lo intuitivo: opaca en todas
   partes y transparente en el centro del haz. Asi la linterna no
   ilumina el muro, le quita el velo. */

.adn-home .adn-hero .veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(0,0,0,.6);
  /* Caida larga y en muchos pasos: con dos paradas el borde del haz
     se nota como un circulo dibujado. */
  -webkit-mask-image:radial-gradient(circle var(--beam) at var(--mx) var(--my),
    transparent 0%,rgba(0,0,0,.06) 20%,rgba(0,0,0,.2) 36%,rgba(0,0,0,.42) 52%,
    rgba(0,0,0,.66) 68%,rgba(0,0,0,.86) 84%,#000 100%);
  mask-image:radial-gradient(circle var(--beam) at var(--mx) var(--my),
    transparent 0%,rgba(0,0,0,.06) 20%,rgba(0,0,0,.2) 36%,rgba(0,0,0,.42) 52%,
    rgba(0,0,0,.66) 68%,rgba(0,0,0,.86) 84%,#000 100%);
}

/* Sin soporte de mascara el agujero no existe, pero el velo sigue
   cumpliendo su parte: el muro se ve al 54% y no queda negro. */
@supports not ((mask-image:radial-gradient(#000,#000)) or (-webkit-mask-image:radial-gradient(#000,#000))){
  .adn-home .adn-hero .veil{background:rgba(0,0,0,.54)}
}

/* --- El resplandor calido que sigue al cursor --- */

.adn-home .adn-hero .glow{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:screen;
  background:radial-gradient(circle calc(var(--beam)*1.6) at var(--mx) var(--my),
    rgba(255,198,0,.07) 0%,rgba(255,140,0,.035) 38%,transparent 72%);
}

/* --- Cierre de bordes ---
   Ya no oscurece el muro. Solo cose el borde de arriba con el header
   y el de abajo con la seccion siguiente. En el medio no hay nada. */

.adn-home .adn-hero .vig{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.6) 0%,transparent 16%,transparent 76%,rgba(0,0,0,.9) 100%);
}


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

/* El eyebrow es flex y no block porque cada letra va en su propio
   span. La variante mid lo centra; sin ella queda a la izquierda,
   que es como va en las secciones interiores. */

.adn-home .adn-sec .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;
}

.adn-home .adn-sec .eyebrow.mid{justify-content:center}

/* Los span los crea home.js, una letra cada uno. El --i le da a cada
   letra su turno: multiplicado por el retardo negativo, cada una
   arranca la animacion en un punto distinto del ciclo, y el color se
   ve correr de izquierda a derecha en vez de cambiar todo a la vez. */
.adn-home .adn-sec .eyebrow span{
  display:inline-block;
  animation:spectrum 9s linear infinite;
  animation-delay:calc(var(--i) * -.42s);
}

@keyframes spectrum{
  0%,100%{color:var(--white)}
  20%{color:var(--yellow)}
  40%{color:var(--orange)}
  60%{color:var(--green)}
  80%{color:var(--white)}
}

/* --- Titular --- */

/* El titular es un h1 dentro del modulo, no el modulo mismo. Divi y
   WordPress le dan tamano, peso y margen propios a los encabezados,
   asi que aqui todo eso pasa a heredar y las reglas de .big mandan
   desde el modulo hacia adentro. */
.adn-home .adn-sec .big h1,
.adn-home .adn-sec .big h2{
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-align:inherit;
  margin:0;
  padding:0;
}

.adn-home .adn-sec .big{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.1rem,6vw,5rem);
  line-height:1;letter-spacing:-.03em;
  color:var(--white);
}
/* La cursiva que pongas en el editor de Divi sale derecha y amarilla */
.adn-home .adn-sec .big em{font-style:normal;color:var(--yellow)}

/* Cada linea en su ventana. El overflow oculto es lo que hace que la
   linea entre desde abajo sin verse llegar. Las crea home.js. */
.adn-home .adn-sec .lw{
  display:block;overflow:hidden;
  padding-bottom:.1em;margin-bottom:-.1em;
}
.adn-home .adn-sec .ln{
  display:block;
  will-change:transform;
  backface-visibility:hidden;
}

/* --- Parrafo de entrada --- */

.adn-home .adn-sec .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;
}


/* ══════════════════ 5 · HERO: CONTENIDO ══════════════════ */

/* .inner lo arma home.js, porque Divi no permite envolver varios
   modulos en un contenedor propio desde el builder.

   Tiene que existir de verdad y no lo puede hacer el Row: .inner es
   position:relative, y si el Row lo fuera, las capas del muro se
   anclarian a el. El Code del muro y las cifras se quedan fuera de
   .inner justo por eso. */
.adn-home .adn-hero .inner{
  position:relative;z-index:4;
  text-align:center;
  padding:0 var(--pad);
  max-width:73.75rem;
  margin:0 auto;
  /* El bloque no intercepta el cursor: la linterna tiene que seguir
     funcionando aunque el mouse pase por encima del texto. */
  pointer-events:none;
}
.adn-home .adn-hero .inner a,
.adn-home .adn-hero .inner button{pointer-events:auto}

/* Halo detras del texto. No cubre el bloque entero: se ajusta a las
   lineas y cae rapido. El trabajo de legibilidad lo hace sobre todo
   la sombra del propio titular, que no le cuesta nada al fondo porque
   solo existe donde hay letras. */
.adn-home .adn-hero .inner::before{
  content:'';
  position:absolute;inset:0 -6%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 58% 52% at 50% 50%,
    rgba(0,0,0,.42) 0%,rgba(0,0,0,.2) 52%,transparent 82%);
  filter:blur(2.25rem);
}

/* Ocultas desde el CSS y no desde GSAP: si esperamos a que arranque
   el JavaScript se alcanza a ver el titular ya colocado, y despues
   salta a su posicion de entrada. Un parpadeo feo. */
.adn-home .adn-hero .ln{opacity:0}

.adn-home .adn-hero .eyebrow{margin-bottom:2.4rem}
.adn-home .adn-hero .big{margin-bottom:1.8rem}

.adn-home .adn-hero .lede{
  margin:0 auto 2.6rem;
  font-weight:300;
  color:rgba(255,255,255,.94);
  text-shadow:0 2px 1.625rem rgba(0,0,0,.8),0 1px 0.25rem rgba(0,0,0,.65);
}


/* ══════════════════ 6 · BOTONES ══════════════════ */

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

.adn-home .adn-sec .book{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-block;
  font-family:var(--display);font-weight:600;font-size:.8rem;
  text-decoration:none;
  padding:.78rem 1.5rem;
  border-radius:999px;
  background:var(--yellow);color:var(--black);
  border:0;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.adn-home .adn-sec .book:hover{
  transform:translateY(-2px);
  box-shadow:0 0.625rem 2.125rem rgba(255,198,0,.32);
}

/* 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. */
.adn-home .adn-sec .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);
}
.adn-home .adn-sec .book:hover::after{background-position:-60% 0}

/* El halo late despacio solo en los llamados grandes, no en el header */
@keyframes ctaHalo{
  0%,100%{box-shadow:0 0 0 0 rgba(255,198,0,.3)}
  55%{box-shadow:0 0 0 14px rgba(255,198,0,0)}
}
/* Prototipo linea 92: el halo es de los tres llamados grandes, el del
   hero, el de los ganchos y el del cierre. El del header no late. */
.adn-home .adn-hero .book,
.adn-home .adn-hook .book,
.adn-home .adn-close .book{animation:ctaHalo 3.4s ease-out infinite}
.adn-home .adn-hero .book:hover,
.adn-home .adn-hook .book:hover,
.adn-home .adn-close .book:hover{
  animation:none;
  box-shadow:0 0.75rem 2.5rem rgba(255,198,0,.4);
}

/* El secundario: dos lineas. La apagada siempre esta, la amarilla se
   dibuja de izquierda a derecha. Asi el subrayado se siente vivo. */
.adn-home .adn-sec .ghost{
  position:relative;
  font-family:var(--body);
  font-size:.84rem;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;
  color:rgba(255,255,255,.6);
  padding-bottom:.42rem;
  transition:color .35s ease;
}
.adn-home .adn-sec .ghost::before,
.adn-home .adn-sec .ghost::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
}
.adn-home .adn-sec .ghost::before{background:rgba(255,255,255,.22)}
.adn-home .adn-sec .ghost::after{
  background:var(--yellow);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.adn-home .adn-sec .ghost:hover{color:var(--white)}
.adn-home .adn-sec .ghost:hover::after{transform:scaleX(1)}

/* Divi trae su propio boton con borde, fondo y flecha. Si algun dia
   usas un modulo Button en vez de un enlace, esto lo desarma. */
.adn-home .adn-sec .book.et_pb_button,
.adn-home .adn-sec .ghost.et_pb_button{
  border:0;
}
.adn-home .adn-sec .book.et_pb_button::before,
.adn-home .adn-sec .book.et_pb_button::after,
.adn-home .adn-sec .ghost.et_pb_button::before{
  display:none;
}


/* ══════════════════ 7 · CIFRAS ══════════════════ */

/* Van pegadas al borde de abajo del hero y fuera de .inner, porque su
   posicion se mide contra la seccion completa. */
.adn-home .adn-hero .figs{
  position:absolute;bottom:2.6rem;left:0;right:0;z-index:4;
  display:flex;justify-content:center;
  gap:clamp(2rem,7vw,5.5rem);
  flex-wrap:wrap;
}
.adn-home .adn-hero .figs b{
  display:block;
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,3vw,2.3rem);
  line-height:1;letter-spacing:-.02em;
  color:var(--white);
  /* Sin esto los digitos bailan mientras el contador sube */
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.adn-home .adn-hero .figs span{
  display:block;margin-top:.55rem;
  font-family:var(--body);font-weight:300;
  font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  text-align:center;
}


/* ══════════════════ 8 · MOVIL ══════════════════
   Recordatorio: este bloque va al final a proposito. Una media query
   no suma especificidad, asi que todo lo que pise reglas de arriba
   tiene que vivir aqui abajo. */

@media (max-width:900px){

  /* El haz de escritorio queda diminuto en un telefono */
  .adn-home .adn-hero{--beam:min(62vw,20rem)}

  /* Recorte vertical: se queda con la cabecera de cada sitio, que es
     la parte reconocible, y hacen falta menos piezas para llenar. */
  .adn-home .adn-hero .wall{
    inset:-24% -14%;gap:0.625rem;
    transform:rotate(-8deg) scale(1.12);
  }
  .adn-home .adn-hero .reel-col{gap:0.625rem}
  .adn-home .adn-hero .tile{aspect-ratio:3/4;border-radius:0.1875rem}
  /* Mas claras que en escritorio: aqui no hay linterna que las revele */
  .adn-home .adn-hero .tile img{filter:grayscale(.12) contrast(1.02);opacity:.74}

  /* Sin cursor no hay agujero que perseguir, asi que el velo se
     aplana y baja un poco su peso. */
  .adn-home .adn-hero .veil{
    background:rgba(0,0,0,.42);
    -webkit-mask-image:none;mask-image:none;
  }

  /* El cierre de bordes se cierra sobre la franja del texto y se abre
     en el resto: asi las portadas se ven de verdad justo donde no hay
     letras. */
  .adn-home .adn-hero .vig{
    background:
      radial-gradient(ellipse 88% 30% at 50% 44%,rgba(0,0,0,.6) 0%,rgba(0,0,0,.32) 55%,transparent 100%),
      radial-gradient(ellipse 78% 62% at 50% 46%,transparent 0%,rgba(0,0,0,.12) 60%,rgba(0,0,0,.55) 92%),
      linear-gradient(to bottom,rgba(0,0,0,.7) 0%,transparent 24%,transparent 62%,rgba(0,0,0,.96) 100%);
  }
  .adn-home .adn-hero .glow{
    background:radial-gradient(circle calc(var(--beam)*1.5) at var(--mx) var(--my),
      rgba(255,198,0,.3) 0%,rgba(255,112,0,.13) 42%,transparent 74%);
  }

  /* Con las portadas mas visibles, el texto necesita su propia base */
  .adn-home .adn-hero .big,
  .adn-home .adn-hero .lede{
    text-shadow:0 2px 1.5rem rgba(0,0,0,.98),0 2px 0.5rem rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.6);
  }
  .adn-home .adn-hero .figs b,
  .adn-home .adn-hero .figs span{
    text-shadow:0 2px 1.125rem rgba(0,0,0,.98),0 1px 0.25rem rgba(0,0,0,.85);
  }
}

/* Las cifras eran lo primero que se caia en movil, y son justo la
   prueba social que sostiene el titular. Se quedan, mas compactas. */
@media (max-width:620px){
  .adn-home .adn-hero .figs{bottom:1.5rem;gap:1.6rem}
  .adn-home .adn-hero .figs b{font-size:1.32rem}
  .adn-home .adn-hero .figs span{font-size:.55rem;letter-spacing:.16em;margin-top:.35rem}
}

@media (max-width:360px){
  .adn-home .adn-hero .figs{gap:1.1rem}
  .adn-home .adn-hero .figs b{font-size:1.15rem}
  .adn-home .adn-hero .figs span{font-size:.5rem;letter-spacing:.1em}
}

/* Quien pide menos movimiento no ve la ola ni el haz, pero lee igual */
@media (prefers-reduced-motion:reduce){
  .adn-home .adn-sec .eyebrow span{animation:none;color:var(--white)}
  .adn-home .adn-hero .book{animation:none}
  .adn-home .adn-hero .glow{display:none}
  .adn-home .adn-hero .ln{opacity:1}
  .adn-home *{transition-duration:.001ms !important}
}

/* ══════════════════ 9 · MANIFIESTO ══════════════════
   Portado de adnius-home-v59.html, lineas 299 a 304, mas el ajuste
   de movil de la linea 1609.

   En el prototipo el ancho maximo de 1500px va en la seccion. Aqui va
   en el Row: la seccion tiene que quedarse a lo ancho para que su
   fondo negro llegue a los bordes en pantallas grandes.

   Los gap a cero no son adorno. Divi 5 hace flex la seccion, el Row y
   la columna, y les pone 60px y 30px de separacion entre hijos. Aqui
   eso metia 30px entre el titular y el .sig: el margen declarado era
   de 28.8px y el hueco real de 59px. Con el gap fuera, los valores
   del prototipo funcionan tal cual y no hacen falta compensaciones. */

.adn-home .adn-manifesto{
  padding:clamp(6.5rem,15vh,11rem) var(--pad) clamp(1.8rem,3.6vh,2.7rem);
  gap:0;
}
.adn-home .adn-manifesto .et_pb_row{
  max-width:93.75rem;
  margin:0 auto;
  gap:0;
}
.adn-home .adn-manifesto .et_pb_column{
  gap:0;
}

.adn-home .adn-manifesto .big{max-width:19ch}

.adn-home .adn-manifesto .sig{
  margin-top:1.8rem;
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.38);
}

@media (max-width:900px){
  /* El eyebrow del manifiesto colgaba lejos de su titular */
  .adn-home .adn-manifesto .sig{margin-top:.9rem}

  /* Y con el .sig ya arriba, el manifiesto y las areas quedaban
     pegados. En escritorio el aire lo pone el rail, que mide 100svh y
     centra su contenido; en telefono el rail es estatico y ese aire
     desaparece. Se repone aqui. */
  .adn-home .adn-manifesto{padding-bottom:clamp(3.5rem,8vh,5rem)}

  /* DIVERGENCIA DECIDIDA DEL PROTOTIPO: el aire de arriba baja un 40%
     en telefono. El prototipo usa clamp(6.5rem,15vh,11rem) sin bajarlo
     en movil, y ahi el hueco entre las cifras del hero y el titular
     queda demasiado largo. Escritorio no cambia. */
  .adn-home .adn-manifesto{padding-top:clamp(3.9rem,9vh,6.6rem)}
}


/* ══════════════════ 10 · LAS 7 AREAS ══════════════════
   Portado de adnius-home-v59.html, lineas 306 a 431, mas los ajustes
   de pantalla angosta de las lineas 1605 a 1623.

   Reparto con Divi:
     Seccion   clases "adn-sec adn-areas", CSS ID "services"
     Row       pasa a ser la rejilla de dos columnas
     Column 1  clase "rail"    el indice, se queda pegado arriba
     Column 2  clase "panels"  los siete modulos de texto

   La capa .viz no esta en Divi: la arma home.js como hermana del Row.

   El prototipo tiene un reset global (*{margin:0;padding:0}) que aqui
   no existe. Por eso figure, ol, ul, li y h3 llevan su margen y su
   relleno a cero de forma explicita, y las imagenes llevan display
   block. Sin eso WordPress y Divi meten lo suyo. */

/* El gap va a cero por tercera vez en esta seccion: Divi 5 marca la
   seccion como et_flex_section y le pone 60px entre sus hijos. Como
   .viz y el Row son hermanos, ese gap empujaba el Row 60px hacia
   abajo. Lo mismo pasa en el rail con 30px y en .panels con 30px. */
.adn-home .adn-areas{
  position:relative;
  background:var(--black);
  gap:0;
}

/* --- La rejilla --- */

/* El bloque 2 dejo el Row a 100% sin relleno y la Column a 100%. Aqui
   se recupera el ancho maximo y el relleno lateral, y el Row pasa a
   ser la rejilla. Gana por orden de aparicion, no por especificidad:
   los dos selectores tienen tres clases. */
.adn-home .adn-areas .et_pb_row{
  display:grid;
  grid-template-columns:minmax(17.5rem,34%) 1fr;
  gap:clamp(2rem,6vw,6rem);
  padding:0 var(--pad);
  max-width:93.75rem;
  margin:0 auto;
  position:relative;
  z-index:1;
}

/* Divi arma sus columnas con anchos calculados y float. Dentro de una
   rejilla eso sobra: la pista decide el ancho. */
.adn-home .adn-areas .et_pb_column{
  width:auto;
  float:none;
}

/* --- Capa visual --- */

/* Se queda fija mientras el texto pasa por encima. El margen negativo
   la saca del flujo para que no empuje nada hacia abajo.

   Divi 5 marca la seccion como et_flex_section y la pinta con flex.
   Ahi .viz entra como un item mas y se encoge a cero de ancho, que fue
   justo lo que paso: la caja medida daba 0 x 201. Por eso lleva ancho
   propio, flex a cero y basis del 100%: asi ocupa la seccion completa
   sin depender de como reparta el flex. */
.adn-home .adn-areas .viz{
  position:sticky;top:0;
  width:100%;flex:0 0 100%;
  height:100svh;min-height:100svh;margin-bottom:-100svh;
  z-index:0;pointer-events:none;overflow:hidden;
}

.adn-home .adn-areas .viz figure{
  position:absolute;inset:0;opacity:0;margin:0;
}
.adn-home .adn-areas .viz img{
  display:block;
  position:absolute;right:-7%;top:50%;
  width:min(64vw,58.75rem);aspect-ratio:16/10;object-fit:cover;
  max-width:none;
  filter:saturate(1.08) contrast(1.04) brightness(1.02);
  /* El difuminado a negro por los bordes: la imagen no tiene marco,
     emerge de la sombra y se disuelve en ella. */
  -webkit-mask-image:radial-gradient(ellipse 60% 64% at 58% 50%,#000 14%,rgba(0,0,0,.8) 46%,transparent 80%);
  mask-image:radial-gradient(ellipse 60% 64% at 58% 50%,#000 14%,rgba(0,0,0,.8) 46%,transparent 80%);
  will-change:transform,opacity;
}

/* En vez de apagar la imagen entera, se oscurece solo la mitad
   izquierda, que es donde va el texto. La derecha queda a color pleno
   y con luz. */
.adn-home .adn-areas .viz::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    #000 0%,rgba(0,0,0,.94) 26%,rgba(0,0,0,.62) 45%,
    rgba(0,0,0,.2) 62%,transparent 76%);
}

/* Resplandor calido detras, para que no quede un gris muerto */
.adn-home .adn-areas .viz::after{
  content:'';position:absolute;right:2%;top:50%;transform:translateY(-50%);
  width:min(46vw,41.25rem);height:min(46vw,41.25rem);border-radius:50%;
  background:radial-gradient(circle,rgba(255,198,0,.09) 0%,rgba(255,112,0,.04) 45%,transparent 70%);
  filter:blur(3.125rem);
}

/* --- El riel --- */

/* El gap va a cero a proposito: Divi 5 le pone 30px de separacion
   entre los hijos de la columna, y eso se suma al margin-bottom del
   eyebrow. Medido: 65px de hueco hasta el riel contra los 35px del
   prototipo, que son exactamente los 30px del gap. */
.adn-home .adn-areas .rail{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  gap:0;
}
.adn-home .adn-areas .rail .eyebrow{margin-bottom:2.2rem}

.adn-home .adn-areas .rail ol{
  list-style:none;
  margin:0;padding:0;
}
.adn-home .adn-areas .rail li{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.35rem,2.5vw,2.15rem);
  line-height:1.28;letter-spacing:-.02em;
  color:rgba(255,255,255,.2);
  margin:0;padding:0;
  transition:color .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
  transform-origin:left center;
  /* Se puede saltar a cualquier area sin tener que rodar hasta ella */
  cursor:pointer;width:fit-content;
}
.adn-home .adn-areas .rail li:hover{color:rgba(255,255,255,.62);transform:translateX(0.375rem)}
.adn-home .adn-areas .rail li:focus-visible{outline:1px solid rgba(255,198,0,.6);outline-offset:0.375rem;border-radius:0.1875rem}
.adn-home .adn-areas .rail li.on{color:var(--white);transform:translateX(0.625rem)}
.adn-home .adn-areas .rail li.on::before{
  content:'';display:inline-block;width:.5em;height:2px;
  background:var(--yellow);vertical-align:middle;
  margin-right:.42em;margin-bottom:.12em;
}

/* --- Los paneles --- */

/* El gap va a cero por lo mismo que en el rail: Divi 5 hace la
   columna flex y le pone 30px entre cada hijo. Con siete paneles son
   seis huecos, y la seccion crecia 294px de mas. Medido: 208px de
   sobrante dentro de .panels contra los 28px del prototipo. */
.adn-home .adn-areas .panels{
  padding:4.8vh 0;
  gap:0;
}

.adn-home .adn-areas .panel{
  min-height:66svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:1.8rem 0;
}

/* El h3 vive dentro del modulo de texto, no es el modulo. Divi y
   WordPress le dan tamano, peso y margen propios a los encabezados,
   asi que aqui se escribe el estilo completo. */
.adn-home .adn-areas .panel h3{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,5vw,3.6rem);line-height:1;letter-spacing:-.035em;
  color:var(--white);
  margin:0 0 2.2rem;padding:0;
  text-shadow:0 2px 1.875rem rgba(0,0,0,.85);
}

.adn-home .adn-areas .panel ul{
  list-style:none;
  display:flex;flex-direction:column;gap:.95rem;
  max-width:52ch;
  margin:0;padding:0;
}
.adn-home .adn-areas .panel li{
  font-family:var(--body);
  font-weight:300;font-size:clamp(.98rem,1.4vw,1.22rem);line-height:1.4;
  color:rgba(255,255,255,.88);
  margin:0;padding:0 0 0 1.4rem;position:relative;
  /* Van sobre fotografia: sin sombra se pierden en las zonas claras */
  text-shadow:0 1px 1.125rem rgba(0,0,0,.9),0 1px 0.1875rem rgba(0,0,0,.7);
}
.adn-home .adn-areas .panel li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:.5rem;height:1px;background:var(--yellow);opacity:.7;
}

/* --- Imagen dentro del panel, solo en pantalla angosta --- */

/* En movil el panel fijo no funciona, asi que cada area lleva su
   propia imagen detras del texto. La genera home.js solo en pantallas
   angostas: en escritorio serian siete descargas para nada. */
.adn-home .adn-areas .pimg{display:none}

/* --- Pantalla angosta --- */

@media (max-width:900px){

  .adn-home .adn-areas .viz{display:none}

  .adn-home .adn-areas .et_pb_row{
    grid-template-columns:1fr;
    gap:.35rem;
  }

  /* El indice se va. Toda su logica corre solo en escritorio, asi que
     en telefono eran nombres muertos, y ademas repetia uno por uno los
     siete paneles que vienen justo debajo. */
  .adn-home .adn-areas .rail ol{display:none}
  .adn-home .adn-areas .rail{position:static;height:auto}
  .adn-home .adn-areas .rail .eyebrow{margin-bottom:0}

  .adn-home .adn-areas .panels{padding:0 0 2rem}

  .adn-home .adn-areas .panel{
    position:relative;isolation:isolate;
    min-height:auto;padding:3.5rem 0;
    border-top:1px solid rgba(255,255,255,.09);
  }
  .adn-home .adn-areas .panel:first-child{
    padding-top:.6rem;border-top:0;
  }

  .adn-home .adn-areas .pimg{
    display:block;position:absolute;z-index:-1;
    top:50%;right:calc(var(--pad) * -1);translate:0 -50%;
    aspect-ratio:16/11;object-fit:cover;
    /* DIVERGENCIA DECIDIDA DEL PROTOTIPO: la foto de cada panel va
       mas grande y mas encendida que en el archivo, que usa
       width:78%, max-width:420px, opacity:.5 y brightness(.9). En
       telefono real ahi se hundia y no se distinguia que era.
       Escritorio no cambia: en escritorio manda la capa .viz. */
    width:112%;max-width:38.75rem;
    opacity:.97;filter:saturate(1.18) brightness(1.16);
    -webkit-mask-image:radial-gradient(ellipse 62% 66% at 62% 50%,#000 10%,rgba(0,0,0,.75) 45%,transparent 80%);
    mask-image:radial-gradient(ellipse 62% 66% at 62% 50%,#000 10%,rgba(0,0,0,.75) 45%,transparent 80%);
  }
	
  /* Un velo por la izquierda para que el texto siempre gane */
  .adn-home .adn-areas .panel::after{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 34%,rgba(0,0,0,.55) 58%,transparent 82%);
  }

  .adn-home .adn-areas .panel h3,
  .adn-home .adn-areas .panel li{
    text-shadow:0 1px 1.25rem rgba(0,0,0,.95),0 1px 0.1875rem rgba(0,0,0,.8);
  }
}


/* ══════════════════ 11 · SERVICIOS ESPECIALIZADOS ══════════════════
   Portado de adnius-home-v59.html, lineas 439 a 523.

   Reparto con Divi:
     Seccion   clases "adn-sec adn-spec", CSS ID "specialized"
     Row       hace de <header> y de contenedor de la lista
     Column    trece modulos Text: eyebrow, titular y once filas

   En el prototipo el ancho maximo de 1500px esta dos veces, en el
   <header> y en .list, porque son hermanos. Aqui va una sola vez en el
   Row, que los envuelve a los dos.

   El padding lateral del prototipo esta en el <header> y NO en .list:
   en la lista lo pone cada .sbtn. Por eso aqui va en el eyebrow y en
   el titular, no en el Row.

   El gap va a cero por cuarta vez en el archivo. Divi 5 marca la
   seccion como et_flex_section y separa a sus hijos; aqui eso abriria
   las once filas, que van pegadas por su borde. */

.adn-home .adn-spec{
  position:relative;
  background:var(--black);
  padding:clamp(2.4rem,5.4vh,4.2rem) 0 clamp(3rem,7vh,5rem);
  gap:0;
}
.adn-home .adn-spec .et_pb_row{
  max-width:93.75rem;
  margin:0 auto;
  padding:0;
  gap:0;
}
.adn-home .adn-spec .et_pb_column{
  gap:0;
}

/* --- Cabecera ---
   El padding-bottom del <header> del prototipo pasa a margin-bottom
   del titular: mismo hueco, y asi el borde superior de .list queda
   pegado donde toca. */

/* Las dos llevan !important por una razon concreta: el bloque 2
   declara font:inherit sobre .et_pb_text, y como estas clases van
   puestas EN el modulo, ese atajo cae sobre el mismo elemento y
   resetea el margin a cero. No es un problema de especificidad: las
   dos reglas empatan en tres clases y esta va despues. Es que la
   abreviatura font borra el margen en la misma declaracion. */
.adn-home .adn-spec .eyebrow{
  padding:0 var(--pad);
  margin-bottom:1.4rem !important;
}
.adn-home .adn-spec .big{
  padding:0 var(--pad);
  margin-bottom:clamp(2rem,4vh,3rem) !important;
  font-size:clamp(1.7rem,3.8vw,3.1rem);
  max-width:20ch;
}

/* --- La lista ---
   .list la crea home.js dentro de la Column y muda las once filas
   dentro de ella. */

.adn-home .adn-spec .list{
  border-top:1px solid rgba(255,255,255,.1);
}
.adn-home .adn-spec .srow{
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.1);
}

/* --- El boton de cada fila --- */

.adn-home .adn-spec .sbtn{
  position:relative;width:100%;background:none;border:0;cursor:pointer;
  display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem);
  padding:clamp(1.1rem,2.4vh,1.7rem) var(--pad);
  text-align:left;color:inherit;overflow:hidden;
  transition:background .4s ease;
}
.adn-home .adn-spec .srow:hover .sbtn,
.adn-home .adn-spec .srow.open .sbtn{background:rgba(255,255,255,.026)}

/* Barrido de luz: el mismo lenguaje del hero, sin repetirlo */
.adn-home .adn-spec .sweep{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.adn-home .adn-spec .sweep i{
  position:absolute;top:0;bottom:0;width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,198,0,.14),transparent);
  transform:translateX(-150%);
}
.adn-home .adn-spec .srow:hover .sweep i{animation:sweep 1.15s cubic-bezier(.16,1,.3,1) forwards}
@keyframes sweep{to{transform:translateX(400%)}}

/* --- El icono --- */

.adn-home .adn-spec .sicon{
  width:clamp(1.875rem,3vw,2.625rem);height:clamp(1.875rem,3vw,2.625rem);flex:none;
  display:block;
  object-fit:contain;opacity:.34;
  filter:grayscale(1) brightness(2.6);
  transition:opacity .5s ease,filter .5s ease,transform .6s cubic-bezier(.16,1,.3,1);
}
.adn-home .adn-spec .srow:hover .sicon,
.adn-home .adn-spec .srow.open .sicon{opacity:1;filter:none;transform:scale(1.12)}

/* --- El nombre --- */

.adn-home .adn-spec .sname{
  flex:1;font-family:var(--display);font-weight:600;
  font-size:clamp(1.1rem,2.5vw,2rem);line-height:1.1;letter-spacing:-.025em;
  color:rgba(255,255,255,.62);
  transition:color .45s ease,transform .55s cubic-bezier(.16,1,.3,1);
}
.adn-home .adn-spec .srow:hover .sname{color:var(--white);transform:translateX(0.625rem)}
.adn-home .adn-spec .srow.open .sname{color:var(--yellow);transform:translateX(0.625rem)}

/* --- El mas que gira --- */

.adn-home .adn-spec .plus{
  position:relative;width:0.9375rem;height:0.9375rem;flex:none;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.adn-home .adn-spec .plus::before,
.adn-home .adn-spec .plus::after{
  content:'';position:absolute;left:0;top:0.4375rem;width:0.9375rem;height:1px;
  background:rgba(255,255,255,.45);transition:background .4s ease;
}
.adn-home .adn-spec .plus::after{transform:rotate(90deg)}
.adn-home .adn-spec .srow:hover .plus::before,
.adn-home .adn-spec .srow:hover .plus::after{background:var(--white)}
.adn-home .adn-spec .srow.open .plus{transform:rotate(135deg)}
.adn-home .adn-spec .srow.open .plus::before,
.adn-home .adn-spec .srow.open .plus::after{background:var(--yellow)}

/* --- El cuerpo que se despliega ---
   La altura la anima GSAP. .sinner es el propio <ul> que viene del
   modulo de Divi: home.js le pone la clase y le mete el .sask dentro.

   El prototipo tiene un reset global (*{margin:0;padding:0}) que aqui
   no existe, asi que el ul y los li llevan sus ceros explicitos. */

.adn-home .adn-spec .sbody{overflow:hidden;height:0}

.adn-home .adn-spec .sinner{
  padding:clamp(1rem,2.2vh,1.6rem) var(--pad) clamp(1.8rem,4vh,2.8rem);
  display:grid;grid-template-columns:1fr 1fr;
  gap:.75rem clamp(2rem,5vw,4rem);
  margin:0 0 0 calc(clamp(1.875rem,3vw,2.625rem) + clamp(1rem,2.4vw,2.2rem));
  list-style:none;
}
@media (max-width:760px){
  .adn-home .adn-spec .sinner{grid-template-columns:1fr;margin-left:0}
}

.adn-home .adn-spec .sinner li{
  list-style:none;
  font-family:var(--body);
  font-weight:200;font-size:clamp(.9rem,1.25vw,1.04rem);
  line-height:1.45;color:rgba(255,255,255,.6);
  margin:0;padding:0 0 0 1.2rem;position:relative;
}
.adn-home .adn-spec .sinner li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:.45rem;height:1px;background:var(--yellow);opacity:.65;
}

/* --- El llamado de cada fila --- */

.adn-home .adn-spec .sask{
  grid-column:1/-1;margin-top:1rem;justify-self:start;
  font-family:var(--display);font-weight:600;font-size:.86rem;
  text-decoration:none;color:var(--black);background:var(--yellow);
  padding:.85rem 1.8rem;border-radius:999px;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.adn-home .adn-spec .sask:hover{transform:translateY(-2px);box-shadow:0 0.625rem 2rem rgba(255,198,0,.3)}


/* ══════════════════ 12 · TARJETAS, CINTAS Y CLIENTES ══════════════════
   Portado de adnius-home-v59.html, lineas 527 a 573, mas el bloque
   de pantalla angosta de las lineas 1628 a 1642.

   El bloque va partido en dos por una razon concreta: en el prototipo
   .card, .mq, .net y .mqv son globales y las usan DOS secciones, la de
   clientes y la de clientes corporativos. Aqui estaban encerradas en
   .adn-clients y las marcas no las heredarian.

     12a · Tarjetas y cintas. Prefijo .adn-sec. Compartido.
     12b · Clientes. Solo lo que es de esta seccion y de ninguna otra.

   NO agregar en 12a nada que sea de una sola seccion. El tamano del
   titular, por ejemplo, es distinto en cada una y por eso vive abajo.

   Reparto con Divi:
     Seccion   clases "adn-sec adn-clients", CSS ID "clients"
     Row       hace de <header>: un solo modulo con el titular
     .mq       las dos cintas. Las crea home.js como hermanas del Row,
               igual que la capa .viz de las 7 areas.

   El overflow oculto de la seccion es lo que recorta las cintas: cada
   .mq mide lo que suman sus tarjetas, mucho mas que la pantalla.

   El gap va a cero por quinta vez en el archivo. Aqui importa doble:
   la seccion es flex y sus hijos son el Row y las dos cintas, asi que
   el gap de 60px de Divi se metia entre las tres. */

/* ────────────────── 12a · TARJETAS Y CINTAS ──────────────────
   Compartido por clientes y por clientes corporativos.

   DIVERGENCIA DECIDIDA DEL PROTOTIPO: las cintas se arrastran con el
   mouse en escritorio, no solo con el dedo en telefono.

   El prototipo usa DOS motores. En escritorio mueve la cinta con
   transform desde GSAP, linea 3345, y el mouse solo la frena al 12%.
   En telefono la envuelve en .mqv y la mueve con scrollLeft, linea
   3269, y ahi el arrastre existe porque es desplazamiento nativo.

   Aqui se unifica en UNO SOLO, y se unifica hacia el de telefono. Con
   scrollLeft el arrastre es cambiar un numero y el navegador pone la
   inercia; con transform habria que escribir a mano toda la mecanica
   que el navegador ya sabe hacer. Ademas telefono queda casi intacto,
   que es lo que ya esta probado en aparato real.

   Por eso la .mqv sale de la media query y vive en las dos anchuras.
   Lo que SI se queda en telefono es el ocultado de la barra de
   desplazamiento nativa y el encendido de la tarjeta del centro. */

/* --- 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. En el
   prototipo la limita el <section>; aqui la .mqv es hija de un
   contenedor flex, que por defecto la deja crecer hasta el ancho de
   su contenido. */
.adn-home .adn-sec .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 de la cinta 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 la tarjeta escala a 1.09 y el magnetico la
     mueve unos pixeles. En el prototipo eso no molesta porque no hay
     contenedor: la tarjeta crece sobre el fondo de la seccion. Aqui
     la .mqv la envuelve, y cualquier recorte vertical le corta el
     borde amarillo por arriba y por abajo.

     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, para que la separacion entre
     las dos cintas y con lo que viene despues no cambie. */
  padding:1.125rem 0;
  margin:-1.125rem 0;
}
.adn-home .adn-sec .mqv::-webkit-scrollbar{display:none}

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

/* La mano dice que se puede agarrar antes de intentarlo. La clase
   .grab la pone home.js mientras el boton esta presionado. */
.adn-home .adn-sec .mqv{cursor:grab}
.adn-home .adn-sec .mqv.grab{cursor:grabbing}

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

/* --- 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. */
.adn-home .adn-sec .mq{
  display:flex;gap:1rem;
  width:max-content;align-self:flex-start;
  margin-bottom:1rem;
}
.adn-home .adn-sec .mq.rev{margin-bottom:0}

/* --- La tarjeta --- */

.adn-home .adn-sec .card{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:1rem;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  border-radius:6.25rem;padding:.7rem 1.5rem .7rem .7rem;
  white-space:nowrap;text-decoration:none;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;
}
.adn-home .adn-sec .card img{
  width:3.25rem;height:3.25rem;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);
}
.adn-home .adn-sec .card b{
  display:block;font-family:var(--display);font-weight:600;font-size:.98rem;
}
.adn-home .adn-sec .card span{
  display:block;font-family:var(--body);font-size:.72rem;
  letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-top:.16rem;
}

.adn-home .adn-sec .card.live{cursor:pointer;padding-right:2.9rem}

/* Mientras se arrastra manda la mano abierta, no el dedo del enlace */
.adn-home .adn-sec .mqv.grab .card.live{cursor:grabbing}

/* El badge dice a donde lleva el clic antes de darlo */
.adn-home .adn-sec .net{
  position:absolute;right:1.15rem;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-style:normal;font-weight:800;
  font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.26);transition:color .4s ease;
}
.adn-home .adn-sec .card:hover .net{color:var(--yellow)}

/* El color llega al pasar el mouse: en blanco y negro las fotos se
   ven como un conjunto; a color, como un collage desordenado. */
.adn-home .adn-sec .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);
}
.adn-home .adn-sec .card:hover img,
.adn-home .adn-sec .card:focus-visible img{filter:none}
.adn-home .adn-sec .card:hover span{color:rgba(255,198,0,.75)}

/* --- Pantalla angosta ---
   Sin cursor no hay hover, asi que el color lo decide la posicion:
   lo que pasa por el centro se enciende. */

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

  .adn-home .adn-sec .card.mid{
    border-color:rgba(255,198,0,.32);
    background:rgba(255,255,255,.045);
  }
  .adn-home .adn-sec .card.mid img{filter:none}
  .adn-home .adn-sec .card.mid em.net{opacity:1}
}


/* ────────────────── 12b · CLIENTES ──────────────────
   Solo lo propio de esta seccion. */

.adn-home .adn-clients{
  position:relative;
  background:var(--black);
  padding:clamp(4rem,9vh,7rem) 0 clamp(4rem,9vh,7rem);
  overflow:hidden;
  gap:0;
}

/* En el prototipo el <header> lleva el ancho maximo y el relleno
   lateral. Las cintas NO lo llevan: van a sangre, y por eso se salen
   de la pantalla por los dos lados. */
.adn-home .adn-clients .et_pb_row{
  max-width:93.75rem;
  margin:0 auto 2.6rem;
  padding:0 var(--pad);
  gap:0;
}
.adn-home .adn-clients .et_pb_column{
  gap:0;
}

/* Vive aqui y no en 12a porque las marcas usan otro tamano:
   clamp(1.7rem,3.8vw,3.1rem) y max-width:20ch, prototipo linea 578. */
.adn-home .adn-clients .big{
  font-size:clamp(1.8rem,4.2vw,3.4rem);
  max-width:22ch;
}

/* ══════════════════ 13 · CLIENTES CORPORATIVOS ══════════════════
   Portado de adnius-home-v59.html, lineas 577 a 601.

   Lo compartido NO esta aqui. La tarjeta, las cintas, el visor y el
   badge viven en el bloque 12a con prefijo .adn-sec, asi que esta
   seccion los hereda sola. Aqui va solo lo propio de las marcas: la
   seccion, el Row, el eyebrow, el titular, .mono y .biz.

   Reparto con Divi:
     Seccion   clases "adn-sec adn-brands", CSS ID "brands"
     Row       hace de <header>: el eyebrow y el titular
     .mq       las dos cintas. Las crea home.js como hermanas del Row,
               igual que en clientes.

   El gap va a cero por sexta vez en el archivo, y por lo mismo que en
   clientes: la seccion es flex y sus hijos son el Row y las dos
   cintas, asi que los 60px de Divi se metian entre los tres.

   NO se porta la regla .card.mid .mono b de la linea 1639 del
   prototipo: apunta a un <b> dentro del circulo de iniciales que el
   marcado no tiene, ahi dentro solo van las letras. Es letra muerta
   tambien en el prototipo. */

.adn-home .adn-brands{
  position:relative;
  background:var(--black);
  padding:clamp(4rem,9vh,7rem) 0 clamp(3rem,7vh,5rem);
  overflow:hidden;
  gap:0;
}

/* El prototipo pone el hueco de 2.6rem como padding-bottom del
   <header>. Aqui pasa a margin-bottom del Row, igual que se hizo en
   clientes: mismo hueco, y el borde de la primera cinta queda donde
   toca. */
.adn-home .adn-brands .et_pb_row{
  max-width:93.75rem;
  margin:0 auto 2.6rem;
  padding:0 var(--pad);
  gap:0;
}
.adn-home .adn-brands .et_pb_column{
  gap:0;
}

/* El !important es por lo del bloque 2: font:inherit cae sobre el
   mismo elemento que lleva la clase y le borra el margen en la misma
   declaracion. Mismo caso que en los especializados. */
.adn-home .adn-brands .eyebrow{
  margin-bottom:1.4rem !important;
}

/* Mas chico que el de clientes, que usa clamp(1.8rem,4.2vw,3.4rem) y
   22ch. Prototipo linea 579. */
.adn-home .adn-brands .big{
  font-size:clamp(1.7rem,3.8vw,3.1rem);
  max-width:20ch;
}

/* --- Iniciales cuando no hay logo ---
   El circulo nunca queda vacio. Mide lo mismo que la foto de la
   tarjeta para que las dos cintas queden a la misma altura. */

.adn-home .adn-brands .card .mono{
  width:3.25rem;height:3.25rem;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:.86rem;
  letter-spacing:.02em;color:rgba(255,255,255,.5);
  transition:color .5s ease,background .5s ease,border-color .5s ease;
}
.adn-home .adn-brands .card:hover .mono{
  color:var(--yellow);
  background:rgba(255,198,0,.1);
  border-color:rgba(255,198,0,.35);
}

/* --- La tercera linea de la tarjeta ---
   Que hace la empresa. En clientes no existe: ahi la tarjeta solo
   lleva nombre y ciudad.

   Hereda las mayusculas y el espaciado del span de 12a, que es como
   se ve en el prototipo. Lo que cambia es el peso, el color y el
   corte con puntos suspensivos, porque estas descripciones son largas
   y la tarjeta no puede crecer sin romper la cinta.

   El hover lleva cuatro clases y no tres a proposito: con tres perdia
   contra .card:hover span de 12a, que suma un elemento, y la linea se
   ponia amarilla en vez de blanca. */
.adn-home .adn-brands .card .biz{
  display:block;font-size:.72rem;font-weight:200;
  color:rgba(255,255,255,.38);margin-top:.16rem;
  max-width:30ch;overflow:hidden;text-overflow:ellipsis;
  transition:color .4s ease;
}
.adn-home .adn-brands .card:hover .biz{color:rgba(255,255,255,.62)}

/* ══════════════════ 14 · LLAMADO INTERMEDIO ══════════════════
   Portado de adnius-home-v59.html, lineas 627 a 643, mas el bloque
   de pantalla angosta de las lineas 1683 a 1692.

   En el prototipo esto no es un <section> sino un <div class="hook">,
   y aparece DOS VECES: la linea 1843, entre corporativos y nosotros, y
   la linea 1918, entre portafolio y promociones. Por eso todo lo de
   aqui se escribe para las dos y no lleva ancla ni CSS ID.

   Reparto con Divi:
     Seccion   clases "adn-sec adn-hook", sin CSS ID
     Row       hace de caja: ancho maximo, relleno y las dos lineas
     Column    es la que reparte: el parrafo a un lado, los llamados
               al otro
     Modulos   tres: "hookp", "book" y "ghost". Los dos ultimos los
               agrupa home.js dentro de .set, igual que hace con .acts
               en el hero, porque Divi no deja envolverlos.

   El gap de la Column NO va a cero, que es lo contrario de lo que se
   hizo en las seis secciones anteriores. Aqui los 30px de Divi se
   sustituyen por los 1.8rem del prototipo, porque este contenedor SI
   necesita separacion entre sus dos hijos. */

.adn-home .adn-hook{
  position:relative;
  background:var(--black);
  gap:0;
}

/* Las dos lineas van en el Row y no en la seccion: la seccion es de
   ancho completo y ahi las lineas llegarian hasta el borde de la
   pantalla, cuando en el prototipo miden lo que mide el contenido. */
.adn-home .adn-hook .et_pb_row{
  max-width:93.75rem;
  margin:0 auto;
  padding:clamp(3.6rem,8vh,5.6rem) var(--pad);
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  gap:0;
}

/* El reparto vive aqui y no en el Row porque los hijos del Row son
   las columnas, y con una sola columna el space-between no tendria
   entre que repartir. Los hijos de la Column si son los modulos. */
.adn-home .adn-hook .et_pb_column{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:1.8rem;flex-wrap:wrap;
}

/* --- El parrafo --- */

.adn-home .adn-hook .hookp{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,2.1vw,1.6rem);line-height:1.2;letter-spacing:-.02em;
  max-width:28ch;
}
/* La cursiva que pongas en el editor sale derecha y amarilla, igual
   que en los titulares */
.adn-home .adn-hook .hookp em{font-style:normal;color:var(--yellow)}

/* --- Los llamados ---
   .set lo arma home.js. El estilo base de .book y .ghost viene del
   bloque 6, aqui solo cambia el tamano. */

.adn-home .adn-hook .set{
  display:flex;gap:1.7rem;align-items:center;flex-wrap:wrap;
}
.adn-home .adn-hook .book{font-size:.88rem;padding:.95rem 1.9rem}
.adn-home .adn-hook .ghost{font-size:.8rem}

/* --- Pantalla angosta ---
   Apilado, el gancho deja de ser una franja lateral y pasa a ser un
   momento propio: merece el tamano y el centrado de uno. */

@media (max-width:620px){
  .adn-home .adn-hook .et_pb_column{
    text-align:center;
    gap:2rem;
  }
  .adn-home .adn-hook .hookp{
    max-width:24ch;margin:0 auto;
    font-size:clamp(1.35rem,6.5vw,1.9rem);line-height:1.16;
  }
  .adn-home .adn-hook .set{
    flex-direction:column;align-items:center;
    gap:1.1rem;width:100%;
  }
  .adn-home .adn-hook .book{text-align:center}
  .adn-home .adn-hook .ghost{align-self:center;font-size:.82rem}
}

/* ══════════════════ 15 · NOSOTROS ══════════════════
   Portado de adnius-home-v59.html, lineas 650 a 710.

   Reparto con Divi:
     Seccion   clases "adn-sec adn-who", CSS ID "about"
     Row       hace de .wwrap: la rejilla de dos columnas
     Column 1  clase "wcopy"   eyebrow, titular y los dos parrafos
     Column 2  clase "facts"   los cuatro datos

   Los dos parrafos van en UN SOLO modulo Text. El prototipo separa el
   segundo con "p + p", y eso solo funciona si son hermanos: en dos
   modulos distintos no se tocan nunca.

   Medido en consola, cada dato queda asi:
     DIV.fact > DIV.et_pb_text_inner > P > B.count + BR + SPAN > I
   Por eso el flex NO va sobre .fact sino sobre ese <p>: el b y el span
   son hijos del parrafo, no del modulo. El <br> lo mete WordPress solo
   y dentro de un flex contaria como un elemento mas, asi que se apaga.

   El data-to sobrevivio al editor, de modo que el contador del bloque
   de mas arriba anima estos numeros sin tocar nada. */

.adn-home .adn-who{
  position:relative;
  background:var(--black);
  padding:clamp(3.4rem,8vh,6rem) 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  overflow:hidden;
  gap:0;
}

/* El barrido de luz al pasar el mouse por la seccion. Es el mismo
   lenguaje del boton y de las filas de especializados, sin repetirlo. */
.adn-home .adn-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);
}
.adn-home .adn-who:hover::after{background-position:-50% 0}

/* --- La rejilla ---
   Mismo patron que las 7 areas: el Row pasa a ser grid y las columnas
   sueltan el ancho calculado y el float que Divi les pone. */
.adn-home .adn-who .et_pb_row{
  position:relative;z-index:1;
  width:93.75rem;max-width:min(93.75rem,100%);
  margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(17.5rem,.92fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.adn-home .adn-who .et_pb_column{
  width:auto;
  float:none;
  gap:0;
}

/* --- La columna de texto --- */

.adn-home .adn-who .eyebrow{margin-bottom:1.4rem !important}

/* El titular es mas chico y mas pesado que el de las otras secciones:
   700 contra 600, y 1.05 de interlineado contra 1. */
.adn-home .adn-who .big{
  font-weight:700;
  font-size:clamp(1.7rem,3.8vw,3rem);
  line-height:1.05;letter-spacing:-.035em;
  margin-bottom:1.5rem !important;
  max-width:18ch;
}

.adn-home .adn-who .wtext{
  font-weight:200;font-size:clamp(.95rem,1.3vw,1.08rem);line-height:1.62;
  color:rgba(255,255,255,.6);max-width:50ch;
}
/* Lleva .et_pb_text para ganarle al font:inherit del bloque 2, que
   pone el margen de los parrafos a cero. Ahi no sirve subir de clase:
   hay que igualar el selector y llegar despues. */
.adn-home .adn-who .et_pb_text p + p{margin-top:1rem}
.adn-home .adn-who .wtext b{color:rgba(255,255,255,.88);font-weight:500}

/* --- Los cuatro datos ---
   Cuatro cosas que se pueden comprobar en esta misma pagina. Vale mas
   eso que decir que somos globales. */

.adn-home .adn-who .facts{
  display:flex;flex-direction:column;
}

/* El borde va en el modulo y el flex en su parrafo. Son dos elementos
   distintos y cada uno hace su parte. */
.adn-home .adn-who .fact{
  border-top:1px solid rgba(255,255,255,.09);
  transition:padding-left .45s cubic-bezier(.16,1,.3,1);
}
.adn-home .adn-who .fact:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
.adn-home .adn-who .fact:hover{padding-left:.5rem}

.adn-home .adn-who .fact p{
  display:flex;align-items:baseline;gap:1.2rem;
  padding:1.05rem 0;
  margin:0;
}
/* El salto que mete el editor. Dentro del flex seria una caja mas y
   partiria la fila en dos. */
.adn-home .adn-who .fact br{display:none}

.adn-home .adn-who .fact b{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1;letter-spacing:-.035em;
  color:var(--yellow);font-variant-numeric:tabular-nums;
  min-width:3.2ch;flex:none;
}
.adn-home .adn-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;
}
/* La cursiva del editor se endereza y sube a primera linea: es el
   dato, no un enfasis. */
.adn-home .adn-who .fact span i{
  font-style:normal;display:block;
  color:rgba(255,255,255,.82);font-weight:400;
}
.adn-home .adn-who .fact:hover span{color:rgba(255,255,255,.7)}

/* --- Pantalla angosta ---
   Prototipo linea 671: la rejilla se convierte en una sola columna. */

@media (max-width:900px){
  .adn-home .adn-who .et_pb_row{
    grid-template-columns:1fr;
    gap:2.6rem;
  }
}

/* ══════════════════ 16 · TRABAJOS ══════════════════
   Portado de adnius-home-v59.html, lineas 712 a 809.

   Reparto con Divi:
     Seccion   clases "adn-sec adn-work", CSS ID "work"
     Row       sin papel propio, solo deja pasar
     Column    hace de .hscroll: la pila vertical con su separacion
     Modulos   dos: el titular "big reveal-lines" y la pista "wdrag"

   El resto lo arma home.js: .hwrap, .hview, .track, las 19 tarjetas,
   .wprog y .wfoot. La pista NO se crea, se muda desde Divi al pie.

   Aqui el gap de la Column NO va a cero, igual que en el gancho: los
   30px de Divi se sustituyen por los del prototipo, porque esta pila
   si necesita aire entre sus tres partes.

   Y la Column lleva flex-direction:column explicito. Divi 5 ya la
   trae asi de fabrica, pero se escribe igual: la regla dice cual es
   la direccion correcta, no se hereda por suerte. Ver el punto 26. */

.adn-home .adn-work{
  position:relative;
  background:var(--black);
  padding:clamp(6rem,15vh,11rem) 0 0;
  gap:0;
}
.adn-home .adn-work .et_pb_row{
  width:100%;max-width:none;margin:0;padding:0;
  gap:0;
}

/* La pila: titular, galeria, barra y pie */
.adn-home .adn-work .et_pb_column{
  position:relative;
  display:flex;flex-direction:column;
  gap:clamp(2.4rem,5vh,4rem);
  padding-bottom:clamp(2.5rem,6vh,4rem);
}

/* --- El titular ---
   Va dentro de la pila y no en una franja aparte: asi no queda una
   banda negra muerta entre el texto y las tarjetas. */
.adn-home .adn-work .big{
  padding:0 var(--pad);
  max-width:93.75rem;width:100%;margin:0 auto;
  font-size:clamp(1.7rem,3.8vw,3.1rem);
}

/* --- El recuadro de la galeria ---
   Al 80% quedan dos franjas laterales libres: si el cursor esta ahi,
   la rueda baja la pagina como siempre. Dentro del recuadro la rueda
   mueve las tarjetas. Es lo que evita secuestrar el scroll. */
.adn-home .adn-work .hwrap{
  width:80%;max-width:100rem;margin:0 auto;position:relative;
}

/* Las dos sombras de los bordes: las tarjetas no se cortan en seco,
   se disuelven en el negro. */
.adn-home .adn-work .hwrap::before,
.adn-home .adn-work .hwrap::after{
  content:'';position:absolute;top:0;bottom:0;width:4.375rem;z-index:3;
  pointer-events:none;
}
.adn-home .adn-work .hwrap::before{left:0;background:linear-gradient(90deg,var(--black),transparent)}
.adn-home .adn-work .hwrap::after{right:0;background:linear-gradient(270deg,var(--black),transparent)}

.adn-home .adn-work .hview{
  overflow-x:auto;overflow-y:hidden;
  cursor:grab;scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.adn-home .adn-work .hview::-webkit-scrollbar{display:none}
.adn-home .adn-work .hview.grabbing{cursor:grabbing}
/* Mientras se arrastra, las tarjetas no reciben el cursor: si no, el
   hover se enciende y se apaga a cada pixel. */
.adn-home .adn-work .hview.grabbing .shot{pointer-events:none}

.adn-home .adn-work .track{
  display:flex;gap:1.6rem;padding:0 0.25rem;width:max-content;
}

/* --- La barra de progreso --- */

.adn-home .adn-work .wprog{
  width:80%;max-width:100rem;margin:0 auto;height:1px;
  background:rgba(255,255,255,.13);
}
.adn-home .adn-work .wprog i{
  display:block;height:100%;width:0;background:var(--yellow);
  transform-origin:left center;
}

/* --- El pie --- */

.adn-home .adn-work .wfoot{
  display:flex;flex-direction:row;justify-content:space-between;align-items:center;
  width:80%;max-width:100rem;margin:0 auto;gap:1rem;
}
.adn-home .adn-work .wcount{
  font-size:.68rem;letter-spacing:.22em;color:rgba(255,255,255,.4);
  font-variant-numeric:tabular-nums;
}
.adn-home .adn-work .wdrag{
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.34);transition:opacity .6s ease;
}
/* Cumplida su funcion, la pista se va: al primer gesto del usuario */
.adn-home .adn-work .wdrag.gone{opacity:0}

/* --- La tarjeta --- */

.adn-home .adn-work .shot{
  width:clamp(16.25rem,30vw,27.5rem);flex:none;
  text-decoration:none;color:inherit;display:block;
}
.adn-home .adn-work .shot.live{cursor:pointer}
.adn-home .adn-work .shot img{-webkit-user-drag:none;user-select:none}

.adn-home .adn-work .shot .frame{
  position:relative;
  aspect-ratio:16/10;overflow:hidden;border-radius:0.25rem;background:#0a0a0a;
}
.adn-home .adn-work .shot img{
  display:block;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.62);
  transition:filter .6s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}
/* El color llega al pasar el mouse, igual que en las cintas: en
   blanco y negro las 19 capturas se leen como un conjunto. */
.adn-home .adn-work .shot:hover img{filter:none;transform:scale(1.045)}

/* La flecha que dice que el clic lleva a alguna parte */
.adn-home .adn-work .shot .go{
  position:absolute;top:.8rem;right:.8rem;z-index:2;
  width:1.875rem;height:1.875rem;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,0,0,.55);
  opacity:0;transform:translateY(-0.375rem);
  transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1),background .4s ease;
}
.adn-home .adn-work .shot.live:hover .go{opacity:1;transform:none;background:var(--yellow)}
.adn-home .adn-work .shot .go svg{
  width:0.875rem;height:0.875rem;stroke:var(--white);stroke-width:2;fill:none;
  transition:stroke .4s ease;
}
.adn-home .adn-work .shot.live:hover .go svg{stroke:var(--black)}

.adn-home .adn-work .shot .meta{
  display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;
  margin-top:.9rem;gap:1rem;
}
.adn-home .adn-work .shot .meta b{
  font-family:var(--display);font-weight:600;font-size:.94rem;letter-spacing:.02em;
  transition:color .4s ease;
}
.adn-home .adn-work .shot:hover .meta b{color:var(--yellow)}
.adn-home .adn-work .shot .meta span{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.32);
}

/* --- La tarjeta del centro ---
   DIVERGENCIA DECIDIDA DEL PROTOTIPO: se enciende en las DOS
   anchuras. El prototipo la limita a telefono con un if (!narrowNow)
   en su linea 3424, porque ahi no hay hover que la encienda.
   En escritorio tambien sirve: la fila se mueve sola mientras la
   seccion cruza la pantalla, y la del centro va guiando la vista sin
   que el visitante tenga que buscar donde mirar. No pelea con el
   hover: las dos apagan el mismo filtro, y el hover ademas la crece
   mas y saca la flecha. */
.adn-home .adn-work .shot.mid img{filter:none;transform:scale(1.03)}
.adn-home .adn-work .shot.mid .meta b{color:var(--yellow)}

/* --- Pantalla angosta ---
   La galeria pasa a ocupar todo el ancho: en un telefono las franjas
   laterales del 80% no dejarian ver nada. */

@media (max-width:900px){
  .adn-home .adn-work .hwrap{width:100%}
  .adn-home .adn-work .wprog,
  .adn-home .adn-work .wfoot{width:calc(100% - var(--pad) * 2)}
}

/* ══════════════════ 17 · PORTAFOLIO GRÁFICO ══════════════════
   Portado de adnius-home-v59.html, lineas 820 a 900.

   Una sola banda que manda al Drive. No hay galeria que mantener:
   las carpetas se actualizan solas y el sitio no se entera.

   Reparto con Divi:
     Seccion   clases "adn-sec adn-drive", CSS ID "portfolio"
     Row       hace de .dwrap: la rejilla de dos columnas
     Column 1  clase "dcopy"  eyebrow, titular, parrafo, boton y nota
     Column 2  clase "dart"   vacia, la llena home.js con cuatro
                              dibujos que se relevan

   El boton .dgo es un modulo Text con enlace en Module Link URL, asi
   que su contenido queda envuelto en .et_pb_text_inner > p. Por eso
   el flex del boton va sobre ESE parrafo y no sobre el modulo, igual
   que en los datos de Nosotros. Ver el punto 27. */

.adn-home .adn-drive{
  position:relative;overflow:hidden;
  padding:clamp(3.4rem,9vh,6.5rem) 0;
  background:var(--black);
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  gap:0;
}

/* Barrido de luz, el mismo gesto de Nosotros */
.adn-home .adn-drive::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent 38%,rgba(255,198,0,.05) 50%,transparent 62%);
  background-size:280% 100%;background-position:120% 0;
  transition:background-position 1.5s cubic-bezier(.16,1,.3,1);
}
.adn-home .adn-drive:hover::after{background-position:-40% 0}

/* --- La rejilla --- */
.adn-home .adn-drive .et_pb_row{
  position:relative;z-index:2;
  width:93.75rem;max-width:min(93.75rem,100%);
  margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(18.75rem,46%);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:center;
}
.adn-home .adn-drive .et_pb_column{
  width:auto;float:none;gap:0;
}
.adn-home .adn-drive .dcopy{max-width:44ch}

/* --- La columna de texto --- */

.adn-home .adn-drive .eyebrow{margin-bottom:1.2rem !important}

.adn-home .adn-drive .big{
  font-weight:700;
  font-size:clamp(1.8rem,4.2vw,3.2rem);
  line-height:1.04;letter-spacing:-.035em;
  margin-bottom:1.3rem !important;
}

.adn-home .adn-drive .dtext{
  font-weight:200;font-size:clamp(.94rem,1.25vw,1.06rem);line-height:1.62;
  color:rgba(255,255,255,.62);
  margin-bottom:2.1rem !important;
  max-width:42ch;
}

/* --- El boton al Drive ---
   El flex va en el parrafo interno, que es donde viven de verdad el
   texto y la flecha. El modulo se queda solo con el ancho justo para
   que el boton no cruce la columna entera. */
.adn-home .adn-drive .dgo{width:fit-content}
.adn-home .adn-drive .dgo p{
  display:flex;flex-direction:row;align-items:center;gap:.7rem;
  font-family:var(--display);font-weight:600;font-size:.98rem;
  color:var(--black);background:var(--yellow);
  padding:1.15rem 2.4rem;border-radius:999px;
  transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s ease;
}
.adn-home .adn-drive .dgo:hover p{
  transform:translateY(-2px);
  box-shadow:0 0.75rem 2.5rem rgba(255,198,0,.32);
}
/* Sin esto la flecha sale negra y del tamano del contenedor */
.adn-home .adn-drive .dgo svg{
  width:0.9375rem;height:0.9375rem;flex:none;
  stroke:currentColor;stroke-width:2;fill:none;
}

.adn-home .adn-drive .dnote{
  margin-top:2.4rem !important;
  font-size:.76rem;letter-spacing:.02em;
  color:rgba(255,255,255,.36);
}

/* --- Los dibujos ---
   No es una carpeta: son piezas de trabajo grafico apiladas. Habla de
   lo que hay adentro, no del programa donde esta guardado.
   Los cuatro SVG los mete home.js y se relevan cada 3150ms. */

.adn-home .adn-drive .dart{
  position:relative;justify-self:center;
  width:clamp(18.75rem,34vw,30.625rem);aspect-ratio:380/290;
  opacity:.72;
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);
}
.adn-home .adn-drive:hover .dart{opacity:.92;transform:translateY(-0.375rem)}

.adn-home .adn-drive .dart svg{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  stroke:var(--yellow);stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:0;
}
.adn-home .adn-drive .dart .f{fill:var(--yellow);stroke:none}

/* --- Pantalla angosta ---
   Prototipo linea 894: una sola columna, y el dibujo pasa ARRIBA del
   texto con order:-1. En un telefono la imagen es lo que detiene el
   pulgar, no el titular. */

@media (max-width:900px){
  .adn-home .adn-drive .et_pb_row{
    grid-template-columns:1fr;
    gap:2.4rem;
  }
  .adn-home .adn-drive .dcopy{max-width:100%}
  .adn-home .adn-drive .dart{
    width:100%;max-width:22.5rem;margin:0 auto;order:-1;
  }
}

@media (prefers-reduced-motion:reduce){
  .adn-home .adn-drive .dart,
  .adn-home .adn-drive::after{transition:none}
}

/* ══════════════════ 18 · PROMOCIONES ══════════════════
   Portado de adnius-home-v59.html, lineas 914 a 1060.

   Reparto con Divi:
     Seccion   clases "adn-sec adn-promos", CSS ID "promos"
     Fila 1    la cabecera: eyebrow y titular
     Filas 2-4 una por oferta, cada una con clase "offer"
     Column    clase "oinner", con los seis modulos dentro

   El .ocopy que va entre el .offer y el .oinner lo crea home.js, igual
   que .inner en el hero y .set en el gancho: hace falta porque el
   .offer va a sangre para que el borde y la marca de agua lleguen a
   los bordes de la pantalla, y el texto tiene que quedarse en 1500px.

   OJO CON PAR E IMPAR, ESTAN INVERTIDOS A PROPOSITO. En el prototipo
   las tres ofertas son hijas de un div propio, asi que la primera es
   impar. Aqui son filas de la seccion y la cabecera ocupa la primera
   posicion, asi que la oferta 1 es la hija 2. Resultado: lo que el
   prototipo llama odd, aqui es even. La alternancia visual termina
   siendo la misma, ofertas 1 y 3 a un lado y la 2 al otro. */

.adn-home .adn-promos{
  background:var(--black);
  padding:clamp(4rem,10vh,8rem) 0 clamp(3rem,7vh,5rem);
  gap:0;
}

/* --- La cabecera ---
   Es la primera fila y la unica sin clase .offer, asi que se apunta
   por lo que NO es. */
.adn-home .adn-promos .et_pb_row:not(.offer){
  padding:0 var(--pad) clamp(2.5rem,5vh,4rem);
  max-width:93.75rem;margin:0 auto;
  gap:0;
}
.adn-home .adn-promos .eyebrow{margin-bottom:1.4rem !important}
.adn-home .adn-promos .big{
  font-size:clamp(1.7rem,3.8vw,3.1rem);
  max-width:18ch;
}

/* --- La franja de cada oferta ---
   El icono ya no es una vineta: es una marca de agua enorme que
   sangra por el borde. */

.adn-home .adn-promos .offer{
  position:relative;overflow:hidden;
  width:100%;max-width:none;
  border-top:1px solid rgba(255,255,255,.1);
  padding:clamp(2.6rem,6vh,4.4rem) 0;
  margin:0;
  gap:0;
}
.adn-home .adn-promos .offer:last-child{border-bottom:1px solid rgba(255,255,255,.1)}

/* --- La marca de agua ---
   Las cuatro escenas las mete home.js y las releva cycleIcons. */

.adn-home .adn-promos .omarks{
  position:absolute;top:50%;translate:0 -50%;
  width:min(50%,37.5rem);aspect-ratio:220/170;
  opacity:.28;pointer-events:none;z-index:0;
  transition:opacity .5s ease,translate .6s cubic-bezier(.16,1,.3,1);
  will-change:opacity,translate;
}
.adn-home .adn-promos .omark{
  position:absolute;inset:0;width:100%;height:100%;
  stroke:var(--yellow);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:0;
}
.adn-home .adn-promos .omark .fill{fill:var(--yellow);stroke:none}

.adn-home .adn-promos .offer:nth-child(even) .omarks{right:8%}
.adn-home .adn-promos .offer:nth-child(odd)  .omarks{left:8%;scale:-1 1}
.adn-home .adn-promos .offer:hover .omarks{opacity:.4}
.adn-home .adn-promos .offer:nth-child(even):hover .omarks{translate:-0.875rem -50%}
.adn-home .adn-promos .offer:nth-child(odd):hover  .omarks{translate:0.875rem -50%}

/* El barrido de luz, el mismo gesto del portafolio */
.adn-home .adn-promos .offer::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(100deg,transparent 38%,rgba(255,198,0,.055) 50%,transparent 62%);
  background-size:280% 100%;background-position:120% 0;
  transition:background-position 1.4s cubic-bezier(.16,1,.3,1);
}
.adn-home .adn-promos .offer:hover::after{background-position:-40% 0}

/* --- El bloque de texto ---
   Se empuja el bloque completo y no cada pieza. Empujandolas una a
   una lo que quedaba alineado eran los bordes derechos, y como la
   etiqueta y el titular tienen anchos distintos, cada uno arrancaba
   en un sitio. */
.adn-home .adn-promos .ocopy{
  position:relative;z-index:1;
  padding:0 var(--pad);
  margin:0 auto;
  width:93.75rem;max-width:min(93.75rem,100%);
  display:flex;flex-direction:row;
}
.adn-home .adn-promos .offer:nth-child(odd) .ocopy{justify-content:flex-end}

.adn-home .adn-promos .oinner{
  width:min(38.75rem,62%);
  gap:0;
}
.adn-home .adn-promos .oinner > *{max-width:100%}

/* --- La etiqueta --- */
.adn-home .adn-promos .otag{
  font-family:var(--display);font-weight:300;font-size:.64rem;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--yellow);
  margin-bottom:1.2rem !important;
}

/* --- El titular ---
   El h3 vive dentro del modulo. El bloque 2 solo neutraliza h1 y h2,
   asi que aqui va el estilo completo. */
.adn-home .adn-promos .otitle{margin-bottom:1.8rem !important}
.adn-home .adn-promos .otitle h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.85rem,4.4vw,3.4rem);line-height:1.03;letter-spacing:-.035em;
  color:var(--white);
  margin:0;padding:0;
  max-width:17ch;
}

/* --- El precio ---
   Es el gancho. Grande, amarillo, sin adornos. */
.adn-home .adn-promos .oprice{margin-bottom:1.7rem !important}
.adn-home .adn-promos .oprice b{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.4rem,6vw,4.4rem);line-height:.95;letter-spacing:-.045em;
  color:var(--yellow);
}
.adn-home .adn-promos .oprice .per{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1rem,1.9vw,1.5rem);letter-spacing:-.01em;
  color:rgba(255,255,255,.9);margin-left:.5rem;
}
.adn-home .adn-promos .oprice .alt{
  display:block;font-style:normal;margin-top:.9rem;
  font-weight:200;font-size:clamp(.88rem,1.2vw,1rem);line-height:1.5;
  letter-spacing:.01em;max-width:44ch;
  color:rgba(255,255,255,.72);
}
/* La negrita de dentro del .alt vuelve al cuerpo de texto: sin esto
   heredaba el tamano gigante del precio. */
.adn-home .adn-promos .oprice .alt b{
  font-family:var(--body);font-size:inherit;line-height:inherit;
  font-weight:600;letter-spacing:inherit;
  color:var(--white);
}

/* --- Los tres ganchos ---
   Linea de creditos, no ficha tecnica. */
.adn-home .adn-promos .ohooks{margin-bottom:2.1rem !important}
.adn-home .adn-promos .ohooks ul{
  display:flex;flex-wrap:wrap;list-style:none;
  margin:0;padding:0;row-gap:.5rem;
}
.adn-home .adn-promos .ohooks li{
  font-weight:200;font-size:clamp(.82rem,1.1vw,.95rem);
  color:rgba(255,255,255,.62);
  margin:0;padding:0 1.15rem;
  border-left:1px solid rgba(255,255,255,.16);
  list-style:none;
}
.adn-home .adn-promos .ohooks li:first-child{padding-left:0;border-left:0}

/* --- El boton ---
   El flex va en el parrafo interno, igual que en el portafolio. */
.adn-home .adn-promos .ogo{width:fit-content}
.adn-home .adn-promos .ogo p{
  display:flex;flex-direction:row;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:600;font-size:.9rem;
  color:var(--black);background:var(--yellow);
  padding:1.05rem 2.1rem;border-radius:999px;
  transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s ease;
}
.adn-home .adn-promos .ogo:hover p{
  transform:translateY(-2px);
  box-shadow:0 0.75rem 2.5rem rgba(255,198,0,.32);
}
.adn-home .adn-promos .ogo svg{
  width:0.8125rem;height:0.8125rem;flex:none;
  stroke:currentColor;stroke-width:2.2;fill:none;
}

/* --- La letra pequena --- */
.adn-home .adn-promos .ofine{
  margin-top:2.4rem !important;
  font-size:.76rem;letter-spacing:.02em;
  color:rgba(255,255,255,.4);
}
.adn-home .adn-promos .ofine a{
  color:rgba(255,255,255,.62);
  text-decoration:underline;text-underline-offset:0.1875rem;
  text-decoration-color:rgba(255,255,255,.26);
}
.adn-home .adn-promos .ofine a:hover{text-decoration-color:var(--yellow)}

/* --- Pantalla angosta ---
   Prototipo linea 1043. Apiladas ya no alternan, asi que la inversion
   de las pares no tiene sentido: dejaba una escena volcada a la
   izquierda mientras las otras dos caian a la derecha. Todas igual.
   Y detras del texto, sin marco que la contenga, la escena tiene que
   ceder: baja de intensidad y el texto lleva sombra. */

@media (max-width:880px){
  .adn-home .adn-promos .oinner{width:100%}
  .adn-home .adn-promos .offer:nth-child(odd) .ocopy{justify-content:flex-start}

  .adn-home .adn-promos .omarks{width:96%;opacity:.32}
  .adn-home .adn-promos .offer:nth-child(even) .omarks,
  .adn-home .adn-promos .offer:nth-child(odd)  .omarks{right:-24%;left:auto;scale:1}

  .adn-home .adn-promos .otitle h3,
  .adn-home .adn-promos .oprice,
  .adn-home .adn-promos .ohooks li{text-shadow:0 1px 1rem rgba(0,0,0,.9)}
	
  .adn-home .adn-promos .ohooks li{
    padding-left:0;border-left:0;width:100%;
  }

  /* El prototipo, linea 1056, pone el ancho, el centrado y el relleno
     sobre .ogo. Aqui .ogo es el modulo y el flex vive en su parrafo
     interno, asi que el reparto va en dos reglas: el ancho al modulo
     y el centrado con el relleno al parrafo. Mismo caso que .dgo en
     el bloque 17. */
  .adn-home .adn-promos .ogo{width:100%}
  .adn-home .adn-promos .ogo p{
    justify-content:center;
    padding:1.15rem 1.5rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .adn-home .adn-promos .omarks,
  .adn-home .adn-promos .offer::after{transition:none}
}

/* ══════════════════ 19 · EL CIERRE ══════════════════
   Portado de adnius-home-v59.html, lineas 1064 a 1094, mas la base de
   las redes de las lineas 604 a 622 y el ajuste de 620px de la 1684.

   Reparto con Divi:
     Seccion   clases "adn-sec adn-close", CSS ID "contact"
     Row       hace de div interior: centra y limita el ancho
     Modulos   cinco Text: eyebrow, titular, parrafo, boton y correo
   El .acts que agrupa el boton y el correo lo arma home.js, igual que
   en el hero y en los ganchos. Los tres iconos de redes tambien.

   El ancla se llama "contact" y no "close" como en el prototipo,
   porque es a donde apunta el menu del header. El pie, cuando se
   monte, va SIN id: en el prototipo lo llevaba porque el ancla del
   cierre era otra, y dos elementos con el mismo id harian que el
   navegador saltara al primero.

   El gap va a cero por septima vez en el archivo. Divi 5 marca la
   seccion como et_flex_section y separa a sus hijos; aqui eso abriria
   los cinco modulos por encima de los margenes del prototipo.

   El min-height y el place-items del prototipo van en la SECCION, no
   en el Row: la seccion es quien tiene el alto, y el Row solo lleva
   el ancho maximo del texto. */

.adn-home .adn-close{
  min-height:92svh;
  display:grid;place-items:center;
  text-align:center;
  padding:clamp(5rem,12vh,9rem) var(--pad);
  gap:0;
}
.adn-home .adn-close .et_pb_row{
  max-width:73.75rem;
  margin:0 auto;
  gap:0;
}
.adn-home .adn-close .et_pb_column{
  gap:0;
}

/* Los tres llevan !important por lo del bloque 2: font:inherit cae
   sobre el mismo elemento que lleva la clase y borra el margen en la
   misma declaracion. Mismo caso que en los especializados. */
.adn-home .adn-close .eyebrow{margin-bottom:2.2rem !important}
.adn-home .adn-close .big{
  margin:0 auto 2.4rem !important;
  max-width:16ch;
}
.adn-home .adn-close .lede{margin:0 auto 3.6rem !important}

/* Es el ultimo punto de conversion de la pagina: compite con un
   titular enorme, asi que necesita escala y aire, no otro estilo. */
.adn-home .adn-close .acts{gap:2rem}
.adn-home .adn-close .book{font-size:.98rem;padding:1.1rem 2.4rem}
.adn-home .adn-close .ghost{font-size:.92rem;letter-spacing:.1em}

/* --- Las redes de la agencia ---
   En el prototipo, lineas 604 a 622, .social es global porque la usan
   el cierre y el pie. Aqui se escribe con prefijo .adn-sec para que
   el pie la herede el dia que se monte, sin repetir una linea. Es el
   mismo criterio del bloque 12a con las tarjetas. */

.adn-home .adn-sec .social{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  flex-wrap:wrap;
}
.adn-home .adn-sec .social a{
  width:2.75rem;height:2.75rem;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.03);
  transition:border-color .4s ease,background .4s ease,transform .45s cubic-bezier(.16,1,.3,1);
}
.adn-home .adn-sec .social a:hover{
  border-color:rgba(255,198,0,.55);background:rgba(255,198,0,.09);
  transform:translateY(-0.1875rem);
}
.adn-home .adn-sec .social svg{
  width:1.0625rem;height:1.0625rem;fill:rgba(255,255,255,.62);
  transition:fill .4s ease;
}
.adn-home .adn-sec .social a:hover svg{fill:var(--yellow)}

/* Mas grandes que las del pie: aqui son parte del llamado. */
.adn-home .adn-close .social{margin-top:3.4rem;gap:.9rem}
.adn-home .adn-close .social a{width:3.25rem;height:3.25rem}
.adn-home .adn-close .social svg{width:1.25rem;height:1.25rem}

/* --- Pantalla angosta ---
   Va al final de las reglas del cierre a proposito. Una media query
   no suma especificidad: si se escribe antes, cualquier regla general
   posterior con el mismo selector la pisa y no se aplica nada. */

@media (max-width:900px){
  .adn-home .adn-close{
    min-height:0;
    padding:clamp(2rem,5vh,3.2rem) var(--pad) clamp(3rem,7.5vh,4.6rem);
  }
  .adn-home .adn-close .eyebrow{margin-bottom:1.1rem !important}
  .adn-home .adn-close .big{margin:0 auto 1.5rem !important}
  .adn-home .adn-close .lede{margin-bottom:2.4rem !important}
  .adn-home .adn-close .social{margin-top:2.4rem}
}

/* Apilados, los dos llamados ocupan el ancho. Prototipo, linea 1684,
   donde la regla es compartida con el gancho. Aqui va aparte porque
   la del gancho ya vive en el bloque 14. */
@media (max-width:620px){
  .adn-home .adn-close .acts{
    flex-direction:column;align-items:stretch;
    gap:1.1rem;width:100%;
  }
  .adn-home .adn-close .book{text-align:center}
}

/* ══════════════════ 20 · EL FORMULARIO ══════════════════
   Portado de adnius-home-v59.html, lineas 1098 a 1250, mas el bloque
   de pantalla angosta de las lineas 1675 a 1681.

   ESTE BLOQUE NO SE PORTO COPIANDO, SE REESCRIBIO. En las diecinueve
   secciones anteriores el HTML lo poniamos nosotros con las clases del
   prototipo. Aqui lo genera el modulo Contact Form de Divi con las
   suyas. Cada regla apunta a lo que Divi produce de verdad, medido en
   consola sobre beta. Los VALORES si son los del prototipo, uno por
   uno: la equivalencia cambia el selector, nunca el numero.

     prototipo                Divi 5
     .fx-grid                 form.et_pb_contact_form
     .fx-f                    .et_pb_contact_field
     .fx-f.wide               .et_flex_column_24_24
     .fx-f label              .et_pb_contact_form_label
     .fx-legend               .et_pb_contact_field_options_title
     .fx-pills                .et_pb_contact_field_options_list
     .fx-pills label          .et_pb_contact_field_checkbox label
     .fx-consent              el ultimo .et_pb_contact_field
     .fx-send                 .et_pb_contact_submit
     .fx-done                 .et-pb-contact-message

   LA REJILLA NO SE ESCRIBE. Divi 5 ya reparte los campos con su
   sistema de fracciones, et_flex_column_12_24 para media anchura y
   24_24 para completa, y eso se elige en Design > Sizing > Column
   Class. Aqui solo se le da el flex-basis, ver mas abajo.

   DIVERGENCIA DECIDIDA: la proteccion antispam es el captcha de Divi
   y no el campo trampa de la linea 2029. Ese campo solo filtra si algo
   lo revisa al enviar, y eso en el prototipo lo hace su JavaScript. El
   modulo de Divi manda el formulario por su cuenta.

   DIVERGENCIA DECIDIDA: el corte de movil es 720px, el del prototipo,
   y no los 900px del resto del archivo. */

.adn-home .adn-formx{
  padding:clamp(3rem,7vh,5rem) 0 clamp(4rem,9vh,7rem);
  border-top:1px solid rgba(255,255,255,.1);
  gap:0;
}
.adn-home .adn-formx .et_pb_row{
  max-width:73.75rem;
  margin:0 auto;
  padding:0 var(--pad);
  gap:0;
}
.adn-home .adn-formx .et_pb_column{
  gap:0;
}

/* El modulo Contact Form trae su propio envoltorio con margen. Sin
   esto quedaban 122px entre el parrafo de la cabecera y el primer
   campo, cuando el margen declarado son 41.6px. */
.adn-home .adn-formx .et_pb_contact,
.adn-home .adn-formx .et_pb_contact_form_container{
  margin:0;padding:0;gap:0;
}
/* El titulo del formulario se dejo vacio en Divi: la cabecera ya la
   ponen los tres modulos de arriba. */
.adn-home .adn-formx .et_pb_contact_main_title{display:none}

/* --- La cabecera --- */

.adn-home .adn-formx .eyebrow,
.adn-home .adn-formx .big,
.adn-home .adn-formx .ftext{text-align:center}

/* !important por lo del bloque 2: font:inherit cae sobre el mismo
   elemento que lleva la clase y le borra el margen. */
.adn-home .adn-formx .eyebrow{margin-bottom:2.2rem !important}
.adn-home .adn-formx .big{
  margin:0 auto 2.2rem !important;
  max-width:15ch;
}
.adn-home .adn-formx .ftext{
  font-weight:200;font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.55;
  color:rgba(255,255,255,.7);
  max-width:48ch;
  margin:0 auto clamp(2.6rem,6vh,4rem) !important;
}

/* --- La rejilla ---
   Prototipo, linea 1124. Divi trae 15px parejo y aqui se sustituye. */
.adn-home .adn-formx form.et_pb_contact_form{
  gap:1.15rem clamp(1.1rem,2vw,1.8rem);
}

/* EL gap OTRA VEZ, por septima vez en el archivo. Cada campo es un
   et_flex_module en columna y Divi le pone 30px entre la etiqueta y
   el input. Medido en beta: el margin-bottom de .55rem si llegaba,
   8.8px, pero el hueco real era 39px. */
.adn-home .adn-formx .et_pb_contact_field{
  padding:0;margin:0;gap:0;
}

/* EL ANCHO DE COLUMNA NO BASTA. Divi le pone a cada campo un width
   segun su Column Class, pero deja el flex-basis en auto. Con basis
   auto el navegador reparte por el contenido y no por ese width: los
   cuatro campos de media anchura pedian el renglon entero y quedaban
   apilados, cada uno con su caja encogida dentro. Medido en beta: los
   cuatro en x:275. Con el basis escrito, el flex ya sabe cuanto ocupa
   cada uno y los empareja. */
.adn-home .adn-formx .et_flex_column_12_24{
  flex:0 0 calc(50% - clamp(1.1rem,2vw,1.8rem) / 2);
}
.adn-home .adn-formx .et_flex_column_24_24{
  flex:0 0 100%;
}

/* --- Las etiquetas ---
   Prototipo, lineas 1127 a 1135. Divi las esconde con display:none y
   usa el titulo como marcador de posicion. Aqui se muestran encima
   del campo, que es como se lee mejor: el marcador desaparece al
   escribir y el visitante pierde de vista que le estaban preguntando.

   El .req amarillo y el .opt gris los mete home.js: Divi no tiene
   campo para un sufijo de etiqueta. */
.adn-home .adn-formx .et_pb_contact_form_label,
.adn-home .adn-formx .et_pb_contact_field_options_title{
  display:block;
  margin-bottom:.55rem;
  font-family:var(--display);font-weight:600;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.adn-home .adn-formx .et_pb_contact_form_label .req{
  color:var(--yellow);margin-left:.25em;
}
.adn-home .adn-formx .et_pb_contact_form_label .opt,
.adn-home .adn-formx .et_pb_contact_field_options_title .opt{
  color:rgba(255,255,255,.26);letter-spacing:.1em;margin-left:.6em;
}

/* --- Los campos ---
   Prototipo, lineas 1138 a 1163. */
/* El :not es obligatorio. Divi le pone class="input" TAMBIEN a cada
   checkbox y al captcha, asi que sin excluirlos esta regla los pinta
   como campos de texto: ancho completo, borde y relleno de 1rem. Eso
   era lo que rompia las pildoras. */
.adn-home .adn-formx .input:not([type=checkbox]):not(.et_pb_contact_captcha),
.adn-home .adn-formx .et_pb_contact_select,
.adn-home .adn-formx textarea.et_pb_contact_message{
  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.3125rem;
  padding:1rem 1.1rem;
  transition:border-color .35s ease,background .35s ease;
}
.adn-home .adn-formx textarea.et_pb_contact_message{
  min-height:10.625rem;resize:vertical;line-height:1.6;
}
.adn-home .adn-formx .input::placeholder,
.adn-home .adn-formx textarea.et_pb_contact_message::placeholder{
  color:rgba(255,255,255,.3);
}
.adn-home .adn-formx .input:focus,
.adn-home .adn-formx .et_pb_contact_select:focus,
.adn-home .adn-formx textarea.et_pb_contact_message:focus{
  outline:none;
  border-color:var(--yellow);
  background:rgba(255,255,255,.06);
}

/* La flecha propia: el desplegable del sistema se ve fuera de lugar
   sobre negro y cada navegador lo dibuja distinto. Linea 1155. */
.adn-home .adn-formx .et_pb_contact_select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  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.25rem) 50%,calc(100% - 0.875rem) 50%;
  background-size:0.375rem 0.375rem,0.375rem 0.375rem;
  background-repeat:no-repeat;
  padding-right:2.8rem;
}
.adn-home .adn-formx .et_pb_contact_select option{
  background:#101010;color:#fff;
}

/* --- Las casillas como pildoras ---
   Prototipo, lineas 1173 a 1189.

   Divi arma cada casilla asi, medido en consola:
     SPAN.et_pb_contact_field_checkbox > INPUT.input + LABEL > I
   La <i> es el cuadrito que dibuja Divi y el input es el de verdad.
   Los dos se esconden y el que se pinta es el <label>: asi la pildora
   entera es la zona de clic, sin tocar el marcado.

   El input NO lleva display:none, que lo sacaria del orden de
   tabulacion. Se hace invisible en su sitio, igual que el prototipo
   en su linea 1183. */

.adn-home .adn-formx .et_pb_contact_field_options_list{
  display:flex;flex-wrap:wrap;gap:.6rem;
}
.adn-home .adn-formx .et_pb_contact_field_checkbox{
  display:block;position:relative;
}
.adn-home .adn-formx .et_pb_contact_field_checkbox input{
  position:absolute;opacity:0;width:0;height:0;margin:0;padding:0;
}
.adn-home .adn-formx .et_pb_contact_field_checkbox label i{display:none}

.adn-home .adn-formx .et_pb_contact_field_checkbox label{
  display:block;margin:0;cursor:pointer;
  font-family:var(--body);font-weight:300;font-size:.85rem;
  letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.6);
  background:none;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:.62rem 1.15rem;
  transition:border-color .35s ease,color .35s ease,background .35s ease;
}
.adn-home .adn-formx .et_pb_contact_field_checkbox label:hover{
  border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.85);
}
/* :has mira del input marcado a su label hermano, linea 1186 */
.adn-home .adn-formx .et_pb_contact_field_checkbox:has(input:checked) label{
  background:var(--yellow);border-color:var(--yellow);
  color:var(--black);font-weight:500;
}
.adn-home .adn-formx .et_pb_contact_field_checkbox:has(input:focus-visible) label{
  outline:1px solid var(--yellow);outline-offset:0.1875rem;
}

/* --- El consentimiento ---
   Prototipo, lineas 1196 a 1211. Es un campo de casillas de una sola
   opcion, asi que hereda todo lo de arriba y se veria como otra
   pildora suelta. Aqui vuelve a ser una linea de texto con su casilla.

   SE APUNTA POR LA CLASE NUMERADA, NO POR :last-of-type. Ese selector
   no encontraba nada: mira el ultimo div entre sus hermanos, y despues
   del campo 8 hay mas divs dentro del formulario, entre ellos el
   .et_contact_bottom_container. Medido en consola: la consulta
   devolvia null y las ocho reglas de este bloque no se aplicaban a
   nada. La clase _8 es la que Divi le pone al noveno campo, contando
   desde cero, y es estable mientras no se reordenen los campos.
   SI SE AGREGA O SE MUEVE UN CAMPO, HAY QUE REVISAR ESTE NUMERO. */

.adn-home .adn-formx .et_pb_contact_field_8{margin-top:.4rem}
.adn-home .adn-formx .et_pb_contact_field_8 .et_pb_contact_field_options_title{
  display:none;
}
.adn-home .adn-formx .et_pb_contact_field_8 .et_pb_contact_field_checkbox label{
  display:flex;align-items:flex-start;gap:.75rem;
  background:none;border:0;border-radius:0;padding:0;
  font-size:.8rem;font-weight:300;line-height:1.5;
  color:rgba(255,255,255,.5);
}
.adn-home .adn-formx .et_pb_contact_field_8 .et_pb_contact_field_checkbox label:hover{
  color:rgba(255,255,255,.7);
}
/* Aqui la <i> si se ve: es la casilla, y sin ella no habria nada que
   marcar porque el label ya no es una pildora. */
.adn-home .adn-formx .et_pb_contact_field_8 .et_pb_contact_field_checkbox label i{
  display:block;flex:none;
  width:1.125rem;height:1.125rem;margin-top:.12rem;
  border:1px solid rgba(255,255,255,.3);border-radius:0.1875rem;
  transition:background .3s ease,border-color .3s ease;
}
.adn-home .adn-formx .et_pb_contact_field_8 .et_pb_contact_field_checkbox:has(input:checked) label{
  background:none;color:rgba(255,255,255,.5);font-weight:300;
}
.adn-home .adn-formx .et_pb_contact_field_8 .et_pb_contact_field_checkbox:has(input:checked) label i{
  background:var(--yellow);border-color:var(--yellow);
}
/* El palito de la marca, linea 1207 */
.adn-home .adn-formx .et_pb_contact_field_8 .et_pb_contact_field_checkbox:has(input:checked) label 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);
}

/* --- El pie del formulario ---
   El captcha a la izquierda y el boton a la derecha. En el prototipo
   no hay captcha: ver la divergencia del encabezado. */

.adn-home .adn-formx .et_contact_bottom_container{
  display:flex;align-items:center;justify-content:flex-start;
  flex-wrap:wrap;gap:1.4rem;
  width:100%;margin-top:.9rem;
}
.adn-home .adn-formx .et_pb_contact_right,
.adn-home .adn-formx .et_pb_contact_right p{
  display:flex;align-items:center;gap:.7rem;margin:0;
  font-family:var(--body);font-weight:200;font-size:.8rem;
  color:rgba(255,255,255,.32);
}
.adn-home .adn-formx .input.et_pb_contact_captcha{
  width:4.5rem;text-align:center;padding:.7rem .5rem;
}

/* --- El boton ---
   Prototipo, lineas 1220 a 1229. Es un boton de Divi, asi que hereda
   borde, flecha y relleno de reglas colgadas de #page-container. Un id
   gana a cualquier cadena de clases: ahi si van !important. Misma
   leccion que el punto 11 con el boton del header. */

.adn-home .adn-formx .et_pb_contact_submit{
  display:flex !important;align-items:center;gap:.7rem;
  font-family:var(--display) !important;
  font-weight:600 !important;font-size:.98rem !important;
  color:var(--black) !important;
  background:var(--yellow) !important;
  border:0 !important;border-radius:999px !important;
  padding:1.1rem 2.4rem !important;
  cursor:pointer;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.adn-home .adn-formx .et_pb_contact_submit:hover{
  transform:translateY(-2px);
  box-shadow:0 0.75rem 2.5rem rgba(255,198,0,.34);
}
.adn-home .adn-formx .et_pb_contact_submit::after,
.adn-home .adn-formx .et_pb_contact_submit::before{display:none !important}

/* --- La letra pequena ---
   Prototipo, linea 1231. El texto es de la linea 2044 y vive en un
   modulo Text propio detras del formulario, porque el modulo de Divi
   no deja meter nada dentro del <form>. */
.adn-home .adn-formx .ffine{
  margin-top:.4rem !important;
  font-size:.74rem;font-weight:200;
  color:rgba(255,255,255,.32);
}

/* --- El mensaje de gracias ---
   Prototipo, lineas 1236 a 1249. Lo pinta Divi cuando el envio sale
   bien, y sustituye al formulario. */

.adn-home .adn-formx .et-pb-contact-message{
  text-align:center;
  padding:clamp(2.5rem,6vh,4rem) 1rem;
  border:1px solid rgba(255,198,0,.28);border-radius:0.875rem;
  background:rgba(255,198,0,.04);
  font-family:var(--body);font-weight:200;font-size:.95rem;line-height:1.6;
  color:rgba(255,255,255,.6);
}
.adn-home .adn-formx .et-pb-contact-message p{
  max-width:46ch;margin:0 auto;
}
/* Divi devuelve los errores de validacion dentro de un <ul> en este
   mismo contenedor. */
.adn-home .adn-formx .et-pb-contact-message ul{
  list-style:none;margin:0;padding:0;
}

/* --- Pantalla angosta ---
   Prototipo, lineas 1675 a 1681. El corte es 720px, no 900. Va al
   final por lo de siempre: una media query no suma especificidad. */

@media (max-width:720px){
  .adn-home .adn-formx .et_flex_column_12_24{flex:0 0 100%}
  /* 44px es el minimo para que un dedo acierte sin pelear */
  .adn-home .adn-formx .et_pb_contact_field_checkbox label{padding:.78rem 1.2rem}
  .adn-home .adn-formx textarea.et_pb_contact_message{min-height:9.375rem}
  .adn-home .adn-formx .et_contact_bottom_container{
    flex-direction:column;align-items:stretch;gap:1.2rem;
  }
  .adn-home .adn-formx .et_pb_contact_submit{
    width:100%;justify-content:center;
  }
  .adn-home .adn-formx .et_pb_contact_right{justify-content:center}
}

/* ─── Correcciones medidas sobre el HTML real de Divi ───

   1. EL TITULO SALE DOBLE. Divi pinta el nombre del campo de casillas
      dos veces: una en label.et_pb_contact_form_label y otra en
      span.et_pb_contact_field_options_title. Se queda el label, que es
      el mismo elemento que usan todos los demas campos, y asi el
      .req y el .opt se ponen en un solo sitio.

   2. EL MENSAJE DE GRACIAS SE VE SIEMPRE. El prototipo, linea 1236,
      lo declara display:none y lo enciende con .formx.sent. Se me
      quedo sin portar y el recuadro amarillo salia vacio encima del
      formulario. Divi lo llena y lo muestra por su cuenta al enviar,
      asi que aqui basta con esconderlo mientras esta vacio. */

.adn-home .adn-formx .et_pb_contact_field_options_title{display:none}

.adn-home .adn-formx .et-pb-contact-message:empty{display:none}

/* ─── Ajuste fino contra el prototipo, medido en las dos pestanas ───

   1. LAS FILAS SEPARABAN 51px CONTRA LOS 42 DEL PROTOTIPO. El gap
      estaba bien, 18.4px, y el campo sin margen. Los 9px sobrantes
      vivian DENTRO del campo: su contenedor arrastra el line-height
      del cuerpo y crece por debajo del input. Con line-height:0 en el
      contenedor y el valor devuelto a sus hijos, la caja mide lo que
      miden sus piezas.

   2. LA PILDORA MEDIA 45px CONTRA LOS 39 DEL PROTOTIPO. El padding
      estaba copiado exacto, 9.92px, pero el label hereda de Divi un
      line-height de 23.12px. El prototipo no lo declara y ahi resuelve
      en 17px. Se fija a 1.25, que sobre 13.6px da esos 17. */

.adn-home .adn-formx .et_pb_contact_field{line-height:0}
.adn-home .adn-formx .et_pb_contact_field > *{line-height:normal}

.adn-home .adn-formx .et_pb_contact_field_checkbox label{line-height:1.25}

/* ─── Las pildoras, contra el selector numerado de Divi ───

   Divi pinta las casillas con un selector que incluye la clase
   numerada de la instancia y el hijo directo:
     .et_pb_contact_field_5.et_pb_contact_field
       .et_pb_contact_field_options_list > .et_pb_contact_field_checkbox
   Son tres clases mas la combinacion de hijo, y le pone display:flex
   con el ancho completo. Nuestra regla tenia dos clases y perdia: por
   eso las pildoras salian estiradas y con el cuadrito de Divi a la
   vista. Es la leccion 7 otra vez, la misma del modulo Menu.

   Aqui se iguala el peso subiendo a cuatro clases y usando tambien el
   hijo directo. No hace falta !important. */

.adn-home .adn-formx .et_pb_contact_field .et_pb_contact_field_options_list > .et_pb_contact_field_checkbox{
  display:block;
  position:relative;
  width:auto;
  flex:0 0 auto;
}
.adn-home .adn-formx .et_pb_contact_field .et_pb_contact_field_options_list > .et_pb_contact_field_checkbox > label i{
  display:none;
}

/* El consentimiento vuelve a ser una linea con su casilla, y ahi la
   <i> si tiene que verse. */
.adn-home .adn-formx .et_pb_contact_field_8 .et_pb_contact_field_options_list > .et_pb_contact_field_checkbox{
  width:100%;
}
.adn-home .adn-formx .et_pb_contact_field_8 .et_pb_contact_field_options_list > .et_pb_contact_field_checkbox > label i{
  display:block;
}

/* ─── El pie del formulario, contra el selector numerado ───

   El boton salia partido en tres lineas dentro de una caja ovalada:
   el display:flex lo dejaba encogerse y el texto se rompia palabra a
   palabra. Le faltaban la direccion explicita y el nowrap, que es la
   leccion 26 otra vez.

   Y el captcha se pintaba blanco, porque Divi lo pinta con la clase
   numerada de la instancia y nuestra regla de dos clases perdia. */

.adn-home .adn-formx .et_pb_button_wrapper{
  flex:0 0 auto;
}
.adn-home .adn-formx .et_pb_contact_submit{
  flex-direction:row;
  white-space:nowrap;
  width:auto;
  justify-content:center;
}

.adn-home .adn-formx .et_pb_contact_field .input.et_pb_contact_captcha,
.adn-home .adn-formx .et_pb_contact_right .input.et_pb_contact_captcha{
  width:4.5rem;text-align:center;
  padding:.7rem .5rem;
  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.3125rem;
}
.adn-home .adn-formx .et_pb_contact_right .input.et_pb_contact_captcha:focus{
  outline:none;border-color:var(--yellow);background:rgba(255,255,255,.06);
}

/* ─── Dos remates medidos contra el prototipo ───

   1. LA CASILLA DEL CONSENTIMIENTO SALIA CASI BLANCA. Divi le pinta un
      fondo #eee que no habiamos apagado: solo declarabamos el fondo
      del estado marcado. Medido en consola: rgb(238,238,238).

   2. LA FLECHA DEL BOTON ESTABA EN EL HTML PERO NO SE VEIA. El SVG lo
      mete home.js y llegaba bien, pero sin ancho, sin trazo y sin
      fill:none un SVG sale invisible. Prototipo, linea 1229. */

.adn-home .adn-formx .et_pb_contact_field_8 .et_pb_contact_field_checkbox label i{
  background:none;
  appearance:none;-webkit-appearance:none;
}

.adn-home .adn-formx .et_pb_contact_submit svg{
  width:0.875rem;height:0.875rem;flex:none;
  stroke:currentColor;stroke-width:2.2;fill:none;
}

/* ─── El boton, alineado a la izquierda ───

   Al apagar el captcha, el .et_contact_bottom_container se quedo con
   un solo hijo, el envoltorio del boton, y Divi lo empuja a la
   derecha con su propio margen. El prototipo, linea 1221, usa
   justify-self:start dentro de la rejilla: el boton arranca donde
   arrancan los campos. */

.adn-home .adn-formx .et_contact_bottom_container{
  justify-content:flex-start;
}
.adn-home .adn-formx .et_pb_button_wrapper{
  margin:0;
  margin-inline-start:0;
  text-align:left;
}

.adn-home .adn-formx .et_pb_contact_submit{margin:0 !important}

/* ══════════════════════════════════════════════════════════════════
   BANNER DE YOUTUBE EN EL INICIO
   ------------------------------------------------------------------
   Va entre la franja de agendar y "Who you are hiring".

   El boton NO es amarillo a proposito. Justo encima hay un boton
   amarillo solido; dos iguales pegados se leen como repeticion y el
   segundo se pierde. Este va de contorno y se rellena al pasar el
   raton: misma forma, misma altura, menos peso.

   El marco es 16:9 y la barra corre, igual que la landing de YouTube.
   Escena FIJA: en el inicio esto es anzuelo, no demostracion.
   ══════════════════════════════════════════════════════════════════ */

.adn-home .adn-ytb{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(2.2rem,5vh,3.4rem) 0;
}

/* La pantalla ocupa un tercio, no la mitad. A la mitad la banda
   crecia hasta parecer una seccion propia, y esto es un banner. */
/* EL CONTENEDOR.
   .adn-sec le quita a la fila el ancho maximo y el relleno lateral a
   proposito, para que cada seccion vaya a sangre y se ponga el suyo
   por dentro. Este es el suyo, con los mismos valores que el resto
   del inicio: 1500 de tope y --pad a los lados. */
.adn-home .adn-ytb .ytb-in{
  max-width:93.75rem;
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
@media (max-width:900px){
  .adn-home .adn-ytb .ytb-in{grid-template-columns:1fr;gap:1.9rem}
  /* Sin order:-1 a proposito. En tableta y telefono lo primero que
     tiene que leerse es de que servicio se trata, no el dibujo. */
}

/* EL ROTULO DEL SERVICIO.
   Va grande y en amarillo porque es el ancla: el que anda buscando
   quien le lleve el canal tiene que cacharlo de lejos, sin leer. */
.adn-home .adn-ytb .ytb-eye{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.1rem,4.4vw,3.4rem);
  line-height:.98;letter-spacing:-.042em;
  color:var(--yellow);margin-bottom:.75rem;
}

.adn-home .adn-ytb h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,1.75vw,1.4rem);
  line-height:1.25;letter-spacing:-.022em;max-width:30ch;
  color:rgba(255,255,255,.9);
}
.adn-home .adn-ytb h2 em{font-style:normal;color:inherit}

.adn-home .adn-ytb .ytb-sub{
  font-weight:200;font-size:clamp(.9rem,1.2vw,1rem);
  line-height:1.55;color:rgba(255,255,255,.62);
  max-width:44ch;margin-top:.85rem;
}
.adn-home .adn-ytb .ytb-sub b{color:rgba(255,255,255,.92);font-weight:500}

/* EL BOTON DE CONTORNO.
   No inventa un color nuevo: la paleta sigue siendo negro y amarillo.
   En reposo pesa poco, y al pasar el raton se rellena y conecta con
   el boton amarillo de la franja de arriba sin competir con el. */
.adn-home .adn-ytb .ytb-go{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:1.4rem;
  font-family:var(--display);font-weight:600;font-size:.9rem;
  padding:.82rem 1.7rem;border-radius:999px;
  color:var(--white);background:transparent;
  border:1px solid rgba(255,198,0,.55);
  transition:background .4s ease,color .4s ease,border-color .4s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.adn-home .adn-ytb .ytb-go:hover{
  background:var(--yellow);color:#000;border-color:var(--yellow);
  transform:translateY(-2px);
}

/* EL REPRODUCTOR ---------------------------------------------- */

.adn-home .adn-ytb .ytb-player{
  border:1px solid var(--line);border-radius:0.75rem;overflow:hidden;
  background:#0a0a0a;
  box-shadow:0 1.875rem 4.375rem -1.75rem rgba(0,0,0,.9);
}

.adn-home .adn-ytb .ytb-stage{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:radial-gradient(ellipse 80% 70% at 50% 34%,rgba(255,198,0,.07),transparent 66%),rgba(255,255,255,.03);
}
.adn-home .adn-ytb .ytb-stage svg{
  position:absolute;inset:0;width:100%;height:100%;
  stroke:var(--yellow);stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.adn-home .adn-ytb .ytb-stage .dim{stroke:rgba(255,255,255,.45)}
.adn-home .adn-ytb .ytb-stage .fill{fill:var(--yellow);stroke:none}
.adn-home .adn-ytb .ytb-stage .lbl{
  fill:var(--yellow);stroke:none;
  font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.02em;
}

.adn-home .adn-ytb .ytb-go-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:3.5rem;height:2.5rem;border-radius:0.6875rem;
  background:#ff2d2d;display:grid;place-items:center;
  box-shadow:0 0.625rem 1.875rem rgba(255,45,45,.4);
}
.adn-home .adn-ytb .ytb-go-btn svg{
  position:static;width:1.125rem;height:1.125rem;fill:#fff;stroke:none;margin-left:2px;
}

/* La barra. El tramo visto va en rojo y las marcas de capitulo se
   encienden cuando el cabezal las pasa. */
.adn-home .adn-ytb .ytb-bar{position:relative;height:0.1875rem;background:rgba(255,255,255,.18)}
.adn-home .adn-ytb .ytb-seen{position:absolute;left:0;top:0;bottom:0;width:0;background:#ff2d2d}
.adn-home .adn-ytb .ytb-bar i{
  position:absolute;top:0;bottom:0;width:2px;
  background:rgba(255,255,255,.55);
  transition:background .3s ease,transform .3s ease;
}
.adn-home .adn-ytb .ytb-bar i.hit{background:var(--yellow);transform:scaleY(2.6)}

/* La entrada. Se escribe aqui y no se cuelga de la capa de motion
   para que el bloque sea autonomo: se puede mover de sitio en el
   inicio sin tocar nada mas. */
.adn-home .adn-ytb .ytb-up{opacity:0;transform:translateY(1.375rem)}
.adn-home .adn-ytb.is-in .ytb-up{
  opacity:1;transform:none;
  transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
.adn-home .adn-ytb.is-in .ytb-art{transition-delay:.12s}

@media (prefers-reduced-motion:reduce){
  .adn-home .adn-ytb .ytb-up{opacity:1;transform:none}
}

/* ══════════════════ EL BOTON DE CADA AREA ══════════════════
   Pedido de Jhoger el 16/09/2026: cada uno de los siete paneles
   cierra con un llamado. El enlace va escrito en el modulo Text del
   panel, pestaña Text, como <p class="pgo"><a href="...">...</a></p>,
   para que el texto sea editable y traducible. Aqui solo la forma:
   la misma pildora amarilla del sitio. */
.adn-home .adn-areas .panel .pgo{margin:2rem 0 0;padding:0}
.adn-home .adn-areas .panel .pgo a{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--display);font-weight:600;font-size:.8rem;
  text-decoration:none;text-shadow:none;
  padding:.78rem 1.5rem;border-radius:999px;
  background:var(--yellow);color:var(--black);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.adn-home .adn-areas .panel .pgo a::after{content:'\2192'}
.adn-home .adn-areas .panel .pgo a:hover{
  transform:translateY(-2px);
  box-shadow:0 0.625rem 2.125rem rgba(255,198,0,.32);
}