/* ═══════════════════════════════════════════════════════════════
   IAC · ia-consultoria.com
   Sistema de diseño — v1.0
   ═══════════════════════════════════════════════════════════════ */


/* ── Fuentes self-hosted (RGPD: sin peticiones a Google) ────── */

@font-face {
  font-family: 'Space Grotesk';
  src: url("/static/fonts/spacegrotesk-variable-latin.138c8f78129c.woff2") format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url("/static/fonts/inter-variable-latin.b78b5c4671c2.woff2") format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Sistema cuaderno de taller — v2 */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url("/static/fonts/bricolage-grotesque-variable.ada540c0e24a.woff2") format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url("/static/fonts/jetbrains-mono-variable.b058178d7f30.woff2") format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}


/* ── Design tokens ─────────────────────────────────────────── */

:root {
  /* Marca — 3 colores del logo */
  --morado:          #644276;
  --morado-hover:    #7a5490;
  --dorado:          #E8C77B;
  --dorado-hover:    #d4a45f;
  --gris:            #5D5D5F;
  --gris-claro:      #8A8A8C;

  /* Fondos (claros, no funerarios) */
  --fondo-oscuro:    #3C3C3E;
  --fondo-medio:     #4A4A4C;

  /* Neutros */
  --texto:           #2D2D2F;
  --texto-suave:     #6B6B6D;
  --texto-apagado:   #9E9E9E;
  --borde:           #E5E5E5;
  --hielo:           #F7F6F4;
  --blanco:          #FFFFFF;

  /* Tipografía */
  --font-display:    'Space Grotesk', system-ui, sans-serif;
  --font-body:       'Inter', system-ui, sans-serif;

  /* Espaciado base (8px grid) */
  --sp-1:  .25rem;   /*  4px */
  --sp-2:  .5rem;    /*  8px */
  --sp-3:  .75rem;   /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.25rem;  /* 20px */
  --sp-6:  1.5rem;   /* 24px */
  --sp-8:  2rem;     /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */
  --sp-20: 5rem;     /* 80px */
  --sp-24: 6rem;     /* 96px */

  /* Layout */
  --max-w:    1120px;
  --radius:   3px;
  --ease:     200ms cubic-bezier(.4, 0, .2, 1);
}


/* ── Reset ─────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img    { max-width: 100%; height: auto; display: block; }
a      { color: inherit; text-decoration: none; }
address { font-style: normal; }


/* ── Layout ────────────────────────────────────────────────── */

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-8);
}

.section         { padding: var(--sp-24) 0; }
.section--sm     { padding: var(--sp-16) 0; }
.section--light  { background: var(--hielo); }
.section--dark   { background: var(--fondo-oscuro); color: var(--blanco); }
.section--morado { background: var(--morado); color: var(--blanco); }

.section__header { margin-bottom: var(--sp-12); }

.section__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--texto);
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: var(--sp-3);
}
.section--dark .section__title,
.section--morado .section__title { color: var(--blanco); }

.section__sub {
  font-size: 1.05rem;
  color: var(--texto-suave);
  max-width: 540px;
  line-height: 1.7;
}
.section--dark .section__sub { color: var(--texto-apagado); }


/* ── Tipografía ────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.text-link {
  color: var(--morado);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--borde);
  transition: text-decoration-color var(--ease);
}
.text-link:hover { text-decoration-color: var(--morado); }


/* ── Etiqueta ──────────────────────────────────────────────── */

.label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: var(--sp-6);
}


/* ── Botones ───────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .75rem 1.75rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
  white-space: nowrap;
  line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn--sm    { padding: .55rem 1.25rem; font-size: .72rem; }

.btn--primary       { background: var(--morado);       color: var(--blanco);     border-color: var(--morado); }
.btn--primary:hover  { background: var(--morado-hover); border-color: var(--morado-hover); }

.btn--dorado        { background: var(--dorado);       color: var(--texto);      border-color: var(--dorado); }
.btn--dorado:hover   { background: var(--dorado-hover); border-color: var(--dorado-hover); }

.btn--outline       { background: transparent;         color: var(--blanco);     border-color: rgba(255,255,255,.35); }
.btn--outline:hover  { background: rgba(255,255,255,.08); border-color: var(--blanco); }

.btn--outline-dark       { background: transparent;     color: var(--texto);      border-color: var(--borde); }
.btn--outline-dark:hover  { background: var(--hielo);    border-color: var(--texto-suave); }

.btn--ghost       { background: transparent; color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.2); }
.btn--ghost:hover  { background: rgba(255,255,255,.06); color: var(--blanco); border-color: rgba(255,255,255,.4); }


/* ── Badges ────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .65rem;
  border-radius: var(--radius);
}
.badge--activo    { background: rgba(100,66,118,.1);  color: var(--morado); }
.badge--gratuito  { background: rgba(232,199,123,.2); color: #7a5515; }
.badge--dev       { background: var(--hielo);         color: var(--texto-suave); }
.badge--rediseno  { background: #FEF3C7;             color: #92400E; }


/* ── Cabecera ──────────────────────────────────────────────── */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.logo { display: flex; align-items: center; gap: var(--sp-3); }
.logo__img { height: 38px; width: auto; }
.logo__text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--texto);
  letter-spacing: -.03em;
}
.logo__sep { color: var(--dorado); margin: 0 1px; }

