/* =========================================================
   PLASTILINA — CORE VISUAL ENGINE
   Operational DNA · Brand Book v2.0 · Mayo 2026
   ---------------------------------------------------------
   Esto no es una hoja de estilos: es la constitución viva
   de Plastilina, escrita en variables, ritmo y silencios.
   ---------------------------------------------------------
   TABLA DE CAPÍTULOS

     00 · TOKENS                  variables del sistema
     01 · RESET & BASE            superficie inicial
     02 · MATERIA Y GRANO         textura física
     03 · LEYES TIPOGRÁFICAS      voz editorial
     04 · PRIMITIVAS DE LAYOUT    shell, section, grid
     05 · SUPERFICIES             surfaces, preview-frame
     06 · ÁTOMOS DE COGNICIÓN     eyebrow, caption, ornament
     07 · NAVEGACIÓN              topbar, web-nav, tabs
     08 · BOTONES                 acción
     09 · CHIPS & ETIQUETAS       estado
     10 · CALLOUTS                énfasis editorial
     11 · CARDS                   contenedor base
     12 · FORMULARIOS             input + newsletter
     13 · TABLAS                  datos editoriales
     14 · ÁTOMOS DE LECTURA       pull-quote, dropcap, footnote
     15 · MÓDULOS NUMÉRICOS       stat, testimonial, logo-strip
     16 · MÓDULOS DE OFERTA       pricing, faq, manifesto
     17 · AUTO-DOCS               voice, lex, token-table, ramp
     18 · HERO PATTERN            apertura editorial
     19 · IDENTITY STRIP          esencia visual
     20 · COLOR PATTERNS          swatches, rules
     21 · TYPOGRAPHY DEMO         type-grid, type-spec
     22 · CHARACTER PATTERNS      La Guía
     23 · SOCIAL PATTERNS         redes
     24 · EBOOK PATTERNS          interiores
     25 · LANDING PATTERNS        producto digital
     26 · FOOTER
     27 · UTILIDADES              lift, sr-only
     28 · ACCESIBILIDAD
     29 · IMPRESIÓN

   ---------------------------------------------------------
   PRINCIPIOS NO NEGOCIABLES

     · Aire es diseño, no derroche.
     · Paleta cerrada: 6 colores · max 3 activos por pieza.
     · Cursivas en Terra solo sobre Display / H1 / H2 / lede.
     · Sin gradientes eléctricos. Sin glassmorphism.
     · Materia: grano sutil (~5%) sobre toda superficie clara.
     · Sombras suaves, nunca duras. Cuatro alturas, no más.
     · Ritmo vertical anclado al 8pt grid.
     · Breakpoints: md=900px · lg=1100px.

   ========================================================= */


/* =========================================================
   00 · TOKENS
   ---------------------------------------------------------
   Cualquier producto Plastilina se construye combinando
   estos tokens. No se inventan valores nuevos — se compone
   con los existentes.
   ========================================================= */
:root {

  /* ---- 00.A · Paleta oficial (locked) ---- */
  --deep:     #3E5F68;   /* primario · estructura, titulares */
  --sage:     #8FA37E;   /* soporte vegetal */
  --mostaza:  #D6A64B;   /* calidez · callouts · acento sobre Deep */
  --crema:    #F5EFE4;   /* superficie base */
  --crema-2:  #EFE7D6;   /* superficie hundida */
  --terra:    #D4683E;   /* acento · CTA · cursivas */
  --ink:      #2B2B2B;   /* texto por defecto */

  /* ---- 00.B · Alias semánticos ---- */
  --bg:               var(--crema);
  --text:             var(--ink);
  --line:             rgba(43, 43, 43, 0.10);   /* borde suave */
  --line-2:           rgba(43, 43, 43, 0.18);   /* borde marcado */

  --surface-base:     var(--crema);
  --surface-raised:   #FAF6EC;
  --surface-sunken:   var(--crema-2);
  --surface-deep:     var(--deep);
  --surface-ink:      var(--ink);

  --text-strong:      var(--deep);
  --text-default:     var(--ink);
  --text-muted:       rgba(43, 43, 43, 0.65);
  --text-faint:       rgba(43, 43, 43, 0.45);
  --text-inverse:     var(--crema);
  --text-accent:      var(--terra);
  --text-link:        var(--terra);

  --border-soft:      var(--line);
  --border-strong:    var(--line-2);
  --border-dark:      rgba(245, 239, 228, 0.20);

  /* ---- 00.C · Estados ---- */
  --status-ok-bg:     rgba(143, 163, 126, 0.20);
  --status-ok-fg:     #4d6840;
  --status-warn-bg:   rgba(214, 166, 75, 0.22);
  --status-warn-fg:   #7a5817;
  --status-stop-bg:   rgba(212, 104, 62, 0.18);
  --status-stop-fg:   #8a3818;

  /* ---- 00.D · Escala de espaciado (base 4 · ritmo 8pt) ---- */
  --s-0:   0;
  --s-1:   4px;     /* hairlines · gaps de chip */
  --s-2:   8px;     /* stack interno mínimo */
  --s-3:   12px;    /* gap default cluster */
  --s-4:   16px;    /* stack vertical · gap base */
  --s-5:   24px;    /* gap de cards · padding medio */
  --s-6:   32px;    /* padding card grande */
  --s-7:   48px;    /* gap entre módulos */
  --s-8:   64px;    /* shell horizontal · hero */
  --s-9:   96px;    /* padding vertical de sección */
  --s-10:  128px;   /* aperturas excepcionales */

  /* ---- 00.E · Radios ---- */
  --r-0:      0;
  --r-1:      4px;
  --r-2:      8px;
  --r-3:      12px;
  --r-4:      16px;     /* === --r-card */
  --r-5:      24px;
  --r-pill:   999px;

  --r-card:   16px;     /* alias semántico · cards, spreads, social frames */
  --r-btn:    10px;     /* alias semántico · botones, inputs, pills internas */
  --r-tag:    6px;      /* alias semántico · tags */

  /* ---- 00.F · Jerarquía de sombras (4 alturas, no más) ---- */
  --shadow-minimal:   0 2px 8px  rgba(62, 95, 104, 0.06);
  --shadow-soft:      0 4px 12px rgba(62, 95, 104, 0.08);
  --shadow-std:       0 8px 24px rgba(62, 95, 104, 0.12);
  --shadow-elev:      0 16px 40px rgba(62, 95, 104, 0.16);

  /* ---- 00.G · Motion ---- */
  --ease-out:         cubic-bezier(0.2, 0.7, 0.2, 1);   /* default Plastilina */
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);     /* solo simétricas */
  --dur-fast:         140ms;   /* hover, focus */
  --dur-base:         220ms;   /* default editorial */
  --dur-slow:         360ms;   /* aperturas, cambios de superficie */
  --dur-deliberate:   600ms;   /* entradas escenográficas (raro) */

  /* ---- 00.H · Foco ---- */
  --focus-ring:       0 0 0 3px rgba(212, 104, 62, 0.45);

  /* ---- 00.I · Z-index ---- */
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   100;
  --z-overlay:  500;
  --z-modal:    1000;

  /* ---- 00.J · Anchos de contenido ---- */
  --w-measure:  64ch;     /* línea de lectura */
  --w-narrow:   720px;    /* artículo */
  --w-default:  1180px;   /* sección */
  --w-wide:     1440px;   /* shell */

  /* ---- 00.K · Tipografía (familias + roles) ---- */
  --f-display:  "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --f-brand:    "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --f-body:     "Inter Tight", "Inter", system-ui, sans-serif;
  --f-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}


/* =========================================================
   01 · RESET & BASE
   ---------------------------------------------------------
   Punto cero. Box-sizing universal, márgenes anulados,
   imagen como bloque. El cuerpo nace ya con la voz Plastilina.
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--text);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }


/* =========================================================
   02 · MATERIA Y GRANO
   ---------------------------------------------------------
   Toda superficie Plastilina respira materia. El grano
   nunca llega al primer plano: vive entre 4–6% de opacidad,
   en mix-blend-mode multiply (sobre claro) u overlay (sobre
   oscuro). Sin grano, una pieza deja de ser Plastilina.
   ========================================================= */

/* Cubierta de grano global · multiply sobre todo el viewport */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.17  0 0 0 0 0.17  0 0 0 0 0.17  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.05;
  mix-blend-mode: multiply;
  z-index: 9999;
}

