@import url('fonts/fonts.css');

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

body {
    font-family: 'Outfit', sans-serif;
    background-color: #F4F7F6; /* Light airy background */
    color: #33415C; /* Deep blue-gray for text */
    overflow-x: hidden;
}

/* Background decorative blobs for glassmorphism effect */
body::before, body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    z-index: -1;
    filter: blur(100px);
}
body::before { top: -100px; left: -100px; width: 400px; height: 400px; background: rgba(0, 180, 216, 0.2); }
body::after { bottom: -100px; right: -100px; width: 500px; height: 500px; background: rgba(144, 224, 239, 0.3); }

/* The main grid scrambler */
._contenedor_fluido {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-areas: "lateral principal";
    min-height: 100vh;
}

/* Fallback container for inner pages */
._contenedor_interno {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-areas: "lateral interno";
    min-height: 100vh;
}

@media (max-width: 900px) {
    ._contenedor_fluido, ._contenedor_interno {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "lateral"
            "principal"; /* or interno */
    }
}

h1, h2, h3 { color: #023E8A; font-weight: 700; }
a { color: #0077B6; text-decoration: none; transition: 0.3s ease; }
a:hover { color: #00B4D8; }

/* Grid Area Assignments */
._barra_lateral { grid-area: lateral; }
._area_principal { grid-area: principal; display: flex; flex-direction: column; }
._area_interna { grid-area: interno; display: flex; flex-direction: column; padding: 40px; }

/* Glassmorphism utility */
.glass {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
    border-radius: 20px;
}

/* Sidebar Navigation */
._barra_lateral {
    position: sticky;
    top: 20px;
    height: calc(100vh - 40px);
    margin: 20px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    border-radius: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}

._logo_fluido {
    font-size: 24px;
    font-weight: 700;
    color: #0077B6;
    margin-bottom: 50px;
    text-align: center;
    line-height: 1.2;
}

._nav_menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 25px;
    text-align: center;
}

._nav_menu ul li a {
    font-size: 18px;
    font-weight: 400;
    color: #5C677D;
}
._nav_menu ul li a:hover { color: #00B4D8; font-weight: 700; }

/* Scrambled Sections inside _area_principal. We use CSS order to rearrange them */
/* HTML: Services(1) -> Footer(2) -> Contact(3) -> Hero(4) -> About(5) */
._seccion_servicios { order: 3; }
._pie_de_pagina_claro { order: 5; }
._seccion_contacto { order: 4; }
._hero_fluido { order: 1; }
._seccion_nosotros { order: 2; }

/* Hero */
._hero_fluido {
    display: flex;
    align-items: center;
    padding: 60px 40px;
    gap: 40px;
    margin: 20px;
}

._texto_hero { flex: 1; }
._texto_hero h1 { font-size: 54px; margin-bottom: 20px; line-height: 1.1; color: #03045E; }
._texto_hero p { font-size: 20px; line-height: 1.6; margin-bottom: 30px; color: #5C677D; }

._boton_suave {
    display: inline-block;
    padding: 15px 35px;
    background: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%);
    color: white !important;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(0, 119, 182, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}
._boton_suave:hover { transform: translateY(-3px); box-shadow: 0 15px 25px rgba(0, 119, 182, 0.3); }

._imagen_hero { flex: 1; text-align: center; }
._imagen_hero img { max-width: 100%; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); }

/* About */
._seccion_nosotros { padding: 60px 40px; margin: 0 20px 20px; }
._seccion_nosotros h2 { font-size: 36px; margin-bottom: 20px; }
._seccion_nosotros p { font-size: 18px; line-height: 1.8; color: #33415C; }

/* Services */
._seccion_servicios { padding: 60px 40px; margin: 0 20px 20px; }
._seccion_servicios h2 { font-size: 36px; margin-bottom: 40px; text-align: center; }

._grid_tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

._tarjeta_fluida { padding: 30px; transition: transform 0.3s; }
._tarjeta_fluida:hover { transform: translateY(-5px); }
._tarjeta_fluida h3 { font-size: 22px; margin-bottom: 15px; color: #0077B6; }
._tarjeta_fluida p { font-size: 16px; line-height: 1.6; color: #5C677D; }

/* Contact */
._seccion_contacto { padding: 60px 40px; margin: 0 20px 20px; text-align: center; }
._seccion_contacto h2 { font-size: 36px; margin-bottom: 30px; }

._formulario_ligero { max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
._formulario_ligero input, ._formulario_ligero textarea {
    width: 100%;
    padding: 15px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 180, 216, 0.2);
    border-radius: 15px;
    font-family: 'Outfit', sans-serif;
    color: #33415C;
    transition: border-color 0.3s;
}
._formulario_ligero input:focus, ._formulario_ligero textarea:focus {
    outline: none;
    border-color: #00B4D8;
    background: #FFFFFF;
}

/* Footer */
._pie_de_pagina_claro { padding: 30px 40px; margin: 0 20px 20px; text-align: center; color: #5C677D; }
._pie_de_pagina_claro p { margin-bottom: 10px; }
._pie_de_pagina_claro a { margin: 0 10px; color: #0077B6; font-size: 14px; }

/* Inner pages */
._area_interna h1 { font-size: 40px; margin-bottom: 20px; }
._area_interna h2 { font-size: 28px; margin: 30px 0 15px; }
._area_interna p, ._area_interna ul { font-size: 18px; line-height: 1.8; margin-bottom: 20px; }
._area_interna ul { padding-left: 20px; }

@media (max-width: 900px) {
    ._barra_lateral { height: auto; position: relative; flex-direction: row; justify-content: space-between; padding: 20px; top: 0; }
    ._logo_fluido { margin-bottom: 0; }
    ._nav_menu ul { flex-direction: row; gap: 15px; }
    ._hero_fluido { flex-direction: column; text-align: center; }
}