/* Shared stylesheet for UCV campus landing pages (campus/test/[slug]) */

@font-face {
    font-family: "MessinaSans Bold";
    src: url("https://somos.ucv.edu.pe/_assets/fonts/MessinaSans-Bold.otf");
    font-weight: bold;
    font-style: normal;
}

/* ============================================================
   GLOBAL ALIGNMENT TOKEN — unifies all section containers
   so no section shifts left or right relative to each other.
   All <section> padding and inner containers share the same
   max-width (1200px) and horizontal padding (24px).
   ============================================================ */
:root {
    --lc-max-width: 1200px;
    --lc-padding-x: 24px;

    /* editorial-style.css (shared header/footer) reads these theme tokens
       for the burger button, slide-out menu panel and sticky CTA pill —
       every other UCV landing page defines them locally (see e.g.
       pregrado/assets/css/style.css), campus pages never did, so those
       elements rendered colorless/invisible until now. */
    --bg: #002b9d;
    --accent: #e30613;
    --accent-light: #0094ff;
    --text: #ffffff;
    --white: #ffffff;
}

/* Force every section on this page to be full-width
   and let their inner containers handle the centering */
body > section,
body > section + * {
    width: 100%;
}


/* Ensure all local containers also share the same token */
.beneficios-tabs-container,
.carreras-container,
.inscribete-container {
    max-width: var(--lc-max-width);
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

/* All blue sections share the same horizontal padding */
#beneficios-tabs-seccion,
#carreras-seccion,
#inscribete-seccion {
    padding-left: var(--lc-padding-x);
    padding-right: var(--lc-padding-x);
}



/* Style default horizontal navigation header */
#topNav {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border-bottom: none !important;
    transform: translateY(0) !important; /* Ensure it is visible at the start */
    z-index: 100 !important;
}

#topNav .nav-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 28px 24px 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

#topNav .logo-ucv {
    height: 44px;
    width: auto;
    object-fit: contain;
}

/* Header links styling */
#topNav .roll-link {
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    display: inline-block;
}

#topNav .roll-primary,
#topNav .roll-secondary {
    color: #ffffff !important;
}

/* Make last navigation link look like a red pill button */
#topNav .nav-inline-links li:last-child a.roll-link {
    background-color: #e30613 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 10px 24px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    height: auto !important;
    overflow: visible !important;
    display: inline-block !important;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(227, 6, 19, 0.3);
}

#topNav .nav-inline-links li:last-child a.roll-link:hover {
    background-color: #b7050e !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(227, 6, 19, 0.4);
}

#topNav .nav-inline-links li:last-child a.roll-link .roll-container {
    display: none !important;
}

#topNav .nav-inline-links li:last-child a.roll-link::after {
    content: "INSCRÍBETE AQUÍ" !important;
    display: inline-block !important;
}

/* Sticky nav bar CTA pill ("Inscríbete Ahora", appears on scroll). Styled by
   editorial-style.css via background: var(--accent); color: var(--bg) —
   campus pages never define those theme variables, so it renders colorless.
   Match the same red used by the top-nav pill button above. */
.nav-cta-pill {
    background: #e30613 !important;
    color: #ffffff !important;
}

.nav-cta-pill:hover {
    background-color: #b7050e !important;
}

/* Hero Section Styles */
#hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding-top: 100px; /* Leave space for the absolute header overlay */
    padding-bottom: 120px; /* Padding for the curved section overlap */
    overflow: hidden;
    color: #ffffff;
    font-family: "MessinaSans Book", sans-serif;
}

/* _main/components/footer.php runs a sitewide GSAP scroll-parallax that
   targets any #hero (fades to 0.5 opacity, scales to 0.9 while scrolling).
   Campus pages only want Lenis's smooth-scroll feel, not that extra motion,
   so it's neutralized here — this wins over GSAP's per-frame inline styles
   because !important in an author stylesheet outranks inline style. */
#hero {
    opacity: 1 !important;
    scale: 1 !important;
    transform: none !important;
}

/* Full-screen background media (poster image, upgraded to video on desktop) */
.hero-bg-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.hero-bg-video {
    display: none;
    /* shown via JS once the video is ready to play (desktop only) */
}

