/* ==========================================================================
   Portfolio — Diana Mendoza
   Hoja de estilos principal. Importa los tokens de diseño.
   Objetivo de accesibilidad: WCAG 2.2 AA.
   ========================================================================== */

@import url("tokens.css");

/* --------------------------------------------------------------------------
   Tipografía web (ABC Monument Grotesk)
   Archivos en assets/fonts/. Pesos: Light 300, Regular 400, Medium 500, Bold 700.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "ABC Monument Grotesk";
  src: url("../assets/fonts/ABCMonumentGrotesk-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Monument Grotesk";
  src: url("../assets/fonts/ABCMonumentGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Monument Grotesk";
  src: url("../assets/fonts/ABCMonumentGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Monument Grotesk";
  src: url("../assets/fonts/ABCMonumentGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Reset moderno
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  /* 1rem = 16px. No se fija px en font-size para respetar el zoom del usuario. */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  font-weight: var(--font-weight-regular);
  color: var(--color-content-1);
  background-color: var(--color-background-1);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Accesibilidad
   -------------------------------------------------------------------------- */

/* Foco visible y consistente solo para navegación por teclado.
   (El contorno respeta el border-radius propio de cada elemento.) */
:focus-visible {
  outline: 3px solid var(--color-focus-ring);       /* amarillo #f6c531 */
  box-shadow: 0 0 0 6px var(--color-content-1);     /* negro exterior → contraste en fondos claros */
  outline-offset: 3px;
}

/* Enlace "Saltar al contenido principal": oculto hasta recibir foco. */
/* Skip to main content — WCAG 2.2 AA criterio 2.4.1.
   Oculto visualmente hasta recibir foco (opacity + translateY).
   Aparece en la esquina superior izquierda al tabular. */
.skip-link {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background-color: var(--color-content-1);   /* #1a1a1a */
  color: var(--color-background-1);            /* white */
  font-family: var(--font-family-base);
  font-size: 18px;
  line-height: 24px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;

  /* Oculto hasta recibir foco */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.skip-link:focus {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  outline: 3px solid var(--color-focus-ring);
  box-shadow: 0 0 0 6px var(--color-content-1);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

/* Texto solo para lectores de pantalla. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Sistema de grid (reutilizable)
   - Contenido: 12 columnas, margen 120px, gutter 24px.
   - Header:    12 columnas, margen 64px,  gutter 20px.
   Todo el contenido se alinea a la izquierda (nunca centrado).
   -------------------------------------------------------------------------- */
:root {
  --grid-columns: 12;
  --grid-content-margin: 120px;
  --grid-content-gutter: 24px;
  --grid-header-margin: 64px;
  --grid-header-gutter: 20px;
  --layout-max: 90rem; /* 1440px */
}

/* Contenedor de contenido: margen izquierdo común de 120px. */
.container {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--grid-content-margin); /* 120px */
}

/* Contenedor del header: margen de 64px. */
.container--header {
  padding-inline: var(--grid-header-margin); /* 64px */
}

/* Rejillas reutilizables de 12 columnas, alineadas a la izquierda. */
.grid-content,
.grid-header {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  justify-content: start; /* nunca centrado */
}

.grid-content {
  column-gap: var(--grid-content-gutter); /* 24px */
}

.grid-header {
  column-gap: var(--grid-header-gutter); /* 20px */
}

@media (max-width: 48rem) {
  .container {
    padding-inline: var(--spacing-5);
  }
}

/* --------------------------------------------------------------------------
   Tipografía utilitaria
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: var(--font-size-label-s);
  line-height: var(--line-height-label-s);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-content-2);
}

/* --------------------------------------------------------------------------
   Cabecera y navegación
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Posición inicial: completamente transparente. */
  background: transparent;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* Activado por JS al detectar scroll. Sin sombra ni borde.
   Figma 183:3623: backdrop-blur-[4.15px], bg-white. */
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4.15px);
  -webkit-backdrop-filter: blur(4.15px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-5);
  padding-block: 0.9375rem; /* 15px (Figma) */
  min-height: 4.375rem; /* 70px */
}

.site-logo {
  font-size: var(--font-size-body-l);
  font-weight: var(--font-weight-bold);
}

/* --- Navegación (Figma: nav item con subrayado) ----------------------- */
.primary-nav ul {
  display: flex;
  gap: var(--spacing-6); /* 32px */
}

.primary-nav a {
  position: relative;
  display: inline-block;
  padding: var(--spacing-1); /* 4px */
  font-size: var(--font-size-button-m); /* 16px */
  line-height: var(--line-height-button-m); /* 20px */
  font-weight: var(--font-weight-regular);
  color: var(--color-content-1); /* #1a1a1a */
}

