/* ============================================================
   V2 — sistema visual extraído de la referencia
   Fuente de verdad: docs/style-guide-v2-referencia.md (medido).
   Tipos sustitutas libres: Handjet (FK Raster Grotesk) ·
   Archivo Narrow (Spezia Condensed) · Space Mono (Spezia Mono) ·
   serif de sistema (así renderiza referencia sus párrafos).
   Grilla: 12 col · gap 20 · margen 40. Pills 999 / micro-pills 2px.
   ============================================================ */

/* Garments (tipografía de labels) ELIMINADA por Vani 2026-07-23: el @font-face daba 404
   permanente. Si algún día se suma el archivo, restaurar el @font-face y "Garments" en --font-mono. */

:root {
  --crema:      #FAF6EF;
  --pill:       #F1EDE7;
  --tinta:      #0D0D0E;
  --tinta-2:    #1C1C1E;
  --gris:       #3D3D40;
  --lila:       #E9E3F3;
  --rosa:       #FFD8F5;
  --amarillo:   #FFF490;
  --violeta:    #6B55AC;
  --celeste:    #CDEBF8;   /* celeste claro del DS (Cielo 3) — fondo de botones */
  --ghost:      rgba(241, 237, 231, 0.08);
  --ghost-2:    rgba(241, 237, 231, 0.3);

  /* SISTEMA TIPOGRÁFICO 100% grotesca (modelo la referencia). Sneak (TIGHTYPE, comercial) → stand-in libre
     Hanken Grotesk (neo-grotesca, familia Helvetica/Univers como Sneak).
     Swap a Sneak = cambiar estas 3 líneas por "Sneak" + cargar los woff2 licenciados.
     Los *-legacy quedan para revertir. */
  --font-grotesk: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --font-pixel: var(--font-grotesk);        /* display (antes Handjet) */
  --font-ui:    var(--font-grotesk);        /* ui/body (antes Archivo Narrow) */
  --font-serif: var(--font-grotesk);        /* cuerpo largo (antes Georgia) — ahora grotesca */
  --font-mono:  var(--font-grotesk);                /* LABELS de toda la web (grotesca; Garments eliminada, ver nota arriba) */
  --font-pixel-legacy: "Handjet", "Pixelify Sans", monospace;
  --font-serif-legacy: Georgia, "Times New Roman", serif;

  /* grilla la referencia: contenido máx 1176, gutter 56 */
  --margin: 56px;              /* gutter horizontal */
  --maxw: 1176px;              /* ancho de contenido (home + proyectos) */
  --shell: calc(var(--maxw) + 2 * var(--margin));  /* caja con gutter incluido */
  --gap: 20px;

  /* ESCALA CONSOLIDADA (7 pasos, modelo la referencia). Fuente de verdad: docs/escala-tipografica.md.
     size · weight · line-height · tracking (weight/lh/tracking se aplican por clase). */
  --t-display: clamp(48px, 8vw, 80px);    /* 400 · lh .95 · -0.035em · hero home (UPPERCASE) */
  --t-h1:      clamp(34px, 4.4vw, 46px);  /* 500 · lh 1.05 · -0.02em · títulos de sección + heroes internos */
  --t-h2:      clamp(24px, 2.4vw, 30px);  /* 500 · lh 1.15 · -0.015em · subsección, pasos, títulos de card */
  --t-lead:    clamp(18px, 1.4vw, 20px);  /* 400 · lh 1.6 · 0 · párrafo destacado */
  --t-body:    clamp(16px, 1.1vw, 18px);  /* 400 · lh 1.6 · 0 · cuerpo (todos los párrafos) */
  --t-small:   14px;                      /* 400 · lh 1.5 · 0 · caption / secundario */
  --t-meta:    13px;                      /* labels/metadata (Garments, UPPERCASE) — 13px */

  /* corte pixel (esquina escalonada estilo la referencia) para labels/tags/badges */
  --pixel-cut: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: #fff;                 /* fondo blanco, igual que la referencia */
  color: var(--tinta);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--amarillo); }
img { max-width: 100%; display: block; }

/* display grotesca (modelo la referencia): tracking negativo, interlineado apretado */
.px { font-family: var(--font-pixel); font-weight: 500; letter-spacing: -0.02em; line-height: 1.04; }

/* ============ NAVBAR (clonada de referencia) ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px var(--margin);
  z-index: 500;
  background: #fff;                  /* fondo opaco = color de la web: tapa el contenido al scrollear */
  pointer-events: none;              /* los hijos re-activan */
}
.nav > * { pointer-events: auto; }
/* logo (fiel a referencia): "V:\" con el \ parpadeando; al hover se EXPANDE y revela el nombre */
.nav-logo {
  height: 42px; min-width: 42px;
  background: var(--tinta); color: var(--pill);
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  padding: 0 13px;
  font-family: var(--font-mono); font-size: var(--t-meta);
  white-space: nowrap;
}
.nav-logo .blink { animation: cursorBlink 1.1s steps(1) infinite; }
@keyframes cursorBlink { 50% { opacity: 0; } }
.nav-logo .lg-full {
  display: inline-block; overflow: hidden;
  max-width: 0; opacity: 0;
  transition: max-width 0.45s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s;
}
.nav-logo:hover .lg-full { max-width: 90px; opacity: 1; margin-left: 4px; }
/* grupos izquierda/derecha del navbar */
.nav-left, .nav-right { display: flex; align-items: center; gap: 8px; }
/* CV: mismo contenedor que los pills (Proyectos/Contacto) */
.nav-cv {
  height: 42px; min-width: 42px;
  background: var(--celeste); color: var(--tinta);
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; padding: 0 16px;
  font-family: var(--font-mono); font-size: var(--t-meta);
  text-decoration: none; white-space: nowrap; letter-spacing: 0.03em;
  transition: border-radius 1.2s cubic-bezier(0.19, 1, 0.22, 1), background 0.25s, color 0.25s;
}
.nav-cv:hover { border-radius: 999px; background: var(--tinta); color: var(--crema); }
/* COMPONENTE link-btn: texto + icono (el icono va adelante o atrás según el markup) */
.link-btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 10px; color: var(--tinta); text-decoration: none; font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transition: opacity 0.2s; }
.link-btn:hover { opacity: 0.55; }
.link-btn svg { flex-shrink: 0; transition: transform 0.2s; }
.link-btn.before:hover svg { transform: translateX(-3px); }   /* icono adelante → nudge izquierda */
.link-btn.after:hover svg  { transform: translateX(3px); }    /* icono atrás → nudge derecha */
/* Proyectos + Contacto centrados en el navbar */
.nav-pills { display: flex; gap: 2px; position: absolute; left: 50%; transform: translateX(-50%); }
/* pill nav (fiel a referencia): reposo rectángulo suave → hover/activa se REDONDEA
   con transición larga elástica; el texto duplicado RUEDA verticalmente */
.nav-pill {
  padding: 10px 20px;
  border-radius: 10px;
  background: var(--celeste);
  font-size: var(--t-small); letter-spacing: 0.02em;
  transition: border-radius 1.2s cubic-bezier(0.19, 1, 0.22, 1), background 0.25s, color 0.25s;
}
.nav-pill:hover, .nav-pill.active { border-radius: 999px; }
.nav-pill.active { background: var(--tinta); color: var(--crema); }
.nav-pill .roll { display: block; height: 1.4em; overflow: hidden; }
.nav-pill .roll i { display: block; font-style: normal; line-height: 1.4; transition: transform 0.35s cubic-bezier(0.45, 0, 0.15, 1); }
.nav-pill:hover .roll i { transform: translateY(-100%); }
.nav-hint { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--tinta); }
.nav-hint kbd { font-family: inherit; }

/* sobre bloque negro la nav-hint se invierte vía clase en body si hiciera falta */

/* ============ LAYOUT ============ */
.container { padding: 0 var(--margin); max-width: var(--shell); margin: 0 auto; }
.block { padding: 120px var(--margin); }
/* toda sección full-screen: 100vh, padding = gutter lateral, contenido centrado */
/* Presentación: antes bloque negro; ahora fondo blanco uniforme (como la referencia) para no cortar la grilla.
   Texto en tinta. Se conserva la clase .dark por compatibilidad de markup. */
.block.dark { background: transparent; color: var(--tinta); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: var(--margin); }

/* ============ HERO (home) — patrón la referencia: franja blanca + divisor + grilla debajo ============ */
.hero { min-height: 100vh; position: relative; display: flex; flex-direction: column; }
/* zona bajo el divisor = el CIELO de píxeles (canvas). Llena el resto del hero. */
.hero-sky { position: relative; flex: 1; overflow: hidden; }
.pf-canvas { position: absolute; inset: 0; }

/* franja superior: fondo blanco OPACO que tapa la grilla global; su borde inferior = DIVISOR
   horizontal que cruza todo el ancho. Debajo del divisor el hero queda transparente (grilla visible). */
.hero-band {
  position: relative;
  background: #fff;
  padding: 120px 0 48px;                            /* top despeja la navbar fixed (~90px) · bottom antes del divisor */
  border-bottom: 1px solid rgba(13, 13, 14, 0.14);  /* DIVISOR horizontal (más visible que la grilla, sutil) */
}

/* DIVISOR horizontal de la navbar: cierra la banda de la nav, simétrico respecto a los botones.
   nav padding-top 24 + botón 42 + 24 abajo = 90px. Mismo grosor/color que la línea vertical. */
.hero-hline {
  position: absolute; top: 90px; left: 0; right: 0;
  height: 1px; background: rgba(13, 13, 14, 0.14);
}

