/* =========================================================
   TOKENS — estilo "actual" (por defecto)
   ========================================================= */
:root{
  /* Marca (muestreados del logo; confirmar con archivo oficial) */
  --azul:#0070B8;
  --naranja:#F47A20;

  --primary:#0070B8;
  --primary-700:#005A96;
  --accent:#F47A20;
  --accent-hover:#FF8C38;
  --accent-ink:#13171B;

  --page:#FFFFFF;
  --alt:#F3F4F2;
  --line:#C8CBC8;
  --line-soft:#E6E7E5;
  --ink:#13171B;
  --ink-soft:#2B3137;
  --muted:#737976;
  --error:#B42318;

  --btn-bg:var(--accent); --btn-ink:var(--accent-ink); --btn-hover:var(--accent-hover);
  --ui:var(--accent); --ui-ink:var(--accent-ink); --ui-soft:rgba(244,122,32,.2);
  --label:#0070B8;
  --dark:#0B2338;   --dark-label:#F47A20;
  --cta:#0070B8;    --cta-ink:#FFFFFF; --cta-soft:rgba(255,255,255,.9); --cta-label:#FFFFFF;
  --cta-btn-bg:var(--btn-bg); --cta-btn-ink:var(--btn-ink);
  --datos:#FFFFFF;  --datos-num:#0070B8; --datos-ink:#13171B; --datos-soft:#2B3137; --datos-line:#C8CBC8;
  --footer:#13171B;

  /* Hero (losa) */
  --hero-color:#E6E7E5;
  --hero-img:url("https://images.pexels.com/photos/3964666/pexels-photo-3964666.jpeg?auto=compress&cs=tinysrgb&w=1600");
  --hero-size:cover;
  --hero-blend:normal;
  --hero-veil:rgba(232,233,231,.84);
  --hero-ink:#13171B; --hero-soft:#2B3137; --hero-label:#0070B8;
  --hero-cta-bg:var(--btn-bg); --hero-cta-ink:var(--btn-ink);
  --hero-ghost:#13171B; --hero-ghost-hover-ink:#FFFFFF;
  --mark:#0070B8;
  --ring:#F47A20;

  /* Tipografía */
  --f-display:"Archivo","Arial Black",system-ui,sans-serif;
  --d-weight:850; --d-stretch:112%; --d-case:none; --d-track:-.012em; --d-lead:1.02;
  --h1-size:clamp(2.3rem,4.4vw + .4rem,4.3rem);
  --h2-size:clamp(2rem,2.8vw + .7rem,3.1rem);
  --f-h3:var(--f-display); --h3-weight:800; --h3-stretch:108%; --h3-case:none;
  --f-body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,sans-serif;
  --body-size:1.1875rem;
  --f-label:"Big Shoulders Stencil","Archivo",sans-serif;
  --l-weight:800; --l-size:1.2rem; --l-track:.09em;
  --f-data:"Big Shoulders Stencil","Archivo",sans-serif;
  --f-num:var(--f-display); --num-weight:900; --num-style:italic; --num-stretch:108%;
  --eyebrow-bar-w:30px; --eyebrow-bar-h:4px; --eyebrow-bar-c:var(--accent);

  --radius:6px;
  --chip-radius:999px;
  --header-h:72px;
  --gutter:20px;
}

/* ---------- A · Contratista (ref. Penhall): carbón, naranja, condensada en mayúsculas ---------- */
:root[data-estilo="contratista"]{
  --primary:#0070B8; --accent:#F26A1B; --accent-hover:#FF7D2E; --accent-ink:#111315;
  --page:#FFFFFF; --alt:#EFEFED; --line:#CFCFCB; --ink:#16181B; --ink-soft:#3A3E43;
  --btn-bg:#0070B8; --btn-ink:#FFFFFF; --btn-hover:#005A96;
  --ui:#0070B8; --ui-ink:#FFFFFF; --ui-soft:rgba(0,112,184,.18);
  --primary-700:#005A96;
  --label:#0070B8;
  --dark:#1B1E21; --dark-label:#5CB3F0;
  --cta:#1B1E21; --cta-label:#5CB3F0;
  --datos:#0070B8; --datos-num:#FFFFFF; --datos-ink:#FFFFFF; --datos-soft:rgba(255,255,255,.86); --datos-line:rgba(255,255,255,.3);
  --footer:#111315;
  --hero-color:#2A2D31; --hero-veil:rgba(22,24,27,.80);
  --hero-ink:#FFFFFF; --hero-soft:rgba(255,255,255,.86); --hero-label:#5CB3F0;
  --hero-ghost:#FFFFFF; --hero-ghost-hover-ink:#16181B;
  --mark:#FFFFFF; --ring:#F26A1B;
  --f-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --d-weight:800; --d-stretch:100%; --d-case:uppercase; --d-track:.005em; --d-lead:.95;
  --h1-size:clamp(2.8rem,5.4vw + .4rem,5.4rem);
  --h2-size:clamp(2.3rem,3.4vw + .7rem,3.8rem);
  --f-h3:"Barlow Condensed",sans-serif; --h3-weight:700; --h3-stretch:100%; --h3-case:uppercase;
  --f-body:"Barlow",system-ui,sans-serif; --body-size:1.15rem;
  --f-label:"Barlow Condensed",sans-serif; --l-weight:700; --l-size:1.15rem; --l-track:.1em;
  --f-data:"Barlow Condensed",sans-serif;
  --f-num:"Barlow Condensed",sans-serif; --num-weight:800; --num-style:normal; --num-stretch:100%;
  --eyebrow-bar-w:0px;
  --radius:2px; --chip-radius:2px;
}