/* Subrayado animado: 1px que crece desde la izquierda. */
.primary-nav a::after {
  content: "";
  position: absolute;
  left: var(--spacing-1);
  right: var(--spacing-1);
  bottom: 0;
  height: 1px;
  background-color: var(--color-content-1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Activo / página actual: peso Medium (Figma estado Active). */
.primary-nav a[aria-current="page"] {
  font-weight: var(--font-weight-medium);
}

/* --------------------------------------------------------------------------
   Botón (DM / Button) — estados exactos de Figma
   default: relleno negro · hover: contorno · active: relleno · focus: anillo
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1); /* 4px */
  padding: var(--spacing-2) var(--spacing-4); /* 8px 16px */
  font-size: var(--font-size-button-m); /* 16px */
  line-height: var(--line-height-button-m); /* 20px */
  font-weight: var(--font-weight-regular);
  border-radius: 100px;
  /* Borde transparente para evitar salto de layout en hover. */
  border: 1px solid transparent;
  background-color: var(--color-background-inverse); /* #1a1a1a */
  color: var(--color-content-inverse); /* white */
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}

.btn__icon {
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  flex-shrink: 0;
  filter: brightness(0) invert(1); /* default: fondo negro → icono blanco */
}

/* Hover: fondo transparente/claro → icono negro (sin filtro). */
.btn:hover .btn__icon,
.btn:active .btn__icon {
  filter: none;
}

/* hover: fondo transparente, borde negro 1px, texto negro */
.btn:hover {
  background-color: transparent;
  border-color: var(--color-border-1); /* #1a1a1a */
  color: var(--color-content-1); /* #1a1a1a */
}

/* active: vuelve a relleno negro */
.btn:active {
  background-color: var(--color-background-inverse);
  border-color: transparent;
  color: var(--color-content-inverse);
}

/* focus: relleno negro + anillo amarillo 2px con offset (Figma) */
.btn:focus-visible {
  background-color: var(--color-background-inverse);
  border-color: transparent;
  color: var(--color-content-inverse);
  outline: 3px solid var(--color-focus-ring);
  box-shadow: 0 0 0 6px var(--color-content-1);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Enlace de acción (DM / Action button) — "Open case study"
   default: sin subrayado · hover: subrayado · active: Medium + subrayado
   focus: Medium + subrayado + anillo amarillo
   -------------------------------------------------------------------------- */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1); /* 4px */
  padding: var(--spacing-3) var(--spacing-2); /* 12px 8px */
  font-size: var(--font-size-button-m); /* 16px */
  line-height: var(--line-height-button-m); /* 20px */
  font-weight: var(--font-weight-regular);
  color: var(--color-content-1); /* #1a1a1a */
  width: fit-content;
}

.link__icon {
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  flex-shrink: 0;
}

/* Subrayado animado bajo el texto (crece desde la izquierda). */
.link__label {
  position: relative;
}

.link__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.link:hover .link__label::after,
.link:active .link__label::after,
.link:focus-visible .link__label::after {
  transform: scaleX(1);
}

/* active y focus: peso Medium (Figma) */
.link:active,
.link:focus-visible {
  font-weight: var(--font-weight-medium);
}

/* focus: anillo amarillo 2px offset 2px (Figma) */
.link:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  box-shadow: 0 0 0 6px var(--color-content-1);
  outline-offset: 3px;
}

/* Variante para fondos oscuros (footer). */
.link--inverse {
  color: var(--color-content-inverse);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Ocupa 100vh menos el header; centra verticalmente el contenido. */
.hero {
  scroll-margin-top: 5rem;
  min-height: calc(100vh - 4.375rem); /* 4.375rem = 70px header */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Contexto de posicionamiento para el icono Let's talk (absoluto). */
.hero__inner {
  position: relative;
}

/* Columna izquierda: título, lead y labels apilados con gap de 16px. */
.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4); /* 16px — Figma: gap-[16px] */
}

/* Título en una sola fila: "I am" (light) + texto animado (bold). */
.hero__title {
  display: flex;
  align-items: baseline; /* alinea los textos por la línea de base */
  gap: 1.3125rem;        /* 21px */
  font-size: var(--font-size-display-l); /* 64px */
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.hero__title .hero__title-thin {
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-display-l-light); /* 72px — Figma Light */
}

/* --- Animación 1: typewriter ------------------------------------------ */
.typewriter {
  display: inline;
  font-weight: var(--font-weight-bold);
}

.typewriter__caret {
  display: inline-block;
  width: 0.06em;
  height: 0.75em; /* igual que el cap-height del texto, sin sobresalir */
  margin-left: 0.06em;
  vertical-align: middle;
  background-color: currentColor;
  animation: caret-blink 1s steps(1) infinite;
}

