/*
Theme Name: FG Ingeniería (Hello Child)
Theme URI: https://fgingenieria.mx
Description: Overlay del rediseño FG sobre Hello Elementor. Las plantillas FG no usan Elementor.
Author: FG Ingeniería
Template: hello-elementor
Version: 1.0.1
Text Domain: fg-ingenieria
*/

/* ============================================================
   FG INGENIERÍA — SISTEMA DE DISEÑO
   ------------------------------------------------------------
   Prototipo del rediseño. Este archivo es el ORIGEN de los
   estilos que después se copian al tema hijo de WordPress.

   Todo el diseño se controla desde las variables de abajo.
   Cambiar un color aquí lo cambia en todo el sitio.

   CONTRATO DE CLASES (HTML y tema hijo deben usar ESTOS nombres):
     .nav-toggle        botón hamburguesa (label o button)
     .nav-toggle-input  checkbox hermano que abre el menú sin JS
     .nav--abierto      estado abierto (alternativa al checkbox)
     .portada--interior hero más bajo de las páginas de servicio
     .miga              migas de pan
     .pasos / .paso     lista numerada de ejecución (no reusar .caso)
     .credenciales--fold barra pegada al fold de la portada
     .servicio__badge   Cotiza / Consulta sobre la foto
     .boton--compacto   CTA chico del encabezado
     .servicio--estatico tarjeta de síntoma, no es un enlace
     .fg-sitio          envoltorio para no pelear con Elementor
   ============================================================ */

:root {

  /* ---- COLORES DE MARCA ----------------------------------
     El rojo #F90404 es el del logo de FG y se conserva.
     Se agrega una versión ligeramente más profunda (--rojo)
     para texto y botones: el rojo puro sobre fondo oscuro
     vibra y cansa la vista. El de la marca se usa en el logo
     y en detalles, no en párrafos.
     El rosa #CC3366 que traía la plantilla NO se usa: era
     un sobrante que peleaba con el rojo de FG.
  -------------------------------------------------------- */
  --rojo-marca:  #F90404;   /* el del logo, intocable */
  --rojo:        #E01B1B;   /* el de trabajo: botones y acentos */
  --rojo-oscuro: #A31212;   /* estados presionados */

  /* ---- SUPERFICIES ---------------------------------------
     El material fotográfico de FG es asfalto: oscuro y
     texturado. En vez de pelear contra eso, el sitio es
     oscuro y deja que mande la foto de obra.
  -------------------------------------------------------- */
  --negro:    #0C0D0F;   /* fondo principal */
  --carbon:   #15171A;   /* tarjetas y bloques */
  --grafito:  #1E2126;   /* bordes suaves y campos */
  --linea:    #2A2E35;   /* líneas divisorias */

  /* ---- TEXTO --------------------------------------------- */
  --tinta:    #F2F4F7;   /* titulares y texto principal */
  --tinta-2:  #A8B0BB;   /* texto secundario */
  --tinta-3:  #6B7480;   /* etiquetas y notas al pie */

  /* ---- SEMÁNTICOS ---------------------------------------- */
  --verde:    #3ECF8E;   /* sí cubrimos / confirmaciones */
  --ambar:    #F5A623;   /* avisos: "esto es un estimado" */

  /* ---- TIPOGRAFÍA ----------------------------------------
     Montserrat ya la usa el sitio actual. Se conserva:
     el rediseño debe leerse como "la misma empresa, bien
     hecha", no como otra empresa.
  -------------------------------------------------------- */
  --fuente: "Montserrat", -apple-system, BlinkMacSystemFont,
            "Segoe UI", Roboto, Arial, sans-serif;

  /* Escala tipográfica fluida: crece con el ancho de pantalla
     sin necesidad de escribir media queries para cada tamaño. */
  --t-xxl: clamp(2.15rem, 6vw,   4.2rem);   /* titular de portada */
  --t-xl:  clamp(1.75rem, 4vw,   2.75rem);  /* títulos de sección */
  --t-l:   clamp(1.25rem, 2.4vw, 1.6rem);   /* subtítulos */
  --t-m:   1.0625rem;                        /* cuerpo */
  --t-s:   0.9375rem;                        /* cuerpo chico */
  --t-xs:  0.8125rem;                        /* etiquetas */

  /* ---- ESPACIADO ----------------------------------------- */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2.25rem;
  --e-5: 3.5rem;
  --e-6: 5.5rem;

  /* ---- OTROS --------------------------------------------- */
  --radio:     14px;
  --radio-s:   9px;
  --ancho-max: 1180px;
  --sombra:    0 18px 50px rgba(0, 0, 0, .45);
  --sombra-card: 0 22px 40px rgba(0, 0, 0, .38);
}

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* Un elemento con [hidden] SIEMPRE se oculta.
   Sin esto, cualquier regla nuestra con `display` (por ejemplo
   .boton{display:inline-flex}) le gana al [hidden] del navegador, porque una
   clase pesa más que un atributo. Los dos botones del cierre de la herramienta
   se veían al mismo tiempo por exactamente esto. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--t-m);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* En WordPress el markup vive dentro de .fg-sitio para no heredar
   estilos de Hello Elementor. En el prototipo está en el body. */
.fg-sitio { color: var(--tinta); font-family: var(--fuente); }

/* IMPORTANTE: nada en este sitio se oculta esperando a que el
   usuario haga scroll. El sitio actual esconde el 89% de su
   texto detrás de animaciones de aparición: si el JavaScript
   tarda o falla, la página se ve vacía. Aquí el contenido
   existe desde el primer momento. */

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

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 800;
}

h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); font-weight: 700; }

p { margin: 0 0 var(--e-2); color: var(--tinta-2); }

a { color: inherit; }

strong { color: var(--tinta); font-weight: 700; }

/* Accesibilidad: foco siempre visible. El sitio actual lo
   pierde en varios controles. */
:focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Respeta a quien pidió menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .revela {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .foto-zoom-obra {
    transform: none !important;
  }
}

/* ============================================================
   ESTRUCTURA
   ============================================================ */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--e-3);
}

/* Al saltar desde el menú a un ancla (#deterioro, #cotizador...), el
   encabezado pegajoso taparía el inicio de la sección. Esto le dice al
   navegador que se detenga 88px antes: la altura del encabezado más aire. */
[id] { scroll-margin-top: 88px; }

.seccion { padding-block: var(--e-6); }
.seccion--clara { background: var(--carbon); }
.seccion--compacta { padding-block: var(--e-5); }

/* Revelar al scroll / hero al cargar (movimiento.js). */
.revela {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .55s ease;
}
.revela.es-visible {
  opacity: 1;
  transform: none;
}
/* El fold se lee en el primer paint. Si el JS tarda, el titular no nace invisible. */
.portada .revela {
  opacity: 1;
  transform: none;
}
.foto-zoom-obra {
  transform-origin: center center;
  will-change: transform;
}
.comparador__marco img.foto-zoom-obra {
  transition: none;
}
.contenedor--estrecho { max-width: 800px; }

