/* ===============================
   BASE (colores / tipografías)
   =============================== */
.quienes-somos-page{
  background:#F5F3EE;
  color:#1F2020;
  font-family:'Montserrat',sans-serif;
}

/* Títulos y subtítulos coherentes (1 sola definición base) */
.title-section{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  letter-spacing:-.3px;
  color:#6a6666;
  text-transform:uppercase;
  font-size:42px;            /* guía: ~42pt */
  margin:0 0 40px 0;
}
.subtitle{
  font-family:'Bodoni',serif;
  font-style:italic;
  font-weight:700;
  font-size:36px;
  color:#1F2020;
}

/* ===============================
   QUIÉNES SOMOS (compacto)
   =============================== */
.quienes-somos-section{
  background:#F5F3EE;
  color:#1F2020;
  overflow:hidden;
  padding:1.5rem 0;
  min-height:calc(100vh - 180px);
  display:flex;
  align-items:center;
}
.quienes-somos-section .row{ align-items:center; }

.content-block{
  padding:1rem 3rem 1rem 6rem;
  font-size:14px;
  line-height:1.8;
  text-align:left;
}

.image-block{
  position:relative;
  text-align:right;
  overflow:visible;
}
.image-block .blue-shape{
  position:absolute;
  bottom:0;
  right:0;
  width:55%;
  height:65%;
  background:#B4DAFF;
  z-index:0;
}
.image-block img{
  position:relative;
  z-index:2;
  width:80%;
  height:auto;
  object-fit:contain;
  display:block;
  margin:0 auto;
  transform:translateY(-5%);
}

/* =========================================
   NUESTRA TIENDA – Desktop (única versión)
   ========================================= */
.nuestra-tienda-section{
  --maxw:1400px;
  --gap:3rem;
  --band-h:240px;
  --left-img-w:56%;
  --right-img-w:38%;
  --solape-der:130px;
}

/* Top: título + texto (columna izq = ancho foto izq) */
.container-texto{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:var(--left-img-w) calc(100% - var(--left-img-w));
  gap:var(--gap);
  align-items:start;
}

/* Alinear título al borde derecho de su columna (coincide con borde dcho de foto izq) */
.col-izq{ display:flex; }
.col-izq .title-section{
  margin-left:auto;
  text-align:right;
}

/* Texto con “aire” inferior para evitar solape con foto derecha */
.col-der{
  padding-bottom:var(--solape-der);
  position:relative;
  z-index:3;
}

/* Banda gris + anclaje inferior de imágenes */
.banda-tienda{
  background:#5f5e5c;
  height:var(--band-h);
  margin-top:36px;
  position:relative;
}
.banda-inner{
  max-width:var(--maxw);
  margin:0 auto;
  height:100%;
  position:relative;
}
.img-left,
.img-right{
  position:absolute;
  bottom:0;
}
.img-left{
  left:0;
  width:var(--left-img-w);
}
.img-right{
  right:0;
  width:var(--right-img-w);
}
.img-left img,
.img-right img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  box-shadow:0 8px 16px rgba(0,0,0,.25);
}

/* Captions: base + alineación por contexto */
.caption1,
.caption2{
  position:absolute;
  top:-30px;
  font-family:'Bodoni',serif;
  font-style:italic;
  font-weight:700;
  font-size:20px;
  line-height:1.2;
  white-space:nowrap;
  padding:2px 10px;
  background:transparent;
  color:#1F2020; /* por defecto */
}
.img-left  .caption1{ right:10px; text-align:right; } /* “Así la soñábamos…” */
.img-right .caption2{ left:10px;  text-align:left;  } /* “Y así ha quedado.” */

/* =========================================
   Responsive (≤ 992px) – UNA SOLA VERSIÓN
   ========================================= */
