/* 
Theme Name: Totalmarketing-theme 
Theme URI: [https://Totalmarketing.top]
Description: Tema hijo personalizado para el sitio web de Totalmarketing.
Author: [Gabriels001]
Author URI: [https://Totalmarketing.top]
Template: astra 
Version: 1.2.0 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Totalmarketing
Se agregaron animaciones de Scroll-fading para darle dinamismo a la web completa
*/

/* Aquí empieza el código personalizado para TOTALMARKETING.TOP*/
.justificado {
	text-align: justify !important;
}
.sombra {
	text-shadow: -3px 3px 10px #454F5EB8;
}
.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
	border-radius: 20px;
	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.8);
}
.wp-post-image {
	border-radius: 20px;
	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.8);
}
/*Bonton de Whatsapp personalizado*/
.whatsapp {
	width: 160px !important;
	height:60px;
	background-color: #00bb2d !important;
	color: #fff !important;
	border-radius: 20px !important;
	border: 2px solid #fff !important;
	box-shadow: -1px 3px 3px #999 !important;
	margin-right: 15px;
	display: inline-flex;
	font-size: 18px !important;
	font-weight: 600 !important;
	justify-content:center;
	align-items:center;
	text-decoration: none !important;
	margin: -50px 60px 50px 0;
}
.whatsapp:hover {
	background-color: #fff !important;
	color: #00bb2d !important;
	border-radius: 20px !important;
	border: 2px solid #00bb2d !important;
	box-shadow: -1px 3px 3px #999 !important;
}
/*Redondear miniatura de producto activa*/
/*.flex-active {
	border-radius: 20px;
	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.8);
}*/
/*ANIMACIÓN VERTICAL*/
/* 1. Definición del movimiento */
@keyframes scrollvert {
    0% {
        opacity: 0.4;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* 2. Estado base (para móviles o navegadores viejos) */
.animar-imagen, 
.animar-imagen img {
    opacity: 1; /* Visible por defecto */
    transition: none;
}
/* 3. Activación SCROLL (Solo Chrome/Edge modernos) */
@supports (animation-timeline: view()) {
  /* 1. Estilos Generales (PC por defecto) */
  .animar-imagen, .animar-imagen img {
    opacity: 0;
    animation-name: scrollvert;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-duration: auto !important;
    animation-timeline: view() !important;
    animation-range: entry 0% cover 30% !important; /* Valor PC */
  } 
  /* 4. Excepción Móvil (Sobrescribe lo anterior) */
  @media (max-width: 768px) {
    .animar-imagen, .animar-imagen img {
      animation-range: entry 0% cover 40% !important;
    }
  }
}
/*ANIMACIÓN IZQ/
/* 1. Definición del movimiento */
@keyframes scrollizq {
    0% {
        opacity: 0;
        transform: translateX(-100px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
/* 2. Estado base (para móviles o navegadores viejos) */
.animar-izq, 
.animar-izq img {
    opacity: 1; /* Visible por defecto */
    transition: none;
}

/* 3. Activación SCROLL (Solo Chrome/Edge modernos) */
@supports (animation-timeline: view()) {
  /* 1. Estilos Generales (PC por defecto) */
  .animar-izq, .animar-izq img {
    opacity: 0;
    animation-name: scrollizq;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-duration: auto !important;
    animation-timeline: view() !important;
    animation-range: entry 0% cover 40% !important; /* Valor PC */
  } 

  /* 4. Excepción Móvil (Sobrescribe lo anterior) */
  @media (max-width: 768px) {
    .animar-izq, .animar-izq img {
      animation-range: entry 0% cover 30% !important;
    }
  }
}
/*ANIMACIÓN DERECHA/
/* 1. Definición del movimiento */
@keyframes scrollder {
    0% {
        opacity: 0;
        transform: translateX(100px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
/* Animación reducida para móviles en la versión derecha (evita el desborde lateral) */
@keyframes scrollder-movil {
  0% {
    opacity: 0;
    transform: translateX(20px) scale(0.95); /* Solo mueve 20px en vez de 100px */
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* 2. Estado base (para móviles o navegadores viejos) */
.animar-der, 
.animar-der img {
    opacity: 1; /* Visible por defecto */
    transition: none;
}

/* 3. Activación SCROLL (Solo Chrome/Edge modernos) */
@supports (animation-timeline: view()) {
  /* 1. Estilos Generales (PC por defecto) */
  .animar-der, .animar-der img {
    opacity: 0;
    animation-name: scrollder;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-duration: auto !important;
    animation-timeline: view() !important;
    animation-range: entry 0% cover 40% !important; /* Valor PC */
  } 

  /* 4. Excepción Móvil */
  @media (max-width: 768px) {
    .animar-der, .animar-der img {
	  animation-name: scrollder-movil !important; /* Animación reducida para que no rompa el marco de la web */
      animation-range: entry 0% cover 30% !important;
    }
  }
}
/*SOLO FADE SIN MOVIMIENTO*/
/* 1. Definición del movimiento */
@keyframes scrollfade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 2. Estado base (para móviles o navegadores viejos) */
.scroll-fade, 
.scroll-fade img {
    opacity: 1; /* Visible por defecto */
    transition: none;
}
/* Animación reducida para móviles (evita el desborde lateral) */
@keyframes scrollfade {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95); /* Solo mueve 20px en vez de 100px */
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
/* 3. Activación SCROLL (Solo Chrome/Edge modernos) */
@supports (animation-timeline: view()) {
  /* 1. Estilos Generales (PC por defecto) */
  .scroll-fade, .scroll-fade img {
    opacity: 0;
    animation-name: scrollfade;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-duration: auto !important;
    animation-timeline: view() !important;
    animation-range: entry 0% cover 50% !important; /* Valor PC */
  } 

  /* 4. Excepción Móvil scrollfade */
  @media (max-width: 768px) {
    .scroll-fade, .scroll-fade img {
      animation-range: entry 0% cover 30% !important;
    }
  }
}
}
/**** Efecto "Ken Burns (Loop de Zoom a las imágenes del fondo de los bloques) */
/* Definimos la animación suave */
@keyframes kenburns-fx {
  0% { transform: scale(1); }
  100% { transform: scale(1.15); } /* Escala al 115% */
}

/* Aplicamos la animación a la imagen del bloque Cover */
.ken-burns .wp-block-cover__image-background .entry-content,
.ken-burns img {
  animation: kenburns-fx 20s linear infinite alternate;
  transform-origin: center center;
}

/* IMPORTANTE: Evita que la imagen se salga del contenedor al crecer */
.ken-burns {
  overflow-x: hidden;
}
/* TEXTO EN PERSIANA (SIN SCROLL)*/
@keyframes persiana {
  0% {
    opacity: 0;
    /* Empieza girado 90deg (acostado como una persiana cerrada) */
    transform: perspective(600px) rotateX(90deg); 
  }
  100% {
    opacity: 1;
    /* Termina en 0deg (de frente) */
    transform: perspective(600px) rotateX(0deg); 
  }
}
.texto-persiana {
  /* ease-out: frena suave al final sin rebotar */
  animation: persiana 0.29s ease-out forwards;
  transform-origin: center center; /* Gira sobre su propio eje central */
  backface-visibility: hidden; /* Mejora la nitidez del texto */
}
/* Persiana con Scroll*/
@keyframes persiana-scroll {
  from { opacity: 0; transform: perspective(600px) rotateX(90deg); }
  to { opacity: 1; transform: perspective(600px) rotateX(0deg); }
}

.scrollpers {
  animation: persiana-scroll linear both;
  animation-timeline: view();
  /* El efecto inicia al asomar y termina cuando el 40% del texto es visible */
  animation-range: entry 0% cover 40%; 
  transform-origin: center center;
}
/*FIN de Persiana con Scroll*/
/*ALINEACIÓN DE ÍCONOS DE REDES SOCIALES*/
.iconos-derecha{
	text-align: right;
	margin-top: -100px;
	padding-right: 50px !important;
}
.iconos-izquierda {
	text-align: left;
	margin-top: -100px;
	padding-left: 50px !important;
}
/*Eleva el z-intex del footer para que no se esconda detrás de las Sticky Notes*/
.site-footer {
	z-index: 10;
}
/*Hoover en el menú transparente de la versión de escritorio*/
@media (min-width: 992px) {
  .ast-primary-header-bar:hover {
    background-color: #570293 !important;
	margin-top 10px !important;
	margin-left: 25px !important;
    margin-right: 25px !important;
	border-bottom-left-radius: 40px !important;
	border-bottom-right-radius: 40px !important;
	overflow: hidden !important;
  }
}