/*FUENTES*/
@font-face {
    font-family: 'Caligrafica';
    src: url('/assets/fonts/Kingthings\ Calligraphica\ 2.ttf') format('truetype');
    font-weight: normal; /* Opcional: define si es regular, bold, etc. */
    font-style: normal; /* Opcional: define si es italic, oblique, etc. */
}

@font-face {
    font-family: 'Caligrafica';
    src: url('/assets/fonts/Kingthings\ Calligraphica\ Italic.ttf') format('truetype');
    font-weight: normal; /* Opcional: define si es regular, bold, etc. */
    font-style: italic; /* Opcional: define si es italic, oblique, etc. */
}

@font-face {
    font-family: 'Caligrafica';
    src: url('/assets/fonts/Kingthings\ Calligraphica\ Light.ttf') format('truetype');
    font-weight: light; /* Opcional: define si es regular, bold, etc. */
    font-style: normal; /* Opcional: define si es italic, oblique, etc. */
}

@font-face {
    font-family: 'Creato';
    src: url('/assets/fonts/CreatoDisplay-Regular.otf') format('otf');
    font-weight: light; /* Opcional: define si es regular, bold, etc. */
    font-style: normal; /* Opcional: define si es italic, oblique, etc. */
}

@font-face {
    font-family: 'Creato';
    src: url('/assets/fonts/CreatoDisplay-Medium.otf') format('otf');
    font-weight: bold; /* Opcional: define si es regular, bold, etc. */
    font-style: normal; /* Opcional: define si es italic, oblique, etc. */
}

@font-face {
    font-family: 'Sterling';
    src: url('/assets/fonts/Sterling\ heights\ Font.ttf')format('truetype');
    font-weight: normal; /* Opcional: define si es regular, bold, etc. */
    font-style: normal; /* Opcional: define si es italic, oblique, etc. */
}

/*ESTILOS GENERALES*/
h1 {
    font-family: 'Sterling';
    font-size:80px;
    color: antiquewhite;
    text-align: center; /* Asegura que el texto esté centrado si hay varias líneas */
    margin-bottom: 7rem;  /* El texto se posicionará relativo al viewport */
    margin-top: 4rem;  /* El texto se posicionará relativo al viewport */
}

h2 {
    font-family: 'Caligrafica';
    font-size:80px;
} 

h3 {
    font-family: 'Caligrafica';
    font-style: italic;
    font-weight: normal;
    font-size:50px;
} 

h4 {
    font-family: 'Sterling';
    font-size:50px;
} 

p{
    font-family: 'Creato';
    font-size: 18px;
}
ol{
    font-family: 'Creato';
    font-size: 18px;
}
li{
    font-family: 'Creato';
    font-size: 18px;
}

/*ESTILOS DEL MENU DE NAVEGACION*/
.navbar{
	font-family: var(-sans-serif);
    padding: 1rem;
	font-size: 1rem;
	font-weight: normal;
	background-color: transparent; /*para que se vea la img de fondo*/
	transition: background-color 0.3s ease; /* Para un efecto de transición suave */
}

.nav-item {
    color:antiquewhite;
    font-family: 'Creato';
}
.navbar li{
    font-family: 'Creato';
    font-size: 18px;
    font-weight: bold;
    margin-left: -0.8rem;
}

.navbar:hover .navbar-toggler {
    border: 2px solid antiquewhite; /* Borde blanco cuando el navbar está en hover */
}

/* Cambiar el color de fondo de todo el navbar cuando el botón esté activo */
.navbar:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='antiquewhite' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    /*donde pone stroke es el color de las tres lineas, se puede modificar*/
}
/*FIN ESTILOS DEL MENU DE NAVEGACION*/


/*ESTILOS DEL LOGO*/
#logo {
	display: inline-block;
	vertical-align: middle;
	width: 80px;
    margin-left: auto; /* Empuja el logo hacia la derecha */
    margin-right: 0; /* Asegura que no haya margen hacia la derecha */
}
#logo img{
	display: block;
	width: 100%;
	height: auto;
}
/*FIN ESTILOS DEL LOGO*/



/*ESTILOS DEL BOTÓN HAMBURGUESA*/
#burgerIcon {
    color:transparent;
	border:2px solid antiquewhite;
    margin-left: 0; /* Asegura que no haya margen hacia la izquierda */
    margin-right: auto; /* Empuja el logo hacia la derecha */
}
/*FIN ESTILOS BOTÓN HAMBURGUESA*/



/*ESTILOS DEL FOOTER*/

#footer {
	background-color: maroon;
    color: antiquewhite;
}

#footer ul,#footer li, #footer span, #footer a, #footer p2, #footer h5,#footer .nav-link,#footer p2  {
    color: antiquewhite;
}

#footer ul:hover,#footer li:hover, #footer span:hover, #footer a:hover, #footer p2:hover, #footer h5:hover,#footer .nav-link:hover,#footer .bi:hover  {
    color:#ffbd71 !important;
    transition: color 0.3s ease !important;
}


/*FIN ESTILOS DEL FOOTER*/


/*ESTILOS DE LA PÁGINA PRINCIPAL (INDEX)*/
#principalPagina #burgerIcon{
	border:2px solid black;
}

