/* tasteskill · PepeSoft · rediseño-overhaul
 * VARIANCE 9 · MOTION 7 · DENSITY 3 · theme lock: oscuro
 * Familias de maquetación usadas (ninguna se repite):
 *   1 hero fotográfico a sangre   2 cifras en tira mono
 *   3 rejilla asimétrica 6 celdas 4 pieza grande con un solo asset
 *   5 carril con scroll-snap      6 cierre tipográfico
 */

@import url("../tokens.css");

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--fuente-texto);
  font-size: var(--t-lg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--fuente-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  /* `anywhere` parte dentro de las palabras en cuanto el contenedor
     se estrecha; `break-word` solo lo hace si la palabra no cabe. */
  overflow-wrap: break-word;
  min-width: 0;
  margin: 0;
}

p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.caja {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e-lg);
}

@media (min-width: 900px) {
  .caja {
    padding-inline: var(--e-2xl);
  }
}

/* ══ Navegación ════════════════════════════════════════════════
   Una sola línea, 64 px. Logotipo real a la izquierda, una sola
   acción a la derecha. */

.nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-md);
  height: 64px;
}

.nav__logo {
  height: 32px;
  width: auto;
}

.boton {
  display: inline-flex;
  align-items: center;
  /* Una sola línea siempre: un botón que parte su texto está roto. */
  white-space: nowrap;
  font-family: var(--fuente-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 0.6rem 1.15rem;
  border-radius: var(--r-pill);
  background: var(--acento);
  color: var(--acento-sobre);
  border: 0;
  transition: transform var(--d-rapido) var(--sal),
    background-color var(--d-rapido) var(--sal);
}

.boton:hover {
  background: var(--acento-fuerte);
  transform: translateY(-1px);
}

.boton:active {
  transform: translateY(1px) scale(0.985);
}

.boton--fantasma {
  background: transparent;
  color: var(--fg);
  /* Borde obligatorio: sin él, un botón transparente sobre la foto
     desaparece y deja de leerse como botón. */
  border: 1px solid oklch(100% 0 0 / 0.28);
  backdrop-filter: blur(8px);
}

.boton--fantasma:hover {
  background: oklch(100% 0 0 / 0.1);
  border-color: oklch(100% 0 0 / 0.5);
}

/* ══ 1 · Hero facetado ════════════════════════════════════════
   Sin foto de archivo: la pieza es la geometría del propio isotipo,
   a gran escala. Dice algo (esta es la marca) en vez de decorar. */

.hero {
  position: relative;
  display: grid;
  gap: var(--e-2xl);
  align-items: center;
  padding-block: 128px var(--e-3xl);
  overflow: hidden;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--e-4xl);
    padding-block: 140px var(--e-4xl);
  }
}

/* Fondo: líneas de código reales desplazándose muy despacio. Antes eran
   caracteres sueltos generados celda a celda, y por eso no formaban
   nada legible. Ahora es código de verdad, con su sangría y sus llaves. */
.hero__fondo,
.faro__fondo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--fuente-mono);
  font-size: 12.5px;
  line-height: 1.85;
  white-space: pre;
  color: oklch(62% 0.04 250 / 0.5);
  mask-image: radial-gradient(ellipse 96% 84% at 64% 44%, #000 26%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 96% 84% at 64% 44%, #000 26%, transparent 76%);
}

.hero__fondo > div,
.faro__fondo > div {
  position: absolute;
  inset: 0 auto auto 0;
  min-width: 100%;
  padding-left: 4%;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__fondo > div,
.faro__fondo > div {
    animation: subir-codigo 64s linear infinite;
  }
}

