/* ==========================================================================
   HIGALTOR TECHNICS, S.L.U — hoja de estilos principal
   Paleta derivada del logotipo corporativo (azul marino + oro) y de los
   colores historicos de la marca (#336699 y #00B4CF).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marca */
  --navy-900: #071a33;
  --navy-800: #0b2545;
  --navy-700: #12305a;
  --brand-blue: #2a4a9c;
  --steel: #336699;
  /* cyan-600 es el cian de TEXTO: oscurecido respecto al cian de marca para
     cumplir WCAG AA (5.17:1 sobre blanco, 4.62:1 sobre cyan-100).
     El cian de marca original (#00b4cf) se conserva en cyan-500 para
     superficies y filetes, donde no lleva texto encima. */
  --cyan-600: #00788c;
  --cyan-500: #00b4cf;
  --cyan-300: #7fdcea;
  --cyan-100: #e2f6fa;
  /* Verde: color real del logotipo actual de la empresa (higaltor.es,
     2025), sacado por muestreo directo del PNG. green-600 esta oscurecido
     para cumplir WCAG AA como texto (5.24:1 sobre blanco); green-500 es el
     verde de marca tal cual, para superficies y botones. */
  --green-600: #3b7857;
  --green-500: #5cb987;
  --green-300: #a5d8bd;
  --green-100: #def1e7;
  --gold-600: #8a6e24;
  --gold-500: #a8862c;
  --gold-300: #d9c07a;

  /* Neutros */
  --ink: #131a24;
  --ink-2: #3d4855;
  --ink-3: #66717f;
  --line: #dfe4ea;
  --line-2: #eef1f5;
  --bg: #ffffff;
  --bg-soft: #f6f8fa;
  --bg-tint: #eef4f8;

  /* Tipografia */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Espaciado y forma */
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --r-sm: 6px;
  --r: 12px;
  --r-lg: 20px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);

  /* Sombras */
  --sh-1: 0 1px 2px rgba(11, 37, 69, 0.06), 0 2px 8px rgba(11, 37, 69, 0.05);
  --sh-2: 0 4px 12px rgba(11, 37, 69, 0.08), 0 12px 32px rgba(11, 37, 69, 0.08);
  --sh-3: 0 8px 24px rgba(11, 37, 69, 0.12), 0 24px 60px rgba(11, 37, 69, 0.12);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset y base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.9rem); }
h2 { font-size: clamp(1.65rem, 1.15rem + 2.1vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem); letter-spacing: -0.01em; }
h4 { font-size: 1.02rem; letter-spacing: 0; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--steel); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cyan-600); }

ul, ol { margin: 0; padding: 0; }

strong { color: var(--ink); font-weight: 650; }

:focus-visible {
  outline: 3px solid var(--cyan-500);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--navy-800);
  color: #fff;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

.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;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }
.section--tint { background: var(--bg-tint); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Acento decorativo: motivo hexagonal recuperado de higaltor.es, en los
   colores de marca. Por defecto se ancla a la esquina superior derecha,
   detras del contenido; los modificadores --br/--bl/--tl lo mueven a otra
   esquina (bl/tl lo reflejan en horizontal, para que "cuelgue" del lado
   contrario). .section--hex-accent-2 anade un segundo motivo (mas tenue)
   en la esquina inferior izquierda, para secciones con mucho hueco. Nada
   de esto interfiere con el texto ni con lectores de pantalla. */
.section--hex-accent,
.section--hex-accent--br,
.section--hex-accent--bl,
.section--hex-accent--tl { position: relative; overflow: hidden; isolation: isolate; }
.section--hex-accent::before,
.section--hex-accent--br::before,
.section--hex-accent--bl::before,
.section--hex-accent--tl::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--hex-inset, -3rem -4rem auto auto);
  width: var(--hex-w, clamp(280px, 32vw, 480px));
  height: var(--hex-h, clamp(230px, 27vw, 400px));
  background: url("../img/gal/hex-pattern.webp") no-repeat var(--hex-pos, top right) / contain;
  transform: var(--hex-flip, none);
  opacity: 0.6;
  pointer-events: none;
}
.section--hex-accent--br { --hex-inset: auto -4rem -3rem auto; --hex-pos: bottom right; }
.section--hex-accent--bl {
  --hex-inset: auto auto -3rem -4rem;
  --hex-pos: bottom left;
  --hex-flip: scaleX(-1);
}
.section--hex-accent--tl {
  --hex-inset: -3rem auto auto -4rem;
  --hex-pos: top left;
  --hex-flip: scaleX(-1);
}

