* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        color: var(--text-color);
        font-family: Poppins, sans-serif;
        /*Sería Poppins*/
}

:root {
        --primary-color: #EADDCA;
        --second-color: #312B25;
        --text-color: #ffffff;
        --background-color: #FFFFFF4D;
        --webkit-filter: #fffdef;
        --box-shadow: #ffecd0cb;
        --box-shadow1: #f3e4c3;
}

html {
        scroll-behavior: smooth;
        scrollbar-width: none;
        overflow-x: hidden;
}

body {
        background-color: var(--second-color);
        overflow-x: hidden;
}

.fw-bold {
        font-weight: 10px;
        font-size: 14px;
        margin-left: 10%;
        margin-top: 10px;
}

a {
        text-decoration: none;
}

img,
video {
        max-width: 100%;
        height: auto;
        display: block;
}

h2 {
        margin-top: 80px;
        margin-bottom: 50px;
        text-align: center;
        font-size: 24px;
}

article {
        margin: 0 auto;
}



/*-----------------------------NAVEGADOR-----------------------------*/

.container-servicios {
        width: 80%;
}

.container-intro {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 50px;
        max-width: 1200px;
        width: 100%;
        margin: 60px auto;
        flex-wrap: nowrap;
        padding: 0 20px;
}

.img-servicio {
        flex: 0 0 40%;
        max-width: 40%;
        border-radius: 12px;
        object-fit: cover;
        height: auto;
        align-self: center;
        box-shadow: var(--box-shadow1) 0 0 10px 0;
}

.texto-servicio {
        flex: 0 0 60%;
        max-width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
        gap: 10px;
}

.interior-servicio {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1px;
        flex-wrap: wrap;
        margin-top: 25px;
}


.button-center-2 {
        display: flex;
        justify-content: center;
        flex: 1 1 180px;
        max-width: 200px;
        gap: 30px;
}


.texto-servicio>p {
        display: flex;
        text-align: left;
        margin: auto;
        margin-left: 20px;
        font-size: 16px;
        padding-bottom: 25px;
}

#nav-menu {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
        list-style: none;
        margin: auto;
        gap: 50px;
}

.nav-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 20px;
}

#logo-link {
        display: flex;
        align-items: center;
}

.nav-list a {
        position: relative;
        text-decoration: none;
        color: var(--text-color);
        display: inline-block;
        /* clave para que solo ocupe lo necesario */
}

.nav-list a::before {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--primary-color);
        transform: scaleX(0);
        -webkit-transform: scaleX(0);
        transform-origin: top;
        -webkit-transform-origin: top;
        transition: transform 0.2s ease-in-out;
        -webkit-transition: transform 0.2s ease-in-out;
        z-index: 0;
}

.nav-list a:hover::before {
        transform: scaleX(1);
        -webkit-transform: scaleX(1);
}

#navegador {
        position: fixed;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        z-index: 1000;
        padding: 0 1.5rem;
        background-color: rgba(255, 255, 255, 0.301);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
}

#hamburger {
        display: none;
        background: transparent;
        border: none;
        color: var(--text-color);
        font-size: 1.6rem;
        padding: 10px;
        cursor: pointer;
        line-height: 1;
        z-index: 1100;
}

#logo {
        height: 50px;
        width: auto;
        margin: 0;
        display: block;
        padding-top: 5px;
}

.nav-actions .button {
        margin-right: 0;
}

.button {
        position: relative;
        margin-top: auto;
        margin-bottom: auto;
        margin-right: 8%;
        padding: 0px 20px;
        background: var(--primary-color);
        height: 45px;
        flex-wrap: wrap;
        font-size: 16px;
        font-weight: 400;
        color: var(--second-color);
        border: 2px solid var(--primary-color);
        border-radius: 8px;
        box-shadow: 0 0 0 var(--box-shadow);
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.s ease-in-out;
        cursor: pointer;
        justify-content: center;
        align-content: center;
}

.button [class^="star-"] {
        position: absolute;
        height: auto;
        filter: drop-shadow(0 0 0 var(--webkit-filter));
        -webkit-filter: drop-shadow(0 0 0 var(--webkit-filter));
        z-index: -5;
}

.star-1 {
        top: 20%;
        left: 20%;
        width: 25px;
        transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
        -webkit-transition: all 1s subic-bezier(0.05, 0.83, 0.43, 0.96);
}

.star-2 {
        top: 45%;
        left: 45%;
        width: 15px;
        transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
        -webkit-transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-3 {
        top: 40%;
        left: 40%;
        width: 5px;
        transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
        -webkit-transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-4 {
        top: 20%;
        left: 40%;
        width: 8px;
        transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
        -webkit-transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-5 {
        top: 25%;
        left: 45%;
        width: 15px;
        transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);
        -webkit-transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-6 {
        top: 5%;
        left: 50%;
        width: 5px;
        transition: all 0.8s ease;
        -webkit-transition: all 0.8s ease;
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
}

.button:hover {
        background: transparent;
        color: var(--primary-color);
        box-shadow: 0 0 25px var(--box-shadow);
}

/* --- Hacer que las animaciones del botón solo ocurran con ratón (hover-capable devices) --- */

/* estado por defecto: las "estrellas" ocultas y sin interacción */
.button .star-1,
.button .star-2,
.button .star-3,
.button .star-4,
.button .star-5,
.button .star-6 {
        opacity: 0;
        z-index: -5;
        pointer-events: none;
        transform: scale(0.85);
        transition: top 1.05s cubic-bezier(0.22, 1, 0.36, 1),
                   left 1.05s cubic-bezier(0.22, 1, 0.36, 1),
                   transform +s cubic-bezier(0.22, 1, 0.36, 1),
                   opacity 0.75s ease-out;
        -webkit-transition: top 1.05s cubic-bezier(0.22, 1, 0.36, 1),
                            left 1.05s cubic-bezier(0.22, 1, 0.36, 1),
                            -webkit-transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
                            opacity 0.75s ease-out;
        will-change: top, left, transform, opacity;
}


/* Mantener accesibilidad: mostrar un foco visible pero sin las animaciones de estrellas */
.button:focus-visible {
        outline: 3px solid rgba(234, 213, 160, 0.25);
        outline-offset: 3px;
        box-shadow: none;
}

.nav-list {
        position: relative;

}

/*-------------------------------------SUBMENÚ-------------------------------------------*/

/* Submenu: oculto por defecto (sin !important para permitir hover/toggle) */
#sub-menu,
.sub-menu,
.submenu {
        display: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.18s ease, visibility 0.18s ease;
        list-style: none;
        margin: auto;
        gap: 50px;
}

/* INDICADOR (caret) sólo para el enlace que tiene submenú (clase .has-sub) */
.nav-list.has-sub>a::after {
        content: "▾";
        margin-left: 1px;
        font-size: 0.8rem;
        display: inline-block;
        transform: rotate(0deg);
        transition: transform 0.18s ease;
        color: currentColor;
}

/* girar el caret cuando el LI esté abierto o aria-expanded true */
.nav-list.has-sub.open>a::after,
.nav-list.has-sub>a[aria-expanded="true"]::after {
        transform: rotate(180deg);
}


/* cuando el li esté abierto, girar el caret */
.nav-list.open>a::after,
#sub-menu.show,
.nav-list>a[aria-expanded="true"]::after {
        transform: rotate(180deg);
}


.fil0 {
        fill: #fffdef;
}

/*--------------------------------------------LANDING------------------------------------*/

.full-page {
        position: relative;
        padding-bottom: clamp(2rem, 6vw, 4rem);
        height: 40vh;
}



.full-page> * {
        position: relative;
        z-index: 2;
}

.full-page::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(to bottom left, rgba(0, 0, 0, 0.089) 70%, rgba(0, 0, 0, 0.45));
        /* Degradado negro semitransparente */
        z-index: 1;
        pointer-events: none;
}

.full-page p {
        padding-top: 15px;
        margin-left: 10%;
        width: 40%;
}

#fondo-index {
        background-image: url(img/portada.webp);
        background-repeat: no-repeat;
        /* Para evitar que se repita */
        background-position: center 80%;
        /* Mueve la imagen para mostrar la parte de abajo */
        min-height: 100vh;
       
}

#fondo-proyectos {
        background-image: url(Proyectos/proyecto-portada.webp);
        background-position: center;
        background-repeat: no-repeat;
        min-height: 100vh;
}

