/* ============================================================================
   Portafolio de Nicolás Díaz
   Un solo archivo, ordenado por secciones. Sin preprocesador y sin librerías.

   Criterio de color: fondo casi negro cálido y UN acento ámbar. Nada de
   degradados morado-azul de plantilla. El ámbar sólo aparece donde hay que
   mirar: acciones, números, la marca de sección y los datos pendientes.
   ============================================================================ */

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  /* Fondo y superficies */
  --bg:        #0a0908;
  --bg-2:      #110e0a;
  --superficie: rgba(255, 247, 235, 0.035);
  --superficie-2: rgba(255, 247, 235, 0.055);
  --borde:     rgba(255, 247, 235, 0.10);
  --borde-fuerte: rgba(240, 166, 56, 0.28);

  /* Tinta */
  --tinta:   #f4efe6;
  --tinta-2: #c2bbad;
  --tinta-3: #8f887c;

  /* El acento */
  --ambar:       #f0a638;
  --ambar-claro: #ffc470;
  --ambar-hondo: #b9761c;

  /* Tipografía */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Ritmo */
  --ancho: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --bloque: clamp(5rem, 12vw, 9.5rem);
  --radio: 18px;
  --radio-chico: 10px;

  /* Curvas */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Posición del puntero, la escribe main.js */
  --mx: 50%;
  --my: 22%;
}

/* ============================================================
   2. Reset y base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  tab-size: 2;
  /* El clip va TAMBIÉN acá, no sólo en el body. Con el body solo, el documento
     seguía midiendo 448 px de ancho en un teléfono de 390 —lo estiraba el
     resplandor del retrato, que se sale un 22% a cada lado— y el navegador
     abría la página al 87% para que entrara: toda la tipografía entraba más
     chica de lo diseñado. Con esto el ancho del documento es el de la pantalla
     y cualquier adorno que sobresalga se recorta en vez de encoger la página. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100dvh;
}

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; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.08; letter-spacing: -0.02em; font-weight: 500; }

::selection { background: var(--ambar); color: #17120a; }

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

/* ============================================================
   3. Utilidades
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  padding: .7rem 1.1rem; border-radius: var(--radio-chico);
  background: var(--ambar); color: #17120a; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

.mono {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Los datos que Nico todavía no confirmó. Tienen que cantar. */
.falta {
  color: var(--ambar);
  font-family: var(--mono);
  font-size: .8em;
  letter-spacing: .04em;
  border-bottom: 1px dashed var(--borde-fuerte);
  padding-bottom: 1px;
}
.falta-bloque {
  border-left: 2px solid var(--borde-fuerte);
  padding-left: 1rem;
  color: var(--tinta-2);
}
.falta-bloque strong { color: var(--ambar); font-family: var(--mono); font-size: .82em; letter-spacing: .04em; }

/* ============================================================
   4. Fondo vivo (tres capas fijas, todas decorativas)
   ============================================================ */
.fondo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, #16110b 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 45%);
}

/* El halo que sigue al ratón. */
.fondo-halo {
  position: absolute; inset: 0;
  background: radial-gradient(
    46rem circle at var(--mx) var(--my),
    rgba(240, 166, 56, 0.13),
    rgba(240, 166, 56, 0.04) 38%,
    transparent 68%
  );
}

/* La grilla sólo se ve alrededor del cursor: la máscara la recorta. */
.fondo-grilla {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 247, 235, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 247, 235, 0.16) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(22rem circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 45%, transparent 72%);
          mask-image: radial-gradient(22rem circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 45%, transparent 72%);
}

/* Grano: sin esto el degradado se ve plástico y se le notan las bandas. */
.fondo-grano {
  position: absolute; inset: 0;
  opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* En pantallas táctiles no hay cursor: el halo se queda quieto arriba y la
   grilla se apaga, que si no queda un círculo pegado en el medio. */
@media (hover: none), (pointer: coarse) {
  .fondo-grilla { display: none; }
  .fondo-halo {
    background: radial-gradient(38rem circle at 70% 8%, rgba(240,166,56,.14), transparent 66%);
  }
}

/* El contenido va SIEMPRE por encima del fondo. */
main, .pie { position: relative; z-index: 1; }

/* ============================================================
   5. Barra superior
   ============================================================ */
.barra {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out),
              backdrop-filter .4s var(--ease-out);
}
.barra.pegada {
  background: rgba(10, 9, 8, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--borde);
}

