/* ============================================================
   UniMatx — Capa d'identitat visual "Busuu"
   Carregada DESPRÉS de styles.css per sobreescriure l'aspecte.
   - Fons canvas mist (#f2f7fd), targetes blanques (16px)
   - Botons píndola 45px; ÚNICA acció cromàtica = mint (#11ee92)
   - Gradient indigo→sky al hero i als moments energètics
   - Blau senyal (#116eee) només per enllaços, logo i accents
   - Colors de branques conservats com a codificació semàntica
   ============================================================ */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); background: var(--paper); color: var(--ink); }
::selection { background: rgba(17, 238, 146, .35); }
a { color: var(--blue); }
:focus-visible { outline: 3px solid rgba(17, 238, 146, .55); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); }
.eyebrow { color: var(--blue); letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }

/* ---------- Botons: píndola; mint = única acció ---------- */
button { font-family: inherit; }

.hero-cta, .quiz-next, .quiz-start, .select-button, .ask-actions button,
.test-report-cta, .price-card button, .report-download, .orientation-next,
.compare-now, .auth-submit, .legal-ok, .degree-advisor button,
.orientation-result-actions button:first-child,
.quiz-full-cta, .quiz-resume-btn, .schools-cta a {
  border-radius: 45px !important;
}

/* Accions primàries → mint (#11ee92) */
.hero-cta, .quiz-next, .quiz-start, .select-button, .ask-actions button,
.test-report-cta, .price-card button, .report-download, .orientation-next,
.compare-now, .auth-submit, .legal-ok, .degree-advisor button,
.orientation-result-actions button:first-child {
  color: var(--ink) !important;
  background: var(--yellow) !important;
  border: 0 !important;
  box-shadow: var(--shadow-subtle) !important;
}

/* Accions secundàries → blau senyal amb contorn */
.load-more, .detail-button, .quiz-back, .orientation-back,
.orientation-result-actions button, .nav-compare {
  color: var(--blue) !important;
  border: 1.5px solid var(--blue) !important;
  background: transparent !important;
  border-radius: 45px !important;
}

/* ---------- Top navigation bar (blanc) ---------- */
.site-header {
  background: rgba(255, 255, 255, .97) !important;
  backdrop-filter: blur(16px);
  color: var(--ink) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06) !important;
  height: 68px;
}
.site-header.scrolled { background: rgba(255, 255, 255, .99) !important; color: var(--ink) !important; }
.site-header nav a { color: var(--ink); font-weight: 600; }
.brand-word b:first-child { color: var(--ink); }
.brand-word b:last-child { color: var(--blue); }
.brand-mark { border-radius: 12px; box-shadow: var(--shadow-subtle); }
.nav-test, .nav-auth, .nav-report {
  color: var(--ink) !important;
  border: 0 !important;
  background: transparent !important;
  font-weight: 600;
}
.nav-compare span { background: var(--yellow); color: var(--ink); }
.nav-report { color: var(--blue) !important; font-weight: 700; }

.view-toggle { background: var(--white); border-color: var(--line); box-shadow: var(--shadow-subtle); }
.view-toggle button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); box-shadow: none; }

/* ---------- Hero: gradient indigo→sky ---------- */
.hero { background: var(--grad) !important; }
.hero::before, .hero::after { opacity: 0 !important; }
.hero-noise { opacity: .05; }
.hero-wallpaper span {
  border-color: rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .07);
  color: #fff;
}
.hero h1 {
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  font-size: clamp(40px, 5.4vw, 64px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
}
.hero h1 em { color: var(--yellow); }
.hero-lead { color: rgba(255, 255, 255, .92) !important; }
.hero-cta {
  color: var(--ink) !important;
  background: var(--yellow) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18) !important;
}
.hero-cta span { background: rgba(37, 43, 47, .14); color: var(--ink); }
.hero-secondary { color: rgba(255, 255, 255, .94); border-bottom-color: rgba(255, 255, 255, .5); }

.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; font-size: 12px; color: rgba(255, 255, 255, .95); }
.hero-proof b { font-weight: 700; }
.hero-proof span { color: rgba(255, 255, 255, .78); }

