/* ==========================================================================
   Zaimu — Daifukuchō (大福帳) design language
   Papel washi · tinta sumi · bermellón shu (朱) del sello hanko · añil ai (藍)
   Un único acento (shu). Sin degradados, sin sombras pesadas: papel y tinta.
   ========================================================================== */

:root {
  --washi: #F4EEE1;
  --washi-2: #EBE3D1;
  --paper: #FBF8F0;
  --line: #D8CDB5;
  --sumi: #1C1916;
  --sumi-2: #4B453B;
  --sumi-3: #645C4F;
  --shu: #C23B22;
  --shu-ink: #A62F18;
  --shu-deep: #8E2411;
  --on-shu: #FBF8F0;
  --ai: #1F3A5F;
  --ai-deep: #13233B;
  --on-ai: #EDE6D6;
  --matcha: #5E7E52;
  --kaki: #BC6B43;
  --aizome: #3F6690;
  --murasaki: #7E5C86;

  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --r: 4px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' stroke='%23EDE6D6' stroke-opacity='.09' stroke-width='1.1'%3E%3Ccircle cx='28' cy='28' r='26'/%3E%3Ccircle cx='28' cy='28' r='19'/%3E%3Ccircle cx='28' cy='28' r='12'/%3E%3Ccircle cx='28' cy='28' r='5'/%3E%3Ccircle cx='0' cy='14' r='26'/%3E%3Ccircle cx='0' cy='14' r='19'/%3E%3Ccircle cx='0' cy='14' r='12'/%3E%3Ccircle cx='0' cy='14' r='5'/%3E%3Ccircle cx='56' cy='14' r='26'/%3E%3Ccircle cx='56' cy='14' r='19'/%3E%3Ccircle cx='56' cy='14' r='12'/%3E%3Ccircle cx='56' cy='14' r='5'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}

:root:not([data-theme="light"]) { }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --washi: #17140F;
    --washi-2: #211D16;
    --paper: #1D1913;
    --line: #3A3328;
    --sumi: #EDE6D6;
    --sumi-2: #C4BBA6;
    --sumi-3: #9A917E;
    --shu: #D9503A;
    --shu-ink: #EE7A63;
    --shu-deep: #F08F7B;
    --on-shu: #17140F;
    --ai: #0F1D31;
    --ai-deep: #0B1626;
    --matcha: #7FA06F;
    --kaki: #D98B6A;
    --aizome: #6C9BC4;
    --murasaki: #A98BB2;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --washi: #17140F; --washi-2: #211D16; --paper: #1D1913; --line: #3A3328;
  --sumi: #EDE6D6; --sumi-2: #C4BBA6; --sumi-3: #9A917E;
  --shu: #D9503A; --shu-ink: #EE7A63; --shu-deep: #F08F7B; --on-shu: #17140F;
  --ai: #0F1D31; --ai-deep: #0B1626;
  --matcha: #7FA06F; --kaki: #D98B6A; --aizome: #6C9BC4; --murasaki: #A98BB2;
  color-scheme: dark;
}

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}
body::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); opacity: .22; mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; opacity: .07; } }
:root[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .07; }
body > * { position: relative; z-index: 1; }
img, svg { max-width: 100%; display: block; }
a { color: var(--shu-ink); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--shu-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--shu); color: var(--on-shu); }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--sumi); color: var(--washi); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[lang="ja"] { font-family: var(--font-display); font-weight: 600; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.18; letter-spacing: -.005em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.5rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.8125rem, 3.6vw, 2.625rem); }
h3 { font-size: clamp(1.375rem, 2vw, 1.5rem); }
p { margin: 0 0 1.1em; text-wrap: pretty; }
.lede { font-size: clamp(1.0625rem, 1.6vw, 1.375rem); color: var(--sumi-2); line-height: 1.65; max-width: 36em; }
.kicker { display: inline-flex; align-items: center; gap: .6em; font-size: 0.875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--shu-ink); font-weight: 700; margin-bottom: 1.2rem; }
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.kicker [lang="ja"] { font-size: 1.25em; line-height: 1; white-space: nowrap; flex: none; }
.kicker { flex-wrap: wrap; }
.method__side p.kicker, .sec-head p.kicker, .final p.kicker { color: var(--shu-ink); }
.kicker [lang="ja"] { letter-spacing: .1em; text-transform: none; }

