/* ════════════════════════════════════════════════════════════
   TRUSTLEADING · estilos del sitio
   Orden: tokens · base · barra · hero con figura · bloques · movimiento
   ════════════════════════════════════════════════════════════ */

/* ── Tipografía (DM Sans autoalojada, sin depender de Google) ── */
@font-face{font-family:'DM Sans';font-style:normal;font-display:swap;font-weight:100 1000;
  src:url(../fonts/dm-sans-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-display:swap;font-weight:100 1000;
  src:url(../fonts/dm-sans-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── Tokens ── */
:root{
  --lima:#C8D400;
  --ink:#1A1A18;
  --ink-mid:#3A3A38;
  --ink-ghost:#6E6E68;
  --paper:#FFFFFF;
  --paper-1:#FAFAF8;
  --paper-2:#F4F4F2;
  --paper-3:#EDEDEA;
  --on-dark:#F2F2EF;
  --on-dark-mid:#B4B4AD;
  --rule:rgba(26,26,24,.09);
  --rule-2:rgba(26,26,24,.16);
  --rule-dark:rgba(242,242,239,.14);

  --gutter:clamp(20px,5vw,64px);
  --max:1280px;
  --bar-h:84px;

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-draw:cubic-bezier(.62,.02,.24,1);
  --t-hover:.3s;
  --t-reveal:.6s;
}

/* ── Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--paper);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--lima);outline-offset:4px}

.eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-mid)}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--lima)}
.eyebrow--ink{color:var(--ink-ghost)}

/* ════════════════════════════════════════════════════════════
   BARRA
   Transparente sobre el hero; tinta sólida al bajar.
   ════════════════════════════════════════════════════════════ */
.bar{position:fixed;inset:0 0 auto;z-index:50;height:var(--bar-h);
  transition:background-color .4s var(--ease-out),height .4s var(--ease-out),border-color .4s;
  border-bottom:1px solid transparent}
.bar.is-solid{background:rgba(26,26,24,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--rule-dark);--bar-h:68px}
.bar__in{max-width:var(--max);height:100%;margin:0 auto;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:clamp(20px,2.6vw,36px)}
.bar__logo{margin-right:auto}
.bar__logo img{height:clamp(22px,2.2vw,28px);width:auto}

.bar__nav{display:flex;gap:clamp(18px,2.4vw,34px);height:100%}
.bar__nav a,.nav-btn{position:relative;display:flex;align-items:center;height:100%;
  font-size:14px;font-weight:500;color:var(--on-dark);opacity:.86;transition:opacity var(--t-hover)}
.bar__nav a:hover,.bar__nav a.is-active,.nav-btn:hover,.nav-btn.is-active,.nav-btn[aria-expanded=true]{opacity:1}
.nav-btn{background:none;border:0;font-family:inherit;cursor:pointer;gap:8px}
.nav-btn svg{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform var(--t-hover)}
.nav-btn[aria-expanded=true] svg{transform:rotate(180deg)}
/* subrayado lima que crece desde la izquierda */
.bar__nav a::after,.nav-btn::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--lima);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-hover) var(--ease-out)}
.bar__nav a:hover::after,.bar__nav a:focus-visible::after,.bar__nav a.is-active::after,.nav-btn:hover::after,.nav-btn.is-active::after,.nav-btn[aria-expanded=true]::after{transform:scaleX(1)}

.bar__sep{width:1px;height:22px;background:var(--rule-dark)}
.bar__cta{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--lima)}
.bar__cta .arrow{width:24px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;
  transition:transform var(--t-hover) var(--ease-out)}
.bar__cta:hover .arrow{transform:translateX(5px)}

@media (max-width:1000px){
  .bar__nav,.bar__sep{display:none}
}

/* ════════════════════════════════════════════════════════════
   HERO CON FIGURA (páginas interiores sin foto)
   Capas, de atrás hacia adelante:
   tinta · atmósfera lima profundo · retícula · campo (canvas) · grano · velo · texto
   ════════════════════════════════════════════════════════════ */
:root{
  --lima-prof:#2A2D12;          /* lima profundo: color de atmósfera, nunca señal */
  --lima-prof-2:#1F2114;
}
.hero-fig{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--on-dark);
  min-height:max(600px,86vh);display:flex;align-items:center}

.hero-fig__bg{position:absolute;inset:0;z-index:-4}
.fx-atmosfera{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 70% at 74% 66%,var(--lima-prof) 0%,var(--lima-prof-2) 42%,transparent 78%),
    radial-gradient(ellipse 40% 40% at 88% 18%,rgba(42,45,18,.55),transparent 70%)}
