/* =========================================================================
   Espiaire — sistema de diseño «Ingeniería».

   Un solo archivo, un solo sistema. Orden: tokens, base, utilidades,
   cascarón, bloques, adaptación a pantallas pequeñas.

   Criterio de color: fondo oscuro con un único acento frío (cian). El
   verde aparece exclusivamente en acciones de WhatsApp, para que la
   acción de contacto se distinga del resto de la interfaz sin competir
   con la identidad. Las fotografías se desaturan ligeramente para que
   convivan entre sí: vienen de sesiones distintas y sin tratamiento se
   ven como un collage.
   ========================================================================= */

:root {
  /* Superficies, de la más profunda a la más cercana */
  --tinta: #080d16;
  --carbon: #0f1826;
  --panel: #141f31;
  --panel-alto: #1a2740;
  --linea: #22304a;
  --linea-fuerte: #2f4162;

  /* Acento */
  --cian: #5fd3f3;
  --cian-fuerte: #33bee6;
  --cian-tenue: rgba(95, 211, 243, .12);

  /* Texto */
  --blanco: #f3f7fb;
  --gris: #8c9db5;
  --gris-tenue: #64758f;

  /* Acción de contacto */
  --verde: #25d366;
  --verde-oscuro: #1cab52;

  /* Superficies claras.
     El logotipo de Espiaire es azul marino sobre transparente y no se
     puede recolorear: es la marca, y alterarla no es una opción. Por eso
     las franjas donde aparece —encabezado y pie— son claras y el
     logotipo descansa sobre ellas tal cual, sin recuadro. El cuerpo del
     sitio conserva el fondo oscuro de la dirección «Ingeniería». */
  --claro: #ffffff;
  --claro-suave: #eef3f9;
  --claro-linea: #d7e2ef;
  --marino: #0f2745;
  --marino-suave: #5b6d85;
  --enlace: #1f5fa0;

  /* Tipografía */
  --titulo: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --texto: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Ritmo */
  --max: 1240px;
  --angosto: 780px;
  --r: 3px;
  --transicion: 170ms cubic-bezier(.4, 0, .2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--tinta);
  color: var(--blanco);
  font-family: var(--texto);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--titulo);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.032em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 1.5rem + 2.9vw, 4rem); }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.1vw, 3rem); }
h3 { font-size: 1.35rem; letter-spacing: -.022em; }
h4 { font-size: 1.05rem; letter-spacing: -.018em; }

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }

::selection { background: var(--cian); color: var(--tinta); }

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

.salto {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cian); color: var(--tinta);
  padding: 14px 20px; font-family: var(--titulo); font-weight: 600;
}
.salto:focus { left: 0; }

/* --- Estructura --------------------------------------------------------- */

.env { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 28px; }
.env--angosto { max-width: var(--angosto); }

.sec { padding: clamp(64px, 3rem + 5vw, 112px) 0; }
.sec--carbon { background: var(--carbon); border-block: 1px solid var(--linea); }
/* Franja clara: la usan las secciones que muestran logotipos de marcas,
   porque esas marcas no se pueden recolorear para que lean sobre oscuro. */
.sec--claro { background: var(--claro-suave); border-block: 1px solid var(--claro-linea); }
.sec--claro h2, .sec--claro h3 { color: var(--marino); }
.sec--claro p { color: var(--marino-suave); }
.sec--claro .eti { color: var(--enlace); }
.sec--claro .eti::before { background: var(--enlace); }

/* Antetítulo: la etiqueta corta en versalitas que abre cada sección. */
.eti {
  font-family: var(--titulo);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cian);
  /* Alineado al inicio: en pantallas angostas la etiqueta se parte en dos
     líneas y centrada dejaba la raya flotando a media altura. */
  display: flex; align-items: flex-start; gap: 12px; line-height: 1.5;
}
.eti::before {
  content: ""; width: 26px; height: 1px; background: var(--cian);
  flex: none; margin-top: .72em;
}
.eti--centrada { justify-content: center; }

.cab { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: end; margin-bottom: 56px; }
.cab h2 { margin-top: 16px; }
.cab p { color: var(--gris); font-size: 1.05rem; }
.cab--centrada { grid-template-columns: 1fr; justify-items: center; text-align: center; max-width: 720px; margin-inline: auto; }

