/* ============================================================================
   PLÁSTICOS FERPLAST — DESIGN SYSTEM v2 (simplificado)
   Filosofia: menys opcions = menys pitorreo. Si un color/pes no és aquí,
   no s'ha d'usar. Tot es referencia amb --fp-*.
   ============================================================================ */

:root {
  /* ── 1. COLOR ─────────────────────────────────────────────────────── */
  --fp-brand:        #006FDF;
  --fp-brand-hover:  #0057B8;
  --fp-brand-tint:   #E8F1FD;

  --fp-white:        #FFFFFF;
  --fp-gray-100:     #F5F7F9;
  --fp-gray-200:     #DCE3E7;
  --fp-gray-400:     #AEB9C0;
  --fp-gray-600:     #5F7079;
  --fp-gray-800:     #33454F;
  --fp-gray-900:     #0E1B24;

  --fp-error:   #C0392B;
  --fp-success: #1B8F5A;

  /* ── 2. TOKENS SEMÀNTICS (usar aquests a les plantilles) ─────────── */
  --fp-bg:            var(--fp-white);
  --fp-bg-subtle:     var(--fp-gray-100);
  --fp-surface:       var(--fp-white);
  --fp-border:        var(--fp-gray-200);
  --fp-border-strong: var(--fp-gray-400);

  --fp-heading:    var(--fp-gray-900);
  --fp-text:       var(--fp-gray-800);
  --fp-text-muted: var(--fp-gray-600);

  --fp-accent:       var(--fp-brand);
  --fp-action:       var(--fp-brand);
  --fp-action-hover: var(--fp-brand-hover);
  --fp-on-brand:     var(--fp-white);
  --fp-link:         var(--fp-brand);
  --fp-focus-ring:   var(--fp-brand);

  --fp-dark-bg:      var(--fp-brand);
  --fp-dark-text:    #DCE8FB;
  --fp-dark-heading: var(--fp-white);

  /* Compatibilitat amb selectors vells del tema (no els useu a plantilles noves) */
  --fp-cyan:      var(--fp-brand);
  --fp-dark-blue: var(--fp-brand-hover);
  --fp-bg-alt:    var(--fp-bg-subtle);
  --fp-light-bg:  var(--fp-bg-subtle);
  --fp-bg-dark:   var(--fp-gray-900);
  --fp-border-dark: rgb(255 255 255 / 0.10);

  /* ── 3. TIPOGRAFIA (només Inter) ─────────────────────────────────── */
  --fp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fp-text-xs:   0.75rem;
  --fp-text-sm:   0.875rem;
  --fp-text-base: 1rem;
  --fp-text-lg:   1.125rem;
  --fp-text-xl:   1.25rem;
  --fp-text-2xl:  1.5rem;
  --fp-text-3xl:  1.875rem;
  --fp-text-4xl:  2.25rem;
  --fp-text-5xl:  3rem;
  --fp-text-6xl:  3.75rem;

  --fp-w-regular:  400;
  --fp-w-medium:   500;
  --fp-w-semibold: 600;
  --fp-w-bold:     700;

  --fp-leading-tight:  1.15;
  --fp-leading-normal: 1.6;
  --fp-tracking-tight: -0.02em;
  --fp-tracking-wide:  0.08em;

  /* ── 4. ESPAIAT (base 4px) ───────────────────────────────────────── */
  --fp-space-1:  0.25rem;  --fp-space-2:  0.5rem;   --fp-space-3:  0.75rem;
  --fp-space-4:  1rem;     --fp-space-5:  1.25rem;  --fp-space-6:  1.5rem;
  --fp-space-8:  2rem;     --fp-space-10: 2.5rem;   --fp-space-12: 3rem;
  --fp-space-16: 4rem;     --fp-space-20: 5rem;     --fp-space-24: 6rem;

  /* ── 5. RADIS · FOCUS · TRANSICIÓ (sense ombres) ─────────────────── */
  --fp-radius-sm:   4px;
  --fp-radius-md:   8px;
  --fp-radius-btn:  var(--fp-radius-sm);
  --fp-radius-card: var(--fp-radius-md);
  --fp-radius:      var(--fp-radius-sm);   /* alias legacy */
  --fp-radius-lg:   var(--fp-radius-md);   /* alias legacy */

  --fp-ring: 0 0 0 3px rgb(0 111 223 / 0.25);
  --fp-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Compat legacy: sombres queden anul·lades (elevació = strokes) */
  --fp-shadow-sm:    none;
  --fp-shadow-md:    none;
  --fp-shadow-hover: none;
  --fp-shadow:       none;

  /* ── 6. LAYOUT ───────────────────────────────────────────────────── */
  --fp-container:      1600px;
  --fp-container-text: 720px;
  --fp-gutter:         var(--fp-space-6);
  --fp-section-y:      var(--fp-space-24);
  --fp-section-py:     var(--fp-space-24);  /* alias legacy */
  --fp-gap:            var(--fp-space-8);   /* alias legacy */
}

/* ─── 2. RESET & BASE ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--fp-text);
  background: var(--fp-white);
  margin: 0;
}

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

a { color: inherit; }

/* ─── 3. TIPOGRAFIA (alineat al design system v2) ────────
   Titulars a semibold (600). El 700 queda reservat per xifres. */
.fp-h1 {
  font-size: clamp(var(--fp-text-4xl), 5vw, var(--fp-text-6xl));
  font-weight: var(--fp-w-semibold);
  line-height: var(--fp-leading-tight);
  letter-spacing: var(--fp-tracking-tight);
  color: var(--fp-heading);
  margin: 0;
}

.fp-h2 {
  font-size: clamp(var(--fp-text-3xl), 3.5vw, var(--fp-text-4xl));
  font-weight: var(--fp-w-semibold);
  line-height: var(--fp-leading-tight);
  letter-spacing: var(--fp-tracking-tight);
  color: var(--fp-heading);
  margin: 0;
}

.fp-h3 {
  font-size: clamp(var(--fp-text-xl), 2vw, var(--fp-text-3xl));
  font-weight: var(--fp-w-semibold);
  line-height: var(--fp-leading-tight);
  color: var(--fp-heading);
  margin: 0;
}

.fp-lead {
  font-size: var(--fp-text-lg);
  line-height: var(--fp-leading-normal);
  color: var(--fp-text-muted);
}

/* Eyebrow / tagline: labels curts en majúscules, color brand */
.fp-tagline {
  display: inline-block;
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-w-semibold);
  letter-spacing: var(--fp-tracking-wide);
  text-transform: uppercase;
  color: var(--fp-action);
  margin-bottom: var(--fp-space-3);
}

/* ─── 4. CONTAINER & LAYOUT ─────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--fp-container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5%, 2.5rem);
}

/* Sección base */
.fp-section {
  padding-block: var(--fp-section-py);
}

.fp-section-light {
  background: var(--fp-bg-alt);
}

.fp-section-dark {
  background: var(--fp-dark-blue);
  color: var(--fp-white);
}

/* Grids */
.fp-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fp-gap);
}
@media (min-width: 768px) {
  .fp-grid-2 {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--fp-gap) 5rem;
  }
}

.fp-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fp-gap);
}
@media (min-width: 640px)  { .fp-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fp-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.fp-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (min-width: 1024px) { .fp-grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Section header 2-col */
.fp-section-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: calc(var(--fp-gap) * 1.5);
}
@media (min-width: 768px) {
  .fp-section-header {
    grid-template-columns: 1fr 1fr;
    align-items: flex-end;
    margin-bottom: calc(var(--fp-gap) * 2);
  }
}

/* ─── 5. BOTONES / SISTEMA DE CTAs ───────────────────────── *
 * SISTEMA:
 *   FONDO CLARO
 *     .btn-primary  → filled azul (acción principal)
 *     .btn-secondary → línea/outline azul oscuro (acción secundaria)
 *     .btn-ghost    → texto + flecha (link / acción terciaria)
 *   FONDO OSCURO (imagen, azul oscuro)
 *     .btn-white         → filled blanc (acción principal sobre fondo oscuro)
 *     .btn-outline-white → línea/outline blanca (secundaria sobre fondo oscuro)
 *     .btn-ghost-white   → texto + flecha blanco (link sobre fondo oscuro)
 *
 * Todos los sólidos y outlines comparten alto, padding y radio; el borde
 * ocupa 1.5px en ambos casos para que no haya saltos de altura.
 * ────────────────────────────────────────────────────────── */
.btn-primary,
.btn-blue,
.btn-secondary,
.btn-white,
.btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fp-space-2);
  padding: var(--fp-space-4) var(--fp-space-6);
  border-radius: var(--fp-radius-btn);
  font-family: var(--fp-font);
  font-size: var(--fp-text-base);
  font-weight: var(--fp-w-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fp-transition), color var(--fp-transition), border-color var(--fp-transition);
  border: 1px solid transparent;
  box-sizing: border-box !important;
}

/* Filled — fons clar (acció principal) */
.btn-primary, .btn-blue {
  background: var(--fp-action);
  color: var(--fp-on-brand);
  border-color: var(--fp-action);
}
.btn-primary:hover, .btn-blue:hover {
  background: var(--fp-action-hover);
  border-color: var(--fp-action-hover);
  color: var(--fp-on-brand);
}

/* Outline (línia) — fons clar (secundària) */
.btn-secondary {
  background: transparent;
  color: var(--fp-action);
  border-color: var(--fp-action);
}
.btn-secondary:hover {
  background: var(--fp-action);
  color: var(--fp-on-brand);
  border-color: var(--fp-action);
}

/* Filled blanc — sobre imatge / fons fosc (acció principal)
   Text en gris fosc per màxim contrast i to industrial */
.btn-white {
  background: var(--fp-white);
  color: var(--fp-heading);
  border-color: var(--fp-white);
}
.btn-white:hover {
  background: var(--fp-brand-tint);
  color: var(--fp-heading);
  border-color: var(--fp-brand-tint);
}

