/* ═══════════════════════════════════════════════════════════════════
   Autoescola L-23 — full d'estils únic, sense frameworks.
   Els colors, tipografies i corbes surten del disseny validat amb el
   client: el taronja de marca mai s'usa per a text sobre blanc (no hi
   arriba al contrast AA), per això hi ha un taronja fosc de text.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --taronja: #F26400;
  --taronja-text: #B8490B;
  --taronja-fosc: #993D09;
  --blau: #268AC5;
  --blau-text: #1C6B9C;
  --blau-premut: #15577F;
  --tinta: #4F4F51;
  --tinta-suau: #6B6B6D;
  --blau-suau: #F2F7FB;
  --blau-farcit: #EFF6FB;
  --taronja-suau: #FFF6F0;
  --vora: #DCE6EE;
  --vora-forta: #D8E4EC;
  --vora-clara: #E8EEF4;
  --estrella: #F5B301;
  --verd: #1FA855;
  /* Corba principal: sortides lentes, sense rebot. */
  --calma: cubic-bezier(0.25, 0.46, 0.2, 1);
  /* Corba de botons i navegació: més ràpida i decidida. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Acostament de targeta: el client va demanar expressament que fos lent
     i perceptible. No escurçar aquests 1400 ms. */
  --acostar: 1400ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--tinta);
  font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Titulars amb Archivo: més compacta i seriosa que la de text corregut. */
h1, h2, h3, .cella, .pack__nom, .preu__nom, .boto, .nav a { font-family: Archivo, "IBM Plex Sans", Helvetica, Arial, sans-serif; }
h2 { letter-spacing: -0.022em; text-wrap: balance; }

a { color: var(--blau-text); }
a:hover { color: var(--taronja-text); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--taronja);
  outline-offset: 3px;
  border-radius: 4px;
}

img { max-width: 100%; }

/* L'alçada real de la barra la mesura el JS i l'escriu a --nav-h: així cap
   àncora no queda mig tapada quan el menú canvia de mida o salta de línia. */
#top, #qui-som, #preus, #casos, #equip, #contacte { scroll-margin-top: var(--nav-h, 132px); }

/* ---------- Barra superior ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px clamp(14px, 1.8vw, 26px);
  padding: 12px clamp(16px, 5vw, 56px);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(38, 138, 197, 0.18);
  /* Arrenca amagada: el JS la fa baixar quan la portada s'acaba. */
  transform: translateY(-100%);
  pointer-events: none;
}
.nav__marca { display: inline-flex; align-items: center; margin-right: auto; transition: transform 260ms var(--ease); }
.nav__marca img { display: block; height: 54px; width: auto; }
/* El logo de la barra s'encongeix en pantalles estretes: si no, la barra fixa
   es menja un terç del que es veu al mòbil. */
@media (max-width: 1100px) { .nav__marca img { height: 50px; } }
@media (max-width: 760px) { .nav__marca img { height: 44px; } }
@media (max-width: 480px) { .nav__marca img { height: 38px; } }
.nav__marca:hover { transform: translateY(-1px) scale(1.014); }

.nav__menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px clamp(14px, 1.8vw, 26px); }

/* Enllaços del menú: color alternat de marca i lleu creixement en passar-hi. */
.nav__enllac {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 4px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tinta);
  text-decoration: none;
  border-radius: 6px;
  transition: color 220ms ease, transform 260ms var(--ease), text-shadow 260ms ease;
}
.nav__enllac--taronja:hover, .nav__enllac--taronja:focus-visible { color: var(--taronja-text); transform: scale(1.09); text-shadow: 0 0 18px rgba(242, 100, 0, 0.45); }
.nav__enllac--blau:hover, .nav__enllac--blau:focus-visible { color: var(--blau-text); transform: scale(1.09); text-shadow: 0 0 18px rgba(38, 138, 197, 0.45); }

/* ---------- Tria d'idioma ----------
   Tres pastilles curtes dins de la barra. El codi de dues lletres s'entén
   sense traduir-lo, que és justament el que fa falta quan encara no saps
   en quin idioma està la pàgina. */
