/* ============================================================================
   Kurae — landing de prellançament.

   Fitxer propi i no una secció de public.css: la landing viu poques setmanes i
   el dia que s'estrena la web es retira sencera esborrant dos fitxers. Barrejada
   dins del CSS públic quedarien regles òrfenes que ningú s'atreviria a tocar.

   Els tokens són ELS MATEIXOS que public.css (contrast ja verificat). No es
   redefineixen valors de marca aquí: si el verd canvia, canvia en un sol lloc.
   ========================================================================== */
:root {
  --salvia: #1F7A5C;
  --salvia-dark: #14563F;
  --salvia-50: #EEF7F3;
  --salvia-100: #D3EBE0;
  --salvia-200: #A8D7C2;
  --oro: #C9A227;
  --oro-50: #FBF6E4;

  --tinta: #12211C;
  --tinta-2: #45524C;
  --gris: #6B7671;
  --gris-clar: #939D98;
  --vora: #E3E7E4;
  --vora-suau: #EFF2F0;
  --fons: #FFFFFF;
  --fons-enfonsat: #F7F9F8;

  --pes-titular: 800;
  --pes-titol: 700;
  --pes-dada: 600;
  --pes-mig: 500;
  --pes-text: 400;

  --radi-sm: 8px;
  --radi: 14px;
  --radi-lg: 20px;

  --ombra-suau: 0 1px 2px rgba(18, 33, 28, .04);
  --ombra-carta: 0 1px 3px rgba(18, 33, 28, .05), 0 8px 24px -12px rgba(18, 33, 28, .14);
  --ombra-alta: 0 2px 6px rgba(18, 33, 28, .06), 0 16px 40px -16px rgba(18, 33, 28, .22);
  /* La captura d'un mòbil necessita més elevació que una targeta: ha de
     semblar un objecte damunt la pàgina, no una imatge enganxada. */
  --ombra-mobil: 0 4px 12px rgba(18, 33, 28, .08), 0 32px 64px -24px rgba(18, 33, 28, .32);

  --transicio: 180ms cubic-bezier(.22, .61, .36, 1);

  /* Amplada de lectura separada de l'amplada de composició. El text llarg es
     llegeix malament a 1200px; les seccions amb imatge necessiten aquesta
     amplada. Dos tokens, no un. */
  --ample: 1180px;
  --ample-text: 640px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: var(--pes-text);
  /* 1.65 i no 1.5: la Montserrat té una x-height alta i el text corregut
     s'apilona amb interlineat curt. */
  line-height: 1.65;
  color: var(--tinta);
  background: var(--fons);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Els preus i les xifres s'han d'alinear en columna. */
.xifra { font-variant-numeric: tabular-nums; }

.embolcall { width: 100%; max-width: var(--ample); margin: 0 auto; padding: 0 24px; }

/* ── Tipografia de secció ──────────────────────────────────────────────────
   clamp() i no media queries: entre 360px i 1400px la mida ha de créixer de
   forma contínua. Amb salts, hi ha sempre una amplada on el titular queda
   desproporcionat. */
.eyebrow {
  font-size: .75rem;
  font-weight: var(--pes-dada);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--salvia);
}
.titol-seccio {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  font-weight: var(--pes-titol);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-top: .75rem;
}
.entradeta {
  font-size: 1.0625rem;
  color: var(--tinta-2);
  max-width: 52ch;
  margin-top: 1rem;
}

/* ── Botons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radi-sm);
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--pes-dada);
  cursor: pointer;
  transition: background var(--transicio), border-color var(--transicio),
              transform var(--transicio), box-shadow var(--transicio);
}
.btn-principal { background: var(--salvia); color: #fff; box-shadow: var(--ombra-carta); }
.btn-principal:hover { background: var(--salvia-dark); transform: translateY(-1px); box-shadow: var(--ombra-alta); }
.btn-secundari { background: transparent; color: var(--tinta); border-color: var(--vora); }
.btn-secundari:hover { border-color: var(--salvia); color: var(--salvia); background: var(--salvia-50); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Focus visible de debò. L'anell per defecte del navegador desapareix sobre
   fons verds; aquest es veu sobre qualsevol dels dos. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--salvia);
  outline-offset: 3px;
  border-radius: var(--radi-sm);
}

/* ══ CAPÇALERA ═════════════════════════════════════════════════════════════
   Sense navegació: no hi ha on anar, i uns enllaços falsos delaten la landing.
   Només marca i una àncora al formulari. */
