/* BullGreenCapital · portada (rediseño 2026-11). Un solo sistema visual: negro y blanco, titulares grandes, botones en píldora y mucho aire.
   El verde lima queda solo como acento de marca (logo, "en vivo", plan recomendado). Verde y rojo, solo para sube y baja.
   Tema oscuro por defecto; el claro invierte los mismos tokens. Tipografía: Host Grotesk (licencia OFL, alojada en fuentes/). */

@font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(fuentes/host-grotesk-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(fuentes/host-grotesk-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --fondo: #000; --alt: #0d0d0d; --card: #121212; --linea: #2b2b2b; --linea2: #454545;
  --txt: #fff; --txt2: #a3a3a3; --txt3: #8a8a8a;
  --btn: #fff; --btn-txt: #000; --btn-h: #e0e0e0; --gris: #1f1f1f; --gris-h: #2e2e2e;
  --lima: #b6f04f; --acento: #b6f04f; --acento-txt: #0a1400; --acento-suave: rgba(182, 240, 79, .12);
  --sube: #2fd3a1; --baja: #ff6b7a; --ambar: #f2c15a;
  --fuente: "Host Grotesk", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --sans: var(--fuente);
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --ancho: 1224px; --r: 24px; --aire: clamp(72px, 9vw, 136px); --cab: 64px;
}
html[data-tema="claro"] {
  --fondo: #fff; --alt: #f7f7f7; --card: #f7f7f7; --linea: #e3e3e3; --linea2: #bdbdbd;
  --txt: #000; --txt2: #5c5c5c; --txt3: #707070;
  --btn: #000; --btn-txt: #fff; --btn-h: #2b2b2b; --gris: #efefef; --gris-h: #e2e2e2;
  --acento: #2f6b12; --acento-txt: #fff; --acento-suave: rgba(60, 122, 26, .1);
  --sube: #14805a; --baja: #d0353f; --ambar: #8a5a00;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: dark; }
html[data-tema="claro"] { color-scheme: light; }
body { margin: 0; background: var(--fondo); color: var(--txt); font: 400 16px/1.5 var(--fuente); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, canvas { max-width: 100%; }
img { display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--txt); outline-offset: 3px; border-radius: 6px; }
section[id], div[id="como"] { scroll-margin-top: calc(var(--cab) + 12px); }
body.con-ticker section[id] { scroll-margin-top: calc(var(--cab) + 46px); }
.contenedor { width: min(100% - 48px, var(--ancho)); margin-inline: auto; }
.salto { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--btn); color: var(--btn-txt); font-weight: 600; text-decoration: none; }
.salto:focus { top: 12px; }
.solo-movil { display: none; }

/* ---- botones: píldoras ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; font-weight: 600; font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .15s; }
.btn:active { transform: scale(.98); }
.btn-lima { background: var(--btn); color: var(--btn-txt); }          /* botón principal (el nombre viene del código anterior) */
.btn-lima:hover { background: var(--btn-h); }
.btn-gris { background: var(--gris); color: var(--txt); }
.btn-gris:hover { background: var(--gris-h); }
.btn-borde { border-color: var(--txt); color: var(--txt); background: transparent; }
.btn-borde:hover { background: var(--txt); color: var(--fondo); }
.btn-grande { height: 60px; padding: 0 28px; font-size: 20px; }
.btn-chico { height: 32px; padding: 0 14px; font-size: 14px; font-weight: 500; }

/* ---- cinta de precios (solo si el motor publica datos reales) ---- */
.ticker { position: sticky; top: 0; z-index: 60; height: 34px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; background: var(--fondo); border-bottom: 1px solid var(--linea); font: 500 12px/1 var(--mono); color: var(--txt); }
.tk-pista { display: inline-flex; gap: 40px; padding-left: 24px; animation: cinta 60s linear infinite; will-change: transform; }
.ticker:hover .tk-pista { animation-play-state: paused; }
.tk b { color: var(--txt3); font-weight: 500; letter-spacing: .04em; margin-right: 6px; }
.tk i { font-style: normal; margin-left: 6px; }
.sube { color: var(--sube); } .baja { color: var(--baja); }
@keyframes cinta { to { transform: translateX(-25%); } }

/* ---- cabecera ---- */
.cab { position: sticky; top: 0; z-index: 50; background: var(--fondo); }
body.con-ticker .cab { top: 34px; }
.cab-in { height: var(--cab); display: flex; align-items: center; gap: 28px; padding-inline: 24px; }
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.01em; text-decoration: none; color: var(--txt); flex: none; }
/* el toro va solo, sin recuadro: lima de noche y negro de día (se pinta con la propia silueta de toro.png) */
.marca .toro { flex: none; width: 30px; height: 30px; background: var(--lima); -webkit-mask: url(toro.png) center / contain no-repeat; mask: url(toro.png) center / contain no-repeat; }
html[data-tema="claro"] .marca .toro { background: #000; }
.marca b { font-weight: 700; color: var(--acento); }
.nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.nav a { padding: 8px 12px; border-radius: 999px; font-size: 14px; color: var(--txt); text-decoration: none; white-space: nowrap; transition: background-color .2s; }
.nav a:hover { background: var(--gris); }
.nav a.nav-planes { background: var(--lima); color: #0a1400; font-weight: 600; animation: brillo 3s ease-in-out infinite; }
.nav a.nav-planes:hover { background: var(--lima-h, var(--lima)); filter: brightness(1.05); }
@keyframes brillo { 0%, 100% { box-shadow: 0 0 0 0 rgba(182, 240, 79, 0), 0 0 10px rgba(182, 240, 79, .35); } 50% { box-shadow: 0 0 0 5px rgba(182, 240, 79, .14), 0 0 22px rgba(182, 240, 79, .6); } }
.cab-der { display: flex; align-items: center; gap: 14px; flex: none; }
.cab-entrar { font-size: 14px; text-decoration: none; padding: 8px 4px; }
.cab-entrar:hover { color: var(--txt2); }
.cab-sep { width: 1px; height: 20px; background: var(--linea); }
.tema-btn, .menu-btn { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--txt); cursor: pointer; transition: background-color .2s; }
.tema-btn:hover, .menu-btn:hover { background: var(--gris); }
.tema-btn svg, .menu-btn svg { width: 20px; height: 20px; }
.tema-btn .sol { display: none; } html[data-tema="claro"] .tema-btn .sol { display: block; } html[data-tema="claro"] .tema-btn .luna { display: none; }
.idioma { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--gris); }
.idioma button { height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--txt2); font-size: 12px; font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.idioma button[aria-pressed="true"] { background: var(--btn); color: var(--btn-txt); }
.menu-btn { display: none; }

