/* ============================================================
   TEMA "ios" — sensación de app nativa de iPhone, minimalismo
   premium. Se activa con config.tema="ios" (engine.js habilita
   este <link> y marca <html data-tema="ios">).

   Convención de esta hoja: TODO selector arranca con [data-tema="ios"]
   para no poder filtrar nunca al tema "clasico" (styles.css no se
   toca). Nunca se usa la forma corta `padding`/`margin` sobre
   elementos que styles.css ya reparte en varios breakpoints (ej.
   <main>, por el carrito lateral de escritorio) — se tocan los
   lados puntuales para no pisar esas reglas.

   Solo se animan transform/opacity/box-shadow/background (nunca
   propiedades que disparan reflow como width/height/top/left) y la
   regla global de prefers-reduced-motion de styles.css (`* {
   transition:none!important; animation:none!important }`) ya cubre
   también estas transiciones, sin nada extra que hacer acá.
   ============================================================ */

[data-tema="ios"] {
  --fondo: #ffffff;
  --superficie: #ffffff;
  --superficie2: #f5f5f7;
  --borde: #e5e5ea;
  --texto: #1c1c1e;
  --texto-suave: #8a8a8e;
  --font-display: 'Inter', -apple-system, 'SF Pro Display', 'Segoe UI', sans-serif;
  --font-ui: 'Inter', -apple-system, 'SF Pro Text', 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, 'SF Pro Text', 'Segoe UI', sans-serif;
  --ios-radio: 24px;
  --ios-radio-chico: 16px;
  --ios-sombra: 0 10px 30px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --ios-sombra-flotante: 0 14px 34px rgba(0,0,0,.16);
  --ios-blur: saturate(180%) blur(20px);
}
[data-tema="ios"] body { -webkit-font-smoothing: antialiased; letter-spacing: -.01em; }

/* Banner de instalación: tarjeta flotante en vez de barra pegada al borde */
[data-tema="ios"] .install-banner { margin: 12px; border-radius: var(--ios-radio-chico); box-shadow: var(--ios-sombra); border-bottom: none; }
[data-tema="ios"] .install-btn { border-radius: 999px; font-weight: 600; text-transform: none; letter-spacing: 0; }

/* Header: más aire, sin línea divisoria (mantiene el look flat del tema:
   la sombra sutil de styles.css se anula acá a propósito), tipografía de sistema */
[data-tema="ios"] .header { padding: 44px 20px 24px; border-bottom: none; box-shadow: none; }
[data-tema="ios"] .header-logo-img { box-shadow: var(--ios-sombra); }
[data-tema="ios"] .header-nombre { font-family: var(--font-display); font-weight: 800; font-size: 39px; letter-spacing: -.02em; }
[data-tema="ios"] .header-sub { font-weight: 600; letter-spacing: .2px; text-transform: none; font-size: 14px; }

/* Banner principal a pantalla completa (hero edge-to-edge) */
[data-tema="ios"] .banners-carousel { position: relative; max-width: none; margin: 4px 0 0; padding: 0; }
[data-tema="ios"] .banner-track { border-radius: 0; }
[data-tema="ios"] .banner-slide { aspect-ratio: auto; height: clamp(300px, 58vh, 560px); }
[data-tema="ios"] .banner-info { padding: 28px 24px; }
[data-tema="ios"] .banner-titulo { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
[data-tema="ios"] .banner-texto { font-size: 14px; }
[data-tema="ios"] .banner-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; padding: 0; }
[data-tema="ios"] .banner-dot { background: rgba(255,255,255,.5); }
[data-tema="ios"] .banner-dot.activo { background: #fff; }

/* Buscador flotante con blur (glassmorphism), pegado arriba */
[data-tema="ios"] .buscador-wrap { position: sticky; top: 0; z-index: 25; max-width: none; padding: 12px 16px; background: color-mix(in srgb, var(--fondo) 70%, transparent); backdrop-filter: var(--ios-blur); -webkit-backdrop-filter: var(--ios-blur); }
[data-tema="ios"] .buscador-input { background: var(--superficie2); border: none; border-radius: 999px; padding: 12px 18px; font-size: 15px; box-shadow: inset 0 0 0 1px var(--borde); }
[data-tema="ios"] .buscador-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primario); }

/* Categorías como iconos circulares, barra con blur debajo del buscador */
[data-tema="ios"] .nav-cats { top: 64px; gap: 18px; padding: 10px 16px 14px; background: color-mix(in srgb, var(--fondo) 75%, transparent); backdrop-filter: var(--ios-blur); -webkit-backdrop-filter: var(--ios-blur); border-bottom: none; }
[data-tema="ios"] .nav-cat-ios { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; background: none; border: none; padding: 0; cursor: pointer; }
[data-tema="ios"] .nav-cat-ios-circulo {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--superficie2); color: var(--texto); font-family: var(--font-ui); font-weight: 700; font-size: 18px;
  box-shadow: var(--ios-sombra); transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
