/* ==========================================================================
   Tipografías propias — descargadas, sin depender de Google
     Archivo         títulos y cifras (grotesca robusta, aguanta tamaños grandes)
     Inter           texto corrido
     JetBrains Mono  TAGs, códigos y datos técnicos
   ========================================================================== */
@font-face{
  font-family:'Jost';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/jost.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/inter.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/jetbrains.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   COBLIT MINERALS · v6
   Cinco pantallas. Todo sobre negro, sin alternar fondos.
   Cada sección entra completa en el alto de la ventana: lo que no cabe
   hacia abajo se mueve de lado (carrusel) o cambia en el sitio (pestañas).
   ========================================================================== */

:root{
  --negro:#0d0d0f;
  --negro-2:#141417;
  --negro-3:#191a1e;

  --tinta:#ffffff;
  --tinta-2:#b4b6bb;
  --tinta-3:#7c7f86;

  --naranja:#E1681C;
  --verde:#70A939;
  --azul:#3265B1;

  --linea:rgba(255,255,255,.13);
  --borde:var(--linea);
  --texto-sim:#8b8f97;

  --max:1560px;
  --margen:clamp(22px, 5.4vw, 104px);
  --nav-h:72px;
  --v:clamp(18px, 2.9vh, 42px);      /* aire entre bloques de una pantalla */

  --titulo:'Jost', 'Futura', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;
  --texto:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;        /* el deslizamiento suave lo hace el JS */
  scroll-snap-type:y proximity;            /* cada pantalla se acomoda sola */
}
/* El encaje va en 'proximity' a propósito: con 'mandatory' el navegador
   vuelve a encajar cada vez que el carrusel mueve su scroll interno y se
   traba. Con proximity se acomoda igual y nada se pelea. */
html{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}

body{
  margin:0;background:var(--negro);color:var(--tinta);
  font-family:var(--texto);font-size:16.5px;line-height:1.58;letter-spacing:-.006em;
  font-feature-settings:'cv05' 1,'cv11' 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--naranja);color:#fff}

/* ==========================================================================
   La pantalla: una sección = una vista completa
   ========================================================================== */
.cont{max-width:var(--max);margin-inline:auto;padding-inline:var(--margen);width:100%}
.pantalla{
  min-height:100svh;display:flex;align-items:center;position:relative;
  scroll-snap-align:start;
  padding-block:calc(var(--nav-h) + clamp(18px,2.4vh,34px)) clamp(22px,3vh,44px);
}
.pantalla > .cont{display:flex;flex-direction:column;gap:var(--v)}
.raya{height:1px;background:var(--borde)}

/* ==========================================================================
   Tipografía — se encoge también con el alto, para que nunca desborde
   ========================================================================== */
h1,h2,h3,h4{margin:0;font-family:var(--titulo);font-weight:500;letter-spacing:-.012em;line-height:1.08;text-wrap:balance}
.t1{font-size:clamp(2.35rem, min(5.4vw, 7.6vh), 5rem);font-weight:600;line-height:1;letter-spacing:-.022em;word-spacing:-.07em}
.t2{font-size:clamp(1.85rem, min(3.4vw, 5.3vh), 3.1rem);font-weight:600;letter-spacing:-.018em;line-height:1.05;word-spacing:-.05em}
.t3{font-size:clamp(1.25rem, min(1.9vw, 2.8vh), 1.72rem);letter-spacing:-.014em;line-height:1.12}
h3{font-size:clamp(1.04rem, min(1.24vw,1.95vh), 1.24rem);font-weight:500;letter-spacing:-.008em}

p{margin:0 0 .95rem;color:var(--tinta-2)}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.02rem, min(1.3vw,1.9vh), 1.28rem);line-height:1.5;color:var(--tinta);letter-spacing:-.016em;text-wrap:pretty}
.tenue{color:var(--tinta-3)}
.txt{max-width:58ch}
.txt--estrecha{max-width:44ch}

.eyebrow{
  position:relative;display:block;font-family:var(--mono);
  font-size:.69rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);margin:0 0 clamp(14px,1.8vh,26px);padding-left:22px;
}
.eyebrow i{font-style:normal;color:var(--naranja);margin-right:11px}
.eyebrow::before{
  content:"";position:absolute;left:0;top:.15em;width:11px;height:11px;
  border-left:2.5px solid var(--naranja);border-top:2.5px solid var(--naranja);
}
/* rótulo chico sobre una tabla o un bloque */
.rotulo{
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-3);margin:0 0 14px;
}

/* la marca de esquina va SOLO en el rótulo chico de arriba, no en el título */