/* ---- secciones ---- */
.sec { padding-block: var(--aire); }
.titulo { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.25; font-weight: 700; letter-spacing: -.015em; text-align: center; text-wrap: balance; max-width: 22em; margin-inline: auto; }
.bajada { margin: 16px auto 0; max-width: 46em; text-align: center; color: var(--txt2); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; text-wrap: pretty; }
.titulo.izq, .bajada.izq { text-align: left; margin-inline: 0; }
.nota-chica { margin-top: 16px; color: var(--txt3); font-size: 14px; }
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.dos .btn { margin-top: 32px; }

/* chips de estado */
.estado { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--gris); color: var(--txt2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.estado.ok { background: var(--acento-suave); color: var(--acento); }

/* iconos planos: ficha con un velo de verde lima, borde fino y el trazo en lima (sin relieve ni sombras) */
.ico-lima { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 20px; color: var(--acento); background: var(--acento-suave); border: 1px solid color-mix(in srgb, var(--acento) 32%, transparent); box-shadow: none; transition: background-color .3s, border-color .3s; }
.ico-lima svg { width: 32px; height: 32px; }

/* ---- inicio ---- */
.hero { padding-block: clamp(40px, 7vw, 104px) var(--aire); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; width: min(100% - 48px, 1120px); }
.hero h1 { font-size: clamp(32px, 3.9vw, 48px); line-height: 1.25; font-weight: 700; letter-spacing: -.02em; min-height: 3.75em; display: flex; flex-direction: column; justify-content: flex-end; }
.hero h1 span { text-wrap: balance; display: block; transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1), filter .8s cubic-bezier(.22, .61, .36, 1); }
.hero h1 em { font-style: normal; color: var(--acento); }
.hero .sub { margin-top: 24px; max-width: 30em; min-height: 4.5em; color: var(--txt2); font-size: 18px; line-height: 1.5; transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1), filter .8s cubic-bezier(.22, .61, .36, 1); }
/* 5) cambio de mensaje suave: se desvanece y se desenfoca un poco al salir; el nuevo aparece desde un poco más abajo, enfocándose */
.hero h1 span.rot-sale, .hero .sub.rot-sale { opacity: 0; transform: translateY(-6px); filter: blur(10px); transition-duration: .52s; }
.hero h1 span.rot-entra, .hero .sub.rot-entra { opacity: 0; transform: translateY(12px); filter: blur(12px); transition: none; }
.hero-botones { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.hero-nota { margin-top: 16px; color: var(--txt3); font-size: 14px; }
.hero-datos { display: flex; flex-wrap: wrap; gap: 12px 0; margin-top: 56px; color: var(--txt); font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.hero-datos li + li::before { content: ""; display: inline-block; width: 1px; height: 14px; margin: 0 20px -2px; background: var(--linea2); }
.hero-visual { position: relative; min-width: 0; padding: 0 22px 34px 0; }
.hero-cap { margin-top: 44px; color: var(--txt3); font-size: 13px; text-align: center; }

/* marco de pantalla: borde fino, como un dispositivo dibujado a línea */
.maqueta { position: relative; }
.monitor { background: var(--alt); border: 1px solid var(--linea2); border-radius: 20px; padding: 10px; }
.monitor .barra { display: flex; gap: 6px; padding: 2px 4px 10px; }
.monitor .barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--linea2); }
.monitor img { border-radius: 12px; width: 100%; height: auto; }
.movil { position: absolute; right: -6px; bottom: -34px; width: 24%; min-width: 108px; background: #000; border: 1px solid var(--linea2); border-radius: 22px; padding: 5px; box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .7); }
.movil img { border-radius: 17px; width: 100%; height: auto; }

/* gráfico en vivo dentro del monitor (lo dibuja landing-vivo.js con estos colores) */
.vivo { --v-fondo: #0a0a0a; --v-txt: #fff; --v-txt2: #8f8f8f; --v-lin: rgba(255, 255, 255, .1); --v-rej: rgba(255, 255, 255, .06); --v-sube: #2fd3a1; --v-baja: #ff6b7a; --v-e1: #f2c15a; --v-e2: #6ea8ff; --v-bb: rgba(255, 255, 255, .4); --v-bbf: rgba(255, 255, 255, .04); --v-sel: rgba(255, 255, 255, .07); --v-acento: #b6f04f; --v-cruz: rgba(255, 255, 255, .4); --v-tip: #fff; --v-tipt: #000;
  background: var(--v-fondo); color: var(--v-txt); border-radius: 12px; overflow: hidden; text-align: left; transition: background-color .25s ease; }
html[data-tema="claro"] .vivo { --v-fondo: #fff; --v-txt: #000; --v-txt2: #6b6b6b; --v-lin: rgba(0, 0, 0, .1); --v-rej: rgba(0, 0, 0, .06); --v-sube: #14805a; --v-baja: #d0353f; --v-e1: #b97700; --v-e2: #2f62c9; --v-bb: rgba(0, 0, 0, .35); --v-bbf: rgba(0, 0, 0, .04); --v-sel: rgba(0, 0, 0, .05); --v-acento: #000; --v-cruz: rgba(0, 0, 0, .35); --v-tip: #000; --v-tipt: #fff; }
.vivo-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--v-lin); }
.vivo-sim { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.vivo-sim b { font-size: 16px; } .vivo-sim span { color: var(--v-txt2); font-size: 12px; } .vivo-sim .v-precio { color: var(--v-txt); font: 600 16px var(--mono); }
.vivo-sim .sube, .vivo-lista .sube { color: var(--v-sube); } .vivo-sim .baja, .vivo-lista .baja { color: var(--v-baja); }
.pill-vivo { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--v-lin); border-radius: 999px; padding: 6px 12px; font: 600 11px/1 var(--mono); letter-spacing: .06em; color: var(--v-txt2); }
.pill-vivo.on { color: var(--v-acento); border-color: var(--v-acento); }
.pill-vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--v-acento); animation: pulso 1.8s infinite; }
@keyframes pulso { 50% { opacity: .35; } }
.vivo-barra { display: flex; justify-content: space-between; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--v-lin); }
.vivo-barra .grupo { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.vivo-barra button { background: transparent; border: 1px solid var(--v-lin); color: var(--v-txt2); border-radius: 999px; padding: 6px 12px; font: 600 11px/1 var(--mono); letter-spacing: .04em; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.vivo-barra button:hover { color: var(--v-txt); border-color: var(--v-txt2); }
.vivo-barra button[aria-pressed="true"] { background: var(--v-txt); color: var(--v-fondo); border-color: var(--v-txt); }
.vivo-barra .leyenda { font: 500 11px var(--mono); color: var(--v-txt2); display: inline-flex; gap: 10px; align-items: center; }
.vivo-barra .leyenda i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.vivo-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 170px; }
.vivo-cuerpo canvas { width: 100%; height: 340px; display: block; cursor: crosshair; touch-action: pan-y; }
.vivo-lista { margin: 0; padding: 8px; border-left: 1px solid var(--v-lin); display: grid; align-content: start; gap: 4px; }
.vivo-lista button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 9px; color: var(--v-txt); cursor: pointer; font: 500 12px var(--mono); }
.vivo-lista button:hover { background: var(--v-sel); }
.vivo-lista button.on { border-color: var(--v-txt2); background: var(--v-sel); }
.vivo-lista button span { text-align: right; } .vivo-lista button i { font-style: normal; grid-column: 2; text-align: right; font-size: 11px; }
.vivo-pie { margin: 0; padding: 10px 14px; border-top: 1px solid var(--v-lin); font-size: 12px; color: var(--v-txt2); }
.hero-visual .vivo-cuerpo canvas { height: 200px; }
/* en el inicio el celular ya muestra los mercados: el monitor deja solo el gráfico y le hace sitio a la derecha */
.hero-visual:has(.movil-vivo:not([hidden])) { padding-right: 62px; }
.hero-visual .vivo-cuerpo { grid-template-columns: minmax(0, 1fr); } .hero-visual .vivo-lista { display: none; }
.hero-visual .vivo-cab { padding: 8px 12px; } .hero-visual .vivo-barra { padding: 5px 12px; } .hero-visual .vivo-lista button { padding: 6px 8px; } .hero-visual .vivo-pie { display: none; }

