:root{
  /* ===== Paleta oficial Nutraline (definitiva) =====
     Petróleo #15414A — Base 60%   ·  Crema #EDE7D6 — Fondo 30%  ·  Naranja #F39200 — Energía 10% (SOLO CTA)
     Aqua #CDDDD9 y Sage #8B9A6B — Apoyo  ·  Carbón #232826 — Texto */
  --petroleo:#15414a;
  --crema:#ede7d6;
  --naranja:#f39200;
  --aqua:#cdddd9;
  --sage:#8b9a6b;
  --carbon:#232826;

  /* Tonos derivados (solo variaciones de la misma paleta) */
  --petroleo-dark:#0e2f36;   /* hover / fondos más profundos */
  --petroleo-deep:#123840;
  --naranja-dark:#d97f00;    /* hover CTA */
  --naranja-light:#ffb03f;   /* brillo del degradado del CTA */
  --line:rgba(21,65,74,.12); /* bordes y divisores sobre fondo claro */

  /* Alias usados en todo el CSS (apuntan a la paleta) */
  --green:var(--petroleo);
  --green-dark:var(--petroleo-dark);
  --green-deep:var(--petroleo-deep);
  --accent:var(--aqua);
  --cta:var(--naranja);
  --cta-dark:var(--naranja-dark);
  --text:var(--carbon);
  --heading:var(--carbon);
  --light:var(--crema);
  --white:#fff;
  --radius:14px;
  --shadow:0 18px 40px rgba(35,40,38,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--text);line-height:1.7;background:var(--light)}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{width:min(1400px,92%);margin:0 auto}