#fondo-proyectos:before {
        content: "";
        position: absolute;
        inset: 0;
        /* shorthand para top, right, bottom, left: 0 */
        background: linear-gradient(to top, rgba(48, 45, 39, 0.219) 3%, rgba(0, 0, 0, 0));
        /* degradado negro suave */
        pointer-events: none;
}

#fondo-carpinteria {
        background-image: url(Servicios/Carpinteria/img/portada.webp);
        background-size: cover;
        background-repeat: no-repeat;
        /* Para evitar que se repita */
        background-position: center 80%;
        /* Mueve la imagen para mostrar la parte de abajo */
        height: 400px;
}

#fondo-carpinteria::before {
        background: linear-gradient(to top, rgba(48, 45, 39, 0.308) 10%, rgba(0, 0, 0, 0));
        /* degradado negro suave */
}

#fondo-cerrajeria {
        background-image: url(Servicios/Cerrajeria/img/portada.webp);
        background-size: cover;
        background-repeat: no-repeat;
        /* Para evitar que se repita */
        background-position: center 20%;
        /* Mueve la imagen para mostrar la parte de abajo */
        height: 400px;
}

#fondo-cerrajeria::before {
        background: linear-gradient(to top, rgba(48, 45, 39, 0.308) 10%, rgba(0, 0, 0, 0));
        /* degradado negro suave */
}

#fondo-imp-digital {
        background-image: url(Servicios/Impresion_digital/img/portada.webp);
        background-size: cover;
        background-repeat: no-repeat;
        /* Para evitar que se repita */
        background-position: center 20%;
        height: 400px;
}

#fondo-imp-digital::before {
        background: linear-gradient(to top, rgba(48, 45, 39, 0.308) 10%, rgba(0, 0, 0, 0));
        /* degradado negro suave */
}

#fondo-contract {
        background-image: url(Servicios/Contract/img/contract2.webp);
        background-size: cover;
        background-repeat: no-repeat;
        /* Para evitar que se repita */
        background-position: center 50%;
        
}

#fondo-contract::before {
        background: linear-gradient(to top, rgba(48, 45, 39, 0.308) 10%, rgba(0, 0, 0, 0));
        /* degradado negro suave */
}

#fondo-saexma {
        background-image: url(Proyectos\Saexma\img\portada.webp);
        background-size: cover;
        background-repeat: no-repeat;
        /* Para evitar que se repita */
        background-position: center 0%;
        /* Mueve la imagen para mostrar la parte de abajo */
        height: 500px;
}

#fondo-saexma::after {
        background: linear-gradient(to top, rgba(48, 45, 39, 0.479) 10%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
        /* degradado negro suave */
}

#fondo-sostenibilidad {
        background-image: url(sostenibilidad/bosque.webp);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 100vh;
}

#fondo-sostenibilidad:before {
        content: "";
        position: absolute;
        inset: 0;
        /* shorthand para top, right, bottom, left: 0 */
        background: linear-gradient(to top, rgba(48, 45, 39, 0.219) 3%, rgba(0, 0, 0, 0));
        /* degradado negro suave */
        pointer-events: none;
}

#fondo-servicios {
        background-image: url(Servicios/portada.webp);
        background-position: center bottom;
        background-repeat: no-repeat;
        min-height: 100vh;
}

#fondo-servicios::before {
        background: linear-gradient(to top, rgba(48, 45, 39, 0.363) 30%, rgba(0, 0, 0, 0));
        /* degradado negro suave */
}

#fondo-contacto {
        background-image: url(Servicios/Carpinteria/img/boceto.webp);
        background-size: cover;
        background-repeat: no-repeat;
        /* Para evitar que se repita */
        background-position: center 0%;
        /* Mueve la imagen para mostrar la parte de abajo */
        height: 400px;
}

#fondo-contacto::after {
        background: linear-gradient(to top, rgba(48, 45, 39, 0.479) 100%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
        /* degradado negro suave */
}

.titulo-wrap {
        padding-top: 20%;
        padding-bottom: 2rem;
        width: 100%;
}

.titulito {
        margin-left: 10%;
        font-size: 52px;
        font-family: Roboto Mono, Poppins, sans-serif;
        font-weight: 600;
        width: 100%;
}

.titulo-wrap h1 {
        font-size: 16px;
        font-weight: 600;
        margin-left: 10%;
        margin-top: 10px;
}


/*---------------------------------------INDEX-ESPACIOS--------------------------------*/

.creating-spaces {
        display: flex;
        max-width: 1200px;
        width: 90%;
        justify-content: center;
        align-self: center;
        margin: auto;
        padding-top: 80px;
}

.text-left {
        max-width: 600px;
        padding: 0px;
        margin-right: 10px;
        text-align: justify;
}

.text-left-2 {
        max-width: 600px;
        padding-top: 25px;
        margin-right: 10px;
        text-align: justify;
}

.replace {
        max-width: 500px;
        margin: auto;
        margin-left: 20px;
        height: auto;
        object-fit: cover;
        padding-left: 0px;
        border-radius: 10px;
        box-shadow: var(--box-shadow1) 0 0 10px 0;
}

.destacado {
        font-weight: bolder;
}

/*--------------------------------INDEX-DIFERENCIARTE--------------------------------*/

.sub {
        margin-top: 80px;
}

.parent {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        max-width: 1200px;
        margin: auto;
        padding: 10px;
        gap: 30px;
}