#principalPagina #MenuNavegacion li, #principalPagina #MenuNavegacion a{
	color: rgb(0, 0, 0,0.7) !important;
    /*color:black;*/
}

#principalPagina .navbar:hover{
    background-color: antiquewhite !important;
    z-index: 1; 
}

#principalPagina .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    /*donde pone stroke es el color de las tres lineas, se puede modificar*/
}

#principalPagina #MenuNavegacion a:hover {
    color: rgba(0, 0, 0, 0.9) !important; /* Oscurece ligeramente el color */
    transition: color 0.3s ease; /* Suaviza la transición */
}

#principalPagina h5, #principalPagina a {
    color:antiquewhite;
}

#principalPagina h1 {
    font-family: 'Sterling';
    color:black;
    font-size:6vw;
    top: 12vw; /* Distancia desde la parte superior del viewport */    
    left:50%;
    transform: translate(-50%, -25%); /* Ajusta para centrarlo completamente */
    text-align: center; /* Asegura que el texto esté centrado si hay varias líneas */
    width: 80%; /* Asegura que el contenedor ocupe todo el ancho */
    position: absolute;
    line-height:1.9;  /* El texto se posicionará relativo al viewport */
}

#principalPagina h6 {
    font-family: 'Sterling';
    color:black;
    font-size:18px;
    margin-bottom: -0.5rem;
}


#principalPagina #logo-principal {
	display: inline-block;
	top: 35vw; /* Distancia desde la parte superior del viewport */    
    left:50%;
    transform: translateX(-50%); /* Ajusta para centrarlo completamente */
    text-align: center; /* Asegura que el texto esté centrado si hay varias líneas */
    position:absolute;
}

#principalPagina #logo-principal img {
    width: 15vw; /* El ancho será el 10% del ancho del viewport */
    height: auto; /* Mantiene las proporciones */
}

.acento {
    position: relative;
  }
  
  .acento::after {
    content: "´"; /* Unicode para la tilde */
    font-family: 'Sterling';
    font-size:6vw;
    position: absolute;
    top:7vw;
    left: -0.1em; /* Ajusta la posición horizontal */
    color: inherit; /* Hereda el color del texto */
  } 

  #principalPagina .carta-pico {
    background-image: url(/assets/img/index/carta.png);
    background-repeat: no-repeat;
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-position: bottom center; /* Fija el borde inferior de la imagen */
    height: 45vw; /* La sección ocupará el 100% del alto del viewport */
}

#principalPagina {
    background-image: url(/assets/img/index/fondocarta.png);
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
}

#principalPagina #sinopsis .text-justify{
	text-align: justify;
    margin-left: 40PX;
}

#principalPagina #sinopsis{
	margin-top: 6vw;
}

#principalPagina h2{
    color: maroon;
}

#principalPagina p {
	color: black;
}

#principalPagina #rrss a {
	color: black;
  }


#principalPagina #rrss a:hover {
	color: darkred;
}

/*Media queries index.html*/
@media (max-width: 576px) {

    #principalPagina #sinopsis{
        margin-top: 0vw;
    }

    #principalPagina .grande{
        font-size:40px;
    }

    #principalPagina h2{
        font-size:25px !important;
    }
}


@media (max-width: 600px) {

    #principalPagina h2{
        font-size:40px !important;
    }
}

@media (max-width: 768px) {
    #principalPagina .grande{
        font-size:50px;
    }

    #principalPagina h2{
        font-size:65px !important;
    }
    #principalPagina h1{
        top:6vw !important;
    }
}

@media (max-width: 992px) {
    #principalPagina #logo-principal img {
        width: 20vw !important; /* El ancho será el 10% del ancho del viewport */
    }

    #principalPagina #logo-principal {
        top: 30vw !important; /* Distancia desde la parte superior del viewport */    
    }
    #principalPagina .grande{
        font-size:70px;
    }

    #principalPagina #sinopsis img{
        margin-top: 4rem;
    }

    #principalPagina h2{
        font-size:75px !important;
    }
}


@media (max-width: 1200px) {
    #principalPagina #logo-principal {
        top: 35vw; /* Distancia desde la parte superior del viewport */    
    }
    #principalPagina #logo-principal img {
        width: 15vw; /* El ancho será el 10% del ancho del viewport */
    }

    #principalPagina h2{
        font-size:80px !important;
    }
    #principalPagina #sinopsis .text-justify{
        text-align: justify;
        margin-left: 0;
    }
}

@media (max-width: 1400px ) {

    #principalPagina h2{
        font-size:80px !important;
    }
}

/*End media queries index.html*/
 