.marca { display: flex; align-items: baseline; gap: .6rem; margin-right: auto; }
.marca-sigla {
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .12em; color: var(--ambar);
  border: 1px solid var(--borde-fuerte); border-radius: 6px;
  padding: .28rem .42rem; line-height: 1;
}
.marca-nombre { font-family: var(--display); font-size: 1.05rem; letter-spacing: -0.01em; }

.nav { display: flex; gap: 1.6rem; }
.nav a {
  position: relative; font-size: .92rem; color: var(--tinta-2);
  transition: color .3s var(--ease-out);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px;
  background: var(--ambar); transition: right .35s var(--ease-out);
}
.nav a:hover, .nav a.activo { color: var(--tinta); }
.nav a:hover::after, .nav a.activo::after { right: 0; }

.hamburguesa {
  display: none; width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid var(--borde); align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.hamburguesa-linea {
  display: block; width: 17px; height: 1.5px; background: var(--tinta);
  transition: transform .35s var(--ease-out), opacity .25s;
}
.hamburguesa[aria-expanded="true"] .hamburguesa-linea:first-child { transform: translateY(3.25px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] .hamburguesa-linea:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* ============================================================
   6. Botones y piezas chicas
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .9rem 1.5rem; border-radius: 999px;
  background: var(--ambar); color: #17120a;
  font-weight: 700; font-size: .95rem; letter-spacing: -0.01em;
  border: 1px solid var(--ambar);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
              background .3s var(--ease-out);
}
.btn:hover {
  background: var(--ambar-claro);
  transform: translateY(-2px);
  box-shadow: 0 12px 34px -12px rgba(240, 166, 56, .6);
}
.btn:active { transform: translateY(0); }

.btn-fantasma {
  background: transparent; color: var(--tinta);
  border-color: var(--borde);
}
.btn-fantasma:hover {
  background: var(--superficie-2); color: var(--tinta);
  border-color: var(--borde-fuerte); box-shadow: none;
}

.btn-chico { padding: .58rem 1.1rem; font-size: .88rem; }

.ico-flecha {
  width: 16px; height: 16px; fill: none;
  stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--ease-out);
}
.btn:hover .ico-flecha, .enlace:hover .ico-flecha { transform: translate(2px, -2px); }
.btn-fantasma:hover .ico-flecha { transform: translateY(2px); }

.enlace {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--ambar); font-weight: 600; font-size: .95rem;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.enlace:hover { border-bottom-color: var(--ambar); }

.chip {
  align-self: flex-start; white-space: nowrap;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-2);
  border: 1px solid var(--borde); border-radius: 999px;
  padding: .32rem .7rem;
}
.chip-vivo { color: #7fd6a2; border-color: rgba(127, 214, 162, .32); }
.chip-vivo::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #7fd6a2; margin-right: .45rem; vertical-align: middle;
  animation: latido 2.6s ease-in-out infinite;
}
.chip-obra { color: var(--ambar); border-color: var(--borde-fuerte); }

@keyframes latido {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(127, 214, 162, .5); }
  50%      { opacity: .55; box-shadow: 0 0 0 5px rgba(127, 214, 162, 0); }
}

/* ============================================================
   7. Estructura de sección
   ============================================================ */
.seccion {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: var(--bloque) var(--gutter);
}

.seccion-cabeza { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 46rem; }

.seccion-num {
  display: block; color: var(--ambar); margin-bottom: .9rem;
}
.seccion-num::after {
  content: ""; display: inline-block; width: 2.5rem; height: 1px;
  background: var(--borde-fuerte); margin-left: .8rem; vertical-align: middle;
}

.seccion-titulo {
  font-family: var(--display);
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  font-weight: 400;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}

.seccion-bajada {
  margin-top: 1rem; color: var(--tinta-2);
  font-size: clamp(1rem, 1.6vw, 1.12rem); max-width: 34rem;
}

/* ============================================================
   8. Hero
   ============================================================ */
.hero {
  position: relative;
  max-width: var(--ancho); margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 5.5rem) var(--gutter) clamp(4rem, 9vw, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  min-height: min(88svh, 900px);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tinta-3);
}
.punto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ambar);
  box-shadow: 0 0 0 0 rgba(240, 166, 56, .45);
  animation: latido-ambar 3s ease-in-out infinite;
}
@keyframes latido-ambar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 166, 56, .45); }
  50%      { box-shadow: 0 0 0 7px rgba(240, 166, 56, 0); }
}

