/* ==========================================================================
   ingenieronavidad.com - hoja de estilo unica
   Identidad derivada de la escala ironbow de una camara termografica:
   negro -> violeta -> magenta -> rojo -> naranja -> amarillo -> blanco.
   Movil primero. Sin framework. Sin CDN. Sin dependencias externas.

   Para cambiar la paleta entera, toque solo el bloque 2 (Variables).
   Ver README, apartado "Como cambiar la paleta".
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fuentes autoalojadas (carpeta /fonts). Nada de Google Fonts.

   Archivo trae dos ejes: peso (600-900) y ancho (100-125%). El ancho es lo
   que da el aire industrial de los titulares; se pide con font-stretch.
   Source Sans 3 trae un solo eje de peso (300-800).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 600 900;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-var.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Variables. Cambiar un color aqui lo cambia en todo el sitio.
   -------------------------------------------------------------------------- */
:root {
  /* Fondos: negro con sesgo violeta, el extremo frio de la escala. */
  --fondo:        #0A0711;
  --fondo-2:      #130D1C;
  --superficie:   #1B1326;
  --linea:        #2C2038;
  --linea-viva:   #43304F;

  /* Texto */
  --texto:        #F4EEF7;
  --texto-2:      #B6A7C0;
  --texto-3:      #8A7B95;

  /* Acentos: el extremo caliente de la escala. */
  --brasa:        #E8590C;   /* acento principal (AA 5.6:1 sobre --fondo)   */
  --brasa-clara:  #FFA05C;   /* solo para hover de enlaces                  */
  --brasa-alta:   #F9C22E;   /* maxima temperatura, cifras y frases clave   */
  --brasa-tenue:  rgba(232, 89, 12, .14);
  --frio:         #5B4B8A;   /* extremo frio: SOLO grafico, no lleva texto  */
  --frio-texto:   #A99AD6;   /* la version legible del frio (AA 7.9:1)      */

  /* La escala completa. Se usa en barras, reglas y divisores. */
  --ironbow: linear-gradient(90deg,
    #0A0711 0%, #2B1B4D 13%, #5B4B8A 26%, #9B2C6F 43%,
    #D1345B 57%, #E8590C 72%, #F9C22E 87%, #FFF3C4 100%);

  /* Escala termica de prioridades del reporte (sustituye al semaforo). */
  --prio-urgente:   #FFD84D;   /* lo mas caliente */
  --prio-programar: #E8590C;   /* intermedio      */
  --prio-sano:      #5B4B8A;   /* frio            */

  /* Canal de WhatsApp. Oscurecido respecto al verde de marca para que el
     texto blanco encima llegue a AA (5.7:1). */
  --wa:       #0E6F64;
  --wa-hover: #0A554D;

  /* Tipografia */
  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --cuerpo:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Escala tipografica. El salto entre niveles es deliberadamente grande:
     el titular manda y el texto de apoyo se aparta. */
  --t-etq:   .75rem;                          /* etiquetas de instrumento  */
  --t-min:   .8125rem;
  --t-menor: .9375rem;
  --t-base:  1.0625rem;
  --t-mayor: 1.1875rem;
  --t-h3:    clamp(1.2rem,  2.6vw, 1.5rem);
  --t-h2:    clamp(2rem,    6.2vw, 3.4rem);
  --t-h1:    clamp(2.6rem,  9.2vw, 5.25rem);
  --t-cifra: clamp(3.2rem, 9.5vw, 7.5rem);    /* el bloque de la proporcion */

  /* Medidas. Radios de 2px o 0: nada de esquinas suaves genericas. */
  --ancho:   76rem;
  --radio:   2px;
}

/* --------------------------------------------------------------------------
   3. Reinicio minimo
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: var(--t-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Titulares: grotesco ancho y pesado. Industrial e institucional. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1.02;
  color: var(--texto);
  margin: 0 0 1rem;
  text-wrap: balance;
  letter-spacing: -.025em;
}
h1 { font-size: var(--t-h1); font-stretch: 122%; letter-spacing: -.032em; }
h2 { font-size: var(--t-h2); }
h3 {
  font-size: var(--t-h3); font-weight: 700; font-stretch: 106%;
  line-height: 1.15; letter-spacing: -.015em; margin-bottom: .5rem;
}
h4 { font-size: var(--t-mayor); font-weight: 700; font-stretch: 104%; }
p  { margin: 0 0 1.15rem; }

a { color: var(--brasa); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brasa-clara); }

:focus-visible {
  outline: 3px solid var(--brasa-alta);
  outline-offset: 2px;
  border-radius: 0;
}

ul, ol { margin: 0 0 1.15rem; padding-left: 1.25rem; }
li { margin-bottom: .5rem; }

strong { color: #fff; font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--linea); margin: 2.5rem 0; }

::selection { background: var(--brasa); color: var(--fondo); }

/* Solo para lectores de pantalla */
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Salto al contenido */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brasa); color: var(--fondo);
  font-family: var(--display); font-weight: 700;
  padding: .75rem 1.25rem;
}
.saltar:focus { left: 0; color: var(--fondo); }