/* --- Botones ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--titulo); font-weight: 600; font-size: .92rem;
  line-height: 1.2; padding: 15px 26px;
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; transition: var(--transicion);
}
.btn .icono { flex: none; }
.btn--cian { background: var(--cian); color: var(--tinta); }
.btn--cian:hover { background: var(--cian-fuerte); }
.btn--marino { background: var(--marino); color: var(--claro); }
.btn--marino:hover { background: var(--azul-fuerte, #1f5fa0); color: #fff; }
.btn--wa { background: var(--verde); color: #04240f; }
.btn--wa:hover { background: var(--verde-oscuro); color: #fff; }
.btn--linea { border-color: var(--linea-fuerte); color: var(--blanco); }
.btn--linea:hover { border-color: var(--cian); color: var(--cian); background: var(--cian-tenue); }

.acc { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.acc--centrada { justify-content: center; }

/* --- Barra superior y encabezado ---------------------------------------- */

.util { background: var(--claro-suave); border-bottom: 1px solid var(--claro-linea); font-size: .8rem; }
.util__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 40px; flex-wrap: wrap; }
.util__datos { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.util a, .util span { display: inline-flex; align-items: center; gap: 8px; color: var(--marino-suave); }
.util a:hover { color: var(--marino); }
.util__social { display: flex; gap: 18px; }
.util__social a { font-family: var(--titulo); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }

.enc { position: sticky; top: 0; z-index: 100; background: var(--claro); border-bottom: 1px solid var(--claro-linea); }
.enc__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 86px; }

/* El logotipo va sin recuadro ni tratamiento: la franja que lo contiene
   es clara, así que la marca se reproduce tal como es.

   El archivo mide 1024x1024 pero la marca solo ocupa 976x669: hay un 35%
   de lienzo transparente arriba y abajo que la hacía verse pequeña. El
   contenedor recorta ese vacío en pantalla —el archivo no se toca y la
   marca no se deforma, solo deja de arrastrar aire muerto—. La altura
   del contenedor es la altura real de la marca; la de la imagen es esa
   misma altura multiplicada por 1024/669. */
.logo { display: flex; align-items: center; overflow: hidden; height: 46px; }
.logo img { height: 70px; width: auto; max-width: none; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__lista { display: flex; align-items: center; gap: 4px; }
.nav__lista > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--titulo); font-size: .89rem; font-weight: 500;
  color: var(--marino-suave); padding: 10px 12px; border-radius: var(--r);
  transition: var(--transicion);
}
.nav__lista > li > a:hover { color: var(--marino); background: var(--claro-suave); }
.nav__lista .actual { color: var(--enlace); }
.nav__cheurón { transform: rotate(90deg); opacity: .55; }

.grupo { position: relative; }
.submenu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 300px;
  background: var(--claro); border: 1px solid var(--claro-linea);
  box-shadow: 0 24px 60px rgba(15, 39, 69, .18); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: var(--transicion);
}
.grupo:hover .submenu, .grupo:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; font-size: .88rem; color: var(--marino-suave);
  transition: var(--transicion);
}
.submenu a:hover { color: var(--marino); background: var(--claro-suave); }
.submenu .icono { color: var(--enlace); opacity: .9; }

.enc__tel { font-family: var(--titulo); font-size: .92rem; font-weight: 600; color: var(--marino); display: inline-flex; align-items: center; gap: 8px; }
.enc__acc { display: flex; align-items: center; gap: 16px; }

.menu-btn {
  display: none; background: none; border: 1px solid var(--claro-linea);
  border-radius: var(--r); color: var(--marino); padding: 9px; cursor: pointer;
}
.menu-btn .icono-cerrar { display: none; }
.menu-btn[aria-expanded="true"] .icono-menu { display: none; }
.menu-btn[aria-expanded="true"] .icono-cerrar { display: block; }

/* --- Migas -------------------------------------------------------------- */

.migas { border-bottom: 1px solid var(--linea); background: var(--carbon); }
.migas ol { display: flex; flex-wrap: wrap; gap: 10px; padding: 13px 0; font-size: .8rem; color: var(--gris-tenue); }
.migas li + li::before { content: "/"; margin-right: 10px; opacity: .45; }
.migas a:hover { color: var(--cian); }

/* --- Héroe -------------------------------------------------------------- */

.heroe { position: relative; overflow: hidden; border-bottom: 1px solid var(--linea); }
.heroe::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(880px 460px at 76% 6%, rgba(95, 211, 243, .15), transparent 62%),
    linear-gradient(180deg, transparent 40%, var(--tinta) 100%);
}
.heroe__in { position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: stretch; padding-top: 64px; }
.heroe__txt { display: flex; flex-direction: column; justify-content: center; }
.heroe h1 { margin-top: 26px; }
.heroe h1 em { font-style: normal; color: var(--cian); }
.heroe__lead { margin-top: 26px; font-size: 1.12rem; color: var(--gris); max-width: 33em; }
.heroe__pts { margin-top: 28px; display: grid; gap: 12px; }
.heroe__pts li { display: flex; align-items: flex-start; gap: 12px; font-size: .97rem; }
.heroe__pts .icono { color: var(--cian); margin-top: 3px; flex: none; }
.heroe__acc { padding-bottom: 76px; }
.heroe__nota { margin-top: 18px; font-size: .85rem; color: var(--gris-tenue); }

