/* ═══════════════════════════════════════════════════════════════════════
   SATEC · v3 «Claro» — rediseño con UI UX Pro Max (2026-10-10)
   GUBOS Developer Costa Rica · BCom A.i Xpert

   Se carga DESPUÉS de satec.css: redefine sus variables (así todo lo que no
   se rehízo hereda la paleta nueva) y agrega los componentes `v3-`.
   Dirección: «Tecnología que te respalda» — tema claro, producto primero,
   verde SATEC como color de acción, azul como apoyo, superficies blancas
   sobre un gris azulado muy suave. Tipos: Space Grotesk + DM Sans.
   Guía completa: DISENO_V3.md
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Marca */
  --v3-green:   #00875A;   /* acción: fondo de botones con texto blanco (4,55:1) */
  --v3-green-brand: #00A86B; /* verde de marca, solo para acentos sin texto encima */
  --v3-green-d: #007F52;   /* verde para TEXTO sobre blanco (5,0:1) */
  --v3-green-50:#E8F7F0;
  --v3-blue:    #0A63E6;
  --v3-blue-d:  #0849B0;
  --v3-blue-50: #EAF2FE;
  --v3-coral:   #F0533A;   /* ofertas y avisos de urgencia, con moderación */
  --v3-coral-50:#FDEDEA;
  --v3-grad:    linear-gradient(120deg, #0A63E6 0%, #0BB8A6 52%, #00A86B 100%);

  /* Neutros */
  --v3-bg:      #F6F8FB;
  --v3-bg-2:    #EEF3F8;
  --v3-surface: #FFFFFF;
  --v3-ink:     #0B1B2E;
  --v3-ink-2:   #334256;
  --v3-muted:   #5D6B7E;   /* 5,3:1 sobre blanco */
  --v3-line:    #E2E8F0;
  --v3-line-2:  #D3DCE7;

  --v3-r-sm: 10px; --v3-r: 14px; --v3-r-lg: 20px; --v3-r-xl: 28px;
  --v3-sh-1: 0 1px 2px rgba(11,27,46,.05), 0 1px 1px rgba(11,27,46,.03);
  --v3-sh-2: 0 4px 14px rgba(11,27,46,.07), 0 1px 3px rgba(11,27,46,.05);
  --v3-sh-3: 0 18px 44px -12px rgba(11,27,46,.20);
  --v3-ease: cubic-bezier(.2,.7,.2,1);
  --v3-f-head: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --v3-f-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --v3-maxw: 1280px;

  /* Las variables de satec.css apuntan a la paleta nueva. */
  --blue: var(--v3-blue); --green: var(--v3-green); --teal: #0BB8A6;
  --ink: var(--v3-ink); --muted: var(--v3-muted); --bg: var(--v3-bg);
  --surface: var(--v3-surface); --line: var(--v3-line);
  --accent: var(--v3-grad);
  --radius: var(--v3-r); --radius-lg: var(--v3-r-lg);
  --shadow-sm: var(--v3-sh-1); --shadow: var(--v3-sh-2); --shadow-lg: var(--v3-sh-3);
  --maxw: var(--v3-maxw);
  --font: var(--v3-f-head); --font-body: var(--v3-f-body);
}

/* Un componente con `display:` propio no puede ganarle al atributo hidden. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
body {
  background: var(--v3-bg); color: var(--v3-ink);
  font-family: var(--v3-f-body); font-size: 15.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: var(--v3-f-head); color: var(--v3-ink); letter-spacing: -.02em; }
.wrap { max-width: var(--v3-maxw); }
a { transition: color .15s; }
::selection { background: color-mix(in srgb, #BFEBD9 var(--s4-mixp, 100%), var(--s4-surface, #fff)); }

/* Foco visible y discreto: anillo verde de 2 px, sin recuadros gruesos. */
:focus-visible { outline: 2px solid rgba(0,168,107,.55); outline-offset: 2px; border-radius: 6px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10,99,230,.16); border-color: #93B8F5 !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── Botones ────────────────────────────────────────────────────────── */
.btn { font-family: var(--v3-f-body); font-weight: 700; border-radius: 12px; letter-spacing: 0; cursor: pointer;
  transition: transform .18s var(--v3-ease), box-shadow .18s, background .18s, color .18s, border-color .18s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--v3-green); color: #fff; border-color: var(--v3-green);
  box-shadow: 0 8px 20px -10px rgba(0,168,107,.75); }