/* ---- Hanko (sello) ------------------------------------------------------- */
.hanko {
  --s: 56px;
  display: inline-grid; place-items: center;
  width: var(--s); height: var(--s);
  background: var(--shu); color: var(--on-shu);
  font-family: var(--font-display); font-weight: 800; font-size: calc(var(--s) * .62); line-height: 1;
  border-radius: 6px;
  box-shadow: inset 0 0 0 calc(var(--s) * .05) var(--shu), inset 0 0 0 calc(var(--s) * .085) var(--on-shu);
  transform: rotate(-5deg);
  filter: url(#rough);
  flex: none;
}
.hanko--sm { --s: 30px; border-radius: 4px; }
.hanko--lg { --s: 92px; }
.hanko--xl { --s: 124px; }
.hanko--outline { background: transparent; color: var(--shu); box-shadow: inset 0 0 0 calc(var(--s) * .06) var(--shu); }
.stamp { opacity: 0; transform: scale(1.7) rotate(-14deg); }
.stamp.in { animation: stamp .55s var(--ease) .15s forwards; }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.7) rotate(-14deg); } 55% { opacity: 1; transform: scale(.94) rotate(-4deg); } 100% { opacity: .96; transform: scale(1) rotate(-5deg); } }

/* ---- Nav ----------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--washi) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; }
.brand { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--sumi); font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em; }
.brand:hover { color: var(--sumi); }
.brand svg { width: 32px; height: 32px; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.nav__links a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; color: var(--sumi-2); text-decoration: none; font-size: 1rem; font-weight: 500; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--shu-ink); }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; font-size: 0.875rem; }
.lang a { padding: 4px 11px; color: var(--sumi-3); }
.lang a[aria-current="true"] { background: var(--sumi); color: var(--washi); }
.menu { display: none; }
@media (max-width: 880px) {
  .nav__links { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; padding: 10px 14px; border: 1px solid var(--line); border-radius: 99px; font-size: 1rem; font-weight: 600; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu__panel { position: absolute; right: 0; top: 52px; width: min(86vw, 320px); background: var(--paper); border: 1px solid var(--line); padding: 14px; display: grid; gap: 4px; box-shadow: 0 18px 40px -20px rgba(0,0,0,.35); }
  .menu__panel a { padding: 10px 8px; color: var(--sumi); text-decoration: none; border-bottom: 1px solid var(--line); }
  .menu__panel a:last-child { border: 0; }
}

/* ---- Botones ------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: 0 28px; border-radius: var(--r); background: var(--shu); color: var(--on-shu); font-weight: 700; font-size: 1.0625rem; text-decoration: none; border: 0; cursor: pointer; font-family: var(--font-body); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 1px 0 var(--shu-deep); transition: transform .2s var(--ease), background .2s; }
.btn:hover { background: var(--shu-deep); color: var(--on-shu); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--sumi); box-shadow: inset 0 0 0 1.5px var(--sumi); }
.btn--ghost:hover { background: var(--sumi); color: var(--washi); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 1rem; }
.btn svg { width: 18px; height: 18px; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding: clamp(40px, 7vw, 96px) 0 clamp(36px, 5vw, 72px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.hero h1 { margin-bottom: .42em; }
.hero h1 em { font-style: normal; color: var(--shu-ink); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }
.hero__art { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; }
.enso { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--sumi); }
.enso .ink { fill: currentColor; }
.enso .draw { fill: none; stroke: #fff; stroke-width: 60; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.enso.go .draw { animation: draw 1.9s var(--ease) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero__kanji { position: absolute; inset: 0; display: grid; place-items: center; }
.hero__kanji span { writing-mode: vertical-rl; text-orientation: upright; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.625rem, 6vw, 4.5rem); letter-spacing: .14em; color: var(--sumi); line-height: 1; white-space: nowrap; transform: translateX(.07em); }
.hero__art .hanko { position: absolute; right: 6%; bottom: 9%; }
.hero__caption { position: absolute; left: 0; top: 4%; writing-mode: vertical-rl; font-size: 0.875rem; letter-spacing: .24em; color: var(--sumi-3); }

.strip { border-block: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 70%, transparent); }
.strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.strip li { padding: 20px 18px; font-size: 1rem; color: var(--sumi-2); display: flex; gap: 12px; align-items: baseline; border-left: 1px solid var(--line); }
.strip li:first-child { border-left: 0; }
.strip b { font-family: var(--font-display); color: var(--shu-ink); font-size: 1.0625rem; }
@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero__art { max-width: 340px; order: -1; }
  .strip ul { grid-template-columns: 1fr 1fr; }
  .strip li:nth-child(3) { border-left: 0; }
  .strip li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---- Secciones ----------------------------------------------------------- */
