/* =========================================================
   UBELA S.L. — Main Stylesheet
   Industrial precision. Dark iron base, corporate green +
   brass accents earned on interaction — not decoration.
   ========================================================= */

/* ─── Custom Properties ──────────────────────────────── */
:root {
  /* Brand colors — UBELA corporate green identity
     VERSIÓN CLARA: la escala de grises va invertida respecto a la oscura.
     Los nombres se conservan por su papel (abyss = fondo más marcado,
     white = texto de máximo contraste), no por su tono. */
  --clr-abyss:      #eceeea;   /* pie — un paso por debajo del papel */
  --clr-iron:       #ffffff;   /* fondo base */
  --clr-onyx:       #f4f5f2;   /* section--light */
  --clr-steel:      #e8eae5;
  --clr-graphite:   #d6d9d3;
  --clr-slate:      #6e757c;
  --clr-fog:        #4d545b;   /* texto secundario: contraste AA sobre blanco */
  --clr-mist:       #333a41;
  --clr-cloud:      #23282e;
  --clr-white:      #14161a;   /* titulares: casi negro */
  --clr-accent:     #1f6b2c;   /* verde algo más oscuro para leerse en blanco */
  --clr-accent-dim: #17521f;
  --clr-accent-light: #2d7d3a;
  --clr-gold:       #8a6d15;   /* latón oscurecido: el dorado claro no se ve */
  --clr-on-accent:  #ffffff;   /* texto sobre el verde corporativo */

  /* Typography */
  --font-display:   'Bebas Neue', sans-serif;
  --font-condensed: 'Barlow Condensed', sans-serif;
  --font-body:      'Barlow', sans-serif;

  /* Spacing */
  --sp-xs:  0.25rem;
  --sp-sm:  0.5rem;
  --sp-md:  1rem;
  --sp-lg:  2rem;
  --sp-xl:  4rem;
  --sp-2xl: 8rem;

  /* Layout */
  --max-w: 1280px;
  --nav-h: 72px;

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast:  160ms;
  --dur-mid:   320ms;
  --dur-slow:  600ms;

  /* Focus ring — brand accent, visible on the dark iron base */
  --focus-ring:   var(--clr-accent-light);
  --focus-offset: 3px;

  /* Semantic z-index scale */
  --z-base:    1;
  --z-nav:     100;
  --z-overlay: 99;
  --z-hamburger: 101;
  --z-tooltip: 50;
  --z-loader:  9000;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--clr-iron);
  color: var(--clr-cloud);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button, input, textarea, select {
  font: inherit;
  border: none;
  background: none;
}

button {
  cursor: pointer;
}

/* ─── Focus visibility ───────────────────────────────── */
/* Mouse clicks don't show a ring; keyboard navigation does. */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 1px;
}

/* On the green CTA band / marquee, the green ring would vanish —
   use a light ring there for contrast. */
.marquee-wrap :focus-visible,
[style*="background:var(--clr-accent)"] :focus-visible {
  outline-color: var(--clr-white);
}

/* ─── Custom Cursor (removed — using native cursor) ─── */
.cursor { display: none; }

/* ─── Page Loader ────────────────────────────────────── */
#page-loader {
  position: fixed;
  inset: 0;
  background: var(--clr-iron);
  z-index: var(--z-loader);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--sp-lg);
  /* Safety net: if JS never dismisses it (e.g. GSAP CDN fails before
     DOMContentLoaded binds), the loader fades itself out so the page
     can never be permanently trapped behind the overlay. */
  animation: loaderFailsafe 0.4s ease forwards 4s;
}

@keyframes loaderFailsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* When JS is in control it adds this class and the failsafe is irrelevant
   (JS sets inline opacity/display first). Reduced-motion users still get
   the failsafe, just instant. */
@media (prefers-reduced-motion: reduce) {
  #page-loader { animation-delay: 2s; animation-duration: 0.01ms; }
}

.loader__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.loader__logo-img {
  height: clamp(60px, 12vw, 100px);
  width: auto;
  display: block;
  /* Sobre fondo claro el modo 'lighten' hacia desaparecer el logo
     (nada es mas claro que el blanco): se usa 'darken'. */
  mix-blend-mode: darken;
}

.loader__bar-wrap {
  width: 200px;
  height: 2px;
  background: var(--clr-steel);
  overflow: hidden;
  position: relative;
}

.loader__bar {
  height: 100%;
  background: var(--clr-accent);
  width: 0%;
}

.loader__percent {
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--clr-slate);
  text-transform: uppercase;
}

/* ─── Navigation ─────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  /* El logo debe caer sobre la misma línea vertical que el contenido.
     .container y .hero__content son max-width:1280px CON el padding lateral
     incluido, así que la barra tiene que usar exactamente la misma caja. */
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-xl);
  transition: background var(--dur-mid) var(--ease-in-out),
              border-bottom var(--dur-mid);
}

/* El fondo/borde al hacer scroll debe cubrir todo el ancho de la ventana,
   aunque el contenido de la barra esté centrado con el container. */
.nav::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: -1;
  pointer-events: none;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-mid) var(--ease-in-out),
              border-bottom-color var(--dur-mid);
}

.nav::before {
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(20,22,26,0.06);
}

.nav--scrolled::before {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(20,22,26,0.06);
}

.nav__logo {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  /* Sin padding lateral: el borde izquierdo del logo tiene que caer justo
     sobre la misma vertical que el texto del contenido. */
  padding: 0.2rem 0;
}

.nav__logo-img {
  position: relative;
  z-index: 1;
  height: 44px;
  width: auto;
  display: block;
  transition: opacity var(--dur-mid);
}

.nav__logo:hover .nav__logo-img {
  opacity: 0.85;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
  margin-left: auto;
}

.nav__link {
  font-family: var(--font-condensed);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clr-mist);
  position: relative;
  padding: 0.25rem 0;
  transition: color var(--dur-fast);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--clr-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}

.nav__link:hover,
.nav__link.active {
  color: var(--clr-white);
}

.nav__link:hover::after,
.nav__link.active::after {
  transform: scaleX(1);
}

/* Language switcher */
.nav__lang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: var(--sp-lg);
  border-left: 1px solid rgba(20,22,26,0.12);
  padding-left: var(--sp-lg);
}

.nav__lang-btn {
  position: relative;
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-fog);
  padding: 0.3rem 0.5rem;
  border-radius: 2px;
  transition: color var(--dur-fast), background var(--dur-fast);
  cursor: pointer;
}

/* WCAG 2.5.5 — invisible 44×44 hit area centred on the chip, so the
   visual chip stays compact but the tap/click target is full size. */
.nav__lang-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}

.nav__lang-btn:hover,
.nav__lang-btn.active {
  color: var(--clr-white);
  background: rgba(45,125,58,0.22);
}

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  cursor: pointer;
  padding: 8px;
  z-index: var(--z-hamburger);
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--clr-white);
  transition: transform var(--dur-mid) var(--ease-out-expo),
              opacity var(--dur-mid);
}

.nav__hamburger.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav__hamburger.open span:nth-child(2) {
  opacity: 0;
}
.nav__hamburger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile nav overlay */
.nav__overlay {
  position: fixed;
  inset: 0;
  background: var(--clr-iron);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-mid);
}

.nav__overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.nav__overlay .nav__link {
  font-size: 2.5rem;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  color: var(--clr-cloud);
}

.nav__overlay .nav__lang {
  border: none;
  padding: 0;
  margin: 0;
  gap: 1rem;
}

/* ─── Container / Layout ─────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-xl);
}

/* Two-column split that collapses to a single column on tablet/mobile.
   Variants control desktop ratio. Mobile is always 1fr. */
.split-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
  align-items: center;
}
.split-2col--info-map {
  grid-template-columns: 1fr 1.4fr;
  align-items: start;
}

