/* ============================================
   BrandKit · Mark · Theme
   Sistema de diseño: precisión, aire, silencio.
   ============================================ */

:root {
  /* --- Tokens base --- */
  --bg: #fbfaf7;
  --surface: #ffffff;
  --ink: #0e0e0e;
  --ink-2: #5a5a5a;
  --ink-3: #9a9a9a;
  --line: rgba(14, 14, 14, 0.06);
  --line-2: rgba(14, 14, 14, 0.10);
  --shadow-sm: 0 1px 2px rgba(14, 14, 14, 0.03), 0 2px 8px rgba(14, 14, 14, 0.04);
  --shadow-md: 0 1px 2px rgba(14, 14, 14, 0.04), 0 8px 24px rgba(14, 14, 14, 0.05);

  /* --- Marca · gradiente oficial --- */
  --brand-amber: #ffa916;
  --brand-magenta: #ff0173;
  --gradient: linear-gradient(90deg, #ffa916, #ff0173);

  /* --- Paleta expresiva --- */
  --mark-terracota: #d97b6c;
  --mark-rosa: #f4a8b4;
  --mark-durazno: #f3b178;
  --mark-mostaza: #e8b94a;

  /* --- Acentos sistema --- */
  --accent: var(--brand-magenta);
  --accent-2: var(--brand-amber);

  /* --- Tipografía --- */
  --font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Escala de espaciado (múltiplos de 8) --- */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;
  --s-9: 192px;

  /* --- Radius --- */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;

  /* --- Section padding --- */
  --section-pad: clamp(80px, 12vh, 160px);

  /* --- Tracking caps unificado --- */
  --tracking-caps: 0.22em;
}

/* ============================================
   Overrides de base.css
   ============================================ */
html, body { background: var(--bg); color: var(--ink); }
body { font-family: var(--font); -webkit-font-smoothing: antialiased; }

.section {
  background: var(--bg);
  padding: var(--section-pad) 0;
  display: block;
  min-height: 0;
}
.section .container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 48px);
}
.section + .section { border-top: 1px solid var(--line); }
.section__title {
  color: var(--ink);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.section__subtitle {
  color: var(--ink-2);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 400;
  line-height: 1.4;
  max-width: 640px;
  margin: var(--s-3) auto 0;
}

/* Section header (centrado, con gap fijo entre eyebrow / título / subtítulo) */
.s-head {
  text-align: center;
  margin-bottom: var(--s-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.s-head .section__title { margin: 0; }
.s-head .section__subtitle { margin: 0; }

/* Eyebrow uniforme */
.eyebrow {
  font-size: clamp(0.66rem, 1vw, 0.78rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-2);
}

/* Util */
.center { text-align: center; }
.stack { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }

/* Focus visible globally */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================
   Back button & Auth (tema claro)
   ============================================ */
.back-btn {
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-weight: 500;
}
.back-btn:hover { background: var(--bg); }
.back-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.auth-overlay { background: var(--bg); }
.auth-card, .auth-title { color: var(--ink); }
.auth-subtitle { color: var(--ink-2); }
.auth-input { background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); }
.auth-input::placeholder { color: var(--ink-3); }
.auth-input:focus { border-color: var(--ink); }
.auth-submit { background: var(--ink); color: #fff; }
.auth-lock { color: var(--ink); }

/* ============================================
   Hero
   ============================================ */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40rem 30rem at 20% 20%, rgba(255, 169, 22, 0.10), transparent 60%),
    radial-gradient(40rem 30rem at 80% 80%, rgba(255, 1, 115, 0.10), transparent 60%);
  pointer-events: none;
}
.hero .container { position: relative; }

.hero__eyebrow { margin-bottom: var(--s-5); display: inline-block; }

.hero__title {
  font-size: clamp(4rem, 11vw, 8.5rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.0;
  color: var(--ink);
}
.hero__title em {
  font-style: italic;
  font-weight: 600;
}

.hero__sub {
  margin-top: var(--s-5);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-2);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

/* ============================================
   Esencia
   ============================================ */
.essence {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.75;
  color: var(--ink);
  max-width: 760px;
  margin: var(--s-5) auto 0;
}
.essence em { font-style: italic; color: var(--ink); }

.pill {
  display: inline-block;
  padding: 0.18em 0.75em;
  margin: 0 0.12em;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-style: normal;
  line-height: 1.1;
  vertical-align: baseline;
}
.pill--magenta   { color: var(--brand-magenta); }
.pill--amber     { color: var(--brand-amber); }
.pill--terracota { color: var(--mark-terracota); }
.pill--rosa      { color: var(--mark-rosa); }
.pill--durazno   { color: var(--mark-durazno); }
.pill--mostaza   { color: var(--mark-mostaza); }

.mission {
  margin-top: var(--s-6);
  font-size: 1rem;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mission strong { color: var(--ink); font-weight: 600; }

/* Manifesto · 4 bloques de propuesta de valor */
.manifesto {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-7);
  text-align: left;
}
@media (max-width: 720px) { .manifesto { grid-template-columns: 1fr; } }

.manifesto__item {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.manifesto__item .eyebrow { color: var(--ink-3); }
.manifesto__item p:not(.eyebrow) {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.manifesto__item p em { font-style: italic; }

/* ============================================
   Logo · Specimens
   ============================================ */
.specimens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
@media (max-width: 720px) { .specimens { grid-template-columns: 1fr; } }

.specimen {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.specimen__canvas {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: clamp(40px, 8vw, 96px);
}
@supports not (aspect-ratio: 4 / 3) {
  .specimen__canvas { padding-bottom: 75%; height: 0; position: relative; }
  .specimen__canvas img { position: absolute; inset: 0; margin: auto; }
}
.specimen__canvas--light { background: var(--surface); }
.specimen__canvas--dark { background: var(--ink); }
.specimen__canvas img {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
}
.specimen__meta {
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.specimen__name { font-weight: 500; font-size: 1rem; letter-spacing: -0.01em; }
.specimen__note { font-size: 0.85rem; color: var(--ink-2); line-height: 1.5; }

/* Rule cards */
.rule-card {
  margin-top: var(--s-5);
  padding: var(--s-5);
  border-left: 2px solid var(--brand-magenta);
  background: var(--surface);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.6;
  box-shadow: var(--shadow-sm);
}
.rule-card strong { font-weight: 600; }
.rule-card em { font-style: italic; }

/* Subheader interno */
.subhead { text-align: center; margin: var(--s-7) 0 var(--s-3); }
.subhead__label {
  font-size: clamp(0.66rem, 1vw, 0.78rem);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Área de seguridad */
.safe-area {
  position: relative;
  padding: var(--s-7);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
  display: grid;
  place-items: center;
  min-height: 320px;
}
.safe-area img { max-width: 200px; height: auto; display: block; }
.safe-area__corner {
  position: absolute;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.safe-area__corner--tl { top: var(--s-2); left: var(--s-2); }
.safe-area__corner--tr { top: var(--s-2); right: var(--s-2); }
.safe-area__corner--bl { bottom: var(--s-2); left: var(--s-2); }
.safe-area__corner--br { bottom: var(--s-2); right: var(--s-2); }

/* Tamaño mínimo */
.min-sizes {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s-6);
  flex-wrap: wrap;
  padding: var(--s-6) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.min-sizes__item { text-align: center; }
.min-sizes__item img { display: block; margin: 0 auto var(--s-2); }
.min-sizes__label { font-size: 0.78rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.min-sizes__label strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: 2px; }

/* Don'ts grid */
.donts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
@media (max-width: 880px) { .donts { grid-template-columns: repeat(2, 1fr); } }

.dont {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dont__canvas {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  position: relative;
  overflow: hidden;
}
.dont__canvas img { width: 100%; max-width: 110px; height: auto; }
.dont__canvas::before,
.dont__canvas::after {
  content: '';
  position: absolute;
  width: 70%;
  height: 1.5px;
  background: var(--brand-magenta);
  opacity: 0.85;
  top: 50%;
  left: 15%;
  transform-origin: center;
}
.dont__canvas::before { transform: rotate(45deg); }
.dont__canvas::after { transform: rotate(-45deg); }
.dont__label {
  padding: var(--s-2) var(--s-3) var(--s-3);
  font-size: 0.82rem;
  color: var(--ink-2);
  text-align: center;
  border-top: 1px solid var(--line);
  background: var(--surface);
  line-height: 1.4;
}

/* Demos visuales dentro de don'ts (cuando hace falta simular el error) */
.dont__demo--circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--mark-rosa);
  display: grid;
  place-items: center;
}
.dont__demo--circle img { max-width: 80px; }
.dont__demo--gradient {
  width: 130px;
  height: 130px;
  display: grid;
  place-items: center;
}
.dont__demo--gradient img {
  max-width: 110px;
  filter: drop-shadow(0 0 0 transparent);
}
.dont__demo--gradient {
  background: var(--gradient);
  -webkit-mask: url(../assets/logos/logo-negro.png) center / contain no-repeat;
          mask: url(../assets/logos/logo-negro.png) center / contain no-repeat;
}
.dont__demo--stretch img { transform: scaleX(1.5); max-width: 90px; }
.dont__demo--shadow img { filter: drop-shadow(6px 6px 0 var(--brand-magenta)); }

/* ============================================
   Personalidades · Galería
   ============================================ */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
@media (max-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .gallery { grid-template-columns: repeat(2, 1fr); } }

.persona {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.persona__frame {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.persona__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.persona__name {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.persona__desc {
  font-size: 0.82rem;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Tabla de contexto de uso */
.context-table {
  margin-top: var(--s-8);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.context-row {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  align-items: start;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}
.context-row:first-child {
  border-top: 0;
  background: var(--bg);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.context-row__name { font-weight: 600; color: var(--ink); }
.context-row__use, .context-row__copy { color: var(--ink-2); line-height: 1.5; }
.context-row__copy { font-variant-numeric: tabular-nums; }
.context-row__copy em { font-style: italic; color: var(--ink); }
@media (max-width: 720px) {
  .context-row { grid-template-columns: 1fr; gap: var(--s-1); }
  .context-row:first-child { display: none; }
  .context-row__name::before { content: 'Personalidad — '; font-size: 0.7rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); font-weight: 500; display: block; margin-bottom: 4px; }
  .context-row__use::before { content: 'Cuándo'; font-size: 0.7rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); font-weight: 500; display: block; margin-top: var(--s-1); margin-bottom: 4px; }
  .context-row__copy::before { content: 'Ejemplo'; font-size: 0.7rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); font-weight: 500; display: block; margin-top: var(--s-1); margin-bottom: 4px; }
}

/* ============================================
   Paleta
   ============================================ */
.gradient-hero {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.gradient-hero__bar {
  height: clamp(180px, 26vh, 260px);
  background: linear-gradient(90deg, #ffa916 0%, #ff0173 100%);
}
.gradient-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  font-size: 0.92rem;
}
.gradient-hero__stops { display: flex; gap: var(--s-4); font-variant-numeric: tabular-nums; }
.gradient-hero__stop { display: flex; align-items: center; gap: var(--s-1); color: var(--ink); font-weight: 500; }
.gradient-hero__chip { width: 14px; height: 14px; border-radius: 50%; }
.gradient-hero__rule { color: var(--ink-2); }

.swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
@media (max-width: 880px) { .swatches { grid-template-columns: repeat(2, 1fr); } }

.swatch {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.swatch__color { height: 140px; width: 100%; }
.swatch__meta { padding: var(--s-2) var(--s-3) var(--s-3); }
.swatch__name { font-size: 0.98rem; font-weight: 600; letter-spacing: -0.005em; }
.swatch__hex {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-2);
  margin-top: var(--s-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.swatch__role { font-size: 0.8rem; color: var(--ink-2); margin-top: var(--s-1); line-height: 1.4; }

/* Reglas de combinación */
.combo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-3);
}
@media (max-width: 720px) { .combo-grid { grid-template-columns: 1fr; } }

.combo {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.combo__demo {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.combo__meta { padding: var(--s-2) var(--s-3) var(--s-3); }
.combo__title { font-weight: 600; font-size: 0.95rem; }
.combo__note { font-size: 0.82rem; color: var(--ink-2); margin-top: 4px; line-height: 1.4; }

/* ============================================
   Tipografía
   ============================================ */
.type-hero {
  padding: var(--s-7) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.type-hero__family {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  margin-bottom: var(--s-2);
}
.type-hero__meta {
  font-size: 0.88rem;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.type-hero__alphabet {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--ink-2);
  letter-spacing: 0.01em;
  line-height: 1.6;
}
.type-hero__alphabet strong { color: var(--ink); font-weight: 500; }

.weights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-6);
}
@media (max-width: 880px) { .weights { grid-template-columns: repeat(2, 1fr); } }

.weight {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
}
.weight__sample {
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.weight__sample--400 { font-weight: 400; }
.weight__sample--500 { font-weight: 500; }
.weight__sample--700 { font-weight: 700; }
.weight__sample--italic { font-style: italic; font-weight: 500; }
.weight__label {
  display: block;
  margin-top: var(--s-3);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.weight__use {
  font-size: 0.85rem;
  color: var(--ink-2);
  margin-top: var(--s-1);
  line-height: 1.5;
}
.weight__use em { font-style: italic; color: var(--ink); }

/* Showcase de formatos: 3 devices a escala alineados por base */
.format-showcase {
  padding: var(--s-7) var(--s-5) calc(var(--s-7) + var(--s-4));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(40px, 7vw, 96px);
  flex-wrap: wrap;
}
.device {
  border-radius: 16px;
  padding: var(--s-3);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  box-shadow: 0 12px 32px rgba(14, 14, 14, 0.10);
}
.device__title {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-shadow: 0 1px 2px rgba(14, 14, 14, 0.12);
}
.device__sub {
  font-weight: 500;
  opacity: 0.92;
  margin-top: 4px;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 1px rgba(14, 14, 14, 0.1);
}
.device__body { font-size: 0.7rem; line-height: 1.4; opacity: 0.7; margin-top: var(--s-1); }
.device__ratio {
  position: absolute;
  bottom: -32px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.device--post {
  width: 200px;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #ff0173 0%, #ffa916 100%);
}
.device--post .device__title { font-size: 1.3rem; }
.device--post .device__sub   { font-size: 0.74rem; }

.device--story {
  width: 150px;
  aspect-ratio: 9 / 16;
  background: linear-gradient(180deg, #ff0173 0%, #ffa916 100%);
}
.device--story .device__title { font-size: 1.25rem; }
.device--story .device__sub   { font-size: 0.7rem; }

.device--software {
  width: 260px;
  aspect-ratio: 4 / 3;
  background: var(--ink);
}
.device--software .device__title { font-size: 1.2rem; }
.device--software .device__sub   { font-size: 0.78rem; }

/* Tablas de specs en grid de 3 (comparable) */
.format-tables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-7);
}
@media (max-width: 880px) { .format-tables { grid-template-columns: 1fr; } }

.format-table {
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.format-table__name { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.format-table__dims {
  font-size: 0.72rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 4px 0 var(--s-3);
}
.format-table__rows {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  font-size: 0.85rem;
  margin: 0;
}
.format-table__rows dt { color: var(--ink-3); font-weight: 400; margin: 0; }
.format-table__rows dd { color: var(--ink); font-variant-numeric: tabular-nums; margin: 0; }

.type-rule {
  text-align: center;
  margin-top: var(--s-8);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--ink-2);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}
.type-rule strong { color: var(--ink); font-weight: 600; }
.type-rule em { font-style: italic; }

/* ============================================
   Voz · Tono
   ============================================ */
.voice-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
@media (max-width: 720px) { .voice-cards { grid-template-columns: 1fr; } }

.voice-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.voice-card__header {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: var(--s-4);
  color: var(--ink-2);
}
.voice-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.voice-card__list li {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  padding-left: var(--s-2);
  border-left: 2px solid var(--line-2);
}
.voice-card__list li em { font-style: italic; }
.voice-card--do .voice-card__list li { border-left-color: var(--brand-amber); }
.voice-card--dont .voice-card__list li { border-left-color: var(--brand-magenta); }

/* ============================================
   Personaje
   ============================================ */
.character {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: stretch;
}
@media (max-width: 880px) { .character { grid-template-columns: 1fr; gap: var(--s-5); } }

.character__photo {
  width: 100%;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-md);
}
.character__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rules {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  justify-content: center;
}
.rule {
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s-3);
  align-items: start;
}
.rule:first-child { border-top: 0; padding-top: 0; }
.rule__num {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.rule__title {
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-1);
  color: var(--ink);
}
.rule__body {
  font-size: 0.98rem;
  color: var(--ink-2);
  line-height: 1.55;
}

/* ============================================
   Aplicaciones
   ============================================ */
.apps {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-3);
}
@media (max-width: 880px) { .apps { grid-template-columns: 1fr; } }

.app {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.app--post { grid-column: span 6; }
.app--story { grid-column: span 6; }
.app--ui { grid-column: span 12; }
.app--merch { grid-column: span 6; }
.app--sig { grid-column: span 6; }
@media (max-width: 880px) {
  .app--post, .app--story, .app--ui, .app--merch, .app--sig { grid-column: span 1; }
}

.app__canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 3vw, 32px);
  color: #fff;
  min-height: 0;
}
.app__canvas--post {
  background: linear-gradient(135deg, #ff0173 0%, #ffa916 100%);
  aspect-ratio: 1;
  width: 100%;
  max-width: 340px;
  margin: var(--s-4) auto;
  border-radius: var(--r-md);
}
.app__canvas--story {
  background: linear-gradient(180deg, #ff0173 0%, #ffa916 100%);
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 220px;
  margin: var(--s-4) auto;
  border-radius: var(--r-md);
}
.app__canvas--ui { background: var(--bg); color: var(--ink); aspect-ratio: 16 / 9; padding: 0; }
.app__canvas--merch { background: var(--mark-rosa); aspect-ratio: 4 / 3; }
.app__canvas--sig {
  background: var(--surface);
  color: var(--ink);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.app__mark { height: 28px; width: auto; opacity: 0.95; }
.app__mark--lg { height: 48px; }

.app__canvas--post .app__mark { height: 26px; }
.app__canvas--story .app__mark { height: 22px; }

.app__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: var(--s-3);
}
.app__handle {
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.9;
  letter-spacing: -0.005em;
}
.app__canvas--story .app__handle { font-size: 0.72rem; }
.app__title {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.98;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  text-shadow: 0 1px 2px rgba(14, 14, 14, 0.12);
}
.app__sub { font-weight: 500; opacity: 0.92; margin-top: var(--s-1); font-size: clamp(0.85rem, 1.3vw, 1rem); text-shadow: 0 1px 1px rgba(14, 14, 14, 0.1); }

.app__canvas--post .app__title { font-size: 1.7rem; }
.app__canvas--post .app__sub   { font-size: 0.85rem; }
.app__canvas--story .app__title { font-size: 1.5rem; }
.app__canvas--story .app__sub   { font-size: 0.78rem; }

/* UI mockup */
.ui-mock {
  display: grid;
  grid-template-columns: 200px 1fr;
  height: 100%;
  font-family: var(--font);
}
@media (max-width: 720px) { .ui-mock { grid-template-columns: 1fr; } .ui-mock__side { display: none; } }
.ui-mock__side {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: var(--s-3) var(--s-3);
}
.ui-mock__brand { display: flex; align-items: center; gap: var(--s-1); font-weight: 600; }
.ui-mock__brand img { height: 22px; }
.ui-mock__nav { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); font-size: 0.85rem; color: var(--ink-2); }
.ui-mock__nav span:first-child { color: var(--ink); font-weight: 500; }
.ui-mock__main { padding: var(--s-4); background: var(--bg); display: flex; flex-direction: column; gap: var(--s-2); }
.ui-mock__h1 { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; }
.ui-mock__body { font-size: 0.9rem; color: var(--ink-2); }
.ui-mock__cta {
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffa916, #ff0173);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: -0.005em;
  margin-top: var(--s-2);
}

/* Sticker / merch */
.merch {
  width: 60%;
  aspect-ratio: 1;
  background: var(--surface);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.merch img { width: 70%; height: auto; }

/* Firma email · stack de fundadores */
.sig {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.sig + .sig {
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.sig img { width: 48px; height: auto; flex-shrink: 0; }
.sig__lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sig__name { font-weight: 600; font-size: 0.98rem; color: var(--ink); letter-spacing: -0.01em; }
.sig__role { font-size: 0.82rem; color: var(--ink-2); }
.sig__url { font-size: 0.8rem; color: var(--brand-magenta); margin-top: 2px; }

.app__meta {
  padding: var(--s-3) var(--s-4) var(--s-4);
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app__name { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.app__note { font-size: 0.85rem; color: var(--ink-2); line-height: 1.5; }

/* ============================================
   Anexo · Formatos
   ============================================ */
.formats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
@media (max-width: 720px) { .formats { grid-template-columns: 1fr; } }

.format {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.format__ext {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.format__name {
  font-weight: 600;
  font-size: 1.05rem;
  margin-top: var(--s-1);
  letter-spacing: -0.01em;
}
.format__desc {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-top: var(--s-1);
  line-height: 1.5;
}

/* ============================================
   Cierre
   ============================================ */
#closing {
  background: var(--ink);
  color: #fff;
  border-top: 0;
}
#closing .section__title {
  color: #fff;
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
}
#closing .section__subtitle { color: rgba(255, 255, 255, 0.55); margin-top: var(--s-3); }

/* ============================================
   TOC · Navegación lateral derecha
   ============================================ */
.toc {
  position: fixed;
  top: 50%;
  right: clamp(20px, 3vw, 40px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 100;
  pointer-events: auto;
}
@media (max-width: 1100px) { .toc { display: none; } }

.toc__item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink-2);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 6px 8px;
  border-radius: 999px;
  transition: color 0.25s ease, background 0.25s ease;
}
.toc__item:hover { color: var(--ink); background: rgba(14, 14, 14, 0.04); }
.toc__item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.toc__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  flex-shrink: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}
.toc__num {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  transition: color 0.25s ease;
  min-width: 16px;
}
.toc__label {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
.toc:hover .toc__label,
.toc__item--active .toc__label {
  opacity: 1;
  transform: translateX(0);
}

.toc__item--active { color: var(--ink); }
.toc__item--active .toc__dot {
  background: var(--brand-magenta);
  transform: scale(1.6);
}
.toc__item--active .toc__num { color: var(--ink); }

/* ============================================
   Animaciones · estado inicial
   ============================================ */
.fade-in { opacity: 0; transform: translateY(20px); }