/* ==========================================================================
   [[MARCA]] — Landing valorador
   main.css · mobile-first (base = 390px) · sin frameworks
   Orden: tokens > reset > tipografía > utilidades > componentes > secciones
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Colores elegidos por mí (la variable COLORES DE MARCA venía sin rellenar):
   teal marino + terracota. Todos los pares texto/fondo pasan AA (>=4.5:1).

   La landing es CLARA. La página de valoración (`valorar.html`) es oscura y
   redefine estos mismos tokens en `valorar.css`, dentro de `.pagina-valorar`.
   Por eso aquí no hay ni un color a pelo donde pueda haber un token: todo lo
   que cambie de tema tiene que pasar por esta lista.

   Tres tokens que se confunden fácil:
     --superficie    fondo de tarjetas, campos y tablas
     --white         texto encima de un relleno de color
     --sobre-accent  igual, pero cuando el relleno es claro (tema oscuro)
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --nit:          #FFFFFF;   /* fondo base de la página  */
  --superficie:   #FFFFFF;   /* tarjetas, campos, tablas */
  --superficie-2: #F7F9FA;   /* un escalón por encima    */
  --ink:          #0A1F26;   /* texto principal          */
  --ink-2:        #3D5259;   /* texto secundario  7.2:1  */
  --ink-3:        #5F7379;   /* texto terciario   4.98:1 */
  --brand:        #0F5C6B;   /* teal marino       7.6:1  */
  --brand-700:    #0A3F49;
  --brand-100:    #DCEDF0;
  --brand-050:    #F0F8F9;
  --accent:       #C0491F;   /* terracota CTA     5.0:1  */
  --accent-600:   #A63D18;
  --accent-050:   #FDF1EC;
  --sand:         #F7F4EF;   /* fondo cálido             */
  --line:         #E3DED5;
  --white:        #FFFFFF;   /* texto sobre relleno de color */
  --sobre-accent: #FFFFFF;   /* texto sobre el CTA       */
  --sobre-brand:  #FFFFFF;   /* texto sobre el teal      */
  --fosc:         #0A3F49;   /* bandas oscuras dentro de la página */
  --fosc-suau:    #8FD3DE;   /* acentos dentro de esas bandas */
  --ok:           #1E7A4C;
  --warn:         #9A6400;
  --danger:       #B3261E;

  /* Estados con fondo propio (avisos del valorador) */
  --ok-fons:      #E6F4EC;  --ok-text:    #145A38;
  --error-fons:   #FBE9E7;  --error-text: #B3261E;
  --avis-fons:    #FFF3CD;  --avis-text:  #6B4E00;  --avis-vora: #E8CE7A;

  /* Tipografía — ver assets/css/fonts.css para activar las woff2 propias */
  --font-title: "VG Display", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:  "VG Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala tipográfica fluida (clamp: móvil -> desktop) */
  --t-eyebrow: 0.75rem;
  --t-small:   0.8125rem;
  --t-body:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --t-h3:      clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
  --t-h2:      clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
  --t-h1:      clamp(2rem, 1.5rem + 2.6vw, 3.5rem);
  --t-xxl:     clamp(2.25rem, 1.6rem + 3.2vw, 4rem);

  /* Espaciado */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sec-y: clamp(3rem, 8vw, 6rem);

  /* Layout */
  --ancho: 1140px;
  --ancho-text: 62ch;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radio: 14px;
  --radio-s: 10px;

  /* Sombras */
  --sombra-1: 0 1px 2px rgba(10,31,38,.06), 0 2px 8px rgba(10,31,38,.05);
  --sombra-2: 0 4px 12px rgba(10,31,38,.08), 0 12px 32px rgba(10,31,38,.07);
  --sombra-3: 0 8px 24px rgba(10,31,38,.10), 0 24px 60px rgba(10,31,38,.10);

  /* Movimiento — curvas propias, nada de ease por defecto */
  --e-entrada: cubic-bezier(0.16, 1, 0.3, 1);
  --e-estado:  cubic-bezier(0.65, 0, 0.35, 1);
  --d-rapida: 160ms;
  --d-media:  380ms;
  --d-lenta:  900ms;

  /* Barra CTA fija: alto real + safe area de iOS */
  --cta-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;          /* scroll NATIVO, sin librerías */
  scroll-padding-top: 1rem;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--nit);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Deja hueco para la barra CTA fija en móvil */
  padding-bottom: 0;
}
@media (max-width: 900px) {
  body.js { padding-bottom: calc(var(--cta-h) + var(--safe-b)); }
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--brand-050); }   /* evita el flash blanco mientras carga */

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-700); }

ul, ol { padding: 0; list-style: none; }

table { border-collapse: collapse; width: 100%; }

/* Accesibilidad del foco — visible siempre, nunca eliminado */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   3. TIPOGRAFÍA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; }

p { text-wrap: pretty; }
p + p { margin-top: var(--sp-4); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--sp-3);
}
.lead { font-size: var(--t-lead); color: var(--ink-2); max-width: var(--ancho-text); }
.small { font-size: var(--t-small); color: var(--ink-2); }
.micro { font-size: var(--t-small); color: var(--ink-3); line-height: 1.45; }

.pendiente {
  background: var(--avis-fons);
  color: var(--avis-text);
  padding: 0 .3em;
  border-radius: 4px;
  font-weight: 600;
  font-size: .9em;
  white-space: nowrap;
}

/* Rotador de municipios del titular (assets/js/app.js · initRotadorLloc).
   El cursor solo aparece cuando el efecto está vivo: sin JS, o con "reducir
   movimiento", queda el nombre del municipio y nada más. */
.rotador { white-space: nowrap; }
.rotador__cursor { display: none; }
.rotador--viu .rotador__cursor {
  display: inline-block; width: .06em; height: .82em;
  margin-left: .06em; vertical-align: -.06em;
  background: var(--accent);
  animation: rotadorParpelleig 1.05s steps(2, start) infinite;
}
@keyframes rotadorParpelleig { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .rotador--viu .rotador__cursor { animation: none; opacity: .5; }
}

/* --------------------------------------------------------------------------
   4. UTILIDADES
   -------------------------------------------------------------------------- */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.seccion { padding-block: var(--sec-y); }
.seccion--sand { background: var(--sand); }
.seccion--fosc { background: var(--fosc); color: var(--white); }
.seccion--fosc h2, .seccion--fosc h3 { color: var(--white); }
.seccion--fosc .lead, .seccion--fosc p { color: rgba(255,255,255,.82); }
.seccion--fosc .eyebrow { color: var(--fosc-suau); }

.cap-seccion { max-width: 46rem; margin-bottom: var(--sp-6); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 999;
  background: var(--ink); color: var(--white);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radio-s);
  transition: top var(--d-rapida) var(--e-estado);
}
.skip-link:focus { top: var(--sp-4); color: var(--white); }

