/*--- IMPORTAMOS COMPONENTS(FUENTES), RESPONSIVE, HEADER(NAVBAR), HERO(SECCIÓN DEL H1) ---*/
@import url(components.css);
@import url(responsive.css);
@import url(header.css);
@import url(hero.css);
@import url(gallery.css);
@import url(form.css);

/**
 * 1. Estilos Base del Documento
 */
.main-container{
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/*  =========================================
    SECCIÓN: ABOUT INTRO DESPUES DEL H1 DENTRO DEL MAIN
    ========================================= */

/* SECCIÓN INTRO CON ANIMACIÓN */
.about-intro-section.section-flush-right {
    /* Mantenemos espacio a la izquierda, pero 0 a la derecha */
    padding: 5rem 0 5rem 3rem; 
    display: flex;
    justify-content: flex-end; 
    overflow-x: hidden; /* Evita scroll innecesario durante la animación slide-l */
    background-color: #ffffff;
}

/*Configuración de toda la caja padre que almacena los elementos*/
.about-intro-container {
    background-color: #020A1B; /* Azul marino profundo */
    color: #ffffff;
    /* Radio: Superior-Izq, Superior-Der, Inferior-Der, Inferior-Izq */
    /* El 0 en el lado derecho es lo que lo pega al borde */
    border-radius: 20px 0 0 20px; 
    padding: 4rem 3.5rem;
    width: 95%; /* Ocupa casi todo el ancho para mostrar el margen izquierdo */
    max-width: 1400px;
    box-shadow: -15px 10px 40px rgba(0, 0, 0, 0.15);
}

/* Configuración de toda la caja que almacena el H2 y el parrafo*/
.about-intro-grid {
    display: grid;
    grid-template-columns: 1.2fr 2.8fr;
    gap: 4rem;
    align-items: center;
}

/* Configuración del título */
.about-title {
    font-family: "Inter", sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    text-align: center;
}

/* Configuración del parrafo */
.about-text {
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    text-align: justify;
    line-height: 1.8;
    color: #e5e7eb;
    margin: 0;
}

/* Resaltador SEO para ubicación */
.about-text strong {
    color: #ffffff;
    border-bottom: 2px solid #FF963A; /* Un toque sutil de color de marca */
}

/*  =========================================
    SECCIÓN: SERVICIOS
    ========================================= */

.services-section {
    padding: 3rem 2rem;
    background-color: #ffffff; /* Ajusta si el fondo de tu web es diferente */
    max-width: 1400px;
    margin: 0 auto; /* Centra la sección entera en pantallas ultra anchas */
}

/* --- Encabezado y Título --- */
.services-header {
    font-family: "Inter";
    text-align: center;
    margin-bottom: 4rem;
}

/* El truco de las líneas a los lados usando Flexbox */
.section-title-lined {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    font-weight: 700;
    color: #000000;
    margin: 0 0 10px 0;
}

.section-title-lined::before,
.section-title-lined::after {
    content: "";
    height: 1px; /* Grosor de la línea */
    background-color: #000000; /* Color de la línea */
    flex-grow: 1; 
    max-width: 250px; /* Largo máximo de las líneas a los lados */
    margin: 0 20px; /* Separación entre la palabra y las líneas */
}

.services-subtitle {
    font-size: 1.1rem;
    color: #555555;
    margin: 0;
    font-weight: 300;
}

/* --- Cuadrícula de Servicios (Grid 3x2) --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual tamaño */
    gap: 3rem; /* Espacio horizontal y vertical entre tarjetas */
    width: 100%;
}

/* --- Tarjeta Individual y Efecto Hover --- */
.service-card {
    display: block;
    text-decoration: none; /* Quita el subrayado del enlace */
    color: inherit;
    border: 1px solid transparent; /* Preparación para bordes si deseas añadirlo luego */
    transition: transform 0.3s ease;
}

/* Contenedor de la imagen que oculta el desbordamiento cuando hace zoom */
.service-image-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3; /* Asegura que todas las fotos tengan la misma proporción (rectangular) */
    overflow: hidden; 
    border-radius: 8px; /* Redondea las esquinas de la imagen un poco */
    margin-bottom: 1.5rem;
}

.service-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita que la imagen se deforme, la recorta perfectamente */
    transition: transform 0.5s ease; /* Transición suave para el zoom */
}

/* Estilo de la descripción de la tarjeta */
.service-info p {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    text-align: center; 
    font-size: 1rem;
    line-height: 1.5;
    color: #222222; /* Gris oscuro para buena lectura */
    margin: 0;
    padding: 0 1rem; /* Margen interno para que no toque los bordes */
}

/* EFECTO DE HOVER (Al pasar el ratón) */
.service-card:hover .service-image-wrapper img {
    transform: scale(1.08); /* Hace un zoom del 8% a la imagen */
}

