/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Description: Tema hijo de GeneratePress
Author: NM - BDE
Author URI: https://tusitio.com
Template: generatepress
Version: 1.0.0
*/


/* GLOBAL */
:root {
    /* Tipografía */
    --montserrat: 'Montserrat';
    --cormorant: 'Cormorant';
    --playfair: 'Playfair Display';
   
    /* Colores */
    --primary-color: #301935;  
    --color-white: #fff;   
    --color-black: #000000;
  }

html {
    font-size: 62.5%; 
    overflow: auto;
    scroll-behavior: smooth;
    background: rgb(48, 25, 53); 
    transition: opacity 0.3s ease;
}

::-webkit-scrollbar {
    display: none; 
}


body {
    background-color: var(--color-white); 
    color: var(--color-black);
    font-family: var(--montserrat), sans-serif;
    font-size: 1.6rem; 
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--playfair), serif;
    color: var(--primary-color);
}

.page-id-93 h1 {
    color: var(--color-white);
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    text-decoration: none!important;
}



.old-header {
    display: none;
}


/* ==========================================================================
   UTILIDAD: EFECTO HOVER EN IMÁGENES
   ========================================================================== */

/*
 * Clase de utilidad: 'hover-effect-image'
 * Aplicar esta clase a cualquier bloque Imagen (gb-image) o a un contenedor
 * que envuelva una imagen para añadir una transición suave al pasar el ratón.
*/
.hover-effect-image {
    transition: all 0.3s ease-out;
}

.hover-effect-image:hover {
    transform: scale(1.03) translateY(-5px);
    /* box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); */
}


/* ===============================
   HEADER 
   =============================== */

/* 
.site-header-custom {
    background: var(--primary-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 2rem;
}

.site-header-custom .gb-grid-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;            
}


.site-header-custom .gb-grid-column {
    width: auto !important;     
    flex: 0 1 auto !important; 
}


 */




/* ==========================================================================
   HEADER - AJUSTE ESTRUCTURAL FINAL
   ========================================================================== */

/* 
@media (min-width: 769px) {

    
    .site-header-custom > .gb-grid-wrapper {
        width: 100%;
    }
    
    
    .site-header-custom .gb-grid-column:last-child {
        flex-grow: 1;
    }

    
    .site-header-custom .main-navigation {
        width: 100%;
    }

    
    .site-header-custom .main-navigation ul {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
    }
}







.site-header-custom img {
    max-width: 180px;
}

.site-header-custom .menu-toggle {
    color: var(--color-white);
}


@media (min-width: 769px) {

    .site-header-custom img {
        max-width: 220px; 
    }

    
    .site-header-custom .main-navigation .main-nav > ul > li > a {
        color: var(--color-white);
        font-family: var(--montserrat), sans-serif;
        text-transform: uppercase;
        font-size: 1.6rem;
    }
} */







/************/
/*  HEADER  */
/************/

header {
    background: transparent; 
    /* padding: 1rem 0;  */
    /* box-shadow: 0px 0px 20px rgba(0,0,0,0.25); */
}



#menu-menu-principal {
    margin: 2.5rem 15rem 0 0;
}


img.logo {
    width: 20rem;
    margin-left: 8rem;
}


/*    Header-top     */
/*-------------------*/

.top-header-prom {
    background-color: var(--secondary-color);
    color: var(--color-black);
    line-height: var(--top-header-nav);
    vertical-align: middle;
    height: var(--top-header-nav); 
     
}


.top-header-prom .h__prom__img {
    position: relative;
    display: flex;
    align-content: flex-end;
    align-items: flex-end;
}



.top-header-prom .h__prom__img img {
    margin: 0 auto; 
    height: 65%;
}


.h__prom__text h2 {
    position: relative;
    font-size: 2rem;
    font-weight: 500;
    text-align: right;
    margin: 2rem 2rem;
    width: 26rem;
    left: -100%;
}                    


.h__prom__text .instructive__text {
    font-size: 1.2rem;
    line-height: 1.4rem;
    text-align: right;
    margin: 2rem 2rem 2rem 0;
}


.h__prom__text a {
    margin: 0 0 2rem 0;   
}


.nm__button {
    display: flex;
    background-color: var(--color-white);
    color: var(--color-black);
    border: solid 1px var(--tertiary-color);
    align-items: center;
}





/*    Navigation     */
/*-------------------*/


nav {
    position: fixed;
    height: 10rem;
    width: 100%; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    /* padding-top: 4rem; */
    z-index: 99999;
}

.nav {
    flex-wrap: nowrap!important;
}

.logo-container {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
    z-index: 1000010;
}

.logo {
    margin-left: 17px;
    height: auto;
    z-index: 100010;
    transition: all 0.5s;
}


.page-scrolled {
    background-color: #30193567;
    backdrop-filter: blur(10px);
}

.page-scrolled .nav-list-2 li a {
    color: var(--color-white);
}


.black-color-links ul li a {
    color: var(--color-black);
}



.nav-list .sub-menu li a {
    font-family: var(--tipo-parrafo);
    font-size: 1.2rem;
    color: var(--color-white);
    font-weight: 500;
    font-style: italic;
}

.page-scrolled .hamburger-btn {   
    border: solid 0.1rem var(--color-white);
}

.page-scrolled .hamburger-btn span {
    background-color: var(--color-white);   
}



.nav-list-2 {
    display: none;
}


/*  Hamburguer Menu  */
/*-------------------*/

.hamburger__fixed {
    /* position:fixed;  */
    /* top: 3rem;  */
    right: 0;
}