.fx-reticula{position:absolute;inset:-40px;opacity:.7;
  background-image:
    linear-gradient(rgba(242,242,239,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(242,242,239,.05) 1px,transparent 1px);
  background-size:60px 60px,60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 38% 40% at 74% 26%,#000 0%,transparent 100%);
          mask-image:radial-gradient(ellipse 38% 40% at 74% 26%,#000 0%,transparent 100%)}

.hero-fig__campo{position:absolute;inset:0;z-index:-3;display:block}

.fx-grano{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:url(../img/fx/grano.svg);opacity:.05}

/* velo de lectura: protege el texto sin apagar el campo */
.hero-fig::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(26,26,24,.7) 0,transparent 160px),
    linear-gradient(0deg,rgba(26,26,24,.6) 0,transparent 120px),
    linear-gradient(90deg,var(--ink) 0,rgba(26,26,24,.9) 24%,rgba(26,26,24,.45) 42%,transparent 58%)}

.hero-fig__copy{width:100%;max-width:var(--max);margin:0 auto;padding:calc(var(--bar-h) + 40px) var(--gutter) 90px}
.hero-fig__copy .eyebrow{margin-bottom:26px}
.eyebrow__dot{color:var(--lima)}
.hero-fig h1{font-weight:300;font-size:clamp(42px,5.4vw,80px);line-height:1.04;letter-spacing:-.022em;
  max-width:13ch;margin-bottom:30px}
/* una sola frase en lima: la que carga la evidencia */
.hero-fig h1 em,.band--dark h2 em{font-style:normal;color:var(--lima)}
.hero-fig .lead{max-width:40ch;font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--on-dark-mid)}

@media (max-width:760px){
  .hero-fig{min-height:92svh;align-items:flex-end}
  .hero-fig::after{background:
    linear-gradient(180deg,rgba(26,26,24,.7) 0,transparent 130px),
    linear-gradient(0deg,var(--ink) 0,rgba(26,26,24,.92) 40%,transparent 66%)}
  .fx-atmosfera{background:radial-gradient(ellipse 90% 50% at 60% 32%,var(--lima-prof),var(--lima-prof-2) 45%,transparent 80%)}
  .fx-reticula{display:none}
}

/* ════════════════════════════════════════════════════════════
   CIFRAS (franja bajo el hero)
   ════════════════════════════════════════════════════════════ */
.cifras{background:var(--paper-1)}
.cifras__in{max-width:var(--max);margin:0 auto;padding:clamp(40px,5vw,64px) var(--gutter);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.cifra{display:flex;flex-direction:column;gap:10px;padding-bottom:18px;position:relative;
  border-bottom:1px solid var(--rule-2)}
.cifra::after{content:"";position:absolute;left:0;bottom:-1px;width:36px;height:2px;background:var(--lima)}
.cifra strong{font-weight:300;font-size:clamp(40px,4.4vw,64px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.cifra span{font-size:13px;color:var(--ink-ghost);line-height:1.4}
@media (max-width:760px){.cifras__in{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}}

/* ════════════════════════════════════════════════════════════
   BANDAS (ritmo tonal: paper-1 · paper-2 · paper-3 · tinta)
   Cada banda lleva su guilloché muy tenue.
   ════════════════════════════════════════════════════════════ */
.band{position:relative;isolation:isolate;padding-block:clamp(80px,10vw,144px)}
.band--1{background:var(--paper-2)}
.band--2{background:var(--paper-3)}
.band--dark{background:var(--ink);color:var(--on-dark)}
.band--dark::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse 50% 70% at 90% 100%,rgba(42,45,18,.7),transparent 70%)}
.band__in{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.band .eyebrow{margin-bottom:32px}

.tex::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--pat);background-size:var(--pat-size);opacity:var(--pat-op,.06)}
.tex--onda{--pat:url(../img/fx/pat-onda.svg);--pat-size:160px 160px}
.tex--fina{--pat:url(../img/fx/pat-fina.svg);--pat-size:120px 120px;--pat-op:.07}
.tex--arco{--pat:url(../img/fx/pat-arco.svg);--pat-size:90px 90px}
.band--dark.tex::before{filter:invert(1)}

.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);max-width:1040px}
.cols p,.placeholder{font-size:clamp(17px,1.4vw,20px);line-height:1.65;color:var(--ink-mid)}
.cols b{font-weight:500;color:var(--ink);box-shadow:inset 0 -2px 0 var(--lima)}
.placeholder{max-width:60ch}

.band--dark h2{font-weight:300;font-size:clamp(28px,3.2vw,46px);line-height:1.15;letter-spacing:-.015em;
  max-width:24ch;margin-bottom:clamp(48px,6vw,80px)}
