/* ============================================================
   OLG INVESTMENT GROUP — SISTEMA DE DISEÑO
   Hoja compartida por todas las páginas del sitio.
   Al crear una landing nueva: enlazar este archivo y usar los
   componentes de abajo. No duplicar estilos en la página.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Fondos, de más oscuro a más claro */
  --ink:#09090a;
  --coal:#0e0e10;
  --graphite:#141416;
  --slate:#1b1c1e;

  /* Acento y textos */
  --sand:#c3b7a3;
  --sand-dim:#8d8574;
  --bone:#ecebe7;
  --mist:#8b8c91;
  --mist-dim:#63646a;

  /* Sección clara */
  --paper:#f3f1ed;
  --paper-ink:#1a1a1c;
  --paper-mist:#5c5d62;
  --paper-rule:rgba(0,0,0,.10);

  /* Líneas */
  --line:rgba(255,255,255,.085);
  --line-strong:rgba(255,255,255,.16);

  /* Semánticos (estados de formulario y fichas) */
  --ok:#7fb394;
  --warn:#cfaa63;
  --stop:#d08c8c;

  /* Tipografía */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Ritmo */
  --wrap:1240px;
  --pad:32px;
  --sec:130px;

  --ease:cubic-bezier(.16,.84,.44,1);
}

/* ---------- 2. BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);background:var(--ink);color:var(--mist);
  line-height:1.65;font-weight:300;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--bone);text-wrap:balance;}
svg{stroke-width:1.25;}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);}
.eyebrow{display:block;text-transform:uppercase;letter-spacing:.24em;font-size:10.5px;
  font-weight:500;color:var(--sand-dim);}

/* ---------- 3. SECCIONES ---------- */
section{padding:var(--sec) 0;}
.sec-ink{background:var(--ink);}
.sec-coal{background:var(--coal);}
.sec-paper{background:var(--paper);color:var(--paper-mist);}
.sec-paper h2,.sec-paper h3{color:var(--paper-ink);}
.sec-paper .eyebrow{color:#9a9184;}

.section-head{max-width:680px;margin-bottom:70px;}
.section-head h2{font-size:clamp(27px,3.6vw,44px);margin-top:20px;font-weight:400;letter-spacing:-.03em;}
.section-head p{margin-top:22px;font-size:15.5px;max-width:56ch;}

/* ---------- 4. BOTONES ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 30px;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:500;border:1px solid transparent;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);}
.btn svg{width:14px;height:14px;transition:transform .35s var(--ease);}
.btn:hover svg{transform:translateX(4px);}
.btn-solid{background:var(--bone);color:var(--ink);}
.btn-solid:hover{background:var(--sand);}
.btn-line{border-color:var(--line-strong);color:var(--bone);}
.btn-line:hover{border-color:var(--sand);color:var(--sand);}
.btn-text{padding:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sand);display:inline-flex;align-items:center;gap:10px;border-bottom:1px solid transparent;}
.btn-text:hover{border-bottom-color:var(--sand);}
.btn-text svg{width:13px;height:13px;transition:transform .35s var(--ease);}
.btn-text:hover svg{transform:translateX(4px);}

/* ---------- 5. HEADER ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease;}
header.site.scrolled{background:rgba(9,9,10,.85);backdrop-filter:blur(14px);border-bottom-color:var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:var(--wrap);margin:0 auto;padding:24px var(--pad);}
.brand{font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--bone);white-space:nowrap;}
.brand em{font-style:normal;color:var(--sand-dim);}
.navlinks{display:flex;gap:34px;align-items:center;}
.navlinks a{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);transition:color .3s;}
.navlinks a:hover{color:var(--bone);}
.nav-cta{border:1px solid var(--line-strong);padding:10px 18px;color:var(--bone)!important;}
.nav-cta:hover{border-color:var(--sand);color:var(--sand)!important;}
.burger{display:none;color:var(--bone);padding:4px;}
.burger svg{width:22px;height:22px;}

/* ---------- 6. HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background-position:center 40%;background-size:cover;
  background-repeat:no-repeat;filter:saturate(.62) contrast(1.02) brightness(1);
  transform:scale(1.06);animation:heroIn 2.6s var(--ease) forwards;}
@keyframes heroIn{to{transform:scale(1);}}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(94deg,rgba(9,9,10,.92) 0%,rgba(9,9,10,.7) 36%,rgba(9,9,10,.26) 66%,rgba(9,9,10,.55) 100%);}
.hero-veil2{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,9,10,.55) 0%,transparent 26%,transparent 62%,rgba(9,9,10,.9) 100%);}
.hero-inner{position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);}
.hero-kicker{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:28px;
  text-transform:uppercase;letter-spacing:.28em;font-size:10.5px;color:var(--sand);
  opacity:0;animation:fadeUp 1s ease .3s forwards;}
.hero-kicker i{display:block;width:24px;height:1px;background:var(--sand-dim);font-style:normal;}
.hero h1{font-size:clamp(42px,7.6vw,92px);font-weight:600;letter-spacing:-.038em;line-height:.97;
  color:#fff;max-width:13ch;opacity:0;animation:fadeUp 1.1s var(--ease) .45s forwards;}
.hero h1 span{display:block;color:var(--sand);font-weight:200;}
.hero p{margin-top:30px;max-width:46ch;font-size:16px;color:#b8b9bd;
  opacity:0;animation:fadeUp 1.1s ease .65s forwards;}
.hero-ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:44px;
  opacity:0;animation:fadeUp 1.1s ease .85s forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.hero-foot{position:absolute;bottom:0;left:0;right:0;z-index:3;border-top:1px solid var(--line);}
.hero-foot-in{max-width:var(--wrap);margin:0 auto;padding:20px var(--pad);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mist-dim);}

/* ---------- 7. INTENCIONES (¿qué necesitas?) ---------- */
.intents{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);}
.intent{position:relative;display:flex;flex-direction:column;gap:14px;padding:54px 44px 46px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .45s var(--ease);overflow:hidden;}
.intent::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sand);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);}
.intent:hover{background:var(--graphite);}
.intent:hover::after{transform:scaleY(1);}
.intent i[data-lucide]{color:var(--sand-dim);transition:color .45s;}
.intent:hover i[data-lucide]{color:var(--sand);}
.intent svg{width:24px;height:24px;}
.intent h3{font-size:clamp(19px,2.2vw,25px);font-weight:400;letter-spacing:-.025em;}
.intent p{font-size:14.5px;color:var(--mist-dim);max-width:38ch;}
.intent .btn-text{margin-top:12px;}