@media (max-width:992px){

  /* QUIÉNES SOMOS */
  .quienes-somos-section{
    flex-direction:column;
    padding:2rem 0 0;
    min-height:auto;
  }
  .content-block{ padding:0 1.5rem; }
  .title-section{
    font-size:clamp(28px,7vw,36px);
    text-align:center;
    margin-bottom:1rem;
  }
  .subtitle{
    font-size:1.4rem;
    text-align:left;
    margin-bottom:1rem;
  }
  .image-block{
    width:100vw;
    margin-left:calc(-50vw + 50%);
    overflow:visible;
    margin-top:2rem;
  }
  .image-block img{ width:100%; height:auto; }
  .image-block .blue-shape{
    left:50%;
    width:100%;
    height:25%;
    transform:translateX(-50%);
  }

  /* NUESTRA TIENDA – Móvil/Tablet */
  .nuestra-tienda-section{
    --mobile-media-w:65vw;                 /* ancho de cada imagen en móvil */
    --cap-gap:10px;
    --band-rise:clamp(120px,34vw,220px);   /* subida de banda hacia 1ª imagen */
  }

  /* 1 columna arriba */
  .container-texto{
    grid-template-columns:1fr;
    gap:1.25rem;
    padding:0 16px;
  }
  .container-texto .col-der{ padding-bottom:0; } /* quitamos el “aire” de desktop */
  .nuestra-tienda-section .title-section{
    text-align:center;
    margin:0 0 14px;
  }

  /* Desactivamos fondo/altura fijos de la banda en móvil */
  .banda-tienda{
    background:transparent;
    height:auto;
    margin-top:24px;
  }
  .banda-inner{
    max-width:100%;
    padding:0;
    position:static;
  }

  /* Imágenes apiladas: izq y dcha, 65vw */
  .img-left,
  .img-right{
    position:relative;
    width:var(--mobile-media-w);
    margin-bottom:24px;
    z-index:1;
  }
  .img-left{  margin-left:0;    margin-right:auto; } /* izquierda */
  .img-right{ margin-left:auto; margin-right:0;    } /* derecha */
  .img-left img,
  .img-right img{ width:100%; height:auto; }

  /* Banda gris a 100% anclada a la 2ª imagen (bottom coincide con su base) */
  .img-right::before{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    bottom:0;
    top:calc(-1 * var(--band-rise));
    background:#5f5e5c;
    z-index:-1;
  }

  /* Captions centrados sobre cada imagen y colores solicitados */
  .caption{
    left:50%;
    transform:translateX(-50%);
    top:calc(-22px - var(--cap-gap));      /* ~22px alto del chip + gap */
    text-align:center;
    font-size:17px;
    background:transparent;
  }
  .img-left  .caption1{ color:#000; text-shadow:none; }
  .img-right .caption2{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45); }
}

/* ===== MOBILE FIX – franja gris debajo de ambas imágenes y a 100% ===== */
@media (max-width:600px){
  .nuestra-tienda-section{
    --band-h-mobile:clamp(50px,14vw,110px); /* altura aproximada hasta mitad 1ª img */
    --cap-gap:10px;                         /* separación caption–imagen */
    --mobile-media-w:65vw;                  /* ancho de cada imagen */
    overflow-x:hidden;                      /* evita scroll horizontal por 100vw */
  }

  /* 1) Anulamos la franja que estaba dentro de .img-right */
  .nuestra-tienda-section .img-right::before{ content:none !important; }

  /* 2) Dibujamos la franja en el contenedor común, detrás de ambas imágenes */
  .nuestra-tienda-section .banda-tienda{
    position:relative;
    background:transparent !important;
    height:auto !important;
    overflow:visible;
  }
  .nuestra-tienda-section .banda-inner{
    position:static;
    max-width:100%;
    padding:0;
  }
  .nuestra-tienda-section .banda-tienda::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:100vw;               /* ocupa todo el ancho de pantalla */
    bottom:0;                  /* filo inferior = base de la 2ª imagen */
    top:calc(-1 * var(--band-rise)); /* sube hasta ~mitad de la 1ª imagen */
    background:#5f5e5c;
    z-index:0;
    pointer-events:none;
  }

  /* 3) Aseguramos que las imágenes queden por encima de la franja */
  .nuestra-tienda-section .img-left,
  .nuestra-tienda-section .img-right{
    position:relative !important;
    width:var(--mobile-media-w) !important;
    margin-bottom:24px;
    z-index:1;                 /* sobre la franja gris */
  }
  .nuestra-tienda-section .img-left{  margin-left:0;    margin-right:auto; }
  .nuestra-tienda-section .img-right{ margin-left:auto; margin-right:0; }

  .nuestra-tienda-section .img-left img,
  .nuestra-tienda-section .img-right img{
    width:100%;
    height:auto;
    display:block;
  }

  /* 4) Captions centrados con separación (negro/blanco) */
  .nuestra-tienda-section .caption{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:calc(-22px - var(--cap-gap));
    text-align:center;
    font-size:17px;
    padding:2px 8px;
    background:transparent;
  }
  .nuestra-tienda-section .img-left  .caption{ color:#000; text-shadow:none; }
  .nuestra-tienda-section .img-right .caption{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45); }
  /* Separación extra entre la 1ª imagen y el caption de la 2ª (vista móvil) */