/* Variante compacta: para secciones con contenido denso justo debajo del
   titulo (p.ej. las fichas de pavimentos, con acordeones inmediatamente
   despues), donde el tamano grande se metia por los huecos entre fichas.
   Se queda contenida en la franja del titulo, sin bajar mas. */
.section--hex-accent--sm {
  --hex-w: clamp(120px, 14vw, 170px);
  --hex-h: clamp(100px, 11vw, 140px);
  --hex-inset: -1.5rem -1.5rem auto auto;
}
.section--hex-accent--sm.section--hex-accent--bl { --hex-inset: auto auto -1.5rem -1.5rem; }
.section--hex-accent--sm.section--hex-accent--br { --hex-inset: auto -1.5rem -1.5rem auto; }
.section--hex-accent--sm.section--hex-accent--tl { --hex-inset: -1.5rem auto auto -1.5rem; }
.section--hex-accent-2::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto auto -3rem -4rem;
  width: clamp(280px, 32vw, 480px);
  height: clamp(230px, 27vw, 400px);
  background: url("../img/gal/hex-pattern.webp") no-repeat bottom left / contain;
  transform: scaleX(-1);
  opacity: 0.4;
  pointer-events: none;
}
.section--hex-accent > .wrap,
.section--hex-accent--br > .wrap,
.section--hex-accent--bl > .wrap,
.section--hex-accent--tl > .wrap { position: relative; }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p {
  margin-top: 0.9rem;
  font-size: 1.075rem;
  color: var(--ink-3);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
  font-size: 0.755rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan-600);
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: linear-gradient(90deg, var(--green-500), var(--gold-500));
  border-radius: 2px;
}
.eyebrow--light { color: var(--green-300); }

.lede {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  line-height: 1.6;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--navy-800);
  color: #fff;
  box-shadow: var(--sh-1);
}
.btn--primary:hover { background: var(--brand-blue); color: #fff; box-shadow: var(--sh-2); }

.btn--accent {
  background: var(--green-500);
  color: var(--navy-900);
  box-shadow: var(--sh-1);
}
.btn--accent:hover { background: var(--green-300); color: var(--navy-900); box-shadow: var(--sh-2); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--bg-soft); border-color: var(--ink-3); color: var(--ink); }

