/* 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;
}

/* Playfair Display — auto-hospedada. SIL Open Font License 1.1.
   Es la familia de titulares del sistema (redes.gcanteracorp.com). El archivo
   es la VARIABLE de Google Fonts: un solo woff2 por subconjunto cubre del peso
   400 al 900, así que declararla tres veces no descarga nada extra.
   Subconjuntos latin y latin-ext. Descargada de Google Fonts el 11-sep-2026. */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fuentes/playfair-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: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fuentes/playfair-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
   Chasis ÚNICO del grupo: el de https://redes.gcanteracorp.com (ADR-0017).
   Tokens tomados del CSS en vivo del app (:root de /assets/index-*.css),
   verificados el 11-sep-2026. No se inventa paleta ni tipografía.

   La firma del sistema son las DOS familias: titulares en serif (Playfair
   Display) y absolutamente todo lo demás en sans (Montserrat). Página gris
   claro, el contenido en tarjetas blancas con filete fino y radio 12.
   Sin naranja y sin beige: eso era el manual impreso de agosto 2026, que el
   sistema digital sustituye.
   ========================================================================== */

:root{
  /* ---- tokens oficiales del app (idénticos) ---- */
  --ink:#0b1e2b;
  --navy:#12314b;
  --navy-soft:#1b3d5c;
  --accent:#2f5d8a;
  --accent-lt:#4c8fdb;
  --accent-pale:#93b4d8;
  --accent-mist:#c9d9ec;
  --page:#f1f3f6;
  --surface:#ffffff;
  --surface-2:#f5f7fa;
  --line:#e6e9ee;
  --line-soft:#eef1f5;
  --text:#16212b;
  --muted:#6b7684;
  --faint:#9aa7b5;

  /* ---- derivados, medidos contra la superficie donde se usan ----
     El app es una herramienta interna; este sitio es público y tiene párrafos
     largos, así que el texto secundario necesita cumplir AA a 15-17px. Los dos
     tonos de abajo son el mismo gris azulado del sistema, oscurecido hasta el
     mínimo que pasa: --muted oficial (#6b7684) da 4.11:1 sobre la página y
     reprueba como texto normal. Se conserva para rótulos grandes.            */
  --text-2:#3d4854;      /* cuerpo — 8.4:1 sobre la página */
  --muted-aa:#5a6472;    /* apagado y texto chico — 5.4:1 sobre la página */

  /* ---- sobre fondo oscuro (bandas navy y pie) ---- */
  --sobre-navy:#ffffff;       /* 13.3:1 sobre --navy */
  --sobre-navy-2:#c9d9ec;     /* secundario — 9.7:1 sobre --navy */
  --line-inv:rgba(255,255,255,.16);

  /* Verde de WhatsApp. No es color de marca: es el de la plataforma, y se usa
     solo en el botón flotante para que se reconozca de inmediato.
     Blanco encima: 4.62:1 — cumple AA. */
  --wa:#0B7A4B;

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --max:1200px;
  --gutter:clamp(20px,4vw,48px);
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --shadow-sm:0 1px 2px #0b1e2b0a;
  --shadow-md:0 4px 16px #0b1e2b0f;
  --shadow-lg:0 24px 60px #0b1e2b29;
}

*,*::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(--page);color:var(--text);
  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(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- tipografía ----------
   Las dos familias son la firma del sistema: los titulares de página (h1, h2)
   en Playfair Display y TODO lo demás en Montserrat. El h3 es título de
   tarjeta, no titular de lámina: se queda en sans 600, como en el app.
   Playfair ya trae su propio contraste; no necesita el apretón que pedía
   Montserrat en peso 800, por eso el letter-spacing baja a -.015em (el del
   .display del app).                                                        */
h1,h2{font-family:var(--serif);margin:0;text-wrap:balance;font-weight:600;
  letter-spacing:-.015em;color:var(--text)}
h3,h4{font-family:var(--sans);margin:0;text-wrap:balance}
h1{font-size:clamp(34px,5.4vw,60px);line-height:1.08}
h2{font-size:clamp(26px,3.4vw,44px);line-height:1.12}
h3{font-size:clamp(17.5px,1.8vw,21px);line-height:1.3;letter-spacing:-.005em;font-weight:600}
/* 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(--muted-aa);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(--text-2);max-width:56ch}

/* etiqueta de sección (.eyebrow del app): EL motivo del sistema.
   Versalitas apagadas con un filete de acento delante. Aparece sobre cada h2. */
.lectura{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-aa);display:inline-flex;align-items:center;gap:11px;
}
.lectura::before{content:"";width:26px;height:2px;background:var(--accent);flex:none}
.lectura.inv{color:var(--sobre-navy-2)}
.lectura.inv::before{background:var(--accent-pale)}

/* filete de cierre de banda */
.filete{height:2px;background:var(--accent);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(--sobre-navy)}
.band-dark h1,.band-dark h2,.band-dark h3{color:var(--surface)}
.band-dark p{color:var(--sobre-navy-2)}
.band-dark h4,.band-dark .etiqueta{color:var(--sobre-navy-2)}
.band-hondo{background:var(--ink);color:var(--sobre-navy)}
.band-hondo h2,.band-hondo h3{color:var(--surface)}
.band-hondo p{color:var(--sobre-navy-2)}
/* Tres niveles de claro, como en el app: la página (#f1f3f6), la superficie
   blanca y la superficie alterna. La alternancia es lo que da ritmo; no hay
   bandas de color.

   Entre la página y la superficie alterna hay un 2% de diferencia: si dos
   bandas claras quedan pegadas, se leen como una sola y la página pierde el
   compás. El filete de 1px —el separador del sistema— las vuelve a separar sin
   meter color. */
.band-arena{background:var(--surface);border-block:1px solid var(--line)}
.band-gris{background:var(--surface-2);border-block:1px solid var(--line)}
/* Una banda clara pegada al hero ya tiene su filete de acento arriba. */
.filete + .band-arena,.filete + .band-gris{border-top:0}
.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 ---------- */
/* La .topbar del app: superficie blanca y un filete de 1px abajo. */
.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.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(--text-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(--line);
  border-radius:var(--r-md);padding:9px 12px;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-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)}
/* El menú cuelga 14px por debajo del botón. Ese hueco no lo ocupaba ningún
   elemento: al bajar el puntero hacia el menú, el ratón salía de .desp, se
   disparaba el mouseleave y el menú se cerraba antes de poder picarle. El
   ::before es un puente transparente que tapa el hueco sin verse. */
.desp-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.desp-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);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-md);font-size:14.5px;
  font-weight:600;color:var(--text);line-height:1.3}
.desp-menu a span{display:block;font-size:12.5px;font-weight:400;color:var(--muted-aa);margin-top:3px}
.desp-menu a:hover{background:var(--surface-2);text-decoration:none;color:var(--accent)}

@media (max-width:960px){
  nav.main{position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--surface);border-bottom:1px solid var(--line);padding:10px var(--gutter) 22px;
    gap:0;display:none;box-shadow:var(--shadow-sm);max-height:calc(100dvh - 70px);overflow-y:auto}
  nav.main.open{display:flex}
  nav.main > a{padding:14px 0;border-bottom:1px solid var(--line);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(--line);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::before{display:none}   /* en móvil no hay hueco que puentear */
  .desp-menu a{padding:10px 0 10px 14px;border-left:2px solid var(--line)}
  nav.main .btn{margin-top:16px;text-align:center;justify-content:center}
}

