/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */


/* ==========================================================================
   Headings globales (H1–H3)
   - Define un line-height consistente usando la variable --heading-lh
   - Mantiene el ritmo vertical con un margen inferior estándar
   - Ajusta la variable o el margen según tu sistema tipográfico
   ========================================================================== */
/* Global headings */
	h1,
	h2,
	h3 {
	  line-height: 1.2!important; /* unitless: se adapta al tamaño de fuente */
	}


/* ===========================
   Botón de Elementor (base)
   Normal: #4785FF  |  Hover: #000
   =========================== */

.elementor .elementor-button{
  background: #4785FF;
  color: #fff;
  border: 0;
  border-radius: 9999px;                 /* pill */
  padding: 10px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: .5em;
  box-shadow: 0 6px 14px rgba(71,133,255,.25);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.elementor .elementor-button:hover,
.elementor .elementor-button:focus-visible{
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
}

.elementor .elementor-button:active{
  transform: translateY(0);
}

/* Ajuste responsive: un poco menos de padding en móviles pequeños */
@media (max-width: 480px){
  .elementor .elementor-button{ padding: 10px 20px; }
}



/* ===========================
   Variante personalizada del botón Elementor
   Normal: #4785FF  |  Hover: #FF5612
   =========================== */

/* Variante con clase en el contenedor */
.btn-variant .elementor-button {
  background: #FF5612; /* Naranja en estado normal */
  color: #fff;
  box-shadow: 0 6px 14px rgba(255,86,18,.25); /* sombra en base al naranja */
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.btn-variant .elementor-button:hover,
.btn-variant .elementor-button:focus-visible {
  background: #4785FF; /* Azul en hover */
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(71,133,255,.25);
}

.btn-variant .elementor-button:active {
  transform: translateY(0);
}


/* === Enlaces con icono (Font Awesome 5) — Global === */
/* Aplica solo a enlaces que tengan un <i> con clases FA dentro */
.elementor-widget-html a:has(> i[class*="fa-"]),
.elementor-widget-text-editor a:has(> i[class*="fa-"]) {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  gap: .45rem;
  text-decoration: none; /* quítalo si prefieres subrayado por defecto */
}

/* Ajuste del icono y micro-animación al hover */
.elementor-widget-html a:has(> i[class*="fa-"]) > i,
.elementor-widget-text-editor a:has(> i[class*="fa-"]) > i {
  font-size: 1em;
  line-height: 1;
  transition: transform .2s;
}

.elementor-widget-html a:has(> i[class*="fa-"]):hover > i,
.elementor-widget-text-editor a:has(> i[class*="fa-"]):hover > i {
  transform: translateX(2px);
}

/* Opcional: subrayado solo al pasar */
.elementor-widget-html a:has(> i[class*="fa-"]):hover,
.elementor-widget-text-editor a:has(> i[class*="fa-"]):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}





/* ===========================
   Separación vertical entre bloques temáticos
   Base: máx ~70px, solo arriba/abajo (Blocksy maneja laterales)
   =========================== */

/* Separación vertical entre bloques temáticos */
:root{
  --grupo-pad-min: 32px;  /* móvil */
  --grupo-pad-max: 96px;  /* desktop */
}

.grupo{
  /* solo arriba/abajo, lateral lo maneja Blocksy */
  padding-block: clamp(var(--grupo-pad-min), 6vw, var(--grupo-pad-max));
  padding-inline: 0;
}

/* Opcionales por si necesitas variaciones */
.grupo--compacto{ padding-block: clamp(24px, 4.5vw, 56px); }
.grupo--amplio{   padding-block: clamp(48px, 8vw, 128px); }



/* ===========================
	Estilos para encabezado de slider en homepage
   =========================== */


.hero-title {
    font-family: 'Sora', sans-serif; /* la misma familia que tus h1 */
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
    display: block;
    font-size: 45px; /* tamaño base en desktop */
}

/* Tablets */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 36px;
    }
}

/* Móviles */
@media (max-width: 768px) {
    .hero-title {
        font-size: 28px;
    }
}


/* Estilos de contadores */