.cap {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicio), box-shadow var(--transicio);
}
.cap.enganxada { border-bottom-color: var(--vora-suau); box-shadow: var(--ombra-suau); }
.cap .embolcall { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 1rem; }

/* El logotip de debò, no el nom escrit amb la tipografia de la pàgina: la
   «kurae» de la marca té les lletres i el ritme propis i escriure-la a mà es
   nota de seguida. `height` fixa i `width:auto` perquè no s'estiri mai. */
.marca-logo { height: 30px; width: auto; }
.marca-logo-peu { height: 34px; }

/* Botó compacte: a la capçalera, el mateix encoixinat que al cos el fa
   desproporcionat. */
.cap-btn { padding: .6rem 1.15rem; font-size: .875rem; }

/* ══ HERO ══════════════════════════════════════════════════════════════════
   Asimètric: 1.05fr / .95fr, no dues meitats. Una reixa perfectament simètrica
   és el que fa que una pàgina sembli una plantilla. */
.hero { padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0 clamp(3rem, 2rem + 4vw, 5.5rem); overflow: hidden; }
.hero .embolcall {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.hero-titular {
  /* Màxim 3.25rem i no 4: amb el titular actual —tres línies, la més llarga
     de 19 caràcters— a 4rem el navegador partia «Sense comissions» pel mig i
     quedaven cinc línies desiguals. */
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  /* Que cap línia es parteixi si no hi cap: val més que s'encongeixi. */
  text-wrap: balance;
  font-weight: var(--pes-titular);
  line-height: 1.04;
  letter-spacing: -.035em;
  /* El cartell de la data va just a sobre i amb interlineat 1.04 el titular
     se li enganxava. */
  margin-top: 1.5rem;
}
/* L'única frase en verd de tot el hero. Un accent que es fa servir dues
   vegades deixa de ser accent. */
.hero-titular em { font-style: normal; color: var(--salvia); }
.hero-sub { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--tinta-2); max-width: 46ch; margin-top: 1.5rem; }
.hero-accions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.25rem; }
/* `display:block` i no flex: en pantalla estreta el flex partia la frase en
   dues columnes de diferent alçada i «0% de comissió per cita.» quedava
   desalineat respecte de la resta. Així flueix com una sola frase. */
.hero-nota { margin-top: 1rem; font-size: .8125rem; color: var(--gris); }
.hero-nota strong { color: var(--tinta); }

/* ── Alta ràpida del hero ──────────────────────────────────────────────────
   Sense caixa ni vora: dins del hero, una targeta amb marc competiria amb els
   mòbils i partiria la composició en dos blocs que es miren de reüll. Els
   camps sols, sobre el fons, es llegeixen com una continuació del titular. */
.alta-rapida { margin-top: 2rem; max-width: 480px; }
.alta-rapida-camps { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; }
/* El nom del negoci ocupa tota l'amplada: és el camp llarg i partit en dues
   columnes obligava a escriure dins d'una caixa estreta. */
.alta-rapida-camps .camp:first-child { grid-column: 1 / -1; }
.alta-rapida-btn { width: 100%; margin-top: 1rem; }