@keyframes subir-codigo {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.hero__fondo b,
.faro__fondo b {
  font-weight: 500;
  color: oklch(80% 0.145 72 / 0.42);
}

/* Halo detrás de la composición. Un solo tono, el de marca: nada de
   manchas de colores flotando. */
.hero::before {
  content: "";
  position: absolute;
  right: -12%;
  top: 6%;
  width: min(760px, 88vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    oklch(56% 0.092 250 / 0.3),
    transparent 62%
  );
  pointer-events: none;
}

.hero__texto {
  position: relative;
  z-index: 2;
  /* En rem a propósito: con `ch` el ancho se calcula con la letra del
     contenedor, no con la del titular, y el h1 se partía letra a letra. */
  max-width: 46rem;
}

.hero h1 {
  font-size: var(--t-display);
  max-width: 13ch;
}

.hero__acento {
  color: var(--acento);
}

.hero__bajada {
  margin-top: var(--e-lg);
  max-width: 44ch;
  font-size: var(--t-xl);
  color: var(--fg-2);
}

.hero__acciones {
  margin-top: var(--e-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-sm);
}

/* ══ La forja: el código escribe, y al lado aparece lo que construye ══
   Lo de la derecha NO es una captura falsa hecha con divs: es un
   elemento real que va ganando de verdad las propiedades que el código
   va nombrando. Nada de cromo de editor inventado tampoco. */

.forja {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--e-lg);
  align-items: center;
  justify-self: center;
  width: 100%;
  max-width: 560px;
}

@media (min-width: 620px) {
  .forja {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: var(--e-xl);
  }
}

.forja__codigo {
  margin: 0;
  font-family: var(--fuente-mono);
  font-size: clamp(11.5px, 1.15vw, 13.5px);
  line-height: 1.95;
  color: var(--fg-2);
  white-space: pre;
  /* Alto fijo: si creciera línea a línea, todo el hero daría saltos
     mientras se escribe. */
  min-height: 13.5em;
}

.forja__codigo .kw { color: oklch(66% 0.11 250); }
.forja__codigo .str { color: oklch(80% 0.145 72); }
.forja__codigo .num { color: oklch(72% 0.13 10); }
.forja__codigo .id { color: var(--fg); }
.forja__codigo .pun { color: var(--fg-3); }

.forja__cursor {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  background: var(--acento);
  translate: 0 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .forja__cursor {
    animation: latir 1.05s steps(2, jump-none) infinite;
  }
}

@keyframes latir {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* La pieza que se construye */
.ficha {
  border-radius: var(--r);
  padding: var(--e-lg);
  background: var(--bg-2);
  border: 1px solid var(--linea);
  display: grid;
  gap: var(--e-sm);
  box-shadow: 0 26px 60px oklch(0% 0 0 / 0.45);
  transition: background-color var(--d-lento) var(--sal),
    border-color var(--d-lento) var(--sal);
}

/* Cada parte entra cuando su línea de código termina de escribirse. */
.ficha > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--d-medio) var(--sal),
    transform var(--d-medio) var(--sal);
}

.ficha [data-listo] {
  opacity: 1;
  transform: none;
}

.ficha__icono {
  width: 44px;
  height: 44px;
  border-radius: 24%;
}

.ficha__nombre {
  font-family: var(--fuente-display);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.ficha__hace {
  font-size: var(--t-sm);
  color: var(--fg-2);
}

.ficha__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-sm);
  padding-block: var(--e-xxs);
  font-size: var(--t-sm);
  color: var(--fg-2);
  border-top: 1px solid var(--linea);
}

.ficha__fila b {
  font-family: var(--fuente-mono);
  font-weight: 500;
  color: var(--acento);
  white-space: nowrap;
}

.ficha__cita {
  font-size: var(--t-sm);
  color: var(--fg-2);
  padding-left: var(--e-sm);
  border-left: 2px solid var(--acento);
}

.ficha__sellos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-xs);
}

.ficha__sello {
  font-family: var(--fuente-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.24rem 0.6rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--linea-fuerte);
  color: var(--fg-3);
}

.ficha__sello--vivo {
  background: var(--acento);
  border-color: transparent;
  color: var(--acento-sobre);
}

/* ══ 2 · Tira de cifras ════════════════════════════════════════
   Sin tarjetas: las cifras respiran sobre el fondo y las separa una
   línea vertical, no un contenedor. */

.cifras {
  display: grid;
  gap: var(--e-xl);
  padding-block: var(--e-2xl);
  border-bottom: 1px solid var(--linea);
}

@media (min-width: 760px) {
  .cifras {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--e-2xl);
  }

  .cifra + .cifra {
    padding-left: var(--e-2xl);
    border-left: 1px solid var(--linea);
  }
}