/* --------------------------------------------------------------------------
   5. BOTONES  (todos >= 48px de alto: se usan con el pulgar)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 52px; padding: 0 var(--sp-5);
  font-family: var(--font-body); font-size: 1rem; font-weight: 650;
  line-height: 1; text-align: center; text-decoration: none;
  border-radius: var(--radio-s); border: 2px solid transparent;
  transition: transform var(--d-rapida) var(--e-estado),
              background-color var(--d-rapida) var(--e-estado),
              border-color var(--d-rapida) var(--e-estado),
              box-shadow var(--d-rapida) var(--e-estado);
  will-change: auto;
}
.btn:active { transform: translateY(1px) scale(0.995); }

.btn--principal { background: var(--accent); color: var(--sobre-accent); box-shadow: var(--sombra-1); }
.btn--principal:hover { background: var(--accent-600); color: var(--sobre-accent); box-shadow: var(--sombra-2); }

.btn--marca { background: var(--brand); color: var(--sobre-brand); }
.btn--marca:hover { background: var(--brand-700); color: var(--sobre-brand); }

.btn--contorn { background: transparent; color: var(--brand); border-color: var(--line); }
.btn--contorn:hover { border-color: var(--brand); background: var(--brand-050); }

/* El verde corporativo de WhatsApp (#25D366 / #128C7E) no llega a 4.5:1 con
   texto blanco. Usamos su tono oscuro, que da 6:1 y sigue leyéndose como
   WhatsApp. La especificidad extra es para que `.peu a` no lo pise. */
.btn.btn--wa { background: #0E6F64; color: #FFFFFF; }
.btn.btn--wa:hover { background: #0A5850; color: #FFFFFF; }

.btn--gran { min-height: 60px; font-size: 1.0625rem; width: 100%; }
.btn--fantasma { color: var(--ink-2); min-height: 48px; padding: 0 var(--sp-3); font-weight: 500; }
/* Recuperar un embudo abandonado es demasiado valioso como para que el botón
   sea difícil de acertar con el pulgar. Se quedan al mínimo táctil completo. */
#reprendre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
#reprendre .btn { min-height: 48px; }
.btn--fantasma:hover { color: var(--ink); }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------------------------
   6. BARRA DE PROGRESO DE SCROLL (2px)
   -------------------------------------------------------------------------- */
.barra-scroll {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
  background: transparent; pointer-events: none;
}
.barra-scroll__fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform: scaleX(0); transform-origin: 0 50%;
}

/* --------------------------------------------------------------------------
   7. CABECERA MÍNIMA  (sin menú: esto es una landing de una sola conversión)
   -------------------------------------------------------------------------- */
.capcalera {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter);
  max-width: 1320px; margin-inline: auto;   /* alineada con el hero */
}

/* En escritorio la cabecera se queda pegada arriba: asi el boton de valorar
   esta SIEMPRE a un clic, sin tener que buscar la siguiente franja. En movil
   no, porque alli ya esta la barra fija de abajo y dos barras a la vez se
   comen media pantalla. */
@media (min-width: 901px) {
  .capcalera {
    position: sticky; top: 0;
    /* El fondo llega de lado a lado, pero el contenido sigue alineado con el
       hero: el padding crece solo cuando la ventana pasa de 1320 px. */
    max-width: none;
    padding-inline: max(var(--gutter), calc((100% - 1320px) / 2 + var(--gutter)));
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
            backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--d-rapida) var(--e-estado),
                box-shadow var(--d-rapida) var(--e-estado);
  }
  /* Separacion solo cuando ya se ha bajado: arriba del todo, sin linea */
  body.ha-baixat .capcalera {
    border-bottom-color: var(--line);
    box-shadow: 0 4px 16px -12px rgba(10,31,38,.4);
  }
}
@media (prefers-reduced-motion: reduce) { .capcalera { transition: none; } }
.marca { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; color: var(--ink); }
.marca__logo { width: 34px; height: 34px; flex: 0 0 auto; background: none; }
.marca__nom {
  font-family: var(--font-title); font-size: 1.25rem; font-weight: 700;
  letter-spacing: -0.03em; color: var(--brand-700); line-height: 1;
}
@media (max-width: 420px) { .marca__logo { width: 28px; height: 28px; } .marca__nom { font-size: 1.0625rem; } }
.capcalera__dreta { display: flex; align-items: center; gap: var(--sp-3); }
.tel-capcalera {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px;
  font-weight: 650; font-size: .9375rem; text-decoration: none; color: var(--brand-700);
  white-space: nowrap;
}
/* En movil el numero partia en dos lineas y aplastaba el selector de idioma.
   Se queda solo el icono: se toca igual para llamar y libera medio ancho de
   cabecera, que en 375 px es mucho. El numero sigue en el pie. */
@media (max-width: 560px) {
  .tel-capcalera {
    width: 44px; justify-content: center; gap: 0;
    border: 1px solid var(--line); border-radius: 50%;
  }
  .tel-capcalera span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
/* CTA de la cabecera: siempre a la vista en escritorio. En movil sobra,
   porque abajo esta la barra fija, y aqui solo quitaria sitio al logo. */
.capcalera__cta { min-height: 40px; padding: 0 var(--sp-4); font-size: .9375rem; }
@media (max-width: 900px) { .capcalera__cta { display: none; } }

.idiomes { display: flex; gap: 2px; font-size: var(--t-small); }
.idiomes a {
  min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; text-decoration: none; color: var(--ink-2); font-weight: 600;
}
.idiomes a[aria-current="true"] { background: var(--brand-100); color: var(--brand-700); }

/* --------------------------------------------------------------------------
   8. HERO  — el formulario empieza aquí mismo (form-in-hero)
   -------------------------------------------------------------------------- */
/* Fondo claro con dos halos muy suaves, como la home de RealAdvisor.
   Nada de imagen de fondo: la foto protagonista va en su propio marco. */
/* Blanco a la izquierda y un panel arena a la derecha (solo escritorio) sobre
   el que se apoya el mosaico. Antes había dos halos grises casi invisibles que
   se leían como "vacío". */
.hero { position: relative; overflow: hidden; background: var(--nit); }
@media (min-width: 900px) {
  .hero::before {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0;
    width: 40%;
    background: var(--sand);
    border-bottom-left-radius: 56px;
  }
}
.hero__cos {
  position: relative; z-index: 1;
  max-width: 1320px; margin-inline: auto;   /* más ancho que el resto: el hero es el escaparate */
  padding: var(--sp-5) var(--gutter) var(--sp-7);
}
.hero__titol { margin-bottom: var(--sp-4); }
/* En escritorio el titular comparte fila con la foto: a tamaño completo salían
   4 líneas y el botón "Calcular" caía fuera de la primera pantalla a 1280x800.
   Dos líneas, como el split-text está pensado. */
@media (min-width: 900px) {
  .hero__titol { font-size: clamp(2.125rem, 1.1rem + 1.7vw, 2.875rem); }
  .hero__sub { margin-bottom: var(--sp-4); }
  .hero__pill { margin-bottom: var(--sp-3); }
}
.hero__titol .accent { font-style: italic; font-weight: 600; color: var(--brand); }
.hero__sub { margin-bottom: var(--sp-5); max-width: 34rem; }

/* Pastilla de confianza encima del eyebrow */
.hero__pill {
  display: inline-flex; align-items: center; gap: .5em;
  margin-bottom: var(--sp-4); padding: 6px 14px 6px 10px;
  background: var(--superficie); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--sombra-1);
  font-size: var(--t-small); color: var(--ink-2);
}
.hero__pill strong { color: var(--ink); font-weight: 750; font-variant-numeric: tabular-nums; }
.hero__pill-punt {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 4px rgba(30,122,76,.14);
}
.eyebrow--linia { display: flex; align-items: center; gap: .9em; }
.eyebrow--linia::before { content: ""; width: 28px; height: 1.5px; background: currentColor; }

