/* ==========================================================
   MATES PAL COLEGIO — Premium UI layer
   Capa visual global. No modifica lógica ni rutas.
   ========================================================== */
:root {
  --blue-950:#102a56; --blue-900:#12376b; --blue-800:#164989;
  --blue-700:#155ec2; --blue-600:#1769e0; --blue-500:#2b7af0;
  --blue-100:#dbeafe; --blue-50:#eff6ff;
  --yellow-500:#f4bd21; --yellow-100:#fef3c7; --yellow-50:#fffbeb;
  --red-700:#b42318; --red-600:#d92d20; --red-50:#fef3f2;
  --green-700:#067647; --green-50:#ecfdf3;
  --slate-950:#0f172a; --slate-900:#172033; --slate-800:#25324a;
  --slate-700:#344054; --slate-600:#475467; --slate-500:#667085;
  --slate-400:#98a2b3; --slate-300:#d0d5dd; --slate-200:#e4e7ec;
  --slate-100:#f2f4f7; --slate-50:#f8fafc;
  --bg:#ffffff; --bg-soft:#f7f9fc; --bg-mid:#edf2f8; --bg-dark:#102a56;
  --ink:#172033; --ink-2:#344054; --muted:#667085; --border:#e4e7ec;
  --white:#fff; --azul:#1769e0; --azul-dk:#1552a8; --azul-bg:#eff6ff;
  --purpura:#1769e0; --purpura-dk:#1552a8; --purpura-bg:#eff6ff;
  --amarillo:#f4bd21; --amarillo-dk:#7a5b00; --amarillo-bg:#fffbeb;
  --rojo:#d92d20; --rojo-dk:#b42318; --rojo-bg:#fef3f2;
  --nav-h:72px; --max-w:1200px;
  --r-xs:8px; --r:12px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --shadow-xs:0 1px 2px rgba(16,42,86,.04);
  --shadow-sm:0 1px 3px rgba(16,42,86,.06),0 4px 12px rgba(16,42,86,.04);
  --shadow-md:0 8px 24px rgba(16,42,86,.09),0 2px 6px rgba(16,42,86,.04);
  --shadow-lg:0 20px 48px rgba(16,42,86,.13),0 4px 12px rgba(16,42,86,.06);
  --focus:0 0 0 4px rgba(23,105,224,.18);
  --ease:cubic-bezier(.2,.8,.2,1);
}

