/* ═══════════════════════════════════════════════════════════════════════
   SATEC v3 «Claro» · marcas, marca-tema, medios y sucursales
   GUBOS Developer Costa Rica · BCom A.i Xpert — ver DISENO_V3.md

   Todo va acotado a la página (.v3-mkp, .mtema, .v3-me-*, .v3-su) para no
   pisar la tienda, que usa los mismos componentes de filtros con su propia
   hoja (v3-tienda.css carga ANTES que esta).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Encabezado de página compartido ───────────────────────────────────── */
.v3-mkp, .v3-su, .v3-me-body { padding: 0 0 56px; }
.v3-mkp-head, .v3-su-head, .v3-me-hero {
  position: relative; overflow: hidden; padding: 40px 0 30px; margin-bottom: 26px;
  background:
    radial-gradient(760px 300px at 94% -20%, rgba(10,99,230,.09), transparent 62%),
    radial-gradient(620px 300px at -6% 120%, rgba(0,168,107,.10), transparent 62%),
    linear-gradient(180deg, var(--s4-surface, #fff) 0%, var(--v3-bg) 100%);
  border-bottom: 1px solid var(--v3-line); }
.v3-mkp-head::before, .v3-su-head::before, .v3-me-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(11,27,46,.08) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000, transparent 90%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); }
.v3-mkp-head > .wrap, .v3-su-head > .wrap, .v3-me-hero > .wrap { position: relative; }
.v3-mkp-h1, .v3-su-h1, .v3-me-h1 {
  font: 700 clamp(28px, 3.4vw, 42px)/1.1 var(--v3-f-head); letter-spacing: -.03em;
  color: var(--v3-ink); margin: 8px 0 8px; }
.v3-mkp-lead, .v3-su-lead, .v3-me-lead { margin: 0; max-width: 640px; color: var(--v3-muted); font-size: 16px; }

