/* ============================================================
   HYPROX — Estilos sitio 4.0
   Contenido y componentes del sitio 2.0 sobre la estructura
   visual de la propuesta v3 (jul 2026), ya con la identidad
   Rosa Mango (jul 2026): header fijo que se entinta al hacer
   scroll con el logotipo blanco, hero editorial de texto
   mínimo, Afacad en todo el sistema (etiquetas en versalitas
   espaciadas), botones rectos. La fotografía y el color van de
   borde a borde; el texto va en la retícula.
   Mobile-first. Todos los valores de color y tipografía vienen
   de tokens.css.
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--fuente);
  font-weight: var(--peso-normal);
  font-size: var(--texto-base);
  line-height: var(--interlineado);
  color: var(--color-texto);
  background: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--color-acento); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--color-acento-hover); }

h1, h2, h3 {
  color: var(--color-titulo);
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  line-height: var(--interlineado-titulos);
  letter-spacing: var(--letter-spacing-display);
  text-wrap: balance;
}

::selection { background: var(--color-acento); color: var(--color-texto-invertido); }

.contenedor {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0 var(--esp-3);
}

/* ------------------------------------------------------------
   Header y navegación (sistema v3: barra fija que arranca
   transparente sobre el hero y se entinta al hacer scroll)
   ------------------------------------------------------------ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: transparent;
  /* El mismo filete lima que cierra la placa del hero. Solo aparece cuando
     la barra se entinta al hacer scroll; mientras está transparente sobre
     la foto el borde se reserva en transparente para que no brinque la
     altura (Pedro, 2026-07-28). */
  border-bottom: 3px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.header.compacto {
  background: var(--color-fondo-oscuro);
  border-bottom-color: var(--marca-lima);
}
/* Artículo de blog: sin hero, la barra entintada se queda fija desde
   el inicio en vez de esperar el scroll (Pedro, 2026-07-29). */
.header.header-fijo {
  background: var(--color-fondo-oscuro);
  border-bottom-color: var(--marca-lima);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  min-height: var(--alto-header);
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Marca: logotipo principal Rosa Mango, monocromo blanco. El header
   vive siempre sobre foto oscura o sobre la barra entintada, así que
   la versión blanca es la única que aplica (ver CONTEXTO-COLOR-E-IMAGENES,
   sección 3). El descriptor "Ingeniería Hidráulica" ya viene dentro del
   logotipo: no se repite como texto suelto. */
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca img {
  height: var(--alto-logo-header);
  width: auto;
}
@media (max-width: 560px) { .marca img { height: 36px; } }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radio-chico);
  cursor: pointer;
  padding: 10px;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-texto-invertido);
  transition: transform var(--transicion), opacity var(--transicion);
}

.nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* baja los 3px del filete lima del header para no taparlo al abrirse */
  margin-top: 3px;
  background: var(--color-fondo-oscuro);
  padding: var(--esp-2) var(--esp-3) var(--esp-3);
}
.nav.abierta { display: block; }

.nav ul { list-style: none; }
.nav li { margin-bottom: var(--esp-1); }
.nav a {
  display: block;
  padding: 10px 0;
  color: rgba(255, 255, 255, 0.88);
  font-weight: var(--peso-medio);
  font-size: var(--texto-nav);
  border-bottom: 1px solid var(--color-linea-oscura);
}
.nav a:hover { color: var(--marca-lima); }
.nav a[aria-current="page"] { color: var(--marca-lima); }

.boton {
  display: inline-block;
  background: var(--color-acento);
  color: var(--color-texto-invertido);
  font-weight: var(--peso-medio);
  padding: 12px 24px;
  border-radius: var(--radio-chico);
  transition: background var(--transicion);
}
.boton:hover { background: var(--color-acento-hover); color: var(--color-texto-invertido); }

.boton-secundario {
  display: inline-block;
  color: var(--color-acento-hover);
  font-weight: var(--peso-medio);
  padding: 12px 8px;
}

/* Botón fantasma (v3): borde claro sobre foto o banda oscura */
.boton-fantasma {
  display: inline-block;
  color: var(--color-texto-invertido);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radio-chico);
  font-weight: var(--peso-medio);
  padding: 11px 23px;
  transition: border-color var(--transicion), background var(--transicion);
}
.boton-fantasma:hover {
  border-color: var(--color-texto-invertido);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-texto-invertido);
}

/* Botón de WhatsApp del header: el CTA permanente del funnel */
.nav .boton-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-acento);
  color: var(--color-texto-invertido);
  border: none;
  padding: 10px 18px;
  border-radius: var(--radio-chico);
  margin-top: var(--esp-2);
}
.nav .boton-wa:hover { background: var(--color-acento-hover); color: var(--color-texto-invertido); }
.nav .boton-wa svg { flex-shrink: 0; }

/* Los nombres del menú por especialidad no caben antes de 1100px
   (lección del sitio 1, 2026-07-02). */
@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .nav { display: block; position: static; background: transparent; border: none; padding: 0; margin-top: 0; }
  .nav ul { display: flex; align-items: center; gap: var(--esp-3); }
  .nav li { margin: 0; }
  .nav a { border-bottom: none; padding: 6px 0; }
  .nav .boton-wa { margin: 0; padding: 10px 18px; }
}

/* Botón flotante de WhatsApp (solo móvil/tablet: en escritorio
   el CTA vive fijo en el header) */
.whatsapp-flotante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: var(--color-texto-invertido);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transition: background var(--transicion), transform var(--transicion);
}
.whatsapp-flotante:hover { background: var(--color-whatsapp-hover); color: var(--color-texto-invertido); transform: translateY(-2px); }
.whatsapp-flotante svg { width: 28px; height: 28px; }
@media (min-width: 1100px) { .whatsapp-flotante { display: none; } }

/* ------------------------------------------------------------
   Hero editorial: foto de borde a borde, título encima.
   Texto mínimo sobre la foto (regla 2026-07-03): solo el H1
   y, si acaso, los botones. Velo suave solo-abajo.
   ------------------------------------------------------------ */
.hero-editorial {
  position: relative;
  isolation: isolate;
  min-height: clamp(440px, 74vh, 720px);
  display: flex;
  align-items: flex-end;
  background: var(--color-fondo-oscuro);
  overflow: hidden;
}
.hero-editorial .fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-editorial .fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Velo v3: más presencia arriba (legibilidad del header fijo)
   y remate oscuro abajo para el texto */
.hero-editorial .fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 27, 56, 0.62) 0%, rgba(17, 27, 56, 0.28) 26%, rgba(17, 27, 56, 0.34) 55%, rgba(12, 19, 41, 0.94) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-editorial .fondo img { animation: hero-zoom 24s ease-out forwards; }
  @keyframes hero-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
  }
}

/* Velo reforzado: para fotos de hero más claras que el resto (aquí,
   /instalaciones-hidrosanitarias — el cuarto de máquinas es mucho más
   luminoso que las demás), el velo estándar deja el header con menos
   contraste que en el resto del sitio. Misma curva, tope más alto
   (Pedro, 2026-08-03: "no concuerda con toda la página"). */
.hero-editorial.velo-reforzado .fondo::after {
  background: linear-gradient(180deg, rgba(17, 27, 56, 0.82) 0%, rgba(17, 27, 56, 0.42) 26%, rgba(17, 27, 56, 0.46) 55%, rgba(12, 19, 41, 0.94) 100%);
}
.hero-editorial .contenedor { padding-top: var(--esp-6); padding-bottom: var(--esp-5); }
.hero-editorial h1 {
  font-size: var(--titulo-hero);
  line-height: 1;
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-texto-invertido);
  max-width: 16ch;
}
/* En el hero el H1 va todo en blanco: el teal sobre foto se lava
   (regla 2026-07-03). El acento vive en los H2 de sección. */
.hero-editorial h1 em { font-style: normal; color: inherit; }

