/* --- Fuentes autoalojadas (antes Google Fonts CDN). Generadas desde
   fonts.googleapis.com; los .woff2 estan en assets/fonts/. El unicode-range
   hace que el navegador solo descargue el subset que necesita. --- */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/karla-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/karla-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/karla-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/karla-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/karla-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/karla-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/karla-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/karla-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-400-italic-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-400-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/newsreader-500-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/newsreader-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/newsreader-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/newsreader-600-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/newsreader-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/newsreader-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Cuidarae — full stylesheet
   Tokens y escala tipográfica según el handoff de diseño (alta fidelidad).
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------ */
:root {
  --ink: #233A3C;
  --ink-soft: #5C7071;
  --muted: #A8B6B6;
  --muted-strong: #8FA0A1;

  --teal: #3E6E6A;
  --teal-50: #E2EDEA;
  --blue: #3F6883;
  --blue-200: #CFDFE9;
  --blue-50: #F2F7FA;
  --gold: #B8912F;
  --gold-ink: #8A6A1F;
  --sand: #F1E7CD;

  --line: #E4EAEA;
  --line-soft: #EDF1F1;
  --line-strong: #D7E2E2;

  --surface: #FFFFFF;
  --bg: #F4F8F9;
  --footer-bg: #22383F;
  --footer-ink: #D6E3E2;
  --footer-muted: #9FB4B4;
  --footer-line: #35504E;
  --on-dark-soft: #D8E8E6;

  --grad: linear-gradient(135deg, #3F6883 0%, #3E6E6A 100%);

  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans: Karla, system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1120px;
  --gutter: 24px;

  /* Ritmo vertical fluido. Cada token lleva el nombre de su valor de escritorio
     —el que fija el handoff— y lo mantiene exacto a partir de ~1070px de ancho;
     por debajo se va comprimiendo hasta el mínimo, que es lo que evita que en
     móvil quede tantísimo aire entre secciones. */
  --sp-96: clamp(44px, 9vw, 96px);
  --sp-84: clamp(38px, 7.8vw, 84px);
  --sp-80: clamp(36px, 7.5vw, 80px);
  --sp-76: clamp(34px, 7vw, 76px);
  --sp-72: clamp(32px, 6.7vw, 72px);
  --sp-64: clamp(30px, 6vw, 64px);
  --sp-56: clamp(26px, 5.2vw, 56px);
  --sp-48: clamp(24px, 4.5vw, 48px);
  --sp-44: clamp(22px, 4.2vw, 44px);
  --sp-40: clamp(20px, 3.8vw, 40px);

  /* Lo actualiza site.js con la altura real; estos son los valores de reserva. */
  --header-h: 74px;
}

@media (max-width: 1059px) {
  :root { --header-h: 84px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

/* Fondo global único, fijo al viewport. Ni el hero ni las cabeceras de página
   llevan fondo propio: no debe haber ningún corte entre header y contenido. */
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 86% 0%, rgba(63, 104, 131, 0.11), rgba(63, 104, 131, 0) 70%),
    radial-gradient(760px 500px at 0% 16%, rgba(184, 145, 47, 0.08), rgba(184, 145, 47, 0) 70%),
    linear-gradient(180deg, #EDF4F6 0%, #F7FAFB 42%, #F4F8F9 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body.is-locked { overflow: hidden; }

img, svg { max-width: 100%; }

a { color: var(--teal); }
a:hover { color: var(--blue); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }

button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: top 160ms ease;
}
.skip-link:focus { top: 12px; }

/* --- Utilidades de layout ---------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}


.section { padding-top: var(--sp-96); padding-bottom: var(--sp-96); }
.section--tight { padding-top: var(--sp-64); padding-bottom: var(--sp-96); }
.section--flush-bottom { padding-bottom: 0; }

/* --- Tipografía --------------------------------------------------------- */
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-ink);
  margin: 0;
}
.eyebrow--page { font-size: 13px; letter-spacing: 0.2em; }

.h1-hero {
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  max-width: 15em;
  text-wrap: balance;
}
/* El `<em>` del titular marca el trozo con color, no con cursiva: en
   Newsreader la itálica a ese cuerpo canta demasiado. */
