/* ============================================================
   OPOSEMAD · Hi-fi v2 · vibrant style
   Indigo + warm orange + golden accent + lavender bg
   ============================================================ */

:root {
  /* Brand palette */
  --indigo: #0070E6;
  --indigo-deep: #0056B2;
  --indigo-dark: #003E80;
  --indigo-soft: #E5EFFA;
  --indigo-tint: #F3F7FC;

  /* Legacy blue alias (some components still use it) */
  --blue: var(--indigo);
  --blue-deep: var(--indigo-deep);
  --blue-soft: var(--indigo-soft);
  --blue-ink: var(--indigo-dark);

  --orange: #F47527;
  --orange-deep: #D85F18;
  --orange-soft: #FFE5D2;
  --orange-tint: #FFF1E3;

  /* Golden — for highlight words inside dark hero */
  --golden: #F5B868;
  --golden-soft: #FFEAC8;

  /* Neutrals */
  --cream: #F4F2F8;      /* lavender-tinted bg */
  --cream-warm: #F8F5EE; /* very soft warm bg, alternative */
  --paper: #FFFFFF;
  --sand: #EFEEF4;

  --ink: #0F1428;        /* near-black, slightly indigo */
  --graphite: #2E3147;
  --pencil: #6B6F84;
  --silver: #B6BAC9;

  /* Footer / dark sections */
  --night: #101529;
  --night-2: #1A1F36;

  --rule: rgba(15, 20, 40, 0.10);
  --rule-strong: rgba(15, 20, 40, 0.85);
  --rule-light: rgba(15, 20, 40, 0.06);

  --shadow-xs: 0 1px 2px rgba(15, 20, 40, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 20, 40, 0.06), 0 1px 2px rgba(15, 20, 40, 0.04);
  --shadow-md: 0 12px 28px -10px rgba(15, 20, 40, 0.18), 0 4px 8px rgba(15, 20, 40, 0.05);
  --shadow-lg: 0 28px 60px -20px rgba(15, 20, 40, 0.30), 0 6px 16px rgba(15, 20, 40, 0.08);
  --shadow-card: 0 4px 12px rgba(15, 20, 40, 0.06);

  --wa-green: #25D366;
  --success: #1E7A4E;

  /* Type — Plus Jakarta Sans + DM Serif for occasional editorial accents.
     La pila sans se define en style.css (--oposemad-font-sans), que se encola
     en TODA la web; este fichero solo en las plantillas Oposemad. Se apunta
     allí para no tener dos definiciones que puedan divergir. El valor de
     respaldo del var() mantiene el comportamiento si style.css no cargara. */
  --font-sans: var(--oposemad-font-sans, "Plus Jakarta Sans", -apple-system, system-ui, sans-serif);
  --font-display: var(--oposemad-font-sans, "Plus Jakarta Sans", -apple-system, system-ui, sans-serif);
  --font-serif: "DM Serif Display", Georgia, serif;

  /* Layout */
  --container: 1280px;
  --container-wide: 1440px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
}

/* Namespaced para no afectar a Astra/LearnDash en el resto de la web */
.oposemad-page * { box-sizing: border-box; }
.oposemad-page { scroll-behavior: smooth; }

body.oposemad-page {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* OJO: no poner overflow-x:hidden en html, body, #page ni #content.
   Cualquiera de ellos se convierte en contenedor de scroll y anula el
   "position: sticky" de sus descendientes: tanto el #masthead (ver style.css)
   como las columnas sticky de page-inicio.php, single.php y
   page-calculadora-puntos.php. Si aparece scroll horizontal, hay que corregir
   el elemento concreto que desborda, no taparlo con overflow en un ancestro. */

.oposemad-page h1, .oposemad-page h2, .oposemad-page h3, .oposemad-page h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.oposemad-page h1 { letter-spacing: -0.035em; }

.oposemad-page p { margin: 0; }
.oposemad-page a { color: inherit; text-decoration: none; }
.oposemad-page img { max-width: 100%; display: block; }

/* ----- Acentos editoriales en DM Serif Display -----
   DM Serif Display SOLO existe en peso 400. A partir de 600 el navegador
   engorda el trazo por su cuenta (medido en Chrome: +36% de tinta), y esa
   negrita falsa no casa con los titulares serif del cuerpo de los artículos
   (.post-body h3), que sí van en 400. Además el letter-spacing: -0.02em de la
   regla de arriba está pensado para la sans, no para una serif de display.

   El problema es que la regla ".oposemad-page h1..h4" impone font-weight: 800
   sea cual sea la familia que acabe usándose, así que cambiar solo el
   font-family en un estilo inline no basta. Estas clases fijan familia, peso y
   tracking en un único sitio; ".oposemad-page .serif" tiene especificidad
   (0,2,0) y gana a (0,1,1). */
.oposemad-page .serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0;
}

/* Entradilla del hero, el párrafo bajo el H1.
   Se repetía como estilo inline en 18 plantillas y había derivado a tres
   tamaños distintos sin motivo (20px en 13, 19px en 4, 18px en 1): al navegar
   entre páginas el mismo elemento cambiaba de tamaño. Se unifica en 20px, que
   era la mayoría. El max-width y los márgenes siguen inline porque dependen
   de la retícula de cada página.

   Va en sans y no en la serif de marca: DM Serif Display es una tipografía de
   display, pensada para ir grande. A 18-20px en un párrafo entero resulta
   frágil y de aire clásico. La serif se mantiene donde sí funciona: titulares
   de tarjeta, cifras y h3 de artículo, de 22px para arriba. */
.oposemad-page .lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.55;
  color: var(--graphite);
}

/* Entradilla de sección, bajo un H2: un escalón por debajo del hero. */
.oposemad-page .lead-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--graphite);
}

/* <strong>/<b> dentro de texto en la serif de marca.
   El navegador les da "font-weight: bolder" por defecto (700), y como heredan
   la familia del padre, acaban con negrita sintética: DM Serif Display solo
   tiene el peso 400. El énfasis se marca con color, igual que en
   .post-body strong.
   Las entradillas quedan fuera a propósito: ahora van en Plus Jakarta Sans,
   que sí tiene negrita real, así que su <strong> se marca con peso. */
.oposemad-page .serif strong,
.oposemad-page .serif b {
  font-weight: 400;
  color: var(--ink);
}

.oposemad-page .lead strong,    .oposemad-page .lead b,
.oposemad-page .lead-sm strong, .oposemad-page .lead-sm b {
  font-weight: 700;
  color: var(--ink);
}

/* ----- Layout ----- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 40px; }

/* ----- Kicker — small uppercase tag above titles ----- */
.kicker {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}
.kicker-light { color: var(--golden); }
.kicker-light::before { background: var(--golden); }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  text-decoration: none;
  background: transparent;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* Foco por teclado: un halo suave (sombra), NO un contorno separado del botón.
   El outline con offset dejaba un hueco que se leía como un "borde blanco". */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(244, 117, 39, 0.40);
}
/* Reglas de color y borde con !important a propósito: el tema padre (Astra)
   colorea los <a> y añade bordes a los <button> con más especificidad que una
   sola clase. Sin esto, el texto de los botones-enlace cambiaba solo (negro,
   azul al pasar el ratón) y a veces aparecía un borde ajeno al pasar el ratón.
   Con esto, cada botón depende SOLO de su propia regla, igual en <a> que en
   <button>: el feedback de hover es siempre sombra + fondo oscurecido, y el
   borde de cada tipo es el suyo (o ninguno), nunca uno inyectado por Astra. */
