/* ============================================================================
   RENPAGF · Sitio corporativo. Paleta verde bosque, hero forestal, tarjetas.
   ========================================================================== */
:root{
  --forest-900:#0b1f13;
  --forest-800:#12301e;
  --forest-700:#184029;
  --leaf:#6ea832;
  --leaf-d:#5c9128;
  --leaf-2:#8bc34a;
  --leaf-soft:#eaf3df;
  --cream:#f4f7f0;
  --paper:#ffffff;
  /* Superficies neutras de la portada: blanco y gris muy claro, sin tinte
     verde ni beige. El verde queda reservado para acentos y bloques oscuros. */
  --surface-1:#ffffff;
  --surface-2:#f5f6f7;
  --surface-3:#eceef0;
  /* Azul: cuarta tinta del sistema, junto a negro, blanco y verde. Se usa en
     enlaces y datos; el verde queda para marca y acciones. */
  --blue:#1a5fb4;
  --blue-d:#12406f;
  --blue-soft:#e8f0fa;
  /* Texto neutro: el gris antes tiraba a verde y ensuciaba la lectura. */
  --ink:#14181a;
  --muted:#5f6663;
  --line:#e4e6e6;
  --radius:3px;
  --shadow:0 10px 30px rgba(16,40,24,.08);
  --wrap:1220px;
  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Una sola familia en todo el sitio: Montserrat Alternates dibujaba varias
     mayúsculas (N, E, y…) con formas que se leían como minúsculas. */
  --font-head:'Manrope',sans-serif;
  --font-display:'Manrope',sans-serif;
  --font-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
/* Columna de altura completa con el pie empujado abajo (.site-footer lleva
   margin-top:auto). Sin esto, una página con poco contenido —Equipo antes de
   publicar secciones— dejaba el pie a media pantalla y un hueco blanco debajo. */
body.body-site{margin:0;font-family:var(--font);color:var(--ink);background:var(--surface-1);line-height:1.6;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-flex;white-space:nowrap;word-wrap:normal;direction:ltr;vertical-align:middle;font-size:1.25em;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.mi-sm{font-size:1.05em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--font-head);line-height:1.18;letter-spacing:-.02em;margin:0}
h4,h5,h6{font-family:var(--font-head)}
.eyebrow{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--leaf-d)}
/* Kicker técnico numerado (referencia editorial): "01 // Sección" */
.klabel{display:inline-block;font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--leaf-d);margin-bottom:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:.95rem;padding:.78rem 1.5rem;border-radius:2px;border:1.5px solid transparent;cursor:pointer;transition:.16s;text-decoration:none}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--leaf);color:#fff}
.btn-primary:hover{background:var(--leaf-d);box-shadow:0 8px 20px -10px rgba(46,110,50,.55)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-dark{background:var(--forest-800);color:#fff}
.btn-dark:hover{background:var(--forest-700)}
.btn-outline{background:transparent;color:var(--forest-800);border-color:var(--line)}
.btn-outline:hover{border-color:var(--leaf);color:var(--leaf-d)}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.site-nav{position:absolute;top:0;left:0;right:0;z-index:40}
.site-nav.is-solid{position:fixed;background:rgba(11,31,19,.92);backdrop-filter:blur(10px);box-shadow:0 2px 20px rgba(0,0,0,.25)}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:32px}
.nav-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;letter-spacing:.02em;line-height:1}
.nav-brand .logo{width:34px;height:34px;display:grid;place-items:center;background:var(--leaf);border-radius:9px;color:#fff}
.nav-brand small{display:block;font-size:.6rem;font-weight:600;letter-spacing:.22em;color:var(--leaf-2)}
/* El logo se muestra con sus colores reales, también sobre el hero. Antes se
   forzaba a blanco con `brightness(0) invert(1)`, que además de teñirlo
   destruía el detalle: aplanaba los degradados y dejaba los bordes suavizados
   como dientes de sierra. Para que se lea sobre la foto basta con separarlo
   del fondo con una sombra, que no altera un solo píxel del original. */
.site-nav:not(.is-solid) .nav-brand img{filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-links a{color:rgba(255,255,255,.85);font-size:.92rem;font-weight:500;padding:6px 0;position:relative}
.nav-links a:hover,.nav-links a.is-active{color:#fff}
.nav-links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--leaf-2);border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:none;border:0;color:#fff;cursor:pointer}
.nav-toggle svg{width:26px;height:26px}

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* ── Hero con fondo de video ───────────────────────────────────────────── */
.vhero{position:relative;min-height:82vh;min-height:82svh;display:flex;flex-direction:column;overflow:hidden;color:#fff;isolation:isolate;background:var(--forest-900)}
.vhero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.vhero-overlay{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(120% 90% at 50% 0%,rgba(11,31,19,.30),transparent 55%),
  linear-gradient(180deg,rgba(11,31,19,.55) 0%,rgba(11,31,19,.26) 42%,rgba(11,31,19,.72) 100%)}
.vhero-inner{position:relative;flex:1;width:100%;max-width:960px;margin:0 auto;
  padding:clamp(96px,13vh,140px) 24px 56px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.vhero-title{margin:0;font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.8rem);font-weight:700;line-height:1.12;letter-spacing:-.02em;max-width:18ch}
.vhero-title .soft{color:var(--leaf-2);font-weight:600}
.vhero-sub{margin:22px auto 0;max-width:52ch;color:rgba(255,255,255,.88);font-size:clamp(.98rem,1.3vw,1.12rem);line-height:1.65}
.vhero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
/* Barra de credenciales integrada al pie del hero (palabras, sin números) */
.vhero-trust{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.14);padding:18px 0}
.vhero-trust .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px}
.vhero-trust span{display:inline-flex;align-items:center;color:rgba(255,255,255,.82);font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.vhero-trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--leaf-2);margin-right:10px;flex:none}

.vbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.78rem 1.5rem;border-radius:2px;
  font-weight:600;font-size:.95rem;text-decoration:none;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.vbtn:hover{transform:translateY(-1px)}
