/* ═══════════════════════════════════════════════════════════════════════
   SATEC · v4 «Vitrina» — 10/10/2026
   GUBOS Developer Costa Rica · BCom A.i Xpert

   Concepto: «Apple Store × Amazon». Una tienda de tecnología que vende por
   la foto: vitrina en bento con productos reales, mundos de marca a todo el
   ancho (Garmin, Meade, Fellowes…), Top 10 con números gigantes y
   departamentos con foto. Tema claro sobre gris Apple (#F5F5F7).

   Colores tomados del logo de SATEC: azul marino #134465 y verde #1B793D.
   Se carga al final: pisa satec.css y v3.css, y redefine los tokens --v3-*
   para que las páginas internas hereden la paleta y la tipografía nuevas.
   Prefijo de clases: s4-
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --s4-bg:      #F5F5F7;
  --s4-bg-2:    #EBEBEF;
  --s4-surface: #FFFFFF;
  --s4-ink:     #0B1220;
  --s4-ink-2:   #374151;
  --s4-muted:   #5F6673;           /* 5,0:1 sobre blanco, 4,6:1 sobre el gris */
  --s4-line:    #E3E5EA;
  --s4-line-2:  #D4D7DE;

  --s4-navy:    #134465;           /* azul del logo */
  --s4-navy-2:  #0E3350;
  --s4-green:   #1B793D;           /* verde del logo: botones (5,5:1 con blanco) */
  --s4-green-2: #156131;
  --s4-green-l: #E7F4EC;
  --s4-sun:     #FFB020;           /* Top 10 y «más vendido», siempre con tinta */
  --s4-coral:   #E5484D;
  --s4-green-t: #1B793D;           /* verde para TEXTO */
  --s4-solid:   #0B1220;           /* botones «tinta» */
  --s4-on-solid:#FFFFFF;
  --s4-band:    #0B1220;           /* banda oscura de ayuda */
  --s4-tint:    #EAF1F7;
  --s4-plate:   #F5F5F7;           /* fondo de las fotos de producto */

  --s4-r-sm: 12px; --s4-r: 18px; --s4-r-lg: 26px; --s4-r-xl: 34px;
  --s4-sh-1: 0 1px 2px rgba(11,18,32,.06);
  --s4-sh-2: 0 10px 30px -12px rgba(11,18,32,.18);
  --s4-sh-3: 0 30px 60px -20px rgba(11,18,32,.28);
  --s4-ease: cubic-bezier(.2,.8,.2,1);
  --s4-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --s4-maxw: 1360px;

  /* Las páginas internas usan los tokens v3: se reapuntan a los v4. */
  --v3-bg: var(--s4-bg); --v3-bg-2: var(--s4-bg-2); --v3-surface: var(--s4-surface);
  --v3-ink: var(--s4-ink); --v3-ink-2: var(--s4-ink-2); --v3-muted: var(--s4-muted);
  --v3-line: var(--s4-line); --v3-line-2: var(--s4-line-2);
  --v3-green: var(--s4-green); --v3-green-d: var(--s4-green-t); --v3-green-50: var(--s4-green-l);
  --v3-blue: var(--s4-navy); --v3-blue-d: var(--s4-navy-2); --v3-blue-50: #E8EEF4;
  --v3-f-head: var(--s4-font); --v3-f-body: var(--s4-font);
  --v3-r: var(--s4-r); --v3-r-lg: var(--s4-r-lg); --v3-r-xl: var(--s4-r-xl);
  --v3-maxw: var(--s4-maxw);
  --font: var(--s4-font); --font-body: var(--s4-font);
  --blue: var(--s4-navy); --green: var(--s4-green); --ink: var(--s4-ink);
  --bg: var(--s4-bg); --maxw: var(--s4-maxw);
}

html { background: var(--s4-bg); }
body { background: var(--s4-bg); color: var(--s4-ink); font-family: var(--s4-font); font-size: 15px;
  letter-spacing: -.005em; }
h1, h2, h3, h4, h5 { font-family: var(--s4-font); letter-spacing: -.03em; }
.wrap { max-width: var(--s4-maxw); }
.btn-primary { background: var(--s4-green); border-color: var(--s4-green); box-shadow: none; }
.btn-primary:hover { background: var(--s4-green-2); box-shadow: 0 10px 22px -12px rgba(27,121,61,.8); }
.eyebrow { color: var(--s4-green-t); letter-spacing: .12em; }
:focus-visible { outline-color: rgba(27,121,61,.6); }

/* ═══ Encabezado ═══════════════════════════════════════════════════════ */
header.s4-hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--s4-surface);
  border-bottom: 1px solid var(--s4-line); backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: box-shadow .2s; }
header.s4-hdr.v3-scrolled { box-shadow: 0 10px 30px -18px rgba(11,18,32,.35); }
.s4-bar { position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; }
.s4-bar .logo-img { height: 42px; }

/* Departamentos (el mega-menú de categorías) */
.s4-dep.dd { position: static; }
.s4-dep .dd-btn { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 16px;
  border-radius: 14px; background: var(--s4-navy); color: #fff; font: 700 14px var(--s4-font); border: 0; cursor: pointer;
  transition: background .18s; white-space: nowrap; }
