/* ============================================
   FUENTE LOCAL — Gotham (texto general del sitio).
   Un @font-face por cada peso/estilo que realmente usamos;
   el navegador elige el archivo según font-weight y font-style.
   ============================================ */
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Font/Gotham-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Font/GothamBook.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Font/GothamBookItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Font/GothamMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Font/GothamMediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Font/Gotham-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Font/GothamBoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Font/Gotham-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   TOKENS — todo el diseño parte de estas variables.
   Si querés cambiar la paleta, empezá acá.
   ============================================ */
:root {
  --papel: #F7F3EC;
  --tinta: #101010;
  --grafito: #55524C;
  --bermellon: #C1432B;
  --ocre: #C89A3D;
  --linea: #DDD5C7;

  /* Color de los íconos de "Herramientas". Arranca en el verde
     de la franja activa por defecto; js/main.js lo pisa al
     tocar otra franja de color. */
  --color-herramientas: #7EC908;

  --font-display: 'Gotham', sans-serif;
  --font-body: 'Gotham', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --espacio: clamp(1.2rem, 3vw, 2.5rem);
  --radio: 2px; /* casi sin bordes redondeados: look de imprenta, no de app */
}

/* ============================================
   RESET básico
   ============================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

/* Fondo general de todo el sitio: la misma textura oscura del
   hero, fija (no se mueve al scrollear). Las secciones "claras"
   (Trayectoria, Educación, Sobre mí, Contacto) tienen su propio
   background: var(--papel) opaco para taparla y seguir siendo
   legibles; Herramientas queda transparent a propósito, así que
   ahí SÍ se ve esta textura por detrás. */
body {
  background: url('../img/fondo.jpg') center / cover no-repeat fixed;
  background-color: var(--tinta); /* resguardo mientras carga la imagen */
  color: var(--tinta);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

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

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--bermellon);
  outline-offset: 3px;
}

/* ============================================
   HEADER
   Fijo (flota sobre el contenido al scrollear), con un
   degradé de negro a transparente. Por eso el texto pasa
   a ser claro (--papel): antes estaba sobre un fondo
   sólido, ahora está siempre sobre el hero oscuro de fondo.
   ============================================ */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem var(--espacio);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
}

.logo {
  display: inline-flex;
  align-items: center;
}

/* Mismo truco que los íconos de Herramientas: el .png se usa como
   máscara y el color real lo pone background-color, a través de
   --color-herramientas — así el logo cambia de color junto con
   todo lo demás al tocar una franja de color en el hero. */
.logo-mark {
  display: inline-block;
  width: 64px;
  height: 31px;
  background-color: var(--color-herramientas);
  -webkit-mask-image: url('../img/logo-hh.png');
  mask-image: url('../img/logo-hh.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.2s ease;
}

.nav {
  display: flex;
  gap: 2rem;
  font-size: 0.95rem;
}

.nav a {
  position: relative;
  padding-bottom: 2px;
  color: var(--papel);
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  /* Mismo color "actual" que el logo, los íconos de Herramientas,
     etc. — cambia junto con las franjas del hero. */
  background: var(--color-herramientas);
  transition: width 0.25s ease;
}

.nav a:hover::after { width: 100%; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--papel);
}

/* ============================================
   HERO
   Las marcas de registro (✛) en las 4 esquinas
   son el elemento "firma" del diseño: una referencia
   directa a las marcas de registro de imprenta.
   ============================================ */
.hero {
  position: relative;
  /* Ocupa toda la pantalla (100vh/100svh). El nombre queda
     centrado verticalmente en esa altura; la franja de colores
     se saca del flujo (position:absolute, ver .swatches) y se fija
     siempre pegada abajo del todo, sin importar dónde quede el
     nombre. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: calc(var(--espacio) * 1.5) var(--espacio);
  color: var(--papel);
  overflow: hidden;

  /* Fondo transparente a propósito: se ve la textura oscura del
     body (img/fondo.jpg, fija) por detrás, igual que en Herramientas. */
  background: transparent;
}

