/* =========================================================
   ABOUT SECTION – FINAL LIMPIO
   ========================================================= */

.about-main{
  position: relative;
  z-index: 2;

}
.section-spacing{
  padding: 6rem 0 2rem;
  background-color: #ececec;
  position: relative;
  z-index: 1;
}

/* ---------- Top content ---------- */
.about-info{
  margin-bottom: 6.25rem;
  position: relative;
  z-index: 1;
}

.w-layout-blockcontainer{
  max-width: 940px;
  margin: 0 auto;
}

.container{
  max-width: var(--_layout---container-max-width);
  padding: 0 var(--_layout---container-gutter);
  margin: 0 auto;}

/* ---------- Grid ---------- */
.grid-about{
  display: grid;
  grid-template-columns: .4fr 1fr;
  gap: var(--gap--gap-10);}

@media (max-width: 991px){
  .grid-about{
    display: flex;
    flex-direction: column;
    gap: var(--gap--gap-8);
  }}


/* ---------- Avatar ---------- */
.avatar{
  display: flex;
  margin: 1.875rem 0 .625rem;
}

.avatar-box{
  background: var(--color--white);
  padding: .125rem;
  border-radius: var(--border-radius--sm);
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-box.one{
  margin-left: -1.188rem;
}

.avatar-image{
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius--sm);
}

