/* ============================================================
   ATLA — portfolio.css
   El portfolio de Diseño Web (09/09/2026). Subpágina de diseno-web.html:
   se llega desde el botón "Nuestro portfolio digital" de "Qué podemos
   construir".

   Referencia del cliente: `Portfolio Idea.jpg` — página oscura, titular
   grande, y una grilla de dos columnas de trabajos con portada, nombre y
   etiqueta. De ahí se toma la ESTRUCTURA y el tono. Lo que cambia respecto
   de la referencia, por pedido explícito: en lugar del retrato del hero va
   el isotipo de ATLA, y arriba la cabecera estándar del sitio.

   Universo: NO es una décima página con paleta propia. Es el negro
   `#0E1117` de "Qué podemos construir" en Diseño Web, su eléctrico
   aclarado, y la misma mono de display. Tiene que leerse como parte de
   Diseño Web —es su portfolio— y no como otro servicio.

   No carga diseno-web.css: esa hoja pinta una página clara (barra en papel,
   pie en papel) y habría que deshacer la mitad. Los pocos tokens que
   comparte se repiten acá, con el mismo valor.

   ⚠️ HUECOS, NO CASOS. El cliente pidió dejar solo marcadores para ir
   sumando portadas después. Los cuatro `.proyecto--vacio` se ven como lo
   que son —un lugar reservado— y no son clickeables: un hueco que parece
   un caso sería inventar contenido (§0.7). La receta para llenar uno está
   en el HTML.
   ============================================================ */

.pag-portfolio {
  --tinta:      #0E1117;
  --tinta-2:    #141922;   /* un paso más claro, para la portada vacía */
  --marino:     #16233D;
  --electrico:  #7E93F0;   /* el eléctrico de Diseño Web, aclarado sobre negro (§7sexies) */
  --electrico-fondo: #2F4BD8;

  --font-mono:   "JetBrains Mono", ui-monospace, Consolas, monospace;
  --display:     var(--font-mono);
  --font-display: var(--font-mono);
  --peso-display: 500;
  --track-display: -0.04em;
  /* Las cifras siguen la regla de Diseño Web: Inter con tabulares, no la
     mono (su cero con punto ensucia los números). */
  --font-cifras: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  background: var(--tinta);
  color: var(--ink-on-dark);

  --ink: var(--ink-on-dark);
  --ink-muted: rgba(244, 242, 238, 0.68);
  --line: rgba(244, 242, 238, 0.18);
  --line-soft: rgba(244, 242, 238, 0.09);
  --accent: var(--electrico);
  --paper: var(--tinta);

  /* El isotipo, como en la sección oscura de Diseño Web: una barra en
     eléctrico, el resto en blancos. Sobre negro el marino del rombo no se
     vería: va en eléctrico. */
  --logo-1: rgba(244, 242, 238, 0.32);
  --logo-2: rgba(244, 242, 238, 0.52);
  --logo-3: var(--electrico);
  --logo-4: var(--ink-on-dark);
  --logo-diamond: var(--electrico);
  --logo-rule: rgba(244, 242, 238, 0.7);
}

/* ---------- Cabecera sobre negro ----------
   Barra sólida, sin `backdrop-filter`: en un elemento fijo obliga a
   redesenfocar la franja de atrás en cada cuadro, y sobre negro no se
   percibe (lección de Consultoría, §7ter). */
.pag-portfolio .topbar { --bar-fondo: var(--tinta); }
.pag-portfolio .topbar.is-scrolled,
.pag-portfolio .topbar.is-scrolled.on-dark {
  background: var(--tinta);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 var(--line);
}

/* El punto de servicio se aclara sobre fondo oscuro (§6bis): el marino
   sobre este negro es invisible. Se excluyen los estados con relleno. */
.pag-portfolio .pill:not(:hover):not(:focus-visible):not([aria-current="page"])::after,
.pag-portfolio .desplegable__link:not(:hover):not(:focus-visible):not([aria-current="page"])::before {
  background: color-mix(in srgb, var(--svc) 62%, #FFFFFF);
}

/* ============================================================
   1. Hero — el isotipo en el lugar del retrato
   ============================================================ */
.hero-pf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Sangra bajo la cabecera (§6): la cuadrícula llega hasta el borde de
     arriba y la barra flota encima. */
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + var(--sp-4));
  padding-bottom: clamp(4rem, 9vw, 7rem);
  /* Pantalla completa, medida solo en viewport: sin topes en px. */
  min-height: 100svh;
  display: grid;
  align-items: center;
  text-align: center;
}

/* Un resplandor detrás del logo. Sobre negro cualquier degradado tenue
   bandea en 8 bits: va el ruido de dithering como primera capa (§7quater). */
.hero-pf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    var(--ruido),
    radial-gradient(52% 44% at 50% 42%, rgba(47, 75, 216, 0.30) 0%, rgba(47, 75, 216, 0.14) 32%, rgba(47, 75, 216, 0.04) 60%, transparent 76%);
  background-size: var(--ruido-tam), auto;
  background-repeat: repeat, no-repeat;
}

