/* ============================================================================
   chrome.css — Sistema visual compartido del sitio OpoJose
   ============================================================================

   QUÉ ES ESTE FICHERO
   -------------------
   Define TODO el "chrome" (cabecera, footer, botones, hero de páginas internas,
   tarjetas, listas de temario, formularios, etc.) que se reutiliza en todas
   las páginas del sitio EXCEPTO la home (index.html), que tiene su
   propio CSS embebido.

   Importa tokens.css automáticamente, así que las páginas solo necesitan:
       <link rel="stylesheet" href="chrome.css">

   ORDEN DE LAS SECCIONES (busca el comentario "=== Nombre ===" para saltar):
       Reset & base · Tipografía utilitaria · Topbar · Header (nav + dropdown)
       Botones · Page hero · Prose · Side card · Temario · Stats strip
       Final CTA · Footer · Empty state · Responsive

   PERSONALIZACIÓN RÁPIDA
   ----------------------
   • Cambiar colores → editar tokens.css (paleta unificada en variables CSS).
   • Cambiar tipografía → editar --font-display / --font-body en tokens.css.
   • Topbar y footer usan --color-primary-500 (azul logo). Cambia ahí si
     algún día quieres otro tono.
   ============================================================================ */
@import url('tokens.css');

/* --- Reset + base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--fg-primary);
  background: var(--bg-surface);
  -webkit-font-smoothing: antialiased;
  line-height: var(--lh-relaxed);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary-500); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Contenedor central usado en todas las secciones (1180px máx). */
.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* === Type === */
.overline {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-primary-500);
}
.h-section {
  font-family: var(--font-display);
  font-weight: 700; line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-primary-900);
}
.lead {
  font-family: var(--font-body);
  color: var(--color-neutral-600);
  line-height: 1.65;
}

/* === Topbar ===
   Topbar oculta por defecto en el nuevo look (header blanco). Si en algún
   momento se vuelve a usar, basta con quitar el display: none. */
.topbar { display: none; }
.topbar .container {
  display: flex; justify-content: flex-end; align-items: center; gap: 24px;
  padding: 9px 32px;
}
.topbar a {
  color: var(--color-neutral-700);
  display: inline-flex; align-items: center; gap: 6px;
}
.topbar a:hover { color: var(--color-primary-500); text-decoration: none; }
.topbar svg { width: 14px; height: 14px; }

/* === Header ===
   Look 1: fondo blanco, logo azul de marca, navegación oscura con subrayado
   azul en activo. CTA en píldora azul (de look 3) para destacar sin romper. */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--color-neutral-200);
  position: sticky; top: 0; z-index: 100;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0; gap: 32px;
  min-height: 76px;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  background: transparent;
  padding: 0 0 0 20px;
  margin-left: 0;
  border-radius: 0;
  box-shadow: none;
}
.logo img { display: block; height: 44px; width: auto; }
.footer-brand .logo img { filter: brightness(0) invert(1); opacity: 0.95; height: 52px; }
.footer-brand .logo {
  background: transparent;
  padding: 0;
  margin-left: 0;
  border-radius: 0;
  box-shadow: none;
}

.main-nav ul {
  display: flex; gap: 32px; list-style: none; align-items: center;
}
.main-nav a {
  font-family: var(--font-body);
  color: var(--color-neutral-700);
  font-weight: 500; font-size: 15px;
  padding: 8px 0;
  position: relative;
  transition: color .15s;
  text-decoration: none;
}
.main-nav a:hover { color: var(--color-primary-500); }
.main-nav a.active { color: var(--color-primary-500); }
.main-nav a.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-primary-500);
  border-radius: 2px;
}
/* CTA "Solicita información" — píldora azul (look 3) */
.nav-cta {
  background: var(--color-primary-500);
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 999px;
  border: none !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  box-shadow: 0 6px 16px rgba(25,77,172,0.20);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.nav-cta::after { display: none !important; } /* anula posible subrayado activo */
.nav-cta:hover {
  background: var(--color-primary-600);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(25,77,172,0.28);
}

.menu-toggle {
  display: none; background: none; border: none;
  font-size: 28px; cursor: pointer; color: var(--color-neutral-700);
}

/* nav dropdown */
.has-dropdown { position: relative; }
.has-dropdown > a::after {
  content: ""; display: inline-block; margin-left: 6px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
}
.dropdown {
  position: absolute; top: 100%; left: -16px;
  background: #fff;
  border: 1px solid var(--color-neutral-200);
  border-radius: 12px;
  padding: 12px;
  min-width: 280px;
  box-shadow: 0 12px 32px rgba(15,40,90,0.10);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
  display: flex; flex-direction: column; gap: 2px;
  list-style: none;
  z-index: 200;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown li { width: 100%; }
.dropdown a {
  display: block;
  padding: 10px 14px !important;
  border: none !important;
  border-radius: 8px;
  font-size: 14.5px !important;
  font-weight: 500;
  color: var(--color-neutral-700) !important;
}
.dropdown a:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-700) !important;
  text-decoration: none;
}
.dropdown a .meta {
  display: block;
  font-size: 12.5px;
  color: var(--color-neutral-400);
  font-weight: 400;
  margin-top: 2px;
}

