/* ============================
   RF CDE SHOP - Estilos Principales
   Design System claro y elegante — colores de marca (#0088CC / #FF6600)
   sobre fondo blanco, sin efectos neón. Única fuente de verdad para
   colores/tipografía/espaciado; theme.css/premium.css/impact.css solo
   aportan piezas puntuales (mockup de apps, franja de confianza).
   ============================ */

:root {
  --primary: #0088CC;
  --primary-dark: #006B9E;
  --orange: #FF6600;
  --orange-dark: #cc5200;
  --dark: #16202B;
  --gray: #64748B;
  --light: #F7F9FB;
  --border: #E2E8F0;
  --white: #ffffff;
  --success: #16A34A;
  --error: #DC2626;
  --shadow: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-lg: 0 8px 24px rgba(16,24,40,0.08), 0 2px 6px rgba(16,24,40,0.05);
  /* Radio con jerarquía en vez de un único valor repetido en todo:
     los controles chicos (botones, badges, chips) son cápsula completa
     — refuerza el motivo "perilla/toggle de instrumento" — y las
     superficies de contenido (tarjetas, paneles, inputs) tienen una
     esquina más recta y técnica que antes. */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  /* Tokens base del design system */
  --bg: #ffffff;
  --bg-2: #F7F9FB;
  --surface: #ffffff;
  --surface-2: #F7F9FB;
  --text: #16202B;
  --text-2: #64748B;
  /* Sistema tipográfico de 3 roles (reemplaza a Inter-para-todo):
     titulares condensados con caracter de instrumento, cuerpo legible
     con pedigrí técnico real, monoespaciada real para precios/códigos
     (antes dependía del stack del sistema operativo del visitante). */
  --font-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); color:var(--text); background:var(--bg); line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
button { cursor:pointer; border:none; outline:none; font-family:inherit; }
ul { list-style:none; }
h1, h2, h3, h4, h5, h6 { font-family:var(--font-display); }

/* ---- VIBE RF: barras de señal animadas (motivo reutilizable) ----
   Un guiño real al rubro (audio/RF) sin caer en neon ni gamer: solo el
   azul de marca, movimiento sutil, tamaño chico. Se usa junto a los
   "eyebrow" de las secciones y en el hero. Respeta prefers-reduced-motion. */
.signal-bars { display:inline-flex; align-items:flex-end; gap:2px; height:12px; flex-shrink:0; }
.signal-bars span { width:3px; background:var(--primary); border-radius:1px; animation:signalPulse 1.1s ease-in-out infinite; transform-origin:bottom; }
.signal-bars span:nth-child(1) { height:35%; animation-delay:0s; }
.signal-bars span:nth-child(2) { height:70%; animation-delay:.15s; }
.signal-bars span:nth-child(3) { height:100%; animation-delay:.3s; }
.signal-bars span:nth-child(4) { height:55%; animation-delay:.45s; }
@keyframes signalPulse { 0%,100% { transform:scaleY(.35); opacity:.7; } 50% { transform:scaleY(1); opacity:1; } }
@media(prefers-reduced-motion:reduce) { .signal-bars span { animation:none; transform:scaleY(.8); } }

