/* ===============================
   SECCIÓN DE TARJETAS (HOME)
================================ */
.usam-cards-section {
     background: linear-gradient(
        to bottom,
        #e6f4fa 0%,
        #e6f4fa 65%,
        transparent 65%,
        transparent 100%
    );
    padding: 50px 0;
     margin-top: -49px;
}

.usam-cards-grid {
    max-width: 1320px;
    margin: auto;
    display: grid;
    gap: 20px;

    /* Desktop: 4 columnas */
    grid-template-columns: repeat(4, 1fr);
}

/* ===============================
   TARJETA
================================ */
.usam-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
}

/* Animación hover */
.usam-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

/* ===============================
   IMAGEN
================================ */
.usam-card-img {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.usam-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Banda azul navy */
.usam-card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 18px;
    background: rgba(8, 26, 64, 0.88); /* navy USAM */
    color: white;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 7px;
}

/* ===============================
   CUERPO
================================ */
.usam-card-body {
    background: #134582; /* azul indigo institucional */
    padding: 22px;
    color: white;
    padding: 0px 22px 22px 22px;
}

.usam-card-body h4 {
    font-size: 17px;
    margin-bottom: 8px;
    font-weight: 600;
}

.usam-card-body p {
    font-size: 14px;
    line-height: 1.4;
    opacity: .9;
    margin-bottom: 15px;
}

/* ===============================
   BOTÓN
================================ */
.usam-btn {
    background: white;
    color: #134582;
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    display: inline-block;
    transition: background .2s ease, color .2s ease;
}

.usam-btn:hover {
    background: #0c2c60;
    color: white;
}

/* ===============================
   RESPONSIVE: TABLET (2 columnas)
================================ */
@media (max-width: 992px) {
    .usam-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===============================
   RESPONSIVE: MÓVIL (1 columna)
================================ */
@media (max-width: 600px) {
    .usam-cards-grid {
        grid-template-columns: 1fr;
    }

    .usam-card-img {
        height: 180px;
    }
}

/* Evitar que las tarjetas queden pegadas a los bordes en tablet */
@media (max-width: 992px) {
    .usam-cards-section,
    .usam-cards-grid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Evitar que las tarjetas queden pegadas a los bordes en móvil */
@media (max-width: 600px) {
    .usam-cards-section,
    .usam-cards-grid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

.usam-card-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* misma proporción que tu diseño */
    object-fit: cover;     /* recorta, no estira */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

/* ================================
   SECCIÓN EDUCACIÓN 
=================================*/

.edu-section {
    padding: 0px 0;
}

/* Limita el ancho para que NO sea full width */
.edu-grid {
    max-width: 1200px;
    margin: 0 auto;              /* centra */
    display: flex;
    align-items: stretch;        /* ambas columnas igual altura */
   /* padding: 0 20px;*/
}

/* ================================
   TÍTULO + DESCRIPCIÓN
================================ */
.edu-title {
    text-align: center;
    color: #9B242D;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
}

.edu-description {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 40px;
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}

/* ================================
   COLUMNA IZQUIERDA
================================ */
.edu-left {
    flex: 1;
}

.edu-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* recorte perfecto */
    border-radius: 0px;
}

/* ================================
   COLUMNA DERECHA
================================ */
.edu-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    /*justify-content: space-between;  /* reparte para que calcen al alto */
    gap: 10px;
}

/* TARJETAS */
.edu-item {
    padding: 7px 19px;
    border-radius: 0px;
}

/* alternancia de colores EXACTA al PDF */
.edu-item:nth-child(odd) {
    background: #EFEFEF;
}

.edu-item:nth-child(even) {
    background: #FFFFFF;
}

/* TITULOS */
.edu-item h3 {
    color: #9B242D;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0px;
}

.edu-item h3::before {
    content: "›";
    font-size: 22px;
    color: #9B242D;
}

/* TEXTO */
.edu-item p {
    font-size: 14px;
    color: #444;
    margin-bottom: 9px;
}

/* BOTÓN */
.edu-item button {
    background: #083C6B;
    color: #fff;
    border: none;
    padding: 6px 18px;
    border-radius: 18px;
    font-size: 13px;
    cursor: pointer;
    transition: 0.2s;
}

.edu-item button:hover {
    background: #052645;
}

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

/* Tablet — se mantiene 50/50 pero ajusta tipografías */
@media (max-width: 1024px) {
    .edu-grid {
        max-width: 95%;
    }

    .edu-title {
        font-size: 34px;
    }
}

/* Móvil — se apilan */
@media (max-width: 768px) {
    .edu-grid {
        flex-direction: column;
    }

    .edu-left img {
        height: auto;
    }
}

/* =============================
   EXPERIENCIA
============================= */
.exp-section {
    text-align: center;
    padding: 60px 0;
    background: #ffffff;
    padding-bottom: 0px;
}

.exp-title {
    font-size: 38px;
    font-weight: 700;
    color: #003b71;
    margin-bottom: 10px;
}

.exp-description {
    max-width: 750px;
    margin: 0 auto 40px auto;
    color: #134581;
    font-size: 15px;
}

.exp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

/* IMAGEN GRANDE (OCUPA 2 COLUMNAS) */
.exp-large {
    grid-column: span 2;
}

/* ESTILO GENERAL DE CADA ITEM */
.exp-item {
    position: relative;
    overflow: hidden;
    height: 422px;
}

.exp-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* OVERLAY OSCURO */
.exp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 25, 68, 0.55);
}