section { padding: clamp(56px, 9vw, 120px) 0; }
.sec-head { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 56px); }
.sec-head .num { font-family: var(--font-display); color: var(--shu-ink); font-size: 1.5rem; margin-right: .4em; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal, .no-js .stamp { opacity: 1; transform: none; }
.no-js .enso .draw { stroke-dashoffset: 0; }

/* ---- Libro de cuentas (ledger) ------------------------------------------- */
.ledger { position: relative; background: var(--paper); border: 1px solid var(--line); padding: 0 clamp(20px, 3.4vw, 40px) 48px clamp(48px, 6vw, 72px); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, color-mix(in srgb, var(--line) 80%, transparent) 47px, color-mix(in srgb, var(--line) 80%, transparent) 48px); }
.ledger::before { content: ""; position: absolute; left: clamp(20px, 3vw, 30px); top: 14px; bottom: 14px; width: 0; border-left: 2px dashed var(--shu); opacity: .85; }
.ledger::after { content: ""; position: absolute; left: clamp(28px, 4vw, 40px); top: 0; bottom: 0; border-left: 1px solid color-mix(in srgb, var(--shu) 35%, transparent); }
.ledger__title { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: .14em; color: var(--sumi-3); height: 48px; line-height: 46px; margin: 0; display: flex; justify-content: space-between; gap: 12px; }
.q { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; padding: 0; min-height: 96px; align-items: start; }
.q__n { font-family: var(--font-display); font-size: 2.1875rem; color: var(--shu-ink); height: 48px; display: flex; align-items: center; line-height: 1; font-weight: 700; }
.q h3 { margin: 0; font-size: 1.375rem; min-height: 48px; line-height: 24px; display: flex; align-items: center; }
@media (max-width: 600px) { .ledger { padding-left: 46px; padding-right: 14px; } .q { grid-template-columns: 34px 1fr; column-gap: 6px; } .q h3 { font-size: 1.0625rem; } .q__n { font-size: 1.5rem; } }
.q p { margin: 0; color: var(--sumi-2); font-size: 1rem; line-height: 24px; min-height: 48px; grid-column: 2; }
.method { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
@media (max-width: 880px) { .method { grid-template-columns: 1fr; } }
.method__side p { color: var(--sumi-2); }
.method__side .stat { display: flex; gap: 18px; align-items: center; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.method__side .stat strong { font-family: var(--font-display); font-size: 2.1875rem; color: var(--shu-ink); line-height: 1; }
.method__side .stat span { font-size: 1rem; color: var(--sumi-2); line-height: 1.45; }

/* ---- Calculadora --------------------------------------------------------- */
.band { background: var(--washi-2); border-block: 1px solid var(--line); }
.calc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
@media (max-width: 880px) { .calc { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label, .field .lbl { font-size: 0.875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sumi-3); }
.input { width: 100%; min-height: 54px; padding: 0 16px; border: 1.5px solid var(--sumi-3); background: var(--paper); color: var(--sumi); font: 600 1.375rem var(--font-body); border-radius: var(--r); font-variant-numeric: tabular-nums; }
.input:focus { outline: none; border-color: var(--shu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--shu) 22%, transparent); }
.input--sm { min-height: 44px; font-size: 1.0625rem; padding: 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; min-width: 56px; padding: 0 14px; border: 1.5px solid var(--line); background: transparent; color: var(--sumi-2); border-radius: 99px; font: 600 .9rem var(--font-body); cursor: pointer; }
.chip:hover { border-color: var(--sumi-3); }
.chip[aria-pressed="true"] { background: var(--sumi); color: var(--washi); border-color: var(--sumi); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sumi-3) 50%), linear-gradient(135deg, var(--sumi-3) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.result { background: var(--paper); border: 1px solid var(--line); padding: clamp(20px, 3vw, 34px); position: relative; }
.result__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 2px solid var(--sumi); padding-bottom: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.result__top small { display: block; font-size: 0.875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sumi-3); font-weight: 700; }
.result__big { font-family: var(--font-display); font-size: clamp(2.1875rem, 5vw, 3.5rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.bar-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.bar-row:last-child { border-bottom: 0; }
.bar-row .kj { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--c); line-height: 1; text-align: center; }
.bar-row .nm { font-weight: 700; font-size: 1rem; display: block; line-height: 1.25; }
.bar-row .pc { font-size: 0.875rem; color: var(--sumi-3); }
.bar-row .track { height: 8px; background: var(--washi-2); margin-top: 6px; border-radius: 99px; overflow: hidden; }
.bar-row .fill { display: block; height: 100%; width: 100%; background: var(--c); border-radius: 99px; transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--ease); }
.bar-row .amt { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.0625rem; text-align: right; }
.s { --c: var(--matcha); } .w { --c: var(--kaki); } .c { --c: var(--aizome); } .e { --c: var(--murasaki); }
.note { font-size: 1rem; color: var(--sumi-3); }
.warn { color: var(--shu-ink); font-weight: 700; font-size: 1rem; min-height: 1.4em; }
.split { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.split .field { margin: 0; }
.split .input { text-align: center; padding: 0 4px; }
.split label { font-size: 0.875rem; }
.weeks { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; font-size: 1rem; }
.weeks th, .weeks td { padding: 10px 8px; text-align: right; border-bottom: 1px solid var(--line); }
.weeks th:first-child, .weeks td:first-child { text-align: left; }
.weeks thead th { font-size: 0.875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sumi-3); border-bottom: 2px solid var(--sumi); }
.weeks tfoot td { font-weight: 800; border-top: 2px solid var(--sumi); border-bottom: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Los cuatro pilares -------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 1.6rem 0 2rem; }
@media (max-width: 880px) { .pillars { grid-template-columns: 1fr 1fr; } }
.pcard { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--c); padding: 18px 16px 16px; }
.pcard .kj { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.1875rem; color: var(--c); line-height: 1.1; margin-bottom: 8px; }
.pcard b { display: block; font-family: var(--font-display); font-size: 1.0625rem; margin-bottom: 4px; }
.pcard p { margin: 0; font-size: 1rem; color: var(--sumi-2); line-height: 1.5; }

