/* Montserrat — auto-hospedada. SIL Open Font License 1.1.
   Subconjuntos latin y latin-ext. Descargada de Google Fonts el 20-ago-2026.
   Se sirve desde el propio dominio para no depender de un tercero y para
   poder precargarla: eso quita ~260 ms de bloqueo y el salto de maquetación
   que provocaba el intercambio de fuente. */

@font-face {
 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fuentes/montserrat-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fuentes/montserrat-400-latin.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: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fuentes/montserrat-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fuentes/montserrat-500-latin.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: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fuentes/montserrat-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fuentes/montserrat-600-latin.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: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fuentes/montserrat-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fuentes/montserrat-700-latin.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: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fuentes/montserrat-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fuentes/montserrat-800-latin.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;
}

/* ==========================================================================
   Grupo Cantera — sistema visual "El Expediente"
   Concepto: Cantera vende operación medida, no comida bonita. La retícula, los
   filetes y las tablas vienen del expediente operativo: el documento con el que
   un comprador institucional toma la decisión.
   Paleta y tipografía: manual de identidad visual de Grupo Cantera
   (navy #06327D, naranja #F25600, Montserrat) + derivados documentados en
   docs/02-inventario-marca.md.
   ========================================================================== */

:root{
  /* marca — del manual */
  --navy:#06327D;
  --naranja:#F25600;
  --verde:#0A6F45;
  --rojo:#A5271D;
  /* derivados de estructura */
  --navy-hondo:#04225A;
  --navy-claro:#1A4A9E;
  /* El naranja del manual (#F25600) NO pasa contraste AA como texto: con blanco
     encima da 3.44:1 y sobre papel 3.29:1. Se usa SOLO como decoración (filetes,
     barras, subrayados). Para texto y para fondos de botón van estas variantes,
     medidas contra cada superficie. Ver docs/02-inventario-marca.md. */
  --naranja-texto:#B03E00;   /* sobre claros: 4.8–5.9:1  */
  --naranja-inv:#FF8340;     /* sobre navy:   4.9–6.2:1  */
  --naranja-btn:#C74600;     /* fondo con texto blanco: 4.88:1 */
  --naranja-btn-h:#A63A00;   /* hover del botón:        6.51:1 */
  /* papel */
  --papel:#FAFAF8;
  --crema:#F5F1E8;
  --piedra:#E8E6E1;
  --blanco:#FFFFFF;
  --regla:#DAD8D2;
  /* tinta */
  --tinta:#1B2028;
  --tinta-2:#3A4048;
  /* Verificado contra las CUATRO superficies claras, no solo el papel:
     blanco 6.06 · papel 5.80 · crema 5.37 · piedra 4.86. El anterior
     (#696F79) pasaba en papel pero se caía a 4.06 sobre piedra. */
  --tinta-3:#5D636C;
  --tinta-inv:#EEF1F6;
  --tinta-inv-2:#A9B4C8;

  --sans:"Montserrat","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;

  --max:1160px;
  --gutter:clamp(20px,4vw,40px);
  --r:4px;
  --sombra:0 1px 2px rgba(27,32,40,.04),0 18px 40px -30px rgba(27,32,40,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--sans);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--naranja);outline-offset:3px;border-radius:2px}

/* ---------- tipografía ----------
   Montserrat es geométrica y en peso alto necesita apretarse, o los titulares
   se ven inflados. De ahí el letter-spacing negativo en h1/h2. */
h1,h2,h3,h4{font-family:var(--sans);margin:0;text-wrap:balance}
h1{font-size:clamp(32px,5.6vw,58px);line-height:1.05;letter-spacing:-.028em;font-weight:800}
h2{font-size:clamp(25px,3.4vw,40px);line-height:1.12;letter-spacing:-.022em;font-weight:800}
h3{font-size:clamp(18px,1.9vw,22px);line-height:1.25;letter-spacing:-.012em;font-weight:700}
/* Etiqueta de bloque. Es una CLASE, no un nivel: el nivel del encabezado lo
   decide la jerarquía de la página (h2 -> h3), no su tamaño visual. Saltar de
   h2 a h4 rompe el orden que leen los lectores de pantalla. */