/* ---------- botones ----------
   El .btn-add del app: fondo navy, texto blanco, radio 8. El secundario es el
   azul acero de acento (blanco encima: 6.85:1) y el de línea es el contorno
   fino sobre superficie clara. No hay un tercer color. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:0;
  padding:13px 22px;border-radius:var(--r-sm);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:var(--shadow-sm)}
.btn--pri:hover{background:var(--ink);color:#fff}
.btn--sec{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn--sec:hover{background:var(--navy);color:#fff}
.btn--linea{background:var(--surface);color:var(--text);border-color:var(--line)}
.btn--linea:hover{border-color:var(--accent);color:var(--accent);background:var(--surface)}
.band-dark .btn--linea,.band-hondo .btn--linea{color:#fff;background:transparent;border-color:rgba(255,255,255,.4)}
.band-dark .btn--linea:hover,.band-hondo .btn--linea:hover{
  background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.band-dark .btn--pri,.band-hondo .btn--pri,.band-dark .btn--sec,.band-hondo .btn--sec{background:var(--surface);color:var(--navy)}
.band-dark .btn--pri:hover,.band-hondo .btn--pri:hover,.band-dark .btn--sec:hover,.band-hondo .btn--sec:hover{background:var(--accent-mist);color:var(--ink)}
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(--muted-aa);margin-top:14px;letter-spacing:.01em}
.band-dark .micro,.band-hondo .micro{color:var(--sobre-navy-2)}

/* ---------- hero ----------
   El sistema no tiene portadas oscuras: la página es clara y el contenido vive
   en tarjetas blancas. El hero es la página misma, con el titular en serif y la
   calculadora como tarjeta. El peso lo dan el aire y el filete, no el color. */
.hero{position:relative;background:var(--page);color:var(--text);overflow:hidden;
  padding:clamp(56px,8vw,104px) 0 clamp(48px,6.5vw,84px)}
/* La marca de esquina (el logogram girado 90° abajo a la derecha) salió con el
   manual impreso de agosto 2026. El sistema de redes no tiene ese remate: la
   página se cierra con aire y filete, no con un sello. Se retira. */
.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}}
/* La etiqueta del hero viene marcada como .inv (venía de la portada oscura).
   Aquí el fondo es claro, así que se lee como cualquier otra etiqueta. */
.hero .lectura.inv{color:var(--muted-aa)}
.hero .lectura.inv::before{background:var(--accent)}
/* 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:var(--text);margin:20px 0 0;font-size:clamp(33px,4.4vw,56px)}
.hero--svc h1{font-size:clamp(33px,4.6vw,58px)}
/* El énfasis no se pinta: se subraya con el azul pálido por debajo de la línea
   base, como los realces del app. */
.hero h1 em{font-style:normal;color:var(--text);box-shadow:inset 0 -.14em 0 var(--accent-mist)}
/* 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:560px){.hero h1 em{white-space:nowrap}}
.hero .lede{color:var(--text-2);margin-top:24px}
.hero--svc{padding:clamp(44px,5.5vw,72px) 0 clamp(38px,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:var(--muted-aa);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px}

/* ---------- calculadora de operación ----------
   Es una tarjeta del sistema: superficie blanca, filete de 1px y radio 12. Va
   igual en el hero claro que dentro de una banda navy —ahí el blanco la separa
   del fondo sin necesidad de otro color—, por eso todas las reglas se blindan
   contra los heredados de .band-dark. */
.calc{background:var(--surface);color:var(--text);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow-md);border:1px solid var(--line)}
.band-dark .calc,.band-hondo .calc{box-shadow:var(--shadow-lg);border-color:transparent}
.calc-in{padding:clamp(22px,3vw,32px)}
.calc-out{padding:clamp(22px,3vw,32px);background:var(--surface-2);
  border-top:1px solid var(--line)}
.calc .lectura.inv,.band-dark .calc .lectura.inv{color:var(--muted-aa)}
.calc .lectura.inv::before,.band-dark .calc .lectura.inv::before{background:var(--accent)}
.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:var(--text);margin-bottom:11px}
.calc .campo label{color:var(--text)}
.campo .val{font-size:14.5px;font-weight:600;color:var(--accent);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:var(--line);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(--accent);box-shadow:var(--shadow-sm)}
input[type=range]::-moz-range-track{height:3px;background:var(--line);border-radius:2px}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;
  border:3px solid var(--accent)}
.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:var(--surface);color:var(--text-2);border:1px solid var(--line);cursor:pointer;
  transition:all .14s ease}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
/* La cifra grande es un titular: va en serif, como los h1 y h2. */
.resultado{font-family:var(--serif);font-size:clamp(38px,6vw,54px);line-height:1;color:var(--navy);
  letter-spacing:-.02em;font-weight:600;font-variant-numeric:tabular-nums;margin:6px 0 0}
.resultado small{display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-aa);margin-bottom:11px}
.recomienda{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.recomienda .k{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-aa);display:block;margin-bottom:6px}
.recomienda .v{font-size:21px;font-weight:600;color:var(--text);line-height:1.25;letter-spacing:-.01em}
.recomienda p,.band-dark .calc p,.band-hondo .calc p{font-size:13.5px;color:var(--text-2);margin:9px 0 0}


/* ---------- etiqueta vertical de sección ----------
   El manual rotula cada lámina con el nombre de la sección en vertical sobre el
   margen izquierdo, con un filete. Se usa en las bandas grandes de escritorio. */
.band--rotulada{position:relative}
.band--rotulada > .rotulo{
  position:absolute;left:calc(var(--gutter) - 14px);top:clamp(52px,7.5vw,96px);
  writing-mode:vertical-rl;transform:rotate(180deg);transform-origin:center;
  font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted-aa);display:flex;align-items:center;gap:14px}
.band--rotulada > .rotulo::after{content:"";width:1px;height:74px;background:var(--line)}
.band-dark .rotulo,.band-hondo .rotulo{color:var(--sobre-navy-2)}
.band-dark .rotulo::after,.band-hondo .rotulo::after{background:var(--line-inv)}
@media (max-width:1400px){.band--rotulada > .rotulo{display:none}}

/* ---------- banda de acento ----------
   Antes era el Burnt Orange del manual impreso. En el sistema digital el único
   color grande es el azul: el acento #2f5d8a da 6.85:1 con blanco encima. Se
   reserva para UNA banda por página —la del cierre— para que no compita con el
   pie, que va en tinta honda. */
