@import url('URL_DE_GOOGLE_FONTS');
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');
/* CSS Document */

/* Float Elements 
---------------------------------*/
.fl-lt {float:left;}
.fl-rt {float:right;}

/* Clear Floated Elements
---------------------------------*/
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

.figure{ margin:0px;}

img{ max-width:100%;}

a, a:hover, a:active{ outline:0px !important}

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Primary Styles
---------------------------------*/
body {
	background:#fff;
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
	font-weight:normal;
	color:#888888;
	margin:0;
}
h2{
	font-size:34px;
	color:#222222;
	font-family: 'Montserrat', sans-serif;
	font-weight:500;
	letter-spacing: -1px;
	margin:0 0 15px 0;
	text-align:center;
	text-transform:uppercase;
}
h3{
	font-family: 'Montserrat', sans-serif;
	color:#222222;
	font-size:16px;
	margin:0 0 5px 0;
	/* text-transform:uppercase; */
	font-weight:400;
}
h6{
	font-size: 30px;
	color:#888888;
	font-family: 'Allura', cursive; 
	font-weight:400;
	text-align:center;
	margin:0 0 60px 0;
}
p{
	line-height:24px;
	margin:0;
}

.itinerario{
    text-align: center; /* Centrar horizontalmente */
    margin: 20px 0; /* Espaciado vertical opcional */
    font-size: 2rem; /* Ajusta el tamaño del texto */
    font-weight: bold; /* Hace el texto más destacado */
    color: #757575; /* Color del texto */
}

.itinerario2 {
    text-align: center; /* Centrar horizontalmente */
    margin: 20px auto; /* Centrar verticalmente con un margen */
    font-size: 1.5rem; /* Ajusta el tamaño de la fuente */
    color: #757575; /* Color del texto */
    max-width: 80%; /* Limita el ancho del texto */
    line-height: 1.8; /* Espaciado entre líneas */
}

.itinerario2 p {
    margin: 0; /* Elimina márgenes innecesarios */
    text-align: center; /* Asegura que el texto esté centrado */
    font-size: 2rem; /* Ajusta el tamaño del texto */
    line-height: 1.8; /* Mantiene un buen espaciado entre líneas */
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .itinerario2 {
        font-size: 1.2rem; /* Reduce el tamaño de la fuente */
        line-height: 1.6; /* Ajusta el espaciado entre líneas */
    }

    .itinerario2 p {
        font-size: 1.4rem; /* Reduce el tamaño del texto en <p> */
        line-height: 1.6; /* Espaciado acorde al tamaño reducido */
    }
}

@media (max-width: 480px) {
    .itinerario2 {
        font-size: 1.2rem; /* Fuente aún más pequeña para pantallas muy pequeñas */
        line-height: 1.5; /* Ajusta el espaciado */
    }

    .itinerario2 p {
        font-size: 1.2rem; /* Ajusta el texto en <p> para pantallas pequeñas */
        line-height: 1.5; /* Ajusta el espaciado entre líneas */
    }
    .foto-servicios-exclusivos{
        margin-bottom: -100px;
    }
}





/* Header Styles
---------------------------------*/

.header{
	text-align:center;
	background:url(../img/pw_maze_black_2X.png) left top repeat;
	padding:280px 0;
}
.logo{
	width: 100%;
	margin:0 auto 35px;
}

.logo-letra{
	width:130px;
	margin:0 auto 35px;
}

.header h1{
	font-family: 'Montserrat',sans-serif;
	font-size:50px;
	font-weight:400;
	letter-spacing: -1px;
	margin:0 0 22px 0 ;
	color:#fff;
}

.we-create{
	padding:0;
	margin:35px 0 55px;
}
.wp-pic{
	margin-bottom:20px;
}
.we-create li{
	display:inline-block;
	font-family: 'Montserrat',sans-serif;
	font-size:14px;
	color: #bcbcbc;
	text-transform: uppercase;
	font-weight: 400;
	margin:0 5px 0 0;
	padding:0 0 0 15px;
}
.we-create li:first-child{
	background:none;
}

.start-button {
	padding-left: 0px;
}

.start-button li a{
color: #fff;
}