.hamburger-btn {
    width: 40px;
    margin-right: 40px;
    cursor: pointer;
    z-index: 1000010;
    height: 4rem;
    /* background-color: var(--primary-w-opacity); */
    border: solid 0.1rem var(--color-white);

}

.hamburger-btn span {
    display: block;
    width: 80%;
    height: 2px;
    margin-right: 40px;
    background-color: var(--color-white);
    border-radius: 2px;
    -webkit-transition: background-color .15s ease-in-out;
    -o-transition: background-color .15s ease-in-out;
    transition: background-color .15s ease-in-out;
    transform-origin: -16px 100%;
    transition: all 300ms;
    margin: auto;
   
}


.page-scrolled .hamburger-btn span {
    transform-origin: -14px 100%;
}



.page-scrolled .activeline1__bars-menu {
    transform: rotate(45deg) translate(4px, -8px);
}


.page-scrolled .activeline3__bars-menu {
    transform: rotate(-45deg) translate(-14px, 28px);
}



/* 
.page-scrolled .hamburger-btn span {
    background-color: var(--color-black);
} */

/* Cambio de color en páginas con fondo blanco */
/* 
.hamburger-btn.ch__color span {
    background-color: var(--quaternary-color);
} */

/* 
.hamburger-btn span:nth-child(2) {
    margin: 6px 0;
}  */

/* Only With Two Lines */

span.line2__bars-menu {
    opacity: 0;
    margin-left: -30px;
}

span.line1__bars-menu {
    margin-bottom: 0.6rem;
    margin-top: 1.3rem;
}



.activeline1__bars-menu {
    transform: rotate(45deg) translate(3px, -9px);
    margin-top: 0!important;
}

.activeline2__bars-menu {
    opacity: 0;
    margin-left: -30px;
}

.activeline3__bars-menu {
    transform: rotate(-45deg) translate(-15px, 28px);
}

.nav-list {
    position: fixed;
    width: 100%;
    height: 0vh;
    top: 0px;
    background-color: transparent;
    /* float: right; */
    text-align: left;
    transition: all .5s;
    z-index: 99999;
    padding-left: 0!important;
}


.nav-list li { 
    opacity: 0;
    display: none;
    /* line-height: 10px; */
    margin: 1.8rem 0 0 10%;
    transition: all 0.5s; 
}

.nav-list .nm__container__navlist { 
    opacity: 0;
    display: none;
    margin: 1.8rem 0 0 10%;
    transition: all 0.5s;
}

.nav-list .left__col { 
    opacity: 0;
    display: none;
    transition: all 0.5s;
}




.sub-menu li {
    margin: 0.5rem 0 0 0;
}

.nav-list .first-item {
    margin-top: 12rem; 
}


.nav-list li a {
    font-family: var(--tipo-subencabezado);
    width: max-content; /* Hago que el ancho de la etiqueta sea igual al contenido de la misma */ 
    color: var(--color-black-light);
    font-size: 1.5rem;    
    font-weight: 500;
    letter-spacing: 0.3rem;
    text-transform: uppercase;
    --clippy: polygon(0 0, 0 0, 0 100%, 0 100%);
}



.nav-list li a.active, .nav-list li a:hover {
    color: var(--main-color);
    transition: 0.5s;
    --clippy: polygon(0 0, 100% 0, 100% 100%, 0 100%);
} 

.nav-list li a:after {
    content:"";
    display: block;
    background: var(--color-white);
    width: 100%;
    margin-top: 3px;
    height: 1px;
    clip-path: var(--clippy);
    transition: clip-path .5s;
}

.nav-list .sub-menu {
    display: flex;
    flex-direction: column;
}




.nav__label {
    display: block;
    font-size: 30px;
    color: var(--color-white);
    float: right;
    line-height: 75px;
    margin-right: 40px;
    cursor: pointer;
}

#check {
    display: none;
}

#check:checked ~ .nav-list {
    height: 100vh; 
    z-index: 999999; 
    background-color: var(--primary-color); 
    margin-left: 0!important;
}


#check:checked ~ .nav-list .col__menu__list {
    padding-top: 14rem;
}



#check:checked ~ .nav-list li {
    opacity: 1;
    display: block;
}


#check:checked ~ .nav-list .nm__container__navlist {
    opacity: 1;
    display: block;
}

#check:checked ~ .nav-list .left__col {
    opacity: 1;
    display: block;
}


.nav-list .nm__container__navlist .div__w__img,
.nav-list .nm__container__navlist .who__i__am,
.nav-list li {
    -webkit-animation: 0.5s ease 0s normal forwards 1 fadein;
    animation: 0.5s ease 0s normal forwards 1 fadein;
}


@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}


#check:checked ~ .nav-list li a {
    color: var(--color-white);
}


#check:checked ~ .nav-list .sub-menu li a {
    font-family: var(--tipo-parrafo);
    font-size: 1.2rem;
    color: var(--color-white);
    font-weight: 500;
    font-style: italic;
}

#check:checked ~ .nav-list .sub-menu li:first-child a {
    margin-top: 1rem;
}

#check:checked ~ .nav-list .sub-menu li:last-child a {
    margin-bottom: 1rem;
}

#check:checked ~ .hamburger-btn {
    border: solid 0.1rem var(--color-white); 
}


#check:checked ~ .hamburger-btn span {
    background-color: var(--color-white);
}



#check:checked ~ .container-totop .nm-icon svg {
    fill: rgb(255, 255, 255); 
}


#check:checked ~ .container-totop #top p {
    color: var(--color-white);
}

#check:checked ~ .container-totop a {
    color: var(--color-white);
}



