/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/


/*************************** BEGING EFECTOS DE CABECERA********************************/

/* Forzar la Cabecera Transparente a posición Fija (Sticky) */
.ast-theme-transparent-header #masthead {
    position: fixed !important; 
    top: 24;
    width: 100%;
    z-index: 9999; /* Garantiza que siempre esté por encima de cualquier bloque de Kadence */
}

/* Compensación para evitar que el menú admin de WordPress tape la cabecera si estás logueado */
.admin-bar .ast-theme-transparent-header #masthead {
    top: 24px;
}


/* Efecto de cristal esmerilado para la Cabecera Transparente de Astra */
.ast-theme-transparent-header #masthead {
    background: rgba(254, 253, 248, 0.8) !important; /* Blanco muy sutil */
    backdrop-filter: blur(10px); /* Desenfoque de la imagen inferior */
    -webkit-backdrop-filter: blur(10px); /* Soporte para Safari/iOS */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Borde delimitador sutil */
}


/*************************** FIN EFECTOS DE CABECERA********************************/


/*************************** INICIO ANIMACIÓN ********************************/

/* 1. Definición del Keyframe optimizado por GPU */
@keyframes latido-suave {
    0% { transform: scale(1); }
    15% { transform: scale(1.1); }
    30% { transform: scale(1); }
    45% { transform: scale(1.1); }
    60% { transform: scale(1); }
}

/* 2. Clase utilitaria reutilizable */
.animacion-latido {
    animation: latido-suave 2.5s infinite ease-in-out;
    display: inline-block; /* Requerido para transformaciones en elementos de texto/inline */
    will-change: transform; /* Hint para el navegador */
}

/* Animación encadenada: Entrada (1s) seguida de Pulso Infinito (retrasado 1s) */
.entrada-y-pulso {
    animation: 
        fadeInUp 1s ease-out forwards, 
        pulse 0.2s infinite 0.5s; /* El 1s final es el delay para que espere a que termine la entrada */
}

/* 1. Keyframe personalizado: Mayor escala (15% más grande) utilizando renderizado 3D */
@keyframes pulso-ampliado {
    from { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(1.15, 1.15, 1.15); } /* Cambia 1.15 a 1.20 si lo quieres enorme */
    to { transform: scale3d(1, 1, 1); }
}

/* 2. Clase encadenada: Entrada (Animate.css) + Pulso rápido y grande (CSS Nativo) */
.entrada-y-pulso-rapido {
    /* 
      - fadeInUp: Dura 1s.
      - pulso-ampliado: Dura 0.6s (muy rápido), es infinito y espera 1s para iniciar.
    */
    animation: 
        fadeInUp 1s ease-out forwards, 
        pulso-ampliado 1.5s infinite 1s; 
        
    display: inline-block; /* Obligatorio para transformar elementos sin romper el DOM */
    will-change: transform; /* Optimización de memoria en móviles */
}




/* 1. Clase que asignarás al bloque en Kadence */
.animacion-intervalo {
    /* Retraso inicial exacto de 2 segundos */
    animation-delay: 2s;
    
    /* Duración total: 4s (1s de acción + 3s de pausa estática). Bucle infinito. */
    animation: efecto-personalizado 4s infinite;
    
    will-change: transform; /* Optimización de GPU */
}

/* 2. Motor de la animación con la matemática de tiempo */
@keyframes efecto-personalizado {
    /* FASE ACTIVA: De 0% a 25% (El primer 1 segundo de los 4s totales) */
    0% { transform: scale(1); }
    12.5% { transform: scale(1.05); } /* Punto máximo de expansión a los 0.5s */
    25% { transform: scale(1); }      /* Vuelve a la normalidad al 1s */
    
    /* FASE DE PAUSA: De 25% a 100% (Los 3 segundos restantes no hace nada) */
    100% { transform: scale(1); }
}




/*************************** FIN ANIMACIÓN ********************************/

/*************************** INICIO SCROLL VISTA ELEMENTO ********************************/
/* Congela la animación de Animate.css en su primer fotograma (0%) */
.esperar-scroll {
    animation-play-state: paused !important;
    opacity: 0; /* Previene el renderizado prematuro */
}

/* El JS inyecta esta clase para reanudar la ejecución en la GPU */
.esperar-scroll.animacion-activa {
    animation-play-state: running !important;
    opacity: 1; /* Cede el control de la opacidad de vuelta a Animate.css */
}
/*************************** FIN SCROLL VISTA ELEMENTO ********************************/


/*************************** INICIO IGLESIA Y RESTAURANTE ********************************/
/* Tarjetas de eventos con sombra suave y elevación al hover */
.tarjeta-evento {
    border-radius: 16px; /* Borde moderno */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Sombra elegante */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

.tarjeta-evento:hover {
    transform: translateY(-5px); /* Pequeño salto al pasar el ratón */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

/*************************** FIN IGLESIA Y RESTAURANTE ********************************/


/* ========================================================================= */
/* ANIMACIÓN INFINITA PARA ÍCONO DE REGALOS                                  */
/* ========================================================================= */

.icono-regalo-animado {
    /* Fuerza al contenedor a comportarse como un bloque en línea para permitir rotaciones */
    display: inline-block !important; 
    
    /* El eje de rotación se fija en la base central para simular peso */
    transform-origin: bottom center !important; 
    
    /* Animación de 2.5 segundos, aceleración suave, repetida infinitamente */
    animation: mover-caja-regalo 2.5s ease-in-out infinite !important;
}

/* Evitar que la animación rompa el SVG interno de Kadence */
.icono-regalo-animado svg {
    display: block;
}

@keyframes mover-caja-regalo {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(-6deg); }
    20%  { transform: rotate(6deg); }
    30%  { transform: rotate(-3deg); }
    40%  { transform: rotate(3deg); }
    50%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); } /* Pausa intencional de 50% a 100% para que sea sutil */
}

/* ========================================================================= */
/* FIN ANIMACIÓN INFINITA PARA ÍCONO DE REGALOS                                  */
/* ========================================================================= */

/* Restringe el ancho a unos 75-80 caracteres por línea para confort visual */
.texto-lectura-optima {
    max-width: 1000px;
    margin: 0 auto !important; /* Centra el contenedor completo */
    line-height: 1.6;
    padding: 0 20px; /* Margen de seguridad para móviles */
}