@charset "UTF-8";
/*
Theme Name: cinePin-1.3-4
Theme URI: http://vivigomez.muyespecial.com/cinePin/
Author: Vivi Gomez
Author URI: http://www.muyespecial.com
Description: Un tema de WordPress basado en bloques con diseño de mosaico para entradas de cine
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cinePin-1.1
*/

/* Importar fuentes */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Inter:wght@400;700&Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");


body {
    font-family: "DM Sans", sans-serif;
}

.wp-block-post-content p {
	font-family: "Matemasie", sans-serif;
}


/* Estilo del HEADER del site threeJS */

/* Header Styles */
/* CONTIENE EL ROW CON GIF Y NAVIGATION */
.site-header {
    width: 100%;
    position: fixed;
    z-index: 101;
    font-family: "Josefin Sans", sans-serif;
}

/* CONTIENE EL NAVIGATION */
.header-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.header-menu li {
    display: inline-block;
}

.header-menu .a {
    display: inline-block; 
    color: #fff; 
	padding-top: 0.25rem;
	padding-right: 0.25rem;
	padding-bottom: 0.5rem;
	padding-left: 0.25rem;
    margin-right: 0.25rem;
    letter-spacing: .4em;
    font-size: .9em;
    transition: all 0.3s ease, color 0.3s ease;
}

.header-menu .a:hover {
    cursor: pointer;
    color: rgb(175, 175, 175); 
    transform: scale(1.1);
}

.header-menu .a:hover ~ .cursor {
    transform: translate(-50%, -50%) scale(5);
    opacity: 0.1; 
}



.wp-block-navigation {
    position: fixed;
    top: 0;
    /*left: 0;*/
    width: 100%;
    z-index: 2;
}

.wp-block-navigation-item__content {
    display: inline-block; 
    color: #fff; 
	padding-top: 0.5rem;
	padding-right: 1rem;
	padding-bottom: 0.25rem;
	padding-left: 1rem;
    margin-right: 4rem;
    letter-spacing: .4em;
    font-size: .9em;
    transition: all 0.3s ease, color 0.3s ease;
}

.wp-block-navigation-item__content:hover {
    cursor: pointer;
    color: rgb(175, 175, 175); 
    transform: scale(1.1); 
}

@media (max-width: 529px) {
    .header-menu .a {
        padding: 10px;
        margin-right: 0rem;
        letter-spacing: 0.3em;
    }
    .wp-block-navigation-item__content {
    	padding-top: 0.5rem;
    	margin-top: 0.25rem;
	padding-left: 0.1rem;
	padding-right: 0.1rem;
	margin-right: 0.2rem;
	letter-spacing: .2em;
	font-size: .6em;
    }
    .is-layout-flex {
    gap: 0;
    }
}
@media (min-width: 451px) AND  (max-width: 1024px) {
    .header-menu .a {
        padding: 10px;
        margin-right: 0rem;
        letter-spacing: 0.3em;
    }
    .wp-block-navigation-item__content {
    	padding-top: 0.5rem;
    	margin-top: 0.25rem;
	padding-left: 0.4rem;
	margin-right: 0.6rem;
	letter-spacing: .2em;
	font-size: .6em;
    }
    .is-layout-flex {
    gap: 0;
    }
}
.cursor {
    pointer-events: none;
    position: fixed; 
    top: 10px; 
    left: 10px;
    padding: 10px;
    background-color: #fff;
    border-radius: 50%; 
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition: transform .8s ease, opacity 0.6s ease;
    z-index: 9999;
}

.cursor.expand {
    transform: scale(2);
/*    transition: transform 0.3s ease;*/
}


/* GIF LOGO */

.gif-logo-navigation {
    position: relative;
}

.gif-logo-navigation > a {
    display: inline-block;
    color: #fff;
/*    padding: 0.25rem;*/
    	padding-top: 0.1rem;
	padding-right: 0.3rem;
	padding-bottom: 0.3rem;
	padding-left: 0.25rem;
    letter-spacing: .4em;
    font-size: .9em;
    transition: all 0.3s ease, color 0.3s ease;
}

.gif-logo-navigation > a::before, .gif-logo-navigation > a::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 102;
}

.gif-logo-navigation > a:hover {
    cursor: pointer;
    color: rgb(175, 175, 175);
}

.gif-logo-navigation > a:hover img {
    transform: scale(1.1);
}

.gif-logo-navigation > a:hover ~ .cursor {
    transform: translate(-50%, -50%) scale(5);
    opacity: 0.1;
}

/* Asegúrate de que la imagen dentro del enlace tenga una transición suave */
.gif-logo-navigation > a img {
    transition: transform 0.3s ease;
}



/* Estilo de header con animacion de entrada y salida */