/* línea VERTICAL divisoria entre columna izq (nombre) y der (a definir).
   Corre SOLO entre los dos divisores horizontales: del de la navbar (90px) al de la franja (bottom). */
.hero-vline {
  position: absolute; top: 90px; bottom: 0;
  left: calc(var(--margin) + 0.59 * (100% - 2 * var(--margin)));
  width: 1px; background: rgba(13, 13, 14, 0.14);
}

.hero-inner {
  padding: 0 var(--margin);
  display: grid; grid-template-columns: 59fr 41fr; gap: 0;
  align-items: stretch;
}
.hero-col-left  { padding-right: 48px; display: flex; align-items: center; }
/* columna derecha (patrón la referencia): tagline mono justificado arriba · marca + estado abajo */
.hero-col-right { padding-left: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.hero-tagline {
  font-family: var(--font-mono); font-weight: 400; font-size: var(--t-meta);
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.7; color: var(--tinta);
  text-align: justify; text-align-last: justify;
}
.hero-foot { display: flex; align-items: flex-end; justify-content: flex-end; gap: 24px; }
.hero-mark { flex: none; }
.hero-mark svg { width: 40px; height: 40px; display: block; }
.hero-foot .hero-loc { margin-top: 0; text-align: right; max-width: 32ch; }

.hero-name {
  font-family: var(--font-pixel); font-weight: 400;
  font-size: var(--t-display); line-height: 0.95; letter-spacing: -0.035em;
  text-transform: uppercase;                 /* hero home en MAYÚSCULAS (modelo la referencia) */
  color: var(--tinta);
}
.hero-role {
  font-family: var(--font-pixel); font-weight: 500;
  font-size: var(--t-lead); line-height: 1.6; letter-spacing: -0.01em;
  color: var(--gris); margin-top: 12px;
}
.hero-loc {
  font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.01em;
  line-height: 1.4; color: var(--gris); margin-top: 20px;
}
.hero-live { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.hero-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #39FF14;                              /* verde flúor / neón "Disponible para nuevos proyectos" */
  box-shadow: inset 0 0 0 0.5px rgba(20, 120, 20, 0.55);  /* borde sutil: define el punto sobre blanco */
  animation: heroLivePulse 1.6s ease-in-out infinite;
}
@keyframes heroLivePulse {
  0%, 100% { box-shadow: inset 0 0 0 0.5px rgba(20,120,20,0.55), 0 0 0 0 rgba(57, 255, 20, 0.55); opacity: 1; }
  50%      { box-shadow: inset 0 0 0 0.5px rgba(20,120,20,0.55), 0 0 0 5px rgba(57, 255, 20, 0); opacity: 0.75; }
}

/* variante de la banda para proyectos.html: ~50% más baja que la del hero.
   Hero: divider navbar 90px → divisor inferior ~325 (distancia 235). Acá ~118 (mitad).
   El divider de la navbar sigue a 90px (hero-hline); solo sube el divisor inferior. */
.band-proyectos { padding: 110px 0 20px; }        /* contenido a 20px del divider navbar (90+20); texto der 20px arriba/abajo (pb 20) */
.band-proyectos .hero-inner { align-items: start; }   /* alineado arriba, no centrado */
.band-proyectos .hero-name { font-size: var(--t-h1); font-weight: 500; }   /* hero interno: un nivel menor que el home (--t-display); ya hereda uppercase */

/* texto secundario de la columna derecha (contenedor que en el hero queda vacío) */
.hero-desc {
  font-family: var(--font-ui); font-size: var(--t-body); line-height: 1.6;
  color: var(--gris); max-width: 46ch;
}

/* ============ PRESENTACIÓN (bloque negro, patrón sección 2 referencia) ============ */
/* misma grid que la referencia (.proc-a): 2 columnas simétricas, gap 64, alineadas arriba */
.present { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: var(--maxw); margin: 0 auto; align-items: start; }
/* home: proyecto destacado centrado a la grilla la referencia */
.block > .work-card { max-width: var(--maxw); margin: 0 auto; }
.present .headline {
  text-align: left;
  font-size: var(--t-h1);
}
.present .body-row { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin-top: 110px; align-items: end; }
.present .prose {
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  line-height: 1.35;
  color: var(--gris);
}
.present .media {
  grid-column: 7 / 13;
  background: var(--violeta);
  border-radius: 8px;
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--t-meta); color: rgba(250,246,239,0.55);
}

/* ============ WORK CARD (proyecto en home + página proyectos) ============ */
/* misma estructura que .sm-card (servicio): flex column centrado → tags al fondo */
.work-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.work-card .media {
  width: 100%;
  background: var(--tinta);
  border-radius: 14px;
  aspect-ratio: 4 / 3.2;
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-card:hover .media { transform: scale(0.985); }
.work-card .media .ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--t-meta); color: rgba(250,246,239,0.35);
}
/* imagen real de la card: cubre el contenedor, los tags quedan encima */
.work-card .media .cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
}
.work-card .media .cover + .ph { display: none; }   /* si hay imagen, se oculta el placeholder */
.work-card .wtags { display: flex; gap: 6px; position: relative; z-index: 1; }
.wtag {
  font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.4px;
  padding: 4px 6px; border-radius: 2px;
  background: var(--ghost); color: var(--crema);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.wtag.solid { background: var(--pill); color: var(--tinta); }
/* título IDÉNTICO a .sm-card-title (servicio) — misma jerarquía para toda card */
.work-card .wtitle { font-family: var(--font-pixel); font-weight: 500; font-size: var(--t-h2); line-height: 1.15; color: var(--tinta); margin-bottom: 10px; }
.block.dark .work-card .media { background: var(--tinta-2); }

/* grid de la página proyectos */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 64px; }

/* ============ PÁGINA SERVICIOS (patrón /services referencia) ============ */
.serv-hero {
  padding: 180px var(--margin) 90px;
}
.serv-hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: -0.01em;
  max-width: 15ch;
}
.serv-hero .ethos {
  margin: 90px 0 0 auto;
  max-width: 58%;
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  line-height: 1.3;
}
.serv-hero .ethos p + p { margin-top: 32px; }

.service-row {
  border-top: 1px solid rgba(13,13,14,0.15);
  padding: 90px var(--margin);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap);
  align-items: start;
}
.service-row .smedia {
  grid-column: 1 / 5;
  background: var(--tinta);
  border-radius: 8px;
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--t-meta); color: rgba(250,246,239,0.35);
}
.service-row .sinfo { grid-column: 6 / 13; padding-top: 24px; }
.s-num {
  display: inline-block;
  font-family: var(--font-pixel); font-weight: 500;
  font-size: var(--t-h2);
  background: var(--pill); border-radius: 12px;
  padding: 8px 16px 12px;
  margin-right: 8px;
}
.s-name {
  display: inline-block;
  font-family: var(--font-pixel); font-weight: 500;
  font-size: var(--t-h1);
  letter-spacing: -0.02em;
  background: var(--pill); border-radius: 16px;
  padding: 8px 28px 16px;
  vertical-align: middle;
}
.s-tags { margin-top: 44px; display: flex; gap: 8px 10px; flex-wrap: wrap; max-width: 560px; }
.s-tag {
  font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.4px;
  padding: 5px 8px; border-radius: 2px;
  background: var(--pill); color: var(--tinta);
}
.s-tag.dim { background: transparent; color: rgba(13,13,14,0.4); box-shadow: inset 0 0 0 1px rgba(13,13,14,0.12); }
.s-desc { margin-top: 28px; max-width: 52ch; font-size: var(--t-body); color: rgba(13,13,14,0.75); }

/* ============ PÁGINA SERVICIOS: 3 cards a altura completa (sin scroll) ============ */
.services {
  background: var(--crema);
  height: 100vh;
  padding: 96px var(--margin) 20px;     /* navbar arriba · 20px abajo */
  display: flex;
}
.svc-grid {
  flex: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  max-width: 1440px; margin: 0 auto;
}
.svc-card {
  background: var(--crema);
  border: 1px solid rgba(13,13,14,0.14);
  border-radius: 20px;
  padding: 34px 32px 36px;
  display: flex; flex-direction: column;
  color: var(--tinta);
  min-height: 0;                        /* permite que el hijo flexible se encoja */
}
.svc-illus {
  flex: 1; min-height: 0;               /* toma el espacio sobrante en vez de un cuadrado fijo */
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  font-family: var(--font-mono); font-size: var(--t-meta); color: rgba(13,13,14,0.3);
}
.svc-title { font-size: var(--t-h1); line-height: 1.05; margin-bottom: 16px; color: var(--tinta); }
.svc-sub { font-family: var(--font-serif); font-size: var(--t-lead); line-height: 1.6; color: var(--tinta); max-width: 18ch; }
.svc-line { border: none; border-top: 1px solid rgba(13,13,14,0.16); margin: 28px 0 18px; }
.svc-label { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.06em; color: rgba(13,13,14,0.5); margin-bottom: 14px; }
.svc-list {
  list-style: none; counter-reset: svc;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px;
}
.svc-list li {
  counter-increment: svc;
  font-size: var(--t-body); color: rgba(13,13,14,0.72);
  display: flex; align-items: baseline; gap: 8px;
}
.svc-list li::before {
  content: counter(svc);
  flex-shrink: 0;
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(13,13,14,0.1); color: var(--tinta);
  font-family: var(--font-mono); font-size: var(--t-meta);
  display: inline-flex; align-items: center; justify-content: center;
  transform: translateY(1px);
}

