:root {
    --jg-navy: #082343;
    --jg-navy-2: #103f70;
    --jg-blue: #0f47ad;
    --jg-green: #22a447;
    --jg-bg: #f5f7fa;
    --jg-text: #1c2733;
    --jg-muted: #5d6975;
    --jg-border: #e2e7ed;
}

.jg-public-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
    color: var(--jg-text);
}

.jg-public-page *,
.jg-public-page *::before,
.jg-public-page *::after {
    box-sizing: border-box;
}

.jg-public-page a {
    text-decoration: none;
}


/* =========================================================
   HERO
   ========================================================= */

.jg-public-hero {
    position: relative;
    overflow: hidden;

    margin-bottom: 3rem;
    padding: 3.3rem 3.5rem;

    color: #fff;
    background: linear-gradient(
        135deg,
        var(--jg-navy) 0%,
        var(--jg-navy-2) 100%
    );

    border-radius: 22px;
}

.jg-public-hero::after {
    content: "";

    position: absolute;
    top: -150px;
    right: -90px;

    width: 370px;
    height: 370px;

    border-radius: 50%;
    background: rgba(255,255,255,.055);
}

.jg-eyebrow {
    position: relative;
    z-index: 1;

    margin-bottom: .8rem;

    color: #bdd7f5;

    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.jg-public-hero h1 {
    position: relative;
    z-index: 1;

    max-width: 900px;

    margin: 0 0 1rem;

    color: #fff;

    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 750;
    line-height: 1.08;
}

.jg-public-hero > p {
    position: relative;
    z-index: 1;

    max-width: 850px;

    margin: 0;

    color: rgba(255,255,255,.9);

    font-size: 1.1rem;
    line-height: 1.65;
}


/* =========================================================
   BOTONES
   ========================================================= */

.jg-actions {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    gap: .8rem;

    margin-top: 1.6rem;
}

.jg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: .78rem 1.25rem;

    border-radius: 9px;

    font-weight: 700;
    line-height: 1.2;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.jg-btn:hover {
    transform: translateY(-1px);
}

.jg-btn-white {
    color: var(--jg-navy) !important;
    background: #fff;
}

.jg-btn-white:hover {
    background: #edf4fa;
}

.jg-btn-outline {
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.7);
}

.jg-btn-outline:hover {
    background: rgba(255,255,255,.1);
}


/* =========================================================
   SECCIONES
   ========================================================= */

.jg-section {
    margin: 3.2rem 0;
}

.jg-section-head {
    max-width: 830px;
    margin-bottom: 1.6rem;
}

.jg-section-head h2 {
    margin: 0 0 .7rem;

    color: var(--jg-navy);

    font-size: clamp(1.65rem, 3vw, 2.3rem);
    font-weight: 750;
    line-height: 1.15;
}

.jg-section-head p {
    margin: 0;

    color: var(--jg-muted);

    font-size: 1.03rem;
    line-height: 1.65;
}


/* =========================================================
   TARJETAS
   ========================================================= */

.jg-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.jg-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.jg-card {
    padding: 1.6rem;

    background: #fff;

    border: 1px solid var(--jg-border);
    border-radius: 16px;

    box-shadow: 0 8px 25px rgba(8,35,67,.055);
}

.jg-card.highlight {
    border-top: 4px solid var(--jg-blue);
}

.jg-card.highlight-green {
    border-top: 4px solid var(--jg-green);
}

.jg-card-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    margin-bottom: 1rem;

    color: var(--jg-blue);
    background: #eaf2fb;

    border-radius: 10px;

    font-size: .9rem;
    font-weight: 800;
}

.jg-card h3 {
    margin: 0 0 .65rem;

    color: var(--jg-navy);

    font-size: 1.2rem;
    font-weight: 750;
}

.jg-card p {
    margin: 0;

    color: var(--jg-muted);

    line-height: 1.6;
}

.jg-card .jg-mini-title {
    display: block;

    margin-bottom: .45rem;

    color: var(--jg-blue);

    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}