.card {
        background: linear-gradient(140deg, #ebd19f81, var(--second-color), var(--second-color), var(--second-color), var(--second-color));
        border-bottom: 1px solid rgba(231, 200, 154, 0.5);
        border-top: 1px solid rgba(231, 200, 154, 0.2);
        border-right: 1px solid rgba(231, 200, 154, 0.25);
        border-left: 1px solid rgba(231, 200, 154, 0.5);
        /* tono intermedio */
        border-radius: 8px;
        overflow: hidden;
        margin-top: 60px;
        padding: 20px;
        padding-bottom: 25px;
}

.card:hover .icon {
    filter: blur(0.3px);
        -webkit-filter: blur(0.3px);
}


.icon {
        position: relative;
        stroke: var(--primary-color);
        fill: var(--primary-color);
        stroke-width: 0.2px;
        margin-left: 15px;
        top: 95%;
        left: 88%;
        width: 25px;
        height: auto;
        filter: drop-shadow(0 0 10px #ebd19f81);
        -webkit-filter: drop-shadow(0 0 10px #ebd19f81);
        transform: scale(7);
        -webkit-transform: scale(7);
        transition: filter 0.25s ease, opacity 0.25s ease;
        opacity: 0.2;
        z-index: 2;
        padding: 0;
}

.dif-title {
        font-size: 20px;
        font-family: Poppins, sans-serif;
        font-weight: 600;
        color: var(--primary-color);
        text-align: center;
        padding: 10px;
        margin-top: 0px;
}

.dif-text {
        font-size: 16px;
        padding: 10px;
        line-height: 30px;
}

/*------------------------------INDEX-CASOS CLIENTES--------------------------------*/

.clients {
        text-align: center;
        color: var(--primary-color);
        margin-top: 100px;
        margin-bottom: 50px;
        font-weight: 600;
}

.cases {
        margin: auto;
        padding: 0;
        font-size: 30px;
        max-width: 1300px;
        text-align: left;
        padding-bottom: 25px;
}

.description {
        margin-left: auto;
        margin-right: auto;
        max-width: 1200px;
        padding: 0px;
        font-size: 18px;
}

.article-div {
        display: flex;
        max-width: 1200px;
        padding: 10px;
        margin: auto;
}

.quote-line {
        width: 10px;
        height: auto;
        background-color: #dfb372;
        margin: 20px auto;
}

blockquote {
        margin: 20px auto;
        font-style: italic;
        padding: 20px;
        background-color: var(--primary-color);
        text-align: left;
        color: var(--second-color);
}

.quote {
        color: var(--second-color);
        font-weight: bolder;
}

.news {
        color: #0e7200;
        text-decoration: underline;
        font-weight: bolder;
        font-size: small;
        text-underline-offset: 3px;
}

.news:hover {
        color: #3c8b32;
}

.buttons {
        border: 1px solid var(--primary-color);;
        border-radius: 10px;
        padding: 10px 50px;
        font-weight: 500;
        text-align: center;
        display: inline-block;
        justify-content: center;
        /* importante si el botón usa flex */
        white-space: nowrap;
        /* opcional */
        margin: auto;
}

.buttons:hover {
        background-color: var(--primary-color);
        color: var(--second-color);
        transition: 0.3s ease-in-out;
        -webkit-transition: 0.3s ease-in-out;
}


/*-------------------------------INDEX-PREGUNTAS FRECUENTES------------------------------*/

.fq h3 {
        margin-left: 10%;
        padding-top: 40px;
        color: var(--primary-color);
}

.fq p {
        margin-left: auto;
        margin-right: auto;
        max-width: 1400px;
        padding: 20px;
}

.fq h2 {
        margin-top: 80px;
}

/*--------------------------------SERVICIOS-----------------------------*/


.texto-servicio-inicio h2 {
        font-size: 2rem;
}

.texto-servicio-inicio p {
        max-width: 100%;
        padding: 20px;
}

.tech-cards-servicios {
        display: grid;
        gap: 1.8rem;
        width: min(1200px, 92vw);
        margin: 0 auto;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        height: auto;
        padding: 10px 0 40px;
}

.tech-cards-servicios img {
        width: min(100%, 400px);
        max-width: 400px;
        height: 200px;
        object-fit: cover;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        border-radius: 10px;
        box-shadow: #0f0f0f 0 0 10px 0;
}

.tech-cards-servicios a {
        display: block;
        width: 100%;
}

.tech-cards-servicios .tech-card-sostenibilidad {
        height: 100%;
}

.tech-cards-servicios p {
        margin: 0.7rem;
        padding: 0;
}

.servicio-card-img {
        max-height: 380px;
}


/*------------CARPINTERIA,CERRAJERIA,CONTRACT-------------------------------------*/

#titulo-carpinteria, #titulo-impresion {
        padding-top: 150px;
        font-size: 54px;
        font-family: Roboto Mono, Poppins, sans-serif;
        text-align: center;
}

.container-servicios {
        width: 100%;
}

.container-intro {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 50px;
        max-width: 1200px;
        width: 100%;
        margin: 60px auto;
        flex-wrap: nowrap;
        padding: 0 20px;
}

.img-servicio {
        flex: 0 0 40%;
        max-width: 40%;
        border-radius: 12px;
        object-fit: cover;
        height: auto;
        align-self: center;
        display: block;
        margin: 0 auto 0 0;
        box-shadow: var(--box-shadow1) 0 0 10px 0;
}

.texto-servicio {
        flex: 0 0 60%;
        max-width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
        gap: 10px;
}

.interior-servicio {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1px;
        flex-wrap: wrap;
        margin-top: 25px;
}


.button-center-2 {
        display: flex;
        justify-content: center;
        flex: 1 1 180px;
        max-width: 200px;
        gap: 30px;
}


.texto-servicio>p {
        display: flex;
        text-align: left;
        margin: auto;
        margin-left: 20px;
        font-size: 16px;
        padding-bottom: 25px;
}


.button-center {
        display: grid;

}

.button-contactanos {
        margin-left: 88vh;
}


.texto-carpinteria {
        margin-bottom: 30px;
}

.explicacion-servicio {
        max-width: 80%;
        margin: auto;
        padding: 20px;
        background-color: var(--primary-color);
        display: flex;
        overflow: hidden;
        
}

.columna-texto {
        width: 70%;
        display: flex;
        align-items: center;
}

.columna-texto p {
        color: var(--second-color);
        ;
}

.columna-imagen {
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        overflow: hidden;
        z-index: 0;
}

.img-boceto,
.img-boceto-contract {
        width: 600px;
        height: auto;
        transform: rotate(345deg);
        -webkit-transform: rotate(345deg);
        object-fit: contain;
}

.container-galeria {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        width: 80%;
        margin: auto;
        gap: 25px;
}

.img-galeria-servicio {
        width: 100%;
        aspect-ratio: 1 / 1;
        /* mantiene el cuadrado */
        overflow: hidden;
        position: relative;
        border-radius: 10px;
        box-shadow: var(--box-shadow1) 0 0 10px 0;
}

.img-galeria-servicio img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
}

.img-galeria-servicio img:hover {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transition: 0.5s ease-in-out;
        -webkit-transition: 0.5s ease-in-out;
}


/*------------------------IMPRESION DIGITAL---------------------------------*/



/*------------------------SOSTENIBILIDAD---------------------*/

.certificaciones {
        display: flex;
        position: absolute;
        max-width: 300px;
        left: 99rem;
        margin-top: 300px;
        margin-left: 0px;
        background-color: var(--second-color);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-top: 1px solid rgba(243, 216, 176, 0.226);
        border-left: 1px solid rgba(243, 216, 176, 0.226);
        border-right: 1px solid rgba(243, 216, 176, 0.226);
}

.certificaciones img {
        height: 100px;
        width: auto;
        padding: 10px;
}

#titulo-sostenibilidad {
        text-align: center;
        margin-top: 80px;
}



.container-sostenibilidad {
        display: flex;
        flex-direction: column;
        margin-top: 120px;
}

.tech-cards-sostenibilidad-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: center;
        margin: auto;
        gap: 20px;
        max-width: 80%;

}

.tech-cards-sostenibilidad-wrapper>* {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        align-self: stretch;
        /* obligar a estirarse y ocupar la celda */
}

.img-sostenibilidad {
        width: 100%;
        height: auto;

}

.tech-cards-sostenibilidad-wrapper .tech-card-sostenibilidad svg {
        width: 80px;
        height: 100px;
        flex: 0 0 auto;
}

.tech-card-sostenibilidad {
        background: radial-gradient(circle, #ddbf952c 20%, var(--second-color));
        border-top: 1px solid rgba(231, 200, 154, 0.144);
        border-bottom: 1px solid rgba(231, 200, 154, 0.048);
        border-right: 1px solid rgba(231, 200, 154, 0.068);
        border-left: 1px solid rgba(231, 200, 154, 0.048);
        /* tono intermedio */
        border-radius: 16px;
        padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 5rem);
        position: relative;
        box-shadow: var(--box-shadow1) 0 0 10px 0;
        transition: transform 0.2s;
        -webkit-transition: transform 0.2s;
        overflow: hidden;
        width: 100%;
        max-width: none;
        max-height: 664px;
}




.tech-card-sostenibilidad:hover {
        transform: translateY(-3px);
        -webkit-transform: translateY(-3px);
}

.tech-card-sostenibilidad .sost-icon {
        transition: filter 0.25s ease, opacity 0.25s ease;
}

