/* ==========================================================================
   INNER PAGES — Capa premium editorial (v1.0)
   Se encola SOLO desde los templates de páginas internas:
   page.php, single.php, index.php, 404.php, page-contacto.php, page-trabaja.php
   No renombra ni reemplaza clases/variables existentes: las refina.
   Depende de uninter-style + uninter-home-v5 (carga después, gana por orden).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE HEADER — navy profundo, acentos oro, jerarquía editorial
   -------------------------------------------------------------------------- */
.page-header {
    background: linear-gradient(160deg, #0a1330 0%, var(--navy) 46%, var(--navy-light) 100%);
    padding: 108px 0 84px;
}

.page-header::before {
    background:
        radial-gradient(ellipse 55% 85% at 85% 8%, rgba(239, 51, 64, .16) 0%, transparent 60%),
        radial-gradient(ellipse 45% 65% at 6% 96%, rgba(200, 162, 75, .13) 0%, transparent 55%);
}

.page-header::after {
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--gold, #C8A24B) 50%, var(--accent) 100%);
    opacity: .9;
}

.page-header h1 {
    font-family: var(--font-display, 'Fraunces', 'Cormorant Garamond', Georgia, serif);
    font-weight: 500;
    font-size: clamp(2.5rem, 5vw, 3.7rem);
    letter-spacing: -0.015em;
    line-height: 1.08;
}

/* Regla dorada bajo el título */
.page-header h1::after {
    content: '';
    display: block;
    width: 56px;
    height: 2px;
    background: var(--gold, #C8A24B);
    border-radius: 2px;
    margin: 20px auto 0;
}

/* Breadcrumb tipo "small caps" — para rutas cortas (Inicio › Página) */
.page-header__breadcrumb {
    margin-top: 18px;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .52);
}

.page-header__breadcrumb a {
    color: rgba(255, 255, 255, .72) !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
    padding-bottom: 1px;
}

.page-header__breadcrumb a:hover {
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, .6);
}

/* Variante lede — oraciones descriptivas largas (sin small caps) */
.page-header__breadcrumb--lede {
    text-transform: none;
    letter-spacing: .01em;
    font-weight: 400;
    font-size: 1rem;
    color: rgba(255, 255, 255, .66);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* Aire entre header y contenido */
.page-header + .section { padding-top: 76px; }

/* --------------------------------------------------------------------------
   2. TIPOGRAFÍA EDITORIAL DEL CONTENIDO
   Alcance: hijos directos de .page-content / .entry-content para no tocar
   grids, cards ni secciones embebidas (voces, diplomados, carrera-feature).
   -------------------------------------------------------------------------- */
.page-content > p,
.entry-content > p {
    max-width: 68ch;
    line-height: 1.8;
    margin-bottom: 1.5em;
    color: var(--text);
}

/* Leads centrados (carreras, contacto) */
.page-content > .lead {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.15rem;
    line-height: 1.75;
}

/* H2 — Fraunces display con acento de marca, sin el subrayado full-width */
.page-content > h2,
.entry-content > h2 {
    font-family: var(--font-display, 'Fraunces', 'Cormorant Garamond', Georgia, serif);
    font-weight: 600;
    font-size: clamp(1.75rem, 3vw, 2.2rem);
    letter-spacing: -0.012em;
    line-height: 1.18;
    color: var(--dark);
    border-bottom: none;
    padding-bottom: 0;
    margin: 2.4em 0 .85em;
}

.page-content > h2::before,
.entry-content > h2::before {
    content: '';
    display: block;
    width: 42px;
    height: 3px;
    background: var(--accent-bright);
    border-radius: 2px;
    margin-bottom: 14px;
}

.page-content > h2:first-child,
.entry-content > h2:first-child { margin-top: 0; }

/* H3 — jerarquía secundaria editorial */
.page-content > h3,
.entry-content > h3 {
    font-family: var(--font-display, 'Fraunces', 'Cormorant Garamond', Georgia, serif);
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: -0.008em;
    margin: 2em 0 .7em;
    color: var(--dark);
}

/* Links del texto corrido — subrayado refinado */
.page-content > p a:not(.btn),
.entry-content > p a:not(.btn),
.page-content > ul a:not(.btn),
.page-content > ol a:not(.btn),
.entry-content > ul a:not(.btn),
.entry-content > ol a:not(.btn) {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(193, 45, 56, .38);
    text-underline-offset: 3px;
    transition: color .2s, text-decoration-color .2s;
}

.page-content > p a:not(.btn):hover,
.entry-content > p a:not(.btn):hover,
.page-content > ul a:not(.btn):hover,
.page-content > ol a:not(.btn):hover,
.entry-content > ul a:not(.btn):hover,
.entry-content > ol a:not(.btn):hover {
    color: var(--accent-hover);
    text-decoration-color: currentColor;
}

/* UL — marcadores de guion rojo, ritmo generoso */
.page-content > ul,
.entry-content > ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.8em;
    max-width: 66ch;
}