.service-card:hover .service-info p {
    color: #f9a118; /* Opcional: Cambia sutilmente al color naranja de tu marca para indicar que es clicable */
}

/*  =========================================
    SECCIÓN: VENTAJAS
    ========================================= */

.advantages-section {
    /* Espaciado superior para separar de la cuadrícula de servicios */
    padding-top: 6rem;
    background-color: #ffffff;
}

.advantages-header {
    font-family: "Inter", sans-serif;
    text-align: center;
    margin-bottom: 3rem;
    padding: 0 2rem;
}

/* --- Fondo oscuro edge-to-edge --- */
.advantages-dark-bg {
    background-color: #020A1B; 
    padding: 4rem 2rem 6rem 2rem;
    width: 100%;
}

/* Contenedor centralizado para que el contenido no toque los bordes en pantallas gigantes */
.advantages-container {
    max-width: 1200px;
    margin: 0 auto;
}

.advantages-subtitle {
    font-family: "Inter", sans-serif;
    text-align: center;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 4rem;
    letter-spacing: 0.5px;
}

/* --- Cuadrícula de las 3 ventajas --- */
.advantages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem; /* Bastante espacio para que los textos respiren horizontalmente */
}

/* --- Tarjeta Individual --- */
.advantage-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el icono, título y texto */
    text-align: center;
}

.advantage-icon {
    width: 80px;  /* Altura y anchura fijas e iguales para los 3 iconos */
    height: 80px;
    object-fit: contain; /* Asegura que el icono no se deforme */
    margin-bottom: 1.5rem;
}