h4,.etiqueta{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-3);line-height:1.4}
p{margin:0 0 1em;max-width:66ch}
strong{font-weight:600}
.lede{font-size:clamp(17.5px,2vw,21px);line-height:1.5;color:var(--tinta-2);max-width:56ch}

/* etiqueta de sección: EL motivo del sistema.
   Un filete naranja de 3px y la etiqueta en versalitas. Aparece sobre cada h2. */
.lectura{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy);display:inline-flex;align-items:center;gap:11px;
}
.lectura::before{content:"";width:26px;height:3px;background:var(--naranja);flex:none}
.lectura.inv{color:var(--tinta-inv-2)}

/* filete de cierre de banda */
.filete{height:3px;background:var(--naranja);width:100%}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.band{padding:clamp(52px,7.5vw,96px) 0}
.band--tight{padding:clamp(38px,5vw,60px) 0}
.band-dark{background:var(--navy);color:var(--tinta-inv)}
.band-dark h1,.band-dark h2,.band-dark h3{color:var(--blanco)}
.band-dark p{color:var(--tinta-inv-2)}
.band-dark h4,.band-dark .etiqueta{color:var(--tinta-inv-2)}
.band-hondo{background:var(--navy-hondo);color:var(--tinta-inv)}
.band-hondo h2,.band-hondo h3{color:var(--blanco)}
.band-hondo p{color:var(--tinta-inv-2)}
.band-crema{background:var(--crema)}
.band-piedra{background:var(--piedra)}
.grid{display:grid;gap:clamp(18px,2.6vw,30px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,68px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.sec-head{margin-bottom:clamp(24px,3.2vw,40px)}
.sec-head h2{margin-top:14px}
.sec-head p{margin-top:16px}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:60;background:rgba(250,250,248,.94);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--regla)}
.top-in{display:flex;align-items:center;gap:20px;min-height:70px}
.logo{display:flex;align-items:center;color:var(--navy)}
.logo:hover{text-decoration:none}
.logo svg{height:26px;width:auto;display:block;color:var(--navy)}
nav.main{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,1.8vw,24px)}
/* `:not(.btn)` es indispensable: sin él, esta regla le quita al botón de
   «Solicitar propuesta» su fondo, su borde y su padding —gana por
   especificidad— y el texto blanco queda invisible sobre la cabecera clara. */
nav.main > a:not(.btn),.desp > button{font-family:var(--sans);font-size:14.5px;font-weight:500;
  color:var(--tinta-2);background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
nav.main > a:not(.btn):hover,.desp > button:hover{color:var(--navy);text-decoration:none}
nav.main > a[aria-current="page"]:not(.btn){color:var(--navy);font-weight:700}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--regla);
  border-radius:var(--r);padding:9px 12px;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2);cursor:pointer}

/* menú desplegable de servicios */
.desp{position:relative}
.desp > button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .16s ease}
.desp[data-abierto="true"] > button::after{transform:rotate(-135deg) translateY(-2px)}
.desp[data-abierto="true"] > button{color:var(--navy)}
.desp-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:var(--blanco);border:1px solid var(--regla);border-radius:var(--r);
  box-shadow:var(--sombra);padding:8px;min-width:290px;display:none;z-index:70}
.desp[data-abierto="true"] .desp-menu{display:block}
.desp-menu a{display:block;padding:11px 13px;border-radius:var(--r);font-size:14.5px;
  font-weight:600;color:var(--tinta);line-height:1.3}
.desp-menu a span{display:block;font-size:12.5px;font-weight:400;color:var(--tinta-3);margin-top:3px}
.desp-menu a:hover{background:var(--crema);text-decoration:none;color:var(--navy)}

@media (max-width:960px){
  nav.main{position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--blanco);border-bottom:1px solid var(--regla);padding:10px var(--gutter) 22px;
    gap:0;display:none;box-shadow:var(--sombra);max-height:calc(100dvh - 70px);overflow-y:auto}
  nav.main.open{display:flex}
  nav.main > a{padding:14px 0;border-bottom:1px solid var(--piedra);font-size:16px}
  .burger{display:block}
  .desp{width:100%}
  .desp > button{width:100%;justify-content:space-between;padding:14px 0;
    border-bottom:1px solid var(--piedra);font-size:16px}
  .desp-menu{position:static;transform:none;display:block;border:0;box-shadow:none;
    padding:4px 0 10px;min-width:0;background:transparent}
  .desp-menu a{padding:10px 0 10px 14px;border-left:2px solid var(--piedra)}
  nav.main .btn{margin-top:16px;text-align:center;justify-content:center}
}

