/* * Estilos de /inmueble/{slug} (cargados solo en esa página con $this->push('styles')). * Tokens en tokens.css; base compartida en app.css. También la usa * /vista-previa/{id} (misma vista inmueble.php): la franja de abajo es * exclusiva de esa ruta. */ /* — Banner de vista previa (borrador todavía sin publicar) — */ .preview-banner { background: var(--dusk-wash); color: var(--dusk); border-bottom: 1px solid var(--line); } .preview-banner__inner { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); font-size: var(--text-sm); line-height: var(--leading-snug); } .preview-banner__inner svg { flex-shrink: 0; } .preview-banner__inner strong { font-weight: 700; } /* — Volver — */ .detail-back { padding-top: var(--space-5); } .detail-back a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-muted); } .detail-back a:hover { color: var(--ink); } /* — Galería — * Escritorio: mosaico "1 grande + hasta 4 chicas" adaptado al número real de * fotos (tarea "calidad visual" #4, estilo Airbnb) — con menos de 5 quedaban * celdas vacías (hueco blanco, visto en QA final). `[data-count]` (topado en * 5) define la composición; el resto de fotos (más allá de la 5.ª) se * esconde en escritorio con `:nth-child(n+6)` y reaparece en la tira móvil. * Móvil: un solo carrusel a pantalla completa con scroll-snap por las fotos * COMPLETAS (no solo las 5 del mosaico) y una píldora contadora "1 / 8" — * las mismas etiquetas `