.hero-acciones {
  margin-top: var(--esp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}
.hero-editorial .boton-secundario { color: var(--color-texto-invertido); }
.hero-editorial .boton-secundario:hover { color: var(--color-acento); }

/* Hero "Placa" (home, 2026-07-28 — mockup A elegido por Pedro):
   la satelital a sangrado y una placa angosta de azul tinta traslúcida
   a la derecha, con filete lima arriba y abajo. El contraste del texto
   lo da la placa, así que el velo de la foto se aligera y deja de
   oscurecer la parte de abajo. */
.hero-editorial.hero-placa {
  /* Sin "height" fijo: una altura rígida competía con el padding-top de
     abajo y la caja seguía empalmándose con la barra fija en ventanas
     bajas (Pedro, 2026-07-29 — dos rondas). min-height solo pone el piso
     para pantallas grandes; en el resto la sección crece lo que la caja
     (título de hasta 4 líneas + bajada + botones) necesite para no
     encimarse con el header. */
  min-height: min(92vh, 900px);
}
/* Velo solo arriba: lo justo para que el logotipo blanco del header
   se lea sobre la foto. */
.hero-placa .fondo::after {
  background: linear-gradient(180deg, rgba(17, 27, 56, 0.72) 0%, rgba(17, 27, 56, 0.2) 24%, rgba(17, 27, 56, 0.06) 48%, rgba(17, 27, 56, 0.22) 100%);
}
.hero-placa .contenedor {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  /* la placa se sale de la retícula y se recarga hacia el borde derecho */
  max-width: none;
  padding-right: clamp(var(--esp-3), 5vw, var(--esp-6));
  /* deja aire bajo el header fijo (y el WhatsApp del menú) antes de que
     empiece la placa, aunque la caja crezca por un h1 de varias líneas
     (Pedro, 2026-07-29: se empalmaban en ventanas bajas) */
  padding-top: calc(var(--alto-header) + var(--esp-4));
}
.hero-placa-caja {
  max-width: 25rem;
  padding: var(--esp-4);
  background: rgba(17, 27, 56, 0.88);
  border-top: 3px solid var(--marca-lima);
  border-bottom: 3px solid var(--marca-lima);
  box-shadow: 0 18px 48px rgba(12, 19, 41, 0.35);
}
/* 0.86 es el techo de transparencia: por debajo, la bajada en azul
   complementario cae de 4.5:1 sobre las zonas más claras de la foto. */
@supports (backdrop-filter: blur(6px)) {
  .hero-placa-caja { background: rgba(17, 27, 56, 0.86); backdrop-filter: blur(6px); }
}
.hero-editorial.hero-placa h1 {
  font-size: clamp(2rem, 2.7vw, 2.85rem);
  line-height: 1.04;
  max-width: none;
  /* A este tamaño más chico el tracking general (--letter-spacing-display)
     da muy pocos px reales y Sewimple Pol se ve pegada; un poco más solo
     aquí (Pedro, 2026-07-29). */
  letter-spacing: 0.07em;
}
.hero-placa-bajada {
  margin-top: var(--esp-3);
  color: var(--color-texto-sobre-oscuro);
  font-size: var(--texto-base);
}
.hero-placa .hero-acciones { margin-top: var(--esp-3); }
/* Abajo de 760px la placa deja de flotar y toma el ancho de la retícula */
@media (max-width: 760px) {
  .hero-placa .contenedor { justify-content: stretch; }
  .hero-placa-caja { max-width: none; width: 100%; padding: var(--esp-3); }
}

/* Variante compacta para páginas de apoyo (contacto, faq):
   banda oscura sin foto, título grande. */
.hero-plano {
  background: var(--color-fondo-oscuro);
  /* deja pasar el header fijo por encima */
  padding: calc(var(--esp-6) + var(--alto-header)) 0 var(--esp-5);
}
.hero-plano h1 {
  font-size: clamp(2.4rem, 6.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-texto-invertido);
  max-width: 20ch;
}
.hero-plano .bajada {
  margin-top: var(--esp-3);
  color: var(--color-texto-sobre-oscuro);
  font-size: var(--texto-grande);
  max-width: 52ch;
}

/* ------------------------------------------------------------
   Secciones y tipografía de sección
   ------------------------------------------------------------ */
.seccion { padding: var(--esp-6) 0; }
.seccion-alterna { background: var(--color-fondo-alterno); }

.seccion h2 { font-size: var(--titulo-h2); letter-spacing: var(--letter-spacing-display); max-width: 26ch; }
.seccion h2 em { font-style: normal; color: inherit; }

.seccion .intro {
  margin-top: var(--esp-2);
  max-width: 62ch;
  color: var(--color-texto-suave);
  font-size: var(--texto-grande);
}

/* Kicker tipo índice de plano (v3): mono + línea */
.section-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--fuente-etiqueta);
  font-size: var(--texto-mini);
  font-weight: var(--peso-medio);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-acento);
  margin-bottom: 12px;
}
.section-label::after {
  content: "";
  flex: 0 0 56px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.section-label-white { color: var(--marca-lima); }

/* ------------------------------------------------------------
   Narrativa: texto con sangría editorial (columna vacía a la
   izquierda desde 900px — el aire ES el diseño)
   ------------------------------------------------------------ */
.narrativa { display: grid; gap: var(--esp-3); }
@media (min-width: 900px) {
  .narrativa { grid-template-columns: 1fr 1.9fr; }
  .narrativa > * { grid-column: 2; }
}
.narrativa p { font-size: var(--texto-grande); max-width: 58ch; }
.narrativa p + p { margin-top: var(--esp-2); }
.narrativa strong { color: var(--color-titulo); font-weight: var(--peso-medio); }

/* Narrativa a dos columnas (referente jacobs.com, 2026-07-03): titular
   grande a la izquierda, párrafos a la derecha. Variante para el home;
   .narrativa (sangría) se deja intacta para el resto de páginas. */
.narrativa-dos-columnas { display: grid; gap: var(--esp-3); }
@media (min-width: 900px) {
  .narrativa-dos-columnas { grid-template-columns: 1fr 1fr; gap: var(--esp-5); align-items: start; }
}
.narrativa-dos-columnas h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-display);
  max-width: 16ch;
}
.narrativa-dos-columnas p { font-size: var(--texto-grande); max-width: 54ch; }
.narrativa-dos-columnas p + p { margin-top: var(--esp-2); }

/* ------------------------------------------------------------
   Fotografía al sangrado completo: sin marco, sin radio
   ------------------------------------------------------------ */
.foto-sangrado { margin: 0; }
.foto-sangrado img {
  display: block;
  width: 100%;
  height: clamp(320px, 62vh, 640px);
  object-fit: cover;
}
.foto-sangrado figcaption { padding-top: var(--esp-1); }

/* ------------------------------------------------------------
   Figura flotante: imagen chica (tamaño de cita) dentro de un bloque
   de texto de una sola columna, sin pie de foto. Para fotos que no
   deben dominar la sección — el modelo BIM es demasiado vertical y
   grande para ir en columna ancha o a sangre completa (Pedro,
   2026-08-04, mockup 2 elegido).
   ------------------------------------------------------------ */
.figura-flotante {
  float: right;
  width: 240px;
  margin: 0.3rem 0 var(--esp-3) var(--esp-4);
}
.figura-flotante img {
  width: 100%;
  display: block;
  border: 1px solid var(--color-borde);
  box-shadow: var(--sombra);
}
@media (max-width: 640px) {
  .figura-flotante { float: none; width: 100%; margin: 0 0 var(--esp-3); }
}

.pie-foto {
  margin-top: var(--esp-1);
  font-family: var(--fuente-etiqueta);
  font-size: var(--texto-mini);
  letter-spacing: 0.04em;
  color: var(--color-texto-suave);
}

/* ------------------------------------------------------------
   Split: mitad foto (al borde del viewport), mitad texto
   (alineado a la retícula del contenido)
   ------------------------------------------------------------ */
