/*
 * Porruni · web pública · landing «Todo encuentra su sitio».
 *
 * Dirección elegida por Héctor (tercera propuesta de docs/workflows/porruni-direccion-visual-2026-10-18/landing):
 * cuadrícula de libreta, recortes de papel y ventanas del producto. Colores y tipografías salen de tokens.css; aquí
 * solo viven los valores propios de la página (--web-*). Tipos en rem para respetar el tamaño de texto del sistema;
 * la mesa del héroe es una ilustración interactiva y conserva medidas en px para no deformarse.
 */

:root {
  --web-page: #f3ebfd;
  --web-grid: rgb(73 53 98 / .06);
  --web-paper: #fffdf9;
  --web-paper-line: rgb(43 32 64 / .1);
  --web-hair: rgb(43 32 64 / .13);
  --web-strong: #33244d;
  --web-on-strong: #fff8ec;
  --web-strong-hover: #45335f;
  --web-cta: var(--runi-coral);
  --web-cta-hover: #f65f58;
  --web-on-cta: #2a1430;
  --web-sec: rgb(255 255 255 / .78);
  --web-sec-hover: #fff;
  --web-sec-line: rgb(43 32 64 / .16);
  --web-head: rgb(243 235 253 / .88);
  --web-shadow: 43 32 64;
  --web-annot: var(--porruni-coral-ink);
  --web-underline: var(--runi-coral);
  --web-row-clases: #efe7fb;
  --web-row-semana: #ffe9e3;
  --web-row-notas: #fff3cf;
  --web-row-runi: #dff3ea;
  --porruni-user: #48153b;
  --porruni-on-user: #fff8fd;
  --web-gutter: 48px;
  --web-max: 76rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --web-page: #0c2230;
    --web-grid: rgb(112 217 194 / .05);
    --web-paper: #11293a;
    --web-paper-line: rgb(236 244 247 / .1);
    --web-hair: rgb(236 244 247 / .12);
    --web-strong: #f2e9fd;
    --web-on-strong: #26142e;
    --web-strong-hover: #ffffff;
    --web-cta: var(--porruni-action);
    --web-cta-hover: var(--porruni-action-hover);
    --web-on-cta: var(--porruni-on-action);
    --web-sec: rgb(17 41 58 / .72);
    --web-sec-hover: #173749;
    --web-sec-line: rgb(236 244 247 / .22);
    --web-head: rgb(12 34 48 / .88);
    --web-shadow: 0 0 0;
    --web-row-clases: #33284d;
    --web-row-semana: #46242a;
    --web-row-notas: #3b3215;
    --web-row-runi: #123f3a;
    --porruni-user: #70d9c2;
    --porruni-on-user: #062a2c;
  }
}
:root[data-theme="dark"] {
  --web-page: #0c2230;
  --web-grid: rgb(112 217 194 / .05);
  --web-paper: #11293a;
  --web-paper-line: rgb(236 244 247 / .1);
  --web-hair: rgb(236 244 247 / .12);
  --web-strong: #f2e9fd;
  --web-on-strong: #26142e;
  --web-strong-hover: #ffffff;
  --web-cta: var(--porruni-action);
  --web-cta-hover: var(--porruni-action-hover);
  --web-on-cta: var(--porruni-on-action);
  --web-sec: rgb(17 41 58 / .72);
  --web-sec-hover: #173749;
  --web-sec-line: rgb(236 244 247 / .22);
  --web-head: rgb(12 34 48 / .88);
  --web-shadow: 0 0 0;
  --web-row-clases: #33284d;
  --web-row-semana: #46242a;
  --web-row-notas: #3b3215;
  --web-row-runi: #123f3a;
  --porruni-user: #70d9c2;
  --porruni-on-user: #062a2c;
}

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  background-color: var(--web-page);
  background-image: linear-gradient(var(--web-grid) 1px, transparent 1px), linear-gradient(90deg, var(--web-grid) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px;
  color: var(--porruni-ink); font-family: var(--porruni-font-text); font-size: 1rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-optical-sizing: auto;
  transition: background-color .3s ease, color .3s ease;
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
button, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.i { width: 1.0625rem; height: 1.0625rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--porruni-focus); outline-offset: 3px; }
.wrap { width: min(100% - 2 * var(--web-gutter), var(--web-max)); margin-inline: auto; }
.skip { position: fixed; z-index: 100; left: 1rem; top: -4rem; padding: .75rem 1.1rem; border-radius: var(--porruni-radius-pill); background: var(--web-strong); color: var(--web-on-strong); font-weight: 700; text-decoration: none; transition: top .15s ease; }
.skip:focus { top: 1rem; }
.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; }

/* ───────── Botones ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: 0 1.375rem;
  border: 0; border-radius: var(--porruni-radius-pill); font-weight: 700; font-size: .97rem; letter-spacing: -.005em; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .1s ease-out, background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-pri { background: var(--web-cta); color: var(--web-on-cta); }
.btn-pri:hover { background: var(--web-cta-hover); }
.btn-sec { background: var(--web-sec); color: var(--porruni-ink); box-shadow: inset 0 0 0 1px var(--web-sec-line); }
.btn-sec:hover { background: var(--web-sec-hover); box-shadow: inset 0 0 0 1px var(--porruni-line-strong); }
.btn-ink { background: var(--web-strong); color: var(--web-on-strong); }
.btn-ink:hover { background: var(--web-strong-hover); }
.btn-ghost { min-height: 2.625rem; padding: 0 1rem; background: transparent; color: var(--porruni-ink); }
.btn-ghost:hover { background: rgb(var(--web-shadow) / .07); }
:root[data-theme="dark"] .btn-ghost:hover { background: rgb(236 244 247 / .08); }
.btn-sm { min-height: 2.5rem; padding: 0 1rem; font-size: .91rem; }
.btn-xs { min-height: 2rem; padding: 0 .75rem; font-size: .8125rem; }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--porruni-ink); cursor: pointer; transition: transform .1s ease-out, background-color .15s ease;
}
.icon-btn:hover { background: var(--web-hair); }
.icon-btn:active { transform: scale(.94); }
.tag { display: inline-flex; align-items: center; gap: .375rem; min-height: 1.5rem; padding: .125rem .625rem; border-radius: var(--porruni-radius-pill); font-size: .75rem; font-weight: 700; letter-spacing: .01em; line-height: 1.2; white-space: nowrap; }
.tag-coral { background: var(--porruni-coral-soft); color: var(--porruni-coral-ink); }
.tag-lilac { background: var(--porruni-provisional-soft); color: var(--porruni-provisional-ink); }

/* ───────── Cabecera: material translúcido que solo aparece al desplazar ───────── */
.site-head { position: sticky; top: 0; z-index: 30; transition: background-color .25s ease, box-shadow .25s ease; }
.site-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--web-head); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); opacity: 0; transition: opacity .25s ease; }
.site-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; pointer-events: none; background: linear-gradient(rgb(var(--web-shadow) / .08), transparent); opacity: 0; transition: opacity .25s ease; }
.site-head.scrolled::before, .site-head.scrolled::after { opacity: 1; }
.head-row { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; border-radius: var(--porruni-radius-m); }
.logo { width: auto; height: 32px; }
.logo-night { display: none; }
.head-nav { margin-left: auto; }
.head-nav ul { display: flex; gap: .25rem; }
.head-nav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 .875rem; border-radius: var(--porruni-radius-pill); font-weight: 600; font-size: .9375rem; color: var(--porruni-ink-soft); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.head-nav a:hover { color: var(--porruni-ink); background: var(--web-hair); }
.head-actions { display: flex; align-items: center; gap: .375rem; }
.i-to-light { display: none; }

