/* ============================================================
   Martin de Lucca — Web para negocios y profesionales
   Tokens → base → componentes → secciones → responsive
   ============================================================ */

:root {
  /* Superficies */
  --ink: #16150F;
  --ink-2: #1E1C17;
  --ink-3: #232019;
  --cream: #F4F1EA;
  --cream-2: #FAF8F3;
  --paper: #FFFDF9;
  --paper-2: #F6F3EB;
  --mist: #EFEBE2;

  /* Texto sobre claro — rampa verificada contra la superficie clara más
     oscura del sistema (--mist #EFEBE2). Los ratios son el peor caso. Todos
     pasan AA como texto normal; --faint es el piso. Debajo de --faint no hay
     texto, hay decoración. */
  --text: #171613;       /* 15.2:1 · primario */
  --text-2: #33302A;     /* 11.1:1 · cuerpo dentro de piezas contenidas */
  --muted: #56524A;      /*  6.5:1 · cuerpo secundario */
  --muted-2: #635E56;    /*  5.4:1 · terciario */
  --faint: #6E685E;      /*  4.6:1 · labels y metadatos (piso AA) */
  --deco: #B5AFA3;       /* NO ES TEXTO: cuadrados, puntos y reglas */
  --hair: rgba(23, 21, 18, .1);
  --hair-2: rgba(23, 21, 18, .09);

  /* Texto sobre oscuro — verificada contra --ink-raised (la superficie oscura
     más clara del sistema), así un solo juego de tokens sirve para --ink y para
     todas las cards elevadas.
     Los ratios entre paréntesis son el peor caso: medidos contra --ink-raised,
     que es la superficie oscura más clara.

     Dos cosas que esta rampa arregla y conviene no volver a romper:
     · RECORRIDO. Cumplir AA subiendo el piso apretó los tres tonos apagados
       en una banda de 4.6% de luminancia: dejaban de ser una jerarquía y
       pasaban a ser un gris repetido tres veces. Ahora abren 15.9%.
     · CALIDEZ. --ink tiene croma 0.012. Un texto a croma 0.016 es apenas más
       cálido que su fondo y el ojo lo lee como gris neutro sobre marrón. Estos
       van a 0.024–0.028: leen crema, que es lo que la página quiere. */
  --on-ink: #F2EFE8;       /* 12.8:1 · primario */
  --on-ink-2: #C8C0B0;     /*  8.1:1 · destacado sobre oscuro */
  --on-ink-muted: #B1A896; /*  6.2:1 · cuerpo */
  --on-ink-dim: #A29987;   /*  5.2:1 · terciario */
  --on-ink-faint: #978F7E; /*  4.6:1 · labels y metadatos (piso AA) */
  /* Superficies oscuras elevadas. --ink-raised es la más clara del sistema y
     por eso es contra la que se verifica la rampa de arriba: si la aclarás, la
     rampa entera baja de AA en silencio. El piso (--on-ink-faint) despeja 4.57:1
     acá, o sea 0.07 de margen. No la toques sin recalcular. */
  --ink-raised: #2C2820;
  --ink-sunken: #1A1813;

  --hair-ink: rgba(255, 255, 255, .13);

  /* Acento */
  --accent: #B92F27;
  --accent-lt: #E66B61;
  --green: #3FBF6A;
  --wa-ink: #2C4A38;
  --wa-lt: #DCF3E2;

  /* Tipografía — dos familias. Archivo hace interfaz, cuerpo, titulares
     y también los labels que antes pedían una mono dedicada; Literata entra sólo
     en los dos énfasis que lo justifican y en la pullquote.
     --w-display está en una variable para mantener una sola decisión de peso.

     PESOS: Archivo se carga en instancias estáticas (400/500/600/700/800), no
     como variable. Un 620 no existe: el navegador lo resuelve a 700, y un 550
     a 600. Usar sólo los cinco pesos reales; un peso fraccionario acá no es
     un ajuste fino, es un peso distinto del que se escribió.
       800 display · 700 subtítulos · 600 labels · 500 metadatos · 400 cuerpo */
  --sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --serif: 'Literata', Georgia, serif;
  --w-display: 800;

  /* Métrica */
  --max: 1280px;
  --pad-x: clamp(20px, 5vw, 72px);
  --sec-y: clamp(88px, 11vw, 160px);
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Elevación */
  --sh-card: 0 1px 1px rgba(23,21,18,.04), 0 12px 26px -16px rgba(23,21,18,.4), 0 44px 70px -42px rgba(23,21,18,.5);
  --sh-card-lg: 0 1px 1px rgba(23,21,18,.05), 0 20px 40px -20px rgba(23,21,18,.42), 0 60px 100px -50px rgba(23,21,18,.55);
  --sh-ink: 0 22px 44px -22px rgba(23,21,18,.7), 0 60px 90px -50px rgba(23,21,18,.7), inset 0 1px 0 rgba(255,255,255,.07);
  --sh-btn: 0 1px 0 rgba(255,255,255,.16) inset, 0 12px 26px -12px rgba(23,21,18,.75), 0 34px 60px -34px rgba(23,21,18,.6);
  --sh-btn-h: 0 1px 0 rgba(255,255,255,.24) inset, 0 18px 34px -12px rgba(23,21,18,.85), 0 44px 70px -34px rgba(23,21,18,.65);
}