.hero-enllac-client { margin-top: 1.5rem; font-size: .875rem; color: var(--gris); }
.hero-enllac-client a {
  color: var(--salvia);
  font-weight: var(--pes-dada);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Data d'obertura. Vora daurada i mai text daurat: amb 2,42 de contrast el
   daurat no es llegeix. */
.cartell-data {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem 1rem;
  background: var(--oro-50);
  border: 1px solid rgba(201, 162, 39, .35);
  border-radius: 100px;
  font-size: .8125rem;
  font-weight: var(--pes-dada);
  color: #6B5410;
}
.punt-viu {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--oro);
  box-shadow: 0 0 0 0 rgba(201, 162, 39, .6);
  animation: batec 2.4s infinite;
}
@keyframes batec {
  0%   { box-shadow: 0 0 0 0 rgba(201, 162, 39, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(201, 162, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
}
@media (prefers-reduced-motion: reduce) { .punt-viu { animation: none; } }

/* ── Composició del hero: dues captures encavalcades ───────────────────────
   Encavalcar-les i inclinar-les lleugerament fa que semblin objectes; posades
   planes i centrades queden com un catàleg.

   Les captures són de mòbil (relació 1:2), i deixades senceres fan el hero
   altíssim: el titular queda fora de pantalla i el primer que es veu en obrir
   la pàgina són dues imatges sense context. Es retallen per baix amb una
   alçada màxima lligada a la finestra — s'ensenya la part de dalt, que és la
   que explica la pantalla. */
/* L'alçada la marca el mòbil de davant, que es veu SENCER. Abans es retallava
   per baix i el resultat era un telèfon serrat: el marc quedava obert i
   delatava que allò era una imatge tallada, no un dispositiu. */
.hero-visual { position: relative; }
/* ── Marc de mòbil ─────────────────────────────────────────────────────────
   Sense marc, una captura vertical amb les cantonades arrodonides es llegeix
   com una targeta, no com un telèfon. El bisell fosc és el que fa la lectura
   de dispositiu.

   El marc el fa el `padding` del contenidor, no un `border`: així el gruix del
   bisell no entra al càlcul de la proporció de la pantalla i la captura no
   s'aixafa. La cantonada de fora ha de ser més oberta que la de dins —un
   telèfon real té el vidre encaixat dins del xassís—, per això 34px i 24px. */
.mobil {
  border-radius: 34px;
  padding: 9px;
  background: linear-gradient(160deg, #2A3A34 0%, #12211C 46%, #253530 100%);
  box-shadow:
    /* Fil clar al cantell: simula la llum rebotant al metall. */
    inset 0 0 0 1px rgba(255, 255, 255, .13),
    var(--ombra-mobil);
}
.mobil img {
  width: 100%;
  /* Omple l'alçada del marc. Amb `height:auto` la imatge conservava la seva
     pròpia proporció mentre el marc en tenia una altra —la del contenidor amb
     els 9px de bisell inclosos—, i la diferència deixava una franja del fons
     clar assomant per sota de la captura: la ratlla blanca al peu del mòbil.
     `cover` no deforma res perquè les dues proporcions gairebé coincideixen;
     el mig píxel de diferència es reparteix al retall. */
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  border-radius: 24px;
  /* Vora fosca al voltant del vidre. Abans era un `inset` blanquinós, pensat
     per a captures que acaben en una barra fosca; però n'hi ha que acaben en
     blanc —la pantalla de reserva— i allà el blanc de la captura i el blanc
     del full es fonien deixant una ratlla clara enganxada al bisell. Una
     línia fosca tanca el vidre passi el que passi a la captura. */
  box-shadow: inset 0 0 0 1px rgba(18, 33, 28, .18);
}

/* Cada captura té la seva pròpia mida (2178, 2160 i 2179 píxels d'alt), així
   que el marc pren la proporció de la SEVA imatge amb `aspect-ratio: auto`:
   una xifra fixa per a tots tres retallaria dues de les tres. L'alçada la
   marca la imatge i el bisell l'envolta. */
.mobil { aspect-ratio: auto; }
.mobil img { height: auto; object-fit: fill; }

/* Altaveu superior. Un pseudoelement i no una imatge: són sis píxels de
   detall i no val la pena una petició més. */
.mobil::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 26%;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .22);
  z-index: 3;
}
.mobil { position: relative; }

/* Els dos mòbils SENCERS i encavalcats. El de davant marca l'alçada del bloc;
   el de darrere se situa contra ell en absolut, desplaçat i girat. Cap dels
   dos es retalla: un telèfon amb el marc obert per baix no sembla un telèfon.
   La captura de dins sí que es retalla, però contra el propi marc, que segueix
   tancat pels quatre costats. */
/* Els dos telèfons es veuen SENCERS, amb el marc tancat pels quatre costats.
   Retallats per baix semblaven serrats i delataven que allò era una imatge
   tallada. Com que la captura és molt allargada, el que s'escurça és
   l'AMPLADA del conjunt, no l'alçada de cada aparell. */
.hero-mobil-a {
  position: relative;
  width: 52%;
  margin-left: auto;
  transform: rotate(2deg);
  z-index: 2;
}
.hero-mobil-b {
  position: absolute;
  left: 0;
  bottom: 6%;
  width: 44%;
  transform: rotate(-4deg);
  z-index: 1;
}

/* ══ BARRA DE XIFRES ═══════════════════════════════════════════════════════ */
.barra-xifres { background: var(--fons-enfonsat); border-block: 1px solid var(--vora-suau); }
.barra-xifres .embolcall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 1rem + 4vw, 5rem);
  padding-block: 2.25rem;
}
.xifra-bloc { text-align: center; }
.xifra-valor { font-size: 2rem; font-weight: var(--pes-titular); color: var(--salvia); line-height: 1; letter-spacing: -.02em; }
.xifra-etiqueta { font-size: .8125rem; color: var(--gris); margin-top: .5rem; }

