/* OPOS-IA — maquetación del tema. Layout, cabecera, pie, contenido y lector de temario. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--font-texto); font-size: 16px; line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accion); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--accion-fuerte); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
img, svg, video { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--tinta); margin: 0 0 var(--espacio-3); }
h1 { font-size: 36px; line-height: 40px; font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; margin-top: var(--espacio-6); }
h3 { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.01em; margin-top: var(--espacio-5); }
p, ul, ol { margin: 0 0 var(--espacio-4); }
hr { border: 0; border-top: 1px solid var(--borde); margin: var(--espacio-6) 0; }
blockquote { margin: var(--espacio-5) 0; padding: var(--espacio-4) var(--espacio-5); background: var(--fondo-hundido); border-radius: var(--radio-m); border-left: 0; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
pre { background: var(--fondo-hundido); padding: var(--espacio-4); border-radius: var(--radio-m); overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin: 0 0 var(--espacio-5); font-size: 15px; }
th, td { text-align: left; padding: var(--espacio-2) var(--espacio-3); border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-family: var(--font-texto); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); background: var(--fondo-hundido); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: var(--espacio-3); left: var(--espacio-3); z-index: 100; width: auto; height: auto; clip: auto; padding: var(--espacio-2) var(--espacio-4); background: var(--accion); color: var(--on-accion); border-radius: var(--radio-m); }

/* Contenedores */
.oi-contenedor { width: min(100% - 2 * var(--espacio-5), 1200px); margin-inline: auto; }
.oi-lectura { width: min(100% - 2 * var(--espacio-5), 720px); margin-inline: auto; }
.oi-rejilla { display: grid; gap: var(--espacio-5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.oi-seccion { padding-block: var(--espacio-7); }

/* Cabecera */
.oi-cabecera { background: var(--fondo); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 50; }
.oi-cabecera__barra { display: flex; align-items: center; gap: var(--espacio-5); min-height: 72px; }
.oi-logo { display: inline-flex; align-items: center; }
.oi-logo img, .oi-logo svg { height: 32px; width: auto; display: block; }
.oi-nav { margin-left: auto; display: flex; align-items: center; gap: var(--espacio-2); }
.oi-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--espacio-1); flex-wrap: wrap; }
.oi-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--espacio-3); border-radius: var(--radio-s); color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 15px; }
.oi-nav a:hover { background: var(--anil-suave); color: var(--accion-fuerte); }
.oi-nav .current-menu-item > a, .oi-nav .current_page_item > a { color: var(--accion); }
.oi-nav__boton { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: var(--radio-m); border: 2px solid var(--borde-fuerte); background: var(--fondo-superficie); color: var(--tinta); cursor: pointer; align-items: center; justify-content: center; }
.oi-nav__boton svg { width: 22px; height: 22px; }
@media (max-width: 760px) {
  .oi-nav__boton { display: inline-flex; }
  .oi-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--fondo-superficie); border-bottom: 1px solid var(--borde); padding: var(--espacio-3) var(--espacio-5); display: none; box-shadow: var(--sombra-s); }
  .oi-nav.es-abierta { display: block; }
  .oi-nav ul { flex-direction: column; }
  .oi-nav a { min-height: 44px; }
  .oi-nav .oi-boton { margin-top: var(--espacio-3); width: 100%; }
}

