/* =========================================================
   KENZO Academia — página de exámenes y test online
   Usa los mismos colores de marca que style.css
   ========================================================= */

/* ---------- CABECERA ---------- */
.ex-hero{
    position: relative;
    overflow: hidden;
    padding: 7rem 1.6rem 8rem;
    color: var(--colorClaro);
    background:
        linear-gradient(120deg, rgba(26, 51, 57, .96) 0%, rgba(37, 70, 79, .9) 100%),
        url(../img/hero.webp) center / cover no-repeat;
}
.ex-hero::before{
    content: "";
    position: absolute;
    width: 50rem; height: 50rem;
    right: -18rem; top: -20rem;
    border-radius: 50%;
    border: 5rem solid rgba(255, 0, 0, .12);
}
.ex-hero__interior{
    position: relative;
    max-width: 90rem;
    margin: 0 auto;
    text-align: center;
}
.ex-miga{ font-size: 1.4rem; opacity: .8; margin-bottom: 2rem; }
.ex-miga a{ text-decoration: underline; }
.ex-hero__titulo{
    font-size: clamp(3.4rem, 5.5vw, 5.6rem);
    font-weight: 800;
    letter-spacing: -.15rem;
    color: var(--blanco);
    margin-bottom: 2rem;
}
.ex-hero__texto{ font-size: clamp(1.7rem, 2vw, 2rem); max-width: 72rem; margin: 0 auto 3rem; }
.ex-hero .hero__botones{ justify-content: center; margin-bottom: 0; }

/* ---------- PARTES DEL EXAMEN ---------- */
.ex-partes{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: left;
}
.ex-parte{
    padding: 3.2rem 2.8rem;
    border-radius: var(--radio);
    background-color: var(--blanco);
    border: .2rem solid var(--colorClaro);
    transition: transform var(--transicion), box-shadow var(--transicion);
}
.ex-parte:hover{ transform: translateY(-.6rem); box-shadow: var(--sombraFuerte); }
.ex-parte--destacada{ background-color: var(--colorPrimario); color: var(--colorClaro); border-color: var(--colorPrimario); }
.ex-parte__etiqueta{
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15rem;
    color: var(--colorSecundario);
    margin-bottom: .6rem;
}
.ex-parte--destacada .ex-parte__etiqueta{ color: var(--colorClaro); opacity: .8; }
.ex-parte__cifra{
    font-size: 6.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.2rem;
    color: var(--colorSecundario);
    margin-bottom: .4rem;
}
.ex-parte h3{ font-size: 2rem; font-weight: 800; margin-bottom: 1.6rem; }
.ex-parte ul{ margin: 0; padding-left: 2rem; font-size: 1.55rem; }
.ex-parte li{ margin-bottom: .6rem; }
.ex-fuente{ margin-top: 2.4rem; font-size: 1.35rem; opacity: .75; }
.ex-intro{ max-width: 72rem; margin-bottom: 4rem; }

