:root {
    --blue-main: #414bb2;
    --cyan-accent: #00bcd4;
    --dark-gray: #333;
    --light-gray: #f4f4f4;
}

body {
    font-family: "Signika";
    font-family: "Eras Medium ITC", "Eras ITC", sans-serif;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    color: var(--dark-gray);
    line-height: 1.6;
    font-weight: 700;
}

/* body {
    font-family: 'Montserrat', sans-serif !important;
    margin: 0;
    color: var(--dark-gray);
    line-height: 1.6;
} */


/* Barra Superior Navegación */
nav {
    background: var(--blue-main);
    padding: 10px 0;
    text-align: center;
}


nav a {
    color: white;
    text-decoration: none;
    margin: 0 60px;
    /* Aplicamos la fuente Eras Medium ITC */
    font-family: "Eras Medium ITC", "Eras ITC", sans-serif;
    /* Aplicamos el tamaño 14px */
    font-size: 1.2rem;
    font-size: 19px;
    /* Corregimos el weight (el máximo estándar es 900) */
    font-weight: 500;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    width: max-content;
    /* Evita que el texto se amontone */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    top: 100%;
    /* left: 60px; */
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #ccc;
}

/* Estilo de los enlaces DENTRO del desplegable */
.dropdown-content a {
    display: block !important;
    /* Corregimos el margen de 60px que tiene tu nav a */
    margin: 0 !important;
    padding: 12px 20px !important;
    /* Estilo de la imagen */
    color: rgb(127, 127, 127) !important;
    font-family: 'Arial Narrow', sans-serif !important;
    font-size: 11pt !important;
    font-weight: bold !important;
    text-align: left;
    white-space: nowrap;
}

/* Mostrar al pasar el mouse */
.dropdown:hover .dropdown-content {
    display: block !important;
}

/* Cambio de color al pasar sobre las opciones */
.dropdown-content a:hover {
    background-color: #f1f1f1 !important;
    color: rgb(0, 128, 183) !important;
}

/*! Header Principal */
/*! Header Principal */

.header-main {
    display: flex;
    justify-content: center;
    /* Mantiene el grupo centrado */
    align-items: CENTER;
    /* Operario pisa el suelo */
    padding: 0% 22% 0 10%;
    /* Padding lateral en % para que sea elástico */
    width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
    /* EVITA que el número baje a la siguiente línea */
    overflow: hidden;
    /* Protege el diseño */
}


.logo,
.person-img,
.contact-info {
    flex: 1;
    /* Hace que cada contenedor intente ocupar el mismo espacio */
    display: flex;
    justify-content: center;
    /* Centra el contenido dentro de su tercio */
    min-width: 250px;
    /* Evita que se compriman demasiado */

    /* padding: 1% 1% 1% 0%; 
    margin: 1% 3% 1% 9%; */
}


.logo img {
    max-width: 100%;
    height: auto;
    max-height: 150px;
}


.person-img img {
    max-width: 100%;
    height: auto;
    max-height: 250px;
    /* Eliminamos los márgenes fijos que rompían el diseño */
}


.contact-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* ESTO ES LO QUE BUSCABAS: Rompe la alineación general del header */
    align-self: flex-start;

    /* Alinea el texto y número a la izquierda de su propio bloque */
    align-items: flex-start;
    text-align: left;

    /* Ajusta este margen para que no choque con el techo azul */
    margin-top: 30px;
    padding-left: 20px;
}

/* Ajuste para que el texto pequeño no se pegue al icono */
.contact-label {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    color: #666;
    letter-spacing: 0.01px;
    font-weight: 400;
    margin-bottom: 5px;
    /* Alinea con el inicio del número, saltando el icono de WhatsApp */
    margin-left: 55px;
    white-space: nowrap;
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
}


.phone-number {
    font-family: "roboto medium";
    /* Tamaño fluido: se achica en pantallas pequeñas */
    font-weight: bold;
    color: rgb(0, 135, 193);
    text-decoration: none;
    white-space: nowrap;
    font-size: 24pt;
}

.phone-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ws-icon {

    width: 38px;
    height: 38px;
    /* Efecto de pulso suave para llamar la atención */
    animation: pulse 2s infinite;
}


@keyframes pulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }

}


/* --- AJUSTES PARA MÓVIL --- */