/* "Trabaja con nosotros": la primera línea del subtítulo tiene que arrancar
   a la misma altura que el borde superior del formulario. El interlineado
   del titular deja un pequeño hueco por encima de las mayúsculas, así que
   se sube el bloque de texto exactamente ese hueco. */
.split-2col--info-map > .reveal-left {
  margin-top: -0.055em;
}

/* Soldadura (Maquinaria): la foto arranca a la altura del titulo, no
   centrada respecto al bloque de texto (revision del cliente, V3). */
.split-2col--top {
  align-items: start;
}

/* El interlineado del titular deja un hueco sobre las mayusculas: se sube
   la imagen ese hueco para que el borde superior case con la primera
   linea del titulo. */
.split-2col--top > .team-image-wrap {
  margin-top: 0.11em;
}

@media (max-width: 1024px) {
  .split-2col--info-map > .reveal-left {
    margin-top: 0;
  }
}
@media (max-width: 900px) {
  .split-2col,
  .split-2col--info-map {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
  }
}

/* About — team stats inline cards */
.team-stats-grid {
  margin-top: var(--sp-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
}
@media (max-width: 480px) {
  .team-stats-grid { grid-template-columns: 1fr; }
}

.team-image-wrap {
  position: relative;
  overflow: hidden;
  height: 460px;
}
@media (max-width: 900px) {
  .team-image-wrap { height: 360px; }
}
@media (max-width: 480px) {
  .team-image-wrap { height: 260px; }
}
.team-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.25) contrast(1.1);
}

/* About — location map */
.map-container--about { height: 420px; }
@media (max-width: 900px) {
  .map-container--about { height: 360px; }
}
@media (max-width: 480px) {
  .map-container--about { height: 280px; }
}

.section {
  padding: var(--sp-2xl) 0;
  position: relative;
  overflow: hidden;
}

.section--dark {
  background: var(--clr-steel);
}

.section--darker {
  background: var(--clr-iron);
}

.section--tight-top {
  padding-top: var(--sp-xl);
}

.section--light {
  background: var(--clr-onyx);
}

/* ─── Typography ─────────────────────────────────────── */
.display-1 {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 10rem);
  line-height: 0.98;
  letter-spacing: 0.04em;
  color: var(--clr-white);
}

.display-2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 1.02;
  letter-spacing: 0.04em;
  color: var(--clr-white);
}

.heading-1 {
  font-family: var(--font-condensed);
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--clr-white);
}

.heading-2 {
  font-family: var(--font-condensed);
  font-size: clamp(1.4rem, 3vw, 2.5rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--clr-white);
}

.eyebrow {
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--clr-accent);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--clr-accent);
  flex-shrink: 0;
}

.body-lg {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--clr-fog);
}

.body-md {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--clr-fog);
}

/* ─── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-condensed);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: color var(--dur-mid);
  isolation: isolate;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out-expo);
  z-index: -1;
}

.btn:hover::before {
  transform: scaleX(1);
}

.btn--primary {
  background: var(--clr-accent);
  color: var(--clr-on-accent);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.btn--primary::before {
  background: var(--clr-accent-dim);
}

.btn--primary:hover {
  color: var(--clr-white);
}

.btn--outline {
  border: 1px solid rgba(20,22,26,0.2);
  color: var(--clr-cloud);
}

.btn--outline::before {
  background: rgba(20,22,26,0.06);
}

.btn__arrow {
  transition: transform var(--dur-mid) var(--ease-out-expo);
}

.btn:hover .btn__arrow {
  transform: translateX(6px);
}

/* ─── Cards ──────────────────────────────────────────── */
.card {
  background: rgba(20,22,26,0.03);
  border: 1px solid rgba(20,22,26,0.07);
  padding: var(--sp-xl);
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-mid), background var(--dur-mid),
              transform var(--dur-mid) var(--ease-out-expo);
}

.card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--clr-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}

.card:hover {
  border-color: rgba(45,125,58,0.32);
  background: rgba(20,22,26,0.05);
  transform: translateY(-4px);
}

.card:hover::before {
  transform: scaleX(1);
}

.card:has(.card__media) {
  padding: var(--sp-lg);
}

.card__media {
  position: relative;
  margin: calc(-1 * var(--sp-lg)) calc(-1 * var(--sp-lg)) var(--sp-md);
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--clr-iron);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) contrast(1.02) brightness(1.03);
  transform: scale(1.02);
  transition: transform var(--dur-slow) var(--ease-out-expo),
              filter var(--dur-mid);
}

.card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.30) 60%,
    rgba(255,255,255,0.85) 100%
  );
  pointer-events: none;
}

.card:hover .card__media img {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.04) brightness(1.06);
}

.card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-lg);
  color: var(--clr-accent);
}

.card__media + .card__icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--sp-sm);
}

.card:has(.card__media) .card__title {
  margin-bottom: var(--sp-sm);
}

.card:has(.card__media) .card__text {
  font-size: 0.85rem;
  line-height: 1.55;
}

.card__title {
  font-family: var(--font-condensed);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--clr-white);
  margin-bottom: var(--sp-md);
}

.card__text {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--clr-fog);
}

/* ─── Sectors — deliberate asymmetric composition ─────── */
/* Not three identical cards: one featured sector spans the row as a
   wide image+text split, the two supporting sectors share the row below. */
.sectors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
}

.card--sector {
  text-align: left;
}

/* The two supporting sectors keep the centred icon rhythm of the original
   card, but left-aligned to sit under the featured split. */
.card--sector .card__icon {
  margin-left: 0;
  margin-right: 0;
}

/* Featured sector: full-width horizontal split. Image and copy side by side. */
.card--sector-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--sp-xl);
  align-items: center;
  padding: var(--sp-lg);
}

.card--sector-featured .card__media {
  margin: 0;
  height: 100%;
  min-height: 280px;
  aspect-ratio: auto;
}

.card--sector-featured .card__media img {
  height: 100%;
}

.card--sector-featured .card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card--sector-featured .card__icon {
  margin-bottom: var(--sp-md);
}

.card--sector-featured .card__title {
  font-size: 1.6rem;
}

.card--sector-featured .card__text {
  font-size: 0.95rem;
}

/* Featured tag — brass kicker that earns the "principal" emphasis */
.card__tag {
  font-family: var(--font-condensed);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: var(--sp-md);
}

@media (max-width: 768px) {
  .sectors-grid {
    grid-template-columns: 1fr;
  }
  .card--sector-featured {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
    padding: var(--sp-lg);
  }
  .card--sector-featured .card__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
    margin: calc(-1 * var(--sp-lg)) calc(-1 * var(--sp-lg)) var(--sp-md);
  }
}

/* ─── Grid System ────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-lg);
}

/* ─── Section Titles ─────────────────────────────────── */
.section-header {
  margin-bottom: var(--sp-2xl);
}

/* Todos los títulos de sección al mismo nivel: mayúsculas, una sola línea,
   alineados a la izquierda y con el mismo cuerpo. El tamaño se reduce con
   el ancho disponible para que el rótulo no parta en dos líneas. */
.section-title {
  text-transform: uppercase;
  text-align: left;
  text-wrap: nowrap;
  font-size: clamp(1.6rem, 4.6vw, 4rem);
  max-width: 100%;
}

@media (max-width: 720px) {
  /* En móvil se reduce el cuerpo lo justo para que el rótulo más largo
     ("Sectores para los que trabajamos") siga cabiendo en una sola línea,
     manteniendo el resto del tratamiento (mayúsculas, izquierda, mismo cuerpo). */
  .section-title {
    font-size: clamp(1.15rem, 5.6vw, 2.6rem);
  }
}

.section-header--center {
  text-align: center;
}

.section-header--center .eyebrow {
  justify-content: center;
}

