/* Web de MomentVM Trading · prototipo del 5-nov-2026 (generar_web.py lo copia a «sitio»).
   Colores de la marca: marino y dorado, los del logo, la web de venta y los PDF. */
:root{
  --marino:#0b1a2e; --marino-2:#1b3558; --borde-osc:#2c4466; --oro:#f0b429; --oro-osc:#9a6b00;
  --tinta:#1b1f24; --suave:#57606a; --tenue:#8b949e; --linea:#d8dee4; --caja:#f6f8fa;
  --verde:#1a7f37; --rojo:#c4321c; --claro:#c9d6e8; --azulado:#8fb3e8;
  --pend-fondo:#fff8c5; --pend-borde:#d4a72c; --pend-tinta:#6b4e00;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;color:var(--tinta);line-height:1.6;background:#fff;font-size:16px}
a{color:var(--marino-2)}
img{max-width:100%;height:auto}
.contenedor{max-width:1160px;margin:0 auto;padding:0 24px}
.tenue{color:var(--tenue)}

/* Aviso de prototipo y de borrador (se quitan al publicar) */
.aviso-prototipo{background:var(--pend-fondo);border-bottom:1px solid var(--pend-borde);color:var(--pend-tinta);
  text-align:center;font-size:14px;padding:7px 16px}
.borrador{background:var(--pend-fondo);border:1px dashed var(--pend-borde);color:var(--pend-tinta);border-radius:10px;
  padding:10px 14px;margin:0 0 20px;font-weight:600;font-size:15px}
.pend{background:var(--pend-fondo);color:var(--pend-tinta);border:1px dashed var(--pend-borde);border-radius:6px;
  padding:1px 8px;font-size:.9em;font-weight:600}

/* Cabecera: logo, menú y, en el móvil, el botón «Menú» */
.barra{background:var(--marino);position:sticky;top:0;z-index:20}
.barra-in{display:flex;align-items:center;gap:20px;height:64px;position:relative}
/* Logo: «Moment» y «Trading» son texto; la V y la M, marca-vm.svg (sale de «Marca MomentVM\logo_web.py») */
.marca{font-weight:700;font-size:22px;line-height:1;color:#fff;text-decoration:none;white-space:nowrap}
.marca-vm{width:1.66em;height:.9814em;margin-left:.06em;vertical-align:baseline}
.marca-trading{margin-left:.3em;color:var(--azulado);font-weight:600}
.menu{display:flex;align-items:center;gap:2px;margin-left:auto}
.menu a{color:var(--claro);text-decoration:none;font-size:15px;font-weight:600;padding:8px 12px;border-radius:8px;white-space:nowrap}
.menu a:hover{color:#fff;background:rgba(255,255,255,.07)}
.menu a.activa{color:var(--oro)}
.menu a.boletin{background:var(--oro);color:#14161a;margin-left:10px}
.menu a.boletin:hover{background:#f5c451}
.menu a.idioma{border:1px solid var(--borde-osc);color:var(--azulado);margin-left:6px}
#menu-movil{position:absolute;opacity:0;pointer-events:none}
.abre-menu{display:none;margin-left:auto;color:#fff;border:1px solid var(--borde-osc);border-radius:8px;padding:6px 14px;
  cursor:pointer;font-weight:600;font-size:15px}

/* Portada */
.hero{background:radial-gradient(1100px 520px at 85% -10%,var(--marino-2) 0%,var(--marino) 62%);color:#fff;padding:56px 0 64px}
.hero-in{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(40px,5vw,60px);line-height:1.05;margin:0 0 18px}
.hero .sub{color:var(--claro);font-size:19px;margin:0 0 28px;max-width:30em}
.botones{display:flex;flex-wrap:wrap;gap:12px}
.boton{display:inline-block;padding:12px 22px;border-radius:10px;font-weight:600;border:1px solid var(--borde-osc);
  color:#fff;text-decoration:none}
.boton.principal{background:var(--oro);border-color:var(--oro);color:#14161a}
.boton.verde{background:var(--verde);border-color:var(--verde);color:#fff}
.boton.gris{background:#e7ecf2;border-color:#e7ecf2;color:var(--marino)}
.nota-hero{margin:18px 0 0;font-size:14px;color:var(--azulado)}
.tarjeta-hoy{background:#fff;color:var(--tinta);border-radius:16px;padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.tarjeta-hoy h2{font-size:21px;margin:0 0 2px;color:var(--marino)}
.tarjeta-hoy .cuando{font-size:13px;color:var(--tenue);margin:0 0 10px}
.tarjeta-hoy h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--suave);margin:14px 0 2px}
.mini{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.mini td{padding:5px 0;border-top:1px solid var(--linea)}
.mini td.num{text-align:right;padding-left:10px;white-space:nowrap}
.mini .encima{color:var(--rojo);font-weight:600}
.mini .debajo{color:var(--verde);font-weight:600}
.tarjeta-hoy .noticias-mini{font-size:14px;color:var(--suave);margin:12px 0 0}
.tarjeta-hoy .ver{display:inline-block;margin-top:12px;font-weight:600;text-decoration:none}

/* Secciones y tarjetas */
section{padding:64px 0}
section.gris{background:var(--caja)}
h2{font-size:clamp(24px,2.6vw,32px);line-height:1.2;margin:0 0 12px;color:var(--marino)}
.cabecera-seccion{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:22px}
.cabecera-seccion h2{margin:0}
.cabecera-seccion a{font-weight:600;text-decoration:none;white-space:nowrap}
.lead{font-size:18px;color:var(--suave);max-width:46em;margin:0 0 28px}
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}
a.tarjeta:hover{box-shadow:0 10px 30px rgba(11,26,46,.12);transform:translateY(-2px)}
.tarjeta img{display:block;width:100%;aspect-ratio:15/8;object-fit:cover;background:var(--marino)}
.tarjeta .cuerpo{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.tarjeta h3{margin:0;font-size:18px;line-height:1.35;color:var(--tinta)}
.tarjeta p{margin:0;color:var(--suave);font-size:15px}
.tarjeta .pie-tarjeta{margin-top:auto;padding-top:8px;font-size:13px;color:var(--tenue)}
.etiqueta{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--oro-osc);margin:0}
.producto .precio{font-size:20px;font-weight:700;color:var(--tinta);margin-top:6px}
.producto .boton{align-self:flex-start;margin-top:10px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.caja{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:24px}
.caja h3{margin:0 0 8px;color:var(--marino);font-size:20px}
.caja p{margin:0 0 10px;color:var(--suave)}
.pronto{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#e7ecf2;
  color:var(--marino-2);border-radius:999px;padding:2px 10px;vertical-align:middle}

/* Boletín */
.boletin-caja{background:#fff8e1;border-top:1px solid #f3e2b0;border-bottom:1px solid #f3e2b0}
.boletin-in{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
.boletin-in h2{margin:0 0 6px}
.boletin-in p{margin:0;color:var(--suave)}
.formulario{display:flex;gap:10px;flex-wrap:wrap}
.formulario input{flex:1;min-width:200px;font:inherit;padding:12px 14px;border:1px solid #c9d1d9;border-radius:10px}
.formulario button{font:inherit;font-weight:700;padding:12px 20px;border-radius:10px;border:none;background:var(--oro);
  color:#14161a;cursor:pointer}
.formulario small{flex-basis:100%;color:var(--tenue)}

/* Análisis: la lista y cada artículo */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.filtros button{font:inherit;font-size:14px;font-weight:600;border:1px solid var(--linea);background:#fff;border-radius:999px;
  padding:6px 14px;cursor:pointer;color:var(--marino)}
.filtros button.activo{background:var(--marino);color:#fff;border-color:var(--marino)}
.articulo{max-width:880px;padding:36px 24px 64px}
.miga{font-size:14px;color:var(--tenue);margin:0 0 18px}
.miga a{color:var(--tenue)}
.articulo h1{font-size:clamp(30px,3.6vw,42px);line-height:1.15;margin:6px 0 14px;color:var(--marino)}
.entradilla{font-size:19px;color:var(--suave);margin:0 0 20px}
.nota{border-left:4px solid var(--oro);background:#fffbea;padding:10px 14px;border-radius:8px;margin:0 0 20px;font-size:15px}
.articulo figure{margin:0 0 28px}
.articulo figure img{border-radius:12px;display:block}
.articulo figcaption{font-size:13px;color:var(--tenue);margin-top:8px}
.articulo h2{font-size:24px;margin:36px 0 10px}
.articulo h3{font-size:16px;text-transform:uppercase;letter-spacing:.05em;color:var(--suave);margin:28px 0 4px}
.articulo p,.articulo li{font-size:17px}
.articulo ul{padding-left:22px}
.articulo li{margin:0 0 8px}
.tabla{overflow-x:auto;margin:10px 0 8px;border:1px solid var(--linea);border-radius:12px}
.tabla table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.tabla th{background:var(--caja);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--suave);font-weight:700;
  text-align:left;padding:10px 12px;white-space:nowrap}
.tabla td{padding:9px 12px;border-top:1px solid var(--linea);white-space:nowrap}
.tabla .num{text-align:right}
.tabla td.ajusta{white-space:normal;min-width:170px}
.tabla .encima{color:var(--rojo);font-weight:600}
.tabla .debajo{color:var(--verde);font-weight:600}
.tabla tr.apagada td{color:var(--tenue)}
.tabla tr.ahora td{background:#eef3fa;font-weight:700;color:var(--marino)}
.sube{color:var(--verde)}
.baja{color:var(--rojo)}
.explica{font-size:14px;color:var(--suave);margin:8px 0 20px;line-height:1.55}
.noticias{list-style:none;padding:0;margin:10px 0}
.noticias li{display:flex;flex-wrap:wrap;gap:4px 14px;padding:9px 0;border-top:1px solid var(--linea);font-size:16px}
.noticias .hora{font-weight:700;font-variant-numeric:tabular-nums;min-width:130px}
.noticias .alta{color:var(--rojo);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em;align-self:center}
.aviso-riesgo{margin:36px 0 0;padding:16px 18px;border-radius:12px;background:var(--caja);border:1px solid var(--linea);
  font-size:14px;color:var(--suave)}
.anterior-siguiente{display:flex;justify-content:space-between;gap:16px;margin-top:28px;font-weight:600}
.anterior-siguiente a{text-decoration:none}

/* Páginas sencillas: «próximamente», teaser y legales */
.pagina{padding:48px 0 64px}
.estrecho{max-width:860px}
.pagina h1{font-size:clamp(30px,3.6vw,42px);color:var(--marino);margin:0 0 12px;line-height:1.15}
.lista-plan{padding-left:22px;margin:0 0 24px}
.lista-plan li{margin:0 0 10px;color:var(--suave)}
.lista-plan b{color:var(--tinta)}
.figura{margin:24px 0}
.figura img{border-radius:12px;border:1px solid var(--linea);display:block}
.figura figcaption{font-size:13px;color:var(--tenue);margin-top:8px}
.legal h2{font-size:21px;margin:30px 0 8px}
.legal p,.legal li{color:var(--suave)}
.legal ul{padding-left:20px}

/* Pie */
footer{background:var(--marino);color:var(--azulado);padding:40px 0;font-size:14px}
footer p{margin:0 0 10px;max-width:64em}
footer .enlaces{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 16px}
footer a{color:var(--claro)}

/* Tablet y móvil (6-nov: 1240 en vez de 1080, porque el menú tiene 8 secciones) */
@media (max-width:1240px){
  .abre-menu{display:block}
  .menu{display:none;position:absolute;top:64px;left:-24px;right:-24px;flex-direction:column;align-items:stretch;
    background:var(--marino);padding:6px 24px 18px;border-top:1px solid var(--borde-osc);box-shadow:0 16px 30px rgba(0,0,0,.3)}
  #menu-movil:checked ~ .menu{display:flex}
  .menu a{padding:12px 4px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.07)}
  .menu a.boletin,.menu a.idioma{margin:12px 0 0;text-align:center;border-radius:8px;border-bottom:none}
}
@media (max-width:900px){.hero-in,.boletin-in,.dos{grid-template-columns:1fr}.rejilla{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.contenedor{padding:0 16px}.rejilla{grid-template-columns:1fr}.marca{font-size:19px}
  section{padding:44px 0}.hero{padding:36px 0 44px}.articulo{padding:24px 16px 48px}.menu{left:-16px;right:-16px}
  .tarjeta-hoy{padding:18px}.cabecera-seccion{flex-direction:column;gap:4px}}
/* Quién soy (6-nov): foto redonda o, sin foto, el icono de la marca */
.quien{display:grid;grid-template-columns:170px 1fr;gap:34px;align-items:start;margin-top:8px}
.quien h1{margin-top:0}
.quien-foto{width:170px;height:170px;border-radius:50%;object-fit:cover;display:block;background:var(--marino)}
.quien-icono{display:flex;align-items:center;justify-content:center}
.quien-icono img{width:52%;height:auto}
@media (max-width:640px){.quien{grid-template-columns:1fr;gap:18px}.quien-foto{width:120px;height:120px}}
/* Diseño de la portada y del pie (6-nov, madrugada): línea real del NQ de fondo, cifras, iconos y pie en columnas */
.hero{position:relative;overflow:hidden}
.hero-in{position:relative;z-index:1}
.hero-portada{padding:72px 0 92px}
.hero-fondo{position:absolute;left:0;right:0;bottom:0;width:100%;height:82%;opacity:.6;pointer-events:none}
.hero-rejilla line{stroke:rgba(255,255,255,.045);stroke-width:1;vector-effect:non-scaling-stroke}
.hero-pie{position:absolute;right:24px;bottom:14px;margin:0;font-size:12px;color:var(--azulado);opacity:.75;z-index:1;max-width:60%;text-align:right}
.kicker-hero{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--oro);margin:0 0 14px}
.hero h1{letter-spacing:-.02em}
.cifras{background:#0f2340;padding:0;border-top:1px solid var(--borde-osc)}
.cifras-in{display:grid;grid-template-columns:repeat(4,1fr)}
.cifras-in>div{padding:24px 22px;border-left:1px solid var(--borde-osc)}
.cifras-in>div:first-child{border-left:none;padding-left:0}
.cifras b{display:block;color:#fff;font-size:22px;letter-spacing:-.01em}
.cifras span{display:block;color:var(--azulado);font-size:14px;margin-top:4px}
.tarjeta.seccion{border-top:3px solid var(--oro)}
.sec-icono{display:inline-flex;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center;background:#fff6dc;color:var(--oro-osc);margin-bottom:6px}
.sec-icono svg{width:22px;height:22px}
.cabecera-seccion .etiqueta{margin-bottom:6px}
footer{padding:50px 0 30px}
.pie-cols{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:36px;padding-bottom:28px;margin-bottom:22px;border-bottom:1px solid var(--borde-osc)}
.pie-cols h4{color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin:4px 0 12px}
.pie-cols ul{list-style:none;margin:0;padding:0}
.pie-cols li{margin:0 0 8px}
.pie-cols a{text-decoration:none}
.pie-cols a:hover{color:#fff}
.pie-marca p{color:var(--azulado);max-width:26em;margin:14px 0 0}
.pie-abajo p{font-size:13px}
@media (max-width:900px){.cifras-in{grid-template-columns:1fr 1fr}.cifras-in>div:nth-child(3){border-left:none;padding-left:0}}
@media (max-width:640px){.pie-cols{grid-template-columns:1fr 1fr;gap:24px}.pie-marca{grid-column:1/-1}
  .hero-pie{position:static;margin:18px 16px 0;max-width:none;text-align:left}.hero-portada{padding:40px 0 28px}
  .cifras-in>div{padding:16px 12px}.cifras-in>div:nth-child(odd){border-left:none;padding-left:0}}
@media (max-width:640px){.hero-fondo{opacity:.35;height:55%}}
/* Gráfico de la portada con los colores de su NinjaTrader (6-nov) */
.grafico-nt{margin:0;background:#222222;border:1px solid #3a3a3d;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.grafico-nt svg{display:block;width:100%;height:auto}
.grafico-nt figcaption{font-size:12px;color:#a9b0b8;padding:9px 14px 11px;border-top:1px solid #2d2d2f;background:#1c1c1e}
.mapa-seccion .tarjeta-hoy{box-shadow:none;border:1px solid var(--linea);max-width:720px;margin:0 0 24px}
.grafico-nt figcaption a{color:#e3c770}
.producto img{background:#222222;object-fit:cover;object-position:center top}
/* La tienda con 4 productos (6-nov: los 3 indicadores y MomentVM Wingman, el copiador de operaciones) */
.rejilla.cuatro{grid-template-columns:repeat(4,1fr);gap:18px}
.rejilla.cuatro .tarjeta h3{font-size:17px}
.rejilla.cuatro .producto .precio{font-size:16px;line-height:1.4}
@media (max-width:1100px){.rejilla.cuatro{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.rejilla.cuatro{grid-template-columns:1fr}}
/* Guías de Aprende (6-nov): el índice «En esta guía», títulos en minúscula y la nota del principio */
.guia h2,.guia h3{scroll-margin-top:84px}
.guia h3{font-size:19px;text-transform:none;letter-spacing:0;color:var(--marino);margin:26px 0 6px}
.guia blockquote{margin:0 0 24px;border-left:4px solid var(--oro);background:#fffbea;padding:12px 16px;border-radius:8px}
.guia blockquote p{margin:0;font-size:16px}
.guia figure img{border:1px solid var(--linea)}
.indice-guia{background:var(--caja);border:1px solid var(--linea);border-radius:12px;padding:16px 20px;margin:0 0 28px}
.indice-guia p{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--oro-osc)}
.indice-guia ol{margin:0;padding-left:20px;columns:2;column-gap:36px}
.indice-guia li{font-size:15px;margin:0 0 6px;break-inside:avoid}
.indice-guia a{text-decoration:none}
@media (max-width:640px){.indice-guia ol{columns:1}}