/* ── FUENTES ─────────────────────────────────────────────────
   Servidas desde el propio dominio. Antes venían de Google Fonts, que costaba
   una cadena bloqueante de tres saltos —fonts.googleapis.com, su CSS, y recién
   ahí fonts.gstatic.com— y esa cadena sola bloqueaba el render 830ms.

   Sólo el subset latin. De los 89 caracteres distintos que usa la página,
   ninguno cae fuera; los únicos que quedan afuera son → y ↗, que ya usaban
   fallback antes porque tampoco están en el subset latin de Google. Cargar
   latin-ext sumaría 32 KB para cero caracteres.

   Archivo cubre 400 a 800 en un archivo. Ojo con esto: Google servía este mismo
   archivo variable pero declarado cinco veces con font-weight fijo, así que un
   peso intermedio caía al más cercano en vez de interpolar. Acá el rango es
   real, y como la hoja sólo usa 400/500/600/700/800 el render no cambia.

   Literata entra sólo en itálica 300, que son tres elementos. Se conserva el
   eje opsz porque font-optical-sizing: auto trabaja en el H1 a 90px: medido, la
   instancia estática pesa 21 KB en vez de 50 pero ensancha el texto un 3% a ese
   tamaño, y eso recompone el titular. La variable pinneada a 300 queda a 0.15%
   del archivo anterior, o sea medio píxel. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/archivo-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/literata-italic-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── BASE ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

/* Foco visible en todo lo operable. El outline se dibuja en rojo de marca sobre
   claro y en rojo claro sobre oscuro, para que el propio anillo pase 3:1 contra
   su fondo. Nada elimina outlines sin reemplazo. */
:is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
:is(.section--ink, .footer, .card--ink) :is(a, button, summary, [tabindex]):focus-visible,
.section--ink .btn--dark:focus-visible {
  outline-color: var(--accent-lt);
}
.btn:focus-visible, .fab:focus-visible, .eyebrow-pill:focus-visible { border-radius: 999px; }

/* Sólo para lectores de pantalla (aviso de enlace externo). */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Salto al contenido: invisible hasta recibir foco de teclado. */
.skip-link {
  position: fixed; top: 14px; left: 50%; z-index: 400;
  transform: translate(-50%, calc(-100% - 24px));
  padding: 12px 22px; border-radius: 999px;
  background: var(--ink); color: var(--cream-2);
  font-size: 14px; font-weight: 600; letter-spacing: -.015em;
  box-shadow: var(--sh-btn);
  transition: transform .25s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); color: var(--cream-2); }
img { display: block; max-width: 100%; }
em { font-style: normal; }
::selection { background: var(--accent); color: var(--paper); }

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }
@keyframes dash { to { stroke-dashoffset: -18; } }
@keyframes typing { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ── HELPERS ─────────────────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; width: 100%; }
.section { position: relative; padding: var(--sec-y) var(--pad-x); }
.section--ink { background: var(--ink); color: var(--on-ink); overflow: hidden; }
.section--paper { background: var(--cream-2); }
.dim { color: var(--muted); }
.section--ink .dim { color: var(--on-ink-dim); }

