/* =============================================================
   PEPINK — Estudio de Diseño & Marketing
   Single stylesheet. Organized by sections.
   ============================================================= */

/* =============================================================
   0. Fonts (self-hosted)
   ============================================================= */
@font-face { font-family: "Satoshi"; src: url("assets/fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("assets/fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("assets/fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("assets/fonts/Satoshi-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
/* Comico sin fallback .woff: todo navegador que corre este sitio soporta woff2
   desde 2016. El .woff eran 393 KB en el deploy que nadie llegaba a descargar. */
@font-face { font-family: "Comico"; src: url("assets/fonts/Comico-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* Brand palette (Pantone-derived) */
  --blue:   #2b62d6;
  --purple: #7c3f97;
  --red:    #e63e30;
  --yellow: #f5a623;

  --blue-soft:   #dfe8fb;
  --purple-soft: #ecdff2;
  --red-soft:    #fbe0dc;
  --yellow-soft: #fdeecd;

  /* Neutrals */
  --ink:    #16171c;
  --ink-2:  #40434e;
  --cream:  #fffcf6;
  --paper:  #ffffff;
  --line:   #e7e2d7;

  /* Semantic */
  --bg:     var(--cream);
  --text:   var(--ink);
  --accent: var(--blue);

  /* Type */
  --display: "Comico", "Trebuchet MS", sans-serif;   /* títulos y frases */
  --sans:    "Satoshi", system-ui, sans-serif;        /* párrafos y texto */
  --mono:    "Satoshi", system-ui, sans-serif;        /* micro-etiquetas */

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --radius: 28px;
  --radius-lg: 44px;
  --maxw: 1320px;

  /* Easings */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  font-family: var(--sans);
  font-size: clamp(1rem, 0.55vw + 0.9rem, 1.075rem);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul { list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 800;
  text-wrap: balance;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
/* Títulos de sección: Satoshi (intercambio con los kickers, que pasan a Comico) */
.section-title,
.page-hero h1,
.proj-title,
.cta-band h2,
.contact-aside h2,
.proj-block h2 {
  font-family: var(--sans);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
::selection { background: var(--yellow); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* =============================================================
   3. Utilities
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .7rem 1.1rem; background: var(--ink); color: var(--cream);
  z-index: 9999; border-radius: 12px; font-weight: 700;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.kicker {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: inline-block;
}

/* =============================================================
   4. Reveal system (defensive)
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Defensive: split elements must never be stuck invisible */
.reveal[data-split] { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

.split-word {
  display: inline-block;
  transform: translateY(105%) rotate(3deg);
  opacity: 0;
  transition: transform .9s var(--ease-out), opacity .6s var(--ease-out);
}
.is-visible .split-word { transform: none; opacity: 1; }

/* Text disperse — letras que se dispersan al hover */
.disperse { display: inline-block; white-space: nowrap; cursor: default; }
.disperse-char {
  display: inline-block;
  transition: transform .55s var(--ease-out), opacity .55s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: transform;
}
.disperse:hover .disperse-char:not(.is-space) {
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0));
  opacity: 0.7;
}

/* =============================================================
   5. Components
   ============================================================= */
/* Buttons */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.7rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: 100px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .35s var(--ease-out);
  will-change: transform;
}
.btn:hover { box-shadow: 0 14px 34px -14px rgba(22,23,28,.55); }
.btn .btn-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--yellow);
  transition: transform .5s var(--ease-bounce);
}
.btn:hover .btn-dot { transform: scale(1.9); }
.btn--blue   { --btn-bg: var(--blue); }
.btn--red    { --btn-bg: var(--red); }
.btn--ghost  {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border: 2px solid var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--lg { padding: 1.15rem 2.1rem; font-size: 1.1rem; }
/* WhatsApp: el mismo verde que ya usa el ícono de la lista de contacto, para
   que se reconozca el canal antes de leer la etiqueta. */
.btn--wa { --btn-bg: #1ebe57; --btn-fg: #fff; }
.btn--wa:hover { box-shadow: 0 14px 34px -14px rgba(30, 190, 87, .75); }
.btn .wa-glyph { width: 22px; height: 22px; flex-shrink: 0; }

/* Icon button (Instagram) */
.btn-icon {
  width: 56px; height: 56px; padding: 0;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  color: #fff; flex-shrink: 0;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  will-change: transform;
}
.btn-icon:hover { transform: translateY(-4px) rotate(-6deg); box-shadow: 0 14px 30px -12px rgba(188, 24, 136, .6); }
.btn-icon svg { width: 26px; height: 26px; }

/* Pills / tags */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1.5px solid var(--line);
  color: var(--ink-2);
  background: var(--paper);
}

/* Section head */
.section {
  padding-block: clamp(4.5rem, 10vw, 9rem);
  position: relative;
}
.section-head {
  display: grid;
  gap: 1.1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: none;
}
.section-title {
  font-size: clamp(1.9rem, 5.4vw, 4.4rem);
  letter-spacing: -0.03em;
  text-wrap: pretty;
}
.section-title em {
  font-style: normal;
  color: var(--accent);
}
.section-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--ink-2);
  max-width: 46ch;
}

/* =============================================================
   6. Navigation
   ============================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem var(--gutter);
  transition: background .4s var(--ease-out), box-shadow .4s var(--ease-out), padding .4s var(--ease-out);
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 1px 0 var(--line);
  padding-block: 0.6rem;
}
/* min-height 44px: el logo es un link y con la imagen a 26px de alto el area
   para tocarlo quedaba en 26. La barra mide 65px, asi que agrandar el area no
   la estira ni mueve el logo (va centrado). */
.nav-logo { display: flex; align-items: center; justify-self: start; min-height: 44px; }
.nav-logo img { height: 36px; width: auto; transition: height .4s var(--ease-out); }
.nav.is-scrolled .nav-logo img { height: 30px; }
.nav-links {
  display: none;
  align-items: center;
  justify-self: center;
  gap: 0.4rem;
}
.nav-links a {
  padding: 0.55rem 0.95rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--ink-2);
  transition: color .3s var(--ease-out), background .3s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.nav-right { display: flex; align-items: center; justify-self: end; gap: 0.7rem; }
.nav-cta { display: none; }

/* Mobile menu */
.nav-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--ink);
  align-items: center;
}
.nav-burger span {
  width: 20px; height: 2px; background: var(--cream);
  transition: transform .4s var(--ease-out), opacity .3s var(--ease-out);
}
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 890;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  padding: var(--gutter);
  clip-path: circle(0% at calc(100% - 46px) 40px);
  /* visibility (y no solo clip-path) es lo que saca al menú cerrado del orden
     de tabulación y del árbol de accesibilidad. Con clip-path solo, sus cuatro
     links seguían siendo enfocables: el usuario de teclado tabulaba y el anillo
     de foco desaparecía de la pantalla. El delay de .6s en el cierre deja que
     la animación del círculo termine antes de esconderlo. */
  visibility: hidden;
  transition: clip-path .6s var(--ease-out), visibility 0s linear .6s;
  pointer-events: none;
}
body.menu-open .mobile-menu {
  clip-path: circle(150% at calc(100% - 46px) 40px);
  pointer-events: auto;
  visibility: visible;
  transition: clip-path .6s var(--ease-out), visibility 0s; /* al abrir, sin delay */
}
/* Con el menú a pantalla completa, el fondo no se scrollea. Mismo criterio que
   `body.lb-open` para el lightbox. */