.vbtn-solid{background:#fff;color:var(--forest-900)}
.vbtn-solid:hover{background:rgba(255,255,255,.92);box-shadow:0 10px 26px -12px rgba(0,0,0,.45)}
.vbtn-glass{color:#fff}
.vbtn-glass:hover{background:rgba(255,255,255,.10)}

/* Efecto liquid-glass (adaptado del diseño de referencia, borde translúcido) */
.liquid-glass,.vbtn-glass{background:rgba(255,255,255,.01);background-blend-mode:luminosity;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.1);position:relative;overflow:hidden}
.liquid-glass::before,.vbtn-glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.15) 20%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.15) 80%,rgba(255,255,255,.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* Animación de entrada (easing del diseño de referencia) */
@keyframes vheroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.vhero-title{animation:vheroRise .7s cubic-bezier(.16,1,.3,1) both}
.vhero-sub{animation:vheroRise .7s .12s cubic-bezier(.16,1,.3,1) both}
.vhero-cta{animation:vheroRise .7s .24s cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){.vhero-title,.vhero-sub,.vhero-cta{animation:none}}

/* ── Stats bar (sobre el hero) ───────────────────────────────────────────── */
.stats{position:relative;z-index:5;margin-top:-46px}
.stats-inner{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.stats-card{background:var(--forest-800);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:26px 20px;box-shadow:var(--shadow)}
.stat{display:flex;align-items:center;gap:14px;padding:0 14px}
.stat + .stat{border-left:1px solid rgba(255,255,255,.09)}
.stat-ico{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--leaf);color:#fff}
.stat-ico svg{width:22px;height:22px}
.stat b{display:block;color:#fff;font-size:1.5rem;font-weight:800;line-height:1}
.stat span{color:rgba(255,255,255,.7);font-size:.82rem}

/* ── Secciones genéricas ─────────────────────────────────────────────────── */
/* Mismo ritmo y mismas superficies que la portada: blanco y gris muy claro
   alternando, sin filete entre secciones. Antes las internas iban sobre el
   crema verdoso del body con 132px de aire, y por eso desentonaban. */
.section{padding:clamp(48px,6vw,72px) 0;background:var(--surface-1)}
.section--alt{background:var(--surface-2)}
.section.cream{background:var(--surface-2)}
section[id]{scroll-margin-top:88px}
.section-head{max-width:680px;margin-bottom:clamp(40px,5vw,60px)}
.section-head h2{font-family:var(--font-display);font-size:clamp(1.6rem,3.2vw,2.35rem);font-weight:700;letter-spacing:-.018em;line-height:1.18;margin-top:10px}
.section-head h2 .g{color:var(--leaf-d)}
.section-head p{color:var(--muted);margin-top:14px;font-size:1.05rem;max-width:60ch;hyphens:none}

/* Nosotros */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.about p{color:var(--muted);margin:14px 0 26px}
/* Mismo tratamiento de imagen que la portada: sin sombra, fondo gris neutro
   y zoom corto. La sombra editorial de antes era el único caso del sitio. */
.about-media{border-radius:var(--radius);overflow:hidden;aspect-ratio:5/4;background:var(--surface-2)}
.about-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.about-media:hover img{transform:scale(1.05)}

/* Servicios */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:22px}
.svc-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:.18s}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.svc-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--leaf-soft);color:var(--leaf-d);margin-bottom:16px}
.svc-ico svg{width:26px;height:26px}
.svc-card h3{font-size:1.15rem;font-weight:700}
.svc-card p{color:var(--muted);font-size:.92rem;margin:10px 0 16px}
.svc-more{color:var(--leaf-d);font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:6px}

/* ── Certificaciones ─────────────────────────────────────────────────────── */
.certs{background:var(--forest-800);color:#fff;border-radius:var(--radius);padding:30px 34px;
  display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.certs .lbl{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:8px 14px;white-space:nowrap}
.certs .txt{color:rgba(255,255,255,.72);font-size:.92rem;max-width:20ch}
.certs .marks{display:flex;gap:34px;flex-wrap:wrap;align-items:center;margin-left:auto}
.mark{text-align:center;line-height:1.05}
.mark b{font-size:1.15rem;font-weight:800;letter-spacing:.02em}
.mark span{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:3px}

/* ── Proceso ─────────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:14px;position:relative}
.step{text-align:center;position:relative}
.step-dot{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;background:var(--paper);border:2px solid var(--leaf);
  display:grid;place-items:center;color:var(--leaf-d);position:relative;z-index:2}
.step-dot svg{width:24px;height:24px}
.step-n{position:absolute;top:-6px;right:calc(50% - 40px);width:24px;height:24px;border-radius:50%;background:var(--leaf);
  color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;z-index:3}
.step h4{font-size:.98rem;font-weight:700;margin:0 0 6px}
.step p{font-size:.8rem;color:var(--muted);margin:0}
.steps::before{content:"";position:absolute;top:29px;left:8%;right:8%;height:2px;
  background:repeating-linear-gradient(90deg,var(--leaf) 0 8px,transparent 8px 16px);opacity:.5;z-index:1}

/* ── Beneficios ──────────────────────────────────────────────────────────── */
.benefits{display:grid;grid-template-columns:1fr 1fr auto;gap:0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-top:46px}
.ben-col{padding:30px 34px}
.ben-col + .ben-col{border-left:1px solid var(--line)}
.ben-col h4{display:flex;align-items:center;gap:10px;font-size:1.05rem;font-weight:700;margin:0 0 18px}
.ben-col h4 .i{width:34px;height:34px;border-radius:9px;background:var(--leaf-soft);color:var(--leaf-d);display:grid;place-items:center}
.ben-col h4 .i svg{width:18px;height:18px}
.ben-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ben-col li{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--ink)}
.ben-col li svg{width:18px;height:18px;color:var(--leaf);flex:none}
.ben-media{width:220px;background:var(--leaf-soft)}
.ben-media img{width:100%;height:100%;object-fit:cover}

/* ── Impacto ─────────────────────────────────────────────────────────────── */
.impact{background:var(--forest-800);color:#fff;border-radius:var(--radius);padding:34px 30px;
  display:grid;grid-template-columns:auto repeat(4,1fr);gap:8px;align-items:center}
.impact-title{font-weight:800;font-size:1.05rem;letter-spacing:.04em;padding-right:20px;text-transform:uppercase;max-width:9ch}
.impact .stat b{font-size:2rem}