.tech-card-sostenibilidad:hover .sost-icon {
        filter: drop-shadow(0 0 10px #ebd19f81) blur(1.3px);
        -webkit-filter: drop-shadow(0 0 10px #ebd19f81) blur(1.3px);
        opacity: 0.45;
}

.tech-card-sostenibilidad svg,
.contacto-card svg {
        position: absolute;
        stroke: var(--primary-color);
        fill: var(--primary-color);
        stroke-width: 0.2px;
        left: 75%;
        filter: drop-shadow(0 0 10px #ebd19f81);
        -webkit-filter: drop-shadow(0 0 0 var(--webkit-filter));
        opacity: 0.2;
        z-index: 2;
        padding: 0;
        bottom: 10px;
        right: 35px;
        width: 85px;
        height: 85px;
}

.contacto-card:hover svg {
        filter: blur(0.3px);
        -webkit-filter: blur(0.3px);
}

.tech-card-sostenibilidad h3 {
        margin-bottom: 0.5rem;
        color: white;
        font-size: 1.2rem;
        margin: 0.7rem;
}

.tech-card-sostenibilidad p {
        color: #e7e3da;
        font-size: 0.95rem;
}

.imagen-sostenibilidad {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        object-fit: cover;
        margin-top: auto;
        margin-bottom: auto;
}

.imagen-sostenibilidad img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 16px;
}

.tintas {
        display: flex;
        flex-direction: row;
        order: 2;
        max-width: 1200px;
        margin-top: 50px;
        gap: 15px;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
}

.tintas img {
        height: 200px;
        width: auto;

}

.tintas p {
        margin: auto;
        max-width: 80%;
        order: 1;

}

.tintas-star {
        display: flex;
        flex-direction: row;
        order: 1;
        max-width: 1200px;
        margin-top: 50px;
        gap: 15px;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;   
}

.tintas-star img {
        height: 200px;
        width: auto;
        order: 2;

}

.tintas-star p {
        margin: auto;
        max-width: 80%;
        order: 1;

}


.separador {
        height: 2px;
        width: 90%;
        margin: 20px auto 0 auto;
        border-radius: 999px;
        background: linear-gradient(90deg,
                        rgba(231, 200, 154, 0) 0%,
                        rgba(231, 200, 154, 0.7) 50%,
                        rgba(231, 200, 154, 0) 100%);
}

.tech-card-sostenibilidad,
.tech-cards-sostenibilidad-wrapper .imagen-sostenibilidad,
.tech-cards-sostenibilidad-wrapper img {
        max-width: none;
}

/*-------------------------------- CONTACTO----------------------------------*/

.contacto-texto {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
        text-align: justify;
}

.contacto-texto h2 {
        margin-top: 140px;
}

.contacto-texto p {
        margin-block-end: 1em;

}

.tech-cards-contacto {
        display: grid;
        grid-template-columns: repeat(1, minmax(280px, 1fr));
        gap: 1.25rem;
        padding: 1.25rem;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        align-items: stretch;
}

.contacto-card {
        background: radial-gradient(circle, #ddbf952c 20%, var(--second-color));
        border: 1px solid rgba(231, 200, 154, 0.1);
        border-radius: 16px;
        padding: 1.25rem;
        position: relative;
        box-shadow: var(--box-shadow1) 0 0 10px 0;
        transition: transform 0.2s;
        -webkit-transition: transform 0.2s;
        min-height: 160px;
        color: var(--text-color);
        box-sizing: border-box;
}

.contacto-card:hover {
        transform: translateY(-3px);
        -webkit-transform: translateY(-3px);
        filter: blur(0.3px);
        -webkit-filter: blur(0.3px);
}

.mapa {
        display: flex;
        flex-direction: column;
        margin: 0;
        margin-top: 30px;
        max-width: 100%;
        min-height: 900px;
}

.mapa p {
        margin-top: 10px;
        text-decoration: underline var(--primary-color) 2px;
}

.mapa iframe {
        display: flex;
        margin-top: 30px;
        border-radius: 10px;
        box-shadow: var(--box-shadow1) 0 0 10px 0;
        border: 0;
        width: 500px;
        max-width: 750px;
        height: 720px;
}

.contacto-card>a {
        display: block;
        height: 100%;
        color: inherit;
        text-decoration: none;
}

.contacto-card svg {
        position: absolute;
        right: 10px;
        bottom: 0px;
        width: 60px;
        height: 70px;
        margin: 0;
        flex: 0 0 auto;
        opacity: 0.2;
}

.tech-cards-contacto .mapa iframe,
.tech-cards-contacto .mapa img {
        width: 100%;
        max-width: 100%;
        display: block;
        box-sizing: border-box;
}

.tech-cards-contacto .mapa iframe {
        height: 590px;
}

/*Formulario contacto*/
/* Comentado: estilos del formulario de contacto
.contact-form {
        margin: 40px auto 40px 0;
        width: min(900px, 100%);
        transform: translateX(160px);
        max-width: 100%;
        margin-left: 40px;
        padding: 30px; 
        border-radius: 16px;
        background: radial-gradient(circle, #ddbf952c 20%, var(--second-color));
        border: 1px solid rgba(231,200,154,0.1);
        box-shadow: var(--box-shadow1) 0 0 10px 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
}

.contact-form input,
.contact-form textarea {
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.25);
        background-color: rgba(49,43,37,0.7);
        color: var(--text-color);
        padding: 12px 14px;
        font-size: 1rem;
}

.contact-form button {
        align-self: flex-start;
        padding: 12px 30px;
        border-radius: 8px;
        background: var(--primary-color);
        color: var(--second-color);
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: transform 0.2s;
}

.contact-form button:hover {
        transform: translateY(-2px);
}

.contact-form .checkbox {
        display: flex;
        gap: 10px;
        align-items: center;
        font-size: 0.9rem;
}*/



/*--------------------PROYECTOS-----------------------------------*/

.container-proyectos {
        margin-top: 100px;
        width: 70%;
        min-height: 700px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        border-radius: 5px;
        box-shadow: var(--box-shadow1) 0 0 10px 0;
        position: relative;
        background: radial-gradient(circle, #d3bb9728 20%, var(--second-color));
        border-top: 1px solid rgba(231, 200, 154, 0.144);
        border-bottom: 1px solid rgba(231, 200, 154, 0.048);
        border-right: 1px solid rgba(231, 200, 154, 0.068);
        border-left: 1px solid rgba(231, 200, 154, 0.048);
        /*tono intermedio */
}

.titulo-proyecto {
        text-align: center;
        justify-content: center;
        padding-bottom: 30px;
        font-size: 30px;
        width: 100%;
        height: auto;
}

.container-montaje {
        display: flex;

}

.info-montaje {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    
}

.foto-montaje {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px;
    padding-bottom: 70px;
    
        
}

.foto-montaje img {
    width: 110%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 5px;
}

.galeria-interior {
        min-height: 50px;

}

.galeria-interior>h3 {
        font: 600 24px;
        max-width: 70%;
        margin-left: 5%;
        margin-top: 0;
}

.galeria-interior>p {
        max-width: 70%;
        margin-left: 5%;
        margin-top: 10px;
}

.grid-superpuesto {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-items: center;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        max-width: 700px;
        margin: 20px auto 0 auto;
        padding: 10px;
        height: auto;
}

.superpuesta {
        margin-top: 16px;
        width: 200px;
        height: 140px;
        object-fit: cover;
        display: block;
        max-width: 100%;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        position: relative;
        z-index: 1;
}

.grid-superpuesto-saexma {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-items: center;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        max-width: 700px;
        margin: 30px auto 0 auto;
        height: auto;
}

.superpuesta-metodica {
        margin-top: -10px;
        width: 200px;
        height: 140px;
        object-fit: cover;
        display: block;
        max-width: 100%;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        position: relative;
        z-index: 1;  
}

.superpuesta-saexma {
        margin-top: 90px;
        width: 200px;
        height: 140px;
        object-fit: cover;
        display: block;
        max-width: 100%;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        position: relative;
        z-index: 1;
}

 .superpuesta-residencial {
        margin-top: 126px;
        width: 200px;
        height: 140px;
        object-fit: cover;
        display: block;
        max-width: 100%;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        position: relative;
        z-index: 1;     
 }
       

.superpuesta:hover, .superpuesta-saexma:hover, .superpuesta-residencial:hover, .superpuesta-metodica:hover {
        transform: scale(1.6);
        z-index: 1002;
        position: relative;
        box-shadow: 0 8px 32px rgba(0,0,0,0.4);
        transition: transform 0.3s, z-index 0.3s;
}

.container-proyectos:hover .dickies-logo {
        transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
        opacity: 1;
        visibility: visible;
        top: 30px;
}

.dickies-logo {
        width: 250px;
        height: auto;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: -20px;
        left: 1200px;
        transform: rotateX(330deg);
        -webkit-transform: rotateX(330deg);
        z-index: 10;
        transition: all 0.5s ease-out;
        -webkit-transition: all 0.5 ease-out;
}

/*----------------------------------FOOTER---------------------------------*/

.footer-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 100%;
        margin: 80px auto 0px 0px;
        background-color: #000;
        text-align: right;
}

.footer-column {
        text-align: right;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
}

.footer-logo img {
        height: 50px;
        margin-top: 10px;
}

.footer-contact h3 {
        margin-bottom: 10px;
        margin-right: 20px;
        font-size: 16px;
        font-weight: normal;
}

.footer-contact p {
        margin-right: 20px;
        color: #dadada;
        font-size: 14px;
        padding-bottom: 10px;
}


/*----------------------------- RESPONSIVE ---------------------------*/

@media screen and (max-width: 1024px) {
        .full-page, .full-page-servicios {
                min-height: 40vh;
                max-height: 50vh;
                padding-top: 110px;
                padding-bottom: 90px;
        }

        .titulo-wrap {
                padding-top: 250px;
                padding-bottom: 20px;
        }

        .full-page p,
        .titulito,
        .titulo-wrap h1 {
                margin-left: 5%;
                max-width: 90%;
        }

        .titulito {
                font-size: 38px;
        }

        .titulo-wrap h1 {
                margin-top: 20px;
        }

        #fondo-proyectos {
                background-image: url(Proyectos/proyecto-portada.webp);
                background-position: center;
                background-repeat: no-repeat;
                min-height: 60vh;
        }

        #fondo-index {
                background-image: url(img/portada.webp);
                background-repeat: no-repeat;
                background-position: 50% 80%;
                min-height: 80vh;
        }

        #fondo-imp-digital {
                min-height: 35vh;
                padding-top: 80px;
                padding-bottom: 80px;
        }

        #titulo-impresion {
                padding-top: 150px;
                font-size: 32px;
        }

        #navegador {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                position: fixed;
                background-color: var(--background-color);
                gap: 0;
                padding: 0 1.25rem;
        }

        .nav-list a {
                color: var(--second-color);
        }

        #logo {
                margin-left: auto;
        }

        #hamburger {
                display: block;
                margin-left: 0;
                margin-right: 0;
                position: absolute;
                left: 12px;
                right: auto;
                top: 50%;
                transform: translateY(-50%);
                background: transparent;
                border: none;
                padding: 10px;
                margin: auto;
                font-size: 1.6rem;
                box-shadow: none;
                z-index: 1201;
                /* por encima del logo y del nav */
        }

        #nav-menu {
                display: none;
                flex-direction: column;
                gap: 0;
                background: var(--primary-color);
                text-align: center;
                margin-top: 60px;
                margin-left: 0px;
                width: 100%;
                max-width: 100%;
                position: absolute;
                left: 0;
                top: 60px;
                z-index: 1001;
                padding: 0 16px 12px 16px;
                box-sizing: border-box;
        }

        #nav-menu.show {
                display: flex;
                margin-top: 0px;
                position: absolute;
                top: 60px;
                left: 0;
                width: 65%;
                max-width: 100%;
                background: var(--primary-color);
                z-index: 1099;
                padding: 8px 16px 12px 5px;
                border-radius: 0 0 2% 0;
                box-sizing: border-box;
                

        }

        .nav-actions {
                margin-left: auto;
                flex: 1;
                justify-content: flex-end;
                gap: 12px;
        }

        .nav-actions .button {
                display: none;
        }

        #logo-link {
                margin-left: auto;
        }

        #nav-menu,
        /* Corregir submenú "al revés" en móvil: forzar lectura LTR y ordenar, SIN FORZAR display */
        #nav-menu *,
        #nav-menu a {
                direction: ltr;
                /* asegurar dirección de texto normal */
                unicode-bidi: embed;
                text-align: left;
        }

        #nav-menu>li {
                display: flex;
                flex-direction: column;
                order: 0;
                width: 100%;
                padding: 0;
                margin: 0;
                align-items: stretch;
        }

        #nav-menu>li>#sub-menu {
                order: 1;
                transform: none;
                /* elimina espejado/rotaciones heredadas */
                -webkit-transform: none;
                display: none;
                /* oculto por defecto; se muestra con .open/.show */
                flex-direction: column;
        }

        #nav-menu #sub-menu,
        /* evitar que algún transform global invierta el texto */
        #nav-menu #sub-menu li,
        #nav-menu #sub-menu a {
                transform: none;
                -webkit-transform: none;
        }

        #nav-menu>li>a {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding: 10px 20px;
                color: var(--second-color);
                width: 100%;
                order: 0;
                gap: 8px;
                
        }

        #nav-menu #sub-menu {
                /* Submenu dentro del menú hamburguesa */
                display: none;
                /* oculto por defecto */
                flex-direction: column;
                padding-left: 40px;
                background: var(--primary-color);
                /* mismo fondo que el nav */
                color: var(--second-color);
                width: 100%;
        }

        .nav-list.open>#sub-menu,
        /* Mostrar cuando el li padre tiene .open o el submenu tiene .show */
        #nav-menu #sub-menu.show {
                display: flex;
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                background: var(--primary-color);
                color: var(--second-color);
        }

        #nav-menu #sub-menu li {
                /* items del submenu en móvil */
                padding: 10px 20px;
        }

        #nav-menu #sub-menu li a {
                color: var(--second-color);
                display: block;
        }

        .nav-list:hover>#sub-menu {
                /* evita que el hover del desktop interfiera en móvil */
                display: none;
        }

        #logo {
                position: relative;
                left: auto;
                top: auto;
                transform: none;
                margin-left: auto;
                margin-right: 16px;
                height: 50px;
        }

        #nav-menu,
        #nav-menu ul {
                flex-direction: column;
                gap: 0;
        }

        article {
                margin: 0 auto;
        }


        .button {
                display: none;
        }

        .contact-form {
                width: 90%;
                padding: 20px;
        }

        .contact-form button {
                width: 100%;
                text-align: center;
        }

        html, body {
                max-width: 100vw;
                overflow-x: hidden;
        }

        .container-proyectos {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                margin: 0 auto 120px auto;
                padding: 0 12px 24px 12px;
                box-sizing: border-box;
                min-height: auto;
                height: auto;
                box-shadow: none;
        }

        .container-montaje {
                flex-direction: column;
                align-items: center;
                width: 100%;
                min-width: 0;
        }

        .foto-montaje {
                width: 100%;
                height: 220px;
                padding-bottom: 10px;
                padding-left: 0;
                box-sizing: border-box;
        }

        .foto-montaje img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
                display: block;
        }

        .info-montaje {
                width: 100%;
                padding: 0 8px;
                box-sizing: border-box;
        }

        .galeria-interior>h3,
        .galeria-interior>p {
                max-width: 100%;
                margin-left: 0;
                margin-top: 10px;
                word-break: break-word;
        }

        .grid-superpuesto,
        .grid-superpuesto-saexma {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
                width: 100%;
                max-width: 100%;
                gap: 12px;
                margin-top: 16px;
                margin-left: 0;
                margin-right: 0;
                padding: 0;
                box-sizing: border-box;
                overflow: hidden;
        }

        .superpuesta,
        .superpuesta-metodica,
        .superpuesta-saexma,
        .superpuesta-residencial {
                width: 100%;
                height: auto;
                aspect-ratio: 4 / 3;
                margin-top: 0;
        }

        /*---------------------RESPONSIVE INDEX-ESPACIO----------------------------*/
        .creating-spaces {
                display: flex;
                max-width: 768px;
                justify-content: center;
                align-self: center;
                margin: 20px auto;
                padding-top: 0px;
                flex-direction: column;
                gap: 0;
                align-items: center;
        }

        .text-left {
                max-width: 90%;
                /* ocupa más espacio en pantallas pequeñas */
                padding-top: 30px;
                padding-right: 0;
                /* quitamos el extra */
                text-align: left;
                margin-left: auto;
                margin-right: auto;
        }

        .text-left-2 {
                max-width: 90%;
                /* ocupa más espacio en pantallas pequeñas */
                padding-top: 30px;
                padding-right: 0;
                /* quitamos el extra */
                text-align: left;
                margin-left: auto;
                margin-right: auto;
        }

        .replace {
                width: 100%;
                /* que se adapte al contenedor */
                max-width: 400px;
                /* no tan grande */
                height: auto;
                object-fit: cover;
                padding-left: 0;
                margin: 50px auto 0;
                /* separación debajo del texto */
                border-radius: 10px;
                box-shadow: var(--box-shadow1) 0 0 20px 0;
        }

        /*---------------------RESPONSIVE SOSTENIBILIDAD-------------------*/

        .certificaciones {
                position: static;
                max-width: 90%;
                margin: 30px auto 0 auto;
                justify-content: center;
                flex-wrap: wrap;
                gap: 16px;
                padding: 12px 18px;
        }

        .certificaciones img {
                height: 70px;
                padding: 8px;
        }

        .container-sostenibilidad {
                width: 100%;
                margin-top: 40px;
                gap: 30px;
        }

        .tech-cards-sostenibilidad-wrapper {
                max-width: 95%;
                width: 95%;
        }

        .tintas {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 20px;
        }

        .tintas p {
                max-width: 90%;
                margin: 0 auto;
        }

        .tintas img {
                height: 160px;
        }

        /*---------------------RESPONSIVE INDEX-CASOS CLIENTES---------------*/

        .clients {
                margin-top: 50px;
                margin-bottom: 25px;
        }

        .cases {
                margin: 40px;
                padding: 0;
                max-width: 1050px;
                text-align: left;
                padding-bottom: 25px;
        }

        .description {
                margin: 40px;
                max-width: 1050px;
                padding: 0;
                font-size: 16px;
                text-align: left;
        }

        /*------------------RESPONSIVE INDEX-DIFERENCIARTE--------------*/

        .parent {
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                grid-column-gap: 0px;
                grid-row-gap: 0px;
                max-width: 500px;
                margin: auto;
                padding: 5px;
                gap: 5px;
        }

        .card {
                margin-top: 20px;
                padding: 10px;
                padding-bottom: 25px;
        }

        .icon {
                position: relative;
                stroke: var(--primary-color);
                fill: var(--primary-color);
                stroke-width: 0.3px;
                top: 95%;
                left: 100%;
                width: 70px;
                height: auto;
        }

        .dif-title {
                font-size: 20px;
                font-family: Poppins, sans-serif;
                font-weight: 600;
                color: var(--primary-color);
                text-align: center;
                padding: 10px;
                margin-top: 0px;
        }

        .dif-text {
                font-size: 16px;
                padding: 10px;
                line-height: 30px;
        }

        /*-------------------RESPONSIVE-INDEX-PREGUNTAS FRECUENTES---------------------*/

        .fq h3 {
                margin-left: 5%;
                padding-top: 40px;
                color: var(--primary-color);
        }

        .fq p {
                margin: 40px;
                padding: 10px;
                max-width: 1200px;
                text-align: left;
                padding-bottom: 5px;
        }

        .button-center {
                justify-content: center;
                align-items: center;
        }

        .boton-proyecto,
        .buttons {
                width: 22vw;
                font-size: 16px;
                padding: 10px;
                margin: 10px auto;
                min-width: unset;
        }

        .button-contactanos {
                margin: 20px auto 0;
                width: 100%;
                max-width: 360px;
                display: flex;
                justify-content: center;
        }

        .button-contactanos a {
                width: 100%;
                text-align: center;
        }

        /*------------------------RESPONSIVE SERVICIOS--------------------*/

        .texto-servicio-inicio {
                display: flex;
                width: 100%;
                align-self: center;
                flex-direction: column;
                margin: auto;
                padding: auto;
        }

        .texto-servicio-inicio p {
                margin: auto;
        }


        /*------------------------RESPONSIVE SOSTENIBILIDAD---------------*/

        .tech-card-sostenibilidad {
                padding: 35px 25px 60px 25px;
                /* menos espacio pero aún con aire */
        }

        .tech-card-sostenibilidad svg {
                bottom: 20px;
                /* más cerca del borde */
                right: 20px;
                width: 60px;
                /* tamaño más pequeño */
                height: 60px;
                opacity: 0.18;
                /* un poco más visible en móvil */
        }

        .tech-cards-servicios {
                width: calc(100% - 28px);
                grid-template-columns: 1fr;
                padding: 0 0 30px;
        }

        .tech-cards-servicios a {
                width: 100%;
        }

  /*----------------------------FOOTER---------------------------------*/

        .footer-container {
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                text-align: left;
                max-width: 100vw;
                padding: 1rem;
        }

        .footer-column:last-child {
                text-align: right;
        }

}