/* .grain — utilidad opcional para reforzar grano dentro de una pieza */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.17  0 0 0 0 0.17  0 0 0 0 0.17  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 240px 240px;
  mix-blend-mode: multiply;
  opacity: 0.045;
  z-index: 2;
}

/* Nota — las superficies oscuras (ebook-cover, cta-strip, manifesto,
   footer) usan overlay con un noise blanco al 6%. Esos bloques llevan
   su propio ::before en sus capítulos respectivos. */


/* =========================================================
   03 · LEYES TIPOGRÁFICAS
   ---------------------------------------------------------
   Cuatro familias, cuatro oficios.
     · Display  → Instrument Serif (voz editorial)
     · Brand    → Bricolage Grotesque (wordmark + H3)
     · Body     → Inter Tight (lectura larga, UI)
     · Mono     → JetBrains Mono (metadata, captions)

   REGLA DE LA CURSIVA TERRA · Plastilina firma sus acentos.
   <em> dentro de Display, H1, H2 o .lede se vuelve italic
   y cambia a Terra. Nunca dentro de cuerpo largo.

   TRACKING · ramp inverso al tamaño.
     · Display XL/L : -0.020 a -0.022em
     · H1 / H2      : -0.016 a -0.018em
     · H3 / lede    : -0.014 a -0.022em
     · Body         : -0.005em (sutil)
     · Mono         :  +0.02em (técnico, más aire)
   ========================================================= */

.display-xl {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(72px, 9vw, 140px);
  line-height: 0.86;
  letter-spacing: -0.022em;
}
.display-l {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(56px, 6.4vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.018em;
}
.h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.016em;
}
.h3 {
  font-family: var(--f-brand);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.022em;
}
.lede {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.35;
  letter-spacing: -0.014em;
  color: var(--deep);
}
.body  { font-size: 17px; line-height: 1.55; }
.small { font-size: 14px; line-height: 1.55; }
.caption {
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: 0.7;
}
.wordmark {
  font-family: var(--f-brand);
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* Regla de la cursiva Terra · solo display + lede */
.display-xl em,
.display-l em,
.h1 em,
.h2 em,
.lede em {
  font-style: italic;
  color: var(--terra);
}


/* =========================================================
   04 · PRIMITIVAS DE LAYOUT
   ---------------------------------------------------------
   El sistema respira por defecto. Sección = 96px verticales.
   Shell = 1440 con paddings de 64. Las primitivas (.stack,
   .cluster, .grid-*) se usan dentro de cualquier contexto.
   ========================================================= */

/* Shell — ancho máximo + paddings laterales */
.shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 64px;
}
@media (max-width: 900px) {
  .shell { padding: 0 24px; }
}

/* Sección — ritmo vertical canónico */
section {
  padding: 96px 0;
  border-bottom: 1px solid var(--line);
}
section:last-of-type { border-bottom: none; }

/* Cabecera de sección — índice + título + lede */
.section-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  margin-bottom: 64px;
  align-items: start;
}
.section-head .index {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep);
  padding-top: 8px;
  border-top: 1px solid var(--deep);
  width: fit-content;
}
.section-head .index span { display: block; opacity: 0.7; margin-top: 4px; }
.section-head .title h2 { margin: 0 0 16px; }
.section-head .title p  { margin: 0; max-width: 56ch; color: var(--deep); }

@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
}

/* Stack — separación vertical homogénea entre hermanos */
.stack > * + * { margin-top: var(--stack, 16px); }
.stack-2 { --stack: 8px;  }
.stack-3 { --stack: 12px; }
.stack-4 { --stack: 16px; }
.stack-5 { --stack: 24px; }
.stack-6 { --stack: 32px; }
.stack-7 { --stack: 48px; }
.stack-8 { --stack: 64px; }

/* Cluster — fila wrap con gap */
.cluster        { display: flex; flex-wrap: wrap; gap: var(--cluster, 12px); align-items: center; }
.cluster-tight  { --cluster: 8px;  }
.cluster-loose  { --cluster: 24px; }

/* Row — fila sin wrap */
.rowf           { display: flex; gap: var(--rowf, 16px); align-items: var(--rowf-align, center); }
.rowf-between   { justify-content: space-between; }
.rowf-end       { justify-content: flex-end; }

/* Grids canónicos */
.grid-12   { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.grid-4    { display: grid; grid-template-columns: repeat(4, 1fr);  gap: 24px; }
.grid-3    { display: grid; grid-template-columns: repeat(3, 1fr);  gap: 24px; }
.grid-2    { display: grid; grid-template-columns: repeat(2, 1fr);  gap: 24px; }
.auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }

@media (max-width: 900px) {
  .grid-12, .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
}

/* Anchos de medida */
.measure { max-width: var(--w-measure); }
.narrow  { max-width: var(--w-narrow); }


/* =========================================================
   05 · SUPERFICIES
   ---------------------------------------------------------
   Cinco superficies semánticas + frame de previsualización.
   El color del texto se ajusta automáticamente sobre fondos
   oscuros.
   ========================================================= */
.surface          { background: var(--surface-base);   color: var(--text-default); }
.surface-raised   { background: var(--surface-raised); }
.surface-sunken   { background: var(--surface-sunken); }
.surface-deep     { background: var(--surface-deep);   color: var(--text-inverse); }
.surface-sage     { background: var(--sage);           color: var(--text-inverse); }
.surface-mostaza  { background: var(--mostaza);        color: var(--deep); }
.surface-terra    { background: var(--terra);          color: var(--text-inverse); }
.surface-ink      { background: var(--ink);            color: var(--text-inverse); }

/* Marco de previsualización editorial (líneas discontinuas + etiqueta) */
.preview-frame {
  background: var(--crema);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-card);
  padding: 32px;
  position: relative;
  margin-bottom: 16px;
}
.preview-frame.tight { padding: 16px; }
.preview-frame .pf-label {
  position: absolute; top: -10px; left: 16px;
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--crema); padding: 0 8px;
  color: var(--terra);
}


/* =========================================================
   06 · ÁTOMOS DE COGNICIÓN
   ---------------------------------------------------------
   Pequeñas piezas que orientan al lector: eyebrow / kicker,
   captions, placeholders, ornamentos. Aparecen en todas las
   superficies — son la lengua común del sistema.
   ========================================================= */

/* Eyebrow / kicker — micro-rótulo con identidad Terra */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.eyebrow.muted       { color: var(--deep); opacity: 0.7; }
.eyebrow.bar         { padding-top: 8px; border-top: 1px solid currentColor; }

/* Placeholder note · aviso suave de asset pendiente */
.placeholder-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.45;
  margin-top: 8px;
}
.placeholder-note::before { content: ""; width: 4px; height: 4px; background: var(--terra); border-radius: 50%; }

/* Iso · contenedor para el isotipo SVG */
.iso-placeholder        { display: inline-block; position: relative; }
.iso-placeholder svg    { display: block; }

/* Divisores · tres voces */
.divider         { border: none; border-top: 1px solid var(--line);   margin: 32px 0; }
.divider-strong  { border: none; border-top: 1px solid var(--line-2); margin: 32px 0; }
.divider-mono {
  border: none;
  height: 1px;
  margin: 32px 0;
  background-image: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 10px);
}

/* Ornamento · separador editorial con fade lateral */
.ornament {
  font-family: var(--f-display); font-style: italic; font-size: 22px;
  color: var(--terra); text-align: center; opacity: 0.85; margin: 32px 0;
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.ornament::before, .ornament::after {
  content: ""; flex: 1; max-width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}


/* =========================================================
   07 · NAVEGACIÓN
   ---------------------------------------------------------
   Topbar editorial (sticky, blur, monoespaciada), navbar
   de producto (píldora flotante), tabs internos y migas.
   ========================================================= */

/* Topbar · librería interna · sticky */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 239, 228, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 64px;
}
.topbar .brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-brand);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.04em;
  color: var(--deep);
}
.topbar .brand .iso { width: 22px; height: 22px; }
.topbar nav {
  display: flex; gap: 28px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.topbar nav a {
  color: var(--deep);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 200ms;
}
.topbar nav a:hover { opacity: 1; }
.topbar .meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: 0.5;
}
@media (max-width: 900px) {
  .topbar-inner { padding: 0 24px; }
  .topbar nav { display: none; }
}