/* Darkening/tint overlay on top of the video, for text legibility */
.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(0, 43, 157, 0.75) 0%, rgba(0, 42, 157, 0.527) 35%, rgba(0, 43, 157, 0) 80%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.2) 100%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Hero Body & Content */
.hero-body {
    position: relative;
    z-index: 2;
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: 40px 24px !important;
}

.hero-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.hero-left {
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.hero-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-title {
    margin: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.hero-title .sub-1,
.hero-title .sub-2 {
    font-size: clamp(24px, 3.2vw, 48px) !important;
    font-weight: 700 !important;
    color: #ffffff;
    font-family: var(--font-display), sans-serif !important;
    letter-spacing: -0.5px;
}

.hero-title .main-title {
    font-size: clamp(48px, 6.5vw, 100px) !important;
    font-weight: 900 !important;
    color: #ffffff;
    font-family: var(--font-fancy), sans-serif !important;
    margin-top: 4px;
    letter-spacing: -2px;
}

/* Details and Cards */
.hero-details-row {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

/* Glass Card */
.class-start-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow:
      inset 0px 39px 56px -36px rgba(255, 255, 255, 0.5),
      inset 0px 7px 11px -4px rgba(255, 255, 255, 1),
      inset 0px -82px 68px -64px rgba(14, 78, 114, 0.3),
      inset 0px 98px 100px -48px rgba(0, 161, 253, 0.3),
      inset 0px 4px 18px 0px rgba(8, 59, 88, 0.3),
      inset 0px 1px 40px 0px rgba(13, 32, 207, 0.2);
}

.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon img {
    width: 32px;
    height: 32px;
}

.card-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.info-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    font-family: "MessinaSans Book", sans-serif;
}

.info-value {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    font-family: "MessinaSans Semibold", sans-serif;
}

/* SUNEDU badge */
.sunedu-badge {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sunedu-text {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
    color: #ffffff;
    font-family: "MessinaSans Book", sans-serif;
}

.sunedu-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

/* Location details */
.location-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.location-icon {
    width: 28px;
    height: 28px;
}

.location-info {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.loc-address {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    font-family: "MessinaSans Semibold", sans-serif;
}

.loc-district {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

/* Project note: plain text under the main title, no card/badge styling */
.project-note {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    font-family: "MessinaSans Book", sans-serif;
    font-style: italic;
    margin: 0;
}

/* Custom Sabias Que Overlap */
#custom-sabiasque {
    position: relative;
    z-index: 5;
    margin-top: -80px;
    background: linear-gradient(to bottom, transparent 80px, #002b9d 80px) !important;
    padding: 0 24px 60px 24px;
}

/* Responsive Media Queries */
@media (max-width: 991px) {
    #hero {
        min-height: auto;
        padding-bottom: 120px;
    }
    .hero-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 36px;
    }
    .hero-title .sub-1,
    .hero-title .sub-2 {
        font-size: 32px;
    }
    .hero-title .main-title {
        font-size: 64px;
    }
}

@media (max-width: 767px) {
    #hero {
        padding-bottom: 100px;
    }
    .hero-header {
        padding: 20px 4% 0 4%;
    }
    .hero-logo img {
        height: 38px;
    }
    .hero-nav {
        gap: 20px;
    }
    .hero-nav-link {
        font-size: 15px;
    }
    .hero-cta-btn {
        padding: 8px 18px;
        font-size: 13px;
    }
    .hero-body {
        padding: 30px 4%;
    }
    .hero-left {
        gap: 24px;
    }
    .hero-title .sub-1,
    .hero-title .sub-2 {
        font-size: 26px;
    }
    .hero-title .main-title {
        font-size: 48px;
    }
    .loc-address {
        font-size: 16px;
    }
    #custom-sabiasque {
        margin-top: -60px;
        background: linear-gradient(to bottom, transparent 60px, #002b9d 60px) !important;
        padding: 0 15px 40px 15px;
    }
}

@media (max-width: 575px) {
    .hero-header-container {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: space-between;
    }
    .hero-nav {
        width: auto;
        justify-content: flex-end;
        gap: 12px;
    }
    .hero-nav-link {
        font-size: 14px;
    }
    .hero-cta-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
    .hero-title .sub-1,
    .hero-title .sub-2 {
        font-size: 20px;
    }
    .hero-title .main-title {
        font-size: 38px;
    }
    .class-start-card {
        width: fit-content;
        padding: 12px 18px;
    }
    .info-value {
        font-size: 17px;
    }
    .sunedu-badge {
        width: 100%;
        margin-top: 8px;
    }
    .sunedu-text {
        font-size: 13px;
    }
    .sunedu-img {
        height: 36px;
    }
    .location-row {
        width: 100%;
    }
    .loc-address {
        font-size: 15px;
    }
    .loc-district {
        font-size: 13px;
    }
}

/* Custom Sabias Que Card & Inner Elements */
.sabiasque-card {
    background-color: #ffffff !important;
    border-radius: 60px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 43, 157, 0.15);
}