.elementor-counter .elementor-counter-title{
	text-align: center;
}


/* Estilos aplicados a carrusel de imágenes - arrows */

.elementor-swiper-button{
    background-color: #000;
	padding: 5px;
	border-radius: 25px;
}


/* Estilos listado de iconos */ 

.elementor-widget .elementor-icon-list-icon svg{
    background-color: #4785FF;
    padding: 5px;
    border-radius: 20px;
}




/* ===========================
	Estilos flipbox elementor
   =========================== */

.flip .elementor-flip-box__button{
    box-shadow: none!important;
    padding: 0!important;
    text-decoration: underline!important;
}

.flip .elementor-flip-box__button:hover{
    box-shadow: none;
}


.flip .elementor-flip-box__layer__description:not(:last-child), .elementor-flip-box__layer__title:not(:last-child){
    margin: 0 0 10px;
}

.flip .elementor-flip-box__layer{
    border-radius: 12px;
}

/* Estilo del icono insertado en el reverso del Flip Box. */

.elementor-widget-flip-box[data-back-icon] img.flip-back-icon-img{
  display:block;
  margin:0 0 12px; /* margen inferior del icono */
  width: 15%
}

/* Unifica radios y recorte en el ANVERSO */
.elementor-widget-flip-box .elementor-flip-box,
.elementor-widget-flip-box .elementor-flip-box__layer,
.elementor-widget-flip-box .elementor-flip-box__front .elementor-flip-box__layer__overlay{
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Borde sutil por defecto + acento en hover */
.elementor-widget-flip-box .elementor-flip-box{
  box-shadow: 0 0 5px 0 rgba(46,230,166,.45) !important;  /* hairline */
  transition: box-shadow .25s ease, transform .25s ease !important;
}
.elementor-widget-flip-box:hover .elementor-flip-box{
  box-shadow: 0 0 0 2px #2ee6a6, 0 8px 20px rgba(0,0,0,.25) !important;
  transform: translateY(-2px) !important;
}


/* ===========================
	Estilos clase .menu-footer, aplica icono chevron menu footer
   =========================== */

/* Footer nav con icono ">" y más espacio */
.menu-footer .elementor-nav-menu a.elementor-item,
.menu-footer .elementor-nav-menu a.elementor-sub-item{
  position: relative;
  padding-left: 1em!important; /* antes 1.6em → más separación */
}

.menu-footer .elementor-nav-menu a.elementor-item::before,
.menu-footer .elementor-nav-menu a.elementor-sub-item::before{
  content: "\f054";                  /* chevron-right (FA5) */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #4785FF;
  position: absolute;
  left: .15em;                       /* pequeño respiro desde el borde */
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  opacity: 1 !important;
}



/* ===========================
	Estilos para contenido de servicios
   =========================== */

.contenido h2{
    font-size: 1.65rem;
}

@media (max-width: 768px){
 .contenido h2{
    font-size: 1.2rem;
}   
    }


/* Estado normal (sin hover ni active) menu servicios del sidebar*/
.servicios-sidebar .elementor-nav-menu--main .elementor-item:not(.elementor-item-active):not(:hover){
  background-color: #fff;
  border-radius: 20px;
}



/* UL con check en círculo dentro de .contenido */
.contenido ul{
  list-style: none;         /* quita las viñetas nativas */
  margin: 0 0 1em 0;
  padding-left: 10px;
}

.contenido ul li{
  position: relative;
  padding-left: 1.75em;     /* espacio para el icono */
  margin: .9em 0;
}

.contenido ul li::before{
  content: "\f058";         /* FA5: check-circle */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;         /* sólido */
  position: absolute;
  left: .3em;
  top: .4em;               /* centrado vertical con texto de varias líneas */
  line-height: 1;
  font-size: 1em;
  color: #4785FF;           /* si prefieres heredar: usar 'currentColor' */
}

/* Anidado: un poco más pequeño para sublistas (opcional) */
.contenido ul ul li{ padding-left: 1.6em; }
.contenido ul ul li::before{ font-size: .95em; opacity: .95; }



/* Listado en horizontal dentro de .contenido .horizontal */
.contenido .horizontal > ul{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columnas desktop */
  column-gap: 32px;
  row-gap: 14px;
}

@media (max-width: 1024px){
  .contenido .horizontal > ul{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columnas tablet */
  }
}
@media (max-width: 640px){
  .contenido .horizontal > ul{
    grid-template-columns: 1fr; /* 1 columna móvil */
  }
}


/* Lista en horizontal para .horizontal */
.horizontal ul{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin: 0;
}

.horizontal ul li{
	margin: 0;
}


@media (max-width: 1024px){
  .horizontal ul{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .horizontal ul{
    grid-template-columns: 1fr;
  }
}


/* Normal en header relative (oscuro) */
#header [data-device="desktop"]:not([data-transparent])
  #mega-menu-wrap-menu_1 #mega-menu-menu_1 > li.mega-menu-item > a.mega-menu-link {
  color: #111 !important;
}

/* Hover y Active en header relative (azul #4785ff) */
#header [data-device="desktop"]:not([data-transparent])
  #mega-menu-wrap-menu_1 #mega-menu-menu_1 > li.mega-menu-item:hover > a.mega-menu-link,
#header [data-device="desktop"]:not([data-transparent])
  #mega-menu-wrap-menu_1 #mega-menu-menu_1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#header [data-device="desktop"]:not([data-transparent])
  #mega-menu-wrap-menu_1 #mega-menu-menu_1 > li.mega-menu-item.current-menu-item > a.mega-menu-link {
  color: #4785ff !important;
}