/*--------------------------------------------------------------
# Contacto Section
--------------------------------------------------------------*/
.contact .info-item{
    margin-top: 40px;
  }
  
  .contact .info-item i {
    color: black;
    background: color-mix(in srgb, black, transparent 80%);
    font-size: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
    margin-right: 15px;
  }
  
  .contact .info-item h3 {
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    color:darkred;
  }
  
  .contact .info-item p {
    padding: 0;
    margin-bottom: 0;
    font-size: 15.5px;
  }
  
  .contact .info-item:hover i {
    background: darkred;
    color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /*Añade un poco de sombra*/
    transform: scale(1.05);  /* Aumenta un poco el tamaño */
  }

  .contact .php-email-form {
    height: 100%;
  }
  
  .contact .php-email-form input[type=text],
  .contact .php-email-form input[type=email],
  .contact .php-email-form textarea {
    font-size: 14px;
    padding: 10px 15px;
    box-shadow: none;
    border-radius: 0;
    color: black;
    background-color: color-mix(in srgb, var(---color), transparent 50%);
    border-color: color-mix(in srgb, black, transparent 20%);
  }
  
  .contact .php-email-form input[type=text]:focus,
  .contact .php-email-form input[type=email]:focus,
  .contact .php-email-form textarea:focus {
    border-color: darkred;
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /*Añade un poco de sombra*/
  }
  
  .contact .php-email-form input[type=text]::placeholder,
  .contact .php-email-form input[type=email]::placeholder,
  .contact .php-email-form textarea::placeholder {
    color: color-mix(in srgb, darkred, transparent 30%);
  }
  
  .contact .php-email-form button[type=submit] {
    color: white;
    background: darkred;
    border: 0;
    padding: 10px 30px;
    transition: 0.4s;
    border-radius: 50px;
  }
  
  .contact .php-email-form button[type=submit]:hover {
    background: color-mix(in srgb, darkred, transparent 25%);
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /*Añade un poco de sombra*/
    transform: scale(1.05);  /* Aumenta un poco el tamaño */
  }
  


  /* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
    display: none;
    background: darkred;
    color: #ffffff;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
  }
  
  .php-email-form .sent-message {
    display: none;
    color: #ffffff;
    background: #059652;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
  }
  
  .php-email-form .loading {
    display: none;
    background: var(--surface-color);
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
  }
  
  .php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%; 
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid var(--accent-color);
    border-top-color: var(--surface-color);
    animation: php-email-form-loading 1s linear infinite;
  }
  
  @keyframes php-email-form-loading {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }

/*FIN ESTILOS DE LA PÁGINA PRINCIPAL (INDEX)*/




/*ESTILOS DE LA PÁGINA SOBRE NOSOTROS*/
.sobreImagen{
	background-image: url(/assets/img/sobreNosotros/fondoDifu.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	margin-bottom: 0;
}

#sobreNosotrosPagina .sobreNosotros{
	padding-top: 50px;
	padding-bottom: 50px;
}

#sobreNosotrosPagina #footer {
	background-color: antiquewhite;
    color: maroon;
}

#sobreNosotrosPagina #footer li, #footer span, #footer a, #footer p2 {
    color: maroon;
}

#footerblanco li:hover, #footerblanco span:hover, #footerblanco a:hover, #footerblanco p2:hover, #footerblanco .nav-link:hover,#footerblanco .bi:hover {
    color: rgb(208, 48, 48) !important;
    transition: color 0.3s ease !important;
}

#sobreNosotrosPagina .correo {
	color: rgb(208, 48, 48);
	text-decoration: underline;
}

#sobreNosotrosPagina .correo:hover{
	color: black !important;
}

/* Estilos para centrar y ajustar el texto y la imagen */
#sobreNosotrosPagina .sobreNosotros h2 {
    text-align: center; /* Centrar texto */
}
#sobreNosotrosPagina .sobreNosotros p {
    text-align: center; /* Centrar texto */
	font-size: 19px;
    margin-top: 5rem;
    margin-bottom: 2rem;
    color:antiquewhite;
}

#sobreNosotrosPagina .sobreNosotros img{
    display: block; /* Para que la imagen actúe como un elemento bloque */
    margin: 0 auto; /* Centrar la imagen horizontalmente */
    max-width: 50%; /* Ajustar el tamaño máximo al 50% del contenedor */
}

/*ESTILOS SOBRE LA IDEA, COPIADOS DE UNA PLANTILLA*/
#sobreNosotrosPagina .idea {
    display: flex;
    flex-wrap: wrap; /* Permitir que los elementos se ajusten en pantallas pequeñas */
    align-items: center; /* Centrar verticalmente */
    margin-bottom: 40px; /* Espaciado con la siguiente sección */
    position: relative; /* Esto puede ser útil para su contexto */
}

#sobreNosotrosPagina .idea .idea-img {
	position: relative;
	left: 5%;
    flex: 1; /* Deja que la imagen tome la mitad del espacio */
    max-width: 50%; /* Restringir el tamaño máximo */
    margin: 0 auto; /* Centrado */
}

#sobreNosotrosPagina .idea .idea-text {
	position: relative;
    flex: 0.7;/* El texto ocupa la otra mitad */
    margin: 8rem auto 0;/* Ajusta márgenes superiores e inferiores */
    padding: 50px; /* Espaciado interno */
    background-image: url('/assets/img/sobreNosotros/recorte.png');
    background-size: 100% 100%; /* Mantiene las proporciones originales de la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen en el recuadro */
    border: none; /* Opcional: elimina bordes, si los tienes */
   /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);*/
    text-align: center; /* Centra el texto dentro del recuadro */
}

/*Media queries sobreNosotros.html*/

