/* sitio/assets/estilo.css — esboza.com con la piel de chat.esboza.com y el ritmo de una
 * web de producto: titulares grandes y pesados, poco texto, y en cada sección un marco
 * de producto sobre un panel tintado o una tarjeta gris. Los tokens son los de
 * librechat/produccion/api/esboza-cliente/tema.css (2-sep-2026), copiados literalmente. */

:root {
  --canvas: #FFFFFF; --paper: #FFFFFF; --raised: #F7F7F5; --hueso: #FBFBFA;
  --ink: #37352F; --ink-soft: #504E48; --muted: #787774; --faint: #9B9A97; --icon: #91918E;
  --line: #EBEBEA; --line-strong: #DCDBD8; --hover: rgba(55,53,47,.06); --selected: rgba(55,53,47,.08);
  --accent: #2383E2; --accent-fg: #FFFFFF; --accent-hover: #1A73CB; --accent-soft: rgba(35,131,226,.12);
  --foco: 0 0 0 2px rgba(35,131,226,.35);
  --danger: #D44C47; --warn: #D9730D; --ok: #448361;
  --tono-gris: #787774; --tono-marron: #9F6B53; --tono-naranja: #D9730D; --tono-amarillo: #CB912F;
  --tono-verde: #448361; --tono-azul: #337EA9; --tono-morado: #9065B0; --tono-rosa: #C14C8A; --tono-rojo: #D44C47;
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  --r-sm: 4px; --r: 6px; --r-lg: 8px; --r-xl: 12px; --r-panel: 16px;
  --sombra-menu: rgba(15,15,15,.05) 0 0 0 1px, rgba(15,15,15,.1) 0 3px 6px, rgba(15,15,15,.2) 0 9px 24px;
  --sombra-marco: rgba(15,15,15,.06) 0 0 0 1px, rgba(15,15,15,.08) 0 8px 24px -8px, rgba(15,15,15,.12) 0 24px 48px -24px;
  --curva: cubic-bezier(.2,0,0,1); --rapido: 100ms; --medio: 200ms;
  --ancho: 1120px;
  /* Los tintes de los paneles: un tono de la casa mezclado con el papel. */
  --tinte-melocoton: color-mix(in srgb, var(--tono-naranja) 16%, var(--paper));
  --tinte-menta: color-mix(in srgb, var(--tono-verde) 16%, var(--paper));
  --tinte-amarillo: color-mix(in srgb, var(--tono-amarillo) 18%, var(--paper));
  --tinte-azul: color-mix(in srgb, var(--tono-azul) 14%, var(--paper));
  --tinte-lila: color-mix(in srgb, var(--tono-morado) 14%, var(--paper));
  --tinte-rosa: color-mix(in srgb, var(--tono-rosa) 12%, var(--paper));
  color-scheme: light;
}
.dark {
  --canvas: #191919; --paper: #191919; --raised: #202020; --hueso: #1E1E1E;
  --ink: #D4D4D4; --ink-soft: #BDBDBD; --muted: #9B9B9B; --faint: #7A7A7A; --icon: #8A8A8A;
  --line: #2C2C2C; --line-strong: #3A3A3A; --hover: rgba(255,255,255,.055); --selected: rgba(255,255,255,.08);
  --accent: #2383E2; --accent-hover: #3B93EB; --accent-soft: rgba(35,131,226,.2); --foco: 0 0 0 2px rgba(35,131,226,.45);
  --danger: #DF5452; --warn: #C77D48; --ok: #529E72;
  --tono-gris: #9B9B9B; --tono-marron: #BA856F; --tono-naranja: #C77D48; --tono-amarillo: #CA9849;
  --tono-verde: #529E72; --tono-azul: #5E87C9; --tono-morado: #9D68D3; --tono-rosa: #D15796; --tono-rojo: #DF5452;
  --sombra-menu: rgba(0,0,0,.2) 0 0 0 1px, rgba(0,0,0,.3) 0 3px 6px, rgba(0,0,0,.5) 0 9px 24px;
  --sombra-marco: rgba(255,255,255,.08) 0 0 0 1px, rgba(0,0,0,.4) 0 12px 32px -8px;
  --tinte-melocoton: color-mix(in srgb, var(--tono-naranja) 22%, var(--paper));
  --tinte-menta: color-mix(in srgb, var(--tono-verde) 22%, var(--paper));
  --tinte-amarillo: color-mix(in srgb, var(--tono-amarillo) 22%, var(--paper));
  --tinte-azul: color-mix(in srgb, var(--tono-azul) 22%, var(--paper));
  --tinte-lila: color-mix(in srgb, var(--tono-morado) 22%, var(--paper));
  --tinte-rosa: color-mix(in srgb, var(--tono-rosa) 20%, var(--paper));
  color-scheme: dark;
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: var(--canvas); }
body { color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, h4, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--r-sm); }
strong, b { font-weight: 600; }
.ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wrap { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.estrecho { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* ── tipografía ───────────────────────────────────────────────────────────── */
.kicker { font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--muted); }
.display { font-size: clamp(40px, 6.2vw, 68px); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; }
.h1 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; }
.h2 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.12; letter-spacing: -.025em; font-weight: 700; }
.h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.015em; font-weight: 700; }
.h4 { font-size: 16px; line-height: 1.35; font-weight: 600; }
.lead { font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
.p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.fino { font-size: 14px; line-height: 1.5; color: var(--muted); }
.meta { font-size: 13px; line-height: 1.5; color: var(--muted); }
.resalte { display: inline-block; padding: 0 .28em; border-radius: .22em; background: var(--tinte-amarillo); }
.max-sm { max-width: 30rem; } .max-md { max-width: 40rem; } .max-lg { max-width: 48rem; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-6 { margin-top: 48px; } .mt-8 { margin-top: 72px; }
.centrado { text-align: center; }
.centrado .max-md, .centrado .max-sm, .centrado .max-lg { margin-left: auto; margin-right: auto; }
.cita { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.35; letter-spacing: -.01em; color: var(--ink); max-width: 36rem; margin: 0 auto; text-align: center; }
.cita-quien { margin-top: 16px; text-align: center; font-size: 13px; color: var(--ink); font-weight: 600; }
.cita-quien small { display: block; font-weight: 400; color: var(--muted); }

/* ── botones ──────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; transition: background-color var(--rapido) ease, border-color var(--rapido) ease, color var(--rapido) ease; }
.btn-prim { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn-prim:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-sec { background: var(--paper); border-color: var(--line-strong); color: var(--accent); }
.btn-sec:hover { background: var(--raised); }
.btn-ghost { color: var(--ink-soft); font-weight: 500; }
.btn-ghost:hover { background: var(--hover); color: var(--ink); }
.btn-lg { height: 40px; padding: 0 18px; font-size: 15px; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn .ico { width: 16px; height: 16px; }
.enlace { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.enlace:hover { text-decoration-color: var(--ink); }
.mas { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--accent); }
.mas .ico { width: 15px; height: 15px; }
.botones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ── cabecera y menú ──────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nav-inner { display: flex; align-items: center; gap: 8px; height: 60px; }
.marca { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.marca svg { width: 24px; height: 24px; }
.nav-menu { display: none; align-items: center; gap: 2px; margin: 0 auto; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 3px; height: 32px; padding: 0 9px; border-radius: var(--r); font-size: 13.5px; font-weight: 500; color: var(--ink); }
.nav-link .ico { width: 13px; height: 13px; color: var(--icon); transition: transform var(--medio) var(--curva); }
.nav-link:hover, .nav-item[data-abierto] > .nav-link { background: var(--hover); }
.nav-item[data-abierto] > .nav-link .ico { transform: rotate(180deg); }
.nav-derecha { display: flex; align-items: center; gap: 6px; }
.nav-entrar { display: none; }
.nav-hamb { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--r); color: var(--ink-soft); }
.mega { position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% -4px; z-index: 70; width: max-content; min-width: 560px; padding: 16px; border-radius: var(--r-xl); background: var(--paper); box-shadow: var(--sombra-menu); display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 12px 24px; opacity: 0; pointer-events: none; transition: opacity var(--rapido) var(--curva), translate var(--rapido) var(--curva); }
.mega[data-cols="1"] { min-width: 300px; --cols: 1; }
.mega[data-cols="3"] { --cols: 3; min-width: 760px; }
.nav-item[data-abierto] > .mega { opacity: 1; translate: -50% 0; pointer-events: auto; }
.mega-col .kicker { padding: 4px 8px 6px; }
.mega a { display: block; padding: 6px 8px; border-radius: var(--r); font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.mega a small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 1px; }
.mega a:hover { background: var(--hover); }
@media (min-width: 960px) { .nav-menu { display: flex; } .nav-hamb { display: none; } .nav-entrar { display: inline-flex; } }
.nav-movil { display: none; position: fixed; inset: 60px 0 0 0; z-index: 55; background: var(--paper); overflow-y: auto; padding: 8px 24px 40px; border-top: 1px solid var(--line); }
body.nav-abierto .nav-movil { display: block; }
body.nav-abierto { overflow: hidden; }
.nav-movil details { border-bottom: 1px solid var(--line); }
.nav-movil summary { list-style: none; display: flex; align-items: center; justify-content: space-between; height: 48px; font-size: 16px; font-weight: 600; cursor: pointer; }
.nav-movil summary::-webkit-details-marker { display: none; }
.nav-movil summary .ico { width: 16px; height: 16px; color: var(--icon); }
.nav-movil .nav-movil-lista { padding: 0 0 12px; }
.nav-movil .nav-movil-lista a { display: block; padding: 8px 0 8px 12px; font-size: 15px; color: var(--ink-soft); }
.nav-movil > a { display: flex; align-items: center; height: 48px; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--line); }
.nav-movil .botones { margin-top: 20px; }
.tema-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r); color: var(--icon); }
.tema-btn:hover { background: var(--hover); color: var(--ink); }
.tema-btn .sol, .dark .tema-btn .luna { display: none; }
.dark .tema-btn .sol { display: block; }

/* ── secciones ────────────────────────────────────────────────────────────── */
.seccion { padding: 72px 0; }
.seccion-corta { padding: 40px 0; }
.banda { background: var(--raised); }
.cabecera-seccion { max-width: 44rem; }
.cabecera-seccion .lead { margin-top: 12px; max-width: 36rem; }
.cabecera-seccion .mas { margin-top: 12px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } .grid-5 { grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.dos { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .dos { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; } .dos.iguales { grid-template-columns: 1fr 1fr; } .dos.invertida > :first-child { order: 2; } }
.dos-texto .lead { margin-top: 12px; }
.dos-texto .mas { margin-top: 14px; }
.dos-texto ul { margin-top: 16px; display: grid; gap: 8px; }
.dos-texto li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.dos-texto li .ico { width: 16px; height: 16px; color: var(--ok); margin-top: 3px; }
.dos-texto li.no .ico { color: var(--faint); }

/* ── paneles tintados y marcos de producto ────────────────────────────────── */
.panel { position: relative; border-radius: var(--r-panel); padding: 36px 36px 0; overflow: hidden; background: var(--raised); }
.panel-melocoton { background: var(--tinte-melocoton); } .panel-menta { background: var(--tinte-menta); } .panel-amarillo { background: var(--tinte-amarillo); } .panel-azul { background: var(--tinte-azul); } .panel-lila { background: var(--tinte-lila); } .panel-rosa { background: var(--tinte-rosa); } .panel-gris { background: var(--raised); }
.panel.cerrado { padding-bottom: 36px; }
.panel .marco { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: -1px; }
.panel.cerrado .marco { border-radius: var(--r-xl); margin-bottom: 0; }
@media (max-width: 719px) { .panel { padding: 20px 16px 0; border-radius: var(--r-xl); } .panel.cerrado { padding-bottom: 20px; } }
.marco { position: relative; background: var(--paper); border-radius: var(--r-xl); box-shadow: var(--sombra-marco); overflow: hidden; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.marco-top { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; }
.marco-top .puntos { display: inline-flex; gap: 5px; }
.marco-top .puntos i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.marco-top .meta { margin-left: auto; }
.flotante { position: absolute; z-index: 2; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sombra-menu); padding: 12px 14px; font-size: 13px; line-height: 1.45; max-width: 300px; }
.flotante .kicker { margin-bottom: 4px; }
@media (max-width: 719px) { .flotante { display: none; } }

/* la aplicación dentro de un marco */
.app { display: grid; grid-template-columns: 1fr; min-height: 380px; }
@media (min-width: 720px) { .app.con-lado { grid-template-columns: 208px 1fr; } }
.app-lado { display: none; background: var(--raised); border-right: 1px solid var(--line); padding: 12px 8px; }
@media (min-width: 720px) { .app.con-lado .app-lado { display: block; } }
.app-lado-marca { display: flex; align-items: center; gap: 6px; padding: 4px 8px 10px; font-weight: 700; font-size: 13px; }
.app-lado-marca svg { width: 16px; height: 16px; }
.app-lado .kicker { padding: 10px 8px 4px; font-size: 11px; }
.app-fila { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-fila .ico { width: 15px; height: 15px; color: var(--icon); }
.app-fila[data-on] { background: var(--selected); color: var(--ink); font-weight: 500; }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-hilo { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; overflow: hidden; }
.app-hilo.desliza { overflow-y: auto; max-height: 440px; }
.app-pie { display: flex; align-items: center; gap: 8px; margin: 0 20px 18px; height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); color: var(--faint); font-size: 13px; }
.app-pie .enviar { margin-left: auto; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.app-pie .enviar .ico { width: 14px; height: 14px; }
.msg { display: grid; grid-template-columns: 26px 1fr; gap: 10px; min-width: 0; }
.ava { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.ava-tu { background: var(--line); color: var(--ink-soft); }
.ava-e { background: var(--ink); color: var(--paper); }
.quien { font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.burbuja { display: inline-block; padding: 8px 12px; border-radius: var(--r-lg); background: var(--raised); color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.dicho { color: var(--ink); font-size: 13.5px; line-height: 1.55; }
.dicho + .dicho { margin-top: 6px; }
.adjunto { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12px; color: var(--ink-soft); }
.adjunto .ico { width: 13px; height: 13px; color: var(--icon); }
.traza { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.traza + .traza { margin-top: 4px; }
.traza .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: late 1.2s ease-in-out infinite alternate; }
.traza .ico { width: 13px; height: 13px; color: var(--ok); }
@keyframes late { from { opacity: .35; } to { opacity: 1; } }
.fuentes { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.fuentes .kicker { font-size: 11px; }
.fuentes p { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.fuentes ul { margin-top: 4px; display: grid; gap: 2px; }
.fuentes li { font-size: 12px; color: var(--muted); }
.tarjeta-doc { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); max-width: 32rem; }
.tarjeta-doc .ext { width: 32px; height: 38px; flex: none; border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--muted); }
.tarjeta-doc .nombre { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta-doc .meta { font-size: 12px; }
.tarjeta-doc .acciones { margin-left: auto; display: inline-flex; gap: 2px; flex: none; }
.tarjeta-doc .acciones span { font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 4px 8px; border-radius: var(--r-sm); }
.tarjeta-doc .acciones span:first-child { color: var(--accent); }
.tarjeta-doc .barra { height: 3px; margin-top: 6px; border-radius: 2px; background: var(--line); overflow: hidden; }
.tarjeta-doc .barra i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 1.2s var(--curva); }
.etapas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; color: var(--muted); }
.etapa { display: inline-flex; align-items: center; gap: 5px; }
.etapa .ico { width: 12px; height: 12px; color: var(--ok); }
.etapa .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: late 1.2s ease-in-out infinite alternate; }
.etapa.hecha { color: var(--ink-soft); } .etapa.ahora { color: var(--ink); font-weight: 600; } .etapa.futura { color: var(--faint); }
.etapas .pct { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-weight: 600; }
.versiones { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.version { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--r); font-size: 12px; color: var(--ink-soft); background: var(--paper); }
.version[data-actual] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.version small { color: var(--faint); }
.entra { animation: entra var(--medio) var(--curva) both; }
@keyframes entra { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .entra, .traza .punto, .etapa .punto { animation: none; } }

/* la hoja de un documento (el lienzo del Estudio, un informe, una guía) */
.hoja { background: #fff; color: #37352F; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 28px 32px; font-size: 12.5px; line-height: 1.55; box-shadow: 0 1px 2px rgba(15,15,15,.06); }
.dark .hoja { background: #F3F2EF; }
.hoja h5 { margin: 0 0 8px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.hoja h6 { margin: 14px 0 4px; font-size: 13px; font-weight: 700; }
.hoja p { margin: 0 0 8px; color: #504E48; }
.hoja .marca-hueco { background: rgba(217,115,13,.18); border-radius: 3px; padding: 0 3px; color: #37352F; font-weight: 500; }
.hoja .sello { display: inline-block; margin-top: 6px; padding: 2px 6px; border: 1px solid #DCDBD8; border-radius: 3px; font-size: 10px; letter-spacing: .06em; color: #787774; }
.hoja .hueco { display: block; margin: 10px 0; padding: 14px; border: 1px dashed #DCDBD8; border-radius: 4px; color: #9B9A97; font-size: 11.5px; text-align: center; }
.hoja .selec { background: rgba(35,131,226,.18); }
.hoja table { font-size: 11.5px; margin: 6px 0 10px; }
.hoja th, .hoja td { border: 1px solid #E5E4E1; padding: 4px 6px; text-align: left; }
.hoja th { background: #F7F7F5; font-weight: 600; }
.hoja .cajetin { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hoja .cajetin div { border: 1px solid #DCDBD8; padding: 8px 10px; font-size: 11px; color: #504E48; min-height: 56px; }
.hoja .cajetin b { display: block; font-size: 10px; color: #9B9A97; margin-bottom: 4px; font-weight: 600; }
.hoja .tachado { text-decoration: line-through; color: #D44C47; }
.hoja .insertado { text-decoration: underline; color: #2383E2; }
.hoja .agua { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hoja .agua span { font-size: 64px; font-weight: 800; letter-spacing: .06em; color: rgba(55,53,47,.12); transform: rotate(-28deg); }
.hoja.con-agua { position: relative; overflow: hidden; }

/* una captura generada, dibujada: una ventana con su contenido, en tinta */
.cap { border: 1px solid #DCDBD8; border-radius: 6px; background: #fff; overflow: hidden; font-size: 11px; line-height: 1.45; color: #37352F; margin: 10px 0; }
.cap-bar { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; background: #F7F7F5; border-bottom: 1px solid #EBEBEA; font-size: 10.5px; color: #787774; }
.cap-bar i { width: 7px; height: 7px; border-radius: 50%; background: #DCDBD8; }
.cap-bar i + i { margin-left: -2px; }
.cap-bar span { margin-left: 4px; }
.cap-body { padding: 8px 10px; }
.cap-term { background: #1F1F1F; color: #D4D4D4; font-family: var(--mono); font-size: 10.5px; padding: 8px 10px; white-space: pre; overflow: hidden; }
.cap-term b { color: #8FD08F; font-weight: 500; }
.cap-fila { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px solid #F1F1EF; }
.cap-fila span:first-child { color: #787774; min-width: 90px; }
.cap-pie { font-size: 10.5px; color: #787774; margin-top: 4px; font-style: italic; }
.cap-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* la biblioteca: láminas */
.laminas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 18px 20px; }
.lamina { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.lamina-pag { aspect-ratio: 1 / 1.25; background: #fff; padding: 12px 12px 0; position: relative; border-bottom: 1px solid var(--line); }
.dark .lamina-pag { background: #F3F2EF; }
.lamina-pag i { display: block; height: 4px; border-radius: 2px; background: #E5E4E1; margin-bottom: 5px; }
.lamina-pag i.t { height: 7px; width: 60%; background: #C9C8C4; margin-bottom: 8px; }
.lamina-pag i.c { width: 80%; }
.lamina-pag .cap { margin: 6px 0 0; }
.lamina-pag .cap-body { padding: 6px; }
.lamina-pag .cap-body i { height: 3px; margin-bottom: 4px; }
.lamina-cuerpo { padding: 8px 10px 10px; }
.lamina-cuerpo .nombre { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lamina-cuerpo .meta { font-size: 11.5px; }
.lamina .tag { margin-top: 4px; }

/* el historial de versiones */
.historial { padding: 14px 18px; }
.historial li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.historial li:last-child { border-bottom: 0; }
.historial .v { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.historial .nota { color: var(--ink); }
.historial .quien { margin-top: 2px; }
.historial .cuando { font-size: 12px; color: var(--faint); white-space: nowrap; }
.historial li[data-actual] .v::after { content: "actual"; display: inline-block; margin-left: 0; font-size: 10px; font-weight: 600; color: var(--accent); }
.historial li[data-rama] { padding-left: 18px; border-left: 2px solid var(--line-strong); margin-left: 16px; }

/* una hoja de cálculo dibujada */
.calc { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.calc th { background: var(--raised); color: var(--muted); font-weight: 500; border: 1px solid var(--line); padding: 4px 8px; text-align: center; }
.calc td { border: 1px solid var(--line); padding: 4px 8px; text-align: right; color: var(--ink-soft); }
.calc td:first-child { text-align: left; color: var(--ink); }
.calc td.formula { color: var(--muted); font-family: var(--mono); font-size: 10.5px; text-align: left; }
.calc td.cambio { background: var(--tinte-amarillo); color: var(--ink); font-weight: 600; }
.calc-pestanas { display: flex; gap: 2px; padding: 8px 12px 0; border-top: 1px solid var(--line); }
.calc-pestanas span { padding: 4px 10px; font-size: 11.5px; color: var(--muted); border: 1px solid var(--line); border-bottom: 0; border-radius: 4px 4px 0 0; }
.calc-pestanas span[data-on] { color: var(--ink); font-weight: 600; background: var(--raised); }

/* el tablero de trabajos */
.tablero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 18px; }
.tablero .col > .kicker { margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.tablero .col > .kicker i { width: 7px; height: 7px; border-radius: 50%; }
.tablero .ficha-trabajo { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; margin-bottom: 8px; font-size: 12px; }
.tablero .ficha-trabajo b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tablero .ficha-trabajo .meta { font-size: 11px; }

/* un diagrama simple: cajas y flechas, en tinta */
.diagrama { display: grid; gap: 14px; align-items: center; font-size: 13px; }
@media (min-width: 720px) { .diagrama { grid-template-columns: 1fr auto 1fr; } .diagrama.tres { grid-template-columns: 1fr auto 1fr auto 1fr; } }
.caja { border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--paper); padding: 12px 14px; }
.caja .kicker { margin-bottom: 6px; }
.caja code { display: block; font-size: 12px; margin: 2px 0; background: transparent; padding: 0; }
.flecha { color: var(--faint); display: flex; justify-content: center; }
.flecha .ico { width: 22px; height: 22px; }
@media (max-width: 719px) { .flecha .ico { transform: rotate(90deg); } }

/* ── fichas (las tarjetas grises con visual) ──────────────────────────────── */
.ficha { position: relative; display: flex; flex-direction: column; border-radius: var(--r-panel); background: var(--raised); padding: 24px 24px 0; overflow: hidden; color: inherit; }
.ficha.cerrada { padding-bottom: 24px; }
.ficha-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ficha-cab .h4 { font-size: 17px; letter-spacing: -.01em; }
.ficha-cab .p { margin-top: 4px; max-width: 30rem; }
.ficha-cab .circulo { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.ficha-cab .circulo .ico { width: 13px; height: 13px; }
.ficha-visual { margin-top: 20px; }
.ficha-visual .marco { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: -1px; }
.ficha.cerrada .ficha-visual .marco { border-radius: var(--r-xl); margin-bottom: 0; }
a.ficha:hover { background: color-mix(in srgb, var(--raised) 70%, var(--line)); }
.ficha-mini { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.ficha-mini:hover { background: var(--hueso); border-color: var(--line-strong); }
.ficha-mini .redondo { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.ficha-mini .redondo .ico { width: 16px; height: 16px; }
.ficha-mini small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.ficha-mini .ico-fin { width: 14px; height: 14px; color: var(--icon); margin-top: auto; }
.subnav { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .subnav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.subnav a { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--r-xl); background: var(--raised); font-size: 14px; font-weight: 600; color: var(--ink); }
.subnav a:hover { background: color-mix(in srgb, var(--raised) 70%, var(--line)); }
.subnav a .ico { width: 18px; height: 18px; color: var(--ink-soft); }

/* ── portada ──────────────────────────────────────────────────────────────── */
.hero { padding: 64px 0 24px; text-align: center; }
@media (min-width: 900px) { .hero { padding: 88px 0 32px; } }
.hero .lead { margin: 18px auto 0; max-width: 34rem; }
.hero .botones { justify-content: center; margin-top: 24px; }
.hero-marco { margin: 40px auto 0; max-width: 1040px; }
.hero-marco .marco { font-size: 14px; }
.pestanas { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-lg); background: var(--raised); }
.pestana { height: 30px; padding: 0 12px; border-radius: var(--r); font-size: 13px; font-weight: 500; color: var(--muted); }
.pestana:hover { color: var(--ink); }
.pestana[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(15,15,15,.1); }
.formatos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; font-size: 14px; font-weight: 600; color: var(--muted); }
.formatos span { display: inline-flex; align-items: center; gap: 6px; }
.formatos .ico { width: 16px; height: 16px; }
.ejemplo-lamina { display: block; border-radius: var(--r-xl); overflow: hidden; background: var(--raised); }
.ejemplo-lamina img { aspect-ratio: 1 / 1.3; object-fit: cover; object-position: top; width: 100%; background: var(--raised); }
.ejemplo-lamina .cuerpo { padding: 12px 14px 14px; }
.ejemplo-lamina .h4 { font-size: 14px; }
.ejemplo-lamina .meta { margin-top: 2px; font-size: 12px; }
a.ejemplo-lamina:hover { background: color-mix(in srgb, var(--raised) 70%, var(--line)); }
.faq { border-top: 1px solid var(--line); }
.faq:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-size: 15px; font-weight: 600; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { width: 16px; height: 16px; color: var(--icon); flex: none; transition: transform var(--medio) var(--curva); }
.faq[open] summary .ico { transform: rotate(180deg); }
.faq .faq-r { padding: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 44rem; }
.cierre { padding: 88px 0; background: var(--raised); text-align: center; }
.cierre .botones { justify-content: center; margin-top: 20px; }
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-pista { display: flex; gap: 40px; width: max-content; animation: desliza 50s linear infinite; }
.ticker-pista span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.ticker-pista .ico { width: 14px; height: 14px; color: var(--icon); }
@keyframes desliza { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-pista { animation: none; } }

/* ── páginas de producto ──────────────────────────────────────────────────── */
.cabecera-pagina { padding: 56px 0 40px; }
@media (min-width: 900px) { .cabecera-pagina { padding: 72px 0 48px; } }
.cabecera-pagina .h1 { margin-top: 10px; max-width: 30rem; }
.cabecera-pagina .lead { margin-top: 16px; max-width: 30rem; }
.cabecera-pagina .botones { margin-top: 24px; }
.cabecera-pagina .dos { align-items: center; }
.miga { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.miga a:hover { color: var(--ink); }
.miga .ico { width: 12px; height: 12px; color: var(--faint); }
.bloque { padding: 48px 0; }
.bloque .cabecera-seccion { margin-bottom: 24px; }
.dos-marcos { display: grid; gap: 16px; }
@media (min-width: 900px) { .dos-marcos { grid-template-columns: 1fr 1fr; } }
.nota-pie { font-size: 13px; color: var(--muted); max-width: 44rem; }
.tabla { font-size: 14px; }
.tabla th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-strong); }
.tabla td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); line-height: 1.5; }
.tabla td:first-child { color: var(--ink); font-weight: 500; }
.tabla-desliza { overflow-x: auto; }
.cifras { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cifra { padding: 18px 20px; border-radius: var(--r-xl); background: var(--raised); }
.cifra-n { font-size: 30px; line-height: 1.05; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cifra-t { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.4; }

/* ── precios ──────────────────────────────────────────────────────────────── */
.planes { display: grid; gap: 16px; }
@media (min-width: 900px) { .planes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan { display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-panel); background: var(--raised); }
.plan[data-destacado] { box-shadow: inset 0 0 0 1.5px var(--ink); }
.plan .h3 { display: flex; align-items: center; gap: 8px; }
.plan .precio { margin-top: 14px; display: flex; align-items: baseline; gap: 4px; }
.plan .precio b { font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan .precio span { font-size: 13px; color: var(--muted); }
.plan .precio-nota { margin-top: 6px; font-size: 12px; color: var(--faint); min-height: 18px; }
.plan .fino { margin-top: 8px; }
.plan .btn { margin-top: 18px; width: 100%; }
.plan ul { margin-top: 18px; display: grid; gap: 7px; }
.plan li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.plan li .ico { width: 15px; height: 15px; color: var(--ok); margin-top: 2px; }
.periodo { display: inline-flex; align-items: center; gap: 10px; }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px; border-radius: 3px; background: color-mix(in srgb, currentColor 12%, transparent); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.tag i { display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── pie ──────────────────────────────────────────────────────────────────── */
.pie { padding: 56px 0 32px; }
.pie-cols { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .pie-cols { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } }
.pie .kicker { margin-bottom: 10px; }
.pie ul { display: grid; gap: 6px; }
.pie li a { font-size: 13.5px; color: var(--ink-soft); }
.pie li a:hover { color: var(--ink); }
.pie-marca .fino { margin-top: 10px; max-width: 18rem; }
.pie-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--faint); }
.pie-legal a:hover { color: var(--ink); }
.pie-legal .copia { margin-right: auto; }

/* ── piezas: el Estudio, el clip, ajustes ─────────────────────────────────── */
.estudio { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .estudio { grid-template-columns: 1fr 250px; } }
.estudio-doc { padding: 20px; background: var(--raised); }
.estudio-chat { display: none; border-left: 1px solid var(--line); padding: 14px; flex-direction: column; gap: 12px; font-size: 12.5px; }
@media (min-width: 900px) { .estudio-chat { display: flex; } }
.estudio-chat .app-pie { margin: auto 0 0; height: 36px; font-size: 12px; }
.estudio-barra { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.estudio-barra .versiones { margin: 0 0 0 auto; }
.menu-clip { width: 240px; margin: 0 20px 8px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sombra-menu); padding: 6px; font-size: 13px; }
.menu-clip div { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--ink); }
.menu-clip div .ico { width: 15px; height: 15px; color: var(--icon); }
.menu-clip div[data-on] { background: var(--hover); }
.ajuste-caja { margin: 16px 20px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--ink); min-height: 96px; }
.ajuste-pie { display: flex; justify-content: space-between; padding: 0 20px 16px; font-size: 12px; color: var(--muted); }
.slide { background: #fff; color: #37352F; aspect-ratio: 16 / 9; border-radius: var(--r-sm); padding: 24px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; border: 1px solid var(--line); }
.slide h5 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
.slide p { font-size: 12px; color: #504E48; margin: 0; }
.slide .cap { margin: 0; }
.slide-n { position: absolute; right: 12px; bottom: 8px; font-size: 10px; color: #9B9A97; }

/* Dentro de una ficha, el marco se recorta como una captura: altura fija y sin lateral. */
.ficha-visual { max-height: 360px; overflow: hidden; }
.ficha-visual .marco { min-height: 100%; }
.ficha .app-lado, .ficha .estudio-chat { display: none !important; }
.ficha .app.con-lado, .ficha .estudio { grid-template-columns: 1fr; }
.ficha .laminas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.resalte { padding: 0 .22em 0 .2em; margin-right: -.04em; }

/* ── pasada anti-«huele a IA» (3-sep): fuera iconos decorativos y círculos de color ── */
.wordmark { font-weight: 700; font-size: 17px; letter-spacing: -.03em; color: var(--ink); }
.nav-inner { height: 56px; }
.nav-derecha .btn { height: 32px; font-size: 13.5px; }
.chip { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--muted); background: var(--paper); }
.formatos { gap: 10px 24px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.formatos span { gap: 8px; }
.enlaces-fila { display: grid; gap: 20px 24px; grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .enlaces-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .enlaces-fila { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.enlace-item { display: block; padding-top: 12px; border-top: 1px solid var(--line-strong); color: var(--ink); }
.enlace-item b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.enlace-item small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.enlace-item:hover b { text-decoration: underline; text-underline-offset: .18em; text-decoration-color: var(--faint); }
.principios { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .principios { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.principios a { display: block; padding: 14px 16px; border-radius: var(--r-xl); background: var(--paper); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.principios a small { display: block; font-size: 12px; font-weight: 500; color: var(--faint); margin-bottom: 4px; }
.principios a:hover { border-color: var(--line-strong); }
.cabecera-pagina .app-lado { display: none !important; }
.cabecera-pagina .app.con-lado { grid-template-columns: 1fr; }
.cabecera-pagina .app-hilo { max-height: 420px; overflow: hidden; }
.dos-texto li { grid-template-columns: 1fr; position: relative; padding-left: 14px; }
.dos-texto li .ico { display: none; }
.dos-texto li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 1px; background: var(--faint); }
@media (min-width: 900px) { .dos.invertida { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }

/* ── EL CANON, EN MOVIMIENTO (la demo de imágenes de la portada) ─────────────
   Un ciclo de 12 s: el texto del documento aparece, el canon fija sus datos, tres
   capturas se generan una tras otra con esos datos, y al final los mismos valores se
   iluminan a la vez en el texto y en las tres imágenes. Todo por CSS, sin JS. */
.cv { --ciclo: 12s; display: grid; gap: 18px; padding: 24px; }
@media (min-width: 900px) { .cv { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; } }
.cv-doc { background: #fff; color: #37352F; border-radius: var(--r-lg); padding: 20px 22px; font-size: 13px; line-height: 1.6; box-shadow: 0 1px 2px rgba(15,15,15,.08); animation: cv-doc var(--ciclo) infinite; }
.dark .cv-doc { background: #F3F2EF; }
.cv-doc h5 { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.cv-doc p { margin: 0 0 8px; color: #504E48; }
.cv-canon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #EBEBEA; }
.cv-canon .kicker { width: 100%; color: #787774; }
.cv-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 4px; background: #F7F7F5; border: 1px solid #DCDBD8; font-family: var(--mono); font-size: 11.5px; color: #37352F; opacity: 0; animation: cv-chip var(--ciclo) infinite; animation-delay: calc(var(--i) * .18s); }
.cv-caps { display: grid; gap: 12px; align-content: start; }
@media (min-width: 600px) { .cv-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cv-cap { position: relative; border-radius: var(--r-lg); background: #fff; border: 1px solid #DCDBD8; overflow: hidden; min-height: 150px; opacity: 0; animation: cv-cap var(--ciclo) infinite; animation-delay: var(--t); box-shadow: 0 1px 2px rgba(15,15,15,.08); }
.dark .cv-cap { background: #F3F2EF; }
.cv-cap .cap-bar { margin: 0; }
.cv-skel { position: absolute; inset: 22px 0 0 0; padding: 10px; background: #fff; animation: cv-skel var(--ciclo) infinite; animation-delay: var(--t); }
.dark .cv-skel { background: #F3F2EF; }
.cv-skel i { display: block; height: 7px; border-radius: 3px; background: #E5E4E1; margin-bottom: 8px; animation: cv-brillo 1.1s ease-in-out infinite alternate; }
.cv-skel i:nth-child(2) { width: 70%; } .cv-skel i:nth-child(3) { width: 85%; } .cv-skel i:nth-child(4) { width: 55%; }
.cv-cap .cap-term { min-height: 128px; }
.cv-cap .cap-body { font-size: 11px; }
.cv-estado { position: absolute; right: 8px; top: 3px; font-size: 10px; color: #787774; animation: cv-estado var(--ciclo) infinite; animation-delay: var(--t); }
.cv-estado::before { content: "generando…"; }
mark.cv-v { background: transparent; color: inherit; border-radius: 3px; padding: 0 2px; box-shadow: 0 0 0 0 rgba(35,131,226,0); animation: cv-marca var(--ciclo) infinite; animation-delay: calc(var(--k) * .55s); }
.cap-term mark.cv-v { color: #D4D4D4; }
.cv-veredicto { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); opacity: 0; animation: cv-veredicto var(--ciclo) infinite; }
.cv-veredicto .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
@keyframes cv-doc { 0% { opacity: 0; translate: 0 6px; } 6% { opacity: 1; translate: 0 0; } 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cv-chip { 0%, 8% { opacity: 0; scale: .92; } 12% { opacity: 1; scale: 1; } 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cv-cap { 0%, 18% { opacity: 0; translate: 0 8px; } 22% { opacity: 1; translate: 0 0; } 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cv-skel { 0%, 34% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes cv-estado { 0%, 34% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes cv-brillo { from { opacity: .55; } to { opacity: 1; } }
@keyframes cv-marca { 0%, 66% { background: transparent; box-shadow: 0 0 0 0 rgba(35,131,226,0); } 70% { background: rgba(35,131,226,.28); box-shadow: 0 0 0 3px rgba(35,131,226,.25); } 92% { background: rgba(35,131,226,.28); box-shadow: 0 0 0 3px rgba(35,131,226,.18); } 100% { background: transparent; box-shadow: 0 0 0 0 rgba(35,131,226,0); } }
@keyframes cv-veredicto { 0%, 76% { opacity: 0; translate: 0 4px; } 80% { opacity: 1; translate: 0 0; } 96% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cv-doc, .cv-chip, .cv-cap, .cv-veredicto { animation: none; opacity: 1; }
  .cv-skel, .cv-estado { display: none; }
  mark.cv-v { animation: none; background: rgba(35,131,226,.28); }
}
/* Bloques al estilo «titular + una línea + enlace», con el marco al lado. */
.rasgo { display: grid; gap: 24px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .rasgo { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; } .rasgo.invertido > :first-child { order: 2; } .rasgo.invertido { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.rasgo .h2 { font-size: clamp(24px, 2.8vw, 30px); }
.rasgo .p { margin-top: 10px; max-width: 26rem; }
.rasgo .mas { margin-top: 14px; }
.rasgo .panel { padding-top: 24px; }
.rasgo .panel .marco { max-height: 380px; }
.rasgo .panel.cerrado .marco { max-height: none; }
.rasgo .panel .app-hilo { max-height: 340px; overflow: hidden; }
.compacto { display: grid; gap: 16px 32px; }
@media (min-width: 720px) { .compacto { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.compacto b { display: block; font-size: 15px; font-weight: 600; }
.compacto p { margin-top: 4px; font-size: 14px; color: var(--muted); line-height: 1.5; }

/* ---------- Escenas con material real (imágenes generadas y páginas de verdad) ----------
   Se animan solo con .en-vista (lo pone sitio.js al entrar en pantalla, nunca con
   prefers-reduced-motion); sin la clase se ve el estado final. */
.esc { --ciclo: 12s; position: relative; height: 560px; overflow: hidden; }
.esc-hoja { position: absolute; left: 6%; top: 44px; width: 52%; }
.esc-pag { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 1px 2px rgba(15,15,15,.06), 0 12px 40px rgba(15,15,15,.12); background: #fff; }
.esc-cap { position: absolute; left: 19.2%; width: 61.7%; height: auto; border-radius: 3px; box-shadow: 0 1px 2px rgba(15,15,15,.12); }
.esc-cap-a { top: 6.4%; } .esc-cap-b { top: 33.1%; }
.esc-peticion { position: absolute; right: 5%; top: 56px; width: 36%; max-width: 380px; background: var(--paper); color: var(--ink); border-radius: 16px; padding: 14px 16px 12px; box-shadow: 0 1px 2px rgba(15,15,15,.08), 0 10px 30px rgba(15,15,15,.12); font-size: 15px; line-height: 1.45; }
.esc-peticion p { margin: 6px 0 0; }
.esc-quien { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--raised); font-size: 11px; font-weight: 600; color: var(--ink-2); }
.esc-adjunto { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.esc-adjunto .ico { width: 13px; height: 13px; }
.esc-estado { position: absolute; right: 5%; bottom: 44px; width: 36%; max-width: 380px; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; background: var(--paper); color: var(--ink); border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(15,15,15,.08), 0 10px 30px rgba(15,15,15,.12); font-size: 14px; }
.esc-punto { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.esc-estado-txt { font-weight: 600; }
.esc-estado-meta { font-size: 12.5px; color: var(--ink-2); }
.dark .esc-pag, .dark .esc-cap { box-shadow: 0 12px 40px rgba(0,0,0,.5); }
@media (max-width: 719px) {
  .esc { height: 420px; }
  .esc-hoja { left: 4%; width: 70%; top: 24px; }
  .esc-peticion { right: 4%; top: 16px; width: 58%; font-size: 13.5px; }
  .esc-estado { right: 4%; bottom: 16px; width: 62%; font-size: 12.5px; }
}
.esc.en-vista .esc-pag { animation: esc-pag var(--ciclo) infinite both; }
.esc.en-vista .esc-cap-a { animation: esc-cap-a var(--ciclo) infinite both; }
.esc.en-vista .esc-cap-b { animation: esc-cap-b var(--ciclo) infinite both; }
.esc.en-vista .esc-peticion { animation: esc-peticion var(--ciclo) infinite both; }
.esc.en-vista .esc-estado { animation: esc-estado var(--ciclo) infinite both; }
@keyframes esc-pag { 0% { opacity: 0; translate: 0 10px; } 5% { opacity: 1; translate: 0 0; } 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes esc-peticion { 0%, 2% { opacity: 0; translate: 0 8px; } 6% { opacity: 1; translate: 0 0; } 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes esc-cap-a { 0%, 14% { opacity: 0; translate: 46% -22%; scale: 1.18; box-shadow: 0 24px 50px rgba(15,15,15,.28); } 21% { opacity: 1; translate: 0 0; scale: 1; box-shadow: 0 1px 2px rgba(15,15,15,.12); } 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes esc-cap-b { 0%, 33% { opacity: 0; translate: 46% -30%; scale: 1.18; box-shadow: 0 24px 50px rgba(15,15,15,.28); } 40% { opacity: 1; translate: 0 0; scale: 1; box-shadow: 0 1px 2px rgba(15,15,15,.12); } 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes esc-estado { 0%, 52% { opacity: 0; translate: 0 8px; } 57% { opacity: 1; translate: 0 0; } 94% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* El canon con capturas reales: collage de tres pantallas y un dato marcado en cada una. */
.cn { --ciclo: 12s; padding: 28px 28px 0; }
.cn-canon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.cn-canon-t { font-size: 13px; color: var(--ink-2); margin-right: 6px; }
.cn-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 12.5px; color: var(--ink); transition: background .3s, box-shadow .3s; }
.cn-caps { position: relative; height: 480px; }
.cn-cap { position: absolute; margin: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,15,15,.08), 0 14px 40px rgba(15,15,15,.14); background: #fff; }
.cn-cap img { display: block; width: 100%; height: auto; }
.cn-a { left: 0; top: 24px; width: 57%; z-index: 1; }
.cn-b { right: 0; top: 0; width: 44%; z-index: 2; }
.cn-c { right: 4%; top: 246px; width: 44%; z-index: 3; }
.cn-marca { position: absolute; border-radius: 4px; box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px rgba(35,131,226,.18); background: rgba(35,131,226,.14); opacity: 0; }
.cn-marca[style*="--k:0"] { opacity: 1; }
.cn-chip[style*="--k:0"] { background: rgba(35,131,226,.14); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(35,131,226,.18); }
.cn.en-vista .cn-marca, .cn.en-vista .cn-chip { animation: cn-marca var(--ciclo) infinite both; animation-delay: calc(var(--k) * 3s); background: transparent; border-color: var(--line-strong); box-shadow: none; }
.cn.en-vista .cn-marca { box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px rgba(35,131,226,.18); opacity: 0; }
.cn.en-vista .cn-chip { animation-name: cn-chip; }
@keyframes cn-marca { 0% { opacity: 0; scale: 1.25; } 4% { opacity: 1; scale: 1; } 23% { opacity: 1; scale: 1; } 26%, 100% { opacity: 0; scale: 1; } }
@keyframes cn-chip { 0%, 1% { background: transparent; border-color: var(--line-strong); box-shadow: none; } 4% { background: rgba(35,131,226,.14); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(35,131,226,.18); } 23% { background: rgba(35,131,226,.14); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(35,131,226,.18); } 26%, 100% { background: transparent; border-color: var(--line-strong); box-shadow: none; } }
.dark .cn-cap { box-shadow: 0 14px 40px rgba(0,0,0,.5); }
@media (max-width: 719px) {
  .cn { padding: 16px 16px 0; }
  .cn-caps { height: auto; display: grid; gap: 12px; padding-bottom: 16px; }
  .cn-cap { position: static; width: 100%; }
}