/* === Buttons === */
.btn {
  font-family: var(--font-body);
  font-weight: 600; font-size: 15px;
  padding: 14px 22px;
  border-radius: 10px;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  transition: transform .15s var(--ease-standard), box-shadow .2s, background .2s, color .2s;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary {
  background: var(--color-primary-500);
  color: #fff;
  box-shadow: 0 6px 20px rgba(25,77,172,0.28);
}
.btn-primary:hover { background: var(--color-primary-600); }
.btn-ghost {
  background: #fff;
  color: var(--color-primary-700);
  border: 1px solid var(--color-primary-100);
}
.btn-ghost:hover { border-color: var(--color-primary-300); }
.btn-sm {
  padding: 11px 18px;
  font-size: 14px;
}
.btn svg { width: 16px; height: 16px; }

/* === Page hero (subpage variant) === */
.page-hero {
  background:
    radial-gradient(900px 500px at 80% 10%, rgba(14,145,168,0.08), transparent 70%),
    radial-gradient(1100px 600px at 10% 30%, rgba(25,77,172,0.10), transparent 70%),
    linear-gradient(180deg, #fff 0%, var(--color-primary-50) 100%);
  padding: 64px 0 72px;
  border-bottom: 1px solid var(--color-primary-100);
}
.page-hero .container { max-width: 1180px; }
.page-hero .crumbs {
  font-size: 13px;
  color: var(--color-neutral-600);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.page-hero .crumbs a { color: var(--color-neutral-600); }
.page-hero .crumbs a:hover { color: var(--color-primary-500); }
.page-hero .crumbs .sep {
  color: var(--color-neutral-400);
}
.page-hero .badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid var(--color-primary-100);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--color-primary-700);
  font-weight: 500;
  margin-bottom: 22px;
  box-shadow: 0 1px 2px rgba(15,40,90,0.04);
}
.page-hero .badge.warning {
  background: var(--color-warning-100);
  border-color: #FAD691;
  color: #8E5306;
}
.page-hero .badge .dot {
  width: 8px; height: 8px; border-radius: 8px;
  background: var(--color-success-500);
  box-shadow: 0 0 0 4px rgba(26,127,75,0.15);
}
.page-hero .badge.warning .dot {
  background: var(--color-warning-500);
  box-shadow: 0 0 0 4px rgba(232,147,10,0.18);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-primary-900);
  margin-bottom: 18px;
  max-width: 860px;
}
.page-hero h1 .accent {
  background: linear-gradient(120deg, var(--color-primary-500) 30%, var(--color-accent-600));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-hero .lead {
  font-size: 18px;
  max-width: 720px;
}
.page-hero-cta {
  margin-top: 32px;
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap;
}
.page-hero-meta {
  margin-top: 24px;
  display: flex; gap: 22px; flex-wrap: wrap;
  font-size: 14px;
  color: var(--color-neutral-600);
}
.page-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.page-hero-meta svg { width: 16px; height: 16px; color: var(--color-success-500); }

/* === Content prose === */
.prose-section { padding: 88px 0; }
.prose-section.muted { background: var(--color-neutral-50); border-top: 1px solid var(--color-neutral-200); border-bottom: 1px solid var(--color-neutral-200); }
.prose-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 64px;
  align-items: start;
}
.prose-grid.single { grid-template-columns: minmax(0, 760px); margin: 0 auto; }

.prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-primary-900);
  margin: 48px 0 18px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  color: var(--color-primary-900);
  margin: 32px 0 12px;
  letter-spacing: -0.01em;
}
.prose p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-neutral-700);
  margin-bottom: 16px;
}
.prose p strong { color: var(--color-primary-900); font-weight: 600; }
.prose ul, .prose ol {
  margin: 12px 0 24px 0;
  padding-left: 24px;
}
.prose li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-neutral-700);
  margin-bottom: 8px;
}
.prose .callout {
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: 14px;
  padding: 24px 28px;
  margin: 24px 0;
  display: flex; align-items: flex-start; gap: 16px;
}
.prose .callout svg { width: 22px; height: 22px; color: var(--color-primary-500); flex-shrink: 0; margin-top: 2px; }
.prose .callout p { margin: 0; color: var(--color-primary-900); }
.prose .callout p strong { color: var(--color-primary-900); }

