/* =====================================================================
   REGISTRO DE LUGARES

   Usa el sistema de sitio.css (--s-*). Nada nuevo de color ni de
   tipografía: solo las piezas que este formulario necesita y que el
   resto del sitio no tenía.
   ===================================================================== */

/* Encabezado corto, sin video: es una página de trámite, no la portada. */
.s-hero-mini{
  background:linear-gradient(135deg, var(--s-azul-osc) 0%, var(--s-azul) 60%, #2b3f75 100%);
  color:#fff; padding:clamp(3rem,7vw,4.5rem) 0 clamp(2.5rem,5vw,3.5rem);
}
.s-hero-mini .s-eyebrow{ display:block; margin-bottom:.7rem; }
.s-hero-mini .s-h1{ color:#fff; }
.s-hero-mini .s-lead{ color:rgba(255,255,255,.85); margin-top:.9rem; max-width:56ch; }

.s-lugar-wrap{ max-width:760px; }
.s-lugar-form{ display:flex; flex-direction:column; gap:1.25rem; }

.s-lugar-seccion{
  font-size:1.05rem; font-weight:800; color:var(--s-azul);
  letter-spacing:-.01em; margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.6rem;
  padding-bottom:.9rem; border-bottom:1px solid var(--s-linea);
}
.s-lugar-seccion i{ color:var(--s-oro); font-size:.95em; }

/* El número del paso: da orden y sensación de avance. */
.s-lugar-seccion .paso{
  flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--s-azul); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:800;
}

/* Un poco más de aire dentro de cada caja, para que no se vea apretado. */
.s-form-caja{ padding:1.75rem; }
@media(min-width:640px){ .s-form-caja{ padding:2rem 2.1rem; } }

.s-etq .opc{ font-weight:500; color:var(--s-gris-2); text-transform:none;
             letter-spacing:0; font-size:.9em; }
.s-lugar-ayuda{ font-size:.8rem; color:var(--s-gris); line-height:1.5; margin:.4rem 0 0; }

/* ---------- Amenidades ---------- */
.s-amenidades{
  display:grid; gap:.55rem;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
.s-amen{
  display:flex; align-items:center; gap:.6rem; cursor:pointer;
  padding:.65rem .8rem; border:1.5px solid var(--s-linea); border-radius:11px;
  font-size:.9rem; color:var(--s-tinta); background:#fcfdff;
  transition:border-color .15s, background .15s;
  -webkit-user-select:none; user-select:none;
}
.s-amen:hover{ border-color:var(--s-azul-claro); }
.s-amen input{ width:18px; height:18px; accent-color:var(--s-azul); flex:none; cursor:pointer; }
.s-amen:has(input:checked){ border-color:var(--s-azul); background:rgba(30,45,92,.05); font-weight:600; }

/* ---------- Fotos ---------- */
.s-fotos-drop{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:1.75rem 1rem; border:2px dashed var(--s-linea); border-radius:14px;
  background:#fcfdff; cursor:pointer; text-align:center;
  transition:border-color .18s, background .18s;
}
.s-fotos-drop:hover{ border-color:var(--s-azul-claro); background:#f6f9ff; }
.s-fotos-drop.lleno{ border-color:var(--s-azul); }
.s-fotos-drop i{ font-size:1.8rem; color:var(--s-azul-claro); }
.s-fotos-drop .t{ font-weight:700; color:var(--s-tinta); font-size:.95rem; }
.s-fotos-drop .s{ font-size:.78rem; color:var(--s-gris); }

.s-fotos-prev{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
.s-fotos-prev .mini{ position:relative; width:88px; height:88px; border-radius:10px;
                     overflow:hidden; border:1px solid var(--s-linea); background:var(--s-fondo); }
.s-fotos-prev .mini img{ width:100%; height:100%; object-fit:cover; display:block; }
.s-fotos-prev .portada{
  position:absolute; left:0; right:0; bottom:0; text-align:center;
  background:var(--s-azul); color:#fff; font-size:.62rem; font-weight:700;
  padding:.15rem; letter-spacing:.04em; text-transform:uppercase;
}

/* ---------- Términos ---------- */
.s-terminos-cuerpo{
  background:var(--s-fondo); border:1px solid var(--s-linea); border-radius:12px;
  padding:1.1rem 1.25rem; font-size:.88rem; color:var(--s-tinta); line-height:1.6;
  max-height:16rem; overflow-y:auto;
}
.s-terminos-cuerpo ol{ margin:.6rem 0 0; padding-left:1.2rem; }
.s-terminos-cuerpo li{ margin-bottom:.55rem; }
.s-terminos-cuerpo strong{ color:var(--s-azul); }
.s-terminos-mini{ margin-top:.7rem; font-size:.82rem; color:var(--s-gris);
                  padding-top:.7rem; border-top:1px dashed var(--s-linea); }

.s-acepta{
  display:flex; align-items:flex-start; gap:.7rem; margin-top:1.1rem;
  font-size:.9rem; line-height:1.5; color:var(--s-tinta); cursor:pointer;
}
.s-acepta input{ width:20px; height:20px; accent-color:var(--s-azul); flex:none; margin-top:.05rem; cursor:pointer; }

/* ---------- Envío ---------- */
.s-lugar-envio{ text-align:center; padding-top:.5rem; }
.s-lugar-envio .s-btn{ min-width:15rem; }
.s-lugar-envio .s-lugar-ayuda{ text-align:center; margin-top:.7rem; }

/* ---------- Errores ---------- */
.s-lugar-err{
  display:flex; gap:.8rem; align-items:flex-start;
  background:#fdeeee; border:1px solid rgba(185,28,28,.3); border-radius:12px;
  padding:1rem 1.15rem; margin-bottom:1.25rem; color:var(--s-rojo-osc);
}
.s-lugar-err i{ font-size:1.15rem; margin-top:.1rem; flex:none; }
.s-lugar-err ul{ margin:.35rem 0 0; padding-left:1.1rem; font-size:.88rem; }
.s-lugar-err li{ margin-bottom:.2rem; }

/* ---------- Éxito ---------- */
.s-lugar-ok{ text-align:center; padding:2.5rem 2rem; }
.s-lugar-ok i{ font-size:3rem; color:#0f7b4f; }
.s-lugar-ok h2{ font-size:1.5rem; font-weight:800; color:var(--s-tinta); margin:.8rem 0 .4rem; }
.s-lugar-ok p{ color:var(--s-gris); line-height:1.6; max-width:44ch; margin:0 auto; }
.s-lugar-mini{ font-size:.85rem; color:var(--s-gris-2); margin-top:.5rem !important; }
.s-lugar-ok-acc{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; }

@media(max-width:520px){
  .s-lugar-ok-acc{ flex-direction:column; }
  .s-lugar-ok-acc .s-btn{ width:100%; }
}

/* Franja de beneficios en el encabezado: contesta "¿qué me cuesta?" de
   entrada, sin recargar. */
.s-hero-benef{
  display:flex; flex-wrap:wrap; gap:.7rem 1.5rem; margin-top:1.5rem;
}
.s-hero-benef span{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.9rem; font-weight:600; color:rgba(255,255,255,.92);
}
.s-hero-benef i{ color:var(--s-oro); }

/* Cierre de página: reasegura antes del envío, con un fondo suave. */
.s-lugar-envio{
  background:var(--s-fondo); border:1px solid var(--s-linea);
  border-radius:var(--s-r-lg); padding:1.75rem; margin-top:.25rem;
}

/* =====================================================================
   LAYOUT

   Una sola columna centrada, sin columnas laterales vacías. Arriba, una
   barra de pasos horizontal y pegada que ubica en el avance sin robar
   espacio. Es lo que se ve limpio: el contenido manda, no el marco.
   ===================================================================== */
.s-lugar-layout{ max-width:760px; margin:0 auto; }
.s-lugar-col{ min-width:0; }
.s-lugar-col .s-lugar-form{ display:flex; flex-direction:column; gap:1.25rem; }

/* Barra de pasos horizontal, pegada arriba al hacer scroll. */
.s-stepper{
  position:sticky; top:0; z-index:20;
  display:flex; gap:.4rem; overflow-x:auto; margin-bottom:1.5rem;
  padding:.7rem; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border:1px solid var(--s-linea); border-radius:99px;
  box-shadow:var(--s-sh); scrollbar-width:none;
}
.s-stepper::-webkit-scrollbar{ display:none; }
.s-stepper a{
  flex:none; display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .85rem; border-radius:99px; text-decoration:none;
  font-size:.85rem; font-weight:600; color:var(--s-gris); white-space:nowrap;
  transition:color .15s, background .15s;
}
.s-stepper a span{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--s-fondo); border:1.5px solid var(--s-linea); color:var(--s-gris-2);
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:800; transition:all .18s;
}
.s-stepper a:hover{ color:var(--s-azul); }
.s-stepper a.on{ color:#fff; background:var(--s-azul); }
.s-stepper a.on span{ background:#fff; border-color:#fff; color:var(--s-azul); }

/* El ancla no queda tapada por la barra pegada. */
.s-form-caja[id]{ scroll-margin-top:5rem; }