/* ==========================================================================
   COMPONENTES — cabecera, botones, tarjetas, secciones y pie
   Todos consumen tokens: funciona igual en Tech y en Creativa.
   ========================================================================== */

/* Cabecera ------------------------------------------------------------- */

.cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--fondo) 86%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transicion), background-color var(--transicion);
}

.cabecera--compacta {
    border-bottom-color: var(--borde);
}

.cabecera__interior {
    display: flex;
    align-items: center;
    gap: var(--esp-5);
    min-height: 76px;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-3);
    flex: 0 0 auto;
}

.marca__logo {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex: none;
}

.marca__logo--icono {
    border-radius: 11px;
}

.marca__simbolo {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--acento), var(--acento-fuerte));
    color: var(--acento-contraste);
    font-family: var(--fuente-mono);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.marca__texto {
    display: flex;
    align-items: baseline;
    gap: 0.28em;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
}

.marca__texto-secundario {
    color: var(--texto-suave);
    font-weight: 500;
    letter-spacing: 0.16em;
    font-size: 0.82em;
}

.navegacion {
    display: flex;
    align-items: center;
    gap: var(--esp-5);
    margin-inline-start: auto;
    font-size: var(--texto-sm);
    font-weight: 500;
}

.navegacion a {
    position: relative;
    padding-block: var(--esp-2);
    color: var(--texto-suave);
    transition: color var(--transicion);
}

.navegacion a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--acento);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transicion);
}

.navegacion a:hover,
.navegacion a:focus-visible {
    color: var(--texto);
}

.navegacion a:hover::after,
.navegacion a:focus-visible::after {
    transform: scaleX(1);
}

.cabecera__acciones {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    margin-inline-start: auto;
}

.navegacion + .cabecera__acciones {
    margin-inline-start: 0;
}

.idioma {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pill);
    font-size: var(--texto-xs);
    font-weight: 700;
    color: var(--texto-tenue);
}

.idioma button {
    padding: 0.15rem 0.3rem;
    color: inherit;
    transition: color var(--transicion);
}

.idioma button[aria-pressed="true"] {
    color: var(--acento-fuerte);
}

.boton-icono {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pill);
    color: var(--texto-suave);
    transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}

.boton-icono:hover {
    color: var(--texto);
    border-color: color-mix(in srgb, var(--acento) 45%, var(--borde));
}

.icono--sol {
    display: none;
}

html[data-tema="oscuro"] .icono--sol {
    display: block;
}

html[data-tema="oscuro"] .icono--luna {
    display: none;
}

.cabecera__menu {
    display: none;
}

.navegacion-movil {
    display: none;
    padding: var(--esp-4) var(--esp-5) var(--esp-5);
    border-top: 1px solid var(--borde);
    background: var(--fondo);
}

.navegacion-movil a {
    display: block;
    padding: var(--esp-3) 0;
    border-bottom: 1px solid var(--borde);
    color: var(--texto-suave);
    font-weight: 500;
}

.navegacion-movil a:last-child {
    border-bottom: 0;
    color: var(--acento-fuerte);
    font-weight: 600;
}

/* Botones -------------------------------------------------------------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    padding: 0.68rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radio-pill);
    font-size: var(--texto-sm);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: transform var(--transicion), background-color var(--transicion),
        color var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}

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

.boton:active {
    transform: translateY(0);
}

.boton--primario {
    background: var(--boton-primario);
    color: var(--boton-primario-contraste);
    box-shadow: 0 12px 26px -14px var(--boton-primario-sombra);
}

.boton--primario:hover {
    background: var(--boton-primario-hover);
}

.boton--fantasma {
    border-color: var(--borde);
    color: var(--texto);
    background: var(--superficie);
}

.boton--fantasma:hover {
    border-color: color-mix(in srgb, var(--boton-primario) 45%, var(--borde));
    background: var(--superficie-2);
}

.boton--inverso {
    background: var(--texto);
    color: var(--fondo);
}

.boton--inverso:hover {
    background: color-mix(in srgb, var(--texto) 84%, var(--acento));
}

/* Acción destructiva (eliminar, revocar): mismo tono rojo, sin relleno pleno. */
.boton--peligro {
    border-color: color-mix(in srgb, var(--peligro) 55%, var(--borde));
    background: var(--peligro-suave);
    color: var(--peligro);
}

