.s12-ages{
  position: relative;
  width: 100%;
  min-height: 640px;             
  height: calc(100vh - var(--nav-h, 0px));
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  isolation: isolate;              
}
.s12-bg{
  position: absolute;
  inset: 0;
  background: url("../../images/image-13.jpg") center/cover no-repeat;
  filter: blur(4px);
  transform: scale(1.04);           
  z-index: -2;
}
.s12-scrim{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 400px at 50% 20%, rgba(0,0,0,.0), rgba(0,0,0,.25)),
    linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.35));
  z-index: -1;
}

.s12-inner{
  width: min(1100px, 92vw);
  display: grid;
  grid-template-rows: auto auto auto;
  row-gap: clamp(10px, 2.6vw, 24px);
  justify-items: center;
}
.s12-title{
  font-size: clamp(38px, 6.2vw, 72px);
  font-weight: 900;
  letter-spacing: .02em;
  text-shadow: 0 6px 22px rgba(0,0,0,.35);
  margin: 10px 0 0 0;
}
.s12-babies{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  justify-items: center;            
  gap: clamp(12px, 4vw, 40px);
  width: min(1000px, 92vw);              
  margin: clamp(6px, 1.2vw, 10px) auto 0; 
}
.s12-baby{
  width: clamp(320px, 22vw, 220px);
  height: auto;
  display: block;
  margin: 0 auto;                         
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
  user-select: none;
  pointer-events: none;
}
.s12-strip{
  width: min(1000px, 92vw);
}
.s12-strip{
  width: min(1000px, 92vw);
  background: linear-gradient(to right, #FFD43B, #FF7A00);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  padding: clamp(12px, 2vw, 18px) clamp(10px, 2vw, 18px);
  gap: 6px;
  margin-top: clamp(6px, 1.6vw, 14px);
}

.s12-item h3{
  font-size: clamp(16px, 2.4vw, 20px);
  font-weight: 800;
  margin: 0 0 4px 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.s12-item p{
  font-size: clamp(14px, 2vw, 18px);
  margin: 0;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.s12-item:not(:last-child){
  border-right: 1px solid rgba(255,255,255,.35);
}
@media (max-width: 900px){
  .s12-baby{ width: clamp(110px, 24vw, 180px); }
}

@media (max-width: 700px){
  .s12-ages{ height: auto; padding: 36px 0 48px; }
  .s12-babies{
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(8px, 3vw, 20px);
  }
  .s12-strip{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .s12-item{
    padding: 6px 0;
  }
  .s12-item:not(:last-child){
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.35);
  }
}

/* ======================= FIX altura real pantalla ======================= */

/* base para alturas completas */
html, body { height: 100%; }

/* Si tu navbar es FIXED/superpuesto, no hace falta restar su altura */
:root { --nav-h: 0px; }

/* Fallback para Safari/iOS antiguos (sin dvh) */
@supports not (height: 100dvh) {
  html { height: -webkit-fill-available; }
  body { min-height: -webkit-fill-available; }
  .s12-ages { height: -webkit-fill-available !important; }
}

/* Navegadores modernos: altura completa real */
@supports (height: 100dvh) {
  .s12-ages { height: 100dvh !important; }
}

/* En móviles: ocupar exactamente el viewport visible */
@media (max-width: 700px) {
  .s12-ages {
    height: 100svh !important;
    min-height: 640px;
    padding: 36px 0 48px;
  }
  @supports (height: 100dvh) {
    .s12-ages { height: 100dvh !important; }
  }
}