/* La fotografía es un panel a sangre que ocupa toda la altura del héroe:
   alineada al pie dejaba un hueco muerto en la esquina superior. */
.heroe__foto { position: relative; align-self: stretch; min-height: 460px; }
/* Solo la fotografía del héroe se posiciona a sangre. El selector tiene
   que ser de hijo directo: el sello vive dentro de este mismo contenedor
   y con `.heroe__foto img` su logotipo también quedaba absoluto, encimado
   sobre el texto. */
.heroe__foto > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 35%;
  filter: saturate(.76) contrast(1.05);
}
.heroe__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(205deg, rgba(8, 13, 22, .06), rgba(8, 13, 22, .82));
}
.sello {
  position: absolute; left: 26px; bottom: 26px; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  background: var(--claro); border: 1px solid var(--claro-linea);
  padding: 14px 20px; min-width: 300px; max-width: 340px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
}
.sello img { height: 52px; width: auto; object-fit: contain; flex: none; }
.sello strong { display: block; font-family: var(--titulo); font-size: .88rem; color: var(--marino); }
.sello span { font-size: .8rem; color: var(--marino-suave); line-height: 1.4; }

/* --- Cabecera de página interior ---------------------------------------- */

.cabecera { position: relative; overflow: hidden; border-bottom: 1px solid var(--linea); }
.cabecera__fondo { position: absolute; inset: 0; }
/* Varias fotografías de origen miden 520–700 px y aquí se estiran a
   todo el ancho. Un desenfoque leve disimula el reescalado y deja
   la banda como telón de fondo, que es su función: el texto va
   encima. La escala evita que el desenfoque despinte los bordes. */
.cabecera__fondo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.5) contrast(1.05) blur(2px);
  transform: scale(1.04);
}
.cabecera__fondo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--tinta) 30%, rgba(8, 13, 22, .82) 62%, rgba(8, 13, 22, .55));
}
.cabecera__in { position: relative; z-index: 2; padding: clamp(56px, 3rem + 3vw, 96px) 0; max-width: 780px; }
.cabecera h1 { margin-top: 20px; }
.cabecera__lead { margin-top: 22px; font-size: 1.08rem; color: var(--gris); max-width: 40em; }

/* --- Cifras ------------------------------------------------------------- */

.cifras { background: var(--carbon); border-bottom: 1px solid var(--linea); }
.cifras__in { display: grid; grid-template-columns: repeat(4, 1fr); }
.cifra { padding: 38px 28px; border-left: 1px solid var(--linea); }
.cifra:first-child { border-left: 0; padding-left: 0; }
.cifra b { display: block; font-family: var(--titulo); font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.8rem); letter-spacing: -.045em; }
.cifra span { display: block; margin-top: 8px; font-size: .84rem; color: var(--gris-tenue); line-height: 1.5; }

/* --- Puertas ------------------------------------------------------------ */

.puertas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.puerta { position: relative; display: block; padding: 38px; border: 1px solid var(--linea); overflow: hidden; transition: var(--transicion); }
.puerta:hover { border-color: var(--cian); }
.puerta__img { position: absolute; inset: 0; }
.puerta__img img { width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: grayscale(.45) saturate(.8); transition: var(--transicion); }
.puerta:hover .puerta__img img { opacity: .44; transform: scale(1.035); }
.puerta__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 24, 38, .5), rgba(8, 13, 22, .95)); }
.puerta__c { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 340px; }
.puerta h3 { margin-top: 16px; font-size: 1.7rem; }
.puerta > .puerta__c > p { margin-top: 14px; color: var(--gris); font-size: .97rem; max-width: 32em; }
.puerta ul { margin-top: 22px; }
.puerta li { display: flex; gap: 10px; align-items: flex-start; font-size: .89rem; color: var(--gris-tenue); padding: 9px 0; border-top: 1px solid var(--linea); }
.puerta li .icono { color: var(--cian); opacity: .75; margin-top: 2px; flex: none; }
.puerta__ir { margin-top: auto; padding-top: 26px; font-family: var(--titulo); font-weight: 600; font-size: .92rem; color: var(--cian); display: inline-flex; align-items: center; gap: 10px; }
.puerta:hover .puerta__ir .icono { transform: translateX(4px); }
.puerta__ir .icono { transition: var(--transicion); }

