/* =============================================================
   Academia Pryma — sistema visual "Lumina"
   Tokens traducidos de stitch_academia_pryma_web_design/lumina_academy_system/DESIGN.md
   Todos los componentes van con prefijo .pry- para no chocar con
   las clases genéricas que ya usan otras plantillas (.card, .container,
   .row, .feature, .content, .boton).
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
    /* Superficies */
    --surface: #f9faf8;
    --surface-dim: #d9dad8;
    --surface-lowest: #ffffff;
    --surface-low: #f3f4f2;
    --surface-container: #edeeec;
    --surface-high: #e7e8e6;
    --surface-variant: #e1e3e1;

    /* Texto */
    --on-surface: #191c1b;
    --on-surface-var: #434843;
    --outline: #737873;
    --outline-var: #c3c8c1;

    /* Primario (sage) */
    --primary: #516355;
    --on-primary: #ffffff;
    --primary-container: #9db0a0;
    --on-primary-container: #334337;
    --primary-fixed: #d4e8d6;
    --on-primary-fixed: #0f1f14;

    /* Secundario (naranja) */
    --secondary: #8e4e14;
    --on-secondary: #ffffff;
    --secondary-container: #ffab69;
    --on-secondary-container: #783d01;
    --secondary-fixed: #ffdcc4;
    --on-secondary-fixed: #2f1400;

    /* Terciario (slate) */
    --tertiary: #436370;
    --on-tertiary: #ffffff;
    --tertiary-container: #90b0bf;
    --on-tertiary-container: #234350;

    /* Error */
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;

    /* Radios */
    --r-sm: 0.25rem;
    --r-default: 0.5rem;
    --r-md: 0.75rem;
    --r-lg: 1rem;
    --r-xl: 1.5rem;
    --r-full: 9999px;

    /* Espaciado (base 4px) */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 40px;
    --sp-margin: 32px;
    --max-width: 1280px;

    /* Elevación: sombras siempre con tinte terciario, nunca negro puro */
    --shadow-1: 0 4px 20px rgba(38, 70, 83, 0.05);
    --shadow-2: 0 8px 30px rgba(38, 70, 83, 0.08);

    /* Tipografía */
    --font-headline: 'Manrope', 'Segoe UI', Tahoma, sans-serif;
    --font-body: 'Work Sans', 'Segoe UI', Tahoma, sans-serif;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* que las anclas #formulario no queden bajo la cabecera fija */
    scroll-padding-top: 96px;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--on-surface);
    background-color: var(--surface);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > main {
    flex: 1 0 auto;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ---------- Escala tipográfica ---------- */
.t-headline-xl {
    font-family: var(--font-headline);
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.t-headline-lg {
    font-family: var(--font-headline);
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.t-headline-md {
    font-family: var(--font-headline);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}

.t-headline-sm {
    font-family: var(--font-headline);
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
}

.t-body-lg {
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
}

.t-body-md {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.t-body-sm {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.t-label-md {
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.t-label-sm {
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
}

.t-muted {
    color: var(--on-surface-var);
}

.t-primary {
    color: var(--primary);
}

.t-secondary {
    color: var(--secondary);
}

.t-center {
    text-align: center;
}

/* ---------- Layout ---------- */
.pry-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: var(--sp-md);
    padding-right: var(--sp-md);
}

.pry-section {
    padding-top: var(--sp-xl);
    padding-bottom: var(--sp-xl);
}

.pry-section--tint {
    background-color: var(--surface-low);
}

.pry-section--sage {
    background-color: rgba(157, 176, 160, 0.18);
}

.pry-section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--sp-xl) auto;
}

.pry-section-head > * + * {
    margin-top: var(--sp-md);
}

.pry-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}

.pry-stack--sm {
    gap: var(--sp-sm);
}

.pry-stack--lg {
    gap: var(--sp-lg);
}

.pry-grid-2,
.pry-grid-3,
.pry-grid-4 {
    display: grid;
    gap: var(--sp-lg);
    grid-template-columns: 1fr;
}

/* ---------- Botones ---------- */
.pry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-sm);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 14px 24px;
    border: 1px solid transparent;
    border-radius: var(--r-default);
    cursor: pointer;
    text-align: center;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .1s ease;
}

.pry-btn:hover {
    text-decoration: none;
}

.pry-btn:active {
    transform: scale(.98);
}

.pry-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.pry-btn--primary {
    background-color: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--shadow-1);
}

