/* ==========================================================================
   1. VARIABLES CSS
   ========================================================================== */

/* Variables globales utilizadas para definir la identidad visual y tipográfica del sitio */
:root {
    --color-primario: #E53935;          /* Color principal utilizado para llamados a la acción y elementos destacados */
    --color-secundario: #1A1A1A;        /* Color de apoyo empleado en fondos secundarios */
    --color-fondo-base: #0D0D0D;        /* Fondo principal del sitio */
    --color-fondo-tarjeta: #171717;     /* Fondo de tarjetas y contenedores */
    --color-texto-principal: #FFFFFF;   /* Color principal para los textos */
    --color-texto-secundario: #AAAAAA;  /* Color destinado a textos descriptivos */
    --color-borde: #333333;             /* Color utilizado en bordes y separadores */
    
    /* Tipografías institucionales */
    --fuente-titulos: "Montserrat", sans-serif;
    --fuente-textos: "Open Sans", sans-serif;
}


/* ==========================================================================
   2. ESTRUCTURA MACRO Y RESET
   ========================================================================== */

/* Reinicia los márgenes y rellenos predeterminados, aplicando además el modelo de caja uniforme */
html, body, header, nav, main, section, article, aside, footer, div, h1, h2, h3, h4, p, ul, li, figure, figcaption, a, span, img {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Habilita el desplazamiento suave entre los enlaces internos */
html {
    scroll-behavior: smooth;
}

/* Evita el desbordamiento horizontal del documento */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Configuración general del cuerpo principal del documento */
body {
    font-family: var(--fuente-textos);
    background-color: var(--color-fondo-base);
    color: var(--color-texto-principal);
    line-height: 1.6;
    display: grid;

    /* Organización general de la página mediante CSS Grid */
    grid-template-areas:
        "cabecera"
        "banner"
        "cuerpo"
        "pie";

    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    min-height: 100vh;
}

/* Configuración adaptable para todas las imágenes del sitio */
img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ==========================================================================
   3. CLASES DE UTILIDAD
   ========================================================================== */

/* Estilo aplicado a la firma del autor ubicada en el pie de página */
.firma-autor {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
}


/* ==========================================================================
   4. CABECERA INSTITUCIONAL
   ========================================================================== */

/* Configura la cabecera principal del sitio y la mantiene fija durante el desplazamiento */
.cabecera {
    grid-area: cabecera;
    background-color: rgba(11, 11, 11, 0.95); /* Fondo semitransparente para mejorar la legibilidad */
    border-bottom: 1px solid var(--color-borde);
    padding: 1rem 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    backdrop-filter: blur(5px);
}

/* Configuración visual del logotipo institucional */
.logo-img {
    height: 50px;
    width: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* Aplica un leve efecto de ampliación al interactuar con el logotipo */
.logo-img:hover {
    transform: scale(1.05);
}

/* Agrupa el logotipo y los datos identificatorios de la empresa */
.marca {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

/* Organiza verticalmente el nombre y subtítulo de la marca */
.textos-marca {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Estilo del nombre comercial */
.titulo-marca {
    font-family: var(--fuente-titulos);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-texto-principal);
    line-height: 1.1;
    letter-spacing: 1px;
}

/* Estilo del subtítulo descriptivo */
.subtitulo-marca {
    font-family: var(--fuente-textos);
    font-size: 0.65rem;
    color: var(--color-texto-secundario);
    font-weight: 600;
    letter-spacing: 1px;
}

/* Configura la lista del menú de navegación principal */
.navegacion-principal ul {
    display: flex;
    list-style: none;
}

/* Espaciado horizontal entre los elementos del menú */
.navegacion-principal li {
    margin-right: 2.5rem;
}

/* Elimina el margen del último elemento del menú */
.navegacion-principal li:last-child {
    margin-right: 0;
}

/* Configuración visual de los enlaces del menú principal */
.navegacion-principal a {
    color: var(--color-texto-principal);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    font-family: var(--fuente-titulos);
    padding: 0.5rem 0;
    transition: color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Resalta el enlace activo o cuando el usuario interactúa con él */
.navegacion-principal a:hover,
.navegacion-principal a:focus,
.navegacion-principal a.activo {
    color: var(--color-primario);
    outline: none;
}


/* ==========================================================================
   5. BOTONES GENERALES
   ========================================================================== */

/* Estilo base del botón de acción principal */
.boton-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primario);
    color: var(--color-texto-principal);
    text-decoration: none;
    font-family: var(--fuente-titulos);
    font-weight: 800;
    padding: 1rem 2rem;
    border-radius: 50px;
    border: 2px solid var(--color-primario);
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Efecto visual al interactuar con el botón principal */
.boton-accion:hover,
.boton-accion:focus {
    background-color: transparent;
    color: var(--color-primario);
}

/* Estilo del botón secundario */
.boton-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--color-texto-principal);
    text-decoration: none;
    font-family: var(--fuente-titulos);
    font-weight: 600;
    padding: 1rem 2rem;
    border-radius: 15px;
    border: 3px solid var(--color-borde);
    transition: all 0.3s ease;
}

/* Destaca el borde del botón secundario durante la interacción */
.boton-secundario:hover {
    border-color: var(--color-texto-principal);
}

/* ==========================================================================
   BOTÓN DE IMAGEN
   ========================================================================== */

/* Configura la apariencia de las imágenes utilizadas como botones */
.boton-imagen img {
    height: 50px;
    width: auto;
    display: block;
    border-radius: 15px;

    /* Aplica un borde utilizando el color principal del sitio */
    border: 2px solid #E53935;

    /* Agrega un efecto luminoso alrededor del botón */
    box-shadow: 0 0 12px rgba(229, 57, 53, 0.6);
}

/* Intensifica el efecto luminoso durante la interacción */
.boton-imagen:hover img,
.boton-imagen:focus img {
    box-shadow: 0 0 20px rgba(229, 57, 53, 0.9);
}


/* ==========================================================================
   6. BANNER HERO
   ========================================================================== */

/* Configura el banner principal de presentación del sitio */
.banner-hero {
    grid-area: banner;
    margin-top: 80px;
    position: relative;

    /* Superpone un degradado sobre la imagen de fondo para mejorar la lectura del contenido */
    background-image:
        linear-gradient(to right, #0B0B0B 40%, rgba(11, 11, 11, 0.6) 70%, transparent 100%),
        url('../img/image\ \(5\).jpg');

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 6rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 60vh;
}

/* Variante del banner utilizada en las páginas internas */
.banner-interno {
    min-height: 30vh;
    padding: 4rem 2rem;
}

/* Limita el ancho del contenido para mejorar la legibilidad */
.hero-contenido {
    max-width: 650px;
    z-index: 2;
}

/* Configuración del título principal */
.titulo-principal {
    font-family: var(--fuente-titulos);
    font-size: 4rem;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: var(--color-texto-principal);
}

/* Aplica el color institucional a la parte destacada del título */
.resalte-marca {
    color: var(--color-primario);
}

/* Estilo del subtítulo del banner */
.subtitulo-hero {
    font-size: 1.2rem;
    color: var(--color-texto-secundario);
    margin-bottom: 2rem;
}

/* Organiza los beneficios en formato de grilla */
.lista-beneficios {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 3rem;
}

/* Configuración de cada beneficio */
.lista-beneficios li {
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}

/* Agrega un indicador visual antes de cada beneficio */
.lista-beneficios li::before {
    content: "✓";
    color: var(--color-primario);
    font-weight: bold;
    margin-right: 0.5rem;
}

/* Distribuye los botones principales del banner */
.grupo-botones {
    display: flex;
    gap: 1.5rem;
}

/* Tarjeta informativa destacada dentro del banner */
.tarjeta-flotante-hero {
    position: absolute;
    bottom: 3rem;
    right: 4rem;
    background-color: rgba(21, 21, 21, 0.85);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    backdrop-filter: blur(10px);
    max-width: 300px;
}

/* Espacio reservado para el icono decorativo */
.icono-destello {
    font-size: 2rem;
}

/* Estilo de la etiqueta superior de la tarjeta */
.textos-tarjeta .etiqueta {
    font-size: 0.75rem;
    color: var(--color-primario);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 0.3rem;
}

/* Configuración del texto principal de la tarjeta */
.textos-tarjeta .texto-fuerte {
    font-family: var(--fuente-titulos);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}


/* ==========================================================================
   7. SECCIONES GENERALES Y TARJETAS
   ========================================================================== */

/* Contenedor principal del contenido de cada página */
.contenido-home {
    grid-area: cuerpo;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    gap: 6rem;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Encabezado común utilizado en las distintas secciones */
.encabezado-seccion {
    text-align: center;
    margin-bottom: 4rem;
}

/* Título principal de cada sección */
.titulo-seccion {
    font-family: var(--fuente-titulos);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-texto-principal);
    margin-bottom: 0.5rem;
}

/* Subtítulo descriptivo del encabezado */
.encabezado-seccion p {
    color: var(--color-primario);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
}

/* Distribuye las tarjetas de servicios mediante CSS Grid */
.contenedor-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

/* Tarjeta individual correspondiente a cada servicio */
.tarjeta-servicio {
    background-color: var(--color-fondo-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Destaca la tarjeta al interactuar con ella */
.tarjeta-servicio:hover {
    transform: translateY(-10px);
    border-color: var(--color-primario);
}

/* Configuración de las imágenes de las tarjetas */
.tarjeta-servicio img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 2px solid var(--color-secundario);
}

.tarjeta-servicio h3 {
    font-family: var(--fuente-titulos);
    font-size: 1.4rem;
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
}

.tarjeta-servicio p {
    color: var(--color-texto-secundario);
    padding: 0 1.5rem 1.5rem 1.5rem;
    font-size: 0.95rem;
}


/* ==========================================================================
   8. MAQUETACIÓN: GALERÍA DE TRABAJOS
   ========================================================================== */

/* Organiza cada comparación "Antes / Después" en dos columnas */
.grilla-pares {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 4rem;
}

/* Contenedor individual de cada fotografía */
.card-foto {
    position: relative;
    border-radius: 12px;
    border: 2px solid var(--color-texto-secundario);
    background-color: var(--color-fondo-tarjeta);
    overflow: hidden;
}

/* Configuración de las imágenes de la galería */
.card-foto img {
    width: 100%;
    height: auto;
    display: block;
}

/* Efecto aplicado a la imagen durante la interacción */
.card-foto:hover img {
    opacity: 0.3;
    transform: scale(1.05);
}

/* Capa superpuesta utilizada para mostrar información sobre la imagen */
.capa-informacion {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(11,11,11,0.95) 0%, rgba(11,11,11,0.6) 60%, transparent 100%);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.4s ease, bottom 0.4s ease;
}

/* Título mostrado dentro de la capa de información */
.capa-informacion h3 {
    font-family: var(--fuente-titulos);
    font-size: 1.3rem;
    color: var(--color-primario);
    margin-bottom: 0.5rem;
}

/* Texto descriptivo mostrado sobre la imagen */
.capa-informacion p {
    color: var(--color-texto-principal);
    font-size: 0.95rem;
}

/* Hace visible la capa de información al interactuar con la tarjeta */
.card-foto:hover .capa-informacion {
    opacity: 1;
    bottom: 0;
}

/* Centra y limita el ancho de cada trabajo presentado */
.trabajo-limpieza {
    max-width: 900px;
    margin: 0 auto 5rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hace que la grilla ocupe todo el ancho disponible del contenedor */
.grilla-pares {
    width: 100%;
}

/* Estilo del título correspondiente a cada trabajo realizado */
.titulo-trabajo {
    font-family: var(--fuente-titulos);
    font-size: 1.4rem;
    color: var(--color-texto-principal);
    text-align: center;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid var(--color-primario);
    display: inline-block;
    padding-bottom: 0.5rem;
}

/* Configuración de las etiquetas "Antes" y "Después" */
.etiqueta-proceso {
    font-family: var(--fuente-titulos);
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
}

/* Color aplicado a la etiqueta "Antes" */
.etiqueta-proceso.antes {
    color: var(--color-primario);
}

/* Color aplicado a la etiqueta "Después" */
.etiqueta-proceso.despues {
    color: var(--color-texto-principal);
}


/* ==========================================================================
   9. PIE DE PÁGINA INSTITUCIONAL
   ========================================================================== */

/* Configura la apariencia general del pie de página */
.pie-pagina {
    grid-area: pie;
    background-color: var(--color-secundario);
    border-top: 1px solid var(--color-borde);
    padding: 4rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative; 
    }

/* Título correspondiente a la información institucional */
.info-empresa h3 {
    font-family: var(--fuente-titulos);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--color-primario);
}

/* Información descriptiva y datos de contacto */
.info-empresa p {
    font-size: 0.95rem;
    color: var(--color-texto-secundario);
    margin-bottom: 0.3rem;
}

/* Contenedor de la navegación secundaria con centrado perfecto */
.navegacion-secundaria {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Lista de enlaces del pie de página */
.navegacion-secundaria ul {
    display: flex;
    list-style: none;
}

/* Espaciado entre los enlaces de navegación */
.navegacion-secundaria li {
    margin-right: 1.5rem;
}

/* Elimina el margen del último elemento */
.navegacion-secundaria li:last-child {
    margin-right: 0;
}

/* Configuración visual de los enlaces secundarios */
.navegacion-secundaria a {
    color: var(--color-texto-secundario);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s;
}

/* Destaca el enlace durante la interacción del usuario */
.navegacion-secundaria a:hover {
    color: var(--color-primario);
}


/* ==========================================================================
   10. DISEÑO RESPONSIVO (MEDIA QUERIES)
   ========================================================================== */

/* Adaptaciones para pantallas medianas (hasta 1024 px) */
@media (max-width: 1024px) {

    /* Reduce los espacios de la cabecera */
    .cabecera {
        padding: 1rem 2rem;
    }

    /* Ajusta el espaciado del banner principal */
    .banner-hero {
        padding: 6rem 2rem;
    }

    /* Reduce el tamaño del título principal */
    .titulo-principal {
        font-size: 3rem;
    }

    /* Reubica la tarjeta informativa debajo del contenido */
    .tarjeta-flotante-hero {
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 3rem;
    }

    /* Ajusta el espaciado del contenido principal */
    .contenido-home {
        padding: 3rem 2rem;
    }

    /* Reduce el relleno del pie de página */
    .pie-pagina {
        padding: 3rem 2rem;
    }
}


/* Adaptaciones para dispositivos móviles (hasta 768 px) */
@media (max-width: 768px) {

    /* Reorganiza la cabecera en una disposición vertical */
    .cabecera {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem 1rem;
        position: absolute;
    }

   /* Mostramos el texto de la marca en celulares y lo centramos */
    .textos-marca {
        display: flex; 
        text-align: center;
        align-items: center;
    }

    /* Reorganiza el menú principal en varias filas */
    .navegacion-principal ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    /* Elimina el margen lateral entre los elementos del menú */
    .navegacion-principal li {
        margin-right: 0;
    }

    /* Ajusta el banner para mejorar su visualización en pantallas pequeñas */
    .banner-hero {
        margin-top: 200px;
        background-image:
            linear-gradient(to bottom, #0B0B0B 10%, rgba(11, 11, 11, 0.8) 50%, #0B0B0B 100%),
            url('../img/placeholder-fondo-hero.jpg');
        background-position: right center;
        align-items: center;
        text-align: center;
        padding: 3rem 1.5rem;
    }

    /* Reduce el tamaño del título principal */
    .titulo-principal {
        font-size: 2.2rem;
    }

    /* Presenta los beneficios en una única columna y los centra */
    .lista-beneficios {
        grid-template-columns: 1fr;
        text-align: center;
        width: 100%;
    }

    /* Centra el texto y el icono (tilde) dentro de cada ítem flex */
    .lista-beneficios li {
        justify-content: center;
    }

    /* Apila los botones principales verticalmente */
    .grupo-botones {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    /* Hace que los botones ocupen todo el ancho disponible */
    .boton-accion,
    .boton-secundario {
        width: 100%;
    }

    /* Reduce el espaciado general del contenido */
    .contenido-home {
        padding: 2rem 1rem;
        gap: 4rem;
    }

    /* Reorganiza el pie de página en formato vertical */
    .pie-pagina {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    /* Presenta las imágenes de la galería en una sola columna */
    .grilla-pares {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    /* Ajustes obligatorios para la Galería en Celulares */
    .trabajo-limpieza {
        max-width: 100%;
        padding: 0 1rem; 
        margin-bottom: 3rem;
    }

    .titulo-trabajo {
        font-size: 1.1rem; 
    }

    /* Devuelve la navegación secundaria al flujo normal en celulares */
    .navegacion-secundaria {
        position: static; 
        transform: none;
        margin: 0 auto;
        width: 100%;
    }

    /* Centra y separa los enlaces  */
    .navegacion-secundaria ul {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.5rem; 
    }

    /* Quita el margen lateral derecho de la PC */
    .navegacion-secundaria li {
        margin-right: 0;
    }
}