.titulo-bloque { margin-top: var(--e-6); }
.entradilla--cuerpo { font-size: var(--t-m); }
.prosa { max-width: 62ch; }
.mt-e2 { margin-top: var(--e-2); }
.mt-e3 { margin-top: var(--e-3); }
.mt-e4 { margin-top: var(--e-4); }
.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-3);
}
.texto-enlace { color: inherit; text-decoration: underline; }

/* Etiqueta chica arriba de cada título de sección */
.etiqueta {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rojo);
  margin-bottom: var(--e-1);
}

.entradilla {
  max-width: 62ch;
  font-size: var(--t-l);
  color: var(--tinta-2);
  line-height: 1.5;
  margin-top: var(--e-2);
  font-weight: 400;
}

/* ============================================================
   ENCABEZADO
   ============================================================ */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12, 13, 15, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}

.encabezado__fila {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 68px;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
}
.logo__img {
  display: block;
  height: 52px;
  width: auto;
}
.logo--pie { margin-bottom: var(--e-2); }
.logo--pie .logo__img { height: 88px; }

.nav-toggle-input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--grafito);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-s);
  cursor: pointer;
  color: var(--tinta);
  flex-shrink: 0;
}
.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after  { top: 6px; }

.encabezado__acciones {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-left: auto;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: absolute;
  top: calc(100% + 1px);
  left: 0; right: 0;
  background: rgba(12, 13, 15, .97);
  border-bottom: 1px solid var(--linea);
  padding: .5rem var(--e-3) var(--e-3);
  box-shadow: var(--sombra);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav a {
  text-decoration: none;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--tinta-2);
  min-height: 44px;
  display: flex;
  align-items: center;
  padding-block: .65rem;
  border-bottom: 1px solid var(--linea);
}
.nav a:last-child { border-bottom: 0; }
.nav a:hover { color: var(--tinta); }

.nav-toggle-input:checked ~ .nav,
.nav.nav--abierto {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.nav-toggle-input:checked ~ .encabezado__acciones .nav-toggle__icon {
  background: transparent;
}
.nav-toggle-input:checked ~ .encabezado__acciones .nav-toggle__icon::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle-input:checked ~ .encabezado__acciones .nav-toggle__icon::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .nav {
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    gap: var(--e-3);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
    margin-right: .4rem;
  }
  .nav a {
    min-height: 0;
    padding-block: .4rem;
    border: 0;
  }
  .encabezado__acciones { margin-left: 0; }
}

/* ============================================================
   BOTONES
   ============================================================ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  border: 0;
  border-radius: var(--radio-s);
  background: var(--rojo);
  color: #fff;
  font-family: inherit;
  font-size: var(--t-m);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
  /* Mínimo 44px de alto: es el tamaño en que un dedo acierta. */
  min-height: 48px;
}
.boton:hover  { background: var(--rojo-oscuro); }
.boton:active { transform: translateY(1px); }

.boton--fantasma {
  background: transparent;
  border: 1.5px solid var(--linea);
  color: var(--tinta);
}
.boton--fantasma:hover { background: var(--grafito); border-color: var(--tinta-3); }

.boton--whatsapp { background: #25D366; color: #062d16; }
.boton--whatsapp:hover { background: #1eb959; }

.boton--ancho { width: 100%; }

.boton--compacto {
  padding: .55rem 1.05rem;
  min-height: 44px;
  font-size: var(--t-s);
}

/* ============================================================
   PORTADA (HERO)
   ============================================================ */

.portada {
  position: relative;
  min-height: min(72vh, 640px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.portada--interior { min-height: min(62vh, 540px); }

.portada__foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Velo oscuro para que el texto se lea sobre cualquier foto.
   Sin esto, el titular blanco desaparece sobre el cielo. */
.portada__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12,13,15,.55) 0%, rgba(12,13,15,.22) 42%, rgba(12,13,15,.96) 100%);
}
.portada--interior .portada__velo {
  background:
    linear-gradient(180deg, rgba(12,13,15,.48) 0%, rgba(12,13,15,.28) 45%, rgba(12,13,15,.94) 100%);
}

.portada__contenido {
  position: relative;
  padding-block: var(--e-5) var(--e-6);
  max-width: 44rem;
}
.portada--interior .portada__contenido { padding-block: var(--e-4) var(--e-5); }

.portada .etiqueta { color: #FF9B9B; }

.portada h1 { text-wrap: balance; }

.portada__sub {
  font-size: var(--t-l);
  color: #D6DCE4;
  margin-top: var(--e-2);
  max-width: 34rem;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  margin-top: var(--e-4);
}

.portada__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #D6DCE4;
  font-weight: 600;
  text-underline-offset: .18em;
}
.portada__enlace:hover { color: #fff; }

.portada__nota {
  font-size: var(--t-xs);
  color: #D6DCE4;
  margin-top: var(--e-2);
}

/* Migas de pan de las páginas de servicio */
.miga {
  font-size: var(--t-s);
  color: #C7CED8;
  margin-bottom: var(--e-2);
}
.miga a {
  text-decoration: none;
  display: inline-block;
  padding-block: .55rem;
  min-height: 44px;
}
.miga a:hover { color: #fff; }
.miga__aqui { color: var(--tinta); font-weight: 600; }

/* Barra de credenciales pegada al fold */
.credenciales {
  border-block: 1px solid var(--linea);
  background: var(--carbon);
}
.credenciales--fold {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  box-shadow: 0 -18px 40px rgba(0,0,0,.35);
}
.credenciales__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--e-3);
  padding-block: var(--e-3);
  list-style: none;
  margin: 0;
}
.credenciales li {
  font-size: var(--t-s);
  color: var(--tinta-2);
  display: flex;
  gap: .55rem;
  align-items: flex-start;
}
.credenciales b { color: var(--tinta); display: block; font-size: 1.05rem; }

/* ============================================================
   TARJETAS DE SERVICIO
   ============================================================ */

.rejilla-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--e-3);
  margin-top: var(--e-4);
}

.servicio {
  display: flex;
  flex-direction: column;
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  text-decoration: none;
  position: relative;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.servicio:hover {
  border-color: var(--rojo);
  transform: translateY(-4px);
  box-shadow: var(--sombra-card);
}
.servicio--estatico { cursor: default; }
.servicio--estatico:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--linea);
}

.servicio__foto {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}
.servicio__marco {
  position: relative;
  overflow: hidden;
}
.servicio__marco::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 48%;
  background: linear-gradient(180deg, transparent, rgba(12,13,15,.72));
  pointer-events: none;
}
.servicio__badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  padding: .28rem .65rem;
  border-radius: 100px;
  background: rgba(12,13,15,.82);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta);
}
.servicio__badge--consulta { color: var(--ambar); border-color: rgba(245,166,35,.4); }
.servicio__badge--cotiza { color: var(--verde); border-color: rgba(62,207,142,.4); }

