/* =========================================================
   Distriagregados · Landing
   Dirección de arte: "La montaña de material"
   ========================================================= */

@font-face{font-family:"Saira Condensed";src:url(../fonts/saira-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Saira Condensed";src:url(../fonts/saira-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Saira Condensed";src:url(../fonts/saira-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  /* Color */
  --brand:#7DC11F;          /* verde vivo del logo Distriagregados (techo de pasto) */
  --brand-deep:#69A814;     /* el mismo verde, un tono más profundo, solo en formas */
  --brand-press:#17201B;    /* texto sobre claro: tinta (el verde vivo no se lee en letra pequeña) */
  --brand-soft:#E8F4D6;
  --brand-on-dark:#8FD137;  /* verde para texto sobre oscuro (9.76:1) */
  --cta:#7DC11F;            /* botón principal, letra oscura 8.19:1 */
  --cta-hover:#96D43C;      /* 10.13:1 */
  --cta-ink:#12180E;
  --ink:#17201B;
  --night:#12180E;
  --bg:#F5F1E8;
  --surface:#FFFFFF;
  --line:#E3DCCB;
  --muted:#5D6B62;          /* 4.97:1 sobre --bg */
  --accent:#8FD137;         /* verde vivo para detalles sobre oscuro (9.76:1) */
  --arena-dorada:#D9A63A;   /* solo en las franjas de material */
  --earth:#8D5C32;
  --gravel:#7D8A8F;
  --marcador:#FFE14D;
  /* Tipografía */
  --font-display:"Saira Condensed","Arial Narrow",sans-serif;
  --font-body:"Barlow",system-ui,sans-serif;
  /* Forma */
  --r-sm:2px; --r-md:4px; --cut:18px;
  /* Movimiento (pareja de M en main.js) */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --ease-pop:cubic-bezier(.34,1.3,.64,1);
  --dur:.95s; --dist:28px; --t-hover:.35s;
  /* Espacio */
  --gutter:clamp(16px,4vw,48px);
  --maxw:1240px;
  --section-y:clamp(72px,9vw,132px);
  --nav-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--font-body);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
.wrap{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.saltar{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--ink);color:#fff;padding:12px 16px;text-decoration:none;font-weight:600}
.saltar:focus{top:12px}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- Piezas de marca ---------- */
.barras{display:inline-flex;gap:3px;height:1em;vertical-align:-.12em;margin-right:.55em;flex:none}
.barras i{display:block;width:3px;height:100%;background:currentColor;transform-origin:50% 100%}
.ceja{display:flex;align-items:center;font:700 14px/1.2 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-press);margin-bottom:16px}
.ceja .barras{color:var(--brand)}
.oscuro .ceja .barras,.portada .ceja .barras,.contacto .ceja .barras{color:inherit}
.oscuro .ceja{color:var(--accent)}
.h2{font:800 clamp(36px,6.2vw,66px)/1.02 var(--font-display);text-transform:uppercase;letter-spacing:-.005em;margin-bottom:20px;max-width:18ch}
.h3{font:700 clamp(22px,2.4vw,27px)/1.1 var(--font-display);text-transform:uppercase;letter-spacing:.01em}
.lead{max-width:56ch;color:var(--muted);font-size:clamp(17px,1.4vw,19px)}
.oscuro{background:var(--night);color:#fff}
.oscuro .lead{color:rgba(255,255,255,.8)}
.linea-mask{padding:.15em .12em .15em 0;margin:-.15em -.12em -.15em 0}
.marcador{background:var(--marcador);color:var(--ink);font-weight:600;padding:.1em .4em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.seccion{padding:var(--section-y) 0;position:relative}

.trazo{display:block;width:100%;overflow:visible}
.trazo path{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linejoin:miter}

/* ---------- Botones ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px 0 22px;background:var(--cta);color:var(--cta-ink);text-decoration:none;border:0;cursor:pointer;
  font:700 18px/1 var(--font-display);letter-spacing:.05em;text-transform:uppercase;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
  transition:background-color var(--t-hover) var(--ease),scale .15s var(--ease)}
.btn svg{width:21px;height:21px;flex:none}
@media (hover:hover){.btn:hover{background:var(--cta-hover)}}
.btn:active{scale:.97}
.btn--claro{background:var(--night);color:#fff}
@media (hover:hover){.btn--claro:hover{background:#000}}
.btn--chico{min-height:44px;font-size:16px;padding:0 20px 0 16px;--cut:12px}
.roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top;line-height:1.3}
.roll::after{content:attr(data-text);position:absolute;left:0;top:100%;width:100%}
.roll,.roll::after{transition:transform var(--t-hover) var(--ease)}
@media (hover:hover){a:hover .roll{transform:translateY(-100%)}}
.enlace{display:inline-flex;align-items:center;min-height:44px;font:700 17px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--accent);padding-top:2px;transition:color var(--t-hover) var(--ease)}
.enlace:hover{color:var(--accent)}
.flecha{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:700 16px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--brand-press);text-decoration:none;border-bottom:2px solid var(--brand)}
.flecha span{transition:transform var(--t-hover) var(--ease)}
@media (hover:hover){.flecha:hover span{transform:translateX(5px)}}

/* ==================== INICIO Navegación ==================== */
.nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);display:flex;align-items:center;transition:background-color .4s var(--ease),box-shadow .4s var(--ease)}
.nav.is-solida{background:rgba(18,24,14,.96);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:0 var(--gutter)}
.nav__logo{display:block;flex:none}
/* Marca Distriagregados: insignia redonda (casa del logo) + nombre */
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.marca__ins{width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--brand);flex:none}
.marca__nombre{display:block;font:800 21px/1 var(--font-display);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.marca__nombre b{font-weight:800;color:var(--brand)}
.marca__nombre small{display:block;font:500 13px/1.2 var(--font-body);text-transform:none;letter-spacing:.02em;color:rgba(255,255,255,.7);margin-top:6px}
.nav__links{display:none}
.nav__cta{display:none}
.nav__menu{display:grid;place-items:center;width:46px;height:46px;background:none;border:1.5px solid rgba(255,255,255,.55);color:#fff;cursor:pointer;padding:0;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.nav__menu span{display:flex;gap:5px;height:18px}
.nav__menu i{display:block;width:3px;height:100%;background:currentColor;transition:transform .4s var(--ease)}
.nav__menu[aria-expanded="true"] i:first-child{transform:translateX(4px) rotate(45deg)}
.nav__menu[aria-expanded="true"] i:last-child{transform:translateX(-4px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:90;background:var(--night);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 20px) var(--gutter) 40px;visibility:hidden;opacity:0;transition:opacity .4s var(--ease),visibility 0s .4s}
.menu.is-abierto{visibility:visible;opacity:1;transition:opacity .4s var(--ease)}
.menu ul{list-style:none;padding:0;margin:0 0 32px}
.menu li+li{border-top:1px solid rgba(255,255,255,.12)}
.menu a:not(.btn){display:flex;align-items:center;min-height:60px;font:800 34px/1 var(--font-display);text-transform:uppercase;text-decoration:none}
.menu a:not(.btn):hover{color:var(--accent)}
.menu__dato{margin-top:24px;color:rgba(255,255,255,.7);font-size:15px}

@media (min-width:1000px){
  .nav{--nav-h:84px}
  .marca__ins{width:48px;height:48px}
  .nav .marca__nombre{font-size:24px}
  .nav__links{display:flex;gap:4px;list-style:none;padding:0;margin:0 0 0 auto}
  .nav__links a{display:flex;align-items:center;min-height:44px;padding:0 12px;color:#fff;text-decoration:none;font:700 15px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;transition:color var(--t-hover) var(--ease)}
  .nav__links a:hover{color:var(--accent)}
  .nav__cta{display:inline-flex;white-space:nowrap;flex:none}
  .nav__links a{white-space:nowrap}
  .nav__menu,.menu{display:none}
}
/* ==================== FIN Navegación ==================== */

/* ==================== INICIO Portada ==================== */
.portada{position:relative;min-height:100svh;background:var(--night);color:#fff;overflow:hidden;display:flex;flex-direction:column;isolation:isolate}
.portada__fondo{position:absolute;inset:0;z-index:-1;overflow:hidden}
.portada__fondo img{width:100%;height:100%;object-fit:cover;object-position:20% 60%}
.portada__fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,24,14,.9) 0%,rgba(18,24,14,.72) 40%,rgba(18,24,14,.86) 75%,rgba(18,24,14,.96) 100%)}
.portada__marco{position:relative;height:34svh;min-height:240px;margin-top:calc(var(--nav-h) - 6px);flex:none}
.portada__foto{position:absolute;inset:0;overflow:hidden;clip-path:polygon(0% 100%,0% 40%,14% 24%,24% 32%,42% 6%,54% 20%,66% 0%,80% 22%,90% 14%,100% 28%,100% 100%)}
.portada__foto img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;object-position:46% 50%}
.js .portada__foto{clip-path:polygon(0% 100%,0% 100%,14% 100%,24% 100%,42% 100%,54% 100%,66% 100%,80% 100%,90% 100%,100% 100%,100% 100%);animation:rescateFoto 0s 6s forwards}
@keyframes rescateFoto{to{clip-path:polygon(0% 100%,0% 40%,14% 24%,24% 32%,42% 6%,54% 20%,66% 0%,80% 22%,90% 14%,100% 28%,100% 100%)}}
.cresta{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cresta path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:miter}
.solo-esc{display:none}

.portada__cuerpo{margin-top:auto;padding:22px var(--gutter) clamp(36px,6vw,76px);width:min(100%,var(--maxw) + 2*var(--gutter));margin-inline:auto}
.portada .ceja{color:var(--accent)}
.titular{font:800 clamp(40px,11.2vw,124px)/.9 var(--font-display);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:22px}
.titular__l{display:block;overflow:hidden;padding:.08em .12em .06em 0;margin:-.08em -.12em -.06em 0}
.titular__in{display:block}
.titular em{font-style:normal;color:var(--accent)}
.js .titular__in{transform:translateY(130%);animation:rescateLinea 0s 6s forwards}
@keyframes rescateLinea{to{transform:none}}
.firma-lista .portada__foto,.firma-lista .titular__in{animation:none}
.portada__texto{max-width:36ch;font-size:clamp(17px,1.5vw,20px);color:rgba(255,255,255,.88);margin-bottom:22px}
.camino{display:block;width:min(100%,300px);height:30px;margin:0 0 10px;overflow:visible}
.camino path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:miter}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.estratos{display:flex;height:8px;position:absolute;left:0;right:0;bottom:0}
.estratos i{flex:1;transform-origin:0 50%}
.estratos i:nth-child(1){background:var(--gravel)}
.estratos i:nth-child(2){background:#C9B48A}
.estratos i:nth-child(3){background:var(--arena-dorada)}
.estratos i:nth-child(4){background:var(--earth)}
.estratos i:nth-child(5){background:var(--brand)}
@media (min-width:1000px){
  .portada__marco{position:absolute;top:var(--nav-h);right:0;bottom:8px;width:52%;height:auto;margin:0}
  .portada__marco{filter:drop-shadow(0 30px 50px rgba(0,0,0,.5))}
  .solo-esc{display:inline}
  .portada__cuerpo{padding-top:calc(var(--nav-h) + 40px);position:relative;z-index:1}
  .portada__cuerpo>*{max-width:52%}
  .portada__cuerpo .titular{max-width:62%}
  .portada__texto{max-width:38ch}
  .titular{font-size:clamp(40px,5vw,96px)}
  .portada__fondo::after{background:linear-gradient(90deg,rgba(18,24,14,.9) 0%,rgba(18,24,14,.74) 30%,rgba(18,24,14,.62) 50%,rgba(18,24,14,.75) 100%),linear-gradient(180deg,rgba(18,24,14,.55) 0%,transparent 25%,transparent 70%,rgba(18,24,14,.75) 100%)}
  .portada .ceja{font-size:16px}
}
/* ==================== FIN Portada ==================== */

/* ==================== INICIO Confianza ==================== */
.confianza{background:var(--night);color:#fff;padding:clamp(44px,6vw,80px) 0 clamp(28px,4vw,44px)}
.datos{display:grid;grid-template-columns:1fr 1fr;list-style:none;padding:0;border-top:1px solid rgba(255,255,255,.12)}
.dato{padding:26px 16px 26px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.dato:nth-child(2n){padding-left:18px;border-left:1px solid rgba(255,255,255,.12)}
.dato em{display:block;font:700 12px/1 var(--font-display);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.dato b{display:block;font:800 clamp(46px,6.4vw,84px)/.9 var(--font-display);color:#fff;font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:-.01em}
.dato>span{display:block;margin-top:12px;font-size:15px;line-height:1.4;color:rgba(255,255,255,.66);max-width:24ch}
.fuente{margin-top:20px;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.55)}
@media (min-width:860px){
  .datos{grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(255,255,255,.12)}
  .dato{padding:34px 28px;border-bottom:0}
  .dato:first-child{padding-left:0}
  .dato+.dato{border-left:1px solid rgba(255,255,255,.12)}
  .dato:nth-child(2n){padding-left:28px}
}
/* ==================== FIN Confianza ==================== */

/* ==================== INICIO Materiales ==================== */
.materiales{background:var(--surface)}
.materiales__cabeza{display:grid;gap:8px;margin-bottom:clamp(32px,4vw,52px)}
.familia{display:flex;align-items:center;gap:12px;font:700 15px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:36px 0 16px}
.familia::after{content:"";flex:1;height:1px;background:var(--line)}
.familia:first-of-type{margin-top:0}
.rejilla{display:grid;gap:16px}
.material{min-width:0;display:grid;grid-template-columns:116px 1fr;background:var(--bg);border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);position:relative}
.material__banda{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c,#C9B48A);transform-origin:50% 0}
.material__img{display:grid;place-items:center;background:#fff;padding:10px 8px 10px 14px}
.material__img img{width:100%;height:auto;transition:transform .7s var(--ease)}
.material__cuerpo{padding:16px 18px 14px}
.material .h3{font-size:21px;margin-bottom:6px}
.material p{font-size:15px;line-height:1.45;color:var(--muted);margin-bottom:6px}
@media (hover:hover){.material:hover .material__img img{transform:scale(1.06) rotate(-1.5deg)}}
@media (min-width:700px){
  .materiales__cabeza{grid-template-columns:1.1fr 1fr;align-items:end;gap:40px}
  .rejilla{grid-template-columns:repeat(2,1fr);gap:20px}
  .material{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .material__banda{right:0;bottom:auto;width:auto;height:8px;transform-origin:0 50%}
  .material__img{aspect-ratio:5/3;padding:22px 26px 10px}
  .material__img{min-height:0;overflow:hidden}
  .material__img img{width:100%;height:100%;object-fit:contain}
  .material__cuerpo{padding:20px 22px 20px}
  .material .h3{font-size:24px}
}
@media (min-width:1000px){.rejilla--3{grid-template-columns:repeat(3,1fr)}}
.material--foto .material__img{padding:0;background:#E5DDCA;overflow:hidden}
.material--foto .material__img img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}
.material__img--grafico{position:relative;display:grid;place-items:center;background:var(--night)!important;aspect-ratio:1/1;overflow:hidden}
.material__img--grafico::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:repeating-linear-gradient(180deg,var(--c) 0 6px,transparent 6px 14px);opacity:.85}
.material__img--grafico svg{position:relative;z-index:1;width:42%;max-width:96px;height:auto;aspect-ratio:46/40;margin-bottom:18%}
.otro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:20px;padding:22px 24px;background:var(--night);color:#fff;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
.otro p{max-width:60ch;color:rgba(255,255,255,.82);font-size:16px}
.otro b{color:#fff}
@media (min-width:700px){.material--foto .material__img{padding:0}.material--foto .material__img img{aspect-ratio:auto}.material__img--grafico{aspect-ratio:5/3}}
@media (min-width:1000px){.rejilla--4{grid-template-columns:repeat(4,1fr)}}
/* ==================== FIN Materiales ==================== */

/* ==================== INICIO Transporte ==================== */
.transporte__grid{display:grid;gap:clamp(36px,5vw,72px);align-items:center}
.transporte__foto{position:relative;aspect-ratio:4/3.4;clip-path:polygon(0% 100%,0% 30%,18% 12%,30% 22%,52% 0%,68% 18%,80% 10%,100% 34%,100% 100%);background:#1C2416}
.transporte__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.transporte__foto::after{content:"";position:absolute;inset:auto 0 0;height:8px;background:linear-gradient(90deg,var(--gravel) 0 20%,#C9B48A 20% 40%,var(--arena-dorada) 40% 60%,var(--earth) 60% 80%,var(--brand) 80%)}
.lista{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:14px}
.lista li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;font-size:17px;line-height:1.45}
.lista svg{width:30px;height:26px;margin-top:1px}
.oscuro .lista li{color:rgba(255,255,255,.9)}
@media (min-width:900px){.transporte__grid{grid-template-columns:1fr 1fr}}
/* ==================== FIN Transporte ==================== */

/* ==================== INICIO Nosotros ==================== */
.nosotros__grid{display:grid;gap:clamp(36px,5vw,72px);align-items:center}
.nosotros__foto{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:#1C2416;
  clip-path:polygon(0 0,calc(100% - 56px) 0,100% 56px,100% 100%,56px 100%,0 calc(100% - 56px))}
.nosotros__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nosotros__foto::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(90deg,var(--gravel) 0 20%,#C9B48A 20% 40%,var(--arena-dorada) 40% 60%,var(--earth) 60% 80%,var(--brand) 80%)}
.nosotros .lista li{color:var(--ink)}
.enfoque{margin-top:clamp(64px,9vw,120px)}
.enfoque__cabeza{display:grid;gap:18px 64px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.enfoque__titulo{font:800 clamp(30px,4.4vw,48px)/1.04 var(--font-display);text-transform:uppercase;max-width:20ch}
.enfoque__lista{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.valor{position:relative;background:var(--surface);padding:30px 24px 26px;border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
@property --franja{syntax:"<number>";inherits:true;initial-value:1}
.valor::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--c);transform-origin:0 50%;transform:scaleX(var(--franja))}
.valor__num{display:block;font:800 15px/1 var(--font-display);letter-spacing:.14em;color:var(--muted);margin-bottom:14px}
.valor .h3{margin-bottom:10px}
.valor p{color:var(--muted);font-size:16px;line-height:1.55}
@media (hover:hover){.valor:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(18,24,14,.12)}}
@media (min-width:700px){.enfoque__lista{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.nosotros__grid{grid-template-columns:1.05fr 1fr}.enfoque__cabeza{grid-template-columns:1.1fr 1fr}}
@media (min-width:1100px){.enfoque__lista{grid-template-columns:repeat(4,1fr)}}
/* ==================== FIN Nosotros ==================== */

/* ==================== INICIO Experiencia ==================== */
.experiencia{overflow:hidden}
.experiencia__sierra{color:var(--brand);opacity:.9;margin-bottom:clamp(40px,6vw,72px);height:clamp(60px,9vw,110px)}
.experiencia__sierra svg{width:100%;height:100%}
.experiencia__cabeza{display:grid;gap:8px;margin-bottom:clamp(32px,4vw,52px)}
.foto-nota{position:absolute;left:14px;bottom:20px;z-index:1;margin:0;font:700 13px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(18,24,14,.78);padding:7px 10px}
@media (min-width:900px){
  .experiencia__cabeza{grid-template-columns:1.1fr 1fr;align-items:end;gap:48px}
}
.carrusel{position:relative}
.carrusel__pista{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);padding:0 var(--gutter) 6px;margin:0 calc(-1 * var(--gutter));scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab}
.carrusel__pista::-webkit-scrollbar{display:none}
.carrusel__pista.is-arrastrando{cursor:grabbing;scroll-snap-type:none}
.carrusel__pista.is-arrastrando img{pointer-events:none}
.carrusel__pista:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.foto{position:relative;flex:0 0 auto;margin:0;height:clamp(300px,42vw,520px);scroll-snap-align:start;overflow:hidden;background:#E5DDCA;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
.foto img{height:100%;width:auto;max-width:none;object-fit:cover;user-select:none;transition:transform .8s var(--ease)}
@media (hover:hover){.foto:hover img{transform:scale(1.04)}}
.foto figcaption{position:absolute;left:12px;bottom:12px;margin:0;font:700 13px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(18,24,14,.78);padding:7px 10px}
.carrusel__controles{display:flex;align-items:center;gap:16px;margin-top:22px}
.carrusel__cuenta{font:700 15px/1 var(--font-display);letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.carrusel__cuenta b{color:var(--ink);font-size:20px}
.carrusel__barra{flex:1;height:3px;background:var(--line);position:relative;overflow:hidden}
.carrusel__barra i{position:absolute;inset:0;background:var(--brand);transform-origin:0 50%;transform:scaleX(.03)}
.carrusel__btn{display:grid;place-items:center;width:48px;height:48px;border:1.5px solid var(--ink);background:none;color:var(--ink);cursor:pointer;flex:none;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}
.carrusel__btn svg{width:22px;height:22px}
@media (hover:hover){.carrusel__btn:hover{background:var(--ink);color:#fff}}
.carrusel__btn:disabled{opacity:.35;cursor:default}
/* ==================== FIN Experiencia ==================== */

/* ==================== INICIO Cómo pedir ==================== */
.pasos-sec{background:var(--surface)}
.pasos{list-style:none;padding:0;margin-top:clamp(36px,5vw,60px);display:grid;gap:34px;position:relative;counter-reset:paso}
.pasos__linea{position:absolute;left:22px;top:20px;bottom:20px;width:3px;background:var(--line)}
.pasos__linea span{position:absolute;inset:0;background:var(--brand);transform-origin:50% 0}
.paso{position:relative;display:grid;grid-template-columns:48px 1fr;gap:18px}
.paso__cumbre{position:relative;width:48px;height:42px;z-index:1}
.paso__cumbre svg{width:100%;height:100%}
.paso__num{display:block;font:800 15px/1 var(--font-display);letter-spacing:.12em;color:var(--brand-press);margin-bottom:6px}
.paso .h3{margin-bottom:6px}
.paso p{color:var(--muted);font-size:16px;line-height:1.5;max-width:34ch}
@media (min-width:900px){
  .pasos{grid-template-columns:repeat(4,1fr);gap:28px}
  .pasos__linea{left:0;right:0;top:40px;bottom:auto;width:auto;height:3px}
  .pasos__linea span{transform-origin:0 50%}
  .paso{grid-template-columns:1fr;gap:16px}
  .paso__cumbre{width:58px;height:50px;background:var(--surface);box-shadow:0 0 0 10px var(--surface)}
}
/* ==================== FIN Cómo pedir ==================== */

/* ==================== INICIO Preguntas ==================== */
.preguntas__grid{display:grid;gap:36px}
.preguntas__lado .btn{margin-top:26px}
.faq{display:grid;gap:10px}
.qa{background:var(--surface);border:1px solid var(--line);transition:border-color .3s}
.qa.is-open{border-color:var(--brand)}
.qa h3{font:inherit}
.qa__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;min-height:64px;text-align:left;background:none;border:0;color:inherit;cursor:pointer;font:600 17px/1.35 var(--font-body)}
.qa__icon{position:relative;display:flex;gap:4px;justify-content:center;width:30px;height:22px;flex:none;color:var(--brand)}
.qa__icon i{display:block;width:3px;height:100%;background:currentColor;transition:transform .45s var(--ease)}
.qa.is-open .qa__icon i:first-child{transform:translateX(3.5px) rotate(90deg)}
.qa.is-open .qa__icon i:last-child{transform:translateX(-3.5px) rotate(90deg)}
.qa__a{display:grid;grid-template-rows:1fr}
.js .qa__a{grid-template-rows:0fr}
.js .qa.is-open .qa__a{grid-template-rows:1fr}
.qa-listo .qa__a{transition:grid-template-rows .55s var(--ease)}
.qa__a>div{overflow:hidden}
.qa__a p{padding:0 20px 20px;color:var(--muted);font-size:16px}
@media (min-width:900px){.preguntas__grid{grid-template-columns:.85fr 1.15fr;gap:64px}.preguntas__lado{position:sticky;top:120px;align-self:start}}
/* ==================== FIN Preguntas ==================== */

/* ==================== INICIO Contacto ==================== */
.contacto{background:var(--brand);color:var(--night);overflow:hidden;padding-bottom:0}
.contacto .ceja{color:var(--night)}
.contacto .h2{max-width:16ch}
.contacto__texto{color:var(--night);max-width:46ch;font-size:clamp(17px,1.5vw,20px);margin-bottom:28px}
.contacto__datos{list-style:none;padding:0;margin:36px 0 0;display:grid;gap:4px 32px}
.contacto__datos a,.contacto__datos span{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--night);text-decoration:none;font-size:17px;font-weight:500}
.contacto__datos a:hover{text-decoration:underline}
.contacto__datos .tels{flex-wrap:wrap;gap:4px 10px}
.contacto__datos .tels a{min-height:44px}
.tels__sep{opacity:.6}
.contacto__datos svg{width:20px;height:20px;flex:none;opacity:.85}
.contacto__sierra{display:block;width:100%;height:clamp(90px,14vw,190px);margin-top:clamp(40px,6vw,80px);color:var(--brand-deep)}
.contacto__sierra path{fill:currentColor}
@media (min-width:800px){.contacto__datos{grid-template-columns:repeat(2,auto);justify-content:start}}
/* Formulario de cotización */
.contacto__grid{display:grid;gap:clamp(40px,5vw,72px);align-items:start}
.contacto__form{position:relative}
.form{background:var(--surface);color:var(--ink);padding:clamp(24px,3.4vw,40px);box-shadow:0 30px 60px rgba(18,24,14,.22);
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
.form__titulo{font:800 clamp(28px,3.2vw,38px)/1.05 var(--font-display);text-transform:uppercase;margin-bottom:8px}
.form__intro{color:var(--muted);font-size:16px;margin-bottom:22px}
.campo{display:grid;gap:7px;margin-bottom:16px}
.campo label{font:700 15px/1.2 var(--font-display);letter-spacing:.06em;text-transform:uppercase}
.campo input,.campo textarea{width:100%;font:500 16px/1.4 var(--font-body);color:var(--ink);background:#FBFAF6;border:1.5px solid #D6CFBE;border-radius:var(--r-md);padding:13px 14px;min-height:50px;transition:border-color .2s,box-shadow .2s,background-color .2s}
.campo textarea{resize:vertical;min-height:112px}
.opcional{font:500 13px/1 var(--font-body);letter-spacing:0;text-transform:none;color:var(--muted)}
.campo input::placeholder,.campo textarea::placeholder{color:#7A857D}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px rgba(125,193,31,.35)}
.campo.is-error input,.campo.is-error textarea{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.15)}
.campo__error{color:#B3261E;font-size:14px;font-weight:600}
.campo--trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.acepto{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:14.5px;line-height:1.45;color:var(--muted);margin:4px 0 20px;cursor:pointer}
.acepto input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--brand-deep)}
.acepto.is-error span{color:#B3261E}
.acepto .campo__error{grid-column:1/-1}
.form__enviar{width:100%;min-height:56px}
.form__enviar[disabled]{opacity:.7;cursor:progress}
.form__estado{margin-top:14px;font-size:15.5px;line-height:1.5;min-height:1px}
.form__estado:empty{display:none}
.form__estado.is-ok{background:#EEF7E1;border-left:4px solid var(--brand-deep);padding:14px 16px;color:var(--ink)}
.form__estado.is-mal{background:#FBEDEC;border-left:4px solid #B3261E;padding:14px 16px;color:var(--ink)}
.form__estado a{font-weight:700;color:var(--ink)}
@media (min-width:1000px){.contacto__grid{grid-template-columns:1fr 1.05fr}.contacto__datos{grid-template-columns:1fr}}
/* ==================== FIN Contacto ==================== */

/* ==================== INICIO Pie ==================== */
.pie{background:var(--night);color:rgba(255,255,255,.82);padding:56px 0 40px;font-size:15px}
.pie__grid{display:grid;gap:32px}
.pie__logo{gap:14px}
.pie__logo .marca__ins{width:68px;height:68px}
.pie__logo .marca__nombre{font-size:clamp(28px,4vw,36px)}
.pie__lema{margin-top:14px;max-width:34ch}
.pie h2{font:700 15px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.pie ul{list-style:none;padding:0}
.pie li a,.pie li span{display:inline-flex;min-height:40px;align-items:center;text-decoration:none}
.pie li a:hover{color:#fff;text-decoration:underline}
.pie__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;color:rgba(255,255,255,.62)}
.pie__base a{color:rgba(255,255,255,.82)}
@media (min-width:800px){.pie__grid{grid-template-columns:1.3fr 1fr 1fr 1.3fr}}
/* ==================== FIN Pie ==================== */

/* Menú en pantallas medianas: sin el botón del menú (queda el botón flotante) y enlaces más juntos */
@media (min-width:1000px) and (max-width:1279px){
  .nav__cta{display:none!important}
  .nav__links a{padding:0 9px;letter-spacing:.07em}
}
/* ---------- Esqueleto de carga: brillo en lugar de un hueco mientras llega cada foto ---------- */
.js .esq{--esq-base:#E7E0D0;--esq-brillo:rgba(255,255,255,.6)}
.js .transporte__foto.esq{--esq-base:#222C1C;--esq-brillo:rgba(255,255,255,.07)}
.js .esq::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,var(--esq-brillo) 50%,transparent 70%) 0 0/250% 100% no-repeat,var(--esq-base);
  animation:esq-brillo 1.3s linear infinite;transition:opacity .6s var(--ease)}
.js .esq img{opacity:0;transition:opacity .6s var(--ease),transform .8s var(--ease)}
.js .esq.esq--lista::before{opacity:0;animation:none}
.js .esq.esq--lista img{opacity:1}
.js .material__img.esq{position:relative}
@keyframes esq-brillo{from{background-position:150% 0,0 0}to{background-position:-100% 0,0 0}}

/* Botón flotante de WhatsApp */
.wa-flotante{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:95;
  display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 0 0 3px #fff,0 10px 24px rgba(0,0,0,.28);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.wa-flotante svg{width:32px;height:32px}
.wa-flotante::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:wa-pulso 2.6s ease-out infinite;pointer-events:none}
@keyframes wa-pulso{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%,100%{box-shadow:0 0 0 18px rgba(37,211,102,0)}}
@media (hover:hover){.wa-flotante:hover{transform:translateY(-8px) scale(1.06);box-shadow:0 0 0 3px #fff,0 20px 36px rgba(0,0,0,.35)}}
.wa-flotante:active{transform:translateY(-2px) scale(.97)}
.wa-flotante:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
@media (min-width:1000px){.wa-flotante{width:64px;height:64px;right:28px;bottom:28px}.wa-flotante svg{width:34px;height:34px}}
@media (prefers-reduced-motion:reduce){.wa-flotante::after{animation:none}.wa-flotante{transition:none}}
/* Botón flotante de llamada (encima del de WhatsApp) */
.tel-flotante{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(92px + env(safe-area-inset-bottom));z-index:95;
  display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--brand);color:var(--night);text-decoration:none;
  box-shadow:0 0 0 3px #fff,0 10px 24px rgba(0,0,0,.28);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .35s var(--ease)}
.tel-flotante svg{width:28px;height:28px}
@media (hover:hover){.tel-flotante:hover{transform:translateY(-8px) scale(1.06);background:#96D43C;box-shadow:0 0 0 3px #fff,0 20px 36px rgba(0,0,0,.35)}}
.tel-flotante:active{transform:translateY(-2px) scale(.97)}
.tel-flotante:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
@media (min-width:1000px){.tel-flotante{width:64px;height:64px;right:28px;bottom:106px}.tel-flotante svg{width:30px;height:30px}}
@media (prefers-reduced-motion:reduce){.tel-flotante{transition:none}}
.pie{padding-bottom:180px}


/* ==================== INICIO Página legal ==================== */
.form__aviso{margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.acepto a{color:var(--ink);font-weight:600}
.legal-top{background:var(--night);color:#fff}
.legal-top__in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;min-height:76px;padding:10px 0}
.legal-top__volver{color:#fff}
.legal{max-width:760px;padding:clamp(40px,7vw,80px) 0 clamp(56px,8vw,96px)}
.legal__titulo{font:800 clamp(34px,6vw,58px)/1.02 var(--font-display);text-transform:uppercase;margin-bottom:10px}
.legal__meta{color:var(--muted);font-size:15px;margin-bottom:28px}
.legal h2{font:700 clamp(22px,2.6vw,28px)/1.15 var(--font-display);text-transform:uppercase;margin:38px 0 12px}
.legal p,.legal li{font-size:17px;line-height:1.65}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:20px;display:grid;gap:6px}
.legal li::marker{color:var(--brand-deep)}
.legal__volver{margin-top:36px}
.legal-pie{padding:28px 0}
.legal-pie .pie__base{margin-top:0;border-top:0;padding-top:0}
/* ==================== FIN Página legal ==================== */

/* ==================== INICIO Páginas de material ==================== */
.rejilla--2{display:grid;gap:16px}
@media (min-width:700px){.rejilla--2{grid-template-columns:repeat(2,1fr);gap:20px}.rejilla--2 .material__img{aspect-ratio:16/8!important;min-height:0}.rejilla--2 .material--foto .material__img img{height:100%;object-fit:cover}}
.material__cuerpo h3 a,.material__cuerpo h4 a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size var(--t-hover) var(--ease)}
.material__cuerpo h3 a:hover,.material__cuerpo h4 a:hover{background-size:100% 2px}
.pag .nav{background:rgba(18,24,14,.96)}
.nav--pagina .nav__cta{display:inline-flex!important}
@media (max-width:599px){.nav--pagina .nav__cta{padding:0 14px}.nav--pagina .nav__cta-txt{display:none}.nav--pagina }
.mat-hero{display:grid;gap:clamp(28px,4vw,56px);align-items:center;padding-top:calc(var(--nav-h) + clamp(24px,5vw,56px));padding-bottom:clamp(48px,7vw,96px)}
.ruta{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:18px}
.ruta a{color:inherit;min-height:32px;display:inline-flex;align-items:center}
.ruta a:hover{color:var(--ink)}
.ruta [aria-current]{color:var(--ink);font-weight:600}
.mat-hero__titulo{font:800 clamp(38px,7.2vw,78px)/.98 var(--font-display);text-transform:uppercase;letter-spacing:-.005em;margin-bottom:18px;max-width:14ch}
.chips{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface);border:1px solid var(--line);font:700 14px/1.1 var(--font-display);letter-spacing:.06em;text-transform:uppercase}
.chips svg{width:18px;height:16px}
.mat-hero .acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:26px}
.mat-foto{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:#1C2416;
  clip-path:polygon(0 0,calc(100% - 56px) 0,100% 56px,100% 100%,56px 100%,0 calc(100% - 56px))}
.mat-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mat-foto--alta{aspect-ratio:4/5;width:min(100%,460px);justify-self:center}
.mat-foto--doble{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bg)}
.mat-foto__parte{position:relative;overflow:hidden;background:#1C2416}
.mat-foto__parte .foto-nota{bottom:20px}
.mat-foto__parte:first-child .foto-nota{left:22px}
.mat-foto::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;z-index:2;background:linear-gradient(90deg,var(--gravel) 0 20%,#C9B48A 20% 40%,var(--arena-dorada) 40% 60%,var(--earth) 60% 80%,var(--brand) 80%)}
.mat-sec{padding:clamp(56px,8vw,104px) 0}
.mat-usos{margin-top:clamp(36px,5vw,56px);max-width:720px}
.mat-usos__titulo{margin-bottom:4px}
.mat-unidades{margin-top:clamp(28px,4vw,40px)}
.mat-unidades .valor{color:var(--ink)}
.mat-unidades .valor .h3{margin-bottom:8px}
.mat-preg{display:grid;gap:24px 64px}
.mat-preg__lista{display:grid;gap:10px}
.preg{background:var(--surface);border:1px solid var(--line);transition:border-color .3s}
.preg[open]{border-color:var(--brand)}
.preg summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:14px 20px;cursor:pointer;list-style:none;font:700 clamp(18px,1.8vw,21px)/1.25 var(--font-display);text-transform:uppercase;letter-spacing:.02em}
.preg summary::-webkit-details-marker{display:none}
.preg summary .qa__icon{position:relative;display:flex;gap:4px;justify-content:center;width:30px;height:22px;flex:none;color:var(--brand)}
.preg summary .qa__icon i{display:block;width:3px;height:100%;background:currentColor;transition:transform .35s var(--ease)}
.preg[open] summary .qa__icon i:first-child{transform:rotate(-35deg) translateX(2px)}
.preg[open] summary .qa__icon i:last-child{transform:rotate(35deg) translateX(-2px)}
.preg p{padding:0 20px 20px;color:var(--muted);font-size:16px}
.mat-sec--cierre{padding-top:0}
.mat-otros__titulo{margin-top:clamp(48px,6vw,72px)}
.mat-otros{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.mat-otros a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:12px 18px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;font:700 17px/1.2 var(--font-display);letter-spacing:.04em;text-transform:uppercase;transition:border-color .25s,transform .25s var(--ease)}
.mat-otros a:hover{border-color:var(--brand);transform:translateX(4px)}
.js [data-aparece]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-aparece].visto{opacity:1;transform:none}
.js:not(.aparece-listo) [data-aparece]{animation:aparece-rescate 0s 2.5s forwards}
@keyframes aparece-rescate{to{opacity:1;transform:none}}
@media (min-width:700px){.mat-otros{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.mat-hero{grid-template-columns:1.05fr 1fr}.mat-preg{grid-template-columns:.8fr 1.2fr}}
@media (min-width:1100px){.mat-otros{grid-template-columns:repeat(3,1fr)}}
/* ==================== FIN Páginas de material ==================== */

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .titular__in{transform:none}
  .js .portada__foto{clip-path:polygon(0% 100%,0% 40%,14% 24%,24% 32%,42% 6%,54% 20%,66% 0%,80% 22%,90% 14%,100% 28%,100% 100%)}
}