.page-content > ul > li,
.entry-content > ul > li {
    position: relative;
    padding-left: 1.75em;
    margin-bottom: .7em;
    line-height: 1.78;
}

.page-content > ul > li::before,
.entry-content > ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .78em;
    width: .8em;
    height: 2px;
    background: var(--accent-bright);
    border-radius: 2px;
}

/* OL — pasos numerados con círculo editorial y línea conectora */
.page-content > ol,
.entry-content > ol {
    list-style: none;
    padding: 0;
    margin: .4em 0 2em;
    max-width: 66ch;
    counter-reset: paso;
}

.page-content > ol > li,
.entry-content > ol > li {
    counter-increment: paso;
    position: relative;
    padding: 4px 0 1.6em 62px;
    min-height: 46px;
    line-height: 1.75;
}

.page-content > ol > li::before,
.entry-content > ol > li::before {
    content: counter(paso, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display, 'Fraunces', 'Cormorant Garamond', Georgia, serif);
    font-size: .95rem;
    font-weight: 600;
    color: var(--accent);
    background: #fff;
    border: 1.5px solid rgba(193, 45, 56, .38);
    border-radius: 50%;
}

.page-content > ol > li:not(:last-child)::after,
.entry-content > ol > li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 50px;
    bottom: 8px;
    width: 1px;
    background: var(--border-soft);
}

.page-content > ol > li:last-child,
.entry-content > ol > li:last-child { padding-bottom: .3em; }

.page-content > ol > li strong,
.entry-content > ol > li strong { color: var(--dark); }

/* Blockquote — cita editorial con barra de marca */
.page-content > blockquote,
.entry-content > blockquote {
    margin: 2.4em 0;
    padding: 6px 0 6px 30px;
    border-left: 3px solid var(--accent-bright);
    font-family: var(--font-display, 'Fraunces', 'Cormorant Garamond', Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.55;
    color: var(--dark-2);
    max-width: 60ch;
}

.page-content > blockquote p,
.entry-content > blockquote p { margin-bottom: .6em; }

/* Imágenes sueltas dentro del contenido */
.entry-content > p img,
.page-content > p img {
    border-radius: 14px;
    box-shadow: 0 18px 44px -18px rgba(15, 23, 42, .22);
}

/* --------------------------------------------------------------------------
   3. CARDS Y BLOQUES EMBEBIDOS EN EL CONTENIDO
   -------------------------------------------------------------------------- */
/* Carrera destacada */
.page-content .carrera-feature {
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    box-shadow: 0 22px 55px -22px rgba(15, 23, 42, .16);
}

.page-content .carrera-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 34px 80px -26px rgba(12, 26, 58, .24);
}

/* Cards de diplomado */
.page-content .card--diploma {
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: 0 12px 34px -14px rgba(15, 23, 42, .10);
}

.page-content .card--diploma:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 60px -20px rgba(12, 26, 58, .20);
    border-color: transparent;
}

/* Cards simples (datos de contacto) — solo .card sin variante */
.page-content .card:not([class*="card--"]) {
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 32px 26px;
    text-align: center;
    box-shadow: 0 12px 34px -16px rgba(15, 23, 42, .10);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.page-content .card:not([class*="card--"]):hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 54px -20px rgba(12, 26, 58, .18);
    border-color: rgba(193, 45, 56, .25);
}

.page-content .card:not([class*="card--"]) h3 {
    font-family: var(--font-display, 'Fraunces', 'Cormorant Garamond', Georgia, serif);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: -0.005em;
    margin: 0 0 12px;
}

.page-content .card:not([class*="card--"]) h3::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: var(--accent-bright);
    border-radius: 2px;
    margin: 12px auto 0;
}