/* Tarjeta de intención a doble ancho: público distinto (comunidades) */
.intent.wide{grid-column:1/-1;background:var(--graphite);
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;}
.intent.wide .wide-body{display:flex;flex-direction:column;gap:12px;}
.intent.wide .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.intent.wide .tags span{border:1px solid var(--line);padding:6px 12px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mist-dim);}
@media(max-width:900px){.intent.wide{grid-template-columns:1fr;gap:18px;}}

/* ---------- 8b. FÓRMULAS DE EXPLOTACIÓN ---------- */
.models{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);}
.model{padding:36px 30px 40px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:11px;transition:background .45s var(--ease);}
.model:hover{background:var(--graphite);}
.model .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sand-dim);}
.model h3{font-size:16.5px;font-weight:500;letter-spacing:-.01em;}
.model p{font-size:13.5px;line-height:1.6;color:var(--mist-dim);}
.model ul{display:flex;flex-direction:column;gap:7px;margin-top:6px;}
.model li{font-size:12.5px;color:var(--mist-dim);padding-left:14px;position:relative;}
.model li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--sand-dim);}
.model.flag{background:var(--slate);}
.model.flag .tag{color:var(--sand);}
@media(max-width:1040px){.models{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.models{grid-template-columns:1fr;}}

/* Aviso legal en línea dentro de una sección */
.legal-note{margin-top:34px;border:1px solid var(--line);border-left:2px solid var(--sand-dim);
  padding:20px 24px;font-size:12.5px;line-height:1.65;color:var(--mist-dim);max-width:74ch;}
.legal-note b{display:block;color:var(--mist);font-weight:500;margin-bottom:6px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;}
/* Marcador de contenido pendiente de completar */
.ph{display:inline-block;background:rgba(195,183,163,.12);color:var(--sand);
  border:1px solid var(--line-strong);padding:1px 7px;font-family:var(--mono);font-size:11px;}

/* ---------- 8. CADENA / DIFERENCIACIÓN ---------- */
.chain{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);}
.link-step{flex:1 1 150px;padding:26px 22px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;transition:background .4s var(--ease);}
.link-step:last-child{border-right:none;}
.link-step:hover{background:var(--graphite);}
.link-step b{font-family:var(--mono);font-size:11px;color:var(--sand);font-weight:400;}
.link-step span{font-size:13.5px;color:var(--mist);}
.link-step.final{background:var(--slate);}
.link-step.final span{color:var(--bone);}

.compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
.compare > div{background:var(--ink);padding:38px 34px;display:flex;flex-direction:column;gap:16px;}
.compare .them{color:var(--mist-dim);}
.compare .us{background:var(--graphite);}
.compare h3{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;}
.compare .them h3{color:var(--mist-dim);}
.compare .us h3{color:var(--sand);}
.compare li{font-size:14.5px;padding:12px 0;border-bottom:1px solid var(--line);}
.compare li:last-child{border-bottom:none;}
.compare .us li{color:var(--bone);}

/* ---------- 9. PILARES / PROCESO ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);}
.pillar{padding:38px 30px 42px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px;}
.pillar i[data-lucide]{color:var(--sand-dim);}
.pillar svg{width:20px;height:20px;}
.pillar h3{font-size:15px;font-weight:500;}
.pillar p{font-size:13.5px;color:var(--mist-dim);line-height:1.6;}

.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--paper-rule);}
.step{padding:36px 28px 0 0;border-right:1px solid var(--paper-rule);}
.step:last-child{border-right:none;}
.step .n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:#a19889;margin-bottom:20px;font-variant-numeric:tabular-nums;}
.step h3{font-size:17px;font-weight:500;margin-bottom:10px;letter-spacing:-.015em;}
.step p{font-size:13.5px;line-height:1.65;padding-right:16px;}

/* ---------- 10. FICHA DE PRODUCTO ---------- */
.product{display:grid;grid-template-columns:1.25fr 1fr;border:1px solid var(--line);background:var(--graphite);}
.product-media{position:relative;overflow:hidden;min-height:460px;}
.product-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.86);
  transition:transform 1.4s var(--ease);}
.product:hover .product-media img{transform:scale(1.04);}
.status{position:absolute;top:22px;left:22px;background:rgba(9,9,10,.8);backdrop-filter:blur(8px);
  border:1px solid var(--line-strong);color:var(--sand);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;padding:8px 14px;}
.product-info{padding:52px 46px;display:flex;flex-direction:column;justify-content:center;}
.product-info h3{font-size:clamp(21px,2.3vw,28px);font-weight:400;letter-spacing:-.025em;margin:14px 0 10px;}
.product-loc{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist-dim);}
.specs{margin-top:30px;border-top:1px solid var(--line);}
.specs li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);
  font-size:13.5px;color:var(--mist);}
.specs svg{width:15px;height:15px;color:var(--sand-dim);flex-shrink:0;}

.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:6px;}
.thumbs img{width:100%;height:130px;object-fit:cover;cursor:pointer;filter:saturate(.5) brightness(.78);
  transition:filter .5s ease,transform .8s var(--ease);}
.thumbs img:hover{filter:saturate(.9) brightness(1);transform:scale(1.02);}

/* ---------- 10b. BANDA DE IMAGEN A SANGRE ----------
   Cada banda declara dos imágenes: la definitiva primero y una de
   respaldo después. Si la definitiva no existe todavía, el navegador
   pinta la de respaldo y la web no se ve rota. */
.imgband{position:relative;min-height:62vh;display:flex;align-items:center;overflow:hidden;padding:0;}
.imgband.thin{min-height:36vh;}
.imgband-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  background-repeat:no-repeat;filter:saturate(.55) brightness(.72);
  transform:scale(1.1);transition:transform 2.4s var(--ease),filter 2.4s ease;}
.imgband.visible .imgband-bg{transform:scale(1);filter:saturate(.68) brightness(.86);}
.imgband-veil{position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(9,9,10,.9) 0%,rgba(9,9,10,.62) 34%,rgba(9,9,10,.3) 62%,rgba(9,9,10,.6) 100%);}
.imgband-in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);}
.imgband .quote{font-size:clamp(23px,3.4vw,40px);font-weight:400;letter-spacing:-.03em;
  line-height:1.15;color:var(--bone);max-width:17ch;
  opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease) .15s,transform 1s var(--ease) .15s;}
.imgband.visible .quote{opacity:1;transform:translateY(0);}
.imgband .quote em{font-style:normal;color:var(--sand);}
.imgband p{margin-top:18px;max-width:46ch;font-size:15px;color:#b0b1b5;
  opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease) .3s,transform 1s var(--ease) .3s;}
.imgband.visible p{opacity:1;transform:translateY(0);}
@media(max-width:900px){
  .imgband{min-height:48vh;}
  .imgband.thin{min-height:30vh;}
}

/* ---------- 10c. LANDING: HERO Y MIGAS ---------- */
.lhero{position:relative;min-height:74vh;display:flex;align-items:flex-end;overflow:hidden;padding:0 0 76px;}
.lhero-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  background-repeat:no-repeat;filter:saturate(.6) brightness(.82);
  transform:scale(1.05);animation:heroIn 2.6s var(--ease) forwards;}