@keyframes caret-blink {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

/* Fade usado solo cuando se reduce el movimiento (sin typewriter). */
.typewriter__text {
  white-space: nowrap; /* nunca rompe a dos líneas */
  transition: opacity 0.4s ease;
}

.typewriter__text.is-fading {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .typewriter__caret {
    display: none;
  }
}

.hero__lead {
  /* margin-top retirado: el espaciado lo gestiona .hero__content { gap } */
  max-width: 42rem;
  font-size: var(--font-size-body-l);
  line-height: var(--line-height-body-l);
  color: var(--color-content-1); /* #1A1A1A */
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  /* margin-top retirado: el espaciado lo gestiona .hero__content { gap } */
}

.tag {
  display: inline-flex;
  padding: 4px 12px; /* igual arriba y abajo → centrado visual dentro de los 26px */
  font-size: var(--font-size-label-m); /* 14px */
  line-height: var(--line-height-label-m); /* 18px */
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  border: 1px solid var(--color-border-2); /* #b2b2b2 */
  border-radius: var(--spacing-4); /* 16px */
  color: var(--color-content-1); /* #1a1a1a */
}

/* --------------------------------------------------------------------------
   Animación 2: icono Let's talk
   -------------------------------------------------------------------------- */
.lets-talk {
  /* Posición absoluta: alineado al borde derecho del contenido (right: 120px).
     bottom: 0 alinea la base del icono con la base de las labels.
     Medidas: Figma 272:5046 → 116.881 × 115.882px. */
  position: absolute;
  right: var(--grid-content-margin); /* 120px — margen del grid */
  /* -45px: alinea el centro del icono (58px) con el centro de las labels (13px).
     El icono se extiende 45px por debajo del contenido, dentro del espacio del hero. */
  bottom: -2.8125rem;
  display: grid;
  place-items: center;
  width: 7.25rem;  /* 116px — Figma: 116.881px */
  height: 7.25rem; /* 116px — Figma: 115.882px */
  border-radius: 50%;
}

/* El anillo de texto gira de forma continua. */
.lets-talk__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--color-content-1);
  font-size: 0.6875rem; /* 11px — proporcional al componente de 116px */
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  animation: lets-talk-spin 12s linear infinite;
}

@keyframes lets-talk-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Icono central: asterisco en reposo, smile en hover/focus.
   Figma: IconContact → w-[73px] h-[72px], posición 21.94px desde cada borde. */
.lets-talk__icon {
  width: 4.5625rem; /* 73px — Figma */
  height: 4.5rem;   /* 72px — Figma */
  background-image: url("../assets/images/icons/icon-letstalk-asterisk.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.2s ease;
}

.lets-talk:hover .lets-talk__icon,
.lets-talk:focus-visible .lets-talk__icon {
  background-image: url("../assets/images/icons/icon-letstalk-smile.svg");
  transform: scale(1.05);
}

/* Tablet ≤ 1024px: sigue absoluto con los mismos valores fijos. */
@media (max-width: 64rem) {
  .lets-talk {
    position: absolute;
    right: var(--grid-content-margin);
    bottom: -2.8125rem;
  }
}

/* Mobile ≤ 768px: el icono se oculta para no interferir con el contenido. */
@media (max-width: 48rem) {
  .lets-talk {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lets-talk__ring {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Sección genérica
   -------------------------------------------------------------------------- */
.section {
  scroll-margin-top: 5rem;
  padding-block: var(--spacing-8);
}

.section__title {
  font-size: var(--font-size-heading-l);
  line-height: var(--line-height-heading-l);
  font-weight: var(--font-weight-bold);
}

.section__subtitle {
  margin-top: var(--spacing-3);
  font-size: var(--font-size-subheading);
  line-height: var(--line-height-subheading);
  color: var(--color-content-2);
}

/* Padding vertical de la sección: 80px arriba y abajo (igual que #about). */
#work {
  padding-block: 5rem; /* 80px */
}

/* --------------------------------------------------------------------------
   The Work — rejilla de proyectos
   Grid de 4 columnas: el bloque de texto ocupa la 1ª celda (col 1, fila 1)
   y las cards llenan el resto (igual que el patrón de "About me").
   -------------------------------------------------------------------------- */
/* Grid de columnas fijas de 300px.
   Col 1: bloque de texto (300px explícito).
   Resto: auto-fill de 300px → a 1440px caben 3 (total 4 cols), a menos anchos
   las cards bajan de fila automáticamente sin overflow horizontal.
   A 1440px: (1200 - 300) / 300 = 3 auto-fill → idéntico al layout actual. */
.work {
  display: grid;
  grid-template-columns: 18.75rem repeat(auto-fill, 18.75rem);
  margin-top: var(--spacing-7);
}

/* Primera celda del grid: bloque de texto "The Work". */
.work__heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4); /* 16px */
  padding-top: var(--spacing-8); /* 64px */
  padding-right: var(--spacing-5);
}

/* display:contents → el div desaparece del layout y los li
   se convierten en grid items directos de .work. */
.work__cards {
  display: contents;
}

/* Ídem para el ul */
.work__grid {
  display: contents;
}

.work__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* cada línea se ajusta al ancho de su texto */
  gap: var(--spacing-2); /* 8px entre líneas */
  font-size: var(--font-size-heading-l); /* 48px */
  line-height: var(--line-height-heading-l); /* 48px */
  font-weight: var(--font-weight-bold);
}