.link {
    padding: 10px 25px;
    background: #4d4d4d;
    color: #fff !important;
    font-size: 13px;
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    display: inline-block;
    border-radius: 5px;
    text-transform: uppercase;
    line-height: 25px;
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.link:hover {
    text-decoration: none;
    color: #4d4d4d !important;
    background: #fff;
}

.link:active, .link:focus {
    background: #4d4d4d;
    text-decoration: none;
    color: #fff !important;
}

/* Estilo para dispositivos móviles */
@media (max-width: 768px) {
    .link {
        padding: 8px 12px !important; /* Reduce aún más el padding */
        font-size: 10px !important; /* Reduce el tamaño de la fuente */
        line-height: 12px !important; /* Ajusta la altura de línea */
    }
}



/* Navigation
---------------------------------*/
.main-nav-outer{
	padding:0px;
	border-bottom:1px solid #dddddd;
	box-shadow:0 4px 5px -3px #ececec;
	position:relative;
	background:#fff;
    z-index: 1000; /* Un valor alto para asegurarse de que esté sobre otras secciones */

}
.main-nav{
	text-align:center;
	margin:10px 0 0px;
	padding:0;
	list-style:none;
}
.main-nav li{
	display:inline;
	margin:0 1px;
}
.main-nav li a{
	display:inline-block;
	color:#222222;
	text-transform:uppercase;
	font-family: 'Montserrat', sans-serif;
	text-decoration: none;
	line-height:20px;
	margin:17px 32px;
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}

.main-nav li a:hover{ 
	text-decoration:none;
    color: #a9be95; /* Color inicial */

}

.small-logo{ 
	padding:0 32px;
}

.main-section{
	padding:90px 0 110px;
}


@media (max-width: 1200px) {
    .main-nav li a {
        font-size: 12px; /* Reduce el tamaño de la fuente */
        margin: 10px 16px; /* Reduce los márgenes entre los enlaces */
    }

    .small-logo {
        padding: 0 16px; /* Ajusta el padding del logo pequeño */
    }

    .small-logo img {
        width: 50px; /* Ajusta el ancho del logo */
        height: auto; /* Mantiene la proporción del logo */
        transition: all 0.3s ease-in-out; /* Agrega una transición suave */
    }
}
  

/*EVENTOS*/

.body-eventos {
    display: flex;
    justify-content: center; /* 🔹 Centra el contenido */
    align-items: center;
    width: 100%;
}



.container-carousel {
    position: relative;
    width: 100%; /* Predeterminado para pantallas grandes */
    height: 500px;
    background-color: #e0e0e0;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.66);
    border-radius: 15px;
    overflow: hidden;
}

.carruseles {
    width: calc(100% * 5); /* Cambia 3 por el número de imágenes */
    height: 100%;
    display: flex;
    transition: transform 0.5s ease-in-out;
    align-items: center;
    justify-content: center;
}

.slider-section {
    position: relative;
    width: calc(100% / 5); /* Cambia 3 por el número de imágenes */
    height: 100%;
    overflow: hidden;
}

.slider-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.btn-left,
.btn-right {
    display: flex;
    position: absolute;
    top: 50%;
    font-size: 7rem;
    background-color: transparent;
    border-radius: 50%;
    padding: 5px;
    font-weight: 600;
    cursor: pointer;
    color: #ffffff81;
    transform: translate(0, -50%);
    transition: 0.5s ease;
    user-select: none;
    z-index: 10;
}

.btn-left:hover,
.btn-right:hover {
    background-color: #333333d4;
    color: #fff;
}

.btn-left {
    left: 10px;
}

.btn-right {
    right: 10px;
}

.slider-content {
    position: absolute;
    top: 85%;
    left: 20%;
    color: white;
    font-size: 2rem; /* Reducido para texto de abajo */
    /* font-weight: bold; */
    z-index: 10;
    opacity: 0;
    /* transition: all 1s ease-in-out 0.5s; */
}
.slider-proximamente {
    position: absolute;
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta el centro exacto */
    font-size: 3rem; /* Tamaño del texto */
    color: white;
    z-index: 10;
    text-align: center; /* Asegura que el texto esté centrado */
    /* background-color: rgba(0, 0, 0, 0.5); */ /* Fondo semitransparente opcional */
    padding: 10px 20px; /* Espaciado interno opcional */
    border-radius: 10px; /* Bordes redondeados opcionales */
}


.slider-section.active .slider-content {
    left: 50px;
    opacity: 1;
}

.title {
    margin: 0;
    color: white;
}

.slider-content h3 {
    font-size: 2rem; /* Tamaño más pequeño */
    margin: 10px 0;
}

.new-text {
    position: absolute;
    top: 40px;
    right: 30px;
    left: 30px; /* Agrega padding izquierdo */
    color: white;
    font-weight: 300;
    font-size: 2rem;
    text-align: right; /* Cambiar a 'center' para centrar */
    z-index: 15;
    opacity: 0;
    transform: translateX(100%);
    padding: 0 20px; /* Padding general */
}
.seccion1-alba{
    height: 70vh;
}

@media (max-width: 768px) {
    .new-text {
        font-size: 1.2rem; /* Tamaño más pequeño */
        top: 10px; /* Ajusta la posición vertical */
        right: 15px;
        left: 15px; /* Reduce el padding lateral */
        padding: 0 10px; /* Padding adicional para móviles */
        text-align: right; /* Centra el texto */
    }

    .slider-content h3 {
        font-size: 1.2rem; /* Tamaño más pequeño */
        margin: 10px 0;
    }
    
    .slider-proximamente {
        position: absolute;
        top: 50%; /* Centra verticalmente */
        left: 50%; /* Centra horizontalmente */
        transform: translate(-50%, -50%); /* Ajusta el centro exacto */
        font-size: 2rem; /* Tamaño del texto */
        color: white;
        z-index: 10;
        text-align: center; /* Asegura que el texto esté centrado */
        /* background-color: rgba(0, 0, 0, 0.5); */ /* Fondo semitransparente opcional */
        padding: 10px 20px; /* Espaciado interno opcional */
        border-radius: 10px; /* Bordes redondeados opcionales */
    }
}


.slider-section.active .new-text {
    opacity: 1;
    transform: translateX(0); /* Mueve el texto a su posición original */
}



.slider-content p {
    font-size: 1rem;
    margin: 0;
}

.slider-section a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slider-section a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out;
}

.slider-section a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s ease-in-out;
    z-index: 1;
    border-radius: 15px;
}

.slider-section a:hover::before {
    opacity: 0;
}

.slider-section a:hover img {
    transform: scale(1.05);
}

.whatsapp-link {
    color: #25D366; /* Color verde de WhatsApp */
    font-size: 3.5rem; /* Ajusta el tamaño del ícono */
    margin-left: 5px; /* Espacio entre el texto y el ícono */
    transition: transform 0.3s ease;
}

.whatsapp-link:hover {
    transform: scale(3.2); /* Aumenta el tamaño del ícono al pasar el mouse */
}


/* RESPONSIVIDAD */

/* Para pantallas de 1080px o menos */
@media (max-width: 1080px) {
    .container-carousel {
        width: 1000px; /* Reduce el ancho */
        height: 500px; /* Reduce la altura */
    }

    .slider-content {
        font-size: 4rem; /* Ajusta el tamaño del texto */
    }

    .btn-left,
    .btn-right {
        font-size: 6rem; /* Botones más pequeños */
    }
}

/* Para pantallas de 768px o menos */
@media (max-width: 768px) {

    .container-carousel {
        width: 100%; /* Ocupa todo el ancho disponible */
        height: 300px; /* Reduce la altura */
    }

    .slider-content {
        top: 80%;
        left: -150px;
        font-size: 2.5rem; /* Reduce el tamaño del texto */
    }

    .slider-section.active .slider-content {
        left: 20px;
    }

    .btn-left,
    .btn-right {
        font-size: 4rem; /* Botones más pequeños */
    }
}

/* Para pantallas de 480px o menos */
@media (max-width: 480px) {
/* 	.body-eventos {
		height: 60vh;

	} */
    .container-carousel {
        width: 100%;
        height: 200px; /* Reduce aún más la altura */
    }

    .slider-content {
        font-size: 1.5rem; /* Reduce aún más el texto */
        left: -100px;
    }

    .slider-section.active .slider-content {
        left: 10px;
    }

    .btn-left,
    .btn-right {
        font-size: 3rem; /* Botones aún más pequeños */
    }

}


/* Dropdown Menu */
.dropdown {
    position: relative; /* Necesario para posicionar el menú */
}

.dropdown-menu {
    display: none; /* Ocultar por defecto */
    position: absolute; /* Posición absoluta para que se desplace respecto al contenedor padre */
    top: 100%; /* Aparece justo debajo del enlace "SERVICIOS" */
    left: 0;
    background: #ffffff; /* Fondo blanco */
    list-style: none;
    padding: 10px 0; /* Espaciado interno */
    margin: 0;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.1); /* Sombra para resaltar */

    width: 600px; /* Ancho fijo para evitar problemas visuales */
}

.dropdown-menu li {
    padding: 10px 20px; /* Espaciado interno de cada opción */
    text-align: left; /* Alinea el texto a la izquierda */
}