.pry-btn--primary:hover {
    background-color: var(--primary-container);
    color: var(--on-primary-container);
}

.pry-btn--outline {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.pry-btn--outline:hover {
    background-color: rgba(81, 99, 85, 0.06);
}

.pry-btn--ghost {
    background-color: transparent;
    color: var(--on-surface);
    border-color: var(--outline);
}

.pry-btn--ghost:hover {
    background-color: rgba(225, 227, 225, 0.5);
}

.pry-btn--block {
    width: 100%;
}

.pry-btn--lg {
    padding: 16px 32px;
    font-size: 16px;
    line-height: 20px;
}

/* Compacto: para la cabecera, donde el espacio horizontal es escaso */
.pry-btn--sm {
    padding: 13px 16px;
    font-size: 13px;
}

.pry-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-md);
}

.pry-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sm);
    color: var(--secondary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-top: auto;
}

/* ---------- Tarjetas ---------- */
.pry-card {
    background-color: var(--surface-lowest);
    border: 1px solid var(--outline-var);
    border-radius: var(--r-lg);
    padding: var(--sp-lg);
    box-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    transition: box-shadow .2s ease;
}

.pry-card--hover:hover {
    box-shadow: var(--shadow-2);
}

.pry-card--tint {
    background-color: var(--surface-low);
    box-shadow: none;
}

.pry-card--center {
    align-items: center;
    text-align: center;
}

.pry-panel {
    background-color: var(--surface-low);
    border: 1px solid var(--outline-var);
    border-radius: var(--r-xl);
    padding: var(--sp-lg);
}

/* Franja de ventajas: tarjetas compactas con icono */
.pry-highlight {
    background-color: var(--surface-lowest);
    border: 1px solid var(--outline-var);
    border-radius: var(--r-md);
    padding: var(--sp-md);
    box-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-sm);
}

.pry-highlight i {
    font-size: 28px;
    color: var(--tertiary);
}

/* Icono en cuadrado tintado (tarjetas de contacto) */
.pry-icon-box {
    width: 48px;
    height: 48px;
    border-radius: var(--r-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.pry-icon-box--primary {
    background-color: var(--primary-container);
    color: var(--on-primary-container);
}

.pry-icon-box--secondary {
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
}

.pry-icon-box--tertiary {
    background-color: var(--tertiary-container);
    color: var(--on-tertiary-container);
}

/* Icono circular grande (valores) */
.pry-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: var(--r-full);
    background-color: rgba(81, 99, 85, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

/* ---------- Pasos numerados ---------- */
.pry-step {
    background-color: var(--surface-lowest);
    border: 1px solid var(--outline-var);
    border-radius: var(--r-md);
    padding: var(--sp-lg);
    box-shadow: var(--shadow-1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-sm);
}

.pry-step__num {
    width: 48px;
    height: 48px;
    border-radius: var(--r-full);
    background-color: var(--primary-fixed);
    color: var(--primary);
    font-family: var(--font-headline);
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-sm);
}

.pry-step__num--secondary {
    background-color: var(--secondary-fixed);
    color: var(--on-secondary-fixed);
}

/* Lista vertical de pasos (rutas de la home) */
.pry-route {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    position: relative;
}

.pry-route::before {
    content: '';
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 24px;
    width: 2px;
    background-color: var(--surface-variant);
}

.pry-route__item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    background-color: var(--surface);
    padding: var(--sp-sm) 0;
}

.pry-route__num {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--r-full);
    background-color: var(--primary-fixed);
    color: var(--primary);
    font-family: var(--font-headline);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-1);
}

.pry-route__num--secondary {
    background-color: var(--secondary-fixed);
    color: var(--on-secondary-fixed);
}

.pry-route__title {
    font-family: var(--font-headline);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--primary);
    text-align: center;
    padding-bottom: var(--sp-md);
    margin-bottom: var(--sp-lg);
    border-bottom: 1px solid var(--surface-variant);
}

/* ---------- Hero ---------- */
.pry-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
    align-items: center;
    padding-top: var(--sp-xl);
    padding-bottom: var(--sp-xl);
}

.pry-hero__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}

/* Hero sin imagen: una sola columna centrada. Se limita el ancho del texto
   para que el titular no se estire de borde a borde en pantallas grandes. */
.pry-hero--centrado {
    justify-items: center;
    text-align: center;
}

.pry-hero--centrado .pry-hero__body {
    align-items: center;
    max-width: 820px;
}

.pry-hero--centrado .pry-btn-row {
    justify-content: center;
}