/* Web navbar (landing) · píldora flotante */
.web-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  background: var(--crema);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-minimal);
}
.web-nav .left { display: flex; align-items: center; gap: 32px; }
.web-nav .pl-wordmark {
  font-family: var(--f-brand); font-weight: 800; font-size: 18px;
  letter-spacing: -0.04em; color: var(--deep);
}
.web-nav .links { display: flex; gap: 22px; }
.web-nav .links a {
  font-family: var(--f-brand);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; opacity: 0.78;
}
.web-nav .links a:hover { color: var(--terra); opacity: 1; }
.web-nav .right { display: flex; gap: 8px; align-items: center; }
@media (max-width: 800px) { .web-nav .links { display: none; } }

/* Tabs internos */
.nav-tabs {
  display: inline-flex; gap: 4px;
  padding: 4px;
  background: rgba(62, 95, 104, 0.06);
  border-radius: var(--r-btn);
}
.nav-tabs .tab {
  font-family: var(--f-brand);
  font-weight: 500;
  font-size: 13px;
  color: var(--deep);
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.nav-tabs .tab.active { background: var(--crema); box-shadow: var(--shadow-minimal); }

/* Migas */
.breadcrumbs {
  display: inline-flex; flex-wrap: wrap; gap: 6px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: 0.75;
}
.breadcrumbs a       { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--terra); opacity: 1; }
.breadcrumbs .sep    { color: var(--terra); }


/* =========================================================
   08 · BOTONES
   ---------------------------------------------------------
   Una base, cinco variantes, tres tamaños. El primario es
   siempre Terra. Verb + objeto concreto (regla de copy).
   ========================================================= */
.btn {
  font-family: var(--f-brand); font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em;
  padding: 14px 24px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 200ms ease-out;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  white-space: nowrap;
}
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-sm { padding: 10px 16px; font-size: 13px; }

.btn-primary               { background: var(--terra); color: var(--crema); }
.btn-primary:hover         { background: #c0582f; }
.btn-secondary             { background: transparent; color: var(--deep); border-color: var(--deep); }
.btn-secondary:hover       { background: var(--deep); color: var(--crema); }
.btn-ghost                 { background: transparent; color: var(--deep); border-color: transparent; }
.btn-ghost:hover           { background: rgba(62, 95, 104, 0.08); }
.btn-dark                  { background: var(--deep); color: var(--crema); }
.btn-dark:hover            { background: #2f4a52; }
.btn-mostaza               { background: var(--mostaza); color: var(--ink); }
.btn-mostaza:hover         { background: #c8972f; }

.btn-link {
  background: none; border: none; padding: 0;
  color: var(--terra);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  font-family: var(--f-brand); font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em;
}
.btn-link:hover { color: #b0552f; }

.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }


/* =========================================================
   09 · CHIPS & ETIQUETAS
   ---------------------------------------------------------
   Píldoras monoespaciadas para estados y categorías.
   ========================================================= */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--deep);
  background: rgba(62, 95, 104, 0.08);
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
}
.chip-dot::before  { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.terra        { color: var(--terra); border-color: rgba(212,104,62,0.30); background: rgba(212,104,62,0.08); }
.chip.mostaza      { color: #7a5817;      border-color: rgba(214,166,75,0.40); background: rgba(214,166,75,0.18); }
.chip.sage         { color: #4d6840;      border-color: rgba(143,163,126,0.40); background: rgba(143,163,126,0.18); }
.chip.deep-solid   { color: var(--crema); background: var(--deep); border-color: transparent; }


/* =========================================================
   10 · CALLOUTS
   ---------------------------------------------------------
   Énfasis editorial. Tres tonos: Mostaza (idea clave),
   Deep (recordatorio) y Sage (nota técnica). Default crema.
   ========================================================= */
.callout-block {
  border-radius: var(--r-card);
  padding: 24px 28px;
  border: 1px solid var(--line);
  background: var(--crema);
}
.callout-block .ck {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--terra);
}
.callout-block .ct {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.016em;
  margin: 0;
  color: var(--deep);
}
.callout-block .ct em            { font-style: italic; color: var(--terra); }
.callout-block.mostaza           { background: var(--mostaza); border-color: transparent; }
.callout-block.mostaza .ck       { color: var(--deep); opacity: 0.85; }
.callout-block.mostaza .ct       { color: var(--ink); }
.callout-block.deep              { background: var(--deep); border-color: transparent; }
.callout-block.deep .ck          { color: var(--mostaza); }
.callout-block.deep .ct          { color: var(--crema); }
.callout-block.deep .ct em       { color: var(--mostaza); }
.callout-block.sage              { background: rgba(143,163,126,0.14); border-color: rgba(143,163,126,0.30); }
.callout-block.sage .ck          { color: #4d6840; }


/* =========================================================
   11 · CARDS
   ---------------------------------------------------------
   Contenedor genérico. Variantes: elevada (.card-elev),
   oscura (.card.dark), horizontal (.card-h).
   ========================================================= */
.card {
  background: var(--crema);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px;
}
.card-elev   { box-shadow: var(--shadow-std); }
.card.dark   { background: var(--deep); color: var(--crema); border-color: transparent; }
.card-h      { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }


/* =========================================================
   12 · FORMULARIOS
   ---------------------------------------------------------
   Inputs editoriales · borde line-2 · foco Terra con halo.
   Newsletter inline · pareja input+botón en píldora.
   ========================================================= */
.input, .textarea, .select {
  width: 100%;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--crema);
  border: 1px solid var(--line-2);
  border-radius: var(--r-btn);
  padding: 12px 14px;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow   var(--dur-fast) var(--ease-out);
}
.input::placeholder,
.textarea::placeholder { color: var(--text-faint); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--terra);
  box-shadow: var(--focus-ring);
}
.field        { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: 0.8;
}
.field-help   { font-size: 12px; color: var(--text-muted); }

/* Newsletter inline */
.newsletter-inline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: stretch;
  padding: 6px;
  background: var(--crema);
  border: 1px solid var(--line-2);
  border-radius: var(--r-btn);
  max-width: 460px;
}
.newsletter-inline input {
  background: transparent; border: none;
  padding: 12px 14px;
  font-family: var(--f-body); font-size: 15px;
  color: var(--ink);
}
.newsletter-inline input::placeholder { color: var(--text-faint); }
.newsletter-inline input:focus        { outline: none; }
.newsletter-inline .btn               { border-radius: 8px; }


/* =========================================================
   13 · TABLAS
   ---------------------------------------------------------
   Encabezado monoespaciado · cuerpo serio · fila Terra
   reservada para cifras.
   ========================================================= */
.table-ed {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table-ed th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: 0.85;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(62, 95, 104, 0.04);
  font-weight: 500;
}
.table-ed td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.table-ed tr:last-child td { border-bottom: none; }
.table-ed .num             { font-family: var(--f-mono); color: var(--terra); }


/* =========================================================
   14 · ÁTOMOS DE LECTURA
   ---------------------------------------------------------
   Pull-quote, drop cap y footnote — para cualquier texto
   editorial largo, dentro o fuera del ebook.
   ========================================================= */
.pull-quote {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.016em;
  color: var(--deep);
  border-left: 2px solid var(--terra);
  padding: 8px 0 8px 24px;
  margin: 32px 0;
  max-width: 32ch;
}
.pull-quote em { font-style: italic; color: var(--terra); }

.dropcap::first-letter {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 4em;
  float: left;
  line-height: 0.85;
  padding: 6px 10px 0 0;
  color: var(--terra);
}

.footnote {
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-muted);
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
}
.footnote .num { color: var(--terra); }


/* =========================================================
   15 · MÓDULOS NUMÉRICOS Y SOCIALES
   ---------------------------------------------------------
   Stat card (cifra editorial), testimonial (cita atribuida)
   y logo-strip (aliados / prensa).
   ========================================================= */

/* Stat card */
.stat-card {
  background: var(--crema);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px;
  display: flex; flex-direction: column; gap: 8px;
}
.stat-card .figure {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 0.94; letter-spacing: -0.022em;
  color: var(--deep);
}
.stat-card .figure em { font-style: italic; color: var(--terra); }
.stat-card .lbl {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--deep); opacity: 0.7;
}
.stat-card .note { font-size: 13px; color: var(--ink); opacity: 0.78; max-width: 26ch; }

/* Testimonial card */
.testimonial {
  background: var(--crema);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px 28px 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.testimonial .mark {
  font-family: var(--f-display);
  font-size: 56px;
  line-height: 0.7;
  color: var(--terra);
}
.testimonial .text {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--deep);
  margin: 0;
}
.testimonial .text em { font-style: italic; color: var(--terra); }
.testimonial .who {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  align-items: center;
}
.testimonial .who .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(180deg, var(--sage) 0%, #6e8261 100%);
}
.testimonial .who .name {
  font-family: var(--f-brand); font-weight: 600; font-size: 14px;
  color: var(--deep); letter-spacing: -0.01em;
}
.testimonial .who .role {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); opacity: 0.6;
}