.dropdown-menu li a {
    display: block; /* Hace que toda la opción sea clicable */
    color: #222222; /* Color del texto */
    text-transform: none; /* Sin mayúsculas automáticas */
    text-decoration: none; /* Quita el subrayado */
    font-family: 'Montserrat', sans-serif; /* Fuente consistente */
    font-size: 14px; /* Tamaño más pequeño para las opciones */
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

.dropdown-menu li a:hover {
    color: #4d4d4d; /* Color al hacer hover */
    background: #f8f8f8; /* Fondo suave al hacer hover */
}

/* Mostrar el menú al hacer hover */
.dropdown:hover .dropdown-menu {
    display: block;
}

html {
	scroll-behavior: smooth; /* Habilita el desplazamiento suave */
  }

  .hover-grow {
    color: #789e5f; /* Color inicial */
    text-decoration: underline; /* Subrayado inicial */
    transition: all 0.3s ease-in-out; /* Suaviza la transición */
}

.hover-grow:hover {
    font-size: 1.4em; /* Aumenta el tamaño de la fuente */
    color: #789e5f; /* Cambia ligeramente el color */
}

/* Cambios para dispositivos móviles */
@media (max-width: 1000px) {
    .dropdown-menu {
        position: static; /* Cambia la posición a relativa */
        display: block; /* Mostrar siempre */
        width: 100%; /* Ocupa todo el ancho del contenedor */
        background: #ffffff; /* Fondo blanco */
        max-height: 250px; /* Altura máxima */
        overflow-y: auto; /* Activa el scroll si es necesario */
    }

    .dropdown-menu li {
        padding: 10px; /* Espaciado interno */
        text-align: left; /* Alinea el texto a la izquierda */
    }

    .dropdown-menu li a {
        font-size: 12px; /* Reduce el tamaño de la fuente */
        padding: 5px; /* Espaciado interno */
    }

    .main-nav li {
        display: block; /* Hace que las opciones estén en filas */
        text-align: left;
    }

    .main-nav li a {
        font-size: 12px; /* Reduce el tamaño de la fuente */
        margin: 5px 0; /* Reduce el margen entre opciones */
    }

    .small-logo img {
        width: 40px; /* Reduce el tamaño del logo */
    }
}
/* Castillo
---------------------------------*/




.img-box {
    width: 20px;
    height: 500px;
    margin: 10px;
    border-radius: 30px;
    background: url(../img/index/carrusel-castillo1.webp);
    background-size: cover;
    background-position: center;
    position: relative;
    transition: width 0.5s;
}

.img-box:nth-child(2){
    background: url(../img/index/carrusel-castillo2.webp);
    background-size: cover;
    background-position: center;
}

.img-box:nth-child(3){
    background: url(../img/index/carrusel-castillo3.webp);
    background-size: cover;
    background-position: center;
}

.img-box:nth-child(4){
    background: url(../img/index/carrusel-castillo4.webp);
    background-size: cover;
    background-position: center;
}

.img-box:nth-child(5){
    background: url(../img/index/carrusel-castillo5.webp);
    background-size: cover;
    background-position: center;
}

.img-box:nth-child(6){
    background: url(../img/index/carrusel-castillo6.webp);
    background-size: cover;
    background-position: center;
}

.img-box h3{
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 30px;
    opacity: 0;
}

.img-box:hover{
    width: 500px;
    cursor: pointer;
}
/* Contenedor general */
.container-cast {
    width: 100%;
    padding: 20px;
    background: #ffffff;
}

/* Galería de fotos */
.gallery-cast {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espaciado entre imágenes */
}

.img-box {
    width: 150px;
    height: 400px;
    margin: 10px;
    border-radius: 30px;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Imagen única para móviles */
.single-image {
    display: none; /* Oculta por defecto */
    text-align: center;
}

.single-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Responsividad para móviles */
@media (max-width: 480px) {
    .gallery-cast {
        display: none; /* Oculta la galería */
    }

    .single-image {
        display: block; /* Muestra la imagen única */
    }
}


/* Carrousel Eventos
---------------------------------*/

.carrousel-eventos{
	display: flex;
	width: 100%;
	height: 830;
	padding-top: 30px;
	
}
 .carrousel-eventos img{
	width: 0px;
	flex-grow: 1;
	object-fit: cover;
	opacity: .7;
	transition: .5s ease;

 }

 .carrousel-eventos img:hover{
	width: 300px;
	opacity: 1;
	filter: contrast(120%);
 }

 .carrousel-eventos2{
	margin: 100px 0 0 200px;
	width: 70%;
	height: 450px;
	display: flex;
	justify-content: center;
	gap: 10px;
	
}

.carrousel-eventos2 img{
	width: 10%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
	border: 2px solid rgba(255, 255, 255, 0.684);
	transition: all ease-in-out 0.5s;
}

.carrousel-eventos2 img:hover{
	width: 70%;
 }

/* Carrousel Conecta
---------------------------------*/

/* Estilos generales */
.slider{
	aspect-ratio: 10 / 16;
	width: 300px;
	position: relative;
	display: flex;
	overflow: scroll;
	scroll-snap-type: x mandatory;
}

.slider img {
	width: 100%;
	left: 0;
	position: sticky;
	object-fit: cover;
	border-radius: 5px;
	scroll-snap-align: center;
}


/* Services
---------------------------------*/

.service-list {
    padding: 0 15px; /* Ajusta el padding para alinearlo con el contenedor */
    margin-bottom: 40px;
    font-size: 14px;
}


.service-list p {
    text-align: justify; /* Justifica el texto */
    word-spacing: 2px; /* Añade espaciado adicional entre palabras */
    line-height: 1.8; /* Espaciado entre líneas para mejorar la legibilidad */
}

.service-list-col1 {
    float: left;
    width: 50px; /* Reduce el ancho del contenedor */
}

.service-list-col1 i {
    font-style: normal;
    font-size: 28px; /* Tamaño más pequeño para los íconos */
    display: block;
    color: #222;
    font-family: 'FontAwesome';
    line-height: 28px; /* Ajusta la altura de línea al tamaño del ícono */
}


.button-container {
    margin-top: 20px; /* Espaciado vertical opcional */
    padding-left: 15px; /* Asegura el mismo margen que el texto */
    padding-right: 15px;
    text-align: left; /* Alinea el botón con el texto */
	display: flex;
    justify-content: center;
    align-items: center;
}

.contact-info {
    padding-left: 15px;
    padding-right: 15px;
}


/* Ajustes generales */
.service-list-col2 {
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
}

.service-list-col2 ul {
    list-style: none; /* Elimina puntos o números predeterminados */
    padding: 0; /* Elimina padding interno */
    margin: 0; /* Elimina márgenes externos */
    width: 100%; /* Asegura que el <ul> use todo el ancho del contenedor */
    box-sizing: border-box; /* Incluye padding dentro del ancho */
}

.service-list-col2 ul li {
    display: block; /* Cada <li> ocupa el 100% del ancho */
    width: 100%; /* Asegura que cada <li> use todo el ancho del contenedor */
    padding: 10px; /* Espaciado interno para separar texto de los bordes */
    margin: 5px 0; /* Espaciado entre los elementos de la lista */
    text-align: justify; /* Justifica el texto para bordes rectos */
    border-radius: 5px; /* Bordes redondeados opcionales */
    word-wrap: break-word; /* Ajusta palabras largas para evitar desbordamiento */

}

/* Ocultar la imagen para PC y mostrarla solo en móvil */
.figure-img1 {
    display: block; /* Visible por defecto en PC */
}

.figure-img2 {
    display: none; /* Oculta por defecto */
}


/* Reglas para dispositivos móviles (pantallas menores a 768px) */
@media (max-width: 768px) {
    .figure-img1 {
        display: none; /* Ocultar la imagen de PC */
    }

    .figure-img2 {
        display: block; /* Mostrar la imagen móvil */
        width: 80%; /* Reduce el ancho al 80% del contenedor */
        margin: 0 auto; /* Centrar horizontalmente */
        text-align: center; /* Asegura que esté centrado dentro del contenedor */
    }

    .figure-img2 img {
        display: block; /* Asegura que la imagen sea tratada como un bloque */
        margin: 0 auto; /* Centra la imagen dentro de su contenedor */
    }
    .figure-img3 {
        
            display: block; /* Mostrar la imagen móvil */
            width: 80%; /* Reduce el ancho al 80% del contenedor */
            margin: 0 auto; /* Centrar horizontalmente */
            text-align: center; /* Asegura que esté centrado dentro del contenedor */
        
    }

    
}


.text-container {
    padding-right: 15px; /* Ajusta el padding derecho para alinear mejor el contenido */
    box-sizing: border-box;
}

.image-container {
    padding-left: 15px; /* Ajusta el padding izquierdo para alinear con el texto */
    text-align: center;
}

figure img {
    width: 100%; /* Asegura que la imagen ocupe el contenedor */
    height: auto;
    border-radius: 10px;
}
/* Asegura que los <li> ocupen todo el ancho */


.image-container {
    padding-left: 15px; /* Ajusta el padding izquierdo para alinear con el texto */
    text-align: center;
}

/* Distribución para pantallas grandes */
@media (min-width: 768px) {
    .row {
        display: flex;
    }
    .col-lg-6 {
        flex: 0 0 50%; /* Ocupa la mitad del ancho */
        max-width: 50%;
    }
    .text-container {
        padding-right: 30px; /* Ajusta el espacio a la derecha del texto */
    }
    .image-container {
        padding-left: 30px; /* Ajusta el espacio a la izquierda de la imagen */
    }


}

/* Ajustes para pantallas pequeñas */
@media (max-width: 767px) {
    .text-container, .image-container {
        flex: 0 0 100%; /* Cada sección ocupa el 100% del ancho */
        max-width: 100%;
        padding: 15px; /* Padding uniforme */
    }
    .text-container h3, .text-container p, .text-container ul {
        text-align: center; /* Centra el contenido en pantallas pequeñas */
    }
}


.main-section.alabaster{
	background:#eeeeee;
}


figure img {
    width: 100%; /* Hace que la imagen ocupe el ancho del contenedor */
    height: auto;
    border-radius: 10px; /* Bordes redondeados opcionales */
}

/* Ajuste de ancho uniforme entre texto e imagen */
@media (min-width: 768px) {
    .col-lg-6, .col-md-6 {
        flex: 0 0 50%; /* Cada contenedor ocupa la mitad del ancho */
        max-width: 50%;
    }
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .service-list {
        text-align: center;
    }

    figure {
        text-align: center;
    }
}

/* Featured Work
---------------------------------*/

/* Ocultar la imagen en pantallas pequeñas */


.featured-work{
	font-size:14px;
}
.featured-work h2{
	text-align:left;
}
.featured-box{
	padding:0 0 0 0;
	margin-bottom:25px;
	font-size:14px;
}
.featured-box h3{
	margin-bottom:5px;
	padding-left: 60px;
	color:#777777;
}
.featured-box p{
	line-height:22px;
	padding-left: 60px;
}
.featured-work p.padding-b{
	padding-bottom:35px;
}
.featured-box-col1{
	width:60px;
	float:left;
}
.featured-box-col1 i{
	display:block;
	line-height:38px;
	font-family: 'FontAwesome';
	font-size:38px;
	color:#777777;
	font-style:normal;
}
.featured-box-col2{ overflow:hidden;}
.featured-box.magic{
	background:url(../img/magic.png) left top no-repeat;
}
.featured-box.packaged{
	background:url(../img/packaged.png) left top no-repeat;
}
.featured-box.seo{
	background:url(../img/seo.png) left top no-repeat;
}
.Learn-More{
	display:inline-block;
	padding:0 5px 0 0;
	color:#4d4d4d;
	font-size:16px;
	text-transform:uppercase;
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
	line-height:24px;
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	display: none;
}
.Learn-More i{ 
	padding-right:15px;
}

.Learn-More:hover, .Learn-More:focus{ 
	text-decoration:none;
	color: #111;
}
@media (max-width: 768px) {
    .featured-box h3,
    .featured-box p {
        padding-left: 15px; /* Reduce el margen izquierdo en pantallas pequeñas */
        padding-right: 1px; /* Agrega margen derecho para balancear */
        text-align: justify; /* Justifica el texto */
    }

    .featured-work {
        padding: 0 15px; /* Asegura que el contenido no quede pegado a los bordes */
    }

    .featured-box {
        margin-bottom: 20px; /* Ajusta el espaciado entre bloques */
    }
}


/* Portfolio
---------------------------------*/
.Portfolio-nav{
	padding:0;
	margin:0 0 45px 0;
	list-style:none;
	text-align:center;
}
.Portfolio-nav li{
	margin:0 10px;
	display:inline;
}
.Portfolio-nav li a{
	display:inline-block;
	padding:10px 22px;
	font-size:12px;
	line-height:20px;
	color:#222222;
	border-radius:4px;
	text-transform:uppercase;
	font-family: 'Montserrat', sans-serif;
	background:#f7f7f7;
	margin-bottom:5px;
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}
.Portfolio-nav li a:hover{
	background:#4d4d4d;
	color:#fff;
	text-decoration:none;
}

.portfolioContainer {
    max-width: 1200px; /* Asegura un ancho máximo para pantallas grandes */
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
    overflow: hidden;
    margin-bottom: 40px;
}
.Portfolio-box {
    text-align: center;
    margin-bottom: 30px;
    margin-left: 15px; /* Añade margen a la izquierda */
    margin-right: 15px; /* Añade margen a la derecha */
    height: 350px;
    width: 350px;
    overflow: hidden;
    float: left;
    padding: 0;
}
.Portfolio-box img{
	margin-bottom:25px;
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;	
}

.Portfolio-box img:hover {
	opacity: 0.6;
}

.Portfolio-nav li a.current{
	background:#4d4d4d;
	color:#fff;
	text-decoration:none;
}
img {
   max-width:100%;
}

/* no transition on .isotope container */

.isotope .isotope-item {
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    transition-duration: 0.6s;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}

.main-section.paddind{
	padding-bottom: 60px;
}

.main-section2.paddind{
	padding-bottom: 0px;
}
/* Clients
---------------------------------*/
.client-part{
	background:url(../img/section-bg1.jpg) center center no-repeat;
	background-size:cover;
	padding:55px 0;
	text-align:center;
}
.client-part-haead{
	color:#fdfdfd;
	font-size:28px;
	line-height:41px;
	margin:30px 0 10px;
	font-family: ''Open Sans',sans-serif';
	font-style: italic;
}
.client{
	padding:0;
	margin:20px 0 0;
	list-style:none;
	text-align:center;
}
.client li{
	display:inline;
	margin:0 15px;
}
.client li a{
	display:inline-block;
}
.client li a img{
	margin-bottom:15px;
	border-radius:50%;
}
.client li a:hover{
	text-decoration:none;
}
.client li a h3{
	color:#ffffff;
}
.client li a span{
	color:#f1f1f1;
}
.quote-right{
	font-style:normal;
	width:68px;
	height:68px;
	margin:0 auto;
	border:2px solid #4d4d4d;
	border-radius:50%;
	display:block;
	line-height:68px;
	text-align:center;
	font-size:27px;
	color:#4d4d4d;
	cursor: pointer;
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}

.quote-right:hover{
color: #fff;
border: 2px solid #fff;
}



.c-logo-part {
	background: #ffffff;
	padding: 25px 0;
	filter: alpha(opacity=60);
}

.c-logo-part ul {
	padding: 0;
	margin: 0 auto;
	list-style: none;
	text-align: center;
	display: flex; /* Usamos Flexbox para alinear los logos en una fila */
	justify-content: center; /* Centra los elementos dentro del contenedor */
	flex-wrap: wrap; /* Permite que los logos pasen a una nueva fila si no hay espacio suficiente */
	gap: 20px; /* Espaciado uniforme entre logos */
}

.c-logo-part ul li {
	display: flex; /* Cada logo se comporta como un bloque en línea flexible */
	align-items: center; /* Centra verticalmente el contenido del logo */
	justify-content: center; /* Centra horizontalmente */
}

.c-logo-part ul a {
	display: inline-block;
}

.c-logo-part ul img {
	max-width: 30%; /* Ajusta el tamaño al 10% del contenedor */
	height: auto; /* Mantén la proporción original */
	display: inline-block; /* Asegura que se mantenga en línea */
}



.main-section.team{
	padding: 45px 20px;
}
.main-section.team h6{
	margin-bottom: 40px;
}

.main-section2.team{
	padding: 05px 20px;
}
.main-section2.team h6{
	margin-bottom: 0px;
}



.team-leader-block {
	display: flex;
	flex-wrap: wrap; /* Permite que los elementos se muevan a la siguiente fila si es necesario */
	justify-content: center; /* Centra los elementos dentro del contenedor */
	max-width: 993px;
	margin: 0 auto;
  }
  
  .team-leader-box {
	width: 30.66%;
	margin: 0 1.5%; /* Ajusta los márgenes entre los elementos */
	height: 490px;
	overflow: hidden;
	text-align: center;
	box-sizing: border-box;
    overflow: visible;
  }

  .team-leader-box.tania {
    height: auto; /* Allow the container to grow with its content */
    min-height: 300px; /* Optional: Ensure a minimum height if needed */
}

.team-leader-box:nth-of-type(3n) {
	margin-right: 0; /* Elimina el margen derecho del último elemento en cada fila */
}

.team-leader-box span{
	margin-bottom:24px;
	display:block;
}
.team-leader-box:nth-of-type(3n+0){ margin:0;}
.team-leader{
	width:auto;
	height:auto;
	position:relative;
	border-radius:50%;
	box-shadow:0px 0px 0px 7px rgba(241,241,241,0.80);
	margin:7px 7px 25px 7px;
	
}
.team-leader-shadow{
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	border-radius:50%;
	position:absolute;
	width:100%;
	height:100%;
	z-index:10;
	border-radius:50%;
}
.team-leader-shadow a{
	display:block;
	width:100%;
	height:100%;
}
.team-leader:hover .team-leader-shadow{
	box-shadow:inset  0px 0px 0px 148px rgba(17,17,17,0.80);
}
.team-leader:hover ul{ display:block; opacity:1}
.team-leader img{
	display:block;
	border-radius:50%;
}
.team-leader ul{
	display:block;
	opacity:0;
	padding:0;
	margin:0;
	list-style:none;
	position:absolute;
	left:0;
	top:50%;
	width:100%;
	text-align:center;
	margin-top:-14px;
	z-index:15;
	transition:all 0.6s ease-in-out;
	-moz-transition:all 0.6s ease-in-out;
	-webkit-transition:all 0.6s ease-in-out;
}
.team-leader ul li{
	display:inline;
	margin:0 11px;
}
.team-leader ul li a{
	font-family: 'FontAwesome';
	display:inline-block;
	font-size:28px;
	color:#fff;	
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}
.team-leader ul li a:hover, .team-leader ul li a:focus{
	text-decoration:none;
}
.team-leader ul li a.fa-twitter:hover{
	color:#55acee;
}
.team-leader ul li a.fa-facebook:hover{
	color:#3b5998;
}
.team-leader ul li a.fa-pinterest:hover{
	color:#cb2026;
}
.team-leader ul li a.fa-google-plus:hover{
	color:#dd4b39;
}

.alba-host .team-leader-box {
    height: auto ;
}


.tania {
    height: 300px;
}




/* Talk Business
---------------------------------*/
.business-talking{
	background:url(../img/section-bg2.jpg) top center no-repeat;
	background-size:cover;
	padding:60px 0 10px;
	text-align:center;
}
.business-talking h2{
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
	padding:0;
	margin:20px 0 70px;
	text-transform:uppercase;
	font-size:42px;
	color:#fff;
}


/* Contact
---------------------------------*/
.main-section.contact {
    padding: 90px 15px; /* Ajusta el padding para que sea consistente */
    background: url(../img/bg-map.png) left 190px no-repeat;
}

.contact-info-box {
    font-size: 15px;
    margin: 0 auto 20px; /* Centraliza el bloque */
    max-width: 90%; /* Limita el ancho del contenido */
    text-align: left; /* Asegura que el texto quede alineado */
}

.contact-info-box h3 {
    font-size: 15px;
    font-weight: 400;
    display: flex; /* Alinea los iconos con el texto */
    align-items: center;
}

.contact-info-box h3 i {
    font-style: normal;
    font-size: 18px;
    color: #222222;
    font-family: 'FontAwesome';
    font-weight: normal;
    margin-right: 10px; /* Espacio entre el icono y el texto */
}

.contact-info-box span {
    line-height: 22px;
    display: block;
}



/* Estilos generales */
.form {
    max-width: 800px; /* Máximo ancho del formulario */
    margin: 0 auto; /* Centrado */
    padding: 20px;
}

/* Input y textarea estilizados */
.input-text {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.input-btn {
    padding: 8px 16px; /* Tamaño normal */
    background: #4d4d4d;
    color: #fff;
    font-size: 12px; /* Tamaño estándar */
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    display: inline-block;
    width: auto; /* No ocupa todo el ancho */
    max-width: 200px; /* Limita el ancho máximo */
    margin: 10px auto; /* Centrado */
}

.input-btn:hover {
    background: #1da851;
}

/* Responsivo para pantallas medianas */
@media (min-width: 768px) {
    .form {
        max-width: 90%;
    }
}

/* Responsivo para pantallas grandes */
@media (min-width: 992px) {
    .form {
        max-width: 100%;
    }
}
.input-btn:active, .input-btn:focus {
    background: #4d4d4d;
    color: #fff;
    text-decoration: none;
}







.social-link {
    padding: 20px 0; 
    text-align: left; /* Alinea a la izquierda */
    list-style: none; /* Elimina los marcadores de lista */
    margin: 0;
    padding: 0;
}

.social-link li {
    margin: 0 0 10px 20px; /* Ajusta el margen izquierdo al mismo que el texto */
}

.social-link li a {
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 25px;
    color: #fff;
    background: #222222;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.social-link li a:hover, 
.social-link li a:focus {
    background: #555; /* Cambia el color de fondo en hover */
}

.twitter a:hover {
	background: #55acee;
}
.facebook a:hover {
	background: #3b5998;
}
.pinterest a:hover {
	background: #cb2026;
}
.gplus a:hover {
	background: #dd4b39;
}
.dribbble a:hover {
	background: #ea4c89;
}

.form{
	margin:0 66px 0 30px;
}
.input-text{
	padding:15px 16px;
	border:1px solid #ccc;
	width:100%;
	height:50px;
	display:block;
	border-radius:4px;
	font-size:15px;
	color:#aaa;
	font-family: 'Open Sans', sans-serif;
	margin:0 0 15px 0;
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}

.input-text:focus {
	border: 1px solid #4d4d4d;
	outline:0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);	
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
}

.input-text.text-area{
	height:165px;
	resize:none;
	overflow:auto;
}


.input-btn:hover{
	background: #111;
	color: #fff;
}

.validation {
    color: red;
    display:none;
    margin: 0 0 20px;
    font-weight:400;
    font-size:13px;
}

#sendmessage {
    color: #4d4d4d;
    border:1px solid #4d4d4d;
    display:none;
    text-align:center;
    padding:15px;
    font-weight:600;
    margin-bottom:15px;
}

#errormessage {
    color: red;
    display:none;
    border:1px solid red;
    text-align:center;
    padding:15px;
    font-weight:600;
    margin-bottom:15px;
}

#sendmessage.show, #errormessage.show, .show {
	display:block;
}