/* Etiqueta pequeña en mayúsculas, usada en proyecto-ejemplo.html
   (ya no en el hero, que ahora no la necesita) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bermellon);
}

/* Capa de formas: cubre todo el hero, entre el fondo fijo y el
   nombre. js/main.js le va cambiando el "transform" según el
   scroll para que se mueva un poco más lento que el resto
   (esa diferencia de velocidad es lo que se lee como profundidad). */
.hero-shapes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none; /* que no tape clics en la franja de colores */
  will-change: transform;
}

/* La imagen del nombre: ancho fluido, sin deformarse.
   Subí el max-width si tu diseño necesita ocupar más lugar.
   Los PNG de img/nombre/ ya vienen recortados justo al borde
   del texto, así que no hace falta ningún recorte extra acá. */
.hero-name-img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  height: auto;
  display: block;
}

/* ---- Franja de colores / selector ----
   Ya no está clavada al fondo de la pantalla: ahora sigue en el
   flujo normal, pegada justo debajo de la imagen del nombre.
   El width/margin-left "rompen" el padding del .hero para que
   siga yendo de punta a punta de la pantalla. */
.swatches {
  /* Posición fija abajo del todo del hero, sin importar dónde
     termine el nombre (que ahora está centrado por separado). */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  height: 16px;
}

.swatch {
  flex: 1;
  border: none;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.swatch:hover { opacity: 1; }

.swatch.is-active {
  opacity: 1;
  transform: scaleY(1.4);
}

/* ============================================
   TRABAJO SELECCIONADO — grilla oscura con pestañas
   Sección con su propia paleta (oscura), separada del
   resto del sitio que es claro. Es un quiebre visual
   intencional, como suelen usar los portfolios de
   dirección/motion para que esta parte "pese" distinto.
   ============================================ */
.work {
  padding: calc(var(--espacio) * 2) var(--espacio);
}

.work--dark {
  background: var(--tinta);
  color: var(--papel);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}

/* Variante para títulos que van solos y centrados (ej. Herramientas) */
.section-head--centrado {
  justify-content: center;
}

.work-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 500;
}

.work-hint {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff66;
  margin-bottom: 1.5rem;
}

/* ---- Pestañas de categoría ---- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #ffffff26;
  margin-bottom: 2rem;
}

.tab {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: #ffffff4d;
  transition: color 0.2s ease;
}

.tab sup {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  margin-left: 0.2rem;
}

.tab:hover { color: #ffffffb3; }

.tab.is-active {
  color: var(--papel);
  font-weight: 600;
}

/* ---- Grilla de miniaturas ---- */
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--espacio) 1.2rem;
}

.thumb.is-hidden { display: none; }

.thumb-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ffffff0d;
}

.thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Blanco y negro por default; a color al pasar el mouse */
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.35s ease, transform 0.35s ease;
}

.thumb:hover .thumb-img img {
  filter: grayscale(0);
  transform: scale(1.03);
}

.play-btn {
  position: absolute;
  bottom: 0.7rem;
  left: 0.7rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #00000080;
  color: var(--papel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  backdrop-filter: blur(2px);
}

.thumb-link {
  display: block;
}

.thumb--video .thumb-img,
.thumb--image .thumb-img {
  cursor: pointer;
  /* 16:9 (equivalente a 1920x1080), distinto al 4:3 del resto de la grilla */
  aspect-ratio: 16 / 9;
}

.thumb--image .thumb-img {
  aspect-ratio: 4 / 3; /* las ilustraciones/redes no son necesariamente horizontales */
}

.thumb-info {
  display: block;
  margin-top: 0.7rem;
}

.thumb-info h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--papel);
}

.thumb-info p {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #ffffff66;
  margin-top: 0.2rem;
}

@media (max-width: 720px) {
  .thumb-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   LIGHTBOX DE VIDEO
   Overlay de pantalla completa. is-open lo agrega/saca
   js/main.js. El iframe se crea/destruye dinámicamente
   para que el video se corte de verdad al cerrar.
   ============================================ */
.lightbox {
  position: fixed;
  inset: 0;
  background: #0a0a09f2;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--espacio);
  z-index: 100;
}

.lightbox.is-open { display: flex; }

.lightbox-media {
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  background: #000;
}

.lightbox-media iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.lightbox-caption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffffb3;
  margin-top: 1.2rem;
}