/* TEXTO INFERIOR IZQUIERDO */
.exp-text {
    position: absolute;
    left: 20px;
    bottom: 20px;
    color: white;
    font-size: 18px;
    font-weight: 700;
}

/* SIGNO + */
.exp-plus {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 28px;
    font-weight: bold;
    color: white;
}

/* RESPONSIVE */

/* Tablet (2 columnas) */
@media (max-width: 992px) {
    .exp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .exp-large {
        grid-column: span 2;
    }
}

/* Móvil (1 columna) */
@media (max-width: 600px) {
    .exp-grid {
        grid-template-columns: 1fr;
    }
    .exp-large {
        grid-column: span 1;
    }
}

/* FRANJA AZUL SEMITRANSPARENTE */
.exp-strip {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: rgb(8 69 131 / 22%);
    z-index: 2;                     
}

/* Asegurar que el texto quede encima de la franja */
.exp-text {
    position: absolute;
    left: 20px;
    bottom: 10px;   /* Subimos para que quede dentro de la franja */
    z-index: 3;
}

/* Ícono + */
.exp-plus {
    position: absolute;
    right: 20px;
    bottom: 10px;
    z-index: 3;
}

.red-text {
    color: #be0b3b!important;
}

/* ==== SECCIÓN ORGULLO ==== */
.orgullo-section {
    background-color: #D9EDF7;
    background-image: url("../img/patron-left.png"), url("../img/patron-right.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left center, right center;
    background-size: 640px auto, 634px auto;
    padding: 3px 0 53px 0;
    text-align: center;
}

.orgullo-title {
    font-size: 42px;
    font-weight: 800;
    color: #0B3257;
    margin-bottom: 10px;
}

.orgullo-description {
    max-width: 760px;
    margin: 0 auto 50px;
    font-size: 15px;
    color: #333;
}

/* =======================================================
   CARRUSEL
======================================================= */

.orgullo-carousel {
    display: flex;
    gap: 30px;
    transition: transform 0.6s ease;
}

/* Tarjetas del diseño */
.orgullo-card {
    background: #FFF;
    min-width: 300px;
    max-width: 300px;
    border-radius: 18px;
    padding: 30px 30px 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    text-align: left;
}

/* Título dentro del card */
.orgullo-card h3 {
    color: #0B3257;
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 10px;
    margin-top: 10px;
}

.orgullo-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.orgullo-user img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
}

/* =======================================================
   FLECHAS COMO EN EL DISEÑO
======================================================= */

/* Este frame SIEMPRE mide el alto del carrusel */
.orgullo-slider-frame {
    position: relative;
    width: 100%;        /* 100% del sitio */
    max-width: 100vw;   /* no se desborda */
}

/* =============================
   TARJETAS
============================= */
.orgullo-card {
    flex: 0 0 calc(25% - 30px); /* 4 por fila */
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    text-align: left;
}
.orgullo-carousel.dragging {
    cursor: grabbing;
    transition: none !important;
}

.orgullo-carousel {
    transition: transform 0.35s ease;
}


/* =============================
   FLECHAS
============================= */

/* Flecha izquierda */
.orgullo-arrow.left {
    left: 266px; /* FUERA del wrapper */
}

/* Flecha derecha */
.orgullo-arrow.right {
    right: 241px;
}

/* 📱 TABLET GRANDE (992px – 1199px)
   Se acercan porque hay menos espacio lateral */
@media (max-width: 1199px) {
    .orgullo-arrow.left {
        left: 150px;
    }

    .orgullo-arrow.right {
        right: 150px;
    }
}


/* 📱 TABLET PEQUEÑO (768px – 991px)
   Las flechas deben quedar mucho más cerca del carrusel */