.bg-grid {
  background-color: var(--cream);
  background-image:
    linear-gradient(rgba(23, 21, 18, .042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 21, 18, .042) 1px, transparent 1px);
  background-size: 76px 76px;
}
.bg-dots {
  background-image: radial-gradient(rgba(255, 255, 255, .075) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Labels y metadatos. Antes eran una familia mono dedicada; ahora son la misma
   sans con mas peso, menos cuerpo y algo de tracking. La versalita se queda solo
   donde funciona como etiqueta -chrome de card, campos de ficha, chips, nav del
   footer- y se cae en todo lo que en realidad era una frase: una oracion entera
   en mayusculas es justo el tic que habia que sacar. De paso los cuerpos suben
   de 9.5-10px a 10.5-11.5px, que es donde se leen en la calle. */
.label { font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.label--tag { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; color: var(--faint); }
:is(.section--ink, .footer, .card--ink) .label--tag { color: var(--on-ink-faint); }
.label--note { margin-top: 12px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; line-height: 1.45; color: var(--faint); }
.label--case { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; color: var(--accent); margin-bottom: 18px; }
.label--accent { color: var(--accent); }
.label--accent-lt { color: var(--accent-lt); }
.label--faint { color: var(--faint); }
.label--dim { color: var(--on-ink-faint); }


.dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; flex-shrink: 0; }
.dot--pulse { background: var(--accent); animation: pulse 2.6s ease-in-out infinite; }
.dot--grey { width: 5px; height: 5px; background: var(--deco); }
.dot--green { background: var(--green); box-shadow: 0 0 0 3px rgba(63, 191, 106, .16); }
.sq { width: 8px; height: 8px; border-radius: 2px; background: var(--deco); display: inline-block; flex-shrink: 0; }
.sq--accent { width: 7px; height: 7px; border-radius: 0; background: var(--accent); margin-right: 10px; }

/* ── TIPOGRAFÍA ──────────────────────────────────────────── */
.h1 {
  font-size: clamp(44px, 7vw, 94px);
  line-height: .94; letter-spacing: -.04em; font-weight: var(--w-display);
  text-wrap: balance;
}
.h2 { font-size: clamp(34px, 5.4vw, 74px); line-height: .98; letter-spacing: -.04em; font-weight: var(--w-display); text-wrap: balance; }
.h2--lg { font-size: clamp(36px, 6vw, 84px); line-height: .96; letter-spacing: -.04em; }
.h2--md { font-size: clamp(32px, 5vw, 68px); line-height: .99; letter-spacing: -.04em; }
.h2--sm { font-size: clamp(30px, 3.9vw, 52px); line-height: 1.02; letter-spacing: -.04em; }
.h2--xs { font-size: clamp(28px, 3.6vw, 50px); line-height: 1.04; letter-spacing: -.04em; }
.h2--spaced { margin-bottom: clamp(44px, 5.5vw, 76px); max-width: 14em; }

/* Literata es más robusta que Newsreader al mismo peso: 300 la deja a la
   altura del display sin competirle, y opsz alta afina el trazo en titular. */
.em { font-family: var(--serif); font-style: italic; font-weight: 300; letter-spacing: -.025em; font-optical-sizing: auto; color: var(--accent); }
.em--lt { color: var(--accent-lt); }

.lead { max-width: 32em; font-size: clamp(16.5px, 1.28vw, 19px); line-height: 1.62; color: var(--muted); text-wrap: pretty; }
.lead + .lead { margin-top: 20px; }
.hero__copy .lead { margin-top: clamp(26px, 3vw, 36px); }
.pullquote {
  margin: clamp(22px, 2.6vw, 30px) 0 clamp(52px, 6vw, 82px);
  max-width: 24em; font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(19px, 1.85vw, 26px); line-height: 1.44; letter-spacing: -.018em;
  color: var(--on-ink-2); text-wrap: pretty;
}

/* ── BOTONES ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 13px 14px 13px 26px; border-radius: 999px;
  font-size: 16px; font-weight: 600; letter-spacing: -.02em;
  white-space: nowrap; flex-shrink: 0;
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.btn--dark { background: var(--ink); color: var(--cream-2); box-shadow: var(--sh-btn); }
.btn--dark:hover { color: var(--cream-2); box-shadow: var(--sh-btn-h); }
.btn--light { background: var(--cream-2); color: var(--text); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .8); }
.btn--light:hover { color: var(--text); box-shadow: 0 24px 46px -18px rgba(0, 0, 0, .9); }
.btn--sm { min-height: 44px; padding: 10px 12px 10px 18px; font-size: 13.5px; gap: 10px; letter-spacing: -.015em; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 8px 18px -8px rgba(23,21,18,.7); }
.btn--lg { padding: 15px 16px 15px 30px; font-size: clamp(16px, 1.35vw, 18px); }
.btn__arrow {
  width: 22px; height: 22px; border-radius: 999px; background: var(--accent);
  display: grid; place-items: center; font-size: 11px; line-height: 1; color: #fff;
  transition: transform .35s var(--ease); flex-shrink: 0;
}
.btn__arrow--lg { width: 30px; height: 30px; font-size: 14px; }
.btn__arrow--xl { width: 32px; height: 32px; font-size: 15px; }
.btn__arrow--ghost { background: none; border: 1px solid rgba(23, 21, 18, .2); color: inherit; width: 26px; height: 26px; font-size: 12px; }

.link-under {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 24px;
  font-size: 15.5px; font-weight: 500; letter-spacing: -.015em; color: var(--muted);
  padding-bottom: 3px; border-bottom: 1px solid rgba(23, 21, 18, .24);
  transition: color .25s ease, border-color .25s ease;
}
.link-under:hover { color: var(--text); border-color: var(--text); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2vw, 22px); margin-top: clamp(32px, 3.6vw, 44px); }

/* ── HEADER ──────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  width: calc(100% - clamp(16px, 4vw, 48px)); max-width: 1180px; z-index: 200;
}
.nav-pill {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(10px, 2vw, 28px);
  padding: 9px 9px 9px clamp(16px, 2vw, 24px); border-radius: 999px;
  background: rgba(250, 248, 243, .76);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(23, 21, 18, .09);
  box-shadow: 0 1px 2px rgba(23, 21, 18, .05), 0 14px 34px -18px rgba(23, 21, 18, .34);
  transition: background .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.nav-pill.is-scrolled {
  background: rgba(250, 248, 243, .9);
  border-color: rgba(23, 21, 18, .13);
  box-shadow: 0 1px 2px rgba(23, 21, 18, .06), 0 18px 44px -20px rgba(23, 21, 18, .44);
}
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 24px; flex-shrink: 0; }
.brand:hover { color: inherit; }
.brand__mark { width: 9px; height: 9px; background: var(--accent); display: block; flex-shrink: 0; }
.brand__name { font-size: 15px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: clamp(4px, 1.2vw, 6px); }
.site-nav a {
  padding: 8px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  letter-spacing: -.01em; color: var(--muted);
  transition: background .25s ease, color .25s ease;
}
.site-nav a:hover { background: rgba(23, 21, 18, .06); color: var(--text); }

/* ── HERO ────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(126px, 15vh, 170px) var(--pad-x) clamp(70px, 9vw, 120px); overflow: hidden; }
.hero__fade { position: absolute; inset: 0; background: radial-gradient(120% 80% at 62% 8%, rgba(244, 241, 234, 0) 20%, var(--cream) 78%); pointer-events: none; }
.hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 5vw, 76px); align-items: center; }
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 11px; border-radius: 999px;
  border: 1px solid rgba(23, 21, 18, .13); background: rgba(255, 253, 249, .7);
  font-size: 12.5px; font-weight: 500; letter-spacing: .005em; line-height: 1; color: var(--muted);
  margin-bottom: clamp(24px, 3vw, 34px);
}
.eyebrow-pill span:last-child { white-space: nowrap; }
.meta-row {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: clamp(34px, 4vw, 52px); padding-top: 20px;
  border-top: 1px solid var(--hair);
  font-size: 12.5px; font-weight: 500; letter-spacing: 0; line-height: 1.5; color: var(--faint);
}
.meta-row--single { margin-top: 20px; padding-top: 0; border: 0; color: var(--faint); }

.coords {
  position: absolute; left: var(--pad-x); bottom: 26px;
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  line-height: 1.5; color: var(--faint); pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* Objeto visual del hero */
.hero__stage-col { display: flex; justify-content: center; }
.stage { width: 100%; max-width: 480px; perspective: 1300px; display: flex; flex-direction: column; }
.stage__slot { transform-style: preserve-3d; will-change: transform; }
.stage__slot--a { align-self: flex-end; width: min(320px, 82%); }
.stage__slot--b { align-self: flex-start; width: min(400px, 97%); z-index: 3; }
.stage__slot--c { align-self: flex-end; width: min(350px, 88%); }
.connector { height: 46px; display: flex; justify-content: center; align-items: center; }
.connector__line { stroke: rgba(23, 21, 18, .26); animation: dash 1.6s linear infinite; }

/* ── CARDS ───────────────────────────────────────────────── */
.card { border-radius: 16px; padding: 16px 17px; transition: transform .45s var(--ease), box-shadow .45s ease; }
.card--paper { background: linear-gradient(180deg, var(--paper), var(--paper-2)); border: 1px solid var(--hair-2); box-shadow: var(--sh-card); }
.card--hero-main { border-radius: 18px; padding: 18px 19px 16px; border-color: rgba(23, 21, 18, .11); box-shadow: var(--sh-card-lg); }
.card--ink { background: linear-gradient(180deg, var(--ink-2), var(--ink)); border: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--sh-ink); }
.card--demo { border-radius: 20px; padding: clamp(16px, 2vw, 22px); box-shadow: 0 1px 1px rgba(23,21,18,.04), 0 24px 48px -26px rgba(23,21,18,.4), 0 70px 110px -60px rgba(23,21,18,.55); }
.card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.card--hero-main .card__head { margin-bottom: 15px; }

/* Las burbujas citan la interfaz de WhatsApp: los verdes de acá abajo
   (--wa-ink, --wa-lt, #EAF3EC, #1E3326, #9BD8B0, y el #F0ECE3 de .wa__head)
   son de ese producto, no de esta marca. Quedan como literales a propósito:
   subirlos a tokens diría que son parte del sistema e invitaría a reusarlos en
   un botón cualquiera. Verificados igual — 8.6:1, 11.5:1 y 6.0:1. */
.bubble { display: inline-block; max-width: 100%; padding: 10px 13px; font-size: 14px; line-height: 1.42; }
.bubble--in { border-radius: 13px 13px 13px 4px; background: var(--mist); color: var(--text-2); }
.bubble--wa { border-radius: 13px 13px 4px 13px; background: var(--wa-ink); color: #EAF3EC; padding: 11px 13px; line-height: 1.45; }
.bubble--wa-lt { border-radius: 13px 13px 4px 13px; background: var(--wa-ink); color: #EAF3EC; padding: 13px 15px; font-size: 14px; line-height: 1.45; box-shadow: 0 18px 34px -20px rgba(23,21,18,.6); }
.bubble--out { align-self: flex-end; max-width: 92%; border-radius: 14px 14px 4px 14px; background: var(--wa-lt); color: #1E3326; padding: 12px 14px; font-size: 14.5px; line-height: 1.45; box-shadow: 0 8px 18px -12px rgba(23,21,18,.5); }
.bubble__blank { color: #9BD8B0; }

.rowlist { display: flex; flex-direction: column; }
.rowlist li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(23, 21, 18, .08); }
.rowlist li.is-last { border-bottom: 1px solid rgba(23, 21, 18, .08); }
.rowlist__t { font-size: 14px; font-weight: 500; letter-spacing: -.015em; flex: 1; }
.rowlist__bar { width: 26px; height: 3px; border-radius: 2px; background: rgba(23, 21, 18, .16); }
.rowlist__bar--accent { background: var(--accent); }
.rowlist__compact { font-size: 14.5px; font-weight: 600; letter-spacing: -.02em; color: var(--text); padding: 4px 0 2px; }

/* ── 01 · TU PUNTO DE PARTIDA (editorial, sin cards) ─────── */
.partida__h { max-width: 15em; }
.starts { margin-top: clamp(56px, 8vw, 110px); }
.start { position: relative; max-width: 30em; padding-top: clamp(30px, 4vw, 46px); }
.start + .start { margin-top: clamp(52px, 7vw, 96px); }
.start--shift { margin-left: auto; }
/* Numeral fantasma. Es composicion, no informacion: la secuencia ya la da el
   <ol> y el orden de lectura, asi que va aria-hidden y queda exento del piso de
   contraste (WCAG 1.4.3 excluye el texto decorativo). Subirlo a 3:1 lo
   convertiria en un numero solido que le competiria al titulo. */
.start__n {
  display: block; font-family: var(--sans); font-weight: var(--w-display);
  font-size: clamp(56px, 8vw, 100px); line-height: .82; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .12);
}
.start__t {
  margin-top: clamp(-14px, -1vw, -8px);
  font-size: clamp(26px, 3.4vw, 46px); font-weight: var(--w-display); letter-spacing: -.04em;
  line-height: 1.02; color: var(--on-ink); text-wrap: balance;
}
.start__rule { display: block; height: 1px; margin: clamp(16px, 2vw, 24px) 0; background: var(--hair-ink); }
.start:nth-child(2) .start__rule { background: linear-gradient(90deg, var(--accent), var(--hair-ink)); }
.start__d { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.5; color: var(--on-ink-muted); text-wrap: pretty; }

/* ── 03 · TU PARTE / MI PARTE ─────────────────────────────── */
.handoff {
  display: grid; grid-template-columns: minmax(0, .82fr) auto minmax(0, 1.35fr);
  grid-template-areas: "you link mine" "note note note";
  gap: clamp(20px, 3vw, 48px); align-items: center;
  margin-top: clamp(20px, 3vw, 40px);
}
.handoff__you { grid-area: you; }
.handoff__link { grid-area: link; }
.handoff__mine { grid-area: mine; }
.handoff__note { grid-area: note; }
.handoff__you { padding: clamp(22px, 2.4vw, 30px) 0; }
.handoff__you .label--tag, .handoff__mine .label--tag { display: flex; align-items: center; margin-bottom: 22px; letter-spacing: .12em; }
.handoff__list { display: flex; flex-direction: column; }
.handoff__list li {
  padding: 11px 0; border-top: 1px solid var(--hair-ink);
  font-size: clamp(15px, 1.2vw, 17px); color: var(--on-ink-dim); letter-spacing: -.015em;
}
.handoff__list li:last-child { border-bottom: 1px solid var(--hair-ink); }
.handoff__note { margin-top: clamp(24px, 3vw, 34px); font-size: 14.5px; line-height: 1.5; color: var(--on-ink-dim); max-width: 24em; }

.handoff__link { display: flex; flex-direction: column; align-items: center; gap: 10px; align-self: center; }
.handoff__line { width: 1px; flex: 1; min-height: 60px; background: linear-gradient(180deg, transparent, var(--hair-ink), transparent); }
.handoff__arrow { font-size: 20px; color: var(--accent-lt); }

.handoff__mine {
  padding: clamp(26px, 3vw, 40px);
  border-radius: 20px; background: linear-gradient(180deg, var(--ink-3), var(--ink-sunken));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 36px 80px -40px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.handoff__list--mine { flex-direction: row; flex-wrap: wrap; align-items: baseline; }
.handoff__list--mine li {
  padding: 0; border: 0;
  font-size: clamp(24px, 3.1vw, 42px); font-weight: var(--w-display); letter-spacing: -.04em;
  line-height: 1.12; color: var(--on-ink);
}
.handoff__list--mine li:not(:last-child)::after {
  content: '·'; margin: 0 .34em; color: var(--accent-lt); font-weight: 500;
}

/* ── 04 · cuatro áreas alrededor del núcleo ───────────────── */
.system { position: relative; margin-top: clamp(48px, 6vw, 84px); display: grid; gap: clamp(14px, 1.8vw, 24px); }
.system__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .5s ease; }
.area {
  padding: clamp(20px, 2.2vw, 28px); border-radius: 16px;
  background: rgba(255, 255, 255, .055); border: 1px solid var(--hair-ink);
  /* Las cajas estiran al alto de su fila, así que la alineación vertical hay
     que declararla o el texto cae donde el flujo lo deje. Va centrado porque
     son nodos de un diagrama y los conectores llegan a su centro: alineado
     arriba, la curva apunta al hueco de las cajas de descripción corta. */
  display: flex; flex-direction: column; justify-content: center;
  transition: transform .4s var(--ease), background .4s ease, border-color .4s ease;
}
.area:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
.area h3 { font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; letter-spacing: -.03em; color: var(--on-ink); }
.area__d { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--on-ink-dim); text-wrap: pretty; }
.area--contenido { grid-area: contenido; }
.area--diseno { grid-area: diseno; }
.area--desarrollo { grid-area: desarrollo; }
.area--publicacion { grid-area: publicacion; }
.core { grid-area: core; }

@media (min-width: 941px) {
  .system {
    grid-template-columns: 1fr minmax(240px, .9fr) 1fr;
    grid-template-areas:
      "contenido core diseno"
      "desarrollo core publicacion";
    align-items: stretch;
  }
}


/* ── 02 · CUATRO MOMENTOS (escena sticky) ────────────────── */
/* El scroll que consume la escena bajó de 360vh a 240vh (-33%):
   100vh de escena fija + 140vh de avance, o sea 35vh por estado. Es el mínimo
   en el que los cuatro estados siguen teniendo tiempo de leerse. El efecto,
   los cuatro pasos y la construcción progresiva quedan intactos. */
.journey { position: relative; --journey-scroll: 240vh; height: var(--journey-scroll); }
.journey__sticky { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: clamp(96px, 11vw, 130px) var(--pad-x) clamp(60px, 7vw, 90px); }
.journey__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(34px, 5vw, 76px); align-items: center; }
.journey .h2 { margin-bottom: clamp(28px, 3.4vw, 44px); }

.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: 18px; padding: 15px 0; border-top: 1px solid rgba(23, 21, 18, .11); transition: transform .5s var(--ease); }
.step.is-last { border-bottom: 1px solid rgba(23, 21, 18, .11); }
.step__n { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.6; letter-spacing: .1em; color: var(--accent); width: 22px; flex-shrink: 0; transition: color .4s ease; }
.step__t { font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; letter-spacing: -.03em; color: var(--text); transition: color .4s ease; }
.step__d { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 4px; max-width: 32em; transition: color .4s ease; }