/* ---- Rituales + teléfono ------------------------------------------------- */
.rituals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(28px, 6vw, 96px); align-items: center; }
@media (max-width: 980px) { .rituals { grid-template-columns: 1fr; } }
.ritual { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start; padding: 26px 0; border-top: 1px solid var(--line); }
.ritual:first-of-type { border-top: 2px solid var(--sumi); }
.ritual h3 { margin-bottom: .3em; }
.ritual p { margin: 0; color: var(--sumi-2); }
.soon { margin-top: 2.2rem; padding: 22px 24px; border: 1.5px dashed var(--sumi-3); background: color-mix(in srgb, var(--paper) 60%, transparent); }
.soon h4 { font-size: 1.0625rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-body); color: var(--shu-ink); margin-bottom: 10px; }
.soon ul { margin: 0; padding-left: 1.1em; color: var(--sumi-2); }
.soon li { margin-bottom: 4px; }

.phone { width: min(100%, 340px); margin-inline: auto; border-radius: 40px; background: var(--sumi); padding: 10px; box-shadow: 0 40px 70px -40px rgba(28,25,22,.55); transform: rotate(1.5deg); }
.phone__screen { background: var(--washi); border-radius: 31px; overflow: hidden; padding: 20px 18px 22px; min-height: 600px; position: relative; color: var(--sumi); }
.phone__screen::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .18; mix-blend-mode: multiply; pointer-events: none; }
.phone__bar { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--sumi-3); margin-bottom: 14px; font-weight: 700; }
.phone h4 { font-size: 1.375rem; margin: 0 0 2px; }
.phone .sub { font-size: 0.875rem; color: var(--sumi-3); margin-bottom: 14px; }
.ring { position: relative; width: 168px; margin: 6px auto 16px; }
.ring svg { width: 168px; height: 168px; transform: rotate(-90deg); }
.ring .c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring .c b { font-family: var(--font-display); font-size: 1.8125rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ring .c small { font-size: 0.875rem; color: var(--sumi-3); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin-top: 4px; }
.mini { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.875rem; }
.mini .kj { font-family: var(--font-display); font-weight: 800; color: var(--c); font-size: 1.0625rem; text-align: center; }
.mini .t { height: 5px; border-radius: 9px; background: var(--washi-2); margin-top: 4px; overflow: hidden; }
.mini .t i { display: block; height: 100%; background: var(--c); }
.mini span.a { font-variant-numeric: tabular-nums; font-weight: 700; }
.waitcard { margin-top: 14px; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--shu); padding: 12px 12px 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-size: 0.875rem; }
.waitcard b { display: block; font-size: 1rem; }
.waitcard small { color: var(--sumi-3); }
.disclaimer { text-align: center; font-size: 0.875rem; color: var(--sumi-3); margin-top: 18px; }