@media (max-width: 992px){
  /* alto aproximado del chip del caption en móvil */
  .nuestra-tienda-section{ --cap-height: 22px; } /* ajusta 20–24 si hiciera falta */
}

/* colocar DESPUÉS de tus reglas @media (max-width: 600px) si las tienes */
@media (max-width: 600px){
  .nuestra-tienda-section .img-left{
    /* 24px que ya tenías + altura del caption + gap del caption */
    margin-bottom: calc(24px + var(--cap-height,22px) + var(--cap-gap,50px)) !important;
  }
}

}
/* ↓ Reduce la altura de la franja gris en móvil/tablet */
@media (max-width: 992px){
  .nuestra-tienda-section{
    /* antes: clamp(90px, 24vw, 140px) */
    --band-h-mobile: clamp(60px, 18vw, 110px);
  }

  /* por si algún estilo previo la deja más alta, aseguramos el uso de height */
  .banda-tienda::after{
    height: var(--band-h-mobile) !important;
    bottom: 0;
  }

  /* que la 2ª imagen toque la franja (sin huecos extra) */
  .img-right{ margin-bottom: 0 !important; }
}
/* Ajuste fino de la franja gris en móvil: desde mitad 1ª imagen hasta base 2ª */
@media (max-width: 992px){
  /* Relación de aspecto aproximada de tus fotos y alturas del chip */
  .nuestra-tienda-section{
    --img-ar: 0.66;        /* ≈ 3:2. Ajusta 0.62–0.70 si tus fotos varían */
    --cap-height: 22px;    /* alto del caption */
    --cap-gap: 10px;       /* separación caption–imagen */
    --band-fine: 182px;     /* ← ajuste fino: + sube el borde superior hacia abajo */
  }

  .nuestra-tienda-section .banda-tienda::after{
    /* Base sigue pegada a la 2ª imagen */
    bottom: 0;
    height: auto !important;   /* usamos top+bottom, no height fija */
    /* Borde superior ≈ mitad de 1ª imagen + caption + gap - ajuste fino */
    top: calc(
      -1 * (
        (var(--mobile-media-w, var(--media-w, 65vw)) * var(--img-ar) * 0.5)
        + var(--cap-height)
        + var(--cap-gap)
        - var(--band-fine)
      )
    ) !important;
  }
}

/* Móvil/Tablet: 75% del viewport, pegado al borde derecho */
@media (max-width: 992px){
  .image-block{ width:100vw; margin-left:calc(-50vw + 50%); } /* ya lo usas */

  .image-block .blue-shape{
    width:75vw;       /* 75% de pantalla */
    right:0;
    left:auto;
    transform:none;   /* anula el centrado anterior */
    height:25%;       /* mantenemos la altura móvil que tenías */
    bottom:0;
    z-index:0;
  }
}


/* =======================
   COMPROMISO — versión estable
   ======================= */
:root{ --header-h: 92px; } /* ajusta a la altura real de tu header fijo */

.compromiso-section{
  /* FALBACK VH y SVH para distintos navegadores */
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  overflow: hidden;     /* evita que nada pise la sección siguiente */
  margin: 0;
  padding: 0;
}
.compromiso-section .container-fluid{ padding: 0; }
.compromiso-section .row{ height: 100%; }

.compromiso-img{
  height: 100%;
  min-height: 0;
  overflow: hidden;     /* recorte lateral */
}

/* Importante: anular .img-fluid de Bootstrap */
.compromiso-img img{
  display: block;
  width: 100%;
  height: 100% !important; /* <- gana a .img-fluid { height:auto } */
  max-width: none;         /* que no limite el escalado */
  object-fit: cover;
  object-position: 35% center; /* mueve encuadre si lo necesitas */
}

.compromiso-text{
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
}
.compromiso-text-inner{
  max-width: 720px;
  margin-left: auto;
  padding: clamp(20px, 3.2vw, 40px);
  height: 100%;
  overflow: auto;        /* si sobra copy, scrollea DENTRO del texto */
}