.sabiasque-title {
    color: #002b9d;
    font-family: "MessinaSans Semibold", sans-serif;
    font-size: 46px;
    font-weight: 800;
    margin: 0 0 48px 0;
    text-align: center;
}

.sabiasque-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-bottom: 32px;
}

/* Mobile-only slider, hidden until the 575px breakpoint takes over */
.sabiasque-swiper {
    display: none;
}

.sabiasque-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sabiasque-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    margin-bottom: 16px;
}

.sabiasque-icon img {
    height: 95px;
    width: auto;
    object-fit: contain;
}

.sabiasque-number {
    color: #e30613;
    font-family: var(--font-fancy), sans-serif !important;
    font-size: clamp(38px, 4vw, 54px) !important;
    font-weight: 900 !important;
    margin-bottom: 10px;
    line-height: 1.1;
}

.sabiasque-text {
    color: #002b9d !important;
    font-family: var(--font-display), sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0;
}

.sabiasque-source {
    color: #7c7c7c !important;
    font-size: 12px;
    margin: 40px 0 0 0;
    text-align: center;
    line-height: 1.4;
}

/* Responsive styles for Sabias Que */
@media (max-width: 991px) {
    .sabiasque-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
    }
    .sabiasque-title {
        font-size: 38px;
        margin-bottom: 36px;
    }
    .sabiasque-card {
        padding: 50px 30px;
    }
    .sabiasque-number {
        font-size: 38px;
    }
}

@media (max-width: 575px) {
    #custom-sabiasque {
        margin-top: -40px;
        background: linear-gradient(to bottom, transparent 40px, #002b9d 40px) !important;
        padding: 0 15px 30px 15px;
    }
    .sabiasque-card {
        border-radius: 30px;
        padding: 40px 16px;
    }
    /* Swap the static grid for a swipeable slider on mobile */
    .sabiasque-grid {
        display: none;
    }
    .sabiasque-swiper {
        display: block;
        width: 100%;
        padding-bottom: 36px;
        margin-bottom: 0;
    }
    .sabiasque-swiper .swiper-slide {
        height: auto;
    }
    .sabiasque-pagination {
        bottom: 0;
    }
    .sabiasque-pagination .swiper-pagination-bullet {
        background: #002b9d;
        opacity: 0.25;
    }
    .sabiasque-pagination .swiper-pagination-bullet-active {
        opacity: 1;
    }
    .sabiasque-title {
        font-size: 30px;
        margin-bottom: 28px;
    }
    .sabiasque-icon {
        height: 80px;
        margin-bottom: 12px;
    }
    .sabiasque-icon img {
        height: 70px;
    }
    .sabiasque-number {
        font-size: 32px;
        margin-bottom: 6px;
    }
    .sabiasque-text {
        font-size: 14px;
    }
    .sabiasque-source {
        margin-top: 30px;
        font-size: 11px;
    }
}

/* Benefits Tabs Section Styles */
#beneficios-tabs-seccion {
    background-color: #002b9d;
    padding: 80px 24px;
    color: #ffffff;
    font-family: "MessinaSans Book", sans-serif;
    position: relative;
    z-index: 4;
    overflow: hidden;
}