/* aside sticky card */
.side-card {
  position: sticky; top: 96px;
  background: #fff;
  border: 1px solid var(--color-neutral-200);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 8px 28px rgba(15,40,90,0.06);
}
.side-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--color-primary-900);
  margin-bottom: 6px;
}
.side-card .lead {
  font-size: 14.5px;
  margin-bottom: 22px;
}
.side-card .meta-list {
  list-style: none;
  border-top: 1px solid var(--color-neutral-200);
  padding-top: 18px; margin-top: 4px;
  display: flex; flex-direction: column; gap: 12px;
}
.side-card .meta-list li {
  font-size: 13.5px;
  color: var(--color-neutral-600);
  display: flex; justify-content: space-between; gap: 12px;
}
.side-card .meta-list li strong {
  color: var(--color-primary-900); font-weight: 600;
  text-align: right; font-family: var(--font-body);
}
.side-card .btn { width: 100%; justify-content: center; }
.side-card .secondary-link {
  margin-top: 12px;
  display: block;
  text-align: center;
  font-size: 13.5px;
  color: var(--color-neutral-600);
}

/* === Temario list (Tramitación / Salamanca / Andalucia) === */
.temario {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0 8px;
}
.temario-item {
  background: #fff;
  border: 1px solid var(--color-neutral-200);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex; gap: 16px;
  transition: transform .2s var(--ease-standard), box-shadow .2s, border-color .2s;
}
.temario-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(25,77,172,0.08);
  border-color: var(--color-primary-100);
}
.temario-item .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--color-primary-500);
  letter-spacing: -0.02em;
  min-width: 44px;
}
.temario-item .num em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-family: var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral-400);
  margin-bottom: 4px;
  font-weight: 600;
}
.temario-item h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary-900);
  margin-bottom: 6px;
  line-height: 1.3;
}
.temario-item p {
  font-size: 14px;
  color: var(--color-neutral-600);
  line-height: 1.55;
  margin: 0;
}

/* === Stats strip === */
.stats-strip {
  background:
    radial-gradient(800px 400px at 80% 20%, rgba(14,145,168,0.18), transparent 60%),
    linear-gradient(135deg, #091E46 0%, #113C8A 100%);
  color: #fff;
  padding: 64px 0;
}
.stats-strip .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.stat {
  text-align: left;
  padding-left: 18px;
  border-left: 2px solid rgba(123,213,229,0.4);
}
.stat .v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 6px;
}
.stat .v em { color: var(--color-accent-300); font-style: normal; }
.stat .label {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}

/* === Final CTA === */
.final-cta { padding: 88px 0; background: #fff; text-align: center; }
.final-cta h2 { font-size: 38px; margin-bottom: 14px; }
.final-cta .lead { font-size: 17px; max-width: 600px; margin: 0 auto 28px; }
.final-cta-buttons {
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}

/* === Subvención === */
.subv { background: var(--color-neutral-50); padding: 32px 0; border-top: 1px solid var(--color-neutral-200); }
.subv p {
  font-size: 11.5px;
  color: var(--color-neutral-600);
  line-height: 1.55;
  text-align: justify;
  font-family: var(--font-body);
}

/* === Footer === */
.site-footer {
  background: var(--color-primary-500);
  color: rgba(255,255,255,0.78);
  padding: 56px 0 32px;
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-col h5 {
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: rgba(255,255,255,0.78); }
.footer-col a:hover { color: #fff; text-decoration: none; }
.footer-brand .logo { margin-bottom: 0; }
.footer-brand p { color: rgba(255,255,255,0.55); line-height: 1.6; max-width: 320px; margin-top: 18px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
}
.footer-bottom a { color: rgba(255,255,255,0.55); }

/* === Empty state (placeholder pages) === */
.empty-state {
  padding: 120px 0;
  text-align: center;
}
.empty-state .icon-bubble {
  width: 80px; height: 80px;
  border-radius: 20px;
  background: var(--color-primary-50);
  color: var(--color-primary-500);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
}
.empty-state .icon-bubble svg { width: 38px; height: 38px; }
.empty-state h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--color-primary-900);
  margin-bottom: 14px;
}
.empty-state p {
  font-size: 17px;
  color: var(--color-neutral-600);
  max-width: 560px;
  margin: 0 auto 28px;
  line-height: 1.65;
}

/* === Responsive === */
@media (max-width: 960px) {
  .stats-strip .container { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .prose-grid { grid-template-columns: 1fr; gap: 40px; }
  .side-card { position: static; }
  .temario { grid-template-columns: 1fr; }
  .menu-toggle { display: block; }
  .main-nav { display: none; }
  .page-hero h1 { font-size: 36px; }
}
@media (max-width: 640px) {
  .stats-strip .container, .footer-grid { grid-template-columns: 1fr; }
  .page-hero { padding: 48px 0 56px; }
  .page-hero h1 { font-size: 30px; }
  .h-section { font-size: 26px !important; }
  .prose h2 { font-size: 24px; }
  .prose-section, .final-cta { padding: 64px 0; }
}