.cifra__valor {
  display: block;
  font-family: var(--fuente-display);
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.cifra__que {
  margin-top: var(--e-sm);
  font-size: var(--t-base);
  font-weight: 600;
}

.cifra__nota {
  margin-top: var(--e-xxs);
  font-size: var(--t-sm);
  color: var(--fg-3);
  max-width: 34ch;
}

.cifras__pie {
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  color: var(--fg-3);
  padding-bottom: var(--e-xl);
}

/* ══ 3 · Rejilla asimétrica de servicios ═══════════════════════
   Seis servicios, seis celdas exactas. Tamaños distintos a propósito:
   dos celdas llevan carga visual real para que no sea texto sobre
   texto seis veces. */

.seccion {
  padding-block: var(--e-3xl);
}

.seccion__titulo {
  font-size: var(--t-titulo);
  max-width: 16ch;
}

.seccion__entrada {
  margin-top: var(--e-md);
  max-width: var(--medida);
  color: var(--fg-2);
}

.malla {
  margin-top: var(--e-2xl);
  display: grid;
  gap: var(--e-md);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .malla {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .pieza--ancha {
    grid-column: span 4;
  }
  .pieza--media {
    grid-column: span 2;
  }
  .pieza--tercio {
    grid-column: span 3;
  }
}

.pieza {
  position: relative;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: var(--e-lg);
  background: var(--bg-2);
  overflow: hidden;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: border-color var(--d-medio) var(--sal),
    transform var(--d-medio) var(--sal);
}

.pieza:hover {
  border-color: var(--linea-fuerte);
  transform: translateY(-2px);
}

.pieza h3 {
  font-size: var(--t-sub);
}

.pieza p {
  margin-top: var(--e-xs);
  color: var(--fg-2);
  font-size: var(--t-base);
  max-width: 40ch;
}

/* Todas las celdas llevan su ilustración a sangre y el texto encima,
   sobre un velo que garantiza que se lea. Antes unas tenían dibujo y
   otras solo texto, y la rejilla se veía a medio hacer. */
.pieza {
  padding: 0;
  min-height: 268px;
}

.pieza__arte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-lento) var(--sal);
}

.pieza:hover .pieza__arte {
  transform: scale(1.05);
}

.pieza__texto {
  position: relative;
  padding: var(--e-lg);
  margin-top: auto;
  /* El velo va de opaco abajo a transparente arriba: el texto se apoya
     sin tapar la ilustración. */
  background: linear-gradient(
    to top,
    oklch(9% 0.02 283 / 0.94) 22%,
    oklch(9% 0.02 283 / 0.72) 58%,
    transparent
  );
}

.pieza--ancha {
  min-height: 300px;
}

/* Distintivo oficial de Apple. No se recolorea ni se deforma: son las
   reglas de uso de Apple, y además es el sello que la gente reconoce. */
.appstore {
  display: inline-block;
  margin-top: var(--e-xl);
  border-radius: var(--r-sm);
  transition: transform var(--d-rapido) var(--sal);
}

.appstore:hover {
  transform: translateY(-2px);
}

.appstore img {
  height: 50px;
  width: auto;
}

/* Marco de iPhone. Deliberadamente sobrio: un bisel y nada más. La
   captura ya trae su propia barra de estado y su isla dinámica, así que
   dibujar encima cromo falso sobraría. */
.telefonos {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 460px;
}

.telefono {
  position: relative;
  width: min(248px, 62vw);
  aspect-ratio: 1290 / 2796;
  border-radius: 40px;
  padding: 7px;
  background: linear-gradient(160deg, #3a3b48, #1a1b26 42%, #33343f);
  box-shadow: 0 34px 80px oklch(0% 0 0 / 0.62),
    0 0 0 1px oklch(100% 0 0 / 0.07);
}

.telefono__visor {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 33px;
  overflow: hidden;
  background: var(--bg);
}

.telefono__visor img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  /* Entra desde la derecha, como quien avanza en la app. */
  transform: translateX(12%);
  transition: opacity 520ms var(--sal), transform 620ms var(--sal);
}

.telefono__visor img[data-activa] {
  opacity: 1;
  transform: none;
}

.telefono--atras img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 33px;
  display: block;
}

/* Puntitos que marcan en qué pantalla va. Aquí sí tienen sentido: son
   estado real, no adorno. */
.telefonos__puntos {
  position: absolute;
  bottom: -26px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  gap: 6px;
  z-index: 3;
}

.telefonos__punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--linea-fuerte);
  transition: background-color var(--d-medio) var(--sal),
    width var(--d-medio) var(--sal);
}