/* Ghost — texto + flecha, fondo claro */
/* Ghost — text + fletxa (link visual), fons clar */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-space-2);
  background: transparent;
  border: none;
  padding: var(--fp-space-2) 0;
  font-family: var(--fp-font);
  font-size: var(--fp-text-base);
  font-weight: var(--fp-w-medium);
  color: var(--fp-action);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--fp-transition), gap var(--fp-transition);
}
.btn-ghost:hover {
  background: transparent;
  color: var(--fp-action-hover);
  gap: var(--fp-space-3);
  text-decoration: none;
}
.btn-ghost svg { width: 1em; height: 1em; }

/* Ghost blanc — sobre fons fosc */
.btn-ghost-white {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-space-2);
  background: transparent;
  border: none;
  padding: var(--fp-space-2) 0;
  font-family: var(--fp-font);
  font-size: var(--fp-text-base);
  font-weight: var(--fp-w-medium);
  color: var(--fp-white);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--fp-transition), gap var(--fp-transition);
}
.btn-ghost-white:hover {
  color: var(--fp-white);
  opacity: 0.75;
  gap: var(--fp-space-3);
  text-decoration: none;
}
.btn-ghost-white svg { width: 1em; height: 1em; }

/* ─── 6. NAVBAR ──────────────────────────────────────────── */
.fp-navbar {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--fp-white);
  border-bottom: 1px solid var(--fp-border);
}

.fp-navbar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 72px;
  gap: 2rem;
}

.fp-navbar-logo a { display: flex; align-items: center; }
.fp-navbar-logo img { height: 2rem; width: auto; }

/* Nav desktop */
.fp-navbar-nav {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 1024px) { .fp-navbar-nav { display: flex; } }

.fp-navbar-nav > li { position: relative; }

.fp-navbar-nav > li > a {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.875rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fp-text);
  text-decoration: none;
  border-radius: var(--fp-radius);
  transition: color 0.15s, background 0.15s;
}
.fp-navbar-nav > li > a:hover,
.fp-navbar-nav > li.current-menu-item > a,
.fp-navbar-nav > li.current-menu-ancestor > a {
  color: var(--fp-dark-blue);
  background: var(--fp-bg-alt);
}

/* Chevron en ítems padre del menú desktop */
.fp-navbar-nav > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 0.25rem;
  opacity: 0.55;
  transition: transform 0.2s;
}
.fp-navbar-nav > li.menu-item-has-children:hover > a::after {
  transform: rotate(225deg) translateY(-2px);
  opacity: 0.8;
}

/* Dropdown — 1 columna, ítems centrats, separat de la navbar */
.fp-navbar-nav .menu-item-has-children > ul.sub-menu {
  display: block;
  position: absolute;
  top: calc(100% + 18px);          /* més avall: no trepitja la navbar */
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
/* Pont invisible entre trigger i dropdown (ara 18px) */
.fp-navbar-nav .menu-item-has-children > ul.sub-menu::after {
  content: '';
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}
/* Obertura al hover + focus-within */
.fp-navbar-nav .menu-item-has-children:hover > ul.sub-menu,
.fp-navbar-nav .menu-item-has-children:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
/* Ítems — 1 columna, centrats */
.fp-navbar-nav .menu-item-has-children > ul.sub-menu li { margin: 0; }
.fp-navbar-nav .menu-item-has-children > ul.sub-menu li a {
  display: block;
  text-align: center;
  padding: 0.625rem 1.25rem;
  color: var(--fp-text);
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: var(--fp-w-medium);
  transition: background 0.15s ease, color 0.15s ease;
}
.fp-navbar-nav .menu-item-has-children > ul.sub-menu li a .fp-nav-title { display: inline; font-weight: inherit; }
.fp-navbar-nav .menu-item-has-children > ul.sub-menu li a .fp-nav-desc { display: none; } /* 1 columna neta: sense descripció */
.fp-navbar-nav .menu-item-has-children > ul.sub-menu li a:hover,
.fp-navbar-nav .menu-item-has-children > ul.sub-menu li a:focus-visible {
  background: var(--fp-bg-subtle);
  color: var(--fp-action);
}

/* CTA navbar */
.fp-navbar-cta { display: none; }
@media (min-width: 1024px) { .fp-navbar-cta { display: inline-flex; } }

/* Selector de idioma (WPML) — mismo estilo que el resto de ítems del menú */
.fp-lang-switcher { display: flex; align-items: center; gap: 0.5rem; }
.fp-lang-switcher a {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fp-text);
  padding: 0.375rem 0.125rem;
  background: none;
  border-radius: 0;
  transition: color 0.15s;
}
.fp-lang-switcher a:hover { color: var(--fp-brand); background: none; }
.fp-lang-switcher a.is-active { color: var(--fp-brand); font-weight: 700; background: none; }

.fp-lang-switcher--desktop { display: none; }
@media (min-width: 1024px) { .fp-lang-switcher--desktop { display: flex; } }

.fp-mobile-nav .fp-lang-switcher--mobile {
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fp-border);
}

/* Hamburger */
.fp-menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  width: 2.25rem;
  height: 2.25rem;
}
@media (min-width: 1024px) { .fp-menu-toggle { display: none; } }
.fp-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--fp-text);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
/* Hamburger → X cuando está abierto */
.fp-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fp-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.fp-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav — accordion */
.fp-mobile-nav {
  display: none;
  border-top: 1px solid var(--fp-border);
  background: var(--fp-white);
  padding: 0.5rem clamp(1.25rem, 5%, 2.5rem) 1.5rem;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}
.fp-mobile-nav.open { display: block; }
.fp-mobile-nav ul  { list-style: none; margin: 0; padding: 0; }

/* Fila de primer nivel: enlace + botón toggle */
.fp-mobile-nav > ul > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--fp-border);
}
.fp-mobile-nav > ul > li > a {
  flex: 1;
  padding: 0.875rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fp-text);
  text-decoration: none;
}
.fp-mobile-nav > ul > li > a:hover { color: var(--fp-dark-blue); }

/* Botón toggle submenu (inyectado por JS) */
.fp-mobile-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fp-text);
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.fp-mobile-sub-toggle svg { display: block; }
li.fp-sub-open > .fp-mobile-sub-toggle { transform: rotate(180deg); }

/* Sub-menu móvil */
.fp-mobile-nav .sub-menu {
  display: none;
  flex-basis: 100%;
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem 0.75rem;
}
.fp-mobile-nav li.fp-sub-open > .sub-menu { display: block; }
.fp-mobile-nav .sub-menu li a {
  display: block;
  padding: 0.625rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4B5563;
  text-decoration: none;
  border-bottom: 1px solid var(--fp-border);
}
.fp-mobile-nav .sub-menu li:last-child a { border-bottom: none; }
.fp-mobile-nav .sub-menu li a:hover { color: var(--fp-dark-blue); }

.fp-mobile-nav .btn-primary { margin-top: 1.25rem; width: 100%; justify-content: center; }

/* ─── 7. HERO ────────────────────────────────────────────── */

/* Hero limpio (home) — fondo blanco o con imagen */
.fp-hero-clean {
  position: relative;
  min-height: 72vh; /* Reducido un 15% (de 85vh) */
  display: flex;
  align-items: center;
  padding-block: 55px; /* Ajuste sutil de padding */
  background: var(--fp-white);
  overflow: hidden;
}

.fp-hero-clean.fp-hero-has-bg {
  background-size: cover;
  background-position: center;
  background-image: var(--fp-hero-bg);
  color: #fff;
}

.fp-hero-clean__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%);
  z-index: 1;
}

.fp-hero-clean .container {
  position: relative;
  z-index: 2;
}

.fp-hero-clean .fp-hero-inner {
  max-width: 800px;
  text-align: left;
}

.fp-hero-clean .fp-tagline {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: #E2EEFA;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8125rem;
}

.fp-hero-clean.fp-hero-has-bg .fp-tagline { color: #E2EEFA; }
.fp-hero-clean:not(.fp-hero-has-bg) .fp-tagline { color: var(--fp-action); }

.fp-hero-clean .fp-h1 {
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 1.5rem;
  color: inherit;
}

.fp-hero-clean .fp-lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 640px;
  color: rgba(255,255,255,0.9);
}

.fp-hero-clean:not(.fp-hero-has-bg) .fp-lead {
  color: var(--fp-text-muted);
}

.fp-hero-clean .fp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
}



/* Hero con imagen de fondo (servicios, materiales, etc.) */
/* Hero (amb breadcrumbs) — alçada consistent entre pàgines interiors.
 * Normativa: pàgines interiors NO mostren tagline al hero; només
 * breadcrumb + títol + paràgraf + CTAs. */
/* Hero interior: breadcrumb top / contingut bottom (space-between).
 * El contingut es col·loca amb margin-top:auto per empènyer-lo cap avall. */
.fp-hero {
  position: relative;
  padding: 2rem 0 4.5rem;
  /* Escalable: mai més petit que 560px (laptops petits), creix amb el viewport
     fins un tostoll màxim de 700px (monitors grans). Si el contingut és més
     alt del que dona la finestra, l'alçada mínima s'infla per no tallar text. */
  min-height: clamp(560px, 60vh, 700px);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.fp-hero > .container {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.fp-hero .fp-breadcrumb,
.fp-hero .fp-breadcrumb-dark { margin-bottom: 0; flex-shrink: 0; }
.fp-hero .fp-hero-content { margin-top: auto; }
@media (max-width: 767px) {
  .fp-hero { padding-block: 1.5rem; height: 60vh; }
}

.fp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fp-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fp-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%);
}

.fp-hero .container { position: relative; z-index: 1; }

.fp-hero-content {
  max-width: 50%;
}
@media (max-width: 767px) { .fp-hero-content { max-width: 100%; } }

.fp-hero-content .fp-tagline {
  color: #E2EEFA;
}

.fp-hero-content .fp-h1 {
  color: var(--fp-white);
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin-bottom: 1rem;
}

.fp-hero-content .fp-lead {
  color: rgba(255,255,255,0.82);
  margin-bottom: 2rem;
}

.fp-hero-content .fp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center; /* Ensure buttons stay centered and don't stretch */
}