/* Decorative glow circle behind the Beneficios copy (matches Inscríbete "Ellipse 6") */
#beneficios-tabs-seccion::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 505px;
    height: 505px;
    background-color: #0094ff;
    opacity: 0.3;
    border-radius: 50%;
    filter: blur(200px);
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.beneficios-tabs-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.beneficios-col-left {
    min-width: 0;
}

.beneficios-section-title {
    font-family: "MessinaSans Semibold", sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 24px 0;
}

.beneficios-tab-bar {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px;
    border-radius: 50px;
    margin-bottom: 50px;
    box-shadow: 
        inset 0px 4px 10px rgba(255, 255, 255, 0.15),
        inset 0px -4px 10px rgba(0, 0, 0, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.2);
}

.beneficios-tab-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    font-family: "MessinaSans Semibold", sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 36px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none !important;
}

.beneficios-tab-btn:hover {
    opacity: 0.85;
}

.beneficios-tab-btn.active {
    background-color: #ffffff !important;
    color: #002b9d !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.beneficios-tab-contents {
    position: relative;
    width: 100%;
}

.beneficios-tab-content {
    display: none;
    width: 100%;
}

.beneficios-tab-content.active {
    display: block;
    animation: benefitsFadeIn 0.5s ease-in-out;
}

@keyframes benefitsFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.beneficios-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: start;
}

.beneficios-left {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.beneficio-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.beneficio-number {
    font-size: 76px;
    font-weight: 900;
    color: #ffffff;
    font-family: "MessinaSans Bold", sans-serif;
    line-height: 1;
    min-width: 62px;
    text-align: center;
}

.beneficio-desc {
    font-family: "MessinaSans Semibold", sans-serif;
    font-size: 20px;
    line-height: 1.4;
    color: #ffffff;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.beneficio-desc .highlight {
    color: #00b4ff;
    font-weight: 800;
    font-family: "MessinaSans Semibold", sans-serif;
}

.beneficio-desc .text {
    color: #ffffff;
    font-weight: 600;
    font-family: "MessinaSans Semibold", sans-serif;
    line-height: 1.4;
}

.beneficio-desc .source {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    display: block;
    margin-top: 2px;
}

.beneficios-right {
    display: flex;
    justify-content: flex-end;
}

.beneficios-img-wrapper {
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow:
        inset 0px 0px 40px rgba(0, 0, 0, 0.3),
        0 15px 35px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 440px;
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center top;
    position: relative;
}

.beneficios-img-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    position: relative;
    z-index: 2;
}

.beneficios-tab-image {
    display: none;
}

.beneficios-tab-image.active {
    display: block;
    animation: benefitsFadeIn 0.5s ease-in-out;
}

/* Responsive Media Queries for Benefits tabs */
@media (max-width: 991px) {
    .beneficios-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .beneficios-img-wrapper {
        margin: 0 auto;
        max-width: 380px;
    }
    .beneficios-section-title {
        font-size: 34px;
    }
    .beneficios-tab-bar {
        margin-bottom: 36px;
    }
}

@media (max-width: 575px) {
    #beneficios-tabs-seccion {
        padding: 50px 15px;
    }
    .beneficios-tab-bar {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 30px;
    }
    .beneficios-tab-btn {
        flex: 1;
        padding: 8px 10px;
        font-size: 13px;
        text-align: center;
    }
    .beneficio-number {
        font-size: 52px;
        min-width: 42px;
    }
    .beneficio-desc {
        font-size: 17px;
        line-height: 1.4;
    }
    .beneficios-section-title {
        font-size: 28px;
    }
    .beneficios-img-wrapper {
        max-width: 320px;
    }
}

/* Carreras Section Styles */
#carreras-seccion {
    background-color: #F4F4F2;
    padding: 80px 24px;
    text-align: center;
    position: relative;
    z-index: 3;
}

.carreras-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.carreras-tab-content {
    display: none;
    width: 100%;
}

.carreras-tab-content.active {
    display: block;
    animation: careersFadeIn 0.5s ease-in-out;
}