.btn--on-dark {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(4px);
}
.btn--on-dark:hover { background: rgba(255, 255, 255, 0.17); color: #fff; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.arrow { transition: transform 0.2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Cabecera
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line-2);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.site-header.is-scrolled {
  box-shadow: var(--sh-1);
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img { width: 168px; height: auto; }

.nav { display: flex; align-items: center; gap: 0.15rem; }
.nav a {
  position: relative;
  padding: 0.55rem 0.72rem;
  border-radius: var(--r-sm);
  font-size: 0.925rem;
  font-weight: 550;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.nav a:hover { color: var(--navy-800); background: var(--bg-soft); }
.nav a[aria-current="page"] { color: var(--navy-800); font-weight: 680; }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.2rem;
  height: 2px;
  border-radius: 2px;
  background: var(--green-500);
}

/* Selector de idioma */
.langs {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 3px;
  padding: 3px;
  background: var(--bg-soft);
  border: 1px solid var(--line-2);
  border-radius: 999px;
}
.langs a {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-decoration: none;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
/* Solo el idioma activo muestra el codigo de texto; el resto queda como
   bandera compacta (el codigo sigue en el marcado para lectores de
   pantalla). Con 5 idiomas, mostrar los 5 codigos a la vez no cabe junto
   al menu principal sin apretujar todo. */
.langs a:not([aria-current="true"]) {
  padding: 0.3rem 0.36rem;
}
.langs a:not([aria-current="true"]) .langs__code {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.langs a:hover { color: var(--navy-800); background: #fff; }
.langs a[aria-current="true"] {
  background: var(--navy-800);
  color: #fff;
}

/* Banderas: altura fija y ancho segun su proporcion real (Espana y la
   senyera son 3:2; la del Reino Unido, 2:1). Deformarlas para igualar
   anchos se notaria. */
.langs .flag {
  width: auto;
  height: 0.72rem;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.langs a[aria-current="true"] .flag {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* En pantallas estrechas se deja solo la bandera, pero el codigo de idioma
   sigue en el marcado para lectores de pantalla. */
@media (max-width: 540px) {
  .langs { padding: 2px; }
  .langs a { padding: 0.32rem 0.42rem; }
  .langs .flag { height: 0.82rem; }
  .langs__code {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}

/* Menu movil */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--navy-800);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--bg-soft); }
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* El menu pasa a boton por debajo de este ancho. Subio de 1180 a 1280 al
   entrar la octava entrada ("Obras"): con siete cabia justo, con ocho se
   apretaba contra el selector de idioma. */
@media (max-width: 1280px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    padding: 1rem var(--gutter) 1.75rem;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-2);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease),
      visibility 0.2s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a { padding: 0.8rem 0.9rem; font-size: 1.02rem; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] {
    background: var(--cyan-100);
    color: var(--navy-800);
  }
}

@media (max-width: 420px) {
  .brand img { width: 128px; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-800);
  color: #fff;
}
/* La imagen de fondo va como <img> real y no como background-image: asi la
   ruta se resuelve respecto a la pagina (no respecto a esta hoja de estilos)
   y el navegador puede priorizar su carga. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  transform: scale(1.04);
}
/* Portada: video de fondo con su fotograma como alternativa estatica para
   "prefers-reduced-motion" (el video no se llega a descargar en ese caso,
   gracias a <video preload="none">). */
.hero__bg--poster { display: none; }
.hero__bg--video { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  .hero__bg--video { display: none; }
  .hero__bg--poster { display: block; }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 90% at 12% 15%, rgba(0, 180, 207, 0.24), transparent 62%),
    linear-gradient(115deg, var(--navy-900) 12%, rgba(11, 37, 69, 0.86) 52%,
      rgba(7, 26, 51, 0.62) 100%);
}
.hero__inner {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(4rem, 10vw, 8rem);
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero .lede {
  max-width: 56ch;
  margin-top: 1.4rem;
  color: rgba(255, 255, 255, 0.84);
}
.hero--page .hero__inner { padding-block: clamp(3rem, 7vw, 5.25rem); }
.hero--page h1 { max-width: 22ch; }

/* Migas */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
  list-style: none;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.62);
}
.crumbs a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: 0.45rem; opacity: 0.5; }

/* --------------------------------------------------------------------------
   7. Cifras
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r);
  overflow: hidden;
}
.stat {
  padding: 1.4rem 1.35rem;
  background: rgba(7, 26, 51, 0.42);
  backdrop-filter: blur(2px);
}
.stat__value {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--green-300);
}
.stat__label {
  margin-top: 0.45rem;
  font-size: 0.815rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   8. Rejillas y tarjetas
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.15rem, 2.4vw, 1.85rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Tarjeta de area */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: var(--cyan-300);
}
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-tint);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 1.35rem 1.4rem 1.5rem; }
.card__body h3 { color: var(--navy-800); }
.card__body p {
  margin: 0.55rem 0 0;
  font-size: 0.925rem;
  line-height: 1.6;
  color: var(--ink-3);
}
.card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.855rem;
  font-weight: 650;
  color: var(--cyan-600);
}
.card:hover .card__more .arrow { transform: translateX(3px); }