.sol-eyebrow { display:inline-flex !important; align-items:center; gap:.5rem; }
.sol-eyebrow .signal-bars { margin-bottom:1px; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Accesibilidad: oculto hasta que se enfoca con teclado (Tab), deja
   saltar directo al contenido sin pasar por topbar/header/nav. */
.skip-link { position:absolute; top:-100px; left:1rem; z-index:2000; background:var(--primary); color:#fff; padding:.7rem 1.2rem; border-radius:var(--radius-pill); font-weight:700; font-size:.85rem; transition:top .15s; }
.skip-link:focus { top:1rem; }

/* Foco visible accesible */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.container { max-width:1280px; margin:0 auto; padding:0 1rem; }
/* El desktop quedaba bien como estaba (confirmado por el cliente) — el
   achique de espacio es especificamente para mobile, ver el override
   de @media(max-width:768px) mas abajo. */
.section { padding:5.5rem 0; }
/* Alternancia de fondo explícita por sección (no automática) — así
   nunca pisa por accidente el fondo propio de una sección puntual
   como .apps-section. */
.blog, .contact { background:var(--bg-2); }
/* El catalogo es el sector que mas factura — necesita un fondo propio
   (no el mismo gris plano que blog/contacto) y una franja de acento
   arriba que lo marque como una zona distinta apenas se llega scrolleando. */
.products { background:linear-gradient(180deg, var(--bg-2) 0%, #eef6fb 100%); position:relative; }
.products::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--primary) 0%, var(--orange) 100%); }
.section-header { text-align:center; margin-bottom:3.25rem; max-width:640px; margin-left:auto; margin-right:auto; }
.section-header h2 { font-size:2rem; font-weight:800; color:var(--text); margin-bottom:.6rem; letter-spacing:-.02em; }
.section-header p { color:var(--text-2); font-size:1.08rem; line-height:1.55; }

/* -------- TARJETA DE ENCABEZADO DE SECCION --------
   Generalizada del banner de categoria del catalogo (.cat-banner en
   products.css, misma estructura/clases, movido aca porque ahora lo
   usan varias secciones, no solo productos): tarjeta compacta con
   icono en vez del .section-header centrado y grande — pedido directo,
   los titulos ocupaban demasiado lugar y quedaba deslucido. No se
   toca .section-header (FAQ minimalista y el reveal-on-scroll de
   fx.js/impact.js lo siguen usando via selector propio, ver abajo). */
.section-banner {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1.8rem 2.2rem; margin-bottom:2.2rem; overflow:hidden;
  box-shadow:0 8px 24px rgba(16,24,40,.06);
}
.section-banner-text h2 { font-size:1.8rem; font-weight:800; color:var(--text); margin:.3rem 0 .5rem; letter-spacing:-.01em; }
.section-banner-text p { font-size:.92rem; color:var(--text-2); max-width:560px; }
.section-banner-icon {
  width:84px; height:84px; flex-shrink:0; border-radius:50%;
  background:linear-gradient(135deg, rgba(0,136,204,.14), rgba(0,136,204,.05));
  color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:2.2rem;
}
/* Variante para secciones de fondo oscuro (ej. #empresas) */
.section-banner.dark { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); box-shadow:none; }
.section-banner.dark .section-banner-text h2 { color:#fff; }
.section-banner.dark .section-banner-text p { color:rgba(255,255,255,.7); }
.section-banner.dark .section-banner-icon { background:linear-gradient(135deg, rgba(127,208,255,.18), rgba(127,208,255,.06)); color:#7fd0ff; }

/* Textura de grilla de instrumento (misma receta que el panel de
   Herramientas, .tool-instrument en academy.css) reutilizada en el
   resto de las superficies oscuras del sitio — antes vivía aislada
   en una sola sección; ahora es parte del lenguaje visual general. */
#empresas { position:relative; isolation:isolate; }
#empresas::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/26px 26px;
}
#empresas > .container { position:relative; z-index:1; }
@media(max-width:768px) {
  .section-banner { flex-direction:column; text-align:center; padding:1rem; margin-bottom:1.2rem; gap:.6rem; }
  .section-banner-icon { width:42px; height:42px; font-size:1.15rem; }
  .section-banner-text h2 { font-size:1.15rem; margin:.15rem 0 .25rem; }
  .section-banner-text p { font-size:.8rem; }
}

/* -------- TOP BAR -------- */
.topbar { background:var(--dark); color:#c7cfd8; font-size:.8rem; padding:.45rem 0; }
.topbar .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.topbar a { color:#dbe1e8; transition:.2s; }
.topbar a:hover { color:#fff; }
.topbar i { margin-right:.3rem; color:var(--primary); }
.sep { margin:0 .6rem; opacity:.4; }
.topbar-right { display:flex; align-items:center; gap:.2rem; flex-wrap:wrap; }

/* -------- HEADER -------- */
.header { background:#fff; box-shadow:var(--shadow); position:sticky; top:0; z-index:1000; padding:.4rem 0; border-bottom:1px solid var(--border); }
.header-inner { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; min-height:96px; }
.logo a { display:flex; align-items:center; gap:.5rem; }
.logo img { height:78px; width:auto; max-width:240px; object-fit:contain; }
.logo-text { font-size:2rem; font-weight:800; color:var(--dark); letter-spacing:-1px; }
.logo-text span { color:var(--primary); }
.search-bar { flex:1; min-width:200px; position:relative; display:flex; }
.search-bar input { width:100%; padding:.7rem 1rem; border:1.5px solid var(--border); border-right:none; border-radius:var(--radius) 0 0 var(--radius); font-size:.95rem; outline:none; transition:.2s; background:#fff; color:var(--text); }
.search-bar input::placeholder { color:var(--text-2); }
.search-bar input:focus { border-color:var(--primary); }
.search-bar button { padding:.7rem 1.2rem; background:var(--primary); color:#fff; border-radius:0 var(--radius) var(--radius) 0; font-size:1rem; transition:.2s; font-weight:600; }
.search-bar button:hover { background:var(--primary-dark); }
.search-results { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid var(--border); border-radius:0 0 var(--radius) var(--radius); box-shadow:var(--shadow-lg); z-index:100; max-height:350px; overflow-y:auto; display:none; }
.search-results.active { display:block; }
.search-result-item { padding:.7rem 1rem; border-bottom:1px solid var(--border); cursor:pointer; display:flex; gap:.8rem; align-items:center; }
.search-result-item:hover { background:var(--bg-2); }
.search-result-item .sr-name { font-weight:600; font-size:.9rem; color:var(--text); }
.search-result-item .sr-price { color:var(--orange); font-weight:700; font-size:.9rem; margin-left:auto; }
.sr-group-label { padding:.5rem 1rem .2rem; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2); }
.search-result-item.sr-cat { padding:.55rem 1rem; }
.sr-see-all { padding:.6rem 1rem; text-align:center; font-size:.8rem; font-weight:600; color:var(--primary-dark); cursor:pointer; border-bottom:1px solid var(--border); }
.sr-see-all:hover { background:var(--bg-2); }

.header-actions { display:flex; align-items:center; gap:.6rem; }
.cart-btn, .wish-btn { position:relative; background:#fff; border:1.5px solid var(--border); color:var(--text); width:42px; height:42px; border-radius:var(--radius-pill); font-size:1.1rem; display:flex; align-items:center; justify-content:center; transition:.2s; }
.cart-btn:hover, .wish-btn:hover { border-color:var(--primary); color:var(--primary); }
.cart-count, .wish-count { position:absolute; top:-6px; right:-6px; background:var(--orange); color:#fff; font-size:.65rem; font-weight:700; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.quote-btn { background:var(--orange); color:#fff; padding:.6rem 1rem; border-radius:var(--radius-pill); font-weight:600; font-size:.85rem; display:flex; align-items:center; gap:.4rem; transition:.2s; }
.quote-btn:hover { background:var(--orange-dark); }
/* Antes era un icono suelto sin fondo, al lado de dos botones con borde
   (favoritos/carrito) — se veia desparejo. Mismo tratamiento de boton
   que .cart-btn/.wish-btn para que las 3 acciones lean como un solo
   grupo prolijo. */
.menu-toggle { display:none; align-items:center; justify-content:center; background:#fff; border:1.5px solid var(--border); color:var(--text); width:42px; height:42px; border-radius:var(--radius-pill); font-size:1.15rem; transition:.2s; }
.menu-toggle:hover, .menu-toggle:active { border-color:var(--primary); color:var(--primary); }
.nav-mobile-only { display:none; }
.nav-mobile-quote { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; background:var(--orange); color:#fff; font-weight:700; font-size:.9rem; padding:.85rem 1rem; }

/* -------- HEADER COMPACTO AL HACER SCROLL --------
   La clase .scrolled ya la togglea fx.js initStickyHeader() (scrollY>60),
   esto es solo el CSS que la consume — antes no tenia ningun efecto. */
.header { transition:padding .25s ease; }
.logo img { transition:height .25s ease; }
.header.scrolled { padding:.2rem 0; }
.header.scrolled .header-inner { min-height:60px; }
.header.scrolled .logo img { height:48px; }
.header.scrolled .quote-btn { padding:.4rem .7rem; font-size:.8rem; }
.header.scrolled .cart-btn, .header.scrolled .wish-btn, .header.scrolled .account-btn { width:36px; height:36px; }
.header.scrolled .search-bar input { padding:.45rem .8rem; }
.header.scrolled .search-bar button { padding:.45rem .9rem; }
/* .navbar esta calibrado a mano contra la altura normal del header (73px) —
   con el header compacto hay que recalcular ese offset en el mismo momento,
   sin JS extra, via selector de hermano. Valor medido con getBoundingClientRect
   contra la altura real del header compacto en runtime (no una estimacion):
   con .scrolled el header mide ~74px, igual que el valor normal de .navbar
   por coincidencia — se deja explicito igual para que quede claro que esta
   calibrado, no que "no hacia falta cambiarlo". */
.header.scrolled ~ #navbar { top:74px; }

/* -------- NAVBAR -------- */
.navbar { background:var(--dark); position:sticky; top:73px; z-index:999; }
.nav-menu { display:flex; align-items:center; flex-wrap:wrap; }
.nav-menu li { position:relative; }
.nav-menu a { display:block; padding:.75rem 1rem; color:#c7cfd8; font-size:.85rem; font-weight:500; transition:.2s; white-space:nowrap; }
.nav-menu a:hover { color:#fff; }
@media(min-width:769px) { .nav-menu li.has-dropdown:hover .dropdown { display:block; } }

/* min-width bajado de 700 a 620px (bug real: "en notebook se encima
   demasiado" — en una ventana ~1000-1035px el dropdown de Servicios,
   el mas a la derecha del menu, se salía por el borde derecho de la
   pantalla). 620px sigue siendo comodo para la grilla de 3 columnas
   de Soluciones y le sobra a la de 2 columnas de Servicios. */
.dropdown { display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid var(--border); border-radius:0 0 var(--radius) var(--radius); box-shadow:var(--shadow-lg); z-index:100; min-width:620px; padding:1.5rem; }
.dropdown-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.dropdown-col h4 { font-size:.8rem; font-weight:700; color:var(--primary-dark); text-transform:uppercase; margin-bottom:.5rem; letter-spacing:.5px; }
.dropdown-col a { display:block; padding:.25rem 0; font-size:.85rem; color:var(--text); transition:.15s; }
.dropdown-col a:hover { color:var(--primary); padding-left:.3rem; }

/* -------- HERO -------- */
/* El hero mantiene una foto/gradiente oscuro de fondo (es una banda con
   imagen, común incluso en sitios claros) para que el texto blanco tenga
   contraste — el resto del sitio es 100% claro. */
.hero { position:relative; overflow:hidden; }
.hero-slides { position:relative; }
/* El tamaño real del hero (alto, padding, clamp del h1) lo fija
   impact.css con !important — es la capa de overrides de tamaño del
   sitio, ver el comentario al inicio de ese archivo. Estos valores acá
   son el fallback pre-impact.css, no se ven en la practica. */
.hero-slide { display:none; padding:5rem 0; min-height:480px; position:relative; overflow:hidden; }
.hero-slide.active { display:block; }
.hero-slide .container { display:flex; align-items:center; justify-content:space-between; gap:2rem; position:relative; z-index:2; }
.hero-slide-bg {
  position:absolute; top:0; left:0; right:0; bottom:0;
  width:100%; height:100%;
  z-index:0; overflow:hidden;
}
.hero-slide-bg img {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
.hero-slide-bg video {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
.hero-slide-bg-overlay {
  position:absolute; top:0; left:0; right:0; bottom:0;
  width:100%; height:100%;
  z-index:1;
  /* Textura de puntos muy sutil (grid tipo osciloscopio/RF) encima del
     oscurecido normal — le da textura tecnica al hero sin agregar
     colores ni brillo nuevo. */
  background:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0/26px 26px,
    rgba(10,16,26,.6);
}
.hero-content { max-width:600px; }
.hero-badge { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; padding:.4rem .9rem; border-radius:50px; font-size:.8rem; font-weight:600; display:inline-block; margin-bottom:1rem; }
.hero-badge i { margin-right:.4rem; color:var(--orange); }
.hero-content h1 { font-size:2.7rem; font-weight:700; color:#fff; line-height:1.2; margin-bottom:1rem; }
.hero-content .highlight { color:#5fc4ff; }
.hero-tag { display:inline-flex; align-items:center; gap:.6rem; background:rgba(95,196,255,.1); border:1px solid rgba(95,196,255,.25); color:#bfe6ff; font-size:.72rem; font-weight:700; letter-spacing:.08em; padding:.4rem .9rem; border-radius:50px; margin-bottom:1.2rem; }
.hero-tag .signal-bars span { background:#5fc4ff; }
.hero-content p { color:rgba(255,255,255,.8); font-size:1.05rem; margin-bottom:2rem; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-icon { font-size:8rem; color:rgba(255,255,255,.08); }
.hero-controls { position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:1rem; }
.hero-prev, .hero-next { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); color:#fff; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s; }
.hero-prev:hover, .hero-next:hover { background:rgba(255,255,255,.3); }
.hero-dots { display:flex; gap:.5rem; }
.dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); cursor:pointer; transition:.2s; }
.dot.active { background:#fff; width:20px; border-radius:5px; }


/* -------- BUTTONS -------- */
.btn-primary { background:var(--primary); color:#fff; padding:.75rem 1.5rem; border-radius:var(--radius-pill); font-weight:600; font-size:.95rem; transition:.2s; display:inline-flex; align-items:center; gap:.5rem; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-secondary { background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.4); color:#fff; padding:.75rem 1.5rem; border-radius:var(--radius-pill); font-weight:600; transition:.2s; }
.btn-secondary:hover { background:rgba(255,255,255,.18); }
.btn-whatsapp { background:#25d366; color:#fff; padding:.75rem 1.5rem; border-radius:var(--radius-pill); font-weight:600; display:inline-flex; align-items:center; gap:.5rem; transition:.2s; }
.btn-whatsapp:hover { background:#1db954; }
.btn-whatsapp-lg { background:#25d366; color:#fff; padding:.8rem 1.5rem; border-radius:var(--radius-pill); font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; gap:.5rem; transition:.2s; width:100%; justify-content:center; }
.btn-whatsapp-lg:hover { background:#1db954; }
.btn-outline { border:1.5px solid var(--border); color:var(--text); padding:.75rem 1.5rem; border-radius:var(--radius-pill); font-weight:600; background:#fff; transition:.2s; display:inline-flex; align-items:center; gap:.5rem; width:100%; justify-content:center; }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.btn-outline-white { border:1.5px solid #fff; color:#fff; padding:.75rem 1.5rem; border-radius:var(--radius-pill); font-weight:600; background:transparent; transition:.2s; }
.btn-outline-white:hover { background:#fff; color:var(--dark); }

/* -------- FEATURES BAR -------- */
.features-bar { background:var(--bg-2); border-bottom:1px solid var(--border); padding:1.1rem 0; }
.features-grid { display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between; }
.feature-item { display:flex; align-items:center; gap:.8rem; }
.feature-item i { font-size:1.5rem; color:var(--primary); }
.feature-item strong { display:block; font-size:.9rem; font-weight:700; color:var(--text); }
.feature-item p { font-size:.8rem; color:var(--text-2); margin:0; }

/* -------- CATEGORIES -------- */
.cat-group-title { grid-column:1/-1; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-2); margin:1.75rem 0 .75rem; }
.cat-group-title:first-child { margin-top:0; }
/* "Explorá por categoría" ahora reutiliza el mismo patrón compacto de
   fila con chips que "Qué necesitás" (.orient-*, ver mas abajo) — el
   catálogo de productos es el protagonista, esto es solo un atajo. */
.cat-see-all { display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:700; color:var(--primary-dark); white-space:nowrap; padding-bottom:.3rem; }
.cat-see-all:hover { text-decoration:underline; }

/* -------- PRODUCTS -------- */
.product-filter-tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.tab-btn { padding:.5rem 1rem; border:1.5px solid var(--border); border-radius:50px; font-size:.85rem; font-weight:600; background:#fff; color:var(--text-2); transition:.2s; }
.tab-btn.active, .tab-btn:hover { border-color:var(--primary); color:var(--primary); background:rgba(0,136,204,.06); }

.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.2rem; }
.product-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:.2s; position:relative; display:flex; flex-direction:column; }
.product-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); border-color:var(--primary); }
.product-badge { position:absolute; top:.7rem; left:.7rem; padding:.2rem .6rem; border-radius:50px; font-size:.7rem; font-weight:700; z-index:1; }
.badge-new { background:var(--primary); color:#fff; }
.badge-sale { background:var(--orange); color:#fff; }
.badge-hot { background:#e11d48; color:#fff; }
.badge-out { background:#94a3b8; color:#fff; }
.product-img { background:var(--bg-2); height:190px; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; }
.product-img img { height:170px; width:100%; object-fit:contain; transition:.3s; padding:.5rem; }
.product-img i { font-size:4rem; color:var(--border); }
.product-card:hover .product-img img { transform:scale(1.03); }
.product-info { padding:1rem; flex:1; display:flex; flex-direction:column; }
.product-cat { font-size:.72rem; color:var(--primary-dark); font-weight:600; text-transform:uppercase; margin-bottom:.3rem; }
.product-name { font-size:.9rem; font-weight:700; margin-bottom:.5rem; line-height:1.3; cursor:pointer; color:var(--text); }
.product-name:hover { color:var(--primary); }
.product-desc { font-size:.8rem; color:var(--text-2); margin-bottom:.7rem; flex:1; }
.product-price-row { display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem; }
.product-price { font-size:1.2rem; font-weight:800; color:var(--orange); }
.product-price-old { font-size:.85rem; color:var(--text-2); text-decoration:line-through; }
.product-stock { font-size:.72rem; padding:.2rem .6rem; border-radius:50px; font-weight:600; }
.stock-ok { background:rgba(22,163,74,.1); color:var(--success); }
.stock-ask { background:rgba(217,119,6,.1); color:#b45309; }
.stock-out { background:rgba(220,38,38,.1); color:var(--error); }
.stock-low { background:rgba(255,102,0,.1); color:var(--orange); }
.product-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.btn-cart { flex:1; background:var(--primary); color:#fff; padding:.55rem .5rem; border-radius:var(--radius-pill); font-size:.8rem; font-weight:600; transition:.2s; display:flex; align-items:center; justify-content:center; gap:.3rem; }
.btn-cart:hover { background:var(--primary-dark); }
.btn-wa-product { background:#25d366; color:#fff; padding:.55rem .6rem; border-radius:var(--radius-pill); font-size:.9rem; transition:.2s; }
.btn-wa-product:hover { background:#1db954; }
.btn-view { border:1px solid var(--border); color:var(--text-2); padding:.55rem .6rem; border-radius:var(--radius-pill); font-size:.85rem; transition:.2s; background:#fff; }
.btn-view:hover { border-color:var(--primary); color:var(--primary); }

.load-more-wrap { text-align:center; margin-top:2rem; }
.btn-load-more { background:#fff; border:1.5px solid var(--primary); color:var(--primary); padding:.75rem 2rem; border-radius:var(--radius-pill); font-weight:600; transition:.2s; display:inline-flex; align-items:center; gap:.5rem; }
.btn-load-more:hover { background:var(--primary); color:#fff; }

/* -------- PROMO BANNER -------- */
.promo-banner { background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); padding:2.5rem 0; }
.promo-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.promo-text h3 { color:#fff; font-size:1.4rem; margin-bottom:.3rem; }
.promo-text p { color:rgba(255,255,255,.85); }
.promo-btns { display:flex; gap:1rem; flex-wrap:wrap; }

/* -------- SERVICES -------- */
.services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1.3rem; }
/* ---- SOLUCIONES: filtros + como funciona (el header reusa .section-header) ---- */
.sol-eyebrow { font-size:.75rem; font-weight:700; color:var(--primary-dark); text-transform:uppercase; letter-spacing:.06em; }
.sol-hero-benefits { display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; margin-bottom:2.2rem; }
.sol-hero-benefit { display:flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:600; color:var(--text); }
.sol-hero-benefit i { color:var(--primary); }

.sol-filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.sol-filter-btn { padding:.55rem 1.1rem; border:1.5px solid var(--border); border-radius:50px; font-size:.83rem; font-weight:600; background:#fff; color:var(--text-2); display:flex; align-items:center; gap:.4rem; transition:.2s; }
.orient-chip-img { width:16px; height:16px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.sol-filter-btn:hover { border-color:var(--primary); color:var(--primary); }
.sol-filter-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; }

.sol-how { margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border); text-align:center; }
.sol-how h3 { font-size:1.3rem; font-weight:700; color:var(--text); }
.sol-how > p { font-size:.85rem; color:var(--text-2); margin-bottom:1.8rem; }
.sol-how-steps { display:flex; align-items:center; justify-content:center; gap:1.2rem; flex-wrap:wrap; max-width:900px; margin:0 auto; }
.sol-how-step { display:flex; align-items:center; gap:.8rem; text-align:left; flex:1; min-width:220px; }
.sol-how-num { width:36px; height:36px; border-radius:50%; background:var(--primary); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sol-how-step strong { display:block; font-size:.9rem; color:var(--text); }
.sol-how-step p { font-size:.78rem; color:var(--text-2); margin:0; }
.sol-how-arrow { color:var(--border); font-size:1.1rem; flex-shrink:0; }

.service-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.4rem 1.3rem; transition:.25s; position:relative; display:flex; flex-direction:column; }
.service-card:hover { box-shadow:0 12px 28px rgba(16,24,40,.08); border-color:var(--primary); transform:translateY(-3px); }
.service-badge { position:absolute; top:1.1rem; right:1.1rem; background:var(--primary); color:#fff; font-size:.65rem; font-weight:700; padding:.22rem .65rem; border-radius:50px; }
.service-icon { width:48px; height:48px; border-radius:13px; background:linear-gradient(135deg, rgba(0,136,204,.14), rgba(0,136,204,.05)); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:.9rem; overflow:hidden; }
.service-icon img { width:100%; height:100%; object-fit:cover; }
.service-card h3 { font-size:.96rem; font-weight:700; margin-bottom:.4rem; color:var(--text); padding-right:3.2rem; }
.service-desc { font-size:.8rem; color:var(--text-2); line-height:1.45; margin-bottom:.7rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.service-includes-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-2); margin-bottom:.4rem; }
.service-includes { list-style:none; margin-bottom:.9rem; flex:1; }
.service-includes li { font-size:.78rem; color:var(--text-2); padding:.12rem 0; }
.service-includes li::before { content:"✓ "; color:var(--success); font-weight:700; }
.service-foot { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding-top:.8rem; border-top:1px solid var(--border); }
.service-price { font-size:1.02rem; font-weight:800; color:var(--text); }
.service-btn-view { display:flex; align-items:center; gap:.4rem; background:var(--primary); color:#fff; padding:.5rem .9rem; border-radius:var(--radius-pill); font-size:.78rem; font-weight:700; border:none; cursor:pointer; transition:.2s; white-space:nowrap; flex-shrink:0; }
.service-btn-view:hover { background:var(--primary-dark); }
.service-btns { display:flex; flex-direction:column; gap:.5rem; }
.service-btns button, .service-btns a { width:100%; justify-content:center; }
.service-btns .btn-wa-sm { background:#25d366; color:#fff; padding:.5rem .9rem; border-radius:var(--radius-pill); font-size:.8rem; font-weight:600; display:flex; align-items:center; gap:.3rem; }
.service-btns .btn-quote-sm { border:1px solid var(--border); color:var(--text); padding:.5rem .9rem; border-radius:var(--radius-pill); font-size:.8rem; font-weight:600; background:#fff; display:flex; align-items:center; gap:.4rem; }
.service-btns .btn-quote-sm:hover { border-color:var(--primary); color:var(--primary); }

/* -------- APPS SECTION (demo interactiva) --------
   Único sector que conserva fondo oscuro a propósito: es un mockup de
   teléfono mostrando la app, no "el sitio" — igual que una foto de hero,
   es contenido oscuro dentro de una página clara, no rompe la regla. */
.apps-section { background:linear-gradient(180deg,#0d1420 0%,#131c2e 100%); position:relative; overflow:hidden; }
.apps-section-header { text-align:center; margin-bottom:3rem; }
.apps-eyebrow { background:rgba(0,136,204,.15); border:1px solid rgba(0,136,204,.3); color:#7fd0ff; padding:.4rem 1rem; border-radius:50px; font-size:.8rem; font-weight:700; display:inline-block; margin-bottom:1rem; }
.apps-section-header h2 { font-size:2.2rem; font-weight:700; color:#fff; line-height:1.2; margin-bottom:.8rem; }
.apps-section-header p { color:rgba(255,255,255,.6); font-size:1rem; }

.app-demo-wrap { display:grid; grid-template-columns:1fr 340px; gap:3rem; align-items:start; position:relative; z-index:1; }

.app-tabs { display:flex; gap:.6rem; margin-bottom:1.5rem; }
.app-tab { flex:1; padding:.7rem 1rem; border:1.5px solid rgba(255,255,255,.15); border-radius:var(--radius-pill); background:transparent; color:rgba(255,255,255,.5); font-size:.88rem; font-weight:600; cursor:pointer; transition:.2s; display:flex; align-items:center; justify-content:center; gap:.4rem; }
.app-tab.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.app-tab:hover:not(.active) { border-color:var(--primary); color:var(--primary); }

.app-feature-list { display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.8rem; }
.app-feat-item { display:flex; gap:1rem; align-items:flex-start; padding:.9rem 1rem; border-radius:var(--radius); border:1.5px solid rgba(255,255,255,.08); cursor:pointer; transition:.2s; }
.app-feat-item:hover, .app-feat-item.active-feat { background:rgba(255,255,255,.05); border-color:rgba(0,136,204,.4); }
.feat-icon { width:38px; height:38px; border-radius:var(--radius-pill); display:flex; align-items:center; justify-content:center; color:#7fd0ff; font-size:1rem; flex-shrink:0; }
.app-feat-item strong { display:block; font-size:.88rem; color:#fff; font-weight:700; margin-bottom:.2rem; }
.app-feat-item p { font-size:.78rem; color:rgba(255,255,255,.55); margin:0; line-height:1.4; }

.app-pricing-row { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.app-price-card { background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); padding:1rem; text-align:center; transition:.2s; }
.app-price-card:hover { border-color:rgba(0,136,204,.4); }
.apc-badge { background:var(--primary); color:#fff; font-size:.7rem; font-weight:800; padding:.2rem .6rem; border-radius:50px; display:inline-block; margin-bottom:.5rem; }
.apc-price { font-size:1.4rem; font-weight:800; color:#fff; }
.apc-price span { font-size:.8rem; font-weight:400; color:rgba(255,255,255,.5); }
.apc-label { font-size:.72rem; color:rgba(255,255,255,.5); margin:.3rem 0 .7rem; }
.apc-btn { background:var(--primary); color:#fff; padding:.5rem .8rem; border-radius:var(--radius-pill); font-size:.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; gap:.3rem; width:100%; transition:.2s; }
.apc-btn:hover { background:var(--primary-dark); }

.apps-bottom-cta { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-top:3rem; padding:2rem; background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); flex-wrap:wrap; }
.cta-left h3 { color:#fff; font-size:1.2rem; font-weight:700; margin-bottom:.3rem; }
.cta-left p { color:rgba(255,255,255,.55); font-size:.85rem; }
.cta-right { display:flex; gap:.8rem; flex-wrap:wrap; }

/* ============ PHONE MOCKUP ============ */
.app-demo-right { position:sticky; top:90px; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.phone-frame { width:270px; background:#0a0a14; border-radius:36px; padding:8px; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 20px 50px rgba(0,0,0,.4); position:relative; }
.phone-notch { width:80px; height:24px; background:#0a0a14; border-radius:0 0 16px 16px; margin:0 auto -8px; position:relative; z-index:2; box-shadow:0 0 0 1px rgba(255,255,255,.08); }
.phone-screen { background:#0f172a; border-radius:28px; overflow:hidden; height:540px; position:relative; }

.app-screen { display:none; flex-direction:column; height:100%; overflow:hidden; animation:fadeIn .3s ease; }
.app-screen.active { display:flex; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.app-statusbar { display:flex; justify-content:space-between; padding:.3rem .8rem; font-size:.6rem; color:rgba(255,255,255,.7); background:rgba(0,0,0,.3); flex-shrink:0; }
.app-statusbar i { font-size:.55rem; margin-left:.15rem; }

.app-topbar-phone { display:flex; justify-content:space-between; align-items:center; padding:.5rem .8rem; background:#0d1b3e; flex-shrink:0; }
.app-logo-phone { font-size:.78rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:.4rem; }
.app-logo-phone i { color:var(--primary); }
.app-topbar-icons { color:rgba(255,255,255,.6); font-size:.75rem; display:flex; gap:.5rem; }
.app-live-count { font-size:.65rem; color:#f43f5e; font-weight:600; display:flex; align-items:center; gap:.25rem; }

.phone-ad-banner { background:#0f172a; border-bottom:1px solid rgba(255,255,255,.07); padding:.35rem .8rem; display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.ad-label { font-size:.55rem; color:#64748b; font-weight:700; border:1px solid #334155; border-radius:3px; padding:.1rem .3rem; }
.ad-content { font-size:.68rem; color:#94a3b8; display:flex; align-items:center; gap:.4rem; }
.ad-content i { color:var(--orange); }
.ad-content strong { color:#cbd5e1; }

.phone-player-art { display:flex; flex-direction:column; align-items:center; padding:1rem 0 .5rem; flex-shrink:0; }
.album-art { width:100px; height:100px; border-radius:50%; background:#1e3a5f; display:flex; align-items:center; justify-content:center; font-size:2.5rem; color:rgba(0,136,204,.7); border:3px solid rgba(0,136,204,.3); }
.album-art.spinning { animation:spinAlbum 8s linear infinite; }
@keyframes spinAlbum { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.now-playing-badge { margin-top:.5rem; font-size:.62rem; color:#f43f5e; font-weight:700; display:flex; align-items:center; gap:.3rem; }
.phone-track-info { text-align:center; padding:0 1rem; flex-shrink:0; }
.phone-track-name { font-size:.9rem; font-weight:700; color:#fff; margin-bottom:.2rem; }
.phone-track-sub { font-size:.68rem; color:rgba(255,255,255,.5); }
.phone-progress { padding:.6rem 1rem; flex-shrink:0; }
.progress-bar { height:3px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden; margin-bottom:.3rem; }
.progress-fill { height:100%; background:var(--primary); width:35%; animation:progressMove 10s linear infinite; }
@keyframes progressMove { from{width:10%} to{width:90%} }
.progress-times { display:flex; justify-content:space-between; font-size:.6rem; color:rgba(255,255,255,.4); }
.phone-controls { display:flex; align-items:center; justify-content:center; gap:.8rem; padding:.3rem 0; flex-shrink:0; }
.ctrl-btn { background:none; color:rgba(255,255,255,.5); font-size:.85rem; width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.ctrl-btn:hover { color:#fff; }
.ctrl-play { width:48px; height:48px; border-radius:50%; background:var(--primary); color:#fff; font-size:1.2rem; display:flex; align-items:center; justify-content:center; transition:.2s; }
.ctrl-play:hover { background:var(--primary-dark); }
.phone-volume { display:flex; align-items:center; gap:.5rem; padding:.3rem 1rem; flex-shrink:0; }
.phone-volume i { font-size:.65rem; color:rgba(255,255,255,.4); }
.volume-bar { flex:1; height:3px; background:rgba(255,255,255,.15); border-radius:2px; }
.volume-fill { height:100%; background:var(--primary); border-radius:2px; }

.phone-nav-bar { display:flex; background:#0a0f1e; border-top:1px solid rgba(255,255,255,.08); margin-top:auto; flex-shrink:0; }
.nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.5rem .3rem; font-size:.55rem; color:rgba(255,255,255,.35); cursor:pointer; transition:.2s; }
.nav-item i { font-size:.85rem; }
.nav-item.active { color:var(--primary); }
.nav-item:hover { color:rgba(255,255,255,.6); }

.schedule-day-tabs { display:flex; gap:.3rem; padding:.4rem .6rem; background:#0d1b3e; flex-shrink:0; }
.sday { font-size:.65rem; padding:.3rem .6rem; border-radius:50px; color:rgba(255,255,255,.5); cursor:pointer; }
.sday.active { background:var(--primary); color:#fff; font-weight:700; }
.schedule-list { flex:1; overflow-y:auto; padding:.3rem .5rem; }
.schedule-item { display:flex; gap:.6rem; align-items:center; padding:.5rem .3rem; border-bottom:1px solid rgba(255,255,255,.05); cursor:pointer; }
.schedule-item.now-on { background:rgba(0,136,204,.1); border-radius:8px; border-bottom:none; margin-bottom:.2rem; }
.sched-art { width:42px; height:42px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.sched-info { flex:1; }
.sched-name { font-size:.75rem; font-weight:700; color:#fff; }
.sched-host { font-size:.63rem; color:rgba(255,255,255,.45); }
.sched-time { font-size:.62rem; color:rgba(255,255,255,.35); text-align:right; }
.sched-live-tag { font-size:.55rem; background:#f43f5e; color:#fff; border-radius:4px; padding:.1rem .35rem; font-weight:700; }

.chat-messages { flex:1; overflow-y:auto; padding:.5rem .6rem; display:flex; flex-direction:column; gap:.4rem; }
.chat-msg { display:flex; gap:.4rem; align-items:flex-end; animation:fadeIn .3s ease; }
.chat-avatar { width:22px; height:22px; border-radius:50%; font-size:.55rem; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; flex-shrink:0; }
.chat-bubble { background:#1e293b; border-radius:10px 10px 10px 2px; padding:.4rem .6rem; max-width:75%; }
.chat-name { font-size:.6rem; font-weight:700; margin-bottom:.1rem; }
.chat-text { font-size:.7rem; color:rgba(255,255,255,.8); }
.chat-bubble.own { background:var(--primary); border-radius:10px 10px 2px 10px; margin-left:auto; }
.chat-bubble.own .chat-text { color:#fff; }
.chat-input-row { display:flex; gap:.3rem; padding:.4rem .5rem; background:#0a0f1e; border-top:1px solid rgba(255,255,255,.07); flex-shrink:0; }
.chat-input-box { flex:1; background:#1e293b; border-radius:20px; padding:.35rem .7rem; font-size:.65rem; color:rgba(255,255,255,.3); display:flex; align-items:center; }
.chat-send-btn { background:var(--primary); color:#fff; width:28px; height:28px; border-radius:50%; font-size:.7rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-emoji-btn { background:none; font-size:.85rem; width:28px; display:flex; align-items:center; justify-content:center; }

.notif-list { flex:1; overflow-y:auto; padding:.5rem; display:flex; flex-direction:column; gap:.4rem; }
.notif-item { display:flex; gap:.6rem; align-items:flex-start; padding:.6rem; background:#1e293b; border-radius:var(--radius); border-left:3px solid var(--primary); animation:slideIn .3s ease; }
@keyframes slideIn { from{transform:translateX(20px);opacity:0} to{transform:translateX(0);opacity:1} }
.notif-icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0; }
.notif-title { font-size:.72rem; font-weight:700; color:#fff; margin-bottom:.1rem; }
.notif-desc { font-size:.65rem; color:rgba(255,255,255,.5); }
.notif-time { font-size:.58rem; color:rgba(255,255,255,.3); margin-top:.1rem; }

.ads-demo-screen { flex:1; overflow-y:auto; padding:.5rem; display:flex; flex-direction:column; gap:.5rem; }
.ads-demo-title { font-size:.72rem; font-weight:700; color:rgba(255,255,255,.7); text-align:center; padding:.3rem 0; }
.ads-demo-card { background:#1e1b4b; border-radius:var(--radius); padding:.6rem; border:1px solid rgba(124,58,237,.3); }
.adc-header { font-size:.68rem; font-weight:700; color:#a78bfa; margin-bottom:.4rem; display:flex; align-items:center; gap:.3rem; }
.adc-banner-mock { background:#ff6600; border-radius:6px; padding:.4rem .6rem; font-size:.65rem; color:#fff; display:flex; align-items:center; gap:.4rem; margin-bottom:.3rem; }
.adc-video-mock { background:#000; border-radius:6px; padding:.6rem; display:flex; align-items:center; gap:.5rem; margin-bottom:.3rem; position:relative; }
.adc-video-mock i { color:#f43f5e; font-size:1rem; }
.adc-video-mock span { font-size:.65rem; color:rgba(255,255,255,.6); }
.skip-btn { margin-left:auto; background:rgba(255,255,255,.15); border-radius:4px; padding:.15rem .4rem; font-size:.58rem; color:rgba(255,255,255,.6); }
.adc-notif-mock { background:#1e293b; border-radius:6px; padding:.4rem .6rem; font-size:.65rem; color:#cbd5e1; display:flex; align-items:center; gap:.4rem; margin-bottom:.3rem; }
.adc-notif-mock strong { color:#fff; }
.adc-desc { font-size:.62rem; color:rgba(255,255,255,.4); margin:0; }

.stats-screen { flex:1; overflow-y:auto; padding:.5rem; background:#0f172a; }
.stat-box { background:#1e293b; border-radius:var(--radius); padding:.6rem .7rem; margin-bottom:.5rem; }
.stat-box-header { font-size:.62rem; color:#64748b; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:.3rem; }
.stat-box-value { font-size:1.3rem; font-weight:800; color:#38bdf8; }
.stat-box-sub { font-size:.6rem; color:#22c55e; margin-top:.1rem; }
.stat-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin-bottom:.5rem; }
.stat-mini { background:#1e293b; border-radius:8px; padding:.5rem; }
.stat-mini-val { font-size:.9rem; font-weight:800; color:#fff; }
.stat-mini-label { font-size:.58rem; color:#64748b; }
.stat-bar-list { background:#1e293b; border-radius:var(--radius); padding:.6rem; }
.stat-bar-item { margin-bottom:.4rem; }
.stat-bar-label { display:flex; justify-content:space-between; font-size:.62rem; color:rgba(255,255,255,.6); margin-bottom:.2rem; }
.stat-bar-track { height:4px; background:rgba(255,255,255,.1); border-radius:2px; }
.stat-bar-fill { height:100%; border-radius:2px; background:#38bdf8; }

.tv-player-screen { flex-shrink:0; }
.tv-video-mock { height:160px; background:#000; position:relative; overflow:hidden; }
.tv-scanlines { position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0px,rgba(0,0,0,.15) 1px,transparent 1px,transparent 2px); pointer-events:none; }
.tv-content { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:.5rem; background:#0d1420; }
.tv-live-badge { font-size:.6rem; font-weight:800; color:#fff; background:#f43f5e; padding:.15rem .4rem; border-radius:4px; display:inline-flex; align-items:center; gap:.2rem; width:fit-content; }
.tv-live-badge i { font-size:.45rem; animation:blink 1s infinite; }
.tv-channel-logo { font-size:2.5rem; color:rgba(255,255,255,.15); text-align:center; flex:1; display:flex; align-items:center; justify-content:center; }
.tv-overlay-info { }
.tv-prog-name { font-size:.75rem; font-weight:700; color:#fff; }
.tv-prog-time { font-size:.6rem; color:rgba(255,255,255,.5); }
.tv-controls-bar { display:flex; justify-content:space-between; align-items:center; padding:.4rem .8rem; background:#0d1b3e; flex-shrink:0; }
.tv-ctrl-left, .tv-ctrl-right { display:flex; align-items:center; gap:.5rem; }
.tv-btn { background:none; color:rgba(255,255,255,.6); font-size:.8rem; width:24px; height:24px; display:flex; align-items:center; justify-content:center; }
.tv-live-text { font-size:.62rem; color:#f43f5e; font-weight:700; display:flex; align-items:center; gap:.25rem; }
.tv-related-list { flex:1; overflow-y:auto; }
.tv-rel-header { font-size:.65rem; font-weight:700; color:rgba(255,255,255,.4); padding:.5rem .8rem; text-transform:uppercase; letter-spacing:.5px; }
.tv-rel-item { display:flex; gap:.6rem; align-items:center; padding:.4rem .8rem; border-bottom:1px solid rgba(255,255,255,.05); cursor:pointer; }
.tv-rel-item:hover { background:rgba(255,255,255,.04); }
.tv-rel-thumb { width:50px; height:34px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:1rem; color:rgba(255,255,255,.5); flex-shrink:0; }
.tv-rel-name { font-size:.72rem; color:#fff; font-weight:600; }
.tv-rel-time { font-size:.6rem; color:rgba(255,255,255,.35); }

.vod-categories { display:flex; gap:.3rem; padding:.4rem .6rem; background:#1a0533; overflow-x:auto; flex-shrink:0; }
.vod-cat { font-size:.65rem; white-space:nowrap; padding:.3rem .6rem; border-radius:50px; color:rgba(255,255,255,.5); cursor:pointer; border:1px solid rgba(255,255,255,.1); }
.vod-cat.active { background:#7c3aed; border-color:#7c3aed; color:#fff; font-weight:700; }
.vod-grid { flex:1; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; gap:.4rem; padding:.5rem; }
.vod-item { border-radius:8px; overflow:hidden; cursor:pointer; }
.vod-thumb { height:65px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:rgba(255,255,255,.4); position:relative; }
.vod-thumb-play { position:absolute; inset:0; background:rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; font-size:.9rem; color:#fff; opacity:0; transition:.2s; }
.vod-item:hover .vod-thumb-play { opacity:1; }
.vod-info { background:#1e293b; padding:.3rem .4rem; }
.vod-title { font-size:.62rem; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vod-dur { font-size:.58rem; color:rgba(255,255,255,.35); }

.push-notif-demo { background:rgba(15,23,42,.95); border:1px solid rgba(255,255,255,.15); border-radius:14px; padding:.7rem .9rem; width:270px; box-shadow:0 8px 30px rgba(0,0,0,.4); animation:slideDown .5s ease; }
@keyframes slideDown { from{transform:translateY(-20px);opacity:0} to{transform:translateY(0);opacity:1} }
.push-notif-inner { display:flex; gap:.7rem; align-items:center; }
.push-app-icon { width:32px; height:32px; background:var(--primary); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem; flex-shrink:0; }
.push-title { font-size:.72rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:.3rem; }
.push-time { font-size:.6rem; color:rgba(255,255,255,.4); font-weight:400; }
.push-body { font-size:.7rem; color:rgba(255,255,255,.7); }

.platform-badges { display:flex; gap:.5rem; }
.platform-badge { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-pill); padding:.4rem .8rem; font-size:.72rem; color:rgba(255,255,255,.6); display:flex; align-items:center; gap:.4rem; }
.platform-badge i { font-size:.9rem; }

@media(max-width:1024px){ .app-demo-wrap { grid-template-columns:1fr; } .app-demo-right { position:static; flex-direction:row; flex-wrap:wrap; justify-content:center; } .app-pricing-row { grid-template-columns:repeat(3,1fr); } }
@media(max-width:640px){ .app-pricing-row { grid-template-columns:1fr 1fr; } .apps-bottom-cta { flex-direction:column; } .cta-right { width:100%; } }
.price-from { background:var(--orange); color:#fff; padding:.2rem .6rem; border-radius:50px; font-size:.75rem; font-weight:700; }
.badge-blue { background:var(--primary); color:#fff; padding:.3rem .8rem; border-radius:50px; font-size:.78rem; font-weight:700; display:inline-block; margin-bottom:1rem; }

/* -------- BRANDS -------- */
/* Banner angosto de la cinta animada — a proposito NO usa .section (esa
   clase da el padding grande de una seccion completa) ni .section-header
   (su h2 se agranda con clamp() en impact.css) porque esto es una franja
   discreta, no otro bloque de contenido pesado. */
.brands { padding:2.6rem 0; background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.brands-marquee-header { text-align:center; margin-bottom:1.4rem; }
.brands-marquee-header h3 { font-size:1.15rem; font-weight:700; color:var(--text); margin-top:.2rem; }
.brands-strip { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.brand-item { background:#fff; border:1px solid var(--border); border-radius:var(--radius-pill); padding:.6rem 1.2rem; font-size:.85rem; font-weight:700; color:var(--text-2); transition:.2s; white-space:nowrap; flex-shrink:0; }
.brand-item:hover { border-color:var(--primary); color:var(--primary); }

/* ---- GRILLA COMPLETA DE MARCAS (referencia 08) ---- */
.brands-full-header { text-align:center; max-width:560px; margin:0 auto 1.6rem; }
.brands-full-header h3 { font-size:1.5rem; font-weight:800; color:var(--text); margin:.4rem 0 .5rem; }
.brands-full-header p { font-size:.88rem; color:var(--text-2); }
.brands-full-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.brands-full-filters { display:flex; gap:.5rem; flex-wrap:wrap; }
.brands-full-search { position:relative; flex-shrink:0; }
.brands-full-search i { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--text-2); font-size:.8rem; }
.brands-full-search input { padding:.6rem .9rem .6rem 2.2rem; border:1.5px solid var(--border); border-radius:50px; font-size:.85rem; width:220px; outline:none; }
.brands-full-search input:focus { border-color:var(--primary); }
.brands-full-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:1rem; }
.brand-full-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.2rem 1rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; min-height:90px; transition:.2s; text-align:center; }
.brand-full-card:hover { border-color:var(--primary); box-shadow:var(--shadow); transform:translateY(-2px); }
.brand-full-wordmark { font-size:1.1rem; font-weight:800; color:var(--text); letter-spacing:-.01em; }
.brand-full-card span { font-size:.68rem; color:var(--text-2); text-transform:uppercase; letter-spacing:.04em; }
.brands-full-empty { grid-column:1/-1; text-align:center; padding:2rem; color:var(--text-2); font-size:.88rem; }
.brands-full-cta { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.2rem 1.5rem; margin-top:1.8rem; }
.brands-full-cta strong { display:block; font-size:.92rem; color:var(--text); }
.brands-full-cta p { font-size:.8rem; color:var(--text-2); margin-top:.2rem; }
@media(max-width:768px) {
  .brands-full-toolbar { flex-direction:column; align-items:stretch; }
  .brands-full-search input { width:100%; }
  .brands-full-cta { flex-direction:column; align-items:stretch; text-align:center; }
}

/* -------- BLOG -------- */
.blog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.blog-filters { display:flex; gap:.5rem; flex-wrap:wrap; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.blog-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:.2s; cursor:pointer; }
.blog-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); border-color:var(--primary); }
.blog-img { height:160px; background:var(--primary); display:flex; align-items:center; justify-content:center; font-size:3rem; color:rgba(255,255,255,.5); position:relative; }
.blog-cat-badge { position:absolute; top:.8rem; left:.8rem; background:rgba(0,0,0,.35); backdrop-filter:blur(4px); color:#fff; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.3rem .7rem; border-radius:50px; }
.blog-body { padding:1.2rem; }
.blog-body h3 { font-size:.95rem; font-weight:700; margin-bottom:.5rem; line-height:1.4; color:var(--text); }
.blog-body p { font-size:.82rem; color:var(--text-2); margin-bottom:.8rem; }
.blog-meta { font-size:.72rem; color:var(--text-2); margin-bottom:.8rem; display:flex; align-items:center; gap:.35rem; }
.blog-meta-sep { opacity:.5; }
.blog-link { font-size:.82rem; font-weight:600; color:var(--primary-dark); display:flex; align-items:center; gap:.3rem; }
.blog-pagination { display:flex; justify-content:center; gap:.4rem; margin-top:2rem; }
.blog-pagination button { width:36px; height:36px; border-radius:var(--radius-pill); border:1.5px solid var(--border); background:#fff; color:var(--text-2); font-weight:600; font-size:.85rem; transition:.2s; }
.blog-pagination button:hover:not(:disabled) { border-color:var(--primary); color:var(--primary); }
.blog-pagination button.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.blog-pagination button:disabled { opacity:.4; cursor:default; }

/* -------- FAQ -------- */
.faq-list { max-width:800px; margin:0 auto; }
.faq-item { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:.8rem; overflow:hidden; }
.faq-q { padding:1rem 1.2rem; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; background:#fff; transition:.2s; color:var(--text); }
.faq-q:hover { background:var(--bg-2); }
.faq-q i { transition:.3s; color:var(--primary); }
.faq-a { max-height:0; overflow:hidden; transition:.3s; background:var(--bg-2); }
.faq-a p { padding:1rem 1.2rem; font-size:.9rem; color:var(--text-2); }
.faq-item.open .faq-q i { transform:rotate(180deg); }
.faq-item.open .faq-a { max-height:300px; }

/* -------- CONTACT -------- */
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:3rem; margin-bottom:2rem; }
.contact-grid-3 { grid-template-columns:1.3fr 1fr 1fr; gap:1.8rem; align-items:start; }
.contact-grid-3 .contact-form, .contact-grid-3 .contact-info, .contact-map-col { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.6rem; }
.contact-info h2, .contact-info h3, .contact-map-col h3 { font-size:1.05rem; font-weight:700; margin-bottom:1.2rem; color:var(--text); display:flex; align-items:center; gap:.5rem; }
.contact-form-sub { font-size:.8rem; color:var(--text-2); margin:-.7rem 0 1rem; }
.contact-char-count { text-align:right; font-size:.72rem; color:var(--text-2); margin:-.6rem 0 .8rem; }
.contact-map-col .map-container { margin-bottom:.8rem; }
.btn-map-link { display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.82rem; font-weight:600; color:var(--primary-dark); border:1.5px solid var(--border); border-radius:var(--radius-pill); padding:.6rem; margin-bottom:1rem; transition:.2s; }
.btn-map-link:hover { border-color:var(--primary); background:rgba(0,136,204,.05); }
/* Antes era un <div> con flecha ">" pero cursor:default (no llevaba a
   ningun lado) — una tarjeta con flecha de "ver mas" que no hace nada se
   siente rota. Ahora es un link real a la misma direccion de Google Maps
   del boton de arriba. */
.visit-store-card { display:flex; align-items:center; gap:.8rem; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem; text-decoration:none; color:inherit; transition:.2s; }
.visit-store-card:hover { border-color:var(--primary); background:#fff; box-shadow:var(--shadow); }
.visit-store-card > i:first-child { color:var(--primary); font-size:1.2rem; }
.visit-store-card strong { display:block; font-size:.82rem; color:var(--text); }
.visit-store-card p { font-size:.72rem; color:var(--text-2); margin:.1rem 0 0; }
.visit-store-card > i:last-child { margin-left:auto; color:var(--text-2); font-size:.75rem; transition:.2s; }
.visit-store-card:hover > i:last-child { color:var(--primary); transform:translateX(3px); }
.contact-item { display:flex; gap:1rem; margin-bottom:1.2rem; align-items:flex-start; }
.contact-item i { font-size:1.2rem; color:var(--primary); margin-top:.2rem; flex-shrink:0; }
.contact-item strong { display:block; font-size:.9rem; margin-bottom:.2rem; color:var(--text); }
.contact-item p { font-size:.85rem; color:var(--text-2); margin:.1rem 0; }
.contact-item a { color:var(--primary); }
.social-links { display:flex; gap:.7rem; margin-top:1.2rem; }
.social-links a { width:38px; height:38px; background:var(--bg-2); border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; transition:.2s; color:var(--text); }
.social-links a:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.contact-form h3 { font-size:1.2rem; font-weight:700; margin-bottom:1.2rem; color:var(--text); }
.form-label { display:block; font-size:.8rem; font-weight:600; color:var(--text-2); margin-bottom:.3rem; }
.contact-form input, .contact-form textarea, .contact-form select, .quote-form input, .quote-form textarea,
.checkout-form input, .checkout-form select, .checkout-form textarea { width:100%; padding:.7rem 1rem; border:1.5px solid var(--border); border-radius:var(--radius); font-size:.9rem; font-family:inherit; outline:none; transition:.2s; margin-bottom:.8rem; background:#fff; color:var(--text); }
.contact-form input::placeholder, .contact-form textarea::placeholder, .quote-form input::placeholder, .quote-form textarea::placeholder { color:var(--text-2); }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus, .quote-form input:focus, .quote-form textarea:focus,
.checkout-form input:focus, .checkout-form select:focus, .checkout-form textarea:focus { border-color:var(--primary); }
.map-container { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); }

/* -------- FOOTER -------- */
.footer { background:var(--dark); color:#c7cfd8; padding:3rem 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1.5fr; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-logo { font-size:1.4rem; font-weight:800; color:#fff; margin-bottom:.8rem; }
.footer-logo span { color:var(--primary); }
.footer p { font-size:.85rem; line-height:1.7; }
.footer-col h4 { color:#fff; font-size:.9rem; font-weight:700; margin-bottom:1rem; }
.footer-col ul li { margin-bottom:.4rem; }
.footer-col a { color:#c7cfd8; font-size:.85rem; transition:.2s; }
.footer-col a:hover { color:#fff; }
.footer-contact p { font-size:.85rem; margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem; }
.footer-contact i { color:var(--primary); flex-shrink:0; }
/* El footer es oscuro, a diferencia de .social-links del resto del sitio
   (que es claro) — se scopea aparte para que los íconos no queden
   invisibles (texto claro sobre fondo claro). */
.footer .social-links a { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); color:#fff; }
.footer .social-links a:hover { background:var(--primary); border-color:var(--primary); color:#fff; }
.footer-bottom { text-align:center; padding:1.2rem 0; font-size:.8rem; }
.footer-bottom p { margin:.2rem 0; }

/* -------- FLOATING WA -------- */
.wa-float { position:fixed; bottom:2rem; right:2rem; width:56px; height:56px; background:#25d366; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.7rem; color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.2); z-index:9999; transition:.2s; }
.wa-float:hover { transform:scale(1.06); background:#1db954; }
.wa-tooltip { position:absolute; right:70px; background:var(--dark); color:#fff; padding:.4rem .8rem; border-radius:var(--radius); font-size:.8rem; white-space:nowrap; opacity:0; pointer-events:none; transition:.2s; }

/* -------- VOLVER ARRIBA -------- */
/* Al costado opuesto del WhatsApp (izquierda) para no competir con el
   CTA principal — mismo criterio en mobile/tablet/desktop, solo cambia
   el tamaño/posicion vertical por breakpoint. Oculto hasta bajar un
   poco (initBackToTop() en fx.js agrega .visible). */
.back-to-top {
  position:fixed; bottom:2rem; left:2rem; width:48px; height:48px;
  background:#fff; color:var(--text-2); border:1.5px solid var(--border); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  box-shadow:var(--shadow-lg); z-index:998; cursor:pointer;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .25s, transform .25s, border-color .2s, color .2s;
}
.back-to-top.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover { border-color:var(--primary); color:var(--primary); }
@media(prefers-reduced-motion:reduce) { .back-to-top { transition:opacity .15s; } }
.wa-float:hover .wa-tooltip { opacity:1; }

/* -------- BOTTOM NAVIGATION (solo mobile) -------- */
/* Oculta en desktop; en mobile reemplaza la necesidad de scrollear al
   header para las 5 acciones mas usadas (punto 60 del brief). */
.bottom-nav { display:none; }
@media(max-width:768px) {
  .bottom-nav {
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:1000;
    background:#fff; border-top:1px solid var(--border); box-shadow:0 -2px 12px rgba(16,24,40,.08);
    padding:.4rem 0 calc(.4rem + env(safe-area-inset-bottom));
  }
  .bottom-nav a, .bottom-nav button {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:.2rem;
    font-size:.65rem; font-weight:600; color:var(--text-2); padding:.3rem 0; position:relative; background:none;
  }
  .bottom-nav a i, .bottom-nav button i { font-size:1.05rem; }
  .bottom-nav a:active, .bottom-nav button:active { color:var(--primary); }
  .bottom-nav-badge { position:absolute; top:-2px; right:calc(50% - 18px); background:var(--orange); color:#fff; font-size:.6rem; font-weight:700; width:15px; height:15px; border-radius:50%; align-items:center; justify-content:center; }
  /* deja lugar para no tapar el footer/CTA con la barra fija */
  body { padding-bottom:64px; }
  /* el boton flotante de WhatsApp sube para no superponerse con la
     bottom nav (mismo tipo de bug de "todo encimado" que ya se corrigio
     antes con el asistente de IA - no repetirlo aca). La bottom-nav suma
     env(safe-area-inset-bottom) a su propio alto en celulares con home
     indicator (iPhone sin boton) — sin sumar lo mismo aca el boton
     quedaba pegado/tapado contra la barra en esos equipos. */
  .wa-float { bottom:calc(5.5rem + env(safe-area-inset-bottom)); }
  .back-to-top { bottom:calc(5.5rem + env(safe-area-inset-bottom)); left:1.2rem; width:42px; height:42px; font-size:.95rem; }
}

/* -------- BUSQUEDA MOBILE (overlay pantalla completa) -------- */
.mobile-search-overlay { display:none; position:fixed; inset:0; background:#fff; z-index:1500; flex-direction:column; }
.mobile-search-overlay.active { display:flex; }
.mobile-search-bar { display:flex; align-items:center; gap:.7rem; padding:1rem; border-bottom:1px solid var(--border); }
.mobile-search-bar i:first-child { color:var(--text-2); }
.mobile-search-bar input { flex:1; border:none; outline:none; font-size:1rem; color:var(--text); }
.mobile-search-bar button { color:var(--text-2); font-size:1.1rem; }
.mobile-search-results { flex:1; overflow-y:auto; }
.mobile-search-results .search-result-item { padding:.9rem 1.2rem; }

/* -------- CART SIDEBAR -------- */
/* ---- CARRITO: pagina completa dentro de un modal ancho, mismo patron
   que la ficha de producto (no un sidebar angosto) ---- */
.cart-overlay { position:fixed; inset:0; background:rgba(16,24,40,.5); z-index:1100; display:none; }
.cart-overlay.active { display:block; }
.cart-sidebar { position:fixed; top:3%; left:50%; transform:translateX(-50%); width:96%; max-width:1180px; max-height:94vh; overflow-y:auto; background:#fff; border-radius:18px; z-index:1101; display:none; box-shadow:0 24px 60px rgba(16,24,40,.3); }
.cart-sidebar.active { display:block; animation:modalIn .25s ease; }
.cart-close-btn { position:sticky; top:.8rem; float:right; margin:.8rem .8rem 0; background:var(--bg-2); border:none; width:36px; height:36px; border-radius:50%; color:var(--text-2); font-size:1rem; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; }
.cart-close-btn:hover { background:rgba(220,38,38,.08); color:var(--error); }
.cart-inner { padding:1.8rem 2rem 2.2rem; clear:both; }
.cart-breadcrumb { display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--text-2); margin-bottom:1rem; }
.cart-breadcrumb i { font-size:.6rem; opacity:.6; }
.cart-breadcrumb span { color:var(--primary); font-weight:600; }
.cart-top { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.cart-top h2 { font-size:1.6rem; font-weight:800; color:var(--text); display:flex; align-items:center; gap:.6rem; }
.cart-top p { font-size:.85rem; color:var(--text-2); margin-top:.3rem; }
.cart-continue-shopping { display:flex; align-items:center; gap:.5rem; background:#fff; border:1.5px solid var(--border); color:var(--text); padding:.6rem 1rem; border-radius:var(--radius-pill); font-weight:600; font-size:.85rem; transition:.2s; }
.cart-continue-shopping:hover { border-color:var(--primary); color:var(--primary); }

.cart-empty { display:none; flex-direction:column; align-items:center; text-align:center; padding:4rem 1rem; color:var(--text-2); }
.cart-empty i { font-size:3.5rem; display:block; margin-bottom:1rem; opacity:.3; }

.cart-layout { display:grid; grid-template-columns:1fr 320px; gap:1.8rem; align-items:start; }
.cart-main { min-width:0; }
.cart-select-row { display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:.8rem; font-size:.85rem; }
.cart-select-row label { display:flex; align-items:center; gap:.5rem; font-weight:600; color:var(--text); cursor:pointer; }
.cart-select-row input[type=checkbox] { accent-color:var(--primary); width:16px; height:16px; }
.cart-remove-selected { display:flex; align-items:center; gap:.4rem; color:var(--error); font-weight:600; font-size:.8rem; }
.cart-remove-selected:hover { text-decoration:underline; }

.cart-items { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.cart-item { display:flex; gap:1rem; align-items:center; padding:1rem; border-bottom:1px solid var(--border); }
.cart-item:last-child { border-bottom:none; }
.cart-item-check { accent-color:var(--primary); width:16px; height:16px; flex-shrink:0; }
.cart-item-img { width:64px; height:64px; background:var(--bg-2); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--text-2); flex-shrink:0; overflow:hidden; }
.cart-item-img img { width:100%; height:100%; object-fit:contain; }
.cart-item-info { flex:1; min-width:0; }
.cart-item-name { font-size:.88rem; font-weight:600; line-height:1.3; color:var(--text); }
.cart-item-meta { font-size:.74rem; color:var(--text-2); margin-top:.15rem; }
.cart-item-stock { display:flex; align-items:center; gap:.3rem; font-size:.72rem; color:var(--success); margin-top:.3rem; }
.cart-item-dot { width:6px; height:6px; border-radius:50%; background:var(--success); }
.cart-item-price-col { text-align:right; flex-shrink:0; }
.cart-item-unit { font-size:.68rem; color:var(--text-2); margin-top:.1rem; }
.cart-item-price { font-size:.95rem; color:var(--text); font-weight:800; }
.cart-item-controls { display:flex; align-items:center; gap:.4rem; flex-shrink:0; }
.qty-btn { width:26px; height:26px; border:1px solid var(--border); border-radius:4px; background:#fff; color:var(--text); font-size:.9rem; display:flex; align-items:center; justify-content:center; font-weight:700; }
.qty-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.qty-val { font-size:.85rem; font-weight:700; min-width:20px; text-align:center; color:var(--text); }
.cart-item-remove { color:var(--text-2); background:none; font-size:.9rem; flex-shrink:0; padding:.4rem; }
.cart-item-remove:hover { color:var(--error); }

.cart-trust-row { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin-top:1.2rem; }
.cart-trust-item { display:flex; align-items:center; gap:.6rem; padding:.8rem; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius); }
.cart-trust-item i { color:var(--primary); font-size:1.05rem; flex-shrink:0; }
.cart-trust-item strong { display:block; font-size:.76rem; color:var(--text); }
.cart-trust-item span { font-size:.68rem; color:var(--text-2); }

.cart-summary-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.2rem; margin-bottom:1rem; }
.cart-summary-card h4 { font-size:.95rem; font-weight:700; color:var(--text); margin-bottom:.9rem; }
.cart-summary-row { display:flex; justify-content:space-between; align-items:center; font-size:.85rem; color:var(--text); padding:.4rem 0; }
.cart-summary-muted { color:var(--text-2); font-size:.76rem; }
.cart-summary-total { display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:1rem; padding:.7rem 0; border-top:1px solid var(--border); margin-top:.3rem; }
.cart-summary-total span:last-child { color:var(--orange); font-size:1.35rem; }
.cart-summary-note { font-size:.7rem; color:var(--text-2); margin-bottom:1rem; }
.cart-summary-card .btn-primary { width:100%; justify-content:center; margin-bottom:.6rem; }
.cart-summary-card .btn-whatsapp-lg { width:100%; justify-content:center; }
.cart-secure-note { display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:.72rem; color:var(--text-2); margin-top:.9rem; }

.cart-help-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.1rem; }
.cart-help-card h5 { display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:700; color:var(--text); margin-bottom:.4rem; }
.cart-help-card p { font-size:.76rem; color:var(--text-2); margin-bottom:.8rem; line-height:1.5; }

.cart-cross-sell { margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--border); }
.cart-cross-sell h4 { font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:.2rem; }
.cart-cross-sell > p { font-size:.8rem; color:var(--text-2); margin-bottom:1rem; }

/* -------- MODALS -------- */
.modal-overlay { position:fixed; inset:0; background:rgba(16,24,40,.5); z-index:1200; display:none; }
.modal-overlay.active { display:block; }
.product-modal { position:fixed; top:5%; left:50%; transform:translateX(-50%); width:90%; max-width:900px; max-height:90vh; overflow-y:auto; background:#fff; border-radius:var(--radius-lg); z-index:1201; display:none; box-shadow:0 20px 50px rgba(16,24,40,.25); }
.product-modal.active { display:block; }
.modal-close { position:sticky; top:.7rem; float:right; margin:.7rem .7rem 0; background:var(--bg-2); border:1px solid var(--border); width:36px; height:36px; border-radius:50%; font-size:1rem; color:var(--text-2); z-index:10; }
.modal-close:hover { background:rgba(220,38,38,.08); color:var(--error); }
.modal-content { padding:1.5rem; clear:both; }
.modal-product-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.modal-gallery { background:var(--bg-2); border-radius:var(--radius); height:280px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.modal-gallery img { max-height:260px; max-width:100%; object-fit:contain; padding:1rem; }
.modal-gallery i { font-size:5rem; color:var(--border); }
.modal-details h2 { font-size:1.2rem; font-weight:700; margin-bottom:.3rem; color:var(--text); }
.modal-details .product-cat { font-size:.75rem; color:var(--primary-dark); font-weight:700; text-transform:uppercase; }
.modal-sku { font-size:.75rem; color:var(--text-2); margin:.3rem 0 .8rem; }
.modal-price-row { display:flex; align-items:baseline; gap:.7rem; margin-bottom:.8rem; }
.modal-price { font-size:1.6rem; font-weight:800; color:var(--orange); }
.modal-price-old { color:var(--text-2); text-decoration:line-through; font-size:.95rem; }
.modal-desc { font-size:.88rem; color:var(--text-2); line-height:1.6; margin-bottom:1rem; }
.modal-actions { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; }
.modal-actions .btn-cart { font-size:.9rem; padding:.7rem; }
.modal-actions .btn-whatsapp-lg { font-size:.9rem; padding:.7rem; }
.modal-tech { margin-top:1.5rem; border-top:1px solid var(--border); padding-top:1.2rem; }
.modal-tech h4 { font-size:.9rem; font-weight:700; margin-bottom:.7rem; color:var(--text); }
.tech-table { width:100%; font-size:.82rem; border-collapse:collapse; }
.tech-table tr { border-bottom:1px solid var(--border); }
.tech-table td { padding:.5rem .7rem; color:var(--text-2); }
.tech-table td:first-child { font-weight:600; color:var(--text); width:40%; background:var(--bg-2); }

.quote-modal { position:fixed; top:5%; left:50%; transform:translateX(-50%); width:90%; max-width:580px; max-height:90vh; overflow-y:auto; background:#fff; border-radius:var(--radius-lg); z-index:1201; display:none; box-shadow:0 20px 50px rgba(16,24,40,.25); }
.quote-modal.active { display:block; }
.quote-header { display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.5rem; border-bottom:1px solid var(--border); position:sticky; top:0; background:#fff; z-index:5; }
.quote-header h3 { font-weight:700; font-size:1.1rem; color:var(--text); }
.quote-header button { background:none; font-size:1.2rem; color:var(--text-2); }
.quote-form { padding:1.5rem; }
.quote-form h4 { font-weight:700; margin:.8rem 0 .6rem; font-size:.95rem; color:var(--text); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.quote-btns { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.5rem; }
.delivery-options, .payment-options { display:flex; flex-direction:column; gap:.4rem; margin-bottom:.8rem; }
.delivery-options label, .payment-options label { font-size:.88rem; display:flex; align-items:center; gap:.5rem; cursor:pointer; color:var(--text); }
.order-summary { background:transparent; font-size:.85rem; margin-bottom:.6rem; }
.order-summary-item { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; padding:.5rem 0; border-bottom:1px solid var(--border); color:var(--text); }
.order-summary-item > div span { display:block; font-weight:600; font-size:.82rem; }
.order-summary-item small { display:block; color:var(--text-2); font-size:.7rem; margin-top:.1rem; }
.order-summary-item > span:last-child { font-weight:700; white-space:nowrap; }
.order-summary-total { display:flex; justify-content:space-between; font-weight:700; font-size:1rem; margin-top:.5rem; color:var(--text); }

/* ---- CHECKOUT: pagina completa (mismo patron que carrito/ficha) ---- */
.checkout-modal { position:fixed; top:3%; left:50%; transform:translateX(-50%); width:96%; max-width:1180px; max-height:94vh; overflow-y:auto; background:#fff; border-radius:18px; z-index:1201; display:none; box-shadow:0 24px 60px rgba(16,24,40,.3); }
.checkout-modal.active { display:block; animation:modalIn .25s ease; }
.checkout-secure-badge { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius); padding:.6rem 1rem; font-size:.8rem; font-weight:700; color:var(--text); }
.checkout-secure-badge i { color:var(--primary); }
.checkout-secure-badge span { display:block; width:100%; font-weight:400; font-size:.68rem; color:var(--text-2); }

.checkout-steps { display:flex; align-items:center; margin-bottom:1.8rem; }
.checkout-step { display:flex; align-items:center; gap:.6rem; flex:1; position:relative; }
.checkout-step:not(:last-child)::after { content:''; flex:1; height:2px; background:var(--border); margin:0 .8rem; }
.checkout-step-num { width:34px; height:34px; border-radius:50%; background:var(--bg-2); border:2px solid var(--border); color:var(--text-2); font-weight:700; font-size:.9rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:.2s; }
.checkout-step strong { display:block; font-size:.8rem; color:var(--text); }
.checkout-step span { font-size:.68rem; color:var(--text-2); }
.checkout-step.active .checkout-step-num { background:var(--primary); border-color:var(--primary); color:#fff; }
.checkout-step.active strong { color:var(--primary); }
.checkout-step.done .checkout-step-num { background:var(--success); border-color:var(--success); color:#fff; }

.checkout-layout { display:grid; grid-template-columns:1fr 320px; gap:1.8rem; align-items:start; }
.checkout-form { min-width:0; }
.checkout-panel { display:none; }
.checkout-panel.active { display:block; animation:fadeIn .2s ease; }
.checkout-panel-title { display:flex; align-items:flex-start; gap:.8rem; margin-bottom:1.2rem; }
.checkout-panel-title i { width:38px; height:38px; border-radius:50%; background:rgba(0,136,204,.1); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.checkout-panel-title h4 { font-size:1.05rem; font-weight:700; color:var(--text); }
.checkout-panel-title p { font-size:.8rem; color:var(--text-2); margin-top:.1rem; }
.checkout-panel-nav { display:flex; justify-content:space-between; gap:.8rem; margin-top:1rem; }
.checkout-panel-nav .btn-primary { margin-left:auto; }
.btn-outline-nav { display:flex; align-items:center; gap:.5rem; background:#fff; border:1.5px solid var(--border); color:var(--text); padding:.7rem 1.2rem; border-radius:var(--radius-pill); font-weight:600; font-size:.88rem; transition:.2s; }
.btn-outline-nav:hover { border-color:var(--primary); color:var(--primary); }

.checkout-cards { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.checkout-card { display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; padding:1.1rem; border:1.5px solid var(--border); border-radius:var(--radius-lg); cursor:pointer; transition:.2s; position:relative; }
.checkout-card input { position:absolute; opacity:0; }
.checkout-card i { font-size:1.2rem; color:var(--text-2); }
.checkout-card strong { font-size:.88rem; color:var(--text); }
.checkout-card span { font-size:.74rem; color:var(--text-2); }
.checkout-card:hover { border-color:var(--primary); }
.checkout-card:has(input:checked) { border-color:var(--primary); background:rgba(0,136,204,.05); box-shadow:0 0 0 1px var(--primary); }
.checkout-card:has(input:checked) i { color:var(--primary); }

.checkout-review-row { display:flex; align-items:flex-start; gap:.8rem; padding:.8rem 0; border-bottom:1px solid var(--border); }
.checkout-review-row:last-child { border-bottom:none; }
.checkout-review-row i { width:32px; height:32px; border-radius:50%; background:var(--bg-2); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }
.checkout-review-row strong { display:block; font-size:.85rem; color:var(--text); }
.checkout-review-row span { font-size:.78rem; color:var(--text-2); }

.cart-summary-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
.cart-summary-card-head h4 { font-size:.95rem; font-weight:700; color:var(--text); margin:0; }
.cart-summary-card-head a { font-size:.75rem; color:var(--primary-dark); font-weight:600; }
.cart-summary-card-head a:hover { text-decoration:underline; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* -------- RESPONSIVE -------- */
@media(max-width:1024px){
  .footer-grid { grid-template-columns:1fr 1fr 1fr; }
  .footer-grid > div:first-child { grid-column:span 3; }
  .apps-inner { grid-template-columns:1fr; }
  .modal-product-grid { grid-template-columns:1fr; }
}
@media(max-width:768px){
  /* La topbar es redundante en mobile (WhatsApp ya esta en el header y
     en el boton flotante) — ocupaba 2 lineas completas antes de llegar
     al contenido real. */
  .topbar { display:none; }
  /* Pedido del cliente: la grilla completa de marcas (con filtros +
     buscador + CTA) queda muy sobrecargada en mobile. La cinta animada
     de arriba (#marcas) es la que el cliente quiere conservar — esta
     version explorable completa se oculta solo en mobile, sigue
     disponible en desktop/tablet. */
  #todas-las-marcas { display:none; }
  /* Pedido del cliente: la web es muy larga en mobile — reducir el
     padding vertical de cada seccion (era 3rem, ahora 2rem) y el margen
     bajo los titulos (2.25rem a 1.6rem) recorta el largo total sin
     sacar contenido real. */
  .section { padding:2rem 0; }
  .section-header { margin-bottom:1.6rem; }
  .header-inner { flex-wrap:nowrap; min-height:72px; }
  .logo img { height:56px; max-width:170px; }
  .logo-text { font-size:1.6rem; }
  .search-bar { display:none; }
  /* Barra superior mobile: el WhatsApp del header ya no existe (ver
     estilo global — el flotante es el unico) y "Asesoramiento" pasa al
     menu hamburguesa como boton claro y con texto — queda solo lo
     esencial arriba: favoritos, carrito, menu. */
  .quote-btn { display:none; }
  .menu-toggle { display:flex; }
  /* Sin el buscador (oculto en mobile) no quedaba nada empujando el
     grupo de acciones — el logo quedaba pegado a la izquierda y
     favoritos/carrito/menu colgaban sueltos cerca del centro, con un
     tramo vacio grande a la derecha. Ahora el grupo se pega al borde
     derecho, que es el layout esperado en un header mobile. */
  .header-actions { margin-left:auto; }
  /* Mismo espaciado entre los 3 botones (favoritos-carrito-menu) en vez
     de .6rem adentro del grupo y 1.2rem hacia el menu — se leen como un
     solo cluster parejo. */
  .header-inner { gap:.6rem; }
  .cart-btn, .wish-btn, .menu-toggle { box-shadow:0 1px 3px rgba(16,24,40,.08); }
  .navbar { position:static; }
  .nav-menu { display:none; flex-direction:column; width:100%; }
  .nav-menu.open { display:flex; }
  .nav-menu li { width:100%; }
  .nav-menu a { padding:.7rem 1rem; border-bottom:1px solid rgba(255,255,255,.08); }
  .nav-mobile-only { display:block; border-bottom:1px solid rgba(255,255,255,.08); }
  .dropdown { position:static; min-width:100%; border:none; box-shadow:none; padding:.5rem 1rem; background:rgba(255,255,255,.03); display:none; }
  /* En mobile el dropdown no se abre con :hover (no hay mouse) — el primer
     toque en el link principal expande/colapsa via toggleNavDropdown()
     (nav-mega.js), que agrega/saca esta clase .open. */
  .nav-menu li.has-dropdown.open .dropdown { display:block; }
  .nav-menu li.has-dropdown.open > a i.fa-chevron-down { transform:rotate(180deg); }
  .nav-menu li.has-dropdown > a i.fa-chevron-down { transition:transform .2s; }
  .dropdown-grid { grid-template-columns:1fr 1fr; }
  .hero-slide { padding:3rem 0; min-height:auto; }
  .hero-slide .container { flex-direction:column; }
  .hero-content h1 { font-size:1.8rem; }
  .hero-icon { font-size:4rem; }
  .products-grid { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-grid > div:first-child { grid-column:span 2; }
  .form-row { grid-template-columns:1fr; }
  .quote-btns { grid-template-columns:1fr; }
  .apps-cards { grid-template-columns:1fr 1fr; }
  /* Igual que el resto de los encabezados de seccion: en desktop
     quedaba bien, achicado solo para mobile. */
  .apps-section-header { margin-bottom:1.8rem; }
  .apps-eyebrow { padding:.3rem .8rem; font-size:.7rem; margin-bottom:.6rem; }
  .apps-section-header h2 { font-size:1.5rem; margin-bottom:.4rem; }
  .apps-section-header p { font-size:.85rem; }
  /* Pedido explicito del cliente: una sola fila, todos los items uno al
     lado del otro (no un grid que envuelve y deja huerfanos) — mismo
     patron de scroll horizontal + fade que ya usan los chips de
     categorias. */
  .features-grid { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:1.1rem; padding-bottom:.3rem; scrollbar-width:none; mask-image:linear-gradient(90deg,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent); }
  .features-grid::-webkit-scrollbar { display:none; }
  .feature-item { flex:0 0 auto; white-space:nowrap; gap:.55rem; }
  /* Un poco mas chico todavia — pedido del cliente despues de ver la fila
     unica ya funcionando. */
  .feature-item i { font-size:1.15rem; }
  .feature-item strong { font-size:.8rem; }
  .feature-item p { font-size:.72rem; }
  /* Mas aire entre Marcas → franja de confianza → Categorias: en mobile
     quedaban pegados uno con otro con solo la linea divisoria de por
     medio, se sentia como un solo bloque desordenado. */
  .features-bar { padding:1.8rem 0; }
  .brands { padding-bottom:2.2rem; }
  /* Mismo problema en Servicios: beneficios + filtros + primera tarjeta
     quedaban todos pegados, se leia como un solo cumulo de pildoras. */
  .sol-hero-benefits { margin-bottom:1.8rem; }
  .sol-filters { margin-bottom:2rem; }
  /* Pedido del cliente: mismo criterio ya aplicado en "Qué querés hacer"/
     "Explorá por categoría"/franjas de confianza — una sola fila con
     scroll horizontal en vez de envolver en 2-3 filas de pildoras. */
  .sol-hero-benefits, .sol-filters {
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    padding-bottom:.3rem; scrollbar-width:none;
    mask-image:linear-gradient(90deg,#000 92%,transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
  }
  .sol-hero-benefits::-webkit-scrollbar, .sol-filters::-webkit-scrollbar { display:none; }
  .sol-hero-benefit, .sol-filter-btn { flex-shrink:0; white-space:nowrap; }
  .promo-inner { flex-direction:column; text-align:center; }
  .cart-inner { padding:1.2rem 1rem 1.6rem; }
  .cart-layout { grid-template-columns:1fr; }
  .cart-trust-row { grid-template-columns:1fr 1fr; }
  .cart-item { flex-wrap:wrap; }
  .cart-item-price-col { margin-left:auto; }
  .checkout-layout { grid-template-columns:1fr; }
  .checkout-cards { grid-template-columns:1fr; }
  .checkout-step div { display:none; }
  .checkout-steps { margin-bottom:1.2rem; }
  .checkout-secure-badge { display:none; }
  .checkout-panel-nav { flex-wrap:wrap; }
  .checkout-panel-nav .btn-primary, .checkout-panel-nav .btn-outline-nav { flex:1; justify-content:center; }
  .sol-how-steps { flex-direction:column; align-items:stretch; }
  .sol-how-arrow { display:none; }
  .blog-toolbar { flex-direction:column; align-items:stretch; }
  .brands-full-search input { width:100%; }
  /* Mismo criterio que el resto del sitio: los filtros de la Academy
     envolvian en 2-3 filas de pildoras — una sola fila con scroll.
     flex:none + width:100% es necesario porque .blog-toolbar es un flex
     column en mobile — sin esto el item crece a su min-content (todo el
     ancho de los chips) y desborda la pagina, mismo bug ya resuelto
     antes en .orient-chips. */
  .blog-filters {
    flex:none; width:100%;
    flex-wrap:nowrap; overflow-x:auto; padding-bottom:.3rem; scrollbar-width:none;
    mask-image:linear-gradient(90deg,#000 92%,transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
  }
  .blog-filters::-webkit-scrollbar { display:none; }
  .blog-filters .sol-filter-btn { flex-shrink:0; white-space:nowrap; }
  /* Apps Streaming es la seccion mas larga de la home en mobile — la
     lista de features (switcher del mockup) mostraba titulo+descripcion
     completos por item; con el mockup ya demostrando cada funcion al
     tocarla, la descripcion es redundante ahi. */
  .app-demo-wrap { gap:1.6rem; }
  .app-feature-list { gap:.5rem; margin-bottom:1.2rem; }
  .app-feat-item { padding:.7rem .9rem; gap:.7rem; }
  .app-feat-item p { display:none; }
  .app-price-card { padding:.8rem .6rem; }
  .phone-frame { width:230px; }
  /* Contacto: formulario + info + mapa, cada uno con su propia tarjeta
     de padding grande — se recorta el padding y los margenes internos,
     y el mapa baja de 220 a 170px de alto (sigue siendo un mapa util,
     solo mas compacto). */
  .contact-grid-3 .contact-form, .contact-grid-3 .contact-info, .contact-map-col { padding:1.2rem; }
  .contact-item { margin-bottom:.9rem; }
  .contact-form h3, .contact-info h2, .contact-info h3, .contact-map-col h3 { margin-bottom:.8rem; }
  .map-container iframe { height:170px; }
  /* "Cuanto cuesta montar una radio": la lista de "incluye" es
     informacion real de precios, no se oculta (a diferencia de las
     tarjetas de Servicios, esta no tiene un modal con el detalle
     completo) — solo se ajustan paddings/margenes. */
  .cost-scenario-card { padding:1.1rem; }
  .cost-scenario-price { font-size:1.25rem; margin-bottom:.7rem; }
  .cost-scenario-card ul { margin-bottom:.9rem; }
  /* "¿Cómo funciona?" (3 pasos) tenia mucho espacio en blanco antes de
     arrancar. */
  .sol-how { margin-top:1.4rem; padding-top:1.4rem; }
}
@media(max-width:480px){
  .products-grid { grid-template-columns:1fr; }
  .hero-content h1 { font-size:1.5rem; }
  .section-header h2 { font-size:1.4rem; }
  .apps-cards { grid-template-columns:1fr; }
  /* Pedido del cliente: 2 tarjetas por fila para acortar el scroll — el
     valor real lo define impact.css (carga despues, !important), esto
     solo lo deja consistente ahi mismo. */
  .services-grid { grid-template-columns:repeat(2,1fr); gap:.8rem; }
  .blog-grid { grid-template-columns:repeat(2,1fr); gap:.8rem; }
  /* Tarjeta de servicio compacta a 2 columnas: sin desc/incluye (el
     detalle completo sigue en el modal "Ver solución"), badge pasa a
     estatico arriba en vez de superpuesto sobre un titulo mas angosto. */
  .service-card { padding:1rem .9rem; }
  .service-badge { position:static; display:inline-block; margin-bottom:.6rem; font-size:.6rem; padding:.18rem .55rem; }
  .service-icon { width:38px; height:38px; font-size:1rem; margin-bottom:.6rem; }
  .service-card h3 { font-size:.82rem; padding-right:0; margin-bottom:.5rem; }
  .service-desc, .service-includes { display:none; }
  .service-foot { flex-direction:column; align-items:flex-start; gap:.55rem; border-top:none; padding-top:0; }
  .service-price { font-size:.9rem; }
  .service-btn-view { width:100%; justify-content:center; font-size:.72rem; padding:.5rem .6rem; }
  /* Tarjeta de blog compacta a 2 columnas */
  .blog-img { height:100px; font-size:2rem; }
  .blog-body { padding:.9rem .8rem; }
  .blog-body h3 { font-size:.82rem; }
  .blog-body p { font-size:.75rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .blog-meta { font-size:.66rem; }
}