/* --- Índice de servicios ------------------------------------------------ */

.indice { border-top: 1px solid var(--linea); }
.fila { display: grid; grid-template-columns: 64px 46px 1fr 1.35fr 110px; gap: 22px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--linea); transition: var(--transicion); }
.fila:hover { background: var(--carbon); box-shadow: inset 3px 0 0 var(--cian); padding-inline: 18px; }
.fila__n { font-family: var(--titulo); font-size: .82rem; font-weight: 600; color: var(--cian); letter-spacing: .12em; }
.fila__ico { color: var(--gris); transition: var(--transicion); }
.fila:hover .fila__ico { color: var(--cian); }
.fila h3 { font-size: 1.3rem; }
.fila p { color: var(--gris-tenue); font-size: .93rem; }
.fila__ir { font-family: var(--titulo); font-size: .85rem; font-weight: 600; color: var(--gris); display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.fila:hover .fila__ir { color: var(--cian); }

/* --- Pasos editoriales -------------------------------------------------- */

.pasos__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.pasos h2 { margin-top: 18px; }
.pasos > * > p { margin-top: 20px; color: var(--gris); font-size: 1.04rem; }
.pasos__lista { margin-top: 34px; }
.paso { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--linea); }
.paso b { font-family: var(--titulo); font-size: .82rem; font-weight: 600; color: var(--cian); letter-spacing: .1em; padding-top: 4px; }
.paso span { display: block; margin-top: 7px; font-size: .93rem; color: var(--gris-tenue); }
.pasos__foto img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: saturate(.72) contrast(1.05); }

/* --- Bloque partido ----------------------------------------------------- */

.partido { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 2rem + 3vw, 68px); align-items: center; }
.partido--inv .partido__foto { order: 2; }
.partido__foto img { width: 100%; aspect-ratio: 1/1; object-fit: cover; filter: saturate(.75) contrast(1.04); }
.partido h2 { margin-top: 18px; }
.partido__txt > p { margin-top: 20px; color: var(--gris); }
.check { margin-top: 26px; }
.check li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; font-size: .96rem; border-top: 1px solid var(--linea); }
.check li:first-child { border-top: 0; }
.check .icono { color: var(--cian); margin-top: 3px; flex: none; }

/* --- Tarjetas ----------------------------------------------------------- */

.rejilla { display: grid; gap: 20px; }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }

.tarj { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--linea); padding: 30px; transition: var(--transicion); }
a.tarj:hover { border-color: var(--cian); transform: translateY(-3px); }
.tarj__ico { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--linea-fuerte); color: var(--cian); margin-bottom: 22px; }
.tarj h3 { font-size: 1.18rem; }
.tarj p { margin-top: 12px; color: var(--gris-tenue); font-size: .93rem; }
.tarj__ir { margin-top: auto; padding-top: 20px; font-family: var(--titulo); font-weight: 600; font-size: .87rem; color: var(--cian); display: inline-flex; align-items: center; gap: 8px; }

/* Tarjeta con fotografía: catálogo de equipos. */
.tarj--foto { padding: 0; }
.tarj--foto .tarj__img { background: var(--panel-alto); border-bottom: 1px solid var(--linea); }
.tarj--foto .tarj__img img { width: 100%; aspect-ratio: 4/3; object-fit: contain; padding: 22px; filter: saturate(.85); }
.tarj--foto .tarj__c { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }

/* --- Tipos de instalación ----------------------------------------------- */

.tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tipo {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--linea);
  overflow: hidden; transition: var(--transicion);
}
.tipo:hover { border-color: var(--linea-fuerte); }
.tipo__img { position: relative; background: var(--panel-alto); }
.tipo__img img {
  width: 100%; aspect-ratio: 3/2; object-fit: cover;
  /* Encuadre alto: en estas fotos el equipo está en la parte superior y
     con el centro por omisión quedaba fuera de cuadro. */
  object-position: 50% 32%;
  filter: saturate(.78) contrast(1.05);
}
/* Render de producto en vez de fotografía de espacio: se muestra completo
   y sobre su propio fondo, no recortado como una foto. */
