/* =========================================================
   Polarclima — styles.css (base + componentes globales)
   Paleta y tipografía conforme al Doc. Funcional § 3
   y al bundle de diseño /diseno/project/assets/colors_and_type.css.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap");

:root {
  /* ---------- Marca (Doc. Funcional § 3) ---------- */
  --brand-navy:        #03235E;     /* primario */
  --brand-navy-deep:   #001E40;     /* hover/énfasis */
  --brand-blue:        #4A90E2;     /* acento, iconos, enlaces */
  --polar-ice:         #E8EEF7;     /* fondo suave */
  --polar-frost:       #C7DCF0;
  --ink-900:           #0B1530;
  --ink-700:           #1F2A4A;
  --ink-500:           #4B5876;
  --ink-400:           #6B7592;
  --ink-300:           #97A0B8;
  --ink-200:           #D6DAE6;
  --line:              #E4E7F0;
  --line-strong:       #C9CFDE;
  --bg:                #FFFFFF;
  --bg-soft:           #F7F8FB;
  --bg-cream:          #FFF7EC;
  --text:              #333333;     /* cuerpo de texto (Doc. Funcional § 3) */
  --success:           #1F9D6B;
  --warning:           #E59413;
  --danger:            #D7443E;

  /* ---------- Tipografía ---------- */
  --font-display: "Plus Jakarta Sans", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "DM Sans", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------- Layout ---------- */
  --container:        1240px;
  --container-narrow: 1240px;

  /* ---------- Sombras tintadas en azul ---------- */
  --shadow-1: 0 1px 2px rgba(2, 32, 92, 0.06), 0 1px 1px rgba(2, 32, 92, 0.04);
  --shadow-2: 0 4px 14px rgba(2, 32, 92, 0.08);
  --shadow-3: 0 12px 30px rgba(2, 32, 92, 0.10);
  --shadow-brand: 0 14px 30px rgba(2, 32, 92, 0.28);

  /* ---------- Movimiento ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-base: 220ms;
}

/* ===================== Reset ligero ===================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--brand-navy); text-decoration: none; transition: opacity var(--dur-base) var(--ease-out); }
a:hover { opacity: 0.8; }

/* ===================== Tipografía ===================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink-900);
  margin: 0 0 12px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: 60px; font-weight: 800; line-height: 1.04; }
h2 { font-size: 42px; font-weight: 800; }
h3 { font-size: 24px; font-weight: 700; }
h4 { font-size: 20px; font-weight: 600; }
p  { margin: 0 0 14px; color: var(--ink-500); line-height: 1.4; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brand-navy);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 24px; height: 1.5px; background: var(--brand-navy);
}

/* ===================== Layout ===================== */
.container        { max-width: var(--container);        margin: 0 auto; padding: 0; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0; }
.sec    { padding: 96px 0; }
.sec-sm { padding: 64px 0; }