.servicio__cuerpo { padding: var(--e-3); display: flex; flex-direction: column; flex: 1; }

/* El problema del cliente va primero y en grande.
   El nombre técnico va debajo y en chico: el administrador
   de una plaza busca su problema, no el nombre del proceso. */
.servicio__problema { font-size: var(--t-l); font-weight: 700; color: var(--tinta); }
.servicio__problema--chico { font-size: 1.2rem; margin-top: .4rem; }
.servicio__tecnico {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--rojo);
  margin-top: .5rem;
}
.servicio__texto { font-size: var(--t-s); margin-top: .7rem; flex: 1; }
.servicio__enlace { font-size: var(--t-s); font-weight: 700; color: var(--tinta); margin-top: var(--e-2); }
.servicio__enlace::after { content: " →"; color: var(--rojo); }

/* Cinta de servicios (home): un foco alto, vecinos más bajos y recortados. */
.servicios-cinta {
  margin-top: var(--e-4);
}
.servicios-cinta__marco {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.servicios-cinta__ventana {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  touch-action: pan-y;
  outline: none;
}
.servicios-cinta__ventana:focus-visible {
  box-shadow: 0 0 0 2px var(--rojo);
  border-radius: var(--radio);
}
.servicios-cinta__pista {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  will-change: transform;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.servicios-cinta .servicio {
  flex: 0 0 82%;
  max-width: 82%;
  opacity: .78;
  transform: none;
}
.servicios-cinta .servicio:hover {
  transform: none;
  box-shadow: none;
}
.servicios-cinta .servicio.es-foco {
  opacity: 1;
  border-color: var(--rojo);
  box-shadow: var(--sombra-card);
}
.servicios-cinta .servicio__marco {
  height: 9.25rem;
  transition: height .55s cubic-bezier(.22, 1, .36, 1);
}
.servicios-cinta .servicio.es-foco .servicio__marco {
  height: 14.5rem;
}
.servicios-cinta .servicio__foto {
  height: 100%;
  aspect-ratio: auto;
}
.servicios-cinta__flecha {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: var(--carbon);
  color: var(--tinta);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.servicios-cinta__flecha:hover:not(:disabled) {
  border-color: var(--rojo);
  color: var(--rojo);
}
.servicios-cinta__flecha:disabled {
  opacity: .35;
  cursor: default;
}
.servicios-cinta__puntos {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-top: var(--e-3);
}
.servicios-cinta__punto {
  width: .55rem;
  height: .55rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: transparent;
  cursor: pointer;
}
.servicios-cinta__punto.es-activo {
  background: var(--rojo);
  border-color: var(--rojo);
}
@media (min-width: 860px) {
  .servicios-cinta .servicio {
    flex-basis: 38%;
    max-width: 38%;
  }
  .servicios-cinta .servicio__marco { height: 12rem; }
  .servicios-cinta .servicio.es-foco .servicio__marco { height: 18.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .servicios-cinta__pista,
  .servicios-cinta .servicio__marco {
    transition: none;
  }
}

/* ============================================================
   ANTES / DESPUÉS
   ============================================================ */

.comparador {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--carbon);
  border: 1px solid var(--linea);
  touch-action: pan-y;
  user-select: none;
}

.comparador__marco { position: relative; aspect-ratio: 16 / 10; }
.comparador__marco img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* La imagen "después" se recorta con clip-path según la
   posición del control. Es CSS puro, sin librerías. */
.comparador__despues { clip-path: inset(0 0 0 var(--pos, 50%)); }

.comparador__tirador {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  background: #fff;
  pointer-events: none;
}
.comparador__tirador::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 14px rgba(0,0,0,.5);
}

/* El input range invisible encima es lo que hace que esto
   funcione con teclado y con lector de pantalla, no sólo
   con el ratón. */
.comparador__control {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.comparador__marco:has(.comparador__control:focus-visible) {
  outline: 3px solid var(--rojo);
  outline-offset: 3px;
}

.comparador__etiqueta {
  position: absolute;
  bottom: 12px;
  padding: .3rem .7rem;
  border-radius: 100px;
  background: rgba(12,13,15,.82);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.comparador__etiqueta--antes   { left: 12px; }
.comparador__etiqueta--despues { right: 12px; color: var(--verde); }
.comparador__leyenda {
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-s);
  color: var(--tinta-2);
}

/* ============================================================
   CASOS DE OBRA
   ============================================================ */

.rejilla-casos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--e-3);
  margin-top: var(--e-4);
}

.caso {
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.caso__foto { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.caso__cuerpo { padding: var(--e-3); }
.caso__cliente { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-3); font-weight: 700; }
.caso__titulo  { font-size: 1.15rem; font-weight: 700; margin-top: .35rem; }

/* Los tres números que de verdad importan: superficie,
   días de obra y servicio aplicado. */
.caso__datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-1);
  margin-top: var(--e-2);
  padding-top: var(--e-2);
  border-top: 1px solid var(--linea);
}
.caso__dato span { display: block; font-size: var(--t-xs); color: var(--tinta-3); }
.caso__dato b    { display: block; font-size: 1.05rem; color: var(--tinta); font-variant-numeric: tabular-nums; }

/* ============================================================
   AVISOS
   ============================================================ */

.aviso {
  border-radius: var(--radio);
  padding: var(--e-3);
  border: 1px solid;
  font-size: var(--t-s);
}
.aviso--ambar { background: rgba(245,166,35,.07); border-color: rgba(245,166,35,.35); color: #F6C87A; }
.aviso--rojo  { background: rgba(224,27,27,.08);  border-color: rgba(224,27,27,.42);  color: #FF9B9B; }
.aviso--verde { background: rgba(62,207,142,.07); border-color: rgba(62,207,142,.35); color: #8FE9C2; }
.aviso b { color: inherit; }
.aviso--fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
  justify-content: space-between;
}
.aviso__cuerpo { flex: 1; min-width: 240px; }
.aviso__titulo {
  display: block;
  font-size: 1.15rem;
  margin-bottom: .3rem;
}

/* Banner de datos falsos: tiene que ser IMPOSIBLE de ignorar.
   Mientras esto se vea, el cotizador no se publica. */
.banner-falso {
  position: relative;
  z-index: 200;
  background: repeating-linear-gradient(45deg, #2A1206, #2A1206 14px, #3A1808 14px, #3A1808 28px);
  border-bottom: 2px solid var(--ambar);
  color: #FFD79A;
  font-size: var(--t-s);
  font-weight: 700;
  text-align: center;
  padding: .7rem var(--e-3);
}
.banner-falso__detalle {
  display: block;
  font-weight: 400;
  font-size: .8125rem;
  margin-top: .2rem;
}

/* Pasos de ejecución — no reusar .caso */
.pasos {
  list-style: none;
  margin: var(--e-4) 0 0;
  padding: 0;
  counter-reset: paso;
}
.paso {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--e-2);
  align-items: start;
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e-3);
  margin-bottom: var(--e-2);
}
.paso::before {
  counter-increment: paso;
  content: counter(paso);
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  background: var(--rojo);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.paso h3 { margin-top: .15rem; }
.paso p { margin: .5rem 0 0; }

/* ============================================================
   PIE
   ============================================================ */

.pie {
  background: var(--carbon);
  border-top: 1px solid var(--linea);
  padding-block: var(--e-5) var(--e-3);
  margin-top: var(--e-6);
}
.pie__texto { font-size: var(--t-s); }
.pie__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e-4);
}
.pie h4 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--tinta-3);
  margin-bottom: var(--e-2);
}
.pie a {
  color: var(--tinta-2);
  text-decoration: none;
  display: block;
  /* .65rem arriba y abajo deja el enlace en ~44px de alto, que es el
     tamaño mínimo en que un dedo acierta sin fallar. Con .3rem quedaban
     en 34px y se picaba el de al lado. */
  padding-block: .65rem;
  font-size: var(--t-s);
}
.pie a:hover { color: var(--tinta); }
.pie__legal {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea);
  font-size: var(--t-xs);
  color: var(--tinta-3);
}

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ============================================================ */

.flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
  text-decoration: none;
}
.flotante svg { width: 30px; height: 30px; }

/* En celular el cotizador tiene su propio botón grande abajo,
   así que el flotante se aparta para no encimarse. */
@media (max-width: 620px) {
  .flotante { width: 50px; height: 50px; bottom: 12px; right: 12px; }
}

/* ============================================================
   UTILIDADES
   ============================================================ */

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--rojo);
  color: #fff;
  padding: .8rem 1.2rem;
  z-index: 300;
  border-radius: 0 0 var(--radio-s) 0;
  text-decoration: none;
  font-weight: 700;
}
.saltar-al-contenido:focus { left: 0; }

/* ============================================================
   COTIZADOR
   ------------------------------------------------------------
   Diseñado para el pulgar, no para el ratón. El prospecto
   entra desde el celular, muchas veces parado en el patio
   que quiere sellar.
   ============================================================ */

.cotizador {
  background:
    linear-gradient(180deg, rgba(224,27,27,.08) 0%, transparent 7.5rem),
    var(--carbon);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e-3);
  box-shadow: var(--sombra);
  margin-top: var(--e-4);
}

@media (min-width: 720px) { .cotizador { padding: var(--e-4); } }

.cotizador__cabeza { margin-bottom: var(--e-3); }
.cotizador__pasos {
  font-size: var(--t-xs);
  color: var(--tinta-3);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.campo { margin-top: var(--e-4); }
.campo:first-of-type { margin-top: var(--e-3); }

.campo__titulo {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tinta);
  margin-bottom: .25rem;
}
.campo__ayuda {
  display: block;
  font-size: var(--t-s);
  color: var(--tinta-3);
  margin-bottom: var(--e-2);
}

/* --- Botones de opción (servicio, estado, modo de superficie) ---
   Se usa un radio real escondido para que funcione con teclado
   y con lector de pantalla, y la etiqueta es lo que se ve. */

.opciones {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.opciones--dos { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

.opcion { position: relative; }
.opcion input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.opcion__cara {
  display: block;
  padding: .85rem .9rem;
  min-height: 52px;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-s);
  background: var(--grafito);
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--tinta-2);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.opcion__cara small {
  display: block;
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--tinta-3);
  margin-top: .2rem;
  line-height: 1.4;
}
.opcion input:hover + .opcion__cara { border-color: var(--tinta-3); }
.opcion input:checked + .opcion__cara {
  border-color: var(--rojo);
  background: rgba(224,27,27,.12);
  color: var(--tinta);
}
.opcion input:focus-visible + .opcion__cara { outline: 3px solid var(--rojo); outline-offset: 2px; }

/* --- Campos numéricos --- */

.entradas { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.entradas--sep { margin-top: .8rem; }

.entrada label {
  display: block;
  font-size: var(--t-xs);
  color: var(--tinta-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .35rem;
}
.entrada input, .entrada select {
  width: 100%;
  padding: .85rem .9rem;
  min-height: 50px;
  background: var(--grafito);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-s);
  color: var(--tinta);
  font-family: inherit;
  font-size: 1.05rem;          /* 16px+ evita que el iPhone haga zoom al tocar */
  font-variant-numeric: tabular-nums;
}
.entrada input:focus,
.entrada select:focus,
.entrada input:focus-visible,
.entrada select:focus-visible {
  border-color: var(--rojo);
  outline: 3px solid var(--rojo);
  outline-offset: 2px;
}

.oculto { display: none; }

/* --- Resultado --- */

.resultado {
  margin-top: var(--e-4);
  padding: var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--grafito);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.resultado__vacio {
  color: var(--tinta-3);
  font-size: var(--t-s);
  text-align: center;
  padding-block: var(--e-3);
  margin: 0;
}

.resultado:not(:has(.resultado__vacio)) {
  border-color: rgba(62,207,142,.35);
  background:
    linear-gradient(180deg, rgba(62,207,142,.08), transparent 5rem),
    var(--grafito);
}

.resultado__rango {
  font-size: clamp(1.8rem, 5.5vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  line-height: 1.08;
}
.resultado__unidad { font-size: var(--t-s); color: var(--tinta-3); font-weight: 600; margin-top: .3rem; }

.resultado__cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--e-2);
  margin-top: var(--e-3);
}
.cifra {
  background: var(--grafito);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  padding: var(--e-2);
}
.cifra span { display: block; font-size: var(--t-xs); color: var(--tinta-3); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.cifra b { display: block; font-size: 1.35rem; margin-top: .2rem; font-variant-numeric: tabular-nums; }

.incluye { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e-3); margin-top: var(--e-3); }
.incluye h4 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.incluye ul { margin: 0; padding-left: 1.1rem; font-size: var(--t-s); color: var(--tinta-2); }
.incluye li { margin-bottom: .35rem; }
.incluye--si h4 { color: var(--verde); }
.incluye--no h4 { color: var(--tinta-3); }

.resultado__cierre { margin-top: var(--e-3); }

/* ============================================================
   HERRAMIENTA DIDÁCTICA DEL DETERIORO (CURVA PCI)
   ------------------------------------------------------------
   Celular primero: el control de años tiene que moverse bien
   con el dedo, y el resultado tiene que caber en una pantalla
   sin obligar a hacer scroll para entender el punto.
   ============================================================ */

.pci {
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e-3);
  margin-top: var(--e-4);
  box-shadow: var(--sombra);
}
@media (min-width: 720px) { .pci { padding: var(--e-4); } }