.idioma { display: inline-flex; gap: 4px; padding: 3px; border-radius: 99px; background: var(--blau-suau); border: 1px solid var(--vora); }
.idioma__boto {
  min-width: 40px;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 99px;
  background: none;
  color: var(--tinta-suau);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 240ms ease, color 240ms ease;
}
.idioma__boto:hover { color: var(--blau-text); }
.idioma__boto.actiu { background: #FFFFFF; color: var(--blau-text); box-shadow: 0 1px 4px rgba(79, 79, 81, 0.16); }

@media (max-width: 860px) {
  /* Dins del desplegable ocupa tota l'amplada, com la resta del menú. */
  .js .nav__menu .idioma { margin-top: 14px; justify-content: stretch; }
  .js .nav__menu .idioma__boto { flex: 1; min-height: 44px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) { .idioma__boto { transition: none; } }

/* ---------- Menú de tres barres (pantalles estretes) ----------
   El botó només existeix si el JS s'ha carregat (classe .js a l'arrel).
   Sense JS no hi ha botó i el menú es queda desplegat com sempre: mai
   es pot donar el cas d'una barra sense cap enllaç. */
.nav__boto { display: none; }

.nav__barres { display: grid; gap: 5px; width: 24px; }
.nav__barres span {
  display: block;
  width: 100%;
  height: 2.5px;
  border-radius: 99px;
  background: var(--tinta);
  transition: transform 320ms var(--ease), opacity 200ms ease, background 200ms ease;
}

@media (max-width: 860px) {
  .js .nav__boto {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--vora);
    border-radius: 12px;
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color 260ms ease, background 260ms ease, transform 260ms var(--ease);
  }
  .js .nav__boto:hover { border-color: var(--blau); }
  .js .nav__boto:active { transform: scale(0.96); }
  /* Obert: les tres barres es creuen en aspa. */
  .js .nav__boto[aria-expanded="true"] { border-color: var(--taronja); }
  .js .nav__boto[aria-expanded="true"] .nav__barres span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); background: var(--taronja-text); }
  .js .nav__boto[aria-expanded="true"] .nav__barres span:nth-child(2) { opacity: 0; }
  .js .nav__boto[aria-expanded="true"] .nav__barres span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); background: var(--taronja-text); }

  .js .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    padding: 0 clamp(16px, 5vw, 56px);
    background: #FFFFFF;
    border-bottom: 1px solid rgba(38, 138, 197, 0.18);
    box-shadow: 0 18px 30px rgba(79, 79, 81, 0.10);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    /* visibility endarrerida: tancat no es pot tabular cap enllaç. */
    visibility: hidden;
    transition: max-height 380ms var(--ease), padding 380ms var(--ease), opacity 240ms ease, visibility 0s linear 380ms;
  }
  .js .nav__menu.obert {
    max-height: 72vh;
    opacity: 1;
    visibility: visible;
    overflow: auto;
    padding: 6px clamp(16px, 5vw, 56px) 18px;
    transition: max-height 380ms var(--ease), padding 380ms var(--ease), opacity 240ms ease, visibility 0s;
  }
  .js .nav__menu .nav__enllac {
    min-height: 56px;
    padding: 6px 2px;
    font-size: 17px;
    border-bottom: 1px solid var(--vora-clara);
    border-radius: 0;
  }
  /* En tàctil no hi ha cursor: el creixement del hover sobra i desquadra. */
  .js .nav__menu .nav__enllac:hover, .js .nav__menu .nav__enllac:focus-visible { transform: none; text-shadow: none; }
  .js .nav__menu .boto--nav { margin-top: 16px; width: 100%; min-height: 52px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .nav__menu, .nav__barres span, .js .nav__boto { transition: none; }
}

/* ---------- Botons ---------- */
.boto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 26px;
  border-radius: 10px;
  background: var(--taronja-text);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(184, 73, 11, 0.28);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), background 240ms ease;
}
/* El taronja passa al blau de marca en passar-hi o en clicar. */
.boto:hover, .boto:focus-visible {
  background: var(--blau-text);
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(38, 138, 197, 0.34);
}
.boto:active { background: var(--blau-premut); transform: translateY(0); box-shadow: 0 2px 6px rgba(38, 138, 197, 0.34); }
.boto--nav { min-height: 44px; padding: 11px 20px; border-radius: 8px; font-size: 15px; }

/* Botó de contorn: es reomple de blau en passar-hi. */
.boto--blau {
  background: none;
  border: 2px solid var(--blau);
  color: var(--blau-text);
  box-shadow: none;
}
.boto--blau:hover, .boto--blau:focus-visible { background: var(--blau); color: #FFFFFF; transform: translateY(-3px); box-shadow: 0 14px 26px rgba(38, 138, 197, 0.28); }

.boto--mapa { min-height: 60px; padding: 15px 26px; border-radius: 14px; font-size: 17px; }
.boto--mapa:hover, .boto--mapa:focus-visible { transform: translateY(-10px) scale(1.03); box-shadow: 0 16px 30px rgba(38, 138, 197, 0.34); }
.boto--mapa span { display: inline-flex; }

.parell { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Portada ---------- */
/* Tres alçades de pantalla de recorregut: el gir del cotxe es reparteix
   per aquest tram, així es pot seguir amb la roda sense córrer. */
.hero { position: relative; height: 340vh; background: #FFFFFF; }
/* Al mòbil el recorregut és més curt. Amb el dit cada pantalla de scroll
   costa molt més que amb la roda, i haver de baixar gairebé dues pantalles
   abans de veure el primer text feia que la portada semblés encallada.
   El tall ha de ser el mateix que el del script.js. */
@media (max-width: 819px) { .hero { height: 240vh; } }
.hero__fix { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hero__cotxe { position: absolute; inset: 0; will-change: opacity; }
.hero__cotxe canvas { position: relative; width: 100%; height: 100%; display: block; }
/* El nom de la portada es un <h1> perque es el titol de la pagina, pero
   no ha de dur cap estil de titol: tot el que es veu es el logo. */
.hero__nom { margin: 0; font-size: inherit; font-weight: inherit; }
.hero__nom {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  text-align: center;
  padding: clamp(20px, 4vh, 48px) 24px 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.hero__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: min(42vh, 420px);
  margin: 0 auto;
}

.hero__qui {
  position: absolute;
  z-index: 3;
  right: clamp(16px, 4vw, 56px);
  top: 50%;
  width: min(44vw, 420px);
  padding: clamp(24px, 3vw, 34px);
  background: #FFFFFF;
  border-radius: 16px;
  border-top: 4px solid var(--taronja);
  box-shadow: 0 18px 44px rgba(79, 79, 81, 0.16);
  will-change: transform, opacity;
}
.hero__qui h2 { margin: 0 0 12px; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; font-weight: 800; text-wrap: pretty; }
.hero__qui > p { margin: 0 0 18px; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; text-wrap: pretty; }
.hero__accions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero__accions .boto { min-height: 44px; padding: 13px 24px; border-radius: 8px; }

.telefon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--blau-text);
  text-decoration: none;
  border-bottom: 2px solid rgba(38, 138, 197, 0.35);
  transition: color 260ms ease, border-color 260ms ease;
}
.telefon:hover, .telefon:focus-visible { color: var(--taronja-text); border-color: var(--taronja); }

.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
}
.pastilla__punt { display: block; width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.pastilla--taronja { background: var(--taronja-suau); color: var(--taronja-text); }
.pastilla--blau { background: var(--blau-farcit); color: var(--blau-text); }

.hero__pista {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3A3A3C;
}

/* En pantalla vertical la targeta se centra a baix: mai trepitja el cotxe. */
@media (max-aspect-ratio: 1 / 1) {
  .hero__qui { top: auto; bottom: 5vh; right: 50%; width: min(92vw, 440px); }
}

/* ---------- Seccions ---------- */
.seccio { padding: clamp(72px, 11vh, 140px) clamp(20px, 6vw, 96px); }
.seccio--blau { background: var(--blau-suau); }
.centrar { max-width: 1120px; margin: 0 auto; }

.cella {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--blau-text);
  font-weight: 700;
}
.cella--petita { font-size: 12px; letter-spacing: 0.22em; }
.titol {
  margin: 0 0 44px;
  font-size: clamp(26px, 3.7vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  white-space: nowrap;
}
.titol--llarg { white-space: normal; max-width: 24ch; line-height: 1.1; margin-bottom: 24px; text-wrap: balance; }
@media (max-width: 560px) {
  .titol { white-space: normal; font-size: clamp(26px, 8vw, 34px); }
}
.subtitol { margin: 0 0 20px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; }

.barres { display: flex; gap: 8px; margin-bottom: 28px; }
.barres span { display: block; width: 64px; height: 5px; border-radius: 99px; background: var(--taronja); }
.barres span + span { background: var(--blau); }
.barres--curtes span { width: 52px; height: 4px; }

/* ---------- Qui som ---------- */
.qui {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  margin-bottom: clamp(44px, 6vh, 72px);
}
.qui p { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; text-wrap: pretty; }
.qui p:last-of-type { margin-bottom: 26px; }

.mosaic { display: grid; gap: 16px; }
.mosaic__parell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fotoq {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--blau-farcit);
  border: 1px solid var(--vora);
  aspect-ratio: 4 / 3;
}
.fotoq--gran { border-radius: 18px; aspect-ratio: 16 / 10; }
.fotoq img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--acostar) var(--calma); }
.fotoq:hover img { transform: scale(1.05); }
.fotoq__peu {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--taronja-text);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(79, 79, 81, 0.18);
}