/* Logo strip */
.logo-strip {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 24px 32px;
  background: var(--crema);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.logo-strip .lg {
  font-family: var(--f-brand); font-weight: 700; font-size: 16px;
  letter-spacing: -0.03em; color: var(--deep); opacity: 0.7;
}
.logo-strip .lg em {
  font-family: var(--f-display); font-weight: 400; font-style: italic; color: var(--terra);
}


/* =========================================================
   16 · MÓDULOS DE OFERTA
   ---------------------------------------------------------
   Pricing card, FAQ y manifiesto editorial — la maquinaria
   de conversión cuando aparece, sin urgencia falsa.
   ========================================================= */

/* Pricing card */
.price-card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--crema);
  padding: 36px 32px 32px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.price-card.featured           { border-color: var(--terra); box-shadow: var(--shadow-std); }
.price-card.featured::before {
  content: "Recomendado";
  position: absolute; top: -12px; left: 24px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--terra); color: var(--crema);
  padding: 4px 10px; border-radius: 999px;
}
.price-card .tier {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--deep); opacity: 0.7;
}
.price-card .price {
  font-family: var(--f-display); font-weight: 400; font-size: 56px;
  line-height: 1; letter-spacing: -0.022em; color: var(--deep);
}
.price-card .price small {
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.06em; color: var(--ink); opacity: 0.6;
  margin-left: 8px;
}
.price-card .pitch {
  font-family: var(--f-display); font-style: italic; font-size: 16px;
  line-height: 1.4; color: var(--deep); opacity: 0.8;
  max-width: 26ch; margin: 0;
}
.price-card ul.includes {
  list-style: none; padding: 16px 0 0; margin: 0;
  border-top: 1px solid var(--line);
}
.price-card ul.includes li {
  font-size: 14px; padding: 8px 0 8px 22px;
  position: relative; color: var(--ink);
}
.price-card ul.includes li::before {
  content: "→"; position: absolute; left: 0;
  color: var(--terra); font-family: var(--f-brand); font-weight: 600;
}

/* FAQ */
.faq-list { border-top: 1px solid var(--line); }
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  display: grid; grid-template-columns: 48px 1fr; gap: 16px;
}
.faq-item .qn {
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.08em; color: var(--terra);
  padding-top: 6px;
}
.faq-item .q {
  font-family: var(--f-display); font-weight: 400;
  font-size: 22px; line-height: 1.22; letter-spacing: -0.014em;
  color: var(--deep); margin: 0 0 8px;
}
.faq-item .q em { font-style: italic; color: var(--terra); }
.faq-item .a {
  font-size: 14px; line-height: 1.6;
  color: var(--ink); opacity: 0.85;
  margin: 0; max-width: 60ch;
}

/* Manifiesto · superficie Deep con grano superpuesto */
.manifesto {
  background: var(--deep);
  color: var(--crema);
  border-radius: var(--r-card);
  padding: 80px 64px;
  position: relative;
  overflow: hidden;
}
.manifesto::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.06; mix-blend-mode: overlay; pointer-events: none;
}
.manifesto .eyebrow { color: var(--mostaza); }
.manifesto h3 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 0.98; letter-spacing: -0.022em;
  color: var(--crema); margin: 24px 0 0;
  max-width: 24ch;
}
.manifesto h3 em { font-style: italic; color: var(--mostaza); }
.manifesto p {
  font-family: var(--f-display); font-style: italic;
  font-size: 20px; line-height: 1.4; color: var(--crema); opacity: 0.78;
  max-width: 36ch; margin: 24px 0 0;
}
@media (max-width: 900px) { .manifesto { padding: 48px 28px; } }


/* =========================================================
   17 · AUTO-DOCS
   ---------------------------------------------------------
   Patrones con los que el sistema se documenta a sí mismo:
   voice-grid (do/don't), lex-list (di esto/no esto),
   token-table, type-ramp y ratio-strip.
   ========================================================= */

/* Voice grid · do / don't */
.voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.voice-card {
  background: var(--crema);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px 28px 24px;
}
.voice-card h5 {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 16px;
}
.voice-card.do   h5 { color: #4d6840; }
.voice-card.dont h5 { color: #8a3818; }
.voice-card ul       { list-style: none; margin: 0; padding: 0; }
.voice-card ul li {
  padding: 12px 0 12px 28px;
  position: relative;
  font-size: 14.5px; line-height: 1.5;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.voice-card ul li:first-child         { border-top: none; }
.voice-card.do   ul li::before {
  content: "✓"; position: absolute; left: 0; top: 12px;
  color: #4d6840; font-family: var(--f-brand); font-weight: 700;
}
.voice-card.dont ul li::before {
  content: "✕"; position: absolute; left: 0; top: 12px;
  color: #8a3818; font-family: var(--f-brand); font-weight: 700;
}
.voice-card ul li em { font-family: var(--f-display); font-style: italic; color: var(--terra); }
@media (max-width: 900px) { .voice-grid { grid-template-columns: 1fr; } }

/* Lexicon row · di esto / no esto */
.lex-list {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--crema);
  padding: 8px 24px;
}
.lex-row {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.lex-row:first-child { border-top: none; }
.lex-row .yes, .lex-row .no {
  font-family: var(--f-display);
  font-size: 18px; line-height: 1.3;
  letter-spacing: -0.012em;
}
.lex-row .yes { color: var(--deep); }
.lex-row .no  { color: var(--ink); opacity: 0.5; text-decoration: line-through; text-decoration-color: rgba(212,104,62,0.5); }
.lex-row .arr {
  font-family: var(--f-mono);
  color: var(--terra);
  text-align: center;
  font-size: 14px;
}

/* Token reference table */
.token-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--crema);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.token-table thead th {
  text-align: left;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--deep); opacity: 0.85;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(62,95,104,0.04);
  font-weight: 500;
}
.token-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.token-table tbody tr:last-child td { border-bottom: none; }
.token-table .tk       { font-family: var(--f-mono); font-size: 12px; color: var(--terra); }
.token-table .val      { font-family: var(--f-mono); font-size: 12px; color: var(--ink); opacity: 0.85; }
.token-table .role     { color: var(--ink); opacity: 0.78; }
.token-table .sq       { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); }
.token-table .spacing-bar { height: 12px; background: var(--terra); border-radius: 2px; }
.token-table .radius-demo {
  width: 56px; height: 32px; background: var(--deep);
  border: 1px solid var(--line);
}

/* Type ramp · escalera tipográfica */
.type-ramp {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--crema);
  overflow: hidden;
}
.type-ramp .step {
  display: grid;
  grid-template-columns: 140px 80px 1fr;
  gap: 24px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.type-ramp .step:last-child  { border-bottom: none; }
.type-ramp .step .name {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--terra);
}
.type-ramp .step .px {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--ink); opacity: 0.6;
}
.type-ramp .step .sample {
  color: var(--deep);
  letter-spacing: -0.018em;
  line-height: 1.0;
}
.type-ramp .step .sample em { font-style: italic; color: var(--terra); }
@media (max-width: 900px) {
  .type-ramp .step { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
}

/* Ratio strip · pares de contraste */
.ratio-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 24px;
}
.ratio-card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.ratio-card .sample {
  padding: 28px 20px 32px;
  font-family: var(--f-display);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.016em;
}
.ratio-card .info {
  padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ratio-card .info .pair  { color: var(--deep); opacity: 0.75; }
.ratio-card .info .ratio { color: var(--terra); }
@media (max-width: 900px) { .ratio-strip { grid-template-columns: 1fr 1fr; } }


/* =========================================================
   18 · HERO PATTERN
   ---------------------------------------------------------
   Apertura editorial. Texto a la izquierda con kicker Terra
   + display + lede + meta. Personaje a la derecha sobre
   superficie con gradiente crema → crema-2.
   ========================================================= */
.hero { padding: 80px 0 96px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: end;
}
.hero-left .kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra);
  margin: 0 0 32px;
}
.hero-left h1     { margin: 0 0 32px; }
.hero-left .lede  { margin: 0 0 40px; max-width: 38ch; }

.hero-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--line-2);
}
.hero-meta dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: 0.6;
  margin: 0 0 6px;
}
.hero-meta dd {
  margin: 0;
  font-family: var(--f-brand);
  font-weight: 600;
  font-size: 15px;
  color: var(--deep);
  letter-spacing: -0.01em;
}

