/* ==================================================================
   ADNIUS · Paginas interiores · v2 PANTALLAS GRANDES (27/09/2026)
   v2: 16 medidas de px a rem para que las paginas interiores crezcan
   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 y los 32/46px de la
   barra de administrador de WordPress.
   ------------------------------------------------------------------
   Portado de adnius-privacy-v1.html.

   Carga en TODA pagina que no sea la portada: las legales, la FAQ y
   las siete landings de servicios. Por eso nada cuelga de .adn-home,
   que es una clase de body que functions.php pone solo en el inicio.
   Todo cuelga de .adn-page.

   LAS VARIABLES NO SE DECLARAN AQUI. header.css ya las pone en :root
   y se encola en todo el sitio a prioridad 35, asi que --yellow,
   --display y --pad ya existen. functions.php declara adnius-header
   como dependencia para garantizar ese orden.

   EL RESET GLOBAL TAMPOCO SE PORTA. El prototipo abre con
   *{margin:0;padding:0} y eso aqui reventaria Divi. Los ceros van
   explicitos, igual que en footer.css.

   Orden: 1 puente con Divi, 2 base, 3 cabecera, 4 rejilla, 5 indice.
   El resto va en la segunda mitad del archivo.
   ================================================================== */


/* ══════════════════ 1 · PUENTE CON DIVI ══════════════════

   Medido en beta, la cadena real es:
     SECTION.adn-page > .et_pb_row > .et_pb_column > .et_pb_code >
     .et_pb_code_inner > .lwrap

   Dentro de un modulo Code el HTML sale tal cual: no hay
   .et_pb_text_inner, no hay <p> envolviendo y no hay <br> que apagar. */

.adn-page{
  position:relative;
  padding:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--body);
  gap:0;
}

/* Divi trae padding:54px 0 de fabrica y lo cuelga de una cadena con la
   clase numerada de la instancia. Un .adn-page a secas pierde. */
.adn-page.et_pb_section,
.adn-page.et_pb_with_background{
  padding-top:0;
  padding-bottom:0;
}

/* Divi mete gap:60px en secciones y gap:30px en filas y columnas.
   Primer sospechoso de cualquier bug de espaciado. */
.adn-page .et_pb_row{
  width:100%;max-width:none;margin:0;padding:0;gap:0;
}
.adn-page .et_pb_column{
  width:100%;margin:0;padding:0;gap:0;
}
.adn-page .et_pb_module{margin:0}
.adn-page .et_pb_code,
.adn-page .et_pb_code_inner{
  margin:0;padding:0;
  color:inherit;
  font:inherit;
}


/* ══════════════════ 2 · BASE DEL DOCUMENTO ══════════════════
   Lo que en el prototipo hacia el reset global de la linea 52. */

.adn-page h1,
.adn-page h2,
.adn-page h3,
.adn-page p,
.adn-page ul,
.adn-page ol,
.adn-page li,
.adn-page figure{
  margin:0;padding:0;
}
.adn-page ul,
.adn-page ol,
.adn-page li{list-style:none}
.adn-page img{display:block;max-width:100%}
.adn-page a{color:inherit}

.adn-page ::selection{background:var(--yellow);color:var(--black)}

/* motion.css pinta el foco con currentColor, que sobre texto gris da
   un contorno gris. Vuelve al amarillo del prototipo, linea 63. */
.adn-page a:focus-visible,
.adn-page button:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:0.25rem;
}

/* NO se porta scroll-behavior:smooth ni scroll-padding-top. Con Lenis
   el desplazamiento lo hace el JavaScript, no el navegador, asi que
   esas dos propiedades no se aplican nunca. El desvio por la cabecera
   fija lo calcula page.js. */


/* ══════════════════ 3 · LA CABECERA DE LA PAGINA ══════════════════
   Prototipo, lineas 85 a 143.

   DIVERGENCIA NECESARIA: el relleno de arriba sube de
   clamp(4.5rem,11vh,8rem) a clamp(7rem,13vh,9.5rem). En el prototipo
   la cabecera es un div en el flujo y empuja el contenido; en beta es
   position:fixed y no empuja nada. La barra mide unos 91px, asi que
   con los 72px del minimo del prototipo tapaba el eyebrow. */