/* Override exclusivo para la página /proyectos: padding compacto. */
body.page-projects .sec    { padding: 40px 0; }
body.page-projects .sec-sm { padding: 0; }
.sec-bg-ice    { background: var(--polar-ice); }
.sec-bg-soft   { background: var(--bg-soft); }
.sec-bg-cream  { background: var(--bg-cream); }
.sec-bg-navy   { background: var(--brand-navy); color: #fff; }
.sec-bg-navy h1, .sec-bg-navy h2, .sec-bg-navy h3 { color: #fff; }
.sec-bg-navy p { color: rgba(255,255,255,0.85); }

/* ===================== Botones ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600;
  border-radius: 999px; cursor: pointer; border: 0;
  text-decoration: none; line-height: 1;
  transition: all var(--dur-base) var(--ease-out);
}
.btn-primary {
  background: var(--brand-navy); color: #fff;
  padding: 14px 24px; font-size: 15px;
  box-shadow: 0 14px 30px rgba(2, 32, 92, 0.22);
}
.btn-primary:hover {
  background: var(--brand-navy-deep);
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(2, 32, 92, 0.28);
  opacity: 1;
}
.btn-primary.lg { padding: 17px 30px; font-size: 16px; }
.btn-primary.sm { padding: 10px 18px; font-size: 13px; }
.btn-outline {
  background: transparent; color: var(--brand-navy);
  border: 1.5px solid var(--brand-navy);
  padding: 12px 22px; font-size: 15px;
}
.btn-outline:hover { background: var(--polar-ice); opacity: 1; }
.btn-ghost { background: transparent; color: var(--brand-navy); padding: 10px 16px; font-size: 14px; }

/* ===================== Header / Nav ===================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
}
.site-header__logo img { width: 220px; height: auto; display: block; }
.site-header__nav { display: flex; align-items: center; gap: 28px; }
.site-header__nav a {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--ink-700);
}
.site-header__nav a.is-active,
.site-header__nav a:hover { color: var(--brand-navy); opacity: 1; }

/* ----- Sub-menú Servicios → Instalaciones / Mantenimiento ----- */
.nav-item { position: relative; }
.nav-item__link {
  display: inline-flex; align-items: center; gap: 4px;
}
.nav-item__chevron {
  width: 14px; height: 14px;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-item--has-children:hover .nav-item__chevron,
.nav-item--has-children:focus-within .nav-item__chevron { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: 100%; left: -12px;
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-3);
  padding: 8px;
  min-width: 240px;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms var(--ease-out),
              transform 180ms var(--ease-out),
              visibility 180ms;
  z-index: 100;
}
.nav-item--has-children:hover .nav-dropdown,
.nav-item--has-children:focus-within .nav-dropdown {
  opacity: 1; visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-700);
}
.nav-dropdown a:hover {
  background: var(--polar-ice);
  color: var(--brand-navy);
}
.site-header__cta { display: inline-flex; align-items: center; gap: 16px; }
.site-header__phone {
  display: none;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--ink-700);
}
@media (min-width: 1024px) { .site-header__phone { display: inline-flex; } }

.nav-toggle {
  display: none; background: transparent; border: 0; cursor: pointer;
  width: 40px; height: 40px; padding: 0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; display: block; width: 24px; height: 2px;
  background: var(--brand-navy); margin: 0 auto;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-toggle span::before { transform: translateY(-7px); }
.nav-toggle span::after  { transform: translateY(5px); }

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .site-header__nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-top: 1px solid var(--line);
    padding: 12px 0; max-height: 0; overflow: hidden;
    transition: max-height var(--dur-base) var(--ease-out);
  }
  .site-header__nav a { padding: 14px 24px; border-bottom: 1px solid var(--line); }
  .site-header.is-open .site-header__nav { max-height: 80vh; overflow-y: auto; }
  .site-header__cta .btn-primary { display: none; }

  /* Sub-menú: integrado en la lista, sin floating ni hover. */
  .nav-item--has-children { width: 100%; }
  .nav-item__link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 24px; border-bottom: 1px solid var(--line);
  }
  .nav-dropdown {
    position: static;
    opacity: 1; visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0; border-radius: 0;
    padding: 0;
    margin: 0;
    background: var(--polar-ice);
    min-width: 0;
  }
  .nav-dropdown a {
    padding: 12px 24px 12px 40px;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
  }
  .nav-dropdown a:hover { background: #fff; }
  .nav-item--has-children .nav-item__chevron { display: none; }
}