/* =========================================================
   PANEL GRANDE
   ========================================================= */

.jg-panel {
    padding: 2rem;

    background: #fff;

    border: 1px solid var(--jg-border);
    border-radius: 18px;
}

.jg-panel + .jg-panel {
    margin-top: 1.25rem;
}

.jg-panel h3 {
    margin-top: 0;
    color: var(--jg-navy);
}


/* =========================================================
   LISTAS
   ========================================================= */

.jg-feature {
    display: flex;
    align-items: flex-start;
    gap: .8rem;

    margin-bottom: 1rem;
}

.jg-feature:last-child {
    margin-bottom: 0;
}

.jg-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    color: var(--jg-green);
    background: #e7f6ec;

    border-radius: 50%;

    font-weight: 900;
}

.jg-feature div {
    color: var(--jg-muted);
    line-height: 1.55;
}

.jg-feature strong {
    color: var(--jg-navy);
}


/* =========================================================
   ESTADÍSTICAS
   ========================================================= */

.jg-stats {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1rem;

    margin-top: 2rem;
}

.jg-stat {
    padding: 1.25rem;

    color: var(--jg-text);
    background: #fff;

    border-radius: 14px;
}

.jg-stat-label {
    color: var(--jg-muted);

    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.jg-stat-number {
    margin: .4rem 0;

    color: var(--jg-navy);

    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.jg-stat p {
    margin: 0;

    color: var(--jg-muted);

    font-size: .88rem;
    line-height: 1.4;
}


/* =========================================================
   PESTAÑAS VISUALES LIBRE / PI
   ========================================================= */

.jg-route-label {
    display: inline-flex;
    align-items: center;

    margin-bottom: .8rem;
    padding: .38rem .7rem;

    color: var(--jg-blue);
    background: #eaf2fb;

    border-radius: 999px;

    font-size: .8rem;
    font-weight: 800;
}

.jg-route-label.pi {
    color: #147038;
    background: #e7f6ec;
}


/* =========================================================
   EXAMEN
   ========================================================= */

.jg-exam-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1.25rem;
}

.jg-exam {
    padding: 1.7rem;

    background: #fff;

    border: 1px solid var(--jg-border);
    border-radius: 16px;
}

.jg-exam-number {
    margin-bottom: .4rem;

    color: var(--jg-blue);

    font-size: 2.1rem;
    font-weight: 800;
}

.jg-exam h3 {
    margin: 0 0 .9rem;

    color: var(--jg-navy);
}

.jg-exam p {
    color: var(--jg-muted);
    line-height: 1.6;
}


/* =========================================================
   AVISOS
   ========================================================= */

.jg-notice {
    margin: 1.5rem 0;
    padding: 1.15rem 1.35rem;

    color: #35495d;
    background: #eef5fb;

    border-left: 4px solid var(--jg-blue);
    border-radius: 0 12px 12px 0;

    line-height: 1.6;
}

.jg-notice-green {
    background: #eef9f1;
    border-left-color: var(--jg-green);
}


/* =========================================================
   TEMARIO
   ========================================================= */

.jg-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 0 1.5rem;

    margin-top: 1rem;
}

.jg-topic {
    display: flex;
    align-items: flex-start;
    gap: .7rem;

    padding: .7rem 0;

    border-bottom: 1px solid #edf0f3;
}

.jg-topic-number {
    flex: 0 0 28px;

    color: var(--jg-blue);

    font-weight: 800;
}

.jg-topic-text {
    color: #465464;
    line-height: 1.45;
}


/* =========================================================
   FUENTES
   ========================================================= */

.jg-sources {
    margin-top: 1.25rem;

    color: var(--jg-muted);

    font-size: .88rem;
    line-height: 1.55;
}

.jg-sources a {
    color: var(--jg-blue);
    font-weight: 600;
}


/* =========================================================
   CTA FINAL
   ========================================================= */

.jg-final-cta {
    margin-top: 3.5rem;
    padding: 2.4rem;

    color: #fff;
    background: var(--jg-navy);

    border-radius: 18px;

    text-align: center;
}