/* ---------- botones ----------
   El principal es navy sobre claro (11.93:1). El naranja NO pasa contraste AA
   para texto normal (3.44:1), así que se reserva para el secundario, donde el
   texto es grande y en peso alto. Ver docs/02-inventario-marca.md. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:-.005em;
  padding:14px 24px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease,background .16s ease,box-shadow .16s ease;text-align:center}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--pri{background:var(--navy);color:#fff;box-shadow:0 10px 24px -14px rgba(6,50,125,.9)}
.btn--pri:hover{background:var(--navy-hondo);color:#fff}
.btn--sec{background:var(--naranja-btn);color:#fff;font-size:15.5px;box-shadow:0 10px 24px -14px rgba(199,70,0,.85)}
.btn--sec:hover{background:var(--naranja-btn-h);color:#fff}
.btn--linea{background:transparent;color:var(--tinta);border-color:var(--tinta-3)}
.btn--linea:hover{border-color:var(--tinta);background:rgba(27,32,40,.04)}
.band-dark .btn--linea,.band-hondo .btn--linea,.hero .btn--linea{color:#fff;border-color:rgba(255,255,255,.45)}
.band-dark .btn--linea:hover,.band-hondo .btn--linea:hover,.hero .btn--linea:hover{
  background:rgba(255,255,255,.1);border-color:#fff}
.band-dark .btn--pri,.band-hondo .btn--pri,.hero .btn--pri{background:var(--blanco);color:var(--navy)}
.band-dark .btn--pri:hover,.band-hondo .btn--pri:hover,.hero .btn--pri:hover{background:var(--crema);color:var(--navy)}
nav.main a.btn--sec{color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.micro{font-size:12px;color:var(--tinta-3);margin-top:14px;letter-spacing:.01em}
.band-dark .micro,.band-hondo .micro,.hero .micro{color:var(--tinta-inv-2)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:var(--tinta-inv);overflow:hidden;
  padding:clamp(52px,8vw,104px) 0 clamp(46px,6.5vw,84px)}
.hero::after{content:"";position:absolute;inset:auto -10% -55% 48%;height:70%;
  background:radial-gradient(closest-side,rgba(26,74,158,.55),transparent 72%);pointer-events:none}
.hero-in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);
  gap:clamp(30px,4vw,52px);align-items:center}
@media (max-width:960px){.hero-in{grid-template-columns:1fr}}
/* En el hero el H1 convive con la calculadora: necesita un tope más bajo que
   el general para no partirse en demasiadas líneas. */
