/* ==========================================================================
   OpoPlanning · hoja de estilos
   1. Tokens          5. Koda
   2. Base            6. Vistas
   3. Layout          7. Calendario
   4. Componentes     8. Temporizador / Onboarding / Landing
   ========================================================================== */

/* ------------------------------------------------------------- 1. Tokens */
:root {
  --lav-50:#FAF6FF;  --lav-100:#F1E9FE; --lav-200:#E4D6FC; --lav-300:#D1BBF8;
  --lav-400:#B596F0; --lav-500:#9B78E6; --lav-700:#6B4FB0;

  --mint-50:#F1FBF6; --mint-100:#DFF5EA; --mint-200:#C3EBD8; --mint-300:#A1E0C4;
  --mint-400:#6FCFA6; --mint-600:#3FA37A;

  --pink-50:#FFF5F8;  --pink-100:#FFE7EE; --pink-200:#FFD3E0; --pink-300:#FFB3C8;
  --pink-400:#FF8FAE; --pink-600:#E05F85;

  --peach-100:#FFEADF; --peach-200:#FFDCC9; --peach-300:#FFC5A8; --peach-400:#FFA47C;
  --sky-100:#E6F2FD;  --sky-200:#CDE6FB; --sky-300:#A9D6F7; --sky-400:#6BB8ED;
  --butter-100:#FFF6DF; --butter-200:#FFEBBB; --butter-300:#FFDC93;

  --ink:#4B4259; --ink-2:#766D8C; --ink-3:#A9A2BC; --ink-4:#CFC9DC;
  --bg:#FFF9FC; --surface:#FFFFFF; --line:#EFE9F8;

  --ok:var(--mint-400); --warn:var(--butter-300); --bad:var(--pink-400);

  --r-xs:12px; --r-sm:16px; --r-md:22px; --r-lg:28px; --r-xl:36px; --r-pill:999px;

  --sh-sm:0 2px 8px rgba(120,95,175,.07);
  --sh-md:0 6px 20px rgba(120,95,175,.10);
  --sh-lg:0 14px 40px rgba(120,95,175,.16);
  --sh-pop:0 18px 50px rgba(107,79,176,.22);

  --font: "Quicksand", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Baloo 2", var(--font);

  --nav-h: calc(66px + env(safe-area-inset-bottom));
  --page-max: 540px;
  --ease: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.22,.9,.3,1);
}

/* --------------------------------------------------------------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  min-height: 100dvh;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; margin: 0; line-height: 1.15; letter-spacing: -.01em; }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0; line-height: 1.5; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--lav-500); text-decoration: none; }
svg { display: block; }

::selection { background: var(--lav-200); }

:focus-visible { outline: 3px solid var(--lav-300); outline-offset: 2px; border-radius: 8px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hidden { display: none !important; }
.muted { color: var(--ink-2); }
.tiny { font-size: .78rem; }
.small { font-size: .86rem; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: grid; gap: 14px; }
.stack-sm { display: grid; gap: 8px; }
.mt { margin-top: 14px; }
.mt-lg { margin-top: 24px; }

/* ------------------------------------------------------------- 3. Layout */
.app-bg {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(120% 80% at 10% 0%, var(--lav-100) 0%, transparent 55%),
    radial-gradient(110% 70% at 95% 8%, var(--pink-50) 0%, transparent 50%),
    radial-gradient(90% 60% at 50% 100%, var(--mint-50) 0%, transparent 60%),
    var(--bg);
}
.blob { position: absolute; border-radius: 50%; filter: blur(42px); opacity: .5; animation: float 18s ease-in-out infinite; }
.blob-1 { width: 260px; height: 260px; background: var(--lav-200); top: -70px; left: -60px; }
.blob-2 { width: 220px; height: 220px; background: var(--pink-200); top: 18%; right: -80px; animation-delay: -5s; }
.blob-3 { width: 240px; height: 240px; background: var(--mint-200); bottom: 4%; left: -70px; animation-delay: -10s; }
.blob-4 { width: 180px; height: 180px; background: var(--butter-200); bottom: 18%; right: -50px; animation-delay: -14s; }
@keyframes float { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(18px,-22px) scale(1.07); } 66% { transform: translate(-14px,16px) scale(.95); } }

.shell { max-width: var(--page-max); margin: 0 auto; padding: 0 16px calc(var(--nav-h) + 26px); }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 14px) 2px 12px;
  background: linear-gradient(var(--bg) 62%, transparent);
  backdrop-filter: blur(8px);
}
.topbar__title { font-family: var(--display); font-size: 1.45rem; font-weight: 800; }
.topbar__sub { font-size: .76rem; color: var(--ink-2); font-weight: 700; margin-top: -2px; }

.avatar {
  width: 42px; height: 42px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: linear-gradient(140deg, var(--lav-300), var(--pink-300));
  color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  box-shadow: var(--sh-sm); flex: 0 0 auto;
}

