/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 16 ago 2023, 12:00:28
    Author     : rober
*/

/* Estilos globales */

.hidden{
    display: none;
}

@media screen and (max-width: 767px) {
    /* Estilos para pantallas pequeñas (móviles) */
    
    .hidden-movile{
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    /* Estilos para tablets en posición vertical */
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    /* Estilos para tablets en posición horizontal */
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
    /* Estilos para pantallas medianas */
}

@media screen and (min-width: 1440px) {
    /* Estilos para pantallas grandes */
}

@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Estilos para pantallas de alta resolución (Retina) */
}

@media print {
    /* Estilos específicos para la impresión */
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    /* Estilos para pantallas pequeñas en modo retrato */
}

@media screen and (max-width: 767px) and (orientation: landscape) {
    /* Estilos para pantallas pequeñas en modo paisaje */
}

/* END Estilos globales */


/* Animaciones en entrada */

.effect-only-in-screen{
    /* Esta clase hace que sólo comience el efecto cuando sea visible */
}

.slide-in-left{ /* Entra por la izquierda */
    transform: translateX(-100%);
    opacity: 0;
}

.slide-in-left.visible { 
    animation: slideInFromLeft 1s ease-out forwards;
}

.slide-in-right{ /* Entra por la derecha */
    transform: translateX(100%);
    opacity: 0;
}

.slide-in-right.visible { 
    animation: slideInFromRight 1s ease-out forwards;
}

.slide-in-top { /* Entra por arriba */
    
}

.slide-in-top.visible {
    animation: slideInFromTop 1s ease-out forwards;
}

.slide-in-bottom { /* Entra por abajo */
    
}

.slide-in-bottom.visible {
    animation: slideInFromBottom 1s ease-out forwards;
}

.fade-in { /* Entra con fundido */
    
}

.fade-in.visible {
    animation: fadeIn 1s ease-out forwards;
}

.fade-in-slow { /* Entra con fundido */
    
}

.fade-in-slow.visible {
    animation: fadeIn 10s ease-out forwards;
}

.fade-in-and-zoom { /* Entra con fundido y zoom */
    opacity: 0;
    transform: translateZ(-100px) scale(0.5);
}

.fade-in-and-zoom.visible {
    animation: fadeInAndZoom 1s ease-out forwards;
}

.fade-in-and-zoom-fast { /* Entra con fundido y zoom */
    opacity: 0;
    transform: translateZ(-100px) scale(0.5);
}

.fade-in-and-zoom-fast.visible {
    animation: fadeInAndZoom 0.5s ease-out forwards;
}

.fade-in-and-zoom-slow { /* Entra con fundido y zoom */
    opacity: 0;
    transform: translateZ(-100px) scale(0.5);
}

.fade-in-and-zoom-slow.visible {
    animation: fadeInAndZoom 3s ease-out forwards;
}

/* END Animaciones en entrada */

/* Imágen animada con zoom y pan */

.zoom-image-horizontal {
    width: 100%;
    /*max-width: 400px;*/ /* Establece un ancho máximo opcional */
    min-height: 600px;
    overflow: hidden;
    position: relative;
}

.zoom-image-horizontal img {
    width: 100%;
    height: auto; /* La altura se ajustará automáticamente */
    position: absolute;
    top: 0;
    left: 0;
    animation: zoomAndPan 16s ease-in-out infinite;
}

.zoom-image-horizontal-loop {
    width: 100%;
    /*max-width: 400px;*/ /* Establece un ancho máximo opcional */
    min-height: 600px;
    overflow: hidden;
    position: relative;
}

.zoom-image-horizontal-loop img {
    width: 100%;
    height: auto; /* La altura se ajustará automáticamente */
    position: absolute;
    top: 0;
    left: 0;
    animation: zoomAndPan 32s ease-in-out infinite;
}

/* END Imágen animada con zoom y pan */

/* Paralax */

/*
Para utilizarlo:
Fondo: parallax-container
Elementos interiores: 
    - Mover poco: parallax-layer layer1
    - Mover más: parallax-layer layer2
    - Mover mucho: parallax-layer layer3
*/

.parallax-container {
    /*width: 100%;*/
    /*height: 100vh;*/
    overflow: hidden;
    position: relative;
}

.parallax-layer {
    /*position: absolute;
    width: 100%;
    height: 100%;*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate3d(0, 0, 0);
}

.parallax-layer .wp-block-cover__image-background{
    z-index: -3;
}

.layer1 {
    /*background-image: url("imagen1.jpg");*/
    z-index: -3;
}

.layer2 {
    /*background-image: url("imagen2.jpg");*/
    z-index: -2;
}

.layer3 {
    /*background-image: url("imagen3.jpg");*/
    z-index: -1;
}

/* END Paralax */