/* ---- Lightbox de imagen (Ilustraciones / Redes) ---- */
.lightbox-image-wrap {
  width: 100%;
  max-width: 1100px;
  max-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image-wrap img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain; /* se ve completa, sin recortar, sea cual sea su forma */
}

/* Carrusel de imágenes relacionadas, debajo de la imagen grande.
   Si el proyecto no tiene data-gallery, el JS le agrega
   .is-empty y esto directamente no ocupa espacio. */
.lightbox-carousel {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.2rem;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 0.3rem;
}

.lightbox-carousel.is-empty {
  display: none;
}

.lightbox-carousel-item {
  flex: 0 0 auto;
  width: 80px;
  height: 60px;
  border: 2px solid transparent;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.lightbox-carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lightbox-carousel-item:hover { opacity: 0.9; }

.lightbox-carousel-item.is-active {
  opacity: 1;
  border-color: var(--ocre);
}

.lightbox-close,
.lightbox-nav {
  position: fixed;
  background: none;
  color: var(--papel);
  border: 1px solid #ffffff33;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: #ffffff1a;
}

.lightbox-close {
  top: var(--espacio);
  right: var(--espacio);
}

.lightbox-prev { left: var(--espacio); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--espacio); top: 50%; transform: translateY(-50%); }

@media (max-width: 720px) {
  .lightbox-prev, .lightbox-next { display: none; }
}

.piece-placeholder {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--grafito);
  text-align: center;
  opacity: 0.6;
}

/* Ficha técnica: estilo "hoja de producción" (se usa en proyecto-ejemplo.html) */
.ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--grafito);
}

/* ============================================
   TRAYECTORIA — lista vertical estilo "About" de referencia
   Fondo claro (papel/tinta), igual que el resto del sitio
   fuera de "Trabajo seleccionado". Reusa .section-head y
   .section-index, que ya existían para el título de esa
   otra sección.
   ============================================ */
/* Igual que .hero: ocupa toda la pantalla (100vh/100svh) sin
   importar el contenido. Trayectoria (arriba) mide lo que necesita
   su contenido, y Herramientas (flex: 1, ver .herramientas) se
   estira para completar el resto exacto — así Educación, que viene
   después de este div, nunca puede asomar en esa primera pantalla. */
.trayectoria-herramientas-vista {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.trayectoria {
  padding: calc(var(--espacio) * 2) var(--espacio) calc(var(--espacio) * 1.5);
  background: var(--papel);
}

.trayectoria-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 5rem);
}

.trayectoria-list {
  border-top: 1px solid var(--linea);
  margin-top: 1rem;
}

.trayectoria-row {
  display: grid;
  grid-template-columns: 40px 240px 1fr;
  gap: 1.5rem;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--linea);
}

.trayectoria-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ocre);
  padding-top: 0.3rem;
}

.trayectoria-nombre {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
}

/* El rol va en su propia línea, sin itálica y más chico,
   para separarlo visualmente del nombre de la empresa. */
.trayectoria-rol {
  display: block;
  font-style: normal;
  color: var(--grafito);
  margin-top: 0.2rem;
}

.trayectoria-anio {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--grafito);
  margin-bottom: 0.4rem;
}

.trayectoria-detalle p {
  max-width: 60ch;
  color: var(--grafito);
}

@media (max-width: 720px) {
  .trayectoria-row {
    grid-template-columns: 30px 1fr;
    row-gap: 0.6rem;
  }
  .trayectoria-detalle {
    grid-column: 1 / -1;
  }

  /* En pantalla chica el rol va inline: si entra, queda en la
     misma línea que el nombre de la empresa; si no entra, el
     navegador lo envuelve solo (no forzamos el salto). */
  .trayectoria-rol {
    display: inline;
    margin-top: 0;
    margin-left: 0.35rem;
  }
}

/* ============================================
   EDUCACIÓN — formato "barras horizontales alternadas"
   (inspirado en la sección Premios de kevinzeta.com).
   ============================================ */