.hero-right {
  position: relative;
  background: linear-gradient(180deg, var(--crema) 0%, var(--crema-2) 100%);
  border-radius: var(--r-card);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.hero-right .character {
  width: 78%;
  filter: drop-shadow(0 24px 28px rgba(62, 95, 104, 0.22));
}
.hero-right .corner {
  position: absolute;
  top: 20px; left: 20px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: 0.55;
}
.hero-right .corner-r {
  position: absolute;
  top: 20px; right: 20px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: 0.55;
}
@media (max-width: 1100px) {
  .hero-grid   { grid-template-columns: 1fr; gap: 48px; }
  .hero-right  { aspect-ratio: 1 / 1; }
}


/* =========================================================
   19 · IDENTITY STRIP
   ---------------------------------------------------------
   Tira de tarjetas con numeración Terra, usada en aperturas
   de manifiesto e identidad.
   ========================================================= */
.identity-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.identity-card {
  background: var(--crema);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.identity-card .num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--terra);
}
.identity-card h4 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.014em;
  color: var(--deep);
  margin: 24px 0 12px;
}
.identity-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); opacity: 0.78; }
@media (max-width: 1100px) { .identity-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .identity-strip { grid-template-columns: 1fr; } }


/* =========================================================
   20 · COLOR PATTERNS
   ---------------------------------------------------------
   Grid de swatches y bloque de reglas (pares OK / NO).
   ========================================================= */
.color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.swatch {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--crema);
  display: flex;
  flex-direction: column;
}
.swatch .chip            { aspect-ratio: 4 / 5; position: relative; }
.swatch .chip .role {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.swatch .info            { padding: 16px; border-top: 1px solid var(--line); }
.swatch .info .name {
  font-family: var(--f-brand);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--deep);
  margin-bottom: 4px;
}
.swatch .info .hex {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.7;
}
.swatch .info .oklch {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.5;
  margin-top: 2px;
}
@media (max-width: 1100px) { .color-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .color-grid { grid-template-columns: repeat(2, 1fr); } }

/* Color rules — pares seguros / prohibidos */
.color-rules {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.rule-card {
  background: var(--crema);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px;
}
.rule-card h5 {
  font-family: var(--f-brand);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--deep);
  margin: 0 0 20px;
}
.rule-list { list-style: none; padding: 0; margin: 0; }
.rule-list li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rule-list li:first-child { border-top: none; padding-top: 0; }
.rule-list .pair-dots             { display: inline-flex; gap: 4px; }
.rule-list .pair-dots span        { width: 14px; height: 14px; border-radius: 50%; }
.rule-list .label                 { flex: 1; color: var(--ink); opacity: 0.82; text-transform: none; letter-spacing: 0; }
.rule-list .tag {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-tag);
}
.tag-ok { background: var(--status-ok-bg);   color: var(--status-ok-fg); }
.tag-no { background: var(--status-stop-bg); color: var(--status-stop-fg); }
@media (max-width: 900px) { .color-rules { grid-template-columns: 1fr; } }


/* =========================================================
   21 · TYPOGRAPHY DEMO PATTERNS
   ---------------------------------------------------------
   Fila tipográfica con meta a la izquierda y muestra grande
   a la derecha. Usada solo en la sección de tipografía.
   ========================================================= */
.type-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  margin-bottom: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.type-grid:last-child { border-bottom: 1px solid var(--line); }

.type-meta            { padding-top: 8px; }
.type-meta .label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 8px;
}
.type-meta .family {
  font-family: var(--f-brand);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--deep);
  margin-bottom: 12px;
}
.type-meta .specs {
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink);
  opacity: 0.7;
}

.type-spec-display { font-family: var(--f-display); font-size: 88px; line-height: 0.9; letter-spacing: -0.022em; color: var(--deep); margin: 0; }
.type-spec-display em { font-style: italic; color: var(--terra); }
.type-spec-brand   { font-family: var(--f-brand); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -0.04em; color: var(--deep); margin: 0; }
.type-spec-body    { font-family: var(--f-body); font-size: 18px; line-height: 1.55; color: var(--ink); margin: 0; max-width: 56ch; }
.type-spec-mono    { font-family: var(--f-mono); font-size: 13px; line-height: 1.7; letter-spacing: 0.02em; color: var(--ink); opacity: 0.85; margin: 0; }

@media (max-width: 900px) {
  .type-grid          { grid-template-columns: 1fr; gap: 16px; }
  .type-spec-display  { font-size: 56px; }
  .type-spec-brand    { font-size: 44px; }
}


/* =========================================================
   22 · CHARACTER PATTERNS — La Guía
   ---------------------------------------------------------
   Render canónico, ficha de atributos, variantes por
   superficie y escala de uso. El PNG es ley: nunca se
   recolorea, deforma ni recorta el rostro.
   ========================================================= */

/* Lead · render canónico + ficha */
.char-lead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
.char-canonical {
  background: linear-gradient(180deg, var(--crema) 0%, var(--crema-2) 100%);
  border-radius: var(--r-card);
  aspect-ratio: 4 / 5;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
}
.char-canonical img      { width: 76%; filter: drop-shadow(0 20px 28px rgba(62, 95, 104, 0.18)); }
.char-canonical .pin {
  position: absolute;
  top: 24px; left: 24px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: 0.6;
}
.char-canonical .pin b   { color: var(--terra); font-weight: 400; }
.char-canonical .meta-corner {
  position: absolute;
  bottom: 20px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: 0.55;
}

.char-spec {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 8px;
}
.char-spec .heading {
  font-family: var(--f-display); font-weight: 400;
  font-size: 48px; line-height: 1.0; color: var(--deep);
  margin: 0 0 16px; letter-spacing: -0.018em;
}
.char-spec .heading em { font-style: italic; color: var(--terra); }
.char-spec .desc       { font-size: 16px; color: var(--ink); opacity: 0.85; max-width: 44ch; margin: 0 0 32px; }

.char-attrs            { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.char-attrs li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.char-attrs li .k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: 0.65;
  padding-top: 2px;
}
.char-attrs li .v { color: var(--ink); }

