/* =========================================================
   García Recta Design — responsive.css
   Todos los breakpoints en un solo lugar (se carga último,
   así estas reglas ganan sobre las de layout/components).
   ========================================================= */

/* ---------- Cursor / nav secundaria: solo desktop con mouse ---------- */
@media (hover:none), (max-width:900px) {
    .cursor-dot, .cursor-ring { display: none; }
}
@media (max-width: 1100px) {
    .secnav { display: none; }
}

/* ---------- Nav ---------- */
@media (max-width:900px) {
    .nav-links { display: none; }
    .nav-cta { display: none; }
    .nav-toggle { display: flex; }
}

/* ---------- Hero ---------- */
@media (max-width: 700px) {
    .hero-coords { display: none; }
}

/* ---------- Stats ---------- */
@media (max-width:700px) {
    .stats-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ---------- Espacios ---------- */
@media (max-width:800px) {
    .espacios-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
    .esp-item,
    .esp-item:nth-child(1), .esp-item:nth-child(2), .esp-item:nth-child(3),
    .esp-item:nth-child(4), .esp-item:nth-child(5) {
        grid-column: span 1; grid-row: span 1; align-self: stretch;
    }
}

/* ---------- Producto (Rollkit/Plegakit) ---------- */
@media (max-width:900px) {
    .producto-grid, .producto-reverse .producto-grid { grid-template-columns: 1fr; }
    .producto-reverse .producto-media { order: 0; }
    .producto-media { aspect-ratio: 4/3; }
}

/* ---------- Sticky showcase (Complementos): se desactiva el sticky en mobile ---------- */
@media (max-width:900px) {
    .sticky-grid { grid-template-columns: 1fr; }
    .sticky-media { position: static; height: 42vh; margin-bottom: 24px; }
    .sticky-img { position: static; opacity: 1 !important; display: none; }
    .sticky-img.active { display: block; }
    .sticky-item { min-height: auto; opacity: 1; padding: 34px 0; }
}

/* ---------- Proyectos: scroll horizontal nativo en mobile (sin sticky JS) ---------- */
@media (max-width:800px) {
    .h-proyectos { height: auto; }
    .h-proyectos-sticky { position: relative; height: auto; padding: 60px 0; }
    .h-track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; -webkit-overflow-scrolling: touch; }
    .h-slide { flex: 0 0 85vw; height: 50vh; scroll-snap-align: start; }
    .h-progress { display: none; }
}

/* ---------- Showroom ---------- */
@media (max-width:900px) {
    .showroom-grid { grid-template-columns: 1fr; }
    .showroom-media { order: -1; }
}

/* ---------- Proceso ---------- */
@media (max-width:800px) {
    .proceso-steps { grid-template-columns: repeat(2,1fr); }
}

/* ---------- Formulario ---------- */
@media (max-width:640px) {
    .form-row { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
@media (max-width:700px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- WhatsApp flotante ---------- */
@media (max-width:640px) {
    .wa-float span { display: none; }
    .wa-float { padding: 13px; }
}

/* ---------- Safe areas iOS (notch / home indicator) ---------- */
@media (max-width: 900px) {
    .nav { padding-top: calc(26px + env(safe-area-inset-top, 0px)); }
    .nav.scrolled { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
    .wa-float { bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
}