.telefonos__punto[data-activa] {
  width: 18px;
  border-radius: var(--r-pill);
  background: var(--acento);
}

/* El segundo teléfono asoma detrás, girado. Da profundidad sin necesidad
   de inventar una escena. */
.telefono--atras {
  position: absolute;
  left: 50%;
  top: 26px;
  translate: -78% 0;
  rotate: -7deg;
  width: min(212px, 52vw);
  opacity: 0.72;
  filter: saturate(0.9);
}

@media (max-width: 759px) {
  .telefonos {
    min-height: 400px;
  }

  .telefono--atras {
    translate: -84% 0;
    rotate: -8deg;
  }
}

/* ══ 4 · Pieza grande con un solo asset ════════════════════════ */

.faro {
  position: relative;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  background: var(--bg-2);
  overflow: hidden;
}

/* El código corre DETRÁS DE LOS MÓVILES, no bajo el texto. La máscara
   estaba centrada en el 34%, que es justo la columna de la izquierda, y
   dejaba el párrafo sobre un fondo de letras: ilegible y sucio. */
.faro__fondo {
  --foco: radial-gradient(
    ellipse 46% 88% at 78% 50%,
    #000 24%,
    transparent 76%
  );
  mask-image: var(--foco);
  -webkit-mask-image: var(--foco);
}

/* Y el código tiene que ESTAR ahí, no solo la ventana que lo enseña. Las
   líneas arrancaban pegadas a la izquierda, o sea fuera de la zona que la
   máscara destapa: por eso no se veía nada. Se corren hasta los móviles. */
.faro__fondo > div {
  padding-left: 56%;
}

/* Sobre el gris de esta banda el texto se apagaba más que en el hero, que
   va sobre fondo más oscuro. Se le sube un punto. */
.faro__fondo {
  color: oklch(70% 0.05 250 / 0.6);
}

.faro__fondo b {
  color: oklch(82% 0.15 72 / 0.62);
}

/* Apilado en vertical, los móviles quedan debajo: el foco baja con ellos
   y el código vuelve al margen izquierdo. */
@media (max-width: 899px) {
  .faro__fondo {
    --foco: radial-gradient(
      ellipse 92% 44% at 50% 76%,
      #000 22%,
      transparent 78%
    );
  }

  .faro__fondo > div {
    padding-left: 6%;
  }
}

.faro__cuerpo {
  position: relative;
  z-index: 2;
}

.faro__cuerpo {
  display: grid;
  gap: var(--e-2xl);
  padding-block: var(--e-3xl);
  align-items: center;
}

@media (min-width: 900px) {
  .faro__cuerpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--e-4xl);
  }
}

.faro__marca {
  display: flex;
  align-items: center;
  gap: var(--e-md);
}

.faro__icono {
  width: clamp(64px, 8vw, 84px);
  height: auto;
  border-radius: 24%;
  box-shadow: 0 18px 44px oklch(0% 0 0 / 0.5);
}

.faro__nombre {
  font-family: var(--fuente-display);
  font-size: var(--t-titulo);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.faro__texto {
  margin-top: var(--e-lg);
  max-width: var(--medida);
  color: var(--fg-2);
}

.faro__texto + .faro__texto {
  margin-top: var(--e-md);
}

/* Distintivo oficial de Apple. No se recolorea ni se deforma: son sus
   reglas de uso, y además es el sello que la gente reconoce. */
.appstore {
  display: inline-block;
  margin-top: var(--e-xl);
  border-radius: var(--r-sm);
  transition: transform var(--d-rapido) var(--sal);
}

.appstore:hover {
  transform: translateY(-2px);
}

.appstore img {
  height: 52px;
  width: auto;
}

/* Marco de iPhone. Sobrio a propósito: un bisel y nada más, porque la
   captura ya trae su barra de estado y su isla dinámica. */
.telefonos {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  padding-block: var(--e-md) var(--e-xl);
}

.telefono {
  position: relative;
  z-index: 2;
  width: min(260px, 64vw);
  aspect-ratio: 1290 / 2796;
  border-radius: 40px;
  padding: 7px;
  background: linear-gradient(160deg, #3a3b48, #1a1b26 42%, #33343f);
  box-shadow: 0 34px 80px oklch(0% 0 0 / 0.62),
    0 0 0 1px oklch(100% 0 0 / 0.07);
}

.telefono__visor {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 33px;
  overflow: hidden;
  background: var(--bg);
}

.telefono__visor img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  /* Entra desde la derecha, como quien avanza en la app. */
  transform: translateX(12%);
  transition: opacity 520ms var(--sal), transform 620ms var(--sal);
}

.telefono__visor img[data-activa] {
  opacity: 1;
  transform: none;
}

.telefono--atras img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 33px;
  display: block;
}