.band-acento{background:var(--accent);color:#fff}
.band-acento h2,.band-acento h3{color:#fff}
.band-acento p{color:#fff}
.band-acento .lectura{color:#fff}
.band-acento .lectura::before{background:#fff}
.band-acento .btn--pri,.band-acento .btn--sec{background:#fff;color:var(--accent)}
.band-acento .btn--pri:hover,.band-acento .btn--sec:hover{background:var(--accent-mist);color:var(--ink)}
.band-acento .btn--linea{color:#fff;background:transparent;border-color:rgba(255,255,255,.55)}
.band-acento .btn--linea:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.band-acento .micro{color:rgba(255,255,255,.92)}

/* ---------- dato duro ----------
   Cifra grande + fuente citada. Es el bloque que sostiene los argumentos. */
.datos-duros{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.datos-duros > div{background:var(--surface);padding:clamp(22px,3vw,30px)}
.band-arena .datos-duros > div{background:var(--surface)}
/* La cifra es un titular: serif, como los h1 y h2. */
.dato-n{font-family:var(--serif);font-size:clamp(34px,4.4vw,48px);font-weight:600;line-height:1;
  letter-spacing:-.02em;color:var(--navy);display:block;font-variant-numeric:tabular-nums}
.dato-n small{font-size:.5em;font-weight:600;letter-spacing:-.01em;margin-left:2px}
.dato-k{font-size:15px;color:var(--text-2);margin-top:12px;display:block;line-height:1.45}
.dato-f{font-size:11.5px;color:var(--muted-aa);margin-top:12px;display:block;line-height:1.45;
  padding-top:10px;border-top:1px solid var(--line)}
.band-dark .datos-duros,.band-hondo .datos-duros{background:var(--line-inv);border-color:var(--line-inv)}
.band-dark .datos-duros > div,.band-hondo .datos-duros > div{background:rgba(255,255,255,.05)}
.band-dark .dato-n,.band-hondo .dato-n{color:#fff}
.band-dark .dato-k,.band-hondo .dato-k{color:var(--sobre-navy-2)}
.band-dark .dato-f,.band-hondo .dato-f{color:var(--sobre-navy-2);border-top-color:var(--line-inv)}

/* ---------- tarjetas ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px;box-shadow:var(--shadow-sm)}
.card h3{margin-bottom:9px}
.card p{font-size:15.5px;color:var(--text-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(--sobre-navy-2)}

/* tarjeta de servicio: enlazada entera, con filete de acento que crece al pasar */
a.svc{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:24px;box-shadow:var(--shadow-sm);color:var(--text);
  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(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .2s ease}
a.svc:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--accent-mist);
  box-shadow:var(--shadow-md)}
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(--text-2);margin:0}
a.svc .mas{margin-top:16px;font-size:13px;font-weight:700;color:var(--accent);
  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:2px solid var(--accent)}
.paso .n{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--accent);
  position:absolute;top:-8px;background:var(--page);padding-right:10px}
.band-arena .paso .n{background:var(--surface)}
.band-gris .paso .n{background:var(--surface-2)}
.paso h3{margin:0 0 10px}
.paso p{font-size:15.5px;color:var(--text-2);margin:0}

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

/* ---------- cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.band-dark .cifras,.band-hondo .cifras{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.cifra{background:var(--surface);padding:22px}
.band-dark .cifra,.band-hondo .cifra{background:rgba(255,255,255,.05)}
.cifra .n{font-family:var(--serif);font-size:clamp(28px,3.6vw,38px);font-weight:600;line-height:1;
  letter-spacing:-.02em;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(--text-2);margin-top:10px;display:block;line-height:1.4}
/* Sobre banda oscura el fondo compuesto de .cifra queda claro-sobre-navy: el
   texto secundario va en el azul pálido del sistema, que ahí da 8.9:1. */
.band-dark .cifra .k,.band-hondo .cifra .k{color:var(--sobre-navy-2)}

/* ---------- 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(--line);border-radius:var(--r-md);
  background-color:var(--surface);
  background-image:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)),
    linear-gradient(to left,  var(--surface) 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(--line);
  vertical-align:top}
table.datos thead th{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-aa);background:var(--surface-2);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(--text-2)}
table.datos tr:last-child th,table.datos tr:last-child td{border-bottom:0}
table.datos .destacado{background:var(--line-soft)}
/* --- 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(--surface);border:1px solid var(--line);border-radius:var(--r-md);
    padding:6px 0 4px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
  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(--line)}
  table.datos td{padding:11px 18px;border-bottom:1px dotted var(--line)}
  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(--muted-aa);margin-bottom:4px}
  table.datos td[data-col=""]::before{display:none}
}

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

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.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(--text)}
.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(--accent);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(--text-2)}

/* ---------- formulario ---------- */
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(22px,3.2vw,34px);box-shadow:var(--shadow-sm)}
.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(--text);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(--text);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);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(--accent);outline:none;
  box-shadow:0 0 0 3px rgba(47,93,138,.16)}
.form .campo-f{margin-bottom:16px}
.form .consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted-aa);
  line-height:1.5;margin:18px 0 0}
.form .consent input{margin-top:3px;flex:none;accent-color:var(--accent);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(--muted-aa);margin:14px 0 0;text-align:center}
.msg{margin-top:16px;padding:13px 15px;border-radius:var(--r-md);font-size:14.5px;display:none}
.msg.ok{display:block;background:#eaf5ef;color:#14603c;border:1px solid #c2e0ce}
.msg.err{display:block;background:#fbeceb;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(--wa);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(11,122,75,.8);
  transition:transform .14s ease,background .16s ease}
.wa-flot:hover{text-decoration:none;transform:translateY(-2px);background:#09633D}
.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(--ink);color:var(--sobre-navy-2);padding:clamp(42px,5.5vw,68px) 0 28px;
  font-size:14.5px}
footer.pie a{color:var(--sobre-navy-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(--sobre-navy-2);font-size:14.5px}
.pie-legal{margin-top:16px;font-size:12.5px;color:var(--sobre-navy-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(--sobre-navy-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(--text-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(--accent);
  color:var(--text);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(--muted-aa);
  margin-top:16px;letter-spacing:.02em}
.post-meta .cat{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.12em}

/* tarjeta de artículo */
a.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);color:var(--text);
  transition:transform .14s ease,box-shadow .16s ease}
a.post-card:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--accent-mist);
  box-shadow:var(--shadow-md)}
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(--text-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(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:26px 0}
.caso-cifras > div{background:var(--surface);padding:20px}
.caso-cifras .n{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--navy);
  display:block;letter-spacing:-.015em}
.caso-cifras .k{font-size:12.5px;color:var(--text-2);margin-top:6px;display:block}

/* ---------- figuras ---------- */
figure{margin:0}
.foto{border-radius:var(--r-md);overflow:hidden;background:var(--line)}
.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(--muted-aa);margin-top:9px;line-height:1.5}
.band-dark .pie-foto,.band-hondo .pie-foto{color:var(--sobre-navy-2)}

/* ---------- migas ---------- */
.migas{font-size:12.5px;color:var(--muted-aa);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(--line)}
.migas li:last-child::after{content:""}
.migas a{color:var(--muted-aa)}
.migas [aria-current]{color:var(--text-2);font-weight:600}

/* ---------- iconos ---------- */
.ico{width:1.7em;height:1.7em;flex:none;color:var(--accent);vertical-align:middle}
.band-dark .ico,.band-hondo .ico,.band-acento .ico{color:var(--accent-pale)}
.band-acento .ico{color:#fff}
.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}
}


/* ==========================================================================
   GRUPO CANTERA — CAPA VISUAL DE LA RAMA DE PRUEBAS
   16-sep-2026

   Qué es esto
   -----------
   El sitio de Santiago (site.css) se queda completo y sin tocar. Este archivo
   va DESPUÉS y solo lo reviste: redefine sus tokens de :root y ajusta unos
   cuantos componentes para que el sitio se lea con la línea visual que ya
   traíamos del proyecto de diseño.

   Por qué así y no reemplazando su hoja
   -------------------------------------
   Su CSS está construido sobre variables (--navy, --page, --serif…) y usadas
   con disciplina en todo el archivo. Eso permite cambiar la piel completa
   desde veinte declaraciones en vez de reescribir 620 líneas. Y como no se
   borra nada suyo: el contenido, la retícula, el SEO, los componentes y su
   motor de apariciones (.reveal) siguen siendo los de él, y para volver atrás
   basta con borrar este archivo.

   Lo que NO se toca, nunca
   ------------------------
     · src/worker.js       — redirecciones, POST /api/lead, D1
     · site/assets/site.js — envío del formulario, calculadora, menús
     · site/assets/site.css — la hoja de Santiago
     · el texto de las páginas — ni una palabra
   ========================================================================== */


/* ==========================================================================
   1. TOKENS — aquí cambia el 80 % del aspecto
   ========================================================================== */