.tipo--producto .tipo__img img { object-fit: contain; padding: 26px; filter: none; }
.tipo__marca {
  position: absolute; top: 16px; left: 16px;
  font-family: var(--titulo); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--cian); color: var(--tinta); padding: 7px 12px;
}
.tipo__c { padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.tipo__c h3 { margin-top: 12px; font-size: 1.5rem; }
.tipo__c > p { margin-top: 14px; color: var(--gris); font-size: .96rem; }
.tipo .check { margin-top: 20px; }
.tipo .check li { font-size: .91rem; color: var(--gris-tenue); padding: 8px 0; }
.tipo__ir {
  margin-top: auto; padding-top: 24px;
  font-family: var(--titulo); font-weight: 600; font-size: .9rem;
  color: var(--cian); display: inline-flex; align-items: center; gap: 9px;
}
.tipo:hover .tipo__ir .icono { transform: translateX(4px); }
.tipo__ir .icono { transition: var(--transicion); }

/* La tarjeta destacada abre el segmento que el negocio quiere ganar. */
.tipo--destacado { border-color: var(--cian); box-shadow: 0 0 0 1px var(--cian); }
.tipo--destacado .tipo__c { background: linear-gradient(180deg, var(--cian-tenue), transparent 55%); }

/* --- Proyectos ---------------------------------------------------------- */

.obra { position: relative; overflow: hidden; border: 1px solid var(--linea); display: block; }
.obra img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: grayscale(.3) saturate(.85) contrast(1.05); transition: var(--transicion); }
.obra:hover img { filter: grayscale(0) saturate(1) contrast(1.05); transform: scale(1.04); }
/* El degradado tiene que arrancar antes: en fotos claras el texto
   quedaba sobre zonas brillantes y perdía contraste. */
.obra__c { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px;
  background: linear-gradient(transparent, rgba(8, 13, 22, .62) 34%, rgba(8, 13, 22, .97) 74%); }
.obra__lugar { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--cian); letter-spacing: .04em; }
.obra h3 { margin-top: 8px; font-size: 1.15rem; }
.obra p { margin-top: 6px; font-size: .88rem; color: var(--gris); }

/* Ficha sin fotografía: no se inventa una imagen que no existe. */
.obra--texto { background: var(--panel); padding: 28px; }
.obra--texto h3 { margin-top: 10px; }
.obra--texto p { margin-top: 10px; color: var(--gris-tenue); }

/* Obras sin fotografía: lista compacta, no tarjetas a medias. */
.obras-lista { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--linea); }
.obras-lista .eti { margin-bottom: 26px; }
.obras-lista ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.obras-lista li { padding: 20px 0; border-top: 1px solid var(--linea); }
.obras-lista h3 { font-size: 1.08rem; }
.obras-lista .obra__lugar { margin-top: 7px; }
.obras-lista p { margin-top: 8px; font-size: .89rem; color: var(--gris-tenue); }

/* --- Muro tipográfico de clientes --------------------------------------- */

.muro { display: grid; grid-template-columns: 200px 1fr; gap: 40px; padding-top: 44px; border-top: 1px solid var(--linea); }
.muro + .muro { margin-top: 8px; }
.muro h3 { font-family: var(--titulo); font-size: .76rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gris-tenue); line-height: 1.6; }
.muro__n { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.muro__n li { font-family: var(--titulo); font-size: 1.02rem; font-weight: 500; color: var(--gris); letter-spacing: -.012em; transition: var(--transicion); }
.muro__n li:hover { color: var(--blanco); }

/* --- Marcas ------------------------------------------------------------- */

.marcas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 72px; }
.marca { display: flex; align-items: center; justify-content: center; padding: 20px 40px; }
.marca img { width: auto; object-fit: contain; }
.marca--trane img { height: 150px; }
.marca--mitsubishi img { height: 112px; }

.marcas__sec { margin-top: 34px; text-align: center; }
.marcas__sec .eti { justify-content: center; margin-bottom: 14px; }
.marcas__sec p { color: var(--marino-suave); font-size: .96rem; }

/* --- Preguntas ---------------------------------------------------------- */