.h1-hero em { font-style: normal; color: var(--blue); }

.h1-page {
  font-size: clamp(38px, 5vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.h2 {
  font-size: clamp(32px, 3.8vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h2--sm { font-size: clamp(28px, 3vw, 36px); line-height: 1.15; }
.h2--md { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.12; }

.h3 { font-size: 23px; letter-spacing: -0.01em; }

.lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 34em;
  text-wrap: pretty;
}

/* --- Reparto de línea ---------------------------------------------------
   El castellano es más largo que el catalán —«Os llamamos en menos de 24
   horas» contra «Us truquem…»— y al traducir aparecieron tres decenas de
   párrafos que acababan con una sola palabra colgando en la última línea.
   Se arregla dejando que el navegador reparta:

   - `balance` iguala el largo de las líneas. Para titulares y rótulos cortos,
     que es donde una palabra suelta canta más. El navegador lo ignora a partir
     de cierto número de líneas, así que no hay que acotarlo por tamaño.
   - `pretty` respeta el reparto normal pero evita terminar en una palabra
     sola. Para el cuerpo de texto, donde `balance` desajustaría el bloque.

   Donde no está soportado no pasa nada: se reparte como siempre. */
h1, h2, h3, h4,
.h1-hero, .h1-page, .h2, .h2-block, .h3,
.eyebrow, .stats__label, .timeline__when, figcaption,
.compare__title, .site-footer__tagline {
  text-wrap: balance;
}

p, li, blockquote, dd, .body-text, .meta {
  text-wrap: pretty;
}

.body-text {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 32em;
}

.meta { font-size: 15px; color: var(--ink-soft); }
.meta--sm { font-size: 14px; }

/* --- Botones ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 16px 30px;
  min-height: 44px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, filter 180ms ease, color 180ms ease;
}

.btn--primary {
  color: #FFFFFF;
  background: var(--grad);
  border: 0;
}
.btn--primary:hover { filter: brightness(1.08); color: #FFFFFF; }

.btn--hero { padding: 17px 34px; box-shadow: 0 10px 26px rgba(35, 58, 60, 0.16); }

.btn--secondary {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--line-strong);
}
.btn--secondary:hover { border-color: var(--gold); color: var(--ink); }

.btn--outline {
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border-color: var(--blue);
  padding: 14px 26px;
  white-space: nowrap;
}
.btn--outline:hover { background: var(--sand); color: var(--ink); }

.btn--sand {
  color: var(--ink);
  background: var(--sand);
  border: 0;
  font-weight: 700;
}
.btn--sand:hover { background: #FFFFFF; color: var(--ink); }

.btn--ghost-light {
  color: #FFFFFF;
  background: transparent;
  border: 1.5px solid #8FAEAE;
  font-weight: 700;
  padding: 15px 24px;
}
.btn--ghost-light:hover { border-color: var(--sand); color: #FFFFFF; }

.btn--sm { font-size: 15px; padding: 10px 18px; }
.btn--block { width: 100%; }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.site-header.is-scrolled {
  background: rgba(252, 253, 253, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 12px rgba(35, 58, 60, 0.04);
}

.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* El logotipo es el nombre solo, en la versión oscura: la cabecera va siempre
   sobre fondo claro. El isotipo se reserva para el favicon y el pie. */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.logo__img {
  display: block;
  width: auto;
  height: 20px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .logo__img { height: 17px; }
}

.nav { display: flex; align-items: center; gap: 2px; }

.nav__link {
  font-size: 15px;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  padding: 9px 11px;
  border-radius: 999px;
  transition: background 160ms ease;
}
.nav__link:hover { background: var(--teal-50); color: var(--ink); }
.nav__link[aria-current="page"] { background: var(--teal-50); font-weight: 600; }

.nav__cta { margin-left: 8px; }

/* Selector de idioma. Mismo lenguaje visual que los enlaces del menú: píldora
   pálida para el idioma activo. El activo es un <span>, no un enlace: no tiene
   sentido enlazar a la página en la que ya estás. */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lang__opt {
  padding: 6px 8px;
  border-radius: 999px;
  line-height: 1;
  color: var(--muted-strong);
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
a.lang__opt:hover { background: var(--teal-50); color: var(--ink); }
.lang__opt.is-on { color: var(--ink); background: var(--teal-50); }

/* Al header mòbil el traductor és compacte: només l'idioma de destí, com a
   botó-píldora. Estalvia espai i queda ben visible al costat del CTA. */
.nav-mobile .lang { margin: 0; }
.nav-mobile .lang__opt.is-on { display: none; }
.nav-mobile .lang__opt {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 11px;
  font-weight: 600;
}
.nav-mobile a.lang__opt:hover { border-color: var(--gold); }


.nav-mobile { display: none; align-items: center; gap: 10px; }

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0 13px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 160ms ease;
}
.burger:hover { border-color: var(--gold); }
.burger span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 200ms ease, opacity 160ms ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Panel del menú móvil */
.menu-panel {
  position: sticky;
  top: var(--header-h);
  z-index: 39;
  background: rgba(252, 253, 253, 0.98);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 24px rgba(35, 58, 60, 0.06);
}
.menu-panel[hidden] { display: none; }

.menu-panel__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 26px var(--gutter) 34px;
  display: flex;
  flex-direction: column;
}

.menu-panel__link {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: -0.015em;
  text-align: left;
  color: var(--ink);
  text-decoration: none;
  padding: 14px 0;
  transition: color 160ms ease, padding-left 160ms ease;
}
.menu-panel__link:hover { color: var(--teal); padding-left: 8px; }

.menu-panel__foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.menu-panel__foot .eyebrow { letter-spacing: 0.2em; }

@media (max-width: 1059px) {
  .nav { display: none; }
  .nav-mobile { display: flex; }
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
}

.hero__blob { position: absolute; border-radius: 50%; pointer-events: none; }
.hero__blob--blue {
  top: -180px; right: -140px;
  width: 620px; height: 620px;
  background: radial-gradient(circle at 40% 40%, rgba(63, 104, 131, 0.12), rgba(63, 104, 131, 0) 68%);
}
/* La mancha dorada baja 260px por debajo del hero, así que `overflow: hidden`
   la corta siempre al 53,6% de su altura (560-260 / 560) y deja una línea
   horizontal visible. La máscara la apaga antes de llegar a ese corte. */
.hero__blob--gold {
  bottom: -260px; left: -160px;
  width: 560px; height: 560px;
  background: radial-gradient(circle at 60% 40%, rgba(184, 145, 47, 0.10), rgba(184, 145, 47, 0) 68%);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 52%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 52%);
}

.hero__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-72) var(--gutter) 0;
}