:root{
  /* --- Familia tipográfica ---------------------------------------------
     Montserrat en TODO. El sistema de Santiago usa --serif (Playfair) para
     titulares; aquí --serif apunta a la misma sans, así que los h1/h2 pasan
     a Montserrat sin tener que buscar cada regla. Playfair queda declarada
     en fuentes.css pero ninguna regla llega a pedirla: el navegador no
     descarga sus archivos. */
  --serif: var(--sans);

  /* --- Paleta ------------------------------------------------------------
     Verde petróleo #264653 como base dominante, que es el color
     institucional del manual, y una escala fría y clara alrededor. */
  --ink:#12292f;
  --navy:#264653;
  --navy-soft:#2f5460;
  --accent:#264653;   /* botones y acentos: el institucional */
  --accent-lt:#52777a;
  --accent-pale:#9dbab8;
  --accent-mist:#dce5e3;

  --page:#fafaf8;
  --surface:#ffffff;
  --surface-2:#edf2f1;
  --line:#dce5e3;
  --line-soft:#e8efed;

  --text:#193841;
  --text-2:#2c464e;      /* cuerpo */
  --muted:#60777d;
  --muted-aa:#55707a;    /* texto chico, mantiene contraste AA */
  --faint:#8ba0a4;

  --sobre-navy:#ffffff;
  --sobre-navy-2:#cbdbd9;
  --line-inv:rgba(255,255,255,.18);

  /* --- Forma ------------------------------------------------------------
     El rediseño es de esquinas discretas y sombras muy suaves: la jerarquía
     la carga la tipografía, no el relieve. */
  --r-sm:5px;
  --r-md:9px;
  --r-lg:12px;
  --shadow-sm:0 1px 2px #1937410a;
  --shadow-md:0 10px 30px -12px #19374126;
}

/* Los titulares del rediseño son apretados y de peso alto. */
h1,h2,h3{font-weight:700;letter-spacing:-.032em}
h1{line-height:1.04}
h2{line-height:1.07}
h1 em,h2 em{font-style:normal}

/* --- Antetítulos (.lectura: el filete + el texto chico en mayúsculas) -----
   Historia de esta regla, para que no se deshaga sin saber por qué:
   el 11-sep se pasaron de peso 600 a 400 porque se veían como negritas. Pero
   a 11 px, en mayúsculas y con .14em de espaciado, el peso 400 quedó tan
   tenue que dejó de leerse (18-sep). Se suben un nivel: 12.5 px y peso 500.

   El espaciado baja de .14em a .115em a propósito: al crecer la letra, ese
   espaciado tan abierto partía la línea en dos en las etiquetas largas
   ("OPERADOR GASTRONÓMICO · MÉXICO").

   Son 62 antetítulos en el sitio, así que el cambio se nota en todas las
   páginas. */
.lectura,.etiqueta,.rotulo{
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.115em;
}
/* El filete crece con el texto y se separa un poco más. */
.lectura::before{width:30px;height:2px}
.lectura{gap:11px}
/* En el sistema claro se oscurece un paso: a este tamaño aguanta más color
   sin gritar, y sube el contraste de 5.0 a 6.6 sobre la página. */