/* ───────── Héroe ───────── */
.hero { padding-top: 1.25rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: .5rem; align-items: start; }
.hero-copy { padding-top: 3.25rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--porruni-ink); }
.eyebrow i { display: inline-block; width: .5rem; height: .5rem; border-radius: 2px; background: var(--runi-coral); transform: rotate(45deg); }
h1 { position: relative; isolation: isolate; margin-top: 1.125rem; font-weight: 800; font-size: clamp(3.6rem, 1rem + 5.2vw, 5rem); line-height: .95; letter-spacing: -.05em; color: var(--porruni-ink); text-wrap: balance; }
h1 .u { position: relative; white-space: nowrap; }
h1 .u::after {
  content: ""; position: absolute; z-index: -1; left: -3%; right: -5%; bottom: -.06em; height: .3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cpath d='M5 17C70 7 160 4 295 11' stroke='%23fa6f68' stroke-width='9' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.lede { margin-top: 1.5rem; max-width: 25em; font-size: 1.09375rem; line-height: 1.55; color: var(--porruni-ink-soft); text-wrap: pretty; }
.ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.scrawl { display: flex; align-items: flex-start; gap: .375rem; margin: 1.75rem 0 0 .5rem; font-family: var(--porruni-font-display); font-weight: 500; font-size: 1.125rem; line-height: 1.15; color: var(--web-annot); transform: rotate(-3deg); transform-origin: left center; max-width: 17em; }
.scrawl .arrow {
  width: 62px; height: 34px; flex: none; margin-top: .25rem; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 34'%3E%3Cpath d='M3 6C18 26 38 30 55 20' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M46 15l10 5-8 8' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 34'%3E%3Cpath d='M3 6C18 26 38 30 55 20' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M46 15l10 5-8 8' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* La mesa: ilustración interactiva con medidas fijas. */
.desk { position: relative; min-height: 640px; scroll-margin-top: 5rem; }
.win { position: absolute; z-index: 1; left: 4%; top: 13%; width: 90%; height: 61%; display: flex; flex-direction: column; border-radius: 20px; background: var(--web-paper); overflow: hidden; box-shadow: 0 46px 80px -46px rgb(var(--web-shadow) / .6), 0 0 0 1px rgb(var(--web-shadow) / .1); }
:root[data-theme="dark"] .win { box-shadow: 0 46px 80px -40px rgb(0 0 0 / .7), 0 0 0 1px var(--web-hair); }
.win-bar, .card-bar { display: flex; align-items: center; gap: .625rem; min-height: 42px; padding: 0 14px; border-bottom: 1px solid var(--web-hair); font-size: 12.5px; color: var(--porruni-ink-soft); font-weight: 600; flex: none; }
.win-bar b, .card-bar b { color: var(--porruni-ink); font-weight: 700; }
.win-bar .tag, .card-bar .tag { margin-left: auto; }
.win-mark { width: 20px; height: 20px; flex: none; }
.panes { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; min-height: 0; }
.pane { position: relative; padding: 12px 14px; min-width: 0; }
.pane:nth-child(odd) { border-right: 1px solid var(--web-hair); }
.pane:nth-child(-n+2) { border-bottom: 1px solid var(--web-hair); }
.pane h3 { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; letter-spacing: .01em; color: var(--porruni-ink); }
.pane h3 .i { width: 15px; height: 15px; }
.pane h3 .n { margin-left: auto; font-size: max(12px, .75rem); font-weight: 700; color: var(--porruni-ink-soft); }
.pane .empty { position: absolute; left: 14px; right: 14px; top: 44px; padding: 10px; border-radius: 12px; border: 1.5px dashed var(--web-hair); font-size: 12px; color: var(--porruni-ink-soft); text-align: center; transition: opacity .25s ease; }
.pane.has .empty { opacity: 0; }
.pane ul { display: grid; gap: 6px; margin-top: 9px; }
.row {
  position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) 14px; gap: 9px; align-items: center; width: 100%; padding: 6px 8px; border: 0; border-radius: 11px;
  background: var(--rowbg); text-align: left; cursor: pointer; visibility: hidden; opacity: 0; transform: translateY(5px) scale(.98);
  transition: opacity .28s ease, transform .38s cubic-bezier(.2, .8, .2, 1), box-shadow .6s ease, visibility 0s linear .38s;
}
.row.in { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.row.flash { box-shadow: 0 0 0 2px var(--runi-coral); }
.row:active { transform: scale(.98); transition-duration: .1s; }
.row .ri { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--web-paper); color: var(--porruni-ink); }
.row .ri .i { width: 14px; height: 14px; }
.row b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--porruni-ink); }
.row small { display: block; font-size: max(12px, .75rem); line-height: 1.25; color: var(--porruni-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .undo { width: 14px; height: 14px; color: var(--porruni-ink-soft); opacity: 0; transition: opacity .15s ease; }
.row:hover .undo, .row:focus-visible .undo { opacity: 1; }
.p-clases { --rowbg: var(--web-row-clases); }
.p-semana { --rowbg: var(--web-row-semana); }
.p-notas { --rowbg: var(--web-row-notas); }
.p-runi { --rowbg: var(--web-row-runi); }
.desk-runi { position: absolute; z-index: 2; right: -1%; top: 59%; width: 180px; height: auto; pointer-events: none; }
.say { position: absolute; z-index: 6; right: 20%; top: 79%; padding: 8px 14px 10px; border-radius: 18px 18px 4px 18px; background: var(--web-paper); box-shadow: 0 14px 30px -18px rgb(var(--web-shadow) / .55), 0 0 0 1px var(--web-hair); font-family: var(--porruni-font-display); font-weight: 500; font-size: 17px; line-height: 1.1; color: var(--porruni-ink); white-space: nowrap; transform-origin: 100% 100%; will-change: transform, opacity; }

/* Recortes de papel (objetos: conservan sus colores de papel también de noche). */
.scrap { position: absolute; z-index: 4; left: 0; top: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: grab; touch-action: manipulation; will-change: transform; user-select: none; -webkit-user-select: none; }
.scrap:focus-visible { outline: none; }
.scrap:focus-visible .face { outline: 3px solid var(--porruni-focus); outline-offset: 4px; }
.scrap.dragging { cursor: grabbing; z-index: 9; }
.scrap.filed { pointer-events: none; }
.scrap .face { display: block; transition: box-shadow .2s ease, transform .1s ease-out; }
.scrap.pressed .face { transform: scale(.97); }
.scrap.dragging .face { box-shadow: 0 30px 40px -22px rgb(43 32 64 / .55) !important; transform: scale(1.02); }
.s-notes .face { position: relative; width: 196px; height: 214px; padding: 38px 14px 0 40px; background: #fffef8 repeating-linear-gradient(to bottom, transparent 0, transparent 25px, rgb(70 110 200 / .2) 25px, rgb(70 110 200 / .2) 26px) 0 36px / 100% 100% no-repeat; font-family: var(--porruni-font-display); font-weight: 400; font-size: 16.5px; line-height: 26px; color: #30357a; clip-path: polygon(0 4%, 5% 1%, 11% 4%, 17% 0, 24% 3%, 31% 1%, 38% 4%, 45% 0, 53% 3%, 60% 1%, 67% 4%, 74% 0, 81% 3%, 88% 1%, 94% 4%, 100% 2%, 100% 100%, 0 100%); filter: drop-shadow(0 12px 14px rgb(43 32 64 / .16)); }
.s-notes .face::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 0; width: 1.5px; background: rgb(232 90 90 / .45); }
.s-notes .face b { font-weight: 600; }
.s-pdf .face { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; width: 224px; padding: 12px 14px 12px 12px; border-radius: 14px; background: #fff; color: #26142e; box-shadow: 0 14px 26px -16px rgb(43 32 64 / .45), 0 0 0 1px rgb(43 32 64 / .08); }
.s-pdf .doc { position: relative; width: 44px; height: 54px; border-radius: 6px 14px 6px 6px; background: #fdecea; display: grid; place-items: end center; padding-bottom: 7px; font-size: max(12px, .75rem); font-weight: 800; letter-spacing: .06em; color: #b0263a; }
.s-pdf .doc::before { content: ""; position: absolute; right: 0; top: 0; width: 14px; height: 14px; border-radius: 0 14px 0 6px; background: #f5c4bf; }
.s-pdf b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.s-pdf small { display: block; margin-top: 3px; font-size: max(12px, .75rem); color: #64576e; }
.s-sticky .face { position: relative; width: 150px; height: 146px; padding: 30px 14px 0 16px; background: linear-gradient(160deg, #fff1b3, #ffe48a); font-family: var(--porruni-font-display); font-weight: 500; font-size: 19px; line-height: 1.12; color: #4a3410; box-shadow: 0 16px 22px -14px rgb(90 60 10 / .45); }
.s-sticky .face::before { content: ""; position: absolute; left: 50%; top: -9px; width: 62px; height: 22px; margin-left: -31px; background: rgb(190 230 214 / .75); transform: rotate(-4deg); }
.s-chat .face { display: grid; grid-template-columns: 30px 1fr; gap: 10px; width: 244px; padding: 11px 14px 12px 11px; border-radius: 18px 18px 18px 6px; background: #fff; color: #26142e; box-shadow: 0 14px 26px -16px rgb(43 32 64 / .45), 0 0 0 1px rgb(43 32 64 / .08); }
.s-chat .who { width: 30px; height: 30px; border-radius: 50%; background: #cfe9dd; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #106653; }
.s-chat small { display: block; font-size: max(12px, .75rem); font-weight: 700; color: #106653; }
.s-chat .msg { display: block; font-size: 13.5px; line-height: 1.35; font-weight: 600; }
.s-chat time { float: right; margin: 4px 0 0 8px; font-size: max(12px, .75rem); color: #64576e; font-weight: 600; }
.s-time .face { position: relative; width: 204px; padding: 11px 16px 12px 18px; border-radius: 10px; color: #26142e; background: radial-gradient(circle at 0 50%, transparent 7px, #fffdf6 7.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 7px, #fffdf6 7.5px) right / 51% 100% no-repeat; filter: drop-shadow(0 10px 12px rgb(43 32 64 / .18)); }
.s-time b { display: block; font-family: var(--porruni-font-display); font-weight: 600; font-size: 18px; letter-spacing: .02em; color: #33244d; }
.s-time small { display: block; font-size: max(12px, .75rem); color: #64576e; font-weight: 600; border-top: 1.5px dashed rgb(43 32 64 / .18); margin-top: 6px; padding-top: 6px; }
.s-audio .face { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; width: 214px; padding: 12px 14px 12px 12px; border-radius: 16px; background: #33244d; color: #fff8ec; box-shadow: 0 16px 26px -16px rgb(43 32 64 / .7); }
.s-audio .play { width: 34px; height: 34px; border-radius: 50%; background: var(--runi-coral); display: grid; place-items: center; color: #2a1430; }
.s-audio .play .i { width: 15px; height: 15px; fill: currentColor; }
.s-audio .wave {
  display: block; height: 20px; background: repeating-linear-gradient(90deg, #d9cdea 0 2px, transparent 2px 5px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 9h4v2H0zM5 6h4v8H5zM10 3h4v14h-4zM15 7h4v6h-4zM20 2h4v16h-4zM25 5h4v10h-4zM30 8h4v4h-4zM35 4h4v12h-4zM40 1h4v18h-4zM45 6h4v8h-4zM50 3h4v14h-4zM55 8h4v4h-4zM60 5h4v10h-4zM65 2h4v16h-4zM70 7h4v6h-4zM75 4h4v12h-4zM80 8h4v4h-4zM85 3h4v14h-4zM90 6h4v8h-4zM95 9h4v2h-4zM100 5h4v10h-4zM105 7h4v6h-4zM110 8h4v4h-4zM115 9h4v2h-4z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 9h4v2H0zM5 6h4v8H5zM10 3h4v14h-4zM15 7h4v6h-4zM20 2h4v16h-4zM25 5h4v10h-4zM30 8h4v4h-4zM35 4h4v12h-4zM40 1h4v18h-4zM45 6h4v8h-4zM50 3h4v14h-4zM55 8h4v4h-4zM60 5h4v10h-4zM65 2h4v16h-4zM70 7h4v6h-4zM75 4h4v12h-4zM80 8h4v4h-4zM85 3h4v14h-4zM90 6h4v8h-4zM95 9h4v2h-4zM100 5h4v10h-4zM105 7h4v6h-4zM110 8h4v4h-4zM115 9h4v2h-4z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.s-audio small { display: block; margin-top: 5px; font-size: max(12px, .75rem); font-weight: 600; color: #d9cdea; }
.desk-bar { position: absolute; z-index: 7; left: 4%; right: 0; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.desk-bar .status { font-size: .84rem; font-weight: 700; color: var(--porruni-ink-soft); }

/* ───────── Secciones ───────── */
.kicker { font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--porruni-coral-ink); }
h2 { margin-top: .625rem; font-weight: 800; font-size: clamp(2.125rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.02; letter-spacing: -.04em; color: var(--porruni-ink); text-wrap: balance; }
h3 { font-weight: 800; letter-spacing: -.015em; }
.como { margin-top: 4.5rem; }
.como-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: end; padding-top: 1.625rem; border-top: 2px solid var(--porruni-ink); }
.como-sub { font-size: 1.0625rem; color: var(--porruni-ink-soft); text-wrap: pretty; max-width: 30em; justify-self: end; }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; margin-top: 2.5rem; }
.col .num { font-family: var(--porruni-font-display); font-weight: 500; font-size: 2.75rem; line-height: 1; color: var(--runi-coral); }
.col h3 { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; font-size: 1.1875rem; }
.col > p:not(.num) { margin-top: .5rem; font-size: .92rem; color: var(--porruni-ink-soft); text-wrap: pretty; }
.vig { margin-top: 1.125rem; padding: .875rem; border-radius: 18px; background: var(--web-paper); font-size: .84rem; line-height: 1.45; box-shadow: 0 22px 44px -30px rgb(var(--web-shadow) / .45), 0 0 0 1px var(--web-hair); }
.vig-top { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .8125rem; color: var(--porruni-ink); }
.vig-top em { margin-left: auto; font-style: normal; font-size: .75rem; font-weight: 600; color: var(--porruni-ink-soft); }
.vig-top .i { width: 15px; height: 15px; }
.dot { width: .625rem; height: .625rem; border-radius: 50%; flex: none; }
.dot-2 { background: var(--porruni-tone-2-ink); }
.vig-title { margin-top: .625rem; font-family: var(--porruni-font-display); font-weight: 500; font-size: 1.125rem; color: var(--porruni-ink); }
.vig-sub { font-size: .78rem; color: var(--porruni-ink-soft); }
.chips-mini { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .625rem; }
.chips-mini span { padding: .125rem .5rem; border-radius: var(--porruni-radius-pill); background: var(--porruni-tone-2); color: var(--porruni-tone-2-ink); font-size: .75rem; font-weight: 700; }
.week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .375rem; }
.week li { display: grid; justify-items: center; gap: .125rem; padding: .375rem 0 .5rem; border-radius: 12px; background: var(--porruni-surface-soft); }
.week li.today { background: var(--web-strong); color: var(--web-on-strong); }
.week b { font-size: .75rem; font-weight: 800; opacity: .75; }
.week span { font-family: var(--porruni-font-display); font-weight: 500; font-size: 1.05rem; }
.week .ev { width: .4rem; height: .4rem; border-radius: 50%; }
.ev-clase { background: var(--porruni-tone-2-ink); }
.week li.today .ev-clase { background: var(--runi-coral); }
.ev-entrega { background: var(--runi-coral); }
.vig-row { display: flex; align-items: center; gap: .5rem; margin-top: .625rem; font-weight: 600; font-size: .8rem; }
.pill { display: inline-flex; padding: .0625rem .5rem; border-radius: var(--porruni-radius-pill); font-size: .75rem; font-weight: 800; }
.pill-coral { background: var(--porruni-coral-soft); color: var(--porruni-coral-ink); }
.sheet-h { margin-top: .625rem; font-family: var(--porruni-font-display); font-weight: 500; font-size: 1.05rem; color: var(--porruni-ink); }
.sheet-l { margin-top: .25rem; padding-left: .75rem; border-left: 2px solid var(--porruni-tone-3-ink); font-size: .8rem; }
.sheet-l.muted { color: var(--porruni-ink-soft); border-left-color: var(--web-hair); }

/* Funciones en dos columnas: texto y tarjeta del producto. */
.feature { margin-top: 6.5rem; }
.feature-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 3.5rem; align-items: center; }
.flip .feature-copy { order: 2; }
.feature-lede { margin-top: 1.125rem; font-size: 1.0625rem; color: var(--porruni-ink-soft); text-wrap: pretty; max-width: 30em; }
.points { display: grid; gap: .75rem; margin-top: 1.5rem; }
.points li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .625rem; font-size: .95rem; color: var(--porruni-ink); text-wrap: pretty; }
.points .i { margin-top: .19rem; color: var(--porruni-mint-ink); }
.card { position: relative; border-radius: 24px; background: var(--web-paper); box-shadow: 0 40px 70px -46px rgb(var(--web-shadow) / .55), 0 0 0 1px var(--web-hair); overflow: hidden; }
.card-bar { min-height: 48px; padding: 0 1.125rem; font-size: .84rem; }
.card-bar > .i { width: 1.125rem; height: 1.125rem; color: var(--porruni-ink); }
.card-note { display: flex; gap: .5rem; align-items: flex-start; margin: 0; padding: .875rem 1.125rem 1rem; border-top: 1px solid var(--web-hair); font-size: .8125rem; line-height: 1.45; color: var(--porruni-ink-soft); }
.card-note .i { width: 1rem; height: 1rem; margin-top: .1rem; }
.mini-h { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 800; color: var(--porruni-ink); }

/* Runi */
.chat-asks { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem 1.125rem 0; }
.chip { min-height: 2.25rem; padding: 0 .875rem; border: 0; border-radius: var(--porruni-radius-pill); background: var(--porruni-surface-soft); color: var(--porruni-ink); font-size: .875rem; font-weight: 600; cursor: pointer; transition: transform .1s ease-out, background-color .15s ease, color .15s ease; }
.chip:hover { background: var(--porruni-surface-strong); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--web-strong); color: var(--web-on-strong); }
.chat-log { min-height: 15.5rem; padding: 1rem 1.125rem 1.125rem; display: flex; flex-direction: column; gap: .625rem; }
.chat-hint { margin: auto; color: var(--porruni-ink-soft); font-size: .9rem; }
.bubble { max-width: 88%; padding: .625rem .875rem; border-radius: 18px; font-size: .92rem; line-height: 1.5; }
.bubble p + p { margin-top: .5rem; }
.bubble.me { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--porruni-user); color: var(--porruni-on-user); }
.bubble.runi { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--porruni-surface-soft); color: var(--porruni-ink); }
.src { display: inline-flex; align-items: center; gap: .375rem; margin-top: .625rem !important; padding: .25rem .625rem; border-radius: var(--porruni-radius-pill); background: var(--porruni-mint-soft); color: var(--porruni-mint-ink); font-size: .78rem; font-weight: 700; }
.src .i { width: .875rem; height: .875rem; }
.reveal { margin-top: .625rem; min-height: 2.25rem; padding: 0 .875rem; border: 0; border-radius: var(--porruni-radius-pill); background: var(--web-paper); color: var(--porruni-ink); font-weight: 700; font-size: .84rem; box-shadow: inset 0 0 0 1px var(--web-sec-line); cursor: pointer; transition: transform .1s ease-out; }
.reveal:active { transform: scale(.97); }
.reveal-a { margin-top: .625rem; padding: .5rem .75rem; border-radius: 12px; background: var(--porruni-mint-soft); color: var(--porruni-mint-ink); font-weight: 600; }

/* Cierre con la escena de Calma (ilustración de día también de noche: el texto vive sobre su cielo). */
.calma { margin-top: 7rem; }
.calma-frame { position: relative; border-radius: 28px; overflow: hidden; background: #fbf3e4; box-shadow: 0 40px 80px -50px rgb(var(--web-shadow) / .6), 0 0 0 1px var(--web-hair); isolation: isolate; }
.calma-scene { position: relative; }
.calma-art { width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover; }
.calma-scene::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(251 243 228 / .92) 0, rgb(251 243 228 / .7) 30%, rgb(251 243 228 / 0) 52%); }
.calma-runi { position: absolute; z-index: 2; left: 44%; bottom: 3.5%; width: 12.5%; height: auto; }
.calma-copy { position: absolute; z-index: 3; left: 3.5rem; top: 3.25rem; width: min(30rem, 44%); color: #26142e; }
.calma-copy h2 { color: #26142e; font-size: clamp(2.25rem, 1.2rem + 2.4vw, 3.4rem); }
.calma-copy p { margin-top: 1rem; font-size: 1.125rem; color: #4f4259; max-width: 22em; text-wrap: pretty; }
.calma-copy .btn-sec { background: rgb(255 255 255 / .82); color: #26142e; box-shadow: inset 0 0 0 1px rgb(43 32 64 / .18); }
.calma-copy .btn-sec:hover { background: #fff; }
.calma-copy .btn-pri { background: var(--runi-coral); color: #2a1430; }
.calma-copy .btn-pri:hover { background: #f65f58; }
.calma-copy :focus-visible { outline-color: #c7323f; }
:root[data-theme="dark"] .calma-art { filter: brightness(.94); }

/* Pie */
.site-foot { margin-top: 5rem; padding: 2.25rem 0 2.5rem; border-top: 1px solid var(--web-hair); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: .75rem 2rem; align-items: start; font-size: .8125rem; color: var(--porruni-ink-soft); }
.foot-brand { display: inline-flex; align-items: center; gap: .625rem; font-weight: 700; color: var(--porruni-ink); }
.foot-brand img { width: 22px; height: 22px; }
.foot-nav { display: flex; gap: 1rem; }
.foot-nav a { min-height: 1.5rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--web-hair); text-underline-offset: 3px; }
.foot-nav a:hover { text-decoration-color: currentColor; }
.foot-credits { grid-column: 1 / -1; font-size: .75rem; }

/* ───────── Cabecera: navegación actual y CTA ───────── */
.head-nav a[aria-current="page"] { color: var(--porruni-ink); background: var(--web-hair); }
main:focus { outline: none; }
.hero-note { margin-top: 1rem; max-width: 30em; font-size: .9rem; color: var(--porruni-ink-soft); text-wrap: pretty; }
.hero-note a, .page-lede a, .prose a, .faq a, .section-lede a, .news-back a, .kicker a, .foot-credits a { font-weight: 700; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
.col-state { margin-top: .625rem; }

/* ───────── Estado de la beta ───────── */
.beta { margin-top: 6.5rem; }
.state-tag { display: inline-flex; align-items: center; min-height: 1.5rem; padding: .125rem .625rem; border-radius: var(--porruni-radius-pill); font-size: .75rem; font-weight: 800; line-height: 1.25; letter-spacing: .01em; }
.st-beta { background: var(--porruni-mint-soft); color: var(--porruni-mint-ink); }
.st-pend { background: var(--porruni-warning-soft); color: var(--porruni-warning-ink); }
.st-prep { background: var(--porruni-provisional-soft); color: var(--porruni-provisional-ink); }
.status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.status-card { padding: 1.125rem 1.125rem 1.25rem; border-radius: 20px; background: var(--web-paper); box-shadow: 0 22px 44px -32px rgb(var(--web-shadow) / .45), 0 0 0 1px var(--web-hair); }
.status-card h3 { font-size: 1.0625rem; line-height: 1.25; color: var(--porruni-ink); }
.state-line { margin-top: .5rem; }
.status-card > p:last-child { margin-top: .5rem; font-size: .9rem; color: var(--porruni-ink-soft); text-wrap: pretty; }
.subjects-box { margin-top: 1.5rem; padding: 1.25rem 1.375rem 1.375rem; border-radius: 20px; background: var(--porruni-cream); box-shadow: inset 0 0 0 1px var(--web-hair); }
.subjects-box h3 { font-size: 1.125rem; color: var(--porruni-ink); }
.subjects-box > p { margin-top: .375rem; max-width: 48em; font-size: .92rem; color: var(--porruni-ink-soft); text-wrap: pretty; }
.subjects { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.subjects li { padding: .375rem .875rem; border-radius: var(--porruni-radius-pill); background: var(--web-paper); box-shadow: inset 0 0 0 1px var(--web-sec-line); font-size: .9rem; font-weight: 700; color: var(--porruni-ink); }

/* ───────── Vídeo (solo si está configurado) ───────── */
.video-block { margin-top: 6.5rem; }
.video { display: block; width: 100%; max-width: 60rem; height: auto; aspect-ratio: 16 / 9; margin-top: 1.5rem; border-radius: 24px; background: #000; }

/* ───────── Páginas interiores ───────── */
.page { padding-top: 3rem; }
.page-head { max-width: 46rem; }
.page-head h1 { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.25rem); line-height: 1; overflow-wrap: break-word; hyphens: auto; }
.page-lede { margin-top: 1.25rem; max-width: 36em; font-size: 1.125rem; color: var(--porruni-ink-soft); text-wrap: pretty; }
.page-section { margin-top: 3.5rem; max-width: 60rem; }
.page-section > h2, .prose h2 { font-size: clamp(1.625rem, 1.2rem + 1vw, 2.125rem); }
.page-section .ctas { margin-top: 2rem; }
.section-lede { margin-top: .75rem; max-width: 44em; color: var(--porruni-ink-soft); text-wrap: pretty; }
.prose { max-width: 44rem; }
.prose p, .prose .list, .prose .legal-data { margin-top: .875rem; }
.prose p { text-wrap: pretty; }
.list { display: grid; gap: .625rem; padding-left: 1.25rem; list-style: disc; }
.list li::marker { color: var(--runi-coral); }
code { padding: .0625rem .375rem; border-radius: 6px; background: var(--porruni-surface-soft); font-size: .92em; overflow-wrap: anywhere; }
.note { display: flex; gap: .5rem; align-items: flex-start; max-width: 44rem; margin-top: 1.5rem; font-size: .9rem; color: var(--porruni-ink-soft); }
.note .i { margin-top: .2rem; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; counter-reset: paso; }
.steps li { counter-increment: paso; padding: 1.125rem 1.125rem 1.25rem; border-radius: 20px; background: var(--web-paper); box-shadow: 0 22px 44px -32px rgb(var(--web-shadow) / .45), 0 0 0 1px var(--web-hair); }
.steps li::before { content: counter(paso, decimal-leading-zero); display: block; font-family: var(--porruni-font-display); font-weight: 500; font-size: 2rem; line-height: 1; color: var(--runi-coral); }
.steps h3 { margin-top: .625rem; font-size: 1.125rem; color: var(--porruni-ink); }
.steps p { margin-top: .375rem; font-size: .92rem; color: var(--porruni-ink-soft); text-wrap: pretty; }

/* Preguntas */
.faq { max-width: 48rem; margin-top: 2.5rem; }
.faq-item { padding: 1.5rem 0; border-top: 1px solid var(--web-hair); scroll-margin-top: 7rem; }
.faq-item:last-child { border-bottom: 1px solid var(--web-hair); }
.faq-item h2 { margin-top: 0; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; }
.faq-item p { margin-top: .625rem; color: var(--porruni-ink); text-wrap: pretty; }

/* Legal y datos pendientes */
.draft-note { display: flex; gap: .625rem; align-items: flex-start; max-width: 44rem; margin-top: 1.5rem; padding: .875rem 1rem; border-radius: 14px; background: var(--porruni-warning-soft); color: var(--porruni-warning-ink); font-size: .9rem; font-weight: 600; }
.draft-note .i { margin-top: .15rem; }
.legal-data { border-radius: 16px; background: var(--web-paper); box-shadow: 0 0 0 1px var(--web-hair); overflow: hidden; }
.legal-data > div { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: .25rem 1rem; padding: .75rem 1rem; border-top: 1px solid var(--web-hair); }
.legal-data > div:first-child { border-top: 0; }
.legal-data dt { font-weight: 700; color: var(--porruni-ink); }
.legal-data dd { margin: 0; overflow-wrap: anywhere; }
.pendiente { display: inline; padding: .0625rem .375rem; border-radius: 6px; background: var(--porruni-warning-soft); color: var(--porruni-warning-ink); font-weight: 700; outline: 1.5px dashed currentColor; outline-offset: -1.5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.contact-line { margin-top: 1rem; font-size: 1.25rem; font-weight: 700; overflow-wrap: anywhere; }
.contact-line a { text-decoration: underline; text-underline-offset: 4px; }
.contact-line .pendiente { font-size: 1rem; }

/* Noticias */
.news-list { max-width: 48rem; margin-top: 2.5rem; }
.news-item { padding: 1.5rem 0; border-top: 1px solid var(--web-hair); }
.news-item:last-child { border-bottom: 1px solid var(--web-hair); }
.news-item h2 { margin-top: 0; font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); line-height: 1.15; overflow-wrap: break-word; }
.news-item h2 a { text-decoration: none; }
.news-item h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.news-meta { margin-top: .5rem; font-size: .875rem; font-weight: 600; color: var(--porruni-ink-soft); }
.news-item p:last-child { margin-top: .5rem; text-wrap: pretty; }
.empty-state { max-width: 40rem; margin-top: 2.5rem; padding: 1.5rem; border-radius: 16px; border: 1.5px dashed var(--porruni-line-strong); font-weight: 600; color: var(--porruni-ink-soft); text-align: center; }
.news-article .page-head h1 { font-size: clamp(2.125rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.05; }
.news-figure { max-width: 48rem; margin-top: 2rem; }
.news-figure img { width: 100%; height: auto; border-radius: 20px; }
.news-article .prose { margin-top: 2rem; }
.news-back { margin-top: 2.5rem; }

/* Llamada final de las páginas interiores */
.cta-band { margin-top: 5.5rem; }
.cta-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: center; padding: 1.75rem 2rem; border-radius: 28px; background: var(--web-paper); box-shadow: 0 40px 70px -46px rgb(var(--web-shadow) / .55), 0 0 0 1px var(--web-hair); }
.cta-runi { width: 9rem; height: auto; }
.cta-copy h2 { margin-top: 0; }
.cta-copy p { margin-top: .625rem; max-width: 34em; color: var(--porruni-ink-soft); text-wrap: pretty; }
.cta-copy .ctas { margin-top: 1.25rem; }

/* 404 */
.notfound { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 3rem; align-items: center; padding-top: 4rem; }
.notfound-runi { width: 100%; max-width: 18rem; height: auto; justify-self: center; }

/* Pie: los enlaces pueden pasar a otra línea. */
.foot-nav { flex-wrap: wrap; gap: .5rem 1rem; }

/* ───────── Mesa: estado de cada panel y disposición estática ───────── */
/* Etiqueta pequeña del estado real (src/beta.json) en cada panel de la ventana de ejemplo. */
/* Abajo a la izquierda: a la derecha la ilustración de Runi tapa el panel inferior. */
.pane-state { position: absolute; left: 14px; bottom: 9px; margin: 0; }
.state-mini { min-height: 1.25rem; padding: .0625rem .5rem; font-size: max(12px, .75rem); }
/* Sin JavaScript, o si la mesa no llega a montarse (p. ej. falta springs.js), se ve la ventana ya ordenada: filas
   visibles y sin recortes sueltos ni botón de ordenar. landing.js pone html[data-desk="live"] al montarla. */
html:not([data-desk="live"]) .desk .scrap,
html:not([data-desk="live"]) .desk .desk-bar,
html:not([data-desk="live"]) .desk .say,
html:not([data-desk="live"]) .desk .pane .empty,
html:not([data-desk="live"]) .desk .row .undo,
html:not([data-desk="live"]) .hero .scrawl { display: none; }
html:not([data-desk="live"]) .desk .row { visibility: visible; opacity: 1; transform: none; cursor: default; transition: none; }
html:not([data-desk="live"]) .desk { min-height: 0; padding: 1.5rem 0 4rem; }
html:not([data-desk="live"]) .desk .win { position: relative; inset: auto; width: 100%; height: auto; }
html:not([data-desk="live"]) .desk .pane { min-height: 9.5rem; padding-bottom: 2.5rem; }
html:not([data-desk="live"]) .desk .desk-runi { top: auto; bottom: 0; }
/* El conmutador de tema solo funciona con JavaScript (js/tema.js pone html.js). */
html:not(.js) [data-theme-toggle] { display: none; }

/* Leyenda de estados, estado en preguntas y fechas de los legales */
.state-legend { display: grid; gap: .5rem; margin-top: 1rem; max-width: 44rem; }
.state-legend li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .92rem; color: var(--porruni-ink-soft); }
.faq-item .faq-state { color: var(--porruni-ink); }
.faq-state .state-tag { margin-right: .25rem; vertical-align: .0625rem; }
.updated-note, .review-note { margin-top: 1rem; font-size: .9rem; font-weight: 600; color: var(--porruni-ink-soft); }

/* ───────── Tema oscuro: logotipo e icono del conmutador ───────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-day { display: none; }
  :root:not([data-theme="light"]) .logo-night { display: block; }
  :root:not([data-theme="light"]) .i-to-dark { display: none; }
  :root:not([data-theme="light"]) .i-to-light { display: block; }
  :root:not([data-theme="light"]) .calma-art { filter: brightness(.94); }
  :root:not([data-theme="light"]) .btn-ghost:hover { background: rgb(236 244 247 / .08); }
}
:root[data-theme="dark"] .logo-day { display: none; }
:root[data-theme="dark"] .logo-night { display: block; }
:root[data-theme="dark"] .i-to-dark { display: none; }
:root[data-theme="dark"] .i-to-light { display: block; }

/* ───────── Anchos intermedios ───────── */
@media (max-width: 1120px) {
  :root { --web-gutter: 40px; }
  .head-nav a { padding: 0 .625rem; }
  .feature-grid { gap: 2.5rem; }
}
@media (max-width: 899px) {
  :root { --web-gutter: 32px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding-top: 1.5rem; }
  h1 { font-size: 4rem; }
  .lede { max-width: 32em; }
  .scrawl .arrow { transform: rotate(60deg); }
  .desk { min-height: 620px; margin-top: .375rem; }
  .win { left: 0; width: 100%; top: 15%; height: 60%; }
  .desk-bar { left: 0; }
  .como-head { grid-template-columns: 1fr; gap: 1rem; }
  .como-sub { justify-self: start; }
  .cols { grid-template-columns: 1fr; gap: 2.25rem; }
  .col { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: .5rem; }
  .col .num { grid-row: 1 / span 2; font-size: 2.25rem; }
  .col h3 { margin-top: .125rem; }
  .col .vig { grid-column: 2; max-width: 26rem; }
  .feature { margin-top: 5rem; }
  .feature-grid { grid-template-columns: 1fr; gap: 2rem; }
  .flip .feature-copy { order: 0; }
  .card { max-width: 40rem; }
  .calma-copy { left: 2rem; top: 2rem; width: 52%; }
  .calma-scene::after { background: linear-gradient(90deg, rgb(251 243 228 / .94) 0, rgb(251 243 228 / .78) 38%, rgb(251 243 228 / 0) 62%); }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ───────── Teléfono ───────── */
@media (max-width: 599px) {
  :root { --web-gutter: 20px; }
  .head-row { min-height: 3.75rem; gap: .75rem; }
  .logo { height: 28px; }
  .hero { padding-top: .5rem; }
  .hero-copy { padding-top: 1rem; }
  /* El titular ya es grande: con texto ampliado no puede ser más ancho que la pantalla. */
  h1 { font-size: clamp(min(2.5rem, 11vw), 12.4vw, min(3.1rem, 13vw)); line-height: .96; }
  .lede { font-size: 1.03rem; margin-top: 1.25rem; }
  .ctas .btn { flex: 1 1 8rem; padding: 0 .875rem; }
  .scrawl { font-size: 1.05rem; }
  .desk { min-height: 680px; }
  .win { top: 18%; height: 54%; border-radius: 18px; }
  .win-bar { min-height: 38px; padding: 0 12px; gap: 8px; }
  .win-bar .crumb { display: none; }
  .pane { padding: 10px; }
  .pane h3 { font-size: 12.5px; gap: 6px; }
  .pane .empty { left: 10px; right: 10px; top: 38px; font-size: max(12px, .75rem); padding: 8px 6px; }
  .row { grid-template-columns: minmax(0, 1fr); padding: 6px 8px; }
  .row .ri, .row .undo { display: none; }
  .row b { font-size: 12px; }
  .desk-runi { width: 128px; right: -2%; top: 64%; }
  .say { right: 28%; top: 77%; font-size: 15px; }
  .desk-bar { gap: 10px; }
  .desk-bar .btn { padding: 0 1rem; }
  .desk-bar .status { font-size: .78rem; }
  .como { margin-top: 3.5rem; }
  h2 { font-size: 2.125rem; }
  .col { grid-template-columns: 3rem minmax(0, 1fr); }
  .col .vig { grid-column: 1 / -1; margin-top: 1rem; }
  .feature, .beta, .calma { margin-top: 4.5rem; }
  .card-bar { padding: .5rem .875rem; flex-wrap: wrap; row-gap: .25rem; }
  .card-bar .tag { margin-left: 0; white-space: normal; }
  .card-bar > b { flex: 1 1 auto; }
  .chat-asks, .chat-log { padding-left: .875rem; padding-right: .875rem; }
  .bubble { max-width: 94%; }
  .card-note { padding: .75rem .875rem .875rem; }
  .calma-art { aspect-ratio: 4 / 3; object-position: 70% 50%; }
  .calma-scene::after { display: none; }
  .calma-runi { left: 6%; bottom: 4%; width: 30%; }
  .calma-copy { position: static; width: auto; padding: 1.5rem 1.25rem 1.5rem; }
  .calma-copy .ctas .btn { flex: 1 1 8rem; }
  .site-foot { margin-top: 3.5rem; }
}
@media (max-width: 359px) {
  .head-actions .btn-ghost { padding: 0 .625rem; }
}

/* ───────── Páginas y cabecera en anchos intermedios y teléfono ───────── */
@media (max-width: 1079px) {
  /* La navegación pasa a una segunda fila: sigue visible en tableta y teléfono. */
  .head-row { flex-wrap: wrap; column-gap: 1rem; row-gap: 0; }
  .head-actions { margin-left: auto; }
  .head-nav { order: 3; flex: 1 0 100%; margin: 0 0 .375rem -.75rem; overflow-x: auto; scrollbar-width: none; }
  .head-nav::-webkit-scrollbar { display: none; }
  /* Pista visual de que hay más enlaces (sitio.js marca .more-left/.more-right). El foco con Tab desplaza la fila y
     scroll-padding deja el enlace enfocado fuera del degradado. */
  .head-nav { scroll-padding-inline: 2.5rem; }
  /* Margen interior para que el contorno de foco no quede recortado por el desplazamiento horizontal. */
  .head-nav { padding: 6px; margin: -6px 0 calc(.375rem - 6px) calc(-.75rem - 6px); }
  .head-nav.more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
  .head-nav.more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem); mask-image: linear-gradient(90deg, transparent, #000 2.5rem); }
  .head-nav.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
  .head-nav ul { gap: .125rem; }
  .head-nav a { min-height: 2.25rem; padding: 0 .75rem; font-size: .9rem; white-space: nowrap; }
  .steps, .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Con la navegación en dos filas, los saltos a anclas dejan sitio a la cabecera. */
  html { scroll-padding-top: 7.5rem; }
  .desk { scroll-margin-top: 7.5rem; }
}
@media (max-width: 899px) {
  .col > :not(.num) { grid-column: 2; }
  .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beta, .video-block { margin-top: 5rem; }
  .notfound { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 2rem; }
  .notfound-runi { order: -1; max-width: 11rem; justify-self: start; }
  .cta-runi { width: 7rem; }
}
@media (max-width: 599px) {
  /* En el teléfono la cabecera conserva «Entrar»; cada página trae su propio «Crear cuenta gratis». */
  .head-cta { display: none; }
  .head-nav { margin-left: calc(-.5rem - 6px); }
  .pane-state { left: 10px; bottom: 7px; }
  .head-nav a { padding: 0 .5rem; font-size: .84rem; }
  .col .vig { grid-column: 1 / -1; }
  .status-grid, .steps { grid-template-columns: 1fr; }
  .beta, .video-block { margin-top: 4.5rem; }
  .page { padding-top: 1.5rem; }
  .page-section { margin-top: 2.75rem; }
  .legal-data > div { grid-template-columns: 1fr; }
  .cta-band { margin-top: 3.5rem; }
  .cta-card { grid-template-columns: 1fr; gap: 1rem; padding: 1.375rem 1.125rem; border-radius: 22px; }
  .cta-runi { width: 5.5rem; }
  .subjects-box { padding: 1.125rem 1rem 1.25rem; }
  .video { border-radius: 18px; }
}

/* ───────── Preferencias del sistema ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  /* Sin desplazamientos: guardar o devolver un recorte es un fundido corto. */
  .row { transform: none; transition: opacity .18s ease, visibility 0s linear .18s !important; }
  .row.in { transition: opacity .18s ease !important; }
  .scrap { transition: opacity .18s ease !important; }
  .btn:active, .chip:active, .icon-btn:active, .row:active, .scrap.pressed .face { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-head::before { background: var(--web-page); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --web-hair: rgb(43 32 64 / .4); --web-sec-line: #26142e; }
  .btn-sec, .chip { box-shadow: inset 0 0 0 1.5px var(--porruni-ink); }
  .card, .win, .status-card, .cta-card { box-shadow: 0 0 0 2px var(--porruni-ink); }
}
@media (forced-colors: active) {
  .btn, .chip, .row { border: 1px solid ButtonText; }
}