.preg { border-top: 1px solid var(--linea); }
.preg details { border-bottom: 1px solid var(--linea); }
.preg summary {
  cursor: pointer; list-style: none; padding: 24px 0;
  font-family: var(--titulo); font-weight: 600; font-size: 1.08rem;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.preg summary::-webkit-details-marker { display: none; }
.preg summary .icono { color: var(--cian); flex: none; transition: var(--transicion); }
.preg .icono-menos { display: none; }
.preg details[open] summary .icono-mas { display: none; }
.preg details[open] summary .icono-menos { display: block; }
.preg__c { padding: 0 0 26px; color: var(--gris); font-size: .98rem; max-width: 58em; }

/* --- Prosa -------------------------------------------------------------- */

.prosa h2 { margin-bottom: 22px; }
.prosa h3 { margin: 40px 0 18px; }
.prosa p { color: var(--gris); margin-bottom: 18px; }
.prosa ol { counter-reset: n; margin: 24px 0; }
.prosa ol li { counter-increment: n; position: relative; padding: 12px 0 12px 52px; border-top: 1px solid var(--linea); color: var(--gris); font-size: .97rem; }
.prosa ol li::before {
  content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 12px;
  font-family: var(--titulo); font-size: .82rem; font-weight: 600; color: var(--cian); letter-spacing: .08em;
}
.prosa .check { margin: 24px 0; }
.prosa--art p { font-size: 1.05rem; }
.prosa--art h2 { font-size: 1.6rem; margin: 46px 0 20px; padding-top: 34px; border-top: 1px solid var(--linea); }
.prosa--art ul { margin: 22px 0; }
.prosa--art ul li { position: relative; padding: 10px 0 10px 26px; color: var(--gris); border-top: 1px solid var(--linea); }
.prosa--art ul li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 8px; height: 1px; background: var(--cian); }
.prosa--art ol { margin: 22px 0; }
.prosa--art a { color: var(--cian); text-decoration: underline; text-underline-offset: 3px; }
.prosa--art strong { color: var(--blanco); }

/* --- Blog --------------------------------------------------------------- */

.entrada { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--linea); overflow: hidden; transition: var(--transicion); }
.entrada:hover { border-color: var(--cian); transform: translateY(-3px); }
.entrada img { width: 100%; aspect-ratio: 3/2; object-fit: cover; filter: saturate(.75) contrast(1.05); }
.entrada__c { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.entrada__meta { font-family: var(--titulo); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cian); }
.entrada h3 { margin-top: 12px; font-size: 1.22rem; }
.entrada p { margin-top: 12px; color: var(--gris-tenue); font-size: .93rem; }
.entrada__ir { margin-top: auto; padding-top: 20px; font-family: var(--titulo); font-weight: 600; font-size: .87rem; color: var(--cian); display: inline-flex; align-items: center; gap: 8px; }

/* --- Franja de cierre --------------------------------------------------- */

.franja { background: linear-gradient(135deg, var(--panel-alto), var(--tinta) 72%); border-block: 1px solid var(--linea); }
.franja__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding: clamp(56px, 3rem + 3vw, 88px) 0; }
.franja h2 { margin-top: 16px; }
.franja p { margin-top: 18px; color: var(--gris); font-size: 1.04rem; }

/* --- Formulario --------------------------------------------------------- */

.form-bloque { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(36px, 2rem + 3vw, 64px); align-items: start; }
.form-bloque h2 { margin-top: 16px; }
.form-bloque > div > p { margin-top: 18px; color: var(--gris); }
.directo { margin-top: 30px; display: grid; gap: 12px; }
.directo a { display: inline-flex; align-items: center; gap: 12px; font-family: var(--titulo); font-weight: 600; font-size: .98rem; overflow-wrap: anywhere; }
.directo .icono { color: var(--cian); flex: none; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; background: var(--panel); border: 1px solid var(--linea); padding: clamp(24px, 1.5rem + 1.5vw, 38px); }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-family: var(--titulo); font-weight: 600; font-size: .84rem; color: var(--blanco); }
.campo__opc { font-weight: 400; color: var(--gris-tenue); }
.campo input, .campo select, .campo textarea {
  font-family: inherit; font-size: .95rem; color: var(--blanco);
  background: var(--tinta); border: 1px solid var(--linea-fuerte);
  border-radius: var(--r); padding: 13px 14px; width: 100%;
  transition: var(--transicion);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--gris-tenue); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--cian); box-shadow: 0 0 0 3px var(--cian-tenue);
}
.campo textarea { resize: vertical; min-height: 104px; }
.campo__err { color: #ff8b7d; font-size: .82rem; display: flex; align-items: center; gap: 7px; }
/* `display` de autor gana sobre el `[hidden]` del navegador: sin esta
   regla los errores se muestran desde que carga la página. */
.campo__err[hidden] { display: none; }
.campo--mal input, .campo--mal select { border-color: #ff8b7d; }
.form .btn { width: 100%; }
.form__nota { margin-top: 14px; font-size: .82rem; color: var(--gris-tenue); text-align: center; }
.form__nota a { color: var(--cian); text-decoration: underline; }

/* --- Paneles de contacto ------------------------------------------------ */

.panel-c { background: var(--panel); border: 1px solid var(--linea); padding: 32px; display: flex; flex-direction: column; }
.panel-c__ico { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--linea-fuerte); color: var(--cian); margin-bottom: 22px; }
.panel-c h2 { font-size: 1.2rem; }
.panel-c ul { margin-top: 18px; }
.panel-c li { padding: 12px 0; border-top: 1px solid var(--linea); }
.panel-c li a { display: flex; flex-direction: column; gap: 3px; }
.panel-c li a:hover strong { color: var(--cian); }
.panel-c strong { font-family: var(--titulo); font-size: .98rem; font-weight: 600; overflow-wrap: anywhere; transition: var(--transicion); }
.panel-c li span { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-tenue); }
.panel-c p { margin-top: 18px; color: var(--gris); font-size: .94rem; }
.panel-c__horario { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; color: var(--gris-tenue); font-size: .9rem; }
.panel-c__horario .icono { color: var(--cian); flex: none; margin-top: 2px; }
.panel-c .btn { margin-top: auto; }
.panel-c .btn:not(:first-of-type) { margin-top: 26px; }