@media (max-width: 576px ) {
    #sobreNosotrosPagina .sobreNosotros p {
        font-size: 17px;
        margin-top: 3rem;
    }

    #sobreNosotrosPagina .sobreNosotros h1 {
        font-size: 35px;
    }

    #sobreNosotrosPagina .idea .idea-text {
        max-width: 100%; /* Mantén el texto más ancho */
        margin-top: 25%;
        margin-left: -70%;
    }
}

@media (min-width: 768px) { /* md o mayor */
    #sobreNosotrosPagina .actor-img {
        flex: 0 0 200px; 
    }
    #sobreNosotrosPagina .actor-text {
        flex: 1; 
        margin-top: 0rem;
    }
}
/* Asegurarse de que la siguiente sección no tenga margen superior */

@media (max-width: 768px) {
    #sobreNosotrosPagina .sobreNosotros img {
        max-width: 80%; /* Aumenta el tamaño en pantallas más pequeñas */
    }
    
    #sobreNosotrosPagina .grande{
        font-size:50px;
    }

    #sobreNosotrosPagina h1{
        font-size:40px; /* disminuye el tamaño en pantallas más pequeñas */
        line-height: 2.2;
        margin-bottom: 4rem;  /* El texto se posicionará relativo al viewport */
        margin-top: 1rem;
    }
}

@media (max-width: 992px ) {
	#sobreNosotrosPagina .idea {
		max-width: 120% !important;
        padding: 0 !important;
        margin: 0 !important;
	}
    #sobreNosotrosPagina .idea .idea-img {
        max-width:1%; 
        /*margin-right: -8%; 
        margin-top: -35%;*/
		opacity:0%
    }
    #sobreNosotrosPagina .idea .idea-text {
        position: relative;
		right:14% !important;
        margin-top: 10% !important;
        max-width: 120% !important;
	}

    #sobreNosotrosPagina .grande{
        font-size:70px;
    }
}

@media (max-width: 1200px) {
    #sobreNosotrosPagina .idea .idea-img {
        max-width: 75%; 
        margin-right: -8%; 
        margin-top: -5%;
		position: relative;
		bottom: 90px;
		left:20px;

    }
    #sobreNosotrosPagina .idea .idea-text {
        max-width: 60%; 
        margin-left: -35%; 
        margin-top: -50%;
    }
}

@media (max-width: 1388px) {
    #sobreNosotrosPagina .idea .idea-img {
        max-width: 70%; /* Reduce el tamaño de la imagen */
        margin-right: -8%; /* Ajusta el solapamiento */
        margin-top: 0%;
    }

    #sobreNosotrosPagina .idea .idea-text {
        max-width: 60%; /* Mantén el texto más ancho */
        margin-left: -35%; /* Ajusta el solapamiento */
        margin-top: 15%;
    }
}

@media (max-width: 1400px ) {
    #sobreNosotrosPagina h1{
        font-size:60px; /* disminuye el tamaño en pantallas más pequeñas */
    }
}
/*End Media queries sobreNosotros.html*/


/* Estilos para la nueva sección */
#sobreNosotrosPagina .actor-container {
	margin-top: 60px; /* Espaciado con la secci%C3%B3n anterior */    
    background-color: black; /* Color de fondo sólido para la franja */
    padding: 40px 0; /* Espaciado arriba y abajo */
    color: antiquewhite; /* Color del texto en blanco */
}

/* Contenedor principal de la franja */
#sobreNosotrosPagina .actor {
    display: flex; /* Usamos flexbox para colocar la imagen y el texto en una fila */
    justify-content: space-between; /* Espacio entre los elementos */
    align-items: center; /* Alineación vertical en el centro */
    max-width: 1200px; /* Ancho máximo de la franja */
    margin: 0 auto; /* Centra el contenido */
    padding: 0 20px; /* Espaciado lateral */
}

/* Imagen del actor */
#sobreNosotrosPagina .actor-img img {
    width: 300px; /* Ajusta el tamaño de la imagen */
    height: auto; /* Mantiene la proporción */
    border-radius: 8px; /* Bordes redondeados para la imagen */
}

/* Información del actor */
#sobreNosotrosPagina .actor-text {
    margin-top: 2rem;
    color: antiquewhite;
    flex: 1; /* Toma el espacio restante */
    padding-left: 20px; /* Espaciado entre la imagen y el texto */
}

#sobreNosotrosPagina .actor p {
    color: antiquewhite;
}


#sobreNosotrosPagina #imagengrupal {
    position: relative; /* Asegura que los elementos hijos se posicionen en relación al div */
    width: 100%;
    height: auto;
    margin-top: -5rem;
}

  
#sobreNosotrosPagina .equipo p {
    color: antiquewhite;
}

#sobreNosotrosPagina .equipo{
	color:antiquewhite;
	background-color: transparent; /* Fondo transparente */    
	background-image: url('/image/fondo-color-marron-sencillo_1106493-225741.jpg.avif'); /* Si quieres que la imagen de fondo contin%C3%BAe */    
	background-position: center; /* Centra la imagen */    
	background-size: cover; /* Asegura que cubra toda la secci%C3%B3n */
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin-top:12rem;
	
}
/*FIN ESTILOS DE LA PÁGINA SOBRE NOSOTROS*/