.modos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.modo{display:flex;flex-direction:column;gap:14px;padding-top:22px;border-top:1px solid var(--rule-dark);position:relative}
.modo::before{content:"";position:absolute;top:-1px;left:0;width:28px;height:2px;background:var(--lima);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out) .3s}
.modo.is-in::before{transform:scaleX(1)}
.modo__n{font-size:12px;letter-spacing:.18em;color:var(--on-dark-mid)}
.modo h3{font-weight:500;font-size:19px;letter-spacing:-.005em}
.modo p{font-size:15px;line-height:1.6;color:var(--on-dark-mid)}
.modo small{margin-top:auto;padding-top:8px;font-size:13px;font-style:italic;color:var(--on-dark)}
@media (max-width:1000px){.modos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}}
@media (max-width:760px){.cols,.modos{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════
   FRASE QUE CORRE
   ════════════════════════════════════════════════════════════ */
.marquee{overflow:hidden;background:var(--paper-2);padding-block:clamp(28px,4vw,52px);border-block:1px solid var(--rule)}
.marquee__track{display:flex;width:max-content;animation:correr 60s linear infinite}
.marquee span{flex:none;padding-right:.9em;font-weight:300;font-size:clamp(56px,9vw,140px);line-height:1;
  letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(26,26,24,.16);white-space:nowrap}
@keyframes correr{to{transform:translateX(-50%)}}

/* ════════════════════════════════════════════════════════════
   HOME · HERO "LA RUTA"
   ════════════════════════════════════════════════════════════ */
.hero-home{min-height:max(640px,94vh)}
.hero-home h1{font-size:clamp(34px,4.1vw,60px);line-height:1.08;max-width:17ch;margin-bottom:28px}
.hero-home .lead{max-width:36ch}

.seguir{display:inline-flex;align-items:center;gap:14px;margin-top:48px;font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-mid);transition:color var(--t-hover)}
.seguir:hover{color:var(--on-dark)}
.seguir__linea{position:relative;width:1px;height:34px;background:var(--rule-dark);overflow:hidden}
.seguir__linea::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--lima);
  animation:bajar 2.2s var(--ease-out) infinite}
@keyframes bajar{to{top:100%}}

/* ════════════════════════════════════════════════════════════
   HOME · FRANJA DE PRINCIPIOS (continúa el hero, un tono más claro)
   ════════════════════════════════════════════════════════════ */