/* Máscara para el split-text por líneas */
.linia { display: block; overflow: hidden; }
.linia > span { display: block; }
.js .linia > span { transform: translateY(110%); }
.js .linia--vista > span {
  transform: translateY(0);
  transition: transform var(--d-lenta) var(--e-entrada);
}


@media (min-width: 900px) {
  .hero__cos {
    display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(2.5rem, 4vw, 4.5rem);
    /* Arriba, no centrado: centrar en vertical era lo que abría huecos blancos
       encima y debajo de la foto. Ahora las dos columnas miden lo mismo. */
    align-items: start;
    padding-block: var(--sp-6) var(--sp-7);
  }
}
/* A partir de 1180 px el titular entra en dos líneas justas. */
@media (min-width: 1180px) { .hero__titol .linia > span { white-space: nowrap; } }


/* --------------------------------------------------------------------------
   8b. MOSAICO DEL HERO: familia + precios por barrio + cifras + burbujas
   Referencia de partida: la home de RealAdvisor (foto humana con burbujas).
   Más denso que el suyo: la columna derecha mide lo mismo que la izquierda y
   se llena con datos reales, no con aire.
   -------------------------------------------------------------------------- */
.hero__visual { position: relative; margin-top: var(--sp-6); padding: 22px 12px 26px; }
@media (min-width: 900px) { .hero__visual { margin-top: 0; padding: 26px 0 26px 26px; } }

.bento {
  position: relative; z-index: 1;
  display: grid; gap: 12px;
  grid-template-columns: 1.25fr 1fr;
  grid-template-areas: "foto foto" "preus xifres";
}
@media (min-width: 900px) { .bento { gap: 16px; } }

/* Las burbujas se anclan a la FOTO, no al mosaico entero: las proporciones
   del mosaico cambian entre móvil y escritorio y acababan tapando texto. */
.bento__foto-wrap { grid-area: foto; position: relative; }
.bento__foto {
  position: relative; margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: clamp(18px, 2.4vw, 28px); overflow: hidden;
  box-shadow: 0 2px 6px rgba(10,31,38,.06), 0 30px 60px -24px rgba(10,31,38,.35);
}
.bento__foto picture, .bento__foto img { display: block; width: 100%; height: 100%; }
.bento__foto img { object-fit: cover; object-position: 50% 42%; background: var(--sand); }

.bento__card {
  border-radius: clamp(16px, 2vw, 22px);
  padding: clamp(14px, 1.8vw, 22px);
  box-shadow: 0 1px 2px rgba(10,31,38,.05), 0 16px 34px -20px rgba(10,31,38,.3);
}
.bento__preus { grid-area: preus; background: var(--superficie); border: 1px solid var(--line); }
.bento__titol {
  font-size: .6875rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 10px;
}
.barres { display: grid; gap: 8px; }
.barres li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 4px; }
.barres__nom { font-size: .8125rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barres__val { font-size: .8125rem; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ink); }
/* Posiciones explícitas: con colocación automática, el precio caía en una
   tercera fila y cada barra medía el doble de alto. */
.barres__nom { grid-column: 1; grid-row: 1; }
.barres__val { grid-column: 2; grid-row: 1; }
.barres__pista { grid-column: 1 / -1; grid-row: 2; height: 6px; border-radius: 3px; background: var(--brand-100); overflow: hidden; }
.barres__fill {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), #2A93A5);
  transform-origin: 0 50%; transform: scaleX(var(--w));
}
.anim-ok .barres__fill { animation: barraCreix 1.2s var(--e-entrada) .5s both; }
@keyframes barraCreix { from { transform: scaleX(0); } to { transform: scaleX(var(--w)); } }
.bento__peu {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: .6875rem; color: var(--ink-2);
}
.bento__peu b { color: var(--ink); }

.bento__xifres {
  grid-area: xifres;
  background: var(--fosc); color: var(--white);
  display: grid; align-content: center; gap: 14px;
}
.bento__xifres p { display: grid; gap: 2px; }
.bento__xifres p + p { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.bento__xifres strong {
  font-family: var(--font-title); font-weight: 700; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-variant-numeric: tabular-nums;
}
.bento__xifres span { font-size: .8125rem; line-height: 1.3; color: rgba(255,255,255,.86); }

/* Burbujas a color alrededor del mosaico.
   El <li> flota y la <img> hace la entrada: las dos animaciones no se pisan. */
.bombolles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bombolla {
  position: absolute; width: var(--m); height: var(--m);
  animation: sura var(--d, 7s) ease-in-out var(--r, 0s) infinite;
}
.bombolla img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  border: 3px solid var(--superficie); background: var(--sand);
  box-shadow: 0 10px 24px -8px rgba(10,31,38,.35);
}
@keyframes sura { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }
@keyframes bombollaEntra { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* Coordenadas respecto a la foto. La etiqueta "60 segons" ocupa la esquina
   inferior izquierda, así que ahí no va ninguna. */
.bombolla--1 { --m: clamp(46px, 6.4vw, 84px); top: -16px;   left: -16px;  --d: 7.5s; --e: .35s; }
.bombolla--2 { --m: clamp(38px, 4.8vw, 62px); top: 16%;     right: -18px; --d: 6.2s; --r: -2s; --e: .45s; }
.bombolla--3 { --m: clamp(36px, 4.4vw, 56px); bottom: 38%;  left: -16px;  --d: 8.4s; --r: -1s; --e: .55s; }
.bombolla--4 { --m: clamp(50px, 7vw, 90px);   bottom: -22px; right: 14%;  --d: 9s;   --r: -3s; --e: .5s; }
.bombolla--5 { --m: clamp(34px, 4vw, 50px);   top: -18px;   left: 46%;    --d: 6.8s; --r: -4s; --e: .65s; }
@media (max-width: 480px) { .bombolla--5 { display: none; } }

/* Etiqueta flotante sobre la foto */
.hero__xip {
  position: absolute; z-index: 2; margin: 0;
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7); border-radius: 999px;
  box-shadow: 0 12px 28px -12px rgba(10,31,38,.35);
  color: var(--ink);
}
.hero__xip--temps {
  left: 14px; bottom: 14px; padding: 8px 14px;
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .8125rem; font-weight: 650;
}
.hero__xip--temps svg { color: var(--ok); flex: 0 0 auto; }

/* Entradas: solo con .anim-ok (el navegador está pintando) y se retiran con
   .sense-anim. Medido: sin esta guarda, la foto podía quedarse a opacity 0. */