.btn-orange { background: var(--orange); box-shadow: 0 4px 12px -2px rgba(244, 117, 39, 0.35); }
.btn-orange, .btn-orange:hover, .btn-orange:focus, .btn-orange:active { color: #fff !important; border-color: transparent !important; }
.btn-orange:hover { background: var(--orange-deep); box-shadow: 0 8px 22px -4px rgba(244, 117, 39, 0.55); }

.btn-ghost { background: var(--paper); }
.btn-ghost { color: var(--ink) !important; border-color: var(--rule) !important; }
.btn-ghost:hover { background: var(--ink); }
.btn-ghost:hover { color: var(--paper) !important; border-color: var(--ink) !important; }

.btn-ghost-light { background: transparent; }
.btn-ghost-light { color: var(--paper) !important; border-color: rgba(255,255,255,0.4) !important; }
.btn-ghost-light:hover { background: var(--paper); }
.btn-ghost-light:hover { color: var(--ink) !important; border-color: var(--paper) !important; }

.btn-wa { background: var(--wa-green); box-shadow: 0 4px 12px -2px rgba(37, 211, 102, 0.4); }
.btn-wa, .btn-wa:hover, .btn-wa:focus, .btn-wa:active { color: #fff !important; border-color: transparent !important; }
.btn-wa:hover { background: #1eb957; box-shadow: 0 8px 22px -4px rgba(37, 211, 102, 0.55); }

.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-lg { padding: 16px 28px; font-size: 16px; }

/* Botón bloqueado: sin esto, un botón deshabilitado (p. ej. "Continuar" del
   dossier mientras falta marcar el consentimiento) se veía idéntico a uno
   activo y el clic no hacía nada, sin ninguna pista de por qué. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.btn:disabled:hover,
.btn[disabled]:hover { transform: none; box-shadow: none; }

/* ----- Cards ----- */
.card {
  background: var(--paper);
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: var(--shadow-card);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* ----- Icon-on-card (orange stroke style from Lovable) ----- */
.card-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--orange-tint);
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}

/* ----- Highlight word styles ----- */
.text-golden { color: var(--golden); }
.text-orange { color: var(--orange); }
.text-indigo { color: var(--indigo); }
.text-pencil { color: var(--pencil); }
.text-graphite { color: var(--graphite); }
.text-paper { color: var(--paper); }

/* ----- Reveal animation ----- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.reveal { animation: fadeUp 0.7s ease-out 0s 1 normal forwards; }
.float { animation: float 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .float { animation: none !important; }
}

/* ----- Section spacing ----- */
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 120px 0; }

/* ----- Form inputs ----- */
.input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--rule);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-soft); }
.label { font-size: 13px; font-weight: 700; color: var(--graphite); display: block; margin-bottom: 8px; }

/* ----- Utility ----- */
.grid { display: grid; gap: 24px; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
.text-center { text-align: center; }
.bg-paper { background: var(--paper); }
.bg-cream { background: var(--cream); }
.bg-sand  { background: var(--sand); }
.bg-night { background: var(--night); color: var(--paper); }

/* ----- WhatsApp floating button ----- */
.fab-wa {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--wa-green);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px -8px rgba(37, 211, 102, 0.5), 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 50;
  transition: transform 0.2s ease;
  animation: waPulse 2.4s ease-in-out infinite;
}
.fab-wa:hover { transform: scale(1.06); }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 12px 32px -8px rgba(37, 211, 102, 0.5), 0 0 0 0 rgba(37, 211, 102, 0.4); }
  50%      { box-shadow: 0 12px 32px -8px rgba(37, 211, 102, 0.5), 0 0 0 14px rgba(37, 211, 102, 0); }
}

/* ----- Photo placeholder ----- */
.photo-ph {
  background: linear-gradient(135deg, var(--indigo-soft) 0%, var(--orange-soft) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--pencil);
  font-size: 11px; font-family: var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase;
  position: relative;
  overflow: hidden;
  font-weight: 600;
}
.photo-ph span {
  position: relative; z-index: 1;
  background: rgba(255, 255, 255, 0.95);
  padding: 6px 12px; border-radius: 999px;
}

/* ----- Scrollbar ----- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--silver); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--pencil); }

/* ----- Squiggle / circled / marker decorations ----- */
.squiggle {
  display: inline-block;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8'%3E%3Cpath d='M2 4 Q 10 0 20 4 T 40 4 T 60 4 T 78 4' stroke='%23F47527' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: auto 100%;
  width: var(--w, 140px);
  vertical-align: middle;
  margin-left: 12px;
}
.squiggle-blue {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8'%3E%3Cpath d='M2 4 Q 10 0 20 4 T 40 4 T 60 4 T 78 4' stroke='%230070E6' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.circled {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--orange);
}
.circled::after {
  content: "";
  position: absolute;
  inset: -8% -6%;
  border: 2px solid var(--orange);
  border-radius: 60% 40% 60% 50% / 50% 60% 50% 50%;
  transform: rotate(-2deg);
  pointer-events: none;
}
.circled-blue { color: var(--blue); }
.circled-blue::after { border-color: var(--blue); }
.marker-blue {
  background: linear-gradient(transparent 64%, var(--indigo-soft) 64%);
  padding: 0 4px;
  color: var(--indigo-dark);
}

/* ----- FAQ accordion — sistema unificado ----- */
/* Cubre dos wrappers: .faq-item[data-faq] (que-ofrecemos, preparacion-examenes)
   y [data-faq] directo (resto de páginas). Hover y estados idénticos en ambos.
   Todas las reglas llevan .oposemad-page para ganar en especificidad
   frente a los resets de Astra (body.oposemad-page = misma especificidad). */

.oposemad-page .faq { display: grid; gap: 8px; }

/* Wrapper con borde y radio (patrón .faq-item) */
.oposemad-page .faq-item {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  transition: background 0.2s ease;
}
.oposemad-page .faq-item:hover         { background: rgba(63, 79, 203, 0.07); }
.oposemad-page .faq-item.is-open       { background: var(--paper); }
.oposemad-page .faq-item.is-open:hover { background: var(--paper); }

/* Wrapper solo con separador (patrón [data-faq] directo) */
.oposemad-page [data-faq] {
  border-radius: 8px;
  transition: background 0.2s ease;
}
.oposemad-page [data-faq]:hover         { background: rgba(63, 79, 203, 0.07); }
.oposemad-page [data-faq].is-open       { background: transparent; }
.oposemad-page [data-faq].is-open:hover { background: transparent; }

/* Botón de pregunta */
.oposemad-page .faq-q {
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  gap: 16px;
}