.hero-nombre {
  margin: 1.4rem 0 .9rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3.2rem, 11vw, 6.6rem);
  line-height: .92;
  letter-spacing: -0.035em;
  font-variation-settings: "SOFT" 30, "WONK" 1;
}
.hero-nombre .linea { display: block; overflow: hidden; }
.hero-nombre .linea > span { display: block; }
.hero-nombre .linea:last-child > span {
  font-style: italic;
  color: transparent;
  background: linear-gradient(96deg, var(--tinta) 12%, var(--ambar-claro) 52%, var(--ambar-hondo) 96%);
  -webkit-background-clip: text; background-clip: text;
}

.hero-roles {
  font-family: var(--mono); font-size: clamp(.72rem, 1.5vw, .82rem);
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2);
}
.hero-roles i { color: var(--ambar); font-style: normal; padding: 0 .35rem; }

.hero-frase {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 1.2rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 300; line-height: 1.24; letter-spacing: -0.02em;
  color: var(--tinta);
}
.hero-frase em { font-style: italic; color: var(--ambar); }

.hero-sub {
  max-width: 34rem; color: var(--tinta-2); font-size: 1.02rem;
}

.hero-acciones { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

/* --- El retrato --- */
.hero-retrato { display: flex; justify-content: center; }

.retrato {
  position: relative;
  width: min(100%, 25rem);
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out);
}
.retrato picture { display: block; }
.retrato img {
  width: 100%;
  aspect-ratio: 9 / 11;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 200px 200px var(--radio) var(--radio);
  border: 1px solid var(--borde);
  /* El tono NO se hace acá. Va horneado en el archivo, con
     scripts/foto-portfolio.js: la foto sale de una oficina blanca y contra
     el fondo casi negro brillaba como un cartel. Se resolvió con una viñeta
     centrada en la cara, que se pudo mirar y corregir; un filter de CSS
     habría sido a ciegas. El CSS sólo levanta la foto al pasar el mouse. */
  transition: filter .6s var(--ease-out);
}
.retrato:hover img { filter: brightness(1.1) saturate(1.12); }

/* El aro ámbar detrás, apenas corrido: da profundidad sin tapar la cara. */
.retrato-aro {
  position: absolute; inset: -1.4rem -1.4rem 2.5rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 220px 220px var(--radio) var(--radio);
  transform: translateZ(-40px) rotate(-1.6deg);
  pointer-events: none;
}
.retrato::after {
  content: ""; position: absolute; inset: -18% -22% -10%;
  background: radial-gradient(closest-side, rgba(240, 166, 56, .18), transparent 72%);
  z-index: -1; pointer-events: none;
}

.retrato-pie {
  display: flex; flex-direction: column; gap: .2rem;
  margin-top: 1.1rem; padding-left: .2rem;
  font-size: .82rem; color: var(--tinta-3); line-height: 1.4;
}
.retrato-pie .mono { color: var(--ambar); }

.hero-baja {
  position: absolute; left: 50%; bottom: 1.2rem; translate: -50% 0;
  width: 24px; height: 44px; display: grid; place-items: center;
}
.hero-baja-linea {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, transparent, var(--borde-fuerte), transparent);
  background-size: 100% 200%;
  animation: correr 2.6s linear infinite;
}
@keyframes correr {
  from { background-position: 0 -100%; }
  to   { background-position: 0 100%; }
}

/* ============================================================
   9. Banda de cifras
   ============================================================ */
.cifras {
  border-block: 1px solid var(--borde);
  background: var(--superficie);
}
.cifras-grilla {
  max-width: var(--ancho); margin-inline: auto;
  padding: clamp(2rem, 4vw, 3rem) var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
}
.cifra { display: flex; flex-direction: column; gap: .45rem; }
.cifra + .cifra { border-left: 1px solid var(--borde); padding-left: clamp(1.2rem, 3vw, 2.5rem); }

.cifra-valor {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 400; line-height: 1;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}
.cifra-valor.falta {
  font-family: var(--mono);
  font-size: clamp(.72rem, 1.6vw, .86rem);
  line-height: 1.4; align-self: flex-start;
  border-bottom-width: 1px;
}
.cifra-etiqueta { font-size: .88rem; color: var(--tinta-3); }

/* ============================================================
   10. Historia
   ============================================================ */