.compromiso-section .title-section{
  text-align: left !important;
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1.05;
  margin-block: clamp(8px, 1.2vh, 14px);
}
.compromiso-text-inner p{
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.5;
  max-width: 60ch;
}

/* Pantallas bajas (portátiles): compactar un poco más */
@media (max-height: 820px){
  .compromiso-section .title-section{ font-size: clamp(26px, 2.6vw, 38px); }
  .compromiso-text-inner{ padding: 20px 22px 24px; }
}

/* ===== MÓVIL / TABLET ===== */
@media (max-width: 991.98px){
  .compromiso-section{
    height: auto;         /* vuelve a flujo normal */
    overflow: visible;
  }
  .compromiso-text{ order: 1; height: auto; }
  .compromiso-img{ order: 2; height: auto; display: grid; place-items: center; padding: 8px 0 22px; }

  .compromiso-img img{
    width: min(92vw, 560px);
    height: auto !important;
    max-height: clamp(220px, 55vh, 420px); /* tope para que NO sea gigante */
    object-fit: cover;
    object-position: 50% 40%;
  }

  .compromiso-section .title-section{
    text-align: center !important;
    margin-bottom: 12px;
    font-size: clamp(26px, 6.2vw, 38px);
  }
  .compromiso-text-inner{
    padding: 20px 18px 8px;
    margin: 0 auto;
    max-width: 680px;
    height: auto;
    overflow: visible;
    text-align: center;
  }
}

/* ===== Compromiso: centrar bloque de texto y justificar (desktop) ===== */
@media (min-width: 992px){
  .compromiso-text{
    display: flex;
    align-items: center;
    justify-content: center;     /* centra horizontalmente el inner */
    height: 100%;
  }

  .compromiso-text-inner{
    max-width: 700px;            /* ancho legible */
    margin: 0 auto;              /* centrado real (antes tenía margin-left:auto) */
    padding: clamp(20px, 3vw, 40px);
    height: auto;
    overflow: visible;
  }

  /* Justificación de título y párrafos */
  .compromiso-section .title-section{
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.05;
    margin-bottom: clamp(12px, 1.6vw, 18px);
  }
  /* truco para justificar también la última línea del título */
  .compromiso-section .title-section::after{
    content: "";
    display: inline-block;
    width: 100%;
  }

  .compromiso-text-inner p{
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;               /* cortes de palabra naturales (si el html tiene lang="es") */
    max-width: 60ch;
    margin-bottom: 12px;
  }
}

/* móvil/tablet se mantiene como antes: título centrado y texto centrado */

/* Oculta la imagen inline por defecto (desktop) */
.compromiso-img-mobile{ display:none; }

/* Móvil / tablet */
@media (max-width: 991.98px){
  /* Oculta la columna de imagen y muestra la inline */
  .compromiso-img{ display:none; }
   .compromiso-img-mobile{
    display: block;
    width: 80%;
    height: auto;
    max-width: none;
    max-height: clamp(220px, 55vh, 420px);
    margin: 0 10px 0 18px;   /* sin auto -> pegada a la izquierda */
    object-fit: cover;
    object-position: 50% 40%;
  }

  /* Título centrado; texto justificado */
  .compromiso-section .title-section{
    text-align:center !important;
    margin-bottom: 10px;
  }
  .compromiso-text-inner{
    text-align: initial; /* evita heredar centrado */
    max-width: 680px;
    margin: 0 auto;
  }
  .compromiso-text-inner p{
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
  }
}

/* Si NO usas utilidades Bootstrap, añade:
@media (min-width: 992px){
  .d-lg-block{ display:block !important; }
  .d-lg-none{ display:none !important; }
}
@media (max-width: 991.98px){
  .d-lg-block{ display:none !important; }
  .d-lg-none{ display:block !important; }
}
*/

@media (max-width: 991.98px){
  .compromiso-text-inner{ text-align: initial; }

  .compromiso-img-mobile{
    display: block;
    width: 80%;
    height: auto;
    max-height: clamp(220px, 55vh, 420px);
    margin: 10px 0 18px auto; /* ← empuja la imagen a la derecha */
    object-fit: cover;
    object-position: 50% 40%;
  }

  /* (si quieres el texto justificado) */
  .compromiso-text-inner p{
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
  }
}