@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

:root
{
    --white: #f9f9f9;
    --green: #EF4B24;
    --green-light: #f49954;
    --black: #36383F;
    --grey: #85888C;
}

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

body
{
    font-family: "Poppins", sans-serif;
}

a
{
    text-decoration: none;
}

ul
{
    list-style: none;
}

.header
{
    background: linear-gradient(180deg, #EF4B24, #f49954);
    box-shadow: 1px 1px 5px 0px var(--grey);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 99999;
}

.logo
{
    display: inline-block;
    color: var(--white);
    font-size: 60px;
    margin-left: 10px;
}



.nav
{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: var(--green);
    overflow: hidden;
    max-height: 0;
    transition: max-height .5s ease-out;
}

.menu a
{
    display: block;
    padding: 30px;
    color: var(--white);
}

.menu a:hover
{
    background-color: var(--green-light);
}

.hamb
{
    cursor: pointer;
    float: right;
    padding: 40px 20px;
}


.hamb-line 
{
    background: var(--white);
    display: block;
    height: 2px;
    position: relative;
    width: 24px;
    
}

.hamb-line::before,
.hamb-line::after
{
    background: var(--white);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.hamb-line::before
{
    top: 5px;
}

.hamb-line::after
{
    top: -5px;
}

.side-menu 
{
    display: none;
}

.side-menu:checked ~ nav
{
    max-height: 100%;
}

.side-menu:checked ~ .hamb .hamb-line 
{
    background: transparent;
}

.side-menu:checked ~ .hamb .hamb-line::before 
{
    transform: rotate(-45deg);
    top:0;
}

.side-menu:checked ~ .hamb .hamb-line::after 
{
    transform: rotate(45deg);
    top:0;
}

/* ====== SLIDER ====== */
.slider-box {
    width: 100%;
    max-width: 1172px;
    margin: 30px auto;
    overflow: hidden;
    border-radius: 20px;
}

.slider-box ul {
    display: flex;
    padding: 0;
    width: 400%;
    animation: slide 10s infinite;
}

.slider-box li {
    width: 100%;
    list-style: none;
    position: relative;
}

.slider-box img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.texto {
    position: absolute;
    text-align: center;
    padding: 0 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    width: 90%;
}

.texto h2 {
    font-size: clamp(20px, 5vw, 45px);
    margin-bottom: 10px;
}

.li {
    list-style-type: circle; /* opciones: disc | circle | square */
    margin-left: 20px;
    padding-left: 20px;
}

.valores li {
    list-style: disc;
    margin-left: 40px;
    padding-left: 20px;
}

@keyframes slide {
    0% {margin-left: 0;}
    20% {margin-left: 0;}
    25% {margin-left: -100%;}
    45% {margin-left: -100%;}
    50% {margin-left: -200%;}
    70% {margin-left: -200%;}
    75% {margin-left: -300%;}
    100% {margin-left: -300%;}
}

/* ====== CONTENEDORES ====== */
.contenedor,
.contenedor2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
    text-align: center;
}

.contenedor div, 
.contenedor2 div {
    flex: 1 1 400px;           /* se adaptan al espacio */
    max-width: 700px;
    margin: 0;
}

.contenedor img, 
.contenedor2 img {
    display: block;
    margin: 0;            /* centra la imagen */
    width: 100%;
    max-width: 450px;
    height: auto;
    border-radius: 15px;
}

.historia, .vision, .mision, .valores {
    width: 100%;
    max-width: 700px;
    margin: 20px auto;
    text-align: justify;
}

.img-responsive {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 20px;
}

/* ====== TITULOS ====== */
h1 {
    font-size: clamp(24px, 5vw, 40px);
    color: #EF4B24;
}

/* ====== MEDIA QUERIES ====== */
@media (min-width: 992px) {
    .nav {
        max-height: none;
        top: 0;
        position: relative;
        float: right;
        width: fit-content;
        background-color: transparent;
    }

    .menu li {
        float: left;
    }

    .menu a:hover {
        background-color: transparent;
        color: var(--black);
    }

    .hamb {
        display: none;
    }
}
/* Espaciado interno para que el texto no se pegue a los bordes en móviles */
.historia, 
.vision, 
.mision, 
.valores {
    padding: 0 15px;   /* margen lateral */
}

/* Asegurar que los párrafos tengan separación en móviles */
@media (max-width: 768px) {
    .historia, 
    .vision, 
    .mision, 
    .valores {
        padding: 0 20px;
    }

    .texto {
        padding: 0 10px; /* carrusel */
    }

    p, li {
        line-height: 1.6; /* más legible */
    }
}