.s4-dep .dd-btn:hover, .s4-dep:hover .dd-btn, .s4-dep:focus-within .dd-btn { background: var(--s4-navy-2); color: #fff; }
.s4-dep .dd-btn svg { width: 19px; height: 19px; }

/* Buscador con selector de departamento, como el de las tiendas grandes */
.s4-q { flex: 1; min-width: 0; display: flex; align-items: stretch; height: 48px; border-radius: 14px;
  background: var(--s4-bg); border: 2px solid transparent; overflow: hidden; transition: border-color .18s, background .18s, box-shadow .18s; }
.s4-q:hover { background: var(--s4-bg-2); }
.s4-q:focus-within { background: var(--s4-surface); border-color: var(--s4-green); box-shadow: 0 0 0 4px rgba(27,121,61,.12); }
.s4-q select { flex: 0 0 auto; max-width: 168px; border: 0; background: transparent; padding: 0 30px 0 16px; cursor: pointer;
  font: 600 13px var(--s4-font); color: var(--s4-ink-2); border-right: 1px solid var(--s4-line-2); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F6673' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; outline: 0; }
.s4-q input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 16px; outline: 0;
  font: 500 15px var(--s4-font); color: var(--s4-ink); }
.s4-q input::placeholder { color: var(--s4-muted); }
.s4-q input:focus-visible { box-shadow: none; }
.s4-q button { flex: 0 0 auto; width: 58px; border: 0; background: var(--s4-green); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background .18s; }
.s4-q button:hover { background: var(--s4-green-2); }
.s4-q button svg { width: 21px; height: 21px; }

.s4-acc { display: flex; flex-direction: column; justify-content: center; height: 48px; padding: 0 12px;
  border-radius: 12px; color: var(--s4-ink); text-decoration: none; line-height: 1.15; white-space: nowrap; transition: background .15s; }
.s4-acc:hover { background: var(--s4-bg); color: var(--s4-ink); }
.s4-acc small { font-size: 12px; color: var(--s4-muted); font-weight: 500; }
.s4-acc b { font-size: 14px; font-weight: 800; }
.s4-cart { position: relative; display: inline-flex; align-items: center; gap: 11px; height: 48px; padding: 0 14px 0 10px;
  border-radius: 12px; color: var(--s4-ink); text-decoration: none; font-weight: 800; font-size: 14px; transition: background .15s; }
.s4-cart:hover { background: var(--s4-bg); color: var(--s4-ink); }
.s4-cart svg { width: 26px; height: 26px; }
/* Contador del carrito: círculo en la esquina del ícono, no una franja.
   satec.css lo ancla con `right` y aquí se ancla con `left`: sin
   `right: auto` las dos reglas lo estiraban encima de la palabra «Carrito». */
.s4-cart .cart-count { position: absolute; top: 4px; left: 22px; right: auto; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--s4-green); color: #fff; font: 800 11px/20px var(--s4-font); text-align: center;
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2.5px var(--s4-hdr-bg, #fff); place-items: center; pointer-events: none; }
.s4-cart .cart-count.s4-pop { animation: s4-pop .45s var(--s4-ease); }
@keyframes s4-pop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .s4-cart .cart-count.s4-pop { animation: none; } }
.s4-hdr .burger { display: none; flex: 0 0 auto; background: var(--s4-bg); }

/* Segunda fila: los mundos de marca con su logo, y los accesos */
.s4-sub { border-top: 1px solid var(--s4-line); }
.s4-sub .wrap { position: relative; display: flex; align-items: center; gap: 4px; height: 52px; }
.s4-brandrow { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.s4-brandrow::-webkit-scrollbar { display: none; }
.s4-bl { flex: 0 0 auto; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 11px; position: relative; transition: background .18s; }
.s4-bl img { height: 19px; width: auto; max-width: 104px; object-fit: contain; filter: grayscale(1) contrast(.9); opacity: .72; transition: filter .25s, opacity .25s, transform .25s var(--s4-ease); }
.s4-bl:hover { background: color-mix(in srgb, var(--mk) 9%, var(--s4-surface)); }
.s4-bl:hover img { filter: none; opacity: 1; transform: scale(1.06); }
.s4-bl::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--mk); transform: scaleX(0); transition: transform .25s var(--s4-ease); }
.s4-bl:hover::after { transform: scaleX(1); }
.s4-sep { flex: 0 0 1px; height: 22px; background: var(--s4-line-2); margin: 0 8px; }
.s4-links { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.s4-links > a, .s4-links .dd-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 10px;
  font: 700 13.5px var(--s4-font); color: var(--s4-ink-2); background: none; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; }
.s4-links > a:hover, .s4-links .dd-btn:hover, .s4-links .dd:hover .dd-btn, .s4-links .dd:focus-within .dd-btn { background: var(--s4-bg); color: var(--s4-ink); }
.s4-links > a.active { color: var(--s4-green-t); }
.s4-links > a.s4-of { color: #C2410C; }
.s4-links > a svg { width: 16px; height: 16px; }
.s4-links .dd { position: static; }

/* Los mega-menús, contra el ancho de la barra */
.s4-hdr .dd-menu { left: 0; right: 0; margin: 0 auto; width: min(1120px, calc(100% - 32px)); top: calc(100% + 1px);
  border-radius: 0 0 var(--s4-r-lg) var(--s4-r-lg); border: 1px solid var(--s4-line); border-top: 0; box-shadow: var(--s4-sh-3);
  transform: translateY(-6px); }
.s4-hdr .dd:hover .dd-menu, .s4-hdr .dd:focus-within .dd-menu { transform: translateY(0); }
.s4-hdr .dd-menu::after, .s4-hdr .dd-menu::before { display: none; }
.s4-hdr .dd-btn::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.s4-hdr .dd-btn { position: relative; }
.s4-hdr .dd-item:hover { background: var(--s4-bg); }
.s4-hdr .dd-item .di { background: var(--s4-green-l); color: var(--s4-green-t); }
.s4-hdr .dd-all { color: var(--s4-green-t); }

@media (max-width: 1180px) { .s4-acc.s4-acc-b2b { display: none; } }
@media (max-width: 1000px) {
  .s4-bar { flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; min-height: 0; }
  .s4-dep, .s4-acc { display: none !important; }
  .s4-q { order: 5; flex-basis: 100%; height: 46px; }
  .s4-cart { margin-left: auto; }
  .s4-cart b { display: none; }
  .s4-hdr .burger { display: block; }
  .s4-links { display: none; }
  .s4-sub .wrap { height: 46px; }
  .s4-sep { display: none; }
}
@media (max-width: 520px) {
  .s4-bar .logo-img { height: 34px; }
  .s4-q select { display: none; }
  .s4-bl { padding: 0 10px; }
  .s4-bl img { height: 16px; }
}

/* ═══ Tarjeta de producto ══════════════════════════════════════════════
   La foto viene sobre blanco; con `multiply` el blanco desaparece y el
   producto queda sobre el gris de la tarjeta, como en una vitrina. */
.prod-card { background: var(--s4-surface); border: 0; border-radius: var(--s4-r-lg); box-shadow: var(--s4-sh-1); overflow: hidden;
  transition: transform .3s var(--s4-ease), box-shadow .3s; }
.prod-card:hover { transform: translateY(-4px); box-shadow: var(--s4-sh-3); }
.prod-media { background: var(--s4-plate) !important; margin: 8px; border-radius: calc(var(--s4-r-lg) - 6px); overflow: hidden; }
.prod-media img { mix-blend-mode: multiply; transition: transform .45s var(--s4-ease); }
.prod-card:hover .prod-media img { transform: scale(1.06); }
.prod-badge { background: var(--s4-coral); border-radius: 9px; }
.prod-card .stock-badge { background: rgba(255,255,255,.92); }
.prod-card .stock-badge.ok { color: var(--s4-green-t); }
.prod-card .stock-badge.ok .dot { background: var(--s4-green); }
.prod-brand { color: var(--s4-navy) !important; letter-spacing: .08em; }
.prod-name { color: var(--s4-ink); font-weight: 600; }
.prod-price .now { font-family: var(--s4-font); font-weight: 800; letter-spacing: -.03em; color: var(--s4-ink); }
.prod-price .now sup { font-size: .52em; font-weight: 700; top: -.72em; margin-left: 1px; letter-spacing: 0; }
.prod-add { background: var(--s4-green); border-radius: 14px; box-shadow: none; }
.prod-add:hover { background: var(--s4-green-2); }
.prod-fav { background: rgba(255,255,255,.92); }

/* ═══ Portada ══════════════════════════════════════════════════════════ */
.s4-sec { padding: 56px 0 0; }
.s4-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.s4-head h2 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.035em; }
.s4-head p { margin: 4px 0 0; color: var(--s4-muted); }
.s4-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--s4-green-t); text-decoration: none; }
.s4-more:hover { color: var(--s4-ink); }
.s4-more svg { width: 17px; height: 17px; transition: transform .2s; }
.s4-more:hover svg { transform: translateX(3px); }
.s4-arrows { display: inline-flex; gap: 8px; margin-left: 14px; }
.s4-arrows button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--s4-line-2); background: var(--s4-surface); color: var(--s4-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, border-color .15s; }
.s4-arrows button:hover { background: var(--s4-solid); color: var(--s4-on-solid); border-color: var(--s4-solid); }
.s4-arrows svg { width: 18px; height: 18px; }