/* ===================== Footer ===================== */
.site-footer {
  background: var(--brand-navy); color: rgba(255,255,255,0.86);
  padding: 64px 0 24px; margin-top: 64px;
}
.site-footer h4 { color: #fff; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer a { color: rgba(255,255,255,0.86); }
.site-footer a:hover { color: #fff; opacity: 1; }
.site-footer__cols {
  display: grid; gap: 40px;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.site-footer__brand img { width: 140px; height: auto; margin-bottom: 18px; filter: brightness(0) invert(1); display: block; }
.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 48px; padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-size: 13px; color: rgba(255,255,255,0.7);
}
.site-footer__legal a { color: rgba(255,255,255,0.7); }

/* Enlace social Instagram con icono en color original. */
.social-instagram {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; color: #fff; opacity: 0.92;
  transition: opacity var(--dur-base) var(--ease-out);
}
.social-instagram:hover { opacity: 1; color: #fff; }
.social-instagram svg { width: 24px; height: 24px; flex-shrink: 0; }
@media (max-width: 880px) {
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .site-footer__cols { grid-template-columns: 1fr; }
}

/* ===================== Hero ===================== */
.hero {
  position: relative;
  padding: 120px 0;
  background: var(--polar-ice);
  overflow: hidden;
  isolation: isolate; /* contiene los z-index hijos */
}
/* Imagen de fondo anclada al lado derecho. */
.hero__bg {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 65%; height: 100%;
  object-fit: cover; object-position: center right;
  z-index: 0;
}
/* ===================== Capa de aire / hojas =====================
   Banda de 2000 px de alto al inicio de la home, anclada al documento
   (se mueve con el scroll). Todas las hojas comparten exactamente la
   misma velocidad y el mismo ritmo de ráfaga: cada ~13 s una corriente
   de viento las empuja a todas a la vez. Sólo se diferencian en su
   tamaño, posición vertical y desfase horizontal de partida.
*/
body.page-home main { position: relative; }   /* anclaje para la capa absoluta */

.air-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 950px;
  z-index: 1;            /* detrás del contenido pero visible donde sea transparente */
  pointer-events: none;
  overflow: hidden;
}
.air-bg__el {
  position: absolute;
  left: 0;
  width: 60px; height: auto;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 6px 14px rgba(11, 21, 48, 0.10));
  /* Todas comparten el MISMO patrón de ráfaga (mismo keyframe) y
     duraciones casi idénticas (12-15s) — así el "ritmo del viento" se
     reconoce como uno solo. La sensación de no-sincronización viene del
     animation-delay distinto por hoja: cada una está en un instante
     diferente del mismo ciclo, así unas van rápidas mientras otras se
     paran. Cuando los delays "se cruzan" por azar visual, varias hojas
     coinciden en ráfaga al mismo tiempo.
     animation-iteration-count: 3 → cada hoja pasa exactamente 3 veces.
     animation-fill-mode: forwards → al terminar la 3ª pasada se queda
     fija en el último keyframe (opacity:0, fuera de pantalla). */
  animation: air-gust 13s linear 3 forwards;
}

/* Keyframe único con dos ráfagas claras separadas por pausas.
   Distribución de tiempo:
     0%-10%   fade in
    10%-22%   arranque lento (apenas 8vw)
    22%-35%   PAUSA (sólo 4vw en 13% del tiempo)
    35%-48%   RÁFAGA 1 (avanza 50vw en 13% → 4× la velocidad media)
    48%-62%   PAUSA breve (4vw)
    62%-75%   RÁFAGA 2 (otros 50vw)
    75%-90%   salida progresiva
    90%-100%  fade out
*/
/* Sin var() dentro de calc() dentro de transform — Safari iOS tiene un
   bug conocido que rompe la interpolación entre keyframes en ese caso
   (las hojas se quedarían invisibles). El offset horizontal de partida
   de cada hoja se pone con `left` por hoja en lugar de --x0. */
@keyframes air-gust {
  0%   { transform: translate3d(0,    0px, 0) rotate(0deg);   opacity: 0; }
  10%  {                                                       opacity: 0.42; }
  22%  { transform: translate3d(8vw,  -4px, 0) rotate(15deg); }
  35%  { transform: translate3d(12vw, -8px, 0) rotate(25deg); }
  48%  { transform: translate3d(62vw, -18px, 0) rotate(85deg); }
  62%  { transform: translate3d(66vw, -12px, 0) rotate(110deg); }
  75%  { transform: translate3d(116vw, -6px, 0) rotate(170deg); }
  90%  { transform: translate3d(150vw, -2px, 0) rotate(200deg); opacity: 0.42; }
  100% { transform: translate3d(160vw,  0px, 0) rotate(215deg); opacity: 0; }
}

/* 10 hojas distribuidas en altura dentro de la banda de 2000 px.
   --x0: offset horizontal inicial (de -130vw a 0vw) → al gust, cada una
   está en una franja vertical distinta del viewport.
   Posiciones verticales en píxeles para garantizar reparto en los 2000px. */
/* Hojas distribuidas en la banda de 900 px. Misma duración base con
   pequeñas variaciones (12-15s) y delays escalonados — cada hoja está
   en un punto distinto del ciclo de ráfaga. */
.air-bg__el--1  { top:  40px; left: -68vw; width: 76px; animation-duration: 13s; animation-delay:  -1s; }
.air-bg__el--2  { top: 130px; left: -58vw; width: 52px; animation-duration: 14s; animation-delay:  -5s; }
.air-bg__el--3  { top: 230px; left: -48vw; width: 94px; animation-duration: 12s; animation-delay:  -8s; }
.air-bg__el--4  { top: 330px; left: -38vw; width: 62px; animation-duration: 15s; animation-delay:  -2s; }
.air-bg__el--5  { top: 430px; left: -28vw; width: 82px; animation-duration: 13s; animation-delay: -11s; }
.air-bg__el--6  { top: 530px; left: -18vw; width: 56px; animation-duration: 14s; animation-delay:  -6s; }
.air-bg__el--7  { top: 620px; left:  -8vw; width: 70px; animation-duration: 12s; animation-delay:  -3s; }
.air-bg__el--8  { top: 710px; left: -52vw; width: 76px; animation-duration: 15s; animation-delay:  -9s; }
.air-bg__el--9  { top: 790px; left: -32vw; width: 46px; animation-duration: 13s; animation-delay:  -4s; }
.air-bg__el--10 { top: 860px; left: -12vw; width: 60px; animation-duration: 14s; animation-delay:  -7s; }

@media (max-width: 720px) {
  /* En móvil mantenemos las 10 hojas, pero algo más pequeñas para que
     no se saturen entre ellas en pantallas estrechas. */
  .air-bg__el { transform-origin: center; }
  .air-bg__el--1  { width: 56px; }
  .air-bg__el--2  { width: 40px; }
  .air-bg__el--3  { width: 68px; }
  .air-bg__el--4  { width: 46px; }
  .air-bg__el--5  { width: 60px; }
  .air-bg__el--6  { width: 42px; }
  .air-bg__el--7  { width: 52px; }
  .air-bg__el--8  { width: 56px; }
  .air-bg__el--9  { width: 36px; }
  .air-bg__el--10 { width: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  /* No ocultamos la capa entera (algunos iPhone tienen "Reducir
     movimiento" activado y nos dejaría sin hojas). Sólo pausamos la
     animación: cada hoja se queda fija en su posición de partida. */
  .air-bg__el { animation: none; opacity: 0.18; }
}

/* Velo degradado: opaco a la izquierda → transparente a la derecha,
   para que el texto del lead siga siendo legible sobre la imagen. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    var(--polar-ice) 0%,
    var(--polar-ice) 35%,
    rgba(232, 238, 247, 0.92) 50%,
    rgba(232, 238, 247, 0.55) 65%,
    rgba(232, 238, 247, 0) 80%);
  z-index: 1;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
.hero__lead { max-width: 620px; }
.hero h1 { font-size: 64px; }
.hero p  { font-size: 18px; max-width: 540px; margin-bottom: 24px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 880px) {
  h1 { font-size: 42px; }
  h2 { font-size: 32px; }
  .sec { padding: 72px 0; }
  .container, .container-narrow { padding: 0 20px; }

  /* En móvil el hero se REORDENA en columna: imagen arriba como banner
     a tamaño completo (100% opacidad), texto debajo. El "degradado" se
     consigue con mask-image: la imagen se difumina suavemente en su
     borde inferior, fundiéndose con el fondo --polar-ice. */
  .hero {
    padding: 0 0 56px;
    background: var(--polar-ice);
    display: flex; flex-direction: column;
  }
  .hero::before { display: none; }            /* sin velo horizontal en móvil */
  .hero__bg {
    position: relative;
    width: 100%; height: auto;
    aspect-ratio: 16/10;
    max-height: 320px;
    object-fit: cover; object-position: center;
    opacity: 1;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }
  .hero .container {
    padding: 32px 20px 0;
    position: relative;
    z-index: 2;
  }
  .hero h1 { font-size: 32px; }
  .hero__lead { max-width: 100%; }
}

/* ===================== Banners de servicio (Home § 5.1) ===================== */
.service-banners {
  display: grid; gap: 24px;
  grid-template-columns: repeat(4, 1fr);
}
.service-banner {
  background: #fff; border: 1px solid var(--line);
  border-radius: 20px; padding: 28px;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.service-banner:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.service-banner__icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--polar-ice); color: var(--brand-navy);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.service-banner h3 { font-size: 18px; margin-bottom: 8px; }
.service-banner p  { font-size: 14px; color: var(--ink-500); }
@media (max-width: 1024px) { .service-banners { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .service-banners { grid-template-columns: 1fr; } }

/* ===================== Banners con imagen (Home § 5.1) ===================== */
.banners-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(2, 1fr);
}
.banner-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  display: flex; flex-direction: column;
}
.banner-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.banner-card__media {
  aspect-ratio: 16/9; overflow: hidden;
  background: var(--polar-ice);
}
.banner-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms var(--ease-out);
}
.banner-card:hover .banner-card__media img { transform: scale(1.04); }
.banner-card__body { padding: 24px 26px 26px; }
.banner-card__body h3 { font-size: 19px; margin-bottom: 10px; line-height: 1.3; }
.banner-card__body p { font-size: 14px; color: var(--ink-500); margin-bottom: 14px; }
.banner-card__link {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--brand-navy);
}
.banner-card__link:hover { color: var(--brand-navy-deep); opacity: 1; }
@media (max-width: 720px) { .banners-grid { grid-template-columns: 1fr; } }

