/* maia · estilos de marca compartidos por todas las páginas del sitio.
   Fuente de verdad: maia/marca/manual-de-marca-maia.html y maia/marca/maia-tokens.css */
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --lila:#A685FF; --lila-press:#8F6AF5; --lila-deep:#6E4BE0; --lila-tint:#E4DAFF; --lila-soft:#F1ECFF;
  --ink:#111111; --ink-press:#2A2A2A; --white:#FFFFFF;
  --gray-25:#FAFAFA; --gray-50:#F5F5F6; --gray-100:#EDEDEF; --gray-300:#C9C9CE; --gray-500:#8A8A93; --gray-700:#4A4A52;
  --positive:#1E7F4F; --warning:#B26B00; --negative:#C8102E; --info:#1F4FD8;
  --font:"Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --t-fast:160ms; --t-base:240ms; --t-emphasis:560ms;
  --ease:cubic-bezier(.2,0,0,1); --ease-enter:cubic-bezier(.05,.7,.1,1);
  --gutter:clamp(16px,5vw,56px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{text-wrap:balance}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
img,video{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gray-500);outline-offset:3px;border-radius:var(--r-xs)}
.num{font-variant-numeric:tabular-nums}

/* ---------- Isotipo: casa llena + chimenea + sonrisa calada ---------- */
.iso{display:block;overflow:visible;color:var(--lila);--hole:var(--white)}
.iso .body{fill:currentColor;stroke:currentColor;stroke-width:4;stroke-linejoin:round}
.iso .chim{fill:currentColor}
.iso .smi,.iso .spin{fill:none;stroke:var(--hole);stroke-width:4.2;stroke-linecap:round}
.iso .msg{fill:currentColor}
.iso *{transform-box:fill-box}
.iso .msg,.iso .spin{opacity:0}
.iso .hs{transform-origin:center bottom}
.iso .smi{stroke-dasharray:30;transform-origin:center top}
.iso .spin{transform-origin:50% -152%}
.on-dark .iso,.iso.on-dark{--hole:var(--ink)}
.on-lila .iso,.iso.on-lila{color:var(--white);--hole:var(--lila)}

/* ---------- Logotipo: isotipo + «maia» en Inter Tight 800 ---------- */
.lock{display:inline-flex;align-items:center;gap:.2em;font-weight:800;letter-spacing:-.055em;line-height:1;white-space:nowrap}
.lock .iso{width:1em;height:1em;flex:none}
.lock .w{display:inline-flex;align-items:baseline}
.ch{display:inline-block}

/* ---------- Animaciones de la casa (manual, capítulo 04) ---------- */
@keyframes hsIn{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.05);opacity:1}100%{transform:none;opacity:1}}
@keyframes smiDraw{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
@keyframes rise{from{transform:translateY(.3em);opacity:0}to{transform:none;opacity:1}}
@keyframes up{0%{opacity:0;transform:translate(0,6px) scale(.3)}25%{opacity:1;transform:none}100%{opacity:0;transform:translate(6px,-22px) scale(1.15)}}
@keyframes smiBig{0%,100%{transform:none}40%{transform:scale(1.18,1.7)}70%{transform:scale(.97,.9)}}
@keyframes tilt{0%,100%{transform:none}30%{transform:rotate(-7deg)}65%{transform:rotate(4deg)}}
@keyframes spinM{to{transform:rotate(360deg)}}
/* arranque con texto: casa → sonrisa → letras → mensajes */
.k-text .hs{animation:hsIn .5s var(--ease) both}
.k-text .smi{animation:smiDraw .6s cubic-bezier(.6,0,.2,1) .55s both}
.k-text .ch{animation:rise .5s var(--ease) .35s both}
.k-text .ch:nth-child(2){animation-delay:.41s}.k-text .ch:nth-child(3){animation-delay:.47s}.k-text .ch:nth-child(4){animation-delay:.53s}
.k-msgs .msg{animation:up 1.5s ease-out 1.3s both}
.k-msgs .m2{animation-delay:1.7s}.k-msgs .m3{animation-delay:2.1s}
/* casa sola: humo de mensajes, la sonrisa crece, hola */
.k-smoke .msg{animation:up 1.6s ease-out .2s both}
.k-smoke .m2{animation-delay:.65s}.k-smoke .m3{animation-delay:1.1s}
.k-big .smi{animation:smiBig .9s var(--ease) .1s both}
.lock.hello:hover .hs{animation:tilt .9s var(--ease) both}
.lock.hello:hover .smi{animation:smiBig .8s var(--ease) .1s both}
/* carga: la boca gira, nunca el humo */
.k-spin .smi{opacity:0}
.k-spin .spin{opacity:1;animation:spinM 1.1s cubic-bezier(.5,.1,.5,.9) infinite}

/* ---------- Pantalla de arranque (una vez por pestaña; se va sola aunque falle el JS) ---------- */
.intro{position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--white);display:grid;place-items:center;
  animation:introOut .5s var(--ease) 3.5s forwards;cursor:pointer}