/* ── CTA band ────────────────────────────────────────────────────────────── */
.ctaband{background:var(--leaf-soft);position:relative;overflow:hidden}
.ctaband .wrap{display:flex;align-items:center;gap:26px;padding:36px 24px;flex-wrap:wrap}
.ctaband .i{width:52px;height:52px;border-radius:14px;background:var(--leaf);color:#fff;display:grid;place-items:center;flex:none}
.ctaband h3{font-size:1.4rem;font-weight:800}
.ctaband p{color:var(--muted);margin:4px 0 0}
.ctaband .btn{margin-left:auto}

/* ── Contacto ────────────────────────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:54px;align-items:start}
.contact-info p{color:var(--muted);margin:14px 0 24px}
.contact-info .row{display:flex;align-items:center;gap:12px;margin:12px 0;font-size:.95rem}
.contact-info .row .i{width:40px;height:40px;border-radius:10px;background:var(--leaf-soft);color:var(--leaf-d);display:grid;place-items:center;flex:none}
.contact-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.field{margin-bottom:16px}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.field input,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:.75rem .9rem;font:inherit;background:var(--cream)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--leaf);background:#fff}
.field textarea{resize:vertical;min-height:110px}
.form-ok{background:#e7f6e7;border:1px solid #b7e0b7;color:#256b25;padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:.92rem}
.form-err{background:#fdeaea;border:1px solid #f2c0c0;color:#a12a2a;padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:.92rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer{margin-top:auto;background:var(--forest-900);color:rgba(255,255,255,.72);padding:60px 0 24px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(175px,100%),1fr));gap:34px}
.foot-brand{min-width:200px}
.site-footer h5{color:#fff;font-size:.95rem;font-weight:700;margin:0 0 16px}
.site-footer a{color:rgba(255,255,255,.72)}
.site-footer a:hover{color:var(--leaf-2)}
.foot-brand .nav-brand{margin-bottom:14px}
.foot-list{display:grid;gap:9px}
.foot-row{display:flex;align-items:center;gap:9px;margin:9px 0}
.foot-social{display:flex;gap:10px;margin-top:6px}
.foot-social a{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.08);display:grid;place-items:center}
.foot-social a:hover{background:var(--leaf)}
.foot-social svg{width:17px;height:17px;color:#fff}
.news{display:flex;gap:8px;margin-top:12px}
.news input{flex:1;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:8px;padding:.6rem .8rem;color:#fff;font:inherit}
.news button{background:var(--leaf);border:0;border-radius:8px;color:#fff;padding:0 14px;cursor:pointer}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.55)}
.foot-bottom a{color:rgba(255,255,255,.55)}
/* Crédito de desarrollo. La placa blanca evita que el logo verde oscuro de
   Emelit se pierda sobre el fondo del pie. */
.foot-powered{display:inline-flex;align-items:center;gap:8px}
.foot-powered img{height:26px;width:auto;padding:3px 8px;background:#fff;border-radius:var(--radius)}

/* ══ Páginas internas ═══════════════════════════════════════════════════════ */
.phero{position:relative;background:linear-gradient(125deg,#154025 0%,#1f5a38 55%,#154025 100%);color:#fff;padding:120px 0 52px;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;opacity:.2;background:url('/img/hero-tapir.webp') center/cover no-repeat;mix-blend-mode:soft-light}
.phero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(13,38,23,.15),rgba(13,38,23,.5))}
.phero-inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.phero .crumbs{font-size:.85rem;color:rgba(255,255,255,.6);margin-bottom:12px}
.phero .crumbs a:hover{color:var(--leaf-2)}
.phero h1{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:800;max-width:20ch}
.phero p{margin-top:14px;max-width:60ch;color:rgba(255,255,255,.82)}
.phero .tag{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:4px 12px;border-radius:999px;font-size:.78rem;font-weight:600;margin-bottom:14px}

/* Grid de proyectos / tarjetas con imagen */
/* `min(300px,100%)` en lugar de `300px` a secas: en una pantalla de 320px la
   columna quedaba por debajo de esos 300px de mínimo y la tarjeta se salía de
   la caja. Con `min()` el mínimo nunca supera el ancho disponible. */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:24px}
/* Misma receta que .lp-card de la portada: esquina viva, filete de 1px que se
   tiñe de verde al pasar el cursor y la foto con un zoom corto. */
.pcard{background:var(--surface-1);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),border-color .25s,box-shadow .25s}
.pcard:hover{transform:translateY(-4px);border-color:var(--leaf);box-shadow:0 18px 34px -22px rgba(16,40,24,.45)}
.pcard:hover h3{color:var(--blue)}
.pcard-img{aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.pcard:hover .pcard-img img{transform:scale(1.05)}
.pcard-body h3{transition:color .25s}
.pcard-body{padding:20px;flex:1;display:flex;flex-direction:column;gap:8px}
.pcard-body .tagline{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf-d)}
.pcard-body h3{font-size:1.12rem;font-weight:700}
.pcard-body p{color:var(--muted);font-size:.9rem;margin:0}
.pcard-meta{margin-top:auto;padding-top:12px;display:flex;gap:14px;font-size:.82rem;color:var(--muted);border-top:1px solid var(--line)}

/* ── Listado de proyectos con tabla de filtros a la izquierda ───────────── */
.plist{display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:start}
.pfil{position:sticky;top:96px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);padding:18px}
.pfil-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.pfil-head h4{margin:0;font-size:1rem;font-weight:700;color:var(--ink)}
.pfil-clear{font-size:.8rem;color:var(--blue)}
.pfil-group{margin-bottom:16px}
.pfil-group:last-child{margin-bottom:0}
.pfil-group h5{margin:0 0 8px;font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pfil-group ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:190px;overflow:auto}
.pfil-group a{display:block;padding:5px 8px;border-radius:6px;font-size:.9rem;color:var(--ink)}
.pfil-group a:hover{background:var(--leaf-soft);color:var(--forest-800)}
.pfil-group a.is-on{background:var(--forest-700);color:#fff}
/* Selector desplegable con buscador (estado y municipio). El catálogo del
   INEGI trae hasta 570 municipios por estado: sin buscador no se navega. */
.pfil-pick{border:1px solid var(--line);border-radius:6px;background:var(--surface-2)}
.pfil-pick > summary{list-style:none;cursor:pointer;padding:8px 10px;font-size:.9rem;
  display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink)}
