/* AVECTOR — Landing EcoVadis
   Tokens y reglas del handoff de diseño. Sin border-radius, sin sombras,
   sin degradados (solo máscaras radiales de los canvas). */

:root{
  --papel:#F5F3EF;
  --papel-alt:#FFFFFF;
  --tinta:#14161A;
  --azul-profundo:#0E2A47;
  --azul-senal:#1B4ED8;
  --azul-senal-hover:#1642BE;
  /* Café de las etiquetas. El handoff traía #8E8578, que sobre papel daba
     3.28:1 y reprobaba el mínimo de accesibilidad; este da 7.04:1 y cumple
     el ≥7:1 que el propio handoff exige, sin perder la jerarquía frente a
     la tinta del texto principal. */
  --gris-calido:#5A5143;
  /* Su equivalente sobre fondo oscuro, donde oscurecer restaría contraste. */
  --cafe-claro:#B3A899;
  --filete:#D8D3CA;
  --texto-2:#454B54;
  --sobre-azul:rgba(245,243,239,.78);
  /* Subido de .55 (5.01:1) a .78 (8.55:1) sobre el azul profundo. */
  --sobre-azul-tenue:rgba(245,243,239,.78);

  --nav-alto:68px;
  /* Alto real del pie, medido. Sirve para que el cierre y el pie entren juntos
     en una pantalla; si cambia el texto del pie, hay que revisarlo. */
  --pie-alto:113px;
  --ancho:1180px;
  --pad-lat:clamp(20px,4vw,40px);
  --pad-vert:clamp(32px,4vw,56px);

  /* Tamaño de los tres campos generativos (valores aprobados por el cliente) */
  --hero-tam:560px;
  --caustica-tam:560px;
  --moire-tam:420px;
  --orbita-tam:900px;
}

/* ---------- Base ---------- */

/* El desplazamiento suave de los enlaces internos lo anima main.js: el
   scroll-behavior:smooth nativo no avanza en esta página (no se mueve ni con
   anclas ni con scrollTo), así que los enlaces del nav no llevaban a ningún
   lado. Sin JS, las anclas saltan de golpe, que sí funciona. */
html{
  scroll-padding-top:var(--nav-alto);
  scroll-snap-type:y proximity;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
a{color:var(--azul-senal)}
button{font:inherit;border-radius:0}
canvas,svg{display:block}
:focus-visible{outline:2px solid var(--azul-senal);outline-offset:2px}

.salto{
  position:fixed;left:-9999px;top:12px;z-index:300;
  background:var(--azul-senal);color:#FFFFFF;
  padding:10px 16px;font-size:14px;font-weight:500;text-decoration:none;
}
.salto:focus{left:12px;color:#FFFFFF}

.contenedor{max-width:var(--ancho);margin:0 auto;width:100%}

.wordmark{height:22px;width:auto;fill:currentColor}
.wordmark--pie{height:28px}

/* ---------- Tipografía compartida ---------- */

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:13.75px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris-calido);
}
.eyebrow--oscuro{color:var(--sobre-azul-tenue)}

.titular{
  font-family:Archivo,sans-serif;font-weight:300;
  letter-spacing:-.015em;text-wrap:pretty;
}
.titular--h1{font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.05;margin-top:22px}
.titular--h2{font-size:clamp(1.9rem,3.2vw,2.75rem);line-height:1.1;margin-top:18px}
.titular--cierre{position:relative;font-size:clamp(2.3rem,4.5vw,4rem);line-height:1.05;color:var(--papel)}