@media (max-width: 1024px) {

    .header-main {
        flex-direction: column;
        /* Apila logo, operario y contacto */
        gap: 20px;
        text-align: center;
        padding-bottom: 20px;
    }


    .logo img {
        max-width: 200px;
        /* Logo un poco más pequeño en móvil */
    }


    .person-img img {
        /* Eliminamos los márgenes de 100px y 200px que rompen el diseño */
        margin: 0 auto;
        max-height: 200px;
    }


    .contact-info {
        /* Eliminamos el margen derecho de 280px */
        margin-right: 0;
        text-align: center;
        align-items: center;
    }


    .phone-number {
        font-size: 2rem;
        /* Reducimos el tamaño para que quepa en la pantalla */
    }


    .contact-label {
        font-size: 1.1rem;
    }
}


/* Ajuste extra para pantallas muy pequeñas (celulares antiguos) */

@media (max-width: 480px) {
    .phone-number {
        font-size: 1.6rem;
    }


    .ws-icon {
        width: 22px;
        height: 22px;
    }

}


/* ! Banner Azul */
.hero-banner {
    background: linear-gradient(90deg, var(--blue-main), #4a5cd1, var(--blue-main));
    /*  background-size: 200% auto; */
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 2.9rem;
    /* font-size: clamp(3rem, 2.5vw, 3.5rem); */

    /* font-style: italic; */
    font-weight: bold;
    /* Animación de fondo opcional para dar movimiento */
    font-family: "Franklin Gothic Book";

}

/* ! */

.section-split {
    background-image: url('img/fondo_alfombra.png');
    background-size: cover;
    background-position: center;
    min-height: 400px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 40px 10%;
    gap: 50px;
}

.title-container {
    flex: 0 1 auto;
    /* Toma el espacio necesario a la izquierda */
}

.title-main {
    /* font-family: "Eras Medium ITC", "Eras ITC", sans-serif; */
    flex: 0 1 auto;
    /* font-size: 3rem; */
    font-size: 2.4vw;
    /* Mucho más grande, como en la imagen */
    /* font-weight: bold; */
    color: #4db8c2;
    /* El color cyan de la imagen */
    line-height: 1.1;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    /* Para que se lea mejor sobre la alfombra */
    white-space: nowrap;
}

.cyan {
    color: #4db8c2;
    font-size: 1.5rem;
    font-weight: bold;
}

.gris {
    color: #737373;
}

.content-box {

    background-color: rgba(255, 255, 255, 0.45);
    /* Un poco más opaco para legibilidad */
    padding: 30px;
    flex: 0.2 200 800px;
    max-width: 800px;
    /* No crece, pero puede medir hasta 500px */
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    margin-right: auto;
    margin-left: 0;
    /* Para que no esté pegado al techo */
}

.text-main {
    font-size: 13pt;
    color: rgb(102,102,102);
    line-height: 1.5;
    margin-bottom: 15px;
    font-family: "Arial Narrow";
    font-weight: bold;
}

/* --- AJUSTES PARA MÓVIL (Sección Alfombras) --- */
@media (max-width: 1024px) {
    .section-split {
        flex-direction: column;
        /* Cambia de horizontal a vertical */
        justify-content: center;
        align-items: center;
        padding: 40px 5%;
        /* Reducimos el padding lateral para ganar espacio */
        gap: 20px;
        min-height: auto;
        /* Permite que la sección crezca según el contenido */
        background-attachment: scroll;
        /* Mejora el rendimiento en móviles */
    }

    .title-container {
        text-align: center;
        /* Centra el título en pantallas pequeñas */
        width: 100%;
    }

    .title-main {
        font-size: 2.2rem;
        /* Reducimos el tamaño para que no se corte */
        margin-bottom: 10px;
    }

    .content-box {
        background-color: rgba(255, 255, 255, 0.85);
        /* Más opaco en móvil para leer mejor */
        margin: 0 auto;
        /* Centra la caja blanca */
        padding: 20px;
        flex: none;
        /* Desactivamos el flex rígido de PC */
        /* Que ocupe todo el ancho disponible */
        max-width: 100%;
    }

    .text-main {
        font-size: 0.95rem;
        /* Ajuste sutil de lectura */
        text-align: justify;
        /* Opcional: mejora la estética en bloques de texto */
    }

    .cta-contact {
        font-size: 1rem;
        text-align: center;
    }

    .cta-contact span.cyan {
        display: block;
        /* El número de teléfono baja para no salirse */
        font-size: 1.4rem;
        margin-top: 5px;
    }
}

/* Ajuste para pantallas muy pequeñas (Teléfonos verticales) */
@media (max-width: 480px) {
    .title-main {
        font-size: 1.8rem;
    }

    .section-split {
        padding: 30px 15px;
    }
}

/* ! Banner de Experiencia */
.experience-banner {
    text-align: center;
    padding: 40px 8%;
    /* background: white; */
    font-size: 26pt;
    font-weight: bold;
    font-family: "Microsoft sans serif";
    color: rgb(63, 63, 63);
}

/* !! SERVICIOS */

.services-grid {
    display: flex;
    max-width: 91%;
    margin: 40px 3%;
    background-color: #fff;
    align-items: stretch;
    /* Hace que ambas cajas tengan la misma altura */
    gap: 0;
    /* Pegadas como en la imagen */
}

/* Caja de la Imagen */
.image-box {
    /* flex: 1; */
    max-width: 55%;
    margin: 0 20px;


}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ajusta la imagen sin deformarla */
    display: block;
}