/* ---- Historia (sección índigo) ------------------------------------------- */
.story { background-color: var(--ai); background-image: var(--seigaiha); color: var(--on-ai); position: relative; overflow: hidden; }
.story .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 6vw, 96px); align-items: start; }
.story .kicker { color: #F08F7B; }
.story h2 { color: var(--on-ai); }
.story p { color: color-mix(in srgb, var(--on-ai) 86%, transparent); max-width: 40em; }
.story .year { writing-mode: vertical-rl; text-orientation: upright; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.625rem, 6.4vw, 4.5rem); letter-spacing: .08em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--on-ai) 70%, transparent); line-height: 1; }
.story blockquote { margin: 2rem 0 0; padding: 0 0 0 22px; border-left: 3px solid #E0583F; font-family: var(--font-display); font-size: clamp(1.375rem, 2.2vw, 1.5rem); line-height: 1.4; color: var(--on-ai); }
@media (max-width: 760px) { .story .wrap { grid-template-columns: 1fr; } .story .year { writing-mode: horizontal-tb; font-size: 4rem; letter-spacing: .04em; } }

/* ---- Comparativa --------------------------------------------------------- */
.tbl, .compare { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); font-size: 1rem; }
.tbl th, .tbl td, .compare th, .compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.5; }
.tbl th, .compare thead th { font-family: var(--font-display); font-size: 1.0625rem; background: var(--washi-2); border-bottom: 2px solid var(--sumi); }
.compare td:first-child, .compare th:first-child { font-weight: 700; }
.compare .us { background: color-mix(in srgb, var(--shu) 7%, var(--paper)); }
.compare thead .us { background: var(--shu); color: var(--on-shu); }
.compare a { font-weight: 700; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); background: var(--paper); }
.vs > div { padding: clamp(20px, 3vw, 36px); }
.vs > div + div { border-left: 1px solid var(--line); background: color-mix(in srgb, var(--shu) 6%, var(--paper)); }
.vs h3 { font-size: 1.375rem; padding-bottom: 12px; border-bottom: 2px solid var(--sumi); }
.vs ul { list-style: none; margin: 0; padding: 0; }
.vs li { padding: 12px 0 12px 28px; border-bottom: 1px solid var(--line); position: relative; line-height: 1.5; }
.vs li:last-child { border: 0; }
.vs li::before { content: "×"; position: absolute; left: 0; color: var(--sumi-3); font-weight: 800; }
.vs > div + div li::before { content: "○"; color: var(--shu-ink); }
@media (max-width: 760px) { .vs { grid-template-columns: 1fr; } .vs > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* ---- FAQ ----------------------------------------------------------------- */
.faq { max-width: 52rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--shu-ink); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--sumi-2); max-width: 44em; }

