/* ==========================================================
   NEXIAL LAB — hoja de estilo común
   Base #00222B · acento #80FFB3 solo como detalle (manual de marca)
   ========================================================== */

:root{
  --petroleo:#00222B;
  --petroleo-hondo:#001A21;
  --petroleo-claro:#04303B;
  --aguamarina:#80FFB3;
  --texto:#E8F0EF;
  --texto-tenue:#7E9A9C;
  --borde:rgba(232,240,239,.14);
  --max:1180px;
  --nav-h:72px;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}

body{
  background:var(--petroleo);
  color:var(--texto);
  font-family:'Inter','Segoe UI',Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block}

a{color:inherit}

::selection{background:var(--aguamarina);color:var(--petroleo)}

.contenedor{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 clamp(20px,5vw,48px);
}

/* ---------- TIPOGRAFÍA ---------- */
h1,h2,h3,h4{line-height:1.18;font-weight:600;letter-spacing:-.015em}

h2{font-size:clamp(27px,3.6vw,44px);font-weight:300}
h2 strong{font-weight:600}

h3{font-size:clamp(19px,2vw,23px);font-weight:600;letter-spacing:-.01em}

.rotulo{
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--aguamarina);
  font-weight:500;
  margin-bottom:20px;
  display:block;
}

.entradilla{
  font-size:clamp(16px,1.6vw,18.5px);
  color:var(--texto-tenue);
  line-height:1.8;
  max-width:62ch;
}

/* ---------- NAVEGACIÓN ---------- */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}

.nav.solido{
  background:rgba(0,26,33,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--borde);
}

.nav .contenedor{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.marca{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.marca img{width:24px;height:auto;opacity:.92}
.marca span{
  font-size:11.5px;
  letter-spacing:.32em;
  font-weight:600;
  text-transform:uppercase;
}

.menu{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}

.menu a{
  color:var(--texto-tenue);
  text-decoration:none;
  font-size:13.5px;
  transition:color .22s ease;
  white-space:nowrap;
}
.menu a:hover,.menu a[aria-current="page"]{color:var(--texto)}

.menu a.btn-nav{
  color:var(--texto);
  border:1px solid var(--borde);
  padding:9px 19px;
  border-radius:2px;
  transition:border-color .22s ease,color .22s ease;
}
.menu a.btn-nav:hover{border-color:var(--aguamarina);color:var(--aguamarina)}

.hamburguesa{
  display:none;
  background:none;
  border:0;
  color:var(--texto);
  cursor:pointer;
  padding:8px;
}
.hamburguesa svg{width:22px;height:22px}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-block;
  background:var(--aguamarina);
  color:var(--petroleo);
  padding:15px 32px;
  border-radius:2px;
  text-decoration:none;
  font-size:14.5px;
  font-weight:600;
  border:0;
  cursor:pointer;
  font-family:inherit;
  transition:transform .22s ease,box-shadow .22s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(128,255,179,.22)}

.btn-linea{
  display:inline-block;
  color:var(--texto);
  padding:15px 28px;
  border:1px solid var(--borde);
  border-radius:2px;
  text-decoration:none;
  font-size:14.5px;
  transition:border-color .22s ease;
}
.btn-linea:hover{border-color:rgba(232,240,239,.45)}

/* enlace con flecha */
.enlace{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--aguamarina);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
}
.enlace::after{content:'→';transition:transform .22s ease}
.enlace:hover::after{transform:translateX(4px)}

/* ---------- SECCIONES ---------- */
.seccion{padding:clamp(72px,9vw,124px) 0;position:relative}
.seccion + .seccion{border-top:1px solid rgba(232,240,239,.07)}

/* ---------- TARJETAS ---------- */
.rejilla{display:grid;gap:20px}
.rejilla-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.rejilla-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.rejilla-4{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}

.tarjeta{
  background:linear-gradient(160deg,rgba(232,240,239,.045),rgba(232,240,239,.012));
  border:1px solid var(--borde);
  border-radius:3px;
  padding:clamp(26px,3vw,36px);
  transition:border-color .28s ease,transform .28s ease;
}
.tarjeta:hover{border-color:rgba(128,255,179,.34);transform:translateY(-3px)}

.tarjeta h3{margin-bottom:12px}
.tarjeta p{color:var(--texto-tenue);font-size:14.8px;line-height:1.75}

.tarjeta .num{
  font-size:11px;
  letter-spacing:.2em;
  color:var(--aguamarina);
  display:block;
  margin-bottom:16px;
  font-weight:500;
}

.tarjeta ul{list-style:none;margin-top:16px}
.tarjeta li{
  color:var(--texto-tenue);
  font-size:13.8px;
  padding-left:16px;
  position:relative;
  margin-bottom:7px;
}
.tarjeta li::before{
  content:'';
  position:absolute;
  left:0;top:.72em;
  width:5px;height:1px;
  background:var(--aguamarina);
}