.jg-final-cta h2 {
    margin: 0 0 .7rem;
    color: #fff;
}

.jg-final-cta p {
    max-width: 720px;

    margin: 0 auto;

    color: rgba(255,255,255,.85);
}

.jg-final-cta .jg-actions {
    justify-content: center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .jg-stats {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 800px) {

    .jg-grid-3 {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 700px) {

    .jg-public-page {
        padding: .8rem .8rem 2.5rem;
    }

    .jg-public-hero {
        padding: 2rem 1.4rem;
        border-radius: 14px;
    }

    .jg-grid-2,
    .jg-grid-3,
    .jg-stats,
    .jg-exam-grid,
    .jg-topic-grid {
        grid-template-columns: 1fr;
    }

    .jg-card,
    .jg-panel {
        padding: 1.3rem;
    }
}

/* ============================================================
   AJUSTE SUPERIOR PÁGINAS PÚBLICAS
   Acercar contenido a la navbar como en la Página Principal
   ============================================================ */

/* Contenedor principal de Moodle */
body.path-local-publicas .main-inner {
    margin-top: 1.25rem !important;
    padding-top: 0 !important;
}

/* Eliminar espacio adicional del área principal */
body.path-local-publicas #page-content {
    padding-top: 0 !important;
}

body.path-local-publicas #region-main-box {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.path-local-publicas #region-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Nuestra página */
body.path-local-publicas .jg-public-page {
    padding-top: .75rem !important;
}


/* TABLET */
@media (max-width: 991.98px) {

    body.path-local-publicas .main-inner {
        margin-top: .9rem !important;
    }

    body.path-local-publicas .jg-public-page {
        padding-top: .5rem !important;
    }
}


/* MÓVIL */
@media (max-width: 767.98px) {

    body.path-local-publicas .main-inner {
        margin-top: .6rem !important;
    }

    body.path-local-publicas .jg-public-page {
        padding-top: .35rem !important;
    }
}


/* ============================================================
   JG - SUBIR PÁGINAS PÚBLICAS HACIA LA NAVBAR
   ============================================================ */

/* ESCRITORIO */
@media (min-width: 992px) {

    body.path-local-publicas .main-inner {
        margin-top: -2.5rem !important;
    }
}


/* TABLET */
@media (min-width: 768px) and (max-width: 991.98px) {

    body.path-local-publicas .main-inner {
        margin-top: -1.5rem !important;
    }
}


/* MÓVIL */
@media (max-width: 767.98px) {

    body.path-local-publicas .main-inner {
        margin-top: -.75rem !important;
    }
}


/* ============================================================
   JG - RECUPERAR MARGEN BLANCO INTERIOR SUPERIOR
   Mantiene la página subida hacia la navbar
   ============================================================ */

body.path-local-publicas .jg-public-page {
    padding-top: 1.5rem !important;
}

/* TABLET */
@media (min-width: 768px) and (max-width: 991.98px) {
    body.path-local-publicas .jg-public-page {
        padding-top: 1.2rem !important;
    }
}

/* MÓVIL */
@media (max-width: 767.98px) {
    body.path-local-publicas .jg-public-page {
        padding-top: .8rem !important;
    }
}


/* ============================================================
   JG - TEXTOS PÁGINAS PÚBLICAS A TODO EL ANCHO
   ============================================================ */

body.path-local-publicas .jg-section-head {
    width: 100% !important;
    max-width: none !important;
}

body.path-local-publicas .jg-section-head > p {
    width: 100% !important;
    max-width: none !important;
}

body.path-local-publicas .jg-public-hero > p {
    width: 100% !important;
    max-width: none !important;
}

body.path-local-publicas .jg-final-cta > p {
    width: 100% !important;
    max-width: none !important;
}

/* Dos tarjetas de OEP 2026 ocupando todo el ancho */
body.path-local-publicas .jg-stats.jg-stats-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 700px) {

    body.path-local-publicas .jg-stats.jg-stats-2 {
        grid-template-columns: 1fr !important;
    }
}