.pfil-pick > summary::-webkit-details-marker{display:none}
.pfil-pick > summary::after{content:"";width:7px;height:7px;flex:none;border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.pfil-pick[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.pfil-pick > summary > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfil-search{width:100%;margin:0;padding:7px 10px;border:0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);font:inherit;font-size:.86rem;background:var(--paper);color:var(--ink)}
.pfil-search:focus{outline:2px solid var(--blue);outline-offset:-2px}
/* Selector anidado en .pfil-group: gana a las reglas de la lista simple. */
.pfil-group .pfil-scroll{max-height:230px;overflow:auto;padding:6px;background:var(--paper);
  border-radius:0 0 6px 6px}
.pfil-group .pfil-scroll a{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* Cuántos proyectos publicados hay en esa entidad; 0 también se muestra. */
.pfil-count{font-family:var(--font-mono);font-size:.7rem;color:var(--muted);flex:none}
.pfil-group .pfil-scroll a:hover .pfil-count{color:var(--forest-800)}
.pfil-group .pfil-scroll a.is-on .pfil-count{color:rgba(255,255,255,.75)}
.pfil-none{margin:0;padding:10px;font-size:.85rem;color:var(--muted);background:var(--paper);border-radius:0 0 6px 6px}
@media (max-width:900px){
  .plist{grid-template-columns:1fr}
  .pfil{position:static}
}

/* Chips de filtro */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.fchip{padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);font-size:.88rem;font-weight:500;background:#fff;transition:.15s}
.fchip:hover{border-color:var(--leaf)}
.fchip.is-active{background:var(--forest-800);color:#fff;border-color:var(--forest-800)}

/* Detalle de servicio */
.svc-detail{display:grid;grid-template-columns:1.6fr .9fr;gap:44px;align-items:start}
.prose h2{font-size:1.5rem;margin:28px 0 10px}
.prose p{color:var(--muted);margin:0 0 14px;text-align:justify;text-justify:inter-word;hyphens:none;}
.feature-list{display:grid;gap:16px;margin-top:10px}
.feature{display:flex;gap:14px;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.feature .fi{width:38px;height:38px;flex:none;border-radius:var(--radius);background:var(--surface-2);color:var(--leaf-d);display:grid;place-items:center}
.feature h4{font-size:1rem;font-weight:700;margin:0 0 4px}
.feature p{font-size:.9rem;color:var(--muted);margin:0}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tagchip{background:var(--surface-2);border:1px solid var(--line);color:var(--leaf-d);font-size:.8rem;font-weight:600;padding:5px 12px;border-radius:var(--radius)}
.aside-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:sticky;top:90px}
.aside-card h4{font-size:1.05rem;margin:0 0 12px}
.aside-card .list{display:grid;gap:8px;margin-bottom:18px}
.aside-card .list a{display:block;padding:8px 12px;border-radius:var(--radius);font-size:.92rem;color:var(--ink)}
.aside-card .list a:hover{background:var(--leaf-soft);color:var(--forest-800)}

/* Formulario de lead compacto */
.lead-form{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.lead-form h3{font-size:1.2rem;margin:0 0 6px}
.lead-form .muted{color:var(--muted);font-size:.9rem;margin:0 0 18px}

/* ── Tienda: cabecera clara (ShopRenpagf) + filtros ──────────────────────── */
/* Sin banda propia: el fondo del sitio ya es blanco y la banda cortada a
   media página era el mayor desvío visual de la tienda. */
.store-head{padding:110px 0 10px}
.store-crumbs{padding:104px 0 0}
.body-site.has-announce .store-head{padding-top:148px}
.body-site.has-announce .store-crumbs{padding-top:142px}
.store-crumbs .crumbs{font-size:.88rem;color:var(--muted)}
.store-crumbs .crumbs a:hover{color:var(--leaf-d)}
.store-title{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.store-logo{width:56px;height:56px;border-radius:var(--radius);background:var(--forest-800);color:#fff;display:grid;place-items:center;flex:none}
.store-logo .material-symbols-outlined{font-size:30px}
.store-logo--img{width:auto;height:auto;min-width:0;border-radius:0;background:none}
.store-logo--img img{max-height:48px;width:auto;display:block}
.store-title h1{font-family:var(--font-display);font-size:clamp(1.75rem,3.6vw,2.6rem);font-weight:700;letter-spacing:-.02em}
.store-title p{color:var(--muted);margin:2px 0 0;font-size:.95rem}
.store-search{display:flex;align-items:center;gap:10px;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius);padding:6px 8px 6px 16px;max-width:660px}
.store-search .material-symbols-outlined{color:var(--muted)}
/* `min-width:0` es lo que deja encoger el campo. Un elemento flexible no baja
   por debajo del ancho de su propio contenido salvo que se le diga: sin esto,
   el campo se plantaba en el ancho del texto de ejemplo y empujaba el botón
   fuera de la pantalla en móvil. */
.store-search input{flex:1;min-width:0;border:0;outline:0;font:inherit;padding:11px 0;background:transparent}
.store-search input:focus{outline:0}
.store-search .btn{padding:.62rem 1.3rem;flex-shrink:0}
.store-layout{display:grid;grid-template-columns:240px 1fr;gap:34px;align-items:start}
.store-filters{position:sticky;top:90px;display:grid;gap:22px}
.sf-block h4{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.sf-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:var(--radius);font-size:.92rem;font-weight:500;color:var(--ink)}
.sf-link:hover{background:var(--leaf-soft);color:var(--forest-800)}
.sf-link.is-active{background:var(--forest-700);color:#fff}
.sf-count{font-size:.78rem;color:var(--muted)}
.sf-link.is-active .sf-count{color:rgba(255,255,255,.7)}
.store-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.store-count{font-weight:600;color:var(--muted)}
.store-sort{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted)}
.store-sort select{border:1px solid var(--line);border-radius:var(--radius);padding:.5rem .7rem;font:inherit;background:var(--surface-1);cursor:pointer}
.store-empty{text-align:center;padding:60px 20px;color:var(--muted)}
.store-empty .material-symbols-outlined{font-size:48px;color:var(--line)}
.store-empty p{margin:12px 0 16px}
.pl-img .ph .material-symbols-outlined{font-size:34px}
@media(max-width:820px){
  .store-layout{grid-template-columns:1fr}
  .store-filters{position:static;grid-template-columns:1fr 1fr}
}

/* ── Tienda estilo Mercado Libre ─────────────────────────────────────────── */
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:20px}
/* Misma tarjeta que el resto del sitio. La foto de producto conserva
   object-fit:contain —un recorte cortaría el artículo— pero sobre gris
   neutro, no sobre el degradado verdoso de antes. */
.pl-card{background:var(--surface-1);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),border-color .25s,box-shadow .25s}
.pl-card:hover{box-shadow:0 18px 34px -22px rgba(16,40,24,.45);border-color:var(--leaf);transform:translateY(-4px)}
.pl-img{aspect-ratio:1;background:var(--surface-2);padding:18px;display:grid;place-items:center;position:relative;overflow:hidden}
.pl-img img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.pl-card:hover .pl-img img{transform:scale(1.05)}
.pl-img .ph{width:70px;height:70px;border-radius:var(--radius);background:var(--surface-1);border:1px solid var(--line);display:grid;place-items:center;color:var(--leaf)}
.pl-img .ph svg{width:34px;height:34px}
.pl-cat{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--line);color:var(--muted);font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius)}
.pl-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.pl-price{font-family:var(--font-display);font-size:1.55rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.pl-price small{font-size:.72rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.pl-title{font-size:.92rem;color:var(--ink);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.pl-stock{font-size:.78rem;font-weight:700;display:flex;align-items:center;gap:6px}
.pl-stock::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
/* Semáforo de existencias: los tres únicos colores del sitio fuera de la
   paleta, y aquí sí significan algo. Se llevan al verde de marca. */
.pl-stock.in{color:var(--leaf-d)}.pl-stock.low{color:#b8860b}.pl-stock.out{color:#b3261e}
.pl-cta{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);color:var(--leaf-d);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:space-between}
.pl-card:hover .pl-cta span:last-child{transform:translateX(3px)}
.pl-cta span:last-child{transition:.15s}

/* Ficha de producto */
.prod{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
.prod-gallery{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;place-items:center;min-height:360px}
.prod-gallery img{max-width:100%;max-height:420px;object-fit:contain}
.prod-buy{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.prod-buy .cat{font-size:.8rem;color:var(--muted)}
.prod-buy h1{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:6px 0 14px}
.prod-buy .price{font-family:var(--font-display);font-size:2.2rem;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.prod-buy .unit{color:var(--muted);font-size:.9rem}
/* ── Visor de PDF (ficha de proyecto) ───────────────────────────────────── */
.pdfv{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:26px}
.pdfv-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--forest-900);color:#fff}
.pdfv-bar svg{width:15px;height:15px;flex:none;color:rgba(255,255,255,.65)}
.pdfv-name{font-family:var(--font-mono);font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdfv-sp{flex:1}
.pdfv-pages{font-family:var(--font-mono);font-size:.74rem;color:rgba(255,255,255,.66);white-space:nowrap}
.pdfv-dl{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:#fff;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);padding:5px 11px;transition:background .2s,border-color .2s}
.pdfv-dl:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
.pdfv-dl svg{color:#fff}
/* Fondo gris tras las hojas, como cualquier visor de documentos. */
.pdfv-stage{background:var(--surface-3);max-height:720px;overflow-y:auto;padding:24px;
  display:flex;flex-direction:column;align-items:center;gap:20px}
.pdfv-page{width:100%;max-width:620px;background:#fff;box-shadow:0 6px 22px rgba(16,40,24,.22)}
.pdfv-page canvas{display:block;width:100%;height:auto}
.pdfv-msg{margin:0;padding:50px 0;color:var(--muted);font-size:.92rem;text-align:center}
.pdfv-msg a{color:var(--blue);text-decoration:underline}
@media (max-width:560px){.pdfv-stage{padding:14px;max-height:560px}.pdfv-pages{display:none}}

/* Sustituyen a los estilos en línea que llevaba tienda/show. */
.prod-stock{margin:6px 0 4px}
.prod-form{max-width:560px;margin-top:40px}
.prose-spaced-lg{margin-top:48px}
.prod-links{display:grid;gap:10px;margin:18px 0}
/* Botones del sistema, no de la marca del marketplace: el naranja de Amazon
   y el amarillo de Mercado Libre eran los únicos colores ajenos del sitio. */
.prod-links a{display:flex;align-items:center;justify-content:center;gap:8px;padding:.75rem;border-radius:var(--radius);font-weight:600;
  background:var(--surface-1);color:var(--ink);border:1px solid var(--line);transition:border-color .2s,background .2s}
.prod-links a:hover{border-color:var(--leaf);background:var(--leaf-soft);color:var(--forest-800)}
.prod-desc{margin-top:34px;max-width:760px}

@media(max-width:960px){
  .svc-detail,.prod{grid-template-columns:1fr;gap:28px}
  .aside-card{position:static}
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:960px){
  .stats-card{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .stat:nth-child(3){border-left:0}
  .about,.contact{grid-template-columns:1fr;gap:34px}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:30px}
  .steps::before{display:none}
  .benefits{grid-template-columns:1fr}
  .ben-col + .ben-col{border-left:0;border-top:1px solid var(--line)}
  .ben-media{width:auto;height:180px}
  .impact{grid-template-columns:repeat(2,1fr)}
  .impact-title{grid-column:1/-1;padding:0 0 8px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
/* El menú se pliega a hamburguesa desde 860px, no desde 720px. Medido: la
   barra de escritorio —marca, siete enlaces y el botón— necesita 811px de
   ancho. Con el corte en 720px quedaba una franja de 721 a 804px, justo la de
   una tablet en vertical, donde el botón de contacto se salía de la pantalla
   y empujaba la página a lo ancho. */
@media(max-width:860px){
  .nav-links{display:none;position:fixed;inset:64px 0 auto 0;flex-direction:column;background:var(--forest-800);padding:18px 24px;gap:14px;max-height:calc(100vh - 64px);overflow-y:auto}
  .nav-links.is-open{display:flex}
  .nav-links a{color:#fff}
  .nav-cta .btn-text{display:none}
  .nav-toggle{display:block;margin-left:auto}
}
@media(max-width:720px){
  .certs .marks{margin-left:0}
  .steps{grid-template-columns:repeat(2,1fr)}
  .impact{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .ctaband .btn{margin-left:0}
}

/* ══ Barra fija (announce) ═══════════════════════════════════════════════════ */
.announce-bar{
  position:fixed; top:0; left:0; right:0; z-index:1000; height:38px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(90deg,#12301e,#184029); color:#fff;
  font-size:.85rem; font-weight:500; text-decoration:none; padding:0 16px;
}
.announce-bar svg{ width:15px; height:15px; flex:none }
.announce-bar span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:92vw }
a.announce-bar:hover{ background:linear-gradient(90deg,#184029,#1d4a30) }
body.has-announce .site-nav{ top:38px }
body.has-announce .nav-links.is-open{ top:102px }

/* ══ Popup ══════════════════════════════════════════════════════════════════ */
.site-popup{
  position:fixed; inset:0; z-index:2000; background:rgba(9,20,13,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:20px; animation:sp-fade .2s ease;
}
.site-popup[hidden]{ display:none }
.site-popup-card{
  background:#fff; border-radius:18px; max-width:440px; width:100%;
  padding:36px 30px 28px; text-align:center; position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.4); animation:sp-pop .25s ease;
}
.site-popup-x{ position:absolute; top:12px; right:16px; border:0; background:none; font-size:1.15rem; line-height:1; color:var(--muted); cursor:pointer }
.site-popup-x:hover{ color:var(--ink) }
.site-popup-ico{ width:60px; height:60px; margin:0 auto 16px; border-radius:16px; background:var(--leaf-soft); color:var(--leaf-d); display:grid; place-items:center }
.site-popup-ico svg{ width:30px; height:30px }
.site-popup-card h3{ font-size:1.35rem; font-weight:800; margin:0 0 8px }
.site-popup-card p{ color:var(--muted); margin:0 0 22px }
.site-popup-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
@keyframes sp-fade{ from{opacity:0} to{opacity:1} }
@keyframes sp-pop{ from{transform:scale(.95);opacity:.6} to{transform:none;opacity:1} }

/* Aparición suave al hacer scroll (revelada por JS; respaldo <noscript> en el home) */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1) }
.reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none } }

/* ── Cómo trabajamos: tarjetas numeradas (sin iconos) ──────────────────── */
.cap-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(236px,100%),1fr)); gap:20px }
.cap-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px;
  min-height:212px; display:flex; flex-direction:column; transition:.18s }
.cap-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--leaf) }
.cap-top{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.cap-num{ font-size:1.9rem; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--leaf) }
.cap-tag{ font-size:.68rem; font-weight:600; color:var(--leaf-d); background:var(--leaf-soft); border-radius:999px; padding:5px 11px; white-space:nowrap }
.cap-foot{ margin-top:auto; padding-top:22px }
.cap-title{ font-size:1.3rem; font-weight:800; letter-spacing:-.02em; margin:0 0 8px }
.cap-body{ color:var(--muted); font-size:.9rem; line-height:1.55; margin:0 }

/* ── Mercado ambiental: tarjetas de referencia (sin precios) ───────────── */
.ref-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(232px,100%),1fr)); gap:20px }
.ref-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px; transition:.18s }
.ref-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--leaf) }
.ref-ico{ width:44px; height:44px; border-radius:12px; background:var(--leaf-soft); color:var(--leaf-d); display:grid; place-items:center; margin-bottom:16px }
.ref-ico .material-symbols-outlined{ font-size:24px }
.ref-card h3{ font-size:1.25rem; font-weight:800; margin:0 0 6px }
.ref-card p{ color:var(--muted); font-size:.92rem; line-height:1.55; margin:0 }