.boton{
  display:inline-block;background:var(--azul-senal);color:#FFFFFF;
  padding:16px 28px;text-decoration:none;font-size:15px;font-weight:500;
}
.boton:hover{background:var(--azul-senal-hover);color:#FFFFFF}

.enlace-secundario{
  color:var(--tinta);font-size:15px;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
}
.enlace-secundario:hover{color:var(--azul-senal)}

/* ---------- Campos generativos (canvas) ---------- */

.campo{position:relative}
.campo canvas{position:absolute;inset:0;width:100%;height:100%}

.campo--hero{width:100%;max-width:var(--hero-tam);aspect-ratio:1/1}
.campo--hero canvas{
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000000 58%,transparent 86%);
          mask-image:radial-gradient(circle at 50% 50%,#000000 58%,transparent 86%);
}

.campo--caustica{width:100%;max-width:var(--caustica-tam);aspect-ratio:1/1}
.campo--caustica canvas{
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000000 60%,transparent 93%);
          mask-image:radial-gradient(circle at 50% 50%,#000000 60%,transparent 93%);
}

.campo--moire{flex:0 1 var(--moire-tam);align-self:stretch;min-height:420px;margin-top:36px}
.campo--moire canvas{
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000000 58%,transparent 92%);
          mask-image:radial-gradient(circle at 50% 50%,#000000 58%,transparent 92%);
}

.campo--orbita{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(var(--orbita-tam),92vmin);aspect-ratio:1/1;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000000 62%,transparent 94%);
          mask-image:radial-gradient(circle at 50% 50%,#000000 62%,transparent 94%);
}

/* ---------- Nav ---------- */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-alto);
  background:var(--papel);border-bottom:1px solid transparent;
  transition:background 300ms ease-out,border-color 300ms ease-out;
}
.nav.is-scrolled{
  background:rgba(245,243,239,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom-color:var(--filete);
}
.nav__interior{
  max-width:var(--ancho);margin:0 auto;height:100%;padding:0 var(--pad-lat);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav__marca{color:var(--tinta);text-decoration:none;display:flex;align-items:center}
.nav__enlaces{display:flex;align-items:center;gap:clamp(18px,2.6vw,34px)}
.nav__enlace,.nav__cta{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
}
.nav__enlace{color:var(--tinta)}
.nav__enlace:hover{color:var(--azul-senal)}
/* 20% sobre los 11px del resto del nav */
.nav__cta{color:var(--azul-senal);font-size:13.2px;font-weight:700}
.nav__cta:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Hero + Contexto ---------- */

.hero{
  scroll-snap-align:start;min-height:max(620px,100svh);
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(32px,4.5vh,56px);
  padding:92px var(--pad-lat) clamp(28px,4vh,44px);
}
.hero__fila{
  max-width:var(--ancho);margin:0 auto;width:100%;
  display:flex;flex-wrap:wrap-reverse;align-items:center;gap:clamp(36px,5vw,64px);
}
.hero__texto{flex:52 1 min(440px,100%)}
.hero__campo{flex:48 1 min(360px,100%);display:flex;justify-content:center}
.hero__entrada{font-size:17px;line-height:1.6;max-width:58ch;margin-top:26px}
.hero__acciones{display:flex;align-items:center;flex-wrap:wrap;gap:28px;margin-top:36px}

/* ---------- Rejillas de filetes (Contexto y Entregables) ---------- */

.rejilla-envoltura{max-width:var(--ancho);margin:0 auto;width:100%;overflow:hidden}
.rejilla-envoltura--entregables{margin-top:40px}
.rejilla{display:grid;column-gap:72px;margin-top:-1px}
.rejilla--contexto{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.rejilla--entregables{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}

.celda{position:relative;border-top:1px solid var(--filete);padding:22px 0 6px}
.celda::before{
  content:'';position:absolute;top:0;bottom:0;left:-36px;width:1px;background:var(--filete);
}
.celda--entregable{padding:30px 0 40px}
.celda__etiqueta{
  display:flex;align-items:baseline;gap:14px;
  font-family:'IBM Plex Mono',monospace;
  font-size:13.75px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-calido);
}
.celda__num{color:var(--tinta)}
.celda__num--suelto{
  font-family:'IBM Plex Mono',monospace;
  font-size:13.75px;letter-spacing:.09em;text-transform:uppercase;
}
.celda__titulo{font-size:18px;font-weight:500;margin-top:16px}
.celda__texto{
  font-size:17px;line-height:1.6;margin-top:10px;
  color:var(--texto-2);max-width:42ch;text-wrap:pretty;
}
.celda__texto--compacto{font-size:15px;margin-top:12px;max-width:38ch;color:var(--tinta)}

/* ---------- Metodología ---------- */

/* Espejo del hero: aquí el campo va a la izquierda y el contenido a la
   derecha, con las mismas proporciones 48/52. */
.metodologia{
  scroll-snap-align:start;background:var(--papel);min-height:100svh;
  display:flex;align-items:center;
  padding:calc(var(--nav-alto) + var(--pad-vert)) var(--pad-lat) var(--pad-vert);
}
.metodologia__fila{
  max-width:var(--ancho);margin:0 auto;width:100%;
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(36px,5vw,64px);
}
.metodologia__campo{flex:48 1 min(360px,100%);display:flex;justify-content:center}
.metodologia__texto{flex:52 1 min(440px,100%)}
.metodologia__nota{
  font-size:15px;line-height:1.6;margin-top:32px;
  color:var(--texto-2);max-width:58ch;text-wrap:pretty;
}

.tabla{width:100%;max-width:46ch;border-collapse:collapse;margin-top:34px}
.tabla th{text-align:left;font-weight:400}
.tabla thead th{
  font-family:'IBM Plex Mono',monospace;
  font-size:13.75px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris-calido);padding-bottom:12px;
}
.tabla tbody th,.tabla tbody td{padding:13px 0;border-top:1px solid var(--filete)}
.tabla tbody th{font-size:17px;width:62%}
.tabla tbody td{font-family:'IBM Plex Mono',monospace;font-size:15px}

.cadena{display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,26px);margin-top:34px}
.cadena__paso{position:relative}
.cadena__paso + .cadena__paso{padding-left:clamp(20px,2.4vw,30px)}
.cadena__paso + .cadena__paso::before{
  content:'→';position:absolute;left:0;top:1px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--gris-calido);
}
.cadena__nombre{font-size:15px;font-weight:500}
.cadena__sub{
  font-family:'IBM Plex Mono',monospace;
  font-size:13.75px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris-calido);margin-top:6px;
}
/* La confianza no es una capa calificada: es lo que produce la cadena. */
.cadena__paso--final .cadena__nombre{color:var(--azul-senal)}