/* Outline (línea) — sobre imagen / fondo oscuro */
.btn-outline-white {
  background: transparent;
  color: var(--fp-white);
  border-color: rgba(255,255,255,0.8);
}
.btn-outline-white:hover {
  border-color: var(--fp-white);
  background: rgba(255,255,255,0.1);
  color: var(--fp-white);
}

/* ─── 8. FEATURE CARDS & SERVICES ────────────────────────── */
.fp-feature-card {
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Número decorativo en cyan — sustituye los iconos genéricos */
.fp-feature-num {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fp-cyan);
  line-height: 1;
  margin-bottom: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.fp-feature-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 0.625rem;
  color: var(--fp-text);
}

.fp-feature-card > p {
  font-size: 0.9375rem;
  color: var(--fp-text-muted);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.fp-feature-card .btn-ghost {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--fp-dark-blue);
}

/* Nuevo diseño de servicios (Home) — Exacto según captura */
.fp-services-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
}
@media (min-width: 640px)  { .fp-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fp-services-grid { grid-template-columns: repeat(3, 1fr); } }

.fp-service-item {
  background: #FFFFFF;
  border-radius: 4px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  border: 1px solid rgba(0,0,0,0.05);
}
.fp-service-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.fp-service-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 1.5rem;
  color: #9CA3AF;
}
.fp-service-icon img,
.fp-service-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fp-service-item h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: #111827;
  letter-spacing: -0.01em;
}

.fp-service-item p {
  font-size: 0.875rem;
  color: #4B5563;
  line-height: 1.6;
  margin: 0 0 1.5rem;
  flex: 1;
}

.fp-service-link {
  font-size: 0.875rem;
  font-weight: 700;
  color: #106EEB;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: gap 0.2s;
}
.fp-service-item:hover .fp-service-link,
.fp-service-link:hover { gap: 0.75rem; }
.fp-service-link svg {
  transition: transform 0.2s;
}
.fp-service-link:hover svg {
  transform: translate(2px, -2px);
}

/* Cards con borde (en secciones de detalle) */
.fp-feature-card--bordered {
  background: #fff;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  padding: 1.75rem;
  transition: all 0.3s ease;
}
.fp-feature-card--bordered:hover {
  box-shadow: var(--fp-shadow-md);
}

/* ─── 9. STATS ───────────────────────────────────────────── */
.fp-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  margin-bottom: 2.5rem;
}

.fp-stat {}

.fp-stat-num {
  display: block;
  font-size: 3rem;
  font-weight: var(--fp-w-bold);
  letter-spacing: -0.03em;
  color: var(--fp-cyan);
  line-height: 1;
  margin-bottom: 0.375rem;
}

.fp-stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fp-text-muted);
}

/* Stats en franja horizontal */
.fp-stats-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) { .fp-stats-bar { grid-template-columns: repeat(4, 1fr); } }

.fp-stats-bar .fp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--fp-border);
}
.fp-stats-bar .fp-stat:last-child { border-right: none; }
@media (max-width: 767px) {
  .fp-stats-bar .fp-stat:nth-child(2n) { border-right: none; }
  .fp-stats-bar .fp-stat:nth-child(n+3) { border-top: 1px solid var(--fp-border); }
}

/* Component: fp-stats-grid — mètriques en una sola fila (bandera esquerra) *
 * Reusable. Aliases: .fp-stats-grid--left (backward compat).
 * Escala: números compactes perquè 4 quàdruples entrin en una sola fila.
 * ─────────────────────────────────────────────────────────────── */
.fp-stats-grid,
.fp-stats-grid--left {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem 1.75rem;
  margin-bottom: 2rem;
}
@media (max-width: 900px) {
  .fp-stats-grid,
  .fp-stats-grid--left { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.75rem; }
}
@media (max-width: 420px) {
  .fp-stats-grid,
  .fp-stats-grid--left { grid-template-columns: 1fr; gap: 1.25rem; }
}
.fp-stats-grid .fp-stat,
.fp-stats-grid--left .fp-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 0;
  border: 0;
  gap: 0.375rem;
}
.fp-stats-grid .fp-stat-num,
.fp-stats-grid--left .fp-stat-num {
  display: block;
  font-size: clamp(1.875rem, 2.4vw, 2.5rem);
  font-weight: var(--fp-w-bold);
  letter-spacing: -0.03em;
  color: var(--fp-cyan);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fp-stats-grid .fp-stat-label,
.fp-stats-grid--left .fp-stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fp-text-muted);
  line-height: 1.4;
}

/* About media — la imatge del "Quiénes somos" s'ajusta a l'alçada del contingut */
.fp-about-media {
  align-self: stretch;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  display: block;
}
.fp-about-media > img,
.fp-about-media > .fp-img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
  border-radius: 8px;
  display: block;
}

/* ─── 10. BLOG CARDS ─────────────────────────────────────── */
.fp-blog-card {
  display: flex;
  flex-direction: column;
  background: var(--fp-white);
  border-radius: var(--fp-radius-lg);
  overflow: hidden;
  box-shadow: var(--fp-shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}
.fp-blog-card:hover {
  box-shadow: var(--fp-shadow-hover);
  transform: translateY(-2px);
}

.fp-blog-card-img {
  display: block;
  position: relative;
  padding-top: 60%;
  overflow: hidden;
  background: var(--fp-bg-alt);
}
.fp-blog-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.fp-blog-card:hover .fp-blog-card-img img { transform: scale(1.03); }

.fp-blog-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.fp-blog-card-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fp-text-muted);
}

.fp-blog-card-body h2,
.fp-blog-card-body h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0 0 0.625rem;
}

.fp-blog-card-body h2 a,
.fp-blog-card-body h3 a {
  text-decoration: none;
  color: var(--fp-text);
  transition: color 0.15s;
}
.fp-blog-card-body h2 a:hover,
.fp-blog-card-body h3 a:hover { color: var(--fp-dark-blue); }

.fp-blog-card-body > p {
  font-size: 0.9rem;
  color: var(--fp-text-muted);
  line-height: 1.6;
  flex: 1;
  margin: 0 0 1.25rem;
}

/* ─── 11. BADGES & LABELS ────────────────────────────────── */
.fp-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 3px;
  background: var(--fp-bg-alt);
  color: var(--fp-dark-blue);
  text-decoration: none;
  letter-spacing: 0.02em;
  border: 1px solid var(--fp-border);
}
.fp-badge:hover { border-color: var(--fp-dark-blue); }

.fp-badge-cyan {
  background: var(--fp-cyan);
  color: var(--fp-white);
  border-color: var(--fp-cyan);
}

/* ─── 12. CTA BANNER ─────────────────────────────────────── */
.fp-cta-banner {
  position: relative;
  overflow: hidden;
  background: var(--fp-dark-blue);
  padding-block: var(--fp-section-py);
}

.fp-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fp-cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
}

/* Patrón decorativo sobre el banner */
.fp-cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(
    circle at 70% 50%,
    rgba(75,184,212,0.12) 0%,
    transparent 65%
  );
  pointer-events: none;
}

.fp-cta-banner .container { 
  position: relative; 
  z-index: 1; 
  max-width: 640px; 
  text-align: center;
}

.fp-cta-banner .fp-h2 { color: var(--fp-white); margin-bottom: 1rem; }
.fp-cta-banner p { color: rgba(255,255,255,0.78); margin: 0 0 2rem; }

.fp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: center;
  justify-content: center;
}

/* Enlace fantasma blanco */
.fp-link-white {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: rgba(255,255,255,0.82);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s, gap 0.15s;
}
.fp-link-white:hover { color: var(--fp-white); gap: 0.625rem; }

/* ─── 13. IMÁGENES / PLACEHOLDERS ───────────────────────── */
.fp-img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--fp-radius);
}

.fp-img-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--fp-bg-alt);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fp-text-muted);
  font-size: 0.875rem;
}

/* ─── 14. ACCORDION / FAQ ────────────────────────────────── */
.fp-accordion {
  border-top: 1px solid var(--fp-border);
}

.fp-accordion-item {
  border-bottom: 1px solid var(--fp-border);
}

.fp-accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
  color: var(--fp-text);
  transition: color 0.15s;
}
.fp-accordion-trigger:hover,
.fp-accordion-trigger:focus,
.fp-accordion-trigger:active { 
  background: transparent;
  color: var(--fp-cyan);
  outline: none;
}
.fp-accordion-trigger[aria-expanded="true"] {
  color: var(--fp-cyan);
}

.fp-acc-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: var(--fp-dark-blue);
  transition: transform 0.22s ease;
}
.fp-accordion-trigger[aria-expanded="true"] .fp-acc-icon {
  transform: rotate(45deg);
}

.fp-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.fp-accordion-panel.open { grid-template-rows: 1fr; }
.fp-accordion-panel-inner { overflow: hidden; }
.fp-accordion-panel p {
  padding: 0 0 1.5rem;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--fp-text-muted);
  line-height: 1.75;
}

/* ─── 15. FORMULARIO ─────────────────────────────────────── */
.fp-form { display: grid; gap: 1.125rem; }

.fp-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.125rem;
}
@media (min-width: 640px) { .fp-form-row { grid-template-columns: 1fr 1fr; } }

.fp-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fp-text);
  margin-bottom: 0.375rem;
}

.fp-form input,
.fp-form textarea,
.fp-form select {
  width: 100%;
  border: 1.5px solid var(--fp-border);
  border-radius: var(--fp-radius);
  padding: 0.625rem 0.875rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--fp-text);
  background: var(--fp-white);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fp-form input:focus,
