/* ══ TIPOGRAFÍA ══════════════════════════════════════════════════════════
   La oficial del manual de marca es SURGENA. El archivo que tenemos se
   identifica a sí mismo como «Surgena Personal use only» («Get the
   commercial version at digitypestudio.com») y sólo trae 157 glifos: le
   faltan á é í ó ú ü ñ y sus mayúsculas (Á É Í Ó Ú Ü Ñ).
   ACTIVADA EN TITULARES el 11/09/2026, por instrucción directa de Carlos:
   Fernando ya está avisado de que el archivo actual es de uso personal y de
   que hace falta comprar la licencia Webfont (la Desktop, 69 $, no cubre
   webs) en cuanto lo dispute con Amagoya — asume él la responsabilidad
   mientras tanto. Esto NO resuelve la parte legal (seguimos usando un
   archivo "personal use only" en un sitio comercial hasta que se compre la
   licencia correcta); sustituir este .ttf en cuanto llegue la Webfont.
   Lo que sí queda resuelto es el problema funcional: como al archivo le
   faltan los glifos acentuados, se le declara un unicode-range que cubre
   sólo ASCII básico (sin tildes/ñ) — así el navegador ya no intenta pintar
   esos caracteres con Surgena y salían huecos, sino que cae automáticamente
   a QUICKSAND para esa letra concreta, sin mezclar visualmente el resto de
   la palabra. Quicksand (SIL Open Font License 1.1, libre) sigue de reserva
   y es la geométrica libre más cercana al logotipo. El cuerpo de texto va
   en Manrope, con Inter como último recurso. Los ficheros van recortados a
   latín + latín extendido y en WOFF2. Ni Surgena ni Quicksand ni Manrope
   tienen árabe o chino — esos dos idiomas caen al tipo del sistema, ver la
   regla al final de este bloque. */
