/* ═══════════════════════════════════════════════════════════
   LEXI GROUP · landing
   Editorial asimétrico sobre papel liso. El índice de fueros
   entra en el primer viewport, al lado del titular.
   Sin texturas, sin diagramas, sin tarjetas, sin sombras
   salvo la de la píldora del nav.
   Movimiento según Emil Kowalski: una curva, tres duraciones,
   solo transform y opacity, hover detrás de (hover:hover).
   ═══════════════════════════════════════════════════════════ */

:root{
  --papel:#FCFBF9;
  --papel2:#F4F1EA;
  --tinta:#12100E;
  --tinta2:#443F39;     /* cuerpo · 10:1 */
  --tinta3:#6B6459;     /* labels · 5.6:1 */
  --oro:#B08D33;        /* filetes */
  --oro-txt:#7C5A0E;    /* texto chico · 6.1:1 */
  --noche:#12100E;
  --noche-txt:#F2EEE6;
  --noche-txt2:rgba(242,238,230,.74);
  --hair:rgba(18,16,14,.13);
  --hair-oro:rgba(176,141,51,.45);

  --gut:clamp(20px,5vw,56px);
  --max:1220px;
  --barra:68px;
  --f:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --e:cubic-bezier(.16,1,.3,1);
  --t-press:120ms;
  --t-ui:200ms;
  --t-rev:600ms;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--f);
  font-size:clamp(16.5px,1rem + .22vw,17.5px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none}
b,strong{font-weight:700}
::selection{background:rgba(176,141,51,.28)}
:is(a,button):focus-visible{outline:2px solid var(--oro-txt);outline-offset:3px;border-radius:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--tinta);color:var(--papel);padding:.7rem 1.1rem}
.skip:focus{left:.5rem;top:.5rem}

h1,h2,h3{font-weight:700;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}

/* ── barra superior ──────────────────────────────────────── */
.barra{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;
  height:var(--barra);
  padding:0 var(--gut);
  border-bottom:1px solid var(--hair);
}
.barra__acc{display:flex;justify-content:flex-end}
.marca{display:flex;align-items:center;gap:.55rem;justify-content:center}
.marca img{width:auto;height:26px}
.marca span{font-weight:700;letter-spacing:-.02em;font-size:1.02rem;white-space:nowrap}
.barra__links{display:flex;gap:1.7rem}
.barra__links a{font-size:.95rem;color:var(--tinta2);transition:color var(--t-ui) var(--e)}

/* píldora flotante: aparece al bajar. Solo transform y opacity:
   no toca layout, así que no fuerza reflow al aparecer. */
.pastilla{
  position:fixed;top:14px;left:50%;z-index:60;
  display:flex;align-items:center;gap:1.4rem;
  padding:.5rem .5rem .5rem 1.1rem;
  border-radius:999px;
  background:rgba(252,251,249,.86);
  border:1px solid var(--hair);
  box-shadow:0 10px 34px rgba(18,16,14,.13);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  opacity:0;
  transform:translate(-50%,-14px) scale(.96);
  transition:opacity 320ms var(--e),transform 420ms var(--e);
  pointer-events:none;
}
.pastilla.on{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}
.marca--mini img{height:22px}
.marca--mini span{font-size:.94rem}
.pastilla__links{display:flex;gap:1.3rem}
.pastilla__links a{font-size:.88rem;color:var(--tinta2);transition:color var(--t-ui) var(--e)}

/* ── botones ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:1.2rem;
  font-weight:600;font-size:.95rem;letter-spacing:-.01em;
  padding:.82rem 1.45rem;border-radius:999px;
  background:var(--tinta);color:var(--papel);
  transition:transform var(--t-press) var(--e),background var(--t-ui) var(--e),color var(--t-ui) var(--e);
}
.btn::after{content:"→";font-weight:500;transition:transform var(--t-ui) var(--e)}
.btn:active{transform:scale(.97)}
.btn--xs{padding:.5rem 1rem;font-size:.85rem;gap:.75rem}
.btn--sm{padding:.58rem 1.15rem;font-size:.89rem;gap:.85rem}
.btn--lg{padding:1rem 1.85rem;font-size:1rem}
.btn--claro{background:var(--noche-txt);color:var(--noche)}
.btn--quiet{background:none;color:var(--tinta2);padding:.82rem .4rem;gap:.6rem}
.btn--quiet-n{color:var(--noche-txt2)}

/* ── hero asimétrico ─────────────────────────────────────── */
.hero{
  max-width:var(--max);margin:0 auto;
  padding:clamp(2.4rem,5vw,4.2rem) var(--gut) 0;
}

.kicker{
  font-size:.73rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--oro-txt);margin-bottom:1.2rem;
}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.75rem);letter-spacing:-.035em;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--oro-txt)}
.hero__baj{max-width:44ch;margin-top:1.4rem;color:var(--tinta2);font-size:1.08em}
.hero__acc{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:1.9rem}
.hero__pie{margin-top:1.6rem;font-size:.88rem;color:var(--tinta3)}