/* ==========================================================================
   Navegación
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;height:var(--nav-h);
  background:rgba(13,13,15,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.nav .cont{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo img{height:28px;width:auto}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px)}
.nav-links a{font-size:.88rem;color:var(--tinta-2);position:relative;padding:6px 0;transition:color .25s}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--naranja);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.nav-links a:hover{color:var(--tinta)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a.activo{color:var(--tinta)}
.nav-links a.activo::after{transform:scaleX(1)}
.nav-cta{border:1px solid var(--linea);padding:10px 20px !important;transition:background .3s,color .3s,border-color .3s}
.nav-cta::after{display:none !important}
.nav-cta:hover{background:var(--naranja);border-color:var(--naranja);color:#fff !important}
.nav-prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--naranja);pointer-events:none}

.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:1.6px;background:var(--tinta);margin:6px 0;transition:transform .35s var(--ease),opacity .25s}
.burger.abierto span:nth-child(1){transform:translateY(7.6px) rotate(45deg)}
.burger.abierto span:nth-child(2){opacity:0}
.burger.abierto span:nth-child(3){transform:translateY(-7.6px) rotate(-45deg)}

.menu-movil{
  position:fixed;inset:var(--nav-h) 0 0;z-index:59;background:var(--negro);
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:0 var(--margen);clip-path:inset(0 0 100% 0);pointer-events:none;
}
.menu-movil.abierto{pointer-events:auto}
.menu-movil a{
  font-family:var(--titulo);font-size:clamp(1.85rem,7.2vw,2.8rem);font-weight:600;
  letter-spacing:-.018em;padding:15px 0;border-bottom:1px solid var(--linea);
}

/* índice de pantallas, a la derecha */
.puntos{
  position:fixed;left:clamp(8px,1.1vw,24px);top:50%;transform:translateY(-50%);
  z-index:55;display:flex;flex-direction:column;gap:12px;
}
.puntos a{width:24px;height:24px;display:grid;place-items:center;position:relative}
.puntos a i{
  width:6px;height:6px;border-radius:50%;background:var(--tinta-3);opacity:.45;
  transition:transform .35s var(--ease),background .3s,opacity .3s;
}
.puntos a:hover i{opacity:1}
.puntos a.on i{background:var(--naranja);opacity:1;transform:scale(1.45)}
.punto-f{
  width:24px;height:24px;display:grid;place-items:center;background:none;border:0;
  padding:0;cursor:pointer;color:var(--tinta-3);opacity:.45;transition:opacity .25s,color .25s;
}
.punto-f:hover:not(:disabled){opacity:1;color:var(--naranja)}
.punto-f:disabled{opacity:.12;cursor:default}
.puntos a span{
  position:absolute;left:calc(100% + 10px);white-space:nowrap;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-2);opacity:0;transform:translateX(-5px);pointer-events:none;
  transition:opacity .3s,transform .3s var(--ease);
}
.puntos a:hover span{opacity:1;transform:none}

/* ==========================================================================
   Pantalla 1 · portada
   ========================================================================== */
.hero-vis{
  position:absolute;top:var(--nav-h);right:0;bottom:clamp(150px,21vh,215px);width:54%;z-index:0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 26%);
  mask-image:linear-gradient(90deg, transparent, #000 26%);
}
/* foto de faena detrás del dibujo (opcional: solo si existe img/foto-faena.jpg) */
.hero-foto{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.17;filter:grayscale(.3) contrast(1.1) brightness(.8);
}
#lienzo3d{position:absolute;inset:0}
#lienzo3d canvas{width:100%;height:100%;display:block}
.pantalla.portada > .cont{position:relative;z-index:2;align-self:stretch;justify-content:space-between}
.hero-txt{max-width:min(700px, 56%)}
.titulares{display:grid}
.bajadas{display:grid}
.bajada{grid-area:1/1;visibility:hidden}
.bajada.on{visibility:visible}
.frase{grid-area:1/1;display:block;visibility:hidden}
.frase.on{visibility:visible}
.hero-txt .ln{display:block}          /* sin recorte: la 'p' y la 'j' bajan */
.hero-txt .ln > span{display:block}
.hero-txt em{font-style:normal;color:var(--naranja)}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.6vh,36px)}

/* franja de servicios al pie de la portada */
.servicios{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  gap:clamp(18px,2.4vw,46px);align-items:end;
  padding-top:clamp(16px,2.2vh,28px);border-top:1px solid var(--borde);
}
.servicio b{display:block;font-weight:500;font-size:.94rem}
.servicio span{display:block;font-size:.82rem;color:var(--tinta-3);margin-top:3px}
.servicio .regla{height:3px;width:44px;margin-bottom:12px}
.medidor{width:min(210px,32vw);text-align:right}
.medidor .k{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);display:flex;justify-content:space-between;gap:12px;
  font-variant-numeric:tabular-nums;
}
.medidor .barra{height:2px;background:var(--linea);margin-top:8px;position:relative}
.medidor .barra i{position:absolute;inset:0 auto 0 0;background:var(--naranja);width:100%}

