/* =====================================================================
   PROYECTO VIDA — Centro de acompañamiento y cambio de hábitos
   Paleta tomada del logo del cliente: azul petróleo + oliva + sol
   ===================================================================== */

:root{
  /* Azul petróleo — el color dominante del isotipo (#0F3D55) */
  --azul-900:#0A2C3E;
  --azul-800:#0F3D55;
  --azul-700:#164C68;
  --azul-500:#2C7396;
  --azul-300:#93BDD3;
  --azul-050:#E9F1F6;

  /* Crema y arena — el fondo del logo y el halo del sol */
  --arena-050:#FBF8F2;
  --arena-100:#F6F0E4;
  --arena-200:#EAE1D0;
  --arena-300:#D9CCB2;

  /* Sol — acento decorativo (rellenos, barras, degradados) */
  --sol:#E0A64A;
  --sol-dark:#8A5B14;
  /* Ocre — la misma familia, oscurecida para TEXTO sobre fondo claro
     (#E0A64A sobre crema da 2,2:1 y no pasa AA) */
  --ocre:#8A5B14;

  /* Oliva — el verde del follaje del logo */
  --oliva:#5E7A3E;
  --oliva-claro:#93AF6B;

  --wa:#25D366;
  --wa-dark:#1EB255;

  --tinta:#16232B;
  --tinta-2:#48565F;
  --linea:rgba(22,35,43,.12);

  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --sombra:0 1px 2px rgba(10,44,62,.06), 0 8px 24px rgba(10,44,62,.09);
  --sombra-lg:0 20px 60px rgba(10,44,62,.18);
  --max:1200px;
  --nav-h:76px;

  --f-disp:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--f-body);font-size:17px;line-height:1.7;
  color:var(--tinta);background:var(--arena-050);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-disp);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.85rem,3.6vw,2.9rem)}
h3{font-size:1.25rem;line-height:1.28}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

.wrap{width:min(100% - 2.5rem,var(--max));margin-inline:auto}
.wrap--narrow{width:min(100% - 2.5rem,840px)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--azul-700);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--sol);outline-offset:3px;border-radius:4px;box-shadow:0 0 0 6px rgba(10,44,62,.35)}

.eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ocre);margin:0 0 .9rem;display:flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor;flex:none}

.i{width:1.15em;height:1.15em;flex:none}

/* ---------------- Botones ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.82rem 1.5rem;border-radius:100px;font-weight:600;font-size:.97rem;
  text-decoration:none;transition:transform .18s,box-shadow .22s,background .22s,color .22s;
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn--lg{padding:1.02rem 1.9rem;font-size:1.03rem}
.btn--full{width:100%}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--wa{background:var(--wa);color:#07321a;box-shadow:0 6px 18px rgba(37,211,102,.35)}
.btn--wa:hover{background:var(--wa-dark);color:#fff;box-shadow:0 12px 28px rgba(37,211,102,.45)}
.btn--wa::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.55) 50%,transparent 75%);
  transform:translateX(-120%);
}
.btn--wa:hover::after{animation:brillo .8s ease}
@keyframes brillo{to{transform:translateX(120%)}}

.btn--ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.5);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:#fff;color:var(--azul-800);border-color:#fff}
.btn--outline{background:transparent;color:var(--azul-800);border:1.5px solid var(--azul-700)}
.btn--outline:hover{background:var(--azul-700);color:#fff}

.link{color:var(--azul-700);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--azul-300);padding-bottom:2px;transition:.2s}
.link:hover{color:var(--ocre);border-color:var(--ocre)}

/* ---------------- Navbar ---------------- */
.nav{position:sticky;top:0;z-index:90;background:rgba(251,247,241,.86);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.28s}
.nav.is-stuck{border-bottom-color:var(--linea);box-shadow:0 4px 24px rgba(18,49,42,.07)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--nav-h)}
/* Marca: isotipo del cliente + tipografía del sitio.
   El lockup completo (img/logo.png) es muy alto para una barra de 76 px;
   partirlo deja el nombre nítido a cualquier tamaño y sin peso extra. */
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand__iso{height:44px;width:44px;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1;font-family:var(--f-disp)}
.brand__txt small{
  font-family:var(--f-body);font-size:.62rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--azul-500);
}
.brand__txt strong{font-size:1.5rem;font-weight:700;letter-spacing:.02em;color:var(--azul-800)}
.brand--foot{margin:0 0 1rem}
.brand--foot .brand__iso{height:50px;width:50px;background:#fff;border-radius:12px;padding:4px}
.brand--foot .brand__txt small{color:var(--azul-300)}
.brand--foot .brand__txt strong{color:#fff}
.nav__links{display:flex;align-items:center;gap:1.6rem}
.nav__links a{text-decoration:none;font-size:.94rem;font-weight:500;color:var(--tinta-2);position:relative;transition:color .2s}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--ocre);transition:width .25s}
.nav__links a:not(.btn):hover{color:var(--azul-800)}
.nav__links a:not(.btn):hover::after{width:100%}
.nav__cta{padding:.62rem 1.15rem;font-size:.9rem}