.custom-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #000; /* Barra negra */
  height: 43px; /* Altura inicial */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Logo alineado a la izquierda */
  z-index: 9999; /* Asegura que el header esté siempre encima de otros elementos */
  transition: height 0.3s ease; /* Animación para el cambio de altura */
}

.custom-logo {
  height: 43px; /* Altura inicial del logo */
  transition: height 0.3s ease; /* Animación para el cambio de tamaño del logo */
  margin-left: 10px; /* Margen para separar el logo del borde izquierdo */
  top: 0;
}

.arriba-pegado {
  align-items: flex-start !important;
  top: 0px;
  vertical-align: top;
}


/* Estilos para el footer */
.site-footer {
    text-align: center;
    /* padding: 20px; */ 
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-icons a {
    color: white;
    font-size: 24px;
}


/* Estos estilos serán sobrescritos por el JavaScript en tiempo de ejecución */
/* Estilos base para ocultar elementos */

/* Hide on mobile devices in landscape or portrait */
@media only screen and (max-width: 600px) {
    .hide-on-mobile {
        display: none;
    }
}

/* Hide on tablet and desktop devices in landscape mode */
@media only screen and (min-width: 601px) and (orientation: landscape) {
    .hide-on-tablet-desktop {
        display: none;
    }
}

/* Hide on tablet and desktop devices in portrait mode */
@media only screen and (min-width: 601px) and (orientation: portrait) {
    .hide-on-tablet-desktop {
        display: none;
    }
}



/* para añadirle al plugin block-for-masonry-gallery un poco de estilo */

.mas-gal-gallery img {
	border-radius: 12px;
}


/* para crear el mosanry por css */

/* Estilos base */
.grid-mosaico-base {
    column-width: 13em;
    column-gap: 0.5em;
    width: 100%;
    margin: 0 auto;
    top: 40px;
    position: relative;
}

.grid-mosaico-item {
    display: inline-block;
    width: 100%;
/*    margin-bottom: 0em !important;*/
    margin-bottom: 6px;
    break-inside: avoid; /* Evita romper el contenido en columnas */
    position: relative;
    overflow: hidden;
}

.grid-mosaico-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    display: block; /* Elimina el espacio adicional debajo de la imagen */
}

.grid-mosaico-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    text-align: center;
    opacity: 0;
    z-index: 2; /* Asegura que el caption esté por encima de la imagen */
}

.grid-mosaico-caption.active {
    transform: translateY(0);
    opacity: 1;
}

.grid-mosaico-category {
    font-size: 10px; /* Tamaño de fuente más pequeño para la categoría */
    display: block;
    margin-bottom: 5px;
}

.grid-mosaico-title {
    font-size: 16px; /* Tamaño de fuente estándar para el título */
    font-weight: bold; /* Hacer el título más destacado */
    display: block;
}

.grid-mosaico-excerpt {
    font-size: 12px;
    display: block;
}

/* Media query for touch devices */
@media (hover: none) {
    .grid-mosaico-caption {
        transform: translateY(0);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .grid-mosaico-caption.active {
        opacity: 1;
    }
}

/* Estilos específicos para iOS */
@supports (-webkit-touch-callout: none) {
    .grid-mosaico-caption {
        position: absolute;
        bottom: 0;
        transform: translateY(0);
        opacity: 0;
    }
    
    .grid-mosaico-caption.active {
        opacity: 1;
    }
}

/* Media query para pantallas pequeñas */
@media (max-width: 480px) {
    .grid-mosaico-base {
        column-width: 10em;
    }
    .grid-mosaico-item {
/*    margin-bottom: 0em !important;*/
    margin-bottom: 6px;
    }    
    .grid-mosaico-item img {
    border-radius: 6px;
    }
    .mas-gal-gallery img {
    border-radius: 4px;
    }
    .grid-mosaico-category {
    font-size: 10px;
    }    
    .grid-mosaico-title {
    font-size: 14px;
    }
}

/*//////////////////// añadir CSS lightbox vimeo con 
/*Video Lightbox for YouTube/Vimeo */

.vimeo-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vimeo-lightbox-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    margin: auto;
}

.vimeo-container {
    position: relative;
    padding-bottom: 56.25%; /* Aspecto 16:9 */
    height: 0;
    overflow: hidden;
}

.vimeo-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.vimeo-close {
    position: absolute;
    right: -40px;
    top: -40px;
    width: 30px;
    height: 30px;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    z-index: 1000;
}

@media (max-width: 768px) {
    .vimeo-lightbox-content {
        width: 95%;
    }
    
    .vimeo-close {
        right: 0;
        top: -40px;
    }
}

/*////////////////////////////////////////////////////////////////////////*/
/* Ajustes para la animación Lottie en el Formulario Contacto */