/* ---------- PIE ---------- */
.pie{
  border-top:1px solid var(--borde);
  padding:clamp(48px,6vw,72px) 0 32px;
  background:var(--petroleo-hondo);
}

.pie-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  padding-bottom:44px;
}

.pie-marca img{width:150px;margin-bottom:18px}
.pie-marca p{color:var(--texto-tenue);font-size:14px;max-width:34ch}

.pie h4{
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--texto);
  margin-bottom:18px;
  font-weight:600;
}

.pie ul{list-style:none}
.pie li{margin-bottom:11px}
.pie a{
  color:var(--texto-tenue);
  text-decoration:none;
  font-size:14px;
  transition:color .22s ease;
}
.pie a:hover{color:var(--aguamarina)}

.pie-bajo{
  border-top:1px solid rgba(232,240,239,.08);
  padding-top:26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  font-size:12.5px;
  color:var(--texto-tenue);
}

/* ---------- BANNER DE COOKIES ---------- */
.cookies{
  position:fixed;
  bottom:18px;left:18px;right:18px;
  max-width:520px;
  background:var(--petroleo-claro);
  border:1px solid var(--borde);
  border-radius:4px;
  padding:22px 24px;
  z-index:200;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  display:none;
}
.cookies.visible{display:block;animation:subir .45s cubic-bezier(.2,.8,.3,1)}
.cookies p{font-size:13.6px;color:var(--texto-tenue);margin-bottom:16px;line-height:1.7}
.cookies a{color:var(--aguamarina)}
.cookies .acciones{display:flex;gap:10px;flex-wrap:wrap}
.cookies button{
  font-family:inherit;
  font-size:13.5px;
  padding:10px 22px;
  border-radius:2px;
  cursor:pointer;
  border:1px solid var(--borde);
  background:none;
  color:var(--texto);
  transition:border-color .2s ease;
}
.cookies button:hover{border-color:rgba(232,240,239,.45)}
.cookies button.si{background:var(--aguamarina);color:var(--petroleo);border-color:var(--aguamarina);font-weight:600}

@keyframes subir{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- PÁGINAS DE TEXTO (legales) ---------- */
.texto-legal{padding-top:calc(var(--nav-h) + clamp(48px,6vw,84px));padding-bottom:clamp(64px,8vw,110px)}
.texto-legal h1{font-size:clamp(28px,4vw,42px);font-weight:300;margin-bottom:14px}
.texto-legal .fecha{color:var(--texto-tenue);font-size:13.5px;margin-bottom:48px}
.texto-legal h2{font-size:clamp(19px,2.2vw,24px);font-weight:600;margin:44px 0 14px}
.texto-legal h3{font-size:17px;margin:28px 0 10px}
.texto-legal p,.texto-legal li{color:var(--texto-tenue);font-size:15.2px;line-height:1.85;margin-bottom:14px}
.texto-legal ul,.texto-legal ol{padding-left:22px;margin-bottom:20px}
.texto-legal li{margin-bottom:9px}
.texto-legal a{color:var(--aguamarina)}
.texto-legal strong{color:var(--texto);font-weight:600}
.texto-legal .caja{
  border:1px solid var(--borde);
  border-radius:3px;
  padding:24px 26px;
  margin:26px 0;
  background:rgba(232,240,239,.02);
}
.texto-legal table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px}
.texto-legal th,.texto-legal td{
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--borde);
  color:var(--texto-tenue);
}
.texto-legal th{color:var(--texto);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.1em}

/* ---------- APARICIÓN AL HACER SCROLL ---------- */
.aparece{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.aparece.dentro{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .pie-top{grid-template-columns:1fr;gap:34px}
}

@media (max-width:780px){
  .hamburguesa{display:block}
  .menu{
    position:fixed;
    inset:var(--nav-h) 0 auto 0;
    background:rgba(0,26,33,.98);
    backdrop-filter:blur(14px);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:14px 0 22px;
    border-bottom:1px solid var(--borde);
    display:none;
  }
  .menu.abierto{display:flex}
  .menu a{padding:15px clamp(20px,5vw,48px);font-size:16px}
  .menu a.btn-nav{margin:12px clamp(20px,5vw,48px) 0;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .aparece{opacity:1;transform:none}
}

/* ==========================================================
   CAPA DE ACABADO — rev. 17 ago 2026
   ========================================================== */



/* ---------- Fondo animado anclado a cada sección ----------
   El canvas vive dentro de su sección y viaja con el scroll:
   entra y sale, no se queda fijo detrás de todo. */
.tiene-fondo{position:relative;isolation:isolate}
.tiene-fondo{overflow:hidden}
.fondo-seccion{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;          /* el JS lo agranda según el recorrido del parallax */
  z-index:-1;
  pointer-events:none;
  opacity:0;
  will-change:transform,opacity;
}

/* ---------- Barra de progreso de lectura ---------- */
.progreso{
  position:fixed;
  top:0;left:0;
  height:2px;
  width:0%;
  background:var(--aguamarina);
  z-index:120;
  transition:width .1s linear;
  box-shadow:0 0 12px rgba(128,255,179,.5);
}

/* ---------- Foco que sigue al cursor ---------- */
.tarjeta,.franja-twin,.twin-marco{position:relative;overflow:hidden;isolation:isolate}
.tarjeta::before,.franja-twin::before,.twin-marco::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0;
  transition:opacity .4s ease;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
             rgba(128,255,179,.16), transparent 65%);
}