/* Icono circular + / - */
.oposemad-page .faq-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Hover: el icono también se colorea */
.oposemad-page .faq-item:hover .faq-icon,
.oposemad-page [data-faq]:hover .faq-icon { background: var(--indigo); color: #fff; }

/* Estado abierto: icono azul sólido */
.oposemad-page [data-faq].is-open .faq-icon,
.oposemad-page .faq-item.is-open  .faq-icon { background: var(--blue); color: #fff; }

/* Mostrar / ocultar + y - */
.oposemad-page .faq-icon .faq-plus  { display: inline; }
.oposemad-page .faq-icon .faq-minus { display: none; }
.oposemad-page [data-faq].is-open  .faq-icon .faq-plus,
.oposemad-page .faq-item.is-open   .faq-icon .faq-plus  { display: none; }
.oposemad-page [data-faq].is-open  .faq-icon .faq-minus,
.oposemad-page .faq-item.is-open   .faq-icon .faq-minus { display: inline; }

/* Panel de respuesta — max-height/opacity via JS (scrollHeight real) */
.oposemad-page .faq-a {
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.22s ease;
  padding-top: 0 !important;
}

/* Padding interior de la respuesta */
.oposemad-page .faq-a-inner {
  padding: 0 24px 22px;
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.65;
}

/* Foco visible (teclado) */
.oposemad-page .faq-q:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 6px;
  border-radius: 8px;
}

/* ----- Nav ----- */
.nav-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--rule-light);
  transition: background 0.25s ease;
}
.nav-bar.is-scrolled {
  background: rgba(244, 242, 248, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
}
.nav-item {
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--graphite);
  transition: color 0.18s ease;
  cursor: pointer;
  position: relative;
  background: none;
  border: 0;
  font-family: var(--font-sans);
}
.nav-item:hover { color: var(--indigo); }
.nav-item[data-active="true"] { color: var(--indigo); }
.nav-item[data-active="true"]::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px;
  background: var(--orange);
  border-radius: 2px;
}
.topbar-link { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.85); transition: color 0.15s ease; }
.topbar-link:hover { color: var(--golden); }
.topbar-social {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.topbar-social:hover { background: var(--golden); color: var(--indigo-dark); transform: translateY(-1px); }
.nav-burger {
  background: none; border: 0; cursor: pointer;
  color: var(--ink); padding: 4px;
}
.nav-mobile {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 16px 20px;
}
.nav-mobile .nav-item { display: block; padding: 12px 0; }

/* ----- Footer ----- */
.footer-social {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper);
  transition: all 0.2s ease;
}
.footer-social:hover { background: var(--orange); color: white; transform: translateY(-2px); }
.footer-heading {
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--paper);
  margin: 0 0 18px;
}
.footer-info-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  transition: color 0.15s ease;
}
a.footer-info-row:hover, a.footer-link:hover { color: var(--golden); }
.footer-link { display: block; padding: 6px 0; font-size: 14px; color: rgba(255,255,255,0.65); transition: color 0.15s ease; }

/* ----- Hidden attribute safety: any rule with display: flex/grid
   would otherwise override the UA's [hidden] { display: none }. ----- */
[hidden] { display: none !important; }

/* ----- Dossier modal ----- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(26, 22, 18, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeUp 0.25s ease-out;
}
.modal-card {
  background: var(--paper);
  border-radius: 20px;
  max-width: 520px; width: 100%;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: 0; cursor: pointer;
  color: var(--graphite); padding: 6px; border-radius: 8px;
}
.dossier-option {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 16px 18px; border-radius: 12px;
  border: 1.5px solid var(--rule);
  background: var(--paper);
  cursor: pointer; text-align: left;
  font-family: var(--font-sans);
  transition: all 0.15s ease;
  gap: 16px;
}
.dossier-option:hover { border-color: var(--ink); background: var(--cream); color: var(--ink); }
.dossier-option[data-selected="true"] { border-color: var(--blue); background: var(--blue-soft); color: var(--ink); }
.dossier-option[data-selected="true"] .dossier-check { display: inline-flex; }
.dossier-check { display: none; color: var(--blue); }
.dossier-progress { height: 4px; background: var(--sand); display: flex; }
.dossier-progress-bar { width: 33.3%; background: var(--orange); transition: width 0.35s ease; }

/* ----- WhatsApp typing dots ----- */
.typing-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(0,0,0,0.4);
  display: inline-block;
  animation: typing 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ----- Why-card grid (home) ----- */
.why-card {
  background: var(--paper);
  border-radius: 18px;
  padding: 28px 24px;
  text-align: center;
  border: 1px solid var(--rule-light);
  box-shadow: var(--shadow-card);
  transition: all 0.25s ease;
}
.why-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--orange-soft);
}
.why-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: var(--orange-tint);
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  transition: all 0.25s ease;
}
.why-card:hover .why-icon {
  background: var(--orange);
  color: var(--paper);
  transform: scale(1.05);
}

/* ----- Resource cards ----- */
.resource-card {
  display: block;
  padding: 28px 24px;
  background: var(--paper);
  border-radius: 16px;
  border: 1px solid var(--rule);
  position: relative;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
}
.resource-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--ink); }
.resource-arrow {
  position: absolute; top: 28px; right: 24px;
  color: var(--pencil);
  transition: transform 0.2s ease, color 0.2s ease;
}
.resource-card:hover .resource-arrow { transform: translateX(4px); color: var(--blue); }

/* ----- Calendario del curso por fases (Qué ofrecemos) ----- */
.curso-fases { display: grid; grid-template-columns: 1fr 1.35fr; gap: 24px; align-items: start; }
.curso-card { background: var(--paper); border: 1px solid var(--rule); border-radius: 18px; padding: 32px; }
.curso-card-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
/* font-weight/letter-spacing explícitos: va sobre un <h3>, que hereda el 800 y
   el -0.02em de ".oposemad-page h1..h4" y acaba en negrita falsa. Ídem en el
   resto de reglas serif de este fichero. */
.curso-card-title { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0; font-size: 28px; line-height: 1.05; margin-top: 8px; }
.curso-groups { display: grid; gap: 26px; margin-top: 24px; }
.curso-subhead { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pencil); font-weight: 700; margin: 0 0 2px; }
.curso-list { list-style: none; padding: 0; margin: 0; }
.curso-item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; line-height: 1.4; color: var(--ink); }
.curso-item:last-child { border-bottom: none; }
.curso-periodo { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--graphite); white-space: nowrap; }
.curso-repaso { margin-top: 24px; background: var(--ink); color: var(--cream); border-radius: 18px; padding: 24px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .curso-fases { grid-template-columns: 1fr; }
  .curso-card { padding: 24px; }
}
@media (max-width: 600px) {
  /* En móvil, el periodo baja debajo del nombre para que no queden pegados */
  .curso-item { flex-direction: column; align-items: flex-start; gap: 2px; }
  .curso-periodo { color: var(--pencil); }
  .curso-repaso { padding: 22px 24px; }
}

/* "Somos preparadoras" — copia visible solo en móvil. La del hero vive en la
   columna derecha, que se oculta a ≤900px; esta la sustituye en ese rango. */
.somos-prepa-movil { display: none; }
@media (max-width: 900px) { .somos-prepa-movil { display: block; } }

/* ----- Comparativa table ----- */
.compare-table {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.compare-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  font-size: 15px;
  line-height: 1.45;
  border-bottom: 1px solid var(--rule);
}
.compare-row:last-child { border-bottom: none; }
.compare-row > div {
  padding: 18px 24px;
  border-right: 1px solid var(--rule);
}
.compare-row > div:last-child { border-right: none; }
.compare-row .col-good { background: var(--orange-tint); font-weight: 600; color: var(--orange-deep); }
.compare-head {
  background: var(--sand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
}
.compare-head > div { padding: 16px 24px; }
.compare-head .col-good { background: var(--orange-tint); color: var(--orange-deep); }

/* ----- Modalidad cards ----- */
.modalidad-card {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 32px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.modalidad-card.is-featured {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.modalidad-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* ----- Contact form ----- */
.contact-channel {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  margin-bottom: 12px;
  transition: all 0.18s ease;
  text-decoration: none;
  color: inherit;
}
.contact-channel:hover { transform: translateX(4px); border-color: var(--ink); box-shadow: var(--shadow-sm); }
.momento-btn {
  padding: 14px 12px;
  border: 1.5px solid var(--rule);
  background: white;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--graphite);
  transition: all 0.15s ease;
}
.momento-btn:hover { border-color: var(--ink); }
.momento-btn[data-selected="true"] { background: var(--blue); color: white; border-color: var(--blue); }

/* ----- Blog cards ----- */
.blog-large {
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-large:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cat-pill {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--graphite);
  transition: all 0.15s ease;
}
.cat-pill:hover { border-color: var(--ink); color: var(--ink); }
.cat-pill[data-active="true"] { background: var(--ink); color: white; border-color: var(--ink); }
.article-card { cursor: pointer; transition: transform 0.2s ease; }
.article-card:hover { transform: translateY(-4px); }
.featured-article {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  cursor: pointer;
}

/* El cuerpo de los artículos lo estilan las reglas .post-body de más abajo.
   Aquí había un bloque .prose paralelo que ninguna plantilla llegó a usar. */

/* ----- Aula virtual sidebar ----- */
.aula-lesson {
  display: flex; align-items: center;
  gap: 8px; padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid transparent;
}
.aula-lesson.is-current { background: var(--paper); border-color: var(--orange); }
.aula-lesson-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--silver);
  display: flex; align-items: center; justify-content: center;
  color: white; flex-shrink: 0;
}
.aula-lesson.is-done .aula-lesson-dot { background: var(--success); }
.aula-lesson.is-current .aula-lesson-dot { background: var(--orange); }

