*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}


.Presentacion_inicio {
    /* Capa oscura encima + imagen de fondo (igual que hiciste en la reseña histórica) */
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        url("/Pagina_web/Secciones/Inicio/Imágenes/Imagen_presentación_inicio.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(1.2) saturate(1.3);

    height: 30rem;               

    /* Centra el texto vertical y horizontalmente */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.info_inicial{
    margin-bottom: 13rem;
}

.info_inicial > h2 {
    font-family: Montserrat-Extrabold;
    color: #ffffff;
    font-size: 4rem;
    margin-bottom: 0rem;      
}

.info_inicial > p {
    margin-top: 1rem;
    font-family: Montserrat-Medium;
    color: #ffffff;
    font-size: 2.5rem;
}

.titulos_inicio{
    height: auto;
    height: 100%;
    background-color: var(--azul-institucional);
    color: var(--blanco);
    font-family: Montserrat-Bold;
}

.titulos_inicio > h3{
    font-size: 2.5rem;
    padding: 0.8rem 2rem 0.8rem 2rem;
}

/* ====== CARRUSEL DEL PERIÓDICO ====== */

/* Marco del carrusel: altura fija y fondo blanco para las verticales */
.Periodico {
    position: relative;             /* Ancla los controles en la esquina */
    height: 35rem;                 /* Altura del marco (ajústala a gusto) */
    background-color: var(--blanco); /* Rellena lo que la imagen no cubra */
    overflow: hidden;
}

/* Cada noticia: oculta por defecto, ocupa todo el marco */
.noticia {
    position: absolute;             /* Todas apiladas en el mismo lugar */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    opacity: 0;                     /* Invisible */
    transition: opacity 0.6s ease;  /* Fundido suave al cambiar */
}

/* La noticia visible */
.noticia.activa {
    opacity: 1;
}

/* La imagen se ve COMPLETA: si es vertical, el blanco rellena los lados */
.noticia img {
    width: 100%;
    height: 100%;
    object-fit: contain;            /* Nunca recorta ni deforma */
}

/* Barra de controles, esquina inferior derecha (como tu diseño) */
.controles_periodico {
    position: absolute;
    bottom: 1rem;
    right: 1.5rem;

    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Estilo común de flechas y números */
.flecha,
.numero_noticia {
    background-color: var(--azul-institucional);
    color: var(--blanco);
    font-family: Montserrat-Bold;
    font-size: 1rem;

    border: none;
    border-radius: 0.4rem;
    padding: 0.5rem 0.8rem;

    cursor: pointer;
    transition: background-color 0.3s ease;
}

.flecha:hover,
.numero_noticia:hover {
    background-color: #0a3d6b;      /* Se oscurece al pasar el mouse */
}

/* El número de la noticia que se está viendo */
.numero_noticia.activa-num {
    background-color: var(--blanco);
    color: var(--azul-institucional);
}

/* ====== ENFOQUES ACADÉMICOS ====== */

/* Cada enfoque: imagen | texto en dos columnas iguales */
.enfoque {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;            /* Centra verticalmente ambas columnas */
    margin: 2rem;
}

/* Columna del texto: apilado y centrado */
.texto_enfoque {
    color: var(--azul-letra);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;

}

/* Título del enfoque */
.texto_enfoque > h4 {
    font-family: Montserrat-Bold;
    font-size: 2.3rem;
    margin-bottom: 2rem;            /* Separa el título del párrafo */
}

/* Descripción del enfoque */
.texto_enfoque > p {
    font-family: Montserrat-Medium;
    font-size: 1.2rem;
    line-height: 1.6;               /* Aire entre líneas */
}

/* Columna de la imagen: centrada en su celda */
.imagen_enfoque {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Las tres imágenes en caja idéntica, con sombra azul */
.imagen_enfoque > img {
    width: 35rem;
    height: 20rem;
    object-fit: cover;              /* Recorta sin deformar → uniformidad */
    border-radius: 1rem;

    /* Sombra azul institucional (translúcida) */
    box-shadow: 0 0.5rem 1.5rem rgba(5, 84, 149, 0.35);

    transition: transform 0.3s ease, box-shadow 0.3s ease;  /* Suaviza el hover */
}

/* Al pasar el mouse: la imagen "se levanta" y la sombra azul se intensifica */
.imagen_enfoque > img:hover {
    transform: translateY(-0.4rem);                          /* Sube un pelín */
    box-shadow: 0 1rem 2rem rgba(5, 84, 149, 0.5);          /* Sombra más profunda */
}

/* ====== BANNER 20 AÑOS DE EXPERIENCIA ====== */

/* Imagen de fondo con capa azul (mismo truco de la reseña histórica) */
.experiencia_inicio {
    background-image:
        linear-gradient(rgba(5, 84, 149, 0.1), rgba(5, 84, 149, 0.55)),
        url("/Pagina_web/Secciones/Inicio/Imágenes/Imagen_experiencia_inicio.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    height: 30rem;                  /* Altura del banner */

    /* Centra el contenido */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

/* Título grande */
.experiencia_inicio > h3 {
    font-family: Montserrat-Extrabold;
    color: var(--blanco);
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
}

/* Texto descriptivo, con ancho limitado para que no se estire */
.experiencia_inicio > p {
    font-family: Montserrat-Extrabold;
    color: var(--blanco);
    font-size: 2.2rem;
    line-height: 1.6;
    max-width: 100rem;               /* El párrafo no pasa de este ancho */
}

/* ==========================================================
   VERSIÓN MÓVIL DE INICIO
   Pegá este bloque al final de tu inicio.css
   ========================================================== */

/* La flecha de los enfoques está oculta en escritorio */
.enfoque-flecha { display: none; }

@media (max-width: 768px) {

    /* ===== IMAGEN DE INICIO (hero) ===== */
    .Presentacion_inicio {
        height: 18rem;
        padding: 1.5rem;
    }
    .info_inicial { margin-bottom: 0; }        /* quitamos el empujón grande de escritorio */
    .info_inicial > h2 { font-size: 1.9rem; }
    .info_inicial > p { font-size: 1.05rem; margin-top: 0.6rem; }

    /* ===== TÍTULOS (Periódico, Enfoques...) ===== */
    .titulos_inicio > h3 { font-size: 1.5rem; padding: 0.6rem 1.2rem; }

    /* ===== PERIÓDICO (carrusel) ===== */
    .Periodico { height: 24rem; }              /* más bajo en celular */
    .controles_periodico { bottom: 0.6rem; right: 0.8rem; gap: 0.3rem; }
    .flecha,
    .numero_noticia { font-size: 0.85rem; padding: 0.35rem 0.6rem; }

    /* ===== ENFOQUES ACADÉMICOS (acordeón) ===== */
    /* Una sola columna: imagen arriba, título+flecha, descripción desplegable */
    .enfoque {
        grid-template-columns: 1fr;
        margin: 1rem 1rem 1.5rem;
        border-radius: 0.8rem;
        overflow: hidden;
        box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.12);
    }

    /* La imagen ocupa el ancho, altura fija, sin la sombra/hover de escritorio */
    .imagen_enfoque > img {
        width: 100%;
        height: 12rem;
        border-radius: 0;
        box-shadow: none;
    }
    .imagen_enfoque > img:hover { transform: none; box-shadow: none; }

    /* La caja de texto ya no está centrada: título como barra clicable */
    .texto_enfoque {
        padding: 0;
        align-items: stretch;
        text-align: left;
    }

    /* Título = barra azul clicable con la flecha a la derecha */
    .texto_enfoque > h4 {
        font-size: 1.15rem;
        margin: 0;
        padding: 0.9rem 1rem;
        background-color: var(--azul-institucional);
        color: var(--blanco);
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.6rem;
    }

    /* La flecha aparece y gira al abrir */
    .enfoque-flecha {
        display: inline-block;
        width: 1.3rem;
        height: 1.3rem;
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }
    .enfoque.abierto .enfoque-flecha { transform: rotate(180deg); }

    /* Descripción: colapsada por defecto, se despliega suave al abrir */
    .texto_enfoque > p {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
        padding: 0 1rem;
        font-size: 0.95rem;
        line-height: 1.6;
        text-align: left;
        color: var(--azul-letra);
    }
    .enfoque.abierto .texto_enfoque > p {
        max-height: 25rem;
        opacity: 1;
        padding: 0.9rem 1rem;
    }

    /* ===== BANNER 20 AÑOS DE EXPERIENCIA ===== */
    .experiencia_inicio {
        height: 20rem;
        padding: 1.5rem;
    }
    .experiencia_inicio > h3 { font-size: 1.9rem; margin-bottom: 1rem; }
    .experiencia_inicio > p { font-size: 1.05rem; }
}