.principios{background:#20201D;color:var(--on-dark);border-top:1px solid var(--rule-dark)}
.principios__in{max-width:var(--max);margin:0 auto;padding:clamp(56px,7vw,96px) var(--gutter);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.principio{display:flex;flex-direction:column;gap:12px}
.principio__fig{width:100%;height:96px;display:block;margin-bottom:10px;
  border-bottom:1px solid var(--rule-dark)}
.principio h3{font-weight:500;font-size:18px;letter-spacing:-.005em}
.principio p{font-size:15px;line-height:1.6;color:var(--on-dark-mid);max-width:30ch}
@media (max-width:1000px){.principios__in{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}}
@media (max-width:560px){.principios__in{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════
   GLIFOS DE LÍNEA (identificadores pequeños)
   ════════════════════════════════════════════════════════════ */
.glifo{width:30px;height:30px;flex:none;display:block}
.glifo .g{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.glifo .f{fill:none;stroke:currentColor;stroke-width:.8;opacity:.5}
.glifo .l{fill:var(--lima);stroke:none}
.glifo .ls{fill:none;stroke:var(--lima);stroke-width:1.8;stroke-linecap:round}

/* ════════════════════════════════════════════════════════════
   BARRA · VARIANTE CLARA (páginas con hero claro)
   ════════════════════════════════════════════════════════════ */
.bar .logo-oscuro{display:none}
.hero-claro .bar:not(.is-solid):not(.panel-abierto) .logo-claro{display:none}
.hero-claro .bar:not(.is-solid):not(.panel-abierto) .logo-oscuro{display:block}
.hero-claro .bar:not(.is-solid):not(.panel-abierto) .bar__nav a,
.hero-claro .bar:not(.is-solid):not(.panel-abierto) .nav-btn{color:var(--ink)}
.hero-claro .bar:not(.is-solid):not(.panel-abierto) .bar__sep{background:var(--rule-2)}
.hero-claro .bar:not(.is-solid):not(.panel-abierto) .bar__cta{color:var(--ink)}
.hero-claro .bar:not(.is-solid):not(.panel-abierto) .bar__cta .arrow{stroke:var(--ink)}
.hero-claro .bar:not(.is-solid):not(.panel-abierto) .bar__burger span{background:var(--ink)}
.bar.panel-abierto{background:var(--ink)}

/* ════════════════════════════════════════════════════════════
   PANEL DE LÍNEAS (desplegable estilo W1, con fotos)
   ════════════════════════════════════════════════════════════ */
.panel{position:absolute;left:0;right:0;top:100%;background:var(--ink);border-top:1px solid var(--rule-dark);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility 0s linear .35s}
.panel.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.panel__in{max-width:var(--max);margin:0 auto;padding:28px var(--gutter) 36px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.panel .lcard{opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.panel.is-open .lcard{opacity:1;transform:none}
.panel.is-open .lcard:nth-child(2){transition-delay:.05s}
.panel.is-open .lcard:nth-child(3){transition-delay:.1s}
.panel.is-open .lcard:nth-child(4){transition-delay:.15s}

/* tarjeta de línea con foto: se usa en el panel, en el home y en "Las otras líneas" */
.lcard{position:relative;display:flex;flex-direction:column;color:var(--on-dark);isolation:isolate}
.lcard__img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#222}
.lcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.lcard__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(26,26,24,.55))}
.lcard:hover .lcard__img img{transform:scale(1.04)}
.lcard__txt{display:flex;align-items:flex-start;gap:12px;padding-top:14px}
.lcard__txt b{display:block;font-weight:500;font-size:15px;line-height:1.3}
.lcard__txt small{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--on-dark-mid)}
.lcard .arrow{width:22px;height:12px;fill:none;stroke:var(--lima);stroke-width:1.4;margin-left:auto;margin-top:4px;flex:none;
  transition:transform var(--t-hover) var(--ease-out)}
.lcard:hover .arrow{transform:translateX(5px)}
.lcard .glifo{color:var(--on-dark)}
.lcard--claro{color:var(--ink)}
.lcard--claro .lcard__txt small{color:var(--ink-ghost)}
.lcard--claro .glifo{color:var(--ink)}
.lcard--claro .arrow{stroke:var(--ink)}

/* ════════════════════════════════════════════════════════════
   MENÚ DE CELULAR
   ════════════════════════════════════════════════════════════ */
.bar__burger{display:none;width:40px;height:40px;border:0;background:none;cursor:pointer;position:relative;margin-left:4px}
.bar__burger span{position:absolute;left:9px;right:9px;height:1.5px;background:var(--on-dark);transition:transform .3s var(--ease-out),opacity .2s}
.bar__burger span:nth-child(1){top:14px}.bar__burger span:nth-child(2){top:20px}.bar__burger span:nth-child(3){top:26px}
.bar__burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.bar__burger[aria-expanded=true] span:nth-child(2){opacity:0}
.bar__burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.movil{position:fixed;inset:0;z-index:45;background:var(--ink);color:var(--on-dark);overflow-y:auto;
  padding:calc(var(--bar-h) + 20px) var(--gutter) 40px;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
.movil.is-open{opacity:1;visibility:visible;transition-delay:0s}
.movil__nav{display:flex;flex-direction:column}
.movil__nav>a{padding:16px 0;font-size:22px;font-weight:300;border-bottom:1px solid var(--rule-dark)}
.movil__nav>a.is-active{color:var(--lima)}
.movil__lineas{display:grid;gap:14px;padding:18px 0 22px;border-bottom:1px solid var(--rule-dark)}
.movil__lineas p{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mid)}
.movil__lineas a{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center;font-size:15px}
.movil__lineas img{width:84px;aspect-ratio:16/9;object-fit:cover}
.movil__cta{display:inline-flex;align-items:center;gap:10px;margin-top:28px;color:var(--lima);font-weight:500}
.movil__cta .arrow{width:24px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4}
body.menu-abierto{overflow:hidden}
@media (max-width:1000px){
  .bar__burger{display:block}
  .panel{display:none}
  .bar__cta{display:none}
}

/* ════════════════════════════════════════════════════════════
   HERO CON FOTO (líneas y EEC) · oscuro o claro
   ════════════════════════════════════════════════════════════ */
.hero-foto{position:relative;isolation:isolate;overflow:hidden;min-height:max(580px,82vh);display:flex;align-items:center;
  background:var(--ink);color:var(--on-dark)}
.hero-foto__img{position:absolute;inset:0;z-index:-2}
.hero-foto__img img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,70% 50%);
  animation:asentar 1.8s var(--ease-out) both}
@keyframes asentar{from{transform:scale(1.06)}to{transform:none}}
.hero-foto::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,26,24,.65) 0,transparent 170px),
             linear-gradient(90deg,rgba(26,26,24,.92) 0,rgba(26,26,24,.72) 30%,rgba(26,26,24,.2) 52%,transparent 66%)}
.hero-foto__copy{width:100%;max-width:var(--max);margin:0 auto;padding:calc(var(--bar-h) + 40px) var(--gutter) 90px}
.hero-foto .eyebrow{margin-bottom:24px}
.hero-foto .eyebrow .glifo{width:22px;height:22px;color:inherit}
.hero-foto .eyebrow--glifo::before{display:none}
.hero-foto h1{font-weight:300;font-size:clamp(38px,4.8vw,70px);line-height:1.06;letter-spacing:-.022em;max-width:14ch;margin-bottom:26px}
.hero-foto .lead{max-width:44ch;font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:var(--on-dark-mid)}
.hero-foto h1 em{font-style:normal;color:var(--lima)}

.hero-foto--claro{background:var(--paper-2);color:var(--ink)}
.hero-foto--claro::after{background:linear-gradient(180deg,rgba(244,244,242,.7) 0,transparent 170px),
             linear-gradient(90deg,rgba(244,244,242,.95) 0,rgba(244,244,242,.82) 30%,rgba(244,244,242,.25) 54%,transparent 68%)}