/* ===================== Página de contacto =====================
   Wrapper con imagen de fondo (chica operadora) detrás de la cabecera
   y de las 5 tarjetas. Las tarjetas son translúcidas al 50% con
   blur para que se intuya la imagen.
*/
.contact-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.contact-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
.contact-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.45);
  z-index: 1;
  pointer-events: none;
}
.contact-hero > section { position: relative; z-index: 2; }

.contact-hero .contact-card {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.contact-hero a.contact-card:hover {
  background: rgba(255, 255, 255, 0.78);
}

/* Mobile: imagen como banner arriba, tarjetas debajo sobre fondo blanco. */
@media (max-width: 880px) {
  .contact-hero {
    background: #fff;
    display: flex; flex-direction: column;
  }
  .contact-hero::after { display: none; }
  .contact-hero__bg {
    position: relative;
    width: 100%; height: auto;
    aspect-ratio: 16/10;
    max-height: 280px;
    object-fit: cover; object-position: 70% center;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }
  /* Las tarjetas vuelven a ser opacas en móvil (el fondo translúcido
     pierde sentido cuando ya no hay imagen detrás). */
  .contact-hero .contact-card {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--line);
  }
}

.sec--contact-head { padding: 96px 0 24px; }
@media (max-width: 880px) { .sec--contact-head { padding: 64px 0 16px; } }