.boton--peligro:hover {
    border-color: var(--peligro);
    background: color-mix(in srgb, var(--peligro) 18%, var(--superficie));
}

.boton--grande {
    padding: 0.95rem 1.7rem;
    font-size: var(--texto-base);
}

.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    font-size: var(--texto-sm);
    font-weight: 600;
    color: var(--acento-fuerte);
}

.enlace-flecha span {
    transition: transform var(--transicion);
}

.enlace-flecha:hover span {
    transform: translateX(4px);
}

/* Hero ----------------------------------------------------------------- */

.hero {
    position: relative;
    background: var(--fondo-hero), var(--fondo);
    overflow: clip;
}

.hero__interior {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.hero__titulo {
    margin-top: var(--esp-5);
    font-size: var(--texto-hero);
    max-width: 24ch;
}

.hero__descripcion {
    margin-top: var(--esp-5);
    max-width: 34rem;
    color: var(--texto-suave);
    font-size: var(--texto-lg);
}

.hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
    margin-top: var(--esp-6);
}

.metricas {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-top: var(--esp-8);
    padding-top: var(--esp-5);
    border-top: 1px solid var(--borde);
}

.metricas__item dt {
    font-size: var(--texto-2xl);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.metricas__item dd {
    margin-top: var(--esp-1);
    color: var(--texto-suave);
    font-size: var(--texto-sm);
}

.hero__visual {
    position: relative;
    display: grid;
    gap: var(--esp-5);
}

.ventana-codigo {
    border: 1px solid #2a2a33;
    border-radius: var(--radio-lg);
    background: #0b0b10;
    box-shadow: var(--sombra);
    overflow: hidden;
    transform: rotate(-1.2deg);
    transition: transform var(--transicion);
}

.ventana-codigo:hover {
    transform: rotate(0deg);
}

.ventana-codigo__barra {
    display: flex;
    gap: 6px;
    padding: 0.75rem 1rem;
    background: #14141b;
    border-bottom: 1px solid #23232c;
}

.ventana-codigo__barra span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3a3a46;
}

.ventana-codigo__barra span:first-child {
    background: #ff5f57;
}

.ventana-codigo__barra span:nth-child(2) {
    background: #febc2e;
}

.ventana-codigo__barra span:nth-child(3) {
    background: #28c840;
}

.ventana-codigo__cuerpo {
    margin: 0;
    padding: clamp(1rem, 3vw, 1.75rem);
    color: #d8dcff;
    font-family: var(--fuente-mono);
    font-size: clamp(0.7rem, 1.4vw, 0.86rem);
    line-height: 1.7;
    overflow-x: auto;
}



/* Escuelas ------------------------------------------------------------- */

.rejilla-escuelas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: var(--esp-5);
}

.tarjeta-escuela {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    padding: clamp(1.6rem, 3vw, 2.6rem);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    background: var(--superficie);
    box-shadow: var(--sombra-suave);
    overflow: hidden;
    transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

.tarjeta-escuela::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--acento), var(--acento-fuerte));
}

.tarjeta-escuela:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra);
    border-color: color-mix(in srgb, var(--acento) 45%, var(--borde));
}

.tarjeta-escuela__etiqueta {
    font-size: var(--texto-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--acento-fuerte);
}

.tarjeta-escuela__titulo {
    font-size: var(--texto-2xl);
}

.tarjeta-escuela__texto {
    color: var(--texto-suave);
}

.lista-tematicas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
    margin-block: var(--esp-3) var(--esp-4);
}

.lista-tematicas li {
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pill);
    background: var(--superficie-2);
    color: var(--texto-suave);
    font-size: var(--texto-xs);
    font-weight: 500;
}

.tarjeta-escuela .boton {
    align-self: flex-start;
    margin-top: auto;
}

/* Cursos --------------------------------------------------------------- */

.rejilla-cursos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--esp-4);
}

.tarjeta-curso {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
    padding: var(--esp-5);
    min-height: 250px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    transition: transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}

.tarjeta-curso:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--acento) 50%, var(--borde));
    box-shadow: var(--sombra-suave);
}