/* Variantes por superficie */
.char-variants {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.cv-card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--crema);
  display: flex;
  flex-direction: column;
}
.cv-stage {
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.cv-stage.surface-crema   { background: linear-gradient(180deg, var(--crema) 0%, var(--crema-2) 100%); }
.cv-stage.surface-deep    { background: linear-gradient(180deg, #4a6e78 0%, #2f4a52 100%); }
.cv-stage.surface-sage    { background: linear-gradient(180deg, #a4b696 0%, #7b8e6b 100%); }
.cv-stage.surface-mostaza { background: linear-gradient(180deg, #e2b965 0%, #c39237 100%); }

.cv-stage img            { height: 92%; filter: drop-shadow(0 12px 18px rgba(62, 95, 104, 0.18)); }
.cv-stage.bust img       { height: auto; width: 130%; transform: translateY(34%); }
.cv-stage.portrait img   { height: auto; width: 200%; transform: translateY(46%) translateX(2%); }
.cv-stage.inline img     { height: 70%; }

.cv-stage .badge {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: 0.55;
  background: rgba(245, 239, 228, 0.8);
  padding: 4px 8px;
  border-radius: 4px;
}
.cv-stage.surface-deep .badge,
.cv-stage.surface-sage .badge,
.cv-stage.surface-mostaza .badge {
  background: rgba(43, 43, 43, 0.18);
  color: var(--crema);
  opacity: 0.85;
}

.cv-info {
  padding: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cv-info .name  { font-family: var(--f-brand); font-weight: 600; font-size: 14px; color: var(--deep); letter-spacing: -0.02em; }
.cv-info .specs { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink); opacity: 0.6; }

@media (max-width: 1100px) {
  .char-variants { grid-template-columns: repeat(2, 1fr); }
  .char-lead     { grid-template-columns: 1fr; }
}

/* Escala de uso · 5 tamaños canónicos */
.scale-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 8px;
}
.scale-cell {
  background: var(--crema);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  aspect-ratio: 1 / 1.2;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.scale-cell img       { filter: drop-shadow(0 8px 14px rgba(62, 95, 104, 0.16)); }
.scale-cell .lbl {
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: 0.65;
}
.scale-cell .lbl b    { color: var(--terra); font-weight: 400; }
.scale-cell.s1 img    { width: 92%; }
.scale-cell.s2 img    { width: 72%; }
.scale-cell.s3 img    { width: 52%; }
.scale-cell.s4 img    { width: 36%; }
.scale-cell.s5 img    { width: 24%; }
@media (max-width: 900px) { .scale-row { grid-template-columns: repeat(3, 1fr); } }


/* =========================================================
   23 · SOCIAL PATTERNS
   ---------------------------------------------------------
   Frames cuadrado, story, perfil y portada — todos con
   .meta debajo. Plantillas: carousel (claro/oscuro),
   announce, stat, chapter, launch.
   ========================================================= */

/* Frames base */
.social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.social-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.social-frame {
  background: var(--crema);
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.social-frame .stage             { position: relative; overflow: hidden; }
.social-frame.square .stage      { aspect-ratio: 1 / 1; }
.social-frame.story .stage       { aspect-ratio: 9 / 16; }
.social-frame.profile .stage     { aspect-ratio: 1 / 1; }
.social-frame.cover .stage       { aspect-ratio: 3 / 1; }

.social-frame .meta {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: 0.7;
}

/* Square · carousel apertura (crema) */
.sq-carousel-1 {
  height: 100%;
  background: var(--crema);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  padding: 56px;
  align-items: end;
  position: relative;
  gap: 24px;
}
.sq-carousel-1 .ktag {
  position: absolute;
  top: 56px; left: 56px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra);
}
.sq-carousel-1 h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 0.96;
  letter-spacing: -0.022em;
  color: var(--deep);
  margin: 0;
}
.sq-carousel-1 h3 em       { font-style: italic; color: var(--terra); }
.sq-carousel-1 .right      { display: flex; align-items: flex-end; justify-content: flex-end; height: 100%; }
.sq-carousel-1 .right img  { width: 96%; filter: drop-shadow(0 20px 24px rgba(62, 95, 104, 0.20)); }
.sq-carousel-1 .footer {
  position: absolute;
  bottom: 28px; left: 56px; right: 56px;
  display: flex; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep); opacity: 0.6;
}

/* Square · carousel cita (deep) */
.sq-carousel-2 {
  height: 100%;
  background: var(--deep);
  color: var(--crema);
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.sq-carousel-2 .num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--mostaza);
}
.sq-carousel-2 .body-text {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--crema);
  max-width: 18ch;
  margin: 32px 0 0;
}
.sq-carousel-2 .body-text em { font-style: italic; color: var(--mostaza); }
.sq-carousel-2 .footer {
  display: flex; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crema); opacity: 0.7;
}

/* Square · anuncio (crema) */
.sq-announce {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--crema) 0%, var(--crema-2) 100%);
  padding: 56px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.sq-announce .top                  { display: flex; justify-content: space-between; align-items: center; }
.sq-announce .top .pretag          { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terra); }
.sq-announce .top .vol             { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep); opacity: 0.7; }
.sq-announce h3 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 64px; line-height: 0.94;
  letter-spacing: -0.022em; color: var(--deep);
  margin: 0;
}
.sq-announce h3 em                 { font-style: italic; color: var(--terra); }
.sq-announce .foot {
  display: flex; justify-content: space-between; align-items: end;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--deep); opacity: 0.7;
}
.sq-announce .badge-pill {
  background: var(--terra); color: var(--crema);
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 1;
}

/* Square · dato (mostaza) */
.sq-stat {
  position: absolute; inset: 0;
  background: var(--mostaza);
  padding: 56px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--ink);
}
.sq-stat .lbl {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--deep); opacity: 0.85;
}
.sq-stat .big {
  font-family: var(--f-display); font-weight: 400;
  font-size: 168px; line-height: 0.86;
  letter-spacing: -0.03em; color: var(--deep);
  margin: 0;
}
.sq-stat .big em       { font-style: italic; color: var(--terra); }
.sq-stat .desc {
  font-family: var(--f-display); font-size: 22px; line-height: 1.2;
  color: var(--deep); margin: 8px 0 0; max-width: 18ch;
}
.sq-stat .foot {
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--deep); opacity: 0.75;
}

/* Square · capítulo (sage) */
.sq-chapter {
  position: absolute; inset: 0;
  background: var(--sage);
  color: var(--crema);
  padding: 56px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.sq-chapter .chap {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--crema); opacity: 0.85;
}
.sq-chapter h3 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 56px; line-height: 0.96;
  letter-spacing: -0.022em; margin: 0;
}
.sq-chapter h3 em      { font-style: italic; color: var(--mostaza); }
.sq-chapter .stripe {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 18%;
  background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.05));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--crema); opacity: 0.8;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.sq-chapter .foot {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--crema); opacity: 0.8;
}

/* Story · lanzamiento (crema → terra acción) */
.story-1 {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--crema) 0%, var(--crema-2) 100%);
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.story-1 .topkicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  text-align: center;
}
.story-1 h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--deep);
  text-align: center;
  margin: 0;
}
.story-1 h3 em        { font-style: italic; color: var(--terra); }
.story-1 .mid         { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; justify-content: center; }
.story-1 .mid img     { width: 70%; filter: drop-shadow(0 22px 30px rgba(62, 95, 104, 0.22)); }
.story-1 .cta {
  background: var(--terra);
  color: var(--crema);
  font-family: var(--f-brand);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  padding: 14px 28px;
  border-radius: var(--r-btn);
}
.story-1 .domain {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: 0.6;
  margin-top: 12px;
}

/* Story · cita (deep) */
.story-2 {
  position: absolute; inset: 0;
  background: var(--deep);
  color: var(--crema);
  padding: 80px 48px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.story-2 .quote-mark   { font-family: var(--f-display); font-size: 120px; line-height: 0.8; color: var(--mostaza); margin: 0; }
.story-2 .quote-text {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 16px 0 0;
}
.story-2 .quote-text em { font-style: italic; color: var(--mostaza); }
.story-2 .credit         { display: flex; flex-direction: column; gap: 4px; }
.story-2 .credit .name   { font-family: var(--f-brand); font-weight: 600; font-size: 14px; }
.story-2 .credit .role   { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; }

/* Story · launch (terra) */
.story-launch {
  position: absolute; inset: 0;
  background: var(--terra);
  color: var(--crema);
  padding: 80px 48px 60px;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: center;
  align-items: center;
}
.story-launch .ks {
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--crema); color: var(--terra);
  padding: 6px 14px; border-radius: 999px;
}
.story-launch h3 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 64px; line-height: 0.92;
  letter-spacing: -0.022em; margin: 0;
}
.story-launch h3 em    { font-style: italic; color: var(--mostaza); }
.story-launch .deck {
  font-family: var(--f-display); font-style: italic;
  font-size: 18px; line-height: 1.3; opacity: 0.92;
  max-width: 22ch;
}
.story-launch .date {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(245,239,228,0.18);
  padding: 8px 16px; border-radius: 8px;
}

/* Profile · avatar oficial */
.profile-stage {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--crema) 0%, var(--crema-2) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.profile-stage img { width: 95%; filter: drop-shadow(0 14px 20px rgba(62, 95, 104, 0.20)); }
.profile-stage::before {
  content: "P";
  position: absolute;
  top: 24px; left: 24px;
  font-family: var(--f-brand);
  font-weight: 800;
  font-size: 56px;
  color: var(--terra);
  letter-spacing: -0.06em;
  line-height: 1;
}

/* Cover · LinkedIn / Twitter */
.cover-stage {
  position: absolute; inset: 0;
  background: var(--deep);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 40px;
  color: var(--crema);
  overflow: hidden;
}
.cover-stage .left h4 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 32px; line-height: 0.96; letter-spacing: -0.018em;
  margin: 0;
}
.cover-stage .left h4 em { font-style: italic; color: var(--mostaza); }
.cover-stage .left p {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--crema); opacity: 0.7; margin: 12px 0 0;
}
.cover-stage .right       { display: flex; justify-content: flex-end; height: 100%; align-items: flex-end; }
.cover-stage .right img   { height: 130%; transform: translateY(8%); filter: drop-shadow(0 14px 20px rgba(0,0,0,0.25)); }

@media (max-width: 1100px) {
  .social-grid    { grid-template-columns: 1fr; }
  .social-row-2   { grid-template-columns: 1fr; }
}


/* =========================================================
   24 · EBOOK PATTERNS — Migración Vol. 01
   ---------------------------------------------------------
   Portada 3D, ficha lateral, spreads A-series (2:1.41) y
   tipologías de página: chapter opener, two-column,
   diagram, closing, TOC, intro, notes, colofón.
   ========================================================= */