.anim-ok .bento__foto { animation: fotoEntra 1.1s var(--e-entrada) .1s both; }
.anim-ok .bento__card { animation: fotoEntra 1s var(--e-entrada) .35s both; }
.anim-ok .bento__xifres { animation-delay: .45s; }
.anim-ok .bombolla img { animation: bombollaEntra .9s var(--e-entrada) var(--e, .3s) both; }
.anim-ok .hero__xip { animation: bombollaEntra .9s var(--e-entrada) .8s both; }
@keyframes fotoEntra { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
.sense-anim .bento__foto, .sense-anim .bento__card, .sense-anim .bombolla img,
.sense-anim .hero__xip, .sense-anim .barres__fill { animation: none !important; }

@media (max-width: 480px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento__card { padding: 12px; }
  .barres { gap: 6px; }
  .barres__nom, .barres__val { font-size: .75rem; }
  .bento__peu span:last-child { display: none; }
  .hero__xip--temps { font-size: .75rem; padding: 7px 11px; left: 10px; bottom: 10px; }
}

/* En la home, el valorador se ve como un buscador limpio (paso 0).
   La barra de progreso aparece en cuanto se abre a pantalla completa. */
.js .valorador:not(.valorador--complet) .valorador__cap { display: none; }

/* --------------------------------------------------------------------------
   8c. FOTOS DE ZONA — blanco y negro, fundidas en la página (estilo luxury)
   El blanco y negro va horneado en el fichero, no con filter: CSS. Un filtro
   sobre una imagen que se mueve con el scroll obliga a repintar en cada frame.
   -------------------------------------------------------------------------- */
.foto-peu {
  display: inline-block;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.9);
  font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2);
}

/* 1) Mercado — banda cinematográfica a sangre, fundida arriba y abajo, con parallax */
.seccion--amb-banda { padding-top: 0; }
.banda-foto {
  position: relative; margin: 0;
  height: clamp(230px, 42vw, 540px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 50%, transparent 88%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 50%, transparent 88%);
}
.banda-foto__capa { position: absolute; inset: -14% 0; }
.banda-foto__capa picture, .banda-foto__capa img { display: block; width: 100%; height: 100%; }
.banda-foto__capa img { object-fit: cover; object-position: 50% 55%; background: transparent; }
.banda-foto .foto-peu { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); }
/* El solape termina donde la máscara ya es transparente del todo (88 %):
   el texto pequeño nunca queda encima de foto. */
.seccion--amb-banda > .contenedor { position: relative; margin-top: clamp(-3rem, -4vw, -1.5rem); }

/* 2) Zonas — foto editorial junto al titular, que se funde hacia el texto */
.cap-amb-foto { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.cap-amb-foto .cap-seccion { margin-bottom: 0; }
.foto-fosa {
  position: relative; margin: 0 calc(-1 * var(--gutter));
  aspect-ratio: 3 / 2; overflow: hidden;
}
.foto-fosa picture, .foto-fosa img { display: block; width: 100%; height: 100%; }
.foto-fosa img {
  object-fit: cover; background: transparent;
  transform: scale(1.08);
  transition: transform 2.4s var(--e-entrada);
}
.foto-fosa.es-visible img { transform: scale(1); }   /* zoom lento al entrar */
.foto-fosa::after {   /* fundido a arena: un velo, no una máscara, para no depender de mask-composite */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--sand) 0%, rgba(247,244,239,0) 22%, rgba(247,244,239,0) 62%, var(--sand) 100%);
}
.foto-fosa .foto-peu { position: absolute; z-index: 1; left: var(--gutter); bottom: 12%; }
@media (min-width: 900px) {
  .cap-amb-foto { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 0; }
  .cap-amb-foto .cap-seccion { position: relative; z-index: 1; padding-right: var(--sp-5); }
  .foto-fosa { margin: 0 calc(-1 * var(--gutter)) 0 calc(-1 * var(--sp-7)); border-radius: 0; }
  .foto-fosa::after {
    background:
      linear-gradient(to right, var(--sand) 0%, rgba(247,244,239,.6) 16%, rgba(247,244,239,0) 44%),
      linear-gradient(to left, var(--sand) 0%, rgba(247,244,239,0) 14%),
      linear-gradient(to bottom, var(--sand) 0%, rgba(247,244,239,0) 18%, rgba(247,244,239,0) 70%, var(--sand) 100%);
  }
  .foto-fosa .foto-peu { left: auto; right: var(--sp-5); }
}


@media (prefers-reduced-motion: reduce) {
  .bombolla, .bombolla img, .hero__xip, .bento__foto, .bento__card, .barres__fill { animation: none !important; }
  .foto-fosa img { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   9. EL VALORADOR
   Sin JS: todos los pasos visibles en cascada, un único submit -> enviar.php
   Con JS: un paso por pantalla, en overlay a pantalla completa.
   -------------------------------------------------------------------------- */
.valorador {
  background: var(--superficie);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
  padding: var(--sp-5);
}
.js .valorador { padding: var(--sp-5); }

.valorador__cap { display: none; }
.js .valorador__cap { display: block; margin-bottom: var(--sp-5); }

.valorador__progres {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-3);
  font-size: var(--t-small); font-weight: 600; color: var(--ink-2);
}
.progres-pista { height: 6px; border-radius: 3px; background: var(--brand-100); overflow: hidden; }
.progres-fill {
  height: 100%; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), #2A93A5);
  transition: width var(--d-media) var(--e-estado);
}

/* Pasos */
.pas { border: 0; padding: 0; margin: 0 0 var(--sp-6); min-width: 0; }
.pas:last-of-type { margin-bottom: 0; }
.js .pas { margin: 0; display: none; }
.js .pas[data-actiu] { display: block; }
.js .pas[data-actiu] { animation: pasEntra var(--d-media) var(--e-entrada) both; }
.js .pas[data-actiu][data-dir="enrere"] { animation-name: pasEntraEnrere; }

@keyframes pasEntra      { from { opacity: 0; transform: translate3d(28px,0,0); } to { opacity: 1; transform: none; } }
@keyframes pasEntraEnrere{ from { opacity: 0; transform: translate3d(-28px,0,0); } to { opacity: 1; transform: none; } }

.pas__llegenda {
  font-family: var(--font-title); font-size: var(--t-h3); font-weight: 600;
  line-height: 1.2; letter-spacing: -.02em; padding: 0;
  display: block; margin-bottom: var(--sp-2);
}
.pas__ajuda { font-size: var(--t-small); color: var(--ink-2); margin-bottom: var(--sp-4); }
.pas__peu { margin-top: var(--sp-5); display: flex; align-items: center; gap: var(--sp-3); }
.js .pas__peu--nav { justify-content: space-between; }

/* Campo de dirección del hero */
.camp { margin-bottom: var(--sp-4); }
.camp:last-child { margin-bottom: 0; }
.camp > label {
  display: block; font-size: var(--t-small); font-weight: 650;
  margin-bottom: var(--sp-2); color: var(--ink);
}
.camp__control {
  width: 100%; min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--superficie); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radio-s);
  transition: border-color var(--d-rapida) var(--e-estado), box-shadow var(--d-rapida) var(--e-estado);
  /* 16px mínimo: por debajo, iOS hace zoom al enfocar y rompe el layout en el WebView */
  font-size: 16px;
}
.camp__control:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-100); outline: none; }
.camp__control[aria-invalid="true"] { border-color: var(--danger); }
.camp__error { display: block; font-size: var(--t-small); color: var(--danger); margin-top: var(--sp-2); font-weight: 600; }
.camp__error:empty { display: none; }

.camp--adreca { position: relative; }
.js .valorador__entrada { animation: entradaCamp var(--d-lenta) var(--e-entrada) both; }
@keyframes entradaCamp { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }

/* Autocompletado */
.suggeriments {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--superficie); border: 1px solid var(--line); border-radius: var(--radio-s);
  box-shadow: var(--sombra-3); max-height: 260px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.suggeriments li { border-bottom: 1px solid var(--sand); }