/* Tarjeta simple de texto */
.tile {
  padding: 1.6rem 1.55rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.tile h3 { color: var(--navy-800); }
.tile p { margin: 0.65rem 0 0; font-size: 0.94rem; color: var(--ink-3); }
.tile__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--cyan-100);
  color: var(--cyan-600);
  font-size: 0.85rem;
  font-weight: 750;
}

/* --------------------------------------------------------------------------
   9. Antes / despues
   -------------------------------------------------------------------------- */
.ba {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
/* Las fotos de origen mezclan vertical (graffiti) y apaisada (piscina);
   4/3 es el marco comun que menos recorta a ambas. */
.ba__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-tint);
  cursor: pointer;
}
.ba__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba__media .is-after {
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.ba__media:hover .is-after,
.ba__media:focus-visible .is-after,
.ba__media.is-toggled .is-after { opacity: 1; }

.ba__tag {
  position: absolute;
  z-index: 2;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(7, 26, 51, 0.78);
  backdrop-filter: blur(3px);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ba__media:hover .ba__tag--before,
.ba__media.is-toggled .ba__tag--before { opacity: 0; }
.ba__tag--after {
  opacity: 0;
  background: var(--green-500);
  color: var(--navy-900);
}
.ba__media:hover .ba__tag--after,
.ba__media.is-toggled .ba__tag--after { opacity: 1; }
.ba__tag { transition: opacity 0.35s var(--ease); }

.ba__body { padding: 1.35rem 1.4rem 1.5rem; }
.ba__body h3 { color: var(--navy-800); }
.ba__body p { margin: 0.55rem 0 0; font-size: 0.93rem; color: var(--ink-3); }

.hint {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  font-size: 0.82rem;
  color: var(--ink-3);
}
.hint svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--cyan-600); }

/* --------------------------------------------------------------------------
   10. Areas de tratamiento (pagina Tratamientos)
   -------------------------------------------------------------------------- */
.area {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line-2);
}
.area:first-of-type { border-top: 0; }

.area__head {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
  margin-bottom: 2.5rem;
}
@media (min-width: 800px) {
  .area__head { grid-template-columns: 1fr 340px; }
  /* Al alternar el lado, hay que invertir tambien el ancho de las columnas:
     si no, la imagen se queda la columna ancha y el texto la estrecha. */
  .area__head--flip { grid-template-columns: 340px 1fr; }
  .area__head--flip > .area__figure { order: -1; }
}
.area__figure {
  overflow: hidden;
  border-radius: var(--r);
  box-shadow: var(--sh-2);
  aspect-ratio: 4 / 3;
}
.area__figure img { width: 100%; height: 100%; object-fit: cover; }
.area__head h2 { color: var(--navy-800); }
.area__head p { margin-top: 0.9rem; font-size: 1.055rem; color: var(--ink-3); }

/* Listado de catalogo: bloques de area/categoria con sus acordeones */
.catalog-area { margin-bottom: 2.75rem; }
.catalog-area:last-child { margin-bottom: 0; }
.catalog-area h3 {
  margin-bottom: 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--line);
  color: var(--navy-800);
}

/* Acordeon de familias de producto */
.fam {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  overflow: hidden;
}
.fam + .fam { margin-top: 0.85rem; }
.fam[open] { box-shadow: var(--sh-1); border-color: var(--cyan-300); }

