/* 🔧 Arreglar ancho y centrado tras Elementor */
body {
  overflow-x: hidden;
}

.site,
.site-header,
.site-content,
.site-footer,
.wrap,
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
/* Menú principal - Hello Biz */
header a {
  color: #f28c00 !important;   /* naranja */
  font-weight: 700 !important; /* negrita */
}
.barra-portada {
  margin-bottom: 16px !important;
}

.barra-portada a {
  display: block;
}
.zona-actividades {
  text-align: center;
}
.zona-actividades {
  text-align: center;
}
/* Separadores verticales naranjas entre columnas */
.wp-block-columns .wp-block-column {
  padding: 0 18px;
}

.wp-block-columns .wp-block-column:not(:last-child) {
  border-right: 3px solid #f28c00;
}
.banner-voluntariado img{
  width: 88vw !important;   /* más ancho que la pantalla */
  max-width: none !important;
  height: auto !important;
  display: block !important;
  margin-left: 1%;
  transform: translateX(-1%);
}
/* ✅ Layout correcto SOLO para las fichas de asociaciones */dores naranjas verticales como en tu ejemplo */
.ficha-asociacion > .wp-block-column{
  padding: 0 28px !important;
}

.ficha-asociacion > .wp-block-column:not(:last-child){
  border-right: 3px solid #f28c00 !important;
}