/* ---- Banda final + formulario ------------------------------------------- */
.final { text-align: center; }
.final .wrap { max-width: 760px; }
.final .hanko { margin-bottom: 20px; }
.waitlist { display: grid; gap: 14px; max-width: 520px; margin: 28px auto 0; text-align: left; }
.waitlist .row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.waitlist .input { font-size: 1.0625rem; font-weight: 500; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; color: var(--sumi-2); line-height: 1.45; }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--shu); flex: none; }
.hp { position: absolute; left: -9999px; }
.form-msg { min-height: 1.5em; font-weight: 700; font-size: 1rem; margin: 0; }
.form-msg.ok { color: var(--matcha); }
.form-msg.err { color: var(--shu-ink); }
@media (max-width: 560px) { .waitlist .row { grid-template-columns: 1fr; } }

/* ---- Footer / colofón ---------------------------------------------------- */
.footer { background: var(--ai-deep); color: var(--on-ai); padding: clamp(48px, 7vw, 88px) 0 32px; }
.footer a { color: color-mix(in srgb, var(--on-ai) 86%, transparent); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; }
.footer h4 { font-family: var(--font-body); font-size: 0.875rem; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--on-ai) 60%, transparent); margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 1rem; }
.footer .brand { color: var(--on-ai); }
.footer .tag { color: color-mix(in srgb, var(--on-ai) 72%, transparent); max-width: 22em; margin-top: 14px; font-size: 1rem; line-height: 1.6; }
.colophon { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(237,230,214,.18); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.875rem; color: color-mix(in srgb, var(--on-ai) 62%, transparent); }
.colophon .okuzuke { display: flex; gap: 12px; align-items: center; }
@media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__grid > :first-child { grid-column: 1 / -1; } }

/* ---- Artículos ----------------------------------------------------------- */
.page-head { padding: clamp(36px, 6vw, 80px) 0 clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.page-head .wrap { max-width: 860px; }
.page-head h1 { font-size: clamp(2.1875rem, 5vw, 3.5rem); }
.byline { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--sumi-3); font-size: 1rem; margin-top: 1.2rem; }
.byline span + span::before { content: "·"; margin-right: 14px; }
.article { padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 7vw, 96px); }
.article .wrap { max-width: 860px; }
.article p, .article li, .article h2, .article h3 { max-width: 36em; }
.article h2 { margin-top: 2.2em; padding-top: .2em; font-size: clamp(1.5rem, 3vw, 2.1875rem); }
.article h3 { margin-top: 1.8em; }
.article p, .article li { color: var(--sumi); }
.article ol, .article ul { padding-left: 1.3em; }
.article li { margin-bottom: .5em; }
.article li::marker { color: var(--shu-ink); font-weight: 700; }
.article blockquote { margin: 2em 0; padding: 22px 26px; border-left: 4px solid var(--shu); background: var(--paper); font-family: var(--font-display); font-size: 1.375rem; line-height: 1.45; }
.article hr { border: 0; border-top: 1px solid var(--line); margin: 3em 0; }
.article .tbl { margin: 1.6em 0; }
.cta { margin: 3rem 0; padding: clamp(24px, 4vw, 40px); background: var(--ai); color: var(--on-ai); background-image: var(--seigaiha); position: relative; }
.cta h3 { color: var(--on-ai); margin-top: 0; }
.cta p { color: color-mix(in srgb, var(--on-ai) 86%, transparent); max-width: 36em; }
.cta .btn { background: #E0583F; color: #17140F; }
.cta .btn:hover { background: #F08F7B; color: #17140F; }
.related { margin-top: 3.5rem; }
.related h2 { margin-top: 0; font-size: 1.5rem; }
.related a { display: block; padding: 16px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--sumi); font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; }
.related a:last-child { border-bottom: 1px solid var(--line); }
.related a span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 1rem; color: var(--sumi-3); margin-top: 2px; }
.related a:hover { color: var(--shu-ink); }
.toc { margin: 0 0 2.4rem; padding: 18px 22px; border: 1px solid var(--line); background: var(--paper); font-size: 1rem; }
.toc b { display: block; font-size: 0.875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sumi-3); margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin-bottom: .2em; }
.pillars + p { margin-top: 0; }