@keyframes careersFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.carreras-cards-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.carrera-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 280px;
    max-width: 560px;
    padding: 20px;
    container-type: inline-size;
}

.carrera-card .card-subtitle {
    font-family: "MessinaSans Semibold", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #002b9d;
    line-height: 1.2;
}

.carrera-card .card-title {
    font-family: "MessinaSans Semibold", sans-serif;
    /* Scales with the card's actual width instead of a fixed px value,
       so long words (e.g. "Semipresencial") never wrap into the button below. */
    font-size: clamp(32px, 10cqw, 60px);
    font-weight: 900;
    color: #002b9d;
    margin: 4px 0 0px 0;
    line-height: 1.25;
    letter-spacing: -1.5px;
    white-space: nowrap;
}

.btn-descubre-mas {
    background-color: #e30613;
    color: #ffffff;
    border: none;
    font-family: "MessinaSans Semibold", sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 44px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(227, 6, 19, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    outline: none !important;
}

.btn-descubre-mas:hover {
    background-color: #b7050e;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(227, 6, 19, 0.45);
}

.btn-descubre-mas:active {
    transform: translateY(0);
}

/* Modals Styles */
.carreras-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 20, 70, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.carreras-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.carreras-modal-content {
    background-color: #ffffff;
    border-radius: 36px;
    width: 92%;
    max-width: 720px;
    max-height: 82vh;
    overflow: hidden;
    padding: 48px;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 43, 157, 0.25);
    transform: scale(0.92);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.carreras-modal-overlay.active .carreras-modal-content {
    transform: scale(1);
}

.carreras-modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.carreras-modal-close {
    position: absolute;
    top: 24px;
    right: 28px;
    background: transparent;
    border: none;
    font-size: 38px;
    line-height: 1;
    color: #c5cbd6;
    cursor: pointer;
    transition: color 0.2s ease;
    outline: none !important;
}

.carreras-modal-close:hover {
    color: #8b96a8;
}

.modal-logo-icon {
    height: 38px;
    width: auto;
    margin-bottom: 24px;
    margin-right: auto;
    display: block;
    align-self: flex-start;
}

.modal-title-main {
    margin: 0 0 8px 0;
    line-height: 1.15;
}

.modal-title-count {
    display: block;
    font-family: "MessinaSans Bold", sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: #002b9d;
}

.modal-title-modalidad {
    display: block;
    font-family: "MessinaSans Bold", sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: #02BFF2;
}

.modal-carreras-list {
    list-style: none;
    padding: 0 12px 4px 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 6px;
    text-align: left;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-carreras-list li {
    font-family: "MessinaSans Semibold", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #002b9d;
    line-height: 1.2;
}

/* Custom Scrollbar for Carreras List */
.modal-carreras-list {
    scrollbar-width: thin;
    scrollbar-color: #c5cbd6 #f1f4f9;
}

.modal-carreras-list::-webkit-scrollbar {
    width: 6px;
}

.modal-carreras-list::-webkit-scrollbar-track {
    background: #f1f4f9;
    border-radius: 10px;
}

.modal-carreras-list::-webkit-scrollbar-thumb {
    background: #c5cbd6;
    border-radius: 10px;
}

.modal-carreras-list::-webkit-scrollbar-thumb:hover {
    background: #a2adb8;
}

/* Responsive Media Queries for Carreras */
@media (max-width: 767px) {
    #carreras-seccion {
        padding: 50px 15px;
    }
    .carrera-card {
        padding: 10px;
    }
    .carrera-card .card-subtitle {
        font-size: 18px;
    }
    .carrera-card .card-title {
        margin-bottom: 16px;
    }
    .btn-descubre-mas {
        font-size: 14px;
        padding: 12px 36px;
    }
    .carreras-modal-content {
        padding: 32px 20px;
        border-radius: 24px;
        max-height: 85vh;
    }
    .modal-logo-icon {
        height: 32px;
        margin-bottom: 20px;
    }
    .modal-title-main {
        margin-bottom: 8px;
    }
    .modal-title-count,
    .modal-title-modalidad {
        font-size: 24px;
    }
    .modal-carreras-list {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .modal-carreras-list li {
        font-size: 14px;
    }
    .carreras-modal-close {
        top: 16px;
        right: 18px;
        font-size: 32px;
    }
}

/* Inscríbete Section Styles */
#inscribete-seccion {
    background-color: #002b9d; /* Royal blue */
    padding: 100px 24px;
    color: #ffffff;
    font-family: "MessinaSans Book", sans-serif;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

/* Decorative glow circle behind the Inscríbete copy (per Figma "Ellipse 6") */
#inscribete-seccion::before {
    content: '';
    position: absolute;
    top: 10%;
    left: -100px;
    width: 985px;
    height: 985px;
    background-color: #0094ff;
    opacity: 0.3;
    border-radius: 50%;
    filter: blur(200px);
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}

.inscribete-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 60px;
    align-items: center;
}

