/*Theme Name: theme01
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;   
}

.grecaptcha-badge {
    visibility: hidden !important;
}

.display-n-pc{
	display:none;
}




.n2-ss-slider .n2-ss-slider-controls-above, .n2-ss-slider .n2-ss-slider-controls-below{
	justify-content: center;
    display: flex;
    flex-flow: row !important;
    align-items: center;
    margin-left: 55rem;
}

.n2-ss-slider .n2-ss-slider-wrapper-inside .n2-ss-slider-controls{
	justify-content: center;
    flex-flow: row;
    z-index: 10;
	position:relative !important;
}

.card-hover{
    position: relative;
    overflow: hidden;
    width: 400px;
    height: 550px;
    cursor: pointer;
}

.card-hover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    transition: 0.5s;
}

/*HEADER*/

header.wp-block-template-part {
	margin: 0 !important;
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    transition: background 0.3s ease;
}

header.wp-block-template-part.scrolled {
    background: #000 !important;
}

/* Top bar - se queda en su lugar, no es sticky */
.header-2 {
    position: relative !important;
    z-index: 1;
}




/* TEXTO INICIAL */
.content-top{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    width: 80%;
    transition: 0.5s;
}

/* TEXTO OCULTO */
.content-hover{
    position: absolute;
    bottom: 30px;
    right: -100%;
    width: 45%;
    color: white;
    transition: 0.5s;
}

/* HOVER */
.card-hover:hover .overlay{
    background: rgba(0,0,0,.15);
}

.card-hover:hover .content-top{
    left: 30px;
    top: 30px;
    transform: none;
    text-align: left;
}

.card-hover:hover .content-hover{
    right: 30px;
}


/*TARJETA DE SERVICIOS*/

.service-box{
    position: relative;
    text-align: center;
    padding: 30px 20px 50px;
    transition: all .3s ease;
}

/* Icono */
.service-box .icon img{
    width: 120px;
    transition: all .3s ease;
}

.icon-news{
	color: #108bea;
}

.card:hover .icon-home {
  animation: verticalLoop 0.6s ease forwards;
}

/*LINK*/

.link a{
	transition: color .3s ease;
}

.link a:hover{
	color: #108bea !important;
}

/* Título */
.service-box h3{
    margin: 20px 0 10px;
    font-size: 2rem;
    color: #000;
    transition: color .3s ease;
}

/* Descripción */
.service-box p{
    margin: 0;
    font-size: 1.1rem;
    color: #000;
}

/* Línea inferior */
.service-box::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 15px;

    width: 0;
    height: 3px;

    background: #2196f3;

    transform: translateX(-50%);
    transition: width .4s ease;
}

/* Hover */

.service-box:hover h3{
    color: #2196f3;
}

.service-box:hover::after{
    width: 60px;
}

/* Si el icono es SVG */
.service-box:hover svg{
    fill: #2196f3;
}

/* Si el icono es PNG negro */
.service-box:hover .icon img{
    filter:
    brightness(0)
    saturate(100%)
    invert(52%)
    sepia(97%)
    saturate(1700%)
    hue-rotate(190deg)
    brightness(100%)
    contrast(100%);
}


/*GALERIAS DE ICONOS*/

.thumbs{
    display:flex;
    gap:10px;
}

.thumb{
    position:relative;
    cursor:pointer;
    overflow:hidden;
}

.thumb img{
    display:block;
    width:120px;
    transition:.4s;
}

.thumb span{
    position:absolute;
    top:50%;
    left:50%;

    transform:
        translate(-50%,-50%)
        scale(0);

    color:#fff;
    font-size:36px;
    font-weight:700;

    transition:.3s;
}

.thumb::before{
    content:"";
    position:absolute;
    inset:0;

    background:rgba(0,0,0,.5);

    opacity:0;

    transition:.3s;
}

.thumb:hover::before{
    opacity:1;
}

.thumb:hover img{
    filter:grayscale(100%);
}

.thumb:hover span{
    transform:
        translate(-50%,-50%)
        scale(1);
}

/*IMAGEN PRINCIPAL*/

.main-gallery{
    position:relative;
    overflow:hidden;
}

.main-gallery img{
    width:100%;
    display:block;

    transition:
        opacity .4s ease,
        transform .4s ease;
}

.fade-out{
    opacity:0;
    transform:scale(1.05);
}

/*TEXTO INFERIOR*/

.caption{
    position:absolute;

    left:50px;
    bottom:50px;

    color:#fff;
}

.caption h2{

    opacity:1;

    transform:translateY(0);

    transition:
        opacity .4s,
        transform .4s;
}