/* --- navegación inferior (móvil) --- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: space-around; align-items: stretch;
  padding: 8px 6px calc(env(safe-area-inset-bottom) + 8px);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px) saturate(1.3);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(120,95,175,.08);
}
.nav__item {
  flex: 1; display: grid; justify-items: center; gap: 3px; padding: 6px 2px 4px;
  border-radius: var(--r-sm); color: var(--ink-3); font-size: .66rem; font-weight: 700;
  transition: color .2s, background .2s, transform .25s var(--ease);
}
.nav__item svg { width: 23px; height: 23px; stroke-width: 2; }
.nav__item.is-active { color: var(--lav-500); background: var(--lav-100); }
.nav__item.is-active svg { transform: translateY(-1px) scale(1.08); }
.nav__item:active { transform: scale(.93); }

/* --------------------------------------------------------- 4. Componentes */
.card {
  background: var(--surface); border-radius: var(--r-lg); padding: 18px;
  box-shadow: var(--sh-sm); border: 1px solid var(--line);
}
.card--flat { box-shadow: none; }
.card--lav  { background: linear-gradient(145deg, var(--lav-100), var(--lav-50)); border-color: var(--lav-200); }
.card--mint { background: linear-gradient(145deg, var(--mint-100), var(--mint-50)); border-color: var(--mint-200); }
.card--pink { background: linear-gradient(145deg, var(--pink-100), var(--pink-50)); border-color: var(--pink-200); }
.card--sky  { background: linear-gradient(145deg, var(--sky-100), #F4FAFF); border-color: var(--sky-200); }
.card--butter { background: linear-gradient(145deg, var(--butter-100), #FFFCF4); border-color: var(--butter-200); }

.card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card__title { font-family: var(--display); font-size: 1.02rem; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.card__title .emoji { font-size: 1.1rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px; border-radius: var(--r-pill);
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  background: var(--lav-100); color: var(--lav-700);
  transition: transform .18s var(--ease), box-shadow .2s, filter .2s;
  -webkit-tap-highlight-color: transparent; text-align: center;
}
.btn:active { transform: scale(.96); }
.btn--primary {
  background: linear-gradient(135deg, var(--lav-400), var(--lav-500));
  color: #fff; box-shadow: 0 8px 22px rgba(155,120,230,.38);
}
.btn--mint { background: linear-gradient(135deg, var(--mint-300), var(--mint-400)); color: #1F6349; box-shadow: 0 8px 22px rgba(111,207,166,.35); }
.btn--pink { background: linear-gradient(135deg, var(--pink-300), var(--pink-400)); color: #fff; box-shadow: 0 8px 22px rgba(255,143,174,.35); }
.btn--peach{ background: linear-gradient(135deg, var(--peach-300), var(--peach-400)); color: #7A3A1C; box-shadow: 0 8px 22px rgba(255,164,124,.35); }
.btn--ghost { background: #fff; border: 2px solid var(--line); color: var(--ink-2); }
.btn--block { width: 100%; }
.btn--lg { padding: 17px 26px; font-size: 1.08rem; }
.btn--sm { padding: 9px 15px; font-size: .86rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn svg { width: 19px; height: 19px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: var(--r-pill);
  background: #fff; border: 2px solid var(--line); color: var(--ink-2);
  font-size: .88rem; font-weight: 700;
  transition: transform .16s var(--ease), background .2s, border-color .2s, color .2s;
}
.chip:active { transform: scale(.94); }
.chip.is-on { background: var(--lav-100); border-color: var(--lav-300); color: var(--lav-700); }
.chip--mint.is-on { background: var(--mint-100); border-color: var(--mint-300); color: var(--mint-600); }
.chip--pink.is-on { background: var(--pink-100); border-color: var(--pink-300); color: var(--pink-600); }
.chip--square { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: var(--r-sm); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  width: fit-content;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 800; letter-spacing: .01em;
  background: var(--lav-100); color: var(--lav-700);
}
.badge--mint { background: var(--mint-100); color: var(--mint-600); }
.badge--pink { background: var(--pink-100); color: var(--pink-600); }
.badge--butter { background: var(--butter-100); color: #96701A; }
.badge--sky { background: var(--sky-100); color: #2E6F9E; }

.field { display: grid; gap: 7px; }
.field__label { font-size: .84rem; font-weight: 700; color: var(--ink-2); padding-left: 4px; }
.input, .select, .textarea {
  width: 100%; padding: 15px 17px; border-radius: var(--r-md);
  background: #fff; border: 2px solid var(--line); color: var(--ink);
  font-weight: 600; transition: border-color .2s, box-shadow .2s;
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); font-weight: 600; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--lav-300); box-shadow: 0 0 0 4px var(--lav-100);
}
.textarea { min-height: 86px; resize: vertical; line-height: 1.45; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23A9A2BC' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 17px center; padding-right: 42px;
}

/* barras y anillos de progreso */
.bar { display: block; height: 10px; border-radius: var(--r-pill); background: var(--lav-100); overflow: hidden; }
.bar__fill {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--lav-300), var(--lav-400));
  transition: width .7s var(--ease-out);
}
.bar__fill--mint { background: linear-gradient(90deg, var(--mint-300), var(--mint-400)); }
.bar__fill--pink { background: linear-gradient(90deg, var(--pink-300), var(--pink-400)); }
.bar--thin { height: 7px; }

.ring { position: relative; width: 108px; height: 108px; flex: 0 0 auto; }
.ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring__track { fill: none; stroke: var(--lav-100); stroke-width: 11; }
.ring__bar {
  fill: none; stroke: url(#ringGrad); stroke-width: 11; stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--ease-out);
}
.ring__label {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.ring__value { font-family: var(--display); font-size: 1.5rem; font-weight: 800; line-height: 1; }
.ring__unit { font-size: .66rem; color: var(--ink-2); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* listas */
.list { display: grid; gap: 10px; }
.item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--line);
  transition: transform .18s var(--ease), box-shadow .2s;
}
.item:active { transform: scale(.985); }
.item__num {
  width: 36px; height: 36px; border-radius: var(--r-xs); flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--lav-100); color: var(--lav-700);
  font-family: var(--display); font-weight: 800; font-size: .9rem;
}
.item__num--mint { background: var(--mint-100); color: var(--mint-600); }
.item__num--pink { background: var(--pink-100); color: var(--pink-600); }
.item__num--sky  { background: var(--sky-100); color: #2E6F9E; }
.item__body { flex: 1; min-width: 0; display: grid; gap: 5px; }
.item__title { font-weight: 700; font-size: .94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item__meta { font-size: .76rem; color: var(--ink-2); font-weight: 700; }

.empty { text-align: center; padding: 26px 16px; color: var(--ink-2); }
.empty__emoji { font-size: 2.4rem; display: block; margin-bottom: 8px; }

/* hojas emergentes */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 90; background: rgba(75,66,89,.4);
  backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s;
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91;
  visibility: hidden;
  max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 10px 18px calc(env(safe-area-inset-bottom) + 24px);
  box-shadow: var(--sh-pop);
  transform: translateY(102%);
  transition: transform .38s var(--ease-out), visibility 0s linear .38s;
}
.sheet.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform .38s var(--ease-out), visibility 0s;
}
.sheet__grip { width: 44px; height: 5px; border-radius: var(--r-pill); background: var(--ink-4); margin: 6px auto 14px; }
.sheet__title { font-family: var(--display); font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; }

/* --- aviso de sesión en marcha --- */
.minitimer {
  position: fixed; left: 50%; z-index: 60;
  bottom: calc(var(--nav-h) + 12px);
  transform: translate(-50%, 180%);
  display: flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--lav-400), var(--lav-500));
  color: #fff; font-weight: 700; font-size: .86rem;
  box-shadow: 0 10px 26px rgba(155,120,230,.45);
  transition: transform .4s var(--ease), background .3s;
}
.minitimer.is-on { transform: translate(-50%, 0); }
.minitimer strong { font-family: var(--display); font-variant-numeric: tabular-nums; font-size: 1rem; }
.minitimer__dot {
  width: 9px; height: 9px; border-radius: 50%; background: #fff;
  animation: mini-pulse 1.6s ease-in-out infinite;
}
.minitimer--paused .minitimer__dot { animation: none; opacity: .5; }
.minitimer--break { background: linear-gradient(135deg, var(--mint-400), var(--mint-600)); }
.minitimer__tag { font-size: .72rem; opacity: .8; font-weight: 700; }
@keyframes mini-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } }

@media (min-width: 834px) {
  .minitimer { bottom: 20px; left: auto; right: 24px; transform: translate(0, 180%); }
  .minitimer.is-on { transform: translate(0, 0); }
}

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px); z-index: 95;
  transform: translate(-50%, 140%);
  display: flex; align-items: center; gap: 9px;
  max-width: calc(100vw - 32px);
  padding: 13px 20px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font-weight: 700; font-size: .9rem;
  box-shadow: var(--sh-lg); transition: transform .4s var(--ease);
}
.toast.is-on { transform: translate(-50%, 0); }
.toast--ok { background: linear-gradient(135deg, var(--mint-400), var(--mint-600)); }
.toast--bad { background: linear-gradient(135deg, var(--pink-400), var(--pink-600)); }

/* ---------------------------------------------------------------- 5. Koda */
.koda { width: 120px; height: 120px; overflow: visible; }
/* `transform-box: fill-box` solo en las piezas que anima el CSS: aplicarlo a
   todo descoloca los elementos que ya traen su propio atributo `transform`. */
.koda__body, .koda__tail, .koda__head, .koda__eyelid, .koda__ear-l, .koda__ear-r,
.koda__tongue, .koda__sparkle, .koda__anger, .koda__sweat, .koda__qmark,
.koda__zzz, .koda__prop, .koda__pencil { transform-box: fill-box; }
/* cuando el contenedor ya tiene tamaño propio, Koda lo ocupa entero */
.landing__logo .koda, .koda-guide__dog .koda { width: 100%; height: 100%; }

/* --- piezas animadas en reposo --- */
.koda__body   { transform-origin: 50% 100%; animation: koda-breathe 3.4s ease-in-out infinite; }
.koda__tail   { transform-origin: 88% 88%;  animation: koda-wag 1.1s ease-in-out infinite; }
.koda__head   { transform-origin: 50% 92%;  animation: koda-bob 3.4s ease-in-out infinite; }
.koda__eyelid { transform-origin: 50% 0%;   animation: koda-blink 4.6s infinite; }
.koda__ear-l  { transform-origin: 70% 82%;  animation: koda-ear-l 3.8s ease-in-out infinite; }
.koda__ear-r  { transform-origin: 30% 82%;  animation: koda-ear-r 3.8s ease-in-out infinite; }

/* --- piezas que solo aparecen en ciertos ánimos --- */
.koda__tongue, .koda__sparkle, .koda__zzz, .koda__anger,
.koda__sweat, .koda__qmark, .koda__prop { opacity: 0; }
.koda__mouth--frown, .koda__mouth--open { opacity: 0; }
.koda__brow-sad, .koda__brow-angry { opacity: 0; }

@keyframes koda-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03,1.035); } }
@keyframes koda-wag  { 0%,100% { transform: rotate(-17deg); } 50% { transform: rotate(17deg); } }
@keyframes koda-bob  { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2.5px) rotate(-1.5deg); } }
@keyframes koda-blink { 0%,92%,100% { transform: scaleY(0); } 94%,97% { transform: scaleY(1); } }
@keyframes koda-ear-l { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-6deg); } }
@keyframes koda-ear-r { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(6deg); } }