.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.burger span{width:23px;height:2px;background:var(--azul-800);border-radius:2px;transition:.25s}
.burger.is-x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-x span:nth-child(2){opacity:0}
.burger.is-x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------- Hero ---------------- */
.hero{position:relative;isolation:isolate;min-height:min(88vh,780px);display:flex;align-items:center;padding:5rem 0 4.5rem;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(102deg,rgba(15,42,35,.94) 0%,rgba(18,49,42,.86) 42%,rgba(18,49,42,.42) 72%,rgba(18,49,42,.28) 100%);
}
.hero__in{color:#fff;max-width:720px}
.hero .eyebrow{color:var(--azul-300)}
.hero h1{color:#fff;margin-bottom:1.1rem}
.hero h1 em{font-style:normal;color:var(--azul-300);position:relative}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;background:color-mix(in oklab,var(--sol) 70%,transparent);border-radius:2px;z-index:-1}
.hero__lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:rgba(255,255,255,.88);max-width:56ch;margin-bottom:2.1rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.6rem}
.hero__trust{display:flex;flex-wrap:wrap;gap:1.1rem 2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.18)}
.hero__trust li{display:flex;align-items:center;gap:.55rem;font-size:.92rem;color:rgba(255,255,255,.82)}
.hero__trust .i{color:var(--azul-300)}