/* ============ PÁGINA PROYECTOS: hero corto ============ */
.page-hero { padding: 190px var(--margin) 60px; max-width: var(--shell); margin: 0 auto; }
.page-hero h1 { font-size: var(--t-h1); }
.page-hero .sub { font-family: var(--font-mono); font-size: var(--t-meta); margin-top: 14px; color: rgba(13,13,14,0.55); }

/* ============ CASO DE PROYECTO (patrón metropolis: fija + scroll) ============ */
.case { display: grid; grid-template-columns: 400px 1fr; gap: 64px; padding: 128px var(--margin) 100px; align-items: start; max-width: 1500px; margin: 0 auto; }
/* columna izquierda FIJA (sidebar) */
.case-fixed { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 20px; align-self: start; }
/* volver */
.case-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(13,13,14,0.55); text-decoration: none; transition: color 0.2s, gap 0.2s; }
.case-back:hover { color: var(--tinta); gap: 12px; }
.case-back svg { transition: transform 0.2s; }
.case-back:hover svg { transform: translateX(-3px); }
.case-title { font-family: var(--font-pixel); font-weight: 500; font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; }
.case-sub { font-family: var(--font-serif); font-size: var(--t-small); line-height: 1.5; color: rgba(13,13,14,0.7); }
.case-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.case-tag { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.03em; padding: 5px 9px; border-radius: 4px; background: var(--pill); color: var(--tinta); }
.case-info { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: var(--t-small); margin-top: 4px; }
.case-info dt { font-family: var(--font-mono); font-size: var(--t-meta); color: rgba(13,13,14,0.5); letter-spacing: 0.03em; }
.case-info dd { color: var(--tinta); }
.case-info .wip { color: #9683C9; font-weight: 500; }
.case-resumen { font-family: var(--font-serif); font-size: var(--t-body); line-height: 1.6; color: rgba(13,13,14,0.85); }
/* (case-primary retirado: el "botón viejo" se migró a .nav-pill.primary) */

/* 3 botones de recursos = componente nav-pill (pick), hug al texto, apilados */
.res-list { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
.res-list .res-item { border: 0; cursor: pointer; font-family: inherit; padding: 12px 20px; }
/* "Ver Figma": candado + vibra en hover; al click el PIN aparece DENTRO del pill */
.res-lock-btn { -webkit-appearance: none; appearance: none; }
.res-lock-face { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.res-lock-face .ic-lock { flex-shrink: 0; }
.pin-inputs { display: none; align-items: center; gap: 6px; }
.res-lock-btn.is-open { padding: 7px 12px; border-radius: 999px; }
.res-lock-btn.is-open .res-lock-face { display: none; }
.res-lock-btn.is-open .pin-inputs { display: inline-flex; }
@keyframes res-shake { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-3px)} 40%,60%{transform:translateX(3px)} }
.res-lock-btn:not(.is-open):hover { animation: res-shake 0.42s cubic-bezier(.36,.07,.19,.97) both; }
.pin-d { width: 30px; height: 36px; text-align: center; font-family: var(--font-pixel); font-weight: 500; font-size: var(--t-lead); color: var(--tinta); background: var(--crema); border: 1.5px solid rgba(13,13,14,0.25); border-radius: 8px; outline: none; padding: 0; -webkit-appearance: none; appearance: none; }
.pin-d:focus { border-color: var(--tinta); }
.res-lock-btn.err { animation: res-shake 0.42s; }
.res-lock-btn.err .pin-d { border-color: #E5484D; }
@media (prefers-reduced-motion: reduce) { .res-lock-btn:hover, .res-lock-btn.err { animation: none; } }

/* reveal de texto estilo referencia: cada palabra sube desde una máscara (easeOutExpo 1.2s + stagger) */
.rv-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.14em 0; margin: -0.14em 0; }
.rv-word { display: inline-block; transform: translateY(118%); transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); transition-delay: var(--d, 0s); will-change: transform; }
.rv-on .rv-word { transform: translateY(0); }
/* columna derecha SCROLL */
.case-scroll { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.case-img { border-radius: 10px; background: var(--tinta); aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--t-meta); color: rgba(250,246,239,0.35); position: relative; overflow: hidden; }
.case-img.tall { aspect-ratio: 16 / 12; }
.case-img.two { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; aspect-ratio: 16 / 9; background: transparent; }
.case-img.two > span { background: var(--tinta); display: flex; align-items: center; justify-content: center; border-radius: 8px; }
/* slot con imagen real (screenshot) */
.case-img.has-img { aspect-ratio: auto; background: transparent; padding: 0; overflow: visible; display: block; }
.case-img.has-img > img, .case-img.has-img > video { width: 100%; display: block; border-radius: 10px; }
.case-img.two.has-img { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; aspect-ratio: auto; background: transparent; }
.case-img.two.has-img > img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

.case-block { padding: 32px 4px; }
.case-block h2 { font-family: var(--font-pixel); font-weight: 500; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 16px; }
.case-block p { font-family: var(--font-serif); font-size: var(--t-body); line-height: 1.6; color: rgba(13,13,14,0.82); max-width: 62ch; }
.case-block p + p { margin-top: 16px; }
.case-block ul { margin: 16px 0 0 0; list-style: none; max-width: 62ch; }
.case-block li { font-family: var(--font-serif); font-size: var(--t-body); line-height: 1.6; color: rgba(13,13,14,0.82); padding: 11px 0; border-top: 1px solid rgba(13,13,14,0.12); display: flex; gap: 12px; }
.case-block li b { font-family: var(--font-ui); font-weight: 500; }
.case-block li .n { font-family: var(--font-mono); font-size: var(--t-meta); color: #9683C9; flex-shrink: 0; padding-top: 3px; }
.case-nda { font-family: var(--font-serif); font-style: italic; font-size: var(--t-small); line-height: 1.5; color: rgba(13,13,14,0.5); border-left: 2px solid rgba(13,13,14,0.14); padding-left: 12px; }
.case-block.tight { padding: 8px 4px 24px; }

/* tabla de métricas (label arriba mono/gris · valor abajo bold) — reusable en casos.
   Nº de columnas configurable con --cols (default 4). */
.metrics-table { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); border: 1.5px solid var(--tinta); border-radius: 18px; overflow: hidden; margin: 8px 0; }
.metrics-table .mt-col { padding: 20px 24px; border-left: 1.5px solid var(--tinta); }
.metrics-table .mt-col:first-child { border-left: 0; }
.metrics-table .mt-label { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(13,13,14,0.55); }
.metrics-table .mt-value { font-family: var(--font-ui); font-weight: 500; font-size: var(--t-h2); line-height: 1.15; color: var(--tinta); margin-top: 20px; }