/* ------------------------------------------------------ estados de ánimo */

/* contento: jadea y mueve el rabo rápido */
.koda--happy .koda__tail { animation-duration: .55s; }
.koda--happy .koda__tongue { opacity: 1; animation: koda-pant 1s ease-in-out infinite; }

/* fiesta: salta, saca la lengua y suelta chispas */
.koda--party { animation: koda-hop .62s var(--ease) infinite; }
.koda--party .koda__tail { animation-duration: .34s; }
.koda--party .koda__tongue { opacity: 1; animation: koda-pant .7s ease-in-out infinite; }
.koda--party .koda__mouth--smile { opacity: 0; }
.koda--party .koda__mouth--open { opacity: 1; }
.koda--party .koda__sparkle { opacity: 1; animation: koda-sparkle 1.3s ease-in-out infinite; }

/* triste: orejas más caídas, cejas de pena y morro hacia abajo */
.koda--sad .koda__ear-l { animation: none; transform: rotate(36deg); }
.koda--sad .koda__ear-r { animation: none; transform: rotate(-36deg); }
.koda--sad .koda__head { animation: koda-droop 3s ease-in-out infinite; }
.koda--sad .koda__tail { animation-duration: 2.8s; }
.koda--sad .koda__brow-sad { opacity: 1; }
.koda--sad .koda__mouth--smile { opacity: 0; }
.koda--sad .koda__mouth--frown { opacity: 1; }
.koda--sad .koda__sweat { opacity: 1; animation: koda-drop 2.4s ease-in infinite; }