.nav { display: flex; align-items: center; gap: var(--sp-8); }

.nav__link {
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  transition: color var(--ease);
  position: relative;
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--dorado);
  transform: scaleX(0);
  transition: transform var(--ease);
  transform-origin: left;
}
.nav__link:hover        { color: var(--texto); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-2);
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--texto);
  transition: var(--ease);
}


/* ── Hero ──────────────────────────────────────────────────── */

/* ── Dashboard hero (home) ─────────────────────────────────── */

.dash-hero {
  padding: var(--sp-16) 0 var(--sp-12);
  background: var(--blanco);
}
.dash-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  color: var(--gris);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: var(--sp-6);
}
.dash-hero__accent { color: var(--morado); }
.dash-hero__desc {
  font-size: 1.05rem;
  color: var(--texto-suave);
  max-width: 560px;
  line-height: 1.8;
  margin-bottom: var(--sp-8);
}
.dash-hero__actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* Animaciones de entrada */
.dash-hero .label,
.dash-hero__title,
.dash-hero__desc,
.dash-hero__actions { animation: fade-up .6s cubic-bezier(.4,0,.2,1) both; }
.dash-hero .label         { animation-delay: 0s; }
.dash-hero__title         { animation-delay: .08s; }
.dash-hero__desc          { animation-delay: .16s; }
.dash-hero__actions       { animation-delay: .28s; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Stat cards (dashboard) ────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.stat {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: var(--sp-6);
  text-align: center;
  transition: box-shadow var(--ease), transform var(--ease);
}
.stat:hover {
  box-shadow: 0 4px 20px rgba(100,66,118,.08);
  transform: translateY(-2px);
}
.stat__number {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--morado);
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.stat__label {
  font-size: .78rem;
  color: var(--texto-suave);
  letter-spacing: .02em;
}

@media (max-width: 960px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr 1fr; } }


/* ── Page hero (páginas interiores) ────────────────────────── */

.page-hero {
  background: var(--fondo-oscuro);
  padding: var(--sp-12) 0 var(--sp-16);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(232,199,123,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; }

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--blanco);
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: var(--sp-4);
}
.page-hero__sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.45);
  max-width: 500px;
}


/* ── Grid nosotros ─────────────────────────────────────────── */

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}
.about__text p {
  font-size: 1.05rem;
  color: #383838;
  margin-bottom: var(--sp-5);
  line-height: 1.8;
}
.about__text p:last-child { margin-bottom: 0; }

.pillars { display: flex; flex-direction: column; }
.pillar {
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--borde);
}
.pillar:first-child { border-top: 1px solid var(--borde); }
.pillar__title {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.pillar__title::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--dorado);
  border-radius: 50%;
  flex-shrink: 0;
}
.pillar__desc { font-size: .92rem; color: var(--texto-suave); line-height: 1.7; }


/* ── Tarjetas de proyectos ─────────────────────────────────── */

.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

.card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-top: 3px solid transparent;
  border-radius: var(--radius);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: box-shadow var(--ease), border-top-color var(--ease), transform var(--ease);
}
.card:hover {
  box-shadow: 0 8px 32px rgba(100,66,118,.08);
  border-top-color: var(--morado);
  transform: translateY(-2px);
}
.card--featured              { border-top-color: var(--dorado); }
.card--featured:hover         { border-top-color: var(--dorado-hover); }
.card--muted                 { opacity: .5; }

.card__meta  { margin-bottom: var(--sp-1); }
.card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--texto);
  letter-spacing: -.01em;
}
.card__desc {
  font-size: .9rem;
  color: var(--texto-suave);
  line-height: 1.7;
  flex: 1;
}
.card__link {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--morado);
  transition: color var(--ease), letter-spacing var(--ease);
  align-self: flex-start;
  text-transform: uppercase;
}
.card__link:hover { color: var(--morado-hover); letter-spacing: .07em; }