.fp-form textarea:focus,
.fp-form select:focus {
  border-color: var(--fp-dark-blue);
  box-shadow: 0 0 0 3px rgba(27,58,107,0.1);
}
.fp-form textarea { resize: vertical; min-height: 130px; }
.fp-form input::placeholder,
.fp-form textarea::placeholder { color: #9CA3AF; }

/* ─── 16. CARDS DE SECTOR / MATERIAL ────────────────────── */
.fp-sector-card {
  border-radius: var(--fp-radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s;
  box-shadow: var(--fp-shadow-sm);
}
.fp-sector-card:hover { box-shadow: var(--fp-shadow-hover); }

.fp-sector-card img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}

.fp-sector-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.fp-sector-card-body h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.375rem;
}
.fp-sector-card-body p {
  font-size: 0.875rem;
  color: var(--fp-text-muted);
  margin: 0;
  line-height: 1.55;
}

/* ─── 16b. IMG CARDS (servicios / materiales) ───────────── */
.fp-img-card {
  display: flex;
  flex-direction: column;
}

.fp-img-card > div:first-child {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--fp-bg-alt);
  border-radius: var(--fp-radius-lg) var(--fp-radius-lg) 0 0;
}

.fp-img-card-body {
  padding: 1.25rem 0 0;
}
.fp-img-card-body h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.375rem;
  color: var(--fp-text);
}
.fp-img-card-body p {
  font-size: 0.875rem;
  color: var(--fp-text-muted);
  margin: 0;
  line-height: 1.55;
}

/* Compat: fp-stat con h3/p directos (page-about.php) */
.fp-stat > h3 {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fp-cyan);
  line-height: 1;
  margin: 0 0 0.375rem;
}
.fp-stat > p {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fp-text-muted);
  margin: 0;
}

/* ─── 17. LOGOS BAR ──────────────────────────────────────── */
.fp-logos-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: center;
  justify-content: center;
}
.fp-logos-bar img {
  max-height: 3rem;
  width: auto;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.2s, filter 0.2s;
}
.fp-logos-bar img:hover { opacity: 0.85; filter: none; }

/* ─── 18. FOOTER ─────────────────────────────────────────── */
.fp-footer {
  background: var(--fp-bg-dark);
  color: rgba(255,255,255,0.75);
}


.fp-footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 1.5rem;
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
  align-items: start;
}
@media (min-width: 768px) { .fp-footer-links { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .fp-footer-links { grid-template-columns: 1.3fr repeat(4, 1fr); align-items: start; } }

.fp-footer-logo { grid-column: 1 / -1; }
@media (min-width: 1024px) { .fp-footer-logo { grid-column: 1; padding-top: 0.125rem; } }
.fp-footer-logo img { height: 2rem; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }

.fp-footer-col h4 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 1rem;
}
.fp-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.fp-footer-col ul a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.15s;
}
.fp-footer-col ul a:hover { color: var(--fp-white); }

.fp-footer-bottom {
  border-top: 1px solid var(--fp-border-dark);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .fp-footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.fp-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
}
.fp-footer-legal a {
  color: rgba(255,255,255,0.4);
  text-decoration: underline;
  transition: color 0.15s;
}
.fp-footer-legal a:hover { color: rgba(255,255,255,0.75); }

.fp-footer-social { display: flex; gap: 1rem; }
.fp-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: rgba(255,255,255,0.45);
  transition: color 0.15s;
}
.fp-footer-social a:hover { color: var(--fp-white); }
.fp-footer-social svg { width: 1.125rem; height: 1.125rem; }

/* ─── 19. POST CONTENT ───────────────────────────────────── */
.fp-post-content {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--fp-text);
}
.fp-post-content h2 {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 0.875rem;
  color: var(--fp-dark-blue);
}
.fp-post-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.75rem;
}
.fp-post-content p { margin: 0 0 1.375rem; }
.fp-post-content ul,
.fp-post-content ol { margin: 0 0 1.375rem 1.375rem; }
.fp-post-content li { margin-bottom: 0.375rem; }
.fp-post-content a { color: var(--fp-dark-blue); text-decoration: underline; text-underline-offset: 3px; }
.fp-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--fp-radius-lg);
  margin: 2rem 0;
}
.fp-post-content blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.75rem;
  border-left: 3px solid var(--fp-cyan);
  background: var(--fp-bg-alt);
  border-radius: 0 var(--fp-radius) var(--fp-radius) 0;
  font-size: 1.0625rem;
  color: var(--fp-text-muted);
  font-style: italic;
}

/* ─── 20. UTILIDADES ─────────────────────────────────────── */
.fp-text-center { text-align: center; }
.fp-mx-auto { margin-inline: auto; }

/* Divisor sutil */
.fp-divider { height: 1px; background: var(--fp-border); margin: 0; }

/* Separador visual entre secciones de contact */
.fp-info-card {
  background: var(--fp-bg-alt);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  padding: 1.75rem;
}

.fp-highlight-card {
  border: 1px solid rgba(0,111,223,0.25);
  border-radius: var(--fp-radius-lg);
  padding: 1.75rem;
  background: rgba(75,184,212,0.04);
}

/* Chip de material / enlace */
.fp-chip {
  display: block;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fp-chip:hover {
  border-color: var(--fp-dark-blue);
  box-shadow: var(--fp-shadow-sm);
}
.fp-chip h3 { font-size: 0.9375rem; font-weight: 700; color: var(--fp-dark-blue); margin: 0 0 0.25rem; }
.fp-chip p  { font-size: 0.8125rem; color: var(--fp-text-muted); margin: 0; line-height: 1.5; }

/* Breadcrumb */
.fp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--fp-text-muted);
  margin-bottom: 1.5rem;
}
.fp-breadcrumb a { color: var(--fp-text-muted); text-decoration: none; }
.fp-breadcrumb a:hover { color: var(--fp-dark-blue); }
.fp-breadcrumb .sep { opacity: 0.5; }

/* ─── 21. PÁGINA CONTACTO ────────────────────────────────── */

/* Intro block above pillars */
.fp-contact-intro {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 3rem;
}
.fp-contact-intro .fp-lead {
  margin: 0 auto;
  color: var(--fp-text-muted);
}

/* Contact pillars (3-col cards) */
.fp-contact-pillar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 2rem;
  background: var(--fp-white);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow-sm);
  transition: box-shadow 0.2s;
}
.fp-contact-pillar:hover { box-shadow: var(--fp-shadow-hover); }

.fp-contact-pillar-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(75,184,212,0.1);
  border-radius: var(--fp-radius-lg);
  color: var(--fp-cyan);
  flex-shrink: 0;
}
.fp-contact-pillar-icon svg { width: 1.5rem; height: 1.5rem; }

.fp-contact-pillar .fp-h3 { margin: 0.25rem 0 0; font-size: 1.125rem; }
.fp-contact-pillar p { color: var(--fp-text-muted); font-size: 0.9375rem; margin: 0; line-height: 1.6; }

.fp-contact-link {
  color: var(--fp-dark-blue);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid var(--fp-cyan);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
  word-break: break-all;
}
.fp-contact-link:hover { color: var(--fp-cyan); border-color: var(--fp-cyan); }

/* Centered form wrapper */
.fp-contact-form-wrap { max-width: 52rem; margin: 0 auto; }

.fp-contact-form-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.fp-contact-form-header .fp-h2 { margin: 0.5rem 0 0.75rem; }
.fp-contact-form-header .fp-lead { color: var(--fp-text-muted); margin: 0; }

/* ─── Formulario CF7 — estilo shadcn (contacto + presupuesto) ─── */
/* CF7 emite todos los campos dentro de un solo <p> con <br>: forzamos
   un layout limpio con márgenes uniformes y ocultamos los <br>. */
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form { display: block; }
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form p { margin: 0; }
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form br { display: none; }
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .wpcf7-form-control-wrap:not(.honeypot-668) { display: block; margin-bottom: 1rem; }

/* Inputs / textarea / select */
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form input[type="text"],
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form input[type="email"],
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form input[type="tel"],
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form select,
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form textarea {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fp-heading);
  background: var(--fp-white);
  border: 1px solid var(--fp-border);
  border-radius: 0.5rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form textarea {
  height: auto;
  min-height: 7.5rem;
  padding: 0.625rem 0.75rem;
  line-height: 1.6;
  resize: vertical;
}
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form ::placeholder { color: var(--fp-text-muted); opacity: 1; }
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form input:focus,
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form select:focus,
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form textarea:focus {
  border-color: var(--fp-brand);
  box-shadow: 0 0 0 2px var(--fp-surface), 0 0 0 4px rgba(0,111,223,0.35);
}

/* File input */
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form input[type="file"] {
  width: 100%;
  font-size: 0.8125rem;
  color: var(--fp-text-muted);
  background: var(--fp-white);
  border: 1px dashed var(--fp-border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fp-heading);
  background: var(--fp-bg-subtle);
  border: 1px solid var(--fp-border);
  border-radius: 0.375rem;
  cursor: pointer;
}

/* Labels de campo (p.ej. "Adjuntar archivo") */
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fp-heading);
  margin-bottom: 0.375rem;
}

/* Checkboxes personalizados + texto legal */
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .wpcf7-list-item { display: block; margin: 0; }
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  font-weight: 400;
}
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0.15rem 0 0;
  border: 1px solid var(--fp-border);
  border-radius: 0.25rem;
  background: var(--fp-white);
  cursor: pointer;
  position: relative;
}
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form input[type="checkbox"]:checked {
  background: var(--fp-brand);
  border-color: var(--fp-brand);
}
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .wpcf7-list-item-label,
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .legal,
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .legal a {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fp-text-muted);
}
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .legal { display: block; margin: 0; }
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .legal a { color: var(--fp-brand); text-decoration: underline; }
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .padding20 small {
  display: block;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--fp-text-muted);
  margin-top: 0.5rem;
}