/* Ícono de búsqueda: negro SOLO si el header NO es transparente */
#header [data-device="desktop"]:not([data-transparent]) .ct-header-search .ct-icon,
#header [data-device="desktop"]:not([data-transparent]) .ct-header-search .ct-icon *{
  fill: #000 !important;
}


/* Página 173: header sticky con fondo gris claro (desktop + mobile) */
body.page-id-173 #header.ct-header [data-sticky*="yes"],
body.page-id-173 #header.ct-header [data-sticky*="yes"] > [data-row],
body.page-id-173 #header.ct-header [data-sticky*="yes"] [data-row="middle"] {
  background-color: #f5f5f5 !important;
  background-image: none !important;
  backdrop-filter: none !important; /* por si el tema aplica glass */
}

/* Opcional: colores de links/iconos sobre fondo claro en esa página */
body.page-id-173 #header.ct-header [data-sticky*="yes"] .ct-menu-link,
body.page-id-173 #header.ct-header [data-sticky*="yes"] .menu > li > a,
body.page-id-173 #header.ct-header [data-sticky*="yes"] .ct-header-cta,
body.page-id-173 #header.ct-header [data-sticky*="yes"] .ct-icon {
  color: #0a0a0a !important;
  fill: currentColor !important;
}

body.page-id-173 #header.ct-header [data-sticky*="yes"] .ct-menu-link:hover,
body.page-id-173 #header.ct-header [data-sticky*="yes"] .current-menu-item > a,
body.page-id-173 #header.ct-header [data-sticky*="yes"] .current-menu-ancestor > a {
  color: #4785ff !important;
}



/* Estilos para cards de contadores en nosotros */

.ng-card-inner{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  height:100%;
  text-align:left; /* coincide con tus cards */
  box-sizing:border-box;
}

.ng-icon img{
  width:40px;
  height:auto;
  display:block;
	margin-bottom: 8px;
  /* sin bordes ni fondos para que herede el contenedor */
}

.ng-title{
  margin:0 0 10px;
  font-size:16px;
  line-height:1.25;
  font-weight:600;
}

.ng-labels{
  display:flex;
  gap:40px;
  margin-top:2px;
  font-size:12px;
  color:#666;
}

.ng-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:2px;
  font-weight:600;
}

.ng-row i{
  color: #4785FF;	
}

.ng-static{
  font-size:20px; /* ajusta si necesitas */
  line-height:1;
}

.ng-counter{
	font-size: 25px;
	line-height: 1;
	color: #000;
}


/* Estilos botón whatsapp */