/* tira de temas: la lista completa entra en el primer viewport sin
   ocupar una columna entera */
.tira{
  max-width:var(--max);margin:clamp(1.8rem,3.4vw,2.6rem) auto 0;
  padding:1.1rem 0 clamp(2.4rem,4.5vw,3.4rem);
  border-top:1px solid var(--hair-oro);
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.65rem 1.5rem;
}
.tira__t{
  font-size:.73rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--oro-txt);flex:none;margin-right:.4rem;
}
.tira a{
  font-size:1rem;font-weight:600;letter-spacing:-.015em;color:var(--tinta);
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color var(--t-ui) var(--e),border-color var(--t-ui) var(--e);
}

.js .tira a{opacity:0;transform:translateY(8px);transition:opacity 420ms var(--e),transform 420ms var(--e)}
.js .tira.in a{opacity:1;transform:none}
.js .tira.in a:nth-child(2){transition-delay:40ms}
.js .tira.in a:nth-child(3){transition-delay:80ms}
.js .tira.in a:nth-child(4){transition-delay:120ms}
.js .tira.in a:nth-child(5){transition-delay:160ms}
.js .tira.in a:nth-child(6){transition-delay:200ms}
.js .tira.in a:nth-child(7){transition-delay:230ms}
.js .tira.in a:nth-child(8){transition-delay:260ms}
.js .tira.in a:nth-child(9){transition-delay:290ms}
.js .tira.in a:nth-child(10){transition-delay:320ms}
.js .tira.in a:nth-child(11){transition-delay:350ms}

/* ── secciones ───────────────────────────────────────────── */
.sec{padding:clamp(2.8rem,5.5vw,4.4rem) var(--gut)}
.sec--papel2{background:var(--papel2);border-block:1px solid var(--hair)}
.cab{max-width:var(--max);margin:0 auto clamp(1.8rem,3vw,2.6rem)}
.num{
  display:flex;align-items:center;gap:.8rem;
  font-size:.73rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--oro-txt);margin-bottom:1rem;
}
.num i{width:34px;height:1px;background:var(--hair-oro);flex:none}
.sec h2{font-size:clamp(1.75rem,3.2vw,2.55rem)}
.parr{max-width:62ch;margin-top:1rem;color:var(--tinta2);font-size:1.04em}

/* ── áreas ───────────────────────────────────────────────── */
.areas{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(2rem,4vw,4.5rem);
}
.areas article{padding:1.15rem 0;border-top:1px solid var(--hair);scroll-margin-top:96px}
.areas h3{font-size:1.28rem;margin-bottom:.4rem}
.areas p{color:var(--tinta2);font-size:1em;max-width:46ch}
.pie-nota{
  max-width:var(--max);margin:clamp(1.8rem,3vw,2.4rem) auto 0;
  color:var(--tinta2);font-size:1em;
}
.pie-nota a{font-weight:600;border-bottom:2px solid var(--hair-oro)}

/* ── pasos ───────────────────────────────────────────────── */
.pasos{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr)}
.pasos li{padding:1.1rem clamp(1rem,2.4vw,2.4rem) 0 0;border-top:1px solid var(--hair)}
.pasos li+li{padding-left:clamp(1rem,2.4vw,2.4rem);border-left:1px solid var(--hair)}
.pasos .p{display:block;font-size:.75rem;font-weight:600;color:var(--oro-txt);letter-spacing:.11em;text-transform:uppercase;margin-bottom:.9rem}
.pasos h3{font-size:1.2rem;margin-bottom:.4rem}
.pasos p{color:var(--tinta2);font-size:.99em;max-width:36ch}

/* ── tres razones ────────────────────────────────────────── */
.tres{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr)}
.tres>div{padding:1.1rem clamp(1rem,2.4vw,2.4rem) 0 0;border-top:2px solid var(--oro)}
.tres>div+div{padding-left:clamp(1rem,2.4vw,2.4rem);border-left:1px solid var(--hair)}
.tres h3{font-size:1.2rem;margin-bottom:.4rem}
.tres p{color:var(--tinta2);font-size:.99em;max-width:36ch}

/* ── cierre ──────────────────────────────────────────────── */
.cta{background:var(--noche);color:var(--noche-txt);padding:clamp(3.2rem,6.5vw,5rem) var(--gut)}
.cta__in{max-width:var(--max);margin:0 auto}
.cta h2{font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.035em}
.cta__baj{max-width:48ch;margin-top:1.1rem;color:var(--noche-txt2)}
.cta__acc{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:2rem}