/* ---------- Método ---------- */

.metodo{
  scroll-snap-align:start;position:relative;overflow:hidden;
  background:var(--azul-profundo);color:var(--papel);min-height:100svh;
  display:flex;align-items:center;
  padding:calc(var(--nav-alto) + var(--pad-vert)) 0 var(--pad-vert);
}
.metodo__interior{
  position:relative;max-width:var(--ancho);margin:0 auto;width:100%;padding:0 var(--pad-lat);
}
.metodo__diagrama{position:relative;margin-top:52px}
.metodo__diagrama svg{width:100%;height:clamp(260px,26vh,340px);overflow:visible}
/* Trazo de entrada: se revela de izquierda a derecha. Se usa clip-path en vez
   de stroke-dashoffset porque con preserveAspectRatio="none" +
   vector-effect="non-scaling-stroke" el dash se mide en espacio de dispositivo
   y la longitud cambia con el ancho, dejando la curva corta. Sin JS queda
   dibujada por defecto. */
.metodo__curva{clip-path:inset(-8px -8px -8px -8px);transition:clip-path 4320ms ease-out}
.metodo__guia{stroke:rgba(245,243,239,.35);stroke-width:1;stroke-dasharray:2 5}

.metodo__nodo{
  position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;
  display:flex;align-items:center;justify-content:center;
}
.metodo__nodo span{
  display:block;border-radius:50%;width:9px;height:9px;
  background:var(--papel);opacity:0;
  transition:width 200ms ease-out,height 200ms ease-out,
             background 200ms ease-out,opacity 480ms ease-out var(--retraso,0ms);
}
.metodo__nodo[data-n="1"] span{--retraso:144ms}
.metodo__nodo[data-n="2"] span{--retraso:288ms}
.metodo__nodo[data-n="3"] span{--retraso:432ms}
.metodo__nodo[data-n="4"] span{--retraso:576ms}
.metodo.is-on .metodo__nodo span{opacity:1}
.metodo__nodo.is-act span{width:13px;height:13px;background:var(--azul-senal)}

.metodo__pasos{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:36px}
.metodo__paso{opacity:.88;transition:opacity 300ms ease-out}
.metodo__escritorio.is-hover .metodo__paso{opacity:.45}
.metodo__escritorio.is-hover .metodo__paso.is-act{opacity:1}
.metodo__titulo{font-size:17px;font-weight:500;margin-top:12px;color:var(--papel)}
.metodo__texto{
  font-size:15px;line-height:1.6;margin-top:10px;
  color:var(--sobre-azul);text-wrap:pretty;
}

.metodo__movil{
  display:none;flex-direction:column;gap:44px;
  padding:8px 0;margin-top:52px;border-left:1px dashed rgba(245,243,239,.4);
}
.metodo__movil li{position:relative;padding-left:28px}
.metodo__movil li::before{
  content:'';position:absolute;left:-5px;top:4px;
  width:9px;height:9px;border-radius:50%;background:var(--papel);
}

/* ---------- Entregables ---------- */

.entregables{
  scroll-snap-align:start;background:var(--papel);min-height:100svh;
  display:flex;align-items:center;
  padding:calc(var(--nav-alto) + var(--pad-vert)) var(--pad-lat) var(--pad-vert);
}

/* ---------- Sectores ---------- */