/* enfadado: cejas en pico, temblor y marca de cabreo */
.koda--angry { animation: koda-shake .36s ease-in-out infinite; }
.koda--angry .koda__ear-l { animation: none; transform: rotate(24deg); }
.koda--angry .koda__ear-r { animation: none; transform: rotate(-24deg); }
.koda--angry .koda__brow-angry { opacity: 1; }
.koda--angry .koda__mouth--smile { opacity: 0; }
.koda--angry .koda__mouth--frown { opacity: 1; }
.koda--angry .koda__anger { opacity: 1; animation: koda-pulse .55s ease-in-out infinite; }
.koda--angry .koda__tail { animation: none; transform: rotate(-6deg); }

/* dormido: ojos cerrados y zzz */
.koda--sleep .koda__eyelid { animation: none; transform: scaleY(1); }
.koda--sleep .koda__tail { animation-duration: 3.6s; }
.koda--sleep .koda__body { animation-duration: 5s; }
.koda--sleep .koda__head { animation: koda-droop 5s ease-in-out infinite; }
.koda--sleep .koda__zzz { opacity: 1; animation: koda-zzz 2.6s ease-out infinite; }

/* atento: ladea la cabeza, como cuando no entiende algo */
.koda--alert .koda__head { animation: koda-tilt 1.9s ease-in-out infinite; }
.koda--alert .koda__ear-l { animation: none; transform: rotate(-7deg) scaleY(1.08); }
.koda--alert .koda__ear-r { animation: none; transform: rotate(7deg) scaleY(1.08); }

/* pensando: cabeza ladeada e interrogación flotando */
.koda--think .koda__head { animation: koda-tilt 3s ease-in-out infinite; }
.koda--think .koda__qmark { opacity: 1; animation: koda-float-q 2.2s ease-in-out infinite; }
.koda--think .koda__tail { animation-duration: 2.2s; }

/* orgulloso: pecho fuera y brillos */
.koda--proud .koda__body { animation: koda-puff 2.4s ease-in-out infinite; }
.koda--proud .koda__sparkle { opacity: 1; animation: koda-sparkle 1.8s ease-in-out infinite; }
.koda--proud .koda__tail { animation-duration: .5s; }