.avatar-icon-box{
  width: 50px;
  height: 50px;
  background: var(--color--dark);
  border-radius: var(--border-radius--sm);
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-icon{
  width: 12px;
  height: 12px;
}

.avatar-info{
  font-size: var(--_typography---body--body-xs);
  color: var(--color--dark);
}

/* ---------- Bottom circles container ---------- */
.about-info-inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

/* =========================================================
   INFO BOX (BASE)
   ========================================================= */
.about-info-box{/*define el tamaño “normal” del círculo y centra el contenido*/
  width: 290px;
  height: 290px;
  border-radius: 50%;
  background: var(--color--white);
  border: 1px solid var(--color--dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* ---------- Variants ---------- */
.about-info-box.box-bg-dark{
  background: #5a5a5a;
  border: none;
}

.about-info-box.box-bg-white{
  background: var(--color--white);
}

/* =========================================================
   BOX 1 – 20+
   ========================================================= */
.about-info-inner-wrap{
  margin-bottom: 1.25rem;
}

.about-content{
  color: var(--color--primary-2);
  margin-bottom: 1.25rem;
}

.about-content-description{
  font-size: var(--base-font-size--base-small);
  width: 230px;
}

/* Counter */
.about-info-box .inner-number{
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: var(--_typography---h1--h1);
  font-weight: var(--_typography---body--font-weight-600);
  line-height: 1;
  margin-bottom: .625rem;
}

.about-info-box .count,
.about-info-box .counter-symbol-text{
  margin: 0;
  padding: 0;
  line-height: 1;
}

.about-info-box.box-bg-white .count,
.about-info-box.box-bg-white .counter-symbol-text{
  color: var(--color--dark);
}

.about-info-box.box-bg-dark .count,
.about-info-box.box-bg-dark .counter-symbol-text{
  color: var(--color--white);
}

/* Vector image */
.about-box-vector{
  height: 70px;
}

/* =========================================================
   BOX 2 – MAP (Across the U.S.)
   ========================================================= */
.about-info-box.box-bg-white{
  justify-content: flex-start;
  padding: 2.2rem 1.75rem 1.75rem;
}

.about-info-box.box-bg-white .counter-run{
  display: flex;
  justify-content: center;
  margin-bottom: .5rem;
}

.about-info-box.box-bg-white .about-info-text{
  margin: .25rem 0 .5rem;
  font-size: var(--_typography---body--body-xs);
}

.about-info-box.box-bg-white .about-rating-wrap{
  display: flex;
  justify-content: center;
}

.about-info-box.box-bg-white .about-rating-text{
  text-align: center;
  line-height: 1.15;
}

/* =========================================================
   BOX 3 – DARK
   ========================================================= */
.like-score{
  font-size: var(--_typography---h4--h4);
  color: var(--color--white);
}

.about-info-description{
  color: var(--color--white);
}

/* =========================================================
   IMAGE CIRCLE
   ========================================================= */
.about-image-box{
  width: 290px;
  height: 290px;
  border-radius: 50%;
  object-fit: cover;
}

/* =========================================================
   MEDIA QUERIES
   ========================================================= */
@media (min-width: 1920px){
  .about-info-box,
  .about-image-box{
    width: 450px;
    height: 450px;
  }

  .about-info-box{
    padding-top: 7.5rem;
  }

  .about-box-vector{
    height: 145px;
  }
}

@media (max-width: 767px){
  .about-info-box,
  .about-image-box{
    width: 250px;
    height: 250px;
  }

  .about-info-box{
    padding-top: 2rem;
  }

  .about-info-box.box-bg-white{
    padding-top: 1.6rem;
  }
}
/* =========================================================
   FIX DEFINITIVO (CHROME): SIEMPRE 4 EN UNA SOLA FILA
   PÉGALO AL FINAL DEL CSS
   ========================================================= */

/* Por si el padre está limitando el ancho */
.container-full,
.about-section .container-full,
.about-section .about-info-inner{
  width: 100% !important;
  max-width: 100% !important;
}

/* ==============================
   DESKTOP: 4 en una sola fila
   ============================== 
@media (min-width: 992px){
  .about-info-inner{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.25rem !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem !important;
  }

  .about-info-inner > .about-info-box,
  .about-info-inner > .about-image-box{
    flex: 0 0 260px !important;
    width: 260px !important;
    height: 260px !important;
  }
}*/


/* Cada círculo: ancho fijo, no se encoge 
.about-info-inner > .about-info-box,
.about-info-inner > .about-image-box{
  flex: 0 0 290px !important;             fijo */
 /* width: 290px !important;
  height: 290px !important;
  border-radius: 50% !important;
}*/

/* Imagen circular */
.about-image-box{
  object-fit: cover !important;
  display: block !important;
}

/* Responsive real (aquí sí permitimos que baje) */
@media (max-width: 991px){
  .about-info-inner{
    flex-wrap: wrap !important;
  }}

  /* =========================================================
   FIX TEXTO CÍRCULO OSCURO (On-Demand Production)
   ========================================================= */

/* evita que el texto se salga del círculo */
.about-info-box.box-bg-dark{
  padding: 2rem 1.5rem !important;
}

/* título: responsivo */
.about-info-box.box-bg-dark .like-score{
  font-size: clamp(1.4rem, 2.2vw, 2.6rem) !important;
  line-height: 1.05 !important;
  margin: 0 0 .75rem 0 !important;
  max-width: 90% !important;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* descripción: responsiva */
.about-info-box.box-bg-dark .about-info-description{
  font-size: clamp(.85rem, 1.1vw, 1.1rem) !important;
  line-height: 1.2 !important;
  max-width: 85% !important;
  margin: 0 auto !important;
}
/* TABLET: círculos un poco más pequeños */
@media screen and (min-width: 768px) and (max-width: 991px){

  .about-info-inner > .about-info-box,
  .about-info-inner > .about-image-box{
    flex: 0 0 250px !important;   /* antes 290px */
    width: 250px !important;
    height: 250px !important;
  }

  /* si quieres reducir un poquito el espacio entre círculos */
  .about-info-inner{
    gap: 1.25rem !important;
  }
}
/* AVATAR: solo uno y más largo */
.avatar.avatar-single{
  margin: 1.875rem 0 .625rem;
}

.avatar.avatar-single .avatar-box{
  padding: .25rem;
  border-radius: 12px;
}

.avatar.avatar-single .avatar-image{
  width: 220px;     /* ancho */
  height: 140px;    /* MÁS LARGO (alto) */
  object-fit: cover;
  border-radius: 12px;
}
/* Desktop normal: un poquito más chicos para que quepan mejor 
.about-info-inner > .about-info-box,
.about-info-inner > .about-image-box{
  flex: 0 0 260px !important;
  width: 260px !important;
  height: 260px !important;
}*/
/* Ajustes de texto dentro del círculo */
.about-content{
  margin-bottom: .85rem !important;
  font-size: 0.95rem;
}

.about-content-description{
  width: 210px !important;
  font-size: 0.85rem !important;
  line-height: 1.2 !important;
}

/* Número (20+) un poquito más pequeño */
.about-info-box .inner-number{
  font-size: clamp(2.2rem, 3vw, 3rem) !important;
  margin-bottom: .4rem !important;
}

/* Vector más pequeño */
.about-box-vector{
  height: 58px !important;
}
.about-info-inner{
  gap: 1.25rem !important;
}
/*.about-section{
  overflow: visible !important;
}*/



/* 2) Caja de MAP: centrar verticalmente para que no baje el texto */
.about-info-box.box-bg-white{
  justify-content: center !important;
  padding: 1.5rem 1.5rem !important;
}

/* 3) Ajuste del mapa + textos para que quepan SIEMPRE */
.about-info-box.box-bg-white .numbers-counts img{
  width: 110px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto .5rem !important;
}

.about-info-box.box-bg-white .about-info-text{
  margin: .35rem 0 .35rem !important;
  font-size: 12px !important;
}

.about-info-box.box-bg-white .about-rating-text{
  font-size: 18px !important;   /* baja un poco */
  line-height: 1.05 !important;
  margin: 0 !important;
}
/* Desktop + Tablet: permite que NO se corte el texto (Serving...) */
@media (min-width: 768px){
  .about-info-box{
    overflow: visible !important;
  }
}

/* Mobile: vuelve a recortar para que no se encime con otros elementos */
@media (max-width: 767px){
  .about-info-box{
    overflow: hidden !important;
  }
}
.about-info-box.box-bg-white{
  padding-top: 1.2rem !important;
}
/* ============================
   ABOUT CIRCLES – MOBILE FIX
   En móvil NO carrusel, que se vean completos (2x2)
   ============================ */
@media (max-width: 767px){

  .about-info-inner{
    flex-wrap: wrap !important;     /* ✅ permite bajar */
    overflow-x: hidden !important;  /* ✅ quita carrusel */
    justify-content: center !important;
  }

  .about-info-inner > .about-info-box,
  .about-info-inner > .about-image-box{
    flex: 0 0 250px !important;     /* tamaño fijo */
    width: 250px !important;
    height: 250px !important;
  }
}

/* ==============================
   DESKTOP: 4 en una sola fila
   ============================== */
@media (min-width: 992px){
  .about-info-inner{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.25rem !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem !important;
  }

  /*.about-info-inner > .about-info-box,
  .about-info-inner > .about-image-box{
    flex: 0 0 260px !important;
    width: 260px !important;
    height: 260px !important;
  }*/
}
/* BASE (mobile/tablet) */
.about-info-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:1.25rem;
}

.about-info-inner > .about-info-box,
.about-info-inner > .about-image-box{
  width:250px;
  height:250px;
  flex:0 0 250px;
}

/* DESKTOP */
@media (min-width: 992px){
  .about-info-inner{
    flex-wrap:nowrap;
    overflow-x:auto;
  }

  .about-info-inner > .about-info-box,
  .about-info-inner > .about-image-box{
    width:260px;
    height:260px;
    flex:0 0 260px;
  }
}
/* ==============================
   BASE: MOBILE + TABLET (2x2)
   ============================== */
.about-info-inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  overflow: hidden; /* sin carrusel en mobile/tablet */
}

.about-info-inner > .about-info-box,
.about-info-inner > .about-image-box{
  flex: 0 0 250px;
  width: 250px;
  height: 250px;
}

/* ==============================
   DESKTOP: 4 en una sola fila
   ============================== */
@media (min-width: 992px){
  .about-info-inner{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem;
  }

  .about-info-inner > .about-info-box,
  .about-info-inner > .about-image-box{
    flex: 0 0 260px;
    width: 260px;
    height: 260px;
  }
}