/**
 * Complementos responsive — solo viewports ≤768px.
 * Cargado después de susequid.css; no afecta escritorio.
 */

/* Submenú "Servicios": oculto hasta pulsar (mismo breakpoint que el menú hamburguesa, ≤900px) */
@media (max-width: 900px) {
    /* Menú hamburguesa: hacerlo más usable en pantallas pequeñas
       (que no se salga y que tenga scroll interno si crece). */
    .nav-shell.is-open {
        position: fixed !important;
        top: 76px !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        z-index: 60 !important;
        max-height: calc(100vh - 90px) !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0.7rem 0.9rem 0.85rem !important;
        box-sizing: border-box !important;
    }

    .nav-shell {
        width: 100% !important;
        max-width: 100% !important;
    }

    .nav-main {
        width: 100% !important;
    }

    /* El buscador del menú: forzar que el dropdown NO sea recortado */
    .nav-shell.is-open .search-suggestions {
        position: fixed !important;
        top: 140px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        z-index: 9999 !important;
    }

    .nav-link {
        font-size: 0.98rem !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        padding: 0.7rem 1rem !important;
    }

    .nav-link-active {
        border-radius: 14px !important;
    }

    .nav-sub a {
        font-size: 0.95rem !important;
        text-transform: none !important;
    }

    .nav-shell.is-open .nav-item.has-sub:not(.is-sub-open) .nav-sub {
        display: none !important;
    }

    .nav-shell.is-open .nav-item.has-sub.is-sub-open .nav-sub {
        position: static !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 0.35rem;
        padding: 0.4rem 0.5rem;
        box-shadow: none;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .nav-shell.is-open .nav-item.has-sub .nav-sub::before {
        display: none;
    }

    .nav-shell.is-open .nav-sub a {
        white-space: normal;
        padding: 0.65rem 1rem;
        min-height: 44px;
    }
}

@media (max-width: 768px) {
    html {
        overflow-x: clip;
    }

    .main {
        overflow-x: clip;
        overflow-wrap: anywhere;
        word-wrap: break-word;
    }

    .main img,
    .product-quickview-dialog img {
        max-width: 100%;
        height: auto;
    }

    .main video,
    .main iframe {
        max-width: 100%;
    }

    /* Hero: fixed background es problemático en iOS */
    .hero-split {
        background-attachment: scroll;
    }

    /* Contenedor: respetar notch / safe area */
    .container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    /* Franja superior: evita desbordes con textos largos */
    .tagline {
        font-size: clamp(0.8rem, 3.2vw, 1rem);
        line-height: 1.25;
    }

    /* Buscador: ancho fluido y sugerencias al ancho del panel */
    .nav-search {
        width: 100%;
        max-width: 100%;
    }

    .nav-search .search-input-wrapper {
        flex: 1;
        min-width: 0;
    }

    .nav-search input {
        width: 100% !important;
        min-width: 0;
        font-size: 16px;
    }

    .nav-search button {
        flex-shrink: 0;
        min-height: 44px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .search-suggestions {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box;
    }

    .search-suggestion-item {
        min-height: 44px;
        align-items: center;
    }

    /* Menú hamburguesa: área táctil mínima */
    .nav-toggle {
        min-width: 44px;
        min-height: 44px;
    }

    /* Tiras de servicio / KPI: min-width no fuerza overflow */
    .service-strip-text {
        min-width: 0;
    }

    .service-strip-inner {
        gap: 0.75rem;
    }

    /* ── Inicio: banners promo — imagen llena el recuadro (evita franjas vacías) ── */
    .seccion-banners .promo-card {
        height: auto;
        min-height: 0;
        aspect-ratio: 5 / 3;
        max-height: none;
    }

    .seccion-banners .promo-card img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        /* En móvil las imágenes se veían “recortadas”; para que se lean completas
           usamos contain (no recorta) y centramos el contenido. */
        object-fit: contain;
        object-position: center;
    }

    /* ── Categorías (inicio / listados): imagen ocupa mejor la tarjeta, rejilla 2 cols ── */
    .categorias-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .categoria-card {
        padding: 0.65rem 0.5rem 0.75rem;
        min-width: 0;
    }

    .categoria-card .categoria-card-img {
        width: 100%;
        margin: 0 0 0.4rem;
        max-height: none;
        min-height: 0;
        padding: 0;
        aspect-ratio: 1;
        border-radius: 14px;
        align-self: stretch;
    }

    .categoria-card .categoria-card-img img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
    }

    .categoria-card h3 {
        font-size: 0.92rem;
        line-height: 1.25;
    }

    /* ── Servicio: Alquiler (celular) — formulario y carrusel más bonitos ── */
    .alquiler-form-layout {
        grid-template-columns: 1fr !important;
        gap: 1.4rem !important;
    }

    .alquiler-carousel-viewport {
        height: 220px !important;
        margin-top: 1.25rem !important;
    }

    .alquiler-carousel-slide img {
        object-fit: contain !important;
        background: var(--surface-hover) !important;
    }

    .alquiler-carousel-dots {
        bottom: 1rem !important;
        right: 1rem !important;
    }

    .alquiler-form-card {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 1.25rem !important;
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: 20px !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06) !important;
    }

    .alquiler-form-card .form-contacto {
        gap: 0.75rem !important;
    }

    .alquiler-form-card .form-contacto .form-row-2 {
        grid-template-columns: 1fr !important;
    }

    /* Igualar estilo de inputs/selects en móvil (los selects eran más “feos”) */
    .alquiler-form-card .form-contacto input,
    .alquiler-form-card .form-contacto select,
    .alquiler-form-card .form-contacto textarea {
        width: 100% !important;
        padding: 0.75rem 0.9rem !important;
        border-radius: 12px !important;
        margin-bottom: 0.9rem !important;
        background: #ffffff !important;
        font-size: 16px !important;
        border: 1px solid var(--border) !important;
    }

    .alquiler-form-card .form-contacto label {
        font-weight: 700;
        color: var(--text-muted);
        margin-bottom: 0.35rem;
    }

    .alquiler-form-card .form-contacto button.btn-whatsapp {
        margin-top: 0.25rem !important;
    }

    /* Evita que el botón de WhatsApp flotante tape el final del formulario */
    .seccion-alquiler-form {
        padding-bottom: 6.5rem !important;
    }

    /* ── Listados de productos: 2 columnas, tarjetas más compactas ── */
    .productos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .producto-card .img-wrap {
        height: 130px;
        padding: 0.4rem;
    }

    .producto-card .img-wrap::before {
        width: 80px;
        height: 80px;
    }

    .producto-card .info {
        padding: 0.65rem 0.75rem 0.85rem;
    }

    .producto-card .info h3 {
        font-size: 0.82rem;
        line-height: 1.3;
    }

    /* ── Nosotros: la foto llena la máscara (corrige max-width 85% del tema) ── */
    .nosotros-story-visual img {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .nosotros-visual-mask {
        animation: none;
        border-radius: 22px;
    }

    .nosotros-visual-mask img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: cover;
        transform: none;
    }

    .nosotros-story-content > div:has(.btn-primary) {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* ── Ficha de producto: menos altura de caja imagen, botones apilados, relacionados en 2 cols ── */
    .ficha-producto {
        padding: 1.25rem 0.65rem 2rem;
    }

    .ficha-producto .grid {
        gap: 1.25rem;
    }

    .ficha-producto h1 {
        font-size: 1.15rem;
        line-height: 1.25;
    }

    .ficha-producto .imagen,
    .ficha-producto-imagen-wrap {
        height: min(240px, 42vh);
        max-width: 100%;
        padding: 0.75rem;
    }

    .ficha-producto-imagen-wrap::before {
        width: 140px;
        height: 140px;
    }

    .ficha-producto .imagen img,
    .ficha-producto-imagen-wrap img {
        object-fit: contain;
    }

    .producto-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
    }

    .producto-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .ficha-producto-descripcion {
        padding: 1rem !important;
        margin-top: 0.75rem;
    }

    .ficha-producto-sidebar-relacionados {
        padding: 1rem !important;
    }

    .relacionados-vert-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .relacionado-vert-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 0.45rem;
        padding: 0.45rem;
    }

    .relacionado-vert-card .img-wrap {
        width: 100%;
        height: 96px;
    }

    .relacionado-vert-card .img-wrap img {
        object-fit: contain;
    }

    .relacionado-vert-card .info h3 {
        font-size: 0.72rem;
        line-height: 1.25;
    }

    .relacionados-refresh-btn {
        margin-top: 0.65rem;
        font-size: 0.78rem;
        padding: 0.5rem 0.65rem;
    }

    /* Contacto: fila nombre + email (inline grid) → una columna */
    .pagina-contacto .form-contacto > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .pagina-contacto .form-contacto input,
    .pagina-contacto .form-contacto select,
    .pagina-contacto .form-contacto textarea {
        font-size: 16px;
    }

    .contacto-layout {
        padding: 1.25rem !important;
    }

    .pagina-contacto .contacto-map-section > div:has(> iframe) {
        height: min(280px, 50vh) !important;
    }

    /* Mi cotización: botones y cantidad táctiles */
    .quote-qty-row {
        flex-wrap: wrap;
    }

    .quote-qty-row input[type="number"] {
        font-size: 16px;
    }

    .quote-item-actions .btn-sm {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }

    /* Modal vista rápida: no pegar al borde y permitir scroll */
    .product-quickview-dialog {
        margin: 0.75rem;
        max-height: min(640px, calc(100vh - 1.5rem));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .product-quickview-close {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Chat flotante: menú no se sale por la izquierda en pantallas estrechas */
    .floating-chat-menu {
        right: 0;
        left: auto;
        max-width: min(260px, calc(100vw - 1.5rem));
    }

    .floating-chat-menu a {
        min-height: 44px;
        align-items: center;
    }

    /* Carrito flotante: objetivo táctil cómodo */
    .floating-cart .btn-cart {
        min-height: 48px;
        padding: 0.55rem 1rem;
    }

    /* Footer: iconos redes */
    .footer-icon {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}