/* ============================================================
   Page: Nuestro equipo
   ============================================================ */

/* Lockup row in hero */
.equipo-lockup {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease;
  cursor: pointer;
}
.equipo-lockup:hover { transform: translateY(-4px); }

/* El layout de la ficha de preparadora (.prepa-row / .prepa-foto / .prepa-info)
   vive en línea dentro de page-equipo.php para que no lo rompa la caché de CSS.
   Aquí quedan solo los estilos visuales (etiquetas y cita). */

.prepa-tag {
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--graphite);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.prepa-quote {
  margin: 28px 0 0;
  padding: 24px 28px;
  background: var(--cream);
  border-left: 4px solid var(--orange);
  border-radius: 0 14px 14px 0;
  position: relative;
}
.prepa-quote p {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
  font-style: italic;
  padding-right: 36px;
  margin: 0;
}
.prepa-quote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 13px;
  color: var(--pencil);
  font-weight: 600;
}
.prepa-quote-icon {
  position: absolute;
  top: 14px;
  right: 18px;
  opacity: 0.5;
}

/* Stats block (dark) */
.stat-card {
  padding: 28px 24px;
  background: rgba(249, 243, 235, 0.05);
  border-radius: 16px;
  border: 1px solid rgba(249, 243, 235, 0.1);
}
.stat-num {
  font-family: var(--font-serif);
  font-size: 72px;
  line-height: 1;
  color: var(--golden);
  font-weight: 500;
}
.stat-label {
  margin-top: 12px;
  font-size: 14px;
  color: rgba(249, 243, 235, 0.75);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Tribunal card */
.tribunal-card {
  background: var(--paper);
  border-radius: 24px;
  padding: 36px;
  border: 1px solid var(--rule-light);
  box-shadow: var(--shadow-card);
}
.tribunal-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule-light);
}
.tribunal-year {
  font-family: var(--font-serif);
  font-size: 36px;
  line-height: 1;
  color: var(--indigo);
  font-weight: 500;
  min-width: 88px;
}
.tribunal-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--orange-tint);
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Mission cards */
.mission-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
}

/* CTA channels (dark) */
.cta-channels {
  background: rgba(249, 243, 235, 0.04);
  border: 1px solid rgba(249, 243, 235, 0.1);
  border-radius: 20px;
  padding: 28px;
}
.cta-channel-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(245, 184, 104, 0.18);
  color: var(--golden);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ============================================================
   Page: Preparación de exámenes (SEO/GEO/LLM)
   ============================================================ */

/* Breadcrumb */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--pencil);
  margin-bottom: 18px;
}
.breadcrumbs a {
  color: var(--pencil);
  text-decoration: none;
  transition: color 0.15s ease;
}
.breadcrumbs a:hover { color: var(--indigo); }
.breadcrumb-sep { color: var(--silver); }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* SEO hero spacing */
.seo-hero {
  padding: 56px 0 72px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

/* Trust signal row under hero */
.seo-trustline {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  font-size: 14px;
  color: var(--graphite);
  border-top: 1px solid var(--rule-light);
  padding-top: 24px;
}
.seo-trustline li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.seo-trustline li svg { color: var(--orange); }

/* TL;DR card — citable summary */
.tldr-card {
  background: var(--cream);
  border: 1px solid var(--rule-light);
  border-radius: 20px;
  padding: 32px 36px;
  max-width: 1080px;
  margin: 0 auto;
}
.tldr-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}
.tldr-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  background: var(--orange-tint);
  padding: 5px 10px;
  border-radius: 999px;
}
.tldr-title {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}
.tldr-body {
  font-size: 18px;
  line-height: 1.65;
  color: var(--graphite);
  margin: 0;
}
.tldr-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule-light);
}
.tldr-meta > div { display: flex; flex-direction: column; gap: 4px; }
.tldr-meta dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pencil);
}
.tldr-meta dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
  line-height: 1.2;
}

/* Prueba cards (3 components) */
.prueba-card {
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.prueba-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--orange-soft);
}
.prueba-card.is-featured {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.prueba-card.is-featured h3,
.prueba-card.is-featured .prueba-sub { color: var(--cream); }
.prueba-card.is-featured .prueba-list li { color: rgba(249, 243, 235, 0.85); }
.prueba-card.is-featured .prueba-list li strong { color: var(--golden); }
.prueba-card.is-featured .prueba-stat { background: rgba(249, 243, 235, 0.06); border-color: rgba(249, 243, 235, 0.12); }
.prueba-card.is-featured .prueba-stat span:first-child { color: var(--golden); }
.prueba-card.is-featured .prueba-stat-label { color: rgba(249, 243, 235, 0.65); }
.prueba-card.is-featured .prueba-num { color: var(--orange); }

.prueba-num {
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1;
  color: var(--orange);
  font-weight: 500;
}
.prueba-card h3 {
  font-size: 28px;
  margin-top: 16px;
  line-height: 1.1;
  color: var(--ink);
}
.prueba-sub {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--graphite);
  margin-top: 8px;
  line-height: 1.4;
}
.prueba-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  flex: 1;
}
.prueba-list li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--graphite);
  padding-left: 22px;
  position: relative;
}
.prueba-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.prueba-stat {
  margin-top: 24px;
  padding: 14px 16px;
  background: var(--cream);
  border: 1px solid var(--rule-light);
  border-radius: 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.prueba-stat > span:first-child {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1;
  color: var(--orange);
  font-weight: 500;
}
.prueba-stat-label {
  font-size: 12px;
  color: var(--pencil);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Metodo cards (4 pilares) */
.metodo-card {
  background: var(--paper);
  border-radius: 18px;
  padding: 28px 24px;
  border: 1px solid var(--rule-light);
  box-shadow: var(--shadow-card);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.metodo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.metodo-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.metodo-card h3 {
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
}
.metodo-sub {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--orange);
  margin-top: 6px;
  line-height: 1.4;
}
.metodo-card p:last-child {
  font-size: 14px;
  color: var(--graphite);
  margin-top: 10px;
  line-height: 1.6;
}

/* Comparison table */
.table-wrap {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid var(--rule);
}
.seo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--paper);
}
.seo-table caption.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.seo-table thead th {
  background: var(--cream);
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
}
.seo-table tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule-light);
  background: var(--paper);
  vertical-align: top;
  width: 28%;
}
.seo-table tbody td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule-light);
  color: var(--graphite);
  vertical-align: top;
  line-height: 1.55;
}
.seo-table tbody td:last-child {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--orange);
  white-space: nowrap;
  width: 18%;
}
.seo-table tbody tr:last-child th,
.seo-table tbody tr:last-child td { border-bottom: none; }
.seo-table tbody tr:hover th,
.seo-table tbody tr:hover td { background: var(--cream); }

/* Author block (E-E-A-T) */
.author-block {
  background: var(--paper);
  border-radius: 24px;
  padding: 36px;
  border: 1px solid var(--rule-light);
  box-shadow: var(--shadow-sm);
}