.section-header--center .eyebrow::before {
  display: none;
}

.section-header--center .eyebrow::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--clr-accent);
  flex-shrink: 0;
}

/* ─── Dividers / Decorative ──────────────────────────── */
.rule {
  border: none;
  border-top: 1px solid rgba(20,22,26,0.07);
  margin: var(--sp-xl) 0;
}

.tag {
  display: inline-block;
  font-family: var(--font-condensed);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  background: rgba(45,125,58,0.14);
  border: 1px solid rgba(45,125,58,0.32);
  color: var(--clr-accent);
}

/* ─── Stat Block ─────────────────────────────────────── */
.stat {
  text-align: center;
  padding: var(--sp-xl);
}

/* Stat card with image — used in equipment grid */
.stat--media {
  position: relative;
  padding: 0;
  overflow: hidden;
  text-align: left;
}

.stat--media .stat__media {
  position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: var(--clr-iron);
}

.stat--media .stat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) contrast(1.02) brightness(1.02);
  transform: scale(1.02);
  transition: transform var(--dur-slow) var(--ease-out-expo),
              filter var(--dur-mid);
}

.stat--media .stat__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.35) 60%,
    rgba(255,255,255,0.85) 100%);
  pointer-events: none;
}

.stat--media:hover .stat__media img {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.04) brightness(1.05);
}

.stat--media .stat__body {
  padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
}

.stat--media .stat__icon {
  color: var(--clr-accent);
  margin-bottom: var(--sp-sm);
  display: inline-flex;
}

.stat--media .stat__number {
  font-family: var(--font-condensed);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--clr-white);
}

.stat--media .stat__label {
  margin-top: 0.4rem;
}

.stat__number {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1;
  color: var(--clr-white);
  display: block;
}

.stat__label {
  font-family: var(--font-condensed);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-fog);
  margin-top: 0.5rem;
  display: block;
}

/* ─── Footer ─────────────────────────────────────────── */
.footer {
  background: var(--clr-abyss);
  border-top: 1px solid rgba(20,22,26,0.06);
  padding: var(--sp-2xl) 0 var(--sp-xl);
}

/* Tres columnas (navegación, legal y contacto) centradas en el pie.
   La de contacto es más ancha para que la dirección y el horario quepan
   en una sola línea cada uno. */
.footer__grid {
  display: grid;
  grid-template-columns: auto auto minmax(auto, max-content);
  justify-content: center;
  gap: var(--sp-2xl);
  margin-bottom: var(--sp-2xl);
}

/* La columna de contacto necesita ancho suficiente para no partir
   "Polígono Industrial Zalain, 9" ni el horario. */
.footer__grid > address {
  min-width: 20rem;
}

.footer__grid .footer__contact-text {
  text-wrap: nowrap;
}

.footer__heading {
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-fog);
  margin-bottom: var(--sp-lg);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__links a {
  font-size: 0.875rem;
  color: var(--clr-fog);
  transition: color var(--dur-fast);
}

.footer__links a:hover {
  color: var(--clr-cloud);
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.footer__contact-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--clr-accent);
  margin-top: 2px;
}

.footer__contact-text {
  font-size: 0.875rem;
  color: var(--clr-fog);
  line-height: 1.5;
}

.footer__bottom {
  padding-top: var(--sp-xl);
  border-top: 1px solid rgba(20,22,26,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-md);
}

.footer__copyright {
  font-size: 0.8rem;
  color: var(--clr-fog);
}

.footer__copyright a {
  color: var(--clr-fog);
  transition: color var(--dur-fast);
}

.footer__copyright a:hover {
  color: var(--clr-accent);
}

.footer__legal {
  display: flex;
  gap: var(--sp-lg);
}

.footer__legal a {
  font-size: 0.75rem;
  color: var(--clr-fog);
  letter-spacing: 0.05em;
  transition: color var(--dur-fast);
}

.footer__legal a:hover {
  color: var(--clr-white);
}

/* ─── Reveal animations (initial state set by JS only) ── */
/* No CSS initial state — GSAP sets opacity/transform on init */

/* ─── Hero ───────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  padding-bottom: var(--sp-xl);
  overflow: hidden;
}

.hero__video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero__video-wrap video,
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  /* Ligero contraste y una pizca menos de brillo: la imagen del taller es
     clara de por si y necesita cuerpo para no parecer descolorida. */
  filter: contrast(1.08) saturate(1.05) brightness(0.94);
  transform: scale(1.04);
  will-change: transform;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Sin velos blancos: la imagen se ve entera. La legibilidad la sostiene
     una sombra suave bajo la columna de texto, no el borrado del vídeo. */
  background:
    linear-gradient(
      105deg,
      rgba(16,18,22,0.55) 0%,
      rgba(16,18,22,0.34) 30%,
      rgba(16,18,22,0.12) 52%,
      transparent 70%
    ),
    linear-gradient(
      to bottom,
      rgba(16,18,22,0.28) 0%,
      transparent 30%
    );
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-xl);
}

.hero__eyebrow {
  margin-bottom: var(--sp-md);
}

.hero__title {
  margin-bottom: var(--sp-lg);
}

.hero__title .line {
  display: block;
  overflow: hidden;
  padding-top: 0.08em;
  margin-top: -0.08em;
  padding-bottom: 0.03em;
}

/* La línea que lleva el recuadro verde necesita aire lateral para que el
   fondo no quede cortado por el overflow:hidden de la animación. */
.hero__title .line:has(.keyword-highlight) {
  padding-left: 0.12em;
  margin-left: -0.12em;
  padding-right: 0.12em;
  margin-right: -0.12em;
}

.hero__subtitle {
  max-width: 560px;
  margin-bottom: var(--sp-xl);
  color: var(--clr-cloud);
  text-shadow: 0 1px 2px rgba(255,255,255,0.85), 0 0 16px rgba(255,255,255,0.7);
}

.hero__cta {
  display: flex;
  gap: var(--sp-md);
  flex-wrap: wrap;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, auto);
  /* Las dos columnas arrancan arriba: el marco del logo tiene que quedar a
     la altura del titular, no centrado y descolgado respecto al texto. */
  align-items: start;
  gap: clamp(2rem, 5vw, 5rem);
  width: 100%;
}

/* La esquina superior del marco del logo se alinea con el techo de la
   primera línea del titular ("SOLUCIONES" / "SOLUZIO"), que es lo que
   marcan las líneas rojas de la revisión del cliente.

   El eyebrow ocupa la primera fila de la rejilla (a todo lo ancho) y el
   texto y el marco del logo comparten la segunda: así ambos arrancan a la
   misma altura sea cual sea el cuerpo de letra o el idioma. */
.hero__inner {
  grid-template-rows: auto auto;
}

.hero__eyebrow {
  grid-column: 1 / -1;
  grid-row: 1;
}

.hero__text {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.hero__logo-wrap {
  grid-column: 2;
  grid-row: 2;
  /* La línea del titular reserva 0.08em de su propio cuerpo por encima
     para la animación de entrada: se descuenta ese mismo valor (medido
     sobre el cuerpo del titular, no sobre el de este bloque) para que la
     esquina verde case con el techo real de las mayúsculas. */
  margin-top: calc(-0.08 * var(--hero-title-fs));
}

.hero__logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 3.5vw, 3rem);
  gap: clamp(0.85rem, 1.5vw, 1.25rem);
}

/* Ficha técnica — esquinas en L estilo blueprint */
.hero__logo-wrap::before,
.hero__logo-wrap::after,
.hero__logo-wrap > .hero__logo-corner {
  --corner: 18px;
  --thick: 1px;
  position: absolute;
  width: var(--corner);
  height: var(--corner);
  pointer-events: none;
  content: '';
}