/* Footer */
.footer {
    background: black;
    padding-top: 50px;
    padding-bottom: 30px;
    font-family: 'Montserrat', sans-serif;
}

/* Asegurar que cada columna ocupa el mismo espacio */
.footer .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    flex-wrap: wrap;
}

/* Ajustar la columna del centro */
.footer .col-md-4:nth-child(2) {
    max-width: 280px; /* Define un ancho máximo para que no se expanda demasiado */
    margin: 0 auto; /* Centra horizontalmente */
    margin-left: 100px;
}

/* Logo en la izquierda */
.footer-logo img {
    max-width: 350px; /* Tamaño del logo */
    height: auto;
    display: block;
    margin: 0 auto;
    
}

/* Sección de contacto */
.single-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Espaciado entre los elementos de la lista */
.single-footer ul li {
    margin-bottom: 8px;
}

/* Estilos para los enlaces */
.footer a {
    font-size: 14px;
    font-weight: 300;
    color: #ccc;
    text-decoration: none;
}

.footer a:hover {
    color: #789e5f;
}

/* Responsive */
@media (max-width: 768px) {
    .footer .row {
        flex-direction: column;
        text-align: center;
    }

    .footer .col-md-4 {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .footer .col-md-4:nth-child(2) {
        text-align: center;
        max-width: 100%;
        margin-left: 0;
    }
}

/* Redes Sociales */
.social-link {
    display: flex; /* Asegura que los iconos estén en fila */
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Estilos de cada icono de red social */
.social-link li {
    margin: 0 10px; /* Espaciado entre iconos */
}

.social-link li a {
    display: flex;
    width: 45px;
    height: 45px;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    background: #222;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
}

.social-link li a:hover {
    background: #555;
}

/* Línea separadora */
.footer-line {
    width: 80%;
    height: 1px;
    background: #ccc;
    margin: 20px auto;
}

/* Copyright */
.copyright {
    text-align: center;
    font-size: 13px;
    font-weight: 300;
    color: #ccc;
    padding-top: 10px;
}

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

    .footer-logo img {
        margin-bottom: 20px;
    }

    .social-link {
        justify-content: center;
    }
}

/* Botón de WhatsApp */
.whatsapp-btn {
    display: inline-block;
    background: #789e5f;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    transition: background 0.3s ease;
    width: 100%; /* En móviles, ocupa todo el ancho */
    max-width: 200px; /* Limita el tamaño en escritorio */
}

.whatsapp-btn:hover{
    color: #789e5f;
    background: white;
}

.whatsapp-btn i {
    margin-left: 5px;
}



/* Línea separadora antes del copyright */
.footer-line {
    width: 80%;
    height: 1px;
    background: #ccc;
    margin: 20px auto;
}

/* Copyright centrado */
.copyright {
    text-align: center;
    font-size: 13px;
    font-weight: 300;
    color: #ccc;
    padding-top: 10px;
}

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

    .footer-logo {
        justify-content: center;
    }

    .single-footer {
        margin-bottom: 20px;
    }

    .whatsapp-btn {
        width: 90%; /* Botón ocupa todo el ancho en móviles */
        max-width: 250px;
    }

    .footer-line {
        width: 90%;
    }
}