/* ── CTA doble (newsletter + contacto) ─────────────────────── */

.cta-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-12);
  align-items: center;
}
.cta-split__block { display: flex; flex-direction: column; gap: var(--sp-5); }
.cta-split__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--blanco);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.cta-split__block p { color: rgba(255,255,255,.55); font-size: .92rem; line-height: 1.75; }
.cta-split__sep { width: 1px; height: 120px; background: rgba(255,255,255,.1); }


/* ── Formularios ───────────────────────────────────────────── */

.form-wrapper { max-width: 540px; }

.campo { margin-bottom: var(--sp-6); }
.campo label {
  display: block;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto);
  margin-bottom: var(--sp-2);
}

.form-control {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid var(--borde);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--texto);
  background: var(--blanco);
  transition: border-color var(--ease);
  outline: none;
}
.form-control:focus { border-color: var(--morado); }
.form-control::placeholder { color: var(--texto-apagado); }
textarea.form-control { resize: vertical; min-height: 110px; }

.campo-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.campo-checkbox input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px; height: 16px;
  accent-color: var(--morado);
  cursor: pointer;
}
.campo-checkbox label {
  font-size: .85rem;
  color: var(--texto-suave);
  cursor: pointer;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.errores-campo { color: #DC2626; font-size: .8rem; margin-top: var(--sp-2); }
.errores-campo ul { list-style: none; }


/* ── Mensajes flash ────────────────────────────────────────── */

.flash-messages { list-style: none; margin-bottom: var(--sp-6); }
.flash-messages li {
  padding: .8rem 1.15rem;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .02em;
  margin-bottom: var(--sp-2);
}
.flash-messages .success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.flash-messages .error   { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.flash-messages .warning { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.flash-messages .info    { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }


/* ── Footer ────────────────────────────────────────────────── */

.footer { background: var(--fondo-oscuro); color: rgba(255,255,255,.4); padding-top: var(--sp-16); }

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-12);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.footer__brand { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__name {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--blanco);
}
.footer__brand p,
.footer__brand address {
  font-size: .82rem;
  line-height: 1.75;
}
.footer__email {
  font-size: .82rem;
  color: var(--dorado);
  transition: opacity var(--ease);
  font-family: var(--font-display);
  font-weight: 600;
}
.footer__email:hover { opacity: .7; }

.footer__nav { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__nav-title {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: var(--sp-1);
}
.footer__nav a {
  font-size: .82rem;
  color: rgba(255,255,255,.35);
  transition: color var(--ease);
}
.footer__nav a:hover { color: var(--blanco); }

.footer__bottom { padding: var(--sp-5) 0; }
.footer__bottom p {
  font-size: .68rem;
  color: rgba(255,255,255,.18);
  text-align: center;
  letter-spacing: .03em;
}
.footer__legal {
  font-size: .68rem;
  color: rgba(255,255,255,.18);
  text-align: center;
  margin-top: var(--sp-1);
}
.footer__legal a { color: rgba(255,255,255,.25); transition: color var(--ease); }
.footer__legal a:hover { color: rgba(255,255,255,.5); }


/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 960px) {
  .about__grid       { grid-template-columns: 1fr; gap: var(--sp-10); }
  .projects__grid    { grid-template-columns: 1fr; }
  .cta-split         { grid-template-columns: 1fr; gap: var(--sp-8); }
  .cta-split__sep    { width: 60px; height: 1px; justify-self: center; }
  .footer__inner     { grid-template-columns: 1fr 1fr; }
  .footer__brand     { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root { --sp-24: 4rem; --sp-16: 3rem; }

  .container { padding: 0 var(--sp-5); }

  .header__inner { position: relative; }
  .nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
    position: absolute;
    top: 68px; left: 0; right: 0;
    background: var(--blanco);
    padding: var(--sp-6);
    border-bottom: 1px solid var(--borde);
    box-shadow: 0 8px 32px rgba(0,0,0,.08);
  }
  .nav--open   { display: flex; }
  .nav__toggle { display: flex; }

  .hero { min-height: 75vh; padding: var(--sp-12) 0; }

  .footer__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
}


/* ═══════════════════════════════════════════════════════════════
   SISTEMA "CUADERNO DE TALLER" — v2
   Solo 3 colores del logo + neutros. Tipografía display:
   Bricolage Grotesque. Mono: JetBrains Mono. Body: Inter.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Los 3 colores literales del logo */
  --ink:      #5D5D5F;   /* gris de las letras "IA" */
  --grape:    #644276;   /* trazo morado del marcador */
  --honey:    #E8C77B;   /* trazo dorado del marcador */

  /* Neutros mínimos — papel y tinta */
  --paper:    #FFFFFF;
  --ink-soft: #8A8A8C;
  --ink-faint:#C7C7C9;
  --rule:     #EAEAEA;

  --font-display-2: 'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
}

.v2 {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  /* trama de cuaderno muy sutil */
  background-image:
    radial-gradient(circle, rgba(93,93,95,.045) 1px, transparent 1.4px);
  background-size: 28px 28px;
  background-position: 0 0;
}

.v2 a { color: inherit; }

/* ── Mono helper ─────────────────────────────────────────────── */
.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0;
  font-feature-settings: "ss02";
}
.mono--xs { font-size: .68rem; letter-spacing: .04em; }
.mono--sm { font-size: .78rem; }

/* ── Highlighter (trazo de marcador a mano) ──────────────────── */
/* Se usa así: <span class="hl"><span class="hl__word">construimos</span></span>
   El SVG decorativo está embebido como background-image.            */
.hl {
  position: relative;
  display: inline-block;
  isolation: isolate;
  white-space: nowrap;
}
.hl__word {
  position: relative;
  z-index: 1;
}
.hl::before {
  content: "";
  position: absolute;
  inset: auto -.18em -.05em -.18em;
  height: .55em;
  z-index: 0;
  border-radius: .1em;
  transform: skew(-3deg) rotate(-.6deg);
  transform-origin: left center;
}
.hl--gold::before {
  background:
    linear-gradient(
      100deg,
      rgba(232,199,123,0) 0%,
      rgba(232,199,123,.95) 6%,
      rgba(232,199,123,.85) 50%,
      rgba(232,199,123,.95) 94%,
      rgba(232,199,123,0) 100%);
  filter: url(#wobble-gold);
  animation: hl-draw 1.1s cubic-bezier(.7,0,.3,1) .2s both;
}
.hl--grape::before {
  background:
    linear-gradient(
      100deg,
      rgba(100,66,118,0) 0%,
      rgba(100,66,118,.85) 8%,
      rgba(100,66,118,.7) 50%,
      rgba(100,66,118,.85) 92%,
      rgba(100,66,118,0) 100%);
  filter: url(#wobble-grape);
  animation: hl-draw 1.1s cubic-bezier(.7,0,.3,1) .35s both;
}
@keyframes hl-draw {
  from { transform: skew(-3deg) rotate(-.6deg) scaleX(0); }
  to   { transform: skew(-3deg) rotate(-.6deg) scaleX(1); }
}

/* Tachón a mano */
.strike {
  position: relative;
  display: inline-block;
  color: var(--ink-soft);
}
.strike::after {
  content: "";
  position: absolute;
  left: -.05em; right: -.05em;
  top: 52%;
  height: .14em;
  background: var(--grape);
  border-radius: 50%;
  transform: rotate(-2.5deg);
  filter: url(#wobble-grape);
  animation: strike-draw .7s cubic-bezier(.7,0,.3,1) .5s both;
  transform-origin: left center;
}
@keyframes strike-draw {
  from { transform: rotate(-2.5deg) scaleX(0); }
  to   { transform: rotate(-2.5deg) scaleX(1); }
}

/* Subrayado a mano para enlaces "→ acción" */
.scribble-link {
  display: inline-flex;
  align-items: baseline;
  gap: .55em;
  font-family: var(--font-display-2);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  padding-bottom: .15em;
  background-image: linear-gradient(var(--grape), var(--grape));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  transition: background-size 250ms ease, color 250ms ease;
}
.scribble-link::before { content: "→"; color: var(--honey); transform: translateY(-.05em); }
.scribble-link:hover {
  background-size: 100% 8px;
  background-image: linear-gradient(rgba(232,199,123,.45), rgba(232,199,123,.45));
  color: var(--ink);
}

/* ── Hero portada de cuaderno ────────────────────────────────── */
.cuaderno-hero {
  position: relative;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.cuaderno-hero__meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-soft);
  letter-spacing: .05em;
  text-transform: uppercase;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: .55rem 0;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.cuaderno-hero__meta span + span::before {
  content: "·";
  margin-right: .8em;
  color: var(--ink-faint);
}

.cuaderno-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.cuaderno-hero__title {
  font-family: var(--font-display-2);
  font-weight: 700;
  font-size: clamp(2.6rem, 6.4vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--ink);
  font-variation-settings: "wdth" 100, "opsz" 14;
  text-wrap: balance;
}
.cuaderno-hero__title em {
  font-style: normal;
  font-variation-settings: "wdth" 92, "opsz" 14;
}

.cuaderno-hero__lede {
  margin-top: clamp(1.5rem, 2vw, 2rem);
  max-width: 38em;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.65;
  color: var(--ink);
}
.cuaderno-hero__lede strong { font-weight: 600; color: var(--ink); }

.cuaderno-hero__actions {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
}

/* Post-it lateral del hero */
.postit {
  position: relative;
  background: var(--honey);
  color: var(--ink);
  padding: 1.15rem 1.25rem 1.25rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1.55;
  transform: rotate(2.4deg);
  box-shadow: 0 18px 30px -22px rgba(93,93,95,.55);
  align-self: start;
  margin-top: 1.25rem;
}
.postit::before {
  content: "";
  position: absolute;
  top: -10px; left: 50%;
  width: 56px; height: 14px;
  background: rgba(100,66,118,.32);
  transform: translateX(-50%) rotate(-3deg);
}
.postit strong {
  display: block;
  font-family: var(--font-display-2);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  margin-bottom: .35rem;
  color: var(--ink);
}
.postit em {
  font-style: normal;
  color: var(--grape);
  font-weight: 600;
}

/* Anotación a mano alzada (junto a un titular) */
.anota {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 400;
  color: var(--grape);
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
  padding-left: .6em;
}
.anota::before {
  content: "←";
  color: var(--honey);
  font-size: .85rem;
  transform: translateY(.08em);
}

/* ── Marquee técnico ─────────────────────────────────────────── */
.marquee {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  position: relative;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-slide 38s linear infinite;
  padding: .85rem 0;
}
.marquee__group {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  padding-right: 2.25rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.marquee__group span { color: var(--paper); }
.marquee__group i {
  font-style: normal;
  color: var(--honey);
}
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ── Sección genérica del cuaderno ───────────────────────────── */
.taller {
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
}
.taller__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.taller__tag {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grape);
}
.taller__tag::before {
  content: "§";
  margin-right: .55em;
  color: var(--honey);
}
.taller__count {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-soft);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.taller__title {
  font-family: var(--font-display-2);
  font-weight: 700;
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
  flex: 1 1 60%;
}
.taller__title em {
  font-style: normal;
  font-variation-settings: "wdth" 92;
}

/* ── Fichas de proyecto pegadas en pared ─────────────────────── */
.fichas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.ficha {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: clamp(1.25rem, 2.4vw, 1.85rem) clamp(1.25rem, 2.4vw, 1.85rem) clamp(1.5rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto auto;
  column-gap: 1.25rem;
  row-gap: .6rem;
  transition: transform 240ms cubic-bezier(.4,0,.2,1), box-shadow 240ms ease;
  text-decoration: none;
  color: inherit;
}
.ficha:nth-child(1) { transform: rotate(-.55deg); }
.ficha:nth-child(2) { transform: rotate( .35deg) translateY(.4rem); }
.ficha:nth-child(3) { transform: rotate( .25deg); }
.ficha:nth-child(4) { transform: rotate(-.4deg)  translateY(.3rem); }
.ficha:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 0 24px 40px -28px rgba(93,93,95,.45);
}
.ficha::before { /* "washi tape" decorativa */
  content: "";
  position: absolute;
  top: -10px; left: 1.5rem;
  width: 64px; height: 16px;
  background: var(--honey);
  opacity: .85;
  transform: rotate(-3deg);
}
.ficha:nth-child(2n)::before {
  background: var(--grape);
  opacity: .7;
  left: auto; right: 1.5rem;
  transform: rotate(2deg);
}

.ficha__num {
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1;
  color: var(--ink-faint);
  letter-spacing: -.03em;
  align-self: start;
}
.ficha__estado {
  grid-row: 1;
  align-self: start;
  margin-top: .5rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grape);
}
.ficha__estado::before {
  content: "● ";
  color: var(--honey);
  font-size: .7em;
}
.ficha__estado--off { color: var(--ink-faint); }
.ficha__estado--off::before { color: var(--ink-faint); }

.ficha__title {
  grid-column: 1 / -1;
  font-family: var(--font-display-2);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-top: .25rem;
  position: relative;
  width: max-content;
  max-width: 100%;
}
.ficha:hover .ficha__title {
  background: linear-gradient(rgba(232,199,123,.55), rgba(232,199,123,.55)) 0 88% / 100% 38% no-repeat;
}
.ficha__desc {
  grid-column: 1 / -1;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 32em;
}
.ficha__nota {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--grape);
  margin-top: .3rem;
}
.ficha__nota::before { content: "↳ "; color: var(--honey); }

.ficha--off {
  background: repeating-linear-gradient(
    -8deg,
    var(--paper) 0px, var(--paper) 14px,
    rgba(199,199,201,.15) 14px, rgba(199,199,201,.15) 16px
  );
}
.ficha--off .ficha__title { color: var(--ink-soft); }
.ficha--off .ficha__title .strike { color: var(--ink-soft); }

/* ── Circuito · dos vías ─────────────────────────────────────── */
.circuito {
  position: relative;
}
.circuito__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}

.via {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.via::before { /* sello de carpeta arriba */
  content: attr(data-archivo);
  position: absolute;
  top: -.7rem;
  left: 1.25rem;
  background: var(--paper);
  padding: 0 .6rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.via__cabecera {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .85rem;
  margin-bottom: .25rem;
}
.via__letra {
  font-family: var(--font-display-2);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  line-height: .9;
  letter-spacing: -.04em;
  font-variation-settings: "wdth" 100;
}
.via--a .via__letra { color: var(--honey); }
.via--b .via__letra { color: var(--grape); }

.via__pre {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex: 1;
}

.via__h {
  font-family: var(--font-display-2);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
}

.via__pasos {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.via__pasos li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: .25rem;
  align-items: baseline;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink);
}
.via__pasos li::before {
  content: counter(via-step, decimal-leading-zero);
  counter-increment: via-step;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-faint);
  letter-spacing: .04em;
  font-weight: 500;
}
.via__pasos { counter-reset: via-step; }

.via__ejemplo {
  margin-top: auto;
  padding: .9rem 1rem;
  border-top: 1px dashed var(--ink-faint);
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.via__ejemplo strong {
  display: block;
  font-family: var(--font-display-2);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: .15rem;
  text-transform: none;
}
.via__ejemplo em {
  font-style: normal;
  color: var(--grape);
  font-weight: 500;
}

/* Sello "TARIFA IAC" estampado, ligero rotate */
.sello {
  position: absolute;
  bottom: -.85rem;
  right: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  background: var(--paper);
  border: 1.5px solid var(--grape);
  color: var(--grape);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .35rem .75rem;
  transform: rotate(-3.5deg);
}
.sello::before { content: "✱"; color: var(--honey); }

/* Conector central entre A y B (flecha SVG) */
.circuito__conector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
}
.circuito__conector svg {
  width: 60px;
  height: auto;
  display: block;
}
.circuito__conector svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 4 4;
}
.circuito__conector svg .arrow {
  fill: var(--honey);
  stroke: none;
}