.hero__logo-wrap::before {
  top: 0;
  left: 0;
  border-top: var(--thick) solid var(--clr-accent);
  border-left: var(--thick) solid var(--clr-accent);
}

.hero__logo-wrap::after {
  top: 0;
  right: 0;
  border-top: var(--thick) solid var(--clr-accent);
  border-right: var(--thick) solid var(--clr-accent);
}

.hero__logo-corner--bl {
  bottom: 0;
  left: 0;
  border-bottom: var(--thick) solid var(--clr-accent);
  border-left: var(--thick) solid var(--clr-accent);
}

.hero__logo-corner--br {
  bottom: 0;
  right: 0;
  border-bottom: var(--thick) solid var(--clr-accent);
  border-right: var(--thick) solid var(--clr-accent);
}

.hero__logo-wrap img {
  display: block;
  position: relative;
  z-index: 1;
  height: auto;
}

.hero__logo-mark {
  width: clamp(160px, 20vw, 300px);
}

.hero__logo-text {
  width: clamp(150px, 19vw, 280px);
  margin-top: 0.5rem;
  /* El hero es la única zona con fondo oscuro: aquí el texto del logo
     va en blanco, como en la versión original. */
  filter: brightness(0) invert(1)
    drop-shadow(0 2px 8px rgba(10,12,15,0.5));
}

.hero__logo-meta {
  position: relative;
  z-index: 1;
  font-family: var(--font-condensed);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-mist);
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(255,255,255,0.9), 0 0 12px rgba(255,255,255,0.75);
}

.hero__logo-meta--long span,
.hero__logo-meta--short span {
  color: var(--clr-accent-light);
  opacity: 0.85;
  margin: 0 0.5em;
  font-weight: 500;
}

.hero__logo-meta--short { display: none; }

.hero__scroll-hint {
  position: absolute;
  bottom: var(--sp-xl);
  right: var(--sp-xl);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.hero__scroll-hint span {
  font-family: var(--font-condensed);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clr-slate);
  writing-mode: vertical-rl;
}

.hero__scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--clr-accent), transparent);
  animation: scrollLine 1.8s ease-in-out infinite;
}

@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ─── Services Grid ──────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(20,22,26,0.06);
}

.service-item {
  background: var(--clr-iron);
  padding: var(--sp-xl) var(--sp-xl);
  position: relative;
  overflow: hidden;
  transition: background var(--dur-mid);
}


.service-item:hover {
  background: rgba(45,125,58,0.07);
}


.service-item {
  text-align: center;
}

.service-item__icon {
  width: 40px;
  height: 40px;
  color: var(--clr-accent);
  margin-bottom: var(--sp-lg);
  margin-left: auto;
  margin-right: auto;
}

.service-item__media {
  position: relative;
  margin: calc(-1 * var(--sp-xl)) calc(-1 * var(--sp-xl)) var(--sp-md);
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--clr-iron);
}

.service-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) contrast(1.02) brightness(1.03);
  transform: scale(1.02);
  transition: transform var(--dur-slow) var(--ease-out-expo),
              filter var(--dur-mid);
}

.service-item__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.30) 60%,
    rgba(255,255,255,0.85) 100%
  );
  pointer-events: none;
}

.service-item:hover .service-item__media img {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.04) brightness(1.06);
}

.service-item__media + .service-item__icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--sp-sm);
}

.service-item__title {
  font-family: var(--font-condensed);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--clr-white);
  margin-bottom: 0;
}

.service-item__text {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--clr-fog);
}

/* ─── Stats row ──────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(20,22,26,0.06);
}

.stats-row .stat {
  background: var(--clr-steel);
}

/* ─── About section ──────────────────────────────────── */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
  align-items: center;
}

.about-image-wrap {
  position: relative;
}

.about-image-wrap img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  filter: saturate(0.3) contrast(1.1);
}

.about-image-wrap::before {
  content: '';
  position: absolute;
  top: -16px;
  left: -16px;
  right: 16px;
  bottom: 16px;
  border: 1px solid rgba(45,125,58,0.32);
  z-index: -1;
}

.about-year {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--clr-accent);
  padding: var(--sp-lg);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--clr-on-accent);
  line-height: 1.2;
}

/* ─── Contact section ────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
}

.contact-info-item {
  display: flex;
  gap: var(--sp-md);
  margin-bottom: var(--sp-xl);
}

.contact-info-icon {
  width: 20px;
  height: 20px;
  color: var(--clr-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-info-label {
  font-family: var(--font-condensed);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: 0.3rem;
}

.contact-info-value {
  font-size: 1rem;
  color: var(--clr-cloud);
}

/* Map embed */
.map-container {
  width: 100%;
  height: 360px;
  overflow: hidden;
  position: relative;
  background: var(--clr-steel);
  filter: saturate(0.35) contrast(1.02);
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Schedule table */
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  /* Sin margen propio: el hueco entre el rotulo "Horario" y la primera
     fila lo fija el bloque del rotulo, igual que en telefono, correo y
     direccion (revision del cliente, V3). */
  margin-top: 0;
}

/* Cabecera del horario (icono + rotulo). El bloque del horario apila
   cabecera + tabla, asi que el aire bajo el rotulo lo pone la cabecera:
   0.3rem, el mismo margin-bottom que .contact-info-label, para que el
   hueco titulo/texto sea igual que en telefono, correo y direccion
   (revision del cliente, V3). */
.contact-info-schedule-head {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-bottom: 0.3rem;
}

/* El horario tiene que arrancar en la misma vertical que el resto de
   valores del bloque de contacto (teléfono, correo y dirección), que van
   indentados por el ancho del icono + su separación. En movil tambien:
   el cliente lo pidio expresamente en la revision V3. */
.contact-info-item--schedule .schedule-table {
  margin-left: calc(20px + var(--sp-md));
  width: calc(100% - 20px - var(--sp-md));
}

.schedule-table tr {
  border-bottom: 1px solid rgba(20,22,26,0.06);
}

/* Misma tipografia que el resto de valores del bloque de contacto
   (direccion, telefono, correo): 1rem y peso normal (revision V3). */
.schedule-table td {
  /* La unica fila del horario no necesita relleno superior: asi el hueco
     bajo el rotulo es el mismo que en el resto de apartados. */
  padding: 0 0 0.6rem;
  font-size: 1rem;
  color: var(--clr-fog);
}

.schedule-table td:first-child {
  color: var(--clr-cloud);
  font-weight: 400;
}

.schedule-table td:last-child {
  text-align: right;
}

/* ─── Marquee ─────────────────────────────────────────── */
.marquee-wrap {
  overflow: hidden;
  padding: var(--sp-lg) 0;
  background: var(--clr-accent);
}

/* Dos grupos idénticos que se desplazan exactamente el ancho de uno
   (incluida la separación que lo sigue): al terminar la vuelta el segundo
   grupo queda justo donde estaba el primero, así que el bucle no salta.
   La duración la fija el JS a partir del ancho real para que la velocidad
   en píxeles por segundo sea la misma en castellano y en euskera. */
.marquee-track {
  display: flex;
  gap: var(--sp-xl);
  animation: marqueeScroll var(--marquee-duration, 20s) linear infinite;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
}

.marquee-group {
  display: flex;
  gap: var(--sp-xl);
  flex-shrink: 0;
}

.marquee-item {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
}

.marquee-item::after {
  content: '◆';
  color: var(--clr-on-accent);
  opacity: 0.5;
  font-size: 0.75rem;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); }
}

/* ─── Page hero (inner pages) ─────────────────────────── */
.page-hero {
  padding-top: calc(var(--nav-h) + var(--sp-2xl));
  padding-bottom: var(--sp-xl);
  background: var(--clr-iron);
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--clr-accent), transparent);
  z-index: 3;
}