/* Com ho farem + les tres dades, a la mateixa alçada. */
.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
}
.passos__llista { display: grid; gap: 12px; align-content: start; }
.passos__llista .subtitol { margin-bottom: 6px; }

.pas {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  width: 100%;
  padding: 18px;
  border: 1px solid var(--vora);
  border-radius: 14px;
  background: #FFFFFF;
  text-align: left;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--acostar) var(--calma), box-shadow 900ms var(--calma), border-color 500ms ease;
}
.pas__n {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: var(--taronja-suau);
  color: var(--taronja-text);
  font-size: 19px;
  font-weight: 800;
  transition: transform 900ms var(--calma), background 500ms ease, color 500ms ease;
}
.pas__n--blau { background: var(--blau-farcit); color: var(--blau-text); }
.pas__cos { display: grid; gap: 5px; min-width: 0; }
.pas__titol { font-size: 17px; font-weight: 700; color: var(--tinta); }
.pas__txt { font-size: 15px; line-height: 1.55; color: var(--tinta-suau); text-wrap: pretty; }
/* .actiu el posa el JS en clicar: al mòbil no hi ha cursor per a passar-hi. */
.pas:hover, .pas:focus-visible, .pas.actiu {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--blau);
  box-shadow: 0 18px 38px rgba(38, 138, 197, 0.16);
  outline: none;
}
.pas:hover .pas__n, .pas:focus-visible .pas__n, .pas.actiu .pas__n { transform: scale(1.08); background: var(--blau); color: #FFFFFF; }
/* La línia de marca es dibuixa d'esquerra a dreta a la base del pas. */
.pas::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--taronja), var(--blau));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--calma);
}
.pas:hover::after, .pas:focus-visible::after, .pas.actiu::after { transform: scaleX(1); }

.dades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr auto; gap: 16px; height: 100%; }
/* La targeta gran ocupa tota l'amplada i estira: no pot quedar buit a sota. */
.dades > :first-child { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: center; padding: 28px; }
.targeta { padding: 24px; border-radius: 14px; background: var(--blau-farcit); border-left: 5px solid var(--blau); transition: transform var(--acostar) var(--calma), box-shadow 900ms var(--calma); }
.targeta--taronja { background: var(--taronja-suau); border-left-color: var(--taronja); }
.targeta:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(79, 79, 81, 0.12); }
.targeta p:last-child { margin: 0; font-size: 15px; line-height: 1.5; }
.dada { margin: 0 0 6px; line-height: 1; font-weight: 800; }
.dada--gran { font-size: clamp(34px, 4.5vw, 46px); color: var(--taronja-text); }
.dada--mitja { font-size: clamp(26px, 3.2vw, 34px); color: var(--blau-text); }