.checkbtn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-red);
    border-radius: 2px;
    -webkit-transition: background-color .15s ease-in-out;
    -o-transition: background-color .15s ease-in-out;
    transition: background-color .15s ease-in-out;
    transform-origin: 0px 100%;
    transition: all 300ms;
    z-index: 10000;
} 

.checkbtn span:nth-child(2) {
    margin: 6px 0;
} 


.ltk__container {
    margin: auto 2rem;
}








































/* ==========================================================================
   HOME - SECCIÓN HÉROE
   ========================================================================== */


.home-hero {
    background-image: linear-gradient(rgba(48, 25, 53, 0.5), rgba(48, 25, 53, 0.5)), url('https://eurocreastudios.es/wp-content/uploads/2025/09/IMG-20250413-WA0033.jpg');
    background-size: cover;
    background-position: center center;
    padding: 15rem 2rem; 
    text-align: center;
}

.home-hero h1 {
    color: var(--color-white);
    font-family: var(--playfair), serif; 
    font-size: 4rem; 
    line-height: 1.2;
    margin-bottom: 2rem;
}

.home-hero .gb-button {
    background-color: var(--primary-color);
    color: var(--color-white);
    font-family: var(--montserrat), sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    padding: 1.5rem 3rem;
    border-radius: 5px; 
    transition: transform 0.2s ease;
}

.home-hero .gb-button:hover {
    transform: scale(1.05); 
}



@media (min-width: 769px) {
    .home-hero {
        padding: 25rem 2rem;
        text-align: left; 
    }

    .home-hero h1 {
        font-size: 7rem; 
    }
}



/* ==========================================================================
   HOME - SECCIÓN SERVICIOS PRINCIPALES 
   ========================================================================== */


.home-categories {   
    padding: 6rem 2rem;
    background-color: #f9f9f9;
}

.section-title {
    font-family: var(--montserrat), sans-serif; 
    font-size: 3rem; 
    font-weight: bold;
    text-transform: uppercase; 
    letter-spacing: 4px;       
    color: var(--primary-color);
    padding-top: 1.5rem;      
    margin-bottom: 4rem;
    position: relative; 
    text-align: left;   
    
    
    text-align: center;
}

.section-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%; 
    transform: translateX(-50%); 
    width: 60px;  
    height: 3px; 
    background-color: var(--primary-color);
}

@media (min-width: 769px) {
    
    .section-title {
        text-align: left;
    }

    
    .section-title::before {
        left: 0;
        transform: none; 
    }
}




.cat-item {
    background-size: cover;
    background-position: center center;
    padding: 8rem 2rem 2rem 2rem;
    min-height: 250px;
    display: flex;
    align-items: flex-end;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.cat-item:hover {
    transform: translateY(-5px);
}

.cat-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
    z-index: 1;
}

.cat-item h3 {
    color: var(--color-white);
    font-family: var(--montserrat), sans-serif;
    font-size: 2rem;
    z-index: 2;
    position: relative;
}


.cat-item-1 {
    background-image: url('https://eurocreastudios.es/wp-content/uploads/2025/09/elbunker.jpg');
}

.cat-item-2 {
    background-image: url('https://eurocreastudios.es/wp-content/uploads/2025/07/3d1.jpg');
}

.cat-item-3 {
    background-image: url('https://eurocreastudios.es/wp-content/uploads/2025/07/P1000865.jpg');
}



@media (min-width: 769px) {
    .home-categories {
        padding: 10rem 2rem;
    }

    .home-categories .gb-grid-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
    }
}



@media (min-width: 1600px) {
    .cat-item {
        min-height: 400px; 
    }
}




/* ==========================================================================
   HOME - SECCIÓN PROCESO
   ========================================================================== */


.home-process {
    padding: 6rem 2rem;
}

.home-process .process-image-col {
    margin-bottom: 4rem;
}


.home-process .process-text-col p {
    font-size: 1.7rem;
    line-height: 1.8;
    margin-bottom: 3rem;
}

.home-process .process-step {
    margin-bottom: 2rem;
}

.home-process .process-step h4 {
    font-family: var(--montserrat), sans-serif;
    font-weight: bold;
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}





.home-process .process-image-col figure {
    padding: 0 5rem;
}


.home-process .process-image-col img {
    border-radius: 65% 35% 55% 45% / 60% 70% 30% 40%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-out;
}

.home-process .process-image-col img:hover {
    transform: scale(1.03); 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}










@media (min-width: 769px) {
    .home-process {
        padding: 10rem 2rem;
    }
    
    .home-process .gb-grid-wrapper {
        display: flex;
        align-items: center; 
        gap: 4rem;
    }

    .home-process .process-image-col {
        margin-bottom: 0;
        flex: 0 0 40%; 
    }

    .home-process .process-text-col {
        flex: 1; 
        position: relative;
        z-index: 1; 
        padding: 2rem 12rem; 
    }

    .home-process .process-text-col::before {
        content: '';
        position: absolute;
        z-index: -1; 
        top: -20px;     
        left: -40px;   
        width: 115%;
        height: 100%;
        background-color: var(--primary-color);
        opacity: 0.05;  
        border-radius: 40% 60% 60% 40% / 70% 50% 50% 30%; 
        transform: rotate(-15deg);
    }






    .process-image-col {
        position: relative;
    }

    .process-image-col img {
        position: relative;
        z-index: 2;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .process-image-col::before {
        content: '';
        position: absolute;
        z-index: 1;
        top: -30px;
        left: -30px;
        width: 100%;
        height: 100%;
        background-color: var(--primary-color);
        border-radius: 65% 35% 55% 45% / 60% 70% 30% 40%;
        transform: rotate(10deg);
        opacity: 1; 
    }



}


/* ==========================================================================
   HOME - SECCIÓN PROYECTOS DESTACADOS
   ========================================================================== */

/* ESTILOS BASE (MÓVIL) */
.home-projects {
    padding: 6rem 2rem;
    background-color: #f9f9f9; 
}

.project-card {
    background-color: #fdfdfd;
    border-radius: 5px;
    overflow: hidden; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
    transition: all 0.3s ease;
}


.project-card .gb-image {
    height: 650px; 
    overflow: hidden; 
}

.project-card .gb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}



