/* =========================================================
   CASA GREEN – FOOTER PC
   🔒 100% ENCAPSULADO
   Todo está dentro de .cg-footer-wrapper
   👉 Puedes editar cada sección fácilmente
========================================================= */


/* =========================================================
   1️⃣ CONTENEDOR GLOBAL
   Cambia aquí el fondo general y tipografía
========================================================= */

.cg-footer-wrapper{

    width:100%;                  /* Ocupa todo el ancho */
    background:#006400;          /* 🎨 COLOR FONDO GENERAL */
    color:#fff;                  /* 🎨 COLOR TEXTO GENERAL */
    font-family:'Arial', sans-serif; /* 🖋 TIPOGRAFÍA GENERAL */

}


/* =========================================================
   2️⃣ GRID PRINCIPAL (COLUMNAS)
   Controla estructura del footer
========================================================= */

.cg-footer-wrapper .cg-footer{

    display:grid;

    grid-template-columns:1fr 1fr 1fr 1fr; 
    /* 👆 CAMBIA COLUMNAS:
       1fr 1fr 1fr 1fr  = 4 columnas
       1fr 1fr 1fr      = 3 columnas
    */

    gap:30px;                    /* Espacio entre columnas */

    padding:40px 0;              /* Espacio arriba y abajo */
    max-width:1400px;            /* Ancho máximo del contenido */
    margin:auto;                 /* Centrado */

}


/* =========================================================
   3️⃣ BLOQUE LOGO
========================================================= */

.cg-footer-wrapper .footer-logo{

    display:flex;
    flex-direction:column;
    align-items:flex-start; /* 👉 Cambia a center si quieres centrar */
    padding-left:20px;      /* 👉 Mueve logo horizontalmente */

}

.cg-footer-wrapper .footer-logo img{

    width:200px; /* 🖼 TAMAÑO LOGO */
    margin-bottom:20px;

}

.cg-footer-wrapper .footer-logo p{

    margin:0;
    font-weight:bold; /* Cambia peso del texto */

}


/* =========================================================
   4️⃣ REDES SOCIALES
========================================================= */

.cg-footer-wrapper .footer-social-icons{

    display:flex;
    gap:20px;              /* Espacio entre iconos */
    margin-top:15px;

}

.cg-footer-wrapper .footer-social-icons a{

    color:#fff;            /* 🎨 Color iconos */
    font-size:30px;        /* 🔥 Tamaño iconos */
    text-decoration:none;
    transition:.3s ease;

}

.cg-footer-wrapper .footer-social-icons a:hover{

    opacity:.8;            /* Efecto hover */
    /* Puedes cambiar por:
       transform:scale(1.1);
    */

}


/* =========================================================
   5️⃣ SECCIONES (Contacto, Legales, etc.)
========================================================= */

.cg-footer-wrapper .footer-section{

    display:flex;
    flex-direction:column;
    padding-right:20px;

}

.cg-footer-wrapper .footer-section h4{

    margin-bottom:15px;
    font-weight:bold;
    font-size:18px; /* 📝 Tamaño títulos */

}

.cg-footer-wrapper .footer-section a{

    color:#fff;
    text-decoration:none;
    margin:5px 0;
    font-size:16px; /* 🔠 Tamaño enlaces */
    transition:.2s ease;

}

.cg-footer-wrapper .footer-section a:hover{

    text-decoration:underline;

}


/* =========================================================
   6️⃣ LÍNEA SEPARADORA
   👉 Aquí controlas el grosor
========================================================= */

.cg-footer-wrapper .footer-separator{

    border:none; 
    width:100%;
    margin-top:30px;
    padding-top:25px;
    text-align:center;
    background:#006400;

}

/* Línea blanca personalizada */
.cg-footer-wrapper .footer-separator::before{

    content:"";
    display:block;
    width:100%;

    height:2px; /* 🔥 CAMBIA GROSOR AQUÍ (2px actual) */

    background:#ffffff; /* 🎨 COLOR LÍNEA */
    margin-bottom:20px;

}


/* Icono libro */
.cg-footer-wrapper .footer-separator i{

    font-size:25px; /* Tamaño icono */
    margin-bottom:5px;
    display:block;

}

.cg-footer-wrapper .footer-separator a{

    color:#fff;
    text-decoration:none;

}


/* =========================================================
   7️⃣ FOOTER INFERIOR (COPYRIGHT)
========================================================= */

.cg-footer-wrapper .footer-bottom{

    text-align:center;
    padding:20px 0;
    background:#006400;

}

.cg-footer-wrapper .footer-bottom p{

    margin:5px 0;
    font-size:16px; /* Tamaño texto */

}

.cg-footer-wrapper .footer-bottom a{

    color:#fff;
    text-decoration:none;
    margin:0 15px;

}

.cg-footer-wrapper .footer-bottom a:hover{

    text-decoration:underline;

}

/* BLOQUE CONTACTO */

.contact-block{
    margin-bottom:18px;
}

.contact-title{
    font-weight:700;
    margin-bottom:6px;
}

/* Links generales */
.contact-link{
    display:block;
    text-decoration:none;
    font-size:14px;
    margin-bottom:6px;
    transition:.3s ease;
}

/* WhatsApp */
.contact-link.whatsapp{
    color:#25D366;
}

.contact-link.whatsapp:hover{
    opacity:.8;
}

/* Correo */
.contact-link.email{
    color:#ffffff;
}

.contact-link.email:hover{
    opacity:.8;
}
/* =========================================================
   8️⃣ RESPONSIVE
========================================================= */


/* ===== TABLET ===== */
@media(max-width:992px){

    .cg-footer-wrapper .cg-footer{
        grid-template-columns:1fr 1fr; /* 2 columnas */
    }

}


/* ===== CELULAR ===== */
@media(max-width:600px){

    .cg-footer-wrapper .cg-footer{
        grid-template-columns:1fr; /* 1 columna */
        text-align:center;
    }

    .cg-footer-wrapper .footer-logo{
        align-items:center;
        padding-left:0;
    }

}