/* Los cuatro estados se distinguen por color y posición, nunca por opacidad:
   bajarle la opacidad a un texto lo saca de AA. `is-scene` sólo existe mientras
   el sticky corre; sin JS, en mobile y con reduced-motion los cuatro pasos se
   leen a contraste pleno. El escalón más apagado es el piso AA (--faint). */
.journey.is-scene .step__n,
.journey.is-scene .step__t,
.journey.is-scene .step__d { color: var(--faint); }
.journey.is-scene .step.is-past .step__t { color: var(--muted-2); }
.journey.is-scene .step.is-active { transform: translateX(6px); }
.journey.is-scene .step.is-active .step__n { color: var(--accent); }
.journey.is-scene .step.is-active .step__t { color: var(--text); }
.journey.is-scene .step.is-active .step__d { color: var(--muted); }

.journey__demo { display: flex; justify-content: center; }
.journey__demo > .card { width: 100%; max-width: 420px; }
.demo__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--hair-2); }
.demo__head .label--tag { color: var(--faint); }
.demo__body { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; min-height: 292px; }
.demo__body > * { transition: opacity .55s ease, transform .55s var(--ease); }
.demo__body > .is-off { opacity: 0; transform: translateY(14px); }
.demo__row { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 11px; font-size: 13.5px; font-weight: 500; letter-spacing: -.015em; }
.demo__row--src { background: var(--mist); color: var(--muted); }
.demo__block { padding: 13px; border-radius: 11px; background: var(--paper-2); border: 1px solid rgba(23, 21, 18, .08); }
.skel { display: block; border-radius: 3px; }
.skel--title { height: 7px; width: 62%; background: var(--text); margin-bottom: 8px; }
.skel--l { height: 5px; width: 88%; background: rgba(23, 21, 18, .16); margin-bottom: 5px; }
.skel--m { height: 5px; width: 72%; background: rgba(23, 21, 18, .16); }
.demo__pair { display: flex; gap: 9px; }
.demo__chip { flex: 1; padding: 11px; border-radius: 11px; background: var(--paper-2); border: 1px solid rgba(23, 21, 18, .08); font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1.3; color: var(--faint); }
.demo__wa { margin-top: 2px; }
.demo__wa-note { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: var(--wa-ink); }
.demo__wa-note .dot { width: 5px; height: 5px; box-shadow: none; }

