/* static/css/landing-shared.css — componentes PÚBLICOS compartidos entre el
   landing y el blog (A1, Fase 2 · W1-LANDING).

   Antes el blog tenía su propio header angosto, sin el menú completo ("se oculta
   el resto del menú y todo se ve más angosto" — bug reportado). La corrección es
   que landing.html y blog_index.html/blog_post.html usen el MISMO header/footer
   (templates/_public_nav.html + _public_footer.html): mismo ancho (max-w-6xl),
   mismos enlaces, mismo look.

   Este archivo trae SOLO las clases de las que depende ese header/footer
   compartido (variables de marca, botón, wordmark, enlaces de nav, icono
   circular). landing.html mantiene su copia inline (así su home no depende de
   este archivo ni corre ningún riesgo si algo cambia aquí); las páginas de blog
   lo cargan porque no tienen ese <style> propio. Si tocas el diseño del
   header/footer, actualiza AQUÍ y en el <style> de landing.html. */

:root {
  --lino:#FBFAF7; --mist:#EEF3F0; --pino:#14564D; --pino-deep:#0F4339;
  --durazno:#F0875A; --salvia:#9DBAB0; --tinta:#1B2B29;
  --text-muted:#56635e; --text-faint:#8a9591;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --dur-fast:140ms; --dur:200ms; --dur-slow:280ms;
}

:focus-visible { outline:3px solid var(--pino); outline-offset:3px; border-radius:8px; }
.btn-primary:focus-visible { outline-color:var(--pino-deep); }

.wordmark { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.02em; }
.mark { width:34px; height:34px; border-radius:11px; flex-shrink:0;
        background:linear-gradient(150deg,var(--pino),var(--pino-deep));
        display:flex; align-items:center; justify-content:center; position:relative;
        box-shadow:0 6px 16px rgba(20,86,77,.28); }
.mark::after { content:""; width:9px; height:9px; border-radius:50%;
               background:var(--durazno); box-shadow:0 0 0 3px rgba(240,135,90,.25); }

.btn { display:inline-flex; align-items:center; gap:8px; border-radius:12px;
       font-weight:700; transition:transform var(--dur-fast) var(--ease-out),
       box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--durazno); color:var(--tinta); box-shadow:0 10px 24px -8px rgba(240,135,90,.6); }
.btn-ghost { color:var(--pino); border:1.5px solid #14564D2e; background:transparent; }
.btn-light { background:#fff; color:var(--pino); box-shadow:0 10px 24px -10px rgba(0,0,0,.3); }

@media (hover:hover) and (pointer:fine) {
  .btn-primary:hover { background:#ec774a; box-shadow:0 14px 30px -8px rgba(240,135,90,.7); }
  .btn-ghost:hover { background:var(--mist); border-color:#14564D55; }
  .btn-light:hover { background:#f3f7f5; }
  a.nav:hover { color:var(--pino); }
  .ic-social:hover { background:#e3efe9; }
}

a.nav { color:var(--text-muted); font-weight:600; font-size:14.5px; text-decoration:none; }
.ic { width:42px; height:42px; border-radius:12px; background:var(--mist);
      display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ic-social { transition:background var(--dur) var(--ease-out); }