/* ══ SECCIONS ══════════════════════════════════════════════════════════════
   Aire desigual a propòsit: entre seccions respira més que dins d'una. */
.seccio { padding-block: clamp(4rem, 2.5rem + 6vw, 7.5rem); }
.seccio-enfonsada { background: var(--fons-enfonsat); }
.seccio-cap { max-width: var(--ample-text); }
.seccio-cap-centrat { max-width: var(--ample-text); margin-inline: auto; text-align: center; }
.seccio-cap-centrat .entradeta { margin-inline: auto; }

/* ── El problema: tres blocs amb número, sense icones genèriques ───────────
   Les icones de colors dins de cercles són el tic més reconeixible d'una
   plantilla. Un número gran en verd clar fa la mateixa feina i no menteix. */
.reixa-problema {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  margin-top: 3.5rem;
}
.problema-num {
  font-size: 2.5rem;
  font-weight: var(--pes-titular);
  color: var(--salvia-200);
  line-height: 1;
  letter-spacing: -.03em;
}
.problema-titol { font-size: 1.125rem; font-weight: var(--pes-titol); margin-top: 1rem; }
.problema-text { color: var(--tinta-2); margin-top: .5rem; font-size: .9375rem; }

/* ── Files de producte: text i captura, alternant costat ───────────────────
   :nth-child(even) inverteix l'ordre visual sense tocar l'ordre del DOM, que
   ha de seguir sent el de lectura per a un lector de pantalla. */
.fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 5vw, 5.5rem);
  align-items: center;
}
.fila + .fila { margin-top: clamp(4rem, 2rem + 6vw, 7rem); }
/* `nth-of-type` i no `nth-child`: dins de la secció hi ha abans el bloc de
   capçalera, així que amb `nth-child` la numeració ballava i la primera fila
   sortia amb la imatge a l'esquerra. La primera SEMPRE ha de dur el text
   primer: és la que estableix com es llegeix la secció. */
.fila:nth-of-type(even) .fila-text { order: 2; }
.fila-titol { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); font-weight: var(--pes-titol); line-height: 1.2; letter-spacing: -.02em; }
.fila-text p { color: var(--tinta-2); margin-top: 1rem; }
.llista-neta { list-style: none; margin-top: 1.5rem; display: grid; gap: .75rem; }
.llista-neta li { display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; color: var(--tinta-2); }
/* Marca de verificació dibuixada amb CSS: cap llibreria d'icones per tres
   marques, i sempre agafa el verd de marca. */