.orbit { border-radius: 50%; }
.visual-card { border-radius: 16px; }
.hero .eyebrow, .schools-section .eyebrow { color: #ffffff; }
.visual-card { box-shadow: var(--shadow-subtle); }
.visual-card-main { border-radius: 16px; }
.visual-kicker { background: var(--blue); border-radius: 999px; }
.visual-card-left, .visual-card-science, .visual-card-right {
  color: var(--ink) !important;
  background: var(--white) !important;
}
.visual-card-left b, .visual-card-science b, .visual-card-right b { color: var(--ink); }
.visual-card-left span, .visual-card-science span, .visual-card-right span { color: var(--ink-soft); }

/* ---------- Branques: targetes blanques amb accent de color ---------- */
.branch-section { background: var(--paper); }
.branch-section .section-heading, .how-section .section-heading,
.pricing-section .section-heading, .faq-section .section-heading { text-align: center; }
.branch-section .section-heading, .how-section .section-heading,
.pricing-section .section-heading, .faq-section .section-heading { margin-inline: auto; }
.branch-section .section-heading > p:last-child, .how-section .section-heading > p:last-child,
.pricing-section .section-heading > p:last-child, .faq-section .section-heading > p:last-child { margin-inline: auto; }

.branch-card {
  background: var(--white) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-subtle);
}
.branch-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  border-radius: 16px 16px 0 0;
}
.branch-card.social::before { background: var(--social); }
.branch-card.scientific::before { background: var(--scientific); }
.branch-card.artistic::before { background: var(--artistic); }
.branch-card.all::before { background: var(--blue); }
.branch-card::after {
  border-color: rgba(37, 43, 47, .08);
  box-shadow: 0 0 0 30px rgba(37, 43, 47, .03), 0 0 0 60px rgba(37, 43, 47, .02);
}
.branch-icon {
  position: static;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  margin-bottom: 14px;
}
.branch-card.social .branch-icon { background: var(--social); }
.branch-card.scientific .branch-icon { background: var(--scientific); }
.branch-card.artistic .branch-icon { background: var(--artistic); }
.branch-card.all .branch-icon { background: var(--blue); }
.branch-card strong { font-family: var(--font-sans); font-size: 26px; font-weight: 800; margin-top: auto; }
.branch-card small { color: var(--ink-soft); opacity: 1; }
.branch-count { color: var(--ink); border: 1px solid var(--line); border-radius: 999px; }
.branch-card.social .branch-count { color: var(--social); border-color: var(--social); }
.branch-card.scientific .branch-count { color: var(--scientific); border-color: var(--scientific); }
.branch-card.artistic .branch-count { color: var(--artistic); border-color: var(--artistic); }
.branch-card.all .branch-count { color: var(--blue); border-color: var(--blue); }
.branch-card.active { outline: 3px solid var(--blue); outline-offset: 3px; }
.branch-card:hover, .branch-card.active { transform: translateY(-6px); box-shadow: var(--shadow); }

/* ---------- Encapçalaments de secció ---------- */
.section-heading h2, .catalog-top h2, .comparison-head h2,
.how-section h2, .schools-heading h2, .seo-section h2, .faq-heading h2,
.pricing-section .section-heading h2, .ask-heading h2 {
  font-family: var(--font-sans) !important;
  font-size: clamp(30px, 4vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: -.01em !important;
  color: var(--ink) !important;
}
.section-heading > p:last-child { color: var(--ink-soft); }

/* ---------- Catàleg ---------- */
.catalog-section { background: var(--paper); border-radius: 0; }
.catalog-intro { color: var(--ink-soft); }
.filters {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-subtle);
}
.filters select, .filters input { color: var(--ink); }
.degree-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-subtle);
}
.degree-card:hover { box-shadow: var(--shadow); border-color: transparent; }
.degree-card.selected { border-color: var(--card-color); }
.degree-card h3 { font-family: var(--font-sans); font-size: 24px; font-weight: 700; color: var(--ink); }
.degree-location { color: var(--ink-soft); }
.degree-facts span { color: var(--ink-soft); }
.data-pill { color: var(--ink-soft); background: rgba(37, 43, 47, .06); }
.no-results, .catalog-loading, .dialog-loading, .compare-loading { color: var(--ink-soft); background: var(--paper); border-color: var(--line); }
.catalog-loading strong, .dialog-loading strong, .compare-loading strong { font-family: var(--font-sans); color: var(--ink); font-weight: 700; }

