@charset "UTF-8";
/* ==================================================================
   compresoresgalicia.com — Sistema de diseño
   IBÉRICA DE COMPRESORES
   ------------------------------------------------------------------
   Paleta extraída del logotipo corporativo:
     · Gris pizarra azulado del lettering  → #3E4A54
     · Amarillo del "DE" y de los puntos   → #FFD200
   Motivo gráfico: la retícula de puntos del isotipo (aire a presión)
   y la escala de un manómetro como divisor de secciones.
   ================================================================== */

/* ------------------------------------------------------------------
   Tipografías autoalojadas (sin conexiones externas).
   Coloque los .woff2 en /assets/fonts/. Si no están, el navegador usa
   la pila del sistema y el diseño sigue siendo correcto.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "IC Display";
  src: url("/assets/fonts/barlow-semicondensed-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IC Display";
  src: url("/assets/fonts/barlow-semicondensed-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IC Text";
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IC Text";
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ==================================================================
   1. Tokens
   ================================================================== */
:root {
  /* --- Color corporativo --- */
  /* Referencia cromatica del logotipo. Token de documentacion: el sistema
     usa --ic-slate-600, que tiene el mismo valor. No lo elimine: sirve
     para localizar el origen de la paleta. */
  --ic-slate:        #3e4a54;
  --ic-slate-900:    #161c21;  /* tinta principal */
  --ic-slate-800:    #232c33;  /* cabecera y pie */
  --ic-slate-700:    #2e3841;
  --ic-slate-600:    #3e4a54;
  --ic-slate-500:    #5b6874;
  --ic-slate-400:    #7d8a95;
  --ic-slate-300:    #a8b3bc;
  --ic-slate-200:    #cfd6dc;
  --ic-slate-100:    #e3e8ec;
  --ic-slate-50:     #f2f5f7;

  /* --- Acento: amarillo corporativo --- */
  --ic-amber:        #ffd200;
  --ic-amber-600:    #e8bd00;
  --ic-amber-700:    #c9a400;
  --ic-amber-050:    #fff8d9;

  /* --- Señalización funcional --- */
  --ic-alert:        #b3261e;  /* avería urgente */
  --ic-alert-050:    #fdeceb;
  --ic-ok:           #1a6f47;
  --ic-ok-050:       #e8f4ee;

  /* --- Superficies --- */
  --ic-bg:           #ffffff;
  --ic-bg-alt:       var(--ic-slate-50);
  --ic-bg-dark:      var(--ic-slate-800);
  --ic-border:       var(--ic-slate-100);
  --ic-border-strong:var(--ic-slate-200);

  /* --- Tipografía --- */
  --ic-font-display: "IC Display", "Barlow Semi Condensed", "Roboto Condensed",
                     system-ui, -apple-system, "Segoe UI", sans-serif;
  --ic-font-text:    "IC Text", Inter, system-ui, -apple-system, "Segoe UI",
                     Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala tipográfica fluida (base 17px → 18px) */
  --ic-fs-xs:   0.8125rem;
  --ic-fs-sm:   0.9375rem;
  --ic-fs-base: clamp(1.0625rem, 0.4vw + 0.98rem, 1.125rem);
  --ic-fs-lg:   clamp(1.1875rem, 0.5vw + 1.09rem, 1.3125rem);
  --ic-fs-h4:   clamp(1.1875rem, 0.6vw + 1.06rem, 1.375rem);
  --ic-fs-h3:   clamp(1.375rem, 1vw + 1.15rem, 1.75rem);
  --ic-fs-h2:   clamp(1.625rem, 1.6vw + 1.25rem, 2.25rem);
  --ic-fs-h1:   clamp(2rem, 3.2vw + 1.3rem, 3.25rem);

  --ic-lh-tight: 1.12;
  --ic-lh-head:  1.2;
  --ic-lh-body:  1.62;

  /* --- Espaciado (escala 4) --- */
  --ic-s1: 0.25rem; --ic-s2: 0.5rem;  --ic-s3: 0.75rem; --ic-s4: 1rem;
  --ic-s5: 1.5rem;  --ic-s6: 2rem;    --ic-s7: 2.75rem; --ic-s8: 3.5rem;
  --ic-s9: 5rem;    --ic-s10: 7rem;

  /* --- Medidas --- */
  --ic-wrap:      1200px;
  --ic-wrap-wide: 1400px;
  --ic-measure:   68ch;
  --ic-radius:    3px;      /* esquinas mínimas: registro industrial */
  --ic-radius-lg: 5px;
  --ic-header-h:  64px;

  /* --- Elevación: mínima, la jerarquía la marcan los bordes --- */
  --ic-shadow-2: 0 6px 24px -12px rgba(22,28,33,.35);

  --ic-focus: 3px solid var(--ic-amber);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ic-header-h) + var(--ic-s5));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ic-bg);
  color: var(--ic-slate-900);
  font-family: var(--ic-font-text);
  font-size: var(--ic-fs-base);
  line-height: var(--ic-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--ic-font-display);
  font-weight: 700;
  line-height: var(--ic-lh-head);
  color: var(--ic-slate-900);
  margin: 0 0 var(--ic-s4);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--ic-fs-h1); line-height: var(--ic-lh-tight); letter-spacing: -0.02em; }