/* Highlight (marcador amarillo) DETRÁS de cada palabra del título.
   Se usa en "The Work", "About me" y "Core Skills". */
.title-hl {
  position: relative;
  display: inline-block;
}

.title-hl__img {
  position: absolute;
  left: -5%; /* 110% de ancho: sobresale un 5% por cada lado */
  bottom: 0.08em; /* pegado al texto, empezando unos píxeles más abajo */
  z-index: -1; /* detrás del texto */
  width: 110%; /* un poco más ancho que el texto */
  height: auto;
  pointer-events: none;
}

/* Solo "The Work": línea un poco más alta y más larga (hasta la última letra). */
.work__title .title-hl__img {
  width: 116%;
  left: -3%; /* algo más de largo hacia el final del texto */
  transform: scaleY(1.3); /* un poco más alta */
  transform-origin: center bottom;
}

/* Línea de título que incluye el icono flecha (fuera del highlight). */
.title-with-icon {
  display: inline-flex;
  align-items: center;
}

/* Icono flecha junto al título (decorativo, 40×40). */
.title-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: var(--spacing-2); /* pequeño margen izquierdo */
}

.work__subtitle {
  font-size: var(--font-size-body-l); /* 20px */
  line-height: var(--line-height-body-l); /* 26px */
  color: var(--color-content-1);
}

/* Tablet ≤ 1024px: 2 columnas, heading ocupa fila completa. */
@media (max-width: 64rem) {
  .work {
    grid-template-columns: repeat(2, 1fr);
  }
  .work__heading {
    grid-column: 1 / -1;
    padding-top: 0;
    padding-right: 0;
  }
}

/* Mobile ≤ 768px: 1 columna. */
@media (max-width: 48rem) {
  .work {
    grid-template-columns: 1fr;
  }
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 18.75rem;  /* 300px fijo */
  height: 18.75rem; /* 300px */
  background-color: var(--color-background-1);
  /* outline da los 4 lados a cada card sin afectar al layout.
     En bordes compartidos entre cards adyacentes, los dos outline
     del mismo color se solapan en el mismo píxel → nunca se duplican.
     El heading y la celda vacía no tienen .project-card → sin borde. */
  outline: 1px solid var(--color-border-1);
  overflow: hidden;
}

/* --- Animación 4: imagen que sube como una persiana (de abajo a arriba) */
.project-card__image {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  clip-path: inset(100% 0 0 0); /* cerrada */
  transition: clip-path 0.55s ease-in-out;
}

.project-card:hover .project-card__image,
.project-card:focus-within .project-card__image {
  clip-path: inset(0 0 0 0); /* abierta */
}

/* Candado (solo Inditex): por encima de la imagen. */
.project-card__lock {
  position: absolute;
  top: var(--spacing-6); /* 32px */
  right: var(--spacing-5); /* 24px */
  z-index: 4;
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  pointer-events: none; /* no bloquea el clic de la tarjeta */
}

/* <img> no responde a color/currentColor → usar filter para invertir a blanco. */
.project-card:hover .project-card__lock img,
.project-card:focus-within .project-card__lock img {
  filter: brightness(0) invert(1);
}

/* Contenido textual (queda cubierto por la imagen en hover). */
.project-card__body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2); /* 8px */
  /* 68px arriba (32 padding + 20 fila candado + 16 gap, Figma), 24px lados. */
  padding: 4.25rem var(--spacing-5) 0;
}

.project-card__name {
  font-size: var(--font-size-heading-s); /* 32px */
  line-height: var(--line-height-heading-s); /* 40px */
  font-weight: var(--font-weight-light); /* Light */
  text-transform: uppercase;
  color: var(--color-content-1);
}

.project-card__roles {
  font-size: var(--font-size-label-s); /* 12px */
  line-height: var(--line-height-label-s); /* 16px */
  text-transform: uppercase;
  color: var(--color-content-2); /* #504d49 */
}

.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2); /* 8px */
}

/* Footer: barra inferior con el enlace; se oscurece en hover. */
.project-card__footer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  min-height: 2.8125rem; /* 45px */
  padding-left: var(--spacing-4); /* 16px */
  padding-right: 10px;
  transition: background-color 0.3s ease;
}