/* Vitrina en bento */
.s4-vitrina { padding-top: 20px; }
.s4-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 470px 270px; gap: 16px; }
.s4-tile { position: relative; overflow: hidden; border-radius: var(--s4-r-xl); background: var(--s4-surface); isolation: isolate;
  text-decoration: none; color: var(--s4-ink); display: block; }
/* Los banners del CRM son videos 16:9: la baldosa ancha (2/3 de la fila)
   les da casi esa proporción y no quedan franjas negras. */
.s4-t-main { grid-column: span 2; background: var(--s4-navy); }
.s4-t-main .hero-slider { position: absolute; inset: 0; height: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; }
.s4-t-main .hero-slider .hs-viewport, .s4-t-main .hero-slider .hs-track { height: 100%; }
.s4-t-main .hero-slider .hs-slide { height: 100%; min-height: 0; }

/* Baldosa de marca: tinte del color de la marca y fotos que flotan.
   Las fotos NO llevan z-index: con él formarían su propio grupo y el
   `multiply` ya no se mezclaría con el tinte (el blanco quedaba a la vista). */
.s4-bt { background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--mk) 20%, var(--s4-surface)) 0%, transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--mk) 8%, var(--s4-surface)), var(--s4-surface) 75%); }
.s4-bt-in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; padding: 26px; max-width: 56%; }
.s4-bt-logo { height: 30px; display: flex; align-items: center; margin-bottom: 12px; }
.s4-bt-logo img { max-height: 26px; max-width: 140px; object-fit: contain; object-position: left; }
.s4-bt h3 { margin: 0 0 6px; font-size: clamp(18px, 1.6vw, 23px); font-weight: 800; line-height: 1.12; }
.s4-bt p { margin: 0; color: var(--s4-ink-2); font-size: 14px; }
.s4-bt .s4-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 40px; padding: 0 16px;
  border-radius: 999px; background: var(--s4-solid); color: var(--s4-on-solid); font-weight: 700; font-size: 13.5px; white-space: nowrap; transition: background .2s, gap .2s; }
