/* RESET · tokens y componentes base (ver brandbook/index.html) */
:root{
  --hueso:#F4EFE6; --arena:#E9E1D3; --lino:#DCD2C0; --papel:#FBF8F3;
  --tinta:#1F2724; --tinta-2:#4A524D; --tinta-3:#626862;
  --terracota:#A9502F; --terracota-suave:#E8C9B8; --terracota-honda:#3A2119;
  --anil:#2F3B6E; --anil-suave:#C9CDE0; --anil-hondo:#1E2547;
  --musgo:#4F5E45; --salvia:#8A9A7B; --salvia-suave:#D5DCCB; --musgo-hondo:#232B20;
  --alba:#E8B48A;

  /* color de la fase actual — app.js lo cambia según el mes del cliente */
  --fase:var(--anil); --fase-suave:var(--anil-suave); --fase-honda:var(--anil-hondo);

  --serif:"Fraunces",Georgia,serif;
  --sans:"Instrument Sans",-apple-system,"Segoe UI",sans-serif;
  --r:20px;
  --ease:cubic-bezier(.2,.8,.3,1);
  --tabbar-h:0px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--hueso);color:var(--tinta);font-family:var(--sans);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.3;z-index:90;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.1;font-variation-settings:"opsz" 144;font-variant-numeric:lining-nums}
:focus-visible{outline:2px solid var(--terracota);outline-offset:3px;border-radius:6px}
.eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--tinta-3)}
.eyebrow.fase{color:var(--fase)}
.muted{color:var(--tinta-3)}
.voice{font-family:var(--serif);font-style:italic;font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- barra superior ---------- */
.top{position:sticky;top:0;z-index:30;background:rgba(244,239,230,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--lino)}
.top.dark{background:color-mix(in srgb,var(--fase-honda) 92%,transparent);border-color:rgba(244,239,230,.1);color:var(--hueso)}
.top-in{max-width:1180px;margin:0 auto;padding:0 28px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:19px;letter-spacing:.16em}
.nav{display:flex;gap:4px;font-size:14.5px}
.nav a{padding:8px 14px;border-radius:100px;color:var(--tinta-2);transition:background .2s,color .2s}
.nav a:hover{background:var(--arena);color:var(--tinta)}
.nav a.on{background:var(--tinta);color:var(--hueso)}
.top-actions{display:flex;align-items:center;gap:8px}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:0;background:transparent;color:var(--tinta-2);position:relative;transition:background .2s}
.icon-btn:hover{background:var(--arena)}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--terracota);box-shadow:0 0 0 2px var(--hueso)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--fase-suave);color:var(--fase);display:grid;place-items:center;font-weight:600;font-size:13px;flex:none;border:0}
.top.dark .nav a{color:rgba(244,239,230,.72)}
.top.dark .nav a:hover{background:rgba(244,239,230,.1);color:var(--hueso)}
.top.dark .nav a.on{background:var(--hueso);color:var(--fase-honda)}
.top.dark .icon-btn{color:rgba(244,239,230,.8)}
.top.dark .icon-btn:hover{background:rgba(244,239,230,.1)}
.top.dark .icon-btn .dot{box-shadow:0 0 0 2px var(--fase-honda)}
.top.dark .avatar{background:rgba(244,239,230,.14);color:var(--hueso)}
.back{display:flex;align-items:center;gap:8px;font-size:14.5px;opacity:.8}
.back:hover{opacity:1}

/* ---------- barra inferior (móvil) ---------- */
.tabbar{display:none}
@media (max-width:860px){
  :root{--tabbar-h:68px}
  .nav{display:none}
  .top-in{padding:0 16px;height:58px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:rgba(244,239,230,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--lino)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;color:var(--tinta-3)}
  .tabbar a.on{color:var(--fase);font-weight:600}
  body{padding-bottom:var(--tabbar-h)}
}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 22px;border-radius:100px;border:0;font-weight:600;font-size:15px;line-height:1.2;
  transition:transform .2s var(--ease),box-shadow .2s,background .2s,color .2s,opacity .2s}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-p{background:var(--tinta);color:var(--hueso)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(31,39,36,.6)}
.btn-s{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--tinta)}
.btn-s:hover{background:var(--tinta);color:var(--hueso)}
.btn-f{background:var(--alba);color:var(--anil-hondo)}
.btn-f:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(232,180,138,.7)}
.btn-q{background:transparent;color:var(--tinta-2);padding:10px 14px}
.btn-q:hover{background:var(--arena)}
.btn-block{width:100%}
.btn-sm{padding:9px 16px;font-size:14px}

/* ---------- superficies ---------- */
.card{background:var(--papel);border:1px solid var(--lino);border-radius:var(--r);padding:26px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:4px 10px;border-radius:100px;white-space:nowrap}
.tag-fase{background:var(--fase-suave);color:var(--fase)}
.tag-quiet{background:var(--arena);color:var(--tinta-2)}
.tag-t{background:var(--terracota-suave);color:var(--terracota)}
.tag-a{background:var(--anil-suave);color:var(--anil)}
.tag-m{background:var(--salvia-suave);color:var(--musgo)}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico-fill{fill:currentColor;stroke:none}

/* ---------- formularios ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:13.5px;font-weight:600;color:var(--tinta-2)}
.input{width:100%;padding:13px 16px;border-radius:14px;border:1px solid var(--lino);background:var(--papel);font-size:16px;transition:border-color .2s,box-shadow .2s}
.input:focus{outline:0;border-color:var(--fase);box-shadow:0 0 0 4px color-mix(in srgb,var(--fase) 14%,transparent)}
textarea.input{resize:vertical;min-height:110px;line-height:1.6}
.switch{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--tinta-2);cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .track{width:42px;height:25px;border-radius:13px;background:var(--lino);position:relative;flex:none;transition:background .2s}
.switch .track::after{content:"";position:absolute;left:3px;top:3px;width:19px;height:19px;border-radius:50%;background:var(--papel);transition:transform .25s var(--ease)}
.switch input:checked+.track{background:var(--fase)}
.switch input:checked+.track::after{transform:translateX(17px)}
.switch input:focus-visible+.track{outline:2px solid var(--terracota);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 15px;border-radius:100px;border:1px solid var(--lino);background:transparent;font-size:14px;color:var(--tinta-2);transition:all .2s}
.chip:hover{border-color:var(--tinta-3)}
.chip.on{background:var(--tinta);border-color:var(--tinta);color:var(--hueso)}

/* ---------- modal y toast ---------- */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(31,39,36,.42);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;animation:fade .2s ease}
.modal{width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--hueso);border-radius:24px;padding:30px;box-shadow:0 40px 90px -30px rgba(31,39,36,.6);animation:rise .3s var(--ease)}
.modal h3{font-size:28px;font-weight:400;margin:6px 0 10px}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:22px}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.toasts{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 22px);transform:translateX(-50%);z-index:95;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--tinta);color:var(--hueso);padding:12px 20px;border-radius:100px;font-size:14.5px;box-shadow:0 16px 40px -14px rgba(31,39,36,.7);animation:rise .3s var(--ease);max-width:90vw;text-align:center}

/* ---------- demo ---------- */
.demo-btn{position:fixed;left:16px;bottom:calc(var(--tabbar-h) + 16px);z-index:70;padding:8px 14px;border-radius:100px;border:1px dashed var(--tinta-3);background:var(--hueso);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--tinta-3)}
.demo-btn:hover{color:var(--tinta);border-color:var(--tinta)}
@media (max-width:860px){.demo-btn{display:none}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}