.insignia {
    align-self: flex-start;
    padding: 0.22rem 0.6rem;
    border-radius: var(--radio-pill);
    background: var(--acento-suave);
    color: var(--acento-fuerte);
    font-size: var(--texto-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tarjeta-curso__titulo {
    margin-top: var(--esp-2);
    font-size: var(--texto-lg);
    font-family: var(--fuente-base);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-transform: none;
}

.tarjeta-curso__meta {
    color: var(--texto-tenue);
    font-size: var(--texto-sm);
}

.tarjeta-curso__precio {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: var(--esp-3);
}

.tarjeta-curso__desde {
    color: var(--texto-tenue);
    font-size: var(--texto-xs);
}

.tarjeta-curso__monto {
    font-size: var(--texto-xl);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.tarjeta-curso__gratis {
    color: var(--acento-fuerte);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--texto-sm);
}

/* Comunidades ---------------------------------------------------------- */

.comunidades {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

.lista-ventajas {
    display: grid;
    gap: var(--esp-3);
    margin-block: var(--esp-5);
}

.lista-ventajas li {
    position: relative;
    padding-left: 1.9rem;
    color: var(--texto-suave);
}

.lista-ventajas li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--acento-suave);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 45%, transparent);
}

.lista-ventajas li::after {
    content: "";
    position: absolute;
    left: 0.34rem;
    top: 0.66em;
    width: 0.44rem;
    height: 0.24rem;
    border-left: 2px solid var(--acento-fuerte);
    border-bottom: 2px solid var(--acento-fuerte);
    transform: rotate(-45deg);
}

.comunidades__hilo {
    display: grid;
    gap: var(--esp-3);
}

.mensaje {
    display: flex;
    gap: var(--esp-3);
    padding: var(--esp-4);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    box-shadow: var(--sombra-suave);
}

.mensaje--respuesta {
    margin-left: clamp(1rem, 4vw, 2.5rem);
    background: var(--superficie-2);
}

.mensaje__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--acento-suave);
    color: var(--acento-fuerte);
    font-size: var(--texto-xs);
    font-weight: 800;
}

.mensaje__autor {
    font-size: var(--texto-sm);
    font-weight: 700;
}

.mensaje__texto {
    margin-top: var(--esp-1);
    color: var(--texto-suave);
    font-size: var(--texto-sm);
}

/* Cómo funciona -------------------------------------------------------- */

.pasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--esp-5);
    counter-reset: paso;
}

.paso {
    position: relative;
    padding-top: var(--esp-5);
    border-top: 1px solid var(--borde);
}

.paso__numero {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: var(--esp-3);
    border-radius: 50%;
    background: var(--acento);
    color: var(--acento-contraste);
    font-size: var(--texto-sm);
    font-weight: 800;
}

.paso__titulo {
    font-size: var(--texto-lg);
    font-family: var(--fuente-base);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
}

.paso__texto {
    margin-top: var(--esp-2);
    color: var(--texto-suave);
    font-size: var(--texto-sm);
}

/* Docentes ------------------------------------------------------------- */

.rejilla-docentes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--esp-4);
}

.tarjeta-docente {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--esp-2);
    padding: var(--esp-6) var(--esp-4);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    text-align: center;
    transition: transform var(--transicion), border-color var(--transicion);
}

.tarjeta-docente:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--acento) 45%, var(--borde));
}

.avatar {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--acento), var(--acento-fuerte));
    color: var(--acento-contraste);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.tarjeta-docente__nombre {
    font-size: var(--texto-base);
    font-family: var(--fuente-base);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
}

.tarjeta-docente__especialidad {
    color: var(--texto-suave);
    font-size: var(--texto-sm);
}

/* Testimonios ---------------------------------------------------------- */

.rejilla-testimonios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--esp-5);
}

.testimonio {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--esp-5);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    background: var(--superficie);
}

.testimonio blockquote {
    font-size: var(--texto-lg);
    line-height: 1.5;
    text-wrap: pretty;
}

.testimonio figcaption {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: var(--texto-sm);
}

.testimonio__autor {
    font-weight: 700;
}

.testimonio__curso {
    color: var(--texto-tenue);
}

/* Acordeón (FAQ) ------------------------------------------------------- */

.acordeon {
    display: grid;
    gap: var(--esp-3);
}