/* ── 03 · DIFERENCIAL ────────────────────────────────────── */
.diferencial__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
}
.diferencial .wrap { position: relative; }


.core {
  width: 100%; padding: clamp(26px, 3vw, 38px) clamp(22px, 2.4vw, 30px);
  border-radius: 20px; text-align: center; position: relative; z-index: 2;
  /* Abarca las dos filas de áreas, así que sobra alto: sin esto el contenido
     quedaba pegado arriba con 39px de aire contra 108 abajo. */
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(180deg, var(--ink-raised), var(--ink-sunken));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.core .label--tag { display: block; letter-spacing: .12em; margin-bottom: 16px; }
.core__title { font-size: clamp(28px, 3.2vw, 42px); font-weight: var(--w-display); letter-spacing: -.04em; line-height: 1; }
.core__desc { margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--on-ink-muted); }
.core__foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--on-ink-faint); }

/* ── 08 · PREGUNTAS ──────────────────────────────────────── */
.faq__grid { display: grid; grid-template-columns: 1fr; }
.faq__item { border-top: 1px solid var(--hair); }
.faq__item:last-child { border-bottom: 1px solid var(--hair); }

.faq__sum {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(22px, 2.6vw, 32px) 0; cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.faq__sum::-webkit-details-marker { display: none; }
.faq__sum:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.faq__q {
  font-size: clamp(18px, 1.9vw, 27px); font-weight: 700; letter-spacing: -.035em;
  line-height: 1.2; color: var(--text); text-wrap: pretty; transition: color .3s ease;
}
.faq__sum:hover .faq__q { color: var(--accent); }
.faq__ico { position: relative; width: 15px; height: 15px; align-self: center; flex-shrink: 0; }
.faq__ico::before, .faq__ico::after {
  content: ''; position: absolute; left: 0; top: 7px; width: 15px; height: 1.5px;
  background: var(--muted); border-radius: 1px; transition: transform .35s var(--ease), background .3s ease;
}
.faq__ico::after { transform: rotate(90deg); }
.faq__item[open] .faq__ico::after { transform: rotate(0deg); }
.faq__item[open] .faq__ico::before, .faq__item[open] .faq__ico::after { background: var(--accent); }
.faq__a {
  margin: -6px 0 clamp(26px, 3vw, 36px);
  max-width: 44em;
  font-size: clamp(15px, 1.12vw, 16.5px); line-height: 1.62; color: var(--muted); text-wrap: pretty;
}
/* La pregunta por la inversión está a varias secciones del precio: un link de
   texto la reconecta sin duplicar el pricing ni agregar una card. */
.faq__jump {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-weight: 600; color: var(--accent);
  border-bottom: 1px solid rgba(185, 47, 39, .4); padding-bottom: 1px;
  transition: border-color .25s ease;
}
.faq__jump:hover { color: var(--accent); border-color: var(--accent); }

/* ── 05 · TRABAJOS ───────────────────────────────────────── */
.rule-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: baseline; justify-content: space-between; margin-bottom: clamp(46px, 6vw, 78px); padding-bottom: 24px; border-bottom: 1px solid rgba(23, 21, 18, .12); }
.case { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(30px, 5vw, 76px); align-items: center; }
.case + .case { margin-top: clamp(70px, 9vw, 130px); }
.case--flip { grid-template-columns: 1fr 1.35fr; }
.case__title { font-size: clamp(38px, 5.6vw, 74px); line-height: .93; letter-spacing: -.04em; font-weight: var(--w-display); text-wrap: balance; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tags li { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(23, 21, 18, .14); font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1; color: var(--muted); }
.facts { margin-top: clamp(28px, 3.2vw, 40px); }
.facts > div { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 15px 0; border-top: 1px solid var(--hair); }
.facts > div.is-last { border-bottom: 1px solid var(--hair); }
.facts dt { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.7; color: var(--faint); width: 92px; flex-shrink: 0; }
.facts dd { flex: 1 1 240px; font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.case__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 15.5px; font-weight: 600; letter-spacing: -.02em; }
.case__shot { display: flex; justify-content: center; }
.shot { position: relative; width: min(340px, 100%); transition: transform .5s var(--ease); }
.shot:hover { transform: translateY(-10px) rotate(-1.2deg); }
.shot__shadow { position: absolute; left: 6%; right: 6%; bottom: 2%; height: 60px; background: rgba(23, 21, 18, .42); filter: blur(38px); border-radius: 50%; }
.shot img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 40px 60px rgba(23, 21, 18, .34)); }