body.menu-open { overflow: hidden; }
.mobile-menu a {
  font-family: var(--sans);
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  padding-block: 0.3rem;
  color: var(--cream);
  transition: color .3s var(--ease-out), transform .3s var(--ease-out);
}
.mobile-menu a:hover { color: var(--yellow); transform: translateX(14px); }
.mobile-menu .mm-foot {
  margin-top: 2rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--cream) 60%, transparent);
}

/* =============================================================
   7. Hero
   ============================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 8rem;
  padding-bottom: 3rem;
  overflow: clip;
}
.hero-shader {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  pointer-events: none;
}
/* Fallback si el navegador no soporta WebGL */
.hero-shader.no-gl {
  background:
    radial-gradient(28% 42% at 78% 26%, rgba(43, 98, 214, 0.85), transparent 70%),
    radial-gradient(24% 36% at 62% 66%, rgba(43, 98, 214, 0.7), transparent 70%),
    radial-gradient(18% 28% at 90% 60%, rgba(43, 98, 214, 0.6), transparent 70%),
    radial-gradient(14% 22% at 48% 34%, rgba(43, 98, 214, 0.45), transparent 70%);
  filter: blur(4px);
}
.hero-blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.9;
  mix-blend-mode: multiply;
  will-change: transform;
}
.blob svg { width: 100%; height: 100%; }
.blob-1 { width: 30vw; max-width: 340px; aspect-ratio: 1; top: 8%; left: -4%; color: var(--blue); }
.blob-2 { width: 26vw; max-width: 300px; aspect-ratio: 1; top: 44%; right: -3%; color: var(--red); }
.blob-3 { width: 20vw; max-width: 230px; aspect-ratio: 1; bottom: 4%; left: 22%; color: var(--yellow); }
.blob-4 { width: 16vw; max-width: 200px; aspect-ratio: 1; top: 14%; right: 24%; color: var(--purple); }

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
  padding: 0.5rem 1rem 0.5rem 0.55rem;
  border-radius: 100px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-eyebrow .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--red);
  animation: pulse 2.2s var(--ease-soft) infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: .55; }
}
.hero-title {
  font-size: clamp(2.3rem, 7.2vw, 5.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 16ch;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .c-blue { color: var(--blue); }
.hero-title .c-red { color: var(--red); }
.hero-title .c-purple { color: var(--purple); }
.hero-title .c-yellow { color: #e37e1f; } /* naranja "los márgenes" del hero */
.hero-lead {
  margin-top: 1.8rem;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  color: var(--ink-2);
  max-width: 40ch;
}
.hero-actions {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}
.hero-scroll {
  position: absolute;
  bottom: 1.6rem;
  right: var(--gutter);
  z-index: 3;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: none;
  align-items: center;
  gap: 0.6rem;
}
.hero-scroll .arrow {
  width: 1px; height: 34px;
  background: var(--ink-2);
  position: relative;
  overflow: hidden;
}
.hero-scroll .arrow::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ink);
  transform: translateY(-100%);
  animation: scrollLine 2s var(--ease-soft) infinite;
}
@keyframes scrollLine {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* =============================================================
   8. Cinta de trabajos
   ============================================================= */
/* La cinta ES el divisor: montada sobre el límite hero/Nosotros, en diagonal,
   por encima de las dos secciones (el mismo lugar y la misma función que tenía
   la frase "Exceder lo establecido", que era texto y no mostraba nada).

   Por qué 108vw y no 100vw: al rotar -1.6deg las esquinas se meten hacia
   adentro y quedarían dos cuñas de fondo en los bordes. El excedente las tapa.
   No genera scroll horizontal porque html/body van con overflow-x: clip. */
.ribbon {
  position: relative;
  z-index: 6;
  width: 108vw;
  margin-left: calc(50% - 54vw);
  margin-block: clamp(1.6rem, 4vw, 3.4rem);
  overflow: hidden;
  transform: rotate(-1.6deg);
  /* Las piezas de los extremos se desvanecen en vez de cortarse de golpe.
     El 14% no es decorativo: los primeros ~4vw de cada lado quedan fuera de la
     pantalla (la cinta mide 108vw), así que un degradado más corto se gastaría
     entero en el excedente invisible y el corte se seguiría viendo duro. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}

/* El track son los dos bloques idénticos, uno al lado del otro. Al llegar a
   -50% del ancho total ha avanzado exactamente un bloque, así que el reinicio
   cae en un fotograma idéntico al de arranque: el loop es invisible. */
.ribbon-track {
  display: flex;
  width: max-content;
  animation: ribbonSlide 55s linear infinite;
  will-change: transform;
}
@keyframes ribbonSlide { to { transform: translate3d(-50%, 0, 0); } }
/* Se frena para poder mirar (o clickear) una pieza. focus-within cubre el teclado. */
.ribbon:hover .ribbon-track,
.ribbon:focus-within .ribbon-track { animation-play-state: paused; }

/* padding-right = gap: así el ancho del bloque incluye la separación con el
   siguiente y el -50% del track cae justo. Si se saca, el loop pega un salto. */
.ribbon-set {
  --gap: clamp(0.55rem, 1.1vw, 1rem);
  display: flex;
  gap: var(--gap);
  padding: 0 var(--gap) 0 0;
  margin: 0;
  list-style: none;
}
.ribbon-item { flex: 0 0 auto; }
.ribbon-item a {
  display: block;
  /* El máximo (220px) es la mitad del ancho del archivo (440px): así en
     pantallas retina la pieza se ve a 2x y no se ablanda. */
  width: clamp(136px, 15.5vw, 220px);
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  background: var(--bg);
  box-shadow: 0 6px 18px rgba(20, 20, 30, 0.07);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.ribbon-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ribbon-item a:hover,
.ribbon-item a:focus-visible {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 14px 28px rgba(20, 20, 30, 0.16);
}
.ribbon-item a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* =============================================================
   9. About
   ============================================================= */
/* La cinta flota justo sobre la costura hero/Nosotros. Si acá hubiera un
   corte seco de --bg (#fffcf6) a --paper (#ffffff), la cinta parecería apoyada
   sobre una banda de otro color. Por eso Nosotros entra con un degradado:
   primera capa = crema→blanco en el borde superior, segunda = blanco sólido.
   Así la transición ocurre POR DEBAJO de la cinta y es imperceptible. */
.about {
  background:
    linear-gradient(to bottom, var(--bg), var(--paper)) top / 100% clamp(80px, 10vw, 160px) no-repeat,
    var(--paper);
}
.about-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}
.about-story p {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 34ch;
}
.about-story .hero-actions { margin-top: 2rem; align-items: center; }

.about-figure {
  position: relative;
}
.about-figure img { width: 100%; height: auto; }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 2.5rem;
}
.stat {
  background: var(--paper);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.stat .num {
  font-family: var(--sans);
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.stat:nth-child(2) .num { color: var(--red); }
.stat:nth-child(3) .num { color: var(--purple); }
.stat:nth-child(4) .num { color: var(--yellow); }
.stat .lbl { margin-top: 0.4rem; font-size: 0.95rem; color: var(--ink-2); }

/* Team */
.team {
  margin-top: clamp(3rem, 6vw, 5rem);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.member {
  position: relative;
}
.member-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream);
  border: 1.5px solid var(--line);
  margin-bottom: 0.9rem;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.member:hover .member-photo { transform: translateY(-6px); box-shadow: 0 22px 40px -26px rgba(22,23,28,.4); }
.member-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: bottom center;
  display: block;
  transition: transform .6s var(--ease-out);
}
.member:hover .member-photo img { transform: scale(1.04); }
.member h3 { font-size: 1.3rem; font-weight: 600; }
.member .role { font-family: var(--sans); font-size: 0.98rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-2); margin-top: 0.3rem; }

/* =============================================================
   10. Services
   ============================================================= */
.services-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.service {
  --svc: var(--blue);
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--svc);
  transition: transform .5s var(--ease-out);
}
.service:hover { transform: translateY(-6px); }
/* Cuadro sólido 100% del color de la paleta, sobre el fondo pastel */
.service .svc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  background: var(--svc);
  color: #fff;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}
.service h3 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin: 0.7rem 0 0.8rem;
}
.service p { color: var(--ink-2); max-width: 42ch; }
.service .svc-tags {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.service .svc-tags span {
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.service .svc-blob {
  position: absolute;
  top: -30%; right: -12%;
  width: 46%; aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.16;
  background: var(--svc);
  transition: transform .8s var(--ease-out);
}
.service:hover .svc-blob { transform: scale(1.2) rotate(20deg); }
/* Fondo pastel para legibilidad; --svc = color 100% para el cuadro */
.service--blue   { background: var(--blue-soft);   --svc: var(--blue); }
.service--red    { background: var(--red-soft);    --svc: var(--red); }
.service--purple { background: var(--purple-soft); --svc: var(--purple); }
.service--yellow { background: var(--yellow-soft); --svc: var(--yellow); }
.service--yellow .svc-num { color: var(--ink); }

/* =============================================================
   11. Works
   ============================================================= */
.works { background: var(--paper); }
.works-grid {
  display: grid;
  gap: 1rem;
}
.work-card {
  position: relative;
  display: block;
  isolation: isolate;
  transition: transform .55s var(--ease-out);
}
.work-card:hover { transform: translateY(-8px); }
.work-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.work-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.work-card:hover .work-thumb img { transform: scale(1.05); }
/* Portada de merch: mockup recortado (WebP con alfa) sobre superficie clara.
   El fuente es 4:5; en el marco 16/10 el cover encuadra la franja de remeras. */
.work-thumb--merch { background: var(--paper); }
/* Portada de logo/wordmark: se muestra entero sobre superficie clara, nunca
   recortado (a diferencia del cover por defecto de .work-thumb). */
.work-thumb--logo { background: var(--paper); }
.work-thumb--logo img { object-fit: contain; }
.proj-cover--logo { background: var(--paper); }
.proj-cover--logo img { object-fit: contain; }
/* Placeholder art when no photo */
.work-thumb--art { color: var(--paper); }
.work-thumb--art .wa-mark {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-align: center;
  mix-blend-mode: overlay;
  padding: 1rem;
  z-index: 1;
}
/* El blob es la misma animación en todas las portadas, pero parametrizado:
   cada tarjeta define su tamaño, forma, posición, duración, sentido y fase.
   Los valores por defecto reproducen el blob original. */
.work-thumb--art::before {
  content: "";
  position: absolute;
  width: var(--blob-size, 60%); aspect-ratio: 1;
  border-radius: var(--blob-shape, 45% 55% 62% 38% / 42% 47% 53% 58%);
  background: rgba(255,255,255,0.16);
  /* translate es propiedad aparte de transform: desplaza el blob sin pisar
     el rotate() del keyframe. */
  translate: var(--blob-x, 0) var(--blob-y, 0);
  animation: blobSpin var(--blob-dur, 14s) linear infinite;
  animation-direction: var(--blob-dir, normal);
  /* Delay NEGATIVO: arranca la animación ya empezada, así las tarjetas no
     salen todas del mismo punto al cargar la página. */
  animation-delay: var(--blob-delay, 0s);
}
@keyframes blobSpin { to { transform: rotate(360deg); } }

/* Desfasaje por posición en la grilla. Duraciones deliberadamente sin
   múltiplos comunes (13/17/11/19/15/21) para que no vuelvan a sincronizarse:
   el ciclo conjunto tarda horas en repetirse. */
.works-grid .work-card:nth-child(6n + 1) .work-thumb--art::before {
  --blob-dur: 13s; --blob-delay: -2s;  --blob-dir: normal;
  --blob-size: 62%; --blob-x: -8%; --blob-y: 6%;
  --blob-shape: 45% 55% 62% 38% / 42% 47% 53% 58%;
}
.works-grid .work-card:nth-child(6n + 2) .work-thumb--art::before {
  --blob-dur: 17s; --blob-delay: -9s;  --blob-dir: reverse;
  --blob-size: 54%; --blob-x: 10%; --blob-y: -5%;
  --blob-shape: 60% 40% 35% 65% / 55% 62% 38% 45%;
}
.works-grid .work-card:nth-child(6n + 3) .work-thumb--art::before {
  --blob-dur: 11s; --blob-delay: -5s;  --blob-dir: normal;
  --blob-size: 68%; --blob-x: 5%; --blob-y: 11%;
  --blob-shape: 38% 62% 51% 49% / 63% 36% 64% 37%;
}
.works-grid .work-card:nth-child(6n + 4) .work-thumb--art::before {
  --blob-dur: 19s; --blob-delay: -13s; --blob-dir: reverse;
  --blob-size: 58%; --blob-x: -12%; --blob-y: -8%;
  --blob-shape: 52% 48% 43% 57% / 36% 58% 42% 64%;
}
.works-grid .work-card:nth-child(6n + 5) .work-thumb--art::before {
  --blob-dur: 15s; --blob-delay: -7s;  --blob-dir: normal;
  --blob-size: 64%; --blob-x: 9%; --blob-y: 8%;
  --blob-shape: 63% 37% 57% 43% / 47% 52% 48% 53%;
}
.works-grid .work-card:nth-child(6n + 6) .work-thumb--art::before {
  --blob-dur: 21s; --blob-delay: -3s;  --blob-dir: reverse;
  --blob-size: 52%; --blob-x: -6%; --blob-y: -11%;
  --blob-shape: 41% 59% 66% 34% / 58% 43% 57% 42%;
}
.work-thumb--blue   { background: linear-gradient(135deg, var(--blue), #1c3f9e); }
.work-thumb--red    { background: linear-gradient(135deg, var(--red), #a3251b); }
.work-thumb--purple { background: linear-gradient(135deg, var(--purple), #4e2560); }
.work-thumb--yellow { background: linear-gradient(135deg, var(--yellow), #d17e10); }
.work-thumb--ink    { background: linear-gradient(135deg, #2c2f3a, var(--ink)); }
.work-thumb--mix    { background: linear-gradient(135deg, var(--blue), var(--purple) 55%, var(--red)); }

.work-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem 0.3rem 0.2rem;
}
.work-meta h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 700;
}
.work-meta .cat {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  white-space: nowrap;
}
.work-arrow {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  display: grid;
  place-items: center;
  transform: scale(0) rotate(-40deg);
  transition: transform .5s var(--ease-bounce);
  z-index: 2;
}
.work-card:hover .work-arrow { transform: scale(1) rotate(0); }

/* Grupos por servicio en trabajos.html: el encabezado ordena la grilla sin
   meter un clic extra, y su link mantiene viva la página del servicio.
   Además arregla el salto h1 -> h3 que tenía esta página: ahora hay h2. */
.works-group + .works-group {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  padding-top: clamp(2.6rem, 5vw, 4rem);
  border-top: 1.5px solid var(--line);
}
.works-group-t {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.2rem;
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
}
.works-group-t a {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1.5px solid var(--line);
  padding-bottom: 2px;
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.works-group-t a:hover { color: var(--blue); border-color: var(--blue); }

/* =============================================================
   12. CTA band
   ============================================================= */
.cta-band {
  background: #000;
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(2.8rem, 7vw, 6rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-block: clamp(2rem, 5vw, 3rem);
}
.cta-band h2 {
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  color: var(--cream);
}
.cta-band h2 em { font-style: normal; color: var(--yellow); }
.cta-band p { margin: 1.2rem auto 2rem; max-width: 40ch; color: color-mix(in srgb, var(--cream) 74%, transparent); }
/* Sin bajada, el aire entre la pregunta y el boton lo ponia el margin del <p>.
   El selector adyacente lo repone solo cuando el boton sigue al titulo, asi que
   si algun bloque vuelve a llevar bajada no se suman los dos espacios. */
.cta-band h2 + .btn { margin-top: clamp(2rem, 4vw, 2.8rem); }
.cta-band .btn { --btn-bg: var(--cream); --btn-fg: var(--ink); }
.cta-band .cta-blob { display: none; }

/* =============================================================
   13. Contact
   ============================================================= */
.contact-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}
.contact-aside h2 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
}
.contact-aside h2 em { font-style: normal; color: var(--red); }
.contact-aside .lead { margin-top: 1rem; color: var(--ink-2); max-width: 34ch; }
.contact-list { margin-top: 2rem; display: grid; gap: 1rem; }
.contact-list a, .contact-list span {
  display: flex; align-items: center; gap: 0.8rem;
  font-size: 1.1rem; font-weight: 600;
}
.contact-list .ci {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue);
  flex-shrink: 0;
}
.contact-list .ci svg { width: 20px; height: 20px; }
.contact-list .ci--wa { background: #dcf7e6; color: #1ebe57; }
.contact-list .ci--ig { background: #fbe3ef; color: #c81f7a; }
.contact-list .ci--loc { background: var(--yellow-soft); color: #c07d0e; }
.socials { margin-top: 2rem; display: flex; gap: 0.6rem; }
.socials a {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid; place-items: center;
  transition: background .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out);
}
.socials a:hover { background: var(--ink); color: var(--cream); transform: translateY(-4px); }

.form {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.8rem);
}
.field { margin-bottom: 1.2rem; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  margin-bottom: 0.5rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.95rem 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--cream);
  font: inherit;
  color: var(--ink);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-soft);
}
.form .btn { width: 100%; justify-content: center; }
.form-note { margin-top: 1rem; font-size: 0.85rem; color: var(--ink-2); text-align: center; }
.form-success {
  display: none;
  text-align: center;
  padding: 2rem 1rem;
}
.form.is-sent .form-body { display: none; }
.form.is-sent .form-success { display: block; }
.form-success .fs-emoji { font-size: 3rem; }
.form-success h3 { font-size: 1.8rem; margin: 0.6rem 0; }
.form-success p { color: var(--ink-2); }
.form-success strong { color: var(--ink); }

/* Red de contención: WhatsApp no siempre abre (desktop sin sesión iniciada,
   webview capado). Acá el mensaje se puede copiar y el mail queda a mano, así
   nadie se va con las manos vacías. */
.wa-fallback {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1.5px solid var(--line);
  display: grid;
  justify-items: center;
  gap: 0.8rem;
}
.wa-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
/* Gana sobre `.form .btn { width: 100% }` por orden, no por especificidad:
   estos son botones secundarios y van al ancho de su texto. */
.wa-fallback .btn { width: auto; font-size: 0.95rem; padding: 0.75rem 1.4rem; }
.wa-fallback-t { font-size: 0.9rem; color: var(--ink-2); }
.wa-fallback-t a { text-decoration: underline; }

/* =============================================================
   14. Footer
   ============================================================= */
.footer {
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.footer-top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 16%, transparent);
}
/* width: auto es obligatorio, no decorativo. El <img> ahora declara width y
   height reales (1366x768) y ese atributo actúa como si fuera width: 1366px.
   Con height: 52px y sin width, el logo saldría estirado a lo ancho de la
   columna. Igual que .nav-logo img, que ya lo tenía por el mismo motivo. */
.footer-brand img { height: 52px; width: auto; filter: none; }
.footer-brand p { margin-top: 1rem; color: color-mix(in srgb, var(--cream) 66%, transparent); max-width: 34ch; }
.footer-col h4 {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--yellow);
  margin-bottom: 1rem;
}
.footer-col a {
  display: block;
  /* 0.55rem y no 0.35rem: con el interlineado da 44 px de alto, que es el
     mínimo cómodo para tocar con el dedo. Antes quedaban en 38 px. No cambia
     nada visualmente salvo un poco más de aire entre links. */
  padding-block: 0.6rem;
  color: color-mix(in srgb, var(--cream) 80%, transparent);
  transition: color .3s var(--ease-out), transform .3s var(--ease-out);
}
.footer-col a:hover { color: var(--cream); transform: translateX(6px); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--cream) 60%, transparent);
}
.footer-big {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.9rem, 6.5vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--cream);
  margin-top: 2.6rem;
  text-align: center;
  overflow: hidden;
}
.footer-big em { font-style: normal; color: var(--yellow); }

/* =============================================================
   15. Cursor
   ============================================================= */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .3s var(--ease-out), width .3s var(--ease-out), height .3s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out);
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor.is-ready { opacity: 1; }
.cursor.is-hover {
  width: 64px; height: 64px;
  background: var(--cream);
  border-color: var(--cream);
}
.cursor-label {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  padding: 0.3rem 0.7rem;
  background: var(--ink);
  color: var(--cream);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -160%) scale(.7);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  white-space: nowrap;
  will-change: transform;
}
.cursor-label.is-show { opacity: 1; transform: translate(-50%, -160%) scale(1); }

/* =============================================================
   16. Splash
   ============================================================= */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: var(--cream);
  display: grid;
  place-items: center;
  animation: splashSafety .01s 4.5s forwards;
}
.splash-logo-img {
  width: min(300px, 62vw);
  height: auto;
  animation: splashPop .8s var(--ease-bounce) both;
}
@keyframes splashPop {
  from { opacity: 0; transform: scale(.82) translateY(12px); }
  to { opacity: 1; transform: none; }
}
.splash.is-out {
  animation: splashOut .8s var(--ease-in) forwards;
}
@keyframes splashSafety {
  to { opacity: 0; pointer-events: none; visibility: hidden; }
}
@keyframes splashOut {
  to { opacity: 0; pointer-events: none; visibility: hidden; transform: scale(1.04); }
}
.splash-inner { text-align: center; }
.splash-logo {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3rem, 12vw, 7rem);
  color: var(--cream);
  letter-spacing: -0.03em;
  display: flex;
}
.splash-logo span {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%);
  animation: splashChar .6s var(--ease-out) forwards;
}
.splash-logo .dot-c { color: var(--yellow); }
@keyframes splashChar {
  to { opacity: 1; transform: none; }
}
.splash-bar {
  width: min(240px, 60vw);
  height: 3px;
  margin: 1.6rem auto 0;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 3px;
  overflow: hidden;
}
.splash-bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: var(--blue);
  transform: translateX(-100%);
  animation: splashLoad 1.6s var(--ease-soft) .3s forwards;
}
@keyframes splashLoad { to { transform: translateX(0); } }

