/* La página de Cotejo: el mismo cielo y el mismo vidrio que la app (app/renderer/estilos.css y cielo.js), sin nada que
   se cargue de fuera (ni letras, ni imágenes de otro sitio, ni contadores de visitas). De día o de noche según el aparato,
   o lo que se elija al pie («Apariencia»): tema.js pone data-tema en <html> antes de pintar. Las animaciones
   (pagina.js) cuentan lo que hace Cotejo con datos inventados; con «reducir movimiento» se quedan quietas. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; background: var(--fondo); }
body { margin: 0; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; color: var(--ink); overflow-x: hidden; }
img, svg { max-width: 100%; }
img { height: auto; }

/* Los colores: de día (claro) y de noche (oscuro). Los de la noche van dos veces: con data-tema="noche" y, sin
   JavaScript, con el ajuste del aparato. */
:root {
  color-scheme: light;
  --ink: #0A0B0E; --ink2: rgba(10,11,14,.84); --ink3: rgba(10,11,14,.72);
  --g1: rgba(255,255,255,.6); --g2: rgba(255,255,255,.36); --rim: rgba(255,255,255,.92); --rim2: rgba(255,255,255,.28);
  --solido: #EAF2FD; --hair: rgba(10,11,14,.1); --chip: rgba(255,255,255,.56); --sh: 0 12px 40px rgba(20,40,80,.16);
  --acento: #3563F0; --acento-texto: #183FB5; --acento-suave: rgba(53,99,240,.14); --acento-vidrio: linear-gradient(150deg, rgba(53,99,240,.96), rgba(41,77,187,.92));
  --ok: #0A5C33; --okbg: rgba(255,255,255,.78); --warn: #6E3C00; --warnbg: rgba(255,214,160,.85); --rojo: #A8201A; --rojobg: rgba(255,120,110,.2);
  --aviso: #6E3C00; --avisobg: rgba(255,232,200,.94); --fuerte: rgba(255,255,255,.82); --pastilla: rgba(255,255,255,.72); --acento-chip: rgba(226,234,255,.96);
  --fondo: #6FAAEB;
  --cielo: linear-gradient(180deg, #3F86E0 0%, #6FAAEB 34%, #A9D0F6 70%, #DCEEFF 100%);
  --luz: radial-gradient(circle at 12% 6%, rgba(255,254,244,.95) 0, rgba(255,248,214,.6) 9%, rgba(255,236,190,.18) 22%, rgba(255,230,180,0) 40%);
  --vg1: rgba(255,255,255,.66); --vg2: rgba(255,255,255,.42); --vcielo: linear-gradient(180deg, #4D8FE4 0%, #79B1EE 45%, #B4D6F7 100%);
  --papel: #FFFFFF; --papel-ink: #0A0B0E; --papel-ink2: rgba(10,11,14,.68); --papel-hair: rgba(10,11,14,.1);
}
:root[data-tema="noche"] {
  color-scheme: dark;
  --ink: #FFFFFF; --ink2: rgba(255,255,255,.8); --ink3: rgba(255,255,255,.64);
  --g1: rgba(16,18,30,.58); --g2: rgba(16,18,30,.38); --rim: rgba(255,255,255,.4); --rim2: rgba(255,255,255,.08);
  --solido: #121729; --hair: rgba(255,255,255,.16); --chip: rgba(255,255,255,.11); --sh: 0 14px 48px rgba(0,0,0,.45);
  --acento-texto: #A9C1FF; --acento-suave: rgba(120,150,255,.18);
  --ok: #7CF0B4; --okbg: rgba(124,240,180,.15); --warn: #FFD08A; --warnbg: rgba(255,170,60,.22); --rojo: #FFB4AB; --rojobg: rgba(255,120,110,.18);
  --aviso: #FFD08A; --avisobg: rgba(74,52,18,.92); --fuerte: rgba(28,32,50,.9); --pastilla: rgba(255,255,255,.12); --acento-chip: rgba(120,150,255,.2);
  --fondo: #050B1E;
  --cielo: linear-gradient(180deg, #01030A 0%, #050B1E 34%, #0B1736 70%, #1A2754 100%);
  --vg1: rgba(16,18,30,.66); --vg2: rgba(16,18,30,.48); --vcielo: linear-gradient(180deg, #030716 0%, #0A1430 55%, #18254F 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    color-scheme: dark;
    --ink: #FFFFFF; --ink2: rgba(255,255,255,.8); --ink3: rgba(255,255,255,.64);
    --g1: rgba(16,18,30,.58); --g2: rgba(16,18,30,.38); --rim: rgba(255,255,255,.4); --rim2: rgba(255,255,255,.08);
    --solido: #121729; --hair: rgba(255,255,255,.16); --chip: rgba(255,255,255,.11); --sh: 0 14px 48px rgba(0,0,0,.45);
    --acento-texto: #A9C1FF; --acento-suave: rgba(120,150,255,.18);
    --ok: #7CF0B4; --okbg: rgba(124,240,180,.15); --warn: #FFD08A; --warnbg: rgba(255,170,60,.22); --rojo: #FFB4AB; --rojobg: rgba(255,120,110,.18);
    --aviso: #FFD08A; --avisobg: rgba(74,52,18,.92); --fuerte: rgba(28,32,50,.9); --pastilla: rgba(255,255,255,.12); --acento-chip: rgba(120,150,255,.2);
    --fondo: #050B1E;
    --cielo: linear-gradient(180deg, #01030A 0%, #050B1E 34%, #0B1736 70%, #1A2754 100%);
    --vg1: rgba(16,18,30,.66); --vg2: rgba(16,18,30,.48); --vcielo: linear-gradient(180deg, #030716 0%, #0A1430 55%, #18254F 100%);
  }
}

/* El cielo: el de día y el de noche, uno encima del otro, para pasar de uno a otro sin brinco. El sol, las nubes y las
   estrellas los pone pagina.js (como cielo.js en la app). */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; }
body::before { background: radial-gradient(circle at 12% 6%, rgba(255,254,244,.95) 0, rgba(255,248,214,.6) 9%, rgba(255,236,190,.18) 22%, rgba(255,230,180,0) 40%), linear-gradient(180deg, #3F86E0 0%, #6FAAEB 34%, #A9D0F6 70%, #DCEEFF 100%); }
body::after { background: radial-gradient(closest-side at 30% 8%, rgba(120,110,220,.22), rgba(120,110,220,0)), radial-gradient(closest-side at 86% 30%, rgba(60,140,220,.16), rgba(60,140,220,0)), linear-gradient(180deg, #01030A 0%, #050B1E 34%, #0B1736 70%, #1A2754 100%); opacity: 0; transition: opacity 1.2s ease; }
:root[data-tema="noche"] body::after { opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-tema]) body::after { opacity: 1; } }
.cielo { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.cielo > .capa { position: absolute; inset: 0; transition: opacity 1.2s ease; }
.cielo .capa > * { position: absolute; }
.cielo .de-noche { opacity: 0; }
:root[data-tema="noche"] .cielo .de-noche { opacity: 1; }
:root[data-tema="noche"] .cielo .de-dia { opacity: 0; }
.cielo .sol { top: -6%; left: 2%; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255,254,244,1) 0%, rgba(255,248,214,.85) 13%, rgba(255,236,190,.32) 32%, rgba(255,230,180,0) 66%); }
.cielo .nube { filter: blur(10px); animation: deriva 220s ease-in-out infinite alternate; will-change: transform; }
.cielo .estrellas { inset: 0; filter: blur(1.1px); }
.cielo .estrella { position: absolute; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 10px 2px rgba(200,215,255,.55); animation: titila 3s ease-in-out infinite; }
.cielo .neb { border-radius: 50%; filter: blur(70px); }
.cielo .fugaz { top: 13%; left: 74%; width: 170px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9)); filter: blur(.8px); opacity: 0; transform: rotate(-26deg); animation: fugaz 14s ease-in 5s infinite; }
@keyframes deriva { from { transform: translateX(-8vw); } to { transform: translateX(12vw); } }
@keyframes titila { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes fugaz { 0% { opacity: 0; transform: translate(0,0) rotate(-26deg); } 2% { opacity: 1; } 9% { opacity: 0; transform: translate(-480px,234px) rotate(-26deg); } 100% { opacity: 0; transform: translate(-480px,234px) rotate(-26deg); } }
:root:not([data-tema="noche"]) .cielo .fugaz { animation: none; }

a { color: var(--acento-texto); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 8px; }
:root[data-tema="noche"] :focus-visible { outline-color: #FFFFFF; }
::selection { background: rgba(53,99,240,.28); }

/* El vidrio: igual que en la app, con su orilla de luz */
.glass { position: relative; background: linear-gradient(150deg, var(--g1), var(--g2)); -webkit-backdrop-filter: blur(28px) saturate(185%); backdrop-filter: blur(28px) saturate(185%); box-shadow: inset 0 1px 1px var(--rim), inset 0 -1px 1px var(--rim2), var(--sh); }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; background: linear-gradient(140deg, var(--rim) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,0) 58%, var(--rim2) 80%, var(--rim) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

.saltar { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 12px; background: var(--acento); color: #FFFFFF; font-weight: 650; text-decoration: none; }
.saltar:focus { top: 12px; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* La barra de arriba */
.barra { position: sticky; top: 12px; z-index: 20; margin: 12px auto 0; width: min(1180px, calc(100% - 24px)); border-radius: 20px; display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 16px; }
.marca { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.marca .frente { fill: var(--acento); }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { color: var(--ink2); text-decoration: none; font-size: 14.5px; font-weight: 560; padding: 8px 11px; border-radius: 11px; transition: background .2s, color .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: var(--chip); }
.barra .botones { display: flex; align-items: center; gap: 8px; }
.barra .boton { min-height: 38px; padding: 0 15px; font-size: 14.5px; }
.boton-menu { display: none; width: 40px; height: 40px; border: none; border-radius: 12px; background: var(--chip); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.menu-movil { position: fixed; inset: 72px 12px auto auto; width: min(320px, calc(100vw - 24px)); margin: 0; padding: 10px; border: none; border-radius: 22px; color: var(--ink); background: linear-gradient(150deg, var(--g1), var(--g2)); -webkit-backdrop-filter: blur(28px) saturate(185%); backdrop-filter: blur(28px) saturate(185%); box-shadow: inset 0 1px 1px var(--rim), var(--sh); }
.menu-movil:popover-open { display: flex; flex-direction: column; gap: 2px; }
.menu-movil a { color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 600; padding: 12px 14px; border-radius: 14px; }
.menu-movil a:hover, .menu-movil a[aria-current="page"] { background: var(--chip); }
.menu-movil .separa { height: 1px; margin: 6px 8px; background: var(--hair); }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: none; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 650; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .45s cubic-bezier(.34,1.56,.64,1), filter .2s, box-shadow .2s; }
.boton:hover { filter: brightness(1.06); transform: translateY(-1px); }
.boton:active { transform: scale(.96); }
.boton.principal { color: #FFFFFF; background: var(--acento-vidrio); box-shadow: inset 0 1px 1px rgba(255,255,255,.45), 0 10px 28px rgba(41,77,187,.35); }
.boton.vidrio { position: relative; color: var(--ink); background: linear-gradient(150deg, var(--g1), var(--g2)); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 1px 1px var(--rim), inset 0 -1px 1px var(--rim2), var(--sh); }
.boton.chico { min-height: 36px; padding: 0 14px; font-size: 14px; }
.boton[aria-disabled="true"], .boton:disabled { opacity: .5; cursor: not-allowed; filter: none; transform: none; }
.enlace { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 999px; font-weight: 650; text-decoration: none; color: var(--acento-texto); background: var(--pastilla); box-shadow: inset 0 1px 1px var(--rim); }
.enlace:hover { text-decoration: underline; }
.enlace::after { content: "→"; transition: transform .3s; }
.enlace:hover::after { transform: translateX(3px); }

/* Marcas de borrador y de maqueta: sólo salen mientras <html> lleve data-borrador (se quita al publicar,
   web/COMO_PUBLICAR.md). La maqueta de «Mi cuenta» (data-maqueta) no se publica hasta conectarla (parte B). */
.por-confirmar { display: none; }
[data-borrador] .por-confirmar { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; color: var(--aviso); background: var(--avisobg); white-space: nowrap; }
.aviso-borrador { display: none; }
[data-borrador] .aviso-borrador { display: block; width: min(1180px, calc(100% - 24px)); margin: 10px auto 0; padding: 10px 16px; border-radius: 14px; font-size: 14px; color: var(--aviso); background: var(--avisobg); }

/* Secciones y cabezas */
main { display: block; }
.seccion { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 88px 0 8px; }
.seccion.angosta { width: min(880px, calc(100% - 32px)); }
.cabeza { max-width: 720px; margin: 0 0 32px; }
.cabeza.centro { margin-inline: auto; text-align: center; }
.eyebrow { display: inline-block; margin: 0 0 10px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--acento-texto); background: var(--pastilla); }
h1, h2 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; font-weight: 700; }
h1 { margin: 0; font-size: clamp(40px, 6.6vw, 80px); line-height: 1.02; letter-spacing: -0.05em; }
h2 { margin: 0; font-size: clamp(30px, 4.2vw, 48px); line-height: 1.06; letter-spacing: -0.04em; }
h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.25; letter-spacing: -0.015em; }
.cabeza p:not(.eyebrow) { margin: 14px 0 0; font-size: 18px; color: var(--ink2); }
.texto-grande { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.5; color: var(--ink2); }
.tarjeta { border-radius: 24px; padding: 24px; }
.tarjeta p { margin: 0; color: var(--ink2); font-size: 16px; }
.tarjeta p + p { margin-top: 10px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.rejilla.dos { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.rejilla.tres { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.icono { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 14px; background: var(--chip); color: var(--acento-texto); }
.icono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lista-check { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.lista-check li { position: relative; padding-left: 28px; color: var(--ink2); }
.lista-check li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 16px; height: 16px; border-radius: 50%; background: var(--acento-suave); }
.lista-check li::after { content: ""; position: absolute; left: 7px; top: calc(.38em + 4px); width: 4px; height: 7px; border: solid var(--acento-texto); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.nota { margin: 18px 0 0; font-size: 14.5px; color: var(--ink2); max-width: 780px; }
.nota a:not(.enlace) { color: inherit; font-weight: 650; }

/* Aparecer al bajar: sólo con JavaScript (html.js), para que sin él todo se vea */
.js .revela { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.js .revela.visto { opacity: 1; transform: none; }
.js .revela.d1 { transition-delay: .08s; } .js .revela.d2 { transition-delay: .16s; } .js .revela.d3 { transition-delay: .24s; } .js .revela.d4 { transition-delay: .32s; }

/* Portada */
.portada { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 84px 0 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.portada h1 { max-width: 15ch; }
.portada .entrada { margin: 0; max-width: 48ch; font-size: clamp(18px, 2.3vw, 22px); line-height: 1.45; color: var(--ink2); }
.pastilla { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.pastilla svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.portada .pie-portada { margin: 0; font-size: 14px; color: var(--ink2); }
.escenario { width: 100%; margin-top: 30px; perspective: 1800px; }
.escenario .demo { transform-origin: 50% 0; }
.js .escenario .demo { animation: asoma 1.4s cubic-bezier(.16,1,.3,1) .25s backwards; }
@keyframes asoma { from { opacity: 0; transform: translateY(60px) rotateX(14deg) scale(.96); } to { opacity: 1; transform: none; } }
.portada-pagina { padding-top: 76px; padding-bottom: 8px; }
.portada-pagina h1 { font-size: clamp(38px, 5.8vw, 68px); max-width: 18ch; }

/* Promesas, debajo de la portada */
.promesas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.promesa { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 22px; }
.promesa .icono { flex: none; margin: 0; }
.promesa strong { display: block; font-size: 16px; margin-bottom: 2px; }
.promesa span { font-size: 14.5px; color: var(--ink2); }

/* Bloques de «lo que hace»: texto a un lado y su animación al otro */
.bloque { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 40px 0; }
.bloque.al-reves { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.bloque.al-reves .bloque-texto { order: 2; }
.bloque-texto h3 { font-size: clamp(24px, 2.8vw, 32px); letter-spacing: -0.03em; margin-bottom: 12px; }
.bloque-texto h2 { margin-bottom: 16px; }
.tarjeta .eyebrow, .plan .eyebrow, .panel-cuenta .eyebrow { padding: 0; background: none; }
.bloque-texto p { margin: 0 0 14px; font-size: 17px; color: var(--ink2); }
.bloque-texto .lista-check { margin-top: 18px; }

/* Las animaciones: la escena es decorativa (aria-hidden) y lleva su descripción para el lector de pantalla y su
   botón para pausarla (WCAG 2.2.2). */
.demo { position: relative; margin: 0; }
.demo-escena { position: relative; transition: opacity .45s ease; }
.demo.reiniciando .demo-escena { opacity: 0; }
.demo.sin-transicion .demo-escena, .demo.sin-transicion .demo-escena * { transition: none !important; animation: none !important; }
.js .demo { padding-bottom: 46px; }
.demo-pausa { position: absolute; right: 6px; bottom: 0; z-index: 3; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px; border: none; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 650; color: var(--ink); background: var(--fuerte); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 1px var(--rim), 0 6px 18px rgba(20,40,80,.18); cursor: pointer; }
.demo-pausa:hover { filter: brightness(1.04); }
.demo-pausa svg { width: 12px; height: 12px; fill: currentColor; }

/* La réplica de la app: ventana, barra, lateral, centro y chat */
.ventana { position: relative; overflow: hidden; border-radius: 26px; text-align: left; font-size: 13px; line-height: 1.4; color: var(--ink); background: var(--vcielo); box-shadow: 0 40px 100px rgba(10,30,80,.28), inset 0 0 0 1px rgba(255,255,255,.45); }
:root[data-tema="noche"] .ventana { box-shadow: 0 40px 110px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12); }
.ventana::before { content: ""; position: absolute; top: -40px; left: 4%; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,254,244,.95) 0%, rgba(255,248,214,.6) 18%, rgba(255,236,190,0) 62%); pointer-events: none; }
:root[data-tema="noche"] .ventana::before { background: radial-gradient(closest-side, rgba(120,110,220,.25), rgba(120,110,220,0)); }
.v-barra { position: relative; height: 42px; display: flex; align-items: center; gap: 14px; padding: 0 16px; }
.v-luces { display: flex; gap: 7px; }
.v-luces i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.v-luces i:nth-child(2) { background: #FEBC2E; }
.v-luces i:nth-child(3) { background: #28C840; }
.v-marca { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; }
.v-marca svg { width: 17px; height: 17px; }
.v-pill { margin-left: auto; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 650; background: var(--chip); }
.v-cuerpo { position: relative; display: grid; grid-template-columns: 196px minmax(0, 1fr) 264px; gap: 12px; padding: 2px 14px 14px; }
.v-panel { border-radius: 20px; background: linear-gradient(150deg, var(--vg1), var(--vg2)); box-shadow: inset 0 1px 1px var(--rim), 0 8px 26px rgba(20,40,80,.12); }
.v-lateral { padding: 14px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.v-etiqueta { padding: 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.v-item { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 13px; font-size: 12.5px; }
.v-item.activo { background: var(--chip); }
.v-item small { display: block; font-size: 11.5px; color: var(--ink2); }
.v-ava { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #FFFFFF; background: var(--acento); }
.v-centro { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v-titulo { padding: 4px 4px 0; }
.v-titulo small { display: block; font-size: 12px; font-weight: 600; color: var(--ink); }
.v-titulo strong { font-size: 22px; letter-spacing: -0.03em; }
.v-fila2 { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.v-avance { padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.v-avance .v-etiqueta { align-self: flex-start; padding: 0; }
.anillo { position: relative; width: 86px; height: 86px; }
.anillo svg { width: 86px; height: 86px; transform: rotate(-90deg); }
.anillo .pista { fill: none; stroke: var(--hair); stroke-width: 9; }
.anillo .arco { fill: none; stroke: var(--acento); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1); }
.anillo .cifra { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.anillo .cifra small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--ink2); }
.v-ahora { padding: 13px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v-ahora strong { font-size: 13.5px; }
.v-ahora .linea { font-size: 12px; color: var(--ink2); min-height: 34px; }
.barrita { height: 6px; border-radius: 99px; background: var(--hair); overflow: hidden; }
.barrita i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--acento); transition: width 1.6s cubic-bezier(.16,1,.3,1); }
.v-rubros { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.v-rubro { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 12px; overflow: hidden; font-size: 12.5px; font-weight: 600; background: var(--chip); }
.v-rubro > i { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255,170,60,.55); transition: width 1.4s cubic-bezier(.16,1,.3,1); }
:root[data-tema="noche"] .v-rubro > i { background: rgba(255,170,60,.38); }
.v-rubro span { position: relative; }
.v-papeles { display: flex; flex-direction: column; gap: 2px; }
.v-papel { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 6px 8px 10px; border-top: 1px solid var(--hair); font-size: 12.5px; }
.v-papel:first-child { border-top: none; }
.v-papel b { font-weight: 600; }
.v-papel .der { display: flex; align-items: center; gap: 8px; }
.v-boton { padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: #FFFFFF; background: var(--acento-vidrio); transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.v-boton.picado { transform: scale(.88); }
.v-boton.fuera { opacity: 0; transform: scale(.6); }
.chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650; white-space: nowrap; color: var(--ink2); background: var(--chip); transition: background .5s, color .5s; }
.chip.en_fila, .chip.elaborando, .chip.calificando { color: var(--acento-texto); background: var(--acento-chip); }
.chip.listo { color: var(--ok); background: var(--okbg); }
.chip.espera { color: var(--warn); background: var(--warnbg); }
.chip.otra { color: var(--warn); background: var(--warnbg); }
.chip.cambio { animation: brinca .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes brinca { 0% { transform: scale(.7); } 60% { transform: scale(1.08); } 100% { transform: none; } }
.v-chat { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.v-chat-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px 11px; border-bottom: 1px solid var(--hair); }
.v-chat-cabeza strong { font-size: 14px; }
.v-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink2); }
.v-estado i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.v-estado.trabajando i { background: var(--acento); animation: pulso 2s ease-out infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(53,99,240,.6); } 70% { box-shadow: 0 0 0 8px rgba(53,99,240,0); } 100% { box-shadow: 0 0 0 0 rgba(53,99,240,0); } }
.v-mensajes { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 13px; min-height: 0; overflow: hidden; }
.burbuja { max-width: 88%; padding: 9px 12px; border-radius: 17px; font-size: 12.5px; line-height: 1.45; animation: entra .55s cubic-bezier(.16,1,.3,1) backwards; }
.burbuja.suya { align-self: flex-start; background: var(--chip); border-bottom-left-radius: 6px; }
.burbuja.tuya { align-self: flex-end; color: #FFFFFF; background: var(--acento-vidrio); border-bottom-right-radius: 6px; }
.burbuja b { font-weight: 650; }
@keyframes entra { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.escribiendo { display: inline-flex; gap: 4px; padding: 11px 13px; }
.escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink3); animation: punto 1.2s ease-in-out infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; } .escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.v-redactar { display: flex; align-items: center; gap: 8px; margin: 0 11px 11px; padding: 8px 8px 8px 13px; border-radius: 999px; font-size: 12px; color: var(--ink2); background: var(--chip); }
.v-redactar i { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--acento-vidrio); }
.v-visor { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.demo-visor .v-cuerpo { height: 528px; }
.demo-visor .v-rubros { overflow: hidden; }

/* Las marcas en el papel */
.hoja { border-radius: 20px; overflow: hidden; color: var(--papel-ink); background: var(--papel); box-shadow: 0 30px 80px rgba(10,30,80,.22), inset 0 0 0 1px rgba(10,11,14,.06); }
.hoja-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--papel-hair); }
.hoja-cabeza strong { font-size: 15px; }
.hoja-cabeza small { display: block; color: var(--papel-ink2); font-size: 12px; }
.hoja-cabeza .agente { flex: none; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #1D4ED8; background: rgba(53,99,240,.12); }
.hoja table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.hoja td { padding: 10px 20px; border-bottom: 1px solid var(--papel-hair); }
.hoja td:nth-child(2) { text-align: right; white-space: nowrap; }
.hoja td.marca-celda { width: 44px; padding: 0 12px 0 0; text-align: center; }
.hoja tr.total td { font-weight: 700; }
.hoja tr.dif td { font-weight: 700; color: #0E6A3A; }
.hoja tr.activa td { background: rgba(53,99,240,.07); transition: background .4s; }
.marca-auditoria { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; color: #FFFFFF; background: #C0392B; opacity: 0; transform: scale(.3) rotate(-30deg); transition: opacity .35s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.marca-auditoria.puesta { opacity: 1; transform: none; }
.marca-auditoria.verde { background: #0E7A44; }
.marca-auditoria.azul { background: #1D4ED8; }
.fuente { display: flex; align-items: center; gap: 8px; margin: 12px 20px 14px; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; color: #1D4ED8; background: rgba(53,99,240,.09); min-height: 38px; }
.fuente svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fuente span { transition: opacity .3s; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 20px 16px; font-size: 12px; color: var(--papel-ink2); }
.leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda .marca-auditoria { width: 20px; height: 20px; font-size: 11px; opacity: 1; transform: none; }

/* El agente juez */
.juez { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; border-radius: 24px; }
.juez-col { padding: 14px; border-radius: 18px; background: linear-gradient(150deg, var(--vg1), var(--vg2)); box-shadow: inset 0 1px 1px var(--rim); }
.juez-col h4 { margin: 0 0 4px; font-size: 13px; }
.juez-col small { display: block; margin-bottom: 8px; font-size: 11.5px; color: var(--ink2); }
.juez-renglon { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.juez-renglon b { font-weight: 650; }
.juez-renglon .estado { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #FFFFFF; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .45s cubic-bezier(.34,1.56,.64,1); }
.juez-renglon .estado.si { opacity: 1; transform: none; background: #0E7A44; }
.juez-renglon .estado.no { opacity: 1; transform: none; background: #C0392B; }
.dictamen { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; font-size: 13px; background: var(--chip); transition: background .5s; }
.dictamen strong { display: block; font-size: 14px; }
.dictamen span { color: var(--ink2); }
.dictamen.pasa { background: var(--okbg); }
.dictamen.regresa { background: var(--warnbg); }
.dictamen .sello { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #FFFFFF; font-weight: 800; background: #565D6C; transition: background .4s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.dictamen.pasa .sello { background: #0E7A44; transform: rotate(-8deg) scale(1.06); }
.dictamen.regresa .sello { background: #B85C00; }

/* El asistente y sus tarjetas de pregunta */
.chat-demo { border-radius: 26px; display: flex; flex-direction: column; overflow: hidden; min-height: 470px; }
.chat-demo .v-mensajes { padding: 18px; gap: 11px; }
.chat-demo .burbuja { font-size: 14px; max-width: 86%; }
.pregunta { align-self: stretch; padding: 14px; border-radius: 18px; background: var(--fuerte); animation: entra .55s cubic-bezier(.16,1,.3,1) backwards; }
.pregunta strong { display: block; font-size: 14px; margin-bottom: 4px; }
.pregunta p { margin: 0 0 6px; font-size: 13px; color: var(--ink2); }
.pregunta .liga-fuente { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; color: var(--acento-texto); }
.pregunta .botones-pregunta { display: flex; gap: 8px; margin-top: 10px; }
.pregunta .bp { padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: var(--chip); box-shadow: inset 0 0 0 1px var(--hair); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.pregunta .bp.recomendado { color: #FFFFFF; background: var(--acento-vidrio); }
.pregunta .bp.picado { transform: scale(.94); box-shadow: 0 0 0 3px var(--acento-suave); }
.anotado { align-self: center; font-size: 12.5px; color: var(--ok); font-weight: 650; animation: entra .5s cubic-bezier(.16,1,.3,1) backwards; }

/* El candado: dónde vive cada cosa (SVG que se mueve solo) */
.candado-demo { border-radius: 28px; padding: 18px; }
.candado-demo svg { display: block; width: 100%; height: auto; }
.candado-demo .caja { fill: var(--vg1); stroke: var(--hair); stroke-width: 1.5; }
.candado-demo .caja-fuerte { fill: var(--vg1); stroke: var(--acento); stroke-width: 2; }
.candado-demo .t { fill: var(--ink); font: 650 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
.candado-demo .t2 { fill: var(--ink2); font: 500 12.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
.candado-alto .t { font-size: 18px; }
.candado-alto .t2 { font-size: 14.5px; }
.candado-demo .camino { fill: none; stroke: var(--hair); stroke-width: 2; stroke-dasharray: 5 7; }
.candado-demo .datos { fill: #3563F0; }
.candado-demo .receta { fill: #0E7A44; }
.candado-demo .licencia { fill: #8A8F9C; }
.candado-demo .rebota { fill: #C0392B; }
.candado-demo .icono-svg { fill: none; stroke: var(--acento-texto); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.candado-demo .chapa { fill: none; stroke: #C0392B; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* De día y de noche */
.noche-demo { position: relative; overflow: hidden; border-radius: 26px; min-height: 420px; color: #0A0B0E; }
.noche-demo .fases { position: absolute; inset: 0; }
.noche-demo .fase { position: absolute; inset: 0; opacity: 0; transition: opacity 2.2s ease; }
.noche-demo .fase.ve { opacity: 1; }
.noche-demo .f-amanecer { background: linear-gradient(180deg, #1B2B5E 0%, #7A6C9E 34%, #E7A48F 70%, #F6C892 100%); }
.noche-demo .f-dia { background: linear-gradient(180deg, #3F86E0 0%, #6FAAEB 34%, #A9D0F6 70%, #DCEEFF 100%); }
.noche-demo .f-atardecer { background: linear-gradient(180deg, #141A46 0%, #4A3470 34%, #B4597A 70%, #F2995C 100%); }
.noche-demo .f-noche { background: linear-gradient(180deg, #01030A 0%, #050B1E 34%, #0B1736 70%, #1A2754 100%); }
.noche-demo .astro { position: absolute; left: 0; top: 0; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(255,250,230,1) 0%, rgba(255,232,180,.75) 16%, rgba(255,214,160,.25) 38%, rgba(255,210,150,0) 68%); transform: translate(var(--x, 8%), var(--y, 70%)); transition: transform 3s cubic-bezier(.45,0,.2,1), opacity 2s; }
.noche-demo .astro.oculto { opacity: 0; }
.noche-demo .estrellas-demo { position: absolute; inset: 0; opacity: 0; transition: opacity 2.4s ease; }
.noche-demo .estrellas-demo.ve { opacity: 1; }
.noche-demo .estrellas-demo i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 6px 1px rgba(200,215,255,.6); }
.noche-demo .capa-noche { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 22px; }
.noche-demo .panel { padding: 16px; border-radius: 20px; background: rgba(255,255,255,.72); box-shadow: inset 0 1px 1px rgba(255,255,255,.9), 0 10px 30px rgba(20,40,80,.16); transition: background 1.6s ease, color 1.6s ease; }
.noche-demo.oscura { color: #FFFFFF; }
.noche-demo.oscura .panel { background: rgba(10,12,24,.66); box-shadow: inset 0 1px 1px rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.3); }
.noche-demo .reloj { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.noche-demo .reloj small { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0; opacity: .8; }
.noche-demo .casilla { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; font-weight: 600; }
.noche-demo .casilla i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #3563F0; }
.noche-demo .casilla i::after { content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.noche-demo .fila-demo { display: flex; flex-direction: column; gap: 2px; }
.noche-demo .fila-demo .v-papel { border-color: currentColor; border-top-color: rgba(127,127,127,.25); }
.noche-demo .chip { color: inherit; background: rgba(127,127,127,.18); }
.noche-demo .chip.elaborando { color: #1D4ED8; background: rgba(53,99,240,.16); }
.noche-demo.oscura .chip.elaborando { color: #A9C1FF; background: rgba(120,150,255,.2); }
.noche-demo .chip.listo { color: #0E6A3A; background: rgba(255,255,255,.8); }
.noche-demo.oscura .chip.listo { color: #7CF0B4; background: rgba(124,240,180,.16); }
.noche-demo .mensaje-manana { grid-column: 1 / -1; padding: 13px 16px; border-radius: 18px; font-size: 14px; opacity: 0; transform: translateY(10px); transition: opacity .8s, transform .8s cubic-bezier(.16,1,.3,1); }
.noche-demo .mensaje-manana.ve { opacity: 1; transform: none; }

/* En equipo */
.equipo-demo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; border-radius: 26px; }
.compu { padding: 14px; border-radius: 18px; background: linear-gradient(150deg, var(--vg1), var(--vg2)); box-shadow: inset 0 1px 1px var(--rim); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.compu-cabeza { display: flex; align-items: center; gap: 9px; }
.compu-cabeza strong { display: block; font-size: 13.5px; }
.compu-cabeza small { display: block; font-size: 11.5px; color: var(--ink2); }
.compu .v-papel { padding: 7px 0; font-size: 12px; flex-wrap: wrap; }
.compu .v-papel:first-of-type { border-top: 1px solid var(--hair); }
.compu .nota-equipo { font-size: 11.5px; color: var(--ink2); min-height: 32px; }
.reparto { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; font-size: 13px; background: var(--chip); }
.reparto strong { font-size: 13.5px; }

/* Cómo funciona: los cinco pasos */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: paso; position: relative; }
.pasos li { counter-increment: paso; padding: 22px; border-radius: 22px; }
.pasos h3::before { content: counter(paso); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; font-weight: 700; font-size: 15px; color: #FFFFFF; background: var(--acento); box-shadow: 0 6px 16px rgba(53,99,240,.35); }
.pasos h3 { font-size: 17px; }
.pasos p { margin: 0; font-size: 15px; color: var(--ink2); }
.pasos.vivo li { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s; }
.pasos.vivo li.encendido { transform: translateY(-6px); box-shadow: inset 0 1px 1px var(--rim), 0 0 0 2px var(--acento), var(--sh); }
.paso-largo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 48px 0; border-top: 1px solid var(--hair); }
.paso-largo:first-of-type { border-top: none; }
.paso-largo .numero { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 50%; font-weight: 700; color: #FFFFFF; background: var(--acento); }
.paso-largo h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 14px; }
.paso-largo > :not(.demo) p { margin: 0 0 12px; font-size: 17px; color: var(--ink2); }

/* Las carpetas y su copia de sólo lectura */
.carpetas-demo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; border-radius: 26px; }
.carpeta { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: linear-gradient(150deg, var(--vg1), var(--vg2)); box-shadow: inset 0 1px 1px var(--rim); font-size: 13px; }
.carpeta svg { flex: none; width: 36px; height: 30px; }
.carpeta strong { display: block; font-size: 13.5px; }
.carpeta small { display: block; color: var(--ink2); font-size: 12px; }
.carpeta .copia { margin-left: auto; flex: none; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; color: var(--ok); background: var(--okbg); opacity: 0; transform: scale(.6); transition: opacity .4s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.carpeta .copia.puesta { opacity: 1; transform: none; }

/* Para quién */
.audiencias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.audiencia { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 26px; }
.audiencia h3 { font-size: 22px; letter-spacing: -0.02em; }
.audiencia .precio-chico { font-size: 15px; font-weight: 650; color: var(--ink); }
.audiencia .lista-check { margin: 4px 0 6px; }
.audiencia .boton { align-self: flex-start; margin-top: auto; }

/* Precios */
.selector { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--chip); }
.selector button { min-height: 38px; padding: 0 16px; border: none; border-radius: 999px; font: inherit; font-size: 14.5px; font-weight: 650; color: var(--ink2); background: none; cursor: pointer; }
.selector button[aria-pressed="true"] { color: #0A0B0E; background: #FFFFFF; box-shadow: 0 2px 10px rgba(20,40,80,.16); }
.selector .ahorro { margin-left: 6px; font-size: 12px; color: var(--ok); }
.selector button[aria-pressed="true"] .ahorro { color: #0E6A3A; }
.planes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.plan { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; border-radius: 24px; }
.plan .nombre { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.plan .para { margin: 0; min-height: 44px; font-size: 14px; color: var(--ink2); }
.plan .monto { margin: 0; font-size: 38px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan .monto small { display: block; margin-top: 7px; font-size: 14px; font-weight: 550; letter-spacing: 0; color: var(--ink2); }
.plan .con-iva { margin: 0; font-size: 13.5px; color: var(--ink2); min-height: 40px; }
.plan .lista-check { font-size: 14.5px; margin-top: 4px; }
.plan .lista-check li { padding-left: 26px; }
.plan .boton { margin-top: auto; }
.plan.destacado { box-shadow: inset 0 0 0 2px var(--acento), var(--sh); }
.plan .cinta { align-self: flex-start; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: var(--acento-texto); background: var(--acento-chip); }
.tabla-planes { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla-envoltura { overflow-x: auto; border-radius: 24px; padding: 8px 18px; }
.tabla-planes th, .tabla-planes td { padding: 13px 10px; text-align: center; border-bottom: 1px solid var(--hair); }
.tabla-planes th:first-child, .tabla-planes td:first-child { text-align: left; }
.tabla-planes thead th { font-size: 14px; color: var(--ink2); font-weight: 650; }
.tabla-planes tbody th { font-weight: 550; color: var(--ink); }
.tabla-planes tr:last-child td, .tabla-planes tr:last-child th { border-bottom: none; }
.tabla-planes .si::before { content: "✓"; font-weight: 800; color: var(--acento-texto); }
.tabla-planes .no { color: var(--ink3); }
.promos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.promos li { border-radius: 18px; padding: 16px 18px; font-size: 15px; color: var(--ink2); }
.promos b { color: var(--ink); }
.dato-precio { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

/* Preguntas frecuentes */
.preguntas { display: grid; gap: 10px; max-width: 900px; }
.preguntas details { border-radius: 18px; padding: 0 22px; }
.preguntas summary { cursor: pointer; list-style: none; padding: 18px 30px 18px 0; font-weight: 650; font-size: 16.5px; position: relative; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: 2px; top: 14px; font-size: 24px; font-weight: 400; color: var(--ink3); transition: transform .3s; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { margin: 0 0 16px; color: var(--ink2); font-size: 16px; }
.preguntas details p:first-of-type { animation: entra .45s cubic-bezier(.16,1,.3,1); }
.grupo-preguntas { margin-top: 44px; }
.grupo-preguntas h2 { font-size: 26px; letter-spacing: -0.02em; margin-bottom: 14px; }
.indice-preguntas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.indice-preguntas a { display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; background: var(--chip); }

/* Descargas */
.descargas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.descarga { display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 28px; }
.descarga .sistema { display: flex; align-items: center; gap: 14px; }
.descarga .sistema svg { width: 44px; height: 44px; }
.descarga h2 { font-size: 26px; letter-spacing: -0.02em; }
.descarga .version { font-size: 14px; color: var(--ink2); }
.descarga .tuyo { align-self: flex-start; padding: 4px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--acento-texto); background: var(--acento-suave); }
.descarga.es-tuyo { box-shadow: inset 0 0 0 2px var(--acento), var(--sh); }
/* Lo que pide cada sistema, antes del botón (14-oct-2026: que se sepa antes de bajarla). */
.descarga .pide { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink2); }
.descarga .pide li { position: relative; padding-left: 22px; }
.descarga .pide li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 9px; height: 5px; border-left: 2px solid var(--acento-texto);
  border-bottom: 2px solid var(--acento-texto); transform: rotate(-45deg); }
.requisitos { width: 100%; border-collapse: collapse; font-size: 15px; }
.requisitos th, .requisitos td { padding: 14px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.requisitos thead th { font-size: 14px; font-weight: 650; color: var(--ink2); }
.requisitos tbody th { width: 18%; font-weight: 650; }
.requisitos td { color: var(--ink2); }
.requisitos tr:last-child th, .requisitos tr:last-child td { border-bottom: none; }
.guia { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: guia; }
.guia > li { counter-increment: guia; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: center; padding: 22px; border-radius: 26px; }
.guia > li.sin-foto { grid-template-columns: 1fr; }
.guia h3 { display: flex; align-items: center; gap: 12px; font-size: 20px; }
.guia h3::before { content: counter(guia); flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; color: #FFFFFF; background: var(--acento); }
.guia p { margin: 8px 0 0; color: var(--ink2); }
.guia figure { margin: 0; }
.guia img { display: block; width: 100%; border-radius: 16px; box-shadow: 0 16px 40px rgba(10,30,80,.22); }
.guia figcaption { margin-top: 8px; font-size: 13px; color: var(--ink3); }
.guia .pasos-aviso { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 4px; color: var(--ink2); }
/* El lugar de una foto que todavía no se toma (la Mac y el aviso de Windows sin firma, 14-oct-2026): sólo en el borrador;
   --para-publicar no deja publicar mientras quede su «por confirmar». */
.foto-pendiente { margin: 0; display: grid; place-items: center; min-height: 200px; padding: 22px; border-radius: 16px; text-align: center;
  font-size: 14px; color: var(--ink3); border: 2px dashed var(--hair); }
.foto-pendiente p { margin: 0; }
/* Las fotos de verdad (14-oct-2026): el aviso de Windows tal cual, en pareja (primero «More info», luego «Run anyway»);
   en el celular, una debajo de la otra. */
.guia .fotos-reales .par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.guia .fotos-reales img { border-radius: 8px; box-shadow: 0 10px 28px rgba(10,30,80,.22); }
/* La ventana del .dmg (15-oct-2026), con sus esquinas redondas transparentes: la sombra sigue su forma. */
.guia .fotos-reales img.ventana-mac { border-radius: 0; box-shadow: none; filter: drop-shadow(0 10px 22px rgba(10,30,80,.24)); }
.pestanas { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--chip); margin-bottom: 18px; }
.pestanas [role="tab"] { min-height: 40px; padding: 0 18px; border: none; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 650; color: var(--ink2); background: none; cursor: pointer; }
.pestanas [role="tab"][aria-selected="true"] { color: #0A0B0E; background: #FFFFFF; box-shadow: 0 2px 10px rgba(20,40,80,.16); }
.problemas { display: grid; gap: 10px; }
.atajo { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: .92em; font-weight: 600; background: var(--chip); }

/* Novedades */
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; display: grid; gap: 18px; }
.linea-tiempo::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(var(--acento), var(--hair)); }
.linea-tiempo > li { position: relative; padding: 22px 24px; border-radius: 22px; }
.linea-tiempo > li::after { content: ""; position: absolute; left: -27px; top: 28px; width: 14px; height: 14px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.linea-tiempo time { font-size: 13.5px; font-weight: 650; color: var(--acento-texto); }
.linea-tiempo h2 { margin: 4px 0 10px; font-size: 22px; letter-spacing: -0.02em; }
.linea-tiempo ul { margin: 0; padding-left: 20px; color: var(--ink2); display: grid; gap: 6px; }

/* Llamada final */
.llamada { margin-top: 24px; padding: 56px 32px; border-radius: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.llamada h2 { max-width: 20ch; }
.llamada p { margin: 0; max-width: 52ch; font-size: 18px; color: var(--ink2); }

/* Documentos legales */
.documento { width: min(880px, calc(100% - 24px)); margin: 28px auto 0; border-radius: 26px; padding: clamp(22px, 5vw, 56px); }
.documento h1 { font-size: clamp(30px, 5vw, 44px); max-width: none; }
.documento h2 { font-size: 22px; letter-spacing: -0.02em; margin: 34px 0 8px; }
.documento h3 { font-size: 17px; margin: 22px 0 6px; }
.documento p, .documento li { font-size: 16px; color: var(--ink2); }
.documento li { margin: 4px 0; }
.documento blockquote { margin: 16px 0; padding: 12px 16px; border-radius: 14px; background: var(--avisobg); color: var(--aviso); }
.documento blockquote p { color: inherit; margin: 0; }
.documento .volver { display: inline-block; margin-bottom: 18px; font-size: 14px; }

/* Página que no existe */
.no-existe { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 80px 16px 20px; }
.no-existe .nube-perdida { position: relative; width: 220px; height: 110px; margin-bottom: 8px; animation: flota 6s ease-in-out infinite; }
.no-existe .nube-perdida span { position: absolute; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 10px 30px rgba(20,40,80,.12); }
:root[data-tema="noche"] .no-existe .nube-perdida span { background: rgba(160,175,215,.4); }
.no-existe .nube-perdida b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 36px; font-weight: 800; letter-spacing: -0.04em; color: #1D4ED8; }
:root[data-tema="noche"] .no-existe .nube-perdida b { color: #FFFFFF; }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* El pie */
.pie { width: min(1180px, calc(100% - 32px)); margin: 96px auto 28px; padding: 30px 28px 22px; border-radius: 28px; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 24px; font-size: 14px; color: var(--ink2); }
.pie .marca { font-size: 16px; }
.pie-marca p { margin: 10px 0 0; max-width: 30ch; }
.pie nav { display: flex; flex-direction: column; gap: 8px; }
.pie-titulo { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.pie a { color: var(--ink2); text-decoration: none; }
.pie a:hover { color: var(--ink); text-decoration: underline; }
.pie-abajo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--hair); }
.pie-abajo .legal { flex-basis: 100%; margin: 0; color: var(--ink3); font-size: 13px; }
.apariencia { display: inline-flex; align-items: center; gap: 8px; }
.apariencia .selector button { min-height: 32px; padding: 0 12px; font-size: 13px; }

/* Mi cuenta (maqueta; parte B la conecta a la nube y al cobro) */
.maqueta-aviso { width: min(1180px, calc(100% - 24px)); margin: 10px auto 0; padding: 10px 14px; border-radius: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; color: var(--aviso); background: var(--avisobg); }
.maqueta-aviso strong { color: var(--aviso); }
.maqueta-aviso .selector { margin-left: auto; background: rgba(255,255,255,.45); }
:root[data-tema="noche"] .maqueta-aviso .selector { background: rgba(255,255,255,.1); }
.maqueta-aviso .selector button { min-height: 32px; padding: 0 12px; font-size: 13px; }
.cuenta { width: min(1180px, calc(100% - 32px)); margin: 28px auto 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.cuenta-lateral { position: sticky; top: 92px; padding: 16px 10px; border-radius: 26px; display: flex; flex-direction: column; gap: 4px; }
.cuenta-lateral .quien { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--hair); }
.cuenta-lateral .quien strong { display: block; font-size: 14.5px; }
.cuenta-lateral .quien small { display: block; font-size: 12.5px; color: var(--ink2); }
.cuenta-lateral a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 560; }
.cuenta-lateral a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--acento-texto); }
.cuenta-lateral a:hover, .cuenta-lateral a[aria-current="page"] { background: var(--chip); }
.cuenta-lateral .salir { margin-top: 8px; color: var(--ink2); }
.cuenta-principal { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cuenta-principal h1 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -0.035em; }
.cuenta-principal .bajada { margin: 8px 0 4px; font-size: 16.5px; color: var(--ink2); max-width: 64ch; }
.panel-cuenta { padding: 22px; border-radius: 24px; }
.panel-cuenta > h2 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 4px; }
.panel-cuenta > p { margin: 4px 0 0; color: var(--ink2); }
.datos-licencia { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; }
.dato { padding: 14px; border-radius: 16px; background: var(--chip); }
.dato small { display: block; font-size: 12.5px; color: var(--ink2); }
.dato strong { display: block; margin-top: 2px; font-size: 18px; letter-spacing: -0.01em; }
.dato .barrita { margin-top: 10px; }
.estado-licencia { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--ok); background: var(--okbg); }
.estado-licencia::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado-licencia.gracia { color: var(--warn); background: var(--warnbg); }
.tabla-cuenta { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabla-cuenta th, .tabla-cuenta td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.tabla-cuenta thead th { font-size: 13px; font-weight: 650; color: var(--ink2); }
.tabla-cuenta tr:last-child td { border-bottom: none; }
.tabla-cuenta td small { display: block; color: var(--ink2); font-size: 12.5px; }
.tabla-cuenta .acciones-fila { text-align: right; white-space: nowrap; }
.persona { display: flex; align-items: center; gap: 10px; }
.formulario { display: grid; gap: 14px; margin-top: 14px; }
.formulario.en-linea { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) auto; align-items: end; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .campo .etiqueta-campo { font-size: 14px; font-weight: 650; }
.campo .ayuda { font-size: 13px; color: var(--ink2); }
.campo input, .campo select, .campo textarea { min-height: 46px; padding: 11px 15px; border: 1px solid var(--hair); border-radius: 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--chip); outline: none; }
.campo textarea { min-height: 90px; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.campo input::placeholder, .campo textarea::placeholder { color: var(--ink3); opacity: 1; }
.campo-codigo input { width: 100%; max-width: 280px; font-size: 28px; font-weight: 700; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.opcion { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--chip); cursor: pointer; }
.opcion input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--acento); }
.opcion strong { display: block; font-size: 15px; }
.opcion small { display: block; font-size: 13.5px; color: var(--ink2); }
.mensaje { padding: 12px 14px; border-radius: 14px; font-size: 14.5px; }
.mensaje.ok { color: var(--ok); background: var(--okbg); }
.mensaje.aviso { color: var(--warn); background: var(--warnbg); }
.entrar { width: min(480px, calc(100% - 32px)); margin: 56px auto 0; padding: 32px; border-radius: 30px; display: flex; flex-direction: column; gap: 14px; }
.entrar h1 { font-size: 32px; letter-spacing: -0.03em; }
.entrar .bajada { margin: 0; color: var(--ink2); }
.entrar .boton { width: 100%; }
.entrar .pie-entrar { margin: 4px 0 0; font-size: 13.5px; color: var(--ink2); }
.codigo-invitar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.codigo-invitar code { padding: 12px 18px; border-radius: 14px; font: 700 22px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .06em; background: var(--chip); }
.codigo-invitar code.correo { font: 650 17px/1.2 inherit; font-family: inherit; letter-spacing: 0; overflow-wrap: anywhere; user-select: all; } /* el correo de soporte (vuelta J) */
.soporte-correo { margin-top: 18px; }
.soporte-correo > p { margin: 0; }
dialog.hoja-dialogo { width: min(480px, calc(100% - 32px)); padding: 26px; border: none; border-radius: 26px; color: var(--ink); background: var(--solido); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
dialog.hoja-dialogo::backdrop { background: rgba(5,11,30,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.hoja-dialogo h2 { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 8px; }
dialog.hoja-dialogo p { margin: 0 0 12px; color: var(--ink2); }
dialog.hoja-dialogo .botones-dialogo { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.aviso-copiado { position: fixed; left: 50%; bottom: 28px; z-index: 40; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 650; color: #FFFFFF; background: rgba(10,11,14,.86); transform: translate(-50%, 20px); opacity: 0; transition: opacity .3s, transform .4s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.aviso-copiado.ve { opacity: 1; transform: translate(-50%, 0); }

/* Más piezas de las réplicas */
.v-ava.mas { color: var(--acento-texto); background: var(--chip); }
.v-ava.dos { background: #7A4FD8; }
.v-ava.tres { background: #0E7A6E; }
.tablero-rubros .v-marca { font-size: 13px; }
.v-rubros.grande { margin: 2px 14px 14px; padding: 8px 16px; gap: 0; }
.rubro-fila { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 54px 136px; align-items: center; gap: 14px; padding: 12px 2px; border-top: 1px solid var(--hair); font-size: 13px; }
.rubro-fila:first-child { border-top: none; }
.rubro-fila .nombre { font-weight: 600; }
.rubro-fila .conteo { color: var(--ink2); font-variant-numeric: tabular-nums; text-align: right; }
.rubro-fila .chip { justify-self: end; }
.chat-demo.corto { min-height: 360px; }
.aprobar-demo { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 26px; }
.aprobar-cabeza, .aprobar-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aprobar-cabeza strong { display: block; font-size: 15px; }
.aprobar-cabeza small { display: block; font-size: 12.5px; color: var(--ink2); }
.aprobar-pie { padding: 4px 4px 0; font-size: 13px; color: var(--ink2); }
.aprobar-demo .botones-pregunta { align-items: center; }
.aprobar-demo .botones-pregunta .chip { margin-left: auto; }
.candado-alto { display: none !important; }
.leyenda-candado { list-style: none; margin: 14px 4px 2px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 18px; font-size: 14px; color: var(--ink2); }
.leyenda-candado li { display: flex; align-items: center; gap: 10px; }
.punto { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.punto.datos { background: #3563F0; }
.punto.receta { background: #0E7A44; }
.punto.licencia { background: #8A8F9C; }
.punto.rebota { border-radius: 3px; background: #C0392B; }
.candado-demo .chapa { stroke: var(--rojo); }
.candado-demo .rebota { fill: var(--rojo); }

/* Las fotos de la guía: la de día o la de noche, según la apariencia */
.solo-noche { display: none !important; }
:root[data-tema="noche"] .solo-noche { display: block !important; }
:root[data-tema="noche"] .solo-dia { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-tema]) .solo-noche { display: block !important; } :root:not([data-tema]) .solo-dia { display: none !important; } }

/* El glosario de «Cómo funciona» */
.glosario { margin: 0; padding: 10px 24px; border-radius: 24px; }
.glosario > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 4px 22px; padding: 14px 0; border-top: 1px solid var(--hair); }
.glosario > div:first-child { border-top: none; }
.glosario dt { font-weight: 700; }
.glosario dd { margin: 0; color: var(--ink2); }

/* La apariencia, al pie: sólo con JavaScript */
.apariencia { display: none; }
.js .apariencia { display: inline-flex; }

/* La nube perdida de la 404 */
.no-existe .nube-perdida .n1 { left: 18px; top: 38px; width: 110px; height: 66px; }
.no-existe .nube-perdida .n2 { left: 76px; top: 8px; width: 96px; height: 92px; }
.no-existe .nube-perdida .n3 { left: 132px; top: 40px; width: 74px; height: 62px; }

/* Mi cuenta: lo que se ve según «Ver como» (maqueta) */
:root:not([data-vista]) [data-solo]:not([data-solo~="despacho"]),
:root[data-vista="despacho"] [data-solo]:not([data-solo~="despacho"]),
:root[data-vista="individual"] [data-solo]:not([data-solo~="individual"]),
:root[data-vista="persona"] [data-solo]:not([data-solo~="persona"]) { display: none !important; }
.panel-cuenta > h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.subtitulo-cuenta { margin: 20px 0 6px; font-size: 16px; }
.mensaje-para { margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--chip); color: var(--ink); font-size: 15px; }
.pasos-cuenta { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 6px; color: var(--ink2); }
.planes-cuenta { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; }
.planes-cuenta .plan { padding: 18px 16px; gap: 8px; }
.planes-cuenta .plan .monto { font-size: 28px; }
.planes-cuenta .plan .para { min-height: 0; }
.cuenta.contratar { grid-template-columns: minmax(0, 860px); justify-content: center; }
fieldset.panel-cuenta { margin: 0; border: none; min-width: 0; display: grid; gap: 12px; }
fieldset.panel-cuenta legend { padding: 0; margin-bottom: 4px; float: left; width: 100%; }
fieldset.panel-cuenta legend h2 { font-size: 20px; letter-spacing: -0.02em; }
fieldset.panel-cuenta legend + * { clear: both; }
.opciones-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.opcion:has(input:checked) { box-shadow: inset 0 0 0 2px var(--acento); }
.opcion a { color: var(--acento-texto); }
.resumen-pago { padding: 14px 16px; border-radius: 16px; background: var(--chip); }
.resumen-pago p { margin: 0 0 4px; }
.enlace-boton { padding: 0; border: none; background: none; font: inherit; font-weight: 650; color: var(--acento-texto); cursor: pointer; }
.enlace-boton:disabled { color: var(--ink3); font-weight: 500; cursor: default; }
.entrar .como-titulo { margin: 0; font-size: 32px; letter-spacing: -0.03em; line-height: 1.1; }
.tabla-cuenta a[aria-disabled="true"] { color: var(--ink3); }
@media (max-width: 1080px) { .planes-cuenta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 800px) { .candado-ancho { display: none !important; } .candado-alto { display: block !important; max-width: 420px; margin: 0 auto; } }
@media (max-width: 720px) {
  .glosario > div { grid-template-columns: 1fr; }
  .tabla-cuenta thead { display: none; }
  .tabla-cuenta tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
  .tabla-cuenta td { padding: 0; border: none; }
  .tabla-cuenta tr:last-child { border-bottom: none; }
}
@media (max-width: 460px) { .planes-cuenta { grid-template-columns: 1fr; } }

/* Las réplicas se acomodan a su propio ancho (container queries), no al de la pantalla: la misma animación cabe en
   la portada, en una columna de «Cómo funciona» y en un celular. */
.demo { container-type: inline-size; }
@container (max-width: 900px) {
  .v-cuerpo { grid-template-columns: minmax(0, 1fr) 250px; }
  .v-lateral { display: none; }
}
@container (max-width: 600px) {
  .v-cuerpo { grid-template-columns: 1fr; }
  .demo-visor .v-cuerpo { height: auto; }
  .v-chat { min-height: 230px; }
  .demo-visor .v-chat { height: 250px; }
  .noche-demo .capa-noche { grid-template-columns: 1fr; padding: 16px; }
  .equipo-demo { grid-template-columns: 1fr; }
  .carpetas-demo { grid-template-columns: 1fr; }
  .juez { grid-template-columns: 1fr; }
  .rubro-fila { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .rubro-fila .barrita { grid-column: 1 / -1; grid-row: 2; }
  .rubro-fila .conteo { display: none; }
}
@container (max-width: 400px) {
  .v-fila2 { grid-template-columns: 1fr; }
  .v-avance { flex-direction: row; justify-content: flex-start; gap: 16px; }
  .v-avance .v-etiqueta { align-self: center; }
  .hoja td { padding: 9px 12px; }
  .hoja td.marca-celda { width: 34px; padding-right: 8px; }
}

/* Celular y tableta */
@media (max-width: 1080px) {
  .planes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pasos { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .pie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .nav, .barra .entrar-barra { display: none; }
  .boton-menu { display: inline-flex; }
  .barra .botones { margin-left: auto; }
  .promesas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloque, .bloque.al-reves, .paso-largo { grid-template-columns: 1fr; gap: 26px; }
  .bloque.al-reves .bloque-texto { order: 0; }
  .audiencias { grid-template-columns: 1fr; }
  .descargas { grid-template-columns: 1fr; }
  .guia > li { grid-template-columns: 1fr; }
  .cuenta { grid-template-columns: 1fr; }
  .cuenta-lateral { position: static; flex-direction: row; flex-wrap: wrap; }
  .cuenta-lateral .quien { flex-basis: 100%; }
}
@media (max-width: 720px) {
  .seccion { padding-top: 64px; }
  .planes { grid-template-columns: 1fr; }
  .requisitos tbody th { width: auto; }
  .pie { grid-template-columns: 1fr 1fr; padding: 24px 20px; }
}
@media (max-width: 460px) {
  .barra { gap: 8px; padding: 8px 8px 8px 12px; }
  .barra .boton.principal { padding: 0 13px; font-size: 14px; }
  .portada { padding-top: 56px; }
  .acciones .boton { flex: 1 1 100%; }
  .promesas { grid-template-columns: 1fr; }
  .tarjeta, .audiencia, .descarga, .llamada { padding: 20px; }
  .pie { grid-template-columns: 1fr; }
  .maqueta-aviso .selector { margin-left: 0; }
  .entrar { padding: 22px; }
  .guia .fotos-reales .par { grid-template-columns: 1fr; }
}

/* Menos movimiento, menos transparencia, más contraste, colores forzados e impresión */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .revela { opacity: 1; transform: none; }
  .cielo .nube, .cielo .estrella { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .boton.vidrio, .menu-movil, .demo-pausa { background: var(--solido); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .boton.vidrio, .menu-movil { background: var(--solido); }
}
@media (prefers-contrast: more) {
  :root { --ink2: rgba(10,11,14,.9); --ink3: rgba(10,11,14,.8); --hair: rgba(10,11,14,.3); }
  :root[data-tema="noche"] { --ink2: rgba(255,255,255,.92); --ink3: rgba(255,255,255,.82); --hair: rgba(255,255,255,.35); }
  .glass { background: var(--solido); }
}
@media (forced-colors: active) {
  .glass, .boton, .chip, .dato, .campo input { border: 1px solid CanvasText; }
  .cielo, body::before, body::after { display: none; }
}
@media print {
  .cielo, body::before, body::after, .barra, .pie, .aviso-borrador, .demo-pausa, .saltar { display: none !important; }
  body { color: #000; background: #FFF; }
  .glass { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass::before { display: none; }
  .js .revela { opacity: 1; transform: none; }
}