@media screen and (max-width: 768px) {

        .container-servicios {
                width: 100%;
                margin: 0 auto;
                padding-right: 10px;
                box-sizing: border-box;
        }

                #navegador {
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: fixed;
                background-color: rgba(255, 255, 255, 0.301);
                gap: 0;
        }

        .nav-list a {
                color: #312B25;
        }

        #hamburger {
                display: block;
                margin-right: 5%;
                position: absolute;
                left: 12px;
                top: 50%;
                transform: translateY(-50%);
                background: transparent;
                border: none;
                padding: 10px;
                margin: auto;
                font-size: 1.6rem;
                box-shadow: none;
                z-index: 1201;
                /* por encima del logo y del nav */
        }

        #nav-menu {
                display: none;
                flex-direction: column;
                gap: 0;
                background: var(--primary-color);
                text-align: center;
                margin-top: 60px;
                margin-left: 0px;
                width: 100%;
                max-width: 100%;
                position: absolute;
                left: 0;
                top: 60px;
                z-index: 1001;
        }

        #nav-menu.show {
                display: flex;
                margin-top: 0px;
                position: absolute;
                top: 60px;
                left: 0;
                width: 100%;
                max-width: 100%;
                background: var(--primary-color);
                z-index: 1099;
                padding: 8px 0;
                box-sizing: border-box;

        }

        #nav-menu,
        /* Corregir submenú "al revés" en móvil: forzar lectura LTR y ordenar, SIN FORZAR display */
        #nav-menu *,
        #nav-menu a {
                direction: ltr;
                /* asegurar dirección de texto normal */
                unicode-bidi: embed;
                text-align: left;
        }

        #nav-menu>li {
                display: flex;
                flex-direction: column;
                order: 0;
                width: 100%;
                padding: 12px 20px;
                box-sizing: border-box;
                align-items: stretch;
        }

        #nav-menu>li>#sub-menu {
                order: 1;
                transform: none;
                /* elimina espejado/rotaciones heredadas */
                -webkit-transform: none;
                display: none;
                /* oculto por defecto; se muestra con .open/.show */
                flex-direction: column;
        }

        #nav-menu #sub-menu,
        /* evitar que algún transform global invierta el texto */
        #nav-menu #sub-menu li,
        #nav-menu #sub-menu a {
                transform: none;
                -webkit-transform: none;
        }

        #nav-menu>li>a {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 14px 20px;
                color: var(--second-color);
                width: 100%;
                order: 0;
        }

        #nav-menu #sub-menu {
                /* Submenu dentro del menú hamburguesa */
                display: none;
                /* oculto por defecto */
                flex-direction: column;
                padding-left: 30px;
                background: var(--primary-color);
                /* mismo fondo que el nav */
                color: var(--second-color);
                width: 100%;
        }

        .nav-list.open>#sub-menu,
        /* Mostrar cuando el li padre tiene .open o el submenu tiene .show */
        #nav-menu #sub-menu.show {
                display: flex;
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                background: var(--primary-color);
                color: var(--second-color);
        }

        #nav-menu #sub-menu li {
                /* items del submenu en móvil */
                padding: 20px 24px;
        }

        #nav-menu #sub-menu li a {
                color: var(--second-color);
                display: block;
        }

        .nav-list:hover>#sub-menu {
                /* evita que el hover del desktop interfiera en móvil */
                display: none;
        }

        #logo {
                position: relative;
                left: auto;
                right: 12px;
                top: auto;
                transform: none;
                margin-left: auto;
                margin-right: 0;
                height: 50px;
        }

        #logo-link {
                margin-left: auto;
        }

        .nav-actions {
                margin-left: auto;
                flex: 1;
                justify-content: flex-end;
                gap: 12px;
        }

        .nav-actions .button {
                display: none;
        }

        ul {
                flex-direction: column;
                gap: 0;
        }

        article {
                margin: 0 auto;
        }

        .titulo-wrap {
                padding-top: 200px;
                padding-bottom: 20px;
        }

        #titulo-carpinteria, #titulo-impresion {
                padding-top: 80px;
                font-size: 54px;
                font-family: Roboto Mono, Poppins, sans-serif;
                text-align: center;
        }

        .container-proyectos {
                box-shadow: none;
        }


        .button {
                display: none;
        }
        /* Stack service intro content only on small screens */
        .container-intro {
                flex-direction: column;
                align-items: center;
                gap: 25px;
                text-align: center;
                box-sizing: border-box;
                
                width: 100%;
                max-width: 100%;
        }

        .img-servicio {
                width: 100%;
                max-width: 380px;
                height: auto;
                border-radius: 12px;
                object-fit: cover;
        }

        .texto-servicio {
                width: 100%;
                max-width: 100%;
        }

        .interior-servicio {
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                gap: 3px;
        }

        .interior-servicio a,
        .interior-servicio button {
                margin: 0;
        }

        .button-center-2 {
                flex-direction: column;
                align-items: center;
                gap: 10px;
                width: 100%;
                max-width: 360px;
        }

        .button-center-2 a {
                width: 100%;
        }

        .buttons {
                display: inline-block;
                width: 100%;
                padding: 12px 18px;
                font-size: 1rem;
                white-space: normal;
                text-align: center;
        }

        .button-contactanos {
                margin: 20px auto 0;
                width: 60%;
                max-width: 360px;
                display: flex;
                justify-content: center;
        }

        .button-contactanos a {
                width: 100%;
                text-align: center;
        }

        .titulo-wrap-servicios {
    padding-top: 4%;
    padding-bottom: 2rem;
    width: 100%;
}
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
        #navegador {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 60px;
                position: fixed;
                max-width: 100%;
                left: 0;
                top: 0;
                z-index: 1000;
                background-color: rgba(255, 255, 255, 0.301);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                padding: 0 1.25rem;
        }

        #nav-menu {
                display: none;
                flex-direction: column;
                gap: 0;
                background: var(--primary-color);
                text-align: center;
                margin-top: 60px;
                margin-left: 0px;
                width: 100%;
                max-width: 100%;
                position: absolute;
                left: 0;
                top: 60px;
                z-index: 1001;
                box-sizing: border-box;
        }

        #nav-menu.show {
                display: flex;
                margin-top: 0px;
                position: absolute;
                top: 60px;
                left: 0;
                width: 100%;
                max-width: 100%;
                background: var(--primary-color);
                z-index: 1099;
                padding: 8px 0;
                box-sizing: border-box;
        }

        #nav-menu>li>#sub-menu {
                order: 1;
                transform: none;
                /* elimina espejado/rotaciones heredadas */
                -webkit-transform: none;
                display: none;
                /* oculto por defecto; se muestra con .open/.show */
                flex-direction: column;
        }

        #nav-menu>li>a {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 20px 20px;
                color: var(--second-color);
                width: 100%;
                order: 0;
        }

        #nav-menu #sub-menu {
                /* Submenu dentro del menú hamburguesa */
                display: none;
                /* oculto por defecto */
                flex-direction: column;
                padding-left: 2rem;
                width: 100%;
                box-sizing: border-box;
                text-align: left;
        }

        .nav-list.open>#sub-menu,
        /* Mostrar cuando el li padre tiene .open o el submenu tiene .show */
        #nav-menu #sub-menu.show {
                display: flex;
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                background: var(--primary-color);
                color: var(--second-color);
        }

        #nav-menu #sub-menu li a {
                color: var(--second-color);
                display: block;
        }

        .nav-actions {
                margin-left: auto;
                flex: 1;
                justify-content: flex-end;
                gap: 12px;
        }

        .nav-actions .button {
                display: none;
        }

        #logo-link {
                margin-left: auto;
        }

        #logo {
                position: relative;
                left: auto;
                right: 0;
                top: auto;
                transform: none;
                margin-left: auto;
                height: 50px;
        }

        .button {
                display: none;
        }

        #hamburger {
                display: block;
                margin-left: 0;
                margin-right: 0;
                position: absolute;
                left: 12px;
                right: auto;
                top: 50%;
                transform: translateY(-50%);
                background: transparent;
                border: none;
                padding: 10px;
                margin: auto;
                font-size: 1.6rem;
                box-shadow: none;
                z-index: 1201;
        }

        article {
                padding: 20px;
        }
        .container-servicios {
                width: 100%;
        }

        .container-intro {
                gap: 30px;
                max-width: 90%;
        }

        .img-servicio {
                flex: 0 0 45%;
                max-width: 45%;
        }

        .texto-servicio {
                flex: 0 0 55%;
                max-width: 55%;
        }

        .buttons {
                padding: 8px 16px;
                font-size: 0.9rem;
        }

        .interior-servicio {
                justify-content: flex-start;
                align-items: flex-start;
                margin-top: 18px;
        }

        .button-center-2 {
                justify-content: flex-start;
                align-items: center;
                flex: unset;
                max-width: 100%;
                gap: 12px;
                flex-wrap: wrap;
        }

        .button-center-2 a {
                margin: 0;
        }

        .container-galeria {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                width: 80%;
                padding: 10px;
        }

        .img-galeria-servicio {
                width: 100%;
                height: 100%;
                padding: 0;

        }

        .tech-cards-sostenibilidad-wrapper .imagen-sostenibilidad img {
                width: 100%;
                height: 600px;
                object-fit: cover;
                border-radius: 12px;
        }


        .tech-cards-contacto {
                display: grid;
                width: 90%;
        }


        .contacto-card svg {
                position: absolute;
                width: 80px;
                height: 90px;
                margin-top: 0px;
                right: 30px;
                bottom: 0;
        }



}