/* CTA mediano de cierre */
.circuito__cta {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.circuito__cta p {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--ink-soft);
  flex: 1 1 280px;
  line-height: 1.55;
}

/* ── Manifiesto (cómo trabajamos) ────────────────────────────── */
.manifiesto {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.manifiesto__texto p {
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 1.25em;
  text-wrap: pretty;
}
.manifiesto__firma {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-soft);
}

.lista-pilares {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--ink);
}
.lista-pilares li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}
.lista-pilares__num {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 500;
  color: var(--honey);
  padding-top: .15rem;
  letter-spacing: .04em;
}
.lista-pilares__h {
  font-family: var(--font-display-2);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: .25rem;
  line-height: 1.25;
}
.lista-pilares__d {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 32em;
}

/* ── CTA dual minimal (newsletter + contacto) ────────────────── */
.dos-bloques {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.dos-bloques__col { display: flex; flex-direction: column; gap: 1rem; }
.dos-bloques__pre {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.dos-bloques__col--gold .dos-bloques__pre { color: var(--honey); }
.dos-bloques__col--gold .dos-bloques__pre::before { content: "✱ "; color: var(--grape); }
.dos-bloques__col--grape .dos-bloques__pre { color: var(--grape); }
.dos-bloques__col--grape .dos-bloques__pre::before { content: "✱ "; color: var(--honey); }

.dos-bloques__h {
  font-family: var(--font-display-2);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ink);
}
.dos-bloques__p {
  font-size: .98rem;
  line-height: 1.65;
  color: var(--ink);
  max-width: 28em;
}

/* ── Firma final (trazo morado a mano) ───────────────────────── */
.firma {
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.firma__svg {
  display: inline-block;
  width: clamp(180px, 24vw, 280px);
  height: auto;
  color: var(--grape);
}
.firma__svg path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.firma__svg .firma__draw {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: firma-draw 2.4s cubic-bezier(.7,0,.3,1) .2s forwards;
}
.firma__meta {
  display: block;
  margin-top: .9rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-soft);
  letter-spacing: .12em;
  text-transform: uppercase;
}
@keyframes firma-draw {
  to { stroke-dashoffset: 0; }
}

/* ── Reveal en scroll (suave) ────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s cubic-bezier(.4,0,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ── Responsive del sistema v2 ───────────────────────────────── */
@media (max-width: 880px) {
  .cuaderno-hero__grid { grid-template-columns: 1fr; }
  .postit { justify-self: start; max-width: 320px; }
  .fichas { grid-template-columns: 1fr; }
  .ficha:nth-child(n) { transform: rotate(0); }
  .manifiesto { grid-template-columns: 1fr; }
  .dos-bloques { grid-template-columns: 1fr; }
  .circuito__grid { grid-template-columns: 1fr; }
  .circuito__conector { padding: .5rem 0; }
  .circuito__conector svg { transform: rotate(90deg); width: 44px; }
}
@media (max-width: 540px) {
  .cuaderno-hero__title { font-size: clamp(2.2rem, 11vw, 3rem); }
  .cuaderno-hero__meta { font-size: .65rem; }
  .marquee__group { gap: 1.25rem; padding-right: 1.25rem; font-size: .72rem; }
}

/* ── Cabecera de página interior ─────────────────────────────── */
.cab-pag {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--ink);
}
.cab-pag__meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: .55rem 0;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.cab-pag__meta span + span::before { content: "·"; margin-right: .8em; color: var(--ink-faint); }
.cab-pag__tag {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grape);
  margin-bottom: .9rem;
}
.cab-pag__tag::before { content: "§ "; color: var(--honey); }
.cab-pag__title {
  font-family: var(--font-display-2);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--ink);
  text-wrap: balance;
}
.cab-pag__title em { font-style: normal; font-variation-settings: "wdth" 92; }
.cab-pag__sub {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.65;
  color: var(--ink);
  max-width: 38em;
}