/* Estilo específico para la página que contiene el Lottie y el formulario */
.pagina-lottie {
  position: relative;
  overflow: hidden;
  margin: 0;
  height: 100%;
  width: 100%;
}

.pagina-lottie .lottie-posicion-fondo {
  position: fixed;
  top: 50%;
  right: 0; /* Asegura que esté alineado al lado derecho */
  width: 100vw; /* Ajusta según sea necesario para evitar recortes */
  height: 100vh;
  transform: translate(0, -50%); /* Centra verticalmente la imagen */
  z-index: -1;
}

.pagina-lottie .contactando {
  position: fixed;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.3vh;
  z-index: 1;
  margin-block-start: 0rem !Important;
  font-family: "Josefin Sans", sans-serif !important;
  font-size: small;
}

@media (min-width: 801px) AND (max-width: 1400px){
  .pagina-lottie .contactando {
    width: 65%;
  }
}
@media (min-width: 1401px) {
  .pagina-lottie .contactando {
    width: 30%;
  }
}  


/*////////////////////////////////////////////////////////////////////////*/
/* Ajustes para PROTEGIDOS Formulario Contacto */

.password-protected-page {
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    margin: 0;
    padding: 0;
    background-color: #1D2517;
}

.password-background-image,
.password-background-image__dos,
.password-background-image__tres {
    position: fixed;
    background-size: initial;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: opacity 0.5s ease-in-out;
}

.password-background-image {
    background-image: url('https://vivigomez.muyespecial.com/wp-content/uploads/2024/09/comfyui-mano-depth_res_00001_pngquant.png');
}

.password-background-image__dos {
    background-image: url('https://vivigomez.muyespecial.com/wp-content/uploads/2024/09/comfyui-mano-depth_res_00003_pngquant.png');
}

.password-background-image__tres {
     background-image: url('https://vivigomez.muyespecial.com/wp-content/uploads/2024/09/comfyui-mano-depth_res_00126_pngquant.png');
}

.post-password-form {
    position: fixed;
    z-index: 10;
    width: 300px;
    transform: translate(-50%, -50%);
    padding-left: 5%;
}

.password-form-wrapper {
    position: relative;
}

.post-password-form input[type="password"] {
    width: 100%;
    padding: 10px;
    border: none;
    background: transparent;
    border-bottom: 2px solid #fff;
    color: #fff;
    margin-bottom: 10px;
    font-size: 18px;
    font-family: DM Sans, sans-serif;
}

.post-password-form input[type="password"]::placeholder {
    /*color: rgba(5, 5, 5, 0.7);*/
    color: rgba(255, 255, 255, 0.9);
}

.post-password-form input[type="submit"] {
    position: absolute;
    top: 29%;
    right: 0;
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-family: DM Sans, sans-serif;
}

.error-pass {
    color: red;
    position: fixed;
    top: -33%;
    left: 33%;
    font-size: smaller;
}

.too-many-attempts {
    position: fixed;
    top: 45%;
    left: 48%;
    transform: translate(-50%, -50%);
    /*background-color: rgba(255, 255, 255, 0.8);*/
    /*padding: 20px;*/
    border-radius: 10px;
    text-align: center;
    font-family: "DM Sans", sans-serif;
    font-size: 18px;
    color: #1D2517;
    z-index: 100;
}

.too-many-attempts-svg {
  width: 50px;
  height: auto;
  margin-right: 10px;
  vertical-align: middle;
}


@media (max-height: 850px) {
  .password-background-image,
  .password-background-image__dos,
  .password-background-image__tres {
    background-image: url('https://vivigomez.muyespecial.com/wp-content/uploads/2024/09/comfyui-mano-depth_res_00001_mobile-pngquant.png');
    scale: 1.4;
  }
  .password-background-image__dos {
    background-image: url('https://vivigomez.muyespecial.com/wp-content/uploads/2024/09/comfyui-mano-depth_res_00003_mobile-pngquant.png');
  }
  .password-background-image__tres {
    background-image: url('https://vivigomez.muyespecial.com/wp-content/uploads/2024/09/comfyui-mano-depth_res_00126_mobile-pngquant.png');
  }
  .too-many-attempts {
    position: fixed;
    top: 45%;
    left: 43%;
    /*font-size: 14px;*/
  }
  .too-many-attempts-svg {
  width: 30px;
  margin-bottom: 10px;
  }
  .error-pass {
    color: red;
    position: fixed;
    top: -43%;
    left: 3%;
    font-size: smaller;
}

  .post-password-form {
    width: 200px;
    padding-top: 20px;
    padding-left: 0%;
  }
  .post-password-form input[type="password"] {
    padding: 5px;
  }
  .post-password-form input[type="submit"] {
    color: transparent;
  }
}