/* Tamelis · capa compartida
 * Todo lo que es común a las páginas: reset, grano, nav, botones,
 * cabeceras de sección, listas, bloques de código, pies, reveal.
 * Cada página añade sólo el CSS de su macroestructura.
 *
 * Sistema: design.md · Tokens: tokens.css
 */

@import url('tokens.css');

/* ── Base ─────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{
  margin:0;padding:0;
  overflow-x:clip;              /* clip, no hidden: hidden crea scroll-container */
  max-width:100%;
}
body{
  background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);font-size:var(--text-md);line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* Grano de papel. Rompe la planitud digital sin ser textura visible. */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;
  z-index:var(--z-grain);opacity:0.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%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{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
::selection{background:var(--color-accent);color:var(--color-accent-ink)}

/* El anillo de foco aparece al instante — nunca se transiciona. */
:focus-visible{
  outline:var(--rule-thick) solid var(--color-focus);
  outline-offset:3px;
  border-radius:2px;
}

/* Salto al contenido: obligatorio para navegación por teclado. */
.skip{
  position:absolute;left:var(--space-sm);top:calc(-1 * var(--space-3xl));
  z-index:var(--z-overlay);
  background:var(--color-ink);color:var(--color-paper);
  padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-chip);
  font-size:var(--text-xs);
  transition:top var(--dur-short) var(--ease-out);
}
.skip:focus{top:var(--space-sm)}

/* ── Contenedores ─────────────────────────────────────────────── */
.wrap{max-width:var(--maxw-page);margin:0 auto;padding:0 var(--pad)}
.wrap-hub{max-width:var(--maxw-hub);margin:0 auto;padding:0 var(--pad)}
.wrap-prose{max-width:var(--maxw-prose);margin:0 auto;padding:0 var(--pad)}

/* ── Marca ────────────────────────────────────────────────────── */
.brand{
  display:inline-flex;align-items:center;gap:var(--space-2xs);color:var(--color-ink);
  font-family:var(--font-body);font-weight:600;font-size:1.125rem;
  letter-spacing:var(--tracking-title);line-height:1;
}
.brand-mark{width:1.5rem;height:1.5rem;flex-shrink:0;display:block}

/* ── Nav N6 · masthead (páginas hub) ──────────────────────────── */
.nav-masthead{border-bottom:var(--rule-hair) solid var(--color-rule-2)}
.nav-masthead .nav-inner{
  display:flex;flex-direction:column;align-items:center;
  padding:var(--space-md) 0 0;
}
.nav-masthead .nav-links{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--space-2xs) var(--space-md);
  width:100%;margin-top:var(--space-xs);
  padding:var(--space-xs) 0 0.8125rem;
  border-top:var(--rule-hair) solid var(--color-rule-2);
  font-size:var(--text-xs);color:var(--color-ink-2);
}
.nav-links a{position:relative;white-space:nowrap;transition:color var(--dur-instant) var(--ease-out)}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-4px;height:1.5px;width:0;
  background:var(--color-accent);transition:width var(--dur-short) var(--ease-out);
}
.nav-links a:hover{color:var(--color-ink)}
.nav-links a:hover::after{width:100%}
.nav-links a[aria-current="page"]{color:var(--color-ink);font-weight:500}

/* ── Nav N9 · edge-aligned (páginas de detalle y legales) ─────── */
.nav-edge{
  position:sticky;top:0;z-index:var(--z-sticky);
  backdrop-filter:saturate(150%) blur(16px);
  background:color-mix(in oklab, var(--color-paper) 76%, transparent);
  border-bottom:var(--rule-hair) solid var(--color-rule-2);
}
.nav-edge .nav-inner{
  max-width:var(--maxw-page);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  min-height:4.125rem;
}
.back-link{
  display:inline-flex;align-items:center;gap:var(--space-2xs);
  font-family:var(--font-mono);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-label);color:var(--color-ink-2);white-space:nowrap;
  transition:color var(--dur-instant) var(--ease-out);
}
.back-link:hover{color:var(--color-accent)}