/* ---------- Imágenes ---------- */
.pry-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-xl);
    overflow: hidden;
    background-color: var(--primary-fixed);
    border: 1px solid var(--outline-var);
    box-shadow: var(--shadow-1);
}

.pry-media--wide {
    aspect-ratio: 16 / 9;
}

.pry-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Reproductor embebido 16:9 */
.pry-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    overflow: hidden;
    background-color: var(--on-surface);
    box-shadow: var(--shadow-2);
}

.pry-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Hueco sin foto: bloque de marca con icono, listo para sustituir */
.pry-media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-fixed) 0%, var(--surface-low) 100%);
    color: var(--primary);
    font-size: 48px;
}

/* ---------- Chips y citas ---------- */
.pry-chip {
    display: inline-block;
    /* dentro de .pry-card (flex column) evita que se estire a todo el ancho */
    align-self: flex-start;
    background-color: var(--primary-fixed);
    color: var(--on-primary-fixed);
    border-radius: var(--r-sm);
    padding: var(--sp-xs) var(--sp-sm);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.pry-chip--secondary {
    background-color: var(--secondary-fixed);
    color: var(--on-secondary-fixed);
}

.pry-quote {
    border-left: 4px solid var(--secondary);
    padding: var(--sp-sm) 0 var(--sp-sm) var(--sp-md);
    font-style: italic;
    color: var(--on-surface-var);
    font-size: 18px;
    line-height: 28px;
}

/* Fila icono + texto ("Contacto directo con tu profesor") */
.pry-feature-row {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
}

.pry-feature-row i {
    color: var(--primary);
    font-size: 20px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

/* Variante con título + descripción: el icono se alinea con la primera línea,
   no con el centro del bloque de texto. */
.pry-feature-row--top {
    align-items: flex-start;
}

/* Tarjeta-enlace de curso ("Curso Online / Matemáticas II") */
.pry-course-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-md);
    background-color: var(--surface-low);
    border: 1px solid var(--surface-variant);
    border-radius: var(--r-md);
    padding: var(--sp-md) var(--sp-lg);
    color: var(--on-surface);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.pry-course-link:hover {
    text-decoration: none;
    border-color: var(--primary-container);
    box-shadow: var(--shadow-1);
}

.pry-course-link i {
    color: var(--primary);
}

/* ---------- Formularios ---------- */
.pry-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
}

.pry-form-row,
.pry-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
}

/* Los campos largos (textarea) y los marcados como anchos ocupan la fila completa */
.pry-form-grid .pry-form-group:has(textarea),
.pry-form-grid .pry-form-group:has(.pry-field--ancho),
.pry-form-grid > .pry-check,
.pry-form-grid > .pry-errors {
    grid-column: 1 / -1;
}

.pry-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.pry-label {
    font-size: 12px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--on-surface-var);
}

.pry-field {
    width: 100%;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--on-surface);
    background-color: var(--surface-lowest);
    border: 1px solid var(--outline-var);
    border-radius: var(--r-default);
    padding: 12px 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.pry-field::placeholder {
    color: var(--outline);
}

.pry-field:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(81, 99, 85, 0.15);
}

textarea.pry-field {
    resize: vertical;
    min-height: 120px;
}

select.pry-field {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23434843'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
}

.pry-help {
    font-size: 12px;
    line-height: 16px;
    color: var(--on-surface-var);
}

/* Los validadores de contraseña de Django entregan su ayuda como <ul>, y el
   reset global deja los topos fuera del bloque si no se sangra la lista. */
.pry-help ul {
    padding-left: 1.1rem;
}

/* Casilla de verificación con la etiqueta al lado (aceptar condiciones).
   No sirve .pry-form-group: al ser flex en columna estira la casilla. */
.pry-check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm);
}

.pry-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    /* alinea la casilla con la primera línea del texto, no con el borde */
    margin-top: 2px;
    accent-color: var(--primary);
}

.pry-check label {
    font-size: 14px;
    line-height: 20px;
    color: var(--on-surface-var);
}

.pry-errors {
    list-style: none;
    color: var(--error);
    font-size: 12px;
    line-height: 16px;
}

.pry-form-card {
    background-color: var(--surface-lowest);
    border: 1px solid var(--outline-var);
    border-radius: var(--r-xl);
    padding: var(--sp-lg);
    box-shadow: var(--shadow-2);
}