.educacion {
  padding: var(--espacio) var(--espacio) 0;
  background: var(--tinta);
  color: var(--papel);
}

.educacion-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 5rem);
}

/* Las barras se salen del padding de la sección para llegar de
   punta a punta (full-bleed); cada .educacion-bar reintroduce ese
   padding por su cuenta para que el texto quede alineado con el
   resto de la página. La columna de la institución tiene un ancho
   fijo (no 1fr) y queda alineada a la izquierda dentro de esa
   columna, así no queda pegada al margen derecho. */
.educacion-bars {
  width: calc(100% + var(--espacio) * 2);
  margin-left: calc(var(--espacio) * -1);
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
}

.educacion-bar {
  display: grid;
  /* La última columna (1fr) queda vacía a propósito: empuja el
     nombre de la institución hacia el centro en vez de dejarlo
     pegado al margen derecho. */
  grid-template-columns: 90px 1fr 260px 1fr;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.3rem var(--espacio);
  background: var(--papel);
  color: var(--tinta);
}

.educacion-bar--alt {
  background: var(--tinta);
  color: var(--papel);
}

.educacion-bar-anio {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.55;
}

.educacion-bar-titulo {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
}

.educacion-bar-institucion {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  opacity: 0.7;
  text-align: left;
  /* Que nunca pase a la segunda línea: si no, esa barra queda más
     alta que las demás. Como sobra espacio vacío a la derecha
     (columna extra a propósito), puede estirarse sin problema. */
  white-space: nowrap;
}

@media (max-width: 640px) {
  .educacion-bar {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .educacion-bar-institucion {
    white-space: normal;
  }
}

/* ============================================
   HERRAMIENTAS
   Los .svg de img/herramientas/ se usan como mask-image: el
   navegador los trata como una plantilla de "recorte" en blanco
   y negro, y el color real lo pone background-color de acá.
   Por eso alcanza con UN solo archivo por ícono (no uno por
   color) — cambiar --color-herramientas en :root (o por JS)
   recolorea los 12 de una.

   Fondo transparente a propósito: no le ponemos background-color,
   así se ve lo que haya atrás (el papel del body, o lo que pongas
   más adelante).

   Todos los logos van en una sola fila horizontal, centrada, que
   envuelve a la línea de abajo si no entran (flex-wrap) en vez de
   una grilla de columnas fijas.
   ============================================ */
.herramientas {
  padding: calc(var(--espacio) * 0.15) var(--espacio) calc(var(--espacio) * 0.5);
  background: transparent;
  /* Fondo transparente = se ve la textura oscura del body detrás,
     así que el texto pasa a claro (igual que en Trabajo seleccionado). */
  color: var(--papel);
  /* Dentro de .trayectoria-herramientas-vista ocupa todo el
     espacio que sobre (flex: 1) y centra su contenido ahí, así
     el fondo oscuro llega justo hasta el final de la pantalla
     sin dejar un hueco de otro color. */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.herramientas-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  text-align: center;
}

.herramientas-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3rem 1.5rem;
  max-width: 1100px;
  margin: 0.75rem auto 0;
}

@media (max-width: 640px) {
  /* Con pocos íconos por fila, space-between los estira a los
     extremos y deja un hueco raro en el medio — mejor centrado. */
  .herramientas-grid {
    justify-content: center;
  }
}

.herramienta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

.herramienta p {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #ffffffb3;
}

.herramienta-icono {
  display: inline-block;
  width: 42px;
  height: 42px;
  background-color: var(--color-herramientas);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.2s ease;
}