.hero h1{color:#fff;margin:18px 0 0;font-size:clamp(31px,4.2vw,50px)}
.hero--svc h1{font-size:clamp(31px,4.4vw,52px)}
.hero h1 em{font-style:normal;color:#fff;box-shadow:inset 0 -.14em 0 var(--naranja)}
/* El subrayado se corta feo cuando la frase enfatizada queda partida entre dos
   líneas (deja una palabra suelta al final de la anterior). Arriba de 560px la
   mantenemos en una sola línea; abajo se deja fluir, o desbordaría. */
@media (min-width:400px){.hero h1 em{white-space:nowrap}}
.hero .lede{color:var(--tinta-inv-2);margin-top:22px}
.hero--svc{padding:clamp(40px,5.5vw,72px) 0 clamp(36px,5vw,64px)}
.hero--svc .hero-in{grid-template-columns:minmax(0,1fr);max-width:44rem}
.senales{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:26px;padding:0;list-style:none}
.senales li{font-size:12px;font-weight:500;letter-spacing:.02em;color:#fff;
  border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 14px}

/* ---------- calculadora de operación ---------- */
.calc{background:var(--navy-hondo);color:var(--tinta-inv);border-radius:6px;overflow:hidden;
  box-shadow:0 40px 80px -50px rgba(4,34,90,.9);border:1px solid rgba(255,255,255,.1)}
.calc-in{padding:clamp(22px,3vw,32px)}
.calc-out{padding:clamp(22px,3vw,32px);background:rgba(0,0,0,.16);
  border-top:1px solid rgba(255,255,255,.1)}
.campo{margin-top:22px}
.campo:first-child{margin-top:0}
.campo label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13.5px;font-weight:600;color:#fff;margin-bottom:11px}
.campo .val{font-size:14.5px;font-weight:700;color:var(--naranja-inv);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:rgba(255,255,255,.22);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-9px;
  border-radius:50%;background:#fff;border:3px solid var(--naranja);box-shadow:0 2px 8px rgba(0,0,0,.5)}
input[type=range]::-moz-range-track{height:3px;background:rgba(255,255,255,.22);border-radius:2px}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;
  border:3px solid var(--naranja)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-family:var(--sans);font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:999px;
  background:transparent;color:var(--tinta-inv-2);border:1px solid rgba(255,255,255,.22);cursor:pointer;
  transition:all .14s ease}
.chip:hover{border-color:#fff;color:#fff}
.chip[aria-pressed=true]{background:var(--naranja-btn);color:#fff;border-color:var(--naranja-btn)}
.resultado{font-size:clamp(38px,6vw,56px);line-height:1;color:#fff;letter-spacing:-.035em;
  font-weight:800;font-variant-numeric:tabular-nums;margin:6px 0 0}
.resultado small{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--naranja-inv);margin-bottom:11px}
.recomienda{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.recomienda .k{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-inv-2);display:block;margin-bottom:6px}
.recomienda .v{font-size:22px;font-weight:700;color:#fff;line-height:1.2;letter-spacing:-.015em}
.recomienda p{font-size:13.5px;color:var(--tinta-inv-2);margin:9px 0 0}

/* ---------- tarjetas ---------- */
.card{background:var(--blanco);border:1px solid var(--regla);border-radius:var(--r);
  padding:24px;box-shadow:var(--sombra)}
.card h3{margin-bottom:9px}
.card p{font-size:15.5px;color:var(--tinta-2);margin-bottom:0}
.band-dark .card,.band-hondo .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
.band-dark .card p,.band-hondo .card p{color:var(--tinta-inv-2)}

/* tarjeta de servicio: enlazada entera, con filete naranja que crece al pasar */
a.svc{display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--regla);
  border-radius:var(--r);padding:24px;box-shadow:var(--sombra);color:var(--tinta);
  position:relative;overflow:hidden;transition:transform .14s ease,box-shadow .16s ease}
a.svc::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--naranja);
  transform:scaleY(0);transform-origin:top;transition:transform .2s ease}
a.svc:hover{text-decoration:none;transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(27,32,40,.05),0 22px 44px -28px rgba(27,32,40,.5)}
a.svc:hover::before{transform:scaleY(1)}
a.svc h3{margin:14px 0 9px;color:var(--navy)}
a.svc p{font-size:15px;color:var(--tinta-2);margin:0}
a.svc .mas{margin-top:16px;font-size:13px;font-weight:700;color:var(--naranja-texto);
  display:inline-flex;align-items:center;gap:6px}
a.svc .mas::after{content:"→";transition:transform .16s ease}
a.svc:hover .mas::after{transform:translateX(3px)}

/* paso numerado */
.paso{position:relative;padding-top:22px;border-top:3px solid var(--navy)}
.paso .n{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--naranja-texto);
  position:absolute;top:-8px;background:var(--papel);padding-right:10px}
.band-crema .paso .n{background:var(--crema)}
.band-piedra .paso .n{background:var(--piedra)}
.paso h3{margin:0 0 10px}
.paso p{font-size:15.5px;color:var(--tinta-2);margin:0}