/* ---------- EXÁMENES POR AÑO ---------- */
.ex-anios{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: left;
}
.ex-anio{
    display: flex;
    flex-direction: column;
    padding: 3rem 2.6rem;
    border-radius: var(--radio);
    background-color: var(--blanco);
    border-top: .6rem solid var(--colorSecundario);
    box-shadow: var(--sombra);
}
.ex-anio__anio{ font-size: 1.6rem; margin-bottom: 1.6rem; }
.ex-anio__anio strong{ display: block; font-size: 3.6rem; font-weight: 800; line-height: 1.1; }
.ex-anio__datos{
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.ex-anio__datos li{ padding: 1rem 1.2rem; border-radius: 1rem; background-color: var(--colorClaro); }
.ex-anio__datos span{ display: block; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .08rem; opacity: .75; }
.ex-anio__datos strong{ font-size: 1.8rem; }
.ex-anio__datos .ex-dato--corte{ background-color: var(--colorPrimario); color: var(--colorClaro); }
.ex-anio__datos .ex-dato--corte strong{ color: var(--blanco); font-size: 2.2rem; }
.ex-anio__datos .ex-dato--corte span{ opacity: .85; }

/* ---------- DATOS CLAVE ---------- */
.ex-claves .ex-intro{ margin-left: auto; margin-right: auto; color: var(--colorClaro); }
.ex-claves__resumen{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--ancho);
    margin: 0 auto 4rem;
}
.ex-claves__resumen > div{
    padding: 2.6rem 2.4rem;
    border-radius: var(--radio);
    background-color: rgba(255, 255, 255, .07);
    border: .1rem solid rgba(236, 235, 243, .2);
    border-bottom: .5rem solid var(--colorSecundario);
    color: var(--colorClaro);
    font-size: 1.5rem;
    line-height: 1.45;
}
.ex-claves__cifra{ display: block; font-size: 5.2rem; font-weight: 800; line-height: 1; margin-bottom: 1rem; color: var(--blanco); }
.ex-claves__tabla{
    max-width: var(--ancho);
    margin: 0 auto;
    overflow-x: auto;
    border-radius: var(--radio);
    background-color: var(--blanco);
    box-shadow: var(--sombraFuerte);
    color: var(--colorPrimario);
}
.ex-claves__tabla table{ width: 100%; border-collapse: collapse; font-size: 1.55rem; text-align: left; }
.ex-claves__tabla caption{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ex-claves__tabla th, .ex-claves__tabla td{ padding: 1.6rem 2rem; border-bottom: .1rem solid var(--colorClaro); white-space: nowrap; }
.ex-claves__tabla thead th{ background-color: var(--colorClaro); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .08rem; }
.ex-claves__tabla thead small{ text-transform: none; letter-spacing: 0; font-weight: 600; opacity: .7; }
.ex-claves__tabla tbody th{ font-weight: 800; }
.ex-claves__tabla tbody tr:first-child{ background-color: rgba(255, 0, 0, .04); }
.ex-claves__tabla tbody tr:last-child > *{ border-bottom: none; }
.ex-barra{ display: flex; align-items: center; gap: 1rem; min-width: 16rem; }
.ex-barra::before{
    content: "";
    height: 1rem;
    width: calc(var(--v) * .11rem);   /* --v = % sobre el máximo; 100 % = 11rem */
    flex: 0 0 auto;
    border-radius: 1rem;
    background: linear-gradient(90deg, var(--colorPrimario), var(--colorSecundario));
}
.ex-barra b{ font-weight: 800; }
@media (max-width: 900px){ .ex-claves__resumen{ grid-template-columns: 1fr; gap: 1.2rem; } .ex-claves__cifra{ font-size: 4.2rem; } }
.ex-anio__enlaces{ display: grid; gap: .8rem; margin-top: auto; }
.ex-enlace{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border: .2rem solid var(--colorClaro);
    border-radius: 1rem;
    font-weight: 700;
    font-size: 1.5rem;
    transition: border-color var(--transicion), background-color var(--transicion), color var(--transicion);
}
.ex-enlace::after{ content: "↓"; color: var(--colorSecundario); }
.ex-enlace:hover{ border-color: var(--colorPrimario); }
.ex-enlace--destacado{ background-color: var(--colorPrimario); border-color: var(--colorPrimario); color: var(--colorClaro); }
.ex-enlace--destacado::after{ content: "→"; color: var(--colorClaro); }
.ex-enlace--destacado:hover{ background-color: var(--colorSecundario); border-color: var(--colorSecundario); }
.ex-aviso{
    max-width: 72rem;
    margin-top: 3rem;
    padding: 1.4rem 2rem;
    border-radius: 1.2rem;
    background-color: #FFF3C4;
    font-size: 1.45rem;
}
.ex-aviso--claro{ margin: -1.6rem auto 4rem; background-color: var(--colorClaro); }

/* ---------- TEST ---------- */
.test{ max-width: 86rem; text-align: left; }
.test__lista{ list-style: none; padding: 0; margin: 0; counter-reset: pregunta; }
.pregunta{
    counter-increment: pregunta;
    position: relative;
    padding: 2.8rem 2.8rem 2.4rem 8rem;
    margin-bottom: 1.6rem;
    border-radius: var(--radio);
    background-color: var(--blanco);
    border: .2rem solid var(--colorClaro);
    transition: border-color var(--transicion), background-color var(--transicion);
}
.pregunta::before{
    content: counter(pregunta);
    position: absolute;
    left: 2.4rem; top: 2.6rem;
    width: 3.8rem; height: 3.8rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background-color: var(--colorPrimario);
    color: var(--colorClaro);
    font-weight: 800;
}
.pregunta__enunciado{ font-weight: 700; font-size: 1.75rem; margin-bottom: 1.6rem; }
.pregunta__opciones{ display: grid; gap: .8rem; }
.pregunta__opciones label{
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 1.6rem;
    border: .2rem solid var(--colorClaro);
    border-radius: 1.2rem;
    cursor: pointer;
    font-size: 1.6rem;
    transition: border-color .2s, background-color .2s;
}
.pregunta__opciones label:hover{ border-color: var(--verdeSuave); }
.pregunta__opciones input{ width: 2rem; height: 2rem; accent-color: var(--colorPrimario); flex-shrink: 0; margin: 0; }
.pregunta__opciones label:has(input:checked){ border-color: var(--colorPrimario); background-color: rgba(37, 70, 79, .06); }
.pregunta__explicacion{
    margin: 1.6rem 0 0;
    padding: 1.4rem 1.8rem;
    border-radius: 1.2rem;
    background-color: var(--colorClaro);
    font-size: 1.5rem;
    line-height: 1.6;
}

/* Estados tras corregir */
.test.corregido .pregunta__opciones label{ cursor: default; }
.test.corregido .pregunta__opciones label:hover{ border-color: var(--colorClaro); }
.pregunta__opciones label.es-correcta{ border-color: #2E7D4F !important; background-color: #E9F6EE !important; }
.pregunta__opciones label.es-error{ border-color: var(--colorSecundario) !important; background-color: #FFECEC !important; }
.pregunta.acierto{ border-color: #2E7D4F; }
.pregunta.fallo{ border-color: var(--colorSecundario); }
.pregunta.acierto::before{ content: "✓"; background-color: #2E7D4F; }
.pregunta.fallo::before{ content: "✗"; background-color: var(--colorSecundario); }

.test__acciones{ display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; margin: 3.2rem 0; }
.boton--claro{ border-color: var(--colorPrimario); }

.resultado{
    padding: 4rem 3rem;
    border-radius: var(--radio);
    background-color: var(--colorPrimario);
    color: var(--colorClaro);
    text-align: center;
    box-shadow: var(--sombraFuerte);
}
.resultado__etiqueta{ font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2rem; opacity: .8; }
.resultado__nota{ font-size: 8rem; font-weight: 800; line-height: 1; margin-bottom: 1.6rem; }
.resultado__nota small{ font-size: 2.4rem; opacity: .7; }
.resultado__datos{ list-style: none; padding: 0; margin: 0 0 2rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 2.4rem; }
.resultado__datos strong{ font-size: 2.2rem; }
.resultado__datos .ok strong{ color: #8FE0AE; }
.resultado__datos .ko strong{ color: #FF8A8A; }
.resultado__mensaje{ max-width: 56rem; margin: 0 auto 2.4rem; font-size: 1.7rem; }

/* ---------- DATOS REALES DE LOS EXÁMENES ---------- */
.pregunta__origen{
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1rem;
    color: var(--colorSecundario);
    margin-bottom: .6rem;
}
.ex-anio__corte{
    font-size: 1.4rem;
    line-height: 1.5;
    padding: 1rem 1.2rem;
    margin: -1rem 0 1.6rem;
    border-left: .4rem solid var(--colorSecundario);
    background-color: rgba(255, 0, 0, .05);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
    .ex-partes, .ex-anios{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
    .ex-hero{ padding: 4rem 1.6rem 5rem; }
    .ex-parte{ padding: 2.4rem 2rem; }
    .ex-parte__cifra{ font-size: 5rem; }
    .pregunta{ padding: 2rem 1.6rem 1.8rem; }
    .pregunta::before{ position: static; margin-bottom: 1.2rem; width: 3.2rem; height: 3.2rem; }
    .pregunta__enunciado{ font-size: 1.6rem; }
    .pregunta__opciones label{ font-size: 1.5rem; padding: 1rem 1.2rem; }
    .resultado{ padding: 3rem 1.6rem; }
    .resultado__nota{ font-size: 6.4rem; }
}

/* ---------- PÁGINAS LEGALES ---------- */
.ex-hero--corta{ padding-top: 5rem; padding-bottom: 5rem; }
.legal{ max-width: 82rem; margin: 0 auto; text-align: left; }
.legal h2{ font-size: 2.2rem; font-weight: 800; margin: 3.2rem 0 1.2rem; }
.legal h2:first-child{ margin-top: 0; }
.legal p, .legal li{ font-size: 1.6rem; line-height: 1.7; }
.legal ul{ padding-left: 2.2rem; margin: 0 0 1.6rem; }
.legal li{ margin-bottom: .6rem; }
.legal a{ color: var(--colorPrimario); font-weight: 600; text-decoration: underline; }
.legal .legal__datos{ list-style: none; padding: 2rem 2.4rem; border-radius: var(--radio); background-color: var(--colorClaro); border-left: .5rem solid var(--colorSecundario); }
.legal .legal__fecha{ margin-top: 4rem; font-size: 1.35rem; opacity: .7; }
mark.pendiente{ background-color: #FFE58A; color: #5A4500; padding: 0 .4rem; border-radius: .3rem; font-weight: 700; }

/* ---------- GUÍA DE LA OPOSICIÓN ---------- */
.guia__indice{ padding: 2rem 2.4rem; margin-bottom: 3.2rem; border-radius: var(--radio); background-color: var(--colorClaro); }
.guia__indice p{ margin: 0 0 .8rem; }
.guia__indice ol{ margin: 0; padding-left: 2.2rem; columns: 2; column-gap: 3rem; }
.guia .guia__partes{ margin: 2.4rem 0; }
.guia .guia__partes ul{ padding-left: 2rem; }
.guia .guia__cta{ padding: 1.6rem 2rem; border-left: .5rem solid var(--colorSecundario); background-color: var(--colorClaro); border-radius: 0 1rem 1rem 0; font-weight: 600; }
.guia__kenzo{ margin: 4.8rem 0 2rem; padding: 3.2rem; border-radius: var(--radio); background-color: var(--colorPrimario); color: var(--colorClaro); }
.guia__kenzo h2{ margin-top: 0; color: var(--blanco); }
.guia__kenzo p{ color: var(--colorClaro); }
.guia .guia__kenzo .hero__botones{ margin: 2rem 0 0; }
.guia .guia__kenzo a.boton{ color: var(--blanco); text-decoration: none; }
.ex-hero .eo-claves{ justify-content: flex-start; }
@media (max-width: 700px){ .guia__indice ol{ columns: 1; } .guia__kenzo{ padding: 2.4rem 2rem; } }
.ex-guia{ margin-top: 1.6rem; font-size: 1.6rem; font-weight: 600; }
.ex-guia a{ color: var(--colorSecundario); text-decoration: underline; }
.guia .ex-parte__cifra{ font-size: 5.6rem; line-height: 1; margin: .4rem 0 .8rem; }
.guia .ex-parte__etiqueta{ font-size: 1.3rem; }
.guia .ex-parte li{ font-size: 1.5rem; }