html { scroll-padding-top:calc(var(--nav-h) + 24px); }
body { background:#fff; color:var(--ink); font-size:16px; line-height:1.65; }
body,button,input,textarea,select { font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
h1,h2,h3,h4,h5,h6 { font-family:"Plus Jakarta Sans",Inter,sans-serif; color:var(--slate-950); letter-spacing:-.025em; text-wrap:balance; }
p { text-wrap:pretty; }
a,button,input,textarea,select { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid var(--blue-600); outline-offset:3px; }
::selection { background:var(--blue-100); color:var(--blue-950); }

/* Signature bar: blue-led, yellow accent */
.color-bar,.ft-strip { height:3px; background:linear-gradient(90deg,var(--blue-700) 0 82%,var(--yellow-500) 82% 100%); }
.color-bar-thin { background:linear-gradient(90deg,var(--blue-700) 0 85%,var(--yellow-500) 85% 100%); }

/* Header */
.nav {
  height:var(--nav-h); padding:0 max(24px,calc((100vw - var(--max-w))/2)); gap:32px;
  background:rgba(255,255,255,.92); border-bottom:1px solid rgba(228,231,236,.9);
  box-shadow:none; transition:box-shadow .25s var(--ease),background .25s var(--ease);
}
.nav.scrolled { background:rgba(255,255,255,.97); box-shadow:0 8px 28px rgba(16,42,86,.08); }
.nav::after { height:0; }
.nav-brand { display:flex; align-items:center; flex:0 0 auto; }
.nav-brand img { height:42px; width:auto; object-fit:contain; }
.nav-links { gap:4px; }
.nav-links a { color:var(--slate-600); font-weight:600; font-size:.875rem; padding:10px 12px; border-radius:10px; }
.nav-links a:hover { background:var(--blue-50); color:var(--blue-700); }
.nav-links a.active { background:var(--blue-50); color:var(--blue-700)!important; }
.nav-dropdown>a::after { color:var(--slate-500); }
.nav-drop-menu {
  display:block; visibility:hidden; opacity:0; pointer-events:none;
  top:calc(100% + 14px); padding:8px; min-width:232px;
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-lg); transform:translate(-50%,8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.nav-dropdown:hover .nav-drop-menu,.nav-dropdown:focus-within .nav-drop-menu { visibility:visible; opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.nav-drop-menu a { color:var(--slate-700)!important; padding:10px 12px; border-radius:10px; }
.nav-drop-menu a:hover,.nav-drop-menu a.active { background:var(--blue-50); color:var(--blue-700)!important; }
.drop-sep { background:var(--slate-200); }
.nav-right { display:flex!important; align-items:center; gap:10px!important; }
.nav-search-btn { width:42px; height:42px; justify-content:center; padding:0; background:#fff; border:1px solid var(--slate-200); color:var(--slate-600); border-radius:12px; }
.nav-search-btn:hover { background:var(--blue-50); border-color:var(--blue-200,var(--blue-100)); color:var(--blue-700); }
.btn-preu { display:inline-flex!important; align-items:center; justify-content:center; background:var(--blue-700)!important; color:#fff!important; border-radius:12px!important; padding:11px 17px!important; box-shadow:0 6px 16px rgba(21,94,194,.18); }
.btn-preu:hover { background:var(--blue-800)!important; opacity:1!important; transform:translateY(-1px)!important; }
.nav-burger { width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--slate-200); border-radius:12px; }
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav { top:var(--nav-h); max-height:calc(100dvh - var(--nav-h)); overflow:auto; padding:16px 20px 24px; background:rgba(255,255,255,.98); border-color:var(--slate-200); }
.mobile-nav a { color:var(--slate-700); font-weight:600; border-radius:10px; }
.mobile-nav a:hover { color:var(--blue-700); background:var(--blue-50); }
.mob-sep { color:var(--slate-500); border-color:var(--slate-200); }
.btn-preu-mob { background:var(--blue-700)!important; color:#fff!important; }

/* Layout and sections */
.section { padding:88px 24px; }
.s-inner { width:min(var(--max-w),100%); margin-inline:auto; }
.sec-white { background:#fff; }
.sec-soft { background:var(--slate-50); }
.sec-dark { background:linear-gradient(145deg,var(--blue-950),#0c2145); }
.s-head { margin-bottom:40px; }
.s-head.left { text-align:left; align-items:flex-start; }
.s-eye,.page-hero-badge,.prof-page-badge,.rama-tag,.post-card-tag,.test-score {
  display:inline-flex; align-items:center; gap:7px; width:max-content;
  padding:7px 11px; border-radius:999px; font-family:Inter,sans-serif;
  font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  background:var(--blue-50); color:var(--blue-700); border:1px solid var(--blue-100);
}
.eye-y { background:var(--yellow-50); color:var(--amarillo-dk); border-color:var(--yellow-100); }
.eye-r { background:var(--red-50); color:var(--red-700); border-color:#fee4e2; }
.s-title { font-size:clamp(2rem,4vw,3.25rem); line-height:1.12; font-weight:800; margin-top:16px; }
.s-desc { color:var(--slate-600); font-size:1.05rem; max-width:720px; margin-top:16px; }

/* Home hero */
.hero {
  min-height:auto; padding:calc(var(--nav-h) + 64px) max(24px,calc((100vw - var(--max-w))/2)) 72px;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:72px;
  background:linear-gradient(180deg,#f8fbff 0%,#fff 100%); border-bottom:1px solid var(--slate-200);
}
.hero-grid-bg { background-size:48px 48px; opacity:.28; mask-image:linear-gradient(to bottom,#000 20%,transparent 100%); }
.hero-eyebrow,.hero-tag { display:inline-flex; align-items:center; padding:7px 12px; border:1px solid var(--blue-100); background:#fff; color:var(--blue-700); border-radius:999px; font-size:.75rem; font-weight:800; letter-spacing:.05em; }
.hero h1 { font-size:clamp(3rem,6vw,5.2rem); line-height:1; margin:20px 0 24px; color:var(--blue-950); }
.hero h1 .hl-r,.hero h1 .hl-p,.hero h1 .hl-b { color:var(--blue-600); }
.hero h1 .hl-y { color:var(--amarillo-dk); position:relative; }
.hero-sub,.hero-desc { color:var(--slate-600); font-size:1.125rem; max-width:650px; line-height:1.75; margin-bottom:32px; }
.hero-actions { gap:12px; }
.stat-grid,.hero-stats { gap:16px; }
.stat-card { padding:24px; background:rgba(255,255,255,.94)!important; border:1px solid var(--slate-200)!important; border-radius:18px; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s; }
.stat-card:hover { transform:translateY(-4px); border-color:var(--blue-100)!important; box-shadow:var(--shadow-md); }
.stat-card .num { color:var(--blue-800)!important; font-size:clamp(1.65rem,3vw,2.25rem); }
.stat-card .lbl { color:var(--slate-600); }
.hero-quote { margin-top:16px; padding:22px 24px; background:var(--blue-950); color:#fff; border-radius:18px; box-shadow:var(--shadow-md); }
.hero-quote p { color:rgba(255,255,255,.9); }
.hero-quote .qa { color:#b9d3ff; }

/* Buttons */
.btn,.btn-admin,button[type="submit"],input[type="submit"] {
  min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border:1px solid transparent; border-radius:12px;
  font:700 .9rem/1 Inter,sans-serif; cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,border-color .2s,color .2s;
}
.btn:hover,.btn-admin:hover,button[type="submit"]:hover,input[type="submit"]:hover { transform:translateY(-2px); }
.btn-primary,.btn-blue,button[type="submit"],input[type="submit"] { background:var(--blue-700); color:#fff; border-color:var(--blue-700); box-shadow:0 6px 16px rgba(21,94,194,.18); }
.btn-primary:hover,.btn-blue:hover,button[type="submit"]:hover,input[type="submit"]:hover { background:var(--blue-800); border-color:var(--blue-800); box-shadow:0 10px 24px rgba(21,94,194,.22); }
.btn-outline,.btn-secondary { background:#fff; color:var(--blue-700); border-color:var(--slate-300); box-shadow:var(--shadow-xs); }
.btn-outline:hover,.btn-secondary:hover { background:var(--blue-50); border-color:var(--blue-200,var(--blue-100)); }
.btn-yellow { background:var(--yellow-500); color:var(--blue-950); border-color:var(--yellow-500); }
.btn-danger { background:var(--red-600); color:#fff; border-color:var(--red-600); }
.btn-ghost { background:transparent; color:var(--slate-700); }

/* Cards and grids */
.ramas-grid,.cont-grid,.test-grid,.posts-grid,.resolucion-grid,.logros { gap:24px; }
.rama,.cont-card,.test-card,.post-card,.resolucion-card,.aside-card,.admin-card,.tip-box,.stat-box {
  background:#fff; border:1px solid var(--slate-200); border-radius:20px; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
a.rama:hover,a.cont-card:hover,a.post-card:hover,a.resolucion-card:hover,.test-card:hover,.admin-card:hover {
  transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--blue-100);
}
.rama,.cont-card,.test-card,.resolucion-card,.admin-card { padding:28px; }
.rama-mpc,.rama-preu { border-top:4px solid var(--blue-600); }
.rama-preu { background:linear-gradient(145deg,var(--blue-950),var(--blue-900)); border-color:var(--blue-800); }
.rama-ico,.cont-ico,.logro-ico,.tip-ico { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:var(--blue-50); font-size:1.45rem; }
.rama h3,.cont-card h4,.post-card h3,.resolucion-card h3 { color:var(--slate-950); }
.rama-preu h3 { color:#fff; }
.rama p,.cont-card .desc,.post-card p,.resolucion-card p { color:var(--slate-600); }
.pills { gap:8px; }
.pill,.cont-count,.paes-stat-pill { background:var(--slate-100)!important; color:var(--slate-700)!important; border:1px solid var(--slate-200)!important; border-radius:999px; }
.pill-p,.pill-b,.pill-r { background:var(--blue-50)!important; color:var(--blue-700)!important; border-color:var(--blue-100)!important; }
.pill-y { background:var(--yellow-50)!important; color:var(--amarillo-dk)!important; border-color:var(--yellow-100)!important; }
.topic-link { border-color:var(--slate-200)!important; color:var(--slate-600)!important; }
.topic-link:hover { color:var(--blue-700)!important; }

/* Inner page hero */
.page-hero { padding:calc(var(--nav-h) + 48px) 24px 56px; background:linear-gradient(145deg,var(--blue-950),var(--blue-900)); border-bottom:none; }
.page-hero-bg,.hero-bg-grid { opacity:.16; }
.page-hero-inner { width:min(var(--max-w),100%); margin-inline:auto; }
.page-breadcrumb { color:#c8d9f5; }
.page-breadcrumb a:hover { color:#fff; }
.page-hero h1 { color:#fff; font-size:clamp(2.25rem,5vw,4.25rem); }
.page-hero p { color:rgba(255,255,255,.75); max-width:760px; }
.page-hero-icon { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:20px; }
.page-hero-badge { background:rgba(255,255,255,.1); color:#d7e7ff; border-color:rgba(255,255,255,.15); }

/* Sidebar */
.cat-layout { width:min(var(--max-w),calc(100% - 48px)); margin-inline:auto; gap:32px; padding-block:48px 88px; }
.cat-sidebar { position:sticky; top:calc(var(--nav-h) + 24px); align-self:start; background:#fff; border:1px solid var(--slate-200); border-radius:18px; padding:16px; box-shadow:var(--shadow-sm); }
.sidebar-title { color:var(--slate-500); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; padding:8px 10px; }
.sidebar-link,.sidebar-eje-link { display:flex; align-items:center; gap:10px; min-height:42px; padding:9px 11px; color:var(--slate-600); border-radius:10px; border-left:0!important; }
.sidebar-link:hover,.sidebar-eje-link:hover { color:var(--blue-700); background:var(--blue-50); }
.sidebar-link.active,.sidebar-eje-link.active { color:var(--blue-800); background:var(--blue-50); font-weight:800; box-shadow:inset 3px 0 0 var(--blue-600); }
.sl-count { margin-left:auto; background:var(--slate-100); color:var(--slate-600); border-radius:999px; padding:2px 7px; font-size:.7rem; }
.aside-card { padding:20px; }

/* Posts/content */
.posts-header { padding-bottom:20px; border-bottom:1px solid var(--slate-200); }
.posts-count { color:var(--slate-500); }
.post-card { overflow:hidden; }
.post-card-footer { border-top:1px solid var(--slate-200); }
.post-card-link,.rama-link,.res-cta { color:var(--blue-700)!important; font-weight:800; }
.post-card:hover .post-card-link { gap:9px; }
.article-content { color:var(--slate-700); font-size:1.04rem; line-height:1.78; }
.article-content h2,.article-content h3 { scroll-margin-top:calc(var(--nav-h) + 24px); }
.article-content a { color:var(--blue-700); text-decoration:underline; text-underline-offset:3px; }
.article-content img { border-radius:16px; box-shadow:var(--shadow-sm); }
.article-content blockquote { border-left:4px solid var(--blue-600); background:var(--blue-50); color:var(--blue-950); border-radius:0 12px 12px 0; }
.article-content table { width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--slate-200); border-radius:14px; }
.article-content th { background:var(--blue-950); color:#fff; }
.article-content th,.article-content td { padding:13px 15px; border-bottom:1px solid var(--slate-200); }

/* Forms and search */
input:not([type="checkbox"]):not([type="radio"]),textarea,select {
  width:100%; min-height:46px; padding:11px 13px; background:#fff; color:var(--slate-900);
  border:1px solid var(--slate-300); border-radius:11px; box-shadow:var(--shadow-xs);
  transition:border-color .18s,box-shadow .18s,background .18s;
}
textarea { min-height:130px; resize:vertical; }
input:focus,textarea:focus,select:focus { border-color:var(--blue-600); box-shadow:var(--focus); outline:none; }
label { color:var(--slate-700); font-weight:700; font-size:.875rem; }
input::placeholder,textarea::placeholder { color:var(--slate-400); }
.filter-btn { border:1px solid var(--slate-200)!important; background:#fff!important; color:var(--slate-600)!important; border-radius:999px!important; }
.filter-btn:hover,.filter-btn.active { background:var(--blue-700)!important; border-color:var(--blue-700)!important; color:#fff!important; }

/* Tables */
table { color:var(--slate-700); }
th { font-weight:800; }
tbody tr { transition:background .15s; }
tbody tr:hover { background:var(--blue-50); }

/* PAES strip and list */
.paes-strip { position:relative; overflow:hidden; }
.paes-strip-bg { color:rgba(255,255,255,.035); }
.paes-item { border-color:rgba(255,255,255,.13)!important; border-radius:12px; padding:14px 16px; }
.paes-item:hover { background:rgba(255,255,255,.08); transform:translateX(4px); }
.paes-year { color:#a9c9ff!important; }
.paes-title { color:#fff; }
.paes-arr { color:var(--yellow-500); }

/* Footer */
.footer { background:#0c2145; color:#fff; padding:64px 24px 24px; }
.ft-grid,.ft-bottom { width:min(var(--max-w),100%); margin-inline:auto; }
.ft-brand p,.ft-col a { color:rgba(255,255,255,.66); }
.ft-col h5 { color:#fff; font-size:.85rem; }
.ft-col a:hover { color:#fff; transform:translateX(3px); }
.ft-logo { height:46px; width:auto; filter:brightness(0) invert(1); opacity:.96; }
.ft-quick-links { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.ft-quick-link { display:inline-flex; align-items:center; padding:7px 11px; border:1px solid rgba(255,255,255,.14); border-radius:9px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.8); font-size:.75rem; }
.ft-quick-link:hover { background:rgba(255,255,255,.12); color:#fff; }
.ft-bottom { border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.45); }
.ft-bottom-links { display:flex; gap:16px; align-items:center; }
.ft-bottom a { color:rgba(255,255,255,.62)!important; }
.ft-bottom a:hover { color:#fff!important; }

/* Utility fixes */
.preu-cta { background:linear-gradient(145deg,var(--blue-950),var(--blue-800))!important; border-color:var(--blue-800)!important; }
.timeline-item .tl-dot { background:var(--blue-600)!important; box-shadow:0 0 0 5px var(--blue-100); }
.logro { border-color:var(--slate-200)!important; }
.alert,.notice,.success,.error { border-radius:12px; }

@media (max-width:1050px) {
  .nav { padding-inline:24px; gap:18px; }
  .nav-links a { padding-inline:9px; }
  .hero { grid-template-columns:1fr 420px; gap:40px; }
}
@media (max-width:900px) {
  :root { --nav-h:68px; }
  .nav-links,.nav-right { display:none!important; }
  .nav-burger { display:flex; }
  .hero { grid-template-columns:1fr; padding-top:calc(var(--nav-h) + 48px); gap:40px; }
  .hero-right { max-width:720px; }
  .cat-layout { grid-template-columns:1fr!important; width:min(100% - 32px,var(--max-w)); }
  .cat-sidebar { position:relative; top:auto; }
  .sidebar-nav,.sidebar-eje-links { display:flex; overflow:auto; gap:8px; padding-bottom:4px; scrollbar-width:thin; }
  .sidebar-link,.sidebar-eje-link { white-space:nowrap; flex:0 0 auto; box-shadow:none!important; }
  .sidebar-link.active,.sidebar-eje-link.active { box-shadow:inset 0 -3px 0 var(--blue-600)!important; }
}
@media (max-width:700px) {
  .section { padding:64px 20px; }
  .nav { padding-inline:16px; }
  .nav-brand img { height:37px; }
  .hero { padding-inline:20px; padding-bottom:56px; }
  .hero h1 { font-size:clamp(2.55rem,13vw,4rem); }
  .hero-sub,.hero-desc { font-size:1rem; }
  .hero-actions,.cta-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .btn,.cta-actions .btn { width:100%; }
  .stat-grid,.hero-stats { grid-template-columns:1fr 1fr; }
  .stat-card { padding:18px; }
  .ramas-grid,.cont-grid,.test-grid,.posts-grid,.resolucion-grid { grid-template-columns:1fr!important; }
  .page-hero { padding:calc(var(--nav-h) + 36px) 20px 44px; }
  .page-hero-inner,.page-hero-left { width:100%; }
  .page-hero-icon { display:none; }
  .s-title { font-size:clamp(1.8rem,9vw,2.5rem); }
  .rama,.cont-card,.test-card,.resolucion-card,.admin-card { padding:22px; }
  .ft-grid { grid-template-columns:1fr 1fr; gap:36px 24px; }
  .ft-brand { grid-column:1/-1; }
  .ft-bottom { flex-direction:column; align-items:flex-start; gap:12px; }
}
@media (max-width:430px) {
  .stat-grid,.hero-stats { grid-template-columns:1fr; }
  .ft-grid { grid-template-columns:1fr; }
  .ft-brand { grid-column:auto; }
  .btn { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}