@font-face {
  font-family: "Comfortaa";
  src: url("/fonts/comfortaa.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}


/* =========================================================================
   1. TOKENS
   Los colores de tema se registran con @property para que INTERPOLEN al
   cambiar de sección (el efecto de transición oscuro ↔ beige).
   ========================================================================= */
@property --bg        { syntax: '<color>'; inherits: true; initial-value: #171721; }
@property --surface   { syntax: '<color>'; inherits: true; initial-value: #1e1e2a; }
@property --surface-2 { syntax: '<color>'; inherits: true; initial-value: #272735; }
@property --text      { syntax: '<color>'; inherits: true; initial-value: #ededf3; }
@property --muted     { syntax: '<color>'; inherits: true; initial-value: #c3c3cc; }
@property --subtle    { syntax: '<color>'; inherits: true; initial-value: #70707d; }
@property --line      { syntax: '<color>'; inherits: true; initial-value: rgba(175,178,206,.2); }
@property --ghost     { syntax: '<color>'; inherits: true; initial-value: rgba(175,178,206,.16); }

:root {
  --accent: #5a55c4;
  --accent-hover: #4b47a8;
  --accent-soft: #dcd8f2;
  --pink: #fc92b4;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;

  --w-light: 360;   /* párrafos lead */
  --w-regular: 400;
  --w-medium: 420;  /* botones, nav */
  --w-display: 480; /* titulares: nunca bold */

  --fs-display: clamp(2.5rem, 1.7rem + 2.6vw, 4rem);
  --fs-h2: clamp(1.875rem, 1.35rem + 1.7vw, 2.75rem);
  --fs-h3: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;

  --container: 1120px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(88px, 11vw, 168px);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-float: 0 0 3px rgba(28,28,35,.09), 0 6px 10px rgba(28,28,35,.04), 0 10px 16px rgba(28,28,35,.02), 0 24px 48px rgba(28,28,35,.06);
  --ease-theme: cubic-bezier(0, 0, .6, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Paletas por tema. El wrapper .page recibe data-active-theme vía JS. */
.page[data-active-theme="dark"] {
  --bg: #171721; --surface: #1e1e2a; --surface-2: #272735;
  --text: #ededf3; --muted: #c3c3cc; --subtle: #8a8a97;
  --line: rgba(175,178,206,.2); --ghost: rgba(175,178,206,.16);
}
.page[data-active-theme="beige"] {
  --bg: #f6f5f2; --surface: #edebe6; --surface-2: #e4e1da;
  --text: #2a2924; --muted: #5f5d56; --subtle: #8d8a82;
  --line: rgba(42,41,36,.12); --ghost: rgba(42,41,36,.06);
}
.page[data-active-theme="light"] {
  --bg: #fcfcfa; --surface: #f4f5f9; --surface-2: #e9ebf3;
  --text: #1c1c23; --muted: #55555f; --subtle: #8b8b96;
  --line: rgba(28,28,35,.1); --ghost: rgba(28,28,35,.05);
}

/* =========================================================================
   2. BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.5; font-weight: var(--w-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }

.page {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  transition: --bg .5s var(--ease-theme), --surface .5s var(--ease-theme), --surface-2 .5s var(--ease-theme),
              --text .5s var(--ease-theme), --muted .5s var(--ease-theme), --subtle .5s var(--ease-theme),
              --line .5s var(--ease-theme), --ghost .5s var(--ease-theme);
}

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); margin-inline: auto; }
.section { padding-block: var(--section-y); }

.display { font-size: var(--fs-display); font-weight: var(--w-display); line-height: 1.08; letter-spacing: -.005em; }
.h2 { font-size: var(--fs-h2); font-weight: var(--w-display); line-height: 1.14; letter-spacing: .005em; text-wrap: balance; }
.h3 { font-size: var(--fs-h3); font-weight: var(--w-display); line-height: 1.2; letter-spacing: .01em; }
.lead { font-size: var(--fs-lead); font-weight: var(--w-light); line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); letter-spacing: .01em; }
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.01em; }
sup { font-size: .55em; line-height: 0; vertical-align: super; color: var(--subtle); }

/* Sukkiri: atmosphere, learning and product. */
:root{--accent:#5a55c4;--accent-hover:#4b47a8}body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #8292ff;outline-offset:5px}[hidden]{display:none!important}.skip{position:fixed;top:-100px;left:20px;z-index:100;background:#fff;color:#171721;padding:12px}.skip:focus{top:10px}.section{padding-block:110px;scroll-margin-top:90px}.eyebrow{font-size:11px;letter-spacing:.15em;font-weight:500;margin-bottom:24px}h1{font-size:clamp(42px,4.6vw,64px);font-weight:480;letter-spacing:-.045em;line-height:1.08}h2{font-size:clamp(30px,3.4vw,43px);font-weight:480;letter-spacing:-.035em;line-height:1.16}h3{font-weight:480;letter-spacing:-.02em}.lead{font-size:18px;line-height:1.65;font-weight:360;color:var(--muted)}.button{display:inline-flex;justify-content:center;align-items:center;gap:22px;min-height:50px;padding:0 24px;border-radius:99px;background:var(--accent);color:#fff;font-size:14px;font-weight:420;transition:transform .2s}.button:hover{background:var(--accent-hover);transform:translateY(-2px)}.button.small{min-height:40px;padding:0 19px}.navigation{position:sticky;top:0;z-index:20;margin-bottom:-80px;height:80px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(18px)}.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{display:flex;align-items:center;gap:10px;font-size:29px;letter-spacing:-.06em;font-weight:480}.brand-symbol{font-family:Georgia,serif;font-style:italic;border:1px solid currentColor;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:25px;line-height:1}.navigation nav{display:flex;gap:30px;font-size:13px}.navigation nav a{padding:12px 0}.navigation nav a:hover{opacity:.7}.menu-toggle{display:none}.hero{position:relative;overflow:hidden;min-height:820px;padding-top:170px;color:#ededf3}.hero-layout{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}.hero-copy{padding-bottom:65px}.hero-copy .eyebrow{color:#d6d5df}.hero h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:#e3d1bc}.hero .lead{max-width:420px;margin-top:26px;color:#dbd9e3;font-size:17px}.actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}.glass{background:rgba(175,178,206,.15);border:1px solid rgba(175,178,206,.36);backdrop-filter:blur(20px);gap:15px}.glass:hover{background:rgba(175,178,206,.25)}.hero-note{font-size:12px;color:#d0cdda;margin-top:19px}.landscape{position:absolute;inset:0;background:radial-gradient(ellipse at 68% 47%,#99929855,transparent 51%),linear-gradient(165deg,#171721 20%,#393c4e 59%,#898087 86%,#777074)}.sun{position:absolute;width:310px;height:310px;border-radius:50%;right:21%;top:35%;background:#c8b9a540;filter:blur(70px)}.ridge{position:absolute;inset:auto -5% 0;height:40%;clip-path:polygon(0 67%,10% 51%,22% 67%,42% 16%,57% 44%,66% 33%,85% 67%,100% 24%,100% 100%,0 100%);background:#252b36}.ridge-back{bottom:5%;opacity:.6;background:#454655;transform:scaleX(-1)}.ridge-front{opacity:.8}.landscape:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,#171721 100%)}.hero-product{position:relative;padding:60px 0 30px;max-width:430px;width:100%}.product-card{background:#f9f8f5;color:#33323b;padding:27px 28px 18px;border-radius:15px;box-shadow:0 30px 80px #0003;transform:rotate(-3deg)}.product-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.product-wordmark{font-size:25px;letter-spacing:-.08em}.ui-pill{display:inline-block;font-size:10px;background:#ebeaf0;color:#595769;padding:5px 10px;border-radius:99px}.product-card h2{font-size:29px;margin-bottom:24px}.map-group{margin-top:18px}.map-label{font-size:8px;letter-spacing:.12em;color:#646271}.task{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #e6e4e4;font-size:12px}.task-circle{width:15px;height:15px;border:1px solid #b8b4c1;border-radius:50%;flex-shrink:0}.task small{display:block;font-size:10px;color:#77717d;margin-top:5px}.task-arrow{margin-left:auto;color:#928a9a}.card-bottom{display:flex;justify-content:space-between;font-size:10px;color:#706b78;margin-top:20px}.voice-note{position:absolute;right:-16px;top:-4px;z-index:2;border:1px solid #ffffff38;background:#e7e2dfed;color:#363440;box-shadow:0 15px 40px #0002;border-radius:12px;padding:18px 22px;transform:rotate(5deg);font-size:13px}.voice-note p{margin-block:8px}.voice-note small{font-size:9px;color:#696374}.wave{font-size:13px;letter-spacing:2px;color:#665e76}.example-label{display:block;text-align:center;font-size:10px;color:#cac5d0;position:relative;margin-top:22px}.hero-foot{position:relative;display:flex;justify-content:space-between;margin-top:50px;padding-block:25px;border-top:1px solid #ffffff24;font-size:11px;color:#c3c3cc}.hero-foot a{font-size:9px;letter-spacing:.13em}.hero-foot a span{margin-left:24px}.intro{text-align:center}.intro .lead{max-width:540px;margin:25px auto 50px}.principles{display:flex;justify-content:center;gap:55px;font-size:12px;color:var(--muted)}.section-heading{margin-bottom:55px}.section-heading>p:last-child:not(.eyebrow){margin-top:22px;color:var(--muted);font-size:16px}.guide-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:85px;align-items:center}.step{display:flex;text-align:left;gap:24px;width:100%;padding:28px 0;border-top:1px solid var(--line);position:relative}.step:last-of-type{border-bottom:1px solid var(--line)}.step-number{font-size:12px;color:var(--muted);padding-top:4px}.step strong{font-size:20px;font-weight:480;letter-spacing:-.025em}.step-copy{display:block;max-height:0;overflow:hidden;opacity:0;font-size:14px;line-height:1.7;color:var(--muted)}.step[aria-selected=true] .step-copy{max-height:140px;opacity:1;margin-top:14px}.step[aria-selected=true]:before{content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;background:var(--accent)}.guide-tip{font-size:12px;color:var(--muted);margin-top:30px}.demo-stage{padding:24px 30px;background:#e6e5e1;border-radius:18px;min-height:540px;color:#33323b}.demo-caption{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.1em;margin-bottom:24px;color:#68636d}.demo-sheet{background:#fdfcf9;border-radius:12px;padding:28px;box-shadow:var(--shadow-float);min-height:418px}.demo-sheet .eyebrow{font-size:9px;color:#726c77;margin-bottom:15px}.demo-sheet h3{font-size:25px;margin-bottom:22px;line-height:1.2}.sample-input{border:1px solid #dedbe0;border-radius:9px;padding:18px;font-size:16px;line-height:1.65;min-height:166px;background:#f7f6f3}.capture-footer{display:flex;align-items:center;gap:12px;font-size:10px;color:#736c7b;margin:18px 0}.mic{display:grid;place-items:center;width:36px;height:36px;background:#eceaf5;color:#655f77;border-radius:50%}.demo-sheet .button{width:100%;font-size:12px;min-height:44px;padding:0 12px}.demo-note{font-size:10px;text-align:center;color:#6e6875;margin-top:18px}.sheet-subtitle{font-size:12px;color:#6e6875;margin-top:-10px;margin-bottom:16px}.edit-label{display:block;font-size:10px;color:#696273;margin-bottom:4px}#example-task{width:100%;padding:12px;border:1px solid #bdb7d6;border-radius:6px;color:#393443;background:#fff;font-size:13px}.review-row{font-size:13px;padding:15px 0;border-bottom:1px solid #e6e2e9}.review-row small{display:block;font-size:10px;color:#766e7d;margin-top:3px}.review-row+.button{margin-top:22px}.check-task{display:flex;gap:13px;align-items:center;font-size:13px;padding:18px 0;border-bottom:1px solid #e6e2e9}.check-task input{width:17px;height:17px;accent-color:var(--accent);flex-shrink:0}.check-task small{display:block;font-size:8px;letter-spacing:.1em;color:#746d7d;margin-bottom:5px}.check-task input:checked+span{opacity:.6;text-decoration:line-through}.check-task span{overflow-wrap:anywhere}.progress-copy{font-size:11px;margin:20px 0;color:#696273}.everyday{padding-top:50px}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.feature-visual{height:330px;border-radius:14px;margin-bottom:25px;display:grid;place-items:center;position:relative;overflow:hidden}.shopping{background:#dce2e3}.list-sheet{background:#fcfbf8;padding:24px 30px;width:270px;transform:rotate(-5deg);border-radius:10px;box-shadow:var(--shadow-float);color:#35333d}.list-sheet h3{font-size:21px;margin-top:15px}.list-sheet p{font-size:12px;border-bottom:1px solid #e6e3e7;padding:10px 0}.list-sheet small{font-size:9px;color:#716976}.list-line{height:14px}.focus{background:#292c38;color:#eeeaf0}.orbit{position:absolute;border:1px solid #77758840;border-radius:50%;width:380px;height:380px}.orbit-two{width:260px;height:260px}.focus-card{padding:28px;background:#f6f4ee;color:#35333d;border-radius:12px;z-index:1;transform:rotate(4deg);box-shadow:var(--shadow-float)}.focus-card small{font-size:9px;letter-spacing:.1em;color:#746d7d}.focus-card h3{font-size:22px;margin:16px 0 8px}.focus-card>span{font-size:11px;color:#746d7d}.floating-note{position:absolute;bottom:47px;left:38px;background:#dddbe5;color:#504958;padding:12px 20px;border-radius:99px;z-index:2;font-size:10px}.feature-grid article>h3{font-size:21px;margin-bottom:12px}.feature-grid article>p{color:var(--muted);font-size:15px;line-height:1.7;max-width:430px}.ritual-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.ritual .lead{margin:25px 0 30px;font-size:16px}.ritual-list{list-style:none;margin:0;padding:0}.ritual-list li{border-top:1px solid var(--line);padding:25px 0}.ritual-list li>span{font-size:10px;letter-spacing:.08em;color:var(--muted)}.ritual-list h3{font-size:20px;margin:12px 0}.ritual-list p{font-size:14px;color:var(--muted);line-height:1.65}.faq{display:grid;grid-template-columns:1fr 1.2fr;gap:70px}.faq h2{max-width:300px}.faq details{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;padding:24px 35px 24px 0;font-size:16px;list-style:none;position:relative}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"＋";position:absolute;right:0}.faq details[open] summary:after{content:"−"}.faq details p{font-size:14px;line-height:1.7;color:var(--muted);padding-bottom:25px}.closing{text-align:center;padding-bottom:100px}.closing h2{font-size:clamp(36px,4vw,52px)}.closing .lead{margin:26px 0 30px;font-size:17px}.closing-note{font-size:11px;color:var(--muted);margin-top:20px}footer{border-top:1px solid var(--line);padding-block:35px;display:flex;align-items:center;justify-content:space-between;gap:30px}footer p,footer nav{font-size:11px;color:var(--muted)}footer nav{display:flex;gap:25px}
@media(min-width:901px){.hero-product{animation:drift 8s ease-in-out infinite}@keyframes drift{50%{transform:translateY(-8px)}}}
@media(max-width:900px){.navigation nav{gap:16px}.hero-layout{gap:35px}.hero{padding-top:140px;min-height:760px}.hero-copy{padding-bottom:15px}.hero-product{max-width:370px}.voice-note{right:0;font-size:11px}.product-card{padding:22px}.guide-layout{gap:40px}.demo-stage{padding:20px}.ritual-grid{gap:45px}.faq{gap:40px}.principles{gap:25px}}
@media(max-width:700px){.section{padding-block:75px}.navigation{height:70px;margin-bottom:-70px}.nav-inner{gap:12px}.navigation .logo{font-size:26px}.navigation .nav-cta{min-height:36px;font-size:11px;padding:0 13px;gap:8px}.menu-toggle{display:block;margin-left:auto;font-size:12px;padding:12px 4px}.navigation nav{display:none;position:absolute;left:0;right:0;top:70px;background:var(--bg);padding:25px;box-shadow:0 18px 20px #0002}.navigation nav.is-open{display:flex;flex-direction:column;gap:10px}.hero{padding-top:120px;min-height:0}.hero-layout{grid-template-columns:1fr;gap:32px}.hero-copy{padding-bottom:0}.hero h1{font-size:45px}.hero .lead{font-size:16px;max-width:340px}.actions{gap:10px;margin-top:27px}.actions .button{padding:0 16px;font-size:12px;gap:10px;min-height:46px}.hero-note{font-size:10px}.hero-product{max-width:335px;margin:auto;padding-top:74px}.voice-note{right:0;top:8px;padding:13px 18px}.product-card{margin:0 10px;transform:rotate(-2deg);padding:24px}.hero-foot{margin-top:12px;font-size:9px;gap:20px;align-items:center}.hero-foot a{font-size:8px;white-space:nowrap}.hero-foot a span{margin-left:6px}.principles{flex-direction:column;gap:18px;align-items:center}.intro .lead{font-size:16px;margin-bottom:35px}.guide-layout,.feature-grid,.ritual-grid,.faq{grid-template-columns:1fr;gap:35px}.section-heading{margin-bottom:35px}.guide .section-heading{margin-bottom:30px}.step{padding:20px 0;gap:20px}.step strong{font-size:18px}.step-copy{font-size:13px}.guide-tip{margin-top:20px}.demo-stage{min-height:530px;padding:20px 16px}.demo-sheet{padding:24px 20px}.feature-visual{height:300px}.feature-grid{gap:40px}.everyday{padding-top:15px}.ritual-list{margin-top:12px}.faq{gap:15px}.faq h2{max-width:none}.faq summary{font-size:15px}.closing .lead{font-size:16px}footer{flex-wrap:wrap;gap:22px}footer p{margin-left:auto;font-size:10px}footer nav{width:100%;justify-content:flex-end}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.page,.button{transition:none!important}.hero-product{animation:none!important}}
/* Marca Sukkiri: sello y nombre como imagen. */
.brand-symbol{display:block;width:30px;height:30px;border:0;border-radius:26%}.logo .brand-wordmark{display:block;width:auto;height:22px}.product-wordmark{display:block;width:auto;height:18px}
/* Títulos con la tipografía de marca. */
h1,h2{font-family:"Comfortaa",ui-rounded,system-ui,sans-serif;font-weight:600;letter-spacing:-.03em}