/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/

.cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row-reverse;
}

.grecaptcha-badge {
    visibility: hidden;
}

html{
	overflow-x:hidden;
}

/* --- 1) Evitar que la columna derecha sobresalga --- */
/* Pon a tu COLUMNA derecha una clase: col-derecha (en WPBakery > Extra class name) */
/* Si no puedes, dime la clase real y lo ajusto. */
.col-derecha{
  max-width: 100%;
  overflow: hidden;              /* corta lo que se salga */
}

/* El grid no puede ser más ancho que su contenedor */
.col-derecha .grid-personajes{
  max-width: 100%;
  overflow: hidden;              /* asegura que no haga overflow horizontal */
}


/* --- 2) Grid: se mantiene repeat(6, auto) --- */
.grid-personajes{
  display: grid !important;
  grid-template-columns: repeat(6, auto) !important;
  justify-content: center !important;   /* centra el conjunto dentro de la columna */
  justify-items: center !important;
  column-gap: 12px !important;          /* separación horizontal general */
  row-gap: 22px !important;             /* separación vertical (ajusta si quieres) */
}

/* Quitar márgenes que pueda meter Impreza en w-image */
.grid-personajes .w-image{
  margin: 0 !important;
}


/* --- 3) Spans (igual que lo tienes) --- */
.grid-personajes > .w-image:nth-child(1),
.grid-personajes > .w-image:nth-child(2){
  grid-column: span 3 !important;
}

/* Acercar SOLO la primera fila (sin cambiar columnas) */
.grid-personajes > .w-image:nth-child(1){
  justify-self: end !important;       /* se pega al centro */
}
.grid-personajes > .w-image:nth-child(2){
  justify-self: start !important;     /* se pega al centro */
}

/* Las otras 3 ocupan un tercio cada una */
.grid-personajes > .w-image:nth-child(3),
.grid-personajes > .w-image:nth-child(4),
.grid-personajes > .w-image:nth-child(5){
  grid-column: span 2 !important;
}


/* --- 4) Imágenes --- */
.grid-personajes img{
  width: clamp(120px, 15vw, 300px) !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  height: auto !important;
  display: block !important;
}


/* --- 5) Tu flex de la sección --- */
.hero-two-col .g-cols.via_flex{
  flex-wrap: nowrap !important;
}

.hero-two-col-responsive{
  display: none !important;
}



.hero-two-col .g-cols.via_flex {
    flex-wrap: nowrap !important;
}

.hero-two-col-responsive{
    display: none !important;
}

@media (max-width: 1370px){
    .hero-two-col-responsive{
        display: block !important;
    }
}

.hero-two-col{
    display: block !important;
}

@media (max-width: 1370px){
    .hero-two-col{
        display: none !important;
    }
}

@media (min-width: 600px) and (max-width: 1024px){

  .grid-centro .w-grid-list{
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* El último ocupa toda la fila, pero no se hace más ancho */
  .grid-centro .w-grid-list > .w-grid-item:last-child{
    grid-column: 1 / -1 !important;
    width: calc((100% - var(--gap, 0px)) / 2) !important; /* ancho de 1 columna */
    justify-self: center !important;
  }
}