/* Portada */
.oi-portada { padding-block: var(--espacio-8) var(--espacio-7); }
.oi-portada__sobretitulo { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--naranja-texto); margin-bottom: var(--espacio-3); }
.oi-portada h1 { font-size: clamp(36px, 6vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; max-width: 14ch; margin-bottom: var(--espacio-4); }
.oi-portada p { font-size: 18px; line-height: 28px; color: var(--tinta-2); max-width: 52ch; }
.oi-portada__acciones { display: flex; gap: var(--espacio-3); flex-wrap: wrap; margin-top: var(--espacio-5); }
.oi-portada__diana { float: right; width: clamp(120px, 20vw, 220px); margin: 0 0 var(--espacio-4) var(--espacio-6); }
@media (max-width: 760px) { .oi-portada__diana { display: none; } }

/* Entradas y tarjetas de archivo */
.oi-entrada { margin-bottom: var(--espacio-5); }
.oi-entrada__meta { display: flex; gap: var(--espacio-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--espacio-3); font-size: 14px; line-height: 20px; color: var(--tinta-2); }
.oi-entrada h1 { font-size: clamp(30px, 4.5vw, 44px); line-height: 1.1; margin-bottom: var(--espacio-4); }
.oi-entrada__contenido { font-size: 18px; line-height: 28px; }
.oi-entrada__contenido > * + * { margin-top: var(--espacio-4); }
.oi-entrada__contenido h2 { font-size: 26px; line-height: 32px; margin-top: var(--espacio-7); padding-top: var(--espacio-5); border-top: 1px solid var(--borde); }
.oi-entrada__contenido img { border-radius: var(--radio-m); }
.oi-tarjeta a { color: inherit; text-decoration: none; }
.oi-tarjeta__titulo a:hover { color: var(--accion); }
.oi-tarjeta__pie { display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-3); margin-top: var(--espacio-4); font-size: 14px; color: var(--tinta-2); }
.oi-paginacion { display: flex; gap: var(--espacio-2); justify-content: center; margin-top: var(--espacio-6); flex-wrap: wrap; }
.oi-paginacion .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--espacio-3); border-radius: var(--radio-m); border: 2px solid var(--borde); text-decoration: none; color: var(--tinta); font-weight: 600; }
.oi-paginacion .page-numbers.current { background: var(--accion); color: var(--on-accion); border-color: var(--accion); }
.oi-paginacion a.page-numbers:hover { border-color: var(--accion); color: var(--accion); }

/* Formularios y búsqueda */
.oi-busqueda { display: flex; gap: var(--espacio-2); }
.oi-busqueda input[type="search"] { flex: 1; min-width: 0; }

/* Pie */
.oi-pie { border-top: 1px solid var(--borde); padding-block: var(--espacio-7) var(--espacio-6); margin-top: var(--espacio-8); color: var(--tinta-2); font-size: 14px; line-height: 20px; }
.oi-pie__barra { display: flex; flex-wrap: wrap; gap: var(--espacio-5); align-items: center; justify-content: space-between; }
.oi-pie ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--espacio-4); flex-wrap: wrap; }
.oi-pie a { color: var(--tinta-2); text-decoration: none; }
.oi-pie a:hover { color: var(--accion); }

/* Bloques de Gutenberg: alineaciones y colores de la paleta */
.alignwide { width: min(100% - 2 * var(--espacio-5), 1200px); margin-inline: auto; }
.alignfull { width: 100%; }
.has-naranja-color { color: var(--naranja-texto); } .has-naranja-background-color { background: var(--naranja); color: var(--on-naranja); }
.has-anil-color { color: var(--anil); } .has-anil-background-color { background: var(--anil); color: var(--on-anil); }
.has-tinta-color { color: var(--tinta); } .has-tinta-background-color { background: var(--tinta); color: var(--fondo); }
.has-naranja-suave-background-color { background: var(--naranja-suave); }
.has-anil-suave-background-color { background: var(--anil-suave); }
.has-fondo-background-color { background: var(--fondo); }
.has-fondo-superficie-background-color { background: var(--fondo-superficie); }

@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

/* Estilos de bloque "Tarjeta" para grupos de Gutenberg */
.is-style-oi-tarjeta { background: var(--fondo-superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); padding: var(--espacio-5); }
.is-style-oi-tarjeta-destacada { background: var(--naranja-suave); border: 1px solid var(--naranja); border-radius: var(--radio-l); padding: var(--espacio-5); }