.llista-neta li::before {
  content: '';
  flex: none;
  width: 6px; height: 11px;
  margin: 6px 4px 0 2px;
  border: solid var(--salvia);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Dins de les files sí que s'ensenya la captura sencera: aquí la imatge ÉS
   l'argument i retallar-la amagaria justament el que el text acaba de
   prometre. L'amplada curta evita que un mòbil de 1080x2178 ocupi dues
   pantalles d'alçada. */
/* Dins de les files sí que s'ensenya la captura sencera: aquí la imatge ÉS
   l'argument i retallar-la amagaria justament el que el text acaba de
   prometre. */
.marc-mobil { width: min(272px, 72%); margin-inline: auto; }

/* ── Fila ampla, per a les captures d'escriptori ───────────────────────────
   Una captura de 1440px dins de mitja columna es queda a 500px: el text de
   dins baixa a 5-6px i no es llegeix res. Aquestes files passen a una sola
   columna, amb el text a dalt i la captura a sota a tota amplada, on la
   pantalla es veu prou gran per demostrar el que s'explica. */
.fila-ampla { display: block; }
.fila-ampla .fila-text { max-width: var(--ample-text); margin-bottom: 2.5rem; }
.fila-ampla .llista-neta {
  /* Tres columnes a tota l'amplada. Els punts d'aquestes files són CURTS —una
     línia cadascun— precisament perquè aquí es llegeixen en columna: amb
     frases llargues queien a cinc línies i el bloc es veia escanyat. La
     explicació llarga va al paràgraf de sobre, que sí que té amplada. */
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 3rem;
  max-width: none;
}
/* Els punts d'aquestes files són frases, no etiquetes: una mica més petits i
   amb menys interlineat que el text corregut, perquè dues línies es llegeixin
   com un bloc i no com dos paràgrafs. */
.fila-ampla .llista-neta li { font-size: .9375rem; line-height: 1.5; }

@media (max-width: 900px) {
  .fila-ampla .llista-neta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .fila-ampla .llista-neta { grid-auto-flow: row; gap: .75rem; }
}
/* ── Marc de navegador ─────────────────────────────────────────────────────
   Les captures del cercador són de 1440x950. Posades senceres dins de mitja
   columna, el text de dins queda a menys de la meitat de la mida original i no
   es llegeix res: la captura deixa de demostrar el que promet.

   Es retallen a proporció panoràmica i s'ensenya la part de dalt, que és on
   passa el que interessa —el llistat i el primer pas de la reserva—. La barra
   de botons de dalt fa que es llegeixi com una finestra i no com una imatge
   enganxada. */
.marc-escriptori {
  border-radius: var(--radi);
  border: 1px solid var(--vora);
  box-shadow: var(--ombra-alta);
  overflow: hidden;
  background: #fff;
  padding-top: 34px;
  position: relative;
}
.marc-escriptori::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 34px;
  background: var(--fons-enfonsat);
  border-bottom: 1px solid var(--vora);
}
/* Els tres botons de la finestra, dibuixats amb ombres en comptes de tres
   elements buits. */
.marc-escriptori::after {
  content: '';
  position: absolute;
  top: 13px;
  left: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E0E4E2;
  box-shadow: 15px 0 0 #E0E4E2, 30px 0 0 #E0E4E2;
}
/* Sencera i sense escalar: `cover` ampliava la imatge per omplir una
   proporció inventada i se'n menjava els costats —el logo desapareixia i el
   títol sortia partit—. Encaixada per amplada, es veu tot el que la captura
   ha de demostrar. */
.marc-escriptori img { width: 100%; height: auto; }

/* ══ AVANTATGES ════════════════════════════════════════════════════════════ */
.reixa-avantatges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
}
.targeta {
  background: var(--fons);
  border: 1px solid var(--vora);
  border-radius: var(--radi);
  padding: 1.75rem;
  box-shadow: var(--ombra-suau);
  transition: transform var(--transicio), box-shadow var(--transicio), border-color var(--transicio);
}
.targeta:hover { transform: translateY(-2px); box-shadow: var(--ombra-carta); border-color: var(--salvia-100); }
.targeta h3 { font-size: 1.0625rem; font-weight: var(--pes-titol); }
.targeta p { color: var(--tinta-2); font-size: .9375rem; margin-top: .625rem; }
.targeta-destacada { border-color: var(--salvia-200); background: var(--salvia-50); }

/* ══ FORMULARIS ════════════════════════════════════════════════════════════
   Dues columnes desiguals: el formulari del saló és el que importa i ocupa
   més. Dues targetes idèntiques dirien que els dos públics pesen igual, i no
   és cert — sense salons no hi ha producte. */