.caption.hide h2{
    opacity:0;
    transform:translateY(20px);
}


/*CHARAC*/

.charact-1{
	transition: all .3s ease;
	transition: color .3s ease;
}

.charac-icon{
	display: flex;
	color:#00000080;
	background-color: white;
    justify-content: center;
    font-size: 2rem;
	border-radius: 3rem;
    padding: 0.5rem;
	transition: all 0.3s ease;
}

.charact-1:hover .charac-icon{
	background-color: #108bea;
    display: flex;
    justify-content: center;
    font-size: 2rem;
    color: white;
    border-radius: 15px;
    padding: 0.5rem;
}	


/* ==========================
   TARJETAS
========================== */

.card-item {
    border: 2px solid #d0d0d0;
    border-radius: 20px;
    overflow: hidden;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.card-item:hover {
    transform: translateY(-8px);
    border-color: #007aff;
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* ==========================
   IMÁGENES
========================== */

.image-container {
    position: relative;
    width: 120px;
    height: 120px;
}

/* Las dos imágenes ocupan exactamente el mismo lugar */
.image-container .img-default,
.image-container .img-hover {
    position: absolute;
    inset: 0;
    margin: 0;

    transition:
        opacity 0.6s ease-in-out,
        transform 0.6s ease-in-out;

    will-change: opacity, transform;
}

/* Imagen inicial */
.image-container .img-default {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

/* Imagen de hover */
.image-container .img-hover {
    opacity: 0;
    transform: scale(0.96);
    z-index: 1;
}

/* Efecto hover */
.card-item:hover .img-default {
    opacity: 0;
    transform: scale(1.04);
}

.card-item:hover .img-hover {
    opacity: 1;
    transform: scale(1);
}

/*CARD*/

.serv-card{
	position:relative;
	overflow:hidden;
	transition:box-shadow .3s,transform .3s;
}

.serv-card:hover{
	box-shadow:0 12px 40px rgba(0,0,0,.08);
	transform:translateY(-3px)
}

.serv-card .icon-home{
	justify-content: center;
    display: flex;
    font-size: 3rem;
	color: white;
}

.serv-card:hover .icon-home{
	animation: verticalLoop 0.6s ease forwards;
}

.icon-group-2{
	padding: 10px !important;
   
}

.icon-group-2 .icon-home{
	color: white;
    font-size: 3rem;
    display: flex;
    justify-content: center;
	
}

/*PLANS*/

.plan-card {
    border: 2px solid #1a8fe0;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    background: #fff;
    transition: background 0.3s;
}

.plan-header {
    background: #1a8fe0 !important;
    padding: 1.5rem;
}

.plan-header * {
    color: #fff !important;
}

/* Hover */
.plan-card:hover {
    background: #1a8fe0;
}

.plan-card:hover .plan-header {
    background: #fff !important;
}

.plan-card:hover .plan-header * {
    color: #000 !important;
}

.plan-card:hover .plan-features {
    color: #fff !important;
}

.plan-card:hover .plan-price,
.plan-card:hover .plan-price * {
    color: #fff !important;
}

.plan-card:hover .plan-btn a{
    background: #fff !important;
    color: #1a8fe0 !important;
    border-color: #1a8fe0 !important;
}

/*SERVICES LINKS*/

.srv-item {
    border: 1px solid #333;
    transition: background 0.2s, border-color 0.2s;
    cursor: pointer;
}

.srv-item:hover {
    background: #000 !important;
    border-color: #fff !important;
}

.srv-item:hover p,
.srv-item:hover p a,
.srv-item:hover p * {
    color: #fff !important;
}

.srv-item.activo {
    background: #000 !important;
    border-color: #fff !important;
}

.srv-item.activo p,
.srv-item.activo p a,
.srv-item.activo p * {
    color: #fff !important;
}

/*SERVICIO DE Cabinet Alarm & Locks*/

.feature-card {
    background: #f5f5f5;
    padding: 2rem;
    text-align: center;
    transition: background 0.3s;
    cursor: pointer;
}

.feature-icon {
    transition: opacity 0.3s, max-height 0.3s;
	 overflow: hidden;
}

.feature-title {
    transition: color 0.3s;
}

.feature-desc {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s, max-height 0.3s;
    color: #fff !important;
}

/* Hover */
.feature-card:hover {
    background: #e05c5c !important;
}

.feature-card:hover .feature-title,
.feature-card:hover .feature-title * {
    color: #fff !important;
}

.feature-card:hover .feature-icon {
    opacity: 0;
    max-height: 0;
   

}


.feature-card:hover .feature-desc {
    opacity: 1;
    max-height: 200px;
}

/*2*/

.feature-card-2 {
    background: #f5f5f5;
    padding: 2rem;
    text-align: center;
    transition: background 0.3s;
    cursor: pointer;
}

.feature-icon {
    transition: opacity 0.3s;
	font-size: 3rem;
	color: black;
}

.feature-title {
    transition: color 0.3s;
}

.feature-desc {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s, max-height 0.3s;
    color: #fff !important;
}

/* Hover */
.feature-card-2:hover {
    background: #55a67e !important;
}

.feature-card-2:hover .feature-title,
.feature-card-2:hover .feature-title * {
    color: #fff !important;
}

.feature-card-2:hover .feature-icon {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
	color: white;
}

.feature-card-2:hover .feature-desc {
    opacity: 1;
    max-height: 200px;
}

/*ACORDEÓN*/

.wp-block-accordion-heading__toggle-title{
	text-align: justify !important;
}

/* Panel oculto */
.wp-block-accordion-panel {
    overflow: hidden;
    transition: all 0.3s ease !important;
}

/* Cuando se abre */
.wp-block-accordion-item[data-wp-class--is-open="state.isOpen"] .wp-block-accordion-panel:not([inert]) {
    animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wp-block-accordion-panel[inert] {
    animation: slideUp 0.3s ease forwards;
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

/*CONTACT*/

.contact-group{
	overflow:visible !important;
}

.contact-group .contact-group-icon .icon-contact{
	 transition: transform 0.3s;
	font-size: 1.5rem;
    background-color: #108bea;
    padding: 1rem;
    border-radius: 99px;
	color:white;
	
}

.contact-group:hover .contact-group-icon .icon-contact {
    transform: translateY(-3px) !important;
}


/*BLOG*/

.serv-card{
	position:relative;
	overflow:hidden;
	transition:box-shadow .3s,transform .3s;
}

.serv-card:hover{
	box-shadow:0 12px 40px rgba(0,0,0,.08);
	transform:translateY(-3px)
}


/*CONTACTO*/

/*FORMULARIO*/

.cf-input,
.cf-textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.cf-input:focus,
.cf-textarea:focus {
    border-color: #1a8fe0;
}

.cf-textarea {
    min-height: 120px;
    resize: vertical;
}

.cf-btn {
    background: #1a8fe0 !important;
    color: #fff !important;
    border: none !important;
    padding: 0.85rem 2rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.cf-btn:hover {
    background: #0d6eb5 !important;
}

.column-mobile{
	padding-right: 16rem !important;
}

/* 1. Posicionamiento relativo para el contenedor principal de la imagen */
.wc-block-components-product-image {
    position: relative;
    overflow: hidden;
}

/* 2. Borde celeste simulado en el hover (usamos pseudo-elemento para no romper el layout) */
.wc-block-components-product-image::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 12px solid #a8c6df; /* Ajusta el color al celeste exacto que necesites */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.wc-block-components-product-image:hover::before {
    opacity: 1;
}

/* 3. Desvanecimiento de la imagen principal al hacer hover */
.wc-block-components-product-image img {
    transition: opacity 0.3s ease;
}

.wc-block-components-product-image:hover img {
    opacity: 0.25;
}

/* 4. Contenedor interno (donde irán los botones oscuros) centrado absolutamente */
.wc-block-components-product-image__inner-container {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 15px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
    width: auto;
    height: auto;
}

.wc-block-components-product-image:hover .wc-block-components-product-image__inner-container {
    opacity: 1;
}

/* 5. Estilos para los botones cuadrados negros (carrito y favoritos) */
.wc-block-components-product-image__inner-container a,
.wc-block-components-product-image__inner-container button,
.wc-block-components-product-image__inner-container .boton-icono {
    background-color: #000;
    color: #fff;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.wc-block-components-product-image__inner-container a svg,
.wc-block-components-product-image__inner-container button svg {
    width: 24px;
    height: 24px;
    fill: #fff; /* O stroke, dependiendo de tu SVG */
}

/* Responsive */
@media (max-width: 768px) {
    .cf-input,
    .cf-textarea,
    .cf-btn {
        width: 100% !important;
    }
	
	.group-flex{
	flex-direction: column;
    display: flex;
}
	
	.uagb-tabs__body-wrap{
		padding: 0;
	}
	
	.wp-block-uagb-tabs-child .uagb-tabs__body-container .uagb-inner-tab-0 .uagb-tabs-body__active{
		padding:0;
	}
	
	.align-t{
		text-align: center !important;
	}
	
	.display-n img{
		display: none !important;
	}
	
	.column-mobile{
		padding: 0px 20px !important;
	}
	
}