.adn-legal{
  padding:clamp(7rem,13vh,9.5rem) 0 clamp(4rem,9vh,7rem);
}

.adn-page .lhead{
  max-width:93.75rem;margin:0 auto;
  padding:0 var(--pad) clamp(3rem,7vh,5rem);
  border-bottom:1px solid rgba(255,255,255,.1);
}

/* El eyebrow es flex porque cada letra va en su propio span. Los crea
   page.js, igual que en el inicio y en el pie. */
.adn-page .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;
  margin-bottom:1.8rem;
}

/* El --i le da a cada letra su turno: multiplicado por el retardo
   negativo, el color corre de izquierda a derecha en vez de cambiar
   todo a la vez.

   La animacion se declara con nombre propio: una @keyframes solo
   existe si la hoja que la declara esta cargada, y home.css solo
   carga en el inicio. */
.adn-page .eyebrow span{
  display:inline-block;
  animation:pageSpectrum 9s linear infinite;
  animation-delay:calc(var(--i) * -.42s);
}

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

.adn-page .lhead h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.2rem,5.5vw,4.2rem);
  line-height:1.02;letter-spacing:-.035em;
  max-width:16ch;
  margin-bottom:1.6rem;
}
/* La cursiva sale derecha y amarilla, igual que en el inicio */
.adn-page .lhead h1 em{font-style:normal;color:var(--yellow)}

.adn-page .lmeta{
  display:flex;flex-wrap:wrap;gap:.7rem 2rem;align-items:baseline;
  font-size:.78rem;font-weight:300;letter-spacing:.02em;
  color:rgba(255,255,255,.38);
}
.adn-page .lmeta b{
  font-family:var(--display);font-weight:600;
  color:rgba(255,255,255,.72);
}


/* ══════════════════ 4 · LA REJILLA ══════════════════
   Prototipo, lineas 146 a 158. Indice a la izquierda, documento a la
   derecha. Mismo reparto que las 7 areas del inicio, y por la misma
   razon: el indice se queda a la vista mientras el texto pasa. */

.adn-page .lwrap{
  max-width:93.75rem;margin:0 auto;
  padding:clamp(2.5rem,6vh,4rem) var(--pad) 0;
  display:grid;
  grid-template-columns:minmax(13.75rem,26%) 1fr;
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
}


/* ══════════════════ 5 · EL INDICE ══════════════════
   Prototipo, lineas 161 a 208.

   Lo arma page.js leyendo los h2 del cuerpo. No se escribe a mano:
   los titulos existen una sola vez y WPML los traduce una sola vez.
   Misma decision que el riel de las 7 areas.

   El top sube de 5rem a 7.5rem por lo mismo que el relleno de la
   cabecera: la barra fija mide unos 91px y a 80px el primer enlace
   quedaba debajo de ella. */

.adn-page .lnav{
  position:sticky;top:7.5rem;
  max-height:calc(100vh - 10.5rem);
  overflow-y:auto;
  scrollbar-width:none;
}
.adn-page .lnav::-webkit-scrollbar{display:none}

.adn-page .lnav h2{
  font-family:var(--display);font-weight:600;font-size:.62rem;
  letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
  margin-bottom:1.2rem;
}

.adn-page .lnav ol{display:flex;flex-direction:column;gap:.1rem}

.adn-page .lnav a{
  display:block;
  padding:.5rem .8rem;
  border-left:1px solid rgba(255,255,255,.1);
  font-size:.83rem;font-weight:300;line-height:1.35;
  color:rgba(255,255,255,.42);
  text-decoration:none;
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.adn-page .lnav a:hover{
  color:rgba(255,255,255,.8);
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.02);
}
/* La seccion que se esta leyendo. La clase la pone page.js. */
.adn-page .lnav a.on{
  color:var(--white);
  border-color:var(--yellow);
  background:rgba(255,198,0,.04);
}

/* FIN DE LA PRIMERA MITAD */


/* ══════════════════ 6 · EL DOCUMENTO ══════════════════
   Prototipo, lineas 211 a 335. */