/* Puntitos que marcan en qué pantalla va. Aquí sí tienen sentido: son
   estado real, no adorno. */
.telefonos__puntos {
  position: absolute;
  bottom: -26px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  gap: 6px;
  z-index: 3;
}

.telefonos__punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--linea-fuerte);
  transition: background-color var(--d-medio) var(--sal),
    width var(--d-medio) var(--sal);
}

.telefonos__punto[data-activa] {
  width: 18px;
  border-radius: var(--r-pill);
  background: var(--acento);
}

/* El segundo asoma de verdad por detrás: antes se solapaban casi del
   todo y no se veía que eran dos pantallas distintas. */
.telefono--atras {
  position: absolute;
  z-index: 1;
  top: 34px;
  left: 0;
  width: min(212px, 52vw);
  rotate: -8deg;
  opacity: 0.85;
}

@media (min-width: 900px) {
  .telefonos {
    justify-items: end;
    padding-right: 6%;
  }

  .telefono--atras {
    left: auto;
    right: 46%;
  }
}

@media (max-width: 899px) {
  .telefonos {
    justify-items: end;
    padding-right: 8%;
  }
}

/* ══ 5 · Carril con scroll-snap (método) ═══════════════════════
   No es una lista con líneas debajo de cada fila, ni pasos numerados:
   es un carril que se desliza. En pantalla ancha se abre en rejilla. */

.carril {
  margin-top: var(--e-2xl);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(264px, 1fr);
  gap: var(--e-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--e-md);
  scrollbar-width: thin;
  scrollbar-color: var(--linea-fuerte) transparent;
}

.carril > * {
  scroll-snap-align: start;
}

@media (min-width: 1100px) {
  .carril {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }
}

.paso {
  position: relative;
  border-radius: var(--r);
  /* El hueco de arriba es para la figura, que entra desde fuera. */
  padding: 104px var(--e-lg) var(--e-lg);
  background: var(--bg-2);
  border: 1px solid var(--linea);
  /* visible, no hidden: la figura tiene que poder salirse. */
  overflow: visible;
}

/* La figura se ancla al borde INFERIOR del hueco y crece hacia arriba,
   así que rebasa el borde superior del recuadro. */
.paso__figura {
  position: absolute;
  top: -46px;
  left: var(--e-lg);
  height: 150px;
  width: auto;
  pointer-events: none;
}

.carril {
  /* Sitio arriba para lo que sobresale, o el carril lo recortaría. */
  padding-top: 52px;
}

.paso h3 {
  font-size: var(--t-xl);
}

.paso p {
  margin-top: var(--e-xs);
  font-size: var(--t-base);
  color: var(--fg-2);
}

/* ══ Portafolio ════════════════════════════════════════════════
   Lista de piezas con su estado real. Lo que está en construcción se
   marca como tal: una web que enseña como terminado algo que no lo
   está se nota enseguida. */

.obras {
  margin: var(--e-2xl) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e-md);
}

@media (min-width: 760px) {
  .obras {
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  }
}

.obra {
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
  padding: var(--e-lg);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--bg-2);
  text-decoration: none;
  transition: border-color var(--d-medio) var(--sal),
    transform var(--d-medio) var(--sal);
}

a.obra:hover {
  border-color: var(--acento);
  transform: translateY(-2px);
}

.obra__alto {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
}

.obra__icono {
  width: 46px;
  height: 46px;
  border-radius: 24%;
  flex: none;
}