/* ── Botones ──────────────────────────────────────────────────── */
/* Una sola señal por estado. Rectángulo suave, nunca píldora. */
.btn{
  display:inline-flex;align-items:center;gap:var(--space-2xs);
  padding:0.8125rem var(--space-md);border-radius:var(--radius-chip);
  font-size:var(--text-sm);font-weight:500;letter-spacing:-0.005em;
  white-space:nowrap;                    /* el texto clicable nunca hace wrap */
  transition:background var(--dur-short) var(--ease-out),
             color var(--dur-short) var(--ease-out),
             border-color var(--dur-short) var(--ease-out);
}
.btn-primary{background:var(--color-ink);color:var(--color-paper)}
.btn-primary:hover{background:var(--color-accent)}
.btn-primary:active{background:var(--color-accent-2)}
.btn-ghost{color:var(--color-ink-2);border:var(--rule-hair) solid var(--color-rule)}
.btn-ghost:hover{color:var(--color-ink);border-color:var(--color-ink-2)}
.btn-ghost:active{background:var(--color-paper-2)}
.btn-lg{padding:0.9375rem var(--space-md);font-size:var(--text-md)}
.btn[aria-disabled="true"]{opacity:0.45;pointer-events:none}
/* Bloque sólido sobredimensionado — voz de CTA del Manifiesto. */
.btn-block{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  background:var(--color-accent);color:var(--color-accent-ink);
  padding:var(--space-md) var(--space-xl);border-radius:var(--radius-card);
  font-size:var(--text-lg);font-weight:600;letter-spacing:-0.01em;white-space:nowrap;
  transition:background var(--dur-short) var(--ease-out);
}
.btn-block:hover{background:var(--color-ink)}

/* Enlace tipográfico — CTA sin caja. */
.link-cta{
  display:inline-flex;align-items:center;gap:var(--space-3xs);
  font-weight:500;color:var(--color-accent);
  border-bottom:1.5px solid var(--color-accent-wash);
  transition:border-color var(--dur-short) var(--ease-out);
}
.link-cta:hover{border-bottom-color:var(--color-accent)}

/* ── Eyebrow ──────────────────────────────────────────────────── */
/* Filete + minúsculas. Nunca punto pulsante, nunca mayúsculas
   espaciadas. Máximo uno por página (el del hero).                */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  font-family:var(--font-mono);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-label);color:var(--color-ink-3);
}
.eyebrow::before{
  content:'';width:1.625rem;height:1px;flex-shrink:0;background:var(--color-accent);
}

/* ── Hero (base compartida) ───────────────────────────────────── */
.hero{
  position:relative;
  padding:clamp(3.5rem,11vh,7.5rem) 0 var(--section-y);
  border-bottom:var(--rule-hair) solid var(--color-rule-2);
}
h1.title{
  font-family:var(--font-display);font-weight:400;font-style:normal;
  font-size:var(--text-display);line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  margin:var(--space-sm) 0 0;max-width:18ch;
  text-wrap:balance;overflow-wrap:anywhere;min-width:0;
}
h1.title em{font-style:normal;color:var(--color-accent)}
.lede{
  font-size:var(--text-lg);color:var(--color-ink-2);
  max-width:58ch;line-height:1.5;margin:var(--space-md) 0 0;
}
.hero-cta{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-top:var(--space-lg)}

/* ── Secciones ────────────────────────────────────────────────── */
.block{padding:var(--section-y) 0;border-bottom:var(--rule-hair) solid var(--color-rule-2)}
.block-deep{padding:var(--section-y-deep) 0}
.block-tight{padding-top:var(--section-y-tight)}
.block-plain{border-bottom:0}

.sec-title{
  font-family:var(--font-display);font-weight:400;font-style:normal;
  font-size:var(--text-3xl);line-height:var(--leading-title);
  letter-spacing:var(--tracking-title);margin:0;
  text-wrap:balance;overflow-wrap:anywhere;min-width:0;max-width:24ch;
}
.sec-title em{font-style:normal;color:inherit}
.sec-intro{
  color:var(--color-ink-2);font-size:var(--text-lg);
  max-width:62ch;margin:var(--space-md) 0 0;line-height:1.55;
}

/* ── Etiquetas ────────────────────────────────────────────────── */
.tag{
  font-family:var(--font-mono);font-size:var(--text-2xs);
  padding:var(--space-3xs) var(--space-2xs);border-radius:var(--radius-tag);
  border:var(--rule-hair) solid var(--color-rule);color:var(--color-ink-2);
  white-space:nowrap;
}
.tag-row{display:flex;flex-wrap:wrap;gap:var(--space-3xs)}