/* ─── Page-hero with background video ────────────────── */
.page-hero--video {
  min-height: clamp(380px, 56vh, 620px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--sp-2xl);
}

.page-hero--video .container {
  position: relative;
  z-index: 2;
}

.page-hero__video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.page-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.55;
  filter: saturate(0.8) contrast(1.08) brightness(0.78);
  transform: scale(1.04);
  will-change: transform;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Single directional scrim — readability first. Footage keeps its
     own colour; the brand is carried by the green corner vignette only. */
  background:
    radial-gradient(120% 90% at 12% 90%, rgba(45,125,58,0.14) 0%, transparent 55%),
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.50) 0%,
      rgba(255,255,255,0.62) 60%,
      rgba(255,255,255,0.96) 100%
    );
}

@media (prefers-reduced-motion: reduce) {
  .page-hero__video {
    animation: none !important;
  }
}

.page-title-line {
  display: block;
  overflow: hidden;
  padding-top: 0.08em;
  margin-top: -0.08em;
  padding-bottom: 0.03em;
}

.page-title-line-inner {
  display: block;
  will-change: transform, opacity;
}

/* Texto corrido justificado en las páginas de contenido
   (¿Quiénes somos?, Maquinaria, Trabaja con nosotros y sus equivalentes
   en euskera). Se aplica sólo a los párrafos de texto, no a rótulos,
   etiquetas de formulario ni fichas. */
.text-justify main .body-lg,
.text-justify main .body-md {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* En movil el cliente tambien quiere el texto justificado (revision V3).
   Se mantiene hyphens:auto y se permite partir palabras largas para que la
   justificacion no abra huecos entre palabras en pantallas estrechas. */
@media (max-width: 640px) {
  .text-justify main .body-lg,
  .text-justify main .body-md {
    text-align: justify;
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* INICIO: el primer parrafo (el subtitulo del hero) tambien va justificado,
   igual que el texto corrido del resto de paginas (revision del cliente, V3). */
.hero__subtitle {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

@media (max-width: 640px) {
  .hero__subtitle {
    text-align: justify;
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* Títulos de página en una sola línea: el cuerpo se ajusta al ancho
   disponible en lugar de partir el rótulo en dos renglones. */
.page-title-1l {
  text-wrap: nowrap;
  font-size: clamp(1.9rem, 7.5vw, 6rem);
}

@media (max-width: 640px) {
  .page-title-1l {
    text-wrap: balance;
    font-size: clamp(2rem, 9vw, 3rem);
  }
}

/* ─── Breadcrumb ─────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--sp-lg);
}

.breadcrumb__item {
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-fog);
}

.breadcrumb__item a {
  color: var(--clr-fog);
  transition: color var(--dur-fast);
}

.breadcrumb__item a:hover {
  color: var(--clr-accent);
}

.breadcrumb__sep {
  color: var(--clr-slate);
  font-size: 0.6rem;
}

/* ─── Carousel ────────────────────────────────────────── */
.carousel {
  position: relative;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  transition: transform 0.6s var(--ease-out-expo);
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.carousel__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
  justify-content: center;
}

.carousel__btn {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(20,22,26,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}

.carousel__btn:hover {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
}

.carousel__dots {
  display: flex;
  gap: 0.5rem;
}

.carousel__dot {
  position: relative;
  width: 6px;
  height: 6px;
  background: var(--clr-slate);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
}

/* WCAG 2.5.5 — 44×44 invisible hit area around the 6px dot */
.carousel__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.carousel__dot.active {
  background: var(--clr-accent);
  transform: scale(1.4);
}

/* Carrusel de maquinaria (Maquinaria / Makineria): sustituye a las fotos
   sueltas de las fichas de mecanizado (revision del cliente, V3). */
.machine-carousel .carousel__slide img {
  display: block;
  width: 100%;
  height: clamp(260px, 42vw, 520px);
  object-fit: cover;
}

/* ─── Tooltip ─────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--clr-steel);
  color: var(--clr-cloud);
  font-family: var(--font-condensed);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  padding: 0.4rem 0.8rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  z-index: var(--z-tooltip);
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── 404 ────────────────────────────────────────────── */
.not-found {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-xl);
  position: relative;
  overflow: hidden;
}

.not-found__number {
  font-family: var(--font-display);
  font-size: clamp(10rem, 30vw, 20rem);
  line-height: 1;
  color: rgba(201,168,76,0.10);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.not-found__content {
  position: relative;
  z-index: 1;
}

/* ─── Mouse-parallax elements ─────────────────────────── */
[data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --nav-h: 64px;
  }

  .container {
    padding: 0 var(--sp-lg);
  }

  .footer__grid {
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: var(--sp-xl);
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-split {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
  }

  .about-image-wrap img {
    height: 360px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
  }
}

@media (max-width: 768px) {
  :root {
    --sp-2xl: 4rem;
    --sp-xl:  2.5rem;
  }

  .nav__menu {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  .nav {
    padding: 0 var(--sp-md);
  }

  .container {
    padding: 0 var(--sp-md);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-item {
    padding: var(--sp-lg);
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero */
  .hero {
    align-items: flex-end;
    padding-bottom: var(--sp-xl);
  }

  .hero__content {
    padding: 0 var(--sp-md);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(180px, auto);
    gap: clamp(1.5rem, 4vw, 3rem);
  }

  .hero__logo-wrap {
    padding: 1.25rem 1.5rem;
    gap: 0.75rem;
  }
  .hero__logo-wrap::before,
  .hero__logo-wrap::after,
  .hero__logo-wrap > .hero__logo-corner {
    --corner: 14px;
  }
  .hero__logo-wrap img {
    width: clamp(140px, 18vw, 220px);
  }
  .hero__logo-meta {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
  }

  .hero__subtitle {
    max-width: 100%;
    margin-bottom: var(--sp-lg);
  }

  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__scroll-hint {
    bottom: var(--sp-lg);
    right: var(--sp-md);
  }

  /* Hide decorative parallax elements on mobile */
  [data-parallax] {
    display: none;
  }

  /* About section */
  .about-split {
    gap: var(--sp-lg);
  }

  .about-image-wrap {
    overflow: visible;
  }

  .about-image-wrap img {
    height: 260px;
  }

  .about-image-wrap::before {
    display: none;
  }

  .about-year {
    position: static;
    display: inline-block;
    margin-top: var(--sp-md);
  }

  /* CTA band */
  .cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-band__btn {
    width: 100%;
  }

  .cta-band__btn .btn {
    width: 100%;
    justify-content: center;
  }

  /* Section headers */
  .section-header {
    margin-bottom: var(--sp-xl);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: var(--sp-xl);
  }

  .footer__grid > address {
    min-width: 0;
  }

  .footer__grid .footer__contact-text {
    text-wrap: wrap;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-md);
  }

  .footer__legal {
    gap: var(--sp-md);
    flex-wrap: wrap;
  }

  /* Nav overlay */
  .nav__overlay .nav__link {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  :root {
    --sp-xl: 2rem;
  }

  .stats-row {
    grid-template-columns: 1fr 1fr;
  }

  .stat {
    padding: var(--sp-lg) var(--sp-md);
  }

  .btn {
    width: 100%;
    justify-content: center;
    padding: 0.9rem 1.5rem;
  }

  .section {
    padding: var(--sp-xl) 0;
  }

  .card {
    padding: var(--sp-lg);
  }

  .hero__content {
    padding: 0 1rem;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 1.5rem;
    text-align: center;
  }

  /* Apilado en una columna: cada bloque en su propia fila y sin la
     alineación con el titular, que sólo tiene sentido en dos columnas. */
  .hero__eyebrow,
  .hero__text,
  .hero__logo-wrap {
    grid-column: 1;
  }

  .hero__eyebrow { grid-row: 1; }
  .hero__text    { grid-row: 2; }

  .hero__logo-wrap {
    grid-row: 3;
    margin-top: 0;
  }

  .hero__logo-wrap {
    order: -1;
    justify-content: center;
    padding: 1rem 1.1rem;
    gap: 0.6rem;
  }
  .hero__logo-wrap::before,
  .hero__logo-wrap::after,
  .hero__logo-wrap > .hero__logo-corner {
    --corner: 11px;
  }

  .hero__logo-wrap img {
    width: clamp(100px, 35vw, 160px);
  }

  .hero__logo-meta {
    font-size: 0.55rem;
    letter-spacing: 0.18em;
  }
  .hero__logo-meta--long { display: none; }
  .hero__logo-meta--short { display: inline; }

  .hero__cta {
    justify-content: center;
  }

  .hero__scroll-hint {
    display: none;
  }

  .footer__copyright {
    font-size: 0.72rem;
  }

  .nav__overlay .nav__link {
    font-size: 1.75rem;
  }
}

/* ─── Spec list — accent tick markers (no em-dash bullets) ── */
.spec-list {
  margin-top: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.spec-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9rem;
  color: var(--clr-fog);
  line-height: 1.5;
}

.spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--clr-accent);
  transform: rotate(45deg);
}

/* ─── Sector Slide (carousel inside sectores section) ── */
.sector-slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
  align-items: center;
  min-height: 360px;
}

.sector-slide__img {
  position: relative;
  overflow: hidden;
  height: 360px;
}

.sector-slide__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.3) contrast(1.1);
}

.sector-slide__tag {
  position: absolute;
  top: var(--sp-lg);
  left: var(--sp-lg);
}

@media (max-width: 768px) {
  .sector-slide {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
    min-height: unset;
  }

  .sector-slide__img {
    height: 240px;
  }
}

@media (max-width: 480px) {
  .sector-slide__img {
    height: 200px;
  }
}

/* ─── Video Showcase ─────────────────────────────────── */
.video-showcase {
  background: var(--clr-iron);
  padding: var(--sp-xl) 0 0;
}

.video-showcase__wrap {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--clr-steel);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}

.video-showcase__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-showcase__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.35) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.55) 100%),
    linear-gradient(to right,  rgba(255,255,255,0.2) 0%, transparent 40%);
  pointer-events: none;
}