/* --- Pie ---------------------------------------------------------------- */

/* El pie es la otra franja clara del sitio, por la misma razón que el
   encabezado: aquí vuelve a aparecer el logotipo y tiene que reproducirse
   sin recuadro ni alteración. */
.pie { background: var(--claro-suave); border-top: 1px solid var(--claro-linea); padding-top: clamp(56px, 3rem + 2vw, 76px); }
.pie__rejilla { display: grid; grid-template-columns: 1.5fr 1.15fr 1fr 1.15fr; gap: 40px; padding-bottom: 52px; }
.pie h2 { font-family: var(--titulo); font-size: .76rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--marino-suave); margin-bottom: 20px; }
/* Un segundo título dentro de la misma columna («Correo» tras los
   teléfonos, «Visítanos» tras los enlaces) quedaba pegado a la etiqueta
   de arriba. El selector h2+h2 no aplicaba: siempre hay una lista en medio. */
.pie h2 + h2,
.pie__cont + h2,
.pie ul + h2 { margin-top: 30px; }
.pie a { color: var(--marino-suave); font-size: .93rem; }
.pie a:hover { color: var(--enlace); }
.pie li { margin-bottom: 10px; }
.pie__marca .logo { margin-bottom: 24px; height: 58px; }
.pie__marca .logo img { height: 89px; }
.pie__marca p { color: var(--marino-suave); font-size: .9rem; }
.pie__cobertura { margin-top: 14px; color: var(--marino-suave); opacity: .8; font-size: .84rem; line-height: 1.7; }
.pie__social { display: flex; gap: 22px; margin-top: 22px; }
.pie__social a { font-family: var(--titulo); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.pie__cont { display: grid; gap: 14px; }
.pie__cont a { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.pie__cont span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--marino-suave); opacity: .75; }
.pie__dir { color: var(--marino-suave); font-size: .9rem; line-height: 1.7; }
.pie__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; border-top: 1px solid var(--claro-linea); padding: 22px 0; font-size: .82rem; color: var(--marino-suave); }

/* --- Contacto en el panel de menú (solo móvil) -------------------------- */

.nav__contacto { display: none; }

/* --- Barra de acciones al pie (solo móvil) ------------------------------ */

.acciones-movil { display: none; }

/* --- WhatsApp flotante -------------------------------------------------- */