/* Estilos para la nueva sección */
#sobreNosotrosPagina .actor-container {
	margin-top: 60px; /* Espaciado con la secci%C3%B3n anterior */    
    background-color: black; /* Color de fondo sólido para la franja */
    padding: 40px 0; /* Espaciado arriba y abajo */
    color: antiquewhite; /* Color del texto en blanco */
}

/* Contenedor principal de la franja */
#sobreNosotrosPagina .actor {
    display: flex; /* Usamos flexbox para colocar la imagen y el texto en una fila */
    justify-content: space-between; /* Espacio entre los elementos */
    align-items: center; /* Alineación vertical en el centro */
    max-width: 1200px; /* Ancho máximo de la franja */
    margin: 0 auto; /* Centra el contenido */
    padding: 0 20px; /* Espaciado lateral */
}

/* Imagen del actor */
#sobreNosotrosPagina .actor-img img {
    width: 300px; /* Ajusta el tamaño de la imagen */
    height: auto; /* Mantiene la proporción */
    border-radius: 8px; /* Bordes redondeados para la imagen */
}

/* Información del actor */
#sobreNosotrosPagina .actor-text {
    margin-top: 2rem;
    color: antiquewhite;
    flex: 1; /* Toma el espacio restante */
    padding-left: 20px; /* Espaciado entre la imagen y el texto */
}

#sobreNosotrosPagina .actor p {
    color: antiquewhite;
}


#sobreNosotrosPagina #imagengrupal {
    position: relative; /* Asegura que los elementos hijos se posicionen en relación al div */
    width: 100%;
    height: auto;
    margin-top: -5rem;
}


#sobreNosotrosPagina .encima {
    font-size: 150px;
    position:relative; /* Posiciona el texto encima de la imagen */ 
    left: 50%;
    margin-top:-35vw;
    margin-bottom:30vw;
    transform: translate(-50%);
    text-align: center;
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); /* Para mayor legibilidad sobre imágenes */
  }

  
#sobreNosotrosPagina .equipo p {
    color: antiquewhite;
}

#sobreNosotrosPagina .equipo{
	color:antiquewhite;
	background-color: transparent; /* Fondo transparente */    
	background-image: url('/image/fondo-color-marron-sencillo_1106493-225741.jpg.avif'); /* Si quieres que la imagen de fondo contin%C3%BAe */    
	background-position: center; /* Centra la imagen */    
	background-size: cover; /* Asegura que cubra toda la secci%C3%B3n */
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin-top:12rem;
	
}
/*FIN ESTILOS DE LA PÁGINA SOBRE NOSOTROS*/



/*ESTILOS DE LA PÁGINA EL PROCESO*/
#elProcesoPagina{
	background-image: url(/assets/img/sobreNosotros/fondoDifu.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	margin-bottom: 0;
    color: antiquewhite;
}  

#elProcesoPagina h2{
    font-family: 'Caligrafica';
    font-size: 80px;
    color: antiquewhite;
    text-align: center; /* Asegura que el texto esté centrado si hay varias líneas */
    margin-bottom: 2rem;  /* El texto se posicionará relativo al viewport */
}

#elProcesoPagina h3 {
    font-family: 'Caligrafica';
    font-size:46px;
    color: antiquewhite;
    font-style: normal;
}  

#elProcesoPagina #introProceso p{
	font-size:19px;
    margin: auto;
    margin-bottom: 5rem; 
    margin-top: -1rem;
    max-width: 80%; /* Define el ancho máximo del párrafo */
    text-align: center; /* Opcional: alinea el texto al centro */
    line-height: 1.6; /* Ajusta la separación entre líneas para mejor legibilidad */
    padding: 0 20px; /* Agrega un pequeño relleno lateral para evitar que el texto toque los bordes */
    color:antiquewhite;
}

#elProcesoPagina #introProceso{
	text-align: center;
}

#elProcesoPagina #introProceso img{
	max-width: 8rem;
    max-height: auto;
}

#elProcesoPagina #guionroles{
	background-image: url(/assets/img/elProceso/guion.png);
	background-size: cover;
}

#elProcesoPagina #produccion{
	text-align: right;
	background-image: url(/assets/img/elProceso/coordinacion.png);
	background-size: cover;
}

#elProcesoPagina #artefoto{
	background-image: url(/assets/img/elProceso/estilo.png);
	background-size: cover;
    background-position: right;
}

#elProcesoPagina #postproduccion{
	background-image: url(/assets/img/elProceso/montaje.png);
	background-size: cover;
    background-position: center;
    color: antiquewhite;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}


#elProcesoPagina #rodaje .carousel {
    max-width: 80%; /* Ocupa el 90% del ancho del contenedor */
    margin: 0 auto; /* Centra el carrusel */
}

#elProcesoPagina #rodaje .carousel img {
    max-height: 600px; /* Altura máxima para las imágenes */
    width: 100%; /* Asegura que las imágenes sean responsive */
    object-fit: cover; /* Ajusta el contenido de las imágenes */
}

#elProcesoPagina main a{
    color: rgb(167, 1, 1);
}


/*Medias queries elProceso.html*/
@media (max-width: 1400px) {
    #elProcesoPagina #rodaje .carousel img {
        max-height: 500px; /* Reduce la altura en dispositivos pequeños */
    }
    #elProcesoPagina h1{
        font-size:60px;; /* disminuye el tamaño en pantallas más pequeñas */
    }
}