h2 { font-size: var(--ic-fs-h2); margin-top: var(--ic-s7); }
h3 { font-size: var(--ic-fs-h3); margin-top: var(--ic-s6); }
h4 { font-size: var(--ic-fs-h4); font-weight: 600; margin-top: var(--ic-s5); }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--ic-s4); }
p, li { max-width: var(--ic-measure); }
li { margin-bottom: var(--ic-s2); }

a {
  color: var(--ic-slate-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--ic-slate-900); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ic-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--ic-border);
  margin: var(--ic-s7) 0;
}

strong, b { font-weight: 600; color: var(--ic-slate-900); }

abbr[title] { text-decoration: underline dotted; cursor: help; }

code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .9em;
  background: var(--ic-slate-50);
  padding: .1em .35em;
  border-radius: 2px;
}

/* Utilidad de accesibilidad */
.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;
}

.skip-link {
  position: absolute; left: var(--ic-s4); top: -100%;
  z-index: 999;
  background: var(--ic-amber); color: var(--ic-slate-900);
  padding: var(--ic-s3) var(--ic-s5);
  font-weight: 600; border-radius: 0 0 var(--ic-radius) var(--ic-radius);
}
.skip-link:focus { top: 0; }

/* ==================================================================
   3. Estructura
   ================================================================== */
.wrap {
  width: 100%;
  max-width: var(--ic-wrap);
  margin-inline: auto;
  padding-inline: var(--ic-s5);
}
.wrap--wide { max-width: var(--ic-wrap-wide); }
.wrap--narrow { max-width: 780px; }