.project-card:hover .project-card__footer,
.project-card:focus-within .project-card__footer {
  background-color: var(--color-background-inverse); /* #1a1a1a */
}

.project-card:hover .project-card__footer .link,
.project-card:focus-within .project-card__footer .link {
  color: var(--color-content-inverse); /* texto blanco sobre footer oscuro */
}

@media (prefers-reduced-motion: reduce) {
  /* La imagen se revela al instante (sin animación de persiana). */
  .project-card__image {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Tabs: About me / Core Skills
   -------------------------------------------------------------------------- */
/* Contenedor: tabs a la derecha (Figma: Header navigation items-end). */
.tabs {
  display: flex;
  flex-direction: column;
}

/* DM /Tabs: pill blanco con borde gris claro. */
.tabs__list {
  align-self: flex-end;
  display: inline-flex;
  gap: var(--spacing-2); /* 8px */
  padding: var(--spacing-2); /* 8px */
  background-color: var(--color-background-1); /* white */
  border: 1px solid var(--color-border-1); /* #1a1a1a (Figma: dm/border/1) */
  border-radius: 999px;
}

/* Tabs / Item — State=default (Figma 182:2124):
   fondo transparente, texto dm/content/1, peso Regular. */
.tabs__tab {
  padding: var(--spacing-2) var(--spacing-4); /* 8px 16px */
  font-size: var(--font-size-button-m); /* 16px */
  line-height: var(--line-height-button-m); /* 20px */
  font-weight: var(--font-weight-regular); /* Regular (400) */
  color: var(--color-content-1); /* dm/content/1 #1a1a1a */
  background-color: transparent;
  border: 0;
  border-radius: 100px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Reserva el ancho del texto en peso Medium (el más ancho) en TODOS los
   estados, para que el tab mantenga un ancho fijo igual que el componente
   de Figma y no salte al pasar de Regular (default) a Medium (hover/active).
   visibility:hidden lo mantiene fuera del árbol de accesibilidad. */
.tabs__tab::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: var(--font-weight-medium); /* Medium (500) */
}

/* Tabs / Item — State=hover (Figma 182:2125):
   fondo dm/background/4, texto dm/content/1, peso Medium.
   Acotado al tab NO activo (el activo conserva su propio estado). */
.tabs__tab:not([aria-selected="true"]):hover {
  background-color: var(--color-background-4); /* dm/background/4 #e4e4e4 */
  color: var(--color-content-1); /* dm/content/1 #1a1a1a */
  font-weight: var(--font-weight-medium); /* Medium (500) */
}

/* Tabs / Item — State=active (Figma 182:2126):
   fondo dm/background/inverse, texto dm/content/inverse, peso Medium. */
.tabs__tab[aria-selected="true"] {
  background-color: var(--color-background-inverse); /* dm/background/inverse #1a1a1a */
  color: var(--color-content-inverse); /* dm/content/inverse white */
  font-weight: var(--font-weight-medium); /* Medium (500) */
}

/* Tabs / Item — State=Focus (Figma 183:2841):
   anillo de 2px sólido dm/semantic/highlight2 separado ~4px (inset -4px). */
.tabs__tab:focus-visible {
  outline: 2px solid var(--color-focus-ring); /* dm/semantic/highlight2 #f6c531 */
  outline-offset: 4px;
}

.tabs__panel {
  margin-top: var(--spacing-6); /* 32px (Figma: gap-32px) */
}

#panel-about {
  margin-bottom: var(--spacing-6); /* 32px */
}

.tabs__panel[hidden] {
  display: none;
}

/* --- About me ---------------------------------------------------------
   Grid de 12 columnas (margen 120px, gutter 24px):
   heading 3 cols · imagen 4 cols · contenido 5 cols (Figma 195:2415). */

/* Padding vertical de la sección: 80px arriba y abajo (Figma). */
#about {
  padding-block: 5rem; /* 80px */
}

.about {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-content-gutter); /* 24px */
  align-items: start;
}

/* Columna izquierda (3 cols): título empujado 64px hacia abajo. */
.about__heading {
  grid-column: span 3;
  padding-top: var(--spacing-8); /* 64px */
}

/* Título "About me": dos líneas, 48px, igual que "The Work". */
.about__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2); /* 8px */
  font-size: var(--font-size-heading-l); /* 48px */
  line-height: var(--line-height-heading-l); /* 48px */
  font-weight: var(--font-weight-bold);
}

/* Highlight idéntico al de "The Work" (mismos valores en ambas líneas). */
.about__title .title-hl__img {
  width: 116%;
  left: -3%;
  transform: scaleY(1.3);
  transform-origin: center bottom;
}