/* ── Aliados: cuadrícula de logos + panel de texto (estilo referencia) ──── */
.ally-block{ display:grid; grid-template-columns:1.5fr 1fr; gap:52px; align-items:center }
.ally-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(92px,100%),1fr)); gap:30px 18px }
/* Mosaico por marca: logo arriba, nombre centrado debajo (como la referencia) */
.ally{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:11px; color:var(--ink); text-align:center }
.ally img{ height:52px; width:auto; max-width:84px; object-fit:contain; transition:transform .2s }
.ally:hover img{ transform:scale(1.08) }
.ally-name{ font-weight:600; font-size:.8rem; line-height:1.25; color:var(--muted) }
.ally-name--solo{ font-size:.95rem; color:var(--forest-800) }
.ally-aside h2{ font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; margin:10px 0 12px }
.ally-aside p{ color:var(--muted); margin:0 0 22px }
.ally-empty{ border:1px dashed var(--leaf); border-radius:var(--radius); padding:26px 24px; text-align:center; color:var(--muted); background:var(--leaf-soft) }
.ally-empty strong{ color:var(--leaf-d) }
@media (max-width:820px){
  .ally-block{ grid-template-columns:1fr; gap:34px }
  .ally-aside{ order:-1 }
}

/* ── Nav: se oculta al bajar, reaparece al subir ───────────────────────── */
.site-nav{ transition:transform .35s ease }
.site-nav.nav-hidden{ transform:translateY(-120%) }