/* ---------------- Stats ---------------- */
.stats{background:var(--azul-900);color:#fff;padding:3rem 0}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.stat{text-align:center;padding:0 .5rem;position:relative}
.stat+.stat::before{content:"";position:absolute;left:-1rem;top:.6rem;bottom:.6rem;width:1px;background:rgba(255,255,255,.14)}
.stat__n{font-family:var(--f-disp);font-size:2.9rem;font-weight:700;color:var(--azul-300);line-height:1}
.stat__u{font-family:var(--f-disp);font-size:1.3rem;color:var(--sol);margin-left:.15rem}
.stat p{font-size:.88rem;color:rgba(255,255,255,.72);margin:.6rem 0 0;line-height:1.5}

/* ---------------- Secciones ---------------- */
.sec{padding:5.5rem 0}
.sec--arena{background:var(--arena-100)}
.sec--azul{background:var(--azul-800);color:#fff}
.sec__head{max-width:720px;margin-bottom:3.2rem}
.sec__head--light .sec__lead,.sec--azul p{color:rgba(255,255,255,.82)}
.sec--azul h2,.sec--azul h3{color:#fff}
.sec--azul .eyebrow{color:var(--azul-300)}
.sec__lead{font-size:1.08rem;color:var(--tinta-2);margin:0}

/* ---------------- Cards de servicios ---------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1.5rem}
.card{
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:2rem 1.75rem;display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sombra-lg);border-color:var(--azul-300)}
.card__ico{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:var(--azul-050);color:var(--azul-700);margin-bottom:1.2rem;
}
.card__ico .i{width:26px;height:26px}
.card>p{color:var(--tinta-2);font-size:.97rem}
.card__list{margin:.4rem 0 1.4rem;display:grid;gap:.5rem}
.card__list li{position:relative;padding-left:1.5rem;font-size:.92rem;color:var(--tinta-2)}
.card__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;
  background:var(--oliva);opacity:.85;
}
.card .link{margin-top:auto;align-self:flex-start}

/* ---------------- Pilares del método ---------------- */
.pilares{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.4rem}
.pilar{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);padding:2rem 1.7rem;position:relative;transition:.3s;
}
.pilar:hover{background:rgba(255,255,255,.1);border-color:var(--azul-300);transform:translateY(-4px)}
.pilar__n{
  font-family:var(--f-disp);font-size:2.6rem;font-weight:700;color:var(--sol);
  display:block;line-height:1;margin-bottom:.7rem;opacity:.9;
}
.pilar h3{font-size:1.18rem;margin-bottom:.6rem}
.pilar p{font-size:.94rem;margin:0}

/* ---------------- Galería ---------------- */
.filtros{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}
.chip{
  padding:.52rem 1.1rem;border-radius:100px;background:#fff;border:1.5px solid var(--linea);
  font-size:.88rem;font-weight:500;color:var(--tinta-2);transition:.22s;
}
.chip:hover{border-color:var(--azul-500);color:var(--azul-700)}
.chip.is-on{background:var(--azul-700);border-color:var(--azul-700);color:#fff}

/* Carrusel: pista con scroll nativo + snap. El swipe táctil y el trackpad
   funcionan solos; los botones solo empujan el scroll una "página". */
.carru{position:relative}
.carru__track{
  display:flex;gap:1rem;align-items:start;
  overflow-x:auto;overflow-y:hidden;
  /* Sin scroll-behavior en CSS a propósito: combinado con snap mandatory,
     el motor de snap pelea con el scroll programático y lo deja a mitad de
     camino. El suavizado se pide desde el JS, en cada llamada. */
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:2px 2px 4px;margin:-2px -2px 0;
}
.carru__track::-webkit-scrollbar{display:none}
.carru__track:focus-visible{outline:3px solid var(--ocre);outline-offset:4px;border-radius:var(--r)}

.gal{margin:0;flex:0 0 calc((100% - 3rem) / 4);scroll-snap-align:start}
.gal[hidden]{display:none}

.carru__nav{
  position:absolute;top:calc(50% - 1.6rem);transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;background:#fff;color:var(--azul-800);
  border:1px solid var(--linea);box-shadow:var(--sombra);font-size:1.05rem;
  display:grid;place-items:center;transition:.22s;
}
.carru__nav:hover{background:var(--azul-700);color:#fff;border-color:var(--azul-700)}
.carru__nav[disabled]{opacity:0;pointer-events:none}
.carru__nav--prev{left:-14px}
.carru__nav--next{right:-14px}

.carru__pie{display:flex;align-items:center;gap:1.2rem;margin-top:1.4rem}
.carru__bar{flex:1;height:3px;background:var(--arena-200);border-radius:3px;overflow:hidden}
.carru__bar span{
  display:block;height:100%;width:0;border-radius:3px;
  background:var(--ocre);transition:width .25s ease,margin-left .25s ease;
}
.carru__count{margin:0;font-size:.85rem;color:var(--tinta-2);white-space:nowrap}
.carru__count b{color:var(--azul-800);font-weight:600}
.gal__btn{
  display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
  position:relative;background:var(--arena-200);padding:0;
}
.gal__btn img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gal__btn:hover img{transform:scale(1.07)}
.gal__zoom{
  position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  background:linear-gradient(0deg,rgba(18,49,42,.62),rgba(18,49,42,.12));
  opacity:0;transition:opacity .28s;
}
.gal__zoom .i{width:34px;height:34px}
.gal__btn:hover .gal__zoom,.gal__btn:focus-visible .gal__zoom{opacity:1}
.gal figcaption{font-size:.82rem;color:var(--tinta-2);margin-top:.5rem;padding-left:.15rem}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(10,26,22,.94);display:grid;place-items:center;padding:2rem;backdrop-filter:blur(4px)}
.lb[hidden]{display:none}
.lb__fig{margin:0;max-width:min(92vw,1000px);max-height:86vh;display:flex;flex-direction:column;gap:.9rem}
.lb__fig img{max-height:78vh;width:auto;margin-inline:auto;border-radius:var(--r);box-shadow:var(--sombra-lg)}
.lb__fig figcaption{color:rgba(255,255,255,.82);text-align:center;font-size:.92rem}
.lb__x{position:absolute;top:1.2rem;right:1.5rem;font-size:2.4rem;line-height:1;color:#fff;opacity:.75;width:48px;height:48px}
.lb__x:hover{opacity:1}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.4rem;transition:.22s}
.lb__nav:hover{background:rgba(255,255,255,.25)}
.lb__nav--prev{left:1.2rem}
.lb__nav--next{right:1.2rem}

/* ---------------- Pasos ---------------- */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem}
.paso{background:#fff;border-radius:var(--r-lg);padding:2rem 1.7rem;border:1px solid var(--linea);position:relative;transition:.3s}
.paso:hover{transform:translateY(-5px);box-shadow:var(--sombra-lg)}
.paso__n{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--ocre);color:#fff;font-family:var(--f-disp);font-size:1.35rem;font-weight:700;
  margin-bottom:1.1rem;
}
.paso h3{font-size:1.1rem}
.paso p{font-size:.94rem;color:var(--tinta-2);margin:0}
.pasos__cta{text-align:center;margin-top:3rem}

/* ---------------- Split (qué abordamos) ---------------- */
.sec--split{background:var(--arena-050);padding:5.5rem 0}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center}
.split__txt p{color:var(--tinta-2)}
.split__img img{border-radius:var(--r-lg);box-shadow:var(--sombra-lg);width:100%;aspect-ratio:4/5;object-fit:cover}
.tags{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.6rem 0}
.tags li{
  padding:.42rem 1rem;border-radius:100px;background:var(--azul-050);
  color:var(--azul-700);font-size:.88rem;font-weight:500;border:1px solid rgba(62,142,114,.22);
}
.nota{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;background:#fff;border-left:3px solid var(--ocre);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:1rem 1.2rem;margin:0}
.nota .i{color:var(--ocre);margin-top:.2em}

/* ---------------- FAQ ---------------- */
.faq{display:grid;gap:.8rem}
.faq__item{background:#fff;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;transition:border-color .25s}
.faq__item[open]{border-color:var(--azul-300);box-shadow:var(--sombra)}
.faq__item summary{
  list-style:none;cursor:pointer;padding:1.25rem 3.2rem 1.25rem 1.5rem;
  font-weight:600;font-size:1.02rem;position:relative;color:var(--azul-900);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__ico{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);width:16px;height:16px}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;background:var(--ocre);border-radius:2px;transition:.28s}
.faq__ico::before{left:0;top:7px;width:16px;height:2px}
.faq__ico::after{left:7px;top:0;width:2px;height:16px}
.faq__item[open] .faq__ico::after{transform:rotate(90deg);opacity:0}
.faq__a{padding:0 1.5rem 1.4rem}
.faq__a p{margin:0;color:var(--tinta-2);font-size:.97rem}

/* ---------------- Contacto ---------------- */
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.datos{display:grid;gap:1.2rem;margin-top:2rem}
.datos li{display:flex;gap:1rem;align-items:flex-start}
.datos .i{width:22px;height:22px;color:var(--azul-300);margin-top:.25rem}
.datos span{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.55)}
.datos a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.datos a:hover{border-color:var(--azul-300)}
.datos div{color:rgba(255,255,255,.9)}

/* Tarjeta de contacto — reemplaza al formulario: no había casilla de mail
   a la que enviarlo y el envío terminaba abriendo WhatsApp igual. */
.tarjeta{
  background:#fff;border-radius:var(--r-xl);padding:2.4rem 2.1rem;
  box-shadow:var(--sombra-lg);color:var(--tinta);position:sticky;top:calc(var(--nav-h) + 1.5rem);
  /* La tarjeta es una isla clara adentro de una seccion oscura: se le
     reasigna el acento a la variante para fondo claro. Los selectores de
     abajo llevan .tarjeta adelante para ganarle a `.sec--azul p`, que si no
     deja el texto blanco sobre blanco. */
  --acento-txt:var(--ocre);
}
.tarjeta .tarjeta__eyebrow{
  font-family:var(--f-body);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ocre);margin:0 0 .5rem;
}
.tarjeta h3{color:var(--azul-900);font-size:1.45rem;margin-bottom:.6rem}
.tarjeta .tarjeta__p{color:var(--tinta-2);font-size:.97rem;margin-bottom:1.5rem}
.tarjeta .btn{margin-bottom:.7rem}
.tarjeta .btn--outline{color:var(--azul-800);border-color:var(--arena-300)}
.tarjeta .btn--outline:hover{background:var(--azul-050);border-color:var(--azul-300)}
.tarjeta__lista{display:grid;gap:.75rem;margin:1.6rem 0 0;padding-top:1.5rem;border-top:1px solid var(--linea)}
.tarjeta .tarjeta__lista li{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--tinta-2)}
.tarjeta__lista .i{color:var(--acento-txt);flex:none;margin-top:.15em}
.tarjeta .tarjeta__nota{font-size:.85rem;color:var(--tinta-2);text-align:center;margin:1.4rem 0 0}
.tarjeta .tarjeta__nota a{color:var(--azul-700);font-weight:600}