.section { padding-block: var(--ic-s8); }
.section--tight { padding-block: var(--ic-s7); }
.section--loose { padding-block: var(--ic-s9); }
.section--alt { background: var(--ic-bg-alt); }
.section--dark {
  background: var(--ic-bg-dark);
  color: var(--ic-slate-100);
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark a { color: var(--ic-amber); }

/* Encabezado de sección con la "banda de presión" del sistema */
.section-head { margin-bottom: var(--ic-s6); max-width: 760px; }
.section-head > h2 { margin-top: 0; }
.section-head > p {
  font-size: var(--ic-fs-lg);
  color: var(--ic-slate-500);
  margin-bottom: 0;
}
.section--dark .section-head > p { color: var(--ic-slate-300); }

/* Divisor tipo escala de manómetro: 1 marca amarilla + marcas grises */
.gauge {
  display: flex; align-items: flex-end; gap: 5px;
  height: 14px; margin-bottom: var(--ic-s4);
}
.gauge::before {
  content: ""; width: 3px; height: 14px;
  background: var(--ic-amber); flex: 0 0 auto;
}
.gauge::after {
  content: "";
  flex: 0 0 96px; height: 7px;
  background:
    repeating-linear-gradient(to right,
      var(--ic-slate-200) 0 1px, transparent 1px 9px);
}
.section--dark .gauge::after {
  background: repeating-linear-gradient(to right,
      var(--ic-slate-500) 0 1px, transparent 1px 9px);
}

/* Rejillas */
.grid { display: grid; gap: var(--ic-s5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.stack > * + * { margin-top: var(--ic-s4); }
.flow > * + * { margin-top: var(--ic-s5); }

/* ==================================================================
   4. Barra superior + cabecera
   ================================================================== */
.topbar {
  background: var(--ic-slate-900);
  color: var(--ic-slate-200);
  font-size: var(--ic-fs-xs);
}
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--ic-s2) var(--ic-s5);
  min-height: 34px;
}
.topbar a { color: var(--ic-slate-100); text-decoration: none; }
.topbar a:hover { color: var(--ic-amber); text-decoration: underline; }
.topbar__item { display: inline-flex; align-items: center; gap: var(--ic-s2); }
.topbar__item svg { width: 14px; height: 14px; flex: 0 0 auto; }
.topbar__spacer { margin-inline-start: auto; }
.topbar__coverage { color: var(--ic-slate-400); }
@media (max-width: 640px) {
  .topbar__coverage { display: none; }
}

.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(150%) blur(6px);
  border-bottom: 1px solid var(--ic-border);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--ic-s5);
  min-height: var(--ic-header-h);
}
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img, .brand svg { height: 35px; width: auto; }
.brand__fallback {
  font-family: var(--ic-font-display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -.01em; line-height: 1.05;
  color: var(--ic-slate-700); text-decoration: none;
}
.brand__fallback em { font-style: normal; color: var(--ic-amber-700); }

/* Navegación principal */
.nav { margin-inline-start: auto; }
.nav__list {
  display: flex; align-items: center; gap: var(--ic-s1);
  list-style: none; margin: 0; padding: 0;
}
.nav__list > li { margin: 0; max-width: none; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--ic-s3) var(--ic-s3);
  font-size: var(--ic-fs-sm); font-weight: 600;
  color: var(--ic-slate-700); text-decoration: none;
  border-bottom: 2px solid transparent;
  background: none; border-inline: 0; border-top: 0;
  font-family: inherit; cursor: pointer;
}
.nav__link:hover { color: var(--ic-slate-900); border-bottom-color: var(--ic-slate-200); }
.nav__link[aria-current="page"],
.nav__link.is-section { border-bottom-color: var(--ic-amber); color: var(--ic-slate-900); }
.nav__link svg { width: 11px; height: 11px; transition: transform .15s ease; }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Megamenú */
.megamenu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff;
  border-bottom: 1px solid var(--ic-border);
  border-top: 1px solid var(--ic-border);
  box-shadow: var(--ic-shadow-2);
  padding: var(--ic-s6) 0 var(--ic-s7);
  display: none;
}
.megamenu[data-open="true"] { display: block; }
.megamenu__grid {
  display: grid; gap: var(--ic-s5) var(--ic-s6);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.megamenu__col > h3 {
  font-size: var(--ic-fs-sm); margin: 0 0 var(--ic-s3);
  padding-bottom: var(--ic-s2);
  border-bottom: 1px solid var(--ic-border);
  color: var(--ic-slate-500); font-weight: 600;
}
.megamenu__col ul { list-style: none; margin: 0; padding: 0; }
.megamenu__col li { margin: 0; max-width: none; }
.megamenu__col a {
  display: block; padding: 6px 0;
  font-size: var(--ic-fs-sm); color: var(--ic-slate-700);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.megamenu__col a:hover { color: var(--ic-slate-900); border-bottom-color: var(--ic-amber); }
.megamenu__foot {
  margin-top: var(--ic-s6); padding-top: var(--ic-s4);
  border-top: 1px solid var(--ic-border);
  display: flex; flex-wrap: wrap; gap: var(--ic-s4);
  align-items: center; justify-content: space-between;
  font-size: var(--ic-fs-sm); color: var(--ic-slate-500);
}

/* Acciones de cabecera */
.header-actions { display: flex; align-items: center; gap: var(--ic-s2); flex: 0 0 auto; }

.nav-toggle {
  display: none; align-items: center; gap: var(--ic-s2);
  background: none; border: 1px solid var(--ic-border-strong);
  border-radius: var(--ic-radius);
  padding: 9px 12px; font: inherit; font-size: var(--ic-fs-sm); font-weight: 600;
  color: var(--ic-slate-700); cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }

@media (max-width: 1080px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn--ghost { display: none; }
}

/* Panel de navegación móvil */
.mobile-nav {
  position: fixed; inset: var(--ic-header-h) 0 0 auto;
  width: min(420px, 100%);
  background: #fff; border-left: 1px solid var(--ic-border);
  z-index: 90; overflow-y: auto;
  padding: var(--ic-s5) var(--ic-s5) var(--ic-s9);
  transform: translateX(100%);
  transition: transform .22s ease;
}
.mobile-nav[data-open="true"] { transform: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { margin: 0; max-width: none; }
.mobile-nav__group + .mobile-nav__group { margin-top: var(--ic-s3); }
.mobile-nav__group > summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--ic-s3) 0; cursor: pointer;
  font-family: var(--ic-font-display); font-weight: 700; font-size: 1.1rem;
  border-bottom: 1px solid var(--ic-border); list-style: none;
}
.mobile-nav__group > summary::-webkit-details-marker { display: none; }
.mobile-nav__group > summary::after {
  content: "+"; font-weight: 400; font-size: 1.4rem; color: var(--ic-slate-400);
}
.mobile-nav__group[open] > summary::after { content: "−"; }
.mobile-nav__group a, .mobile-nav > ul > li > a {
  display: block; padding: 10px 0; text-decoration: none;
  color: var(--ic-slate-700); border-bottom: 1px solid var(--ic-slate-50);
  font-size: var(--ic-fs-sm);
}
.mobile-nav > ul > li > a {
  font-family: var(--ic-font-display); font-weight: 700; font-size: 1.1rem;
  border-bottom: 1px solid var(--ic-border); padding: var(--ic-s3) 0;
}
.mobile-nav__cta { margin-top: var(--ic-s5); display: grid; gap: var(--ic-s3); }

.scrim {
  position: fixed; inset: 0; background: rgba(22,28,33,.45);
  z-index: 85; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

/* ==================================================================
   5. Botones
   ================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ic-s2);
  padding: 13px 22px;
  font-family: var(--ic-font-text);
  font-size: var(--ic-fs-sm); font-weight: 600; line-height: 1.2;
  border: 1px solid transparent; border-radius: var(--ic-radius);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  min-height: 46px;
}
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.btn--primary {
  background: var(--ic-amber); color: var(--ic-slate-900);
  border-color: var(--ic-amber-600);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
.btn--primary:hover { background: var(--ic-amber-600); color: var(--ic-slate-900); }

.btn--dark {
  background: var(--ic-slate-800); color: #fff; border-color: var(--ic-slate-800);
}
.btn--dark:hover { background: var(--ic-slate-900); color: #fff; }

.btn--outline {
  background: transparent; color: var(--ic-slate-800);
  border-color: var(--ic-slate-300);
}
.btn--outline:hover { border-color: var(--ic-slate-700); color: var(--ic-slate-900); }

.section--dark .btn--outline { color: #fff; border-color: var(--ic-slate-500); }
.section--dark .btn--outline:hover { border-color: var(--ic-amber); color: var(--ic-amber); }

.btn--ghost {
  background: transparent; color: var(--ic-slate-700);
  border-color: var(--ic-border-strong);
}
.btn--ghost:hover { border-color: var(--ic-slate-400); }

.btn--alert { background: var(--ic-alert); color: #fff; border-color: var(--ic-alert); }
.btn--alert:hover { background: #96201a; color: #fff; }

.btn--wide { width: 100%; }
.btn--sm { padding: 9px 15px; min-height: 38px; font-size: var(--ic-fs-xs); }
.btn--lg { padding: 16px 28px; min-height: 54px; font-size: var(--ic-fs-base); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--ic-s3); }

/* Botón de teléfono siempre visible en cabecera */
.btn-phone { white-space: nowrap; }
.btn-phone .btn-phone__label { display: inline; }
@media (max-width: 520px) {
  .btn-phone .btn-phone__label { display: none; }
  .btn-phone { padding-inline: 14px; }
}

/* ==================================================================
   6. Hero
   ================================================================== */
.hero {
  position: relative;
  background: var(--ic-slate-900);
  color: var(--ic-slate-100);
  overflow: hidden;
}
/* Retícula de puntos tomada del isotipo. Sin imágenes: coste cero. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at center, rgba(255,255,255,.10) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
  mask-image: linear-gradient(105deg, #000 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(105deg, #000 0%, transparent 62%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid; gap: var(--ic-s7);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  padding-block: var(--ic-s9);
}
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; padding-block: var(--ic-s8); gap: var(--ic-s6); }
}
.hero h1 { color: #fff; margin-bottom: var(--ic-s4); }
.hero__lead {
  font-size: var(--ic-fs-lg); color: var(--ic-slate-300);
  max-width: 56ch; margin-bottom: var(--ic-s6);
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--ic-s3);
  font-size: var(--ic-fs-sm); color: var(--ic-amber);
  font-weight: 600; margin-bottom: var(--ic-s4);
}
.hero__eyebrow::before {
  content: ""; width: 26px; height: 3px; background: var(--ic-amber);
}
.hero__meta {
  margin-top: var(--ic-s6); padding-top: var(--ic-s4);
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: var(--ic-s3) var(--ic-s6);
  font-size: var(--ic-fs-sm); color: var(--ic-slate-300);
}
.hero__meta span { display: inline-flex; align-items: center; gap: var(--ic-s2); }
.hero__meta svg { width: 15px; height: 15px; color: var(--ic-amber); }

/* Panel de accesos rápidos: lenguaje de cuadro de control */
.quickpanel {
  background: #fff; color: var(--ic-slate-900);
  border-radius: var(--ic-radius-lg);
  border: 1px solid var(--ic-slate-700);
  overflow: hidden;
  box-shadow: 0 22px 50px -28px rgba(0,0,0,.8);
}
.quickpanel__head {
  padding: var(--ic-s4) var(--ic-s5);
  background: var(--ic-slate-50);
  border-bottom: 1px solid var(--ic-border);
}
.quickpanel__head h2 {
  margin: 0; font-size: var(--ic-fs-h4);
}
.quickpanel__head p {
  margin: 4px 0 0; font-size: var(--ic-fs-sm); color: var(--ic-slate-500);
}
.quickpanel__list { list-style: none; margin: 0; padding: 0; }
.quickpanel__list li { margin: 0; max-width: none; }
.quickpanel__list li + li { border-top: 1px solid var(--ic-border); }
.quickpanel__item {
  display: flex; align-items: center; gap: var(--ic-s4);
  padding: var(--ic-s4) var(--ic-s5);
  text-decoration: none; color: var(--ic-slate-900);
  background: #fff;
}
.quickpanel__item:hover { background: var(--ic-amber-050); }
.quickpanel__item:hover .quickpanel__arrow { transform: translateX(3px); }
.quickpanel__icon {
  flex: 0 0 auto; width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--ic-radius);
  background: var(--ic-slate-50); color: var(--ic-slate-700);
  border: 1px solid var(--ic-border);
}
.quickpanel__icon svg { width: 21px; height: 21px; }
.quickpanel__item--urgent .quickpanel__icon {
  background: var(--ic-alert-050); color: var(--ic-alert); border-color: #f2cfcd;
}
.quickpanel__text { flex: 1 1 auto; min-width: 0; }
.quickpanel__text strong {
  display: block; font-family: var(--ic-font-display);
  font-size: 1.0625rem; line-height: 1.25;
}
.quickpanel__text span {
  display: block; font-size: var(--ic-fs-xs); color: var(--ic-slate-500); line-height: 1.4;
}
.quickpanel__arrow {
  flex: 0 0 auto; color: var(--ic-slate-300);
  transition: transform .15s ease;
}
.quickpanel__arrow svg { width: 16px; height: 16px; }

/* ==================================================================
   7. Tarjetas y listados
   ================================================================== */
.card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--ic-border);
  border-radius: var(--ic-radius);
  padding: var(--ic-s5);
  height: 100%;
}
.card h3 { margin-top: 0; font-size: var(--ic-fs-h4); }
.card p { color: var(--ic-slate-500); font-size: var(--ic-fs-sm); margin-bottom: var(--ic-s4); }
.card > :last-child { margin-bottom: 0; margin-top: auto; }