/* hablando: mueve la cabeza al ritmo de la frase */
.koda--talk .koda__head { animation: koda-talk .42s ease-in-out infinite; }

/* escribiendo: saca la libreta y apunta lo que le dices */
.koda--write .koda__prop--note { opacity: 1; animation: koda-note-in .45s var(--ease) both; }
.koda--write .koda__pencil { animation: koda-write .5s ease-in-out infinite; transform-origin: 50% 100%; }
.koda--write .koda__head { animation: koda-look-down 3s ease-in-out infinite; }
.koda--write .koda__tail { animation-duration: 1.6s; }

@keyframes koda-hop { 0%,100% { transform: translateY(0) scaleY(1); } 28% { transform: translateY(-13px) scaleY(1.07); } 55% { transform: translateY(0) scaleY(.94); } 70% { transform: translateY(0) scaleY(1.02); } }
@keyframes koda-pant { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.3) translateY(1px); } }
@keyframes koda-sparkle { 0%,100% { opacity: 0; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes koda-droop { 0%,100% { transform: translateY(3px) rotate(5deg); } 50% { transform: translateY(5px) rotate(3deg); } }
@keyframes koda-zzz { 0% { opacity: 0; transform: translate(0,0) scale(.7); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(9px,-20px) scale(1.15); } }
@keyframes koda-tilt { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes koda-talk { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-1.5px) rotate(1deg); } }
@keyframes koda-shake { 0%,100% { transform: translateX(-1.5px); } 50% { transform: translateX(1.5px); } }
@keyframes koda-pulse { 0%,100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes koda-drop { 0%,60% { opacity: 0; transform: translateY(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }
@keyframes koda-float-q { 0%,100% { opacity: .5; transform: translateY(2px) rotate(-6deg); } 50% { opacity: 1; transform: translateY(-5px) rotate(6deg); } }
@keyframes koda-puff { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05,1.02); } }
@keyframes koda-note-in { from { opacity: 0; transform: translateY(14px) rotate(10deg); } to { opacity: 1; transform: none; } }
@keyframes koda-write { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-3px,2px) rotate(-7deg); } }
@keyframes koda-look-down { 0%,100% { transform: translateY(1px) rotate(-3deg); } 50% { transform: translateY(2px) rotate(3deg); } }