.split { display: grid; }
.split-foto { min-height: 320px; }
.split-foto img,
.split-foto .foto-pendiente {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: none;
  border-radius: 0;
  min-height: 320px;
}
.split-texto {
  padding: var(--esp-5) var(--esp-3);
  align-self: center;
}
.split-texto h2 { font-size: var(--titulo-h2); letter-spacing: var(--letter-spacing-display); }
.split-texto h3 { font-size: var(--titulo-pilar); letter-spacing: var(--letter-spacing-display); line-height: 1.15; }
.split-texto h2 em,
.split-texto h3 em { font-style: normal; color: inherit; }
.split-texto p { margin-top: var(--esp-2); max-width: 48ch; color: var(--color-texto-suave); }
.split-texto p:first-child { margin-top: 0; }
.split-texto .ver-mas { margin-top: var(--esp-3); }

@media (min-width: 900px) {
  /* grid-auto-flow: dense — sin esto, .split-invertida manda el texto
     a una fila nueva en vez de rellenar la celda libre. */
  .split { grid-template-columns: 1fr 1fr; grid-auto-flow: dense; align-items: stretch; }
  .split-foto { min-height: 480px; }
  .split-texto {
    width: 100%;
    max-width: calc(var(--ancho-contenido) / 2);
    justify-self: end;
    padding-right: var(--esp-5);
  }
  .split-texto.derecha { justify-self: start; padding-right: var(--esp-3); padding-left: var(--esp-5); }
  .split-invertida .split-foto { grid-column: 2; }
  .split-invertida .split-texto { grid-column: 1; }
}

/* Variante con respiro: para cuando el split queda entre dos elementos
   de foto sin padding propio (hero, foto-sangrado) y necesita separación. */
.split-respiro { margin: var(--esp-6) 0; }

/* Respiro ampliado a 1.2x: solo para la sección con la lupa (pidió más
   aire alrededor). No toca el margen del resto de .split-respiro. */
.split-respiro-amplio { margin: calc(var(--esp-6) * 1.2) 0; }

/* ------------------------------------------------------------
   Lupa: el plano sobre la aérea. Sección "Fraccionamientos y
   parques industriales" en /hidraulica-urbana. Se ve el desarrollo
   ya construido y, donde pasa el cursor, aparece el plano con el
   que se construyó (agua potable, sanitario y pluvial).

   Mecanismo: el círculo sigue al cursor exactamente, sin freno ni
   clamp. Lo recorta el propio marco (overflow: hidden) — pegado a
   una orilla se ve medio círculo, y en una esquina, un cuarto. Es
   la decisión de Pedro: prefiere el corte a que el círculo pierda
   precisión seteando al cursor.
   ------------------------------------------------------------ */
@property --lupa-x { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --lupa-y { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --lupa-r { syntax: '<length>'; inherits: true; initial-value: 0px; }

.lupa {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 256px;          /* 0.8x del tamaño original (320px) */
  overflow: hidden;
  background: var(--color-fondo-oscuro);
  --lupa-x: 50%;
  --lupa-y: 50%;
  --lupa-r: 0px;              /* en reposo no hay círculo */
  --lupa-r-abierta: 105px;    /* 0.7x del tamaño original (150px) */
  cursor: crosshair;
  touch-action: pan-y;
}
.lupa img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.lupa-plano {
  z-index: 2;
  -webkit-mask-image: radial-gradient(circle var(--lupa-r) at var(--lupa-x) var(--lupa-y), #000 92%, transparent 100%);
  mask-image: radial-gradient(circle var(--lupa-r) at var(--lupa-x) var(--lupa-y), #000 92%, transparent 100%);
  /* Solo el radio lleva transición. Si la posición también la
     llevara, el círculo iría siempre un pelo atrás del cursor y se
     sentiría pegajoso — y encima llegaría tarde a la orilla. */
  transition: --lupa-r 0.26s cubic-bezier(0.16, 0.8, 0.3, 1);
}
.lupa-aro {
  position: absolute;
  left: var(--lupa-x);
  top: var(--lupa-y);
  width: calc(var(--lupa-r) * 2);
  height: calc(var(--lupa-r) * 2);
  margin: calc(var(--lupa-r) * -1) 0 0 calc(var(--lupa-r) * -1);
  border: 1px solid rgba(17, 27, 56, 0.45);
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  transition: --lupa-r 0.26s cubic-bezier(0.16, 0.8, 0.3, 1);
}
.lupa.abierta { --lupa-r: var(--lupa-r-abierta); }

.lupa-pista {
  position: absolute;
  left: 50%;
  bottom: var(--esp-3);
  transform: translateX(-50%);
  z-index: 4;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--fuente-etiqueta);
  font-size: var(--texto-mini);
  font-weight: var(--peso-medio);
  background: rgba(17, 27, 56, 0.86);
  color: var(--color-texto-invertido);
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.lupa.tocada .lupa-pista { opacity: 0; }

/* Sin cursor (celular / tablet): el círculo se pasea solo. Aquí sí
   puede quedar a media orilla si la ruta lo acerca al borde — es el
   mismo criterio que con el cursor real. */
.lupa.pasea .lupa-plano,
.lupa.pasea .lupa-aro { animation: lupaPaseo 15s ease-in-out infinite; transition: none; }
@keyframes lupaPaseo {
  0%,  100% { --lupa-x: 24%; --lupa-y: 40%; --lupa-r: 0px; }
  8%,  25%  { --lupa-r: 81px; }
  30%       { --lupa-x: 24%; --lupa-y: 40%; --lupa-r: 0px; }
  38%       { --lupa-x: 58%; --lupa-y: 64%; --lupa-r: 0px; }
  45%, 62%  { --lupa-x: 58%; --lupa-y: 64%; --lupa-r: 81px; }
  68%       { --lupa-x: 58%; --lupa-y: 64%; --lupa-r: 0px; }
  74%       { --lupa-x: 80%; --lupa-y: 36%; --lupa-r: 0px; }
  80%, 92%  { --lupa-x: 80%; --lupa-y: 36%; --lupa-r: 81px; }
  97%       { --lupa-x: 80%; --lupa-y: 36%; --lupa-r: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .lupa.pasea .lupa-plano, .lupa.pasea .lupa-aro { animation: none; }
  .lupa.pasea { --lupa-r: 81px; --lupa-x: 50%; --lupa-y: 50%; }
}
@media (max-width: 1100px) { .lupa { --lupa-r-abierta: 83px; } }
@media (max-width: 600px)  { .lupa { --lupa-r-abierta: 64px; } }

/* Tamaño de foto reducido a 0.8x: solo en esta sección. El ancho
   sigue al sangrado del viewport (regla de .split-foto); lo único
   que baja es la altura. */
.split-foto-lupa { min-height: 256px; }
@media (min-width: 900px) { .split-foto-lupa { min-height: 384px; } }

/* Variante oscura del split (banda de borde a borde) */
.split-oscura { background: var(--color-fondo-oscuro); }
.split-oscura .split-texto h2 { color: var(--color-texto-invertido); }
.split-oscura .split-texto p { color: var(--color-texto-sobre-oscuro); }
.split-oscura .split-texto h2 em { color: inherit; }

/* ------------------------------------------------------------
   Banda partida: mitad oscura con la sentencia del problema,
   mitad clara con el proceso en pasos (reutiliza .pasos/.paso-num).
   Full-bleed en los dos colores; el texto respeta la retícula del
   contenido igual que .split-texto (alineado al centro visual).
   ------------------------------------------------------------ */
.banda-partida { display: grid; }
.banda-partida-oscura,
.banda-partida-clara { padding: var(--esp-5) var(--esp-3); }
.banda-partida-oscura { background: var(--color-fondo-oscuro); color: var(--color-texto-invertido); }
.banda-partida-oscura p { color: var(--color-texto-sobre-oscuro); }
.banda-partida-oscura p + p { margin-top: var(--esp-2); }
.banda-partida-sentencia {
  font-family: var(--fuente-display);
  letter-spacing: var(--letter-spacing-display);
  font-size: var(--titulo-pilar);
  line-height: var(--interlineado-titulos);
  max-width: 20ch;
  margin-bottom: var(--esp-3);
}
.banda-partida-clara h2 { font-size: var(--titulo-h2); letter-spacing: var(--letter-spacing-display); max-width: 18ch; }
.banda-partida-clara h2 em { font-style: normal; color: inherit; }
.banda-partida-clara .pasos { margin-top: var(--esp-3); }

@media (min-width: 900px) {
  /* Sin align-items: center — con eso, la columna más corta (oscura)
     quedaba flotando a la mitad de la fila y el fondo claro se colaba
     arriba y abajo de ella (Pedro, 2026-08-03). Cada columna se estira
     a la altura completa de la fila (fondo full-bleed real) y el texto
     se ancla arriba; si un lado trae menos texto, lo que sobra es más
     de su propio color, no un hueco en blanco. */
  .banda-partida { grid-template-columns: 1fr 1fr; }
  .banda-partida-oscura,
  .banda-partida-clara { display: flex; align-items: flex-start; padding-top: var(--esp-5); padding-bottom: var(--esp-5); }
  .banda-partida-oscura { justify-content: flex-end; padding-right: var(--esp-5); }
  .banda-partida-clara { justify-content: flex-start; padding-left: var(--esp-5); }
  .banda-partida-oscura > *,
  .banda-partida-clara > * { max-width: calc(var(--ancho-contenido) / 2 - var(--esp-3)); width: 100%; }
}

/* Franja de acento: corte de color entre secciones, sin texto.
   Full-bleed. Azul lavado (--color-fondo-suave, derivado del
   complementario A6BEED): separador visible pero de fondo claro,
   no un filete (Pedro, 2026-08-03: 4x el grueso original de 8px). */
.franja-acento { height: 32px; background: var(--color-fondo-suave); }

/* ------------------------------------------------------------
   Medidor de avance: barra segmentada tipo instrumento (no lista,
   no dos columnas). Cada etapa es una columna (segmento + folio +
   guía + ficha) para poder ligar el hover de la ficha con su
   segmento en la barra. Reemplaza el layout "lo que hacemos / lo
   que necesitamos" en /factibilidades (Pedro, 2026-08-03).
   ------------------------------------------------------------ */
.medidor { margin-top: var(--esp-4); }
.medidor-columnas { display: grid; gap: var(--esp-3); }

.medidor-segmento { display: block; height: 10px; background: var(--color-borde); transition: background-color var(--transicion); }
.medidor-lleno { background: var(--color-acento-claro); }
.medidor-actual { background: var(--color-acento); }
.medidor-etapa:hover .medidor-segmento { background: var(--color-acento); }

.medidor-folio {
  display: block;
  margin-top: var(--esp-1);
  font-family: var(--fuente-etiqueta);
  font-size: var(--texto-mini);
  letter-spacing: 0.08em;
  color: var(--color-texto-suave);
  font-variant-numeric: tabular-nums;
  transition: color var(--transicion);
}
.medidor-etapa:hover .medidor-folio { color: var(--color-acento); }

.medidor-guia { display: none; }

.medidor-ficha h3 { font-size: 1.05rem; margin-bottom: 6px; transition: color var(--transicion); }
.medidor-ficha p { font-size: var(--texto-chico); color: var(--color-texto-suave); }
.medidor-destino h3 { color: var(--color-acento); }
.medidor-destino p { color: var(--color-texto); }
.medidor-etapa:hover .medidor-ficha h3 { color: var(--color-acento); }

/* Móvil: la barra/folio/guía se ocultan y las etapas caen a una
   cronología vertical (mismo lenguaje que .pasos, sin duplicar CSS
   de la barra que solo tiene sentido en horizontal). */
.medidor-etapa { position: relative; padding: 0 0 var(--esp-3) 44px; }
.medidor-etapa::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  bottom: -6px;
  width: 2px;
  background: var(--color-borde);
}
.medidor-etapa:last-of-type { padding-bottom: 0; }
.medidor-etapa:last-of-type::before { display: none; }
.medidor-etapa::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-acento-claro);
}
.medidor-etapa:last-of-type::after { border-color: var(--color-acento); }
.medidor-etapa .medidor-segmento,
.medidor-etapa .medidor-folio { display: none; }

@media (min-width: 900px) {
  .medidor-columnas { grid-template-columns: repeat(5, 1fr); }
  .medidor-etapa { padding: 0; }
  .medidor-etapa::before,
  .medidor-etapa::after { display: none; }
  .medidor-etapa .medidor-segmento,
  .medidor-etapa .medidor-folio { display: block; }
  .medidor-guia {
    display: block;
    position: relative;
    height: 2.4rem;
  }
  .medidor-guia::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 1px;
    height: 100%;
    background: var(--color-borde);
    transition: background-color var(--transicion);
  }
  .medidor-guia::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 14px;
    height: 1px;
    background: var(--color-borde);
    transition: background-color var(--transicion);
  }
  .medidor-etapa:hover .medidor-guia::before,
  .medidor-etapa:hover .medidor-guia::after { background: var(--color-acento); }
}