.lectura:not(.inv),.etiqueta:not(.inv){color:#41606b}


/* ==========================================================================
   2. EL HÉROE — la pieza que más define la primera impresión
   El sistema de Santiago lo trae claro; el nuestro es oscuro, a sangre, con
   la tarjeta de la calculadora recortada en blanco encima.
   ========================================================================== */
/* Fotografía de fondo con degradado encima. Es la pieza que más cambia la
   percepción del sitio: sin ella el héroe es un rectángulo de color y la
   operación no se ve por ningún lado.

   Van dos capas y no una imagen con el degradado "quemado" encima:
     ::before  la foto, en escala de grises parcial para que no pelee con la
               marca y para que el texto encima siempre sea legible
     ::after   el degradado, que oscurece más abajo y a la izquierda, que es
               justo donde cae el titular

   El degradado NO es decorativo: es lo que garantiza el contraste del texto
   sobre una foto que cambia de una página a otra. */
.hero{
  position:relative;
  background:var(--navy);
  color:var(--sobre-navy);
  border-bottom:0;
  isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--foto-hero,none);
  background-size:cover;background-position:center;
  filter:grayscale(.28) saturate(.92);
  opacity:.5;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,#264653f2 0%,#264653d6 42%,#26465366 100%),
    linear-gradient(to top,#1b3640e6 0%,transparent 55%);
}
.hero > *{position:relative;z-index:2}
/* Sin --foto-hero declarada, background-image queda en `none` y el héroe se
   queda en color plano. No hace falta apagar nada. */

/* --- La foto de cada página ------------------------------------------------
   Se elige desde el <body>, que ya trae data-pagina y data-servicio, así que
   la imagen se asigna sin tocar una sola línea del HTML de Santiago.

   Cada página declara DOS fotos: la grande y una de 800 px. El teléfono baja
   la chica —hasta seis veces menos peso— y la pantalla grande baja la de
   1800. Sin esto, un celular con red lenta descargaba 180 KB para pintar un
   bloque de 375 px de ancho.

   Las de 1800 px se usan a partir de 821 px de ancho: a esa escala la imagen
   nunca se estira más allá de su tamaño real, que es lo que produce el efecto
   pixeleado.                                                                */
body[data-pagina="index"]        .hero{--foto-hero:url(/assets/img/servicio-evento-buffet-1800.webp);--foto-hero-sm:url(/assets/img/servicio-evento-buffet-800.webp)}
body[data-servicio="comedores"]  .hero{--foto-hero:url(/assets/img/oficina-estacion-fruta-1800.webp);--foto-hero-sm:url(/assets/img/oficina-estacion-fruta-800.webp)}
body[data-servicio="cafeterias"] .hero{--foto-hero:url(/assets/img/montaje-mesas-madera-1800.webp);--foto-hero-sm:url(/assets/img/montaje-mesas-madera-800.webp)}
body[data-servicio="catering"]   .hero{--foto-hero:url(/assets/img/canapes-charolas-evento-1800.webp);--foto-hero-sm:url(/assets/img/canapes-charolas-evento-800.webp)}
body[data-servicio="cafe"]       .hero{--foto-hero:url(/assets/img/oficina-barra-cafe-1800.webp);--foto-hero-sm:url(/assets/img/oficina-barra-cafe-800.webp)}
body[data-pagina="casos"]        .hero{--foto-hero:url(/assets/img/montaje-comedor-largo-1800.webp);--foto-hero-sm:url(/assets/img/montaje-comedor-largo-800.webp)}
body[data-pagina="metodologia"]  .hero{--foto-hero:url(/assets/img/servicio-emplatado-manos-1800.webp);--foto-hero-sm:url(/assets/img/servicio-emplatado-manos-800.webp)}
body[data-pagina="nosotros"]     .hero{--foto-hero:url(/assets/img/servicio-mesa-atencion-1800.webp);--foto-hero-sm:url(/assets/img/servicio-mesa-atencion-800.webp)}
body[data-pagina="contacto"]     .hero{--foto-hero:url(/assets/img/montaje-mesa-flores-1800.webp);--foto-hero-sm:url(/assets/img/montaje-mesa-flores-800.webp)}
body[data-pagina="blog"]         .hero{--foto-hero:url(/assets/img/plato-tarta-frutos-1200.webp);--foto-hero-sm:url(/assets/img/plato-tarta-frutos-800.webp)}
body[data-pagina="el-caso-de-negocio"] .hero{--foto-hero:url(/assets/img/oficina-sala-juntas-1800.webp);--foto-hero-sm:url(/assets/img/oficina-sala-juntas-800.webp)}
.hero h1{color:#fff}
.hero .lede{color:var(--sobre-navy-2)}
.hero .micro{color:#ffffffa6}
.hero .lectura.inv{color:#c4d8d5}
.hero .lectura.inv::before{background:var(--accent-pale)}

/* La calculadora es una tarjeta BLANCA dentro del héroe oscuro. La regla de
   arriba le ganaba por especificidad a la de Santiago y le aclaraba el rótulo
   "CALCULADORA DE OPERACIÓN" hasta 2.07:1 sobre blanco, o sea ilegible. Aquí
   se le devuelve su color: dentro de la tarjeta manda el sistema claro. */
.hero .calc .lectura.inv{color:var(--muted-aa)}
.hero .calc .lectura.inv::before{background:var(--accent)}
/* Misma razón: la nota al pie de la calculadora ("Cálculo sobre 4.33 semanas")
   estaba quedando en blanco sobre la tarjeta blanca, 1.13:1. */
.hero .calc .micro{color:var(--muted-aa)}

/* El <em> del titular lleva un subrayado grueso (box-shadow interior) que en
   el sistema claro iba en tono pálido. Sobre el fondo oscuro ese tono queda
   con 1.24:1 de contraste, o sea invisible: la frase "no debería operar"
   desaparecía. Aquí el texto va en blanco y el subrayado en el verde claro,
   que es justo al revés. */
.hero h1 em{color:#fff;box-shadow:inset 0 -.14em 0 #52777acc}

/* --- Las señales (las pastillas redondeadas bajo el párrafo) --------------
   Se ocultan a la vista por decisión de Alan: ensuciaban el héroe.

   Se ocultan, NO se borran del HTML, y la diferencia importa: siguen en el
   documento para los lectores de pantalla y para los buscadores, que es a lo
   que servían ("Personal contratado y capacitado por Cantera", "Control
   sanitario documentado"…). Si se borraran del HTML se perdería ese texto.

   Por eso no se usa `display:none`, que sí las saca del árbol de
   accesibilidad, sino la técnica de ocultar visualmente conservando el
   contenido. */
.hero .senales{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Botones del héroe sobre fondo oscuro. */
.hero .btn--sec{background:#fff;color:var(--navy);border-color:#fff}
.hero .btn--sec:hover{background:var(--surface-2);color:var(--ink)}
.hero .btn--linea{color:#fff;border-color:#ffffff59;background:transparent}
.hero .btn--linea:hover{background:#ffffff1a;border-color:#fff}

/* El filete bajo el héroe sobra cuando el héroe ya es un bloque de color. */
.hero + .filete{display:none}


/* ==========================================================================
   3. COMPONENTES
   ========================================================================== */

/* --- Tarjetas: filete fino, esquina discreta, elevación al pasar ---------- */
.card{
  border-radius:var(--r-md);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
a.card:hover,.card a:hover{text-decoration:none}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent-mist)}

/* --- Botones ------------------------------------------------------------- */
.btn{
  border-radius:var(--r-sm);
  font-weight:600;
  transition:background-color .22s ease,color .22s ease,border-color .22s ease,
             transform .16s ease,box-shadow .22s ease;
}
.btn:active{transform:translateY(1px)}
.btn--pri,.btn--sec{box-shadow:none}
.btn--pri:hover,.btn--sec:hover{box-shadow:0 8px 20px -8px #19374166}

/* --- Bandas -------------------------------------------------------------- */
.band-arena{background:var(--surface)}
.band-gris{background:var(--surface-2)}
.band-dark{background:var(--navy)}
/* La banda oscura del rediseño no lleva tarjetas con caja, lleva filetes. */
.band-dark .card{background:#ffffff0f;border-color:var(--line-inv)}

/* --- Enlaces de texto ---------------------------------------------------- */
a{transition:color .2s ease}
.mas{transition:transform .22s ease,color .22s ease}
.mas:hover{transform:translateX(3px)}

/* --- Preguntas frecuentes ------------------------------------------------ */
details summary{transition:color .2s ease}
details summary:hover{color:var(--navy)}

/* --- Fotos: respiran al pasar el cursor ---------------------------------- */
.foto{overflow:hidden;border-radius:var(--r-md)}
.foto img{transition:transform .5s cubic-bezier(.22,.61,.36,1);display:block}
a:hover > .foto img,.card:hover .foto img{transform:scale(1.04)}

/* --- Encabezado ---------------------------------------------------------- */
.top{background:#fffffff0}

/* --- La franja de tres fotos de la portada -------------------------------
   Decisión de Alan (18-sep): las imágenes van en las carátulas y donde
   acompañen un texto, no en tiras de tres al cierre de la página. Esa franja
   mostraba tres cosas sin relación entre sí y se leía como relleno.

   Se OCULTA, no se borra: la sección, sus tres figuras y su pie de foto son
   contenido de Santiago y siguen intactos en site/pages/index.html. Para
   devolverla basta con borrar esta regla.

   El selector se cuelga de .pie-foto porque es único en todo el sitio —una
   sola aparición, justo en esa sección—, así que no hay riesgo de apagar
   otro bloque por accidente. */
.band:has(> .wrap > .pie-foto){display:none}


/* ==========================================================================
   4. BLOQUES NUEVOS — los dos que pidió Alan
   El marcado vive en site/pages/index.html y usa el vocabulario de Santiago
   (band, wrap, sec-head, lectura) para que herede todo lo suyo.
   ========================================================================== */

/* --- 4.1 Cifras de impacto ---------------------------------------------- */
.cifras-impacto{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,3vw,40px);
}
.cifras-impacto > div{text-align:center}
.cifras-impacto strong{
  display:block;font-size:clamp(30px,4.4vw,50px);line-height:1;
  letter-spacing:-.04em;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;
}
.cifras-impacto span{
  display:block;margin-top:10px;font-size:12.5px;line-height:1.45;
  color:var(--sobre-navy-2);
}
@media(max-width:820px){ .cifras-impacto{grid-template-columns:1fr 1fr;gap:26px 18px} }

/* --- 4.2 Escaparate de marcas -------------------------------------------
   Wing It NO aparece: no se endosa a Grupo Cantera (manual de marca). */
.marcas-tabs{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;
  gap:10px 30px;margin:0 0 34px;padding:0;
}
/* Las pestañas son botones de verdad, no logotipos sueltos: caja con filete,
   fondo translúcido y un estado activo claro. Antes iban con opacity .55 y
   sin caja, así que no se leían como algo que se puede picar —que es justo lo
   que Alan reportó— y el nombre bajo el logotipo repetía lo que el propio
   logotipo ya dice. El nombre sigue en el HTML, oculto para lectores de
   pantalla, y el logotipo lleva su texto alternativo. */
.marcas-tabs button{
  flex:0 0 auto;min-width:168px;padding:20px 22px;
  background:#ffffff0f;border:1px solid var(--line-inv);border-radius:var(--r-md);
  color:inherit;cursor:pointer;opacity:.72;
  transition:opacity .22s ease,background-color .22s ease,border-color .22s ease,
             transform .22s ease,box-shadow .22s ease;
}
.marcas-tabs button:hover{opacity:1;background:#ffffff1c;transform:translateY(-3px)}

/* El estado activo NO puede ser fondo blanco: los cuatro logotipos son la
   versión blanca de cada marca (luminosidad media 254/255, comprobado), así
   que sobre blanco desaparecían y la pestaña activa quedaba como un recuadro
   vacío. Se marca con fondo translúcido más claro, filete blanco y una barra
   inferior, que se lee igual de bien sin tocar los logotipos. */
.marcas-tabs button[aria-selected="true"]{
  opacity:1;background:#ffffff26;border-color:#ffffffa6;
  box-shadow:0 10px 26px -14px #00000059, inset 0 -3px 0 0 #fff;
}
.marcas-tabs img{
  display:block;width:100%;max-width:190px;height:58px;
  object-fit:contain;margin-inline:auto;
}

.marca-ficha{
  display:grid;grid-template-columns:.9fr 1.1fr;
  max-width:880px;margin-inline:auto;
  background:var(--surface);color:var(--text);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 22px 60px -24px #0b2f3b80;
}
.marca-foto{min-height:270px;background-size:cover;background-position:center}
.marca-texto{padding:32px;display:flex;flex-direction:column;justify-content:center}
/* La ficha es una tarjeta BLANCA dentro de una banda oscura, así que hay que
   devolverle los colores del sistema claro: si no, las reglas .band-dark h3 /
   .band-dark p pintan el texto de blanco sobre blanco (contraste 1:1). */
.marca-num{font-size:10px;letter-spacing:.16em;color:var(--muted-aa)}
.marca-texto h3{margin:12px 0 10px;font-size:clamp(21px,2.5vw,30px);color:var(--text)}
.marca-texto p{color:var(--text-2);margin-bottom:18px}
.marca-texto .mas{color:var(--navy)}
@media(max-width:820px){
  .marca-ficha{grid-template-columns:1fr}
  .marca-foto{min-height:200px}
  .marca-texto{padding:24px}
  .marcas-tabs{gap:10px}
  .marcas-tabs button{min-width:0;flex:1 1 calc(50% - 10px);padding:15px 12px}
  .marcas-tabs img{height:42px;max-width:120px}
}


/* ==========================================================================
   5. MOVIMIENTO
   Santiago ya tiene su motor de apariciones (.reveal → .vis, 65 usos en las
   páginas, manejado por site.js). No se duplica: se le afina la curva y se
   escalona dentro de las rejas para que no entren los cuatro bloques a la vez.
   ========================================================================== */
.reveal{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1)}
.grid > .reveal:nth-child(2),.cifras-impacto > .reveal:nth-child(2){transition-delay:.07s}
.grid > .reveal:nth-child(3),.cifras-impacto > .reveal:nth-child(3){transition-delay:.14s}
.grid > .reveal:nth-child(4),.cifras-impacto > .reveal:nth-child(4){transition-delay:.21s}

/* Foco visible con teclado. :where() aporta cero especificidad, así que no le
   gana a ninguna regla de Santiago; solo aparece al navegar con teclado. */
:where(a,button,summary,input,select,textarea,[role=tab],[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;
}
:where(.hero,.band-dark,.pie) :where(a,button,summary,[role=tab]):focus-visible{outline-color:#fff}

/* Anclas: el encabezado es pegajoso; sin esto el título aterriza debajo de él
   y parece que la página abrió en el lugar equivocado. */
[id]{scroll-margin-top:92px}
@media(max-width:820px){[id]{scroll-margin-top:84px}}

::selection{background:#26465326;color:var(--ink)}
.hero ::selection,.band-dark ::selection,.pie ::selection{background:#ffffff33;color:#fff}


/* ==========================================================================
   6. TELÉFONO — objetivos táctiles
   El sistema está medido en píxeles finos y con el dedo se falla. 44 px es el
   mínimo que recomiendan Apple y Google. No es un capricho: cada toque que
   falla en el formulario es un prospecto que se pierde.
   ========================================================================== */
@media(max-width:820px){
  /* Safari en iOS hace zoom al enfocar un campo de menos de 16 px, y ese zoom
     deja la página descuadrada. Los 16 px son el umbral exacto. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,textarea{font-size:16px;min-height:48px}
  textarea{min-height:120px}
  input[type=checkbox]{width:22px;height:22px}
  .btn{min-height:48px;padding-inline:20px}
  .chip{min-height:46px;font-size:13px;padding:11px 15px}
  .pie a,.migas a{display:inline-block;padding-block:6px}

  /* El botón de menú de Santiago se llama .burger y medía 34 px: es el
     control más importante del sitio en teléfono. */
  .burger{min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center}

  /* --- El héroe en teléfono --------------------------------------------
     Con la foto de fondo el bloque necesita más aire abajo o el texto queda
     pegado al borde, y la foto se ve mejor encuadrada un poco más arriba
     (donde suele estar la acción, no el mantel). */
  .hero{padding-block:clamp(44px,11vw,72px) clamp(40px,10vw,64px)}
  .hero::before{background-position:center 38%}
  /* En vertical el degradado se ordena de arriba abajo: deja ver la foto en
     la franja superior, donde no cae texto, y se cierra justo donde empieza
     el titular. Un degradado parejo y opaco tapaba la foto por completo y el
     héroe volvía a ser un rectángulo de color. */
  .hero::after{background:linear-gradient(180deg,#2646538c 0%,#264653e0 26%,#264653f2 62%,#1b3640f7 100%)}
  /* En teléfono se baja la foto de 800 px, no la de 1800: el archivo pesa
     hasta seis veces menos y a 375 px de ancho no se nota la diferencia. */
  .hero::before{opacity:.62;background-image:var(--foto-hero-sm,var(--foto-hero,none))}
  .hero-in{gap:30px}

  /* Las franjas de fotos: una sola columna, sin recortes raros. */
  .franja-fotos .grid{gap:14px}
  .franja-fotos .foto img{width:100%;height:auto}
}

/* El deslizador de la calculadora: con 16 px de alto no se puede arrastrar
   con el pulgar. Pista visible y pulgar grande, con 44 px de área de toque. */
input[type=range]{
  -webkit-appearance:none;appearance:none;height:44px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-11px;
  border-radius:50%;background:var(--navy);border:3px solid #fff;box-shadow:0 2px 7px #19374140;
}
input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--line)}
input[type=range]::-moz-range-thumb{
  width:28px;height:28px;border:3px solid #fff;border-radius:50%;
  background:var(--navy);box-shadow:0 2px 7px #19374140;
}


/* ==========================================================================
   7. IMPRESIÓN Y ACCESIBILIDAD
   ========================================================================== */
@media print{
  *,*::before,*::after{
    animation:none!important;transition:none!important;
    opacity:1!important;transform:none!important;box-shadow:none!important;
  }
  .reveal{opacity:1!important;transform:none!important}
  .top{position:static}
  .wa-flot,.burger,nav.main{display:none!important}
  .hero{background:#fff!important;color:#000!important}
  .hero h1,.hero .lede{color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important}
  a.card:hover,.btn:active,.mas:hover,.marcas-tabs button:hover{transform:none}
  a:hover > .foto img,.card:hover .foto img{transform:none}
}


/* ==========================================================================
   GRUPO CANTERA — CAPA VISUAL V2
   9-oct-2026

   Va DESPUÉS de site.css y ajustes.css. No cambia textos, ni formulario, ni
   lógica: solo cómo se ve. Para volver a la v1 basta con borrar este archivo.

   Dirección: más editorial y con más fotografía. La operación tiene que verse
   (espacios, montajes, equipo), no solo leerse. Misma marca: Montserrat,
   verde petróleo #264653, una sola familia de grises fríos.
   ========================================================================== */

:root{
  --ink:#0f2329;
  --navy:#264653;
  --navy-deep:#1a333c;
  --page:#f7f8f6;
  --shadow-md:0 18px 40px -22px #1a333c4d;
  --shadow-lg:0 30px 70px -30px #0b2f3b8c;
  --r-md:10px;
  --r-lg:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --- Tipografía: titulares con más presencia ------------------------------ */
h1{font-size:clamp(38px,5.6vw,74px);line-height:1.02;letter-spacing:-.04em}
h2{font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.035em;text-wrap:balance}
h3{letter-spacing:-.02em}
p{text-wrap:pretty}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.6;max-width:60ch}
.band{padding:clamp(64px,9vw,128px) 0}
.band--tight{padding:clamp(48px,6vw,84px) 0}
.sec-head{margin-bottom:clamp(36px,4.5vw,60px)}


/* --- Encabezado: vidrio esmerilado ---------------------------------------- */
.top{background:#f7f8f6cc;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid #26465314}

/* ==========================================================================
   HÉROE — más alto, foto más presente, titular grande
   ========================================================================== */
.hero{padding-block:clamp(88px,12vw,150px) clamp(80px,10vw,130px)}
body[data-pagina="index"] .hero{min-height:min(92dvh,900px);display:flex;align-items:center}
body[data-pagina="index"] .hero > .wrap{width:100%}
.hero::before{opacity:.72;filter:grayscale(.15) saturate(.95) contrast(1.05);transform:scale(1.04);animation:v2-respira 18s var(--ease) forwards}
.hero::after{
  background:
    radial-gradient(120% 90% at 0% 100%,#1a333cf5 0%,#1a333cc7 38%,transparent 70%),
    linear-gradient(100deg,#264653e6 0%,#264653b3 40%,#26465333 100%);
}
@keyframes v2-respira{to{transform:scale(1)}}
.hero .lede{color:#e3ecea}
.hero .calc{border-radius:var(--r-lg);box-shadow:var(--shadow-lg);border:0}

/* ==========================================================================
   CIFRAS — números grandes separados por filetes
   ========================================================================== */
.cifras-impacto{gap:0}
.cifras-impacto > div{padding:8px clamp(10px,2vw,28px);border-left:1px solid #ffffff24}
.cifras-impacto > div:first-child{border-left:0}
.cifras-impacto strong{font-size:clamp(36px,5vw,64px);font-weight:600}
.cifras-impacto span{font-size:13px;letter-spacing:.02em}
@media(max-width:820px){
  .cifras-impacto{gap:30px 0}
  .cifras-impacto > div:nth-child(3){border-left:0}
}

/* ==========================================================================
   SERVICIOS — tarjetas con fotografía
   La foto se asigna por el destino del enlace: no se toca el HTML.
   ========================================================================== */
a.svc{
  --svc-foto:none;
  padding:0 0 clamp(22px,2.4vw,28px);overflow:hidden;border-radius:var(--r-lg);
  border-color:#26465314;box-shadow:0 1px 2px #1a333c0d;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s ease;
}
a.svc::after{
  content:"";display:block;order:-1;aspect-ratio:16/10;margin-bottom:6px;
  background:linear-gradient(to top,#0f2329e6 0%,#0f232900 60%),var(--svc-foto) center/cover no-repeat,var(--surface-2);
  transition:transform .8s var(--ease);
}
a.svc > *:not(.ico){padding-inline:clamp(22px,2.4vw,28px)}
a.svc > svg,a.svc > .ico{margin:18px clamp(22px,2.4vw,28px) 0}
a.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
a.svc:hover::after{transform:scale(1.05)}
a.svc::before{z-index:2}
a.svc[href="/cafeterias-y-restaurantes"]{--svc-foto:url(/assets/img/espacio-comedor-interior.webp)}
a.svc[href="/comedores-corporativos"]{--svc-foto:url(/assets/img/oficina-estacion-fruta-800.webp)}
a.svc[href="/catering"]{--svc-foto:url(/assets/img/montaje-mesa-flores-800.webp)}
a.svc[href="/cafe-para-oficinas"]{--svc-foto:url(/assets/img/oficina-barra-cafe-800.webp)}

/* ==========================================================================
   QUIÉNES SOMOS — foto grande que acompaña el texto
   ========================================================================== */
.v2-foto{margin:clamp(28px,3vw,40px) 0 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.v2-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.split .card{border:0;background:var(--page);border-radius:var(--r-md);padding:clamp(20px,2.2vw,26px)}
.band-arena .split .card{background:var(--surface-2)}

/* ==========================================================================
   METODOLOGÍA — números de etapa grandes, en contorno
   ========================================================================== */
.paso{padding-top:28px;border-top:1px solid var(--line)}
.paso::before{
  content:"";position:absolute;top:-1px;left:0;width:56px;height:3px;background:var(--navy);
  transition:width .6s var(--ease);
}
.paso:hover::before{width:100%}
.paso .n{font-size:12px;letter-spacing:.16em}

/* ==========================================================================
   CASO DE NEGOCIO — cifras como protagonistas
   ========================================================================== */
.datos-duros{border-radius:var(--r-lg);overflow:hidden}
.dato-n{font-size:clamp(42px,4.4vw,62px)!important;font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--navy)}

/* ==========================================================================
   BANDAS OSCURAS CON FOTO
   "La escala no cambia el estándar" y la llamada final llevan fotografía
   de fondo, con el mismo tratamiento que el héroe.
   ========================================================================== */
.band-dark:has(a[href="/casos"]),
.band-dark:has(.cifras-impacto){position:relative;isolation:isolate;overflow:hidden}
.band-dark:has(a[href="/casos"])::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url(/assets/img/montaje-comedor-largo-1800.webp) center/cover;
  filter:grayscale(.3);opacity:.5;
}
.band-dark:has(a[href="/casos"])::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#1a333cf7 0%,#1a333cd9 50%,#1a333c99 100%);
}
.band-dark .card{background:#1a333cb3;border-radius:var(--r-md)}
.band-dark:has(.cifras-impacto){background:var(--navy-deep)}

/* --- Marcas: ficha más amplia ---------------------------------------------- */
.marca-ficha{max-width:1000px;border-radius:var(--r-lg)}
.marca-foto{min-height:340px;transition:background-image .4s ease}

/* --- Botones ----------------------------------------------------------------*/
.btn{border-radius:8px;letter-spacing:.005em;padding-block:14px}
.btn--pri{background:var(--navy)}
.btn--pri:hover{background:var(--navy-deep)}

/* --- Preguntas frecuentes --------------------------------------------------- */
details{border-radius:var(--r-md)}

/* --- Entradas escalonadas un poco más largas ------------------------------- */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}

@media(max-width:820px){
  h1{font-size:clamp(34px,9.4vw,44px)}
  body[data-pagina="index"] .hero{min-height:0}
  .marca-foto{min-height:220px}
}
@media(prefers-reduced-motion:reduce){
  .hero::before{animation:none;transform:none}
  a.svc:hover,a.svc:hover::after{transform:none}
}

/* ==========================================================================
   FOTOGRAFÍA DE LA GALERÍA (Redes Cantera, fotos reales, sin platillos)
   Originales en fotos-galeria/; versiones web en site/assets/img/g/.
   ========================================================================== */
body[data-pagina="index"]        .hero{--foto-hero:url(/assets/img/g/salon-largo-madera.webp);--foto-hero-sm:url(/assets/img/g/salon-largo-madera-700.webp)}
body[data-servicio="catering"]   .hero{--foto-hero:url(/assets/img/g/mesa-blanca-flores.webp);--foto-hero-sm:url(/assets/img/g/mesa-blanca-flores-700.webp)}
body[data-servicio="cafe"]       .hero{--foto-hero:url(/assets/img/g/tazea-oficina.webp);--foto-hero-sm:url(/assets/img/g/tazea-oficina-700.webp)}
body[data-servicio="comedores"]  .hero{--foto-hero:url(/assets/img/g/buffet-corporativo.webp);--foto-hero-sm:url(/assets/img/g/buffet-corporativo-700.webp)}
body[data-pagina="casos"]        .hero{--foto-hero:url(/assets/img/g/mesa-blanca-ventanal.webp);--foto-hero-sm:url(/assets/img/g/mesa-blanca-ventanal-700.webp)}
body[data-pagina="nosotros"]     .hero{--foto-hero:url(/assets/img/g/equipo-barra.webp);--foto-hero-sm:url(/assets/img/g/equipo-barra-700.webp)}
body[data-pagina="contacto"]     .hero{--foto-hero:url(/assets/img/g/mesa-imperial.webp);--foto-hero-sm:url(/assets/img/g/mesa-imperial-700.webp)}
body[data-pagina="metodologia"]  .hero{--foto-hero:url(/assets/img/g/coffee-break-sala.webp);--foto-hero-sm:url(/assets/img/g/coffee-break-sala-700.webp)}
body[data-pagina="el-caso-de-negocio"] .hero{--foto-hero:url(/assets/img/g/desayuno-sala-juntas.webp);--foto-hero-sm:url(/assets/img/g/desayuno-sala-juntas-700.webp)}
body[data-pagina="blog"]         .hero{--foto-hero:url(/assets/img/g/mesa-imperial.webp);--foto-hero-sm:url(/assets/img/g/mesa-imperial-700.webp)}
.hero::before{background-position:center 45%}

a.svc[href="/comedores-corporativos"]{--svc-foto:url(/assets/img/brand-comedores-900.webp)}
a.svc[href="/catering"]{--svc-foto:url(/assets/img/g/mesa-blanca-flores-700.webp)}
a.svc[href="/cafe-para-oficinas"]{--svc-foto:url(/assets/img/g/barra-cafe-oficina-700.webp)}
a.svc[href="/cafeterias-y-restaurantes"]{--svc-foto:url(/assets/img/g/restaurante-lamparas-700.webp)}
.band-dark:has(a[href="/casos"])::before{background-image:url(/assets/img/g/salon-largo-madera.webp)}
.dato-n{white-space:nowrap}

/* Campo trampa antispam del formulario: fuera de la vista, no se borra. */
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   FOTOGRAFÍA — UNA FOTO, UN LUGAR (10-oct)
   Cada foto sale una sola vez, salvo la tarjeta de un servicio y su propia
   página, que comparten foto a propósito. Las "-hd" son fotos chicas de
   origen escaladas al doble con filtro Lanczos y enfoque (no hay original
   más grande). Si se agrega una foto nueva, revisar esta lista para no repetir.
   ========================================================================== */
body[data-pagina="index"]        .hero{--foto-hero:url(/assets/img/g/comedor-salon.webp)}
body[data-servicio="comedores"]  .hero{--foto-hero:url(/assets/img/g/comedores-linea-hd.webp)}
body[data-servicio="cafeterias"] .hero{--foto-hero:url(/assets/img/g/comedor-pantallas-hd.webp);--foco:center 68%}
body[data-servicio="catering"]   .hero{--foto-hero:url(/assets/img/g/salon-largo-madera.webp);--foco:center 60%}
body[data-servicio="cafe"]       .hero{--foto-hero:url(/assets/img/g/tazea-oficina.webp);--foco:75% center}
body[data-pagina="casos"]        .hero{--foto-hero:url(/assets/img/g/salon-blanco-eventos.webp)}
body[data-pagina="nosotros"]     .hero{--foto-hero:url(/assets/img/g/equipo-barra.webp);--foco:center 80%}
body[data-pagina="metodologia"]  .hero{--foto-hero:url(/assets/img/montaje-comedor-largo-1800.webp)}
body[data-pagina="contacto"]     .hero{--foto-hero:url(/assets/img/montaje-mesa-flores-1800.webp)}
body[data-pagina="el-caso-de-negocio"] .hero{--foto-hero:url(/assets/img/g/desayuno-sala-juntas.webp)}
body[data-pagina="blog"]         .hero{--foto-hero:url(/assets/img/g/mesa-imperial.webp)}

/* Tarjetas: versiones de 1400 px. En un teléfono la tarjeta mide ~340 px
   y la pantalla tiene 3 píxeles por punto: la de 700 se veía borrosa. */
a.svc[href="/cafeterias-y-restaurantes"]{--svc-foto:url(/assets/img/g/comedor-pantallas-hd.webp)}
a.svc[href="/comedores-corporativos"]{--svc-foto:url(/assets/img/g/comedores-linea-hd.webp)}
a.svc[href="/catering"]{--svc-foto:url(/assets/img/g/mesa-blanca-flores.webp)}
a.svc[href="/cafe-para-oficinas"]{--svc-foto:url(/assets/img/g/tazea-sala.webp)}
.band-dark:has(a[href="/casos"])::before{background-image:url(/assets/img/g/terraza-arbolada.webp)}

/* ==========================================================================
   SERVICIOS + MARCAS EN UNA SOLA SECCIÓN
   El logotipo de cada marca va sobre la foto de su servicio, con un
   degradado abajo para que el logotipo blanco siempre se lea.
   ========================================================================== */
a.svc{position:relative}
.svc-marca{
  position:absolute;top:0;left:0;right:0;aspect-ratio:16/10;z-index:1;
  display:flex;align-items:flex-end;padding:16px clamp(18px,2vw,24px);
  pointer-events:none;
}
.svc-marca img{height:46px;width:auto;max-width:170px;filter:drop-shadow(0 1px 6px #0006);object-fit:contain;object-position:left bottom}

/* ==========================================================================
   FUENTES: se consultan en /fuentes, no dentro de las páginas.
   Se ocultan a la vista pero siguen en el HTML (no se pierde el respaldo).
   ========================================================================== */
.dato-f{display:none}


/* El logotipo acompaña a la foto: al pasar el cursor la foto crece 5 % desde
   el centro, así que el logotipo se mueve lo mismo y no se despega. */
.svc-marca{transition:transform .8s var(--ease)}

/* ==========================================================================
   TELÉFONO — LA FOTO ARRIBA Y DESPEJADA
   En pantalla angosta el texto ocupaba todo el héroe y tapaba la foto: se
   veía un rectángulo oscuro con manchas. Aquí la foto va en una franja
   superior sin texto encima, en su versión grande (nítida en pantallas de
   3x), y se funde con el verde petróleo justo donde empieza el titular.
   La misma idea en la banda "La escala no cambia el estándar".
   ========================================================================== */
@media(max-width:820px){
  .hero{padding-top:calc(min(64vw,420px) + 8px)}
  .hero::before{
    inset:0 0 auto 0;height:min(64vw,420px);
    opacity:1;filter:none;transform:none;animation:none;
    background-image:var(--foto-hero,none);background-position:var(--foco,center);
  }
  .hero::after{
    background:linear-gradient(180deg,#26465300 0,#26465300 calc(min(64vw,420px) - 110px),#264653 min(64vw,420px),#264653 100%);
  }
  .band-dark:has(a[href="/casos"]){padding-top:calc(60vw + 28px)}
  .band-dark:has(a[href="/casos"])::before{inset:0 0 auto 0;height:60vw;opacity:1;filter:none}
  .band-dark:has(a[href="/casos"])::after{background:linear-gradient(180deg,#1a333c00 0,#1a333c00 calc(60vw - 100px),#1a333c 60vw,#1a333c 100%)}
  .v2-foto img{aspect-ratio:4/3}
}