/* Fila portada + ficha */
.ebook-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.ebook-cover-wrap {
  perspective: 1800px;
  display: flex;
  justify-content: center;
}

/* Portada · cinematic 3D · grano blanco superpuesto */
.ebook-cover {
  width: 380px;
  aspect-ratio: 3 / 4.2;
  background: var(--deep);
  color: var(--crema);
  border-radius: 4px 12px 12px 4px;
  padding: 44px 36px 36px;
  position: relative;
  box-shadow:
    0 30px 60px rgba(62, 95, 104, 0.30),
    inset -2px 0 0 rgba(0,0,0,0.12),
    inset 6px 0 0 rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transform: rotateY(-6deg) rotateX(2deg);
  transform-style: preserve-3d;
}
.ebook-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.ebook-cover .top-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--crema); opacity: 0.7;
}
.ebook-cover .top-meta .vol { color: var(--mostaza); opacity: 1; }
.ebook-cover .character-slot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
  position: relative;
}
.ebook-cover .character-slot img {
  height: 100%;
  max-height: 320px;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,0.32));
}
.ebook-cover .title-block { margin-top: auto; }
.ebook-cover .pretitle {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mostaza); margin-bottom: 14px;
}
.ebook-cover h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 0.94;
  letter-spacing: -0.022em;
  margin: 0 0 8px;
}
.ebook-cover h2 em { font-style: italic; color: var(--mostaza); }
.ebook-cover .subtitle {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.3;
  color: var(--crema);
  opacity: 0.85;
  margin: 8px 0 22px;
  max-width: 22ch;
}
.ebook-cover .imprint {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-top: 18px;
  border-top: 1px solid rgba(245, 239, 228, 0.20);
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--crema); opacity: 0.75;
}
.ebook-cover .imprint .pl  { font-family: var(--f-brand); font-weight: 800; font-size: 14px; letter-spacing: -0.04em; opacity: 1; }

/* Ficha producto */
.ebook-side h2 { font-family: var(--f-display); font-weight: 400; font-size: 56px; line-height: 0.96; color: var(--deep); margin: 0 0 16px; letter-spacing: -0.02em; }
.ebook-side h2 em { font-style: italic; color: var(--terra); }
.ebook-side p { max-width: 50ch; }
.ebook-side .product-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
}
.ebook-side .product-meta dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deep); opacity: 0.6; margin-bottom: 6px; }
.ebook-side .product-meta dd { margin: 0; font-family: var(--f-brand); font-weight: 600; font-size: 15px; color: var(--deep); letter-spacing: -0.01em; }

/* Spread base · A-series 2:1.41 */
.spread-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 64px;
}
.spread {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--crema);
}
.spread .pages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 2 / 1.41;
  background: var(--crema);
  position: relative;
}
.spread .pages::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: var(--line);
  transform: translateX(-0.5px);
}
.spread .page {
  padding: 32px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.spread .pagenum {
  position: absolute;
  bottom: 12px; left: 28px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink);
  opacity: 0.5;
}
.spread .pagenum.r   { left: auto; right: 28px; }
.spread .runner {
  position: absolute;
  top: 12px; right: 28px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: 0.5;
}
.spread .runner.l    { right: auto; left: 28px; }
.spread .caption-strip {
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep); opacity: 0.7;
}

/* Spread 1 — chapter opener */
.sp1-l        { background: var(--crema-2); align-items: center; justify-content: center; padding: 24px; }
.sp1-l img    { width: 78%; filter: drop-shadow(0 14px 18px rgba(62, 95, 104, 0.16)); }
.sp1-r        { background: var(--crema); padding-top: 56px; padding-left: 40px; padding-right: 36px; }
.sp1-r .chapnum {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--terra); margin-bottom: 28px;
}
.sp1-r h4 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 36px; line-height: 0.98; letter-spacing: -0.02em;
  color: var(--deep); margin: 0 0 16px;
}
.sp1-r h4 em            { font-style: italic; color: var(--terra); }
.sp1-r .dropcap-p       { font-size: 11px; line-height: 1.6; color: var(--ink); margin: 16px 0 0; }
.sp1-r .dropcap-p::first-letter {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 48px;
  float: left;
  line-height: 0.85;
  padding: 4px 6px 0 0;
  color: var(--terra);
}

/* Spread 2 — two-column con callout interno */
.sp2 .page                  { padding: 36px 28px 28px; }
.sp2 h5                     { font-family: var(--f-display); font-weight: 400; font-size: 18px; letter-spacing: -0.014em; color: var(--deep); margin: 0 0 12px; }
.sp2 .body-mini             { font-size: 9px; line-height: 1.6; color: var(--ink); margin: 0 0 8px; }
.sp2 .body-mini.indent      { text-indent: 1.4em; }
.sp2 .callout {
  background: var(--mostaza);
  color: var(--ink);
  border-radius: 8px;
  padding: 14px 14px 12px;
  margin: 14px 0;
}
.sp2 .callout .ck {
  font-family: var(--f-mono);
  font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--deep); opacity: 0.8; margin-bottom: 6px;
}
.sp2 .callout .ct {
  font-family: var(--f-display); font-size: 14px; line-height: 1.25;
  letter-spacing: -0.01em; margin: 0;
}

/* Spread 3 — diagrama */
.sp3 .pages           { background: var(--crema); }
.sp3-l                { padding-top: 40px; }
.sp3-l .label {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--terra); margin-bottom: 12px;
}
.sp3-l h5 {
  font-family: var(--f-display); font-weight: 400; font-size: 22px;
  line-height: 1.04; color: var(--deep); margin: 0 0 12px; letter-spacing: -0.016em;
}
.sp3-l p              { font-size: 9.5px; line-height: 1.6; color: var(--ink); margin: 0 0 8px; }
.sp3-r                { padding: 28px; background: var(--crema-2); }

.diagram {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.diagram .step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--crema);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.diagram .step.accent           { background: var(--deep); color: var(--crema); border-color: transparent; }
.diagram .step .n {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--terra);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--crema);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2);
}
.diagram .step.accent .n        { background: var(--terra); color: var(--crema); border-color: transparent; }
.diagram .step .lbl             { font-family: var(--f-brand); font-weight: 600; font-size: 11px; color: var(--deep); letter-spacing: -0.01em; }
.diagram .step.accent .lbl      { color: var(--crema); }
.diagram .step .sub             { font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.06em; color: var(--ink); opacity: 0.6; text-transform: uppercase; }
.diagram .step.accent .sub      { color: var(--crema); opacity: 0.7; }

/* Spread 4 — cierre / quote sobre Deep */
.sp4 .pages              { background: var(--deep); color: var(--crema); }
.sp4 .pages::after       { background: rgba(245, 239, 228, 0.12); }
.sp4-l                   { justify-content: center; padding: 40px; }
.sp4-l .q {
  font-family: var(--f-display); font-weight: 400;
  font-size: 24px; line-height: 1.15; letter-spacing: -0.014em; margin: 0;
}
.sp4-l .q em             { font-style: italic; color: var(--mostaza); }
.sp4-l .attrib {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 24px; opacity: 0.7;
}
.sp4-r                   { padding: 40px; align-items: center; justify-content: center; }
.sp4-r img               { width: 70%; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.32)); }
.sp4 .pagenum,
.sp4 .runner             { color: var(--crema); opacity: 0.55; }

/* Spread · TOC */
.sp-toc                  { padding: 36px 32px; background: var(--crema); }
.sp-toc .runner          { right: 32px; }
.sp-toc h5 {
  font-family: var(--f-display); font-weight: 400; font-size: 24px;
  line-height: 1.05; color: var(--deep); margin: 0 0 20px;
  letter-spacing: -0.016em;
}
.sp-toc h5 em            { font-style: italic; color: var(--terra); }
.sp-toc ol               { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.sp-toc ol li {
  counter-increment: toc;
  display: grid;
  grid-template-columns: 28px 1fr 36px;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px dashed var(--line);
  align-items: baseline;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ink);
}
.sp-toc ol li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--f-mono); font-size: 9px;
  color: var(--terra); letter-spacing: 0.04em;
}
.sp-toc ol li .pg        { font-family: var(--f-mono); font-size: 9px; color: var(--ink); opacity: 0.55; text-align: right; }
.sp-toc ol li.section {
  font-family: var(--f-mono); font-size: 8.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--deep); opacity: 0.6;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.sp-toc ol li.section::before { content: ""; }