/* Movimiento: el instrumento "arranca" cuando la sección entra a la
   vista (reutiliza el observer de .reveal: .medidor ya trae esa
   clase, así que main.js le agrega .visible solo). La barra se llena
   de izquierda a derecha, las guías bajan, las fichas aparecen en
   cascada, y el tramo actual queda con un pulso casi imperceptible.
   El hover apaga el pulso y manda sobre el color. */
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 900px) {
    .medidor-segmento { transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease, background-color var(--transicion); }
    .medidor.visible .medidor-segmento { transform: scaleX(1); }
    .medidor-columnas .medidor-etapa:nth-child(1) .medidor-segmento { transition-delay: 0s, 0s; }
    .medidor-columnas .medidor-etapa:nth-child(2) .medidor-segmento { transition-delay: .09s, 0s; }
    .medidor-columnas .medidor-etapa:nth-child(3) .medidor-segmento { transition-delay: .18s, 0s; }
    .medidor-columnas .medidor-etapa:nth-child(4) .medidor-segmento { transition-delay: .27s, 0s; }
    .medidor-columnas .medidor-etapa:nth-child(5) .medidor-segmento { transition-delay: .36s, 0s; }

    .medidor-guia::before { transform: scaleY(0); transform-origin: top; }
    .medidor.visible .medidor-guia::before { transform: scaleY(1); }
    .medidor-columnas .medidor-etapa:nth-child(1) .medidor-guia::before { transition-delay: .35s, 0s; }
    .medidor-columnas .medidor-etapa:nth-child(2) .medidor-guia::before { transition-delay: .44s, 0s; }
    .medidor-columnas .medidor-etapa:nth-child(3) .medidor-guia::before { transition-delay: .53s, 0s; }
    .medidor-columnas .medidor-etapa:nth-child(4) .medidor-guia::before { transition-delay: .62s, 0s; }
    .medidor-columnas .medidor-etapa:nth-child(5) .medidor-guia::before { transition-delay: .71s, 0s; }
    .medidor-guia::after { opacity: 0; transition: opacity .2s ease, background-color var(--transicion); }
    .medidor.visible .medidor-guia::after { opacity: 1; transition-delay: .55s, 0s; }

    .medidor-ficha { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
    .medidor.visible .medidor-ficha { opacity: 1; transform: none; }
    .medidor-columnas .medidor-etapa:nth-child(1) .medidor-ficha { transition-delay: .5s; }
    .medidor-columnas .medidor-etapa:nth-child(2) .medidor-ficha { transition-delay: .58s; }
    .medidor-columnas .medidor-etapa:nth-child(3) .medidor-ficha { transition-delay: .66s; }
    .medidor-columnas .medidor-etapa:nth-child(4) .medidor-ficha { transition-delay: .74s; }
    .medidor-columnas .medidor-etapa:nth-child(5) .medidor-ficha { transition-delay: .82s; }

    .medidor.visible .medidor-actual { animation: medidor-pulso 2.6s ease-in-out 1.1s infinite; }
    .medidor-etapa:hover .medidor-actual { animation: none; opacity: 1; }
    @keyframes medidor-pulso {
      0%, 100% { opacity: 1; }
      50% { opacity: .62; }
    }
  }
}

/* Numeración editorial de los splits de servicios */
.split-num {
  display: inline-block;
  font-family: var(--fuente-etiqueta);
  font-size: var(--texto-mini);
  font-weight: var(--peso-medio);
  letter-spacing: 0.16em;
  color: var(--color-acento);
  margin-bottom: 12px;
}