@media (max-width: 1400px) and (min-width:768px) {
    #elProcesoPagina #guionroles .no-wrap {
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;  /* Mantiene las palabras juntas */
}
}

@media (max-width: 1200px) {
    #elProcesoPagina #rodaje .carousel img {
        max-height: 450px; /* Reduce la altura en dispositivos pequeños */
    }
}
@media (max-width: 992px) {
    #elProcesoPagina #rodaje .carousel img {
        max-height: 350px; /* Reduce la altura en dispositivos pequeños */
    }
    #elProcesoPagina #rodaje .carousel {
        max-width: 90%; /* Ocupa el 90% del ancho del contenedor */
    }
}

@media (max-width: 768px) {
    #elProcesoPagina #rodaje .carousel {
        max-width: 100%; /* Ocupa el 90% del ancho del contenedor */
    }
    #elProcesoPagina #rodaje .carousel img {
        max-height: 350px; /* Reduce la altura en dispositivos pequeños */
    }
    #elProcesoPagina h1{
        font-size:40px; /* disminuye el tamaño en pantallas más pequeñas */
        line-height: 2.2;
        margin-bottom: 4rem;  /* El texto se posicionará relativo al viewport */
        margin-top: 1rem;
    }
    #elProcesoPagina h2{
        font-size: 70px;
    }
    #elProcesoPagina #guionroles h3,#elProcesoPagina #produccion h3,#elProcesoPagina #artefoto h3{
        text-align: center;/* Reduce la altura en dispositivos pequeños */
    }
    #elProcesoPagina #guionroles {
        text-align: justify;/* Reduce la altura en dispositivos pequeños */
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
        background-image: url(/assets/img/elProceso/guionpeque.png);
    }
	 #elProcesoPagina #produccion {
        text-align: justify;/* Reduce la altura en dispositivos pequeños */
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
        background-image: url(/assets/img/elProceso/coordinacionpeque.png);
    }
	#elProcesoPagina #artefoto{
        text-align: justify;/* Reduce la altura en dispositivos pequeños */
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
        background-image: url(/assets/img/elProceso/estilopeque.png);
    }
    #elProcesoPagina #introProceso img{
        margin-top: -2rem;
        margin-bottom: -3rem;
        max-width: 6rem;
        max-height: auto;
    }
}

/* Ajustes para pantallas muy pequeñas (como móviles) */
@media (max-width: 576px) {
    #elProcesoPagina #rodaje .carousel img {
        max-height: 300px; /* Altura aún más pequeña */
    }
    #elProcesoPagina #preproduccion h2{
        text-align: left;/* Reduce la altura en dispositivos pequeños */
    }
    #elProcesoPagina #artefoto .no-wrap {
        display: flex;
        flex-wrap: wrap;
        white-space: nowrap;  /* Mantiene las palabras juntas */
    }
}
/*End Media queries elProceso.html

/*FIN ESTILOS DE LA PÁGINA EL PROCESO*/




/*ESTILOS DE LA PÁGINA OTROS PROYECTOS*/
#otrosProyectosPagina{
	background-image: url(/assets/img/sobreNosotros/fondoDifu.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	margin-bottom: 0;
    color:antiquewhite;
}  


#otrosProyectosPagina #carouselExampleAutoplaying {
    position: relative;
    margin-bottom: 5rem;
    top:0;
    z-index: 1;
}

#otrosProyectosPagina .carousel-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 13vw; /* Ajusta la separación desde arriba */
    white-space: nowrap; /* Evita que el texto se divida en líneas */
    z-index: 2; /* Asegúrate de que esté por encima del carrusel */
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); /* Para mayor legibilidad sobre imágenes */
    font-size:8vw;
}

#otrosProyectosPagina .carousel-inner {
	height: 100vh;
}

/*OPACIDAD IMÁGENES*/
.carousel-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* opacidad*/
    z-index: 1;
  }

  .carousel-title {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    z-index: 2;
  }
  /*FIN OPACIDAD IMÁGENES*/
  

#otrosProyectosPagina .navbar{
	font-family: var(-sans-serif);
	font-size: 1rem;
	font-weight: normal;
	/*background-color: transparent; /*para que se vea la img de fondo*/
	position: absolute; /* Para que el navbar quede encima del carrusel */    
	top: 0;    
	left: 0;   
	width:100%;
	z-index: 10; /* Asegura que est%C3%A9 encima del carrusel */
}

#otrosProyectosPagina #MenuNavegacion li, #otrosProyectosPagina #MenuNavegacion a{
    color: rgb(0, 0, 0,0.7) !important;
}

#otrosProyectosPagina #MenuNavegacion a:hover {
    color: rgba(0, 0, 0, 0.9) !important; /* Oscurece ligeramente el color */
    transition: color 0.3s ease !important; /* Suaviza la transición */
}

#otrosProyectosPagina .navbar:hover .navbar-toggler {
    border: 2px solid antiquewhite; /* Borde blanco cuando el navbar está en hover */
}