.lhero-veil{position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(9,9,10,.94) 0%,rgba(9,9,10,.72) 42%,rgba(9,9,10,.38) 100%);}
.lhero-veil2{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,9,10,.7) 0%,transparent 34%,rgba(9,9,10,.72) 100%);}
.lhero-in{position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);}
.crumbs{display:flex;gap:10px;align-items:center;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mist-dim);margin-bottom:26px;}
.crumbs a:hover{color:var(--sand);}
.crumbs span{color:var(--sand-dim);}
.lhero h1{font-size:clamp(32px,5.4vw,64px);font-weight:600;letter-spacing:-.035em;line-height:1.02;
  color:#fff;max-width:17ch;}
.lhero h1 em{font-style:normal;color:var(--sand);font-weight:200;}
.lhero .lead{margin-top:26px;max-width:52ch;font-size:16px;color:#b8b9bd;}
.lhero .ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:38px;}
@media(max-width:900px){.lhero{min-height:62vh;padding-bottom:56px;}}

/* ---------- 10d. FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:860px;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{padding:22px 0;cursor:pointer;font-size:16px;font-weight:400;color:var(--bone);
  list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  transition:color .3s;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--sand);}
.faq summary::after{content:"+";color:var(--sand-dim);font-size:19px;line-height:1;flex-shrink:0;
  transition:transform .3s var(--ease);}
.faq details[open] summary::after{content:"–";}
.faq details p{padding:0 0 24px;font-size:14.5px;max-width:72ch;color:var(--mist);}
.faq details p + p{padding-top:0;margin-top:-10px;}
.sec-paper .faq{border-top-color:var(--paper-rule);}
.sec-paper .faq details{border-bottom-color:var(--paper-rule);}
.sec-paper .faq summary{color:var(--paper-ink);}
.sec-paper .faq details p{color:var(--paper-mist);}

/* ---------- 11. FORMULARIO ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:90px;}
.cinfo a.row{display:flex;align-items:center;gap:16px;padding:17px 0;border-bottom:1px solid var(--line);
  color:var(--bone);font-size:15px;transition:color .3s;}
.cinfo a.row:first-of-type{border-top:1px solid var(--line);}
.cinfo a.row:hover{color:var(--sand);}
.cinfo svg{width:17px;height:17px;color:var(--sand-dim);}
.cnote{margin-top:28px;font-size:12.5px;color:var(--mist-dim);display:flex;gap:12px;align-items:flex-start;}
.cnote svg{width:15px;height:15px;color:var(--sand-dim);flex-shrink:0;margin-top:3px;}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 8px;}
.chip{border:1px solid var(--line-strong);padding:9px 15px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist);transition:all .3s var(--ease);}
.chip:hover{color:var(--bone);border-color:var(--mist);}
.chip[aria-pressed="true"]{background:var(--sand);border-color:var(--sand);color:var(--ink);}

form{display:flex;flex-direction:column;}
form label{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist-dim);
  margin-top:22px;margin-bottom:9px;}
form input,form select,form textarea{width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--line);color:var(--bone);padding:12px 0;font-family:var(--sans);
  font-size:14.5px;font-weight:300;transition:border-color .35s;}
form input:focus,form select:focus,form textarea:focus{outline:none;border-bottom-color:var(--sand);}
form input::placeholder,form textarea::placeholder{color:var(--mist-dim);}
form select{appearance:none;cursor:pointer;}
form select option{background:var(--graphite);color:var(--bone);}
form textarea{resize:vertical;}
form button[type="submit"]{margin-top:38px;align-self:flex-start;}
.fnote{font-size:11.5px;color:var(--mist-dim);margin-top:20px;}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:30px;font-size:12.5px;color:var(--mist-dim);}
.consent input{width:16px;height:16px;flex-shrink:0;margin-top:2px;accent-color:var(--sand);}
.consent a{color:var(--sand);text-decoration:underline;text-underline-offset:3px;}
/* Campos que solo aparecen según la intención elegida */
.cond{display:none;}
.cond.on{display:block;}
.cond.on.cols2{display:grid;}

/* ---------- 12. LIGHTBOX ---------- */
.lb{position:fixed;inset:0;background:rgba(6,6,7,.97);backdrop-filter:blur(6px);z-index:200;
  display:none;align-items:center;justify-content:center;flex-direction:column;}
.lb.open{display:flex;}
.lb img{max-width:86vw;max-height:76vh;object-fit:contain;}
.lb-cap{margin-top:22px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--sand-dim);}
.lb-count{position:absolute;top:32px;left:36px;font-size:11px;letter-spacing:.2em;color:var(--mist-dim);
  font-variant-numeric:tabular-nums;}