.hero-foto--claro .eyebrow{color:var(--ink-ghost)}
.hero-foto--claro .lead{color:var(--ink-mid)}
/* sobre claro el lima no se lee como texto: marca de subrayado */
.hero-foto--claro h1 em{color:var(--ink);box-shadow:inset 0 -.12em 0 var(--lima)}
@media (max-width:760px){
  .hero-foto{min-height:88svh;align-items:flex-end}
  .hero-foto::after{background:linear-gradient(180deg,rgba(26,26,24,.6) 0,transparent 130px),linear-gradient(0deg,var(--ink) 0,rgba(26,26,24,.88) 42%,transparent 72%)}
  .hero-foto--claro::after{background:linear-gradient(180deg,rgba(244,244,242,.7) 0,transparent 130px),linear-gradient(0deg,var(--paper-2) 0,rgba(244,244,242,.9) 44%,transparent 74%)}
}

/* hero sobrio sin foto (La Firma mientras llega su foto, Experiencia) */
.hero-sobrio{position:relative;isolation:isolate;overflow:hidden;min-height:max(560px,76vh);display:flex;align-items:center;
  background:var(--ink);color:var(--on-dark)}
.hero-sobrio__fondo{position:absolute;inset:0;z-index:-2;
  background:radial-gradient(ellipse 60% 70% at 78% 60%,var(--lima-prof),var(--lima-prof-2) 45%,transparent 80%)}
.hero-sobrio__curvas{position:absolute;inset:0;z-index:-1;background:url(../img/experiencia/curvas-nivel.svg) center/cover no-repeat;opacity:.34;
  -webkit-mask-image:linear-gradient(90deg,transparent 18%,#000 62%);mask-image:linear-gradient(90deg,transparent 18%,#000 62%)}
.hero-sobrio .fx-grano{z-index:-1}
.hero-sobrio__copy{width:100%;max-width:var(--max);margin:0 auto;padding:calc(var(--bar-h) + 40px) var(--gutter) 90px}
.hero-sobrio .eyebrow{margin-bottom:26px}
.hero-sobrio h1{font-weight:300;font-size:clamp(40px,5vw,74px);line-height:1.05;letter-spacing:-.022em;max-width:14ch;margin-bottom:28px}
.hero-sobrio h1 em{font-style:normal;color:var(--lima)}
.hero-sobrio .lead{max-width:42ch;font-size:clamp(16px,1.35vw,19px);color:var(--on-dark-mid)}
.hero-sobrio__foto{position:absolute;inset:0;z-index:-2}
.hero-sobrio__foto img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}

/* cita de cliente (Experiencia) */
.cita{max-width:40ch}
.cita blockquote{font-weight:300;font-size:clamp(26px,2.8vw,42px);line-height:1.15;letter-spacing:-.018em}
.cita blockquote::before{content:"“";display:block;color:var(--lima);font-size:1.6em;line-height:.6;margin-bottom:10px}
.cita figcaption{margin-top:26px;font-size:14px;color:var(--on-dark-mid)}
.cita figcaption b{display:block;color:var(--on-dark);font-weight:500}

/* ════════════════════════════════════════════════════════════
   EDITORIAL (dos columnas: etiqueta · texto)
   ════════════════════════════════════════════════════════════ */
.editorial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,5vw,80px);
  padding-block:clamp(28px,3vw,40px);border-top:1px solid var(--rule-2)}
.editorial:first-of-type{border-top:0}
.editorial h2{font-weight:500;font-size:15px;letter-spacing:.01em;display:flex;gap:12px;align-items:baseline}
.editorial h2::before{content:"";width:18px;height:2px;background:var(--lima);transform:translateY(-4px)}
.editorial p{font-size:clamp(17px,1.4vw,20px);line-height:1.65;color:var(--ink-mid);max-width:58ch}
.editorial p+p{margin-top:16px}
.editorial b{font-weight:500;color:var(--ink);box-shadow:inset 0 -2px 0 var(--lima)}
.band--dark .editorial{border-color:var(--rule-dark)}
.band--dark .editorial p{color:var(--on-dark-mid)}
.band--dark .editorial b{color:var(--on-dark)}
@media (max-width:760px){.editorial{grid-template-columns:1fr}}

.titulo-seccion{font-weight:300;font-size:clamp(30px,3.4vw,50px);line-height:1.12;letter-spacing:-.018em;max-width:22ch;margin-bottom:clamp(36px,5vw,64px)}
.titulo-seccion b{font-weight:300;box-shadow:inset 0 -.1em 0 var(--lima)}
.band--dark .titulo-seccion b{box-shadow:none;color:var(--lima)}
.entradilla{font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--ink-mid);max-width:52ch;margin:-24px 0 clamp(36px,5vw,56px)}
.band--dark .entradilla{color:var(--on-dark-mid)}

/* ════════════════════════════════════════════════════════════
   FIGURA PROPIA DE CADA LÍNEA (sección oscura con diagrama animado)
   ════════════════════════════════════════════════════════════ */