/* ── Documento (páginas legales) ─────────────────────────────── */
.documento {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.documento__sidebar {
  position: sticky;
  top: 92px;
  align-self: start;
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1.65;
  color: var(--ink-soft);
  border-left: 1.5px solid var(--ink);
  padding-left: 1rem;
}
.documento__sidebar dt {
  font-weight: 600;
  color: var(--grape);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .68rem;
  margin-top: 1rem;
}
.documento__sidebar dt:first-child { margin-top: 0; }
.documento__sidebar dd { margin: .15rem 0 0; color: var(--ink); }

.documento__cuerpo {
  max-width: 38em;
}
.documento__cuerpo h2 {
  font-family: var(--font-display-2);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 2.5rem 0 .85rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}
.documento__cuerpo h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.documento__cuerpo h2::before {
  content: counter(doc-h2, decimal-leading-zero) " · ";
  counter-increment: doc-h2;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  color: var(--honey);
  letter-spacing: .04em;
  margin-right: .35em;
  vertical-align: 1px;
}
.documento__cuerpo { counter-reset: doc-h2; }
.documento__cuerpo p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 1rem;
}
.documento__cuerpo p strong { font-weight: 600; color: var(--ink); }
.documento__cuerpo a {
  color: var(--grape);
  background-image: linear-gradient(rgba(232,199,123,.55), rgba(232,199,123,.55));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 35%;
  padding-bottom: .05em;
}
.documento__cuerpo a:hover { background-size: 100% 80%; }

