/* /assets/css/caja.css */
.contenedor{ width:min(1100px, 92%); margin-inline:auto; }

.caja-hero{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:14px;
  padding:18px 0 8px;
  text-align:center !important;
}
.caja-hero_media img{
  width:min(620px, 92vw);
  height:auto;
  display:block;
  margin:0 auto;
}
.caja-hero_texto{
  max-width:820px;
  margin:0 auto;
}
.caja-hero_texto p{
  margin:0 0 10px 0;
  line-height:1.45;
}
/* ====== Ejes: franja café ====== */
.banda-cafe{
  background:#72440b;
  color:#fff;
  padding: clamp(28px, 6vw, 56px) 0;
}
.ejes-wrap{ text-align:center; }

.ejes-titulo{
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  margin: 0 0 16px 0;
  letter-spacing: .5px;
}

.ejes-tira img{
  width: min(980px, 92vw);
  height: auto;
  display:block;
  margin: 8px auto 14px;
}

.ejes-intro{
  max-width: 780px;
  margin: 0 auto 24px;
  line-height: 1.5;
  font-family: 'Montserrat', sans-serif; /* 👈 forzamos Montserrat */
  font-weight: 700;                      /* 👈 negrita */
}

/* Grid de bloques */
.ejes-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 22px);
  margin-top: 8px;
}
.eje-item{
  display:flex;
  align-items:flex-start;
  gap: 14px;
  background: #8d5a21;              /* tono más claro que el fondo */
  border: 1px dashed rgba(255,255,255,.25);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  text-align:left;
}
.eje-img{
  width: 120px;
  height: auto;
  flex: 0 0 120px;
  border-radius: 10px;
  display:block;
}
.eje-texto h4{
  margin: 2px 0 6px 0;
  font-size: 1.05rem;
  color:#fff;
}
.eje-texto p{
  margin:0;
  color:#f7efe6;                     /* legible sobre café */
  line-height:1.45;
}

/* Responsive */
@media (max-width: 900px){
  .ejes-grid{ grid-template-columns: 1fr; }
  .eje-item{ align-items:center; }
  .eje-img{ width: 100px; flex-basis: 100px; }
}
/* ==== Fix: quitar fondos/bordes heredados en la franja de ejes ==== */
#ejes-caja .ejes-tira,
#ejes-caja .ejes-tira img,
#ejes-caja .eje-img{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: block;
}

/* Si los contenedores tenían padding que “crea” marco blanco */
#ejes-caja .ejes-tira{ padding: 0 !important; }
#ejes-caja .eje-item{ padding: 14px 16px; } /* mantén el padding del item, no del <img> */

/* ==== Si el archivo trae un margen blanco dibujado, recortamos con CSS (sin editar PNGs) ==== */
/* Ajusta los px hasta que desaparezca por completo la franja blanca */
#ejes-caja .ejes-tira img{
  /* recorta uniformemente el borde del sprite grande */
  clip-path: inset(12px round 18px);
}

#ejes-caja .eje-img{
  /* recorta los íconos individuales */
  clip-path: inset(10px round 12px);
}
/* === Corrección definitiva: eliminar franja blanca de las imágenes de ejes === */
#ejes-caja .ejes-tira img{
  display:block;
  width:min(980px,92vw);
  height:auto;
  margin:0 auto;
  background:transparent;
  border:0;
  box-shadow:none;
  /* recorte más fuerte para eliminar borde blanco */
  clip-path: inset(20px 0 0 0 round 18px);
}

/* En algunos navegadores clip-path no corta fondo blanco externo, usamos recorte absoluto */
#ejes-caja .ejes-tira{
  overflow:hidden;          /* corta cualquier margen blanco del PNG */
  border-radius:20px;       /* mantiene esquinas suaves */
  max-width:980px;
  margin:0 auto 20px;
}

/* Opcional: suaviza la sombra de la imagen */
#ejes-caja .ejes-tira img{
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
}
/* === Ajuste: aumentar tamaño de los íconos de los ejes individuales === */
#ejes-caja .eje-img{
  width: 180px;          /* antes era 120px, puedes subir o bajar este valor */
  flex: 0 0 150px;       /* mantiene el ancho fijo */
  height: auto;
  transition: transform .2s ease-in-out;
}

