/* Horaria — capa de marca (guia v1, octubre 2026)
   Es carrega l'última a totes les pàgines: redefineix els tokens de cada pàgina amb la paleta
   pissarra/guix/verd i aplica tipografia, botons i moviment de la guia. Colors d'estat
   (vermell, groc, blau) només per a l'app i els mocks. */
:root {
  --pissarra: #1E3A2F; --fosca: #14271F; --guix: #F4F2EA; --verd: #1A7A4E; --verd-h: #156640;
  --guix-verd: #A8DDB5; --pols: #C8CEC5; --muted: #4E5E56; --linia: #E3E0D4; --guix-2: #ECE9DF; --verd-lt: #E1EEE3;
  --ease-out: cubic-bezier(.22,1,.36,1); --ease-guix: cubic-bezier(.65,0,.35,1);

  /* Tokens de les pàgines existents, apuntant a la marca */
  --black: var(--fosca); --ink: var(--fosca); --ink-2: #33463D; --ink-3: var(--muted); --ink-4: #7D8A83;
  --border: var(--linia); --bg: var(--guix); --bg-2: var(--guix-2);
  --blue: var(--verd); --blue-lt: var(--verd-lt); --green: var(--verd); --green-lt: var(--verd-lt);
  --shadow: 0 1px 2px rgba(20,39,31,.05), 0 10px 30px -14px rgba(20,39,31,.18);
  --shadow-lg: 0 30px 70px -30px rgba(20,39,31,.35);
}

html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Geist', system-ui, sans-serif; background: var(--guix); color: var(--fosca); font-synthesis: none; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
b, strong { font-weight: 600; }
::selection { background: var(--guix-verd); color: var(--fosca); }
:focus-visible { outline: 3px solid var(--verd); outline-offset: 3px; }
a { transition: color .15s var(--ease-out); }