/* Grupo legal: cada checkbox en su línea; enlace de privacidad junto a su casilla */
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .legal { margin: 0.25rem 0 0.25rem; }
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .legal p { position: relative; }
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .legal .wpcf7-form-control-wrap { display: block; margin: 0 0 0.6rem; }
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .legal .wpcf7-form-control-wrap[data-name="legal"] { display: inline; margin: 0; }
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .legal .wpcf7-form-control-wrap[data-name="legal"] .wpcf7-list-item { display: inline; }
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .legal .wpcf7-form-control-wrap[data-name="legal"] label { display: inline-flex; align-items: center; vertical-align: middle; }
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .legal .wpcf7-form-control-wrap[data-name="legal"] input[type="checkbox"] { margin-top: 0; }
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .legal .font-13 { display: inline; vertical-align: middle; }
/* El aviso "El campo es obligatorio." no debe empujar el texto siguiente a otra línea: se posiciona flotando debajo, sin ocupar espacio en el flujo. */
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .legal .wpcf7-form-control-wrap[data-name="legal"] .wpcf7-not-valid-tip {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0.15rem;
  white-space: nowrap;
}
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form .legal .wpcf7-form-control-wrap[data-name="comunicaciones"] { display: block; margin: 0.6rem 0 0; }

/* Submit — shadcn primary */
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  margin-top: 0.5rem;
  padding: 0 1.25rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fp-white);
  background: var(--fp-brand);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.15s;
}
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-form input[type="submit"]:hover { background: var(--fp-brand-hover); }
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-not-valid-tip { font-size: 0.8125rem; color: #DC2626; margin-top: 0.25rem; }
:is(.fp-contact-form-body, .fp-contact-form-card) .wpcf7-response-output {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  border: 1px solid var(--fp-border);
  margin-top: 0.5rem;
}

/* Map + contact details 2-col grid */
.fp-contact-map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fp-gap);
  align-items: start;
}
@media (max-width: 767px) {
  .fp-contact-map-grid { grid-template-columns: 1fr; }
}

/* Left details column */
.fp-contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.fp-contact-detail-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.fp-contact-detail-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(75,184,212,0.1);
  border-radius: var(--fp-radius);
  color: var(--fp-cyan);
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.fp-contact-detail-icon svg { width: 1.125rem; height: 1.125rem; }

.fp-contact-detail-item div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.fp-contact-detail-item strong {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fp-text-muted);
}
.fp-contact-detail-item a,
.fp-contact-detail-item span {
  font-size: 0.9375rem;
  color: var(--fp-text);
  text-decoration: none;
  line-height: 1.5;
}
.fp-contact-detail-item a:hover { color: var(--fp-dark-blue); text-decoration: underline; }

/* Right map area */
.fp-contact-map {
  display: block;
  width: 100%;
  min-height: 60vh;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  overflow: hidden;
  box-shadow: var(--fp-shadow-sm);
}
.fp-contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 60vh;
  display: block;
  border: 0;
}

/* ── Contacto: bloc 2 columnes (Visítanos + formulari) ───── */
.fp-contact-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 900px) {
  .fp-contact-split { grid-template-columns: 1fr 1.1fr; gap: 4rem; }
}
.fp-contact-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.fp-contact-info-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.fp-contact-info-icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: var(--fp-brand-tint);
  color: var(--fp-brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-contact-info-icon svg { width: 1.375rem; height: 1.375rem; }
.fp-contact-info-list li > div { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.fp-contact-info-list strong {
  font-size: 0.9375rem;
  font-weight: var(--fp-w-semibold);
  color: var(--fp-heading);
  margin-bottom: 0.25rem;
}
.fp-contact-info-list a,
.fp-contact-info-list span {
  font-size: 0.9375rem;
  color: var(--fp-text-muted);
  line-height: 1.5;
  word-break: break-word;
  text-decoration: none;
}
.fp-contact-info-list a:hover { color: var(--fp-action); text-decoration: none; }

.fp-contact-form-card {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: 16px;
  padding: 2.25rem;
}
@media (max-width: 480px) { .fp-contact-form-card { padding: 1.5rem; } }

/* ─── 22. PAGE SERVICIOS (listado) ──────────────────────── */

/* Hero split: H1 left | tagline + lead right */
.fp-hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .fp-hero-split {
    grid-template-columns: 1fr 1fr;
    align-items: flex-end;
    gap: var(--fp-gap);
  }
}
.fp-hero-split-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Service listing card — full card is a link */
.fp-service-card {
  display: flex;
  flex-direction: column;
  background: var(--fp-white);
  border-radius: var(--fp-radius-lg);
  overflow: hidden;
  box-shadow: var(--fp-shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}
.fp-service-card:hover {
  box-shadow: var(--fp-shadow-hover);
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
}

/* Image area */
.fp-service-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.fp-service-card-img-empty {
  background: var(--fp-bg-alt);
}
.fp-service-card:hover .fp-service-card-img:not(.fp-service-card-img-empty) {
  transform: scale(1.03);
}

/* Body */
.fp-service-card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fp-service-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fp-text);
  margin: 0;
  transition: color 0.15s;
}
.fp-service-card:hover .fp-service-card-title { color: var(--fp-dark-blue); }

.fp-service-card-text {
  font-size: 0.9rem;
  color: var(--fp-text-muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.fp-service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--fp-dark-blue);
  margin-top: 0.375rem;
  transition: gap 0.15s;
}
.fp-service-card:hover .fp-service-card-link { gap: 0.55rem; }

/* ─── 23. SERVICIO INTERIOR + LISTADO ───────────────────── */

/* Hero modifier: service pages have more vertical padding */
.fp-hero--service,
.fp-hero--blog {
  padding: 2rem 0 4.5rem;
  min-height: clamp(560px, 60vh, 700px);
  height: auto;
}
@media (max-width: 767px) {
  .fp-hero--service,
  .fp-hero--blog { padding: 1.5rem 0 3rem; min-height: clamp(440px, 65vh, 560px); height: auto; }
}
.fp-hero--service .fp-hero-content { max-width: 50%; }
@media (max-width: 767px) { .fp-hero--service .fp-hero-content { max-width: 100%; } }

/* Breadcrumb on dark bg */
.fp-breadcrumb-dark,
.fp-breadcrumb-dark a,
.fp-breadcrumb-dark span { color: rgba(255,255,255,0.65); }
.fp-breadcrumb-dark { margin-bottom: 1.75rem; }
.fp-breadcrumb-dark a:hover { color: #fff; }
.fp-breadcrumb-dark [aria-current="page"] { color: rgba(255,255,255,0.9); }

/* ── Process steps (cómo funciona) ─────────────────────────── */
.fp-process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .fp-process-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
  }
  .fp-process-step { flex: 1; min-width: 0; }
}

.fp-process-step-top {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.fp-process-step-num {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--fp-dark-blue);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px rgba(27,58,107,0.12);
}

.fp-process-connector {
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, rgba(27,58,107,0.3), var(--fp-border));
  margin: 0 0.875rem;
  display: none;
}
@media (min-width: 768px) {
  .fp-process-connector { display: block; }
  .fp-process-step:last-child .fp-process-connector { display: none; }
}

.fp-process-step-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--fp-dark-blue);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  padding-right: 1.5rem;
}
.fp-process-step-text {
  font-size: 0.9375rem;
  color: var(--fp-text-muted);
  line-height: 1.65;
  margin: 0;
  padding-right: 1.5rem;
}
@media (max-width: 767px) {
  .fp-process-step-title,
  .fp-process-step-text { padding-right: 0; }
}

/* ── Especificaciones técnicas ──────────────────────────────── */
.fp-specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.fp-specs-table tbody tr {
  border-bottom: 1px solid var(--fp-border);
  transition: background 0.1s;
}
.fp-specs-table tbody tr:first-child { border-top: 1px solid var(--fp-border); }
.fp-specs-table tbody tr:hover { background: rgba(75,184,212,0.04); }
.fp-specs-table th,
.fp-specs-table td {
  padding: 0.875rem 1rem;
  text-align: left;
  vertical-align: top;
}
.fp-specs-table th {
  width: 40%;
  font-weight: 700;
  color: var(--fp-dark-blue);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fp-specs-table td { color: var(--fp-text-muted); line-height: 1.55; }

/* ── Sector chips ───────────────────────────────────────────── */
.fp-sector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.fp-sector-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--fp-border);
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fp-dark-blue);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  background: var(--fp-white);
}
.fp-sector-chip:hover {
  background: var(--fp-dark-blue);
  border-color: var(--fp-dark-blue);
  color: #fff;
}

/* ── Service card dark-number placeholder (listado page) ──── */
.fp-service-card-dark-num {
  background: var(--fp-dark-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-service-card-dark-num span {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--fp-cyan);
  opacity: 0.35;
  line-height: 1;
  letter-spacing: -0.03em;
  user-select: none;
}

/* ─── 25. SECTOR CARDS (página servicio) ────────────────── */

.fp-sector-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .fp-sector-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .fp-sector-cards { grid-template-columns: repeat(4, 1fr); }
}
.fp-sector-card {
  display: block;
  text-decoration: none;
  border-radius: var(--fp-radius);
  overflow: hidden;
  border: 1px solid var(--fp-border);
  background: #fff;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.fp-sector-card:hover {
  box-shadow: var(--fp-shadow);
  transform: translateY(-3px);
  border-color: var(--fp-cyan);
}
.fp-sector-card-img {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  position: relative;
  background: var(--fp-light-bg);
}
.fp-sector-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.fp-sector-card:hover .fp-sector-card-img img {
  transform: scale(1.04);
}
.fp-sector-card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--fp-dark-blue) 0%, rgba(75,184,212,0.35) 100%);
}
.fp-sector-card-label {
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fp-dark-blue);
  line-height: 1.3;
}

/* ─── 26. HOME — trust bar + material cards ─────────────── */

/* Trust bar strip below hero */
.fp-trust-bar-section {
  border-bottom: 1px solid var(--fp-border);
  padding: 1.5rem 0;
  background: #f8fafb;
}
.fp-trust-bar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: flex-start;
  justify-content: space-between;
}
.fp-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1;
  min-width: 12rem;
}
.fp-trust-icon {
  width: 24px;
  height: 24px;
  background: none;
  color: #006FDF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0;
}
.fp-trust-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}
.fp-trust-item-body strong {
  display: block;
  font-weight: 700;
  color: var(--fp-text);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.25rem;
}
.fp-trust-item-body span {
  display: block;
  color: var(--fp-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Material cards (Grid dinámico con imagen - Home & Catálogo) */
.fp-mat-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem 1.5rem;
}
@media (min-width: 640px)  { .fp-mat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fp-mat-grid { grid-template-columns: repeat(4, 1fr); } }

.fp-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
}
@media (max-width: 1200px) { .fp-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .fp-grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .fp-grid-5 { grid-template-columns: 1fr; } }