.video-showcase__badge {
  position: absolute;
  bottom: var(--sp-lg);
  left: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.video-showcase__badge > span:first-child {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  letter-spacing: 0.12em;
  color: var(--clr-white);
  line-height: 1;
  text-shadow: 0 1px 8px rgba(255,255,255,0.8);
}

.video-showcase__badge-sub {
  font-family: var(--font-condensed);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clr-accent-light);
}

@media (max-width: 768px) {
  .video-showcase {
    padding: var(--sp-xl) 0;
  }

  .video-showcase__wrap {
    aspect-ratio: 4 / 3;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  }

  .video-showcase__badge {
    bottom: var(--sp-md);
    left: var(--sp-md);
  }
}

@media (max-width: 480px) {
  .video-showcase__wrap {
    aspect-ratio: 3 / 4;
    clip-path: none;
  }
}

/* ─── Process grid (servicios.html) ─────────────────── */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-xl) !important;
  }

  /* Hide horizontal connector line on mobile */
  .process-grid > [aria-hidden="true"]:first-child {
    display: none;
  }
}

@media (max-width: 480px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .marquee-track {
    animation: none;
  }

  .hero__scroll-line {
    animation: none;
  }
}

/* ─── Utility ─────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.text-accent { color: var(--clr-accent); }
.text-gold   { color: var(--clr-gold); }
.text-slate  { color: var(--clr-slate); }
.mt-sm  { margin-top: var(--sp-sm); }
.mt-md  { margin-top: var(--sp-md); }
.mt-lg  { margin-top: var(--sp-lg); }
.mt-xl  { margin-top: var(--sp-xl); }
.mb-lg  { margin-bottom: var(--sp-lg); }
.mb-xl  { margin-bottom: var(--sp-xl); }

/* ─── SVG motion — managed entirely by GSAP in main.js ── */
main svg,
footer svg {
  transform-box: fill-box;
  transform-origin: center;
}

/* ─── Warmth pass — bring the page to life ────────────── */

/* Slight warm cast on the global body to break the icy iron */
body {
  background:
    radial-gradient(circle at 80% -10%, rgba(201,168,76,0.04) 0%, transparent 55%),
    radial-gradient(circle at -10% 110%, rgba(45,125,58,0.05) 0%, transparent 50%),
    var(--clr-iron);
  background-attachment: fixed;
}

/* Hero text: punchier glow on the title, breathing eyebrow */
.hero__title .line {
  text-shadow: none;
}

/* Highlighter sweep — el recuadro verde lo pinta un ::before, no el
   background del propio span. Asi podemos descolgarlo un poco hacia abajo
   (--kw-drop) y compensar el descender que Bebas Neue reserva bajo la
   linea base: las mayusculas quedan centradas en el verde y el hueco de
   arriba y el de abajo son iguales (revision del cliente, V3). */
.keyword-highlight {
  /* Valores medidos sobre los pixeles del render, no sobre las metricas de
     la fuente: con estos el verde deja 10,5 px arriba y 11,0 px abajo. */
  --kw-top: -0.03em;
  --kw-bottom: 0.07em;
  position: relative;
  /* inline-block + padding simetrico: el recuadro verde deja el mismo aire
     a izquierda y derecha y no lo recorta la ultima letra (INDUSTRIALAK). */
  display: inline-block;
  padding: 0 0.12em;
  margin: 0 -0.12em;
  transition: color 0.4s ease-in-out;
  z-index: 0;
}

.keyword-highlight::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Bebas Neue reserva bajo la linea base un descender que las mayusculas
     no usan, asi que el recuadro sobraba por abajo: se sube el borde
     superior y se recorta el inferior hasta igualar los dos huecos. */
  top: var(--kw-top);
  bottom: var(--kw-bottom);
  background: var(--clr-accent);
  z-index: -1;
  /* Reposo: solo el subrayado de 4px pegado abajo. Al activarse el
     recuadro crece hacia arriba hasta cubrir toda la palabra. */
  clip-path: inset(calc(100% - 4px) 0 0 0);
  transition: clip-path 0.85s ease-in-out;
}

.keyword-highlight.active {
  color: var(--clr-on-accent);
}

.keyword-highlight.active::before {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.6s ease-in-out;
}


.hero__eyebrow {
  position: relative;
  display: inline-block;
  padding-left: 2.25rem;
  color: var(--clr-gold);
  letter-spacing: 0.32em;
}
.hero__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.75rem;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--clr-gold));
  animation: eyebrowPulse 2.6s ease-in-out infinite;
}
@keyframes eyebrowPulse {
  0%, 100% { opacity: 0.4; transform: scaleX(0.85); transform-origin: left; }
  50%      { opacity: 1;   transform: scaleX(1);    transform-origin: left; }
}

/* CTA buttons — give the primary a warm rim glow on hover */
.btn--primary {
  box-shadow:
    0 0 0 0 rgba(45,125,58,0.0),
    0 1px 0 rgba(20,22,26,0.06) inset;
  transition: box-shadow var(--dur-mid) var(--ease-out-expo),
              transform var(--dur-mid) var(--ease-out-expo),
              background var(--dur-mid);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px -10px rgba(45,125,58,0.55),
    0 0 0 1px rgba(201,168,76,0.35) inset,
    0 0 30px rgba(61,163,77,0.35);
}
.btn--outline {
  transition: border-color var(--dur-mid), color var(--dur-mid),
              background var(--dur-mid), transform var(--dur-mid) var(--ease-out-expo);
}
.btn--outline:hover {
  transform: translateY(-2px);
  border-color: var(--clr-gold);
  color: var(--clr-gold);
}