/* Solo el highlight de "me": ~4px más alto, creciendo hacia arriba
   (origen en la base para que el borde inferior quede fijo). */
.about__title .title-with-icon .title-hl__img {
  transform: scaleY(1.66);
  transform-origin: center bottom;
}

/* Columna central (4 cols): imagen (el marco ya viene dentro del .webp). */
.about__image {
  grid-column: 4 / 8; /* columnas 4–7 */
  justify-self: end; /* alinea a la derecha del área para fijar el gap al texto */
  margin-right: 60px; /* 24px gutter + 60px = 84px hasta el texto */
  position: relative;
  width: max-content;
  max-width: 100%;
}

/* Foto: 274px de ancho exacto, altura proporcional. */
.about__photo {
  display: block;
  width: 274px;
  max-width: 100%;
  height: auto;
}

/* Columna derecha: últimas 5 columnas (Figma 195:2413). */
.about__content {
  grid-column: 8 / 13;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5); /* 24px */
  padding-top: var(--spacing-7); /* 48px (Figma py-48) */
}

.about__lead {
  font-size: var(--font-size-heading-m); /* 40px */
  line-height: var(--line-height-heading-m); /* 48px */
  font-weight: var(--font-weight-light);
  color: var(--color-content-1);
}

.about__text {
  font-size: var(--font-size-body-m); /* 16px */
  line-height: var(--line-height-body-m); /* 24px */
  color: var(--color-content-1);
}

.about__text p + p {
  margin-top: var(--spacing-5); /* 24px entre párrafos */
}

/* Apila las columnas en tablet/móvil. */
@media (max-width: 64rem) {
  .about__heading,
  .about__image,
  .about__content {
    grid-column: 1 / -1; /* cada bloque a ancho completo */
  }
  .about__heading {
    padding-top: 0;
  }
  .about__image {
    justify-self: start; /* sin alineación derecha al apilar */
    margin-right: 0;
  }
  .about__content {
    padding-top: 0;
  }
}

/* --- Core Skills (Figma 199:2036) ------------------------------------- */

/* Grid de 12 columnas: heading 6 cols izquierda · acordeón 6 cols derecha. */
.skills {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-content-gutter);
}

/* Columna izquierda (6 cols): título + subtítulo. pt-24px / gap-12px (Figma). */
.skills__heading-col {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3); /* 12px */
  padding-top: var(--spacing-5); /* 24px */
}

/* Título "Core Skills": dos líneas, 48px Bold, igual que "The Work". */
.skills__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2); /* 8px */
  font-size: var(--font-size-heading-l); /* 48px */
  line-height: var(--line-height-heading-l); /* 48px */
  font-weight: var(--font-weight-bold);
}

/* Highlight idéntico al de "The Work" y "About me". */
.skills__title .title-hl__img {
  width: 116%;
  left: -3%;
  transform: scaleY(1.3);
  transform-origin: center bottom;
}

/* Subtítulo: Regular 20px / 26px (Figma 199:2034 — DM/Body/L/Regular). */
.skills__subtitle {
  font-size: var(--font-size-body-l); /* 20px */
  line-height: var(--line-height-body-l); /* 26px */
  font-weight: var(--font-weight-regular);
  color: var(--color-content-1);
}

/* --- Acordeón (Figma 210:2836) ---------------------------------------- */

/* Columna derecha (6 cols). */
.accordion {
  grid-column: 7 / 13;
}

/* Estado cerrado: el <button> lleva el border-bottom (Figma State=Close). */
.accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  padding: var(--spacing-3) var(--spacing-1); /* 12px 4px (Figma: py-12 px-4) */
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border-1); /* dm/border/1 */
  cursor: pointer;
  text-align: left;
}

/* Estado abierto: el border pasa al contenido, el header lo pierde. */
.accordion__header[aria-expanded="true"] {
  border-bottom: none;
}

/* Título del acordeón: Bold 20px / 28px (Figma DM/Body/L/Bold). */
.accordion__title-text {
  font-size: var(--font-size-body-l); /* 20px */
  line-height: var(--line-height-subheading); /* 28px */
  font-weight: var(--font-weight-bold);
  color: var(--color-content-1); /* dm/content/1 #1a1a1a */
}

/* Icono +/− dibujado con dos barras CSS (Figma: 20×20px). */
.accordion__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Cerrado (default): muestra Add (+), oculta Substract (−). */
.accordion__icon-img--open  { display: none; }
.accordion__icon-img--closed { display: block; }

/* Abierto: oculta Add (+), muestra Substract (−). */
.accordion__header[aria-expanded="true"] .accordion__icon-img--closed { display: none; }
.accordion__header[aria-expanded="true"] .accordion__icon-img--open   { display: block; }