h1,h2,h3,h4{font-family:'Inter',sans-serif;color:var(--heading);line-height:1.2}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.7rem;border-radius:50px;font-weight:600;font-size:.95rem;transition:.3s;cursor:pointer;border:2px solid transparent}
.btn--primary{background:var(--cta);color:#fff}
.btn--primary:hover{background:var(--cta-dark);transform:translateY(-3px)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--ghost:hover{background:#fff;color:var(--green-dark)}
.btn--light{background:#fff;color:var(--green-dark)}
.btn--light:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

/* Site header — navbar flotante (se oculta al bajar, aparece al subir) */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;padding:1.1rem 0;transition:transform .45s ease}
.site-header.nav-hidden{transform:translateY(-160%)}

/* Navbar flotante (píldora glass oscura) */
.navbar{position:relative;width:min(1320px,94%);margin:0 auto;border-radius:46px;background:rgba(21,65,74,.55);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);border:1px solid rgba(255,255,255,.15);box-shadow:0 12px 34px rgba(0,0,0,.18);transition:background .35s}
.site-header.scrolled .navbar{background:rgba(14,47,54,.88)}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem .5rem 1.7rem}
.logo{position:relative;color:#fff;display:flex;align-items:center;gap:.55rem}
.logo__img{height:42px;width:auto;display:block}
.logo__img--dark{display:none}
.logo__mark{width:38px;height:38px;flex:0 0 auto}
.logo__mark polygon{stroke:var(--green)}
.logo__text{font-family:'Inter',sans-serif;font-weight:800;font-style:italic;font-size:1.5rem;letter-spacing:.5px;line-height:1}
.logo--light{color:#fff}
.nav{display:flex;gap:1.8rem;margin-left:auto;margin-right:1.5rem}
.header__cta{padding:.6rem 1.3rem;font-size:.88rem}
.nav a{font-weight:500;color:#fff;position:relative;transition:.3s;white-space:nowrap}
.nav a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--accent);transition:.3s}
.nav a:hover{color:var(--accent)}
.nav a:hover::after{width:100%}
.nav a.is-current{color:var(--cta)}
.nav a.is-current::after{width:100%;background:var(--cta)}
.nav-toggle{display:none;background:none;border:none;font-size:1.5rem;color:#fff;cursor:pointer}
.nav-overlay{display:none}

/* Hero */
/* Hero — full viewport, parallax, large display typography */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;color:#fff;overflow:hidden;padding:0}
.hero__bg{position:absolute;left:0;right:0;top:-200px;bottom:-200px;z-index:0;background:url('../img/header-l-3.webp') 75% center/cover no-repeat scroll;will-change:transform}
.hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,47,54,.6) 0%,rgba(21,65,74,.3) 40%,rgba(14,47,54,.55) 100%)}
.hero__content{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;padding:clamp(7rem,10vh,9rem) 0 clamp(2rem,4vh,3.5rem)}
.hero__top{display:flex;flex-direction:column;gap:.6rem;padding-left:clamp(20px,5vw,100px)}
.hero__badge{display:inline-flex;align-items:center;gap:.6rem;border:1px solid rgba(255,255,255,.35);border-radius:50px;padding:clamp(.4rem,0.6vh,.65rem) clamp(1rem,1.5vw,1.6rem);font-size:clamp(.65rem,0.85vw,.9rem);font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.92);width:fit-content}
.hero__badge i{color:var(--accent)}
.hero__eyebrow{font-size:clamp(.65rem,0.8vw,.85rem);font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hero__headline{flex:1;display:flex;flex-direction:column;justify-content:center;padding-left:clamp(20px,5vw,100px)}
.hero h1{font-family:'Inter',sans-serif;font-weight:900;font-size:clamp(2.55rem,6.6vw,8.5rem);color:#fff;line-height:.95;text-shadow:0 4px 40px rgba(0,0,0,.3);letter-spacing:-2px}
.hero__sub{max-width:540px;font-size:clamp(.98rem,1.15vw,1.2rem);color:rgba(255,255,255,.72);line-height:1.7;margin-top:clamp(1rem,1.8vh,1.6rem)}
.hero__bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;padding-left:clamp(20px,5vw,100px);padding-right:clamp(20px,5vw,100px)}
.hero__actions{display:flex;align-items:center;gap:clamp(1rem,1.5vw,1.8rem);flex-wrap:wrap}
.hero__actions .btn{font-size:clamp(.9rem,1.1vw,1.15rem);padding:clamp(.75rem,1.1vh,1rem) clamp(1.8rem,2.5vw,3rem)}
.hero__actions .btn--primary{background:linear-gradient(135deg,var(--naranja-light) 0%,var(--naranja) 55%,var(--naranja-dark) 100%);border:1px solid rgba(255,190,110,.65);box-shadow:0 0 0 1px rgba(255,178,64,.2),0 10px 26px rgba(243,146,0,.4),0 0 20px rgba(255,178,64,.35);transition:box-shadow .3s,transform .3s;position:relative;overflow:hidden;z-index:1}
.hero__actions .btn--primary::before{content:'';position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from 0deg,transparent 0%,transparent 70%,rgba(255,255,255,.9) 78%,#fff 82%,rgba(255,255,255,.9) 86%,transparent 94%,transparent 100%);z-index:-1;opacity:0;animation:luz-outline 5s ease-in-out infinite}
.hero__actions .btn--primary::after{content:'';position:absolute;inset:2px;border-radius:inherit;background:linear-gradient(135deg,var(--naranja-light) 0%,var(--naranja) 55%,var(--naranja-dark) 100%);z-index:-1}
@keyframes luz-outline{0%{opacity:0;transform:rotate(0deg)}8%{opacity:1}25%{opacity:1;transform:rotate(360deg)}33%{opacity:0;transform:rotate(360deg)}100%{opacity:0;transform:rotate(360deg)}}
.hero__actions .btn--primary:hover{box-shadow:0 0 0 1px rgba(255,178,64,.35),0 12px 32px rgba(243,146,0,.5),0 0 28px rgba(255,178,64,.5);transform:translateY(-2px)}
.hero__sidenote{max-width:clamp(280px,22vw,400px);font-size:clamp(.8rem,0.95vw,1rem);color:rgba(255,255,255,.75);line-height:1.55;text-align:right}
.hero__sidenote span{color:var(--cta);font-weight:700;margin-right:.4rem}
.hero__video-text{font-weight:600;font-size:.9rem;line-height:1.2}

/* Propósito */
.proposito{position:relative;background:var(--petroleo);color:#fff;padding:clamp(5rem,8vw,8rem) 0 0;overflow:hidden}
.proposito__band{position:relative;overflow:hidden;padding:clamp(2rem,4vw,4rem) 0 clamp(4rem,6vw,7rem)}
.proposito__bg-text{position:absolute;top:50%;left:0;transform:translateY(-50%);white-space:nowrap;display:flex;pointer-events:none;opacity:.08;font-family:'Inter',sans-serif;font-weight:900;font-size:clamp(5rem,10vw,12rem);text-transform:uppercase;letter-spacing:-3px;color:#fff;z-index:0}
.proposito__bg-text span{display:inline-block;animation:marquee-bg 90s linear infinite}
@keyframes marquee-bg{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.proposito__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,4vw,6rem);align-items:center;padding-bottom:0}
.proposito__left{display:flex;flex-direction:column;gap:clamp(.8rem,1.2vw,1.5rem)}
.section-tag--dark{display:inline-block;background:transparent;color:rgba(255,255,255,.85);border:none;padding:0;font-size:clamp(.7rem,.8vw,.82rem);letter-spacing:1.8px;width:fit-content;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:.3rem;margin-bottom:clamp(1rem,1.8vw,2rem)}
.proposito__left h2{font-size:clamp(2.2rem,4.2vw,4.5rem);color:#fff;line-height:1.08;font-weight:800;letter-spacing:-.06em;transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.js .proposito__left h2.is-visible{opacity:1;transform:none}
.js .proposito__left h2{opacity:0;transform:translateY(40px)}
.proposito__left h2 .word{display:inline-block}
.js .proposito__left h2 .word{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.js .proposito__left h2.is-visible .word{opacity:1;transform:none}
.proposito__right{display:flex;flex-direction:column;padding-top:0}
.proposito__cta-row{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,4vw,6rem);margin-top:clamp(1.5rem,2.2vw,2.5rem)}
.proposito__cta-row .btn{grid-column:2}
.proposito__right p{font-size:clamp(.92rem,1.05vw,1.12rem);line-height:1.85;color:rgba(255,255,255,.85)}
.btn--dark{display:inline-flex;align-items:center;gap:.5rem;padding:clamp(.7rem,.9vw,1rem) clamp(1.5rem,2.2vw,2.6rem);border-radius:50px;font-weight:600;font-size:clamp(.85rem,.95vw,1rem);background:linear-gradient(135deg,var(--naranja-light) 0%,var(--naranja) 55%,var(--naranja-dark) 100%);color:#fff;border:1px solid rgba(255,190,110,.65);box-shadow:0 10px 26px rgba(243,146,0,.35);transition:box-shadow .3s,transform .3s;width:fit-content;cursor:pointer;position:relative;overflow:hidden;z-index:1}
.btn--dark::before{content:'';position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from 0deg,transparent 0%,transparent 70%,rgba(255,255,255,.9) 78%,#fff 82%,rgba(255,255,255,.9) 86%,transparent 94%,transparent 100%);z-index:-1;opacity:0;animation:luz-outline 5s ease-in-out infinite}
.btn--dark::after{content:'';position:absolute;inset:2px;border-radius:inherit;background:linear-gradient(135deg,var(--naranja-light) 0%,var(--naranja) 55%,var(--naranja-dark) 100%);z-index:-1}
.btn--dark:hover{box-shadow:0 12px 32px rgba(243,146,0,.5);transform:translateY(-2px)}
.proposito__marquee{position:relative;z-index:2}
.proposito__marquee-label{text-align:center;font-size:clamp(1.3rem,2vw,1.8rem);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:clamp(.8rem,1.2vh,1.2rem)}
.proposito__circles--static{display:flex;align-items:center;justify-content:center;width:100%;gap:12px;padding:0}
.proposito__pair{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.proposito__circle{border-radius:50%;overflow:hidden;flex-shrink:0;border:3px solid rgba(255,255,255,.25);background:#fff;display:flex;align-items:center;justify-content:center;transition:transform .5s cubic-bezier(.25,.46,.45,.94),border-color .4s,box-shadow .4s;will-change:transform}
.proposito__circle--lg{width:clamp(100px,12vw,210px);height:clamp(100px,12vw,210px);flex-shrink:0}
.proposito__circle--sm{width:clamp(60px,6vw,100px);height:clamp(60px,6vw,100px);flex-shrink:0}
.proposito__circle:hover{transform:translateY(-12px) scale(1.12);border-color:rgba(255,255,255,.7);box-shadow:0 20px 40px rgba(0,0,0,.18)}
.proposito__circle img{width:78%;height:78%;object-fit:contain;transition:transform .5s cubic-bezier(.25,.46,.45,.94)}
.proposito__circle:hover img{transform:scale(1.1)}
@media(max-width:768px){
  .proposito__grid{grid-template-columns:1fr;gap:1.5rem}
  .proposito__cta-row{grid-template-columns:1fr}
  .proposito__cta-row .btn{grid-column:1;white-space:nowrap}
  .proposito__circles--static{justify-content:center;gap:4px;padding:0 5px}
  .proposito__pair{gap:3px}
  .proposito__circle--lg{width:12vw;height:12vw}
  .proposito__circle--sm{width:6.5vw;height:6.5vw}
}

/* Features */
.features{margin-top:-70px;position:relative;z-index:5}
.features__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.feature-card{background:#fff;border-radius:var(--radius);padding:2.2rem;box-shadow:var(--shadow);text-align:center;transition:.3s}
.feature-card:hover{transform:translateY(-8px)}
.feature-card i{font-size:2.4rem;color:var(--green);margin-bottom:1rem}
.feature-card--accent{background:var(--green);color:#fff}
.feature-card--accent i,.feature-card--accent h3{color:#fff}
.feature-card--accent p{color:var(--aqua)}
.feature-card h3{margin-bottom:.6rem;font-size:1.25rem}

/* Section heads */
.section-tag{display:inline-block;color:var(--green);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;font-size:.8rem;margin-bottom:.6rem;background:rgba(21,65,74,.09);padding:.3rem .9rem;border-radius:50px}
.section-tag--light{color:var(--accent);background:rgba(139,154,107,.16)}
.section-head{text-align:center;max-width:600px;margin:0 auto 3rem}
.section-head h2{font-size:clamp(1.5rem,4vw,2.6rem)}
.section-head--left{text-align:left;max-width:560px;margin:0 0 3rem}
.section-head--wide{text-align:left;max-width:66%;margin:0 0 3rem}
.section-head--wide h2{font-size:clamp(1.8rem,4.5vw,3.2rem)}
.section-head--row{display:flex;justify-content:space-between;align-items:flex-end;text-align:left;max-width:none;gap:2rem;flex-wrap:wrap}
.section-head--row h2{font-size:clamp(1.5rem,4vw,2.6rem)}
section{padding:5.5rem 0}

/* Page hero (banda superior de páginas internas) */
.page-hero{position:relative;padding:9.5rem 0 4.5rem;background:linear-gradient(135deg,var(--petroleo-dark) 0%,var(--petroleo) 100%);color:#fff;overflow:hidden}
.page-hero .section-tag{background:rgba(255,255,255,.14);color:#fff}
.page-hero h1{color:#fff;font-size:clamp(2rem,4.6vw,3.1rem);margin:.7rem 0 1.2rem;max-width:820px;line-height:1.18}
.page-hero p{max-width:680px;font-size:1.05rem;line-height:1.75;color:rgba(255,255,255,.88)}
.page-hero .btn-row{display:flex;gap:1rem;margin-top:1.8rem;flex-wrap:wrap}
.page-hero .chip-list span{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);}
@media(max-width:768px){.page-hero{padding:7.5rem 0 3rem}}

/* Bloque de texto genérico (páginas internas) */
.text-block{max-width:760px}
.js .text-block{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .text-block.is-visible{opacity:1;transform:none}
.text-block + .text-block{margin-top:3rem}
.text-block h2{font-size:clamp(1.4rem,3.4vw,2rem);margin-bottom:.8rem}
.text-block p{color:var(--text);line-height:1.75}

/* Chips (categorías / público objetivo) */
.chip-list{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.chip-list span{display:inline-block;background:rgba(21,65,74,.08);color:var(--green);font-weight:600;font-size:.88rem;padding:.5rem 1.1rem;border-radius:50px}

/* Lista de beneficios con check */
.check-list{list-style:none;display:grid;gap:1.1rem;margin-top:1.6rem;max-width:640px}
.check-list li{display:flex;align-items:flex-start;gap:.9rem;font-size:1rem;line-height:1.6;color:var(--text)}
.check-list li i{color:var(--cta);margin-top:.35rem;flex:0 0 auto;font-size:.95rem}

/* Pasos numerados (cómo funciona) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2rem}
.steps li{list-style:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.8rem}
.steps .step__num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--cta);color:#fff;font-weight:700;margin-bottom:1rem}
.steps p{margin:0;color:var(--text);font-size:.95rem;line-height:1.6}
@media(max-width:768px){.steps{grid-template-columns:1fr}}

/* Lista numerada de soluciones (fondo claro, con descripción) */
.solutions-list{border-top:1px solid var(--line);margin-top:1rem}
.solutions-list li{list-style:none;display:grid;grid-template-columns:60px 1fr;gap:1.2rem;padding:1.8rem 0;border-bottom:1px solid var(--line)}
.solutions-list .sol__num{font-weight:700;color:var(--green);font-size:.9rem;opacity:.7}
.solutions-list h3{font-size:1.25rem;margin-bottom:.4rem;color:var(--heading)}
.solutions-list p{color:var(--text);font-size:.95rem;line-height:1.65;margin:0}
@media(max-width:640px){.solutions-list li{grid-template-columns:32px 1fr}}

/* CTA banner de cierre */
.cta-banner{background:var(--light);border-radius:22px;padding:2.6rem 2.4rem;text-align:center;margin-top:3rem}
.js .cta-banner{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .cta-banner.is-visible{opacity:1;transform:none}
.cta-banner p{max-width:600px;margin:0 auto 1.4rem;color:var(--text);font-size:1.05rem}
.cta-banner .btn-row{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.cta-banner--glass{background:rgba(21,65,74,.92);border:1px solid rgba(255,255,255,.15);box-shadow:0 8px 32px rgba(0,0,0,.18)}
.cta-banner--glass p{color:#fff;font-weight:600;font-size:1.1rem}

/* Formulario de contacto */
.contact-form{display:grid;gap:1.1rem;max-width:640px}
.contact-form label{display:block;font-weight:600;font-size:.88rem;color:var(--heading);margin-bottom:.4rem}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:.95rem;color:var(--text);background:#fff}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form .form-status{font-size:.9rem;font-weight:600}
.contact-info{display:grid;gap:1rem;margin-top:1.6rem}
.contact-info a{color:var(--green);font-weight:600}
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:3.5rem;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* Contacto — rediseño tarjetas + form minimal + mapa */
.crumbs{display:flex;gap:.5rem;margin-top:1.2rem}
.crumb{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:.35rem .9rem;border-radius:50px;background:rgba(255,255,255,.16);color:#fff;transition:.3s}
a.crumb:hover{background:rgba(255,255,255,.3)}
.crumb--current{background:var(--cta);color:#fff}
.contact-cards-section{padding:4.5rem 0 1.5rem}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.contact-card{background:#fff;border-radius:var(--radius);padding:2.2rem;display:flex;flex-direction:column}
.contact-card i{font-size:1.7rem;color:var(--green);margin-bottom:1.1rem}
.contact-card h3{font-size:1.25rem;margin-bottom:.3rem}
.contact-card p{color:var(--text)}
.contact-card__btn{display:block;text-align:center;margin-top:1.4rem;padding:.8rem 1.2rem;border-radius:50px;background:var(--petroleo);color:#fff;font-weight:600;font-size:.92rem;transition:.3s}
.contact-card__btn:hover{background:var(--naranja)}
.contact-split-section{padding:3rem 0 5rem}
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.section-tag--outline{background:transparent;border:1px solid rgba(21,65,74,.35)}
.contact-split__form h2{font-size:clamp(1.9rem,3vw,2.6rem);margin:.8rem 0 1rem;letter-spacing:-.02em}
.contact-split__note{font-size:.88rem;color:var(--text);margin-bottom:1.8rem}
.form-minimal{display:grid;gap:.4rem}
.form-minimal input,.form-minimal select,.form-minimal textarea{width:100%;border:none;border-bottom:1px solid rgba(21,65,74,.25);padding:1rem 0;background:transparent;font-family:inherit;font-size:.95rem;color:var(--heading);outline:none;border-radius:0;transition:border-color .3s}
.form-minimal select:invalid{color:rgba(35,40,38,.5)}
.form-minimal textarea{resize:vertical;min-height:110px}
.form-minimal input:focus,.form-minimal select:focus,.form-minimal textarea:focus{border-bottom-color:var(--cta)}
.form-minimal .btn{margin-top:1.6rem;width:fit-content}
.form-minimal .form-status{font-size:.9rem;font-weight:600}
.contact-map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);min-height:480px;height:100%}
.contact-map iframe{display:block;width:100%;height:100%;min-height:480px;border:0}
@media(max-width:900px){
  .contact-cards{grid-template-columns:1fr}
  .contact-split{grid-template-columns:1fr;gap:2.5rem}
  .contact-map{min-height:320px}
  .contact-map iframe{min-height:320px}
}

/* Popup de feedback del formulario (spinner → éxito + barra de cierre 10s) */
.fb-modal-overlay{position:fixed;inset:0;background:rgba(14,47,54,.68);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:200;display:flex;align-items:center;justify-content:center;padding:1.2rem;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.fb-modal-overlay.show{opacity:1;visibility:visible;transition:opacity .35s ease}
.fb-modal{background:#fff;border-radius:24px;padding:2.8rem 2.5rem 2rem;max-width:430px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.35);transform:translateY(16px) scale(.95);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.fb-modal-overlay.show .fb-modal{transform:translateY(0) scale(1)}
.fb-modal__spinner{width:54px;height:54px;margin:0 auto 1.3rem;border-radius:50%;border:4px solid rgba(21,65,74,.15);border-top-color:var(--cta);animation:fb-spin .8s linear infinite}
@keyframes fb-spin{to{transform:rotate(360deg)}}
.fb-modal__check{width:64px;height:64px;margin:0 auto 1.3rem;border-radius:50%;background:linear-gradient(135deg,var(--naranja-light) 0%,var(--naranja) 60%,var(--naranja-dark) 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.7rem;box-shadow:0 12px 30px rgba(243,146,0,.4);animation:fb-pop .55s cubic-bezier(.34,1.56,.64,1)}
.fb-modal__check--soft{background:linear-gradient(135deg,var(--petroleo),var(--petroleo-dark));box-shadow:0 12px 30px rgba(21,65,74,.35)}
@keyframes fb-pop{0%{transform:scale(0) rotate(-30deg)}100%{transform:scale(1) rotate(0)}}
.fb-modal h3{font-size:1.35rem;color:var(--heading);margin-bottom:.5rem}
.fb-modal p{color:var(--text);font-size:.95rem;line-height:1.65}
.fb-modal__bar{height:4px;border-radius:4px;background:rgba(21,65,74,.12);margin-top:1.7rem;overflow:hidden}
.fb-modal__bar span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--naranja-light),var(--naranja));border-radius:inherit;transform-origin:left;transform:scaleX(1)}
.fb-modal__bar.run span{animation:fb-bar 10s linear forwards}
@keyframes fb-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* Micro-feedback al presionar: ver bloque FLUIDEZ E INTERACCIÓN al final (main.js → pressable) */

/* Noticias — página de artículo */
.article{padding:4rem 0 5rem;background:#fff}
.article__wrap{width:min(820px,92%);margin:0 auto}
.article__meta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-bottom:1.4rem}
.article__meta .post__cat{position:static}
.article__meta time{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text)}
.article__cover{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:2.2rem}
.article__cover img{width:100%;display:block}
.article__lead{font-size:1.18rem;font-weight:500;color:var(--heading);line-height:1.75;margin-bottom:1.8rem}
.article__body p{margin-bottom:1.25rem;line-height:1.85;color:var(--text)}
.article__body h2{font-size:1.5rem;margin:2.4rem 0 1rem;letter-spacing:-.02em}
.article__body ul{margin:0 0 1.25rem 1.2rem;display:grid;gap:.5rem}
.article__body li{line-height:1.7;color:var(--text)}
.article__body li::marker{color:var(--cta)}
.article__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0}
.stat-chip{background:var(--crema);border-radius:16px;padding:1.4rem 1rem;text-align:center}
.stat-chip strong{display:block;font-family:'Inter',sans-serif;font-size:1.9rem;font-weight:800;color:var(--cta);line-height:1.1;margin-bottom:.3rem}
.stat-chip span{font-size:.85rem;color:var(--text);line-height:1.4;display:block}
.article__quote{border-left:4px solid var(--cta);background:var(--crema);border-radius:0 16px 16px 0;padding:1.4rem 1.6rem;margin:1.8rem 0;font-weight:500;color:var(--heading);line-height:1.7}
.article__sources{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(0,0,0,.1)}
.article__sources h3{font-size:.95rem;margin-bottom:.6rem}
.article__sources ul{list-style:none;display:grid;gap:.35rem}
.article__sources a{font-size:.85rem;color:var(--green);text-decoration:underline;word-break:break-all}
.article__next{margin-top:3rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.article__next .btn i{transition:transform .3s}
.article__next .btn:hover i{transform:translateX(4px)}
@media(max-width:768px){
  .article__stats{grid-template-columns:1fr}
  .article__lead{font-size:1.05rem}
}

/* Smart Farming */
.smart{background:var(--crema)}
.smart__top{display:grid;grid-template-columns:1.1fr 1fr;gap:3.5rem;align-items:center;margin-bottom:3.5rem}
.smart__intro h2{font-size:clamp(1.5rem,4vw,2.8rem);margin:.4rem 0 1rem;line-height:1.15}
.smart__sub{font-size:1.1rem;color:var(--text);max-width:360px}
.smart__media img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;height:320px;object-fit:cover}
.smart__features{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;border-top:1px solid var(--line);padding-top:2.5rem}
.smart__feature{position:relative}
.smart__feature i{font-size:1.8rem;color:var(--green);margin-bottom:.9rem}
.smart__feature h3{font-size:1.2rem;margin-bottom:.6rem}
.smart__feature p{font-size:.95rem}
.smart__mark{display:block;width:14px;height:14px;background:var(--sage);border-radius:3px;margin-top:1.2rem}
/* 5 atributos en una línea */
.smart__features--5{grid-template-columns:repeat(5,1fr);gap:1.5rem}
.smart__features--5 .smart__feature{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem}
.smart__features--5 .smart__feature i{width:64px;height:64px;border-radius:50%;background:rgba(21,65,74,.08);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0}
.smart__features--5 .smart__feature h3{font-size:1rem;margin:0}

/* Cómo Trabajamos — 3 cards */
.areas--3{display:grid;grid-template-columns:repeat(3,1fr);gap:2.8rem 2.5rem;align-items:start;border-top:1px solid var(--line);padding-top:3.2rem}
.area{position:relative}
.area__icon{display:inline-flex;width:56px;height:56px;align-items:center;justify-content:center;font-size:1.7rem;color:var(--green);margin-bottom:1rem}
.area h3{font-size:1.4rem;margin-bottom:.6rem;color:var(--heading)}
.area__desc{color:var(--text);font-size:.97rem;line-height:1.7;margin:0}
.area__toggle{display:none}
.area__toggle:hover{background:var(--green);color:#fff}
.area__toggle i{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.btn--outline-dark{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.8rem;border:1.5px solid var(--heading);border-radius:60px;color:var(--heading);font-weight:600;font-size:.95rem;background:transparent;transition:background .3s,color .3s}
.btn--outline-dark:hover{background:var(--heading);color:#fff}
.btn__dot{width:10px;height:10px;border-radius:50%;background:var(--heading);display:inline-block;transition:background .3s}
.btn--outline-dark:hover .btn__dot{background:#fff}

/* Offers (cards: número + título + flecha arriba, producto abajo) */
.offers__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.offer{position:relative;height:460px;border-radius:22px;padding:2rem 1.9rem;overflow:hidden;background:#fff;border:1px solid transparent;transition:background .65s cubic-bezier(.4,0,.2,1),border-color .65s cubic-bezier(.4,0,.2,1),color .65s cubic-bezier(.4,0,.2,1)}
.offer:hover{background:var(--crema);border-color:transparent}
.offer__num{position:relative;z-index:2;font-weight:600;font-size:.9rem;color:var(--heading);opacity:.7;transition:color .65s cubic-bezier(.4,0,.2,1)}
.offer h3{position:relative;z-index:2;font-size:1.6rem;line-height:1.18;margin:.7rem 0 1.1rem;color:var(--heading);transition:color .65s cubic-bezier(.4,0,.2,1)}
.offer__arrow{position:relative;z-index:2;display:inline-flex;font-size:1.25rem;color:var(--heading);transition:color .65s cubic-bezier(.4,0,.2,1)}
.offer__img{position:absolute;left:0;right:0;bottom:0;height:64%;display:flex;align-items:flex-end;justify-content:center;z-index:1}
.offer__img img{height:100%;width:auto;max-width:92%;object-fit:contain;object-position:bottom}
.offer:nth-child(1) .offer__img img{height:85%}
.offer:nth-child(3) .offer__img img{height:72%}
.offers__note{text-align:center;margin-top:2.5rem;color:var(--text)}
.offers__note a{color:var(--green);font-weight:600;text-decoration:underline}
.offers__carousel{position:relative}
.offers__nav,.offers__dots{display:none}

/* Marcas (grilla 4 x 7) */
.brands__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.brand{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.8rem 1.2rem;text-align:center;transition:.3s}
.brand:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.brand__logo{height:72px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.brand__logo img{max-height:56px;max-width:90%;object-fit:contain}
.brand__logo img[src*="bsn.png"]{max-height:72px}
.brand__name{font-family:'Inter',sans-serif;font-weight:600;color:var(--heading);font-size:1rem}

/* Mission en modo Clientes */
.mission.mission--clients{padding:5.5rem 0 5rem;background:linear-gradient(135deg,var(--petroleo-dark) 0%,var(--petroleo) 100%)}
.mission__cols--single{display:block}
.mission--clients .mission__title{text-align:center;font-size:clamp(1.9rem,7vw,7rem);letter-spacing:1px;color:#fff;text-shadow:0 4px 24px rgba(14,47,54,.35)}
.mission--clients .mission__marquee span{color:rgba(255,255,255,.18)}

/* Partículas difuminadas */
.particles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.particles span{position:absolute;display:block;border-radius:50%;filter:blur(50px);opacity:.38;transition:transform .5s ease-out;will-change:transform,translate}
.particles span:nth-child(1){width:240px;height:240px;left:4%;top:14%;background:rgba(237,231,214,.42);animation:pdrift 15s ease-in-out infinite}
.particles span:nth-child(2){width:170px;height:170px;left:24%;top:55%;background:rgba(139,154,107,.45);animation:pdrift2 12s ease-in-out infinite}
.particles span:nth-child(3){width:300px;height:300px;left:48%;top:5%;background:rgba(205,221,217,.42);animation:pdrift 18s ease-in-out infinite}
.particles span:nth-child(4){width:150px;height:150px;left:68%;top:60%;background:rgba(237,231,214,.4);animation:pdrift2 14s ease-in-out infinite}
.particles span:nth-child(5){width:210px;height:210px;left:82%;top:18%;background:rgba(139,154,107,.42);animation:pdrift 16s ease-in-out infinite}
.particles span:nth-child(6){width:130px;height:130px;left:12%;top:72%;background:rgba(205,221,217,.42);animation:pdrift2 13s ease-in-out infinite}
.particles span:nth-child(7){width:190px;height:190px;left:58%;top:68%;background:rgba(237,231,214,.36);animation:pdrift 17s ease-in-out infinite}
@keyframes pdrift{0%,100%{translate:0 0}50%{translate:35px -45px}}
@keyframes pdrift2{0%,100%{translate:0 0}50%{translate:-40px 35px}}

/* Encabezado de Clientes (título + párrafo a la derecha) */
.clients-head{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr;gap:1.5rem 3.5rem;align-items:center}
.clients-head .mission__title{text-align:left;font-size:clamp(1.9rem,6vw,5rem)}
.clients-thanks{color:#fff;font-size:1.03rem;line-height:1.75;max-width:580px;text-shadow:0 1px 10px rgba(14,47,54,.25)}

/* Carrusel de clientes (una sola línea, loop continuo) */
.clients-carousel{position:relative;z-index:2;overflow:hidden;margin-top:3rem;padding:3.2rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.clients-track{display:flex;width:max-content;animation:marquee 60s linear infinite;will-change:transform}
.clients-carousel:hover .clients-track{animation-play-state:paused}
.clients-track .mission__circle{flex:0 0 auto;background:#fff;width:clamp(155px,15vw,200px);height:clamp(155px,15vw,200px);margin-right:2.6rem;border-radius:50%;overflow:hidden;box-shadow:0 16px 34px rgba(14,47,54,.22);cursor:pointer;animation:float 6.5s ease-in-out infinite;transition:scale .4s ease,box-shadow .4s ease}
.clients-track .mission__circle:hover{scale:1.1;box-shadow:0 24px 48px rgba(14,47,54,.32)}
.clients-track .mission__circle:nth-child(even){animation-delay:-3.2s}
.clients-track .mission__circle img{width:100%;height:100%;object-fit:contain;padding:18%}

/* Footer: enlace próximamente */
.footer__soon{color:rgba(237,231,214,.8)}
.footer__soon small{color:rgba(237,231,214,.55);font-size:.8em}

/* Archivo oculto */
[hidden]{display:none !important}

/* Stats + Service Range */
/* Cifras — imagen de paisaje con degradados */
.cifras{position:relative;overflow:hidden;padding:clamp(4rem,14vh,12rem) 0}
.cifras__bg{position:absolute;left:0;right:0;top:-600px;bottom:-600px;background:url('../img/fondo-cifras.webp') center/cover no-repeat;z-index:0;will-change:transform}
.cifras__bg::after{content:'';position:absolute;inset:0;background:rgba(21,65,74,.22)}
.cifras__fade-top{position:absolute;top:0;left:0;right:0;height:22%;background:linear-gradient(to bottom,var(--petroleo) 0%,transparent 100%);z-index:1}
.cifras__fade-bottom{position:absolute;bottom:0;left:0;right:0;height:22%;background:linear-gradient(to top,var(--petroleo) 0%,transparent 100%);z-index:1}
.cifras__inner{position:relative;z-index:2}
/* Rango de Servicio — petróleo sólido */
.range{position:relative;color:#fff;background:var(--petroleo);overflow:hidden}
.range .container{position:relative;z-index:2}
.range__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;align-items:start}
.stat{text-align:center}
.stat:nth-child(2){margin-top:3rem}
.stat:nth-child(3){margin-top:6rem}
.stat__num{display:inline-flex;align-items:flex-start;justify-content:center;font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(3.4rem,11vw,8.5rem);color:#fff;line-height:1}
.stat__num sup{font-size:.45em;margin-top:.4em}
.stat p{color:rgba(255,255,255,.92);max-width:230px;margin:.6rem auto 0;font-size:.98rem}
.range__title{font-size:clamp(1.5rem,4vw,2.8rem);margin:.6rem 0 2rem;line-height:1.15;color:#fff}
.range__list{border-top:1px solid rgba(255,255,255,.25)}
.range__list li{display:flex;align-items:center;gap:1.5rem;padding:1.1rem 0;border-bottom:1px solid rgba(255,255,255,.25);cursor:pointer;transition:.3s}
.range__num{color:rgba(255,255,255,.7);font-size:.85rem;font-weight:600}
.range__name{font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(1.6rem,4vw,2.6rem);color:#fff;transition:.3s}
.range__list li:hover .range__name{color:var(--accent)}
.range__list li:hover{padding-left:1rem}

/* Image strip (imagen + etiqueta separadas) */
.strip{padding:clamp(1.8rem,3vw,3.5rem) 0;overflow:hidden;background:var(--light)}
.strip__track{display:inline-flex;align-items:center;gap:clamp(1.6rem,2.5vw,3rem);white-space:nowrap;animation:marquee 60s linear infinite;will-change:transform}
.strip__brand{flex:0 0 auto;display:inline-flex;align-items:center;gap:clamp(.6rem,1vw,1rem);background:none;border:none;padding:0;transition:transform .3s}
.strip__brand:hover{transform:translateY(-3px)}
.strip__brand img{width:clamp(52px,5vw,72px);height:clamp(52px,5vw,72px);clip-path:url(#hexClip);object-fit:contain;background:#fff;flex-shrink:0;padding:6px}
.strip__brand img[alt="BSN"]{padding:12px}
.strip__brand span{font-weight:600;font-size:clamp(.88rem,1vw,1.05rem);color:#fff;background:var(--petroleo);border-radius:60px;padding:clamp(.5rem,.8vw,.75rem) clamp(1.2rem,1.8vw,1.8rem);white-space:nowrap}

/* Testimonials (carrusel vertical) */
.testi__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,2vw,2.5rem);align-items:center;max-width:none}
.testi__row{display:flex;align-items:center;gap:clamp(.8rem,1.2vw,1.2rem);margin-top:clamp(.5rem,.8vw,.8rem)}
.testi__viewport{position:relative;flex:1;height:clamp(260px,22vw,320px);overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent)}
.testi__track{will-change:transform}
/* Los testimonios secundarios se ven chicos y tenues; el principal crece al llegar al centro.
   Se usa transform (no font-size) para que el alto real no cambie y el centrado del carrusel siga exacto. */
.testi__item{padding:clamp(.8rem,1.2vw,1.2rem) 0;opacity:.28;transform:scale(.74);transform-origin:0 50%;cursor:pointer;transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .75s cubic-bezier(.34,1.3,.64,1)}
.testi__item:hover{opacity:.55}
.testi__item.is-active{opacity:1;transform:none;cursor:default}
.testi__track.is-snapping .testi__item{transition:none}
.testi__item blockquote{font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(1.1rem,1.65vw,1.45rem);color:var(--heading);line-height:1.4;margin:0 0 clamp(.6rem,1vw,.9rem)}
.testi__author{display:flex;align-items:center;gap:clamp(.5rem,.8vw,.8rem)}
.testi__author img{width:clamp(48px,4.5vw,62px);height:clamp(48px,4.5vw,62px);border-radius:50%;object-fit:cover}
.testi__author strong{display:block;color:var(--heading);font-family:'Inter',sans-serif;font-size:clamp(.9rem,1.1vw,1.1rem)}
.testi__author span{font-size:clamp(.8rem,.95vw,.95rem);color:var(--text)}
.testi__nav{flex:0 0 auto;display:flex;flex-direction:column;gap:clamp(.4rem,.5vw,.5rem)}
.testi__nav button{width:clamp(40px,3.2vw,46px);height:clamp(40px,3.2vw,46px);border-radius:50%;border:1px solid rgba(255,190,110,.65);background:linear-gradient(135deg,var(--naranja-light) 0%,var(--naranja) 55%,var(--naranja-dark) 100%);color:#fff;cursor:pointer;box-shadow:0 0 0 1px rgba(255,178,64,.2),0 10px 26px rgba(243,146,0,.4),0 0 20px rgba(255,178,64,.35);transition:box-shadow .3s,transform .3s;position:relative;overflow:hidden;z-index:1}
.testi__nav button::before{content:'';position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from 0deg,transparent 0%,transparent 70%,rgba(255,255,255,.9) 78%,#fff 82%,rgba(255,255,255,.9) 86%,transparent 94%,transparent 100%);z-index:-1;opacity:0;animation:luz-outline 5s ease-in-out infinite}
.testi__nav button::after{content:'';position:absolute;inset:2px;border-radius:inherit;background:linear-gradient(135deg,var(--naranja-light) 0%,var(--naranja) 55%,var(--naranja-dark) 100%);z-index:-1}
.testi__nav button:hover{box-shadow:0 0 0 1px rgba(255,178,64,.35),0 12px 32px rgba(243,146,0,.5),0 0 28px rgba(255,178,64,.5);transform:translateY(-2px)}
.testi__media{display:none}
.testimonials{position:relative;overflow:hidden}
.testimonials::after{content:'';position:absolute;right:clamp(-100px,-6vw,-70px);bottom:clamp(-140px,-8vw,-100px);width:clamp(520px,47vw,700px);height:clamp(520px,47vw,700px);background:url('../img/protein-jar.webp') center/contain no-repeat;opacity:.9;transform:rotate(-12deg);pointer-events:none;z-index:1}

/* About */
.about__inner{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.about__media{position:relative}
.about__media img{border-radius:var(--radius);box-shadow:var(--shadow)}
.about__badge{position:absolute;bottom:-25px;right:-15px;background:var(--green);color:#fff;border-radius:var(--radius);padding:1.3rem 1.6rem;display:flex;align-items:center;gap:.7rem;box-shadow:var(--shadow)}
.about__badge-num{font-family:'Inter',sans-serif;font-size:2.6rem;font-weight:800;line-height:1}
.about__badge-text{font-size:.85rem;line-height:1.2}
.about__text h2{font-size:clamp(1.8rem,3.5vw,2.5rem);margin-bottom:1rem}
.about__text h2 span{color:var(--green)}
.about__list{margin:1.5rem 0}
.about__list li{margin-bottom:.6rem;font-weight:500;color:var(--heading)}
.about__list i{color:var(--green);margin-right:.5rem}

/* Mission / About company */
.mission{background:var(--petroleo);color:#fff;position:relative;overflow:hidden;padding:5.5rem 0 0}
.mission__bgtext{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);overflow:hidden;pointer-events:none;user-select:none}
.mission__marquee{display:inline-flex;white-space:nowrap;animation:marquee 30s linear infinite;will-change:transform}
.mission__marquee span{font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(4rem,13vw,12rem);color:rgba(255,255,255,.1);line-height:1}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mission__inner{position:relative;z-index:2}
.mission__pill{display:inline-block;border:1px solid rgba(255,255,255,.6);border-radius:50px;padding:.35rem 1.1rem;text-transform:uppercase;letter-spacing:1.5px;font-size:.78rem;font-weight:600;margin-bottom:1.6rem}
.mission__cols{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:start}
.mission__title{color:#fff;font-size:clamp(2.2rem,5vw,4rem);font-weight:800;line-height:1.05}
.mission__aside p{color:var(--aqua);margin-bottom:2rem}
.btn--soft{background:var(--sage);color:var(--carbon);font-weight:600}
.btn--soft:hover{background:#fff;transform:translateY(-3px)}
.btn--soft .dot{width:8px;height:8px;border-radius:50%;background:var(--carbon);display:inline-block}
.mission__circles{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-start;gap:1.2rem;flex-wrap:nowrap;margin-top:3.5rem;padding:0 1rem 1.5rem}
.mission__circle{flex:0 0 auto;width:clamp(120px,15vw,210px);height:clamp(120px,15vw,210px);border-radius:50%;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.2);margin-top:40px;cursor:pointer;animation:float 4.5s ease-in-out infinite;transition:scale .4s ease,box-shadow .4s ease}
.mission__circle:nth-child(odd){margin-top:75px}
.mission__circle:nth-child(2){animation-delay:-.6s}
.mission__circle:nth-child(3){animation-delay:-1.2s}
.mission__circle:nth-child(4){animation-delay:-1.8s}
.mission__circle:nth-child(5){animation-delay:-2.4s}
.mission__circle:nth-child(6){animation-delay:-3s}
.mission__circle:hover{scale:1.14;box-shadow:0 22px 45px rgba(0,0,0,.3);z-index:3}
.mission__circle img{width:100%;height:100%;object-fit:cover}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -18px}}
@media(max-width:768px){
  .mission__cols{grid-template-columns:1fr;gap:1.5rem}
  .mission__circles{flex-wrap:wrap;justify-content:center}
  .mission__circle,.mission__circle:nth-child(odd){transform:none;width:110px;height:110px}
}

/* Services */
.services{background:var(--petroleo)}
.services .section-head h2{color:#fff}
.services .section-tag,.proposito .section-tag{color:var(--aqua);background:rgba(205,221,217,.14)}
.services .offers__note{color:rgba(255,255,255,.8)}
.services .offers__note a{color:var(--aqua)}
.services__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.service{background:#fff;border-radius:var(--radius);padding:2.2rem 1.8rem;transition:.3s;border-bottom:3px solid transparent}
.service:hover{transform:translateY(-8px);border-color:var(--green);box-shadow:var(--shadow)}
.service__icon{width:70px;height:70px;border-radius:50%;background:var(--light);display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--green);margin-bottom:1.2rem;transition:.3s}
.service:hover .service__icon{background:var(--green);color:#fff}
.service h3{font-size:1.2rem;margin-bottom:.6rem}
.service__link{color:var(--green);font-weight:600;font-size:.9rem;display:inline-flex;gap:.4rem;align-items:center;margin-top:1rem}

/* (sección de contadores antigua eliminada — ahora se usa .range / .stat) */
.stat .counter__num{color:inherit}

/* Products */
.products__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.product{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.06);transition:.3s}
.product:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.product__img{position:relative;height:220px;overflow:hidden}
.product__img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.product:hover .product__img img{transform:scale(1.08)}
.product__tag{position:absolute;top:12px;left:12px;background:var(--green);color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .8rem;border-radius:50px}
.product__body{padding:1.3rem}
.product__body h3{font-size:1.1rem;margin-bottom:.4rem}
.product__rate{color:var(--accent);font-size:.85rem;margin-bottom:.5rem}
.product__price{color:var(--green-dark);font-weight:700;font-family:'Inter',sans-serif}

/* CTA banner */
.cta-banner{background:var(--green);padding:3.5rem 0}
.cta-banner__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;color:#fff}
.cta-banner h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem)}
.cta-banner p{color:var(--aqua)}

/* Testimonials */
.testimonials{background:var(--light)}
.testimonials__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.testimonial{background:#fff;border-radius:var(--radius);padding:2.2rem;box-shadow:0 8px 24px rgba(0,0,0,.05)}
.testimonial>i{font-size:2rem;color:var(--green);opacity:.3;margin-bottom:1rem}
.testimonial p{font-style:italic;margin-bottom:1.5rem}
.testimonial__author{display:flex;align-items:center;gap:.9rem}
.testimonial__author img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.testimonial__author strong{display:block;color:var(--heading);font-family:'Inter',sans-serif}
.testimonial__author span{font-size:.85rem}

/* Blog (tarjetas libres, sin caja) */
.blog{background:var(--crema)}
.blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.post{transition:.3s}
.post__img{position:relative;display:block;height:230px;border-radius:16px;overflow:hidden}
.post__img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.post:hover .post__img img{transform:scale(1.05)}
.post__cat{position:absolute;top:14px;left:14px;background:var(--crema);color:var(--heading);font-weight:600;font-size:.82rem;padding:.4rem 1rem;border-radius:8px}
.post__body{padding:1.3rem 0 0}
.post__date{display:block;color:rgba(35,40,38,.6);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:.6rem}
.post__body h3{font-size:1.35rem;line-height:1.25;margin:0 0 .9rem}
.post__body h3 a{color:var(--heading);transition:color .3s}
.post__body h3 a:hover{color:var(--green)}

/* Footer */
.footer{position:relative;padding:9rem 0 4rem;overflow:hidden;background:url('../img/footer-bg.webp') center/cover no-repeat}
.footer__bg{display:none}
@media(min-width:769px){
  .footer__bg{display:block;position:absolute;left:0;right:0;top:-200px;bottom:-200px;z-index:0;background:url('../img/fondo-footer.webp') center center/cover no-repeat scroll;will-change:transform}
}
.footer__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,65,74,.88),rgba(14,47,54,.95));z-index:0}
.footer__watermark{position:absolute;top:2.5rem;left:50%;transform:translateX(-50%);z-index:1;font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(4rem,15vw,14rem);line-height:.9;color:var(--accent);opacity:.5;white-space:nowrap;pointer-events:none;user-select:none;display:inline-block}
/* Efecto escritura: se recorta con clip-path (no toca el layout) y se escribe al entrar el footer en pantalla (main.js → is-typed) */
.js .footer__watermark{clip-path:inset(-15% 100% -15% 0)}
.js .footer__watermark.is-typed{clip-path:inset(-15% -3% -15% 0);transition:clip-path 1.6s steps(10,end)}
.footer__watermark::after{content:'';display:inline-block;width:3px;height:.72em;margin-left:.06em;vertical-align:-.02em;background:rgba(255,255,255,.45);animation:nl-caret 1s steps(1,end) infinite}
@keyframes nl-caret{50%{opacity:0}}
.footer .container{position:relative;z-index:2}

/* Glass card */
.footer__card{position:relative;background:rgba(14,47,54,.72);border:1px solid rgba(255,255,255,.12);border-radius:30px;padding:3.5rem;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.footer__deco{position:absolute;top:1.6rem;left:1.6rem;width:42px;height:42px;border:1px solid rgba(255,255,255,.25);border-radius:50%}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;grid-template-areas:"brand links subscribe" "brand copy copy";gap:1.5rem 3rem;color:rgba(237,231,214,.85)}

/* Brand column */
.footer__brand{grid-area:brand;display:flex;flex-direction:column}
.footer__tagline{color:#fff;font-family:'Inter',sans-serif;font-weight:600;font-size:1.15rem;line-height:1.4;max-width:300px;margin-bottom:1.8rem}
.footer__email,.footer__phone{display:block;color:var(--accent);font-family:'Inter',sans-serif;font-weight:600;font-size:1.6rem;line-height:1.3;transition:.3s}
.footer__email:hover,.footer__phone:hover{color:#fff}
.footer__social{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:auto;padding-top:2rem}
.footer__social a{padding:.5rem 1.1rem;border:1px solid rgba(255,255,255,.25);border-radius:50px;font-size:.9rem;color:var(--crema);transition:.3s}
.footer__social a:hover{background:var(--naranja);border-color:var(--naranja);color:#fff}

/* Links column */
.footer__links{grid-area:links;border-left:1px solid rgba(255,255,255,.12);padding-left:2.5rem}
.footer__links h4,.footer__subscribe h4{color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:1.4rem;margin-bottom:1.5rem}
.footer__links ul li{margin-bottom:.7rem}
.footer__links a{color:rgba(237,231,214,.8);transition:.3s}
.footer__links a:hover{color:var(--accent);padding-left:4px}

/* Subscribe column */
.footer__subscribe{grid-area:subscribe}
.footer__sub-form{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:.7rem;margin-bottom:1.2rem}
.footer__sub-form input{flex:1;background:none;border:none;color:#fff;font-size:.95rem;outline:none}
.footer__sub-form input::placeholder{color:rgba(237,231,214,.65)}
.footer__sub-form button{background:none;border:none;color:var(--accent);font-size:1.2rem;cursor:pointer;transition:.3s}
.footer__sub-form button:hover{color:#fff}
.footer__subscribe p{color:rgba(237,231,214,.65);font-size:.92rem;line-height:1.6}

/* Copyright */
.footer__copy{grid-area:copy;align-self:end;border-left:1px solid rgba(255,255,255,.12);padding-left:2.5rem;padding-top:1.5rem}
.footer__copy p{color:rgba(237,231,214,.65);font-size:.9rem}

/* Back to top */
.back-to-top{position:fixed;right:25px;bottom:25px;width:48px;height:48px;border-radius:50%;background:var(--green);color:#fff;border:2px solid rgba(205,221,217,.7);box-shadow:0 8px 22px rgba(14,47,54,.3);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.3s;z-index:60}
.back-to-top.show{opacity:1;visibility:visible}
.back-to-top:hover{background:var(--green-dark)}

/* Responsive */
/* Tablet (769-1180px) — mantiene layout desktop pero comprime nav y ajusta hero */
@media(min-width:769px) and (max-width:1180px){
  .header__inner{padding:.5rem .8rem .5rem 1.2rem}
  .nav{gap:1.1rem;margin-right:1rem}
  .nav a{font-size:.85rem}
  .header__cta{padding:.55rem 1.05rem;font-size:.82rem}
  .logo__img{max-height:44px}
  .hero__bg{background-position:65% 30%}
  .hero h1{font-size:clamp(3rem,5.2vw,4.6rem);letter-spacing:-1.2px}
  .hero__sub{font-size:clamp(.92rem,1.15vw,1.05rem);max-width:min(480px,60%)}
  .hero__actions .btn{font-size:.95rem;padding:.85rem 1.9rem}
  .hero__sidenote{max-width:260px;font-size:.85rem}
  .hero__badge{font-size:.7rem}
  .hero__eyebrow{font-size:.72rem}
}
@media(max-width:992px){
  .offers__grid{grid-template-columns:repeat(2,1fr)}
  .brands__grid{grid-template-columns:repeat(3,1fr)}
  .areas--3{grid-template-columns:repeat(2,1fr);gap:2rem}
  .clients-head{grid-template-columns:1fr;gap:1rem}
  .smart__top{grid-template-columns:1fr;gap:2rem}
  .smart__features{grid-template-columns:1fr;gap:1.8rem}
  .smart__features--5{grid-template-columns:repeat(3,1fr);gap:2rem}
  .range__stats{grid-template-columns:1fr;gap:1.5rem}
  .stat:nth-child(2),.stat:nth-child(3){margin-top:0}
  .testi__inner{grid-template-columns:1fr;gap:2rem}
  .testi__media{order:1}
  .blog__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr;grid-template-areas:"brand links" "brand subscribe" "copy copy";gap:2rem}
  .footer__links,.footer__copy{border-left:none;padding-left:0}
  .footer__card{padding:2.5rem}
}
@media(max-width:768px){
  /* Botón hamburguesa: 3 barras que se transforman en X */
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:26px;height:20px;padding:0}
  .nav-toggle__bar{display:block;width:100%;height:2px;border-radius:2px;background:#fff;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .2s ease}
  .nav-toggle.is-open .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open .nav-toggle__bar:nth-child(2){opacity:0;transform:scaleX(0)}
  .nav-toggle.is-open .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Panel desplegable glass, debajo de la píldora del navbar (no se superpone) */
  .nav{position:absolute;top:calc(100% + 14px);left:0;right:0;width:auto;max-width:none;height:auto;flex-direction:column;gap:0;margin:0;padding:1rem 1.5rem 1.3rem;background:rgba(21,65,74,.85);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.15);border-radius:22px;box-shadow:0 20px 50px rgba(0,0,0,.28);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(38px);transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .4s ease,visibility 0s linear .45s;z-index:65}
  .nav.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0);transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .4s ease,visibility 0s linear}
  .nav a,.site-header.scrolled .nav a{color:#fff;padding:.8rem .2rem;border-bottom:1px solid rgba(255,255,255,.14)}
  .nav a:last-child{border-bottom:none}
  .nav a:hover{color:var(--accent)}
  .nav a.is-current,.site-header.scrolled .nav a.is-current{color:var(--cta)}

  /* Fondo oscurecido detrás del panel, se cierra al hacer click afuera */
  .nav-overlay{display:block;position:fixed;inset:0;background:rgba(14,47,54,0);z-index:59;opacity:0;visibility:hidden;pointer-events:none;transition:background .35s ease,opacity .35s ease,visibility 0s linear .35s}
  .nav-overlay.show{background:rgba(14,47,54,.55);opacity:1;visibility:visible;pointer-events:auto;transition:background .35s ease,opacity .35s ease,visibility 0s linear}

  .header__cta{display:none}
  .topbar__info{display:none}
  .topbar__inner{justify-content:center}
  .hero{min-height:100vh}
  .hero__content{min-height:100vh;padding:7rem 0 2rem}
  .hero__bg{background-image:url('../img/hero-mobile.webp');background-position:center center;top:0;bottom:0;transform:none !important}
  .hero__overlay{background:linear-gradient(180deg,rgba(14,47,54,.65) 0%,rgba(21,65,74,.35) 40%,rgba(14,47,54,.7) 100%)}
  .hero__top{padding-left:1.2rem}
  .hero__headline{padding-left:1.2rem}
  .hero__bottom{padding-left:1.2rem;flex-direction:column;align-items:flex-start;gap:1.5rem}
  .hero__badge{font-size:.5rem;padding:.35rem .7rem;gap:.3rem;white-space:nowrap}
  .hero__badge i{font-size:.6rem}
  .hero__eyebrow{font-size:.5rem;letter-spacing:1px}
  .hero h1{font-size:clamp(2.8rem,12vw,4.5rem);letter-spacing:-1px}
  .hero__sub{font-size:.78rem;max-width:220px;margin-top:.8rem;line-height:1.55}
  .hero__actions{flex-direction:column;align-items:flex-start;gap:.6rem}
  .hero__actions .btn{font-size:.8rem;padding:.7rem 1.4rem;white-space:nowrap}
  .hero__sidenote{text-align:left;font-size:.78rem;max-width:100%}
  .clients-thanks,.smart__sub,.area__inner p,.smart__feature p,.offers__note{font-size:.92rem;line-height:1.6}
  .stat p{font-size:.88rem}

  /* Testimonios mobile */
  .testimonials{padding:2.5rem 0 300px}
  .testimonials::after{width:400px;height:400px;right:-55px;bottom:-125px;transform:rotate(-8deg)}
  .testi__media{display:none}
  .testi__main{order:1}
  .testi__viewport{height:220px}
  .testi__item blockquote{font-size:1rem}
  .testi__author img{width:40px;height:40px}
  .testi__nav button{width:36px;height:36px}
  .testi__row{gap:.6rem}
  .section-tag{font-size:.75rem;padding:.4rem 1rem}
  .footer{padding:4rem 0 3rem}
  .footer__deco{display:none}
  .footer__watermark{top:2.2rem;transform:translateX(-50%);font-size:3.2rem}
  .footer__card{z-index:2}
}
@media(max-width:560px){
  /* Qué Ofrecemos: carrusel en mobile */
  .offers__grid{display:flex;grid-template-columns:none;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;padding:1rem .3rem 1.4rem;margin:0 -.3rem}
  .offers__grid::-webkit-scrollbar{display:none}
  .offer{flex:0 0 82%;scroll-snap-align:start;height:340px;padding:1.5rem 1.5rem;box-shadow:0 12px 28px rgba(21,65,74,.12),0 2px 6px rgba(21,65,74,.06)}
  .offer h3{font-size:1.35rem;margin:.5rem 0 .8rem}
  .offer__img{height:56%}
  .offer:nth-child(1) .offer__img img,.offer:nth-child(3) .offer__img img{height:100%}
  .offers__nav{display:flex;position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:none;background:#fff;box-shadow:0 6px 16px rgba(21,65,74,.18);color:var(--heading);align-items:center;justify-content:center;font-size:.9rem;cursor:pointer;z-index:3;transition:transform .3s,opacity .3s,visibility .3s}
  .offers__nav:active{transform:translateY(-50%) scale(.9)}
  .offers__nav.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
  .offers__nav--prev{left:-4px}
  .offers__nav--next{right:-4px}
  .offers__dots{display:flex;justify-content:center;gap:.55rem;margin-top:.4rem}
  .offers__dot{width:9px;height:9px;border-radius:50%;border:none;background:rgba(21,65,74,.22);padding:0;cursor:pointer;transition:background .3s,width .3s}
  .offers__dot.is-active{background:var(--cta);width:26px;border-radius:5px}

  .brands__grid{grid-template-columns:repeat(2,1fr)}

  /* Cómo Trabajamos en mobile */
  .areas--3{grid-template-columns:1fr;gap:2rem;padding-top:2rem}
  .area__icon{width:44px;height:44px;font-size:1.3rem;margin-bottom:.7rem}
  .area h3{font-size:1.1rem;margin-bottom:.4rem}
  .area__desc{font-size:.9rem}
  .area__toggle{width:38px;height:38px;font-size:.85rem;margin-top:.9rem}

  .smart__features--5{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr;grid-template-areas:"brand" "links" "subscribe" "copy"}
  .footer__email,.footer__phone{font-size:1.3rem}
}

/* =========================================================
   FLUIDEZ E INTERACCIÓN — mismo principio que NutriClub 360
   Cada acción del visitante recibe una respuesta: al cargar, al hacer
   scroll, al pasar el mouse y al tocar. Nada queda "muerto".
   · Lo que se oculta para animar lleva siempre el prefijo .js: si el
     script no arranca, el sitio se ve completo igual.
   · El hundido al presionar y los desplazamientos de hover usan las
     propiedades `scale` / `translate` / `rotate` (no `transform`) para
     no pisar los transform que ya tienen algunos elementos.
   ========================================================= */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);       /* entradas suaves, sin frenazo */
  --ease-spring:cubic-bezier(.34,1.45,.64,1); /* rebote elástico corto */
}

/* ---------- Transición entre páginas (navegadores con View Transitions) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:nl-page-out .28s var(--ease-out) both}
::view-transition-new(root){animation:nl-page-in .55s var(--ease-out) both}
.site-header{view-transition-name:site-header}
@keyframes nl-page-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes nl-page-in{from{opacity:0;transform:translateY(22px)}}
/* Respaldo para navegadores sin View Transitions: fundido de salida */
html.is-leaving body{opacity:0;transform:translateY(-10px);transition:opacity .22s ease,transform .22s ease}

/* ---------- Barra de progreso de lectura ---------- */
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:120;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--naranja-light),var(--naranja));box-shadow:0 0 12px rgba(243,146,0,.55)}

/* ---------- Respuesta táctil: sin espera de doble-tap ni recuadro azul ---------- */
a,button,[role="link"],.offer,.brand,.strip__brand,.proposito__circle,.contact-card,.area,.post,.stat-chip,.steps li,.chip-list span{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* Onda al hacer clic (la crea main.js en la posición exacta del dedo/cursor) */
.btn,.btn--dark,.contact-card__btn,.brand,.contact-card,.testi__nav button{position:relative;overflow:hidden}
.back-to-top{overflow:hidden}   /* ya es position:fixed: no se le pone relative (lo sacaría de la esquina) */
.nl-ripple{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:currentColor;opacity:.24;transform:translate(-50%,-50%) scale(0);pointer-events:none;z-index:0;animation:nl-ripple .7s var(--ease-out) forwards}
@keyframes nl-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ---------- Entrada del hero al cargar la página ---------- */
.js .hero__bg{scale:1.14;transition:scale 2.4s var(--ease-out)}
.js .hero__overlay{opacity:.2;transition:opacity 1.6s ease}
.js .hero [data-intro]{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);transition-delay:var(--d,0ms)}
.js.is-loaded .hero__bg{scale:1}
.js.is-loaded .hero__overlay{opacity:1}
.js.is-loaded .hero [data-intro]{opacity:1;transform:none}
/* Titular del hero: cada línea sube desde detrás de una máscara */
.hero h1 .nl-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .nl-line > span{display:inline-block}
.js .hero h1 .nl-line > span{transform:translateY(105%);transition:transform 1.1s var(--ease-out);transition-delay:var(--d,0ms)}
.js.is-loaded .hero h1 .nl-line > span{transform:none}

/* Cabecera de páginas internas: aparece en cascada al cargar */
.js .page-hero .container > *{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0ms)}
.js.is-loaded .page-hero .container > *{opacity:1;transform:none}

/* ---------- Aparición al hacer scroll ----------
   main.js marca los elementos con data-reveal="up|scale|left|right|zoom"
   y un retraso --d escalonado para los que van en grilla. */
.js [data-reveal]{opacity:0;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0ms)}
.js [data-reveal="up"]{transform:translateY(40px)}
.js [data-reveal="scale"]{transform:translateY(28px) scale(.93)}
.js [data-reveal="left"]{transform:translateX(-44px)}
.js [data-reveal="right"]{transform:translateX(44px)}
.js [data-reveal="zoom"]{transform:scale(.86)}
.js [data-reveal].is-visible{opacity:1;transform:none}

/* Titulares: las palabras suben una a una */
.nl-words .nl-w{display:inline-block}
.js .nl-words .nl-w{opacity:0;transform:translateY(.55em) rotate(2deg);transform-origin:0 100%;transition:opacity .7s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i) * 45ms)}
.js .nl-words.is-visible .nl-w{opacity:1;transform:none}

/* Imágenes: aparecen con un leve acercamiento dentro de su marco */
.js [data-reveal-img]{overflow:hidden}
.js [data-reveal-img] img{scale:1.16;transition:scale 1.4s var(--ease-out),transform .4s}
.js [data-reveal-img].is-visible img{scale:1}

/* ---------- Hover (solo equipos con mouse: en táctil el hover queda "pegado") ---------- */
@media (hover:hover) and (pointer:fine){
  /* Tarjetas de "Qué ofrecemos": luz que sigue al cursor + inclinación 3D (main.js) */
  .offer,.offer:hover{background-image:radial-gradient(460px circle at var(--mx,50%) var(--my,-20%),rgba(243,146,0,.13),transparent 62%)}
  .offer:hover{background-color:var(--crema)}
  .offer__arrow{transition:color .65s cubic-bezier(.4,0,.2,1),translate .45s var(--ease-spring)}
  .offer:hover .offer__arrow{translate:8px 0;color:var(--naranja)}
  .offer__img img{transition:scale .7s var(--ease-out),translate .7s var(--ease-out)}
  .offer:hover .offer__img img{scale:1.06;translate:0 -8px}

  /* Blog: la tarjeta se eleva y la flecha avanza */
  .post{transition:translate .45s var(--ease-spring)}
  .post:hover{translate:0 -6px}
  .post .service__link i{transition:translate .4s var(--ease-spring)}
  .post:hover .service__link i{translate:6px 0}
  .post__img{transition:box-shadow .45s var(--ease-out)}
  .post:hover .post__img{box-shadow:0 22px 44px rgba(21,65,74,.2)}

  /* Tarjetas genéricas: elevación elástica */
  .area,.contact-card,.stat-chip,.steps li{transition:translate .45s var(--ease-spring),box-shadow .45s var(--ease-out),background .3s}
  .area:hover,.contact-card:hover,.stat-chip:hover,.steps li:hover{translate:0 -6px;box-shadow:0 20px 40px rgba(21,65,74,.13)}
  .area__icon{transition:scale .45s var(--ease-spring),rotate .45s var(--ease-spring),color .3s}
  .area:hover .area__icon{scale:1.18;rotate:-8deg;color:var(--naranja)}

  /* Íconos de atributos (Nosotros) */
  .smart__feature i{transition:scale .45s var(--ease-spring),background .3s,color .3s}
  .smart__feature:hover i{scale:1.14}

  /* Cifras: el número se enciende */
  .stat__num{transition:scale .5s var(--ease-spring),color .3s}
  .stat:hover .stat__num{scale:1.06;color:#ffd77a}

  /* Lista de servicios: la fila completa reacciona y muestra su flecha */
  .range__list li{position:relative}
  .range__list li::after{content:'\f061';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:.4rem;top:50%;translate:-16px -50%;opacity:0;color:var(--naranja);font-size:1.3rem;transition:translate .45s var(--ease-spring),opacity .3s}
  .range__list li:hover::after{translate:0 -50%;opacity:1}

  /* Marcas y strip */
  .strip__brand img{transition:scale .4s var(--ease-spring),rotate .4s var(--ease-spring)}
  .strip__brand:hover img{scale:1.12;rotate:-6deg}
  .brand__logo img{transition:scale .45s var(--ease-spring)}
  .brand:hover .brand__logo img{scale:1.08}

  /* Links del footer: desplazamiento elástico */
  .footer__links a{display:inline-block;transition:color .3s,translate .35s var(--ease-spring)}
  .footer__links a:hover{padding-left:0;translate:6px 0}
  .footer__social a{transition:background .3s,border-color .3s,color .3s,translate .35s var(--ease-spring)}
  .footer__social a:hover{translate:0 -3px}

  /* Botones: la flecha interior avanza */
  .btn i.fa-arrow-right,.btn--dark i{transition:translate .4s var(--ease-spring)}
  .btn:hover i.fa-arrow-right,.btn--dark:hover i{translate:5px 0}
}

/* Filas y tarjetas completas que ahora son clickeables */
.range__list li[data-href],.offer[data-href]{cursor:pointer}
.range__list li[data-href]:focus-visible,.offer[data-href]:focus-visible{outline:2px solid var(--naranja);outline-offset:4px;border-radius:6px}

/* ---------- Carrusel de marcas arrastrable ---------- */
.strip{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.strip.is-dragging{cursor:grabbing}
.strip.is-dragging .strip__brand{pointer-events:none}
.strip__track{animation-duration:110s}
.strip img{-webkit-user-drag:none}

/* ---------- Botón volver arriba: entra con rebote ---------- */
.back-to-top{transform:translateY(24px) scale(.7);transition:opacity .35s ease,visibility 0s linear .35s,transform .5s var(--ease-spring),background .3s}
.back-to-top.show{transform:none;transition:opacity .35s ease,visibility 0s,transform .5s var(--ease-spring),background .3s}
.back-to-top:hover{background:var(--naranja)}
.back-to-top i{transition:translate .35s var(--ease-spring)}
.back-to-top:hover i{translate:0 -3px}

/* ---------- Menú móvil: los enlaces entran en cascada ---------- */
@media(max-width:768px){
  .nav a{opacity:0;translate:18px 0;transition:opacity .35s ease,translate .45s var(--ease-out),color .3s}
  .nav.open a{opacity:1;translate:0 0;transition-delay:calc(var(--i,0) * 55ms + 80ms)}
}

/* ---------- Formularios: la línea se dibuja al enfocar; el error "tiembla" ---------- */
.form-minimal input,.form-minimal select,.form-minimal textarea{background-image:linear-gradient(var(--naranja),var(--naranja));background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;transition:border-color .3s,background-size .5s var(--ease-out)}
.form-minimal input:focus,.form-minimal select:focus,.form-minimal textarea:focus{background-size:100% 2px}
.nl-shake{animation:nl-shake .45s cubic-bezier(.36,.07,.19,.97) both;border-bottom-color:#c0392b !important}
@keyframes nl-shake{10%,90%{translate:-2px 0}20%,80%{translate:4px 0}30%,50%,70%{translate:-6px 0}40%,60%{translate:6px 0}}
.footer__sub-form.nl-sent{border-bottom-color:var(--aqua)}

/* Confeti con los colores de la paleta al enviar el formulario con éxito */
.fb-modal__check{position:relative}
.nl-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.nl-burst i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:2px;background:var(--c);animation:nl-burst .9s var(--ease-out) forwards}
@keyframes nl-burst{0%{transform:translate(0,0) rotate(0) scale(1);opacity:1}100%{transform:translate(var(--tx),var(--ty)) rotate(var(--r)) scale(.4);opacity:0}}

/* ---------- Accesibilidad: si el sistema pide menos movimiento, se respeta ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .js [data-reveal],.js .nl-words .nl-w,.js .hero [data-intro],.js .hero h1 .nl-line > span,.js .page-hero .container > *{opacity:1 !important;transform:none !important}
  .js .hero__bg,.js [data-reveal-img] img{scale:1 !important}
}

/* =========================================================
   PULIDO MÓVIL (mobile-first)
   Medido con auditoría en 360 / 390 / 430 px: áreas táctiles de al menos
   44 px, texto legible (mín. 10–12 px en etiquetas en mayúsculas) y
   nada pegado a los bordes.
   Va al final para ganar a las reglas anteriores del mismo peso.
   ========================================================= */

/* Área táctil invisible ampliada: el elemento se ve igual, pero el dedo acierta */
.crumb,.offers__dot{position:relative}
.crumb::after,.offers__dot::after{content:'';position:absolute;inset:-8px -4px}
.offers__dot::after{inset:-14px -6px}

.crumb{font-size:.75rem}                                   /* 11,5 → 12 px */
.service__link{padding:.55rem 0}                           /* "Leer más": 24 → 40 px de alto */
.footer__email,.footer__phone{padding:.3rem 0;width:fit-content}
.footer__sub-form input{padding:.7rem 0}                  /* campo del footer: 17 → 44 px */
.footer .footer__sub-form button{width:44px;height:44px;margin:-6px -10px -6px 0;display:inline-flex;align-items:center;justify-content:center}

@media(max-width:768px){
  /* Botón hamburguesa: se ve igual (26×20) pero el área táctil es de 44×44 */
  .nav-toggle{width:44px;height:44px;padding:12px 9px;margin:-12px -9px;box-sizing:border-box}

  /* Hero: etiquetas legibles (antes 8 px) y texto con más aire */
  .hero__badge{font-size:clamp(.6rem,2.65vw,.7rem);letter-spacing:.6px;padding:.45rem .85rem;gap:.4rem;max-width:100%}
  .hero__badge i{font-size:.75rem}
  .hero__eyebrow{font-size:.68rem;letter-spacing:1.1px;line-height:1.5}
  .hero__sub{font-size:.95rem;max-width:34ch;line-height:1.6}
  .hero__actions .btn{font-size:.95rem;padding:.85rem 1.6rem;min-height:48px}
  .hero__sidenote{font-size:.85rem;max-width:36ch}

  /* Testimonios: flechas de 44 px */
  .testi__nav button{width:44px;height:44px}

  /* Carrusel "Qué ofrecemos": flechas de 44 px */
  .offers__nav{width:44px;height:44px}

  /* Botón volver arriba */
  .back-to-top{width:46px;height:46px;right:16px;bottom:16px}
}

/* Puntos del carrusel "Qué ofrecemos": sobre petróleo necesitan ser claros (antes quedaban invisibles) */
.services .offers__dot{background:rgba(255,255,255,.3)}
.services .offers__dot.is-active{background:var(--naranja)}

/* Lista de servicios en táctil: la flecha siempre visible indica que la fila se puede tocar */
@media (hover:none){
  .range__list li[data-href]::after{content:'\f061';font-family:'Font Awesome 6 Free';font-weight:900;color:var(--naranja);font-size:1rem;margin-left:auto;padding-left:.8rem}
}

@media(max-width:768px){
  /* Ritmo vertical más compacto: en móvil 88 px arriba + 88 px abajo dejaba huecos de ~180 px */
  section{padding:3.75rem 0}
  .smart__top{margin-bottom:2.5rem}

  /* Hero: la tercera frase de la etiqueta no cabe en pantallas chicas */
  .hero__badge-extra{display:none}

  /* Propósito: logos de clientes legibles (antes 25–47 px) en dos filas centradas */
  .proposito__circles--static{flex-wrap:wrap;gap:10px;padding:0 16px;max-width:420px;margin:0 auto}
  .proposito__pair{gap:8px}
  .proposito__circle--lg{width:clamp(76px,22vw,96px);height:clamp(76px,22vw,96px)}
  .proposito__circle--sm{width:clamp(34px,10.4vw,44px);height:clamp(34px,10.4vw,44px)}
  .proposito__marquee-label{font-size:clamp(.8rem,3.6vw,1rem);letter-spacing:1px}
  .proposito__band{padding-bottom:3rem}

  /* Cifras → Rango: sin el hueco vacío entre ambas */
  .cifras{padding:4rem 0 2.5rem}
  .range{padding-top:2.5rem}

  /* Lista de servicios: nombres largos en 2 líneas compactas */
  .range__list li{gap:1rem;padding:1rem 0}
  .range__name{font-size:clamp(1.12rem,5.2vw,1.5rem);line-height:1.25}
  .range__title{margin-bottom:1.5rem}

  /* Testimonios: el frasco decorativo ocupa menos alto */
  .testimonials{padding:2.5rem 0 220px}
  .testimonials::after{width:320px;height:320px;right:-40px;bottom:-95px}
}

@media(max-width:560px){
  /* Footer: enlaces en dos columnas (antes una lista de 9 filas ocupaba casi una pantalla) */
  .footer__links ul{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem}
  .footer__links ul li{margin-bottom:0}
  .footer__links a{display:inline-block;padding:.45rem 0}
  .footer__links h4,.footer__subscribe h4{font-size:1.2rem;margin-bottom:.8rem}
  .footer__card{padding:2rem 1.4rem}
  .footer__grid{gap:1.8rem}
}

/* Títulos: líneas equilibradas (evita palabras huérfanas como "cada / paso") */
h1,h2,h3{text-wrap:balance}
/* Números de la lista de servicios con ancho fijo: los nombres arrancan todos alineados */
.range__num{min-width:2.4em;font-variant-numeric:tabular-nums}
@media(max-width:768px){
  /* En escritorio el título de "Qué ofrecemos" ocupa 66 %; en móvil eso lo partía en 5 líneas */
  .section-head--wide{max-width:100%}
}

/* Rendimiento: las animaciones infinitas se pausan mientras su sección está fuera de pantalla (main.js → nl-off) */
.nl-off *,.nl-off *::before,.nl-off *::after{animation-play-state:paused !important}

/* Logo nuevo (horizontal, 6,6:1 — más alargado que el anterior): alto fluido para que ocupe un ancho similar */
.logo__img{height:clamp(26px,2.3vw,34px);max-height:none}

/* Nunca scroll horizontal: un elemento esperando su animación "desde la derecha" (p. ej. el mapa de
   Contacto) sobresalía 30 px y el celular achicaba TODA la página para mostrarlo.
   clip (no hidden) para no romper position:sticky. */
html,body{overflow-x:clip}
@media(max-width:768px){
  .js [data-reveal="right"],.js [data-reveal="left"]{transform:translateY(36px)}
}

/* =========================================================
   PIEZA 0 — HEADER CLARO + HERO "NUTRICIÓN SIN FRONTERAS"
   Mobile-first: la base es el celular; los @media (min-width) amplían.
   Foto: img/hero-visual.webp (reemplazable con el mismo nombre).
   ========================================================= */

/* ---------- Header: cápsula clara, logo a color, dos botones ---------- */
.navbar{background:rgba(250,247,240,.74);border:1px solid rgba(255,255,255,.75);box-shadow:0 10px 30px rgba(21,65,74,.10)}
.site-header.scrolled .navbar{background:rgba(250,247,240,.95)}
.logo__img{height:clamp(26px,2.2vw,32px);max-height:none}
.nav a{color:var(--carbon)}
.nav a:hover{color:var(--petroleo)}
.nav a::after{background:var(--petroleo)}
.nav__cta{display:none}
.nav-toggle__bar{background:var(--carbon)}
.header__actions{display:flex;align-items:center;gap:.7rem}
.header__actions .btn{padding:.62rem 1.3rem;font-size:.88rem;gap:.55rem}
.header__actions .btn i{font-size:.8em}
.header__ghost{background:transparent;color:var(--carbon);border:1.5px solid rgba(35,40,38,.5)}
.header__ghost:hover{background:var(--petroleo);border-color:var(--petroleo);color:#fff}
/* Entre 769 y 1240 px solo cabe un botón: queda "Contáctanos" (el que funciona hoy) */
@media(max-width:1240px){ .header__cta{display:none} }
@media(max-width:768px){
  .header__actions{display:none}
  .nav{background:rgba(250,247,240,.97);border:1px solid rgba(21,65,74,.08);box-shadow:0 24px 50px rgba(21,65,74,.18)}
  .nav a,.site-header.scrolled .nav a{color:var(--carbon);border-bottom-color:rgba(21,65,74,.1)}
  .nav a:hover{color:var(--petroleo)}
  .nav a.is-current,.site-header.scrolled .nav a.is-current{color:var(--naranja)}
  .nav .nav__cta,.site-header.scrolled .nav .nav__cta{display:flex;align-items:center;justify-content:center;gap:.55rem;margin-top:.9rem;padding:.9rem 1rem;border-radius:50px;border-bottom:none;background:var(--naranja);color:#fff;font-weight:600}
}

/* ---------- Hero ---------- */
.hx{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:0;background:var(--crema)}
.hx__inner{order:1;width:min(1400px,92%);margin:0 auto;padding:7.4rem 0 0}
.hx__content{position:relative;z-index:2}
.hx__eyebrow{display:inline-flex;align-items:center;gap:.9rem;font-size:.7rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--carbon)}
.hx__eyebrow::after{content:'';width:clamp(36px,6vw,84px);height:1px;background:rgba(35,40,38,.4)}
.hx h1{margin:.85rem 0 1.1rem;font-weight:800;font-size:clamp(2.8rem,12vw,6.6rem);line-height:.98;letter-spacing:-.045em;color:var(--petroleo-dark)}
.hx__soft{color:#5b7774;color:color-mix(in srgb,var(--petroleo) 64%,var(--crema))}
.hx__dot{color:var(--naranja)}
.hx__sub{max-width:44ch;font-size:clamp(1rem,1.3vw,1.22rem);line-height:1.6;color:var(--carbon)}
.hx__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.hx__actions .btn{min-height:52px;padding:.9rem 1.55rem;font-size:1rem;gap:.6rem}
.hx__btn{box-shadow:0 12px 26px rgba(243,146,0,.32)}
.hx__btn i.fa-arrow-right{font-size:.8em}
.hx__ghost{background:rgba(255,255,255,.28);color:var(--carbon);border:1.5px solid rgba(35,40,38,.5)}
.hx__ghost i{color:var(--sage);transition:color .3s}
.hx__ghost:hover{background:var(--petroleo);border-color:var(--petroleo);color:#fff}
.hx__ghost:hover i{color:var(--aqua)}

/* Atributos: en móvil ícono arriba y texto abajo, 3 columnas iguales */
.hx__features{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin:1.9rem 0 0;padding:0}
.hx__features li{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:0 .8rem;border-left:1px solid rgba(35,40,38,.18)}
.hx__features li:first-child{padding-left:0;border-left:none}
.hx__features i{font-size:1.35rem;color:var(--petroleo)}
.hx__features span{font-size:.62rem;font-weight:600;letter-spacing:.12em;line-height:1.45;text-transform:uppercase;color:var(--carbon)}

/* Foto: en móvil es un bloque bajo el texto, fundido con el crema de arriba */
.hx__visual{order:2;position:relative;z-index:1;height:clamp(260px,78vw,440px);margin-top:1.4rem}
.hx__visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:80% 50%}
.hx__visual::before{content:'';position:absolute;left:0;right:0;top:0;height:30%;z-index:1;background:linear-gradient(var(--crema),rgba(237,231,214,0))}
.hx__aside{display:none}

/* Franja de marcas: en móvil fila deslizable */
.hx__brands{order:3;position:relative;z-index:3;background:rgba(250,247,240,.95);border-top:1px solid rgba(21,65,74,.08)}
.hx__brands-track{width:min(1400px,92%);margin:0 auto;display:flex;align-items:center;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.hx__brands-track::-webkit-scrollbar{display:none}
.hx__brand{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:70px;padding:0 1.3rem;border-left:1px solid rgba(35,40,38,.14);scroll-snap-align:start}
.hx__brand:first-child{padding-left:0;border-left:none}
.hx__brand img{width:auto;max-width:112px;max-height:26px;object-fit:contain;filter:grayscale(1) brightness(.35);opacity:.72;transition:filter .35s,opacity .35s,scale .45s var(--ease-spring)}
.hx__brand:hover img{filter:none;opacity:1;scale:1.07}
.hx__more{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;height:70px;padding:0 1.5rem 0 1.3rem;border-left:1px solid rgba(35,40,38,.14);font-size:.85rem;font-weight:600;white-space:nowrap;color:var(--carbon);transition:color .3s}
.hx__more i{transition:translate .4s var(--ease-spring)}
.hx__more:hover{color:var(--naranja)}
.hx__more:hover i{translate:5px 0}

@media(min-width:600px){
  .hx__features{grid-template-columns:repeat(3,auto);justify-content:start}
  .hx__features li{flex-direction:row;align-items:center;gap:.7rem;padding:0 clamp(1rem,2vw,1.6rem)}
  .hx__features span{font-size:.66rem}
}

/* Escritorio: la foto ocupa el lado derecho a toda altura, el texto va sobre el crema */
/* Fondo completo solo en pantallas apaisadas (≥ 3:2): en las más cuadradas la foto 16:9 se recortaría y los productos taparían el texto */
@media(min-width:992px) and (min-aspect-ratio:3/2){
  .hx{min-height:100vh;min-height:100svh}
  .hx__inner{flex:1;display:flex;align-items:center;padding:clamp(7rem,13vh,9rem) 0 clamp(2.5rem,6vh,4.5rem)}
  .hx__content{max-width:min(700px,52%)}
  /* El titular escala con el ancho Y con el alto: en laptops de 768 px de alto el hero completo (con la franja de marcas) cabe en la primera pantalla */
  .hx h1{font-size:min(6.4rem,5.3vw,10.5vh)}
  .hx__sub{font-size:clamp(1rem,min(1.25vw,2.3vh),1.2rem)}
  .hx__actions{margin-top:clamp(1.2rem,3vh,1.8rem)}
  .hx__features{margin-top:clamp(1.4rem,3.4vh,2.2rem)}
  .hx__visual{position:absolute;top:-140px;right:0;bottom:0;width:68%;height:auto;margin:0}
  .hx__visual img{object-position:right center}
  .hx__visual::before{top:0;bottom:0;right:auto;width:42%;height:auto;background:linear-gradient(90deg,var(--crema) 0%,rgba(237,231,214,0) 100%)}
  .hx__aside{display:block;position:absolute;z-index:2;right:clamp(24px,3.6vw,72px);margin:0;color:#fff;text-transform:uppercase;text-shadow:0 1px 14px rgba(0,0,0,.35)}
  .hx__aside--top{top:clamp(8.5rem,21vh,12.5rem);font-size:.7rem;font-weight:600;letter-spacing:.26em;line-height:1.9}
  .hx__aside--top::after{content:'';display:block;width:42px;height:1px;margin-top:.9rem;background:rgba(255,255,255,.7)}
  .hx__aside--bottom{bottom:calc(72px + clamp(2rem,6vh,3.5rem));font-size:.82rem;font-weight:300;letter-spacing:.3em;line-height:1.65}
  .hx__brands-track{justify-content:space-between;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .hx__brand{flex:1 1 0;height:74px;padding:0 1rem}
  .hx__brand img{max-height:32px;max-width:130px}
  .hx__more{height:74px;padding-right:0}
}

/* ---------- Entrada al cargar (misma lógica de fluidez que el resto del sitio) ---------- */
.js .hx [data-intro]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);transition-delay:var(--d,0ms)}
.js.is-loaded .hx [data-intro]{opacity:1;transform:none}
.hx h1 .nl-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hx h1 .nl-line > span{display:inline-block}
.js .hx h1 .nl-line > span{transform:translateY(105%);transition:transform 1.1s var(--ease-out);transition-delay:var(--d,0ms)}
.js.is-loaded .hx h1 .nl-line > span{transform:none}
.js .hx__visual img{opacity:0;scale:1.08;transition:opacity 1.2s ease .15s,scale 2.4s var(--ease-out)}
.js.is-loaded .hx__visual img{opacity:1;scale:1}
@media (prefers-reduced-motion:reduce){
  .js .hx [data-intro],.js .hx h1 .nl-line > span{opacity:1 !important;transform:none !important}
  .js .hx__visual img{opacity:1 !important;scale:1 !important}
}

/* Hero: en celular los dos botones van a ancho completo (lado a lado no caben y quedaban escalonados) */
@media(max-width:599px){
  .hx__actions{flex-direction:column}
  .hx__actions .btn{width:100%;justify-content:center}
}
/* Laptop angosto: 5 logos para que "y más marcas" no se corte */
@media(min-width:992px) and (max-width:1239px){
  .hx__brand:nth-child(6){display:none}
}

/* Franja de marcas del hero: carrusel infinito que gira solo.
   main.js duplica los logos; la animación recorre -50 % y el salto no se ve.
   Se detiene al pasar el mouse y fuera de pantalla (nl-off). */
.hx__brands-inner{display:flex;align-items:stretch}
.hx__marquee{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.hx__marquee-track{display:flex;width:max-content;animation:hx-marquee 55s linear infinite;will-change:transform}
.hx__marquee:hover .hx__marquee-track{animation-play-state:paused}
@keyframes hx-marquee{to{transform:translateX(-50%)}}
.hx__logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:70px;padding:0 clamp(1.5rem,3vw,2.8rem);border-left:1px solid rgba(35,40,38,.14)}
.hx__logo img{width:auto;max-width:118px;max-height:26px;object-fit:contain;filter:grayscale(1) brightness(.35);opacity:.72;transition:filter .35s,opacity .35s,scale .45s var(--ease-spring)}
.hx__logo:hover img{filter:none;opacity:1;scale:1.08}
.hx__brands .hx__more{height:auto;padding:0 clamp(1.1rem,3vw,2.4rem);font-size:.82rem}
@media(min-width:992px){
  .hx__logo{height:74px}
  .hx__logo img{max-width:134px;max-height:32px}
}
@media (prefers-reduced-motion:reduce){
  .hx__marquee{overflow-x:auto}
  .hx__marquee-track{animation:none}
}

/* Celular: el enlace "y más marcas" queda como flecha de 44 px para dejar más espacio a los logos que giran */
@media(max-width:599px){
  .hx__more-txt{display:none}
  .hx__brands .hx__more{width:52px;padding:0;justify-content:center;font-size:1rem}
  .hx__logo{padding:0 1.2rem}
  .hx__logo img{max-width:100px;max-height:24px}
}
/* Logo del header: área táctil de 44 px sin cambiar su tamaño visual */
.logo{padding:9px 0;margin:-9px 0}

/* ---------- FOTO REAL DEL HERO (header-0) ----------
   La foto ya trae la zona izquierda clara para el texto y los textos de la derecha incorporados. */
/* Celular: bloque bajo el texto, encuadrado a la derecha para mostrar productos y textos completos */
@media(max-width:991px),(max-aspect-ratio:1499/1000){
  .hx__visual{height:clamp(300px,100vw,480px)}
  .hx__visual img{object-position:100% 50%}
}
@media(min-width:992px) and (min-aspect-ratio:3/2){
  /* Escritorio: fondo de ancho completo, como la maqueta */
  .hx__visual{left:0;width:100%;top:0}   /* sin sobrante arriba: la foto 16:9 se ve completa, sin zoom ni recorte */
  .hx__inner{width:min(1680px,92%)}       /* en pantallas grandes el texto se corre a la izquierda, como la maqueta */
  .hx__visual img{object-position:right center}
  /* velo crema muy suave solo detrás del texto, para asegurar la lectura */
  .hx__visual::before{width:48%;background:linear-gradient(90deg,rgba(237,231,214,.55) 0%,rgba(237,231,214,.25) 60%,rgba(237,231,214,0) 100%)}
}

/* ---------- "Ir a tienda": la tienda aún no existe ----------
   El botón no lleva a ninguna parte: muestra un aviso animado "Próximamente"
   (una acción siempre debe tener respuesta; ver principio de fluidez). */
.header__cta i.fa-bag-shopping{font-size:.95em}
.nav__contact{display:none}
@media(max-width:768px){
  .nav .nav__contact{display:block}
  .nav .nav__cta{width:100%;border:0;font:inherit;font-weight:600;cursor:pointer}
}
.nl-toast{position:fixed;left:50%;bottom:24px;z-index:210;display:flex;align-items:center;gap:.9rem;width:max-content;max-width:calc(100vw - 32px);padding:1rem 1.3rem;border-radius:18px;background:var(--petroleo);color:#fff;box-shadow:0 20px 50px rgba(14,47,54,.35);transform:translate(-50%,160%);opacity:0;pointer-events:none;transition:transform .55s var(--ease-spring),opacity .3s ease}
.nl-toast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.nl-toast > i{flex:0 0 auto;font-size:1.45rem;color:var(--naranja)}
.nl-toast strong{display:block;font-size:.98rem;line-height:1.3}
.nl-toast span{display:block;font-size:.86rem;line-height:1.45;color:rgba(255,255,255,.82)}
.nl-toast a{color:var(--aqua);text-decoration:underline}

/* Botones del header iguales aunque uno sea <button> y el otro <a> (misma fuente, alto y borde) */
.header__actions .btn{min-height:44px;font-family:inherit;line-height:1.2;border-width:1.5px;border-style:solid}
.header__cta{border-color:transparent}
/* En táctil el :hover queda pegado tras el toque: el cambio de color del botón claro del hero solo con mouse */
@media (hover:none){
  .hx__ghost:hover{background:rgba(255,255,255,.28);border-color:rgba(35,40,38,.5);color:var(--carbon)}
  .hx__ghost:hover i{color:var(--sage)}
  .header__ghost:hover{background:transparent;border-color:rgba(35,40,38,.5);color:var(--carbon)}
}

/* =========================================================
   COLORES (22-sep-2026): los fondos petróleo pasan a AQUA #CDDDD9
   y el footer pasa a tonos NARANJA #F39200.
   · El petróleo se mantiene solo como TINTA (títulos, íconos, enlaces):
     un texto aqua sobre crema no se leería.
   · Sobre aqua y sobre naranja el texto va oscuro (carbón / petróleo
     oscuro): el blanco sobre esos fondos no tiene contraste suficiente.
   ========================================================= */
:root{
  --aqua-dark:#b9cec9;   /* aqua un poco más profundo, para degradados y bordes */
  --naranja-deep:#e58a00;/* naranja algo más profundo para el degradado del footer */
}

/* ---------- Propósito ---------- */
.proposito{background:var(--aqua);color:var(--carbon)}
.proposito__left h2{color:var(--petroleo-dark)}
.proposito__right p{color:var(--carbon)}
.proposito .section-tag,.services .section-tag{color:var(--petroleo);background:rgba(21,65,74,.1)}
.proposito__bg-text{color:var(--petroleo);opacity:.06}
.proposito__marquee-label{color:rgba(21,65,74,.55)}
.proposito__circle{border-color:rgba(21,65,74,.12)}
.proposito__circle:hover{border-color:rgba(21,65,74,.3)}

/* ---------- Qué ofrecemos ---------- */
.services{background:var(--aqua)}
.services .section-head h2{color:var(--petroleo-dark)}
.services .offers__note{color:var(--carbon)}
.services .offers__note a{color:var(--petroleo)}
.services .offers__dot{background:rgba(21,65,74,.25)}
.services .offers__dot.is-active{background:var(--naranja)}

/* ---------- Cifras (foto): los desvanecidos arriba y abajo empalman con el aqua ---------- */
.cifras__fade-top{background:linear-gradient(to bottom,var(--aqua) 0%,transparent 100%)}
.cifras__fade-bottom{background:linear-gradient(to top,var(--aqua) 0%,transparent 100%)}

/* ---------- Rango de servicio ---------- */
.range{background:var(--aqua);color:var(--carbon)}
.range .section-tag,.range .section-tag--light{color:var(--petroleo);background:rgba(21,65,74,.1)}
.range__title{color:var(--petroleo-dark)}
.range__list,.range__list li{border-color:rgba(21,65,74,.18)}
.range__num{color:rgba(35,40,38,.55)}
.range__name{color:var(--carbon)}
.range__list li:hover .range__name{color:var(--petroleo)}

/* ---------- Cabecera de páginas internas ---------- */
.page-hero{background:linear-gradient(135deg,var(--aqua) 0%,var(--aqua-dark) 100%);color:var(--carbon)}
.page-hero h1{color:var(--petroleo-dark)}
.page-hero p{color:var(--carbon)}
.page-hero .section-tag{color:var(--petroleo);background:rgba(21,65,74,.1)}
.page-hero .chip-list span{color:var(--petroleo);background:rgba(255,255,255,.55);border-color:rgba(21,65,74,.14)}
.crumb{color:var(--petroleo);background:rgba(21,65,74,.1)}
a.crumb:hover{background:rgba(21,65,74,.18)}
.crumb--current{color:#fff;background:var(--naranja)}
.page-hero .btn--ghost{color:var(--carbon);border-color:rgba(35,40,38,.5)}
.page-hero .btn--ghost:hover{background:var(--petroleo);border-color:var(--petroleo);color:#fff}

/* ---------- Banners de llamado (páginas internas) ---------- */
.cta-banner,.cta-banner--glass{background:var(--aqua)}
.cta-banner h2{color:var(--petroleo-dark)}
.cta-banner p,.cta-banner--glass p{color:var(--carbon)}
.cta-banner .btn--ghost{color:var(--carbon);border-color:rgba(35,40,38,.5)}

/* ---------- Botones y piezas sueltas ---------- */
.contact-card__btn{background:var(--aqua);color:var(--petroleo-dark)}
.contact-card__btn:hover{background:var(--naranja);color:#fff}
.back-to-top{background:var(--naranja);color:#fff;border-color:rgba(255,190,110,.6);box-shadow:0 8px 22px rgba(243,146,0,.35)}
.back-to-top:hover{background:var(--naranja-dark);color:#fff}
.header__ghost:hover,.hx__ghost:hover{background:var(--aqua);border-color:var(--aqua-dark);color:var(--petroleo-dark)}
.hx__ghost:hover i{color:var(--petroleo)}
.area__toggle:hover{background:var(--aqua);color:var(--petroleo-dark)}
.fb-modal__check--soft{background:linear-gradient(135deg,var(--aqua),var(--aqua-dark));color:var(--petroleo-dark);box-shadow:0 12px 30px rgba(21,65,74,.18)}
.nl-toast{background:var(--aqua);color:var(--carbon);box-shadow:0 20px 50px rgba(35,40,38,.25)}
.nl-toast span{color:rgba(35,40,38,.8)}
.nl-toast a{color:var(--petroleo)}
/* Velos oscuros (menú móvil abierto, popup del formulario): neutros en vez de petróleo */
.nav-overlay.show{background:rgba(35,40,38,.45)}
.fb-modal-overlay{background:rgba(35,40,38,.55)}

/* ---------- FOOTER EN TONOS NARANJA ---------- */
.footer__overlay{background:linear-gradient(180deg,rgba(243,146,0,.93) 0%,rgba(229,138,0,.96) 100%)}
.footer__card{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);box-shadow:0 30px 60px rgba(120,60,0,.22)}
.footer__deco{border-color:rgba(35,40,38,.25)}
.footer__watermark{color:#fff;opacity:.4}
.footer__watermark::after{background:rgba(35,40,38,.5)}
.footer__grid{color:var(--carbon)}
.footer__tagline,.footer__links h4,.footer__subscribe h4{color:var(--carbon)}
.footer__email,.footer__phone{color:var(--petroleo-dark)}
.footer__email:hover,.footer__phone:hover{color:#fff}
.footer__social a{color:var(--carbon);border-color:rgba(35,40,38,.3)}
.footer__social a:hover{background:var(--carbon);border-color:var(--carbon);color:#fff}
.footer__links,.footer__copy{border-left-color:rgba(35,40,38,.18)}
.footer__links a{color:rgba(35,40,38,.85)}
.footer__links a:hover{color:#fff}
.footer__soon{color:rgba(35,40,38,.85)}
.footer__soon small{color:rgba(35,40,38,.6)}
.footer__sub-form{border-bottom-color:rgba(35,40,38,.35)}
.footer__sub-form input{color:var(--carbon)}
.footer__sub-form input::placeholder{color:rgba(35,40,38,.6)}
.footer__sub-form button{color:var(--carbon)}
.footer__sub-form button:hover{color:#fff}
.footer__subscribe p,.footer__copy p{color:rgba(35,40,38,.78)}
/* Contraste (auditoría WCAG del 22-sep-2026) */
.proposito__marquee-label{color:rgba(21,65,74,.78)}
.range__num{color:rgba(35,40,38,.75)}
.post__date{color:rgba(35,40,38,.72)}
/* "Volver a novedades" era blanco sobre blanco (invisible) en las noticias */
.article .btn--ghost{color:var(--carbon);border-color:rgba(35,40,38,.45)}
.article .btn--ghost:hover{background:var(--aqua);border-color:var(--aqua-dark);color:var(--petroleo-dark)}

/* =========================================================
   AJUSTES 22-sep-2026: texto del hero alineado con el logo del header
   + footer más bajo y discreto
   ========================================================= */

/* ---------- Hero: mismo ancho y margen interno que la cápsula del header ---------- */
/* .navbar mide min(1320px,94%) y el logo empieza a 1,7rem (+1 px de borde) de su borde */
.hx__inner,
.hx__brands-inner{width:min(1320px,94%);margin-left:auto;margin-right:auto}
.hx__content{padding-left:calc(1.7rem + 1px)}
@media(min-width:769px) and (max-width:1180px){
  .hx__content{padding-left:calc(1.2rem + 1px)}   /* en esa franja el header usa 1,2rem */
}
@media(min-width:992px) and (min-aspect-ratio:3/2){
  .hx__inner{width:min(1320px,94%)}
  .hx__content{max-width:min(640px,48%)}
  .hx h1{font-size:min(6rem,5vw,10vh)}
}

/* ---------- Footer más bajo y discreto ---------- */
.footer{padding:4.5rem 0 2.5rem;background:none}
.footer__bg{display:none !important}                 /* sin foto de fondo: naranja liso, más tranquilo */
.footer__overlay{background:linear-gradient(180deg,#f1ab40 0%,#f2a127 100%)}   /* naranja de la paleta suavizado con crema */
.footer__watermark{top:1.1rem;font-size:clamp(3rem,8vw,7.5rem);opacity:.22}
.footer__deco{display:none}
.footer__card{padding:2.2rem 2.6rem;border-radius:24px;background:rgba(255,255,255,.16);box-shadow:0 14px 34px rgba(120,60,0,.12)}
.footer__grid{gap:1.2rem 3rem}
.footer__tagline{font-size:1.02rem;margin-bottom:1rem;max-width:320px}
.footer__email,.footer__phone{font-size:1.2rem;padding:.2rem 0}
.footer__social{padding-top:1rem}
.footer__links h4,.footer__subscribe h4{font-size:1.08rem;margin-bottom:.8rem}
.footer__links ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.6rem}
.footer__links ul li{margin-bottom:.35rem}
.footer__links a{padding:.15rem 0}
.footer__sub-form{margin-bottom:.8rem}
.footer__subscribe p{font-size:.88rem}
.footer__copy{padding-top:.6rem}
.footer__copy p{font-size:.84rem}
@media(max-width:992px){
  .footer__card{padding:2rem}
  .footer__grid{gap:1.4rem 2rem}
}
@media(max-width:768px){
  .footer{padding:3rem 0 2rem}
  .footer__watermark{top:.9rem;font-size:2.6rem}
}
@media(max-width:560px){
  .footer__card{padding:1.6rem 1.3rem}
  .footer__grid{gap:1.3rem}
  .footer__email,.footer__phone{font-size:1.1rem}
  .footer__links a{padding:.4rem 0}
}
/* Footer discreto: sin marca de agua (era lo que más llamaba la atención y, con el footer más bajo, se montaba sobre la tarjeta) */
.footer__watermark{display:none}
.footer{padding-top:3rem}
/* Columnas rebalanceadas: la de marca tenía espacio de sobra y la de enlaces partía textos en dos líneas */
@media(min-width:993px){ .footer__grid{grid-template-columns:1fr 1.35fr 1fr} }
.footer__links a{white-space:nowrap}
@media(max-width:560px){
  /* en celular el párrafo repetía el correo y teléfono que ya están arriba */
  .footer__subscribe p{display:none}
  .footer__sub-form{margin-bottom:0}
  .footer{padding:2rem 0 1.6rem}
}

/* =========================================================
   HOME EN CAJAS (22-sep-2026)
   Bajo el banner, cada sección es una caja con esquinas redondeadas,
   con aire blanco a los lados y entre cajas; el fondo de la página es blanco.
   Solo aplica al home (<body class="is-home">).
   ========================================================= */
body.is-home{
  background:#fff;
  --caja-gutter:clamp(18px,3.4vw,72px);   /* aire a los lados */
  --caja-gap:clamp(12px,1.6vw,24px);      /* aire entre cajas */
  --caja-radio:clamp(20px,2.4vw,36px);
}
body.is-home > section:not(.hx),
body.is-home > footer.footer{
  width:min(1600px,calc(100% - 2 * var(--caja-gutter)));
  margin:var(--caja-gap) auto 0;
  border-radius:var(--caja-radio);
  overflow:hidden;
  isolation:isolate;          /* el redondeo recorta también las capas animadas/fijas de adentro */
}
body.is-home > footer.footer{margin-bottom:var(--caja-gap)}

/* Cifras (foto) + Rango: una sola caja (la foto se funde en el aqua de abajo) */
body.is-home > section.cifras{border-bottom-left-radius:0;border-bottom-right-radius:0}
body.is-home > section.range{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}   /* section.X: mismo peso que la regla general y va después, así gana */
body.is-home .cifras__fade-top{display:none}   /* ya no empalma con la caja de arriba */

/* Crema sobre blanco: una línea finísima define el borde de las cajas claras */
body.is-home > .smart,
body.is-home > .testimonials,
body.is-home > .blog{box-shadow:inset 0 0 0 1px rgba(21,65,74,.06)}

/* "Cómo trabajamos": la tarjeta no tenía relleno y al pasar el mouse la sombra quedaba pegada al texto.
   Relleno + margen negativo del mismo tamaño: sin hover el texto queda exactamente donde estaba. */
@media (hover:hover) and (pointer:fine){
  .areas--3 .area{padding:1.6rem 1.8rem 1.8rem;margin:-1.6rem -1.8rem -1.8rem;border-radius:22px;transition:translate .45s var(--ease-spring),box-shadow .45s var(--ease-out),background .35s ease}
  .areas--3 .area:hover{background:#fff;box-shadow:0 18px 44px rgba(21,65,74,.12)}
}

/* Footer (pedido 22-sep): a lo ancho completo (fuera de las cajas) y con su foto de fondo original,
   bajo un velo naranja semitransparente para que la imagen se vea. */
body.is-home > footer.footer{width:100%;margin:var(--caja-gap) 0 0;border-radius:0}
.footer{background:url('../img/footer-bg.webp') center/cover no-repeat}
@media(min-width:769px){ .footer__bg{display:block !important} }
.footer__overlay{background:linear-gradient(180deg,rgba(243,146,0,.8) 0%,rgba(229,138,0,.88) 100%)}
.footer__card{background:rgba(255,255,255,.2)}

/* Testimonios: tarro de proteína más grande, hasta casi llegar a las flechas (solo escritorio/tablet; en móvil queda como estaba) */
@media(min-width:769px){
  .testimonials::after{width:54%;height:auto;aspect-ratio:817/768;right:-6%;top:50%;bottom:auto;transform:translateY(-50%) rotate(-12deg)}
  .testimonials .container{position:relative;z-index:2}   /* texto y flechas siempre por encima del tarro */
}

/* =========================================================
   "Todo nuestro rango" en tarjetas (22-sep-2026)
   Antes eran 6 filas de texto grande: mucho peso visual y poco atractivo.
   Ahora cada servicio es una tarjeta blanca con ícono, número y una línea.
   ========================================================= */
.range__grid{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:1.8rem}
.rng{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:'icono titulo flecha' 'icono texto flecha';align-items:center;gap:.2rem 1rem;padding:1.15rem 1.2rem;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(21,65,74,.06);transition:translate .45s var(--ease-spring),box-shadow .45s var(--ease-out),background .3s}
.rng__num{position:absolute;top:.75rem;right:1.1rem;font-size:.68rem;font-weight:700;letter-spacing:.14em;color:rgba(35,40,38,.35)}
.rng__icon{grid-area:icono;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;background:var(--aqua);color:var(--petroleo);font-size:1.15rem;transition:background .35s,color .35s,scale .45s var(--ease-spring),rotate .45s var(--ease-spring)}
.rng h3{grid-area:titulo;margin:0;font-size:1.02rem;line-height:1.25;color:var(--petroleo-dark)}
.rng p{grid-area:texto;margin:.15rem 0 0;font-size:.88rem;line-height:1.45;color:rgba(35,40,38,.72)}
.rng__go{grid-area:flecha;display:none;color:var(--naranja);font-size:.95rem}
@media(min-width:700px){
  .range__grid{grid-template-columns:repeat(2,1fr);gap:1rem}
}
@media(min-width:1100px){
  .range__grid{grid-template-columns:repeat(3,1fr);gap:1.1rem}
  .rng{grid-template-columns:1fr auto;grid-template-areas:'icono flecha' 'titulo titulo' 'texto texto';align-items:start;gap:.55rem;padding:1.5rem 1.5rem 1.6rem;min-height:210px;align-content:start}
  .rng__num{top:auto;bottom:1.4rem;right:1.5rem}
  .rng h3{font-size:1.12rem;margin-top:.5rem}
  .rng__go{display:block;justify-self:end;translate:0 0;transition:translate .4s var(--ease-spring),opacity .3s;opacity:.55}
}
@media (hover:hover) and (pointer:fine){
  .rng:hover{translate:0 -5px;box-shadow:0 18px 40px rgba(21,65,74,.14)}
  .rng:hover .rng__icon{background:var(--petroleo);color:#fff;scale:1.06;rotate:-6deg}
  .rng:hover .rng__go{translate:5px 0;opacity:1}
}
.rng:focus-visible{outline:2px solid var(--naranja);outline-offset:3px}

/* En celular el número se encimaba con los títulos largos; es decorativo, se oculta */
@media(max-width:699px){ .rng__num{display:none} .rng h3{font-size:1rem} }
/* Área táctil de 44 px para correo y teléfono del footer en celular */
@media(max-width:768px){ .footer__email,.footer__phone{padding:.5rem 0} }

/* =========================================================
   AJUSTES 22-sep-2026 (tanda 5)
   ========================================================= */

/* 1) Números de las tarjetas de "rango": más contraste (estaban en 2,09:1) */
.rng__num{color:rgba(35,40,38,.58)}

/* 2) HERO EN CELULAR: la foto va entre el texto y el botón "Compra mayorista".
   .hx__inner y .hx__content se vuelven "transparentes" (display:contents) para poder
   ordenar foto y textos como hermanos; por eso el ancho y el margen van en cada pieza. */
@media(max-width:991px){
  .hx{display:flex;flex-direction:column}
  .hx__inner,.hx__content{display:contents}
  .hx__eyebrow,.hx h1,.hx__sub,.hx__actions,.hx__features{
    box-sizing:border-box;width:min(1320px,94%);margin-left:auto;margin-right:auto;
    padding-left:calc(1.7rem + 1px);padding-right:.6rem;
  }
  .hx__eyebrow{order:1;margin-top:7.4rem;width:auto;max-width:94%}
  .hx h1{order:2;margin-top:.85rem}
  .hx__sub{order:3}
  .hx__visual{order:4;margin-top:1.5rem}
  .hx__actions{order:5;margin-top:1.5rem}
  .hx__features{order:6;margin-top:1.6rem;margin-bottom:.4rem}
  .hx__brands{order:7}
}

/* 3) PROPÓSITO — clientes: en celular una sola fila deslizable (antes se veía
   desordenado en dos filas con tamaños distintos) */
@media(max-width:768px){
  .proposito__circles--static{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;
    gap:10px;padding:.4rem 1.2rem 1rem;max-width:none;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  }
  .proposito__circles--static::-webkit-scrollbar{display:none}
  .proposito__circle{scroll-snap-align:center}
  .proposito__circle--lg{width:86px;height:86px}
  .proposito__circle--sm{width:41px;height:41px}
}

/* 4) NOVEDADES: cada noticia como tarjeta blanca dentro de la caja */
.blog .post{background:#fff;border-radius:20px;padding:.9rem .9rem 1.3rem;box-shadow:0 1px 2px rgba(21,65,74,.06)}
.blog .post__img{border-radius:14px}
.blog .post__body{padding:1.1rem .5rem 0}
@media (hover:hover) and (pointer:fine){
  .blog .post{transition:translate .45s var(--ease-spring),box-shadow .45s var(--ease-out)}
  .blog .post:hover{box-shadow:0 20px 44px rgba(21,65,74,.14)}
}

/* 5) TESTIMONIOS: fuera de la caja, a lo ancho completo y con fondo blanco */
body.is-home > section.testimonials{
  width:100%;margin:var(--caja-gap) 0 0;border-radius:0;box-shadow:none;background:#fff;
}
.testimonials .container{width:min(1600px,calc(100% - 2 * var(--caja-gutter,32px)))}
.rng__num{color:rgba(35,40,38,.72);font-size:.72rem}

/* =========================================================
   TESTIMONIOS TIPO NOTIFICACIÓN DE iPHONE (22-sep-2026)
   Tarjeta de vidrio esmerilado: cabecera con "ícono" (la foto) y nombre,
   y el comentario debajo, como una notificación.
   · El desenfoque real (backdrop-filter) va SOLO en la tarjeta activa:
     es lo único que se ve nítido y así no penaliza el rendimiento.
   · Detrás hay una mancha de color muy difuminada: sin algo de color
     debajo, el vidrio sobre fondo blanco no se notaría.
   ========================================================= */
.testimonials::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:-6%;top:6%;width:min(820px,64%);height:78%;
  background:
    radial-gradient(58% 58% at 32% 38%,rgba(205,221,217,.9),transparent 70%),
    radial-gradient(46% 46% at 72% 74%,rgba(243,146,0,.16),transparent 72%);
  filter:blur(42px);
}
.testimonials .container{position:relative;z-index:2}
.testi__viewport{height:clamp(300px,26vw,380px)}

/* La tarjeta */
.testi__item{
  display:flex;flex-direction:column-reverse;gap:.55rem;
  padding:clamp(.9rem,1.1vw,1.15rem) clamp(1rem,1.3vw,1.35rem);
  border-radius:22px;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 8px 24px rgba(21,65,74,.07);
  transform-origin:0 50%;
}
.testi__item.is-active{
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(16px) saturate(165%);
  backdrop-filter:blur(16px) saturate(165%);
  border-color:rgba(255,255,255,.85);
  box-shadow:0 18px 44px rgba(21,65,74,.14);
}
.testi__item blockquote{margin:0;font-size:clamp(1rem,1.45vw,1.28rem);line-height:1.45}

/* Cabecera estilo notificación: "ícono" cuadrado redondeado + nombre + rol */
.testi__author{align-items:center;gap:.7rem}
.testi__author img{width:clamp(34px,2.6vw,40px);height:clamp(34px,2.6vw,40px);border-radius:11px;box-shadow:0 2px 6px rgba(21,65,74,.18)}
.testi__author strong{font-size:.82rem;letter-spacing:.02em}
.testi__author span{font-size:.76rem;color:rgba(35,40,38,.65)}

@media(max-width:768px){
  .testi__viewport{height:270px}
  .testi__item{border-radius:18px;padding:.85rem .95rem}
  .testi__item blockquote{font-size:.98rem}
  .testimonials::before{left:-14%;width:86%;height:70%;filter:blur(34px)}
}
@media (prefers-reduced-motion:reduce){
  .testi__item.is-active{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.92)}
}

/* La sombra de la tarjeta de testimonio se cortaba contra los bordes del visor.
   El relleno lateral le da espacio a la sombra y el margen negativo lo compensa,
   así las tarjetas quedan exactamente donde estaban. */
/* La sombra de la tarjeta (44px de desenfoque) se cortaba contra el borde del visor.
   Se le da más aire del que mide la sombra y, por si acaso, la máscara ahora también
   desvanece los costados: donde antes había filo, ahora hay degradado. */
.testi__viewport{
  padding-inline:36px;margin-inline:-36px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent),linear-gradient(to right,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent),linear-gradient(to right,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
@media(max-width:768px){
  .testi__viewport{padding-inline:20px;margin-inline:-20px;
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent),linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
    mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent),linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%)}
}
/* La sombra tenía 44px de desenfoque, pero la tarjeta va a 35px del borde de la
   ventana: no cabía y la sección la cortaba. Ahora mide menos que ese margen. */
.testi__item.is-active{box-shadow:0 14px 30px rgba(21,65,74,.13)}
.testi__item{box-shadow:0 6px 18px rgba(21,65,74,.06)}

/* =========================================================
   PRUEBA CORPORATIVA (23-sep-2026) — fondo de "Nuestro propósito"
   Degradado de tres tonos: dos luces blancas en esquinas opuestas y el
   petróleo de la paleta al centro, más una capa de grano para que el color
   se vea disperso y no como un plano pesado. Todo en CSS: no suma peso.
   Para volver atrás basta con borrar este bloque.
   ========================================================= */
.proposito,
#blog,
.page-hero{
  background:
    /* luz superior izquierda */
    radial-gradient(78% 66% at -8% -14%, rgba(255,255,255,.58) 0%, rgba(233,243,241,.22) 32%, rgba(255,255,255,0) 60%),
    /* luz inferior derecha */
    radial-gradient(68% 62% at 108% 114%, rgba(255,255,255,.5) 0%, rgba(233,243,241,.18) 34%, rgba(255,255,255,0) 62%),
    /* petróleo al medio, el color fuerte */
    linear-gradient(135deg, #1c4b54 0%, var(--petroleo) 46%, #10353d 100%);
  color:#fff;
}
/* El grano: ruido generado en el propio navegador, sin archivo de imagen */
.proposito::after,
#blog::after,
.page-hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.75;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* El texto vuelve a blanco sobre el fondo oscuro */
.proposito__left h2,
.proposito .proposito__left h2{color:#fff}
.proposito__right p{color:rgba(255,255,255,.88)}
.proposito .section-tag{color:var(--aqua);background:rgba(205,221,217,.16);border-color:rgba(205,221,217,.28)}
.proposito__marquee-label{color:rgba(255,255,255,.62)}
.proposito__bg-text{color:#fff;opacity:.07}
.proposito__circle{border-color:rgba(255,255,255,.3)}
.proposito__circle:hover{border-color:rgba(255,255,255,.75)}
.proposito .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.proposito .btn--ghost:hover{background:#fff;border-color:#fff;color:var(--petroleo-dark)}

@media (prefers-reduced-motion:reduce){ .proposito::after{opacity:.5} }

/* Círculos de clientes girando en móvil (main.js arma la pista duplicada) */
@media(max-width:768px){
  .proposito__circles--static{overflow:hidden;justify-content:flex-start;padding:0;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
  .proposito__loop{display:flex;align-items:center;gap:12px;width:max-content;
    animation:marquee 34s linear infinite;will-change:transform}
  .proposito__loop .proposito__pair{gap:8px}
  /* Al tocar se detiene, por si alguien quiere mirar una marca */
  .proposito__circles--static:active .proposito__loop{animation-play-state:paused}
  .nl-off .proposito__loop{animation-play-state:paused}
}
@media(max-width:768px) and (prefers-reduced-motion:reduce){
  .proposito__loop{animation:none}
  .proposito__circles--static{overflow-x:auto;scrollbar-width:none}
}

/* Los círculos crecen solo donde hay mouse: en táctil el efecto se quedaba
   pegado al tocar y estorbaba el giro de la fila. */
@media (hover:none),(pointer:coarse){
  .proposito__circle:hover,.proposito__circle:active,.proposito__circle:focus{transform:none;box-shadow:none;border-color:rgba(255,255,255,.3)}
  .proposito__circle:hover img{transform:none}
  .proposito__loop .proposito__circle{transition:none}
}

/* =========================================================
   PRUEBA (23-sep-2026) — fondo de diseño en "Qué ofrecemos"
   Reemplaza el aqua plano por la pieza gráfica naranja. Dos variantes:
   la apaisada para escritorio y la vertical para celular, porque la caja
   cambia de 1,75:1 a 0,45:1 y una sola imagen se recortaría mal.
   Para volver atrás basta con borrar este bloque.
   ========================================================= */
.services{
  background-color:var(--naranja);           /* color de respaldo mientras carga */
  background-image:url('../img/fondo-servicios.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
@media(max-width:600px){
  .services{background-image:url('../img/fondo-servicios-movil.webp')}
}

/* El texto pasa a tinta petróleo, que es lo que contrasta sobre el naranja */
.services h2,
.services .section-head h2{color:var(--petroleo-dark)}
.services .section-tag{color:var(--petroleo-dark);background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.7)}
.services .offers__note,
.services .section-head p{color:rgba(14,47,54,.9)}
.services .offers__nav{background:rgba(255,255,255,.9);color:var(--petroleo-dark);border-color:rgba(255,255,255,.8)}
.services .offers__nav:hover{background:#fff}
.services .offers__dot{background:rgba(14,47,54,.28)}
.services .offers__dot.is-active{background:var(--petroleo-dark)}

/* ---------------------------------------------------------
   Tarjetas de "Qué ofrecemos" en vidrio sobre el fondo naranja.
   Minimalistas: el vidrio deja ver el diseño de atrás, una luz blanca
   entra por la esquina y otra sigue al cursor. Al pasar el mouse la
   tarjeta se tiñe del naranja de la marca.
   --------------------------------------------------------- */
.services .offer{
  background-color:rgba(255,255,255,.46);
  /* la luz que sigue al cursor (main.js escribe --mx y --my) */
  background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,-15%), rgba(255,255,255,.62), transparent 62%);
  -webkit-backdrop-filter:blur(22px) saturate(175%);
  backdrop-filter:blur(22px) saturate(175%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 16px 36px rgba(110,55,0,.14), inset 0 1px 0 rgba(255,255,255,.7);
  transition:background-color .5s cubic-bezier(.4,0,.2,1),border-color .5s,box-shadow .5s,translate .5s var(--ease-out);
}
/* Luz blanca fija en la esquina superior, como un reflejo */
.services .offer::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(130% 85% at 10% -12%, rgba(255,255,255,.62), rgba(255,255,255,0) 58%);
}

/* Tinta oscura: sobre el naranja es lo que se lee (el blanco daría 2,3:1) */
.services .offer__num{color:rgba(14,47,54,.78)}
.services .offer h3,
.services .offer__arrow{color:var(--petroleo-dark)}

/* Al pasar el mouse: se tiñe del naranja de la marca y se levanta apenas */
.services .offer:hover{
  background-color:rgba(243,146,0,.93);
  border-color:rgba(255,255,255,.75);
  box-shadow:0 24px 52px rgba(110,55,0,.26), inset 0 1px 0 rgba(255,255,255,.85);
  translate:0 -6px;
}
.services .offer:hover .offer__num{color:rgba(14,47,54,.85)}
.services .offer:hover h3,
.services .offer:hover .offer__arrow{color:var(--petroleo-dark)}

/* El equipo que no soporta vidrio esmerilado recibe un blanco sólido legible */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .services .offer{background-color:rgba(255,255,255,.9)}
  .services .offer:hover{background-color:rgba(243,146,0,.92)}
}
@media (prefers-reduced-motion:reduce){
  .services .offer:hover{translate:none}
}

/* Tarjetas de "Qué ofrecemos": sin numeración, titular más grande y la flecha
   convertida en botón circular abajo a la derecha, para que se lea como
   "entrar aquí" y no como un adorno. */
.services .offer{display:flex;flex-direction:column}
.services .offer__num{display:none}
.services .offer h3{
  font-size:clamp(1.85rem,2.3vw,2.45rem);
  line-height:1.12;
  margin:0 0 .6rem;
  max-width:11ch;
}
/* La flecha, dentro de un círculo de vidrio */
.services .offer__arrow{
  position:absolute;right:1.5rem;bottom:1.5rem;z-index:3;
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  font-size:1.15rem;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(110,55,0,.16);
  color:var(--petroleo-dark);
  transition:background .4s,color .4s,scale .45s var(--ease-spring),box-shadow .4s;
}
.services .offer:hover .offer__arrow{
  translate:none;                       /* antes se corría 8 px: dentro del círculo no corresponde */
  background:var(--petroleo-dark);
  color:#fff;
  scale:1.08;
  box-shadow:0 10px 26px rgba(14,47,54,.32);
}
/* La imagen sube un poco para no chocar con el botón */
.services .offer__img{height:58%;justify-content:flex-start;padding-left:1.4rem}
@media(max-width:768px){
  .services .offer__arrow{width:52px;height:52px;right:1.1rem;bottom:1.1rem}
  .services .offer h3{font-size:clamp(1.6rem,6vw,2rem);max-width:13ch}
}

/* --- Rango de servicios en crema y Novedades con el fondo corporativo --- */
.range{background:var(--crema);color:var(--carbon)}
.range .section-tag,.range .section-tag--light{color:var(--petroleo);background:rgba(21,65,74,.12)}

#blog{position:relative;overflow:hidden}
#blog .container{position:relative;z-index:2}
#blog h2{color:#fff}
#blog .section-tag{color:var(--aqua);background:rgba(205,221,217,.16);border-color:rgba(205,221,217,.28)}
#blog .post__body h3{color:var(--petroleo-dark)}
#blog .post__meta,#blog .post__body p{color:rgba(35,40,38,.78)}

/* El icono 360 va como SVG: hereda el color, así contrasta en reposo y en hover */
.offer__img--360{align-items:center;justify-content:center;padding:0 1.6rem 1.2rem}
.offer__svg{width:min(56%,218px);height:auto;color:var(--petroleo);opacity:.88;
  transition:color .5s cubic-bezier(.4,0,.2,1),opacity .5s,scale .7s var(--ease-out),translate .7s var(--ease-out);
  filter:drop-shadow(0 6px 16px rgba(110,55,0,.18))}
.services .offer:hover .offer__svg{color:var(--petroleo-dark);opacity:1;scale:1.06;translate:0 -8px}
@media(max-width:768px){ .offer__svg{width:min(52%,180px)} }

/* La caja y el icono 360 quedaban pegados a la izquierda: se corren al centro-derecha,
   en línea con el avión, que tiene su propio aire dentro del archivo. */
.services .offer:nth-child(1) .offer__img{justify-content:center;padding-left:6px;padding-right:.6rem}
.services .offer__img--360{justify-content:center;padding-left:3px;padding-right:.6rem}
@media(max-width:768px){
  .services .offer:nth-child(1) .offer__img{padding-left:1.8rem}
  .services .offer__img--360{padding-left:1.6rem}
}


/* =========================================================
   Servicios de apoyo dentro de "Qué ofrecemos"
   (vienen de la sección "Nuestro rango de servicio", ya eliminada)
   ========================================================= */
.servs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.4vw,1.2rem);margin-top:clamp(1rem,1.8vw,1.6rem)}
.serv{
  position:relative;display:flex;flex-direction:column;gap:.4rem;
  padding:1.3rem 1.3rem 3.2rem;border-radius:18px;
  background-color:rgba(255,255,255,.46);
  -webkit-backdrop-filter:blur(22px) saturate(175%);backdrop-filter:blur(22px) saturate(175%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 10px 26px rgba(110,55,0,.12), inset 0 1px 0 rgba(255,255,255,.7);
  color:var(--petroleo-dark);
  transition:background-color .5s cubic-bezier(.4,0,.2,1),border-color .5s,box-shadow .5s,translate .5s var(--ease-out);
}
.serv__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.7);color:var(--petroleo);font-size:1.1rem;margin-bottom:.35rem}
.serv h3{font-size:1.05rem;line-height:1.25;color:var(--petroleo-dark)}
.serv p{font-size:.88rem;line-height:1.5;color:rgba(14,47,54,.82)}
.serv__go{
  position:absolute;right:1.1rem;bottom:1.1rem;
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.8);
  color:var(--petroleo-dark);font-size:.85rem;
  transition:background .4s,color .4s,scale .45s var(--ease-spring);
}
.serv:hover{background-color:rgba(243,146,0,.93);border-color:rgba(255,255,255,.75);
  box-shadow:0 18px 40px rgba(110,55,0,.24), inset 0 1px 0 rgba(255,255,255,.85);translate:0 -5px}
.serv:hover .serv__go{background:var(--petroleo-dark);color:#fff;scale:1.08}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .serv{background-color:rgba(255,255,255,.9)}
}
@media(max-width:1100px){ .servs{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .servs{grid-template-columns:1fr} .serv{padding-bottom:1.3rem} .serv__go{position:static;margin-top:.5rem} }
@media (prefers-reduced-motion:reduce){ .serv:hover{translate:none} }

/* Las cifras ya viven DENTRO de "Qué ofrecemos", no como sección hermana, así
   que la caja naranja vuelve a cerrar con sus cuatro esquinas redondeadas. */
body.is-home > section.services{margin-bottom:0}

/* Quedaron tres servicios de apoyo: la fila se alinea con las tarjetas grandes */
.servs{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){ .servs{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .servs{grid-template-columns:1fr} }

/* Unión entre "Qué ofrecemos" y las cifras: la franja superior continúa la
   misma imagen naranja y se desvanece sobre la foto, así se leen como un solo
   bloque. Un degradado de color plano dejaba costura, porque el borde va de
   #fd951f a #ffd69d donde está el patrón de logos. */
body.is-home .cifras__fade-top{
  display:block;height:clamp(140px,26%,280px);z-index:1;
  background-image:url("../img/fondo-servicios.webp");
  background-size:cover;background-position:center bottom;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.92) 18%,rgba(0,0,0,.45) 55%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.92) 18%,rgba(0,0,0,.45) 55%,transparent 100%);
}
/* Abajo empalma con los testimonios, que son blancos (antes se iba a aqua) */
body.is-home > section.cifras .cifras__fade-bottom{background:linear-gradient(to top,#fff 0%,rgba(255,255,255,0) 100%);height:26%}
@media(max-width:768px){ body.is-home .cifras__fade-top{height:clamp(90px,22%,160px)} }

/* Testimonios: el fondo sigue siendo de ancho completo, pero su contenido y el
   tarro se alinean con el mismo marco que el resto del sitio. Antes, en pantallas
   muy anchas la tarjeta quedaba pegada al borde y el conjunto perdía armonía. */
.testi__inner{width:min(1600px,calc(100% - 2 * var(--caja-gutter)));margin-inline:auto}
@media(min-width:1800px){
  .testimonials::after{right:calc((100% - 1800px) / 2 - 60px)}
}

/* =========================================================
   Pantallas muy anchas / zoom out (23-sep-2026)
   El problema no eran las imágenes creciendo, sino que el CONTENIDO se
   congelaba: el contenedor se quedaba en 1400-1600 px y la tipografía tocaba
   techo, mientras el fondo seguía estirándose. Resultado: todo chico y perdido
   en el medio. Aquí el contenido acompaña a la imagen, así la proporción entre
   ambos se mantiene y el sitio se lee igual, solo que más grande.
   ========================================================= */
@media(min-width:1800px){
  :root{ --caja-gutter:clamp(40px,2.4vw,70px); --caja-radio:clamp(36px,2.2vw,52px); }
  .container{width:min(1900px,92%)}
  body.is-home > section:not(.hx):not(.testimonials){width:min(2100px,calc(100% - 2 * var(--caja-gutter)))}

  /* Hero: el texto crece con la ventana, como la foto */

  /* Títulos de sección y textos largos */
  .section-head h2,.smart__intro h2,.proposito__left h2{font-size:clamp(2.6rem,3.2vw,4.6rem)}
  .proposito__right p,.smart__intro p,.offers__note{font-size:clamp(1.05rem,1vw,1.4rem)}
  .offer h3{font-size:clamp(1.85rem,1.7vw,2.6rem)}
  .serv h3{font-size:clamp(1.05rem,1vw,1.45rem)}
  .serv p{font-size:clamp(.88rem,.82vw,1.2rem)}

  /* Testimonios: su fondo va de borde a borde, el contenido acompaña al resto */
  .testi__inner{width:min(2100px,calc(100% - 2 * var(--caja-gutter)))}
  .testi__item blockquote{font-size:clamp(1.28rem,1.35vw,1.9rem)}

  /* Barra de navegación y pie, al mismo ancho */
  .site-header .nav-wrap,.header__inner{max-width:2100px}
  .foot__grid,.foot__bottom{max-width:2100px}
}
@media(min-width:2600px){
  .container{width:min(2300px,92%)}
  body.is-home > section:not(.hx):not(.testimonials){width:min(2500px,calc(100% - 2 * var(--caja-gutter)))}
  .testi__inner{width:min(2500px,calc(100% - 2 * var(--caja-gutter)))}
}

/* =========================================================
   Cifras dentro de la caja naranja (23-sep-2026)
   Antes eran una sección aparte pegada abajo. Ahora son una franja
   fotográfica dentro de "Qué ofrecemos", con sus propias esquinas.
   ========================================================= */
.services .cifras{
  position:relative;overflow:hidden;border-radius:clamp(16px,1.6vw,26px);
  margin:clamp(1.2rem,2vw,2rem) 0 0;
  padding:clamp(2.6rem,5vw,4.5rem) 0;
  min-height:clamp(260px,26vw,420px);display:flex;align-items:center;
}
.services .cifras__inner{width:100%}
/* Los desvanecidos servían para empalmar con las secciones vecinas: ya no hacen falta */
.services .cifras__fade-top,.services .cifras__fade-bottom{display:none}
/* Un velo oscuro suave para que los números se lean sobre la foto */
.services .cifras::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,47,54,.28),rgba(14,47,54,.42))}
.services .cifras .container{position:relative;z-index:2}
@media(max-width:768px){ .services .cifras{min-height:220px;padding:2.2rem 0} }

/* El encabezado de las páginas internas usa el mismo fondo que "Nuestro propósito".
   Su contenido tiene que ir por encima de la capa de grano. */
.page-hero .container{position:relative;z-index:2}
.page-hero::after{z-index:1}

/* Con el fondo corporativo el encabezado vuelve a ser oscuro, así que los textos
   regresan a blanco (el cambio de paleta del 22-sep los había puesto en tinta
   oscura porque entonces el fondo era aqua). */
.page-hero h1{color:#fff}
.page-hero p{color:rgba(255,255,255,.9)}
.page-hero .section-tag{color:var(--aqua);background:rgba(205,221,217,.16);border-color:rgba(205,221,217,.28)}
.page-hero .chip-list span{color:#fff;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.32)}
.page-hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.page-hero .btn--ghost:hover{background:#fff;border-color:#fff;color:var(--petroleo-dark)}
.page-hero .crumb{background:rgba(255,255,255,.16);color:#fff}
.page-hero .crumb:hover{background:rgba(255,255,255,.28)}


/* =========================================================
   QUIÉNES SOMOS (23-sep-2026)
   Banner de entrada con cifras, tarjetas con icono en lugar de bloques de
   texto corridos, y cierre con el naranja de "Qué ofrecemos".
   ========================================================= */

/* --- Banner de entrada --- */
.page-hero--intro{padding:clamp(10rem,16vh,13rem) 0 clamp(4rem,7vh,6rem)}
.page-hero--intro h1{max-width:16ch;font-size:clamp(2.4rem,5.2vw,4rem)}
.page-hero--intro p{max-width:62ch;font-size:clamp(1rem,1.15vw,1.2rem)}

/* --- Tarjetas de propósito, promesa, cultura… --- */
.valores{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.6vw,1.4rem)}
.valor{position:relative;display:flex;flex-direction:column;gap:.55rem;
  padding:clamp(1.4rem,2vw,2rem);border-radius:22px;background:#fff;
  border:1px solid rgba(21,65,74,.08);box-shadow:0 2px 10px rgba(21,65,74,.05);
  transition:transform .45s var(--ease-out),box-shadow .45s,border-color .45s}
.valor__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;
  background:var(--aqua);color:var(--petroleo);font-size:1.25rem;
  transition:background .4s,color .4s,scale .45s var(--ease-spring)}
.valor h2{font-size:clamp(1.15rem,1.5vw,1.45rem);margin:.2rem 0 0;color:var(--petroleo-dark)}
.valor p{font-size:.95rem;line-height:1.65;color:rgba(35,40,38,.8)}
.valor:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(21,65,74,.12);border-color:rgba(243,146,0,.35)}
.valor:hover .valor__icon{background:var(--naranja);color:#fff;scale:1.06}
/* La primera ocupa dos columnas y lleva una foto de apoyo */
.valor--destacada{grid-column:span 2;justify-content:flex-end;min-height:clamp(240px,26vw,320px);
  color:#fff;border:0;overflow:hidden;
  background:linear-gradient(90deg,rgba(14,47,54,.92) 0%,rgba(14,47,54,.72) 45%,rgba(14,47,54,.25) 100%),
             url('../img/areas-trabajo-1.webp') center 30%/cover no-repeat}
.valor--destacada h2{color:#fff;font-size:clamp(1.5rem,2vw,2rem)}
.valor--destacada p{color:rgba(255,255,255,.9);max-width:46ch}
.valor--destacada .valor__icon{background:rgba(255,255,255,.18);color:#fff}
.valor--destacada:hover .valor__icon{background:var(--naranja)}
.valor--valores .chip-list{margin-top:.3rem}
@media(max-width:900px){
  .valores{grid-template-columns:repeat(2,1fr)}
  .valor--destacada{grid-column:span 2}
}
@media(max-width:600px){
  .valores{grid-template-columns:1fr}
  .valor--destacada{grid-column:span 1;min-height:260px}
}

/* --- La imagen de "Nuestra forma de trabajar" cortaba las cabezas --- */
.smart__media img{object-position:center 18%}

/* --- Cierre con el naranja de "Qué ofrecemos" --- */
.cta-banner--naranja{
  background-color:var(--naranja);
  background-image:url('../img/fondo-servicios.webp');
  background-size:cover;background-position:center;
  color:var(--petroleo-dark);
}
.cta-banner--naranja p{color:var(--petroleo-dark);font-weight:600}
.cta-banner--naranja .btn--light{background:#fff;color:var(--petroleo-dark)}
.cta-banner--naranja .btn--light:hover{background:var(--petroleo-dark);color:#fff}


/* Fichas de servicio en soluciones.html: mismas tarjetas que la portada,
   alimentadas por js/servicios.js */
.valores--servicios{grid-template-columns:repeat(3,1fr)}
.valor--servicio{padding-bottom:3.6rem;color:inherit}
.valor__foto{display:grid;place-items:center;width:100%;height:clamp(120px,12vw,160px);border-radius:14px;overflow:hidden;background:linear-gradient(140deg,#f6f3ec,var(--crema));padding:clamp(10px,1.3vw,18px);box-sizing:border-box}
/* max-width y max-height sueltos no bastaban: en una foto cuadrada mandaba el
   ancho, la altura resultante superaba el recuadro y overflow:hidden la
   recortaba arriba y abajo. Con una caja fija y object-fit:contain la imagen
   se ajusta entera dentro, sin deformarse. */
/* El aire lo pone el recuadro y la imagen ocupa el área restante con
   object-fit:contain: así entra entera pase lo que pase con su proporción.
   Antes, con max-width/max-height sueltos, en las fotos cuadradas mandaba el
   ancho, la altura se pasaba del recuadro y overflow:hidden las recortaba. */
/* Los porcentajes de altura no resolvían contra el recuadro, así que el tope
   se expresa en las mismas unidades que su alto menos el aire de los lados.
   Con eso la foto entra entera, sea cuadrada o apaisada. */
.valor__foto img{max-width:100%;max-height:calc(clamp(120px,12vw,160px) - 2 * clamp(10px,1.3vw,18px));width:auto;height:auto;object-fit:contain;transition:scale .5s var(--ease-out)}
.valor--servicio:hover .valor__foto img{scale:1.06}
.valor--servicio .offer__svg{width:min(62%,150px);color:var(--petroleo);opacity:.9}
.valor--servicio .valor__icon{margin-bottom:.2rem}
.valor__go{position:absolute;right:1.3rem;bottom:1.3rem;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--aqua);color:var(--petroleo-dark);font-size:.82rem;transition:background .4s,color .4s,scale .45s var(--ease-spring)}
.valor--servicio:hover .valor__go{background:var(--naranja);color:#fff;scale:1.08}
@media(max-width:900px){ .valores--servicios{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .valores--servicios{grid-template-columns:1fr} }

/* Cierre naranja: un botón en verde petróleo y el otro en blanco. El naranja
   sobre naranja no se despegaba del fondo. */
.cta-banner--naranja .btn--primary{background:var(--petroleo-dark);color:#fff;border-color:transparent}
.cta-banner--naranja .btn--primary:hover{background:var(--petroleo);color:#fff}
.cta-banner--naranja .btn--light{background:#fff;color:var(--petroleo-dark);border-color:transparent}
.cta-banner--naranja .btn--light:hover{background:var(--petroleo-dark);color:#fff}

/* =========================================================
   Quiénes somos: ritmo 1 larga + 2 cortas / 2 cortas + 1 larga
   Las cortas llevan el fondo inverso al corporativo: verde en las esquinas,
   blanco al centro y la misma textura de grano.
   ========================================================= */
.valores{grid-template-columns:repeat(4,1fr)}
.valor--destacada,.valor--valores{grid-column:span 2}
.valor--corto{grid-column:span 1;
  background:
    radial-gradient(75% 65% at 0% 0%, rgba(21,65,74,.20), rgba(21,65,74,0) 62%),
    radial-gradient(75% 65% at 100% 100%, rgba(21,65,74,.18), rgba(21,65,74,0) 62%),
    radial-gradient(65% 55% at 100% 0%, rgba(21,65,74,.10), rgba(21,65,74,0) 60%),
    radial-gradient(65% 55% at 0% 100%, rgba(21,65,74,.10), rgba(21,65,74,0) 60%),
    #fff;
}
.valor--corto::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.15' intercept='-.06'/%3E%3CfeFuncG type='linear' slope='1.15' intercept='-.06'/%3E%3CfeFuncB type='linear' slope='1.15' intercept='-.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
  background-size:200px 200px}
.valor--corto > *{position:relative;z-index:1}
/* La última larga toma el fondo corporativo, para cerrar el bloque */
.valor--valores{color:#fff;border:0;
  background:
    radial-gradient(78% 66% at -8% -14%, rgba(255,255,255,.5) 0%, rgba(233,243,241,.18) 32%, rgba(255,255,255,0) 60%),
    radial-gradient(68% 62% at 108% 114%, rgba(255,255,255,.42) 0%, rgba(233,243,241,.14) 34%, rgba(255,255,255,0) 62%),
    linear-gradient(135deg, #1c4b54 0%, var(--petroleo) 46%, #10353d 100%)}
.valor--valores h2{color:#fff}
.valor--valores .valor__icon{background:rgba(255,255,255,.18);color:#fff}
.valor--valores .chip-list span{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3)}
@media(max-width:1100px){ .valores{grid-template-columns:repeat(2,1fr)} .valor--destacada,.valor--valores{grid-column:span 2} }
@media(max-width:600px){ .valores{grid-template-columns:1fr} .valor--destacada,.valor--valores{grid-column:span 1} }

/* Las cifras dentro de la caja naranja llevan sus propias esquinas redondeadas */

.services .cifras__bg{border-radius:inherit}

/* =========================================================
   Elementos decorativos con techo (23-sep-2026)
   El contenido ya crece con la ventana, pero estas tres piezas seguían
   estirándose sin límite y al alejar el zoom se veían desproporcionadas:
   el tarro pasaba de 778 px a 1728 px. Ahora tienen tope y conservan su
   proporción respecto al contenido.
   ========================================================= */
@media(min-width:1921px){
  /* Tarro de testimonios */
  .testimonials::after{width:min(54%,1050px);right:calc((100% - 2100px) / 2 - 40px)}
  /* Foto del hero: se ancla a la derecha, que es donde están los productos */
  /* Fondo del footer: deja de ampliarse y las franjas se cubren con el naranja */
}
@media(min-width:2800px){
  .testimonials::after{right:calc((100% - 2500px) / 2 - 40px)}
}

/* El pie quedaba pegado a la izquierda en pantallas anchas: se centra como el resto */

/* =========================================================
   Hero en pantallas muy anchas / zoom out
   El bloque de texto estaba topado en 700 px mientras el titular crecía hasta
   150 px: el título se apretaba y se cortaba. Aquí el texto crece con el
   contenido y la foto se corre a su propia mitad, sin pisarlo.
   ========================================================= */

/* =========================================================
   Hero proporcional (23-sep-2026)
   Al alejar el zoom el bloque de texto se quedaba del mismo tamaño mientras
   el hero crecía, y la composición se desarmaba. Ahora main.js escala el
   bloque completo —títulos, párrafo, botones y chips— en la misma proporción
   que el hero, tomando 1440 px como diseño base.
   ========================================================= */

/* Más aire lateral también en el contenido interno de las secciones */
.container{width:min(1400px,90%)}
@media(min-width:1800px){ .container{width:min(1900px,88%)} }
@media(min-width:2600px){ .container{width:min(2300px,88%)} }

/* Cifras al inicio de la sección naranja: pegadas al borde superior, con el
   mismo redondeo de la caja y la foto teñida de naranja en vez de verde. */

.services .cifras__bg{border-radius:inherit}
.services .cifras::after{
  background:linear-gradient(180deg,rgba(243,146,0,.42) 0%,rgba(236,133,0,.56) 100%);
  mix-blend-mode:multiply}
/* Una segunda capa cálida para que la foto no quede apagada */
.services .cifras__bg{filter:saturate(1.25) brightness(1.08)}
.services .cifras .stat p{color:rgba(255,255,255,.92)}

/* =========================================================
   Footer en petróleo (23-sep-2026)
   Sale la foto naranja: color sólido, de borde a borde y sin desbordes.
   ========================================================= */
body.is-home > footer.footer,
footer.footer{width:100%;margin-inline:0;background:var(--carbon);background-image:none}
.footer__overlay{background:linear-gradient(180deg,rgba(35,40,38,.35) 0%,rgba(20,23,22,.75) 100%)}
.footer__bg{display:none !important}
.footer__card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 34px rgba(0,0,0,.18)}
/* Con el fondo oscuro, los textos vuelven a blanco */
.footer, .footer p, .footer li, .footer small{color:rgba(255,255,255,.82)}
.footer h3, .footer h4, .footer__email, .footer__phone{color:#fff}
.footer__links a, .footer__social a{color:rgba(255,255,255,.82)}
.footer__links a:hover, .footer__social a:hover{color:#fff}
.footer__tagline{color:#fff}
.footer__sub-form input{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
.footer__sub-form input::placeholder{color:rgba(255,255,255,.6)}

/* El aviso de la tienda quedaba en tinta oscura (venía del footer naranja):
   sobre el carbón vuelve a leerse, y en una sola línea. */
.footer__soon{color:rgba(255,255,255,.72);white-space:nowrap}
.footer__soon small{color:rgba(255,255,255,.5)}
@media(max-width:520px){ .footer__soon{white-space:normal} }


/* =========================================================
   FORMULARIO DE CONTACTO (24-sep-2026)
   Antes eran campos sueltos sobre el fondo crema y pasaban desapercibidos.
   Ahora es una tarjeta blanca con etiquetas visibles y un selector de perfil
   que decide si preguntamos por la empresa.
   ========================================================= */
.form-card{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,1.5vw,1.3rem);
  margin-top:clamp(1.4rem,2.4vw,2rem);
  padding:clamp(1.4rem,2.6vw,2.4rem);
  background:#fff;border-radius:24px;
  box-shadow:0 18px 44px rgba(21,65,74,.12);
  border:1px solid rgba(21,65,74,.07);
}
.form-card .campo{display:flex;flex-direction:column;gap:.35rem}
.form-card .campo--ancho,
.form-card .tipo-cliente,
.form-card .btn,
.form-card .form-status{grid-column:1/-1}
.form-card label,.form-card legend{font-size:.82rem;font-weight:700;color:rgba(21,65,74,.9)}
.form-card input,.form-card select,.form-card textarea{
  width:100%;padding:.85rem 1rem;
  border:1.5px solid rgba(21,65,74,.16);border-radius:12px;
  background:#fff;font-family:inherit;font-size:.95rem;color:var(--heading);
  outline:none;transition:border-color .25s,box-shadow .25s;
}
.form-card input::placeholder,.form-card textarea::placeholder{color:rgba(35,40,38,.45)}
.form-card select:invalid{color:rgba(35,40,38,.45)}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{
  border-color:var(--petroleo);box-shadow:0 0 0 4px rgba(21,65,74,.08)}
.form-card textarea{resize:vertical;min-height:120px}
.form-card .btn{width:fit-content;margin-top:.4rem}

/* Selector Empresa / Particular */
.tipo-cliente{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.tipo-cliente legend{float:left;width:100%;margin-bottom:.5rem}
.tipo-op{position:relative;flex:1 1 160px}
.tipo-op input{position:absolute;opacity:0;width:0;height:0}
.tipo-op span{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1rem;border:1.5px solid rgba(21,65,74,.18);border-radius:14px;
  font-weight:600;font-size:.92rem;color:var(--petroleo-dark);cursor:pointer;
  transition:border-color .25s,background .25s,color .25s;
}
.tipo-op span i{color:var(--petroleo);transition:color .25s}
.tipo-op span:hover{border-color:var(--petroleo)}
.tipo-op input:checked + span{background:var(--petroleo);border-color:var(--petroleo);color:#fff}
.tipo-op input:checked + span i{color:#fff}
.tipo-op input:focus-visible + span{box-shadow:0 0 0 4px rgba(21,65,74,.18)}

@media(max-width:700px){ .form-card{grid-template-columns:1fr} }

/* =========================================================
   Footer carbón: la línea del correo, el icono y el aviso de la tienda
   venían en tinta oscura (del footer naranja) y no se veían.
   ========================================================= */
.footer__sub-form{border-bottom-color:rgba(255,255,255,.4)}
.footer__sub-form input{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.footer__sub-form input::placeholder{color:rgba(255,255,255,.55)}
.footer__sub-form button{color:rgba(255,255,255,.8);transition:color .3s,scale .35s var(--ease-spring)}
.footer__sub-form button:hover{color:#fff;scale:1.1}
/* El sobre se enciende en naranja apenas hay algo escrito */
.footer__sub-form:has(input:not(:placeholder-shown)) button{color:var(--naranja)}
.footer__sub-form:focus-within{border-bottom-color:rgba(255,255,255,.75)}
.footer__subscribe p,.footer__copy p{color:rgba(255,255,255,.75)}
.footer__links a{color:rgba(255,255,255,.8)}
.footer__links a:hover{color:#fff}
.footer__soon{color:rgba(255,255,255,.75)}
.footer__soon small{color:rgba(255,255,255,.55)}

/* Cifras: franja superior de la caja naranja, de borde a borde y pegada al
   techo (la sección tiene 5,5rem de aire arriba: se compensa con margen
   negativo para que toque el borde). */
.services .cifras{
  width:100%;margin:-5.5rem 0 clamp(1.8rem,3vw,3rem);
  border-radius:var(--caja-radio) var(--caja-radio) 0 0;
  min-height:clamp(150px,15vw,230px);
}
.services .cifras__bg{border-radius:inherit}
/* El margen negativo tiene que comerse todo el aire superior de la sección:
   con -3,5rem asomaban 4px de naranja por encima de la foto. */
@media(max-width:768px){ .services .cifras{margin-top:-3.75rem;min-height:190px} }


/* Las tres tarjetas de apoyo pasan de icono a foto, como las grandes de arriba */
.serv__foto{display:grid;place-items:center;width:66px;height:66px;border-radius:16px;
  background:rgba(255,255,255,.55);overflow:hidden;margin-bottom:.4rem;
  transition:scale .45s var(--ease-spring),background .4s}
.serv__foto img{width:100%;height:100%;object-fit:contain;padding:5px}
.serv:hover .serv__foto{scale:1.06;background:rgba(255,255,255,.78)}
@media(max-width:560px){ .serv__foto{width:56px;height:56px} }


/* =========================================================
   PÁGINAS INTERNAS MÁS VISUALES (24-sep-2026)
   Las listas de viñetas se convierten en tarjetas: el mismo contenido entra
   por los ojos en vez de leerse como un párrafo largo. Se reutiliza en todas
   las páginas internas.
   ========================================================= */
.section-head--centro{max-width:62ch;margin:0 auto clamp(1.8rem,3vw,2.8rem);text-align:center}
.section-head--centro h2{margin:.6rem 0 .7rem}
.section-head--centro p{color:rgba(35,40,38,.78);font-size:clamp(.98rem,1.1vw,1.12rem)}

/* Tarjetas con icono */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.6vw,1.4rem)}
.feat{position:relative;display:flex;flex-direction:column;gap:.5rem;
  padding:clamp(1.3rem,2vw,1.9rem);border-radius:22px;background:#fff;
  border:1px solid rgba(21,65,74,.08);box-shadow:0 2px 10px rgba(21,65,74,.05);
  transition:transform .45s var(--ease-out),box-shadow .45s,border-color .45s}
.feat__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;
  background:var(--aqua);color:var(--petroleo);font-size:1.2rem;
  transition:background .4s,color .4s,scale .45s var(--ease-spring)}
.feat h3{font-size:clamp(1.05rem,1.35vw,1.3rem);margin-top:.2rem;color:var(--petroleo-dark)}
.feat p{font-size:.94rem;line-height:1.6;color:rgba(35,40,38,.8)}
.feat:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(21,65,74,.12);border-color:rgba(243,146,0,.35)}
.feat:hover .feat__icon{background:var(--naranja);color:#fff;scale:1.06}
/* La última de una fila impar se estira para no dejar un hueco */
.feat-grid > .feat:nth-child(4):nth-last-child(2),
.feat-grid > .feat:nth-child(5):nth-last-child(1){grid-column:span 1}
@media(max-width:1000px){ .feat-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .feat-grid{grid-template-columns:1fr} }

/* Razones numeradas */
.razones-head{margin-top:clamp(3rem,6vw,5rem)}
.razones{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,1.6vw,1.4rem)}
.razon{display:flex;gap:1.1rem;align-items:flex-start;
  padding:clamp(1.2rem,1.9vw,1.7rem);border-radius:20px;
  background:linear-gradient(135deg,rgba(205,221,217,.42),rgba(205,221,217,.16));
  border:1px solid rgba(21,65,74,.08);
  transition:transform .45s var(--ease-out),box-shadow .45s}
.razon__num{flex:0 0 auto;font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:800;line-height:1;
  color:var(--naranja);letter-spacing:-.02em}
.razon h3{font-size:clamp(1.02rem,1.3vw,1.22rem);margin-bottom:.3rem;color:var(--petroleo-dark)}
.razon p{font-size:.93rem;line-height:1.6;color:rgba(35,40,38,.8)}
.razon:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(21,65,74,.1)}
@media(max-width:700px){ .razones{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .feat:hover,.razon:hover{transform:none} }


/* Públicos: fila de tarjetas chicas, solo icono y nombre */
.publicos{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.7rem,1.3vw,1.1rem)}
.publico{display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center;
  padding:clamp(1.1rem,1.8vw,1.6rem) .8rem;border-radius:20px;background:#fff;
  border:1px solid rgba(21,65,74,.08);box-shadow:0 2px 10px rgba(21,65,74,.05);
  transition:transform .45s var(--ease-out),box-shadow .45s,border-color .45s}
.publico__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--aqua);color:var(--petroleo);font-size:1.3rem;
  transition:background .4s,color .4s,scale .45s var(--ease-spring)}
.publico h3{font-size:.98rem;line-height:1.3;color:var(--petroleo-dark)}
.publico:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(21,65,74,.12);border-color:rgba(243,146,0,.35)}
.publico:hover .publico__icon{background:var(--naranja);color:#fff;scale:1.08}
@media(max-width:900px){ .publicos{grid-template-columns:repeat(3,1fr)} }
@media(max-width:560px){ .publicos{grid-template-columns:repeat(2,1fr)} }

/* Cómo funciona: tres pasos unidos por una línea */
.pasos-linea{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,2rem);list-style:none;padding:0;margin:0}
.pasos-linea::before{content:'';position:absolute;top:28px;left:12%;right:12%;height:2px;
  background:repeating-linear-gradient(90deg,rgba(21,65,74,.25) 0 10px,transparent 10px 20px)}
.paso-item{position:relative;text-align:center;padding:0 .6rem}
.paso-item__num{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin:0 auto 1rem;
  border-radius:50%;background:var(--naranja);color:#fff;font-size:1.4rem;font-weight:800;
  box-shadow:0 10px 24px rgba(243,146,0,.3);transition:scale .45s var(--ease-spring)}
.paso-item:hover .paso-item__num{scale:1.08}
.paso-item h3{font-size:clamp(1.05rem,1.3vw,1.25rem);margin-bottom:.35rem;color:var(--petroleo-dark)}
.paso-item p{font-size:.93rem;line-height:1.6;color:rgba(35,40,38,.8);max-width:34ch;margin:0 auto}
@media(max-width:760px){
  .pasos-linea{grid-template-columns:1fr;gap:1.6rem}
  .pasos-linea::before{top:0;bottom:0;left:27px;right:auto;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,rgba(21,65,74,.25) 0 10px,transparent 10px 20px)}
  .paso-item{display:grid;grid-template-columns:56px 1fr;gap:.2rem 1rem;text-align:left;padding:0}
  .paso-item__num{grid-row:span 2;margin:0}
  .paso-item p{max-width:none}
}


/* La ficha "Solución Integral 360" usa el icono de marca, no uno de librería.
   Va en una caja del mismo alto que los iconos para no romper el ritmo. */
.valor__marca{display:grid;place-items:start;width:100%;height:clamp(120px,12vw,160px);
  border-radius:14px;background:linear-gradient(140deg,#f6f3ec,var(--crema));
  place-items:center;overflow:hidden}
.valor__marca .offer__svg{width:min(62%,170px);height:auto;color:var(--petroleo);opacity:.92;
  transition:color .45s,opacity .45s,scale .5s var(--ease-out)}
.valor--servicio:hover .valor__marca .offer__svg{color:var(--petroleo-dark);opacity:1;scale:1.05}

/* La franja de cifras sigue el redondeo de la caja en sus cuatro esquinas:
   arriba las suyas, abajo las recorta el propio contenedor. */
.services .cifras{border-radius:var(--caja-radio) var(--caja-radio) 0 0}
@media(max-width:768px){ .services .cifras{min-height:150px} }


/* Las seis tarjetas de "Qué ofrecemos" son iguales: dos filas de tres.
   Se bajan un poco de alto para que las dos filas entren sin estirar la caja. */
.services .offers__grid{grid-template-columns:repeat(3,1fr);row-gap:clamp(1rem,1.8vw,1.5rem)}
.services .offer{height:clamp(330px,26vw,400px)}
.services .offer__img{height:54%}
.services .offer h3{font-size:clamp(1.5rem,1.9vw,2rem);max-width:13ch}
@media(max-width:1000px){
  .services .offers__grid{grid-template-columns:repeat(2,1fr)}
}

/* =========================================================
   Franja de cifras: cuatro esquinas redondeadas y borde inferior fundido
   con el naranja, en vez de cortarse en seco.
   ========================================================= */
.services .cifras{border-radius:var(--caja-radio) !important;overflow:hidden}
.services .cifras__bg{border-radius:inherit}
/* El desvanecido inferior vuelve, ahora en el naranja de la caja */
body.is-home .services .cifras__fade-bottom{
  display:block;z-index:2;height:46%;
  background:linear-gradient(to top,#f7970f 0%,rgba(247,151,15,.92) 22%,rgba(247,151,15,.55) 55%,rgba(247,151,15,0) 100%)}
/* Y un velo suave arriba, para que el borde superior también se integre */
body.is-home .services .cifras__fade-top{
  display:block;z-index:2;height:26%;background:none;
  background-image:linear-gradient(to bottom,rgba(247,151,15,.55) 0%,rgba(247,151,15,0) 100%);
  -webkit-mask-image:none;mask-image:none}
.services .cifras .container{position:relative;z-index:3}

/* Las seis imágenes en el mismo eje: las de la segunda fila quedaban a la
   izquierda porque el centrado estaba puesto solo en las tres primeras. */
.services .offer__img{justify-content:center;padding-left:6px;padding-right:.6rem}

/* Sobre nosotros: el bloque "Nuestra forma de trabajar" va dentro de una caja
   blanca, para despegarlo del fondo crema como el resto de las tarjetas. */
.smart .smart__top{
  background:#fff;border-radius:clamp(20px,2.2vw,30px);
  padding:clamp(1.6rem,3vw,3rem);
  border:1px solid rgba(21,65,74,.07);
  box-shadow:0 14px 36px rgba(21,65,74,.09);
  align-items:center;
}
.smart .smart__media img{border-radius:clamp(14px,1.6vw,20px)}
@media(max-width:768px){ .smart .smart__top{padding:1.3rem} }


/* =========================================================
   Clientes en hexágono (24-sep-2026)
   Los círculos pasan a hexágonos de puntas redondeadas, en línea con el
   panal del logo. La forma se aplica con una máscara SVG, así que el
   contenido sigue siendo el mismo.
   ========================================================= */
.proposito__circle{
  border-radius:0;border:0;
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M44.8 3Q50 0 55.2 3L88.11 22Q93.3 25 93.3 31L93.3 69Q93.3 75 88.11 78L55.2 97Q50 100 44.8 97L11.89 78Q6.7 75 6.7 69L6.7 31Q6.7 25 11.89 22Z' fill='%23000'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M44.8 3Q50 0 55.2 3L88.11 22Q93.3 25 93.3 31L93.3 69Q93.3 75 88.11 78L55.2 97Q50 100 44.8 97L11.89 78Q6.7 75 6.7 69L6.7 31Q6.7 25 11.89 22Z' fill='%23000'/></svg>");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:#fff;
  padding:0;
  box-shadow:none;
}
/* El aro blanco de antes lo daba el borde; ahora lo da un forro del mismo color */
.proposito__pair,.proposito__circles--static > .proposito__circle{filter:drop-shadow(0 6px 16px rgba(0,0,0,.18))}
.proposito__circle:hover{border:0;box-shadow:none;transform:translateY(-10px) scale(1.08)}
.proposito__circle img{width:70%;height:70%}
@media (prefers-reduced-motion:reduce){ .proposito__circle:hover{transform:none} }

/* Farmacias Knop es el único logo con fondo sólido y cuadrado: al 70% topaba
   con los lados del hexágono. Se achica y se le redondean las puntas. */
.proposito__circle img[src$="clientes_9.png"]{width:54%;height:54%;border-radius:8px}

/* =========================================================
   Cifras: la foto se funde con el fondo de la sección (24-sep-2026)
   En vez de tapar la foto con un degradado naranja —que nunca calza con la
   textura del fondo— se desvanece la propia foto hacia abajo. Debajo queda
   el fondo real de la caja, así que no hay transición posible de notar.
   ========================================================= */
.services .cifras{overflow:hidden;isolation:isolate}
.services .cifras__bg{
  border-radius:0;filter:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 48%,rgba(0,0,0,.55) 74%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 48%,rgba(0,0,0,.55) 74%,rgba(0,0,0,0) 100%);
}
/* El velo naranja acompaña a la foto y se apaga con ella */
.services .cifras::after{
  background:linear-gradient(180deg,rgba(243,146,0,.34) 0%,rgba(236,133,0,.42) 48%,rgba(236,133,0,0) 92%);
  mix-blend-mode:multiply}
/* Los degradados sueltos ya no hacen falta */
body.is-home .services .cifras__fade-bottom,
body.is-home .services .cifras__fade-top{display:none}

/* La foto ocupa exactamente la caja: sin el sobrescaneo de ±600px ni el
   parallax heredados de cuando las cifras eran una sección a sangre. Así el
   desvanecido de la máscara cae dentro de lo que se ve y no 800px más abajo. */
.services .cifras__bg{
  top:0 !important;bottom:0 !important;left:0;right:0;
  transform:none !important;will-change:auto;
}






/* =========================================================
   Panal del encabezado interno (24-sep-2026)
   El titular deja mucho aire a la derecha en desktop y ahí va el panal del
   logo, en naranja y a la vista. Cada celda es un <path> propio —no una
   textura de fondo— porque tienen que comportarse por separado:
     · al cargar se rellenan en barrido rápido, de izquierda a derecha;
     · las que caen sobre el texto se retiran, para no hacer ruido al leer;
     · la que toca el cursor se apaga y vuelve sola un momento después;
     · unas pocas laten al azar, una se levanta, otra se hunde.
   La barra de navegación es fija y vive fuera del encabezado, así que el
   panal —que además arranca bajo ella— nunca puede taparla.
   ========================================================= */
.page-hero__panal{
  position:absolute;left:0;right:0;bottom:0;
  top:calc(var(--nav-alto,97px) + 4px);
  /* Por encima del texto y del grano: las celdas que caen sobre las palabras
     quedan sin eventos, así que el titular y los botones siguen recibiendo
     el cursor. Si el panal fuera por debajo, el contenedor del texto —que
     ocupa todo el ancho— se comería el puntero antes que las celdas. */
  /* Tamaño explícito: sin viewBox el SVG toma su medida intrínseca (300x150)
     y left/right no la estiran, porque es un elemento reemplazado. */
  width:100%;height:calc(100% - (var(--nav-alto,97px) + 4px));
  z-index:4;pointer-events:none;overflow:visible;
  /* Tapado hasta que main.js termina de dibujar las celdas */
  visibility:hidden;
  /* Desvanecido corto: con 54px quedaba una banda lisa demasiado ancha bajo
     la barra y el panal parecía no llegar arriba. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 22px);
}
.page-hero__panal.panal-armado{visibility:visible}
.panal__celda{
  fill:url(#panalVerde);stroke:rgba(243,146,0,.62);stroke-width:1.5;
  pointer-events:all;opacity:1;
  transform-box:fill-box;transform-origin:center;
  transition:opacity .45s ease,transform 2.1s cubic-bezier(.33,.02,.28,1),stroke 1.6s ease,stroke-width 1.6s ease,filter 1.8s ease;
}
/* El panal está entero desde el primer cuadro: no entra, ya está. Lo que se
   anima es su salida. Las olas quedan como agrupación del dibujo. */
.panal__ola{opacity:1}
/* Salida: las celdas que ceden el sitio al texto viajan a unas pocas capas,
   cada una con su propio retardo, así la franja se deshace en desorden. */
.panal__ida{opacity:1;pointer-events:none;transition:opacity .8s ease;transition-delay:var(--dq,0ms)}
.page-hero__panal.panal-asentado .panal__ida{opacity:0}
/* Apagadas: por el cursor, o por quedar sobre el texto */
.panal__celda.apagada{opacity:0;transition-delay:0ms}
/* Las celdas que ceden el sitio al texto se van en desorden: el retardo de
   cada una lo sortea main.js, así no se lee como un barrido. */
.panal__celda.bajo-texto{pointer-events:none}
.panal__celda.bajo-texto{pointer-events:none}
/* El latido de fondo: una sube, otra se hunde */
.panal__celda.sube{transform:translateY(-9px) scale(1.09);filter:drop-shadow(0 12px 16px rgba(4,20,24,.55)) drop-shadow(0 3px 5px rgba(4,20,24,.35))}
.panal__celda.baja{transform:translateY(5px) scale(.92);stroke:rgba(243,146,0,.22);filter:url(#panalHundido)}

/* El grano y el contenido van por encima del panal */
.page-hero::after{z-index:2}
.page-hero .container{z-index:3}
@media(max-width:900px){ .page-hero__panal{display:none} }
@media(prefers-reduced-motion:reduce){
  .panal__celda{transition:opacity .4s ease}
  .panal__celda.sube,.panal__celda.baja{transform:none;stroke:rgba(243,146,0,.62);stroke-width:1.5;filter:none}
}


/* =========================================================
   Entrada del texto del encabezado (24-sep-2026)
   El titular se revela con un barrido de izquierda a derecha que arranca
   justo cuando el panal se aparta de esa franja: se lee como si el texto
   empujara las celdas. Solo aplica donde hay panal —desktop—, así que en
   móvil el encabezado conserva su entrada de siempre.
   ========================================================= */
/* El texto no tiene animación propia: está puesto desde el principio, tapado
   por el panal. Se le quita la entrada del encabezado para que no haga nada,
   y sólo se destapa cuando main.js confirma que el panal ya lo cubre. */
.page-hero.con-panal .container > *{opacity:0;transform:none;transition:none}
.page-hero.con-panal.texto-entra .container > *{opacity:1}

/* Las fotos de "Qué ofrecemos" ocupaban el alto completo del recuadro y con
   object-position:bottom quedaban pegadas al borde: la caja, los pallets, la
   góndola y el tarro se leían como cortados contra el filo de la tarjeta. Se
   suben un poco; el recuadro no recorta, así que solo se separan del borde. */
.services .offer__img img{transform:translateY(-9%)}
@media(max-width:560px){ .services .offer__img img{transform:translateY(-6%)} }

/* Los retratos ya vienen recortados al rostro, así que el avatar solo cubre */
.testi__author img{object-fit:cover}

/* Donde hay panal, el texto no tiene animación propia: lo que da el efecto es
   el panal al deshacerse. El titular partido en palabras se queda quieto. */
.js .page-hero.con-panal .nl-words .nl-w{opacity:1;transform:none;transition:none;transition-delay:0s}


/* =========================================================
   Cortina del mapa (24-sep-2026)
   El mapa de Google tarda en aparecer y mientras tanto se veía un hueco. Se
   cubre con el mismo panal del encabezado, que se deshace en desorden recién
   cuando el iframe avisa que cargó. Aquí el panal no reacciona al cursor: es
   una espera, no algo con lo que jugar.
   ========================================================= */
.contact-map{position:relative}
/* width y height explícitos: un SVG sin viewBox no se estira con inset,
   se queda en su medida intrínseca de 300x150. */
.panal-carga{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;background:linear-gradient(135deg,#1c4b54 0%,var(--petroleo) 52%,#10353d 100%)}
.panal-carga .panal__celda{pointer-events:none;stroke:rgba(243,146,0,.5)}
/* Un respiro mientras se espera, para que no parezca congelado */
.panal-carga .panal__ola{animation:panal-espera 3.4s ease-in-out infinite;animation-delay:var(--d,0ms)}
@keyframes panal-espera{0%,100%{opacity:1}50%{opacity:.82}}
.panal-carga.panal-asentado{transition:opacity .5s ease;opacity:0}
@media(prefers-reduced-motion:reduce){ .panal-carga .panal__ola{animation:none} }

/* En el menú desplegable, el subrayado del ítem actual caía justo sobre la
   línea que separa los enlaces y se leían como una sola marca doble. Se sube
   para que acompañe al texto y deje ver el separador. */
@media(max-width:900px){
  .nav a::after{bottom:1rem}
}


/* El retrato de los testimonios toma la forma del panal del logo: hexágono con
   la punta arriba y las esquinas apenas redondeadas, la misma curvatura que
   usan los círculos de clientes. */
.testi__author img{
  border-radius:0;
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M37.01 7.5Q50 0 62.99 7.5L80.31 17.5Q93.3 25 93.3 40L93.3 60Q93.3 75 80.31 82.5L62.99 92.5Q50 100 37.01 92.5L19.69 82.5Q6.7 75 6.7 60L6.7 40Q6.7 25 19.69 17.5Z' fill='%23000'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M37.01 7.5Q50 0 62.99 7.5L80.31 17.5Q93.3 25 93.3 40L93.3 60Q93.3 75 80.31 82.5L62.99 92.5Q50 100 37.01 92.5L19.69 82.5Q6.7 75 6.7 60L6.7 40Q6.7 25 19.69 17.5Z' fill='%23000'/></svg>");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  box-shadow:none;
}


/* =========================================================
   Trama de arranque del encabezado (24-sep-2026)
   main.js tarda en armar el panal —hay que descargarlo y ejecutarlo— y en ese
   rato el encabezado se veía vacío: el texto esperaba al panal y el panal no
   existía todavía. Esta capa pinta la misma trama sin JavaScript, alineada al
   mismo origen y con el mismo tamaño de celda, así que cuando el panal de
   verdad aparece no se nota el relevo.
   ========================================================= */
.js .page-hero::before{
  content:'';position:absolute;left:0;right:0;
  top:calc(var(--nav-alto,97px) + 4px);bottom:0;
  z-index:4;pointer-events:none;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='58.89' height='102' viewBox='0 0 58.89 102'><path d='M0 -34L29.45 -17L29.45 17L0 34L-29.45 17L-29.45 -17ZM58.89 -34L88.34 -17L88.34 17L58.89 34L29.45 17L29.45 -17ZM29.45 17L58.89 34L58.89 68L29.45 85L0 68L0 34ZM0 68L29.45 85L29.45 119L0 136L-29.45 119L-29.45 85ZM58.89 68L88.34 85L88.34 119L58.89 136L29.45 119L29.45 85ZM29.45 -85L58.89 -68L58.89 -34L29.45 -17L0 -34L0 -68Z' fill='rgb(22,69,78)' stroke='rgba(243,146,0,.62)' stroke-width='1.5'/></svg>");
  background-size:58.89px 102px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 22px);
}
/* En cuanto el panal está dibujado, la trama de arranque sobra */
.page-hero.panal-puesto::before{display:none}
@media(max-width:900px){ .js .page-hero::before{display:none} }