.sectores{
  background:var(--papel-alt);min-height:120px;
  display:flex;align-items:center;justify-content:center;
  padding:36px var(--pad-lat);
}
.sectores__linea{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta);
  display:flex;flex-wrap:wrap;justify-content:center;
  column-gap:14px;row-gap:10px;text-align:center;
}
.sectores__sep{color:#8E8578}

/* ---------- Preguntas frecuentes ---------- */

.preguntas{
  scroll-snap-align:start;background:var(--papel);min-height:100svh;
  display:flex;align-items:center;
  padding:calc(var(--nav-alto) + var(--pad-vert)) var(--pad-lat) var(--pad-vert);
}
.preguntas__fila{display:flex;align-items:flex-start;gap:clamp(40px,6vw,88px)}

.acordeon{
  flex:1 1 min(560px,100%);max-width:820px;margin-top:36px;
  border-bottom:1px solid var(--filete);
}
.acordeon__item{border-top:1px solid var(--filete)}
.acordeon__h{font-size:18px;font-weight:400}
.acordeon__boton{
  width:100%;background:none;border:none;padding:24px 4px 24px 0;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  text-align:left;color:var(--tinta);cursor:pointer;
}
.acordeon__signo{
  font-family:'IBM Plex Mono',monospace;font-size:18px;line-height:1;
  display:inline-block;transform:rotate(0deg);transition:transform 300ms ease-out;
}
.acordeon__item.is-open .acordeon__signo{transform:rotate(45deg)}
.acordeon__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 400ms ease-out;
}
.acordeon__item.is-open .acordeon__panel{grid-template-rows:1fr}
.acordeon__interior{overflow:hidden;min-height:0}
.acordeon__texto{
  font-size:17px;line-height:1.6;max-width:58ch;
  color:var(--texto-2);padding-bottom:28px;
}

/* ---------- Cierre / Contacto ---------- */

/* El cierre y el pie forman el último tramo: comparten el fondo tinta y juntos
   ocupan una pantalla. Se le quitó el scroll-snap-align porque dejaba la vista
   clavada aquí y el pie quedaba cortado abajo; además descontaba 96px cuando
   el pie mide 113 (165 en móvil), de ahí los 17px que se perdían. */
.cierre{
  position:relative;overflow:hidden;
  background:var(--tinta);color:var(--papel);min-height:calc(100svh - var(--pie-alto));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(88px,11vw,160px) var(--pad-lat);
}
.cierre__boton{position:relative;margin-top:44px}
.cierre__datos{
  position:relative;font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.09em;color:rgba(245,243,239,.85);margin-top:40px;
  display:flex;flex-wrap:wrap;justify-content:center;column-gap:12px;row-gap:8px;
}
.cierre__datos a{color:rgba(245,243,239,.85);text-decoration:none}
.cierre__datos a:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:4px}
.cierre__sep{color:#8E8578}

/* ---------- Pie ---------- */

.pie{
  background:var(--tinta);color:var(--papel);
  border-top:1px solid rgba(245,243,239,.18);padding:32px var(--pad-lat);
}
.pie__interior{
  max-width:var(--ancho);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
}
.pie__marca{display:flex;align-items:center;color:var(--papel)}
.pie__nota{font-size:15px;line-height:1.6;color:var(--cafe-claro);max-width:52ch}

/* ---------- Escritorio de poca altura ---------- */

/* En pantallas tipo 1280×800 el campo del hero (cuadrado, hasta 560px) empuja
   el bloque de contexto fuera del slide. Se acota contra la altura para que la
   sección entre completa, como pide el handoff. Las alturas habituales
   (900px+) no se tocan. */
@media (min-width:821px) and (max-height:800px){
  .campo--hero{max-width:min(var(--hero-tam),56vh)}
}

/* ---------- Móvil (≤820px) ---------- */

/* Entre 821 y 1024 los seis enlaces quedaban pegados al límite del encabezado:
   se aprieta la separación para que respiren. */
@media (min-width:821px) and (max-width:1024px){
  .nav__enlaces{gap:clamp(12px,1.6vw,20px)}
}

@media (max-width:820px){
  .nav__enlace{display:none}
  /* El pie apila marca y nota, así que crece. */
  :root{--pie-alto:165px}
  .metodo__escritorio{display:none}
  .metodo__movil{display:flex}
  .metodo__movil .metodo__titulo{margin-top:10px}
  .metodo__movil .metodo__texto{margin-top:8px}

  /* En celular no se muestra ningún campo generativo: la lectura queda más
     limpia y de paso se ahorran los tres bucles de dibujo. Se ocultan los
     contenedores, no solo el canvas, para que no dejen hueco en el flex. */
  .hero__campo,
  .metodologia__campo,
  .campo--moire,
  .campo--orbita{display:none}
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}