/* Importar la fuente Poppins desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400&display=swap');

/* =========================================
   1. ESTILOS BASE Y TIPOGRAFÍA
   ========================================= */

/* El asterisco (*) aplica a TODOS los elementos de la página. 
   box-sizing: para que los bordes y los padding no aumenten en tamaño de las cajas */
* {
    box-sizing: border-box; 
    line-height: 1.5em; /* interlineado */
}

html {
    font-family: sans-serif, "Lucida Sans";
}

/* quito margenes del body */
body {
   font-family: 'Poppins', sans-serif;
    font-size: 16px; /* tamaño legible */
    margin: 0;
    padding: 0;
}

h1 { font-size: 1.5em; }

/* saco el subrayado "feo" de los links */
a { text-decoration: none; }

/* Efecto hover para los links */
a:active, a:visited, a:hover { color: #003b49; font-weight: 700; }

/* Clases que se repiten en el sitio */
.poppins { font-family: poppins, sans-serif; text-align: center; font-size: 18px; font-style: italic; }
.title2 { font-size: 0.9em; font-weight: 700; color: #000000ab; }
.title3 { font-size: 14px; font-weight: 700; color: #000000ab; }
.f28 { font-size: 1.5em; }
.text24 { font-size: 24px; }
.text22 { font-size: 22px; }
.center { text-align: center; display: flex; justify-content: center; } /* Centrado perfecto con flexbox */
.align-center { text-align: center; }
.right { text-align: right; }
.green { color: darkseagreen; }
.underline { text-decoration: underline; }
.vert-middle { vertical-align: middle; }

/* ACCESIBILIDAD (focus): borde naranja alrededor 
   de los botones o links cuando alguien navega usando el teclado */
a:focus, button:focus, .menu li a:focus, input:focus, textarea:focus {
    outline: 3px solid #d9774a; 
    outline-offset: 3px; 
    background-color: #e2dfd2; 
}


/* =========================================
   2. SISTEMA DE GRILLAS CLÁSICO (COLUMNAS)
   ========================================= */

/* Selecciona cualquier clase que contenga "col-". 
   float: left para aalinear los elementos horizontalemnte. */
[class*="col-"] {
    float: left;
    padding: 15px;
}

/* acá defino anchos para las columnas */
.column { float: left; width: 50%; margin-bottom: 100px; }
.column-somos { float: left; width: 40%; margin-bottom: 100px; }
.column-personal1 { float: left; width: 70%; margin-bottom: 100px; }
.column-personal2 { float: left; width: 30%; margin-bottom: 100px; }


/* =========================================
   3. ESTRUCTURAS FLEXBOX (MODERNAS)
   ========================================= */

/* Flexbox
   align-items: stretch para que todas las columnas tengan la misma altura. */
.row1 {
    display: flex;
    flex-wrap: wrap; /* si no hay espacio baja a la siguiente linea */
    align-items: stretch; 
    margin-bottom: 30px;
}

/* El 'clearfix'. Como a veces usamos 'float', los contenedores padres colapsan y pierden su altura. 
   Esto fuerza al contenedor a envolver a sus hijos flotantes. */
.row1::after {
    content: "";
    clear: both;
    display: table;
}

.row1 .column {
    display: flex; /* columno flex para igualar alturas */
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.row1 .column p, .row1 .column h1 { text-align: left; }

/* flex: 1 para que las cajas se expandan en vertical igualando sus alturas. */
.row1 div.back1, .row1 div.back2 {
    height: 100%;
    margin: 10px;
    padding: 20px;
    width: 100%;
    flex: 1; 
}

/* colores para las cajas de texto de la Home */
.row1 div.back1 { background-color: #d6d2c4; color: #003b49; }
.row1 div.back2 { background-color: #003b49; color: #f4f4f2; }
.row1 div.back1 p, .row1 div.back2 p { height: auto; margin: 0; padding: 0; }
.row1 div.back2 p { color: #f4f4f2; }


/* =========================================
   4. HEADER Y NAVEGACIÓN
   ========================================= */

/* Barra superior. overflow: hidden sirve para que reconozca los menús que flotan en su interior */
.header {
    background-color: #d6d2c4;
    color: #003b49;
    padding: 15px;
    overflow: hidden;
}

.header h1 { font-family: 'Poppins', sans-serif; margin: 0px; padding: 0px; }
.header a { float: left; color: black; text-align: center; padding: 12px; text-decoration: none; font-size: 22px; line-height: 25px; }

/* list-style-type: none saco los bullets */
.menu ul { list-style-type: none; margin: 0; padding: 0; float: right; }

/* box-shadow sobra 3d para las tarjetas */
.menu li {
    font-size: 18px;
    padding: 12px;
    margin-bottom: 7px;
    background-color: #d6d2c4;
    color: #003b49;
    font-weight: bold;
    box-shadow: 0 1px 8px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    float: left;
}

/* Efecto al pasar el mouse por el menú o al estar en la página actual */
.menu li:hover, .menu li.active { background-color: #003b49; color: #ffffff; cursor: pointer; }
.menu li a { all: unset; display: block; padding: 0px; cursor: pointer; }
.menu li a span { display: inline; position: relative; padding: 0px; margin: 0px; cursor: pointer; vertical-align: top; }


/* --- LOGO en css --- */
.header h1 a.logo {
    float: left;
    font-family: 'Poppins', sans-serif;
    font-size: 28px; 
    font-weight: 300; /* Letra "Grupo" */
    color: #003b49; 
    text-transform: uppercase;
    letter-spacing: 1px; 
    padding: 8px 15px;
    text-decoration: none;
    transition: all 0.3s ease; /* Transición para el hover */
}

/* Destaque "Aleisa" */
.header h1 a.logo span {
    font-weight: 800; /* Letra extra gruesa */
    color: #d9774a; /* El color terracota accesible */
}

/* Efecto al pasar el mouse sobre el logo */
.header h1 a.logo:hover {
    transform: scale(1.02); /* Se agranda un 2% el logo */
    opacity: 0.9;
}


/* =========================================
   5. SECCIONES (PROYECTOS Y CONSTRUCCIÓN)
   ========================================= */

/* --- Proyectos --- */
/* gap: 40px separación entre el texto y el slider */
.flex-proyecto {
    display: flex;
    flex-wrap: wrap; 
    gap: 40px;
    align-items: center; /* Centra el texto verticalmente */
    margin-bottom: 40px;
    margin-top: 20px;
}

.flex-proyecto .column { flex: 1; min-width: 300px; margin-bottom: 0; float: none; }
.flex-proyecto h3 { font-family: 'Poppins', sans-serif; font-size: 1.3em; color: #003b49; margin-top: 20px; margin-bottom: 10px; }
.flex-proyecto p { font-size: 1em; color: #333; line-height: 1.6em; margin-bottom: 15px; }

/* Etiqueta de estado de ventas */
.flex-proyecto .intro-text {
    font-size: 1.1em;
    font-weight: 700;
    color: #d9774a; 
    background-color: #e2dfd2; 
    padding: 10px 15px;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 20px;
}

/* --- Construcción --- */
.flex-construccion {
    display: flex;
    flex-wrap: wrap; 
    gap: 40px; 
    align-items: flex-start; /* los elementos se alinean desde arriba */
    margin-bottom: 50px;
}

.flex-construccion .column { flex: 1; min-width: 300px; float: none; margin-bottom: 0; }
.flex-construccion .align-center { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.flex-construccion h3 { font-family: 'Poppins', sans-serif; font-size: 1.4em; color: #003b49; margin-top: 25px; margin-bottom: 10px; text-align: left; font-weight: 700; }
.flex-construccion p, .flex-construccion ul { font-size: 1em; color: #333; margin-bottom: 15px; text-align: left; line-height: 1.6em; }
.flex-construccion .intro-text { font-size: 1.1em; font-weight: 700; color: #d9774a; margin-bottom: 25px; }
.flex-construccion ul { padding-left: 20px; }
.flex-construccion ul li { margin-bottom: 10px; }


/* =========================================
   6. COMPONENTES (Banners, Sliders, Iconos)
   ========================================= */

/* Título que separa secciones */
.title_banner {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #003b49;
    font-family: poppins, sans-serif;
    font-size: 2.5em;
    font-weight: 700;
    color: #ffffff;
    padding: 70px 0;
    margin: 0px 0px 30px 0px;
}

/* Contenedor del banner en la Home. position: relative para 
   que el texto del banner no se escape de la imagen. */
.banner {
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
    border-radius: 25px;
    border: 1px solid #8e8e8e;
    width: 100%;
}

.banner-bg { opacity: 0.6; display: block; width: 100%; height: auto; }

/* El texto del banner sobre la imagen de fondo. */
.banner-content {
    position: absolute;
    top: 30%;
    width: 100%;
    font-size: 24px;
    font-family: 'Poppins';
    font-weight: 700;
    color: #fff;
    text-align: center;
    padding-top: 10px;
}

/* Efecto Hover el texto cambia su opacidad y color */
.banner:hover .banner-content { opacity: 1; color: #003b49; }

/* --- Sliders --- */
.slide { border: 3px solid #003b49; }

/* !important anula cualquier otro tamaño que tuviera la imagen (como los viejos 80% o 90%).
   object-fit: cover asegura que la imagen llene el espacio sin deformarse (como fondo de pantalla). */
.slide img, .slide1 img, .slide2 img { width: 100% !important; height: auto; object-fit: cover; }

/* Por defecto las imágenes de los carruseles están ocultas. */
.mySlides1, .mySlides2 { display: none; }
/* se muestra la imagen 'visible' */
.visible { display: block; }

.column .buttons { bottom: 0px; margin: 0px; padding: 0px; text-align: center; }
.column .buttons .button { background-color: #003b49; margin: 5px; padding: 5px; border-radius: 50%; cursor: pointer; }

/* --- Iconos Material --- */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-72 { font-size: 72px; }
.material-icons.orange { color: #d9774a; } /* Tono terracota en vez de naranja */
.material-icons.blue { color: #003b49; }


/* =========================================
   7. TABLAS
   ========================================= */
.table-m2 { width: 100%; margin-bottom: 60px; }
.table-m2 th { background-color: #003b49; color: #f1f1f1; }
.table-m2 .row0 { background-color: #e8e6df; } /* Filas pares */
.table-m2 .row01 { background-color: #d6d2c4; } /* Filas impares */
.table-m2 .center-text { text-align: center; }


/* =========================================
   8. MODAL (Popups de Imágenes Interactivos)
   ========================================= */

/* Cursor pointer indica imagen es "clickeable" */
#myImg, #myImg1, #myImg2, #myImg3, #myImg4, #myImg5 { border-radius: 5px; cursor: pointer; transition: 0.3s; }
#myImg:hover { opacity: 0.7; }

/* El fondo negro del modal. position: fixed asegura que siempre cubra TODA la pantalla 
   aunque el usuario haga scroll hacia abajo. z-index lo pone "por encima" de todo lo demás. */
.modal {
    display: none; /* Nace oculto hasta que se activa por el js */
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9); /* Fondo negro con 90% de opacidad */
}

/* La imagen agrandada dentro del modal. animation zoom */
.modal-content { margin: auto; display: block; width: 80%; max-width: 700px; animation: zoom 0.6s; }
#caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; animation: zoom 0.6s; }

/* Definimos la animación de "Zoom". Va desde escala 0 (invisible) hasta 1 (tamaño real) */
@keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} }

/* botón [X] para cerrar el modal */
.close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; }
.close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; }


/* =========================================
   9. FOOTER Y ASIDE (Barra lateral)
   ========================================= */
.aside {
    background-color: #d6d2c4;
    padding: 15px;
    color: #003b49;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer { background-color: #d6d2c4; color: #003b49; text-align: center; font-size: 14px; padding: 15px; }


/* =========================================
   10. MEDIA QUERIES
   ========================================= */

/* ENFOQUE MOBILE-FIRST: forzamos a que las columnas ocupen el 100%
   Esto asegura que en celulares los elementos se apilen hacia abajo. */
[class*="col-"] { width: 100%; }

/* Ajustes específicos para móviles */
@media only screen and (max-width: 700px){
    .modal-content { width: 100%; }
}

@media only screen and (max-width: 599px) {
   
    .column { display: block; float: none; width: 100%;}
    .row1 { display: block; width: 100%;}
    .row1 div.back1, .row1 div.back2 { display: block; width: 100%; margin: 10px 0;}
    .row1::after { display: block; width: 100%;}
    /* --- MENÚ ADAPTADO PARA MÓVILES (PUNTO 06) --- */
    .header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .header h1 {
        margin-bottom: 15px; /* Separa el logo de los botones */
    }

    .header .row {
        width: 100%;
    }

    .menu ul {
        float: none; /* el float que rompe el diseño */
        display: flex;
        flex-direction: column; /* botones del menú uno abajo del otro */
        width: 100%;
        gap: 8px; /* Separación entre botones */
    }

    .menu li {
        float: none;
        width: 100%; /* Cada botón ocupa todo el ancho del celular */
        text-align: center;
        margin-bottom: 0;
        padding: 14px; 
    }
}

/* Para TABLETS +600px: 
  reasignando anchos porcentuales. */
@media only screen and (min-width: 600px) {
    .col-s-1 {width: 8.33%;} .col-s-2 {width: 16.66%;} .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;} .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;} .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;} .col-s-12 {width: 100%;}
    .column { display: inline-block;}
}

/* Para ESCRITORIOS : 
   Es el sistema de grilla de 12 columnas. */
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;}
    .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;}
    .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;}
    .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;}
}


/* =========================================
   11. TARJETAS DE LA HOME Y LLAVE EN MANO
   ========================================= */

/* Contenedores Flexbox: Alinean las cajas una al lado de la otra y con la misma altura */
.home_lnk_container, .roll_container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    align-items: stretch; 
    gap: 20px; 
}

/* Estilo individual de las 3 cajas de la Home */
.home_lnk_box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-width: 250px;
    margin: 0;
    position: relative; /* mantiene el efecto Hover dentro de la caja */
    border: 2px solid #d6d2c4;
    border-radius: 4%;
}

/* Estilo de las casas en "Llave en Mano" */
.roll_box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    max-width: 15em;
    border: 5px solid #003b49;
    flex: 1;
    min-width: 250px;
    margin: 0;
}

/* Base para las imágenes de las tarjetas */
.roll_image { width: 100%; display: block; }
.roll_image .image { display: block; width: 100%; height: auto; }
.roll_box .image { border-bottom: 5px solid #003b49; } 



/* Hace visible el contenedor oculto al pasar el mouse */
.roll_image:hover .overlay { opacity: 1; }
.home_lnk_box:hover .overlay .box { opacity: 1; }

/* El contenedor "fantasma" que se superpone a la imagen */
.overlay {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%; width: 100%;
    opacity: 0;
    transition: .5s ease;
}

/* El fondo transparente azul con el icono dentro */
.overlay .box {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; transition: .5s ease; overflow: hidden;
    text-align: center; padding-top: 20px;
    background-color: rgba(0, 59, 73, 0.7); /* Azul con 70% de opacidad */
}

.overlay .box a { text-decoration: none; }
.overlay .box a span { opacity: 1; width: 100%; height: 100%; color: #d9774a; }


.roll_title { font-size: 32px; text-align: center; font-weight: 700; color: #000000ab; padding-top: 15px; }
.roll_text { font-size: 12px; color: #8e8e8e; padding: 5px; display: flex; flex-direction: column; flex-grow: 1; }
.roll_text .roll_subtitle { font-weight: 700; }
.roll_text .roll_footer { font-weight: 700; font-size: 14px; margin-top: auto; }


/* =========================================
   12. PÁGINA DE CONTACTO
   ========================================= */

/* Contenedor principal: alinea la lista y el mapa lado a lado */
.contact_box {
    display: flex;
    flex-wrap: wrap; /* Permite que el mapa baje en celulares */
    align-items: center; 
    justify-content: space-between;
    gap: 40px; /* Separación entre el texto y el mapa */
    margin-top: 30px;
    margin-bottom: 50px;
}

/* Lista de datos de contacto */
.contact_box ul {
    flex: 1;
    min-width: 250px;
    padding: 0;
    margin: 0;
}

.contact_box li {
    text-align: left;
    list-style: none;
    margin-bottom: 25px; /* Separación entre cada línea de contacto */
    font-size: 1.1em;
    color: #333;
    display: flex;
    align-items: center; 
}

/* Separación entre el icono azul y el texto */
.contact_box li .material-icons {
    margin-right: 15px; 
}


/* Estilos para los links de contacto */
.contact_box li .contact-link {
    display: flex;
    align-items: center;
    color: #333; /* Mantiene el texto en color oscuro */
    text-decoration: none; /* Quita el subrayado por defecto */
    transition: color 0.3s ease;
}

/* Efecto al pasar el mouse por los links de contacto */
.contact_box li .contact-link:hover {
    color: #d9774a; /* Cambia al terracota accesible */
}

.contact_box li .contact-link .material-icons {
    margin-right: 15px; 
}

/* caja del mapa */
.map {
    flex: 1;
    min-width: 300px;
    display: flex;
    border: 5px solid #003b49; /* borde azul oscuro de la caja */
    border-radius: 8px; /* Bordes redondos */
    overflow: hidden; /* el mapa no sobresale de la caja */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra */
}

/* Forzamos al iframe de Google Maps a ser responsivo */
.map iframe {
    width: 100% !important; /* Ignora el width="600" del HTML */
    height: 350px !important; /* Altura controlada */
    display: block;
}

/* Estilo para el icono de WhatsApp de FontAwesome */
.ws-icon {
    color: #003b49; /* azul corporativo */
    margin-right: 15px; /* Misma separación que los otros iconos */
    font-size: 24px;
    vertical-align: middle;
}


.contact_box li .contact-link:hover .ws-icon {
    color: #d9774a; /* Terracota */
}


/* =========================================
   13. PÁGINA DE BARRIOS (Galería Flexbox)
   ========================================= */

.flex-barrios {
    display: flex;
    flex-wrap: wrap; /* Permite que las tarjetas bajen en pantallas chicas */
    gap: 30px; /* Separación simétrica entre tarjetas */
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 50px;
}

/* La tarjeta individual de cada barrio */
.barrio-card {
    flex: 1;
    min-width: 250px;
    max-width: 350px; /* Evita que se estiren demasiado en pantallas gigantes */
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    background-color: #f4f4f2; /* Color de fondo accesible */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto Hover: La tarjeta se eleva ligeramente */
.barrio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* La imagen dentro de la tarjeta */
.barrio-card img {
    width: 100%; /* Se adapta al tamaño de su tarjeta */
    height: 200px; /* Altura fija para que todas queden alineadas */
    object-fit: cover; /* Evita que la foto se deforme */
    border: 4px solid #003b49;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* El nombre del barrio */
.barrio-card .label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    color: #003b49;
}


/* =========================================
   14. PÁGINA: NUESTRA GENTE (Personal)
   ========================================= */

/* Contenedor principal de la sección personal */
.somos {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 50px;
}

/* Columna de la tabla de empleados */
.column-personal1 {
    flex: 2; /* Ocupa el doble de ancho que la caja de contacto */
    min-width: 300px;
    margin-bottom: 0;
    float: none; /* Anula float */
}

/* Caja de "Trabajá con nosotros" */
.column-personal2 {
    flex: 1;
    min-width: 250px;
    background-color: #e2dfd2; /* Fondo color arena sutil */
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 0;
    float: none;
    font-weight: 700;
    font-size: 1.1em;
    color: #003b49;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Sombra elegante */
}

/* Separación del correo en la caja de trabajo */
.column-personal2 .material-icons {
    margin-top: 15px;
    margin-right: 5px;
}

/* --- Tabla de Empleados --- */
.personal {
    width: 100%;
    border-collapse: collapse; /* Quita los espacios dobles entre celdas */
}

.personal td {
    padding: 15px 10px;
    vertical-align: middle;
    border-bottom: 1px solid #d6d2c4; /* Línea separadora entre empleados */
}

/* Quitamos la línea de la última fila para que quede limpio */
.personal tr:last-child td {
    border-bottom: none;
}

/* --- Tipografía: Nombres y Cargos --- */
.name {
    color: #1a4494; /* Azul corporativo accesible */
    font-weight: 700;
    text-decoration: none;
    font-size: 1.1em;
    transition: color 0.3s ease; /* Transición suave */
}

/* Efecto al pasar el mouse por el nombre */
.name:hover {
    color: #d9774a; /* Terracota */
}

.position {
    font-style: italic;
    font-size: 0.95em;
    color: #555;
    display: inline-block;
    margin-top: 3px;
}


.breadcrumbs {
    padding: 10px 15px;
    font-size: 14px;
    color: #8e8e8e;
    margin-bottom: 15px;
}
.breadcrumbs a {
    color: #d9774a; /* terracota */
    text-decoration: none;
    font-weight: bold;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}



/* =========================================
   15. FORMULARIOS (Contacto y Newsletter)
   ========================================= */

/* --- FORMULARIO DE CONTACTO --- */
.form-container {
    background-color: #f4f4f2; /* Fondo gris clarito */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Sombra suave */
    margin-bottom: 40px;
    border-top: 5px solid #003b49; /* Detalle en el borde superior */
}

.form-container h2 {
    color: #003b49;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.8em;
}

/* Títulos de cada campo */
.form-container label {
    display: block;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

/* Cajas donde el usuario escribe */
.form-container input[type="text"],
.form-container input[type="email"],
.form-container textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto Focus: clic para escribir */
.form-container input:focus,
.form-container textarea:focus {
    border-color: #d9774a; /* Cambia a naranja/terracota */
    outline: none;
    box-shadow: 0 0 5px rgba(217, 119, 74, 0.3);
}

/* Botón de Enviar Mensaje */
.btn-enviar {
    background-color: #003b49; /* Azul Grupo Aleisa */
    color: #fff;
    border: none;
    padding: 15px 30px;
    font-size: 1.1em;
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%; /* Ocupa todo el ancho disponible */
}

/* Efecto al pasar el mouse por el botón */
.btn-enviar:hover {
    background-color: #d9774a; /* Cambia a terracota */
    transform: translateY(-2px); /* Efecto de elevación */
}

/* --- NEWSLETTER EN EL FOOTER --- */
.newsletter {
    background-color: #e2dfd2; /* Fondo arena para que destaque en el footer */
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid #d6d2c4;
}

.newsletter strong {
    display: block;
    color: #003b49;
    font-size: 1.1em;
    margin-bottom: 15px;
}

.newsletter input[type="email"] {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
    width: 250px; /* Ancho fijo en computadoras */
    font-family: 'Poppins', sans-serif;
}

.newsletter button {
    background-color: #d9774a;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: background-color 0.3s ease;
}

.newsletter button:hover {
    background-color: #003b49; /* Se vuelve azul al pasar el mouse */
}

/* Adaptación del Newsletter para Celulares */
@media only screen and (max-width: 599px) {
    .newsletter input[type="email"] {
        width: 100%;
        margin-bottom: 10px;
        margin-right: 0;
    }
    .newsletter button {
        width: 100%;
    }
}

/* Limpieza de estilos inline para el Newsletter */
#formNewsletter {
    display: inline-block;
    margin-left: 10px;
}


/* =========================================
   16. INTEGRACIÓN DE REDES SOCIALES
   ========================================= */

/* Barra de Redes en el Footer */
.social-footer {
    display: flex;
    justify-content: center;
    gap: 25px; /* Separación */
    margin-top: 15px;
    margin-bottom: 15px;
}

.social-footer a {
    color: #003b49; /* azul corporativo */
    font-size: 24px; /* Tamaño de icono */
    transition: color 0.3s ease, transform 0.2s ease;
    display: inline-block;
}

/* Efecto hover en el Footer */
.social-footer a:hover {
    color: #d9774a; /* Cambia a tu color terracota */
    transform: translateY(-3px); /* Pequeña elevación interactiva */
}

/* Compartir Proyecto */
.share-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
    font-weight: 700;
}

.share-container a {
    color: #003b49;
    font-size: 18px;
    transition: color 0.2s ease;
}

/* Efecto Rollover al compartir */
.share-container a:hover {
    color: #d9774a;
}