.intro-iso{width:clamp(112px,24vw,168px);height:clamp(112px,24vw,168px);display:block}
.intro-iso .iso{width:100%;height:100%;--hole:var(--ink)}
@keyframes introOut{to{opacity:0;visibility:hidden}}
.intro.out{animation:introOut .35s var(--ease) forwards}
html.seen .intro{display:none}

/* ---------- Etiqueta con punto lila ---------- */
.kick{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--gray-700)}
.kick::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lila);flex:none}
.on-dark .kick{color:#C9C9CE}

/* ---------- Botones (sin íconos dentro) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill);padding:14px 24px;font-weight:700;font-size:15px;transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn:active{transform:scale(.98)}
.btn-ink{background:var(--ink);color:var(--white)} .btn-ink:hover{background:var(--ink-press)}
.btn-gray{background:var(--gray-50);color:var(--ink);font-weight:600} .btn-gray:hover{background:var(--gray-100)}
.btn-lila{background:var(--ink);color:var(--white)} .btn-lila:hover{background:var(--ink-press,#2A2A2A)} /* regla 17-oct: nada con fondo lila; se conserva el nombre de la clase */
.btn-white{background:var(--white);color:var(--ink)}
.on-dark .btn-gray{background:#232326;color:var(--white)}

/* ---------- Selector de idioma ---------- */
.lang-toggle{font-size:13px;font-weight:700;letter-spacing:.02em;padding:8px 13px;border-radius:var(--r-pill);background:var(--gray-50);color:var(--gray-700)}
.lang-toggle:hover{background:var(--gray-100);color:var(--ink)}

/* ---------- Barra superior ---------- */
.top{position:sticky;top:0;z-index:40;background:rgb(255 255 255 / .88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px var(--gutter);padding-top:calc(14px + env(safe-area-inset-top,0px))}
.top .lock{font-size:26px}
.top nav{display:flex;align-items:center;gap:6px}
.top nav a.nl{font-size:14px;font-weight:600;color:var(--gray-700);padding:8px 12px;border-radius:var(--r-pill)}
.top nav a.nl:hover{background:var(--gray-50);color:var(--ink)}
.top .btn{padding:10px 18px;font-size:14px}
@media (max-width:760px){.top nav a.nl{display:none}}

/* ---------- Pie ---------- */
.foot{background:var(--gray-50);padding:64px var(--gutter) 40px;color:var(--gray-700);font-size:14px}
.foot-in{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.foot .lock{font-size:30px;color:var(--ink)}
.foot .tag{margin-top:14px;max-width:300px}
.foot h4{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:12px}
.foot-col a{display:block;margin-bottom:8px}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{max-width:1120px;margin:40px auto 0;padding-top:20px;border-top:1px solid var(--gray-100);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--gray-500)}

/* ---------- Entradas suaves (visibles sin JS) ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity var(--t-emphasis) var(--ease-enter),transform var(--t-emphasis) var(--ease-enter)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .intro{display:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .iso *,.ch{animation:none!important}
  .iso .spin{opacity:0!important}.k-spin .smi{opacity:1!important}
}