/* Texto a la izquierda, foto a la derecha sangrando hasta el borde de la
   ventana. Por debajo de 1060px la foto pasa a ser una banda bajo el texto.

   `align-items: start` y no `center`: la foto es más alta que el texto, y
   centrarlo dejaba el titular arrancando muy por debajo de la cabecera. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-40) 64px;
  align-items: start;
}

@media (min-width: 1060px) {
  .hero__grid { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); }
}

/* Sin tope propio: el ancho de línea lo pone la columna. Un `max-width` en
   `em` aquí cortaba el titular a 480px y lo dejaba en cuatro líneas cortas. */
.hero h1 { margin: 0; max-width: none; }

.hero__text { max-width: 42em; }
.hero__text .lead { margin: 26px 0 28px; max-width: none; }

/* --- Foto del hero ------------------------------------------------------ */

/* Nada de imagen pegada: la foto no tiene borde propio. Se disuelve por la
   izquierda y por abajo con una máscara de dos gradientes que se intersecan,
   así que el punto donde acaba la foto y empieza el fondo no existe. */
.hero__media {
  position: relative;
  margin: 0;
  margin-right: calc(50% - 50vw);
  min-width: 0;
  /* Sin tope, la figura crece hasta lo que da la proporción de la foto ya
     sangrada (632px a 1440) y deja un hueco muerto bajo el texto. */
  height: clamp(440px, 40vw, 572px);
  align-self: stretch;

  -webkit-mask-image:
    linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.55) 16%, #000 42%),
    linear-gradient(to bottom, transparent 0, #000 15%, #000 72%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.55) 16%, #000 42%),
    linear-gradient(to bottom, transparent 0, #000 15%, #000 72%, transparent 99%);
  mask-composite: intersect;
}

.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Las manos, que es lo que cuenta, quedan a la izquierda del encuadre. */
  object-position: 42% 54%;
  /* La foto viene más saturada y más fría que la paleta. */
  filter: saturate(0.86) contrast(1.03) brightness(1.02);
}