/* ---- Imprimir hoja kakebo ------------------------------------------------ */
.sheet { display: none; }
@media print {
  body::before, .nav, .footer, .skip, .no-print, .page-head, .article, .print-area .calc { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  section { padding: 0 !important; }
  .band { background: none; border: 0; }
  .sheet { display: block !important; }
  .sheet .sheet-title { font: 700 24pt var(--font-display); margin: 0 0 6pt; }
  .sheet p { font-size: 11pt; margin: 0 0 8pt; }
  .sheet table { width: 100%; border-collapse: collapse; margin-top: 8pt; font-size: 11pt; font-variant-numeric: tabular-nums; }
  .sheet th, .sheet td { border: 1px solid #000; padding: 9pt 8pt; text-align: right; }
  .sheet th:first-child, .sheet td:first-child { text-align: left; }
  .sheet thead th { font-size: 9pt; letter-spacing: .08em; text-transform: uppercase; }
  .sheet .reflect { margin-top: 18pt; display: grid; gap: 4pt; }
  .sheet .reflect div { border-bottom: 1px solid #000; min-height: 56pt; font-size: 10pt; padding-top: 2pt; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .reveal, .stamp { opacity: 1; transform: none; }
  .enso .draw { stroke-dashoffset: 0; }
}

mark { background: color-mix(in srgb, #F2C94C 45%, transparent); color: inherit; padding: 0 .2em; border-radius: 2px; }
.ledger__title span:first-child, .hero__caption { font-family: var(--font-display); font-weight: 700; }
.legal h2 { font-size: clamp(1.375rem, 2.4vw, 1.5rem); margin-top: 2em; }
.legal h3 { font-size: 1.0625rem; }

.nav__links a.btn { color: var(--on-shu); }
.nav__links a.btn:hover { color: var(--on-shu); }
.page-head .wrap, .article .wrap { max-width: var(--wrap); }
.page-head .wrap > * { max-width: 46rem; }
.article .wrap > :not(.table-scroll):not(.compare):not(.sheet):not(.pillars) { max-width: 38rem; }
.article .wrap > .table-scroll, .article .wrap > .pillars { max-width: 100%; }
.article .wrap > .cta, .article .wrap > .related { max-width: 46rem; }
body { font-size: 1.0625rem; }


/* ---- Auditoría de diseño (oct 2026): foco, estados, objetivos táctiles, sello ---- */
.story :focus-visible, .footer :focus-visible, .final :focus-visible { outline-color: #F08F7B; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"], .chip:disabled { opacity: .55; cursor: not-allowed; }
.footer ul { gap: 0; }
.footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
.link-block { display: inline-flex; align-items: center; min-height: 44px; }
input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--shu); }
.check { align-items: flex-start; gap: 12px; }
.hanko--month { font-size: calc(var(--s) * .4); letter-spacing: .02em; line-height: 1.05; text-align: center; }
.story__seal { display: flex; align-items: center; gap: 24px; margin-top: 2.5rem; }
.story__seal p { margin: 0; font-size: .9375rem; max-width: 24em; }
.story__seal .stamp.in { animation-duration: .7s; animation-delay: .35s; }
.phone__shot { display: block; width: 100%; height: auto; border-radius: 31px; background: var(--washi); }
.phone--shot { padding: 8px; }
@media (prefers-reduced-motion: reduce) { .bar-row .fill { transition: none; } .stamp { opacity: .96; transform: rotate(-5deg); animation: none !important; } }

.lang a, .lang button { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.btn--sm { min-height: 44px; }
.colophon a, .footer a { display: inline-flex; align-items: center; min-height: 44px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, .lede { text-wrap: balance; }
p, li { text-wrap: pretty; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--shu-ink); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--shu-ink); outline-offset: 1px; }
.footer a:focus-visible, .cta a:focus-visible { outline-color: var(--on-ai); }

/* Accesibilidad (auditoría 2026-11): foco visible también en .input, zonas táctiles de 44px y enlaces subrayados en texto corrido */
.input:focus-visible { outline: 2px solid var(--shu-ink); outline-offset: 2px; }
.check { min-height: 44px; align-items: center; }
.check a { display: inline-block; padding: 12px 0; text-decoration: underline; }
.check input { min-width: 24px; min-height: 24px; }
p a, li a:not([class]), .check a { text-decoration: underline; text-decoration-thickness: 1px; }