@font-face{
  font-family:'Quicksand';
  src:url('../assets/fonts/Quicksand-Medium-latin.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Quicksand';
  src:url('../assets/fonts/Quicksand-Bold-latin.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
/* Surgena: única familia (SemiBold) declarada para todo el rango 500-700 de
   peso, así el h1 (weight:700) no fuerza un "fake bold" del navegador sobre
   el único corte que tenemos. unicode-range = sólo ASCII básico (sin tildes
   ni ñ) para que esos glifos, que el archivo no trae, caigan a Quicksand. */
@font-face{
  font-family:'Surgena';
  src:url('../assets/fonts/Surgena-SemiBold.ttf') format('truetype');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E;
}
:root{
  /* Paleta oficial del rebranding (Engranaje Comunicación, jun-2026, Propuesta 1 "Agua avanzada") */
  --ink:#1b2430; --text:#5b6b78;
  --line:#dce2e8; --bg:#eef1f4; --white:#ffffff; --radius:10px;
  --ink-navy:#182641; /* navy fijo del logotipo (no cambia por marca) */
  /* INEXAQUA dejó de ser una marca conmutable (jul-2026): ahora es una línea de
     negocio más dentro de INEXA, así que el ROJO de INEXA es el color único y
     dominante de todo el sitio (ver clase .iq-accent más abajo para el único
     sitio donde el azul histórico de INEXAQUA sobrevive, como acento local). */
  /* ── PALETA OFICIAL · manual de marca de Amagoya (17/08/2026) ──────────
     El manual define exactamente cuatro colores, con su papel:
       #68161C  Burdeos             continuidad con la identidad anterior
       #1C5976  Azul petróleo       relación con el agua y la innovación
       #182641  Azul noche          solidez y rigor técnico
       #DCE2E8  Azul petróleo claro

     DECISIÓN DE DIRECCIÓN (19/08/2026): el sitio es ROJO. El azul —tanto el
     petróleo como el azul noche— se usa SÓLO en la sección de INEXAQUA (ver
     `.iq-accent` justo debajo) y en el logotipo. Se probó llevar el azul noche
     a todo lo oscuro, que es lo que el manual sugiere para grandes superficies,
     y se descartó: la web ya tiene su carácter en rojo y es lo que funciona.

     Los tonos oscuros salen ahora del burdeos oficial en vez de estar puestos
     a ojo, que es lo que había antes (#3a0f13 y #54161b, inventados en agosto):
       --navy    = #68161C al 55% de luminosidad  → #391015
       --navy-2  = #68161C al 78%                 → #51121a
     Mismo aspecto de siempre, pero ahora cada valor se deriva del color del
     manual y se puede justificar delante de Amagoya. */
  --accent:#68161c; --accent-rgb:104,22,28; --accent-dark:#4f1015;
  --navy:#391015; --navy-2:#51121a; --navy-rgb:57,16,21;
}
/* ·· Acento de INEXAQUA ·· DECISIÓN de Carlos (28/08/2026): la sección de
   INEXAQUA usa la MISMA paleta roja que el resto del sitio, para que no
   desentone. El azul histórico (#1c5976 / #182641) queda retirado de la web y
   sobrevive solo en el logotipo. Se conserva la clase .iq-accent (aplicada en
   #inexaqua) por si en el futuro se quiere volver a diferenciar la marca: basta
   con devolver aquí los valores azules del manual de Amagoya. */
.iq-accent{ --accent:#68161c; --accent-rgb:104,22,28; --accent-dark:#4f1015; --navy:#391015; --navy-2:#51121a; --navy-rgb:57,16,21; }

/* ·· Toque azul sutil de INEXAQUA (28/08/2026, pedido de Carlos: «azul sutil,
   ligeramente integrado») ·· la sección va en ROJO como el resto del sitio,
   pero recupera un guiño al azul petróleo del agua en detalles concretos: el
   tinte de los iconos, las gráficas de ROPTIMAX y el filete superior de sus
   fichas. Títulos, eyebrows y botones siguen en rojo para no romper el sitio.
   AMPLIADO el 11/09/2026: Carlos confirmó recuperar el azul del manual de
   Amagoia (INEXAQUA lo usaba como color propio para diferenciarse de INEXA),
   pero pidió que sea «algo que no desentone», porque hoy INEXAQUA ya no tiene
   la relevancia de marca que tenía antes — es una pestaña más. Por eso se
   extiende solo a dos detalles más (las pastillas «Servicio»/«ROPTIMAX» y el
   fondo/filete de las 3 tarjetas de Servicio de optimización) y los halos de
   fondo de la sección se dejan en rojo — mezclar los dos rojos y azules de
   fondo sí habría desentonado. */
#inexaqua{ --iq-blue:#1c5976; --iq-blue-rgb:28,89,118; }
#inexaqua .feature-icon{ background:rgba(var(--iq-blue-rgb),.12); color:var(--iq-blue); }
#inexaqua .chart-slot{ border-top-color:var(--iq-blue); }
#inexaqua .chart-slot-art{ color:var(--iq-blue); }
#inexaqua .eyebrow:not(.on-dark){ color:var(--iq-blue); background:rgba(var(--iq-blue-rgb),.10); }
#inexaqua .card{ background:rgba(var(--iq-blue-rgb),.07); border-top-color:rgba(var(--iq-blue-rgb),.55); }

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;height:100%;}
body{font-family:var(--tipo-texto);color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100%;display:flex;flex-direction:column;}
/* ·· Sticky footer ·· .site-main crece para llenar el espacio sobrante en
   secciones con poco contenido (p.ej. Asociados), empujando el footer al
   fondo real de la ventana en vez de dejarlo pegado al texto. */
.site-main{flex:1 0 auto;}
footer.site{flex:none;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.inner{max-width:1180px;margin:0 auto;padding:0 24px;}
button{font-family:inherit;cursor:pointer;}
/* ══ JERARQUÍA TIPOGRÁFICA ══ según indicación de Amagoia (20/08/2026) ══════
     H1, claims y frases breves destacadas → SURGENA
     H2                                    → Manrope SemiBold (600)
     H3, entradillas y destacados          → Manrope Medium/SemiBold (500-600)
     Surgena puede usarse además, con cuentagotas, en cifras y llamadas, como
     recurso de identidad. Nunca en textos largos: cansa visualmente.

   Surgena activada el 11/09/2026 (instrucción de Carlos, Fernando avisado y
   responsable de la licencia Webfont pendiente de comprar). QUICKSAND se deja
   como segundo escalón: entra sólo donde Surgena no tiene glifo (tildes/ñ,
   por el unicode-range del @font-face de arriba) o, si algún día se retira
   Surgena otra vez, basta con quitarla de esta variable — el resto del CSS
   no se toca. */
:root{
  --tipo-titular:'Surgena','Quicksand','Manrope',sans-serif;
  --tipo-texto:'Manrope','Inter',sans-serif;
}
h1,h4{font-family:var(--tipo-titular);font-weight:700;color:var(--navy);letter-spacing:0;}
h2{font-family:var(--tipo-texto);font-weight:600;color:var(--navy);letter-spacing:-0.005em;}
h3{font-family:var(--tipo-texto);font-weight:600;color:var(--navy);letter-spacing:0;}
/* Entradillas y destacados: Manrope Medium. */
.lead,.pitch-line,.quote-texto{font-family:var(--tipo-texto);font-weight:500;}
/* Año de terminación detrás del nombre del proyecto (Fernando, 20/08/2026).
   Va en Surgena —hoy Quicksand— porque es una cifra: uno de los usos que
   Amagoia sí autoriza para la tipografía de titulares. */
.proj-ano{font-family:var(--tipo-titular);font-weight:700;color:var(--accent);white-space:nowrap;}
/* Árabe y chino: ni Quicksand ni Manrope tienen esos alfabetos. Sin esta regla
   el navegador mezclaría dos tipografías dentro del mismo titular. */
html[data-lang="ar"] h1, html[data-lang="ar"] h2, html[data-lang="ar"] h3, html[data-lang="ar"] h4,
html[data-lang="zh"] h1, html[data-lang="zh"] h2, html[data-lang="zh"] h3, html[data-lang="zh"] h4{
  font-family:'Inter',sans-serif;letter-spacing:-0.01em;}
h1{font-size:clamp(28px,4vw,42px);line-height:1.2;color:#fff;}
h2{font-size:clamp(22px,3vw,30px);margin-bottom:12px;}
h3{font-size:16px;margin-bottom:8px;}
p{color:var(--text);font-size:14.5px;}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);background:rgba(var(--accent-rgb),.1);padding:6px 14px;border-radius:20px;margin-bottom:14px;}
.eyebrow.on-dark{color:#fff;background:rgba(255,255,255,.12);}
/* ·· Iconos de línea propios para tarjetas destacadas (p.ej. "Qué hacemos") ··
   Sustituyen al círculo numerado plano; mismo estilo que el icono de First Service. */
.feature-icon{width:44px;height:44px;border-radius:10px;background:rgba(var(--accent-rgb),.14);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--accent);}
.feature-icon svg{width:22px;height:22px;}
/* ·· Tarjeta de aviso ·· icono circular + fondo tintado, inspirada en el
   documento de rebranding (Engranaje Comunicación). Para notas destacadas
   como "en desarrollo", certificaciones, avisos, etc. */
.callout-card{display:flex;gap:18px;background:rgba(var(--accent-rgb),.07);border-radius:14px;padding:22px 24px;align-items:flex-start;}
.callout-icon{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;}
.callout-icon svg{width:18px;height:18px;}
.callout-card h4{margin:0 0 4px;font-size:15px;}
.callout-card p{margin:0;}
/* ·· Timeline vertical ·· para narrativas por etapas (p.ej. historia de la
   empresa en Quiénes somos). A propósito distinto del grid de tarjetas de
   "Qué hacemos" para que ambas secciones no se vean repetitivas: aquí el
   texto es más largo/explicativo y se lee de arriba a abajo como un relato,
   con una línea vertical conectando los puntos y un icono de color propio
   (rojo/navy alternados) marcando cada uno. */
.timeline{position:relative;max-width:720px;}
.timeline-item{position:relative;padding-left:66px;padding-bottom:38px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{content:'';position:absolute;left:21px;top:46px;bottom:-38px;width:2px;background:var(--line);}
.timeline-item:last-child::before{display:none;}
.timeline-icon{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:rgba(var(--accent-rgb),.14);color:var(--accent);display:flex;align-items:center;justify-content:center;z-index:1;}
.timeline-icon svg{width:21px;height:21px;}
.timeline-item h3{font-size:17px;margin-bottom:8px;position:relative;z-index:1;}
.timeline-item p{font-size:14.5px;line-height:1.65;position:relative;z-index:1;}
/* Año fantasma detrás de cada hito. Muy tenue: marca el paso del tiempo sin
   competir con el texto. Decorativo (sale de data-year), se oculta en móvil. */
.timeline-item[data-year]::after{content:attr(data-year);position:absolute;
  inset-inline-end:0;top:-10px;font-size:56px;font-weight:800;line-height:1;
  letter-spacing:-.04em;color:rgba(var(--accent-rgb),.07);pointer-events:none;z-index:0;}
.lead{font-size:16px;color:var(--text);max-width:640px;margin-bottom:8px;}

/* ---------- LANGUAGE SWITCHER ----------
   Patrón genérico por idioma: cada span .lang-<código> se oculta salvo el
   que coincide con data-lang del <html>. Añadir un idioma nuevo (p.ej. fr,
   ar) es solo añadir su línea aquí — no hace falta tocar las demás. */
/* ⚠️ El ocultado va cualificado con html[data-lang] a propósito (ago-2026).
   Antes era solo `.lang-es,...{display:none}`, con especificidad 0-1-0, y
   cualquier regla de bloque algo más específica lo pisaba. Pasó de verdad:
   `.pitch-figure span{display:block}` (0-1-1) hacía que en las cifras del
   Inicio se vieran los CINCO idiomas a la vez, uno detrás de otro.
   Con html[data-lang] delante la especificidad sube a 0-2-1 y ya no la pisa
   ninguna regla de componente. Si añades un idioma, añádelo a las dos listas. */
html[data-lang] .lang-es,
html[data-lang] .lang-en,
html[data-lang] .lang-fr,
html[data-lang] .lang-ar,
html[data-lang] .lang-zh{display:none;}
html[data-lang="es"] .lang-es{display:inline;}
html[data-lang="en"] .lang-en{display:inline;}
html[data-lang="fr"] .lang-fr{display:inline;}
html[data-lang="ar"] .lang-ar{display:inline;}
html[data-lang="zh"] .lang-zh{display:inline;}

/* ·· Soporte RTL (árabe) ·· setLang() pone dir="rtl" en <html> cuando el
   idioma activo está en RTL_LANGS. La mayoría del layout (flexbox, grid,
   alineación de burbujas del chat) se re-espeja solo gracias a la propiedad
   `direction` heredada — pero unas pocas reglas usan text-align/margin/
   padding en valores físicos (left/right) en vez de lógicos (start/end),
   así que aquí se corrigen explícitamente para esos casos concretos. */
html[dir="rtl"]{text-align:right;}
html[dir="rtl"] th,
html[dir="rtl"] .dropdown-item,
html[dir="rtl"] .lang-menu-item,
html[dir="rtl"] .hero{text-align:right;}
html[dir="rtl"] .lang-menu-item.active::after{margin-left:0;margin-right:auto;}
html[dir="rtl"] .office{border-left:none;padding-left:0;border-right:2px solid var(--accent);padding-right:14px;}
html[dir="rtl"] .foot-bottom{text-align:right;}
/* Los iconos con flecha "→" en textos/CTAs traducidos ya se sustituyen por
   "←" en el propio texto (ver ASSISTANT_STR/UI en main.js); aquí solo se
   ajustan contenedores cuyo espejo depende de CSS puro. */
html[dir="rtl"] .lightbox-controls{flex-direction:row-reverse;}

/* ·· Menú de idioma tipo "burger" ·· botón con icono ☰ + bandera del idioma
   activo; al abrirlo despliega los 4 idiomas con su propia bandera y su
   nombre escrito en sí mismo (Español/English/Français/العربية) — así el
   menú no necesita traducción propia, cada idioma "se presenta solo".
   Français y العربية están visibles pero deshabilitados (.is-soon) hasta
   que se traduzca el contenido completo de la web a esos idiomas. */
.lang-menu{position:relative;margin-left:22px;}
.lang-menu-toggle{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#e2e8ed;padding:7px 13px;border-radius:20px;}
.lang-menu-toggle:hover{color:#fff;background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28);}
.lang-menu-toggle .burger-icon{font-size:17px;line-height:1;}
/* ·· Contenido pendiente (modo borrador) ····························
   Los bloques con lorem ipsum llevan .is-draft. Solo se marcan cuando
   DRAFT_MODE está en true en js/main.js (pone data-draft="on" en el <html>).
   Al ponerlo en false para publicar, el aviso amarillo desaparece solo y el
   texto queda como texto normal — pero OJO, el lorem ipsum seguiría ahí:
   apagar el modo borrador no sustituye el contenido. */
html[data-draft="on"] .is-draft{position:relative;border-inline-start:3px solid #d9a400;
  padding-inline-start:14px;background:rgba(217,164,0,.07);border-radius:0 6px 6px 0;}
html[data-draft="on"] .is-draft[data-draft-note]::before{content:attr(data-draft-note);
  display:block;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#8a6600;margin-bottom:5px;}

/* ·· Huecos de gráfica de ROPTIMAX (28/08 → retirados de la vista el
   11/09/2026) ·································································
   Estas reglas ya NO se usan en el HTML — el bloque .chart-grid de ROPTIMAX
   se dejó comentado dentro de index.html y se sustituyó por el flujo de 3
   pasos de abajo (.rpx-flow), porque Carlos no las entendía sin explicación
   y las gráficas reales que se esperaban de Vallejo no van a llegar nunca
   (dejó la empresa). Se dejan estas reglas sin borrar por si se recupera
   ese formato el día que haya un caso real con datos propios que mostrar. */
.chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px;}
.chart-slot{margin:0;background:#fff;border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--radius);padding:16px 16px 14px;box-shadow:0 1px 2px rgba(24,38,65,.04);}
.chart-slot-art{aspect-ratio:13/8;color:var(--accent);opacity:1;display:flex;align-items:center;justify-content:center;}
.chart-slot-art svg{width:100%;height:100%;}
.chart-slot-art svg text{font-family:inherit;fill:#5b6b78;}
.chart-slot figcaption{margin-top:10px;font-size:13px;font-weight:600;color:var(--navy);line-height:1.35;}
@media (max-width:900px){ .chart-grid{grid-template-columns:1fr;} }

/* ·· ROPTIMAX · flujo explicativo de 3 pasos (11/09/2026) ··························
   Sustituye a las gráficas de arriba: entrada → cálculo → resultado, calcado
   de las tres frases del párrafo de ROPTIMAX, para que se entienda sin tener
   que leer ejes ni curvas. Reutiliza .feature-icon a propósito — dentro de
   #inexaqua ya sale en azul petróleo (ver el bloque de "Toque azul sutil" más
   arriba), así que no hace falta declarar un color nuevo. */
.rpx-flow{display:flex;align-items:flex-start;gap:18px;margin-top:28px;}
.rpx-step{flex:1;min-width:0;}
.rpx-step .feature-icon{margin-bottom:12px;}
.rpx-step-lbl{display:block;font-size:15px;font-weight:700;color:var(--navy);margin-bottom:6px;}
.rpx-step p{font-size:13.5px;line-height:1.55;color:var(--text);margin:0;}
.rpx-arrow{flex:0 0 auto;color:rgba(var(--iq-blue-rgb),.45);padding-top:10px;}
.rpx-arrow svg{width:22px;height:22px;display:block;}
@media (max-width:820px){
  .rpx-flow{flex-direction:column;gap:14px;}
  .rpx-arrow{transform:rotate(90deg);padding:0 0 0 11px;}
}

/* ══ CABECERA DE SECCIÓN ═════════════════════════════════════════════
   Una sola clase para TODAS las secciones (10/08/2026). Antes cada una
   llevaba su relleno y su degradado a mano en un atributo style, así que
   ninguna medía lo mismo. Ahora la altura, el ancho del texto, el velo y el
   filete inferior salen de aquí, y lo único propio de cada sección es la
   imagen de fondo — se pasa con background-image en el style, nada más.

   El velo es un degradado en diagonal, no un color plano: deja ver la foto
   por la derecha y mantiene el texto legible por la izquierda, que es donde
   se lee. Sin él, sobre una foto clara el titular blanco desaparece. */
/* Ojo a la especificidad: `section.block{padding:72px 0}` es 0-1-1 y le ganaba
   a un `.sec-hero{padding:0}` a secas (0-1-0), así que el relleno viejo seguía
   colándose y ninguna cabecera medía lo mismo. De ahí `section.block.sec-hero`. */
section.block.sec-hero{position:relative;display:flex;align-items:center;
  min-height:280px;padding:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  background-color:var(--navy);}
.sec-hero::before{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(var(--navy-rgb),.95) 0%, rgba(var(--navy-rgb),.88) 42%,
    rgba(var(--navy-rgb),.62) 72%, rgba(var(--navy-rgb),.42) 100%);}
.sec-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),.25));}
.sec-hero > .inner{position:relative;z-index:1;padding-top:38px;padding-bottom:40px;width:100%;}
.sec-hero h1{font-size:30px;line-height:1.2;color:#fff;margin:0 0 10px;max-width:820px;}
.sec-hero .lead{color:#cfd9e1;max-width:780px;margin:0;font-size:15.5px;line-height:1.6;}
.sec-hero .eyebrow{margin-bottom:13px;}
/* En RTL el degradado va al revés, para que el texto siga en la zona opaca */
html[dir="rtl"] .sec-hero::before{background:linear-gradient(260deg,
    rgba(var(--navy-rgb),.95) 0%, rgba(var(--navy-rgb),.88) 42%,
    rgba(var(--navy-rgb),.62) 72%, rgba(var(--navy-rgb),.42) 100%);}
@media (max-width:760px){
  .sec-hero{min-height:190px;}
  .sec-hero h1{font-size:24px;}
  .sec-hero .lead{font-size:14.5px;}
  /* En móvil el velo se cierra: la foto se ve muy recortada y el texto manda */
  .sec-hero::before{background:linear-gradient(180deg,
    rgba(var(--navy-rgb),.9),rgba(var(--navy-rgb),.94));}
}

/* ══ INGENIERÍA · 4 LÍNEAS ═══════════════════════════════════════════
   Misma disciplina de scroll que en Servicio de Campo: relleno reducido y
   la línea 1 en fila ancha con foto, las otras tres en una fila de tres. */
#inexaqua-ingenieria section.block:not(.sec-hero){padding:48px 0;}

/* Número de línea, en la misma clave que las cifras del Inicio */
.ing-num{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;
  color:var(--accent);margin-bottom:8px;}

/* Las 4 líneas, en rejilla 2×2 y todas con imagen. La versión anterior tenía
   la primera en fila ancha con foto y las otras tres en tarjetas sin imagen:
   quedaba descompensado, «como fichas de puzzle tiradas en el piso». Con
   cuatro piezas idénticas la lectura es inmediata y no hay jerarquía falsa. */
/* 11/09/2026: quitado align-items:start — con textos y casos de éxito de
   longitud distinta, cada tarjeta se quedaba con su propia altura y las
   cuatro no medían lo mismo (pedido de Carlos). El grid ya estira las
   celdas de cada fila por defecto; con .ing-line en flex-column y
   .ing-caso{margin-top:auto} el pie con el caso de éxito queda alineado
   abajo en las cuatro por igual. */
.ing-lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.ing-line{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(24,38,65,.07);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
.ing-line:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(24,38,65,.13);
  border-color:rgba(var(--accent-rgb),.3);}
.ing-line-img{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--bg);}
.ing-line-img img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.3,1);}
.ing-line:hover .ing-line-img img{transform:scale(1.045);}
/* Número sobre la foto, en una pastilla oscura para que se lea sobre
   cualquier imagen sin tener que oscurecerla entera. */
.ing-line-num{position:absolute;top:12px;inset-inline-start:12px;
  display:flex;align-items:center;justify-content:center;min-width:34px;height:28px;
  padding:0 9px;border-radius:8px;background:rgba(var(--navy-rgb),.82);
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;
  /* 11/09/2026: cifra en la tipografía de titulares (Surgena, con Quicksand
     de reserva) — uno de los usos que Amagoia autoriza expresamente para
     Surgena, igual que el año en .proj-ano. */
  font-family:var(--tipo-titular);
  backdrop-filter:blur(3px);}
.ing-line-body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px;}
.ing-line-body h3{font-size:19px;line-height:1.25;margin-bottom:10px;}
.ing-line-body p{font-size:14px;line-height:1.62;color:var(--text);margin:0 0 18px;}
.ing-line-body .ing-caso{margin-top:auto;}
@media (max-width:820px){ .ing-lines{grid-template-columns:1fr;} }

/* Casos de éxito, en fichas */
.ing-caso{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  padding-top:14px;border-top:1px solid var(--line);}
.ing-caso-lbl{width:100%;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:#9aa4ab;margin-bottom:1px;}
.ing-chip{display:inline-block;font-size:12.5px;font-weight:700;color:var(--navy);
  background:rgba(var(--accent-rgb),.09);border:1px solid rgba(var(--accent-rgb),.18);
  border-radius:999px;padding:4px 11px;}

/* ══ SERVICIO DE CAMPO ═══════════════════════════════════════════════
   Sección deliberadamente compacta (rev.2, 10/08/2026): dirección pidió lo
   mismo que para el Inicio, que no haya que bajar mucho. El relleno de bloque
   general es de 72 px; aquí se baja a 46 y los intertítulos se aprietan. */
#first-service section.block:not(.sec-hero){padding:46px 0;}
.fs-intro{max-width:820px;margin-bottom:22px;}
.fs-intro h2{margin-bottom:10px;}
.fs-intro p{margin:0;font-size:15px;line-height:1.65;color:var(--text);}

/* Las 4 razones, en una fila. Antes eran 2×2 tarjetas altas y se comían
   media pantalla ellas solas. */
.fs-razones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.fs-razon{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 16px;}
.fs-razon-ic{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:8px;background:rgba(var(--accent-rgb),.1);color:var(--accent);margin-bottom:10px;}
.fs-razon-ic svg{width:17px;height:17px;}
.fs-razon strong{display:block;font-size:14px;color:var(--navy);line-height:1.3;margin-bottom:5px;}
.fs-razon > span:last-child{display:block;font-size:13px;line-height:1.5;color:var(--text);}
@media (max-width:980px){ .fs-razones{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .fs-razones{grid-template-columns:1fr;} }

/* Ámbitos: tira fina bajo los niveles, ya no cuatro tarjetas con su bloque
   propio. Ahorra un bloque entero de scroll y dice lo mismo. */
.fs-ambitos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 20px;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
.fs-ambitos-lbl{grid-column:1/-1;font-size:11.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);}
.fs-ambito{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:10px;align-items:center;}
.fs-ambito-ic{grid-row:1/3;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;background:rgba(var(--navy-rgb),.07);color:var(--navy);}
.fs-ambito-ic svg{width:18px;height:18px;}
.fs-ambito strong{font-size:14px;color:var(--navy);line-height:1.2;}
.fs-ambito > span:last-child{font-size:12.5px;line-height:1.4;color:var(--text);}
@media (max-width:980px){ .fs-ambitos{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .fs-ambitos{grid-template-columns:1fr;} }

/* Los dos niveles. El Premium se distingue con el filete y el fondo oscuro:
   se lee la jerarquía sin necesidad de poner precios, que no van aquí. */
/* Tarjetas de nivel. El Básico llevaba un párrafo corrido sobre blanco liso y
   quedaba deslucido al lado del Premium; ahora los dos tienen la misma
   anatomía de tarjeta de plan —insignia, para quién es, y lista con marcas—
   para que se puedan comparar de un vistazo. El Premium sigue ganando por
   fondo oscuro y por el «todo lo del Básico, y además». */
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start;}
.tier{position:relative;border-radius:14px;padding:26px 26px 28px;overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#fbf7f7 100%);
  border:1px solid var(--line);box-shadow:0 10px 30px rgba(24,38,65,.07);}
.tier::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.55),rgba(var(--accent-rgb),.12));}
/* Cifra fantasma de fondo del Básico, retirada el 03/09 a petición de Carlos
   (comentario de revisión: "quitar el número 1 ese de ahí, no pinta nada"). */