[data-tema="ios"] .nav-cat-ios.activa .nav-cat-ios-circulo, [data-tema="ios"] .nav-cat-ios:hover .nav-cat-ios-circulo { background: var(--primario); color: #fff; transform: translateY(-2px); }
[data-tema="ios"] .nav-cat-ios-label { font-size: 11px; font-weight: 600; color: var(--texto-suave); max-width: 62px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-tema="ios"] .nav-cat-ios.activa .nav-cat-ios-label { color: var(--texto); }

/* Catálogo: carruseles horizontales con snap por categoría (no grilla fija) */
[data-tema="ios"] main { max-width: none; padding-top: 4px; padding-bottom: 40px; padding-left: 0; padding-right: 0; }
@media (min-width: 900px) { [data-tema="ios"] main { padding-right: 360px; } }
[data-tema="ios"] .categoria { padding-top: 30px; scroll-margin-top: 128px; }
[data-tema="ios"] .categoria-titulo { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.02em; padding: 0 20px; margin-bottom: 16px; }
[data-tema="ios"] .grilla { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x proximity; gap: 16px; padding: 2px 20px 10px; scrollbar-width: none; }
[data-tema="ios"] .grilla::-webkit-scrollbar { display: none; }

/* Tarjeta de producto: imagen protagonista, precio destacado, etiqueta */
[data-tema="ios"] .card { flex: 0 0 72%; scroll-snap-align: start; border: none; border-radius: var(--ios-radio); box-shadow: var(--ios-sombra); transition: transform .2s ease, box-shadow .2s ease; }
@media (min-width: 640px) { [data-tema="ios"] .card { flex-basis: 300px; } }
[data-tema="ios"] .card:hover { border-color: transparent; box-shadow: var(--ios-sombra-flotante); transform: translateY(-3px); }
[data-tema="ios"] .card-img-wrap { position: relative; }
[data-tema="ios"] .card-img { height: 220px; border-radius: var(--ios-radio) var(--ios-radio) 0 0; }
[data-tema="ios"] .card-img-placeholder { height: 220px; font-size: 64px; border-radius: var(--ios-radio) var(--ios-radio) 0 0; background: linear-gradient(160deg, var(--superficie2), color-mix(in srgb, var(--primario) 10%, var(--superficie2))); }
[data-tema="ios"] .card-etiqueta { position: absolute; top: 12px; left: 12px; z-index: 1; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .2px; padding: 5px 10px; border-radius: 999px; color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
[data-tema="ios"] .card-etiqueta-nuevo { background: #0A84FF; }
[data-tema="ios"] .card-etiqueta-oferta { background: #FF3B30; }
[data-tema="ios"] .card-etiqueta-generica { background: var(--primario); }
[data-tema="ios"] .card-body { padding: 16px; }
[data-tema="ios"] .card-nombre { font-family: var(--font-ui); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
[data-tema="ios"] .card-desc { font-size: 13px; }
[data-tema="ios"] .card-precio { font-family: var(--font-ui); font-weight: 800; font-size: 20px; color: var(--texto); }
[data-tema="ios"] .btn-agregar { font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: 0; text-transform: none; border-radius: 999px; padding: 10px 18px; transition: transform .15s ease; }
[data-tema="ios"] .btn-agregar:active { transform: scale(.92); }

/* Vista ampliada de imagen */
[data-tema="ios"] .lightbox { background: rgba(0,0,0,.92); backdrop-filter: blur(6px); }
[data-tema="ios"] .lightbox-img { border-radius: var(--ios-radio); }

/* Skeleton a tono con la tarjeta ios */
[data-tema="ios"] .skeleton-card { border: none; border-radius: var(--ios-radio); box-shadow: var(--ios-sombra); }
[data-tema="ios"] .skeleton-img { height: 220px; border-radius: var(--ios-radio) var(--ios-radio) 0 0; }

/* Carrito flotante, modal/sidebar, avisos y checkout: mismo lenguaje redondeado */
[data-tema="ios"] .cart-float { border-radius: 999px; box-shadow: var(--ios-sombra-flotante); }
[data-tema="ios"] .cart-modal, [data-tema="ios"] .aviso { background: rgba(0,0,0,.35); backdrop-filter: blur(4px); }
[data-tema="ios"] .cart-box { border-radius: var(--ios-radio) var(--ios-radio) 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.12); }
@media (min-width: 900px) { [data-tema="ios"] #cartSidebar .cart-box { border: none; border-radius: var(--ios-radio); box-shadow: var(--ios-sombra-flotante); } }
[data-tema="ios"] .cart-linea-qty button { border-radius: 999px; }
[data-tema="ios"] .btn-enviar { border-radius: 999px; font-weight: 700; text-transform: none; letter-spacing: 0; }
[data-tema="ios"] .aviso-box { border: none; border-radius: var(--ios-radio); box-shadow: var(--ios-sombra-flotante); }
[data-tema="ios"] .aviso-btn { border-radius: 999px; font-weight: 700; }
[data-tema="ios"] .checkout-campo input, [data-tema="ios"] .checkout-campo select, [data-tema="ios"] .checkout-campo textarea { border: none; background: var(--superficie2); border-radius: 14px; }
[data-tema="ios"] .checkout-campo input:focus, [data-tema="ios"] .checkout-campo select:focus, [data-tema="ios"] .checkout-campo textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--primario); }

/* "¿Por qué elegirnos?" */
[data-tema="ios"] .porque-elegirnos-titulo { font-weight: 800; letter-spacing: -.02em; }
[data-tema="ios"] .porque-elegirnos-lista li { border: none; border-radius: var(--ios-radio-chico); box-shadow: var(--ios-sombra); }

/* Toast y footer */
[data-tema="ios"] .toast { border: none; box-shadow: var(--ios-sombra-flotante); border-radius: 999px; }
[data-tema="ios"] .footer { border-top: none; }
[data-tema="ios"] .footer-nombre { font-family: var(--font-display); font-weight: 800; }
[data-tema="ios"] .footer-ig-qr { border-radius: var(--ios-radio-chico); box-shadow: var(--ios-sombra); padding: 12px; }

[data-tema="ios"] .oferta-dia { padding: 12px 16px 0; }
[data-tema="ios"] .oferta-dia-caja { border-radius: var(--ios-radio, 24px); }