/* Velo de color por encima: ata la foto a los azules y verdes del sitio y le
   quita el contraste justo por donde se cruza con el texto. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(244, 248, 249, 0.92) 0%, rgba(226, 237, 234, 0.42) 26%, rgba(63, 104, 131, 0.05) 58%, rgba(184, 145, 47, 0.07) 100%),
    radial-gradient(120% 90% at 88% 12%, rgba(63, 104, 131, 0.16), rgba(63, 104, 131, 0) 62%);
  pointer-events: none;
}

@media (max-width: 1059px) {
  .hero__media {
    /* Ancho y alto explícitos en vez de `aspect-ratio`: la banda debe medir lo
       mismo en cualquier móvil y no depender de cuánto mida el alto de la
       ventana, que en el móvil cambia al aparecer y desaparecer la barra del
       navegador. */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: 0;
    height: clamp(210px, 52vw, 330px);
    align-self: start;

    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 78%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 78%, transparent 100%);
    mask-composite: add;
  }
  .hero__media::after {
    background: linear-gradient(180deg, rgba(244, 248, 249, 0.55) 0%, rgba(244, 248, 249, 0) 34%, rgba(63, 104, 131, 0.10) 100%);
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__reassurance { margin-top: 18px; line-height: 1.6; }

/* Franja de datos */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 32px;
  margin-top: var(--sp-56);
  padding: 34px 0 var(--sp-40);
  border-top: 1px solid rgba(35, 58, 60, 0.10);
}
.stats__figure {
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 34px);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.stats__figure--teal { color: var(--teal); }
.stats__figure--blue { color: var(--blue); }
.stats__figure--gold { color: var(--gold); }
.stats__label {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- Cabecera de página interna ----------------------------------------
   Sin fondo ni filete propios: sube por detrás del header para que el
   fondo global sea continuo. */
.page-head {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + var(--sp-56));
  padding-bottom: 0;
}
/* El aire de debajo era de 76px y, sumado al del bloque siguiente, dejaba la
   cabecera desenganchada de su propio contenido. */
.page-head > .container { padding-bottom: var(--sp-40); }
.page-head + .container.section--tight { padding-top: var(--sp-48); }
.page-head .eyebrow { margin-bottom: 16px; }
.page-head h1 { margin-bottom: 20px; }

/* --- Bloque de dos columnas con columna sticky ------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-64);
  align-items: start;
}
.split--tight { gap: var(--sp-48); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.split--form { gap: var(--sp-56); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.split__aside .eyebrow { margin-bottom: 22px; }
.split__aside h2 { margin-bottom: 22px; }
.split__aside p { margin-bottom: 28px; max-width: 30em; }

.split__main { min-width: 0; }

@media (min-width: 720px) {
  .is-sticky { position: sticky; top: 110px; }
}

/* Lista numerada de "Per què Cuidarae" */
.reason {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 22px;
  align-items: start;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.reason__num {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  color: var(--blue);
}
.reason h3 { margin-bottom: 8px; }
.reason p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 34em;
}

.inline-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: var(--sp-44);
}
.inline-cta--sm { gap: 12px; }

/* --- Testimonis --------------------------------------------------------- */
.section-title-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.section-title-row h2 { font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -0.015em; }

