/* Lean Browser · propuesta 1, séptima ronda (17-oct): una hoja para todas las páginas (inicio, /precios, /pro).
   Qué es gratis, qué se paga y a qué precio sale solo de Lean/Modelo de negocio.md (D-0089), nunca de este archivo.
   Origen, cuarta ronda (17-oct) con tasteskill v2 (design-taste-frontend).
   Dirección «The product performs» (seed 632396152). Composición del hero según la dirección: titular corto
   arriba a la izquierda y el resto de la primera pantalla es la ventana de Lean funcionando.
   Secciones redibujadas por lo que Juan rechazó en la tercera ronda: pasos con una sola ventana que cambia
   de estado (how-it-works-pinned-fragment-changing-state, sin bloques de 80vh porque el scroll era eterno),
   funciones en cuatro celdas con la pieza entera dentro (sin recortes), precio en dos campos
   (pricing-two-plans-two-fields), preguntas con índice y respuesta (faq-question-index-answer-pane),
   cierre y pie en un solo campo de noche (footer-invitation-over-cropped-wordmark). Sin el tablero de reglas.
   Material de Lean, copiado: tokens de la barra y colores medidos de la ventana real (screen.css del atlas
   validado contra el nativo + captura del 16-oct), color de pestaña de Tab::PaintLeanContextIndicators,
   teal de LeanGuardButton, Segoe UI Variable de lean_newtab/app.css, el cielo por hora (tabla SKY y su ajuste
   de contraste) de lean_newtab/app.js, paleta de 10 de D-0086, textos de generated_resources (es-419),
   Paréntesis según Lean/Parentesis.md (ventana al 62 % y píldora abajo al centro).
   Excepción declarada a la regla «sin degradados»: el cielo de Lean, pedido por Juan. Nada más lleva degradado. */