.herramienta-icono--photoshop {
  -webkit-mask-image: url('../img/herramientas/photoshop-svgrepo-com.svg');
  mask-image: url('../img/herramientas/photoshop-svgrepo-com.svg');
}
.herramienta-icono--illustrator {
  -webkit-mask-image: url('../img/herramientas/illustrator-svgrepo-com.svg');
  mask-image: url('../img/herramientas/illustrator-svgrepo-com.svg');
}
.herramienta-icono--aftereffects {
  -webkit-mask-image: url('../img/herramientas/aftereffects-svgrepo-com.svg');
  mask-image: url('../img/herramientas/aftereffects-svgrepo-com.svg');
}
.herramienta-icono--indesign {
  -webkit-mask-image: url('../img/herramientas/indesign-svgrepo-com.svg');
  mask-image: url('../img/herramientas/indesign-svgrepo-com.svg');
}
.herramienta-icono--figma {
  -webkit-mask-image: url('../img/herramientas/figma-svgrepo-com.svg');
  mask-image: url('../img/herramientas/figma-svgrepo-com.svg');
}
.herramienta-icono--canva {
  -webkit-mask-image: url('../img/herramientas/canva-svgrepo-com.svg');
  mask-image: url('../img/herramientas/canva-svgrepo-com.svg');
}
.herramienta-icono--capcut {
  -webkit-mask-image: url('../img/herramientas/capcut-svgrepo-com.svg');
  mask-image: url('../img/herramientas/capcut-svgrepo-com.svg');
}
.herramienta-icono--blender {
  -webkit-mask-image: url('../img/herramientas/blender-svgrepo-com.svg');
  mask-image: url('../img/herramientas/blender-svgrepo-com.svg');
}
.herramienta-icono--html {
  -webkit-mask-image: url('../img/herramientas/html-124-svgrepo-com.svg');
  mask-image: url('../img/herramientas/html-124-svgrepo-com.svg');
}
.herramienta-icono--css {
  -webkit-mask-image: url('../img/herramientas/css3-02-svgrepo-com.svg');
  mask-image: url('../img/herramientas/css3-02-svgrepo-com.svg');
}
.herramienta-icono--javascript {
  -webkit-mask-image: url('../img/herramientas/javascript-155-svgrepo-com.svg');
  mask-image: url('../img/herramientas/javascript-155-svgrepo-com.svg');
}
.herramienta-icono--wordpress {
  -webkit-mask-image: url('../img/herramientas/wordpress-139-svgrepo-com.svg');
  mask-image: url('../img/herramientas/wordpress-139-svgrepo-com.svg');
}

/* ============================================
   SOBRE MÍ
   ============================================ */
/* Fondo transparente a propósito: se ve la textura oscura del
   body detrás (igual que Herramientas). El texto en cambio va
   metido en un recuadro con el color "actual" (--color-herramientas,
   la misma variable que cambian las franjas del hero), para que
   siga siendo legible sobre esa textura oscura. */
.about {
  padding: calc(var(--espacio) * 3) var(--espacio);
  background: transparent;
  color: var(--papel);
}

/* Contenedor simple (borde fino) para que el texto no quede
   "suelto" sobre la textura oscura del fondo — sin rellenarlo de
   color, para que la imagen de fondo se siga viendo detrás, igual
   que en el hero. */
.about-inner {
  position: relative;
  max-width: 56ch;
  margin: 0 auto;
  text-align: center;
  /* El borde usa el color "actual" (igual que el logo, Herramientas,
     etc.): cambia junto con las franjas del hero. */
  border: 1px solid var(--color-herramientas);
  padding: calc(var(--espacio) * 1.5);
  border-radius: var(--radio);
  transition: border-color 0.2s ease;
}

.about h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
}

.about p { color: #ffffffb3; }

/* ============================================
   CONTACTO / FOOTER
   Fondo transparente (se ve la textura general detrás, como en
   Herramientas y Sobre mí) con dos columnas: datos de contacto a
   la izquierda, form en una tarjeta con borde a la derecha.
   ============================================ */
.contact {
  text-align: center;
  padding: calc(var(--espacio) * 3) var(--espacio) var(--espacio);
  border-top: 1px solid rgba(247, 243, 236, 0.15);
  /* Mismo negro que el fondo de Educación. */
  background: var(--tinta);
  color: var(--papel);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--espacio) * 2);
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
  /* Centra la columna de la izquierda contra la altura real de la
     derecha (el form), en vez de quedar pegada arriba. */
  align-items: center;
}

.contact-info h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  margin-bottom: 0.6rem;
}

.contact-lead {
  color: #ffffffb3;
  margin-bottom: 1.5rem;
}

.contact-email {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--color-herramientas);
  border-bottom: 1px solid var(--color-herramientas);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.social {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.8rem;
}