.fp-mat.fp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.fp-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem; }

@media (max-width: 1024px) {
  .fp-grid-4, .fp-mat.fp-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .fp-grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .fp-grid-4, .fp-mat.fp-grid-4 { grid-template-columns: 1fr; }
  .fp-grid-6 { grid-template-columns: repeat(2, 1fr); }
}

/* Tarjetas de aplicación con icono */
.fp-app-card-icon {
  background: #fff;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  padding: 1.25rem;
  text-align: left;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.fp-app-card-icon:hover {
  transform: translateY(-4px);
  border-color: var(--fp-brand);
}
.fp-app-icon-box {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 1rem;
  color: #006FDF;
}
.fp-app-card-icon h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--fp-text);
  line-height: 1.3;
}
.fp-app-card-icon p {
  font-size: 0.875rem;
  color: var(--fp-text-muted);
  margin: 0;
  line-height: 1.5;
}

.fp-mat-grid-5 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.25rem;
}
@media (min-width: 576px)  { .fp-mat-grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px)  { .fp-mat-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .fp-mat-grid-5 { grid-template-columns: repeat(5, 1fr); } }

.fp-mat-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
  height: 100%;
  border: 1px solid rgba(0,0,0,0.05);
}

.fp-mat-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: #f1f5f9;
}

.fp-mat-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.fp-mat-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.fp-mat-card-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: #111827;
  line-height: 1.2;
}

.fp-mat-card-body p {
  font-size: 0.875rem;
  color: #4B5563;
  line-height: 1.5;
  margin: 0 0 1.5rem;
  flex: 1;
  /* Retallat net a 2 línies SENSE punts suspensius (evitem -webkit-line-clamp perquè sempre pinta l'ellipsis) */
  overflow: hidden;
  max-height: calc(2 * 1.5em);
}

.fp-mat-card-link {
  font-size: 0.875rem;
  font-weight: 700;
  color: #106EEB;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: gap 0.2s;
}

.fp-mat-card:hover .fp-mat-card-link {
  gap: 0.75rem;
}

/* Hover effect: modern & subtle */
.fp-mat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.fp-mat-card:hover .fp-mat-card-img img {
  transform: scale(1.08);
}

.fp-mat-card:hover h3 {
  color: #106EEB;
}

/* ─── 30. PROYECTOS ─────────────────────────────────────── */

/* Hero meta row */
.fp-proy-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: 1.5rem;
}
.fp-proy-hero-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.9);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Summary grid */
.fp-proy-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .fp-proy-summary-grid { grid-template-columns: 1fr 340px; }
}

.fp-proy-block { margin-bottom: 2.5rem; }
.fp-proy-block:last-child { margin-bottom: 0; }
.fp-proy-block h2 { margin: 0 0 0.75rem; }

/* Ficha card */
.fp-proy-ficha-card {
  background: var(--fp-light-bg);
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  padding: 1.75rem;
  position: sticky;
  top: 88px;
}
.fp-proy-ficha-table {
  width: 100%;
  border-collapse: collapse;
}
.fp-proy-ficha-table th,
.fp-proy-ficha-table td {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--fp-border);
  font-size: 0.9375rem;
  text-align: left;
}
.fp-proy-ficha-table th {
  font-weight: 600;
  color: var(--fp-text-muted);
  width: 45%;
}
.fp-proy-ficha-table td { font-weight: 500; color: var(--fp-text); }
.fp-proy-ficha-table tr:last-child th,
.fp-proy-ficha-table tr:last-child td { border-bottom: none; }

/* Gallery */
.fp-proy-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) {
  .fp-proy-gallery { grid-template-columns: repeat(3, 1fr); }
}
.fp-proy-gallery-item {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.fp-proy-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.fp-proy-gallery-item:hover img { transform: scale(1.04); }

/* Process steps */
.fp-proy-step {
  padding: 2rem;
  background: var(--fp-light-bg);
  border: 1px solid var(--fp-border);
  border-radius: 8px;
}
.fp-proy-step-num {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--fp-cyan);
  line-height: 1;
  margin-bottom: 1rem;
}
.fp-proy-step h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--fp-dark-blue);
  margin: 0 0 0.625rem;
}
.fp-proy-step p {
  color: var(--fp-text-muted);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* Related cards */
.fp-proy-related-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: var(--fp-text);
  transition: box-shadow 0.2s, transform 0.2s;
}
.fp-proy-related-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.fp-proy-related-img { aspect-ratio: 16/9; overflow: hidden; }
.fp-proy-related-img img { width: 100%; height: 100%; object-fit: cover; }
.fp-proy-related-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.fp-proy-related-body h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--fp-dark-blue);
}

/* Project cards (archive + single related) */
.fp-proy-card {
  background: #fff;
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
.fp-proy-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.fp-proy-card-img {
  display: block;
  position: relative;
  padding-bottom: 60%;
  overflow: hidden;
  background: var(--fp-light-bg);
}
.fp-proy-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.fp-proy-card:hover .fp-proy-card-img img { transform: scale(1.04); }
.fp-proy-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
.fp-proy-card-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fp-proy-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fp-proy-card-title a { color: var(--fp-dark-blue); text-decoration: none; }
.fp-proy-card-title a:hover { color: var(--fp-cyan); }
.fp-proy-card-meta { font-size: 0.875rem; color: var(--fp-text-muted); margin: 0; }

/* Archive filter bar */
.fp-proy-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  padding: 1rem 0;
}
.fp-proy-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.fp-proy-filter-group label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fp-text-muted);
}
.fp-proy-filter-select {
  border: 1px solid var(--fp-border);
  border-radius: 6px;
  padding: 0.5rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--fp-text);
  background: #fff;
  cursor: pointer;
  min-width: 190px;
}
.fp-proy-filter-select:focus {
  outline: 2px solid var(--fp-cyan);
  outline-offset: 1px;
}
.fp-proy-filter-reset {
  font-size: 0.875rem;
  color: var(--fp-text-muted);
  text-decoration: underline;
  padding-bottom: 0.5rem;
}
.fp-proy-filter-reset:hover { color: var(--fp-dark-blue); }

/* ─── 31. QUIÉNES SOMOS ────────────────────────────────── */

/* Intro 2-col */
.fp-about-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 768px) {
  .fp-about-intro-grid { grid-template-columns: 1fr 1fr; }
}
.fp-about-intro-text .fp-prose p {
  color: var(--fp-text-muted);
  line-height: 1.8;
  margin: 0 0 1rem;
}
.fp-about-intro-text .fp-prose p:last-child { margin-bottom: 0; }
.fp-about-intro-img {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.fp-about-img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--fp-light-bg);
  border: 1px dashed var(--fp-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--fp-text-muted);
  font-size: 0.875rem;
  min-height: 280px;
}

.fp-about-founding-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(27,58,107,0.07);
  color: var(--fp-dark-blue);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 99px;
  border: 1px solid rgba(27,58,107,0.15);
}

/* Stats bar */
.fp-about-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (min-width: 768px) {
  .fp-about-stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.fp-about-stat {
  text-align: left;
  padding: 1.5rem 0;
}
.fp-about-stat strong {
  display: block;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--fp-cyan);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.fp-about-stat span {
  font-size: 0.9375rem;
  color: var(--fp-text-muted);
  line-height: 1.4;
}

/* Timeline vertical */
/* Timeline — "Nuestra historia" */
/* ── Historia timeline (alternado shadcn "Timeline 2") ───────
   Alternança per nth-child; escopat sota .fp-history perquè els
   noms genèrics (.card/.dot/.date) no col·lisionin. Tokens del tema:
   --border→--fp-border · --primary→--fp-brand · --muted→--fp-bg-subtle
   --foreground→--fp-heading · --card→--fp-surface · --radius→--fp-radius-card
   --muted-foreground→--fp-text-muted */
.fp-history .timeline {
  list-style: none;
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 1040px;
}
.fp-history .timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -1px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--fp-border);
}
.fp-history .timeline-item {
  position: relative;
  width: 50%;
  box-sizing: border-box;
  padding-bottom: 56px;
}
.fp-history .timeline-item:last-child { padding-bottom: 0; }
.fp-history .timeline-item:nth-child(odd)  { left: 50%; padding-left: 44px; }
.fp-history .timeline-item:nth-child(even) { left: 0;   padding-right: 44px; text-align: right; }

.fp-history .dot {
  position: absolute;
  top: 10px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--fp-brand);
}
.fp-history .timeline-item:nth-child(odd)  .dot { left: -6.5px; }
.fp-history .timeline-item:nth-child(even) .dot { right: -6.5px; }