/* ---------------- CTA final ---------------- */
.cta{background:linear-gradient(135deg,var(--oliva) 0%,#38512A 100%);color:#fff;padding:4.5rem 0;text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;top:-40%;right:-10%;width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,.07)}
.cta__in{position:relative}
.cta h2{color:#fff;margin-bottom:.6rem}
.cta p{color:rgba(255,255,255,.9);max-width:56ch;margin-inline:auto;margin-bottom:2rem}
.cta__btns{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.cta .btn--outline{color:#fff;border-color:rgba(255,255,255,.65)}
.cta .btn--outline:hover{background:#fff;color:var(--sol-dark);border-color:#fff}

/* ---------------- Bandas de transición ---------------- */
.banda{position:relative;isolation:isolate;min-height:320px;display:grid;align-items:center;overflow:hidden}
.banda__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.banda::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(10,44,62,.93) 0%,rgba(10,44,62,.78) 46%,rgba(10,44,62,.38) 100%);
}
.banda__in{padding:3.2rem 0;color:#fff}
.banda__t{
  font-family:var(--f-disp);font-size:clamp(1.5rem,3vw,2.35rem);font-weight:600;
  line-height:1.15;letter-spacing:-.015em;margin:0 0 .5rem;max-width:20ch;
}
.banda__s{color:rgba(255,255,255,.86);max-width:46ch;margin:0;font-size:1.02rem}

/* ---------------- Método: mosaico + encabezado ---------------- */
.metodo__intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:center;margin-bottom:3.5rem}
.sec__head--izq{text-align:left;margin:0;max-width:none}
.mosaico{position:relative;padding-bottom:3.5rem;padding-right:2.5rem}
.mosaico__a{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-lg);box-shadow:var(--sombra-lg);
}
.mosaico__b{
  position:absolute;right:0;bottom:0;width:52%;aspect-ratio:1;object-fit:cover;
  border-radius:var(--r-lg);border:5px solid var(--azul-800);box-shadow:var(--sombra-lg);
}

/* ---------------- Acompañamos: foto chica junto a la nota ---------------- */
.nota-foto{display:flex;gap:1.1rem;align-items:stretch}
.nota-foto img{
  width:112px;height:auto;aspect-ratio:1;align-self:flex-start;flex:none;object-fit:cover;
  border-radius:var(--r-sm);box-shadow:var(--sombra);
}
.nota-foto .nota{flex:1}

/* ---------------- Pasos: bloque de cierre con foto ---------------- */
.pasos__final{
  display:grid;grid-template-columns:.42fr .58fr;gap:2.5rem;align-items:center;
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-xl);
  padding:1.1rem;margin-top:3rem;box-shadow:var(--sombra);
}
.pasos__final img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg)}
.pasos__final-txt{padding:.5rem 1.5rem .5rem 0}
.pasos__final-txt h3{font-size:1.5rem;margin-bottom:.5rem}
.pasos__final-txt p{color:var(--tinta-2);margin-bottom:1.5rem}