/* Cambiar el color de fondo de todo el navbar cuando el botón esté activo */
#otrosProyectosPagina .navbar:hover {
    /*background-color: rgb(250, 235, 215, 0.7); /* Color sólido */
    background-color: antiquewhite;
}


#otrosProyectosPagina .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    /*donde pone stroke es el color de las tres lineas, se puede modificar*/
}

#otrosProyectosPagina #burgerIcon {
	color:transparent; 
	border:2px solid black;
	z-index: 11;
}


#otrosProyectosPagina #logo {
	display: inline-block;
	vertical-align: middle;
	width: 80px;
	z-index: 11;
}
#otrosProyectosPagina #logo img{
	display: block;
	width: 100%;
	height: auto;
}

#otrosProyectosPagina .content{
    padding: 2rem;
}

#footerblanco {
	background-color: antiquewhite;
    color: maroon;
}

#footerblanco li, #footerblanco span, #footerblanco a, #footerblanco p2, #footerblanco .nav-item {
    color: maroon;
}

#otrosProyectosPagina .correo {
	color: rgb(208, 48, 48);
	text-decoration: underline;
}

#otrosProyectosPagina .correo:hover{
	color: black !important;
}


/*Media queries otrosProyectos.html*/
@media (max-width: 1200px) {
    #otrosProyectosPagina .carousel-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap; /* Evita que el texto se divida en líneas */
        top: 8rem; /* Ajusta la separación desde arriba */
        z-index: 2; /* Asegúrate de que esté por encima del carrusel */
        text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); /* Para mayor legibilidad sobre imágenes */
    }
    #otrosProyectosPagina #carouselExampleAutoplaying {
        height: 75vh;
    }
}

@media (max-width: 768px) {
    #otrosProyectosPagina .carousel-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap; /* Evita que el texto se divida en líneas */
        top: 8rem; /* Ajusta la separación desde arriba */
        z-index: 2; /* Asegúrate de que esté por encima del carrusel */
        text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); /* Para mayor legibilidad sobre imágenes */
    }
    #otrosProyectosPagina #carouselExampleAutoplaying {
        margin-bottom: 0rem;
        height: 60vh;
    }
    #otrosProyectosPagina #chocolatada {
        margin-top: 2rem;
    }
}

@media (max-width: 576px) {
    #otrosProyectosPagina .carousel-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap; /* Evita que el texto se divida en líneas */
        top: 6rem; /* Ajusta la separación desde arriba */
        z-index: 2; /* Asegúrate de que esté por encima del carrusel */
        text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); /* Para mayor legibilidad sobre imágenes */
    }
    #otrosProyectosPagina #carouselExampleAutoplaying {
        margin-bottom: 2rem;
        height: 45vh;
    }
}
/*End *Media queries otrosProyectos.html*/
/*FIN ESTILOS DE LA PÁGINA OTROS PROYECTOS*/



/* ESTILOS DE LA PÁGINA AGRADECIMIENTOS*/
#agradecimientosPagina #burgerIcon{
	border:2px solid black;
}

#agradecimientosPagina #MenuNavegacion li, #principalPagina #MenuNavegacion a{
	/*color: rgb(0, 0, 0,0.7);*/
    color:black;
}

#agradecimientosPagina .navbar:hover{
    background-color: antiquewhite;
    z-index: 1; 
}

#agradecimientosPagina .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    /*donde pone stroke es el color de las tres lineas, se puede modificar*/
}

#agradecimientosPagina .carta-pico {
    background-image: url(/assets/img/index/carta.png);
    background-repeat: no-repeat;
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-position: bottom center; /* Fija el borde inferior de la imagen */
    height: 40vw; /* La sección ocupará el 100% del alto del viewport */
}

#agradecimientosPagina {
    background-image: url(/assets/img/index/fondocarta.png);
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
}

#agradecimientosPagina h1 {
    font-family: 'Sterling';
    top: 8vw; /* Distancia desde la parte superior del viewport */    
    left:50%;
    transform: translate(-50%, -15%); /* Ajusta para centrarlo completamente */
    text-align: center; /* Asegura que el texto esté centrado si hay varias líneas */
    width: 80%; /* Asegura que el contenedor ocupe todo el ancho */
    position: absolute;
    line-height:1.9;  /* El texto se posicionará relativo al viewport */
    color:black;
    font-size: 90px;
}  


#agradecimientosPagina h6 {
    font-family: 'Sterling';
    line-height: 1.6;
    font-size:20px; 
    left:70%;   
    position: absolute;
    line-height:1.9;  /* El texto se posicionará relativo al viewport */
    color:black;
}

#agradecimientosPagina strong {
    color: antiquewhite;
    font-weight: bolder;
}

#agradecimientosPagina p {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    max-width: 75%;
    color: antiquewhite;
}

#agradecimientosPagina #lacarta {
    margin-top: 5rem;
}

#agradecimientosPagina #logo-principal {
	display: inline-block;
	top: 30vw; /* Distancia desde la parte superior del viewport */    
    left:50%;
    transform: translateX(-50%); /* Ajusta para centrarlo completamente */
    text-align: center; /* Asegura que el texto esté centrado si hay varias líneas */
    position:absolute;
}

#agradecimientosPagina #logo-principal img {
    width: 13vw; /* El ancho será el 10% del ancho del viewport */
    height: auto; /* Mantiene las proporciones */
}