.tag {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.tag--warn { color: #85681F; background: var(--sand); }
.tag--step { color: var(--step); background: var(--step-tint); padding: 5px 13px; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.quote {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--blue-200);
  border-radius: 6px;
  padding: clamp(26px, 4vw, 34px);
}
.quote blockquote {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
}
.quote figcaption { font-size: 14px; color: var(--ink-soft); }

/* --- Franja de testimonios --------------------------------------------- */

/* La foto es el fondo de la sección, de lado a lado de la ventana, y las citas
   van encima con su recuadro. La imagen va en un `<picture>` colocado detrás y
   no en `background-image` para no perder el `srcset`: así el móvil se sigue
   bajando la versión de 640. */
.testimonis-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* La franja entrega directamente al pie, sin banda blanca entre medias. El
     margen negativo se come el `margin-top` del pie —que ahí sí hace falta
     cuando lo último es una sección normal—; el aire lo pone el padding de la
     sección, que va por dentro de la foto. */
  margin-bottom: calc(-1 * var(--sp-40));
}

.testimonis-band__bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -2;
}
.testimonis-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La franja es mucho más apaisada que la foto, así que el recorte es todo
     vertical: subiéndolo, las dos figuras asoman por encima de las tarjetas en
     vez de quedar reducidas a unos pies al borde de abajo. */
  object-position: 50% 52%;
  filter: saturate(0.86) contrast(1.03);
}

/* Velo por encima de la foto: sin él, ni el titular en tinta ni el borde de
   las tarjetas se despegan del fondo. Lleva el color de la paleta, no un gris,
   para que la franja no se vea como un parche dentro de la página. */
.testimonis-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(244, 248, 249, 0.93) 0%, rgba(244, 248, 249, 0.90) 18%, rgba(244, 248, 249, 0.66) 46%, rgba(244, 248, 249, 0.78) 100%),
    radial-gradient(100% 80% at 82% 10%, rgba(63, 104, 131, 0.12), rgba(63, 104, 131, 0) 60%);
  pointer-events: none;
}

/* --- Bloques con gradiente --------------------------------------------- */
.panel {
  background: var(--grad);
  border-radius: 8px;
  color: #FFFFFF;
  padding: clamp(32px, 5vw, 60px) clamp(24px, 4vw, 52px);
}
.panel h2 { color: #FFFFFF; }
.panel p { color: var(--on-dark-soft); }

.panel--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  align-items: center;
}
.panel--split-wide { gap: 48px; }

.panel__actions { display: flex; flex-direction: column; gap: 12px; }

.panel__cta-title { font-size: clamp(30px, 3.4vw, 38px); letter-spacing: -0.015em; margin-bottom: 12px; text-wrap: pretty; }
.panel__cta-text { font-size: 18px; line-height: 1.6; }

.panel__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 36px;
}
.panel__bar p { font-size: 18px; color: #FFFFFF; max-width: 40em; }

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.checklist li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: #FFFFFF;
}
.checklist li::before { content: "✓"; color: var(--sand); }

/* --- Timeline (Com funciona) --------------------------------------------
   Espina continua: cada paso aporta su tramo de línea y su color. */
/* --- "Com funciona": cabecera con foto y pasos --------------------------- */

/* Color por paso: acento y tinte de la pildora. */
.step--teal { --step: #3E6E6A; --step-tint: #E4F0EC; }
.step--blue { --step: #3F6883; --step-tint: #E4EEF6; }
.step--cyan { --step: #2F7E86; --step-tint: #E0F0F1; }
.step--gold { --step: #8A6A1F; --step-tint: #F6EDD8; }

/* La cabecera de esta pagina se monta como el hero de la portada: texto a la
   izquierda y foto a la derecha sangrando hasta el borde de la ventana. Solo
   la variante `--media`: el resto de paginas interiores no llevan foto. */
/* Sin el aire de las demas paginas interiores: aqui el contenido arranca
   justo donde acaba la cabecera, para que la foto quede pegada a ella. */
.page-head--media { overflow: hidden; padding-top: var(--header-h); }
/* El aire de debajo lo pone ya el desvanecido de la foto, que se apaga mucho
   antes de que acabe la caja: con el padding de siempre, el bloque siguiente
   quedaba desenganchado de la cabecera. */
.page-head--media > .container { padding-bottom: 0; }

.page-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-40) var(--sp-56);
  align-items: start;
}
@media (min-width: 1000px) {
  .page-head__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; }
}

.page-head__media {
  position: relative;
  margin: 0;
  /* Hasta el borde derecho de la ventana. La columna no esta centrada, asi que
     el desplazamiento es el gutter mas el hueco que el contenedor deja a su
     derecha; el `overflow: hidden` de la seccion se come el pico que sobra
     cuando el 100vw cuenta la barra de desplazamiento. */
  margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--container)) / 2)));
  height: clamp(260px, 30vw, 420px);

  -webkit-mask-image:
    linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.55) 14%, #000 40%),
    linear-gradient(to bottom, #000 0, #000 72%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.55) 14%, #000 40%),
    linear-gradient(to bottom, #000 0, #000 72%, transparent 99%);
  mask-composite: intersect;
}
.page-head__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El recorte arranca casi en el borde izquierdo del original: asi la cuidadora
     y la silla caen a la derecha del desvanecido, y no dentro de el. */
  object-position: 8% 50%;
  filter: saturate(0.86) contrast(1.03) brightness(1.02);
}
.page-head__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(244, 248, 249, 0.90) 0%, rgba(226, 237, 234, 0.40) 24%, rgba(63, 104, 131, 0.05) 58%, rgba(184, 145, 47, 0.07) 100%),
    radial-gradient(120% 90% at 88% 12%, rgba(63, 104, 131, 0.14), rgba(63, 104, 131, 0) 62%);
  pointer-events: none;
}