/* ------------------------------------------------------------
   Índice de servicios: kicker + lista corta de los servicios
   que vienen a continuación (home).
   ------------------------------------------------------------ */
/* Índice de servicios: la fila lleva el doble de cuerpo y la mitad de
   aire arriba y abajo (Pedro, 2026-07-28). Es un índice, no una sección:
   tiene que leerse de un vistazo y no ocupar una pantalla. */
.seccion:has(> .contenedor > .indice-servicios) { padding: var(--esp-4) 0; }
.indice-servicios {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  flex-wrap: wrap;
}
.indice-servicios .section-label { font-size: calc(var(--texto-base) * 1.4); margin-bottom: 0; }
.indice-servicios-lista {
  display: flex;
  gap: var(--esp-4);
  flex-wrap: wrap;
  font-size: calc(var(--texto-chico) * 1.6);
  line-height: 1.2;
  color: var(--color-texto-suave);
}
.indice-servicios-lista b { color: var(--color-texto); font-weight: var(--peso-medio); }
/* Los números en lima, como pidió Pedro. Sobre el fondo claro el lima da
   1.04:1 y no se ve, así que cada número va sobre una plaquita de azul
   tinta — que además es la única superficie donde el manual lo permite. */
.indice-servicios-lista .num {
  color: var(--marca-lima);
  background: var(--marca-tinta);
  font-weight: var(--peso-fuerte);
  padding: 0.06em 0.32em;
  margin-right: 0.4em;
}

/* ------------------------------------------------------------
   Mosaico de servicios: 3 fotos que se tocan solo por la esquina
   (celdas diagonales de una cuadrícula 3×3) — nunca por el lado
   completo —, con el texto de cada servicio en las celdas libres.
   ------------------------------------------------------------ */
.mosaico { display: grid; }
.mosaico-foto { position: relative; overflow: hidden; min-height: 260px; }
.mosaico-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mosaico-texto { padding: var(--esp-3); align-self: center; }
.mosaico-texto h3 { font-size: var(--titulo-h3); letter-spacing: var(--letter-spacing-display); line-height: 1.2; }
.mosaico-texto h3 em { font-style: normal; color: inherit; }
.mosaico-texto p { margin-top: var(--esp-2); max-width: 34ch; color: var(--color-texto-suave); }
.mosaico-texto .ver-mas { margin-top: var(--esp-2); }
@media (min-width: 900px) {
  /* Zigzag: cada foto toca a la siguiente solo por la esquina (celdas
     diagonales de una cuadrícula), alternando de lado — foto 1 a la
     izquierda, foto 2 a la derecha, foto 3 a la izquierda. */
  .mosaico { grid-template-columns: repeat(2, 1fr); grid-template-rows: 320px 560px 320px; }
  .mosaico-texto { padding: var(--esp-4); }
  .mosaico .foto-1 { grid-column: 1; grid-row: 1; }
  .mosaico .texto-1 { grid-column: 2; grid-row: 1; }
  .mosaico .texto-2 { grid-column: 1; grid-row: 2; }
  .mosaico .foto-2 { grid-column: 2; grid-row: 2; }
  .mosaico .foto-3 { grid-column: 1; grid-row: 3; }
  .mosaico .texto-3 { grid-column: 2; grid-row: 3; }
}

/* ------------------------------------------------------------
   Banda oscura: declaración + cifras sobre color, borde a borde.
   Máximo una por página (además del contacto).
   ------------------------------------------------------------ */
.banda-oscura {
  background: var(--color-fondo-oscuro);
  color: var(--color-texto-sobre-oscuro);
  padding: var(--esp-6) 0;
}
/* La banda que solo lleva cifras respira mucho menos: es una ficha de
   datos, no una sección (Pedro, 2026-07-28). El fondo se queda en azul
   tinta: se probó en complementario y Pedro lo regresó. */
.banda-cifras { padding: var(--esp-3) 0; }
.banda-cifras .cifras-grid { gap: var(--esp-3) var(--esp-3); }
/* La sección que sigue a las cifras arranca más cerca: la banda ya hizo
   de separador y el aire completo sobraba (Pedro, 2026-07-28). */
.banda-cifras + .seccion { padding-top: var(--esp-4); }
.declaracion-grande {
  font-family: var(--fuente-display);
  font-size: var(--titulo-declaracion);
  line-height: 1.14;
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-acento);
  max-width: 26ch;
  font-weight: var(--peso-display);
}
.banda-oscura .declaracion-grande { color: var(--color-texto-invertido); }
/* Lima sobre tinta (15.1:1). Es el acento de marca y solo aparece aquí y
   en el "+" de las cifras: superficies mínimas, sobre azul tinta. */
.banda-oscura .declaracion-grande em { font-style: normal; color: inherit; }
.banda-oscura .cifras-grid { margin-top: var(--esp-5); }
.banda-oscura .cifras-grid:first-child { margin-top: 0; }

/* Variante CTA de la banda oscura: puente hacia otra página, no una
   declaración de identidad. Kicker + pregunta calificadora (mismo tono
   que "¿Aún no tienes el proyecto ejecutivo?" del hero) + botón.
   Reemplaza la declaración "nuestra especialidad es..." en
   /instalaciones-hidrosanitarias (Pedro, 2026-08-03: sonaba a que no
   supiéramos hacer instalaciones interiores). */
.banda-oscura .cta-pregunta {
  font-family: var(--fuente-display);
  letter-spacing: var(--letter-spacing-display);
  font-size: var(--titulo-h2);
  line-height: 1.15;
  color: var(--color-texto-invertido);
  max-width: 22ch;
}
.banda-oscura .cta-apoyo {
  margin-top: var(--esp-2);
  font-size: var(--texto-grande);
  color: var(--color-texto-sobre-oscuro);
  max-width: 52ch;
}

.cifras-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-4) var(--esp-3);
}
@media (min-width: 900px) { .cifras-grid { grid-template-columns: repeat(4, 1fr); } }

.cifra-num {
  font-family: var(--fuente-display);
  font-size: var(--cifra-grande);
  font-weight: var(--peso-fuerte);
  color: var(--marca-lima);
  line-height: 1.05;
  letter-spacing: var(--letter-spacing-display);
  font-variant-numeric: tabular-nums;
}
.cifra-num .mas { color: inherit; opacity: 0.75; }
.cifra-label {
  margin-top: var(--esp-1);
  font-family: var(--fuente-etiqueta);
  font-size: var(--texto-mini);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-sobre-oscuro);
  max-width: 26ch;
}

/* ------------------------------------------------------------
   Pilares: título grande + párrafo con sangría, sin tarjetas
   ------------------------------------------------------------ */
.pilares { margin-top: var(--esp-3); }
.pilar { padding: var(--esp-4) 0; }
.pilar + .pilar { border-top: 1px solid var(--color-borde); }
.pilar h3 {
  font-size: var(--titulo-pilar);
  letter-spacing: var(--letter-spacing-display);
  line-height: 1.2;
  max-width: 26ch;
}
.pilar p { margin-top: var(--esp-2); max-width: 58ch; }
@media (min-width: 900px) {
  .pilar p { margin-left: 28%; max-width: 52ch; }
}

/* ------------------------------------------------------------
   Segmentos: versión compacta de .pilares para caber dentro de
   un .split-texto (columna angosta) — mismo criterio sin tarjetas:
   título + párrafo, divididos por línea fina, sin sangría.
   ------------------------------------------------------------ */
.segmentos { margin-top: var(--esp-1); }
.segmento { padding: var(--esp-2) 0; }
.segmento + .segmento { border-top: 1px solid var(--color-borde); }
.segmento h3 { font-size: var(--texto-grande); font-weight: var(--peso-medio); color: var(--color-titulo); }
.segmento p { margin-top: 0.3rem; color: var(--color-texto-suave); font-size: var(--texto-chico); }

/* ------------------------------------------------------------
   Banda de valores sobre fondo suave
   ------------------------------------------------------------ */