.historia {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.historia-cuerpo { display: flex; flex-direction: column; gap: 1.4rem; }
.historia-cuerpo p { color: var(--tinta-2); font-size: 1.03rem; max-width: 40rem; }

.parrafo-guia {
  font-family: var(--display) !important;
  font-size: clamp(1.25rem, 2.4vw, 1.62rem) !important;
  font-weight: 300; line-height: 1.42; letter-spacing: -0.015em;
  color: var(--tinta) !important;
}

.historia-nota {
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); padding: 1.6rem;
  position: sticky; top: 6.5rem;
}
.historia-nota-titulo { color: var(--ambar); margin-bottom: 1rem; }
.lista-limpia { display: flex; flex-direction: column; gap: .7rem; }
.lista-limpia li {
  padding-left: 1.15rem; position: relative;
  font-size: .95rem; color: var(--tinta);
}
.lista-limpia li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ambar);
}
.historia-nota-pie {
  margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--borde);
  font-size: .88rem; color: var(--tinta-3);
}

/* ============================================================
   11. Pilares
   ============================================================ */
.pilares { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }

.pilar {
  position: relative; overflow: hidden;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie);
  padding: 2rem 1.7rem;
  display: flex; flex-direction: column; gap: .9rem;
  transition: border-color .4s var(--ease-out), background .4s var(--ease-out),
              transform .4s var(--ease-out);
}
.pilar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ambar), transparent);
  opacity: 0; transition: opacity .45s var(--ease-out);
}
.pilar:hover {
  border-color: var(--borde-fuerte);
  background: var(--superficie-2);
  transform: translateY(-4px);
}
.pilar:hover::before { opacity: .85; }

.pilar-num { color: var(--ambar); font-size: .8rem; }
.pilar h3 {
  font-family: var(--display); font-size: 1.42rem; font-weight: 400;
  letter-spacing: -0.02em;
}
.pilar p { color: var(--tinta-2); font-size: .97rem; flex: 1; }

/* Cuando un pilar necesita más que un párrafo. El `flex: 1` pasa acá para que
   los tags queden pegados abajo en las tres tarjetas por igual. */
.pilar-detalle { flex: 1; margin-top: .2rem; }
.pilar-detalle li { font-size: .9rem; color: var(--tinta-2); }
.pilar-detalle strong { color: var(--tinta); font-weight: 600; }
.pilar:has(.pilar-detalle) p { flex: 0 0 auto; }

.pilar-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.pilar-tags li {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  color: var(--tinta-3);
  border: 1px solid var(--borde); border-radius: 6px;
  padding: .25rem .5rem;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.pilar:hover .pilar-tags li { color: var(--tinta-2); border-color: rgba(240,166,56,.2); }

/* ============================================================
   12. Proyectos
   ============================================================ */
.proyecto {
  position: relative;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .45s var(--ease-out), transform .45s var(--ease-out),
              box-shadow .45s var(--ease-out);
}
.proyecto:hover {
  border-color: var(--borde-fuerte);
  box-shadow: 0 26px 60px -34px rgba(0, 0, 0, .9);
}

.proyecto-destacado { margin-bottom: 1.2rem; }

.proyecto-cabeza {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: 1.7rem 1.7rem 0;
}
.proyecto-tipo { color: var(--ambar); margin-bottom: .5rem; }
.proyecto-titulo {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.025em;
}
.proyecto-destacado .proyecto-titulo { font-size: clamp(1.9rem, 4vw, 2.7rem); }

.proyecto-cuerpo {
  padding: 1.5rem 1.7rem 1.7rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  flex: 1;
}

.pso { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pso-compacto { grid-template-columns: 1fr; gap: 1.1rem; }
.pso-item h4 { color: var(--ambar); margin-bottom: .5rem; }
.pso-item p { color: var(--tinta-2); font-size: .95rem; }
.pso-item strong { color: var(--tinta); font-weight: 600; }

.proyecto-stack { display: flex; flex-wrap: wrap; gap: .4rem; }
.proyecto-stack li {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  color: var(--tinta-3);
  border: 1px solid var(--borde); border-radius: 6px; padding: .25rem .5rem;
}

.proyecto-imagen { border-block: 1px solid var(--borde); overflow: hidden; }
.proyecto-imagen img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.proyecto:hover .proyecto-imagen img { transform: scale(1.03); }


.proyecto-aviso {
  font-size: .8rem; color: var(--tinta-3); font-style: italic;
  padding-left: .9rem; border-left: 1px solid var(--borde);
}
.proyecto-aviso-fuerte { border-left-color: var(--borde-fuerte); color: var(--ambar); font-style: normal; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; }

.proyecto-links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: auto; }

/* Lugar reservado: borde punteado para que se lea como un hueco a propósito. */
.proyecto-reservado { border-style: dashed; border-color: var(--borde-fuerte); }
.proyecto-reservado .proyecto-titulo { color: var(--tinta-2); }

.proyectos-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; align-items: start; }