/* ---- Form ---- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* Sin fondo propio: se mezcla con el negro de .contact, sin
     marcar una "caja" aparte — solo un borde fino para que se
     note dónde arranca el form. */
  background: transparent;
  border: 1px solid rgba(247, 243, 236, 0.3);
  border-radius: var(--radio);
  padding: calc(var(--espacio) * 1.2);
}

.contact-form label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffffb3;
  margin-top: 0.8rem;
}

.contact-form label:first-child { margin-top: 0; }

.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--papel);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(247, 243, 236, 0.3);
  border-radius: var(--radio);
  padding: 0.7rem 0.8rem;
  transition: border-color 0.2s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #ffffff66;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-herramientas);
}

.contact-form textarea {
  min-height: 130px;
  resize: vertical;
}

.contact-submit {
  margin-top: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--tinta);
  background: var(--color-herramientas);
  border: none;
  border-radius: var(--radio);
  cursor: pointer;
  transition: filter 0.2s ease;
}

.contact-submit:hover { filter: brightness(1.1); }

@media (max-width: 720px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Mismo truco que los íconos de Herramientas: el .svg se usa como
   máscara y el color real lo pone background-color, así que se
   puede cambiar en :hover sin necesitar un segundo archivo. */
.social-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: var(--papel);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.2s ease;
}

.social a:hover .social-icon {
  background-color: var(--color-herramientas);
}

.social-icon--instagram {
  -webkit-mask-image: url('../img/iconos/instagram-svgrepo-com.svg');
  mask-image: url('../img/iconos/instagram-svgrepo-com.svg');
}
.social-icon--behance {
  -webkit-mask-image: url('../img/iconos/behance-rounded-svgrepo-com.svg');
  mask-image: url('../img/iconos/behance-rounded-svgrepo-com.svg');
  /* La "Bē" es un logo ancho y bajo (ocupa ~65% del alto de su
     propio viewBox), a diferencia de los íconos redondos de al
     lado. Agrandamos la caja entera (no solo el mask-size) para
     que la letra alcance la misma altura visual que los otros,
     sin recortarla ni deformarla — por eso queda un poco más
     ancha, que es justamente la forma real del logo. */
  width: 34px;
  height: 34px;
}
.social-icon--linkedin {
  -webkit-mask-image: url('../img/iconos/linkedin-rounded-svgrepo-com.svg');
  mask-image: url('../img/iconos/linkedin-rounded-svgrepo-com.svg');
  /* Este SVG viene sin margen interno (el dibujo llega hasta el
     borde), a diferencia de Instagram — por eso con el mismo
     tamaño de caja se veía más grande. Lo compensamos achicando
     un poco el mask-size. */
  -webkit-mask-size: 92%;
  mask-size: 92%;
}

.footer-note {
  margin-top: 3rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--grafito);
}

/* ============================================
   BOTÓN FLOTANTE DE WHATSAPP
   Fijo en la esquina inferior derecha, visible en toda la página
   (no está adentro de ninguna sección). Mismo color "actual" que
   el logo, Herramientas, etc. — cambia con las franjas del hero.
   ============================================ */
.whatsapp-float {
  position: fixed;
  right: calc(var(--espacio) * 0.8);
  bottom: calc(var(--espacio) * 0.8);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-herramientas);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.whatsapp-float-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-color: var(--tinta);
  -webkit-mask-image: url('../img/iconos/whatsapp-128-svgrepo-com.svg');
  mask-image: url('../img/iconos/whatsapp-128-svgrepo-com.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

@media (max-width: 480px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    right: var(--espacio);
    bottom: var(--espacio);
  }
  .whatsapp-float-icon {
    width: 24px;
    height: 24px;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 720px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }

  .nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: var(--espacio);
    background: var(--papel);
    border: 1px solid var(--linea);
    padding: 1rem 1.5rem;
    gap: 1rem;
  }

  .nav.is-open a {
    color: var(--tinta); /* el header es claro solo acá adentro: fondo papel, texto oscuro */
  }

  .piece,
  .piece--wide,
  .piece:not(.piece--wide) {
    grid-column: span 12;
  }
}