/* ── 06 · SOBRE MÍ ───────────────────────────────────────── */
.about { max-width: 62ch; }

/* Retrato real, 4:5, vertical y en la grilla — nada de círculo ni de avatar.
   Mientras no exista la foto, `.about` sigue siendo una columna de texto y no
   se dibuja ningún hueco: la grilla sólo se activa cuando hay un .portrait
   adentro. Cómo incorporarla: ver el comentario en index.html §06. */
.about:has(.portrait) {
  max-width: none;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.portrait { margin: 0; }
.portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 3px; border: 1px solid var(--hair);
  box-shadow: var(--sh-card);
}
.portrait figcaption {
  margin-top: 14px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
/* Variantes desktop / mobile. Por defecto manda desktop; el switch está en el
   bloque @media (max-width: 940px) de más abajo. */
.only-mobile { display: none !important; }

.about__main .lead { margin-top: clamp(26px, 3vw, 34px); max-width: 34em; font-size: clamp(16.5px, 1.25vw, 18.5px); line-height: 1.65; }
.about__main .lead + .lead { margin-top: 20px; }

/* ── 07 · INVERSIÓN ──────────────────────────────────────── */
.precio__glow { position: absolute; inset: 0; background: radial-gradient(80% 60% at 70% 20%, rgba(185, 47, 39, .14), transparent 60%); pointer-events: none; }
.precio .wrap { position: relative; }
.precio__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.offer { padding: clamp(28px, 3.4vw, 44px); border-radius: 22px; background: linear-gradient(165deg, var(--ink-raised), var(--ink-sunken) 55%); border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .1); }
.offer > .label--tag { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.offer__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-top: 22px; }
.offer__price .label { font-size: 13px; letter-spacing: .08em; color: var(--on-ink-dim); }
.offer__fig { font-size: clamp(40px, 5.6vw, 72px); font-weight: var(--w-display); letter-spacing: -.04em; line-height: .9; }
.offer__terms { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; color: var(--on-ink-2); }
.offer__terms .dot { width: 4px; height: 4px; background: var(--muted-2); }
.offer__note { margin-top: 26px; font-size: 16.5px; line-height: 1.6; color: var(--on-ink-muted); max-width: 36em; text-wrap: pretty; }
.offer .btn { margin-top: 32px; }
.guarantee { display: flex; flex-direction: column; gap: 12px; }
.guarantee > .label--tag { font-size: 12px; letter-spacing: .02em; text-transform: none; margin-bottom: 6px; }
.guarantee__item { padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, .055); border: 1px solid var(--hair-ink); font-size: 14.5px; line-height: 1.5; color: var(--on-ink-2); }
.guarantee__item--warn { background: rgba(226, 86, 74, .09); border-color: rgba(226, 86, 74, .25); color: #E7C3BF; }

/* ── 08 · CTA FINAL ──────────────────────────────────────── */
.cta { padding: clamp(90px, 12vw, 170px) var(--pad-x); overflow: hidden; }
.cta__glow { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 100%, rgba(185, 47, 39, .09), transparent 60%); pointer-events: none; }
.cta__inner { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(38px, 5vw, 80px); align-items: center; }
.cta .lead { margin-top: clamp(26px, 3vw, 36px); }
.cta .btn { margin-top: clamp(30px, 3.6vw, 42px); }
.cta__preview { display: flex; justify-content: center; }
.wa { width: 100%; max-width: 380px; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, var(--paper), var(--paper-2)); border: 1px solid rgba(23, 21, 18, .1); box-shadow: 0 1px 1px rgba(23,21,18,.04), 0 30px 60px -30px rgba(23,21,18,.42), 0 80px 120px -70px rgba(23,21,18,.55); transition: transform .45s var(--ease), box-shadow .45s ease; }
/* Ver la nota sobre la familia WhatsApp en .bubble. */
.wa__head { display: flex; align-items: center; gap: 11px; padding: 14px 17px; background: #F0ECE3; border-bottom: 1px solid var(--hair-2); }
.wa__avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--wa-ink); display: grid; place-items: center; color: #EAF3EC; font-size: 13px; font-weight: 700; }
.wa__name { font-size: 14.5px; font-weight: 600; letter-spacing: -.02em; }
.wa__status { font-size: 11.5px; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--faint); margin-top: 1px; }
.wa__dot { margin-left: auto; width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(63, 191, 106, .18); }
.wa__body { padding: 20px 17px 22px; min-height: 178px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; background-image: radial-gradient(rgba(23, 21, 18, .05) 1px, transparent 1px); background-size: 18px 18px; }
.wa__note { align-self: flex-end; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--faint); }
.wa__typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--mist); width: fit-content; margin-top: 4px; }
.wa__typing span { width: 6px; height: 6px; border-radius: 999px; background: var(--faint); animation: typing 1.3s ease-in-out infinite; }
.wa__typing span:nth-child(2) { animation-delay: .18s; }
.wa__typing span:nth-child(3) { animation-delay: .36s; }

