/* mint brand layer. Loaded after each page's own styles (site, quiz, portals).
   The palette itself lives in each page's tokens (scripts/rebrand-mint.mjs maps them); this file adds
   what a token can't: Inter Tight display type, the cold gradient halo, lima on abeto, floating cells.
   Selectors start with `html` so they win over the portal's inline <style> whatever the load order.
   Brand: Abeto #0F2A2E ink · Niebla #DDE4EA ground · Lima #CDEB6B accent/data · Clorofila #3CD36B state
   · Menta #BFE8D5 cell · Cornflower #6AB0FF accent 2 · Arcilla #A9785A warmth (photos only). */
html:root{--abeto:#0F2A2E;--niebla:#DDE4EA;--niebla2:#EEF2F5;--lima:#CDEB6B;--lima2:#E4F3B0;--cloro:#3CD36B;--menta:#BFE8D5;--menta2:#E3F5EC;--corn:#6AB0FF;--arcilla:#A9785A;
  --halo:radial-gradient(60% 70% at 18% 20%,rgba(106,176,255,.55),transparent 70%),radial-gradient(55% 65% at 70% 30%,rgba(205,235,107,.6),transparent 70%),radial-gradient(60% 70% at 90% 90%,rgba(191,232,213,.7),transparent 70%)}
/* One page frame for every public page and panel: same content width, side padding and header height.
   Change these three, never a page's own .w. tests/repo-checks.test.mjs keeps pages on them. */
html:root{--page-w:1160px;--page-pad:clamp(16px,4vw,40px);--nav-h:72px}
html .w{max-width:calc(var(--page-w) + 2*var(--page-pad));padding-left:var(--page-pad);padding-right:var(--page-pad)}
html .nav{height:var(--nav-h)}
html header.top,html header.top.sticky{padding:0}
html header.top>.w{min-height:var(--nav-h)}
html body{font-feature-settings:"cv11","ss01";letter-spacing:-.006em}