.reixa-formularis {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 1.5rem;
  margin-top: 3.5rem;
  align-items: start;
}
.caixa-form {
  background: var(--fons);
  border: 1px solid var(--vora);
  border-radius: var(--radi-lg);
  padding: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--ombra-carta);
}
.caixa-form.principal { border-color: var(--salvia-200); box-shadow: var(--ombra-alta); }
.form-titol { font-size: 1.375rem; font-weight: var(--pes-titol); letter-spacing: -.015em; }
.form-sub { color: var(--tinta-2); font-size: .9375rem; margin-top: .5rem; }

.camps { display: grid; gap: 1rem; margin-top: 1.75rem; }
.camps-parell { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.camp { display: grid; gap: .4rem; }
.camp label { font-size: .8125rem; font-weight: var(--pes-dada); color: var(--tinta-2); }
.camp input, .camp select {
  width: 100%;
  padding: .8rem .9rem;
  font-family: inherit;
  font-size: .9375rem;
  color: var(--tinta);
  background: var(--fons);
  border: 1px solid var(--vora);
  border-radius: var(--radi-sm);
  transition: border-color var(--transicio), box-shadow var(--transicio);
}
.camp input::placeholder { color: var(--gris-clar); }
.camp input:focus, .camp select:focus {
  outline: none;
  border-color: var(--salvia);
  box-shadow: 0 0 0 3px var(--salvia-50);
}
.camp input[aria-invalid="true"] { border-color: #8C2F2F; }

/* Parany per a robots: ha de ser invisible i inabastable, però NO
   display:none — alguns bots l'ignoren precisament per això. Fora de
   pantalla i sense tabulació funciona millor. */
.parany {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-peu { font-size: .75rem; color: var(--gris); margin-top: 1rem; }
.form-peu a { color: var(--salvia); text-decoration: underline; text-underline-offset: 2px; }
.btn-bloc { width: 100%; margin-top: 1.5rem; }

.avis { margin-top: 1rem; padding: .875rem 1rem; border-radius: var(--radi-sm); font-size: .875rem; display: none; }
.avis.visible { display: block; }
.avis-ok { background: var(--salvia-50); color: var(--salvia-dark); border: 1px solid var(--salvia-200); }
.avis-mal { background: #FBEDED; color: #8C2F2F; border: 1px solid #F0D5D5; }

/* ══ PEU ═══════════════════════════════════════════════════════════════════ */
.peu { background: var(--tinta); color: #fff; padding-block: 3.5rem; }
.peu .embolcall { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: center; }
.peu .marca { color: #fff; }
.peu-text { font-size: .875rem; color: rgba(255, 255, 255, .62); margin-top: .5rem; max-width: 40ch; }
.peu-xarxes { display: flex; gap: .75rem; }
.peu-xarxa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radi-sm);
  color: rgba(255, 255, 255, .75);
  transition: background var(--transicio), color var(--transicio), border-color var(--transicio);
}
.peu-xarxa:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .35); }
.peu-legal { width: 100%; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .8125rem; color: rgba(255, 255, 255, .5); }

/* ══ APARICIÓ EN ENTRAR A PANTALLA ═════════════════════════════════════════
   El desplaçament és de 12px, no de 40: un moviment llarg crida l'atenció
   sobre l'animació en comptes del contingut. */
.apareix { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1); }
.apareix.dins { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .apareix { opacity: 1; transform: none; transition: none; }
}

/* ══ RESPONSIVE ════════════════════════════════════════════════════════════ */
/* Tauleta i portàtil petit ─────────────────────────────────────────────── */
@media (max-width: 1080px) {
  /* El formulari del hero necessita amplada per als seus camps; abans que
     quedin espremuts, la columna visual s'estreny. */
  .hero .embolcall { grid-template-columns: 1fr .8fr; gap: 2rem; }
  .hero-mobil-a { width: 80%; }
  .hero-mobil-b { width: 62%; }
}

@media (max-width: 900px) {
  .hero .embolcall { grid-template-columns: 1fr; }
  /* Els mòbils passen sota el text i es limiten en amplada: a tota l'amplada
     de la columna es veurien gegants. */
  .hero-visual { max-width: 460px; margin: 2.5rem auto 0; }
  .alta-rapida { max-width: none; }

  .fila { grid-template-columns: 1fr; }
  /* En una sola columna el text sempre va primer: una captura sense context
     obliga a endevinar què s'està mirant. */
  .fila:nth-of-type(even) .fila-text { order: 0; }
  .reixa-formularis { grid-template-columns: 1fr; }
}

/* Mòbil ─────────────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .embolcall { padding-inline: 20px; }
  .camps-parell { grid-template-columns: 1fr; }
  /* Un sol camp per fila: dos camps a 160px no deixen escriure un correu. */
  .alta-rapida-camps { grid-template-columns: 1fr; }

  /* Amb un sol mòbil n'hi ha prou: dos encavalcats en 320px es tapen l'un a
     l'altre i no s'entén cap dels dos.

     I RECTE. Una inclinació d'un grau no es llegeix com una decisió de
     disseny: sembla una foto enganxada de gairell. En escriptori els dos
     aparells girats formen una composició i el gest s'entén; aquí, amb un de
     sol i centrat, l'únic que fa la rotació és semblar un error.

     I SENCER, com a escriptori: el marc tancat pels quatre costats és el que
     el fa semblar un telèfon. Retallar-lo per baix li treu la base i torna a
     semblar una imatge tallada. */
  .hero-visual { max-width: 340px; }
  .hero-mobil-a { width: 100%; margin: 0; transform: none; }
  .hero-mobil-b { display: none; }

  .cap .embolcall { height: 64px; }
  .marca-logo { height: 24px; }
  .cap-btn { padding: .5rem .9rem; font-size: .8125rem; }

  .peu .embolcall { flex-direction: column; align-items: flex-start; }
}

