/*
 Theme Name:   Astra Child
 Author:       Refineria Web
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Tags:         child-theme
 Text Domain:  astra-child
*/

/* Tus estilos aquí */




/*Inicio*/

/* Phone Box */
/* ============================================
   BLOQUE DE CONTACTO TELEFÓNICO (SVG)
   ============================================ */

/* Contenedor principal */
.svg-phonebox {
  display: block;
  width: 100%;                 /* ocupa todo el ancho disponible */
  text-align: center;
  text-decoration: none;
  position: relative;
  box-sizing: border-box;
}

/* Caja principal */
.svg-phonebox-box {
  border: 1px solid #ecf0f1;
  background: #ffffff;
  padding: 45px 20px 25px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Icono: círculo exterior */
.svg-phonebox-icon-circle {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #ecf0f1;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease, background-color 0.3s ease;
  z-index: 2;
}

/* Icono: círculo interior */
.svg-phonebox-icon-subctn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #ecf0f1;
  background: #ffffff;
  color: #5a7d99;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* SVG del icono */
.svg-phonebox-icon-subctn svg {
  width: 18px;
  height: 18px;
  fill: #5a7d99;               /* color base del icono */
  transition: fill 0.3s ease;
}

/* Texto del número */
.svg-phonebox-label {
  margin: 0;
  font-size: 20px;
  color: #5a7d99;
  font-weight: 600;
  transition: none;             /* no cambia en hover */
}

/* ===== Hover States ===== */

/* Borde principal */
.svg-phonebox:hover .svg-phonebox-box {
  border-color: #5a7d99;
  box-shadow: 0 4px 10px rgba(90, 125, 153, 0.1); /* sombra sutil opcional */
}

/* Círculo exterior */
.svg-phonebox:hover .svg-phonebox-icon-circle {
  border-color: #5a7d99;
}

/* Círculo interior e icono */
.svg-phonebox:hover .svg-phonebox-icon-subctn {
  background: #5a7d99;
  border-color: #5a7d99;
}
.svg-phonebox:hover .svg-phonebox-icon-subctn svg {
  fill: #ffffff;                /* icono se vuelve blanco */
}

/* Texto sin cambios en hover */
.svg-phonebox:hover .svg-phonebox-label {
  color: #5a7d99;
}

/* Alineación vertical y ajuste visual */
.svg-phonebox-icon-circle,
.svg-phonebox-icon-subctn {
  line-height: 0;
}

/*---------En Phone box------------*/


/*Ajustes en carrusel*/
/* ----- Carrusel con imagen central más grande ----- */

/* Carrusel: la slide "prev" será la grande */
.elementor-main-swiper {
  overflow: visible; /* evita cortes al hacer scale */
}

/* Base para todas */
.elementor-main-swiper .swiper-slide {
  transform: scale(0.8);
  transform-origin: center center;
  transition: transform .45s ease, opacity .45s ease;
  z-index: 1;
}

/* Vecinas (next) un poco más grandes que el resto */
.elementor-main-swiper .swiper-slide-next,
.elementor-main-swiper .swiper-slide-duplicate-next {
  transform: scale(0.9);
  z-index: 2;
}

/* 👉 La protagonista: la PREV, más grande */
.elementor-main-swiper .swiper-slide-prev,
.elementor-main-swiper .swiper-slide-duplicate-prev {
  transform: scale(1.2);
  z-index: 3;
}

/* Opcional: leve “pop” en la imagen de la prev para más foco */
.elementor-main-swiper .swiper-slide-prev .elementor-carousel-image,
.elementor-main-swiper .swiper-slide-duplicate-prev .elementor-carousel-image {
  transition: transform .45s ease, box-shadow .45s ease;
  transform: translateZ(0) scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* Asegura recorte centrado y bordes agradables */
.elementor-main-swiper .elementor-carousel-image {
  background-size: cover;
  background-position: center;
}

:root{
  --badge-bg: #111;        /* color base del círculo */
  --badge-hover: #e07a2e;  /* color del círculo al hover */
  --badge-text: #fff;      /* color del número */
}

.ol-fue {
  counter-reset: item;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ol-fue li{
  counter-increment: item;
  position: relative;
  padding-left: 3rem; /* espacio para el círculo */
  margin: 0 0 12px;
  line-height: 1.6;
}
.ol-fue li::before{
  content: counter(item);
  position: absolute;
  left: 0;
  top: .15rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  background: var(--badge-bg);
  color: var(--badge-text);
  box-shadow: 0 0 0 2px #fff inset, 0 1px 2px rgba(0,0,0,.2);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.ol-fue li:hover::before{
  background: var(--badge-hover);
  transform: translateY(-1px);
}

/* (Opcional) si quieres que también cambie el texto al pasar el ratón */
.ol-fue li:hover{ color: var(--badge-hover); }


/* Opcional: responsive para pantallas pequeñas */
@media (max-width: 480px) {
	
	/*phone box*/
  .svg-phonebox-box {
    padding: 40px 15px 20px;
  }
  .svg-phonebox-label {
    font-size: 18px;
  }
	
.sub-menu.elementor-nav-menu--dropdown.sm-nowrap{
	margin-left: 30px !important;
}
}

@media (max-width: 850px) {

	
.sub-menu.elementor-nav-menu--dropdown.sm-nowrap{
	margin-left: 40px !important;
	margin-top: 15px !important;
}
}