@import "../../../_main/components/editorial-style.css";

/* Landing Posgrado en Educación. El diseño vive en estilos en línea (exportado del lienzo);
   aquí solo va lo que no cabe en línea. */
/* Color de fondo de la landing y su tono claro (textos y estrellas sobre el fondo). Mientras Maestría está
   en la card grande del hero, el script pone .pe-azul en el body. El rojo propio de Doctorado no usa estas variables. */
body.pe-body {
    --pe-fondo: #7A1D3B;
    --pe-fondo-claro: #F2D6DF;
    margin: 0;
    background: var(--pe-fondo);
}

body.pe-body.pe-azul {
    --pe-fondo: #002344;
    --pe-fondo-claro: #D4E3F2;
}

/* La transición va solo en los elementos que usan las variables (en sus estilos en línea): es un cambio de color,
   no mueve el layout. */
body.pe-body,
.pe-landing,
.pe-landing [style*="var(--pe-fondo"] {
    transition: background-color 0.6s ease, color 0.6s ease, fill 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
    body.pe-body,
    .pe-landing,
    .pe-landing [style*="var(--pe-fondo"] { transition: none; }
}

.pe-landing a { color: #0D1B33; }
.pe-landing a:hover { color: #1F5FD1; }

/* El footer de la plataforma se incluye por sus scripts (formulario CRM, GTM), pero su diseño
   no se muestra: la landing tiene su propio footer. */
.pe-body .editorial-footer {
    display: none;
}

/* Botón del hero que solo se ve en móvil (en escritorio va dentro del H1). */
.pe-cta-movil {
    display: none;
}

/* Móvil. El diseño vive en estilos en línea, por eso estas reglas usan !important. */
@media (max-width: 760px) {
    .pe-landing .nav-links { display: none !important; }

    /* Hero: primero el titular y el botón, luego la card grande y al final las dos chicas. */
    .pe-landing main { flex-direction: column; }
    .pe-hero-col { display: contents !important; }
    .pe-hero-texto { order: 1; }
    .pe-slot[data-slot="2"] { order: 2; flex: none !important; min-height: 440px !important; }
    .pe-chicas { order: 3; }

    /* Titular en las mismas tres líneas del escritorio, a un tamaño que entra en el ancho del teléfono. */
    .pe-h1 { font-size: min(9vw, 52px) !important; }
    .pe-h1 img { width: 44px !important; height: 44px !important; margin-left: -12px !important; }
    .pe-h1 img:first-child { margin-left: 0 !important; }
    .pe-cta-h1 { display: none !important; }
    .pe-cta-movil { display: inline-flex; }

    /* Vidrio de la card grande: más compacto para que las palabras largas de los programas ("Universitaria",
       "Instituciones") quepan desde 360px. */
    .pe-vidrio { padding: 16px 16px 16px 20px !important; gap: 14px !important; }
    .pe-gtitle { font-size: 21px !important; }
    .pe-vidrio .pe-gtitle.pe-gtitle--largo { font-size: 19px !important; }
    .pe-gsub { min-width: 6em !important; }

    /* Teléfonos angostos (card grande de menos de 315px): el vidrio apila el nombre del programa y el texto. */
    .pe-slot[data-slot="2"] { container-type: inline-size; }

    @container (max-width: 314.98px) {
        .pe-vidrio { flex-direction: column; align-items: flex-start !important; gap: 6px !important; }
        .pe-vidrio > span[aria-hidden="true"] { display: none; }
        .pe-gsub { min-width: 0 !important; }
    }

    /* Formulario: el título y enseguida el formulario; el texto del SGI y la foto con los logos quedan debajo. */
    .pe-form-sec { flex-direction: column; align-items: stretch !important; gap: 20px !important; padding: 24px 18px !important; }
    .pe-form-col { display: contents !important; }
    #form-title { order: 1; text-align: center; }
    .pe-form { order: 2; flex: none !important; width: auto !important; align-self: stretch !important; margin-top: 0 !important; }
    /* Aire extra bajo el formulario: su sombra baja ~24px y pegaba visualmente el texto a la caja. */
    .pe-sgi { order: 3; margin-top: 20px !important; }
    .pe-form-foto { order: 4; }

    /* Cards de beneficios apiladas: sin las franjas blancas del escritorio (allí unen las cards de lado a lado),
       separadas por una línea fina. */
    #beneficios { margin: 0 !important; gap: 0 !important; background: none !important; }
    #beneficios > article { position: relative; }
    #beneficios > article + article::before {
        content: "";
        position: absolute;
        top: 0;
        left: 28px;
        right: 28px;
        height: 1px;
        background: rgba(255, 255, 255, 0.25);
    }

    /* Enlaces legales uno debajo del otro, sin los separadores. */
    .pe-legal { flex-direction: column; gap: 10px !important; }
    .pe-legal > span[aria-hidden="true"] { display: none; }
}

/* Hero: los niveles rotan entre las tres cards (script al final de index.php). Al cambiar, cada card
   desvanece su contenido (.is-out), cambia de nivel y vuelve a aparecer. */
.pe-slot .pe-fade {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Nombre con una palabra muy larga ("Gobernabilidad"): el título del vidrio baja un poco para caber. */
.pe-gtitle.pe-gtitle--largo {
    font-size: 24px !important;
}

.pe-slot.is-out .pe-fade,
.pe-vidrio.is-out .pe-fade {
    opacity: 0;
    transform: translateY(6px);
}

.pe-slot .pe-img {
    transition: opacity 0.35s ease, transform 0.6s ease;
}

.pe-slot.is-out .pe-img {
    opacity: 0;
    transform: scale(1.04);
}

.pe-dot-in {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pe-dot.is-active .pe-dot-in,
.pe-dot:hover .pe-dot-in {
    opacity: 1;
}

.pe-dot:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: -4px;
    border-radius: 999px;
}

/* Etiquetas del hero: la completa ("Doctorado en 3 años") cuando cabe en una línea y la corta ("Doctorado")
   cuando la columna de texto de la card chica es más angosta. data-largo = ancho en px que necesita la completa. */
.pe-texto {
    container-type: inline-size;
}

.pe-corto {
    display: none;
}

@container (max-width: 188.98px) {
    .pe-pill-text[data-largo="189"] .pe-largo { display: none; }
    .pe-pill-text[data-largo="189"] .pe-corto { display: inline; }
}

@container (max-width: 168.98px) {
    .pe-pill-text[data-largo="169"] .pe-largo { display: none; }
    .pe-pill-text[data-largo="169"] .pe-corto { display: inline; }
}

@container (max-width: 227.98px) {
    .pe-pill-text[data-largo="228"] .pe-largo { display: none; }
    .pe-pill-text[data-largo="228"] .pe-corto { display: inline; }
}

/* Columna muy angosta (móvil): sin el reloj para que "2.ª Especialidad" quepa en una línea. */
@container (max-width: 159.98px) {
    .pe-pill > svg { display: none; }
}

/* Cada card del hero es clicable entera: un botón transparente encima abre la lista de programas de su nivel
   (ventana .pe-programas, script al final de index.php). */
.pe-chicas .pe-slot {
    position: relative;
}

.pe-ver {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}

.pe-ver:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: -6px;
}

.pe-chicas .pe-ver:focus-visible {
    outline-color: #0D1B33;
}

/* En la card grande, la etiqueta y el vidrio dejan pasar el clic a la foto. */
.pe-slot[data-slot="2"] .pe-pill,
.pe-vidrio {
    pointer-events: none;
}

.pe-programas {
    box-sizing: border-box;
    width: min(520px, calc(100% - 32px));
    max-height: min(640px, calc(100% - 48px));
    margin: auto; /* centrado del <dialog>; el reset de la plataforma lo deja en 0 */
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: #FFFFFF;
    color: #0D1B33;
    box-shadow: 0 24px 60px rgba(13, 27, 51, 0.3);
    overflow: auto;
}

.pe-programas::backdrop {
    background: rgba(13, 27, 51, 0.55);
}

html:has(.pe-programas[open]) {
    overflow: hidden;
}

.pe-programas-caja {
    position: relative;
    padding: 28px;
}

.pe-programas-cerrar {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #F1F3F7;
    color: #0D1B33;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pe-programas-cerrar:focus-visible {
    outline: 2px solid #0D1B33;
    outline-offset: 2px;
}

.pe-programas-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
}

.pe-programas h2 {
    margin: 16px 0 8px;
    font-size: clamp(26px, calc(2.4 * var(--pe-vw, 1vw)), 34px);
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.04em;
}

.pe-programas ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pe-programas li {
    padding: 12px 0;
    border-top: 1px solid #E6E9EF;
    font-size: 16px;
    line-height: 1.4;
}

.pe-programas li:first-child {
    border-top: 0;
}

/* Franja de texto entre el hero y el formulario: dos copias seguidas del texto que se desplazan
   media pista, así el bucle no tiene corte. Pasa por detrás de la caja del formulario (.pe-form). */
.pe-marquee {
    /* Difuminado a los lados para que el texto entre y salga sin corte brusco. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.pe-marquee-track {
    display: flex;
    width: max-content;
    animation: pe-marquee 45s linear infinite;
}

@keyframes pe-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .pe-marquee-track { animation: none; }
}

/* Pantallas grandes: el zoom de .pe-landing y --pe-vw los fija el script al final de index.php
   (según el ancho y el alto de la pantalla). Sin JavaScript la landing se ve sin escalar. */