.wa-flota {
  position: fixed; right: 20px; bottom: 20px; z-index: 120;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--verde); color: #04240f;
  font-family: var(--titulo); font-weight: 700; font-size: .9rem;
  padding: 14px 20px; border-radius: 999px;
  box-shadow: 0 12px 32px rgba(37, 211, 102, .32);
  transition: var(--transicion);
}
.wa-flota:hover { background: var(--verde-oscuro); color: #fff; }

/* --- Adaptación --------------------------------------------------------- */

@media (max-width: 1080px) {
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .fila { grid-template-columns: 52px 40px 1fr 90px; }
  .fila p { grid-column: 3 / -1; grid-row: 2; }
}

@media (max-width: 940px) {
  .menu-btn { display: inline-flex; position: relative; z-index: 2; }
  .enc__tel { display: none; }

  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px);
    background: var(--claro); border-left: 1px solid var(--claro-linea);
    box-shadow: -16px 0 50px rgba(15, 39, 69, .28);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 96px 26px 40px; overflow-y: auto;
    transform: translateX(100%); visibility: hidden;
    transition: transform 240ms cubic-bezier(.4, 0, .2, 1), visibility 240ms;
  }
  .nav[data-abierto="true"] { transform: none; visibility: visible; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lista > li { border-bottom: 1px solid var(--claro-linea); }
  .nav__lista > li > a { padding: 16px 4px; font-size: 1.02rem; }
  .submenu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 12px 16px; min-width: 0; background: none; }
  .submenu a { padding: 10px 4px; font-size: .9rem; }
  .nav__cheurón { display: none; }
  .nav .btn { margin-top: 26px; }
  body[data-menu="abierto"] { overflow: hidden; }

  /* La barra de utilidades ocupaba dos renglones encima del logotipo con
     información que en un teléfono no se puede tocar: un correo que nadie
     teclea ahí y un horario que no es una acción. Se retira, y su contenido
     se reparte donde sí sirve: el teléfono y WhatsApp a la barra inferior,
     al alcance del pulgar; el correo y el horario al panel de menú, que es
     donde se entra buscando cómo contactar. El horario además ya aparece
     bajo los botones del héroe y en el pie. */
  .util { display: none; }

  .nav__contacto {
    display: block; margin-top: 30px; padding-top: 24px;
    border-top: 1px solid var(--claro-linea);
  }
  .nav__contacto a, .nav__contacto p {
    display: flex; align-items: center; gap: 11px;
    font-size: .9rem; color: var(--marino-suave); margin: 0 0 14px;
  }
  .nav__contacto .icono { color: var(--enlace); flex: none; }

  /* Dos acciones grandes a la altura del pulgar. Sustituye al flotante:
     dos elementos fijos compitiendo en la misma esquina es ruido. */
  .acciones-movil {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: var(--claro); border-top: 1px solid var(--claro-linea);
    padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px rgba(8, 13, 22, .4);
  }
  .acciones-movil .btn { padding: 15px 10px; width: 100%; }
  .wa-flota { display: none; }
  /* Espacio para que la barra no tape el final del contenido. */
  body { padding-bottom: 86px; }
  body[data-menu="abierto"] .acciones-movil { display: none; }

  .heroe__in { grid-template-columns: 1fr; gap: 36px; padding-top: 40px; }
  .heroe__foto { margin: 0 -28px; }
  .heroe__foto { min-height: 0; aspect-ratio: 16/10; }
  .sello { left: 12px; bottom: 16px; }
  .heroe__acc { padding-bottom: 56px; }

  .cab, .pasos__in, .partido, .franja__in, .form-bloque { grid-template-columns: 1fr; gap: 32px; }
  .partido--inv .partido__foto { order: 0; }
  .cifras__in { grid-template-columns: 1fr 1fr; }
  .cifra { border-top: 1px solid var(--linea); padding: 28px 20px; }
  .cifra:nth-child(-n+2) { border-top: 0; }
  .cifra:nth-child(odd) { border-left: 0; padding-left: 0; }
  .puertas, .rejilla--3, .tipos { grid-template-columns: 1fr; }
  .obras-lista ul { grid-template-columns: 1fr 1fr; }
  .muro { grid-template-columns: 1fr; gap: 20px; }
  .util__social { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .env { padding: 0 20px; }

  /* El pie se quedaba en dos columnas: los correos y la dirección no caben
     en media pantalla de teléfono y el contenido salía del marco. */
  .pie__rejilla { grid-template-columns: 1fr; gap: 34px; padding-bottom: 42px; }
  .rejilla--2, .rejilla--4 { grid-template-columns: 1fr; }
  .obras-lista ul { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .acc .btn { width: 100%; }
  .fila { grid-template-columns: 44px 1fr; gap: 14px; padding: 22px 0; }
  .fila__ico { display: none; }
  .fila p { grid-column: 2; grid-row: auto; }
  .fila__ir { grid-column: 2; justify-content: flex-start; }
  .fila:hover { padding-inline: 10px; }
  .util__datos { gap: 16px; font-size: .76rem; justify-content: center; width: 100%; }
  .util__in { justify-content: center; }
  .puerta, .tarj, .panel-c { padding: 26px 22px; }
  .tipo__c { padding: 24px 22px 26px; }
  .marca { min-width: 0; width: 100%; }
  .wa-flota span { display: none; }
  .wa-flota { padding: 15px; }
  .sello { position: static; margin-top: 16px; max-width: none; }
  .heroe__foto { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  a.tarj:hover, .entrada:hover, .obra:hover img { transform: none; }
}

@media print {
  .util, .enc, .wa-flota, .franja, .form { display: none; }
  body { background: #fff; color: #000; }
}