.fam > summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.05rem 1.3rem;
  cursor: pointer;
  list-style: none;
  font-weight: 650;
  color: var(--navy-800);
  transition: background-color 0.18s var(--ease);
}
.fam > summary::-webkit-details-marker { display: none; }
.fam > summary:hover { background: var(--bg-soft); }
.fam__count {
  margin-left: auto;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: var(--cyan-100);
  color: var(--cyan-600);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.fam__chev {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  color: var(--cyan-600);
  transition: transform 0.25s var(--ease);
}
.fam[open] > summary .fam__chev { transform: rotate(180deg); }

.prods {
  list-style: none;
  padding: 0.25rem 1.3rem 1.3rem;
  border-top: 1px solid var(--line-2);
  margin-top: 0;
}
.prod {
  display: grid;
  gap: 0.15rem 1.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-2);
}
.prod:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 720px) {
  .prod { grid-template-columns: 15.5rem 1fr; align-items: baseline; }
}
.prod__code {
  font-family: var(--font-mono);
  font-size: 0.845rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy-800);
}
.prod__desc { font-size: 0.925rem; line-height: 1.55; color: var(--ink-3); }

/* Aviso de contenido pendiente */
.note {
  display: flex;
  gap: 0.8rem;
  padding: 1.1rem 1.25rem;
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: var(--r);
  font-size: 0.9rem;
  color: var(--ink-3);
}
.note svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; color: var(--cyan-600); }
.note a { font-weight: 600; }

/* Indice lateral de areas */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
}
/* Los chips son enlaces en el indice de areas, pero en la lista de
   referencias de obra son solo nombres, sin enlace: mismo aspecto, sin el
   hover ni el foco de algo pulsable. */
.chips a,
.chips li.chip--static {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--ink-2);
  text-decoration: none;
  transition: all 0.18s var(--ease);
}
.chips a:hover {
  border-color: var(--cyan-500);
  background: var(--cyan-100);
  color: var(--navy-800);
}

/* --------------------------------------------------------------------------
   11. Suelos: galeria con cambio de imagen
   -------------------------------------------------------------------------- */
.swap {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.swap:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: var(--cyan-300);
}
.swap__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-tint);
  cursor: pointer;
}
.swap__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swap__media .is-b { opacity: 0; transition: opacity 0.45s var(--ease); }
.swap__media:hover .is-b,
.swap__media:focus-visible .is-b,
.swap__media.is-toggled .is-b { opacity: 1; }

.swap__body {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 1.25rem;
  border-top: 1px solid var(--line-2);
}
.swap__body h3 { font-size: 1.02rem; color: var(--navy-800); }
.swap__dot {
  width: 0.55rem;
  height: 0.55rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--green-500);
}
.swap__link {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--cyan-600);
  text-decoration: none;
  white-space: nowrap;
}
.swap__link:hover { text-decoration: underline; }

/* Bloque de detalle de una categoria de suelo */
.floorcat { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line-2); }
.floorcat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1.75rem;
}
.floorcat__head h2 { color: var(--navy-800); }

/* --------------------------------------------------------------------------
   12. Lineas de catalogo
   -------------------------------------------------------------------------- */
.lines { list-style: none; display: grid; gap: 0.75rem; }
.line-item {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.05rem 1.35rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.line-item:hover { border-color: var(--cyan-300); transform: translateX(3px); }
.line-item__swatch {
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.line-item__name {
  min-width: 11rem;
  font-weight: 650;
  color: var(--navy-800);
}
.line-item__sector { color: var(--ink-3); font-size: 0.94rem; }

/* --------------------------------------------------------------------------
   13. Contacto
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}
@media (min-width: 860px) {
  .contact-grid { grid-template-columns: 1.05fr 1fr; align-items: start; }
}

.dept {
  padding: 1.4rem 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.dept:hover { border-color: var(--cyan-300); box-shadow: var(--sh-1); }
.dept + .dept { margin-top: 0.85rem; }
.dept__name {
  font-size: 0.735rem;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cyan-600);
}
.dept__email {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 1.045rem;
  font-weight: 600;
  color: var(--navy-800);
  text-decoration: none;
  word-break: break-word;
}
.dept__email:hover { color: var(--cyan-600); text-decoration: underline; }
.dept__note { margin-top: 0.3rem; font-size: 0.875rem; color: var(--ink-3); }

.infobox {
  padding: 1.6rem 1.65rem;
  background: var(--navy-800);
  border-radius: var(--r);
  color: rgba(255, 255, 255, 0.82);
}
.infobox h3 { color: #fff; margin-bottom: 1rem; }
.infobox a { color: var(--cyan-300); }
.infobox a:hover { color: #fff; }

.datalist { list-style: none; display: grid; gap: 1rem; }
.datalist dt,
.datalist__label {
  display: block; /* etiqueta y valor en lineas distintas */
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan-300);
}
.datalist__value {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.02rem;
  line-height: 1.45;
  color: #fff;
}
.datalist__value a { color: #fff; text-decoration: none; }
.datalist__value a:hover { color: var(--cyan-300); text-decoration: underline; }

.map-embed {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  aspect-ratio: 16 / 10;
  background: var(--bg-tint);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Tabla de datos societarios */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.legal-table th,
.legal-table td {
  padding: 0.85rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-2);
}
.legal-table th {
  width: 12rem;
  font-weight: 650;
  color: var(--navy-800);
}
.legal-table td { color: var(--ink-3); }
.legal-table tr:last-child th,
.legal-table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Listas
   -------------------------------------------------------------------------- */
.checks { list-style: none; display: grid; gap: 0.9rem; }
@media (min-width: 780px) { .checks { grid-template-columns: 1fr 1fr; gap: 0.9rem 2rem; } }
.checks li {
  display: flex;
  gap: 0.85rem;
  padding: 1.05rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 0.945rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.checks svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--cyan-500);
}