.inscribete-left {
    display: flex;
    flex-direction: column;
    gap: 28px;
    text-align: left;
}

.inscribete-title {
    font-family: "MessinaSans Semibold", sans-serif;
    font-size: 78px;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    line-height: 1;
    letter-spacing: -2px;
}

.inscribete-subtitle {
    font-family: "MessinaSans Book", sans-serif;
    font-size: 30px;
    line-height: 1.25;
    color: #ffffff;
    margin: 0;
}

.inscribete-sunedu {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.inscribete-sunedu-text {
    font-family: "MessinaSans Book", sans-serif;
    font-size: 15px;
    line-height: 1.35;
    color: #ffffff;
}

.inscribete-sunedu-img {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.inscribete-right {
    display: flex;
    justify-content: flex-end;
}

.cta-form-col {
    background-color: #ffffff;
    border-radius: 40px;
    padding: 30px;
    width: 100%;
    max-width: 520px;
    overflow: hidden;
}

.cta-form-col iframe {
    width: 100%;
    min-height: 620px;
    border: none;
    display: block;
    background: transparent;
    border-radius: 24px;
}

/* Responsive Media Queries for Inscríbete */
@media (max-width: 991px) {
    .inscribete-container {
        grid-template-columns: 1fr;
        gap: 48px;
        text-align: center;
    }
    .inscribete-left {
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .inscribete-title {
        font-size: 56px;
    }
    .inscribete-subtitle {
        font-size: 26px;
    }
    .inscribete-right {
        justify-content: center;
    }
    .inscribete-sunedu {
        margin-top: 5px;
    }
}

@media (max-width: 575px) {
    #inscribete-seccion {
        padding: 60px 15px;
    }
    .inscribete-title {
        font-size: 44px;
    }
    .inscribete-subtitle {
        font-size: 20px;
    }
    .cta-form-col {
        border-radius: 28px;
        padding: 20px;
    }
    .cta-form-col iframe {
        min-height: 600px;
    }
    .inscribete-sunedu-img {
        height: 40px;
    }
}

/* Footer Background Color Override */
.editorial-footer {
    background: #ffffff !important;
}

/* Footer elements color override for white background and blue text */
.editorial-footer .footer-copyright-text {
    color: #002b9d !important;
}

.editorial-footer .time-label {
    color: rgba(0, 43, 157, 0.6) !important;
}

.editorial-footer .time-value {
    color: #002b9d !important;
}

.editorial-footer .time-value:hover {
    color: #e30613 !important;
}

/* Scroll-up button styling */
.editorial-footer .scroll-top-btn {
    background-color: #ffffff !important;
    color: #002b9d !important;
    box-shadow: 0 4px 15px rgba(0, 34, 65, 0.1) !important;
    border: 1px solid rgba(0, 43, 157, 0.1) !important;
}

.editorial-footer .scroll-top-btn:hover {
    background-color: #002b9d !important;
    color: #ffffff !important;
}

/* Achievements / Logros Section Dark Mode Override */
.logros-section {
    background-color: #002CA0 !important;
    padding: 100px 24px !important;
}

.logros-section .flex {
    align-items: center !important;
}

.logros-heading-text {
    color: #ffffff !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    text-transform: none !important;
    font-size: clamp(32px, 4vw, 78px) !important;
    overflow: visible !important;
    line-height: 1.2 !important;
    padding-bottom: 12px !important;
}

#logros-intro {
    display: none !important;
}

/* Glassmorphism Achievement Cards */
.achievement-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    width: 100%;
    min-height: 350px;
    padding: 40px 30px !important;
    border-radius: 48px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.01) !important;
    backdrop-filter: blur(100px) !important;
    -webkit-backdrop-filter: blur(100px) !important;
    box-shadow:
      inset 0px 39px 56px -36px rgba(255, 255, 255, 0.5),
      inset 0px 7px 11px -4px rgba(255, 255, 255, 1),
      inset 0px -82px 68px -64px rgba(14, 78, 114, 0.3),
      inset 0px 98px 100px -48px rgba(0, 161, 253, 0.3),
      inset 0px 4px 18px 0px rgba(8, 59, 88, 0.3),
      inset 0px 1px 40px 0px rgba(13, 137, 207, 0.2) !important;
}