.hero-pf .rejilla {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-pf .rejilla canvas { display: block; }

.hero-pf__inner {
  max-width: 44rem;
  margin-inline: auto;
}

/* El isotipo grande. Mismo SVG inline que la cabecera y el pie —es el
   hilo conductor del sitio (§5.4)—, a tamaño de portada. */
.hero-pf__logo {
  width: clamp(88px, 13vw, 140px);
  height: auto;
  display: block;
  margin-inline: auto;
}

/* Las cuatro barras SUBEN al cargar, una detrás de otra, y el rombo aparece
   al final. Es la historia del símbolo —ascenso compartido, la cima al
   final (§4bis)— contada en 1,2 segundos, no un adorno. Con
   `prefers-reduced-motion` el logo aparece entero, sin moverse. */
.hero-pf__logo rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.hero-pf__logo .b1,
.hero-pf__logo .b2,
.hero-pf__logo .b3,
.hero-pf__logo .b4 {
  animation: barra-sube 760ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.hero-pf__logo .b2 { animation-delay: 110ms; }
.hero-pf__logo .b3 { animation-delay: 220ms; }
.hero-pf__logo .b4 { animation-delay: 330ms; }
.hero-pf__logo .diamond {
  transform-origin: 50% 50%;
  animation: rombo-llega 520ms cubic-bezier(0.22, 0.61, 0.36, 1) 780ms both;
}
@keyframes barra-sube {
  from { transform: scaleY(0); opacity: 0; }
  40%  { opacity: 1; }
  to   { transform: scaleY(1); opacity: 1; }
}
@keyframes rombo-llega {
  from { transform: translateY(6px) scale(0.6); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.hero-pf .label {
  margin-top: var(--sp-4);
  color: var(--electrico);
}

.hero-pf__titulo {
  font-family: var(--display);
  font-size: clamp(2.1rem, 5.6vw, 4.2rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-top: var(--sp-2);
  text-transform: none;
}

/* El bloque invertido del titular de Diseño Web, en su versión sobre
   negro: eléctrico de fondo y papel encima. Es el gesto que une las dos
   páginas. Medido: papel sobre #2F4BD8 da 7,0:1. */
.hero-pf__bloque {
  display: inline-block;
  background: var(--electrico-fondo);
  color: #FAFAF8;
  padding: 0.06em 0.28em 0.14em;
  border-radius: 0;
}

.hero-pf__lead {
  margin-top: var(--sp-3);
  margin-inline: auto;
  max-width: 38rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-muted);
}

.hero-pf__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

/* ============================================================
   2. Proyectos — la grilla
   ============================================================
   Dos columnas con filetes compartidos, como las celdas de una tabla: no
   son tarjetas (§5.1). Cada celda es portada + un renglón de nombre y
   etiqueta, que es lo que la referencia pone al pie de cada trabajo. */
.proyectos-pf { position: relative; }

.intro-pf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
}
.intro-pf .label { color: var(--electrico); }
.titulo-pf {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.9vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-top: var(--sp-2);
}
.intro-pf__nota {
  max-width: 30rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-muted);
}

.proyectos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: var(--sp-5);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.proyecto {
  display: grid;
  gap: var(--sp-2);
  padding: clamp(1rem, 2.4vw, 1.75rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.proyecto__portada {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tinta-2);
}
.proyecto__portada img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow, 600ms) var(--ease);
}

/* Un proyecto real es un link entero. Al pasar el mouse la portada crece
   apenas y la flecha del pie se corre: dos señales chicas de "esto se
   abre". Solo con puntero fino: en táctil no hay hover que valga. */
@media (hover: hover) and (pointer: fine) {
  a.proyecto:hover .proyecto__portada img { transform: scale(1.03); }
  a.proyecto:hover .proyecto__flecha { transform: translateX(4px); }
}
a.proyecto:focus-visible { outline-offset: -3px; }

.proyecto__pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}
.proyecto__nombre {
  font-family: var(--display);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.proyecto__flecha {
  color: var(--electrico);
  transition: transform var(--dur) var(--ease);
}
.proyecto__tipo {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* --- El hueco ---
   Una portada reservada: retícula fina, marco de trazos, el isotipo a
   baja opacidad y un rótulo. Se ve como un lugar guardado, no como un
   trabajo que no cargó. No es un link y no tiene hover: no promete nada. */
.proyecto--vacio .proyecto__portada {
  display: grid;
  place-items: center;
  background-image:
    linear-gradient(rgba(244, 242, 238, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 242, 238, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  background-color: var(--tinta-2);
}
.proyecto--vacio .proyecto__portada::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed var(--line);
  pointer-events: none;
}
.proyecto__marca {
  width: clamp(40px, 5vw, 56px);
  height: auto;
  opacity: 0.22;
}
.proyecto__marca rect { fill: var(--ink-on-dark); }
.proyecto__marca .diamond { fill: var(--electrico); }
.proyecto--vacio .proyecto__nombre { color: var(--ink-muted); }

@media (max-width: 720px) {
  .proyectos { grid-template-columns: 1fr; }
  .intro-pf { align-items: flex-start; }
}

/* ============================================================
   3. Cierre
   ============================================================ */
.cierre-pf {
  text-align: center;
  border-top: 1px solid var(--line);
}
.cierre-pf .label { color: var(--electrico); }
.cierre-pf__titulo {
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: var(--sp-2) auto var(--sp-4);
  max-width: 20ch;
}
.cierre-pf__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

/* ============================================================
   4. Pie y utilidades sobre negro
   ============================================================ */
.pag-portfolio .footer { background: var(--tinta); border-top-color: var(--line); }

/* --- letras.js: el titular de sección entra letra por letra --- */
.letras__palabra { display: inline-block; white-space: nowrap; }
.letras__letra {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity 520ms var(--ease),
    transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--d, 0ms);
}
.letras--dentro .letras__letra { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .letras__letra { opacity: 1; transform: none; transition: none; }
  .hero-pf__logo rect { animation: none !important; }
  .proyecto__portada img,
  .proyecto__flecha { transition: none; }
}