.page-content .card:not([class*="card--"]) p { margin: 0; line-height: 1.7; }

/* Meta del programa (duración / modalidad / título / inversión) */
.programa-meta {
    border-radius: 18px;
    border: 1px solid var(--border-soft);
    box-shadow: 0 14px 38px -18px rgba(15, 23, 42, .12);
}

/* Malla curricular */
.malla-wrap {
    border-radius: 14px;
    box-shadow: 0 14px 38px -20px rgba(15, 23, 42, .14);
}

table.malla th {
    font-family: var(--font-display, 'Fraunces', 'Cormorant Garamond', Georgia, serif);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. FORMULARIOS — contacto, CV (trabaja) y modal de preinscripción
   -------------------------------------------------------------------------- */
/* Contenedor tarjeta del formulario (markup nuevo en page-contacto/trabaja) */
.form-shell {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    padding: 48px 46px;
    box-shadow: 0 30px 70px -28px rgba(12, 26, 58, .16);
}

.form-shell .contact-form { max-width: none; }

/* Labels editoriales */
.contact-form label,
.modal-form label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--dark-3);
    margin-bottom: 8px;
}

/* Inputs con reposo suave y focus premium */
.contact-form input,
.contact-form textarea,
.contact-form select,
.modal-form input,
.modal-form textarea,
.modal-form select {
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 15px 16px;
    font-size: .95rem;
    color: var(--dark);
    transition: border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}