/* ═══════════════════════════════════════════════════════════════════════════
   TARJETAS CON CARÁCTER (servicios / proceso / mercado) — menos genéricas
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base común MÍNIMA: mismo borde fino y esquina discreta en todas; hover sutil. */
.svc-card, .cap-card, .ref-card{
  position:relative;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.svc-card:hover, .cap-card:hover, .ref-card:hover{
  transform:none; border-color:var(--leaf);
  box-shadow:0 6px 20px -14px rgba(24,64,41,.28);
}

/* Servicios: título + pie con separador y flecha (sin icono) */
.svc-card h3{ font-size:1.18rem; font-weight:700 }
.svc-card > p{ color:var(--muted); font-size:.92rem; margin:8px 0 0 }
.svc-more{ display:flex; align-items:center; gap:6px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line); color:var(--leaf-d); font-weight:600; font-size:.85rem }
.svc-more .material-symbols-outlined{ transition:transform .25s ease }
.svc-card:hover .svc-more .material-symbols-outlined{ transform:translateX(4px) }

/* Proceso: número en serif (Lora) discreto */
.cap-top{ align-items:baseline }
.cap-num{ font-family:var(--font-head); font-style:normal; font-weight:600; font-size:1.9rem;
  line-height:1; letter-spacing:-.02em; color:var(--leaf-d) }
.cap-title{ font-size:1.18rem; font-weight:700 }
.cap-body{ color:var(--muted); font-size:.92rem }

/* Mercado: título consistente (sin icono) */
.ref-card h3{ font-size:1.18rem; font-weight:700 }
.ref-card p{ color:var(--muted); font-size:.92rem; margin-top:8px }

@media (prefers-reduced-motion:reduce){
  .svc-card, .cap-card, .ref-card,
  .svc-more .material-symbols-outlined{ transition:none }
}

/* ── Encabezado de página (unido al cuerpo: sin banda, sin borde) ────────── */
.phead{padding:118px 0 0}
.phead-inner{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.phead .crumbs{font-size:.85rem;color:var(--muted);margin-bottom:16px}
.phead .crumbs a{color:var(--muted)}
.phead .crumbs a:hover{color:var(--leaf-d)}
.phead .eyebrow{display:block;margin-bottom:12px}
.phead h1{font-family:var(--font-display);font-size:clamp(1.75rem,3.6vw,2.6rem);font-weight:700;letter-spacing:-.02em;color:var(--ink);max-width:22ch;line-height:1.14}
.phead p{margin-top:14px;max-width:64ch;color:var(--muted);font-size:1.04rem;text-align:justify;text-justify:inter-word;hyphens:none;}

/* Columna de lectura (texto largo, un solo color) */
.prose-narrow{max-width:820px}
.prose-narrow h1{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:700;color:var(--ink);line-height:1.12;margin:0 0 18px}
.prose-narrow h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:700}
.prose-narrow h2 .g{color:var(--leaf-d)}
.prose-narrow p{color:var(--muted);margin:16px 0;font-size:1.04rem;line-height:1.75}
.prose-narrow strong{color:var(--ink);font-weight:700}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING UNIFICADA — un solo sistema de grid cards, ligero y responsivo
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Certificaciones: chips (sin card, sin caja oscura) */
.cert-chips{display:flex;flex-wrap:wrap;gap:12px}
.cert-chip{display:inline-flex;align-items:baseline;gap:6px;border:1px solid var(--line);
  border-radius:var(--radius);padding:9px 16px;font-size:.86rem;background:var(--paper)}
.cert-chip b{font-weight:700;color:var(--ink)}
.cert-chip span{color:var(--muted)}

/* Utilidades (para no usar estilos inline) */
.section.pt0{padding-top:0}
.btn-block{width:100%;justify-content:center}
.contact-info h2{font-size:clamp(1.6rem,3vw,2rem);font-weight:700;margin-top:10px}
.prose-tags h2{font-size:1.15rem}
.prose-spaced{margin-top:40px}
.lead{font-size:1.05rem;color:var(--ink)}
.media-16x9{aspect-ratio:16/9;margin-bottom:26px}
.muted-note{color:var(--muted)}
.sticky-90{position:sticky;top:90px}

/* Coherencia de la landing con el hero: misma tipografía display en títulos
   y números, mismo acento verde. */
.home .section-head h2,
.home .about h2,
.home .contact-info h2,
.home .ally-aside h2{font-family:var(--font-display);letter-spacing:-.025em;font-weight:600}
.home .section-head h2 .g,
.home .about h2 .g{color:var(--leaf-2)}

/* ── Landing SIN tarjetas: lista enlazada, línea de tiempo y definición ─── */
/* Proceso: línea de tiempo vertical (marcadores + línea, sin cajas) */
.flow{list-style:none;margin:0;padding:0;max-width:820px}
.flow-item{position:relative;display:grid;grid-template-columns:58px 1fr;gap:22px;padding-bottom:38px}
.flow-item:last-child{padding-bottom:0}
.flow-item::before{content:"";position:absolute;left:28px;top:10px;bottom:-6px;width:2px;background:var(--line)}
.flow-item:last-child::before{display:none}
.flow-num{position:relative;z-index:1;width:58px;height:58px;border-radius:50%;border:2px solid var(--leaf);
  background:var(--paper);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;
  font-size:1.2rem;color:var(--leaf-d)}