/* =============================================================
   17. Detail pages (proyecto)
   ============================================================= */
.proj-hero {
  padding-top: clamp(7rem, 14vw, 10rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
/* Mismo estilo que .btn (píldora sólida): antes era un link de texto en mono.
   Conserva el micro-gesto de la flecha (el gap se abre en hover). */
.proj-back {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.7rem;
  background: var(--ink);
  color: var(--cream);
  border-radius: 100px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), gap .3s var(--ease-out);
  will-change: transform;
}
.proj-back:hover { gap: 0.9rem; box-shadow: 0 14px 34px -14px rgba(22, 23, 28, .55); }
/* En los heros, el kicker ("PORTAFOLIO", "SERVICIO", etc.) va DEBAJO del botón
   de volver, no al lado: como bloque, cae a su propia línea. */
.page-hero .kicker,
.proj-hero .kicker {
  display: block;
  margin-bottom: 1.3rem;
}
.proj-title {
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  letter-spacing: -0.035em;
}
.proj-tags { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.proj-cover {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 8;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.proj-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Marco vertical (9:16) para reels de video */
.reel-frame {
  /* Margen simétrico y con el mismo ritmo que .proj-gallery: sin el de abajo el
     video quedaba pegado al texto que seguía. */
  margin: clamp(2.5rem, 5vw, 4rem) auto;
  width: min(340px, 82vw);
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px -34px rgba(0, 0, 0, 0.55);
}
.reel-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Marco apaisado (16:9) para placas broadcast — el equivalente horizontal
   del .reel-frame de arriba. Va en grilla dentro de .video-grid. */
.video-grid {
  display: grid;
  gap: clamp(1.6rem, 3.5vw, 2.6rem);
  margin-block: clamp(2rem, 4vw, 3rem);
}
/* Cada pieza son 3 filas: título / video / epígrafe. */
.video-piece { display: grid; grid-template-rows: auto auto auto; }
.video-piece .piece-head { margin-bottom: 0.9rem; }
.video-piece p {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.video-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.5);
}
.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Insignia de reproducción para tarjetas de trabajo con video */
.work-play {
  position: absolute;
  bottom: 1.1rem;
  left: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  z-index: 2;
}

.proj-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-block: clamp(2.5rem, 5vw, 4rem);
}
.proj-fact { background: var(--bg); padding: 1.4rem; }
.proj-fact .k { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.proj-fact .v { font-family: var(--sans); font-weight: 700; font-size: 1.2rem; margin-top: 0.4rem; }
.proj-body {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  max-width: 62ch;
  margin-inline: auto;
}
.proj-block h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 1rem; }
.proj-block h2 em { font-style: normal; color: var(--accent); }
.proj-block p { font-size: 1.15rem; color: var(--ink-2); margin-bottom: 1rem; }
/* El reset global pone list-style:none, asi que la vineta la dibujamos nosotros
   con ::before para poder teñirla del color del proyecto. */
.proj-list {
  display: grid;
  gap: 0.7rem;
  margin: 1.2rem 0 0;
  padding: 0;
}
.proj-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.proj-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, var(--blue));
}
.proj-list li strong { color: var(--ink); font-weight: 700; }
.proj-gallery {
  display: grid;
  gap: 1.2rem;
  margin-block: clamp(2.5rem, 5vw, 4rem);
}
.proj-shot {
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  color: var(--paper);
  font-family: var(--display);
  font-size: 1.4rem;
  overflow: hidden;
}
.proj-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Galería de piezas verticales (fotos de vidrieras, gráfica aplicada) */
.proj-gallery--tall .proj-shot { aspect-ratio: 3 / 4; }
/* Galería apaisada 16:9 — para renders y frames que ya vienen en ese formato,
   así entran enteros en vez de recortarse contra el 4/3 por defecto. */