/* ── Navegació (pissarra) ── */
nav { background: rgba(30,58,47,.97) !important; border-bottom-color: rgba(244,242,234,.08) !important; }
nav.nav-glass { background: rgba(30,58,47,.82) !important; border-bottom-color: rgba(244,242,234,.12) !important; box-shadow: 0 10px 30px -12px rgba(20,39,31,.5) !important; }
.nav-logo img { height: 26px !important; width: auto; }
.nav-links { color: var(--pols) !important; font-weight: 500; }
.nav-links a:hover { color: var(--guix) !important; }
.nav-cta { background: var(--guix) !important; color: var(--pissarra) !important; border-radius: 999px !important; font-weight: 500 !important; padding: 9px 18px !important; transition: transform .15s var(--ease-out), background .15s !important; }
.nav-cta:hover { background: #fff !important; opacity: 1 !important; transform: translateY(-1px); }
.nav-cta:active { transform: translateY(1px); }
.nav-burger span { background: var(--guix) !important; }
.nav-mobile-menu, nav.nav-glass ~ .nav-mobile-menu { background: rgba(30,58,47,.98) !important; }
.nav-mobile-menu a { color: var(--guix) !important; font-weight: 500 !important; border-bottom-color: rgba(244,242,234,.07) !important; }
.nav-mobile-menu a:last-child { background: var(--guix) !important; color: var(--pissarra) !important; border-radius: 999px !important; }
.lang-switch__trigger { color: var(--pols) !important; font-weight: 500 !important; }
.lang-switch__menu { background: var(--fosca) !important; border-color: rgba(244,242,234,.12) !important; }
.lang-switch__opt { color: var(--pols) !important; }
.lang-switch__opt:hover, .lang-switch__opt.is-active { color: var(--guix) !important; }

/* ── Botons: píndola, resposta de 150 ms (puja 1 px, baixa en prémer) ── */
.btn-primary, .btn-secondary, .btn-submit, .tour-try, .cookie-btn-accept, .cookie-btn-reject {
  border-radius: 999px !important; font-weight: 500 !important; box-shadow: none !important;
  transition: transform .15s var(--ease-out), background .15s, color .15s, border-color .15s !important;
}
.btn-primary { background: var(--verd) !important; color: #fff !important; }
.btn-primary:hover { background: var(--verd-h) !important; opacity: 1 !important; transform: translateY(-1px); }
.btn-secondary { background: transparent !important; color: var(--fosca) !important; border: 1px solid rgba(20,39,31,.2) !important; }
.btn-secondary:hover { border-color: var(--fosca) !important; background: transparent !important; transform: translateY(-1px); }
.btn-primary:active, .btn-secondary:active, .btn-submit:active, .tour-try:active { transform: translateY(1px) scale(.98); }
.tour-try { background: var(--guix-verd) !important; color: var(--fosca) !important; }
.tour-try:hover { background: var(--guix) !important; transform: translateY(-1px); }

/* ── Seccions ── */
.section-tag { font-size: 15px !important; font-weight: 500 !important; color: var(--verd) !important; letter-spacing: 0 !important; margin-bottom: 14px !important; }
.section-title { font-weight: 600 !important; letter-spacing: -.035em !important; line-height: 1.04 !important; color: var(--fosca); }
.section-sub { color: var(--muted) !important; }

/* Pissarra: hero, demo, seminari, contacte. El guix és la tinta i el guix verd l'accent */
.hero-wrap, .fx-sec, #seminari-caps-estudis, .contact-section {
  background: var(--pissarra) !important; color: var(--guix);
  --ink: var(--guix); --ink-2: var(--pols); --ink-3: #9DAAA2; --ink-4: #7F8D85; --black: var(--guix);
  --border: rgba(244,242,234,.12); --blue: var(--guix-verd); --blue-lt: rgba(168,221,181,.12);
}
.hero-wrap .section-tag, .fx-sec .section-tag, #seminari-caps-estudis .section-tag, .contact-section .section-tag { color: var(--guix-verd) !important; background: none !important; padding: 0 !important; }
.hero-wrap .section-title, .fx-sec .section-title, #seminari-caps-estudis .section-title, .contact-section .section-title { color: var(--guix) !important; }
.hero-wrap .section-sub, #seminari-caps-estudis .section-sub, .contact-section .section-sub { color: var(--pols) !important; }
.hero-wrap .btn-primary, .contact-section .btn-submit { background: var(--guix-verd) !important; color: var(--fosca) !important; border: 0 !important; }
.hero-wrap .btn-primary:hover, .contact-section .btn-submit:hover { background: var(--guix) !important; }
.hero-wrap .btn-secondary { color: var(--guix) !important; border-color: rgba(244,242,234,.28) !important; }
.hero-wrap .btn-secondary:hover { border-color: var(--guix) !important; }

/* ── Hero ── */
.hero-wrap { border-bottom: 0; }
.hero h1 { color: var(--guix) !important; font-weight: 600 !important; letter-spacing: -.045em !important; line-height: 1 !important; }
.hero h1 em { color: var(--guix-verd) !important; }
.hero p { color: var(--pols) !important; }
.brand-word { animation: none !important; }
.brand-word span, .brand-word .bw-1, .brand-word .bw-3, .brand-word .bw-ia { color: var(--guix) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-shadow: none !important; }
.hero-trust { color: var(--pols) !important; font-weight: 500 !important; }
.hero-video-card { background: #fff !important; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -36px rgba(0,0,0,.55), 0 0 0 1px rgba(244,242,234,.08); }
.hero-video-card.hero-expanded { border-radius: 0; background: var(--fosca) !important; }

/* ── Peu ── */
footer { background: var(--guix) !important; color: var(--muted); border-top: 1px solid var(--linia) !important; }
footer a:hover { color: var(--verd); }

/* ── Bàner de galetes i modals ── */
.cookie-banner { background: var(--fosca) !important; color: var(--guix) !important; }
.cookie-btn-accept { background: var(--guix-verd) !important; color: var(--fosca) !important; }
.cookie-btn-reject { background: transparent !important; color: var(--guix) !important; border: 1px solid rgba(244,242,234,.3) !important; }

/* ── Moviment: entrades (pugen 20 px, 520 ms, esglaó 70 ms), una sola vegada ── */
.rise-in { opacity: 0; transform: translateY(20px); }
.rise-in.is-in { opacity: 1; transform: none; transition: opacity .52s var(--ease-out), transform .52s var(--ease-out); transition-delay: var(--rise-d, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .rise-in, .rise-in.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Botons flotants: pissarra amb icona de guix, en lloc dels colors de cada xarxa ── */
.whatsapp-float, .instagram-float { background: var(--pissarra) !important; box-shadow: 0 0 0 1px rgba(244,242,234,.14), 0 12px 28px -10px rgba(20,39,31,.6) !important; transition: transform .15s var(--ease-out), bottom .2s ease, opacity .25s !important; }
.whatsapp-float:hover, .instagram-float:hover { transform: translateY(-1px) !important; }
.whatsapp-float svg path { fill: var(--guix) !important; }
.instagram-float svg { stroke: var(--guix) !important; }
.instagram-float svg circle[fill] { fill: var(--guix) !important; }

/* ── Demo per scroll: pissarra plana, sense resplendors ni degradats ── */
.fx-stage { background: none !important; }
.fx-eye { color: var(--guix-verd) !important; }
.fx-cap h3 span { color: #8FA197 !important; }
.fx-clock { color: var(--pols) !important; background: rgba(244,242,234,.06) !important; }
.fx-outro strong { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--guix-verd) !important; -webkit-text-fill-color: var(--guix-verd); }
.fx-outro p, .fx-outro span { color: var(--pols) !important; }
.fx-bar i { background: var(--guix-verd) !important; }
.fx-sec .demo-hint { background: rgba(168,221,181,.1) !important; color: var(--guix-verd) !important; }
.fx-sec .demo-try-link a { color: var(--guix-verd) !important; }

/* ── Peu amb el nom gran, com a la guia ── */
.foot-word { display: block; flex: 0 0 100%; padding: 48px 0 0; margin-bottom: 28px; }
.foot-word img { width: 100%; height: auto; display: block; }

/* Pàgines amb fons de pissarra sencer (alta de centre) */
body.on-pissarra { background: var(--pissarra); }
h1 { line-height: 1.1; }

/* ── Funcionalitats: vista pròpia (#funcionalitats), fora de la landing ── */
.vista-func { display: none; }
body.vista-funcionalitats .vista-func { display: block; }
body.vista-funcionalitats .hero-wrap,
body.vista-funcionalitats section:not(.vista-func) { display: none !important; }
.vista-back { display: inline-block; margin-bottom: 28px; font-size: 15px; font-weight: 500; color: var(--verd); }
.vista-back:hover { color: var(--verd-h); }

/* ── Preus: dues targetes iguals que caben en una pantalla ── */
#preus { padding-top: 64px; padding-bottom: 64px; }
#preus .section-sub { margin-bottom: 24px !important; }
.pricing-grid { align-items: stretch !important; gap: 20px !important; max-width: 1000px; margin: 0 auto; }
.plan { padding: 24px 26px !important; gap: 14px !important; border-radius: 20px !important; }
.plan-free { background: #fff !important; border: 1px solid var(--linia) !important; }
.plan-pro { background: var(--pissarra) !important; border-color: var(--pissarra) !important; }
.plan-pro > div:first-child { background: var(--guix-verd) !important; color: var(--fosca) !important; }
.plan span[style*="font-size:40px"] { font-size: 36px !important; }
.plan-list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 16px !important; }
.plan-list li { font-size: 13.5px !important; line-height: 1.35; }
@media (max-width: 560px) { .plan-list { grid-template-columns: 1fr; } }
.plan a, .plan button { border-radius: 999px !important; font-weight: 500 !important; }
.plan-pro > div:last-child { border-radius: 999px !important; }

/* Calculadora plegada darrere d'un botó */
.roi-toggle-wrap { display: flex; justify-content: center; margin-top: 28px; }
.roi-toggle {
  font: 500 16px 'Geist', sans-serif; color: var(--fosca); background: transparent; cursor: pointer;
  border: 1px solid rgba(20,39,31,.22); border-radius: 999px; padding: 14px 24px;
  display: inline-flex; align-items: center; gap: 10px; transition: transform .15s var(--ease-out), border-color .15s;
}
.roi-toggle::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease-out); }
.roi-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.roi-toggle:hover { border-color: var(--fosca); transform: translateY(-1px); }
.roi-toggle:active { transform: translateY(1px); }
.roi-wrap { margin-top: 28px; scroll-margin-top: 96px; }
.roi-wrap .roi { margin-bottom: 0 !important; }
.roi-result { background: var(--pissarra) !important; }
.roi-cta, .roi-go { border-radius: 999px !important; font-weight: 500 !important; }
.plan-pro > div:last-child > * { border-radius: 0 !important; }
/* Preus compactes: commutador al costat del títol, targetes més amples i llistes sense salts */
#preus .section-inner { max-width: 1120px; position: relative; }
#preus .section-inner > div[style*="margin-bottom:28px"] { margin-bottom: 18px !important; }
@media (min-width: 900px) {
  #preus .section-inner > div[style*="margin-bottom:28px"] { position: absolute; right: 0; top: 52px; margin: 0 !important; }
}
.pricing-grid { max-width: none; }
.plan { gap: 12px !important; }
.plan-list { gap: 6px 18px !important; }
.plan-list li { font-size: 13px !important; gap: 8px !important; }
#preuCardEscola input[type=range] + div { display: none; }
#preuCardEscola > div:nth-child(3) > div:first-child { margin-bottom: 8px !important; }
#calcPreuUnitari { display: none; }

/* ── Aval al hero: seminari del Servei Educatiu, en dues línies ── */
.hero-aval { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; padding: 8px 18px 8px 8px; border-radius: 999px; background: rgba(244,242,234,.06); border: 1px solid rgba(244,242,234,.12); text-align: left; transition: transform .15s var(--ease-out), border-color .15s; max-width: 100%; }
.hero-aval:hover { border-color: rgba(244,242,234,.3); transform: translateY(-1px); }
.hero-aval img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; background: #fff; }
.hero-aval b { display: block; font-size: 14px; font-weight: 500; color: var(--guix); line-height: 1.3; }
.hero-aval small { display: block; font-size: 12.5px; color: var(--pols); margin-top: 2px; }

/* ── Per què HorariaPro: perfils amb pestanyes i el vídeo de l'app al mòbil ── */
.rols-sec { background: var(--guix-2); border-top: 1px solid var(--linia); }
.rols-head { text-align: center; }
.rols-head .section-sub { margin: 0 auto 32px; }
.rols-tabs { display: flex; width: max-content; max-width: 100%; margin: 0 auto 48px; padding: 5px; gap: 4px; background: #fff; border: 1px solid var(--linia); border-radius: 999px; }
.rols-tab { position: relative; overflow: hidden; font: 500 15px 'Geist', sans-serif; color: var(--muted); background: transparent; border: 0; border-radius: 999px; padding: 11px 22px; cursor: pointer; transition: color .15s, background .2s var(--ease-out); }
.rols-tab:hover { color: var(--fosca); }
.rols-tab[aria-selected="true"] { background: var(--pissarra); color: var(--guix); }
.rols-tab i { position: absolute; left: 18px; right: 18px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--guix-verd); transform: scaleX(0); transform-origin: left; opacity: 0; }
.rols-tab.is-auto i { opacity: 1; animation: rolsProg 9s linear forwards; }
@keyframes rolsProg { to { transform: scaleX(1); } }
.rols-panel { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 72px; align-items: center; max-width: 980px; margin: 0 auto; }
.rols-panel.is-on { animation: rolsIn .52s var(--ease-out); }
@keyframes rolsIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.rols-phone { position: relative; padding: 10px; background: var(--fosca); border-radius: 46px; box-shadow: 0 0 0 2px #2c4a3e, var(--shadow-lg); }
.rols-phone video { display: block; width: 100%; aspect-ratio: 360 / 810; object-fit: cover; border-radius: 36px; background: #fff; }
.rols-stat { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.rols-stat b { font-size: clamp(44px, 5vw, 64px); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: var(--verd); }
.rols-stat span { font-size: 15px; color: var(--muted); }
.rols-text h3 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; color: var(--fosca); margin-bottom: 12px; }
.rols-accent { font-size: 17px; font-weight: 500; color: var(--verd); margin-bottom: 12px; }
.rols-text > p:not(.rols-accent) { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin-bottom: 22px; }
.rols-list { list-style: none; display: grid; gap: 12px; }
.rols-list li { position: relative; padding-left: 28px; font-size: 15px; color: var(--fosca); line-height: 1.45; }
.rols-list li::before { content: ''; position: absolute; left: 2px; top: .42em; width: 12px; height: 7px; border-left: 2.5px solid var(--verd); border-bottom: 2.5px solid var(--verd); transform: rotate(-45deg); }
.rols-link { display: inline-block; margin-top: 24px; font-size: 15px; font-weight: 500; color: var(--verd); border-bottom: 1px solid rgba(26,122,78,.35); }
.rols-link:hover { border-color: var(--verd); }
@media (max-width: 820px) {
  .rols-panel { grid-template-columns: 1fr; gap: 32px; }
  .rols-phone { width: min(240px, 70%); margin: 0 auto; order: 2; }
  .rols-tab { padding: 10px 14px; font-size: 14px; }
  .rols-tabs { margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) { .rols-panel.is-on { animation: none; } }
.rols-panel[hidden] { display: none; }
.rols-panel { grid-template-columns: 240px minmax(0, 1fr); }
.hero-aval { border-radius: 20px; }
.hero-aval b { font-size: 13.5px; }
.hero-aval { gap: 12px; padding: 7px 16px 7px 7px; }
.hero-aval img { width: 40px; height: 40px; }
.hero-aval b, .hero-aval small { white-space: nowrap; }
.hero-aval b { font-size: 13px; } .hero-aval small { font-size: 12px; }
@media (max-width: 380px) { .hero-aval b, .hero-aval small { white-space: normal; } }
@media (max-width: 820px) { .rols-panel { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .hero-aval b, .hero-aval small { white-space: normal; } }
@media (max-width: 480px) {
  .hero-aval { padding: 9px 16px; }
  .hero-aval img { display: none; }
  .hero-aval b, .hero-aval small { white-space: nowrap; font-size: 12.5px; }
  .hero-aval small { font-size: 11.5px; }
}