/* Login y registro lado a lado. A diferencia de .pry-grid-2 no se parte en dos
   columnas a 768px, sino a 1024px: entre 768 y 1023 cada tarjeta ya reparte sus
   campos a dos columnas (.pry-form-grid) y con las dos tarjetas en paralelo los
   campos se quedarían por debajo de 150px de ancho. */
.pry-auth-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
    /* las tarjetas tienen alturas muy distintas: que no se estire la corta */
    align-items: start;
}

/* ---------- Avisos (django.contrib.messages) ---------- */
.pry-messages {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    margin-bottom: var(--sp-lg);
}

.pry-message {
    border-radius: var(--r-default);
    padding: 12px 16px;
    font-size: 14px;
    line-height: 20px;
    border: 1px solid transparent;
}

.pry-message.success {
    background-color: var(--primary-fixed);
    color: var(--on-primary-fixed);
    border-color: var(--primary-container);
}

.pry-message.error {
    background-color: var(--error-container);
    color: var(--on-error-container);
    border-color: var(--error);
}

.pry-message.info,
.pry-message.warning,
.pry-message.debug {
    background-color: var(--secondary-fixed);
    color: var(--on-secondary-fixed);
    border-color: var(--secondary-container);
}

/* ---------- Cabecera ---------- */
.pry-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(249, 250, 248, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--outline-var);
}

/* Marca · nav · botón. En móvil la nav se descuelga a una segunda fila. */
.pry-header__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    min-height: 72px;
    padding-top: var(--sp-sm);
    padding-bottom: var(--sp-sm);
}

.pry-header__brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.pry-header__brand:hover {
    text-decoration: none;
}

.pry-header__brand img {
    height: 44px;
    width: auto;
    max-width: none;
}

@media (min-width: 1100px) {
    .pry-header__brand img {
        height: 64px;
    }
}

.pry-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    flex-shrink: 0;
}

/* Acceso al panel de administración: icono, para no comerse la barra */
.pry-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--outline-var);
    border-radius: var(--r-default);
    color: var(--primary);
    font-size: 16px;
    cursor: pointer;
    transition: background-color .2s ease;
}

.pry-icon-btn:hover {
    background-color: var(--surface-low);
    text-decoration: none;
}

.pry-nav {
    display: none;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    gap: var(--sp-xs);
    padding-bottom: var(--sp-md);
    border-top: 1px solid var(--outline-var);
    padding-top: var(--sp-sm);
}

.pry-nav.show {
    display: flex;
}

.pry-nav a {
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--on-surface-var);
    padding: 12px var(--sp-sm);
    border-radius: var(--r-default);
    transition: color .2s ease, background-color .2s ease;
}

.pry-nav a:hover {
    color: var(--primary);
    background-color: var(--surface-low);
    text-decoration: none;
}

.pry-nav a.is-active {
    color: var(--primary);
    font-weight: 700;
}

/* Enlace ACADEMIA resaltado tras iniciar sesión */
.pry-nav a.resaltar {
    color: var(--on-secondary-container);
    border: 2px solid var(--secondary-container);
    border-radius: var(--r-full);
}

.pry-nav a.resaltar:hover {
    background-color: var(--secondary-container);
}

.pry-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--outline-var);
    border-radius: var(--r-default);
    color: var(--primary);
    font-size: 18px;
    cursor: pointer;
}

/* Título heredado por las plantillas antiguas ({% block titulo %}) */
.pry-page-title {
    font-family: var(--font-headline);
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--primary);
    padding-top: var(--sp-xl);
    text-align: center;
}

/* Si la plantilla hija no define {% block titulo %}, no dejamos hueco */
.pry-page-title:empty {
    display: none;
}

/* ---------- Pie ---------- */
.pry-footer {
    background-color: var(--surface-low);
    border-top: 1px solid var(--outline-var);
    padding-top: var(--sp-xl);
    padding-bottom: var(--sp-xl);
    margin-top: var(--sp-xl);
}

.pry-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
}

.pry-footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    font-size: 14px;
    line-height: 20px;
    color: var(--on-surface-var);
}

.pry-footer__col a {
    color: var(--on-surface-var);
}

.pry-footer__col a:hover {
    color: var(--secondary);
}