/* --- El control de años --- */

.pci__control { margin-bottom: var(--e-3); }

.pci__control label {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tinta);
  margin-bottom: .3rem;
}

.pci__anios {
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  font-weight: 800;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: .5rem;
}

/* Barra grande y con un tirador de 30px: es un control para el
   pulgar, no para el ratón. */
.pci__rango {
  width: 100%;
  margin: 0;
  height: 46px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.pci__rango::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--verde) 0%, var(--verde) 40%, var(--ambar) 50%, var(--rojo) 60%, var(--rojo) 100%);
}
.pci__rango::-moz-range-track {
  height: 8px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--verde) 0%, var(--verde) 40%, var(--ambar) 50%, var(--rojo) 60%, var(--rojo) 100%);
}
.pci__rango::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px; height: 30px;
  margin-top: -11px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--rojo);
  box-shadow: 0 3px 12px rgba(0,0,0,.5);
}
.pci__rango::-moz-range-thumb {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--rojo);
  box-shadow: 0 3px 12px rgba(0,0,0,.5);
}
.pci__rango:focus-visible { outline: 3px solid var(--rojo); outline-offset: 4px; border-radius: 8px; }

.pci__escala {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--tinta-3);
  margin-top: -.3rem;
}

/* --- La gráfica --- */

.pci__grafica { margin-block: var(--e-3); }
.pci__svg { width: 100%; height: auto; display: block; overflow: visible; }
.pci__eje { fill: var(--tinta-3); font-size: 11px; font-family: var(--fuente); }
.pci__eje--alerta { fill: #FF8A8A; font-weight: 700; }

/* --- Tarjeta de estado actual --- */

.pci__estado {
  border-radius: var(--radio-s);
  padding: var(--e-3);
  border: 1.5px solid;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
}
.pci__estado--bien  { background: rgba(62,207,142,.08); border-color: rgba(62,207,142,.4); }
.pci__estado--medio { background: rgba(245,166,35,.08); border-color: rgba(245,166,35,.4); }
.pci__estado--mal   { background: rgba(224,27,27,.10);  border-color: rgba(224,27,27,.45); }

.pci__marcador {
  display: grid;
  place-items: center;
  width: 74px; height: 74px;
  border-radius: 14px;
  background: rgba(0,0,0,.35);
  flex-shrink: 0;
}
.pci__marcador b {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pci__marcador span { font-size: var(--t-xs); color: var(--tinta-3); letter-spacing: .06em; }

.pci__resumen { flex: 1; min-width: 180px; }
.pci__resumen h3 { font-size: 1.3rem; }
.pci__resumen h3 em {
  font-style: normal;
  font-size: var(--t-s);
  font-weight: 700;
  color: var(--tinta-3);
  margin-left: .4rem;
}
.pci__resumen p { margin: .35rem 0 0; font-size: var(--t-s); }

/* --- Los dos paneles: síntomas y tratamiento --- */

.pci__paneles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--e-2);
  margin-top: var(--e-3);
}
.pci__panel {
  background: var(--grafito);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  padding: var(--e-3);
}
.pci__panel h4 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinta-3);
  margin-bottom: .6rem;
}
.pci__panel ul { margin: 0; padding-left: 1.1rem; font-size: var(--t-s); color: var(--tinta-2); }
.pci__panel li { margin-bottom: .35rem; }
.pci__tratamiento { font-size: 1.15rem; font-weight: 700; color: var(--tinta); }
.pci__nota { font-size: var(--t-s); color: var(--tinta-3); margin: .6rem 0 0; }

/* --- El costo de esperar --- */

.pci__costo {
  margin-top: var(--e-3);
  background: var(--grafito);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  padding: var(--e-3);
}
.pci__costo-titulo {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinta-3);
  margin: 0;
}
.pci__costo-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e-2);
  margin-top: var(--e-2);
}
.pci__costo-caja { padding: var(--e-2); border-radius: var(--radio-s); background: rgba(0,0,0,.3); }
.pci__costo-caja > span {
  display: block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tinta-3);
  font-weight: 700;
}
.pci__costo-caja b {
  display: block;
  font-size: 1.3rem;
  margin-top: .2rem;
  font-variant-numeric: tabular-nums;
}
.pci__costo-caja--hoy b  { color: var(--verde); }
.pci__costo-caja--luego b { color: var(--rojo); }

.pci__multiplicador {
  display: inline-block !important;
  color: #fff !important;
  text-transform: none;   /* heredaba mayúsculas: "2× a 4×" salía "2× A 4×" */
  background: var(--rojo);
  color: #fff;
  font-weight: 800;
  font-size: var(--t-s);
  padding: .15rem .6rem;
  border-radius: 100px;
  font-variant-numeric: tabular-nums;
}

/* La fuente SIEMPRE visible. Un dato con fuente convence a un
   comprador institucional; el mismo dato sin fuente lo hace
   desconfiar. */
.pci__fuente {
  font-size: var(--t-xs);
  color: var(--tinta-3);
  margin-top: var(--e-2);
  line-height: 1.5;
  border-top: 1px solid var(--linea);
  padding-top: var(--e-2);
}

.pci__cierre { margin-top: var(--e-3); }

/* ============================================================
   DIAGRAMA DE CORTE: CON SELLO / SIN SELLO
   ============================================================ */