/* ------------------------ Ajustes para pantallas grandes (>=1025px) --------------------- */
@media screen and (min-width: 1025px) {

        #navegador {
                display: flex;
                align-items: center;
                justify-content: center;
                /* menú centrado */
                padding: 0 3rem;
                /* espacio lateral para logo y botón */
                height: 60px;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 1000;
                background-color: var(--background-color);
                backdrop-filter: blur(5px);
        }

        #logo {
                position: absolute;
                left: 3%;
                top: 50%;
                transform: translateY(-50%);
                margin: 0;
                height: 50px;
        }

        .button {
                position: absolute;
                right: 3%;
                top: 50%;
                transform: translateY(-50%);
                margin: 0;
                z-index: 1100;
        }

        #nav-menu {
                position: relative;
                margin: 0 auto;
                display: flex;
                justify-content: center;
                align-items: center;
                width: auto;
                background: none;
        }

        #nav-menu,
        #nav-menu ul {
                flex-direction: row;
                gap: 50px;
        }

        #hamburger {
                display: none;
                /* ocultar hamburguesa en desktop */
        }

        .nav-list:hover>#sub-menu,
        .nav-list:hover>.sub-menu,
        .nav-list:hover>.submenu {
                display: block;
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                position: absolute;
                top: 100%;
                left: 50%;
                background-color: #ece7d6;
                transform: translateX(-50%);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                color: var(--second-color);
                border-radius: 6px;
                padding: 0.25rem 0;
                min-width: 180px;
                box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
                z-index: 1100;
                white-space: nowrap;
                text-align: center;
        }

        .nav-list>#sub-menu li,
        .nav-list>.sub-menu li,
        .nav-list>.submenu li {
                display: block;
                padding: 8px;
                text-align: center;
        }

        .nav-list>#sub-menu li a,
        .nav-list>.sub-menu li a,
        .nav-list>.submenu li a {
                color: var(--second-color);
                /* asegurar color oscuro en enlaces */
                display: block;
        }

        /*-----------------------RESPONSIVE-INDEX------------------*/

        article {
                padding: 20px;
        }

        .text-left {
                max-width: 600px;
                padding: 25px;
                padding-top: 0;
                margin-right: 20px;
        }

        .text-left-2 {
                max-width: 600px;
                padding-top: 25px;
                padding: 25px;
        }

        .button-center {
                display: flex;
                justify-content: center;
                align-items: center;
        }

        /*---------------------RESPONSIVE-SERVICIOS--------------------*/


        .texto-servicio-inicio p {
                max-width: 80%;
                margin: auto;

        }

        .tech-cards-servicios {
                grid-template-columns: repeat(2, 1fr);
                padding: 20px;
                width: 80%;
                height: auto;
                margin: auto;
        }

        .tech-cards-servicios img {
                width: 600px;
                height: 300px;
                object-fit: cover;
                display: block;
                margin-left: auto;
                margin-right: auto;
                margin-top: 20px;
        }

        /*---------------------RESPONSIVE CARPINTERIA,CERRAJERIA,CONTRATCT-----------*/

        .container-servicios {
                width: 100%;
                margin: auto;
        }

        .img-servicio {
                display: flex;
                height: 400px;
                margin: 0;
        }

        .texto-servicio {
                display: flex;
                margin: auto;
                flex-direction: column;
                margin-top: 0;
                max-width: 100%;
        }

        .interior-servicio {
                display: flex;
                gap: 50px;
        }


        .container-galeria {
                display: flex;
                grid-template-columns: repeat(4, 1fr);
                margin: auto;
                gap: 1rem;
        }

        .explicacion-servicio {
                height: 300px;
        }




        /*------------------RESPONSIVE SOSTENIBILIDAD-----------------------*/


        .tech-cards-sostenibilidad-wrapper {
                display: grid;
                grid-template-columns: 1fr 420px 1fr;
                grid-auto-rows: minmax(220px, auto);
                gap: 1.5rem;
                align-items: stretch;
                max-width: 1200px;
                margin: 0 auto;
                padding: 2rem;
        }

        /* forzar que la imagen (cualquiera que tenga esta clase) ocupe la columna central y 2 filas */
        .tech-cards-sostenibilidad-wrapper .imagen-sostenibilidad {
                grid-column: 2;
                grid-row: 1 / span 2;
                width: 100%;
                height: 100%;
                align-self: stretch;
                justify-self: center;
                overflow: hidden;
                display: block;
        }

        .tech-cards-sostenibilidad-wrapper .imagen-sostenibilidad img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                border-radius: 12px;
        }



        /*--------------------RESPONSIVE CONTACTO-------------*/

        .tech-cards-contacto {
                grid-template-columns: repeat(3, 1fr);
                width: 80%;
                height: auto;
                box-sizing: border-box;
        }

        .contacto-card {
                width: 100%;
                height: 100%;
                overflow: hidden;
        }

        .contacto-card svg {
                position: absolute;
                width: 80px;
                height: 70px;
                margin: 0;
                flex: 0 0 auto;
                bottom: 2px;
        }


        /*--------------------RESPONSIVE FOOTER---------------------------*/

        .footer-container {
                display: grid;
                grid-template-columns: repeat(1, 1fr);
        }
}