/* editorial-style.css ships its own unguarded .achievement-card:hover with a
   translateY lift, which touchscreens trigger on tap. Neutralize it for all
   devices, then re-enable the lift only where real hover (mouse/trackpad)
   is available. */
.achievement-card:hover {
    transform: none;
}

@media (hover: hover) and (pointer: fine) {
    .achievement-card:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        transform: translateY(-8px) !important;
    }
}

.achievement-category {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    margin-bottom: 24px !important;
}

/* Hide duplicate title to match screenshot */
.achievement-title {
    display: none !important;
}

.achievement-desc {
    color: #ffffff !important;
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

.achievement-desc strong,
.achievement-desc em {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Swiper navigation controls & pagination */
.achievements-slider-controls .swiper-pagination-custom .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.4) !important;
    opacity: 1 !important;
}

.achievements-slider-controls .swiper-pagination-custom .swiper-pagination-bullet-active {
    background: #ffffff !important;
}

.achievements-prev,
.achievements-next {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

.achievements-prev:hover,
.achievements-next:hover {
    background-color: #ffffff !important;
    color: #002CA0 !important;
    border-color: #ffffff !important;
}

/* Align achievements container with the page's max-width container to prevent overflow */
.logros-section .benefits-container {
    max-width: var(--lc-max-width) !important;
    margin: 0 auto !important;
    padding: 0 var(--lc-padding-x) !important;
    box-sizing: border-box !important;
}

/* Logros section is too tall on mobile: the 100px padding + 350px-min-height
   cards don't scale down like the rest of the page's sections do */
@media (max-width: 767px) {
    .logros-section {
        padding: 50px 15px 20px 15px !important;
    }
    .logros-heading-text {
        font-size: clamp(28px, 8vw, 40px) !important;
        padding-bottom: 8px !important;
    }
    .achievement-card {
        min-height: 260px;
        justify-content: center;
        gap: 20px;
        padding: 24px 20px !important;
    }
    .achievement-category {
        margin-bottom: 14px !important;
    }
}

/* Animated Letter Spans for Headings */
.anim-letter {
    display: inline-block;
    transform: translateY(120%);
    opacity: 0;
    will-change: transform;
}

/* Keeps a word's letters together — line breaks can only happen between .anim-word units */
.anim-word {
    display: inline-block;
    white-space: nowrap;
    margin-right: 0.26em;
}

.anim-word:last-child {
    margin-right: 0;
}

/* Headings Thick Font Style Override */
.sabiasque-title,
.beneficios-section-title,
.inscribete-title,
.carrera-card .card-title {
    font-family: var(--font-fancy) !important;
    font-weight: 900 !important;
}

/* Alignments and padding for animated headings */
.sabiasque-title,
.beneficios-section-title,
.inscribete-title {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    line-height: 1.2 !important;
    padding-bottom: 8px !important;
}

/* Size overrides for large section titles (78px) */
.beneficios-section-title,
.inscribete-title,
.sabiasque-title {
    font-size: clamp(42px, 9vw, 78px) !important;
}

/* Alignment for section titles on desktop */
@media (min-width: 992px) {
    .inscribete-title,
    .beneficios-section-title {
        justify-content: flex-start !important;
        text-align: left !important;
    }
}