/*
 * Forros RH — responsive layer
 * Keeps the public visual system consistent across the landing, store,
 * cart and checkout without changing the shared header contract.
 */
:root {
    --frh-content: min(1180px, calc(100% - 40px));
    --frh-touch: 46px;
}

html { scroll-padding-top: 96px; }
body { min-width: 320px; }

.container {
    width: var(--frh-content);
    padding-inline: 0;
}

.section-head { max-width: 720px; }
.section-head h2 { text-wrap: balance; }
.section-head p { max-width: 660px; }

.btn,
.btn-nav,
.frh-store-wa-banner__btn,
.btn-primary,
.btn-ghost {
    min-height: var(--frh-touch);
}

button,
a,
input,
select,
textarea { -webkit-tap-highlight-color: transparent; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(230, 57, 70, .42);
    outline-offset: 2px;
}

.hero-content { width: var(--frh-content); }
.hero-title { text-wrap: balance; }

.form-contact,
.form-cotizacion { min-width: 0; }
.form-grid { min-width: 0; }
.form-row input,
.form-row select,
.form-row textarea { min-width: 0; width: 100%; }
.form-row textarea { resize: vertical; min-height: 118px; }
.ciudad-wrap { position: relative; }
.ciudad-dropdown {
    z-index: 40;
    max-height: min(300px, 42vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.cot-contact-chip { min-width: 0; }
.cot-chip-val { overflow-wrap: anywhere; }

.frh-store-hero__inner,
.frh-store-wa-banner__inner,
.frh-store-filters__inner { width: var(--frh-content); }
.frh-store-hero__text { min-width: 0; }
.frh-store-hero__text p { max-width: 610px; }
.frh-store-search { min-height: 48px; }
.frh-store-search {
    background: #1a1b22;
    border-color: rgba(255,255,255,.16);
}
.frh-store-search::placeholder { color: rgba(255,255,255,.52); }
.frh-store-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; padding-bottom: 4px; }
.frh-store-tab { flex: 0 0 auto; min-height: 42px; }
.frh-store-tab { color: rgba(255,255,255,.76); background: #1b1c23; border-color: rgba(255,255,255,.14); }
.frh-store-tab.active { color: #fff; background: rgba(230,57,70,.18); border-color: rgba(230,57,70,.65); }
.frh-store-card__btn { min-height: 46px; }

/* Cart and checkout contain a few legacy inline grids. These overrides make
   them readable on phones without requiring a template rewrite. */
#cart-resumen { z-index: 2; }
#cart-items .cart-item { align-items: flex-start; }
#cart-items + div { min-width: 0; }

@media (max-width: 1100px) {
    :root { --frh-content: min(100% - 36px, 960px); }
    .hero-title { font-size: clamp(3rem, 7vw, 5rem); }
    .nav-inner { gap: 16px; }
}

@media (max-width: 860px) {
    :root { --frh-content: calc(100% - 32px); }
    html { scroll-padding-top: 76px; }
    .hero { min-height: 760px; }
    .hero-content { padding-top: 80px; }
    .hero-title { font-size: clamp(2.8rem, 9vw, 4.7rem); }
    .hero-text { max-width: 620px; }
    .hero-stats { margin-bottom: 34px; }
    .section { --section-y: clamp(62px, 9vw, 92px); }
    .grid-2 { gap: 30px; }
    .cot-intro { order: 0; }
    .form-cotizacion { order: 1; }
}

@media (max-width: 640px) {
    :root { --frh-content: calc(100% - 28px); }
    .container { width: var(--frh-content); }
    .hero {
        min-height: 720px;
        align-items: flex-start;
    }
    .hero-content {
        width: var(--frh-content);
        padding-top: 114px;
    }
    .hero-eyebrow {
        max-width: 100%;
        padding: 8px 12px;
        font-size: .62rem;
        letter-spacing: .12em;
        line-height: 1.45;
    }
    .hero-title {
        font-size: clamp(2.5rem, 13vw, 4rem);
        line-height: .98;
        margin-bottom: 18px;
    }
    .hero-text { font-size: .94rem; line-height: 1.62; margin-bottom: 24px; }
    .hero-cta { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 34px; }
    .hero-cta .btn { width: 100%; justify-content: center; }
    .hero-stats { gap: 8px; padding-top: 22px; }
    .hero-stats strong { font-size: 1.65rem; }
    .hero-stats span { font-size: .62rem; letter-spacing: .04em; }
    .hero-arrow { width: 38px; height: 38px; }
    .hero-arrow--prev { left: 10px; }
    .hero-arrow--next { right: 10px; }
    .hero-dots { bottom: 20px; }

    .section-head { margin-bottom: 28px; }
    .section-head h2 { font-size: clamp(2rem, 10vw, 3rem); }
    .section-head p { font-size: .9rem; line-height: 1.65; }
    .grid-3,
    .grid-4 { grid-template-columns: 1fr; }
    .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .form-contact { border-radius: 18px; }
    .form-head { flex-wrap: wrap; gap: 12px; }
    .form-head-right { align-items: flex-start; }
    .form-grid { padding: 18px 16px; gap: 12px; }
    .form-section-title { grid-column: 1; margin-top: 10px; }
    .form-row-full { grid-column: 1; }
    .form-actions.cot-form-actions {
        grid-template-columns: 1fr !important;
        padding: 0 16px 14px !important;
    }
    .cot-action-btn { min-height: 58px; }
    .cot-form-note { padding-inline: 16px !important; }
    .cot-metrics { grid-template-columns: repeat(3, 1fr); }
    .cot-metric-val { font-size: 1.4rem; }
    .cot-metric-lbl { font-size: .62rem; }
    .cot-paso { padding: 11px 12px; }
    .cot-paso strong { font-size: .82rem; }
    .cot-paso small { font-size: .7rem; }

    .frh-store-hero { min-height: 560px; }
    .frh-store-hero__inner { padding-top: 118px; }
    .frh-store-hero__text h1 { font-size: clamp(3.2rem, 18vw, 5.5rem); }
    .frh-store-hero__text p { font-size: .92rem; }
    .frh-store-hero__ctas { display: grid; grid-template-columns: 1fr; }
    .frh-store-hero__ctas > * { width: 100%; justify-content: center; }
    .frh-store-hero__badge { display: none; }
    .frh-store-wa-banner__inner { align-items: flex-start; gap: 16px; }
    .frh-store-wa-banner__btn { width: 100%; justify-content: center; }
    .frh-store-filters__inner { align-items: stretch; }
    .frh-store-search-wrap { width: 100%; }

    #cart-items .cart-item {
        display: grid !important;
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 12px !important;
        padding: 13px !important;
    }
    #cart-items .cart-item > div:first-child { width: 68px !important; height: 58px !important; }
    #cart-items .cart-item > div:nth-child(2) { min-width: 0; }
    #cart-items .cart-item button[onclick^="eliminarItem"] { margin-left: 0 !important; }
    #cart-resumen { padding: 18px !important; }

    .footer-grid { grid-template-columns: 1fr !important; }
    .footer-bottom-wrapper { flex-direction: column; gap: 12px; text-align: center; }
}

@media (max-width: 420px) {
    .video-grid { grid-template-columns: 1fr; }
    .hero-stats { grid-template-columns: 1fr; gap: 10px; }
    .hero-stats > div { display: grid; grid-template-columns: 64px 1fr; align-items: center; }
    .hero-stats strong { font-size: 1.5rem; }
    .cot-metrics { gap: 5px; }
    .cot-metric-sep { display: none; }
    .cot-metric-val { font-size: 1.25rem; }
    .cot-metric-lbl { font-size: .57rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}