/* ---------- Com funciona ---------- */
.how-grid li { background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-subtle); }
.how-grid b { color: var(--blue); }
.how-grid h3 { font-family: var(--font-sans); font-size: 24px; font-weight: 700; }
.how-grid p { color: var(--ink-soft); }

/* ---------- Promo del test: gradient ---------- */
.quiz-promo { background: var(--grad) !important; border-radius: 28px; }
.quiz-promo::before { border-color: rgba(255, 255, 255, .18); }
.quiz-promo h2 { color: #fff !important; }
.quiz-promo h2 em { color: var(--yellow); }
.quiz-label { border-color: rgba(255, 255, 255, .32); color: #fff; }
.quiz-promo-copy > p { color: rgba(255, 255, 255, .82); }
.quiz-steps span { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
.quiz-steps b { color: var(--yellow); }
.quiz-full-cta { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
.quiz-full-cta span { color: rgba(255, 255, 255, .72); }
.quiz-preview { border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.quiz-start { color: var(--ink); background: var(--yellow); box-shadow: 0 12px 25px rgba(0, 0, 0, .18); }
.quiz-start:hover { background: #3ff5ad; }
.quiz-start i { background: rgba(37, 43, 47, .14); color: var(--ink); }

/* ---------- Pregunta lliure ---------- */
.ask-section { background: var(--white); border: 1px solid var(--line); border-radius: 24px; }
.ask-box { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.ask-box textarea { color: var(--ink); }
.ask-actions span { color: var(--ink-soft); }
.ask-answer { background: #eaf1fb; color: var(--ink); }
.ask-answer h3 { font-family: var(--font-sans); font-weight: 700; }
.ask-answer > p { color: var(--ink-soft); }
.ask-rec { background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.ask-rec span { color: var(--ink-soft); }

/* ---------- SEO + Centres: bandes suaus ---------- */
.seo-section { background: #eaf1fb; color: var(--ink); border-radius: 24px; box-shadow: none; }
.seo-section h2 { color: var(--ink) !important; }
.seo-section p:not(.eyebrow) { color: var(--ink-soft); }
.seo-points article { background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.seo-points strong { color: var(--ink); }
.seo-points span { color: var(--ink-soft); }

.schools-section { background: var(--grad); color: #fff; border-radius: 24px; }
.schools-heading h2 { color: #fff !important; }
.schools-heading p:not(.eyebrow) { color: rgba(255, 255, 255, .9); }
.schools-cta { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .24); }
.schools-cta p { color: #fff; }
.schools-cta a { background: var(--yellow); color: var(--ink); font-weight: 800; }
.footer-centres { color: var(--blue); font-weight: 800; }

/* ---------- FAQ ---------- */
.faq-section { background: var(--white); border: 1px solid var(--line); border-radius: 24px; }
.faq-list details { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.faq-list summary { color: var(--ink); font-weight: 600; }
.faq-list summary::after { color: var(--blue); }
.faq-list details p { color: var(--ink-soft); }

/* ---------- Preus: clar, targetes blanques ---------- */
.pricing-section { background: var(--paper); color: var(--ink); }
.pricing-section .section-heading p:last-child { color: var(--ink-soft); }
.price-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; color: var(--ink); box-shadow: var(--shadow-subtle); }
.price-card.featured { border: 2px solid var(--yellow); box-shadow: var(--shadow); }
.price-card span { color: var(--blue); }
.price-card strong { font-family: var(--font-sans); font-weight: 800; color: var(--ink); }
.price-card p, .price-card li { color: var(--ink-soft); }
.pricing-section .price-card-20 { color: #fff; background: linear-gradient(145deg,#174e5d,#203b68); border-color: rgba(255,255,255,.24); }
.pricing-section .price-card-20 span, .pricing-section .price-card-20 strong { color: #fff; }
.pricing-section .price-card-20 p, .pricing-section .price-card-20 li { color: rgba(255,255,255,.82); }
.pricing-section .price-card-60.featured { color: var(--ink); background: #fffef9; border-color: #f0c866; box-shadow: 0 18px 44px rgba(59,30,144,.13); }
.pricing-section .price-card-60.featured strong { color: #3b1e90; }
.pricing-section .price-card-badge { color: #102f34; background: #f0c866; }
.pricing-msg { color: var(--blue); }

/* ---------- Footer: banda clara ---------- */
footer { background: var(--paper); color: var(--ink); }
.footer-brand + p { font-family: var(--font-sans); color: var(--ink); font-size: 24px; font-weight: 600; }
.footer-legal button, .footer-legal a { color: var(--ink-soft); }
.footer-legal button:hover, .footer-legal a:hover { color: var(--blue); }
.footer-sources { color: var(--ink-soft); }
.footer-sources a { color: var(--blue); }

/* ---------- Diàlegs i panells ---------- */
.degree-dialog, .quiz-dialog, .report-dialog, .legal-dialog, .auth-dialog,
.test-dialog, .orientation-dialog, .orientation-dialog.has-results { background: var(--white); }
.dialog-body { background: var(--white); }
.dialog-close, .legal-close { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.dialog-hero h2, .dialog-one-line, .report-form-head h2, .report-loading h2,
.report-error h2, .report-result-head h2, .legal-body h2, .auth-card h2,
.test-result h3, .recommendation h3, .match-score-num b, .quiz-results-head h2,
.quiz-question h2, .quiz-preview > strong {
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}
.dialog-jump-nav { background: var(--paper); }
.report-field input, .report-field select, .report-field textarea { background: var(--white); }
.report-chip { background: var(--white); }
.report-chip.selected { border-color: var(--scientific); color: var(--scientific); background: rgba(23, 132, 120, .09); }
.report-short-card { background: var(--white); }

/* ---------- Flux d'orientació (híbrid i curricular) ---------- */
.orientation-shell, .orientation-dialog.has-results .orientation-shell { background: var(--paper); }
.orientation-progress { background: linear-gradient(var(--paper) 78%, rgba(242, 247, 253, 0)); }
.orientation-phase-intro {
  background:
    radial-gradient(circle at 50% 30%, rgba(17, 238, 146, .14), transparent 30%),
    linear-gradient(145deg, #f2f7fd, #eaf1fb);
}
.orientation-phase-intro h2, .orientation-screen h2, .orientation-loading h2,
.orientation-error h2, .orientation-results-hero h2, .orientation-missions h3,
.orientation-comparison-report h3, .orientation-report-depth h4 {
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
}
.orientation-option, .orientation-context-grid label, .orientation-workload-row,
.orientation-consent, .orientation-method { background: var(--white); border-color: var(--line); }
.orientation-option:hover:not(:disabled) { border-color: var(--scientific); }
.orientation-option.selected { color: var(--white); border-color: var(--ink); background: linear-gradient(145deg, #252b2f, #3a3f44); }
.orientation-option-index { border-radius: 50%; }
.orientation-results-hero { background: var(--grad); }
.orientation-result-card { background: var(--white); }
.orientation-components, .orientation-report-depth > section, .orientation-evidence-list li { background: #eaf1fb; }
.orientation-viability { background: #eaf1fb; }
.orientation-next { color: var(--ink); background: var(--yellow); box-shadow: 0 10px 24px rgba(0, 0, 0, .14); }
.orientation-next:hover:not(:disabled) { background: #3ff5ad; }
.orientation-result-actions button { border-color: var(--blue); color: var(--blue); }
.orientation-result-actions button:first-child { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.orientation-missions { background: var(--ink); }
.orientation-comparison-report { background: var(--white); }
.orientation-tester-toggle.on { background: var(--scientific); border-color: var(--scientific); }

/* ---------- Comparador ---------- */
.compare-tray { background: rgba(37, 43, 47, .97); }
.compare-now { color: var(--ink); background: var(--yellow); }
.compare-now:disabled { opacity: .4; }
.compare-tabs button.active { background: var(--ink); }
.comparison-section { background: var(--paper); }
.compare-block, .diff-card, .insight-card { background: var(--white); border-color: var(--line); }
.compare-hero-card { border-radius: 16px; }
.diff-summary { background: var(--white); }

/* ---------- Skeletons ---------- */
.skeleton-card i { background: linear-gradient(90deg, #e9eef6, #f6f9fd, #e9eef6); background-size: 200% 100%; }