/* Lista sobria de enlaces de texto dentro de un bloque de prosa. El punto es
   el cian de acento; no lleva tarjeta ni fondo para no competir con el boton
   que suele venir detras. `ul` tiene padding 0 en el reset, asi que el marcador
   se dibuja con ::before para que no quede fuera de la caja. */
.link-list { list-style: none; display: grid; gap: 0.55rem; }
.link-list li { position: relative; padding-left: 1.15rem; line-height: 1.55; }
.link-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--cyan-500);
}

/* --------------------------------------------------------------------------
   15. Bloque partido texto + imagen
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip > .split__figure { order: -1; }
}
.split__figure {
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.split__figure img { width: 100%; height: auto; }
/* Variante compacta: foto ancha y baja en vez de alta, para intros donde
   se quiere ver el contenido de debajo sin apenas hacer scroll. */
.split__figure--short { height: 280px; }
.split__figure--short img { width: 100%; height: 100%; object-fit: cover; }
.split h2 { color: var(--navy-800); }

/* --------------------------------------------------------------------------
   16. Llamada final
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5rem);
  background: var(--navy-800);
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(0, 180, 207, 0.22), transparent 65%),
    radial-gradient(40% 80% at 88% 100%, rgba(168, 134, 44, 0.18), transparent 60%);
}
.cta h2 { color: #fff; }
.cta p { max-width: 52ch; margin: 1rem auto 0; }
.cta .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   17. Pie
   -------------------------------------------------------------------------- */
.site-footer {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.915rem;
}
.site-footer__grid {
  display: grid;
  gap: 2.25rem;
  padding-bottom: 2.75rem;
}
@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: 1.5fr 1fr 1.2fr; }
}
.site-footer h3 {
  margin-bottom: 1rem;
  font-size: 0.73rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan-300);
}
.site-footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; display: grid; gap: 0.6rem; }

.footer-brand img { width: 140px; margin-bottom: 1rem; }
.footer-brand p { max-width: 34ch; font-size: 0.9rem; }
.footer-brand__name {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55); /* 0.45 no llegaba a AA sobre navy-900 */
}
.site-footer__legal { max-width: 62ch; line-height: 1.5; }

/* --------------------------------------------------------------------------
   18. Utilidades y accesibilidad
   -------------------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.center { text-align: center; }

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .cta, .nav-toggle, .langs, .btn-row { display: none; }
  .hero { background: #fff; color: #000; }
  .hero::before, .hero::after { display: none; }
  .hero h1, .hero .lede { color: #000; }
  .fam > summary { display: none; }
  .prods { border: 0; }
  body { font-size: 11pt; }
}