.valores { background: var(--color-fondo-suave); padding: var(--esp-6) 0; }
.valores-grid { display: grid; gap: var(--esp-4); align-items: start; }
@media (min-width: 900px) { .valores-grid { grid-template-columns: 1fr 1.2fr; } }
.valores h2 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  letter-spacing: var(--letter-spacing-display);
  line-height: 1.1;
}
.valores h2 em { font-style: normal; color: inherit; }
.valores p { max-width: 55ch; }
.valores p + p { margin-top: var(--esp-2); }
.valores .triada {
  margin-top: var(--esp-3);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: var(--peso-medio);
  color: var(--color-acento-hover);
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------
   Tipologías y listas editoriales (filas con línea, no tarjetas)
   ------------------------------------------------------------ */
.tipologias { margin-top: var(--esp-4); }
.tipologia {
  display: grid;
  gap: var(--esp-1);
  padding: var(--esp-3) 0;
  border-top: 1px solid var(--color-borde);
}
.tipologia:last-child { border-bottom: 1px solid var(--color-borde); }
.tipologia h3 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.tipologia p { color: var(--color-texto-suave); max-width: 60ch; }
@media (min-width: 760px) {
  .tipologia { grid-template-columns: 260px 1fr; align-items: baseline; }
}

/* Experiencia: proyectos anónimos como fichas editoriales en fila */
/* Fichas de texto en tres columnas. Quedaron sin uso el 2026-07-30, cuando
   /hidraulica-urbana pasó al mosaico de abajo; se conservan por si otra
   página las ocupa. */
.proyectos-lista { margin-top: var(--esp-4); }
.proyecto-ficha {
  display: grid;
  gap: var(--esp-1) var(--esp-4);
  padding: var(--esp-3) 0;
  border-top: 1px solid var(--color-borde);
}
.proyecto-ficha:last-child { border-bottom: 1px solid var(--color-borde); }
.proyecto-ficha h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
.proyecto-zona {
  font-size: var(--texto-mini);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.proyecto-escala { color: var(--color-texto); font-size: var(--texto-chico); }
.proyecto-servicios { color: var(--color-texto-suave); font-size: var(--texto-chico); max-width: 52ch; }
@media (min-width: 860px) {
  .proyecto-ficha { grid-template-columns: 1.1fr 1fr 1.2fr; align-items: baseline; }
  .proyecto-ficha h3 + * { margin-top: 0; }
}

/* ------------------------------------------------------------
   Mosaico de proyectos (/hidraulica-urbana, Pedro 2026-07-30)
   Cuatro mosaicos con la foto de fondo y los datos encima.
   La proporción es asimétrica y se invierte en cada renglón:
   renglón 1 = ancho | angosto, renglón 2 = angosto | ancho,
   así las posiciones 1 y 4 son las grandes. Con dos columnas
   fijas el segundo renglón repetiría el mismo reparto, de ahí
   las tres columnas con span.
   ------------------------------------------------------------ */
.proyectos-mosaico { margin-top: var(--esp-4); display: grid; gap: var(--esp-2); }
.proyecto-mosaico {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.proyecto-mosaico::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Velo en el slate derivado del tinta (--color-texto-suave, #4A5878): un
     tono más bajo que el azul marino de las bandas oscuras. Se escribe en
     rgba porque necesita alfa, igual que los velos del hero. */
  background: linear-gradient(180deg, rgba(74, 88, 120, 0) 34%, rgba(74, 88, 120, 0.93) 100%);
}
.proyecto-mosaico-texto {
  position: relative;
  z-index: 1;
  padding: var(--esp-3);
  color: var(--color-texto-invertido);
}
.proyecto-mosaico h3 {
  color: var(--color-texto-invertido);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
}
.proyecto-mosaico .proyecto-zona { color: var(--marca-lima); margin: 0 0 4px; }
.proyecto-mosaico .proyecto-escala { color: var(--color-texto-invertido); margin-top: 4px; }
.proyecto-mosaico .proyecto-servicios { color: rgba(255, 255, 255, 0.82); margin-top: 4px; }
/* Encuadres: la 3 es panorámica en mosaico angosto y la 4 es vertical en
   mosaico ancho, así que el recorte se ajusta a mano. */
.proyecto-mosaico-4 { background-position: center 24%; }
@media (min-width: 900px) {
  .proyectos-mosaico { grid-template-columns: repeat(3, 1fr); }
  .proyecto-mosaico { min-height: 380px; }
  .proyecto-mosaico-1 { grid-column: 1 / span 2; }
  .proyecto-mosaico-2 { grid-column: 3; }
  .proyecto-mosaico-3 { grid-column: 1; }
  .proyecto-mosaico-4 { grid-column: 2 / span 2; }
}

/* ------------------------------------------------------------
   Pasos de metodología (línea vertical, número en círculo)
   ------------------------------------------------------------ */
.pasos { margin-top: var(--esp-4); display: grid; gap: 0; }
.paso { position: relative; padding: 0 0 var(--esp-3) 52px; }
.paso:last-of-type { padding-bottom: 0; }
.paso::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 6px;
  bottom: -6px;
  width: 2px;
  background: var(--color-borde);
}
.paso:last-of-type::before { display: none; }
.paso-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-acento);
  color: var(--color-texto-invertido);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--peso-medio);
  font-size: var(--texto-chico);
}
.paso-tiempo {
  font-family: var(--fuente-etiqueta);
  font-size: var(--texto-mini);
  color: var(--color-acento-hover);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.paso h3 { font-size: var(--titulo-h3); margin-top: 2px; }
.paso p { font-size: var(--texto-chico); color: var(--color-texto-suave); max-width: 58ch; margin-top: 4px; }

/* Variante sin tiempos, para /hidraulica-urbana: círculo y línea más
   gruesos, título más grande (ocupa el espacio que dejó .paso-tiempo) */
.pasos-grande { margin-top: var(--esp-5); }
.pasos-grande .paso { padding: 0 0 var(--esp-4) 60px; }
.pasos-grande .paso::before { left: 19px; top: 8px; bottom: -8px; width: 3px; }
.pasos-grande .paso-num { width: 40px; height: 40px; font-size: 1.05rem; }
.pasos-grande .paso h3 { font-size: 1.65rem; }

/* Pasos grandes para /metodologia: cada paso como pilar */
.paso-pilar { padding: var(--esp-4) 0; }
.paso-pilar + .paso-pilar { border-top: 1px solid var(--color-borde); }
.paso-pilar .paso-etiqueta {
  font-size: var(--texto-chico);
  font-weight: var(--peso-medio);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}
.paso-pilar h3 {
  margin-top: var(--esp-1);
  font-size: var(--titulo-pilar);
  letter-spacing: var(--letter-spacing-display);
  line-height: 1.2;
}
.paso-pilar p { margin-top: var(--esp-2); max-width: 58ch; }
@media (min-width: 900px) {
  .paso-pilar p { margin-left: 28%; max-width: 52ch; }
}

/* ------------------------------------------------------------
   Entregables y listas de alcance
   ------------------------------------------------------------ */
.entregables { margin-top: var(--esp-4); display: grid; gap: var(--esp-3); }
@media (min-width: 760px) { .entregables { grid-template-columns: 1fr 1fr; } }
.entregable { border-top: 2px solid var(--color-acento); padding-top: var(--esp-2); }
.entregable h3 { font-size: var(--titulo-h3); }
.entregable p {
  margin-top: var(--esp-1);
  font-size: var(--texto-chico);
  color: var(--color-texto-suave);
  max-width: 52ch;
}

/* ------------------------------------------------------------
   Rótulo: el cuadro de datos de una lámina
   Recuadro con filete, celda oscura con el alcance a la izquierda
   y los entregables en retícula a la derecha. Alternativa a
   .entregables para /instalaciones-hidrosanitarias (Pedro,
   2026-08-03): esa sección hace dos trabajos —qué se diseña y qué
   se entrega— y la retícula 2×2 no los distinguía.
   ------------------------------------------------------------ */
.rotulo {
  margin-top: var(--esp-4);
  border: 1px solid var(--color-titulo);
  display: grid;
}
@media (min-width: 900px) { .rotulo { grid-template-columns: 1fr 1.15fr; } }

/* Los entregables llevan retícula propia: con grid-row: span sobre la
   celda de alcance, el 3 y el 4 se caen debajo de ella y el recuadro
   pierde la forma de rótulo. */
.rotulo-docs { display: grid; }
@media (min-width: 900px) { .rotulo-docs { grid-template-columns: 1fr 1fr; } }

.rotulo-celda { padding: var(--esp-3); border-bottom: 1px solid var(--color-borde); }
.rotulo-docs .rotulo-celda:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .rotulo-docs .rotulo-celda { border-right: 1px solid var(--color-borde); }
  .rotulo-docs .rotulo-celda:nth-child(2n) { border-right: 0; }
  .rotulo-docs .rotulo-celda:nth-last-child(-n+2) { border-bottom: 0; }
}
.rotulo-celda h3 { font-size: var(--titulo-h3); line-height: 1.2; color: var(--color-titulo); }
.rotulo-celda p { margin-top: var(--esp-1); font-size: var(--texto-chico); color: var(--color-texto-suave); }