.advantage-title {
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.advantage-text {
    color: #d1d5db;
    font-family: "Inter", sans-serif; 
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/*  =========================================
    SECCIÓN: RESEÑAS DE GOOGLE
    ========================================= */

/* Contenedor principal de las reseñas */
.reviews-section {
    /* Margen exterior de 40px arriba y abajo, 0 a los lados */
    margin: 40px 0;
    background-color: #ffffff;
}

/* --- Contenedor del Widget Edge-to-Edge --- */
.elfsight-container {
    width: 100%;
    /* Si quieres que el widget no sea más ancho que el resto de tu contenido, descomenta la siguiente línea   y ajusta el max-width */
    /* max-width: 1200px; margin: 0 auto; */
    padding: 0 2rem 2rem 2rem;
}

/*  ==========================================================================
    SECCIÓN INTRODUCCIÓN SERVICIOS 
    ========================================================================== */
    
.services-intro-section {
    padding: 6rem 2rem;
    background-color: #ffffff; /* Ajusta si tu fondo base tiene otro tono */
    display: flex;
    justify-content: center;
    align-items: center;
}

.services-intro-container {
    font-family: "Inter", sans-serif;
    max-width: 1000px; /* Ancho controlado para que el texto no se extienda demasiado */
    width: 100%;
    text-align: center;
}

/* Estructura para el título con líneas a los lados */
.section-title-lined {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #020A1B; /* Usando tu color oscuro por defecto */
    margin-bottom: 2.5rem;
    white-space: nowrap; /* Mantiene el título en una sola línea en escritorio */
}

.section-title-lined::before,
.section-title-lined::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #777;
    margin: 0 20px;
    max-width: 150px; /* Longitud de las líneas laterales */
}

.services-intro-text-wrapper {
    display: flex;
    justify-content: center;
}

.services-intro-text {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444; /* Un gris oscuro para suavizar la lectura */
    text-align: center;
    margin: 0;
    max-width: 800px;
    letter-spacing: 0.5px;
}

/*  ==========================================================================
    SECCIÓN SHOWCASE DE SERVICIOS (Diseño General - Componente Reutilizable)
    ========================================================================== */

.service-showcase-section {
    background-color: #020A1B; /* Fondo oscuro inspirado en la imagen */
    padding: 6rem 2rem;
    color: #ffffff;
}

.service-showcase-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Columna del Carrusel --- */
.showcase-carousel-wrapper {
    position: relative;
    width: 50%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.showcase-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3; /* Mantiene una proporción uniforme para todas las fotos */
    /* Transición para la animación de cambio de imagen */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/* Clase dinámica que el JS agregará para el efecto de transición */
.showcase-image.fade-anim {
    opacity: 0.2;
    transform: scale(0.98);
}

/* --- Controles del Carrusel --- */
.carousel-controls {
    position: absolute;
    bottom: 20px;
    left: 50%; /* Lo empuja a la mitad exacta del contenedor */
    transform: translateX(-50%); /* Lo retrocede la mitad de su propio ancho para centrarlo perfectamente */
    display: flex;
    gap: 20px;
    z-index: 10;
}

.carousel-btn {
    background: transparent;
    color: #ffffff;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    padding: 5px 15px;
    transition: transform 0.3s ease, color 0.3s ease;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.carousel-btn:hover {
    transform: scale(1.2);
    color: #f39c12; /* Un toque del color naranja de acento que usas en el footer */
}

/* --- Columna de Información --- */
.showcase-info-wrapper {
    font-family: "Inter", sans-serif;
    width: 50%;
}

.showcase-title {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.showcase-text {
    font-size: 1.1rem;
    text-align: justify;
    line-height: 1.7;
    color: #cccccc; /* Gris claro para mejor contraste de lectura en fondo oscuro */
    margin: 0;
}

/*  ==========================================================================
    SECCIÓN CARACTERÍSTICAS / VENTAJAS (Diseño de Tarjetas Modulares)
    ========================================================================== */

.features-section {
    padding: 6rem 2rem;
    background-color: #ffffff; /* Ajusta si tu fondo base es distinto */
}

.features-container {
    font-family: "Inter", sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

/* Contenedor Flex para alinear las tarjetas una al lado de la otra */
.features-grid {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 3.5rem; /* Espacio entre el título y las tarjetas */
}

/* Diseño individual de la tarjeta gris */
.feature-card {
    background-color: #e6e6e6; /* Color gris claro extraído de la imagen */
    border-radius: 8px; /* Bordes ligeramente redondeados */
    padding: 3rem 2rem;
    width: 50%; /* Mitad de la pantalla cada una */
    max-width: 500px;
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.15); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Pequeña animación al pasar el cursor (Opcional pero recomendado) */
.feature-card:hover {
    transform: translateY(-8px); 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2); 
}

.feature-card-title {
    font-family: "Inter", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #000000; /* Usa el color oscuro de tu marca */
    text-align: center;
    margin-bottom: 1.8rem;
    letter-spacing: 0.5px;
}

.feature-card-text {
    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #333333; /* Un gris oscuro para contraste suave */
    text-align: center;
    margin: 0;
}

/*  ==========================================================================
    SECCIÓN STAIRCASE RENOVATION IMÁGENES DUO 
    ========================================================================== */

.image-duo-section {
    padding: 2rem 2rem 6rem 2rem; /* Menos padding superior para que se sienta conectada a la intro */
    background-color: #ffffff; 
}

.image-duo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rem; /* Separación amplia y elegante entre ambas fotos */
    max-width: 1000px; /* Un poco más angosto para centrar mejor la atención */
    margin: 0 auto;
}

.image-wrapper {
    width: 50%;
    border-radius: 12px;
    overflow: hidden; /* CRÍTICO: Mantiene la imagen dentro del borde al hacer el zoom */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* Sombra elegante */
    /* Pequeño ajuste para evitar parpadeos en Safari durante la animación */
    -webkit-mask-image: -webkit-radial-gradient(white, black); 
}

.duo-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 3 / 4; /* Fuerza el encuadre vertical estilo retrato de tu diseño */
    transition: transform 0.5s ease; /* Transición suave para el hover */
}

/* Efecto Hover: Agrandamiento interno */
.image-wrapper:hover .duo-img {
    transform: scale(1.08); /* La imagen hace zoom sutilmente hacia el usuario */
}

/*  ==========================================================================
    SECCIÓN CARACTERÍSTICAS DE ESCALERAS (Bloques Alternados)
    ========================================================================== */

.stair-features-section {
    font-family: "Inter", sans-serif;
    width: 100%;
    background-color: #ffffff;
    text-align: center;
}

.feature-block {
    width: 100%;
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.feature-block .section-title-lined {
    margin-bottom: 3.5rem;
}

.feature-block-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    background-color: #e5e5e5;
    border-radius: 16px;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 4rem;
    padding-right: 4rem;
    gap: 4rem;
}

.feature-block-container.reverse-desktop {
    flex-direction: row-reverse;
}

.feature-text-wrapper {
    width: 50%;
}

.feature-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333333;
    margin-top: 0;
    margin-bottom: 0;
    text-align: justify;
}

.feature-image-wrapper {
    width: 50%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.feature-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease;
}

.feature-image-wrapper:hover .feature-img {
    transform: scale(1.08);
}

.cta-container {
    display: flex;
    justify-content: center;
    background-color: #ffffff;
    padding-top: 2rem;
    padding-bottom: 6rem;
}

.btn-dark-cta {
    background-color: #020a1b;
    color: #ffffff;
    font-size: 1.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    border: 2px solid #ffffff;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 35px;
    padding-right: 35px;
    transition-property: background-color, transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn-dark-cta:hover {
    background-color: #FF963A; /* Color de fondo */
    color: #000; /* Color de fuente */
    transform: translateY(-3px) scale(1.05);

}

/*  =========================================
    SECCIÓN: ABOUT US HERO
    ========================================= */

.about-us-hero-v2 {
    /* Fondo con overlay azul al 70% */
    background-image: linear-gradient(rgba(2, 10, 27, 0.7), rgba(2, 10, 27, 0.7)), url('../assets/img/portfolio/about-fondo.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    width: 100%;
    
    /* El candado: Obliga a que la sección mida exactamente la altura de la pantalla */
    height: 130vh; 
    
    padding: 2rem 2rem 2rem 2rem; /* Mayor padding arriba para librar el menú de navegación */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Corta cualquier cosa que intente estirar la página */
    box-sizing: border-box;
}

/* --- Contenedor Principal --- */
.about-container-v2 {
    max-width: 1400px;
    width: 100%;
    height: 100%; /* Aprovecha todo el alto disponible dentro del 100vh */
    margin: 0 auto;
    display: flex; /* Flexbox puro */
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: space-between;
    gap: 4rem;
}

/* --- COLUMNA IZQUIERDA (TEXTO) --- */
.about-content-v2 {
    flex: 1; /* Ocupa el 50% de la pantalla */
    max-width: 600px; /* Limitamos el ancho para forzar exactamente las 5 y 3 líneas de texto */
    margin-top: -300px;
}

.about-title-v2 {
    font-family: "Inter", sans-serif;
    font-weight: 100;
    font-size: 5rem;
    color: #ffffff;
    margin-bottom: 2rem;
    text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.6);
    text-align: left;
}

.about-text-v2 p {
    font-family: "Inter", sans-serif;
    font-weight: 200;
    font-size: 1.25rem;
    color: #ffffff;
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 1.5rem;
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8);
}

/* --- COLUMNA DERECHA (COLLAGE FLEXBOX) --- */
.about-collage-flex {
    flex: 1; /* Ocupa el otro 50% de la pantalla */
    height: 100%; /* Se ajusta a casi toda la pantalla pero deja un poco de margen arriba y abajo */
    max-height: 700px; /* Límite para pantallas ultra grandes */
    display: flex;
    flex-direction: column; /* Apila las 5 filas hacia abajo */
    gap: 8px; /* Espaciado vertical entre imágenes */
    margin-top: 30px;
}

/* Cada fila del collage */
.collage-row {
    display: flex;
    width: 100%;
    overflow: hidden;
}

/* Modificador para las filas que tienen 2 fotos */
.split-row {
    gap: 6px; /* Espaciado horizontal entre las dos imágenes */
}

/* Las imágenes dentro del Flexbox */
.collage-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen a la perfección sin deformarla */
    border-radius: 4px;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

/* Efecto hover general */
.collage-img:hover {
    transform: scale(1.02);
}

/* Regla para que las filas dobles dividan el espacio al 50% */
.split-row .collage-img {
    flex: 1; 
}

/* Borde blanco específico para la primera imagen como en tu diseño */
.img-1 {
    border: 2px solid #ffffff;
}

/*  ==========================================================================
    SECCIÓN FOOTER
    Configuración de columnas, tipografía y enlaces
    ========================================================================== */

/**
 * 1. Contenedor Principal del Footer
 */
.site-footer {
    background-color: #020A1B; /* Fondo azul oscuro/negro */
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    padding: 50px 5% 20px 5%;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px;
}

/**
 * 2. Comportamiento de Columnas
 */
.footer-col {
    flex: 1;
    min-width: 200px; /* Asegura que no se colapsen en móviles antes de hacer wrap */
    display: flex;
    flex-direction: column;
}

/**
 * 3. Elementos de Marca y Texto
 */
.footer-logo {
    max-width: 8em;
    margin-bottom: 25px;
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
}

/* Animación de encogimiento logo*/
.footer-logo:hover{
    transform: scale(0.95);
}

.footer-logo:active {
    transform: scale(0.80);
}

.footer-heading-primary {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-heading-secondary {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
}

.footer-subtitle {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px;
}

.accent-orange {
    color: #FF963A;
}


.hours {
    font-weight: 600;
    margin: 5px 0;
}

/**
 * 4. Enlaces y Listas
 */
.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    margin-bottom: 15px;
}

.site-footer a, 
.site-footer p {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: #FF963A;
}

/**
 * 5. Layout interno para Flooring y Redes Sociales
 */
.flooring-grid {
    display: flex;
    gap: 40px; /* Separa las dos listas de servicios de piso */
}

.social-icons {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.social-link img {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.social-link:hover img {
    transform: scale(1.5);
}

/**
 * 6. Copyright Bottom Bar
 */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea divisoria sutil */
    padding-top: 20px;
}

.footer-bottom p {
    font-size: 12px;
    color: #a0a0a0;
    margin: 0;
    text-align: left;
}