.wa__btn_popup{
	bottom: 100px;
	right: 20px
}

.wa__btn_popup .wa__btn_popup_txt{
	width: 185px;
	border-radius: 25px;
}

@media (max-width: 768px){
	.wa__btn_popup{
		bottom: 120px;
		right: 15px;
}
	.wa__btn_popup .wa__btn_popup_txt{
		display: none;
	}	
		}





/* Buscar (resultados y sin resultados): header sticky con fondo gris claro */
body.search #header.ct-header [data-sticky*="yes"],
body.search #header.ct-header [data-sticky*="yes"] > [data-row],
body.search #header.ct-header [data-sticky*="yes"] [data-row="middle"],
body.search-results #header.ct-header [data-sticky*="yes"],
body.search-results #header.ct-header [data-sticky*="yes"] > [data-row],
body.search-results #header.ct-header [data-sticky*="yes"] [data-row="middle"],
body.search-no-results #header.ct-header [data-sticky*="yes"],
body.search-no-results #header.ct-header [data-sticky*="yes"] > [data-row],
body.search-no-results #header.ct-header [data-sticky*="yes"] [data-row="middle"] {
  background-color: #f5f5f5 !important;
  background-image: none !important;
  backdrop-filter: none !important; /* por si el tema aplica glass */
}

/* Colores de links/iconos sobre ese fondo claro SOLO en la página de búsqueda */
body.search #header.ct-header [data-sticky*="yes"] .ct-menu-link,
body.search #header.ct-header [data-sticky*="yes"] .menu > li > a,
body.search #header.ct-header [data-sticky*="yes"] .ct-header-cta,
body.search #header.ct-header [data-sticky*="yes"] .ct-icon,
body.search-results #header.ct-header [data-sticky*="yes"] .ct-menu-link,
body.search-results #header.ct-header [data-sticky*="yes"] .menu > li > a,
body.search-results #header.ct-header [data-sticky*="yes"] .ct-header-cta,
body.search-results #header.ct-header [data-sticky*="yes"] .ct-icon,
body.search-no-results #header.ct-header [data-sticky*="yes"] .ct-menu-link,
body.search-no-results #header.ct-header [data-sticky*="yes"] .menu > li > a,
body.search-no-results #header.ct-header [data-sticky*="yes"] .ct-header-cta,
body.search-no-results #header.ct-header [data-sticky*="yes"] .ct-icon {
  color: #0a0a0a !important;
  fill: currentColor !important;
}

/* Hover/estado activo */
body.search #header.ct-header [data-sticky*="yes"] .ct-menu-link:hover,
body.search #header.ct-header [data-sticky*="yes"] .current-menu-item > a,
body.search #header.ct-header [data-sticky*="yes"] .current-menu-ancestor > a,
body.search-results #header.ct-header [data-sticky*="yes"] .ct-menu-link:hover,
body.search-results #header.ct-header [data-sticky*="yes"] .current-menu-item > a,
body.search-results #header.ct-header [data-sticky*="yes"] .current-menu-ancestor > a,
body.search-no-results #header.ct-header [data-sticky*="yes"] .ct-menu-link:hover,
body.search-no-results #header.ct-header [data-sticky*="yes"] .current-menu-item > a,
body.search-no-results #header.ct-header [data-sticky*="yes"] .current-menu-ancestor > a {
  color: #4785ff !important;
}

/* (Opcional) Si tu header no usa sticky en búsqueda y quieres el mismo look siempre,
   descomenta este bloque para forzar el fondo claro también en estado no-sticky. */
/*
body.search #header.ct-header,
body.search #header.ct-header [data-row],
body.search #header.ct-header [data-row="middle"],
body.search-results #header.ct-header,
body.search-results #header.ct-header [data-row],
body.search-results #header.ct-header [data-row="middle"],
body.search-no-results #header.ct-header,
body.search-no-results #header.ct-header [data-row],
body.search-no-results #header.ct-header [data-row="middle"] {
  background-color: #f5f5f5 !important;
  background-image: none !important;
  backdrop-filter: none !important;
}
*/