/* --------------------------------------------------------------------------
   4. Contenedor, secciones y ritmo
   Las secciones NO miden todas lo mismo: unas van densas y otras casi
   vacias, para que el sitio no se lea como un acordeon de bloques iguales.
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 62rem) { .contenedor { padding-inline: 2.5rem; } }
.medida { max-width: 62ch; }

section { padding-block: 3.5rem; }
@media (min-width: 48rem) { section { padding-block: 5rem; } }

/* Ritmo: mucho aire alrededor de lo que tiene que respirar. */
.ritmo-amplio { padding-block: 5rem; }
@media (min-width: 48rem) { .ritmo-amplio { padding-block: 9rem; } }
/* Ritmo: seccion apretada, de tramite. */
.ritmo-denso { padding-block: 2.5rem; }
@media (min-width: 48rem) { .ritmo-denso { padding-block: 3.25rem; } }

/* Rompe la simetria: la columna de contenido se corre a la derecha. */
@media (min-width: 62rem) {
  .desplazado > .contenedor { padding-left: 10%; }
}

.franja-alterna { background: var(--fondo-2); }

/* Etiqueta de instrumento. Mayusculas, interletrado abierto, monoespaciada:
   se lee como la marca de un tablero, no como decoracion. */
.rotulo {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--mono);
  font-size: var(--t-etq);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brasa);
  margin: 0 0 1rem;
  line-height: 1.4;
}
.rotulo::before {
  content: ""; flex: none;
  width: 2.25rem; height: 3px;
  background: var(--ironbow);
  background-size: 200% 100%;
  background-position: 72% 0;
}

.entradilla {
  font-size: var(--t-mayor); color: var(--texto-2);
  line-height: 1.55;
}
@media (min-width: 48rem) { .entradilla { font-size: 1.3125rem; } }
.apoyo    { color: var(--texto-2); }
.pie-nota { font-size: var(--t-min); color: var(--texto-3); line-height: 1.5; }

/* --------------------------------------------------------------------------
   5. Botones. Ancho completo en movil, como pide el brief.
   El principal es brasa con texto casi negro: 5.6:1, y se lee a boton de
   equipo, no a boton de aplicacion web.
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: 1rem 1.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 105%;
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: -.005em;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .14s linear, border-color .14s linear, color .14s linear;
}
@media (min-width: 40rem) { .boton { width: auto; } }

.boton-principal { background: var(--brasa); color: var(--fondo); border-color: var(--brasa); }
.boton-principal:hover { background: var(--brasa-alta); border-color: var(--brasa-alta); color: var(--fondo); }

.boton-secundario {
  background: transparent;
  color: var(--texto);
  border-color: var(--linea-viva);
}
.boton-secundario:hover { border-color: var(--brasa); color: var(--brasa); }

.boton-whatsapp { background: var(--wa); color: #fff; border-color: var(--wa); }
.boton-whatsapp:hover { background: var(--wa-hover); border-color: var(--wa-hover); color: #fff; }

.boton-grupo { display: flex; flex-direction: column; gap: .75rem; margin-top: 2rem; }
@media (min-width: 40rem) { .boton-grupo { flex-direction: row; flex-wrap: wrap; } }

/* Enlace de cotizacion de una linea, para los servicios sin precio fijo. */
.enlace-cotizar {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: var(--t-min);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--brasa); text-decoration: none;
  border-bottom: 1px solid var(--brasa-tenue);
  padding-bottom: .15rem;
}
.enlace-cotizar::after { content: "\2192"; }
.enlace-cotizar:hover { color: var(--brasa-clara); border-bottom-color: currentColor; }

/* --------------------------------------------------------------------------
   6. Cabecera y navegacion
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 7, 17, .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
/* Filo de la escala termica bajo la cabecera. */
.cabecera::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--ironbow); opacity: .85;
}
.cabecera-fila {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; min-height: 4.25rem;
}
.marca {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: 1.0625rem;
  color: var(--texto); text-decoration: none; letter-spacing: -.02em;
}
.marca img { width: 32px; height: 32px; }
.marca span {
  color: var(--texto-3); font-family: var(--mono); font-weight: 500;
  font-size: var(--t-etq); letter-spacing: .1em; text-transform: uppercase;
  display: none;
}
@media (min-width: 62rem) { .marca span { display: inline; } }

.nav-boton {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 1px solid var(--linea-viva);
  color: var(--texto); font-family: var(--mono); font-weight: 500;
  font-size: var(--t-min); letter-spacing: .1em; text-transform: uppercase;
  padding: .6rem .85rem; border-radius: 0; cursor: pointer;
}
@media (min-width: 62rem) { .nav-boton { display: none; } }

.nav { width: 100%; padding-bottom: 1rem; }
@media (min-width: 62rem) { .nav { width: auto; padding-bottom: 0; } }