/* --- burbuja de diálogo --- */
.bubble {
  position: relative; background: #fff; border: 2px solid var(--lav-200);
  border-radius: var(--r-md); padding: 13px 16px;
  font-size: .92rem; font-weight: 600; line-height: 1.45; color: var(--ink);
  box-shadow: var(--sh-md);
}
.bubble::after, .bubble::before {
  content: ""; position: absolute; width: 14px; height: 14px; transform: rotate(45deg);
}
.bubble::before { background: var(--lav-200); }
.bubble::after  { background: #fff; }
.bubble--left::before  { left: -8px; top: 22px; }
.bubble--left::after   { left: -5px; top: 22px; }
.bubble--right::before { right: -8px; top: 22px; }
.bubble--right::after  { right: -5px; top: 22px; }
.bubble--bottom::before { bottom: -8px; left: 28px; }
.bubble--bottom::after  { bottom: -5px; left: 28px; }
.bubble--top::before { top: -8px; left: 28px; }
.bubble--top::after  { top: -5px; left: 28px; }
.bubble__caret { display: none; }

/* --- Koda flotante que salta por la pantalla --- */
.koda-guide {
  /* left/top a cero son imprescindibles: sin ellos el translate partiría de la
     posición que el elemento tendría en el flujo, no de la esquina de la pantalla */
  position: fixed; left: 0; top: 0; z-index: 120; width: 0; height: 0;
  pointer-events: none;
  transition: transform .7s var(--ease);
}
.koda-guide.is-hidden { opacity: 0; transform: scale(.4); }
.koda-guide__dog {
  position: absolute; left: -54px; top: -54px; width: 108px; height: 108px;
  filter: drop-shadow(0 10px 18px rgba(107,79,176,.25));
  animation: koda-float 2.6s ease-in-out infinite;
}
.koda-guide__bubble {
  position: fixed; z-index: 121; left: 0; top: 0;
  width: min(300px, calc(100vw - 24px));
  pointer-events: none;
  opacity: 0; transform: translateY(8px) scale(.94);
  transition: opacity .3s, transform .35s var(--ease);
}
.koda-guide__bubble.is-on { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.koda-guide__actions { display: flex; gap: 8px; margin-top: 12px; }
@keyframes koda-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.koda-spot {
  position: fixed; z-index: 115; border-radius: var(--r-lg); pointer-events: none;
  box-shadow: 0 0 0 4px var(--lav-300), 0 0 0 9999px rgba(75,66,89,.55);
  transition: all .6s var(--ease-out); opacity: 0;
}
.koda-spot.is-on { opacity: 1; }

/* Koda en cabecera del panel */
.koda-hero { display: flex; align-items: flex-start; gap: 12px; }
.koda-hero .koda { width: 92px; height: 92px; flex: 0 0 auto; margin-top: -6px; }
.koda-hero__bubble { flex: 1; min-width: 0; }

/* -------------------------------------------------------------- 6. Vistas */
.view { animation: view-in .4s var(--ease-out); }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.hero-grid { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.stat {
  padding: 14px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line);
  display: grid; gap: 3px;
}
.stat__value { font-family: var(--display); font-size: 1.42rem; font-weight: 800; line-height: 1; }
.stat__label { font-size: .72rem; color: var(--ink-2); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.stat--lav { background: var(--lav-100); border-color: var(--lav-200); }
.stat--mint { background: var(--mint-100); border-color: var(--mint-200); }
.stat--pink { background: var(--pink-100); border-color: var(--pink-200); }
.stat--butter { background: var(--butter-100); border-color: var(--butter-200); }
.stat--sky { background: var(--sky-100); border-color: var(--sky-200); }

.block-list { display: grid; gap: 8px; }
.block {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line);
  font-size: .88rem; font-weight: 700;
}
.block__dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.block--review .block__dot { background: var(--sky-300); }
.block--focus  .block__dot { background: var(--lav-400); }
.block--break  .block__dot { background: var(--mint-300); }
.block--break { background: var(--mint-50); border-color: var(--mint-100); color: var(--mint-600); }
.block--review { background: var(--sky-100); border-color: var(--sky-200); }
.block__time { margin-left: auto; font-family: var(--display); font-weight: 700; color: var(--ink-2); }

.segmented {
  display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill);
  background: var(--lav-100);
}
.segmented__btn {
  flex: 1; padding: 10px 8px; border-radius: var(--r-pill);
  font-size: .84rem; font-weight: 700; color: var(--ink-2);
  transition: background .25s, color .25s, box-shadow .25s;
}
.segmented__btn.is-on { background: #fff; color: var(--lav-700); box-shadow: var(--sh-sm); }

/* --- fila de tema en el registro diario --- */
.logrow {
  border-radius: var(--r-md); background: #fff; border: 1px solid var(--line);
  padding: 11px 13px; transition: border-color .2s, background .2s;
}
.logrow.is-on { border-color: var(--mint-300); background: var(--mint-50); }
.logrow__head { display: flex; align-items: center; gap: 11px; }
.logrow__title { flex: 1; min-width: 0; font-weight: 700; font-size: .92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* el detalle solo se despliega cuando el tema está marcado */
.logrow__body { display: none; margin-top: 11px; }
.logrow.is-on .logrow__body { display: grid; gap: 11px; }
.logrow__time { display: flex; align-items: center; gap: 8px; }

.segmented--sm { padding: 3px; }
.segmented--sm .segmented__btn { padding: 7px 6px; font-size: .78rem; }

.input--mini { width: 82px; padding: 9px 10px; text-align: center;
  font-family: var(--display); font-weight: 700; }

.topic-progress { display: flex; align-items: center; gap: 8px; }
.topic-progress .bar { flex: 1; }
.topic-progress__pct { font-family: var(--display); font-weight: 700; font-size: .8rem; color: var(--ink-2); min-width: 34px; text-align: right; }

/* --- bolitas de vueltas dadas --- */
.rdots { display: inline-flex; gap: 3px; align-items: center; flex: 0 0 auto; }
.rdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lav-100); border: 1.5px solid var(--lav-200);
}
.rdot.is-done { background: var(--mint-400); border-color: var(--mint-400); }
.rdot.is-now  { background: #fff; border-color: var(--lav-400); border-width: 2.5px; }
.center .rdots { gap: 6px; }
.center .rdot { width: 13px; height: 13px; }

.slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 10px;
  border-radius: var(--r-pill); background: var(--lav-100); outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 4px solid var(--lav-400); box-shadow: var(--sh-md); cursor: grab;
}
.slider::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 4px solid var(--lav-400); box-shadow: var(--sh-md); cursor: grab;
}

/* ---------------------------------------------------------- 7. Calendario */
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal__month { font-family: var(--display); font-size: 1.16rem; font-weight: 800; text-transform: capitalize; }
.cal__nav {
  width: 38px; height: 38px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--lav-100); color: var(--lav-700);
  transition: transform .18s var(--ease);
}
.cal__nav:active { transform: scale(.9); }
.cal__nav svg { width: 17px; height: 17px; }

