:root {

    /* Variables */

    --fi-primary: #B94700;
    --fi-secondary: #FE5000;
    --fi-light: #FFBE9F;

    --ipade-primary: #0A2240;
    --ipade-secondary: #002D74;
    --ipade-light: #ABC8E7;

    --white: #fff;
    --black: #000;
    --gray: #393939;
    --gray-light: #F2F2F2;

    --font-dm: "DM Sans", "Verdana", Arial, Helvetica, sans-serif;
    --font-signika: "Signika", "DM Sans", Arial, Helvetica, sans-serif;

    --p: clamp(0.8rem, 0.657rem + 0.381vw, 1rem);
}

/* General */

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-signika);
    font-size: 16px;
    font-weight: 400;
    color: var(--gray);
    background-color: var(--white);
    overflow-x: hidden;
}

.content {
    flex: 1;
}

body {
    display: flex;
    flex-direction: column;
}

.rounded {
    border-radius: 20px !important;
}

/* =======================================================
HERO SECTION
======================================================= */

/* Desktop */
.hero-section {
    background-image: url('https://image.edu.ipade.mx/lib/fe2b11747364057e741d77/m/1/b4811964-be79-4eee-ab2b-2b329f89964e.png');
    background-size: cover;
    background-position: center 50px;
    position: relative;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    color: #fff;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content .lead {
    font-size: 1.5rem;
    line-height: 1.5;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .hero-section {
        display: block;
        background: none;
        padding: 0;
        margin: 0;
        border-radius: 0;
        overflow: visible;
    }

    .hero-section::before {
        content: '';
        display: block;
        width: 100%;
        height: 300px;
        background-image: url('https://image.edu.ipade.mx/lib/fe2b11747364057e741d77/m/1/5baad151-a848-4c14-bd18-b074a3c599c6.png');
        background-size: cover;
        background-position: center 80px;
        border-radius: 24px 24px 0 0;
    }

    .hero-content {
        color: #002D74;
        text-align: center;
        padding: 1rem;
        margin-top: 1rem;
        position: relative;
        background: none;
    }

    .hero-content h1 {
        text-align: left;
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 0.5rem;
    }

    .hero-content p {
        text-align: left;
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .hero-info-btns {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 1rem;
    }

    .hero-info,
    .hero-buttons {
        width: 100%;
        padding: 1rem;
        background: none;
        color: #002D74;
        border-radius: 0;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }

    .hero-buttons .btn {
        width: 100%;
    }
}

.hero-info-btns {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.hero-info {
    background: #FAF2E7;
    color: #000;
    padding: 1.5rem;
    flex: 1 1 100%;
}

.hero-buttons {
    padding: 1.5rem;
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    background: #042C4B;
}

.hero-buttons .btn {
    width: 100%;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
}

@media (min-width: 992px) {
    .hero-info {
        flex: 0 0 65%;
        border-radius: 0 0 0 24px;
    }
    .hero-buttons {
        flex: 0 0 35%;
        border-radius: 0 0 24px 0;
    }
    .hero-info-btns {
        flex-wrap: nowrap;
    }
}

@media (max-width: 576px) {
    .hero-info p {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
    .hero-info p strong {
        display: block;
        margin-bottom: 2px;
    }
}
/* =======================================================
COLORES / UTILIDADES USADAS
======================================================= */

.text-fi-orange {
    color: #e25d0f !important;
}

.color-white {
    color: var(--white);
}

.bg-ipade-primary {
    background-color: var(--ipade-primary);
}

/* =======================================================
BOTONES
======================================================= */

a {
    transition: all .25s ease-in;
}

.btn {
    font-size: clamp(0.8rem, 0.657rem + 0.381vw, 1rem);
    font-weight: bold;
    padding: 10px 24px;
    border: none;
    transition: all .25s ease-in;
}

.btn:hover {
    background-color: #9c3e08;
    color: var(--white);
}

.btn-warning {
    background-color: #f58220;
    border: none;
    color: #fff;
}

.btn-warning:hover {
    background-color: #d86d1c;
}

.btn-whats {
    background-color: #28d467;
    background-image: url(https://image.edu.ipade.mx/lib/fe2b11747364057e741d77/m/1/fb5f0f68-99c4-486b-b806-eae8aed09629.png);
    background-position: center;
    background-repeat: no-repeat;
    padding: 10px;
    height: 2.4rem;
    aspect-ratio: 1/1;
}

.btn-primary {
    background-color: #28d467;
    background-image: url(https://image.edu.ipade.mx/lib/fe2b11747364057e741d77/m/1/fb5f0f68-99c4-486b-b806-eae8aed09629.png);
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 10px 24px;
}

.btn-primary.scrolled {
    background-color: #28d467;
    border-color: #28d467;
    background-position: center;
    height: 2.7rem;
    padding: 10px;
}

/* =======================================================
NAVBAR
======================================================= */

.navbar {
    transition: all 0.3s ease;
    padding: 15px 0;
}

.navbar.scrolled {
    padding: 10px 0;
}

.logo {
    height: 82px;
    transition: all 0.3s ease;
}

.logo.scrolled {
    height: 50px;
}

.nav-link {
    transition: all 0.3s ease;
}

@media only screen and (max-width: 991px) {
    .logo {
        height: 40px;
    }
    .logo.scrolled {
        height: 40px;
    }
    .btn {
        padding: 10px 10px;
    }
}

/* =======================================================
PROGRAM SECTION (Informes)
======================================================= */

.program-section {
    background: #f5f5f5;
    padding-top: 0px;
    padding-bottom: 0px;
}

.program-section .col-lg-5 > p {
    font-size: 17px;
    line-height: 1.55;
}

.program-section .col-lg-5 > h2 {
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.2;
    font-weight: 800;
}

/* Lista de features (Explora / Analiza / Comprende) */

.program-features-list {
    list-style: none;
    padding-left: 0;
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.program-features-list li {
    position: relative;
    padding-left: 22px;
    font-size: 17px;
    line-height: 1.55;
    color: #151515;
}

.program-features-list li::before {
    content: "●";
    color: #C55300;
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 13px;
}

.program-features-list li strong {
    font-weight: 800;
}

/* Formulario */

.info-form {
    background: #f7f7f7;
    border-radius: 34px;
    padding: 55px 50px;
    box-shadow: none;
}

.info-form h3 {
    color: #FE5000;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 14px;
    font-family: 'DM Sans', sans-serif;
}

.info-form p {
    font-size: 20px;
    color: #4a4a4a;
    margin-bottom: 30px;
}

/* Desktop */
@media (min-width: 992px) {
    .program-section .col-lg-5 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .program-section .col-lg-7 {
        display: flex;
        align-items: flex-start;
    }
    .info-form {
        width: 100%;
        margin-top: 0;
    }
}

/* Mobile */
@media (max-width: 991px) {
    .info-form {
        margin-top: 30px;
        padding: 2rem;
    }
    .program-section img {
        margin-top: 1.5rem;
    }
}

/* Tablet */
@media (max-width: 991px) {
    .program-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .program-section .col-lg-5 > h2 {
        max-width: 100%;
    }
    .info-form {
        padding: 40px 35px;
        border-radius: 28px;
    }
    .info-form h3 {
        font-size: 34px;
    }
    .info-form p {
        font-size: 18px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .program-section {
        padding-top: 55px;
        padding-bottom: 55px;
    }
    .program-features-list {
        gap: 14px;
    }
    .program-features-list li {
        font-size: 16px;
    }
    .info-form {
        padding: 28px 22px;
        border-radius: 24px;
    }
    .info-form h3 {
        font-size: 28px;
    }
    .info-form p {
        font-size: 16px;
        margin-bottom: 25px;
    }
}

@media (max-width: 575px) {
    .program-features-list li {
        font-size: 15px;
    }
}

/* =======================================================
BROCHURE SECTION
======================================================= */

.brochure-section {
    background-color: #0A2240;
    padding-top: 90px;
    padding-bottom: 90px;
}

.brochure-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.brochure-content {
    display: flex;
    align-items: center;
    gap: 28px;
}

.brochure-image-wrapper {
    max-width: 240px;
    width: 100%;
    flex-shrink: 0;
}

.brochure-image {
    width: 100%;
    max-width: 100%;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.20);
    display: block;
}

.brochure-text {
    max-width: 320px;
}

.brochure-text h2 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 14px;
}

.brochure-text p {
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    margin-bottom: 14px;
}

.brochure-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.brochure-list li {
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
}

.brochure-list li::before {
    content: "●";
    color: #E94F1D;
    margin-right: 8px;
}

.brochure-form {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 18px;
    border-radius: 24px;
}

.brochure-jotform {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.brochure-form-wrapper {
    width: 100%;
}

.brochure-form-wrapper iframe {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
}

@media (max-width: 991px) {
    .brochure-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    .brochure-content {
        flex-direction: column;
        text-align: center;
    }
    .brochure-text {
        max-width: 100%;
    }
    .brochure-text h2 {
        font-size: 28px;
    }
    .brochure-list {
        justify-content: center;
        align-items: center;
    }
    .brochure-image-wrapper {
        max-width: 260px;
    }
    .brochure-form {
        margin-top: 10px;
    }
}

@media (max-width: 767px) {
    .brochure-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .brochure-text h2 {
        font-size: 24px;
    }
    .brochure-text p {
        font-size: 15px;
    }
    .brochure-list li {
        font-size: 14px;
    }
}

/* =======================================================
FOOTER
======================================================= */

.footer {
    padding: clamp(2.3125rem, 1.7791rem + 0.8611vw, 2.8125rem) 0;
}

/* =======================================================
OBJETIVOS SECTION
======================================================= */

.objetivos-section {
    background: #fff;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Título centrado + línea naranja */

.objetivos-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 55px;
}

.objetivos-title {
    color: #0A2240;
    font-size: 24px;
    line-height: 1.4;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 18px;
}

.objetivos-title strong {
    font-weight: 800;
}

.objetivos-divider {
    width: 90px;
    height: 3px;
    background: #C55300;
    margin: 0 auto;
    border-radius: 2px;
}

/* "Objetivos" subtítulo */

.objetivos-subtitle {
    color: #C55300;
    font-size: 24px;
    font-weight: 800;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 24px;
}

/* Tarjetas O1 / O2 */

.objetivo-card {
    background: #F5F5F5;
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 18px;
}

.objetivo-card:last-child {
    margin-bottom: 0;
}

.objetivo-number {
    display: block;
    color: #0A2240;
    font-size: 26px;
    font-weight: 800;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 6px;
}

.objetivo-card p {
    color: #333333;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

/* Imagen derecha */

.objetivos-image {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border-radius: 20px;
    object-fit: cover;
    display: block;
}

/* =======================================================
RESPONSIVE
======================================================= */

/* Tablet */
@media (max-width: 991px) {
    .objetivos-title {
        font-size: 22px;
    }
    .objetivos-image {
        min-height: 260px;
        margin-top: 30px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .objetivos-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .objetivos-header {
        text-align: left;
        margin-bottom: 30px;
    }

    .objetivos-title {
        font-size: 17px;
        line-height: 1.35;
    }

    .objetivos-divider {
        margin: 12px 0 0;
    }

    .objetivos-subtitle {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .objetivo-card {
        padding: 16px 18px;
        margin-bottom: 12px;
    }

    .objetivo-number {
        font-size: 20px;
    }

    .objetivo-card p {
        font-size: 14px;
    }

    .objetivos-image {
        min-height: 220px;
        margin-top: 20px;
        border-radius: 16px;
    }
}
/* =======================================================
QUÉ TE LLEVAS DEL PROGRAMA
======================================================= */

.que-llevas-section {
    background: #FFF3ED;
    padding-top: 60px;
    padding-bottom: 60px;
}

.que-llevas-title {
    color: #C55300;
    font-size: 28px;
    font-weight: 800;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 30px;
}

.que-llevas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.que-llevas-card {
    background: #B94700;
    border-radius: 18px;
    padding: 26px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.que-llevas-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
    padding: 12px;
}

.que-llevas-card p {
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

.que-llevas-card p strong {
    font-weight: 800;
}

/* =======================================================
RESPONSIVE
======================================================= */

/* Tablet */
@media (max-width: 991px) {
    .que-llevas-grid {
        gap: 20px;
    }
    .que-llevas-card {
        padding: 22px 24px;
    }
    .que-llevas-icon {
        width: 56px;
        height: 56px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .que-llevas-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .que-llevas-title {
        font-size: 22px;
        margin-bottom: 22px;
    }

    .que-llevas-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .que-llevas-card {
        padding: 18px 20px;
        border-radius: 14px;
        gap: 16px;
    }

    .que-llevas-icon {
        width: 48px;
        height: 48px;
        padding: 10px;
    }

    .que-llevas-card p {
        font-size: 14px;
    }
}

/* =======================================================
INFORMES SECTION 
======================================================= */

/* Desktop: ambas columnas a la misma altura */
@media (min-width: 992px) {
    .program-section .row {
        align-items: stretch;
    }

    .informes-left-col {
        display: flex;
        flex-direction: column;
    }

    .informes-image {
        flex: 1;
        min-height: 0;
    }
}

.informes-image {
    width: 100%;
    border-radius: 20px;
    display: block;
    object-fit: cover;
}

/* Tablet */
@media (max-width: 991px) {
    .informes-image {
        border-radius: 16px;
        min-height: 320px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .informes-image {
        border-radius: 14px;
        min-height: 240px;
    }
}

/* =======================================================
JOTFORM INFORMES — altura responsiva
======================================================= */

.jotform-informes-iframe {
    height: 550px;
    min-height: 550px;
    width: 100%;
    overflow: visible;
}

/* Tablet */
@media (max-width: 991px) {
    .jotform-informes-iframe {
        height: 750px;
        min-height: 750px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .jotform-informes-iframe {
        height: 950px;
        min-height: 950px;
    }
}

/* =======================================================
TEMAS SECTION
======================================================= */
.temas-section {
    background: #fff;
    padding-top: 60px;
    padding-bottom: 60px;
}
.temas-title {
    color: #C55300;
    font-size: 28px;
    font-weight: 800;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 24px;
}
.temas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.tema-card {
    background: #F5F5F5;
    border-radius: 16px;
    overflow: hidden;
}
/* Imagen */
.tema-image-wrapper {
    width: 100%;
    height: 220px;
}
.tema-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left bottom;
    display: block;
}
/* Texto */
.tema-content {
    padding: 20px 24px 26px;
}
.tema-content h3 {
    color: #0A2240;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 8px;
    font-family: 'DM Sans', sans-serif;
}
.tema-content p {
    color: #333333;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}
/* =======================================================
RESPONSIVE
======================================================= */
/* Tablet */
@media (max-width: 991px) {
    .temas-grid {
        gap: 20px;
    }
    .tema-image-wrapper {
        height: 200px;
    }
}
/* Mobile */
@media (max-width: 767px) {
    .temas-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .temas-title {
        font-size: 22px;
        margin-bottom: 18px;
    }
    .temas-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .tema-image-wrapper {
        height: 240px;
    }
    .tema-content {
        padding: 16px 18px 20px;
    }
    .tema-content h3 {
        font-size: 17px;
    }
    .tema-content p {
        font-size: 14px;
    }
}

/* =======================================================
METODOLOGÍA Y PERFIL SECTION
======================================================= */

.metodologia-section {
    background: #fff;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Columna izquierda */

.metodologia-title {
    color: #C55300;
    font-size: 28px;
    font-weight: 800;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 24px;
}

.metodologia-block {
    margin-bottom: 22px;
}

.metodologia-block:last-child {
    margin-bottom: 0;
}

.metodologia-label {
    color: #0A2240;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.metodologia-text {
    color: #333333;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

/* Columna derecha: imagen clickeable, SIN recorte */

.metodologia-image-link {
    display: block;
    text-decoration: none;
}

.metodologia-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 20px;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.metodologia-image-link:hover .metodologia-image {
    transform: scale(1.01);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* =======================================================
RESPONSIVE
======================================================= */

/* Tablet */
@media (max-width: 991px) {
    .metodologia-image {
        border-radius: 16px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .metodologia-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .metodologia-title {
        font-size: 22px;
        margin-bottom: 18px;
    }

    .metodologia-block {
        margin-bottom: 18px;
    }

    .metodologia-text {
        font-size: 14px;
    }

    .metodologia-image {
        border-radius: 14px;
    }
}

/* =======================================================
FOOTER — íconos redes sociales personalizados
======================================================= */

.social-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.social-icon-link img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.social-icon-link i {
    font-size: 16px;
    color: #fff;
}

.social-icon-link:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
}

@media (max-width: 575px) {
    .social-icon-link {
        width: 30px;
        height: 30px;
    }
    .social-icon-link img {
        width: 16px;
        height: 16px;
    }
}