/* celular en vivo: la pantalla de inicio de la app, dibujada a 375 x 812 y reducida con --k */
.movil-vivo { position: absolute; right: 0; bottom: -14px; width: 132px; z-index: 3; filter: drop-shadow(0 24px 32px rgba(0, 0, 0, .7)); }
.pv-marco { position: relative; background: #000; border: 1px solid #5a5a5a; border-radius: 26px; padding: 6px; }
.pv-muesca { position: absolute; top: 10px; left: 50%; width: 28%; height: 4px; margin-left: -14%; border-radius: 4px; background: #000; z-index: 2; }
.pv-ventana { position: relative; width: 100%; aspect-ratio: 375 / 812; overflow: hidden; border-radius: 20px; background: #0a0a0a; }
.pa { position: absolute; left: 0; top: 0; width: 375px; height: 812px; transform-origin: 0 0; transform: scale(var(--k, .36)); background: #0a0a0a; color: #fff; font-family: var(--fuente); text-align: left; }
.pa-top { height: 128px; padding: 46px 16px 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #262626; }
.pa-btn { width: 52px; height: 52px; border-radius: 50%; background: #1f1f1f; display: grid; place-items: center; color: #fff; }
.pa-btn svg { width: 24px; height: 24px; }
.pa-toro { width: 52px; height: 52px; object-fit: contain; }
.pa-tit { display: flex; align-items: flex-start; gap: 14px; padding: 22px 18px 0; }
.pa-ico { flex: none; width: 52px; height: 52px; border-radius: 16px; background: #1f1f1f; display: grid; place-items: center; }
.pa-ico svg { width: 26px; height: 26px; color: #fff; }
.pa-tit b { display: block; font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.pa-tit small { display: block; margin-top: 8px; font-size: 15px; line-height: 1.3; color: #a3a3a3; }
.pa-pill { display: inline-flex; align-items: center; gap: 8px; margin: 20px 18px 16px; padding: 9px 16px; border: 1px solid #333; border-radius: 999px; font: 600 12px/1 var(--mono); letter-spacing: .06em; color: #fff; }
.pa-pill i { width: 9px; height: 9px; border-radius: 50%; background: #b6f04f; }
.pa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 18px; }
.pa-card { background: #141414; border: 1px solid #2b2b2b; border-radius: 20px; padding: 14px 14px 10px; }
.pa-card.sel { border-color: #8a8a8a; }
.pa-c1 { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 14px; }
.pa-c1 b { font-weight: 700; letter-spacing: .02em; }
.pa-c1 i { font-style: normal; font-weight: 600; font-size: 12px; }
.pa-c1 i.sube { color: #2fd3a1; } .pa-c1 i.baja { color: #ff6b7a; }
.pa-card strong { display: block; margin-top: 6px; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.pa-card canvas { display: block; width: 100%; height: 52px; margin-top: 6px; }
.pa-nota { margin: 14px 18px 0; padding: 16px 18px; border-radius: 20px; background: #1a1a1a; color: #a3a3a3; font-size: 15px; line-height: 1.35; }
.pa-nota b { display: block; font-size: 20px; color: #fff; margin-bottom: 4px; }
.pa-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 118px; background: #0a0a0a; border-top: 1px solid #262626; display: flex; justify-content: space-around; align-items: flex-end; padding: 0 8px 26px; }
.pa-nav span { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 66px; font-size: 12.5px; color: #a3a3a3; }
.pa-nav svg { width: 28px; height: 28px; }
.pa-nav .pa-hoy { position: relative; top: -22px; width: 84px; height: 84px; border-radius: 50%; background: #fff; color: #000; justify-content: center; font-weight: 600; box-shadow: 0 0 0 7px #0a0a0a; }

/* ---- seguridad: cuatro columnas con icono ---- */
.iconos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; margin-top: clamp(48px, 7vw, 96px); text-align: center; }
.iconos > div { display: grid; justify-items: center; align-content: start; }
.iconos h3 { margin-top: 36px; font-size: 20px; line-height: 1.25; font-weight: 600; max-width: 12em; text-wrap: balance; }
.iconos p { margin-top: 14px; color: var(--txt2); font-size: 16px; line-height: 1.5; max-width: 17em; text-wrap: pretty; }

/* ---- producto: cuatro cartas con borde ---- */
.cartas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 72px); }
.cartas article { display: grid; justify-items: center; align-content: start; text-align: center; padding: 48px 20px 28px; border: 1px solid var(--linea); border-radius: var(--r); transition: border-color .25s, transform .25s; }
.cartas article:hover { border-color: var(--linea2); transform: translateY(-4px); }
.cartas h3 { margin-top: 40px; font-size: 18px; font-weight: 600; }
.cartas p { margin-top: 8px; color: var(--txt2); font-size: 15px; line-height: 1.4; min-height: 4.2em; text-wrap: pretty; }
.cartas .estado { margin-top: 20px; height: 32px; padding: 0 16px; font-size: 14px; }
.pasos { margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 32px; align-items: start; padding-top: 40px; border-top: 1px solid var(--linea); }
.pasos h3 { font-size: 24px; line-height: 1.25; font-weight: 700; }
.pasos ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pasos li span { display: block; color: var(--acento); font: 500 13px var(--mono); }
.pasos li b { display: block; margin-top: 10px; font-size: 20px; font-weight: 600; }
.pasos li p { margin-top: 8px; color: var(--txt2); font-size: 15px; line-height: 1.45; }

/* ---- la plataforma: pestañas y captura grande ---- */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; }
.tabs button { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--gris); color: var(--txt2); font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .2s, color .2s; }
.tabs button:hover { color: var(--txt); background: var(--gris-h); }
.tabs button[aria-selected="true"] { background: var(--btn); color: var(--btn-txt); }
.galeria { display: grid; grid-template-columns: minmax(0, 1fr) 19%; gap: 28px; align-items: end; margin: 40px auto 0; max-width: 1080px; }
.galeria .movil { position: static; width: 100%; min-width: 0; box-shadow: none; }
.pie-captura { grid-column: 1 / -1; color: var(--txt3); font-size: 14px; text-align: center; }
.pie-captura b { color: var(--txt2); font-weight: 500; }

/* ---- mercados ---- */
.mk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 56px; }
.mk { text-align: left; display: grid; gap: 10px; padding: 24px; border: 1px solid var(--linea); border-radius: var(--r); background: transparent; color: var(--txt); cursor: pointer; font: inherit; transition: transform .25s ease, border-color .2s; }
.mk:hover { transform: translateY(-4px); border-color: var(--linea2); }
.mk.on { border-color: var(--txt); }
.mk-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mk-cab b { font-size: 16px; font-weight: 600; letter-spacing: .02em; } .mk-cab small { color: var(--txt3); font-size: 12px; }
.mk-px { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mk-px strong { font: 600 22px var(--mono); } .mk-px i { font: 600 13px var(--mono); font-style: normal; }
.mk canvas { width: 100%; height: 64px; display: block; }
.mk-datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-size: 12px; color: var(--txt3); border-top: 1px solid var(--linea); padding-top: 12px; }
.mk-datos span { display: grid; gap: 4px; justify-items: start; } .mk-datos .ancho { grid-column: 1 / -1; } .mk-datos b { color: var(--txt); font: 500 13px var(--mono); }
.mk-etq { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 500 11px/1.3 var(--mono); font-style: normal; background: var(--gris); color: var(--txt2); }
.mk-etq.alza { color: var(--sube); } .mk-etq.baja { color: var(--baja); }
.mk-nota { margin: 28px auto 0; max-width: 60em; font-size: 13px; color: var(--txt3); text-align: center; }

/* ---- estrategias ---- */
.cinco { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 72px); }
.est-card { grid-column: span 2; padding: 28px; border: 1px solid var(--linea); border-radius: var(--r); transition: border-color .25s; }
.est-card:hover { border-color: var(--linea2); }
.est-n { color: var(--txt3); font: 500 12px var(--mono); letter-spacing: .08em; }
.est-card h3 { margin-top: 12px; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.est-card > p { margin-top: 10px; color: var(--txt2); font-size: 16px; line-height: 1.45; min-height: 2.9em; }
.est-det { margin-top: 20px; border-top: 1px solid var(--linea); }
.est-det summary, .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.est-det summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.est-det summary { padding-top: 16px; font-size: 15px; font-weight: 500; }
.est-det summary::after, .faq summary::after { content: ""; flex: none; width: 24px; height: 24px; border: 1.5px solid currentColor; border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat; transition: transform .25s; }
.faq summary:hover::after, .est-det summary:hover::after { color: var(--acento); }
.est-det[open] summary::after, .faq details[open] summary::after { color: var(--acento); background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat; transform: rotate(180deg); }
.est-det summary::after { width: 20px; height: 20px; background-size: 8px 1.5px, 1.5px 8px; }
.ficha { margin-top: 12px; display: grid; gap: 10px; }
.ficha div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.4; }
.ficha dt { color: var(--txt3); } .ficha dd { color: var(--txt2); }
.limites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.limites div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 18px 24px; border-radius: 16px; background: var(--card); }
.limites b { font-size: 15px; font-weight: 600; }
.limites span { color: var(--txt2); font-size: 15px; }
.limites .reco { outline: 1px solid var(--linea2); }
.veredicto { margin: 40px auto 0; max-width: 44em; text-align: center; font-size: 18px; line-height: 1.5; color: var(--txt); text-wrap: balance; }
.pendiente { margin-top: 12px; text-align: center; color: var(--txt3); font-size: 14px; }

/* ---- señal de ejemplo ---- */
.sen-nota { display: flex; gap: 8px; margin-top: 24px; }
.senal { padding: 24px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--alt); }
.senal-cab b { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--gris); color: var(--ambar); font: 600 11px/1.3 var(--mono); letter-spacing: .08em; }
.senal-graf { margin-top: 16px; aspect-ratio: 560 / 230; }
.senal-graf svg { width: 100%; height: 100%; display: block; }
.sg-up line, .sg-up rect { stroke: var(--sube); fill: var(--sube); } .sg-dn line, .sg-dn rect { stroke: var(--baja); fill: var(--baja); }
.sg-up line, .sg-dn line { stroke-width: 1.2; }
.sg-zona-ok { fill: var(--sube); opacity: .1; } .sg-zona-mal { fill: var(--baja); opacity: .1; }
.sg-nivel { stroke-width: 1.2; stroke-dasharray: 4 4; }
.sg-nivel.sg-obj { stroke: var(--sube); } .sg-nivel.sg-ent { stroke: var(--txt2); } .sg-nivel.sg-stop { stroke: var(--baja); }
.sg-et, .sg-res { font: 600 11px var(--mono); }
.sg-et.sg-obj, .sg-res.sg-obj { fill: var(--sube); } .sg-et.sg-ent { fill: var(--txt2); } .sg-et.sg-stop, .sg-res.sg-stop { fill: var(--baja); }
.senal-graf-pie { margin-top: 12px; color: var(--txt3); font-size: 13px; line-height: 1.45; }

/* ---- MT5: lista con líneas ---- */
.lista li { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--linea); }
.lista li:first-child { border-top: 1px solid var(--linea); }
.lista b { display: block; font-size: 18px; font-weight: 600; }
.lista .t { display: block; margin-top: 6px; color: var(--txt2); font-size: 15px; line-height: 1.45; max-width: 34em; }
.lista .estado { margin-top: 2px; }

/* ---- calculadora de riesgo ---- */
.calc { padding: 28px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--alt); }
.calc-cab { display: block; color: var(--txt3); font: 500 12px var(--mono); letter-spacing: .08em; }
.calc-campo { display: grid; gap: 10px; margin-top: 24px; color: var(--txt2); font-size: 15px; }
.calc-campo input[type="number"] { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--linea); border-radius: 12px; background: var(--fondo); color: var(--txt); font: 600 18px var(--mono); transition: border-color .2s; }
.calc-campo input[type="number"]:focus { outline: none; border-color: var(--txt); }
.calc-r { display: flex; align-items: center; gap: 16px; }
.calc-r input { flex: 1; min-width: 0; height: 32px; accent-color: var(--txt); cursor: pointer; }
.calc-r output { min-width: 4.2em; text-align: right; color: var(--txt); font: 600 16px var(--mono); }
.calc-res { margin-top: 24px; border-top: 1px solid var(--linea); }
.calc-res p { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea); color: var(--txt2); font-size: 15px; }
.calc-res b { flex: none; color: var(--txt); font: 600 18px var(--mono); }
.calc-barra { margin-top: 24px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--baja) 45%, transparent); overflow: hidden; }
.calc-barra i { display: block; height: 100%; border-radius: 999px; background: var(--txt); transition: width .25s ease; }
.calc-alto { margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--baja) 14%, transparent); color: var(--baja); font-size: 14px; line-height: 1.45; }

/* ---- planes ---- */
.sec-planes { position: relative; padding-top: clamp(24px, 4vw, 56px); }
.sec-planes::before { content: ""; position: absolute; inset: 0 0 auto; height: 70%; background: radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--lima) 13%, transparent), transparent 72%); pointer-events: none; }
.sec-planes .contenedor { position: relative; }
.sobre-planes { text-align: center; margin: 0 0 16px; color: var(--acento); font: 600 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.titulo-grande { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.15; letter-spacing: -.025em; max-width: 16em; }
.planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: clamp(40px, 5vw, 72px) auto 0; max-width: 1180px; }
/* línea verde lima en el borde de cada plan, con un destello discreto que la recorre despacio */
@property --giro { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.plan { --linea-plan: var(--acento); --destello: var(--lima); position: relative; display: flex; flex-direction: column; padding: 36px 30px; border: 1px solid color-mix(in srgb, var(--linea-plan) 38%, transparent); border-radius: var(--r); background: var(--fondo); transition: border-color .3s, transform .3s; }
.plan::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--giro), transparent 0 62%, color-mix(in srgb, var(--linea-plan) 55%, transparent) 80%, var(--destello) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: giro-plan 9s linear infinite; }
@keyframes giro-plan { to { --giro: 360deg; } }
.plan:hover { border-color: color-mix(in srgb, var(--linea-plan) 70%, transparent); }
.plan.reco { border-color: var(--linea-plan); box-shadow: 0 0 32px -8px color-mix(in srgb, var(--lima) 35%, transparent); }
@media (min-width: 901px) { .plan.reco { transform: translateY(-10px); } }
html[data-tema="claro"] .plan { --linea-plan: #4a9a12; --destello: #5cb214; }
html[data-tema="claro"] .hero h1 em { color: #3e8e0a; }
.cinta { position: absolute; top: -13px; left: 28px; height: 26px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; background: var(--lima); color: #0a1400; font: 700 11px/1 var(--mono); letter-spacing: .08em; }
.plan h3 { color: var(--txt2); font-size: 14px; font-weight: 600; letter-spacing: .12em; }
.plan-precio { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; }
.plan-precio b { font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-precio span { color: var(--txt2); font-size: 15px; }
.plan-state { align-self: flex-start; margin-top: 14px; padding: 5px 12px; border-radius: 999px; background: var(--gris); color: var(--txt2); font-size: 12px; font-weight: 500; }
.plan-state.actual { background: var(--acento-suave); color: var(--acento); }
.limite-plan { margin-top: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--linea); font-size: 16px; font-weight: 500; line-height: 1.4; }
.plan ul { display: grid; align-content: start; gap: 12px; margin-top: 20px; flex: 1; }
.plan li { display: flex; gap: 10px; color: var(--txt2); font-size: 15px; line-height: 1.4; }
.plan li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--acento); }
.plan .btn { margin-top: 28px; background: var(--lima); color: #0a1400; }
.plan .btn:hover { background: var(--lima); filter: brightness(1.06); }
.estado-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; margin: 56px auto 0; max-width: 1180px; padding-top: 32px; border-top: 1px solid var(--linea); }
.estado-panel b { display: block; font-size: 16px; font-weight: 600; }
.estado-panel span { display: block; margin-top: 8px; color: var(--txt2); font-size: 15px; line-height: 1.5; }

/* ---- preguntas: filas separadas por una línea ---- */
.faq { margin: clamp(32px, 5vw, 64px) auto 0; max-width: 1200px; }
.faq details { border-bottom: 1px solid var(--txt); }
.faq summary { padding: 32px 0; font-size: clamp(18px, 2vw, 24px); font-weight: 500; line-height: 1.3; }
.faq p { padding: 0 48px 32px 0; max-width: 56em; color: var(--txt2); font-size: 16px; line-height: 1.6; }

/* ---- cierre ---- */
.cta { padding-block: var(--aire); text-align: center; border-top: 1px solid var(--linea); }
.cta h2 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; max-width: 14em; margin-inline: auto; }
.cta .btn { margin-top: 40px; }
.cta-login { margin-top: 20px; font-size: 15px; color: var(--txt2); }