/* ---------- Preus ---------- */
.preus__graella { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; align-items: stretch; margin-bottom: 52px; }
.preu {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid var(--vora);
  overflow: hidden;
  transition: transform var(--acostar) var(--calma), box-shadow 900ms var(--calma), border-color 500ms ease;
}
/* Icones de línia pròpies, sòbries i del mateix blau: res d'emoji. */
.preu__icona {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--blau-farcit);
  color: var(--blau-text);
  transition: transform 900ms var(--calma), background 500ms ease, color 500ms ease;
}
.preu::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--taronja), var(--blau));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--calma);
}
.preu:hover, .preu:focus-within, .preu.actiu { transform: translateY(-10px) scale(1.03); border-color: var(--blau); box-shadow: 0 26px 54px rgba(38, 138, 197, 0.24); }
.preu:hover::after, .preu:focus-within::after, .preu.actiu::after { transform: scaleX(1); }
.preu:hover .preu__icona, .preu:focus-within .preu__icona, .preu.actiu .preu__icona { transform: translateY(-3px) scale(1.04); background: var(--blau); color: #FFFFFF; }
.preu__nom { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.preu__det { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--tinta-suau); }
/* El preu queda ancorat a baix: les tres targetes mesuren igual. */
.preu__xifra { margin: auto 0 0; font-size: clamp(30px, 3.6vw, 40px); line-height: 1; font-weight: 700; letter-spacing: -0.02em; transition: color 500ms ease; }
.preu:hover .preu__xifra, .preu:focus-within .preu__xifra, .preu.actiu .preu__xifra { color: var(--blau-text); }

.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; align-items: stretch; margin-bottom: 40px; }
.pack {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 2px solid var(--vora-forta);
  transition: transform var(--acostar) var(--calma), box-shadow var(--acostar) var(--calma), border-color 400ms ease;
}
.pack:hover { transform: translateY(-10px) scale(1.03); border-color: var(--blau); box-shadow: 0 18px 36px rgba(38, 138, 197, 0.2); }
.pack--top {
  border-color: var(--taronja);
  background: linear-gradient(180deg, var(--taronja-suau) 0%, #FFFFFF 100%);
  box-shadow: 0 10px 26px rgba(242, 100, 0, 0.14);
}
.pack--top:hover { border-color: var(--taronja); box-shadow: 0 18px 36px rgba(242, 100, 0, 0.24); }
/* Fila reservada al distintiu, també als packs que no en tenen. */
.pack__marca-fila { display: flex; align-items: center; min-height: 28px; margin-bottom: 14px; }
.pack__marca {
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--taronja-text);
  color: #FFFFFF;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
.pack__nom { margin: 0 0 6px; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blau-text); font-weight: 700; }
.pack__preu { margin: 0 0 4px; font-size: clamp(36px, 4.4vw, 48px); line-height: 1; font-weight: 800; }
.pack__det { margin: 0 0 12px; font-size: 15px; }
.pack__txt { margin: auto 0 0; font-size: 14px; line-height: 1.55; color: var(--tinta-suau); text-wrap: pretty; }

/* Què porta cada pack. Va ancorada a baix perquè els tres quadres acabin
   a la mateixa alçada encara que els textos de dalt no mesurin igual. */
.pack__llista { margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid var(--vora-clara); list-style: none; display: grid; gap: 10px; font-size: 14px; line-height: 1.45; }
.pack__llista li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }

.extres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(26px, 3vw, 38px);
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid var(--vora);
}
.extres__titol { margin: 0 0 18px; font-size: clamp(19px, 2vw, 23px); font-weight: 700; }
.extra { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #E7EDF2; font-size: 15px; }
.extra--ultim { border-bottom: 0; }
.extra__preu { flex: 0 0 auto; font-weight: 600; color: var(--blau-text); }
.extra__nota { flex: 0 0 auto; font-weight: 600; color: var(--tinta-suau); }

.inclos { align-self: center; padding: clamp(22px, 2.6vw, 30px); border-radius: 16px; background: #FFFFFF; border: 1px solid var(--vora); }
.inclos h3 { margin: 0 0 16px; font-size: 17px; font-weight: 700; }
.inclos__llista { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 12px; font-size: 15px; line-height: 1.5; }
.inclos__llista li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px; align-items: start; }
.inclos__check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--blau-farcit);
  color: var(--blau-text);
}
.inclos__nota { margin: 0; padding-top: 18px; border-top: 1px solid var(--vora); font-size: 15px; line-height: 1.6; }