.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover,
.modal-form input:hover,
.modal-form textarea:hover,
.modal-form select:hover { border-color: var(--border); }

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.modal-form input:focus,
.modal-form textarea:focus,
.modal-form select:focus {
    background: #fff;
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 4px rgba(193, 45, 56, .10);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder,
.modal-form input::placeholder,
.modal-form textarea::placeholder { color: #9aa3b2; }

/* Select con chevron propio */
.contact-form select,
.modal-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23334155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    cursor: pointer;
}

/* Input de archivo (CV) — zona punteada amable */
.contact-form input[type="file"] {
    border-style: dashed;
    border-color: var(--border);
    background: var(--cream, #FAF6EE);
    cursor: pointer;
    line-height: 1.4;
}

.contact-form input[type="file"]:focus {
    border-color: var(--accent);
    background: var(--cream-warm, #FFF8E8);
}

.contact-form input[type="file"]::file-selector-button {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: .82rem;
    font-weight: 700;
    color: var(--accent);
    background: #fff;
    border: 1px solid rgba(193, 45, 56, .35);
    border-radius: 999px;
    padding: 8px 16px;
    margin-right: 14px;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.contact-form input[type="file"]::file-selector-button:hover {
    background: var(--accent);
    color: #fff;
}

/* Botón de envío dentro del shell — más presencia */
.form-shell .btn--red {
    padding: 16px 46px;
    font-size: .98rem;
    letter-spacing: .02em;
    margin-top: 8px;
}

/* Alertas refinadas */
.form-shell .alert,
.modal .alert {
    border-radius: 12px;
    padding: 16px 20px;
    font-size: .92rem;
}

/* --------------------------------------------------------------------------
   5. MODAL DE PREINSCRIPCIÓN (aplica en páginas internas)
   -------------------------------------------------------------------------- */
.modal__dialog {
    border-radius: 24px;
    box-shadow: 0 44px 110px -24px rgba(10, 19, 48, .5);
}

.modal__header {
    padding: 24px 30px;
    border-bottom: 3px solid var(--accent-bright);
}

.modal__title {
    font-family: var(--font-display, 'Fraunces', 'Cormorant Garamond', Georgia, serif);
    font-weight: 600;
    font-size: 1.65rem;
    letter-spacing: -0.01em;
}

.modal__close { border-radius: 999px; }

.modal__lead {
    font-size: 1rem;
    line-height: 1.65;
    max-width: 40ch;
    margin-left: auto;
    margin-right: auto;
}

.modal-form__submit {
    padding: 16px;
    font-size: 1rem;
    letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   6. NOTICIAS (index) — cards y paginación
   -------------------------------------------------------------------------- */
.post-card {
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: 0 12px 34px -16px rgba(15, 23, 42, .10);
    display: flex;
    flex-direction: column;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 62px -22px rgba(12, 26, 58, .20);
}

.post-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px 26px 28px;
}

.post-card__body > p { flex: 1; }

.post-card__meta {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-card__meta::before {
    content: '';
    width: 18px;
    height: 2px;
    background: var(--accent-bright);
    border-radius: 2px;
    flex-shrink: 0;
}

.post-card__title {
    font-family: var(--font-display, 'Fraunces', 'Cormorant Garamond', Georgia, serif);
    font-weight: 600;
    font-size: 1.28rem;
    line-height: 1.28;
    letter-spacing: -0.008em;
}

/* "Leer más" — clase nueva agregada en index.php */
.post-card__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .02em;
    margin-top: 6px;
    transition: gap .25s var(--ease);
}

.post-card__more:hover { gap: 10px; }

/* Paginación */
.pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: #fff;
    color: var(--dark-3);
    font-weight: 600;
    font-size: .9rem;
    transition: all .25s var(--ease);
}

.pagination .page-numbers:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

.pagination .page-numbers.current {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 8px 20px -6px rgba(193, 45, 56, .4);
}

.pagination .page-numbers.dots { border: none; background: none; }

/* --------------------------------------------------------------------------
   7. SINGLE POST — hero de imagen y navegación de regreso
   -------------------------------------------------------------------------- */
.single .entry-content { font-size: 1.04rem; }

/* Clase nueva: reemplaza los inline styles de la imagen destacada */
.post-hero {
    aspect-ratio: 16 / 9;
    background-color: var(--bg-soft);
    background-size: cover;
    background-position: center;
    border-radius: 18px;
    border-bottom: 4px solid var(--uni-red);
    box-shadow: 0 24px 60px -24px rgba(12, 26, 58, .25);
    margin-bottom: 44px;
}

/* Clase nueva: bloque "Volver a Noticias" */
.post-back {
    max-width: 800px;
    margin: 64px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--border-soft);
}

/* --------------------------------------------------------------------------
   8. 404 — amable, on-brand, editorial
   -------------------------------------------------------------------------- */
.error-404 {
    min-height: 76vh;
    background:
        radial-gradient(ellipse 60% 55% at 50% 0%, rgba(200, 162, 75, .10) 0%, transparent 60%),
        var(--cream, #FAF6EE);
}

.error-404__code {
    font-family: var(--font-display, 'Fraunces', 'Cormorant Garamond', Georgia, serif);
    font-weight: 300;
    font-size: clamp(7rem, 16vw, 11rem);
    letter-spacing: -0.03em;
    color: var(--navy);
    opacity: .12;
}

.error-404__title {
    font-family: var(--font-display, 'Fraunces', 'Cormorant Garamond', Georgia, serif);
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: -26px 0 18px;
}

.error-404__text { line-height: 1.75; }

.error-404__search input {
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px -14px rgba(15, 23, 42, .12);
}

.error-404__search input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(193, 45, 56, .10);
}

.error-404__search button { background: var(--accent-bright); }
.error-404__search button:hover { background: var(--accent-hover); }

/* Markup default de WP: <form.search-form> label > input + input.search-submit */
.error-404__search .search-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.error-404__search .search-form label {
    flex: 1;
    display: block;
    margin: 0;
}

.error-404__search .search-form input[type="search"] { padding-right: 20px; }

.error-404__search .search-submit {
    flex-shrink: 0;
    width: auto;
    border: 0;
    background: var(--accent-bright);
    color: #fff;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .02em;
    padding: 0 26px;
    height: 52px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s, transform .2s, box-shadow .2s;
}

.error-404__search .search-submit:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(193, 45, 56, .45);
}

/* Clase nueva: fila de acciones del 404 */
.error-404__actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .page-header { padding: 72px 0 58px; }
    .page-header + .section { padding-top: 56px; }
    .form-shell { padding: 34px 24px; border-radius: 18px; }
    .page-content > ol > li,
    .entry-content > ol > li { padding-left: 56px; }
    .page-content > h2,
    .entry-content > h2 { margin-top: 2em; }
}

@media (max-width: 480px) {
    .page-header__breadcrumb { letter-spacing: .12em; }
    .form-shell { padding: 26px 18px; margin: 0 -4px; }
    .post-hero { border-radius: 14px; }
    .error-404__actions .btn { width: 100%; justify-content: center; }
}