/* Solo en dispositivos que soportan hover (ratón): aplicar las animaciones al :hover */
@media (hover: hover) and (pointer: fine) {
        .button:hover {
                background: transparent;
                color: var(--primary-color);
                box-shadow: 0 0 25px var(--box-shadow);
        }

        .button:hover .star-1 {
                opacity: 1;
                z-index: 2;
                top: 5%;
                left: -35%;
                width: 25px;
                -webkit-filter: drop-shadow(0 0 10px var(--webkit-filter));
                filter: drop-shadow(0 0 10px var(--webkit-filter));
                transform: scale(1);
                transition-delay: 0s;
        }

        .button:hover .star-2 {
                opacity: 1;
                z-index: 2;
                top: -40%;
                left: 16%;
                width: 15px;
                -webkit-filter: drop-shadow(0 0 10px var(--webkit-filter));
                filter: drop-shadow(0 0 10px var(--webkit-filter));
                transform: scale(1);
                transition-delay: 0.05s;
        }

        .button:hover .star-3 {
                opacity: 1;
                z-index: 2;
                top: 95%;
                left: 2%;
                width: 5px;
                -webkit-filter: drop-shadow(0 0 10px var(--webkit-filter));
                filter: drop-shadow(0 0 10px var(--webkit-filter));
                transform: scale(1);
                transition-delay: 0.08s;
        }

        .button:hover .star-5 {
                opacity: 1;
                z-index: 2;
                top: 35%;
                left: 115%;
                width: 25px;
                -webkit-filter: drop-shadow(0 0 10px var(--webkit-filter));
                filter: drop-shadow(0 0 10px var(--webkit-filter));
                transform: scale(1);
                transition-delay: 0.12s;
        }

        .button:hover .star-6 {
                opacity: 1;
                z-index: 2;
                top: 75%;
                left: 60%;
                width: 5px;
                -webkit-filter: drop-shadow(0 0 10px var(--webkit-filter));
                filter: drop-shadow(0 0 10px var(--webkit-filter));
                transform: scale(1);
                transition-delay: 0.16s;
        }
}



/* Asegurar que los bloques principales no se posicionen por encima */
.full-page > * {
  position: relative;
  z-index: 2;
}

/* Espaciado general extra cuando el usuario aumenta el zoom (mejora accesibilidad) */
@media (min-resolution: 2dppx), (max-width: 4000px) {
  body { word-wrap: break-word; }
  h2, h3, p { hyphens: auto; }
}