.proj-gallery--wide .proj-shot { aspect-ratio: 16 / 9; }
/* Galería de mockups con alfa (celulares, dispositivos): van contenidos, no
   recortados. El fuente ya viene ajustado a su contenido y llega en varias
   proporciones, así que el cover del .proj-shot le clipearía el dispositivo. */
.proj-gallery--mockup .proj-shot img { object-fit: contain; }
/* Celda de video dentro de una galería de fotos: el video es 9:16 y la celda
   3/4, así que va contenido —nunca recortado— sobre negro. Las bandas laterales
   leen como pantalla de celular y el video queda alineado con las fotos. */
.proj-shot--video {
  background: #000;
  /* display:block + posición absoluta del video: .proj-shot es grid con
     place-items:center, que NO estira al hijo. Con inset:0 la celda se llena
     siempre, sin depender de cómo se resuelva el alto porcentual. */
  display: block;
  position: relative;
}
.proj-shot--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* El badge va arriba: abajo chocaría con la barra de controles del video. */
.proj-shot--video .work-play {
  top: 1.1rem;
  bottom: auto;
  pointer-events: none;
}
/* Lookbook de merch: remeras recortadas (WebP con alfa) sobre superficie
   clara, con epígrafe. object-fit: cover porque el fuente ya es 4:5. */