/* Service cards — lift on hover and warm accent line */
.service-item {
  transition:
    background var(--dur-mid),
    transform var(--dur-mid) var(--ease-out-expo),
    box-shadow var(--dur-mid);
}
.service-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 2px;
  background: linear-gradient(to right, var(--clr-accent), var(--clr-gold), var(--clr-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.service-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,0.6);
}
.service-item:hover::before {
  transform: scaleX(1);
}
.service-item:hover .service-item__icon {
  color: var(--clr-accent-light);
  filter: drop-shadow(0 0 12px rgba(61,163,77,0.55));
}
.service-item__icon {
  transition: color var(--dur-mid), filter var(--dur-mid), transform var(--dur-mid) var(--ease-out-expo);
}

/* Stats — warm accent number, breathing underline */
.stats-row .stat {
  position: relative;
  transition: background var(--dur-mid);
  overflow: hidden;
}
.stats-row .stat:hover {
  background: linear-gradient(180deg, var(--clr-steel) 0%, rgba(45,125,58,0.10) 100%);
}
/* Marquee — warmer separators between items */
.marquee-item {
  position: relative;
}
/* Un único separador, detrás de cada item por igual (arriba, en
   .marquee-item::after): así todos los items miden lo mismo y los dos
   grupos son idénticos, que es lo que permite que el bucle cierre sin
   salto. */

/* Subtle vertical breathing for the whole hero scene */
@media (prefers-reduced-motion: no-preference) {
  .hero__video {
    animation: heroDrift 18s ease-in-out infinite alternate;
  }
}
@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}

/* Reduced-motion: kill heavy hero motion */
@media (prefers-reduced-motion: reduce) {
  .hero__video,
  .hero__logo-wrap img,
  .hero__scroll-line,
  .hero__eyebrow::before {
    animation: none !important;
  }
  .hero__video { transform: scale(1.04); }
}

/* =========================================================
   Estructura 2026 — 6 secciones, ES + EU
   Navegación ampliada, formulario de candidaturas,
   fichas de maquinaria y pabellones.
   ========================================================= */

/* Título del hero con palabras largas (SOLUCIONES INDUSTRIALES /
   SOLUZIO INDUSTRIALAK): mismo carácter, cuerpo algo menor para
   que la palabra de 12 letras no desborde la columna.

   El tamaño se mide sobre el ancho del propio contenedor (cqw), no sobre
   el de la ventana (vw): al maximizar el navegador el contenido deja de
   crecer en cuanto el container llega a su ancho máximo (1280px), así que
   el título tiene que dejar de crecer en ese mismo punto. Con vw seguía
   creciendo y los espacios/simetrías se descuadraban. */
/* El contenedor de medida es la columna de texto del hero, no el bloque
   entero: así el titular nunca se sale de su propia columna. El cuerpo se
   guarda en una variable porque el marco del logo lo necesita para
   alinearse con el techo de las mayúsculas. */
.hero__text {
  container-type: inline-size;
  container-name: heroText;
}

.hero__inner {
  --hero-title-fs: clamp(3.4rem, 17.5cqw, 8.2rem);
}

.hero__title--fit {
  font-size: var(--hero-title-fs);
}

/* Sin soporte de container queries: se mantiene el comportamiento anterior. */
@supports not (container-type: inline-size) {
  .hero__title--fit {
    font-size: clamp(3.4rem, 8.2vw, 8.2rem);
  }
}

/* ─── Nav: seis entradas ─────────────────────────────── */
.nav__menu {
  gap: clamp(1.1rem, 2.2vw, 2.4rem);
}

.nav__lang {
  margin-left: var(--sp-md);
  padding-left: var(--sp-md);
  gap: 0.25rem;
}

/* El menú completo no cabe por debajo de ~1100px: hamburguesa antes */
@media (max-width: 1100px) {
  .nav__menu { display: none; }
  .nav__hamburger { display: flex; }
}

.nav__overlay ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.nav__overlay .nav__link {
  font-size: clamp(1.6rem, 4.5vh, 2.25rem);
}

/* ─── Formulario (Trabaja con nosotros) ──────────────── */
.form-card {
  background: rgba(20,22,26,0.03);
  border: 1px solid rgba(20,22,26,0.08);
  padding: var(--sp-xl);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-label {
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-cloud);
}

/* "CVa" es un caso declinado del euskera: la "a" final es el artículo y
   debe ir en minúscula aunque el rótulo vaya en mayúsculas. */
.form-label .lowercase,
.file-drop__label .lowercase {
  text-transform: lowercase;
}

.form-label abbr {
  color: var(--clr-accent-light);
  text-decoration: none;
  margin-left: 0.15rem;
}

.form-input,
.form-textarea {
  width: 100%;
  background: rgba(20,22,26,0.04);
  border: 1px solid rgba(20,22,26,0.14);
  color: var(--clr-white);
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  border-radius: 0;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--clr-slate);
}

.form-input:hover,
.form-textarea:hover {
  border-color: rgba(20,22,26,0.28);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--clr-accent-light);
  background: rgba(45,125,58,0.07);
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
}

.form-help {
  font-size: 0.78rem;
  color: var(--clr-slate);
  line-height: 1.5;
}

/* Radio en fichas: Empleo / Prácticas */
.choice-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
}

.choice {
  position: relative;
  cursor: pointer;
}

.choice input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(20,22,26,0.14);
  font-family: var(--font-condensed);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-fog);
  transition: border-color var(--dur-fast), background var(--dur-fast),
              color var(--dur-fast);
}

.choice:hover span {
  border-color: rgba(20,22,26,0.3);
  color: var(--clr-cloud);
}

.choice input:checked + span {
  border-color: var(--clr-accent);
  background: rgba(45,125,58,0.16);
  color: var(--clr-white);
}

.choice input:focus-visible + span {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Adjuntar CV */
.file-field input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.file-drop {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: 1rem;
  border: 1px dashed rgba(20,22,26,0.22);
  background: rgba(20,22,26,0.03);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

.file-drop:hover {
  border-color: var(--clr-accent-light);
  background: rgba(45,125,58,0.07);
}

.file-field input[type="file"]:focus-visible ~ .file-drop {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.file-drop__icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(45,125,58,0.4);
  color: var(--clr-accent-light);
}

.file-drop__label {
  font-family: var(--font-condensed);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-cloud);
  display: block;
}

.file-drop__name {
  font-size: 0.8rem;
  color: var(--clr-slate);
  display: block;
  margin-top: 0.15rem;
  word-break: break-all;
}

.file-drop.has-file {
  border-style: solid;
  border-color: rgba(45,125,58,0.55);
}

.file-drop.has-file .file-drop__name {
  color: var(--clr-accent-light);
}

/* Consentimiento */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--clr-fog);
  cursor: pointer;
}

.form-consent input {
  accent-color: var(--clr-accent);
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

.form-consent a {
  color: var(--clr-accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-consent a:hover {
  color: var(--clr-white);
}

/* Estado del envío */
.form-status {
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  display: none;
}

.form-status--error {
  display: block;
  color: #e08585;
  border-color: rgba(208,82,82,0.45);
  background: rgba(208,82,82,0.08);
}

.form-submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

@media (max-width: 640px) {
  .form-card { padding: var(--sp-lg); }
  .form-grid { grid-template-columns: 1fr; }
  .choice-group { grid-template-columns: 1fr; }
}

/* ─── Fichas de maquinaria ───────────────────────────── */
.machine-count {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: var(--sp-sm);
}

.machine-count__num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--clr-accent-light);
}

.machine-count__label {
  font-family: var(--font-condensed);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-slate);
}

.machine-dims {
  margin-top: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.machine-dims li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-md);
}