/* Imágenes: que no se deformen ni se salgan */
.ficha-asociacion img{
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Columna derecha: imagen vertical grande y bien recortada (sin pixelarse raro) */
.ficha-asociacion > .wp-block-column:last-child img{
  width: 100% !important;
  height: 520px !important;         /* ajusta si la quieres más alta/baja */
  object-fit: cover !important;
}

/* Foto central (horizontal) con tamaño razonable */
.ficha-asociacion > .wp-block-column:nth-child(2) img{
  width: 100% !important;
  max-height: 320px !important;
  object-fit: cover !important;
}
/* =========================
   FICHAS DE ASOCIACIONES
   ========================= */

.ficha-asociacion{
  margin: 50px auto !important;
  align-items: flex-start !important;
}

/* Columnas: aire y separadores */
.ficha-asociacion > .wp-block-column{
  padding: 0 24px !important;
}

.ficha-asociacion > .wp-block-column:not(:last-child){
  border-right: 3px solid #f28c00 !important;
}

/* Todas las imágenes: comportamiento base correcto */
.ficha-asociacion img{
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 🟧 COLUMNA CENTRAL → imagen horizontal */
.ficha-asociacion > .wp-block-column:nth-child(2) img{
  width: 100% !important;
  max-height: 300px !important;
  object-fit: cover !important;
  margin-bottom: 12px;
}

/* 🟧 COLUMNA DERECHA → imagen vertical */
.ficha-asociacion > .wp-block-column:last-child img{
  width: 100% !important;
  height: 460px !important;
  object-fit: cover !important;
}

/* Evitar que imágenes se monten unas sobre otras */
.ficha-asociacion figure{
  margin: 0;
}
/* ---- AJUSTE FINO fichas (ancho de columnas + fotos controladas) ---- */

/* Forzar el layout en 3 columnas bien repartidas */
  align-items: flex-start !important;
}

/* Anchos: izquierda / centro / derecha */
.ficha-asociacion > .wp-block-column:nth-child(1){
  flex: 0 0 22% !important;
  max-width: 22% !important;
}

.ficha-asociacion > .wp-block-column:nth-child(2){
  flex: 0 0 46% !important;
  max-width: 46% !important;
}

.ficha-asociacion > .wp-block-column:nth-child(3){
  flex: 0 0 32% !important;
  max-width: 32% !important;
}

/* Evita que cualquier imagen "se salga" */
.ficha-asociacion > .wp-block-column{
  overflow: hidden !important;
}

/* Foto central: horizontal, tamaño constante */
.ficha-asociacion > .wp-block-column:nth-child(2) img{
  width: 100% !important;
  height: 260px !important;
  object-fit: contain !important;
}

/* Foto derecha: vertical grande, pero controlada */
.ficha-asociacion > .wp-block-column:nth-child(3) img{
  width: 100% !important;
  height: 520px !important;
  object-fit: contain !important;
}

/* Móvil: que se apilen bonito */
@media (max-width: 900px){
  .ficha-asociacion{
    flex-wrap: wrap !important;
  }
  .ficha-asociacion > .wp-block-column{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    padding: 0 !important;
  }
  .ficha-asociacion > .wp-block-column:nth-child(3) img{
    height: 360px !important;
  }
}
/* ---- AJUSTE FINAL (sin romper columnas) ---- */

/* Ajustar anchos SIN cambiar el display del bloque */
.ficha-asociacion > .wp-block-column:nth-child(1){
  flex-basis: 22% !important;
}

.ficha-asociacion > .wp-block-column:nth-child(2){
  flex-basis: 46% !important;
}

.ficha-asociacion > .wp-block-column:nth-child(3){
  flex-basis: 32% !important;
}

/* Evitar que las columnas se estiren raro */
.ficha-asociacion > .wp-block-column{
  min-width: 0 !important;
}

/* Imagen central: controlada */
.ficha-asociacion > .wp-block-column:nth-child(2) img{
  width: 100% !important;
  height: 260px !important;
  object-fit: contain !important;
}

/* Imagen derecha: vertical controlada */
.ficha-asociacion > .wp-block-column:nth-child(3) img{
  width: 100% !important;
  height: 520px !important;
  object-fit: cover !important;
}

/* Móvil: apilar */
@media (max-width: 900px){
  .ficha-asociacion > .wp-block-column{
    flex-basis: 100% !important;
    border-right: none !important;
    padding: 0 !important;
  }
  .ficha-asociacion > .wp-block-column:nth-child(3) img{
    height: 360px !important;
  }
}
/* FORZAR que la imagen de la columna derecha se vea ENTERA (no recorte) */
.ficha-asociacion .wp-block-column:last-child img {
  object-fit: contain !important;
  object-position: center !important;
  width: 25% !important;
  height: 520px !important; /* ajusta si quieres */
  background: #fff !important;
}
/* COLUMNA CENTRAL: solo la PRIMERA imagen se recorta y tiene altura fija */
.ficha-asociacion .wp-block-column:nth-child(2) figure:first-of-type img{
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
}

/* COLUMNA CENTRAL: las demás imágenes (si las hay) vuelven a normal */
.ficha-asociacion .wp-block-column:nth-child(2) figure:not(:first-of-type) img{
  height: auto !important;
  object-fit: contain !important;
}
/* FOTO DEL MEDIO: que se vea ENTERA (sin recorte) */
.ficha-asociacion .wp-block-column:nth-child(2) img{
  width: 100% !important;
  height: 300px !important;          /* ajusta si la quieres más alta */
  object-fit: contain !important;    /* 👈 clave: ver entera */
  object-position: center !important;
  background: #fff !important;
}
/* DERECHA: si es una ficha con CARTEL, que se vea entero y con tamaño controlado */
.ficha-asociacion.ficha-cartel .wp-block-column:last-child img{
  height: 520px !important;        /* puedes subir/bajar */
  object-fit: contain !important;
  background: #fff !important;
}

/* Que el cartel no se vaya a ancho completo si es muy vertical */
.ficha-asociacion.ficha-cartel .wp-block-column:last-child figure{
  max-width: 350px !important;     /* controla el tamaño del cartel */
  margin: 0 auto !important;       /* centrado */
}
/* LOGOS (columna izquierda): que nunca se recorten */
.ficha-asociacion .wp-block-column:first-child img{
  width: 100% !important;
  max-width: 220px !important;   /* tamaño del logo */
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;     /* centrado */
  display: block !important;
}
.ficha-asociacion .wp-block-column:first-child,
.ficha-asociacion .wp-block-column:first-child figure{
  overflow: visible !important;
}
/* 1) Si hay logo en la columna izquierda, que se vea SIEMPRE */
.ficha-asociacion .wp-block-column:first-child figure,
.ficha-asociacion .wp-block-column:first-child .wp-block-image,
.ficha-asociacion .wp-block-column:first-child img{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
}

/* 2) Si NO hay imagen/logo, que no deje hueco gigante */
.ficha-asociacion .wp-block-column:first-child{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

/* 3) El logo (si existe) centrado y con tamaño razonable */
.ficha-asociacion .wp-block-column:first-child img{
  width: 100% !important;
  max-width: 220px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

/* 4) Redes y contacto centrados */
.ficha-asociacion .wp-block-column:first-child{
  text-align: center !important;
}
/* 🔒 LOGOS (columna izquierda): que NUNCA se recorten */
.ficha-asociacion > .wp-block-column:first-child img{
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* Ajuste visual opcional del logo */
.ficha-asociacion > .wp-block-column:first-child img{
  margin-bottom: 16px;
}
/* Evitar que cualquier imagen se haga "full width" dentro de las fichas */
.ficha-asociacion figure,
.ficha-asociacion .wp-block-image{
  max-width: 100% !important;
}

/* Columna central: que las imágenes NO tapen el texto */
.ficha-asociacion .wp-block-column:nth-child(2) .wp-block-image{
  margin: 0 0 16px 0 !important;
}

.ficha-asociacion .wp-block-column:nth-child(2) .wp-block-image img{
  width: 100% !important;
  max-height: 320px !important;
  object-fit: contain !important;   /* ver entera, sin invadir */
  height: auto !important;
}

/* Por si ese logo está como "alignfull/alignwide" */
.ficha-asociacion .alignfull,
.ficha-asociacion .alignwide{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* DERECHA: por defecto que la foto rellene toda la columna (no cuadrito) */
.ficha-asociacion:not(.ficha-cartel) .wp-block-column:last-child img{
  width: 100% !important;
  height: 520px !important;        /* ajusta si quieres */
  object-fit: cover !important;     /* 👈 rellena */
  object-position: center !important;
  display: block !important;
}

/* Si el bloque de la derecha tiene figure con max-width, lo quitamos */
.ficha-asociacion:not(.ficha-cartel) .wp-block-column:last-child figure{
  max-width: none !important;
  width: 100% !important;
}
/* Separar los botones grandes (como los de ayer) */
.wp-block-button,
.wp-block-group .wp-block-button {
  margin-bottom: 16px !important;
}
/* Quitar el fondo sobrante de los grupos que envuelven botones */
.wp-block-group.has-background {
  background: transparent !important;
  padding: 0 !important;
}
/* ✅ Layout 3 columnas para PROYECTOS (logo | contenido | foto grande) */
.ficha-proyecto.wp-block-columns{
  display: grid !important;
  grid-template-columns: 260px 1fr 420px !important; /* izq | centro | dcha */
  gap: 40px !important;
  align-items: start !important;
}

/* Que nada se salga de su columna */
.ficha-proyecto.wp-block-columns > .wp-block-column{
  min-width: 0 !important;
}

/* Imágenes: siempre dentro */
.ficha-proyecto img{
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Columna derecha: foto grande vertical, recortada bonita */
.ficha-proyecto.wp-block-columns > .wp-block-column:last-child img{
  width: 100% !important;
  height: 560px !important;   /* ajusta si la quieres más alta/baja */
  object-fit: cover !important;
}

/* Columna central: la foto horizontal se ve ENTERA (no recortada) */
.ficha-proyecto.wp-block-columns > .wp-block-column:nth-child(2) img{
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* En móvil: apilar */
@media (max-width: 900px){
  .ficha-proyecto.wp-block-columns{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .ficha-proyecto.wp-block-columns > .wp-block-column:last-child img{
    height: auto !important;
  }
}
/* 🔧 Evitar que imágenes "ancho completo" se salgan de las columnas */
.wp-block-columns .alignfull,
.wp-block-columns .alignwide {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 🔧 Asegurar que las imágenes respeten su columna */
.wp-block-column img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* 🔧 Evita solapamientos raros */
.wp-block-column {
  overflow: hidden;
}
/* ✅ Reparto fijo 3 columnas (logo / contenido / foto derecha) */
.tres-columnas-fotos.wp-block-columns{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 28px !important;
  align-items: flex-start !important;
}

/* Anchos: ajusta si quieres más/menos */
.tres-columnas-fotos.wp-block-columns > .wp-block-column:nth-child(1){
  flex: 0 0 22% !important;  /* logos */
  max-width: 22% !important;
}
.tres-columnas-fotos.wp-block-columns > .wp-block-column:nth-child(2){
  flex: 1 1 56% !important;  /* imagen + texto */
  max-width: 56% !important;
}
.tres-columnas-fotos.wp-block-columns > .wp-block-column:nth-child(3){
  flex: 0 0 22% !important;  /* foto derecha */
  max-width: 22% !important;
}

/* Evitar que la imagen del medio “reviente” la columna */
.tres-columnas-fotos.wp-block-columns > .wp-block-column:nth-child(2) img{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}
/* ✅ Reparto fijo 3 columnas (logo / contenido / foto derecha) */
.tres-columnas-fotos.wp-block-columns{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 28px !important;
  align-items: flex-start !important;
}

/* Anchos: ajusta si quieres más/menos */
.tres-columnas-fotos.wp-block-columns > .wp-block-column:nth-child(1){
  flex: 0 0 22% !important;  /* logos */
  max-width: 22% !important;
}
.tres-columnas-fotos.wp-block-columns > .wp-block-column:nth-child(2){
  flex: 1 1 56% !important;  /* imagen + texto */
  max-width: 56% !important;
}
.tres-columnas-fotos.wp-block-columns > .wp-block-column:nth-child(3){
  flex: 0 0 22% !important;  /* foto derecha */
  max-width: 22% !important;
}

/* Evitar que la imagen del medio “reviente” la columna */
.tres-columnas-fotos.wp-block-columns > .wp-block-column:nth-child(2) img{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}
/* ✅ 3 columnas: que NUNCA se salga del ancho de la página */
.tres-columnas-fotos.wp-block-columns{
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Ajuste de anchos de columnas (logo / centro / derecha) */
.tres-columnas-fotos.wp-block-columns > .wp-block-column{
  min-width: 0 !important; /* clave para que no empuje fuera */
}

.tres-columnas-fotos.wp-block-columns > .wp-block-column:first-child{
  flex: 0 0 22% !important;
}

.tres-columnas-fotos.wp-block-columns > .wp-block-column:nth-child(2){
  flex: 1 1 56% !important;
}

.tres-columnas-fotos.wp-block-columns > .wp-block-column:last-child{
  flex: 0 0 22% !important;
}

/* Imágenes: nunca más grandes que su columna */
.tres-columnas-fotos img{
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Imagen central: que no se “coma” todo (se ve completa, sin recorte) */
.tres-columnas-fotos > .wp-block-column:nth-child(2) img{
  width: 100% !important;
  max-height: 380px !important;   /* ajusta si la quieres más alta */
  object-fit: contain !important;
}

/* Imagen derecha: vertical grande pero controlada (sin salirse) */
.tres-columnas-fotos > .wp-block-column:last-child img{
  width: 100% !important;
  max-height: 520px !important;   /* ajusta si la quieres más alta */
  object-fit: cover !important;
}

/* En móvil: apilar para que no se rompa */
@media (max-width: 900px){
  .tres-columnas-fotos.wp-block-columns{
    flex-wrap: wrap !important;
  }
  .tres-columnas-fotos.wp-block-columns > .wp-block-column{
    flex: 0 0 100% !important;
  }
}
/* Contenedor: centrado y con ancho máximo */
.menu-botones{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Botones: que no ocupen un ancho exagerado y tengan aire */
.menu-botones a{
  display: block;
  max-width: 100%;
  margin: 18px auto;
}