.card-link {
  display: block; text-decoration: none; color: inherit;
  border-left: 3px solid transparent;
}
.card-link:hover { border-left-color: var(--ic-amber); background: var(--ic-slate-50); }
.card-link:hover h3 { color: var(--ic-slate-900); }

.card__kicker {
  font-size: var(--ic-fs-xs); color: var(--ic-slate-400);
  margin-bottom: var(--ic-s2); font-weight: 600;
}
.card__more {
  font-size: var(--ic-fs-sm); font-weight: 600; color: var(--ic-slate-700);
  display: inline-flex; align-items: center; gap: 6px;
}

/* Lista de enlaces en columnas */
.linklist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--ic-s6); }
.linklist li { margin: 0 0 2px; max-width: none; break-inside: avoid; }
.linklist a {
  display: block; padding: 7px 0; font-size: var(--ic-fs-sm);
  color: var(--ic-slate-700); text-decoration: none;
  border-bottom: 1px solid var(--ic-border);
}
.linklist a:hover { color: var(--ic-slate-900); border-bottom-color: var(--ic-amber); }
@media (max-width: 620px) { .linklist { columns: 1; } }

/* Etiquetas */
.tags { display: flex; flex-wrap: wrap; gap: var(--ic-s2); list-style: none; padding: 0; margin: 0; }
.tags li { margin: 0; max-width: none; }
.tag {
  display: inline-block; padding: 4px 10px;
  font-size: var(--ic-fs-xs); font-weight: 600;
  background: var(--ic-slate-50); color: var(--ic-slate-600);
  border: 1px solid var(--ic-border); border-radius: 100px;
  text-decoration: none;
}
a.tag:hover { border-color: var(--ic-slate-400); color: var(--ic-slate-900); }
.tag--amber { background: var(--ic-amber-050); border-color: #f0e2a6; color: #6b5800; }

/* Lista de comprobación con marcas */
.checklist { list-style: none; padding: 0; }
.checklist li {
  position: relative; padding-inline-start: 28px; margin-bottom: var(--ic-s3);
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 10px; height: 10px;
  background: var(--ic-amber);
  clip-path: polygon(0 40%, 38% 100%, 100% 8%, 100% 30%, 38% 100%, 0 62%);
}

/* Proceso numerado: sólo donde el contenido es realmente una secuencia */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--ic-s5); }
.steps > li {
  counter-increment: step;
  position: relative; padding-inline-start: 62px; max-width: 62ch;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--ic-font-display); font-weight: 700; font-size: 1.5rem;
  color: var(--ic-slate-300);
  width: 44px; text-align: right;
  border-right: 3px solid var(--ic-amber); padding-right: 10px; line-height: 1.25;
}
.steps h3 { margin: 0 0 var(--ic-s2); font-size: var(--ic-fs-h4); }
.steps p { margin: 0; color: var(--ic-slate-500); }