.contact-cards-section { padding: 0 0 72px; }
@media (max-width: 880px) { .contact-cards-section { padding: 0 0 48px; } }

.contact-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.contact-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: 18px; padding: 22px 20px;
  box-shadow: var(--shadow-1);
  color: var(--ink-900);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
a.contact-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); opacity: 1; }
.contact-card__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--polar-ice);
  color: var(--brand-navy);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 0 0 6px;
}
.contact-card p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.4;
}
.contact-card--static { cursor: default; }

@media (max-width: 1024px) { .contact-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .contact-cards { grid-template-columns: 1fr; } }

/* ===================== Sección con imagen de fondo a la derecha =====================
   Reutilizable. Mantiene los tamaños de texto globales (h1/h2/p) intactos.
*/
.sec--bg-right {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sec--bg-right .sec__bg {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 70%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
.sec--bg-right::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    #fff 0%,
    #fff 30%,
    rgba(255, 255, 255, 0.85) 45%,
    rgba(255, 255, 255, 0) 70%);
  z-index: 1;
  pointer-events: none;
}
.sec--bg-right .container { position: relative; z-index: 2; }
.sec--bg-right .sec__lead { max-width: 620px; }

@media (max-width: 880px) {
  /* Mismo planteamiento que el hero: imagen arriba a 100% de opacidad
     con mask-image que la funde por su borde inferior, y texto debajo. */
  .sec--bg-right {
    padding: 0 0 56px;
    background: #fff;
    display: flex; flex-direction: column;
  }
  .sec--bg-right::before { display: none; }
  .sec--bg-right .sec__bg {
    position: relative;
    width: 100%; height: auto;
    aspect-ratio: 16/10;
    max-height: 320px;
    object-fit: cover; object-position: center;
    opacity: 1;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }
  .sec--bg-right .container {
    padding: 32px 20px 0;
    position: relative; z-index: 2;
  }
  .sec--bg-right .sec__lead { max-width: 100%; }
}

/* ===================== Sobre Nosotros ===================== */
.about-intro {
  display: grid; gap: 48px;
  grid-template-columns: 1.1fr 0.9fr; align-items: center;
}
.about-intro__media {
  aspect-ratio: 4/3; border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-3);
}
.about-intro__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 880px) {
  .about-intro { grid-template-columns: 1fr; gap: 28px; }
}