.tier::after{content:none;}
/* El Premium ya iba sin cifra fantasma (retirada el 10/08 a petición de Carlos):
   sobre el fondo oscuro ensuciaba en vez de dar profundidad. */
.tier-pro::after{content:none;}

.tier-head{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.tier-mark{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  flex:none;border-radius:10px;background:rgba(var(--accent-rgb),.1);color:var(--accent);}
.tier-mark svg{width:19px;height:19px;}
.tier-name{font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--navy);}
.tier-for{font-size:14.5px;font-weight:700;color:var(--navy);margin:0 0 16px;line-height:1.4;}
.tier-mas{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#e8c7c9;margin:0 0 12px;}

.tier-list{list-style:none;margin:0;padding:0;display:grid;gap:9px;position:relative;z-index:1;}
.tier-list li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  font-size:14px;line-height:1.5;color:var(--text);}
.tier-list .tick{width:15px;height:15px;margin-top:3px;color:var(--accent);flex:none;}

.tier-pro{background:linear-gradient(165deg,var(--navy) 0%,var(--navy-2) 100%);border-color:transparent;
  box-shadow:0 16px 40px rgba(var(--navy-rgb),.28);}
.tier-pro::before{background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),.35));}
.tier-pro .tier-mark{background:rgba(255,255,255,.12);color:#f0c9cc;}
.tier-pro .tier-name{color:#f0c9cc;}
.tier-pro .tier-for{color:#fff;}
.tier-pro .tier-list li{color:#d8dde2;}
.tier-pro .tier-list .tick{color:#e8a9ad;}
@media (max-width:820px){ .tiers{grid-template-columns:1fr;} }

.ambitos .ambito h3{font-size:16px;}
@media (max-width:1000px){ .grid-4.ambitos{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .grid-4.ambitos{grid-template-columns:1fr;} }

/* Banda de desalación + solicitud de demo */
.fs-demo-band{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;}
.fs-demo-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;}
.fs-demo-claim h2{color:#fff;font-size:27px;line-height:1.25;margin-bottom:12px;}
.fs-demo-claim p{color:#cfd9e1;font-size:15px;line-height:1.65;margin:0;}
.fs-demo-form{background:#fff;border-radius:16px;padding:28px;box-shadow:0 22px 50px rgba(0,0,0,.28);}
.fs-demo-form h3{font-size:19px;margin-bottom:16px;color:var(--navy);}
.fs-field{display:block;margin-bottom:15px;}
.fs-label{display:block;font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:6px;}
.fs-field input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;
  font-size:14.5px;font-family:inherit;color:var(--ink);background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease;}
.fs-field input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.13);}
.fs-field input.is-error{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.12);}
.fs-hint{display:block;margin-top:6px;font-size:11.5px;line-height:1.45;color:#8c99a4;}
.fs-consent{display:flex;align-items:flex-start;gap:9px;margin:4px 0 18px;
  font-size:12.5px;line-height:1.5;color:var(--text);cursor:pointer;}
.fs-consent input{margin-top:2px;flex:none;width:15px;height:15px;accent-color:var(--accent);}
.fs-demo-form .btn{width:100%;}
.fs-msg{margin:14px 0 0;font-size:13px;line-height:1.5;min-height:1px;}
.fs-msg.is-error{color:#b3261e;}
.fs-msg.is-ok{color:#1f7a4d;}
@media (max-width:900px){ .fs-demo-grid{grid-template-columns:1fr;gap:30px;} }
html[dir="rtl"] .fs-consent{text-align:right;}

/* ·· Ventana de «Solicitar demo» ····································· */
.demo-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;}
.demo-modal[hidden]{display:none;}
.demo-modal-backdrop{position:absolute;inset:0;background:rgba(10,6,7,.62);backdrop-filter:blur(2px);
  animation:demoFade .25s ease;}
.demo-modal-card{position:relative;background:#fff;border-radius:16px;padding:34px 34px 28px;
  max-width:460px;width:100%;box-shadow:0 30px 70px rgba(0,0,0,.35);text-align:center;
  animation:demoIn .3s cubic-bezier(.2,.8,.3,1);}
.demo-modal-x{position:absolute;top:10px;inset-inline-end:14px;background:none;border:none;
  font-size:26px;line-height:1;color:#9aa4ab;padding:4px 8px;border-radius:6px;}
.demo-modal-x:hover{color:var(--accent);background:rgba(var(--accent-rgb),.08);}
.demo-modal-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;
  color:var(--accent);background:rgba(var(--accent-rgb),.1);padding:5px 12px;border-radius:20px;margin-bottom:14px;}
.demo-modal-card h2{font-size:22px;line-height:1.28;margin-bottom:10px;}
.demo-modal-card p{font-size:14.5px;line-height:1.6;color:var(--text);margin-bottom:22px;}
.demo-modal-actions{display:flex;flex-direction:column;align-items:center;gap:10px;}
.demo-modal-actions .btn{width:100%;padding:13px 24px;}
.demo-modal-dismiss{background:none;border:none;font-size:13px;color:#8c99a4;padding:6px;}
.demo-modal-dismiss:hover{color:var(--accent);text-decoration:underline;}
@keyframes demoFade{from{opacity:0;}to{opacity:1;}}
@keyframes demoIn{from{opacity:0;transform:translateY(16px) scale(.97);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .demo-modal-backdrop,.demo-modal-card{animation:none;}
}

/* Banderas SVG del selector de idioma (sustituyen a los emoji, que en Windows
   no se ven). El sprite de <symbol> vive al principio del <body> y no se pinta. */
svg.flag-defs{position:absolute;width:0;height:0;overflow:hidden;}
.flagicon{width:21px;height:14px;flex:none;display:block;border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.22);object-fit:cover;}
.lang-menu-toggle .flagicon{width:23px;height:15.5px;}
.lang-menu-dropdown{display:none;position:absolute;top:calc(100% + 10px);right:0;background:var(--navy);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px;min-width:180px;box-shadow:0 14px 30px rgba(0,0,0,.3);z-index:60;}
.lang-menu.open .lang-menu-dropdown{display:block;}
.lang-menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:#c7d3dc;font-size:13px;font-weight:600;padding:9px 10px;border-radius:6px;}
.lang-menu-item:hover{background:rgba(255,255,255,.08);color:#fff;}
.lang-menu-item.active{color:#fff;background:rgba(255,255,255,.06);}
.lang-menu-item.active::after{content:'✓';margin-left:auto;font-size:11px;color:var(--accent-2,#7fd6a8);}
.lang-menu-item-flag{font-size:16px;line-height:1;flex:none;}
.lang-menu-item-name{flex:1;}
.lang-menu-item.is-soon{cursor:not-allowed;color:#748393;}
.lang-menu-item.is-soon:hover{background:none;color:#748393;}
.lang-menu-soon-badge{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#9fb0bf;background:rgba(255,255,255,.08);border-radius:5px;padding:2px 6px;flex:none;}

/* ---------- UTILITY BAR ---------- */
.utility-bar{background:var(--navy);color:#9fb0bf;font-size:12.5px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.utility-bar .inner{display:flex;justify-content:flex-end;align-items:center;}
.utility-bar .utility-links{display:flex;gap:18px;align-items:center;justify-content:flex-end;}
.utility-bar a{color:#c7d3dc;}
.utility-bar a:hover{color:#fff;}
.wa-toggle{display:flex;align-items:center;gap:8px;background:rgba(var(--accent-rgb),.16);border:1px solid rgba(var(--accent-rgb),.45);color:#e2e8ed;padding:7px 14px;border-radius:20px;font-weight:700;font-size:13px;}
.wa-toggle:hover{color:#fff;background:rgba(var(--accent-rgb),.28);border-color:rgba(var(--accent-rgb),.65);}
.wa-toggle .wa-toggle-icon{font-size:17px;line-height:1;}
.lang-switch{display:flex;gap:8px;}
.lang-switch button{background:none;border:none;color:#9fb0bf;font-size:12.5px;font-weight:600;padding:0;}
.lang-switch button.active{color:#fff;}

/* ---------- HEADER / NAV ---------- */
header.site{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:20px;}
.brand{display:flex;align-items:center;gap:9px;flex:none;}
/* Alto del logotipo. Historial: 28px → 52px (ago-2026) → 68px (14/08, Fernando
   lo seguía viendo pequeño) → 44px (19/08, con el archivo oficial de marca).
   Bajarlo NO lo hace más pequeño, al contrario. El archivo antiguo era un
   bloque de 536×255 (proporción 2,1:1) donde la palabra «inexa» ocupaba sólo
   80 de esos 255 px: a 68px de caja, la palabra medía 21px. El oficial es
   615×135 (4,56:1) y la palabra ocupa 94 de 135, así que a 44px de caja la
   palabra mide 31px — la mitad más grande que antes— y el ancho total pasa de
   143 a 200 px. Más presencia de marca en menos alto de cabecera.
   Ya no hay techo de resolución: es un SVG. */
.brand img{height:44px;width:auto;flex:none;transition:height .2s ease;}
header.site .nav-row{padding:10px 0;}
.brand-word{font-family:'Surgena','Fredoka',sans-serif;font-weight:600;font-size:23px;color:var(--ink-navy);text-transform:lowercase;letter-spacing:0;}
nav.main-links{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
nav.main-links a,nav.main-links button.navlink{background:none;border:none;font-size:13.5px;font-weight:600;color:var(--navy-2);padding:9px 12px;border-radius:7px;}
nav.main-links a:hover,nav.main-links button.navlink:hover{background:var(--bg);}
/* Marcador de sección activa (ago-2026). Antes el ítem activo solo cambiaba
   de color, que en un menú de 8 se pierde. Ahora lleva además una barra roja
   bajo el texto, que es lo que la gente busca para saber dónde está. La barra
   crece desde el centro al activarse; en el resto de ítems asoma a la mitad
   de opacidad al pasar el ratón, para que se vea que son pulsables. */
nav.main-links button.navlink{position:relative;}
nav.main-links button.navlink::after{content:'';position:absolute;left:12px;right:12px;bottom:2px;
  height:2.5px;border-radius:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:center;transition:transform .22s ease,opacity .22s ease;opacity:0;}
nav.main-links button.navlink:hover::after{transform:scaleX(.55);opacity:.45;}
nav.main-links button.navlink.active{background:var(--bg);color:var(--accent);}
nav.main-links button.navlink.active::after{transform:scaleX(1);opacity:1;}
/* En móvil el menú es una lista vertical: la barra inferior no se entiende,
   así que el marcador pasa a ser una franja lateral. */
@media (max-width:920px){
  nav.main-links button.navlink::after{left:0;right:auto;top:6px;bottom:6px;width:3px;height:auto;
    transform:scaleY(0);transform-origin:center;}
  nav.main-links button.navlink:hover::after{transform:scaleY(.55);}
  nav.main-links button.navlink.active::after{transform:scaleY(1);}
  html[dir="rtl"] nav.main-links button.navlink::after{left:auto;right:0;}
}
/* Distintivo genérico para un ítem del menú. Se usó un tiempo para marcar
   «2027» en Desarrollo; retirado el 06/08/2026 por indicación de Carlos —
   la sección se muestra sin fecha. La regla se conserva por si hace falta
   marcar algún ítem en el futuro: basta añadir
   <span class="navlink-badge">texto</span> dentro del botón. */
.navlink-badge{display:inline-block;margin-inline-start:5px;padding:1px 5px;border-radius:4px;
  background:rgba(var(--navy-rgb),.1);color:var(--text);font-size:9.5px;font-weight:700;
  letter-spacing:.03em;vertical-align:1px;}
/* Con 8 secciones en el menú, entre 920 y 1150 px el espacio va justo: se
   recorta el relleno y la tipografía para que no salte a dos filas. */
@media (min-width:921px) and (max-width:1150px){
  nav.main-links{gap:2px;}
  nav.main-links a,nav.main-links button.navlink{font-size:12.5px;padding:8px 8px;}
  .navlink-badge{display:none;}
}
.nav-cta{background:var(--accent);color:#fff !important;padding:10px 18px;border-radius:8px;font-size:13.5px;font-weight:700;white-space:nowrap;}
.nav-cta:hover{background:var(--accent-dark);}

/* ·· Botón de menú móvil (hamburguesa) ·· oculto en escritorio; se muestra
   solo por debajo de 920px (ver @media más abajo), donde nav.main-links pasa
   de fila horizontal a panel desplegable a pantalla completa. */
.mobile-nav-toggle{display:none;background:none;border:none;padding:6px;color:var(--navy-2);flex:none;}
.mobile-nav-toggle .burger-icon{font-size:22px;line-height:1;}

.nav-dropdown{position:relative;}
.nav-link-parent{display:flex;align-items:center;gap:4px;}
.chevron{font-size:9px;transition:transform .15s;}
.nav-dropdown.open .chevron{transform:rotate(180deg);}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;background:var(--navy);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px;min-width:190px;box-shadow:0 14px 30px rgba(0,0,0,.3);z-index:20;}
.nav-dropdown.open .dropdown-menu{display:block;}
.dropdown-item{display:block;width:100%;text-align:left;background:none;border:none;color:#c7d3dc;font-size:13px;font-weight:500;padding:9px 12px;border-radius:6px;}
.dropdown-item:hover{background:rgba(255,255,255,.08);color:#fff;}

/* ---------- SECTIONS ---------- */
.page-section{display:none;}
.page-section.active{display:block;}
section.block{padding:72px 0;}

/* ══ FORMAS ORGÁNICAS DE FONDO ═══════════════════════════════════════
   (12/08/2026) Lo que en la auditoría se llamó «frescura de catálogo sin
   perder la seriedad». Es el mismo recurso que usa IDE Technologies —el
   líder del sector— con sus círculos y su onda: formas muy suaves detrás
   del contenido que rompen la sucesión de rectángulos.

   Tres reglas que hacen que no cante:
   · opacidad muy baja y siempre en color de marca, nunca colores nuevos;
   · van en ::before del propio bloque, así que NO añaden ni un elemento
     al HTML ni una petición al servidor — son degradados radiales;
   · pointer-events:none y aria ocultos: no interfieren con nada.

   Se aplican con la clase .organico sobre cualquier .block. */
.block.organico{position:relative;overflow:hidden;isolation:isolate;}
.block.organico > .inner{position:relative;z-index:1;}
/* Nota de la 1ª versión (12/08): con .075 de opacidad no se veía NADA, ni
   forzando el contraste ×9 sobre la captura. Dos motivos: era demasiado
   tenue y además caía detrás de las tarjetas, que son opacas. Ahora el
   valor está medido en píxeles sobre la página renderizada, y las formas se
   colocan de modo que buena parte caiga en los márgenes laterales, que es
   donde el fondo se ve de verdad. */
.block.organico::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  /* Se declaran las cuatro posiciones y el alto a propósito: si se dejan en
     auto, cualquier regla anterior sobre el mismo ::before cuela lo suyo. */
  top:auto;right:auto;bottom:auto;left:auto;transform:none;
  width:min(72vw,900px);height:min(72vw,900px);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(var(--accent-rgb),.34) 0%, rgba(var(--accent-rgb),.20) 34%,
    rgba(var(--accent-rgb),.08) 58%, rgba(var(--accent-rgb),.02) 74%, transparent 86%);
}
/* Muy desplazadas hacia fuera: la mitad de la forma se sale del bloque y lo
   que queda dentro cae en el margen lateral, no debajo de las tarjetas.
   Van con .block delante a propósito: la regla base declara top/left/right en
   auto, y si estas variantes no igualan su especificidad, ese auto las gana. */
.block.organico.organico-dcha::before { top:-26%;  inset-inline-end:-30%; }
.block.organico.organico-izda::before { bottom:-30%; inset-inline-start:-32%; }
.block.organico.organico-centro::before{ top:-40%; left:50%; transform:translateX(-50%);
  width:min(96vw,1320px);height:min(96vw,1320px);
  background:radial-gradient(circle at 50% 50%,
    rgba(var(--accent-rgb),.20) 0%, rgba(var(--accent-rgb),.10) 42%,
    rgba(var(--accent-rgb),.03) 66%, transparent 82%); }
/* Sobre fondo oscuro el tinte rojo no se ve: se usa luz en su lugar */
.bg-navy.organico::before, .fs-demo-band.organico::before, .cta-band.organico::before{
  background:radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 45%, transparent 78%); }

/* Refuerzo puntual del halo (11/09/2026), solo en Ingeniería e INEXAQUA:
   Carlos pidió «algo visual detrás» de esas tarjetas porque se veían planas
   ya subidas a real. El halo común es a propósito muy tenue para no cantar
   en secciones de texto; aquí, con una rejilla densa de tarjetas opacas
   ocupando casi todo el ancho del .inner, ese mismo halo casi no asomaba.
   Se agranda y se sube un poco la opacidad SOLO en estas dos secciones —el
   resto de la web sigue con el halo original— y se mantiene siempre el
   rojo de marca (rgba(--accent-rgb)), nunca un color nuevo. */
#inexaqua-ingenieria .block.organico.organico-centro::before,
#inexaqua-optimizacion .block.organico.organico-dcha::before{
  width:min(112vw,1520px);height:min(112vw,1520px);
  background:radial-gradient(circle at 50% 50%,
    rgba(var(--accent-rgb),.30) 0%, rgba(var(--accent-rgb),.16) 40%,
    rgba(var(--accent-rgb),.05) 64%, transparent 82%);
}

/* Onda de separación entre bloques. Va en ::after del bloque de arriba y
   se dibuja con un SVG embebido, así que tampoco pide archivos. */
.block.onda{position:relative;--onda-h:70px;}
/* El contenido tiene que apartarse la altura de la onda, o la onda se le echa
   encima. Corregido el 13/08/2026: en Servicio de Campo la onda tapaba el pie
   de las cuatro tarjetas de la plataforma.
   El hueco se le pide al `.inner`, no al `.block`: el relleno del bloque lo
   fija en algunas secciones una regla con `id` —`#first-service section.block
   {padding:46px 0}`, de cuando se acortó la sección— y esa regla gana a
   cualquier ajuste por clase. Al `.inner` no le apunta ningún `id`, así que
   este margen vale igual en las siete ondas del sitio, tenga cada bloque el
   relleno que tenga. */
.block.onda > .inner{margin-bottom:var(--onda-h);}
.block.onda::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:var(--onda-h);z-index:2;
  pointer-events:none;background-repeat:no-repeat;background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V34c180-38 360-38 540 0s360 38 540 0 300-22 360-12v48z' fill='%23ffffff'/%3E%3C/svg%3E");}
.block.onda-bg::after{  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V34c180-38 360-38 540 0s360 38 540 0 300-22 360-12v48z' fill='%23eef1f4'/%3E%3C/svg%3E");}
/* Variante con el tinte rosado de .bg-tint, para cuando el bloque de debajo
   es el de opiniones. El color debe ser el del bloque SIGUIENTE: la onda es
   ese bloque invadiendo el de arriba. */
.block.onda-tint::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V34c180-38 360-38 540 0s360 38 540 0 300-22 360-12v48z' fill='%23f7eeee'/%3E%3C/svg%3E");}
/* En móvil la onda es más baja, y el hueco la sigue sola gracias a la variable */
@media (max-width:700px){ .block.onda{--onda-h:34px;} }
@media (prefers-reduced-motion:reduce){ .block.organico::before{opacity:.6;} }
.bg-bg{background:var(--bg);}
/* Fondos con tinte de marca (07/08/2026). El blanco/gris alterno funcionaba
   pero quedaba plano. En vez de meter colores de fuera, se tiñen los fondos
   con el propio rojo y el navy de Engranaje muy rebajados, así que el sitio
   gana profundidad sin salirse ni un punto de la paleta.
   .bg-tint  → tinte rojo muy suave, para bloques de contenido
   .bg-tint-2→ tinte frío, para separar dos bloques claros seguidos */
.bg-tint{background:linear-gradient(180deg,rgba(var(--accent-rgb),.06) 0%,rgba(var(--accent-rgb),.13) 100%);}
.bg-tint-2{background:linear-gradient(180deg,#f3f6f8 0%,#e9eef2 100%);}
/* Filete de acento arriba, para marcar dónde empieza una sección nueva. */
.bg-tint, .bg-tint-2{position:relative;}
.bg-tint::before, .bg-tint-2::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.35),transparent);}
.bg-navy{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);}

.hero{position:relative;padding:100px 0 84px;color:#fff;background:linear-gradient(180deg, rgba(var(--navy-rgb),.92), rgba(var(--navy-rgb),.86)), var(--hero-img) center/cover;text-align:left;}
.hero .inner{max-width:720px;}
.hero p.lead{color:#cfd9e1;max-width:560px;}
.hero-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;}

/* ·· Hero a dos columnas (texto | vídeo de presentación) ··
   .hero-grid sustituye al .inner de ancho fijo cuando el hero lleva vídeo.
   .hero-video-placeholder es un hueco temporal: en cuanto exista el vídeo real,
   sustituir su contenido por un <iframe> (YouTube/Vimeo) o un <video controls>
   — ver comentario de ejemplo junto al HTML del hero en index.html. */
.hero .inner.hero-grid{max-width:1180px;display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;}
.hero .inner.hero-grid .hero-text{max-width:620px;}
.hero-video{width:100%;}

/* ── HERO SOLO VÍDEO, A TODA PANTALLA ───────────────── (rev.2 ago-2026, WEB-001/003)
   Dirección pidió el 06/08/2026 que el vídeo se vea limpio: SIN el velo rojo
   que llevaba encima y SIN texto ni botones por delante. Así que aquí:
     - se anula el fondo heredado de .hero (el degradado rojo + --hero-img),
       porque teñía el vídeo;
     - el vídeo ocupa el 100% del alto de la ventana menos el header, para que
       haya que hacer scroll para dejar de verlo;
     - ya no hay .hero-video-scrim: los dos controles que van encima (sonido y
       flecha) llevan su propio fondo, así que no hace falta oscurecer nada.
   --header-h descuenta la barra superior + el header sticky, que juntos miden
   unos 96px; si cambia su alto, se ajusta aquí. */
.hero.hero-video-bg{
  --header-h:96px;
  position:relative;overflow:hidden;padding:0;
  height:calc(100vh - var(--header-h));min-height:460px;
  background:var(--ink); /* negro de fondo mientras el vídeo carga */
}
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border:0;}

/* Flecha "ver más" — sin ella un vídeo a pantalla completa parece el final de
   la página. Rebota despacio para llamar la atención sin marear. */
.hero-scroll-cue{position:absolute;z-index:3;bottom:26px;left:50%;transform:translateX(-50%);
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);animation:cueBounce 2.4s ease-in-out infinite;
  transition:background .18s ease,border-color .18s ease;}
.hero-scroll-cue:hover{background:rgba(0,0,0,.6);border-color:#fff;}
.hero-scroll-cue:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.hero-scroll-arrow{width:11px;height:11px;border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(45deg);margin-top:-3px;}
@keyframes cueBounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(7px);}}

/* ── CIFRAS DE LA FICHA DE PROYECTO ─────────────────────────── (ago-2026)
   Van sobre la cabecera oscura del proyecto, justo bajo el título. Es lo que
   un técnico busca antes de leer nada: cuánta agua, para quién, cuándo y
   dónde. Se separan con una línea fina para que se lean como una tabla. */
/* Rejilla de columnas iguales: grid-auto-flow:column hace que salgan tantas
   columnas como datos haya, así que con 2, 3 o 4 cifras la fila queda siempre
   repartida y ninguna se descuelga a una segunda línea desalineada. */
.pfacts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  margin-top:22px;border-top:1px solid rgba(255,255,255,.18);padding-top:16px;max-width:1000px;}
/* Columna flex para que las etiquetas queden alineadas abajo aunque un valor
   ocupe dos o tres líneas (p. ej. «Consorcio ACCIONA · ONEE»). */
.pfact{display:flex;flex-direction:column;justify-content:space-between;
  padding-inline-end:24px;border-inline-end:1px solid rgba(255,255,255,.18);}
.pfact + .pfact{padding-inline-start:24px;}
.pfact:last-child{border-inline-end:none;padding-inline-end:0;}
.pfact-v{font-size:18px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:6px;}
.pfact-k{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#c9b3b5;margin-top:3px;}
@media (max-width:560px){
  .pfacts{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 0;}
  .pfact,.pfact + .pfact{padding-inline:0 12px;border-inline-end:none;}
  .pfact-v{font-size:17px;}
}

/* ── BARRA DE CREDIBILIDAD ──────────────────────────────────── (ago-2026)
   Franja de clientes y socios bajo el vídeo. Los nombres van en gris y se
   tiñen de rojo al pasar por encima: se nota que están vivos sin gritar.
   Cuando lleguen los logotipos en PNG, la regla .logo-strip img ya los deja
   en escala de grises y les devuelve el color al pasar el ratón — el truco
   estándar para que doce logos de doce marcas distintas no parezcan un
   mosaico de colores peleándose. */
/* Más aire que antes: el muro necesita respirar para no parecer un apéndice
   del vídeo del hero. */
.logo-strip-block{padding-top:56px;padding-bottom:56px;border-bottom:1px solid var(--line);}
.logo-strip-label{text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text);margin-bottom:18px;}
/* Rejilla de fichas, no una fila de texto suelto: da sensación de muro de
   clientes aunque todavía no haya logotipos. Cada ficha admite ya un <img>
   en lugar del rótulo — el HTML lleva el <img> comentado listo para
   descomentar cuando lleguen los oficiales, sin tocar nada más. */
.logo-strip-head{text-align:center;margin-bottom:26px;}
.logo-strip-title{font-size:26px;line-height:1.2;}
/* Muro de clientes: un solo panel blanco con separadores finos, en vez de doce
   cajitas sueltas. Doce recuadros con borde propio y sin logotipo dentro daban
   sensación de imagen rota; así se lee como una tabla de referencias, que es
   como lo presentan las ingenierías del sector.
   El truco de los separadores es gap:1px sobre el color de línea: funciona con
   cualquier número de columnas, así que no hay que recalcular bordes al pasar
   a tableta o móvil. */
.logo-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 14px 40px rgba(24,38,65,.07);}
.logo-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:132px;padding:20px 12px;background:#fff;text-align:center;
  transition:background .22s ease;}
/* El tinte va como background-IMAGE, no como background: si se sustituye el
   background entero por un color translúcido, la celda deja de pintar blanco
   y se transparenta el gris de los separadores de la rejilla. */
.logo-tile:hover{background-image:linear-gradient(rgba(var(--accent-rgb),.06),rgba(var(--accent-rgb),.06));}
/* El margen inferior deja sitio al subrayado del hover: sin él caía encima
   del país y parecía texto tachado. */
.logo-word{position:relative;font-size:17px;font-weight:700;letter-spacing:.05em;color:#7f8b94;
  line-height:1.15;margin-bottom:9px;transition:color .22s ease;}
/* Subrayado de acento que aparece bajo la marca al pasar por encima */
.logo-word::after{content:'';position:absolute;left:50%;bottom:-7px;width:0;height:2px;
  background:var(--accent);transform:translateX(-50%);transition:width .25s ease;}
.logo-tile:hover .logo-word{color:var(--navy);}
.logo-tile:hover .logo-word::after{width:26px;}
.logo-place{font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:#c0c8ce;transition:color .22s ease;}
.logo-tile:hover .logo-place{color:#96a1aa;}
/* Regla retirada el 13/08/2026: era de una versión anterior del muro y le
   ganaba en especificidad a .logo-img, que es la que manda ahora. .logo-tile img
   fijaba una altura pequeña y dejaba los logotipos cuadrados diminutos. */
/* ·· Sectores ························································
   El color no decora, informa: dice a qué se dedica cada cliente. Cinco tonos
   profundos y poco saturados, sacados de la paleta de la casa (el petróleo de
   INEXAQUA, el rojo de INEXA, el pizarra del texto) más un ocre y un verde
   apagados, para que no parezca un arcoíris.
   ⚠️ A propósito NO se usan los colores corporativos de cada empresa: eso sí
   evocaría su marca, que es lo que queremos evitar hasta tener permiso. */
.logo-tile[data-sector="agua"]           { --sec:#1c5976; }
.logo-tile[data-sector="energia"]        { --sec:#9c6b12; }
.logo-tile[data-sector="industria"]      { --sec:#5b6b78; }
.logo-tile[data-sector="infraestructura"]{ --sec:#68161c; }
.logo-tile[data-sector="tecnologia"]     { --sec:#2f6b52; }

/* El subrayado de la marca toma el color del sector en vez del rojo genérico */
.logo-tile .logo-word::after{background:var(--sec);}

/* ── Muro tipográfico (12/08/2026) ──────────────────────────────────
   Se retiraron los iconos de sector de cada ficha: con un icono genérico
   repetido doce veces el muro quedaba soso, que es justo lo que hay que
   evitar en el bloque que sostiene toda la credibilidad de la portada.
   Mientras no haya logotipos, la marca se trata como una marca: tipografía
   grande, oscura y con carácter, no un rótulo gris pequeño.
   El sector sobrevive en el color del filete superior de cada ficha, así
   que la información no se pierde — solo deja de ocupar sitio. */
.logo-tile{position:relative;justify-content:center;padding:26px 14px;min-height:118px;}
.logo-tile::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--sec);opacity:.55;transition:opacity .22s ease;}
.logo-tile:hover::before{opacity:1;}
.logo-word{font-size:clamp(17px,1.5vw,22px);font-weight:800;letter-spacing:.01em;
  color:var(--navy);margin-bottom:7px;}
.logo-tile:hover .logo-word{color:var(--sec);}
.logo-place{font-size:10px;letter-spacing:.12em;color:#aab3ba;}
/* Cuando exista el archivo del logotipo, manda él y el rótulo se esconde */
.logo-tile:has(.logo-img) .logo-word{display:none;}
/* Tamaño y tratamiento de los logotipos (13/08/2026, medido sobre la página):
   · 54 px de alto — con 42 los logotipos cuadrados (EMASESA, EMALSA) salían
     diminutos al lado de los apaisados, que llenaban el ancho.
   · contrast(1.15) porque el gris puro se comía los logotipos claros: el de
     Endesa y el de Danfoss casi desaparecían.
   · opacity .78 en vez de .68, por lo mismo. */
/* Los PNG ya vienen normalizados a un mismo gris oscuro (28–80) desde el propio
   archivo, así que aquí no hace falta grayscale(): sólo se atenúan un poco en
   reposo y recuperan su peso al pasar el ratón. */
.logo-tile .logo-img{max-height:54px;max-width:82%;width:auto;margin-bottom:10px;object-fit:contain;
  opacity:.74;transition:opacity .22s ease,transform .22s ease;}
.logo-tile:hover .logo-img{opacity:1;transform:scale(1.04);}
.logo-tile:hover .logo-img{filter:none;opacity:1;}
/* La ficha con logotipo necesita algo menos de alto: la imagen ya da presencia */
.logo-tile:has(.logo-img){padding:22px 14px 0;}

/* ---- Banda al pie de cada ficha: nombre + «país · sector» (13/08/2026) ----
   Sustituye a la leyenda de iconos que había debajo del muro. El icono del
   sector se descartó: a 15 px y sin leyenda que lo explique, una gota gris no
   dice «ciclo del agua», sólo mete ruido. Escrito se entiende de un vistazo y
   está traducido a los cinco idiomas.
   El nombre en texto no es redundante aunque haya logotipo: el de EMASESA es
   sólo el símbolo, sin el nombre al lado, y sin esta banda no se sabría quién es.
   Los márgenes negativos hacen que la banda llegue de lado a lado de la ficha,
   compensando el padding lateral de .logo-tile. */
.logo-tile{padding-bottom:0;}
/* `margin-top:auto` la clava al fondo de la ficha: sin esto cada banda caía
   donde terminaba su logotipo y quedaban a distinta altura en la misma fila.
   El `min-height` iguala las de una línea (las tres sin logotipo, que no
   muestran el nombre) con las de dos. */
.logo-cap{display:flex;flex-direction:column;justify-content:center;
  width:calc(100% + 28px);margin:14px -14px 0 -14px;min-height:58px;
  padding:10px 12px 12px;border-top:1px solid rgba(15,23,42,.07);
  background:rgba(15,23,42,.018);text-align:center;
  transition:background .22s ease,border-color .22s ease;}
.logo-tile:hover .logo-cap{background:rgba(var(--accent-rgb),.05);border-top-color:rgba(var(--accent-rgb),.22);}
.logo-cap-nom{display:block;font-size:12.5px;font-weight:700;letter-spacing:.05em;
  color:var(--navy);line-height:1.25;}
.logo-cap-sub{display:block;margin-top:3px;font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#9aa3ae;line-height:1.35;}
.logo-tile:hover .logo-cap-nom{color:var(--sec);}
/* En las fichas que aún no tienen logotipo manda el rótulo grande de dentro,
   así que el nombre de la banda se calla para no decirlo dos veces. */
.logo-tile:not(:has(.logo-img)) .logo-cap-nom{display:none;}
/* El país ya vive en la banda; el <span> antiguo de dentro deja de pintarse.
   Se mantiene la regla, y no se borra el marcado, por si hiciera falta volver. */
.logo-place{display:none;}

.logo-strip-foot{margin-top:14px;text-align:center;font-size:13px;color:var(--text);}
.logo-strip-foot strong{color:var(--navy);font-weight:700;}
@media (max-width:900px){ .logo-strip{grid-template-columns:repeat(3,minmax(0,1fr));}
  .logo-strip-title{font-size:22px;} }
@media (max-width:560px){ .logo-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .logo-word{font-size:14px;} .logo-tile{min-height:80px;padding:14px 8px;} }

.logo-item{font-size:15px;font-weight:700;letter-spacing:.03em;color:#9aa4ab;
  transition:color .2s ease;cursor:default;}
.logo-item:hover{color:var(--accent);}
/* Regla retirada el 13/08/2026: era de una versión anterior del muro y le
   ganaba en especificidad a .logo-img, que es la que manda ahora. .logo-strip img
   fijaba una altura pequeña y dejaba los logotipos cuadrados diminutos. */

/* ── BLOQUE ÚNICO DE PRESENTACIÓN ───────────────────── (rev.2 ago-2026, WEB-007)
   Reúne lo que antes eran tres secciones (resumen comercial + "Qué hacemos" +
   "Sobre INEXA"). Objetivo de dirección: el Inicio tiene que ser corto y
   atractivo, no una sucesión de bloques que obligue a hacer scroll. */
.home-pitch{padding-top:64px;padding-bottom:60px;position:relative;overflow:hidden;}
/* Halo de color muy sutil detrás del titular: da profundidad sin recargar. */
/* La forma propia que tenía este bloque se retiró el 12/08/2026: ya la da
   el sistema común .organico, y tenerlas las dos hacía que se pisaran
   (la vieja colaba left, height y transform sobre la nueva). */
.pitch-head{position:relative;text-align:center;max-width:820px;margin:0 auto;}
.pitch-title{font-size:clamp(25px,3.4vw,38px);line-height:1.18;margin-bottom:16px;}
.pitch-title em{font-style:normal;color:var(--accent);}
.pitch-lead{margin:0 auto;max-width:680px;}

.pitch-figures{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px 0 30px;text-align:center;}
.pitch-figure{padding:20px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
.pitch-figure:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.09);border-color:rgba(var(--accent-rgb),.4);}
.pitch-figure strong{display:block;font-size:clamp(26px,3vw,34px);line-height:1.1;color:var(--accent);font-weight:800;margin-bottom:6px;}
/* Ojo al ">": debe afectar SOLO al span que envuelve la etiqueta, no a los
   .lang-* que van dentro. Sin él se mostraban los cinco idiomas seguidos. */
.pitch-figure > span{display:block;font-size:12.5px;color:var(--text);line-height:1.35;}

/* Las 4 líneas de trabajo, compactas: una fila cada una en vez de 4 tarjetas
   con párrafo largo. Son <button> porque llevan a Servicios al pulsarlas. */
.pitch-lines{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:34px;}
.pitch-line{display:flex;gap:15px;align-items:flex-start;text-align:left;width:100%;
  padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  position:relative;overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
/* Franja de acento que crece al pasar por encima */
.pitch-line::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .24s ease;}
.pitch-line:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.09);border-color:rgba(var(--accent-rgb),.35);}
.pitch-line:hover::before{transform:scaleY(1);}
.pitch-line:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* El número fantasma (01/02/03/04 grande y translúcido detrás de cada línea de
   «Ingeniería del agua, con resultados medibles») se retiró el 13/08/2026 a
   petición de Carlos, junto con la comilla decorativa de las opiniones: eran
   adornos que no aportaban y competían con el texto.
   El atributo `data-num` sigue en el HTML por si algún día se quiere recuperar;
   sin esta regla, simplemente no pinta nada.
   Antes, el 07/08/2026, ya se había retirado la chapita pequeña con el mismo
   número, porque la cifra salía dos veces en la misma tarjeta. */
.pitch-line-body{display:block;position:relative;z-index:1;}
.pitch-line-body strong{display:block;font-size:15px;color:var(--navy);margin-bottom:3px;}
.pitch-line-desc{display:block;font-size:13.5px;color:var(--text);line-height:1.5;}
html[dir="rtl"] .pitch-line{text-align:right;}

.pitch-actions{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;}
.btn-lg{padding:15px 30px;font-size:15px;}
.pitch-link{font-size:14px;font-weight:700;color:var(--accent);border-bottom:1px solid transparent;transition:border-color .18s ease;}
.pitch-link:hover{border-bottom-color:var(--accent);}

/* ── APARICIÓN AL HACER SCROLL ──────────────────────────────── (ago-2026)
   Los bloques entran con un desplazamiento corto en cuanto asoman. Da
   sensación de web cuidada sin ralentizar nada: solo transform y opacity.
   revealInit() en main.js añade .is-visible; si el JS no llegara a
   ejecutarse, .no-js-reveal deja todo visible (ver regla de abajo). */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1;transform:none;}
/* Respeta a quien tenga desactivadas las animaciones en su sistema. */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .hero-scroll-cue{animation:none;}
}

/* ══ SERVICIO DE CAMPO · cabecera grande y prueba de obra ══ (14/08/2026)
   Fernando pidió que esta sección fuese lo más destacado del sitio. En vez de
   inventar un lenguaje nuevo, se le aplica el del hero de la portada: imagen a
   sangre, titular grande y degradado encima. Todo el color sale de las
   variables de marca —`--navy` es #391015, un granate muy oscuro, no un azul—,
   así que la sección pesa más sin desentonar con el resto.
   Las fotos se templan un poco (`sepia`) porque son de un día nublado y en
   crudo tiran a frío: bajo el granate quedaban en tierra de nadie. */
.fsp-hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--navy);}
.fsp-hero > img,
.fsp-hero > .fsp-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 38%;filter:saturate(.82) sepia(.12) contrast(1.04);}
/* Si alguien tiene desactivadas las animaciones, el vídeo se queda en su
   primer fotograma en vez de moverse solo. */
@media (prefers-reduced-motion:reduce){ .fsp-hero-video{display:none;} }
.fsp-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(var(--navy-rgb),.62) 0%, rgba(var(--navy-rgb),.24) 30%,
    rgba(var(--navy-rgb),.86) 74%, rgba(var(--navy-rgb),.97) 100%);}
.fsp-hero .inner{position:relative;z-index:2;padding-bottom:64px;color:#fff;}
.fsp-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  padding:7px 15px;border-radius:999px;background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.22);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
/* El punto verde dice «esto está funcionando ahora», que es medio argumento. */
.fsp-kicker i{width:7px;height:7px;border-radius:50%;background:#4ade80;
  box-shadow:0 0 0 4px rgba(74,222,128,.22);}
.fsp-hero h1{font-size:clamp(38px,5.4vw,74px);line-height:1.02;letter-spacing:-.02em;
  margin:0 0 18px;color:#fff;max-width:16ch;}
.fsp-lead{font-size:19px;line-height:1.55;color:rgba(255,255,255,.82);max-width:56ch;margin:0 0 28px;}
.fsp-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.fsp-cta .btn-outline.fsp-b2{border-color:rgba(255,255,255,.42);color:#fff;background:transparent;}
.fsp-cta .btn-outline.fsp-b2:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff;}

/* Banda de prueba: foto a un lado, argumento y cifras al otro */
.fsp-prueba{background:var(--navy);color:#fff;}
.fsp-prueba-g{display:grid;grid-template-columns:1.05fr .95fr;min-height:460px;}
.fsp-prueba-img{position:relative;overflow:hidden;}
.fsp-prueba-img img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.86) sepia(.1);}
.fsp-prueba-txt{padding:62px 58px;display:flex;flex-direction:column;justify-content:center;}
.fsp-prueba h2{color:#fff;font-size:34px;line-height:1.12;margin:0 0 14px;max-width:18ch;}
.fsp-prueba p{color:rgba(255,255,255,.74);font-size:15.5px;line-height:1.62;margin:0 0 30px;max-width:48ch;}
.fsp-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:26px;}
.fsp-cifras b{display:block;font-size:29px;font-weight:800;color:#fff;line-height:1.05;letter-spacing:-.01em;}
.fsp-cifras span{display:block;margin-top:7px;font-size:11.5px;line-height:1.4;
  color:rgba(255,255,255,.58);letter-spacing:.07em;text-transform:uppercase;}

/* Tira de momentos: cuatro cuadrados a sangre, sin más texto que el pie */
.fsp-tira{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--navy);}
.fsp-tira figure{margin:0;position:relative;aspect-ratio:1;overflow:hidden;}
.fsp-tira img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.85) sepia(.08);transition:transform .5s ease;}
.fsp-tira figure:hover img{transform:scale(1.05);}
.fsp-tira figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  color:#fff;font-size:12px;font-weight:700;line-height:1.35;
  background:linear-gradient(to top,rgba(var(--navy-rgb),.92),transparent);}

@media (max-width:900px){
  .fsp-hero{min-height:76vh;}
  .fsp-prueba-g{grid-template-columns:1fr;}
  .fsp-prueba-img{min-height:260px;}
  .fsp-prueba-txt{padding:40px 26px;}
  .fsp-tira{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .fsp-hero{min-height:70vh;}
  .fsp-cifras{grid-template-columns:1fr;gap:16px;}
  .fsp-cta{flex-direction:column;align-items:stretch;}
}

/* ── OPINIONES DE CLIENTES ──────────────────────────────────── (ago-2026, WEB-009) */
.quote-card{margin:0;padding:28px 26px 24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 24px rgba(0,0,0,.05);
  position:relative;overflow:hidden;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
/* Filete de marca arriba: es lo que hace que se lea como tarjeta y no como
   un bloque de texto suelto. Crece a todo el ancho al pasar por encima. */
.quote-card::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--navy-2));
  transform:scaleX(.28);transform-origin:left;transition:transform .3s ease;}
.quote-card:hover::after{transform:scaleX(1);}
.quote-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(0,0,0,.11);
  border-color:rgba(var(--accent-rgb),.3);}
/* La comilla decorativa de fondo se retiró el 13/08/2026 a petición de Carlos:
   con la firma arriba, la tarjeta ya se lee como testimonio sin necesidad del
   dibujo, que sólo añadía ruido detrás del texto. */
.quote-text{margin:0;font-size:15px;line-height:1.62;color:var(--navy-2);font-style:italic;position:relative;z-index:1;}
.quote-author{display:block;margin-top:auto;}

/* ── Firma de cada opinión, arriba ─────────────────── (13/08/2026)
   Quién habla va primero —logotipo, nombre y razón social— y la cita debajo.
   Antes el nombre estaba arriba en tipografía y la razón social quedaba suelta
   al final, sin dueño aparente; ahora las tres cosas viajan juntas.
   El logotipo va pequeño y junto al texto a propósito: los tres tienen formas
   incompatibles —HoSt es un rótulo ancho, EMASESA y EMALSA son símbolos
   pequeños— y puestos grandes y solos, uno gritaba y dos susurraban. */
.quote-firma{display:flex;align-items:center;gap:14px;padding-bottom:16px;
  border-bottom:1px solid var(--line);}
.quote-firma-logo{height:36px;width:auto;max-width:116px;flex:none;object-fit:contain;
  opacity:.8;transition:opacity .22s ease;}
.quote-card:hover .quote-firma-logo{opacity:1;}
.quote-firma-t{display:block;min-width:0;}
.quote-firma-nom{display:block;font-size:13px;font-weight:800;letter-spacing:.04em;
  color:var(--navy);line-height:1.3;}
.quote-firma-txt{display:block;margin-top:2px;font-size:11.5px;color:var(--text);line-height:1.45;}
.quote-proof{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:5px 11px;border-radius:999px;
  background:rgba(31,122,77,.09);color:#1f7a4d;font-size:11px;font-style:normal;font-weight:700;}
.quote-proof svg{width:11px;height:11px;flex:none;}
html[dir="rtl"] .quote-card::after{transform-origin:right;}
.quote-disclaimer{margin-top:20px;text-align:center;font-size:12.5px;color:var(--text);}

/* Tarjeta de destacado pendiente de confirmar (WEB-008) — a propósito se ve
   distinta de las demás, para que el hueco cante en la revisión. */
.proj-card-pending{border:1px dashed var(--line);background:transparent;box-shadow:none;}
.proj-thumb-pending{display:flex;align-items:center;justify-content:center;min-height:170px;
  background:rgba(var(--navy-rgb),.04);color:var(--text);font-size:34px;font-weight:300;cursor:default;}

/* Control de sonido — esquina inferior derecha del hero */
.hero-sound-btn{position:absolute;z-index:3;bottom:22px;right:22px;display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:999px;cursor:pointer;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.42);color:#fff;
  font-size:13px;font-weight:600;line-height:1;backdrop-filter:blur(6px);
  transition:background .18s ease,border-color .18s ease;}
.hero-sound-btn:hover{background:rgba(0,0,0,.62);border-color:#fff;}
.hero-sound-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.hero-sound-icon{font-size:15px;}
/* En árabe el hero va en RTL: el botón se va a la esquina contraria. */
html[dir="rtl"] .hero-sound-btn{right:auto;left:22px;}
.hero-video-placeholder{position:relative;aspect-ratio:16/9;border-radius:var(--radius);background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04));border:1.5px dashed rgba(255,255,255,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;}
.hero-video-play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;}
.hero-video-placeholder p{font-size:12.5px;color:#cfd9e1;max-width:220px;margin:0;}

.btn{display:inline-block;background:var(--accent);color:#fff;border:none;padding:13px 24px;border-radius:8px;font-size:14px;font-weight:700;}
.btn:hover{background:var(--accent-dark);}
.btn-outline{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:#fff;}
.btn-outline:hover{border-color:#fff;}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--navy);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn.btn-ghost:hover{background:transparent;color:var(--accent);border-color:var(--accent);}

.grid{display:grid;gap:18px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.card{background:rgba(var(--accent-rgb),.09);border:1px solid var(--line);border-top:1px solid rgba(var(--accent-rgb),.55);border-radius:var(--radius);padding:22px;transition:box-shadow .15s, transform .15s;}
.card:hover{box-shadow:0 10px 24px rgba(0,0,0,.08);transform:translateY(-2px);}
.card .num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(var(--accent-rgb),.22);font-size:12px;font-weight:800;color:var(--accent);margin-bottom:10px;}
.card p{font-size:13.5px;margin-bottom:6px;}
.card p:last-child{margin-bottom:0;}
.card.clickable{cursor:pointer;}

.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;flex-wrap:wrap;}

.stat{border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center;background:#fff;}
.stat .n{font-size:26px;font-weight:800;color:var(--accent);}
.stat .l{font-size:12px;color:var(--text);margin-top:6px;}

table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
th{background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;text-align:left;padding:12px 14px;}
td{font-size:13px;color:var(--text);padding:12px 14px;border-top:1px solid var(--line);}
td:first-child{color:var(--navy);font-weight:600;}
tr:nth-child(even) td{background:#fafbfc;}

.tags{display:flex;flex-wrap:wrap;gap:8px;}
.tag{background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:12.5px;color:var(--navy-2);font-weight:500;}
button.tag:hover{border-color:var(--accent);color:var(--accent);}
button.tag.active{background:var(--accent);border-color:var(--accent);color:#fff;}

.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px;}
.filter-btn{border:1px solid var(--line);background:#fff;border-radius:20px;padding:8px 16px;font-size:12.5px;font-weight:600;color:var(--navy-2);}
.filter-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.filter-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;}
.proj-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;display:flex;flex-direction:column;height:100%;}
.proj-thumb{position:relative;height:170px;overflow:hidden;cursor:pointer;background:var(--bg);flex-shrink:0;}
.proj-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .25s;}
.proj-thumb:hover img{transform:scale(1.05);}
.proj-thumb .zoom-hint{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.75);color:#fff;font-size:10.5px;padding:4px 8px;border-radius:6px;}
.proj-body{padding:16px;display:flex;flex-direction:column;flex:1;}
.proj-title{font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:6px;}
.proj-cat{font-size:11px;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
.proj-desc{font-size:12px;color:var(--text);line-height:1.5;margin:6px 0 10px;}
/* .proj-link se retiró el 12/08/2026: era un botón rojo por tarjeta y en la
   rejilla de Proyectos salían diecisiete a la vez. La regla se conserva por si
   se usara suelto en algún sitio. */
.proj-link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#fff;background:var(--accent);padding:8px 14px;border-radius:8px;margin-top:auto;align-self:flex-start;}
.proj-link:hover{opacity:.85;}

/* Tarjeta de proyecto: entera clicable */
.proj-card{cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.proj-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(24,38,65,.14);
  border-color:rgba(var(--accent-rgb),.35);}
.proj-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
/* La cifra, sobre la foto y con velo para que se lea encima de cualquier imagen */
.proj-cifra{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;pointer-events:none;
  background:linear-gradient(to top,rgba(10,12,16,.88) 0%,rgba(10,12,16,.45) 55%,transparent 100%);color:#fff;}
.proj-cifra b{display:block;font-size:21px;font-weight:800;line-height:1.05;letter-spacing:-.01em;}
.proj-cifra span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#e8c7c9;margin-top:3px;}
/* Flecha que sustituye al botón: solo asoma al pasar por encima */
.proj-body{position:relative;}
.proj-title{padding-inline-end:38px;}
.proj-flecha{position:absolute;inset-inline-end:16px;bottom:14px;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;
  opacity:0;transform:translateX(-6px);transition:opacity .22s ease,transform .22s ease;}
.proj-card:hover .proj-flecha,.proj-card:focus-visible .proj-flecha{opacity:1;transform:none;}
/* El «Ampliar» sigue abriendo la galería, con su propio clic */
.proj-thumb .zoom-hint{cursor:zoom-in;}
.proj-thumb .img-count{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.75);color:#fff;font-size:10.5px;padding:4px 8px;border-radius:6px;}
.proj-thumb .video-badge{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:5px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;padding:4px 9px 4px 7px;border-radius:20px;box-shadow:0 4px 10px rgba(0,0,0,.25);}
.proj-thumb .video-badge svg{width:10px;height:10px;fill:#fff;flex:none;}

.lightbox{position:fixed;inset:0;background:rgba(10,15,22,.92);display:none;align-items:center;justify-content:center;z-index:200;padding:24px;}
.lightbox.open{display:flex;}
.lightbox-inner{max-width:1000px;width:100%;text-align:center;}
.lightbox img{max-height:76vh;margin:0 auto;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox-caption{color:#d7dee4;font-size:13px;margin-top:14px;}
.lightbox-controls{display:flex;justify-content:space-between;align-items:center;margin-top:16px;}
.lb-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600;}
.lb-btn:hover{background:rgba(255,255,255,.16);}
.lb-close{position:absolute;top:20px;right:26px;background:none;border:none;color:#fff;font-size:26px;line-height:1;}
.lb-count{color:#9fb0bf;font-size:12.5px;}

.team-card,.partner-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff;}
.team-card{text-align:center;}
/* ── Retrato de la tarjeta de equipo ──
   Antes era un círculo de 72px. Ahora es un bloque vertical 3:4 a sangre (los
   márgenes negativos compensan el padding:20px de .team-card) para que las
   fotos de cuerpo entero se vean enteras sin recortar.
   Quien no tiene foto usa el MISMO bloque con sus iniciales en grande, así la
   rejilla mantiene todas las tarjetas a la misma altura. */
.avatar{width:auto;margin:-20px -20px 14px;aspect-ratio:3/4;border-radius:9px 9px 0 0;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:46px;font-weight:700;letter-spacing:.02em;color:var(--navy);opacity:1;overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;}
/* En una sola columna la foto 3:4 ocuparía media pantalla: se limita el ancho
   de la tarjeta para que el retrato no se desmadre. */
@supports not (aspect-ratio:3/4){.avatar{height:0;padding-bottom:133.33%;position:relative;}.avatar img{position:absolute;inset:0;}}
.role{font-size:12px;color:var(--accent);font-weight:600;}

/* ── Módulos (departamentos) de "Nuestro Equipo" ──
   Cada módulo = .team-module con su cabecera .team-module-head + rejilla propia.
   No cambia nada de .team-card: las tarjetas siguen siendo idénticas, solo se
   agrupan. Ojo: el asistente virtual (js/main.js) cuenta y lee
   "#inexaqua-equipo .team-card", que sigue funcionando igual al estar todas
   las tarjetas en el DOM. */
/* ── QUIÉNES SOMOS · LA EMPRESA ──────────────── (rev.2 ago-2026, WEB-011)
   Dos columnas reales: relato a la izquierda, vídeo + credenciales +
   descargables a la derecha. */
.empresa{padding-top:52px;padding-bottom:56px;}
.empresa-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:46px;align-items:start;}
.empresa-title{font-size:clamp(23px,2.7vw,32px);line-height:1.2;margin-bottom:14px;}
.empresa-title em{font-style:normal;color:var(--accent);}
.empresa-claim{font-size:16.5px;color:var(--navy-2);margin-bottom:22px;max-width:none;}
.empresa-sub{font-size:16px;margin:26px 0 10px;color:var(--navy);
  padding-inline-start:12px;border-inline-start:3px solid var(--accent);}

/* Columna derecha. sticky para que el vídeo y las credenciales acompañen la
   lectura del texto largo de la izquierda en pantallas altas. */
.empresa-lado{display:flex;flex-direction:column;gap:16px;position:sticky;top:110px;}
.empresa-video-frame{position:relative;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.18);}
.empresa-video-frame video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;background:#000;}
.empresa-video-cap{font-size:12.5px;font-weight:700;color:var(--accent);margin:9px 0 0;}
.empresa-creds{display:flex;flex-direction:column;gap:12px;}
.empresa-creds .card{margin:0;padding:16px 18px;}
.empresa-creds .card h3{font-size:14.5px;}
.empresa-creds .card p{font-size:13px;line-height:1.5;}

/* Descargables en fila compacta, justo debajo del vídeo. En una columna
   lateral no cabe una rejilla de tarjetas, y en fila se leen mejor. */
.empresa-docs-box{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:16px 18px;}
.empresa-docs-head{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text);margin-bottom:8px;}
.doc-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);}
.doc-row:first-of-type{border-top:none;}
.doc-row-ico{width:17px;height:17px;fill:var(--accent);flex:none;opacity:.75;}
.doc-row-t{flex:1;font-size:13.5px;font-weight:600;color:var(--navy-2);}
.doc-row-x{font-size:10.5px;font-weight:700;color:var(--text);background:var(--bg);border-radius:4px;padding:2px 6px;}
.doc-row:hover .doc-row-t{color:var(--accent);}
.doc-row:hover .doc-row-ico{opacity:1;}

/* ── EQUIPO · FICHAS ────────────────────────── (rev.2 ago-2026, WEB-012)
   Rediseño pedido por dirección: la sección tenía que verse más atractiva.
   La foto pasa a ocupar toda la parte superior de la tarjeta y el nombre y el
   cargo van ENCIMA, sobre un degradado — antes iban debajo en texto plano y
   quedaba frío. Al pasar el ratón la foto hace un zoom leve y la tarjeta se
   eleva. */
.tcard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.tcard{position:relative;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease;}
.tcard:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(0,0,0,.14);
  border-color:rgba(var(--accent-rgb),.45);}

.tcard-photo{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:44px;font-weight:700;color:var(--navy);}
.tcard-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;
  transition:transform .5s ease;}
.tcard:hover .tcard-photo img{transform:scale(1.05);}
/* Degradado para que el nombre se lea sobre cualquier foto */
.tcard-photo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(10,12,16,.86) 0%, rgba(10,12,16,.35) 34%, transparent 62%);}
/* Sin foto: se ven las iniciales, así que no hace falta oscurecer tanto */
.tcard-noimg .tcard-photo::after{background:linear-gradient(to top, rgba(10,12,16,.80) 0%, transparent 52%);}

.tcard-overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 15px;}
.tcard-name{font-size:14.5px;line-height:1.25;color:#fff;margin:0 0 3px;font-weight:700;}
.tcard-role{font-size:11.5px;font-weight:600;line-height:1.3;color:#fff;opacity:.92;}
/* Línea de acento que aparece bajo el cargo al pasar por encima */
.tcard-overlay::after{content:'';display:block;height:2px;width:0;background:var(--accent);
  margin-top:8px;transition:width .3s ease;}
.tcard:hover .tcard-overlay::after{width:38px;}

.tcard-body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:10px;flex:1;}
.tcard-bio{font-size:12.5px;line-height:1.5;color:var(--text);margin:0;}
/* Enlace de LinkedIn de cada ficha. El logotipo va en el azul corporativo de
   LinkedIn — es una marca ajena y así se reconoce al instante — y el texto en
   el rojo de INEXA. Al pasar por encima se tiñe todo de azul LinkedIn. */
.tcard-li{display:inline-flex;align-items:center;gap:7px;margin-top:auto;
  font-size:11.5px;font-weight:700;color:var(--accent);
  padding:6px 10px;border-radius:7px;border:1px solid var(--line);
  align-self:flex-start;transition:background .18s ease,border-color .18s ease,color .18s ease;}
.tcard-li-logo{width:14px;height:14px;fill:#0A66C2;flex:none;transition:fill .18s ease;}
a.tcard-li:hover{background:rgba(10,102,194,.08);border-color:rgba(10,102,194,.45);color:#0A66C2;}
a.tcard-li:focus-visible{outline:2px solid #0A66C2;outline-offset:2px;}

/* Hueco reservado: la persona aún no ha dado su perfil. No es un enlace, es un
   <span>, así que no se puede pulsar. Solo se ve mientras
   TEAM_LI_PLACEHOLDER esté en true (ver js/main.js) — al publicar se apaga. */
.tcard-li-pending{color:var(--text);opacity:.55;border-style:dashed;cursor:default;}
.tcard-li-pending .tcard-li-logo{fill:var(--text);}
html[dir="rtl"] .tcard-overlay,html[dir="rtl"] .tcard-body{text-align:right;}

/* Cabecera de cada grupo, con barra de acento a la izquierda */
.team-module-head{position:relative;padding-inline-start:14px;}
.team-module-head::before{content:'';position:absolute;inset-inline-start:0;top:2px;bottom:12px;
  width:4px;border-radius:2px;background:var(--accent);}

.team-module{margin-bottom:44px;}
.team-module:last-child{margin-bottom:0;}
.team-module-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:10px;margin-bottom:20px;border-bottom:1px solid var(--line);}
.team-module-head h2{font-size:19px;margin-bottom:0;color:var(--navy);}
.team-module-count{font-size:12px;font-weight:600;color:var(--accent);background:rgba(var(--accent-rgb),.1);border-radius:20px;padding:3px 10px;}
.team-module-desc{flex-basis:100%;font-size:13px;color:var(--text);margin:0;}
.partner-card{display:flex;gap:16px;align-items:flex-start;}
.partner-logo{width:56px;height:56px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--bg);}

.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;}
label{font-size:12.5px;font-weight:600;color:var(--navy);display:block;margin-bottom:6px;}
.field{width:100%;border:1px solid var(--line);border-radius:8px;padding:11px 12px;font-size:13.5px;font-family:inherit;margin-bottom:16px;color:var(--ink);}
textarea.field{min-height:110px;resize:vertical;}
.office{border-left:2px solid var(--accent);padding-left:14px;margin-bottom:20px;}
.office h4{font-size:13.5px;margin-bottom:4px;}
.office p{font-size:12.5px;margin-bottom:2px;}
.form-status{margin-top:14px;padding:11px 14px;border-radius:8px;font-size:13px;font-weight:600;}
.form-status.sending{background:rgba(var(--navy-rgb),.07);color:var(--navy);}
.form-status.success{background:rgba(46,157,90,.12);color:#1e7a45;}
.form-status.error{background:rgba(var(--accent-rgb),.1);color:var(--accent-dark);}

.cta-band{background:var(--accent);text-align:center;padding:56px 0;}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.85);max-width:520px;margin:0 auto 22px;}

footer.site{background:var(--navy);color:#9fb0bf;padding:40px 0 24px;font-size:12.5px;transition:background .25s ease;}
/* ·· Footer a juego con INEXAQUA ·· mientras se navega dentro de la sección
   azul (.iq-accent, activada por JS en showSection() como body.iq-mode),
   el footer adopta el mismo tono en vez de dar el salto brusco al rojo. */
body.iq-mode footer.site{--navy:#182641;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;margin-bottom:26px;}
footer.site h4{color:#fff;font-size:13px;margin-bottom:12px;}
footer.site a{color:#9fb0bf;}
footer.site a:hover{color:#fff;}
footer.site .flinks{display:flex;flex-direction:column;gap:8px;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:#748496;}
.foot-funding{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px;opacity:.85;}
.foot-funding img{height:26px;background:#fff;border-radius:4px;padding:2px 6px;}

/* ---------- WHATSAPP · panel del header (sin botón flotante propio) ---------- */
.wa-widget{position:fixed;bottom:20px;right:20px;width:370px;max-width:calc(100vw - 32px);background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:hidden;z-index:150;display:none;flex-direction:column;}
.wa-widget.open{display:flex;}
.wa-widget-header{background:var(--accent);color:#fff;padding:18px 44px 18px 18px;display:flex;align-items:center;gap:12px;position:relative;}
.wa-widget-avatar{width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wa-widget-title{font-size:15px;font-weight:700;}
.wa-widget-subtitle{font-size:12px;color:rgba(255,255,255,.85);}
.wa-widget-close{position:absolute;top:14px;right:16px;background:none;border:none;color:#fff;font-size:19px;line-height:1;}
.wa-widget-body{padding:18px;background:#e5ded6;min-height:260px;display:flex;flex-direction:column;gap:10px;justify-content:flex-end;}
.wa-bubble{background:#fff;border-radius:10px;padding:11px 13px;font-size:13.5px;line-height:1.5;color:var(--ink);max-width:88%;box-shadow:0 1px 2px rgba(0,0,0,.08);}
.wa-widget-footer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);align-items:flex-end;}
.wa-input{flex:1;border:1px solid var(--line);border-radius:14px;padding:11px 14px;font-size:13.5px;font-family:inherit;min-width:0;resize:none;height:64px;}
.wa-send{width:42px;height:42px;border-radius:50%;background:var(--accent);border:none;color:#fff;font-size:16px;flex-shrink:0;}
.wa-send:hover{background:var(--accent-dark);}

/* ---------- ASISTENTE VIRTUAL · botón flotante + panel emergente ---------- */
.assistant-fab{position:fixed;bottom:20px;right:20px;width:34px;height:34px;border-radius:50%;background:var(--accent);border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.25);z-index:150;transition:transform .15s;}
.assistant-fab:hover{transform:scale(1.08);}
.assistant-widget{position:fixed;bottom:62px;right:20px;width:370px;max-width:calc(100vw - 32px);background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:hidden;z-index:150;display:none;flex-direction:column;}
.assistant-widget.open{display:flex;}
.assistant-widget-header{background:var(--accent);color:#fff;padding:18px 44px 18px 18px;display:flex;align-items:center;gap:12px;position:relative;}
.assistant-widget-avatar{width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.assistant-widget-title{font-size:15px;font-weight:700;}
.assistant-widget-title span{text-transform:lowercase;}
.assistant-widget-subtitle{font-size:12px;color:rgba(255,255,255,.85);}
.assistant-widget-close{position:absolute;top:14px;right:16px;background:none;border:none;color:#fff;font-size:19px;line-height:1;}
.assistant-widget-body{padding:18px;background:var(--bg,#f4f6f8);min-height:260px;max-height:400px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;}
.assistant-bubble{background:#fff;border-radius:10px;padding:11px 13px;font-size:13.5px;line-height:1.5;color:var(--ink);max-width:88%;box-shadow:0 1px 2px rgba(0,0,0,.08);align-self:flex-start;}
.assistant-bubble-user{background:var(--accent);color:#fff;align-self:flex-end;}
.assistant-chips{display:flex;flex-wrap:wrap;gap:8px;}
.assistant-chip{background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--accent);cursor:pointer;transition:background .15s;}
.assistant-chip:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.assistant-escalate{align-self:flex-start;}
.assistant-cta{background:var(--accent);color:#fff;border:none;border-radius:16px;padding:9px 14px;font-size:12.5px;font-weight:700;cursor:pointer;}
.assistant-cta:hover{background:var(--accent-dark);}
.assistant-widget-footer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);align-items:flex-end;}
.assistant-send{background:var(--accent);}

@media (max-width:920px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .contact-grid,.footer-grid{grid-template-columns:1fr;}

  /* ·· Nav móvil ·· en vez de solo ocultar nav.main-links (bug: no dejaba
     forma de volver a abrirlo), se convierte en un panel desplegable a
     pantalla completa, controlado por .mobile-nav-toggle (toggleMobileNav()
     en main.js) y visible solo cuando tiene la clase .mobile-nav-open. */
  .mobile-nav-toggle{display:flex;align-items:center;justify-content:center;}
  nav.main-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 16px 30px rgba(0,0,0,.14);
    padding:8px 16px 18px;
    max-height:calc(100vh - 64px);
    overflow-y:auto;
  }
  nav.main-links.mobile-nav-open{display:flex;}
  nav.main-links button.navlink{width:100%;text-align:left;padding:13px 10px;}
  nav.main-links .nav-dropdown{width:100%;}
  nav.main-links .nav-link-parent{width:100%;justify-content:space-between;}
  /* El mega-menú "Servicios" pasa de flotar en absoluto a expandirse en línea
     dentro del panel móvil, para que no se salga de la pantalla ni tape el
     resto de enlaces. */
  nav.main-links .dropdown-menu{position:static;box-shadow:none;border:none;background:var(--bg);margin:2px 0 4px;min-width:0;width:100%;}

  /* El hero de dos columnas (texto | vídeo) se apila en pantallas de tablet/móvil,
     igual punto de corte que el menú de navegación. */
  .hero .inner.hero-grid{grid-template-columns:1fr;gap:28px;}
  .hero .inner.hero-grid .hero-text{max-width:100%;}
  .hero-video{max-width:560px;margin:0 auto;}

  /* Hero con vídeo de fondo en tablet/móvil: se rebaja el alto mínimo para que
     el contenido de debajo asome y se vea que la página sigue. */
  /* El logo grande se reduce en tablet/móvil: a 52px dejaría sin sitio al botón
     de menú. Sigue siendo bastante mayor que los 28px originales. */
  .brand img{height:34px;}   /* 19/08: en proporción al nuevo archivo oficial, que es mucho más ancho */

  /* Quiénes somos: las dos columnas se apilan y la lateral deja de ser sticky
     (pegada en móvil taparía contenido al hacer scroll). */
  .empresa-cols{grid-template-columns:1fr;gap:30px;}
  .empresa-lado{position:static;top:auto;}
  /* Equipo: de 4 columnas a 2. A 4 las caras saldrían diminutas en tablet. */
  .tcard-grid{grid-template-columns:repeat(2,1fr);}

  /* Hero con vídeo en tablet/móvil: se rebaja el alto porque en vertical el
     100vh deja el vídeo desproporcionadamente alargado, y en móvil la barra
     del navegador se come parte de la ventana. */
  .hero.hero-video-bg{height:auto;aspect-ratio:9/13;max-height:78vh;min-height:420px;}
  .hero-sound-btn{bottom:14px;right:14px;padding:9px 13px;font-size:12px;}
  html[dir="rtl"] .hero-sound-btn{right:auto;left:14px;}
  .hero-scroll-cue{bottom:16px;width:40px;height:40px;}
  /* En tablet: 4 cifras no caben en línea, y las 4 líneas de trabajo pasan a
     una sola columna para que el texto no quede estrangulado. */
  .pitch-figures{grid-template-columns:repeat(2,1fr);}
  .pitch-lines{grid-template-columns:1fr;}
  .timeline-item[data-year]::after{display:none;}
}
@media (max-width:560px){
  /* Botón de sonido: en móvil solo el icono, el texto ocuparía demasiado. */
  .hero-sound-btn .hero-sound-text{display:none;}
  .hero-sound-btn{padding:11px;gap:0;}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
  /* El equipo se queda en 2 columnas incluso en móvil: a una sola columna el
     retrato 3:4 ocuparía casi toda la pantalla de alto. */
  .team-module .grid-3{grid-template-columns:repeat(2,1fr);gap:12px;}
  .tcard-grid{grid-template-columns:repeat(2,1fr);gap:11px;}
  .tcard-name{font-size:13px;}
  .tcard-role{font-size:10.5px;}
  .tcard-body{padding:11px 12px 13px;}
  .tcard-bio{font-size:11.5px;}
  .team-card{padding:14px;}
  .avatar{margin:-14px -14px 10px;font-size:34px;}
  .team-card h3{font-size:14px;}
}