.firma-linea{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.firma-linea .titulo-seccion{margin-bottom:22px}
.firma-linea p{color:var(--on-dark-mid);max-width:42ch;font-size:16px;line-height:1.65}
.diagrama{width:100%;height:auto;display:block;overflow:visible}
.diagrama .d-g{fill:none;stroke:#8E927E;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.diagrama .d-f{fill:none;stroke:#5A5C50;stroke-width:.8;stroke-dasharray:3 5}
.diagrama .d-h{fill:none;stroke:var(--on-dark);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.diagrama .d-l{fill:var(--lima)}
.diagrama .d-ls{fill:none;stroke:var(--lima);stroke-width:1.2}
.diagrama .d-t{fill:var(--on-dark-mid);font:500 11px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.diagrama .d-box{fill:none;stroke:#8E927E;stroke-width:1.2}
/* dibujo al aparecer */
.js .diagrama [data-dibujo]{stroke-dasharray:1;stroke-dashoffset:1}
.diagrama.is-in [data-dibujo]{animation:trazo 1.4s var(--ease-draw) forwards;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes trazo{to{stroke-dashoffset:0}}
.js .diagrama [data-aparece]{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.diagrama.is-in [data-aparece]{animation:aparece .6s var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes aparece{to{opacity:1;transform:none}}
.js .diagrama [data-mueve]{transform-box:fill-box}
.diagrama.is-in [data-mueve]{animation:encaja 1.1s var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 110ms)}
@keyframes encaja{to{transform:translate(0,0) rotate(0)}}
.diagrama.is-in .pulso{animation:pulso 3.2s var(--ease-out) 2.2s infinite}
@keyframes pulso{0%{opacity:.8;transform:scale(.6)}70%,100%{opacity:0;transform:scale(2.2)}}
.pulso{transform-box:fill-box;transform-origin:center;opacity:0}
@media (max-width:860px){.firma-linea{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════
   TARJETA DE SUBSERVICIOS
   ════════════════════════════════════════════════════════════ */
.subs{border-top:1px solid var(--rule-2)}
.sub{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1.6fr);gap:clamp(16px,3vw,40px);
  padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--rule-2);align-items:baseline}
.sub__n{font-size:12px;letter-spacing:.16em;color:var(--ink-ghost)}
.sub h3{font-weight:500;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.005em}
.sub p{color:var(--ink-mid);font-size:16px;line-height:1.6;max-width:56ch}
@media (max-width:760px){.sub{grid-template-columns:36px 1fr}.sub p{grid-column:2}}

/* grilla de tarjetas de línea (home y "Las otras líneas") */
.lgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.lgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.lgrid,.lgrid--3{grid-template-columns:1fr}}
.lcard__subs{list-style:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--rule-2);font-size:13.5px;color:var(--ink-ghost);line-height:1.7}
.band--dark .lcard__subs{border-color:var(--rule-dark);color:var(--on-dark-mid)}

/* ════════════════════════════════════════════════════════════
   CIERRE CON INVITACIÓN
   ════════════════════════════════════════════════════════════ */
.cierre{background:var(--ink);color:var(--on-dark);position:relative;isolation:isolate;overflow:hidden}
.cierre::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 50% 90% at 100% 50%,var(--lima-prof),transparent 70%)}
.cierre__in{max-width:var(--max);margin:0 auto;padding:clamp(64px,8vw,112px) var(--gutter);display:flex;align-items:flex-end;
  justify-content:space-between;gap:40px;flex-wrap:wrap}
.cierre p{font-weight:300;font-size:clamp(28px,3.2vw,46px);line-height:1.15;letter-spacing:-.015em;max-width:22ch}
.boton{display:inline-flex;align-items:center;gap:14px;padding:16px 26px;border:1px solid var(--lima);color:var(--on-dark);
  font-weight:500;font-size:15px;transition:background-color var(--t-hover),color var(--t-hover)}
.boton .arrow{width:24px;height:12px;fill:none;stroke:var(--lima);stroke-width:1.4;transition:transform var(--t-hover) var(--ease-out)}
.boton:hover{background:rgba(200,212,0,.08)}
.boton:hover .arrow{transform:translateX(5px)}
.boton--oscuro{border-color:var(--ink);color:var(--ink)}
.boton--oscuro .arrow{stroke:var(--ink)}
.boton--oscuro:hover{background:rgba(26,26,24,.05)}

/* ════════════════════════════════════════════════════════════
   PERSONAS
   ════════════════════════════════════════════════════════════ */
.socios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.socio{display:grid;grid-template-columns:132px 1fr;gap:26px;align-items:start}
.socio img{width:132px;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.socio h3{font-weight:500;font-size:20px;letter-spacing:-.005em}
.socio__rol{font-size:13px;color:var(--ink-ghost);margin:4px 0 14px}
.socio p{font-size:15.5px;line-height:1.65;color:var(--ink-mid)}
.socio__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.socio__tags span{font-size:11.5px;letter-spacing:.06em;padding:5px 9px;border:1px solid var(--rule-2);color:var(--ink-mid)}
.nota-equipo{margin-top:clamp(36px,4vw,56px);padding-top:26px;border-top:1px solid var(--rule-2);max-width:64ch;color:var(--ink-mid);font-size:16px}
@media (max-width:900px){.socios{grid-template-columns:1fr}}
@media (max-width:480px){.socio{grid-template-columns:1fr}.socio img{width:110px}}

/* ════════════════════════════════════════════════════════════
   HOME · SECCIONES
   ════════════════════════════════════════════════════════════ */
.mapa{position:relative;margin-bottom:clamp(40px,5vw,64px);aspect-ratio:3/1;overflow:hidden}
.mapa img{width:100%;height:100%;object-fit:cover;object-position:22% center}
.modalidades{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,40px);margin-top:clamp(56px,6vw,88px)}
.modalidad{padding-top:18px;border-top:1px solid var(--rule-2);position:relative}
.modalidad::before{content:"";position:absolute;top:-1px;left:0;width:24px;height:2px;background:var(--lima)}
.modalidad small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-ghost)}
.modalidad h4{font-weight:500;font-size:18px;margin:8px 0 8px}
.modalidad p{font-size:14.5px;line-height:1.6;color:var(--ink-mid)}
@media (max-width:1000px){.modalidades{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.modalidades{grid-template-columns:1fr}}

/* EEC en el home: foto a sangre + tarjeta que cruza hacia Gestión (el único cruce del home) */
.eec-home{position:relative;display:grid}
.eec-home>*{grid-area:1/1}
.eec-home__img{min-height:clamp(420px,46vw,620px)}
.eec-home__img img{width:100%;height:100%;object-fit:cover;object-position:left center}
.eec-home__card{align-self:start;justify-self:end;margin-top:calc(-1 * clamp(60px,7vw,110px));margin-right:var(--gutter);
  width:min(460px,calc(100% - 2 * var(--gutter)));background:var(--ink);color:var(--on-dark);padding:clamp(28px,3vw,44px);position:relative;z-index:2}
.eec-home__card h2{font-weight:300;font-size:clamp(26px,2.6vw,38px);line-height:1.15;letter-spacing:-.015em;margin:14px 0 18px}
.eec-home__card h2 b{font-weight:300;color:var(--lima)}
.eec-home__card p{color:var(--on-dark-mid);font-size:15.5px}
.eec-home__card p+p{margin-top:10px}
.eec-home__card .boton{margin-top:26px}
@media (max-width:760px){.eec-home>*{grid-area:auto}.eec-home__img{min-height:260px}.eec-home__card{margin:-40px var(--gutter) 0;justify-self:stretch;width:auto}}

.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);counter-reset:paso}
.paso{padding-top:22px;border-top:1px solid var(--rule-dark);position:relative}
.paso::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--lima);transition:width .8s var(--ease-out) .3s}
.paso.is-in::before{width:100%}
.paso:nth-child(1).is-in::before{width:33%}.paso:nth-child(2).is-in::before{width:66%}
.paso small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mid)}
.paso h3{font-weight:500;font-size:19px;margin:10px 0 10px;max-width:22ch}
.paso p{font-size:15px;line-height:1.65;color:var(--on-dark-mid)}
.sentencia{margin-top:clamp(56px,6vw,88px);padding-top:28px;border-top:1px solid var(--rule-dark);max-width:60ch;font-size:clamp(18px,1.6vw,22px);font-weight:300;line-height:1.5;color:var(--on-dark-mid)}
.sentencia b{font-weight:400;color:var(--on-dark)}
@media (max-width:860px){.pasos{grid-template-columns:1fr}}