/* Sub-menu dropdown for nav "Qué ofrecemos" */
.nav-dropdown {
  position: relative;
}
.nav-dropdown > .nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-dropdown > .nav-item::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  display: inline-block;
  opacity: 0.6;
  margin-left: 4px;
  transition: transform 0.2s ease;
}
.nav-dropdown:hover > .nav-item::after,
.nav-dropdown:focus-within > .nav-item::after {
  transform: rotate(225deg) translate(-2px, -2px);
}
.submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 260px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 10px;
  display: grid;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 50;
}
.nav-dropdown:hover .submenu,
.nav-dropdown:focus-within .submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.submenu a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--graphite);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.submenu a:hover,
.submenu a[data-active="true"] {
  background: var(--cream);
  color: var(--indigo);
}
.submenu a small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--pencil);
  margin-top: 2px;
}

/* Mobile responsive overrides */
@media (max-width: 900px) {
  .tldr-meta { grid-template-columns: repeat(2, 1fr); }
  .prueba-grid { grid-template-columns: 1fr !important; }
  .four-col { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .seo-trustline { gap: 14px 20px; font-size: 13px; }
  .tldr-card { padding: 24px 22px; }
  .seo-table { font-size: 14px; }
  .seo-table thead th,
  .seo-table tbody th,
  .seo-table tbody td { padding: 14px 14px; }
  .seo-table tbody th { width: auto; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ============================================================
   Page: Recursos
   ============================================================ */

/* Filter pills */
.recurso-filter {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--graphite);
  transition: all 0.15s ease;
}
.recurso-filter:hover { border-color: var(--ink); color: var(--ink); }
.recurso-filter.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Featured calc hero */
.recurso-hero {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
  background: linear-gradient(135deg, var(--cream) 0%, var(--orange-tint) 100%);
  border-radius: 24px;
  padding: 48px;
  border: 1px solid var(--rule-light);
}
.recurso-hero-body { display: flex; flex-direction: column; }
.recurso-tag {
  display: inline-flex;
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.recurso-bullets {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.recurso-bullets li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--graphite);
  padding-left: 22px;
  position: relative;
}
.recurso-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

/* Calculator browser mock */
.calc-mock {
  background: var(--paper);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--rule-light);
  overflow: hidden;
}
.calc-mock-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--cream);
  border-bottom: 1px solid var(--rule-light);
}
.calc-mock-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF5F57;
}
.calc-mock-body {
  padding: 28px 24px 24px;
}
.calc-mock-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--graphite);
  font-weight: 600;
  margin-bottom: 8px;
}
.calc-mock-row strong {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
  font-weight: 500;
}
.calc-mock-bar {
  height: 8px;
  background: var(--sand);
  border-radius: 999px;
  overflow: hidden;
}
.calc-mock-bar > div {
  height: 100%;
  background: var(--indigo);
  border-radius: 999px;
}
.calc-mock-result {
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.calc-mock-result span {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(249, 243, 235, 0.7);
  font-weight: 600;
}
.calc-mock-result strong {
  font-family: var(--font-serif);
  font-size: 36px;
  line-height: 1;
  color: var(--golden);
  font-weight: 500;
}
.calc-mock-result strong small {
  font-size: 16px;
  color: rgba(249, 243, 235, 0.5);
  font-weight: 400;
}

/* Resource card */
.recurso-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  cursor: pointer;
}
.recurso-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--orange-soft);
}
.recurso-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.recurso-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recurso-format {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pencil);
}
.recurso-card h3 {
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
}
.recurso-card p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--graphite);
  flex: 1;
}
.recurso-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--indigo);
  transition: gap 0.15s ease;
}
.recurso-card:hover .recurso-cta { gap: 10px; }

/* Hidden state when filtered out */
.recurso-card[hidden],
.recurso-hero[hidden] { display: none !important; }

.recurso-empty {
  text-align: center;
  padding: 48px 0;
  color: var(--pencil);
  font-style: italic;
}

@media (max-width: 900px) {
  .recurso-hero { grid-template-columns: 1fr; padding: 32px; }
  .recurso-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .recurso-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .container, .container-wide { padding: 0 20px; }
  .section, .section-lg { padding: 64px 0; }
  .hide-mobile { display: none !important; }
    /* permite que los botones largos hagan salto de línea */
  .btn {
    white-space: normal;
    word-break: break-word;
  }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}
/* ==========================================================================
   5. BOTÓN AULA VIRTUAL (Header)
   ========================================================================== */

.oposemad-aula-button:hover {
    background-color: var(--oposemad-primary) !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   6. Forzar ancho
   ========================================================================== */

@media (min-width: 922px) {

    .oposemad-page.page .site-content > .ast-container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important; 
        padding-right: 0 !important;
        margin: 0 !important;
    }


    .oposemad-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }


    .oposemad-content section {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   SINGLE POST — Estilos del cuerpo del artículo
   Añadir al final de oposemad.css (o en un archivo separado
   que se encole solo en is_single())
   ============================================================ */

/* ── Wrapper general del contenido del post ── */
.post-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--graphite);
  max-width: 680px;
}

/* ── Encabezados dentro del post ── */
.post-body h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  margin-top: 56px;
  margin-bottom: 16px;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.post-body h3 {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  margin-top: 40px;
  margin-bottom: 12px;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: 0;
}

.post-body h4 {
  font-size: 16px;
  font-weight: 700;
  margin-top: 28px;
  margin-bottom: 8px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Párrafos ── */
.post-body p {
  margin-top: 20px;
  margin-bottom: 0;
}
.post-body p:first-child { margin-top: 0; }

/* ── Strong / em ── */
.post-body strong { color: var(--ink); font-weight: 700; }
.post-body em { font-style: italic; }

/* ── Links ── */
.post-body a {
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(63,79,203,.35);
  transition: text-decoration-color .2s;
}
.post-body a:hover { text-decoration-color: var(--indigo); }

/* ── Listas ── */
.post-body ul,
.post-body ol {
  margin-top: 20px;
  padding-left: 24px;
}
.post-body li { margin-bottom: 10px; }
.post-body ul li::marker { color: var(--orange); font-size: 1.1em; }
.post-body ol li::marker { color: var(--indigo); font-weight: 700; }

/* ── Blockquote / cita destacada ── */
.post-body blockquote {
  margin: 36px 0;
  padding: 20px 24px;
  background: var(--orange-tint);
  border-left: 4px solid var(--orange);
  border-radius: 0 8px 8px 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
}
.post-body blockquote p { margin-top: 0; }
.post-body blockquote cite {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--pencil);
  font-style: normal;
}

/* ── Tablas ── */
.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 28px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}
.post-body thead tr { background: var(--cream); }
.post-body th {
  text-align: left;
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--graphite);
}
.post-body td {
  padding: 12px 18px;
  border-top: 1px solid var(--rule);
  color: var(--graphite);
  line-height: 1.5;
}
.post-body tbody tr:hover td { background: var(--cream); }

/* ── Imágenes dentro del post ── */
.post-body img {
  border-radius: 12px;
  margin-top: 32px;
  margin-bottom: 8px;
  border: 1px solid var(--rule);
}
.post-body figure { margin: 0; }
.post-body figcaption {
  font-size: 13px;
  color: var(--pencil);
  margin-top: 8px;
  text-align: center;
  font-style: italic;
}

/* ── Separador horizontal ── */
.post-body hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 48px 0;
}

/* ── Código inline ── */
.post-body code {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  background: var(--cream);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--orange-deep);
}

/* ── Primer párrafo destacado (drop cap / lead) ── */
.post-body > p:first-of-type {
  font-size: 18px;
  color: var(--ink);
  line-height: 1.65;
}