/* ==========================================================================
   Rejillas
   ========================================================================== */
.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,86px);align-items:start}
.dos--txt{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,58px)}
.cuatro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,50px)}

.cifra .n{
  display:block;font-family:var(--titulo);
  font-size:clamp(2.2rem, min(3.9vw,5.6vh), 3.7rem);font-weight:600;
  line-height:.96;letter-spacing:-.03em;color:var(--naranja);
  font-variant-numeric:tabular-nums;
}
.cifra .n small{font-size:.38em;font-weight:500;letter-spacing:-.015em;opacity:.72}
.cifra .t{display:block;margin-top:10px;font-size:.9rem;color:var(--tinta-2);max-width:26ch}
.cifra .f{display:block;margin-top:7px;font-size:.7rem;color:var(--tinta-3)}

.paso-n{display:block;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;color:var(--naranja);margin-bottom:12px}
.bloque h3{margin-bottom:9px}
.bloque p{font-size:.93rem}

/* pantalla 2: texto a la izquierda, visor de imágenes a la derecha */
.dos--empresa{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center}
.ficha{margin-top:clamp(22px,3.2vh,44px);max-width:38rem}
.ficha table.tec{font-size:.88rem}
.ficha table.tec th{width:30%}

.visor{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(16px,2vw,32px);align-items:center;
}
.visor-caja{
  position:relative;aspect-ratio:3/4;max-height:58vh;overflow:hidden;
  background:var(--negro-2);border:1px solid var(--borde);
}
.lam{
  position:absolute;inset:0;opacity:0;background-size:cover;background-position:center 38%;
  transition:opacity .9s var(--ease);
  filter:saturate(.5) contrast(1.1) brightness(.86);
}
/* velo de la casa: naranja arriba, negro abajo. Aleja la foto del stock */
.visor-caja::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(155deg, rgba(225,104,28,.16) 0%, rgba(13,13,15,0) 45%,
             rgba(13,13,15,.6) 100%);
}
/* las mismas marcas de esquina que llevan los títulos */
.visor-marcas{
  position:absolute;inset:10px;z-index:3;pointer-events:none;opacity:.9;
  background:
    linear-gradient(var(--naranja),var(--naranja)) left top/16px 2px no-repeat,
    linear-gradient(var(--naranja),var(--naranja)) left top/2px 16px no-repeat,
    linear-gradient(var(--naranja),var(--naranja)) right bottom/16px 2px no-repeat,
    linear-gradient(var(--naranja),var(--naranja)) right bottom/2px 16px no-repeat;
}
.lam.on{opacity:1}
/* mientras no haya foto, una trama de plano en corte */
.lam--vacia{
  background-image:repeating-linear-gradient(45deg,
    rgba(255,255,255,.055) 0 2px, transparent 2px 11px);
}
.lam--vacia.on::after{
  content:"FOTO DE FAENA";position:absolute;inset:auto 0 18px 0;text-align:center;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--tinta-3);opacity:.5;
}
.visor-pie{display:flex;flex-direction:column;gap:clamp(12px,1.8vh,20px);min-width:0}
.lam-txt{display:none}
.lam-txt.on{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 16px;
  animation:sube .5s var(--ease) both}
.lam-num{
  font-family:var(--titulo);font-weight:600;font-size:clamp(1.6rem,2.4vw,2.2rem);
  line-height:1;color:var(--naranja);letter-spacing:-.03em;
  grid-row:1/3;padding-top:.1em;
}
.lam-txt .rotulo{margin:0 0 6px}
.lam-txt h3{margin-bottom:7px}
.lam-txt p{font-size:.9rem;color:var(--tinta-3);max-width:46ch;margin:0}
.lam-txt .cuerpo{grid-column:2}
.visor-puntos{display:flex;gap:8px}
.visor-puntos button{
  width:34px;height:3px;background:var(--borde);border:0;padding:0;cursor:pointer;
  transition:background .3s;
}
.visor-puntos button.on{background:var(--naranja)}
.visor-puntos button:hover{background:var(--tinta-3)}