@media (max-width: 999px) {
  /* En una columna la foto ya no toca la cabecera —va debajo del texto—, asi
     que el titular recupera su aire y la banda se desvanece por los dos lados. */
  .page-head--media { padding-top: calc(var(--header-h) + var(--sp-56)); }
  .page-head__media {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: clamp(210px, 52vw, 330px);

    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 78%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 78%, transparent 100%);
    mask-composite: add;
  }
  .page-head__media::after {
    background: linear-gradient(180deg, rgba(244, 248, 249, 0.45) 0%, rgba(244, 248, 249, 0) 36%, rgba(63, 104, 131, 0.10) 100%);
  }
}

/* Los pasos van con el mismo bloque que "Per que Cuidarae" de la portada:
   columna fija a la izquierda y lista numerada con filete a la derecha. Se
   reutiliza `.reason` tal cual; lo unico propio es el color por paso y la
   pildora de plazo, que aqui lleva informacion que en la portada no hay. */
.process {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* En la portada la cifra va siempre en azul; aqui cada paso conserva el suyo. */
.process .reason__num { color: var(--step); }
.process__when { display: inline-block; margin-bottom: 12px; }

/* --- FAQ ---------------------------------------------------------------- */
.faq {
  margin-top: var(--sp-84);
  background: linear-gradient(160deg, #EDF4F6 0%, #F7FAFA 58%, #FAF5EB 100%);
  border: 1px solid #E1EBED;
  border-radius: 10px;
  padding: clamp(30px, 4.5vw, 56px);
}

.faq__item {
  border-top: 1px solid #D9E5E7;
  padding: 22px 0;
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  min-height: 28px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1;
  color: var(--blue);
}
.faq__item[open] summary::after { content: "−"; }
.faq__item p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: 14px;
  max-width: 44em;
}

/* --- Serveis ------------------------------------------------------------ */
/* Sin columna de precio, la fila es un solo bloque: el ancho de medida lo pone
   el max-width del párrafo, como en el resto del sitio. */
/* Cada servicio en su cuadro, con el mismo degradado, borde y radio que el
   bloque de preguntas de "Com funciona": son los dos unicos bloques del sitio
   que van sobre color, y asi se reconocen como la misma familia. */
.services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 719px) {
  .services { grid-template-columns: minmax(0, 1fr); }
}