/* lista de inclusiones con icono */
.incluye{display:grid;gap:1px;background:var(--regla);border:1px solid var(--regla);
  border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.incluye > div{background:var(--blanco);padding:22px}
.incluye h3{font-size:16.5px;margin:12px 0 7px;color:var(--navy)}
.incluye p{font-size:14.5px;color:var(--tinta-2);margin:0}

/* ---------- cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:var(--regla);border:1px solid var(--regla);border-radius:var(--r);overflow:hidden}
.band-dark .cifras,.band-hondo .cifras{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.cifra{background:var(--blanco);padding:22px}
.band-dark .cifra,.band-hondo .cifra{background:rgba(255,255,255,.05)}
.cifra .n{font-size:clamp(28px,3.6vw,38px);font-weight:800;line-height:1;letter-spacing:-.03em;
  color:var(--navy);display:block;font-variant-numeric:tabular-nums}
.band-dark .cifra .n,.band-hondo .cifra .n{color:#fff}
.cifra .k{font-size:13.5px;color:var(--tinta-2);margin-top:10px;display:block;line-height:1.4}
/* Sobre el fondo compuesto de .cifra (#345895) el gris azulado da 3.38:1.
   Este tono llega a 5.07:1 y mantiene la jerarquía con el número. */
.band-dark .cifra .k,.band-hondo .cifra .k{color:#D4DBE6}

/* ---------- tablas ---------- */
/* Sombra de desplazamiento: en móvil la tabla se desliza, pero nada lo indicaba
   y el usuario creía que la información estaba cortada. Las dos primeras capas
   son "tapas" blancas ancladas al contenido (background-attachment:local) y las
   dos radiales son la sombra, anclada al marco: cuando hay contenido oculto a un
   lado, la tapa se va con el scroll y deja ver la sombra. Sin marcado extra. */
.tabla-wrap{overflow-x:auto;border:1px solid var(--regla);border-radius:var(--r);
  background-color:var(--blanco);
  background-image:
    linear-gradient(to right, var(--blanco) 30%, rgba(255,255,255,0)),
    linear-gradient(to left,  var(--blanco) 30%, rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0 50%, rgba(27,32,40,.18), rgba(27,32,40,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(27,32,40,.18), rgba(27,32,40,0));
  background-position:0 0, 100% 0, 0 0, 100% 0;
  background-repeat:no-repeat;
  background-size:44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment:local, local, scroll, scroll}
table.datos{border-collapse:collapse;width:100%;min-width:660px;font-size:14.5px}
/* Tablas de pocas columnas y celdas cortas: viven dentro de media columna,
   donde un min-width de 660px las obligaría a desplazarse siempre. */
table.datos--compacta{min-width:400px;font-size:14px}
table.datos--compacta th,table.datos--compacta td{padding:12px 14px}
table.datos th,table.datos td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--regla);
  vertical-align:top}
table.datos thead th{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);background:var(--crema);white-space:nowrap}
table.datos tbody th{font-size:15.5px;font-weight:700;color:var(--navy);white-space:nowrap}
table.datos td{color:var(--tinta-2)}
table.datos tr:last-child th,table.datos tr:last-child td{border-bottom:0}
table.datos .destacado{background:#F2F5FB}
/* --- la tabla en móvil ---------------------------------------------------
   Un comparativo de tres o cuatro columnas no cabe en 390px: al desplazarse,
   las filas quedan altísimas y casi vacías en la columna visible, y parece
   contenido roto. Abajo de 720px cada fila se convierte en una ficha y cada
   celda muestra el nombre de su columna (atributo data-col, que pone el build).
   Se lee de corrido, sin desplazamiento lateral.                            */
@media (max-width:720px){
  .tabla-wrap{overflow-x:visible;border:0;border-radius:0;background:none;background-image:none}
  table.datos,table.datos tbody,table.datos tr,table.datos th,table.datos td{display:block;
    width:auto;min-width:0}
  table.datos thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.datos tr{background:var(--blanco);border:1px solid var(--regla);border-radius:var(--r);
    padding:6px 0 4px;margin-bottom:14px;box-shadow:var(--sombra)}
  table.datos tr.destacado{border-color:var(--navy);border-width:1px 1px 1px 3px}
  table.datos tbody th{font-size:17px;padding:12px 18px 10px;white-space:normal;
    border-bottom:1px solid var(--regla)}
  table.datos td{padding:11px 18px;border-bottom:1px dotted var(--regla)}
  table.datos tr td:last-child{border-bottom:0}
  table.datos td::before{content:attr(data-col);display:block;font-size:10.5px;font-weight:700;
    letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:4px}
  table.datos td[data-col=""]::before{display:none}
}

.etq{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--naranja-btn);padding:3px 7px;border-radius:2px;vertical-align:middle;margin-left:8px}
.num{font-variant-numeric:tabular-nums;font-size:13.5px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--regla);max-width:820px}
.faq details{border-bottom:1px solid var(--regla)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-size:clamp(16.5px,1.8vw,19px);font-weight:700;line-height:1.35;letter-spacing:-.012em;color:var(--tinta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:24px;font-weight:400;
  color:var(--naranja-texto);transition:transform .18s ease}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--navy)}