/* ---------------- CTA final: foto bajo el degradado ---------------- */
.cta__foto{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:.2;mix-blend-mode:luminosity;
  /* La foto original mide 540 px y acá se estira a todo el ancho. Va
     desenfocada a propósito: es una textura, no una imagen que se mire.
     El scale evita que el blur deje los bordes transparentes. */
  filter:blur(3px);scale:1.06;
}
.cta::before{z-index:1}
.cta__in{z-index:2}

/* ---------------- Footer ---------------- */
.foot{background:var(--azul-900);color:rgba(255,255,255,.72);padding-top:4rem;font-size:.93rem}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:2.5rem}
.foot__brand p{max-width:34ch;margin:0}
.foot__col h3{color:#fff;font-size:.95rem;font-family:var(--f-body);font-weight:700;letter-spacing:.04em;margin-bottom:1rem}
.foot__col a,.foot__col span{display:block;text-decoration:none;margin-bottom:.55rem;transition:color .2s}
.foot__col a:hover{color:var(--azul-300)}
.foot__aviso{padding:1.5rem 0;border-top:1px solid rgba(255,255,255,.1)}
.foot__aviso p{font-size:.85rem;color:rgba(255,255,255,.55);margin:0}
.foot__aviso strong{color:rgba(255,255,255,.8)}
.foot__bar{background:rgba(0,0,0,.22);padding:1.1rem 0;margin-top:.5rem}
.foot__bar-in{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.83rem;color:rgba(255,255,255,.5)}
.foot__bar a{color:var(--azul-300);text-decoration:none;font-weight:600}

/* ---------------- WhatsApp flotante ---------------- */
.wa-float{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:95;display:flex;align-items:center;gap:.6rem;
  background:var(--wa);color:#07321a;padding:.85rem 1.15rem;border-radius:100px;text-decoration:none;
  font-weight:700;font-size:.94rem;box-shadow:0 10px 30px rgba(37,211,102,.42);transition:.25s;
}
.wa-float .i{width:26px;height:26px}
.wa-float:hover{background:var(--wa-dark);color:#fff;transform:translateY(-3px) scale(1.03)}
.wa-float::before{
  content:"";position:absolute;inset:0;border-radius:100px;border:2px solid var(--wa);
  animation:pulso 2.4s ease-out infinite;
}
@keyframes pulso{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}

/* ---------------- Reveal ---------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}
.card.reveal,.pilar.reveal,.paso.reveal,.stat.reveal{transition-delay:.05s}
.cards .card:nth-child(2).reveal,.pilares .pilar:nth-child(2).reveal,.pasos .paso:nth-child(2).reveal{transition-delay:.12s}
.cards .card:nth-child(3).reveal,.pilares .pilar:nth-child(3).reveal,.pasos .paso:nth-child(3).reveal{transition-delay:.19s}
.cards .card:nth-child(4).reveal,.pilares .pilar:nth-child(4).reveal,.pasos .paso:nth-child(4).reveal{transition-delay:.26s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------------- Responsive ---------------- */
@media (max-width:1100px){
  .gal{flex:0 0 calc((100% - 2rem) / 3)}
}

@media (max-width:1280px){
  .carru__nav--prev{left:6px}
  .carru__nav--next{right:6px}
}

@media (max-width:1000px){
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
  .stat:nth-child(3)::before{display:none}
  .metodo__intro{grid-template-columns:1fr;gap:2.4rem}
  .mosaico{padding-bottom:2.6rem;padding-right:2rem;width:min(100%,420px);justify-self:center}
  .pasos__final{grid-template-columns:1fr;gap:1.4rem}
  .pasos__final img{aspect-ratio:16/10}
  .pasos__final-txt{padding:0 1rem 1.2rem}
  .nota-foto img{width:88px}
  .banda{min-height:260px}
  .banda::after{background:linear-gradient(100deg,rgba(10,44,62,.93) 0%,rgba(10,44,62,.8) 100%)}
  .split{grid-template-columns:1fr;gap:2.2rem}
  .split__img{order:-1}
  .split__img img{aspect-ratio:16/10}
  .contacto{grid-template-columns:1fr;gap:2.5rem}
  .foot__grid{grid-template-columns:1fr 1fr;gap:2rem}
}

@media (max-width:860px){
  .burger{display:flex}
  .nav__links{
    position:fixed;top:var(--nav-h);left:0;right:0;background:var(--arena-050);
    flex-direction:column;align-items:stretch;gap:0;padding:1rem 1.25rem 1.6rem;
    border-bottom:1px solid var(--linea);box-shadow:0 16px 40px rgba(18,49,42,.12);
    transform:translateY(-120%);opacity:0;pointer-events:none;transition:.3s;
    max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
  }
  .nav__links.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav__links a:not(.btn){padding:.85rem .25rem;border-bottom:1px solid var(--linea);font-size:1rem}
  .nav__links a:not(.btn)::after{display:none}
  .nav__cta{margin-top:1rem;justify-content:center;padding:.9rem 1.2rem}
}

@media (max-width:640px){
  body{font-size:16px}
  .sec{padding:3.8rem 0}
  .hero{min-height:auto;padding:3.5rem 0 3rem}
  .hero__cta .btn{width:100%}
  .hero__trust{gap:.8rem 1.2rem}
  .stats{padding:2.4rem 0}
  .stat__n{font-size:2.3rem}
  .stat+.stat::before{display:none}
  .carru__track{gap:.7rem}
  .gal{flex:0 0 calc((100% - .7rem) / 2 - .4rem)}
  .carru__nav{width:40px;height:40px}
  .carru__pie{gap:.9rem;margin-top:1.1rem}
  .carru__count{font-size:.8rem}
  .tarjeta{padding:1.8rem 1.4rem;position:static}
  .cta__btns .btn{width:100%}
  .foot__grid{grid-template-columns:1fr;gap:1.8rem}
  .lb__nav{width:44px;height:44px}
  .lb__nav--prev{left:.4rem}
  .lb__nav--next{right:.4rem}
  .wa-float__txt{display:none}
  .wa-float{padding:1rem;right:1rem;bottom:1rem}
}


/* =====================================================================
   CAPA MODERNA
   Todo lo de acá se apoya en los TRES colores del logo:
   azul petróleo (--azul-*), oliva (--oliva) y sol (--sol / --ocre).
   Cada bloque nuevo va dentro de un @supports, así un navegador viejo
   ve el sitio de siempre en vez de una sección rota.
   ===================================================================== */

/* ---- 1. Acento por sección --------------------------------------------
   En vez de pintar todo de azul, cada sección declara su propio acento y
   los componentes lo leen. Cambiar el color de una sección es una línea. */
:root{
  --acento:var(--azul-700);
  --acento-txt:var(--azul-700);
  --acento-suave:var(--azul-050);
  accent-color:var(--azul-700);
}
#programas    {--acento:var(--oliva);   --acento-txt:#4A6330; --acento-suave:#EEF3E5}
#metodo       {--acento:var(--sol);     --acento-txt:#F2CD91; --acento-suave:rgba(224,166,74,.16)}
#instalaciones{--acento:var(--azul-500);--acento-txt:var(--azul-700); --acento-suave:var(--azul-050)}
#acompanamos  {--acento:var(--sol);     --acento-txt:var(--ocre); --acento-suave:#FBF2E1}
#pasos        {--acento:var(--ocre);    --acento-txt:var(--ocre); --acento-suave:#F8EFDD}
#faq          {--acento:var(--azul-500);--acento-txt:var(--azul-700); --acento-suave:var(--azul-050)}
#contacto     {--acento:var(--sol);     --acento-txt:#F2CD91; --acento-suave:rgba(224,166,74,.16)}
.cta          {--acento:var(--sol);     --acento-txt:#F4DAAE}

/* Con color-mix el tinte suave se calcula solo a partir del acento. */
@supports (color: color-mix(in oklab, red, blue)){
  :root{--acento-suave:color-mix(in oklab, var(--acento) 13%, var(--arena-050))}
  #metodo, #contacto{--acento-suave:color-mix(in oklab, var(--acento) 18%, transparent)}
}

.eyebrow,
.sec--azul .eyebrow,
.hero .eyebrow{color:var(--acento-txt)}
.card__ico{color:var(--acento)}
.card__list li::before{background:var(--acento)}
.stat__u{color:var(--sol)}
.pilar__n{color:var(--acento)}
.paso__n{background:var(--acento)}
.nota{border-left-color:var(--acento)}
.nota .i{color:var(--acento-txt)}
.faq__ico::before,.faq__ico::after{background:var(--acento-txt)}
.carru__bar span{background:var(--acento)}
.link:hover{color:var(--acento-txt);border-color:var(--acento-txt)}
.tags li{background:var(--acento-suave)}

/* ---- 2. Fondos de malla en las secciones oscuras ----------------------
   Tres focos de luz: azul medio, oliva y sol. Es el degradado del logo
   (cielo, follaje y sol) trasladado al fondo. */
@supports (color: color-mix(in oklab, red, blue)){
  .stats, .sec--azul{
    background-image:
      radial-gradient(80ch 50ch at 8% -20%,  color-mix(in oklab,var(--azul-500) 46%,transparent), transparent 70%),
      radial-gradient(64ch 44ch at 94% 4%,   color-mix(in oklab,var(--oliva)    32%,transparent), transparent 66%),
      radial-gradient(56ch 38ch at 68% 118%, color-mix(in oklab,var(--sol)      20%,transparent), transparent 70%);
  }
  .hero__bg::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(46ch 34ch at 88% 6%, color-mix(in oklab,var(--sol) 42%,transparent), transparent 68%);
    mix-blend-mode:screen;pointer-events:none;
  }
}

/* ---- 3. Degradado del CTA girando muy despacio ------------------------ */
@property --gir{syntax:"<angle>";inherits:false;initial-value:135deg}
.cta{background:linear-gradient(var(--gir), var(--oliva) 0%, #2F4823 55%, var(--azul-800) 100%)}
@media (prefers-reduced-motion: no-preference){
  .cta{animation:girar 26s linear infinite}
}
@keyframes girar{to{--gir:495deg}}

/* ---- 4. Animaciones atadas al scroll, sin JavaScript ------------------ */
.progreso{
  position:fixed;inset:0 0 auto;height:3px;z-index:120;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--azul-500),var(--oliva),var(--sol));
}
@supports (animation-timeline: scroll()){
  .progreso{animation:barra linear both;animation-timeline:scroll(root block)}
}
@keyframes barra{to{transform:scaleX(1)}}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .banda__in,.mosaico,.pasos__final,.nota-foto,.split__img{
      animation:asoma both ease-out;
      animation-timeline:view();
      animation-range:entry 10% cover 32%;
    }
    .banda__bg{
      animation:acerca both linear;
      animation-timeline:view();
      animation-range:entry cover 100%;
    }
  }
}
@keyframes asoma{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
@keyframes acerca{from{scale:1.16}to{scale:1}}

/* ---- 5. Acordeón de FAQ animado con ::details-content ----------------- */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq__item::details-content{
    block-size:0;overflow:clip;opacity:0;
    transition:block-size .38s ease, opacity .3s ease, content-visibility .38s allow-discrete;
  }
  .faq__item[open]::details-content{block-size:auto;opacity:1}
}