.pry-footer__brand {
    font-family: var(--font-headline);
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.pry-footer__social {
    display: flex;
    gap: var(--sp-md);
    align-items: center;
}

.pry-footer__social a {
    width: 32px;
    height: 32px;
    border-radius: var(--r-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

.pry-footer__social a:hover {
    text-decoration: none;
    opacity: .85;
}

.pry-footer__social .whatsapp {
    background-color: #2ba63a;
}

.pry-footer__social .linkedin {
    background-color: #0678b6;
}

.pry-footer__social .instagram {
    background: linear-gradient(45deg, #feda75, #d62976, #962fbf, #4f5bd5);
}

/* ---------- Utilidades ---------- */
.pry-mt-lg { margin-top: var(--sp-lg); }
.pry-mt-xl { margin-top: var(--sp-xl); }
.pry-mb-lg { margin-bottom: var(--sp-lg); }
.pry-narrow { max-width: 768px; margin-left: auto; margin-right: auto; }
.pry-italic { font-style: italic; }

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
    .pry-container {
        padding-left: var(--sp-margin);
        padding-right: var(--sp-margin);
    }

    .pry-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .pry-hero {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .pry-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .pry-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .pry-grid-4 { grid-template-columns: repeat(2, 1fr); }

    .pry-form-row,
    .pry-form-grid { grid-template-columns: repeat(2, 1fr); }

    .pry-footer__grid { grid-template-columns: repeat(3, 1fr); }

    .pry-panel { padding: var(--sp-xl); }

    .pry-form-card { padding: var(--sp-xl); }

    .pry-page-title { font-size: 40px; line-height: 48px; }

    /* Fila de botones que no se parte: los tres CTA del hero de Cursos se
       mantienen en una sola línea dentro de la media columna. Si el ancho
       aprieta, el texto del botón se reparte en dos renglones en vez de que
       el botón salte de fila. */
    .pry-btn-row--linea {
        flex-wrap: nowrap;
        gap: var(--sp-sm);
    }

    .pry-btn-row--linea .pry-btn {
        min-width: 0;
        padding-left: var(--sp-md);
        padding-right: var(--sp-md);
    }
}

/* ---------- Cabecera en una sola fila ----------
   Con sesión de staff la nav llega a 7 enlaces con etiquetas largas en
   español. Por debajo de 1100px no caben junto al logo y el botón de
   sesión, así que ahí se usa el menú desplegable en vez de dejar que la
   barra se parta en dos renglones. Entre 1100 y 1280 los enlaces van un
   punto más pequeños para que quepan sin apreturas. */
@media (min-width: 1100px) {
    .pry-header__bar {
        flex-wrap: nowrap;
        min-height: 88px;
        gap: var(--sp-sm);
    }

    .pry-nav {
        display: flex !important;
        order: 0;
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: var(--sp-xs);
        padding-top: 0;
        padding-bottom: 0;
        border-top: none;
    }

    .pry-nav a {
        font-size: 13px;
        padding: 12px 6px;
    }

    .pry-nav a.is-active {
        border-bottom: 2px solid var(--primary);
        border-radius: 0;
    }

    .pry-nav-toggle {
        display: none;
    }
}

@media (min-width: 1280px) {
    .pry-nav a {
        font-size: 14px;
        padding: 12px 10px;
    }
}

/* Con el hero a una columna, una imagen 4:3 a todo el ancho se come la
   pantalla; en ese tramo se recorta a panorámica. */
@media (max-width: 1023px) {
    .pry-hero .pry-media {
        aspect-ratio: 16 / 9;
    }
}

/* ---------- Tablet: titulares intermedios ----------
   Entre 768 y 1023 el hero sigue a una columna, pero el ancho ya no es de
   móvil: 32px se queda corto y 48px desborda visualmente. */
@media (min-width: 768px) and (max-width: 1023px) {
    .t-headline-xl {
        font-size: 38px;
        line-height: 46px;
    }

    .t-headline-lg {
        font-size: 28px;
        line-height: 36px;
    }
}

/* ---------- Escritorio ---------- */
@media (min-width: 1024px) {
    .pry-grid-4 { grid-template-columns: repeat(4, 1fr); }

    .pry-auth-grid { grid-template-columns: 1fr 1fr; }

    /* El hero pasa a dos columnas solo cuando cada una tiene ancho suficiente
       para que el titular de 48px no se parta en seis líneas. */
    .pry-hero {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-xl);
    }

    .pry-hero--centrado {
        grid-template-columns: 1fr;
    }
}

/* ---------- Móvil: titulares más contenidos ---------- */
@media (max-width: 767px) {
    .t-headline-xl {
        font-size: 32px;
        line-height: 40px;
    }

    .t-headline-lg {
        font-size: 24px;
        line-height: 32px;
    }

    .pry-btn-row .pry-btn {
        flex: 1 1 100%;
    }
}