.s4-tile:hover .s4-cta { background: color-mix(in srgb, var(--mk) 85%, black); color: #fff; gap: 12px; }
.s4-bt .s4-cta svg { width: 16px; height: 16px; }
.s4-bt-fotos { position: absolute; right: 0; bottom: 0; width: 56%; height: 100%; pointer-events: none; }
.s4-bt-fotos img { position: absolute; mix-blend-mode: multiply; object-fit: contain; transition: transform .7s var(--s4-ease); }
.s4-bt-fotos img:nth-child(1) { width: 92%; height: 82%; right: 2%; bottom: 6%; }
.s4-bt-fotos img:nth-child(2) { display: none; }
.s4-tile:hover .s4-bt-fotos img:nth-child(1) { transform: translateY(-8px) rotate(-3deg) scale(1.05); }

/* La alta (Garmin): texto arriba, dos productos abajo */
.s4-t-tall .s4-bt-in { max-width: 100%; height: auto; }
.s4-t-tall .s4-bt-in .s4-cta { margin-top: 18px; }
.s4-t-tall h3 { font-size: clamp(24px, 2.2vw, 32px); }
.s4-t-tall .s4-bt-fotos { width: 100%; height: 56%; }
.s4-t-tall .s4-bt-fotos img:nth-child(1) { width: 52%; height: 92%; left: 4%; right: auto; bottom: 4%; }
.s4-t-tall .s4-bt-fotos img:nth-child(2) { display: block; width: 50%; height: 78%; right: 2%; bottom: 10%; }
.s4-tile:hover .s4-bt-fotos img:nth-child(2) { transform: translateY(-4px) rotate(4deg) scale(1.05); }

/* Hero por defecto (si el CRM no tiene banners) */
.s4-hd { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 38px; color: #fff;
  background: radial-gradient(90% 70% at 80% 10%, rgba(27,121,61,.55), transparent 60%), linear-gradient(160deg, #134465, #0B1F33); }
.s4-hd[hidden] { display: none; }
.s4-hd h1 { color: #fff; font-size: clamp(32px, 3.8vw, 56px); line-height: 1.02; margin: 0 0 12px; font-weight: 800; }
.s4-hd p { color: #D3DEEA; margin: 0 0 20px; max-width: 460px; }

@media (max-width: 1100px) {
  .s4-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 420px 260px; }
  .s4-t-main { grid-column: span 2; aspect-ratio: 16 / 9; }
  .s4-t-tall { grid-row: span 2; }
}
@media (max-width: 640px) {
  .s4-vitrina { padding-top: 12px; }
  .s4-bento { grid-template-rows: auto 300px 210px 210px; gap: 10px; }
  .s4-t-main { aspect-ratio: 16 / 10; }
  .s4-t-tall { grid-column: span 2; grid-row: auto; }
  .s4-bento > .s4-bt:last-child { grid-column: span 2; }
  .s4-tile { border-radius: var(--s4-r-lg); }
  .s4-bt-in { padding: 16px; max-width: 58%; }
  .s4-t-tall .s4-bt-in { max-width: 56%; }
  .s4-t-tall .s4-bt-fotos { width: 48%; height: 100%; }
  .s4-t-tall .s4-bt-fotos img:nth-child(1) { width: 96%; height: 70%; left: auto; right: 0; bottom: 14%; }
  .s4-t-tall .s4-bt-fotos img:nth-child(2) { display: none; }
  .s4-t-tall h3 { font-size: 21px; }
  .s4-bt h3 { font-size: 16px; }
  .s4-bt p { font-size: 12.5px; }
  .s4-bt .s4-cta { height: 34px; padding: 0 12px; font-size: 12.5px; }
  .s4-bt-fotos { width: 50%; }
  .s4-bt-logo img { max-height: 22px; max-width: 110px; }
}

/* Departamentos con foto */
.s4-rail { display: grid; grid-auto-flow: column; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 4px 18px; margin: 0 -4px; scrollbar-width: none; }
.s4-rail::-webkit-scrollbar { display: none; }
.s4-rail > * { scroll-snap-align: start; }
.s4-deps { grid-auto-columns: 136px; }
.s4-dep-i { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: var(--s4-ink); text-align: center; }
.s4-dep-i .ph { width: 128px; height: 128px; border-radius: 50%; background: var(--s4-surface); display: flex; align-items: center; justify-content: center;
  overflow: hidden; box-shadow: var(--s4-sh-1); transition: transform .3s var(--s4-ease), box-shadow .3s; }
.s4-dep-i .ph img { width: 72%; height: 72%; object-fit: contain; mix-blend-mode: multiply; transition: transform .45s var(--s4-ease); }
.s4-dep-i:hover .ph { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--s4-green), var(--s4-sh-2); }
.s4-dep-i:hover .ph img { transform: scale(1.1); }
.s4-dep-i b { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.s4-dep-i em { font-style: normal; font-size: 12px; color: var(--s4-muted); margin-top: -6px; }
@media (max-width: 640px) { .s4-deps { grid-auto-columns: 96px; gap: 10px; } .s4-dep-i .ph { width: 92px; height: 92px; } .s4-dep-i b { font-size: 12.5px; } }

/* Top 10: el número gigante detrás de la tarjeta */
.s4-top { grid-auto-columns: 300px; gap: 6px; }
.s4-rank { position: relative; display: flex; align-items: flex-end; padding-left: 66px; }
.s4-rank .n { position: absolute; left: -6px; bottom: -18px; z-index: 0; font: 800 188px/1 var(--s4-font); letter-spacing: -.08em;
  color: var(--s4-bg); -webkit-text-stroke: 3px var(--s4-ink); paint-order: stroke; pointer-events: none; user-select: none; }
.s4-rank:nth-child(-n+3) .n { color: var(--s4-sun); -webkit-text-stroke-color: var(--s4-ink); }
.s4-rank .prod-card { position: relative; z-index: 1; width: 100%; }
.s4-rank:nth-child(10) { padding-left: 116px; }
@media (max-width: 640px) { .s4-top { grid-auto-columns: 238px; } .s4-rank { padding-left: 52px; } .s4-rank .n { font-size: 140px; } .s4-rank:nth-child(10) { padding-left: 90px; } }

/* Mundos de marca */
.s4-world { position: relative; margin-top: 56px; padding: 40px 0 34px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mk) 9%, var(--s4-surface)), color-mix(in srgb, var(--mk) 3%, var(--s4-bg)) 70%, var(--s4-bg)); }
.s4-world::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: var(--motivo);
  background-size: var(--motivo-t, 340px); animation: s4-deriva 60s linear infinite;
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%); }
@keyframes s4-deriva { to { background-position: var(--motivo-t, 340px) calc(var(--motivo-t, 340px) * -1); } }
.s4-world-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; margin-bottom: 26px; }
.s4-world-logo { width: 168px; height: 92px; border-radius: var(--s4-r); background: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--s4-sh-2); padding: 14px; }
.s4-world-logo.oscura { background: #0B1220; }
.s4-world-logo img { max-width: 100%; max-height: 52px; object-fit: contain; }
.s4-world-head .k { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--mk) 75%, black); }
.s4-world-head .k::before { content: ''; width: 22px; height: 3px; border-radius: 3px; background: var(--mk); }
.s4-world-head h2 { margin: 6px 0 4px; font-size: clamp(26px, 3.2vw, 44px); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; }
.s4-world-head p { margin: 0; color: var(--s4-ink-2); }
.s4-world-cta { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 999px; background: var(--s4-solid); color: var(--s4-on-solid);
  font-weight: 800; font-size: 14.5px; text-decoration: none; transition: background .2s, gap .2s; white-space: nowrap; }