/* ---- 6. :has() — estados que antes pedían JavaScript ------------------ */
.card:has(.link:hover){border-color:var(--acento);transform:translateY(-6px);box-shadow:var(--sombra-lg)}
.nav:has(#menu.is-open){background:var(--arena-050)}
.banda:has(.banda__bg[src*="entrevista"])::after{
  background:linear-gradient(100deg,rgba(10,44,62,.92) 0%,rgba(10,44,62,.7) 52%,rgba(94,122,62,.5) 100%);
}

/* ---- 7. Sintaxis de color relativa para los hover --------------------- */
@supports (color: oklch(from red l c h)){
  .btn--wa:hover{background:oklch(from var(--wa) calc(l - .07) c h)}
  .card:hover{border-color:oklch(from var(--acento) l c h / .55)}
  .pilar:hover{border-color:oklch(from var(--sol) l c h / .5)}
}

/* ---- 8. Detalles finos ------------------------------------------------ */
h1,h2,h3,.banda__t{text-wrap:balance}
p,.sec__lead,.banda__s{text-wrap:pretty}
::selection{background:var(--sol);color:var(--azul-900)}
html{scrollbar-color:var(--azul-300) var(--arena-100)}
#faq{content-visibility:auto;contain-intrinsic-size:auto 820px}
.btn--wa{box-shadow:0 6px 18px color-mix(in oklab,var(--wa) 34%,transparent)}
.gal img{transition:scale .4s ease, filter .4s ease}
.gal:hover img{scale:1.04;filter:saturate(1.08)}

@media (prefers-reduced-motion: reduce){
  .cta{animation:none}
  .banda__in,.mosaico,.pasos__final,.nota-foto,.split__img,.banda__bg,.progreso{animation:none}
  .gal:hover img{scale:1}
}