.value-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(2, 1fr);
}
.value-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 20px; padding: 28px 28px 26px;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out);
}
.value-card:hover { transform: translateY(-2px); }
.value-card__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--polar-ice);
  color: var(--brand-navy);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.value-card__icon svg { width: 28px; height: 28px; }
.value-card__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; letter-spacing: 0.08em;
  color: var(--brand-blue);
  margin-bottom: 10px;
}
.value-card h3 { font-size: 19px; margin-bottom: 8px; }
.value-card p  { font-size: 14px; color: var(--ink-500); margin: 0 0 10px; }
.value-list {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: grid; gap: 8px;
}
.value-list li {
  font-size: 13px; color: var(--ink-500);
  padding-left: 18px; position: relative;
}
.value-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-blue);
}
@media (max-width: 720px) { .value-grid { grid-template-columns: 1fr; } }

/* ===================== Banda de marcas =====================
   Cada logo dentro de un contenedor de tamaño FIJO para que se vea
   visualmente uniforme aunque los SVG tengan ratios distintos.
   El contenedor es 180x64 (escritorio); el logo se centra dentro y
   se escala con object-fit:contain. Logos con mucho padding interno
   reciben un transform:scale específico para compensar.
*/
.brand-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  gap: 32px 24px;
  padding: 36px 0;
  max-width: 1240px;
  margin: 0 auto;
}
.brand-strip__item {
  display: flex; align-items: center; justify-content: center;
  width: 180px; height: 64px;
  transition: opacity var(--dur-base) var(--ease-out);
}
.brand-strip__item:hover { opacity: 1; }
.brand-strip__item img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.brand-strip__item:hover img { filter: grayscale(0%); opacity: 1; }

/* Compensación por marca cuando el SVG tiene padding interno o aspect ratio
   muy desigual respecto al contenedor.
   Clivet ya viene con viewBox recortado al contenido real, así que no necesita scale. */
.brand-strip__item--midea   img { transform: scale(1.05); }
.brand-strip__item--hitachi img { transform: scale(1.10); }   /* muy ancho, amplificar levemente */
.brand-strip__item--midea:hover   img { transform: scale(1.10); }
.brand-strip__item--hitachi:hover img { transform: scale(1.15); }

@media (max-width: 920px) {
  .brand-strip { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }
  .brand-strip__item { width: 150px; height: 56px; }
}
@media (max-width: 600px) {
  .brand-strip { grid-template-columns: repeat(2, 1fr); }
  .brand-strip__item { width: 130px; height: 48px; }
}

/* ===================== Sección destacada: Certificados energéticos =====================
   Fondo blanco para diferenciarse claramente de la sección de sellos
   (con fondo ice azulado) que va justo encima. Sobre el blanco una sola
   tarjeta bordeada que ocupa todo el ancho del contenedor, con el texto
   y CTA a la izquierda y la etiqueta de eficiencia energética dentro del
   propio borde, a la derecha.
*/
.cee-section { background: #fff; }
.cee-card {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 36px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 36px 40px;
  box-shadow: var(--shadow-3);
}
.cee-card__body h2 { font-size: 30px; margin: 6px 0 12px; }
.cee-card__body p  { font-size: 15px; margin-bottom: 22px; }
.cee-card__body strong { color: var(--brand-navy); }
.cee-card__visual {
  display: flex; align-items: center; justify-content: center;
}
.cee-card__visual img {
  max-width: 100%;
  max-height: 260px;
  height: auto; width: auto;
}

@media (max-width: 880px) {
  /* Móvil: las dos columnas se apilan, imagen primero, texto debajo. */
  .cee-card { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; }
  .cee-card__body h2 { font-size: 24px; }
  .cee-card__visual { order: -1; }
  .cee-card__visual img { max-height: 200px; }
}

/* ===================== Sellos de confianza ===================== */
.trust-badges {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
}
.trust-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; font-size: 13px; font-weight: 600; color: var(--ink-700);
}

