/* ══════════════════════════════════════════════════════════════
   ILLURALENS · Capa responsive global — mobile-first 320px+
   Arquitectura: breakpoints por comportamiento, no por modelo.
   ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;overflow-x:hidden;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

/* Imágenes y media: jamás desbordan */
img,video,svg,canvas{max-width:100%;height:auto}

/* Tablas: scroll propio, nunca rompen el layout */
.table-wrapper,.tblwrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Barras inferiores y flotantes respetan el notch/Dynamic Island */
.mobile-bottom-bar,.bottom-nav,nav[class*="bottom"]{padding-bottom:max(16px,env(safe-area-inset-bottom))}

/* Targets táctiles: en pantallas touch los controles crecen a 44px */
@media (hover:none) and (pointer:coarse){
  a[class*="btn"],button[type="submit"],.btn,[role="button"]{min-height:44px}
  /* sin efectos hover fantasma en touch */
  a:hover>.swap-wrap .swap-main,a:hover>.swap-wrap .swap-alt{transform:none;opacity:revert-layer}
}

/* CTA principal a ancho completo en smartphones */
@media (max-width:480px){
  .btn--full-sm,a[class*="btn--full"]{width:100%;display:flex;align-items:center;justify-content:center}
}

/* Smartphone landscape: héroes altos no se comen la pantalla */
@media (max-height:500px) and (orientation:landscape){
  section[class*="hero"],.hero{min-height:auto !important;height:auto !important}
}

/* Monitores grandes: el contenido no se estira infinito */
@media (min-width:1920px){
  main,.max-w-container-max,[class*="max-w-\[1280px\]"]{max-width:1440px !important;margin-inline:auto}
}

/* Escala de espacios común */
:root{--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;
  --space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:96px}

/* Foco visible para navegación por teclado */
:focus-visible{outline:2px solid #8B5E3C;outline-offset:2px;border-radius:2px}

/* Targets de 44px también en desktop (CTA reales) */
a[class*="btn"],button[type="submit"],.btn,.il-add,[role="button"]{min-height:44px}
/* Tokens de sombra únicos */
:root{--shadow:0 2px 8px rgba(18,16,14,.05);--shadow-hover:0 16px 40px rgba(18,16,14,.12)}

/* ── Fix overflow horizontal (body en flex-col): en móvil los hijos estructurales no deben
   crecer al ancho de su contenido; así los carruseles/subnav con overflow-x:auto scrollean
   adentro y todas las categorías siguen accesibles. !important para ganar a .max-w-container-max. ── */
@media (max-width: 768px){
  body > header, body > nav, body > main, body > footer, body > section, body > div{
    min-width: 0 !important; max-width: 100% !important;
  }
}