.merch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.9rem, 2vw, 1.4rem);
  margin-block: clamp(2.5rem, 5vw, 4rem);
}
.merch-item { margin: 0; }
.merch-shot {
  aspect-ratio: 4 / 5;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.merch-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease-out);
}
.merch-item:hover .merch-shot img { transform: scale(1.04); }
.merch-item figcaption {
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.25;
}
.merch-item figcaption span {
  display: block;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ink-2);
}
@media (min-width: 700px) {
  .merch-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Imagen suelta a lo ancho, sin recorte (pantallas completas, board de piezas) */
.proj-figure {
  margin-block: clamp(2.5rem, 5vw, 4rem);
  border-radius: var(--radius);
  overflow: hidden;
}
.proj-figure img { width: 100%; height: auto; display: block; }
/* Subtítulo de pieza dentro de un caso con varias entregas */
.piece-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-bottom: 1.2rem;
}
/* Los títulos de pieza van en Satoshi, igual que los de sección. En 700 y con el
   tracking cerrado de los demás títulos Satoshi (el h2 usa 800: queda la jerarquía).
   Comico a 400 pesaba como un bold; con Satoshi 400 quedarían más flacos que el
   párrafo de abajo. Antes esto era un modificador .piece-head--sans sólo para Aura;
   ahora aplica a las tres páginas que usan .piece-head, así que va en la base. */