.fp-history .date {
  position: absolute;
  top: 1px;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--fp-bg-subtle);
  color: var(--fp-heading);
  font-variant-numeric: tabular-nums;
}
.fp-history .timeline-item:nth-child(odd)  .date { right: calc(100% + 18px); }
.fp-history .timeline-item:nth-child(even) .date { left: calc(100% + 18px); }
.fp-history .timeline-item:first-child .date { background: var(--fp-brand); color: #fff; }

.fp-history .card {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-card);
  padding: 28px;
  /* 0 sombras */
}
.fp-history .card h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 10px;
  color: var(--fp-heading);
  line-height: 1.3;
}
.fp-history .card p {
  font-size: 15px;
  color: var(--fp-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* Reveal opcional, respectant prefers-reduced-motion */
.fp-history .timeline-item { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .fp-history.reveal .timeline-item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .fp-history.reveal .timeline-item.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* Mòbil <768px: columna única, línia a l'esquerra */
@media (max-width: 768px) {
  .fp-history .timeline::before { left: 6px; margin-left: 0; }
  .fp-history .timeline-item,
  .fp-history .timeline-item:nth-child(odd),
  .fp-history .timeline-item:nth-child(even) {
    width: 100%;
    left: 0;
    padding-left: 32px;
    padding-right: 0;
    padding-bottom: 40px;
    text-align: left;
  }
  .fp-history .timeline-item:nth-child(odd)  .dot,
  .fp-history .timeline-item:nth-child(even) .dot { left: 0; right: auto; }
  .fp-history .date { position: static; margin-bottom: 12px; }
  .fp-history .timeline-item:nth-child(odd)  .date,
  .fp-history .timeline-item:nth-child(even) .date { left: auto; right: auto; }
}

/* Team cards */
.fp-about-team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.fp-about-team-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.09);
  transform: translateY(-2px);
}
.fp-about-team-photo-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.25rem;
  border: 3px solid var(--fp-border);
}
.fp-about-team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fp-about-team-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.fp-about-team-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fp-dark-blue);
}
.fp-about-team-role {
  font-size: 0.875rem;
  color: var(--fp-text-muted);
}
.fp-about-team-li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fp-dark-blue);
  text-decoration: none;
  border: 1px solid var(--fp-border);
  border-radius: 99px;
  padding: 0.25rem 0.75rem;
  transition: border-color 0.15s, color 0.15s;
}
.fp-about-team-li:hover {
  border-color: var(--fp-dark-blue);
  color: var(--fp-cyan);
}

/* Certifications strip */
.fp-about-cert-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 3rem;
}
.fp-about-cert-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fp-text-muted);
  text-align: center;
  max-width: 100px;
}
.fp-about-cert-logo { max-height: 60px; width: auto; object-fit: contain; }
.fp-about-cert-logo-fallback {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(75,184,212,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Testimonials */
.fp-about-testimonial {
  background: #fff;
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.fp-about-testimonial-stars { display: flex; gap: 2px; }
.fp-about-testimonial-quote {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--fp-text);
  margin: 0;
  font-style: normal;
  flex: 1;
}
.fp-about-testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fp-border);
}
.fp-about-testimonial-logo {
  max-height: 28px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.7;
}
.fp-about-testimonial-author div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.fp-about-testimonial-author strong {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--fp-dark-blue);
}
.fp-about-testimonial-author span {
  font-size: 0.8125rem;
  color: var(--fp-text-muted);
}

/* ─── 24. MATERIAL CATALOG CARDS (page-materiales-listado.php) ───────────── */
.fp-mat-catalog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  text-decoration: none;
  color: var(--fp-text);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.fp-mat-catalog-card:hover {
  border-color: var(--fp-cyan);
  box-shadow: var(--fp-shadow);
  transform: translateY(-3px);
}
.fp-mat-catalog-card-img {
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.fp-mat-catalog-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.35s;
}
.fp-mat-catalog-card:hover .fp-mat-catalog-card-img img { transform: scale(1.04); }
.fp-mat-catalog-card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--fp-dark-blue) 0%, rgba(75,184,212,0.4) 100%);
}
.fp-mat-catalog-card-body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.fp-mat-catalog-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--fp-dark-blue);
  margin: 0 0 0.5rem;
}
.fp-mat-catalog-card-text {
  font-size: 0.875rem;
  color: var(--fp-text-muted);
  line-height: 1.6;
  margin: 0 0 1rem;
  flex: 1;
}
.fp-mat-catalog-card-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fp-cyan);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
}
/* Compact variant (without image) */
.fp-mat-catalog-card--compact .fp-mat-catalog-card-body {
  padding: 1.25rem;
}

/* ─── 25. RESPONSIVE HELPERS ─────────────────────────────── */
@media (max-width: 767px) {
  :root { --fp-section-py: 56px; }
  .fp-hero-clean { padding-block: 56px; }
  .fp-stats-bar .fp-stat { border-right: none; border-bottom: 1px solid var(--fp-border); }
  .fp-stats-bar .fp-stat:last-child { border-bottom: none; }
}

/* ─── 26. PÁGINA PRESUPUESTO ─────────────────────────────── */

/* 2-col grid: formulario | info */
.fp-presupuesto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fp-gap);
  align-items: start;
}
@media (max-width: 767px) {
  .fp-presupuesto-grid { grid-template-columns: 1fr; }
}

/* Columna de info */
.fp-presupuesto-info-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Checklist */
.fp-presupuesto-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fp-presupuesto-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--fp-text);
  line-height: 1.5;
}
.fp-presupuesto-check {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--fp-cyan);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.125rem;
}

/* Tiempo de respuesta */
.fp-presupuesto-response {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--fp-dark-blue);
  border-radius: var(--fp-radius-lg);
  padding: 1.25rem 1.5rem;
}
.fp-presupuesto-response-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  flex: 1;
}
.fp-presupuesto-response-time {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--fp-cyan);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Teléfono directo */
.fp-presupuesto-phone-block {
  border: 2px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  padding: 1.25rem 1.5rem;
  background: #fff;
}
.fp-presupuesto-phone-label {
  font-size: 0.875rem;
  color: var(--fp-text-muted);
  margin: 0 0 0.375rem;
}
.fp-presupuesto-phone-number {
  display: block;
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--fp-dark-blue);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: color 0.15s;
}
.fp-presupuesto-phone-number:hover { color: var(--fp-cyan); }

/* Stats cyan on dark */
.fp-stats-bar--cyan .fp-stat-number {
  display: block;
  font-size: 2rem;
  font-weight: var(--fp-w-bold);
  color: var(--fp-cyan);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.375rem;
}
.fp-stats-bar--cyan .fp-stat-label {
  display: block;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.72);
}
.fp-stats-bar--cyan .fp-stat {
  border-right-color: rgba(255,255,255,0.12);
}

/* Pedidos pequeños card */
.fp-presupuesto-small-orders {
  max-width: 52rem;
  margin: 0 auto;
}
.fp-presupuesto-small-orders-inner {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  padding: 2.5rem;
  box-shadow: var(--fp-shadow);
}
@media (max-width: 540px) {
  .fp-presupuesto-small-orders-inner { flex-direction: column; padding: 1.5rem; }
}
.fp-presupuesto-small-orders-icon {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--fp-light-bg);
  border-radius: var(--fp-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fp-dark-blue);
}
.fp-presupuesto-small-orders-icon svg { width: 1.75rem; height: 1.75rem; }

/* ─── 27. TESTIMONIALES ─────────────────────────────────── */
.fp-testimonial-card {
  margin: 0;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  border-left: 4px solid var(--fp-cyan);
  box-shadow: var(--fp-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fp-testimonial-quote {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--fp-text);
  margin: 0 0 1.5rem;
  font-style: italic;
  flex: 1;
}
.fp-testimonial-quote::before {
  content: '\201C';
  color: var(--fp-cyan);
  font-size: 2rem;
  line-height: 0;
  vertical-align: -0.6rem;
  margin-right: 0.25rem;
  font-style: normal;
}
.fp-testimonial-footer {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fp-border);
}
.fp-testimonial-author {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--fp-dark-blue);
}
.fp-testimonial-role,
.fp-testimonial-company {
  font-size: 0.8125rem;
  color: var(--fp-text-muted);
}

/* ─── 28. PÁGINA SECTOR ─────────────────────────────────── */

/* Intro 2 columnas */
.fp-sector-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;
}
@media (max-width: 767px) {
  .fp-sector-intro-grid { grid-template-columns: 1fr; gap: 2rem; }
  .fp-sector-intro-grid > div:last-child { order: -1; }
}

/* App cards en grid 3 */
.fp-sector-app-card {
  background: #fff;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  overflow: hidden;
  box-shadow: var(--fp-shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}
.fp-sector-app-card:hover {
  box-shadow: var(--fp-shadow-md);
  transform: translateY(-3px);
}
.fp-sector-app-card-img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}
.fp-sector-app-card-img--placeholder {
  background: linear-gradient(135deg, var(--fp-dark-blue) 0%, rgba(75,184,212,0.4) 100%);
}
.fp-sector-app-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.fp-sector-app-card-body h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.375rem;
  color: var(--fp-dark-blue);
}
.fp-sector-app-card-body p {
  font-size: 0.875rem;
  color: var(--fp-text-muted);
  margin: 0;
  line-height: 1.55;
}

/* Material chip links en grid 4 */
.fp-mat-sector-link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative;
}
.fp-mat-sector-link:hover {
  border-color: var(--fp-cyan);
  box-shadow: var(--fp-shadow);
  transform: translateY(-2px);
}
.fp-mat-sector-link-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--fp-radius);
  background: var(--fp-light-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fp-dark-blue);
  margin-bottom: 0.25rem;
}
.fp-mat-sector-link-icon svg { width: 1.125rem; height: 1.125rem; }
.fp-mat-sector-link h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--fp-dark-blue);
  margin: 0;
}
.fp-mat-sector-link p {
  font-size: 0.8125rem;
  color: var(--fp-text-muted);
  margin: 0;
  line-height: 1.5;
  flex: 1;
}
.fp-mat-sector-link-arrow {
  margin-top: 0.75rem;
  color: var(--fp-cyan);
  opacity: 0;
  transition: opacity 0.15s;
}
.fp-mat-sector-link:hover .fp-mat-sector-link-arrow { opacity: 1; }

/* ─── 29. BLOG — LISTADO, SINGLE, AUTOR ─────────────────── */

/* Filtro de categorías */
.fp-filter-bar {
  background: var(--fp-white);
  border-bottom: 1px solid var(--fp-border);
  position: sticky;
  top: 72px;
  z-index: 100;
}
.fp-filter-pills {
  display: flex;
  gap: 0.5rem;
  padding: 0.875rem 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: wrap;
}
.fp-filter-pills::-webkit-scrollbar { display: none; }
.fp-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fp-text-muted);
  border: 1px solid var(--fp-border);
  border-radius: 99px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.fp-filter-pill:hover { color: var(--fp-dark-blue); border-color: var(--fp-dark-blue); }