.project-card .gb-headline,
.project-card p {
    padding: 0 2rem; 
}

.project-card .gb-headline {
    font-family: var(--montserrat), sans-serif; /* Fuente moderna y consistente */
    text-transform: uppercase;    
    letter-spacing: 1.5px;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    padding-top: 2rem;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--primary-color);
}

.project-card p {
     font-family: var(--cormorant), serif; /* Fuente con serifa para un toque elegante */
    font-size: 1.7rem;
    color: #666;
    padding-bottom: 0; /* Quitamos el padding de aquí para que lo controle el contenedor */
}







@media (min-width: 769px) {
    .home-projects {
        padding: 10rem 2rem;
    }
    
    .home-projects .gb-grid-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 3rem;
    }

    .project-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 25px rgba(0,0,0,0.1);
    }
}



/* ==========================================================================
   HOME - SECCIÓN CTA
   ========================================================================== */

.home-cta {
    background-color: var(--primary-color);
    padding: 6rem 2rem;
    text-align: center;
}

.home-cta h2 {
    font-family: var(--playfair), serif;
    color: var(--color-white);
    font-size: 3.5rem;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.home-cta p {
    color: var(--color-white);
    opacity: 0.9; 
    font-size: 1.7rem;
    line-height: 1.8;
    max-width: 650px; 
    margin: 0 auto 3rem auto; 
}

.home-cta .gb-button {
    background-color: var(--color-white);
    color: var(--primary-color);
    font-family: var(--montserrat), sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.6rem;
    padding: 1.5rem 4rem;
    border-radius: 5px;
    transition: all 0.2s ease;
    margin: 0 auto;
}

.home-cta .gb-button:hover {
    transform: scale(1.05);
    background-color: var(--color-white);
    color: var(--primary-color);
}


@media (min-width: 769px) {
    .home-cta {
        padding: 10rem 2rem;
    }

    .home-cta h2 {
        font-size: 4.5rem;
    }
}







/* ==========================================================================
   FOOTER 
   ========================================================================== */

.site-footer-custom {
    background-color: #1a1a1a;
    color: #a0a0a0;
    padding: 8rem 2rem 2rem 2rem; 
    font-size: 1.5rem;
}

.site-footer-custom .gb-image {
    max-width: 180px; 
    margin-bottom: 2rem;
}

.site-footer-custom h5 {
    color: var(--color-white);
    font-family: var(--montserrat), sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.4rem; 
    margin-bottom: 2rem; 
}

.site-footer-custom .main-navigation ul li {
    display: flex; 
    margin-bottom: 1rem; 
}

.site-footer-custom h3 {
    color: var(--color-white);
}


.site-footer-custom a {
    color: #a0a0a0;
    text-decoration: none;
    transition: color 0.2s ease;
}
.site-footer-custom a:hover {
    color: var(--color-white);
}

.site-footer-custom p {
    line-height: 1.7;
    margin-bottom: 0;
}

.sub-footer {
    border-top: 1px solid #333;
    padding-top: 2rem;
    margin-top: 0rem;
    text-align: center;
    font-size: 1.4rem;
}


.ktd-logo img {
    height: 5rem;
    width: auto;
    margin-top: 10rem;
    margin-bottom: 0rem;
}


.footer-legal-menu ul li {
    display: inline-block;
    margin-bottom: 0; 
}


.footer-legal-menu ul {
    gap: 0;
}




.footer-legal-menu ul li:not(:last-child)::after {
    content: '|';
    color: #a0a0a0; 
    margin-left: 10px;  
    margin-right: 10px; 
}








.copyright__row {
    padding: 0 10%;
}




@media (min-width: 769px) {
    .site-footer-custom .gb-grid-wrapper {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr; 
        gap: 5rem;
    }
}




















/* **************************************************************************************************************************************************************************************** */




#page {
    max-width: 100vw!important;
    width: 100vw !important;
    margin: 0;
    padding-right: 0;
    padding-left: 0; 
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 100vw!important;
    width: 100vw !important;
    margin: 0;
    padding-right: 0;
    padding-left: 0;   
}

.ecs__body .site-content {
    display: block;
}

/* HEADER */

.ecs__body .gb-element-ee641f49 {
    background-color: transparent;
    position: fixed;
    width: 100vw;
    z-index: 999;
    align-items: center;
}

.ecs__body .gb-element-ee641f49 img.wp-image-77 {
    margin-left: 1rem;
}


/* Navigation */

.ecs__body .main-navigation a,
.ecs__body .main-navigation span {
    font-family: var(--montserrat)!important;
}

.ecs__body .main-navigation .main-nav ul li a, .ecs__body .main-navigation .menu-toggle, .ecs__body .main-navigation .menu-bar-items {
    color: var(--color-white);
}

.ecs__body .main-navigation .main-nav ul li a:hover,
.ecs__body .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a, 
.ecs__body .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]):hover > a {
    color: grey!important;
}



.ecs__body  .main-navigation ul ul {
    background-color: transparent;
}


