/* ============================================================================
   estilos.css -- Hoja de estilos ÚNICA para TODA la web pública de alumnos/ (no
   incluye administrador/, que tiene su propio estilos.css independiente).

   Unifica lo que antes eran 3 ficheros distintos:
   - estilos-principal.css (index.php, aviso-legal.php, privacidad.php,
     cookies.php, contactar.php, oposicion-ja.php, oposicion-us.php)
   - formulario_ja/estilos-inscripcion.css
   - formulario_us/estilos-inscripcion.css (idéntico al anterior salvo el
     comentario de cabecera)
   en un solo fichero cargado por las 9 páginas públicas, para no mantener 2
   copias calcadas del CSS del formulario y no tener que recordar subir el
   cache-buster (?v=N) en 2 sitios cada vez que cambia ese CSS.

   El orden de las secciones de abajo respeta EXACTAMENTE el orden en que se
   cargaban antes los ficheros por separado (estilos-principal.css primero,
   estilos-inscripcion.css después) para que el resultado visual sea idéntico:
   las pocas clases que existían en ambos con valores distintos (.gap-2,
   .gap-3) siguen resolviéndose igual que antes en cada página, porque el CSS
   respeta el orden de aparición de las reglas cuando la especificidad es la
   misma.

   CSS propio, escrito a mano, sin CDN ni frameworks externos.
============================================================================ */

:root {
    --azul-primario: #4a90e2;
    --azul-oscuro: #2f6fb8;
    --azul-claro: #eaf2fc;
    --azul-pastel: #dce8fb;
    --azul-noche: #1e3a5f;
    --azul-tinta: #122a4d;
    --menta: #14b8a6;
    --menta-claro: #e3faf4;
    --ambar: #f5a623;
    --ambar-claro: #fff4e0;
    --texto-principal: #1f2937;
    --texto-secundario: #5b6572;
    --gris-fondo: #f4f6fb;
    --gris-borde: #e2e8f0;
    --rojo: #dc3545;
}

/* Variables adicionales, exclusivas de la sección "Formulario público de Inscripción y Reservas"
   (formulario_ja/index.php y formulario_us/index.php) más abajo -- mismo criterio de nombrado que las
   de arriba, sin pisar ninguna. */
:root {
    --borde: #dbe1e8;
    --fondo-pagina: #f4f6f9;
    --gris-50: #f9fafb;
    --gris-100: #f3f4f6;
    --gris-200: #e5e7eb;
    --gris-300: #d1d5db;
    --gris-400: #9ca3af;
    --gris-500: #6b7280;
    --gris-900: #111827;
    --rojo-claro-bg: #fdecea;
    --rojo-claro-borde: #f1aeb5;
    --rojo-oscuro: #8b1f2b;
    --rojo-hover: #c3212f;
    --verde: #16a34a;
    --verde-claro-bg: #f0fdf4;
    --verde-claro-borde: #86efac;
    --verde-hover-bg: #dcfce7;
    --verde-oscuro: #166534;

    /* Tema "azul" tomado directamente de la plantilla de referencia (Jotform, "Inscripción escolar",
       selector de tema azul): fondo de página en azul intenso y panel del formulario en azul muy pálido,
       en vez del blanco/gris neutro que usa el resto del sitio -- exclusivo de ese formulario público.
       El azul de fondo de página es el mismo --azul-tinta de arriba, que también usa el pie de página del
       resto del sitio, para que la franja exterior combine con el pie de página añadido. */
    --jotform-azul-pagina: #122a4d;
    --jotform-azul-panel: #dce8fb;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--texto-principal);
    background: #fff;
    line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; }