/* Opcional: un pequeño efecto al pasar el mouse */
#ejes-caja .eje-item:hover .eje-img{
  transform: scale(1.05);
}
/* 1) Que la tarjeta recorte cualquier desborde */
#ejes-caja .eje-item{
  overflow: hidden;            /* clave */
}

/* 2) Recorte asimétrico del PNG para quitar el halo blanco
   (top 6px | right 14px | bottom 18px | left 6px) */
#ejes-caja .eje-img{
  clip-path: inset(6px 14px 18px 6px round 8px);
}
/* ====== Las tres estrategias ====== */
.estrategias-wrap{
  padding: clamp(24px, 6vw, 56px) 0 8px;
  background: #fff;
  color: #3a2b19; /* marrón del texto como en la maqueta */
}

.estrategias-titulo{
  color: #738040; /* verde solicitado */
  text-align: center;
  font-size: clamp(1.6rem, 4.4vw, 3rem);
  letter-spacing: .5px;
  margin: 0 0 10px 0;
  line-height: 1.05;
}

.estrategias-intro{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.6;
  font-family: 'Montserrat', sans-serif; /* cuerpo con Montserrat */
  font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.15rem);
}
.estrategias-intro strong{
  font-weight: 700; /* acento en Montserrat bold */
}
/* ====== Fin Las tres estrategias ====== */
/* ====== Banners de estrategias: estilo unificado ====== */
#caldas-acompana,
#caldas-asesora,
#caldas-escucha,
#equipo-caja {
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(24px, 5vw, 40px) 0;
}

#caldas-acompana .banner-link,
#caldas-asesora .banner-link,
#caldas-escucha .banner-link,
#equipo-caja .banner-link {
  display: inline-block;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: transform .3s ease, filter .3s ease;
}

#caldas-acompana img,
#caldas-asesora img,
#caldas-escucha img,
#equipo-caja img {
  display: block;
  max-width: 100%;
  height: auto;
  border: none;
  border-radius: 0;
  transition: transform .3s ease, filter .3s ease;
}

/* Hover (zoom + aclarado) */
#caldas-acompana .banner-link:hover img,
#caldas-asesora .banner-link:hover img,
#caldas-escucha .banner-link:hover img,
#equipo-caja .banner-link:hover img {
  transform: scale(1.05);
  filter: brightness(1.15);
}
/* ====== Sección final: Para quienes usan esta caja ====== */
.para-quienes{
  background: #fff;
  color: #3a2b19;
  text-align: center;
  padding: clamp(32px, 6vw, 64px) 0;
}

.para-quienes-wrap{
  max-width: 900px;
  margin: 0 auto;
}

/* Título principal */
.para-titulo{
  font-family: 'CaldasCamina', sans-serif;
  color: #69bbd8;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  margin: 0 0 10px 0;
  letter-spacing: .5px;
}

/* Subtítulo */
.para-subtitulo{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* Bold */
  color: #69bbd8;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  margin: 0 0 22px 0;
}

/* Párrafo */
.para-texto{
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  color: #3a2b19;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  line-height: 1.6;
  margin: 0;
}

.para-texto strong{
  font-weight: 700; /* acentos en bold */
}
/* Desktop por defecto (PNG panorámico) */
.hero.hero-caja{
  background-image: url('../images/banners/caja/banner-caja.png');
  background-size: cover;
  background-position: 50% 20%;      /* ajusta el 2º % si “corta” arriba/abajo (ej. 50% 30%) */
  height: clamp(260px, 28vw, 420px);  /* alto adaptable */
  padding: 0 !important;
}

/* Móvil (JPG recorte alto) — zoom-out y menos alto */
@media (max-width: 768px){
  .hero.hero-caja{
    background-image: url('../images/banners/caja/banner-caja-mobile.jpg');
    background-repeat: no-repeat;
    background-size: cover;        /* vuelve a cover para llenar completamente */
    background-position: 50% 40%;
    height: 220px;                 /* o el alto que prefieras */
    margin: 0;                     /* evita márgenes externos */
    padding: 0;                    /* evita rellenos internos */
    border: 0;                     /* por si hay borde heredado */
  }
}