.service-card {
  background: linear-gradient(160deg, #EDF4F6 0%, #F7FAFA 58%, #FAF5EB 100%);
  border: 1px solid #E1EBED;
  border-radius: 10px;
  padding: clamp(26px, 3vw, 40px);
}
.service-card__num {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--step, var(--gold-ink));
  margin-bottom: 14px;
}
.service-card h2 {
  font-size: clamp(22px, 2vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.service-card p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 32em;
}
.rule { border-top: 1px solid var(--line); }

/* --- Nosaltres ---------------------------------------------------------- */
.pullquote {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  border-left: 2px solid var(--gold);
  padding-left: 26px;
}

.value {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  align-items: start;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.value__num { font-family: var(--serif); font-size: 15px; color: var(--step, var(--gold-ink)); }
.value h3 { font-size: 24px; margin-bottom: 8px; }
.value p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 34em;
}

/* Mapa de zonas (<cm-map>) */
cm-map { display: block; }

.cm-map {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #F7FAFB;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  /* Columna: el dibujo se queda con el alto sobrante y la leyenda abajo. */
  display: flex;
  flex-direction: column;
}
/* `meet` por defecto: el dibujo se escala para caber y se centra en el hueco,
   sea cual sea el alto que le toque. */
.cm-map svg { display: block; flex: 1; min-height: 0; }

/* Leyenda debajo del dibujo, no superpuesta: así sigue siendo legible
   cuando el SVG se reduce en pantallas estrechas. */
.cm-map__legend {
  list-style: none;
  margin: 0;
  padding: 16px clamp(16px, 3vw, 26px) 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.cm-map__legend li { display: flex; align-items: center; gap: 9px; }

.cm-map__swatch {
  display: block;
  width: 18px;
  height: 12px;
  border-radius: 3px;
}
.cm-map__swatch--occ { background: #E3EFEA; border: 1px solid #BCD8CE; }
.cm-map__swatch--ori { background: #E2ECF5; border: 1px solid #B9D0E3; }

.cm-map__key { display: block; border-radius: 50%; }
.cm-map__key--main { width: 12px; height: 12px; background: var(--teal); }
.cm-map__key--other {
  width: 12px;
  height: 12px;
  background: var(--surface);
  border: 2px solid var(--teal);
}

/* Los municipios a la izquierda y el mapa a la derecha, media pantalla cada
   uno: a ancho completo el mapa pedia mucho sitio para lo que cuenta. */
.zones-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-56);
  /* Las dos columnas miden lo mismo: el mapa estira hasta el alto de las
     dos tarjetas y el dibujo se centra dentro. */
  align-items: stretch;
  margin-top: var(--sp-48);
}
@media (max-width: 899px) {
  .zones-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-40); }
}

.zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: var(--sp-48);
}
/* Dentro del bloque a dos columnas los dos comarcas van una encima de otra. */
.zones-layout .zones { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.zone {
  border-radius: 8px;
  padding: clamp(24px, 3vw, 32px);
}
.zone--west { background: #EFF6F4; border: 1px solid #D3E3DE; }
.zone--west h2 { color: var(--teal); }
.zone--east { background: #EDF3F8; border: 1px solid #D3E1EB; }
.zone--east h2 { color: var(--blue); }
.zone h2 { font-size: 26px; margin-bottom: 16px; }
.zone p { font-size: 16px; line-height: 1.9; color: var(--ink-soft); }

/* --- Formularios -------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(35, 58, 60, 0.03);
  padding: clamp(26px, 4vw, 34px);
}

/* Tarjeta de datos tintada; el formulario va en blanco para contrastar. */
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  background: linear-gradient(160deg, #EDF4F6 0%, #F7FAFA 62%, #FAF5EB 100%);
  border: 1px solid #DCE7E9;
  border-radius: 8px;
  box-shadow: none;
}
.contact-card__label {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-ink);
  margin-bottom: 4px;
}
.contact-card__value { font-size: 20px; font-family: var(--serif); }
.contact-card__value a { color: var(--ink); text-decoration: none; }
.contact-card__value a:hover { color: var(--teal); text-decoration: underline; }
.contact-card__note { font-size: 17px; color: var(--ink-soft); }

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(26px, 4vw, 36px);
}
.form h2 { font-size: 26px; }

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 15px;
  font-weight: 600;
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  min-height: 44px;
}
.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--teal);
  outline: 2px solid rgba(62, 110, 106, 0.25);
  outline-offset: 0;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #B4483F; }

.field__error {
  font-size: 13px;
  font-weight: 500;
  color: #B4483F;
}
.field__error:empty { display: none; }

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
  cursor: pointer;
}
.check input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  accent-color: var(--teal);
  flex: none;
}