/* Estilos del formulario de suscripción */
.signup_form {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.signup_form input {
    width: 70%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.subscribe__btn {
    background: #789e5f;
    border: none;
    padding: 8px 10px;
    color: white;
    border-radius: 5px;
    margin-left: 5px;
    cursor: pointer;
}

.subscribe__btn:hover {
    background: #5c7a4d;
}

/* Línea separadora antes del copyright */
.footer-line {
    width: 80%;
    height: 1px;
    background: #ccc;
    margin: 20px auto;
}

/* Copyright centrado */
.copyright {
    text-align: center;
    font-size: 13px;
    font-weight: 300;
    color: #ccc;
    padding-top: 10px;
}


.copyright, .credits {
    color: #cccccc;
    font-size: 14px;
    display: block;
    text-align: center;
}

.copyright a, .credits a {
    color: #4d4d4d;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.copyright a:hover, .credits a:hover {
    color: #fff;
}

.res-nav_click {
    line-height: 0; /* Elimina espacios adicionales */
    display: none; /* Sigue oculto hasta los puntos de quiebre móviles */
    width: 50px; /* Ajusta el ancho del contenedor */
    height: 50px; /* Ajusta la altura del contenedor */
    margin: 20px auto;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out;
}

.menu-icon {
    width: 100%; /* La imagen ocupa todo el contenedor */
    height: auto; /* Mantén la proporción de la imagen */
    cursor: pointer; /* Añade el cursor de mano para hacer clic */
}

/* Opcional: Añade un efecto de hover */
.res-nav_click:hover .menu-icon {
    opacity: 0.8; /* Hace que la imagen sea un poco más tenue */
}

.res-nav_click:hover, .res-nav_click:active, .res-nav_click:focus {
    color: #4d4d4d !important;
}


/* Bottom Quiero asistir 
--------------------------------*/

/* Contenedor para centrar el botón */



/* Estilo del botón reducido */


/* Efecto hover */
.custom-button {
    padding: 7px 25px;
    background: #4d4d4d;
    color: #fff !important;
    font-size: 11px;
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    display: inline-block;
    border-radius: 3px;
    text-transform: uppercase;
    line-height: 25px;
    margin-top: 20px; /* Espaciado superior */
    transition: all 0.3s ease-in-out;
}

.custom-button:hover {
    text-decoration: none;
    color: #4d4d4d !important;
    background: #fff;
}


.custom-button, .custom-button:focus {
    background: #4d4d4d;
    text-decoration: none;
    color: #fff !important;
}


/* Animation Timers
---------------------------------*/
.delay-02s { 
	animation-delay: 0.2s; 
	-webkit-animation-delay: 0.2s; 
}
.delay-03s { 
	animation-delay: 0.3s; 
	-webkit-animation-delay: 0.3s; 
}
.delay-04s { 
	animation-delay: 0.4s; 
	-webkit-animation-delay: 0.4s; 
}

.delay-05s { 
	animation-delay: 0.5s; 
	-webkit-animation-delay: 0.5s; 
}
.delay-06s { 
	animation-delay: 0.6s; 
	-webkit-animation-delay: 0.6s; 
}

.delay-07s { 
	animation-delay: 0.7s; 
	-webkit-animation-delay: 0.7s; 
}
.delay-08s { 
	animation-delay: 0.8s; 
	-webkit-animation-delay: 0.8s; 
}

.delay-09s { 
	animation-delay: 0.9s; 
	-webkit-animation-delay: 0.9s; 
}
.delay-1s { 
	animation-delay: 1s; 
	-webkit-animation-delay: 1s; 
}
.delay-12s { 
	animation-delay: 1.2s; 
	-webkit-animation-delay: 1.2s; 
}

/*LOGO PATROCINIOS CONTAINER*/

.logo-container {
    overflow: hidden;
    width: 100%;
    background-color: white;
    padding: 20px 0;
    position: relative;
  }
  
  .logo-slider {
    display: flex;
    gap: 40px;
    animation: scroll-loop 40s linear infinite;
    width: max-content;
  }
  
  .logo-slider li {
    flex-shrink: 0;
    list-style: none;
  }
  
  .logo-slider img {
    max-height: 50px;
    min-height: 40px;
    width: auto;
    vertical-align: middle;
    filter: grayscale(100%);
    transition: filter 0.3s;
  }
  
  .logo-slider img:hover {
    filter: grayscale(0%);
  }
  
  /* Ajuste específico para logos pequeños */
  .logo-ss {
    max-height: 105px;
    padding: 0 5px;
    transform: scale(1.6);
  }



.logo-slider img:hover {
    filter: grayscale(0%);
}

/* 🎞️ Animación continua sin cortes */
@keyframes scroll-loop {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-50%);
    }
  }




