/* ============================================================
   TECH FIX — Soluciones Tecnológicas (El Salvador)
   Sistema de diseño v4 (2026-10-04) — vuelve a la identidad oficial de CLAUDE.md:
   azul marino #13294B + azul #2563EB + blanco + #F3F4F6, Poppins (títulos) + Inter
   (texto). Pedido explícito del cliente: "colores acorde a mi logo, azul y blanco".
   Los nombres de variables se mantienen para no romper reglas existentes. */

:root{
  --navy:          #13294B;   /* Primary — marca */
  --navy-deep:     #0C1D36;   /* footer / superficies de máximo contraste */
  --navy-2:        #1D3A63;   /* superficie oscura secundaria / hover de botones navy */

  --bg:            #ffffff;
  --bg-alt:        #F3F4F6;   /* Cards / fondo secundario (CLAUDE.md) */
  --bg-alt-strong: #E5E7EB;
  --bg-blue-100:   var(--bg-alt);
  --bg-blue-150:   var(--bg-alt);
  --bg-blue-200:   var(--bg-alt);
  --icon-tint:     var(--brand-soft);
  --bg-dark:       var(--navy);
  --bg-dark-2:     var(--navy-2);
  --surface:       #ffffff;
  --border:        #E3E6EB;
  --border-strong: #CDD2DA;
  --border-hover:  #A9C3F7;

  --text:          #0F1B33;
  --text-dim:      #4A5872;
  --text-faint:    #67748C;
  --text-brand-strip:#8A97B0;
  --text-on-dark:  #C8D0DC;

  --brand:         #2563EB;   /* Secondary — enlaces, íconos, foco, acentos */
  --brand-secondary:var(--navy);
  --brand-dark:    #1D4ED8;
  --brand-soft:    #E8F0FE;
  --accent-red:    #D43C3C;   /* solo errores */
  --accent-red-soft:#FDECEC;
  --whatsapp:      #22C55E;
  --whatsapp-dark: #16A34A;
  --warning:       #f59e0b;

  --cta-fill:      var(--navy);  /* botón principal = azul marino de marca */
  --cta-fill-hover:var(--navy-2);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-btn: 6px;
  --radius-pill: 999px;   /* solo contadores circulares */

  --shadow-card: 0 1px 2px rgba(11,42,111,.06), 0 4px 14px rgba(11,42,111,.05);
  --shadow-lift: 0 10px 28px rgba(11,42,111,.12);
  --shadow-showcase: var(--shadow-card);
  --shadow-showcase-hover: var(--shadow-lift);
  --shadow-product: none;
  --shadow-product-hover: var(--shadow-lift);
  --shadow-brand: none;

  --ff-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --ff-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --ff-mono: var(--ff-body);

  --container: 1320px;
  --ease: var(--ease-enter);

  /* ---- MOTION TOKENS (MOTION.md) ---- */
  --motion-micro: 150ms;
  --motion-interaction: 220ms;
  --motion-content: 380ms;
  --motion-large: 550ms;

  --ease-standard:   cubic-bezier(.4,0,.2,1);
  --ease-enter:      cubic-bezier(.16,1,.3,1);
  --ease-exit:       cubic-bezier(.4,0,1,1);
  --ease-emphasized: cubic-bezier(.2,0,0,1);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .marquee-track{ animation:none !important; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:120px; }
body{
  margin:0;
  background:var(--bg); /* el degradado vive en .hero/.hero-marquee/.page-hero (altura
    fija y predecible); ponerlo también en body hacía que el segundo resplandor (pensado
    para "abajo del hero") apareciera en un punto al azar de la página según qué tan
    larga fuera — se veía como una mancha rara detrás de secciones sin relación. */
  color:var(--text);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:600; margin:0; letter-spacing:-.005em; color:inherit; }
p{ margin:0; }
ul, ol{ list-style:none; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--brand); color:#fff; }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--motion-content) var(--ease-enter), transform var(--motion-content) var(--ease-enter); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal[data-split]{ opacity:1; transform:none; }
/* Cascada corta y deliberada dentro de una sección (máx. 3-5 elementos, MOTION.md §17) —
   ej. título → texto → CTA. Nunca usar para listas largas o grids de productos. */
.reveal-d1{ transition-delay:.08s; }
.reveal-d2{ transition-delay:.16s; }
.reveal-d3{ transition-delay:.24s; }
.reveal-d4{ transition-delay:.32s; }

.section-head{ max-width:680px; margin:0 auto 36px; text-align:center; padding:0 24px; }
/* Eyebrow de sección: texto con una raya corta de marca, sin "pill" de fondo (CLAUDE.md
   anti-slop: nada de pills innecesarias). */
.section-tag, .eyebrow{
  display:inline-block; font-family:var(--ff-body); font-size:14px; font-weight:600;
  letter-spacing:0; text-transform:none; color:var(--brand); margin-bottom:8px;
}
.section-title{ font-size:clamp(24px,3.2vw,34px); font-weight:600; line-height:1.2; color:var(--navy); letter-spacing:-.005em; }
.section-desc{ margin-top:12px; color:var(--text-dim); font-size:16px; }

/* Encabezado de sección estilo tienda: título a la izquierda, enlace "ver todo" a la derecha */
.shelf-head{
  max-width:var(--container); margin:0 auto 22px; padding:0 24px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.shelf-head .section-tag{ margin-bottom:8px; }
.shelf-head .section-title{ font-size:clamp(22px,2.6vw,28px); }
.shelf-link{
  display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--brand);
  padding:6px 0; border-bottom:1.5px solid transparent;
  transition:border-color var(--motion-micro) var(--ease-standard), color var(--motion-micro) var(--ease-standard);
}
.shelf-link:hover{ color:var(--brand-dark); border-color:currentColor; }

.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; }
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:1000; background:var(--navy); color:#fff;
  padding:10px 16px; border-radius:var(--radius-md); font-weight:600; font-size:14px;
}
.skip-link:focus{ top:12px; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px;
  padding:12px 22px; border-radius:var(--radius-btn); font-family:var(--ff-body); font-weight:600; font-size:15px;
  white-space:nowrap; transition:background var(--motion-micro) var(--ease-standard), border-color var(--motion-micro) var(--ease-standard), color var(--motion-micro) var(--ease-standard);
}
.btn-primary{ background:var(--cta-fill); color:#fff; }
.btn-primary:hover{ background:var(--cta-fill-hover); }
.btn-outline{ border:1.5px solid var(--border-strong); color:var(--navy); }
.btn-outline:hover{ background:var(--bg-alt); border-color:var(--navy); }
.btn-ghost{ color:var(--text-dim); }
.btn-ghost:hover{ color:var(--text); }
.btn-whatsapp{ background:var(--whatsapp); color:#fff; }
.btn-whatsapp:hover{ background:var(--whatsapp-dark); }
.btn-white{ background:#fff; color:var(--navy); }
.btn-white:hover{ background:var(--bg-alt); }
.btn-lg{ padding:14px 28px; font-size:16px; }
.btn-block{ width:100%; }

/* ============ TOP BAR (utilidad — azul marino) ============ */
.top-bar{ background:var(--navy); color:var(--text-on-dark); font-size:12.5px; }
.top-bar-inner{
  max-width:var(--container); margin:0 auto; padding:0 24px; height:36px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.announce{ position:relative; height:18px; flex:1; overflow:hidden; }
.announce-item{
  position:absolute; inset:0; display:flex; align-items:center; gap:8px; white-space:nowrap;
  opacity:0; transform:translateY(6px);
  transition:opacity var(--motion-content) var(--ease-enter), transform var(--motion-content) var(--ease-enter);
}
.announce-item svg{ color:#9FB4E8; flex-shrink:0; }
.announce-item.is-active{ opacity:1; transform:translateY(0); }
.top-bar-links{ display:flex; align-items:center; gap:22px; flex-shrink:0; }
.top-bar-links a, .top-bar-links span{ display:inline-flex; align-items:center; gap:6px; color:var(--text-on-dark); }
.top-bar-links a:hover{ color:#fff; }
.top-bar-links svg{ color:#9FB4E8; }

/* ============ HEADER — tienda de dos niveles (DESIGN-DIRECTION.md §6) ============
   Nivel 1: logo + buscador grande + WhatsApp + carrito.
   Nivel 2: botón "Categorías" (abre las 19 categorías reales) + páginas + acceso empresas. */
.site-header{
  position:sticky; top:0; z-index:500; background:#fff;
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--motion-micro) var(--ease-standard);
}
.site-header.is-scrolled{ box-shadow:0 6px 20px rgba(11,42,111,.08); }
.header-main{ position:relative; z-index:2; background:#fff; }
.header-inner{
  max-width:var(--container); margin:0 auto; padding:0 24px; height:80px;
  display:flex; align-items:center; gap:32px;
}

.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand-mark{
  width:42px; height:42px; border-radius:10px; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.brand-mark svg{ width:26px; height:26px; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--ff-display); font-weight:700; font-size:22px; letter-spacing:-.005em; color:var(--navy); }
.brand-name span{ color:var(--brand); }
.brand-tagline{ font-size:12px; font-weight:500; color:var(--text-faint); margin-top:4px; }

.header-search{
  flex:1; max-width:640px; display:flex; align-items:center; height:48px;
  background:var(--bg-alt); border:1.5px solid var(--border); border-radius:var(--radius-md);
  padding:4px 4px 4px 14px;
  transition:border-color var(--motion-micro) var(--ease-standard), background var(--motion-micro) var(--ease-standard);
}
.header-search:focus-within{ border-color:var(--brand); background:#fff; }
.header-search-icon{ color:var(--text-faint); flex-shrink:0; }
.header-search input{
  flex:1; min-width:0; height:100%; background:none; border:none; outline:none; padding:0 12px;
  font-family:var(--ff-body); font-size:15px; color:var(--text);
}
.header-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.header-search input::placeholder{ color:var(--text-faint); }
.header-search button{
  height:100%; padding:0 20px; border-radius:6px; background:var(--navy); color:#fff;
  font-size:14px; font-weight:600; flex-shrink:0;
  transition:background var(--motion-micro) var(--ease-standard);
}
.header-search button:hover{ background:var(--navy-2); }

.header-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto; }
.header-contact{
  display:flex; align-items:center; gap:10px; padding:6px 12px 6px 6px; border-radius:var(--radius-md);
  transition:background var(--motion-micro) var(--ease-standard);
}
.header-contact:hover{ background:var(--bg-alt); }
.header-contact-icon{
  width:38px; height:38px; border-radius:50%; background:#E8F8EE; color:var(--whatsapp-dark);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.header-contact-text{ display:flex; flex-direction:column; line-height:1.2; }
.header-contact-text small{ font-size:11.5px; color:var(--text-faint); }
.header-contact-text strong{ font-size:14.5px; font-weight:700; color:var(--navy); }

.icon-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-width:44px; height:44px; padding:0 10px; border-radius:var(--radius-md); color:var(--navy);
  position:relative; font-size:14px; font-weight:600;
  transition:background var(--motion-micro) var(--ease-standard), color var(--motion-micro) var(--ease-standard);
}
.icon-btn:hover{ background:var(--bg-alt); }
.cart-btn{ border:1.5px solid var(--border); height:48px; padding:0 14px; }
.cart-btn:hover{ border-color:var(--border-hover); }
.icon-btn .icon-label{ display:none; }
.cart-count{
  min-width:20px; height:20px; padding:0 6px; border-radius:var(--radius-pill);
  background:var(--brand); color:#fff; font-size:11px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--motion-micro) var(--ease-standard), opacity var(--motion-micro) var(--ease-standard);
}
.cart-count[data-zero="true"]{ background:var(--bg-alt-strong); color:var(--text-dim); }

.menu-toggle{ display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; margin-left:-10px; }
.menu-toggle span{ width:20px; height:2px; background:var(--navy); border-radius:2px; }

/* ---- Nivel 2: barra de navegación ---- */
.header-nav-bar{ border-top:1px solid var(--border); background:#fff; position:relative; }
.header-nav-inner{
  max-width:var(--container); margin:0 auto; padding:0 24px; height:50px;
  display:flex; align-items:stretch; gap:28px;
}
.cat-menu{ display:flex; align-items:stretch; }
.categories-toggle{
  display:flex; align-items:center; gap:10px; padding:0 18px; margin:7px 0;
  background:var(--navy); color:#fff; border-radius:var(--radius-md); font-size:14px; font-weight:600;
  transition:background var(--motion-micro) var(--ease-standard);
}
.categories-toggle:hover, .categories-toggle[aria-expanded="true"]{ background:var(--navy-2); }
.categories-toggle .caret{ transition:transform var(--motion-interaction) var(--ease-standard); }
.categories-toggle[aria-expanded="true"] .caret{ transform:rotate(180deg); }

.header-nav{ display:flex; align-items:stretch; gap:4px; }
.header-nav-link{
  display:flex; align-items:center; padding:0 12px; font-size:14.5px; font-weight:500; color:var(--text-dim);
  position:relative; white-space:nowrap;
  transition:color var(--motion-micro) var(--ease-standard);
}
.header-nav-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--brand);
  transform:scaleX(0); transform-origin:left; transition:transform var(--motion-interaction) var(--ease-standard);
}
.header-nav-link:hover{ color:var(--navy); }
.header-nav-link:hover::after{ transform:scaleX(1); }
.header-nav-link[aria-current="page"]{ color:var(--navy); font-weight:600; }
.header-nav-link[aria-current="page"]::after{ transform:scaleX(1); }
.header-nav-aside{
  margin-left:auto; display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--brand);
}
.header-nav-aside:hover{ color:var(--brand-dark); }

/* ---- Panel de categorías (renderHeaderCategories) ---- */
.category-panel{
  position:absolute; left:0; right:0; top:100%; z-index:20;
  background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  box-shadow:0 18px 30px rgba(11,42,111,.10);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--motion-micro) var(--ease-exit), transform var(--motion-micro) var(--ease-exit), visibility 0s linear var(--motion-micro);
}
.category-panel.is-open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity var(--motion-interaction) var(--ease-enter), transform var(--motion-interaction) var(--ease-enter), visibility 0s;
}
.category-panel-inner{
  max-width:var(--container); margin:0 auto; padding:20px 24px 24px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:2px 16px;
}
.category-panel-item{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-md);
  font-size:14px; font-weight:500; color:var(--text);
  transition:background var(--motion-micro) var(--ease-standard), color var(--motion-micro) var(--ease-standard);
}
.category-panel-item > span:first-child{
  width:34px; height:34px; border-radius:var(--radius-md); background:var(--bg-alt); color:var(--brand);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.category-panel-item svg{ width:19px; height:19px; }
.category-panel-item:hover{ background:var(--bg-alt); color:var(--navy); }
.category-panel-all{
  grid-column:1 / -1; margin-top:10px; padding-top:14px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; font-size:13.5px; color:var(--text-dim);
}
.category-panel-all a{ font-weight:600; color:var(--brand); }

/* ---- Panel del menú móvil (sigue llamándose category-strip por main.js) ---- */
.category-strip{ display:none; }
.mobile-page-nav{ display:flex; flex-direction:column; }

/* ============ HERO — banner comercial + 2 accesos de categoría ============
   Composición de tienda (no "texto izquierda + imagen derecha" genérico): un banner
   principal azul marino con el mensaje de marca y fotos reales de producto, y a la
   derecha dos accesos directos a categorías clave para negocios (energía, seguridad). */
.hero{ padding:20px 24px 0; background:#fff; }
.hero-inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:16px;
}
.hero-main{
  position:relative; overflow:hidden; border-radius:var(--radius-xl);
  background:var(--navy); color:#fff; min-height:460px;
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:stretch;
}
.hero-content{ position:relative; z-index:1; padding:44px 8px 36px 44px; display:flex; flex-direction:column; }
.hero .eyebrow{ color:#B9C3D3; }
.hero-title{
  font-family:var(--ff-display); font-weight:700; letter-spacing:-.005em;
  font-size:clamp(32px,3.6vw,48px); line-height:1.08; color:#fff;
}
.hero-title span{ display:block; }
.hero-accent{ color:inherit; }
.hero-sub{ margin-top:18px; max-width:440px; font-size:16px; line-height:1.6; color:#C8D0DC; }
.hero-actions{ display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; }
.hero-stats{
  display:flex; gap:0; margin-top:auto; padding-top:32px;
}
.hero-stats div{ padding-right:22px; margin-right:22px; border-right:1px solid rgba(255,255,255,.16); }
.hero-stats div:last-child{ border-right:none; margin-right:0; padding-right:0; }
.hero-stats strong{ display:block; font-family:var(--ff-display); font-size:24px; font-weight:600; color:#fff; letter-spacing:-.005em; }
.hero-stats span{ display:block; font-size:12.5px; color:#A7B2C4; margin-top:2px; white-space:nowrap; }

.hero-visual{ position:relative; z-index:1; min-height:300px; }
.hero-visual img{ position:absolute; height:auto; filter:drop-shadow(0 24px 30px rgba(0,0,0,.35)); }
.hero-visual .hv-monitor{ width:96%; right:-6%; top:9%; }
.hero-visual .hv-laptop{ width:84%; left:-14%; bottom:5%; }

.hero-side{ display:grid; grid-template-rows:1fr 1fr; gap:16px; }
.hero-tile{
  position:relative; overflow:hidden; border-radius:var(--radius-xl); background:var(--bg-alt);
  padding:24px; display:flex; flex-direction:column; align-items:flex-start;
  border:1px solid transparent;
  transition:border-color var(--motion-interaction) var(--ease-standard);
}
.hero-tile:hover{ border-color:var(--border-hover); }
.hero-tile-cat{ font-size:13.5px; font-weight:600; color:var(--brand); }
.hero-tile h2{ font-family:var(--ff-display); font-size:20px; font-weight:600; line-height:1.25; color:var(--navy); margin-top:6px; max-width:58%; }
.hero-tile p{ font-size:13.5px; color:var(--text-dim); margin-top:6px; max-width:55%; line-height:1.5; }
.hero-tile-link{
  margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; color:var(--navy);
}
.hero-tile-link svg{ transition:transform var(--motion-interaction) var(--ease-standard); }
.hero-tile:hover .hero-tile-link svg{ transform:translateX(3px); }
.hero-tile img{
  position:absolute; right:-4%; bottom:-6%; width:50%; height:auto;
  transition:transform var(--motion-content) var(--ease-standard);
}
.hero-tile:hover img{ transform:scale(1.03); }

/* ============ TRUST STRIP (debajo del hero) ============ */
.trust-strip{ padding:16px 24px 0; }
.trust-strip-inner{
  max-width:var(--container); margin:0 auto; border:1px solid var(--border); border-radius:var(--radius-xl);
  display:grid; grid-template-columns:repeat(4, 1fr);
}
.trust-item{ display:flex; align-items:center; gap:14px; padding:18px 22px; }
.trust-item + .trust-item{ border-left:1px solid var(--border); }
.trust-item svg{ color:var(--brand); flex-shrink:0; }
.trust-item strong{ display:block; font-size:14px; font-weight:600; color:var(--navy); }
.trust-item span{ display:block; font-size:12.5px; color:var(--text-faint); margin-top:1px; }

/* ============ HOME — Compra por categoría ============
   Retícula densa con foto real de producto por categoría (renderHomeCategories).
   Todas las categorías a la vista, sin scroll horizontal (pedido del cliente). */
.home-section{ padding:64px 0 0; }
.home-cats{
  max-width:var(--container); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px;
}
.home-cat{
  display:flex; align-items:center; gap:14px; padding:12px 14px 12px 12px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  transition:border-color var(--motion-interaction) var(--ease-standard), background var(--motion-interaction) var(--ease-standard);
}
.home-cat:hover{ border-color:var(--border-hover); background:var(--bg-alt); }
.home-cat-media{
  width:60px; height:60px; border-radius:var(--radius-md); background:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.home-cat-media img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.home-cat-text{ min-width:0; display:flex; flex-direction:column; }
.home-cat-name{ font-size:14px; font-weight:600; color:var(--navy); line-height:1.3; }
.home-cat-count{ font-size:12.5px; color:var(--text-faint); margin-top:3px; }
.home-cat--all{ background:var(--navy); border-color:var(--navy); }
.home-cat--all:hover{ background:var(--navy-2); border-color:var(--navy-2); }
.home-cat--all .home-cat-media{ background:rgba(255,255,255,.1); color:#fff; }
.home-cat--all .home-cat-name{ color:#fff; }
.home-cat--all .home-cat-count{ color:#A7B2C4; }

/* ============ HOME — Productos destacados (banda #F3F4F6) ============ */
.shelf-band{ background:var(--bg-alt); margin-top:64px; padding:56px 0 64px; }
.shelf-band .product-grid{ max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ============ HOME — Empresas (banda azul marino) ============ */
.biz-band{ background:var(--navy); color:#fff; padding:72px 24px; }
.biz-inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:start;
}
.biz-copy .section-tag{ color:#B9C3D3; }
.biz-copy h2{ font-family:var(--ff-display); font-size:clamp(26px,3vw,36px); font-weight:600; line-height:1.15; letter-spacing:-.005em; }
.biz-copy > p{ margin-top:16px; color:#C8D0DC; font-size:16px; line-height:1.65; max-width:46ch; }
.biz-points{ margin:24px 0 30px; display:flex; flex-direction:column; gap:10px; }
.biz-points li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:#E3EAF9; }
.biz-points svg{ color:#B9C3D3; flex-shrink:0; }
.biz-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn-outline-light{ border:1.5px solid rgba(255,255,255,.35); color:#fff; }
.btn-outline-light:hover{ background:rgba(255,255,255,.08); border-color:#fff; }

.biz-list{ border-top:1px solid rgba(255,255,255,.14); }
.biz-list li{ border-bottom:1px solid rgba(255,255,255,.14); }
.biz-list a{
  display:grid; grid-template-columns:44px minmax(0,1fr) 20px; gap:16px; align-items:center; padding:20px 4px;
  transition:background var(--motion-interaction) var(--ease-standard), padding var(--motion-interaction) var(--ease-standard);
}
.biz-list a:hover{ background:rgba(255,255,255,.04); padding-left:12px; }
.biz-num{ font-family:var(--ff-display); font-size:14px; font-weight:500; color:#B9C3D3; }
.biz-list h3{ font-family:var(--ff-display); font-size:17px; font-weight:600; color:#fff; }
.biz-list p{ font-size:13.5px; color:#A7B2C4; margin-top:3px; }
.biz-list .arrow{ color:#B9C3D3; transition:transform var(--motion-interaction) var(--ease-standard); }
.biz-list a:hover .arrow{ transform:translateX(3px); }

/* ============ HOME — Marcas ============ */
.brands-row{ padding:28px 24px; border-bottom:1px solid var(--border); }
.brands-row-inner{ max-width:var(--container); margin:0 auto; display:flex; align-items:center; gap:32px; }
.brands-row .hero-marquee-label{ margin:0; flex-shrink:0; }
.brands-row .marquee-viewport{ flex:1; min-width:0; margin:0; }

/* ============ HOME — Sobre Tech Fix + contacto ============ */
.about-contact{ padding:72px 24px; }
.about-contact-inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:start;
}
.about-contact-copy > p{ color:var(--text-dim); font-size:16px; line-height:1.65; margin:16px 0 22px; max-width:56ch; }
.check-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.check-list li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--text); }
.check-list svg{ color:var(--brand); flex-shrink:0; margin-top:3px; }
.contact-card{ background:var(--bg-alt); border-radius:var(--radius-xl); padding:28px; }
.contact-card h3{ font-family:var(--ff-display); font-size:20px; font-weight:600; color:var(--navy); }
.contact-card > p{ font-size:14px; color:var(--text-dim); margin-top:6px; }
.contact-rows{ margin:20px 0 22px; border-top:1px solid var(--border); }
.contact-rows li{ display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--border); }
.contact-rows svg{ color:var(--brand); flex-shrink:0; }
.contact-rows small{ display:block; font-size:12px; color:var(--text-faint); }
.contact-rows strong, .contact-rows a{ font-size:14.5px; font-weight:600; color:var(--navy); }
.contact-rows a:hover{ color:var(--brand); }

/* ============ STATS BAR ============ */
.stats-bar{ background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stats-bar-inner{ max-width:1280px; margin:0 auto; padding:32px 24px; display:flex; justify-content:center; }
.stat-block{ flex:0 1 220px; text-align:center; padding:0 32px; }
.stat-block + .stat-block{ border-left:1px solid var(--border); }
.stat-block strong{ display:block; font-family:var(--ff-display); font-weight:800; font-size:30px; color:var(--brand); letter-spacing:-.005em; }
.stat-block span{ display:block; margin-top:4px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; color:var(--text-dim); }

/* ============ BRAND MARQUEE ============ */
.hero-marquee{ background:var(--bg); padding:24px 24px 28px; }
.hero-marquee-label{
  display:block; max-width:1280px; margin:0 auto 14px; font-size:14px; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--text-faint);
}
.marquee-viewport{
  max-width:1280px; margin:0 auto; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{ display:flex; align-items:center; gap:48px; width:max-content; animation:marqueeScroll 28s linear infinite; }
.marquee-track span{
  font-family:var(--ff-display); font-weight:700; font-size:15px; color:var(--text-brand-strip); white-space:nowrap; opacity:.8;
}
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ============ FEATURE BAR (franja de confianza en páginas internas) ============ */
.feature-bar{ padding:0 24px; margin:56px 0 0; }
.feature-bar-inner{
  max-width:var(--container); margin:0 auto; border:1px solid var(--border); border-radius:var(--radius-xl);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.feature-item{ display:flex; align-items:center; gap:14px; padding:18px 22px; }
.feature-item + .feature-item{ border-left:1px solid var(--border); }
.feature-icon{ color:var(--brand); display:flex; flex-shrink:0; }
.feature-item h4{ font-family:var(--ff-body); font-size:14px; font-weight:600; color:var(--navy); }
.feature-item p{ font-size:12.5px; color:var(--text-faint); margin-top:1px; }

/* ============ HOW SECTION ============ */
.how-section{ padding:80px 24px; max-width:1200px; margin:0 auto; }
.how-steps{ display:flex; align-items:flex-start; justify-content:center; gap:0; max-width:1100px; margin:0 auto; }
.how-step{ flex:1; max-width:300px; text-align:center; padding:0 16px; }
.how-num{ font-family:var(--ff-mono); font-size:13px; color:var(--brand); font-weight:500; letter-spacing:.06em; margin-bottom:16px; }
.how-icon{
  width:64px; height:64px; margin:0 auto 18px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-soft); color:var(--brand);
}
.how-step h3{ font-size:18px; margin-bottom:8px; color:var(--text); }
.how-step p{ color:var(--text-dim); font-size:14px; }
.how-connector{ flex:0 0 60px; height:2px; background:repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 12px); margin-top:32px; align-self:flex-start; }

/* ============ EXPLORA TECH FIX — resumen/navegación (home, 2026-08-24) ============ */
.explore-section{ max-width:1320px; margin:0 auto; padding:80px 24px 16px; }
.explore-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.explore-card{
  display:flex; flex-direction:column; gap:8px; padding:24px; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  transition:border-color var(--motion-interaction) var(--ease-standard), box-shadow var(--motion-interaction) var(--ease-standard), transform var(--motion-interaction) var(--ease-standard);
}
.explore-card:hover, .explore-card:focus-visible{
  border-color:var(--border-hover); box-shadow:var(--shadow-card); transform:translateY(-2px);
}
.explore-card-icon{
  width:44px; height:44px; margin-bottom:6px; border-radius:50%; background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.explore-card h3{ font-family:var(--ff-display); font-size:17px; font-weight:700; color:var(--text); }
.explore-card p{ font-size:13.5px; line-height:1.55; color:var(--text-dim); flex:1; }
.explore-card-link{
  display:inline-flex; align-items:center; gap:5px; margin-top:2px;
  font-family:var(--ff-body); font-size:13px; font-weight:600; color:var(--brand);
  transition:color var(--motion-interaction) var(--ease-standard);
}
.explore-card-link svg{ transition:transform var(--motion-interaction) var(--ease-standard); }
.explore-card:hover .explore-card-link, .explore-card:focus-visible .explore-card-link{ color:var(--brand-dark); }
.explore-card:hover .explore-card-link svg, .explore-card:focus-visible .explore-card-link svg{ transform:translateX(3px); }

/* ============ CATEGORY TILES (Sprylo round-tile pattern) ============ */
.categories-section{ padding:56px 24px; max-width:1320px; margin:0 auto; }
.category-tiles{ display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; }
.category-tile{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 14px;
  transition:transform var(--motion-interaction) var(--ease-standard), box-shadow var(--motion-interaction) var(--ease-standard), background var(--motion-interaction) var(--ease-standard), border-color var(--motion-interaction) var(--ease-standard);
}
.category-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); background:var(--brand-soft); border-color:var(--border-hover); }
.category-tile-pic{
  width:84px; height:84px; margin-bottom:14px; background:var(--bg-alt); border-radius:999px;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.category-tile-pic img{ width:100%; height:100%; object-fit:cover; transition:transform var(--motion-interaction) var(--ease-standard); }
.category-tile:hover .category-tile-pic img{ transform:scale(1.06); }
.category-tile h3{ font-family:var(--ff-display); font-size:13.5px; font-weight:700; color:var(--text); }
.category-tile-count{ font-family:var(--ff-mono); font-size:11px; color:var(--text-faint); margin-top:4px; }

/* ============ CATALOG ============ */
.catalog-section{
  padding:20px 24px 90px; max-width:1320px; margin:0 auto; border-radius:var(--radius-xl);
  background:var(--bg-alt);
}
.catalog-section-pad{ padding-top:50px; }
.catalog-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px;
}
.filter-select{
  background:#fff; border:1px solid var(--border); color:var(--text); font-size:13.5px;
  padding:10px 14px; border-radius:var(--radius-sm); font-family:inherit; outline:none; transition:border-color .2s;
}
.filter-select:hover, .filter-select:focus{ border-color:var(--brand); }

/* ============ CATEGORY SIDEBAR + SUBCATEGORY GALLERY (catalogo.html) ============
   Classic two-pane category browser: sticky sidebar on the left lists every
   category (scrolls internally if needed), picking one shows its
   subcategories as image cards on the right. */
.catalog-layout{
  max-width:1320px; margin:0 auto; padding:26px 24px 90px;
  display:grid; grid-template-columns:270px 1fr; gap:28px; align-items:start;
}
.cat-sidebar{
  position:sticky; top:150px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  max-height:calc(100vh - 180px); overflow-y:auto;
}
.cat-sidebar-list{ display:flex; flex-direction:column; padding:8px; }
.cat-sidebar-item{
  display:flex; align-items:center; gap:10px; padding:11px 10px; border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:600; color:var(--text); text-align:left; transition:background .2s, color .2s;
}
.cat-sidebar-item:hover{ background:var(--bg-alt); }
.cat-sidebar-item.is-active{ background:var(--brand-soft); color:var(--brand); }
.cat-sidebar-icon{ width:22px; height:22px; color:var(--brand); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
/* Filtro de categoría en mobile: el sidebar de 21 categorías se ve bien en desktop
   pero satura la pantalla en celular (por eso antes se convertía en una fila de
   botones envueltos). En mobile se oculta el sidebar entero y aparece este <select>
   nativo en su lugar — un solo control desplegable, sin saturar. */
.catalog-mobile-filter{ display:none; }
.cat-sidebar-icon svg{ width:18px; height:18px; }
.cat-sidebar-name{ flex:1; line-height:1.3; }
.cat-sidebar-caret{ flex-shrink:0; color:var(--text-faint); }
.cat-sidebar-item.is-active .cat-sidebar-caret{ color:var(--brand); }

.catalog-main{ min-width:0; }
.subcat-gallery{ margin-bottom:30px; }
.subcat-gallery[hidden]{ display:none; }
.subcat-gallery-title{ font-family:var(--ff-display); font-size:17px; color:var(--text); margin-bottom:14px; }
.subcat-gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:14px; }
.subcat-tile{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:16px 10px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); transition:all .2s var(--ease);
}
.subcat-tile:hover{ border-color:var(--brand); transform:translateY(-3px); box-shadow:var(--shadow-card); }
.subcat-tile.is-active{ border-color:var(--brand); background:var(--brand-soft); }
.subcat-tile-media{ width:72px; height:72px; display:flex; align-items:center; justify-content:center; }
.subcat-tile-media img{ width:100%; height:100%; object-fit:contain; }
.subcat-tile-name{ font-size:13px; font-weight:700; color:var(--text); }
.subcat-tile-price{ font-size:11.5px; color:var(--text-faint); }

.product-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.product-card{
  position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-product);
  transition:transform var(--motion-interaction) var(--ease-standard), box-shadow var(--motion-interaction) var(--ease-standard), border-color var(--motion-interaction) var(--ease-standard);
}
.product-card.reveal{ opacity:0; transform:translateY(24px); }
.product-card.reveal.is-visible{ opacity:1; transform:translateY(0); }
.product-card:hover{ box-shadow:var(--shadow-product-hover); border-color:var(--border-hover); }
.product-media{ position:relative; aspect-ratio:1/1; background:var(--surface); display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden; }
.product-media img{ width:100%; height:100%; object-fit:contain; transition:transform var(--motion-interaction) var(--ease-standard); }
.product-card:hover .product-media img{ transform:scale(1.03); }
.product-badge{
  position:absolute; top:12px; left:12px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 8px; border-radius:4px; background:var(--brand-soft); color:var(--navy);
}
.product-quickadd{
  position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:var(--radius-md);
  background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(8px) scale(.9); transition:all var(--motion-interaction) var(--ease-standard);
  z-index:2;
}
.product-card:hover .product-quickadd{ opacity:1; transform:translateY(0) scale(1); }
.product-quickadd:hover{ background:var(--navy-2); }
.product-quickadd:focus-visible{ opacity:1; transform:none; }
@media (hover:none){ .product-quickadd{ opacity:1; transform:none; } }
.product-info{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:5px; flex:1; border-top:1px solid var(--border); }
.product-brand{ font-size:12.5px; font-weight:600; color:var(--text-dim); }
.product-name{ font-family:var(--ff-body); font-size:14.5px; font-weight:600; line-height:1.35; color:var(--text); }
.product-sub{ font-size:12.5px; color:var(--text-faint); line-height:1.4; }
.product-stock{ display:inline-flex; align-items:center; gap:5px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.04em; color:var(--text-faint); margin-top:2px; }
.product-stock .dot{ width:6px; height:6px; border-radius:999px; background:var(--whatsapp-dark); flex-shrink:0; }
.product-rating{ display:inline-flex; align-items:center; gap:5px; color:#f59e0b; font-size:12px; letter-spacing:1px; margin-top:2px; }
.product-price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.product-price{ font-family:var(--ff-display); font-size:18px; font-weight:600; color:var(--navy); }
.product-cta{ font-size:12.5px; font-weight:600; color:var(--brand); }

/* Variante compacta — vista rápida de productos en el home (imágenes más chicas,
   más columnas, se quita info secundaria para que la tarjeta respire igual). */
.product-grid--compact{ grid-template-columns:repeat(6, 1fr); gap:14px; }
.product-grid--compact .product-media{ padding:12px; }
.product-grid--compact .product-info{ padding:10px 12px 12px; gap:3px; }
.product-grid--compact .product-name{ font-size:13.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; }
.product-grid--compact .product-sub{ display:none; }
/* En "Los más pedidos" todas llevarían la misma etiqueta — se oculta para no repetir ruido */
.product-grid--compact .product-badge{ display:none; }
.product-grid--compact .product-price{ font-size:16.5px; }
@media (max-width:1080px){ .product-grid--compact{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:520px){ .product-grid--compact{ grid-template-columns:repeat(2, 1fr); } }

.empty-state[hidden]{ display:none; }
.empty-state{ text-align:center; padding:80px 20px; color:var(--text-dim); display:flex; flex-direction:column; gap:16px; align-items:center; }
.load-more-wrap{ display:flex; justify-content:center; margin-top:40px; }

/* ============ CTA BANNER ============ */
.cta-banner{ padding:0 24px; max-width:1320px; margin:60px auto; }
/* Tarjeta blanca elevada sobre el fondo --bg (F8FAFC) — sistema v3: tarjeta = blanco,
   fondo de página = gris muy claro, nunca el mismo tono para que el panel se lea como
   una superficie propia, con sombra suave en vez de un bloque de color sólido. */
.cta-banner-inner{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
  padding:48px 52px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-banner-inner h2{ font-size:25px; margin-bottom:8px; color:var(--text); }
.cta-banner-inner p{ color:var(--text-dim); max-width:440px; }

/* Variante con fotografía — solo para la página de Servicios (SERVICES-DESIGN-DIRECTION.md §12).
   No se toca .cta-banner-inner base: catalogo.html usa la versión simple sin foto. */
.cta-banner-inner--photo{
  padding:0; min-height:300px; align-items:stretch; justify-content:flex-start; flex-wrap:nowrap;
}
.cta-banner-copy{ flex:1 1 55%; padding:56px 64px; display:flex; flex-direction:column; justify-content:center; }
.cta-banner-copy h2{ font-size:28px; }
.cta-banner-copy p{ max-width:440px; }
.cta-banner-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.cta-banner-photo{ flex:0 0 40%; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; }
.cta-banner-photo img{ width:100%; height:100%; object-fit:contain; padding:32px; box-sizing:border-box; display:block; }

/* ============ PROMO DUO ============ */
.promo-duo{
  max-width:1320px; margin:60px auto; padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:24px;
  background:var(--bg-blue-150);
}
.promo-card{ border-radius:var(--radius-xl); padding:40px; display:flex; flex-direction:column; align-items:flex-start; }
.promo-tag{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.10em; text-transform:uppercase;
  padding:6px 14px; border-radius:var(--radius-pill); margin-bottom:16px;
}
.promo-card h2{ font-size:26px; line-height:1.25; margin-bottom:10px; }
.promo-card p{ font-size:14.5px; margin-bottom:26px; max-width:380px; }
.promo-card .btn{ margin-top:auto; }
.promo-card-brand{ background:var(--brand); }
.promo-card-brand .promo-tag{ background:rgba(255,255,255,.22); color:#fff; }
.promo-card-brand h2, .promo-card-brand p{ color:#fff; }
.promo-card-brand p{ color:rgba(255,255,255,.85); }
.promo-card-brand .btn{ background:#fff; color:var(--brand-dark); }
.promo-card-brand .btn:hover{ background:var(--brand-soft); }
.promo-card-dark{ background:var(--bg-dark); }
.promo-card-dark .promo-tag{ background:rgba(255,255,255,.1); color:var(--brand); }
.promo-card-dark h2, .promo-card-dark p{ color:#fff; }
.promo-card-dark p{ color:rgba(255,255,255,.65); }
.btn-outline-light{ border:2px solid rgba(255,255,255,.35); color:#fff; }
.btn-outline-light:hover{ background:rgba(255,255,255,.1); border-color:#fff; }

/* ============ TRUST ============ */
.trust-section{ padding:80px 24px; max-width:1320px; margin:0 auto; }
.trust-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.trust-copy p{ color:var(--text-dim); margin:16px 0 24px; font-size:15.5px; }
.trust-list{ display:flex; flex-direction:column; gap:13px; }
.trust-list li{ display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--text); }
.trust-list svg{ color:var(--brand); flex-shrink:0; background:var(--brand-soft); border-radius:50%; padding:4px; width:24px; height:24px; box-sizing:border-box; }
.trust-visual{ position:relative; height:340px; }
.trust-card{
  position:absolute; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px 26px; display:flex; flex-direction:column; gap:4px; box-shadow:var(--shadow-lift);
}
.trust-card-label{ font-size:11.5px; color:var(--text-faint); }
.trust-card strong{ font-family:var(--ff-body); font-weight:700; font-size:24px; color:var(--brand); }
.card-1{ top:14%; left:6%; }
.card-2{ bottom:12%; right:4%; }

/* ============ SERVICIOS (resumen home) ============ */
.services-summary{ padding:76px 24px; max-width:1320px; margin:0 auto; }
.services-summary-inner{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.services-summary-copy p{ color:var(--text-dim); margin:16px 0 26px; font-size:15.5px; max-width:420px; }
.services-summary-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.services-summary-list{ display:flex; flex-direction:column; }
.services-summary-list li{ display:flex; align-items:flex-start; gap:16px; padding:16px 0; border-bottom:1px solid var(--border); }
.services-summary-list li:first-child{ padding-top:0; }
.services-summary-list li:last-child{ border-bottom:none; }
.services-summary-icon{
  flex-shrink:0; width:38px; height:38px; border-radius:10px; background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.services-summary-list h3{ font-family:var(--ff-display); font-size:15px; font-weight:700; color:var(--text); margin-bottom:3px; }
.services-summary-list p{ font-size:13px; color:var(--text-dim); }

/* ============ FOOTER ============ */
.site-footer{ background:var(--navy-deep); color:var(--text-on-dark); padding:64px 24px 0; }
.footer-top{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; padding-bottom:48px; }
.footer-brand .brand-mark{ background:#fff; color:var(--navy); }
.footer-brand .brand-name{ color:#fff; }
.footer-brand .brand-name span{ color:#B9C3D3; }
.footer-brand .brand-tagline{ color:#8C97AB; }
.footer-brand p{ color:#A7B2C4; font-size:14px; line-height:1.6; margin:18px 0 22px; max-width:300px; }
.footer-col h4{ font-family:var(--ff-display); font-size:16px; font-weight:600; color:#fff; margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col li{ font-size:14px; color:#A7B2C4; }
.footer-col a{ transition:color var(--motion-micro) var(--ease-standard); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:22px 0; max-width:var(--container); margin:0 auto; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-bottom p{ font-size:12.5px; color:#8C97AB; }

/* ============ SHARED OVERLAYS (cart drawer backdrop) ============ */
.cart-backdrop{
  position:fixed; inset:0; background:rgba(20,20,20,.55); backdrop-filter:blur(3px); z-index:900;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.cart-backdrop.is-open{ opacity:1; visibility:visible; }

.qty-stepper{ display:flex; align-items:center; border:1px solid var(--border-strong); border-radius:var(--radius-sm); }
.qty-stepper button{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:18px; }
.qty-stepper button:hover{ color:var(--brand); }
.qty-stepper span{ min-width:32px; text-align:center; font-weight:700; }

/* ============ CART DRAWER ============ */
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px, 100vw); z-index:902;
  background:#fff; border-left:1px solid var(--border);
  display:flex; flex-direction:column; transform:translateX(100%); transition:transform .35s var(--ease);
  box-shadow:-20px 0 50px rgba(0,0,0,.15);
}
.cart-drawer.is-open{ transform:translateX(0); }
.cart-header{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--border); }
.cart-header h3{ font-size:18px; color:var(--text); }
.cart-items{ flex:1; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column; gap:12px; }
.cart-item{ display:flex; gap:12px; background:var(--bg-alt); border-radius:var(--radius-md); padding:12px; }
.cart-item-media{ width:60px; height:60px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:6px; }
.cart-item-media img{ width:100%; height:100%; object-fit:contain; }
.cart-item-info{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.cart-item-name{ font-size:13px; font-weight:700; line-height:1.3; color:var(--text); }
.cart-item-price{ font-size:12px; color:var(--text-faint); }
.cart-item-row{ display:flex; align-items:center; justify-content:space-between; margin-top:5px; }
.cart-item-qty{ display:flex; align-items:center; gap:8px; }
.cart-item-qty button{ width:23px; height:23px; border-radius:100px; background:#fff; border:1px solid var(--border-strong); color:var(--text-dim); display:flex; align-items:center; justify-content:center; font-size:13px; }
.cart-item-qty button:hover{ color:var(--brand); border-color:var(--brand); }
.cart-item-remove{ color:var(--text-faint); font-size:11.5px; font-weight:600; }
.cart-item-remove:hover{ color:var(--accent-red); }
.cart-empty{ flex:1; display:none; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--text-faint); padding:40px; text-align:center; }
.cart-empty p{ color:var(--text); font-weight:700; }
.cart-empty span{ font-size:13px; }
.cart-footer{ padding:18px 22px 24px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:12px; }
.cart-subtotal{ display:flex; align-items:center; justify-content:space-between; font-size:15px; color:var(--text); }
.cart-subtotal strong{ font-family:var(--ff-display); font-weight:600; font-size:21px; color:var(--navy); }
.cart-note{ font-family:var(--ff-mono); font-size:11px; color:var(--text-faint); margin-bottom:2px; }

/* ============ FAB CART ============ */
.fab-cart{
  position:fixed; bottom:26px; right:26px; z-index:400; width:58px; height:58px; border-radius:100px;
  background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(11,42,111,.28);
  transition:transform var(--motion-micro) var(--ease-standard), box-shadow var(--motion-interaction) var(--ease-standard);
}
.fab-cart:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,23,42,.22); }
.fab-cart.is-confirming{ transform:scale(1.08); }
.fab-cart-count{
  position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 5px; border-radius:100px;
  background:var(--brand); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}

/* ============ TOAST ============ */
.toast{
  position:fixed; bottom:100px; right:26px; z-index:950; background:var(--bg-dark);
  color:#fff; padding:14px 20px; border-radius:var(--radius-md); font-size:13.5px; font-weight:600;
  box-shadow:var(--shadow-lift); transform:translateY(16px); opacity:0; pointer-events:none; transition:all .3s var(--ease);
  display:flex; align-items:center; gap:10px;
}
.toast.is-visible{ transform:translateY(0); opacity:1; }

/* ============ B2B — Soluciones para empresas (DESIGN-DIRECTION.md §14) ============
   Tratamiento visual deliberadamente distinto (fondo oscuro) para diferenciarlo de las
   secciones de consumo — mismo contenido de servicios que antes vivía en 6 tarjetas,
   ahora condensado en una composición de dos columnas más corporativa. */
.b2b-section{ background:var(--bg-dark); padding:76px 24px; }
.b2b-grid{
  max-width:1320px; margin:0 auto; display:grid; grid-template-columns:1fr .9fr; gap:56px; align-items:center;
}
.b2b-copy .section-tag{ color:#B9C3D3; }
.b2b-copy h2{ font-family:var(--ff-display); font-size:clamp(24px,3vw,32px); color:#fff; margin-bottom:14px; line-height:1.2; }
.b2b-copy > p{ color:rgba(255,255,255,.68); font-size:15.5px; line-height:1.6; margin-bottom:24px; max-width:52ch; }
.b2b-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; margin-bottom:30px; }
.b2b-list li{ display:flex; align-items:center; gap:9px; font-size:14px; color:rgba(255,255,255,.88); }
.b2b-list li svg{ color:var(--brand); flex-shrink:0; }
.b2b-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.b2b-actions .btn-outline{ border-color:rgba(255,255,255,.28); color:#fff; }
.b2b-actions .btn-outline:hover{ background:rgba(255,255,255,.08); border-color:#fff; }
.b2b-visual{
  position:relative; aspect-ratio:4/5; background:var(--bg-dark-2); border-radius:var(--radius-xl);
  display:flex; align-items:center; justify-content:center; padding:36px; overflow:hidden;
}
.b2b-visual img{ max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 20px 30px rgba(0,0,0,.5)); }

/* ============ EDITORIAL — Ideas para tu setup (DESIGN-DIRECTION.md §13) ============ */
.editorial-section{ padding:80px 24px; max-width:1320px; margin:0 auto; }
.editorial-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; grid-auto-rows:220px; gap:14px; }
.editorial-tile{
  position:relative; grid-row:1 / 3; border-radius:var(--radius-lg); overflow:hidden; display:block;
  transition:transform var(--motion-interaction) var(--ease-standard);
}
.editorial-tile:nth-child(n+2){ grid-row:auto; }
.editorial-tile:first-child{ grid-row:1 / 3; }
.editorial-tile:hover{ transform:translateY(-3px); }
.editorial-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--motion-content) var(--ease-standard);
}
.editorial-tile:hover img{ transform:scale(1.04); }
.editorial-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(17,17,17,.78) 0%, rgba(17,17,17,.05) 55%, transparent 100%);
}
.editorial-tile-body{ position:absolute; left:0; right:0; bottom:0; padding:16px 18px; z-index:1; }
.editorial-tile-cat{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.editorial-tile h3{ font-family:var(--ff-display); font-size:16px; font-weight:700; color:#fff; margin-top:3px; }
.editorial-tile .arrow{ display:inline-flex; margin-top:6px; color:#fff; opacity:.9; transition:transform .2s var(--ease); }
.editorial-tile:hover .arrow{ transform:translateX(4px); }

/* ============ NEWSLETTER ============ */
.newsletter-section{ padding:0 24px 72px; }
.newsletter-inner{
  max-width:var(--container); margin:0 auto; padding:30px 36px; border:1px solid var(--border); border-radius:var(--radius-xl);
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.newsletter-copy h2{ font-family:var(--ff-display); font-size:20px; font-weight:600; color:var(--navy); margin-bottom:4px; }
.newsletter-copy p{ color:var(--text-dim); font-size:14.5px; max-width:52ch; }
.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0; }
.newsletter-form input{
  height:46px; padding:0 16px; border:1.5px solid var(--border-strong); border-radius:var(--radius-md); box-sizing:border-box;
  font-family:inherit; font-size:14.5px; min-width:250px; outline:none; transition:border-color var(--motion-micro) var(--ease-standard);
}
.newsletter-form input:focus{ border-color:var(--brand); }
.newsletter-form button{ white-space:nowrap; }

/* ============ SECTION MORE ============ */
.section-more{ text-align:center; margin-top:36px; }
.section-more p{ color:var(--text-dim); margin-bottom:16px; font-size:14px; }
.section-more-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============ WHY SECTION ============ */
.why-section{ padding:80px 24px; max-width:1320px; margin:0 auto; }
.why-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.why-card{ background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); border-radius:var(--radius-lg); padding:24px; }
.why-num{ font-family:var(--ff-mono); font-size:13px; color:var(--brand); font-weight:500; letter-spacing:.06em; margin-bottom:12px; }
.why-card h3{ font-size:16.5px; margin-bottom:8px; color:var(--text); }
.why-card p{ font-size:13.5px; color:var(--text-dim); }

/* ============ CONTACT TEASER (home) ============ */
.contact-teaser{ padding:0 24px; max-width:1320px; margin:0 auto 70px; }
.contact-teaser-inner{
  background:var(--bg-dark);
  border-radius:var(--radius-xl); padding:44px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.contact-teaser-inner h2{ font-size:24px; margin-bottom:6px; color:#fff; }
.contact-teaser-inner p{ color:var(--border-strong); max-width:420px; }
.contact-teaser-inner .btn-outline{ border-color:rgba(255,255,255,.35); color:#fff; }
.contact-teaser-inner .btn-outline:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
.contact-teaser-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ============ PAGE HERO (servicios / nosotros / contacto) ============ */
.page-hero{ background:var(--bg-alt); padding:44px 24px 40px; border-bottom:1px solid var(--border); }
.page-hero-inner{ max-width:var(--container); margin:0 auto; text-align:left; }
.page-hero-inner .eyebrow{ margin-bottom:12px; }
.page-hero-inner h1{ font-family:var(--ff-display); font-size:clamp(26px,3.4vw,40px); font-weight:600; letter-spacing:-.005em; color:var(--navy); line-height:1.15; margin-bottom:12px; max-width:22ch; }
.page-hero-inner p{ color:var(--text-dim); font-size:16px; max-width:620px; }

/* ============ SERVICE DETAIL (proyectos.html) ============
   Restaurado 2026-08-24: se había borrado por accidente al rediseñar servicios.html
   (ambas páginas compartían las mismas clases) — proyectos.html quedó sin estilos,
   por eso se veía "desordenado". Ahora cada bloque es una tarjeta propia (borde +
   sombra, como el resto del sistema v3) en vez de una fila de ícono+texto flotando;
   se quitó el zigzag alternado (.reverse) — todos los íconos van del mismo lado para
   que la página se lea ordenada, no en zigzag. */
.services-detail-section{ max-width:1100px; margin:0 auto; padding:16px 24px 80px; display:flex; flex-direction:column; gap:24px; }
.service-detail{
  display:grid; grid-template-columns:64px 1fr; gap:24px; align-items:start;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
  padding:32px;
}
.service-detail-icon{
  width:52px; height:52px; border-radius:var(--radius-md); background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.service-detail-body h2{ font-family:var(--ff-display); font-size:22px; font-weight:700; margin-bottom:10px; color:var(--text); }
.service-detail-body > p{ color:var(--text-dim); font-size:15px; line-height:1.6; margin-bottom:16px; max-width:640px; }
.service-detail-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:22px; }
.service-detail-list li{ position:relative; padding-left:22px; font-size:14px; color:var(--text); }
.service-detail-list li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--brand); }

/* ============ SERVICES PAGE — grid de servicios (SERVICES-DESIGN-DIRECTION.md, 2026-08-23) ============
   Nota de color: el doc pide el azul #13294B/#2563EB (CLAUDE.md original), pero el sitio ya migró
   por completo a rojo/negro/blanco (DESIGN-DIRECTION.md, decisión explícita del cliente). Se usa
   --brand (rojo) en vez del azul del doc para que esta página no desentone con el resto del sitio. */
.services-grid-section{ max-width:1200px; margin:0 auto; padding:16px 24px 88px; }
.services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.service-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  overflow:visible; display:flex; flex-direction:column;
  transition:border-color var(--motion-interaction) var(--ease-standard), box-shadow var(--motion-interaction) var(--ease-standard);
}
.service-card:hover, .service-card:focus-within{ border-color:var(--border-hover); box-shadow:var(--shadow-card); }
.service-card-photo{
  height:210px; background:var(--bg-alt); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  overflow:hidden; display:block;
}
.service-card-photo img{
  width:100%; height:100%; object-fit:contain; padding:26px; box-sizing:border-box; display:block;
  transition:transform var(--motion-interaction) var(--ease-standard);
}
.service-card:hover .service-card-photo img, .service-card:focus-within .service-card-photo img{ transform:scale(1.025); }
.service-card-icon{
  position:relative; margin:-21px 0 0 24px; z-index:2;
  width:42px; height:42px; border-radius:50%; background:var(--brand-soft); border:1px solid var(--border-hover); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.service-card-body{ padding:14px 24px 24px; }
.service-card-body h3{ font-family:var(--ff-display); font-size:18px; line-height:1.3; font-weight:700; color:var(--text); margin-bottom:8px; }
.service-card-body p{ font-family:var(--ff-body); font-size:13.5px; line-height:1.6; color:var(--text-dim); margin-bottom:16px; }
.service-card-link{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--ff-body); font-size:13px; font-weight:600; color:var(--brand);
  transition:color var(--motion-interaction) var(--ease-standard);
}
.service-card-link svg{ transition:transform var(--motion-interaction) var(--ease-standard); }
.service-card:hover .service-card-link, .service-card:focus-within .service-card-link{ color:var(--brand-dark); }
.service-card:hover .service-card-link svg, .service-card:focus-within .service-card-link svg{ transform:translateX(3px); }
.service-card-link:focus-visible, .service-card-body a.btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* ============ ABOUT PAGE ============ */
.about-section{ max-width:1320px; margin:0 auto; padding:80px 24px; }
.about-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:start; }
.about-copy p{ color:var(--text-dim); font-size:15.5px; margin:16px 0; }
.about-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.about-stat-card{
  background:var(--bg-alt); border-radius:var(--radius-lg); padding:26px 20px; text-align:center;
}
.about-stat-card strong{ display:block; font-family:var(--ff-body); font-weight:700; font-size:30px; color:var(--brand); margin-bottom:4px; }
.about-stat-card span{ font-size:13px; color:var(--text-dim); }

.legal-strip{ background:var(--bg-dark); padding:26px 24px; }
.legal-strip-inner{
  max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap; color:rgba(255,255,255,.75); font-size:13.5px;
}
.legal-strip-inner span:first-child{ font-size:13px; color:rgba(255,255,255,.45); }
.legal-strip-inner strong{ color:#fff; font-family:var(--ff-display); font-size:15px; }

/* ============ CONTACT PAGE ============ */
.contact-section{ max-width:1200px; margin:0 auto; padding:80px 24px 90px; }
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:start; }
.contact-info{ display:flex; flex-direction:column; gap:24px; }
.contact-whatsapp-card{
  display:flex; align-items:center; gap:16px; background:var(--whatsapp-dark);
  color:#fff; border-radius:var(--radius-lg); padding:22px 24px; transition:transform .25s var(--ease);
}
.contact-whatsapp-card:hover{ transform:translateY(-3px); }
.contact-whatsapp-icon{ width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-whatsapp-card strong{ display:block; font-family:var(--ff-display); font-size:19px; }
.contact-whatsapp-card span{ font-size:13px; opacity:.9; }
.contact-info-list{ display:flex; flex-direction:column; gap:16px; background:var(--bg-alt); border-radius:var(--radius-lg); padding:22px 24px; }
.contact-info-list li{ display:flex; flex-direction:column; gap:2px; font-size:14.5px; color:var(--text); }
.contact-info-label{ font-family:var(--ff-mono); font-size:13px; font-weight:500; color:var(--text-faint); }
.contact-form{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px;
  display:flex; flex-direction:column; gap:16px;
}
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row label{ font-family:var(--ff-mono); font-size:14px; font-weight:600; color:var(--text); }
.form-row input, .form-row select{ height:48px; box-sizing:border-box; }
.form-row input, .form-row select, .form-row textarea{
  border:1.5px solid var(--border); border-radius:var(--radius-md); padding:11px 16px;
  font-family:inherit; font-size:14.5px; color:var(--text); outline:none; background:#fff; resize:vertical;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ border-color:var(--brand); }
.form-note{ text-align:center; font-size:12.5px; color:var(--text-faint); }

/* ============ CATALOGO PAGE LAYOUT ============ */
.catalog-header{ max-width:1320px; margin:0 auto; padding:36px 24px 0; }
.catalog-page-head{ text-align:left; margin:0; max-width:none; }
/* Buscador exclusivo de la página de catálogo — antes vivía en el header global de las
   7 páginas (poco útil fuera de esta), ahora solo aparece aquí, visible en cualquier
   ancho de pantalla (a diferencia de .header-search, nunca se oculta en mobile). */
.catalog-search{ max-width:480px; margin:20px 0 0; }
.catalog-search form{
  display:flex; align-items:center; height:48px; box-sizing:border-box;
  background:var(--bg-alt); border:1.5px solid var(--border);
  border-radius:var(--radius-md); padding:0 4px 0 20px;
  transition:border-color var(--motion-interaction) var(--ease-standard), background var(--motion-interaction) var(--ease-standard);
}
.catalog-search form:focus-within{ border-color:var(--brand); background:#fff; }
.catalog-search input{
  flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text); font-size:14.5px; font-family:inherit; padding:11px 0;
}
.catalog-search input::placeholder{ color:var(--text-faint); }
.catalog-search button{
  width:38px; height:38px; border-radius:var(--radius-sm); background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background var(--motion-micro) var(--ease-standard);
}
.catalog-search button:hover{ background:var(--brand-dark); }
@media (max-width:520px){ .catalog-search{ max-width:none; } }
.catalog-main{ max-width:1320px; margin:0 auto; padding:26px 24px 90px; min-width:0; }

.catalog-toolbar{ align-items:center; }
.catalog-heading{ font-family:var(--ff-display); font-size:20px; color:var(--text); }
.toolbar-right{ display:flex; align-items:center; gap:14px; }
.result-count{ font-family:var(--ff-mono); font-size:12px; color:var(--text-faint); white-space:nowrap; }

/* ============ PRODUCT DETAIL PAGE ============ */
.product-page-wrap{ max-width:1200px; margin:0 auto; padding:26px 24px 90px; }
.breadcrumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--ff-mono); font-size:12px; letter-spacing:.02em; color:var(--text-faint); margin-bottom:28px; }
.breadcrumb a{ color:var(--text-faint); }
.breadcrumb a:hover{ color:var(--brand); }
.breadcrumb .crumb-current{ color:var(--text); font-weight:600; }
.product-detail{ display:grid; grid-template-columns:1fr 1fr; gap:52px; margin-bottom:80px; }
.product-gallery-main{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); display:flex; align-items:center; justify-content:center;
  padding:40px; aspect-ratio:1/1;
}
.product-gallery-main img{ max-width:100%; max-height:420px; object-fit:contain; }
.product-detail-info{ display:flex; flex-direction:column; }
.pd-badge{
  display:inline-flex; align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--radius-sm); background:var(--text); color:#fff; margin-bottom:14px;
}
.pd-brand{ font-family:var(--ff-mono); font-size:14px; font-weight:600; color:var(--brand); margin-bottom:8px; }
.pd-name{ font-family:var(--ff-display); font-size:clamp(24px,3vw,32px); color:var(--text); margin-bottom:8px; }
.pd-sub{ color:var(--text-dim); font-size:15px; margin-bottom:14px; }
.pd-sku{ font-family:var(--ff-mono); font-size:12.5px; color:var(--text-faint); margin-bottom:14px; }
.pd-sku strong{ color:var(--text-dim); font-weight:600; }
.pd-rating{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.pd-rating .product-rating{ font-size:15px; }
.pd-price{ font-family:var(--ff-body); font-size:34px; font-weight:700; color:var(--text); margin-bottom:24px; }
.pd-price small{ display:block; font-family:var(--ff-body); font-size:12.5px; color:var(--text-faint); font-weight:400; margin-top:6px; }
.pd-specs{ display:flex; flex-direction:column; gap:11px; margin-bottom:28px; padding:20px; background:var(--bg-alt); border-radius:var(--radius-md); }
.pd-specs li{ display:flex; gap:10px; font-size:14px; color:var(--text-dim); align-items:flex-start; }
.pd-specs svg{ color:var(--brand); flex-shrink:0; margin-top:2px; }
.pd-qty-row{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.pd-qty-label{ font-size:13.5px; font-weight:700; color:var(--text); }
.pd-actions{ display:flex; flex-direction:column; gap:12px; }
.pd-note{ margin-top:18px; font-size:12.5px; color:var(--text-faint); }
.product-notfound{ text-align:center; padding:100px 20px; }
.product-notfound h2{ margin-bottom:10px; }
.product-notfound p{ color:var(--text-dim); margin-bottom:22px; }
.related-section .section-head{ text-align:left; margin:0 0 28px; max-width:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .category-tiles{ grid-template-columns:repeat(4, 1fr); }
  .product-grid{ grid-template-columns:repeat(3, 1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; gap:36px 28px; }
  .services-grid{ grid-template-columns:repeat(2, 1fr); }
  .why-grid{ grid-template-columns:repeat(2, 1fr); }
  .service-detail{ grid-template-columns:minmax(0,1fr); }
  .service-detail-icon{ margin-bottom:8px; }
  .about-grid{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .about-stats{ grid-template-columns:repeat(4, 1fr); }
  .contact-grid{ grid-template-columns:minmax(0,1fr); }
  .product-detail{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .catalog-layout{ grid-template-columns:220px 1fr; gap:20px; }
}

@media (max-width:860px){
  .category-tiles{ grid-template-columns:repeat(3, 1fr); }
  .product-grid{ grid-template-columns:repeat(2, 1fr); }

  .catalog-layout{ grid-template-columns:minmax(0,1fr); }
  .cat-sidebar{ display:none; }
  .catalog-mobile-filter{
    display:block; max-width:1320px; margin:0 auto; padding:0 24px 16px;
  }
  .catalog-mobile-filter label{
    display:block; font-family:var(--ff-mono); font-size:14px; font-weight:600; letter-spacing:0;
    text-transform:none; color:var(--text); margin-bottom:6px;
  }
  .catalog-mobile-filter select{
    width:100%; padding:13px 40px 13px 16px; border-radius:var(--radius-md); border:1.5px solid var(--border-strong);
    background:#fff url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2216%22 height=%2216%22 fill=%22none%22 stroke=%22%236b7280%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E') no-repeat right 14px center;
    background-size:16px; appearance:none; -webkit-appearance:none;
    font-family:inherit; font-size:14.5px; font-weight:600; color:var(--text);
  }
  .catalog-mobile-filter select:focus{ outline:none; border-color:var(--brand); }

  .how-steps{ flex-direction:column; align-items:stretch; gap:32px; }
  .how-step{ max-width:none; }
  .how-connector{ display:none; }
  .cta-banner-inner{ padding:36px 28px; flex-direction:column; align-items:flex-start; }
  .cta-banner-inner--photo{ flex-direction:column; min-height:0; }
  .cta-banner-copy{ padding:32px 24px 8px; }
  .cta-banner-photo{ flex-basis:auto; height:180px; width:100%; }
  .footer-top{ grid-template-columns:minmax(0,1fr); gap:34px; padding-bottom:36px; }

  .stat-block{ padding:0 16px; }
  .stat-block strong{ font-size:24px; }

  .services-grid{ grid-template-columns:minmax(0,1fr); }
  .why-grid{ grid-template-columns:minmax(0,1fr); }
  .about-stats{ grid-template-columns:1fr 1fr; }
  .contact-teaser-inner, .cta-banner-inner{ flex-direction:column; align-items:flex-start; }
  .contact-form{ padding:24px; }
  .legal-strip-inner{ flex-direction:column; align-items:flex-start; gap:6px; }
  .promo-duo{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:520px){
  .stats-bar-inner{ padding:22px 16px; }
  .stat-block{ padding:0 10px; flex-basis:auto; }
  .stat-block strong{ font-size:20px; }
  .stat-block span{ font-size:11.5px; }
  .category-tiles{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .cat-sidebar-list{ gap:6px; }
  .cat-sidebar-item{ padding:9px 10px; font-size:12.5px; }
  .subcat-gallery-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .product-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .product-info{ padding:11px 11px 13px; }
  .product-name{ font-size:13px; }
  .product-price{ font-size:15.5px; }
  .catalog-toolbar{ flex-direction:column; align-items:stretch; }
  .cart-drawer{ width:100vw; }
  .fab-cart{ bottom:18px; right:14px; width:52px; height:52px; }
}


/* ============================================================
   RESPONSIVE v4 — header, hero e inicio (mobile-first en la práctica:
   desde 1080px hacia abajo el header pasa a 2 filas: logo/acciones + buscador)
   ============================================================ */
@media (min-width:1080px){
  .fab-cart{ display:none; } /* el carrito ya está siempre visible en el header fijo */
}
@media (max-width:1240px){
  .header-contact-text{ display:none; }
  .header-contact{ padding:6px; }
  .header-nav-aside{ display:none; }
}
@media (max-width:1079px){
  .top-bar-links .tb-hours{ display:none; }
  .header-inner{
    height:auto; padding:10px 16px 12px; gap:8px 12px;
    display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"menu brand actions" "search search search";
  }
  .menu-toggle{ display:flex; grid-area:menu; margin-left:-8px; }
  .brand{ grid-area:brand; }
  .header-actions{ grid-area:actions; gap:4px; }
  .header-search{ grid-area:search; max-width:none; height:46px; }
  .header-search button{ padding:0 16px; }
  .header-nav-bar{ display:none; }
  .cart-btn{ height:44px; padding:0 10px; }

  /* Menú móvil (overlay de pantalla completa) — dos fases para animar entrada/salida */
  body.nav-open-init .category-strip{
    display:block; position:fixed; inset:0; z-index:1; background:#fff;
    padding:176px 20px 32px; overflow-y:auto;
    opacity:0; transform:translateY(-8px);
    transition:opacity var(--motion-micro) var(--ease-exit), transform var(--motion-micro) var(--ease-exit);
  }
  body.nav-open.nav-open-init .category-strip{
    opacity:1; transform:none;
    transition:opacity var(--motion-content) var(--ease-enter), transform var(--motion-content) var(--ease-enter);
  }
  .strip-link{
    display:flex; align-items:center; justify-content:space-between; padding:16px 4px;
    font-family:var(--ff-display); font-size:19px; font-weight:500; color:var(--navy); border-bottom:1px solid var(--border);
  }
  .strip-link.is-active{ color:var(--brand); }
  .strip-link svg{ color:var(--text-faint); }
  .strip-actions{ display:flex; flex-direction:column; gap:10px; margin-top:24px; }

  /* Hero */
  .hero{ padding:12px 16px 0; }
  .hero-inner{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .hero-main{ grid-template-columns:minmax(0,1fr); min-height:0; }
  .hero-content{ padding:32px 24px 0; }
  .hero-visual{ min-height:0; height:clamp(220px,52vw,340px); margin-top:8px; }
  .hero-visual .hv-monitor{ width:min(62%,330px); right:6%; top:0; }
  .hero-visual .hv-laptop{ width:min(60%,320px); left:4%; bottom:4%; }
  .hero-stats{ padding-top:28px; }
  .hero-side{ grid-template-rows:none; grid-template-columns:1fr 1fr; gap:12px; }
  .hero-tile{ min-height:200px; padding:18px; }

  .trust-strip{ padding:12px 16px 0; }
  .trust-strip-inner, .feature-bar-inner{ grid-template-columns:repeat(2,1fr); }
  .trust-item:nth-child(3), .feature-item:nth-child(3){ border-left:none; }
  .trust-item:nth-child(n+3), .feature-item:nth-child(n+3){ border-top:1px solid var(--border); }

  .home-cats{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .biz-inner{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .about-contact-inner{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .category-panel-inner{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:860px){
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .top-bar-inner{ padding:0 16px; }
  .top-bar-links{ display:none; }
  .announce-item{ justify-content:center; }
  .brand-mark{ width:36px; height:36px; border-radius:8px; }
  .brand-mark svg{ width:22px; height:22px; }
  .brand-name{ font-size:19px; }
  .brand-tagline{ display:none; }
  .header-search button{ display:none; }

  .hero-content{ padding:28px 20px 0; }
  .hero-title{ font-size:clamp(30px,8.6vw,40px); }
  .hero-sub{ font-size:15px; }
  .hero-actions .btn{ flex:1 1 auto; }
  .hero-stats strong{ font-size:20px; }
  .hero-stats span{ font-size:11.5px; white-space:normal; }
  .hero-stats div{ flex:1 1 0; min-width:0; }
  .hero-stats div{ padding-right:14px; margin-right:14px; }
  .hero-side{ grid-template-columns:minmax(0,1fr); }
  .hero-tile{ min-height:150px; }
  .hero-tile h2{ font-size:18px; }
  .hero-tile img{ width:38%; right:2%; bottom:-4%; }

  .trust-item, .feature-item{ padding:14px; gap:10px; }
  .trust-item strong, .feature-item h4{ font-size:13px; }
  .trust-item span, .feature-item p{ font-size:11.5px; }

  .home-section{ padding-top:48px; }
  .shelf-head{ padding:0 16px; }
  .home-cats{ padding:0 16px; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .home-cat{ padding:8px 10px 8px 8px; gap:10px; }
  .home-cat-media{ width:44px; height:44px; }
  .home-cat-name{ font-size:13px; }
  .home-cat-count{ font-size:11.5px; }
  .shelf-band{ margin-top:48px; padding:44px 0 48px; }
  .shelf-band .product-grid{ padding:0 16px; }

  .biz-band{ padding:56px 16px; }
  .biz-list a{ grid-template-columns:32px minmax(0,1fr) 18px; gap:12px; padding:16px 0; }
  .brands-row{ padding:22px 16px; }
  .brands-row-inner{ flex-direction:column; align-items:flex-start; gap:12px; }
  .brands-row .marquee-viewport{ width:100%; }
  .about-contact{ padding:56px 16px; }
  .contact-card{ padding:22px; }
  .newsletter-section{ padding:0 16px 56px; }
  .newsletter-inner{ padding:24px 20px; }
  .newsletter-form{ width:100%; }
  .newsletter-form input{ min-width:0; flex:1 1 100%; }
  .newsletter-form button{ flex:1 1 100%; }
  .feature-bar{ padding:0 16px; }
  .site-footer{ padding:48px 16px 0; }
  .footer-top{ gap:32px 20px; }
  .page-hero{ padding:32px 16px 28px; }
}

/* ---- Teléfonos muy angostos (iPhone SE 1ª gen, Android compactos: 320–380px) ---- */
@media (max-width:380px){
  .header-inner{ padding:8px 12px 10px; gap:8px 6px; }
  .menu-toggle{ width:38px; margin-left:-6px; }
  .brand{ gap:8px; }
  .brand-mark{ width:32px; height:32px; }
  .brand-mark svg{ width:20px; height:20px; }
  .brand-name{ font-size:17px; }
  .header-actions{ gap:2px; }
  .header-contact{ padding:3px; }
  .header-contact-icon{ width:34px; height:34px; }
  .cart-btn{ padding:0 7px; gap:4px; height:40px; }
  .header-search{ height:42px; padding-left:10px; }
  .header-search input{ font-size:14px; padding:0 8px; }
  .hero{ padding:10px 12px 0; }
  .hero-content{ padding:24px 16px 0; }
  .hero-stats div{ padding-right:10px; margin-right:10px; }
  .trust-strip{ padding:10px 12px 0; }
  .home-cats, .shelf-head, .shelf-band .product-grid{ padding-left:12px; padding-right:12px; }
  .catalog-layout, .catalog-header, .product-page-wrap, .services-detail-section, .contact-section, .about-section{ padding-left:12px; padding-right:12px; }
  .service-detail, .contact-form{ padding:18px; }
  .contact-whatsapp-card{ padding:16px; }
  .contact-whatsapp-card strong{ font-size:17px; }
}
@media (max-width:640px){
  .service-detail{ padding:22px; gap:14px; }
}
@media (max-width:640px){
  .catalog-layout{ padding-left:16px; padding-right:16px; }
  .catalog-layout .catalog-main{ padding:8px 0 64px; }
}
.home-cat-name{ overflow-wrap:anywhere; hyphens:auto; }
@media (max-width:380px){
  .home-cat{ gap:8px; padding:8px; }
  .home-cat-media{ width:38px; height:38px; }
  .home-cat-name{ font-size:12.5px; }
  .btn{ white-space:normal; text-align:center; }
}
@media (max-width:1079px){
  .hero-visual{ width:100%; max-width:540px; margin-left:auto; margin-right:auto; }
}

/* ============================================================
   PROYECTOS v2 (2026-10-04) — mismo lenguaje que el inicio: banda azul con
   índice de proyectos, filas foto + detalle (siempre en el mismo orden, sin
   zigzag), proceso en 4 pasos y cierre azul.
   ============================================================ */
.pj-hero{ background:var(--navy); color:#fff; padding:56px 24px; }
.pj-hero-inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:56px; align-items:center;
}
.pj-hero .eyebrow{ color:#B9C3D3; }
.pj-hero h1{ font-family:var(--ff-display); font-size:clamp(28px,3.4vw,44px); font-weight:700; line-height:1.1; max-width:20ch; }
.pj-hero-copy > p{ margin-top:16px; max-width:54ch; font-size:16px; line-height:1.65; color:#C8D0DC; }
.pj-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.pj-index{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-xl); padding:8px 22px; }
.pj-index-title{ display:block; padding:14px 0 10px; font-size:14px; font-weight:600; color:#B9C3D3; }
.pj-index a{
  display:flex; align-items:center; gap:16px; padding:15px 0; border-top:1px solid rgba(255,255,255,.12);
  font-size:15.5px; font-weight:500; color:#fff;
  transition:color var(--motion-micro) var(--ease-standard), padding var(--motion-interaction) var(--ease-standard);
}
.pj-index a span{ font-family:var(--ff-display); font-size:14px; color:#B9C3D3; min-width:22px; }
.pj-index a:hover{ padding-left:6px; color:#DDE3EC; }

.pj-list{ max-width:var(--container); margin:0 auto; padding:24px 24px 0; }
.pj-row{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:center;
  padding:48px 0; border-bottom:1px solid var(--border); scroll-margin-top:150px;
}
.pj-row:last-child{ border-bottom:none; }
.pj-media{
  background:var(--bg-alt); border-radius:var(--radius-xl); aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center; padding:36px;
}
.pj-media img{ width:auto; max-width:78%; max-height:100%; object-fit:contain; }
.pj-num{ display:block; font-family:var(--ff-display); font-size:15px; font-weight:600; color:var(--brand); margin-bottom:10px; }
.pj-body h2{ font-family:var(--ff-display); font-size:clamp(22px,2.4vw,30px); font-weight:700; line-height:1.2; color:var(--navy); }
.pj-body > p{ margin-top:12px; font-size:16px; line-height:1.65; color:var(--text-dim); max-width:58ch; }
.pj-checks{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 24px; margin:22px 0 26px; }
.pj-checks li{ position:relative; padding-left:26px; font-size:14.5px; line-height:1.45; color:var(--text); }
.pj-checks li::before{
  content:""; position:absolute; left:0; top:2px; width:16px; height:16px; border-radius:50%;
  background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 10px;
}

.pj-process{ background:var(--bg-alt); margin-top:32px; padding:64px 24px; }
.pj-process-inner{ max-width:var(--container); margin:0 auto; }
.pj-process-head{ margin-bottom:32px; }
.pj-steps{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; border-top:2px solid var(--border-strong); }
.pj-steps li{ position:relative; padding:26px 24px 0 0; }
.pj-steps li span{
  position:absolute; top:-15px; left:0; width:28px; height:28px; border-radius:50%;
  background:var(--navy); color:#fff; font-family:var(--ff-display); font-size:13.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 5px var(--bg-alt);
}
.pj-steps h3{ font-family:var(--ff-display); font-size:18px; font-weight:600; color:var(--navy); margin-top:4px; }
.pj-steps p{ font-size:14.5px; line-height:1.55; color:var(--text-dim); margin-top:6px; max-width:30ch; }

.pj-cta{ padding:64px 24px 0; }
.pj-cta-inner{
  max-width:var(--container); margin:0 auto; background:var(--navy); color:#fff; border-radius:var(--radius-xl);
  padding:40px 44px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.pj-cta h2{ font-family:var(--ff-display); font-size:clamp(22px,2.4vw,28px); font-weight:700; }
.pj-cta p{ margin-top:8px; color:#C8D0DC; max-width:52ch; }
.pj-cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ============================================================
   CONTACTO v2 (2026-10-04) — panel azul con datos reales + formulario en
   dos columnas, accesos rápidos y preguntas frecuentes (todas con datos
   que ya existen en el sitio, nada inventado).
   ============================================================ */
.ct-section{ padding:32px 24px 0; }
.ct-grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:16px; align-items:stretch;
}
.ct-panel{ background:var(--navy); color:#fff; border-radius:var(--radius-xl); padding:44px 40px; display:flex; flex-direction:column; }
.ct-panel .eyebrow{ color:#B9C3D3; }
.ct-panel h1{ font-family:var(--ff-display); font-size:clamp(28px,3vw,40px); font-weight:700; line-height:1.1; max-width:16ch; }
.ct-lead{ margin-top:14px; color:#C8D0DC; font-size:16px; line-height:1.6; max-width:42ch; }
.ct-wa{ align-self:flex-start; margin-top:26px; }
.ct-rows{ margin-top:auto; padding-top:32px; }
.ct-rows li{ display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-top:1px solid rgba(255,255,255,.14); }
.ct-rows svg{ color:#B9C3D3; flex-shrink:0; margin-top:2px; }
.ct-rows small{ display:block; font-size:12.5px; color:#A7B2C4; }
.ct-rows strong, .ct-rows a{ font-size:15px; font-weight:500; color:#fff; }
.ct-rows a:hover{ text-decoration:underline; text-underline-offset:3px; }

.ct-form-wrap{ border:1px solid var(--border); border-radius:var(--radius-xl); padding:40px; background:#fff; }
.ct-form-wrap h2{ font-family:var(--ff-display); font-size:24px; font-weight:700; color:var(--navy); }
.ct-form-sub{ margin-top:6px; font-size:14.5px; color:var(--text-dim); }
.ct-form{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 16px; margin-top:26px; }
.ct-form .form-row--full{ grid-column:1 / -1; }
.ct-form .opt{ font-weight:400; color:var(--text-faint); }
.ct-form label span[aria-hidden]{ color:var(--brand); }
.ct-form textarea{ min-height:130px; }
.ct-submit{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ct-submit .form-note{ text-align:left; }

.ct-shortcuts{ padding:16px 24px 0; }
.ct-shortcuts-inner{
  max-width:var(--container); margin:0 auto; border:1px solid var(--border); border-radius:var(--radius-xl);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
}
.ct-shortcuts a{
  position:relative; display:flex; flex-direction:column; gap:3px; padding:22px 52px 22px 24px;
  transition:background var(--motion-micro) var(--ease-standard);
}
.ct-shortcuts a + a{ border-left:1px solid var(--border); }
.ct-shortcuts a:hover{ background:var(--bg-alt); }
.ct-shortcuts strong{ font-size:15.5px; font-weight:600; color:var(--navy); }
.ct-shortcuts span{ font-size:13.5px; color:var(--text-dim); }
.ct-shortcuts svg{
  position:absolute; right:22px; top:50%; transform:translateY(-50%); color:var(--brand);
  transition:transform var(--motion-interaction) var(--ease-standard);
}
.ct-shortcuts a:hover svg{ transform:translate(3px,-50%); }

.ct-faq{ padding:64px 24px 0; }
.ct-faq-inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; align-items:start;
}
.ct-faq-list{ border-top:1px solid var(--border); }
.ct-faq-list details{ border-bottom:1px solid var(--border); }
.ct-faq-list summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; font-size:16px; font-weight:600; color:var(--navy);
}
.ct-faq-list summary::-webkit-details-marker{ display:none; }
.ct-faq-list summary::after{
  content:""; width:12px; height:12px; flex-shrink:0;
  background:linear-gradient(var(--brand),var(--brand)) center/12px 2px no-repeat, linear-gradient(var(--brand),var(--brand)) center/2px 12px no-repeat;
  transition:transform var(--motion-interaction) var(--ease-standard);
}
.ct-faq-list details[open] summary::after{ transform:rotate(45deg); }
.ct-faq-list details p{ padding:0 0 18px; font-size:15px; line-height:1.6; color:var(--text-dim); max-width:60ch; }

/* ---- Proyectos + Contacto: tablet y celular ---- */
@media (max-width:1079px){
  .pj-hero-inner{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .pj-row{ grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:32px; }
  .pj-steps{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:32px; border-top:none; }
  .pj-steps li{ border-top:2px solid var(--border-strong); }
  .ct-grid{ grid-template-columns:minmax(0,1fr); }
  .ct-rows{ margin-top:0; }
  .ct-faq-inner{ grid-template-columns:minmax(0,1fr); gap:24px; }
}
@media (max-width:760px){
  .pj-row{ grid-template-columns:minmax(0,1fr); gap:22px; padding:36px 0; }
  .pj-media{ aspect-ratio:16/9; padding:24px; }
  .pj-checks{ grid-template-columns:minmax(0,1fr); }
  .ct-shortcuts-inner{ grid-template-columns:minmax(0,1fr); }
  .ct-shortcuts a + a{ border-left:none; border-top:1px solid var(--border); }
}
@media (max-width:640px){
  .pj-hero{ padding:36px 16px; }
  .pj-index{ padding:4px 16px; }
  .pj-list{ padding:8px 16px 0; }
  .pj-body .btn{ width:100%; }
  .pj-process{ padding:48px 16px; }
  .pj-steps{ grid-template-columns:minmax(0,1fr); }
  .pj-cta{ padding:48px 16px 0; }
  .pj-cta-inner{ padding:28px 22px; }
  .pj-cta-actions, .pj-cta-actions .btn{ width:100%; }
  .ct-section{ padding:16px 16px 0; }
  .ct-panel{ padding:28px 22px; }
  .ct-wa{ align-self:stretch; }
  .ct-form-wrap{ padding:24px 18px; }
  .ct-form{ grid-template-columns:minmax(0,1fr); }
  .ct-submit .btn{ width:100%; }
  .ct-shortcuts{ padding:12px 16px 0; }
  .ct-faq{ padding:48px 16px 0; }
}
@media (max-width:380px){
  .pj-hero-actions .btn{ width:100%; }
}

/* ============================================================
   PULIDO v5 (2026-10-04) — Open Sans en todo el sitio (pedido del cliente,
   referencia PcComponentes), color más vivo y menos "plantilla":
   · Azul #2563EB para las acciones (botones, buscador, agregar al carrito);
     el azul marino #13294B queda para la estructura (franja superior, hero,
     banda de empresas, footer). Así la página tiene un acento claro.
   · Sin etiquetitas encima de cada título ni numeraciones "01 / 02" — eran
     los detalles que más delataban un sitio hecho por IA.
   · Movimiento sobrio (MOTION.md §v5): entrada del hero, contadores,
     parallax leve en el hero, hovers con respuesta y revelado por sección.
   ============================================================ */
:root{
  --cta-fill:       #2563EB;
  --cta-fill-hover: #1D4ED8;
}
body{ font-size:15.5px; line-height:1.6; }
h1,h2,h3,h4{ letter-spacing:0; }
.hero-title{ font-weight:800; letter-spacing:-.01em; line-height:1.1; }
.section-title, .biz-copy h2, .pj-hero h1, .ct-panel h1, .pj-body h2{ font-weight:700; letter-spacing:-.005em; }
.product-name{ font-weight:600; }
.product-price{ font-weight:700; }
.brand-name{ font-weight:800; letter-spacing:-.01em; }

/* Etiquetas sobre los títulos: fuera (patrón típico de plantillas IA) */
.section-tag, .eyebrow{ display:none !important; }

/* Acciones en azul vivo */
.header-search button, .product-quickadd{ background:var(--cta-fill); }
.header-search button:hover, .product-quickadd:hover{ background:var(--cta-fill-hover); }
.cart-count{ background:var(--cta-fill); }
.shelf-link{ color:var(--cta-fill); }
.hero-tile-link{ color:var(--cta-fill); }

/* Precios y marcas de producto más legibles, estilo tienda */
.product-brand{ font-size:12px; font-weight:600; color:var(--text-faint); text-transform:uppercase; letter-spacing:.03em; }
.product-price{ color:var(--text); font-size:19px; }
.product-cta{ color:var(--cta-fill); }

/* Banda de empresas: íconos de servicio en vez de "01, 02…" */
.biz-ico{
  width:40px; height:40px; border-radius:var(--radius-md); background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:#DDE3EC;
  transition:background var(--motion-interaction) var(--ease-standard);
}
.biz-list a:hover .biz-ico{ background:var(--cta-fill); color:#fff; }

/* Proyectos: sin numeración decorativa; el índice usa flecha */
.pj-num{ display:none; }
.pj-index a span{ display:none; }
.pj-index a::after{ content:"→"; margin-left:auto; color:#B9C3D3; transition:transform var(--motion-interaction) var(--ease-standard); }
.pj-index a:hover::after{ transform:translateX(4px); }
.pj-index a:hover{ padding-left:0; }

/* ---------- MOVIMIENTO (MOTION.md §v5) ---------- */
/* Entrada de los productos del hero (Nivel Hero, una sola vez) */
@keyframes heroInRight{ from{ opacity:0; transform:translate(40px, 10px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes heroInLeft{ from{ opacity:0; transform:translate(-40px, 14px) scale(.97); } to{ opacity:1; transform:none; } }
.hero-visual .hv-monitor{ animation:heroInRight .9s var(--ease-enter) .3s backwards; transition:transform .7s var(--ease-enter); will-change:transform; }
.hero-visual .hv-laptop{ animation:heroInLeft .9s var(--ease-enter) .45s backwards; transition:transform .7s var(--ease-enter); will-change:transform; }
.hero-tile img{ animation:heroInRight .8s var(--ease-enter) .55s backwards; }
.hero-side .hero-tile:nth-child(2) img{ animation-delay:.68s; }

/* Hovers con respuesta (Nivel Interacción) */
.btn > svg:last-child:not(:first-child){ transition:transform var(--motion-interaction) var(--ease-standard); }
.btn:hover > svg:last-child:not(:first-child){ transform:translateX(3px); }
.btn-primary:active, .btn-white:active, .btn-whatsapp:active{ transform:scale(.98); }
.product-card{ transition:transform var(--motion-interaction) var(--ease-standard), box-shadow var(--motion-interaction) var(--ease-standard), border-color var(--motion-interaction) var(--ease-standard); }
.product-card:hover{ transform:translateY(-3px); }
.product-card:hover .product-media img{ transform:scale(1.05); }
.home-cat{ transition:border-color var(--motion-interaction) var(--ease-standard), background var(--motion-interaction) var(--ease-standard), transform var(--motion-interaction) var(--ease-standard); }
.home-cat:hover{ transform:translateY(-2px); }
.home-cat-media img{ transition:transform var(--motion-content) var(--ease-enter); }
.home-cat:hover .home-cat-media img{ transform:scale(1.1); }
.trust-item svg, .feature-icon{ transition:transform var(--motion-interaction) var(--ease-standard); }
.trust-item:hover svg, .feature-item:hover .feature-icon{ transform:translateY(-2px); }
.pj-media img{ transition:transform var(--motion-content) var(--ease-enter); }
.pj-row:hover .pj-media img{ transform:scale(1.04); }

/* Revelado escalonado corto en la franja de confianza (4 elementos, MOTION.md §17) */
.trust-strip-inner.reveal .trust-item{ opacity:0; transform:translateY(10px); transition:opacity var(--motion-content) var(--ease-enter), transform var(--motion-content) var(--ease-enter); }
.trust-strip-inner.reveal.is-visible .trust-item{ opacity:1; transform:none; }
.trust-strip-inner.reveal.is-visible .trust-item:nth-child(2){ transition-delay:.06s; }
.trust-strip-inner.reveal.is-visible .trust-item:nth-child(3){ transition-delay:.12s; }
.trust-strip-inner.reveal.is-visible .trust-item:nth-child(4){ transition-delay:.18s; }
.trust-strip-inner.reveal{ opacity:1; transform:none; }

/* Contadores: cifras tabulares para que no "bailen" mientras suben */
.hero-stats strong, .about-stat-card strong{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce){
  .hero-visual img, .hero-tile img{ animation:none !important; }
  .trust-strip-inner.reveal .trust-item{ opacity:1 !important; transform:none !important; }
}

/* Carrito cerrado: sin sombra (se filtraba como una franja gris en el borde derecho
   de todas las páginas) y fuera del orden de tabulación hasta que se abre. */
.cart-drawer{ box-shadow:none; visibility:hidden; transition:transform .35s var(--ease), visibility 0s linear .35s, box-shadow .35s var(--ease); }
.cart-drawer.is-open{ box-shadow:-20px 0 50px rgba(11,42,111,.18); visibility:visible; transition:transform .35s var(--ease), visibility 0s, box-shadow .35s var(--ease); }

/* Servicios: imágenes propias para "Soluciones web" (captura real de la tienda
   Tech Fix en un marco de navegador) y "Mantenimiento" (reporte de visita). */
.service-card-photo--web, .service-card-photo--report{ display:flex; align-items:flex-end; justify-content:center; padding:22px 22px 0; }
.browser-mock{
  width:100%; max-width:340px; background:#fff; border:1px solid var(--border-strong); border-bottom:none;
  border-radius:8px 8px 0 0; overflow:hidden; box-shadow:0 -6px 24px rgba(11,42,111,.10);
  transition:transform var(--motion-content) var(--ease-enter);
}
.browser-bar{ display:flex; gap:5px; padding:7px 10px; background:var(--bg-alt-strong); }
.browser-bar i{ width:7px; height:7px; border-radius:50%; background:#C3C8D1; }
.browser-mock img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; padding:0 !important; }
.service-card:hover .browser-mock{ transform:translateY(-4px); }

.report-mock{
  width:100%; max-width:300px; background:#fff; border:1px solid var(--border-strong); border-bottom:none;
  border-radius:8px 8px 0 0; padding:16px 18px 14px; box-shadow:0 -6px 24px rgba(11,42,111,.10);
  transition:transform var(--motion-content) var(--ease-enter);
}
.service-card:hover .report-mock{ transform:translateY(-4px); }
.report-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.report-head strong{ font-size:13.5px; font-weight:700; color:var(--navy); }
.report-head span{ font-size:11.5px; color:var(--text-faint); white-space:nowrap; }
.report-mock ul{ display:flex; flex-direction:column; gap:8px; padding-top:11px; }
.report-mock li{ position:relative; padding-left:24px; font-size:12.5px; color:var(--text); line-height:1.35; }
.report-mock li::before{
  content:""; position:absolute; left:0; top:0; width:16px; height:16px; border-radius:4px;
  background:var(--whatsapp-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 11px;
}
.report-mock{ padding:13px 16px 26px; }
.report-head{ padding-bottom:8px; }
.report-head strong{ white-space:nowrap; }
.report-mock ul{ gap:7px; padding-top:9px; }
.report-mock li{ font-size:12px; }

/* ============================================================
   PALETA v6 (2026-10-04) — pedido del cliente con imagen de referencia:
   azul marino #13294B (estructura), naranja de acción #2563EB (botones,
   enlaces, íconos; con texto blanco cumple contraste AA) y naranja vivo
   #9FB4E8 solo para detalles decorativos; fondos gris claro #F3F4F6.
   Títulos en Montserrat, texto en Open Sans.
   ============================================================ */
:root{ --accent-bright:#8EA8FF; }
.hero-title, .section-title, .biz-copy h2, .pj-hero h1, .ct-panel h1, .pj-body h2,
.hero-tile h2, .pj-cta h2, .ct-form-wrap h2, .page-hero-inner h1, .pd-name{ font-family:var(--ff-display); letter-spacing:-.015em; }
.hero-title{ font-weight:800; }
.section-title, .biz-copy h2, .pj-hero h1, .ct-panel h1, .pj-body h2, .hero-tile h2, .page-hero-inner h1{ font-weight:700; }
.brand-name{ font-family:var(--ff-display); font-weight:800; }
.brand-name span{ color:var(--accent-bright); }
.footer-brand .brand-name span{ color:var(--accent-bright); }
.header-nav-link::after{ background:var(--accent-bright); }
.product-price, .hero-stats strong, .about-stat-card strong{ font-family:var(--ff-display); }
/* Íconos y viñetas sobre azul marino en naranja vivo (decorativo) */
.biz-points svg, .ct-rows svg, .top-bar-links svg, .announce-item svg{ color:var(--accent-bright); }
.pj-index a::after{ color:var(--accent-bright); }
.biz-list a:hover .biz-ico{ background:var(--brand); }
.hero-tile-cat, .pj-num{ color:var(--brand); }
/* Pasos del proceso: círculo naranja como en la referencia */
.pj-steps li span{ background:var(--brand); }
@media (max-width:420px){
  .report-head{ flex-wrap:wrap; gap:2px 10px; }
  .report-head strong{ white-space:normal; }
}

/* Logo real de Tech Fix (imagen) */
.brand-logo{ display:block; height:54px; width:auto; }
.footer-brand .brand-logo{ height:56px; }
@media (max-width:640px){ .brand-logo{ height:38px; } .footer-brand .brand-logo{ height:48px; } }

/* ============ HEADER OSCURO (logo con texto blanco) ============
   El logo oficial lleva texto blanco, así que el encabezado va en azul marino. */
.site-header{ background:var(--navy-deep); border-bottom:1px solid rgba(255,255,255,.08); }
.site-header.is-scrolled{ box-shadow:0 6px 20px rgba(0,0,0,.35); }
.header-main{ background:var(--navy-deep); }
.header-nav-bar{ background:var(--navy-deep); border-top:1px solid rgba(255,255,255,.10); }
.header-search{ background:#fff; border-color:transparent; }
.header-search:focus-within{ border-color:var(--brand); }
.header-contact:hover{ background:rgba(255,255,255,.08); }
.header-contact-text small{ color:#A7B2C4; }
.header-contact-text strong{ color:#fff; }
.icon-btn{ color:#fff; }
.icon-btn:hover{ background:rgba(255,255,255,.10); }
.cart-btn{ border-color:rgba(255,255,255,.28); }
.cart-btn:hover{ border-color:rgba(255,255,255,.6); }
.menu-toggle span{ background:#fff; }
.categories-toggle{ background:var(--brand); }
.categories-toggle:hover, .categories-toggle[aria-expanded="true"]{ background:var(--brand-dark); }
.header-nav-link{ color:var(--text-on-dark); }
.header-nav-link:hover, .header-nav-link[aria-current="page"]{ color:#fff; }
.header-nav-aside{ color:#9FB4E8; }
.header-nav-aside:hover{ color:#fff; }

/* ============ ACENTOS: degradado del logo (morado → azul), sin celeste ============ */
.btn-primary, .header-search button, .product-quickadd, .categories-toggle{
  background:linear-gradient(135deg,#5B34E8 0%,#2F6BFF 100%); color:#fff;
}
.btn-primary:hover, .header-search button:hover, .product-quickadd:hover,
.categories-toggle:hover, .categories-toggle[aria-expanded="true"]{
  background:linear-gradient(135deg,#4A28CC 0%,#2557E0 100%);
}
.cart-count{ background:linear-gradient(135deg,#5B34E8 0%,#2F6BFF 100%); }
.header-nav-aside{ color:#fff; opacity:.92; }
.header-nav-aside:hover{ color:#fff; opacity:1; }
.header-nav-link::after{ background:linear-gradient(90deg,#5B34E8,#2F6BFF); }

/* Sin líneas blancas entre las franjas del encabezado */
.site-header{ border-bottom:0; }
.header-nav-bar{ border-top:0; }
.header-main{ border-bottom:0; }
.top-bar{ background:var(--navy-deep); }
.header-nav-bar{ margin-top:-1px; padding-top:1px; }

/* Solo el logo se acerca a la esquina izquierda; el resto del encabezado queda en su columna */
@media (min-width:1100px){
  .header-inner .brand{
    position:relative;
    left:calc(-1 * max(0px, (100vw - 1320px) / 2) - 24px + clamp(20px, 2.4vw, 48px));
  }
}

/* ============ PÁGINAS DE PRODUCTOS — orden y proporciones ============ */
/* El contenedor de productos heredaba un margen de página completa dentro de la columna: se achicaba y bajaba */
@media (min-width:861px){
  .catalog-layout .catalog-main{ max-width:none; margin:0; padding:0; }
  .catalog-layout{ grid-template-columns:260px minmax(0,1fr); gap:32px; padding-top:20px; }
  .cat-sidebar{ top:146px; max-height:calc(100vh - 170px); scrollbar-width:thin; }
}
.cat-sidebar-item{ padding:10px 12px; }
.catalog-toolbar{ margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--border); }

/* Tarjetas parejas: misma altura, texto recortado a 2 líneas, precio siempre abajo */
.product-grid{ gap:20px; }
.product-card{ height:100%; }
.product-media{ padding:18px; background:#fff; }
.product-info{ padding:14px 16px 16px; gap:6px; }
.product-name{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(1.35em * 2);
}
.product-sub{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(1.4em * 2);
}
.product-price-row{ margin-top:auto; padding-top:10px; }
.product-badge{ z-index:1; }
@media (min-width:1500px){ .catalog-layout{ max-width:1440px; } .product-grid{ grid-template-columns:repeat(4, 1fr); } }

/* Ficha de producto: imagen con presencia, fija al desplazarse, y bloque relacionados alineado */
.product-detail{ align-items:start; }
.product-gallery-main{ aspect-ratio:auto; min-height:440px; padding:32px; position:sticky; top:150px; background:#fff; }
.product-gallery-main img{ width:min(100%, 340px); height:auto; max-height:380px; }
.related-section .section-head{ padding:0; }
.related-section .product-grid{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:1080px){ .product-gallery-main{ position:static; min-height:320px; } .related-section .product-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:860px){ .related-section .product-grid{ grid-template-columns:repeat(2, 1fr); } }

/* Celular: el botón "+" va abajo a la derecha de la foto para no tapar la etiqueta */
@media (hover:none), (max-width:860px){
  .product-quickadd{ top:auto; bottom:10px; right:10px; width:34px; height:34px; }
}
@media (max-width:520px){
  .product-card .product-media{ padding:12px; }
  .product-name{ font-size:13.5px; }
  .catalog-layout .catalog-main{ padding-bottom:64px; }
}
.catalog-page-head{ padding-left:0; padding-right:0; }


/* ============ DOS CAMINOS: soporte técnico en San Salvador / venta a todo el país ============ */
.hero-stats strong{ white-space:nowrap; }
.hero-tile-cat{ line-height:1.35; max-width:62%; }
.coverage{ padding:72px 24px; background:var(--bg-alt); }
.coverage-inner{ max-width:var(--container); margin:0 auto; }
.coverage-head{ margin-bottom:28px; }
.coverage-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
.coverage-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-xl); padding:32px;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; box-shadow:var(--shadow-card);
}
.coverage-ico{
  width:56px; height:56px; border-radius:14px; background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; margin-bottom:6px;
}
.coverage-card h3{ font-family:var(--ff-display); font-size:22px; font-weight:700; color:var(--navy); }
.coverage-zone{ font-size:15px; font-weight:700; color:var(--brand); }
.coverage-card p{ color:var(--text-dim); font-size:15px; line-height:1.6; max-width:46ch; }
.coverage-card .shelf-link{ margin-top:8px; }
.coverage-hours{ margin-top:22px; text-align:center; color:var(--text-dim); font-size:14px; }
@media (max-width:760px){
  .coverage{ padding:48px 16px; }
  .coverage-grid{ grid-template-columns:minmax(0,1fr); }
  .coverage-card{ padding:24px; }
}
@media (min-width:1000px){ .hero-title{ font-size:clamp(28px, 2.3vw, 33px); line-height:1.15; } }
@media (max-width:640px){
  .hero-stats strong{ white-space:normal; font-size:17px; line-height:1.2; }
  .hero-stats span{ font-size:12px; }
  .hero-title span{ text-wrap:balance; }
  .announce-item{ font-size:12px; }
}