/* ── Responsive: en móvil la tabla hace scroll horizontal ── */
@media (max-width: 768px) {
  .post-body { font-size: 16px; }

  /* Grid principal a una columna */
  section > .container-wide[style*="grid-template-columns: 1fr 280px"] {
    display: block !important;
  }

  /* Sidebar debajo del contenido en móvil */
  aside[style*="position: sticky"] {
    position: static !important;
    margin-top: 48px;
  }

  .post-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .post-body h2 { margin-top: 40px; }
}
/* ============================================================
   RESPONSIVE GRIDS — Corrección móvil
   Necesario porque grid-template-columns está en style="" inline
   y requiere !important para sobreescribirse en media queries.
   ============================================================ */

@media (max-width: 900px) {

  /* Hero principal (page-inicio.php) */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Columna derecha del hero (imagen/card) — se oculta en móvil
     para no romper el layout; la imagen del banner no es esencial */
  .hero-grid > div:last-child {
    display: none;
  }

  /* Dos columnas genéricas (equipo, que-ofrecemos, etc.) */
  .two-col {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Cuatro columnas → dos columnas en tablet/móvil grande */
  .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Tres columnas → una columna */
  .three-col {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Comparativa de tabla — en móvil, cada fila es una "tarjeta" con la
     característica arriba y las dos columnas etiquetadas (Academia / Oposemad),
     para que se entienda qué valor es de quién sin la cabecera. */
  .compare-head { display: none; }
  .compare-row {
    grid-template-columns: 1fr !important;
    font-size: 14px;
  }
  .compare-row > div {
    border-right: none !important;
    border-bottom: 1px solid var(--rule);
    padding: 12px 16px;
  }
  .compare-row > div:first-child {
    background: var(--cream);
    font-weight: 700 !important;
    font-size: 15px !important;
  }
  .compare-row > div:nth-child(2)::before,
  .compare-row > div:nth-child(3)::before {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 3px;
  }
  .compare-row > div:nth-child(2)::before { content: "Academia"; color: var(--pencil); }
  .compare-row > div:nth-child(3)::before { content: "Oposemad"; color: var(--orange-deep); }


  /* Artículo destacado blog */
  .featured-article {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .featured-article > div:first-child {
    height: 220px !important;
  }
 /* Sección "Lo último del blog" (page-inicio.php) */
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Grid de recursos gratuitos (4 columnas) → 2 en tablet */
  .four-col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {

  /* Cuatro columnas → una columna en móvil pequeño */
  .why-grid {
    grid-template-columns: 1fr !important;
  }

  /* Ocultar columna decorativa del hero sí o sí */
  .hero-grid > div:last-child {
    display: none;
  }

  /* Hero: ajuste de padding */
  .hero-grid {
    gap: 24px !important;
  }

  /* Botones del hero: apilados */
  .hero-grid .flex.gap-3 {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-grid .btn {
    justify-content: center;
  }
    /* Recursos → 1 columna en móvil pequeño */
  .four-col {
    grid-template-columns: 1fr !important;
  }
}
  /* ============================================================
   RESPONSIVE GRIDS — páginas interiores
   ============================================================ */

@media (max-width: 900px) {

  /* Dos tarjetas grandes (que-ofrecemos, preparacion-examenes) */
  .two-col-cards {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Tres columnas fase 1 examen */
  .prueba-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Stats 4 columnas → 2 columnas en tablet */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Aula virtual: sidebar fija de 280px → apilado */
  .aula-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 600px) {

  /* Stats 4 columnas → 2 columnas en móvil pequeño */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   Page: Materiales recomendados
   ============================================================ */

.materiales-grid-general {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
}
.materiales-grid-pedagogia {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 900px) {
	.materiales-grid-pedagogia { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.materiales-grid-general { grid-template-columns: 1fr; }
}

/* ============================================================
   Page: Aula virtual
   ============================================================ */

.aula-trustline {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 14px;
  color: var(--graphite);
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}
.aula-trustline li { display: inline-flex; align-items: center; gap: 8px; }
.aula-trustline strong { color: var(--ink); font-weight: 700; }

.aula-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
}
.aula-checklist li { display: flex; gap: 16px; align-items: flex-start; }
.aula-checklist-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--indigo-soft);
  color: var(--indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.aula-checklist li:nth-child(even) .aula-checklist-ico { background: var(--orange-tint); color: var(--orange); }
.aula-checklist h3 { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0; font-size: 21px; line-height: 1.15; margin: 0; }
.aula-checklist p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--graphite); }
@media (max-width: 860px) {
  .aula-checklist { grid-template-columns: 1fr; }
}

.course-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--rule-strong); }
.course-card-hero { grid-row: span 1; }
.course-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.course-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(244, 117, 39, 0.35), transparent 50%),
    radial-gradient(circle at 20% 90%, rgba(255, 255, 255, 0.12), transparent 55%);
  pointer-events: none;
}
.course-thumb-2 { background: linear-gradient(135deg, #1F8A5B 0%, #0E5A3A 100%); }
.course-thumb-2::before {
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.22), transparent 50%),
    radial-gradient(circle at 20% 90%, rgba(0, 0, 0, 0.18), transparent 55%);
}
.course-thumb-3 { background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%); }
.course-thumb-3::before {
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.28), transparent 50%),
    radial-gradient(circle at 20% 90%, rgba(0, 0, 0, 0.18), transparent 55%);
}
.course-thumb-glyph {
  font-family: var(--font-serif);
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
  line-height: 1;
}
.course-thumb-tag {
  position: absolute;
  bottom: 16px;
  left: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(15, 20, 40, 0.35);
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  z-index: 1;
}
.course-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  padding: 6px 10px;
  border-radius: 999px;
  z-index: 1;
}
.course-body { padding: 24px 24px 22px; display: flex; flex-direction: column; flex: 1; }
.course-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pencil); }
.course-body h3 { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0; font-size: 24px; line-height: 1.15; margin-top: 10px; }
.course-card-hero .course-body h3 { font-size: 28px; }
.course-body p { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--graphite); }
.course-meta {
  list-style: none;
  padding: 14px 0;
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
  color: var(--pencil);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.course-meta li { display: inline-flex; align-items: center; gap: 6px; }
.course-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.course-price { display: flex; align-items: baseline; gap: 8px; }
.course-price-old { font-size: 14px; color: var(--pencil); text-decoration: line-through; }
/* 600 -> 400: DM Serif Display no tiene ese peso y el navegador lo falseaba. */
.course-price-new { font-family: var(--font-serif); font-size: 26px; color: var(--ink); font-weight: 400; line-height: 1; }

@media (max-width: 960px) {
  .course-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Page: Test perfil opositor
   ============================================================ */

.test-trustline {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 14px;
  color: var(--graphite);
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}
.test-trustline li { display: inline-flex; align-items: center; gap: 8px; }
.test-trustline strong { color: var(--ink); font-weight: 700; }

.profile-matrix {
  position: relative;
  padding: 36px 30px 36px 56px;
}
.matrix-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.matrix-cell {
  position: relative;
  padding: 26px 22px 24px;
  border-radius: 18px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
  aspect-ratio: 5 / 4;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.matrix-cell::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1.5px solid currentColor;
  border-radius: 17px;
  opacity: 0.08;
  pointer-events: none;
}
.matrix-cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* !important a propósito: Astra fuerza su propio color en los <a>, con más
   peso que dos clases combinadas — sin esto, "Estratega" y "Maratoniano"
   perdían el blanco y salían con texto oscuro sobre fondo oscuro. */
.matrix-cell.matrix-orange { background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep, #D85D1F) 100%); color: var(--ink) !important; }
.matrix-cell.matrix-blue   { background: linear-gradient(135deg, var(--blue, #0070E6) 0%, var(--indigo, #0056B2) 100%); color: #FFFFFF !important; }
.matrix-cell.matrix-sand   { background: var(--sand); color: var(--ink) !important; }
.matrix-cell.matrix-indigo { background: linear-gradient(135deg, var(--indigo, #0056B2) 0%, #00254D 100%); color: #FFFFFF !important; }
.matrix-num { font-family: var(--font-display, var(--font-serif)); font-size: 14px; font-weight: 700; letter-spacing: 0.16em; opacity: 0.7; }
.matrix-title { font-family: var(--font-serif); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; margin-top: auto; }
.matrix-sub { font-size: 13.5px; line-height: 1.45; opacity: 0.85; margin-top: 6px; }

.matrix-y-label, .matrix-x-label {
  position: absolute;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pencil);
}
.matrix-y-label { left: 4px; writing-mode: vertical-rl; transform: rotate(180deg); }
.matrix-y-top { top: 36px; }
.matrix-y-bot { bottom: 36px; }
.matrix-x-label { bottom: 6px; }
.matrix-x-left { left: 56px; }
.matrix-x-right { right: 30px; }

@media (max-width: 720px) {
  .profile-matrix { padding-left: 44px; }
  .matrix-y-top { top: 12px; }
  .matrix-y-bot { bottom: 22px; }
}

.perfil-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.perfil-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.perfil-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: currentColor;
}
.perfil-orange { color: var(--orange); }
.perfil-blue   { color: var(--blue, #0070E6); }
.perfil-sand   { color: #B68658; }
.perfil-indigo { color: var(--indigo, #0056B2); }
.perfil-head { display: flex; gap: 22px; align-items: flex-start; padding-left: 12px; }
.perfil-num { font-family: var(--font-serif); font-size: 48px; line-height: 1; font-weight: 500; color: currentColor; flex-shrink: 0; }
.perfil-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: currentColor;
  background: color-mix(in oklab, currentColor 14%, transparent);
  padding: 5px 10px;
  border-radius: 999px;
}
.perfil-card h3 { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0; font-size: clamp(28px, 3vw, 36px); line-height: 1.05; margin-top: 10px; color: var(--ink); }
.perfil-desc { margin-top: 18px; padding-left: 12px; font-size: 15px; line-height: 1.65; color: var(--graphite); }
.perfil-plan {
  list-style: none;
  padding: 18px 0 0 12px;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--graphite);
}
.perfil-plan li { display: flex; align-items: flex-start; gap: 10px; }
.perfil-plan svg { color: currentColor; flex-shrink: 0; margin-top: 3px; }

.how-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.how-steps li {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 24px 26px;
}
.how-num { font-family: var(--font-serif); font-size: 40px; line-height: 1; color: var(--orange); flex-shrink: 0; width: 56px; }
.how-steps h3 { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0; font-size: 22px; line-height: 1.15; margin: 0; }
.how-steps p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--graphite); }

.next-card {
  display: block;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 36px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.next-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--rule-strong, var(--rule)); }
.next-card .kicker { margin: 0; }
.next-card h3 { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.1; margin-top: 10px; }
.next-card p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--graphite); }
.next-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; font-weight: 700; color: var(--orange); }

@media (max-width: 860px) {
  .perfil-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Page: Inicio — bloque test de nivel
   ============================================================ */

.home-test-card {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	background: var(--paper);
	border: 1px solid var(--rule);
	box-shadow: 0 24px 70px rgba(16, 18, 43, 0.12);
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
	min-height: 560px;
}
.home-test-bg-shape {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 46%;
	background: linear-gradient(135deg, #D97832 0%, var(--orange) 48%, #BD6127 100%);
	clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
	z-index: 0;
}
.home-test-content {
	position: relative;
	z-index: 1;
	padding: 58px 48px 54px 52px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 650px;
}
.home-test-kicker { color: var(--orange); }
.home-test-title { font-size: clamp(38px, 5.1vw, 68px); line-height: 0.98; letter-spacing: -0.025em; margin-top: 16px; color: var(--ink); }
.home-test-title span { color: var(--orange); }
.home-test-lead { font-size: 17px; color: var(--graphite); margin-top: 32px; line-height: 1.65; max-width: 560px; }
.home-test-lead strong { color: var(--ink); }
.home-test-benefits { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--graphite); }
.home-test-benefits li { display: flex; gap: 12px; align-items: flex-start; }
.home-test-benefits li > span { color: var(--orange); flex-shrink: 0; margin-top: 3px; }
.home-test-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 30px; }
.home-test-stats div { padding: 0 22px; border-left: 1px solid var(--rule); }
.home-test-stats div:first-child { padding-left: 0; border-left: 0; }
.home-test-stats strong { display: block; font-family: var(--font-display); font-size: 31px; line-height: 1; font-weight: 800; color: var(--ink); }
.home-test-stats span { display: block; font-size: 12px; color: var(--pencil); margin-top: 4px; }
.home-test-actions { margin-top: 34px; align-items: center; }
.home-test-visual {
	position: relative;
	z-index: 1;
	padding: 58px 42px 54px 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}
.home-test-visual-head {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: baseline;
	color: var(--ink);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.home-test-visual-head strong { font-size: 11px; opacity: 0.95; white-space: nowrap; }
.home-test-report-wrap {
	background: rgba(255,255,255,0.18);
	border: 1px solid rgba(255,255,255,0.28);
	border-radius: 22px;
	padding: 18px;
	box-shadow: 0 26px 70px rgba(101, 48, 18, 0.28);
	backdrop-filter: blur(10px);
}
.home-test-report-img {
	width: 100%;
	display: block;
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0,0,0,0.22);
	transform: rotate(-2deg);
	background: var(--paper);
}
@media (max-width: 980px) {
	.home-test-card { grid-template-columns: 1fr; min-height: auto; }
	.home-test-bg-shape { width: 100%; top: auto; left: 0; height: 42%; clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 100%); }
	.home-test-content { padding: 44px 28px 30px; max-width: none; }
	.home-test-visual { padding: 20px 28px 42px; }
}
@media (max-width: 640px) {
	.home-test-card { border-radius: 22px; }
	.home-test-title { font-size: clamp(34px, 12vw, 48px); }
	.home-test-stats div { padding: 0 14px; }
	.home-test-stats strong { font-size: 26px; }
	.home-test-visual-head { flex-direction: column; gap: 4px; }
}

/* Inicio — chat WhatsApp */
.chat-bubble { max-width: 78%; }
.chat-right { align-self: flex-end; }
.chat-left { align-self: flex-start; }
.chat-name { font-size: 11px; font-weight: 600; color: var(--blue); margin-left: 12px; margin-bottom: 2px; }
.chat-msg { padding: 8px 12px; font-size: 14px; line-height: 1.45; color: var(--ink); box-shadow: 0 1px 0.5px rgba(0,0,0,0.13); }
.chat-right .chat-msg { background: #DCF8C6; border-radius: 14px 14px 4px 14px; }
.chat-left  .chat-msg { background: white;   border-radius: 14px 14px 14px 4px; }

/* ============================================================
   Acceso alumnos (page-acceso-alumnos.php)
   ============================================================ */

/* La tarjeta va segunda en el HTML porque en escritorio el texto manda,
   pero en móvil sube arriba (order: -1): quien llega aquí viene a entrar,
   no a leer. */
.login-grid {
	display: grid;
	grid-template-columns: 1fr minmax(380px, 440px);
	gap: 72px;
	align-items: center;
}

.login-perks {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.login-perks li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	color: var(--graphite);
}
.login-perks li > span:first-child {
	color: var(--blue);
	display: inline-flex;
	flex-shrink: 0;
}

.login-card {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: 36px;
	box-shadow: var(--shadow-lg);
}

.login-field { margin-bottom: 18px; }

.login-pass-wrap { position: relative; }
/* padding-right en el input para que el texto largo no pase por debajo del
   botón "Mostrar". */
.login-pass-wrap .input { padding-right: 86px; }
.login-pass-toggle {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	background: none;
	border: 0;
	padding: 6px 10px;
	border-radius: 8px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	color: var(--pencil);
	cursor: pointer;
}
.login-pass-toggle:hover { color: var(--blue); background: var(--indigo-tint); }
.login-pass-toggle:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }

.login-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 4px 0 24px;
	font-size: 14px;
}
.login-remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--graphite);
	cursor: pointer;
	margin: 0;
}
.login-remember input { accent-color: var(--indigo); width: 16px; height: 16px; margin: 0; }
.login-lost { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.login-lost:hover { color: var(--indigo-deep); }

/* Botón a todo el ancho: es la única acción de la tarjeta. */
.login-submit { width: 100%; justify-content: center; }

.login-help {
	font-size: 14px;
	color: var(--pencil);
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--rule-light);
	line-height: 1.6;
}
.login-help a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