/* proto embebido (marco tipo browser) */
.case-proto { border-radius: 12px; overflow: hidden; border: 1px solid rgba(13,13,14,0.14); background: var(--pill); }
.case-proto-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--pill); border-bottom: 1px solid rgba(13,13,14,0.1); }
.case-proto-bar .dot { width: 10px; height: 10px; border-radius: 50%; }
.case-proto-bar .dot.r { background: #E5484D; }
.case-proto-bar .dot.y { background: #FFC53D; }
.case-proto-bar .dot.g { background: #30A46C; }
.case-proto-url { margin-left: 12px; font-family: var(--font-mono); font-size: var(--t-meta); color: rgba(13,13,14,0.5); }
/* viewport que escala el proto desktop (1440px) para que entre en la columna */
.case-proto { position: relative; }
.case-proto-viewport { position: relative; width: 100%; overflow: hidden; background: #fff; }
.case-proto-frame { display: block; width: 1440px; height: 900px; border: 0; background: #fff; transform-origin: top left; pointer-events: none; }
/* overlay: el proto embebido es PREVIEW (no navegable, se rompe al navegar). Click abre fullscreen. */
.proto-open { position: absolute; inset: 0; z-index: 4; cursor: pointer; }

/* popup retro "¡Navega por el prototipo!" (estilo Figma: ventana pixel LOADING) */
.proto-popup { position: absolute; left: 18px; bottom: 18px; z-index: 6; width: 212px; background: #fff; border-radius: 12px; padding: 14px 14px 15px; border: 1px solid rgba(13,13,14,0.14); opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.35s, transform 0.4s cubic-bezier(0.19,1,0.22,1); pointer-events: none; }
.proto-popup.show { opacity: 1; transform: none; pointer-events: auto; }
.pp-close { position: absolute; top: 7px; right: 9px; background: none; border: 0; font-size: var(--t-small); line-height: 1.5; color: rgba(13,13,14,0.4); cursor: pointer; }
.pp-close:hover { color: var(--tinta); }
.pp-window { border: 2px solid var(--tinta); border-radius: 3px; overflow: hidden; margin-bottom: 12px; font-family: var(--font-mono); }
.pp-titlebar { height: 15px; background: repeating-linear-gradient(90deg, #b6a7e0, #b6a7e0 3px, #d0c6ee 3px, #d0c6ee 5px); border-bottom: 2px solid var(--tinta); display: flex; justify-content: flex-end; align-items: center; padding-right: 4px; }
.pp-titlebar .pp-x { font-size: var(--t-meta); color: var(--tinta); font-weight: 500; }
.pp-loading { font-weight: 500; font-size: var(--t-lead); letter-spacing: 1px; padding: 7px 8px 5px; color: var(--tinta); }
.pp-bar { display: flex; gap: 3px; padding: 0 8px 8px; }
.pp-bar i { flex: 1; height: 15px; border: 2px solid var(--tinta); background: #fff; }
.pp-bar i:nth-child(-n+4) { background: #b6a7e0; }
.pp-title { font-weight: 500; font-size: var(--t-small); line-height: 1.5; color: var(--tinta); }
.pp-sub { font-size: var(--t-meta); line-height: 1.4; color: rgba(13,13,14,0.5); margin-top: 4px; }

/* ============ PROCESO / CÓMO TRABAJO (home) — cada bloque = 1 pantalla (100vh) ============ */
.proc-screen { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; max-width: var(--shell); margin: 0 auto; padding: var(--margin); }
.proc-screen.center { align-items: center; text-align: center; }
/* pantalla split: contenido arriba y abajo (padding = gutter), espacio libre al medio */
.proc-screen.split { justify-content: flex-start; padding: calc(var(--margin) + 40px) var(--margin); margin-top: 60px; }
.proc-screen.split .proc-b { flex: 1; justify-content: space-between; }
.proc-screen.top { justify-content: flex-start; padding: calc(var(--margin) + 40px) var(--margin); margin-top: 60px; }
.proc-screen.top .proc-a { flex: 1; }
.proc-screen.top .proc-a-body { height: 100%; }
.proc-screen.top .proc-faces { margin-top: auto; padding-top: 80px; }
.proc-b-intro { max-width: none; }   /* llena la columna derecha (556), como la referencia */
.kicker { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(13,13,14,0.5); }
.proc-title { font-family: var(--font-pixel); font-weight: 500; font-size: var(--t-h1); line-height: 1.0; letter-spacing: -0.01em; color: var(--tinta); }
.ptext { font-family: var(--font-serif); font-size: var(--t-body); line-height: 1.6; color: rgba(13,13,14,0.82); }
.ptext strong { color: var(--tinta); font-weight: 500; }

.proc-a { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.proc-a-body { display: flex; flex-direction: column; gap: 20px; }

/* caritas alineadas con el texto (dentro de la columna de párrafos, izquierda) */
.proc-faces { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 28px; }
.face-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.face { color: var(--tinta); line-height: 0; }
.face-col .kicker { margin-top: 4px; }

.proc-punch { font-family: var(--font-pixel); font-weight: 500; font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.01em; text-align: center; max-width: none; margin: 0 auto; color: var(--tinta); }   /* 6 líneas fijadas con <br /> (pedido de Vani); sin max-width para que no re-quiebre */
/* cierre de la sección proceso: headline + CTA (primario reserva + secundario mensaje) */
/* pantalla A termina en el mensaje de cierre: sin padding inferior para que el footer quede a 100px (su margin-top) */
/* banner marquee de píxeles (HABLEMOS): full-bleed, alto = canvas */
.px-marquee { width: 100%; line-height: 0; overflow: hidden; }
.px-marquee canvas { display: block; width: 100%; }
/* banner + cierre: grupo centrado en la pantalla (100vh), 200px entre banner y cierre */
.proc-final { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 100px; padding: 80px 0; }
.proc-final .proc-close { padding: 0 var(--margin); }
.proc-close { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; }
.proc-close-cta { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
/* primario = nav-pill en negro (estado active de la navbar); secundario = nav-pill celeste default */
/* variante primaria del nav-pill: negro (reusable — cierre + CTA de casos) */
.nav-pill.primary { background: var(--tinta); color: var(--crema); border-radius: 999px; }
/* en el aside de los casos (flex-columna) el pill abraza su texto, no se estira */
.case-fixed .nav-pill { align-self: flex-start; }

.proc-b { display: flex; flex-direction: column; gap: 96px; }
.proc-b-head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.step { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.step-n { font-family: var(--font-mono); font-size: var(--t-meta); width: 28px; height: 28px; border-radius: 6px; background: var(--tinta); color: var(--crema); display: inline-flex; align-items: center; justify-content: center; }
.step h3 { font-family: var(--font-pixel); font-weight: 500; font-size: var(--t-h2); line-height: 1.15; color: var(--tinta); }
.step .ptext { font-size: var(--t-body); }

/* ============ SERVICIOS compactos (home, jerarquía menor) ============ */
.servicios-min { max-width: var(--shell); margin: 0 auto; padding: calc(var(--margin) + 40px) var(--margin); min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; }
.sm-title { font-family: var(--font-pixel); font-weight: 500; font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.01em; color: var(--tinta); margin-bottom: 56px; max-width: 20ch; }
.sm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: stretch; }
/* card de servicio: canvas vacío (interacción futura) → título → texto → labels */
.sm-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* .sm-canvas eliminado (Vani): las cards van sin contenedor gris; el ícono del servicio lo dibuja el blob del cursor */
.sm-card-title { font-family: var(--font-pixel); font-weight: 500; font-size: var(--t-h2); line-height: 1.15; color: var(--tinta); margin-bottom: 10px; }
.sm-card-text { font-size: var(--t-body); line-height: 1.6; color: rgba(13,13,14,0.72); margin-bottom: 18px; }
.sm-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; justify-content: center; }
/* LABELS estilo la referencia (la referencia): tag mono UPPERCASE, escala/tipografía del sistema.
   El color de fondo lo asigna js/tags aleatoriamente entre los 5 del canvas. */
.sm-tag, .case-tag, .s-tag {
  display: inline-flex; align-items: center; line-height: 1;
  font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 11px; clip-path: var(--pixel-cut);   /* corte pixel */
  background: var(--pill); color: var(--tinta);
}

/* ============ SOBRE MÍ (carta) ============ */
/* misma grid que la referencia: la carta cae en la columna derecha (textos de bajada) */
/* .about (sección) eliminada: la carta ahora llega como MENSAJE (toast → overlay, js/carta.js).
   .about-letter se conserva como tipografía de la carta dentro del overlay. */
.about-letter { display: flex; flex-direction: column; gap: 20px; }
.about-letter p { font-family: var(--font-serif); font-size: var(--t-lead); line-height: 1.6; color: rgba(13,13,14,0.85); }
.about-sign { margin-top: 12px; }
.about-sign span { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.04em; color: rgba(13,13,14,0.5); }

/* ============ FOOTER (patrón referencia) ============ */
.footer { padding: 110px var(--margin) 36px; }
.f-pills {
  display: flex; justify-content: center; align-items: center;
  gap: 6px; flex-wrap: wrap;
}
.f-pill {
  font-family: var(--font-pixel); font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.1;
  background: var(--pill);
  border-radius: 999px;
  padding: 8px 22px 12px;
  white-space: nowrap;
}
.f-pill.rot { background: var(--lila); transition: background 0.3s; }
.f-pill.rot .rot-inner { display: inline-block; }
/* swap: sale hacia arriba, entra desde abajo */
@keyframes rotOut { to { opacity: 0; transform: translateY(-70%); } }
@keyframes rotIn { from { opacity: 0; transform: translateY(70%); } to { opacity: 1; transform: none; } }
.rot-inner.out { animation: rotOut 0.22s ease forwards; }
.rot-inner.in { animation: rotIn 0.26s ease forwards; }
.f-legal {
  margin-top: 96px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.4px;
}
.f-legal .grp { display: flex; align-items: center; gap: 16px; }
.f-legal .pillq { background: var(--pill); border-radius: 2px; padding: 4px 6px; }
.f-legal a:hover { text-decoration: underline; }

/* ============ TRANSICIÓN DE PÁGINA (fiel a referencia) ============
   Persiana de 11 COLUMNAS que escalan con stagger izq→der — el borde
   "pixel" es el desfase entre columnas. Pills "cargando" en el centro. */
.wipe {
  position: fixed; inset: 0; z-index: 900;
  display: flex;
  pointer-events: none;
}
.wipe.cover { pointer-events: all; }
.wipe .col {
  flex: 1;
  background: var(--tinta);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
  margin-right: -1px;                 /* evita hairlines entre columnas */
}
.wipe.reveal .col { transform-origin: bottom; }
.wipe-msg {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  opacity: 0; transition: opacity 0.25s;
}
.wipe.cover .wipe-msg { opacity: 1; transition-delay: 0.4s; }
.wipe-msg span {
  font-family: var(--font-ui); font-size: var(--t-small);
  color: rgba(250,246,239,0.55);
  background: rgba(241,237,231,0.12);
  border-radius: 999px;
  padding: 7px 16px;
}

/* ============ PÁGINA CONTACTO: compositor estilo IA (honesto) ============ */
.contact-wrap {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 140px var(--margin) 80px;
  text-align: center;
}
/* saludo — texto plano pixel (sin contenedores de colores) */
.greet {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; margin-bottom: 46px; text-align: center;
}
.greet-line {
  font-family: var(--font-pixel); font-weight: 500;
  font-size: var(--t-h1);
  line-height: 1.12; letter-spacing: -0.02em; color: var(--tinta);
}
.greet-smiley { width: 0.86em; height: 0.86em; vertical-align: -0.1em; margin-left: 0.08em; }

/* el "chat" input — forma redondeada (como el celeste) + línea continua violeta suave */
.composer {
  position: relative;
  width: min(760px, 100%);
  padding: 8px 10px 10px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--tinta);   /* línea fina negra, look chat IA */
  border-radius: 28px;
  transition: border-color 0.2s;
}
.composer:focus-within { border-color: var(--tinta); }
.composer textarea {
  width: 100%; border: none; background: transparent; resize: none;
  font-family: var(--font-ui); font-size: var(--t-body); line-height: 1.6; color: var(--tinta);
  padding: 16px 18px 8px; min-height: 58px; outline: none;
}
.composer textarea::placeholder { color: rgba(13,13,14,0.4); }
.composer-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 2px;
}
/* contador del MENSAJE — esquina sup. der. del composer (no junto al email) */
.char-count { position: absolute; top: 16px; right: 24px; font-family: var(--font-mono); font-size: var(--t-meta); color: rgba(13,13,14,0.35); }
.char-count.low { color: #E5484D; }

/* popover de emojis (10 más usados) — mismo lenguaje que el composer */
.emoji-pop {
  position: absolute; right: 52px; bottom: 64px; z-index: 5;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  width: 210px; padding: 12px;
  background: #fff;
  border: 1px solid var(--tinta);
  border-radius: 22px;
  transform-origin: bottom right;
  animation: popIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.emoji-pop[hidden] { display: none; }
.emoji-pop button {
  width: 100%; aspect-ratio: 1; border: none; background: transparent; cursor: pointer;
  line-height: 1; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
.emoji-pop button svg { width: 36px; height: 36px; }   /* pixel-art grande */
.emoji-pop button:hover { background: var(--pill); transform: scale(1.15); }
@keyframes popIn { from { opacity: 0; transform: scale(0.85) translateY(6px); } to { opacity: 1; transform: none; } }
.email-field {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--pill); border-radius: 999px; padding: 8px 16px;
  transition: box-shadow 0.2s;
}
.email-field.err { box-shadow: inset 0 0 0 1.5px #E5484D; }
.email-field svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.5; }
.email-field input {
  border: none; background: transparent; outline: none;
  font-family: var(--font-ui); font-size: var(--t-body); width: 100%; color: var(--tinta);
}
.icon-btn {
  width: 42px; height: 42px; flex-shrink: 0;
  border: none; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; transition: background 0.2s, transform 0.2s;
}
.icon-btn:hover { background: var(--celeste); }
.icon-btn svg { width: 20px; height: 20px; }
.mic-btn.listening { background: #E5484D; }
.mic-btn.listening svg { stroke: #fff; }
.mic-btn.listening { animation: micPulse 1.1s ease-in-out infinite; }
@keyframes micPulse { 50% { box-shadow: 0 0 0 8px rgba(229,72,77,0.18); } }
.send-btn { background: var(--tinta); }
.send-btn svg { stroke: var(--crema); }
.send-btn:hover { background: #000; transform: translateX(1px); }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* nota honesta bajo el input */
/* nota del composer SIN contenedor (decisión de Vani 2026-07-24: la label celeste competía
   con las pills de motivos; rompe la regla de labels a propósito). Texto discreto. */
.composer-note {
  margin-top: 18px;
  font-family: var(--font-grotesk); font-size: var(--t-small); line-height: 1.5;
  color: rgba(13,13,14,0.6);
}
.composer-note b { font-weight: 600; color: var(--tinta); }
/* CTA de agenda (cal.com): camino sincrónico, reusa el componente link-btn */
.call-cta { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.call-cta-text { font-family: var(--font-grotesk); font-size: var(--t-small); line-height: 1.5; color: rgba(13,13,14,0.6); }
/* corazón pixel-art inline (reemplaza el <3) */
.heart-px { display: inline-block; width: 14px; height: 12px; vertical-align: -1px; margin-left: 2px; fill: #EF3B22; shape-rendering: crispEdges; }   /* rojo del canvas (paleta cerrada) */

/* confirmación (reemplaza el composer al enviar) */
.sent {
  width: min(560px, 100%);
  text-align: center;
  opacity: 0; transform: scale(0.94);
  transition: opacity 0.4s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.sent.show { opacity: 1; transform: none; }
.sent .check {
  width: 64px; height: 64px; margin: 0 auto 20px;
  border-radius: 50%; background: var(--tinta);
  display: flex; align-items: center; justify-content: center;
}
.sent .check svg { width: 30px; height: 30px; stroke: var(--crema); }
.sent h2 { font-family: var(--font-pixel); font-weight: 500; font-size: var(--t-h1); line-height: 1.05; }
.sent p { margin-top: 14px; font-size: var(--t-body); color: rgba(13,13,14,0.7); max-width: 42ch; margin-left: auto; margin-right: auto; }
.sent .again { margin-top: 24px; font-family: var(--font-mono); font-size: var(--t-meta); text-decoration: underline; cursor: pointer; }

/* intro: las pills del hero aparecen con pop */
@keyframes pillPop {
  0% { opacity: 0; transform: scale(0.6); }
  70% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
.hero-title .w.pop { animation: pillPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* reveals suaves */
.rv { opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
.rv.on { opacity: 1; transform: none; }

/* char-reveal (animejs): oculto hasta que el JS lo procese, con fallback a 3s por si el CDN no carga */
.reveal-chars { opacity: 0; animation: revealFallback 0.01s linear 3s forwards; }
@keyframes revealFallback { to { opacity: 1; } }

/* badge "último / en construcción" en la card de proyecto */
.wtag.hl { background: var(--amarillo); color: var(--tinta); font-weight: 500; }

/* overlay de atajos ("Press / for ?") */
.keys {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(13,13,14,0.55);
  display: none; align-items: center; justify-content: center;
}
.keys.open { display: flex; }
.keys .panel {
  background: var(--crema); border-radius: 12px;
  padding: 32px 40px; min-width: 320px;
}
.keys h3 { font-family: var(--font-pixel); font-weight: 500; font-size: var(--t-h2); margin-bottom: 16px; }
.keys li { list-style: none; display: flex; justify-content: space-between; gap: 40px; font-family: var(--font-mono); font-size: var(--t-meta); padding: 7px 0; border-top: 1px solid rgba(13,13,14,0.1); }
.keys kbd { background: var(--pill); border-radius: 4px; padding: 2px 8px; }

/* responsive básico (preview desktop-first) */
@media (max-width: 960px) {
  .nav-pills { position: static; transform: none; }
  .nav-hint { display: none; }
  .present .headline { grid-column: 1 / 13; text-align: left; }
  .present .prose, .present .media { grid-column: 1 / 13; }
  .service-row .smedia, .service-row .sinfo { grid-column: 1 / 13; }
  .serv-hero .ethos { max-width: 100%; }
  .work-grid { grid-template-columns: 1fr; }
  .hero-title .w { font-size: var(--t-h1); }

  /* servicios: 3 cols no entran → apilar y permitir scroll (el 100vh es solo desktop) */
  .services { height: auto; min-height: 100vh; padding-top: 88px; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card { min-height: 320px; }

  /* caso: columna fija deja de ser sticky, todo en una columna */
  .case { grid-template-columns: 1fr; gap: 28px; padding-top: 136px; }
  .case-fixed { position: static; top: auto; gap: 16px; }
}

/* ============ MOBILE ============ */
@media (max-width: 600px) {
  :root { --margin: 16px; --gap: 12px; }

  /* nav: pills chicos que entren en una fila; wrap solo como último recurso */
  .nav { padding: 14px var(--margin); flex-wrap: wrap; gap: 8px; }
  .nav-pills { gap: 4px; }
  .nav-pill { padding: 8px 12px; font-size: 13px; }
  .nav-cv { padding: 0 12px; min-width: 40px; }
  .nav-logo { padding: 0 11px; }
  /* en mobile, Volver/Siguiente = solo ícono (evita nav gigante) */
  .link-btn .lb-t { display: none; }
  .link-btn { padding: 0 6px; }

  /* HERO / headers (home + proyectos + contacto): la franja apila en VERTICAL.
     El .hero mantiene min-height:100vh (no lo tocamos) → el .hero-sky conserva alto
     y el motor de píxeles se ve tras el divisor, igual que en desktop. */
  .hero-band { padding: 100px 0 28px; }
  .band-proyectos { padding: 96px 0 20px; }
  .hero-hline, .hero-vline { display: none; }        /* divisores internos no aplican apilado */
  .hero-inner { grid-template-columns: 1fr; row-gap: 24px; }
  .hero-col-left { padding-right: 0; }
  .hero-col-right { padding-left: 0; gap: 18px; }
  .hero-tagline { text-align: left; text-align-last: left; }   /* justificado se ve mal en angosto */
  .hero .hero-name { font-size: clamp(38px, 11vw, 60px); }     /* SOLO el hero del home (no Proyectos/Contacto) */
  .hero-foot { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; }
  .hero-foot .hero-loc { text-align: left; max-width: none; margin-top: 0; }
  .hero-sky { min-height: 44vh; }                    /* el campo de píxeles ocupa la zona bajo el divisor */

  /* bloques */
  .block { padding: 72px var(--margin); }
  /* .present: en desktop es 2 columnas y sus hijos usan grid-column 1/13 (regla tablet),
     lo que en mobile generaba tracks implícitos y DESBORDE horizontal. Forzamos 1 columna. */
  .present { grid-template-columns: 1fr; gap: 24px; }
  .present .headline, .present .prose, .present .media, .present .body-row { grid-column: auto; }
  .present .headline { font-size: var(--t-h1); }
  .present .body-row { margin-top: 40px; }

  /* proyectos */
  .page-hero, .serv-hero { padding: 128px var(--margin) 40px; }

  /* servicios: lista a 1 columna en pantallas muy chicas */
  .svc-list { grid-template-columns: 1fr; }
  .svc-title { font-size: var(--t-h1); }

  /* contacto */
  .contact-wrap { padding-left: var(--margin); padding-right: var(--margin); }
  .greet-line { font-size: var(--t-h1); }
  .composer { border-radius: 24px; }
  .composer textarea { font-size: var(--t-body); }   /* evita zoom de iOS al enfocar */
  .char-count { top: 12px; right: 16px; }
  .emoji-pop { width: min(210px, calc(100vw - 48px)); }

  /* caso */
  .case { padding-top: 88px; gap: 24px; }
  .case-title { font-size: var(--t-h1); }
  .case-block { padding: 24px 0; }
  .case-block p { font-size: var(--t-body); }
  .case-img.two { grid-template-columns: 1fr; aspect-ratio: auto; }
  .case-img.two > span { aspect-ratio: 16 / 10; }

  /* tabla de métricas: 2 columnas en mobile con bordes internos */
  .metrics-table { grid-template-columns: 1fr 1fr; }
  .metrics-table .mt-col { border-left: 1.5px solid var(--tinta); border-top: 1.5px solid var(--tinta); }
  .metrics-table .mt-col:nth-child(odd) { border-left: 0; }
  .metrics-table .mt-col:nth-child(-n+2) { border-top: 0; }
  .metrics-table .mt-value { font-size: var(--t-h2); }

  /* proto: en mobile no se escala (quedaría ilegible) → tamaño natural */
  .case-proto-viewport { height: 560px !important; }
  .case-proto-frame { width: 100%; height: 560px; transform: none !important; }

  /* proceso: apilar todo a 1 columna */
  /* mobile: las pantallas full-screen vuelven a flujo natural */
  .proc-screen, .servicios-min, .about { min-height: 0; padding: 72px var(--margin); }
  .proc-a, .proc-b-head { grid-template-columns: 1fr; gap: 24px; }
  /* flores (caritas) centradas en pantalla + sus textos debajo también centrados */
  .proc-faces { grid-template-columns: 1fr; gap: 40px; justify-items: center; }
  .face-col { align-items: center; text-align: center; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  /* servicios: 1 columna en mobile, con más aire entre cards (quedaban muy juntas) */
  .sm-grid { grid-template-columns: 1fr; gap: 56px; }

  /* footer */
  .f-pills { flex-wrap: wrap; }
  .f-legal { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
   CONTACTO — estética "chat con IA" (ref: Gemini) sobre grilla la referencia
   ============================================================ */
.chat { min-height: 100vh; display: flex; flex-direction: column; padding: 90px var(--margin) 40px; }

/* HEADER: Hola | pregunta | cerrar, con divisor inferior que cruza el ancho */
.chat-head { display: flex; align-items: stretch; border-bottom: 1px solid rgba(13,13,14,0.14); }
.chat-hola { align-self: flex-start; font-family: var(--font-pixel); font-weight: 500; font-size: var(--t-h1); letter-spacing: -0.02em; line-height: 1.05; padding: 20px 32px 20px 0; }
.chat-q { flex: 1; align-self: stretch; display: flex; align-items: center; padding: 20px 32px; border-left: 1px solid rgba(13,13,14,0.14); color: var(--gris); font-size: var(--t-body); line-height: 1.6; }
.chat-close { align-self: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--pill); display: flex; align-items: center; justify-content: center; color: var(--tinta); transition: background .2s; }
.chat-close:hover { background: #e4dfd6; }
.chat-close svg { width: 18px; height: 18px; }

/* CUERPO: chips centradas verticalmente, composer abajo */
.chat-body { flex: 1; display: flex; flex-direction: column; }
.chat-mid { flex: 1; display: flex; align-items: center; justify-content: center; }

/* CHIPS: 2 col, borde línea (sin relleno, sin ícono), 32px entre ellas, centradas */
.chat-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; width: 100%; max-width: 880px; margin: 0 auto; }
.cc {
  background: transparent; border: 1px solid rgba(13,13,14,0.22); border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color .2s, background .2s;
}
.cc:hover { border-color: var(--tinta); }
.cc.sel { border-color: var(--tinta); background: var(--pill); }
.cc-title { font-family: var(--font-ui); font-weight: 500; font-size: var(--t-small); letter-spacing: -0.005em; line-height: 1.5; }
.cc-sub { font-size: var(--t-small); line-height: 1.5; color: var(--gris); }

/* composer centrado + 60px a cada lado (760 → 880), 32px sobre el borde de las chips */
.chat #composer.composer, .chat .composer-note { width: 100%; max-width: 880px; margin: 0 auto; }
.chat #composer.composer { margin-top: 32px; }
.chat .composer-note { text-align: center; }

/* TABLET */
@media (max-width: 900px) {
  .chat-cards, .chat #composer.composer, .chat .composer-note { max-width: 640px; }
}

/* MOBILE: header apila Hola sobre la pregunta, cerrar arriba a la derecha; chips a 1 columna */
@media (max-width: 640px) {
  .chat { padding: 84px var(--margin) 32px; }
  .chat-head { flex-wrap: wrap; position: relative; }
  .chat-hola { padding: 16px 0 10px; }
  .chat-q { flex-basis: 100%; align-self: auto; border-left: 0; padding: 0 0 16px; }
  .chat-close { position: absolute; top: 14px; right: 0; }
  .chat-cards { grid-template-columns: 1fr; gap: 12px; max-width: 100%; }
}

.composer-note:empty { display: none; }

/* mini card "caso en construcción" (sidebar de caso) */
/* case-wip = label pixelada (mismo lenguaje que los tags): container pixel, color sólido */
.case-wip { display: inline-flex; align-items: center; gap: 7px; margin: 4px 0 18px; padding: 6px 11px; clip-path: var(--pixel-cut); font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; background: var(--amarillo); color: var(--tinta); }
.case-wip-ic { display: inline-flex; }
.case-wip-ic svg { width: 16px; height: 16px; }

/* research findings: 4 mini cards (mismo lenguaje que .case-wip: borde gris 1px, sin sombra) */
.find-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; }
.find-card { border: 1px solid rgba(13,13,14,0.22); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.find-card .fn { font-family: var(--font-mono); font-size: var(--t-meta); color: rgba(13,13,14,0.4); }
.find-card b { font-weight: 500; font-size: var(--t-body); line-height: 1.6; }
.find-card > span:last-child { color: var(--gris); font-size: var(--t-body); line-height: 1.6; }
@media (max-width: 700px) { .find-grid { grid-template-columns: 1fr; } }

/* ============ CUADRÍCULA base (Fase 1 · celda 8px · js/grid.js) ============ */
/* z-index:0 en la sección = crea contexto de apilado; el canvas va detrás del
   contenido con z-index:-1 sin tocar el posicionamiento de los hijos. */
/* Un único canvas de fondo, fijo al viewport, detrás de todo. La retícula es
   continua (anclada al documento vía scroll en grid.js). Las secciones van sin
   fondo opaco para que la grilla se vea a través. */
#grid-bg, #px-bg { position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none; }

/* ===== cursor: la bola (canvas fixed por encima de todo, no bloquea clics) ===== */
#cursor-ball { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; }
/* con la bola activa se oculta el cursor nativo; el caret de texto se mantiene */
html.has-ball, html.has-ball * { cursor: none; }
html.has-ball input, html.has-ball textarea, html.has-ball [contenteditable="true"] { cursor: text; }

/* metric cards — baseline de testing (mismo borde gris 1px, número protagonista) */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 20px 0; }
.metric-card { border: 1px solid rgba(13,13,14,0.22); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.metric-card .m-num { font-family: var(--font-pixel); font-weight: 500; font-size: var(--t-h2); letter-spacing: -0.02em; line-height: 1.15; }
.metric-card .m-label { font-size: var(--t-small); line-height: 1.5; color: var(--gris); }

/* card de entregables (celeste DS) — va abajo del resumen del caso */
.deliver { background: var(--celeste); border-radius: 12px; padding: 24px 28px; margin: 4px 0; }
.deliver-eyebrow { display: block; font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(13,13,14,0.55); margin-bottom: 8px; }
.deliver-list { list-style: none; margin: 0; }
.deliver-list li { font-family: var(--font-serif); font-size: var(--t-body); line-height: 1.6; color: rgba(13,13,14,0.85); padding: 12px 0; border-top: 1px solid rgba(13,13,14,0.14); }
.deliver-list li:first-child { border-top: none; padding-top: 4px; }
.deliver-list li b { font-family: var(--font-ui); font-weight: 600; color: var(--tinta); }
@media (max-width: 700px) { .deliver { padding: 20px; } }

/* contacto: header estilo Proyectos + composer centrado en el espacio restante */
.contact-section { min-height: calc(100vh - 246px); display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 40px; }
.contact-section .composer, .contact-section .composer-note { margin-left: auto; margin-right: auto; }

/* contacto: bento de 4 cards de motivo (forma; colores en fase arte) */
/* motivos de contacto = EL COMPONENTE pill de la navbar, las 4 en una linea, gap 8px.
   Jerarquia por hover: prioritarias cuadradas y negras · media celeste mas oscuro · resto morph estandar.
   Seleccionada (.sel) = estado active del componente (tinta + capsula). */
.contact-pills { display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; width: 100%; max-width: 760px; margin: 0 auto 40px; }
.contact-pills .nav-pill { border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; }
.contact-pills .p-pri:hover { border-radius: 0; background: var(--tinta); color: var(--crema); }
.contact-pills .p-mid:hover { background: #7ED0EC; }
.contact-pills .nav-pill.sel { background: var(--tinta); color: var(--crema); border-radius: 999px; }

/* barra del composer: enviar a la derecha */
.contact-section .cbar-spacer { flex: 1; }

/* campos abajo: Nombre y empresa + mail */
.contact-fields { width: 100%; max-width: 760px; margin: 16px auto 0; display: flex; flex-direction: column; gap: 10px; }
.cf { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(13,13,14,0.16); border-radius: 12px; padding: 10px 14px; transition: border-color .2s; }
.cf.err { border-color: #E5484D; }
.cf-lbl { font-family: var(--font-mono); font-size: 13px; color: var(--gris); white-space: nowrap; }
.cf input { border: none; background: transparent; outline: none; font-family: var(--font-ui); font-size: 15px; width: 100%; color: var(--tinta); }

@media (max-width: 600px) { .contact-pills { flex-wrap: wrap; } }

/* firma del mensaje: campo mail dentro del composer (sin divider) */
.sig { display: flex; align-items: baseline; gap: 8px; padding: 4px 22px 2px; max-width: 50%; }   /* la línea del mail llega hasta la mitad de la barra */
.sig-lbl { font-family: var(--font-ui); font-size: 14px; color: var(--gris); flex: none; }
.sig-in { flex: 1; min-width: 150px; border: none; border-bottom: 1px solid rgba(13,13,14,0.18); background: transparent; outline: none; font-family: var(--font-ui); font-size: 14px; color: var(--tinta); padding: 3px 0; }
.sig-in::placeholder { color: rgba(13,13,14,0.4); }
.sig-in:focus { border-bottom-color: var(--tinta); }
.sig-in.err { border-bottom-color: #E5484D; }

/* ============================================================
   PIXEL FX portados de la referencia (solo colores adaptados)
   río del proceso · caritas · botones
   ============================================================ */
/* (cards de servicio sin canvas ni contenedor gris — el ícono lo estampa el blob) */
/* RÍO del proceso (#procflow de la referencia, 1176x392): doble hélice caos→orden entre el intro y los pasos */
.procflow { display: block; width: 100%; height: 392px; margin: 32px 0 24px; }

/* pasos del proceso (la referencia .donuts .step): hover atenúa los otros + scrubber de píxeles que sigue al cursor */
.proc-b .steps .step { position: relative; cursor: none; transition: opacity 0.25s steps(3); }
.proc-b .steps:hover .step { opacity: 0.45; }
.proc-b .steps .step:hover { opacity: 1; }
.proc-b .steps .step::before {
  content: ''; position: absolute; top: -16px; left: var(--lx, 0px);
  width: 63px; height: 9px; background: var(--tinta);
  opacity: 0; transition: opacity 0.25s steps(3); pointer-events: none;
}
.proc-b .steps .step:hover::before { opacity: 1; }

/* flores pixel (Figma de Vani, reemplazan a las caritas): host relativo para los corazones */
.face { position: relative; display: inline-block; }
.face .flor { display: block; height: 192px; width: auto; image-rendering: pixelated; }   /* +100% pedido por Vani; PNG con fondo transparente (flood-fill) */
/* la flor triste se pone gris al entrar con el cursor (firma steps() de la referencia) */
.face[data-mood="sad"] .flor { transition: filter 0.25s steps(3); }
.face[data-mood="sad"]:hover .flor { filter: grayscale(1); }
.sm-heart { position: absolute; pointer-events: none; animation: smHeart 1s ease-out forwards; }
@keyframes smHeart {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  18% { opacity: 1; transform: translateY(-8px) scale(1); }
  100% { opacity: 0; transform: translateY(-36px) scale(1); }
}

/* botones con pixel flicker (la referencia .pxfx/.lbl): overlay grid 9px + label encima */
.nav-pill, .nav-cv { position: relative; }
.pxfx { position: absolute; inset: 0; display: grid; pointer-events: none; overflow: hidden; border-radius: inherit; }
.pxfx i { display: block; }
.nav-pill .lbl, .nav-cv .lbl { position: relative; z-index: 1; display: block; }

/* mobile: el río baja de altura */
@media (max-width: 600px) {
  .procflow { height: 240px; }
}

/* ============================================================
   LA CARTA como mensaje (js/carta.js): toast al llegar al final
   + overlay con sobre Lottie + carta (tipografía .about-letter)
   ============================================================ */
.carta-toast {
  position: fixed; right: 56px; top: 86px; z-index: 1200;    /* 20px debajo del botón CV, alineado a su margen derecho */
  background: none; border: 0; padding: 0; cursor: pointer;
  transform: translateX(24px); opacity: 0;
  transition: transform 0.25s steps(3), opacity 0.25s steps(3);   /* salida escalonada */
}
.carta-toast.in { opacity: 1; animation: toastBounce 0.65s both; }   /* entrada: rebote desde el margen derecho */
@keyframes toastBounce {
  0%   { transform: translateX(calc(100% + 64px)); opacity: 1; }
  55%  { transform: translateX(-16px); }
  72%  { transform: translateX(8px); }
  88%  { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}
/* el correo = SOLO el ícono, sin fondo, 80px de ancho (pedido de Vani) */
.carta-bell { width: 80px; height: auto; display: block; image-rendering: pixelated; }
.carta-toast:hover .carta-bell { transform: translateY(-2px); }

.carta-overlay {
  position: fixed; inset: 0; z-index: 1300; background: rgba(13,13,14,0.32);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; transition: opacity 0.25s steps(3);
}
.carta-overlay.in { opacity: 1; }
/* VENTANA "Sobre mí" (Figma node 270:16399): celeste claro, borde tinta, esquinas rectas.
   Barra de título + X · imagen pixel de sillas izq · carta jerárquica der. Mobile: sin imagen. */
.carta-card { position: relative; width: min(700px, 94vw); background: var(--celeste); border: 2px solid var(--tinta); transform: scale(0.96); transition: transform 0.25s steps(3); }
.carta-overlay.in .carta-card { transform: none; }
.carta-tbar { display: flex; align-items: stretch; justify-content: space-between; border-bottom: 2px solid var(--tinta); }
.carta-tbar-t { font-family: var(--font-grotesk); font-size: var(--t-small); color: var(--tinta); padding: 8px 12px; }
.carta-close {
  width: 36px; border: 0; border-left: 2px solid var(--tinta);
  background: transparent; color: var(--tinta); font-size: 20px; line-height: 1; cursor: pointer;
}
.carta-close:hover { background: var(--tinta); color: var(--crema); }
.carta-cols { display: grid; grid-template-columns: 232px 1fr; }
.carta-art { width: 100%; height: 100%; object-fit: cover; object-position: top; image-rendering: pixelated; border-right: 2px solid var(--tinta); display: block; min-height: 0; box-sizing: border-box; padding: 4px; }
.carta-body { padding: 20px 24px 24px; overflow: auto; max-height: min(72vh, 560px); display: flex; flex-direction: column; gap: 12px; }
/* jerarquía marcada por Vani: el título MUCHO más fuerte que los párrafos */
.carta-hi { font-family: var(--font-grotesk); font-weight: 600; font-size: var(--t-h2) !important; line-height: 1.15 !important; color: var(--tinta); }
.carta-body p { font-family: var(--font-grotesk); font-size: var(--t-small); line-height: 1.55; color: var(--tinta); }
.carta-sign { margin-top: 8px; font-weight: 700; }
.carta-sign span { font-weight: 400; font-size: var(--t-meta); color: rgba(13,13,14,0.55); }

/* provocación de Presentación: abajo a la derecha, al margen de la grid, tipografía pequeña */
#presentacion { position: relative; }
.no-click {
  position: absolute; right: var(--margin); bottom: 24px;
  font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.04em;
  color: rgba(13,13,14,0.5);
}

/* FIX crítico: display flex/inline-flex pisa el atributo [hidden] → el overlay invisible
   cubría toda la página (z-1300) y se comía TODOS los hovers/clicks. Con [hidden] fuera del árbol. */
.carta-toast[hidden], .carta-overlay[hidden] { display: none !important; }

/* confirmación "¡Recibido!": ícono pixel de mail que rebota entrando desde la derecha */
.sent-icon { width: 96px; margin: 0 auto 18px; }
.sent-icon img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.sent.show .sent-icon { animation: mailBounceInRight 0.72s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes mailBounceInRight {
  0%   { opacity: 0; transform: translateX(140px) scale(0.85); }
  55%  { opacity: 1; transform: translateX(-16px) scale(1.06); }
  75%  { transform: translateX(7px) scale(0.98); }
  100% { transform: translateX(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .sent.show .sent-icon { animation: none; } }

/* cards de contacto: media pintada LISA (plana) con el color de su data-px.
   Se oculta el canvas de píxeles por ahora (el arte se trabaja luego). */




/* ===== micro-interacciones steps() (la firma de la referencia) ===== */
/* links de texto → subrayado que crece (la referencia: background-size + easeOutExpo) */
.ptext a, .prose a, .about-letter a, .carta-body a {
  text-decoration: none; color: inherit;
  background-image: linear-gradient(var(--tinta), var(--tinta));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ptext a:hover, .prose a:hover, .about-letter a:hover, .carta-body a:hover { background-size: 100% 2px; }

/* móvil: el punch vuelve a fluir (los 6 renglones fijos son de desktop) */
@media (max-width: 600px) {
  .proc-punch br { display: none; }
  .carta-toast { right: 16px; top: 80px; }
  /* ventana "Sobre mí" en mobile: SIN imagen, solo la parte de textos */
  .carta-overlay { padding: 10px; align-items: flex-start; overflow-y: auto; }
  .carta-card { width: 98vw; margin: 6px auto; }
  .carta-cols { grid-template-columns: 1fr; }
  .carta-art { display: none; }
  .carta-body { max-height: none; }
}

/* CIERRE: canvas de píxeles (mismo campo "sky" del hero, pero desde abajo) +
   divisor arriba + 100px libres sobre el margen inferior para mail y linkedin */
/* footer simple: divisor + info. Divisor a la misma distancia que el margen inferior (simétrico). */
.site-footer { position: relative; margin-top: 100px; padding: calc(var(--margin) / 2) var(--margin); background: #fff; z-index: 1; }
.site-footer-hline { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(13,13,14,0.14); }
.footer-links {
  display: flex; align-items: center; justify-content: flex-end; gap: 20px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.02em;
}
.footer-link { color: var(--tinta); transition: opacity 0.2s; }
.footer-link:hover { opacity: 0.55; }
.footer-credit { color: var(--gris); }

/* ============================================================
   CALL-PEEK — ventanitas de videollamada que RODEAN el botón
   "Reserva una llamada" al hacerle hover (ref: "JOIN THE BONT CLUB").
   El botón es el centro (0,0); cada foto se ancla a él con un
   offset (--x,--y) y emerge con fade + rise escalonado.
   ============================================================ */
.proc-final .proc-close { position: relative; z-index: 2; }      /* bloque de cierre por delante del fondo */
.proc-final .proc-title { position: relative; z-index: 2; }      /* título por delante de las fotos (emergen por detrás) */
.proc-close-cta .nav-pill { z-index: 2; }                        /* botones por delante de las fotos (ya son position:relative) */
.reserva-wrap { position: relative; display: inline-flex; }      /* hug al botón: su centro = centro del botón */
.call-peek {
  position: absolute; left: 50%; top: 50%;                       /* punto = centro del botón */
  width: 0; height: 0;
  z-index: 3;                                                    /* POR DELANTE del título y los botones (las fotos flotan encima) */
  pointer-events: none;
}
.cpk {
  position: absolute; left: 0; top: 0;
  --x: 0px; --y: 0px;
  width: 58px; aspect-ratio: 3 / 2;
  opacity: 0;
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) translateY(10px) scale(0.9);
  transition: opacity .5s cubic-bezier(.19,1,.22,1), transform .5s cubic-bezier(.19,1,.22,1);
  transition-delay: 0s;             /* salida inmediata; la entrada escalona abajo */
  will-change: opacity, transform;
}
.cpk .cpk-ph, .cpk img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  clip-path: var(--pixel-cut);      /* esquinas pixeladas del DS */
  box-shadow: inset 0 0 0 1px rgba(250,246,239,0.18);
}
/* placeholder: mini "ventana de call" (cabeza + hombros sobre fondo oscuro) — se reemplaza por <img> */
.cpk-ph {
  background: linear-gradient(160deg, var(--tinta-2), var(--tinta));
  position: relative;
}
.cpk-ph::before {                   /* cabeza */
  content: ""; position: absolute; left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  width: 30%; aspect-ratio: 1; border-radius: 50%;
  background: var(--celeste); opacity: .9;
}
.cpk-ph::after {                    /* hombros */
  content: ""; position: absolute; left: 50%; bottom: 10%;
  transform: translateX(-50%);
  width: 52%; height: 34%; border-radius: 44px 44px 0 0;
  background: var(--celeste); opacity: .9;
}
/* offsets radiales desde el centro del botón; tamaños −20% respecto de la tanda previa */
.cpk-1 { --x: -135px; --y: -78px; width: 62px; }   /* arriba-izquierda */
.cpk-2 { --x: -190px; --y:   8px; width: 51px; }   /* izquierda */
.cpk-3 { --x:  -95px; --y:  82px; width: 64px; }   /* abajo-izquierda */
.cpk-4 { --x:  150px; --y: -78px; width: 73px; }   /* arriba-derecha */
.cpk-5 { --x:  120px; --y:  82px; width: 48px; }   /* abajo-derecha */

/* trigger: SOLO al hover real del botón de reserva */
@media (hover: hover) {
  .reserva-wrap:has(.nav-pill.primary:hover) .cpk {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--x), var(--y));
  }
  .reserva-wrap:has(.nav-pill.primary:hover) .cpk-1 { transition-delay: .00s; }
  .reserva-wrap:has(.nav-pill.primary:hover) .cpk-4 { transition-delay: .05s; }
  .reserva-wrap:has(.nav-pill.primary:hover) .cpk-2 { transition-delay: .10s; }
  .reserva-wrap:has(.nav-pill.primary:hover) .cpk-5 { transition-delay: .14s; }
  .reserva-wrap:has(.nav-pill.primary:hover) .cpk-3 { transition-delay: .18s; }
}
@media (prefers-reduced-motion: reduce) {
  .cpk { transition: opacity .3s ease; transform: translate(-50%,-50%) translate(var(--x),var(--y)); }
  .reserva-wrap:has(.nav-pill.primary:hover) .cpk { transform: translate(-50%,-50%) translate(var(--x),var(--y)); }
}
/* en pantallas chicas (touch) el efecto no aplica */
@media (max-width: 760px) {
  .call-peek { display: none; }
}

/* Sub-encabezado dentro de un bloque de contenido (preguntas de FAQ, sub-temas de una
   página de servicio). Usa los tokens existentes: nada nuevo, solo la jerarquía que faltaba
   entre el h2 del bloque y el cuerpo. Espaciado en escala de 4. */
.case-block h3 { font-family: var(--font-ui); font-weight: 500; font-size: var(--t-lead); line-height: 1.3; letter-spacing: -0.01em; color: var(--tinta, #0D0D0E); max-width: 62ch; margin: 32px 0 8px; }
.case-block h3:first-of-type { margin-top: 16px; }
.case-block h3 + p { margin-top: 0; }

/* Página de servicios: la card es un enlace y el ícono de píxeles vive dentro,
   siempre animado (js/px-servicios.js) en vez de aparecer con el cursor. */
a.sm-card { text-decoration: none; color: inherit; }
/* alto uniforme (lo fija px-servicios.js) + canvas apoyado abajo: los 3 títulos arrancan a la misma altura */
.svc-icon { display: flex; align-items: flex-end; justify-content: center; margin-bottom: 40px; }
.svc-icon canvas { display: block; image-rendering: pixelated; }
/* el enlace al servicio se apoya en el fondo de la card: con textos de distinto largo
   los tres quedan igual de alineados que los títulos */
a.sm-card { height: 100%; }
a.sm-card .sm-tags { margin-bottom: 20px; }
a.sm-card .link-btn { margin-top: auto; opacity: 0.72; transition: opacity 0.2s ease; }
a.sm-card:hover .link-btn { opacity: 1; }

/* Páginas de servicio: el CTA con las fotitos de videollamada (mismo componente del home),
   separado 60px de la ficha que tiene arriba. */
.case-fixed .reserva-wrap { margin-top: 60px; align-self: flex-start; }
/* En el aside el botón queda pegado al margen izquierdo, así que los offsets del home
   (que asumen el botón centrado en la página) mandaban dos fotos fuera de pantalla.
   Se redistribuyen hacia el aire que sí existe: a la derecha del botón, dentro de la columna. */
.case-fixed .cpk-1 { --x: -108px; --y: -80px; }
.case-fixed .cpk-2 { --x:  192px; --y: -72px; }
.case-fixed .cpk-3 { --x:  -96px; --y:  84px; }
.case-fixed .cpk-4 { --x:  232px; --y:   8px; }
.case-fixed .cpk-5 { --x:  108px; --y:  92px; }

/* ═══════════════════════════════════════════════════════════════
   PREMIO · Sello de Buen Diseño Argentino (Greta, 14.ª edición)
   .award  = tarjeta clickeable que abre el certificado
   .award-badge = marca estática (dentro de cards que ya son <a>)
   .award-lb = visor del certificado
   ═══════════════════════════════════════════════════════════════ */
.award {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid rgba(13,13,14,0.22); border-radius: 10px;
  padding: 16px 18px; background: #fff;
  text-decoration: none; color: var(--tinta); cursor: pointer;
  text-align: left; font: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.award:hover, .award:focus-visible { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); outline: none; }
.award-mark { width: 108px; height: auto; flex: none; display: block; }
.award-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.award-txt b { font-weight: 500; font-size: var(--t-small); line-height: 1.4; }
.award-txt span { font-family: var(--font-mono); font-size: var(--t-meta); color: rgba(13,13,14,0.5); letter-spacing: 0.02em; }
.award-txt .award-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--font-mono); font-size: var(--t-meta); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta); }
.award-txt .award-cta svg { transition: transform 0.2s; }
.award:hover .award-cta svg { transform: translateX(4px); }

/* marca estática, para las cards de proyecto (que ya son un <a>) */
.award-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--font-mono); font-size: var(--t-meta); color: rgba(13,13,14,0.55); letter-spacing: 0.02em; }
.award-badge img { width: 72px; height: auto; display: block; }

/* visor */
.award-lb { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(13,13,14,0.9); opacity: 0; pointer-events: none; transition: opacity 0.24s ease; }
.award-lb.open { opacity: 1; pointer-events: auto; }
.award-lb-fig { display: flex; flex-direction: column; gap: 12px; align-items: center; max-width: 100%; }
.award-lb img { display: block; max-width: min(1040px, 92vw); max-height: 80vh; width: auto; height: auto; background: #fff; }
.award-lb-fallback { background: #fff; padding: 32px 36px; max-width: 560px; border-radius: 10px; }
.award-lb-fallback p { font-size: var(--t-body); line-height: 1.6; }
.award-lb-cap { font-family: var(--font-mono); font-size: var(--t-meta); color: rgba(255,255,255,0.72); letter-spacing: 0.02em; text-align: center; }
.award-lb-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; color: #fff; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.award-lb-close:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
body.award-open { overflow: hidden; }

@media (max-width: 700px) {
  .award { flex-direction: column; align-items: flex-start; gap: 12px; }
  .award-lb { padding: 16px; }
  .award-lb-close { top: 12px; right: 12px; }
}