/* ── FOOTER ──────────────────────────────────────────────── */
.footer { padding: clamp(50px, 6vw, 80px) var(--pad-x) clamp(34px, 4vw, 48px); background: var(--ink); color: var(--on-ink-muted); }
.footer__top { display: flex; flex-wrap: wrap; gap: 34px; align-items: flex-start; justify-content: space-between; }
.brand--footer .brand__mark { width: 10px; height: 10px; }
.brand--footer .brand__name { font-size: 20px; letter-spacing: -.035em; color: var(--on-ink); }
.footer__tag { margin-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .01em; line-height: 1.55; color: var(--on-ink-faint); }
.footer__cols { display: flex; flex-wrap: wrap; gap: 30px 56px; }
.footer__cols nav { display: flex; flex-direction: column; gap: 2px; }
/* 24px de alto mínimo: WCAG 2.2 AA 2.5.8. El gap bajó a 2px porque ahora
   el área táctil la da el padding, no la separación. */
.footer__cols a {
  display: inline-flex; align-items: center; min-height: 24px;
  font-size: 14.5px; transition: color .25s ease;
}
.footer__cols a:hover { color: var(--on-ink); }
.footer__label { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-faint); margin-bottom: 5px; }
.footer__bottom { margin-top: clamp(38px, 5vw, 60px); padding-top: 22px; border-top: 1px solid var(--hair-ink); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 11.5px; font-weight: 500; letter-spacing: .01em; line-height: 1.6; color: var(--on-ink-faint); }

/* ── CURSOR ──────────────────────────────────────────────────
   Anillo que acompaña al puntero del sistema (no lo reemplaza).
   `difference` lo hace legible sobre cream y sobre ink sin cambiar color. */
.cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 300;
  width: 32px; height: 32px; margin: -16px 0 0 -16px;
  background: #fff; border-radius: 999px;
  mix-blend-mode: difference; pointer-events: none;
  opacity: 0; will-change: transform;
  /* La caja es fija y el tamaño lo da un scale que interpola el mismo rAF que
     mueve el punto (14px en reposo = scale .4375, 32px sobre un link = 1).
     Antes se animaban width, height y margin: tres propiedades de layout
     recalculadas en cada hover sobre cualquier link de la página. */
  transition: opacity .25s ease;
}
.cursor-dot.is-on { opacity: 1; }