.acordeon__item {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    padding: var(--esp-4) var(--esp-5);
}

.acordeon__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.acordeon__item summary::-webkit-details-marker {
    display: none;
}

.acordeon__item summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--acento-fuerte);
    transition: transform var(--transicion);
}

.acordeon__item[open] summary::after {
    transform: rotate(45deg);
}

.acordeon__item p {
    margin-top: var(--esp-3);
    color: var(--texto-suave);
    font-size: var(--texto-sm);
}

/* Verificación --------------------------------------------------------- */

.seccion--verificacion {
    background: var(--superficie-2);
    border-block: 1px solid var(--borde);
    text-align: center;
}

.seccion--verificacion .seccion__descripcion {
    margin-inline: auto;
}

.formulario-verificacion {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--esp-3);
    margin-top: var(--esp-5);
}

.formulario-verificacion input {
    flex: 1 1 20rem;
    max-width: 26rem;
    padding: 0.85rem 1.15rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pill);
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: var(--texto-sm);
}

.formulario-verificacion input::placeholder {
    color: var(--texto-suave);
    opacity: 0.85;
}

.formulario-verificacion input:focus-visible {
    outline: 3px solid var(--acento);
    outline-offset: 2px;
}

/* Llamado docente ------------------------------------------------------ */

.llamado-docente {
    background: var(--texto);
    color: var(--fondo);
}

.llamado-docente__interior {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-6);
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.llamado-docente h2 {
    font-size: var(--texto-2xl);
    max-width: 22ch;
}

.llamado-docente p {
    margin-top: var(--esp-3);
    max-width: 42rem;
    opacity: 0.75;
}

/* Pie ------------------------------------------------------------------ */

.pie {
    padding-block: var(--esp-8) var(--esp-5);
    background: var(--fondo-alterno);
    border-top: 1px solid var(--borde);
}

.pie__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--esp-6);
}

.pie__marca {
    display: grid;
    gap: var(--esp-4);
    align-content: start;
}

.pie__alianza {
    max-width: 20rem;
    color: var(--texto-suave);
    font-size: var(--texto-sm);
}

.pie__columna {
    display: grid;
    align-content: start;
    gap: var(--esp-2);
}

.pie__columna h2 {
    font-family: var(--fuente-base);
    font-size: var(--texto-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    margin-bottom: var(--esp-2);
}

.pie__columna a {
    color: var(--texto-suave);
    font-size: var(--texto-sm);
    transition: color var(--transicion);
}

.pie__columna a:hover {
    color: var(--acento-fuerte);
}

.pie__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--esp-3);
    margin-top: var(--esp-7);
    padding-top: var(--esp-4);
    border-top: 1px solid var(--borde);
    color: var(--texto-tenue);
    font-size: var(--texto-xs);
}

/* Avisos y estados vacíos ---------------------------------------------- */

.aviso {
    margin-top: var(--esp-5);
    padding: var(--esp-4) var(--esp-5);
    border-radius: var(--radio);
    border: 1px solid var(--borde);
    background: var(--superficie);
    color: var(--texto-suave);
    font-size: var(--texto-sm);
    text-align: left;
}

.aviso--info {
    border-color: color-mix(in srgb, var(--acento) 45%, var(--borde));
    background: var(--acento-suave);
    color: var(--texto);
}

.aviso--exito {
    border-color: color-mix(in srgb, var(--exito) 55%, var(--borde));
    background: var(--exito-suave);
    color: var(--exito);
}

.aviso--error {
    border-color: color-mix(in srgb, var(--peligro) 55%, var(--borde));
    background: var(--peligro-suave);
    color: var(--peligro);
}

/* Cuenta y formularios -------------------------------------------------- */

.seccion--cuenta {
    padding-block: clamp(2rem, 5vw, 4rem);
}

.tarjeta-formulario {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    box-shadow: var(--sombra-suave);
}

.tarjeta-formulario--centrada {
    display: grid;
    justify-items: center;
    gap: var(--esp-4);
    text-align: center;
}

.formulario__titulo {
    font-size: var(--texto-2xl);
}

.formulario__descripcion {
    margin-top: var(--esp-2);
    color: var(--texto-suave);
    font-size: var(--texto-sm);
}