/* ---------- Contenedor y layout ---------- */
.contenedor { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.seccion { padding: 4.5rem 0; }
.seccion-chica { padding: 2.5rem 0; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.text-center { text-align: center; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Tipografía ---------- */
.epigrafe {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 800;
    font-size: .75rem;
    color: var(--azul-oscuro);
    margin-bottom: .6rem;
}
.epigrafe.claro { color: #cfe0fb; }
.titular {
    font-size: clamp(2rem, 4.6vw, 3.25rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.01em;
    color: var(--azul-tinta);
}
.titular.enorme { font-size: clamp(2.3rem, 6vw, 4rem); text-transform: uppercase; letter-spacing: -.02em; }
.titular.claro { color: #fff; }
h2.titular { margin-bottom: .75rem; }
.subtitular {
    font-size: 1.1rem;
    color: var(--texto-secundario);
    max-width: 42rem;
}
.subtitular.claro { color: #d7e4fa; }
.parrafo { color: var(--texto-secundario); font-size: .95rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem 1rem;
    border-radius: 999px;
    background: var(--azul-claro);
    color: var(--azul-oscuro);
    font-weight: 700;
    font-size: .78rem;
}

/* ---------- Botones estilo "Duolingo" en azul (borde inferior que se aplana al pulsar) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem 1.85rem;
    border-radius: 16px;
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: .02em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
    white-space: nowrap;
}
.btn-grande { padding: 1.15rem 2.25rem; font-size: 1rem; }
.btn-primario { background: var(--azul-primario); color: #fff; box-shadow: 0 4px 0 var(--azul-oscuro); }
.btn-primario:hover { background: #5c9ce6; }
.btn-primario:active { transform: translateY(4px); box-shadow: 0 0 0 var(--azul-oscuro); }
.btn-ambar { background: var(--ambar); color: #5a3900; box-shadow: 0 4px 0 #c8860f; }
.btn-ambar:hover { background: #f7b640; }
.btn-ambar:active { transform: translateY(4px); box-shadow: 0 0 0 #c8860f; }
.btn-secundario { background: #fff; color: var(--azul-oscuro); border: 2px solid var(--azul-pastel); box-shadow: 0 4px 0 var(--gris-borde); }
.btn-secundario:hover { border-color: var(--azul-primario); }
.btn-secundario:active { transform: translateY(4px); box-shadow: none; }
.btn-fantasma { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.45); }
.btn-fantasma:hover { background: rgba(255,255,255,.12); }
.btn-ancho { width: 100%; }
.btn[disabled], .btn.deshabilitado { opacity: .55; cursor: not-allowed; box-shadow: none !important; transform: none !important; }

/* ---------- Cabecera ---------- */
.topbar { background: var(--azul-tinta); color: #dfe9fb; font-size: .82rem; padding: .5rem 0; }
.topbar a { text-decoration: none; color: #fff; font-weight: 600; }
.topbar .contenedor { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.topbar-enlaces { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }

.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--gris-borde); }
/* Grid de 3 columnas (1fr auto 1fr): el contacto rápido y el logo/acciones ocupan siempre el mismo ancho
   (1fr cada uno), así el menú central queda perfectamente centrado sea cual sea el contenido de los lados. */
.cabecera .contenedor { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: .85rem; padding-bottom: .85rem; gap: 1rem; }
.cabecera-contacto-rapido { grid-column: 1; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-size: .82rem; font-weight: 600; justify-self: start; }
.cabecera-contacto-rapido a { text-decoration: none; color: var(--texto-secundario); }
.cabecera-contacto-rapido a:hover { color: var(--azul-primario); }
.marca { grid-column: 3; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-decoration: none; justify-self: end; }
.marca-logo { height: 40px; width: auto; display: block; flex-shrink: 0; }
.marca-texto { line-height: 1.15; }
.marca-eslogan { display: block; font-size: .72rem; color: var(--texto-secundario); font-weight: 600; }

/* grid-column fijo en las 3 celdas: si el menú se oculta en móvil (display:none más abajo), el grid ya no
   lo cuenta como elemento y el auto-flow reasignaría el logo/acciones a la columna 2 (centro) en vez de
   dejarlo en la 3 (derecha) -- fijando la columna de cada bloque, el contacto rápido y el logo se quedan
   siempre en sus sitios (izquierda/derecha) tanto en escritorio como en móvil. */
.nav-principal { grid-column: 2; display: none; align-items: center; gap: 1.75rem; justify-self: center; }
.nav-principal a { text-decoration: none; font-weight: 700; font-size: .92rem; color: var(--texto-principal); }
.nav-principal a:hover { color: var(--azul-primario); }

/* Iconos de las 5 opciones principales del menú (Inicio/Cursos TIC/Oposiciones/Plataforma/Contactar) --
   SVG propios en línea (mismo criterio que los de redes sociales del pie: nada de CDN ni de icon-fonts de
   terceros), coloreados con currentColor para heredar el color del enlace (incluido el :hover). */
.nav-icono { width: 1em; height: 1em; margin-right: .35rem; vertical-align: -2px; fill: currentColor; flex-shrink: 0; }
@media (min-width: 900px) { .nav-principal { display: flex; } }

/* Botón hamburguesa: solo visible por debajo de 900px, junto al logo (dentro de .cabecera-acciones).
   Alterna la clase .nav-principal-abierto sobre <nav class="nav-principal"> vía js/menu-movil.js. */
.nav-movil-boton {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid var(--gris-borde);
    background: #fff;
    color: var(--texto-principal);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.nav-movil-boton:hover { border-color: var(--azul-primario); color: var(--azul-primario); }
@media (max-width: 899px) {
    .nav-movil-boton { display: inline-flex; }

    /* Por debajo de 900px, el menú abierto se muestra como panel desplegable a todo el ancho bajo la
       cabecera (en vez del listado horizontal centrado de escritorio), y el desplegable "Oposiciones"
       pasa de tarjeta flotante a acordeón en línea, porque en móvil no hay :hover que lo sostenga --
       la apertura la controla el propio JS del menú (ver aria-expanded en menu-movil.js). */
    .nav-principal {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-bottom: 1px solid var(--gris-borde);
        box-shadow: 0 16px 32px rgba(18,42,77,.14);
        padding: .5rem 1.5rem 1rem;
        z-index: 55;
    }
    .nav-principal.nav-principal-abierto { display: flex; }
    .nav-principal a { padding: .75rem 0; border-bottom: 1px solid var(--gris-borde); }
    .nav-dropdown { width: 100%; }
    .nav-dropdown-disparador { width: 100%; justify-content: space-between; padding: .75rem 0; border-bottom: 1px solid var(--gris-borde); }
    /* Se abre igual que en escritorio (:hover/:focus-within sobre .nav-dropdown, ya definido más arriba
       -- al tocar el botón en pantalla táctil también recibe el foco), solo cambia a acordeón estático
       en vez de tarjeta flotante. */
    .nav-dropdown-menu { position: static; transform: none; padding-top: 0; }
    .nav-dropdown-menu-interior { border: none; box-shadow: none; border-radius: 0; padding: 0; min-width: 0; }
    .nav-dropdown-menu a { padding: .6rem 0 .6rem 1rem; border-radius: 0; }
    .nav-dropdown-menu a.nav-dropdown-vertodas { border-top: none; padding-top: .6rem; }
}

/* Desplegable de "Oposiciones" en el menú: sin JS -- se abre con :hover (ratón) y con :focus-within
   (tabulador/teclado, ya que el nav-principal solo es visible en escritorio a partir de 900px). El
   espaciado entre el botón y la tarjeta se resuelve con padding-top del propio contenedor hoverable
   (.nav-dropdown-menu), no con margin, para que no quede un hueco muerto que corte el :hover al bajar
   el ratón desde el botón hasta la tarjeta. */
.nav-dropdown { position: relative; }
.nav-dropdown-disparador { display: inline-flex; align-items: center; gap: .3rem; background: none; border: none; padding: 0; font: inherit; font-weight: 700; font-size: .92rem; color: var(--texto-principal); cursor: pointer; }
/* El botón ya separa sus hijos (icono/texto/flecha) con el "gap" de arriba, así que el margen propio del
   icono (pensado para los <a> normales del menú, que no son flex) sobra aquí y duplicaría el espaciado. */
.nav-dropdown-disparador .nav-icono { margin-right: 0; }
.nav-dropdown-disparador .nav-dropdown-flecha { font-size: .7rem; transition: transform .15s ease; }
.nav-dropdown:hover .nav-dropdown-disparador, .nav-dropdown:focus-within .nav-dropdown-disparador { color: var(--azul-primario); }
.nav-dropdown:hover .nav-dropdown-disparador .nav-dropdown-flecha, .nav-dropdown:focus-within .nav-dropdown-disparador .nav-dropdown-flecha { transform: rotate(180deg); }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: .75rem; z-index: 60; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu-interior { background: #fff; border: 1px solid var(--gris-borde); border-radius: 16px; box-shadow: 0 16px 40px rgba(18,42,77,.14); padding: .5rem; min-width: 250px; }
.nav-dropdown-menu a { display: block; padding: .6rem .8rem; border-radius: 10px; font-weight: 600; font-size: .88rem; color: var(--texto-principal); text-decoration: none; white-space: nowrap; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus { background: var(--gris-fondo); color: var(--azul-primario); }
.nav-dropdown-menu a.nav-dropdown-vertodas { margin-top: .3rem; border-top: 1px solid var(--gris-borde); border-radius: 0; padding-top: .75rem; color: var(--azul-primario); }

.cabecera-acciones { grid-column: 3; display: flex; align-items: center; gap: 1rem; justify-self: end; }

/* ---------- Hero ----------
   Fondo real de tecnologiayformacion.com (imagenestic/informatica_para_opositores.jpg), con una capa
   oscura de degradado encima para que el texto siga siendo legible -- por eso el titular/subtítulo pasan
   a su variante ".claro" (blanco) dentro del hero. */
.hero {
    padding: 3.25rem 0 2.75rem;
    background: var(--azul-tinta);
    position: relative;
    overflow: hidden;
}
.hero-fondo { position: absolute; inset: 0; z-index: 0; }
.hero-fondo img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(115deg, rgba(18,42,77,.95) 25%, rgba(74,144,226,.72));
}
.hero .contenedor { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } }
.hero-acciones { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }

/* ---------- Deslizador de 3 apartados del hero (Inicio / Cursos TIC / Oposiciones) ----------
   Las 3 diapositivas se apilan en la misma celda de una rejilla (grid-area: 1/1) -- así el
   contenedor toma automáticamente el alto de la diapositiva más alta, sin medir nada por JS.
   Solo la diapositiva ".activa" es visible/interactiva; el resto vive en opacidad 0 detrás.
   Transición: la que sale se desliza hacia fuera (derecha si avanzamos, izquierda si retrocedemos)
   mientras la siguiente entra desde el lado contrario -- gestionado por el <script> inline al final
   de index.php (no hay fichero .js aparte), porque hay que fijar el punto de partida de la que entra
   antes de animarla, algo que el CSS puro no puede hacer.
   Navegación: solo 2 flechas centradas en el borde izquierdo/derecho del carrusel (sin fila de
   puntos aparte) para no añadir alto extra. Sin librerías externas. */
.hero-slider { position: relative; }
.hero-slides {
    position: relative;
    display: grid;
    overflow: hidden;
    padding: 0 2.75rem;
}
.hero-slide {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(0);
    transition: transform .6s ease, opacity .6s ease;
    z-index: 1;
}
.hero-slide.activa { opacity: 1; pointer-events: auto; transform: translateX(0); z-index: 2; }
.hero-slide.saliendo-derecha  { transform: translateX(112%);  opacity: 0; z-index: 2; }
.hero-slide.saliendo-izquierda { transform: translateX(-112%); opacity: 0; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: opacity .3s ease; }
    .hero-slide.saliendo-derecha, .hero-slide.saliendo-izquierda { transform: translateX(0); }
}
.hero-slider-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    border: 2px solid rgba(255,255,255,.4);
    color: #fff;
    font-size: 1.3rem; line-height: 1;
    cursor: pointer;
    z-index: 5;
    transition: background-color .15s ease, transform .08s ease;
}
.hero-slider-flecha:hover { background: rgba(255,255,255,.28); }
.hero-slider-flecha:active { transform: translateY(-50%) scale(.92); }
.hero-slider-flecha--prev { left: 0; }
.hero-slider-flecha--next { right: 0; }
/* Sin overlay ni panel de ningún tipo: el fondo es exclusivamente la foto.
   El titular y el texto ("En la informática está la diferencia...") están
   integrados directamente en el propio fichero de imagen (texto en blanco 100% con
   un fino trazo oscuro solo en el contorno de las letras para que se lea con nitidez,
   sin ninguna capa de color por encima de la foto). h3/p se mantienen en el HTML pero
   ocultos visualmente (.sr-only) solo para lectores de pantalla/SEO.
   Las 3 fotos (una por diapositiva de hero-slider) están apiladas dentro y se funden
   entre sí con un fundido cruzado (opacidad) largo y suave -- deliberadamente distinto
   del deslizamiento horizontal que sigue usando el texto de la izquierda (.hero-slide):
   son 2 transiciones independientes, sincronizadas por el mismo JS pero con su propia
   animación cada una. La entrante se solapa brevemente sobre la saliente mientras ambas
   funden a la vez, en vez de deslizarse -- sin temporizador propio, todo vía CSS al
   añadir/quitar la clase "activa". */
.hero-mascota {
    background-color: var(--azul-primario);
    border-radius: 32px;
    box-shadow: 0 10px 0 var(--azul-oscuro);
    position: relative;
    overflow: hidden;
    min-height: 300px;
}
.hero-mascota-foto {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
    z-index: 1;
}
.hero-mascota-foto.activa { opacity: 1; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
    .hero-mascota-foto { transition: opacity .3s ease; }
}
/* Oculta visualmente pero mantiene accesible para lectores de pantalla (mismo
   patrón estándar que usa Bootstrap/WordPress para "sr-only"). */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Tira de estadísticas ---------- */
.stat-bloque {
    background: linear-gradient(135deg, var(--azul-claro), #fff);
    border: 1px solid var(--gris-borde);
    border-radius: 20px;
    padding: 1.5rem;
}
.stat-numero { font-size: 2.3rem; font-weight: 800; color: var(--azul-oscuro); line-height: 1; }
.stat-texto { margin-top: .4rem; font-size: .82rem; color: var(--texto-secundario); font-weight: 600; }

/* ---------- Tarjetas de oposición (estilo carrusel Semrush: fondo pálido + etiqueta + "+") ---------- */
.tarjeta-curso {
    scroll-margin-top: 100px; /* la cabecera es sticky -- que no tape la tarjeta al llegar desde el desplegable de Oposiciones */
    background: var(--gris-fondo);
    border: 1px solid var(--gris-borde);
    border-radius: 24px;
    padding: 1.85rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    height: 100%;
    overflow: hidden; /* recorta la imagen exactamente al radio de la tarjeta, sin huecos ni esquinas sin ajustar */
}
.tarjeta-curso:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(18,42,77,.12); border-color: var(--azul-pastel); }
/* Imagen real (tecnologiayformacion.com) que sangra fuera del padding de la tarjeta, sin tener que
   cambiar la estructura HTML del resto de la tarjeta. */
.tarjeta-curso-imagen {
    /* El reset global "img { max-width:100% }" (línea ~50) limitaba esta imagen
       a como mucho el 100% de su contenedor, anulando el "+3.7rem" de abajo y
       dejando un hueco a la derecha: se anula aquí explícitamente. */
    max-width: none;
    width: calc(100% + 3.7rem);
    margin: -1.85rem -1.85rem .2rem;
    height: 160px;
    object-fit: cover;
    border-radius: 24px 24px 0 0;
    flex-shrink: 0;
}
.tarjeta-curso-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.tarjeta-curso .etiqueta { text-transform: uppercase; font-size: .7rem; font-weight: 800; letter-spacing: .08em; color: var(--azul-oscuro); }
.tarjeta-curso .mas {
    width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--gris-borde);
    display: flex; align-items: center; justify-content: center; color: var(--azul-oscuro);
    flex-shrink: 0; background: #fff; font-weight: 800;
}
.tarjeta-curso h3 { font-size: 1.25rem; color: var(--azul-tinta); line-height: 1.25; }
.tarjeta-curso .datos { display: flex; flex-wrap: wrap; gap: .5rem; margin: .35rem 0; }
.tarjeta-curso .dato {
    font-size: .74rem; font-weight: 700; color: var(--texto-secundario);
    background: #fff; border: 1px solid var(--gris-borde); border-radius: 999px; padding: .28rem .7rem;
}
.tarjeta-curso .barra-plazas { height: 8px; border-radius: 999px; background: var(--gris-borde); overflow: hidden; margin-top: .25rem; }
.tarjeta-curso .barra-plazas > span { display: block; height: 100%; background: var(--menta); border-radius: 999px; }
.tarjeta-curso.proxima { opacity: .82; }
.tarjeta-curso.proxima .etiqueta { color: var(--texto-secundario); }

/* ---------- Bento (bloques grandes de color, estilo Semrush) ---------- */
.bento { border-radius: 30px; padding: 2.75rem; position: relative; overflow: hidden; height: 100%; }
.bento::after {
    content: "";
    position: absolute; top: -40%; right: -20%; width: 65%; height: 190%;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.13) 0 2px, transparent 2px 16px);
    pointer-events: none;
}
.bento-azul { background: linear-gradient(140deg, var(--azul-primario), var(--azul-tinta)); color: #fff; }
.bento-claro { background: var(--azul-claro); color: var(--texto-principal); }
.bento-claro::after { background: repeating-linear-gradient(45deg, rgba(74,144,226,.12) 0 2px, transparent 2px 16px); }
.bento h3 { font-size: 1.6rem; margin-bottom: .6rem; position: relative; line-height: 1.2; }
.bento p { position: relative; font-size: .95rem; }
.bento-azul p { color: #dfe9fb; }
.bento-claro p { color: var(--texto-secundario); }
.bento .btn { margin-top: 1.5rem; position: relative; }
.lista-metodo { position: relative; margin-top: 1.25rem; display: flex; flex-direction: column; gap: .65rem; }
.lista-metodo li { display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; }
.lista-metodo .marca-check {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800;
}
.bento-azul .marca-check { background: rgba(255,255,255,.18); color: #fff; }
.bento-claro .marca-check { background: var(--azul-primario); color: #fff; }

/* ---------- Franja imagen + texto (formación presencial, con fotos reales) ---------- */
.franja-imagen-texto { display: grid; grid-template-columns: 1fr; gap: 2.25rem; align-items: center; }
@media (min-width: 900px) { .franja-imagen-texto { grid-template-columns: 1fr 1fr; } }
.franja-imagen-texto img {
    width: 100%; height: 320px; object-fit: cover;
    border-radius: 26px;
    box-shadow: 0 16px 34px rgba(18,42,77,.14);
}

/* Bloque "Clases presenciales... el día del examen" de Método de trabajo: foto de fondo
   (metodo_de_trabajo.jpg), con los márgenes habituales de .contenedor (no a todo el ancho
   de la página). Degradado oscuro sobre la foto para que el listado en blanco se lea con nitidez. */
.franja-metodo-fondo {
    background-image: linear-gradient(100deg, rgba(18,42,77,.92) 25%, rgba(18,42,77,.6)), url('js/img/metodo_de_trabajo.jpg?v=1');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    padding: 3rem 2rem;
}
.franja-metodo-fondo .lista-metodo li,
.franja-metodo-fondo .lista-metodo strong { color: #fff; }
.franja-metodo-titulo { color: #fff; font-size: 1.5rem; margin-bottom: 1.25rem; }

/* ---------- Tarjetas pequeñas "por qué elegirnos" ---------- */
.tarjeta-mini {
    background: #fff;
    border: 1px solid var(--gris-borde);
    border-radius: 20px;
    padding: 1.75rem;
    text-align: left;
}
.tarjeta-mini .icono {
    width: 46px; height: 46px; border-radius: 14px;
    background: var(--menta-claro); color: var(--menta);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin-bottom: 1rem;
}
.tarjeta-mini h4 { font-size: 1.02rem; margin-bottom: .4rem; color: var(--azul-tinta); }
.tarjeta-mini p { font-size: .86rem; color: var(--texto-secundario); }

/* ---------- Reseñas de Google (sección "Por qué elegirnos") ---------- */
.resenas-google-cabecera { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .95rem; }
.resenas-estrellas { color: var(--ambar); font-size: 1rem; letter-spacing: .1em; margin-right: .4rem; }
.resenas-google .tarjeta-mini .resenas-estrellas { display: block; margin-bottom: .75rem; }
.resenas-google .tarjeta-mini p { font-style: italic; }
.resenas-autor { display: block; margin-top: .75rem; font-size: .82rem; font-weight: 700; color: var(--azul-tinta); }
.resenas-fecha { font-weight: 400; color: var(--texto-secundario); }

/* Carrusel horizontal: todas las tarjetas en fila. El avance es automático (ver <script> al final de la
   página, de 1/2/3 en 1/2/3 según el tamaño de pantalla, y cíclico), así que no hace falta ni barra de
   scroll ni flechas visibles -- se oculta la barra en los 3 motores pero el desplazamiento (scrollLeft) lo
   sigue controlando el temporizador. */
.resenas-carrusel {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Edge/IE antiguos */
}
/* Nº de tarjetas visibles a la vez según el tamaño de pantalla (mismos números que calcula
   porPaginaActual() en el <script> al final de la página, para que el temporizador avance exactamente lo
   que se ve):
   - Móvil (<600px): 1 tarjeta, ocupando casi todo el ancho visible para que se lea bien.
   - Tableta en vertical (600px-1023px): 2 tarjetas completas.
   - Tableta en horizontal y ordenador (>=1024px): 3 tarjetas completas.
   El ancho de cada tarjeta se calcula a partir del contenedor menos los huecos correspondientes. */
.resenas-carrusel .tarjeta-mini { flex: 0 0 85%; scroll-snap-align: start; }
@media (min-width: 600px) and (max-width: 1023px) {
    .resenas-carrusel .tarjeta-mini { flex: 0 0 calc((100% - 1 * 1.25rem) / 2); }
}
@media (min-width: 1024px) {
    .resenas-carrusel .tarjeta-mini { flex: 0 0 calc((100% - 2 * 1.25rem) / 3); }
}
.resenas-carrusel::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge modernos */

/* ---------- Contacto / CTA final ---------- */
.franja-contacto {
    background: var(--azul-tinta);
    color: #fff;
    border-radius: 32px;
    padding: 3rem;
    text-align: center;
}
.franja-contacto .titular { color: #fff; }
.contacto-datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem; margin: 1.5rem 0 2rem; }
.contacto-dato { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: #dfe9fb; text-decoration: none; font-size: .95rem; }
.contacto-dato:hover { color: #fff; }

/* ---------- Footer ---------- */
footer { background: var(--azul-tinta); color: #b9caea; padding: 3.5rem 0 2rem; margin-top: 2rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.25rem; padding-bottom: 2.25rem; border-bottom: 1px solid rgba(255,255,255,.12); }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
footer h5 { color: #fff; font-size: .9rem; margin-bottom: .9rem; letter-spacing: .04em; text-transform: uppercase; }
footer ul { display: flex; flex-direction: column; gap: .55rem; }
.footer-contacto-lista { gap: 0; }
.footer-sello-calidad { display: inline-block; margin-top: .75rem; line-height: 0; }
footer a { color: #b9caea; text-decoration: none; font-size: .88rem; }
footer a:hover { color: #fff; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; font-size: .8rem; color: #93a7cc; }
.footer-legal a { color: #93a7cc; }
.footer-legal a:hover { color: #fff; }
.footer-legal-enlaces { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.footer-legal-enlaces .enlace-admin { opacity: .75; }
.footer-legal-enlaces .enlace-admin:hover { opacity: 1; }

/* ---------- Redes sociales (pie de página) ---------- */
.redes-sociales { display: flex; gap: .65rem; margin-top: 1.1rem; }
.redes-sociales a {
    width: 38px; height: 38px; border-radius: 999px;
    background: rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center;
    color: #fff; text-decoration: none;
    transition: background-color .15s ease, transform .1s ease;
}
.redes-sociales a:hover { background: var(--azul-primario); transform: translateY(-2px); }
.redes-sociales svg { width: 17px; height: 17px; fill: currentColor; }

/* ---------- Banner de cookies ---------- */
.cookiebar {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200;
    background: #fff; color: var(--texto-principal);
    border-radius: 20px; border: 1px solid var(--gris-borde);
    box-shadow: 0 18px 45px rgba(18,42,77,.22);
    padding: 1.25rem 1.5rem;
    display: none;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 900px;
    margin: 0 auto;
}
.cookiebar.visible { display: flex; }
.cookiebar p { font-size: .85rem; color: var(--texto-secundario); max-width: 40rem; }
.cookiebar p a { color: var(--azul-primario); font-weight: 700; text-decoration: underline; }
.cookiebar-botones { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookiebar-botones .btn { padding: .7rem 1.2rem; font-size: .82rem; }

/* ---------- Formulario de contacto (alumnos/contactar.php) ---------- */
.franja-contacto-cabecera { text-align: center; max-width: 42rem; margin: 0 auto 3rem; }
.tarjeta-formulario {
    background: #fff;
    border: 1px solid var(--gris-borde);
    border-radius: 28px;
    padding: 2.5rem;
    box-shadow: 0 16px 40px rgba(18,42,77,.08);
}
.form-contacto { display: flex; flex-direction: column; gap: 1.35rem; }
.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo label { font-weight: 700; font-size: .86rem; color: var(--texto-principal); }
.campo .opcional { font-weight: 500; color: var(--texto-secundario); }
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="number"],
.campo select,
.campo textarea {
    padding: .85rem 1rem;
    border-radius: 12px;
    border: 1.5px solid var(--gris-borde);
    font-family: inherit;
    font-size: .92rem;
    color: var(--texto-principal);
    background: #fff;
    width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--azul-primario);
    box-shadow: 0 0 0 3px rgba(74,144,226,.18);
}
.campo textarea { resize: vertical; min-height: 130px; }
.campo-fila { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.campo-fila > .campo { flex: 1 1 220px; }
.check-privacidad { display: flex; align-items: flex-start; gap: .6rem; font-size: .84rem; color: var(--texto-secundario); }
.check-privacidad input { margin-top: .2rem; flex-shrink: 0; }
.check-privacidad a { color: var(--azul-primario); font-weight: 700; text-decoration: underline; }
.antibot-caja {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: var(--gris-fondo); border: 1px solid var(--gris-borde);
    border-radius: 14px; padding: 1rem 1.25rem;
}
.antibot-caja label { font-weight: 700; font-size: .86rem; }
.antibot-caja input { width: 90px; text-align: center; font-weight: 800; font-size: 1.05rem; padding: .55rem; border-radius: 10px; border: 1.5px solid var(--gris-borde); }

.aviso-flash { padding: 1rem 1.25rem; border-radius: 14px; font-size: .9rem; font-weight: 600; margin-bottom: 1.75rem; }
.aviso-flash.exito { background: var(--menta-claro); color: #0d6b5c; border: 1px solid #a8ede0; }
.aviso-flash.error { background: #fdecea; color: #8b1f2b; border: 1px solid #f1aeb5; }
.campo-error { display: none; font-size: .78rem; color: #c0392b; font-weight: 600; }
.campo input.invalido, .campo select.invalido { border-color: #c0392b; }

/* ---------- Bloque "Contactar con Nosotros" (¿Dónde estamos? / Cómo llegar / Hospedarse / Transporte) ---------- */
.contacto-bloques-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; }
@media (min-width: 780px) { .contacto-bloques-grid { grid-template-columns: repeat(4, 1fr); } }
.contacto-bloque h3 { font-size: 1rem; color: var(--azul-oscuro); margin-bottom: .75rem; }
.contacto-bloque p, .contacto-bloque li { font-size: .88rem; color: var(--texto-secundario); margin-bottom: .5rem; }
.contacto-bloque-alrededor { text-align: center; }
.contacto-bloque-alrededor h3 { font-size: 1rem; color: var(--azul-oscuro); margin-bottom: 1rem; }
.contacto-bloque-alrededor img { display: block; margin: 0 auto; border-radius: 16px; max-width: 98px; width: 100%; height: auto; }
.contacto-bloque ul { list-style: none; }
.contacto-bloque a { color: var(--azul-primario); font-weight: 700; text-decoration: none; }
.contacto-bloque a:hover { text-decoration: underline; }
.contacto-bloque-transporte { margin-bottom: 3rem; }
.contacto-bloque-transporte h3 { font-size: 1rem; color: var(--azul-oscuro); margin-bottom: .75rem; }
.contacto-bloque-transporte p { font-size: .88rem; color: var(--texto-secundario); margin-bottom: .5rem; }
.contacto-bloque-transporte a { color: var(--azul-primario); font-weight: 700; text-decoration: none; }
.contacto-bloque-transporte a:hover { text-decoration: underline; }

/* Fondo fotográfico reutilizable, misma foto (oposiciones.jpg) sin overlay -- el texto que se apoya
   encima ya es suficientemente oscuro/legible por sí mismo. Usada en la sección "Las leyes" de
   oposicion-us.php y en "Por qué elegirnos" de index.php. */
.seccion-fondo-leyes {
    background-image: url('js/img/oposiciones.jpg?v=1');
    background-size: cover;
    background-position: center;
}

/* Fondo fotográfico del titular de oposicion-us.php (solo epígrafe + h1, no el subtítulo). */
.oposicion-us-fondo {
    background-image: url('js/img/fondo-opous.jpg?v=2');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    padding: 2.5rem 2rem;
}
.oposicion-us-fondo .epigrafe { display: block; text-align: right; }

.oposicion-ja-fondo {
    background-image: url('js/img/opoja.jpg?v=1');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    padding: 2.5rem 2rem;
}
.oposicion-ja-fondo .epigrafe { display: block; text-align: right; }

/* Fondo fotográfico del titular de oposicion-as.php. */
.oposicion-as-fondo {
    background-image: url('js/img/opoas.jpg?v=1');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    padding: 2.5rem 2rem;
}
.oposicion-as-fondo .epigrafe { display: block; text-align: right; }

/* Fondo fotográfico del titular de oposicion-age.php (vendorizada desde img/opoage.jpg, misma carpeta de
   origen que las fotos horneadas del hero -- ver img/iconos.png). */
.oposicion-age-fondo {
    background-image: url('js/img/opoage.jpg?v=2');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    padding: 2.5rem 2rem;
}
.oposicion-age-fondo .epigrafe { display: block; text-align: right; }

/* ---------- Radios "Quiero recibir información" / "Quiero reservar plaza" ---------- */
.opciones-radio { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.opciones-radio label { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--texto-principal); cursor: pointer; }
.opciones-radio input { accent-color: var(--azul-primario); width: 18px; height: 18px; }

/* ---------- Bloque "Estamos en Google Maps" ---------- */
.mapa-tarjeta { border-radius: 24px; overflow: hidden; border: 1px solid var(--gris-borde); box-shadow: 0 16px 40px rgba(18,42,77,.08); }
.mapa-tarjeta iframe { display: block; width: 100%; height: 380px; border: none; }
.mapa-tarjeta-enlace { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem; background: #fff; font-weight: 700; color: var(--azul-primario); text-decoration: none; font-size: .92rem; }
.mapa-tarjeta-enlace:hover { background: var(--gris-fondo); }

.contacto-info-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
@media (min-width: 720px) { .contacto-info-grid { grid-template-columns: repeat(3, 1fr); } }
.contacto-info-item {
    background: var(--gris-fondo); border: 1px solid var(--gris-borde);
    border-radius: 20px; padding: 1.5rem; text-align: center;
}
.contacto-info-item .icono {
    width: 44px; height: 44px; border-radius: 14px; margin: 0 auto .8rem;
    background: var(--azul-claro); color: var(--azul-oscuro);
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.contacto-info-item a, .contacto-info-item p { font-size: .88rem; color: var(--texto-secundario); text-decoration: none; }
.contacto-info-item a { font-weight: 700; color: var(--azul-oscuro); }

/* ---------- Páginas legales (Aviso Legal / Privacidad / Cookies) ---------- */
.pagina-legal { padding: 3rem 0 5rem; }
.pagina-legal .contenedor { max-width: 860px; }
.pagina-legal h1 { font-size: 2rem; color: var(--azul-tinta); margin-bottom: .5rem; }
.pagina-legal .actualizado { color: var(--texto-secundario); font-size: .85rem; margin-bottom: 2.25rem; }
.pagina-legal h2 { font-size: 1.2rem; color: var(--azul-tinta); margin: 2rem 0 .75rem; }
.pagina-legal p, .pagina-legal li { color: var(--texto-secundario); font-size: .95rem; margin-bottom: .75rem; }
.pagina-legal ul { list-style: disc; padding-left: 1.4rem; }
.pagina-legal ul li { margin-bottom: .4rem; }
.pagina-legal strong { color: var(--texto-principal); }
.pagina-legal a { color: var(--azul-primario); font-weight: 700; }

/* ---------- Responsive fino ---------- */
@media (max-width: 719px) {
    .seccion { padding: 3rem 0; }
    .franja-contacto { padding: 2.25rem 1.5rem; border-radius: 24px; }
    .bento { padding: 2rem; border-radius: 24px; }
    .topbar-enlaces { justify-content: center; width: 100%; }
}

/* ---------- Aviso de cookies (banner inferior, ver js/aviso-cookies.js) ---------- */
.aviso-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: #fff;
    border-top: 1px solid var(--gris-borde);
    box-shadow: 0 -8px 24px rgba(18,42,77,.14);
    padding: 1rem 1.5rem;
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies-contenedor {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.aviso-cookies-texto {
    margin: 0;
    font-size: .9rem;
    color: var(--texto-principal);
    flex: 1 1 320px;
}
.aviso-cookies-texto a { color: var(--azul-oscuro); font-weight: 700; }
.aviso-cookies-botones { display: flex; gap: .75rem; flex-shrink: 0; }
@media (max-width: 600px) {
    .aviso-cookies { padding: 1rem; }
    .aviso-cookies-contenedor { flex-direction: column; align-items: stretch; }
    .aviso-cookies-botones .btn { flex: 1; }
}


/* ============================================================================
   Sección: Formulario público de Inscripción y Reservas
   (formulario_ja/index.php y formulario_us/index.php)

   Sustituye a la carga de Tailwind CSS por CDN (https://cdn.tailwindcss.com)
   y a la tipografía Inter de Google Fonts: ambas se cargaban desde fuera del
   propio dominio, lo que además de depender de tener Internet exigía que la
   Content-Security-Policy del servidor autorizase esos 2 dominios externos
   -- justo lo que causó que la página se viera sin estilos ni colores
   (los iconos SVG, dimensionados solo con clases de Tailwind, caían al
   tamaño por defecto del navegador) cuando esa CSP no coincidía con la que
   entonces imponía el .htaccess de esas carpetas. Esos .htaccess ya no fijan
   ninguna CSP a propósito (ver su propio comentario), precisamente para que
   esto no pueda volver a pasar.

   Esta sección NO es una librería de terceros: es CSS propio, escrito a mano,
   que reproduce exactamente las mismas clases de utilidad (nombradas igual
   que las de Tailwind) que ya usaba el HTML/JS/PHP de ambos formularios. Así
   no ha hecho falta tocar ni una sola línea de su lógica (la validación de
   DNI/NIE, el anti-bot, el CSRF, el guardado en inscritos.txt, el sondeo AJAX
   de aforos, los mensajes "toast"...): todo lo que ese código hace es
   añadir/quitar estas mismas clases, y aquí ya existen con el mismo nombre y
   el mismo efecto visual que tenían con Tailwind cargado.

   La paleta de color está adaptada a la ya usada en el resto del sitio (el
   azul #4a90e2), en vez del morado "indigo" de Tailwind, para que esta
   sección se sienta coherente con el resto -- sin tocar qué clases se
   aplican ni cuándo, solo qué color hay detrás de cada una.
============================================================================ */

/* Igual que en administrador/estilos.css: visibilidad constante de los controles nativos de number */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button !important;
    opacity: 1 !important;
    margin: 0 !important;
}
input[type=number] { -moz-appearance: number-input !important; }

/* Animaciones de los toasts (idénticas a las originales) */
.toast-enter { animation: toastIn 0.3s ease-out forwards; }
.toast-exit { animation: toastOut 0.3s ease-in forwards; }
@keyframes toastIn { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }

/* Spinner de "enviando..." del botón de envío */
.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------- Display / layout ---------- */
.block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.col-span-1 { grid-column: span 1 / span 1; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.bottom-5 { bottom: 1.25rem; }
.right-5 { right: 1.25rem; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.pointer-events-none { pointer-events: none; }
.top-0 { top: 0; }
.right-0 { right: 0; }

/* ---------- Espaciado ---------- */
.p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.pb-4 { padding-bottom: 1rem; }
.pt-2 { padding-top: .5rem; }
.pt-5 { padding-top: 1.25rem; }
.mt-0\.5 { margin-top: .125rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.ml-3 { margin-left: .75rem; }
.ml-auto { margin-left: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.gap-1\.5 { gap: .375rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.space-y-1 > * + * { margin-top: .25rem; }
.space-y-1\.5 > * + * { margin-top: .375rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* ---------- Tamaños ---------- */
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-28 { width: 7rem; }
.w-full { width: 100%; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-48 { height: 12rem; }
.h-full { height: 100%; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-w-4xl { max-width: 56rem; }
.max-w-sm { max-width: 24rem; }
.object-cover { object-fit: cover; }

/* ---------- Fondos y degradados ---------- */
.bg-white { background-color: #fff; }
.bg-gray-50 { background-color: var(--gris-50); }
.bg-gray-100 { background-color: var(--gris-100); }
.bg-slate-50 { background-color: var(--fondo-pagina); }
.bg-slate-900 { background-color: #0f172a; }
.bg-indigo-100 { background-color: var(--azul-claro); }
.bg-indigo-600 { background-color: var(--azul-primario); }
.bg-red-50 { background-color: var(--rojo-claro-bg); }
.bg-green-50 { background-color: var(--verde-claro-bg); }
.bg-blue-50 { background-color: #eff6ff; }
.bg-green-600 { background-color: var(--verde); }
.bg-red-600 { background-color: var(--rojo); }
.bg-jotform-pagina { background-color: var(--jotform-azul-pagina); }
.bg-jotform-panel { background-color: var(--jotform-azul-panel); }
/* El fondo de página (arriba) y el pie de página compartido (abajo) usan ahora el mismo azul, así que sin
   esta línea blanca no se distinguiría dónde termina uno y empieza el otro. */
.bg-jotform-pagina footer { border-top: 1px solid #fff; }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--from-color, var(--fondo-pagina)), var(--to-color, var(--azul-claro))); }
.from-slate-100 { --from-color: #f1f5f9; }
.to-indigo-50 { --to-color: var(--azul-claro); }
.bg-opacity-75 { background-color: rgba(15, 23, 42, .75); }

/* ---------- Colores de texto ---------- */
.text-white { color: #fff; }
.text-white\/80 { color: rgba(255, 255, 255, .8); }
.text-indigo-100 { color: #dbe7fb; }
.text-indigo-500 { color: var(--azul-primario); }
.text-indigo-600 { color: var(--azul-primario); }
.text-indigo-900 { color: var(--azul-noche); }
.text-slate-400 { color: var(--gris-400); }
.text-slate-500 { color: var(--texto-secundario); }
.text-slate-600 { color: var(--texto-secundario); }
.text-slate-700 { color: var(--texto-principal); }
.text-slate-800 { color: var(--texto-principal); }
.text-gray-400 { color: var(--gris-400); }
.text-gray-500 { color: var(--gris-500); }
.text-gray-900 { color: var(--gris-900); }
.text-red-500 { color: var(--rojo); }
.text-red-600 { color: var(--rojo); }
.text-red-700 { color: var(--rojo-hover); }
.text-red-800 { color: var(--rojo-oscuro); }
.text-green-800 { color: var(--verde-oscuro); }
.text-azul-noche { color: var(--azul-noche); }

/* ---------- Bordes ---------- */
.border { border: 1px solid var(--borde); }
.border-b { border-bottom: 1px solid var(--borde); }
.border-l-4 { border-left: 4px solid var(--rojo); }
.border-4 { border-width: 4px; border-style: solid; }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: var(--borde); }
.border-slate-300 { border-color: #cbd5e1; }
.border-slate-950 { border-color: #020617; }
.border-gray-200 { border-color: var(--gris-200); }
.border-green-300 { border-color: var(--verde-claro-borde); }
.border-red-300 { border-color: var(--rojo-claro-borde); }
.border-red-500 { border-color: var(--rojo); }
.border-transparent { border-color: transparent; }
.ring-1 { box-shadow: 0 0 0 1px var(--ring-color, var(--gris-300)); }
.ring-gray-300 { --ring-color: var(--gris-300); }
.ring-inset { }

/* ---------- Tipografía ---------- */
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-md { font-size: 1rem; line-height: 1.5rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-xs { font-size: .75rem; line-height: 1rem; }
.text-\[10px\] { font-size: 10px; line-height: 1rem; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.leading-6 { line-height: 1.5rem; }
.tracking-tight { letter-spacing: -0.025em; }
.uppercase { text-transform: uppercase; }
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }

/* ---------- Radios y sombras ---------- */
.rounded { border-radius: .25rem; }
.rounded-lg { border-radius: .5rem; }
.rounded-xl { border-radius: .75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.rounded-r-lg { border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; }
.shadow-sm { box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.shadow-lg { box-shadow: 0 10px 20px rgba(15, 23, 42, .12); }
.shadow-xl { box-shadow: 0 14px 34px rgba(15, 23, 42, .18); }
.shadow-indigo-200 { box-shadow: 0 10px 20px rgba(74, 144, 226, .25); }

/* ---------- Transiciones / interacción ---------- */
.transition-all { transition: all .2s ease; }
.transition-colors { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.transition-opacity { transition: opacity .2s ease; }
.duration-200 { transition-duration: .2s; }
.transform { }
.active\:scale-\[0\.99\]:active { transform: scale(0.99); }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-60 { opacity: .6; }
.opacity-75 { opacity: .75; }
.opacity-85 { opacity: .85; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.resize-none { resize: none; }
.disabled\:opacity-70:disabled { opacity: .7; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* ---------- Foco / hover ---------- */
.focus\:ring-2:focus, .focus\:ring-indigo-500:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, .25);
}
.focus\:border-indigo-500:focus { border-color: var(--azul-primario); }
.hover\:bg-gray-50:hover { background-color: var(--gris-50); }
.hover\:bg-indigo-500:hover { background-color: var(--azul-primario); }
.hover\:bg-indigo-700:hover { background-color: var(--azul-oscuro); }
.hover\:bg-green-100:hover { background-color: var(--verde-hover-bg); }
.hover\:bg-red-100:hover { background-color: #fbdcdc; }
.hover\:text-white:hover { color: #fff; }

/* ---------- Selección de horario (peer / peer-checked) ----------
   .peer es el <input type="radio"> oculto (sr-only) dentro de cada tarjeta de horario; el resto de
   elementos de la tarjeta son sus hermanos posteriores en el DOM (mismo <label>), así que el selector de
   hermano general ~ funciona igual que con Tailwind, sin necesitar nada especial. */
.peer { }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.peer:checked ~ .peer-checked\:border-current { border-color: currentColor; }
/* peer-checked:ring-2 / peer-checked:ring-*-500 se aplican en el propio <label>, no en un hermano posterior
   del input -- con Tailwind real tampoco llegaban a producir ningún efecto visual (el input es hijo del
   label, no un hermano anterior), así que no hace falta reproducir nada aquí: es exactamente el mismo
   comportamiento (sin anillo extra) que ya tenía la página con Tailwind cargado. */

/* ---------- Cabeceras de sección tipo "formulario clásico" ----------
   Mismo patrón visual que la plantilla de referencia (Jotform, tema azul): título en negrita, color azul
   marino (no negro), alineado a la izquierda, con una línea divisoria fina y sutil debajo -- no una barra
   de color gruesa. Reutilizado tal cual en los bloques del formulario ("TEMARIO...", "Datos del
   Solicitante", "Seleccione un Horario", "Verificación y Confirmación") para que se vean como secciones
   consistentes de un mismo documento, igual que "Datos de estudiante"/"Información sobre la residencia..."
   en la plantilla de referencia. */
.form-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--azul-noche);
    padding-bottom: .6rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid rgba(30, 58, 95, .18);
}

/* ---------- Fichas de curso TIC (curso-informatica-basica.php, curso-word.php y futuras fichas) ----------
   Mismo patrón que las fichas de oposición (.oposicion-us-fondo, etc.): cada curso tiene su propia clase
   -fondo con su propia foto de cabecera detrás del epígrafe + h1 (no se comparte una única .curso-fondo
   entre cursos, igual que cada oposición tiene la suya). Aquí además hay un layout a 2 columnas (contenido
   + resumen de matrícula, que en el sitio de origen aparece como una tarjeta fija con precio/checklist/
   botón) que no existía todavía en el sitio. */
.curso-informatica-basica-fondo {
    background-image: url('js/img/curso_informatica_basica_cabecera.jpg?v=1');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    padding: 2.5rem 2rem;
}
.curso-informatica-basica-fondo .epigrafe { display: block; text-align: right; }

.curso-word-fondo {
    background-image: url('js/img/curso_word_cabecera.jpg?v=2');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    padding: 2.5rem 2rem;
}
.curso-word-fondo .epigrafe { display: block; text-align: right; }

.curso-excel-fondo {
    background-image: url('js/img/curso_excel_cabecera.jpg?v=1');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    padding: 2.5rem 2rem;
}
.curso-excel-fondo .epigrafe { display: block; text-align: right; }

.curso-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 980px) {
    .curso-layout { grid-template-columns: 2fr 1fr; }
}

.curso-bloque { margin-bottom: 2.25rem; }
.curso-bloque:last-child { margin-bottom: 0; }
.curso-bloque h3 {
    display: flex; align-items: center; gap: .55rem;
    font-size: 1.15rem; color: var(--azul-oscuro); margin-bottom: .75rem;
}
.curso-bloque ul.lista-metodo li .marca-check { background: var(--azul-primario); color: #fff; }

/* Bloques del Temario (Fundamentos / Sistema Operativo / Windows / La Información...), cada uno con su
   lista de contenidos; el icono de ordenador solo se muestra en los puntos que también lo llevan en la
   página de origen (los relacionados con el manejo directo de archivos/carpetas en Windows). */
.curso-temario-bloque { margin-top: 1.5rem; }
.curso-temario-bloque:first-child { margin-top: 0; }
.curso-temario-bloque h4 {
    font-size: .95rem; font-weight: 800; color: var(--azul-tinta);
    text-transform: uppercase; letter-spacing: .03em;
    padding-bottom: .4rem; margin-bottom: .6rem;
    border-bottom: 1px solid var(--gris-borde);
}
.curso-temario-lista { columns: 1; gap: 2rem; }
@media (min-width: 700px) { .curso-temario-lista { columns: 2; } }
.curso-temario-lista li { font-size: .9rem; color: var(--texto-secundario); margin-bottom: .5rem; break-inside: avoid; display: flex; align-items: center; gap: .4rem; }
.curso-temario-lista .icono-ordenador { flex-shrink: 0; font-size: .95rem; }

/* Tarjeta de resumen/matrícula, columna derecha en escritorio (sticky para que acompañe al scroll del
   temario) y a continuación del contenido en móvil. */
.curso-resumen {
    background: #fff;
    border: 1px solid var(--gris-borde);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 16px 40px rgba(18,42,77,.08);
}
@media (min-width: 980px) { .curso-resumen { position: sticky; top: 1.5rem; } }
.curso-resumen img { width: 100%; height: auto; border-radius: 16px; margin-bottom: 1.5rem; }
.curso-resumen .lista-metodo { margin-top: 0; margin-bottom: 1.5rem; }
.curso-resumen .lista-metodo .marca-check { background: var(--menta-claro); color: var(--menta); }
.curso-resumen .curso-matricula {
    text-align: center; text-transform: uppercase; font-weight: 800; letter-spacing: .06em;
    font-size: .8rem; color: var(--menta); margin-bottom: .3rem;
}
.curso-resumen .curso-precio { text-align: center; font-size: 2rem; font-weight: 800; color: var(--azul-tinta); margin-bottom: 1rem; }
.curso-resumen .curso-nota-fundae { font-size: .82rem; color: var(--texto-secundario); text-align: center; margin-bottom: 1.5rem; }
.curso-resumen .btn { width: 100%; text-align: center; }

/* ---------- Responsive: sm (>=640px) / md (>=768px) ---------- */
@media (min-width: 640px) {
    .sm\:flex { display: flex; }
    .sm\:flex-row-reverse { flex-direction: row-reverse; }
    .sm\:items-center { align-items: center; }
    .sm\:items-start { align-items: flex-start; }
    .sm\:p-0 { padding: 0; }
    .sm\:p-6 { padding: 1.5rem; }
    .sm\:pb-4 { padding-bottom: 1rem; }
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:ml-3 { margin-left: .75rem; }
    .sm\:ml-4 { margin-left: 1rem; }
    .sm\:mt-0 { margin-top: 0; }
    .sm\:my-8 { margin-top: 2rem; margin-bottom: 2rem; }
    .sm\:mx-0 { margin-left: 0; margin-right: 0; }
    .sm\:h-10 { height: 2.5rem; }
    .sm\:w-10 { width: 2.5rem; }
    .sm\:w-auto { width: auto; }
    .sm\:w-full { width: 100%; }
    .sm\:max-w-lg { max-width: 32rem; }
    .sm\:text-left { text-align: left; }
}
@media (min-width: 768px) {
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:col-span-3 { grid-column: span 3 / span 3; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:p-4 { padding: 1rem; }
    .md\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    .md\:py-12 { padding-top: 3rem; padding-bottom: 3rem; }
}