/* firma · ajuste medido de tipografía y sello de Vigencia · macro: Workbench (Product) · theme: Oficio claro/oscuro, acento timbre 262 · direction: minimal-modern con acento editorial · critique: P4 J5 E4 F4 H5 V4
   Tercer pase de la landing (feat/magnar-landing). Se carga DESPUES de hoja.css, que sigue siendo la fuente de
   los tokens, del tema oscuro, del timbre, del interruptor de tema y de los plegables; este archivo solo
   compone la portada (clases m-*) y no toca el bloque @comun que comparten /planes, /datos, /registro y /login.
   Hard rule 7, timbre inclinado sobre el borde del marco del producto: un timbre se estampa sobre el documento
   que certifica, y la grabacion es el documento. Swap test: reescrita para otro cliente la frase deja de ser
   verdad, porque ningun otro producto emite idNorma, idParte, version y estado en cada respuesta.
   Hard rule 7, marco con barra sobre la grabacion: la barra no dibuja un navegador falso (sin puntos ni URL),
   solo rotula que es una grabacion real y aloja el control de pausa que exige WCAG 2.2.2.
   Hard rule 7, nav flotante con desenfoque: queda pegada arriba mientras se lee la portada para que la
   entrada al chat este siempre a un toque; el desenfoque se apoya en el contenido real que pasa por detras. */

/* @m-base-inicio */
/* Sistema de forma de la portada (producto): contenedores 16, controles 12, pastillas 999. El resto de las
   paginas publicas conserva el radio de 2 px del bloque @comun. */
:root {
  --m-r-lg: 16px;
  --m-r-md: 12px;
  --m-r-pill: 999px;
  --m-ancho: 1200px;
  --m-seccion: clamp(72px, 9vw, 128px);
  --f-titulo: var(--f-sans);
  --m-type-xs: 12px;
  --m-type-micro: 13px;
  --m-type-sm: 14px;
  --m-type-body: 16px;
  --m-type-lead: 18px;
  --m-type-title-sm: 20px;
  --m-type-title-md: 28px;
  --m-type-title-lg: clamp(30px, 1.4rem + 2.4vw, 52px);
  --m-type-display: clamp(44px, calc(20px + 4.17vw), 80px);
  --fs-hero: var(--m-type-display);
  --fs-m-h2: var(--m-type-title-lg);
}

.h.m { background: var(--hoja); font-family: var(--f-sans); font-size: var(--m-type-body); line-height: 1.6; color: var(--tinta); }
.m-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.m-wrap { width: 100%; max-width: var(--m-ancho); margin: 0 auto; padding-inline: var(--space-lg); }

/* ------------------------------------------------------------------ nav flotante */
.m-nav-wrap { position: sticky; top: 0; z-index: 50; padding: var(--space-sm) var(--space-md) 0; pointer-events: none; }
.m-nav { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); max-width: 880px; margin: 0 auto; min-height: 56px; padding: 6px 6px 6px var(--space-md); border: 1px solid var(--regla-fuerte); border-radius: var(--m-r-pill); background: color-mix(in oklch, var(--hoja) 84%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.h .m-marca { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; color: var(--tinta); font-family: var(--f-sans); font-weight: 600; font-size: var(--m-type-lead); letter-spacing: -0.02em; text-decoration: none; }
.h .m-marca:hover { color: var(--tinta); text-decoration: none; }
.m-marca svg { display: block; width: 20px; height: 20px; flex: none; }
.m-nav-links { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--m-type-sm); }
.h .m-nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--m-r-pill); color: var(--tinta-2); text-decoration: none; transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.h .m-nav-links a:hover { background: var(--hoja-2); color: var(--tinta); text-decoration: none; }
.m-nav-der { display: flex; align-items: center; gap: var(--space-xs); }
.h .m-nav-entrar { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-lg); border-radius: var(--m-r-pill); background: var(--tinta); color: var(--hoja); font-size: var(--m-type-sm); font-weight: 600; text-decoration: none; transition: background-color var(--dur) var(--ease-out); }
.h .m-nav-entrar:hover { background: var(--timbre); color: var(--hoja); text-decoration: none; }
.h .m-nav-entrar:active { background: var(--timbre-2); }
.m-nav .h-tema { border-radius: var(--m-r-pill); border-color: transparent; }
.m-nav .h-tema:hover { border-color: var(--regla-fuerte); }

.m-sec { padding: var(--m-seccion) 0; }
.m-sec-alt { background: var(--hoja-2); }
.m-h2 { margin: 0; max-width: 22ch; font-family: var(--f-titulo); font-weight: 600; font-size: var(--fs-m-h2); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; color: var(--tinta); }
.m-h3 { margin: 0; font-size: var(--m-type-title-sm); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--tinta); }
.m-p { margin: var(--space-lg) 0 0; max-width: 62ch; font-size: var(--m-type-body); line-height: 1.6; color: var(--tinta-2); }
.m-nota { margin: var(--space-lg) 0 0; max-width: 70ch; font-size: var(--m-type-sm); line-height: 1.6; color: var(--tinta-3); }

