/**
 * BOLTEK V2 — Responsive layer (cargar después de main.css / catalog.css / product-page.css)
 * Breakpoints: 360 · 390 · 430 · 768 · 1024
 */

/* ── Tokens viewport (Safari iOS: evitar 100vh roto) ── */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --touch-min: 44px;
    --input-ios: 16px;
}

/* ── Base: sin scroll horizontal ── */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    overflow-x: clip;
    max-width: 100%;
}

body.nav-open {
    overflow: hidden;
    touch-action: none;
}

img,
video,
svg,
iframe {
    max-width: 100%;
}

/* Inputs ≥16px → evita zoom automático en iPhone Safari */
input,
select,
textarea {
    font-size: max(var(--input-ios), 1em);
}

.search-box input,
.torque-inputs input,
.fld input,
.fld textarea,
.fld select {
    font-size: var(--input-ios);
}

/* ── Contenedores y ritmo ── */
.container,
.page-intro__inner,
.catalog-intro__inner,
.cat-controls__inner,
.cat-main,
.cat-providers__inner,
.footer__container,
.footer__band-inner,
.home-cta__inner {
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
}

.section {
    padding-top: clamp(2.5rem, 6vw, 4rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.page-content {
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
}

/* ── Tipografía fluida en móvil ── */
@media (max-width: 430px) {
    .section__title {
        font-size: clamp(1.2rem, 5vw, 1.5rem);
        margin-bottom: 1.25rem;
    }

    .page-title {
        font-size: clamp(1.25rem, 5.5vw, 1.75rem);
        word-break: break-word;
    }

    .product-detail__title {
        font-size: clamp(1.35rem, 5vw, 2rem);
    }
}

/* ── Breadcrumb ── */
.breadcrumb ol {
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

.product-breadcrumb {
    flex-wrap: wrap;
    row-gap: 0.35rem;
    padding-left: max(0, var(--safe-left));
    padding-right: max(0, var(--safe-right));
}

/* ── Botones touch-friendly ── */
.btn,
.hero-carousel__btn,
.product-card__cta,
.product-cta,
.cto-submit {
    min-height: var(--touch-min);
}

@media (max-width: 430px) {
    .btn,
    .hero-carousel__btn,
    .product-cta,
    .emp-cta__btn-primary,
    .emp-cta__btn-outline,
    .srv-cta-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .hero-carousel__btn {
        width: 100%;
        max-width: 20rem;
    }

    .product-cta-row {
        flex-direction: column;
    }

    .product-cta-row .product-cta {
        width: 100%;
        justify-content: center;
    }
}

/* ── Header / menú mobile ── */
@media (max-width: 768px) {
    body.nav-open {
        overflow: hidden;
        touch-action: none;
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
    }

    .header__link,
    .header__sublink {
        min-height: var(--touch-min);
    }

    /* Submenú acordeón (no desplegar todo a la vez) */
    .header__item--dropdown:hover .header__submenu,
    .header__item--dropdown:focus-within .header__submenu {
        display: none;
    }

    .header__menu.is-open .header__item--dropdown .header__submenu {
        display: none;
    }

    .header__menu.is-open .header__item--dropdown.is-submenu-open .header__submenu {
        display: block;
        max-height: min(45dvh, 280px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .header__link--has-caret {
        justify-content: space-between;
    }

    .header__sublink--all {
        font-weight: 600;
        border-bottom: 1px solid var(--header-border);
        margin-bottom: 0.2rem;
        padding-bottom: 0.6rem;
    }
}

/* ── Home: hero carousel (Safari iOS) ── */
.hero-carousel {
    height: auto;
    min-height: min(520px, calc(100dvh - var(--header-height) - var(--safe-top)));
    max-height: 90dvh;
}

@supports not (height: 100dvh) {
    .hero-carousel {
        min-height: min(520px, calc(100vh - var(--header-height) - var(--safe-top)));
        max-height: 90vh;
    }
}

.hero-carousel__content {
    padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 6rem);
    max-width: 100%;
}

.hero-carousel__sub {
    font-size: clamp(0.9rem, 2.8vw, 1.05rem);
}

.hero-carousel__arrow {
    width: var(--touch-min);
    height: var(--touch-min);
}

@media (max-width: 430px) {
    .hero-carousel {
        min-height: min(460px, calc(100dvh - var(--header-height)));
        max-height: 85dvh;
    }

    .hero-carousel__arrow--prev {
        left: 0.5rem;
    }

    .hero-carousel__arrow--next {
        right: 0.5rem;
    }

    .hero-carousel__dots {
        bottom: calc(1rem + var(--safe-bottom));
    }
}

/* Home: panel aplicaciones industriales */
.home-apps-panel {
    background: var(--color-bg-light);
    padding: clamp(1.25rem, 4vw, 3rem);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.home-apps-panel__title {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: clamp(1.1rem, 4vw, 1.5rem);
}

.home-apps-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
}

/* ── Empresa carousel ── */
.emp-carousel {
    height: auto;
    min-height: min(480px, 70dvh);
    max-height: 80dvh;
}

@supports not (height: 100dvh) {
    .emp-carousel {
        min-height: min(480px, 70vh);
        max-height: 80vh;
    }
}

@media (max-width: 768px) {
    .emp-hero-band {
        padding: clamp(2.5rem, 8vw, 5rem) 0 clamp(2rem, 6vw, 4rem);
    }

    .emp-hero-band__inner,
    .emp-valores__inner,
    .emp-industrias__inner {
        padding-left: max(1rem, var(--safe-left));
        padding-right: max(1rem, var(--safe-right));
    }

    .emp-stats {
        gap: 1.25rem;
    }

    .emp-quote-block {
        padding-left: 1rem;
    }

    .emp-quote-text {
        font-size: clamp(1.05rem, 4vw, 1.4rem);
    }

    .emp-valores {
        padding: clamp(2.5rem, 8vw, 6rem) 0;
    }

    .emp-carousel__arrow {
        width: var(--touch-min);
        height: var(--touch-min);
    }
}

/* ── Servicios ── */
@media (max-width: 768px) {
    .srv-block {
        min-height: 0;
    }

    .srv-block__img {
        min-height: 220px;
    }

    .srv-block__content {
        padding: clamp(1.5rem, 5vw, 2.5rem) max(1rem, var(--safe-left));
    }

    .srv-cert-band {
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1.25rem 1rem;
    }

    .srv-cta-btns {
        flex-direction: column;
        width: 100%;
    }

    .srv-cta-btn {
        width: 100%;
        justify-content: center;
        min-height: var(--touch-min);
    }
}

/* ── Contacto ── */
@media (max-width: 860px) {
    .cto-hero {
        padding: clamp(2.5rem, 8vw, 4.5rem) 1rem clamp(2rem, 6vw, 3.5rem);
    }

    .cto-form-card {
        padding: clamp(1.25rem, 4vw, 2.5rem);
    }
}

/* ── Representadas / Asociadas ── */
.representadas-grid,
.asociadas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    margin-top: 2rem;
}

.representadas-card,
.asociadas-card {
    border: 1px solid var(--color-border);
    padding: clamp(1.25rem, 4vw, 2rem);
    border-radius: var(--radius);
    background: var(--color-bg-light);
    text-align: center;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.representadas-card__logo {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.representadas-card__logo img {
    max-height: 80px;
    max-width: 100%;
    object-fit: contain;
}

.representadas-card__logo .brand-logo-fallback {
    max-width: 100%;
}

.representadas-card__btn {
    width: 100%;
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Catálogo ── */
@media (max-width: 768px) {
    .cat-controls__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    .results-count {
        white-space: normal;
        text-align: center;
    }

    .cat-main {
        padding-top: 1.25rem;
        padding-bottom: 2.5rem;
    }

    .cat-providers__panel {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Ficha producto ── */
@media (max-width: 768px) {
    .product-hero {
        padding: clamp(1rem, 4vw, 2.5rem);
        gap: 1.5rem;
    }

    .product-panel {
        padding: clamp(1rem, 4vw, 2rem);
    }

    .product-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .product-tabs::-webkit-scrollbar {
        display: none;
    }

    .product-tab {
        flex-shrink: 0;
        padding: 1rem 1.25rem;
        font-size: 0.95rem;
        white-space: nowrap;
    }

    .product-inquiry {
        padding: clamp(1rem, 4vw, 2.5rem);
    }

    .product-inquiry__quick {
        flex-direction: column;
    }

    .product-inquiry__btn {
        width: 100%;
        justify-content: center;
        min-height: var(--touch-min);
    }
}

/* Tablas públicas con scroll controlado */
.table-scroll,
.table-specs-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-specs,
.specs-table {
    min-width: 280px;
}

@media (max-width: 430px) {
    .specs-table th,
    .specs-table td,
    .table-specs th,
    .table-specs td {
        padding: 0.65rem 0.75rem;
        font-size: 0.875rem;
    }

    .specs-table th {
        width: 42%;
    }
}

.product-videos-grid iframe {
    max-width: 100%;
    min-height: 200px;
}

/* Modal imagen producto */
#imageModal {
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

.close-modal {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
    justify-content: center;
    top: max(12px, var(--safe-top));
    right: max(12px, var(--safe-right));
}

/* ── Footer ── */
@media (max-width: 900px) {
    .footer__band-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer__container {
        grid-template-columns: 1fr 1fr;
        gap: 2.75rem 3rem;
        padding-top: 3rem;
        padding-bottom: 2.75rem;
    }

    .footer__column--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .footer {
        padding-top: 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .footer__band {
        padding: 1.4rem 0;
    }

    .footer__band-inner {
        padding-left: max(1rem, var(--safe-left));
        padding-right: max(1rem, var(--safe-right));
    }

    .footer__band-btn {
        width: 100%;
        max-width: 16rem;
    }

    .footer__container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding-top: 2.5rem;
        padding-bottom: 2.25rem;
        padding-left: max(1rem, var(--safe-left));
        padding-right: max(1rem, var(--safe-right));
    }

    .footer__column--brand {
        grid-column: auto;
    }

    .footer__logo {
        max-width: 150px;
        margin-bottom: 1.25rem;
    }

    .footer__column--brand > p {
        max-width: none;
    }

    .footer__title {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .footer__list a {
        min-height: 2.75rem;
    }

    .footer__cta.btn,
    .footer a.footer__cta,
    .footer .btn {
        width: 100%;
        max-width: 16rem;
    }

    .footer__bottom {
        padding-left: max(1rem, var(--safe-left));
        padding-right: max(1rem, var(--safe-right));
        padding-bottom: max(1rem, var(--safe-bottom, 1rem));
    }
}

/* ── 404 standalone ── */
@media (max-width: 430px) {
    .e404 {
        padding: 2rem 1rem;
    }

    .e404__actions {
        flex-direction: column;
        width: 100%;
    }

    .e404__actions a {
        width: 100%;
        min-height: var(--touch-min);
    }

    .header-mini {
        padding: 1rem max(1rem, var(--safe-left));
    }
}