/* Landing de parauling.com · sistema «Cel de conte» (els mateixos colors i fonts que l'app) */
:root {
  --navy: #23324F;
  --taronja: #F5831F;
  --taronja-clar: #FB9A3C;
  --taronja-fosc: #D96A0E;
  --text-suau: #4A5C7A;
  --text-gris: #5B6B84;
  --cel: #F2F7FC;
  --cel-fort: #EAF3FB;
  --linia: #E3EAF3;
  --verd: #3AA26A;
  --blau: #4C8FDB;
  --groc: #E8A93C;
  --lila: #8F7DD9;
  --daurat: #A8690D;
  --ample: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  font-family: 'Nunito', 'Trebuchet MS', sans-serif;
  color: var(--navy);
  background: #FFFFFF;
  font-weight: 700;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Baloo 2', 'Nunito', sans-serif; font-weight: 800; margin: 0; line-height: 1.12; text-wrap: balance; }
p { margin: 0; }
a { color: var(--taronja-fosc); }
img { max-width: 100%; height: auto; display: block; }
.baloo { font-family: 'Baloo 2', 'Nunito', sans-serif; font-weight: 800; }
.dins { max-width: var(--ample); margin: 0 auto; padding: 0 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- botons ---- */
.boto {
  line-height: 1.15;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; border-radius: 999px; font-family: 'Baloo 2', sans-serif; font-weight: 800;
  min-height: 44px; transition: transform .08s ease;
}
.boto:active { transform: translateY(2px); }
.boto.primari {
  background: linear-gradient(180deg, var(--taronja-clar), var(--taronja));
  color: #FFFFFF; padding: 20px 36px 13px; font-size: 22px; box-shadow: 0 5px 0 var(--taronja-fosc);
}
.boto.primari.petit { padding: 14px 22px 9px; font-size: 17px; box-shadow: 0 4px 0 var(--taronja-fosc); }
.boto.blanc { background: #FFFFFF; color: var(--taronja-fosc); padding: 20px 36px 13px; font-size: 22px; box-shadow: 0 5px 0 rgba(0,0,0,.14); }
.boto.contorn { background: #FFFFFF; color: var(--navy); border: 2.5px solid var(--navy); padding: 16px 24px 11px; font-size: 19px; }
.boto.contorn-blanc { border: 2.5px solid #FFFFFF; color: #FFFFFF; padding: 16px 24px 11px; font-size: 18px; }
.boto.ample { width: 100%; }

/* ---- capçalera ---- */
/* ---- capçal: barra prima (qui ja hi és) + barra gran (qui encara no) ---- */
.tira { background: var(--cel); border-bottom: 1px solid var(--linia); }
.tira .dins { display: flex; align-items: center; justify-content: flex-end; gap: 14px; height: 42px; }
.tira .entra, .tira .premium { color: var(--navy); text-decoration: none; font-weight: 800; font-size: 14.5px; white-space: nowrap; }
.tira .premium { color: var(--taronja-fosc); }
.tira .entra:hover, .tira .premium:hover { text-decoration: underline; }

.cap {
  position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linia);
}
.cap .dins { display: flex; align-items: center; gap: 22px; height: 76px; }
.cap .logo { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.cap .logo .anec { height: 44px; width: auto; }
/* el nom, a l'alçada de les lletres del menú: dins del dibuix cau al 0,63 de l'alçada,
   i per això la imatge sencera el deixava uns 6 px massa avall */
.cap .logo .nom { height: 27px; width: auto; }
.cap nav { display: flex; gap: 22px; margin-left: 10px; }
.cap nav a { color: var(--navy); text-decoration: none; font-weight: 800; font-size: 16.5px; white-space: nowrap; }
.cap nav a:hover { color: var(--taronja-fosc); }
.cap .parella { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.cap .boto { white-space: nowrap; flex: 0 0 auto; }
/* el germà de «Comença gratis»: mateixa forma i mida, blanc i en blau marí, per
   no competir-hi. Premium ha de ser a la barra ENGANXADA: a la prima de dalt
   desapareixia en baixar la pàgina. */
.cap .boto.germa { background: #FFFFFF; color: var(--navy); border: 2px solid var(--linia);
  padding: 14px 26px 9px; font-size: 19px; box-shadow: 0 4px 0 #D7E2EF; }
.cap .boto.germa:hover { border-color: var(--text-gris); }
.cap .premium .curt { display: none; }
.cap .boto.primari.petit { padding: 16px 28px 11px; font-size: 19px; }

/* els desplegables (idioma i menú) van amb <details>: cap JavaScript necessari */
.tria { position: relative; flex: 0 0 auto; }
.tria summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 0 9px; border-radius: 12px; color: var(--navy); font-weight: 800; font-size: 15px; }
.tria summary::-webkit-details-marker { display: none; }
.tria summary:hover, .tria[open] summary { background: #E4EFFA; }
.tria summary svg { width: 22px; height: 22px; flex: 0 0 auto; }
.tria summary .fletxa { width: 16px; height: 16px; color: var(--text-gris); }
.tria[open] summary .fletxa { transform: rotate(180deg); }
.tira .tria summary { min-height: 34px; font-size: 14px; padding: 0 7px; }
.tira .tria summary svg { width: 19px; height: 19px; }
.tira .idiomes { margin-right: auto; }
/* el suggeriment d'idioma, al costat de la bola (l'afegeix js/capcal.js) */
.tira .suggeriment { margin-right: auto; color: var(--text-suau); font-weight: 800; font-size: 13.5px;
  text-decoration: none; border-bottom: 1.5px dotted var(--text-gris); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tira .suggeriment:hover { color: var(--taronja-fosc); border-bottom-color: var(--taronja-fosc); }
.tira .idiomes:has(+ .suggeriment) { margin-right: 10px; }
.tira .suggeriment .curt { display: none; }
.cap .mes { margin-left: 14px; }
.desplegat { position: absolute; top: calc(100% + 6px); background: #FFFFFF; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(35,50,79,.18); border: 1px solid var(--linia); padding: 8px;
  min-width: 200px; display: flex; flex-direction: column; z-index: 12; }
.tira .idiomes .desplegat { left: 0; }
.cap .mes .desplegat { right: 0; }
.desplegat a { padding: 11px 14px; border-radius: 10px; text-decoration: none; color: var(--navy);
  font-weight: 800; font-size: 16px; white-space: nowrap; }
.desplegat a:hover { background: #F2F6FB; }
.desplegat a.triat { color: var(--taronja-fosc); }

/* ---- portada ---- */
.portada { background: linear-gradient(180deg, #FFFFFF 0%, var(--cel-fort) 100%); padding: 64px 0 56px; overflow: hidden; }
.portada .dins { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 60px; align-items: center; }
.etiqueta {
  display: inline-block; background: #FFFFFF; border: 2px solid #FFD9B3; border-radius: 999px;
  padding: 7px 16px; font-size: 14px; font-weight: 800; color: var(--taronja-fosc);
}
.portada h1 { font-size: 56px; margin: 20px 0 18px; }
.portada .sub { font-size: 19px; color: var(--text-suau); max-width: 620px; }
.portada .accio { margin-top: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.portada .micro { font-size: 14px; font-weight: 800; color: var(--text-gris); }
.portada .mira { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 800; font-size: 16px; color: var(--taronja-fosc); text-decoration: none; }
.escena { position: relative; width: 500px; height: 780px; justify-self: end; }
.telefon {
  border-radius: 34px; border: 7px solid var(--navy); overflow: hidden; background: #FFFFFF;
  box-shadow: 0 18px 40px rgba(35,50,79,.22);
}
.telefon img { width: 100%; }
.escena .telefon { position: absolute; left: 80px; top: 0; width: 340px; }
.carta-flotant {
  position: absolute; left: 0; top: 480px; width: 128px; aspect-ratio: 3/4; transform: rotate(-8deg);
  background: linear-gradient(180deg, #FFF9E8, #FFEBB4); border: 3px solid var(--groc); border-radius: 16px;
  box-shadow: 0 8px 22px rgba(200,134,27,.32); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px;
}
.carta-flotant img { width: 100%; height: 66%; object-fit: contain; }
.carta-flotant span { font-family: 'Baloo 2', sans-serif; font-size: 20px; font-weight: 800; color: var(--daurat); }
.corona { position: absolute; top: -13px; left: calc(50% - 13px); width: 26px; height: 22px; }
.aneguet-flotant { position: absolute; right: 0; top: 40px; width: 110px; transform: rotate(10deg); filter: drop-shadow(0 8px 14px rgba(35,50,79,.2)); }

/* ---- franja de confiança ---- */
.confianca { background: var(--navy); color: #FFFFFF; padding: 22px 0; }
.confianca .dins { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.confianca .item { display: flex; align-items: center; gap: 12px; font-family: 'Baloo 2', sans-serif; font-size: 19px; font-weight: 800; }
.confianca svg { flex: 0 0 auto; }

/* ---- blocs ---- */
.bloc { padding: 76px 0; }
.bloc.alt { background: var(--cel); }
.bloc.fosc { background: var(--navy); color: #FFFFFF; }
.bloc.carta { background: #FFF7EC; }
.capcalera-bloc { max-width: 820px; margin-bottom: 34px; }
.capcalera-bloc.centrat { margin-left: auto; margin-right: auto; text-align: center; }
.kicker { font-size: 14px; font-weight: 800; color: var(--taronja-fosc); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.bloc.fosc .kicker { color: var(--taronja-clar); }
.bloc h2 { font-size: 40px; }
.bloc .text { font-size: 17px; color: var(--text-suau); margin-top: 14px; }
.bloc.fosc .text { color: #C9D4E2; }
.dues { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: center; }

/* ---- com funciona ---- */
.maneres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
.manera { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.manera .pantalla { width: 100%; max-width: 250px; border-radius: 26px; border: 5px solid var(--color); overflow: hidden; background: #FFFFFF; box-shadow: 0 10px 24px rgba(35,50,79,.14); }
.manera .nom { display: flex; align-items: center; gap: 10px; font-family: 'Baloo 2', sans-serif; font-size: 24px; font-weight: 800; }
.medallo { width: 40px; height: 40px; border-radius: 50%; background: var(--color); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.medallo.petit { width: 26px; height: 26px; }
.manera p { font-size: 15.5px; color: var(--text-suau); }
.portes {
  margin: 34px auto 0; width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  background: var(--cel); border-radius: 999px; padding: 14px 26px; font-size: 15px; font-weight: 800; color: var(--text-suau);
}
.portes .cadena { display: flex; align-items: center; gap: 8px; }

/* ---- per què se'ls queda ---- */
.linia-temps { background: #FFFFFF; border-radius: 26px; padding: 34px 36px 30px; box-shadow: 0 4px 12px rgba(35,50,79,.10); }
.linia-temps .punts { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.linia-temps .punts::before { content: ''; position: absolute; left: 8%; right: 8%; top: 10px; height: 4px; background: var(--linia); border-radius: 2px; }
.linia-temps .punt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.linia-temps .punt i { display: block; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, var(--taronja-clar), var(--taronja)); box-shadow: 0 2px 0 var(--taronja-fosc); }
.linia-temps .punt b {
  font-family: 'Baloo 2', sans-serif; font-size: 16px; font-weight: 800; line-height: 1.25;
  /* alçada fixa: amb rètols d'una i de dues línies les targetes quedaven a
     alçades diferents i no s'entenia què era el dibuix */
  min-height: 2.7em; display: flex; align-items: center; text-align: center;
}
.mini-carta {
  position: relative; width: 66px; aspect-ratio: 3/4; border-radius: 10px; border: 2px solid var(--linia); overflow: hidden;
  background: #FFFFFF center / cover no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px;
}
.mini-carta img { width: 100%; height: 62%; object-fit: contain; }
.mini-carta span { font-family: 'Baloo 2', sans-serif; font-size: 10px; font-weight: 800; }
.mini-carta.n2 { background-image: url('/img/landing/nivell2.webp'); border-color: #9CCB86; }
.mini-carta.n3 { background-image: url('/img/landing/nivell3.webp'); border-color: #8FBDEB; }
.mini-carta.n4 { background-image: url('/img/landing/nivell4.webp'); border-color: var(--groc); }
.mini-carta.n4 span { color: var(--daurat); }
.mini-carta .corona { top: -9px; left: calc(50% - 9px); width: 18px; height: 15px; }
.linia-temps .peu { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--linia); padding-top: 18px; margin-top: 26px; font-size: 14px; color: var(--text-gris); font-weight: 800; }

/* ---- àlbum ---- */
.escena-album { position: relative; height: 640px; }
.escena-album .telefon { position: absolute; left: 0; top: 0; width: 290px; border-radius: 30px; border-width: 6px; }
.nivells { position: absolute; left: 180px; top: 360px; display: grid; grid-template-columns: repeat(4, 78px); gap: 12px; background: #FFFFFF; border-radius: 20px; padding: 16px; box-shadow: 0 12px 28px rgba(35,50,79,.18); }
.nivells .mini-carta { width: 78px; }
.nivells .mini-carta span { font-size: 12px; }
.nivells .llegenda { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-gris); font-weight: 800; text-align: center; }
.escena-album .aneguet { position: absolute; left: 380px; top: 60px; width: 120px; filter: drop-shadow(0 8px 14px rgba(35,50,79,.2)); }

/* ---- el que no hi trobareu ---- */
.absents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.absent { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; }
.absent h3 { font-size: 23px; color: #FFFFFF; }
.absent p { font-size: 15px; color: #C9D4E2; }

/* ---- per a qui ---- */
.publics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.public { background: #FFFFFF; border-radius: 22px; padding: 26px 28px; box-shadow: 0 4px 12px rgba(35,50,79,.10); display: flex; flex-direction: column; gap: 12px; }
.public img { width: 110px; height: 110px; object-fit: contain; border-radius: 16px; background: var(--cel); padding: 10px; }
.public h3 { font-size: 23px; }
.public p { font-size: 15.5px; color: var(--text-suau); }
.nota-cursos { margin-top: 26px; font-size: 15px; font-weight: 800; color: var(--text-gris); }

/* ---- per als pares ---- */
.pares-llista { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.pares-llista li { display: flex; gap: 14px; align-items: flex-start; font-size: 16.5px; color: var(--text-suau); }
.pares-llista ul { list-style: none; margin: 0; padding: 0; }
.pares-llista li strong { color: var(--navy); }
.icona-rodona { width: 34px; height: 34px; border-radius: 50%; background: var(--cel); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.dos-telefons { display: flex; gap: 30px; align-items: flex-start; justify-content: flex-end; }
.dos-telefons .telefon { width: 265px; border-radius: 28px; border-width: 6px; }
.dos-telefons .tel-amb-peu { margin: 0; display: flex; flex-direction: column; gap: 11px; align-items: center; }
.dos-telefons .tel-amb-peu:last-child { margin-top: 60px; }
.dos-telefons figcaption { font-size: 12.5px; line-height: 1.35; font-weight: 800; color: var(--text-gris); text-align: center; max-width: 265px; }

/* ---- la carta ---- */
.carta .dins { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 70px; align-items: center; }
.signatura { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.signatura .cometes { font-family: 'Baloo 2', sans-serif; font-size: 120px; font-weight: 800; line-height: .8; color: var(--taronja-clar); }
.signatura .nom { font-family: 'Baloo 2', sans-serif; font-size: 30px; font-weight: 800; }
.signatura .rol { font-size: 14px; font-weight: 800; color: var(--text-gris); }
.carta .text { font-size: 17.5px; line-height: 1.6; }
.carta .qui-pregunta { font-size: 23px; margin: 30px 0 -4px; }
.carta .empresa { margin-top: 18px; font-size: 14px; font-weight: 800; color: var(--text-gris); }

/* ---- preus ---- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 540px)); gap: 40px; justify-content: center; }
.pla {
  position: relative; background: #FFFFFF; border-radius: 26px; padding: 34px 36px; box-shadow: 0 4px 12px rgba(35,50,79,.10);
  border: 3px solid var(--linia); display: flex; flex-direction: column; gap: 18px;
}
.pla.destacat { border-color: var(--taronja); box-shadow: 0 10px 26px rgba(245,131,31,.22); }
.pla h3 { font-size: 28px; }
.pla .preu { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pla .preu b { font-family: 'Baloo 2', sans-serif; font-size: 44px; font-weight: 800; }
.pla .preu span { font-size: 15px; font-weight: 800; color: var(--text-gris); }
.pla ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 16px; color: var(--text-suau); }
.pla li { display: flex; gap: 10px; align-items: flex-start; }
.pla li svg { flex: 0 0 auto; margin-top: 3px; }
.pla .boto { margin-top: auto; }
/* el segon botó va enganxat al primer: el `margin-top: auto` de sobre és
   per empènyer el bloc de botons a baix de tot, no per separar-los */
.pla .boto.segon { margin-top: 10px; }
.pla .primers {
  position: absolute; top: -18px; left: 36px; background: linear-gradient(180deg, var(--taronja-clar), var(--taronja)); color: #FFFFFF;
  border-radius: 999px; padding: 8px 16px; font-family: 'Baloo 2', sans-serif; font-size: 14.5px; font-weight: 800; box-shadow: 0 3px 0 var(--taronja-fosc);
}
.pla .aviat { font-size: 13.5px; font-weight: 800; color: var(--text-gris); background: #FFF7EC; border-radius: 12px; padding: 10px 12px; }
.lletra-petita { max-width: 1120px; margin: 30px auto 0; text-align: center; font-size: 14px; color: var(--text-gris); }

/* ---- preguntes ---- */
.preguntes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 50px; }
.preguntes h3 { grid-column: 1 / -1; font-size: 20px; color: var(--taronja-fosc); margin: 22px 0 -4px; }
.preguntes h3:first-child { margin-top: 0; }
.preguntes details { border-top: 2px solid var(--linia); padding: 14px 0; }
.preguntes summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: 'Baloo 2', sans-serif; font-size: 19px; font-weight: 800; }
.preguntes summary::-webkit-details-marker { display: none; }
.preguntes summary::after { content: ''; width: 12px; height: 12px; border-right: 2.5px solid var(--text-gris); border-bottom: 2.5px solid var(--text-gris); transform: rotate(45deg); flex: 0 0 auto; transition: transform .15s; margin-right: 4px; }
.preguntes details[open] summary::after { transform: rotate(-135deg); }
.preguntes p { margin-top: 8px; font-size: 15px; color: var(--text-suau); }

/* ---- tancament i peu ---- */
.tancament { background: linear-gradient(180deg, var(--taronja-clar), var(--taronja)); color: #FFFFFF; padding: 64px 0; text-align: center; }
.tancament h2 { font-size: 40px; color: #FFFFFF; }
.tancament .accions { margin-top: 24px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.peu { padding: 30px 0 40px; font-size: 14px; font-weight: 800; color: var(--text-gris); }
.peu .dins { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.peu a { color: var(--navy); text-decoration: none; }
.peu a:hover { color: var(--taronja-fosc); }
.peu .suport { color: var(--taronja-fosc); }
.peu strong { color: var(--navy); }

/* ---- mòbil i tauleta ---- */
/* el nom gran només on hi ha lloc: entre 900 i 1240 px el menú ja va just i, amb
   els 27 px, es partiria en dues línies (mesurat: a 1200 px es parteix amb 27 i amb 21 no; a 1240 hi cap amb totes dues) */
/* les seccions són el primer que va al menú: en una línia volen 1.200 px */
@media (min-width: 1200px) { .cap .mes { display: none; } }
@media (max-width: 1199px) { .cap nav { display: none; } }
@media (max-width: 1100px) {
  .portada .dins { grid-template-columns: minmax(0, 1fr) 400px; gap: 30px; }
  .escena { width: 400px; height: 700px; }
  .escena .telefon { left: 40px; width: 300px; }
  .carta-flotant { top: 420px; width: 110px; }
  .maneres { gap: 20px; }
  .absents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos-telefons .telefon { width: 220px; }
}
@media (max-width: 900px) {
  .cap .dins { height: 66px; gap: 12px; }
  .cap .logo .anec { height: 34px; }
  .cap .logo .nom { height: clamp(15px, calc((100vw - 250px) / 6), 24px); }
  .cap .boto.primari.petit { padding: 12px 18px 8px; font-size: 17px; }
  .cap .parella { gap: 10px; }
  .cap .premium .llarg { display: none; }
  .cap .premium .curt { display: inline; }
  .cap .boto.germa { background: none; border: 0; box-shadow: none; padding: 0 2px; font-size: 15.5px;
    min-height: 44px; }
  .cap .mes { margin-left: 10px; }
  .tira .dins { gap: 12px; height: 40px; }
  .tira .entra, .tira .premium { font-size: 13.5px; }
  .tira .suggeriment { font-size: 12.5px; }
  .tira .suggeriment .llarg { display: none; }
  .tira .suggeriment .curt { display: inline; }
  .portada { padding: 34px 0 30px; }
  .portada .dins { grid-template-columns: minmax(0, 1fr); }
  .portada h1 { font-size: 36px; margin: 14px 0 12px; }
  .portada .sub { font-size: 16px; }
  .portada .accio { width: 100%; align-items: stretch; text-align: center; }
  .portada .accio .boto { width: 100%; }
  .portada .mira { justify-content: center; width: 100%; }
  .escena { width: 100%; max-width: 360px; height: 620px; margin: 10px auto 0; justify-self: center; }
  .escena .telefon { left: 60px; width: 240px; }
  .carta-flotant { left: 0; top: 380px; width: 96px; }
  .aneguet-flotant { width: 80px; right: 0; top: 30px; }
  .confianca .dins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .confianca .item { font-size: 15px; }
  .bloc { padding: 44px 0; }
  .bloc h2 { font-size: 28px; }
  .bloc .text { font-size: 15.5px; }
  .dues { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .maneres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .manera .pantalla { max-width: 170px; border-width: 4px; }
  .manera .nom { font-size: 19px; }
  .manera p { font-size: 13.5px; }
  .portes { border-radius: 18px; flex-direction: column; text-align: center; font-size: 13.5px; }
  .linia-temps { padding: 20px 14px 16px; }
  .linia-temps .punt b { font-size: 12px; }
  .mini-carta { width: 42px; padding: 4px; }
  .mini-carta span { display: none; }
  .linia-temps .peu { flex-direction: column; font-size: 12.5px; }
  .escena-album { height: 560px; }
  .escena-album .telefon { width: 210px; border-width: 5px; }
  .nivells { left: auto; right: 0; top: 260px; grid-template-columns: repeat(4, 56px); gap: 8px; padding: 12px; }
  .nivells .mini-carta { width: 56px; }
  .nivells .mini-carta span { display: block; font-size: 10px; }
  .escena-album .aneguet { left: auto; right: 10px; top: 120px; width: 90px; }
  .absents { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .absent { flex-direction: row; gap: 14px; padding: 18px; }
  .absent h3 { font-size: 19px; }
  .absent p { font-size: 14px; }
  .publics { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .public { flex-direction: row; padding: 16px; }
  .public img { width: 72px; height: 72px; flex: 0 0 auto; }
  .public h3 { font-size: 18px; }
  .public p { font-size: 14px; }
  .pares-llista li { font-size: 14.5px; }
  .dos-telefons { justify-content: center; gap: 14px; }
  .dos-telefons .telefon { width: 165px; border-width: 5px; }
  .dos-telefons .tel-amb-peu:last-child { margin-top: 40px; }
  .dos-telefons figcaption { font-size: 11.5px; max-width: 165px; }
  .carta .dins { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .signatura { flex-direction: row; text-align: left; gap: 14px; }
  .signatura .cometes { font-size: 64px; }
  .signatura .nom { font-size: 24px; white-space: nowrap; }
  .carta .text { font-size: 15.5px; }
  .carta .qui-pregunta { font-size: 20px; margin-top: 22px; }
  .plans { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pla { padding: 26px 22px 22px; }
  .pla .boto, .tancament .boto { padding-left: 18px; padding-right: 18px; font-size: 19px; }
  .pla .preu b { font-size: 36px; }
  .pla ul { font-size: 14.5px; }
  .pla .primers { position: static; align-self: flex-start; margin: -8px 0 -4px; font-size: 12.5px; padding: 7px 12px; }
  .preguntes { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .preguntes summary { font-size: 17px; }
  .tancament { padding: 40px 0; }
  .tancament h2 { font-size: 28px; }
  .tancament .accions { flex-direction: column; }
  .peu .dins { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
}

/* ---- les paraules difícils de dibuixar (15 set) ---- */
.nou-bloc .cintes { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.nou-bloc .cinta { background: #FFFFFF; border: 2px solid var(--linia); border-radius: 16px; padding: 16px 18px 14px; box-shadow: 0 3px 0 var(--linia); }
.nou-bloc .cinta span { display: inline-block; background: #FFF0DC; border-radius: 8px; padding: 7px 14px; font-family: 'Baloo 2', sans-serif; font-size: 20px; font-weight: 800; color: var(--navy); }
.nou-bloc .cinta em { display: block; margin-top: 10px; font-size: 15px; line-height: 1.35; font-weight: 700; color: var(--text-gris); font-style: normal; }
.pla.destacat .preu-general { margin: -6px 0 14px; font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--text-gris); }

/* pantalles estretes: el botó s'estreny perquè hi càpiguen logo, botó i menú */
@media (max-width: 420px) {
  /* el .dins general té 24 px de marge a cada costat: al capçal, a 320 px, són
     els que falten perquè hi càpiguen logo, botó i menú */
  .cap .dins, .tira .dins { padding: 0 14px; }
  .cap .dins { gap: 8px; }
  .cap .logo .anec { height: 32px; }
  .cap .boto.primari.petit { padding: 10px 15px 7px; font-size: 15.5px; }
  .cap .mes { margin-left: 4px; }
  .tira .dins { gap: 10px; }
  .tira .entra, .tira .premium { font-size: 13px; }
  .tira .tria summary { padding: 0 5px; }
}

/* amb dues accions a la barra, a amplada de telèfon el nom del logo ja no hi cap */
@media (max-width: 420px) {
  .cap .logo .nom { display: none; }
  .cap .logo .anec { height: 36px; }
  .cap .parella { gap: 8px; }
}
/* a 320 px no hi caben les dues accions i el menú: Premium passa a dins del menú */
@media (max-width: 370px) {
  .cap .parella .premium { display: none; }
}

/* ---- capçal: els desplegables del menú (Cursos, Guies) ---- */
.cap nav { align-items: center; }
.cap nav .submenu summary { font-size: 16.5px; padding: 0 4px; min-height: 40px; }
.cap nav .submenu .desplegat { left: -10px; }
.desplegat.ric { min-width: 300px; padding: 10px; }
.desplegat.ric a { display: flex; flex-direction: column; gap: 2px; white-space: normal; padding: 11px 14px; }
.desplegat.ric a b { font-size: 16px; }
.desplegat.ric a span { font-size: 13.5px; font-weight: 700; color: var(--text-gris); line-height: 1.35; }
.desplegat.dues-col { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); min-width: 520px; }
.desplegat.dues-col .totes { grid-column: 1 / -1; border-top: 1px solid var(--linia); border-radius: 0; color: var(--taronja-fosc); }
.cap .mes .desplegat .grup { padding: 11px 14px 2px; font-size: 13px; color: var(--text-gris); text-transform: uppercase; letter-spacing: .04em; }
.cap .mes .desplegat a.sub { padding-left: 26px; }
.cap .mes .desplegat .premium-menu { display: none; color: var(--taronja-fosc); }
@media (max-width: 370px) { .cap .mes .desplegat .premium-menu { display: block; } }

/* ---- pàgines de producte (com funciona, cursos, qui som) i guies ---- */
.pagina { padding: 34px 0 64px; background: linear-gradient(180deg, #FFFFFF 0, #FFFFFF 220px, var(--cel) 100%); }
.dins.estret { max-width: 768px; }
.molla { font-size: 14px; font-weight: 800; color: var(--text-gris); margin-bottom: 14px; }
.molla a { color: var(--text-gris); text-decoration: none; }
.molla a:hover { color: var(--taronja-fosc); }
.pagina h1 { font-size: 44px; }
.pagina .entradeta { margin-top: 14px; font-size: 19px; color: var(--text-suau); }
.pagina .accio { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pagina .accio .micro { font-size: 14px; color: var(--text-gris); }
.cos-pagina { margin-top: 26px; }
.cos-pagina h2, .guia h2 { font-size: 28px; margin: 38px 0 10px; }
.cos-pagina h3 { font-size: 20px; margin: 0 0 6px; }
.cos-pagina p, .cos-pagina li, .guia p, .guia li { font-size: 17px; line-height: 1.6; color: var(--text-suau); }
.cos-pagina p + p, .guia p + p { margin-top: 12px; }
.cos-pagina ul, .guia ul, .guia ol { padding-left: 22px; margin: 10px 0 0; }
.cos-pagina .empresa { margin-top: 12px; font-size: 14px; color: var(--text-gris); }
.bloc-pag { margin-top: 10px; }
.bloc-pag > p { margin-top: 10px; }
.dibuixos { display: flex; gap: 14px; align-items: flex-end; justify-content: flex-start; margin: 4px 0 6px; }
.dibuixos img { height: 86px; width: auto; }
.xips { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px !important; }
.xips li { background: #FFFFFF; border: 2px solid var(--linia); border-radius: 999px; padding: 6px 14px; font-size: 15px !important; color: var(--navy) !important; }
.xips li.mes { border-style: dashed; color: var(--text-gris) !important; }
.maneres-pag { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 16px 0 14px; }
.maneres-pag figure { margin: 0; }
.maneres-pag img { border-radius: 16px; border: 4px solid var(--navy); }
.maneres-pag figcaption { margin-top: 8px; font-size: 14.5px; line-height: 1.4; color: var(--text-suau); }
.maneres-pag figcaption b { display: block; color: var(--navy); font-size: 16px; }
.mostra-so { display: flex; align-items: center; gap: 18px; background: #FFFFFF; border: 2px solid var(--linia); border-radius: 20px; padding: 14px 18px; margin: 14px 0 12px; max-width: 420px; }
.mostra-so img { height: 92px; width: auto; }
.mostra-so b { display: block; font-family: 'Baloo 2', sans-serif; font-size: 30px; line-height: 1.1; }
.escolta { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--taronja); background: #FFF4E8; color: var(--taronja-fosc); font: 800 16px 'Nunito', sans-serif; cursor: pointer; }
.escolta::before { content: ''; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.escolta.sona { background: var(--taronja); color: #FFFFFF; }
.publics-pag { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.publics-pag > div { background: #FFFFFF; border: 2px solid var(--linia); border-radius: 18px; padding: 16px 18px; }
.publics-pag p { font-size: 15.5px !important; }
.bloc-pag.preguntes { display: block; }
.bloc-pag.preguntes details { border-top: 2px solid var(--linia); padding: 14px 0; }
.guies-del-tema { list-style: none; padding: 0 !important; }
.guies-del-tema li + li { margin-top: 6px; }
.tanca-pag { margin-top: 40px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.tanca-pag .enllac-preus { font-weight: 800; font-size: 17px; }
.mes-qui { font-weight: 800; }

/* fonts numerades (pàgines i guies) */
.cos-pagina sup, .guia sup { line-height: 0; font-size: 12px; }
.cos-pagina sup + sup::before, .guia sup + sup::before { content: ','; color: var(--text-gris); }
.footnote-ref { text-decoration: none; font-weight: 800; }
.fonts { margin-top: 34px; border-top: 2px solid var(--linia); padding-top: 10px; }
.fonts h2 { font-size: 20px !important; margin-top: 14px !important; }
.fonts ol { padding-left: 22px; }
.fonts li, .fonts li p { font-size: 14.5px !important; line-height: 1.5 !important; color: var(--text-gris) !important; }
.fonts li + li { margin-top: 6px; }

/* ---- la plantilla d'una guia (W2) ---- */
.guia h1 { font-size: 40px; }
.signatura-guia { margin-top: 12px; font-size: 15px !important; color: var(--text-gris) !important; }
.guia section { margin-top: 6px; }
.guia .resum { background: #FFFFFF; border: 2px solid #FFD9B3; border-radius: 20px; padding: 6px 22px 20px; margin-top: 24px; }
.guia .resum h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--taronja-fosc); margin-top: 16px; }
.guia .no-sabem { background: var(--cel-fort); border-radius: 20px; padding: 4px 22px 20px; margin-top: 30px; }
.guia .de-parauling { border: 2px dashed var(--linia); border-radius: 20px; padding: 4px 22px 20px; margin-top: 30px; }
.guia .de-parauling h2 { font-size: 20px; }
.guia .cap-a-producte { font-weight: 800; }
.guia table { border-collapse: collapse; width: 100%; margin: 16px 0; background: #FFFFFF; border-radius: 14px; overflow: hidden; }
.guia th, .guia td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linia); font-size: 15px; color: var(--text-suau); }
.guia th { color: var(--navy); background: #F6FAFE; }
.guia .llegiu ul { list-style: none; padding: 0; }
.guia .llegiu li + li { margin-top: 6px; }
.eines-guia { margin-top: 26px; }
.copia { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--linia); background: #FFFFFF; color: var(--navy); font: 800 15px 'Nunito', sans-serif; cursor: pointer; }
.peu-guia { margin-top: 14px; font-size: 14px !important; color: var(--text-gris) !important; }

@media (max-width: 900px) {
  .pagina { padding: 22px 0 44px; }
  .pagina h1, .guia h1 { font-size: 32px; }
  .pagina .entradeta { font-size: 16.5px; }
  .cos-pagina h2, .guia h2 { font-size: 23px; margin-top: 30px; }
  .cos-pagina p, .cos-pagina li, .guia p, .guia li { font-size: 16px; }
  .maneres-pag { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .publics-pag { grid-template-columns: minmax(0, 1fr); }
  .dibuixos { gap: 10px; }
  .dibuixos img { height: 54px; min-width: 0; }
  .desplegat.dues-col { grid-template-columns: minmax(0, 1fr); min-width: 280px; }
}

/* ---- la pàgina de l'arrel: la tria de llengua (W1) ---- */
body.arrel { background: linear-gradient(180deg, #FFFFFF 0%, var(--cel-fort) 100%); min-height: 100vh; display: flex; flex-direction: column; }
.tria-llengua { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 48px 20px 30px; text-align: center; }
.tria-llengua .anec { width: 160px; margin: 0 auto; }
.titol-tria { margin-top: 18px; font-size: 17px; color: var(--text-gris); }
.llengues { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.llengua { display: block; text-align: left; text-decoration: none; background: #FFFFFF; border: 2px solid var(--linia); border-radius: 20px; padding: 16px 20px; box-shadow: 0 4px 0 #D7E2EF; }
.llengua:hover { border-color: var(--taronja); }
.llengua b { display: block; font-family: 'Baloo 2', sans-serif; font-size: 26px; color: var(--navy); line-height: 1.1; }
.llengua span { display: block; margin-top: 4px; font-size: 15.5px; color: var(--text-suau); }
.peu-arrel { padding: 20px; text-align: center; font-size: 13.5px; font-weight: 800; color: var(--text-gris); }
.peu-arrel a { color: var(--taronja-fosc); text-decoration: none; }