.obra__nombre {
  font-family: var(--fuente-display);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.obra__estado {
  font-family: var(--fuente-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: var(--r-pill);
  margin-left: auto;
  white-space: nowrap;
}

.obra__estado--vivo {
  background: var(--acento);
  color: var(--acento-sobre);
}

.obra__estado--curso {
  border: 1px solid var(--linea-fuerte);
  color: var(--fg-3);
}

.obra p {
  color: var(--fg-2);
  font-size: var(--t-base);
}

/* ══ 6 · Cierre ═══════════════════════════════════════════════
   Antes era un titular y una lista de datos sueltos, y se caía. Ahora
   el correo es una pieza con peso propio y lo demás se ordena en dos
   columnas a su lado. */

.cierre {
  position: relative;
  border-top: 1px solid var(--linea);
  padding-block: var(--e-3xl);
  overflow: hidden;
}

.cierre::before {
  content: "";
  position: absolute;
  left: -14%;
  bottom: -46%;
  width: min(620px, 78vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    oklch(80% 0.145 72 / 0.12),
    transparent 62%
  );
  pointer-events: none;
}

.cierre__cuerpo {
  position: relative;
  display: grid;
  gap: var(--e-2xl);
}

@media (min-width: 900px) {
  .cierre__cuerpo {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--e-4xl);
    align-items: start;
  }
}

.cierre__grande {
  font-family: var(--fuente-display);
  font-size: var(--t-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 12ch;
}

/* El correo deja de ser un enlace suelto y pasa a ser la pieza en la
   que termina la página. */
.correo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-md);
  margin-top: var(--e-xl);
  padding: var(--e-md) var(--e-lg);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r);
  background: var(--bg-2);
  font-family: var(--fuente-display);
  font-size: var(--t-sub);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-decoration: none;
  transition: border-color var(--d-medio) var(--sal),
    background-color var(--d-medio) var(--sal),
    transform var(--d-medio) var(--sal);
}

.correo:hover,
.correo:focus-visible {
  border-color: var(--acento);
  background: var(--acento-velo);
  transform: translateY(-2px);
}

.correo span:last-child {
  color: var(--acento);
  font-size: var(--t-xl);
  translate: 0 -1px;
}

.cierre__nota {
  margin-top: var(--e-md);
  font-size: var(--t-sm);
  color: var(--fg-3);
}

/* Las personas, con su inicial delante: es lo que las distingue de una
   lista de nombres cualquiera. */
.gente {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e-sm);
}

.gente li {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  font-family: var(--fuente-display);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.gente li::before {
  content: attr(data-inicial);
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--linea);
  font-family: var(--fuente-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--acento);
}

.datos {
  margin: var(--e-xl) 0 0;
  display: grid;
  gap: var(--e-md);
  padding-top: var(--e-lg);
  border-top: 1px solid var(--linea);
}

.datos dt {
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.datos dd {
  margin: var(--e-xxs) 0 0;
  color: var(--fg-2);
}

/* ══ Pie ═══════════════════════════════════════════════════════ */

.pie {
  border-top: 1px solid var(--linea);
  padding-block: var(--e-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-md);
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-sm);
  color: var(--fg-3);
}

.pie a {
  white-space: nowrap;
  text-decoration-color: var(--linea-fuerte);
  text-underline-offset: 3px;
}

.pie a:hover {
  text-decoration-color: var(--acento);
  color: var(--fg);
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-lg);
}

/* ══ Movimiento ════════════════════════════════════════════════
   Motivado, no decorativo: la entrada del hero marca jerarquía, y el
   revelado al llegar a cada sección secuencia la lectura. Nada gira
   ni late en bucle. */

.js [data-sube] {
  opacity: 0;
  transform: translateY(20px);
}

.js [data-sube].visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--d-lento) var(--sal),
    transform var(--d-lento) var(--sal);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* La foto del hero entra con una escala mínima: da sensación de
   profundidad sin que nada se mueva mientras se lee. */
@media (prefers-reduced-motion: no-preference) {
  .hero__foto {
    animation: asentar 1400ms var(--sal) both;
  }
}

@keyframes asentar {
  from {
    transform: scale(1.06);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-sube] {
    opacity: 1;
    transform: none;
  }

  .js [data-sube].visible {
    transition: opacity 120ms linear;
    transition-delay: 0ms;
  }

  .pieza--foto img,
  .pieza,
  .boton {
    transition: none;
  }
}

/* ══ Móvil ═════════════════════════════════════════════════════ */

@media (max-width: 759px) {
  .hero {
    min-height: 80dvh;
    padding-block: 88px var(--e-2xl);
  }

  .hero__texto {
    max-width: none;
  }

  .seccion {
    padding-block: var(--e-2xl);
  }

  .seccion__titulo,
  .cierre__grande {
    max-width: none;
  }
}