.formulario {
    display: grid;
    gap: var(--esp-4);
    margin-top: var(--esp-5);
}

.formulario--secundario {
    margin-top: var(--esp-6);
    padding-top: var(--esp-5);
    border-top: 1px dashed var(--borde);
}

.formulario__nota {
    color: var(--texto-tenue);
    font-size: var(--texto-xs);
}

.formulario__version {
    color: var(--texto-tenue);
}

.formulario__pie {
    margin-top: var(--esp-5);
    color: var(--texto-suave);
    font-size: var(--texto-sm);
}

.formulario__pie a {
    color: var(--acento-fuerte);
    font-weight: 600;
}

.campo {
    display: grid;
    gap: 0.35rem;
}

.campo label {
    font-size: var(--texto-sm);
    font-weight: 600;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 0.72rem 0.9rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    background: var(--fondo);
    color: var(--texto);
    font: inherit;
    font-size: var(--texto-sm);
    transition: border-color var(--transicion), background-color var(--transicion);
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
    outline: 3px solid var(--acento);
    outline-offset: 1px;
}

.campo__error {
    color: var(--peligro);
    font-size: var(--texto-xs);
}

.campo__ayuda {
    color: var(--texto-suave);
    font-size: var(--texto-xs);
    line-height: 1.4;
}

/* Notificaciones ------------------------------------------------------- */
.campana {
    position: relative;
    color: var(--texto);
    text-decoration: none;
}

.campana__contador {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--boton-primario);
    color: var(--boton-primario-contraste);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.lista-notificaciones {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.notificacion {
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: var(--superficie);
    padding: 0.9rem 1.1rem;
}

.notificacion--nueva {
    border-color: color-mix(in srgb, var(--boton-primario) 40%, var(--borde));
    background: color-mix(in srgb, var(--boton-primario) 6%, var(--superficie));
}

.notificacion a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.notificacion__titulo {
    margin: 0 0 0.2rem;
    font-weight: 700;
}

.notificacion__detalle {
    margin: 0 0 0.3rem;
    color: var(--texto-suave);
}

.notificacion__meta {
    margin: 0;
    font-size: var(--texto-xs);
    color: var(--texto-suave);
}

/* Búsqueda ------------------------------------------------------------- */
.pestanas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
}

.pestana {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto);
    font-size: var(--texto-sm);
    font-weight: 600;
    text-decoration: none;
}

.pestana--activa {
    border-color: var(--boton-primario);
    background: var(--boton-primario);
    color: var(--boton-primario-contraste);
}

.lista-resultados {
    display: grid;
    gap: 0.7rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}

.lista-resultados a {
    font-weight: 700;
    color: var(--acento-fuerte);
}

.resultado__meta {
    display: block;
    font-size: var(--texto-sm);
    color: var(--texto-suave);
}

.paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.6rem;
}

.paginacion__estado {
    font-size: var(--texto-sm);
    color: var(--texto-suave);
}

/* Respuesta del docente a una reseña ----------------------------------- */
.respuesta-docente {
    margin-top: 0.8rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--boton-primario);
    border-radius: 0 10px 10px 0;
    background: var(--superficie-2);
}

.respuesta-docente__etiqueta {
    margin: 0 0 0.25rem;
    font-size: var(--texto-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--boton-primario);
}

.texto-suave {
    color: var(--texto-suave);
}

/* Aviso de cookies ------------------------------------------------------ */
.aviso-cookies {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    padding: 0.9rem var(--esp-3);
    background: var(--superficie);
    border-top: 1px solid var(--borde);
    box-shadow: 0 -12px 30px -20px rgba(0, 0, 0, 0.45);
}

.aviso-cookies__interior {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    max-width: 1100px;
    margin: 0 auto;
}

.aviso-cookies__interior p {
    margin: 0;
    font-size: var(--texto-sm);
    color: var(--texto-suave);
}

.aviso-cookies__interior a {
    color: var(--acento-fuerte);
}

/* Varias casillas en la misma fila (ej. Publicada / En menú). */
.campo--inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
    align-items: center;
}

.campo--inline > label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--texto-sm);
    font-weight: 600;
    cursor: pointer;
}

.campo--fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
}