/* Tarjetas de certificación destacadas (Home § 5.1 / WEB.docx). */
.cert-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
}
.cert-card {
  display: flex; align-items: center; gap: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.cert-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.cert-card__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(2, 32, 92, 0.25);
}
.cert-card__icon svg { width: 30px; height: 30px; }
.cert-card__body strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-900);
  line-height: 1.3;
  margin-bottom: 2px;
}
.cert-card__body span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-navy);
  letter-spacing: 0.02em;
}
@media (max-width: 720px) {
  .cert-strip { grid-template-columns: 1fr; }
  .cert-card { padding: 18px 20px; }
}

/* ===================== Aviso destacado (alerta) ===================== */
.alert-box {
  display: flex; gap: 16px; align-items: flex-start;
  background: #FFF8E6; border-left: 4px solid var(--warning);
  border-radius: 14px; padding: 20px 22px;
}
.alert-box strong { color: var(--ink-900); }

/* ===================== Galerías temáticas (página de proyectos) =====================
   Cada celda: un bloque de media (foto o comparador antes/después) con
   las mismas proporciones, más un pequeño titular debajo.
*/
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 16px;
}
.gallery-item { margin: 0; }
.gallery-item__media {
  border-radius: 14px;
  overflow: hidden;
  background: var(--polar-ice);
  box-shadow: var(--shadow-1);
}
.gallery-item__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out);
}
.gallery-item:hover .gallery-item__media img { transform: scale(1.05); }
.gallery-item__caption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-500);
}
@media (max-width: 880px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery-grid { grid-template-columns: 1fr; } }

/* ===================== Comparador "Antes / Después" =====================
   Se usa como una celda más de la galería: misma proporción y aspecto
   que una foto normal. La capa superior (imagen "después") se recorta
   con clip-path según la variable --ba-pos (0%-100%). El divisor y el
   tirador se posicionan en esa misma variable. El arrastre lo gestiona
   main.js con Pointer Events.
*/
.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;          /* el arrastre táctil no hace scroll de página */
  --ba-pos: 50%;
}
.ba-slider:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
}
.ba-slider__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  pointer-events: none;
}
/* Capa superior recortada: muestra la imagen "después" desde la izquierda
   hasta la posición del divisor. */