/* Tamaño estándar de los logos */
.logo-container img {
    max-width: 220px; /* Tamaño inicial */
    height: auto;
    transition: all 0.3s ease;
}

/* Ajuste en tablets */
@media (max-width: 1068px) {
    .logo-container img {
        max-width: 150px; /* Reduce el tamaño en tabletas */
    }
}

/* Ajuste en móviles */
@media (max-width: 768px) {
    .logo-container ul {
        flex-wrap: wrap; /* Permite que los logos se ajusten automáticamente */
        justify-content: space-around; /* Distribuye los logos mejor */
    }
    .logo-container img {
        max-width: 80px; /* Tamaño más pequeño en móviles */
    }
}


/*feed instagram*/

#instagram-feed {
    padding: 40px 0;
    background-color: #f9f9f9;
    text-align: center;
}

#instagram-feed h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

#instagram-feed iframe {
    border-radius: 10px; /* Bordes redondeados opcionales */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}


/* EVENTO2.HTML */
/* Estilo para la estructura del slider */
.swiper-container2 {
    width: 60%;
    height: 100%;
    overflow: hidden; /* Asegura que nada sobresalga */
    position: relative;
}

/* Texto indicativo */
.swiper-instruction {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    color: #555;
    font-family: 'Montserrat', sans-serif;
    animation: fadeIn 1.5s infinite; /* Animación para llamar la atención */
}