/* Display type: one family, strong negative tracking. */
html .h1,html .h2,html .h3,html h1,html h2:not(.sec),html .hello,html .page-h,html .next h3,html .sheet h3,html .tile b,html .bar h1{font-family:"Inter Tight","Inter",system-ui,sans-serif}
html .h1{font-weight:600;letter-spacing:-.042em;line-height:.98}
html .h2{font-weight:600;letter-spacing:-.038em}
html .h3{font-weight:600;letter-spacing:-.025em}
/* The second half of a headline: same family, cold gradient (clorofila to cornflower, darkened to read on white). */
html .soft{font-weight:600;background:linear-gradient(95deg,#138A4C 0%,#1E8C86 45%,#3F7FE0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.06em}
html .ey{color:#5B6E73;letter-spacing:.16em}

/* ---------- marketing site ---------- */
html .announce{background:var(--abeto);color:#CFDCDF}
html .announce a{color:var(--lima)}
html .stick{background:rgba(255,255,255,.8);border-bottom-color:rgba(217,225,231,.8)}
html .logo img{height:28px}
html .btn:focus-visible,html .ghost:focus-visible,html .goal:focus-visible,html .tab:focus-visible{outline-color:var(--corn)}
html .dot{background:var(--cloro);box-shadow:0 0 0 3px rgba(60,211,107,.18)}
html .pill{background:#fff}
/* Labels on the abeto sections: a quiet outline, never a white button. */
html .pill.on-dark{background:rgba(255,255,255,.04);color:#D5E2E5;border:1px solid #2A4A4F}
/* Hero: cold air. A soft lima/cornflower/menta halo over niebla, the UI floating on top. */
html #empezar,html .hero-mint{position:relative;isolation:isolate;background:linear-gradient(180deg,#F4F7F9 0%,var(--niebla2) 100%) !important;overflow:hidden}
html #empezar::before,html .hero-mint::before{content:"";position:absolute;inset:-20% -10% auto 30%;height:900px;background:var(--halo);filter:blur(40px);opacity:.75;z-index:-1;pointer-events:none}
html .photo{border-radius:28px;background:var(--niebla)}
html .glass{background:rgba(255,255,255,.78);border-color:rgba(255,255,255,.7);box-shadow:0 24px 60px rgba(15,42,46,.14)}
html .goal[aria-pressed="true"]{background:var(--abeto);border-color:var(--abeto)}
html .foot{background:#0B2023}
html .foot .lines a{color:var(--lima2)}

/* ---------- portals ---------- */
html body:has(#app){background:var(--niebla2)}
html .top,html .bar{background:rgba(238,242,245,.8)}
html .top .logo{height:26px}
html .card,html .list,html .track,html .tile,html .cpanel,html .quick button{border-color:rgba(217,225,231,.9);box-shadow:0 1px 2px rgba(15,42,46,.04)}
html .hello{font-weight:600;letter-spacing:-.032em}
html .page-h{font-weight:600;letter-spacing:-.035em}
html .tile b{font-weight:600;letter-spacing:-.05em;font-size:30px}
/* The next-step card is the brand piece: abeto, a blurred cold halo, a lima action. */
html .next{background:var(--abeto);box-shadow:0 22px 50px rgba(15,42,46,.22)}
html .next:after{right:-90px;top:-110px;width:280px;height:260px;background:radial-gradient(closest-side,rgba(205,235,107,.55),rgba(106,176,255,.25) 60%,transparent);filter:blur(16px)}
html .next h3{font-weight:600;letter-spacing:-.028em}
html .next .k{color:var(--menta)}
html .next .cta{background:var(--lima);color:var(--abeto)}
html .next .cta:hover{background:#D8F07F}
html .next .eta{background:rgba(205,235,107,.16);color:var(--lima)}
html .next.wait{background:#fff}
html .next.wait:after{background:radial-gradient(closest-side,rgba(191,232,213,.8),rgba(106,176,255,.2) 60%,transparent);filter:blur(10px)}
html .next.wait .k{color:#5B6E73}
html .next.wait .cta{background:var(--abeto);color:#fff}
html .next.wait .eta{background:var(--menta2);color:#0E6B3B}
html .pulse,html .s-ok{background:var(--cloro)}
html .c-ok{background:var(--menta2);color:#0E6B3B}
html .c-forest{background:var(--abeto);color:var(--lima)}
html .st.done .d{background:var(--abeto);border-color:var(--abeto);color:var(--lima)}
html .steps .prog{background:linear-gradient(90deg,var(--cloro),var(--corn))}
html .tabs{border-color:rgba(217,225,231,.9);box-shadow:0 18px 40px rgba(15,42,46,.14)}
html .tabs button.on{background:var(--abeto);color:var(--lima)}
html .tabs button .bd,html .ic-btn .bdg{background:var(--corn)}
html .ic-btn .bdg{border-color:var(--niebla2)}
html .days button.on,html .slots button.on{background:var(--abeto);border-color:var(--abeto)}
html .days button.on span{color:var(--lima)}
html .av{background:var(--menta);color:var(--abeto)}
html .note{background:#E6ECF0}
html .demo{background:#0B2023}
html .demo .sw i{background:var(--lima)}
html .toast{background:var(--abeto)}
html .splash{background:var(--abeto)}

/* On abeto sections the white button becomes the lima pill from the moodboard. */
html .btn-w{background:var(--lima);color:var(--abeto) !important}
html .btn-w:hover{background:#D8F07F}
/* Portal headings use .serif for the same second-half accent as the site's .soft. */
html h1 .serif{font-weight:600;background:linear-gradient(95deg,#138A4C 0%,#1E8C86 45%,#3F7FE0 100%);-webkit-background-clip:text;background-clip:text;color:transparent !important;-webkit-box-decoration-break:clone;box-decoration-break:clone}