.cal__dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 7px; }
.cal__dow { text-align: center; font-size: .68rem; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal__cell { aspect-ratio: 1; display: grid; place-items: center; }

.cal__day {
  position: relative; width: 100%; aspect-ratio: 1; max-width: 46px;
  border-radius: 50%; display: grid; place-items: center;
  font-size: .86rem; font-weight: 700; color: var(--ink-2);
  background: transparent; border: 2px solid transparent;
  transition: transform .2s var(--ease), background .25s, color .25s, border-color .25s;
}
.cal__day:active { transform: scale(.88); }

/* estilo "regla": círculos pastel rellenos */
.cal__day--planned { background: var(--lav-50); color: var(--lav-700); }
.cal__day--done {
  background: linear-gradient(140deg, var(--mint-300), var(--mint-400));
  color: #fff; box-shadow: 0 4px 12px rgba(111,207,166,.42);
}
.cal__day--partial {
  background: linear-gradient(140deg, var(--butter-200), var(--butter-300));
  color: #7D5E12; box-shadow: 0 4px 12px rgba(255,220,147,.5);
}
.cal__day--missed {
  background: linear-gradient(140deg, var(--pink-200), var(--pink-300));
  color: #fff; box-shadow: 0 4px 12px rgba(255,179,200,.5);
}
.cal__day--rest { background: var(--sky-100); color: #3C7FB0; border-color: var(--sky-200); }
.cal__day--today { border-color: var(--lav-400); font-weight: 800; color: var(--lav-700); }
.cal__day--today.cal__day--done,
.cal__day--today.cal__day--missed { color: #fff; border-color: var(--lav-500); }
.cal__day--today.cal__day--partial { border-color: var(--lav-500); }
.cal__day--out { opacity: .3; }
.cal__day--future.cal__day--planned::after {
  content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--lav-300);
}
.cal__day--exam {
  background: linear-gradient(140deg, var(--peach-300), var(--peach-400));
  color: #fff; box-shadow: 0 4px 14px rgba(255,164,124,.5);
}
.cal__day--exam::before { content: "★"; position: absolute; top: -3px; right: -2px; font-size: .7rem; color: var(--peach-400); }

.cal__legend { display: flex; flex-wrap: wrap; gap: 9px 14px; margin-top: 16px; }
.cal__legend-item { display: flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.cal__legend-dot { width: 14px; height: 14px; border-radius: 50%; }

.cal__streak {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--peach-100), var(--butter-100));
  border: 1px solid var(--peach-200);
}
.cal__streak-num { font-family: var(--display); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--peach-400); }

/* --------------------------------------- 8. Temporizador / Onboarding / Landing */
.timer-stage { display: grid; place-items: center; gap: 18px; padding: 10px 0 4px; }
.timer-dial { position: relative; width: min(74vw, 290px); aspect-ratio: 1; }
.timer-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-dial__track { fill: none; stroke: var(--lav-100); stroke-width: 15; }
.timer-dial__bar { fill: none; stroke-width: 15; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .5s; }
.timer-dial__inner {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px;
}
.timer-dial__phase { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.timer-dial__time { font-family: var(--display); font-size: 3.2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.timer-dial__note { font-size: .78rem; color: var(--ink-2); font-weight: 700; }
.timer-dial--focus .timer-dial__bar { stroke: var(--lav-400); }
.timer-dial--break .timer-dial__bar { stroke: var(--mint-400); }
.timer-dial--review .timer-dial__bar { stroke: var(--sky-400); }
.timer-dial.is-running .timer-dial__inner { animation: pulse-soft 3.4s ease-in-out infinite; }
@keyframes pulse-soft { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }

.timer-controls { display: flex; gap: 11px; justify-content: center; }
.timer-ctrl {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--line); color: var(--ink-2);
  box-shadow: var(--sh-sm); transition: transform .18s var(--ease);
}
.timer-ctrl:active { transform: scale(.9); }
.timer-ctrl svg { width: 22px; height: 22px; }
.timer-ctrl--main {
  width: 76px; height: 76px;
  background: linear-gradient(135deg, var(--lav-400), var(--lav-500));
  border: 0; color: #fff; box-shadow: 0 10px 26px rgba(155,120,230,.42);
}
.timer-ctrl--main svg { width: 29px; height: 29px; }

.timer-dots { display: flex; gap: 6px; justify-content: center; }
.timer-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lav-200); transition: background .3s, transform .3s; }
.timer-dot.is-done { background: var(--lav-400); }
.timer-dot.is-now { background: var(--lav-500); transform: scale(1.4); }

