/* ===================================
   PÁGINA DEPARTAMENTO
   =================================== */

/* CONTENEDOR PRINCIPAL */
.departamento-container {
    position: relative;
    width: 1897px;
    min-height: 1120px; /* 560 + 560 - altura exacta de las secciones */
    margin: 0 auto;
    overflow: hidden; /* Elimina barras de scroll */
}

/* ===================================
   SIDEBAR BLANCO COMPLETO - 517px ancho
   =================================== */
.departamento-submenu-lateral {
    position: absolute;
    top: 0;
    left: 0;
    width: 517px;
    height: 1120px; /* 560 + 560 */
    background-color: #FFFFFF;
    z-index: 10;
}

/* NAVEGACIÓN MENÚ DENTRO DEL SIDEBAR */
.submenu-lateral-nav {
    position: absolute;
    top: 104px;
    left: 88px;
    width: 348px;
    display: flex;
    flex-direction: column;
    gap: 31px;
}

.submenu-lateral-item {
    font-family: 'Bebas Neue Pro', sans-serif;
    font-weight: 700;
    font-stretch: semi-expanded;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    color: #EA7600;
    text-decoration: none;
    height: 32px;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.submenu-lateral-item:hover,
.submenu-lateral-item.active {
    color: #00A499;
}

/* ===================================
   CONTENEDOR SECCIONES DERECHA
   =================================== */
.departamento-secciones-derecha {
    position: relative;
}

/* ===================================
   SECCIÓN 1 - AZUL - 1380px ancho
   =================================== */
.departamento-seccion-1 {
    position: absolute;
    top: 0;
    left: 517px;
    width: 1380px;
    height: 560px;
    background-color: rgba(73, 139, 202, 0.3);
    z-index: 5;
}

/* Título Sección 1 - DENTRO de la sección */
.departamento-titulo-1 {
    position: absolute;
    top: 20px;
    left: 0;
    right: 200px;
    font-family: 'Bebas Neue Pro', sans-serif;
    font-weight: 700;
    font-stretch: semi-expanded;
    font-size: 60px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    color: #394049;
    margin: 0;
}

/* Línea naranja Sección 1 - DENTRO de la sección */
.departamento-linea-1 {
    position: absolute;
    width: 1150px;
    height: 3px;
    top: 103px;
    left: 63px; /* Alineada con el contenido */
    background-color: #EA7600;
}

/* Contenido Sección 1 - Medidas exactas del diseño */
.departamento-contenido-1 {
    position: absolute;
    width: 1050px; /* variable hasta donde llegue el texto*/
    height: 372px;
    top: 150px; /* Ajustado para estar más arriba */
    left: 93px; /* 610px (left absoluto) - 517px (inicio sección) = 93px relativo */
    
    /* Tipografía según especificaciones */
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    line-height: 1.3; /* Reducido de 1.5 a 1.3 para menos espacio entre líneas */
    letter-spacing: 0%;
    color: #000000;
    opacity: 1;
    text-align: justify; /* Justificar texto */
    
    overflow-y: auto;
    padding: 0;
    box-sizing: border-box;
}

.departamento-contenido-1 p {
    margin-bottom: 0.8em; /* Reducido de 1em a 0.8em */
    text-align: justify; /* Justificar párrafos */
}

/* ===================================
   SECCIÓN 2 - TURQUESA - 1380px ancho
   =================================== */
.departamento-seccion-2 {
    position: absolute;
    top: 560px;
    left: 517px;
    width: 1380px;
    height: 560px;
    background-color: rgba(0, 164, 153, 0.3);
    z-index: 5;
}

/* Título Sección 2 - DENTRO de la sección */
.departamento-titulo-2 {
    position: absolute;
    top: 20px;
    left: 0;
    right: 200px;
    font-family: 'Bebas Neue Pro', sans-serif;
    font-weight: 700;
    font-stretch: semi-expanded;
    font-size: 60px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    color: #394049;
    margin: 0;
}

/* Línea naranja Sección 2 - DENTRO de la sección */
.departamento-linea-2 {
    position: absolute;
    width: 1150px;
    height: 3px;
    top: 103px;
    left: 63px; /* Alineada con el contenido */
    background-color: #EA7600;
}

/* Contenido Sección 2 - DENTRO de la sección */
.departamento-contenido-2 {
    position: absolute;
    top: 12px;
    left: 50px;
    right: 50px;
    height: 540px; /* Aumentado para que las columnas tengan más espacio */
    box-sizing: border-box;
    overflow: visible; /* Cambiado de auto a visible */
}

/* Columnas de la Sección 2 - Medidas exactas del diseño */
.departamento-columnas {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px; /* Altura mínima para las columnas */
}

/* Columna 1 - Primera columna */
.departamento-columna-1 {
    position: absolute;
    width: 396px;
    min-height: 450px; /* Cambiado a min-height para que crezca con el contenido */
    top: 130px;
    left: 242px;
    
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    line-height: 1.3; /* Reducido de 1.5 a 1.3 */
    letter-spacing: 0%;
    color: #000000;
    opacity: 1;
    
    overflow: visible; /* Cambiado a visible */
    padding: 0;
    box-sizing: border-box;
}

.departamento-columna-1 p {
    margin-bottom: 0.6em; /* Reducido de 1em a 0.6em */
}

/* Columna 2 - Segunda columna */
.departamento-columna-2 {
    position: absolute;
    width: 361px;
    min-height: 450px; /* Cambiado a min-height para que crezca con el contenido */
    top: 130px;
    left: 721px;
    
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    line-height: 1.3; /* Reducido de 1.5 a 1.3 */
    letter-spacing: 0%;
    color: #000000;
    opacity: 1;
    
    overflow: visible; /* Cambiado a visible */
    padding: 0;
    box-sizing: border-box;
}

.departamento-columna-2 p {
    margin-bottom: 0.8em; /* Reducido de 1em a 0.8em */
}

/* Columna 3 - Tercera columna (opcional) */
.departamento-columna-3 {
    position: absolute;
    width: 238px;
    min-height: 304px;
    top: 130px; /* 1437px - 1120px (top sección 2) + ajuste */
    left: 891px; /* 1408px - 517px = 891px relativo */
    
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0%;
    color: #000000;
    opacity: 1;
    
    overflow: visible;
    padding: 0;
    box-sizing: border-box;
}

.departamento-columna-3 p {
    margin-bottom: 0.8em;
}

/* Ajustes cuando hay 3 columnas */
.tres-columnas .departamento-columna-1 {
    width: 263px;
    left: 155px; /* 672px - 517px = 155px relativo */
}

.tres-columnas .departamento-columna-2 {
    width: 265px;
    min-height: 388px;
    left: 522px; /* 1039px - 517px = 522px relativo */
}

.tres-columnas .departamento-columna-3 {
    width: 238px;
    min-height: 304px;
    left: 891px; /* 1408px - 517px = 891px relativo */
}
/* ===================================
   RESPONSIVE
   =================================== */
@media (max-width: 1897px) {
    .departamento-container {
        overflow-x: auto;
    }
}