.login-alert {
	font-size: 14px;
	line-height: 1.5;
	padding: 12px 16px;
	border-radius: 12px;
	margin-bottom: 20px;
}
.login-alert-error { background: #FDECEC; color: #A32626; border: 1px solid #F3C6C6; }
.login-alert-ok    { background: #E8F5EE; color: var(--success); border: 1px solid #C3E4D2; }

.login-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

/* Se apila antes que el resto de .two-col de la web (900px): con la tarjeta
   fija de ~420px, por debajo de 1000px a la columna de texto le quedan menos
   de 350px y el titular grande se rompe en cuatro líneas. */
@media (max-width: 1000px) {
	.login-grid { grid-template-columns: 1fr; gap: 40px; }
	.login-card { order: -1; max-width: 520px; }
	.login-intro h1 { font-size: clamp(38px, 7vw, 56px) !important; }
}

@media (max-width: 600px) {
	.login-card { padding: 26px 22px; border-radius: var(--radius-md); }
	.login-row { font-size: 13px; }
}

/* ============================================================
   Panel de alumna (page-perfil-alumno.php)
   Prefijo .panel- para no chocar con las .aula-* de la página
   pública /aula-virtual/, que son otra cosa.
   ============================================================ */

/* ----- Tarjeta "continuar por donde lo dejaste" ----- */
.panel-continuar {
	background: var(--night);
	color: var(--cream);
	border-radius: var(--radius-lg);
	padding: 36px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
	box-shadow: var(--shadow-md);
}
.panel-continuar-texto { flex: 1 1 380px; min-width: 0; }
.panel-continuar-titulo {
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.1;
	margin-top: 14px;
	color: var(--cream);
}
.panel-continuar-paso {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	font-size: 15px;
	color: var(--golden);
}
.panel-continuar-accion {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	flex-shrink: 0;
}
.panel-continuar-temario {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.panel-continuar-temario:hover { color: var(--paper); }

/* ----- Barra de progreso ----- */
.panel-progreso { margin-top: 20px; }
.panel-progreso-barra {
	height: 8px;
	border-radius: 999px;
	background: var(--sand);
	overflow: hidden;
}
.panel-progreso-barra > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--orange);
	/* Sin transición: el ancho lo fija el servidor y no cambia en cliente. */
}
.panel-progreso-texto {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pencil);
}
.panel-progreso-light .panel-progreso-barra { background: rgba(255, 255, 255, 0.16); }
.panel-progreso-light .panel-progreso-texto { color: rgba(255, 255, 255, 0.72); }