.piece-head h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  letter-spacing: -0.02em;
}
.piece-head .pill { flex-shrink: 0; }
.proj-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}

/* =============================================================
   17b. Piezas — bloques repetibles dentro del caso de un cliente.
   Cada <article class="pieza"> es un diseño independiente (una
   vidriera, una gráfica, un packaging…). Para sumar otro diseño
   se duplica el bloque; la grilla se acomoda sola.
   ============================================================= */
.piezas {
  display: grid;
  gap: clamp(3rem, 7vw, 5.5rem);
  margin-block: clamp(2rem, 4vw, 3rem);
}
.pieza-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: 0.8rem;
}
.pieza-head h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.005em;
}
.pieza-when {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-left: auto;
}
.pieza-desc {
  color: var(--ink-2);
  font-size: 1.08rem;
  max-width: 62ch;
  margin-bottom: clamp(1.3rem, 3vw, 1.9rem);
}
.pieza-shots { display: grid; gap: 1.2rem; }
.pieza-shots figure { margin: 0; }
.pieza-shots img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  background: var(--blue-soft);
}
.pieza-shots figcaption {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
/* Encuadres: elegir según la forma de la foto */
.shot-v img { aspect-ratio: 3 / 4; }
.shot-h img { aspect-ratio: 4 / 3; }
.shot-w img { aspect-ratio: 16 / 9; }
@media (min-width: 720px) {
  .pieza-shots--2 { grid-template-columns: repeat(2, 1fr); }
  .pieza-shots--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Mockups: respetan su proporción natural, sin recorte */
.mockup { margin: 0; }
.mockup img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}
/* Para PNG con transparencia: sin marco ni fondo, se apoya en el papel */
.mockup--flat img { border-radius: 0; background: none; }
.mockup figcaption {
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-align: center;
}

/* Works index page hero */
.page-hero {
  padding-top: clamp(6.5rem, 11vw, 8.5rem);
  padding-bottom: clamp(1.4rem, 3vw, 2.4rem);
}
.page-hero h1 {
  font-size: clamp(2.6rem, 9vw, 6rem);
  letter-spacing: -0.04em;
}
.page-hero h1 em { font-style: normal; color: var(--blue); }
.page-hero p { margin-top: 1.2rem; font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--ink-2); max-width: 44ch; }