/* onboarding */
.onb { min-height: 100dvh; display: flex; flex-direction: column; max-width: var(--page-max); margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 16px) 18px calc(env(safe-area-inset-bottom) + 104px); }
.onb__progress { height: 7px; border-radius: var(--r-pill); background: var(--lav-100); overflow: hidden; margin-bottom: 18px; }
.onb__progress-fill { height: 100%; background: linear-gradient(90deg, var(--lav-300), var(--pink-300)); border-radius: var(--r-pill); transition: width .5s var(--ease-out); }
.onb__koda { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.onb__koda .koda { width: 104px; height: 104px; flex: 0 0 auto; }
.onb__step { flex: 1; display: grid; gap: 16px; align-content: start; }
.onb__q { font-family: var(--display); font-size: 1.32rem; font-weight: 800; line-height: 1.25; }
.onb__hint { font-size: .86rem; color: var(--ink-2); font-weight: 600; }
.onb__options { display: grid; gap: 10px; }
.onb__opt {
  display: flex; align-items: center; gap: 12px; padding: 15px 17px;
  border-radius: var(--r-md); background: #fff; border: 2px solid var(--line);
  text-align: left; font-weight: 700; transition: transform .16s var(--ease), border-color .2s, background .2s;
}
.onb__opt:active { transform: scale(.975); }
.onb__opt.is-on { border-color: var(--lav-400); background: var(--lav-50); }
.onb__opt-emoji { font-size: 1.45rem; }
.onb__opt-sub { font-size: .76rem; color: var(--ink-2); font-weight: 600; }
.onb__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.onb__day {
  aspect-ratio: 1; border-radius: var(--r-sm); display: grid; place-items: center;
  background: #fff; border: 2px solid var(--line); font-weight: 800; font-size: .85rem; color: var(--ink-2);
  transition: transform .16s var(--ease), background .2s, border-color .2s, color .2s;
}
.onb__day.is-on { background: var(--lav-100); border-color: var(--lav-400); color: var(--lav-700); }
.onb__day:active { transform: scale(.9); }
.onb__nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; gap: 10px;
  max-width: var(--page-max); margin: 0 auto;
  padding: 14px 18px calc(env(safe-area-inset-bottom) + 16px);
  background: linear-gradient(transparent, var(--bg) 26%);
}
.onb__stepper { display: flex; align-items: center; justify-content: center; gap: 18px; }
.onb__stepper-btn {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lav-100); color: var(--lav-700); font-size: 1.5rem; font-family: var(--display); font-weight: 800;
  transition: transform .16s var(--ease);
}
.onb__stepper-btn:active { transform: scale(.88); }
.onb__stepper-value { font-family: var(--display); font-size: 2.6rem; font-weight: 800; min-width: 92px; text-align: center; }
.onb__custom { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-md);
  background: var(--lav-50); border: 2px dashed var(--lav-200); }
.onb__custom.is-on { border-style: solid; border-color: var(--lav-400); background: #fff; }
.onb__custom-row { display: flex; align-items: center; gap: 10px; }
.onb__custom-row .input { text-align: center; font-family: var(--display); font-size: 1.3rem; font-weight: 800; }
.onb__custom-unit { font-weight: 700; color: var(--ink-2); white-space: nowrap; }

/* landing */
.landing { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; max-width: 460px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 28px) 20px calc(env(safe-area-inset-bottom) + 28px); }
.landing__brand { text-align: center; margin-bottom: 22px; }
.landing__logo { width: 150px; height: 150px; margin: 0 auto 6px; }
.landing__name { font-family: var(--display); font-size: 2.45rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.landing__name span { background: linear-gradient(120deg, var(--lav-500), var(--pink-400)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.landing__tag { font-size: .95rem; color: var(--ink-2); font-weight: 700; margin-top: 7px; }
.landing__card { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-radius: var(--r-xl); padding: 20px; box-shadow: var(--sh-lg); border: 1px solid #fff; }
.landing__feats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; }
.landing__feat { display: flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: var(--r-pill); background: rgba(255,255,255,.75); font-size: .76rem; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line); }
.alert { padding: 12px 15px; border-radius: var(--r-md); font-size: .86rem; font-weight: 700; display: none; }
.alert.is-on { display: block; animation: shake .4s; }
.alert--bad { background: var(--pink-100); color: var(--pink-600); border: 1px solid var(--pink-200); }
.alert--ok { background: var(--mint-100); color: var(--mint-600); border: 1px solid var(--mint-200); }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.loader { display: grid; place-items: center; min-height: 60dvh; gap: 14px; }
.loader .koda { width: 96px; height: 96px; }
.loader__text { font-weight: 700; color: var(--ink-2); font-size: .9rem; }

/* --------------------------------------------------- iPad / pantallas grandes */
@media (min-width: 834px) {
  :root { --page-max: 960px; --nav-h: 0px; }

  .shell { max-width: 1000px; padding: 0 28px 48px 118px; }

  .nav {
    top: 0; bottom: auto; left: 0; right: auto; width: 96px; height: 100dvh;
    flex-direction: column; justify-content: center; gap: 8px;
    padding: 20px 12px; border-top: 0; border-right: 1px solid var(--line);
    box-shadow: 6px 0 24px rgba(120,95,175,.06);
  }
  .nav__item { flex: 0 0 auto; width: 100%; padding: 12px 4px; font-size: .68rem; gap: 5px; }
  .nav__item svg { width: 25px; height: 25px; }

  .topbar { padding-top: 26px; }

  .grid-2 { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }
  .grid-2 > .stack { gap: 18px; }

  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .koda-hero .koda { width: 118px; height: 118px; }
  .cal__day { max-width: 62px; font-size: 1rem; }
  .sheet { left: 50%; right: auto; transform: translate(-50%, 102%); width: 560px; border-radius: var(--r-xl); bottom: 24px; }
  .sheet.is-open { transform: translate(-50%, 0); }
  .toast { bottom: 28px; }
  .onb { max-width: 620px; }
  .onb__koda .koda { width: 130px; height: 130px; }
  h1 { font-size: 2.1rem; }
}

@media (min-width: 1180px) {
  .shell { max-width: 1160px; }
  .grid-2 { grid-template-columns: 1.2fr .8fr; gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
}