.form__msg {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  text-align: center;
  min-height: 1.2em;
}
.form__msg--ok { color: var(--teal); font-weight: 600; }
.form__msg--error { color: #B4483F; font-weight: 600; }

/* --- Treballa amb nosaltres --------------------------------------------- */
/* Las tres van en oscuro, con el mismo degradado y el mismo radio que los
   paneles de llamada: es la unica pagina que se dirige a la cuidadora y no a
   la familia, y el bloque oscuro la separa del resto. */
.perk {
  background: var(--grad);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  color: #FFFFFF;
}
.perk h2 { font-size: 22px; margin-bottom: 8px; color: #FFFFFF; }
.perk p { font-size: 15px; line-height: 1.65; color: var(--on-dark-soft); }

.requirements {
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.requirements li {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.requirements li:last-child { border-bottom: 0; padding-bottom: 0; }

.h2-block { font-size: clamp(28px, 3vw, 34px); letter-spacing: -0.01em; margin-bottom: 20px; }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  margin-top: var(--sp-40);
}

/* La marca a la izquierda ocupando el hueco libre, y las dos columnas de enlaces
   pegadas al borde derecho. Con tan poco contenido, tres columnas iguales dejaban
   un vacío largo a la derecha que no cuadraba con el filete de abajo. */
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-64) var(--gutter) var(--sp-48);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 40px 88px;
  align-items: start;
}

/* La marca entera —isotipo arriba y nombre debajo— en su versión clara, que es
   la que aguanta sobre el fondo oscuro. */
.site-footer__brand {
  margin-bottom: 20px;
  line-height: 0;
}
.site-footer__logo {
  display: block;
  width: auto;
  height: 84px;
}
.site-footer__tagline {
  font-size: 15px;
  line-height: 1.65;
  max-width: 34ch;
  /* Reparte las lineas en vez de dejar «i Oriental.» sola al final. */
  text-wrap: balance;
  color: var(--footer-muted);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: start;
}
.site-footer__heading {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 5px;
}
.site-footer__col a { font-size: 15px; color: var(--footer-ink); text-decoration: none; }
.site-footer__col a:hover { color: #FFFFFF; text-decoration: underline; }
.site-footer__col span { font-size: 15px; }
.site-footer__col .is-muted { color: var(--footer-muted); }

/* El teléfono es la conversión del pie: va en la serif y con el tamaño de un
   titular pequeño, no como un enlace más de la lista. */
.site-footer__col a.site-footer__phone {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.site-footer__legal {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px var(--gutter) var(--sp-40);
  border-top: 1px solid var(--footer-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  font-size: 13px;
  color: var(--footer-muted);
}
.site-footer__legal a { color: var(--footer-muted); }
.site-footer__legal a:hover { color: #FFFFFF; }
.site-footer__credit { margin-left: auto; }
@media (max-width: 560px) { .site-footer__credit { margin-left: 0; } }

/* A dos columnas la marca ocupa la fila entera; a una, todo en vertical. */
@media (max-width: 880px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 44px 32px;
  }
  .site-footer__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .site-footer__logo { height: 74px; }
  .site-footer__col a.site-footer__phone { font-size: 22px; }
}

/* --- Botón flotante de WhatsApp ---------------------------------------- */
.wa-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  max-width: calc(100vw - 32px);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--grad);
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  padding: 15px 22px;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(35, 58, 60, 0.22);
  transition: filter 180ms ease;
}
.wa-float:hover { filter: brightness(1.08); color: #FFFFFF; }
.wa-float__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sand);
  display: block;
}

/* --- Páginas legales ---------------------------------------------------- */
.prose { max-width: 44em; }
.prose h2 { font-size: 26px; margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 17px; line-height: 1.75; color: var(--ink-soft); }
.prose p { margin-bottom: 14px; }
.prose ul { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin-bottom: 8px; }

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


/* --- Banner de consentiment de cookies (consent.js) ------------------- */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000;
  max-width: 960px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 30px rgba(35, 58, 60, .16); padding: 18px 20px;
}
.cookie-banner__text { flex: 1 1 320px; margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.cookie-banner__text a { color: var(--teal); }
.cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 560px) {
  .cookie-banner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px; }
  .cookie-banner__actions .btn { flex: 1; }
}

/* --- Taula de cookies (pàgines legals) -------------------------------- */
.legal-table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 15px; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-table thead th { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--line); }
.legal-table td { color: var(--ink-soft); }
@media (max-width: 560px) { .legal-table { font-size: 13.5px; } .legal-table th, .legal-table td { padding: 8px 8px; } }