/* Bajada del título de la tarjeta: el cliente, cuando el nombre del proyecto
   no lo dice (tres trabajos distintos comparten cliente). */
.proyecto-sub {
  margin-top: .35rem;
  font-size: .88rem; color: var(--tinta-3);
}

/* La captura del destacado va sin recortar y a tamaño casi real: es lo que
   hay que mirar de esa tarjeta. Las de las demás son de apoyo y van en 16:10. */
.proyecto-imagen-alta img { aspect-ratio: 1160 / 715; object-fit: contain; }

/* Las capacidades que no entran en «qué construí» sin volverlo un ladrillo. */
.proyecto-claves {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .9rem 1.6rem;
  padding-top: 1.3rem; border-top: 1px solid var(--borde);
}
.proyecto-claves li {
  position: relative; padding-left: 1.15rem;
  font-size: .93rem; color: var(--tinta-2);
}
.proyecto-claves li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ambar);
}
.proyecto-claves strong { color: var(--tinta); font-weight: 600; }

/* ============================================================
   13. Stack
   ============================================================ */
.stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }

.stack-grupo {
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); padding: 1.5rem;
}
.stack-titulo { color: var(--ambar); margin-bottom: 1.1rem; }

.stack-lista { display: flex; flex-wrap: wrap; gap: .55rem; }

.tech {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem .85rem; border-radius: 999px;
  border: 1px solid var(--borde); background: rgba(255, 247, 235, 0.02);
  font-size: .9rem; color: var(--tinta-2);
  transition: color .35s var(--ease-out), border-color .35s var(--ease-out),
              background .35s var(--ease-out), transform .35s var(--ease-out);
}
.tech:hover {
  color: var(--tinta); border-color: var(--borde-fuerte);
  background: rgba(240, 166, 56, .07);
  transform: translateY(-3px);
}
.tech-ico {
  width: 17px; height: 17px; fill: currentColor;
  opacity: .62; transition: opacity .35s var(--ease-out), color .35s var(--ease-out);
}
.tech:hover .tech-ico { opacity: 1; color: var(--ambar); }
.tech-sin-ico { padding-left: 1rem; }

.stack-grupo-cert {
  display: flex; flex-direction: column; justify-content: space-between;
  border-color: var(--borde-fuerte);
  background: linear-gradient(160deg, rgba(240, 166, 56, .07), transparent 60%);
}
.cert-nombre { font-family: var(--display); font-size: 1.3rem; letter-spacing: -0.02em; }
.cert-casa { color: var(--tinta-3); font-size: .88rem; margin-top: .2rem; }
.cert-segunda {
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--borde);
}
.cert-segunda .cert-nombre { font-size: 1.1rem; }

/* ============================================================
   14. Marca y demanda  ·  En movimiento
   ============================================================ */

/* El cierre de "Lo que hago hoy": va a lo ancho debajo de los tres pilares
   porque es cómo trabajo, no un cuarto servicio. */
.hago-cierre {
  margin-top: 1.6rem;
  padding: 1.4rem 1.6rem;
  border-left: 2px solid var(--borde-fuerte);
  background: var(--superficie);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  color: var(--tinta-2); font-size: 1.02rem; max-width: 46rem;
}
.hago-cierre strong { color: var(--tinta); font-weight: 600; }

/* --- El caso --- */
.caso { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }

.caso-cabeza {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--borde);
}
.caso-titulo {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.5rem); letter-spacing: -0.025em;
}
.caso-entrada {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.42;
  letter-spacing: -0.015em; color: var(--tinta); max-width: 38rem;
}
.enlace-sobrio {
  color: var(--ambar);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-out);
}
.enlace-sobrio:hover { border-bottom-color: var(--ambar); }

/* --- La comparación 30 vs 90 --- */
.comparacion {
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(240, 166, 56, .09), transparent 58%),
    var(--superficie);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1.6rem;
}
.comparacion-titulo { color: var(--ambar); }

.comparacion-cabeza {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1.4rem;
}
.comparacion-numero {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3rem, 8vw, 5.2rem); line-height: .9;
  letter-spacing: -0.04em; color: var(--ambar);
  font-variant-numeric: tabular-nums;
}
.comparacion-frase {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.3;
  color: var(--tinta); max-width: 22rem;
}

/* La barra: el track ENTERO son los 90 días y el relleno son los últimos 30.
   Ocupa el 99,7%, así que la astilla que queda a la derecha es el remate: eso
   son los dos meses anteriores. Dos barras al lado se leerían como "parecidas". */
