/* Base styles (mobile-first) */

body {
    grid-template-columns: 1fr;
    grid-template-areas: 
                         "nav"
                         "header"
                         "project_description"
                         "project_details"
                         "images_carrousel"
                         "footer";
}

body > header {
    grid-area: header;
    height: 231px;
    max-height: 231px;
    padding-top: 0px;
    padding-left: 15px;
    text-align: left;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

#project_description {
    grid-area: project_description;
    min-width: 320px;
    padding: 30px;
}

#project_details {
    grid-area: project_details;
    min-width: 320px;
    padding: 30px;
}

#images_carrousel {
    grid-area: images_carrousel;
    background-color: var(--intercalated-background);
    min-width: 320px;
    padding: 30px;
}

/* Tablet styles */
@media only screen and (min-width: 481px) {
    
    body {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
                         "nav nav"
                         "header header"
                         "project_description project_details"
                         "images_carrousel images_carrousel"
                         "footer footer";
    }

    body > header {
        grid-area: header;
        height: 308px;
        max-height: 308px;
        padding: 60px;
        text-align: left;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    }
}

/* Desktop styles */
@media only screen and (min-width: 769px) {
    
    body {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
                         "nav nav"
                         "header header"
                         "project_description project_details"
                         "images_carrousel images_carrousel"
                         "footer footer";
    }

    body > header {
        grid-area: header;
        height: 308px;
        max-height: 308px;
        padding: 60px;
        text-align: left;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    }
    
}


/* ── Carrusel: ajustes sobre los estilos base de global.css ───────────────
   El CSS global fija .column al 16.66% (pensado para seis miniaturas) y deja
   el caption sin color sobre fondo #222. Esto lo corrige sin tocar las
   páginas antiguas, que cargan su propio CSS. */
#images_carrousel .mySlides img { border-radius: 8px 8px 0 0; display: block; }

#images_carrousel .caption-container {
    background: #1b2733;
    border-radius: 0 0 8px 8px;
    padding: 14px 20px;
    text-align: left;
}
#images_carrousel #caption {
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

#images_carrousel .row { display: flex; gap: 12px; margin-top: 14px; }
#images_carrousel .row:after { content: none; }
#images_carrousel .column { float: none; width: auto; flex: 1 1 0; min-width: 0; }

#images_carrousel .demo {
    opacity: .5;
    display: block;
    border-radius: 7px;
    border: 2px solid transparent;
    transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
#images_carrousel .demo:hover { opacity: .8; }
#images_carrousel .demo.active {
    opacity: 1;
    border-color: var(--secondary-color);
    box-shadow: 0 5px 16px rgba(0,0,0,.2);
    transform: translateY(-2px);
}

/* Las flechas eran blancas sin fondo: invisibles sobre capturas claras */
#images_carrousel .prev, #images_carrousel .next {
    background: rgba(0,0,0,.45);
    border-radius: 6px;
    margin-top: -24px;
    padding: 14px 13px;
}
#images_carrousel .numbertext { background: rgba(0,0,0,.5); border-radius: 0 0 6px 0; }


/* Bondades de negocio: columna izquierda, bajo el botón de demo */
#business_value {
    margin-top: 38px;
    text-align: left;   /* el contenedor padre centra; aquí no */
}
#business_value * { text-align: left; }
#business_value h3 {
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin: 0 0 16px;
    font-weight: 700;
}
#business_value ul { list-style: none; margin: 0; padding: 0; }
#business_value li { margin-bottom: 18px; padding-left: 18px; position: relative; }
#business_value li::before {
    content: "";
    position: absolute;
    left: 0; top: 9px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--secondary-color);
}
#business_value strong { display: block; color: var(--primary-color); font-size: 15.5px; margin-bottom: 3px; }
#business_value span { color: #4a5560; font-size: 14.5px; line-height: 1.55; }