.sectores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-2)}
.sector{padding:clamp(22px,2.4vw,32px) clamp(16px,2vw,28px) clamp(22px,2.4vw,32px) 0;border-bottom:1px solid var(--rule-2);
  display:grid;grid-template-columns:44px 1fr;gap:6px 16px}
.sector span{font-size:12px;letter-spacing:.16em;color:var(--ink-ghost);padding-top:4px}
.sector h3{font-weight:500;font-size:18px}
.sector p{grid-column:2;font-size:14.5px;color:var(--ink-ghost)}
@media (max-width:860px){.sectores{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sectores{grid-template-columns:1fr}}

.logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule-2);border:1px solid var(--rule-2)}
.logo-slot{aspect-ratio:5/2;background:var(--paper-2);display:grid;place-items:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#A8A8A2}
@media (max-width:760px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}}

.contacto{position:relative;display:flex;justify-content:flex-end;align-items:center;min-height:clamp(520px,50vw,700px);isolation:isolate;overflow:hidden}
.contacto__img{position:absolute;inset:0;z-index:-1}
.contacto__img img{width:100%;height:100%;object-fit:cover;object-position:left center}
.contacto__card{background:var(--ink);color:var(--on-dark);width:min(480px,calc(100% - 2 * var(--gutter)));margin-right:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding:clamp(30px,3.4vw,48px)}
.contacto__card h2{font-weight:300;font-size:clamp(30px,3vw,44px);line-height:1.1;letter-spacing:-.018em;margin:14px 0 16px}
.contacto__card h2 b{font-weight:300;color:var(--lima)}
.contacto__card>p{color:var(--on-dark-mid);font-size:15.5px}
.datos{list-style:none;margin-top:26px;border-top:1px solid var(--rule-dark)}
.datos li{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule-dark);font-size:15px}
.datos li span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-mid);padding-top:3px}
.datos a:hover{color:var(--lima)}
@media (max-width:760px){.contacto{align-items:flex-end;padding-top:260px}.contacto__img img{object-position:20% top}.contacto__card{margin:0 var(--gutter) var(--gutter)}}