/* el contenido siempre por encima del foco */
.tarjeta > *,.franja-twin > *,.twin-marco > *{position:relative;z-index:1}
.tarjeta:hover::before,.franja-twin:hover::before,.twin-marco:hover::before{opacity:1}

/* filo superior que se dibuja al pasar */
.tarjeta::after{
  content:'';
  position:absolute;
  top:0;left:0;
  height:1px;
  width:0;
  background:linear-gradient(to right,var(--aguamarina),transparent);
  transition:width .5s cubic-bezier(.2,.8,.3,1);
}
.tarjeta:hover::after{width:100%}

/* ---------- Aparición escalonada de hijos ---------- */
.escalona > *{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);
}
.escalona.dentro > *{opacity:1;transform:none}
.escalona.dentro > *:nth-child(1){transition-delay:.00s}
.escalona.dentro > *:nth-child(2){transition-delay:.09s}
.escalona.dentro > *:nth-child(3){transition-delay:.18s}
.escalona.dentro > *:nth-child(4){transition-delay:.27s}
.escalona.dentro > *:nth-child(5){transition-delay:.36s}

/* ---------- Cifras que cuentan ---------- */
.cifra .n{font-variant-numeric:tabular-nums}

/* ---------- Retrato de Juan ---------- */
.juan-foto{position:relative}
.juan-foto picture,.juan-foto img{display:block;width:100%;height:100%;object-fit:cover}

.juan-retrato{
  position:relative;
  border-radius:3px;
  overflow:hidden;
  isolation:isolate;
}
.juan-retrato .color{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1);
}
.juan-retrato:hover .color{opacity:1}

/* trama de líneas finas encima, en clave de marca */
.juan-retrato::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,34,43,.16) 0px,
    rgba(0,34,43,.16) 1px,
    transparent 1px,
    transparent 4px);
  opacity:.55;
  transition:opacity .5s ease;
}
.juan-retrato:hover::after{opacity:.15}

/* esquinas de encuadre, como una mira */
.juan-marco{position:relative;width:100%;max-width:340px}
.juan-marco span{
  position:absolute;
  width:16px;height:16px;
  border:1px solid var(--aguamarina);
  opacity:.75;
  transition:all .5s cubic-bezier(.2,.8,.3,1);
}
.juan-marco span:nth-child(1){top:-1px;left:-1px;border-right:0;border-bottom:0}
.juan-marco span:nth-child(2){top:-1px;right:-1px;border-left:0;border-bottom:0}
.juan-marco span:nth-child(3){bottom:-1px;left:-1px;border-right:0;border-top:0}
.juan-marco span:nth-child(4){bottom:-1px;right:-1px;border-left:0;border-top:0}
.juan-marco:hover span{width:24px;height:24px;opacity:1}

.juan-pie{
  margin-top:14px;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--texto-tenue);
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.juan-pie b{color:var(--aguamarina);font-weight:500}

/* ---------- Enlaces del menú con subrayado que crece ---------- */
.menu a:not(.btn-nav){position:relative}
.menu a:not(.btn-nav)::after{
  content:'';
  position:absolute;
  left:0;bottom:-5px;
  width:0;height:1px;
  background:var(--aguamarina);
  transition:width .3s cubic-bezier(.2,.8,.3,1);
}
.menu a:not(.btn-nav):hover::after{width:100%}

/* ---------- Cabeceras de página interior con más presencia ---------- */
.cabecera{position:relative}
.cabecera::after{
  content:'';
  position:absolute;
  left:clamp(20px,5vw,48px);
  bottom:0;
  width:64px;height:1px;
  background:var(--aguamarina);
}

@media (max-width:780px){
  .juan-marco span{width:12px;height:12px}
}

@media (prefers-reduced-motion:reduce){
  .escalona > *{opacity:1;transform:none}
  .progreso{display:none}
}