.m-inv { background: var(--tinta); color: var(--hoja); --timbre: oklch(78% 0.12 262); }
:root[data-theme="dark"] .m-inv { --timbre: oklch(40% 0.17 262); }
.m-inv .m-h2 { color: var(--hoja); max-width: 20ch; }
.m-inv .m-p { color: color-mix(in oklch, var(--hoja) 82%, var(--tinta)); }
.m-cierre { display: flex; flex-direction: column; align-items: center; text-align: center; }
.m-cierre .m-h2 .h-lo { display: block; margin: 0 0 var(--space-md); font-size: var(--m-type-xs); vertical-align: baseline; }

/* pie: una línea y los accesos */
.m-pie { padding: var(--space-2xl) 0 var(--space-3xl); }
.m-pie-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); }
.m-pie-frase { margin: 0; font-size: var(--m-type-sm); color: var(--tinta-2); }
.m-pie-lista { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin: 0; padding: 0; list-style: none; font-size: var(--m-type-sm); }
.h .m-pie-lista a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); }
.h .m-pie-lista a:hover { color: var(--timbre); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .m-rv { animation: h-rise 1ms linear both; animation-timeline: view(); animation-range: entry 5% entry 40%; }
    .m-rv-2 { animation-range: entry 15% entry 50%; }
    .m-rv-3 { animation-range: entry 25% entry 60%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .h .m-nav-links a, .h .m-nav-entrar, .m-tab, .m-pausa, .m-btn, .m-card { transition: none; }
}

@media (max-width: 767px) {
  .m-nav-links { display: none; }
  .m-pie-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 639px) {
  .m-wrap { padding-inline: var(--space-md); }
}

/* @m-base-fin */

/* ------------------------------------------------------------------ hero */
.m-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(32px, 5vw, 64px) var(--space-lg) 0; }
.m-firma { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); max-width: 100%; margin: 0; color: var(--tinta-2); font-family: var(--f-mono); font-size: var(--m-type-micro); line-height: 1.5; font-variant-numeric: tabular-nums; }
.m-firma svg { flex: none; width: 20px; height: 20px; color: var(--timbre); }
.m-h1 { margin: var(--space-lg) 0 0; max-width: 17ch; font-family: var(--f-titulo); font-weight: 600; font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; color: var(--tinta); }
.m-sub { margin: var(--space-lg) 0 0; max-width: 54ch; font-size: var(--m-type-lead); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.m-hero .m-caja { width: 100%; max-width: 720px; margin: var(--space-xl) 0 0; text-align: left; }
.m-hero-pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-lg); margin: var(--space-sm) 0 0; }

/* caja de consulta: el campo es la pieza central de la portada */
.m-caja .h-caja-marco { padding: 6px; border: 1px solid var(--regla-fuerte); border-radius: calc(var(--m-r-lg) + 2px); background: var(--hoja); }
.m-caja .h-caja-marco:focus-within { outline: 2px solid var(--timbre); outline-offset: 3px; }
.m-caja textarea { border-radius: var(--m-r-md); font-size: var(--m-type-body); }
.m-caja .h-caja-env { margin: 0 var(--space-2xs) var(--space-2xs) 0; border-radius: var(--m-r-md); }
.m-chips { justify-content: center; margin-top: var(--space-md); }
.m-caja .h-chip { border-radius: var(--m-r-pill); background: transparent; }

/* ------------------------------------------------------------------ producto en pantalla grande */
.m-demo { max-width: 1120px; margin: clamp(32px, 4vw, 56px) auto 0; padding-inline: var(--space-lg); }
.m-demo-fig { margin: 0; }
.m-marco { overflow: hidden; border: 1px solid var(--regla-fuerte); border-radius: var(--m-r-lg); background: var(--hoja-2); }
.m-marco-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 48px; padding: 0 var(--space-xs) 0 var(--space-md); border-bottom: 1px solid var(--regla); background: var(--hoja); color: var(--tinta-3); font-size: var(--m-type-sm); }
.m-marco-t { display: inline-flex; align-items: center; gap: var(--space-xs); }
.m-marco-t svg { width: 16px; height: 16px; color: var(--tinta); }
.m-pausa { min-height: 44px; padding: 0 var(--space-md); border: 1px solid transparent; border-radius: var(--m-r-pill); background: transparent; color: var(--tinta-2); font-family: var(--f-sans); font-size: var(--m-type-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.m-pausa:hover { background: var(--hoja-2); border-color: var(--regla-fuerte); color: var(--tinta); }
.m-pausa:active { background: var(--timbre-fondo); }
.m-pausa:focus-visible { outline: 2px solid var(--timbre); outline-offset: 2px; }
.m-pausa[hidden] { display: none; }
.m-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--hoja-2); }
.m-video-oscuro { display: none; }
:root[data-theme="dark"] .m-video-claro { display: none; }
:root[data-theme="dark"] .m-video-oscuro { display: block; }
.m-demo-pie { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-xl); margin-top: var(--space-md); }
.m-demo-pie figcaption { max-width: 52ch; padding-top: var(--space-xs); font-size: var(--m-type-sm); line-height: 1.6; color: var(--tinta-3); }
.m-demo-pie .h-timbre { position: relative; z-index: 2; flex: none; width: 264px; margin: -40px var(--space-xl) 0 0; }