.suggeriments li:last-child { border-bottom: 0; }
.suggeriments button {
  display: block; width: 100%; text-align: left; min-height: 52px;
  padding: var(--sp-3) var(--sp-4); font-size: .9375rem; line-height: 1.3;
}
.suggeriments button:hover,
.suggeriments li[aria-selected="true"] > button {
  background: var(--brand-050);
  box-shadow: inset 3px 0 0 var(--brand);
}
.suggeriments .sug__zona { display: block; font-size: var(--t-small); color: var(--ink-3); }
/* Direcciones reales: icono de ubicación + dos líneas */
.suggeriments button { display: flex; align-items: flex-start; gap: 10px; }
.sug__icona { flex: 0 0 auto; margin-top: 2px; color: var(--ink-3); }
.sug__text { display: block; min-width: 0; }

.micro-cta { margin-top: var(--sp-3); text-align: center; }

/* Tarjetas de opción (tipo de inmueble, conservación, intención…) */
.opcions { display: grid; gap: var(--sp-3); }
.opcions--2 { grid-template-columns: repeat(2, 1fr); }
.opcions--3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .opcions--3 { grid-template-columns: repeat(3, 1fr); } }

.opcio { position: relative; }
.opcio input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcio__cara {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--sp-2);
  min-height: 84px; padding: var(--sp-4);
  border: 2px solid var(--line); border-radius: var(--radio-s); background: var(--superficie);
  font-weight: 600; line-height: 1.25;
  transition: border-color var(--d-rapida) var(--e-estado),
              background-color var(--d-rapida) var(--e-estado),
              transform var(--d-rapida) var(--e-estado);
}
.opcio__cara small { display: block; font-weight: 400; font-size: var(--t-small); color: var(--ink-2); }
.opcio input:hover + .opcio__cara { border-color: var(--brand); }
.opcio input:focus-visible + .opcio__cara { outline: 3px solid var(--accent); outline-offset: 3px; }
.opcio input:checked + .opcio__cara {
  border-color: var(--brand); background: var(--brand-050);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.opcio input:active + .opcio__cara { transform: scale(.985); }
.opcio__icona { width: 28px; height: 28px; color: var(--brand); }

/* Chips multiselección (extras) */
.xips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.xip { position: relative; }
.xip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.xip__cara {
  display: inline-flex; align-items: center; gap: .45em;
  min-height: 48px; padding: 0 var(--sp-4);
  border: 2px solid var(--line); border-radius: 999px; background: var(--superficie);
  font-size: .9375rem; font-weight: 600;
  transition: all var(--d-rapida) var(--e-estado);
}
.xip__cara::before {
  content: "+"; font-weight: 700; color: var(--ink-3); transition: transform var(--d-rapida) var(--e-estado);
}
.xip input:checked + .xip__cara { border-color: var(--brand); background: var(--brand); color: var(--sobre-brand); }
.xip input:checked + .xip__cara::before { content: "✓"; color: var(--sobre-brand); transform: scale(1.1); }
.xip input:focus-visible + .xip__cara { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Stepper numérico */
.stepper { display: flex; align-items: center; gap: var(--sp-3); }
.stepper__btn {
  width: 56px; height: 56px; flex: 0 0 56px;
  border: 2px solid var(--line); border-radius: 50%;
  font-size: 1.5rem; line-height: 1; color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--d-rapida) var(--e-estado);
}
.stepper__btn:hover { border-color: var(--brand); background: var(--brand-050); }
.stepper__valor {
  flex: 1; text-align: center; font-family: var(--font-title);
  font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Slider de superficie */
.slider-grup { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.slider-grup input[type="number"] { max-width: 130px; text-align: center; font-weight: 700; }
.slider-grup .unitat { font-weight: 600; color: var(--ink-2); }

input[type="range"] {
  width: 100%; height: 44px; background: transparent; -webkit-appearance: none; appearance: none;
}
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--brand-100); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--brand-100); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 32px; height: 32px; margin-top: -13px;
  border-radius: 50%; background: var(--brand); border: 4px solid var(--superficie);
  box-shadow: var(--sombra-2); cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 32px; height: 32px; border-radius: 50%; background: var(--brand);
  border: 4px solid var(--superficie); box-shadow: var(--sombra-2); cursor: grab;
}