.corte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e-3);
  margin-top: var(--e-4);
}
.corte--uno {
  grid-template-columns: 1fr;
  max-width: 36rem;
}
.corte__caja {
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e-3);
}
.corte__caja--malo  { border-color: rgba(224,27,27,.4); }
.corte__caja--bueno { border-color: rgba(62,207,142,.4); }
.corte__caja h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.corte__caja--malo h3  { color: #FF8A8A; }
.corte__caja--bueno h3 { color: var(--verde); }
.corte__caja p { font-size: var(--t-s); margin: .4rem 0 var(--e-2); }
.corte__svg { width: 100%; height: auto; display: block; border-radius: var(--radio-s); }
.corte__etiqueta { fill: var(--tinta-2); font-size: 11px; font-family: var(--fuente); font-weight: 600; }

/* ============================================================
   BARRA DE ETAPAS DE TRATAMIENTO
   ------------------------------------------------------------
   Lo que arregla el problema de comunicación de la curva: el
   PCI casi no baja los primeros diez años, pero el TRATAMIENTO
   se encarece cada tramo. Esta barra es lo que se ve.
   ============================================================ */

.etapas {
  display: flex;
  gap: 3px;
  margin-top: var(--e-2);
}

.etapas__seg {
  flex-basis: 0;              /* el ancho lo da flex-grow = años del tramo */
  min-width: 0;
  padding: .5rem .4rem;
  border-radius: 7px;
  border: 1.5px solid transparent;
  background: var(--grafito);
  text-align: center;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.etapas__seg--verde { background: rgba(62,207,142,.10); }
.etapas__seg--ambar { background: rgba(245,166,35,.10); }
.etapas__seg--rojo  { background: rgba(224,27,27,.12); }

.etapas__anios {
  display: block;
  font-size: 10px;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.etapas__seg b {
  display: block;
  font-size: 11px;
  line-height: 1.25;
  margin-top: .15rem;
  color: var(--tinta-2);
  /* en pantallas chicas el texto se recorta en vez de romper la barra */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El tramo donde está parado el visitante */
.etapas__seg.es-activo { transform: translateY(-2px); }
.etapas__seg.es-activo b { color: var(--tinta); font-weight: 800; }
.etapas__seg--verde.es-activo { border-color: var(--verde); background: rgba(62,207,142,.20); }
.etapas__seg--ambar.es-activo { border-color: var(--ambar); background: rgba(245,166,35,.20); }
.etapas__seg--rojo.es-activo  { border-color: var(--rojo);  background: rgba(224,27,27,.22); }

/* En celular sólo se alcanzan a leer los años; la etiqueta del
   tramo activo se lee completa en la tarjeta de abajo. */
@media (max-width: 560px) {
  .etapas__seg b { font-size: 10px; }
  .etapas__seg { padding: .45rem .2rem; }
}

/* --- Tarjeta con el detalle de la etapa activa --- */

.pci__etapa {
  margin-top: var(--e-3);
  border-radius: var(--radio-s);
  border: 1.5px solid;
  padding: var(--e-3);
}
.pci__etapa--verde { background: rgba(62,207,142,.07); border-color: rgba(62,207,142,.38); }
.pci__etapa--ambar { background: rgba(245,166,35,.07); border-color: rgba(245,166,35,.38); }
.pci__etapa--rojo  { background: rgba(224,27,27,.09);  border-color: rgba(224,27,27,.42); }

.pci__etapa h4 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: .4rem;
  color: var(--tinta);
  text-transform: none;
  letter-spacing: -.01em;
}
.pci__etapa p { font-size: var(--t-s); margin: 0 0 .7rem; }

.pci__necesita {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  padding-top: .7rem;
  border-top: 1px solid var(--linea);
}
.pci__necesita span {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tinta-3);
  font-weight: 700;
}
.pci__necesita b { font-size: 1.05rem; color: var(--tinta); }
.pci__necesita em { display: block; width: 100%; font-style: normal; font-size: var(--t-s); color: var(--tinta-2); margin-top: .3rem; }

.pci__eje--ventana { fill: #8FE9C2; font-weight: 700; }

/* ============================================================
   ANIMACIÓN: CÓMO LA LLUVIA LAVA LA BASE
   ------------------------------------------------------------
   Cuatro fases encadenadas en un ciclo de 12 segundos:
     1. Llueve sobre un pavimento con una grieta
     2. El agua se mete por la grieta
     3. El agua lava la base y abre un hueco
     4. La superficie se hunde: aparece el bache

   Todas las fases comparten la misma duración para que no se
   desincronicen, y sólo cambian los porcentajes en que entran.
   Es opacidad pura: no se anima geometría, así que va suave
   incluso en un celular de gama baja.
   ============================================================ */

.corte-anim { position: relative; }
.corte-anim__svg { width: 100%; height: auto; display: block; border-radius: var(--radio-s); }
.corte-anim__video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radio-s);
  background: #0C0D0F;
}

/* --- Las gotas cayendo (ciclo propio, independiente de las fases) --- */
@keyframes fg-gota {
  0%   { transform: translateY(-10px); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(30px);  opacity: 0; }
}
.fg-gota {
  transform-box: fill-box;
  animation: fg-gota 1.6s linear infinite;
}
.fg-gota--b { animation-delay: .45s; }
.fg-gota--c { animation-delay: .9s;  }
.fg-gota--d { animation-delay: 1.2s; }

/* --- Las cuatro fases --- */
@keyframes fg-fase2 { 0%,16% {opacity:0} 24%,93% {opacity:1} 100% {opacity:0} }
@keyframes fg-fase3 { 0%,40% {opacity:0} 48%,93% {opacity:1} 100% {opacity:0} }
@keyframes fg-fase4 { 0%,64% {opacity:0} 72%,93% {opacity:1} 100% {opacity:0} }

.fg-fase2, .fg-fase3, .fg-fase4 { opacity: 0; }
.fg-fase2 { animation: fg-fase2 12s ease-in-out infinite; }
.fg-fase3 { animation: fg-fase3 12s ease-in-out infinite; }
.fg-fase4 { animation: fg-fase4 12s ease-in-out infinite; }

/* --- El pie de foto que va narrando --- */
.corte-anim__pie {
  position: relative;
  /* Alto fijo para el texto más largo de los cuatro. Los pies están
     posicionados en absoluto (para que se puedan cruzar sin saltos),
     así que el contenedor no crece solo y hay que reservarle el espacio. */
  min-height: 4.6rem;
  margin-top: var(--e-2);
  font-size: var(--t-s);
  line-height: 1.45;
}
@media (max-width: 560px) { .corte-anim__pie { min-height: 5.8rem; } }
.corte-anim__paso {
  position: absolute;
  inset: 0;
  opacity: 0;
  color: var(--tinta-2);
}
.corte-anim__paso b { display: block; color: var(--tinta); margin-bottom: .1rem; }
/* OJO: los pies de foto NO pueden reusar las keyframes de las fases.
   Las fases se ACUMULAN —el hueco sigue ahí cuando aparece el bache— pero
   sólo un texto debe estar encendido a la vez. Con las keyframes compartidas
   los pies 2, 3 y 4 se encimaban unos sobre otros. Cada uno lleva su
   ventana exclusiva. */
@keyframes fg-paso1 { 0%,12% {opacity:1} 17%,100% {opacity:0} }
@keyframes fg-paso2 { 0%,17% {opacity:0} 22%,36% {opacity:1} 41%,100% {opacity:0} }
@keyframes fg-paso3 { 0%,41% {opacity:0} 46%,60% {opacity:1} 65%,100% {opacity:0} }
@keyframes fg-paso4 { 0%,65% {opacity:0} 70%,93% {opacity:1} 100% {opacity:0} }
.corte-anim__paso--1 { animation: fg-paso1 12s ease-in-out infinite; }
.corte-anim__paso--2 { animation: fg-paso2 12s ease-in-out infinite; }
.corte-anim__paso--3 { animation: fg-paso3 12s ease-in-out infinite; }
.corte-anim__paso--4 { animation: fg-paso4 12s ease-in-out infinite; }
.corte-anim__paso--2, .corte-anim__paso--3, .corte-anim__paso--4 { color: #FF9B9B; }

/* Quien pidió menos movimiento ve el resultado final, quieto.
   Es la fase que más informa: el bache ya formado. */
@media (prefers-reduced-motion: reduce) {
  .fg-gota { animation: none; }
  .fg-fase2, .fg-fase3, .fg-fase4 { animation: none; opacity: 1; }
  .corte-anim__paso { animation: none !important; opacity: 0; }
  .corte-anim__paso--4 { opacity: 1; }
  .corte-anim__paso--1 { opacity: 0; }
}

/* --- Slurry: poros abiertos → mezcla llena huecos → capa de rodamiento --- */
.corte-anim--slurry .fg-sl-fase2,
.corte-anim--slurry .fg-sl-fase3 { opacity: 0; }
@keyframes fg-sl-fase2 { 0%,18% {opacity:0} 26%,93% {opacity:1} 100% {opacity:0} }
@keyframes fg-sl-fase3 { 0%,52% {opacity:0} 60%,93% {opacity:1} 100% {opacity:0} }
.corte-anim--slurry .fg-sl-fase2 { animation: fg-sl-fase2 12s ease-in-out infinite; }
.corte-anim--slurry .fg-sl-fase3 { animation: fg-sl-fase3 12s ease-in-out infinite; }
@keyframes fg-sl-paso1 { 0%,22% {opacity:1} 28%,100% {opacity:0} }
@keyframes fg-sl-paso2 { 0%,28% {opacity:0} 33%,52% {opacity:1} 58%,100% {opacity:0} }
@keyframes fg-sl-paso3 { 0%,58% {opacity:0} 64%,93% {opacity:1} 100% {opacity:0} }
.corte-anim--slurry .corte-anim__paso--1 { animation: fg-sl-paso1 12s ease-in-out infinite; }
.corte-anim--slurry .corte-anim__paso--2 { animation: fg-sl-paso2 12s ease-in-out infinite; color: #E24B4A; }
.corte-anim--slurry .corte-anim__paso--3 { animation: fg-sl-paso3 12s ease-in-out infinite; color: #8FE9C2; }

/* --- Grietas: agua por la grieta vs sellador en caliente --- */
.corte-anim--grietas .fg-gr-fase2,
.corte-anim--grietas .fg-gr-fase3,
.corte-anim--grietas .fg-gr-fase4 { opacity: 0; }
@keyframes fg-gr-fase2 { 0%,16% {opacity:0} 22%,38% {opacity:1} 44%,100% {opacity:0} }
@keyframes fg-gr-fase3 { 0%,40% {opacity:0} 46%,93% {opacity:1} 100% {opacity:0} }
@keyframes fg-gr-fase4 { 0%,64% {opacity:0} 70%,93% {opacity:.85} 100% {opacity:0} }
.corte-anim--grietas .fg-gr-fase2 { animation: fg-gr-fase2 12s ease-in-out infinite; }
.corte-anim--grietas .fg-gr-fase3 { animation: fg-gr-fase3 12s ease-in-out infinite; }
.corte-anim--grietas .fg-gr-fase4 { animation: fg-gr-fase4 12s ease-in-out infinite; }
.corte-anim--grietas .corte-anim__paso--2 { color: #FF9B9B; }
.corte-anim--grietas .corte-anim__paso--3,
.corte-anim--grietas .corte-anim__paso--4 { color: #8FE9C2; }

@media (prefers-reduced-motion: reduce) {
  .corte-anim--slurry .fg-sl-fase2,
  .corte-anim--slurry .fg-sl-fase3 { animation: none; opacity: 1; }
  .corte-anim--slurry .corte-anim__paso { animation: none !important; opacity: 0; }
  .corte-anim--slurry .corte-anim__paso--3 { opacity: 1; }
  .corte-anim--grietas .fg-gr-fase2 { animation: none; opacity: 0; }
  .corte-anim--grietas .fg-gr-fase3,
  .corte-anim--grietas .fg-gr-fase4 { animation: none; opacity: 1; }
}

/* --- Bacheo: diagrama estático (no reusa el loop de lluvia) --- */
.corte-anim--bacheo { margin: 0; }
.corte-anim--bacheo .corte-anim__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radio-s);
  background: #0C0D0F;
}
.corte-anim--bacheo .corte-anim__pie {
  position: static;
  min-height: 0;
  display: grid;
  gap: .65rem;
}
.corte-anim--bacheo .corte-anim__paso {
  position: static;
  opacity: 1;
  animation: none !important;
  color: var(--tinta-2);
}
.corte-anim--bacheo .corte-anim__paso b { color: var(--verde); }

/* Aviso del trabajo que se acumuló por esperar: a partir de cierta etapa
   ya no basta con sellar, y eso hay que decirlo junto al costo. */
.pci__extra {
  margin: var(--e-2) 0 0;
  padding: .7rem .9rem;
  border-radius: var(--radio-s);
  background: rgba(245,166,35,.10);
  border: 1px solid rgba(245,166,35,.35);
  color: #F6C87A;
  font-size: var(--t-s);
  font-weight: 600;
}

/* ============================================================
   REFERENCIA PARA ESTIMAR METROS LINEALES
   ------------------------------------------------------------
   El visitante casi nunca sabe cuánta grieta tiene. Un campo
   vacío sin ayuda es la forma más rápida de perderlo.
   ============================================================ */
.referencia {
  margin-top: .9rem;
  padding: var(--e-3);
  border-radius: var(--radio-s);
  background: var(--grafito);
  border: 1px dashed var(--linea);
}
.referencia h4 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tinta-3);
  margin-bottom: .6rem;
}
.referencia ul { margin: 0; padding-left: 1.1rem; font-size: var(--t-s); color: var(--tinta-2); }
.referencia li { margin-bottom: .35rem; }
.referencia li b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.referencia p { font-size: var(--t-xs); color: var(--tinta-3); margin: .7rem 0 0; }

/* ============================================================
   SECCIÓN DE OBRA REALIZADA
   ============================================================ */

.cifras-obra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--e-2);
  margin-top: var(--e-4);
}
.cifra-obra {
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--rojo);
  border-radius: var(--radio-s);
  padding: var(--e-3);
}
.cifra-obra b {
  display: block;
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.cifra-obra span {
  display: block;
  font-size: var(--t-s);
  color: var(--tinta-2);
  margin-top: .35rem;
  line-height: 1.35;
}

/* --- El mapa --- */
.mapa {
  margin-top: var(--e-4);
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e-3);
  overflow: hidden;
}
.mapa__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  vertical-align: top;
}
.mapa__tierra {
  fill: rgba(210, 220, 232, .16);
  stroke: #c5cdd8;
  stroke-width: 2.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mapa__disco { fill: var(--rojo); stroke: #fff; stroke-width: 1.5; }
.mapa__halo  { fill: rgba(224,27,27,.28); }
.mapa__etiqueta {
  fill: var(--tinta);
  font-size: 13px;
  font-family: var(--fuente);
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--carbon);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}
.mapa__punto { cursor: help; }
.mapa__punto:hover .mapa__disco,
.mapa__punto:focus .mapa__disco { fill: #fff; stroke: var(--rojo); }
.mapa__punto:focus { outline: none; }
.mapa__punto:focus .mapa__etiqueta { fill: var(--tinta); }
.mapa__pie {
  font-size: var(--t-xs);
  color: var(--tinta-3);
  margin: var(--e-2) 0 0;
  text-align: center;
}
.mapa__ciudades {
  display: none;
  flex-wrap: wrap;
  gap: .35rem .65rem;
  list-style: none;
  margin: var(--e-2) 0 0;
  padding: 0;
  justify-content: center;
}
.mapa__ciudades li {
  font-size: var(--t-xs);
  color: var(--tinta-2);
  font-weight: 600;
}

/* --- Tabla de las 27 obras, plegada --- */
.obras__tabla { margin-top: var(--e-3); }
.obras__tabla summary {
  cursor: pointer;
  padding: .85rem var(--e-3);
  background: var(--grafito);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  font-size: var(--t-s);
  font-weight: 700;
  color: var(--tinta-2);
  list-style: none;
}
.obras__tabla summary::-webkit-details-marker { display: none; }
.obras__tabla summary::before { content: "▸ "; color: var(--rojo); }
.obras__tabla[open] summary::before { content: "▾ "; }
.obras__tabla summary:hover { color: var(--tinta); border-color: var(--tinta-3); }

.tabla-scroll { overflow-x: auto; margin-top: var(--e-2); }
.obras__tabla table { width: 100%; border-collapse: collapse; font-size: var(--t-s); min-width: 380px; }
.obras__tabla th {
  text-align: left;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-3);
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--linea);
}
.obras__tabla td { padding: .55rem .8rem; border-bottom: 1px solid var(--linea); color: var(--tinta-2); }
.obras__tabla td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; }
.obras__tabla tfoot td { font-weight: 800; color: var(--tinta); border-top: 2px solid var(--rojo); border-bottom: 0; }