.btn-primary:hover { background: #00744D; transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(0,168,107,.8); }
.btn-outline { background: var(--s4-surface, #fff); color: var(--v3-ink); border: 1.5px solid var(--v3-line-2); }
.btn-outline:hover { border-color: var(--v3-green); color: var(--v3-green-d); }
.v3-btn-blue { background: var(--v3-blue); color: #fff; border: 0; }
.v3-btn-blue:hover { background: var(--v3-blue-d); }

.eyebrow { font-family: var(--v3-f-body); color: var(--v3-green-d); font-weight: 800; letter-spacing: .14em; font-size: 12px; }
.section-title { font-size: clamp(26px, 3.1vw, 38px); font-weight: 700; }
.grad-text { background: var(--v3-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ═══ Encabezado ═══════════════════════════════════════════════════════ */
header { background: rgba(255,255,255,.86); backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px); border-bottom: 1px solid var(--v3-line);
  box-shadow: none; transition: box-shadow .2s; }
header.v3-scrolled { box-shadow: 0 8px 24px -16px rgba(11,27,46,.25); }
.top-bar { background: var(--s4-band, #0B1B2E); color: #DDE6F1; font-size: 12.5px; }
.top-bar a { color: #DDE6F1; }
.top-bar a:hover { color: #fff; }
.top-bar .slogan b { color: #6EE7B7; }
.header { background: transparent; border: 0; box-shadow: none; }
.header-in { gap: 18px; padding-top: 12px; padding-bottom: 12px; }
.header .logo-img { height: 40px; }

/* Búsqueda protagonista: es lo primero que hace quien llega a una tienda. */
.v3-search { flex: 1; max-width: 640px; display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 6px 0 16px; border-radius: 14px; cursor: text;
  background: var(--v3-bg); border: 1.5px solid var(--v3-line); color: var(--v3-muted);
  font: 500 14.5px var(--v3-f-body); text-align: left; transition: border-color .15s, background .15s, box-shadow .15s; }
.v3-search:hover { border-color: var(--v3-line-2); background: var(--s4-surface, #fff); }
.v3-search i, .v3-search svg { width: 18px; height: 18px; color: var(--v3-muted); flex-shrink: 0; }
.v3-search .v3-s-txt { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.v3-search .v3-s-go { height: 36px; padding: 0 16px; border-radius: 10px; background: var(--v3-green); color: #fff;
  font-weight: 800; font-size: 13.5px; display: inline-flex; align-items: center; }

.v3-acts { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.v3-ic { position: relative; width: 44px; height: 44px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; color: var(--v3-ink-2); background: transparent; border: 0; cursor: pointer;
  transition: background .15s, color .15s; text-decoration: none; }
.v3-ic:hover { background: var(--v3-bg-2); color: var(--v3-ink); }
.v3-ic i, .v3-ic svg { width: 21px; height: 21px; }
.v3-ic .cart-count { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--v3-coral); color: #fff; font: 800 11px/18px var(--v3-f-body); text-align: center; }
.v3-b2b { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; margin-left: 6px;
  border-radius: 12px; background: var(--s4-band, #0B1B2E); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }
.v3-b2b:hover { background: #18304F; color: #fff; }
.v3-b2b i, .v3-b2b svg { width: 17px; height: 17px; }

/* Barra de navegación (segunda fila) */
.v3-navbar { border-top: 1px solid var(--v3-line); }
.v3-navbar .wrap { position: relative; display: flex; align-items: center; gap: 10px; }
.v3-navbar .nav { display: flex; align-items: center; gap: 2px; flex: 1; min-height: 48px; }
.v3-navbar .nav > a, .v3-navbar .dd-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px;
  border-radius: 10px; color: var(--v3-ink-2); font: 600 14px var(--v3-f-body); background: transparent; border: 0; cursor: pointer; }
.v3-navbar .nav > a:hover, .v3-navbar .dd-btn:hover, .v3-navbar .dd:hover .dd-btn, .v3-navbar .dd:focus-within .dd-btn { background: var(--v3-bg-2); color: var(--v3-ink); }
.v3-navbar .nav > a.active { color: var(--v3-green-d); background: var(--v3-green-50); }
.v3-navbar .nav > a.v3-oferta { color: color-mix(in srgb, #C2361F, #fff var(--s4-lift, 0%)); }
.v3-navbar .nav > a.v3-oferta:hover { background: var(--v3-coral-50); color: color-mix(in srgb, #A92C17, #fff var(--s4-lift, 0%)); }
.v3-navbar .nav > a i, .v3-navbar .nav > a svg { width: 16px; height: 16px; }
.v3-navbar .v3-cats-btn { background: var(--s4-band, #0B1B2E) !important; color: #fff !important; padding: 0 14px !important; }
.v3-navbar .v3-cats-btn:hover { background: #18304F !important; }
.v3-nav-note { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--v3-muted); white-space: nowrap; }
.v3-nav-note i, .v3-nav-note svg { width: 16px; height: 16px; color: var(--v3-green-d); }

/* Los mega-menús se abren a lo ancho de la barra y no centrados en su botón:
   el primero queda al borde izquierdo y centrado se salía de la pantalla. */
.v3-navbar .dd { position: static; }
.v3-navbar .dd-menu { left: 0; right: 0; margin: 0 auto; transform: translateY(8px); width: min(1040px, calc(100% - 32px));
  top: calc(100% + 6px); border-radius: var(--v3-r-lg); border: 1px solid var(--v3-line); box-shadow: var(--v3-sh-3); }
.v3-navbar .dd:hover .dd-menu, .v3-navbar .dd:focus-within .dd-menu { transform: translateY(0); }
.v3-navbar .dd-menu::after { display: none; }
.dd-item:hover { background: var(--v3-bg); }
.dd-item .di { background: var(--v3-green-50); color: var(--v3-green-d); }
.dd-all { color: var(--v3-green-d); }

/* Menú del teléfono */
.burger { width: 44px; height: 44px; border-radius: 12px; }
.drawer { background: var(--s4-surface, #fff); }
.drawer nav a { font-weight: 600; color: var(--v3-ink); }
.drawer-cta { background: var(--s4-band, #0B1B2E) !important; color: #fff !important; }

@media (max-width: 1080px) { .v3-nav-note { display: none; } }
@media (max-width: 960px) {
  .v3-navbar { display: none; }
  .v3-b2b { display: none; }
  .v3-acts .v3-ic-asis, .v3-acts .v3-ic-cta { display: none; }
}
@media (max-width: 640px) {
  .header-in { flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .header .logo-img { height: 34px; }
  .v3-search { order: 3; flex-basis: 100%; max-width: none; height: 46px; }
  .v3-search .v3-s-go { display: none; }
  .top-bar .slogan { font-size: 11.5px; }
}

/* ═══ Pie ══════════════════════════════════════════════════════════════
   Claro, como el resto: el sitio no termina en un bloque negro. */
.footer { background: var(--s4-surface, #fff); color: var(--v3-ink-2); border-top: 1px solid var(--v3-line); margin-top: 40px; }
.footer h5 { color: var(--v3-ink); font-family: var(--v3-f-head); letter-spacing: 0; text-transform: none; font-size: 15px; }
.footer a { color: var(--v3-muted); }
.footer a:hover { color: var(--v3-green-d); }
.footer .copy { border-top: 1px solid var(--v3-line); color: var(--v3-muted); }
.footer .fsoc a { background: var(--v3-bg-2); color: var(--v3-ink-2); }
.footer .fsoc a:hover { background: var(--v3-green); color: #fff; }
.v3-foot-lema { font: 700 17px var(--v3-f-head); color: var(--v3-ink); margin: 10px 0 4px; }
.v3-foot-sub { font-size: 14px; color: var(--v3-muted); max-width: 320px; }
.v3-foot-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--v3-line); margin-bottom: 26px; }
.v3-foot-trust div { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--v3-ink-2); }
.v3-foot-trust b { display: block; color: var(--v3-ink); font-size: 14.5px; }
.v3-foot-trust .fi { width: 42px; height: 42px; border-radius: 12px; background: var(--v3-green-50); color: var(--v3-green-d);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.v3-foot-trust .fi i, .v3-foot-trust .fi svg { width: 20px; height: 20px; }
@media (max-width: 860px) { .v3-foot-trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .v3-foot-trust { grid-template-columns: 1fr; } }

/* ═══ Tarjeta de producto (la usan tienda, portada, marcas y novedades) ══ */
.prod-grid { gap: 18px; }
.prod-card { background: var(--s4-surface, #fff); border: 1px solid var(--v3-line); border-radius: var(--v3-r-lg); box-shadow: none;
  transition: transform .22s var(--v3-ease), box-shadow .22s, border-color .22s; overflow: hidden; }
.prod-card:hover { transform: translateY(-3px); box-shadow: var(--v3-sh-3); border-color: transparent; }
.prod-media { background: linear-gradient(180deg, #F8FAFC, #EFF3F8); }
.prod-badge { background: var(--v3-coral); border-radius: 8px; font-family: var(--v3-f-body); font-weight: 800; }
.prod-card .stock-badge.ok { color: var(--v3-green-d); }
.prod-card .stock-badge.ok .dot { background: var(--v3-green); }
.prod-card .stock-badge.no { color: color-mix(in srgb, #9A5B00, #fff var(--s4-lift, 0%)); }
.prod-price .now { font-family: var(--v3-f-head); color: var(--v3-ink); font-weight: 700; letter-spacing: -.02em; }
.prod-price .was { color: var(--v3-muted); }
.prod-add { background: var(--v3-green); color: #fff; border-radius: 12px; box-shadow: 0 8px 18px -10px rgba(0,168,107,.8); }
.prod-add:hover { background: #00744D; transform: scale(1.06); }

/* ═══ Portada ══════════════════════════════════════════════════════════ */
.v3-sec { padding: 64px 0; }
.v3-sec-tight { padding: 40px 0; }
.v3-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.v3-sec-head h2 { margin: 6px 0 4px; font-size: clamp(26px, 3vw, 36px); font-weight: 700; }
.v3-sec-head p { margin: 0; color: var(--v3-muted); max-width: 620px; }
.v3-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--v3-green-d); text-decoration: none; white-space: nowrap; }
.v3-link:hover { color: var(--v3-ink); }
.v3-link i, .v3-link svg { width: 17px; height: 17px; transition: transform .2s; }
.v3-link:hover i, .v3-link:hover svg { transform: translateX(3px); }

/* Hero por defecto (si el CRM no tiene banners activos) */
.v3-hero { position: relative; overflow: hidden; padding: 56px 0 44px;
  background:
    radial-gradient(900px 420px at 92% -10%, rgba(10,99,230,.10), transparent 60%),
    radial-gradient(700px 380px at -5% 110%, rgba(0,168,107,.12), transparent 60%),
    linear-gradient(180deg, var(--s4-surface, #fff) 0%, var(--v3-bg) 100%); }
.v3-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(11,27,46,.08) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); }
.v3-hero-in { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
.v3-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px;
  background: var(--s4-surface, #fff); border: 1px solid var(--v3-line); box-shadow: var(--v3-sh-1); font-size: 13px; font-weight: 600; color: var(--v3-ink-2); }
.v3-pill b { background: var(--v3-green); color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; letter-spacing: .02em; }
.v3-hero h1 { font-size: clamp(36px, 5.2vw, 62px); line-height: 1.04; margin: 18px 0 16px; font-weight: 700; letter-spacing: -.035em; }
.v3-hero h1 .v3-h-green { color: var(--v3-green); }
.v3-hero .v3-lead { font-size: clamp(16px, 1.4vw, 18.5px); color: var(--v3-ink-2); max-width: 560px; margin: 0 0 24px; }
.v3-hero-search { display: flex; align-items: center; gap: 10px; max-width: 580px; height: 60px; padding: 0 8px 0 18px;
  border-radius: 16px; background: var(--s4-surface, #fff); border: 1.5px solid var(--v3-line-2); box-shadow: var(--v3-sh-2); }
.v3-hero-search:focus-within { border-color: var(--v3-green); box-shadow: 0 0 0 4px rgba(0,168,107,.12), var(--v3-sh-2); }
.v3-hero-search i, .v3-hero-search svg { width: 20px; height: 20px; color: var(--v3-muted); flex-shrink: 0; }
.v3-hero-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 500 16px var(--v3-f-body); color: var(--v3-ink); }
.v3-hero-search button { height: 44px; padding: 0 20px; border-radius: 12px; border: 0; background: var(--v3-green); color: #fff; font: 800 15px var(--v3-f-body); cursor: pointer; }
.v3-hero-search button:hover { background: #00744D; }
.v3-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.v3-chips span { font-size: 13px; color: var(--v3-muted); align-self: center; margin-right: 2px; }
.v3-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 999px; background: var(--s4-surface, #fff);
  border: 1px solid var(--v3-line); font-size: 13.5px; font-weight: 600; color: var(--v3-ink-2); text-decoration: none; cursor: pointer; }
.v3-chip:hover { border-color: var(--v3-green); color: var(--v3-green-d); }
.v3-stats { display: flex; gap: 34px; margin-top: 30px; flex-wrap: wrap; }
.v3-stats b { display: block; font: 700 28px var(--v3-f-head); color: var(--v3-ink); letter-spacing: -.02em; }
.v3-stats span { font-size: 13px; color: var(--v3-muted); }

/* Mosaico de marcas del hero */
.v3-mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.v3-mo { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 138px;
  padding: 18px; border-radius: var(--v3-r-lg); background: var(--s4-surface, #fff); border: 1px solid var(--v3-line); box-shadow: var(--v3-sh-1);
  text-decoration: none; color: var(--v3-ink); overflow: hidden; transition: transform .22s var(--v3-ease), box-shadow .22s; }
.v3-mo:hover { transform: translateY(-3px); box-shadow: var(--v3-sh-3); }
.v3-mo::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--mk, var(--v3-green)); }
.v3-mo img { max-height: 34px; max-width: 70%; object-fit: contain; object-position: left; }
.v3-mo .v3-mo-lema { font-size: 13px; color: var(--v3-muted); line-height: 1.4; }
.v3-mo .v3-mo-n { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--v3-ink-2); }
.v3-mo .v3-mo-n i, .v3-mo .v3-mo-n svg { width: 15px; height: 15px; }
.v3-mo-wide { grid-column: span 2; flex-direction: row; align-items: center; min-height: 0; background: var(--s4-band, #0B1B2E); color: #fff; border: 0; }
.v3-mo-wide::after { display: none; }
.v3-mo-wide b { font: 700 18px var(--v3-f-head); }
.v3-mo-wide span { color: #C9D6E6; font-size: 13.5px; }
.v3-mo-wide .v3-mo-go { margin-left: auto; width: 42px; height: 42px; border-radius: 12px; background: var(--v3-green); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media (max-width: 960px) { .v3-hero-in { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 520px) {
  .v3-hero { padding: 34px 0 30px; }
  .v3-hero-search { height: 54px; }
  .v3-hero-search button { padding: 0 14px; }
  .v3-mo { min-height: 118px; padding: 14px; }
  .v3-stats { gap: 22px; }
}

/* Banda de confianza */
.v3-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.v3-trust > div { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--v3-r); background: var(--s4-surface, #fff); border: 1px solid var(--v3-line); }
.v3-trust .ti { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.v3-trust .ti i, .v3-trust .ti svg { width: 21px; height: 21px; }
.v3-trust .t-g { background: var(--v3-green-50); color: var(--v3-green-d); }
.v3-trust .t-b { background: var(--v3-blue-50); color: var(--v3-blue-d); }
.v3-trust b { display: block; font-size: 14.5px; color: var(--v3-ink); }
.v3-trust small { font-size: 13px; color: var(--v3-muted); }
@media (max-width: 960px) { .v3-trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .v3-trust { grid-template-columns: 1fr; } }

/* Marcas que representamos (temáticas) */
.v3-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.v3-brand { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 22px; min-height: 196px;
  border-radius: var(--v3-r-lg); background: var(--s4-surface, #fff); border: 1px solid var(--v3-line); text-decoration: none; color: var(--v3-ink);
  overflow: hidden; isolation: isolate; transition: transform .22s var(--v3-ease), box-shadow .22s, border-color .22s; }
.v3-brand::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .9;
  background: radial-gradient(260px 160px at 100% 0%, color-mix(in srgb, var(--mk, #00A86B) 14%, transparent), transparent 70%); }
.v3-brand:hover { transform: translateY(-4px); box-shadow: var(--v3-sh-3); border-color: color-mix(in srgb, var(--mk, #00A86B) 45%, var(--s4-surface, #fff)); }
.v3-brand-logo { height: 58px; display: flex; align-items: center; }
.v3-brand-logo img { max-height: 44px; max-width: 72%; object-fit: contain; object-position: left; }
.v3-brand-logo.placa-oscura { background: var(--s4-band, #0B1B2E); border-radius: 12px; padding: 0 14px; align-self: flex-start; }
.v3-brand-lema { font-size: 14px; color: var(--v3-ink-2); line-height: 1.45; flex: 1; }
.v3-brand-foot { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 700; color: var(--v3-muted); }
.v3-brand-foot .go { width: 36px; height: 36px; border-radius: 10px; background: var(--v3-bg-2); color: var(--v3-ink); display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.v3-brand:hover .v3-brand-foot .go { background: var(--mk, var(--v3-green)); color: #fff; }
.v3-brand-foot .go i, .v3-brand-foot .go svg { width: 17px; height: 17px; }

/* Categorías */
.v3-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.v3-cat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--v3-r); background: var(--s4-surface, #fff);
  border: 1px solid var(--v3-line); text-decoration: none; color: var(--v3-ink); transition: border-color .18s, box-shadow .18s, transform .18s; }
.v3-cat:hover { border-color: var(--v3-green); box-shadow: var(--v3-sh-2); transform: translateY(-2px); }
.v3-cat .v3-ci { width: 42px; height: 42px; border-radius: 12px; background: var(--v3-bg-2); color: var(--v3-ink-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .18s, color .18s; }
.v3-cat:hover .v3-ci { background: var(--v3-green-50); color: var(--v3-green-d); }
.v3-cat .v3-ci i, .v3-cat .v3-ci svg { width: 20px; height: 20px; }
.v3-cat b { display: block; font-size: 14px; line-height: 1.25; }
.v3-cat em { font-style: normal; font-size: 12.5px; color: var(--v3-muted); }

/* Ofertas */
.v3-ofertas { border-radius: var(--v3-r-xl); padding: 34px; background: linear-gradient(135deg, color-mix(in srgb, #FFF6F3 var(--s4-mixp, 100%), var(--s4-surface, var(--s4-surface, #fff))), var(--s4-surface, #fff) 60%); border: 1px solid #F8D7CF; }
.v3-ofertas .eyebrow { color: color-mix(in srgb, #C2361F, #fff var(--s4-lift, 0%)); }
@media (max-width: 520px) { .v3-ofertas { padding: 22px 16px; border-radius: var(--v3-r-lg); } }

/* Marquesina de marcas (clara) */
.v3-marq { position: relative; overflow: hidden; padding: 6px 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.v3-marq .brand-marquee { margin: 8px 0; }
.v3-marq .brand-card { background: var(--s4-surface, #fff); border: 1px solid var(--v3-line); border-radius: var(--v3-r); box-shadow: none; }
.v3-marq .brand-card:hover { border-color: var(--v3-green); box-shadow: var(--v3-sh-2); }
.v3-marq .brand-card b { color: var(--v3-muted); }

/* Bloque Área Comercial / B2B */
.v3-b2b-band { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; padding: 40px;
  border-radius: var(--v3-r-xl); background: var(--s4-band, #0B1B2E); color: #fff; overflow: hidden; position: relative; }
.v3-b2b-band::before { content: ''; position: absolute; width: 520px; height: 520px; right: -140px; top: -220px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,168,107,.45), transparent); pointer-events: none; }
.v3-b2b-band h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); margin: 8px 0 10px; }
.v3-b2b-band p { color: #C9D6E6; margin: 0 0 22px; max-width: 520px; }
.v3-b2b-band .eyebrow { color: #6EE7B7; }
.v3-b2b-list { position: relative; display: grid; gap: 10px; }
.v3-b2b-list div { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--v3-r); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
.v3-b2b-list i, .v3-b2b-list svg { width: 20px; height: 20px; color: #6EE7B7; flex-shrink: 0; margin-top: 2px; }
.v3-b2b-list b { display: block; color: #fff; font-size: 14.5px; }
.v3-b2b-list span { color: #B8C7DA; font-size: 13.5px; }
@media (max-width: 860px) { .v3-b2b-band { grid-template-columns: 1fr; padding: 26px 20px; } }

/* Ayuda / asesor */
.v3-help { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 30px 34px;
  border-radius: var(--v3-r-xl); background: linear-gradient(120deg, var(--v3-green-50), var(--v3-blue-50)); border: 1px solid #D5EBE2; }
.v3-help h2 { margin: 0 0 6px; font-size: clamp(22px, 2.4vw, 30px); }
.v3-help p { margin: 0; color: var(--v3-ink-2); }
.v3-help-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.v3-wa { background: #25D366; color: #fff; border: 0; }
.v3-wa:hover { background: #1EBE5B; color: #fff; }
.v3-wa svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 760px) { .v3-help { grid-template-columns: 1fr; padding: 24px 20px; } }

/* Redes (claras) */
.v3-redes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.v3-red { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--v3-r); background: var(--s4-surface, #fff);
  border: 1px solid var(--v3-line); text-decoration: none; color: var(--v3-ink); transition: border-color .18s, transform .18s, box-shadow .18s; }
.v3-red:hover { transform: translateY(-2px); box-shadow: var(--v3-sh-2); border-color: var(--rc); }
.v3-red .ri { width: 42px; height: 42px; border-radius: 12px; background: var(--rc); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.v3-red .ri svg { width: 20px; height: 20px; fill: currentColor; }
.v3-red b { display: block; font-size: 14.5px; }
.v3-red em { font-style: normal; font-size: 12.5px; color: var(--v3-muted); }
@media (max-width: 860px) { .v3-redes { grid-template-columns: 1fr 1fr; } }

/* Aparición suave al entrar en pantalla */
.v3-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--v3-ease), transform .6s var(--v3-ease); }
.v3-reveal.is-in { opacity: 1; transform: none; }

/* Hero con banners del CRM: solo el marco, el contenido lo decide el CRM. */
.hero-slider { border-radius: 0; }
.hs-nav { background: rgba(255,255,255,.9); color: var(--v3-ink); box-shadow: var(--v3-sh-2); }
.hs-dot.on { background: var(--v3-green); }

/* Buscador flotante: velo claro (el sitio es claro) */
.spot-fondo { background: rgba(240,244,249,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.spot-lema { color: var(--v3-ink-2) !important; }
.spot-campo { border-color: var(--v3-line-2); }

/* Asistente */
.chat-fab { background: var(--v3-green); box-shadow: 0 14px 30px -12px rgba(0,168,107,.9); }
.chat-hd { background: var(--s4-band, #0B1B2E); }

/* Ajustes sobre satec.css: el alto fijo de 74px y el corte de 1000px. */
.header-in { height: auto; min-height: 72px; }
@media (max-width: 1000px) { .v3-navbar, .v3-b2b, .v3-acts .v3-ic-asis { display: none; } .burger { display: block; } }
.v3-acts .burger { margin-left: 4px; }
.footer .logo-img { height: 40px; }
.v3-foot-trust span:not(.fi) { line-height: 1.4; }
.v3-foot-trust b { margin-bottom: 2px; }
.v3-mo { flex-direction: column; }
.v3-mo-ic { width: 46px; height: 46px; border-radius: 13px; background: color-mix(in srgb, var(--mk) 12%, var(--s4-surface, #fff)); display: inline-flex; align-items: center; justify-content: center; }
.v3-mo-ic i, .v3-mo-ic svg { width: 23px; height: 23px; }
.v3-mo-t { display: block; font: 700 16.5px/1.25 var(--v3-f-head); color: var(--v3-ink); margin-bottom: 3px; }
.v3-mo-wide { flex-direction: row; }
.v3-mo-wide b { color: #fff; }
.v3-mo-wide .v3-mo-go i, .v3-mo-wide .v3-mo-go svg { width: 20px; height: 20px; color: #fff; }
.v3-wa svg { width: 18px; height: 18px; }

/* Hero debajo de los banners del CRM: mismo contenido, más compacto. */
.v3-hero.v3-hero-bajo { padding: 36px 0 30px; }
.v3-hero.v3-hero-bajo h1 { font-size: clamp(28px, 3.4vw, 42px); margin: 14px 0 10px; }
.v3-hero.v3-hero-bajo .v3-stats { margin-top: 22px; }
/* Las columnas en minmax(0,…): con 1fr, el texto más largo ensanchaba la
   tarjeta y la página se salía de lado en el teléfono. */
@media (max-width: 860px) { .v3-redes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .v3-redes { grid-template-columns: 1fr; } }
.v3-red, .v3-cat, .v3-trust > div, .v3-mo { min-width: 0; }
.v3-red > span:last-child, .v3-cat > span:last-child { min-width: 0; overflow: hidden; }
.v3-red em, .v3-red b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Teléfono: dos columnas en marcas, categorías y confianza. A una sola
   columna la portada medía 11.000 px y las marcas se comían tres pantallas. */
@media (max-width: 640px) {
  .v3-sec { padding: 44px 0; }
  .v3-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .v3-brand { min-height: 0; padding: 14px; gap: 10px; border-radius: var(--v3-r); }
  .v3-brand-logo { height: 40px; }
  .v3-brand-logo img { max-height: 30px; max-width: 100%; }
  .v3-brand-lema { font-size: 12.5px; }
  .v3-brand-foot { font-size: 12px; }
  .v3-brand-foot .go { width: 30px; height: 30px; }
  .v3-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .v3-cat { padding: 10px; gap: 10px; }
  .v3-cat .v3-ci { width: 36px; height: 36px; }
  .v3-cat b { font-size: 13px; }
  .v3-cat:nth-child(n+11) { display: none; }
  .v3-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .v3-trust > div { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .v3-trust .ti { width: 38px; height: 38px; }
  .v3-trust b { font-size: 13.5px; }
  .v3-sec-head { margin-bottom: 18px; }
  .v3-chips { gap: 6px; }
  .v3-chip { height: 32px; font-size: 13px; }
}

/* Spotlight sobre velo claro: la caja es transparente (así fue diseñada),
   solo el campo es una tarjeta. Las teclas del pie pasan a tinta oscura. */
.spot-fondo { background: rgba(236,241,247,.80); }
.spot-campo { background: var(--s4-surface, #fff); border: 1.5px solid var(--v3-line-2); box-shadow: var(--v3-sh-3); }
.spot-campo:focus-within { border-color: var(--v3-green); }
.spot-campo svg { color: var(--v3-green-d); }
.spot-campo input:focus-visible { box-shadow: none; }
.spot-pie { color: var(--v3-ink-2) !important; }
.spot-pie kbd { background: var(--s4-surface, #fff) !important; border-color: var(--v3-line-2) !important; color: var(--v3-ink) !important; }

/* Cajón del teléfono: encabezado blanco con el logo, como la barra. */
.drawer-hd { background: var(--s4-surface, #fff); color: var(--v3-ink); border-bottom: 1px solid var(--v3-line); }
.drawer-hd .chat-x { color: var(--v3-ink); background: var(--v3-bg-2); }
.drawer-hd .v3-dlogo { height: 32px; width: auto; }
.drawer .drawer-search .search .go { background: var(--v3-green); }

/* Tarjeta «Consultar» en el teléfono: el precio va en su propia fila y los
   dos botones debajo; en una sola fila se montaban sobre el monto. */
@media (max-width: 560px) {
  .consultar-dos { flex-wrap: wrap; row-gap: 8px; }
  .consultar-dos .prod-price { flex: 1 0 100%; margin-right: 0; }
  .consultar-dos .cd-btn { flex: 1 1 0; width: auto; }
}
html { background: var(--v3-bg); }