/* Tabla de datos técnicos */
.table-wrap { overflow-x: auto; margin-bottom: var(--ic-s5); }
table.data {
  width: 100%; border-collapse: collapse; font-size: var(--ic-fs-sm);
  max-width: none;
}
table.data th, table.data td {
  text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--ic-border); vertical-align: top;
}
table.data thead th {
  background: var(--ic-slate-50); font-family: var(--ic-font-display);
  font-size: var(--ic-fs-sm); border-bottom: 2px solid var(--ic-slate-200);
}
table.data tbody tr:hover { background: var(--ic-slate-50); }
table.data caption {
  caption-side: bottom; padding-top: var(--ic-s3);
  font-size: var(--ic-fs-xs); color: var(--ic-slate-400); text-align: left;
}

/* Aviso / nota */
.note {
  border-left: 3px solid var(--ic-slate-300);
  background: var(--ic-slate-50);
  padding: var(--ic-s4) var(--ic-s5);
  font-size: var(--ic-fs-sm);
  border-radius: 0 var(--ic-radius) var(--ic-radius) 0;
}
.note > :last-child { margin-bottom: 0; }
.note--amber { border-left-color: var(--ic-amber); background: var(--ic-amber-050); }
.note--alert { border-left-color: var(--ic-alert); background: var(--ic-alert-050); }
.note strong { display: block; margin-bottom: var(--ic-s1); }