/* --- Recontratación --- */
.recontratacion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--e-2);
  margin-top: var(--e-3);
}
.recontrata {
  background: var(--grafito);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  padding: var(--e-2);
  text-align: center;
}
.recontrata b { display: block; font-size: 1.05rem; }
.recontrata__linea {
  display: flex; justify-content: center; align-items: center; gap: .4rem;
  margin-top: .35rem; font-size: var(--t-xs); color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}
.recontrata__linea i { font-style: normal; color: var(--rojo); font-weight: 800; }
.recontrata em { display: block; font-style: normal; font-size: var(--t-s); color: var(--verde); font-weight: 700; margin-top: .3rem; }

/* --- Casos a detalle --- */
.casos-obra { display: grid; gap: var(--e-3); margin-top: var(--e-4); }
@media (min-width: 900px) { .casos-obra { grid-template-columns: 1fr 1fr; } }

.caso-obra {
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.caso-obra__foto { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.caso-obra__cuerpo { padding: var(--e-3); display: flex; flex-direction: column; flex: 1; }
.caso-obra__sub { font-size: var(--t-s); color: var(--rojo); font-weight: 700; margin: .25rem 0 0; }
.caso-obra__datos {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .5rem; margin-top: var(--e-2);
  padding-block: var(--e-2); border-block: 1px solid var(--linea);
}
.caso-obra__datos span { display: block; font-size: var(--t-xs); color: var(--tinta-3); text-transform: uppercase; letter-spacing: .06em; }
.caso-obra__datos b { display: block; font-size: 1.02rem; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.caso-obra__porque { font-size: var(--t-s); margin-top: var(--e-2); }
.caso-obra__crono { margin: var(--e-2) 0 0; padding-left: 1.1rem; font-size: var(--t-s); color: var(--tinta-2); }
.caso-obra__crono li { margin-bottom: .3rem; }
.caso-obra__crono b { color: var(--tinta); }

/* --- Anécdotas --- */
.anecdotas { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--e-3); margin-top: var(--e-4); }
.anecdota {
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--rojo);
  border-radius: var(--radio-s);
  padding: var(--e-3);
  display: flex; flex-direction: column;
}
.anecdota__ciudad {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: var(--e-2);
}
.anecdota__paso { margin-bottom: .8rem; }
.anecdota__paso span {
  display: block; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .09em; color: var(--tinta-3); font-weight: 700; margin-bottom: .2rem;
}
.anecdota__paso p { margin: 0; font-size: var(--t-s); }
.anecdota__paso.es-resultado span { color: var(--verde); }
.anecdota__paso.es-resultado p { color: var(--tinta); font-weight: 600; }
.anecdota__demuestra {
  margin-top: auto; padding-top: var(--e-2); border-top: 1px solid var(--linea);
  font-size: var(--t-s); color: var(--tinta-2); font-style: italic;
}

/* ============================================================
   DENSIDAD EN CELULAR
   ------------------------------------------------------------
   En celular todo se apila en una columna y la página crecía a
   ~21,000 px: unas 25 pantallas de scroll. No sobraba contenido
   —sobraba aire y sobraban columnas de uno—. Esto aprieta el
   espaciado y pone en dos columnas lo que cabe, sin quitar nada.
   ============================================================ */
@media (max-width: 620px) {

  /* El respiro entre secciones baja de 88 a 52 px. Con siete
     secciones eso solo son ~500 px menos de scroll. */
  :root { --e-6: 3.25rem; --e-5: 2.5rem; }

  /* Cuatro cifras en columna eran cuatro pantallazos. En 2×2 se
     leen de un vistazo, que es justo para lo que sirven. */
  .cifras-obra { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .cifra-obra { padding: var(--e-2); }
  .cifra-obra b { font-size: 1.45rem; }
  .cifra-obra span { font-size: var(--t-xs); }

  /* Las cinco recontrataciones son datos cortos: caben de dos en dos. */
  .recontratacion { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .recontrata { padding: .8rem .5rem; }
  .recontrata b { font-size: .95rem; }

  /* Las credenciales igual. */
  .credenciales__lista { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .credenciales li { font-size: var(--t-xs); }
  .credenciales b { font-size: .95rem; }

  /* Los bloques de resultado del cotizador. */
  .resultado__cifras { grid-template-columns: 1fr 1fr; gap: .6rem; }

  .portada,
  .portada--interior { min-height: 0; }
  .portada__contenido { padding-block: var(--e-4); }
  .mapa { padding: var(--e-2); }
  .mapa__ciudades { display: flex; }
  /* En ~375–532 px las 18 etiquetas no caben sobre la geografía: se
     leían como un listado. Quedan los puntos; el nombre sale al tocar
     (el pie del mapa ya lo dice). */
  .mapa__etiqueta { display: none; }
  .mapa__punto:focus .mapa__etiqueta,
  .mapa__punto:hover .mapa__etiqueta { display: block; }
}