.campo--fila a {
    color: var(--acento-fuerte);
    font-size: var(--texto-sm);
    font-weight: 600;
}

.campo-doble {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--esp-4);
}

.casilla {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--texto-suave);
    font-size: var(--texto-sm);
    cursor: pointer;
}

.casilla input {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.18rem;
    accent-color: var(--acento);
}

.casilla--terminos {
    margin-top: var(--esp-2);
}

.validacion-resumen ul {
    list-style: disc;
    padding-left: 1.25rem;
    color: var(--peligro);
    font-size: var(--texto-sm);
}

.validacion-resumen:empty {
    display: none;
}

.boton--bloque {
    width: 100%;
}

.captcha {
    justify-self: start;
}

.dos-factores__qr {
    display: grid;
    place-items: center;
    width: fit-content;
    margin: var(--esp-4) auto;
    padding: var(--esp-3);
    background: #ffffff;
    border-radius: var(--radio);
}

.dos-factores__clave {
    text-align: center;
    color: var(--texto-suave);
    font-size: var(--texto-sm);
}

.dos-factores__clave code {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.35rem 0.6rem;
    background: var(--superficie-2);
    border-radius: 6px;
    font-family: var(--fuente-mono);
    letter-spacing: 0.08em;
}

.codigos-recuperacion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
}

.codigos-recuperacion code {
    display: block;
    padding: 0.5rem;
    background: var(--superficie-2);
    border-radius: 6px;
    text-align: center;
    letter-spacing: 0.04em;
}

/* Cabecera: sesión y aviso de verificación ------------------------------ */

.cabecera__salir,
.navegacion-movil__sesion {
    display: inline-flex;
}

.navegacion-movil__sesion {
    padding-top: var(--esp-3);
    width: 100%;
}

.navegacion-movil__sesion button {
    width: 100%;
}

.aviso-verificacion {
    background: var(--acento-suave);
    border-bottom: 1px solid var(--borde);
    font-size: var(--texto-sm);
}

.aviso-verificacion__interior {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    padding-block: var(--esp-2);
}

.aviso-verificacion a {
    color: var(--acento-fuerte);
    font-weight: 600;
}

@media (max-width: 640px) {
    .campo-doble,
    .codigos-recuperacion {
        grid-template-columns: 1fr;
    }
}

.estado-vacio {
    display: grid;
    justify-items: center;
    gap: var(--esp-4);
    padding-block: clamp(4rem, 10vw, 8rem);
    text-align: center;
}

.estado-vacio__codigo {
    font-family: var(--fuente-mono);
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 700;
    line-height: 1;
    color: var(--acento);
    opacity: 0.35;
}

.estado-vacio p {
    max-width: 34rem;
    color: var(--texto-suave);
}

/* Responsive ----------------------------------------------------------- */

@media (max-width: 1080px) {
    .navegacion {
        display: none;
    }

    .cabecera__menu {
        display: grid;
    }

    .cabecera__interior {
        justify-content: space-between;
    }

    .cabecera__acciones {
        margin-inline-start: auto;
    }

    .navegacion-movil:not([hidden]) {
        display: grid;
    }
}

@media (max-width: 900px) {
    .hero__interior {
        grid-template-columns: 1fr;
    }

    .hero__visual {
        max-width: 34rem;
    }

    .hero__titulo {
        max-width: none;
    }

    .comunidades {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 720px) {
    .cabecera__ingresar,
    .cabecera__cta {
        display: none;
    }

    .metricas {
        gap: var(--esp-5);
    }

    .pie__rejilla {
        grid-template-columns: 1fr;
    }

    .pie__base {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .cabecera__interior {
        min-height: 66px;
        gap: var(--esp-2);
    }

    .cabecera__acciones {
        gap: var(--esp-2);
    }

    .marca {
        gap: var(--esp-2);
    }

    .marca__logo {
        width: 34px;
        height: 34px;
    }

    .marca__simbolo {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .marca__texto {
        font-size: 0.95rem;
    }

    /* En pantallas muy pequeñas la marca usa sólo el nombre corto. */
    .marca__texto-secundario {
        display: none;
    }

    .boton-icono {
        width: 36px;
        height: 36px;
    }

    .idioma {
        padding: 0.15rem 0.4rem;
    }
}