.ba-slider__top {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}
/* Etiquetas Antes / Después. */
.ba-slider__tag {
  position: absolute; top: 12px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(11, 21, 48, 0.72); color: #fff;
  pointer-events: none;
}
.ba-slider__tag--before { left: 12px; }    /* "antes" se ve desde la izquierda */
.ba-slider__tag--after  { right: 12px; }   /* "después" es la capa base → su lado visible es la derecha */
/* Divisor vertical + tirador circular. */
.ba-slider__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--ba-pos);
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.ba-slider__grip {
  position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand-navy);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.38);
  /* Animación de "aviso": balanceo horizontal + pulso suave para que el
     usuario detecte que el tirador es arrastrable. Se detiene cuando
     interactúa (hover/focus dentro del comparador). */
  transform: translate(-50%, -50%);
  animation: ba-grip-hint 2.6s ease-in-out infinite;
}
.ba-slider__grip svg {
  width: 20px; height: 20px;
  animation: ba-grip-arrows 2.6s ease-in-out infinite;
}
.ba-slider:hover .ba-slider__grip,
.ba-slider:focus-within .ba-slider__grip,
.ba-slider:hover .ba-slider__grip svg,
.ba-slider:focus-within .ba-slider__grip svg {
  animation-play-state: paused;
}
@keyframes ba-grip-hint {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  15%      { transform: translate(calc(-50% - 5px), -50%) scale(1.06); }
  35%      { transform: translate(calc(-50% + 5px), -50%) scale(1.06); }
  50%      { transform: translate(-50%, -50%) scale(1); }
}
/* Las flechas se separan ligeramente en el momento del balanceo. */
@keyframes ba-grip-arrows {
  0%, 50%, 100% { transform: scale(1); }
  15%, 35%      { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .ba-slider__grip,
  .ba-slider__grip svg { animation: none; }
}
@media (max-width: 520px) {
  .ba-slider__grip { width: 38px; height: 38px; }
  .ba-slider__grip svg { width: 17px; height: 17px; }
}

/* Detalle de proyecto: tipografía del cuerpo + galería uniforme. */
.project-detail__text { font-size: 17px; line-height: 1.5; color: var(--ink-700); }
.project-gallery__img {
  width: 100%;
  border-radius: 14px;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Botón "volver a Proyectos" sobre el hero del detalle.
   display:flex + width:fit-content fuerza línea propia, así el eyebrow
   "Retail" queda DEBAJO del botón en lugar de a su lado. */
.btn--back {
  display: flex;
  width: fit-content;
  padding: 8px 16px 8px 12px;
  font-size: 14px;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.85);
}
.btn--back:hover { background: #fff; }
.btn--back svg {
  width: 16px; height: 16px;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn--back:hover svg { transform: translateX(-3px); }

/* ===================== Tarjetas de proyecto ===================== */
.project-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}
.project-card {
  background: #fff; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out);
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.project-card__img {
  aspect-ratio: 4/3; background: var(--polar-ice);
  background-size: cover; background-position: center;
}
.project-card__body { padding: 20px; }

/* Override exclusivo para la página /proyectos: tarjeta más baja. */
body.page-projects .project-card__img { aspect-ratio: 16/10; }
body.page-projects .project-card__body { padding: 16px 20px; }
.project-card__sector {
  display: inline-block; font-size: 12px; font-weight: 600;
  color: var(--brand-navy); background: var(--polar-ice);
  border-radius: 999px; padding: 4px 10px; margin-bottom: 8px;
}
.project-card h3 { font-size: 18px; margin-bottom: 4px; }
/* Botón "+ INFO": es un <span> (la tarjeta entera ya es un <a>), sólo
   aporta la pista visual de que se puede entrar al proyecto. */
.project-card__btn {
  display: inline-flex; align-items: center;
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
  color: #fff; background: var(--brand-navy);
  padding: 8px 16px; border-radius: 999px;
  transition: background var(--dur-base) var(--ease-out);
}
.project-card:hover .project-card__btn { background: var(--brand-navy-deep); }
@media (max-width: 1024px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .project-grid { grid-template-columns: 1fr; } }

/* ===================== Formularios ===================== */
.form-grid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr 1fr;
}
.form-grid .form-row--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.form-label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--ink-700); margin-bottom: 6px;
}
.form-label .req { color: var(--danger); }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  font-family: var(--font-body); font-size: 14px;
  background: #fff; color: var(--ink-900);
  transition: border-color 180ms, box-shadow 180ms;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--brand-navy);
  box-shadow: 0 0 0 3px rgba(2, 32, 92, 0.10);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-500); }
.form-check input[type="checkbox"] { margin-top: 3px; }
.form-error { color: var(--danger); font-size: 13px; margin-top: 6px; }
.form-success {
  background: #E8F7F0; border: 1px solid #BFE5D2; color: #1F6F4D;
  border-radius: 14px; padding: 16px 20px; margin-bottom: 16px;
}

/* ===================== Cláusula LOPD ===================== */
.lopd-clause {
  background: var(--bg-soft);
  border-left: 3px solid var(--ink-200);
  border-radius: 8px;
  padding: 14px 18px;
  margin-top: 18px;
}
.lopd-clause p {
  font-size: 12px;
  color: var(--ink-400);
  margin: 0;
  line-height: 1.55;
}
.lopd-clause a { color: var(--brand-navy); text-decoration: underline; }

/* ===================== Botón flotante de WhatsApp ===================== */
.fab-whatsapp {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
  border: 0; transition: transform 180ms;
}
.fab-whatsapp:hover { transform: scale(1.06); opacity: 1; }
.fab-whatsapp svg { width: 30px; height: 30px; }
.fab-whatsapp::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid #25D366; opacity: 0.6;
  animation: fab-pulse 2s ease-out infinite;
}
@keyframes fab-pulse {
  0%   { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ===================== Banner de cookies ===================== */
.cookie-banner {
  position: fixed; left: 24px; bottom: 24px; z-index: 55;
  max-width: 420px; background: #fff;
  padding: 20px 22px; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(2,32,92,0.18);
  border: 1px solid var(--line);
}
.cookie-banner h4 { margin: 0 0 8px; font-size: 16px; }
.cookie-banner p  { font-size: 13px; margin: 0 0 14px; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-banner.is-hidden { display: none; }

@media (max-width: 540px) {
  .cookie-banner { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .fab-whatsapp { right: 16px; bottom: 90px; }
}

/* ===================== Utilidades ===================== */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 16px; } .mt-4 { margin-top: 32px; } .mt-6 { margin-top: 48px; }