/* ---------- Casos d'èxit ---------- */
.carrusel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: var(--blau-suau);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 36px);
}
.carrusel__fotos { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--vora-forta); }
.carrusel__fotos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1), transform var(--acostar) var(--ease);
}
/* Deriva lenta de la imatge activa: dona vida sense cridar l'atenció. */
.carrusel__fotos img.actiu { opacity: 1; transform: scale(1.04); }
.carrusel__text {
  margin: 0 0 26px;
  font-size: clamp(19px, 2.3vw, 27px);
  line-height: 1.4;
  font-weight: 700;
  text-wrap: pretty;
  min-height: 4em;
  transition: opacity 400ms ease, transform 500ms var(--ease);
}
.carrusel__text.canvia { opacity: 0; transform: translateY(8px); }
.punts { display: flex; gap: 10px; }
.punts button {
  width: 52px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.punts button span {
  display: block;
  width: 100%;
  height: 5px;
  border-radius: 99px;
  background: #B9C4CC;
  transition: background 300ms ease, transform 300ms var(--ease);
}
.punts button:hover span { background: #8FA3B0; }
.punts button.actiu span { background: var(--taronja); transform: scaleY(1.6); }

/* ---------- Ressenyes ---------- */
.ressenyes { margin-top: clamp(56px, 8vh, 88px); }
/* Sempre 4 en fila (ample) o 2+2 (estret), i totes amb la mateixa alçada. */
.ressenyes__graella { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
@media (min-width: 1060px) { .ressenyes__graella { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ressenyes__graella { grid-template-columns: minmax(0, 1fr); } }
.ressenya {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 30px 24px;
  background: #FFFFFF;
  min-height: clamp(280px, 30vh, 340px);
  border: 2px solid #E3E5E8;
  border-radius: 16px;
  text-align: center;
  cursor: default;
  transition: transform var(--acostar) var(--calma), box-shadow 900ms var(--calma), border-color 400ms ease;
}
/* La vora de color només es veu en passar el cursor, amb el focus o en clicar. */
.ressenya--taronja:hover, .ressenya--taronja:focus-visible, .ressenya--taronja.actiu { border-color: var(--taronja); }
.ressenya--blau:hover, .ressenya--blau:focus-visible, .ressenya--blau.actiu { border-color: var(--blau); }
.ressenya:hover, .ressenya:focus-visible, .ressenya.actiu { transform: translateY(-10px) scale(1.03); outline: none; }
.ressenya--taronja:hover, .ressenya--taronja:focus-visible { box-shadow: 0 20px 44px rgba(242, 100, 0, 0.26); }
.ressenya--blau:hover, .ressenya--blau:focus-visible { box-shadow: 0 20px 44px rgba(38, 138, 197, 0.26); }
.ressenya:focus-visible { box-shadow: 0 0 0 3px rgba(79, 79, 81, 0.35), 0 20px 44px rgba(79, 79, 81, 0.18); }
.ressenya__nom { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--blau-text); }
.ressenya__estrelles {
  display: block;
  margin: 0 0 16px;
  font-size: 26px;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--estrella);
  transition: transform 900ms var(--calma);
}
.ressenya:hover .ressenya__estrelles, .ressenya:focus-visible .ressenya__estrelles, .ressenya.actiu .ressenya__estrelles { transform: scale(1.04); }
.ressenya p { margin: 0 0 20px; font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.ressenya p:not([class]) { flex: 1 0 auto; }
.ressenya footer { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--tinta-suau); }
.ressenya__g {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #E3E5E8;
  color: var(--blau-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.ressenyes__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; text-align: center; }
.cta-g {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 15px 28px;
  border-radius: 99px;
  background: #FFFFFF;
  border: 2px solid var(--vora);
  color: var(--tinta);
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  transition: transform 900ms var(--calma), box-shadow 900ms var(--calma), border-color 400ms ease, color 400ms ease;
}
.cta-g__g {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #E3E5E8;
  color: var(--blau-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  transition: transform 900ms var(--calma), border-color 400ms ease;
}
.cta-g::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(242, 100, 0, 0.1), rgba(38, 138, 197, 0.12));
  opacity: 0;
  transition: opacity 500ms ease;
}
.cta-g:hover, .cta-g:focus-visible { transform: translateY(-6px) scale(1.03); border-color: var(--blau); color: var(--blau-text); box-shadow: 0 20px 40px rgba(38, 138, 197, 0.22); outline: none; }
.cta-g:hover::after, .cta-g:focus-visible::after { opacity: 1; }
.cta-g:hover .cta-g__g, .cta-g:focus-visible .cta-g__g { transform: scale(1.14) rotate(-6deg); border-color: var(--blau); }
.cta-g:active { transform: translateY(-2px) scale(1.01); }

/* ---------- Equip ---------- */
.equip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(20px, 3vw, 36px); }
.fitxa {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: stretch;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 20px;
  border: 2px solid #E3E5E8;
  box-shadow: 0 2px 10px rgba(79, 79, 81, 0.08);
  transition: transform var(--acostar) var(--calma), box-shadow 900ms var(--calma), border-color 400ms ease;
}
/* S'il·lumina tot el contorn de la targeta: el client va rebutjar
   expressament un accent parcial en una cantonada. */
.fitxa:hover, .fitxa:focus-within, .fitxa.actiu {
  transform: translateY(-10px) scale(1.03);
  border-color: var(--taronja);
  box-shadow: 0 26px 54px rgba(242, 100, 0, 0.24);
}
.fitxa--blau:hover, .fitxa--blau:focus-within, .fitxa--blau.actiu { border-color: var(--blau); box-shadow: 0 26px 54px rgba(38, 138, 197, 0.24); }
.fitxa::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--taronja), var(--blau));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--calma);
  z-index: 2;
}
.fitxa:hover::after, .fitxa:focus-within::after, .fitxa.actiu::after { transform: scaleX(1); }

/* Foto gran, a l'esquerra, sobre un fons de marca molt suau. */
.fitxa__foto { position: relative; min-height: clamp(250px, 27vw, 310px); background: #FFFFFF; overflow: hidden; transition: background 600ms ease; }
.fitxa:hover .fitxa__foto, .fitxa:focus-within .fitxa__foto, .fitxa.actiu .fitxa__foto { background: var(--taronja-suau); }
.fitxa--blau:hover .fitxa__foto, .fitxa--blau:focus-within .fitxa__foto, .fitxa--blau.actiu .fitxa__foto { background: var(--blau-farcit); }
.fitxa__foto img {
  position: absolute;
  left: 56%;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 92%;
  object-fit: contain;
  object-position: bottom center;
  transform: translateX(-50%);
  display: block;
  transform-origin: bottom center;
  transition: transform 900ms var(--calma);
}
.fitxa:hover .fitxa__foto img, .fitxa:focus-within .fitxa__foto img, .fitxa.actiu .fitxa__foto img { transform: translateX(-50%) scale(1.025); }

.fitxa__text { align-self: center; padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 38px) clamp(26px, 3vw, 38px) 0; }
.fitxa__rol {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--taronja-suau);
  color: var(--taronja-text);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background 500ms ease, color 500ms ease, transform 900ms var(--calma);
}
.fitxa--blau .fitxa__rol { background: var(--blau-suau); color: var(--blau-text); }
.fitxa:hover .fitxa__rol, .fitxa:focus-within .fitxa__rol, .fitxa.actiu .fitxa__rol { background: var(--taronja-text); color: #FFFFFF; transform: translateY(-2px); }
.fitxa--blau:hover .fitxa__rol, .fitxa--blau:focus-within .fitxa__rol, .fitxa--blau.actiu .fitxa__rol { background: var(--blau-text); }
.fitxa h3 { margin: 0 0 14px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; }
.fitxa__regla { width: 56px; height: 4px; margin-bottom: 18px; border-radius: 99px; background: var(--taronja); transform-origin: left; transition: transform 900ms var(--calma); }
.fitxa--blau .fitxa__regla { background: var(--blau); }
.fitxa:hover .fitxa__regla, .fitxa:focus-within .fitxa__regla, .fitxa.actiu .fitxa__regla { transform: scaleX(1.9); }
.fitxa__text p:last-child { margin: 0; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65; text-wrap: pretty; }

/* Al mòbil s'apilen: foto gran a dalt, text a sota. */
@media (max-width: 640px) {
  .fitxa { grid-template-columns: 1fr; }
  .fitxa__text { padding: clamp(22px, 6vw, 30px); }
}

/* ---------- Contacte ---------- */
.contacte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(20px, 3vw, 36px); align-items: stretch; }
.contacte__panell {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: 18px;
  background: var(--blau-suau);
  border: 1px solid var(--vora);
}
.contacte__on { display: grid; gap: 12px; }
.contacte__on .cella { margin: 0; }
.contacte__on .barres { margin: 0; }
.contacte__adreca { margin: 0; font-size: clamp(19px, 2.1vw, 24px); line-height: 1.35; font-weight: 700; }

.ctiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; align-content: end; }
.ctile {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid var(--vora);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--acostar) var(--calma), box-shadow 900ms var(--calma), border-color 400ms ease, background 400ms ease;
}
.ctile__ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--blau-farcit);
  color: var(--blau-text);
  transition: transform 900ms var(--calma), background 400ms ease, color 400ms ease;
}
.ctile__ic--taronja { background: var(--taronja-suau); color: var(--taronja-text); }
.ctile__cos { display: grid; gap: 2px; min-width: 0; }
.ctile__etiqueta { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-suau); font-weight: 700; }
.ctile__val { font-size: 17px; font-weight: 700; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctile:hover, .ctile:focus-visible { transform: translateY(-10px) scale(1.03); border-color: var(--blau); box-shadow: 0 18px 38px rgba(38, 138, 197, 0.18); outline: none; }
.ctile:hover .ctile__ic, .ctile:focus-visible .ctile__ic { transform: translateY(-2px) scale(1.04); }
.ctile:focus-visible { box-shadow: 0 0 0 3px rgba(38, 138, 197, 0.4), 0 18px 38px rgba(38, 138, 197, 0.18); }
.ctile::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--taronja), var(--blau));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--calma);
}
.ctile:hover::after, .ctile:focus-visible::after { transform: scaleX(1); }

.contacte__mapa { display: grid; grid-template-rows: 1fr auto; gap: 16px; min-height: 0; }
.mapa { position: relative; min-height: clamp(300px, 40vh, 420px); border-radius: 18px; overflow: hidden; background: var(--vora-forta); border: 1px solid var(--vora); }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; transition: transform 900ms var(--calma); }
.mapa:hover iframe { transform: scale(1.014); }

/* ---------- Horari ---------- */
.horari { margin-top: clamp(20px, 3vw, 36px); padding: clamp(20px, 2.6vw, 30px); border-radius: 18px; background: #FFFFFF; border: 1px solid var(--vora); }
.horari__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.horari__cap .cella { margin: 0; }
.horari__estat {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 99px;
  background: var(--blau-suau);
  font-size: 14px;
  font-weight: 700;
}
.pols { display: block; width: 9px; height: 9px; border-radius: 99px; background: #8A8A8C; }
@keyframes l23-pols {
  0% { box-shadow: 0 0 0 0 rgba(31, 168, 85, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(31, 168, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 168, 85, 0); }
}
.pols--viu { background: var(--verd); animation: l23-pols 2.2s ease-out infinite; }

.horari__graella { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.dia {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 16px 8px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid var(--vora);
  text-align: center;
  transition: transform var(--acostar) var(--calma), box-shadow 900ms var(--calma), border-color 400ms ease, background 400ms ease;
}
.dia:hover { transform: translateY(-10px) scale(1.03); border-color: var(--blau); box-shadow: 0 14px 28px rgba(38, 138, 197, 0.16); }
/* El dia d'avui el marca el JS: és l'únic que va en taronja. */
.dia--avui { background: var(--taronja-suau); border-color: var(--taronja); box-shadow: 0 12px 26px rgba(242, 100, 0, 0.18); }
.dia--avui .dia__curt { color: var(--taronja-text); }
.dia__curt { font-size: 13px; letter-spacing: 0.06em; color: var(--tinta-suau); font-weight: 700; }
.dia__hora { font-size: 15px; font-weight: 700; color: var(--blau-text); }
.dia__hora--tancat { color: var(--tinta-suau); }
@media (max-width: 900px) {
  .horari__graella { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dia { grid-template-columns: none; justify-items: start; text-align: left; }
}

/* ---------- Peu ---------- */
.peu { position: relative; padding: clamp(56px, 8vh, 88px) clamp(20px, 6vw, 96px) 28px; background: #FFFFFF; border-top: 1px solid var(--vora); }
.peu__franja {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--taronja) 0%, var(--taronja) 42%, var(--blau) 42%, var(--blau) 100%);
}
/* Cap enllaç del peu va subratllat. */
.peu a { text-decoration: none; }
.peu__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }
/* El logo va sobre blanc, sense cap caixa al darrere. */
.peu__marca { display: grid; gap: 16px; justify-items: start; }
.peu__marca img { display: block; height: 92px; width: auto; }
.peu__marca p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--tinta-suau); max-width: 26ch; text-wrap: pretty; }
.peu__titol { margin: 0 0 12px; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--blau-text); font-weight: 700; }
.peu__llista { display: grid; }
.peu__nav { display: grid; justify-items: start; }

.peu-fila, .peu-nav, .peu-legal { transition: color 300ms ease, transform 420ms var(--calma); }
.peu-fila {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  color: var(--tinta);
  font-size: 16px;
  font-weight: 600;
}
.peu-fila__ic { display: inline-flex; color: var(--blau-text); transition: transform 420ms var(--calma), color 300ms ease; }
.peu-fila:hover, .peu-fila:focus-visible { color: var(--taronja-text); transform: translateX(4px); }
.peu-fila:hover .peu-fila__ic, .peu-fila:focus-visible .peu-fila__ic { color: var(--taronja); transform: scale(1.14); }

