/*Theme Name: theme03
Theme URI: https://logicalweb.bo
Version: 1.0
Description: Tema hijo de twentytwentyfive
Author: Juan Jesus Campos Quiroga
Author URI: https://logicalweb.bo
Template: twentytwentyfive
*/
html{
	scroll-behavior: smooth;
	
}

a, button, *{
	text-decoration:none !important;
	outline:none !important;
}

p, span, a, h1, h2, h3, h4, h5, h6, label, button {
  transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;   
}

/*HEADER*/


header.wp-block-template-part {
    margin: 0 !important;
    position: fixed !important; /* CAMBIO: 'fixed' en lugar de 'sticky' para que el contenido de la web empiece justo desde arriba del todo y pase por detrás del header transparente */
    top: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    background-color: transparent !important; /* Forzamos a que inicie transparente */
    transition: background-color 0.4s ease, box-shadow 0.4s ease !important; /* Transición ultra suave */
}

header.wp-block-template-part.scrolled {
    background-color: #010A1A !important; /* Tu color personalizado */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; /* Sutil sombra para separarlo del contenido al hacer scroll */
}

/*ICONOS*/

i.blink {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    background-color: transparent !important; 
    
    color: #e50d1b !important; 
    
    font-size: 14px !important;  
    width: 14px !important;     
    height: 14px !important;   
    line-height: 1 !important;
    border-radius: 50% !important; 
    
    
    margin-right: 10px !important;
    vertical-align: middle !important;
    position: relative !important;
    
   
    animation: efectoRec 1.6s infinite ease-in-out !important;
}

@keyframes efectoRec {
    0% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(229, 13, 27, 0.8);
    }
    50% {
        opacity: 0.4;
        box-shadow: 0 0 0 8px rgba(229, 13, 27, 0); 
    }
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(229, 13, 27, 0);
    }
}

/*ICONO*/

.icon-service{
	display:flex;
	font-size:3rem;
	color: #ed1d24;
}

/*SERVICIOS*/

.miga {
    display: inline-flex !important;
    align-items: center !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    
    color: transparent !important; 
    white-space: nowrap !important;
}

.miga a {
    color: rgba(255, 255, 255, 0.5) !important; 
    text-decoration: none !important;
    font-weight: 400 !important;
    transition: color 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}

.miga a:hover {
    color: #ffffff !important; 
}

.miga a::after {
    content: "" !important;
    display: inline-block !important;
    width: 8px !important;   
    height: 8px !important;
    background-color: #e50d1b !important;
    border-radius: 50% !important;
    margin: 0 14px !important;
    vertical-align: middle !important;
}

.miga span, 
.miga strong,
.miga .current,
.miga li:last-child {
    color: #ffffff !important; 
    font-weight: 600 !important; 
    display: inline-block !important;
}

.miga .delimiter,
.miga .sep,
.miga .breadcrumb-separator {
    display: none !important; 
}


/**********************************************************/


.servicio-card {
    background-color: #161f2c !important;
   
    position: relative !important;
    border-radius: 0px !important; 
    box-sizing: border-box !important;
    
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%) !important;
    
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out !important;
    
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35)) !important;
}

.servicio-card:hover {
    transform: translateY(-8px) !important;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.55)) !important;
}

.servicio-icon {
    color: #e50d1b !important; 
    font-size: 42px !important; 
    display: inline-flex !important;
    margin-bottom: 25px !important;
    line-height: 1 !important;
    transform-origin: center bottom !important; 
}

.servicio-card:hover .servicio-icon {
    animation: iconoJelly 0.7s both !important;
}

.servicio-title {
    color: #ffffff !important; 
    font-size: 18px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin: 0 0 15px 0 !important;
    transition: color 0.25s ease-in-out !important;
}
.servicio-card:hover .servicio-title {
    color: #e50d1b !important;
}

.servicio-description {
    color: rgba(255, 255, 255, 0.65) !important; 
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}
@keyframes iconoJelly {
    0% { transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(1.25, 0.75, 1); }
    40% { transform: scale3d(0.75, 1.25, 1); }
    50% { transform: scale3d(1.15, 0.85, 1); }
    65% { transform: scale3d(0.95, 1.05, 1); }
    75% { transform: scale3d(1.05, 0.95, 1); }
    100% { transform: scale3d(1, 1, 1); }
}