/*
    Counter

    Utilización:
        <div class="counter" data-final-value="13452">0</div>
        <p class="counter counter-to-1344">0</p>
        <p class="counter">1344</p>
*/

.counter {
    font-size: 2rem;
    font-weight: bold;
    animation: countUp 2s ease-out forwards;
}

/* END Counter */

/* Fondo animado con el ratón */

.background-move-to-mouse {
    background-size: cover;
}

.background-move-to-mouse img.wp-block-cover__image-background{
    transform: scale(1.1);
    transition-duration: 0.3s;
}

/* END Fondo animado con el ratón */

/* Imágen escapista */

.flee{
    /*width: 300px;
    height: 300px;
    overflow: hidden;*/
    /*position: relative;*/
}

.flee > img {
    /*width: 100%;
    height: 100%;
    object-fit: cover;*/
    transition: transform 1s ease-out; /* Transición suave */
    pointer-events: none; /* Evita que el ratón interactúe directamente con la imagen */
}

/* END Imágen escapista */

/* KeyFrames */

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes zoomAndPan {
    0%, 100% {
        transform: scale(1.0) translate(0, 0);
    }
    50% {
        transform: scale(1.2) translate(0%, 0%);
    }
}

@keyframes fadeInAndZoom {
    0% {
        opacity: 0;
        transform: translateZ(-100px) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

@keyframes countUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* END KeyFrames */

/* Elementos arrastrables */
.draggable {
    cursor: grab;
    /* Aquí puedes agregar transformaciones 3D si es necesario */
}

/* Cambiar el cursor durante el arrastre */
.draggable:active {
    cursor: grabbing;
}
/* END Elementos arrastrables */

/* Z-Index */
.z-index-1{
    z-index: 1;
}
.z-index-2{
    z-index: 2;
}
.z-index-3{
    z-index: 3;
}
.z-index-4{
    z-index: 4;
}
.z-index-5{
    z-index: 5;
}
.z-index-6{
    z-index: 6;
}
/* END Z-Index */

/* Background */

.bg-repeat-x{
    background-repeat: repeat-x;
}

.bg-repeat-x .wp-block-cover__image-background{
    background-repeat: repeat-x;
}

.bg-repeat-y{
    background-repeat: repeat-y;
}

.bg-repeat-y .wp-block-cover__image-background{
    background-repeat: repeat-y;
}

/* END Background */

/* Item de Grid 1 */

.ld-blog-item-1{
    /*display: none;*/
}

.ld-blog-item-1 .wp-block-post .wp-block-cover .wp-block-cover__background{ 
    border-radius: 1000px;
    
    opacity: 0;
    transform: scale(0);
    
    transition-duration: 0.5s;
}

.ld-blog-item-1 .wp-block-post .wp-block-cover .wp-block-cover__image-background{
    transition-duration: 8s;
}

.ld-blog-item-1 .wp-block-post:hover .wp-block-cover .wp-block-cover__image-background{
    transform: scale(1.5);
}

.ld-blog-item-1 .wp-block-post:hover .wp-block-cover .wp-block-cover__background{ 
    opacity: 0.7;
    transform: scale(3);
}

.ld-blog-item-1 .wp-block-post .wp-block-cover .wp-block-cover__inner-container{
    opacity: 0;
    
    transition-duration: 1s;
}

.ld-blog-item-1 .wp-block-post:hover .wp-block-cover .wp-block-cover__inner-container{
    opacity: 1;
    
    /*animation: fadeInAndZoom 0.5s ease-out forwards;*/
}

/* END Item de Grid 1 */

/* Item de Grid 2 */

.ld-blog-item-2{
    /*display: none;*/
}

.ld-blog-item-2 .wp-block-post .wp-block-cover .wp-block-cover__background{ 
    /*border-radius: 1000px;*/
    
    opacity: 0.5;
    
    /*transform: scale(0);*/
    
    
    transition-duration: 0.5s;
}

.ld-blog-item-2 .wp-block-post:hover .wp-block-cover .wp-block-cover__background{ 
    opacity: 0.7;
    /*transform: scale(3);*/
}

.ld-blog-item-2 .wp-block-post .wp-block-cover .wp-block-cover__image-background{
    transition-duration: 8s;
}

.ld-blog-item-2 .wp-block-post:hover .wp-block-cover .wp-block-cover__image-background{
    transform: scale(1.5);
}

.ld-blog-item-2 .wp-block-post .wp-block-cover .wp-block-cover__inner-container{
    opacity: 0.5;
    
    transition-duration: 1s;
}

.ld-blog-item-2 .wp-block-post:hover .wp-block-cover .wp-block-cover__inner-container{
    opacity: 1;
    
    /*animation: fadeInAndZoom 0.5s ease-out forwards;*/
}

/* END Item de Grid 2 */