.medidor { display: flex; flex-direction: column; gap: .8rem; }
.medidor-track {
  position: relative; height: 58px;
  border: 1px solid var(--borde); border-radius: 8px;
  background: rgba(255, 247, 235, 0.04);
  overflow: hidden;
}
.medidor-relleno {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--ambar-hondo), var(--ambar));
  transition: width 1.6s var(--ease-out);
}
.medidor-corte {
  position: absolute; top: 0; bottom: 0; left: 99.7%;
  width: 1px; background: var(--tinta);
}

.medidor-pies { display: flex; justify-content: space-between; gap: 1rem; }
.medidor-pie { display: flex; flex-direction: column; gap: .1rem; font-size: .84rem; color: var(--tinta-3); }
.medidor-pie strong {
  font-family: var(--display); font-size: 1.5rem; font-weight: 400;
  color: var(--tinta); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.medidor-pie-resto { text-align: right; }
.medidor-pie-resto strong { color: var(--tinta-3); }
.medidor-total { color: var(--tinta-3); }

/* --- Los tres números que hacen el argumento --- */
.destacados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.destacados li {
  border-top: 1px solid var(--borde-fuerte); padding-top: 1.1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.destacado-num {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--ambar);
  font-variant-numeric: tabular-nums;
}
.destacados p { color: var(--tinta-2); font-size: .95rem; }

/* --- El resto de las métricas. <dl> porque son pares dato/etiqueta. --- */
.metricas {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--borde);
  border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden;
}
.metrica {
  background: var(--bg); padding: 1.2rem 1.1rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.metrica dt {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-3);
}
.metrica dd {
  font-family: var(--display); font-size: 1.6rem; font-weight: 400;
  letter-spacing: -0.02em; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.metrica dd span {
  display: block; margin-top: .25rem;
  font-family: var(--sans); font-size: .8rem; letter-spacing: 0;
  color: var(--tinta-3); font-variant-numeric: normal;
}

/* --- Qué hice --- */
.bloque-titulo { color: var(--ambar); margin-bottom: 1.4rem; }
.acciones-lista { counter-reset: paso; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2.2rem; }
.acciones-lista li { counter-increment: paso; position: relative; padding-left: 2.6rem; }
.acciones-lista li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute; left: 0; top: .1rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  color: var(--ambar);
  border: 1px solid var(--borde-fuerte); border-radius: 5px;
  padding: .18rem .34rem; line-height: 1;
}
.acciones-lista h5 {
  font-family: var(--display); font-weight: 400; font-size: 1.16rem;
  letter-spacing: -0.02em; margin-bottom: .4rem; color: var(--tinta);
}
.acciones-lista p { color: var(--tinta-2); font-size: .95rem; }

/* --- El ángulo diferencial --- */
.angulo {
  border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  padding: clamp(1.8rem, 4vw, 2.8rem) 0;
}
.angulo-texto {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.36;
  letter-spacing: -0.02em; color: var(--tinta); max-width: 44rem;
}
.angulo-texto em { font-style: italic; color: var(--ambar); }

/* --- Las piezas del caso: historias de Instagram, verticales. --- */
.piezas-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 1rem; }
.piezas-grilla li {
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  overflow: hidden; background: var(--bg-2);
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.piezas-grilla li:hover { border-color: var(--borde-fuerte); transform: translateY(-3px); }
.piezas-grilla img,
.piezas-grilla video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
/* La pieza en video se distingue del resto con un filete ámbar. */
.pieza-video { border-color: var(--borde-fuerte); }

/* --- En movimiento: dos tarjetas, video al costado del texto. --- */
.movimiento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.mov-card {
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); overflow: hidden;
  display: flex; flex-direction: row;
  transition: border-color .45s var(--ease-out);
}
.mov-card:hover { border-color: var(--borde-fuerte); }

.mov-video {
  flex: 0 0 44%;
  background: var(--bg-2); border-right: 1px solid var(--borde);
}
.mov-video video {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 9 / 16; object-fit: cover;
}