/* Special menu items */
.rrss-container,
.language-switcher-container {
    display: flex;
    gap: 15px; /* Espacio entre iconos */
    margin-left: 20px; /* Separación del resto del menú */
}

.rrss-container,
.language-switcher-container {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    order: 99; /* Coloca este contenedor al final */
    padding: 10px 0;
}

.main-navigation.toggled .main-nav .rrss-container li,
.main-navigation.toggled .main-nav .language-switcher-container li {
    width: 1rem;
}

.main-navigation.toggled .main-nav .rrss-container li a,
.main-navigation.toggled .main-nav .language-switcher-container li a {
    width: 1rem;
}

#menu-menu-principal {
    /* flex-wrap: wrap; */
}
/* End Special menu items */


.mobile-menu-open .ecs__body .main-navigation .menu-toggle {
    background-color: var(--primary-color);
}

.mobile-menu-open .ecs__body div#primary-menu {
    background-color: rgb(48, 25, 53, 0.5);
}

.mobile-menu-open .ecs__body .main-navigation .main-nav ul li a {
    line-height: 35px;
}


/* HOME */
/* Hero */

.ecs__body ul.slides li img {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    object-fit: cover;
}

.ecs__body .metaslider.ms-theme-blend .flexslider ul.slides .caption-wrap {
    position: absolute;
    top: 50%; 
    left: 1rem;      
    width: 95%; 
    text-align: left; 
    z-index: 2;    
}

.ecs__body #metaslider-id-52 .flexslider .caption-wrap {
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-color: var(--primary-color);
    border: solid 0.1rem var(--color-white);
    border-radius: 0.2rem;
}

.ecs__body #metaslider-id-52 #metaslider_52 .flex-control-paging a {
    font-family: var(--montserrat)!important;
}

.ecs__body .metaslider.ms-theme-blend .flexslider ul.slides .flex-active-slide .caption-wrap {
    transform: translateY(-50%);
}

.ecs__body .metaslider.ms-theme-blend .flexslider ul.slides .caption-wrap .caption {
    position: relative;
    top: 3rem;
    bottom: 0;
    margin-left: 0rem;
    text-align: left;
}

.ecs__body .flexslider  .caption h1 {
    font-size: 2.5em; /* Ajusta el tamaño de la fuente */
    color: white; /* Asegúrate de que el texto sea visible */
    margin: 0;
}


/* Section 2 */

.prl-js {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }
  
.prl-bckg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%; /* un poco más alto para cubrir el movimiento */
    background-image: url('./assets/img/P1010251-1.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
    transform: translateY(0);
    will-change: transform;
    transition: transform 0.05s ease-out;
}


  .texto-con-margen {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);   
    z-index: 1;
    max-width: 290px;
    padding: 20px;
    background-color: rgba(48, 25, 53, 0.5);
    color: white;
    border-radius: 10px;
   
}



h2 {
    margin-bottom: 10px;
    font-size: 2em;
}

p {
    font-size: 1.2em;
}



/* Servicios - Home */


.rel__servicios {
    margin: 8rem auto 5rem auto;
}



.content-wrap {
    margin-bottom: 4rem;
}

.container-servicios {
    margin: 0 3rem;
}

.container-servicios h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    text-align: center;
}


.content-wrap {
    background-color: rgba(0, 0, 0, 0.5); 
    padding: 2rem 2rem 1rem 2rem;
    border-radius: 10px;
}    


.service-card {   
    color: white;
    border-radius: 10px;
    text-align: center;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}



.service-card:hover {
    transform: scale(1.05); /* Efecto al pasar el ratón */
}