/* ---------- B · Ficha técnica (ref. D-Drill): azul dominante, plano cuadriculado, IBM Plex ---------- */
:root[data-estilo="tecnico"]{
  --primary:#0070B8; --primary-700:#005A96; --accent:#F47A20; --accent-ink:#0B2338;
  --page:#FFFFFF; --alt:#EEF3F8; --line:#C9D6E3; --line-soft:#E1E9F1; --ink:#0B2338; --ink-soft:#34495E; --muted:#6B7F92;
  --label:#0070B8;
  --dark:#0070B8; --dark-label:#FFFFFF;
  --cta:#00406E; --cta-label:#9FD0F5;
  --datos:#FFFFFF; --datos-num:#0070B8; --datos-ink:#0B2338; --datos-soft:#34495E; --datos-line:#C9D6E3;
  --footer:#0B2338;
  --hero-color:#F5F8FB;
  --hero-img:linear-gradient(rgba(0,112,184,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(0,112,184,.16) 1px,transparent 1px),linear-gradient(rgba(0,112,184,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,112,184,.07) 1px,transparent 1px);
  --hero-size:120px 120px,120px 120px,24px 24px,24px 24px;
  --hero-veil:transparent;
  --hero-ink:#0B2338; --hero-soft:#34495E; --hero-label:#0070B8;
  --hero-ghost:#0B2338;
  --mark:#0070B8; --ring:#F47A20;
  --f-display:"IBM Plex Sans Condensed","Arial Narrow",sans-serif;
  --d-weight:700; --d-stretch:100%; --d-case:none; --d-track:-.01em; --d-lead:1.04;
  --h1-size:clamp(2.4rem,4.4vw + .4rem,4.4rem);
  --h2-size:clamp(2rem,2.8vw + .7rem,3.2rem);
  --f-h3:"IBM Plex Sans Condensed",sans-serif; --h3-weight:600; --h3-stretch:100%; --h3-case:none;
  --f-body:"IBM Plex Sans",system-ui,sans-serif; --body-size:1.12rem;
  --f-label:"IBM Plex Sans Condensed",sans-serif; --l-weight:600; --l-size:1.02rem; --l-track:.08em;
  --f-data:"IBM Plex Mono",monospace;
  --f-num:"IBM Plex Sans Condensed",sans-serif; --num-weight:700; --num-style:normal; --num-stretch:100%;
  --eyebrow-bar-w:0px;
  --radius:4px; --chip-radius:4px;
}

/* ---------- C · Maquinaria (ref. Brokk): naranja y negro, Anton + Roboto ---------- */
:root[data-estilo="maquinaria"]{
  --primary:#111111; --primary-700:#000000; --accent:#F47A20; --accent-hover:#FF8C38; --accent-ink:#111111;
  --page:#F4F4F2; --alt:#FFFFFF; --line:#D2D2CE; --line-soft:#E6E6E2; --ink:#111111; --ink-soft:#3A3A3A;
  --label:#111111;
  --dark:#111111; --dark-label:#F47A20;
  --cta:#F47A20; --cta-ink:#111111; --cta-soft:#2A1606; --cta-label:#111111;
  --cta-btn-bg:#111111; --cta-btn-ink:#FFFFFF;
  --datos:#111111; --datos-num:#F47A20; --datos-ink:#FFFFFF; --datos-soft:rgba(255,255,255,.75); --datos-line:rgba(255,255,255,.2);
  --footer:#111111;
  --hero-color:#F47A20; --hero-blend:multiply; --hero-veil:rgba(244,122,32,.62);
  --hero-ink:#111111; --hero-soft:#2A1606; --hero-label:#111111;
  --hero-cta-bg:#111111; --hero-cta-ink:#FFFFFF;
  --hero-ghost:#111111;
  --mark:#111111; --ring:#111111;
  --f-display:"Anton","Impact",sans-serif;
  --d-weight:400; --d-stretch:100%; --d-case:uppercase; --d-track:.01em; --d-lead:1.0;
  --h1-size:clamp(2.7rem,5vw + .4rem,5.2rem);
  --h2-size:clamp(2.2rem,3.2vw + .6rem,3.6rem);
  --f-h3:"Roboto Condensed",sans-serif; --h3-weight:700; --h3-stretch:100%; --h3-case:uppercase;
  --f-body:"Roboto",system-ui,sans-serif; --body-size:1.12rem;
  --f-label:"Roboto Condensed",sans-serif; --l-weight:700; --l-size:1.05rem; --l-track:.08em;
  --f-data:"Roboto Condensed",sans-serif;
  --f-num:"Anton",sans-serif; --num-weight:400; --num-style:normal; --num-stretch:100%;
  --eyebrow-bar-w:12px; --eyebrow-bar-h:12px; --eyebrow-bar-c:currentColor;
  --radius:0px; --chip-radius:0px;
}

/* =========================================================
   BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;padding-top:var(--header-h);
  font-family:var(--f-body);font-size:var(--body-size);line-height:1.55;
  color:var(--ink);background:var(--page);
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{width:min(1160px,100% - 2*var(--gutter));margin-inline:auto}
@media (min-width:1100px){.wrap{width:min(1160px,100% - 220px)}}

/* ---------- Tipografía ---------- */
.h-display{
  font-family:var(--f-display);font-weight:var(--d-weight);font-stretch:var(--d-stretch);
  text-transform:var(--d-case);line-height:var(--d-lead);letter-spacing:var(--d-track);
  margin:0;text-wrap:balance;
}
h1.h-display{font-size:var(--h1-size)}
h2.h-display{font-size:var(--h2-size)}
.eyebrow{
  display:flex;align-items:center;gap:.65rem;width:fit-content;margin:0 0 1rem;
  font-family:var(--f-label);font-weight:var(--l-weight);font-size:var(--l-size);
  letter-spacing:var(--l-track);text-transform:uppercase;color:var(--label);line-height:1.2;
}
.eyebrow::before{content:"";flex:none;width:var(--eyebrow-bar-w);height:var(--eyebrow-bar-h);background:var(--eyebrow-bar-c)}
:root:not([data-estilo="actual"]) .eyebrow{gap:var(--eyebrow-gap,.55rem)}
:root[data-estilo="contratista"] .eyebrow,:root[data-estilo="tecnico"] .eyebrow{gap:0}
.lead{font-size:clamp(1.15rem,.5vw + 1rem,1.35rem);max-width:40ch}
.sec{padding-block:clamp(4.5rem,8vw,7.5rem)}
.sec-head{max-width:760px}
.sec-head .lead{margin-top:1.2rem}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:56px;padding:.8rem 1.4rem;border-radius:var(--radius);
  font:700 1.1rem/1.1 var(--f-body);text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease,background-color .15s ease,color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:22px;height:22px;flex:none}