@media (max-width: 991px) {
    .orgullo-arrow.left {
        left: 60px;
    }

    .orgullo-arrow.right {
        right: 60px;
    }
}


/* 📱 MÓVIL (<=767px)
   Colocamos las flechas pegadas al borde del carrusel */
@media (max-width: 767px) {
    .orgullo-arrow.left {
        left: 15px;
    }

    .orgullo-arrow.right {
        right: 15px;
    }
}


/* 📱 MÓVIL COMPACTO (<=480px)
   Las centramos aún más cerca */
@media (max-width: 480px) {
    .orgullo-arrow.left {
        left: 5px;
    }

    .orgullo-arrow.right {
        right: 5px;
    }
}

/* Cambiar color en hover */
.orgullo-arrow:hover {
    color: #0B3257;
}

/* IMPORTANTE: El wrapper ya NO controla las flechas */
.orgullo-carousel-wrapper {
    position: relative;
    overflow: hidden;
    max-width: 1300px;
    margin: 0 auto;
}


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

/* TABLET: 2 tarjetas visibles */
@media (max-width: 992px) {
    .orgullo-card {
        flex: 0 0 calc(50% - 30px);
    }
}

/* MÓVIL: 1 tarjeta visible */
@media (max-width: 600px) {
    .orgullo-card {
        flex: 0 0 100%;
    }
}


.orgullo-arrow {
    background: none !important;   /* Quita fondo */
    border: none !important;       /* Quita borde */
    padding: 0 !important;         /* Quita padding que crea bloque */
    width: auto;
    height: auto;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: #A8102A; /* color rojo de diseño */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orgullo-arrow:hover {
    color: #0B3257; /* azul al hacer hover */
}


/* =============================
   COMUNIDAD USAM
============================= */
.comunidad-section {
    padding: 20px 0;
    background: #eeeeee;
    padding-bottom: 80px;
}

.comunidad-title {
    text-align: center;
    font-size: 38px;
    font-weight: 800;
    color: #134582;
    margin-bottom: 10px;
}

.comunidad-description {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
    font-size: 14px;
    color: #134582;
}

/* GRID */
.comunidad-grid {
    max-width: 1320px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.2fr 0.1fr 1fr;
    gap: 0px;
}

/* =============================
   FEATURE IZQUIERDO
============================= */
.comunidad-feature {
    position: relative;
    display: flex;
    height: 520px;
}

.comunidad-feature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comunidad-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(8,26,64,0.15),
        rgba(8,26,64,0.85)
    );
}

.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(8,26,64,.95), rgba(8,26,64,.6));
}

.feature-content {
    width: 50%;
    padding: 50px;
    background: #0b2e5a;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Caja de texto flotante */
.comunidad-feature-content {
    position: absolute;
    right: 0%;
    background: rgb(3 25 73 / 77%);
    color: #fff;
    padding: 40px;
    max-width: 380px;
    height: 100%;
    border-radius: 4px;
    z-index: 2;
    padding-top: 150px;
}

.comunidad-feature-content h3 {
    font-size: 24px;
    font-weight: 700;
}

.comunidad-feature-content span {
    display: block;
    font-size: 14px;
    margin-bottom: 12px;
}

.comunidad-feature-content p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 22px;
}

/* Botones */
.feature-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.feature-btn {
    background: #9B242D;
    color: #fff;
    padding: 9px 22px;
    border-radius: 20px;
    font-weight: 600;
}

.feature-video {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-weight: 500;
}

/* =============================
   RESPONSIVE
============================= */
@media (max-width: 992px) {
    .comunidad-feature {
        height: auto;
    }

    .comunidad-feature img {
        height: 320px;
    }

    .comunidad-feature-content {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        max-width: 100%;
        margin: -60px 16px 0;
    }
}
.feature-content h3 {
    font-size: 26px;
    font-weight: 700;
}

.feature-content span {
    font-size: 15px;
    display: block;
    margin-bottom: 15px;
}

.feature-content p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 25px;
}

.feature-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.feature-btn {
    background: #9B242D;
    color: white;
    padding: 10px 22px;
    border-radius: 22px;
    font-weight: 600;
}