.flow-body{padding-top:8px}
.flow-tag{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.flow-body h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;margin:4px 0 6px}
.flow-body p{color:var(--muted);max-width:60ch;hyphens:none}

/* ── Nosotros: dos columnas ──────────────────────────────────────────────
   Columna ancha para el texto corrido y columna estrecha para los bloques
   breves que lo acompañan. En «Lo que nos guía / Cuatro ejes» las dos pesan
   igual, de ahí el modificador. */
.ab-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4.5vw,64px);align-items:start}
.ab-split--even{grid-template-columns:1fr 1fr}
.ab-main{max-width:none}
.ab-main h1{font-family:var(--font-display);font-size:clamp(1.75rem,3.6vw,2.6rem);font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.14;margin:0 0 18px}
.ab-main h2{font-size:clamp(1.55rem,3vw,2.2rem);font-weight:700;line-height:1.16}
.ab-main h2 .g{color:var(--leaf-d)}
.ab-main p{color:var(--muted);margin:16px 0;font-size:1.04rem;line-height:1.75;text-align:justify;text-justify:inter-word;hyphens:none;}
.ab-main strong{color:var(--ink);font-weight:700}
/* La columna corta acompaña al texto mientras se lee, sin arrastrar hueco. */
.ab-side{position:sticky;top:100px}

/* Tarjetas de Nosotros: misma receta que .lp-card de la portada —caja blanca,
   esquina viva, filete de 1px que se tiñe de verde al pasar el cursor y una
   elevación corta—. Título en azul y cuerpo en negro. */
.ab-cards{display:grid;gap:18px}
.ab-card{background:var(--surface-1);border:1px solid var(--line);padding:22px 24px;
  transition:border-color .35s,transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s}
.ab-card:hover{border-color:var(--leaf);transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(16,40,24,.45)}
.ab-card h3{font-size:1.1rem;font-weight:700;line-height:1.3;color:var(--blue);margin:0 0 10px}
.ab-card p{color:var(--ink);font-size:.95rem;line-height:1.7;margin:0;hyphens:none}
.section-head--tight{max-width:none;margin-bottom:22px}


/* Imágenes de la landing (sin cajas): franja completa, franja dividida y media lateral */
.imgband{position:relative;width:100%;height:clamp(300px,52vh,540px);overflow:hidden}
.imgband img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.imgband:hover img{transform:scale(1.045)}
.imgband-cap{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(11,31,19,.62))}
.imgband-cap .wrap{padding-top:72px;padding-bottom:26px}
.imgband-cap p{font-family:var(--font-display);color:#fff;font-weight:600;font-size:clamp(1.05rem,2vw,1.5rem);margin:0;max-width:34ch}
.imgsplit{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.imgsplit img{width:100%;height:clamp(260px,38vh,420px);object-fit:cover;display:block}
.flow-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.flow-wrap .flow{max-width:none}
.flow-media{position:sticky;top:100px;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;box-shadow:0 18px 40px -22px rgba(16,40,24,.28)}
.flow-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.flow-media:hover img{transform:scale(1.045)}
@media(max-width:860px){
  .flow-wrap{grid-template-columns:1fr;gap:26px}
  .flow-media{position:static;aspect-ratio:16/10;max-height:300px;order:-1}
}
@media(max-width:900px){
  .ab-split,.ab-split--even{grid-template-columns:1fr;gap:32px}
  .ab-side{position:static}
}
@media(max-width:640px){.imgsplit{grid-template-columns:1fr}}

/* ── Grid cards limpias (Servicios / Mercado) — estilo Stripe/Notion ─────── */
.scards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.scard{position:relative;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px;
  text-decoration:none;color:inherit;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease}
.scard-body{display:flex;flex-direction:column;flex:1}
.scard h3{font-family:var(--font-display);font-size:1.3rem;font-weight:700;letter-spacing:-.01em;margin:0 0 12px}
.scard p{color:var(--muted);font-size:.95rem;line-height:1.62;margin:0}
.scard-more{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:8px;
  color:var(--leaf-d);font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.scard-more::after{content:"→";transition:transform .3s ease}
.scard:hover{transform:translateY(-6px);border-color:var(--leaf);box-shadow:0 26px 52px -28px rgba(16,40,24,.30)}
.scard:hover .scard-more::after{transform:translateX(4px)}
.scard--flat:hover{transform:none;border-color:var(--leaf)}
@media (max-width:520px){.scards{grid-template-columns:1fr}.scard{padding:28px 24px}}

/* ── Filas editoriales foto + texto alternadas — estilo Apple/Patagonia ──── */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.frow + .frow{margin-top:clamp(48px,7vw,96px)}
.frow-media{border-radius:var(--radius);overflow:hidden;box-shadow:0 22px 48px -26px rgba(16,40,24,.32);aspect-ratio:4/3}
.frow-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.frow-media:hover img{transform:scale(1.05)}
.frow-text h3{font-family:var(--font-display);font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;letter-spacing:-.01em;line-height:1.16;margin:0 0 14px}
.frow-text p{color:var(--muted);font-size:1.02rem;line-height:1.7;margin:0}
.frow--rev .frow-media{order:2}
@media (max-width:820px){.frow{grid-template-columns:1fr;gap:26px}.frow--rev .frow-media{order:0}}

/* ── Proceso como diagrama de flujo (pipeline de ingeniería, sin números) ── */
.pipeline{list-style:none;margin:0;padding:0;display:flex}
.pl-step{position:relative;flex:1;padding:0 16px;text-align:center}
.pl-step::before{content:"";position:absolute;top:10px;left:0;right:0;height:2px;background:var(--line)}
.pl-step:first-child::before{left:50%}
.pl-step:last-child::before{right:50%}
.pl-node{position:relative;z-index:1;display:block;width:20px;height:20px;margin:0 auto 24px;border-radius:50%;background:var(--paper);border:2px solid var(--leaf)}
.pl-node::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--leaf)}
.pl-tag{display:block;font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--leaf-d);margin-bottom:6px}
.pl-card h3{font-family:var(--font-display);font-size:1.02rem;font-weight:700;line-height:1.25;margin:0 0 8px}
.pl-card p{color:var(--muted);font-size:.86rem;line-height:1.55;margin:0}
@media (max-width:920px){
  .pipeline{flex-direction:column}
  .pl-step{padding:0 0 30px 34px;text-align:left}
  .pl-step::before{top:0;bottom:0;left:9px;right:auto;width:2px;height:auto}
  .pl-step:first-child::before{top:10px}
  .pl-step:last-child::before{bottom:auto;height:12px}
  .pl-node{position:absolute;left:0;top:0;margin:0}
}