/* ----- Rejilla de cursos ----- */
/* auto-fill (no auto-fit) para que con dos o tres cursos las tarjetas
   mantengan un ancho de lectura razonable en vez de estirarse a media
   pantalla. El min() evita que la pista de 300px desborde en móviles
   estrechos, donde el contenedor mide menos que eso. */
.panel-cursos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 28px;
}

/* display:flex + margin-top:auto en el pie para que los botones de todas las
   tarjetas queden a la misma altura aunque los títulos ocupen distinto. Era
   uno de los defectos visibles del listado de LearnDash. */
.panel-curso {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.panel-curso:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.panel-curso-portada {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--indigo-soft);
}
.panel-curso-portada img { width: 100%; height: 100%; object-fit: cover; }

.panel-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--paper);
	color: var(--graphite);
	box-shadow: var(--shadow-xs);
}
.panel-badge.is-curso { background: var(--orange); color: #fff; }
.panel-badge.is-hecho { background: var(--success); color: #fff; }

/* Cursos sin imagen destacada: en vez de un bloque de color vacío de 16:9,
   la etiqueta se coloca en el cuerpo, encima del título. */
.panel-badge-suelta {
	position: static;
	display: inline-block;
	margin-bottom: 12px;
	border: 1px solid var(--rule);
	box-shadow: none;
}
.panel-badge-suelta.is-curso,
.panel-badge-suelta.is-hecho { border-color: transparent; }

.panel-curso-cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 24px 24px;
}
.panel-curso-titulo {
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: -0.015em;
}
.panel-curso-titulo a:hover { color: var(--blue); }
.panel-curso-siguiente {
	margin-top: 14px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--pencil);
}
.panel-curso-siguiente strong { color: var(--graphite); font-weight: 600; }

.panel-curso-pie {
	margin-top: auto;
	padding-top: 22px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.panel-curso-extra {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--pencil);
}
.panel-curso-extra:hover { color: var(--blue); }

/* ----- Sin cursos ----- */
.panel-vacio {
	background: var(--paper);
	border: 1px dashed var(--silver);
	border-radius: 18px;
	padding: 32px;
	max-width: 640px;
}

/* ----- Atajos ----- */
.panel-atajos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}
.panel-atajo {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 14px;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.panel-atajo:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--shadow-sm); }
.panel-atajo-ico {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--indigo-soft);
	color: var(--indigo-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.panel-atajo-ico.is-wa { background: var(--wa-green); color: #fff; }
.panel-atajo strong { display: block; font-size: 14.5px; font-weight: 700; }
.panel-atajo small { display: block; font-size: 12.5px; color: var(--pencil); margin-top: 2px; line-height: 1.4; }

/* ----- Mi cuenta (cambio de contraseña) -----
   Reutiliza .login-field / .input / .login-pass-toggle de la tarjeta de
   /acceso-alumnos/: son el mismo tipo de formulario y no tiene sentido
   duplicar estilos. Aquí solo va lo propio del bloque plegable. */
.panel-cuenta {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 14px;
	max-width: 560px;
	overflow: hidden;
}
.panel-cuenta[open] { border-color: var(--ink); }

.panel-cuenta-resumen {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	cursor: pointer;
	/* El triángulo por defecto no encaja con el resto de tarjetas del panel. */
	list-style: none;
}
.panel-cuenta-resumen::-webkit-details-marker { display: none; }
.panel-cuenta-resumen:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.panel-cuenta-resumen strong { display: block; font-size: 14.5px; font-weight: 700; }
.panel-cuenta-resumen small { display: block; font-size: 12.5px; color: var(--pencil); margin-top: 2px; line-height: 1.4; }

.panel-cuenta-cuerpo {
	padding: 20px 18px 22px;
	border-top: 1px solid var(--rule-light);
}

.panel-cuenta-ayuda {
	font-size: 12.5px;
	color: var(--pencil);
	line-height: 1.5;
	margin-top: 8px;
}

/* ----- Pie de sesión ----- */
.panel-sesion { font-size: 13.5px; color: var(--pencil); }
.panel-sesion strong { color: var(--graphite); font-weight: 600; }
.panel-sesion a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 720px) {
	.panel-continuar { padding: 28px 24px; gap: 28px; }
	.panel-continuar-accion { width: 100%; }
	.panel-continuar-accion .btn { width: 100%; justify-content: center; }
	.panel-cursos { gap: 20px; }
}