/* #agradecimientosPagina Estilo para los elementos individuales */
#agradecimientosPagina .gallery-item {
    position: relative;
    display: inline-block; /* Asegura que el contenedor se expanda al ancho de la imagen */
    overflow: hidden;
}

/* #agradecimientosPagina Imagenes con ajuste al tamaño */
#agradecimientosPagina .gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s;
}

/* #agradecimientosPagina Overlay que aparece al hacer hover */
#agradecimientosPagina .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Ajustar ancho al tamaño de la imagen */
    height:100%; /* Ajustar alto al tamaño de la imagen */
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

/* #agradecimientosPagina Aparece el overlay al hacer hover sobre la imagen */
#agradecimientosPagina .gallery-item:hover .overlay,
#agradecimientosPagina .gallery-item:focus .overlay {
    opacity: 1;
}

/* #agradecimientosPagina Texto al pasar el cursor o hacer clic */
#agradecimientosPagina .overlay p {
    padding: 10px;
    text-align: center;
    z-index: 1;
}

/* Centrar la galería y asegurar un tamaño adecuado en pantalla */
#agradecimientosPagina .gallery {
    position: relative;
    margin-top: 5vw;
	column-count: 4;
	column-gap: 10px;
    padding: 10px;
    left:50%;
    transform: translateX(-50%); /* Ajusta para centrarlo completamente */
    max-width: 80%; /* Limitar el ancho máximo de la galería */
}


/*Media queries agradecimientos*/
@media (min-width: 1400px) {   /*pantalla  extra extra grande*/
	#agradecimientosPagina .gallery{
		column-count: 5;
	    column-gap: 10px;
        margin-top: 5vw;
	}
}

@media (max-width: 1400px ) {
    #agradecimientosPagina h1{
        font-size:75px; /* disminuye el tamaño en pantallas más pequeñas */
    }
}

@media (max-width: 1200px ) {
    #agradecimientosPagina h1{
        font-size:70px; /* disminuye el tamaño en pantallas más pequeñas */
    }
    #agradecimientosPagina .gallery{
		column-count: 3;
	    column-gap: 10px;
		}
}

@media (max-width: 992px) {
    #agradecimientosPagina h1{
        font-size:60px; /* disminuye el tamaño en pantallas más pequeñas */
    }
    #agradecimientosPagina .carta-pico{
        height:50vw;
    }
    #agradecimientosPagina #logo-principal img {
        width: 20vw; /* El ancho será el 10% del ancho del viewport */
        height: auto; /* Mantiene las proporciones */
    }
    #agradecimientosPagina #logo-principal {
        top: 35vw; /* Distancia desde la parte superior del viewport */    
    }
    #agradecimientosPagina h6 {
        left: 50%; /* Distancia desde la parte superior del viewport */    
    }
    #agradecimientosPagina .gallery {
        margin-top: 10vw;
        max-width: 95%;
    }
}

@media (max-width: 800px) {
    #agradecimientosPagina h1{
        font-size:50px; /* disminuye el tamaño en pantallas más pequeñas */
    }
    #agradecimientosPagina .gallery{
		column-count: 2;
	    column-gap: 10px;
        max-width: 90%;
	}
}

@media (max-width: 700px) {
    #agradecimientosPagina h1{
        top:4vw;
        font-size:40px; /* disminuye el tamaño en pantallas más pequeñas */
    }
}

@media (max-width: 576px) {
    #agradecimientosPagina h1{
        font-size:35px; /* disminuye el tamaño en pantallas más pequeñas */
    }
    #agradecimientosPagina h6 {
        font-size: 17px;
        left: 40%; /* Distancia desde la parte superior del viewport */    
    }
    #agradecimientosPagina #logo-principal {
        top: 35vw; /* Distancia desde la parte superior del viewport */    
    }
    #agradecimientosPagina #logo-principal img {
        width: 25vw; /* El ancho será el 10% del ancho del viewport */
    }
    #agradecimientosPagina p{
       font-size: 10px;
    }
}

@media (max-width: 400px) {
    #agradecimientosPagina h1{
        font-size:25px; /* disminuye el tamaño en pantallas más pequeñas */
    }
}

/*End Media queries agradecimientos

/*FIN ESTILOS DE LA PÁGINA AGRADECIMIENTOS*/


/*Estilos loader*/

/*para resetear el navegador*/
* {
    margin: 0;
    padding: 0;
  }
  
  html {
    box-sizing: border-box;
  }
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
  /* fin reset del navegador */
  
  .section_loader {
    position: fixed;
    left:0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: antiquewhite;
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
  }
  
  .loader {
    position: relative;
    width: 60px;
    height: 60px;
  }
  
  .loader .loader_1 {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid maroon;
    border-left-color: transparent;
    border-bottom: none;
    border-radius: 50%;
    animation: loader-1 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
  }
  
  .loader .loader_2 {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 4px solid black;
    border-top-color: transparent;
    border-right: none;
    border-radius: 50%;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
    animation: loader-2 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
  }
  
  .show_loader {
    display: flex;
  }
  
  @keyframes loader-1 {
    0%{
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes loader-2 {
    0%{
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
  /*End estilos loader*/