/* ---- pie ---- */
.pie { padding: 72px 0 56px; border-top: 1px solid var(--linea); }
.pie-marca p { margin-top: 12px; color: var(--txt3); font-size: 13px; letter-spacing: .02em; }
.pie-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 40px 32px; margin-top: 64px; }
.pie-cols h3 { font-size: 18px; font-weight: 500; margin-bottom: 20px; }
.pie-cols nav a { display: block; width: fit-content; padding: 8px 0; color: var(--txt2); font-size: 14px; text-decoration: none; }
.pie-cols nav a:hover { color: var(--txt); }
.pie-cta h3 { font-size: 20px; font-weight: 600; line-height: 1.35; max-width: 11em; }
.pie-legal { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--linea); display: grid; gap: 12px; }
.pie-legal p { color: var(--txt3); font-size: 13px; line-height: 1.6; max-width: 90em; }
.pie-legal b { color: var(--txt2); font-weight: 500; }

/* ---- aparición al desplazarse: el estado oculto solo existe si JS lo activa (.anim) ---- */
@media (prefers-reduced-motion: no-preference) {
  .anim .aparece { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .anim .aparece.visto { opacity: 1; transform: none; }
  .hero-copy > * { animation: suave 1s cubic-bezier(.22, .61, .36, 1) backwards; }
  .hero-copy > :nth-child(2) { animation-delay: .07s; } .hero-copy > :nth-child(3) { animation-delay: .14s; } .hero-copy > :nth-child(4) { animation-delay: .21s; } .hero-copy > :nth-child(5) { animation-delay: .28s; } .hero-copy > :nth-child(6) { animation-delay: .35s; }
  @keyframes suave { from { opacity: 0; transform: translateY(14px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
  .anim .maqueta.aparece.visto { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: opacity .7s ease, transform .3s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tk-pista, .pill-vivo i { animation: none; }
  .hero h1 span.rot-sale, .hero .sub.rot-sale, .hero h1 span.rot-entra, .hero .sub.rot-entra { transform: none !important; filter: none !important; }
  .plan::before, .nav a.nav-planes { animation: none; }
}

/* ---- tablet ---- */
@media (max-width: 1100px) {
  .cab-entrar, .cab-sep { display: none; }
  .nav a { padding: 8px 9px; }
  .cartas, .iconos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartas p { min-height: 0; }
  .pasos { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --cab: 56px; }
  .menu-btn { display: grid; }
  .cab-in { padding-inline: 16px; gap: 12px; justify-content: space-between; }
  .cab-der { gap: 8px; }
  .nav { display: none; position: fixed; inset: var(--cab) 0 0; z-index: 49; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 32px; background: var(--fondo); overflow-y: auto; }
  body.con-ticker .nav { top: calc(var(--cab) + 34px); }
  .nav.abierto { display: flex; }
  .nav a { padding: 20px 0; border-radius: 0; border-bottom: 1px solid var(--linea); font-size: 20px; font-weight: 500; }
  .nav a:hover { background: transparent; }
  .nav a.nav-planes { margin: 12px 0 4px; padding: 16px 0; border-bottom: 0; border-radius: 16px; text-align: center; color: #0a1400; }
  .nav a.nav-planes:hover { background: var(--lima); }
  .solo-movil { display: block; }
  .hero-grid, .dos { grid-template-columns: 1fr; }
  .hero { text-align: center; }
  .hero h1 { min-height: 2.5em; }
  .hero .sub { margin-inline: auto; }
  .hero-botones, .hero-datos { justify-content: center; }
  .hero-datos { margin-top: 32px; }
  .hero-visual { margin-top: 24px; padding: 0 0 30px; max-width: 620px; margin-inline: auto; width: 100%; }
  .planes { grid-template-columns: 1fr; max-width: 520px; }
  .plan.reco { order: -1; }
  .cinco { grid-template-columns: 1fr 1fr; }
  .est-card { grid-column: auto; }
  .pie-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie-cta { grid-column: 1 / -1; }
  .pie-cta h3 { max-width: none; }
  .vivo-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .vivo-lista { border-left: 0; border-top: 1px solid var(--v-lin); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- móvil ---- */
@media (max-width: 640px) {
  .contenedor, .hero-grid { width: min(100% - 40px, var(--ancho)); }
  .marca { font-size: 16px; }
  .btn-borde.btn-chico { display: none; }
  .btn-grande { height: 52px; font-size: 17px; padding: 0 24px; }
  .hero { padding-top: 32px; }
  .hero h1 { font-size: 30px; min-height: 3.75em; }
  .hero .sub { font-size: 17px; min-height: 6em; }
  .hero-botones { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-datos { font-size: 14px; gap: 8px 20px; } .hero-datos li + li::before { display: none; }
  .hero-visual:has(.movil-vivo:not([hidden])) { padding-right: 44px; }
  .movil-vivo { width: 104px; right: -4px; }
  .movil { width: 26%; min-width: 84px; right: -4px; bottom: -24px; }
  .hero-visual .vivo-barra { display: none; }
  .iconos { grid-template-columns: 1fr; gap: 32px; text-align: left; }
  .iconos > div { grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; justify-items: start; }
  .iconos .ico-lima { grid-row: span 2; }
  .iconos h3 { margin-top: 0; max-width: none; } .iconos p { margin-top: 6px; max-width: none; }
  .cartas { grid-template-columns: 1fr; gap: 16px; }
  .cartas article { padding: 32px 20px 24px; }
  .cartas h3 { margin-top: 24px; }
  .pasos ol, .limites, .estado-panel, .cinco { grid-template-columns: 1fr; }
  .tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; height: 44px; }
  .galeria { grid-template-columns: 1fr; }
  .galeria .movil { max-width: 200px; margin-inline: auto; }
  .lista li { flex-direction: column; gap: 10px; }
  .calc, .senal { padding: 20px; }
  .calc-res p { flex-direction: column; gap: 4px; }
  .faq summary { padding: 24px 0; } .faq p { padding-right: 0; }
  .pie-cols { grid-template-columns: 1fr 1fr; }
  .pie-cols nav a { padding: 12px 0; }
}

/* ---- selector USD / COP de los planes ---- */
.moneda { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; }
.m-et { color: var(--txt3); font: 600 14px var(--mono); letter-spacing: .08em; cursor: pointer; transition: color .25s; user-select: none; }
.m-et.on { color: var(--txt); }
.m-switch { position: relative; flex: none; width: 58px; height: 32px; padding: 0; border: 1px solid var(--linea2); border-radius: 999px; background: var(--gris); cursor: pointer; transition: border-color .3s, background-color .3s, box-shadow .3s; }
.m-switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--lima); transition: transform .4s cubic-bezier(.22, .61, .36, 1); }
.m-switch[aria-checked="true"] { border-color: var(--lima); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lima) 16%, transparent); }
.m-switch[aria-checked="true"] i { transform: translateX(26px); }
html[data-tema="claro"] .m-switch i { background: #4a9a12; }
html[data-tema="claro"] .m-switch[aria-checked="true"] { border-color: #4a9a12; }
.trm-nota { margin: 12px auto 0; max-width: 40em; text-align: center; color: var(--txt3); font-size: 13px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .m-switch i { transition: none; } }