/* imágenes por tema */
.m-fig { margin: 0; }
.m-fig img, .m-marco-sm img { display: block; width: 100%; height: auto; }
.m-fig .m-img-oscuro, .m-marco-sm .m-img-oscuro { display: none; }
:root[data-theme="dark"] .m-fig .m-img-claro, :root[data-theme="dark"] .m-marco-sm .m-img-claro { display: none; }
:root[data-theme="dark"] .m-fig .m-img-oscuro, :root[data-theme="dark"] .m-marco-sm .m-img-oscuro { display: block; }

/* ------------------------------------------------------------------ fuentes */
.m-fuentes { margin-top: var(--m-seccion); padding: var(--space-3xl) 0; border-top: 1px solid var(--regla); border-bottom: 1px solid var(--regla); }
.m-h4 { margin: 0; font-size: var(--m-type-sm); font-weight: 600; letter-spacing: 0; color: var(--tinta-3); }
.m-fuentes-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.m-fuentes-lista li { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-top: 1px solid var(--regla); }
.m-f-n { font-size: var(--m-type-body); font-weight: 600; letter-spacing: -0.01em; color: var(--tinta); }
.m-f-c { font-size: var(--m-type-sm); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.m-f-c b { font-size: var(--m-type-lead); font-weight: 600; color: var(--tinta-2); }

/* ------------------------------------------------------------------ secciones */
.m-dos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.m-dos-par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); margin-top: var(--space-2xl); }
.m-filas { margin: var(--space-xl) 0 0; padding: 0; }
.m-filas > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--space-md); padding: var(--space-md) 0; border-top: 1px solid var(--regla); }
.m-filas > div:last-child { border-bottom: 1px solid var(--regla); }
.m-filas dt { font-weight: 600; color: var(--tinta); }
.m-filas dd { margin: 0; color: var(--tinta-2); }
.m-caso { margin: 0; }
.m-caso figcaption { margin-top: var(--space-md); max-width: 56ch; font-size: var(--m-type-sm); line-height: 1.6; color: var(--tinta-3); }
.m-caso figcaption b { color: var(--tinta); }

/* capacidades: lista a la izquierda, captura real a la derecha */
.m-caps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; margin-top: var(--space-2xl); }
.m-tabs { display: flex; flex-direction: column; }
.m-tab { display: flex; align-items: baseline; gap: var(--space-md); width: 100%; min-height: 64px; padding: var(--space-md) 0 var(--space-md) var(--space-md); border: 0; border-top: 1px solid var(--regla-fuerte); border-left: 2px solid transparent; background: transparent; color: var(--tinta-3); font-family: var(--f-sans); text-align: left; cursor: pointer; transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.m-tab:hover { color: var(--tinta); background: color-mix(in oklch, var(--hoja) 55%, transparent); }
.m-tab:focus-visible { outline: 2px solid var(--timbre); outline-offset: -2px; }
.m-tab[aria-selected="true"] { color: var(--tinta); border-left-color: var(--timbre); }
.m-tab-n { flex: none; font-size: var(--m-type-sm); font-variant-numeric: tabular-nums; }
.m-tab-t { font-size: var(--m-type-title-sm); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.m-tab-d { margin: 0; padding: 0 var(--space-md) var(--space-lg) calc(var(--space-md) + 2.1rem); color: var(--tinta-2); font-size: var(--m-type-body); line-height: 1.6; max-width: 52ch; }
.m-tab[aria-selected="false"] + .m-tab-d { display: none; }
.m-vista { position: sticky; top: 88px; overflow: hidden; border: 1px solid var(--regla-fuerte); border-radius: var(--m-r-lg); background: var(--hoja); }
.m-vista:focus-visible { outline: 2px solid var(--timbre); outline-offset: 3px; }
.m-vista .m-fig[hidden] { display: none; }
html.no-js .m-tab[aria-selected="false"] + .m-tab-d { display: block; }
html.no-js .m-vista { position: static; }
html.no-js .m-vista .m-fig[hidden] { display: block; }
.m-plegable { margin-top: var(--space-3xl); border-top: 1px solid var(--regla-fuerte); }
.m-plegable > summary { font-family: var(--f-sans); font-weight: 600; font-size: var(--m-type-body); }
.m-plegable .h-cobertura { margin-top: 0; }
.m-plegable .h-cobertura .h-h3 { font-family: var(--f-sans); font-weight: 600; margin-top: 0; }
.m-plegable .h-h3, .m-plegable h4 { font-family: var(--f-sans); font-weight: 600; }
.m-plegable .h-mcp-lista li { border-top-color: var(--regla-fuerte); }

/* prueba medible */
.m-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: var(--space-3xl) 0 0; padding: 0; list-style: none; }
.m-cifras > li { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-top: 1px solid var(--regla-fuerte); }
.m-cifra { display: block; font-family: var(--f-titulo); font-weight: 500; font-size: var(--m-type-title-lg); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--tinta); }
.m-cifra small { font-size: var(--m-type-micro); font-weight: 400; letter-spacing: 0; color: var(--tinta-3); margin-left: 2px; }
.m-cifras .is-cero .m-cifra { color: var(--timbre); }
.m-cifras p { margin: var(--space-md) 0 0; max-width: 30ch; font-size: var(--m-type-sm); line-height: 1.55; color: var(--tinta-2); }
.m-cifras b { color: var(--tinta); }