/* Marcador de imagen pendiente */
.img-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: 100%; min-height: 140px;
  background:
    repeating-linear-gradient(45deg,
      var(--ic-slate-50) 0 12px, #fff 12px 24px);
  border: 1px dashed var(--ic-slate-300);
  border-radius: var(--ic-radius);
  color: var(--ic-slate-400); text-align: center; padding: var(--ic-s4);
}
.img-placeholder__tag { font-weight: 600; font-size: var(--ic-fs-sm); color: var(--ic-slate-500); }
.img-placeholder__path { font-size: 11px; word-break: break-all; }

/* ==================================================================
   8. Migas de pan
   ================================================================== */
.breadcrumbs {
  padding-block: var(--ic-s3);
  border-bottom: 1px solid var(--ic-border);
  background: var(--ic-slate-50);
  font-size: var(--ic-fs-xs);
}
.breadcrumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ic-s2);
}
.breadcrumbs li { margin: 0; max-width: none; display: inline-flex; align-items: center; gap: var(--ic-s2); }
.breadcrumbs li + li::before { content: "/"; color: var(--ic-slate-300); }
.breadcrumbs a { color: var(--ic-slate-500); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ic-slate-900); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ic-slate-700); font-weight: 600; }

/* ==================================================================
   9. Cabecera de página interior
   ================================================================== */
.page-head {
  background: var(--ic-slate-50);
  border-bottom: 1px solid var(--ic-border);
  padding-block: var(--ic-s7);
}
.page-head__inner { display: grid; gap: var(--ic-s6); grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); align-items: start; }
@media (max-width: 900px) { .page-head__inner { grid-template-columns: 1fr; } }
.page-head h1 { margin-bottom: var(--ic-s4); }
.page-head__lead {
  font-size: var(--ic-fs-lg); color: var(--ic-slate-600);
  margin-bottom: 0; max-width: 62ch;
}
.page-head--dark { background: var(--ic-slate-800); border-bottom: 0; }
.page-head--dark h1 { color: #fff; }
.page-head--dark .page-head__lead { color: var(--ic-slate-300); }

/* Ficha lateral de contacto rápido */
.aside-card {
  background: #fff; border: 1px solid var(--ic-border);
  border-top: 3px solid var(--ic-amber);
  border-radius: var(--ic-radius);
  padding: var(--ic-s5);
}
.aside-card h2, .aside-card h3 { margin-top: 0; font-size: var(--ic-fs-h4); }
.aside-card p { font-size: var(--ic-fs-sm); color: var(--ic-slate-500); }

/* ==================================================================
   10. Contenido de artículo / cuerpo largo
   ================================================================== */
.prose { max-width: var(--ic-measure); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-inline-start: 1.25em; }
.prose blockquote {
  margin-inline: 0; padding-inline-start: var(--ic-s5);
  border-inline-start: 3px solid var(--ic-amber);
  color: var(--ic-slate-600); font-size: var(--ic-fs-lg);
}
.prose figure { margin-inline: 0; }
.prose figcaption {
  font-size: var(--ic-fs-xs); color: var(--ic-slate-400); margin-top: var(--ic-s2);
}

/* Layout de dos columnas con barra lateral pegajosa */
.with-aside {
  display: grid; gap: var(--ic-s7);
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
}
@media (max-width: 1000px) { .with-aside { grid-template-columns: 1fr; } }
.with-aside__side { position: sticky; top: calc(var(--ic-header-h) + var(--ic-s4)); display: grid; gap: var(--ic-s5); }
@media (max-width: 1000px) { .with-aside__side { position: static; } }

/* Índice de contenidos */
.toc { border: 1px solid var(--ic-border); border-radius: var(--ic-radius); padding: var(--ic-s4) var(--ic-s5); }
.toc h2 { font-size: var(--ic-fs-sm); margin: 0 0 var(--ic-s3); color: var(--ic-slate-500); }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin: 0; max-width: none; }
.toc a {
  display: block; padding: 5px 0; font-size: var(--ic-fs-sm);
  color: var(--ic-slate-600); text-decoration: none;
}
.toc a:hover { color: var(--ic-slate-900); text-decoration: underline; }

/* ==================================================================
   11. Preguntas frecuentes
   ================================================================== */
.faq { border-top: 1px solid var(--ic-border); max-width: 880px; }
.faq__item { border-bottom: 1px solid var(--ic-border); }
.faq__item > summary {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ic-s4);
  padding: var(--ic-s4) 0; cursor: pointer; list-style: none;
  font-family: var(--ic-font-display); font-weight: 700;
  font-size: var(--ic-fs-h4); line-height: 1.3;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-top: 6px;
  background: currentColor;
  clip-path: polygon(46% 0, 54% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 54% 100%, 46% 100%, 46% 54%, 0 54%, 0 46%, 46% 46%);
  color: var(--ic-slate-400);
}
.faq__item[open] > summary::after {
  clip-path: polygon(0 46%, 100% 46%, 100% 54%, 0 54%);
}
.faq__item > summary:hover { color: var(--ic-slate-900); }
.faq__answer { padding-bottom: var(--ic-s5); }
.faq__answer > :last-child { margin-bottom: 0; }

/* ==================================================================
   12. Formularios
   ================================================================== */