.lb button{position:absolute;color:var(--bone);opacity:.7;transition:opacity .3s;padding:12px;}
.lb button:hover{opacity:1;}
.lb svg{width:26px;height:26px;}
.lb-x{top:24px;right:28px;}
.lb-p{left:22px;top:50%;transform:translateY(-50%);}
.lb-n{right:22px;top:50%;transform:translateY(-50%);}

/* ---------- 13. BARRA MÓVIL ---------- */
.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:rgba(9,9,10,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding:12px 16px;gap:10px;transform:translateY(100%);transition:transform .4s var(--ease);}
.mobilebar.on{transform:translateY(0);}
.mobilebar a{flex:1;justify-content:center;padding:14px 10px;font-size:10.5px;}
.mobilebar a.icon{flex:0 0 52px;}
.mobilebar a.icon svg{width:18px;height:18px;}

/* ---------- 14. FOOTER ---------- */
footer.site{background:var(--ink);border-top:1px solid var(--line);padding:70px 0 40px;
  font-size:12.5px;color:var(--mist-dim);}
.fcols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:44px;padding-bottom:48px;}
.fcols h4{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--sand-dim);
  margin-bottom:18px;font-weight:500;}
.fcols ul{display:flex;flex-direction:column;gap:11px;}
.fcols a{transition:color .3s;}
.fcols a:hover{color:var(--sand);}
.fbrand .brand{margin-bottom:16px;display:block;}
.fbrand p{font-size:13px;max-width:34ch;}
.fbottom{border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;}
.flegal{display:flex;gap:24px;flex-wrap:wrap;}
.flegal a:hover{color:var(--sand);}

/* ---------- 15. ANIMACIÓN DE ENTRADA ---------- */
.reveal{opacity:0;transform:translateY(30px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);}
.reveal.visible{opacity:1;transform:translateY(0);}
.stagger>*{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);}
.stagger.visible>*{opacity:1;transform:translateY(0);}
.stagger.visible>*:nth-child(1){transition-delay:.04s}
.stagger.visible>*:nth-child(2){transition-delay:.09s}
.stagger.visible>*:nth-child(3){transition-delay:.14s}
.stagger.visible>*:nth-child(4){transition-delay:.19s}
.stagger.visible>*:nth-child(5){transition-delay:.24s}
.stagger.visible>*:nth-child(6){transition-delay:.29s}
.stagger.visible>*:nth-child(7){transition-delay:.34s}
.stagger.visible>*:nth-child(8){transition-delay:.39s}
.stagger.visible>*:nth-child(n+9){transition-delay:.44s}

/* ---------- 16. RESPONSIVE ---------- */
@media(max-width:1040px){
  .thumbs{grid-template-columns:repeat(4,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .step{border-right:none;padding-bottom:28px;}
  .fcols{grid-template-columns:1fr 1fr;gap:36px;}
}
@media(max-width:900px){
  :root{--pad:24px;--sec:88px;}
  .navlinks{display:none;}
  .navlinks.open{display:flex;flex-direction:column;align-items:flex-start;position:absolute;
    top:100%;left:0;right:0;background:var(--graphite);border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);padding:26px var(--pad);gap:20px;}
  .burger{display:block;}
  .mobilebar{display:flex;}
  body{padding-bottom:0;}
  .intents{grid-template-columns:1fr;}
  .intent{padding:40px 26px;}
  .compare{grid-template-columns:1fr;}
  .product{grid-template-columns:1fr;}
  .product-media{min-height:290px;}
  .product-info{padding:36px 26px;}
  .form-grid{grid-template-columns:1fr;gap:48px;}
  .chain{flex-direction:column;}
  .link-step{border-right:none;border-bottom:1px solid var(--line);}
  .link-step:last-child{border-bottom:none;}
}
@media(max-width:620px){
  .steps{grid-template-columns:1fr;}
  .thumbs{grid-template-columns:repeat(3,1fr);}
  .thumbs img{height:98px;}
  .cols2{grid-template-columns:1fr;}
  .fcols{grid-template-columns:1fr;}
  .pillars{grid-template-columns:1fr;}
}

/* ---------- 17. ACCESIBILIDAD ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.stagger>*,.hero h1,.hero p,.hero-kicker,.hero-ctas{
    opacity:1!important;transform:none!important;animation:none!important;transition:none!important;}
  .hero-bg{animation:none!important;transform:none!important;}
  .mobilebar{transition:none;}
  *{scroll-behavior:auto!important;}
}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}