.machine-dims .dim-label {
  font-family: var(--font-condensed);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-slate);
  white-space: nowrap;
}

.machine-dims .dim-value {
  font-family: var(--font-condensed);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--clr-white);
  white-space: nowrap;
}

.material-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* En movil las etiquetas de material se apilan una debajo de otra.
   En euskera "ALTZAIRU HERDOILGAITZA" no cabe junto a las otras dos y
   quedaba un corte feo de 2 + 1 (revision del cliente, V3). */
@media (max-width: 640px) {
  .material-chips {
    flex-direction: column;
    align-items: flex-start;
  }

  .material-chips .tag {
    width: 100%;
    text-align: center;
  }
}

/* ─── Pabellones (instalaciones) ─────────────────────── */
.pavilions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
}

.pavilion {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(20,22,26,0.08);
  background: var(--clr-steel);
  padding: var(--sp-xl) var(--sp-lg);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: border-color var(--dur-mid), background var(--dur-mid);
}

.pavilion:hover {
  border-color: rgba(45,125,58,0.4);
  background: rgba(45,125,58,0.06);
}

/* Foto real del pabellon de fondo (imagenes 1 y 2 del cliente). Va detras
   de un velo claro para que el numero, el icono y el rotulo se sigan
   leyendo; al pasar el raton el velo se abre un poco y la foto se ve
   mejor. */
.pavilion__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.pavilion__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.pavilion__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Velo mas denso abajo, donde va el rotulo, y casi transparente arriba,
     para que la nave se vea de verdad. */
  background: linear-gradient(
    to top,
    rgba(255,255,255,0.92) 0%,
    rgba(255,255,255,0.72) 38%,
    rgba(255,255,255,0.34) 100%
  );
  transition: opacity var(--dur-mid);
}

.pavilion:hover .pavilion__photo img {
  transform: scale(1.07);
}

.pavilion:hover .pavilion__photo::after {
  opacity: 0.72;
}

/* El contenido de la ficha va por delante de la foto. El numero conserva
   su position:absolute, solo sube de capa. */
.pavilion__num {
  z-index: 1;
}

.pavilion__icon,
.pavilion__title {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pavilion__photo img { transition: none; }
  .pavilion:hover .pavilion__photo img { transform: scale(1.03); }
}

.pavilion__num {
  position: absolute;
  top: -0.18em;
  right: 0.05em;
  font-family: var(--font-display);
  font-size: clamp(5rem, 9vw, 8rem);
  line-height: 1;
  color: rgba(20,22,26,0.05);
  pointer-events: none;
  user-select: none;
  transition: color var(--dur-mid);
}

.pavilion:hover .pavilion__num {
  color: rgba(201,168,76,0.12);
}

.pavilion__icon {
  width: 40px;
  height: 40px;
  color: var(--clr-accent);
  margin-bottom: var(--sp-md);
}

.pavilion__title {
  font-family: var(--font-condensed);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-white);
}

.pavilion__text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--clr-fog);
  margin-top: 0.5rem;
}

@media (max-width: 640px) {
  .pavilions { grid-template-columns: 1fr; }
  .pavilion { min-height: 170px; }
}

/* ─── Página Proyectos (en preparación) ──────────────── */
.projects-soon {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-2xl) 0;
  position: relative;
}

.projects-soon__mark {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--sp-lg);
  border: 1px solid rgba(45,125,58,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-accent);
}

/* ═════════════════════════════════════════════════════════
   Consentimiento de cookies
   El banner no bloquea la lectura de la página, pero nada que
   no sea necesario se carga hasta que la persona decide.
   ═════════════════════════════════════════════════════════ */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200; /* por encima de la barra de navegación */
  background: var(--clr-abyss);
  border-top: 1px solid rgba(20,22,26,0.12);
  box-shadow: 0 -18px 40px -20px rgba(0,0,0,0.75);
  padding: var(--sp-lg) var(--sp-xl);
  max-height: 85vh;
  overflow-y: auto;
}

/* [hidden] tiene que ganar al display:flex al alternar banner y panel. */
.cookie-banner [hidden] { display: none !important; }

.cookie-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
  max-width: var(--max-w);
  margin: 0 auto;
}

.cookie-banner__main { flex: 1; min-width: 0; }

.cookie-banner__title {
  font-family: var(--font-condensed);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin: 0 0 0.35rem;
}

.cookie-banner__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--clr-fog);
  margin: 0;
  max-width: 68ch;
}

.cookie-banner__text a {
  color: var(--clr-cloud);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__text a:hover { color: var(--clr-accent-light); }

/* Aceptar y rechazar tienen el mismo peso visual y el mismo número
   de clics: la ley exige que rechazar sea tan fácil como aceptar. */
.cookie-banner__actions {
  display: flex;
  gap: var(--sp-sm);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cookie-banner__actions .btn {
  padding: 0.7rem 1.25rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

.btn--ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--clr-fog);
}

.btn--ghost:hover {
  color: var(--clr-white);
  border-color: rgba(20,22,26,0.18);
}

/* ─── Panel de configuración ─────────────────────────── */
.cookie-panel {
  max-width: var(--max-w);
  margin: 0 auto;
}

.cookie-group {
  border-top: 1px solid rgba(20,22,26,0.08);
  padding: var(--sp-md) 0;
}

.cookie-group:first-child { border-top: none; }

.cookie-group__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.cookie-group__head input[disabled] { cursor: default; }

.cookie-group__name {
  font-family: var(--font-condensed);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-white);
}

.cookie-group__fixed {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-slate);
}

.cookie-group__text {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--clr-fog);
  margin: 0.35rem 0 0 1.7rem;
  max-width: 68ch;
}

.cookie-panel .cookie-banner__actions {
  justify-content: flex-end;
  padding-top: var(--sp-md);
  border-top: 1px solid rgba(20,22,26,0.08);
}

@media (max-width: 860px) {
  .cookie-banner { padding: var(--sp-md) var(--sp-lg); }

  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-md);
  }

  .cookie-banner__actions .btn { flex: 1; justify-content: center; }
}

/* ─── Mapa sin cargar (hasta que se acepten terceros) ── */
/* El contenedor del mapa lleva un filtro invertido para el estilo oscuro:
   se neutraliza en el aviso para que el texto se lea con sus propios colores. */
.map-container:has(.map-placeholder) { filter: none; }

.map-placeholder {
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  padding: var(--sp-xl);
  text-align: center;
  background: var(--clr-steel);
}

.map-placeholder__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--clr-fog);
  margin: 0;
  max-width: 40ch;
}

/* ─── Hero sobre imagen: isla oscura dentro de la web clara ──────
   El vídeo aporta el fondo, así que aquí el texto va en claro y con
   sombra propia, no con velos que borren la imagen. */
.hero__title,
.hero__title .line {
  color: #ffffff;
  /* Sin sombreado: el cliente lo pidio limpio en la revision V3. */
  text-shadow: none;
}

.hero__subtitle {
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 10px rgba(10,12,15,0.6), 0 1px 2px rgba(10,12,15,0.45);
}

.hero__eyebrow {
  color: var(--clr-gold-light, #e0bd5c);
  text-shadow: 0 1px 8px rgba(10,12,15,0.6);
}

.hero__eyebrow::before {
  background: var(--clr-gold-light, #e0bd5c);
}

/* El botón secundario sobre imagen necesita borde y texto claros */
.hero__cta .btn--outline {
  color: #ffffff;
  border-color: rgba(255,255,255,0.55);
}

.hero__cta .btn--outline:hover {
  border-color: #ffffff;
  background: rgba(255,255,255,0.12);
}

/* Rótulo y marco del logo del hero, sobre la imagen */
.hero__logo-meta {
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 6px rgba(10,12,15,0.5);
}