/* Única superficie de la sección donde el lima puede vivir: azul tinta. */
.rotulo-alcance {
  background: var(--color-titulo);
  color: var(--color-texto-sobre-oscuro);
  border-bottom: 0;
}
.rotulo-alcance h3 { color: var(--color-texto-invertido); font-size: var(--texto-grande); }
.rotulo-alcance p { color: var(--color-texto-sobre-oscuro); }

.rotulo-etiqueta {
  display: block;
  font-family: var(--fuente-etiqueta);
  font-size: var(--texto-mini);
  font-weight: var(--peso-medio);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-acento);
  margin-bottom: var(--esp-1);
}
.rotulo-alcance .rotulo-etiqueta { color: var(--marca-lima); }

.rotulo-sistema { padding: var(--esp-2) 0; border-bottom: 1px solid var(--color-linea-oscura); }
.rotulo-sistema:last-child { border-bottom: 0; padding-bottom: 0; }

.nota-linea {
  margin-top: var(--esp-4);
  padding-top: var(--esp-2);
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-chico);
  color: var(--color-texto-suave);
  max-width: 72ch;
}

/* Dos columnas de listas (nosotros / de tu parte), sin tarjetas */
.dos-columnas { margin-top: var(--esp-4); display: grid; gap: var(--esp-4); }
@media (min-width: 760px) { .dos-columnas { grid-template-columns: 1fr 1fr; } }
.columna-lista h3 {
  font-size: var(--titulo-h3);
  padding-bottom: var(--esp-2);
  border-bottom: 2px solid var(--color-acento);
}
.columna-lista ul { margin-top: var(--esp-2); list-style: none; }
.columna-lista li {
  position: relative;
  padding: 8px 0 8px 24px;
  color: var(--color-texto);
}
.columna-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 12px;
  height: 2px;
  background: var(--color-acento);
}

.texto-bloque { margin-top: var(--esp-3); max-width: 68ch; }
.texto-bloque p + p { margin-top: var(--esp-2); }

.cta-intermedio { margin-top: var(--esp-4); }

.ver-mas { display: inline-block; margin-top: var(--esp-3); font-weight: var(--peso-medio); }
.ver-mas::after {
  content: ' \2192';
  display: inline-block;
  transition: transform var(--transicion);
}
.ver-mas:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------
   Comparador plano vs. vista aérea (Mecánica A aprobada)
   Vive dentro de .split-foto: sangra al borde, sin marco.
   ------------------------------------------------------------ */
.comparador {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
  --corte: 50%;
}
.comparador > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comparador-aerea { clip-path: inset(0 0 0 var(--corte)); }
.comparador.animando .comparador-aerea,
.comparador.animando .comparador-divisor,
.comparador.animando .comparador-asa {
  transition: left 0.45s ease, clip-path 0.45s ease;
}
.comparador-divisor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--corte);
  width: 2px;
  background: var(--color-fondo);
  transform: translateX(-1px);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
  z-index: 2;
  pointer-events: none;
}
.comparador-asa {
  position: absolute;
  top: 50%;
  left: var(--corte);
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-fondo);
  color: var(--color-acento-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
  pointer-events: none;
}
.comparador-etiqueta {
  position: absolute;
  top: 12px;
  z-index: 2;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--texto-mini);
  font-weight: var(--peso-medio);
  background: rgba(27, 27, 30, 0.72);
  color: var(--color-texto-invertido);
  pointer-events: none;
}
.etiqueta-plano { left: 12px; }
.etiqueta-aerea { right: 12px; }
.comparador-rango {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 3;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}
.comparador-pista {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: var(--texto-mini);
  font-weight: var(--peso-medio);
  background: rgba(17, 27, 56, 0.86);
  color: var(--color-texto-invertido);
  pointer-events: none;
  opacity: 0;
}
.comparador-pista.parpadea { animation: comparadorPistaParpadeo 2s ease-in-out 1; }
.comparador-pista.fundido { opacity: 1; transition: opacity 0.4s ease; }
.comparador-pista.fundido.oculto { opacity: 0; }
@keyframes comparadorPistaParpadeo {
  0% { opacity: 0; }
  15% { opacity: 1; }
  35% { opacity: 0.35; }
  55% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
.dato-flotante {
  position: absolute;
  left: var(--esp-3);
  bottom: var(--esp-3);
  z-index: 4;
  max-width: 230px;
  padding: 0.9rem 1.2rem;
  background: rgba(27, 27, 30, 0.78);
  color: var(--color-texto-invertido);
}
.dato-flotante .num { display: block; font-size: 1.9rem; font-weight: var(--peso-fuerte); line-height: 1; color: var(--marca-lima); }
.dato-flotante .txt { display: block; font-size: var(--texto-mini); color: var(--color-texto-sobre-oscuro); margin-top: 4px; }
@media (min-width: 900px) {
  .dato-flotante { left: var(--esp-4); bottom: var(--esp-4); }
}

/* ------------------------------------------------------------
   FAQ: <details> editoriales con línea fina
   ------------------------------------------------------------ */
.faq-lista { margin-top: var(--esp-4); max-width: 76ch; }
.faq-item { border-top: 1px solid var(--color-borde); }
.faq-item:last-child { border-bottom: 1px solid var(--color-borde); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--esp-3) 44px var(--esp-3) 0;
  position: relative;
  font-weight: var(--peso-medio);
  color: var(--color-titulo);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: var(--peso-normal);
  color: var(--color-acento);
  transition: transform var(--transicion);
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-respuesta { padding: 0 0 var(--esp-3); color: var(--color-texto); max-width: 66ch; }
.faq-respuesta p + p { margin-top: var(--esp-2); }

/* ------------------------------------------------------------
   Contacto (banda oscura de cierre, heredada del sitio actual)
   ------------------------------------------------------------ */
.contacto {
  background: var(--marca-azul-comp);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
/* Opción 3 del mockup, elegida por Pedro (2026-07-28): el cierre deja de
   ser oscuro y va en el azul complementario. Sin manchas de fondo; lo
   único que lo remata es un filete de azul tinta arriba. Sobre este fondo
   el único color de texto posible es el tinta. */
.contacto::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--marca-tinta);
  pointer-events: none;
}
.contacto-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.contacto-inner h2 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  color: var(--marca-tinta);
  letter-spacing: var(--letter-spacing-display);
  margin: 0;
  line-height: 1.06;
  max-width: 14ch;
}
/* Excepción pedida por Pedro (2026-07-28) solo aquí: "Contáctanos" va en
   otro azul. Es el llamado a la acción de la página. Sobre el
   complementario se usa el azul oscurecido: 4:1, que pasa por ser texto
   grande (51 px). */