.faq .resp{padding:0 0 22px;max-width:64ch}
.faq .resp p:last-child{margin-bottom:0}
.faq .resp p{font-size:16px;color:var(--tinta-2)}

/* ---------- formulario ---------- */
.form{background:var(--blanco);border:1px solid var(--regla);border-radius:var(--r);
  padding:clamp(22px,3.2vw,34px);box-shadow:var(--sombra)}
.form .fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.form .fila{grid-template-columns:1fr}}
.form label{display:block;font-size:13.5px;font-weight:700;color:var(--tinta);margin:0 0 7px}
.form input[type=text],.form input[type=tel],.form input[type=email],.form select,.form textarea{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--tinta);background:var(--papel);
  border:1px solid var(--regla);border-radius:var(--r);padding:12px 14px;transition:border .14s ease}
.form textarea{min-height:96px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--navy);outline:none;
  box-shadow:0 0 0 3px rgba(6,50,125,.14)}
.form .campo-f{margin-bottom:16px}
.form .consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--tinta-3);
  line-height:1.5;margin:18px 0 0}
.form .consent input{margin-top:3px;flex:none;accent-color:var(--navy);width:16px;height:16px}
/* El enlace al aviso vive dentro de texto gris: sin subrayado solo se
   distingue por color, y el contraste entre ambos es de 2.35:1. */