.servicio-bg {
    background-size: cover;
    background-position: center;
    height: 200px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.service-card h4 {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.service-card p {
    font-size: 1.8rem;
    padding: 0 2rem
}





/* PAGE - PROCESO */

/* begin-old proceso page whit php template */

/* .pg__proceso {
    color: var(--color-white);
}

.pg__proceso .hero-header {
    position: relative;
    height: 550px;
    width: 100%;
    background-image: url('./assets/img/mascotas-publicitaria-01.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: white;
    overflow: hidden;
    padding-left: 5vw;
  }


  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 17, 17, 0.6); 
    z-index: 1;
  }
  
  .hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    max-width: 800px;
    padding: 2rem;
  }
  
  .hero-content h1 {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #fff;
  }

  .hero-content p {
    font-size: 2rem;
    color: #ffffff;
} */

/* END-old proceso page whit php template */


/* ==========================================================================
   PÁGINA PROCESO - SECCIÓN HÉROE
   ========================================================================== */

.process-hero {
    /* Pega aquí la URL de tu nueva imagen de fondo */
    background-image: linear-gradient(rgba(48, 25, 53, 0.7), rgba(48, 25, 53, 0.7)), url('https://eurocreastudios.es/wp-content/uploads/2025/09/3-scaled.jpg');
    background-size: cover;
    background-position: center center;
    padding: 15rem 2rem;
    text-align: center;
}

.process-hero h1 {
    color: var(--color-white);
    font-family: var(--playfair), serif;
    font-size: 4rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.process-hero p {
    color: var(--color-white);
    font-size: 1.8rem;
    max-width: 600px; /* Para que el subtítulo no sea demasiado ancho */
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   PÁGINA PROCESO - SECCIÓN INTRODUCTORIA
   ========================================================================== */

/* ESTILOS PARA ESCRITORIO (A PARTIR DE 769PX) */
@media (min-width: 769px) {
    .process-hero {
        padding: 20rem 2rem;
    }

    .process-hero h1 {
        font-size: 7rem;
    }
}


/* ESTILOS BASE (MÓVIL Y ESCRITORIO) */

.process-intro {
    padding: 8rem 2rem; /* Espaciado vertical y horizontal */
    text-align: center; /* Centrado del texto */
}

/* Título de la introducción */
.process-intro h2 {
    font-family: var(--playfair), serif;
    font-size: 3.5rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
}

/* Párrafo de la introducción */
.process-intro p {
    font-size: 1.8rem;
    line-height: 1.9;
    max-width: 750px; /* Limita el ancho para facilitar la lectura en pantallas grandes */
    margin-left: auto;  /* Centra el bloque de párrafo */
    margin-right: auto; /* Centra el bloque de párrafo */
}


/* ESTILOS PARA ESCRITORIO (A PARTIR DE 769PX) */
@media (min-width: 769px) {
    .process-intro {
        padding: 12rem 2rem;
    }

    .process-intro h2 {
        font-size: 4.5rem;
    }
}



/* ==========================================================================
   PÁGINA PROCESO - SECCIONES DE PASOS
   ========================================================================== */

/* ESTILOS BASE (MÓVIL) */

.process-step-section {
    padding: 6rem 2rem;
}

.process-step-text h3 {
    font-family: var(--playfair), serif;
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
}

.process-step-text p {
    font-size: 1.7rem;
    line-height: 1.8;
}

.process-step-images {
    margin-top: 4rem; /* Espacio entre texto e imágenes en móvil */
}

/* Las imágenes dentro de la rejilla de imágenes */
.process-step-images .gb-grid-wrapper {
    gap: 1rem;
}




/* Aplicamos estas reglas SOLO en pantallas de hasta 768px */
@media (max-width: 768px) {

    /* 1. Contenedor de las imágenes en móvil */
    .process-step-images .gb-image {
        max-height: 400px; /* <-- ALTURA MÁXIMA. Se puede ajustar este valor. */
        margin-left: auto;
        margin-right: auto;
    }

    /* 2. Estilo para la imagen dentro del contenedor */
    .process-step-images .gb-image img {
        /* Aseguramos que la imagen se ajuste bien a la altura máxima sin deformarse */
        width: auto;
        height: 100%;
        object-fit: cover;
    }

} /* Fin de la media query para móvil */




/* ESTILOS PARA ESCRITORIO (A PARTIR DE 769PX) */
@media (min-width: 769px) {

    .process-step-section {
        padding: 8rem 2rem;
    }

    /* Contenedor principal de la rejilla */
    .process-step-section > .gb-grid-wrapper {
        display: flex;
        align-items: center;
        gap: 5rem;
    }

    /* Le damos la forma orgánica a las imágenes */
    .process-step-images img {
        border-radius: 65% 35% 55% 45% / 60% 70% 30% 40%;
    }

    /* Añadimos la forma de fondo sutil al texto */
    .process-step-text {
        position: relative;
        z-index: 1;
    }

    .process-step-text::before {
        content: '';
        position: absolute;
        z-index: -1;
        top: -20px;
        left: -40px;
        width: 115%;
        height: 100%;
        background-color: var(--primary-color);
        opacity: 0.05;
        border-radius: 40% 60% 60% 40% / 70% 50% 50% 30%;
        transform: rotate(-15deg);
    }

    /* Aplicamos la inversión de orden a la sección con la clase .is-reversed */
    .process-step-section.is-reversed > .gb-grid-wrapper {
        flex-direction: row-reverse; /* ¡Esta es la propiedad clave para invertir el orden! */
    }

    /* Ajustamos la forma de fondo para la versión invertida */
    .process-step-section.is-reversed .process-step-text::before {
        left: auto; /* Anulamos el 'left' */
        right: -40px; /* Lo posicionamos a la derecha */
        transform: rotate(15deg); /* Invertimos la rotación para variar */
    }
}








  
/* intro-section */

.intro-section {
  background-color: #1a1a1a;
  padding: 4rem 2rem;
  text-align: center;
  color: #eee;
}

  
  .intro-content {
    max-width: 700px;
    margin: 0 auto;
  }
  
  .intro-section h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #fff;
  }


  .intro-section p {
    font-size: 2rem;
    color: #ffffff;
}

  /* step-section */

  .step-section {
    background-color: #121212;
    padding: 5rem 2rem;
    color: #f0f0f0;
  }

  .step-content {
    max-width: 1200px;
    margin: 0 auto;
  }
  

  
.step-text h3 {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 1.5rem;
}


.step-text p {
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 2.4rem;
}




.step-text ul li {
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 2.4rem;
}

.step-images {
  padding: 0 1rem;
}

.step-images img {
    width: 100%;
    border-radius: 0.5rem;
  object-fit: cover;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}


/* PAGE CONTACTO PIDE PRESUPUESTO */


.pg__contacto h5,
.pg__contacto span {
    font-family: var(--montserrat);
}



/* Hero Header */



.pg__contacto .hero-header {
    position: relative;
    height: 550px;
    width: 100%;
    background-image: url('./assets/img/escenografia.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: white;
    overflow: hidden;
    padding-left: 5vw;
  }





/* Contact Container */

/* Map Styles */
.map-wrapper {
    position: relative;
    width: 100%;
    height: 750px;
    overflow: hidden;
}

.map-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}


.contact-container {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.contact-column {
    padding: 0 15px;
    box-sizing: border-box;
}

.map-column {
    width: 50%;
}

.info-column {
    width: 50%;
    display: flex;
    align-items: center;
}

.contact-info {
    padding: 40px;
}

.contact-info h3 {
    font-size: 28px;
    margin-bottom: 20px;
}

.detail-label {
   
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-details h5 {
    margin: 30px 0 10px;
}

.contact-details p {
    margin: 0;
    font-size: 16px;
}

.contact-details a {
    
    text-decoration: none;
}

.contact-cta {
    margin-top: 30px;
}

.button {
    display: inline-block;
    padding: 12px 25px;
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.button:hover {
    background: #fff;
    color: #000;
}

/* Instagram CTA */
.instagram-cta .highlighted-text {
    margin-bottom: 20px;
}

.instagram-link .link {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

.instagram-link .link:hover {
    color: #ccc;
    border-color: #ccc;
}

/* Responsive */
@media (max-width: 768px) {
    .map-column,
    .info-column {
        width: 100%;
    }
        
    .map-wrapper {
        height: 400px;
    }
    
    .info-column {
        padding-top: 40px;
    }
}























/* LEGAL PAGES */


.cms-content {
    padding: 35% 3% 0% 3%;
}








/* FOOTER */


/* .site-footer h2 {
    font-size: 1.5rem;
}


.site-footer p {
    font-family: var(--montserrat);
    font-size: 1.2rem; 
}

.site-footer .widget ul li ul {
    margin-top: 2rem;
}


.site-footer .footer-widgets .widget.widget_text {
    margin-bottom: 1rem;
}


.site-footer .widget ul li,
.site-footer .widget ul li.menu-item-has-children {
    margin-bottom: 2rem;
    line-height: 0rem;
}

.site-footer a {
    font-family: var(--montserrat);
    color: var(--color-white);
    text-decoration: none;
    font-size: 1.2rem; 
}

.site-footer a:hover {
    color: grey;
}



.site-footer,
.footer-widgets {
    background-color: var(--primary-color);
    color: var(--color-white);
}


.menu-menu-paginas-legales-container {
    margin-top: 3rem;
}

 */





/*******************************************************
 *                         360 px
 *******************************************************/ 
 @media only screen and (min-width: 22.5em) {           
}

/*******************************************************
 *                         480 px
 *******************************************************/   
 @media only screen and (min-width: 30em) {      
    

    /* HEADER */

    .ecs__body .gb-element-ee641f49 img.wp-image-77 {
        margin-left: 3rem;
    }



    /* HOME */

    /* Section 2 */

    
  .texto-con-margen {
    max-width: 450px;    
}





/* LEGAL PAGES */


.cms-content {
    padding: 28% 5% 0% 5%;
}





 }

/*******************************************************
 *                         600 px
 *******************************************************/ 
@media only screen and (min-width: 37.5em) {      
    
    





    /* HOME */

    /* Hero */

    .ecs__body .metaslider.ms-theme-blend .flexslider ul.slides .caption-wrap .caption {
       
        margin-left: 1rem;
    }


    /* Section 2 */

    
    .texto-con-margen {
        max-width: 550px;    
    }

    

    

/* Servicios - Home */


.container-servicios {
    margin: 0 6rem;
}
    


}

/*******************************************************
 *                         768 px
 *******************************************************/ 
@media (min-width: 48em) {     



    /* 1. Usamos flex en el contenedor principal de la rejilla */
    .site-header-custom .gb-grid-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
    }
    
    /* 2. Le decimos al contenedor del logo (el primer hijo) que no se expanda */
    .site-header-custom .gb-grid-wrapper > div:first-child {
        flex-shrink: 0;
    }
    
    /* 3. Le decimos al contenedor del menú (el segundo hijo) que ocupe el resto */
    .site-header-custom .gb-grid-wrapper > div:last-child {
        flex-grow: 1;
    }
    
    /* 4. Usamos flex DENTRO del bloque de navegación para alinear su contenido */
    .site-header-custom .main-navigation,
    .site-header-custom .main-navigation .wp-block-navigation__container {
        display: flex;
        justify-content: flex-end; /* Alinea todo a la derecha */
        align-items: center;
        width: 100%;
        gap: 1.5rem; /* Espacio entre el menú principal, las redes y los idiomas */
    }
    
    /* 5. Anulamos el ancho fijo del language-switcher para que ocupe lo necesario */
    .site-header-custom .language-switcher-container {
        width: auto !important;
    }

    /* 6. Nos aseguramos de que el UL principal también sea flexible */
    .site-header-custom .wp-block-navigation__container > ul {
        display: flex;
        align-items: center;
    }






/* HOME */
/* Hero */

.ecs__body .metaslider.ms-theme-blend .flexslider ul.slides .caption-wrap {
    width: 75%;
}




/* Services-Home */


.container-servicios {
    margin: 0 1rem;
}
    




/* LEGAL PAGES */


.cms-content {
    padding: 20% 5% 0% 5%;
}






/* footer */



.ktd-logo img {
    height: 6.5rem;
}

.inside-footer-widgets {
    flex-direction: row;
}


}



/*******************************************************
 *                         960 px
 *******************************************************/ 
@media (min-width: 60em) {      
    

    /* HEADER */
    
    .ecs__body .gb-element-ee641f49 img.wp-image-77 {
        margin-left: 5rem;
    }
    

    /* Nav */

    
    /* .ecs__body .main-navigation .main-nav li {
        padding: 0;
    }


    .ecs__body .main-navigation .main-nav li a {
        padding: 0 1rem;
    }


    .ecs__body .gb-element-0f6e1a69 {
        padding-right: 2rem;
    }


    .ecs__body .main-nav ul li a span {
        padding-right: 0.5rem;
    } */

/* Special menú items */

/* .rrss-container,
.language-switcher-container {   
    gap: 0px;     
}

.rrss-container,
.language-switcher-container {    
    width: 7rem;   
    order: 99; 
    padding: 10px 5px;
}

.main-navigation .main-nav .rrss-container li {
    width: 3rem;
}

.main-navigation .main-nav .language-switcher-container li {
    width: 7rem;
}

.main-navigation .main-nav .rrss-container li a,
.main-navigation .main-nav .language-switcher-container li a {
    width: 7rem;
    padding: 0;
    margin: 0 auto;
}

#menu-menu-principal {
    flex-wrap: wrap;
} */






/*    Navigation     */
/*-------------------*/




.logo-container {
    margin-left: 20px;
    /* width: 20%; */
}







.nm-nav.page-scrolled {
    height: 9rem;
}


.height-logo-scrolled {
    /* height: 15px!important; */
}





    nav {
        /* height: 100px; */
        background-color: transparent;
        
        
    }


    .nav-list-2 {
        /* margin-top: 1.3rem; */
    }

    .hamburger-btn {
        display: none;
    }


        
    .hamburger-btn {
        width: 5rem;
        height: 5rem;
        margin-right: 2.5rem;
        /* margin-top: 3.5rem; */
    }



    .hamburger-btn span {
        height: 3px;
        transform-origin: -17px 50%;
    }



    .activeline1__bars-menu {
        transform: rotate(45deg) translate(6px, -10px);
    }

    .page-scrolled .activeline1__bars-menu {
        transform: rotate(45deg) translate(6px, -8px);
    }


    .page-scrolled .activeline3__bars-menu {
        transform: rotate(-45deg) translate(-16px, 32px);
    }



   #menu-main-menu {
    margin-bottom: 0;
   }

   .nav-list .left__col {
    background-color: var(--color-white);
   }
   

.nav-list .div__w__img {
    
    height: 20rem;
    background-image: url('./images/slider/landers-05.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: inherit;
}


.nav-list .nm__container__navlist img {
    max-height: 20rem;
    margin: 0 auto;
}

.nav-list .rrss__container {
    width: 20rem;
    margin: 1.5rem auto;
}




    .nav-list-2 {
        position: relative;
        display: flex;
        justify-content: flex-end;
        text-align: left;        
        background: transparent;
        z-index: 999999;
        margin-right: 15rem;
    }



    

    .nav-list-2 .first-item {
        margin-top: 0;
    }
    
    .nav-list-2 li {
        display: flex;
        align-items: center;
        opacity: 1;
        margin: 0 1rem;
        transition: none;
        height: 3rem;
    }
   
    .nav-list-2 li a {
        font-size: 1.5rem;
        color: var(--color-white);
        width: max-content;
        line-height: 1.5rem;
        --clippy2: polygon(0 0, 0 0, 0 100%, 0 100%);
    }


  

    .nav-list-2 li.trp-language-switcher-container.first__language__item {
        margin-right: 0;
    }

    .nav-list-2 li.trp-language-switcher-container.first__language__item a .trp-ls-language-name {
        padding-right: 0.5rem;
        border-right: solid 1px var(--color-white);
    }

    .nav-list-2 li.trp-language-switcher-container.first__language__item a {
        padding: 0;
    }

    .nav-list-2 li.trp-language-switcher-container li a span::before {
       content: '|';
       margin: 0 0.3rem;
    }

    .trp-language-switcher-container a {
        /* padding: 0!important; */
    }

    .trp-ls-language-name {
        font-size: 1.6rem;
    }

    .nav-list-2 li a.active, .nav-list-2 li a:hover {
        /* color: var(--main-color); */
        transition: 0.5s;
        --clippy2: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    } 
    
    .nav-list-2 li a:after {
        content: "";
        display: block;
        background: var(--color-white);
        width: 100%;
        margin-top: 3px;
        height: 1.5px;
        clip-path: var(--clippy2);
        transition: clip-path .5s;
    }
   





    .nav-list-2 .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        margin-top: 0rem; 
        padding-top: 0.5rem;
        padding-bottom: 1rem;
        text-align: left;
        background-color: var(--color-black-soft);
        width: 28rem;
        border-radius: 1rem;
    }

   
    .nav-list-2 .sub-menu li a {
        font-size: 1.29rem;
    }
        
    .nav-list-2 li:hover > .sub-menu {
        display: flex;
        flex-direction: column;        
    }


    .nav-list-2 .sub-menu li {
        position: relative;
        margin: 0 0.5rem 0 0;
        width: 18rem;
        height: 3rem;   
    }

    




























/* HOME */



/* Section 2 */

.prl-js {    
    justify-content: flex-start;
  }


.texto-con-margen {   
    left: 10rem;   
    max-width: 600px;   
}






/* LEGAL PAGES */


.cms-content {
    padding: 15% 10% 0% 10%;
}




}


































/*******************************************************
 *                         1024 px
 *******************************************************/ 
@media (min-width: 64em) {        
}
/*******************************************************
 *                         1200 px
 *******************************************************/   
@media (min-width: 75em) {      
    
    





    

/* Services-Home */


.container-servicios {
    margin: 0 3rem;
}
    






}







/*******************************************************
 *                         1300 px
 *******************************************************/  
 @media (min-width: 81.25em) {  
    

    /* Services-Home */


    .container-servicios {
        margin: 0 10rem;
    }


}







    










/*******************************************************
 *                         1600 px
 *******************************************************/  
@media (min-width: 100em) {  
    
    







    


/* LEGAL PAGES */


.cms-content {
    padding: 10% 20% 0% 20%;
}







}

/*******************************************************
 *                         1920 px
 *******************************************************/  
 @media (min-width: 120em) {         
}