/* Caja de Información */
.info-box {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Franja Cyan Superior */
.header-cyan {
    background-color: #00bcd4;
    /* Color cyan de la imagen */
    color: white;
    padding: 15px;
    text-align: center;
    font-size: 18pt;
    font-weight: bold;
    font-family: "Calibri";

}

/* Franja Negra de WhatsApp */
.whatsapp-black-bar {
    background-color: #000;
    color: white;
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 20px 50px;
    gap: 15px;
}

.ws-icon-small {
    /* width: 50px;
    height: 50px; */
    padding-right: 6%;
}

.phone-number1 {
    font-size: 2.8rem;
    font-weight: bold;
    letter-spacing: 1px;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Contenido de Texto */
.text-content {
    padding: 25px;
    color: #444;
    font-size: 13pt;
    line-height: 1.5;
    font-family: 'Arial Narrow';
}

.text-content p {
    margin-bottom: 12px;
    font-weight: 400;
    color: rgb(63,63,63);
}

/* --- AJUSTES PARA MÓVIL (Grilla de Servicios) --- */
@media (max-width: 1024px) {
    .services-grid {
        flex-direction: column;
        /* Apila imagen arriba e info abajo */
        max-width: 95%;
        /* Aprovecha más el ancho en móviles */
        margin: 20px auto;
        /* Centra el contenedor */
    }

    .image-box {
        max-width: 100%;
        /* La imagen toma todo el ancho */
        margin: 0;
        /* Eliminamos el margen de 20px que tenía en PC */
        height: 250px;
        /* Definimos una altura fija para que no sea infinita */
    }

    .image-box img {
        height: 100%;
        object-fit: cover;
    }

    

    .whatsapp-black-bar {
        padding: 15px;
        /* Reducimos el padding interno */
        justify-content: center;
        /* Centramos el icono y el fono */
        gap: 10px;
    }

    .ws-icon-small {
        padding-right: 0;
        /* Quitamos el padding extra */
        width: 35px;
        /* Ajustamos tamaño del icono */
        height: auto;
    }

    .phone-number1 {
        font-size: 1.6rem;
        /* Bajamos de 2.8rem para que quepa en una línea */
        letter-spacing: 0px;
    }

    .text-content {
        padding: 20px;
        text-align: justify;
        /* Mejora la lectura de bloques largos en móvil */
    }
}

/* Ajuste fino para celulares muy pequeños */
@media (max-width: 480px) {
    .header-cyan {
        font-size: 1.2rem;
    }

    .phone-number1 {
        font-size: 1.3rem;
    }
}

/* !! SERVICIOS */

.services-wrapper1 {
    display: flex;
    flex-wrap: wrap;
    /* gap: 40px; */
    padding: 20px 9%;
    background: #fff;
    /* align-items: center; */

}

/* Columna de fotos */
.cards-column1 {
    /* Si quieres que las fotos sean más anchas o angostas, cambia el flex-basis (350px) */
    flex: 0 0 28%;
    display: flex;
    flex-direction: column;
    padding-right: 7%;

}

.card1 {
    width: 100%;
    /* La card siempre ocupará el ancho de su columna */
    border-radius: 8px;
    overflow: hidden;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
    padding-bottom: 10%;
}

.card1 img {
    border-radius: 15px 15px 0 0;
    width: 100%;
    display: block;
    /* CAMBIA ESTE VALOR para el largo (alto) de la foto */
    height: 70%;
    object-fit: cover;
}

.card1-title {
    background: #0083d4;
    /* Cyan de la imagen */
    color: white;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    border-radius: 0 0 15px 15px;
    font-family: 'Oxygen';
    font-size: 18pt;
    font-weight: bold;


}

/* Columna de texto: ocupará el 60% restante */
.text-column1 {
    flex: 1.5;
    min-width: 50%;
    color: #444;
    line-height: 1.6;
    

}

.text-column1 p {
    font-family: 'Arial Narrow', sans-serif;
    font-size: 13pt;
    color: rgb(127, 127, 127);
}



.text-column1 h3 {
    margin: 30px 0 20px;
    color: #333;
    font-family: 'Arial Narrow';
    font-size: 18pt;
    font-weight: bold;

}

.features-list {
    list-style: none;
    padding: 0;
    max-width: 900px;
    /* Ajusta según el ancho de tu web */

}

.features-list li {
    display: flex;
    /* Alinea el título y el texto en la misma fila */
    align-items: flex-start;
    /* Alinea el texto arriba si tiene varias líneas */
    margin-bottom: 25px;
    /* Espacio entre cada punto de la lista */
    font-size: 1.1rem;
    /* Tamaño de fuente más cercano al de la imagen */
    line-height: 1.4;
    font-family: 'Arial Narrow';
    font-size: 13pt;
    color: rgb(27, 27, 27);
}

.features-list strong {
    flex: 0 0 250px;
    /* ANCHO FIJO: Esto crea el espacio uniforme a la izquierda */
    font-size: 1.3rem;
    color: #333;
    font-family: 'Arial Narrow';
    font-size: 14pt;
}

/* --- AJUSTES PARA MÓVIL (Sección Por Qué Elegirnos) --- */
@media (max-width: 1024px) {
    .services-wrapper1 {
        flex-direction: column;
        /* Apila las fotos sobre el texto */
        padding: 20px 5%;
        /* Reducimos el margen lateral */
    }

    .cards-column1 {
        flex: none;
        /* Quitamos el ancho fijo del 28% */
        width: 100%;
        padding-right: 0;
        /* Eliminamos el espacio lateral */
        flex-direction: row;
        /* En tablets, las fotos pueden ir de lado a lado */
        gap: 15px;
        margin-bottom: 30px;
    }

    .card1 {
        padding-bottom: 0;
        flex: 1;
        /* Las dos fotos se reparten el ancho */
    }

    .card1-title {
        font-size: 1.1rem;
        /* Reducimos el título de la foto */
        padding: 10px;
    }

    .text-column1 {
        min-width: 100%;
    }

    /* --- AJUSTE DE LA LISTA DE CARACTERÍSTICAS --- */
    .features-list li {
        flex-direction: column;
        /* El título arriba y la descripción abajo */
        margin-bottom: 20px;
    }

    .features-list li strong {
        flex: none;
        /* Eliminamos los 250px fijos que rompen el móvil */
        width: 100%;
        font-size: 1.2rem;
        color: #0083d4;
        /* Color para resaltar el título en móvil */
        margin-bottom: 5px;
    }
}

/* Ajuste para celulares pequeños */
@media (max-width: 600px) {
    .cards-column1 {
        flex-direction: column;
        gap: 10px;
        /* Un poco de aire entre las dos fotos */
    }

    .card1 {
        width: 100%;
        /* Asegura que la caja no se pase del borde */
    }

    .card1 img {
        height: 180px !important;
        /* Altura fija para que sean compactas en móvil */
        object-fit: cover;
    }

    .card1-title {
        font-size: 1.1rem;
        /* Ajuste para que el texto no sea tosco */
        padding: 8px;
    }
}

/* !! SERVICIO DE TAPICERIA */

:root {
    --blue-tech: #0088cc;
    --purple-main: #6342ff;
    --text-dark: #333;
}

.services-container {
    margin: 0 auto;
    padding: 20px;
    font-family: 'Segoe UI', Arial, sans-serif;
    text-align: center;
    gap: 40px;
    padding: 0px 10%;
}

.service-header h1 {
    color: rgb(96, 96, 96);
    font-size: 30pt;
    /* font-weight: bold; */
    margin-bottom: 20px;
    letter-spacing: -2px;
    font-family: 'Franklin Gothic medium';
}

/* Encabezado */
.service-header span {
    color: var(--blue-tech);
}

.service-header h1 span {
    font-weight: bold;
    
}

.intro-text {
    padding: 0px 4%;
    /* font-size: 1.1rem; */
    font-size: 12pt;
    color: #4e4d4d;
    /* line-height: 1.6; */
    margin-bottom: 40px;
    text-align: justify;
    font-family: "Arial Narrow";
    color: rgb(89, 89, 89);
    font-weight: bold;
}

/* Imagen con Texto Superpuesto */
.service-feature {
    position: relative;
    margin-bottom: 50px;
}

.image-wrapper img {
    width: 108%;
    /* border-radius: 8px; */
    display: block;
    margin-left: -5%;
}

.overlay-text {
    position: absolute;
    top: 5%;
    right: 16%;
    text-align: right;
    font-family: arial rounded mt bold, arial, sans-serif;
    font-size: 28pt;
    font-weight: bold;
    color: rgb(111, 111, 111);
}

.overlay-text h3 {
    font-family: arial rounded mt bold, arial, sans-serif;
    font-size: 38pt;
    font-weight: bold;
    color: rgb(111, 111, 111);
    margin: 0;
}

.method {
    font-size: 38pt;
    color: rgb(0, 162, 232);
    font-weight: bold;
    margin-top: -5%;
    font-family: arial rounded mt bold, arial, sans-serif;

}

/* CTA - Llamado a la acción */
.cta-section {
    padding: 0% 0;
}

.cta-section p {
    color: rgb(116, 116, 116);
    font-size: 16pt;
    /* font-size: 1.6rem; */
    /* font-weight: bold; */
    margin-bottom: -2%;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow';
}

.highlight-text {
    color: rgb(0, 128, 183);
    font-size: 30pt;
    /* font-size: 2.5rem; */
    margin-top: 10px;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow';

}

/* Sección Reserva */
.reservation-images {
    margin-bottom: 30px;
}

.reservation-images img {
    width: 110%;
    margin-left: -5%;
    /* border-radius: 5px; */
}

.reservation-footer h3 {
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 3px;

    /* 1. Definimos el degradado como fondo */
    background: linear-gradient(90deg, #86b6ff, #102bf8);
    /* 2. Hacemos que el fondo solo se vea donde hay texto */
    -webkit-background-clip: text;
    background-clip: text;

    /* 3. Volvemos el texto transparente para que brille el fondo */
    color: transparent;

    /* Opcional: Para asegurar que sea vea bien en todos los navegadores */
    /* display: inline-block; */
}


.reservation-footer h2 {
    font-size: 4.2rem;
    margin: -35px 0;
    font-weight: bold;
    letter-spacing: -3px;

    /* 1. Definimos el degradado como fondo */
    background: linear-gradient(90deg, #5bffef, #120181);

    /* 2. Hacemos que el fondo solo se vea donde hay texto */
    -webkit-background-clip: text;
    background-clip: text;

    /* 3. Volvemos el texto transparente para que brille el fondo */
    color: transparent;

    /* Opcional: Para asegurar que sea vea bien en todos los navegadores */
    /* display: inline-block; */
}

.btn-reserve {
    background: var(--purple-main);
    color: white;
    border: none;
    margin: 4% 0 5% 0px;
    padding: 1% 30px 1% 30px;
    font-size: 1.2rem;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-reserve:hover {
    transform: scale(1.05);
}

/* Responsivo */
@media (max-width: 768px) {
    .overlay-text {
        position: static;
        text-align: center;
        margin-top: 15px;
    }

    .reservation-images {
        flex-direction: column;
    }

    .reservation-images img {
        width: 100%;
    }
}

/* --- AJUSTES PARA MÓVIL (Sección Tapicería y Reserva) --- */
@media (max-width: 1024px) {
    .services-container {
        padding: 0 5%;
        /* Reducimos el margen lateral del 10% al 5% */
    }

    .service-header h1 {
        font-size: 2rem;
        /* Título principal más pequeño */
        letter-spacing: 0;
    }

    .intro-text {
        padding: 0;
        text-align: left;
        /* La justificación en móviles a veces deja huecos feos */
        font-size: 1rem;
    }

    /* --- AJUSTE IMAGEN Y TEXTO SUPERPUESTO --- */
    .image-wrapper img {
        width: 100%;
        /* Eliminamos el 108% que ensancha la web */
        margin-left: 0;
    }

    .overlay-text {
        position: relative;
        /* Ya no flota sobre la imagen para que no tape lo importante */
        top: 0;
        right: 0;
        text-align: center;
        padding: 20px 0;
    }

    .overlay-text h3 {
        font-size: 1.8rem;
    }

    .method {
        font-size: 2rem;
        margin-top: 0;
    }

    /* --- SECCIÓN LLÁMENOS --- */
    .cta-section p {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .highlight-text {
        font-size: 1.6rem;
        /* Bajamos de 2.8rem para que no se corte */
        line-height: 1.2;
    }

    /* --- SECCIÓN RESERVA --- */
    .reservation-images img {
        width: 100%;
        /* Eliminamos el 110% */
        margin-left: 0;
    }

    .reservation-footer h2 {
        font-size: 2.2rem;
        /* El texto "Reserva fácilmente" era 4.2rem (gigante) */
        margin: 10px 0;
        letter-spacing: 0;
        line-height: 1.1;
    }

    .reservation-footer h3 {
        font-size: 0.8rem;
        letter-spacing: 1px;
    }

    .btn-reserve {
        width: 100%;
        /* El botón ocupa todo el ancho para facilitar el clic */
        padding: 15px 0;
        font-size: 1rem;
    }
}

/* Ajuste para pantallas muy pequeñas (iPhone SE, etc) */
@media (max-width: 480px) {
    .service-header h1 {
        font-size: 1.7rem;
    }

    .highlight-text {
        font-size: 1.4rem;
    }

    .reservation-footer h2 {
        font-size: 1.8rem;
    }
}

/*!! Footer */

.main-footer {
    background: white;
    padding: 20px 5%;
    /* border-top: 15px solid var(--blue-main); */
    /* Franja azul superior */
    border-top: 6rem solid;
    /* Definimos el grosor y que es sólido */
    border-image: linear-gradient(90deg, #5b9dff, #120181) 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Arial Narrow";
    color: var(--text-color);
}


.footer-col {
    flex: 40 1 300px;
    min-width: 220px;
    padding: 0 2% 2% 3%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* CAMBIADO de center a flex-start */
    text-align: left;
    /* CAMBIADO de center a left */
}

.footer-logo {
    max-width: 80%;
    margin-bottom: 5px;

}

.brand-description {
    line-height: 1.4;
    font-family: 'Franklin Gothic Medium';
    font-size: 12pt;
    /* font-weight: bold; */
    color: rgb(108, 108, 108);
}

.footer-col h4 {
    color: #333;
    font-size: 14pt;
    margin-bottom: 15px;
    font-weight: bold;
    font-family: "Arial Narrow";
}

.footer-col ul {
    list-style: none;
    padding: 0;
        font-family: "Arial Narrow";
    font-size: 12pt;
    font-weight: bold;
}

.footer-col ul li {
    display: flex;
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
    font-family: "Arial Narrow";
    font-size: 12pt;
    font-weight: bold;
}

/* El punto azul de la lista */
.footer-col ul li::before {
    content: "•";
    color: var(--blue-main);
    font-weight: bold;
    position: absolute;
    left: 0;
    
}

/* Estilos de contacto */


/* Ajuste de las filas de números */
.phone-row,
.whatsapp-row {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    /* Tamaño más grande según imagen */
    font-weight: bold;
    color: #333;
    /* El fijo es oscuro */
}

/* Alineación del icono de WhatsApp con su número */
.whatsapp-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    font-size: 1.8rem;
    /* Tamaño grande para el número de WhatsApp */
    font-weight: bold;
    color: #0b5361;
    /* Color azulado/verde de tu imagen */
}

/* Alineación de los horarios con el icono del celular */
.schedule-row {
    line-height: 1.2;
        font-family: "Arial Narrow";
    font-size: 10pt;
    font-weight: bold;
    color: rgb(127, 127, 127);
}

.schedule-row p {
    display: flex;
    font-size: 0.8rem;
}

.schedule-row strong {
    width: 130px;
    display: inline-block;
}

/* Estilo para el número fijo de arriba */
.phone-row .number {
    font-size: 20pt;
    font-weight: bold;
    color: #333;
    display: block;
    padding-left: 60px;
    font-family: "Arial Narrow";
}

.number {
    color: #0b5f83;
    text-decoration: none;
    font-family: "Arial Narrow";
    font-size: 20pt;
}

/* .hours {
    color: #555;
    flex: 1;
    text-align: left;
    white-space: nowrap;
} */

/* Columna de Webpay */
.payment-col {
    display: flex;
    align-items: start;
    justify-content: flex-end;
}

.payment-logo {
    max-width: 50%;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .main-footer {
        flex-direction: column;
        text-align: center;
    }

    .payment-col {
        justify-content: center;
        margin-top: 20px;
    }

    .footer-col ul li {
        padding-left: 0;
    }

    .footer-col ul li::before {
        display: none;
    }
}

/* --- AJUSTES PARA MÓVIL (Footer) --- */
@media (max-width: 768px) {
    .main-footer {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding: 40px 5%;
        /* Reducimos el borde superior gigante en móvil para que no ocupe media pantalla */
        border-top-width: 2rem;
    }

    .footer-col {
        align-items: center;
        /* Centramos logo, títulos y listas */
        text-align: center;
        padding: 0;
        width: 100%;
        min-width: 100%;
    }

    .footer-logo {
        max-width: 200px;
        margin: 0 auto 15px auto;
    }

    .brand-description {
        text-align: center;
        max-width: 300px;
        margin: 0 auto;
    }

    .footer-col ul li {
        justify-content: center;
        /* Centra los items de la lista */
        padding-left: 0;
    }

    .footer-col ul li::before {
        position: static;
        /* Ponemos el punto al lado del texto */
        margin-right: 8px;
    }

    /* --- AJUSTE DE CONTACTO --- */
    .contact-info1 {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .phone-row,
    .whatsapp-row {
        justify-content: center;
        width: 100%;
    }

    .phone-row .number {
        padding-left: 0;
        /* Quitamos el padding de 60px que lo descentraba */
        font-size: 1.5rem;
        /* Un poco más pequeño para celulares */
    }

    .whatsapp-row {
        font-size: 1.5rem;
        gap: 10px;
    }

    .whatsapp-row .number {
        font-size: 1.5rem;
    }

    .ws-icon {
        width: 30px;
        /* Icono más manejable */
        height: auto;
    }

    .schedule-row strong {
        width: auto;
        /* Que el texto fluya natural */
        margin-right: 10px;
    }

    /* --- LOGO WEBPAY --- */
    .payment-col {
        justify-content: center;
        align-items: center;
        margin-top: 10px;
    }

    .payment-logo {
        max-width: 150px;
        /* Tamaño controlado para el logo de Transbank */
    }
}

/* Ajuste para pantallas muy pequeñas */
@media (max-width: 480px) {

    .phone-row .number,
    .whatsapp-row .number {
        font-size: 1.2rem;
    }
}

/* !GALERIA */

/* Configuración general de la sección */
.galeria-trabajos {
    max-width: 60%;
    /* 1000px; */
    /* Ancho máximo de toda la galería */
    margin: 0 auto;
    text-align: center;
    padding: 20px;
}

.galeria-trabajos h2 {
    margin-bottom: 4%;
    font-family: "Arial Rounded MT Bold";
    font-size: 20pt;
    font-weight: bold;
    color: rgb(82, 82, 82);
}

/* El contenedor que organiza los pares */
.contenedor-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Una columna por defecto (móvil) */
    /* gap: 20px; */
    /* Espacio entre filas */
}

/* Cada fila de Antes/Después */
.item-trabajo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Divide el par en dos columnas iguales */
    /* gap: 10px; */
    /* Espacio entre el antes y el después */
    gap: 2%;

}

/* Control individual de las imágenes */
.img-individual {
    width: 100%;
    /* Ocupa todo el ancho de su columna */
    height: 250px;
    /* AQUÍ PUEDES MODIFICAR LA ALTURA INDIVIDUAL */
    object-fit: cover;
    /* Evita que la imagen se deforme al cambiar el tamaño */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease; */
    padding: 2%;
    margin: 2%;
}

.img-individual:hover {
    transform: scale(1.02);
    /* Efecto sutil al pasar el mouse */
}

/* Responsive: Cuando la pantalla es ancha (PC) */
@media (min-width: 768px) {
    .contenedor-grid {
        /* Si quieres que se vea más pequeño, puedes ajustar el max-width */
    }
}

/* Estilos Generales */
.seccion-inundaciones {
    max-width: 80%;
    margin: 40px auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
    /* Puedes usar Montserrat si prefieres */
    line-height: 11 1.6;
}

/* Títulos Superiores */
.cabecera-titulos {
    text-align: center;
    margin-bottom: 40px;
}

.titulo-rojo {
    /* Rojo oscuro como el de la imagen */
    margin-bottom: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 22pt;
    color: rgb(125, 0, 19)
}

.sub-titulo {
    font-family: "Arial Rounded MT Bold";
    font-weight: bold;
    font-size: 20pt;
    color: rgb(106, 106, 106);
    margin: 5px 0;
}

.sub-titulo2 {
    font-family: "Arial Rounded MT Bold";
    font-weight: bold;
    font-size: 22pt;
    color: black;
    margin: 5px 0;
}

/* Disposición del Contenido */
.contenido-principal {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* --- CONTROL DE TAMAÑO DE IMÁGENES --- */
.columna-imagenes {
    flex: 0 0 40%;
    /* AQUÍ CONTROLAS EL ANCHO TOTAL DE LA COLUMNA DE IMÁGENES */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Tamaño individual para la imagen de arriba */
.contenedor-img-superior {
    width: 100%;
    height: 280px;
    /* AJUSTA ESTA ALTURA INDIVIDUALMENTE */
}

/* Tamaño individual para la imagen de abajo */
.contenedor-img-inferior {
    width: 100%;
    height: 30%;
    /* AJUSTA ESTA ALTURA INDIVIDUALMENTE */
}

.img-ajustable {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Mantiene la proporción sin deformar */
}

/* Efecto de curva en la imagen superior (esquina superior izquierda e inferior derecha) */
.img-curva {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

/* --- Columna de Texto --- */
.columna-texto {
    color: #555;
    text-align: justify;
}

.destacado {
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    font-family: 'Franklin Gothic Medium';
    font-size: 14pt;
}

.parrafo-base {
    font-family: 'Franklin Gothic Medium';
    font-size: 12pt;
    color: rgb(82, 82, 82);
    margin-bottom: 20px;
}

.parrafo-base1 {
    margin-bottom: 20px;
    margin-left: 12%;
    font-family: 'century gothic';
    font-size: 11pt;
    font-weight: bold;
    color: rgb(133, 133, 133);
}

.pregunta-destacada {
    color: #000;
    margin: 30px 0;
    font-weight: bold;
    text-align: center;
    font-family: 'Arial Rounded MT Bold';
    font-size: 32pt;
}

/* Adaptación para móviles */
@media (max-width: 768px) {
    .contenido-principal {
        flex-direction: column;
    }

    .columna-imagenes {
        flex: 1 1 auto;
        width: 100%;
    }
}


/* !navvv HAMBURGESA*/
nav {
    background: var(--blue-main);
    padding: 10px 0;
    text-align: center;
    position: relative;
    /* Para posicionar el menú móvil */
}

/* Estilos de tus enlaces (respetando tu configuración) */
nav a {
    color: white;
    text-decoration: none;
    margin: 0 60px;
    font-family: "Eras Medium ITC", "Eras ITC", sans-serif;
    font-size: 19px;
    font-weight: 500;
    display: inline-block;
    /* Importante para el margen */
}

/* Ocultar el checkbox por defecto */
#menu-check {
    display: none;
}

/* Estilo del botón hamburguesa (oculto en PC) */
.hamburguesa {
    display: none;
    flex-direction: column;
    width: 30px;
    cursor: pointer;
    margin-left: 20px;
}

.hamburguesa span {
    width: 100%;
    height: 3px;
    background: white;
    margin: 4px 0;
    transition: 0.4s;
}

/* --- MODO MÓVIL --- */
@media (max-width: 1024px) {
    /* Puedes ajustar este breakpoint */

    .hamburguesa {
        display: flex;
        /* Mostrar hamburguesa */
    }

    .enlaces {
        display: none;
        /* Ocultar enlaces en móvil por defecto */
        flex-direction: column;
        background: var(--blue-main);
        position: absolute;
        width: 100%;
        top: 100%;
        /* Aparece justo debajo del nav */
        left: 0;
        z-index: 1000;
        padding-bottom: 20px;
    }

    nav a {
        margin: 15px 0;
        /* Espacio vertical en móvil */
        display: block;
    }

    /* EL TRUCO: Si el checkbox está marcado, mostramos los enlaces */
    #menu-check:checked~.enlaces {
        display: flex;
    }

    /* Animación opcional: convertir hamburguesa en X */
    #menu-check:checked~.hamburguesa span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    #menu-check:checked~.hamburguesa span:nth-child(2) {
        opacity: 0;
    }

    #menu-check:checked~.hamburguesa span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -8px);
    }


}


/*//!BOTON WHATSAAP*/

.whatsapp-container a {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 6px;
}

.whatsapp-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    z-index: 9999;
}

.whatsapp-container img {
    width: 55px;
    transition: transform .3s;
}

.whatsapp-container:hover img {
    transform: scale(1.15);
}

.whatsapp-text {
    background: #25D366;
    color: white;
    padding: 8px 14px;
    border-radius: 20px;
    margin-right: 10px;
    font-size: 14px;
    animation: aparecer 0.6s ease forwards;
    opacity: 0;
}

.whatsapp-container:hover .whatsapp-text {
    opacity: 1;
}

@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}