@property --sky-top { syntax: '<color>'; inherits: true; initial-value: #6892af; }
@property --sky-mid { syntax: '<color>'; inherits: true; initial-value: #b6c5d2; }
@property --sky-bot { syntax: '<color>'; inherits: true; initial-value: #ecd4b9; }
@property --sky-glow { syntax: '<color>'; inherits: true; initial-value: rgba(255, 229, 198, .58); }
@property --sky-glow-x { syntax: '<percentage>'; inherits: true; initial-value: 58%; }
@property --sky-glow-y { syntax: '<percentage>'; inherits: true; initial-value: 72%; }

:root {
  /* página */
  --maxw: 1440px;
  --margin: clamp(1rem, 3vw, 3rem);
  --gutter: clamp(.75rem, 1.4vw, 1.5rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --display-font: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --ui-font: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --s-small: .9375rem;                                   /* 15 */
  --s-body: clamp(1.0625rem, 1rem + .2vw, 1.125rem);     /* 17–18 */
  --s-lead: clamp(1.25rem, 1rem + .6vw, 1.5rem);         /* 20–24 */
  --s-head: clamp(2rem, 1rem + 2.6vw, 3.5rem);           /* 32–56 */
  --s-display: clamp(2.125rem, .5rem + 5vw, 5.5rem);     /* 34–88 */
  --radius: 14px;
  --sky-ink: #0F1C1E;
  --sky-soft: color-mix(in srgb, var(--sky-ink) 74%, transparent);
  --bg: #b6c5d2;
  --accent: #1A9E94;          /* LeanGuardButton kLeanTeal */
  --accent-strong: #24BDA9;   /* hover del mismo botón */
  --accent-ink: #031F1D;
  --paper: #FBF9F5;           /* INK_LIGHT de app.js */
  --night-ink: #0F1C1E;       /* INK_DARK de app.js */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms; --t-hover: 180ms; --t-ui: 240ms; --t-reveal: 800ms;
  /* Contextos: colores reales (tab.cc / registro) y dos de la paleta de 10 (D-0086) */
  --c-personal: #4F83FF; --c-trabajo: #9B6CFF; --c-banca: #20B486; --c-temporal: #E28A2E;
  --c-cliente: #84CC16; --c-tienda: #F4614A; --c-clinica: #557C85; /* Petróleo, D-0086 */
  --c-anuncios: #EC4899; --c-servidores: #526BA4; --c-nuevo: #00C8FF; /* paleta de D-0086 */
  /* interfaz de Lean, tema claro (screen.css) */
  --frame: #F1EADF; --surface: #FAF7F2; --field: #FFFFFF; --ui-ink: #1A1612; --ui-muted: #635B51;
  --line: #E4DACB; --action: #0E6E66; --tint: #E1F1EF;
  --ui-shadow: 0 12px 40px #33251921, 0 2px 7px #33251914;
  --win-shadow: 0 30px 80px #1a14102e, 0 6px 18px #1a14101f;
}
/* La interfaz de Lean se muestra siempre en su tema claro: todas las piezas viven en secciones donde el cielo es de
   día, y así el color de la página lo decide la hora del cielo y no el tema de Windows del visitante.
   Tema oscuro medido el 16-oct, por si una pieza llega a una sección de noche:
   frame #161210 · surface #28221E · field #1E1915 · ink #EDE7E0 · muted #C2B8AD · line #3A322C · action #85DAD1 · tint #0E3B36 */
:root { --ui-zoom: 1.3; --shot-zoom: 1.12; --piece-zoom: 1.15; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: light dark; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; font-family: var(--ui-font); font-size: var(--s-body); line-height: 1.5; color: var(--sky-ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-family: var(--display-font); font-weight: 600; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
p { text-wrap: pretty; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: 8px; z-index: 30; transform: translateY(-160%); background: var(--paper); color: var(--night-ink); padding: 10px 14px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip:focus { transform: none; }
.ink { color: var(--sky-ink); transition: color 420ms ease; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* ---------- el cielo de Lean (lean_newtab/app.css), ligado al scroll ---------- */
.sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 58%, oklch(5% 0.01 250 / 0.16)), /* taste-skill-ignore: el cielo de Lean, pedido por Juan */
    linear-gradient(180deg, var(--sky-top), var(--sky-mid) 58%, var(--sky-bot)); /* taste-skill-ignore */
  transition: --sky-top 520ms linear, --sky-mid 520ms linear, --sky-bot 520ms linear;
}
.sky::before { content: ""; position: absolute; inset: -12%;
  background: radial-gradient(52% 46% at var(--sky-glow-x) var(--sky-glow-y), var(--sky-glow), transparent 72%); /* taste-skill-ignore */
  transition: --sky-glow 520ms linear, --sky-glow-x 520ms linear, --sky-glow-y 520ms linear; }
.sky::after { content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size: 180px 180px; }
main, .top { position: relative; z-index: 1; }

/* ---------- controles de página ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--accent-ink); font: 600 var(--s-body)/1 var(--ui-font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.btn:active { transform: scale(.97); }
.btn.sm { min-height: 40px; padding: 0 18px; font-size: var(--s-small); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .22em; text-decoration-thickness: .07em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent-strong); }
  .link:hover { text-decoration-color: currentColor; }
}

/* ---------- arriba ---------- */
.top { position: absolute; inset: 0 0 auto 0; z-index: 5; }
.top .wrap { display: flex; align-items: center; gap: 32px; padding-top: 18px; padding-bottom: 18px; font-size: var(--s-small); }
.mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; }
.mark [data-logo] { display: inline-block; flex: none; width: 30px; height: 30px; }
.mark svg { width: 30px; height: 30px; color: var(--accent); }
/* el logo y el nombre arriba, más grandes que el menú (Juan, 17-oct) */
.top .mark { font-size: var(--s-body); }
.top nav { margin-left: auto; display: flex; gap: 28px; }
.top nav a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .3em; text-decoration-thickness: .07em; white-space: nowrap; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .top nav a:hover { text-decoration-color: currentColor; } }

/* ---------- hero: titular arriba, la ventana de Lean ocupa el resto ---------- */
.hero { padding-top: clamp(6.5rem, 15vh, 9rem); }
/* el hero va centrado: titular en dos líneas, el texto debajo, el botón y la línea de Windows; la ventana debajo (Juan, 17-oct) */
.hero .head { display: block; text-align: center; }
.hero h1 { margin: 0 auto; font-size: var(--s-display); line-height: .98; letter-spacing: -.04em; }
/* máscara de la animación de línea: deja lugar arriba y abajo para tildes y para lo que baja de la línea (g, p, q, y), que se cortaba */
/* los márgenes negativos entre líneas vecinas se colapsan: cada línea devuelve todo su relleno abajo (-.5em) y solo la primera devuelve el de arriba */
.lines .line { display: block; overflow: hidden; padding: .2em 0 .3em; margin: 0 0 -.5em; }
.lines .line:first-child { margin-top: -.2em; }
.lines .line:last-child { margin-bottom: -.3em; }
.lines .line.open { overflow: visible; }
.lines [data-line] { display: block; }
/* bajo el titular, una fila: el texto a la izquierda y la descarga a su derecha (Juan, 17-oct) */
.hero .aside { margin: 30px auto 0; max-width: 900px; display: flex; align-items: center; justify-content: center; gap: 24px 48px; text-align: left; }
.hero .sub { margin: 0; max-width: 44ch; font-size: var(--s-lead); line-height: 1.4; text-wrap: pretty; }
.hero .dl { flex: none; width: 23rem; display: grid; justify-items: start; gap: 10px; }
.hero .act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.hero .meta { font-size: var(--s-small); }
/* la versión va en su propia línea: cuando version.json la completa, la línea no pasa de una a dos y la fila no salta */
.hero .meta [data-v="beta"] { display: block; }
.hero .facts { list-style: none; padding: 0; margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--s-small); font-weight: 600; }
.hero .facts li + li::before { content: "·"; margin: 0 .55em; font-weight: 400; opacity: .6; }
.hero .stage { margin-top: clamp(2rem, 5vh, 3.5rem); height: clamp(440px, 54vh, 580px); position: relative; }
.hero .stage > [data-ui] { height: 100%; zoom: var(--ui-zoom); }

/* ---------- la ventana de Lean (data-ui): medidas de la captura real del 16-oct (e-banco-tres-pestanas-1440.png) ----------
   tira de pestañas 42 px · pestañas píldora de 28 px y 232 px, 6 px entre ellas · «+» de 10 px y «⌄» de 6 px ·
   controles de ventana de 46 px con glifos de 10 px a 1 px · barra 42 px · caja de dirección centrada, 46 % del ancho ·
   colores: marco #161210, barra #28221E, caja #1E1915, pestaña activa = Contexto 60 % sobre la barra, inactiva =
   (Contexto 65 % + #8f8f8f) 30 % sobre el marco, chip = Contexto 12 % sobre la caja (tema oscuro, medidos píxel a píxel;
   el tema claro usa las mismas fórmulas con los colores de screen.css). */
[data-ui] { font-family: var(--ui-font); font-size: 13px; line-height: 1.35; color: var(--ui-ink); -webkit-font-smoothing: auto; text-align: left; }
[data-ui] .icon { width: 16px; height: 16px; flex: none; pointer-events: none; }
[data-ui] .wicon { width: 10px; height: 10px; flex: none; pointer-events: none; }
[data-ui] .lean-logo { width: 16px; height: 16px; flex: none; color: #1A9E94; }
[data-ui] button { background: none; border: 0; padding: 0; cursor: pointer; }
[data-ui] .win { background: var(--frame); border-radius: 12px; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
[data-ui] .tabstrip { height: 42px; padding: 0 0 0 8px; display: flex; gap: 6px; align-items: center; background: var(--frame); flex: none; }
[data-ui] .tsearch { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ui-ink) 9%, var(--frame)); color: var(--ui-muted); flex: none; }
[data-ui] .tsearch .icon { width: 11px; height: 11px; }
[data-ui] .tabs { display: flex; gap: 6px; min-width: 0; align-items: center; height: 28px; overflow: hidden; }
[data-ui] .tab { min-width: 70px; width: 232px; flex: 0 1 232px; display: flex; align-items: center; gap: 8px; height: 28px; border-radius: 14px; padding: 0 7px 0 12px; white-space: nowrap; font-size: 12px; color: var(--ui-ink);
  background: color-mix(in srgb, color-mix(in srgb, var(--ctx) 65%, #8f8f8f) 22%, var(--frame)); transition: background-color var(--t-hover) ease; }
[data-ui] .tab.active { background: color-mix(in srgb, var(--ctx) 50%, var(--surface)); }
[data-ui] .tab:hover:not(.active) { background: color-mix(in srgb, var(--ctx) 30%, var(--frame)); }
[data-ui] .tab .title { overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: left; }
[data-ui] .tab.is-new { animation: tab-in 360ms var(--ease-out); }
@keyframes tab-in { from { opacity: 0; transform: translateY(6px); } }
[data-ui] .favicon { display: inline-grid; place-items: center; border-radius: 50%; width: 16px; height: 16px; font-size: 9px; font-weight: 700; background: color-mix(in srgb, var(--ui-ink) 10%, transparent); color: var(--ui-ink); flex: none; }
[data-ui] .tab-close { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: none; color: inherit; position: relative; }
/* la ✕ del demo que se toca mide 24 px (Lighthouse target-size); el margen negativo deja la pestaña del mismo ancho */
[data-ui] button.tab-close { width: 24px; height: 24px; margin: 0 -3px; }
[data-ui] .tab-close .icon { width: 9px; height: 9px; }
[data-ui] .tab-close:hover { background: color-mix(in srgb, var(--ui-ink) 14%, transparent); }
[data-ui] .tab-actions { display: flex; gap: 8px; align-items: center; flex: none; margin-left: 4px; }
[data-ui] .ib { height: 30px; width: 30px; padding: 7px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--ui-muted); }
[data-ui] .ib.pressed { background: color-mix(in srgb, var(--ui-ink) 12%, transparent); }
[data-ui] .tab-actions .ib { width: 22px; height: 22px; padding: 5px; }
[data-ui] .tab-actions .ib .icon { width: 11px; height: 11px; }
[data-ui] .tab-actions .ib[data-icon="down"] .icon { width: 9px; height: 9px; }
[data-ui] .wctl { display: flex; height: 42px; margin-left: auto; flex: none; }
[data-ui] .wctl .ib { width: 46px; height: 42px; border-radius: 0; padding: 0; color: var(--ui-ink); }
[data-ui] .wctl .ib:hover { background: color-mix(in srgb, var(--ui-ink) 8%, transparent); }
[data-ui] .wctl .ib.close:hover { background: #C42B1C; color: #fff; }
[data-ui] .toolbar { height: 42px; display: flex; gap: 4px; align-items: center; padding: 0 8px; flex: none; background: var(--surface); position: relative; }
[data-ui] .toolbar .nav { display: flex; gap: 2px; align-items: center; flex: none; }
[data-ui] .toolbar .spring { flex: 1 1 0; min-width: 6px; }
[data-ui] .omni { height: 34px; border-radius: 17px; display: flex; align-items: center; gap: 4px; padding: 0 5px; background: var(--field); flex: 0 1 46%; width: 46%; min-width: 0; position: relative; }
[data-ui] .omni:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, #1A9E94 70%, transparent); }
[data-ui] .omni .ib { width: 26px; height: 26px; padding: 5px; }
[data-ui] .chip { display: flex; align-items: center; gap: 6px; padding: 0 9px 0 7px; height: 26px; border-radius: 13px; flex: none; color: var(--ui-ink); white-space: nowrap;
  background: color-mix(in srgb, var(--context) 18%, var(--field)); font-size: 12px; transition: background-color var(--t-ui) ease; }
[data-ui] .chip .lean-logo { width: 14px; height: 14px; }
[data-ui] .chip .icon { width: 10px; height: 10px; }
[data-ui] .chip i { width: 1px; height: 10px; background: color-mix(in srgb, var(--context) 30%, var(--ui-muted)); flex: none; }
[data-ui] .chip .note { display: none; }
[data-ui] .chip.notice .note { display: inline; }
[data-ui] .chip.notice .cname, [data-ui] .chip.notice .icon { display: none; }
[data-ui] .pill { height: 20px; padding: 0 9px; border-radius: 10px; background: var(--tint); color: var(--action); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; flex: none; }
[data-ui] .pill.quiet { background: none; color: var(--ui-muted); font-weight: 400; }
[data-ui] .url { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font-size: 13px; padding: 0 0 0 6px; color: var(--ui-ink); }
[data-ui] .url::placeholder { color: var(--ui-muted); }
[data-ui] .host { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; padding-left: 6px; }
[data-ui] .host span { color: var(--ui-muted); }
[data-ui] .guard { color: #1A9E94; }
[data-ui] .guard:hover { color: #24BDA9; }
[data-ui] .ib.appmenu { width: 34px; height: 34px; border-radius: 50%; padding: 8px; background: color-mix(in srgb, var(--ui-ink) 10%, var(--surface)); color: var(--ui-ink); }
[data-ui] .pop { position: absolute; z-index: 4; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--ui-shadow); padding: 6px 0; }
[data-ui] .pop[hidden] { display: none; }
[data-ui] .sug { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 14px; min-height: 42px; text-align: left; }
[data-ui] .sug .icon { width: 16px; height: 16px; color: var(--ui-muted); }
[data-ui] .sug .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-ui] .sug .tx small { color: var(--ui-muted); font-size: 12px; margin-left: 8px; }
[data-ui] .sug[aria-selected="true"], [data-ui] .sug:hover { background: color-mix(in srgb, var(--ui-ink) 8%, transparent); }
[data-ui] .scope { display: inline-flex; gap: 7px; align-items: center; color: var(--ui-muted); font-size: 12px; white-space: nowrap; }
[data-ui] .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ctx); flex: none; }
[data-ui] .page { flex: 1 1 auto; min-height: 0; position: relative; background: #F6F8F7; color: #1F2933; overflow: hidden; }
[data-ui] .site { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity 260ms ease; --brand: #0F6E63; }
[data-ui] .site.swap { opacity: 0; }

/* menús y burbujas de Lean */
[data-ui] .menu { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--ui-shadow); padding: 6px 0; }
[data-ui] .mrow { display: flex; align-items: center; gap: 12px; min-height: 32px; padding: 6px 14px; white-space: nowrap; }
[data-ui] .mrow .k { margin-left: auto; color: var(--ui-muted); font-size: 11px; padding-left: 18px; }
[data-ui] .mrow .icon { width: 16px; height: 16px; color: var(--ui-muted); }
[data-ui] .mrow.hover { background: color-mix(in srgb, var(--ui-ink) 9%, transparent); }
[data-ui] .mrow.current { background: var(--tint); color: var(--action); }
[data-ui] .sep { height: 1px; background: var(--line); margin: 6px 0; }
[data-ui] .plabel { padding: 8px 16px 4px; text-transform: uppercase; font-size: 11px; letter-spacing: .4px; color: var(--ui-muted); }
[data-ui] .gpop { width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--ui-shadow); padding: 8px; }
[data-ui] .crown { text-align: center; padding: 9px 8px 12px; }
[data-ui] .aegis { position: relative; width: 72px; height: 72px; margin: 0 auto 7px; display: grid; place-items: center; color: var(--action); border-radius: 50%; border: 1px solid var(--line); }
[data-ui] .aegis::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid var(--tint); }
[data-ui] .aegis .icon { width: 33px; height: 33px; }
[data-ui] .crown h4 { margin: 0; font-size: 13px; color: var(--action); }
[data-ui] .glabel { font-size: 11px; color: var(--ui-muted); padding: 9px 12px 5px; }
[data-ui] .gcard { border: 1px solid var(--line); border-radius: 13px; margin: 2px 4px 4px; overflow: hidden; background: var(--field); }
[data-ui] .grow-row { display: flex; align-items: center; gap: 10px; padding: 11px 13px; }
[data-ui] .grow-row .grow { flex: 1; }
[data-ui] .spill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 20px; padding: 5px 9px; font-size: 11px; background: var(--surface); }
[data-ui] .gbtns { display: flex; justify-content: space-between; padding: 6px 8px; }
[data-ui] .ubtn { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 14px; border-radius: 20px; color: var(--action); font-weight: 500; white-space: nowrap; }
[data-ui] .ubtn.primary { background: var(--action); color: var(--field); }

/* sitios de muestra dentro de las ventanas, construidos como los sitios de prueba de Lean (capturas e- y f- del 16-oct):
   cabecera blanca con marca, navegación y persona; fondo gris claro; tarjetas y tablas blancas con borde */
[data-ui] .s-head { height: 56px; flex: none; display: flex; align-items: center; gap: 28px; padding: 0 28px; background: #FFFFFF; border-bottom: 1px solid #E6E8EA; }
[data-ui] .s-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: #111; white-space: nowrap; }
[data-ui] .s-logo { width: 22px; height: 22px; border-radius: 6px; background: var(--brand); flex: none; }
[data-ui] .s-nav { display: flex; gap: 22px; color: #4B5563; font-size: 13.5px; white-space: nowrap; }
[data-ui] .s-nav .on { color: #111; font-weight: 600; }
[data-ui] .s-user { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; color: #4B5563; font-size: 13px; white-space: nowrap; }
[data-ui] .s-av { width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand); display: grid; place-items: center; font-weight: 700; font-size: 11px; flex: none; }
[data-ui] .s-search { height: 32px; width: 260px; border-radius: 16px; background: #F1F3F4; color: #4B5563; font-size: 13px; display: flex; align-items: center; gap: 8px; padding: 0 12px; }
[data-ui] .s-search .icon { width: 14px; height: 14px; }
[data-ui] .s-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
[data-ui] .s-main { padding: 26px 28px; max-width: 1040px; margin: 0 auto; }
[data-ui] .s-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
[data-ui] .s-title { font-size: 24px; font-weight: 600; color: #111; letter-spacing: -.01em; }
[data-ui] .s-sub { margin-top: 4px; color: #6B7280; font-size: 13px; }
[data-ui] .s-tag { height: 28px; padding: 0 12px; border-radius: 14px; background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
[data-ui] .s-cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
[data-ui] .s-card { background: #fff; border: 1px solid #E6E8EA; border-radius: 10px; padding: 18px 20px; min-width: 0; }
[data-ui] .s-card .k { font-size: 12.5px; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ui] .s-card .v { font-size: 24px; font-weight: 600; color: #111; margin-top: 8px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
[data-ui] .s-card .d { font-size: 12px; color: #6B7280; margin-top: 8px; }
[data-ui] .s-card .d.up { color: #0F7A4F; }
[data-ui] .s-card .d.down { color: #B42318; }
[data-ui] .s-btns { display: flex; gap: 10px; margin-top: 20px; }
[data-ui] .s-btn { height: 36px; padding: 0 16px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
[data-ui] .s-btn.ghost { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
[data-ui] .s-chips { display: flex; gap: 8px; margin-top: 18px; }
[data-ui] .s-chip { height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid #E6E8EA; background: #fff; color: #4B5563; font-size: 12.5px; display: inline-flex; align-items: center; white-space: nowrap; }
[data-ui] .s-chip.on { background: #111; color: #fff; border-color: #111; }
[data-ui] .s-table { margin-top: 20px; background: #fff; border: 1px solid #E6E8EA; border-radius: 10px; overflow: hidden; }
[data-ui] .s-tr { display: grid; grid-template-columns: var(--cols, 1fr 120px 150px); gap: 14px; align-items: center; padding: 13px 16px; border-top: 1px solid #EEF0F2; font-size: 13.5px; color: #1F2933; }
[data-ui] .s-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-ui] .s-tr.h { border-top: 0; background: #FAFBFB; color: #6B7280; font-size: 12.5px; font-weight: 600; }
[data-ui] .s-tr .r { text-align: right; font-variant-numeric: tabular-nums; }
[data-ui] .s-tr .pos { color: #0F7A4F; }
[data-ui] .s-tr .mut { color: #6B7280; }
[data-ui] .s-pill { font-size: 11.5px; padding: 3px 9px; border-radius: 10px; background: #FEF3C7; color: #92400E; white-space: nowrap; display: inline-block; }
[data-ui] .s-pill.ok { background: #DCFCE7; color: #166534; }
[data-ui] .s-pill.off { background: #F1F3F4; color: #5F6368; }
[data-ui] .s-shell { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 230px minmax(0, 1fr); }
[data-ui] .s-side { background: #fff; border-right: 1px solid #E6E8EA; padding: 22px 16px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: #4B5563; }
[data-ui] .s-side .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: #111; margin: 0 0 18px 8px; }
[data-ui] .s-side .brand i { width: 22px; height: 22px; border-radius: 6px; background: var(--brand); }
[data-ui] .s-side span { padding: 9px 10px; border-radius: 8px; white-space: nowrap; }
[data-ui] .s-side .on { background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); font-weight: 600; }
[data-ui] .s-side .lbl { margin-top: 14px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; padding: 6px 10px; }
[data-ui] .s-two { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; }
[data-ui] .s-panel { background: #fff; border: 1px solid #E6E8EA; border-radius: 10px; padding: 18px 20px; min-width: 0; }
[data-ui] .s-panel .k { font-weight: 600; font-size: 13.5px; color: #374151; }
[data-ui] .s-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; margin-top: 18px; }
[data-ui] .s-bars i { flex: 1; height: var(--h); background: color-mix(in srgb, var(--brand) 22%, #fff); border-radius: 3px; }
[data-ui] .s-bars i.hi { background: var(--brand); }
[data-ui] .s-list { margin-top: 8px; }
[data-ui] .s-list .s-tr { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 0; }
[data-ui] .s-list .s-tr:first-child { border-top: 0; }
[data-ui] .s-text { margin-top: 10px; color: #3C4043; max-width: 46ch; line-height: 1.55; font-size: 14px; }
/* portada pública de un sitio (sin sesión) y portada de un diario */
[data-ui] .s-hero { padding: 26px 28px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 8%, #fff); }
[data-ui] .s-hero .s-title { font-size: 26px; }
[data-ui] .s-news { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start; }
[data-ui] .s-lead .s-title { margin-top: 10px; font-size: 21px; line-height: 1.25; }
[data-ui] .s-news .s-list { margin-top: 0; }
/* el correo: tres paneles */
[data-ui] .m-mail { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 180px minmax(0, 350px) minmax(0, 1fr); background: #fff; }
[data-ui] .m-side { padding: 14px 10px 14px 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #3C4043; }
[data-ui] .m-side span { display: flex; justify-content: space-between; padding: 7px 12px 7px 18px; border-radius: 0 16px 16px 0; }
[data-ui] .m-side .on { background: color-mix(in srgb, var(--brand) 11%, #fff); color: #111; font-weight: 600; }
[data-ui] .m-side .compose { margin: 0 0 12px 12px; border-radius: 12px; background: var(--brand); color: #fff; font-weight: 600; justify-content: center; padding: 10px 12px; }
[data-ui] .m-list { border-left: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; overflow: hidden; }
[data-ui] .m-msg { padding: 11px 16px; border-bottom: 1px solid #F1F1F1; }
[data-ui] .m-msg.on { background: color-mix(in srgb, var(--brand) 7%, #fff); }
[data-ui] .m-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: #5F6368; }
[data-ui] .m-top b { font-weight: 500; color: #3C4043; }
[data-ui] .m-msg.unread .m-top b, [data-ui] .m-msg.unread .m-sub { font-weight: 700; color: #111; }
[data-ui] .m-sub { font-size: 13px; color: #202124; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ui] .m-sn { font-size: 12.5px; color: #5F6368; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
[data-ui] .m-read { padding: 22px 28px; overflow: hidden; color: #3C4043; font-size: 13.5px; line-height: 1.6; }
[data-ui] .m-subject { font-size: 19px; font-weight: 600; color: #111; line-height: 1.3; }
[data-ui] .m-from { display: flex; gap: 10px; align-items: center; margin: 14px 0 16px; line-height: 1.35; }
[data-ui] .m-from small { display: block; color: #5F6368; font-size: 12px; }
[data-ui] .m-from .s-av { width: 32px; height: 32px; background: #4D7C0F; color: #fff; font-size: 13px; }
[data-ui] .m-read p + p { margin-top: 10px; }
[data-ui] .s-link { display: inline-flex; margin: 12px 0 2px; padding: 2px 4px; margin-left: -4px; border-radius: 4px; color: #1A56DB; text-decoration: underline; cursor: pointer; transition: background-color var(--t-hover) ease; }
[data-ui] .s-link.is-hover, [data-ui] .s-link:hover { background: #E8EEFC; color: #0B3BA0; }
[data-ui] .m-att { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
[data-ui] .m-file { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; width: 220px; padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 10px; font-size: 12.5px; color: #202124; }
[data-ui] .m-file b { grid-row: span 2; width: 34px; height: 34px; border-radius: 6px; background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); display: grid; place-items: center; font-size: 10.5px; }
[data-ui] .m-file small { color: #5F6368; font-size: 11.5px; }
[data-ui] .m-read .s-btns { margin-top: 18px; }
[data-ui] .m-read .s-btn { height: 32px; font-size: 13px; }

/* ---------- secciones ---------- */
.sec { padding-top: var(--section); }
.sec-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sec-head h2 { font-size: var(--s-head); line-height: 1.02; letter-spacing: -.03em; max-width: 16ch; }
.sec-head p { margin-top: 18px; max-width: 46ch; }

/* cómo funciona: cuatro pasos y una sola ventana que cambia de estado */
.how .body { align-items: stretch; }
.how .steps { grid-column: 1 / span 4; display: grid; gap: 6px; align-content: start; }
.step { position: relative; display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 12px; padding: 18px 20px 20px; cursor: pointer; color: var(--sky-ink); overflow: hidden;
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease; }
.step .st-t { display: block; font: 600 var(--s-lead)/1.2 var(--ui-font); letter-spacing: -.01em; }
.step .st-d { display: block; margin-top: 6px; font-size: var(--s-body); line-height: 1.5; }
.hero [data-ui] .win, [data-ui].shot .win { border-radius: 12px; box-shadow: var(--win-shadow); }
[data-ui].frag.is-typing .omni { box-shadow: 0 0 0 2px color-mix(in srgb, #1A9E94 70%, transparent); }
.step[aria-selected="true"] { background: var(--paper); color: var(--night-ink); }
.step .bar { position: absolute; left: 20px; right: 20px; bottom: 9px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 22%, transparent); overflow: hidden; opacity: 0; }
.step[aria-selected="true"] .bar { opacity: 1; }
.step .bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.step .bar i.run { animation: fill var(--step-ms, 6000ms) linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }
@media (hover: hover) and (pointer: fine) { .step:not([aria-selected="true"]):hover { background: color-mix(in srgb, var(--sky-ink) 8%, transparent); } }
.how .screen { grid-column: 5 / -1; position: relative; min-height: 560px; }
.shot { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 360ms ease, visibility 0s linear 360ms; }
.shot.on { opacity: 1; visibility: visible; transition: opacity 360ms ease; }
.shot > .zoom { zoom: var(--shot-zoom); height: 100%; position: relative; }
.shot .win { height: 100%; }
.shot .menu { position: absolute; z-index: 3; }
.shot .m-mail { grid-template-columns: 180px minmax(0, 1fr); }
.shot .m-read { display: none; }
/* el menú de Contextos cuelga del «⌄» que sigue al «+»: 8 + 28 + 6 + 232 + 6 + 232 + 6 + 4 + 22 + 8 = 552 px */
.shot-ctx .menu { top: 38px; left: 540px; width: 236px; }
.shot-rule .menu.main { top: 38px; left: 300px; width: 262px; }
.shot-rule .menu.sub { top: 184px; left: 556px; width: 196px; }
.shot-ask .omni { flex-basis: 64%; width: 64%; }
.shot-ask .omni .host:empty { display: none; }

/* funciones: cada pieza de Lean directo sobre el cielo, con su texto debajo */
.feats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(3rem, 6vw, 5rem); list-style: none; padding: 0; }
.feat-i:nth-child(1), .feat-i:nth-child(4) { grid-column: span 7; }
.feat-i:nth-child(2), .feat-i:nth-child(3) { grid-column: span 5; }
.piece { position: relative; height: 400px; display: flex; align-items: flex-start; justify-content: center; }
.feat-i h3 { margin-top: 26px; font: 600 var(--s-lead)/1.2 var(--ui-font); letter-spacing: -.01em; }
.feat-i p { margin-top: 8px; max-width: 46ch; }
[data-ui].f-two { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
[data-ui].f-two .win { height: 100%; border-radius: 10px; box-shadow: var(--win-shadow); }
.f-two .page { flex: 1 1 auto; }
/* la lista de campañas sigue más abajo de lo que cabe: el fundido al fondo de la página lo dice, en vez de cortar una fila a la mitad */
.f-two .page::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none; background: linear-gradient(to bottom, transparent, #F6F8F7); }
.f-two .s-head { padding: 0 18px; gap: 18px; }
.f-two .s-nav { display: none; }
.f-two .s-main { padding: 18px; }
.f-two .s-cards { margin-top: 0; --n: 2; }
.f-two .s-card { padding: 14px 16px; }
.f-two .s-card .v { font-size: 20px; }
.f-two .s-table { margin-top: 14px; }
.f-two .s-tr { padding: 10px 14px; font-size: 13px; }
.f-two .omni, .f-par .omni, .f-win .omni { flex: 1 1 auto; width: auto; }
.f-two .omni > [data-icon="star"], .f-par .omni > [data-icon="star"], .f-win .omni > [data-icon="star"] { display: none; }
/* Temporal y Lean Guard: una ventana entera con el menú abierto desde su botón (⋮ y escudo, 42 + 42 px de tira y barra) */
[data-ui].f-win { position: absolute; inset: 0; }
[data-ui].f-win .win { height: 100%; border-radius: 10px; box-shadow: var(--win-shadow); }
[data-ui].f-menu .menu.drop { position: absolute; right: 8px; top: 80px; width: 300px; z-index: 2; }
[data-ui].f-guard .gpop { position: absolute; right: 30px; top: 80px; z-index: 2; }
[data-ui].f-par { position: absolute; inset: 0; }
[data-ui].f-par .win { height: 100%; border-radius: 10px; box-shadow: var(--win-shadow); }
[data-ui] .pwin { position: absolute; z-index: 2; left: 50%; top: 56%; width: 66%; height: 72%; transform: translate(-50%, -50%); border-radius: 10px; overflow: hidden; background: #FFFFFF; color: #202124;
  box-shadow: 0 18px 50px #1a141040, 0 3px 10px #1a141026; display: flex; flex-direction: column; }
.pwin .pbar { height: 34px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; background: var(--surface); color: var(--ui-ink); font-size: 12px; }
.pwin .pbar .host { flex: 1; padding-left: 0; }
.pwin .pbar .ib { width: 26px; height: 26px; padding: 6px; }
.pwin .pdoc { flex: 1; padding: 16px 18px; font-size: 12.5px; line-height: 1.55; color: #3C4043; overflow: hidden; }
.pwin .pdoc b { display: block; font-size: 15px; color: #111; margin-bottom: 6px; }
[data-ui] .ppill { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 22px; background: var(--surface); color: var(--ui-ink);
  box-shadow: var(--ui-shadow); font-size: 12px; white-space: nowrap; max-width: calc(100% - 12px); }
.ppill .lbl { color: var(--ui-muted); margin-right: 4px; display: inline-flex; align-items: center; gap: 6px; }
.ppill .ubtn { min-height: 28px; padding: 4px 12px; }
.ppill .ubtn.primary .icon { width: 12px; height: 12px; margin-left: 4px; }

/* nadie lee tus pestañas: el texto a la izquierda, una ventana con un asistente abierto como un sitio más a la derecha */
.noai .grid { align-items: center; row-gap: 32px; }
.noai .na-t { grid-column: 1 / span 5; }
.noai h2 { font-size: var(--s-head); line-height: 1.02; letter-spacing: -.03em; }
.noai h2 .br { display: block; }
.noai .na-t p { margin-top: 20px; max-width: 40ch; font-size: var(--s-lead); line-height: 1.4; }
.noai .na-w { grid-column: 6 / -1; position: relative; height: 400px; }
[data-ui].na-ui { position: absolute; inset: 0; }
[data-ui].na-ui .win { height: 100%; border-radius: 12px; box-shadow: var(--win-shadow); }
[data-ui] .s-chat { max-width: 560px; display: grid; gap: 12px; }
[data-ui] .s-msg { max-width: 80%; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid #E6E8EA; color: #1F2933; font-size: 13.5px; line-height: 1.45; }
[data-ui] .s-msg.me { justify-self: end; border-color: transparent; background: color-mix(in srgb, var(--brand) 10%, #fff); }
[data-ui] .s-chat .s-input { margin-top: 6px; height: 40px; display: flex; align-items: center; padding: 0 16px; border: 1px solid #D1D5DB; border-radius: 20px; background: #fff; color: #6B7280; font-size: 13px; }

/* precio en el inicio: una franja sobre el cielo. El titular y su frase a la izquierda, la descarga a la derecha */
.band { align-items: end; row-gap: 32px; }
.band .bl { grid-column: 1 / span 7; }
.band h2 { font-size: var(--s-display); line-height: .98; letter-spacing: -.04em; }
.band .bl p { margin-top: 20px; max-width: 46ch; font-size: var(--s-lead); line-height: 1.4; }
.band .br { grid-column: 9 / -1; padding-bottom: .4rem; }
.band .meta { margin-top: 12px; font-size: var(--s-small); }
.band .next { margin-top: 22px; }
.band .next + .next { margin-top: 8px; }
.band .next a, .link.strong { font-weight: 600; text-decoration-color: currentColor; }

/* preguntas: índice a la izquierda, la respuesta a la derecha */
.faq .qs { position: relative; }
.faq h2 { font-size: var(--s-head); line-height: 1.02; letter-spacing: -.03em; color: var(--sky-ink); margin-bottom: 26px; }
.faq details { color: var(--sky-ink); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 14px; padding: 9px 0; font-size: var(--s-body); color: var(--sky-soft); transition: color var(--t-hover) ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; transform: translateY(-2px); transition: background-color var(--t-hover) ease; }
.faq details[open] summary { color: var(--sky-ink); font-weight: 600; }
.faq details[open] summary::before { background: var(--accent); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--sky-ink); } }
.faq .ans { padding: 4px 0 14px 22px; max-width: 60ch; }
.faq .ans p + p { margin-top: 10px; }
.faq .ans [data-vline] { overflow-wrap: anywhere; }
.faq .ans .fine { font-size: var(--s-small); line-height: 1.5; margin-top: 16px; }
.faq .pane { display: none; }
@media (min-width: 64.01rem) {
  .faq .qs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .faq .qs > h2, .faq .qs > details { grid-column: 1 / span 6; }
  .faq .qs.has-pane .ans { display: none; }
  .faq .pane { display: block; grid-column: 8 / -1; grid-row: 2 / span 9; max-width: 34ch; font-size: var(--s-lead); line-height: 1.4; padding-top: 6px; }
  .faq .pane p + p { margin-top: 12px; }
  .faq .pane .fine { font-size: var(--s-small); line-height: 1.5; margin-top: 18px; overflow-wrap: anywhere; }
  .faq .pane.swap { animation: fade-in 180ms ease; }
}
@keyframes fade-in { from { opacity: 0; } }

/* cierre y pie, de noche: la descarga, los enlaces y al final lo legal */
.close { padding-top: var(--section); }
.close .inv { grid-column: 1 / span 8; }
.close h2 { font-size: var(--s-display); line-height: .98; letter-spacing: -.04em; }
.close .beta { margin-top: 22px; max-width: 46ch; }
.close .act { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.close .act span { font-size: var(--s-small); }
/* el pie (18-oct, auditoría de Juan): una línea arriba lo separa del cierre; la marca con qué es Lean a la izquierda y cuatro columnas
   con título a la derecha; abajo, la línea legal. Los títulos son texto normal en negrita, sin mayúsculas ni espaciado */
.foot { margin-top: clamp(5rem, 11vw, 9rem); padding: 44px 0 36px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); font-size: var(--s-small); }
.foot .fgrid { row-gap: 36px; align-items: start; }
.foot .brand { grid-column: 1 / span 4; display: grid; gap: 14px; align-content: start; max-width: 34ch; }
.foot .brand .mark { font-size: var(--s-body); }
.foot .brand p { line-height: 1.5; }
.foot .brand .fv { opacity: .8; }
.foot .fcols { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px var(--gutter); }
.foot .fcols.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.foot .fcols > div { display: grid; gap: 10px; align-content: start; }
.foot .fcols h3 { font: 600 var(--s-small)/1.3 var(--ui-font); letter-spacing: 0; margin-bottom: 4px; }
.foot .fcols a { text-decoration: none; line-height: 1.35; opacity: .82; transition: opacity var(--t-hover) ease; }
.foot .fline { margin-top: 40px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); display: flex; flex-wrap: wrap; gap: 8px 28px; opacity: .72; }
@media (hover: hover) and (pointer: fine) {
  .foot .fcols a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .22em; }
}

/* ---------- movimiento (contenido visible sin script) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .js .lines [data-line] { transform: translateY(140%); animation: line-up 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  /* parten de 0,01 y no de 0: a la vista es igual, pero Chrome cuenta el texto del hero como LCP desde el primer pintado (con 0 lo descarta) */
  .js [data-rise] { opacity: .01; transform: translateY(18px); animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 300ms); }
  .js .hero .stage { opacity: .01; transform: translateY(32px); animation: rise 1000ms var(--ease-out) 480ms forwards; }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 75ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .close .lines [data-line] { animation: none; transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); }
  .js .close.is-in .lines [data-line] { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .step .bar i.run { animation: none; transform: scaleX(1); } }
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- tablet ---------- */
@media (max-width: 64rem) {
  :root { --ui-zoom: 1.1; --shot-zoom: 1; }
  .top nav { display: none; }
  .top .btn { margin-left: auto; }
  .hero h1, .hero .aside { grid-column: 1 / -1; }
  .hero .aside { margin-top: 24px; flex-direction: column; text-align: center; }
  .hero .dl { width: auto; justify-items: center; }
  .hero .stage { height: 560px; }
  [data-ui] .m-mail { grid-template-columns: 160px minmax(0, 1fr); }
  [data-ui] .m-read { display: none; }
  [data-ui] .s-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .how .steps { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how .screen { grid-column: 1 / -1; margin-top: 16px; min-height: 500px; }
  .feat-i:nth-child(n) { grid-column: span 6; }
  .band .bl, .band .br { grid-column: 1 / -1; }
  .noai .na-t, .noai .na-w { grid-column: 1 / -1; }
  .noai .na-w { height: 380px; }
  .close .inv { grid-column: 1 / -1; }
  .foot .brand, .foot .fcols { grid-column: 1 / -1; }
  .foot .brand { max-width: none; }
  .foot .fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- teléfono: otra composición ---------- */
@media (max-width: 48rem) {
  :root { --s-display: 2.125rem; --s-head: 2rem; --s-lead: 1.25rem; --s-body: 1.0625rem; --ui-zoom: 1; --piece-zoom: 1; }
  .top .wrap { padding-top: 14px; padding-bottom: 14px; }
  .hero { padding-top: 6rem; }
  .hero .stage { height: 500px; margin-left: calc(var(--margin) * -.5); margin-right: calc(var(--margin) * -.5); }
  .hero .dl, .hero .act { width: 100%; }
  .hero .act .btn { width: 100%; }
  [data-ui] .wctl, [data-ui] .tsearch, [data-ui] .toolbar .nav [data-icon="reload"], [data-ui] .toolbar .nav [data-icon="forward"], [data-ui] .toolbar > [data-icon="info"], [data-ui] .toolbar .spring, [data-ui] .omni > [data-icon="star"], [data-ui] .toolbar > .appmenu { display: none; }
  [data-ui] .omni { flex: 1 1 auto; width: auto; }
  [data-ui] .tab { width: 150px; flex-basis: 150px; }
  /* en el teléfono las pestañas de fondo quedan en su ícono, como hace la tira cuando no cabe */
  .hero [data-ui] .tab:not(.active) { flex: none; width: 28px; min-width: 28px; padding: 0; justify-content: center; }
  .hero [data-ui] .tab:not(.active) .title, .hero [data-ui] .tab:not(.active) .tab-close { display: none; }
  .hero [data-ui] .tab.active { flex: 1 1 auto; width: auto; }
  [data-ui] .s-nav, [data-ui] .s-search, [data-ui] .s-user span:not(.s-av), [data-ui] .s-side, [data-ui] .m-side, [data-ui] .m-read, [data-ui] .s-tag { display: none; }
  [data-ui] .s-shell { grid-template-columns: minmax(0, 1fr); }
  [data-ui] .m-mail { grid-template-columns: minmax(0, 1fr); }
  [data-ui] .m-list { border: 0; }
  [data-ui] .s-main, [data-ui] .s-head { padding-left: 18px; padding-right: 18px; }
  [data-ui] .s-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  [data-ui] .s-two { grid-template-columns: minmax(0, 1fr); }
  [data-ui] .s-tr { grid-template-columns: minmax(0, 1fr) auto; }
  [data-ui] .s-tr > .mut, [data-ui] .s-tr > .mid { display: none; }
  .how .steps { grid-template-columns: minmax(0, 1fr); }
  .step { padding: 14px 16px 18px; }
  .step:not([aria-selected="true"]) .st-d { display: none; }
  .how .screen { min-height: 440px; }
  .shot-ctx .menu { left: auto; right: 12px; }
  .shot-rule .menu.main { left: 12px; width: 236px; }
  .shot-rule .menu.sub { left: auto; right: 8px; top: 214px; width: 170px; }
  .feat-i:nth-child(n) { grid-column: 1 / -1; }
  .piece { height: 350px; }
  .feat-i:first-child .piece { height: auto; display: block; }
  [data-ui].f-two { position: relative; inset: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  [data-ui].f-two .win.b { margin-top: 0; }
  .f-two .page { height: 150px; }
  [data-ui] .pwin { width: 92%; }
  .f-par .s-title { font-size: 17px; }
  .ppill .lbl { display: none; }
  .ppill .ubtn { padding: 4px 10px; }
  [data-ui].f-menu .menu.drop { width: min(300px, calc(100% - 16px)); }
  [data-ui].f-guard .gpop { right: 8px; width: min(300px, calc(100% - 16px)); }
  .band .br .btn { width: 100%; }
  .faq .ans { padding-left: 22px; }
  .close .act .btn { width: 100%; }
  .hero .facts { justify-content: center; }
  .foot .fcols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 16px; }
  .foot .fline { flex-direction: column; gap: 6px; }
}

/* ================= páginas internas: /precios y /pro (17-oct, después de la auditoría) ================= */
.top nav a[aria-current="page"] { font-weight: 600; text-decoration-color: currentColor; }
.sub .faq, .sub .close { padding-top: clamp(4rem, 7vw, 6rem); }
.sub .faq .qs { padding-bottom: clamp(3rem, 5vw, 4rem); }
.sub .foot { margin-top: clamp(3.5rem, 7vw, 6rem); }
.state { font-weight: 600; }
.soon { color: var(--action); font-weight: 600; }

/* /precios: Lean ocupa la mitad; Pro y Equipos, un cuarto cada una y con menos peso porque todavía no existen.
   Cada versión lleva su imagen: Lean una ventana con tres Contextos, Pro el mismo menú en dos PC, Equipos tres personas con los mismos Contextos */
.phero .plans { margin-top: clamp(3rem, 6vw, 4.5rem); }
.plans { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: clamp(26px, 2.6vw, 40px); border-radius: var(--radius); background: var(--paper); color: var(--night-ink); }
.plan.pro, .plan.eq { padding: clamp(22px, 2vw, 30px); background: color-mix(in srgb, var(--paper) 70%, transparent); }
.plan h2 { font: 600 var(--s-lead)/1.2 var(--ui-font); letter-spacing: -.01em; }
.plan .who { margin-top: 6px; max-width: 34ch; }
.plan .price { margin-top: 24px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; font: 600 var(--s-head)/1 var(--display-font); letter-spacing: -.03em; }
.plan.pro .price, .plan.eq .price { font-size: var(--s-lead); letter-spacing: -.01em; }
.plan .price small { font: 400 var(--s-body)/1.2 var(--display-font); letter-spacing: 0; }
.plan.pro .price small, .plan.eq .price small { font-size: var(--s-small); }
.plan .pnote { margin-top: 8px; font-size: var(--s-small); text-wrap: balance; }
.plan .state { margin-top: 8px; font-size: var(--s-small); color: var(--action); }
.plan .lead { margin-top: 22px; font-weight: 600; font-size: var(--s-small); }
.plan ul { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 10px; }
.plan.pro ul, .plan.eq ul { font-size: var(--s-small); gap: 8px; }
.plan .lead + ul { margin-top: 10px; }
.plan li { position: relative; padding-left: 20px; }
.plan li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.plan .end { margin-top: auto; padding-top: 28px; }
.plan.free .end .btn { width: 100%; }
.plans-note { margin-top: 18px; text-align: center; font-size: var(--s-small); }
/* las imágenes */
.pl-ui { position: relative; height: 210px; margin-top: 22px; }
.pl-ui::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; border-radius: 0 0 10px 10px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--paper)); } /* fundido del recorte, no decoración */
[data-ui].pl-ui .win { height: 100%; border-radius: 10px; box-shadow: var(--win-shadow); }
.pl-ui .omni { flex: 1 1 auto; width: auto; }
.pl-ui .omni > [data-icon="star"] { display: none; }
.pl-pcs { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.pl-pcs figcaption { margin-bottom: 6px; font-size: var(--s-small); }
[data-ui].pl-menu .menu { width: 100%; padding: 4px 0; }
[data-ui].pl-menu .plabel { padding: 6px 10px 2px; }
[data-ui].pl-menu .mrow { min-height: 28px; padding: 5px 10px; gap: 8px; }
[data-ui].pl-menu .mrow .k { padding-left: 6px; }
.pl-team { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 10px; }
.pl-team li { display: flex; align-items: center; gap: 10px; padding-left: 0; }
.pl-team li::before { display: none; }
.pl-team .av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--action); font-weight: 700; font-size: 13px; }
.pl-team .nm { flex: 1; font-size: var(--s-small); line-height: 1.25; }
.pl-team .nm small { display: block; font-size: 12px; color: color-mix(in srgb, var(--night-ink) 70%, transparent); }
.pl-team .dots { display: flex; gap: 6px; }
.pl-team .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ctx); }

/* Lean Equipos en su panel teal claro: el texto a la izquierda, tres personas con sus Contextos a la derecha */
.team .panel { align-items: center; row-gap: 32px; padding: clamp(28px, 3vw, 48px); border-radius: var(--radius); background: var(--tint); color: var(--accent-ink); }
.team .tt { grid-column: 1 / span 5; }
.team h2 { font-size: var(--s-head); line-height: 1.02; letter-spacing: -.03em; }
.team .state { margin-top: 10px; }
.team .body { margin-top: 20px; }
.team .tt p + p { margin-top: 14px; }
.team .tt .contact { margin-top: 24px; }
.team .people { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.team figcaption { margin-bottom: 12px; font-size: var(--s-small); }
.team figcaption b { display: block; font-size: var(--s-body); }
[data-ui].tm-ui .menu { width: 100%; }

/* /pro: el PC de la casa y el notebook, con el menú de Contextos colgado del «⌄» de la tira */
.hero [data-ui].frag.still .win { border-radius: 12px; box-shadow: var(--win-shadow); }
[data-ui] .tab-actions { position: relative; }
[data-ui] .tab-actions .menu { position: absolute; z-index: 3; top: 30px; left: 18px; width: 236px; }
.hero .meta .also { display: block; margin-top: 6px; }
/* la línea bajo el botón no ensancha la columna: si no, el texto de la izquierda queda angosto */
.hero .dl .meta { max-width: 40ch; }
.hero .meta .also a { text-decoration-color: currentColor; }
.hero .stage.sync { height: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: start; }
.sync figure { min-width: 0; }
.sync figcaption { margin-bottom: 12px; font-size: var(--s-small); font-weight: 600; }
.sync [data-ui] { height: 330px; zoom: var(--ui-zoom); }
/* en la ventana angosta las cifras del panel van de a dos, para que no se corten */
.sync [data-ui] .s-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* en una ventana angosta el menú se abre hacia la izquierda, alineado al «⌄», para no salirse */
.sync [data-ui] .tab-actions .menu { display: block; left: auto; right: -6px; }
/* «Cliente D» aparece en la casa y, dos segundos después, en el notebook; los dos se van juntos y se repite cada nueve */
.llega { display: grid; grid-template-rows: 0fr; opacity: 0; animation: ctx-llega 9s var(--ease-out) infinite; }
.llega > div { min-height: 0; overflow: hidden; }
.llega .mrow { animation: ctx-marca 9s linear infinite; }
.sync .two .llega { animation-name: ctx-llega-2; }
.sync .two .llega .mrow { animation-name: ctx-marca-2; }
@keyframes ctx-llega { 0%, 10% { grid-template-rows: 0fr; opacity: 0; } 18%, 86% { grid-template-rows: 1fr; opacity: 1; } 94%, 100% { grid-template-rows: 0fr; opacity: 0; } }
@keyframes ctx-marca { 0%, 14% { background: transparent; } 22% { background: color-mix(in srgb, var(--c-nuevo) 24%, transparent); } 50%, 100% { background: transparent; } }
@keyframes ctx-llega-2 { 0%, 32% { grid-template-rows: 0fr; opacity: 0; } 40%, 86% { grid-template-rows: 1fr; opacity: 1; } 94%, 100% { grid-template-rows: 0fr; opacity: 0; } }
@keyframes ctx-marca-2 { 0%, 36% { background: transparent; } 44% { background: color-mix(in srgb, var(--c-nuevo) 24%, transparent); } 70%, 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .llega, .llega .mrow { animation: none; grid-template-rows: 1fr; opacity: 1; }
}

/* /equipos: los menús de tres personas; «Cliente D» llega solo a los de Josefa y Tomás */
.hero .stage.reparto { height: auto; max-width: 1040px; margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.reparto figure { min-width: 0; }
.reparto figcaption { margin-bottom: 12px; font-size: var(--s-small); }
.reparto figcaption b { display: block; font-size: var(--s-body); }
.reparto [data-ui] { zoom: var(--ui-zoom); }
.reparto [data-ui] .menu { width: 100%; }
/* la copia invisible del menú abierto ocupa el alto máximo; el menú animado va encima y la página no se mueve */
.tm-stack { display: grid; align-items: start; }
.tm-stack > [data-ui] { grid-area: 1 / 1; }
.tm-stack > .ghost { visibility: hidden; }
.ghost .llega, .ghost .llega .mrow { animation: none; grid-template-rows: 1fr; opacity: 1; }
/* /equipos: cómo se reparte, tres pasos en orden */
.pasos-l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pasos-l .n { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; background: var(--action); color: var(--paper); font-weight: 700; }
/* los formularios de las listas: el selector con la misma forma que el campo */
.avisame select { flex: 0 0 auto; min-height: 52px; padding: 0 44px 0 22px; border-radius: 999px; appearance: none;
  border: 1px solid color-mix(in srgb, var(--night-ink) 22%, transparent); color: var(--night-ink); font: inherit;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 20px center; }
.avisame select:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* páginas para Google: tres puntos en fila bajo la ventana */
.puntos-l { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }

/* /descargas: la ficha del instalador, el comando y el aviso mientras no haya instalador */
.con-instalador { display: none; }
html[data-instalador="si"] .con-instalador { display: grid; }
html[data-instalador="si"] .sin-instalador { display: none; }
.ficha { margin: clamp(2rem, 5vh, 3rem) auto 0; max-width: 920px; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper) 72%, transparent); color: var(--night-ink); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; }
.ficha dt { font-size: var(--s-small); }
.ficha dd { margin: 4px 0 0; font-weight: 600; }
.ficha .sha { grid-column: 1 / -1; }
.ficha code, .cmd, .moneda .dir { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere; }
.cmd { margin: 14px 0; padding: 16px 18px; border-radius: 12px; background: color-mix(in srgb, var(--night-ink) 88%, transparent); color: var(--paper); font-size: var(--s-small); white-space: pre-wrap; }
.aviso .inv { max-width: 760px; }
.aviso h2 { font-size: var(--s-head); line-height: 1.02; letter-spacing: -.03em; }
.aviso .lead { margin-top: 16px; max-width: 52ch; font-size: var(--s-lead); line-height: 1.4; }

/* /apoyar: una tarjeta por moneda, con la dirección completa y su botón (el botón no cambia de ancho al decir «Copiada») */
.monedas { margin: clamp(2rem, 5vh, 3rem) auto 0; max-width: 1200px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.monedas .m-nota { grid-column: 1 / -1; text-align: center; font-size: var(--s-small); }
.moneda { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 72%, transparent); color: var(--night-ink); }
.moneda h2 { font-size: var(--s-lead); }
.moneda .red { font-size: var(--s-small); }
.moneda .dir { font-size: 13.5px; padding: 12px; border-radius: 10px; background: var(--paper); }
.moneda .copiar { justify-self: start; min-width: 11rem; }
.moneda .m-alerta { font-size: var(--s-small); font-weight: 600; color: #9A2F1C; }

/* /privacidad: el resumen en un panel bajo el titular y el detalle con el título a la izquierda */
.lhero .lsub { margin: 26px auto 0; max-width: 52ch; font-size: var(--s-lead); line-height: 1.4; text-wrap: pretty; }
.resumen { list-style: none; margin: clamp(2rem, 5vh, 3rem) auto 0; padding: clamp(26px, 3vw, 44px); max-width: 920px; display: grid; gap: 14px;
  border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 72%, transparent); color: var(--night-ink); font-size: var(--s-lead); line-height: 1.4; }
.resumen li { position: relative; padding-left: 24px; text-wrap: pretty; }
.resumen li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.resumen .link { text-decoration-color: currentColor; overflow-wrap: anywhere; }
.legal .lg { align-items: start; row-gap: 12px; }
.legal .lg + .lg { margin-top: clamp(2.5rem, 5vw, 4rem); }
.legal h2 { grid-column: 1 / span 4; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; letter-spacing: -.02em; }
.legal .tx { grid-column: 6 / -1; max-width: 62ch; }
.legal .tx p + p { margin-top: 14px; }
.legal .tx .link { text-decoration-color: currentColor; overflow-wrap: anywhere; }

/* /pro: «Avísame cuando salga» en el cierre, el correo y el botón en una fila */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.avisame { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; max-width: 760px; }
.avisame input[type="email"] { flex: 1 1 260px; min-width: 0; min-height: 52px; padding: 0 22px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--night-ink) 22%, transparent); background: var(--paper); color: var(--night-ink); font: inherit; }
.avisame input[type="email"]::placeholder { color: color-mix(in srgb, var(--night-ink) 55%, transparent); }
.avisame input[type="email"]:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.avisame .btn:disabled, .reporte .btn:disabled { opacity: .7; }

/* /reportar: el formulario en un panel bajo el titular, con las etiquetas a la vista */
.reporte { margin: clamp(2rem, 5vh, 3rem) auto 0; max-width: 760px; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper) 72%, transparent); color: var(--night-ink); }
.reporte form { display: grid; gap: 22px; }
.reporte .campo { display: grid; gap: 8px; }
.reporte label { font-weight: 600; }
.reporte .opc { font-weight: 400; color: color-mix(in srgb, var(--night-ink) 65%, transparent); }
.reporte textarea, .reporte input:not([type="hidden"]):not(.trampa) { width: 100%; min-height: 52px; padding: 14px 18px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--night-ink) 22%, transparent); background: var(--paper); color: var(--night-ink); font: inherit; }
.reporte textarea { min-height: 9.5rem; resize: vertical; line-height: 1.45; }
.reporte ::placeholder { color: color-mix(in srgb, var(--night-ink) 55%, transparent); }
.reporte textarea:focus-visible, .reporte input:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.reporte .ayuda { font-size: var(--s-small); }
.reporte .ayuda .link { text-decoration-color: currentColor; }
.reporte .enviar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.av-nota { margin-top: 14px; font-size: var(--s-small); }
.av-estado:not(:empty), .av-msg:target { margin-top: 10px; font-weight: 600; }
.av-estado[data-tipo="error"], .av-msg[data-tipo="error"] { color: #9A2F1C; }
.av-msg { display: none; }
.av-msg:target { display: block; }

/* /pro: qué viaja y qué no */
.back .grid { align-items: start; row-gap: 36px; }
.back .bk-t { grid-column: 1 / span 5; }
.back h2, .safe h2, .pasos h2 { font-size: var(--s-head); line-height: 1.02; letter-spacing: -.03em; max-width: 18ch; }
.back .bk-t p { margin-top: 18px; max-width: 42ch; }
.back .bk-l { grid-column: 7 / span 3; }
.back .bk-r { grid-column: 10 / -1; }
.back h3, .safe h3, .pasos h3, .puntos h3 { font: 600 var(--s-lead)/1.2 var(--ui-font); letter-spacing: -.01em; }
.back ul { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 12px; }

/* /pro: cómo guarda tus datos, cuatro puntos en fila */
.safe-l { list-style: none; padding: 0; margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.safe-l p { margin-top: 10px; max-width: 38ch; }

/* /pro: el precio usa la franja del inicio; a la derecha, el estado. «Avísame cuando salga» va en el cierre, justo debajo */
.band .state { margin-bottom: 6px; }
.band .say { margin-bottom: 20px; max-width: 34ch; }

@media (max-width: 64rem) {
  .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plan.free { grid-column: 1 / -1; }
  .team .tt, .team .people { grid-column: 1 / -1; }
  .back .bk-t, .back .bk-l, .back .bk-r { grid-column: 1 / -1; }
  .safe-l { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 32px; }
  .hero .stage.sync { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
  .legal h2, .legal .tx { grid-column: 1 / -1; }
  .pasos-l, .puntos-l { grid-template-columns: minmax(0, 1fr); }
  .monedas { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 48rem) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .team .people { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .team .people > :nth-child(3) { display: none; }
  [data-ui] .tab-actions .menu { display: none; }
  .safe-l { grid-template-columns: minmax(0, 1fr); }
  .avisame .btn, .avisame select, .reporte .btn { flex: 1 1 100%; }
  .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .stage.reparto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reparto > :nth-child(3) { display: none; }
  /* en el teléfono la barra oculta el menú de la app; en la pieza de Temporal se deja, porque el menú abierto cuelga de él */
  [data-ui].f-menu .toolbar > .appmenu { display: inline-flex; }
}
.plan .pextra { margin-bottom: 14px; font-size: var(--s-small); font-weight: 600; }

/* 404: la única sección baja bajo el menú, como un hero */
.close#error { padding-top: clamp(8rem, 22vh, 12rem); min-height: 100svh; }

/* guías: los pasos con Lean numerados dentro del texto, y las guías en tarjetas (en /guias/, al final de cada guía y en /varias-cuentas/) */
.pasos-g { margin: 14px 0; padding-left: 1.4em; display: grid; gap: 10px; }
.pasos-g li { padding-left: 4px; text-wrap: pretty; }
.pasos-g li::marker { font-weight: 700; color: var(--accent); }
.legal .tx > p + ol, .legal .tx > ol + p { margin-top: 14px; }
.guias h2 { font-size: var(--s-head); line-height: 1.02; letter-spacing: -.03em; }
.guias-l { list-style: none; padding: 0; margin-top: clamp(1.5rem, 4vh, 2.5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.guias-l li { min-width: 0; }
/* la tarjeta entera es el enlace: título, línea y «Leer la guía» abajo; al pasar, sube un poco y el final se subraya */
.gcard { display: grid; height: 100%; align-content: start; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 72%, transparent); color: var(--night-ink);
  text-decoration: none; transition: transform var(--t-ui) var(--ease-out), background-color var(--t-hover) ease; }
.gcard h3 { font: 600 var(--s-lead)/1.2 var(--ui-font); letter-spacing: -.01em; }
.gcard p { margin-top: 10px; }
.gcard .go { margin-top: 18px; font-size: var(--s-small); font-weight: 600; color: var(--action); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .22em; transition: text-decoration-color var(--t-hover) ease; }
.gcard .go::after { content: " →"; }
@media (hover: hover) and (pointer: fine) {
  .gcard:hover { transform: translateY(-3px); background: var(--paper); }
  .gcard:hover .go { text-decoration-color: currentColor; }
}
.guias .todas { margin-top: 22px; font-weight: 600; }
.guias .todas .link { text-decoration-color: currentColor; }
.guias-l.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 64rem) { .guias-l, .guias-l.cols-4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 48rem) { .guias-l, .guias-l.cols-4 { grid-template-columns: minmax(0, 1fr); } }


/* ================= pasada de diseño (18-oct, auditoría de Juan): superficies, jerarquía y botones =================
   Una sola superficie para todo lo que va sobre el cielo: papel translúcido, borde de luz y sombra suave. La llevan las
   tarjetas de precio, de guías y de moneda, el resumen, los puntos de las páginas para Google, los apartados de /pro
   y /equipos y los documentos largos. Cada sección del inicio lleva una etiqueta corta sobre el título. */
:root {
  --card: color-mix(in srgb, var(--paper) 76%, transparent);
  --card-line: color-mix(in srgb, #fff 55%, transparent);
  --card-shadow: 0 18px 46px #0f1c1e14, 0 2px 6px #0f1c1e0d;
}
/* la etiqueta toma el acento que paintSky elige según la tinta (--sky-action); sin script, el teal oscuro de siempre */
.kicker { margin-bottom: 12px; font: 600 var(--s-small)/1.3 var(--ui-font); color: var(--sky-action, var(--action)); transition: color 420ms ease; }
.sec-head p { font-size: var(--s-lead); line-height: 1.4; }
.guias .lead { margin-top: 14px; max-width: 46ch; font-size: var(--s-lead); line-height: 1.4; }

/* botones: el principal se levanta al pasar; el secundario es un contorno del mismo color del texto */
.btn { box-shadow: 0 1px 2px #031f1d1f; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, box-shadow var(--t-hover) ease; }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 38%, transparent); }
.btn.ghost.sm { min-height: 40px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px #1a9e9447; }
  .btn.ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); box-shadow: inset 0 0 0 1.5px currentColor; transform: none; }
}
.btn:active { transform: scale(.97); }
.top nav a[aria-current="page"] { text-decoration-color: var(--accent); }

/* hero: los tres hechos como fichas con su marca */
.hero .facts { gap: 8px; }
.hero .facts li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--card); color: var(--night-ink); box-shadow: 0 1px 3px #0f1c1e14; font-size: 14px; }
.hero .facts li::before, .hero .facts li + li::before { content: "✓"; margin: 0; opacity: 1; font-weight: 700; color: var(--action); }

/* la misma superficie para lo que iba suelto sobre el cielo */
.resumen, .plan, .moneda, .gcard, .step[aria-selected="true"] { box-shadow: var(--card-shadow); }
.puntos-l li, .safe-l li, .pasos-l li, .back .bk-l, .back .bk-r, .doc {
  padding: clamp(20px, 2vw, 28px); border-radius: var(--radius); background: var(--card); color: var(--night-ink); box-shadow: var(--card-shadow); }
.puntos-l li::before, .safe-l li::before { content: ""; display: block; width: 34px; height: 4px; margin-bottom: 16px; border-radius: 2px; background: var(--accent); }
.safe-l { align-items: stretch; }
.pasos-l li::before { display: none; } /* los pasos ya llevan su número */
.pasos-l { align-items: stretch; }
.back .bk-l h3, .back .bk-r h3 { margin-bottom: 4px; }
.back ul { margin-top: 12px; }
.back ul li { position: relative; padding-left: 18px; }
.back ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* documentos largos (/privacidad, /reportar, las guías): un panel con una línea entre apartados */
.doc { padding: clamp(24px, 3.2vw, 48px); }
.doc .lg + .lg { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); padding-top: clamp(1.75rem, 3.5vw, 2.75rem); border-top: 1px solid color-mix(in srgb, var(--night-ink) 12%, transparent); }
.doc .lg h2 { color: var(--night-ink); }
.doc .pasos-g li::marker { color: var(--action); }

/* preguntas: una línea entre cada pregunta y más aire */
.faq details { border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.faq .qs > details:last-of-type { border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.faq summary { padding: 13px 0; }

/* la franja de precio: la descarga en un panel de vidrio que sirve de día y de noche */
.band .br { padding: clamp(22px, 2.4vw, 30px); border-radius: var(--radius); background: color-mix(in srgb, currentColor 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent); }
.band .next:first-of-type { margin-top: 20px; }

/* /precios: los botones secundarios ocupan el ancho de su tarjeta */
.plan .end .btn { width: 100%; }
.plan .pnote { text-wrap: pretty; }

@media (max-width: 48rem) {
  .hero .facts li { font-size: 13px; padding: 5px 10px 5px 9px; }
  .band .br { padding: 20px; }
  .doc { padding: 20px 18px; }
}

/* hero con texto a la izquierda y descarga a la derecha: el botón queda a la altura de la primera línea del texto, no centrado
   con el bloque entero (Juan, 19-oct, /descargas). El texto baja la mitad de lo que el botón le saca de alto a una línea.
   Solo en PC: en tablet y teléfono van uno debajo del otro */
@media (min-width: 64.01rem) {
  .hero .aside { align-items: flex-start; }
  .hero .aside .sub { padding-top: calc((52px - 1.4em) / 2); }
}

/* texto sobre el cielo (19-oct): js_core marca cada bloque con data-skytx y le da en --tx la tinta del cielo que tiene detrás
   y en --tx-a el acento. :where deja que las reglas propias (la pregunta abierta, el paso elegido) sigan mandando.
   El color cambia al mismo ritmo que el cielo (520 ms lineal en .sky), para que los dos se muevan juntos */
:where([data-skytx]) { color: var(--sky-ink); }
[data-skytx] { --sky-ink: var(--tx); --sky-soft: color-mix(in srgb, var(--tx) 74%, transparent); --sky-action: var(--tx-a);
  transition: color 520ms linear, text-decoration-color var(--t-hover) ease; }
@media (prefers-reduced-motion: reduce) { [data-skytx] { transition: none; } }