.btn-primary{background:var(--btn-bg);color:var(--btn-ink)}
.btn-primary:hover{background:var(--btn-hover)}
.btn-dark{background:#1B1E21;color:#fff}
.btn-dark:hover{background:#000}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-azul{background:var(--primary);color:#fff}
.btn-azul:hover{background:var(--primary-700)}

/* ---------- Logo (no cambia con el estilo) ---------- */
.logo{display:block;color:var(--azul);text-decoration:none;flex:none}
.logo svg{display:block;width:100%;height:auto;overflow:visible}
.logo-word{font-family:"Archivo","Arial Black",sans-serif;font-weight:900;font-style:italic;font-stretch:104%;font-size:44px;fill:currentColor}
.logo-line{stroke:currentColor;stroke-width:4.5;stroke-linecap:round;fill:none}
.logo-bit{fill:var(--naranja);transition:opacity .25s ease}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:50;
  background:#fff;border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease,background-color .3s ease,border-color .3s ease;
}
.site-header.is-scrolled{box-shadow:0 6px 24px rgba(19,23,27,.08)}
.site-header .wrap{width:min(1320px,100% - 2*var(--gutter));height:100%;display:flex;align-items:center;gap:1.75rem}
.site-header .logo{width:224px}
.nav{display:flex;gap:1.7rem;margin-left:auto}
.nav a{text-decoration:none;font-weight:700;font-size:1.03rem;padding:.35rem 0;border-bottom:3px solid transparent;color:#13171B}
.nav a:hover{border-color:var(--ui)}
.header-phone{display:flex;align-items:center;gap:.45rem;font-weight:700;text-decoration:none;white-space:nowrap;color:#13171B}
.header-phone svg{width:20px;height:20px;color:var(--azul)}
.header-cta{min-height:46px;padding:.55rem 1.1rem;font-size:1.02rem}
.menu-btn{display:none;margin-left:auto;min-height:44px;padding:.4rem .9rem;border:2px solid #13171B;border-radius:var(--radius);background:none;font:700 1rem var(--f-body);color:#13171B;cursor:pointer}
@media (max-width:1180px){.header-phone{display:none}}
@media (max-width:900px){
  :root{--header-h:64px}
  .site-header .logo{width:176px}
  .menu-btn{display:block}
  .header-cta{display:none}
  .nav{
    display:none;position:absolute;top:var(--header-h);left:0;right:0;flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid var(--line);padding:.5rem var(--gutter) 1rem;
  }
  .nav.is-open{display:flex}
  .nav a{padding:.9rem 0;font-size:1.2rem;border-bottom:1px solid var(--line-soft)}
}

/* ---------- Barra de progreso (móvil / tablet) ---------- */
.progress{position:fixed;left:0;right:0;top:var(--header-h);height:4px;z-index:49;pointer-events:none}
.progress span{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
@media (min-width:1100px){.progress{display:none}}

/* ---------- Broca: la flecha del logo que baja a perforar ---------- */
.drill-bit{display:none}
.motion .drill-bit{
  display:block;position:fixed;left:0;top:0;z-index:55;pointer-events:none;
  transform-origin:50% 100%;will-change:transform,opacity;
}
/* (los estilos de relleno se heredan a través de <use>) */
.drill-bit svg{display:block;width:100%;height:100%;overflow:visible;fill:var(--naranja);stroke:none;paint-order:stroke}
.drill-bit.is-travel svg{filter:drop-shadow(0 8px 10px rgba(19,23,27,.28))}
:root[data-estilo="maquinaria"] .drill-bit.is-travel svg{stroke:#111;stroke-width:3px;stroke-linejoin:round}
.drill-bit.is-idle svg{animation:peck 1.1s ease-in-out 1.2s 3}
@keyframes peck{50%{transform:translateY(3px)}}

/* ---------- Riel de perforación (escritorio) ---------- */
.rail{display:none}
@media (min-width:1100px){
  .motion .rail{
    display:block;position:fixed;z-index:40;pointer-events:none;
    left:34px;top:calc(var(--header-h) + 34px);bottom:44px;width:14px;
    opacity:0;transition:opacity .35s ease;
  }
  .motion .rail.is-on{opacity:1}
}
.rail-track{position:absolute;inset:0 auto 0 6px;border-left:2px dashed #9AA09C}
.rail-bore{
  position:absolute;left:1px;top:0;width:12px;height:100%;
  background:linear-gradient(90deg,#4A5158,#2B3137 45%,#3D444B);
  border-radius:0 0 6px 6px;box-shadow:0 0 0 1px rgba(255,255,255,.35);
  transform-origin:top;transform:scaleY(0);
}
.rail-ticks i{position:absolute;left:-6px;width:26px;height:2px;background:#9AA09C}
.rail-head{position:absolute;left:0;top:0;width:14px;height:0;will-change:transform}
.rail-bit{position:absolute;left:50%;bottom:-2px;width:26px;transform:translateX(-50%);filter:drop-shadow(0 0 3px rgba(255,255,255,.9))}
.rail-bit{fill:var(--naranja)}
.rail-depth{
  position:absolute;left:50%;top:8px;transform:translateX(-50%);white-space:nowrap;
  font:700 .9rem/1 var(--f-data);letter-spacing:.04em;
  background:#13171B;color:#fff;padding:.3rem .4rem;border-radius:3px;
}
.rail-depth small{font-size:.7rem;opacity:.75;margin-left:.15rem}
.dust{position:absolute;left:0;top:0;border-radius:1px;pointer-events:none;will-change:transform,opacity}

/* =========================================================
   HERO: la losa que se perfora
   ========================================================= */
.hero{position:relative;overflow:hidden;background:var(--hero-color);margin-top:calc(-1 * var(--header-h))}
.hero-slab{
  position:relative;z-index:2;
  min-height:100svh;padding-top:var(--header-h);
  display:flex;align-items:center;color:var(--hero-ink);
  background-color:var(--hero-color);background-image:var(--hero-img);
  background-size:var(--hero-size);background-position:center;background-blend-mode:var(--hero-blend);
}
.hero-slab::before{content:"";position:absolute;inset:0;background:var(--hero-veil)}
.motion .hero-slab{
  -webkit-mask-image:radial-gradient(circle at var(--cx,25%) var(--cy,50%),transparent var(--r,0px),#000 calc(var(--r,0px) + 1px));
          mask-image:radial-gradient(circle at var(--cx,25%) var(--cy,50%),transparent var(--r,0px),#000 calc(var(--r,0px) + 1px));
}
/* La flecha baja recta desde el logo por un carril a la izquierda del texto
   y cae en la diana, que queda junto al botón de WhatsApp. */
.hero{
  --channel:150px;                 /* carril libre entre el borde del logo y el texto */
  --arrow-off:18.6px;              /* centro de la flecha dentro del logo (224px de ancho) */
  --diana:min(110px,calc(2 * max(var(--gutter),(100vw - 1320px) / 2) + 2 * var(--arrow-off) - 6px));
}
.hero-inner{
  position:relative;width:100%;
  padding:3rem var(--gutter) 4.5rem max(var(--gutter),calc((100% - 1320px) / 2));
}
.hero-copy{position:relative;margin-left:var(--channel);max-width:860px}
.hero .eyebrow{color:var(--hero-label)}
.hero-copy h1{margin:0 0 1.25rem}
.hero-copy .lead{margin:0 0 1.9rem;color:var(--hero-soft)}
.hero-ctas{position:relative;display:flex;flex-wrap:wrap;gap:.8rem}
.hero-target{
  position:absolute;width:var(--diana);aspect-ratio:1;pointer-events:none;
  left:calc(var(--arrow-off) - var(--channel) - var(--diana) / 2);
  top:calc(28px - var(--diana) / 2);
}
.hero .btn-primary{background:var(--hero-cta-bg);color:var(--hero-cta-ink)}
.hero .btn-ghost{border-color:var(--hero-ghost);color:var(--hero-ghost)}
.hero .btn-ghost:hover{background:var(--hero-ghost);color:var(--hero-ghost-hover-ink)}
.hero-alt{margin:1.25rem 0 0;font-size:1.02rem;color:var(--hero-soft)}
.hero-alt a{font-weight:700;color:inherit}
.mark{position:absolute;inset:0;width:100%;height:100%;color:var(--mark);opacity:.9}
.motion .mark{animation:spray .9s .25s both}
@keyframes spray{from{opacity:0;transform:scale(.92) rotate(-6deg)}to{opacity:.9;transform:none}}
.drill-trail{display:none}
.motion .drill-trail{
  display:block;position:fixed;left:0;top:0;width:0;height:100px;z-index:54;pointer-events:none;
  border-left:2px dashed var(--accent);opacity:0;will-change:transform,opacity;
}
.scroll-hint{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:1;margin:0;
  display:none;align-items:center;gap:.5rem;font-weight:700;font-size:1rem;color:var(--hero-soft);
}
.motion .scroll-hint{display:flex}
.scroll-hint svg{width:20px;height:20px;animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}

.hero-under{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;color:#fff;background:#0B2338;
}
.motion .hero-under{position:absolute;inset:0;z-index:1}
.hero-under .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero-under .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,20,30,.94) 0%,rgba(11,20,30,.7) 38%,rgba(11,20,30,.06) 75%)}
.under-copy{position:relative;z-index:1;padding-block:3rem 3.5rem;will-change:transform}
.under-copy .eyebrow{color:var(--dark-label)}
.under-copy h2{max-width:20ch}
.obras-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 0;padding:0;list-style:none}
.obras-chips li{border:2px solid rgba(255,255,255,.55);border-radius:var(--chip-radius);padding:.35rem .9rem;font-weight:700;font-size:1rem}
.credit{position:absolute;right:12px;bottom:10px;z-index:1;font-size:.75rem;opacity:.75}

.hero-fx{display:none}
.motion .hero-fx{display:block;position:absolute;inset:0;z-index:3;pointer-events:none}
.hero-ring{
  position:absolute;left:0;top:0;border-radius:50%;opacity:0;
  border:6px dashed var(--ring);will-change:transform,width,height,opacity;
}
.hero-ring::after{
  content:"";position:absolute;inset:3px;border-radius:50%;
  box-shadow:inset 0 0 0 5px rgba(43,49,55,.75),inset 0 0 30px 6px rgba(0,0,0,.55);
}

@media (max-width:900px){
  /* En móvil la barra fija ya tiene Llamar / WhatsApp / Cotizar */
  .hero{--channel:64px;--arrow-off:14.6px;--diana:54px}
  .hero-slab{align-items:flex-start}
  .hero-inner{padding-block:1.2rem 5rem}
  .hero-copy .eyebrow{font-size:calc(var(--l-size) * .85)}
  .hero-copy h1{font-size:calc(var(--h1-size) * .86);margin-bottom:1rem}
  .hero-copy .lead{font-size:1.08rem}
  .hero-ctas .btn-ghost,.hero-alt{display:none}
  .scroll-hint{left:calc(var(--gutter) + var(--channel));transform:none;bottom:6rem}
}

/* =========================================================
   SECCIONES
   ========================================================= */
/* Datos */
.datos{padding-block:clamp(3.5rem,6vw,5.5rem);background:var(--datos);color:var(--datos-ink)}
.datos-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.dato{padding:.4rem 1.6rem;border-left:1px solid var(--datos-line)}
.dato:first-child{border-left:0;padding-left:0}
.dato-num{
  display:block;font-family:var(--f-num);font-style:var(--num-style);font-weight:var(--num-weight);font-stretch:var(--num-stretch);
  font-size:clamp(2.4rem,3.4vw,3.6rem);line-height:1;color:var(--datos-num);font-variant-numeric:tabular-nums;
}
.dato-unit{display:block;margin:.5rem 0 .6rem;font:var(--l-weight) 1.1rem/1 var(--f-label);letter-spacing:.08em;text-transform:uppercase}
.dato p{margin:0;font-size:1.02rem;color:var(--datos-soft)}
@media (max-width:980px){
  .datos-grid{grid-template-columns:1fr 1fr;row-gap:2.2rem}
  .dato:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:560px){
  .datos-grid{grid-template-columns:1fr}
  .dato{border-left:0;padding:0 0 1.6rem;border-bottom:1px solid var(--datos-line)}
  .dato:last-child{border-bottom:0;padding-bottom:0}
}

/* Servicios */
.servicios{background:var(--alt)}
.svc-list{display:grid;grid-template-columns:1fr 1fr;gap:3.6rem 3.2rem;margin:3.4rem 0 0;padding:0;list-style:none}
.svc{display:grid;grid-template-columns:auto 1fr;gap:1.7rem;align-items:start}
.hole{position:relative;width:clamp(130px,13vw,184px);aspect-ratio:1;flex:none;margin:8px}
.hole img{width:100%;height:100%;object-fit:cover;border-radius:50%;clip-path:circle(50% at 50% 50%);background:var(--line-soft)}
.motion .hole img{clip-path:circle(0% at 50% 50%)}
.hole .crown{display:none;position:absolute;inset:-9px;border:4px dashed var(--accent);border-radius:50%}
.motion .hole .crown{display:block}
.hole .tag{
  position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);white-space:nowrap;
  background:#13171B;color:#fff;padding:.28rem .6rem;border-radius:3px;
  font:700 .95rem/1 var(--f-data);letter-spacing:.05em;
}
.svc h3,.obra h3,.paso h3,.form h3{
  font-family:var(--f-h3);font-weight:var(--h3-weight);font-stretch:var(--h3-stretch);text-transform:var(--h3-case);
}
.svc h3{margin:.2rem 0 .55rem;font-size:1.6rem;line-height:1.1}
.svc p{font-size:1.06rem;margin-bottom:.8rem}
.specs{display:flex;flex-wrap:wrap;gap:.35rem .5rem;margin:0 0 1rem;padding:0;list-style:none;font-size:.95rem;color:var(--ink-soft)}
.specs li{background:var(--page);border:1px solid var(--line);border-radius:3px;padding:.15rem .5rem}
.link-wa{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;color:var(--primary-700);text-underline-offset:4px;text-decoration-thickness:2px}
.link-wa svg{width:20px;height:20px}
.link-wa:hover{color:var(--ink)}
@media (max-width:900px){.svc-list{grid-template-columns:1fr;gap:3rem}}
@media (max-width:520px){
  .svc{grid-template-columns:1fr;gap:1.4rem}
  .hole{width:150px}
}

/* Obras */
.obras{background:var(--dark);color:#fff}
.obras .eyebrow{color:var(--dark-label)}
.obras .lead{color:rgba(255,255,255,.85)}
.obras-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:1.3rem;margin-top:3.2rem}
.obra{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:calc(var(--radius) + 2px);overflow:hidden;display:grid}
.obra--big{grid-row:span 3;grid-template-rows:1fr auto}
.obra:not(.obra--big){grid-template-columns:42% 1fr}
.obra-img{position:relative;margin:0;min-height:180px;overflow:hidden;--cut:100%}
.obra-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 calc(100% - var(--cut)) 0 0)}
.motion .obra-img{--cut:0%}
.obra-img::after{
  content:"";position:absolute;top:0;bottom:0;left:var(--cut);width:3px;margin-left:-1px;
  background:var(--accent);box-shadow:0 0 12px 3px rgba(244,122,32,.7);opacity:0;
}
.obra-img.is-cutting::after{opacity:1}
.obra-img figcaption{position:absolute;left:8px;bottom:8px;font-size:.72rem;background:rgba(0,0,0,.55);padding:.1rem .4rem;border-radius:3px}
.obra--big .obra-img{min-height:340px}
.obra-body{padding:1.4rem 1.5rem 1.5rem}
.obra-tag{margin:0 0 .35rem;font:var(--l-weight) 1rem/1.15 var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--dark-label)}
.obra h3{margin:0 0 .45rem;font-size:1.5rem;line-height:1.1}
.obra--big h3{font-size:clamp(1.8rem,2.4vw,2.4rem)}
.obra-body p:last-child{margin:0;color:rgba(255,255,255,.85);font-size:1.05rem}
.clientes{margin-top:3.6rem;padding-top:2.2rem;border-top:1px solid rgba(255,255,255,.18)}
.clientes h3{margin:0 0 1.2rem;font-size:1.15rem}
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:.9rem;margin:0;padding:0;list-style:none}
.logos li{height:76px;display:grid;place-items:center;border:2px dashed rgba(255,255,255,.3);border-radius:var(--radius);font-size:.85rem;color:rgba(255,255,255,.65);text-align:center;padding:.3rem}
@media (max-width:900px){
  .obras-grid{grid-template-columns:1fr}
  .obra--big{grid-row:auto}
  .obra:not(.obra--big){grid-template-columns:1fr}
  .obra-img{min-height:210px}
  .logos{grid-template-columns:repeat(3,1fr)}
}

/* Proceso */
.proceso{background:var(--page)}
.pasos-wrap{position:relative;margin-top:3.4rem}
.pasos{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin:0;padding:0;list-style:none}
.bore{position:absolute;left:12.5%;right:12.5%;top:34px;height:10px;border-radius:5px;background:var(--line-soft);overflow:hidden}
.bore-fill{display:block;width:100%;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,1))}
.paso{text-align:center}
.paso-hole{
  width:78px;height:78px;margin:0 auto 1.25rem;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--f-num);font-style:var(--num-style);font-weight:var(--num-weight);font-size:2rem;
  background:var(--ui);color:var(--ui-ink);border:4px solid var(--ui);
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;
}
.motion .paso:not(.is-drilled) .paso-hole{background:var(--page);color:var(--muted);border-color:var(--line)}
.motion .paso.is-drilled .paso-hole{transform:rotate(-8deg)}
.paso h3{margin:0 0 .5rem;font-size:1.35rem;line-height:1.15}
.paso p{margin:0;font-size:1.04rem;color:var(--ink-soft)}
@media (max-width:900px){
  .pasos{grid-template-columns:1fr;gap:2.2rem}
  .paso{display:grid;grid-template-columns:78px 1fr;gap:1.2rem;text-align:left;align-items:start}
  .paso-hole{margin:0}
  .bore{left:34px;right:auto;top:39px;bottom:39px;width:10px;height:auto}
  .bore-fill{transform-origin:top;transform:scaleY(var(--p,1))}
}