/* =============================================================
   17c. Lightbox — las imágenes de los casos se abren enteras.
   El marcado lo inyecta main.js (initLightbox); acá sólo el look.
   ============================================================= */
img[data-lb] { cursor: zoom-in; }
img[data-lb]:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
body.lb-open { overflow: hidden; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(12, 12, 14, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s var(--ease-out), visibility .32s;
}
.lb.is-open { opacity: 1; visibility: visible; }

.lb-stage {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 100%;
  cursor: zoom-out;
}
.lb-img {
  display: block;
  max-width: min(1400px, 92vw);
  /* Descuenta el epígrafe y el contador para que nunca desborde el alto. */
  max-height: calc(100vh - 11rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9);
  transform: scale(0.97);
  transition: transform .32s var(--ease-out);
  cursor: default;
}
.lb.is-open .lb-img { transform: none; }

.lb-cap {
  max-width: 68ch;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}
.lb-count {
  position: absolute;
  top: clamp(1rem, 4vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}

.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.4); }
.lb-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.lb-btn[hidden] { display: none; }
.lb-close { top: clamp(1rem, 4vw, 2rem); right: clamp(1rem, 4vw, 2rem); font-size: 1.9rem; }
.lb-prev, .lb-next { top: 50%; margin-top: -23px; }
.lb-prev { left: clamp(0.6rem, 3vw, 2rem); }
.lb-next { right: clamp(0.6rem, 3vw, 2rem); }
.lb-prev:hover { transform: translateX(-3px); }
.lb-next:hover { transform: translateX(3px); }

/* En pantallas chicas las flechas van abajo, para no taparle la imagen. */
@media (max-width: 640px) {
  .lb-img { max-height: calc(100vh - 13rem); }
  .lb-prev, .lb-next { top: auto; bottom: 1.1rem; margin-top: 0; }
  .lb-cap { font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lb, .lb-img, .lb-btn { transition: none; }
  .lb-img { transform: none; }
}

/* =============================================================
   18. Responsive
   ============================================================= */
@media (min-width: 640px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .works-grid { grid-template-columns: repeat(2, 1fr); }
  .proj-gallery { grid-template-columns: repeat(2, 1fr); }
  .hero-scroll { display: flex; }
}
@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .proj-facts { grid-template-columns: repeat(4, 1fr); }
}
/* Galerías a 3 columnas: con el container en 1320px cada celda pasa de ~570px
   a ~374px. La idea es que las piezas se lean como conjunto y no de a una.
   El problema son las galerías cuya cantidad no divide por 3 (quedaría una
   pieza colgada sola en la última fila), así que las de 2 y 4 van de a dos con
   el ancho acotado — cada celda mide ~380px, prácticamente lo mismo que en la
   grilla de 3, y no se abre ningún hueco. */