.form .consent a{text-decoration:underline;text-underline-offset:2px}
.form .btn{width:100%;margin-top:18px}
.aviso-form{font-size:12px;color:var(--tinta-3);margin:14px 0 0;text-align:center}
.msg{margin-top:16px;padding:13px 15px;border-radius:var(--r);font-size:14.5px;display:none}
.msg.ok{display:block;background:#E9F3EE;color:#0A5230;border:1px solid #B9DCC8}
.msg.err{display:block;background:#FBECEA;color:#8E211B;border:1px solid #EFC7C2}

/* ---------- WhatsApp flotante ---------- */
.wa-flot{position:fixed;right:18px;bottom:18px;z-index:80;display:inline-flex;align-items:center;gap:10px;
  background:var(--verde);color:#fff;font-family:var(--sans);font-size:14.5px;font-weight:700;
  padding:13px 19px 13px 15px;border-radius:999px;box-shadow:0 14px 34px -12px rgba(10,111,69,.8);
  transition:transform .14s ease,background .16s ease}
.wa-flot:hover{text-decoration:none;transform:translateY(-2px);background:#085936}
.wa-flot svg{width:21px;height:21px;flex:none}
.wa-flot .txt{display:inline}
@media (max-width:600px){.wa-flot{right:14px;bottom:14px;padding:14px}.wa-flot .txt{display:none}}

/* ---------- footer ---------- */
footer.pie{background:var(--navy-hondo);color:var(--tinta-inv-2);padding:clamp(42px,5.5vw,68px) 0 28px;
  font-size:14.5px}
footer.pie a{color:var(--tinta-inv-2)}
footer.pie a:hover{color:#fff}
.pie-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(22px,4vw,44px)}
@media (max-width:860px){.pie-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pie-grid{grid-template-columns:1fr}}
.pie-grid .etiqueta{color:#fff;margin-bottom:15px;display:block}
.pie-grid ul{list-style:none;margin:0;padding:0}
.pie-grid li{margin:0 0 10px}
.pie .logo svg{height:30px;color:#fff}
.pie .desc{margin-top:15px;max-width:34ch;color:var(--tinta-inv-2);font-size:14.5px}
.pie-legal{margin-top:16px;font-size:12.5px;color:var(--tinta-inv-2);max-width:34ch;line-height:1.55}
.pie-base{margin-top:clamp(30px,4.5vw,48px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-size:12px;letter-spacing:.02em;color:var(--tinta-inv-2)}

/* ---------- prosa (blog, legales) ---------- */
.prosa{max-width:70ch}
.prosa h2{margin:44px 0 14px;font-size:clamp(22px,2.6vw,30px)}
.prosa h3{margin:30px 0 10px}
.prosa p,.prosa li{color:var(--tinta-2);font-size:17px}
.prosa ul,.prosa ol{padding-left:1.25em}
.prosa li{margin:.45em 0}
.prosa blockquote{margin:26px 0;padding:4px 0 4px 20px;border-left:3px solid var(--naranja);
  color:var(--tinta);font-size:18px}
.prosa blockquote p:last-child{margin-bottom:0}
.prosa a{text-decoration:underline;text-underline-offset:3px}

/* meta del post */
.post-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--tinta-3);
  margin-top:16px;letter-spacing:.02em}
.post-meta .cat{color:var(--naranja-texto);font-weight:700;text-transform:uppercase;letter-spacing:.12em}

/* tarjeta de artículo */
a.post-card{display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--regla);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);color:var(--tinta);
  transition:transform .14s ease,box-shadow .16s ease}
a.post-card:hover{text-decoration:none;transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(27,32,40,.05),0 22px 44px -28px rgba(27,32,40,.5)}
a.post-card .cue{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
a.post-card h3{margin:10px 0 8px;color:var(--navy);font-size:18.5px}
a.post-card p{font-size:14.5px;color:var(--tinta-2);margin:0}
a.post-card .post-meta{margin-top:auto;padding-top:16px}

/* ---------- caso de éxito ---------- */
.caso-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--regla);border:1px solid var(--regla);border-radius:var(--r);overflow:hidden;margin:26px 0}
.caso-cifras > div{background:var(--crema);padding:20px}
.caso-cifras .n{font-size:26px;font-weight:800;color:var(--navy);display:block;letter-spacing:-.02em}
.caso-cifras .k{font-size:12.5px;color:var(--tinta-2);margin-top:6px;display:block}

/* ---------- figuras ---------- */
figure{margin:0}
.foto{border-radius:var(--r);overflow:hidden;background:var(--piedra)}
.foto img{width:100%;height:auto;display:block}
.foto--ancha img{aspect-ratio:16/9;object-fit:cover}
.foto--alta img{aspect-ratio:4/5;object-fit:cover}
.pie-foto{font-size:12px;color:var(--tinta-3);margin-top:9px;line-height:1.5}
.band-dark .pie-foto,.band-hondo .pie-foto{color:var(--tinta-inv-2)}

/* ---------- migas ---------- */
.migas{font-size:12.5px;color:var(--tinta-3);padding:16px 0 0}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.migas li::after{content:"/";margin-left:8px;color:var(--regla)}
.migas li:last-child::after{content:""}
.migas a{color:var(--tinta-3)}
.migas [aria-current]{color:var(--tinta-2);font-weight:600}

/* ---------- iconos ---------- */
.ico{width:1.7em;height:1.7em;flex:none;color:var(--naranja);vertical-align:middle}
.band-dark .ico,.band-hondo .ico,.hero .ico{color:var(--naranja)}
.ico--g{width:2.4em;height:2.4em}
.wa-flot .ico{width:21px;height:21px;color:currentColor}
.card .ico--g,.incluye .ico{display:block}

/* ---------- utilidades ---------- */
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.solo-lectores:focus{position:static;width:auto;height:auto;clip:auto;padding:10px 16px;
  background:var(--navy);color:#fff;display:inline-block}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* el encabezado fijo no debe tapar el título al saltar a un ancla */
#calculadora,#contacto,#servicios,#contenido,#faq{scroll-margin-top:86px}

/* ---------- desbordamiento horizontal ----------
   Los hijos de un grid tienen min-width:auto y no se dejan encoger por debajo
   de su contenido: eso empujaba la página a lo ancho en móvil. */
.hero-in > *,.split > *,.grid > *,.pie-grid > *,.cifras > *,.incluye > *,.caso-cifras > *{min-width:0}
.senales li,.micro,.post-meta{overflow-wrap:anywhere}
html,body{max-width:100%;overflow-x:clip}
@media (max-width:520px){
  .btn{width:100%}
  .btn-row{gap:10px}
  .calc-in,.calc-out{padding:20px}
}