/* Selector de orden con rótulo */
.v3-orden { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.v3-orden > span { font-size: 13px; font-weight: 600; color: var(--v3-muted); white-space: nowrap; }
.v3-orden select.chip { height: 42px; padding: 0 38px 0 14px; border-radius: 12px; cursor: pointer;
  font: 600 14px var(--v3-f-body); color: var(--v3-ink); background-color: var(--s4-surface, #fff);
  border: 1.5px solid var(--v3-line-2); box-shadow: none;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235D6B7E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; transition: border-color .15s; }
.v3-orden select.chip:hover { border-color: var(--v3-green); }

.v3-mas { text-align: center; margin-top: 30px; }
.v3-mas .btn { min-width: 240px; justify-content: center; }

/* ═══ Panel de filtros claro (Marcas y página de marca) ═════════════════ */
/* v3-tienda.css define .filtros-panel SIN acotar (alto máximo con recorte y,
   bajo 820px, hoja lateral fija). Estas páginas no tienen esa hoja ni su
   botón: acá el panel vuelve a ser un bloque normal. */
:is(.v3-mkp, .mtema) .tienda-layout aside.filtros-panel {
  display: block; max-height: none; overflow: visible; }
@media (max-width: 820px) {
  :is(.v3-mkp, .mtema) .tienda-layout aside.filtros-panel {
    position: static !important; z-index: auto; width: auto; transform: none; visibility: visible;
    border: 1px solid var(--v3-line); border-radius: var(--v3-r-lg); box-shadow: none; transition: none; }
  :is(.v3-mkp, .mtema) .fp-scroll { max-height: 220px; overflow-y: auto; }
  :is(.v3-mkp, .mtema) .fp-limpiar { padding: 0 14px; }
}
:is(.v3-mkp, .mtema) .filtros-panel {
  position: sticky; top: 168px; padding: 18px 14px 16px; border-radius: var(--v3-r-lg);
  background: var(--s4-surface, #fff); border: 1px solid var(--v3-line); box-shadow: none; }
:is(.v3-mkp, .mtema) .filtros-panel .fp-bloque { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--v3-line); }
:is(.v3-mkp, .mtema) .filtros-panel .fp-bloque:last-of-type { border-bottom: 0; padding-bottom: 0; }
:is(.v3-mkp, .mtema) .filtros-panel h5 {
  font: 800 12px var(--v3-f-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--v3-ink); margin: 0 0 12px 4px; }

:is(.v3-mkp, .mtema) .filt { color: var(--v3-ink-2); font-size: 13.5px; font-weight: 600; padding: 8px 10px; border-radius: 10px; }
:is(.v3-mkp, .mtema) .filt .fc { color: var(--v3-muted); background: var(--v3-bg-2); font-size: 11.5px; }
:is(.v3-mkp, .mtema) .filt:hover { background: var(--v3-bg); color: var(--v3-ink); transform: none; }
:is(.v3-mkp, .mtema) .filt:hover .fc { background: color-mix(in srgb, #E3EAF2 var(--s4-mixp, 100%), var(--s4-surface, #fff)); color: var(--v3-ink-2); }
:is(.v3-mkp, .mtema) .filt:focus-visible { outline: 2px solid rgba(0,168,107,.55); outline-offset: 1px; }
:is(.v3-mkp, .mtema) .filt.on {
  background: var(--v3-green-50); color: var(--v3-green-d); font-weight: 700;
  border-color: rgba(0,168,107,.28); box-shadow: none; padding-left: 24px; }
:is(.v3-mkp, .mtema) .filt.on::before { background: var(--v3-green); box-shadow: 0 0 0 3px rgba(0,168,107,.18); }
:is(.v3-mkp, .mtema) .filt.on .fc { background: var(--s4-surface, #fff); color: var(--v3-green-d); }
:is(.v3-mkp, .mtema) .filt.on:hover { background: color-mix(in srgb, #DDF3E9 var(--s4-mixp, 100%), var(--s4-surface, #fff)); }
:is(.v3-mkp, .mtema) .filt-padre.on { padding-left: 4px; }
:is(.v3-mkp, .mtema) .filt-padre.on::before { display: none; }

:is(.v3-mkp, .mtema) .fp-caret { color: var(--v3-muted); }
:is(.v3-mkp, .mtema) .fp-caret:hover { background: var(--v3-bg-2); color: var(--v3-ink); }
:is(.v3-mkp, .mtema) .filt.on .fp-caret { color: var(--v3-green-d); }
:is(.v3-mkp, .mtema) .filt.on .fp-caret:hover { background: var(--s4-surface, #fff); color: var(--v3-green-d); }
:is(.v3-mkp, .mtema) .fp-hijos:not(:empty) { border-left: 1.5px solid var(--v3-line-2); }
:is(.v3-mkp, .mtema) .filt-hijo .fn { color: var(--v3-ink-2); }
:is(.v3-mkp, .mtema) .filt-hijo:hover .fn { color: var(--v3-ink); }
:is(.v3-mkp, .mtema) .filt-hijo.on .fn { color: var(--v3-green-d); }
:is(.v3-mkp, .mtema) .fp-cargando { color: var(--v3-muted); }

:is(.v3-mkp, .mtema) .fp-scroll, :is(.v3-mkp, .mtema) .fp-arbol { scrollbar-color: #C9D3DF transparent; }
:is(.v3-mkp, .mtema) .fp-scroll::-webkit-scrollbar-thumb,
:is(.v3-mkp, .mtema) .fp-arbol::-webkit-scrollbar-thumb { background: #C9D3DF; }

:is(.v3-mkp, .mtema) .fp-buscar svg { color: var(--v3-muted); left: 12px; width: 16px; height: 16px; }
:is(.v3-mkp, .mtema) .fp-buscar input,
:is(.v3-mkp, .mtema) .fp-precio input {
  height: 40px; border-radius: 10px; font: 500 14px var(--v3-f-body); color: var(--v3-ink);
  background: var(--v3-bg); border: 1.5px solid var(--v3-line); }
:is(.v3-mkp, .mtema) .fp-buscar input { padding: 0 12px 0 36px; }
:is(.v3-mkp, .mtema) .fp-precio input { padding: 0 10px; font-variant-numeric: tabular-nums; }
:is(.v3-mkp, .mtema) .fp-buscar input::placeholder,
:is(.v3-mkp, .mtema) .fp-precio input::placeholder { color: #8391A3; }
:is(.v3-mkp, .mtema) .fp-buscar input:focus,
:is(.v3-mkp, .mtema) .fp-precio input:focus { background: var(--s4-surface, #fff); border-color: #93B8F5; box-shadow: 0 0 0 3px rgba(10,99,230,.14); }
:is(.v3-mkp, .mtema) .fp-precio span { color: var(--v3-muted); font-size: 11px; }
:is(.v3-mkp, .mtema) .fp-nota { color: var(--v3-muted); font-size: 12px; }

:is(.v3-mkp, .mtema) .fp-limpiar {
  height: 42px; padding: 0 14px; border-radius: 12px; font: 700 13.5px var(--v3-f-body);
  color: var(--v3-ink-2); background: var(--s4-surface, #fff); border: 1.5px solid var(--v3-line-2); }
:is(.v3-mkp, .mtema) .fp-limpiar:hover { color: var(--v3-green-d); border-color: var(--v3-green); background: var(--s4-surface, #fff); }

/* Chips de filtros activos */
:is(.v3-mkp, .mtema) .fa-chip { height: 32px; padding: 0 12px 0 10px; font: 700 13px var(--v3-f-body);
  color: var(--v3-green-d); background: var(--v3-green-50); border: 1px solid rgba(0,168,107,.28); }
:is(.v3-mkp, .mtema) .fa-chip:hover { background: color-mix(in srgb, #DDF3E9 var(--s4-mixp, 100%), var(--s4-surface, #fff)); border-color: rgba(0,168,107,.5); color: color-mix(in srgb, #006B45, #fff var(--s4-lift, 0%)); }
:is(.v3-mkp, .mtema) .fa-chip.fa-todo { color: var(--v3-muted); background: var(--s4-surface, #fff); border-color: var(--v3-line-2); }
:is(.v3-mkp, .mtema) .fa-chip.fa-todo:hover { color: color-mix(in srgb, #B42E1A, #fff var(--s4-lift, 0%)); border-color: rgba(240,83,58,.4); background: var(--v3-coral-50); }

/* ═══ /marcas ═══════════════════════════════════════════════════════════ */
.v3-mkp .filtros-activos { margin-top: 14px; }
.v3-mkp-barra { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.v3-mkp-cuenta { margin: 0; font-weight: 700; color: var(--v3-ink-2); font-variant-numeric: tabular-nums; }
.v3-mkp-cuenta:empty::before { content: '\00a0'; }
.v3-mkp-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 26px; align-items: start; }
.v3-mkp-res, .v3-mt-res { min-width: 0; }

/* ═══ Página de una marca ═══════════════════════════════════════════════ */
.mtema { padding-top: 0; padding-bottom: 20px; }
.v3-mt-hero { position: relative; overflow: hidden; padding: 48px 0 52px; margin-bottom: 44px;
  background:
    radial-gradient(820px 420px at 100% -10%, color-mix(in srgb, var(--mk) 16%, transparent), transparent 64%),
    radial-gradient(620px 360px at -8% 120%, color-mix(in srgb, var(--mk2) 12%, transparent), transparent 62%),
    linear-gradient(180deg, var(--s4-surface, #fff) 0%, var(--v3-bg) 100%);
  border-bottom: 1px solid var(--v3-line); }
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .v3-mt-hero { background: linear-gradient(180deg, var(--s4-surface, #fff) 0%, var(--v3-bg) 100%); }
}
.v3-mt-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(11,27,46,.08) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); }
/* Un filo del color de la marca al pie del encabezado. */
.v3-mt-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--mk), var(--mk2) 60%, transparent); }
.v3-mt-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.v3-mt-txt { min-width: 0; }
.v3-mt-txt .eyebrow { display: block; margin-bottom: 18px; }

/* La placa del logo: blanca con borde (placa clara) u oscura (placa oscura,
   para logos claros como el cian de Tacx). La decide la ficha de la marca. */
.v3-mt-placa { display: inline-flex; align-items: center; justify-content: center;
  min-height: 84px; padding: 16px 26px; border-radius: var(--v3-r-lg); margin-bottom: 22px;
  background: var(--s4-surface, #fff); border: 1px solid var(--v3-line);
  box-shadow: 0 10px 28px -16px color-mix(in srgb, var(--mk) 60%, transparent), var(--v3-sh-1); }
.v3-mt-placa.placa-oscura { background: var(--s4-band, #0B1B2E); border-color: var(--v3-ink); }
.v3-mt-logo { display: block; height: 52px; width: auto; max-width: min(300px, 70vw); object-fit: contain; }
.v3-mt-lema { font: 700 clamp(30px, 4vw, 50px)/1.06 var(--v3-f-head); letter-spacing: -.035em;
  color: var(--v3-ink); margin: 0 0 14px; text-wrap: balance; }
.v3-mt-texto { margin: 0 0 24px; max-width: 560px; font-size: clamp(15.5px, 1.3vw, 17.5px); line-height: 1.6; color: var(--v3-ink-2); }
.v3-mt-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.v3-mt-acts .btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; }
.v3-mt-acts .btn i, .v3-mt-acts .btn svg { width: 18px; height: 18px; }
/* El conteo: pastilla blanca con el punto del color de la marca. */
.v3-mt-cuenta { display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 0; padding: 7px 14px;
  border-radius: 999px; background: var(--s4-surface, #fff); border: 1px solid var(--v3-line);
  font-size: 13.5px; font-weight: 700; color: var(--v3-ink-2); font-variant-numeric: tabular-nums; }
.v3-mt-cuenta::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mk); flex: 0 0 8px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk) 20%, transparent); }
.v3-mt-cuenta:empty { display: none; }

/* La ventana del vídeo. El degradado de la marca queda de fondo: es lo que
   se ve mientras carga, si YouTube no responde o si se pidió menos
   movimiento. El vídeo se agranda un poco para recortar los bordes del
   reproductor (título y subtítulos de YouTube). */
.v3-mt-media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--v3-r-xl); overflow: hidden;
  isolation: isolate; border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--mk) 65%, rgba(11,27,46,.6)), var(--v3-sh-2); }
.v3-mt-media-fondo { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(80% 90% at 85% 10%, color-mix(in srgb, var(--mk2) 80%, var(--s4-surface, var(--s4-surface, #fff))), transparent 60%),
    linear-gradient(140deg, var(--mk), color-mix(in srgb, var(--mk) 70%, #0B1B2E)); }
.v3-mt-media-fondo::after { content: ''; position: absolute; inset: 0; opacity: .35;
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px); background-size: 20px 20px; }
.v3-mt-media-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center; padding: 18px 28px;
  border-radius: var(--v3-r-lg); background: rgba(255,255,255,.94); box-shadow: 0 16px 40px -18px rgba(11,27,46,.6); }
.v3-mt-media-logo.placa-oscura { background: rgba(11,27,46,.88); }
.v3-mt-media-logo img { display: block; height: 44px; width: auto; max-width: 52vw; object-fit: contain; }
.v3-mt-video { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .8s ease; background: #0B1B2E; }
.v3-mt-video.listo { opacity: 1; }
/* El reproductor se dibuja 2,5 veces más grande y se reduce con `scale`: así
   los controles y rótulos que YouTube pinta encima quedan proporcionalmente
   pequeños, como en un fondo a pantalla completa, en vez de ocupar media
   ventana. Con `scale` por encima de 0,4 además se recortan los bordes. */
.v3-mt-video iframe { position: absolute; top: 50%; left: 50%; width: 280%; height: 250%; border: 0;
  transform: translate(-50%, -50%) scale(.46); }
@media (prefers-reduced-motion: reduce) { .v3-mt-video { display: none; } }

/* Bloques de la página */
.mtema .mtema-bloque { margin-bottom: 56px; }
.mtema .mtema-h2 { font: 700 clamp(22px, 2.4vw, 30px)/1.2 var(--v3-f-head); letter-spacing: -.025em; color: var(--v3-ink); margin: 0 0 20px; }
.mtema .mtema-h2::before { content: ''; display: block; width: 34px; height: 4px; border-radius: 4px; margin-bottom: 12px;
  background: linear-gradient(90deg, var(--mk), var(--mk2)); }
.mtema .mtema-barra { align-items: flex-end; margin-bottom: 16px; }
.mtema .mtema-barra .mtema-h2 { margin: 0; }
#mt-cat-sec, #mt-cats-sec { scroll-margin-top: 170px; }

/* Baldosas de categoría */
.mtema .mt-baldosas { gap: 16px; }
.mtema .mt-baldosa { border-radius: var(--v3-r-lg); border: 1px solid var(--v3-line); box-shadow: none; background: var(--s4-surface, #fff);
  transition: transform .22s var(--v3-ease), box-shadow .22s, border-color .22s; }
.mtema .mt-baldosa:hover { transform: translateY(-3px); box-shadow: var(--v3-sh-3); border-color: transparent; }
.mtema .mb-foto { background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--mk) 9%, var(--s4-surface, #fff)), #F8FAFC 72%); }
.mtema .mb-foto img { padding: 18px; mix-blend-mode: multiply; }
.mtema .mb-txt { border-top: 1px solid var(--v3-line); padding: 14px 16px 16px; }
.mtema .mb-txt b { font: 700 15px var(--v3-f-head); color: var(--v3-ink); letter-spacing: -.01em; }
.mtema .mb-txt em { color: var(--v3-muted); font-size: 13px; }
.mtema .mt-baldosa:hover .mb-txt b { color: color-mix(in srgb, var(--mk) 82%, color-mix(in srgb, #0B1B2E, #fff var(--s4-lift, 0%))); }

/* Catálogo: el panel toma el color de la marca para lo seleccionado. */
.v3-mt-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.mtema .filtros-activos { margin: 0 0 16px; }
.mtema .filtros-panel .filt.on { background: color-mix(in srgb, var(--mk) 10%, #fff); color: color-mix(in srgb, var(--mk) 78%, color-mix(in srgb, #0B1B2E, #fff var(--s4-lift, 0%)));
  border-color: color-mix(in srgb, var(--mk) 30%, transparent); box-shadow: none; }
.mtema .filtros-panel .filt.on::before { background: var(--mk); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk) 20%, transparent); }
.mtema .filtros-panel .filt.on .fc { background: var(--s4-surface, #fff); color: color-mix(in srgb, var(--mk) 78%, color-mix(in srgb, #0B1B2E, #fff var(--s4-lift, 0%))); }
.mtema .filtros-panel .filt.on:hover { background: color-mix(in srgb, var(--mk) 15%, #fff); }
.mtema .fa-chip { color: color-mix(in srgb, var(--mk) 78%, color-mix(in srgb, #0B1B2E, #fff var(--s4-lift, 0%))); background: color-mix(in srgb, var(--mk) 10%, #fff);
  border-color: color-mix(in srgb, var(--mk) 30%, transparent); }
.mtema .fa-chip:hover { background: color-mix(in srgb, var(--mk) 16%, #fff); color: color-mix(in srgb, var(--mk) 70%, color-mix(in srgb, #0B1B2E, #fff var(--s4-lift, 0%))); }

/* Otras marcas: la misma tarjeta de la portada (.v3-brand, en v3.css). */
.v3-mt-otras { padding: 56px 0 24px; background: var(--s4-surface, #fff); border-top: 1px solid var(--v3-line); }
.v3-mt-brands { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ═══ Medios ════════════════════════════════════════════════════════════ */
.v3-me-hero { padding: 40px 0 0; margin-bottom: 0; }
.v3-me-hero-in { display: flex; flex-direction: column; }
.v3-me-tit { padding-bottom: 26px; }
/* Pestañas: subrayado verde, sobre el filo inferior del encabezado. */
.v3-me-hero .me-rail { justify-content: flex-start; gap: 4px; margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.v3-me-hero .me-rail::-webkit-scrollbar { display: none; }
.v3-me-hero .me-rail .ac-t { flex: 0 0 auto; height: 50px; padding: 0 16px; border-radius: 12px 12px 0 0; border: 0;
  border-bottom: 3px solid transparent; color: var(--v3-muted); background: transparent; font: 700 15px var(--v3-f-body); }
.v3-me-hero .me-rail .ac-t:hover { color: var(--v3-ink); background: rgba(11,27,46,.04); }
.v3-me-hero .me-rail .ac-t.on { color: var(--v3-ink); background: transparent; border-bottom-color: var(--v3-green); }
.v3-me-hero .me-rail .ac-t svg { width: 18px; height: 18px; }
.v3-me-hero .me-rail .ac-t:focus { outline: none; }
.v3-me-hero .me-rail .ac-t:focus-visible { outline: 2px solid var(--v3-green); outline-offset: -6px; border-radius: 12px; }
.v3-me-hero .me-rail .ac-t.on svg { color: var(--v3-green-d); }
.v3-me-hero .me-rail .ac-t em { background: var(--v3-bg-2); color: var(--v3-muted); font-size: 12px; padding: 1px 8px; }
.v3-me-hero .me-rail .ac-t.on em { background: var(--v3-green-50); color: var(--v3-green-d); }
.v3-me-body { padding-top: 32px; }

/* Tarjetas de video */
.v3-me-body .me-grupo { margin-bottom: 40px; }
.v3-me-body .me-h3 { font: 700 19px var(--v3-f-head); letter-spacing: -.015em; color: var(--v3-ink); }
.v3-me-body .me-h3 svg { color: var(--v3-green-d); }
.v3-me-body .me-h3 em { background: var(--v3-bg-2); color: var(--v3-muted); }
.v3-me-body .me-videos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 18px; }
.v3-me-body .me-vid { border-radius: var(--v3-r-lg); border: 1px solid var(--v3-line); box-shadow: none; background: var(--s4-surface, #fff);
  transition: transform .22s var(--v3-ease), box-shadow .22s, border-color .22s; }
.v3-me-body .me-vid:hover { transform: translateY(-3px); box-shadow: var(--v3-sh-3); border-color: transparent; }
.v3-me-body .me-vid:focus-visible { outline: 2px solid rgba(0,168,107,.6); outline-offset: 3px; transform: none; }
.v3-me-body .me-vid-play { background: var(--v3-bg-2); margin: 8px 8px 0; width: auto; border-radius: 14px; }
.v3-me-body .me-vid-sombra { background: linear-gradient(180deg, rgba(11,27,46,.18) 0%, transparent 30%, transparent 70%, rgba(11,27,46,.22) 100%); }
.v3-me-body .me-vid-sin { color: var(--v3-muted); }
.v3-me-body .me-vid-ic { width: 56px; height: 56px; background: rgba(255,255,255,.96); color: var(--v3-green-d);
  box-shadow: 0 10px 26px -8px rgba(11,27,46,.55); }
.v3-me-body .me-vid-ic svg { width: 22px; height: 22px; }
.v3-me-body .me-vid:hover .me-vid-ic { background: var(--v3-green); color: #fff; transform: scale(1.08); }
.v3-me-body .me-vid-plat, .v3-me-body .me-vid-cat { background: rgba(255,255,255,.94); color: var(--v3-ink); font-weight: 800; border-radius: 8px; }
.v3-me-body .me-vid-txt { padding: 14px 16px 16px; gap: 6px; }
.v3-me-body .me-vid-tit { font: 700 16px/1.35 var(--v3-f-head); letter-spacing: -.01em; color: var(--v3-ink); }
.v3-me-body .me-vid-desc { color: var(--v3-muted); font-size: 14px; }
.v3-me-body .me-vid-ver { color: var(--v3-green-d); font-size: 14px; }

/* Noticias */
.v3-me-body .me-not { border-radius: var(--v3-r-lg); border: 1px solid var(--v3-line); box-shadow: none; background: var(--s4-surface, #fff); }
.v3-me-body .me-not.destacada { border-left: 4px solid var(--v3-green); }
.v3-me-body .me-not-foto { background: var(--v3-bg-2); }
.v3-me-body .me-not-txt h4 { font: 700 19px/1.3 var(--v3-f-head); letter-spacing: -.015em; }
.v3-me-body .me-not-txt p { color: var(--v3-ink-2); font-size: 15px; }
.v3-me-body .me-not-meta { color: var(--v3-muted); font-size: 13px; }
.v3-me-body .me-cat { background: var(--v3-bg-2); color: var(--v3-ink-2); }
.v3-me-body .me-dest { background: var(--v3-green-50); color: var(--v3-green-d); }
.v3-me-body .me-mas { color: var(--v3-green-d); font-size: 14px; }
.v3-me-body .me-mas:hover { color: var(--v3-ink); }
.v3-me-body .me-autor { color: var(--v3-muted); }

/* Anuncios */
.v3-me-body .me-banners { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.v3-me-body .me-ban { border-radius: var(--v3-r-lg); border: 1px solid var(--v3-line); box-shadow: none; background: var(--s4-surface, #fff); }
.v3-me-body .me-ban-sec { background: var(--v3-bg-2); color: var(--v3-ink-2); }
.v3-me-body .me-ban-txt h4 { font: 700 18px/1.3 var(--v3-f-head); }
/* Tarjeta de anuncio: la miniatura del video arriba (16:9) y el texto en
   la tarjeta, siempre en tinta del sitio. Los colores del banner son para el
   hero; aquí dejaban el título negro sobre negro. */
.v3-me-body .me-ban { min-height: 0; transition: transform .25s var(--v3-ease), box-shadow .25s; }
.v3-me-body .me-ban:hover { transform: translateY(-3px); box-shadow: var(--v3-sh-3, 0 18px 44px -12px rgba(11,27,46,.2)); }
.v3-me-body .me-ban-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0;
  overflow: hidden; background: #0B1220; cursor: pointer; }
.v3-me-body div.me-ban-media { cursor: default; }
.v3-me-body .me-ban-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--v3-ease); }
.v3-me-body .me-ban:hover .me-ban-media img { transform: scale(1.05); }
.v3-me-body .me-ban-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35)); pointer-events: none; }
.v3-me-body .me-ban-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%;
  background: rgba(255,255,255,.95); color: #0B1220; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.55); transition: transform .25s var(--v3-ease), background .2s, color .2s; }
.v3-me-body .me-ban-play svg { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }
.v3-me-body .me-ban-media:hover .me-ban-play, .v3-me-body .me-ban-media:focus-visible .me-ban-play { transform: scale(1.08); background: var(--v3-green); color: #fff; }
.v3-me-body .me-ban-media:focus-visible { outline: 3px solid var(--v3-green); outline-offset: -3px; }
.v3-me-body .me-ban-txt { padding: 16px 18px 18px; color: var(--v3-ink); }
.v3-me-body .me-ban-txt h4 { color: var(--v3-ink); margin: 0; }
.v3-me-body .me-ban-txt p { color: var(--v3-muted); opacity: 1; }
.v3-me-body .me-ban-txt .btn { display: inline-flex; align-items: center; gap: 8px; }
.v3-me-body .me-ban-txt .btn svg { width: 16px; height: 16px; }

/* Vacío */
.v3-me-body .mc-vacio { background: var(--s4-surface, #fff); border: 1px dashed var(--v3-line-2); border-radius: var(--v3-r-lg); }
.v3-me-body .mc-vacio .mv-ic { background: var(--v3-green-50); color: var(--v3-green-d); border-radius: 18px; }
.v3-me-body .mcc-cargando { color: var(--v3-muted); }

/* Popup del video y de la noticia (lo crea medios.html con id acm-me) */
#acm-me .acm { border-radius: var(--v3-r-lg); border: 1px solid var(--v3-line); box-shadow: var(--v3-sh-3); }
#acm-me .acm-cab h3 { font-family: var(--v3-f-head); }
#acm-me .acm-cab h3 svg { color: var(--v3-green-d); }
#acm-me .acm-x:hover { border-color: var(--v3-green); color: var(--v3-green-d); }
#acm-me .me-html a { color: var(--v3-blue-d); }

/* ═══ Sucursales ════════════════════════════════════════════════════════ */
.v3-su-cuenta { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 6px 13px; border-radius: 999px;
  background: var(--s4-surface, #fff); border: 1px solid var(--v3-line); font-size: 13.5px; font-weight: 700; color: var(--v3-ink-2); }
.v3-su-cuenta::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--v3-green); box-shadow: 0 0 0 3px rgba(0,168,107,.18); }
.v3-su-cuenta:empty { display: none; }

.v3-su-mapa-box { position: relative; margin-bottom: 40px; }
.v3-su .su-mapa { height: 440px; margin: 0; border-radius: var(--v3-r-xl); border: 1px solid var(--v3-line); box-shadow: var(--v3-sh-2); }
.v3-su-ayuda { position: absolute; left: 14px; bottom: 14px; z-index: 2; margin: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.95); border: 1px solid var(--v3-line);
  font-size: 13px; font-weight: 600; color: var(--v3-ink-2); box-shadow: var(--v3-sh-1); pointer-events: none; }
.v3-su-ayuda svg { width: 16px; height: 16px; color: var(--v3-green-d); }
.v3-su .leaflet-control-zoom { border: 1px solid var(--v3-line) !important; border-radius: 12px !important; overflow: hidden; box-shadow: var(--v3-sh-1) !important; }
.v3-su .leaflet-control-zoom a { width: 36px !important; height: 36px !important; line-height: 36px !important; color: var(--v3-ink) !important; }
.v3-su .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: var(--v3-sh-3); }
.v3-su .leaflet-popup-content { font: 500 13.5px/1.5 var(--v3-f-body); color: var(--v3-ink-2); margin: 14px 16px; }
.v3-su .leaflet-popup-content b { font: 700 15px var(--v3-f-head); color: var(--v3-ink); }
.v3-su .leaflet-popup-content a { color: var(--v3-green-d); font-weight: 700; }
.v3-su .leaflet-popup-content .pop-matriz { background: var(--v3-green-50); color: var(--v3-green-d); }

.v3-su .su-grid { gap: 40px; }
.v3-su .su-grupo-t { display: flex; align-items: center; gap: 10px; font: 700 clamp(20px, 2.2vw, 26px) var(--v3-f-head);
  letter-spacing: -.02em; border-bottom: 0; padding: 0; margin: 0 0 16px; }
.v3-su .su-grupo-t::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--v3-green); }
.v3-su .su-grupo:has(.es-garmin) .su-grupo-t::before { background: #0B7AC6; }
.v3-su .su-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.v3-su .su-card { padding: 20px; gap: 12px; min-width: 0; border-radius: var(--v3-r-lg); border: 1px solid var(--v3-line);
  box-shadow: none; background: var(--s4-surface, #fff); transition: transform .22s var(--v3-ease), box-shadow .22s, border-color .22s; }
.v3-su .su-card.es-ubicable:hover { transform: translateY(-3px); box-shadow: var(--v3-sh-3); border-color: transparent; }
.v3-su .su-card-hd { gap: 12px; padding-right: 0; }
.v3-su .su-card h3 { font: 700 17px/1.25 var(--v3-f-head); letter-spacing: -.015em; color: var(--v3-ink); min-width: 0; }
.v3-su .su-sig { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; font: 700 13.5px var(--v3-f-head);
  color: var(--v3-green-d); background: var(--v3-green-50); box-shadow: none; }
.v3-su .su-card.es-garmin .su-sig { color: color-mix(in srgb, #0866A8, #fff var(--s4-lift, 0%)); background: color-mix(in srgb, #E7F2FB var(--s4-mixp, 100%), var(--s4-surface, #fff)); }
.v3-su .su-dir { font-size: 14px; color: var(--v3-ink-2); gap: 8px; }
.v3-su .su-dir svg { color: var(--v3-muted); width: 16px; height: 16px; flex-basis: 16px; }

/* Horario: día en negrita y hora a la derecha, como una tablita. */
.v3-su .su-horas { gap: 0; border-radius: 12px; background: var(--v3-bg); border: 1px solid var(--v3-line); padding: 4px 12px; }
.v3-su .su-horas li { gap: 8px; padding: 7px 0; font-size: 14px; color: var(--v3-ink-2); font-variant-numeric: tabular-nums; }
.v3-su .su-horas li + li { border-top: 1px dashed var(--v3-line-2); }
.v3-su .su-horas li b { min-width: 42px; font-weight: 800; color: var(--v3-ink); }
.v3-su .su-horas li span { margin-left: auto; text-align: right; }
.v3-su .su-horas svg { color: var(--v3-green-d); width: 15px; height: 15px; flex-basis: 15px; }

.v3-su .su-links { flex-direction: column; gap: 6px; margin: 0; }
.v3-su .su-links a { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; border-radius: 0;
  font-size: 14.5px; font-weight: 700; color: var(--v3-ink); min-width: 0; overflow-wrap: anywhere; }
.v3-su .su-links a:nth-child(2) { font-weight: 500; color: var(--v3-ink-2); font-size: 14px; }
.v3-su .su-links a svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--v3-green-d); }
.v3-su .su-links a:hover { color: var(--v3-green-d); background: none; }

.v3-su .su-ir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 14px; border-top: 1px solid var(--v3-line); }
.v3-su .su-ir a { justify-content: center; height: 42px; padding: 0 12px; border-radius: 11px; font: 700 14px var(--v3-f-body);
  color: var(--v3-ink); background: var(--s4-surface, #fff); border: 1.5px solid var(--v3-line-2); }
.v3-su .su-ir a:hover { color: var(--v3-green-d); border-color: var(--v3-green); background: var(--s4-surface, #fff); }
.v3-su .su-ir a.su-ir-waze { color: #fff; background: var(--v3-green); border-color: var(--v3-green); }
.v3-su .su-ir a.su-ir-waze:hover { background: #00744D; border-color: #00744D; color: #fff; }
.v3-su .su-ir svg { width: 16px; height: 16px; }
.v3-su .su-ir .su-sinmapa { grid-column: 1 / -1; font-size: 12.5px; color: var(--v3-muted); }

/* Casa matriz: ancho de dos, etiqueta verde y tinte suave. */
.v3-su .su-card.es-matriz { background: linear-gradient(140deg, var(--s4-surface, #fff) 40%, var(--v3-green-50)); border-color: rgba(0,168,107,.35); box-shadow: none; }
.v3-su .su-card.es-matriz::before { top: 20px; bottom: 20px; background: var(--v3-green); }
.v3-su .su-card.es-matriz h3 { font-size: 20px; }
.v3-su .su-card.es-matriz .su-card-hd { padding-right: 130px; }
.v3-su .su-matriz-tag { top: 18px; right: 18px; background: var(--v3-green); box-shadow: none; font-family: var(--v3-f-body); letter-spacing: .08em; }
.v3-su .su-card.es-matriz .su-horas { background: rgba(255,255,255,.75); }

/* Compras empresariales: el único bloque oscuro, como la banda B2B de la portada. */
.v3-su-emp-sec { padding: 0 0 20px; }
.v3-su-emp-sec .su-emp { position: relative; overflow: hidden; padding: 40px; border-radius: var(--v3-r-xl);
  background: var(--s4-band, #0B1B2E); box-shadow: none; }
.v3-su-emp-sec .su-emp::before { content: ''; position: absolute; width: 520px; height: 520px; right: -140px; top: -240px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,168,107,.42), transparent); pointer-events: none; }
.v3-su-emp-sec .su-emp > * { position: relative; }
.v3-su-emp-sec .su-emp .eyebrow { color: #6EE7B7; }
.v3-su-emp-sec .su-emp h2 { color: #fff; font: 700 clamp(26px, 3vw, 36px)/1.15 var(--v3-f-head); letter-spacing: -.025em; margin: 8px 0 10px; }
.v3-su-emp-sec .su-emp p { color: #C9D6E6; }
.v3-su-emp-sec .su-emp-btn { padding: 14px 16px; border-radius: var(--v3-r); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); min-width: 0; }
.v3-su-emp-sec .su-emp-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(110,231,183,.5); transform: none; }
.v3-su-emp-sec .su-emp-btn svg { color: #6EE7B7; }
.v3-su-emp-sec .su-emp-btn em { color: #B8C7DA; }
.v3-su-emp-sec .su-emp-btn b { overflow-wrap: anywhere; }

/* ═══ Responsive ════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .v3-su .su-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .v3-mt-hero-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .v3-mt-media { aspect-ratio: 16 / 9; }
}
@media (max-width: 900px) {
  .v3-mkp-layout, .v3-mt-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 18px; }
  :is(.v3-mkp, .mtema) .filtros-panel { position: static; }
  .v3-mkp .fp-arbol { max-height: 260px; }
  .mtema .fp-scroll { max-height: 220px; }
}
@media (max-width: 760px) {
  .mtema .mt-baldosas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mtema .mb-txt { padding: 10px 12px 12px; }
  .mtema .mb-txt b { font-size: 14px; }
  .v3-su-emp-sec .su-emp { padding: 26px 20px; }
}
@media (max-width: 640px) {
  .v3-mkp-head, .v3-su-head { padding: 26px 0 22px; margin-bottom: 18px; }
  .v3-me-hero { padding-top: 26px; }
  .v3-me-tit { padding-bottom: 16px; }
  .v3-mkp-lead, .v3-su-lead, .v3-me-lead { font-size: 15px; }
  .v3-mkp-barra { gap: 10px; }
  .v3-orden { width: 100%; }
  .v3-orden select.chip { flex: 1; min-width: 0; }
  .v3-mt-hero { padding: 28px 0 32px; margin-bottom: 32px; }
  .v3-mt-txt .eyebrow { margin-bottom: 14px; }
  .v3-mt-placa { min-height: 66px; padding: 12px 18px; margin-bottom: 16px; }
  .v3-mt-logo { height: 38px; }
  .v3-mt-acts .btn { flex: 1 1 auto; justify-content: center; height: 46px; padding: 0 14px; }
  .v3-mt-media { border-radius: var(--v3-r-lg); }
  .v3-mt-media-logo img { height: 32px; }
  .mtema .mtema-bloque { margin-bottom: 40px; }
  .mtema .mtema-barra { align-items: stretch; flex-direction: column; }
  .v3-mt-otras { padding-top: 40px; }
  .v3-me-hero .me-rail .ac-t { padding: 0 12px; font-size: 14px; height: 46px; }
  .v3-su .su-mapa { height: 320px; border-radius: var(--v3-r-lg); }
  .v3-su-ayuda { display: none; }
  .v3-su .su-cards { grid-template-columns: minmax(0, 1fr); }
  .v3-su .su-card.es-matriz { grid-column: auto; }
  .v3-su .su-card.es-matriz .su-card-hd { padding-right: 0; margin-top: 30px; }
  .v3-su .su-matriz-tag { top: 16px; left: 20px; right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-me-body .me-vid:hover, .mtema .mt-baldosa:hover, .v3-su .su-card.es-ubicable:hover { transform: none; }
}
/* Las tres pestañas de Medios caben a 375 px sin desplazarse. */
@media (max-width: 480px) {
  .v3-me-hero .me-rail { gap: 0; }
  .v3-me-hero .me-rail .ac-t { flex: 1 1 0; justify-content: center; gap: 6px; padding: 0 6px; font-size: 13.5px; }
  .v3-me-hero .me-rail .ac-t svg { display: none; }
}