.adn-page .lbody{
  max-width:74ch;
  font-weight:300;
  font-size:clamp(.95rem,1.2vw,1.04rem);
  line-height:1.72;
  color:rgba(255,255,255,.72);
  /* El contador de secciones arranca aqui */
  counter-reset:sec;
}

.adn-page .lbody p{margin-bottom:1.15rem}
.adn-page .lbody p:last-child{margin-bottom:0}
.adn-page .lbody b,
.adn-page .lbody strong{color:var(--white);font-weight:500}

/* En un documento legal la claridad manda sobre la elegancia: los
   enlaces del texto se subrayan. */
.adn-page .lbody a{
  color:rgba(255,255,255,.92);
  text-decoration:underline;
  text-underline-offset:0.1875rem;
  text-decoration-color:rgba(255,198,0,.5);
  transition:text-decoration-color .3s ease;
}
.adn-page .lbody a:hover{text-decoration-color:var(--yellow)}


/* --- El resumen ---
   Va antes que el indice de secciones a proposito. La mayoria quiere
   cuatro respuestas y no catorce apartados; quien necesite el detalle
   sigue leyendo. */

.adn-page .tldr{
  border:1px solid rgba(255,198,0,.24);
  border-radius:0.875rem;
  background:linear-gradient(155deg,rgba(255,198,0,.045),rgba(255,198,0,.008));
  padding:clamp(1.5rem,3vw,2.2rem);
  margin-bottom:clamp(2.5rem,6vh,3.6rem);
}
.adn-page .tldr h2{
  font-family:var(--display);font-weight:600;font-size:.66rem;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--yellow);
  margin-bottom:1.2rem;
}
.adn-page .tldr ul{display:flex;flex-direction:column;gap:.8rem}
.adn-page .tldr li{
  position:relative;padding-left:1.5rem;
  font-size:.96rem;line-height:1.55;
  color:rgba(255,255,255,.82);
}
.adn-page .tldr li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:.7rem;height:1px;background:var(--yellow);
}


/* --- Las secciones --- */

.adn-page .sec{padding-top:clamp(2.2rem,5vh,3.2rem)}
.adn-page .sec:first-of-type{padding-top:0}

/* NO se porta el scroll-margin-top de la linea 301: con Lenis el
   salto lo calcula page.js, y esa propiedad solo la lee el navegador
   cuando el desplazamiento es suyo. */

/* El numero delante del titulo lo pone el CSS con un contador: si se
   agrega o se mueve una seccion, la numeracion se recalcula sola. */
.adn-page .sec h2{
  counter-increment:sec;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.25rem,2.4vw,1.75rem);
  line-height:1.15;letter-spacing:-.02em;
  color:var(--white);
  margin-bottom:1.2rem;
  display:flex;gap:.9rem;align-items:baseline;
}
.adn-page .sec h2::before{
  content:counter(sec,decimal-leading-zero);
  font-size:.72rem;font-weight:600;letter-spacing:.1em;
  color:var(--yellow);
  flex:none;
  /* Los numeros no bailan al pasar de una a dos cifras */
  font-variant-numeric:tabular-nums;
}

.adn-page .sec h3{
  font-family:var(--display);font-weight:600;
  font-size:1rem;letter-spacing:-.01em;
  color:rgba(255,255,255,.92);
  margin:1.8rem 0 .7rem;
}


/* --- Listas dentro del documento ---

   NO se porta el selector de la linea 314, con su doble :not. Ese
   apunta a lo que NO es, y basta con apuntar a lo que si: el resumen
   vive fuera de .sec y los pares se distinguen por su clase, que
   llega despues y con mas peso. */

.adn-page .sec ul{
  display:flex;flex-direction:column;gap:.6rem;
  margin:0 0 1.15rem;
}
.adn-page .sec ul li{position:relative;padding-left:1.3rem}
.adn-page .sec ul li::before{
  content:'';position:absolute;left:0;top:.72em;
  width:.5rem;height:1px;background:var(--yellow);opacity:.65;
}


/* --- Pares de dato y explicacion ---
   Para la lista de terceros y la de plazos. Una tabla se rompe en
   telefono; esto no. */