.feature-video {
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

/* =============================
   LISTADO DERECHA
============================= */
.comunidad-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.comunidad-item {
    display: flex;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid #134582;
}

.comunidad-item img {
    width: 120px;
    height: 90px;
    object-fit: cover;
}

.item-text h4 {
    font-size: 15px;
    font-weight: 700;
    color: #134582;
    margin-top: 0px;
    margin-bottom: 0px;
}

.item-text span {
    font-size: 13px;
    color: #134582;
    font-weight: 600;
}

.item-text p {
    font-size: 13px;
    margin: 3px 0;
}

.item-text a {
    font-size: 13px;
    color: #9B242D;
    font-weight: 700;
}

/* =============================
   RESPONSIVE
============================= */
@media (max-width: 992px) {
    .comunidad-grid {
        grid-template-columns: 1fr;
    }

    .comunidad-feature {
        flex-direction: column;
        height: auto;
    }

    .feature-image,
    .feature-content {
        width: 100%;
    }
}

.comunidad-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 453px;
}

.comunidad-arrow {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    cursor: pointer;
}

.comunidad-arrow i {
    font-size: 34px;
    color: #9B242D;
}

.comunidad-arrow:hover i {
    color: #134582;
}

/* =============================
   INVESTIGACIÓN / VINCULACIÓN
============================= */
/* =============================
   INVESTIGACIÓN / VINCULACIÓN
============================= */
.iv-section {
    background: #bfe3f0;
    padding: 80px 0;
}

/* HEADER */
.iv-header {
    max-width: 1000px;
    margin: 0 auto 50px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
}

.iv-title h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 5px;
}

.iv-investigacion h2 {
    color: #0b4f9c;
    float: right;
}

.iv-vinculacion h2 {
    color: #c8102e;
}

.iv-title p {
    font-size: 14px;
    color: #0b4f9c;
    float: right;
}

.iv-divider {
    width: 1px;
    height: 60px;
    background: #0b4f9c;
}

/* WRAPPER */
.iv-wrapper {
    position: relative;
    max-width: 1100px;
    margin: auto;
}

/* CARDS */
.iv-cards {
    display: flex;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

/* CARD BASE */
.iv-card {
    width: 25%;
    padding: 25px;
    text-align: center;
    color: white;
}

.iv-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    margin: 20px 0;
}

.iv-card h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 15px;
}

.iv-card p {
    font-size: 13px;
    line-height: 1.5;
}

/* TOP LABEL */
.iv-top {
    font-size: 13px;
    font-weight: 600;
    display: block;
}

/* COLORES */
.iv-red {
    background: #b8002d;
}

.iv-beige {
    background: #f4dec5;
    color: #b8002d;
}

.iv-blue {
    background: #0f457a;
}

.iv-navy {
    background: #081a40;
}

/* BOTÓN */
.iv-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 6px 16px;
    border-radius: 20px;
    background: white;
    color: #b8002d;
    font-size: 13px;
    font-weight: 700;
}

/* FLECHAS */
.iv-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none !important;
    border: none !important;
    cursor: pointer;
    z-index: 10;
}

.iv-arrow i {
    font-size: 42px;
    color: #c8102e;
}

.iv-prev {
    left: -50px;
}

.iv-next {
    right: -50px;
}


/* =============================
   ACCESO GLOBAL
============================= */

/* BLOQUE BLANCO */
.acceso-global {
    background:#ffffff;
}

.acceso-head {
    text-align:center;
    padding:55px 20px 40px;
}

.acceso-title {
    font-size:38px;
    font-weight:800;
    color:#0b4f9c;
    margin-bottom:10px;
}

.acceso-desc {
    max-width:920px;
    margin:0 auto;
    font-size:13px;
    line-height:1.55;
    color:#0b4f9c;
}

/* BLOQUE GRIS FULL WIDTH */
.acceso-wrap {
    background:#eeeeee;
    width:100%;
    padding:40px 0 45px;
}

/* CONTENIDO INTERNO (alineación visual) */
.acceso-inner {
    max-width:1200px;
margin:auto;
    display:grid;
    grid-template-columns: 1fr 1.25fr;
    gap:45px;
    align-items:flex-start;
}



/* IZQUIERDA */
.acceso-item {
    text-align:left;
    margin-bottom:30px;
}

.acceso-tag {
    display:inline-block;
    background:#b8002d;
    color:#fff;
    font-size:10px;
    font-weight:700;
    padding:2px 10px;
    border-radius:10px;
    margin-bottom:6px;
}

.acceso-item h4 {
    font-size:16px;
    font-weight:700;
    color:#0b4f9c;
    margin:0 0 3px 0;
}

.acceso-item p {
    font-size:12px;
    color:#6b6b6b;
    margin:0;
}

/* DERECHA LOGOS */
.acceso-right {
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    column-gap:10px;
    row-gap:8px;
    align-items:center;
}

.acceso-right img {
    width:100%;
    max-height:94px;
    object-fit:contain;
    filter:grayscale(100%);
    opacity:.85;
}