/* Checkbox RGPD */
.consent { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-4); }
.consent input[type="checkbox"] {
  flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px;
  accent-color: var(--brand); cursor: pointer;
}
.consent label { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.consent a { font-weight: 600; }

/* Honeypot: invisible para humanos, presente para bots */
.trampa {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

/* Overlay a pantalla completa (solo con JS)
   ---------------------------------------------------------------------------
   OJO con el contexto de apilamiento: el formulario vive dentro de .hero__cos,
   que lleva `position:relative; z-index:1` para quedar por encima de la imagen
   de fondo. Eso crea un contexto de apilamiento, y el z-index:80 del overlay
   queda atrapado DENTRO de él: por muy alto que sea, todo el bloque compite
   con un z-index efectivo de 1, y la cabecera del sitio (z-index:20) se dibuja
   encima. Por eso, mientras el valorador está abierto, subimos el contexto
   entero. */
body.valorador-obert .hero__cos { z-index: 100; }

.js .valorador--complet {
  position: fixed; inset: 0; z-index: 80;
  border-radius: 0; border: 0; box-shadow: none;
  background: var(--superficie);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0;
  display: flex; flex-direction: column;
  animation: obreOverlay var(--d-media) var(--e-entrada) both;
}
@keyframes obreOverlay { from { opacity: 0; transform: translate3d(0,16px,0); } to { opacity: 1; transform: none; } }
.js .valorador--complet .valorador__cap {
  position: sticky; top: 0; z-index: 5; background: var(--superficie);
  padding: var(--sp-4) var(--gutter) var(--sp-3);
  border-bottom: 1px solid var(--line); margin: 0;
}
.js .valorador--complet .valorador__cos {
  flex: 1; width: 100%; max-width: 40rem; margin-inline: auto;
  padding: var(--sp-6) var(--gutter) calc(var(--sp-8) + var(--safe-b));
}
.valorador__tancar {
  position: absolute; right: var(--gutter); top: var(--sp-3);
  width: 44px; height: 44px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  font-size: 1.25rem; color: var(--ink-2);
}
.js .valorador--complet .valorador__tancar { display: flex; }

/* Cálculo */
.calculant { text-align: center; padding: var(--sp-7) 0; }
.calculant__anell {
  width: 64px; height: 64px; margin: 0 auto var(--sp-5);
  border: 4px solid var(--brand-100); border-top-color: var(--brand);
  border-radius: 50%; animation: gira 900ms linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
.calculant__estat { font-weight: 600; color: var(--ink-2); min-height: 1.6em; }

/* --------------------------------------------------------------------------
   10. RESULTADO
   -------------------------------------------------------------------------- */
.resultat { text-align: center; }
.resultat__avis-demo {
  display: block; background: var(--avis-fons); color: var(--avis-text);
  border: 1px solid var(--avis-vora); border-radius: var(--radio-s);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
  font-size: var(--t-small); font-weight: 600; text-align: left;
}
.resultat__xifra {
  font-family: var(--font-title); font-size: var(--t-xxl); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.05; color: var(--brand-700);
  font-variant-numeric: tabular-nums; margin-block: var(--sp-3);
  display: flex; align-items: baseline; justify-content: center; gap: .25em; flex-wrap: wrap;
}
.resultat__guio { color: var(--ink-3); font-weight: 400; }
/* En móvil esto no cabe en una píldora: se apila en dos líneas legibles.
   A partir de 560 px ya sí entra en una sola línea. */
.resultat__m2 {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  background: var(--brand-050); border: 1px solid var(--brand-100);
  border-radius: var(--radio-s); padding: var(--sp-3) var(--sp-4);
  font-size: var(--t-small); font-weight: 600; color: var(--brand-700);
  text-align: center;
}
.resultat__m2 .separador { display: none; }
@media (min-width: 560px) {
  .resultat__m2 {
    flex-direction: row; justify-content: center; gap: .5em;
    border-radius: 999px; padding: var(--sp-2) var(--sp-4);
  }
  .resultat__m2 .separador { display: inline; }
}
.resultat__grafic { margin: var(--sp-6) 0; }
.resultat__grafic svg { width: 100%; height: auto; }
.resultat__legal {
  font-size: var(--t-small); color: var(--ink-2); text-align: left;
  background: var(--sand); border-left: 3px solid var(--ink-3);
  padding: var(--sp-3) var(--sp-4); border-radius: 0 var(--radio-s) var(--radio-s) 0;
  margin-top: var(--sp-5);
}

/* Muro del informe */
.informe {
  margin-top: var(--sp-6); padding: var(--sp-5);
  border: 2px solid var(--brand-100); border-radius: var(--radio);
  background: var(--brand-050); text-align: left;
}
.informe__previa {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.informe__pagina {
  aspect-ratio: 210/297; background: var(--superficie); border-radius: 6px;
  box-shadow: var(--sombra-1); overflow: hidden; filter: blur(3px);
  padding: 8px 6px;
}
.informe__pagina span { display: block; height: 3px; border-radius: 2px; background: var(--brand-100); margin-bottom: 5px; }
.informe__pagina span:nth-child(1) { background: var(--brand); width: 60%; height: 6px; }
.informe__pagina span:nth-child(3) { width: 80%; }
.informe__pagina span:nth-child(5) { width: 45%; }
.informe__previa::after {
  content: "🔒"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.75rem;
}
.codi-sms {
  display: flex; gap: var(--sp-2); justify-content: flex-start;
}
.codi-sms input {
  width: 56px; height: 64px; text-align: center; font-size: 1.5rem; font-weight: 700;
  border: 2px solid var(--line); border-radius: var(--radio-s);
}
.codi-sms input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 4px var(--brand-100); }

.avis { padding: var(--sp-3) var(--sp-4); border-radius: var(--radio-s); font-size: var(--t-small); font-weight: 600; margin-top: var(--sp-3); }
.avis--ok { background: var(--ok-fons); color: var(--ok-text); }
.avis--error { background: var(--error-fons); color: var(--error-text); }
.avis--info { background: var(--brand-050); color: var(--brand-700); }

/* --------------------------------------------------------------------------
   11. BARRA CTA FIJA (móvil)
   -------------------------------------------------------------------------- */
.cta-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; gap: var(--sp-2); align-items: center;
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + var(--safe-b));
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--d-media) var(--e-entrada);
}
.cta-fixa[data-visible] { transform: translateY(0); }
.cta-fixa .btn { flex: 1; min-height: 52px; }
.cta-fixa .btn--wa { flex: 0 0 52px; padding: 0; }
@media (min-width: 901px) { .cta-fixa { display: none; } }

/* --------------------------------------------------------------------------
   12. PRUEBA SOCIAL
   -------------------------------------------------------------------------- */
.prova-social { background: var(--fosc); color: var(--white); padding-block: var(--sp-6); }
.prova-social__graella {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-4);
  text-align: center;
}
@media (min-width: 720px) { .prova-social__graella { grid-template-columns: repeat(4, 1fr); } }
.xifra {
  font-family: var(--font-title); font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--white); display: block;
}
.xifra__etiqueta { display: block; margin-top: var(--sp-2); font-size: var(--t-small); color: rgba(255,255,255,.75); line-height: 1.35; }

/* --------------------------------------------------------------------------
   13. CÓMO FUNCIONA (sección pinneada en desktop, stack en móvil)
   -------------------------------------------------------------------------- */
.passos { display: grid; gap: var(--sp-5); }
.pas-card {
  background: var(--superficie); border: 1px solid var(--line); border-radius: var(--radio);
  padding: var(--sp-5); box-shadow: var(--sombra-1);
}
.pas-card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand); color: var(--sobre-brand);
  font-family: var(--font-title); font-size: 1.25rem; font-weight: 700;
  margin-bottom: var(--sp-4);
}
.pas-card h3 { margin-bottom: var(--sp-2); }
@media (min-width: 900px) {
  .passos--pin { grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); }
}

/* --------------------------------------------------------------------------
   14. POR QUÉ NOSOTROS / DIFERENCIALES
   -------------------------------------------------------------------------- */