.contacto-inner h2 em { font-style: normal; color: var(--color-acento-hover); }
.contacto-inner .contacto-bajada {
  color: var(--marca-tinta);
  font-size: 1.125rem;
  margin: 0 0 30px;
  line-height: var(--interlineado);
  max-width: 46ch;
}
.contacto-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radio-chico);
  font-family: var(--fuente);
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transicion);
  white-space: nowrap;
}
.btn-primary {
  background: var(--marca-tinta);
  color: var(--color-texto-invertido);
  border-color: var(--marca-tinta);
  font-weight: var(--peso-medio);
}
.btn-primary:hover {
  background: var(--color-acento-hover);
  border-color: var(--color-acento-hover);
  color: var(--color-texto-invertido);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(17, 27, 56, 0.45);
}
.btn-outline {
  background: transparent;
  color: var(--marca-tinta);
  border-color: rgba(17, 27, 56, 0.45);
}
.btn-outline:hover {
  border-color: var(--marca-tinta);
  background: rgba(17, 27, 56, 0.08);
  color: var(--marca-tinta);
}
.contacto-btns .btn svg { width: 19px; height: 19px; flex-shrink: 0; }
@media (max-width: 900px) {
  .contacto-inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .contacto-btns .btn { justify-content: center; }
}

/* Página /contacto: bloque de qué mandar para cotizar */
.cotizar-datos { margin-top: var(--esp-4); display: grid; gap: var(--esp-4); }
@media (min-width: 860px) { .cotizar-datos { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.footer {
  background: var(--color-fondo-oscuro-2);
  padding: 48px 0 32px;
  border-top: 1px solid var(--color-linea-oscura);
}
.footer-inner {
  display: grid;
  gap: 40px 48px;
  align-items: start;
  margin-bottom: 32px;
}
@media (min-width: 880px) {
  .footer-inner { grid-template-columns: minmax(220px, 1fr) auto auto; }
  .footer-links-col { justify-self: center; }
  .footer-contact { justify-self: end; text-align: right; }
}
.footer-logo img { height: var(--alto-logo-footer); width: auto; }
.footer-tagline {
  font-size: var(--texto-chico);
  color: rgba(255, 255, 255, 0.35);
  margin-top: 8px;
  letter-spacing: 0.03em;
}
/* "Sitio" y "Contacto": blancas, en negritas y 1.3× (Pedro, 2026-07-28).
   Se probaron en lima y las regresó a blanco. */
.footer-titulo {
  font-size: calc(var(--texto-mini) * 1.3);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-texto-invertido);
  margin-bottom: 14px;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px 36px;
  justify-content: start;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--texto-chico);
  transition: color var(--transicion);
}
.footer-links a:hover { color: var(--marca-lima); }
.footer-contact { display: flex; flex-direction: column; gap: 6px; }
.footer-contact a {
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--texto-base);
  transition: color var(--transicion);
}
.footer-contact a:hover { color: var(--color-acento); }
.footer-address { color: rgba(255, 255, 255, 0.45); font-size: var(--texto-base); }
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy { font-size: var(--texto-chico); color: rgba(255, 255, 255, 0.25); }
.footer-legal {
  font-size: var(--texto-chico);
  color: rgba(255, 255, 255, 0.25);
  transition: color var(--transicion);
}
.footer-legal:hover { color: var(--color-acento); }
@media (max-width: 760px) {
  .footer-bottom { flex-direction: column; gap: 4px; }
}

/* ------------------------------------------------------------
   Aparición al hacer scroll (reveal) — respeta reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.visible { opacity: 1; transform: none; }
  .reveal-2 { transition-delay: 0.12s; }
  .reveal-3 { transition-delay: 0.24s; }
  .reveal-4 { transition-delay: 0.36s; }
}

/* ------------------------------------------------------------
   Placeholder de fotografía real (se sustituye con assets de Pedro)
   ------------------------------------------------------------ */
.foto-pendiente {
  background: repeating-linear-gradient(
    45deg,
    var(--color-fondo-alterno),
    var(--color-fondo-alterno) 14px,
    var(--color-fondo) 14px,
    var(--color-fondo) 28px
  );
  border: 1px dashed var(--color-borde);
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-suave);
  font-size: var(--texto-mini);
  text-align: center;
  padding: var(--esp-2);
}

/* ------------------------------------------------------------
   Blog — formato editorial (agregado 2026-07-07)
   Índice: fichas en filas con línea (mismo criterio que
   .proyecto-ficha: nada de tarjetas con sombra). Artículo:
   columna de lectura, byline y CTA sutil.
   ------------------------------------------------------------ */

/* Índice del blog */
.blog-lista { margin-top: var(--esp-4); }
.blog-ficha {
  display: block;
  padding: var(--esp-3) 0;
  border-top: 1px solid var(--color-borde);
  color: inherit;
  transition: opacity var(--transicion);
}
.blog-ficha:last-child { border-bottom: 1px solid var(--color-borde); }
.blog-ficha:hover h3 { color: var(--color-acento-hover); }
.blog-ficha-meta {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--fuente-etiqueta);
  font-size: var(--texto-mini);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-texto-suave);
}
.blog-ficha-meta .columna { color: var(--color-acento); font-weight: var(--peso-medio); }
.blog-ficha h3 {
  margin-top: 8px;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  letter-spacing: var(--letter-spacing-display);
  transition: color var(--transicion);
}
.blog-ficha p { margin-top: 6px; color: var(--color-texto-suave); max-width: 62ch; }
.blog-ficha .ver-mas { margin-top: var(--esp-1); display: inline-block; }

/* Artículo */
.articulo { max-width: 720px; margin: 0 auto; }
.articulo-meta {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--fuente-etiqueta);
  font-size: var(--texto-mini);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-texto-suave);
  margin-bottom: var(--esp-2);
}
.articulo-meta .columna { color: var(--color-acento); font-weight: var(--peso-medio); }
.articulo h1 {
  font-size: clamp(1.8rem, 4.2vw, 2.8rem);
  letter-spacing: var(--letter-spacing-display);
  line-height: 1.12;
  max-width: 24ch;
}
.articulo .entrada {
  margin-top: var(--esp-2);
  font-size: var(--texto-grande);
  color: var(--color-texto-suave);
  max-width: 58ch;
}
.articulo-cuerpo { margin-top: var(--esp-4); }
.articulo-cuerpo h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  letter-spacing: var(--letter-spacing-display);
  margin-top: var(--esp-4);
  max-width: 30ch;
}
.articulo-cuerpo h2:first-child { margin-top: 0; }
.articulo-cuerpo p { margin-top: var(--esp-2); max-width: 62ch; }
.articulo-cuerpo ul, .articulo-cuerpo ol { margin-top: var(--esp-2); padding-left: 1.2em; max-width: 58ch; }
.articulo-cuerpo li + li { margin-top: 8px; }
.articulo-cuerpo strong { color: var(--color-titulo); font-weight: var(--peso-medio); }
.articulo-cuerpo figure { margin: var(--esp-4) 0 0; }
.articulo-cuerpo figure img { width: 100%; height: auto; display: block; }
.articulo-cuerpo figcaption {
  padding-top: var(--esp-1);
  font-size: var(--texto-mini);
  color: var(--color-texto-suave);
}

/* CTA del artículo (regla 70/30 de la guía editorial) */
.articulo-cta {
  margin-top: var(--esp-5);
  padding: var(--esp-3);
  border-left: 3px solid var(--color-acento);
  background: var(--color-fondo-alterno);
}
.articulo-cta p { max-width: 58ch; }
.articulo-cta .boton { margin-top: var(--esp-2); display: inline-block; }

/* Byline del autor */
.articulo-byline {
  margin-top: var(--esp-5);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--color-borde);
  display: flex;
  gap: 18px;
  align-items: center;
}
.articulo-byline img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.articulo-byline .nombre { font-weight: var(--peso-medio); color: var(--color-titulo); }
.articulo-byline .cargo, .articulo-byline .bio {
  font-size: var(--texto-chico);
  color: var(--color-texto-suave);
}

/* Fecha de publicación, movida al final del artículo */
.articulo-fecha-final {
  margin-top: var(--esp-3);
  font-family: var(--fuente-etiqueta);
  font-size: var(--texto-mini);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-texto-suave);
}

/* Navegación al final del artículo */
.articulo-pie {
  margin-top: var(--esp-4);
  padding-top: var(--esp-2);
}