/* Spread · intro */
.sp-intro                { padding: 56px 36px 36px; background: var(--crema-2); }
.sp-intro .label {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--terra); margin-bottom: 24px;
}
.sp-intro .body-mini     { font-size: 9.5px; line-height: 1.65; color: var(--ink); margin: 0 0 8px; }
.sp-intro .body-mini.indent { text-indent: 1.2em; }
.sp-intro h4 {
  font-family: var(--f-display); font-weight: 400; font-size: 28px;
  line-height: 1.02; color: var(--deep);
  margin: 0 0 16px; letter-spacing: -0.018em;
}
.sp-intro h4 em          { font-style: italic; color: var(--terra); }

/* Spread · notas de capítulo */
.sp-notes                { padding: 44px 32px 32px; background: var(--crema); }
.sp-notes h5 {
  font-family: var(--f-display); font-weight: 400; font-size: 20px;
  line-height: 1.05; color: var(--deep); margin: 0 0 8px;
}
.sp-notes h5 em          { font-style: italic; color: var(--terra); }
.sp-notes .sub {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--deep); opacity: 0.65; margin-bottom: 18px;
}
.sp-notes ol.notes       { list-style: none; padding: 0; margin: 0; }
.sp-notes ol.notes li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 10px; line-height: 1.6;
  color: var(--ink);
}
.sp-notes ol.notes li:first-child { border-top: none; }
.sp-notes ol.notes li .n          { font-family: var(--f-mono); color: var(--terra); font-size: 10px; }

/* Spread · colofón */
.sp-colofon {
  padding: 44px 36px 32px;
  background: var(--deep);
  color: var(--crema);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sp-colofon .runner      { color: var(--mostaza); opacity: 0.85; }
.sp-colofon .wm {
  font-family: var(--f-brand); font-weight: 800;
  font-size: 28px; letter-spacing: -0.05em; color: var(--crema);
  margin-top: 24px;
}
.sp-colofon p {
  font-family: var(--f-display); font-style: italic;
  font-size: 15px; line-height: 1.4;
  color: var(--crema); opacity: 0.82;
  max-width: 26ch; margin: 12px 0 28px;
}
.sp-colofon dl           { margin: 0; display: grid; grid-template-columns: 1fr; gap: 6px; }
.sp-colofon dl > div     { display: grid; grid-template-columns: 80px 1fr; gap: 8px; }
.sp-colofon dt {
  font-family: var(--f-mono); font-size: 8.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mostaza); opacity: 0.85;
}
.sp-colofon dd           { margin: 0; font-family: var(--f-mono); font-size: 9px; color: var(--crema); opacity: 0.85; }
.sp-colofon .pagenum     { color: var(--mostaza); opacity: 0.7; }

@media (max-width: 1100px) {
  .ebook-row    { grid-template-columns: 1fr; }
  .spread-grid  { grid-template-columns: 1fr; }
}


/* =========================================================
   25 · LANDING PATTERNS
   ---------------------------------------------------------
   Hero de producto, fila de features, CTA strip. Más
   patrones de prueba social, pricing y FAQ están en los
   capítulos 15–16, reutilizables fuera del landing.
   ========================================================= */

/* Land hero · floating tags y card auxiliar */
.land-hero {
  background: var(--crema);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 64px 64px 48px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: end;
  position: relative;
  overflow: hidden;
}
.land-hero .tag {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--terra);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 24px;
}
.land-hero .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--terra); }
.land-hero h3 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 72px; line-height: 0.94; letter-spacing: -0.022em; color: var(--deep);
  margin: 0 0 24px;
}
.land-hero h3 em             { font-style: italic; color: var(--terra); }
.land-hero p                 { font-family: var(--f-display); font-size: 22px; line-height: 1.35; color: var(--deep); opacity: 0.85; margin: 0 0 32px; max-width: 30ch; }
.land-hero .cta-row          { display: flex; gap: 12px; }

.land-hero .right {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  position: relative;
}
.land-hero .right img        { width: 86%; filter: drop-shadow(0 20px 28px rgba(62, 95, 104, 0.20)); }
.land-hero .floating-tag {
  position: absolute;
  top: 24px;
  left: 12%;
  background: var(--mostaza);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--f-brand);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-soft);
}
.land-hero .floating-card {
  position: absolute;
  bottom: 16%;
  left: -8%;
  background: var(--crema);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: var(--shadow-std);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 220px;
}
.land-hero .floating-card .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }
.land-hero .floating-card .ft  { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink); }

@media (max-width: 1100px) {
  .land-hero                              { grid-template-columns: 1fr; padding: 40px; }
  .land-hero h3                           { font-size: 48px; }
  .land-hero .floating-card,
  .land-hero .floating-tag                { display: none; }
}

/* Features · tres tarjetas */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.feat-card {
  background: var(--crema);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px;
}
.feat-card .ix {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--terra); margin-bottom: 32px;
}
.feat-card h4 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 26px; line-height: 1.05; letter-spacing: -0.018em;
  color: var(--deep); margin: 0 0 12px;
}
.feat-card h4 em            { font-style: italic; color: var(--terra); }
.feat-card p                { font-size: 14px; line-height: 1.55; color: var(--ink); opacity: 0.78; margin: 0; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr; } }

/* CTA strip · superficie Deep con grano overlay */
.cta-strip {
  background: var(--deep);
  color: var(--crema);
  border-radius: var(--r-card);
  padding: 56px 56px 48px;
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.cta-strip h4 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 40px; line-height: 1.02; letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.cta-strip h4 em            { font-style: italic; color: var(--mostaza); }
.cta-strip p {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--crema); opacity: 0.7; margin: 0;
}
.cta-strip .btn-cta {
  background: var(--terra); color: var(--crema);
  padding: 16px 28px;
  border-radius: var(--r-btn);
  font-family: var(--f-brand); font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-std);
  position: relative; z-index: 2;
}
@media (max-width: 900px) {
  .cta-strip                  { grid-template-columns: 1fr; padding: 32px; }
  .cta-strip h4               { font-size: 28px; }
}


/* =========================================================
   26 · FOOTER
   ---------------------------------------------------------
   Cierre Deep con grano overlay, wordmark grande, columnas
   de enlaces y legal monoespaciado.
   ========================================================= */
footer {
  background: var(--deep);
  color: var(--crema);
  padding: 64px 0 40px;
  margin-top: 0;
  position: relative;
}
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}
footer .foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
footer h5 {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mostaza); margin: 0 0 16px;
}
footer ul                    { list-style: none; padding: 0; margin: 0; }
footer ul li                 { font-family: var(--f-brand); font-weight: 500; font-size: 14px; margin-bottom: 8px; letter-spacing: -0.01em; }
footer ul li a               { color: var(--crema); text-decoration: none; opacity: 0.85; }
footer ul li a:hover         { opacity: 1; color: var(--mostaza); }
footer .brand-block .wordmark { font-size: 36px; letter-spacing: -0.05em; color: var(--crema); }
footer .brand-block p        { font-family: var(--f-display); font-style: italic; font-size: 18px; color: var(--crema); opacity: 0.7; max-width: 26ch; margin: 16px 0 0; line-height: 1.3; }
footer .legal {
  border-top: 1px solid rgba(245, 239, 228, 0.18);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--crema); opacity: 0.6;
}
@media (max-width: 900px) {
  footer .foot-grid  { grid-template-columns: 1fr 1fr; }
  footer .legal      { flex-direction: column; gap: 8px; }
}


/* =========================================================
   27 · UTILIDADES
   ---------------------------------------------------------
   Pequeños efectos compartidos. Hover lift para cards
   interactivas, sr-only para texto solo-lector.
   ========================================================= */
.lift {
  transition:
    transform   var(--dur-base) var(--ease-out),
    box-shadow  var(--dur-base) var(--ease-out);
}
.lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elev);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* =========================================================
   28 · ACCESIBILIDAD
   ---------------------------------------------------------
   Foco visible Terra · respeto a prefers-reduced-motion.
   ========================================================= */
:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}


/* =========================================================
   29 · IMPRESIÓN
   ---------------------------------------------------------
   El ebook debe imprimirse fiel. Se anula grano, topbar
   y footer; se permite salto de página por sección.
   ========================================================= */
@media print {
  body::after,
  .grain::after                { display: none !important; }
  .topbar, footer, .web-nav    { display: none !important; }
  body                         { background: white; color: black; }
  section                      { page-break-after: always; padding: 24px 0; border: none; }
  .swatch, .card, .feat-card,
  .price-card, .testimonial,
  .spread                      { break-inside: avoid; }
  a                            { color: inherit; text-decoration: none; }
}