/* Tabla cookies */
.tabla-mono {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: .82rem;
  margin: 1.5rem 0 2rem;
}
.tabla-mono thead th {
  text-align: left;
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .65rem .75rem;
  border-bottom: 1.5px solid var(--ink);
}
.tabla-mono td {
  padding: .85rem .75rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink);
  line-height: 1.55;
}
.tabla-mono tr td:first-child { color: var(--grape); white-space: nowrap; }

/* ── Lead grid (página de formulario lead) ───────────────────── */
.lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(2.5rem, 6vw, 5rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  align-items: start;
}
.lead-grid__intro {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.7;
  color: var(--ink);
}
.lead-grid__intro p { margin-bottom: 1rem; }
.lead-grid__intro strong { font-weight: 600; }

/* ── Honeypot anti-bots: invisible para humanos, los bots lo rellenan ── */
.hp-trap,
.hp-trap input,
.hp-trap label {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Formulario v2 (overrides dentro de .v2) ─────────────────── */
.v2 .form-wrapper {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  max-width: none;
}
.v2 .form-wrapper::before {
  content: attr(data-archivo);
  position: absolute;
  top: -.7rem;
  left: 1.25rem;
  background: var(--paper);
  padding: 0 .6rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.v2 .campo label,
.v2 .campo-checkbox label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.v2 .campo-checkbox label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .85rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.v2 .form-control {
  border: 1px solid var(--ink-faint);
  border-radius: 0;
  background: var(--paper);
  font-family: var(--font-body);
  color: var(--ink);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.v2 .form-control:focus {
  border-color: var(--grape);
  box-shadow: 0 0 0 3px rgba(100,66,118,.12);
}
.v2 .campo-checkbox input[type="checkbox"] { accent-color: var(--grape); }
.v2 .form-wrapper .btn,
.v2 .form-wrapper button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  font-family: var(--font-display-2);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .01em;
  text-transform: none;
  padding: .85rem 1.5rem;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.v2 .form-wrapper .btn::before,
.v2 .form-wrapper button[type="submit"]::before {
  content: "→";
  color: var(--honey);
  font-weight: 400;
}
.v2 .form-wrapper .btn:hover,
.v2 .form-wrapper button[type="submit"]:hover {
  background: var(--grape);
  border-color: var(--grape);
}

/* ── Capacidades (lista de pares clave: 32 idiomas, etc.) ────── */
.capacidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 1.5rem 0;
}
.capacidades__item {
  border-left: 1px solid var(--rule);
  padding: .25rem 0 .25rem 1rem;
}
.capacidades__item:first-child { border-left: none; padding-left: 0; }
.capacidades__num {
  display: block;
  font-family: var(--font-display-2);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1;
  color: var(--grape);
  letter-spacing: -.025em;
  margin-bottom: .35rem;
}
.capacidades__num em { font-style: normal; color: var(--honey); }
.capacidades__lab {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ── Casos de uso (pequeñas fichas planas) ───────────────────── */
.casos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.caso {
  border: 1px solid var(--ink);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.caso__pre {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--honey);
}
.caso__pre::before { content: "● "; color: var(--grape); }
.caso__h {
  font-family: var(--font-display-2);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
}
.caso__d {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink);
}

/* ── Bloque de pasos numerados grandes ───────────────────────── */
.pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: paso;
}
.paso {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-top: 1rem;
  border-top: 1.5px solid var(--ink);
  position: relative;
}
.paso::before {
  counter-increment: paso;
  content: counter(paso, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 500;
  color: var(--honey);
  letter-spacing: .08em;
}
.paso__h {
  font-family: var(--font-display-2);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -.015em;
}
.paso__d {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ── Recibido (gracias.html) ─────────────────────────────────── */
.recibido {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.recibido__sello {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grape);
  border: 1.5px solid var(--grape);
  padding: .6rem 1.1rem;
  margin-bottom: 2rem;
  transform: rotate(-2.5deg);
}
.recibido__sello::before { content: "✓ "; color: var(--honey); }
.recibido__msg {
  font-family: var(--font-display-2);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.recibido__sub {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 2.5rem;
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
}
.recibido__acciones {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Datos identificativos en bloque (donar / contacto) ──────── */
.tarjeta-datos {
  border: 1.5px solid var(--ink);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: .9rem;
  line-height: 1.7;
  color: var(--ink);
  position: relative;
}
.tarjeta-datos::before {
  content: attr(data-archivo);
  position: absolute;
  top: -.7rem;
  left: 1.25rem;
  background: var(--paper);
  padding: 0 .6rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tarjeta-datos dt {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grape);
  margin-top: .85rem;
}
.tarjeta-datos dt:first-child { margin-top: 0; }
.tarjeta-datos dd { margin: .1rem 0 0; }

/* ── Responsive extra ────────────────────────────────────────── */
@media (max-width: 880px) {
  .documento { grid-template-columns: 1fr; }
  .documento__sidebar { position: static; border-left: none; border-top: 1.5px solid var(--ink); padding: 1rem 0 0; }
  .lead-grid { grid-template-columns: 1fr; }
  .casos { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr; }
  .capacidades { grid-template-columns: 1fr 1fr; }
  .capacidades__item { border-left: none; padding-left: 0; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .hl::before,
  .strike::after,
  .firma__svg .firma__draw,
  .marquee__track,
  .reveal { animation: none !important; transition: none !important; }
  .hl::before { transform: skew(-3deg) rotate(-.6deg) scaleX(1); }
  .strike::after { transform: rotate(-2.5deg) scaleX(1); }
  .firma__svg .firma__draw { stroke-dashoffset: 0; }
  .reveal { opacity: 1; transform: none; }
}