/* planes: el pago se distingue por tono y borde, no por tamaño */
.m-planes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; align-items: stretch; }
.m-planes > li { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); border: 1px solid var(--regla-fuerte); border-radius: var(--m-r-lg); background: var(--hoja); }
.m-planes > li.is-pago { border-color: var(--timbre); border-width: 2px; padding: calc(var(--space-lg) - 1px); }
.m-plan-n { font-size: var(--m-type-lead); font-weight: 600; letter-spacing: -0.01em; color: var(--tinta); }
.m-plan-p { margin-top: var(--space-xs); font-size: var(--m-type-title-md); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tinta); }
.m-plan-p small { display: block; margin-top: var(--space-2xs); font-size: var(--m-type-micro); font-weight: 400; letter-spacing: 0; color: var(--tinta-3); }
.m-plan-d { margin: var(--space-xs) 0 0; font-size: var(--m-type-sm); line-height: 1.55; color: var(--tinta-2); }

/* seguridad y datos */
.m-lista { margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.m-lista li { padding: var(--space-md) 0; border-top: 1px solid var(--regla); color: var(--tinta-2); }
.m-lista li:last-child { border-bottom: 1px solid var(--regla); }
.m-preguntas-t { margin-top: var(--space-4xl); }
.m-faq { margin-top: var(--space-md); max-width: 820px; }
.m-faq .h-plegable > summary { font-family: var(--f-sans); font-weight: 600; font-size: var(--m-type-body); }

/* cierre: Por tanto, con la caja otra vez. Banda invertida (tinta sobre hoja), con el acento ajustado a su fondo. */
.m-cierre .m-caja { width: 100%; max-width: 720px; margin: var(--space-xl) 0 0; text-align: left; }
.m-inv .h-caja-marco { border-color: transparent; }


@media (max-width: 1023px) {
  .m-dos, .m-caps { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .m-vista { position: static; }
  .m-fuentes-lista, .m-cifras, .m-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-planes > li { min-width: 0; }
}
@media (max-width: 767px) {
  .m-demo-pie { flex-direction: column; gap: var(--space-md); }
  .m-demo-pie .h-timbre { width: min(100%, 280px); margin: 0 0 0 var(--space-xs); }
  .m-dos-par { grid-template-columns: minmax(0, 1fr); }
  .m-filas > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}
@media (max-width: 639px) {
  .m-demo { padding-inline: var(--space-md); }
  .m-hero { padding-inline: var(--space-md); padding-top: var(--space-lg); }
  .m-h1 { margin-top: var(--space-xs); }
  .m-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--space-md)); padding-inline: var(--space-md) 32px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); }
  .m-chips li { flex: none; scroll-snap-align: start; }
  .m-hero-pie { flex-direction: column; align-items: center; }
  .m-fuentes-lista, .m-cifras, .m-planes { grid-template-columns: minmax(0, 1fr); }
  .m-tab-t { font-size: var(--m-type-title-sm); }
  .m-tab-d { padding-left: calc(var(--space-md) + 2rem); }
}
.m-firma-c { display: none; }
@media (max-width: 560px) {
  .m-firma { margin-top: var(--space-md); }
  .m-firma-l { display: none; }
  .m-firma-c { display: inline; }
}