.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
@media (min-width: 62rem) {
  .nav ul { flex-direction: row; align-items: center; gap: 1.6rem; }
}
.nav li { margin: 0; }
.nav a {
  display: block; padding: .8rem .25rem;
  color: var(--texto-2); text-decoration: none;
  font-family: var(--display); font-weight: 700; font-stretch: 102%;
  font-size: .9375rem; letter-spacing: -.005em;
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 62rem) { .nav a { border-bottom: 0; padding: .3rem 0; } }
.nav a:hover { color: var(--texto); }
.nav a[aria-current="page"] { color: var(--texto); }
@media (min-width: 62rem) {
  .nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 0 var(--brasa); }
}
.nav .nav-cta {
  margin-top: .9rem; border-bottom: 0;
  background: var(--brasa); color: var(--fondo); text-align: center;
  padding: .85rem 1rem;
}
@media (min-width: 62rem) { .nav .nav-cta { margin-top: 0; padding: .6rem 1.1rem; } }
.nav .nav-cta:hover { background: var(--brasa-alta); color: var(--fondo); }
.nav .nav-cta[aria-current="page"] { box-shadow: none; }

/* Con JS: el menu arranca plegado en movil y el boton lo despliega.
   Sin JS: la clase .js nunca se aplica, el menu queda visible y el sitio
   sigue completo y usable. */
.js .nav { display: none; }
.js .nav.abierto { display: block; }
@media (min-width: 62rem) {
  .js .nav { display: block; }
}

/* --------------------------------------------------------------------------
   7. Barra fija de WhatsApp (visible desde el primer scroll, en movil)
   -------------------------------------------------------------------------- */
.barra-wa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));
  background: var(--wa); color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-stretch: 106%;
  border-top: 2px solid rgba(255, 255, 255, .2);
}
.barra-wa:hover { background: var(--wa-hover); color: #fff; }
.barra-wa small {
  display: block; font-family: var(--mono); font-weight: 500;
  font-size: var(--t-etq); letter-spacing: .05em; opacity: .92;
}
body { padding-bottom: 4.75rem; }
@media (min-width: 62rem) {
  .barra-wa { display: none; }
  body { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   8. Hero. Termografia real de fondo, muy oscurecida, con la escala de
      temperatura a un costado. El texto queda sobre la zona casi opaca.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: 3rem 3.5rem;
  background-color: var(--fondo);
  /* El velo deja pasar la termografia justo lo suficiente para que se
     reconozca, y nunca tanto como para bajar el contraste del texto: la
     zona mas clara queda en .94, verificada contra --texto-3 (4.55:1)
     sobre el pixel mas brillante que puede traer la imagen. */
  background-image:
    linear-gradient(170deg,
      rgba(10,7,17,.985) 0%, rgba(10,7,17,.955) 55%, rgba(10,7,17,.94) 100%),
    url("../img/termografia-tablero-electrico.webp");
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
}
@media (min-width: 62rem) { .hero { padding-block: 4rem 4.5rem; } }
/* Hero de paginas interiores: sin termografia de fondo, y con regla de cierre.
   La termografia se queda en la portada para que siga siendo un momento. */
.hero-simple {
  background-image: none;
  border-bottom: 1px solid var(--linea);
  padding-block: 2.75rem 3rem;
}
@media (min-width: 62rem) {
  .hero-simple { background-image: none; padding-block: 4.5rem 4rem; }
}

.hero-rejilla { display: grid; gap: 2.5rem; }
@media (min-width: 62rem) {
  .hero-rejilla { grid-template-columns: 1.35fr .65fr; align-items: end; gap: 3.5rem; }
}
.hero h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(2.4rem, 7.4vw, 4.25rem);
}
.hero h1 .destaca { color: var(--brasa-alta); }

/* Foto a sangre: sin marco y sin esquinas redondeadas. En pantalla ancha
   sale del contenedor y toca el borde derecho. */
.hero-foto { border: 0; border-radius: 0; width: 100%; }
/* A sangre tambien en movil: se come el relleno del contenedor. */
.hero-figura { margin: 0 -1.25rem; }
.hero-figura .hero-pie { padding-inline: 1.25rem; }
@media (min-width: 62rem) {
  /* Se come el relleno del contenedor y, si la ventana es mas ancha que
     --ancho, tambien el margen que queda a la derecha. */
  .hero-figura {
    margin-left: 0;
    margin-right: calc(-2.5rem - max(0px, (100vw - var(--ancho)) / 2));
  }
  .hero-figura .hero-pie { padding-inline: 0; }
}
.hero-pie {
  font-family: var(--mono); font-size: var(--t-etq); letter-spacing: .04em;
  color: var(--texto-2); margin-top: .7rem;
}

/* Etiqueta de identificacion, con un trozo de la escala en lugar de un punto. */
.sello {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--mono); font-size: var(--t-etq); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-2); background: var(--brasa-tenue);
  border: 1px solid var(--linea-viva);
  padding: .5rem .8rem; border-radius: 0; margin: 0 0 1.5rem;
  line-height: 1.35;
}
.sello::before {
  content: ""; width: 1.75rem; height: .5rem; flex: none;
  background: var(--ironbow);
}

.hero-imanes { margin-top: 1.75rem; font-size: var(--t-menor); color: var(--texto-2); }