@media (min-width: 900px) {
  .proj-gallery { grid-template-columns: repeat(3, 1fr); }
  .proj-gallery:has(> :nth-child(2):last-child),
  .proj-gallery:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 780px;
    margin-inline: auto;
  }
  /* Última fila con una sola pieza: va al medio, no colgada a la izquierda. */
  .proj-gallery > :last-child:nth-child(3n + 1) { grid-column: 2; }
  /* Los videos 16:9 se quedan en 2 columnas: a 374px las placas broadcast
     pierden legibilidad en la tipografía. Si la última fila queda impar, esa
     pieza se centra a media columna. */
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .video-grid > :last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
    max-width: calc(50% - 1.3rem);
    margin-inline: auto;
  }
}
@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-burger { display: none; }
  .about-grid { grid-template-columns: 1fr 1.1fr; align-items: center; }
  /* La columna de texto se estira a la altura de la imagen; el párrafo queda
     arriba (pegado al título) y los botones se anclan abajo, alineados con la
     base de la imagen grupal. */
  .about-grid.about-grid--lead { grid-template-columns: 0.72fr 1.28fr; align-items: stretch; }
  .about-grid--lead .about-story { display: flex; flex-direction: column; }
  .about-grid--lead .about-story .hero-actions { margin-top: auto; }
  .contact-grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(5, 1fr); }
  .work-thumb { aspect-ratio: 16 / 10; }
  /* Portafolio: 3 columnas (en la home queda en 2) */
  .works-grid--three { grid-template-columns: repeat(3, 1fr); }
  /* Las placas de video recién entran de a dos con ancho suficiente en desktop */
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  /* Con subgrid, título/video/epígrafe de las dos columnas comparten las mismas
     filas: si un título ocupa dos líneas, los videos NO se desalinean entre sí.
     Sin soporte, cada pieza queda como una caja independiente (el estado previo). */
  @supports (grid-template-rows: subgrid) {
    .video-piece { grid-row: span 3; grid-template-rows: subgrid; }
  }
}
@media (min-width: 1024px) {
  .contact-list-inline { display: flex; gap: 1.5rem; flex-wrap: wrap; }
}

@media (max-width: 539px) {
  .nav-logo img { height: 32px; }
  .nav.is-scrolled .nav-logo img { height: 26px; }
}

/* =============================================================
   18b. Solo celular (< 640px)
   El resto de la hoja es mobile-first con min-width, así que este bloque
   max-width es el único lugar donde vive el celular: nada de acá puede
   filtrarse a tablet (>= 640px) ni a desktop (>= 960px).
   ============================================================= */
@media (max-width: 639px) {

  /* --- 1. Equipo: el quinto integrante al centro ---------------------
     Somos 5 y en celular la grilla es de 2 columnas, así que el último
     (Peco) caía solo en la columna izquierda. Lo estiramos a las dos
     columnas y le devolvemos el ancho de una sola, centrado: queda al
     medio de su fila sin cambiar de tamaño respecto de los otros cuatro.
     (gap: 1rem → cada columna mide 50% - 0.5rem) */
  .team-grid .member:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 0.5rem);
    margin-inline: auto;
  }

  /* Servicios: en celular quedan en UNA columna a ancho completo, que es lo
     que ya hace la regla base (auto-fit/minmax(290px) colapsa a 1 col). Se
     probó pasarlos a 2×3 y el cliente prefirió las tarjetas grandes: no
     agregar overrides de .services-grid / .service acá. */

  /* --- 2. Portafolio: 2 columnas en celular -------------------------
     Aplica a las tres vistas que comparten .works-grid--three: la home
     (#trabajos), trabajos.html y las páginas servicio-*.html. Un servicio
     con una sola tarjeta (Modelado 3D, Merchandising) la estira a ancho
     completo para que no quede colgada a media columna. */
  .works-grid--three {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
  }
  .works-grid--three .work-card:only-child { grid-column: 1 / -1; }
  /* Título y contador apilados: de costado no entran a este ancho */
  .works-grid--three .work-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.6rem 0.15rem 0.2rem;
  }
  .works-grid--three .work-meta h3 { font-size: 0.95rem; line-height: 1.2; }
  /* 12 px es el piso: por debajo se vuelve incómodo de leer. Antes esto estaba
     en 0.64rem (10,2 px), el texto más chico de todo el sitio. Va con
     white-space normal porque a 12 px un rótulo como "VIDRIERAS & IDENTIDAD"
     ya no entra en media columna de 375 px: preferimos dos renglones legibles
     a uno solo que se desborde. El .work-meta de acá ya está apilado, así que
     partir en dos líneas no descoloca nada. */
  .works-grid--three .work-meta .cat {
    font-size: 0.75rem;
    white-space: normal;
    line-height: 1.3;
  }
  .works-grid--three .work-thumb--art .wa-mark { font-size: 1.1rem; padding: 0.5rem; }
  .works-grid--three .work-play {
    bottom: 0.55rem; left: 0.55rem;
    padding: 0.28rem 0.55rem;
    font-size: 0.75rem;
  }

  /* --- 3. Navegación entre casos: los dos botones en una fila ---------
     Con el nombre completo del servicio ("← Branding & Identidad") la
     fila no entra y el texto se parte en dos líneas. En celular el botón
     de volver muestra solo "← Volver" (el texto completo sigue en el DOM,
     así los lectores de pantalla anuncian el destino real) y achicamos un
     poco padding/tipografía para que "Siguiente caso" quede en una línea. */
  .proj-nav { gap: 0.6rem; }
  .proj-nav .btn {
    padding: 0.85rem 1.3rem;
    font-size: 0.95rem;
    white-space: nowrap;
  }
  .proj-nav .btn--ghost { font-size: 0; gap: 0; }
  .proj-nav .btn--ghost::before {
    content: "\2190\00A0Volver";
    font-size: 0.95rem;
    font-weight: 700;
  }
}

/* =============================================================
   19. Reduced motion — only intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blob, .cta-blob { animation: none !important; }
  .hero-eyebrow .dot,
  .hero-scroll .arrow::after { animation: none; }
  .work-thumb--art::before { animation: none; }
  /* La cinta deja de correr sola y se recorre a mano. Se esconde la copia:
     con la animación apagada sería una repetición visible de las mismas 12. */
  .ribbon { overflow-x: auto; scrollbar-width: thin; }
  .ribbon-track { animation: none; }
  .ribbon-set[aria-hidden] { display: none; }
}