/* cómo trabajamos: lista numerada con líneas */
.etapas{display:grid;gap:0}
.etapas > div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,1.8vw,30px);padding:clamp(10px,1.35vh,17px) 0;border-top:1px solid var(--borde)}
.etapas > div:last-child{border-bottom:1px solid var(--borde)}
.etapas b{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;color:var(--naranja);padding-top:.35em}
.etapas h3{margin-bottom:3px}
.etapas p{font-size:.87rem;line-height:1.5;color:var(--tinta-3)}

/* ==========================================================================
   Botones
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:11px;font-size:.88rem;font-weight:500;
  background:var(--naranja);color:#fff;padding:13px 26px;border:1px solid var(--naranja);
  transition:background .3s,color .3s,gap .3s var(--ease);
}
.btn:hover{gap:17px;background:transparent;color:var(--naranja)}
.btn--linea{background:transparent;color:var(--tinta);border-color:var(--linea)}
.btn--linea:hover{background:var(--tinta);color:var(--negro);border-color:var(--tinta)}

/* ==========================================================================
   Carrusel horizontal
   ========================================================================== */
.riel-cab{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:clamp(14px,1.8vh,24px)}
.riel-chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  font-family:var(--mono);font-size:.71rem;letter-spacing:.02em;background:none;
  border:1px solid var(--borde);border-radius:100px;padding:8px 15px;cursor:pointer;
  color:inherit;opacity:.6;display:inline-flex;align-items:center;gap:8px;
  transition:opacity .25s,border-color .25s,color .25s;
}
.chip b{font-weight:500;opacity:.5;font-size:.9em}
.chip:hover{opacity:1}
.chip.on{opacity:1;border-color:var(--naranja);color:var(--naranja)}
.riel-flechas{display:flex;align-items:center;gap:7px;flex:none}
.riel-n{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;opacity:.4;margin-right:8px;font-variant-numeric:tabular-nums}
.riel-n b{font-weight:500;opacity:1;color:var(--naranja)}
.riel-b{
  width:42px;height:42px;flex:none;background:none;cursor:pointer;color:inherit;
  border:1px solid var(--borde);display:grid;place-items:center;
  transition:background .25s,border-color .25s,color .25s,opacity .25s;
}
.riel-b:hover:not(:disabled){background:var(--naranja);border-color:var(--naranja);color:#fff}
.riel-b:disabled{opacity:.22;cursor:default}
.riel-pista{
  display:flex;align-items:stretch;gap:clamp(12px,1.3vw,22px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
}
/* el imán solo en pantallas táctiles: en escritorio hacía saltar la ficha
   en cuanto el carrusel se detenía */
@media (hover:none){.riel-pista{scroll-snap-type:x proximity}}
.riel-pista::-webkit-scrollbar{display:none}
.riel-pista.agarrando{cursor:grabbing;scroll-snap-type:none;user-select:none}
.riel-pista.agarrando *{pointer-events:none}
.riel-barra{height:2px;background:var(--borde);position:relative;overflow:hidden;margin-top:clamp(14px,1.8vh,24px)}
.riel-barra i{position:absolute;top:0;bottom:0;left:0;width:20%;background:var(--naranja);transition:transform .1s linear,width .2s}

/* ficha ancha: el dato al lado del texto, no debajo */
.tarj{
  flex:0 0 clamp(320px, 44vw, 610px);scroll-snap-align:start;
  border:1px solid var(--borde);padding:clamp(18px,1.8vw,26px);
  background:var(--negro-2);transition:border-color .35s,background .35s;
}
.tarj:hover{border-color:rgba(225,104,28,.5);background:var(--negro-3)}
.tarj-int{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,1.8vw,30px)}
.tarj-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.item-sim{width:60px;height:44px;color:var(--texto-sim);transition:color .35s}
.tarj:hover .item-sim{color:var(--naranja)}
.tarj-cod{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;opacity:.45}
.tarj h3 em{font-style:normal;font-family:var(--mono);font-weight:400;opacity:.45;font-size:.68em;display:block;margin-top:4px}
.tarj-serv{display:flex;align-items:center;gap:8px;margin-top:11px;font-family:var(--mono);font-size:.69rem;opacity:.6;letter-spacing:.02em}
.tarj-serv i{width:7px;height:7px;border-radius:50%;flex:none}
.tarj-txt{margin:13px 0 0;font-size:.9rem;line-height:1.5}
.tarj-nota{margin:9px 0 0;font-size:.83rem;color:var(--tinta-3)}

/* ficha de foto, al inicio de cada familia del catálogo */
.tarj--foto{
  flex-basis:clamp(210px,19vw,290px);padding:0;overflow:hidden;position:relative;margin:0;
}
.tarj--foto img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.2) contrast(1.05) brightness(.82);transition:filter .5s,transform .8s var(--ease)}
.tarj--foto:hover img{filter:none;transform:scale(1.03)}
.tarj--foto figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  background:linear-gradient(transparent,rgba(13,13,15,.94));
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-2);
}