/* ════════════════════════════════════════════════════════════
   EEC · PÁGINA
   ════════════════════════════════════════════════════════════ */
.recibe{list-style:none;counter-reset:r;border-top:1px solid var(--rule-2)}
.recibe li{counter-increment:r;display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--rule-2);
  font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--ink-mid);max-width:900px}
.recibe li::before{content:counter(r,decimal-leading-zero);font-size:12px;letter-spacing:.16em;color:var(--ink-ghost);padding-top:6px}
.binario{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.binario span{font-size:13px;padding:8px 12px;border:1px solid var(--rule-dark);color:var(--on-dark)}
.binario span i{font-style:normal;color:var(--lima)}

/* ════════════════════════════════════════════════════════════
   EXPERIENCIA · CASOS
   ════════════════════════════════════════════════════════════ */
.casos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.caso{background:var(--paper);border:1px solid var(--rule-2);padding:26px}
.caso dl{display:grid;gap:12px}
.caso dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-ghost)}
.caso dd{font-size:15px;color:var(--ink-mid);margin-top:2px}
.caso dd.pend{color:#A8A8A2;font-style:italic}
.caso .caso__res{padding-top:12px;border-top:2px solid var(--lima)}
@media (max-width:900px){.casos{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════
   PIE
   ════════════════════════════════════════════════════════════ */
.pie{background:var(--ink);color:var(--on-dark-mid);font-size:14px}
.pie__in{max-width:var(--max);margin:0 auto;padding:clamp(56px,6vw,80px) var(--gutter) 28px}
.pie__top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:clamp(28px,4vw,56px);padding-bottom:40px;border-bottom:1px solid var(--rule-dark)}
.pie__marca img{height:26px;width:auto}
.pie__marca p{margin-top:16px;max-width:26ch;line-height:1.5}
.pie h3{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark);margin-bottom:16px}
.pie ul{list-style:none;display:grid;gap:9px}
.pie a{transition:color var(--t-hover)}
.pie a:hover{color:var(--lima)}
.pie__base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;font-size:12.5px}
@media (max-width:900px){.pie__top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pie__top{grid-template-columns:1fr}}

.contenedor{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.pendiente{outline:1px dashed rgba(200,212,0,.0)}

/* ════════════════════════════════════════════════════════════
   MOVIMIENTO
   Entrada del hero al cargar + aparición al hacer scroll.
   Solo se oculta si hay JS (clase .js en <html>).
   ════════════════════════════════════════════════════════════ */
.in-load{opacity:0;transform:translateY(24px);
  animation:subir var(--t-reveal) var(--ease-out) forwards;animation-delay:calc(.25s + var(--d,0) * .12s)}
@keyframes subir{to{opacity:1;transform:none}}

.js .reveal{opacity:0;transform:translateY(24px);
  transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out);
  transition-delay:calc(var(--stagger,0) * 80ms)}
.js .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    animation-delay:0s!important;transition-duration:.01ms!important}
  .marquee__track{animation:none!important}
  .js .diagrama [data-dibujo]{stroke-dashoffset:0}
  .js .diagrama [data-aparece]{opacity:1;transform:none}
  .js .diagrama [data-mueve]{transform:none!important}
  .hero-foto__img img{animation:none}
}

/* ── Complementos ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.cierre__sub{margin-top:16px;max-width:52ch;color:var(--on-dark-mid);font-size:16px;line-height:1.6;font-weight:400;letter-spacing:0}
/* hero con el texto a la derecha (EEC: el calibrador vive a la izquierda de la foto) */
.hero-foto--der .hero-foto__copy{display:flex;flex-direction:column;align-items:flex-end}
.hero-foto--der .hero-foto__copy>*{width:min(560px,100%)}
.hero-foto--der.hero-foto--claro::after{background:linear-gradient(180deg,rgba(244,244,242,.7) 0,transparent 170px),
  linear-gradient(270deg,rgba(244,244,242,.96) 0,rgba(244,244,242,.86) 34%,rgba(244,244,242,.25) 56%,transparent 70%)}
.hero-foto--der h1{max-width:16ch}
@media (max-width:760px){.hero-foto--der .hero-foto__copy{align-items:flex-start}}