/* ==========================================================================
   Contadores de huespedes — estilos compartidos por todas las paginas
   ========================================================================== */

.huespedes{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;}

.cont{display:flex;flex-direction:column;gap:5px;min-width:0;}
.cont-rotulo{
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-faint);font-weight:700;
}
.cont-caja{
  display:flex;align-items:center;gap:2px;
  background:var(--sand);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:3px;
}
.cont-btn{
  width:44px;height:44px;flex:0 0 auto;
  border:none;background:transparent;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--olive);
  transition:background .25s, color .25s, opacity .25s;
}
.cont-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;}
.cont-btn:hover:not(:disabled){background:var(--olive-pale);}
.cont-btn:disabled{opacity:.28;cursor:default;}
.cont-btn:focus-visible{outline:2px solid var(--olive);outline-offset:1px;}
.cont-valor{
  min-width:26px;text-align:center;
  font-family:'Public Sans',sans-serif;font-size:15px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* aviso de tope: no bloquea, solo avisa */
.huespedes-aviso{
  flex-basis:100%;margin:0;
  font-size:12.5px;line-height:1.5;color:var(--terracotta-deep);font-weight:600;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s var(--ease), opacity .35s var(--ease), margin .45s var(--ease);
}
.huespedes-aviso.visible{max-height:60px;opacity:1;margin-top:4px;}

/* dentro del buscador del hero, donde el espacio es angosto */
.b-field .huespedes{gap:14px;}
.b-field .cont-caja{background:transparent;border:none;padding:0;gap:0;}
.b-field .cont-btn{width:28px;height:28px;background:var(--sand);}
.b-field .cont-btn svg{width:13px;height:13px;}
.b-field .cont-rotulo{display:none;}
.b-field .cont{flex-direction:row;align-items:center;gap:7px;}
.b-field .cont::before{
  content:attr(data-etiqueta);
  font-size:12.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;
}

@media(max-width:560px){
  .huespedes{gap:14px;}
  /* 44px es el minimo para el dedo. Antes decia 38 y se quedaba corto,
     justo en la pantalla donde mas importa. */
  .cont-btn{width:44px;height:44px;}
  /* en el buscador del hero el boton se ve chico para no romper la barra,
     pero el area que responde al toque se estira a 44 con un pseudo-elemento */
  .b-field .cont-btn{position:relative;}
  .b-field .cont-btn::after{content:'';position:absolute;inset:-8px;}
}