/* Escala de temperatura del hero. Horizontal en movil, vertical en pantalla
   ancha. Sin numeros: el sitio no publica lecturas que no midio. */
.escala-termica {
  display: flex; align-items: center; gap: .75rem;
  margin-top: 2rem;
  font-family: var(--mono); font-size: var(--t-etq); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2);
}
.escala-rampa {
  flex: 1 1 auto; height: .75rem; min-width: 4rem;
  background: var(--ironbow);
  border: 1px solid var(--linea-viva);
  position: relative;
}
/* Marcas de division, como las de la barra de una camara termica. */
.escala-rampa::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(10,7,17,.55) 0 1px, transparent 1px 12.5%);
}
@media (min-width: 62rem) {
  /* Solo el hero de la portada reserva el canal de la escala termica. */
  .hero:not(.hero-simple) .hero-rejilla { position: relative; padding-left: 4.5rem; }
  .escala-termica {
    position: absolute; left: 0; top: 0; bottom: 0;
    flex-direction: column-reverse; margin: 0; gap: .85rem; z-index: 1;
  }
  .escala-rampa {
    width: .85rem; height: auto; min-width: 0; flex: 1 1 auto;
    background: linear-gradient(0deg,
      #0A0711 0%, #2B1B4D 13%, #5B4B8A 26%, #9B2C6F 43%,
      #D1345B 57%, #E8590C 72%, #F9C22E 87%, #FFF3C4 100%);
  }
  .escala-rampa::after {
    background: repeating-linear-gradient(0deg,
      rgba(10,7,17,.55) 0 1px, transparent 1px 12.5%);
  }
  .escala-etq { writing-mode: vertical-rl; text-orientation: mixed; }
}

/* --------------------------------------------------------------------------
   9. Divisor de P&ID. Trazo de instrumentacion entre secciones.
      El SVG va en linea en el HTML (funcion pid() de incluye/config.php).
   -------------------------------------------------------------------------- */
.divisor {
  display: flex; align-items: center; gap: 1rem;
  color: var(--linea-viva);
}
.divisor::before, .divisor::after {
  content: ""; height: 1px; background: var(--linea); flex: 1 1 auto;
}
.divisor svg { flex: none; overflow: visible; }
.divisor .pid-trazo { fill: none; stroke: var(--linea-viva); stroke-width: 1; }
.divisor .pid-simbolo { fill: none; stroke: var(--linea-viva); stroke-width: 1.25; }
.divisor .pid-lleno { fill: var(--linea-viva); stroke: none; }
.divisor .pid-tag {
  fill: var(--texto-3); font-family: var(--mono); font-size: 7.5px;
  font-weight: 500; letter-spacing: .06em; text-anchor: middle;
}
/* En el divisor caliente, el trazo toma temperatura. */
.divisor-brasa .pid-simbolo, .divisor-brasa .pid-trazo { stroke: var(--brasa); }
.divisor-brasa .pid-lleno { fill: var(--brasa); }
.divisor-brasa .pid-tag { fill: var(--brasa); }

/* --------------------------------------------------------------------------
   10. La cadena de cinco fallas. El momento grafico del sitio.
       La secuencia se calienta conforme baja: el paso 1 en violeta frio,
       el paso 5 en amarillo incandescente. El color cuenta la historia.
   -------------------------------------------------------------------------- */
.cadena {
  list-style: none; padding: 0; margin: 2.75rem 0 0;
  counter-reset: paso;
  max-width: 60ch;
}
.cadena li {
  position: relative;
  counter-increment: paso;
  padding: 1.5rem 0 1.5rem 4.5rem;
  border-top: 1px solid var(--linea);
  margin: 0;
  font-size: var(--t-mayor);
  line-height: 1.45;
  color: var(--texto);
}
@media (min-width: 48rem) {
  .cadena li { padding-left: 5.5rem; font-size: 1.3125rem; }
}
.cadena li:last-child { border-bottom: 1px solid var(--linea); }

/* El numero de paso, en monoespaciada, tomando temperatura. */
.cadena li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute; left: 0; top: 1.55rem;
  font-family: var(--mono); font-size: 1.35rem; font-weight: 500;
  line-height: 1;
}
/* El rail de temperatura a la izquierda de cada paso. */
.cadena li::after {
  content: ""; position: absolute;
  left: 2.9rem; top: 1.45rem; bottom: 1.45rem; width: 6px;
}
@media (min-width: 48rem) { .cadena li::after { left: 3.6rem; } }