/* Contenido expandido: fade + expansión de altura simultánea.
   grid-template-rows anima la altura; opacity el fade.
   inert (gestionado por JS) excluye el contenido de AT y teclado
   cuando está colapsado, sin necesidad de display:none ni hidden. */
.accordion__content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 300ms ease, opacity 300ms ease;
}

/* Hijo directo del grid: solo min-height:0, sin padding ni border.
   El padding en este nivel impide que 0fr colapse a 0px. */
.accordion__content > * {
  min-height: 0;
}

/* Nieto: recibe el estilo visual. Queda clipeado cuando el grid está en 0fr. */
.accordion__content > * > * {
  padding: var(--spacing-2) var(--spacing-1) var(--spacing-5); /* 8px 4px 24px */
  border-bottom: 1px solid var(--color-border-1);
  font-size: var(--font-size-body-m); /* 16px */
  line-height: var(--line-height-body-m); /* 24px */
  font-weight: var(--font-weight-regular);
  color: var(--color-content-1);
}

.accordion__header[aria-expanded="true"] + .accordion__content {
  grid-template-rows: 1fr;
  opacity: 1;
}

.accordion__content p + p {
  margin-top: var(--spacing-3); /* 12px */
}

@media (prefers-reduced-motion: reduce) {
  .accordion__content {
    transition: none;
  }
}

/* Foco visible en el header del acordeón. */
.accordion__header:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Banner de logos
   -------------------------------------------------------------------------- */
.logos {
  border-bottom: 1px solid var(--color-border-3);
  overflow: hidden;
}

/* --- Animación 3: marquee infinito ------------------------------------ */
.logos__marquee {
  display: flex;
  width: max-content;
  padding-block: var(--spacing-7);
  animation: logos-scroll 30s linear infinite;
}

.logos__marquee:hover {
  animation-play-state: paused;
}

@keyframes logos-scroll {
  to {
    /* Desplaza exactamente una copia (la mitad del contenido total). */
    transform: translateX(-50%);
  }
}

.logos__track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--spacing-7);
}

.logos__item img {
  height: 2.5rem; /* 40px */
  width: auto;
}

@media (prefers-reduced-motion: reduce) {
  .logos__marquee {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-5);
    width: 100%;
  }
  /* Sin movimiento, la copia duplicada sobra. */
  .logos__track[aria-hidden="true"] {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Pie de página
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Footer (Figma 203:2730)
   -------------------------------------------------------------------------- */

/* Fondo negro, breathing room superior de 146px (Figma: pt-146px). */
.site-footer {
  background-color: var(--color-background-inverse);
  color: var(--color-content-inverse);
  padding-top: 9.125rem; /* 146px — no hay token para este valor */
}

.site-footer a {
  color: var(--color-content-inverse);
}

/* Columna flex: bloque título · bloque acciones (Figma: Content). */
.footer__content {
  display: flex;
  flex-direction: column;
  gap: 10.8125rem; /* 173px — distancia subtítulo → enlaces */
  padding-bottom: var(--spacing-5); /* 24px — alinea con el pb-24px del CTA */
}

/* Título + lead: gap-8px (Figma: gap título → subtítulo). */
.footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2); /* 8px */
}

/* "Let´s talk!" — 96px Bold, line-height 68px (Figma: text-96px leading-68px). */
.footer__title {
  font-size: 4rem; /* 64px */
  line-height: var(--line-height-display-l-bold); /* 68px */
  font-weight: var(--font-weight-bold);
  color: var(--color-content-inverse);
}

/* Lead — DM/Heading/S/Regular: 32px / 40px, max-width 572px. */
.footer__lead {
  font-size: 2rem; /* 32px */
  line-height: var(--line-height-heading-s); /* 40px */
  font-weight: var(--font-weight-light); /* 300 */
  color: var(--color-content-inverse);
  max-width: 35.75rem; /* 572px */
}

/* Fila inferior: enlaces izq · CTA der (Figma: justify-between, items-start). */
.footer__actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Lista de enlaces (Figma: gap-20px). */
.footer__links {
  display: flex;
  gap: 1.25rem; /* 20px */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* DM / Action button — px-8px py-12px gap-4px (Figma 285:5582). */
.footer__action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1); /* 4px */
  padding: var(--spacing-3) var(--spacing-2); /* 12px 8px */
  font-size: var(--font-size-button-m); /* 16px */
  line-height: var(--line-height-button-m); /* 20px */
  font-weight: var(--font-weight-regular);
  color: var(--color-content-inverse);
  text-decoration: none;
}

/* Default (Figma 286:5657): Line white = size-0 → línea invisible (width: 0).
   Hover (Figma 286:5663): Line white crece a w-119px → línea visible.
   Implementado con ::after que crece de izquierda a derecha. */