@media (hover: none), (pointer: coarse) { .cursor-dot { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor-dot { display: none; } }

/* ── FAB MOBILE ──────────────────────────────────────────── */
.fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 190;
  display: none; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: 999px;
  background: var(--ink); color: var(--cream-2);
  font-size: 15px; font-weight: 600; letter-spacing: -.02em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 14px 30px -10px rgba(23, 21, 18, .8);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .4s ease, transform .4s var(--ease);
}
.fab:hover { color: var(--cream-2); }
.fab.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .site-nav { display: none; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__stage-col { order: 2; }
  .case, .case--flip, .precio__grid, .cta__inner, .journey__inner { grid-template-columns: 1fr; }
  .case--flip .case__shot { order: 2; }
  .journey { height: auto; }
  .journey__sticky { position: static; min-height: 0; padding: var(--sec-y) var(--pad-x); }
  .demo__body > .is-off { opacity: 1; transform: none; }
  .system__links { display: none; }

  /* ── Iteración mobile: densidad y carga cognitiva ─────────────────── */

  /* 01 · las tres situaciones no se apilan como cards: quedan editoriales */
  .start { max-width: none; }
  .start--shift { margin-left: 0; padding-left: clamp(20px, 8vw, 46px); }
  .start--shift .start__rule { background: linear-gradient(90deg, var(--accent), var(--hair-ink)); }

  /* 03 · dos columnas enfrentadas: la asimetría 4 vs 6 se ve de un vistazo */
  .handoff {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "you mine" "note note";
    gap: 0 clamp(16px, 5vw, 28px); align-items: start;
  }
  .handoff__link { display: none; }
  .handoff__you { padding: 0; }
  .handoff__mine {
    padding: 0 0 0 clamp(16px, 5vw, 28px);
    background: none; border: 0; border-left: 1px solid var(--hair-ink);
    border-radius: 0; box-shadow: none;
  }
  .handoff__list li { font-size: 14.5px; color: var(--on-ink-muted); padding: 10px 0; }
  .handoff__list--mine { flex-direction: column; }
  .handoff__list--mine li {
    font-size: 14.5px; font-weight: 500; letter-spacing: -.015em; line-height: 1.35;
    padding: 10px 0; border-top: 1px solid var(--hair-ink); color: var(--on-ink);
  }
  .handoff__list--mine li:last-child { border-bottom: 1px solid var(--hair-ink); }
  .handoff__list--mine li:not(:last-child)::after { content: none; }

  .about:has(.portrait) { grid-template-columns: 1fr; }
  .portrait { max-width: 320px; }

  /* 04 · cuatro áreas apiladas, sin conectores */
  .system { grid-template-columns: 1fr; grid-template-areas: none; }
  .area, .core { grid-area: auto; }
  .core { order: -1; }


  /* Switch de variantes */
  .only-desktop { display: none !important; }
  .only-mobile { display: revert !important; }
  .d-br { display: none; }

  /* 1 · Hero: el objeto visual pasa de ~633px a ~350px.
     Se conserva Instagram → página → WhatsApp completo. */
  .stage__slot--a, .stage__slot--b, .stage__slot--c { width: 100%; align-self: stretch; }
  .connector { height: 26px; }
  .connector svg { height: 26px; }
  .card--paper, .card--ink { padding: 13px 14px; }
  .card--hero-main { padding: 14px 15px 12px; }
  .card--hero-main .card__head { margin-bottom: 10px; }
  .stage .label--note { margin-top: 8px; }

  /* 11 · Coordenadas + reloj: detalle editorial sin función comercial */
  .coords { display: none; }

  /* 4 · Consecuencias: quedan dos, y el índice 01/04 deja de orientar */

  /* 5 · Los cuatro pasos se apilan más compactos y todos legibles */
  .step { padding: 13px 0; }

  /* 6 · Qué incluye: sin conectores el núcleo abre el sistema y los ocho
     módulos dejan de ser cards. Mismo contenido, una card en vez de nueve. */
  .core { width: 100%; }
  .core__foot { margin-top: 16px; padding-top: 14px; }

  /* 7 · Trabajos: el mockup se ve entero, más chico y centrado.
     No se recorta: se achica el ancho y la proporción hace el resto. */
  .shot { width: min(200px, 62%); }
  .facts > div:nth-of-type(2) { border-bottom: 1px solid var(--hair); }
}

@media (max-width: 640px) {
  :root { --sec-y: clamp(68px, 14vw, 96px); }
  .btn { font-size: 15px; padding: 13px 13px 13px 22px; }
  .btn--lg { padding: 14px 14px 14px 24px; font-size: 16px; }
  .facts dt { width: 100%; }
  .stage__slot--a, .stage__slot--b, .stage__slot--c { width: 100%; align-self: stretch; }
  .coords { position: static; margin-top: 34px; }
}

@media (max-width: 600px) {
  .shot { width: min(186px, 58%); }
  .rowlist__compact { font-size: 14px; }
}

@media (max-width: 460px) {
  /* El botón del header queda sólo con la flecha, pero el texto no se puede
     sacar con display:none: la flecha es aria-hidden, así que el enlace se
     quedaba sin ningún nombre accesible. Se oculta a la vista y se mantiene en
     el árbol, con las mismas reglas que .vh. Un aria-label sería peor: pisaría
     el texto visible que sí se ve arriba de 460px. */
  .btn__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .btn--sm { padding: 10px; }
}

@media (min-width: 861px) {
  .fab { display: none !important; }
}

@media (max-width: 860px) {
  .fab { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .journey { height: auto; }
  .journey__sticky { position: static; min-height: 0; }
  .demo__body > .is-off { opacity: 1; transform: none; }
}