.cadena li:nth-child(1)::before { color: var(--frio-texto); }
.cadena li:nth-child(2)::before { color: #C77BB8; }
.cadena li:nth-child(3)::before { color: #F07B5A; }
.cadena li:nth-child(4)::before { color: var(--brasa); }
.cadena li:nth-child(5)::before { color: var(--prio-urgente); }

.cadena li:nth-child(1)::after { background: linear-gradient(180deg, #3A2C5C, #5B4B8A); }
.cadena li:nth-child(2)::after { background: linear-gradient(180deg, #5B4B8A, #9B2C6F); }
.cadena li:nth-child(3)::after { background: linear-gradient(180deg, #9B2C6F, #D1345B); }
.cadena li:nth-child(4)::after { background: linear-gradient(180deg, #D1345B, #E8590C); }
.cadena li:nth-child(5)::after { background: linear-gradient(180deg, #E8590C, #FFD84D); }

/* El ultimo eslabon es el que quema. */
.cadena li:last-child {
  color: #fff;
  font-family: var(--display); font-weight: 700; font-stretch: 106%;
  letter-spacing: -.015em; line-height: 1.2;
}

.cadena-cierre {
  margin-top: 2.5rem; padding-left: 1.25rem;
  border-left: 3px solid var(--brasa);
  font-size: var(--t-mayor); color: var(--texto);
  max-width: 52ch;
}
@media (min-width: 48rem) { .cadena-cierre { font-size: 1.3125rem; } }

/* --------------------------------------------------------------------------
   11. El caso y el bloque de la proporcion
       500 : 250,000 es el numero mas importante del sitio. Lleva su propio
       bloque, a gran escala, en monoespaciada y con muchisimo aire.
   -------------------------------------------------------------------------- */
.caso-rejilla { display: grid; gap: 2.5rem; }
@media (min-width: 62rem) { .caso-rejilla { grid-template-columns: 1.2fr .8fr; gap: 4.5rem; } }

.caso-cita {
  margin: 0 0 1.75rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--brasa);
  font-family: var(--display);
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  font-weight: 600;
  font-stretch: 104%;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--texto);
}

/* Version de columna: la que va dentro de un articulo o de media rejilla. */
.proporcion {
  display: grid; gap: 1.5rem;
  margin: 2rem 0 0; padding: 1.5rem 0 0;
  border: 0; border-top: 1px solid var(--linea-viva); background: none;
}
.proporcion-cifra {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--frio-texto);
  margin: 0;
}

/* Version mayor: la del bloque propio de la portada, con todo el aire. */
.proporcion-mayor {
  gap: .5rem; margin-top: 3rem; padding: 0; border-top: 0;
}
.proporcion-mayor .proporcion-cifra {
  font-size: var(--t-cifra); line-height: .92; letter-spacing: -.05em;
}
.proporcion-mayor .proporcion-etq { margin-top: 1rem; }
@media (min-width: 62rem) {
  .proporcion-mayor {
    grid-template-columns: auto auto auto;
    justify-content: start;
    align-items: baseline; gap: 2rem;
  }
}
.proporcion-cifra.mal { color: var(--prio-urgente); }
.proporcion-etq {
  display: block; font-family: var(--mono); font-size: var(--t-etq);
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-3); margin-top: .6rem; line-height: 1.5;
  max-width: 24ch;
}
.proporcion-sep {
  font-family: var(--mono); font-size: var(--t-min); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-3); margin: 0;
}
.proporcion-total {
  margin: 3rem 0 0;
  font-family: var(--display); font-weight: 700; font-stretch: 110%;
  font-size: clamp(1.35rem, 4vw, 2rem); letter-spacing: -.02em;
  color: var(--texto);
}
.proporcion-total b { color: var(--brasa-alta); }
/* La escala completa bajo la proporcion: de lo barato frio a lo caro caliente. */
.proporcion-rampa {
  height: 10px; margin-top: 1.75rem; max-width: 46rem;
  background: var(--ironbow);
  border: 1px solid var(--linea-viva);
}

/* --------------------------------------------------------------------------
   12. Escala termica de prioridades del reporte (sustituye al semaforo).
       Cada nivel lleva una barra de gradiente, no un circulo de color:
       se lee como una lectura de temperatura.
   -------------------------------------------------------------------------- */
.prioridades {
  margin: 2.5rem 0 0; padding: 1.5rem;
  border: 1px solid var(--linea);
  background: var(--fondo);
}
@media (min-width: 48rem) { .prioridades { padding: 2rem; } }
.prioridades-titulo {
  font-family: var(--mono); font-size: var(--t-etq); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-3); margin: 0 0 1.25rem;
}
.prioridad {
  display: grid; grid-template-columns: 1fr; gap: .45rem;
  padding: 1rem 0; border-top: 1px solid var(--linea); margin: 0;
}
@media (min-width: 40rem) {
  .prioridad { grid-template-columns: 8rem 6rem 1fr; align-items: center; gap: 1.25rem; }
}
.prioridad-nombre {
  font-family: var(--mono); font-size: var(--t-min); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
}
.prioridad-barra {
  height: .7rem; border: 1px solid var(--linea-viva);
}
.prioridad-que { font-size: var(--t-menor); color: var(--texto-2); }

.prioridad-urgente   .prioridad-nombre { color: var(--prio-urgente); }
.prioridad-urgente   .prioridad-barra  { background: linear-gradient(90deg, #E8590C, #FFD84D, #FFF3C4); }
.prioridad-programar .prioridad-nombre { color: var(--brasa); }
.prioridad-programar .prioridad-barra  { background: linear-gradient(90deg, #9B2C6F, #D1345B, #E8590C); }
.prioridad-sano      .prioridad-nombre { color: var(--frio-texto); }
.prioridad-sano      .prioridad-barra  { background: linear-gradient(90deg, #0A0711, #2B1B4D, #5B4B8A); }

/* --------------------------------------------------------------------------
   13. Tarjetas y rejillas
   -------------------------------------------------------------------------- */
.rejilla { display: grid; gap: 1.25rem; }
.rejilla-2 { grid-template-columns: 1fr; }
.rejilla-3 { grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .rejilla-2 { grid-template-columns: repeat(2, 1fr); }
  .rejilla-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
}

.tarjeta {
  display: flex; flex-direction: column;
  background: var(--fondo-2);
  border: 1px solid var(--linea);
  border-radius: 0;
  padding: 1.75rem 1.5rem;
}
.tarjeta h3 { margin-bottom: .5rem; }
.tarjeta p  { color: var(--texto-2); font-size: var(--t-menor); }
.tarjeta > :last-child { margin-bottom: 0; }

/* Niveles de la revision pre-temporada */
.niveles { margin-top: 3rem; }
.nivel { position: relative; padding-top: 2rem; }
/* Cada nivel lleva su franja de temperatura arriba: mas alcance, mas calor. */
.nivel::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px;
}
.niveles > .nivel:nth-child(1)::before { background: linear-gradient(90deg, #2B1B4D, #5B4B8A); }
.niveles > .nivel:nth-child(2)::before { background: linear-gradient(90deg, #9B2C6F, #E8590C); }
.niveles > .nivel:nth-child(3)::before { background: linear-gradient(90deg, #E8590C, #FFD84D); }

.nivel.destacado {
  border-color: var(--linea-viva);
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--linea-viva);
}
.nivel .nivel-etiqueta {
  position: absolute; top: 4px; right: 0;
  background: var(--brasa); color: var(--fondo);
  font-family: var(--mono); font-size: var(--t-etq); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .65rem; margin: 0;
}
.nivel h3 { font-size: 1.35rem; margin-bottom: .3rem; }
.nivel .nivel-para {
  font-family: var(--mono); font-size: var(--t-etq); letter-spacing: .04em;
  color: var(--texto-3); margin-bottom: 1.25rem; line-height: 1.5;
}
.precio {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: var(--texto);
  display: block; margin-bottom: .2rem;
}
.nivel .precio-nota { font-size: var(--t-min); color: var(--texto-3); margin-bottom: 1.5rem; }
.precio-nota { font-size: var(--t-min); color: var(--texto-3); margin-bottom: 1.5rem; }
.lista-marcas { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.lista-marcas li {
  position: relative; padding-left: 1.7rem; font-size: var(--t-menor);
  color: var(--texto-2); line-height: 1.5;
}
.lista-marcas li::before {
  content: "\2192"; position: absolute; left: 0; top: 0;
  color: var(--brasa); font-family: var(--mono);
}
.nivel .boton { margin-top: auto; }

/* Precio pendiente de fijar: se ve distinto para que no se publique por error.
   Buscar data-precio="editar" en el HTML para encontrarlos todos. */
[data-precio="editar"] {
  color: var(--brasa-alta);
  border-bottom: 2px dashed rgba(249, 194, 46, .5);
}
/* Servicio que no lleva importe publicado, sino metodo de cotizacion. */
[data-precio="metodo"] {
  font-family: var(--mono); font-size: var(--t-menor);
  letter-spacing: .01em; color: var(--texto-2);
  border-bottom: 0;
}

/* Servicios: tabla de seleccion, no tarjetas. */
.servicio {
  display: grid; gap: .5rem 2.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--linea);
}
@media (min-width: 48rem) {
  .servicio { grid-template-columns: 1fr 17rem; align-items: start; }
}
.servicio:last-of-type { border-bottom: 1px solid var(--linea); }
.servicio h3 { margin-bottom: .45rem; }
.servicio p { color: var(--texto-2); margin-bottom: 0; font-size: var(--t-menor); }
.servicio-precio {
  font-family: var(--mono); font-weight: 500;
  font-size: 1.35rem; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--texto); margin: .75rem 0 0;
}
@media (min-width: 48rem) {
  .servicio-precio { margin-top: .25rem; text-align: right; }
}
.servicio-precio small {
  display: block; font-family: var(--mono); font-size: var(--t-etq);
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3); margin-top: .45rem; line-height: 1.5;
}
.servicio-precio .enlace-cotizar { margin-top: .8rem; }
/* Precio al frente de una seccion completa de servicio (pagina /servicios/):
   manda mas y siempre va alineado a la izquierda. */
.servicio-precio.suelto {
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  margin: 0 0 1.5rem;
}
@media (min-width: 48rem) { .servicio-precio.suelto { text-align: left; } }
.servicio-precio.suelto small { letter-spacing: .12em; margin-top: .55rem; }

/* --------------------------------------------------------------------------
   14. Garantia
   -------------------------------------------------------------------------- */
.garantia {
  border: 1px solid var(--linea-viva);
  border-radius: 0;
  background: var(--fondo-2);
  padding: 2rem 1.5rem;
  position: relative;
}
.garantia::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px;
  background: var(--ironbow);
}
@media (min-width: 48rem) { .garantia { padding: 3rem; } }
.garantia h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
.garantia-frase {
  font-family: var(--display); font-weight: 800; font-stretch: 114%;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  line-height: 1.1; letter-spacing: -.025em;
  color: var(--brasa-alta); margin-bottom: 1.5rem;
  max-width: 26ch;
}
.garantia ul { color: var(--texto-2); font-size: var(--t-menor); }

/* --------------------------------------------------------------------------
   15. Franja de autoridad
   -------------------------------------------------------------------------- */
.autoridad-rejilla { display: grid; gap: 2.5rem; }
@media (min-width: 62rem) {
  .autoridad-rejilla { grid-template-columns: 300px 1fr; gap: 4rem; align-items: start; }
}
.autoridad-rejilla img { border-radius: 0; border: 0; }

/* Datos, en hoja de datos: cifra monoespaciada a la izquierda, regla fina. */
.datos {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--linea-viva);
}
@media (min-width: 62rem) {
  .datos { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 3rem; }
}
.datos li {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem;
  align-items: baseline;
  padding: .85rem 0; border-bottom: 1px solid var(--linea); margin: 0;
}
.datos .cifra {
  font-family: var(--mono); font-weight: 500; font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  color: var(--brasa-alta); text-align: right;
}
.datos .dato { font-size: var(--t-menor); color: var(--texto-2); line-height: 1.45; }

.frases { margin-top: 2.5rem; display: grid; gap: 1rem; }
.frases p {
  margin: 0; padding-left: 1.15rem; border-left: 2px solid var(--brasa);
  font-family: var(--display); font-weight: 700; font-stretch: 108%;
  font-size: var(--t-mayor); letter-spacing: -.015em; line-height: 1.2;
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   16. Acordeon de objeciones
   -------------------------------------------------------------------------- */
.acordeon { border-top: 1px solid var(--linea-viva); margin-top: 2.5rem; }
.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon summary {
  display: flex; align-items: flex-start; gap: 1.25rem;
  padding: 1.35rem 0; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-stretch: 106%;
  font-size: var(--t-mayor); letter-spacing: -.015em; line-height: 1.25;
  color: var(--texto); list-style: none;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: "+"; margin-left: auto; flex: none;
  font-family: var(--mono); font-size: 1.5rem; line-height: 1;
  color: var(--brasa);
}
.acordeon details[open] summary::after { content: "\2212"; }
.acordeon details[open] summary { color: var(--brasa-alta); }
.acordeon summary:hover { color: var(--brasa); }
.acordeon .respuesta {
  padding: 0 0 1.5rem; color: var(--texto-2);
  max-width: 62ch;
}
.acordeon .respuesta > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   17. Iman de prospectos
   -------------------------------------------------------------------------- */
.iman {
  border: 1px solid var(--linea-viva);
  border-radius: 0;
  background: var(--superficie);
  padding: 1.75rem 1.5rem;
  position: relative;
}
.iman::before {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px;
  background: linear-gradient(180deg, #2B1B4D, #9B2C6F, #E8590C, #F9C22E);
}
@media (min-width: 48rem) { .iman { padding: 2.5rem; } }
.iman h2, .iman h3 { font-size: clamp(1.35rem, 3.6vw, 1.85rem); }
.iman p { color: var(--texto-2); font-size: var(--t-menor); }
.iman-form { display: grid; gap: .75rem; margin-top: 1.5rem; }
@media (min-width: 40rem) {
  .iman-form { grid-template-columns: 1fr auto; align-items: start; }
}
.iman-form .campo { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   18. Formularios
   -------------------------------------------------------------------------- */
.campo { margin-bottom: 1.25rem; }
.campo label {
  display: block; margin-bottom: .45rem;
  font-family: var(--mono); font-size: var(--t-etq); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-2);
}
.campo label .req { color: var(--brasa); }
.control {
  width: 100%;
  padding: .9rem .95rem;
  font-family: var(--cuerpo); font-size: 1rem;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--linea-viva);
  border-radius: 0;
}
.control:focus {
  outline: 2px solid var(--brasa-alta); outline-offset: 1px;
  border-color: var(--brasa-alta);
}
.control::placeholder { color: var(--texto-3); }
textarea.control { min-height: 7.5rem; resize: vertical; }

.campo-error {
  display: none; margin-top: .4rem;
  font-size: var(--t-min); color: var(--prio-urgente);
}
.control[aria-invalid="true"] { border-color: var(--prio-urgente); }
.control[aria-invalid="true"] ~ .campo-error { display: block; }
.trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cierre-rejilla { display: grid; gap: 2.5rem; }
@media (min-width: 62rem) { .cierre-rejilla { grid-template-columns: 1.05fr .95fr; gap: 4rem; } }
.caja-contacto {
  background: var(--fondo);
  border: 1px solid var(--linea-viva);
  border-radius: 0; padding: 1.75rem 1.5rem;
}
@media (min-width: 48rem) { .caja-contacto { padding: 2.5rem; } }
.contacto-directo {
  list-style: none; padding: 0; margin: 1.75rem 0 0;
  border-top: 1px solid var(--linea-viva);
}
.contacto-directo li {
  display: grid; grid-template-columns: 1fr; gap: .15rem;
  padding: .8rem 0; border-bottom: 1px solid var(--linea); margin: 0;
}
@media (min-width: 34rem) {
  .contacto-directo li { grid-template-columns: 7.5rem 1fr; gap: 1.25rem; align-items: baseline; }
}
.contacto-directo .etq {
  font-family: var(--mono); font-size: var(--t-etq); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3);
}
.contacto-directo a, .contacto-directo .apoyo { font-size: var(--t-menor); }

/* --------------------------------------------------------------------------
   19. Articulos y casos (texto largo)
   -------------------------------------------------------------------------- */
.articulo { max-width: 68ch; }
.articulo h2 {
  font-size: clamp(1.6rem, 4.5vw, 2.25rem);
  margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid var(--linea);
}
.articulo h3 { margin-top: 2.25rem; }
.articulo p, .articulo li { color: var(--texto-2); }
.articulo blockquote {
  margin: 2rem 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--brasa);
}
.articulo blockquote p {
  color: var(--texto); font-size: clamp(1.2rem, 3.4vw, 1.5rem);
  font-family: var(--display); font-weight: 600; font-stretch: 104%;
  line-height: 1.25; letter-spacing: -.02em; margin: 0;
}
.meta-articulo {
  font-family: var(--mono); font-size: var(--t-etq); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-3); margin-bottom: 1.75rem;
}
.entrada {
  display: block; padding: 1.75rem 0; border-top: 1px solid var(--linea);
  text-decoration: none;
}
.entrada:last-of-type { border-bottom: 1px solid var(--linea); }
.entrada h3 { color: var(--texto); margin-bottom: .45rem; }
.entrada:hover h3 { color: var(--brasa); }
.entrada p { color: var(--texto-2); margin: 0; }

.caso-ficha {
  border: 1px solid var(--linea-viva); border-radius: 0;
  background: var(--fondo-2); padding: 1.75rem 1.5rem;
  position: relative;
}
.caso-ficha::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px;
  background: var(--ironbow);
}
@media (min-width: 48rem) { .caso-ficha { padding: 2.5rem; } }
.caso-pasos { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 62rem) { .caso-pasos { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.caso-paso { border-top: 1px solid var(--linea); padding-top: 1rem; }
.caso-paso h3 {
  font-family: var(--mono); font-size: var(--t-etq); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brasa); margin-bottom: .7rem;
}
.caso-paso p { color: var(--texto-2); font-size: var(--t-menor); margin-bottom: 0; }

/* Migas */
.migas {
  font-family: var(--mono); font-size: var(--t-etq); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-3); margin-bottom: 1.75rem;
}
.migas a { color: var(--texto-2); text-decoration: none; }
.migas a:hover { color: var(--brasa); }

/* Hoja de verificacion imprimible */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  position: relative; padding: .8rem 0 .8rem 2.4rem;
  border-top: 1px solid var(--linea); margin: 0; color: var(--texto-2);
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 1.15rem;
  width: 1rem; height: 1rem; border: 1px solid var(--linea-viva); border-radius: 0;
}

/* --------------------------------------------------------------------------
   20. Pie
   -------------------------------------------------------------------------- */
.pie {
  background: var(--fondo-2); border-top: 1px solid var(--linea);
  padding-block: 3.5rem 2rem; position: relative;
}
.pie::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px;
  height: 2px; background: var(--ironbow); opacity: .7;
}
.pie-rejilla { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .pie-rejilla { grid-template-columns: 1.5fr 1fr 1fr; } }
.pie h2 {
  font-family: var(--mono); font-size: var(--t-etq); font-weight: 500;
  font-stretch: normal; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-3); margin-bottom: 1rem;
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .55rem; }
.pie a { color: var(--texto-2); text-decoration: none; font-size: var(--t-menor); }
.pie a:hover { color: var(--brasa); text-decoration: underline; }
.pie p { color: var(--texto-2); font-size: var(--t-menor); }
.pie-legal {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linea);
  font-size: var(--t-min); color: var(--texto-3);
}

/* --------------------------------------------------------------------------
   21. Impresion (la hoja de verificacion se imprime)
   -------------------------------------------------------------------------- */
@media print {
  .cabecera, .barra-wa, .pie, .no-imprimir, .divisor, .escala-termica { display: none !important; }
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  h1, h2, h3, strong, p, li, .articulo p, .articulo li { color: #000 !important; }
  a { color: #000; text-decoration: none; }
  .hero { background-image: none !important; border-bottom: 1px solid #999; }
  .tarjeta, .iman, .caja-contacto, .caso-ficha, .prioridades {
    border: 1px solid #999; background: #fff;
  }
  .garantia::before, .iman::before, .caso-ficha::before, .nivel::before,
  .pie::before, .cabecera::after { display: none; }
  .checklist li::before { border-color: #444; }
}