.mov-cuerpo { padding: 1.5rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.mov-cuerpo h3 {
  font-family: var(--display); font-weight: 400; font-size: 1.4rem;
  letter-spacing: -0.02em;
}
.mov-cuerpo p { color: var(--tinta-2); font-size: .95rem; }
.mov-cuerpo .proyecto-stack { margin-top: auto; }

.mov-pie {
  margin-top: 1.4rem; max-width: 40rem;
  padding-left: .9rem; border-left: 1px solid var(--borde);
  font-size: .86rem; color: var(--tinta-3);
}

/* ============================================================
   15. Manifiesto
   ============================================================ */
.manifiesto {
  border-block: 1px solid var(--borde);
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(240, 166, 56, .09), transparent 62%),
    var(--bg-2);
}
.manifiesto-interior {
  max-width: var(--ancho); margin-inline: auto;
  padding: var(--bloque) var(--gutter);
}
.manifiesto-eyebrow { color: var(--ambar); margin-bottom: 2.2rem; }

.manifiesto-lista {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.8rem, 4vw, 3rem);
}
.manifiesto-lista li { border-top: 1px solid var(--borde); padding-top: 1.3rem; }
.manifiesto-lista h3 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.4rem, 2.8vw, 1.95rem);
  letter-spacing: -0.025em; line-height: 1.2; margin-bottom: .7rem;
}
.manifiesto-lista p { color: var(--tinta-2); font-size: 1rem; max-width: 32rem; }

/* ============================================================
   16. Contacto
   ============================================================ */
.seccion-contacto { padding-bottom: clamp(3rem, 6vw, 5rem); }

.contacto { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }

.tarjeta-contacto {
  position: relative; overflow: hidden;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); padding: 2rem 1.8rem;
  display: flex; flex-direction: column; gap: .8rem;
  transition: border-color .4s var(--ease-out), background .4s var(--ease-out);
}
.tarjeta-contacto:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); }
.tarjeta-contacto-tipo { color: var(--ambar); }
.tarjeta-contacto h3 {
  font-family: var(--display); font-weight: 400; font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.tarjeta-contacto-texto { color: var(--tinta-2); font-size: .97rem; flex: 1; }

.tarjeta-contacto-dato {
  align-self: flex-start; margin-top: .6rem;
  font-size: 1.05rem; font-weight: 600; color: var(--ambar);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-out);
}
.tarjeta-contacto-dato:hover { border-bottom-color: var(--ambar); }
.tarjeta-contacto-dato.falta { font-size: .8rem; }

.redes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.red {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .75rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--borde); color: var(--tinta-2); font-size: .92rem;
  transition: color .35s var(--ease-out), border-color .35s var(--ease-out),
              background .35s var(--ease-out), transform .35s var(--ease-out);
}
.red:hover {
  color: var(--tinta); border-color: var(--borde-fuerte);
  background: rgba(240, 166, 56, .07); transform: translateY(-2px);
}
.red-ico { width: 17px; height: 17px; fill: currentColor; opacity: .7; }
.red-ico-trazo { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.red:hover .red-ico { opacity: 1; }
.red-sigla {
  font-family: var(--mono); font-size: .8rem; font-weight: 500;
  color: var(--ambar); width: 17px; text-align: center;
}
.red-falta { color: var(--ambar); border-style: dashed; border-color: var(--borde-fuerte); }
.red-falta span { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; }
.red-cv { border-color: var(--borde-fuerte); color: var(--tinta); }

/* ============================================================
   17. Pie
   ============================================================ */
.pie {
  border-top: 1px solid var(--borde);
  max-width: var(--ancho); margin-inline: auto;
  padding: 2.5rem var(--gutter) 3rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.5rem;
  font-size: .88rem; color: var(--tinta-3);
}
.pie-nota { flex: 1 1 20rem; }
.pie-arriba {
  color: var(--tinta-2);
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.pie-arriba:hover { color: var(--ambar); border-bottom-color: var(--ambar); }

/* ============================================================
   18. Aparición al hacer scroll
   Se esconde SÓLO si el JS está vivo (.js en el <html>). Sin JS el
   contenido se ve igual, que es la regla que no se negocia.
   ============================================================ */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--retardo, 0) * 90ms);
}
.js [data-revelar].revelado { opacity: 1; transform: none; }

/* ============================================================
   19. Responsive — el celular es su propia composición
   ============================================================ */
@media (max-width: 1023px) {
  .pso { grid-template-columns: 1fr; gap: 1.1rem; }
  .proyectos-grilla { grid-template-columns: 1fr; }
  .stack { grid-template-columns: repeat(2, 1fr); }
  .metricas { grid-template-columns: repeat(2, 1fr); }
  .movimiento { grid-template-columns: 1fr; }
  .piezas-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pilares { grid-template-columns: 1fr; }
  .pilares { grid-template-columns: 1fr; }
  .historia { grid-template-columns: 1fr; }
  .historia-nota { position: static; }
}