.footer__link-label {
  position: relative;
}

.footer__link-label::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-content-inverse); /* white */
  transition: width 0.3s ease;
}

.site-footer .footer__action-link:hover .footer__link-label::after {
  width: 100%;
}

.footer__link-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1); /* versión dark: icono negro → blanco */
}

/* Contenedor CTA — alineado a la derecha, pb-24px (Figma 285:5584). */
.footer__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-bottom: var(--spacing-5); /* 24px */
}

/* DM / Button — Default (Figma 286:5606): fondo blanco, texto negro, pill.
   Scoped bajo .site-footer para superar la especificidad de .site-footer a.
   border transparente reserva espacio para el borde de hover sin desplazar layout. */
.site-footer .footer__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1); /* 4px */
  padding: var(--spacing-2) var(--spacing-4); /* 8px 16px */
  background-color: var(--color-background-1); /* white */
  color: var(--color-content-1); /* dm/content/1 #1a1a1a */
  font-size: var(--font-size-body-m); /* 16px */
  line-height: var(--line-height-body-m); /* 24px */
  font-weight: var(--font-weight-regular);
  border: 1px solid transparent; /* reserva espacio para el borde de hover */
  border-radius: 100px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Hover (Figma 286:5641): bg transparent · borde blanco · texto blanco. */
.site-footer .footer__cta-btn:hover {
  background-color: transparent;
  border-color: var(--color-border-inverse); /* dm/border/inverse white */
  color: var(--color-content-inverse); /* dm/content/inverse white */
}

/* Active (Figma 286:5611): igual que default — bg blanco, texto negro. */
.site-footer .footer__cta-btn:active {
  background-color: var(--color-background-1);
  border-color: transparent;
  color: var(--color-content-1);
}

/* Focus (Figma 286:5631): bg blanco + ring amarillo ~4px (inset -4px). */
.site-footer .footer__cta-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring); /* dm/semantic/highlight2 #f6c531 */
  outline-offset: 4px;
}

.footer__cta-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  /* default: botón blanco → icono negro es visible sin filtro */
}

/* Hover: fondo transparente → icono negro invisible → invertir a blanco. */
.site-footer .footer__cta-btn:hover .footer__cta-icon {
  filter: brightness(0) invert(1);
}

/* Active del action link (Figma 286:5669): peso Medium. */
.site-footer .footer__action-link:active {
  font-weight: var(--font-weight-medium); /* dm/content/inverse + Medium (500) */
}

/* Focus del action link (Figma 286:5681): ring amarillo inset-[-2px]. */
.site-footer .footer__action-link:focus-visible {
  outline: 2px solid var(--color-focus-ring); /* dm/semantic/highlight2 #f6c531 */
  outline-offset: 2px; /* inset-[-2px] de Figma */
}

/* Barra inferior — border-top blanco, pt-32px, pb-64px (Figma 203:2740). */
.footer__bar {
  border-top: 1px solid var(--color-border-inverse); /* white */
  padding-top: var(--spacing-6); /* 32px */
  padding-bottom: var(--spacing-8); /* 64px */
}

/* Copyright — 16px Regular white, alineado a la derecha (Figma 203:2741). */
.footer__copyright {
  font-size: var(--font-size-body-m); /* 16px */
  line-height: var(--line-height-body-m); /* 24px */
  font-weight: var(--font-weight-regular);
  color: var(--color-content-inverse);
  text-align: right;
}

/* --------------------------------------------------------------------------
   Botón Back — páginas de detalle de proyecto
   -------------------------------------------------------------------------- */
.page-nav {
  position: relative;
  z-index: 10;
  padding-block: 16px;
}

.btn-back {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-color: var(--color-content-1);
  color: var(--color-background-1);
  border-radius: 100px;
  padding: 8px;
  width: 44px;
  height: 44px;
  text-decoration: none;
  overflow: hidden;
  transition: padding 300ms ease, width 300ms ease;
}

.btn-back:hover {
  width: auto;
}

.btn-back img {
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}

.btn-back__label {
  font-size: var(--font-size-button-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-button-m);
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 300ms ease, opacity 300ms ease;
}

.btn-back:hover {
  padding: 8px 16px 8px 8px;
}

.btn-back:hover .btn-back__label {
  max-width: 80px;
  opacity: 1;
}

.btn-back:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  box-shadow: 0 0 0 6px var(--color-content-1);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-back,
  .btn-back__label {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Scroll reveal
   Solo activa la ocultación inicial cuando JS ha cargado correctamente
   (body.js-reveal-ready). Sin JS, todo es visible por defecto.
   -------------------------------------------------------------------------- */
body.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 600ms ease, transform 600ms ease;
}

body.js-reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body.js-reveal-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}