.form { max-width: 720px; }
.form__grid { display: grid; gap: var(--ic-s4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field > label {
  font-size: var(--ic-fs-sm); font-weight: 600; color: var(--ic-slate-700);
}
.field__req { color: var(--ic-alert); }
.field__hint { font-size: var(--ic-fs-xs); color: var(--ic-slate-400); }

.input, .select, .textarea {
  width: 100%; font: inherit; font-size: var(--ic-fs-sm);
  padding: 11px 13px; color: var(--ic-slate-900);
  background: #fff;
  border: 1px solid var(--ic-slate-200);
  border-radius: var(--ic-radius);
  min-height: 46px;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ic-slate-400); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--ic-slate-700);
  outline: var(--ic-focus); outline-offset: 1px;
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6874' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 12px;
  padding-right: 36px;
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--ic-alert); background: var(--ic-alert-050);
}
.field__error { font-size: var(--ic-fs-xs); color: var(--ic-alert); font-weight: 600; }

.check { display: flex; align-items: flex-start; gap: var(--ic-s3); }
.check input[type="checkbox"] {
  width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--ic-slate-700);
}
.check label { font-size: var(--ic-fs-xs); color: var(--ic-slate-500); line-height: 1.5; max-width: 62ch; }
.check a { color: var(--ic-slate-700); }

.filedrop {
  border: 1px dashed var(--ic-slate-300); border-radius: var(--ic-radius);
  padding: var(--ic-s4); background: var(--ic-slate-50);
}
.filedrop input[type="file"] { font-size: var(--ic-fs-xs); width: 100%; }

/* Honeypot: fuera de la vista y del foco, sin display:none */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.form__actions {
  margin-top: var(--ic-s5); display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--ic-s4);
}
.form__legal { font-size: var(--ic-fs-xs); color: var(--ic-slate-400); max-width: 46ch; }