/* Empresa */
.empresa{background:var(--alt)}
.empresa-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.check{margin:1.6rem 0 0;padding:0;list-style:none;display:grid;gap:.8rem}
.check li{display:flex;gap:.75rem;align-items:flex-start;font-weight:700}
.check li::before{content:"";flex:none;width:22px;height:22px;margin-top:.12rem;border-radius:50%;border:3px solid var(--ui);background:radial-gradient(circle,var(--ui) 0 4px,transparent 5px)}
.maquinas{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.maquina{margin:0;background:#fff;border:1px solid var(--line);border-radius:calc(var(--radius) + 2px);padding:1rem;display:flex;flex-direction:column}
.maquina img{height:220px;width:100%;object-fit:contain;mix-blend-mode:multiply}
.maquina figcaption{margin-top:.8rem;font-weight:700;font-size:1rem;line-height:1.3}
.maquina figcaption span{display:block;font-weight:400;color:var(--ink-soft);font-size:.92rem;margin-top:.2rem}
.video{margin:1rem 0 0;grid-column:1/-1}
.video video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:calc(var(--radius) + 2px);background:#13171B}
.video figcaption{margin-top:.6rem;font-size:.95rem;color:var(--ink-soft)}
@media (max-width:900px){.empresa-grid{grid-template-columns:1fr}}

/* Cotizar */
.cotizar{background:var(--cta);color:var(--cta-ink)}
.cotizar .eyebrow{color:var(--cta-label)}
.cotizar-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.cotizar .lead{color:var(--cta-soft)}
.cotizar .btn-primary{background:var(--cta-btn-bg);color:var(--cta-btn-ink)}
.contacto{margin:2rem 0 0;padding:0;list-style:none;display:grid;gap:1.1rem}
.contacto .btn{width:100%;max-width:380px;font-size:1.15rem}
.tel{display:flex;flex-direction:column;text-decoration:none}
.tel small{font-size:.95rem;opacity:.85}
.tel b{font-family:var(--f-num);font-weight:var(--num-weight);font-stretch:var(--num-stretch);font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.1;letter-spacing:.01em}
.tel:hover b{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.form{background:#fff;color:#13171B;border-radius:calc(var(--radius) + 4px);padding:clamp(1.4rem,3vw,2.2rem);box-shadow:0 24px 60px rgba(0,0,0,.25)}
.form h3{margin:0 0 1.2rem;font-size:1.6rem}
.form-fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field--full{grid-column:1/-1}
.field label{font-weight:700;font-size:1rem}
.field label em{font-style:normal;color:#737976;font-weight:400}
.field input,.field select,.field textarea{
  width:100%;min-height:54px;padding:.7rem .85rem;border:2px solid #C8CBC8;border-radius:var(--radius);
  font:400 1.08rem/1.35 var(--f-body);color:#13171B;background:#fff;
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,112,184,.25)}
.field-error{display:none;margin:0;color:var(--error);font-size:.95rem;font-weight:700}
.field.is-bad input,.field.is-bad select{border-color:var(--error)}
.field.is-bad .field-error{display:block}
.form-submit{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:.4rem}
.form-submit .btn{min-width:220px}
.form-note{margin:0;font-size:.92rem;color:#2B3137}
.form-ok{display:none}
.form.is-sent .form-fields{display:none}
.form.is-sent .form-ok{display:block}
@media (max-width:900px){.cotizar-grid{grid-template-columns:1fr}}
@media (max-width:560px){.form-fields{grid-template-columns:1fr}.form-submit .btn{width:100%}}

/* Footer */
.site-footer{background:var(--footer);color:rgba(255,255,255,.85);padding-block:3.5rem 2.5rem;font-size:1rem}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem}
.site-footer .logo{width:220px;color:#fff;margin-bottom:1rem}
.site-footer h3{margin:0 0 .8rem;color:#fff;font-size:1.05rem}
.site-footer ul{margin:0;padding:0;list-style:none;display:grid;gap:.45rem}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-legal{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.85rem;color:rgba(255,255,255,.6)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* Barra fija de acciones (móvil) */
.actionbar{display:none}
@media (max-width:900px){
  body{padding-bottom:78px}
  .actionbar{
    display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:8px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#fff;border-top:1px solid var(--line);
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  }
  .actionbar .btn{min-height:54px;padding:.4rem .5rem;font-size:1rem;gap:.4rem}
  .actionbar .btn-ghost{border-color:#13171B;color:#13171B}
  .under-copy{padding-bottom:2.5rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* =========================================================
   Sitio multipágina: componentes nuevos
   ========================================================= */
/* Dato de relleno (confirmar con Perfoservice) */
mark.r{background:rgba(255,205,0,.30);color:inherit;box-shadow:inset 0 -2px 0 rgba(240,180,0,.95);border-radius:2px;padding:0 .12em}

/* Menú: Servicios desplegable */
.nav{align-items:center}
.nav-drop{position:relative}
.nav-drop > button{display:flex;align-items:center;gap:.45rem;background:none;border:0;border-bottom:3px solid transparent;padding:.35rem 0;font:700 1.03rem var(--f-body);color:#13171B;cursor:pointer}
.nav-drop > button::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.nav-drop > button:hover,.nav-drop.is-current > button{border-color:var(--ui)}
.drop{display:none;position:absolute;left:-14px;top:calc(100% + 12px);min-width:300px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);box-shadow:0 18px 40px rgba(0,0,0,.14)}
.nav-drop.is-open .drop{display:grid}
.nav .drop a{display:block;padding:.65rem .75rem;border:0;border-radius:var(--radius);font-weight:600;font-size:1rem}
.nav .drop a:hover,.nav .drop a[aria-current="page"]{background:var(--alt)}
.nav .drop a.drop-all{margin-top:4px;border-top:1px solid var(--line-soft);border-radius:0;color:var(--primary-700)}
.nav > a[aria-current="page"]{border-color:var(--ui)}
@media (max-width:900px){
  .nav{align-items:stretch}
  .nav-drop > button{width:100%;padding:.9rem 0 .4rem;font-size:1.2rem;cursor:default}
  .nav-drop > button::after{display:none}
  .drop{display:grid;position:static;min-width:0;padding:0 0 .4rem .9rem;border:0;box-shadow:none;background:none}
  .nav .drop a{font-size:1.06rem;padding:.6rem 0;border-bottom:1px solid var(--line-soft);border-radius:0}
  .nav .drop a.drop-all{display:none}
}

/* Logos de constructoras */
.clientes-band{background:var(--page);padding-block:2.6rem;border-bottom:1px solid var(--line-soft)}
.clientes-band h2{margin:0 0 1.2rem;font:var(--l-weight) 1rem/1.2 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.logos-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.9rem;margin:0;padding:0;list-style:none}
.logos-grid li{height:72px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--alt);font-size:.85rem;color:var(--muted);text-align:center;padding:.3rem}
@media (max-width:900px){.logos-grid{grid-template-columns:repeat(3,1fr)}}

/* Servicios en tarjetas (inicio) */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin:3rem 0 0;padding:0;list-style:none}
.svc-card{background:var(--page);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);padding:1.6rem 1.4rem 1.4rem;display:flex;flex-direction:column}
.svc-card .hole{width:118px;height:118px;flex:none;margin:6px 0 1.5rem 6px}
.svc-card h3,.cond h3,.spec b,.zonas b{font-family:var(--f-h3);font-weight:var(--h3-weight);font-stretch:var(--h3-stretch);text-transform:var(--h3-case)}
.svc-card h3{margin:0 0 .5rem;font-size:1.45rem;line-height:1.1}
.svc-card p{font-size:1.02rem;margin:0 0 1.3rem;color:var(--ink-soft)}
.svc-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:.6rem}
.btn-sm{min-height:46px;padding:.55rem .95rem;font-size:.98rem}
.btn-sm svg{width:18px;height:18px}
@media (max-width:980px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.svc-grid{grid-template-columns:1fr}}

/* Obras con contexto */
.obra-meta{margin:.9rem 0 0;padding:.8rem 0 0;list-style:none;display:grid;gap:.3rem;font-size:.95rem;color:rgba(255,255,255,.8);border-top:1px solid rgba(255,255,255,.14)}
.obra-meta b{color:#fff;font-weight:700}
.obras-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.obras-grid.cols-3 .obra{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.obras-grid.cols-3 .obra-img{min-height:200px}
.obras-more{margin-top:2rem}
.btn-line-light{border-color:rgba(255,255,255,.85);color:#fff;background:transparent}
.btn-line-light:hover{background:#fff;color:#111}
@media (max-width:900px){.obras-grid.cols-3{grid-template-columns:1fr}}

/* Cobertura y condiciones */
.cobertura{background:var(--page)}
.cob-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:2.6rem}
.zonas{margin:0;padding:0;list-style:none;display:grid;gap:.8rem}
.zonas li{display:flex;gap:.9rem;align-items:flex-start;background:var(--alt);border:1px solid var(--line);border-radius:calc(var(--radius) + 2px);padding:1rem 1.1rem}
.zonas li::before{content:"";flex:none;width:14px;height:14px;margin-top:.4rem;border-radius:50%;background:var(--ui);box-shadow:0 0 0 4px var(--ui-soft)}
.zonas b{display:block;font-size:1.2rem;line-height:1.2}
.zonas span{font-size:.98rem;color:var(--ink-soft)}
.conds{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cond{background:var(--alt);border:1px solid var(--line);border-top:4px solid var(--ui);border-radius:calc(var(--radius) + 2px);padding:1.1rem 1.2rem}
.cond h3{margin:0 0 .35rem;font-size:1.25rem;line-height:1.15}
.cond p{margin:0;font-size:1rem;color:var(--ink-soft)}
@media (max-width:900px){.cob-grid{grid-template-columns:1fr}}
@media (max-width:520px){.conds{grid-template-columns:1fr}}

/* Orden de fondos del inicio */
.proceso{background:var(--alt)}
.preguntas{background:var(--page)}

/* Preguntas frecuentes */
.faq{margin-top:2.2rem;max-width:880px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.15rem .2rem;font-weight:700;font-size:1.12rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--alt);color:var(--ui);font-size:1.45rem;font-weight:700;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 1.2rem;padding:0 .2rem;max-width:70ch;color:var(--ink-soft)}

/* Empresa (resumen en el inicio) */
.empresa-res{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.photo-card{margin:0;position:relative;border-radius:calc(var(--radius) + 4px);overflow:hidden;background:var(--line-soft)}
.photo-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.photo-card figcaption{position:absolute;left:10px;bottom:10px;font-size:.75rem;color:#fff;background:rgba(0,0,0,.55);padding:.1rem .45rem;border-radius:3px}
.link-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.6rem;font-weight:700;color:var(--primary-700);text-underline-offset:4px;text-decoration-thickness:2px}
@media (max-width:900px){.empresa-res{grid-template-columns:1fr}}

/* Encabezado de páginas internas */
.page-hero{background:var(--dark);color:#fff;padding-block:clamp(2rem,4vw,3.2rem) clamp(3rem,6vw,5rem)}
.crumb{margin:0 0 1.8rem;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;font-size:.95rem;color:rgba(255,255,255,.72)}
.crumb li+li::before{content:"›";margin-right:.45rem;opacity:.7}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb [aria-current]{color:#fff;font-weight:700}
.ph-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.page-hero .eyebrow{color:var(--dark-label)}
.page-hero .lead{color:rgba(255,255,255,.86);margin:1.2rem 0 1.8rem}
.page-hero .btn-ghost{border-color:#fff;color:#fff}
.page-hero .btn-ghost:hover{background:#fff;color:#111}
@media (max-width:900px){.ph-grid{grid-template-columns:1fr}}

/* Especificaciones */
.especs{background:var(--alt)}
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.2rem}
.spec{background:var(--page);border:1px solid var(--line);border-radius:calc(var(--radius) + 2px);padding:1.2rem 1.25rem}
.spec b{display:block;font-size:1.5rem;line-height:1.1;margin-bottom:.4rem;color:var(--ink)}
.spec span{font-size:.98rem;color:var(--ink-soft)}
@media (max-width:900px){.spec-grid{grid-template-columns:1fr 1fr}}

/* Usos + checklist */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.lista{margin:1.4rem 0 0;padding:0;list-style:none;display:grid;gap:.8rem}
.lista li{display:flex;gap:.8rem;font-size:1.08rem}
.lista li::before{content:"";flex:none;width:10px;height:10px;margin-top:.6rem;background:var(--ui)}
.checklist{background:var(--alt);border:1px solid var(--line);border-left:6px solid var(--ui);border-radius:calc(var(--radius) + 2px);padding:1.6rem}
.checklist ul{margin:1.2rem 0 1.5rem;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.65rem 1.2rem}
.checklist li{display:flex;gap:.6rem;align-items:flex-start;font-weight:600;font-size:1.02rem}
.checklist li::before{content:"";flex:none;width:18px;height:18px;margin-top:.2rem;border:2px solid var(--ui);border-radius:3px;background:#fff}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
@media (max-width:520px){.checklist ul{grid-template-columns:1fr}}

/* Otros servicios */
.otros{background:var(--alt)}
.related{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.related a{display:inline-flex;align-items:center;min-height:48px;padding:.5rem 1.1rem;border:2px solid var(--ink);border-radius:var(--chip-radius);font-weight:700;text-decoration:none;background:var(--page)}
.related a:hover{background:var(--ink);color:#fff}

/* Seguridad (empresa) */
.seg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.2rem}
@media (max-width:900px){.seg-grid{grid-template-columns:1fr}}
.maquinas.full{grid-template-columns:1fr 1fr 1.4fr;align-items:stretch;margin-top:2.2rem}
.maquinas.full .video{grid-column:auto;margin:0}
@media (max-width:900px){.maquinas.full{grid-template-columns:1fr 1fr}.maquinas.full .video{grid-column:1/-1}}

/* Leyenda de relleno en el pie */
.leyenda{display:inline-flex;align-items:center;gap:.4rem}

/* Inicio: el header se funde con el hormigón mientras se perfora; al bajar vuelve a blanco */
.has-js .site-header.is-dark{background:transparent;border-bottom-color:transparent;box-shadow:none}
.has-js .site-header.is-dark .logo{color:#fff}
.has-js .site-header.is-dark .menu-btn{color:#fff;border-color:#fff}
.site-header .logo,.site-header .menu-btn,.nav > a,.nav-drop > button,.header-phone{transition:color .3s ease,border-color .3s ease}
@media (min-width:901px){
  .has-js .site-header.is-dark .nav > a,.has-js .site-header.is-dark .nav-drop > button,.has-js .site-header.is-dark .header-phone,.has-js .site-header.is-dark .header-phone svg{color:#fff}
}
.has-js .site-header.is-dark.is-menu-open{background:#fff;border-bottom-color:var(--line)}
.has-js .site-header.is-dark.is-menu-open .logo{color:var(--azul)}
.has-js .site-header.is-dark.is-menu-open .menu-btn{color:#13171B;border-color:#13171B}

/* Barra fija del celular: aparece cuando el botón principal ya no está a la vista */
@media (max-width:900px){
  .actionbar{transition:transform .35s ease,visibility 0s}
  .has-js .actionbar.is-hidden{transform:translateY(110%);visibility:hidden;transition:transform .35s ease,visibility 0s .35s}
}

/* =========================================================
   Ronda 5: más azul, obras 2x2, WhatsApp siempre a mano
   ========================================================= */
/* Cifras con título */
.datos-title{margin:0 0 2.2rem;max-width:34ch;font-family:var(--f-h3);font-weight:var(--h3-weight);text-transform:var(--h3-case);font-size:clamp(1.35rem,1.1vw + 1rem,1.9rem);line-height:1.15;color:var(--datos-ink)}

/* Obras en mosaico 2x2 */
.obras-grid.cols-2{grid-template-columns:1fr 1fr}
.obras-grid.cols-2 .obra{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.obras-grid.cols-2 .obra-img{min-height:260px}
@media (max-width:900px){
  .obras-grid.cols-2{grid-template-columns:1fr}
  .obras-grid.cols-2 .obra-img{min-height:210px}
}

/* Celular: solo 3 logos de constructoras */
@media (max-width:900px){.logos-grid li:nth-child(n+4){display:none}}

/* "También hacemos" dentro de las preguntas del servicio */
.otros-inline{margin-top:2.8rem}
.otros-inline h3{margin:0;font-size:1.15rem}

/* Botón flotante de WhatsApp (escritorio; en el celular está la barra fija) */
.wa-fab{display:none}
@media (min-width:901px){
  .wa-fab{
    position:fixed;right:24px;bottom:24px;z-index:65;display:grid;place-items:center;
    width:60px;height:60px;border-radius:50%;background:#1DA851;color:#fff;
    box-shadow:0 10px 26px rgba(0,0,0,.25);
    transition:transform .2s ease,opacity .25s ease,visibility 0s;
  }
  .wa-fab svg{width:30px;height:30px}
  .wa-fab:hover{transform:translateY(-2px)}
  .wa-tip{
    position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;
    background:#1B1E21;color:#fff;font-size:.95rem;font-weight:700;padding:.45rem .75rem;border-radius:6px;
    opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  .wa-fab:hover .wa-tip,.wa-fab:focus-visible .wa-tip{opacity:1}
  .wa-fab.is-hidden{opacity:0;visibility:hidden;transform:translateY(12px);transition:transform .2s ease,opacity .25s ease,visibility 0s .25s}
}

/* Celular: 3 servicios a la vista y el resto con "Ver más servicios" (sin JS se ven todos) */
.svc-more{display:none}
@media (max-width:620px){
  .has-js .svc-grid:not(.is-expanded) .svc-card:nth-child(n+4){display:none}
  .has-js .svc-more{display:block;margin-top:1.3rem}
  .has-js .svc-more .btn{width:100%}
  .has-js .svc-grid.is-expanded + .svc-more{display:none}
}