/* ficha chica: solo número, título y texto */
.riel--min .tarj{flex-basis:clamp(250px,23vw,330px)}
.tarj--min p{margin-top:10px;font-size:.9rem}

/* ==========================================================================
   Tablas de datos
   ========================================================================== */
table.tec{width:100%;border-collapse:collapse;font-size:.9rem}
table.tec th,table.tec td{text-align:left;padding:9px 0;border-bottom:1px solid var(--borde);vertical-align:top}
table.tec th{font-weight:500;opacity:.55;width:38%;padding-right:18px}
table.tec td{font-family:var(--mono);font-size:.86em;line-height:1.45}
table.tec tr:last-child th,table.tec tr:last-child td{border-bottom:0}
table.tec.mini{font-size:.8rem}
table.tec.mini th,table.tec.mini td{padding:7px 0}
table.tec.mini th{width:42%;padding-right:12px}

/* ==========================================================================
   P&ID · sobre negro, una etapa a la vez
   ========================================================================== */
.pid .eq{fill:none;stroke:#8e929a;stroke-width:2.1}
.pid .eq-f{fill:#141417;stroke:#8e929a;stroke-width:2.1}
.pid .inst{fill:#141417;stroke:#8e929a;stroke-width:1.9}
.pid .ln-p{fill:none;stroke:#70A939;stroke-width:3}
.pid .ln-a{fill:none;stroke:#3265B1;stroke-width:3}
.pid .ln-c{fill:none;stroke:#E1681C;stroke-width:3}
.pid .ln-d{stroke-dasharray:7 6}
.pid .flu{stroke-dasharray:10 14;animation:fluye 1.7s linear infinite}
@keyframes fluye{to{stroke-dashoffset:-48}}
.pid text{font-family:var(--texto);font-size:17px;fill:#8b8f97;letter-spacing:-.01em}
.pid text.tag{font-family:var(--mono);font-size:16px;fill:#ffffff;font-weight:600;letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){.pid .flu{animation:none}}

.pest{display:flex;gap:clamp(6px,.8vw,14px);border-bottom:1px solid var(--borde);overflow-x:auto;scrollbar-width:none}
.pest::-webkit-scrollbar{display:none}
.pest-b{
  background:none;border:0;cursor:pointer;color:inherit;white-space:nowrap;
  font-family:var(--titulo);font-size:clamp(.94rem,1.14vw,1.12rem);font-weight:500;
  letter-spacing:-.004em;padding:0 4px 14px;position:relative;opacity:.4;transition:opacity .3s;
}
.pest-b i{font-style:normal;font-family:var(--mono);font-weight:500;font-size:.68em;letter-spacing:.06em;color:var(--naranja);margin-right:9px}
.pest-b::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--naranja);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.pest-b:hover{opacity:.75}
.pest-b.on{opacity:1}
.pest-b.on::after{transform:scaleX(1)}

.pid-rej{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(26px,3.4vw,64px);align-items:start}
.pid-caja{
  position:relative;aspect-ratio:43/23;width:100%;max-height:46vh;
  background:var(--negro-2);border:1px solid var(--borde);
}
.pid-caja .capa{position:absolute;inset:0;padding:clamp(6px,1vw,14px);opacity:0;visibility:hidden;transition:opacity .4s var(--ease)}
.pid-caja .capa.on{opacity:1;visibility:visible}
.pid-caja svg{width:100%;height:100%}
.pid-leyenda{display:flex;flex-wrap:wrap;gap:9px 22px;margin-top:14px;font-size:.76rem;color:var(--tinta-3)}
.pid-leyenda span{display:flex;align-items:center;gap:8px}
.pid-leyenda i{width:16px;height:2.4px;display:block;flex:none}

.pid-ampliar{
  display:none;margin-top:12px;background:none;border:1px solid var(--borde);
  color:var(--tinta-2);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;padding:11px 16px;width:100%;cursor:pointer;
}
.pid-ampliar:hover{border-color:var(--naranja);color:var(--naranja)}

/* el diagrama a pantalla completa, para leerlo en el teléfono */
.lupa{
  position:fixed;inset:0;z-index:80;background:var(--negro);display:none;
  flex-direction:column;
}
.lupa.abierta{display:flex}
.lupa-barra{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px var(--margen);border-bottom:1px solid var(--borde);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);
}
.lupa-cerrar{background:none;border:1px solid var(--borde);color:inherit;
  padding:8px 14px;cursor:pointer;font:inherit;letter-spacing:.1em}
.lupa-caja{flex:1;overflow:auto;display:flex;align-items:center}
.lupa-caja svg{width:1100px;height:auto;flex:none;padding:16px}

.panel{display:none}
.panel.on{display:block;animation:sube .5s var(--ease) both}
@keyframes sube{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.panel ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.panel li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:12px;font-size:.9rem;color:var(--tinta-2);align-items:baseline}
.panel li b{color:var(--naranja);font-family:var(--mono);font-weight:600;font-size:.78rem}
.etiquetas{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.etiquetas span{font-size:.75rem;opacity:.6;border:1px solid var(--borde);padding:5px 13px;border-radius:100px}

/* pestañas chicas, dentro de una columna */
.contacto-rej{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto 1fr;align-items:start;
  row-gap:clamp(18px,2.4vh,32px);
}
.col-txt{grid-column:1;grid-row:1}
.col-ref{grid-column:1;grid-row:2;min-width:0}
.col-form{grid-column:2;grid-row:1/3}
.rotulo--form{display:none}
.ref-abrir{display:none}

.mini-pest{display:flex;gap:18px;border-bottom:1px solid var(--borde);margin-bottom:clamp(12px,1.6vh,20px)}
.mini-b{
  background:none;border:0;cursor:pointer;color:inherit;padding:0 0 11px;position:relative;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.45;
  transition:opacity .3s;
}
.mini-b::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--naranja);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.mini-b.on{opacity:1}
.mini-b.on::after{transform:scaleX(1)}
.mini-panel{display:none}
.mini-panel.on{display:block;animation:sube .4s var(--ease) both}

/* ==========================================================================
   Formulario
   ========================================================================== */
.form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vh,26px) clamp(18px,2vw,30px)}
.campo{display:flex;flex-direction:column;gap:7px}
.campo--ancho{grid-column:1/-1}
.campo label{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
.campo input,.campo textarea,.campo select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--linea);
  padding:9px 0;color:var(--tinta);font-family:var(--texto);font-size:.98rem;transition:border-color .3s;
}
.campo textarea{resize:vertical;min-height:clamp(70px,9vh,110px)}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:0;border-color:var(--naranja)}
.campo select{cursor:pointer}
.campo select option{background:var(--negro-2);color:var(--tinta)}
.campo input::placeholder,.campo textarea::placeholder{color:#54575e}
.aviso{border-left:2px solid var(--naranja);padding:12px 18px;background:var(--negro-2);font-size:.9rem;color:var(--tinta-2)}

/* ==========================================================================
   Pie, al fondo de la última pantalla
   ========================================================================== */
.pie{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;
  margin-top:clamp(18px,2.4vh,32px);padding-top:clamp(14px,2vh,24px);
  border-top:1px solid var(--borde);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;color:var(--tinta-3);
}
.pie-marca{display:flex;align-items:center;gap:14px}
.pie-marca img{height:22px;width:auto}
.pie-gotas{display:flex;gap:6px}
.pie-gotas i{width:8px;height:8px;border-radius:50%;display:block}
.pie a{transition:color .25s}
.pie a:hover{color:var(--naranja)}
/* El crédito de autoría. Subrayado tenue continuo; al pasar el ratón una línea naranja
   lo cubre de izquierda a derecha y la flecha de enlace externo se despega.
   🪤 Se probó con línea de TRAZOS (cota de plano) y se descartó: a 0,7 rem se lee como el
   subrayado del corrector ortográfico, y destacaba más que el correo de contacto de Coblit. El efecto va solo sobre el nombre, no sobre el
   "Sitio creado por". */
.pie-credito{white-space:nowrap}
.pie-autor{text-decoration:none;transition:color .3s}
.pie-autor i{
  font-style:normal;display:inline-block;padding-bottom:4px;
  background-repeat:no-repeat;background-position:0 100%,0 100%;
  background-image:linear-gradient(var(--naranja),var(--naranja)),
    linear-gradient(rgba(225,104,28,.3),rgba(225,104,28,.3));
  background-size:0 1px,100% 1px;
  transition:background-size .55s cubic-bezier(.2,.7,.3,1);
}
.pie-autor b{
  font-weight:400;display:inline-block;margin-left:.45em;opacity:.5;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),opacity .3s;
}
.pie-autor:hover{color:var(--naranja)}
.pie-autor:hover i{background-size:100% 1px,100% 1px}
.pie-autor:hover b{transform:translate(3px,-3px);opacity:1}

/* ==========================================================================
   Detalles
   ========================================================================== */
:focus-visible{outline:2px solid var(--naranja);outline-offset:3px;border-radius:1px}
[data-anim]{opacity:0}
.no-js [data-anim]{opacity:1}

/* ventanas bajas (portátiles de 720-800 px): se aprieta para seguir cabiendo */
@media (min-width:901px) and (max-height:830px){
  :root{--v:clamp(12px,2.1vh,26px)}
  .eyebrow{margin-bottom:12px;font-size:.66rem}
  .lead{font-size:1rem;line-height:1.45}
  p{margin-bottom:.75rem}
  .etapas > div{padding:9px 0}
  .etapas p{font-size:.83rem;line-height:1.45}
  .cifra .t{font-size:.84rem;margin-top:7px}
  .cifra .f{margin-top:5px;font-size:.67rem}
  .tarj{padding:18px}
  .tarj-txt{font-size:.86rem;margin-top:11px}
  .tarj-nota{font-size:.8rem}
  table.tec.mini th,table.tec.mini td{padding:5.5px 0}
  .panel li{font-size:.86rem}
  .panel ul{gap:7px}
  .form{gap:13px 22px}
  .campo textarea{min-height:64px}
  .pie{font-size:.66rem;margin-top:14px;padding-top:12px}
  .ficha{margin-top:18px}
  .ficha table.tec{font-size:.83rem}
  .ficha table.tec th,.ficha table.tec td{padding:6px 0}
  .visor-caja{max-height:52vh}
  .contacto-rej{row-gap:10px}
  .mini-pest{margin-bottom:9px;padding-bottom:0}
  .mini-b{padding-bottom:9px}
  .col-txt .lead{margin-top:12px !important}
  .etapas > div{padding:6px 0}
  .lam-txt p{font-size:.86rem}
  .servicio span{font-size:.78rem}
}

@media (min-width:901px) and (max-height:748px){
  .campo textarea{min-height:52px}
  .pie{margin-top:12px;padding-top:10px;gap:8px 20px}
  .rotulo{margin-bottom:10px}
  .form{gap:11px 20px}
  .etapas > div{padding:5px 0}
  .etapas p{font-size:.8rem;line-height:1.4}
  .etapas h3{font-size:1rem}
  .mini-pest{margin-bottom:10px}
  .aviso{padding:10px 14px}
}

/* ==========================================================================
   Pantallas chicas: se acaba el encaje a la fuerza, vuelve el scroll normal
   ========================================================================== */
@media (max-width:1080px){
  .cuatro{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(22px,3vw,40px)}
}
@media (max-width:900px){
  html{scroll-snap-type:none}
  .pantalla{min-height:0;padding-block:calc(var(--nav-h) + 26px) 38px;scroll-snap-align:none}
  .pantalla.portada{min-height:100svh}
  .nav-links,.puntos{display:none}
  .burger{display:block}
  /* en el teléfono: titular, dibujo y franja, en ese orden */
  .pantalla.portada{flex-direction:column;justify-content:center;gap:clamp(14px,2.2vh,24px)}
  .pantalla.portada > .cont{display:contents}
  .hero-txt,.servicios{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--margen)}
  .hero-txt{order:0;max-width:none}
  .hero-vis{position:relative;order:1;width:100%;height:min(38vh,320px);top:0;bottom:0;
    -webkit-mask-image:none;mask-image:none}
  .servicios{order:2}
  /* los tres fluidos, en una tira compacta: la portada cabe en una pantalla */
  .servicios{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;align-items:start}
  .servicio span{display:none}
  .servicio b{font-size:.78rem;line-height:1.25}
  .servicio .regla{width:100%;height:2.5px;margin-bottom:8px}
  .medidor{grid-column:1/-1;width:100%;text-align:left;margin-top:4px}
  .dos,.dos--txt,.dos--empresa,.tres,.pid-rej,.tarj-int{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  /* los botones de familia, en una tira que se corre de lado */
  .riel-cab{flex-wrap:wrap;gap:12px}
  .riel-chips{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none;padding-bottom:2px;
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
    mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .riel-chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .riel-flechas{margin-left:auto}
  .tarj{flex-basis:min(86vw,420px)}
  .riel--min .tarj{flex-basis:min(80vw,320px)}
  /* --- P&ID: en el teléfono se desliza de lado para que se lea --- */
  .pid-caja{
    aspect-ratio:auto;height:clamp(280px,46vh,380px);max-height:none;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .pid-caja::-webkit-scrollbar{display:none}
  .pid-caja .capa{inset:0 auto 0 0;width:740px;height:100%}
  .pid-caja svg{width:740px;height:100%}
  .pid-leyenda::before{
    content:"Desliza el diagrama de lado";order:-1;flex-basis:100%;
    font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
    color:var(--naranja);opacity:.8;
  }

  /* --- la ficha de empresa: rótulo arriba, dato abajo --- */
  .ficha table.tec tr{display:block;border-bottom:1px solid var(--borde);padding:9px 0}
  .ficha table.tec tr:last-child{border-bottom:0}
  .ficha table.tec th,.ficha table.tec td{display:block;width:auto;padding:0;border:0}
  .ficha table.tec th{opacity:.5;margin-bottom:3px}

  /* --- la portada, completa sin tener que bajar --- */
  .hero-vis{height:min(24vh,205px)}
  .acciones{gap:10px}
  .btn{padding:14px 22px}
  .servicio span{font-size:.8rem}

  /* --- pestañas chicas: una sola tira que se corre --- */
  .mini-pest{overflow-x:auto;scrollbar-width:none}
  .mini-pest::-webkit-scrollbar{display:none}
  .mini-b{flex:none}

  /* --- Cotizar: primero el formulario, la referencia después --- */
  .contacto-rej{grid-template-columns:1fr;grid-template-rows:auto}
  .col-txt{grid-column:1;grid-row:auto;order:1}
  .col-form{grid-column:1;grid-row:auto;order:2}
  .col-ref{grid-column:1;grid-row:auto;order:3;margin-top:8px}
  .rotulo--form{display:block;margin-top:26px}
  .col-ref{border-top:1px solid var(--borde);margin-top:26px;padding-top:22px}
  .col-ref .mini-pest,.col-ref .mini-panel{display:none}
  .col-ref.abierta .mini-pest{display:flex;margin-top:22px}
  .col-ref.abierta .mini-panel.on{display:block}
  .ref-abrir{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    padding-bottom:2px;
    background:none;border:0;padding:0;cursor:pointer;color:var(--tinta-2);
    font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  }
  .ref-abrir b{color:var(--naranja);font-weight:500;font-size:1.2rem;line-height:1;
    transition:transform .3s var(--ease)}
  .col-ref.abierta .ref-abrir b{transform:rotate(45deg)}
  .etapas p{font-size:.84rem}

  /* --- catálogo: menos texto por ficha --- */
  .tarj-nota{display:none}
  .tarj-txt{font-size:.88rem}
  .tarj table.tec tr{padding:7px 0}
  .tarj table.tec.mini{font-size:.78rem}

  /* --- quiénes somos: más corto --- */
  .ficha table.tec tr{padding:7px 0}
  .ficha table.tec{font-size:.82rem}
  .visor-caja{aspect-ratio:16/11}
  .lam{background-position:center 42%}
  .lam-txt p{font-size:.86rem}
  .visor-puntos{justify-content:center}

  /* --- P&ID: se ve completo y se amplía para leerlo --- */
  .pid-caja{
    aspect-ratio:43/23;height:auto;max-height:none;overflow:hidden;
  }
  .pid-caja .capa{inset:0;width:auto;height:auto;padding:8px}
  .pid-caja svg{width:100%;height:100%}
  .pid-leyenda::before{content:none}
  .pid-ampliar{display:block}
  /* la tira de etapas avisa que sigue */
  .pest{
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent);
    gap:14px;
  }
  .pest-b{padding:4px 2px 14px;font-size:.95rem}
  .pest-b i{margin-right:7px}

  /* --- el pie, en dos líneas legibles --- */
  .pie{gap:10px 18px;font-size:.68rem}
  .pie-marca{flex-basis:100%}
}
/* en columna angosta, el dato debajo de su rótulo y no en dos columnas */
@media (max-width:760px){
  .tarj table.tec tr{display:block;border-bottom:1px solid var(--borde);padding:9px 0}
  .tarj table.tec tr:last-child{border-bottom:0}
  .tarj table.tec th,.tarj table.tec td{display:block;width:auto;padding:0;border:0}
  .tarj table.tec th{opacity:.5;margin-bottom:3px}
  .visor{grid-template-columns:1fr;gap:18px}
  .visor-caja{aspect-ratio:4/5;max-height:none}
  .lam-txt p{font-size:.88rem}
}

/* tablet: dos columnas todavía, pero con menos aire entre ellas */
@media (min-width:901px) and (max-width:1180px){
  .dos,.dos--txt,.dos--empresa{gap:clamp(24px,3vw,44px)}
  .tres{gap:clamp(18px,2.4vw,34px)}
  .pid-rej{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(20px,2.6vw,36px)}
  .cifras-emp{gap:14px 24px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  [data-anim]{opacity:1 !important;transform:none !important}
}