.difs { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .difs { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
.dif {
  border-top: 3px solid var(--accent); padding-top: var(--sp-4);
}
/* La cifra va DENTRO del <h3>: suelta, Google leía "amb preu propi" como si
   fuera el encabezado entero, y eso no significa nada. Visualmente queda
   igual porque el span es display:block. */
.dif__titol { font-size: var(--t-h3); line-height: 1.3; font-weight: 650; }
.dif__dada {
  font-family: var(--font-title); font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700; letter-spacing: -.03em; color: var(--brand-700); line-height: 1;
  display: block; margin-bottom: var(--sp-2);
}

/* --------------------------------------------------------------------------
   FRANJAS DE LLAMADA A LA ACCIÓN
   --------------------------------------------------------------------------
   Toda la página lleva al mismo sitio: el valorador. Estas franjas son las
   salidas intermedias, para que nadie tenga que hacer scroll hasta abajo
   buscando el botón.

   Hay tres variantes para que no parezcan la misma franja repetida cuatro
   veces (que es lo que hace que la gente deje de verlas):
     .crida              sobria, sobre el fondo de la sección
     .crida--destacada   con panel y borde, para el momento de más intención
     .crida--forta       en oscuro, la más llamativa

   Cada botón lleva data-cta con un nombre distinto: así en Analytics se ve
   cuál convierte y cuál sobra. No los pongas todos con el mismo nombre.
   -------------------------------------------------------------------------- */
.crida {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.crida__text { flex: 1 1 18rem; }
.crida__titol { font-size: var(--t-h3); line-height: 1.3; margin-bottom: .25rem; }
.crida__sub { font-size: .9375rem; color: var(--ink-2); }
.crida .btn { flex: 0 0 auto; }

/* Variante con panel: para después de la tabla de precios, que es donde la
   persona acaba de ver el precio de su barrio y quiere el suyo. */
.crida--destacada {
  border: 1px solid var(--line); border-radius: var(--radio);
  background: var(--brand-050);
  padding: var(--sp-5); margin-top: var(--sp-6);
  border-top-width: 1px;
}

/* Variante oscura: una sola vez, para que siga siendo especial. */
.crida--forta {
  background: var(--fosc); color: var(--white);
  border: 0; border-radius: var(--radio);
  padding: var(--sp-5) var(--sp-5);
  margin-top: var(--sp-6);
}
.crida--forta .crida__titol { color: var(--white); }
.crida--forta .crida__sub { color: rgba(255,255,255,.78); }

@media (max-width: 560px) {
  .crida { flex-direction: column; align-items: stretch; }
  .crida .btn { width: 100%; }
  /* En columna, el flex-basis de 18rem se aplica al ALTO y abria un hueco de
     casi 300 px entre el texto y el boton. En vertical, cada uno lo suyo. */
  .crida__text { flex: 0 1 auto; }
}

/* --------------------------------------------------------------------------
   15. MERCADO + ZONAS
   -------------------------------------------------------------------------- */
.taula-embolcall { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radio); border: 1px solid var(--line); }
.taula-mercat { min-width: 34rem; background: var(--superficie); }
.taula-mercat caption { text-align: left; padding: var(--sp-4); font-size: var(--t-small); color: var(--ink-2); }
.taula-mercat th, .taula-mercat td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.taula-mercat thead th { background: var(--sand); font-weight: 700; font-size: var(--t-small); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.taula-mercat tbody tr:last-child td { border-bottom: 0; }
.taula-mercat td:not(:first-child) { font-variant-numeric: tabular-nums; }

.zones { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .zones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .zones { grid-template-columns: repeat(3, 1fr); } }
.zona {
  background: var(--superficie); border: 1px solid var(--line); border-radius: var(--radio);
  padding: var(--sp-5); box-shadow: var(--sombra-1);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.zona h3 { color: var(--brand-700); }
.zona__dades { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--t-small); }
.zona__dada { display: flex; justify-content: space-between; gap: var(--sp-3); border-bottom: 1px dashed var(--line); padding-bottom: var(--sp-2); }
.zona__dada b { font-variant-numeric: tabular-nums; }
.zona__cta { margin-top: auto; }
.zones-secundaries { margin-top: var(--sp-5); font-size: var(--t-small); color: var(--ink-2); }

/* Nota de procedencia bajo las tarjetas de zona: explica por que las del
   Garraf llevan precio de oferta por barrio y las del Alt Penedes, precio
   de compraventa registrada. Sin esto, dos cifras con etiquetas distintas
   en la misma rejilla parecen un descuido. */
.zones-nota {
  margin-top: var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--line);
  font-size: var(--t-small);
  color: var(--ink-2);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   16. TESTIMONIOS
   -------------------------------------------------------------------------- */
/* Situaciones del vendedor (sustituyen a los testimonios).
   Cada tarjeta es una objeción real con su salida al valorador: el CTA de
   dentro convierte mejor que uno solo al final de la sección. */
/* Tres columnas SOLO cuando caben de verdad. A 720 px cada tarjeta se
   quedaba en 200 px utiles y el titular salia en seis lineas, una palabra
   por renglon. Se pasa a dos columnas a 700 y a tres a partir de 1040. */
.casos { display: grid; gap: var(--sp-4); }
@media (min-width: 700px)  { .casos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .casos { grid-template-columns: repeat(3, 1fr); } }
.cas {
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--superficie);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radio);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  box-shadow: var(--sombra-1);
  transition: transform var(--d-rapida) var(--e-estado), box-shadow var(--d-rapida) var(--e-estado);
}
.cas:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.cas__titol {
  font-family: var(--font-body);        /* la serif del titular parte peor */
  font-size: 1.0625rem; line-height: 1.35; font-weight: 700;
  letter-spacing: -.01em; text-wrap: balance;
}
@media (min-width: 1040px) { .cas__titol { font-size: 1.125rem; } }
.cas p { font-size: .9375rem; color: var(--ink-2); }
.cas__accio { margin-top: auto; }
.cas__accio a {
  font-weight: 650; text-decoration: none; color: var(--accent);
  display: inline-block; min-height: 44px; line-height: 44px;
}
.cas__accio a:hover { color: var(--accent-600); text-decoration: underline; }

/* --------------------------------------------------------------------------
   17. AGENTE
   -------------------------------------------------------------------------- */
.agent { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 780px) { .agent { grid-template-columns: 300px 1fr; gap: var(--sp-7); } }
.agent__foto { border-radius: var(--radio); width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.agent__credencials { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0; }
.credencial {
  font-size: var(--t-small); font-weight: 600;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  padding: var(--sp-2) var(--sp-3); border-radius: 999px;
}

/* --------------------------------------------------------------------------
   18. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 64px; padding: var(--sp-4) 0;
  font-family: var(--font-title); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 12px; width: 12px; height: 12px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--d-rapida) var(--e-estado);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details > div { padding-bottom: var(--sp-5); color: var(--ink-2); max-width: var(--ancho-text); }

/* --------------------------------------------------------------------------
   19. CTA FINAL + PIE
   -------------------------------------------------------------------------- */
.cta-final { text-align: center; }
.cta-final .valorador { max-width: 32rem; margin: var(--sp-6) auto 0; text-align: left; }

.peu { background: var(--ink); color: rgba(255,255,255,.72); padding-block: var(--sp-7) var(--sp-6); font-size: .9375rem; }
.peu a { color: rgba(255,255,255,.9); }
.peu a:hover { color: var(--white); }
.peu__graella { display: grid; gap: var(--sp-6); }
@media (min-width: 720px) { .peu__graella { grid-template-columns: 1.2fr 1fr 1fr; } }
.peu h2, .peu h3 { color: var(--white); font-size: 1rem; margin-bottom: var(--sp-3); }
.peu li { margin-bottom: var(--sp-2); }
.peu__legal {
  margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); font-size: var(--t-small);
}
.peu__nap { font-style: normal; line-height: 1.7; }

/* Acceso del equipo al panel. Se empuja al final de la fila y va mas apagado
   que el resto: tiene que poder encontrarse, no llamar la atencion de un
   propietario que solo viene a saber cuanto vale su piso. */
.peu__acces {
  margin-left: auto;
  opacity: .62;
  text-decoration: none;
}
.peu__acces:hover, .peu__acces:focus-visible { opacity: 1; text-decoration: underline; }
/* En movil la fila ya va en varias lineas: el margen automatico no aporta
   nada y deja el enlace colgando raro. */
@media (max-width: 640px) { .peu__acces { margin-left: 0; } }


/* --------------------------------------------------------------------------
   19b. BOTONERA — bloque oscuro de llamada a la acción
   Composición de la captura del cliente (RealAdvisor): tarjeta oscura con
   esquinas grandes, eyebrow con línea, titular en dos tonos con subrayado,
   subtítulo, botón con halo y línea de cifras. Colores de la marca.
   -------------------------------------------------------------------------- */
.botonera { background: var(--sand); padding: clamp(2.5rem, 5vw, 4.5rem) clamp(12px, 3vw, 40px); }
.botonera__card {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 1320px; margin-inline: auto;
  border-radius: clamp(24px, 3vw, 40px);
  background: #0B1C21;
  padding: clamp(3.5rem, 8vw, 7.5rem) clamp(1.25rem, 5vw, 4rem);
  text-align: center; color: var(--white);
}
.botonera__card::before {   /* halo de color arriba a la derecha */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 75% at 100% 0%, rgba(42,147,165,.42), rgba(15,92,107,.12) 45%, transparent 70%);
}
.botonera__foto {
  position: absolute; z-index: -2; top: 0; right: 0; width: 62%; height: 100%;
  opacity: .22; pointer-events: none;
  -webkit-mask-image: radial-gradient(80% 90% at 100% 0%, #000 20%, transparent 72%);
          mask-image: radial-gradient(80% 90% at 100% 0%, #000 20%, transparent 72%);
}
.botonera__foto picture, .botonera__foto img { display: block; width: 100%; height: 100%; }
.botonera__foto img { object-fit: cover; background: transparent; }

.botonera__eyebrow {
  display: inline-flex; align-items: center; gap: 1rem;
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
  font-size: clamp(.75rem, .7rem + .2vw, .875rem); font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--fosc-suau);
}
.botonera__eyebrow::before { content: ""; width: 3rem; height: 1.5px; background: currentColor; }

.botonera__titol {
  font-family: var(--font-body); font-weight: 800;
  font-size: clamp(2rem, 1.1rem + 3.6vw, 4.25rem);
  line-height: 1.08; letter-spacing: -.035em;
  color: var(--white); text-wrap: balance;
}
.botonera__titol span { display: block; }
.botonera__accent {
  color: var(--fosc-suau);
  text-decoration: underline;
  text-decoration-color: rgba(143,211,222,.45);
  text-decoration-thickness: .075em;
  text-underline-offset: .12em;
}
.botonera__sub {
  max-width: 46rem; margin: clamp(1rem, 2vw, 1.5rem) auto 0;
  font-size: clamp(1rem, .92rem + .45vw, 1.375rem); line-height: 1.65;
  color: rgba(255,255,255,.74);
}
.botonera__btn,
.botonera__btn:hover {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  min-height: 64px; padding: 0 2.25rem; border-radius: 12px;
  background: var(--accent); color: var(--white);
  font-size: 1.125rem; font-weight: 700;
  box-shadow: 0 14px 36px -10px rgba(192,73,31,.65);
}
.botonera__btn:hover { background: var(--accent-600); transform: translateY(-1px); }
.botonera__xifres {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-size: clamp(.8125rem, .78rem + .15vw, .9375rem);
  color: rgba(255,255,255,.62);
}
.botonera__xifres span { margin-inline: .35em; }
@media (max-width: 480px) {
  .botonera__btn { width: 100%; padding: 0 1rem; }
  .botonera__foto { width: 100%; opacity: .16; }
}

/* --------------------------------------------------------------------------
   20. BANNER DE COOKIES (AEPD: Rechazar con el mismo peso que Aceptar)
   -------------------------------------------------------------------------- */
.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--superficie); border-top: 2px solid var(--brand-700);
  box-shadow: 0 -8px 32px rgba(10,31,38,.16);
  /* Compacto a propósito: llega gente desde un Reel y el campo de dirección
     del hero tiene que seguir viéndose. Un banner de media pantalla en móvil
     se lleva por delante la conversión. */
  padding: var(--sp-4) var(--gutter) calc(var(--sp-3) + var(--safe-b));
  max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.cookies__cos { max-width: var(--ancho); margin-inline: auto; }