@media (max-width: 899px) {
  .nav {
    position: fixed; inset: 0 0 auto 0; top: 100%;
    flex-direction: column; gap: 0;
    background: rgba(10, 9, 8, .97);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--borde);
    padding: 1rem var(--gutter) 1.6rem;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  }
  .nav.abierto { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--borde); font-size: 1.05rem; }
  .nav a::after { display: none; }
  .hamburguesa { display: flex; }
  .barra .btn-chico { display: none; }
  .marca-nombre { display: none; }

  /* El hero se rearma: el retrato entra entre los roles y la frase, en
     formato ancho. No es el de escritorio achicado. */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: clamp(3rem, 8vw, 5rem);
    gap: 0;
  }
  .hero-texto { display: contents; }
  .eyebrow        { order: 1; }
  .hero-nombre    { order: 2; margin: 1rem 0 .7rem; }
  .hero-roles     { order: 3; }
  .hero-retrato   { order: 4; margin: 1.8rem 0 .4rem; }
  .hero-frase     { order: 5; }
  .hero-sub       { order: 6; }
  .hero-acciones  { order: 7; }

  .retrato { width: 100%; }
  .retrato img {
    aspect-ratio: 4 / 3;
    object-position: 50% 50%;
    border-radius: var(--radio);
  }
  .retrato-aro { inset: -.7rem -.7rem 2rem; border-radius: var(--radio); }
  /* El resplandor se achica: a -22% se salía de la pantalla. Se recorta igual
     por el clip de arriba, pero mejor que no haga falta recortarlo. */
  .retrato::after { inset: -12% -6% -8%; }
  .retrato-pie { flex-direction: row; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline; }
  .hero-baja { display: none; }

  .hero-acciones .btn { flex: 1 1 100%; justify-content: center; }

  .cifras-grilla { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 0; }
  .cifra + .cifra { border-left: 0; padding-left: 0; }
  .cifra:nth-child(even) { border-left: 1px solid var(--borde); padding-left: 1.5rem; }

  .proyecto-claves { grid-template-columns: 1fr; }
  .manifiesto-lista { grid-template-columns: 1fr; }
  .contacto { grid-template-columns: 1fr; }

  /* El video pasa de al lado del texto a arriba, centrado: a lo ancho
     completo un 9:16 ocupa media pantalla de alto. */
  .mov-card { flex-direction: column; }
  .mov-video {
    flex: none; width: 100%; max-width: 260px; margin-inline: auto;
    border-right: 0; border-bottom: 1px solid var(--borde);
    border-left: 1px solid var(--borde);
  }
  .destacados { grid-template-columns: 1fr; }
  .acciones-lista { grid-template-columns: 1fr; }
  .medidor-track { height: 46px; }
  .caso-cabeza { flex-direction: column; gap: .9rem; }
}

@media (max-width: 539px) {
  .stack { grid-template-columns: 1fr; }
  .proyecto-cabeza { flex-direction: column; gap: .8rem; }
  .cifras-grilla { grid-template-columns: 1fr; }
  .cifra:nth-child(even) { border-left: 0; padding-left: 0; }
  .cifra + .cifra { border-top: 1px solid var(--borde); padding-top: 1.5rem; }
  .destacados { grid-template-columns: 1fr; }
  .metricas { grid-template-columns: 1fr; }
  .piezas-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .redes { flex-direction: column; align-items: stretch; }
  .red { justify-content: center; }
}

/* Objetivos táctiles: en el celular un enlace de texto de 26 px de alto es
   un blanco imposible. Se les da el área de 44 px sin cambiar cómo se ven. */
@media (hover: none), (pointer: coarse) {
  .enlace,
  .enlace-sobrio,
  .tarjeta-contacto-dato,
  .pie-arriba,
  .marca {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ============================================================
   20. Movimiento reducido
   Se apaga sólo lo intrusivo (bucles infinitos, el fondo que persigue
   al cursor, la inclinación). Los fundidos y los hover se quedan: si se
   apaga todo, en Windows —que trae esto activado de fábrica en muchas
   instalaciones— la web se ve muerta.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .punto, .chip-vivo::before, .hero-baja-linea { animation: none; }
  .fondo-grilla { display: none; }
  .fondo-halo {
    background: radial-gradient(40rem circle at 68% 10%, rgba(240,166,56,.13), transparent 66%);
  }
  .medidor-relleno { transition: none; }
  .js [data-revelar] { transition-duration: .35s; transform: none; }
}