/* Mensajes de resultado */
.alert {
  padding: var(--ic-s4) var(--ic-s5); border-radius: var(--ic-radius);
  border: 1px solid; margin-bottom: var(--ic-s5); font-size: var(--ic-fs-sm);
}
.alert > :last-child { margin-bottom: 0; }
.alert strong { display: block; margin-bottom: 4px; font-size: var(--ic-fs-base); }
.alert--ok { background: var(--ic-ok-050); border-color: #b9dcc9; color: var(--ic-ok); }
.alert--error { background: var(--ic-alert-050); border-color: #f0c9c6; color: #8c1c16; }

/* ==================================================================
   13. Bloque de llamada a la acción
   ================================================================== */
.cta-band {
  background: var(--ic-slate-800); color: #fff;
  border-radius: var(--ic-radius-lg);
  padding: var(--ic-s6) var(--ic-s7);
  display: grid; gap: var(--ic-s5);
  grid-template-columns: minmax(0,1fr) auto; align-items: center;
}
@media (max-width: 820px) { .cta-band { grid-template-columns: 1fr; padding: var(--ic-s5); } }
.cta-band h2 { color: #fff; margin: 0 0 var(--ic-s2); font-size: var(--ic-fs-h3); }
.cta-band p { color: var(--ic-slate-300); margin: 0; font-size: var(--ic-fs-sm); }
.cta-band--amber { background: var(--ic-amber); color: var(--ic-slate-900); }
.cta-band--amber h2 { color: var(--ic-slate-900); }
.cta-band--amber p { color: #4a3f00; }

/* CTA intermedio en línea */
.cta-inline {
  border: 1px solid var(--ic-border); border-left: 3px solid var(--ic-amber);
  background: var(--ic-slate-50);
  padding: var(--ic-s5); border-radius: 0 var(--ic-radius) var(--ic-radius) 0;
  display: grid; gap: var(--ic-s4);
  grid-template-columns: minmax(0,1fr) auto; align-items: center;
  max-width: none;
}
@media (max-width: 720px) { .cta-inline { grid-template-columns: 1fr; } }
.cta-inline p { margin: 0; font-size: var(--ic-fs-sm); }
.cta-inline strong { display: block; font-family: var(--ic-font-display); font-size: var(--ic-fs-h4); margin-bottom: 4px; }

/* ==================================================================
   14. Cobertura territorial
   ================================================================== */
.coverage { display: grid; gap: var(--ic-s6); grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); align-items: start; }
@media (max-width: 900px) { .coverage { grid-template-columns: 1fr; } }
.province-list { display: grid; gap: var(--ic-s3); }
.province {
  display: flex; align-items: baseline; gap: var(--ic-s4);
  padding: var(--ic-s4); background: #fff;
  border: 1px solid var(--ic-border); border-radius: var(--ic-radius);
  text-decoration: none; color: inherit;
}
.province:hover { border-color: var(--ic-slate-400); }
.province__name { font-family: var(--ic-font-display); font-weight: 700; font-size: var(--ic-fs-h4); flex: 0 0 auto; }
.province__cities { font-size: var(--ic-fs-xs); color: var(--ic-slate-500); }

/* ==================================================================
   15. Pie de página
   ================================================================== */
.site-footer {
  background: var(--ic-slate-900); color: var(--ic-slate-300);
  font-size: var(--ic-fs-sm);
  padding-top: var(--ic-s8);
  margin-top: var(--ic-s8);
}
.site-footer a { color: var(--ic-slate-200); text-decoration: none; }
.site-footer a:hover { color: var(--ic-amber); text-decoration: underline; }
.footer__grid {
  display: grid; gap: var(--ic-s6);
  grid-template-columns: minmax(240px, 1.2fr) repeat(auto-fit, minmax(160px, 1fr));
  padding-bottom: var(--ic-s7);
}
.footer__col h2 {
  font-size: var(--ic-fs-sm); color: #fff; margin: 0 0 var(--ic-s4);
  padding-bottom: var(--ic-s2); border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin: 0 0 8px; max-width: none; }
.footer__brand img { height: 34px; width: auto; margin-bottom: var(--ic-s4); }
.footer__address { font-style: normal; line-height: 1.6; margin-bottom: var(--ic-s4); }
.footer__address strong { color: #fff; display: block; }
.footer__legal {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: var(--ic-s4) var(--ic-s6);
  display: flex; flex-wrap: wrap; gap: var(--ic-s3) var(--ic-s5);
  align-items: center; font-size: var(--ic-fs-xs); color: var(--ic-slate-400);
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--ic-s4); list-style: none; margin: 0; padding: 0; }
.footer__legal li { margin: 0; max-width: none; }
.footer__legal .footer__spacer { margin-inline-start: auto; }
.footer__disclaimer {
  font-size: var(--ic-fs-xs); color: var(--ic-slate-400);
  max-width: 90ch; padding-bottom: var(--ic-s5); line-height: 1.55;
}

/* ==================================================================
   16. Barra de acción móvil + WhatsApp
   ================================================================== */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; grid-template-columns: 1fr 1fr;
  background: #fff; border-top: 1px solid var(--ic-border);
  padding: 8px; gap: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  box-shadow: 0 -6px 22px -14px rgba(0,0,0,.5);
}
@media (max-width: 780px) {
  .actionbar { display: grid; }
  body { padding-bottom: 74px; }
}

/* Botón de WhatsApp: presente pero discreto */
.wa-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 15px;
  background: #fff; color: var(--ic-slate-800);
  border: 1px solid var(--ic-border-strong);
  border-radius: 100px; text-decoration: none;
  font-size: var(--ic-fs-sm); font-weight: 600;
  box-shadow: var(--ic-shadow-2);
}
.wa-fab:hover { border-color: var(--ic-slate-400); color: var(--ic-slate-900); }
.wa-fab svg { width: 20px; height: 20px; color: #25d366; }
@media (max-width: 780px) {
  .wa-fab { bottom: 82px; padding: 11px; }
  .wa-fab span { display: none; }
}

/* ==================================================================
   17. Banner de consentimiento de cookies
   ================================================================== */
.cookie-banner {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 200;
  background: #fff; border-top: 3px solid var(--ic-amber);
  box-shadow: 0 -10px 40px -18px rgba(0,0,0,.5);
  padding: var(--ic-s5) 0;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  display: grid; gap: var(--ic-s5);
  grid-template-columns: minmax(0,1fr) auto; align-items: center;
}
@media (max-width: 860px) { .cookie-banner__inner { grid-template-columns: 1fr; } }
.cookie-banner h2 { font-size: var(--ic-fs-h4); margin: 0 0 var(--ic-s2); }
.cookie-banner p { font-size: var(--ic-fs-sm); color: var(--ic-slate-500); margin: 0; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--ic-s3); }
.cookie-banner__actions .btn { flex: 1 1 auto; min-width: 150px; }

.cookie-prefs { border-top: 1px solid var(--ic-border); margin-top: var(--ic-s5); padding-top: var(--ic-s5); }
.cookie-prefs[hidden] { display: none; }
.cookie-prefs__row {
  display: flex; gap: var(--ic-s4); align-items: flex-start;
  padding: var(--ic-s4) 0; border-bottom: 1px solid var(--ic-border);
}
.cookie-prefs__row:last-of-type { border-bottom: 0; }
.cookie-prefs__row h3 { margin: 0 0 3px; font-size: var(--ic-fs-base); }
.cookie-prefs__row p { margin: 0; font-size: var(--ic-fs-xs); color: var(--ic-slate-500); }
.cookie-prefs__row input[type="checkbox"] { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--ic-slate-700); }

/* ==================================================================
   18. Utilidades
   ================================================================== */
.text-muted { color: var(--ic-slate-500); }
.text-sm { font-size: var(--ic-fs-sm); }
.text-xs { font-size: var(--ic-fs-xs); }
.lead { font-size: var(--ic-fs-lg); color: var(--ic-slate-600); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--ic-s5); } .mt-6 { margin-top: var(--ic-s6); }
.mb-5 { margin-bottom: var(--ic-s5); } .mb-6 { margin-bottom: var(--ic-s6); }
.full { max-width: none; }

@media print {
  .site-header, .topbar, .actionbar, .wa-fab, .cookie-banner, .site-footer nav { display: none !important; }
  body { padding-bottom: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}