.cookies__titol { font-size: 1rem; margin-bottom: var(--sp-1); }
.cookies p.small { font-size: 0.8125rem; line-height: 1.45; }
/* Los tres botones, mismo tamaño y misma fila: "Rechazar" no puede costar
   más esfuerzo que "Aceptar" (Guía de cookies de la AEPD). */
.cookies__botons {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2); margin-top: var(--sp-3);
}
.cookies__botons .btn { width: 100%; min-height: 48px; padding: 0 var(--sp-2); font-size: .875rem; }
.cookies__panell { margin-top: var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.cookies__opcio { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) 0; border-bottom: 1px solid var(--sand); }
.cookies__opcio input { flex: 0 0 24px; width: 24px; height: 24px; accent-color: var(--brand); margin-top: 2px; }

/* --------------------------------------------------------------------------
   21. MOVIMIENTO — reveals base (funcionan sin GSAP)
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--d-lenta) var(--e-entrada), transform var(--d-lenta) var(--e-entrada);
  transition-delay: var(--retard, 0ms);
}
.js [data-reveal].es-visible { opacity: 1; transform: none; }

/* Cursor de escritorio (halo discreto) */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none;
  width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border: 1.5px solid var(--brand); border-radius: 50%;
  transition: width 200ms var(--e-estado), height 200ms var(--e-estado),
              margin 200ms var(--e-estado), opacity 200ms var(--e-estado),
              background-color 200ms var(--e-estado);
  opacity: 0;
}
.cursor[data-actiu] { opacity: .55; }
.cursor[data-hover] { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(15,92,107,.08); opacity: .9; }
@media (hover: none), (max-width: 900px) { .cursor { display: none; } }

/* --------------------------------------------------------------------------
   22. prefers-reduced-motion
   Solo desactivamos lo intrusivo (pin, parallax, split-text, cursor).
   Las microinteracciones y los fades cortos se quedan: en muchos Windows esta
   preferencia viene activada de fábrica y la página se vería muerta.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .linia > span { transform: none !important; transition: none !important; }
  .hero__fons { transform: none !important; }
  [data-parallax] { transform: none !important; }
  .cursor { display: none; }
  /* El fade corto se queda (si no, en Windows la página parece muerta), pero
     sin desplazamiento. Y el estado de reposo es VISIBLE: con movimiento
     reducido nadie debería depender de que se dispare una animación para
     poder leer. */
  .js [data-reveal] { transition-duration: 240ms; transform: none; opacity: 1; }
  .js [data-reveal]:not(.es-visible) { animation: apareix 240ms var(--e-entrada) both; }
}
@keyframes apareix { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   23. IMPRESIÓN — respaldo del informe cuando no hay librería PDF
   -------------------------------------------------------------------------- */
@media print {
  .capcalera, .cta-fixa, .cookies, .barra-scroll, .cursor,
  .seccion:not(.per-imprimir), .peu, .valorador__cap { display: none !important; }
  body { padding: 0; background: var(--superficie); }
  .informe-imprimible { display: block !important; }
  .informe-imprimible .pagina-informe { page-break-after: always; padding: 12mm; }
  a[href]::after { content: ""; }
}
.informe-imprimible { display: none; }

/* ==========================================================================
   TÀCTIL — vegeu la nota llarga al final d'assets/css/valorar.css
   ========================================================================== */
.opcio, .opcio__cara, .xip, .xip__cara, .stepper__btn,
.btn, button, [data-accio], label, a[href], select, summary,
input[type="radio"], input[type="checkbox"], input[type="submit"] {
  touch-action: manipulation;
}

@media not all and (hover: hover) and (pointer: fine) {
  .btn--principal:hover { background: var(--accent); box-shadow: none; }
  .btn--marca:hover     { background: var(--brand); }
  .btn--contorn:hover   { border-color: var(--vora); background: transparent; }
  .btn.btn--wa:hover    { background: #0B6B61; }
  .btn--fantasma:hover  { color: var(--ink-2); }
  .opcio input:hover + .opcio__cara { border-color: var(--vora); }
  .stepper__btn:hover   { border-color: var(--vora); background: transparent; }
  .cas__accio a:hover   { color: var(--accent); text-decoration: none; }
  .botonera__btn:hover  { background: var(--accent); transform: none; }
}