/* ── Lista de entregables ─────────────────────────────────────── */
.deliver{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(1.75rem,5vw,4.5rem);align-items:start;
}
@media (max-width:52rem){.deliver{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}}
.deliver ul{margin:var(--space-lg) 0 0;padding:0;list-style:none}
.deliver li{
  display:flex;gap:var(--space-xs);padding:var(--space-sm) 0;
  border-top:var(--rule-hair) solid var(--color-rule);
  color:var(--color-ink-2);font-size:var(--text-md);line-height:1.5;
}
.deliver li:last-child{border-bottom:var(--rule-hair) solid var(--color-rule)}
.deliver li svg{flex-shrink:0;margin-top:3px;color:var(--color-accent)}
.deliver li strong{color:var(--color-ink);font-weight:600}
.deliver code{
  font-family:var(--font-mono);font-size:0.86em;
  background:var(--color-paper-3);color:var(--color-ink);
  padding:1px 6px;border-radius:5px;
}

/* ── Bloque de código ─────────────────────────────────────────── */
/* Marco tipográfico: filete + etiqueta. Sin barra de ventana
   falsa ni puntos de semáforo — el usuario ya tiene cromo real.    */
.code-block{
  background:var(--color-code-paper);border-radius:var(--radius-card);
  overflow:hidden;border:var(--rule-hair) solid var(--color-rule-ink);
}
.code-label{
  display:block;padding:var(--space-xs) var(--space-md);
  border-bottom:var(--rule-hair) solid var(--color-rule-ink);
  font-family:var(--font-mono);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-label);color:var(--color-ink-3);
}
.code-block pre{
  margin:0;padding:var(--space-md);overflow-x:auto;
  font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.7;
  color:var(--color-code-ink);
}
.code-block .k{color:var(--color-code-key)}
.code-block .s{color:var(--color-code-str)}
.code-block .n{color:var(--color-code-num)}
.code-block .c{color:var(--color-code-com)}

/* ── CTA de cierre ────────────────────────────────────────────── */
.cta{padding:var(--section-y-deep) 0;background:var(--color-paper-2);text-align:center}
.cta h2{
  font-family:var(--font-display);font-weight:400;font-style:normal;
  font-size:var(--text-display-s);line-height:var(--leading-title);
  letter-spacing:var(--tracking-title);
  margin:0 auto;max-width:18ch;text-wrap:balance;overflow-wrap:anywhere;
}
.cta h2 em{font-style:normal;color:var(--color-accent)}
.cta p{color:var(--color-ink-2);max-width:50ch;margin:var(--space-md) auto 0;font-size:var(--text-md)}
.cta .hero-cta{justify-content:center;margin-top:var(--space-lg)}

/* ── Pie Ft1 · mast-headed (hub) ──────────────────────────────── */
.ftr-mast{border-top:var(--rule-hair) solid var(--color-rule-2)}
.ftr-mast .ftr-inner{
  max-width:var(--maxw-hub);margin:0 auto;padding:var(--section-y) var(--pad);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:var(--space-md);
}
.ftr-tagline{
  font-family:var(--font-display);font-size:var(--text-lg);
  color:var(--color-ink-2);margin:var(--space-2xs) 0 0;
}

/* ── Pie Ft2 · línea única (detalle y legales) ────────────────── */
.ftr-inline{border-top:var(--rule-hair) solid var(--color-rule-2);background:var(--color-paper)}
.ftr-inline .ftr-inner{
  max-width:var(--maxw-page);margin:0 auto;padding:var(--section-y) var(--pad);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:var(--space-md);
}
.ftr-links{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-md);font-size:var(--text-xs)}
.ftr-links a{color:var(--color-ink-2);white-space:nowrap;transition:color var(--dur-instant) var(--ease-out)}
.ftr-links a:hover{color:var(--color-accent)}
.ftr-meta{
  font-family:var(--font-mono);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-label);color:var(--color-ink-3);
}

/* ── Reveal ───────────────────────────────────────────────────── */
/* Una entrada orquestada, sólo en el hero. El resto de la página
   simplemente está ahí. Visible por defecto si no hay JS.          */
.js-anim .reveal{
  opacity:0;transform:translateY(1.625rem);
  transition:opacity var(--dur-long) var(--ease-out),
             transform var(--dur-long) var(--ease-out);
}
.js-anim .reveal.in{opacity:1;transform:none}

/* ── Objetivos táctiles ───────────────────────────────────────── */
/* Por debajo de 40 rem la página es un teléfono: todo lo pulsable
   necesita 44 px de alto (WCAG AA). Se gana con padding vertical,
   sin mover la tipografía de su sitio.                              */
@media (max-width:40rem){
  .nav-links a,.ftr-links a,.back-link,.brand,.link-cta{
    min-height:2.75rem;display:inline-flex;align-items:center;
  }
  .btn,.btn-block,.skip{min-height:2.75rem}
  .nav-links a::after{bottom:0.5rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important}
  .reveal{opacity:1!important;transform:none!important;transition:opacity 150ms linear!important}
}