.peu-nav { display: inline-flex; align-items: center; gap: 9px; padding: 6px 0; color: var(--tinta); font-size: 16px; font-weight: 600; }
.peu-nav__f { display: inline-block; width: 14px; height: 2px; border-radius: 99px; background: var(--vora); transition: width 420ms var(--calma), background 300ms ease; }
.peu-nav:hover, .peu-nav:focus-visible { color: var(--blau-text); }
.peu-nav:hover .peu-nav__f, .peu-nav:focus-visible .peu-nav__f { width: 26px; background: var(--blau); }

/* Les quatre pastilles han de cabre sempre en una sola fila. */
.peu__xarxes { display: flex; flex-wrap: nowrap; gap: 10px; margin-bottom: 18px; min-width: 0; }
.peu-xarxa {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--blau-suau);
  border: 1px solid var(--vora);
  color: var(--blau-text);
  transition: transform 620ms var(--calma), box-shadow 620ms var(--calma), background 400ms ease, border-color 400ms ease, color 300ms ease;
}
.peu-xarxa:hover, .peu-xarxa:focus-visible {
  border-color: transparent;
  color: #FFFFFF;
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 16px 30px rgba(38, 138, 197, 0.24);
  outline: none;
}
.peu-xarxa:active { transform: translateY(-2px) scale(1.02); }
.peu-xarxa--instagram:hover, .peu-xarxa--instagram:focus-visible { background: linear-gradient(135deg, #F26400 0%, #C13584 55%, #268AC5 100%); }
.peu-xarxa--whatsapp:hover, .peu-xarxa--whatsapp:focus-visible { background: linear-gradient(135deg, #1FA855 0%, #25D366 100%); }
.peu-xarxa--telefon:hover, .peu-xarxa--telefon:focus-visible { background: linear-gradient(135deg, #B8490B 0%, #F26400 100%); }
.peu-xarxa--correu:hover, .peu-xarxa--correu:focus-visible { background: linear-gradient(135deg, #15577F 0%, #268AC5 100%); }

/* Petita surada perquè el bloc de xarxes no quedi mort. */
@keyframes l23-suraig { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.peu__xarxes .peu-xarxa { animation: l23-suraig 4.6s ease-in-out infinite; }
.peu__xarxes .peu-xarxa:nth-child(2) { animation-delay: 0.5s; }
.peu__xarxes .peu-xarxa:nth-child(3) { animation-delay: 1s; }
.peu__xarxes .peu-xarxa:nth-child(4) { animation-delay: 1.5s; }
.peu__xarxes .peu-xarxa:hover, .peu__xarxes .peu-xarxa:focus-visible { animation-play-state: paused; }

.peu__horari { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tinta-suau); }
.peu__horari span { color: var(--tinta); font-weight: 700; }

.peu__baix {
  margin-top: clamp(32px, 5vh, 52px);
  padding-top: 22px;
  border-top: 1px solid var(--vora-clara);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  font-size: 14px;
  color: var(--tinta-suau);
}
.peu-legal { color: var(--tinta-suau); }
.peu-legal:hover, .peu-legal:focus-visible { color: var(--taronja-text); }

/* ---------- Pàgines de text ---------- */
.text { max-width: 760px; margin: 0 auto; padding: clamp(48px, 9vh, 96px) clamp(20px, 6vw, 48px) clamp(72px, 11vh, 120px); }
.text h1 { margin: 0 0 12px; font-size: clamp(30px, 5vw, 46px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; }
.text h2 { margin: 0 0 14px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; }
.text p, .text li { font-size: 17px; line-height: 1.65; }
.text p { margin: 0 0 32px; text-wrap: pretty; }
.text dl { margin: 0 0 40px; display: grid; grid-template-columns: auto 1fr; gap: 10px 28px; font-size: 17px; line-height: 1.5; }
.text dt { font-weight: 700; }
.text dd { margin: 0; }
.text ul { margin: 0 0 40px; padding-left: 22px; display: grid; gap: 9px; }
.text li::marker { color: var(--blau); }
/* Text que nomes llegeixen els lectors de pantalla. No es pot fer amb
   display:none ni amb visibility:hidden, perque aleshores tampoc el
   llegirien. */
.nomes-veu {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.text__dalt { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.text__dalt .tornar { margin-bottom: 0; }
.tornar { display: inline-block; margin-bottom: 40px; font-size: 15px; font-weight: 700; text-decoration: none; }
.data { margin: 0 0 40px; font-size: 15px; }
.avis { padding: 20px 24px; margin-bottom: 40px; border-radius: 12px; background: var(--taronja-suau); border-left: 5px solid var(--taronja); }
.avis p { margin: 0; font-size: 15px; line-height: 1.6; }

/* ---------- 404 ---------- */
.pagina404 { min-height: 100vh; display: grid; place-content: center; justify-items: start; max-width: 760px; margin: 0 auto; padding: clamp(48px, 9vh, 96px) clamp(20px, 6vw, 48px); }
.pagina404 h1 { margin: 0 0 20px; font-size: clamp(40px, 8vw, 84px); line-height: 0.95; letter-spacing: -0.03em; font-weight: 800; text-wrap: pretty; }
.pagina404 .barres { margin-bottom: 26px; }
.pagina404 .barres span { width: 80px; }
.pagina404 p { margin: 0 0 32px; font-size: clamp(17px, 2vw, 20px); line-height: 1.6; max-width: 40ch; text-wrap: pretty; }

/* ---------- Moviment reduït ----------
   Qui ho demani al sistema no veu cap animació: ni acostaments, ni
   pulsacions, ni desplaçament suau. El contingut és exactament el mateix. */

/* ═══════════════════════ Carnet de moto ═══════════════════════════
   Les mateixes targetes que el cotxe, pero en taronja. La graella i les
   mides es reaprofiten: nomes canvia el color, que es el que ha de dir
   "aixo ja es un altre tema". */
.moto-cap { display: flex; align-items: center; gap: 18px; margin: 4px 0 24px; }
.moto-cap__icona {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 17px;
  background: var(--taronja-suau);
  border: 1px solid #F5DAC5;
  color: var(--taronja-text);
}
.subtitol--moto { margin-bottom: 5px; }
.moto-cap__txt { margin: 0; max-width: 58ch; font-size: 15px; line-height: 1.55; color: var(--tinta-suau); }

.permisos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 18px; margin-bottom: 26px; }
.permis {
  position: relative;
  padding: 26px;
  border-radius: 16px;
  background: linear-gradient(170deg, #FFF8F2 0%, #FFFFFF 58%);
  border: 1px solid #F3DCCB;
  transition: transform var(--acostar) var(--calma), box-shadow 900ms var(--calma), border-color 500ms ease;
}
.permis:hover, .permis:focus-within { transform: translateY(-8px); border-color: var(--taronja); box-shadow: 0 24px 50px rgba(242, 100, 0, 0.2); }
.permis__icona {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #F3DCCB;
  color: var(--taronja-text);
  transition: transform 900ms var(--calma), background 500ms ease, color 500ms ease;
}
.permis:hover .permis__icona { transform: translateY(-3px) scale(1.04); background: var(--taronja); border-color: var(--taronja); color: #FFFFFF; }
.permis__nom { margin: 0 0 6px; font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taronja-text); }
.permis__edat { margin: 0 0 12px; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.1; font-weight: 800; letter-spacing: -0.015em; }
.permis__txt { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tinta-suau); text-wrap: pretty; }

/* La targeta de preu de moto: mateixa forma, altre color. */
.preu--moto .preu__icona { background: var(--taronja-suau); color: var(--taronja-text); }
.preu--moto::after { background: linear-gradient(90deg, var(--blau), var(--taronja)); }
.preu--moto:hover, .preu--moto:focus-within, .preu--moto.actiu { border-color: var(--taronja); box-shadow: 0 26px 54px rgba(242, 100, 0, 0.22); }
.preu--moto:hover .preu__icona, .preu--moto:focus-within .preu__icona, .preu--moto.actiu .preu__icona { background: var(--taronja); color: #FFFFFF; }
.preu--moto:hover .preu__xifra, .preu--moto:focus-within .preu__xifra, .preu--moto.actiu .preu__xifra { color: var(--taronja-text); }

/* ═══════════════════════ Visor de fotos ═══════════════════════════
   La foto de la graella es petita a proposit (26 KB); la de debo, de
   1600 px, nomes es baixa quan algu obre el visor. */
.fotoq--clic { cursor: zoom-in; }
.fotoq--clic:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.fotoq__lupa {
  position: absolute;
  right: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--blau-text);
  box-shadow: 0 6px 16px rgba(20, 40, 60, 0.16);
  opacity: 0;
  transform: scale(0.88);
  pointer-events: none;
  transition: opacity 360ms ease, transform 360ms var(--calma);
}
.fotoq--clic:hover .fotoq__lupa,
.fotoq--clic:focus-visible .fotoq__lupa { opacity: 1; transform: none; }
/* En pantalla tactil no hi ha cursor que passi per sobre: si la lupa no es
   veu sempre, ningu no sabria que la foto s'obre. */
@media (hover: none) { .fotoq__lupa { opacity: 1; transform: none; } }

.visor {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 30px);
  background: rgba(20, 25, 30, 0.93);
  opacity: 0;
  transition: opacity 240ms ease;
}
.visor[hidden] { display: none; }
.visor.obert { opacity: 1; }
.visor__marc { margin: 0; display: grid; justify-items: center; gap: 14px; min-width: 0; }
.visor__marc img {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.visor__peu { margin: 0; max-width: 62ch; text-align: center; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.visor__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.visor__compta { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.72); min-width: 56px; text-align: center; }
.visor__fletxa, .visor__tanca {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  cursor: pointer;
  transition: background 300ms ease, border-color 300ms ease;
}
.visor__fletxa:hover, .visor__tanca:hover { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.5); }
.visor__fletxa:focus-visible, .visor__tanca:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.visor__tanca { position: absolute; top: clamp(12px, 2.4vw, 24px); right: clamp(12px, 2.4vw, 24px); }
.visor__fletxa--esq, .visor__fletxa--dre { position: absolute; top: 50%; margin-top: -27px; width: 54px; height: 54px; }
.visor__fletxa--esq { left: clamp(10px, 2.6vw, 30px); }
.visor__fletxa--dre { right: clamp(10px, 2.6vw, 30px); }
/* Amb prou amplada les fletxes van als costats de la foto; quan no n'hi ha,
   baixen a sota amb el comptador, que es on el dit hi arriba. */
@media (min-width: 720px) {
  .visor { padding-inline: 96px; }
  .visor__fletxa--esq2, .visor__fletxa--dre2 { display: none; }
}
@media (max-width: 719px) {
  .visor__fletxa--esq, .visor__fletxa--dre { display: none; }
  .visor__marc img { max-height: 62vh; }
}
body.sense-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boto, .nav__marca, .nav__enllac, .telefon,
  .fotoq img, .pas, .pas__n, .targeta,
  .preu, .preu__icona, .preu__xifra, .pack,
  .carrusel__fotos img, .carrusel__text, .punts button span,
  .ressenya, .ressenya__estrelles, .cta-g, .cta-g__g,
  .fitxa, .fitxa__foto, .fitxa__foto img, .fitxa__rol, .fitxa__regla,
  .ctile, .ctile__ic, .mapa iframe, .dia,
  .peu-fila, .peu-fila__ic, .peu-nav, .peu-nav__f, .peu-xarxa, .peu-legal,
  .permis, .permis__icona, .fotoq__lupa, .visor, .visor__fletxa, .visor__tanca { transition: none; }
  .pols--viu, .peu__xarxes .peu-xarxa { animation: none; }
}