/* Molt estret (360px i menys): que res no desbordi ni obligui a fer zoom. */
@media (max-width: 380px) {
  .embolcall { padding-inline: 16px; }
  .hero-titular { letter-spacing: -.03em; }
  .cap-btn { padding: .45rem .75rem; font-size: .75rem; }
}

/* Missatge que reemplaça el formulari un cop enviat. Dins del hero no ha de
   dur caixa —competiria amb els mòbils—; dins d'una targeta, ja la té. */
.form-fet { margin-top: 2rem; }
.form-fet .form-titol { color: var(--salvia); }

/* ── Camp de telèfon amb prefix ────────────────────────────────────────────
   El selector i l'input són dos controls que han de semblar-ne un de sol: es
   dibuixa la vora al contenidor i es treu la de cadascun, si no es veuen dues
   caixes enganxades. */
.camp-telefon {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--vora);
  border-radius: var(--radi-sm);
  background: var(--fons);
  overflow: hidden;
  transition: border-color var(--transicio), box-shadow var(--transicio);
}
/* El focus il·lumina TOT el camp, no només la meitat que s'està fent servir. */
.camp-telefon:focus-within {
  border-color: var(--salvia);
  box-shadow: 0 0 0 3px var(--salvia-50);
}
.camp-telefon .prefix,
.camp-telefon input {
  border: none;
  border-radius: 0;
  background: transparent;
}
.camp-telefon .prefix:focus,
.camp-telefon input:focus { outline: none; box-shadow: none; }

.camp-telefon .prefix {
  flex: none;
  width: auto;
  padding: .8rem .5rem .8rem .9rem;
  font-weight: var(--pes-dada);
  color: var(--tinta-2);
  cursor: pointer;
}
/* Amb una sola opció, la fletxa promet un desplegable que no despenja res. */
.camp-telefon .prefix { appearance: none; -webkit-appearance: none; padding-right: .9rem; }
.camp-telefon input { flex: 1; min-width: 0; padding-left: .25rem; }

/* Separador entre prefix i número: mig to més fosc que la vora exterior perquè
   es llegeixi com una divisió interna, no com un altre camp. */
.camp-telefon .prefix { border-right: 1px solid var(--vora-suau); }