.adn-page .sec ul.pair{
  display:flex;flex-direction:column;gap:0;
  margin:0 0 1.15rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.adn-page .sec .pair li{
  display:grid;
  grid-template-columns:minmax(8.75rem,30%) 1fr;
  gap:.4rem 1.5rem;
  padding:.85rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.adn-page .sec .pair li::before{display:none}
.adn-page .sec .pair b{
  font-family:var(--display);font-weight:600;font-size:.9rem;
  color:rgba(255,255,255,.9);
}
.adn-page .sec .pair span{font-size:.9rem;line-height:1.5}


/* ══════════════════ 7 · LA CAJA DE CONTACTO ══════════════════
   Prototipo, lineas 338 a 365. */

.adn-page .lcta{
  margin-top:clamp(2.5rem,6vh,3.6rem);
  border:1px solid rgba(255,255,255,.12);
  border-radius:0.875rem;
  padding:clamp(1.6rem,3.4vw,2.4rem);
  background:linear-gradient(155deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
}
.adn-page .lcta h2{
  font-family:var(--display);font-weight:700;
  font-size:1.3rem;letter-spacing:-.02em;
  color:var(--white);margin-bottom:.8rem;
}
.adn-page .lcta p{color:rgba(255,255,255,.6);margin-bottom:1.5rem}
.adn-page .lcta .book{
  display:inline-block;
  font-family:var(--display);font-weight:600;font-size:.9rem;
  text-decoration:none;
  padding:.95rem 2rem;border-radius:999px;
  background:var(--yellow);color:var(--black);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.adn-page .lcta .book:hover{
  transform:translateY(-2px);
  box-shadow:0 0.75rem 2.5rem rgba(255,198,0,.3);
}


/* ══════════════════ 8 · LA BARRA DE PROGRESO ══════════════════
   Prototipo, lineas 66 a 79.

   NO cuelga de .adn-page: page.js la crea y la cuelga del body, igual
   que header.js con la pildora y el dock. Es position:fixed, y dentro
   de un contenedor con transform quedaria anclada a el en vez de a la
   ventana. Por eso lleva su propio prefijo. */

.adn-prog{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:80;
  background:rgba(255,255,255,.06);
  pointer-events:none;
}
.adn-prog i{
  display:block;height:100%;width:0;
  background:var(--yellow);
  transform-origin:left center;
}

/* La barra de administrador empuja 32px y solo la ve quien inicio
   sesion. Misma regla que en header.css. */
body.admin-bar .adn-prog{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .adn-prog{top:46px}
}


/* ══════════════════ 9 · PANTALLA ANGOSTA ══════════════════
   Prototipo, lineas 371 a 411.

   Va al final a proposito. 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 no se aplica nunca. Es
   la misma nota que abre el bloque de movil de home.css. */

@media (max-width:900px){
  .adn-page .lwrap{grid-template-columns:1fr;gap:2rem}

  /* El indice deja de ser columna fija y pasa a desplegable encima del
     texto: en un telefono trece enlaces antes del contenido son un
     muro. */
  .adn-page .lnav{
    position:static;max-height:none;
    border:1px solid rgba(255,255,255,.11);
    border-radius:0.75rem;
    overflow:hidden;
  }
  .adn-page .lnav h2{
    margin:0;padding:1rem 1.2rem;
    display:flex;justify-content:space-between;align-items:center;
    cursor:pointer;
  }
  .adn-page .lnav h2::after{
    content:'';width:0.5rem;height:0.5rem;
    border-right:1px solid rgba(255,255,255,.5);
    border-bottom:1px solid rgba(255,255,255,.5);
    transform:rotate(45deg);margin-top:-0.25rem;
    transition:transform .35s ease;
  }
  .adn-page .lnav.open h2::after{transform:rotate(-135deg);margin-top:2px}

  .adn-page .lnav ol{
    max-height:0;overflow:hidden;
    transition:max-height .4s cubic-bezier(.16,1,.3,1);
  }
  .adn-page .lnav.open ol{max-height:70vh;overflow-y:auto}
  .adn-page .lnav a{border-left:0;padding:.6rem 1.2rem}
  .adn-page .lnav a.on{border-left:2px solid var(--yellow);padding-left:calc(1.2rem - 2px)}

  .adn-page .sec .pair li{grid-template-columns:1fr;gap:.2rem}
}

@media (prefers-reduced-motion:reduce){
  .adn-page .eyebrow span{animation:none;color:var(--white)}
  .adn-page *{transition-duration:.001ms !important}
}


/* ══════════════════ 10 · IMPRESION ══════════════════
   Prototipo, lineas 418 a 435.

   Un documento legal se imprime y se guarda. En negro gasta el toner
   entero y sale ilegible.

   Se apagan ademas la cabecera, el pie, la pildora, la capa del menu
   y el dock, que en el prototipo no existian: alli el documento era
   una pagina suelta y aqui vive dentro del sitio. */

@media print{
  .adn-prog,
  .adn-page .lnav,
  .adn-hdr,
  .adn-foot,
  .adn-dock,
  .mpill,
  .mover{display:none !important}

  html,body{background:#fff !important;color:#000}
  .adn-page,
  .adn-legal{background:#fff;color:#000;padding:0}
  .adn-page .lwrap{grid-template-columns:1fr;padding:0}
  .adn-page .lhead{padding-left:0;padding-right:0}
  .adn-page .lbody,
  .adn-page .lbody p{color:#000;max-width:none}
  .adn-page .sec h2,
  .adn-page .lhead h1,
  .adn-page .lbody b{color:#000}
  .adn-page .lhead h1 em{color:#000}
  .adn-page .sec h2::before,
  .adn-page .tldr h2{color:#666}
  .adn-page .tldr,
  .adn-page .lcta{border:1px solid #ccc;background:none}
  .adn-page .tldr li,
  .adn-page .lcta p{color:#000}
  .adn-page .lbody a{color:#000;text-decoration:underline}
  /* La URL detras de cada enlace, que en papel no se puede clicar */
  .adn-page .lbody a::after{content:' (' attr(href) ')';font-size:.8em;color:#666}
  .adn-page .eyebrow span{animation:none;color:#666}
}


/* ─── El relleno de arriba lo borraba nuestra propia regla ───

   Medido en beta: getComputedStyle(.adn-legal).paddingTop devolvia
   0px, con el eyebrow en top 32 y el header terminando en 123. O sea
   el titulo quedaba 91px por debajo de la barra, tapado por ella.

   La causa no es Divi: es el bloque 1 de este archivo.
   .adn-page.et_pb_section apaga el relleno de fabrica con DOS clases
   sobre el mismo elemento, y el bloque 3 lo devolvia con UNA sola,
   .adn-legal. La de dos gana por especificidad y el relleno nunca
   llegaba.

   Aqui se iguala el peso escribiendo las dos clases juntas, que es
   como Divi las tiene en el elemento. Es la misma leccion del bloque
   1 de footer.css con el padding:54px de las secciones.

   Va al final por lo de siempre: entre reglas del mismo peso gana la
   ultima. */

.adn-page.adn-legal{
  padding-top:clamp(7rem,13vh,9.5rem);
  padding-bottom:clamp(4rem,9vh,7rem);
}


/* ─── El indice acompaña la lectura en telefono ───

   En escritorio ya lo hace: el bloque 5 lo deja sticky al lado del
   texto. En telefono el bloque 9 lo pasa a static, y ahi se queda
   arriba del todo: si eliges una seccion del final, te quedas sin
   manera de saltar a otra sin volver a subir.

   Se resuelve con lo mismo que ya funciona en escritorio, sticky, y
   no con una barra flotante nueva. El recuadro es el del bloque 9,
   intacto: cerrado, visible desde que carga la pagina, y pegado bajo
   la cabecera mientras el documento pasa por debajo.

   El top son los 7.5rem del bloque 5, que es lo que mide la barra
   fija mas su aire. El z-index lo pone por encima del texto que
   corre debajo, y por debajo del dock, que lleva 65.

   Va al final por lo de siempre: una media query no suma
   especificidad y el static del bloque 9 esta escrito mas arriba. */

@media (max-width:900px){
  .adn-page .lnav{
    position:sticky;
    top:1rem;
    z-index:40;
    background:rgba(12,12,12,.92);
    -webkit-backdrop-filter:blur(0.875rem);
    backdrop-filter:blur(0.875rem);
  }
}