.s4-world-cta:hover { background: color-mix(in srgb, var(--mk) 85%, black); color: #fff; gap: 14px; }
.s4-world-cta svg { width: 18px; height: 18px; }
.s4-prods { grid-auto-columns: 232px; }
@media (max-width: 860px) {
  .s4-world { padding: 28px 0 22px; margin-top: 40px; }
  .s4-world-head { grid-template-columns: auto 1fr; gap: 14px 16px; }
  .s4-world-logo { width: 104px; height: 64px; padding: 10px; }
  .s4-world-logo img { max-height: 36px; }
  .s4-world-cta { grid-column: 1 / -1; justify-self: start; height: 44px; }
  .s4-prods { grid-auto-columns: 182px; gap: 10px; }
}

/* Más mundos */
.s4-mundos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s4-mundo { position: relative; height: 300px; border-radius: var(--s4-r-xl); overflow: hidden; isolation: isolate; text-decoration: none; color: var(--s4-ink);
  background: radial-gradient(110% 80% at 50% 100%, color-mix(in srgb, var(--mk) 24%, var(--s4-surface)), color-mix(in srgb, var(--mk) 6%, var(--s4-surface)) 70%); }
.s4-mundo::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .45; background-image: var(--motivo); background-size: 260px; }
.s4-mundo-in { position: relative; z-index: 2; padding: 22px; }
.s4-mundo-in img { max-height: 26px; max-width: 130px; object-fit: contain; }
.s4-mundo-in .oscura { background: #0B1220; padding: 8px 12px; border-radius: 10px; }
.s4-mundo-in b { display: block; margin-top: 12px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.s4-mundo-in em { font-style: normal; font-size: 13px; color: var(--s4-ink-2); }
.s4-mundo-foto { position: absolute; z-index: 1; left: 12%; right: 12%; bottom: 4%; height: 54%; object-fit: contain; width: 76%;
  mix-blend-mode: multiply; transition: transform .6s var(--s4-ease); }
.s4-mundo:hover .s4-mundo-foto { transform: translateY(-10px) scale(1.06); }
.s4-mundo .go { position: absolute; z-index: 3; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; background: var(--s4-solid); color: var(--s4-on-solid);
  display: inline-flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; }
.s4-mundo:hover .go { background: var(--mk); color: #fff; transform: rotate(-45deg); }
.s4-mundo .go svg { width: 19px; height: 19px; }
@media (max-width: 1000px) { .s4-mundos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s4-mundo-todas { grid-column: span 2; height: 160px; } }
@media (max-width: 520px) { .s4-mundos { gap: 10px; } .s4-mundo { height: 230px; border-radius: var(--s4-r-lg); } .s4-mundo-in { padding: 16px; } .s4-mundo-in b { font-size: 15px; } }

/* Empresas e instituciones */
.s4-biz { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; border-radius: var(--s4-r-xl); overflow: hidden; background: var(--s4-surface); box-shadow: var(--s4-sh-1); }
.s4-biz-l { padding: 44px; background: linear-gradient(160deg, var(--s4-tint), var(--s4-surface) 70%); position: relative; }
.s4-biz-l .k { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--s4-navy); }
.s4-biz-l h2 { margin: 10px 0 12px; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.04; font-weight: 800; letter-spacing: -.04em; }
.s4-biz-l h2 span { color: var(--s4-green-t); }
.s4-biz-l p { color: var(--s4-ink-2); margin: 0 0 24px; max-width: 460px; }
.s4-biz-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.s4-btn { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 20px; border-radius: 999px; font-weight: 800; font-size: 14.5px;
  text-decoration: none; cursor: pointer; border: 0; transition: background .2s, color .2s, box-shadow .2s; }
.s4-btn svg { width: 18px; height: 18px; }
.s4-btn-g { background: var(--s4-green); color: #fff; }
.s4-btn-g:hover { background: var(--s4-green-2); color: #fff; }
.s4-btn-o { background: var(--s4-surface); color: var(--s4-ink); box-shadow: inset 0 0 0 1.5px var(--s4-line-2); }
.s4-btn-o:hover { box-shadow: inset 0 0 0 1.5px var(--s4-ink); color: var(--s4-ink); }
.s4-biz-r { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--s4-line); }
.s4-sector { background: var(--s4-surface); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.s4-sector .ic { width: 50px; height: 50px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; }
.s4-sector .ic svg { width: 24px; height: 24px; }
.s4-sector b { font-size: 16px; font-weight: 800; }
.s4-sector span { font-size: 13.5px; color: var(--s4-muted); line-height: 1.45; }
@media (max-width: 900px) { .s4-biz { grid-template-columns: 1fr; } .s4-biz-l { padding: 28px 22px; } .s4-sector { padding: 18px; } }
@media (max-width: 420px) { .s4-biz-r { grid-template-columns: 1fr; } }

/* Franja de servicio */
.s4-serv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.s4-serv > div { display: flex; gap: 14px; align-items: center; padding: 20px; background: var(--s4-surface); border-radius: var(--s4-r); box-shadow: var(--s4-sh-1); }
.s4-serv .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--s4-bg); color: var(--s4-navy); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.s4-serv .ic svg { width: 22px; height: 22px; }
.s4-serv b { display: block; font-size: 14.5px; }
.s4-serv span { font-size: 13px; color: var(--s4-muted); }
@media (max-width: 900px) { .s4-serv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .s4-serv > div { flex-direction: column; align-items: flex-start; padding: 14px; gap: 8px; } }

/* Ayuda */
.s4-help { display: flex; align-items: center; gap: 24px; padding: 26px 30px; border-radius: var(--s4-r-xl); background: var(--s4-band); color: #fff; flex-wrap: wrap; }
.s4-help .av { width: 58px; height: 58px; border-radius: 18px; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; }
.s4-help .av svg { width: 28px; height: 28px; color: var(--s4-sun); }
.s4-help h3 { color: #fff; margin: 0 0 4px; font-size: 22px; font-weight: 800; }
.s4-help p { margin: 0; color: #C5CCD8; }
.s4-help .acts { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.s4-btn-wa { background: #25D366; color: #08361B; }
.s4-btn-wa:hover { background: #3BE07A; color: #08361B; }
.s4-btn-wa svg { fill: currentColor; }
.s4-btn-w { background: #fff; color: #0B1220; }
.s4-btn-w:hover { background: var(--s4-sun); color: #0B1220; }

/* Aparición al entrar en pantalla */
.s4-in { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--s4-ease), transform .7s var(--s4-ease); }
.s4-in.is-in { opacity: 1; transform: none; }

/* ═══ Pie ══════════════════════════════════════════════════════════════ */
.s4-up { display: block; width: 100%; height: 50px; margin-top: 64px; border: 0; background: #E4E6EB; color: var(--s4-ink-2); cursor: pointer;
  font: 700 13.5px var(--s4-font); transition: background .15s; }
.s4-up:hover { background: #D9DCE2; }
footer.s4-foot { background: var(--s4-surface); color: var(--s4-ink-2); padding: 46px 0 0; margin: 0; border: 0; }
.s4-foot-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 30px; padding-bottom: 34px; }
.s4-foot-top h5 { margin: 0 0 12px; font-size: 14px; font-weight: 800; color: var(--s4-ink); letter-spacing: 0; text-transform: none; }
.s4-foot-top a { display: block; padding: 4px 0; font-size: 13.5px; color: var(--s4-muted); text-decoration: none; }
.s4-foot-top a:hover { color: var(--s4-green-t); }
.s4-foot-top .logo-img { height: 40px; }
.s4-foot-lema { font-weight: 800; color: var(--s4-ink); margin: 12px 0 4px; font-size: 16px; }
.s4-foot-top p { font-size: 13.5px; color: var(--s4-muted); margin: 0 0 14px; max-width: 300px; }
.s4-foot .fsoc { display: flex; gap: 8px; }
.s4-foot .fsoc a { width: 38px; height: 38px; border-radius: 12px; background: var(--s4-bg); color: var(--s4-ink-2); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.s4-foot .fsoc a:hover { background: var(--s4-solid); color: var(--s4-on-solid); }
.s4-foot .fsoc svg { width: 17px; height: 17px; fill: currentColor; }
.s4-foot-marcas { display: flex; align-items: center; justify-content: center; gap: 36px; flex-wrap: wrap; padding: 22px 0; border-top: 1px solid var(--s4-line); }
.s4-foot-marcas img { height: 22px; width: auto; max-width: 110px; object-fit: contain; filter: grayscale(1); opacity: .55; transition: filter .2s, opacity .2s; }
.s4-foot-marcas a:hover img { filter: none; opacity: 1; }
.s4-foot-copy { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 0 26px; border-top: 1px solid var(--s4-line); font-size: 12.5px; color: var(--s4-muted); }
@media (max-width: 900px) { .s4-foot-top { grid-template-columns: 1fr 1fr; } .s4-foot-top > div:first-child { grid-column: 1 / -1; } .s4-foot-marcas { gap: 22px; } }

/* Spotlight, cajón y asistente con la paleta nueva */
.spot-campo:focus-within { border-color: var(--s4-green); }
.spot-campo svg { color: var(--s4-green-t); }
.drawer .drawer-search .search .go { background: var(--s4-green); }
.drawer-cta { background: var(--s4-navy) !important; }
.chat-fab { background: var(--s4-navy); box-shadow: 0 16px 30px -12px rgba(19,68,101,.85); }
.chat-fab:hover { background: var(--s4-navy-2); }
.chat-hd { background: var(--s4-navy); }

@media (prefers-reduced-motion: reduce) {
  .s4-world::before { animation: none; }
  .s4-in { opacity: 1; transform: none; }
}

/* Tarjeta «Consultar»: asistente en marino, WhatsApp en verde suave */
.cd-btn.asistente { background: var(--s4-navy); box-shadow: none; }
.cd-btn.asistente:hover { background: var(--s4-navy-2); filter: none; }
.cd-btn.wa { background: #E3F7EA; color: #146C38; }
.cd-rot { color: var(--s4-navy); font-weight: 800; }

.s4-mundo-todas { background: linear-gradient(150deg, var(--s4-navy), #0B2236) !important; color: #fff; }
.s4-mundo-todas::before { opacity: .9; }
.s4-mundo-todas b { color: #fff; }
.s4-mundo-todas em { color: #C9D6E6 !important; }
.s4-mundo-todas .go { background: var(--s4-sun); color: #0B1220; }
.s4-mundo-todas:hover .go { background: #fff; }

/* Teléfono: cada marca del bento en su propia fila (en dos columnas el
   texto se partía en una palabra por línea). Sin flechas en los carruseles:
   ahí se desliza con el dedo. */
@media (max-width: 640px) {
  .s4-bento { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 190px; }
  .s4-bento > .s4-tile { grid-column: auto !important; grid-row: auto !important; }
  .s4-t-main { aspect-ratio: auto; height: auto; grid-row: auto; }
  .s4-bento > .s4-t-main { height: 216px; }
  .s4-bento > .s4-t-tall { height: 230px; }
  .s4-bt-in { max-width: 58%; }
  .s4-bt p { display: block; }
  .s4-arrows { display: none; }
}
@media (max-width: 640px) {
  .s4-bento { grid-auto-rows: auto; }
  .s4-bento > .s4-bt { height: 190px; }
  .s4-bento > .s4-t-tall { height: 230px; }
  .s4-world-head { grid-template-columns: 1fr; gap: 12px; }
  .s4-world-logo { width: auto; height: 54px; justify-self: start; padding: 8px 14px; }
  .s4-world-logo img { max-height: 30px; max-width: 130px; }
  .s4-world-head h2 { font-size: 27px; }
  .s4-world-head p { font-size: 14px; }
  .s4-world-cta { grid-column: auto; }
}


/* ═══ Tema oscuro ══════════════════════════════════════════════════════
   Lo elige el visitante con el botón del encabezado (se recuerda en su
   navegador). La paleta sale del logo: el fondo es el marino de SATEC
   llevado a casi negro, las tarjetas son ese marino un poco más claro, el
   verde del logo sigue en los botones y el texto verde se aclara (#4CC27F,
   7:1) para leerse sobre el fondo.

   Dos reglas que no se negocian:
   - Las fotos de producto vienen sobre blanco y se funden con `multiply`.
     Sobre un fondo oscuro, multiplicar las volvería negras: por eso en
     oscuro cada foto se apoya en una placa clara o en un «foco» de luz.
   - Los logos de marca van en placa blanca, nunca invertidos con filtros
     (los JPG con fondo opaco quedarían como bloques). */
html[data-tema="oscuro"] {
  color-scheme: dark;
  --s4-bg: #0A1826; --s4-bg-2: #0E2033; --s4-surface: #10233A; --s4-surface-2: #16304C;
  --s4-ink: #EAF1F8; --s4-ink-2: #C3D0DE; --s4-muted: #93A6BA;
  --s4-line: rgba(255,255,255,.08); --s4-line-2: rgba(255,255,255,.16);
  --s4-navy: #1D5A87; --s4-navy-2: #246A9C;
  --s4-green-t: #4CC27F; --s4-green-l: rgba(76,194,127,.14);
  --s4-solid: #EAF1F8; --s4-on-solid: #0A1826;
  --s4-band: #16304C; --s4-tint: #12304A; --s4-plate: #E9EEF4;
  --s4-sh-1: 0 1px 2px rgba(0,0,0,.4);
  --s4-sh-2: 0 14px 34px -14px rgba(0,0,0,.6);
  --s4-sh-3: 0 30px 60px -20px rgba(0,0,0,.7);
  /* los de satec.css, para lo que no se rehízo */
  --surface: #10233A; --bg: #0A1826; --bg-2: #0E2033; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.12);
  --ink: #EAF1F8; --ink-2: #C3D0DE; --muted: #93A6BA;
  --v3-blue-50: rgba(125,183,224,.14);
}
html[data-tema="oscuro"] body { background: var(--s4-bg); color: var(--s4-ink); }
html[data-tema="oscuro"] .muted { color: var(--s4-muted); }
html[data-tema="oscuro"] input, html[data-tema="oscuro"] select, html[data-tema="oscuro"] textarea { color: var(--s4-ink); }
html[data-tema="oscuro"] ::placeholder { color: var(--s4-muted); }

/* Encabezado y pie */
html[data-tema="oscuro"] header.s4-hdr { background: rgba(10,24,38,.94); border-bottom-color: var(--s4-line); }
html[data-tema="oscuro"] .s4-q { background: var(--s4-surface); }
html[data-tema="oscuro"] .s4-q:hover { background: var(--s4-surface-2); }
html[data-tema="oscuro"] .s4-q:focus-within { background: var(--s4-surface); }
html[data-tema="oscuro"] .s4-q select { border-right-color: var(--s4-line-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2393A6BA' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
html[data-tema="oscuro"] .s4-q select option { background: #10233A; }
html[data-tema="oscuro"] .s4-acc:hover, html[data-tema="oscuro"] .s4-cart:hover,
html[data-tema="oscuro"] .s4-links > a:hover, html[data-tema="oscuro"] .s4-links .dd:hover .dd-btn { background: var(--s4-surface); }
html[data-tema="oscuro"] .s4-links > a.s4-of { color: #FB923C; }
html[data-tema="oscuro"] .s4-up { background: #0E2033; color: var(--s4-ink-2); }
html[data-tema="oscuro"] .s4-up:hover { background: #12283F; }
html[data-tema="oscuro"] footer.s4-foot { background: #0C1C2D; }
html[data-tema="oscuro"] .burger span { background: var(--s4-ink); }

/* Logos de marca en placa blanca */
html[data-tema="oscuro"] .s4-bl img,
html[data-tema="oscuro"] .s4-foot-marcas img,
html[data-tema="oscuro"] .s4-bt-logo img,
html[data-tema="oscuro"] .s4-mundo-in img:not(.oscura) {
  background: #fff; padding: 5px 9px; border-radius: 8px; box-sizing: content-box; filter: none; opacity: 1; }
html[data-tema="oscuro"] .s4-bl img { opacity: .88; }
html[data-tema="oscuro"] .s4-bl:hover { background: transparent; }
html[data-tema="oscuro"] .s4-world-logo:not(.oscura),
html[data-tema="oscuro"] .ddm-logo, html[data-tema="oscuro"] .drawer nav .dm-item:not(.placa-oscura),
html[data-tema="oscuro"] .dd-item .di-logo, html[data-tema="oscuro"] .v3-brand-logo,
html[data-tema="oscuro"] .v3-mt-placa:not(.placa-oscura), html[data-tema="oscuro"] .mt-logo-clara { background: #fff !important; }
html[data-tema="oscuro"] .brand-card .brand-logo { background: #fff; padding: 6px 10px; border-radius: 8px; box-sizing: content-box; }
html[data-tema="oscuro"] .dd-dest-item .ddm-logo { border-radius: 8px; }

/* Fotos de producto: placa clara dentro de la tarjeta oscura */
html[data-tema="oscuro"] .prod-card { background: var(--s4-surface); }
html[data-tema="oscuro"] .prod-card .stock-badge { background: rgba(255,255,255,.95); }
html[data-tema="oscuro"] .prod-card .stock-badge.ok { color: #1B793D; }
html[data-tema="oscuro"] .prod-card .stock-badge.ok .dot { background: #1B793D; }
html[data-tema="oscuro"] .prod-fav { background: rgba(255,255,255,.95); color: #0B1220; }
html[data-tema="oscuro"] .prod-brand { color: #7DB7E0 !important; }
html[data-tema="oscuro"] .s4-dep-i .ph { background: var(--s4-plate); }
html[data-tema="oscuro"] .cd-btn.wa { background: rgba(37,211,102,.14); color: #4ADE80; }
html[data-tema="oscuro"] .cd-rot { color: #7DB7E0; }

/* Bento, mundos y mosaico: la foto sobre un foco de luz que se funde con
   el tinte oscuro. El foco es el fondo del contenedor de las fotos (que no
   lleva z-index), así el `multiply` tiene algo claro con qué mezclarse. */
html[data-tema="oscuro"] .s4-bt { background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--mk) 30%, #10233A) 0%, transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--mk) 16%, #10233A), #10233A 75%); }
html[data-tema="oscuro"] .s4-bt-fotos { background: radial-gradient(closest-side, #EEF3F8 0%, #DCE5EF 55%, rgba(220,229,239,0) 100%); }
html[data-tema="oscuro"] .s4-t-tall .s4-bt-fotos { background:
    radial-gradient(closest-side at 28% 50%, #EEF3F8 0%, #DCE5EF 60%, rgba(220,229,239,0) 100%),
    radial-gradient(closest-side at 74% 50%, #EEF3F8 0%, #DCE5EF 60%, rgba(220,229,239,0) 100%); }
html[data-tema="oscuro"] .s4-world { background: linear-gradient(180deg, color-mix(in srgb, var(--mk) 22%, #0A1826), color-mix(in srgb, var(--mk) 7%, #0A1826) 70%, #0A1826); }
html[data-tema="oscuro"] .s4-world::before { opacity: .8; }
html[data-tema="oscuro"] .s4-world-head .k { color: color-mix(in srgb, var(--mk) 55%, white); }
html[data-tema="oscuro"] .s4-mundo { background:
    radial-gradient(46% 36% at 50% 76%, #EEF3F8 0%, #DCE5EF 55%, rgba(220,229,239,0) 100%),
    radial-gradient(110% 80% at 50% 100%, color-mix(in srgb, var(--mk) 34%, #10233A), color-mix(in srgb, var(--mk) 12%, #10233A) 70%); }
html[data-tema="oscuro"] .s4-mundo-todas { background: linear-gradient(150deg, #1D5A87, #10233A) !important; }
html[data-tema="oscuro"] .s4-rank:nth-child(n+4) .n { color: var(--s4-bg); }
html[data-tema="oscuro"] .s4-rank:nth-child(-n+3) .n { -webkit-text-stroke-color: #0A1826; }
html[data-tema="oscuro"] .s4-biz-l { background: linear-gradient(160deg, #12304A, var(--s4-surface) 70%); }
html[data-tema="oscuro"] .s4-biz-l .k { color: #7DB7E0; }
html[data-tema="oscuro"] .s4-biz-l h2 span { color: var(--s4-green-t); }
html[data-tema="oscuro"] .s4-sector .ic { filter: saturate(1.2); background: rgba(255,255,255,.07) !important; color: #7DB7E0 !important; }
html[data-tema="oscuro"] .s4-serv .ic { background: var(--s4-surface-2); color: #7DB7E0; }
html[data-tema="oscuro"] .s4-btn-o { background: transparent; }

/* Mega-menús, spotlight, cajón, asistente */
html[data-tema="oscuro"] .dd-menu { background: var(--s4-surface); }
html[data-tema="oscuro"] .dd-item b, html[data-tema="oscuro"] .dd-hd h3 { color: var(--s4-ink); }
html[data-tema="oscuro"] .dd-item:hover { background: var(--s4-surface-2); }
html[data-tema="oscuro"] .spot-fondo { background: rgba(6,14,24,.8); }
html[data-tema="oscuro"] .spot-campo { background: var(--s4-surface); }
html[data-tema="oscuro"] .spot-lema { color: var(--s4-ink-2) !important; }
html[data-tema="oscuro"] .spot-pie kbd { background: var(--s4-surface) !important; color: var(--s4-ink) !important; }
html[data-tema="oscuro"] .drawer { background: var(--s4-surface); }
html[data-tema="oscuro"] .drawer-hd { background: var(--s4-surface); border-bottom-color: var(--s4-line); }
html[data-tema="oscuro"] .drawer nav a { color: var(--s4-ink); }
html[data-tema="oscuro"] .drawer-hd .chat-x { background: var(--s4-surface-2); color: var(--s4-ink); }
html[data-tema="oscuro"] .chat-panel { background: var(--s4-surface); }
html[data-tema="oscuro"] .chat-body { background: var(--s4-bg); }

/* Botón de tema */
.s4-tema { position: relative; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; border: 0; background: transparent; color: var(--s4-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, transform .3s var(--s4-ease); }
.s4-tema:hover { background: var(--s4-bg); }
html[data-tema="oscuro"] .s4-tema:hover { background: var(--s4-surface); }
.s4-tema svg { width: 21px; height: 21px; position: absolute; transition: opacity .25s, transform .4s var(--s4-ease); }
.s4-tema .s4-sol { opacity: 0; transform: rotate(-90deg) scale(.6); }
html[data-tema="oscuro"] .s4-tema .s4-sol { opacity: 1; transform: none; color: var(--s4-sun); }
html[data-tema="oscuro"] .s4-tema .s4-luna { opacity: 0; transform: rotate(90deg) scale(.6); }
@media (max-width: 1000px) { .s4-tema { margin-left: auto; } .s4-tema + .s4-acc + .s4-acc + .s4-cart, .s4-cart { margin-left: 0; } }

/* El cambio de tema se anima, salvo con movimiento reducido */
html.s4-cambiando, html.s4-cambiando * { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }
@media (prefers-reduced-motion: reduce) { html.s4-cambiando, html.s4-cambiando * { transition: none !important; } }
/* Los tonos pastel fijos de las páginas internas se escriben como
   color-mix(HEX var(--s4-mixp), superficie): en claro salen idénticos; en
   oscuro, como un tinte suave. Su texto oscuro se aclara con --s4-lift. */
html[data-tema="oscuro"] { --s4-mixp: 16%; --s4-lift: 62%; }
html[data-tema="oscuro"] .v3-su .su-card.es-matriz .su-horas { background: rgba(10,24,38,.55); }
/* Chips claros sobre fotos o mapas: siguen blancos, con texto oscuro fijo */
html[data-tema="oscuro"] .hs-nav,
html[data-tema="oscuro"] .v3-me-body .me-vid-plat, html[data-tema="oscuro"] .v3-me-body .me-vid-cat,
html[data-tema="oscuro"] .v3-su-ayuda, html[data-tema="oscuro"] .v3-cart .ci-lupa { color: #0B1220; }
html[data-tema="oscuro"] .v3-su-ayuda { border-color: transparent; }
html[data-tema="oscuro"] .v3-pg .nv-v:hover { background: var(--s4-surface-2); color: var(--s4-ink); }
html[data-tema="oscuro"] .v3-pay .reloj { background: rgba(16,35,58,.94); }
/* En el teléfono la baldosa alta muestra una sola foto: un solo foco */
@media (max-width: 640px) {
  html[data-tema="oscuro"] .s4-t-tall .s4-bt-fotos { background: radial-gradient(closest-side, #EEF3F8 0%, #DCE5EF 55%, rgba(220,229,239,0) 100%); }
}

html[data-tema="oscuro"] { --s4-hdr-bg: #0A1826; }

/* ── Tiempo real (2026-10-13) ───────────────────────────────────────────
   La tarjeta o la ficha que se acaba de poner al día con lo que cambió en
   BCom se resalta un instante; la que dejó de publicarse se desvanece. */
.vivo-cambio { animation: s4VivoCambio 1.8s ease-out; }
@keyframes s4VivoCambio {
  0%   { box-shadow: 0 0 0 3px rgba(0, 168, 107, .55), 0 0 22px rgba(0, 168, 107, .35); }
  100% { box-shadow: 0 0 0 0 rgba(0, 168, 107, 0); }
}
.vivo-fuera { opacity: 0; transform: scale(.96); pointer-events: none;
              transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .vivo-cambio { animation: none; }
  .vivo-fuera  { transition: none; }
}