/* Animación de texto */
@keyframes fadeIn {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* Swiper Styling */
.container-swiper {
    width: 100%;
    position: relative;
    max-width: 1200px; /* Ajusta según el diseño */
    margin: 0 auto; /* Centra el carrusel */
    
}

.swiper-wrapper {
    display: flex;
    
}

.swiper-slide {
    flex-shrink: 0;
    width: 80%; /* Ajusta el tamaño visible de cada slide */
    text-align: center;
    position: relative;
    box-shadow: none !important; /* Elimina cualquier sombra */
}

.swiper-slide img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    
}

/* Flechas de navegación con diseño cuadrado y bordes redondeados */
.swiper-button-prev, .swiper-button-next {
    position: absolute;
    top: 40%;
    width: 50px; /* Tamaño cuadrado */
    height: 50px;
    background-color: white !important; /* Fondo blanco */
    color: black !important; /* Flecha negra */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    z-index: 100;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px; /* Tamaño de la flecha */
    font-weight: bold;
    transition: background 0.3s ease, transform 0.2s ease-in-out;

    
}

/* Ajusta la posición de la flecha izquierda */


/* Efecto al pasar el cursor */
.swiper-button-prev:hover, .swiper-button-next:hover {
    background-color: white !important; /* Mantiene fondo blanco en hover */
    transform: scale(1.1); /* Agranda el botón ligeramente */
    transition: background 0.3s ease, transform 0.2s ease-in-out;
}
/* Ajusta la posición de la flecha izquierda */
.swiper-button-prev {
    left: 10px; /* Ajusta según sea necesario */
}

/* Ajusta la posición de la flecha derecha */
.swiper-button-next {
    right: 10px; /* Ajusta según sea necesario */
}

/* Centrar completamente la flecha dentro del botón */
.swiper-button-prev::after, 
.swiper-button-next::after {
    font-size: 14px; /* Tamaño de la flecha */
    color: black !important; /* Asegura que la flecha sea negra */
    font-weight: bold;
    line-height: 50px; /* Hace que la flecha se alinee verticalmente */
    text-align: center; /* Asegura que esté centrada horizontalmente */
    width: 100%; /* Se ajusta al tamaño del botón */
    height: 100%; /* Se ajusta al tamaño del botón */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Corrige el fondo de Swiper por si tiene estilos por defecto */
.swiper-button-prev::before,
.swiper-button-next::before {
    display: none !important; /* Oculta cualquier capa extra que Swiper pueda estar aplicando */
}
.flechas-slider {
    display: none;
}


/* Paginación */
/* Centrar la paginación */
.swiper-pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.swiper-pagination-bullet {
    background: #ccc;
    opacity: 0.7;
}

.swiper-pagination-bullet-active {
    background: #000;
}


.swiper-slide2 {
    flex-shrink: 0;
    width: 100%; /* Ajusta el ancho de cada slide al contenedor */
    height: auto;
    text-align: center;
}

.swiper-slide2 img {
    width: 100%;
    height: auto; /* Mantén las proporciones de la imagen */
    object-fit: cover; /* Asegura que las imágenes se vean correctamente */
    border-radius: 15px;
}


/* Contenedor para centrar la pasarela */
.payment-container {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente si es necesario */
    margin: 20px 0; /* Espaciado opcional alrededor de la pasarela */
}




.swiper-button-next, .swiper-button-prev {
    display: block; /* Asegura que las flechas siempre se vean */
    opacity: 0.8; /* Hazlas más visibles */
    transition: opacity 0.3s ease;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    opacity: 1;
}

.swipe-arrow {
    position: absolute;
    bottom: 20px;
    right: 50%;
    transform: translateX(50%);
    font-size: 24px;
    color: #555;
    animation: bounce 1.5s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateX(50%) translateY(0);
    }
    50% {
        transform: translateX(50%) translateY(-10px);
    }
}



/*SECCION DE MASTERCLASS*/

