/* Hippo Scrapping · ronda de conversión (2026-10-03).
   Adapta el componente compartido de reserva (reserva.css, sin tocar) a los
   tokens de Hippo y añade la tira de próximos huecos y la barra fija móvil.
   Acento: #6fb0fa (centro del degradado de los CTA). Sobre el navy de la
   tarjeta (#17243c) da 7,1:1 y con tinta #05070c encima, 9,0:1. */
[data-reserva] {
  --rv-accent: #6fb0fa;
  --rv-accent-ink: #05070c;
  --rv-surface: rgba(238, 242, 247, .04);
  --rv-surface-2: rgba(111, 176, 250, .10);
  --rv-line: rgba(111, 176, 250, .24);
  --rv-text: var(--text);
  --rv-text-soft: var(--text-soft);
  --rv-text-mute: #9aa7b8;
  --rv-radius: 14px;
  margin-top: clamp(1.6rem, 4vw, 2.2rem);
  font-family: var(--sans);
}
[data-reserva] .rv-body h3, [data-reserva] .rv-q legend { font-family: var(--display); }
[data-reserva] .rv-consent a, [data-reserva] .rv-noencaja a, [data-reserva] .rv-error a { color: var(--blue-1); text-decoration: underline; text-underline-offset: 3px; }
[data-reserva] .rv-submit { width: 100%; }

/* Tira de próximos huecos bajo el CTA del héroe */
.hero-actions { flex-direction: column; align-items: flex-start; }
.hero-proximos { margin-top: .2rem; }
.hero-proximos .rv-prox-k { color: var(--text-soft); }
.hero-proximos .rv-prox { color: var(--text); background: rgba(10, 15, 26, .55); border-color: rgba(111, 176, 250, .35); }
.hero-proximos .rv-prox:hover, .hero-proximos .rv-prox:focus-visible { border-color: #6fb0fa; background: rgba(111, 176, 250, .14); }
.hero-proximos .rv-prox:focus-visible { outline: 2px solid #6fb0fa; outline-offset: 2px; }

/* Barra fija en móvil */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 780;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .7rem 16px calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 15, 26, .94); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.sticky-cta[hidden] { display: none; }
.sticky-cta-text { display: grid; min-width: 0; line-height: 1.25; }
.sticky-cta-text strong { font-family: var(--display); font-size: .95rem; color: var(--text); }
.sticky-cta-text span { font-size: .78rem; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta .btn { flex: 0 0 auto; min-height: 44px; padding: .7rem 1.3rem; }
@media (min-width: 769px) { .sticky-cta { display: none !important; } }
@media (max-width: 768px) { .footer { padding-bottom: 5.5rem; } }

/* La demo de puntuación se salía por la derecha a 375 px (fallo previo): el
   <fieldset> tiene min-inline-size: min-content y los <select> con textos
   largos lo ensanchaban. */
.score-demo, .score-demo-signals, .score-demo .sig { min-width: 0; }
.score-demo-signals { grid-template-columns: minmax(0, 1fr); }
.score-demo .sig-select select { min-width: 0; max-width: 100%; }

/* Escritorio: el titular a 4,7rem empujaba el botón de reserva por debajo
   del pliegue a 1440×900. Más contenido, mismo mensaje. */
@media (min-width: 960px) {
  .hero-title { font-size: clamp(2.4rem, 3.9vw, 3.5rem); max-width: 17ch; }
  .hero-sub { margin-top: 1.2rem; font-size: clamp(1rem, 1.3vw, 1.12rem); }
  .hero-actions { margin-top: 1.6rem; }
  .hero-trust { margin-top: 1.6rem; }
}