/* ── pie ─────────────────────────────────────────────────── */
.pie{padding:clamp(2.2rem,4vw,3rem) var(--gut)}
.pie>*{max-width:var(--max);margin-inline:auto}
.pie__marca{display:flex;align-items:center;gap:.7rem;margin-bottom:1.8rem}
.pie__marca img{width:auto;height:30px}
.pie__n{font-weight:700;letter-spacing:-.02em}
.pie__b{font-size:.67rem;letter-spacing:.15em;text-transform:uppercase;color:var(--oro-txt);margin-top:.15rem}
.pie__dat{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;border-top:1px solid var(--hair);padding-top:1.4rem}
.pie__dat dt{font-size:.67rem;letter-spacing:.15em;text-transform:uppercase;color:var(--oro-txt);margin-bottom:.35rem}
.pie__dat dd{font-size:.93rem;color:var(--tinta2);line-height:1.45}
.pie__dat a{border-bottom:1px solid var(--hair-oro)}
.pie__legal{margin-top:1.8rem;font-size:.8rem;color:var(--tinta3)}

/* ── whatsapp flotante (mobile) ──────────────────────────── */
.wa{
  display:none;position:fixed;right:14px;bottom:14px;z-index:65;
  width:52px;height:52px;border-radius:50%;
  background:var(--tinta);color:var(--papel);
  align-items:center;justify-content:center;
  transition:transform var(--t-press) var(--e);
}
.wa svg{width:26px;height:26px;fill:currentColor}
.wa:active{transform:scale(.94)}

/* ── movimiento ──────────────────────────────────────────── */
.ln{display:block;overflow:hidden}
.ln>i{display:block;font-style:normal}
.js .ln>i{transform:translateY(105%);transition:transform var(--t-rev) var(--e);animation:failsafe 1ms linear 6s forwards}
.js [data-r]{opacity:0;transform:translateY(10px);transition:transform var(--t-rev) var(--e),opacity var(--t-rev) var(--e);animation:failsafe 1ms linear 6s forwards}
.js .ln.in>i{transform:translateY(0)}
.js [data-r].in{opacity:1;transform:none}
@keyframes failsafe{to{opacity:1;transform:none}}

@media (hover:hover) and (pointer:fine){
  .barra__links a:hover,.pastilla__links a:hover{color:var(--tinta)}
  .btn:hover::after{transform:translateX(4px)}
  .btn:not(.btn--quiet):hover{background:#000}
  .btn--claro:hover{background:#fff}
  .btn--quiet:hover{color:var(--tinta)}
  .btn--quiet-n:hover{color:var(--noche-txt)}
  .tira a:hover{color:var(--oro-txt);border-bottom-color:var(--hair-oro)}
  .pie-nota a:hover{border-bottom-color:var(--oro-txt)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .ln>i,.js [data-r]{transform:none}
  .pastilla{transition-duration:.01ms}
  *,*::before,*::after{transition-duration:.01ms!important}
}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:1080px){
  .areas{grid-template-columns:1fr}
  .pie__dat{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--barra:60px}
  .barra__links{display:none}
  .pastilla__links{display:none}
  /* la grilla de tres zonas deja el escudo centrado igual, sin links */
  .hero{padding-top:1.9rem}
  .hero h1{font-size:clamp(2.05rem,7.4vw,2.7rem)}
  .hero__baj{margin-top:1.1rem;font-size:1.04em}
  .hero__acc{margin-top:1.4rem}
  .hero__pie{margin-top:1.2rem}
  .tira{margin-top:1.6rem;padding-bottom:2.2rem}
  /* en pantalla chica el recorrido se nota más si el desplazamiento es mayor */
  .js [data-r]{transform:translateY(16px)}
  .js .tira a{transform:translateY(12px)}
  .wa{display:flex}
  .pasos,.tres{grid-template-columns:1fr}
  .pasos li,.tres>div{padding-right:0}
  .pasos li+li,.tres>div+div{padding-left:0;border-left:0;margin-top:1.5rem}
  .pasos .p{margin-bottom:.6rem}
  .pie{padding-bottom:calc(clamp(2.2rem,4vw,3rem) + 58px)}
}
@media (max-width:620px){
  .barra{gap:.7rem;padding-inline:16px}
  .barra .btn--sm{padding:.5rem .95rem;font-size:.84rem;gap:.6rem}
  .marca img{height:22px}
  .marca span{font-size:.95rem}
  .pie__dat{grid-template-columns:1fr}
  .hero__acc{flex-direction:column;align-items:stretch}
  .hero__acc .btn{justify-content:space-between}
  .areas p{max-width:none}
  /* la tira pasa a dos columnas y los enlaces ganan área de toque */
  .tira{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}
  .tira__t{grid-column:1 / -1;margin-bottom:.5rem}
  .tira a{padding:.62rem 0;border-bottom:1px solid var(--hair)}
  .tira a:nth-last-child(-n+2){border-bottom:0}
}