/* Estilo general para el slider */
.swiper3 {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.swiper-wrapper {
    display: flex;
}

.swiper-slide2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Asegura que cada imagen ocupe todo el ancho */
    opacity: 0; /* Inicialmente invisibles */
    transition: opacity 1s ease-in-out; /* Transición suave */
}

.swiper-slide-active {
    opacity: 1; /* Solo la imagen activa es visible */
}

.swiper-slide2 img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Opcional */
    cursor: pointer; /* Añade un cursor de "mano" */
}



/* Paginación */
.swiper-pagination3 {
    text-align: center;
    margin-top: 10px;
}

/*COOKIES*/
.cookie-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50%;
    max-width: 400px;
    background: #000000;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    padding: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-image: url(../img/pw_maze_black_2X.png);
    background-size: cover;
    background-position: center;
    pointer-events: auto;
}

.cookie-content h3 {
    color: white;
    font-size: 12px;
    margin-bottom: 10px;
}

.cookie-content p {
    color: #d4d4d4;
    font-size: 10px;
    line-height: 1.5;
}

.toggle-button {
    background: none;
    border: none;
    font-size: 12px; /* Tamaño de fuente reducido */
    cursor: pointer;
    display: flex; /* Mantén los elementos en una fila */
    align-items: center; /* Centra verticalmente */
    justify-content: space-between; /* Espaciado entre texto y flecha */
    width: 100%;
    padding: 8px;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    border-radius: 5px; /* Redondeo ligero del botón */
}

.arrow {
    font-size: 14px; /* Tamaño menor */
    margin-left: 10px; /* Espaciado de la flecha */
    transition: transform 0.3s ease;
}

.toggle-content {
    display: none;
    padding: 10px;
    background-color: #1f1f1f;
    border-radius: 5px; /* Bordes redondeados del contenido */
    border: 1px solid #ddd;
    margin-top: 5px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #d4d4d4;
}

.cookie-buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    position: relative; /* Asegura que los botones estén en el frente */
    z-index: 1001; /* Mayor que el popup */
}

.cookie-buttons button {
    background: #585858;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    pointer-events: auto; /* Garantiza que los botones reciban clics */
}

.cookie-buttons button:hover {
    background: #727272;
}

.cookie-buttons a {
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
}


.cookie-buttons a:hover {
    text-decoration: underline;
}

.justified-text {
    text-align: justify; /* Alineación justificada para mejor lectura */
}
@media (max-width: 768px) {
    .cookie-popup {
        width: 80%; /* Ocupa el 80% del ancho de la pantalla */
        left: 10%; /* Centra horizontalmente */
        right: auto; /* Elimina la separación derecha */
        bottom: 10px; /* Más cercano al borde inferior */
        max-width: unset; /* Sin ancho máximo */
        padding: 15px; /* Reduce el padding */
    }

    .cookie-content h3 {
        font-size: 14px; /* Fuente más grande en móviles */
        margin-bottom: 10px;
    }

    .cookie-content p {
        font-size: 12px; /* Texto ligeramente más grande */
        line-height: 1.4;
    }

    .toggle-button {
        font-size: 14px; /* Texto más claro para botones */
        padding: 10px;
    }

    .cookie-buttons button {
        font-size: 12px; /* Botones ligeramente más pequeños */
        padding: 10px 12px;
    }
}
/* SECCIÓN CTA */
/* Columnas */
.cta-text, .cta-form, .cta-download, .cta-newsletter {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cta-section {
    position: relative;
    background: url('../img/china2.webp') no-repeat center center;
    background-size: cover;
    padding: 60px 0;

    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Filtro oscuro */
.cta-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* Contenedor con 3 columnas bien distribuidas */
.cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 85%;
    max-width: 1200px;
    padding: 30px;
    border-radius: 10px;
    position: relative;
    z-index: 2;
    gap: 40px; /* Espacio uniforme entre las columnas */
}

/* Columnas */
.cta-text, .cta-form, .cta-download {
    flex: 1;
}

/* Texto alineado a la izquierda solo en .cta-text */
.cta-text {
    align-items: flex-start;
    text-align: left;
}

/* Ajuste de títulos y párrafos */
.cta-text h2 {
    font-size: 16px;
    margin-bottom: 10px;
    color: white;
}

.cta-text p {
    font-size: 12px;
    line-height: 1.6;
    color: white;
}

/* Centrar los botones en sus columnas */
.cta-form, .cta-download {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Botones */
.cta-button {
    background: transparent;
    color: white;
    border: 2px solid white;
    padding: 12px 20px;
    font-size: 14px;
    text-decoration: none;
    transition: 0.3s ease;
    width: 100%;
    max-width: 260px;
    border-radius: 5px;
}

.cta-button:hover {
    background: white;
    color: black;
}

/* Newsletter */
.newsletter-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 300px;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 100%;
    max-width: 300px;
}

.newsletter-form input[type="email"] {
    padding: 10px;
    border: none;
    border-radius: 5px;
    width: 100%;
    max-width: 300px;
    font-size: 14px;
}

.newsletter-form button {
    margin-top: 5px;
}


/* 🔹 BOTONES MÁS PEQUEÑOS EN TELÉFONOS 🔹 */
@media (max-width: 768px) {
    .cta-section {
        min-height: auto; /* Altura flexible en móviles */
        padding: 60px 20px; /* Más espacio en móviles */
    }

    .cta-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .cta-text {
        text-align: left;
    }

    .cta-text h2{
        text-align: center;
    }

    .cta-form, .cta-download {
        justify-content: center;
    }

    /* 🔹 Botones más pequeños en móviles 🔹 */
    .cta-button {
        padding: 8px 12px;
        font-size: 14px;
        max-width: 200px;
    }
}



/* Pop-up container */
.pdf-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

/* Pop-up content */
.pdf-popup-content {
    background: #000000 url(../img/pw_maze_black_2X.png) left top repeat;
    border-radius: 15px;
    padding: 20px;
    width: 90%;
    max-width: 900px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    margin: 20px 0;
}

/* Button container */
.pdf-button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

/* Close button */
.pdf-close-btn {
    background: #4d4d4d;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.pdf-close-btn:hover {
    background: #fff;
    color: #4d4d4d;
}

/* Download button */
.pdf-download-btn {
    background: #4d4d4d;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.pdf-download-btn:hover {
    background: #fff;
    color: #4d4d4d;
}

/* PDF viewer container */
.pdf-viewer {
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

/* Canvas for PDF rendering */
.pdf-canvas {
    width: 100%;
    height: auto;
    border: none;
}

/* Navigation buttons */
.pdf-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #4d4d4d;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.pdf-nav-btn:hover {
    background: #fff;
    color: #4d4d4d;
}

.pdf-nav-btn.prev {
    left: 10px;
}

.pdf-nav-btn.next {
    right: 10px;
}

/* Disabled state for navigation buttons */
.pdf-nav-btn:disabled {
    background: #cccccc;
    cursor: not-allowed;
}

/* Page number display */
.pdf-page-info {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .pdf-popup-content {
        width: 95%;
        padding: 15px;
    }
    .pdf-viewer {
        height: 400px;
    }
    .pdf-close-btn, .pdf-download-btn {
        font-size: 12px;
        padding: 6px 12px;
    }
}