/* ============================================================================
   SATEC · Sitio Comercial — Design System · Desarrollado por Ing. Gustavo Bonilla S.
   Tema claro profesional · verde + azul · toques de vidrio moderno
   GUBOS Developer Costa Rica — BCom A.i Xpert
   ============================================================================ */

:root {
  /* Marca SATEC (azul + verde) */
  --blue:    #0a63e6;
  --blue-2:  #084bc0;
  --teal:    #0bb8a6;
  --green:   #00a86b;
  --green-2: #12c98a;
  --accent:  linear-gradient(120deg, #0a63e6 0%, #0bb8a6 55%, #00a86b 100%);
  --accent-2: linear-gradient(120deg, #084bc0, #00976a);

  /* Neutros (leve tinte azul) */
  --ink:   #0e2138;
  --ink-2: #33475f;
  --muted: #6b7c93;
  --bg:    #f3f7fc;
  --bg-2:  #eaf1f9;
  --surface: #ffffff;
  --line:  #e2eaf3;
  --line-2:#eef3f9;

  --radius: 16px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(15,37,64,.06), 0 2px 8px rgba(15,37,64,.06);
  --shadow: 0 6px 22px rgba(15,37,64,.09);
  --shadow-lg: 0 18px 50px rgba(10,60,120,.16);
  --maxw: 1240px;
  --font: "Montserrat", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Quien pide movimiento reducido no debe ver la página deslizarse. Va acá y no
   en cada `scrollTo`, porque `behavior: 'auto'` quiere decir «lo que diga el
   CSS»: mientras esta regla no existiera, los `scrollTo` que creían moverse al
   instante seguían animándose igual. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: var(--font-body); color: var(--ink);
  background:
    radial-gradient(1100px 760px at 100% -6%, rgba(11,184,166,.10), transparent 56%),
    radial-gradient(950px 720px at -6% 22%, rgba(10,99,230,.09), transparent 55%),
    radial-gradient(820px 640px at 55% 108%, rgba(0,168,107,.07), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, .display { font-family: var(--font); letter-spacing: -.01em; line-height: 1.15; }

/* El aire lateral crece un poco en pantallas chicas: 22px fijos dejaban el
   texto pegado a los bordes en un teléfono de 390px. Con `max()` sube a 26px
   ahí y se queda en 22 de tablet para arriba. */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 max(22px, 6.5vw); }
@media (min-width: 560px) { .wrap { padding: 0 22px; } }
.grad-text { background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); }

/* ── Header (2 barras) ──────────────────────────────────────────────────── */
.top-bar { background: var(--accent-2); color: #fff; font-size: 12.5px; }
.top-bar-in { display: flex; align-items: center; justify-content: space-between; height: 34px; gap: 14px; }
.top-bar .slogan { font-weight: 500; opacity: .95; }
.top-bar .top-actions { display: flex; gap: 18px; }
/* La barra mide 34px y es de una sola línea: si un dato se parte en dos, la
   barra crece y se come el encabezado. El teléfono y el correo no se cortan. */
.top-bar a { display: inline-flex; align-items: center; gap: 6px; color: #fff; opacity: .95; font-weight: 500;
  white-space: nowrap; }
.top-bar a:hover { opacity: 1; }
.top-bar svg { width: 14px; height: 14px; }

/* La barra va FIJA, no sticky. Sticky estaba puesto en `.header`, que es un
   div dentro de <header>: sticky solo pega dentro de la caja de su padre, y
   ese padre mide 108px — así que en cuanto se desplazaba, la barra se iba con
   él. Por eso no se quedaba arriba.
   El relleno del <body> lo calcula el JS midiendo la barra: cambia de alto
   entre escritorio y teléfono y un número a mano se desincroniza solo. */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }

/* Vidrio: translúcido, desenfocado y con saturación alta —lo que hace que se
   vea el color de lo que pasa por debajo en vez de un gris—, más una línea de
   luz arriba y el borde inferior tenue. */
.header { background: rgba(255,255,255,.72);
  backdrop-filter: saturate(190%) blur(26px);
  -webkit-backdrop-filter: saturate(190%) blur(26px);
  border-bottom: 1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 1px 0 rgba(15,37,64,.05),
              0 10px 30px -18px rgba(15,37,64,.28); }
.top-bar { backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px); }
.header-in { display: flex; align-items: center; gap: 22px; height: 74px; }
.logo { display: flex; align-items: center; gap: 11px; font-family: var(--font); font-weight: 800; font-size: 25px; letter-spacing: -.02em; color: var(--ink); }
.logo .mark { width: 42px; height: 42px; border-radius: 12px; background: var(--accent); display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 22px; box-shadow: 0 5px 14px rgba(10,99,230,.32); }
.logo small { display: block; font-size: 9.5px; letter-spacing: .24em; color: var(--green); font-weight: 700; margin-top: -4px; }
.logo-img { height: 48px; width: auto; max-width: 210px; object-fit: contain; display: block; }
.logo-fallback { display: none; align-items: center; gap: 11px; }
/* El pie usa /api/logo-w, que es un logo blanco de verdad. Antes acá había
   un `filter: brightness(0) invert(1)` que aplanaba el logo a una silueta
   blanca; con el archivo real ese filtro lo destruiría. */
.logo-white { /* sin filtro: el archivo ya viene en blanco */ }

/* ── Botón que abre el buscador ──────────────────────────────────────────
   Un botón, no una caja que finge ser un campo. La caja anterior ocupaba
   340px de barra para no hacer nada hasta que uno la tocara.

   Verde sólido: es la acción principal de la barra y tiene que verse como
   tal. El tono es más oscuro que el verde de marca porque lleva texto
   blanco encima — con #00a86b el blanco da 2,58:1 y el mínimo es 4,5:1.
   Con este da 4,82:1. Es el mismo verde del filtro seleccionado, así que
   además el sitio queda coherente.

   Sin el atajo de teclado a la vista: ⌘K no le dice nada a quien no usa
   Mac, y Ctrl+K tampoco a quien nunca usó un atajo. Los atajos siguen
   funcionando —⌘K, Ctrl+K y `/`— solo que no se anuncian.
   ────────────────────────────────────────────────────────────────────────── */
.btn-buscar { flex: 0 0 auto; margin-left: auto; display: inline-flex;
  align-items: center; gap: 8px; cursor: pointer;
  padding: 11px 20px 11px 17px; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(100deg, #09724f, #0e9164);
  border: 1px solid transparent;
  box-shadow: 0 6px 16px -6px rgba(9,114,79,.8), inset 0 1px 0 rgba(255,255,255,.24);
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s, filter .16s; }
.btn-buscar svg { width: 17px; height: 17px; flex: 0 0 17px; }
.btn-buscar:hover { transform: translateY(-1px); filter: brightness(1.07);
  box-shadow: 0 10px 24px -7px rgba(9,114,79,.85), inset 0 1px 0 rgba(255,255,255,.32); }
.btn-buscar:active { transform: translateY(0); }
.btn-buscar:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn-buscar:hover { transform: none; } }

/* La caja vieja sigue viva en el cajón de móvil. */
.search { flex: 1; max-width: 560px; display: flex; align-items: center; background: var(--bg-2);
  border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 4px 4px 16px; transition: border-color .15s, box-shadow .15s; }
.search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(10,99,230,.1); background: var(--s4-surface, #fff); }
.search svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 18px; }
.search input { flex: 1; border: 0; background: none; padding: 10px 12px; font-size: 14.5px; color: var(--ink); outline: none; }
.search input::placeholder { color: var(--muted); }
.search .go { background: var(--accent); color: #fff; font-weight: 700; font-size: 13.5px; padding: 10px 20px; border-radius: 999px; }
.search .go:hover { filter: brightness(1.05); }

.nav { display: flex; align-items: center; gap: 2px; }
/* `>` a propósito: solo los enlaces DIRECTOS de la barra. Sin él esta regla
   alcanzaba también a los de dentro de los mega-menús —.dd-item y .dd-all—
   y les ganaba por especificidad (.nav a pesa más que .dd-all), así que
   «Ver catálogo completo» salía como pastilla inline pegada a la izquierda
   en vez de ocupar el ancho, y los ítems heredaban gap y padding ajenos que
   descuadraban las columnas. */
.nav > a, .nav .dd-btn { padding: 9px 13px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 5px; transition: background .15s, color .15s; }
.nav > a:hover, .nav .dd-btn:hover, .nav > a.active { color: var(--blue); background: var(--bg-2); }
.nav .cta { color: #fff; background: var(--accent); font-weight: 700; }
.nav .cta:hover { color: #fff; filter: brightness(1.06); }
.nav .icon-link { position: relative; }
.cart-count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #ff4757; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }

/* mega dropdown categorías */
/* ── Mega-menú de Categorías ────────────────────────────────────────────────
   El problema que tenía: el panel abría 10px DEBAJO del botón, con un hueco
   real entremedio. Al bajar el mouse el cursor salía de .dd, el :hover se
   apagaba y el menú se cerraba antes de llegar. Se arregla con tres cosas:

     1. Un puente invisible (.dd-menu::before) que tapa el hueco, así el
        cursor nunca sale de la zona activa.
     2. Retardo al cerrar: 220ms de gracia para un resbalón. Al ABRIR no hay
        retardo, para que no se sienta lento.
     3. :focus-within, para que también se abra con el teclado (Tab).
   ────────────────────────────────────────────────────────────────────────── */
.dd { position: relative; }

/* Un desplegable al ancho de la página. El panel se posiciona contra la
   barra del encabezado —que ya es el contenedor de 1240px del sitio— y no
   contra su propio botón, así que el .dd deja de ser el punto de
   referencia: por eso `position: static`. Los 22px de cada lado son los
   mismos que el padding de .wrap, para que los bordes del panel caigan
   justo bajo el logo y el carrito. */
.header-in { position: relative; }
.dd.dd-ancho { position: static; }
.dd-btn { cursor: pointer; }
.dd-btn .chev { transition: transform .22s cubic-bezier(.4,0,.2,1); }
.dd:hover .dd-btn .chev, .dd:focus-within .dd-btn .chev { transform: rotate(180deg); }
.dd:hover .dd-btn, .dd:focus-within .dd-btn { color: var(--blue); background: var(--bg-2); }

.dd-menu { position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(6px) scale(.985); transform-origin: top center;
  width: min(820px, 94vw); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px -18px rgba(15,37,64,.28), 0 2px 8px rgba(15,37,64,.06);
  padding: 22px 22px 18px; opacity: 0; visibility: hidden; z-index: 120;
  /* Cerrar: se espera antes de ocultar. Abrir: inmediato (ver regla de hover). */
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .22s; }

/* El puente: cubre el hueco entre el botón y el panel. Invisible, pero el
   cursor sigue "dentro" del menú mientras lo cruza. */
.dd-menu::before { content: ''; position: absolute; left: 0; right: 0;
  top: -14px; height: 14px; }

/* La puntita que ancla el panel al botón. */
.dd-menu::after { content: ''; position: absolute; top: -7px; left: 50%;
  width: 13px; height: 13px; margin-left: -6.5px; background: var(--surface);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  border-radius: 3px 0 0 0; transform: rotate(45deg); }

.dd:hover .dd-menu, .dd:focus-within .dd-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.3,1), visibility 0s; }

@media (prefers-reduced-motion: reduce) {
  .dd-menu, .dd:hover .dd-menu, .dd:focus-within .dd-menu,
  .dd-btn .chev { transition: none; transform: translateX(-50%); }
  .dd:hover .dd-menu, .dd:focus-within .dd-menu { transform: translateX(-50%); }
}

/* El panel ancho no se centra sobre su botón: ocupa el ancho del sitio. Por
   eso pierde el translateX y también la puntita, que apuntaría al centro de
   la página en vez de al botón. */
.dd-ancho .dd-menu { left: 22px; right: 22px; width: auto;
  transform: translateY(6px) scale(.995); transform-origin: top center; }
.dd-ancho .dd-menu::after { display: none; }
.dd-ancho .dd-menu::before { display: none; }
.dd-ancho .dd-btn { position: relative; }
.dd-ancho .dd-btn::after { content: ''; position: absolute; left: 0; right: 0;
  top: 100%; height: 30px; }
.dd.dd-ancho:hover .dd-menu, .dd.dd-ancho:focus-within .dd-menu {
  transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .dd-ancho .dd-menu, .dd.dd-ancho:hover .dd-menu,
  .dd.dd-ancho:focus-within .dd-menu { transform: none; }
}

.dd-menu .dd-hd { display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 13px; margin-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.dd-menu h3 { font-size: 15.5px; letter-spacing: -.01em; margin: 0; }
.dd-menu .sub { color: var(--muted); font-size: 12.5px; margin: 0 0 0 auto;
  font-variant-numeric: tabular-nums; }

.dd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.dd-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px;
  border-radius: 12px; position: relative;
  transition: background .14s ease, transform .14s ease; }
.dd-item::after { content: ''; position: absolute; inset: 0; border-radius: 12px;
  border: 1px solid transparent; transition: border-color .14s ease; }
.dd-item:hover { background: var(--bg-2); transform: translateX(2px); }
.dd-item:hover::after { border-color: var(--line); }
.dd-item:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .dd-item:hover { transform: none; } }

.dd-item .di { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 36px;
  display: grid; place-items: center; color: var(--blue);
  background: linear-gradient(135deg, rgba(10,99,230,.11), rgba(0,168,107,.11));
  transition: background .16s ease, color .16s ease; }
.dd-item:hover .di { background: var(--accent); color: #fff; }
.dd-item .di svg { width: 18px; height: 18px; }
.dd-item .dt { min-width: 0; }
.dd-item b { font-size: 13.5px; font-weight: 600; color: var(--ink); display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-item em { font-style: normal; font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; display: block; }

.dd-all { display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2);
  color: var(--blue); font-weight: 700; font-size: 14px; }
.dd-all svg { width: 16px; height: 16px; transition: transform .18s ease; }
.dd-all:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .dd-all:hover svg { transform: none; } }

/* ── Mega-menú de Marcas ────────────────────────────────────────────────────
   Comparte todo con el de categorías salvo la baldosa: acá va el LOGO de la
   marca en vez de un icono. Fondo blanco liso porque los logos vienen
   recortados sobre blanco, y `contain` para que ninguno se deforme —hay
   logos muy anchos y otros casi cuadrados.
   ────────────────────────────────────────────────────────────────────────── */
.dd-item .di-logo { background: var(--s4-surface, #fff); border: 1px solid var(--line);
  padding: 4px; overflow: hidden; }
.dd-item .di-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* El logo no se tiñe al pasar por encima: es la imagen de la marca. */
.dd-item:hover .di-logo { background: var(--s4-surface, #fff); }

/* Las marcas sin logo en el ERP caen a su inicial —son 205 de 282, no un
   caso raro—. Lleva la MISMA placa blanca que un logo de verdad: con el
   fondo degradado que tenía antes, media lista se veía de un color y media
   de otro, y el ojo leía «a esta le falta algo» en cada renglón. Con la
   placa igual, el monograma pasa por una decisión. */
.dd-item .di-ini { background: var(--s4-surface, #fff); border: 1px solid var(--line);
  font-family: var(--font); font-weight: 800; font-size: 15px;
  letter-spacing: -.01em; color: var(--blue); }
.dd-item:hover .di-ini { background: var(--s4-surface, #fff); color: var(--blue); }

/* Tres columnas, como categorías. Con cuatro no cabían «CAROLINA
   BIOLOGICAL» ni «QUEST TECHNOLOGY» y el nombre se cortaba con puntos
   suspensivos, que en un menú de marcas es justo lo que no se puede hacer. */
/* ── Mega-menú de Marcas · zona destacada ───────────────────────────────────
   Las seis marcas con página propia van arriba, en pequeño y en una sola
   fila; debajo, el resto del catálogo de marcas. El énfasis no viene del
   tamaño sino de tres cosas: van primero, se ve el logo OFICIAL en vez de
   la miniatura del ERP, y cada una lleva su color de marca en el filo
   superior. El filo está siempre encendido, no solo al pasar por encima:
   seis colores en fila es lo que hace que la zona se lea aparte de un
   vistazo.

   Y la distinción no es decorativa — estas seis llevan a un sitio DISTINTO
   que las demás: a su página temática, no al catálogo filtrado.

   El fondo se queda BLANCO. Tintarlo con --bg-2 dejaba el conteo de Garmin
   en 4,0:1 y el de Power Sonic en 4,1:1, por debajo del mínimo legible;
   sobre el blanco del panel el peor caso sube a 4,55:1.
   ────────────────────────────────────────────────────────────────────────── */
.dd-rot { display: flex; align-items: baseline; gap: 8px; font-size: 10.5px;
  font-weight: 800; letter-spacing: .10em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; }
.dd-rot em { font-style: normal; font-weight: 600; font-size: 11.5px;
  letter-spacing: .01em; text-transform: none; color: var(--muted); opacity: .75; }
.dd-rot-todas { margin-top: 18px; padding-top: 15px;
  border-top: 1px solid var(--line-2); }

.dd-dest-grid { display: grid; gap: 8px;
  /* auto-fit y no un número fijo: la fila se reparte sola cuando se suma o
     se quita una marca destacada, que ya pasó dos veces. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.dd-dest-item { --mk: var(--blue); --tinta: 1; position: relative; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 11px 10px 9px; border-radius: 12px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.dd-dest-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--mk); }
.dd-dest-item:hover { border-color: var(--mk); transform: translateY(-2px);
  box-shadow: 0 9px 22px -12px color-mix(in srgb, var(--mk) 60%, transparent); }
@supports not (color: color-mix(in srgb, red, blue)) {
  .dd-dest-item:hover { box-shadow: 0 9px 22px -12px rgba(15,37,64,.42); }
}
.dd-dest-item:focus-visible { outline: 2px solid var(--mk); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dd-dest-item:hover { transform: none; } }

/* La placa del logo. Clara para todas las de hoy. La oscura queda para un
   logo que sobre blanco no se vea y que no se pueda repintar —un SVG de dos
   tintas, por ejemplo—; Tacx lo era hasta que empezó a servirse repintado,
   y una caja negra entre cinco baldosas blancas se veía como un error. Cuál
   lleva cada una lo decide el servidor y no el CSS: depende del logo, no
   del sitio.

   El alto se divide entre --tinta, que es cuánto del archivo es realmente
   logo. Fellowes trae 11% de aire dentro del PNG, y Power Sonic y Carolina
   un 26%: alineados por la caja salían la mitad de grandes que Garmin en la
   misma fila. Dividiendo, los seis quedan con la misma altura de tinta. */
.ddm-logo { width: 100%; height: 30px; display: grid; place-items: center;
  border-radius: 8px; padding: 3px 7px; }
.ddm-logo img { max-height: calc(20px / var(--tinta)); max-width: 100%;
  width: auto; height: auto; object-fit: contain; transition: transform .16s ease; }
.dd-dest-item:hover .ddm-logo img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .dd-dest-item:hover .ddm-logo img { transform: none; }
}
.dd-dest-item.placa-oscura .ddm-logo { background: #12243a; }

.ddm-n { font-size: 11px; font-weight: 700; color: var(--mk);
  font-variant-numeric: tabular-nums; line-height: 1.2; }

@media (max-width: 900px) { .dd-grid { grid-template-columns: repeat(2, 1fr); } }

.burger { display: none; width: 44px; height: 44px; border-radius: 11px; background: var(--bg-2); }
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px auto; border-radius: 2px; }

.icon-btn { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-2);
  border: 1px solid var(--line); color: var(--ink); position: relative; transition: background .15s, transform .15s; }
.icon-btn:hover { background: var(--s4-surface, #fff); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.icon-btn svg { width: 20px; height: 20px; }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px;
  font-weight: 700; font-size: 14.5px; transition: transform .16s, box-shadow .18s, filter .15s; white-space: nowrap; }
.btn svg, .btn i { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn-primary { color: #fff; background: var(--accent); box-shadow: 0 8px 20px rgba(10,99,230,.28); }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 28px rgba(10,99,230,.36); }
.btn-outline { color: var(--blue); background: var(--s4-surface, #fff); border: 1.5px solid var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
.btn-ghost { color: var(--ink); background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.6); }
.btn-glass { color: var(--ink); background: var(--s4-surface, #fff); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.btn-glass:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-lg { padding: 15px 30px; font-size: 16px; }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-block { width: 100%; }

.eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green);
  display: inline-block; margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: 13px;
  font-weight: 600; background: var(--s4-surface, #fff); border: 1px solid var(--line); color: var(--ink-2); }
.chip.on { background: var(--accent); color: #fff; border-color: transparent; }

/* ── Secciones ────────────────────────────────────────────────────────────── */
section { padding: 60px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 38px; }
.section-head.left { text-align: left; margin-left: 0; }
.section-title { font-size: clamp(24px, 3.2vw, 36px); font-weight: 800; }
.section-head p { color: var(--muted); margin-top: 8px; font-size: 15.5px; }
.section-cta { text-align: center; margin-top: 34px; }

/* ── Hero (claro, con degradado + formas) ─────────────────────────────────── */
.hero { position: relative; overflow: hidden; background:
    radial-gradient(900px 500px at 82% -10%, rgba(11,184,166,.16), transparent 60%),
    radial-gradient(800px 500px at 0% 110%, rgba(10,99,230,.14), transparent 55%),
    linear-gradient(180deg, #ffffff, var(--bg)); border-bottom: 1px solid var(--line); }
/* `padding-block`, NO el atajo `padding`. Este div lleva `class="wrap hero-in"`
   y `.hero-in` va después en la hoja: con `padding: 66px 0 60px` los 22px
   laterales de `.wrap` quedaban en CERO, y en un teléfono el titular y el
   segundo botón se salían por la derecha. En escritorio no se notaba porque
   el ancho máximo y el centrado lo disimulaban. */
.hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px;
  align-items: center; padding-block: 66px 60px; }
.hero h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 900; margin: 6px 0 18px; }
.hero .lead { font-size: clamp(16px, 1.5vw, 18.5px); color: var(--ink-2); max-width: 500px; }
.hero .lead strong { color: var(--ink); }
.hero-cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 34px; margin-top: 40px; }
.hero-stats b { display: block; font-family: var(--font); font-size: 26px; font-weight: 800; color: var(--ink); }
.hero-stats span { font-size: 13px; color: var(--muted); }
.hero-card { background: var(--s4-surface, #fff); border: 1px solid var(--line); border-radius: 24px; padding: 22px; box-shadow: var(--shadow-lg); position: relative; }
.hero-visual { aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; position: relative;
  background: linear-gradient(135deg, rgba(10,99,230,.1), rgba(0,168,107,.12)); display: grid; place-items: center; }
/* El icono de SATEC reemplaza la esfera que había: decía menos que la marca
   y ocupaba el mismo lugar. Conserva el flotado, que es lo que hacía que el
   bloque no se viera muerto. */
.hero-visual .hv-icono { position: relative; z-index: 1;
  width: 62%; max-width: 320px; height: auto; object-fit: contain;
  filter: drop-shadow(0 18px 38px rgba(10,60,120,.28));
  animation: float 6s ease-in-out infinite; }

/* El halo: un resplandor en los colores de la marca detrás del icono. Sin él
   la imagen recortada queda plana sobre el fondo tenue de la celda. */
.hero-visual .hv-halo { position: absolute; z-index: 0;
  width: 66%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,
      rgba(18,201,138,.42), rgba(10,99,230,.28) 58%, transparent 72%);
  filter: blur(18px); animation: float 6s ease-in-out infinite; }
/* Si el icono no carga, el halo se queda solo y se vuelve la esfera de antes
   en vez de dejar la celda vacía. */
.hero-visual .hv-halo.solo { filter: none; width: 55%;
  background: radial-gradient(circle at 32% 28%, #ffffff, #12c98a 32%, #0a63e6 82%);
  box-shadow: 0 24px 60px rgba(10,99,230,.35); }

@keyframes float { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }
.hero-card .hc-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.hero-card .hc-row b { font-family: var(--font); font-size: 16px; }
@media (prefers-reduced-motion: reduce){ .hero-visual .hv-icono,
  .hero-visual .hv-halo { animation: none; } }

/* ── Hero slider (banners administrables desde el CRM) ────────────────────── */
.hero-slider { position: relative; overflow: hidden; background: var(--bg-2); border-bottom: 1px solid var(--line);
  padding: 0; margin: 0; }   /* pegado a la base del header (anula el padding global de section) */
.hs-viewport { overflow: hidden; }
.hs-track { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); }
/* Alto del hero. El minimo se deja en 300px a proposito: en un telefono el
   video (16/9 sobre el ancho, con el scale) mide ~292px, asi que subir el piso
   solo agregaria franjas de color arriba y abajo. Lo que crece es el tope. */
.hs-slide { min-width: 100%; position: relative; height: clamp(300px, 52vw, 680px); background: var(--bg-2); overflow: hidden; }
.hs-slide .bg { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Video de YouTube de fondo. Un iframe de YouTube es SIEMPRE 16:9 y no
   entiende object-fit, asi que se lo dimensiona por el ancho y se lo centra:
   en pantallas anchas el video sobra por arriba y abajo y el slide lo recorta
   (que es lo que se busca), y en pantallas angostas la franja que queda la
   llena el color de fondo del banner, que va debajo. Por eso se ve deliberado
   en vez de roto, y el video nunca se deforma.
   pointer-events:none: es fondo, no un reproductor — sin eso aparece el menu
   de YouTube al hacer clic. */
/* Imagenes overlay del banner. Se anclan por su CENTRO (translate -50%,-50%),
   asi que el ancho maximo lo calcula el JS segun donde este puesta: una imagen
   centrada abajo no se corta. object-fit:contain la ACHICA en vez de recortarla
   cuando llega a ese tope, y su centro queda donde lo dejo el CRM. */
.hs-slide .hs-ovl { position: absolute; transform: translate(-50%, -50%);
  height: auto; object-fit: contain; pointer-events: none; }
/* Texto y boton con coordenada libre del editor del CRM. Se anclan por su
   CENTRO, igual que los overlays, para que el punto que se ve en el editor sea
   el mismo que se ve en la web. `inset:auto` deshace el `inset:0` del layout
   normal — sin eso el bloque seguiria estirado de borde a borde y el left/top
   en linea no lo movería. */
.hs-slide .hs-content.libre { inset: auto; transform: translate(-50%, -50%);
  width: max-content; padding: 0; }
.hs-slide .hs-content.libre h2,
.hs-slide .hs-content.libre p { max-width: 100%; }
.hs-slide .hs-cta-libre { position: absolute; transform: translate(-50%, -50%); }
.hs-slide .hs-video { position: absolute; top: 50%; left: 50%;
  /* El scale de mas no es estetico: YouTube dibuja el titulo arriba y su barra
     abajo DENTRO del iframe, y con `controls=0` igual asoman un instante al
     arrancar. Agrandando un 30% esos dos bordes quedan fuera del recorte del
     slide y no se ven nunca. `pointer-events:none` completa: sin hover no
     aparece el resto del cromo ni se puede hacer clic. */
  transform: translate(-50%, -50%) scale(1.3); width: 100%;
  aspect-ratio: 16 / 9; border: 0; pointer-events: none;
  transition: opacity .6s ease; }
/* La API de YouTube reemplaza el hueco por un <iframe> con su tamano por
   defecto (640x390). Hay que forzarlo a llenar el contenedor o el video sale
   chico en una esquina. */
.hs-slide .hs-video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Boton en una de las nueve posiciones preestablecidas. El contenedor
   posiciona y el <a> de adentro anima, asi la animacion no pelea con el
   transform que centra. */
.hs-slide .hs-cta-pos { position: absolute; }
.hs-slide .hs-cta-pos-tl { top: 8%;    left: 6%;  }
.hs-slide .hs-cta-pos-tc { top: 8%;    left: 50%; transform: translateX(-50%); }
.hs-slide .hs-cta-pos-tr { top: 8%;    right: 6%; }
.hs-slide .hs-cta-pos-ml { top: 50%;   left: 6%;  transform: translateY(-50%); }
.hs-slide .hs-cta-pos-mc { top: 50%;   left: 50%; transform: translate(-50%, -50%); }
.hs-slide .hs-cta-pos-mr { top: 50%;   right: 6%; transform: translateY(-50%); }
.hs-slide .hs-cta-pos-bl { bottom: 10%; left: 6%;  }
.hs-slide .hs-cta-pos-bc { bottom: 10%; left: 50%; transform: translateX(-50%); }
.hs-slide .hs-cta-pos-br { bottom: 10%; right: 6%; }

/* ── Efectos de entrada del banner (los siete del editor del CRM) ──────────
   Solo corren en el slide visible: sin la compuerta de .is-active se animarian
   todos a la vez al cargar y no se veria ninguno.
   Van DOS juegos de keyframes. Los overlays, el texto libre y el boton libre
   se anclan con translate(-50%,-50%), asi que su animacion tiene que arrastrar
   ese translate o el elemento salta de lugar al terminar. El texto SIN posicion
   libre no lo lleva, y usa las variantes "-plano". */
.hs-slide .anim { opacity: 0; animation-duration: .85s;
  animation-timing-function: cubic-bezier(.2, .85, .25, 1);
  animation-fill-mode: forwards; }
.hs-slide:not(.is-active) .anim { animation-play-state: paused; opacity: 0; }
.hs-slide.is-active .anim { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .hs-slide .anim { animation: none !important; opacity: 1 !important; }
}

@keyframes hsFadeIn { from { opacity: 0; } to { opacity: 1; } }
.hs-slide .anim-fade-in { animation-name: hsFadeIn; }

@keyframes hsSlideR { from { opacity: 0; transform: translate(calc(-50% - 40px), -50%); }
                      to   { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes hsSlideL { from { opacity: 0; transform: translate(calc(-50% + 40px), -50%); }
                      to   { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes hsSlideU { from { opacity: 0; transform: translate(-50%, calc(-50% + 40px)); }
                      to   { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes hsSlideD { from { opacity: 0; transform: translate(-50%, calc(-50% - 40px)); }
                      to   { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes hsZoomIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
                      to   { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes hsBounce { 0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
                      60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
                      100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.hs-slide .anim-slide-r { animation-name: hsSlideR; }
.hs-slide .anim-slide-l { animation-name: hsSlideL; }
.hs-slide .anim-slide-u { animation-name: hsSlideU; }
.hs-slide .anim-slide-d { animation-name: hsSlideD; }
.hs-slide .anim-zoom-in { animation-name: hsZoomIn; }
.hs-slide .anim-bounce  { animation-name: hsBounce; animation-duration: 1s; }

/* Variantes para el texto sin posicion libre, que no lleva translate propio. */
@keyframes hsSlideRPlano { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes hsSlideLPlano { from { opacity: 0; transform: translateX(40px); }  to { opacity: 1; transform: none; } }
@keyframes hsSlideUPlano { from { opacity: 0; transform: translateY(40px); }  to { opacity: 1; transform: none; } }
@keyframes hsSlideDPlano { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes hsZoomInPlano { from { opacity: 0; transform: scale(.7); }         to { opacity: 1; transform: none; } }
@keyframes hsBouncePlano { 0% { opacity: 0; transform: scale(.5); }
                           60% { opacity: 1; transform: scale(1.08); }
                           100% { opacity: 1; transform: none; } }
/* El <a> del boton nunca se centra con transform propio, asi que sus efectos
   usan siempre la variante plana. */
.hs-slide a.anim-slide-r { animation-name: hsSlideRPlano; }
.hs-slide a.anim-slide-l { animation-name: hsSlideLPlano; }
.hs-slide a.anim-slide-u { animation-name: hsSlideUPlano; }
.hs-slide a.anim-slide-d { animation-name: hsSlideDPlano; }
.hs-slide a.anim-zoom-in { animation-name: hsZoomInPlano; }
.hs-slide a.anim-bounce  { animation-name: hsBouncePlano; }
.hs-content:not(.libre).anim-slide-r { animation-name: hsSlideRPlano; }
.hs-content:not(.libre).anim-slide-l { animation-name: hsSlideLPlano; }
.hs-content:not(.libre).anim-slide-u { animation-name: hsSlideUPlano; }
.hs-content:not(.libre).anim-slide-d { animation-name: hsSlideDPlano; }
.hs-content:not(.libre).anim-zoom-in { animation-name: hsZoomInPlano; }
.hs-content:not(.libre).anim-bounce  { animation-name: hsBouncePlano; }
.hs-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 clamp(24px, 8%, 110px); }
.hs-content.C { align-items: center; text-align: center; } .hs-content.J { align-items: center; text-align: center; }
.hs-content.L { align-items: flex-start; text-align: left; } .hs-content.R { align-items: flex-end; text-align: right; }
.hs-content h2 { font-size: clamp(24px, 3.8vw, 50px); font-weight: 900; color: #fff; max-width: 62%; line-height: 1.08; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hs-content p { font-size: clamp(14px, 1.5vw, 20px); color: #fff; opacity: .96; max-width: 52%; text-shadow: 0 2px 14px rgba(0,0,0,.3); }
.hs-content .btn { margin-top: 6px; }
.hs-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.86); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow); z-index: 3; transition: background .15s, transform .15s; }
.hs-nav:hover { background: var(--s4-surface, #fff); }
.hs-nav.prev { left: 18px; } .hs-nav.next { right: 18px; }
.hs-nav svg { width: 22px; height: 22px; }
.hs-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.hs-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; transition: all .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.hs-dot.on { background: var(--s4-surface, #fff); width: 26px; border-radius: 5px; }
@media (max-width: 700px){
  .hs-content h2 { max-width: 92%; } .hs-content p { max-width: 88%; }
  .hs-nav { display: none; }
}

/* ── Grid de categorías ───────────────────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px;
  display: flex; flex-direction: column; gap: 12px; transition: transform .2s, box-shadow .2s, border-color .2s; min-height: 140px; }
.cat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(10,99,230,.3); }
.cat-tile .ci { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(10,99,230,.12), rgba(0,168,107,.14)); color: var(--blue); }
.cat-tile .ci svg { width: 26px; height: 26px; }
.cat-tile h3 { font-size: 16px; margin-top: auto; }
.cat-tile span { font-size: 12.5px; color: var(--muted); }

/* ── Marcas ───────────────────────────────────────────────────────────────── */
.brand-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.brand-card { background: var(--s4-surface, #fff); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 14px; text-align: center;
  font-family: var(--font); font-weight: 700; font-size: 14px; color: var(--ink-2); transition: transform .18s, box-shadow .18s, color .18s; }
.brand-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--blue); border-color: rgba(10,99,230,.3); }
.brand-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 108px; }
.brand-card b { color: var(--green); display: block; font-size: 12px; margin-top: 4px; }
.brand-logo { height: 46px; max-width: 90%; object-fit: contain; margin: 2px auto 4px; }
.brand-name { display: block; font-family: var(--font); font-weight: 700; font-size: 14px; color: var(--ink-2); }

/* ── Marcas en movimiento ───────────────────────────────────────────────────
   Dos filas que se desplazan en sentidos OPUESTOS. La de arriba va hacia la
   izquierda y la de abajo hacia la derecha: el contraste da sensación de
   profundidad sin que ninguna de las dos corra rápido.

   El bucle es continuo porque el JS imprime cada fila DOS VECES y la pista
   se anima hasta -50%: al llegar, la segunda copia está exactamente donde
   arrancó la primera y el salto no se ve.

   Se pausa al pasar el mouse — si no, no habría forma de hacer clic en una
   marca en movimiento.
   ────────────────────────────────────────────────────────────────────────── */
.brand-rows { display: flex; flex-direction: column; gap: 14px; }

.brand-marquee { overflow: hidden; position: relative; }
/* Los bordes se desvanecen en vez de cortar en seco. -webkit- va aparte
   porque Safari todavía lo pide con prefijo. */
.brand-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
                         mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }

.brand-track { display: flex; gap: 14px; width: max-content;
  animation: brand-scroll 46s linear infinite; will-change: transform; }
.brand-track.rev { animation-direction: reverse; animation-duration: 58s; }
.brand-marquee:hover .brand-track { animation-play-state: paused; }

@keyframes brand-scroll { to { transform: translateX(-50%); } }

/* Dentro de la marquesina las tarjetas no las coloca una grilla, así que
   necesitan ancho propio. */
.brand-track .brand-card { flex: 0 0 190px; margin: 0; }

/* Sin movimiento: se apaga la animación y las filas quedan desplazables a
   mano, que es lo honesto — ocultarlas escondería contenido real. */
@media (prefers-reduced-motion: reduce) {
  .brand-track { animation: none; }
  .brand-marquee { overflow-x: auto; scrollbar-width: thin;
    -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 640px) {
  .brand-track .brand-card { flex: 0 0 150px; }
  .brand-track { animation-duration: 32s; }
  .brand-track.rev { animation-duration: 40s; }
}

/* ── Grid de productos ────────────────────────────────────────────────────── */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.prod-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.prod-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; position: relative; }
.prod-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(10,99,230,.25); }
/* El `min-height:0` es lo que hace que el cuadro sea DE VERDAD cuadrado.
   La tarjeta es un contenedor flexible, así que este cuadro es un ítem
   flexible y arrastra `min-height:auto`: su mínimo lo fija la foto. Con una
   foto vertical el cuadro crecía hasta el alto natural de la imagen —el
   `aspect-ratio` quedaba de adorno— y esa tarjeta salía más alta que sus
   vecinas, descuadrando la fila entera. Medido: foto 400×800 en columna de
   284px daba un cuadro de 284×554. */
.prod-media { aspect-ratio: 1; min-height: 0; position: relative; background: var(--s4-surface, #fff); border-bottom: 1px solid var(--line-2); }
/* Todo lo que va ENCIMA de la foto sube con ella, por el mismo motivo que el
   corazón: la foto se transforma al pasar el ratón y se lleva la capa. */
.prod-media .badge, .prod-media .stock-badge { z-index: 2; }
.prod-media img { position: relative; z-index: 1; }
.prod-media img { width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform .35s; }
.prod-card:hover .prod-media img { transform: scale(1.05); }
.prod-rank { position: absolute; top: 10px; left: 10px; background: var(--accent); color: #fff; font-family: var(--font);
  font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.prod-badge { position: absolute; top: 10px; left: 10px; background: #ff4757; color: #fff; font-weight: 800; font-size: 11.5px;
  padding: 4px 10px; border-radius: 999px; }
.stock-badge { position: absolute; bottom: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.94); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.stock-badge .dot { width: 7px; height: 7px; border-radius: 50%; }
.stock-badge.ok { color: var(--green); } .stock-badge.ok .dot { background: var(--green); box-shadow: 0 0 6px var(--green-2); }
.stock-badge.no { color: #e0803a; } .stock-badge.no .dot { background: #e0803a; }
/* El corazón se VE siempre. Estaba en opacity:0 y solo aparecía con el
   cursor encima: en un teléfono no aparecía nunca, así que la lista de
   deseados era invisible para media web. Ahora está puesto —discreto— y se
   enciende al pasar por encima. Y si ya está marcado, a plena vista: es un
   dato del cliente, no un adorno del hover. */
.prod-fav { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.94); border: 1px solid var(--line); color: var(--muted);
  opacity: .72; transition: opacity .2s, color .2s, transform .2s;
  /* z-index explícito. Sin él el corazón DESAPARECÍA al pasar el ratón: la
     foto lleva `transform: scale()` en el hover, y un transform crea un
     contexto de apilamiento. La imagen va DESPUÉS del corazón en el HTML,
     así que al escalarse pasaba a pintarse encima. El corazón no se
     ocultaba: quedaba tapado por la foto. */
  z-index: 3; }
.prod-card:hover .prod-fav { opacity: 1; }
.prod-fav:hover { color: #ff4757; transform: scale(1.1); }
.prod-fav.on { opacity: 1; }
.prod-fav:focus-visible { opacity: 1; outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .prod-fav:hover { transform: none; } }
.prod-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.prod-code { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.prod-brand { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--green); }
.prod-name { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; min-height: 37px; }
.prod-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.prod-price { display: flex; flex-direction: column; }
.prod-price .now { font-family: var(--font); font-size: 18px; font-weight: 800; color: var(--ink); }
.prod-price .was { font-size: 12px; color: var(--muted); text-decoration: line-through; }
.prod-price .consulta { font-size: 13px; font-weight: 700; color: var(--blue); }
.prod-add { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: #fff;
  flex: 0 0 40px; box-shadow: 0 5px 14px rgba(10,99,230,.28); transition: transform .15s, filter .15s; }
.prod-add:hover { transform: translateY(-2px) scale(1.05); filter: brightness(1.06); }
.prod-add svg { width: 19px; height: 19px; }
.prod-tax { font-size: 10.5px; color: var(--muted); font-weight: 600; margin-top: 1px; }
.btn-consultar { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: auto;
  padding: 11px 14px; border-radius: 12px; font-weight: 700; font-size: 13px; transition: all .16s;
  background: linear-gradient(120deg, rgba(10,99,230,.12), rgba(0,168,107,.14)); color: var(--blue); border: 1px solid rgba(10,99,230,.28); }
.btn-consultar:hover { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgba(10,99,230,.28); }
.btn-consultar svg { width: 16px; height: 16px; }

.sk { background: linear-gradient(100deg, var(--bg-2) 30%, #f7fafd 50%, var(--bg-2) 70%); background-size: 200% 100%;
  animation: sk 1.3s infinite; border-radius: var(--radius-lg); }
@keyframes sk { 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }

/* ── Por qué SATEC ────────────────────────────────────────────────────────── */
.porque-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.porque { text-align: center; padding: 30px 20px 26px; background: var(--s4-surface, #fff);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: transform .2s, box-shadow .2s; }
.porque .pi { width: 62px; height: 62px; border-radius: 18px; margin: 0 auto 16px;
  display: grid; place-items: center; }
.porque .pi svg { width: 28px; height: 28px; }
.porque h3 { font-size: 16.5px; margin-bottom: 6px; letter-spacing: -.01em; text-wrap: balance; }
.porque p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* ── Features inline (hero-adyacente) ─────────────────────────────────────── */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat { display: flex; gap: 12px; align-items: center; background: var(--s4-surface, #fff); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.feat .fi { width: 42px; height: 42px; border-radius: 12px; flex: 0 0 42px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(10,99,230,.1), rgba(0,168,107,.13)); color: var(--blue); }
.feat .fi svg { width: 21px; height: 21px; }
.feat h4 { font-size: 14.5px; font-weight: 700; }
.feat p { font-size: 12.5px; color: var(--muted); }

/* ── CTA final (banda degradada) ──────────────────────────────────────────── */
.cta-final { background: var(--accent); color: #fff; text-align: center; border-radius: 26px; padding: 52px 28px; position: relative; overflow: hidden; }
.cta-final h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; margin-bottom: 10px; }
.cta-final p { max-width: 560px; margin: 0 auto 24px; opacity: .95; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer { background: #0c1f36; color: #b9c9de; margin-top: 20px; padding: 52px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
.footer .logo { color: #fff; margin-bottom: 12px; }
.footer h5 { font-family: var(--font); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #fff; margin-bottom: 12px; }
.footer a { display: block; color: #93a7c2; font-size: 14px; padding: 5px 0; }
.footer a:hover { color: #fff; }
/* ── Redes sociales del pie ─────────────────────────────────────────────────
   Los iconos son SVG incrustados y RELLENOS, no trazos: Lucide dejó de traer
   logos de marca —Facebook, Instagram y TikTok salían como cuadros vacíos— y
   estos vienen de simple-icons, que los dibuja como silueta. De ahí el
   `fill: currentColor` en vez del `stroke` que usan los demás iconos del
   sitio.

   Al pasar por encima cada una toma su color. Cuál lleva glifo blanco y cuál
   oscuro está medido sobre su propio tono, no elegido a ojo — el mínimo para
   un gráfico es 3:1:

       Facebook  #1877f2  blanco  4,23:1
       Instagram #e4405f  blanco  4,04:1
       TikTok    #ffffff  oscuro 17,52:1   su marca sobre fondo oscuro es la blanca
       WhatsApp  #25d366  oscuro  8,84:1   con glifo blanco caía a 1,98:1

   El verde de WhatsApp es el de verdad. Oscurecerlo hasta que el glifo
   blanco pasara (#128c7e) lo dejaba irreconocible; con el glifo oscuro se
   conserva el color y se gana legibilidad.
   ────────────────────────────────────────────────────────────────────────── */
.footer .fsoc { display: flex; gap: 10px; margin-top: 14px; }
.footer .fsoc a { width: 40px; height: 40px; border-radius: 11px; padding: 0;
  display: grid; place-items: center; background: rgba(255,255,255,.08);
  color: #cdd9ea; transition: background .18s ease, color .18s ease,
                              transform .18s cubic-bezier(.2,.8,.3,1); }
.footer .fsoc a:hover { transform: translateY(-2px); }
.footer .fsoc svg { width: 18px; height: 18px; fill: currentColor; display: block; }

.footer .fsoc .fs-facebook:hover  { background: #1877f2; color: #fff; }
.footer .fsoc .fs-instagram:hover { background: #e4405f; color: #fff; }
.footer .fsoc .fs-tiktok:hover    { background: var(--s4-surface, #fff);    color: #0b1a2c; }
.footer .fsoc .fs-whatsapp:hover  { background: #25d366; color: #0b1a2c; }
.footer .fsoc .fs-youtube:hover   { background: #ff0000; color: #fff; }
.footer .fsoc a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .footer .fsoc a, .footer .fsoc a:hover { transition: none; transform: none; }
}
.footer .copy { margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: #7f93b0; }

/* ── Chatbot ──────────────────────────────────────────────────────────────── */
.chat-fab { position: fixed; bottom: 24px; right: 24px; z-index: 200; width: 60px; height: 60px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(10,99,230,.42);
  transition: transform .2s; animation: pulse 2.6s infinite; }
.chat-fab:hover { transform: scale(1.08); } .chat-fab svg { width: 27px; height: 27px; }
@keyframes pulse { 0%,100%{ box-shadow: 0 12px 30px rgba(10,99,230,.42), 0 0 0 0 rgba(0,168,107,.45); }
                   50%{ box-shadow: 0 12px 30px rgba(10,99,230,.42), 0 0 0 14px rgba(0,168,107,0); } }
.chat-panel { position: fixed; bottom: 96px; right: 24px; z-index: 200; width: 380px; max-width: calc(100vw - 32px);
  height: 560px; max-height: calc(100vh - 130px); background: var(--s4-surface, #fff); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-lg); display: none; flex-direction: column; overflow: hidden; }
.chat-panel.open { display: flex; animation: chatin .3s cubic-bezier(.2,.8,.2,1); }
@keyframes chatin { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.chat-hd { padding: 15px 18px; display: flex; align-items: center; gap: 12px; background: var(--accent); color: #fff; }
.chat-hd .av { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.chat-hd .av svg { width: 22px; height: 22px; }
.chat-hd b { font-family: var(--font); font-size: 15px; }
.chat-hd .st { font-size: 11.5px; display: flex; align-items: center; gap: 5px; opacity: .95; }
.chat-hd .st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7dffbf; box-shadow: 0 0 8px #7dffbf; }
.chat-x { margin-left: auto; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.chat-x:hover { background: rgba(255,255,255,.18); }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 11px; background: var(--bg); }
.msg { max-width: 84%; padding: 11px 14px; border-radius: 15px; font-size: 13.5px; line-height: 1.45; }
.msg.bot { align-self: flex-start; background: var(--s4-surface, #fff); border: 1px solid var(--line); border-bottom-left-radius: 5px; box-shadow: var(--shadow-sm); }
.msg.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.msg.typing { display: flex; gap: 4px; } .msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.msg.typing i:nth-child(2){ animation-delay: .2s; } .msg.typing i:nth-child(3){ animation-delay: .4s; }
@keyframes blink { 0%,60%,100%{ opacity: .3; } 30%{ opacity: 1; } }
.chat-prods { display: flex; flex-direction: column; gap: 8px; }
.chat-prod { display: flex; gap: 10px; padding: 8px; border-radius: 12px; background: var(--s4-surface, #fff); border: 1px solid var(--line); align-items: center; }
.chat-prod img { width: 44px; height: 44px; border-radius: 9px; object-fit: contain; background: var(--s4-surface, #fff); border: 1px solid var(--line-2); }
.chat-prod .cn { font-size: 12px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-prod .cp { font-size: 12.5px; font-weight: 800; color: var(--blue); }
.chat-quick { display: flex; gap: 7px; flex-wrap: wrap; padding: 10px 12px 0; }
.chat-quick button { font-size: 12px; padding: 7px 11px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); }
.chat-quick button:hover { background: var(--s4-surface, #fff); color: var(--blue); }
.chat-foot { padding: 12px; border-top: 1px solid var(--line); display: flex; gap: 8px; }
.chat-foot input { flex: 1; padding: 11px 15px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink); }
.chat-foot input:focus { outline: none; border-color: var(--blue); background: var(--s4-surface, #fff); }
.chat-send { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: 0 0 44px; }
.chat-send svg { width: 20px; height: 20px; }

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast-host { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { padding: 11px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--accent);
  box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 8px; animation: toastin .3s cubic-bezier(.2,.8,.2,1); }
.toast svg { width: 17px; height: 17px; }
@keyframes toastin { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* glass helper (para páginas que lo usan) */
.glass { background: var(--s4-surface, #fff); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero-in { grid-template-columns: 1fr; } .hero-card { display: none; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
  .prod-grid, .prod-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
  .porque-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav, .search { display: none; }
  .burger { display: block; }
  .header-in { gap: 12px; }
}
@media (max-width: 560px) {
  .prod-grid, .prod-grid.cols-5 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  /* .porque-grid pasa a una columna horizontal — ver el bloque «Por qué SATEC» al final. */
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  section { padding: 44px 0; }
  .top-bar .slogan { display: none; }
  /* Sin el lema, el teléfono y el correo se van a los extremos. */
  .top-bar .top-actions { flex: 1; justify-content: space-between; gap: 12px; }
}
/* Por debajo de 360px no cabe ni el rótulo: «Central 2233-8111» y el correo
   suman 295px y en una pantalla de 320 solo quedan 270. Se deja el número. */
@media (max-width: 359px) {
  .top-bar .tb-corta { display: none; }
}

/* ── Drawer mobile ────────────────────────────────────────────────────────── */
.drawer-bd { position: fixed; inset: 0; background: rgba(6,20,40,.5); z-index: 130; opacity: 0; visibility: hidden; transition: opacity .25s; }
.drawer-bd.open { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: 300px; max-width: 86vw; background: var(--s4-surface, #fff); z-index: 131;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.drawer.open { transform: none; }
.drawer-hd { padding: 18px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: space-between; }
.drawer-hd .logo { color: #fff; font-size: 20px; }
.drawer-hd .logo .mark { background: rgba(255,255,255,.2); }
.drawer nav { padding: 12px; display: flex; flex-direction: column; }
.drawer nav a { padding: 13px 14px; border-radius: 12px; font-weight: 600; color: var(--ink); }
.drawer nav a:hover { background: var(--bg-2); color: var(--blue); }
.drawer .drawer-search { padding: 14px; border-bottom: 1px solid var(--line); }
.drawer .drawer-search .search { display: flex; }

/* Las marcas destacadas en el cajón. No es un extra: bajo 1000px la nav se
   esconde y el mega-menú no existe, así que si no están acá en móvil no
   están en ninguna parte.
   Los selectores llevan `.drawer nav` delante a propósito: `.drawer nav a`
   pesa más que `.dm-item` y le imponía su padding de 13px a los logos. */
.drawer .drawer-marcas { padding: 12px 14px 6px; }
.drawer .dm-rot { display: block; font-size: 10px; font-weight: 800;
  letter-spacing: .10em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 9px; }
.drawer .dm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.drawer nav .dm-item { --mk: var(--blue); --tinta: 1; display: grid; place-items: center;
  height: 42px; padding: 6px 10px; border-radius: 11px;
  border: 1px solid var(--line); border-top: 3px solid var(--mk);
  background: var(--surface); }
.drawer nav .dm-item:hover { background: var(--surface); border-color: var(--mk);
  border-top-color: var(--mk); }
.drawer nav .dm-item img { max-height: calc(18px / var(--tinta)); max-width: 100%;
  width: auto; height: auto; object-fit: contain; }
.drawer nav .dm-item.placa-oscura { background: #12243a; }
.drawer nav .dm-item.placa-oscura:hover { background: #12243a; }

/* ══════════════════════════════════════════════════════════════════════════
   Apple Liquid Glass — iOS 26 · celdas estilo Apple
   Vidrio traslúcido + blur + brillo especular + borde de luz + profundidad
   ══════════════════════════════════════════════════════════════════════════ */
.prod-card, .cat-tile, .brand-card, .porque, .feat, .glass, .hero-card {
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(22px) saturate(185%);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95),
              0 2px 8px rgba(15,37,64,.05),
              0 16px 42px rgba(10,60,120,.12);
  position: relative;
}
/* Brillo especular superior (la firma del liquid glass) */
.cat-tile, .brand-card, .porque, .feat, .hero-card { overflow: hidden; }
.cat-tile::before, .brand-card::before, .porque::before, .feat::before, .hero-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.08) 24%, transparent 48%),
    radial-gradient(100% 70% at 6% -10%, rgba(255,255,255,.5), transparent 46%);
}
.cat-tile > *, .brand-card > *, .porque > *, .feat > *, .hero-card > * { position: relative; z-index: 1; }
/* Media del producto: el producto "flota" sobre el vidrio */
.prod-media { background: rgba(255,255,255,.5); border-bottom-color: rgba(255,255,255,.55); }
/* Hover: se eleva + más brillo y profundidad */
.prod-card:hover, .cat-tile:hover, .brand-card:hover, .porque:hover, .feat:hover, .hero-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.95);
  box-shadow: inset 0 1px 0 #fff,
              0 3px 10px rgba(15,37,64,.08),
              0 30px 66px rgba(10,60,120,.2);
}

/* ── «Por qué SATEC» · acento propio por tarjeta ────────────────────────────
   Va DESPUÉS del bloque Liquid Glass a propósito: ese bloque fija fondo,
   borde y sombra de .porque, así que las reglas de acento tienen que llegar
   después para poder sumarse sin pelear por especificidad.

   Antes las cuatro tarjetas llevaban el mismo lavado azul-verde al 10%, tan
   pálido que el icono casi no se leía. Ahora cada una tiene su color según
   lo que dice: confianza en azul, disponibilidad en verde, la asesoría del
   asistente en violeta y la agilidad en ámbar. El color se declara UNA vez
   por tarjeta en --pq y de ahí lo derivan el icono, el aura y el borde.
   ────────────────────────────────────────────────────────────────────────── */
.porque { --pq: #0a63e6; --pq-2: #3d8bff; --pq-soft: rgba(10,99,230,.34); }
.porque:nth-child(1) { --pq:#0a63e6; --pq-2:#4f93ff; --pq-soft:rgba(10,99,230,.34); }
.porque:nth-child(2) { --pq:#008555; --pq-2:#14a26f; --pq-soft:rgba(0,168,107,.34); }
.porque:nth-child(3) { --pq:#7c3aed; --pq-2:#a970f7; --pq-soft:rgba(124,58,237,.32); }
.porque:nth-child(4) { --pq:#a46103; --pq-2:#c58f04; --pq-soft:rgba(234,138,4,.34); }
/* El verde y el ámbar están más oscuros que el verde y el ámbar de marca a
   propósito. Medido sobre el fondo real de la tarjeta (#fafcfe = blanco al
   60% del vidrio sobre el fondo de página): con los tonos de marca el icono
   blanco quedaba en 2,52:1 y 2,08:1 —el mínimo para un gráfico es 3:1— y el
   título al hover en 3,00:1 y 2,51:1, cuando el texto pide 4,5:1. El ámbar
   era el peor: sobre blanco casi nunca alcanza. Con estos valores los cuatro
   pasan. El --pq-soft del aura mantiene el tono vivo porque es un halo
   difuso, no algo que haya que leer. */

/* El aura: un halo del color de la tarjeta que se enciende al pasar por
   encima. Va en ::after porque ::before ya lo usa el brillo del vidrio. */
.porque::after { content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: -55%; left: 50%; width: 170%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, var(--pq-soft), transparent 58%);
  opacity: 0; transition: opacity .3s ease; }
.porque:hover::after { opacity: .55; }

.porque .pi { background: linear-gradient(140deg, var(--pq), var(--pq-2));
  color: #fff; position: relative; z-index: 1;
  box-shadow: 0 10px 22px -8px var(--pq-soft), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .26s cubic-bezier(.2,.8,.3,1), box-shadow .26s ease; }
.porque:hover .pi { transform: translateY(-3px) scale(1.07);
  box-shadow: 0 18px 34px -10px var(--pq-soft), inset 0 1px 0 rgba(255,255,255,.65); }

/* El borde toma el color de la tarjeta al pasar por encima. Se repite la
   sombra del vidrio porque box-shadow no se hereda: si solo se pusiera la
   línea interior, se perdería la profundidad. */
.porque:hover { border-color: var(--pq-soft);
  box-shadow: inset 0 2px 0 var(--pq), inset 0 1px 0 rgba(255,255,255,.6),
              0 3px 10px rgba(15,37,64,.08), 0 30px 66px rgba(10,60,120,.2); }

.porque:hover h3 { color: var(--pq); }
.porque h3 { transition: color .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .porque, .porque .pi, .porque::after { transition: none; }
  .porque:hover .pi { transform: none; }
}

/* ── Móvil: una columna, en horizontal ──────────────────────────────────────
   Hasta 560px estaban en dos columnas centradas, y no cabían: el icono de
   62px más un título de dos palabras más la descripción dejaban tres líneas
   partidas en una columna de ~150px. En horizontal —icono a la izquierda,
   texto a la derecha— cada tarjeta ocupa menos alto Y se lee mejor.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .porque-grid { grid-template-columns: 1fr; gap: 11px; }
  .porque { display: grid; grid-template-columns: auto 1fr; align-items: center;
    gap: 14px; text-align: left; padding: 15px 17px; }
  .porque .pi { width: 50px; height: 50px; border-radius: 15px; margin: 0; }
  .porque .pi svg { width: 24px; height: 24px; }
  .porque .pq-txt { min-width: 0; }   /* deja que el texto se ajuste */
  .porque h3 { font-size: 15px; margin-bottom: 3px; }
  .porque p { font-size: 12.8px; line-height: 1.5; }
  /* El aura estaba pensada para una tarjeta centrada; acá se corre al icono. */
  .porque::after { top: 50%; left: 34px; width: 190px; transform: translate(-50%, -50%); }
}

/* ── Panel de filtros oscuro (Tienda) ───────────────────────────────────────
   El panel va oscuro a propósito: contra él las tarjetas de producto —que
   son blancas— resaltan solas, y la categoría elegida se lee de un golpe.
   En claro sobre claro el seleccionado se perdía entre los otros veinte.

   Los colores están medidos contra el fondo real del panel, no supuestos.
   ────────────────────────────────────────────────────────────────────────── */
.filtros-panel { position: sticky; top: 82px; padding: 20px 16px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, #142943 0%, #0e2138 55%, #0b1a2d 100%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 44px -20px rgba(8,24,45,.65); }

.filtros-panel .fp-bloque { margin-bottom: 20px; }
.filtros-panel h5 { font-family: var(--font); font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; margin: 0 0 11px; color: #8fa8c6; font-weight: 700; }

.fp-lista { display: flex; flex-direction: column; gap: 2px; }
.fp-scroll { max-height: 290px; overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.fp-scroll::-webkit-scrollbar { width: 6px; }
.fp-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 99px; }

.filt { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px; border-radius: 10px; cursor: pointer; position: relative;
  font-size: 13px; font-weight: 600; color: #ccdcef;
  border: 1px solid transparent;
  transition: background .14s ease, color .14s ease, transform .14s ease; }
.filt .fn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El conteo era texto suelto y se leía como parte del nombre. Como pastilla
   se entiende de inmediato que es una cantidad, y da con qué comparar el
   tamaño de una categoría contra otra de un vistazo. */
.filt .fc { font-size: 11px; font-weight: 700; color: #a9c2de; flex: 0 0 auto;
  font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.08); transition: background .14s, color .14s; }
.filt:hover { background: rgba(255,255,255,.075); color: #fff; transform: translateX(2px); }
.filt:hover .fc { background: rgba(255,255,255,.14); color: #dcebfa; }
.filt:focus-visible { outline: 2px solid var(--green-2); outline-offset: 1px; }

/* Seleccionado: acento SÓLIDO, no un tinte. Con el 16% de opacidad que tenía
   antes había que buscarlo; ahora salta a la vista entre veinte hermanos.
   Se distingue por cuatro cosas a la vez —fondo, peso, sangría y el punto
   de la izquierda— para que no dependa solo del color. */
/* El verde es más oscuro que el de marca a propósito: con #0b8f63 el texto
   blanco daba 3,27:1 y el mínimo es 4,5:1. Con este da 4,82:1. */
.filt.on { background: linear-gradient(100deg, #09724f, #0e9164);
  color: #fff; font-weight: 700; border-color: transparent; padding-left: 24px;
  box-shadow: 0 6px 16px -6px rgba(9,114,79,.8), inset 0 1px 0 rgba(255,255,255,.22); }
.filt.on::before { content: ''; position: absolute; left: 10px; top: 50%;
  width: 6px; height: 6px; border-radius: 50%; background: var(--s4-surface, #fff);
  transform: translateY(-50%); box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
/* La pastilla va OSCURA, no clara. Aclarar el fondo bajo texto blanco es
   justo lo contrario de lo que hace falta: en claro daba 2,46:1, así da 7,09:1. */
.filt.on .fc { background: rgba(0,0,0,.22); color: #fff; }
.filt.on:hover { background: linear-gradient(100deg, #086647, #0d855c); transform: none; }
.filt.on:hover .fc { background: rgba(0,0,0,.3); }

.fp-limpiar { display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 4px; padding: 10px 14px; border-radius: 11px;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  color: #cfe0f2; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14); transition: background .14s, color .14s; }
.fp-limpiar:hover { background: rgba(255,255,255,.13); color: #fff; }
.fp-limpiar svg { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) { .filt:hover { transform: none; } }
@media (max-width: 820px) { .filtros-panel { position: static; } }

/* ── Tarjeta de producto · refinamiento ─────────────────────────────────────
   Va después del bloque Liquid Glass para poder sumarse a él sin pelear por
   especificidad. Lo que se corrigió, en orden de qué tanto molestaba:

   1. Los distintivos de stock eran texto de color suelto sobre la foto. Con
      un producto claro de fondo —y casi todos lo son— «En stock» en verde
      sobre blanco quedaba ilegible. Ahora son pastillas con fondo propio.
   2. La foto se veía plana. Se le puso un halo radial suave detrás, así el
      producto flota en vez de estar pegado.
   3. La jerarquía tipográfica estaba comprimida: código, marca y nombre
      pesaban casi igual. Ahora el nombre manda y el resto acompaña.
   4. El precio no tenía presencia para ser lo que decide la compra.
   ────────────────────────────────────────────────────────────────────────── */
.prod-card { display: flex; flex-direction: column; }

.prod-media { background: radial-gradient(120% 90% at 50% 12%, #fff 0%, #fbfdff 55%, #f4f8fc 100%); }
/* Poco relleno: la imagen ya viene con su propio margen del 5% metido por
   la normalización del servidor. Con los 18px de antes el aire se sumaba dos
   veces y el producto quedaba más chico de lo necesario. */
.prod-media img { padding: 7px; }
.prod-card:hover .prod-media img { transform: scale(1.07); }

/* Pastillas legibles sobre cualquier foto. El desenfoque las despega del
   producto sin taparlo. */
.stock-badge { padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(15,37,64,.14); }
.stock-badge.ok { color: #04794f; }
.stock-badge.no { color: #9a5410; }
.stock-badge.no .dot { background: #9a5410; }

.prod-badge { border-radius: 999px; padding: 4px 10px; letter-spacing: .02em;
  box-shadow: 0 4px 12px rgba(255,71,87,.4); }

/* Jerarquía: el nombre es lo que se busca; el código, lo que se verifica. */
.prod-body { padding: 15px 16px 17px; gap: 5px; }
/* #63748b y no --muted (#6b7c93): sobre el fondo real de la tarjeta el
   token del proyecto da 4,14:1 y el mínimo para texto es 4,5:1. Este da
   4,64:1 y a simple vista es el mismo gris. */
.prod-code { font-size: 11px; color: #63748b; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.prod-brand { font-size: 10.5px; letter-spacing: .07em; color: #04794f; }
.prod-name { font-size: 14px; font-weight: 650; line-height: 1.38; min-height: 39px;
  transition: color .16s ease; }
.prod-card:hover .prod-name { color: var(--blue); }

/* El precio se separa con una línea fina: deja de competir con el nombre. */
.prod-foot { padding-top: 11px; margin-top: 10px; border-top: 1px solid var(--line-2); }
.prod-price .now { font-size: 20px; letter-spacing: -.02em; }
.prod-price .was { font-size: 11.5px; }
.prod-tax { font-size: 10px; color: #63748b; }

.prod-add { border-radius: 13px; box-shadow: 0 6px 16px -4px rgba(10,99,230,.45); }
.prod-add:hover { transform: translateY(-2px) scale(1.07);
  box-shadow: 0 10px 22px -5px rgba(10,99,230,.55); }

.btn-consultar { border-radius: 13px; }

@media (prefers-reduced-motion: reduce) {
  .prod-card:hover .prod-media img { transform: none; }
  .prod-add:hover { transform: none; }
}

/* ── Filtros activos en el encabezado ───────────────────────────────────────
   Antes el título decía «Tienda» pasara lo que pasara, así que el visitante
   no sabía qué estaba viendo salvo yendo a buscar el resaltado en la barra
   lateral. Ahora el título ES la selección y debajo van los filtros puestos,
   cada uno con su ✕: un filtro que no se puede quitar desde donde se ve
   obliga a volver a buscarlo en la lista.
   ────────────────────────────────────────────────────────────────────────── */
.filtros-activos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.filtros-activos:empty { display: none; }

.fa-chip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 11px 6px 10px; border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: #0a5e42;
  background: rgba(14,145,100,.13); border: 1px solid rgba(14,145,100,.34);
  transition: background .14s, border-color .14s, color .14s; }
.fa-chip svg { width: 13px; height: 13px; flex: 0 0 13px; }
/* La ✕ se apaga hasta que uno se acerca: el chip informa primero y ofrece
   quitarse después. */
.fa-chip svg:last-child { opacity: .5; transition: opacity .14s; }
.fa-chip:hover { background: rgba(14,145,100,.2); border-color: rgba(14,145,100,.6); color: #084c35; }
.fa-chip:hover svg:last-child { opacity: 1; }
.fa-chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.fa-chip.fa-todo { color: var(--muted); background: transparent;
  border-color: var(--line); font-weight: 600; }
.fa-chip.fa-todo:hover { color: #b02a1f; border-color: rgba(176,42,31,.4);
  background: rgba(176,42,31,.07); }

/* ── Alineación del precio entre tarjetas ───────────────────────────────────
   El precio tiene que caer a la misma altura en toda la fila: es el dato que
   se compara de un vistazo, y si baila el ojo tiene que ir a buscarlo tarjeta
   por tarjeta.

   Tres cosas lo garantizan, y hacen falta las tres:

   1. Las tarjetas se estiran a la altura de la más alta de su fila. Es el
      comportamiento por omisión de la grilla, pero se declara para que no se
      pierda si alguien toca align-items más arriba.
   2. El nombre ocupa SIEMPRE dos líneas, tenga una o tenga tres. Con
      min-height un nombre corto encogía la tarjeta.
   3. El bloque inferior mide lo mismo lleve precio o lleve el botón de
      «Consultar precio». Sin esto, las tarjetas sin precio dejaban su botón
      más abajo que el precio de las vecinas.
   ────────────────────────────────────────────────────────────────────────── */
.prod-grid { align-items: stretch; }

.prod-name { height: calc(1.38em * 2); min-height: 0; }

.prod-foot, .btn-consultar { margin-top: auto; min-height: 52px; }
.prod-foot { align-items: flex-end; }
.btn-consultar { align-self: stretch; }

/* ── Grilla compacta (productos relacionados) ───────────────────────────────
   Más columnas y todo un punto más chico. La idea es que los relacionados
   acompañen sin competir con el producto que se está viendo: si fueran del
   mismo tamaño, la página parecería otro listado más.

   Hereda TODO lo demás de .prod-card —incluida la alineación del precio— y
   solo ajusta medidas. Los mínimos del pie se recalculan para el nuevo
   tamaño de letra, o el precio volvería a bailar entre tarjetas.
   ────────────────────────────────────────────────────────────────────────── */
.prod-grid.compacta { grid-template-columns: repeat(6, 1fr); gap: 13px; }

.compacta .prod-media img { padding: 5px; }
.compacta .prod-body { padding: 11px 12px 13px; gap: 3px; }
.compacta .prod-code { font-size: 10px; }
.compacta .prod-brand { font-size: 9.5px; letter-spacing: .06em; }
.compacta .prod-name { font-size: 12.5px; line-height: 1.34; height: calc(1.34em * 2); }
.compacta .prod-foot { padding-top: 9px; margin-top: auto; }
.compacta .prod-foot, .compacta .btn-consultar { min-height: 44px; }
.compacta .prod-price .now { font-size: 16px; }
.compacta .prod-price .was { font-size: 10.5px; }
.compacta .prod-tax { font-size: 9px; }
.compacta .prod-add { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; }
.compacta .prod-add svg { width: 16px; height: 16px; }
.compacta .btn-consultar { font-size: 11.5px; padding: 9px 10px; gap: 5px; }
.compacta .btn-consultar svg { width: 14px; height: 14px; }
.compacta .stock-badge { font-size: 10px; padding: 3px 8px 3px 7px; }
.compacta .prod-badge { font-size: 10px; padding: 3px 8px; }
/* El corazón de favoritos estorba a este tamaño: son tarjetas para ojear. */
.compacta .prod-fav { display: none; }

@media (max-width: 1200px) { .prod-grid.compacta { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px)  { .prod-grid.compacta { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .prod-grid.compacta { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ── Foto del producto y su visor ───────────────────────────────────────────
   La foto es un <button> y no un <div>: se puede abrir con Tab y Enter, y un
   lector de pantalla la anuncia como algo que se puede activar. Con un div
   habría que remendar todo eso a mano.
   ────────────────────────────────────────────────────────────────────────── */
.pd-foto { position: relative; display: block; width: 100%; padding: 0;
  border-radius: 28px; overflow: hidden; cursor: zoom-in;
  background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(228,238,252,.9)); }
.pd-foto img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 30px;
  display: block; transition: transform .35s cubic-bezier(.2,.8,.3,1); }
.pd-foto:hover img { transform: scale(1.04); }
.pd-foto:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* El aviso de «Ampliar» está siempre, no solo al pasar el mouse: en un
   teléfono no hay hover y nadie adivinaría que la foto se puede tocar. */
.pd-lupa { position: absolute; right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--ink-2);
  background: rgba(255,255,255,.86); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.9); box-shadow: var(--shadow-sm);
  transition: background .16s, color .16s; }
.pd-lupa svg { width: 14px; height: 14px; }
.pd-foto:hover .pd-lupa { background: var(--s4-surface, #fff); color: var(--blue); }

.visor { position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(8,20,36,.94); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); }
.visor.abierto { display: grid; grid-template-rows: 1fr auto; }

.visor-lienzo { overflow: auto; display: grid; place-items: center;
  padding: 40px 20px 10px; cursor: zoom-in; }
.visor-lienzo img { max-width: min(1100px, 92vw); max-height: 82vh;
  object-fit: contain; border-radius: 14px; background: var(--s4-surface, #fff);
  transition: max-width .22s ease, max-height .22s ease; }
/* Con zoom la imagen crece más allá del lienzo y este se vuelve
   desplazable: así se recorre la foto en vez de encogerla para que quepa. */
.visor-lienzo.zoom { cursor: zoom-out; place-items: start; }
.visor-lienzo.zoom img { max-width: none; max-height: none;
  width: min(2400px, 250vw); height: auto; }

.visor-x { position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  transition: background .16s; }
.visor-x:hover { background: rgba(255,255,255,.26); }
.visor-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.visor-x svg { width: 20px; height: 20px; }

.visor-pie { padding: 12px 20px 22px; text-align: center;
  font-size: 13px; color: #cfe0f2; }

@media (prefers-reduced-motion: reduce) {
  .pd-foto img, .visor-lienzo img { transition: none; }
  .pd-foto:hover img { transform: none; }
}
@media (max-width: 560px) {
  .pd-foto img { padding: 18px; }
  .visor-lienzo { padding: 30px 10px 6px; }
}

/* ── Árbol de marcas → categorías (página de Marcas) ─────────────────────────
   La flecha despliega y el nombre filtra: son dos zonas distintas porque son
   dos acciones distintas. Si desplegar y filtrar fueran el mismo clic, no
   habría forma de mirar qué tiene una marca sin salirse de lo que uno estaba
   viendo — que es justo para lo que sirve un árbol.
   ────────────────────────────────────────────────────────────────────────── */
.fp-buscar { position: relative; margin-bottom: 10px; }
.fp-buscar svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: #7d97b8; pointer-events: none; }
.fp-buscar input { width: 100%; padding: 8px 11px 8px 31px; border-radius: 9px;
  font-family: inherit; font-size: 12.5px; color: #e6f0fa;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); }
.fp-buscar input::placeholder { color: #7d97b8; }
.fp-buscar input:focus { outline: none; border-color: rgba(18,201,138,.55);
  background: rgba(255,255,255,.1); }

.fp-arbol { max-height: 420px; overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.fp-arbol::-webkit-scrollbar { width: 6px; }
.fp-arbol::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 99px; }

.fp-rama { margin-bottom: 1px; }
.filt-padre { gap: 6px; padding-left: 4px; }
.filt-padre .fn { flex: 1 1 auto; cursor: pointer; }

.fp-caret { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center; cursor: pointer; color: #8fa8c6;
  background: transparent; border: 0; transition: background .14s, color .14s; }
.fp-caret svg { width: 14px; height: 14px; transition: transform .2s cubic-bezier(.4,0,.2,1); }
.fp-caret.abierta svg { transform: rotate(90deg); }
.fp-caret:hover { background: rgba(255,255,255,.13); color: #fff; }
.fp-caret:focus-visible { outline: 2px solid var(--green-2); outline-offset: 1px; }
.filt.on .fp-caret { color: rgba(255,255,255,.85); }
.filt.on .fp-caret:hover { background: rgba(0,0,0,.22); color: #fff; }

/* La línea vertical dice de un vistazo dónde termina una rama y empieza la
   siguiente. Sin ella, con dos marcas abiertas no se sabe qué cuelga de qué. */
.fp-hijos:not(:empty) { margin: 2px 0 6px 15px; padding-left: 11px;
  border-left: 1px solid rgba(255,255,255,.15); }
.filt-hijo { font-size: 12.5px; font-weight: 600; padding: 6px 10px; }
.filt-hijo .fn { color: #b9cee6; }
.filt-hijo:hover .fn { color: #fff; }
.filt-hijo.on .fn { color: #fff; }

.fp-cargando { font-size: 11.5px; color: #7d97b8; padding: 6px 10px; font-style: italic; }

/* ── Rango de precio ─────────────────────────────────────────────────────── */
.fp-precio { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fp-precio label { display: flex; flex-direction: column; gap: 4px; }
.fp-precio span { font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #8fa8c6; }
.fp-precio input { width: 100%; padding: 8px 10px; border-radius: 9px;
  font-family: inherit; font-size: 13px; color: #e6f0fa;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); }
.fp-precio input::placeholder { color: #6b849f; font-size: 12px; }
.fp-precio input:focus { outline: none; border-color: rgba(18,201,138,.55);
  background: rgba(255,255,255,.1); }
.fp-nota { font-size: 11px; color: #8fa8c6; margin: 8px 0 0; }

@media (prefers-reduced-motion: reduce) { .fp-caret svg { transition: none; } }

/* ── Spotlight ──────────────────────────────────────────────────────────────
   Panel flotante y centrado, al estilo del buscador de macOS. Está arriba y
   no en el medio a propósito: al escribir, la vista baja sola hacia los
   resultados, y un panel centrado quedaría tapado por el teclado en un
   teléfono.

   La salida no es una simple desaparición: el panel se encoge y se desenfoca
   mientras el fondo se aclara, y la navegación arranca 130ms después para
   que se vea cerrarse en vez de cortarse a la mitad.
   ────────────────────────────────────────────────────────────────────────── */
/* Tres clases y no dos. `montado` solo lo hace visible; `abierto` dispara la
   animación un fotograma después. Si el display y la animación cambian en el
   mismo fotograma, el navegador NO anima —salta al estado final— y toda la
   entrada se pierde. */
.spot { position: fixed; inset: 0; z-index: 300; display: none; }
.spot.montado, .spot.cerrando { display: block; }

/* El velo no solo aparece: el desenfoque CRECE de 0 a 9px. Eso hace que la
   página de atrás parezca alejarse mientras el buscador se acerca — la mitad
   del efecto de zoom está acá, no en el panel. */
.spot-fondo { position: absolute; inset: 0;
  /* .58 y no .42: con el velo más claro, las teclas blancas del pie daban
     2,85:1 sobre él. Con este dan 4,56:1. */
  background: rgba(10,26,45,.58);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  opacity: 0;
  transition: opacity .3s ease,
              backdrop-filter .38s cubic-bezier(.2,.8,.3,1),
              -webkit-backdrop-filter .38s cubic-bezier(.2,.8,.3,1); }
.spot.abierto .spot-fondo { opacity: 1;
  backdrop-filter: blur(9px) saturate(140%);
  -webkit-backdrop-filter: blur(9px) saturate(140%); }
.spot.cerrando .spot-fondo { opacity: 0;
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  transition: opacity .2s ease, backdrop-filter .2s ease, -webkit-backdrop-filter .2s ease; }

/* El panel entra desde el 0,86 con un rebote corto: la curva pasa de 1 y
   vuelve, que es lo que hace que se sienta físico en vez de una
   interpolación. Sale hacia ADELANTE —crece a 1,06 y se desenfoca— como si
   se acercara y se disolviera; encogerse al salir se lee como «cancelé»,
   crecer se lee como «listo, vamos». */
.spot-caja { position: absolute; left: 50%; top: 13vh;
  width: min(640px, 92vw);
  transform: translateX(-50%) translateY(-26px) scale(.86);
  opacity: 0; filter: blur(12px);
  transform-origin: 50% 30%;
  transition: opacity .26s ease,
              transform .42s cubic-bezier(.34, 1.4, .5, 1),
              filter .3s ease; }
.spot.abierto .spot-caja { opacity: 1; filter: blur(0);
  transform: translateX(-50%) translateY(0) scale(1); }
.spot.cerrando .spot-caja { opacity: 0; filter: blur(14px);
  transform: translateX(-50%) translateY(6px) scale(1.06);
  transition: opacity .19s ease, transform .24s cubic-bezier(.4,0,.7,.2), filter .2s ease; }

/* El vidrio del panel: translúcido, muy desenfocado, con la línea de luz
   arriba y una sombra larga que lo despega del fondo. */
/* ── Marca dentro del buscador ─────────────────────────────────────────── */
.spot-marca { text-align: center; margin-bottom: 20px; }
.spot-logo { height: 46px; max-width: 78%; object-fit: contain; display: block;
  margin: 0 auto 12px;
  /* Un halo suave detrás: sobre el velo desenfocado, un logo blanco a secas
     se diluye con el fondo. */
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.35)); }
/* Blanco pleno y no al 94%: sobre el velo, el 94% daba 4,25:1 y el texto
   pide 4,5:1. Con blanco entero da 4,56:1. La sombra ayuda a despegarlo del
   fondo desenfocado, pero no cuenta como contraste. */
.spot-lema { font-family: var(--font); font-size: 15px; font-weight: 600;
  color: #fff; margin: 0; letter-spacing: -.005em;
  text-shadow: 0 1px 12px rgba(8,20,36,.6); }

/* La marca entra un pelo antes que el panel y desde un poco más arriba: el
   escalonado hace que se lea como una sola pieza que baja, en vez de dos
   cosas apareciendo a la vez. */
.spot-marca { opacity: 0; transform: translateY(-16px) scale(.9);
  transition: opacity .28s ease .05s,
              transform .44s cubic-bezier(.34, 1.4, .5, 1) .05s; }
.spot.abierto .spot-marca { opacity: 1; transform: translateY(0) scale(1); }
.spot.cerrando .spot-marca { opacity: 0; transform: translateY(-6px) scale(1.05);
  transition: opacity .15s ease, transform .2s ease; }

.spot-campo { display: flex; align-items: center; gap: 13px;
  padding: 16px 16px 16px 22px; border-radius: 20px;
  /* .92 y no .82: al oscurecer el velo, el panel se oscureció con él y la
     marca de agua se volvía ilegible. */
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(34px) saturate(200%);
  -webkit-backdrop-filter: blur(34px) saturate(200%);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95),
              0 2px 10px rgba(10,26,45,.14),
              0 32px 70px -20px rgba(10,26,45,.45); }
.spot-campo svg { width: 22px; height: 22px; color: var(--blue); flex: 0 0 22px; }
.spot-campo input { flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--font-body); font-size: 19px; font-weight: 500; color: var(--ink); }
.spot-campo input::placeholder { color: #5d6e85; font-weight: 400; }
.spot-campo input::-webkit-search-cancel-button { display: none; }

.spot-x { cursor: pointer; background: none; border: 0; padding: 0; flex: 0 0 auto; }
.spot-x kbd, .spot-pie kbd { font-family: var(--font-body); font-size: 11px; font-weight: 700;
  color: var(--muted); padding: 4px 8px; border-radius: 6px;
  background: rgba(15,37,64,.07); border: 1px solid rgba(15,37,64,.09); }
.spot-x:hover kbd { background: rgba(15,37,64,.13); color: var(--ink-2); }

.spot-pie { display: flex; justify-content: center; gap: 22px; margin-top: 14px;
  font-size: 12px; color: rgba(255,255,255,.82); }
.spot-pie kbd { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.24);
  color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .spot-fondo, .spot-caja, .spot-marca { transition: opacity .01s; filter: none; }
  .spot.abierto .spot-caja { transform: translateX(-50%); }
  .spot.cerrando .spot-caja { transform: translateX(-50%); filter: none; }
  .spot.abierto .spot-marca, .spot.cerrando .spot-marca { transform: none; }
}

/* En pantalla angosta el botón se reduce a su icono en vez de desaparecer:
   ocultarlo dejaría el buscador solo dentro del cajón, y en un teléfono no
   hay ⌘K con que abrirlo. */
@media (max-width: 1000px) {
  .btn-buscar { width: 44px; height: 44px; padding: 0; justify-content: center;
    border-radius: 50%; }
  .btn-buscar .bb-txt { display: none; }
  .btn-buscar svg { width: 19px; height: 19px; }
}
@media (max-width: 560px) {
  .spot-caja { top: 8vh; }
  .spot-campo { padding: 13px 13px 13px 17px; border-radius: 17px; }
  .spot-campo input { font-size: 17px; }
  .spot-logo { height: 36px; margin-bottom: 9px; }
  .spot-lema { font-size: 13.5px; }
  .spot-marca { margin-bottom: 16px; }
}

/* ── Tres promesas del inicio · acento por tarjeta ──────────────────────────
   Va después del bloque Liquid Glass para sumarse a él sin pelear por
   especificidad, igual que las de «Por qué SATEC».

   Tenían el mismo problema: el icono en un lavado azul-verde al 10%, tan
   pálido que apenas se distinguía del fondo de su propia tarjeta. Ahora
   cada una lleva el color de lo que promete —el envío en azul, la garantía
   en verde, los pagos en violeta— y el icono va en degradado sólido con el
   símbolo en blanco.

   Se reusan tres de los cuatro tonos de «Por qué SATEC» a propósito: el
   sitio gana coherencia en vez de sumar una paleta más, y son tonos ya
   medidos.
   ────────────────────────────────────────────────────────────────────────── */
.feat { --ft: #0a63e6; --ft-2: #4f93ff; --ft-soft: rgba(10,99,230,.34);
  position: relative; overflow: hidden;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s; }
.feat:nth-child(1) { --ft:#0a63e6; --ft-2:#4f93ff; --ft-soft:rgba(10,99,230,.34); }
.feat:nth-child(2) { --ft:#008555; --ft-2:#14a26f; --ft-soft:rgba(0,168,107,.34); }
.feat:nth-child(3) { --ft:#7c3aed; --ft-2:#a970f7; --ft-soft:rgba(124,58,237,.32); }

/* Una barra del color a la izquierda: dice de qué es la tarjeta antes de
   leerla. Crece al pasar por encima. */
.feat::after { content: ''; position: absolute; left: 0; top: 50%; z-index: 1;
  width: 3px; height: 26px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--ft), var(--ft-2));
  transform: translateY(-50%) scaleY(.55); transform-origin: center;
  opacity: .75; transition: transform .24s cubic-bezier(.2,.8,.3,1), opacity .2s; }
.feat:hover::after { transform: translateY(-50%) scaleY(1); opacity: 1; }

.feat .fi { background: linear-gradient(140deg, var(--ft), var(--ft-2));
  color: #fff; position: relative; z-index: 1;
  box-shadow: 0 8px 18px -7px var(--ft-soft), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .24s; }
.feat:hover .fi { transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 14px 26px -8px var(--ft-soft), inset 0 1px 0 rgba(255,255,255,.65); }

.feat .ft { min-width: 0; }
.feat h4 { transition: color .18s ease; }
.feat:hover h4 { color: var(--ft); }
.feat:hover { border-color: var(--ft-soft); }

@media (prefers-reduced-motion: reduce) {
  .feat, .feat .fi, .feat::after { transition: none; }
  .feat:hover .fi { transform: none; }
}

/* ── Marcas destacadas: tarjeta ──────────────────────────────────────────────
   La misma tarjeta sirve en la portada y en el pie de cada página temática.
   El color de la marca entra por --mk desde el HTML, así el CSS no tiene que
   saber cuántas marcas hay ni cómo se llaman.

   Los logos vienen en proporciones muy distintas —Power Sonic 5,5:1, Fellowes
   2,6:1— así que van en una caja de alto fijo con `contain`: se ven todos al
   mismo peso visual y ninguno se deforma. Deformar el logo de otra empresa es
   lo peor que se le puede hacer.
   ────────────────────────────────────────────────────────────────────────── */
/* Cuatro columnas fijas. Con seis marcas quedan cuatro arriba y dos abajo,
   alineadas a la izquierda: es la retícula que pidió Tavo. Con auto-fit las
   seis se repartían en una sola fila apretada. */
.mt-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }

/* ── Tarjetas de marca destacada ────────────────────────────────────────────
   El mismo tratamiento que las tarjetas de «Por qué SATEC»: vidrio, un color
   propio por tarjeta, aura al pasar por encima y la placa que se eleva. La
   diferencia está en de dónde sale el color: allá se reparte una paleta que
   elegimos nosotros, acá cada tarjeta usa el color de SU marca, que ya venía
   declarado en --mk.

   La banda de color pasó de ::before a una sombra interior. Hacían falta los
   dos pseudo-elementos: ::before para el brillo del vidrio y ::after para el
   aura, igual que en .porque. De paso la banda deja de crecer al pasar por
   encima y se queda siempre encendida, como en las baldosas del mega-menú.

   El vidrio va al 74% y no al 60% como .porque: medido sobre el fondo real,
   al 60% el «668 productos» de Garmin —el más claro de los siete colores de
   marca— caía a 4,43:1, por debajo del mínimo. Al 74% vuelve a pasar.
   ────────────────────────────────────────────────────────────────────────── */
.mt-card { --mk: #0a63e6; --mk2: #4f93ff;
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 26px 22px 20px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(22px) saturate(185%);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: inset 0 3px 0 var(--mk),
              0 2px 8px rgba(15,37,64,.05),
              0 16px 42px rgba(10,60,120,.12);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s; }

/* Brillo especular: la firma del vidrio, igual que en .porque. */
.mt-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.08) 24%, transparent 48%),
    radial-gradient(100% 70% at 6% -10%, rgba(255,255,255,.5), transparent 46%); }

/* El aura, del color de la marca. Se centra arriba, detrás del logo, que es
   donde está el peso de la tarjeta. */
.mt-card::after { content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: -48%; left: 50%; width: 165%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle,
              color-mix(in srgb, var(--mk) 34%, transparent), transparent 58%);
  opacity: 0; transition: opacity .3s ease; }
.mt-card:hover::after { opacity: .5; }
.mt-card > * { position: relative; z-index: 1; }

.mt-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.95);
  box-shadow: inset 0 3px 0 var(--mk),
              0 3px 10px rgba(15,37,64,.08),
              0 30px 66px rgba(10,60,120,.2); }
.mt-card:focus-visible { outline: 2px solid var(--mk); outline-offset: 3px; }

/* La placa del logo hace lo que el chip del icono en .porque: se eleva y se
   enciende. Blanca y no del color de la marca — detrás va un logo, y teñirle
   el fondo es la forma más rápida de arruinarlo. */
.mt-logo { height: 58px; display: grid; place-items: center; margin-bottom: 16px;
  border-radius: 15px; padding: 8px 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid color-mix(in srgb, var(--mk) 16%, transparent);
  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--mk) 55%, transparent);
  transition: transform .26s cubic-bezier(.2,.8,.3,1),
              box-shadow .26s ease, border-color .26s ease; }
.mt-card:hover .mt-logo { transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--mk) 34%, transparent);
  box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--mk) 60%, transparent); }
.mt-logo img { max-height: 40px; max-width: 100%; width: auto; height: auto;
  object-fit: contain; transition: transform .24s cubic-bezier(.2,.8,.3,1); }
.mt-card:hover .mt-logo img { transform: scale(1.05); }

/* color-mix es reciente. Donde no exista, la placa y el aura caen a un gris
   neutro: se pierde el color, no la tarjeta. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .mt-card::after { background: radial-gradient(circle, rgba(10,60,120,.3), transparent 58%); }
  .mt-logo { border-color: var(--line);
    box-shadow: 0 6px 16px -10px rgba(15,37,64,.4); }
  .mt-card:hover .mt-logo { border-color: var(--line);
    box-shadow: 0 16px 30px -12px rgba(15,37,64,.45); }
}

.mt-lema { font-size: 13px; color: var(--ink-2); line-height: 1.5; flex: 1 1 auto;
  margin-bottom: 16px; }
.mt-pie { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 13px; border-top: 1px solid var(--line-2); }
/* El conteo va un punto más hondo que el color de marca. Medido sobre el
   fondo compuesto real de la tarjeta —(251,253,255)—, el azul de Garmin, el
   más claro de los siete, se quedaba en 4,46:1: por debajo del mínimo de
   4,5:1 que pide un texto. Con un 14% de tinta oscura sube a 5,21:1 y los
   otros seis suben con él. El filo, el aura y la flecha se quedan con el
   color puro: son gráficos, y ahí el mínimo es 3:1, que ya pasaban. */
.mt-pie b { font-size: 12.5px; font-weight: 700;
  color: color-mix(in srgb, var(--mk) 86%, #0e2138);
  font-variant-numeric: tabular-nums; }
@supports not (color: color-mix(in srgb, red, blue)) {
  .mt-pie b { color: var(--mk); }
}
.mt-pie svg { width: 16px; height: 16px; color: var(--mk);
  transition: transform .2s ease; }
.mt-card:hover .mt-pie svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .mt-card, .mt-card::after, .mt-logo, .mt-logo img, .mt-pie svg { transition: none; }
  .mt-card:hover, .mt-card:hover .mt-logo { transform: none; }
  .mt-card:hover .mt-logo img, .mt-card:hover .mt-pie svg { transform: none; }
}
@media (max-width: 1000px) { .mt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .mt-grid { grid-template-columns: 1fr; gap: 12px; } }

/* ── Página temática de una marca ──────────────────────────────────────────── */
/* La página temática es un <section> y ya recibe los 60px de la regla
   general; su encabezado agregaba 46 más y quedaban 106px de aire bajo la
   barra. El section no lleva padding propio y el encabezado pone el suyo. */
.mtema { padding-top: 0; }
.mtema-hero { padding: 34px 0 42px; margin-bottom: 34px; position: relative;
  overflow: hidden; text-align: center;
  background:
    radial-gradient(120% 100% at 50% -30%, color-mix(in srgb, var(--mk) 16%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); }
/* color-mix no está en todos los navegadores; el degradado de respaldo va
   primero para que el bloque nunca quede sin fondo. */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .mtema-hero { background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); }
}
.mtema-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: linear-gradient(90deg, transparent, var(--mk), var(--mk2), transparent); }

.mtema-logo { height: 72px; max-width: min(340px, 78vw); object-fit: contain;
  display: block; margin: 0 auto 26px; }
.mtema-lema { font-family: var(--font); font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; color: var(--ink);
  text-wrap: balance; }
.mtema-texto { max-width: 620px; margin: 0 auto; font-size: 15px; line-height: 1.6;
  color: var(--ink-2); }
.mtema-cuenta { margin-top: 16px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--mk);
  font-variant-numeric: tabular-nums; }

.mtema-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 24px; }
.mtema-cats { display: flex; gap: 7px; flex-wrap: wrap; flex: 1 1 auto; }
.mt-cat { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 14px; border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  transition: background .14s, color .14s, border-color .14s; }
.mt-cat span { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mt-cat:hover { border-color: var(--mk); color: var(--mk); }
.mt-cat.on { background: var(--mk); border-color: transparent; color: #fff; }
.mt-cat.on span { color: rgba(255,255,255,.82); }
.mt-cat:focus-visible { outline: 2px solid var(--mk); outline-offset: 2px; }

.mtema-otras { padding-top: 20px; }

@media (max-width: 560px) {
  .mtema-hero { padding: 32px 0 30px; margin-bottom: 26px; }
  .mtema-logo { height: 46px; margin-bottom: 18px; }
}

/* ── Página temática: bloques al estilo del sitio de la marca ────────────────
   La estructura sigue la de las páginas de fabricante —portada grande,
   categorías con foto, lo más vendido, y recién después el catálogo— en vez
   de tirar la grilla de una. Se ve QUÉ vende la marca antes de leer nada.
   ────────────────────────────────────────────────────────────────────────── */
.mtema-bloque { margin-bottom: 52px; }
.mtema-h2 { font-family: var(--font); font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800; letter-spacing: -.018em; margin: 0 0 20px; color: var(--ink); }

/* Baldosas de categoría con la foto del producto más vendido. */
.mt-baldosas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mt-baldosa { display: flex; flex-direction: column; cursor: pointer; padding: 0;
  border-radius: var(--radius-lg); overflow: hidden; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); font-family: inherit;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s; }
.mt-baldosa:hover { transform: translateY(-5px); border-color: transparent;
  box-shadow: 0 3px 10px rgba(15,37,64,.08), 0 26px 54px -18px rgba(15,37,64,.3); }
.mt-baldosa:focus-visible { outline: 2px solid var(--mk); outline-offset: 3px; }

.mb-foto { display: block; aspect-ratio: 4/3; overflow: hidden;
  /* Un tinte del color de la marca detrás del producto: es lo que hace que
     la baldosa se lea como «de esta marca» y no como una foto suelta. */
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--mk) 12%, #fff), #fff 70%); }
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .mb-foto { background: var(--s4-surface, #fff); }
}
.mb-foto img { width: 100%; height: 100%; object-fit: contain; padding: 16px;
  transition: transform .3s cubic-bezier(.2,.8,.3,1); }
.mt-baldosa:hover .mb-foto img { transform: scale(1.06); }

.mb-txt { padding: 14px 16px 16px; border-top: 1px solid var(--line-2); }
.mb-txt b { display: block; font-size: 14px; font-weight: 700; color: var(--ink);
  margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-txt em { font-style: normal; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.mt-baldosa:hover .mb-txt b { color: var(--mk); }
.mb-txt b { transition: color .18s ease; }

/* La barra del catálogo: título a la izquierda, orden a la derecha. */
.mtema-barra { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.mtema-barra .mtema-h2 { margin: 0; }
.mtema-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 22px; }

/* El panel lateral de la página de marca es el MISMO de /marcas —mismas
   clases, mismo comportamiento— pero su acento toma el color de la marca en
   vez del verde fijo. Un panel nuevo sería otro que mantener. */
.mtema .filtros-panel .filt.on {
  background: linear-gradient(100deg,
      color-mix(in srgb, var(--mk) 84%, #000), var(--mk));
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--mk) 70%, transparent),
              inset 0 1px 0 rgba(255,255,255,.22); }
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .mtema .filtros-panel .filt.on { background: var(--mk); }
}
.mtema .filtros-panel .filt:focus-visible,
.mtema .filtros-panel .fp-caret:focus-visible { outline-color: var(--mk2); }
.mtema .fp-buscar input:focus,
.mtema .fp-precio input:focus { border-color: var(--mk2); }
.mtema .fa-chip { color: color-mix(in srgb, var(--mk) 78%, #000);
  background: color-mix(in srgb, var(--mk) 12%, transparent);
  border-color: color-mix(in srgb, var(--mk) 34%, transparent); }
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .mtema .fa-chip { color: var(--mk); background: rgba(10,99,230,.1);
    border-color: rgba(10,99,230,.3); }
}
.mtema .filtros-activos { margin: 0 0 18px; }

@media (max-width: 900px) {
  /* El panel deja de ser columna y pasa arriba, sin quedarse pegado. */
  #mt-cat-sec .tienda-layout { grid-template-columns: 1fr !important; }
  .mtema .filtros-panel { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .mt-baldosa, .mb-foto img { transition: none; }
  .mt-baldosa:hover { transform: none; }
  .mt-baldosa:hover .mb-foto img { transform: none; }
}
@media (max-width: 1000px) { .mt-baldosas { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .mt-baldosas { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 560px)  { .mtema-bloque { margin-bottom: 38px; } }

/* ── Selector de ventana en Novedades ────────────────────────────────────── */
.nv-ventanas { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.nv-v { cursor: pointer; padding: 7px 14px; border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  transition: background .14s, color .14s, border-color .14s; }
.nv-v:hover { border-color: var(--blue); color: var(--blue); }
.nv-v.on { background: linear-gradient(100deg, #09724f, #0e9164); color: #fff;
  border-color: transparent; font-weight: 700; }
.nv-v:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Sucursales ─────────────────────────────────────────────────────────────
   El mapa manda: es lo que la gente viene a ver. Debajo las tarjetas, que
   repiten la información en texto —quien busca un teléfono no quiere abrir
   un pin para encontrarlo—.
   ────────────────────────────────────────────────────────────────────────── */
.su-mapa { height: 420px; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  margin-bottom: 28px; background: var(--bg-2); z-index: 0; }
/* z-index bajo: Leaflet pone sus capas en 400 y taparían el buscador
   flotante, que vive en 300. */
.leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: 1 !important; }

/* ── Pin con el icono de SATEC ──────────────────────────────────────────────
   Los pines por omisión de Leaflet son un PNG externo que a veces no carga, y
   además no dicen de quién es la tienda. Este es un disco blanco con el icono
   de la marca y una punta abajo: la punta es lo que lo hace leerse como
   marcador y no como una calcomanía pegada al mapa.
   ────────────────────────────────────────────────────────────────────────── */
.su-pin { background: none; border: 0; }
.su-pin .sp-cuerpo { display: block;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--s4-surface, #fff) url('/api/recurso/iconosatec.png') center / 74% auto no-repeat;
  border: 2.5px solid #0e9164;
  box-shadow: 0 4px 14px rgba(9,114,79,.45), 0 1px 3px rgba(15,37,64,.3); }
/* La punta se dibuja con bordes: un triángulo sin imagen ni SVG aparte. */
.su-pin .sp-punta { display: block; width: 0; height: 0; margin: -3px auto 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 12px solid #0e9164;
  filter: drop-shadow(0 2px 2px rgba(9,114,79,.35)); }

/* La casa matriz: más grande y con anillo de acento, para distinguirla entre
   varios pines cercanos. */
.su-pin.es-matriz .sp-cuerpo { width: 46px; height: 46px; border-width: 3px;
  background-size: 76% auto;
  box-shadow: 0 0 0 4px rgba(14,145,100,.25),
              0 6px 18px rgba(9,114,79,.55), 0 1px 3px rgba(15,37,64,.3); }
.su-pin.es-matriz .sp-punta { border-left-width: 8px; border-right-width: 8px;
  border-top-width: 13px; }

/* Las tiendas Garmin: su icono y su azul. En un mapa con las dos familias, el
   pin tiene que decir a cuál se está llegando sin abrir el globo. */
.su-pin.es-garmin .sp-cuerpo {
  background-image: url('/api/recurso/iconogarmin.png');
  background-size: 100% 100%;   /* el icono ya viene cuadrado y con su fondo */
  border-color: #0b7ac6;
  box-shadow: 0 4px 14px rgba(11,122,198,.45), 0 1px 3px rgba(15,37,64,.3); }
.su-pin.es-garmin .sp-punta { border-top-color: #0b7ac6;
  filter: drop-shadow(0 2px 2px rgba(11,122,198,.35)); }
.su-pin.es-garmin.es-matriz .sp-cuerpo {
  box-shadow: 0 0 0 4px rgba(11,122,198,.25),
              0 6px 18px rgba(11,122,198,.55), 0 1px 3px rgba(15,37,64,.3); }

.leaflet-popup-content .pop-matriz { display: inline-block; font-style: normal;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: linear-gradient(100deg, #09724f, #0e9164);
  padding: 3px 8px; border-radius: 999px; margin-bottom: 6px; }

.su-grid { display: flex; flex-direction: column; gap: 38px; }
.su-grupo-t { font-family: var(--font); font-size: 18px; font-weight: 800;
  letter-spacing: -.015em; margin: 0 0 16px; padding-bottom: 11px;
  border-bottom: 2px solid var(--line); color: var(--ink); }
.su-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.su-card { position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 9px;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s; }
.su-card.es-ubicable { cursor: pointer; }
.su-card.es-ubicable:hover { transform: translateY(-4px); border-color: rgba(9,114,79,.4);
  box-shadow: 0 3px 10px rgba(15,37,64,.08), 0 22px 46px -18px rgba(15,37,64,.28); }

.su-card-hd { display: flex; align-items: center; gap: 11px; }
.su-sig { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; font-family: var(--font);
  font-size: 13px; font-weight: 800; color: #fff; letter-spacing: .02em;
  background: linear-gradient(140deg, #09724f, #0e9164);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.su-card h3 { font-size: 15.5px; font-weight: 700; margin: 0; letter-spacing: -.01em; }

.su-dir, .su-hora { display: flex; align-items: flex-start; gap: 7px; margin: 0;
  font-size: 12.8px; color: #63748b; line-height: 1.5; }
.su-dir svg, .su-hora svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px;
  color: #8496ad; }

.su-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.su-links a { display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line);
  transition: background .14s, color .14s, border-color .14s; }
.su-links a:hover { background: var(--s4-surface, #fff); color: var(--blue); border-color: rgba(10,99,230,.3); }
.su-links svg { width: 13px; height: 13px; }

.su-comollegar { display: inline-flex; align-items: center; gap: 6px; margin-top: auto;
  padding-top: 11px; font-size: 12.5px; font-weight: 700; color: #09724f; }
.su-comollegar svg { width: 14px; height: 14px; transition: transform .18s ease; }
.su-comollegar:hover svg { transform: translate(2px, -2px); }
/* Decirlo es mejor que dejar el hueco: el cliente entiende que la sucursal
   existe aunque no la podamos ubicar. */
.su-sinmapa { margin-top: auto; padding-top: 11px; font-size: 12px;
  color: #8496ad; font-style: italic; }

/* ── Compras empresariales ───────────────────────────────────────────────── */
.su-emp-sec { padding-top: 10px; }
.su-emp { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px;
  align-items: center; padding: 34px 36px; border-radius: var(--radius-lg);
  background: linear-gradient(125deg, #0b1c30, #12324f 58%, #0d2a45);
  box-shadow: 0 24px 54px -22px rgba(8,24,45,.6); }
.su-emp .eyebrow { color: #4fd1a5; }
.su-emp h2 { font-family: var(--font); font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 6px 0 12px; }
.su-emp p { font-size: 14.5px; line-height: 1.6; color: #c3d4e6; margin: 0;
  max-width: 46ch; }

.su-emp-cta { display: flex; flex-direction: column; gap: 11px; }
.su-emp-btn { display: flex; align-items: center; gap: 13px;
  padding: 15px 18px; border-radius: 14px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  transition: background .16s, border-color .16s, transform .16s; }
.su-emp-btn:hover { background: rgba(255,255,255,.15);
  border-color: rgba(79,209,165,.55); transform: translateX(3px); }
.su-emp-btn svg { width: 20px; height: 20px; flex: 0 0 20px; color: #4fd1a5; }
.su-emp-btn em { display: block; font-style: normal; font-size: 11px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  /* #a5bed5 y no #93aec9: sobre el fondo del botón —blanco al 9% sobre el
     azul del bloque— el anterior daba 4,40:1 y el texto pide 4,5:1. */
  color: #a5bed5; margin-bottom: 2px; }
.su-emp-btn b { display: block; font-size: 15px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .su-card, .su-emp-btn, .su-comollegar svg { transition: none; }
  .su-card.es-ubicable:hover, .su-emp-btn:hover { transform: none; }
}
@media (max-width: 1000px) { .su-grid { grid-template-columns: repeat(2, 1fr); }
  .su-emp { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; } }
@media (max-width: 640px)  { .su-grid { grid-template-columns: 1fr; }
  .su-mapa { height: 320px; } }

/* ── Casa matriz ────────────────────────────────────────────────────────────
   Guadalupe no es una sucursal más y la página lo dice: ocupa el ancho de
   dos, lleva su etiqueta y un borde de acento. Quien busca «la» tienda de
   SATEC tiene que dar con ella sin leer las ocho.
   ────────────────────────────────────────────────────────────────────────── */
.su-card.es-matriz { grid-column: span 2;
  background: linear-gradient(140deg, #fff, #f2f9f6 70%, #eef7f3);
  border-color: rgba(9,114,79,.34);
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px -6px rgba(9,114,79,.28),
              0 20px 44px -22px rgba(9,114,79,.4); }
.su-card.es-matriz::before { content: ''; position: absolute; left: 0; top: 18px;
  bottom: 18px; width: 4px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #09724f, #0e9164); }
.su-card.es-matriz:hover { border-color: rgba(9,114,79,.6); }
.su-card.es-matriz h3 { font-size: 18px; }
.su-card.es-matriz .su-sig { width: 46px; height: 46px; flex: 0 0 46px; font-size: 14px; }

.su-matriz-tag { position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  font-family: var(--font); font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: linear-gradient(100deg, #09724f, #0e9164);
  box-shadow: 0 4px 12px -4px rgba(9,114,79,.7); }
.su-matriz-tag svg { width: 12px; height: 12px; }

/* ── Horarios y cómo llegar ─────────────────────────────────────────────── */
.su-horas { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px; }
/* #5f7087 y no #63748b: en la tarjeta de casa matriz el fondo va teñido de
   verde y el gris anterior caía a 4,47:1, tres centésimas bajo el mínimo. */
.su-horas li { display: flex; align-items: center; gap: 7px;
  font-size: 12.8px; color: #5f7087; }
.su-horas svg { width: 14px; height: 14px; flex: 0 0 14px; color: #09724f; }

.su-ir { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-2); }
.su-ir a { display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: #09724f; border: 1px solid rgba(9,114,79,.3); background: rgba(9,114,79,.06);
  transition: background .14s, color .14s, border-color .14s; }
.su-ir a:hover { background: #09724f; color: #fff; border-color: transparent; }
.su-ir svg { width: 13px; height: 13px; }
.su-ir .su-sinmapa { padding-top: 0; margin-top: 0; }

@media (max-width: 1000px) { .su-cards { grid-template-columns: repeat(2, 1fr); }
  .su-card.es-matriz { grid-column: span 2; } }
@media (max-width: 640px)  { .su-cards { grid-template-columns: 1fr; }
  .su-card.es-matriz { grid-column: span 1; } }

/* ── Popup de teléfono ──────────────────────────────────────────────────────
   Reemplaza el diálogo del sistema —«¿Abrir Skype.app?»— que aparece al
   pulsar un `tel:` desde una computadora. Ese diálogo no lo controlamos, se
   ve ajeno al sitio y casi nadie quiere abrir Skype. En un teléfono el
   enlace pasa de largo y llama, que ahí sí es lo correcto.
   ────────────────────────────────────────────────────────────────────────── */
.tel-ov { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  padding: 20px; background: rgba(10,26,45,.5);
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  opacity: 0; transition: opacity .22s ease,
    backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease; }
.tel-ov.abierto { opacity: 1;
  backdrop-filter: blur(7px) saturate(140%);
  -webkit-backdrop-filter: blur(7px) saturate(140%); }

.tel-caja { position: relative; width: min(360px, 92vw); text-align: center;
  padding: 30px 26px 24px; border-radius: 22px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 #fff, 0 26px 60px -20px rgba(10,26,45,.5);
  transform: scale(.9) translateY(-10px); opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.4,.5,1), opacity .22s ease; }
.tel-ov.abierto .tel-caja { transform: scale(1) translateY(0); opacity: 1; }

.tel-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(15,37,64,.07); border: 0; color: #5f7087;
  transition: background .14s, color .14s; }
.tel-x:hover { background: rgba(15,37,64,.14); color: var(--ink); }
.tel-x svg { width: 15px; height: 15px; }

.tel-ic { display: grid; place-items: center; width: 54px; height: 54px;
  margin: 0 auto 14px; border-radius: 17px; color: #fff;
  background: linear-gradient(140deg, #09724f, #0e9164);
  box-shadow: 0 10px 22px -8px rgba(9,114,79,.75), inset 0 1px 0 rgba(255,255,255,.4); }
.tel-ic svg { width: 24px; height: 24px; }

.tel-rot { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #5f7087; }
.tel-num { margin: 0 0 20px; font-family: var(--font); font-size: 30px;
  font-weight: 800; letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: tabular-nums; user-select: all; }

.tel-btns { display: flex; gap: 9px; }
.tel-b { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 11px 14px; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  transition: background .14s, color .14s, border-color .14s; }
.tel-b svg { width: 15px; height: 15px; }
.tel-copiar { color: #09724f; background: rgba(9,114,79,.09);
  border: 1px solid rgba(9,114,79,.3); }
.tel-copiar:hover { background: rgba(9,114,79,.16); }
.tel-copiar.listo { background: #09724f; color: #fff; border-color: transparent; }
.tel-llamar { color: #fff; border: 1px solid transparent;
  background: linear-gradient(100deg, #09724f, #0e9164);
  box-shadow: 0 6px 16px -6px rgba(9,114,79,.8); }
.tel-llamar:hover { filter: brightness(1.07); }

@media (prefers-reduced-motion: reduce) {
  .tel-ov, .tel-caja { transition: opacity .01s; }
  .tel-ov.abierto .tel-caja { transform: none; }
}

/* ── Carrito ────────────────────────────────────────────────────────────────
   ── Vacío ──
   Un carrito vacío no es un error: es el estado normal de quien recién llega.
   Por eso la pantalla invita en vez de disculparse, y ofrece DOS caminos —el
   catálogo y las novedades— en lugar de un solo botón.

   El emoji 🛍️ se cambió por un icono dibujado: un emoji se ve distinto en
   cada sistema, no se puede colorear con la marca y desentona con el resto
   del sitio, que no usa ninguno.
   ────────────────────────────────────────────────────────────────────────── */
.cv { text-align: center; padding: 68px 26px 62px; border-radius: 26px;
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); }
/* Un resplandor tenue detrás del icono, para que el bloque no sea una caja
   blanca con cosas encima. */
.cv::before { content: ''; position: absolute; top: -40%; left: 50%;
  width: 620px; height: 620px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(circle, rgba(14,145,100,.10), rgba(10,99,230,.06) 42%, transparent 66%); }
.cv > * { position: relative; }

.cv-ic { display: grid; place-items: center; width: 92px; height: 92px;
  margin: 0 auto 22px; border-radius: 28px; color: #fff;
  background: linear-gradient(140deg, #09724f, #0e9164 55%, #0a63e6);
  box-shadow: 0 18px 40px -14px rgba(9,114,79,.65),
              inset 0 1px 0 rgba(255,255,255,.4); }
.cv-ic svg { width: 42px; height: 42px; }

.cv h3 { font-family: var(--font); font-size: 23px; font-weight: 800;
  letter-spacing: -.02em; margin: 0 0 9px; color: var(--ink); }
.cv p { max-width: 40ch; margin: 0 auto 26px; font-size: 14.5px; line-height: 1.6;
  color: #5f7087; }
.cv-btns { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }

/* ── Con productos ── */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px;
  align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: 11px; }

.ci { display: grid; align-items: center; gap: 16px;
  grid-template-columns: 84px 1fr auto auto auto;
  padding: 14px 16px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: border-color .16s, box-shadow .16s; }
.ci:hover { border-color: rgba(10,99,230,.22); box-shadow: var(--shadow); }

.ci-foto { display: block; width: 84px; height: 84px; border-radius: 14px;
  overflow: hidden; background: var(--s4-surface, #fff); border: 1px solid var(--line-2); }
.ci-foto img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.ci-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ci-marca { font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: #04794f; }
.ci-nom { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.36;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.ci-nom:hover { color: var(--blue); }
.ci-uni { font-size: 11.5px; color: #5f7087; font-variant-numeric: tabular-nums; }

/* El selector de cantidad, como una sola pieza y no tres controles sueltos. */
.ci-qty { display: inline-flex; align-items: center; border-radius: 11px;
  background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.ci-qty button { width: 32px; height: 34px; display: grid; place-items: center;
  cursor: pointer; background: none; border: 0; color: var(--ink-2);
  transition: background .13s, color .13s; }
.ci-qty button:hover { background: rgba(10,99,230,.1); color: var(--blue); }
/* El «−» del último no se oculta: se atenúa y sigue funcionando, quitando el
   producto. Un botón que desaparece deja al usuario buscando qué pasó. */
.ci-qty button.apagado { color: #8496ad; }
.ci-qty button.apagado:hover { background: rgba(176,42,31,.1); color: #b02a1f; }
.ci-qty button svg { width: 15px; height: 15px; }
.ci-qty span { min-width: 30px; text-align: center; font-family: var(--font);
  font-size: 14px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; }

.ci-precio { font-family: var(--font); font-size: 17px; font-weight: 800;
  color: var(--ink); min-width: 108px; text-align: right;
  font-variant-numeric: tabular-nums; letter-spacing: -.015em; }

.ci-rm { width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; background: none; border: 0; color: #8496ad;
  transition: background .14s, color .14s; }
.ci-rm:hover { background: rgba(176,42,31,.1); color: #b02a1f; }
.ci-rm svg { width: 16px; height: 16px; }

/* ── Resumen ── */
.cart-res { position: sticky; top: 96px; padding: 24px;
  border-radius: 22px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.cart-res h3 { font-family: var(--font); font-size: 18px; font-weight: 800;
  letter-spacing: -.015em; margin: 0 0 18px; color: var(--ink); }

.cr-fila { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 11px; font-size: 13.5px; }
.cr-fila span { color: #5f7087; }
.cr-fila b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cr-fila em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #04794f; }

.cr-total { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin: 16px 0 18px; padding-top: 15px;
  border-top: 1px solid var(--line); }
.cr-total span { font-family: var(--font); font-size: 15px; font-weight: 700;
  color: var(--ink); }
.cr-total b { font-family: var(--font); font-size: 25px; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
/* El renglón del IVA se marca: es el que la gente busca para verificar, y
   entre dos filas iguales se pierde. */
.cr-imp { padding: 8px 10px; margin: 0 -10px 11px; border-radius: 9px;
  background: rgba(10,99,230,.055); }
.cr-imp span { font-weight: 600; color: #46586f; }
.cr-total { margin-top: 4px; }

.cr-btn { display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; border-radius: 13px; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 700; color: #fff;
  border: 1px solid transparent;
  background: linear-gradient(100deg, #09724f, #0e9164);
  box-shadow: 0 8px 20px -7px rgba(9,114,79,.8), inset 0 1px 0 rgba(255,255,255,.24);
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s, filter .16s; }
.cr-btn:hover { transform: translateY(-1px); filter: brightness(1.07);
  box-shadow: 0 12px 26px -8px rgba(9,114,79,.85), inset 0 1px 0 rgba(255,255,255,.32); }
.cr-btn svg { width: 16px; height: 16px; }

.cr-seguir { display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 11px; padding: 11px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--bg-2);
  transition: background .14s, color .14s; }
.cr-seguir:hover { background: var(--s4-surface, #fff); color: var(--blue); }
.cr-seguir svg { width: 15px; height: 15px; }

.cr-nota { display: flex; gap: 7px; margin: 16px 0 0; padding-top: 15px;
  border-top: 1px solid var(--line-2);
  font-size: 11.5px; line-height: 1.5; color: #63748b; }
.cr-nota svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; }

@media (prefers-reduced-motion: reduce) { .cr-btn:hover { transform: none; } }

@media (max-width: 820px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-res { position: static; }
  /* En angosto la fila se reordena: foto y texto arriba, y abajo cantidad,
     precio y el basurero. En una sola línea no caben cinco columnas. */
  .ci { grid-template-columns: 68px 1fr auto; gap: 12px; }
  .ci-foto { width: 68px; height: 68px; }
  .ci-qty { grid-column: 2; }
  .ci-precio { grid-column: 3; min-width: 0; }
  .ci-rm { grid-row: 1; grid-column: 3; }
}
@media (max-width: 560px) { .cv { padding: 48px 20px 44px; }
  .cv-ic { width: 78px; height: 78px; border-radius: 24px; }
  .cv-ic svg { width: 36px; height: 36px; } }

/* ── Encabezado de marca con vídeo de fondo ─────────────────────────────────
   El vídeo cubre la franja completa y el contenido va en un panel de vidrio
   encima. Ponerlo directo sobre la imagen no funciona: el logo de Garmin es
   azul y el texto oscuro, y sobre un vídeo que cambia de cuadro no hay color
   que aguante.
   ────────────────────────────────────────────────────────────────────────── */
.mtema-hero.con-video { position: relative; overflow: hidden;
  /* Alto de verdad: el vídeo es el protagonista de esta franja, no un
     adorno detrás del texto. 76vh acotado, para que en una pantalla muy
     alta no se coma la página entera ni en una baja quede aplastado. */
  min-height: clamp(560px, 76vh, 760px); display: grid; align-items: center;
  padding: 64px 0 70px; margin-bottom: 34px;
  /* El degradado de la marca queda de respaldo: es lo que se ve mientras
     carga el vídeo, y lo único que se ve si el visitante pidió menos
     movimiento o YouTube no responde. */
  background: linear-gradient(150deg, #0b3556, #0b7ac6 55%, #07314f); }

.mtema-video { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .8s ease; }
.mtema-video.listo { opacity: 1; }
/* El iframe se agranda hasta CUBRIR la franja conservando su 16:9. Con
   width/height al 100% el vídeo saldría deformado; así se recorta lo que
   sobra, que es lo que hace un fondo. */
.mtema-video iframe { position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;              /* 16:9 a partir del ancho */
  min-height: 100%; min-width: 177.78vh;      /* …o a partir del alto */
  transform: translate(-50%, -50%); border: 0; }

/* Un velo oscuro: sin él, un cuadro claro del vídeo deja el panel de vidrio
   sin nada contra qué recortarse. */
.mtema-velo { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,20,36,.5), rgba(6,20,36,.32) 45%, rgba(6,20,36,.55)); }

.mtema-hero.con-video .mtema-hero-in { position: relative; z-index: 2; }
/* El conteo, un punto más oscuro que el azul de la marca: sobre el panel en
   su peor caso el original daba 3,92:1 y el texto pide 4,5:1. */
.mtema-hero.con-video .mtema-cuenta { color: #0a6eb2; }
.mtema-hero.con-video::after { display: none; }

/* Vidrio OSCURO y texto blanco. Es lo que permite que sea de verdad
   transparente: con vidrio claro y texto oscuro había que dejarlo al 70% de
   blanco para que el cuerpo del texto sobreviviera a un cuadro oscuro. En
   oscuro con texto blanco basta el 30%, así que se ve pasar casi el 40% del
   vídeo y el blanco todavía da 5,16:1 sobre el cuadro más CLARO posible
   —que es el peor caso cuando el texto es blanco—. */
.mtema-panel { position: relative; max-width: 760px; margin: 0 auto;
  padding: 40px 44px 36px; border-radius: 30px; overflow: hidden;
  background: rgba(6,20,36,.30);
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35),
              inset 0 -1px 0 rgba(255,255,255,.08),
              0 34px 80px -26px rgba(4,16,30,.8); }
/* El brillo especular: la firma que separa el vidrio de un rectángulo
   semitransparente. */
.mtema-panel::before { content: ''; position: absolute; inset: 0;
  pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 28%, transparent 55%),
    radial-gradient(110% 70% at 8% -12%, rgba(255,255,255,.2), transparent 46%); }
.mtema-panel > * { position: relative; }

/* Los textos, en blanco. La sombra ayuda a despegarlos del vídeo pero NO
   cuenta como contraste: los números de arriba son sin ella. */
.mtema-hero.con-video .mtema-lema { color: #fff;
  text-shadow: 0 2px 18px rgba(4,16,30,.6); }
.mtema-hero.con-video .mtema-texto { color: rgba(255,255,255,.94);
  text-shadow: 0 1px 12px rgba(4,16,30,.5); }

/* La placa del logo, clara u oscura según el logo. No es un capricho: el
   azul de Garmin es un tono MEDIO y necesita fondo claro (4,05:1), mientras
   que el cian de Tacx es CLARO y sobre fondo claro da 2,00:1 — desaparece.
   Sobre placa oscura da 4,55:1. Lo decide la ficha de cada marca. */
.mtema-placa { display: inline-grid; place-items: center;
  padding: 14px 26px; margin: 0 auto 22px; border-radius: 18px; }
.mtema-placa.placa-clara { background: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 #fff, 0 6px 20px rgba(4,16,30,.35); }
.mtema-placa.placa-oscura { background: rgba(4,12,22,.45);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 20px rgba(4,16,30,.4); }
.mtema-panel .mtema-logo { margin: 0; }
.mtema-panel .mtema-texto { margin-bottom: 0; }

/* El conteo, en neón sobre su propia pastilla oscura. Suelto sobre el panel
   el menta daba 3,97:1 —un neón sobre gris medio nunca llega—; en la
   pastilla da 7,82:1 en el peor caso. Y de paso es lo que lo hace notarse. */
.mtema-hero.con-video .mtema-cuenta { display: inline-flex; align-items: center;
  gap: 8px; margin-top: 22px; padding: 9px 18px; border-radius: 999px;
  color: #3dffb0; background: rgba(4,12,22,.58);
  border: 1px solid rgba(61,255,176,.42);
  text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px;
  box-shadow: 0 0 22px -4px rgba(61,255,176,.45),
              inset 0 0 14px -6px rgba(61,255,176,.5); }
/* El punto que late. Se detiene con prefers-reduced-motion. */
.mtema-hero.con-video .mtema-cuenta::before { content: ''; width: 7px; height: 7px;
  border-radius: 50%; background: #3dffb0; flex: 0 0 7px;
  box-shadow: 0 0 8px #3dffb0; animation: latir 2.4s ease-in-out infinite; }
@keyframes latir { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .mtema-hero.con-video .mtema-cuenta::before { animation: none; }
}

@media (prefers-reduced-motion: reduce) { .mtema-video { display: none; } }
@media (max-width: 640px) {
  .mtema-hero.con-video { padding: 34px 0 38px; }
  .mtema-panel { padding: 24px 20px 22px; border-radius: 20px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   El reloj de la reserva
   ══════════════════════════════════════════════════════════════════════════
   Cinco minutos con las unidades apartadas. La barra va pegada arriba porque
   el cliente tiene que poder verla mientras llena sus datos, que es
   exactamente cuando se le va el tiempo.

   El rojo es #b71c1c y no uno más vivo: sobre el vidrio claro de la barra da
   6,16:1 y con texto blanco 6,57:1. Los rojos de alerta habituales —#e53935,
   #d32f2f— se quedaban en 3,96:1 y 4,67:1, y un aviso que cuesta leer no es
   un aviso.
   ────────────────────────────────────────────────────────────────────────── */
.reloj { position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-radius: 0 0 var(--radius) var(--radius);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--line); border-top: 0;
  box-shadow: 0 8px 24px -14px rgba(15,37,64,.4);
  transition: background .3s ease, border-color .3s ease; }
.reloj .rl-ic { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
  display: grid; place-items: center; color: #fff; background: var(--accent); }
.reloj .rl-ic svg { width: 17px; height: 17px; }
.reloj .rl-txt { font-size: 13.5px; color: var(--ink-2); min-width: 0; }
.reloj .rl-txt b { color: var(--ink); }
.reloj .rl-num { margin-left: auto; font-family: var(--font);
  font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
  /* tabular-nums no basta: el ancho del bloque cambia entre «5:00» y «0:59»
     y la barra da un salto cada minuto. Se fija el ancho. */
  min-width: 3.1ch; text-align: right; }

/* Último minuto. El parpadeo alterna la opacidad del número, no su color:
   apagar el color lo dejaría ilegible medio segundo de cada uno. */
.reloj.urgente { background: rgba(183,28,28,.10); border-color: rgba(183,28,28,.42); }
.reloj.urgente .rl-ic { background: #b71c1c; }
.reloj.urgente .rl-txt, .reloj.urgente .rl-txt b { color: #8e1515; }
.reloj.urgente .rl-num { color: #b71c1c; animation: relojParpadeo 1s steps(1) infinite; }
@keyframes relojParpadeo { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .28; } }

/* Sin animación: el rojo se queda fijo y el aviso se refuerza con el borde.
   Quitar el parpadeo no puede quitar la urgencia. */
@media (prefers-reduced-motion: reduce) {
  .reloj.urgente .rl-num { animation: none; }
  .reloj.urgente { border-color: #b71c1c; border-width: 2px; }
}

.reloj.vencido { background: rgba(183,28,28,.14); border-color: #b71c1c; }
.reloj.vencido .rl-num { animation: none; opacity: .5; }

@media (max-width: 560px) {
  .reloj { padding: 10px 14px; gap: 10px; }
  .reloj .rl-txt { font-size: 12.5px; flex: 1 1 100%; order: 3; }
  .reloj .rl-num { font-size: 23px; }
}


/* ── Página de pago ───────────────────────────────────────────────────────── */
.pg-opciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pg-op { --pk: var(--blue); text-align: left; display: flex; flex-direction: column;
  gap: 9px; padding: 24px 22px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(22px) saturate(185%);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(15,37,64,.05), 0 16px 42px rgba(10,60,120,.12);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, border-color .18s; }
/* La factura va destacada porque es la que tiene consecuencias: es la que
   pide datos y la que el cliente puede deducir. El tiquete es el camino
   corto, no el recomendado. */
.pg-op.destacada { --pk: var(--green); box-shadow: inset 0 3px 0 var(--pk),
  0 2px 8px rgba(15,37,64,.05), 0 16px 42px rgba(10,60,120,.12); }
.pg-op:hover { transform: translateY(-3px); border-color: var(--pk);
  box-shadow: 0 3px 10px rgba(15,37,64,.08), 0 26px 54px -18px rgba(15,37,64,.3); }
.pg-op:focus-visible { outline: 2px solid var(--pk); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pg-op:hover { transform: none; } }
.pg-op .po-ic { width: 46px; height: 46px; border-radius: 14px; display: grid;
  place-items: center; color: #fff; background: var(--pk); }
.pg-op .po-ic svg { width: 22px; height: 22px; }
.pg-op b { font-family: var(--font); font-size: 17px; color: var(--ink); }
.pg-op em { font-style: normal; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

.pg-aviso { display: flex; gap: 16px; align-items: flex-start;
  padding: 24px 22px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.74); border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(15,37,64,.05), 0 16px 42px rgba(10,60,120,.12); }
.pg-aviso .pa-ic { width: 44px; height: 44px; border-radius: 13px; flex: 0 0 44px;
  display: grid; place-items: center; color: #fff; background: #b71c1c; }
.pg-aviso.ok .pa-ic { background: var(--accent); }
.pg-aviso .pa-ic svg { width: 21px; height: 21px; }
.pg-aviso h3 { font-size: 17px; margin-bottom: 5px; }
.pg-aviso p { font-size: 13.5px; color: var(--ink-2); margin-bottom: 12px; }
.pa-lista { list-style: none; margin: 0 0 14px; padding: 0; }
.pa-lista li { font-size: 13.5px; color: var(--ink-2); padding: 7px 0;
  border-bottom: 1px solid var(--line-2); }
.pa-lista li:last-child { border-bottom: 0; }

@media (max-width: 700px) { .pg-opciones { grid-template-columns: 1fr; } }


/* ── Formulario del comprador ─────────────────────────────────────────────── */
.pg-caja { padding: 26px 24px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.78); border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(15,37,64,.05), 0 16px 42px rgba(10,60,120,.12); }
.pg-caja h3 { font-size: 19px; margin-bottom: 5px; }
.pg-nota { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }

.pg-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.pg-form .pg-tipo { flex: 0 0 190px; }
.pg-form .pg-campo { flex: 1 1 200px; }
.pg-form .btn { flex: 0 0 auto; }

.pg-rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pg-rejilla .pg-ancho { grid-column: 1 / -1; }

.pg-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pg-campo > span { font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 5px; }
.pg-campo > span svg { width: 13px; height: 13px; color: var(--muted); }
.pg-campo input, .pg-campo select {
  width: 100%; padding: 12px 14px; border-radius: 12px; font-size: 15px;
  color: var(--ink); background: var(--s4-surface, #fff); border: 1px solid var(--line);
  transition: border-color .16s ease, box-shadow .16s ease; }
.pg-campo input:focus, .pg-campo select:focus { outline: 0; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(10,99,230,.16); }
.pg-campo em { font-style: normal; font-size: 11.5px; color: var(--muted); }

/* El campo bloqueado se ve distinto Y dice por qué. Deshabilitar sin
   explicar deja al cliente peleando con un campo que no responde. */
.pg-fija input { background: var(--bg-2); color: var(--ink-2); cursor: not-allowed;
  font-weight: 700; letter-spacing: .02em; }

/* Lo que falta se marca en el campo Y se lista abajo. Solo el borde rojo no
   dice qué hay que hacer; solo la lista obliga a buscar cuál era. */
.pg-campo input.pg-mal, .pg-campo select.pg-mal {
  border-color: #b71c1c; box-shadow: 0 0 0 3px rgba(183,28,28,.12); }
.pg-falta { list-style: none; margin: 16px 0 0; padding: 14px 16px;
  border-radius: 12px; background: rgba(183,28,28,.07);
  border: 1px solid rgba(183,28,28,.26); }
.pg-falta li { display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; color: #8e1515; padding: 3px 0; }
.pg-falta svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }

.pg-hac { display: flex; gap: 8px; align-items: flex-start; font-size: 13px;
  padding: 11px 14px; border-radius: 12px; margin-bottom: 16px; }
.pg-hac svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }
.pg-hac.ok   { background: rgba(0,133,85,.09); border: 1px solid rgba(0,133,85,.28); color: #05603a; }
.pg-hac.warn { background: rgba(164,97,3,.10); border: 1px solid rgba(164,97,3,.30); color: #7a4802; }

.pg-error { display: flex; gap: 7px; align-items: center; margin-top: 14px;
  font-size: 13px; color: #8e1515; }
.pg-error svg { width: 15px; height: 15px; }

.pg-acciones { display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.pg-volver { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--muted); }
.pg-volver:hover { color: var(--blue); }
.pg-volver svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .pg-rejilla { grid-template-columns: 1fr; }
  .pg-form .pg-tipo, .pg-form .pg-campo, .pg-form .btn { flex: 1 1 100%; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Bienvenida al cliente que vuelve
   ══════════════════════════════════════════════════════════════════════════
   Aparece solo cuando la cédula ya estaba en la cartera. Es lo primero que
   ve al identificarse, y por eso es la pieza con más peso de la página.

   El degradado va OSCURO —#062a4d a #04564a— y no con el verde-azul de
   marca. Medido: sobre el degradado claro el texto blanco se queda en
   2,2:1. Sobre este, el peor extremo da 8,62:1 y el mejor 14,52:1. Elegante
   y legible no están reñidos, pero hay que medirlo.

   Las cifras van en #8ef5c8, que sobre el extremo más claro da 4,06:1 —
   pasa el mínimo de texto y se lee como un acento vivo, no como un adorno.
   ────────────────────────────────────────────────────────────────────────── */
.bienvenida { position: relative; overflow: hidden; display: flex;
  align-items: center; gap: 22px; margin-bottom: 20px;
  padding: 30px 30px 28px; border-radius: var(--radius-lg);
  background: linear-gradient(122deg, #062a4d 0%, #073d4c 52%, #04564a 100%);
  box-shadow: 0 20px 50px -22px rgba(6,42,77,.72);
  animation: bvEntra .55s cubic-bezier(.2,.8,.3,1) both; }

/* El brillo. Cruza UNA vez al aparecer y no en bucle: un destello que se
   repite deja de ser un detalle y se vuelve un parpadeo. */
.bienvenida::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 32%,
              rgba(255,255,255,.16) 46%, rgba(255,255,255,.03) 56%, transparent 68%);
  transform: translateX(-100%); animation: bvBrillo 1.5s .35s ease-out both; }
/* Un halo verde detrás, para que el bloque no se lea como un rectángulo
   plano. Va debajo del texto. */
.bienvenida::after { content: ''; position: absolute; z-index: 0;
  right: -8%; top: -60%; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(18,201,138,.34), transparent 62%); }
.bienvenida > * { position: relative; z-index: 1; }

@keyframes bvEntra  { from { opacity: 0; transform: translateY(14px) scale(.985); }
                      to   { opacity: 1; transform: none; } }
@keyframes bvBrillo { to { transform: translateX(100%); } }

.bv-txt { min-width: 0; flex: 1 1 auto; }
.bv-hola { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #8ef5c8; margin-bottom: 7px; }
.bv-nombre { font-family: var(--font); font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 800; letter-spacing: -.025em; color: #fff; line-height: 1.05;
  margin-bottom: 10px; text-wrap: balance; }
.bv-gracias { font-size: 14.5px; color: #cfe6f5; line-height: 1.6; max-width: 52ch; }

.bv-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.bv-chip { display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; font-size: 12.5px; color: #cfe6f5;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bv-chip b { color: #8ef5c8; font-variant-numeric: tabular-nums; }
.bv-chip svg { width: 14px; height: 14px; color: #8ef5c8; }

.bv-sello { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 24px;
  display: grid; place-items: center; color: #8ef5c8;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.bv-sello svg { width: 34px; height: 34px; }

/* Sin animación queda igual de bien: la entrada y el brillo son el adorno,
   no la información. */
@media (prefers-reduced-motion: reduce) {
  .bienvenida { animation: none; }
  .bienvenida::before { animation: none; opacity: 0; }
}
@media (max-width: 620px) {
  .bienvenida { padding: 24px 22px; gap: 16px; }
  .bv-sello { flex-basis: 58px; width: 58px; height: 58px; border-radius: 19px; }
  .bv-sello svg { width: 26px; height: 26px; }
  .bv-gracias { font-size: 13.5px; }
}


/* ── Pasos 2 y 3 del pago ─────────────────────────────────────────────────── */
/* Lo ya decidido, con su botón para cambiarlo. Va arriba de cada paso para
   que el cliente no tenga que devolverse a comprobar qué escogió. */
.pg-elegido { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 11px 16px; border-radius: 12px; font-size: 13.5px;
  color: var(--ink-2); background: rgba(255,255,255,.7); border: 1px solid var(--line); }
.pg-elegido svg { width: 16px; height: 16px; color: var(--green); flex: 0 0 16px; }
.pg-elegido b { color: var(--ink); }
.pg-elegido button { margin-left: auto; font-size: 12.5px; font-weight: 700;
  color: var(--blue); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; }

.pg-sucs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pg-suc { --sk: var(--blue); text-align: left; display: flex; flex-direction: column;
  gap: 4px; padding: 15px 17px; border-radius: 14px; position: relative;
  background: var(--s4-surface, #fff); border: 1px solid var(--line);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.pg-suc:hover { border-color: var(--sk); transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(10,99,230,.6); }
.pg-suc:focus-visible { outline: 2px solid var(--sk); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pg-suc:hover { transform: none; } }
.pg-suc b { font-size: 14.5px; color: var(--ink); display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; }
.pg-suc em { font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.pg-suc .pg-hor { font-size: 11.5px; color: var(--muted); }
.pg-cm { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; color: #fff; background: var(--accent); }

/* El resumen del pedido. Las cantidades y los importes alineados en columna
   —tabular-nums y ancho fijo— para que la vista baje en línea recta. */
.pg-lineas { list-style: none; margin: 0 0 16px; padding: 0; }
.pg-lineas li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.pg-lineas li:last-child { border-bottom: 0; }
.pl-q { flex: 0 0 30px; font-weight: 800; color: var(--blue);
  font-variant-numeric: tabular-nums; }
.pl-n { flex: 1 1 auto; min-width: 0; color: var(--ink-2); }
.pl-p { flex: 0 0 auto; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; }

.pg-tot { padding-top: 14px; border-top: 1px solid var(--line); }
.pg-tot div { display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0; font-size: 13.5px; color: var(--ink-2); }
.pg-tot b { font-variant-numeric: tabular-nums; color: var(--ink); }
.pg-tot .pt-grande { margin-top: 8px; padding-top: 12px;
  border-top: 1px solid var(--line-2); font-size: 15px; }
.pg-tot .pt-grande b { font-family: var(--font); font-size: 25px; font-weight: 800;
  letter-spacing: -.02em; }

@media (max-width: 640px) { .pg-sucs { grid-template-columns: 1fr; } }


/* ── Consultar con un asesor ───────────────────────────────────────────────
   Va junto a «Comprar» y «Agregar», no escondido abajo. Quien duda de una
   ficha se va o pregunta; darle el botón donde ya está mirando es la
   diferencia entre las dos cosas.

   Se distingue de los otros dos sin competir con ellos: contorno en verde de
   marca y relleno tenue, para que no parezca una tercera forma de comprar.
   ────────────────────────────────────────────────────────────────────────── */
.btn-asesor { display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 20px; border-radius: 999px; font-weight: 700; font-size: 14.5px;
  color: #05603a; background: rgba(0,168,107,.10);
  border: 1px solid rgba(0,133,85,.34);
  transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.btn-asesor:hover { background: rgba(0,168,107,.17); border-color: var(--green);
  transform: translateY(-1px); }
.btn-asesor:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.btn-asesor svg { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) { .btn-asesor:hover { transform: none; } }

/* La ficha del producto dentro del chat: recuerda de qué se está hablando,
   para que el cliente no tenga que repetir lo que ya eligió. */
.chat-ctx { display: flex; align-items: center; gap: 10px; margin: 9px 0;
  padding: 9px 11px; border-radius: 12px;
  background: rgba(255,255,255,.72); border: 1px solid var(--line); }
.chat-ctx img { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 9px;
  object-fit: contain; background: var(--s4-surface, #fff); border: 1px solid var(--line-2); }
.chat-ctx span { display: block; font-size: 11px; color: var(--muted);
  letter-spacing: .03em; }
.chat-ctx b { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }


/* ── Paso 4: el pago ──────────────────────────────────────────────────────
   El total en grande antes de las formas de pago. Es el número por el que
   el cliente está a punto de comprometerse; esconderlo en una fila del
   resumen es de mala fe.
   ────────────────────────────────────────────────────────────────────────── */
.pg-total-grande { display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
  padding: 20px 24px; border-radius: var(--radius-lg);
  background: linear-gradient(122deg, #062a4d 0%, #04564a 100%);
  box-shadow: 0 16px 40px -22px rgba(6,42,77,.7); }
.pg-total-grande span { font-size: 13px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #8ef5c8; }
.pg-total-grande b { font-family: var(--font); font-size: clamp(28px, 4vw, 38px);
  font-weight: 800; letter-spacing: -.025em; color: #fff;
  font-variant-numeric: tabular-nums; }

/* La forma de pago que todavía no está. Se muestra apagada y DICIENDO que
   viene, en vez de esconderla: quien busca pagar con tarjeta merece saber
   que la vamos a tener, no quedarse pensando que el sitio no la acepta. */
.pg-op[disabled] { cursor: not-allowed; opacity: .58; position: relative; }
.pg-op[disabled]:hover { transform: none; border-color: var(--line);
  box-shadow: 0 2px 8px rgba(15,37,64,.05), 0 16px 42px rgba(10,60,120,.12); }
.pg-op[disabled] .po-ic { background: var(--muted); }
.po-pronto { position: absolute; top: 16px; right: 16px;
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; color: #7a4802;
  background: rgba(164,97,3,.13); border: 1px solid rgba(164,97,3,.3); }


/* ── El importe del pedido, en el encabezado del pago ─────────────────────
   Es el dato que el cliente tiene que llevarse en la cabeza durante los tres
   pasos siguientes, así que deja de ser un subtítulo gris y pasa a ser una
   píldora con el monto en grande.

   Parpadea al aparecer y al cambiar el importe — y PARA. Tres latidos y se
   queda encendido. Un parpadeo permanente se vuelve invisible a los pocos
   segundos (uno deja de verlo, como los banners), molesta a quien lee
   despacio y en algunas personas el destello sostenido es un problema de
   verdad. Tres pulsos llaman la atención; el resto lo hace el tamaño y el
   color, que no se apagan nunca.

   Verde #05603a sobre la píldora compuesta (#d6eeeb): 6,31:1.
   ────────────────────────────────────────────────────────────────────────── */
.pg-sub { display: inline-flex; align-items: baseline; gap: 9px;
  margin-top: 10px; padding: 9px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: #05603a;
  background: rgba(0,168,107,.12);
  border: 1px solid rgba(0,133,85,.36); }
.pg-sub svg { width: 16px; height: 16px; align-self: center; color: #05603a; }
.pg-sub em { font-style: normal; opacity: .5; }
.pg-sub b { font-family: var(--font); font-size: 20px; font-weight: 800;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Tres latidos y se detiene. `both` deja fijo el estado final. */
.pg-sub.late { animation: pgLatido .72s ease-in-out 3 both; }
@keyframes pgLatido {
  0%, 100% { background: rgba(0,168,107,.12); border-color: rgba(0,133,85,.36);
             transform: scale(1); }
  50%      { background: rgba(0,168,107,.30); border-color: var(--green);
             transform: scale(1.035);
             box-shadow: 0 0 0 6px rgba(0,168,107,.14); }
}

/* Sin animación no se pierde el énfasis: la píldora se queda en el estado
   encendido, que es el que llama la atención. Quitar el movimiento no puede
   quitar la información. */
@media (prefers-reduced-motion: reduce) {
  .pg-sub.late { animation: none;
    background: rgba(0,168,107,.24); border-color: var(--green); }
}


/* ── Las dos salidas del carrito y del pago ───────────────────────────────
   Un pago de cuatro pasos sin salida visible se siente como una trampa:
   quien quiere agregar algo más, o arrepentirse, tiene que poder hacerlo
   sin buscar el botón de atrás del navegador.

   No pesan lo mismo a propósito. Seguir comprando es azul y va primero
   porque es la salida que queremos; cancelar es discreta y en rojo solo al
   pasar por encima, para que nadie la toque sin querer.
   ────────────────────────────────────────────────────────────────────────── */
.pg-salidas, .cr-salidas { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line-2); }
.cr-salidas { margin-top: 12px; padding-top: 12px; justify-content: center; }

.cr-cancelar { display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  background: none; border: 1px solid transparent;
  transition: color .16s ease, background .16s ease, border-color .16s ease; }
/* #b71c1c y no un rojo vivo: sobre el fondo claro da 6,16:1. Un aviso que
   cuesta leer no es un aviso — el mismo criterio del reloj. */
.cr-cancelar:hover { color: #b71c1c; background: rgba(183,28,28,.08);
  border-color: rgba(183,28,28,.28); }
.cr-cancelar:focus-visible { outline: 2px solid #b71c1c; outline-offset: 2px; }
.cr-cancelar svg { width: 15px; height: 15px; }
.pg-salidas .cr-seguir, .cr-salidas .cr-seguir { margin: 0; padding: 9px 15px; }

/* ── La foto del carrito amplía ────────────────────────────────────────────
   Antes la foto llevaba a la ficha: al querer verla de cerca uno terminaba
   saliéndose del carrito. Ahora amplía, y el nombre sigue llevando a la
   ficha. Dos gestos, dos destinos.
   ────────────────────────────────────────────────────────────────────────── */
.ci-foto { position: relative; padding: 0; cursor: zoom-in; overflow: hidden; }
.ci-lupa { position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; background: rgba(10,33,56,.42); opacity: 0;
  transition: opacity .16s ease; }
.ci-lupa svg { width: 20px; height: 20px; }
.ci-foto:hover .ci-lupa, .ci-foto:focus-visible .ci-lupa { opacity: 1; }
.ci-foto:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* En pantalla táctil no hay «pasar por encima»: la lupa se queda puesta,
   tenue, para que se vea que la foto hace algo. */
@media (hover: none) {
  .ci-lupa { opacity: 1; background: rgba(10,33,56,.22); }
}


/* ── Sin existencias: dos formas de consultar ─────────────────────────────
   El asistente va primero porque responde de una y, si no puede, deja la
   consulta anotada para un asesor. WhatsApp saca al visitante del sitio y lo
   deja esperando — sigue siendo válido, pero es la segunda opción.
   ────────────────────────────────────────────────────────────────────────── */
.consultar-dos { display: flex; align-items: center; gap: 8px; margin-top: auto;
  padding-top: 10px; }
.cd-rot { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: auto; }
/* Con precio pero sin stock, el número ocupa el lugar del rótulo «Consultar».
   Va un punto más chico que en la tarjeta normal porque comparte la fila con
   los dos botones redondos de 38px y en celular la tarjeta es angosta. */
.consultar-dos .prod-price { margin-right: auto; min-width: 0; }
.consultar-dos .prod-price .now { font-size: 15.5px; }
.consultar-dos .prod-tax { font-size: 9.5px; }
.cd-btn { position: relative; width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.8,.3,1), filter .16s ease,
              background .16s ease; }
.cd-btn:hover { transform: translateY(-2px); }
.cd-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cd-btn:hover { transform: none; } }
.cd-btn svg { width: 18px; height: 18px; }
.cd-btn.asistente { color: #fff; background: var(--accent); border: 0;
  box-shadow: 0 6px 14px -6px rgba(0,133,85,.7); }
.cd-btn.asistente:hover { filter: brightness(1.07); }
.cd-btn.wa { color: #0b6b3f; background: rgba(37,211,102,.15);
  border: 1px solid rgba(37,211,102,.42); }
.cd-btn.wa:hover { background: rgba(37,211,102,.25); }
.cd-btn.wa svg { fill: currentColor; }

/* El rótulo. Aparece al pasar por encima Y al llegar con el teclado — un
   tooltip que solo responde al ratón deja fuera a quien navega con Tab.
   `pointer-events:none` para que no se interponga al clic. */
/* Anclado al borde DERECHO y no centrado: la tarjeta lleva
   `overflow:hidden` y un rótulo centrado sobre el último botón se salía y
   quedaba cortado a la mitad. Con los dos botones al final de la fila, el
   borde derecho es el que siempre está dentro. */
.cd-btn::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 9px);
  right: 0; transform: translateY(4px);
  white-space: nowrap; padding: 6px 11px; border-radius: 9px;
  font-size: 11.5px; font-weight: 600; color: #fff; background: #0e2138;
  box-shadow: 0 8px 20px -8px rgba(14,33,56,.7);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 30;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
.cd-btn::before { content: ''; position: absolute; bottom: calc(100% + 4px);
  right: 14px; border: 5px solid transparent;
  border-top-color: #0e2138; opacity: 0; visibility: hidden;
  pointer-events: none; z-index: 30; transition: opacity .16s ease, visibility 0s linear .16s; }
.cd-btn:hover::after, .cd-btn:focus-visible::after,
.cd-btn:hover::before, .cd-btn:focus-visible::before {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .16s ease, transform .16s ease, visibility 0s; }



/* La marca de conversación cerrada. Discreta y centrada: no es el bot
   hablando, es el estado del hilo. */
.chat-body .msg.cierre { align-self: center; max-width: none;
  background: none; border: 0; box-shadow: none; padding: 4px 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }


/* ── El corazón de deseados ───────────────────────────────────────────────
   Antes sacaba un aviso y no guardaba nada. Ahora guarda, y por eso tiene
   dos estados que se distinguen sin leer: vacío y relleno.
   ────────────────────────────────────────────────────────────────────────── */
.prod-fav.on { background: var(--s4-surface, #fff); color: #e0245e; }
.prod-fav.on svg { fill: #e0245e; }
/* Un latido corto al marcarlo. Confirma el gesto sin un aviso que tape la
   tarjeta. */
.prod-fav.on { animation: favLatido .34s ease-out; }
@keyframes favLatido { 0% { transform: scale(1); } 45% { transform: scale(1.28); }
                       100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .prod-fav.on { animation: none; } }

/* ── La invitación a crear cuenta ─────────────────────────────────────────
   Sale cuando alguien sin cuenta pulsa el corazón. Ese es el momento en que
   la cuenta le sirve para algo, y por eso pedirla ahí no molesta: no es una
   interrupción, es la respuesta a lo que acaba de intentar.

   Dice QUÉ gana, no «regístrese». Nadie crea una cuenta por el verbo.
   ────────────────────────────────────────────────────────────────────────── */
.invita { position: fixed; inset: 0; z-index: 210; display: none;
  place-items: center; padding: 22px;
  background: rgba(6,20,40,.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.invita.abierta { display: grid; }
.invita-caja { position: relative; width: min(430px, 100%);
  padding: 34px 30px 28px; border-radius: var(--radius-lg); text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 30px 80px -30px rgba(6,42,77,.7);
  animation: invitaEntra .34s cubic-bezier(.2,.8,.3,1) both; }
@keyframes invitaEntra { from { opacity: 0; transform: translateY(16px) scale(.97); }
                         to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .invita-caja { animation: none; } }

.invita-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.invita-x:hover { background: var(--bg-2); color: var(--ink); }
.invita-x svg { width: 17px; height: 17px; }

.invita-ic { width: 66px; height: 66px; margin: 0 auto 16px; border-radius: 22px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #e0245e, #ff6b8a);
  box-shadow: 0 14px 30px -12px rgba(224,36,94,.6); }
.invita-ic svg { width: 30px; height: 30px; fill: currentColor; }
.invita-caja h3 { font-size: 23px; margin-bottom: 8px; letter-spacing: -.02em; }
.invita-caja > p { font-size: 14px; color: var(--ink-2); line-height: 1.6;
  max-width: 34ch; margin: 0 auto 18px; }

.invita-lista { list-style: none; margin: 0 0 22px; padding: 0; text-align: left; }
.invita-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  font-size: 13.5px; color: var(--ink-2); }
.invita-lista svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--green); }

.invita-btns { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.invita-btns .btn { width: 100%; justify-content: center; }
.invita-entrar { font-size: 13.5px; font-weight: 700; color: var(--blue); }
.invita-entrar:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ── Mi cuenta ─────────────────────────────────────────────────────────────
   Dos columnas al entrar: quien ya tiene cuenta a la izquierda, quien no a
   la derecha. Y no un formulario con un enlace pequeñito abajo: la mitad de
   la gente que llega acá viene a crear su cuenta, y esconderles esa puerta
   los deja probando claves que nunca tuvieron.
   ────────────────────────────────────────────────────────────────────────── */
.mc-cols { display: grid; grid-template-columns: 1fr .85fr; gap: 22px;
  align-items: start; }
.mc-nueva { text-align: center; }
.mc-nueva .mc-ic { width: 62px; height: 62px; margin: 0 auto 14px;
  border-radius: 20px; display: grid; place-items: center; color: #fff;
  background: var(--accent);
  box-shadow: 0 14px 30px -14px rgba(0,133,85,.65); }
.mc-nueva .mc-ic svg { width: 28px; height: 28px; }
.mc-nueva .pg-nota { max-width: 34ch; margin: 0 auto 18px; }
@media (max-width: 800px) { .mc-cols { grid-template-columns: 1fr; } }

.mc-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mc-tab { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 10px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  color: var(--ink-2); background: none; border: 1px solid transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease; }
.mc-tab:hover { background: var(--bg-2); }
.mc-tab.on { color: #fff; background: var(--accent); }
.mc-tab svg { width: 16px; height: 16px; }
.mc-salir { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.mc-salir:hover { color: #b71c1c; }
.mc-salir svg { width: 15px; height: 15px; }

/* El vacío no se deja en blanco: se dice qué falta y por dónde empezar. */
.mc-vacio { text-align: center; padding: 52px 24px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.7); border: 1px dashed var(--line); }
.mc-vacio .mv-ic { width: 68px; height: 68px; margin: 0 auto 16px;
  border-radius: 22px; display: grid; place-items: center;
  color: var(--muted); background: var(--bg-2); }
.mc-vacio .mv-ic svg { width: 30px; height: 30px; }
.mc-vacio h3 { font-size: 19px; margin-bottom: 6px; }
.mc-vacio p { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }

/* Las compras: una fila por comprobante, con los importes en columna. */
.mc-compras { list-style: none; margin: 0; padding: 0; }
.mc-compras li { display: grid;
  grid-template-columns: 96px 1fr 1fr 110px 120px; gap: 12px;
  align-items: center; padding: 14px 18px; margin-bottom: 8px;
  border-radius: 14px; font-size: 13.5px;
  background: rgba(255,255,255,.74); border: 1px solid var(--line); }
.mcc-fecha { color: var(--muted); font-variant-numeric: tabular-nums; }
.mcc-doc { font-weight: 700; color: var(--ink); display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; }
.mcc-linea { font-style: normal; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px;
  border-radius: 999px; color: #fff; background: var(--accent); }
.mcc-suc { color: var(--ink-2); }
.mcc-n { color: var(--muted); }
.mcc-total { text-align: right; font-family: var(--font); font-size: 16px;
  font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 780px) {
  .mc-compras li { grid-template-columns: 1fr auto; row-gap: 4px; }
  .mcc-suc, .mcc-n { font-size: 12px; }
  .mcc-total { grid-column: 2; grid-row: 1 / span 2; font-size: 18px; }
}


/* ── El detalle de cada compra ─────────────────────────────────────────────
   Antes solo se veía la factura, que es el papel. Lo que uno quiere recordar
   es QUÉ compró, no cuánto pagó, así que cada compra se despliega.

   Las líneas se piden al abrir y no al listar: con sesenta compras serían
   sesenta consultas para pintar algo que casi nadie despliega entero.
   ────────────────────────────────────────────────────────────────────────── */
.mc-compras li.mcc { display: block; padding: 0; overflow: hidden; }
.mcc-cab { display: grid; width: 100%; cursor: pointer; text-align: left;
  grid-template-columns: 96px 1fr 1fr 110px 120px 28px; gap: 12px;
  align-items: center; padding: 14px 18px; font-size: 13.5px;
  background: none; border: 0; transition: background .14s ease; }
.mcc-cab:hover { background: rgba(10,99,230,.05); }
.mcc-cab:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.mcc-chev { display: grid; place-items: center; color: var(--muted); }
.mcc-chev svg { width: 17px; height: 17px; transition: transform .22s cubic-bezier(.4,0,.2,1); }
.mcc.abierta .mcc-chev svg { transform: rotate(180deg); }
.mcc.abierta { border-color: var(--blue); }
@media (prefers-reduced-motion: reduce) { .mcc-chev svg { transition: none; } }

.mcc-det { padding: 0 18px 14px; }
.mcc-cargando { font-size: 13px; color: var(--muted); padding: 10px 0; }

.mcc-lineas { list-style: none; margin: 0; padding: 12px 0 0;
  border-top: 1px solid var(--line-2); }
.mcc-lineas li { display: grid; grid-template-columns: 46px 34px 1fr auto;
  gap: 14px; align-items: center; padding: 11px 0; font-size: 13.5px;
  border-bottom: 1px solid var(--line-2); }
.mcc-lineas li:last-child { border-bottom: 0; }
/* La foto del historial amplía. El mismo gesto que en el carrito: quien
   quiere ver de cerca lo que compró no debería tener que salirse de su
   historial. */
.mccl-foto { position: relative; width: 46px; height: 46px; padding: 0;
  border-radius: 10px; overflow: hidden; cursor: zoom-in;
  background: var(--s4-surface, #fff); border: 1px solid var(--line-2); display: block; }
.mccl-foto img { width: 100%; height: 100%; object-fit: contain; }
.mccl-lupa { position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; background: rgba(10,33,56,.42); opacity: 0;
  transition: opacity .16s ease; }
.mccl-lupa svg { width: 16px; height: 16px; }
.mccl-foto:hover .mccl-lupa, .mccl-foto:focus-visible .mccl-lupa { opacity: 1; }
.mccl-foto:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* En pantalla táctil no hay «pasar por encima»: la lupa se queda tenue para
   que se vea que la foto hace algo. */
@media (hover: none) { .mccl-lupa { opacity: 1; background: rgba(10,33,56,.2); } }
.mccl-n { font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums;
  text-align: center; }
/* El código va ENCIMA del nombre y en pequeño: es lo que el cliente dicta
   por teléfono cuando pide lo mismo otra vez, pero no es lo que lee para
   reconocer el producto. */
.mccl-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mccl-cod { font-style: normal; font-size: 11px; font-weight: 700;
  letter-spacing: .03em; color: var(--muted); font-variant-numeric: tabular-nums; }
.mccl-nom { color: var(--ink); min-width: 0; }
a.mccl-nom:hover { color: var(--blue); text-decoration: underline;
  text-underline-offset: 3px; }
.mccl-precios { text-align: right; display: flex; flex-direction: column; gap: 1px; }
.mccl-precios em { font-style: normal; font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.mccl-precios b { font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; }

@media (max-width: 780px) {
  .mcc-cab { grid-template-columns: 1fr auto 28px; row-gap: 4px; }
  .mcc-total { grid-column: 2; grid-row: 1 / span 2; font-size: 18px; }
  .mcc-chev { grid-column: 3; grid-row: 1 / span 2; }
  .mcc-lineas li { grid-template-columns: 40px 30px 1fr; row-gap: 2px; }
  .mccl-total { grid-column: 3; text-align: right; }
}


/* ── Devoluciones y garantías ─────────────────────────────────────────────── */
.mc-h3 { display: flex; align-items: center; gap: 9px; font-size: 18px;
  margin-bottom: 4px; }
.mc-h3 svg { width: 19px; height: 19px; color: var(--green); }
.mc-sub2 { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.mc-nada { font-size: 13.5px; color: var(--muted); padding: 18px;
  border-radius: 14px; background: rgba(255,255,255,.6);
  border: 1px dashed var(--line); }

.mc-gar { list-style: none; margin: 0; padding: 0; }
.mc-gar li { display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 18px; margin-bottom: 8px; border-radius: 14px;
  background: rgba(255,255,255,.74); border: 1px solid var(--line); }
.mg-est { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  color: #7a4802; background: rgba(164,97,3,.13); border: 1px solid rgba(164,97,3,.3); }
/* Resuelta en verde, cerrada en gris: el estado se lee sin leerlo. */
.mg-est.e3 { color: #05603a; background: rgba(0,168,107,.13);
  border-color: rgba(0,133,85,.32); }
.mg-est.e4 { color: var(--muted); background: var(--bg-2); border-color: var(--line); }
.mg-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mg-txt b { font-size: 14px; color: var(--ink); }
.mg-txt em { font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.mg-resp { display: flex; gap: 7px; align-items: flex-start; margin-top: 6px;
  padding: 9px 12px; border-radius: 10px; font-size: 13px; color: #05603a;
  background: rgba(0,168,107,.09); border: 1px solid rgba(0,133,85,.24); }
.mg-resp svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }

.pg-campo textarea { width: 100%; padding: 12px 14px; border-radius: 12px;
  font-family: inherit; font-size: 15px; color: var(--ink); background: var(--s4-surface, #fff);
  border: 1px solid var(--line); resize: vertical; }
.pg-campo textarea:focus { outline: 0; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(10,99,230,.16); }


/* ── Productos adquiridos ─────────────────────────────────────────────────
   Una tabla y no tarjetas: son datos que se comparan en columna —cuándo,
   cuánto, a qué precio— y para eso la tabla no tiene sustituto. Los números
   van con `tabular-nums` y alineados a la derecha para que la vista baje en
   línea recta.
   ────────────────────────────────────────────────────────────────────────── */
.mc-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px; }
.mc-buscar { flex: 1 1 280px; position: relative; display: flex; align-items: center; }
.mc-buscar svg { position: absolute; left: 14px; width: 17px; height: 17px;
  color: var(--muted); pointer-events: none; }
.mc-buscar input { width: 100%; padding: 12px 14px 12px 41px; border-radius: 999px;
  font-size: 14px; color: var(--ink); background: var(--s4-surface, #fff); border: 1px solid var(--line); }
.mc-buscar input:focus { outline: 0; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(10,99,230,.16); }
.mc-cuenta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* La tabla se desplaza SOLA en horizontal. Sin esto, en un teléfono empuja
   la página entera de lado y todo el sitio se descuadra. */
.mc-tabla-env { overflow-x: auto; border-radius: var(--radius);
  border: 1px solid var(--line); background: rgba(255,255,255,.74); }
.mc-tabla { width: 100%; border-collapse: collapse; font-size: 13px;
  min-width: 780px; }
.mc-tabla th { text-align: left; font-size: 11px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  padding: 13px 14px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: #f7fafd; z-index: 1; }
.mc-tabla td { padding: 12px 14px; border-bottom: 1px solid var(--line-2);
  color: var(--ink-2); vertical-align: middle; }
.mc-tabla tbody tr:last-child td { border-bottom: 0; }
.mc-tabla tbody tr:hover td { background: rgba(10,99,230,.04); }
.mc-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.mc-tabla .fuerte { font-weight: 700; color: var(--ink); }
.mc-tabla a { color: var(--ink); }
.mc-tabla a:hover { color: var(--blue); text-decoration: underline;
  text-underline-offset: 3px; }
.mp-cod { font-variant-numeric: tabular-nums; color: var(--muted); }
.mp-doc { font-weight: 600; color: var(--ink-2); }
/* Las devoluciones se distinguen sin leer la columna: la línea entera va en
   rojo tenue, porque una devolución RESTA de lo comprado. */
.mc-tabla tr.es-nc td { background: rgba(183,28,28,.045); }
.mc-tabla tr.es-nc .mp-doc { color: #8e1515; }
.mc-tabla tr.es-nc .fuerte { color: #8e1515; }


/* El contador de cada pestaña. Hereda el color del texto de la pestaña, así
   que en la activa —fondo de degradado— se ve claro sobre oscuro sin una
   regla aparte. */
.mc-num { display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; margin-left: 2px; border-radius: 999px;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--ink-2); background: var(--bg-2); }
.mc-tab.on .mc-num { color: #fff; background: rgba(255,255,255,.26); }
.mc-num.vacio { display: none; }


/* ── Área Comercial: el acceso destacado del menú ─────────────────────────
   Va en AZUL sólido y no en el degradado de marca. Dos razones: el
   degradado ya lo usa el botón «Buscar» del encabezado y dos piezas
   degradadas lado a lado compiten; y el azul lo separa del resto del nav
   sin gritar, que es lo que hace falta para un acceso B2B que no todos usan.

   Blanco sobre #0a63e6: 5,33:1.
   ────────────────────────────────────────────────────────────────────────── */
.nav-cta { display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 700;
  color: #fff; background: var(--blue); border: 1px solid transparent;
  box-shadow: 0 6px 16px -8px rgba(10,99,230,.75);
  transition: background .16s ease, transform .16s cubic-bezier(.2,.8,.3,1),
              box-shadow .16s ease; }
/* `.nav > a` pesa más que `.nav-cta`, así que el color se fija con el mismo
   peso o el enlace saldría gris como los demás. */
.nav > a.nav-cta { color: #fff; }
.nav > a.nav-cta:hover { color: #fff; background: var(--blue-2);
  transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(10,99,230,.8); }
.nav-cta svg { width: 16px; height: 16px; }
.nav-cta:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .nav > a.nav-cta:hover { transform: none; } }

.drawer nav .drawer-cta { display: flex; align-items: center; gap: 9px;
  margin-top: 8px; color: #fff; background: var(--blue); font-weight: 700; }
.drawer nav .drawer-cta:hover { color: #fff; background: var(--blue-2); }
.drawer-cta svg { width: 17px; height: 17px; }


/* ── Área Comercial ───────────────────────────────────────────────────────
   A la izquierda QUÉ gana con la cuenta, a la derecha el formulario. Un
   formulario solo, sin decir para qué sirve, hace que quien nunca ha entrado
   se dé la vuelta — y el que llega acá muchas veces es justo ese.
   ────────────────────────────────────────────────────────────────────────── */
.ac-beneficios { display: flex; flex-direction: column; gap: 10px; }
.ac-ben { display: flex; gap: 14px; align-items: flex-start; padding: 15px 17px;
  border-radius: 15px; background: rgba(255,255,255,.66);
  border: 1px solid var(--line); }
.ac-ben .ab-ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px;
  display: grid; place-items: center; color: #fff; background: var(--blue);
  box-shadow: 0 8px 18px -10px rgba(10,99,230,.8); }
/* Cada uno con su color, como las tarjetas de «Por qué SATEC»: la lista se
   recorre con la vista en vez de leerse entera. */
.ac-ben:nth-child(2) .ab-ic { background: var(--green); box-shadow: 0 8px 18px -10px rgba(0,133,85,.8); }
.ac-ben:nth-child(3) .ab-ic { background: #7c3aed; box-shadow: 0 8px 18px -10px rgba(124,58,237,.8); }
.ac-ben:nth-child(4) .ab-ic { background: #e0245e; box-shadow: 0 8px 18px -10px rgba(224,36,94,.8); }
.ac-ben:nth-child(5) .ab-ic { background: #a46103; box-shadow: 0 8px 18px -10px rgba(164,97,3,.8); }
.ac-ben .ab-ic svg { width: 19px; height: 19px; }
.ac-ben b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 2px; }
.ac-ben em { font-style: normal; font-size: 13px; color: var(--ink-2); line-height: 1.5; }

.ac-pie { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2);
  font-size: 13.5px; color: var(--muted); text-align: center; }
.ac-pie button { cursor: pointer; font-size: 13.5px; font-weight: 700;
  color: var(--blue); background: none; border: 0; }
.ac-pie button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Estado de cuenta ─────────────────────────────────────────────────────
   El titular dice de una si debe o no. Un cliente entra acá con una sola
   pregunta y merece la respuesta antes que la tabla.
   ────────────────────────────────────────────────────────────────────────── */
.ec-cabecera { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px;
  border-radius: var(--radius-lg); margin-bottom: 16px; }
.ec-cabecera.ok   { background: rgba(0,168,107,.10); border: 1px solid rgba(0,133,85,.3); }
.ec-cabecera.debe { background: rgba(164,97,3,.10);  border: 1px solid rgba(164,97,3,.32); }
.ec-cabecera .ec-ic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px;
  display: grid; place-items: center; color: #fff; }
.ec-cabecera.ok   .ec-ic { background: var(--green); }
.ec-cabecera.debe .ec-ic { background: #a46103; }
.ec-cabecera .ec-ic svg { width: 21px; height: 21px; }
.ec-cabecera h3 { font-size: 18px; margin-bottom: 4px; }
.ec-cabecera.ok h3   { color: #05603a; }
.ec-cabecera.debe h3 { color: #7a4802; }
.ec-cabecera p { font-size: 13.5px; color: var(--ink-2); }

.ec-saldos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; }
.ec-saldo { padding: 16px 18px; border-radius: 15px;
  background: rgba(255,255,255,.74); border: 1px solid var(--line); }
.ec-saldo span { display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 5px; }
.ec-saldo b { font-family: var(--font); font-size: 23px; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
/* El saldo que se debe en ámbar y no en rojo: deber no es un error, y
   pintarlo de rojo asusta a quien está dentro de su plazo de crédito. */
.ec-saldo.debe { background: rgba(164,97,3,.09); border-color: rgba(164,97,3,.3); }
.ec-saldo.debe b { color: #7a4802; }

.ec-atraso { font-size: 11.5px; font-weight: 700; padding: 4px 10px;
  border-radius: 999px; color: #8e1515; background: rgba(183,28,28,.1);
  border: 1px solid rgba(183,28,28,.26); white-space: nowrap; }
.ec-vigente { font-size: 11.5px; font-weight: 700; padding: 4px 10px;
  border-radius: 999px; color: #05603a; background: rgba(0,168,107,.1);
  border: 1px solid rgba(0,133,85,.26); }


/* El acceso al Área Comercial desde Mi cuenta. Solo aparece si el cliente
   tiene crédito — enseñárselo a quien no puede entrar es ofrecerle una
   puerta que no le abre. */
.mc-tab-ac { color: var(--blue); background: rgba(10,99,230,.10);
  border-color: rgba(10,99,230,.3); }
.mc-tab-ac:hover { color: #fff; background: var(--blue); }

/* ═══════════════════════════════════════════════════════════════════════════
   ÁREA COMERCIAL
   Sección de los clientes de crédito. Registro visual aparte del resto de la
   tienda a propósito: acá no se compra, se consulta plata. El azul marino
   profundo y la cifra grande en la cabecera son de tablero financiero, no de
   catálogo. Todo número lleva `tabular-nums` — en una columna de montos, las
   cifras tienen que alinearse o la tabla no se puede leer de un vistazo.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --ac-fondo:  #071726;   /* marino profundo, base de la cabecera        */
  --ac-fondo2: #0e3050;   /* el mismo azul abierto, para el degradado    */
  --ac-luz:    #64e8d4;   /* turquesa claro: 8.9:1 sobre el marino       */
  --ac-ambar:  #ac6400;   /* atraso — 4,59:1 sobre blanco (medido)      */
}

/* ── La entrada ─────────────────────────────────────────────────────────── */
.acp {
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(11,184,166,.26), transparent 62%),
    radial-gradient(760px 480px at 88% 108%, rgba(10,99,230,.32), transparent 66%),
    linear-gradient(158deg, var(--ac-fondo) 0%, var(--ac-fondo2) 100%);
  padding: clamp(46px, 7vw, 84px) 0 clamp(54px, 8vw, 96px);
  color: #fff;
}
.acp-in {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 68px); align-items: center;
}
.acp-eyebrow {
  display: inline-block; font-family: var(--font); font-size: 11.5px;
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ac-luz); margin-bottom: 14px;
}
.acp-txt h1 {
  font-family: var(--font); font-weight: 800; line-height: 1.04;
  font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -.02em;
  margin: 0 0 18px; text-wrap: balance; color: #fff;
}
.acp-txt h1 b { color: var(--ac-luz); font-weight: 800; }
.acp-txt > p {
  color: rgba(255,255,255,.82); line-height: 1.65; max-width: 46ch;
  font-size: 15.5px; margin: 0 0 26px;
}
.acp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.acp-lista li {
  display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,.9); font-size: 14.5px;
}
.acp-lista i, .acp-lista svg {
  width: 18px; height: 18px; flex: 0 0 18px; color: var(--ac-luz);
  stroke-width: 2.1;
}

.acp-caja {
  background: var(--s4-surface, #fff); border-radius: 24px; padding: clamp(28px, 3.4vw, 40px);
  box-shadow: 0 30px 70px rgba(3,14,26,.42);
  color: var(--ink); max-width: 430px; width: 100%; justify-self: end;
}
.acp-caja h2 {
  font-family: var(--font); font-size: 23px; font-weight: 800;
  margin: 0 0 6px; color: var(--ink);
}
.acp-nota { color: var(--muted); font-size: 13.5px; margin: 0 0 22px; }
.acp-campo { display: block; margin-bottom: 16px; }
.acp-campo span {
  display: block; font-size: 12px; font-weight: 700; color: var(--ink-2);
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 7px;
}
.acp-campo input {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--line);
  border-radius: 12px; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--bg); transition: border-color .16s, background .16s;
}
.acp-campo input:focus {
  outline: none; border-color: var(--blue); background: var(--s4-surface, #fff);
  box-shadow: 0 0 0 4px rgba(10,99,230,.13);
}
.acp-error {
  display: flex; align-items: center; gap: 8px; margin: 0 0 15px;
  padding: 11px 13px; border-radius: 11px; font-size: 13.5px;
  background: #fdeeee; color: #a3252b; border: 1px solid #f6d3d5;
}
.acp-error i, .acp-error svg { width: 16px; height: 16px; flex: 0 0 16px; }
.acp-btn {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 9px; padding: 14px 20px; border: 0; border-radius: 13px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 700;
  font-size: 15px; cursor: pointer; box-shadow: 0 10px 26px rgba(10,99,230,.3);
  transition: transform .16s, box-shadow .16s, filter .16s;
}
.acp-btn:hover  { transform: translateY(-2px); box-shadow: 0 15px 34px rgba(10,99,230,.36); }
.acp-btn:active { transform: translateY(0); }
.acp-btn:disabled { filter: grayscale(.4); cursor: default; transform: none; }
.acp-btn i, .acp-btn svg { width: 17px; height: 17px; }
.acp-pie {
  margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--muted);
}
.acp-pie a { color: var(--blue); font-weight: 600; }

/* ── La cabecera del tablero ────────────────────────────────────────────── */
.ac-hero {
  background:
    radial-gradient(900px 460px at 8% -20%, rgba(11,184,166,.24), transparent 60%),
    radial-gradient(700px 420px at 92% 120%, rgba(10,99,230,.3), transparent 64%),
    linear-gradient(158deg, var(--ac-fondo) 0%, var(--ac-fondo2) 100%);
  padding: clamp(34px, 4.6vw, 52px) 0 0;
  color: #fff;
}
.ach-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; margin-bottom: clamp(26px, 3.4vw, 38px);
}
.ach-eyebrow {
  display: block; font-family: var(--font); font-size: 11.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ac-luz);
  margin-bottom: 9px;
}
.ach-top h1 {
  font-family: var(--font); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(25px, 3.2vw, 38px); line-height: 1.12; margin: 0 0 8px;
  color: #fff; text-wrap: balance;
}
.ach-meta { color: rgba(255,255,255,.7); font-size: 13.5px; margin: 0; }
.ach-salir {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px;
  border-radius: 11px; border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.08); color: #fff; font: inherit;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .16s, border-color .16s;
}
.ach-salir:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.ach-salir i, .ach-salir svg { width: 15px; height: 15px; }

/* Las cifras montan sobre el borde de la cabecera. Es lo que amarra la banda
   oscura con el cuerpo claro, y pone el número que el cliente vino a ver justo
   en la costura entre las dos. */
.ach-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 15px; transform: translateY(clamp(16px, 2.2vw, 26px));
}
.ach-cifra {
  background: var(--s4-surface, #fff); border-radius: 17px; padding: 17px 19px 16px;
  box-shadow: 0 16px 40px rgba(3,14,26,.3);
  border-top: 3px solid var(--line);
}
.ach-cifra span {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.ach-cifra b {
  display: block; font-family: var(--font); font-weight: 800;
  font-size: clamp(20px, 2.3vw, 27px); color: var(--ink);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ach-cifra.ok     { border-top-color: var(--green-2); }
.ach-cifra.debe   { border-top-color: var(--blue); }
.ach-cifra.favor  { border-top-color: var(--teal); }
.ach-cifra.favor b{ color: var(--green); }
.ach-cifra.atraso { border-top-color: var(--ac-ambar); }
.ach-cifra.atraso b { color: var(--ac-ambar); }

/* ── El riel de pestañas ────────────────────────────────────────────────── */
.ac-rail {
  display: flex; gap: 5px; flex-wrap: wrap;
  margin: clamp(22px, 3vw, 34px) 0 22px;
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
}
.ac-t {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px;
  border: 0; border-bottom: 2.5px solid transparent; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--muted);
  cursor: pointer; border-radius: 10px 10px 0 0;
  transition: color .16s, background .16s, border-color .16s;
}
.ac-t:hover  { color: var(--ink); background: var(--bg-2); }
.ac-t.on     { color: var(--blue); border-bottom-color: var(--blue); }
.ac-t i, .ac-t svg      { width: 16px; height: 16px; }

/* ── Recibos de pago ────────────────────────────────────────────────────── */
.ac-recibos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ac-recibos > li {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 15px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.acr-cab {
  display: grid;
  grid-template-columns: 130px 96px 1fr auto;
  gap: 14px; align-items: center; padding: 15px 19px;
}
.acr-num   { font-weight: 700; color: var(--ink); font-size: 14.5px; }
.acr-fecha { color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.acr-fp {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-2); font-size: 13.5px;
}
.acr-fp i, .acr-fp svg { width: 15px; height: 15px; color: var(--teal); }
.acr-monto {
  font-family: var(--font); font-weight: 800; font-size: 17px;
  color: var(--green); font-variant-numeric: tabular-nums; text-align: right;
}
.acr-apl {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 19px; background: var(--bg-2); border-top: 1px solid var(--line-2);
}
.acr-rot {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.acr-fac {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 5px 11px;
  border-radius: 999px; background: var(--s4-surface, #fff); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.acr-fac b { color: var(--ink); font-weight: 700; }

/* ── Documentos electrónicos ────────────────────────────────────────────── */
.ac-clave {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px;
  color: var(--muted); letter-spacing: -.01em; word-break: break-all;
  max-width: 250px;
}
.ac-descargas { display: flex; gap: 7px; white-space: nowrap; }
.ac-dl {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border-radius: 9px; border: 1px solid var(--line); background: var(--bg);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  transition: background .16s, border-color .16s, color .16s;
}
.ac-dl:hover { background: var(--s4-surface, #fff); border-color: var(--blue); color: var(--blue); }
.ac-dl i, .ac-dl svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .acp-in { grid-template-columns: 1fr; }
  .acp-caja { justify-self: stretch; max-width: none; }
  .acr-cab { grid-template-columns: 1fr auto; gap: 8px; }
  .acr-fp  { grid-column: 1 / -1; }
}

/* «En trámite»: el comprobante salió pero Hacienda todavía no contesta. No es
   un error, así que no lleva el color de alarma. */
.ec-trami {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--bg-2);
  color: var(--ink-2); border: 1px solid var(--line);
}

/* ── Área Comercial · buscadores, bloques y paginador ───────────────────── */
.ac-bloque { margin-bottom: 34px; }
.ac-bloque-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 15px;
}
.ac-bloque-cab.solo { justify-content: flex-end; }
.ac-bloque-cab h3 {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-family: var(--font); font-size: 17px; font-weight: 800; color: var(--ink);
}
.ac-bloque-cab h3 i, .ac-bloque-cab h3 svg {
  width: 18px; height: 18px; color: var(--teal);
}
.ac-bloque-cab h3 em {
  font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--muted);
  background: var(--bg-2); border-radius: 999px; padding: 2px 9px;
}
.ac-buscar { position: relative; flex: 0 1 330px; min-width: 220px; }
.ac-buscar i, .ac-buscar svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.ac-buscar input {
  width: 100%; padding: 10px 14px 10px 38px; border: 1.5px solid var(--line);
  border-radius: 11px; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface); transition: border-color .16s, box-shadow .16s;
}
.ac-buscar input:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(10,99,230,.12);
}
.ac-buscar input::-webkit-search-cancel-button { cursor: pointer; }
.ac-sinres, .ac-conteo {
  color: var(--muted); font-size: 13.5px; padding: 14px 2px; margin: 0;
}
.ac-conteo { padding-bottom: 10px; }

/* El contador en la pestaña. Va detrás del rótulo y en gris: es un dato de
   apoyo, no compite con el nombre de la sección. */
.ac-t em {
  font-style: normal; font-size: 11.5px; font-weight: 700;
  background: var(--bg-2); color: var(--muted);
  border-radius: 999px; padding: 1px 7px; margin-left: 2px;
}
.ac-t.on em { background: rgba(10,99,230,.12); color: var(--blue); }

/* ── Facturas pendientes, con sus abonos debajo ─────────────────────────── */
.ac-facturas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.acf {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--blue); border-radius: 14px;
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.acf-atraso { border-left-color: var(--ac-ambar); }
.acf-fila {
  display: grid; grid-template-columns: 92px 96px 118px 1fr auto auto;
  gap: 15px; align-items: center; padding: 15px 19px;
}
.acf-num   { font-weight: 700; color: var(--ink); font-size: 14.5px; }
.acf-fecha, .acf-vence {
  color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums;
}
.acf-total {
  color: var(--ink-2); font-size: 14px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.acf-saldo {
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--font); font-weight: 800; font-size: 17px; color: var(--ink);
  font-variant-numeric: tabular-nums; min-width: 132px;
}
.acf-saldo em {
  font-family: var(--font-body); font-style: normal; font-size: 10.5px;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
}
.acf-atraso .acf-saldo { color: var(--ac-ambar); }
.acf-abonos {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 19px; background: var(--bg-2); border-top: 1px solid var(--line-2);
}
.acf-abono {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
  border-radius: 999px; background: var(--s4-surface, #fff); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.acf-abono i, .acf-abono svg { width: 13px; height: 13px; color: var(--teal); }
.acf-abono b { color: var(--green); font-weight: 700; }

/* ── Paginador ──────────────────────────────────────────────────────────── */
.ac-pag {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 20px; flex-wrap: wrap;
}
.acp-n {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .16s, background .16s, color .16s;
}
.acp-n:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.acp-n.on {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.acp-n:disabled { opacity: .4; cursor: default; }
.acp-n i, .acp-n svg { width: 15px; height: 15px; }
.acp-p { color: var(--muted); padding: 0 2px; }

/* ── Solicitud de acceso ────────────────────────────────────────────────── */
.acp-caja-sola { max-width: none; justify-self: stretch; margin-top: 18px; }
.acp-sep {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 15px;
  color: var(--muted); font-size: 12px;
}
.acp-sep::before, .acp-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.acp-btn2 {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 9px; padding: 12px 18px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--bg); color: var(--ink-2);
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  transition: border-color .16s, color .16s, background .16s;
}
.acp-btn2:hover { border-color: var(--blue); color: var(--blue); background: var(--s4-surface, #fff); }
.acp-btn2 i, .acp-btn2 svg { width: 16px; height: 16px; }
.ac-volver {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.08); color: #fff; font: inherit;
  font-size: 13.5px; font-weight: 600; cursor: pointer; margin-bottom: 4px;
}
.ac-volver:hover { background: rgba(255,255,255,.16); }
.ac-volver i, .ac-volver svg { width: 15px; height: 15px; }
.sol-cargando { color: var(--muted); font-size: 13.5px; padding: 16px 0 0; margin: 0; }
.sol-caja {
  display: flex; gap: 13px; align-items: flex-start; margin: 20px 0 0;
  padding: 16px 17px; border-radius: 14px; font-size: 14px; line-height: 1.6;
}
.sol-caja p { margin: 0 0 8px; }
.sol-caja p:last-child { margin-bottom: 0; }
.sol-ok    { background: #e9f9f1; border: 1px solid #bfe9d5; color: #0b5238; }
.sol-aviso { background: #fff6e6; border: 1px solid #f3dcae; color: #6d4a05; }
.sol-nuevo { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); }
.sol-ic {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px;
  display: grid; place-items: center; background: rgba(255,255,255,.7);
}
.sol-ic i, .sol-ic svg { width: 19px; height: 19px; }
.sol-nota { font-size: 13px; opacity: .85; }
.sol-caja a { color: inherit; text-decoration: underline; font-weight: 600; }
.sol-rot {
  margin: 22px 0 4px; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
}
.sol-form { margin-top: 14px; }
.sol-form textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 12px; font: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--bg); resize: vertical; transition: border-color .16s;
}
.sol-form textarea:focus {
  outline: none; border-color: var(--blue); background: var(--s4-surface, #fff);
  box-shadow: 0 0 0 4px rgba(10,99,230,.13);
}

/* ── Mi perfil comercial ────────────────────────────────────────────────── */
.ac-perfil {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start;
}
.acx {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 17px; padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.ac-perfil .acx:first-child { grid-row: span 2; }
.acx h3 {
  display: flex; align-items: center; gap: 9px; margin: 0 0 6px;
  font-family: var(--font); font-size: 16.5px; font-weight: 800; color: var(--ink);
}
.acx h3 i, .acx h3 svg { width: 18px; height: 18px; color: var(--teal); }
.acx-nota { color: var(--muted); font-size: 13px; margin: 0 0 18px; line-height: 1.55; }
.acx-nota a { color: var(--blue); font-weight: 600; }
.acd-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 16px; }
.acd { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acd-rot {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.acd-rot i, .acd-rot svg { width: 13px; height: 13px; }
.acd-val { color: var(--ink); font-size: 14.5px; line-height: 1.5; word-break: break-word; }
.acl-fila {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-2);
}
.acl-fila span { color: var(--muted); font-size: 13.5px; }
.acl-fila b {
  font-family: var(--font); font-weight: 700; font-size: 15px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.acl-fila.destacada { border-bottom: 0; }
.acl-fila.destacada b { font-size: 20px; color: var(--green); }
.acl-barra {
  height: 8px; border-radius: 999px; background: var(--bg-2);
  overflow: hidden; margin-top: 12px;
}
.acl-barra span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.acl-pie { color: var(--muted); font-size: 12.5px; margin: 10px 0 0; line-height: 1.55; }
.acc-form .acp-campo { margin-bottom: 13px; }
.ac-acciones { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 18px; }

@media (max-width: 980px) {
  .ac-perfil { grid-template-columns: 1fr; }
  .ac-perfil .acx:first-child { grid-row: auto; }
  .acf-fila { grid-template-columns: 1fr auto; gap: 9px; }
  .acf-vence, .acf-estado { grid-column: 1 / -1; }
  .acf-saldo { align-items: flex-start; }
}

/* Cuando la cifra oficial y la suma del detalle no coinciden. Es informativo,
   no una alarma: el cliente no hizo nada mal. */
.acf-descuadre {
  display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px;
  padding: 13px 15px; border-radius: 13px; background: var(--bg-2);
  border: 1px solid var(--line); color: var(--ink-2);
}
.acf-descuadre i, .acf-descuadre svg {
  width: 17px; height: 17px; flex: 0 0 17px; color: var(--blue); margin-top: 2px;
}
.acf-descuadre p { margin: 0; font-size: 13.5px; line-height: 1.6; }
.acf-descuadre b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Reenviar y «sin envío» viven en la misma fila que las descargas, pero uno
   es un botón y el otro un rótulo. Se distinguen por el color, no por la
   forma: la fila tiene que leerse de un vistazo. */
.ac-dl-env { cursor: pointer; font-family: inherit; }
.ac-dl-env:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.ac-dl-env:disabled { opacity: .65; cursor: default; }
.ac-dl-ok {
  background: #e9f9f1 !important; border-color: #bfe9d5 !important;
  color: #0b5238 !important;
}
.ac-dl-no {
  background: transparent; border-color: transparent; color: var(--muted);
  cursor: help;
}
.ac-dl-no:hover { background: transparent; border-color: transparent; color: var(--muted); }
.ac-descargas { flex-wrap: wrap; gap: 6px; }

/* ── Modal del Área Comercial (visor de PDF y reenvío) ─────────────────── */
.acm-fondo {
  position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center;
  background: rgba(7,23,38,.72); backdrop-filter: blur(3px);
  padding: 22px; animation: acmEntra .16s ease;
}
@keyframes acmEntra { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .acm-fondo { animation: none } }
.acm {
  background: var(--surface); border-radius: 20px; width: 100%;
  max-width: 880px; max-height: 92vh; overflow: auto;
  box-shadow: 0 30px 80px rgba(3,14,26,.5); display: flex; flex-direction: column;
}
.acm-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 17px 20px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.acm-cab h3 {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-family: var(--font); font-size: 16px; font-weight: 800; color: var(--ink);
}
.acm-cab h3 i, .acm-cab h3 svg { width: 18px; height: 18px; color: var(--teal); }
.acm-acc { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.acm-x {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center; flex: 0 0 34px;
}
.acm-x:hover { background: var(--s4-surface, #fff); border-color: var(--blue); color: var(--blue); }
.acm-x i, .acm-x svg { width: 17px; height: 17px; }
.acm-pdf { width: 100%; height: 74vh; border: 0; display: block; background: var(--bg-2); }
.acm-movil { text-align: center; padding: 46px 24px; color: var(--muted); }
.acm-movil p { margin: 14px 0 0; font-size: 14px; }
.acm-cuerpo { padding: 20px 22px 22px; }
.acm-rot {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.acm-correos { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; }
.acm-correos li {
  display: flex; align-items: center; gap: 9px; padding: 10px 13px;
  border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line);
  font-size: 14px; color: var(--ink); word-break: break-all;
}
.acm-correos i, .acm-correos svg {
  width: 16px; height: 16px; flex: 0 0 16px; color: var(--green);
}
.acm-aviso {
  display: flex; align-items: flex-start; gap: 9px; margin: 0 0 18px;
  padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.55;
  background: #fff6e6; border: 1px solid #f3dcae; color: #6d4a05;
}
.acm-aviso i, .acm-aviso svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }
.acm-otro { margin-bottom: 8px; }
.acm-nota { color: var(--muted); font-size: 12.5px; margin: 0 0 18px; line-height: 1.55; }
.acm-ok {
  display: flex; gap: 13px; align-items: flex-start; margin-bottom: 16px;
  padding: 16px 17px; border-radius: 14px; font-size: 14px;
  background: #e9f9f1; border: 1px solid #bfe9d5; color: #0b5238;
}
.acm-ok p { margin: 0 0 10px; }
.acm-ok .acm-correos { margin: 0; }
.acm-ok .acm-correos li { background: rgba(255,255,255,.7); border-color: #bfe9d5; }
.ac-dl-pdf { cursor: pointer; font-family: inherit; }
.ac-dl-pdf:hover { border-color: var(--blue); color: var(--blue); }

@media (max-width: 820px) {
  .acm { max-width: 100%; }
  .acm-cab { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDES SOCIALES
   Cada tarjeta lleva el color de su red, no el de SATEC: quien busca el
   Instagram lo reconoce por el rosa antes de leer nada. El logo va grande y
   girado, saliéndose por la esquina — es el gesto que hace que se sientan
   tarjetas y no una fila de botones.
   ═══════════════════════════════════════════════════════════════════════════ */
.redes-sec { padding: clamp(30px, 4vw, 46px) 0 clamp(40px, 5vw, 62px); }
.redes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 16px;
}
.red {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 15px;
  padding: 22px 20px; border-radius: 20px; color: #fff;
  min-height: 116px; text-decoration: none;
  box-shadow: 0 8px 26px rgba(15,37,64,.16);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s;
}
.red:hover, .red:focus-visible { transform: translateY(-6px); }
.red:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.red:active { transform: translateY(-2px); }

/* El logo grande del fondo. Decorativo: el de verdad es el de `.red-ic`. */
.red-glow {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 120% at 115% 115%, rgba(255,255,255,.28), transparent 58%);
  transition: transform .5s cubic-bezier(.2,.8,.3,1);
}
.red:hover .red-glow { transform: scale(1.35) rotate(8deg); }

.red-ic {
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: 16px;
  display: grid; place-items: center; background: rgba(255,255,255,.18);
  backdrop-filter: blur(2px); transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.red-ic svg { width: 30px; height: 30px; color: #fff; }
.red:hover .red-ic { transform: rotate(-8deg) scale(1.08); }

.red-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.red-txt b {
  font-family: var(--font); font-size: 18px; font-weight: 800;
  letter-spacing: -.01em; line-height: 1.2;
}
.red-txt em {
  font-style: normal; font-size: 13px; opacity: .92;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.red-ir {
  margin-left: auto; width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.2);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), background .22s;
}
.red-ir i, .red-ir svg { width: 16px; height: 16px; color: #fff; }
.red:hover .red-ir { background: rgba(255,255,255,.34); transform: translate(3px,-3px); }

/* Los colores de marca de cada red. */
.red-fb {
  background: linear-gradient(140deg, #1877F2 0%, #0b57c7 60%, #06439c 100%);
  box-shadow: 0 8px 26px rgba(24,119,242,.34);
}
.red-fb:hover { box-shadow: 0 16px 40px rgba(24,119,242,.44); }

/* El degradado de Instagram: 7 de sus 10 tonos oficiales, del azul al coral.
   Se dejan fuera el naranja, el ámbar y el amarillo — medidos contra el texto
   blanco dan 2,75:1, 1,85:1 y 1,33:1, y sobre el amarillo el nombre de la red
   no se lee. Del azul al coral todo el recorrido pasa de 3:1, y la rampa
   sigue siendo la de Instagram. */
.red-ig {
  background: linear-gradient(125deg, #405DE6 0%, #5851DB 14%, #833AB4 32%,
              #C13584 50%, #E1306C 66%, #FD1D1D 84%, #F56040 100%);
  box-shadow: 0 8px 26px rgba(193,53,132,.36);
}
.red-ig:hover { box-shadow: 0 16px 40px rgba(193,53,132,.46); }

/* TikTok es negro con el cian y el magenta de su logo. */
.red-tk {
  background: linear-gradient(140deg, #16161a 0%, #000 100%);
  box-shadow: 0 8px 26px rgba(0,0,0,.4);
}
.red-tk .red-glow {
  background: radial-gradient(90% 90% at 112% 112%, rgba(37,244,238,.42), transparent 55%),
              radial-gradient(80% 80% at -12% -12%, rgba(254,44,85,.38), transparent 55%);
}
.red-tk .red-ic { background: rgba(37,244,238,.2); }
.red-tk:hover { box-shadow: 0 16px 40px rgba(37,244,238,.28); }

.red-yt {
  background: linear-gradient(140deg, #FF0000 0%, #d10000 62%, #a30000 100%);
  box-shadow: 0 8px 26px rgba(255,0,0,.32);
}
.red-yt:hover { box-shadow: 0 16px 40px rgba(255,0,0,.42); }

@media (prefers-reduced-motion: reduce) {
  .red, .red-ic, .red-ir, .red-glow { transition: none; }
  .red:hover { transform: none; }
  .red:hover .red-ic, .red:hover .red-glow, .red:hover .red-ir { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARCAS PRINCIPALES SOBRE FONDO CON PARALLAX
   Todo va anclado a `#marcas-destacadas`: las mismas `.mt-card` se usan en la
   página de cada marca sobre fondo claro y allá no deben cambiar.

   Los números del velo y del vidrio están MEDIDOS sobre la foto compuesta, no
   puestos a ojo. `wall1.jpg` es oscura de mediana (0,002–0,023) pero tiene
   picos de cian que llegan a 0,79 repartidos por toda la altura, así que un
   degradado no alcanza: hace falta desenfoque + velo.
   ═══════════════════════════════════════════════════════════════════════════ */
.md-sec {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(52px, 6.5vw, 92px) 0 clamp(56px, 7vw, 100px);
  background: #04101c;      /* por si la foto tarda o falla */
}

/* La capa del fondo es MÁS ALTA que la sección: al desplazarse no puede
   dejar ver el borde. Sobresale un 40% por arriba y otro 40% por abajo, y el
   parallax recorre como mucho el 34% del alto (ver FACTOR en satec.js), así
   que sobran 6 puntos de margen en cualquier tamaño de pantalla — los dos
   valores son proporcionales al alto de la sección. El `scale` del zoom añade
   un 1,5%, que cabe de sobra en el 6% que queda. */
.md-fondo {
  position: absolute; left: -6%; right: -6%; top: -40%; height: 180%;
  z-index: -2;
  background: url('/api/recurso/wall1.jpg') center / cover no-repeat;
  /* Desenfoque de 6px: los picos brillantes de la foto son rayas de uno o
     dos píxeles y el desenfoque los apaga sin borrar la ciudad. Se estira un
     poco de más (los -4% / -15%) para que el desenfoque no muestre el borde. */
  filter: blur(6px);
  will-change: transform;
}

/* El velo. Fuerte arriba, donde va el título sobre la foto desnuda; más
   suave en el medio, donde las tarjetas ponen su propio vidrio; y otra vez
   fuerte abajo para que la sección cierre contra el fondo claro de la
   siguiente. Medido: con velo al 86% el título blanco da 6,40:1 sobre el
   píxel más brillante de todos, y el párrafo 4,79:1. */
.md-velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(4,14,26,.90)  0%,   /* cierre contra la sección de arriba          */
    rgba(4,14,26,.84) 17%,   /* zona del título: 5,84:1 en el peor punto    */
    rgba(4,14,26,.58) 33%,
    rgba(4,14,26,.54) 58%,   /* zona de las tarjetas: acá la foto se ve     */
    rgba(4,14,26,.64) 84%,
    rgba(4,14,26,.93) 100%);
}
.md-cont { position: relative; z-index: 1; }

.md-sec .section-title { color: #fff; }
.md-sec .section-head p { color: #eef3f8; }
/* Cian claro para el rótulo: 5,20:1 sobre el peor punto. El cian de la casa
   (#64e8d4) daba 4,28:1 y se quedaba corto en texto de 12px. */
.md-sec .eyebrow { color: #a9f6ea; }

/* ── Las tarjetas, en vidrio oscuro ───────────────────────────────────── */
.md-sec .mt-card {
  /* 58%: con el velo del medio al 54%, deja el texto blanco en 5,10:1 y el
     tenue en 4,57:1 sobre el punto más brillante de la foto — y por debajo
     del vidrio se sigue viendo la ciudad. */
  background: rgba(4,14,26,.58);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
              inset 0 3px 0 var(--mk),
              0 18px 44px rgba(0,0,0,.42);
}
.md-sec .mt-card:hover {
  background: rgba(6,20,34,.66);
  border-color: rgba(169,246,234,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3),
              inset 0 3px 0 var(--mk),
              0 26px 60px rgba(0,0,0,.5);
}
/* Texto blanco: 5,03:1 sobre el peor punto. El tenue va en #eef3f8, que da
   4,50:1 — el gris de la versión clara daba 3,76:1 y no llegaba. */
.md-sec .mt-lema { color: #eef3f8; }
.md-sec .mt-pie  { border-top-color: rgba(255,255,255,.18); }
.md-sec .mt-pie b { color: #fff; }
/* El cian solo en el icono: como elemento de interfaz le basta 3:1, y a
   3,82:1 pasa. En texto de 13px no habría pasado. */
.md-sec .mt-pie i, .md-sec .mt-pie svg { color: #8ff2e2; }

/* ── La placa del logo ────────────────────────────────────────────────────
   Sigue siendo una placa, no vidrio a secas: seis de las siete marcas traen
   el logo en tonos oscuros o medios y sobre vidrio oscuro se borrarían. Lo
   que cambia es el acabado — borde luminoso y brillo arriba— para que se lea
   como vidrio esmerilado y no como un rectángulo blanco pegado encima. */
.md-sec .mt-logo {
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(240,247,252,.92));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 #fff,
              0 10px 24px -12px rgba(0,0,0,.6),
              0 0 0 1px rgba(4,14,26,.12);
}
/* Placa oscura: para una marca cuyo logo sea claro y NO tenga repintado.
   Hoy no la usa nadie —Tacx, la única con `logo_placa: 'oscura'`, se sirve
   repintada y va sobre placa clara como las demás— pero queda por si entra
   una marca con logo claro y sin variante mono. */
.md-sec .mt-logo-oscura {
  background: linear-gradient(180deg, rgba(9,28,46,.72), rgba(4,14,26,.82));
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
              0 10px 24px -12px rgba(0,0,0,.7);
}
.md-sec .mt-card:hover .mt-logo { transform: translateY(-2px) scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .md-fondo { transform: none !important; }
}
@media (max-width: 720px) {
  /* En pantallas chicas el fondo se queda quieto: el parallax no aporta y
     el desenfoque de una imagen grande sí se nota en la batería. */
  .md-fondo { filter: blur(4px); transform: none !important; }
}

/* ── El encabezado en pantallas chicas ──────────────────────────────────
   Sin la tarjeta de la derecha —se oculta bajo 1000px— el texto queda solo
   en la columna y alineado a la izquierda se ve descolgado. Centrado ocupa
   el ancho de forma pareja, que es como se lee un encabezado en un teléfono. */
@media (max-width: 700px) {
  .hero-in { padding-block: 40px 44px; gap: 26px; }
  /* La columna del texto es un <div> sin clase — el primer hijo de .hero-in.
     Escribir `.hero-txt` no centraba nada porque esa clase no existe. */
  .hero-in > div:first-child { text-align: center; }
  .hero h1 { font-size: clamp(29px, 8.2vw, 40px); }
  /* Se acorta el titular para que no queden viudas de una palabra sola. */
  .hero h1, .hero .lead { text-wrap: balance; }
  .hero .lead { max-width: 34ch; margin-inline: auto; }
  .hero-cta { justify-content: center; gap: 10px; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
  .hero-stats { justify-content: center; gap: 26px; margin-top: 30px; }
  .hero .eyebrow { display: block; }
}
@media (max-width: 400px) {
  /* A este ancho los dos botones en fila quedan estrechísimos: uno por línea. */
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .hero-stats { gap: 18px; }
  .hero-stats b { font-size: 22px; }
}

/* ── «Nuestras marcas»: mismo vidrio, la animación sin tocar ────────────
   La marquesina, su velocidad, la pausa al pasar el ratón y el desvanecido
   de los bordes quedan exactamente como estaban. Lo único que cambia es el
   fondo de la sección y el acabado de las tarjetas. */
.md-sec-2 { padding: clamp(48px, 6vw, 84px) 0 clamp(52px, 6.5vw, 92px); }
/* La misma foto encuadrada en otro sitio: se lee como otra vista de la misma
   ciudad y no como la misma imagen repetida dos veces en la página. */
.md-sec-2 .md-fondo { background-position: 78% 38%; }

/* Las tarjetas de la marquesina llevan el vidrio más denso que las grandes:
   su texto es de 12–14px y necesita 4,5:1. Medido sobre el punto más
   brillante de la foto — blanco 6,77:1 y el verde del conteo 4,82:1. Con el
   58% de las tarjetas grandes, ese verde se quedaba en 3,4:1. */
.md-sec-2 .brand-card {
  background: rgba(4,14,26,.72);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 30px rgba(0,0,0,.34);
  color: #fff;
}
.md-sec-2 .brand-card:hover {
  background: rgba(6,20,34,.8);
  border-color: rgba(169,246,234,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 18px 40px rgba(0,0,0,.44);
  color: #fff;
}
.md-sec-2 .brand-name { color: #fff; }
/* Verde claro, no el de la casa: #00a86b sobre este vidrio da 1,66:1. */
.md-sec-2 .brand-card b { color: #86efac; }

/* Placa clara detrás de cada logo. No es decoración: los logos vienen de la
   base y son arbitrarios —de once medidos, diez traen su fondo INCRUSTADO
   (casi todos blanco) y uno es transparente con tinta oscura—. Sobre vidrio
   oscuro, el transparente desaparecería y los opacos se verían como
   rectángulos sueltos. Con la placa, los que ya traen blanco lo continúan y
   el transparente queda legible. */
.md-sec-2 .brand-logo {
  background: var(--s4-surface, #fff); padding: 5px 9px; border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 6px 16px -8px rgba(0,0,0,.7);
  height: 40px; box-sizing: content-box;
}

/* El desvanecido de los bordes de la marquesina sigue igual: sobre el fondo
   oscuro deja ver la foto en vez del blanco de antes, que es lo que se
   quiere. */

/* ═══════════════════════════════════════════════════════════════════════════
   MEDIOS
   Videos, noticias y anuncios — todo se carga desde el CRM del ERP.
   La cabecera reusa el mismo fondo y velo de las zonas de marcas.
   ═══════════════════════════════════════════════════════════════════════════ */
.md-sec-3 { padding: clamp(40px, 5vw, 66px) 0 clamp(30px, 4vw, 46px); }
.md-sec-3 .md-fondo { background-position: 28% 62%; }
.me-rail {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  margin-top: clamp(20px, 3vw, 30px);
}
.me-rail .ac-t {
  color: rgba(255,255,255,.78); border-radius: 12px;
  border-bottom: 2.5px solid transparent;
}
.me-rail .ac-t:hover { color: #fff; background: rgba(255,255,255,.1); }
.me-rail .ac-t.on {
  color: #fff; background: rgba(255,255,255,.14);
  border-bottom-color: #a9f6ea;
}
.me-rail .ac-t em { background: rgba(255,255,255,.16); color: #fff; }
.me-rail .ac-t.on em { background: rgba(169,246,234,.24); color: #d8fcf7; }

/* ── Videos ─────────────────────────────────────────────────────────────
   Las descripciones vienen del CRM y son de largos MUY distintos —una trae
   dos líneas y otra un párrafo de quince—. Sin recortarlas, la rejilla queda
   con tarjetas de alturas dispares y se ve rota. Se recortan a tres líneas y
   todas las tarjetas quedan del mismo alto; el texto completo está en el
   popup, donde sí hay sitio para leerlo. */
.me-grupo { margin-bottom: 38px; }
.me-h3 {
  display: flex; align-items: center; gap: 9px; margin: 0 0 18px;
  font-family: var(--font); font-size: 17px; font-weight: 800; color: var(--ink);
}
.me-h3 i, .me-h3 svg { width: 18px; height: 18px; color: var(--teal); }
.me-h3 em {
  font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--muted);
  background: var(--bg-2); border-radius: 999px; padding: 2px 9px;
}
.me-videos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: 20px; align-items: stretch;
}

/* La tarjeta entera es el botón: en una tarjeta de video todo el mundo hace
   clic donde le queda más cerca, no solo en la miniatura. */
.me-vid {
  display: flex; flex-direction: column; text-align: left;
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden; cursor: pointer;
  font: inherit; color: inherit; box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.2,.8,.3,1),
              box-shadow .22s, border-color .22s;
}
.me-vid:hover, .me-vid:focus-visible {
  transform: translateY(-5px); border-color: rgba(10,99,230,.32);
  box-shadow: 0 18px 42px rgba(10,60,120,.18);
}
.me-vid:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.me-vid:active { transform: translateY(-1px); }

.me-vid-play {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  background: #0a1420; overflow: hidden; flex: 0 0 auto;
}
.me-vid.vertical .me-vid-play { aspect-ratio: 4 / 5; }
.me-vid-play img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.8,.3,1);
}
.me-vid:hover .me-vid-play img { transform: scale(1.06); }
/* Un velo abajo para que el borde de la miniatura no choque en seco con el
   blanco de la tarjeta, y para que las píldoras se lean sobre cualquier foto. */
.me-vid-sombra {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,14,26,.34) 0%, transparent 32%,
              transparent 62%, rgba(4,14,26,.42) 100%);
}
.me-vid-sin { display: grid; place-items: center; height: 100%; color: #46617d; }
.me-vid-sin i, .me-vid-sin svg { width: 44px; height: 44px; }

.me-vid-ic {
  position: absolute; inset: 0; margin: auto; width: 62px; height: 62px;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: var(--blue);
  box-shadow: 0 10px 30px rgba(0,0,0,.42);
  transition: transform .24s cubic-bezier(.2,.8,.3,1), background .24s, color .24s;
}
.me-vid-ic i, .me-vid-ic svg {
  width: 24px; height: 24px; margin-left: 3px; fill: currentColor;
}
.me-vid:hover .me-vid-ic {
  transform: scale(1.12); background: var(--blue); color: #fff;
}
.me-vid-plat, .me-vid-cat {
  position: absolute; top: 11px; padding: 4px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: rgba(4,14,26,.74); color: #fff;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.me-vid-plat { right: 11px; text-transform: capitalize; }
.me-vid-cat  { left: 11px; text-transform: uppercase; letter-spacing: .06em; }

.me-vid-txt {
  display: flex; flex-direction: column; gap: 7px;
  padding: 16px 18px 18px; flex: 1 1 auto;
}
.me-vid-tit {
  font-family: var(--font); font-size: 15.5px; font-weight: 700;
  color: var(--ink); line-height: 1.35;
  /* Dos líneas como mucho: un título de cuatro líneas empuja la descripción
     fuera del recorte y deja la tarjeta sin resumen. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.me-vid-desc {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.me-vid-ver {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto;
  padding-top: 10px; font-size: 13px; font-weight: 700; color: var(--blue);
}
.me-vid-ver i, .me-vid-ver svg {
  width: 15px; height: 15px; transition: transform .18s;
}
.me-vid:hover .me-vid-ver i, .me-vid:hover .me-vid-ver svg { transform: translateX(4px); }

/* ── El popup del video ───────────────────────────────────────────────── */
.me-modal-video { max-width: 1060px; }
.me-cab h3 {
  /* El título puede ser largo; que no empuje los botones fuera de la caja. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.me-player {
  position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000;
}
/* Un reel vertical en una caja de 16:9 sale con dos franjas negras enormes.
   Se le da su proporción y se limita el alto para que quepa en la pantalla. */
.me-player.vertical {
  aspect-ratio: 9 / 16; max-height: 74vh; margin: 0 auto; width: auto;
}
.me-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.me-vid-info p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.65; }

@media (max-width: 560px) {
  .me-videos { grid-template-columns: 1fr; }
  .me-player.vertical { max-height: 62vh; }
}

/* ── Noticias ─────────────────────────────────────────────────────────── */
.me-noticias { display: grid; gap: 18px; }
.me-not {
  display: grid; grid-template-columns: 220px 1fr; gap: 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.me-not.destacada { border-left: 3px solid var(--blue); }
.me-not-foto {
  border: 0; padding: 0; background: var(--bg-2); cursor: zoom-in;
  min-height: 170px; overflow: hidden;
}
.me-not-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-not-txt { padding: 20px 22px 20px 0; display: flex; flex-direction: column; gap: 8px; }
.me-not:not(:has(.me-not-foto)) .me-not-txt { padding-left: 22px; }
.me-not:not(:has(.me-not-foto)) { grid-template-columns: 1fr; }
.me-not-meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}
.me-cat, .me-dest {
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
}
.me-cat { background: var(--bg-2); color: var(--ink-2); }
.me-dest { background: rgba(10,99,230,.12); color: var(--blue); }
.me-not-txt h4 {
  margin: 0; font-family: var(--font); font-size: 18px; font-weight: 800;
  color: var(--ink); line-height: 1.3;
}
.me-not-txt p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.me-mas {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--blue);
}
.me-mas i, .me-mas svg { width: 15px; height: 15px; transition: transform .16s; }
.me-mas:hover i, .me-mas:hover svg { transform: translateX(3px); }
.me-autor { font-size: 12.5px; color: var(--muted); margin-top: auto; }
.me-cuerpo-foto {
  width: 100%; border-radius: 14px; margin: 14px 0 18px; display: block;
}
.me-html { font-size: 15px; color: var(--ink-2); line-height: 1.7; }
.me-html img { max-width: 100%; height: auto; border-radius: 10px; }
.me-html h1, .me-html h2, .me-html h3 {
  font-family: var(--font); color: var(--ink); margin: 22px 0 10px;
}
.me-html a { color: var(--blue); }
.me-html table { width: 100%; overflow-x: auto; display: block; }

/* ── Anuncios ─────────────────────────────────────────────────────────── */
.me-banners {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.me-ban {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); min-height: 200px;
  display: flex; flex-direction: column;
}
/* El lateral es 300×600 en el CRM: se le respeta la proporción alta. */
.me-ban.lateral { grid-row: span 2; }
.me-ban img { width: 100%; display: block; object-fit: cover; flex: 1 1 auto; }
.me-ban-txt { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 7px; }
.me-ban-sec {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  background: rgba(255,255,255,.7); border-radius: 999px; padding: 3px 9px;
}
.me-ban-txt h4 {
  margin: 0; font-family: var(--font); font-size: 17px; font-weight: 800;
  line-height: 1.3;
}
.me-ban-txt p { margin: 0; font-size: 13.5px; line-height: 1.55; opacity: .9; }
.me-ban-txt .btn { align-self: flex-start; margin-top: 5px; }

@media (max-width: 700px) {
  .me-not { grid-template-columns: 1fr; }
  .me-not-foto { min-height: 190px; }
  .me-not-txt { padding: 18px 20px 20px; }
  .me-ban.lateral { grid-row: auto; }
}

/* El SEGUNDO plano del parallax. Se mueve más lento que la foto (0,14 contra
   0,34) y por eso se lee como algo más lejano; con una sola capa el efecto es
   una foto deslizándose, no profundidad. Es puro degradado: no pesa nada y no
   pide otra descarga. */
.md-brillo {
  position: absolute; left: -10%; right: -10%; top: -20%; height: 140%;
  z-index: -1; pointer-events: none; will-change: transform, opacity;
  background:
    radial-gradient(46% 38% at 22% 30%, rgba(100,232,212,.22), transparent 70%),
    radial-gradient(40% 34% at 78% 68%, rgba(10,99,230,.28), transparent 72%),
    radial-gradient(30% 26% at 55% 12%, rgba(169,246,234,.14), transparent 74%);
}
@media (prefers-reduced-motion: reduce) {
  .md-brillo { transform: none !important; opacity: .55 !important; }
}

/* ── Burbujas del asistente: quién contesta se ve de un vistazo ──────────
   El icono va dentro de la burbuja y no fuera para que el bloque siga siendo
   uno solo al ajustarse el texto. `.msg` ya tiene el padding, así que acá
   solo se organiza el par icono + texto. */
.msg.bot, .msg.asesor { display: flex; align-items: flex-start; gap: 9px; }
.msg.bot.typing { display: flex; gap: 4px; }   /* los puntitos, sin icono */
.msg-ic {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
}
.msg-ic i, .msg-ic svg { width: 13px; height: 13px; }
.msg-tx { min-width: 0; }
.msg-tx b { font-weight: 700; }

.msg.bot .msg-ic { background: rgba(11,184,166,.16); color: var(--teal); }

/* La respuesta de una persona: otro color, para que no se confunda con el
   asistente. Verde de la casa, que es el que el sitio usa para «esto lo hizo
   alguien de SATEC». */
.msg.asesor {
  align-self: flex-start; border-bottom-left-radius: 5px;
  background: #eafaf2; border: 1px solid #bfe9d5; color: #0b4a33;
  box-shadow: var(--shadow-sm);
}
.msg.asesor .msg-ic { background: rgba(0,168,107,.18); color: var(--green); }
.msg-quien {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--green); margin-bottom: 3px;
}

/* Enlace dentro de una burbuja del asistente. Subrayado, para que se vea que
   es un enlace incluso en la burbuja verde del asesor. */
.msg-link {
  color: var(--blue); font-weight: 700; text-decoration: underline;
  text-underline-offset: 2px;
}
.msg.asesor .msg-link { color: #0b5238; }