/* Infinity Fashion Boutique | capa móvil agéntica 20260705m2
   Inspirada en la lógica del ZIP de referencia: navegación accesible, sin desbordes,
   efectos visibles pero estables en pantallas táctiles. */

html, body {
  max-width: 100%;
  overflow-x: clip !important;
}
body { min-width: 320px; }

.float-wa {
  position: fixed !important;
  right: 18px !important;
  left: auto !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  z-index: 120 !important;
  transform: none !important;
}
.float-wa .wa-icon {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
}
.float-wa .wa-icon::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2.2px solid currentColor;
  border-radius: 50%;
}
.float-wa .wa-icon::after {
  content: "";
  position: absolute;
  left: 6px;
  bottom: 3px;
  width: 9px;
  height: 9px;
  border-left: 2.2px solid currentColor;
  border-bottom: 2.2px solid currentColor;
  transform: rotate(-28deg);
  border-bottom-left-radius: 3px;
}

.brand-link strong,
.brand-word,
.footer-title em {
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
}

@media (max-width: 980px), (hover: none), (pointer: coarse) {
  :root { --mobile-menu-top: calc(14px + env(safe-area-inset-top)); }
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
  }
  body {
    touch-action: pan-y pinch-zoom;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  body.nav-open {
    overflow: hidden !important;
    touch-action: none !important;
  }
  main, section, header, footer, .hero, .section, .container {
    max-width: 100% !important;
  }
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    min-height: 76px !important;
    contain: none !important;
    overflow: visible !important;
    background: rgba(255, 248, 244, .97) !important;
  }
  .header-inner {
    min-height: 76px !important;
    grid-template-columns: minmax(0, 1fr) 54px !important;
    padding-inline: clamp(14px, 4.5vw, 20px) !important;
  }
  .brand-link {
    max-width: calc(100vw - 96px) !important;
    gap: 9px !important;
  }
  .brand-link img {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
  }
  .brand-link strong {
    font-size: clamp(1.3rem, 5.4vw, 1.65rem) !important;
    line-height: .94 !important;
    white-space: nowrap !important;
  }
  .brand-link small {
    font-size: clamp(.55rem, 2.25vw, .68rem) !important;
    letter-spacing: .09em !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Botón de menú accesible: permanece a mano al desplazarse, pero sin invadir la lectura. */
  .nav-toggle {
    position: fixed !important;
    top: var(--mobile-menu-top) !important;
    right: clamp(14px, 4.5vw, 20px) !important;
    z-index: 130 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 18px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    gap: 0 !important;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(141,29,79,.16) !important;
    box-shadow: 0 12px 30px rgba(62,34,48,.12) !important;
    transform: translateZ(0) !important;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease !important;
  }
  .nav-toggle.is-docked {
    top: calc(10px + env(safe-area-inset-top)) !important;
    transform: scale(.94) !important;
    box-shadow: 0 14px 36px rgba(62,34,48,.17) !important;
  }
  .nav-toggle span:not(.sr-only) {
    width: 22px !important;
    height: 2.5px !important;
    margin: 2.8px 0 !important;
    border-radius: 999px !important;
    background: var(--brand-rose, #8d1d4f) !important;
    display: block !important;
    transition: transform .22s ease, opacity .18s ease !important;
  }
  .nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(2) { transform: translateY(8px) rotate(45deg) !important; }
  .nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(3) { opacity: 0 !important; }
  .nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(4) { transform: translateY(-8px) rotate(-45deg) !important; }

  body.nav-open .site-header::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 110 !important;
    background: rgba(45, 29, 39, .22) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .main-nav {
    position: fixed !important;
    z-index: 125 !important;
    top: calc(var(--mobile-menu-top) + 58px) !important;
    right: clamp(12px, 4vw, 18px) !important;
    left: auto !important;
    width: min(332px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 12px !important;
    max-height: calc(100dvh - 92px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: linear-gradient(180deg, rgba(255,255,255,.985), rgba(255,248,244,.975)) !important;
    border: 1px solid rgba(141,29,79,.13) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 70px rgba(45,29,39,.22) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(.985) !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
    white-space: normal !important;
  }
  .main-nav.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }
  .main-nav::before,
  .main-nav a::before,
  .main-nav a::after,
  .main-nav .nav-cta::before {
    content: none !important;
    display: none !important;
  }
  .main-nav a {
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 0 15px !important;
    border-radius: 16px !important;
    font-size: .98rem !important;
    font-weight: 830 !important;
    line-height: 1.12 !important;
    color: #5e4352 !important;
    text-align: left !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transform: none !important;
    white-space: normal !important;
  }
  .main-nav a[aria-current="page"] {
    background: #fff !important;
    color: var(--brand-rose, #8d1d4f) !important;
    border-color: rgba(141,29,79,.12) !important;
    box-shadow: 0 10px 24px rgba(141,29,79,.07) !important;
  }
  .main-nav .nav-cta {
    justify-content: center !important;
    margin-top: 6px !important;
    color: #fff !important;
    background: var(--brand-teal, #1498a3) !important;
    border-radius: 18px !important;
    min-height: 50px !important;
    box-shadow: 0 14px 30px rgba(20,152,163,.25) !important;
  }

  .hero, .category-hero, .dresses-hero-final, .signature-section {
    overflow: hidden !important;
  }
  .container {
    width: 100% !important;
    padding-inline: clamp(18px, 5vw, 22px) !important;
    margin-inline: auto !important;
  }
  .hero-grid, .category-hero-grid, .dresses-hero-layout, .signature-grid,
  .split-grid, .steps-grid, .steps-grid.long, .route-steps, .detail-grid,
  .detail-grid.three, .contact-grid, .footer-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  h1, h2, h3, p, .lead, .eyebrow, .button, .text-link, .brand-link small {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
  }
  .hero-home h1 {
    font-size: clamp(2.35rem, 12.2vw, 3.45rem) !important;
    line-height: 1.01 !important;
    letter-spacing: -.04em !important;
    text-wrap: balance !important;
  }
  .category-hero h1, .dresses-title-panel h1 {
    font-size: clamp(2.05rem, 10.4vw, 3.15rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance !important;
  }
  .lead { font-size: clamp(1rem, 4.1vw, 1.16rem) !important; line-height: 1.58 !important; }

  .hero-signature, .style-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .hero-signature span, .style-chips span {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    font-size: .74rem !important;
    line-height: 1.15 !important;
    padding: 8px 10px !important;
  }

  .signature-card {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 22px !important;
    border-radius: 28px !important;
  }
  .signature-card h2 {
    font-size: clamp(1.45rem, 7.4vw, 2.05rem) !important;
    line-height: 1.07 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
  .signature-card p { font-size: .98rem !important; line-height: 1.52 !important; }
  .mini-rail {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding: 2px 0 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }
  .mini-rail a {
    flex: 0 0 auto !important;
    max-width: 78vw !important;
    white-space: nowrap !important;
    font-size: .92rem !important;
    padding: 11px 15px !important;
  }
  .signature-row, .steps-grid article, .feature-panel, .detail-card, .note-card, .contact-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    transform: none !important;
  }
  .signature-row {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .signature-row h3 { font-size: clamp(1.18rem, 5.6vw, 1.55rem) !important; }
  .signature-row p { font-size: .96rem !important; line-height: 1.48 !important; }

  .card-grid, .inspiration-board, .atelier-filter {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .category-card, .story-card {
    flex: 0 0 min(84vw, 328px) !important;
    max-width: min(84vw, 328px) !important;
    transform: none !important;
  }
  .story-card h3, .category-card h3 {
    font-size: clamp(1.22rem, 6.3vw, 1.72rem) !important;
    line-height: 1.08 !important;
  }

  .float-wa {
    position: fixed !important;
    left: auto !important;
    right: calc(14px + env(safe-area-inset-right)) !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    z-index: 128 !important;
  }
  .float-wa .wa-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }
  .site-footer { padding-bottom: 86px !important; }
}

@media (max-width: 390px) {
  .brand-link img { width: 48px !important; height: 48px !important; }
  .brand-link strong { font-size: 1.38rem !important; }
  .brand-link small { font-size: .54rem !important; letter-spacing: .075em !important; }
  .hero-home h1 { font-size: clamp(2.16rem, 11.5vw, 3.05rem) !important; }
  .category-hero h1, .dresses-title-panel h1 { font-size: clamp(1.9rem, 9.7vw, 2.82rem) !important; }
  .nav-toggle { width: 46px !important; height: 46px !important; min-width:46px!important; min-height:46px!important; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle, .main-nav, .float-wa, .story-card, .category-card, .signature-row { transition: none !important; animation: none !important; }
}