.fp-filter-pill--active {
  color: var(--fp-white);
  background: var(--fp-dark-blue);
  border-color: var(--fp-dark-blue);
}
.fp-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(0,0,0,0.08);
  border-radius: 99px;
}
.fp-filter-pill--active .fp-filter-count { background: rgba(255,255,255,0.2); }

/* Blog card — autor + fecha */
.fp-blog-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 0.625rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fp-blog-card-title a { color: var(--fp-text); text-decoration: none; transition: color 0.15s; }
.fp-blog-card-title a:hover { color: var(--fp-dark-blue); }
.fp-blog-card-author {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--fp-border);
}
.fp-blog-card-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.fp-blog-card-byline { display: flex; flex-direction: column; line-height: 1.3; }
.fp-blog-card-author-name { font-size: 0.8125rem; font-weight: 600; color: var(--fp-text); }
.fp-blog-card-date { font-size: 0.75rem; color: var(--fp-text-muted); }
.fp-blog-card-cta { margin-top: 1rem; font-size: 0.875rem; }

/* Paginación */
.fp-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-top: 3rem;
}
.fp-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fp-text);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  text-decoration: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.fp-pagination .page-numbers:hover { color: var(--fp-dark-blue); border-color: var(--fp-dark-blue); }
.fp-pagination .page-numbers.current {
  background: var(--fp-dark-blue);
  color: var(--fp-white);
  border-color: var(--fp-dark-blue);
}
.fp-pagination .page-numbers.dots { border: none; min-width: auto; }
.fp-pagination .prev.page-numbers,
.fp-pagination .next.page-numbers {
  background: var(--fp-light-bg);
}

/* ══ SINGLE POST ══ */

/* Hero del post */
.fp-post-hero {
  padding-block: 3.5rem;
  background: var(--fp-light-bg);
  border-bottom: 1px solid var(--fp-border);
}

/* Byline (autor + fecha bajo el título) */
.fp-post-byline {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
}
.fp-post-byline-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--fp-border);
}
.fp-post-byline-name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--fp-dark-blue);
  text-decoration: none;
}
.fp-post-byline-name:hover { text-decoration: underline; }
.fp-post-byline-role {
  display: block;
  font-size: 0.8125rem;
  color: var(--fp-text-muted);
}
.fp-post-byline-date {
  display: block;
  font-size: 0.8125rem;
  color: var(--fp-text-muted);
}

/* Imagen destacada */
.fp-post-featured-img {
  max-height: 480px;
  overflow: hidden;
  border-radius: 0 0 var(--fp-radius-lg) var(--fp-radius-lg);
}

/* Layout 2 columnas */
.fp-single-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .fp-single-grid {
    grid-template-columns: 1fr 300px;
  }
}

/* Tags bajo el post */
.fp-post-tags {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fp-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.85rem;
}

/* Navegación post anterior / siguiente */
.fp-post-nav {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fp-border);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.fp-post-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fp-dark-blue);
  text-decoration: none;
  max-width: 48%;
  transition: opacity 0.15s;
}
.fp-post-nav-link:hover { opacity: 0.75; }
.fp-post-nav-link--next { margin-left: auto; text-align: right; }

/* ══ CARD AUTOR EEAT ══ */
.fp-author-eeat {
  display: flex;
  gap: 2rem;
  margin-top: 3rem;
  padding: 2rem;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  background: var(--fp-light-bg);
  align-items: flex-start;
  flex-wrap: wrap;
}
.fp-author-eeat-photo-wrap { flex-shrink: 0; }
.fp-author-eeat-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--fp-white);
  box-shadow: var(--fp-shadow-sm);
}
.fp-author-eeat-body { flex: 1; min-width: 200px; }
.fp-author-eeat-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.fp-author-eeat-name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--fp-dark-blue);
}
.fp-author-eeat-role {
  display: block;
  font-size: 0.875rem;
  color: var(--fp-text-muted);
  margin-top: 0.1rem;
}
.fp-author-eeat-exp {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fp-cyan);
  margin-top: 0.25rem;
}
.fp-author-eeat-bio {
  font-size: 0.9375rem;
  color: #4B5563;
  line-height: 1.7;
  margin: 0 0 1rem;
}

/* Fila de iconos sociales (EEAT + sidebar) */
.fp-author-socials-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.fp-author-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  color: var(--fp-text-muted);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.fp-author-social-icon:hover { color: var(--fp-dark-blue); border-color: var(--fp-dark-blue); }

/* Skills / especialidades */
.fp-skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.875rem;
}
.fp-skill-chip {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  background: rgba(75,184,212,0.1);
  color: var(--fp-dark-blue);
  border: 1px solid rgba(75,184,212,0.3);
  border-radius: 99px;
}

/* ══ SIDEBAR ══ */
.fp-sidebar { }

.fp-sidebar-sticky {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.fp-sidebar-box {
  background: var(--fp-white);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  padding: 1.5rem;
}

.fp-sidebar-box-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fp-text-muted);
  margin: 0 0 1rem;
}

/* Autor sidebar */
.fp-sidebar-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}
.fp-sidebar-author-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.fp-sidebar-author-name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--fp-dark-blue);
  text-decoration: none;
  line-height: 1.3;
}
.fp-sidebar-author-name:hover { text-decoration: underline; }
.fp-sidebar-author-role {
  display: block;
  font-size: 0.8125rem;
  color: var(--fp-text-muted);
}
.fp-sidebar-author-bio {
  font-size: 0.875rem;
  color: #4B5563;
  line-height: 1.65;
  margin: 0;
}

/* Related posts sidebar */
.fp-sidebar-related {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fp-sidebar-related-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.fp-sidebar-related-thumb {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: var(--fp-radius);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--fp-light-bg);
}
.fp-sidebar-related-info { flex: 1; min-width: 0; }
.fp-sidebar-related-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fp-text);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.15s;
}
.fp-sidebar-related-title:hover { color: var(--fp-dark-blue); }
.fp-sidebar-related-date { display: block; font-size: 0.75rem; color: var(--fp-text-muted); margin-top: 0.25rem; }

/* CTA box sidebar */
.fp-sidebar-cta-box {
  background: var(--fp-dark-blue);
  border-color: var(--fp-dark-blue);
}
.fp-sidebar-cta-box h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fp-white);
  margin: 0 0 0.625rem;
}
.fp-sidebar-cta-box p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.8);
  margin: 0 0 1.25rem;
  line-height: 1.6;
}

/* ══ PÁGINA DE AUTOR ══ */
.fp-author-hero {
  background: var(--fp-light-bg);
  border-bottom: 1px solid var(--fp-border);
  padding-block: 2rem;
}
.fp-author-hero-inner {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.fp-author-hero-photo-wrap { flex-shrink: 0; }
.fp-author-hero-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--fp-white);
  box-shadow: var(--fp-shadow-md);
}
.fp-author-hero-info { flex: 1; min-width: 260px; }
.fp-author-hero-role {
  font-size: 1.125rem;
  color: var(--fp-cyan);
  font-weight: 600;
  margin: 0.25rem 0 1.25rem;
}
.fp-author-hero-bio {
  font-size: 1rem;
  color: #4B5563;
  line-height: 1.75;
  margin: 0 0 1.75rem;
  max-width: 56rem;
}
.fp-author-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 1.5rem;
}
.fp-author-stat { display: flex; flex-direction: column; gap: 0.125rem; }
.fp-author-stat strong { font-size: 1.25rem; font-weight: 700; color: var(--fp-dark-blue); }
.fp-author-stat span   { font-size: 0.8125rem; color: var(--fp-text-muted); }

/* Botones sociales (página de autor) */
.fp-author-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fp-dark-blue);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.fp-author-social-btn:hover { border-color: var(--fp-dark-blue); background: var(--fp-light-bg); }

/* Credenciales (formación + experiencia) */
.fp-credentials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 768px) {
  .fp-credentials-grid { grid-template-columns: 1fr 1fr; }
}

/* Timeline */
.fp-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 2px solid var(--fp-border);
  padding-left: 1.5rem;
  margin-left: 0.5rem;
}
.fp-timeline-item {
  position: relative;
  padding-bottom: 2rem;
}
.fp-timeline-item:last-child { padding-bottom: 0; }
.fp-timeline-dot {
  position: absolute;
  left: -1.875rem;
  top: 0.3rem;
  width: 12px;
  height: 12px;
  background: var(--fp-cyan);
  border: 2px solid var(--fp-white);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--fp-cyan);
}
.fp-timeline-content { display: flex; flex-direction: column; gap: 0.2rem; }
.fp-timeline-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fp-text);
}
.fp-timeline-sub {
  font-size: 0.875rem;
  color: var(--fp-text-muted);
}
.fp-timeline-year {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fp-cyan);
}

/* ═══════════════════════════════════════════════════════════
   XARXA DE SEGURETAT RESPONSIVE (global)
   Evita overflow horitzontal i deformacions a qualsevol pàgina.
   ═══════════════════════════════════════════════════════════ */
html, body { max-width: 100%; overflow-x: hidden; }

/* Res no pot ser més ample que el viewport */
img, svg, video, iframe, table, pre { max-width: 100%; }
img, video { height: auto; }

/* Mitjans fluids per defecte */
iframe { max-width: 100%; }

/* Taules i blocs de codi amb scroll propi, no de pàgina */
.fp-prose table, .fp-specs-table { display: block; overflow-x: auto; max-width: 100%; }

/* El contenidor mai no desborda */
.container { max-width: 100%; }

/* Trencar paraules molt llargues (URLs, emails) en lloc d'empènyer el layout */
.fp-prose a, .fp-contact-info-list a, .fp-mat-card-body p, .fp-footer-col ul a { overflow-wrap: anywhere; }
.fp-prose p:empty { display: none; }

/* Ajustos fins mòbil per seccions denses */
@media (max-width: 600px) {
  /* Sector cards a 1 columna en pantalles molt petites */
  .fp-sector-cards { grid-template-columns: 1fr; }
  /* Mètriques a 2 columnes sempre caben */
  .fp-stats-grid, .fp-stats-grid--left { grid-template-columns: repeat(2, minmax(0,1fr)); }
}