/* ── CTA sobre imagen (cierre antes de contacto) ────────────────────────── */
.cta-band{position:relative;overflow:hidden;isolation:isolate}
.cta-band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta-band-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,31,19,.5),rgba(11,31,19,.78))}
.cta-band-inner{max-width:760px;margin:0 auto;padding:clamp(72px,11vw,128px) 24px;text-align:center;color:#fff}
.cta-band-inner h2{font-family:var(--font-display);font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.16;margin:0}
.cta-band-inner p{color:rgba(255,255,255,.86);font-size:1.05rem;line-height:1.65;margin:16px auto 26px;max-width:52ch}

/* ── Bloque oscuro de evidencia/datos (paneles con hairlines) ───────────── */
.evidence{background:var(--forest-900);color:#fff;border-top:1px solid var(--line);padding:clamp(84px,10vw,132px) 0}
.evidence .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,5vw,80px);align-items:start}
.ev-head{position:sticky;top:100px}
.ev-head .klabel{color:var(--leaf-2);margin-bottom:20px}
.ev-head h2{font-family:var(--font-display);font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:600;letter-spacing:-.025em;line-height:1.12;color:#fff;margin:0}
.ev-head h2 .g2{color:var(--leaf-2)}
.ev-head p{color:rgba(255,255,255,.6);margin-top:18px;font-size:1rem;line-height:1.6;max-width:36ch}
.ev-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.12);border-left:1px solid rgba(255,255,255,.12)}
.ev-panel{border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);padding:26px 24px 32px;transition:background .3s ease}
.ev-panel:hover{background:rgba(255,255,255,.04)}
.ev-code{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;color:var(--leaf-2);margin-bottom:44px}
.ev-code::after{content:"";width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.25)}
.ev-panel:hover .ev-code::after{background:var(--leaf-2)}
.ev-panel h3{font-family:var(--font-display);font-size:1.2rem;font-weight:600;margin:0 0 10px;color:#fff}
.ev-panel p{color:rgba(255,255,255,.6);font-size:.88rem;line-height:1.6;margin:0}
@media (max-width:820px){
  .evidence .wrap{grid-template-columns:1fr}
  .ev-head{position:static}
  .ev-grid{grid-template-columns:1fr;margin-top:34px}
}

/* ── Etiqueta técnica sobre imágenes (overlay mono) ─────────────────────── */
.frow-media,.about-media{position:relative}
.img-tag{position:absolute;left:14px;top:14px;z-index:2;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(11,31,19,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.22);padding:5px 9px}

/* ── Marco tipo blueprint alrededor del contenido (bajo el hero) ─────────── */
.frame{max-width:1360px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}

/* ── Metodología: módulos con líneas finas (mismo lenguaje que Evidencia) ── */
.dataflow{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(40px,5vw,80px);align-items:start}
.df-head{position:sticky;top:100px}
.df-head h2{font-family:var(--font-display);font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:600;letter-spacing:-.025em;line-height:1.12;margin:0}
.df-head p{color:var(--muted);margin-top:18px;font-size:1rem;line-height:1.6;max-width:34ch}
.df-list{border-top:1px solid var(--line)}
.df-row{display:grid;grid-template-columns:auto 1fr auto;gap:18px 26px;align-items:start;padding:26px 4px;border-bottom:1px solid var(--line);transition:background .3s ease}
.df-row:hover{background:var(--paper)}
.df-code{font-family:var(--font-mono);font-size:.72rem;color:var(--leaf-d);padding-top:5px}
.df-body h3{font-family:var(--font-display);font-size:1.2rem;font-weight:600;margin:0 0 8px}
.df-body p{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0;max-width:56ch}
.df-meta{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:6px;text-align:right;white-space:nowrap}
@media (max-width:860px){
  .dataflow{grid-template-columns:1fr}
  .df-head{position:static}
  .df-list{margin-top:32px}
  .df-row{grid-template-columns:auto 1fr}
  .df-meta{display:none}
}

/* Meta-label mono en tarjetas de servicio */
.scard-meta{margin-top:16px;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ── Contexto / fuentes ambientales confiables ──────────────────────────── */
.refs{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.ref-item{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;text-decoration:none;color:inherit;transition:border-color .4s ease,box-shadow .4s ease,transform .4s ease}
.ref-item:hover{border-color:var(--leaf);box-shadow:0 22px 46px -26px rgba(16,40,24,.28);transform:translateY(-4px)}
.ref-src{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--leaf-d);padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.ref-item p{color:var(--ink);font-size:.98rem;line-height:1.62;margin:0}
.ref-link{margin-top:auto;padding-top:22px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--leaf-d);display:inline-flex;align-items:center;gap:7px}
.ref-link::after{content:"\2197";transition:transform .3s ease}
.ref-item:hover .ref-link::after{transform:translate(2px,-2px)}

/* ── Aparición escalonada (letras / tarjetas / métricas) ────────────────── */
.reveal-group > *{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.reveal-group.in > *{opacity:1;transform:none}
.reveal-group.in > *:nth-child(2){transition-delay:.07s}
.reveal-group.in > *:nth-child(3){transition-delay:.14s}
.reveal-group.in > *:nth-child(4){transition-delay:.21s}
.reveal-group.in > *:nth-child(5){transition-delay:.28s}
.reveal-group.in > *:nth-child(6){transition-delay:.35s}
@media (prefers-reduced-motion:reduce){.reveal-group > *{opacity:1;transform:none;transition:none}}

/* Adaptación a cada dispositivo — experiencia suave y ligera */
@media (max-width:760px){
  .section{padding:56px 0}
  /* Mismo motivo que en la portada: en columna estrecha, justificar sin
     partir palabras abre huecos entre ellas. Mejor bandera a la derecha. */
  .prose p,.phead p,.ab-main p{text-align:left}
}
@media (max-width:480px){
  .flow-item{grid-template-columns:46px 1fr;gap:16px}
  .flow-num{width:46px;height:46px;font-size:1.05rem}
  .flow-item::before{left:22px}
}

/* ── Paginación (resources/views/vendor/pagination/renpagf.blade.php) ───── */
.pg{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin:34px 0 8px;font-family:var(--font)}
.pg-nums{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.pg-item{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-size:.9rem;font-weight:500;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
a.pg-item:hover{background:var(--leaf-soft);border-color:var(--leaf-2);color:var(--forest-800)}
a.pg-item:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}
.pg-item--on{background:var(--forest-700);border-color:var(--forest-700);color:#fff;font-weight:600}
.pg-item--off{opacity:.42;cursor:default}
.pg-item--gap{border-color:transparent;background:none;min-width:20px;padding:0 4px}
@media (max-width:560px){
  .pg-item{min-width:34px;height:34px;padding:0 9px;font-size:.84rem}
}

/* ── Botón flotante de WhatsApp (partials/site/whatsapp.blade.php) ───────── */
/* El SVG ya es el círculo verde con el glifo; aquí solo posición y sombra. */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;width:56px;height:56px;border-radius:50%;box-shadow:0 6px 20px rgba(0,0,0,.28);transition:transform .2s ease}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{display:block;width:100%;height:100%}
@media (max-width:560px){
  .wa-float{right:14px;bottom:14px;width:50px;height:50px}
}