/* MuseoModerno + Nunito Sans + Poppins se cargan desde Google Fonts en index.html
   como WOFF2 en una sola petición HTTP — no se usan TTF locales */

/* ================================================
   VARIABLES
   ================================================ */
:root {
  --red:        #E41C37;
  --red-dark:   #D9193F;
  --dark:       #2A000E;
  --darker:     #1C0008;
  --gray-light: #E9E9E9;
  --gray-mid:   #D3D3D3;
  --cream:      #E8E7E6;
  --white:      #FFFFFF;
  --border:     #ececf0;
  --text-gray:  #717182;

  --font-display: 'MuseoModerno', sans-serif;
  --font-body:    'MuseoModerno', sans-serif;
  --font-ui:      'Poppins', sans-serif;

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-nav:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================================================
   RESET & BASE
   ================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* scroll-behavior nativo desactivado: Lenis (js/smooth-scroll.js) ahora
   controla el suavizado del scroll para evitar que ambos compitan */

body {
  font-family: var(--font-body);
  background: var(--red);
  overflow-x: hidden;
}

/* Grain elegante — capa fija sobre toda la web */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.65s steps(1) infinite;
}

@keyframes grain {
  0%  { transform: translate(0,    0);    }
  12% { transform: translate(-2%,  3%);   }
  25% { transform: translate(3%,  -1%);   }
  37% { transform: translate(-1%,  4%);   }
  50% { transform: translate(4%,  -3%);   }
  62% { transform: translate(-3%,  1%);   }
  75% { transform: translate(1%,  -4%);   }
  87% { transform: translate(-4%,  2%);   }
  100%{ transform: translate(2%,  -2%);   }
}

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

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

/* ================================================
   ANIMACIONES — CLASES BASE
   ================================================ */
@keyframes heroTitle {
  from { opacity: 0; transform: scale(0.94) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scrollDot {
  0%   { transform: translateY(0);    opacity: 1; }
  55%  { transform: translateY(13px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* Scroll-triggered: estado inicial */
.anim-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1.1s var(--ease-out),
              transform 1.1s var(--ease-out);
  will-change: transform, opacity;
}

.anim-up.visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

@keyframes tool-pop {
  0%   { opacity: 0; transform: scale(0.4); }
  55%  { opacity: 1; transform: scale(1.18); }
  75%  { transform: scale(0.93); }
  100% { opacity: 1; transform: scale(1); }
}

.anim-tool { opacity: 0; }

.anim-tool.visible {
  animation: tool-pop 0.45s var(--ease-spring) both;
  animation-delay: calc(var(--d) * 55ms);
}

/* Hero animations (on load) */
.anim-hero-status {
  animation: heroSlideUp 1s var(--ease-out) both;
}

.anim-hero-title {
  animation: heroTitle 1.4s var(--ease-out) both;
}

.anim-hero-info {
  animation: heroSlideUp 1.1s var(--ease-out) both;
  animation-delay: 0.8s;
}

.anim-hero-nav {
  animation: heroFadeIn 1s ease both;
  animation-delay: 1.2s;
}

html[data-visited="true"] .anim-hero-nav {
  animation: none;
  opacity: 1;
}

/* Primera visita: la revelación espera a que termine el intro loader */
html:not([data-visited]) .anim-hero-info {
  animation-delay: 1.5s;
}

html:not([data-visited]) .anim-hero-nav {
  animation-delay: 1.8s;
}

html:not([data-visited]) .scroll-hint {
  animation-delay: 1.9s;
}

/* ================================================
   INTRO LOADER — letras tumbadas → de pie (solo primera visita)
   ================================================ */
html[data-visited="true"] .intro-loader {
  display: none;
}

.intro-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4rem;
  background: transparent;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}

.intro-loader.is-hidden {
  opacity: 0;
}

.intro-loader-count {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  letter-spacing: 0.08em;
  color: var(--white);
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

/* Letras esperando fuera de cámara, listas para ser "lanzadas" a su sitio */
html.intro-active .hero-title .letter:not(.space) {
  pointer-events: none;
  transform-origin: 50% 50%;
  transform:
    translate(var(--intro-x, 0px), var(--intro-y, 0px))
    rotate(var(--intro-rot, 0deg));
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

/* Al añadir esta clase (un frame después), disparan la transición a su sitio */
html.intro-run .hero-title .letter:not(.space) {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html.intro-active .hero-title .letter:not(.space) {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .intro-loader {
    transition: none;
  }
}

/* ================================================
   HERO
   ================================================ */
.hero {
  min-height: 100vh;
  background: var(--red-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 80px 2rem 7rem;
}

.hero-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.hero-center .contact-status {
  margin-bottom: 0;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4rem, 13vw, 200px);
  color: rgb(65, 8, 19);
  letter-spacing: -0.02em;
  line-height: 1.4;
  text-align: center;
  user-select: none;
  cursor: pointer;
}

/* Cada letra envuelta en span por JS */
.hero-title .letter {
  display: inline-block;
  cursor: grab;
  user-select: none;
  touch-action: none;
  will-change: transform, opacity;
}

.hero-title .letter:active { cursor: grabbing; }

.hero-title .letter.space {
  display: inline-block;
  width: 0.35em;
  cursor: default;
}


.hero-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13rem;
  width: 100%;
  max-width: 1100px;
}

.hero-info-item {
  font-family: var(--font-display);
  color: var(--white);
  text-align: center;
}

.hero-info-item.faded {
  font-weight: 400;
  font-size: 0.85rem;
  opacity: 0.75;
}

.hero-info-item.strong {
  font-weight: 700;
  font-size: 0.9rem;
}

/* Scroll indicator — ratón sólido (filled) con dot animado */
.scroll-hint {
  position: absolute;
  bottom: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  animation: heroFadeIn 0.6s ease both;
  animation-delay: 1.3s;
  transition: opacity 0.5s ease;
  cursor: default;
}

.scroll-hint.hidden {
  opacity: 0;
  pointer-events: none;
}

.scroll-mouse {
  width: 26px;
  height: 42px;
  background: rgba(42, 0, 14, 0.55);
  border-radius: 13px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 8px;
  transition: background 0.3s ease;
}

.scroll-hint:hover .scroll-mouse {
  background: rgba(42, 0, 14, 0.75);
}

.scroll-dot {
  display: block;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: scrollDot 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.scroll-label {
  font-family: var(--font-display);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

/* ================================================
   CUSTOM CURSOR
   ================================================ */
.cursor {
  position: fixed;
  width: 90px;
  height: 90px;
  background: var(--white);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.45s var(--ease-nav),
              opacity 0.45s ease;
}

.cursor.is-visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.cursor-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.46rem;
  letter-spacing: 0.1em;
  color: var(--dark);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.6;
  user-select: none;
}

/* Transición compartida: game + links del nav */
.nav-game,
.bottom-nav a { transition: color 0.25s ease, background 0.25s ease; }

/* Botón del arcade en el nav */
.nav-game {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.nav-game:hover {
  color: var(--red);
  background: rgba(228, 28, 55, 0.1);
}

.bottom-nav.nav--on-gray .nav-game        { color: rgba(255, 255, 255, 0.5); }
.bottom-nav.nav--on-gray .nav-game:hover  {
  color: var(--white);
  background: rgba(255, 255, 255, 0.15);
}

.nav-game.active {
  color: var(--red);
  background: rgba(228, 28, 55, 0.1);
}

.bottom-nav.nav--on-gray .nav-game.active {
  color: var(--white);
  background: rgba(255, 255, 255, 0.15);
}

.nav-game:hover svg {
  animation: game-wiggle 0.45s ease;
}

@keyframes game-wiggle {
  0%,100% { transform: rotate(0deg) translateY(0); }
  20%      { transform: rotate(-8deg) translateY(-1px); }
  40%      { transform: rotate(8deg) translateY(-1px); }
  60%      { transform: rotate(-5deg) translateY(0); }
  80%      { transform: rotate(5deg) translateY(0); }
}

/* Tooltip */
.nav-game-tip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--darker);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 20px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.nav-game:hover .nav-game-tip {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) {
  .hero, .hero * { cursor: none !important; }
}

@media (hover: none) {
  .cursor { display: none; }
}

/* ================================================
   CURSOR ROJO GLOBAL — todas las páginas del portafolio
   (en index.html se desactiva dentro de .hero, que ya tiene su propio cursor)
   ================================================ */
@media (pointer: fine) {
  body { cursor: none; }
}

.site-cursor {
  position: fixed;
  width: 24px;
  height: 24px;
  background: #FFFFFF;
  mix-blend-mode: difference;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s var(--ease-out);
  will-change: left, top;
}

.site-cursor.active {
  opacity: 1;
}

/* ── Barra fina de progreso de scroll, fija abajo del viewport ── */
.site-scroll-progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(42, 0, 14, 0.08);
  z-index: 9997;
}

.site-scroll-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--red);
}

/* ================================================
   TRANSICIÓN ENTRE PÁGINAS — cortina que cubre y se retira
   ================================================ */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--dark);
  transform: translateY(0);
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
}

.page-transition.is-revealed {
  transform: translateY(-100%);
}

/* ================================================
   TOP NAV (fija)
   ================================================ */
/* Envoltorio solo de posicionamiento: NO es flex — así su ancho es el del
   nav y el translate(-50%) centra la cápsula principal exactamente igual
   que antes. El tag de idioma cuelga de él con position:absolute, sin
   afectar ese centrado (ver .nav-lang-tag más abajo). */
.nav-wrap {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  z-index: 1000;
}

.bottom-nav {
  position: relative;
  z-index: 2;
  background: rgba(233, 233, 233, 0.92);
  border-radius: 50px;
  padding: 10px 12px;
  /* inline-flex (no flex): como bloque normal con width:auto, su ancho
     dependía del cálculo shrink-to-fit del .nav-wrap fixed padre, que a
     veces lo dejaba más angosto que sus propios hijos — el ícono del
     arcade se salía del pill por la derecha. inline-flex siempre se
     ajusta a su contenido, sin ese problema. */
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Nav sobre sección gris → fondo rojo exacto */
.bottom-nav.nav--on-gray {
  background: rgba(228, 28, 55, 0.92);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(228, 28, 55, 0.25);
}

.nav-links-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: visible;
  white-space: nowrap;
}

/* Logo */
.nav-logo-link {
  display: flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 50px;
  flex-shrink: 0;
  background: transparent;
  transition: background 0.25s ease;
}

.nav-logo-link:hover,
.nav-logo-link.active {
  background: rgba(0, 0, 0, 0.07);
}

.bottom-nav.nav--on-gray .nav-logo-link:hover,
.bottom-nav.nav--on-gray .nav-logo-link.active {
  background: rgba(255, 255, 255, 0.15);
}

.nav-logo {
  height: 26px;
  width: auto;
  display: block;
  transition: filter 0.5s ease;
}

/* Logo blanco cuando el nav es rojo */
.bottom-nav.nav--on-gray .nav-logo {
  filter: brightness(0) invert(1);
}

/* Separador vertical */
.nav-sep {
  width: 1px;
  height: 16px;
  background: rgba(0, 0, 0, 0.12);
  margin: 0 6px;
  flex-shrink: 0;
  transition: background 0.5s ease;
}

.bottom-nav.nav--on-gray .nav-sep {
  background: rgba(255, 255, 255, 0.2);
}

/* Links — estado gris (sobre fondos de color) */
.bottom-nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.68rem;
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 50px;
}

.bottom-nav a:hover { color: rgba(0, 0, 0, 0.85); }

.bottom-nav a.active {
  color: rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.07);
}

/* Links — estado rojo (sobre fondos grises) */
.bottom-nav.nav--on-gray a         { color: rgba(255, 255, 255, 0.65); }
.bottom-nav.nav--on-gray a:hover   { color: rgba(255, 255, 255, 0.95); }
.bottom-nav.nav--on-gray a.active  {
  color: var(--white);
  background: rgba(255, 255, 255, 0.15);
}

/* Selector de idioma — etiqueta que "cuelga" del nav sin alterar su centrado:
   position:absolute anclada al borde derecho de .nav-wrap (= borde derecho
   del nav), con el borde IZQUIERDO recto (sin radio) para que se esconda
   limpio debajo de la cápsula principal, sin el choque de curvas que
   cortaba el diseño anterior (dos radios redondos superpuestos). */
.nav-lang-tag {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%) translateX(-18px);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 3px 5px 3px 22px;
  border-radius: 0 50px 50px 0;
  background: rgba(233, 233, 233, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-left: none;
  box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.nav-lang-current,
.nav-lang-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 50px;
  line-height: 1;
}

.nav-lang-current {
  color: var(--white);
  background: var(--red);
  cursor: default;
}

.nav-lang-link {
  color: rgba(0, 0, 0, 0.4);
  transition: color 0.25s ease, background 0.25s ease;
}

.nav-lang-link:hover {
  color: rgba(0, 0, 0, 0.85);
  background: rgba(0, 0, 0, 0.07);
}

/* Sincroniza el color del tag con el estado del nav (son hermanos, no hijos) */
.bottom-nav.nav--on-gray ~ .nav-lang-tag {
  background: rgba(228, 28, 55, 0.92);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(228, 28, 55, 0.25);
}

.bottom-nav.nav--on-gray ~ .nav-lang-tag .nav-lang-current {
  color: var(--red);
  background: var(--white);
}

.bottom-nav.nav--on-gray ~ .nav-lang-tag .nav-lang-link {
  color: rgba(255, 255, 255, 0.55);
}

.bottom-nav.nav--on-gray ~ .nav-lang-tag .nav-lang-link:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.15);
}

/* ================================================
   ABOUT
   ================================================ */
.about {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--red-dark) 0%, var(--gray-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-inner {
  max-width: 900px;
  text-align: center;
}

.about-text {
  font-family: var(--font-body);
  font-size: 59px;
  color: var(--white);
  line-height: calc(65 / 59);
  font-weight: 300;
}

.about-text strong {
  font-weight: 800;
}

/* Cada palabra empieza dim — JS actualiza opacity en tiempo real */
.about-text .word {
  display: inline;
  opacity: 0.15;
}

/* ================================================
   EXPERIENCE — STICKY SCROLL
   ================================================ */
.experience {
  background: var(--gray-light);
  padding: 0;
}

.exp-header {
  padding: 8rem 5rem 4rem;
  text-align: center;
}

.experience-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 7.5vw, 5.5rem);
  color: var(--red);
  line-height: 1;
  letter-spacing: -0.08em;
  white-space: nowrap;
}

/* Wrapper — crea el espacio de scroll para las 4 tarjetas */
.jobs-stack-wrapper {
  height: 500vh;
  position: relative;
}

/* Contenedor sticky que se ve a pantalla completa */
.jobs-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Cada card ocupa todo el sticky container */
.job-card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.job-card:nth-child(n+2) {
  transform: translateY(100%);
  will-change: transform;
}

/* Colores por tarjeta — degradado gris claro → gris → oscuro → más oscuro.
   La 2 (AD-DO) usa el mismo texto que la 1: el rojo de fondo no tenía
   suficiente contraste con el texto oscuro (problema de usabilidad). */
.jc-1 { background: var(--gray-light); z-index: 1; }
.jc-2 { background: var(--gray-mid);   z-index: 2; }
.jc-3 { background: var(--dark);       z-index: 3; }
.jc-4 { background: var(--darker);     z-index: 4; }

/* Contenido interior de cada card */
.jc-inner {
  width: 100%;
  max-width: 1200px;
  padding: 0 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Fila superior: número + periodo */
.jc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.2rem;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  opacity: 0.4;
}

.jc-1 .jc-top,
.jc-2 .jc-top  { border-color: var(--dark); }
.jc-3 .jc-top,
.jc-4 .jc-top  { border-color: var(--white); }

.jc-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.jc-period {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.jc-1 .jc-num, .jc-1 .jc-period,
.jc-2 .jc-num, .jc-2 .jc-period   { color: var(--dark); }
.jc-3 .jc-num, .jc-3 .jc-period,
.jc-4 .jc-num, .jc-4 .jc-period   { color: var(--white); }

/* Cuerpo: título izquierda, info derecha */
.jc-body {
  display: flex;
  gap: 5rem;
  align-items: flex-start;
}

.jc-left {
  flex: 0 0 42%;
}

.jc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.jc-1 .jc-title,
.jc-2 .jc-title           { color: var(--dark); }
.jc-3 .jc-title,
.jc-4 .jc-title           { color: var(--white); }

.jc-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.jc-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.jc-company {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

.jc-loc {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.72rem;
  opacity: 0.55;
}

.jc-1 .jc-company, .jc-2 .jc-company { color: var(--red); }
.jc-1 .jc-loc,     .jc-2 .jc-loc     { color: var(--dark); }
.jc-3 .jc-company, .jc-4 .jc-company,
.jc-3 .jc-loc,     .jc-4 .jc-loc     { color: var(--white); }

/* Bullets */
.jc-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.jc-bullets li {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.5;
  padding-left: 1rem;
  position: relative;
}

.jc-bullets li::before {
  content: '—';
  position: absolute;
  left: 0;
  opacity: 0.4;
}

.jc-1 .jc-bullets li,
.jc-2 .jc-bullets li              { color: var(--dark); }
.jc-3 .jc-bullets li,
.jc-4 .jc-bullets li              { color: rgba(255, 255, 255, 0.78); }


/* Fila única centrada bajo el título */
.tools-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin-top: 2.5rem;
}

.tool {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: default;
  transition: transform 0.25s var(--ease-out);
}

.ti {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* Tooltip con color del icono — aparece arriba al hacer hover */
.tool span {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--tc, #222);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: opacity 0.25s ease,
              transform 0.3s var(--ease-out);
  z-index: 20;
}

@media (hover: hover) {
  .tool:hover {
    transform: translateY(-3px);
  }

  .tool:hover span {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.ti[alt="ChatGPT"] { filter: brightness(0) invert(1); }

/* ================================================
   PROYECTOS — scroll interactivo
   ================================================ */
.projects {
  background: var(--gray-light);
}

/* Header — mismo estilo que .exp-header */
.proj-header {
  padding: 8rem 5rem 4rem;
  text-align: center;
}

.projects-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 7.5vw, 5.5rem);
  color: var(--red);
  line-height: 1;
  letter-spacing: -0.08em;
  white-space: nowrap;
}

.proj-scene {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 3rem;
  position: relative;
}

/* Stage: título + iPad, agrupados y centrados como una sola composición
   (antes usaba space-between y quedaban pegados a los bordes del contenedor) */
.proj-stage {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  perspective: 1800px;
}

/* iPad — más grande, a la derecha */
.proj-ipad-wrap {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  transform-style: preserve-3d;
}

.proj-ipad {
  width: clamp(420px, 46vw, 760px);
  height: auto;
  display: block;
  filter: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.16));
  user-select: none;
}

/* Bloque de título — estático, a la izquierda */
.proj-tag {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  max-width: 380px;
  text-decoration: none;
  z-index: 3;
  opacity: 0;
}

.proj-tag-title,
.proj-tag-sub { transition: color 0.35s ease; }

.proj-tag-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 4rem);
  color: var(--dark);
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.proj-tag-sub {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.72rem;
  max-width: 300px;
  color: var(--text-gray);
  letter-spacing: 0.04em;
  padding-top: 1em;
}

.proj-tag:hover .proj-tag-title { color: var(--red); }
.proj-tag:hover .proj-tag-sub   { color: var(--red); }

/* Botón CTA — visible siempre: es la única puerta al portafolio desde la home */
.proj-tag-btn {
  display: inline-block;
  margin-top: 1.4rem;
  padding: 0.8rem 1.7rem;
  background: var(--dark);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 50px;
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.proj-tag:hover .proj-tag-btn {
  background: var(--red);
  transform: translateY(-2px);
}

/* ================================================
   FOOTER — global, minimalista
   ================================================ */
.site-footer {
  background: var(--dark);
  padding: 7rem 2rem 3rem;
}

.site-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.site-footer-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1.5rem;
}

.site-footer-email {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 6vw, 4rem);
  letter-spacing: -0.03em;
  color: var(--white);
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
  word-break: break-word;
}

.site-footer-email:hover {
  color: var(--red);
}

.site-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.site-footer-links a {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}

.site-footer-links a:hover {
  color: var(--white);
}

.site-footer-copy {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 640px) {
  .site-footer {
    padding: 5rem 1.5rem 2.5rem;
  }

  /* El mínimo del clamp de escritorio (1.8rem) es más ancho que una pantalla
     chica, así que el word-break lo partía a la mitad. Aquí baja lo suficiente
     para que el correo siempre quepa en una sola línea, sin partirse nunca. */
  .site-footer-email {
    font-size: clamp(1rem, 7vw, 4rem);
    white-space: nowrap;
    word-break: normal;
  }

  .site-footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* ================================================
   PÁGINA DE CONTACTO
   ================================================ */
.contact-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  padding: 8rem 2rem 4rem;
  text-align: center;
}

.contact-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.contact-orb-1 {
  width: 50vw;
  height: 50vw;
  top: -18%;
  left: -12%;
  background: radial-gradient(circle at 45% 45%, rgba(228, 28, 55, 0.35) 0%, transparent 70%);
  animation: contactOrbDrift1 16s ease-in-out infinite;
}

.contact-orb-2 {
  width: 40vw;
  height: 40vw;
  bottom: -22%;
  right: -10%;
  background: radial-gradient(circle, rgba(228, 28, 55, 0.22) 0%, transparent 70%);
  animation: contactOrbDrift2 20s ease-in-out infinite;
}

@keyframes contactOrbDrift1 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(40px, 30px); }
}

@keyframes contactOrbDrift2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-30px, -40px); }
}

.contact-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}

.contact-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2rem;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 2rem;
  text-decoration: none;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

a.contact-status:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--white);
}

.contact-status-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #3ecf6e;
  animation: contactPulse 2s ease-out infinite;
}

@keyframes contactPulse {
  0%   { box-shadow: 0 0 0 0 rgba(62, 207, 110, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(62, 207, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(62, 207, 110, 0); }
}

.contact-hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 9vw, 6rem);
  color: var(--white);
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 2.5rem;
}

.contact-email-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 4vw, 2.1rem);
  color: var(--white);
  letter-spacing: -0.02em;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), gap 0.3s var(--ease-out);
  margin-bottom: 3.5rem;
  word-break: break-word;
}

.contact-email-cta svg {
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-out);
}

.contact-email-cta:hover {
  color: var(--red);
  border-color: var(--red);
  gap: 1.15rem;
}

.contact-email-cta:hover svg {
  transform: translateX(4px);
}

.contact-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: left;
}

.contact-link-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

a.contact-link-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-4px);
}

.contact-link-icon {
  width: 20px;
  height: 20px;
  color: var(--red);
}

.contact-link-icon svg {
  width: 100%;
  height: 100%;
}

.contact-link-label {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.contact-link-value {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--white);
}

.contact-copy {
  display: block;
  margin-top: 3rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 640px) {
  .contact-hero {
    padding: 6rem 1.5rem 3rem;
  }

  .contact-email-cta {
    font-size: clamp(1rem, 6.2vw, 2.1rem);
  }

  .contact-links-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================
   PÁGINA 404
   ================================================ */
.error-page {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  padding: 6rem 2rem;
  text-align: center;
}

.error-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.error-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.error-digit {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 16vw, 9rem);
  color: var(--white);
  letter-spacing: -0.04em;
  line-height: 1;
  animation: errorBounce 2.4s var(--ease-out) infinite;
}

@keyframes errorBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20%      { transform: translateY(-18px) rotate(-4deg); }
  40%      { transform: translateY(0) rotate(3deg); }
  55%      { transform: translateY(-6px) rotate(0deg); }
}

.error-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.error-sub {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.55;
  max-width: 44ch;
  margin: 0 auto 2.75rem;
}

.error-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.error-btn {
  padding: 0.85rem 1.6rem;
  border-radius: 2rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: all 0.3s var(--ease-out);
}

.error-btn--primary {
  background: var(--red);
  color: var(--white);
}

.error-btn--primary:hover {
  background: var(--white);
  color: var(--dark);
  transform: translateY(-2px);
}

.error-btn--ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.error-btn--ghost:hover {
  border-color: var(--white);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .error-page {
    padding: 5rem 1.5rem;
  }

  .error-actions {
    flex-direction: column;
    width: 100%;
  }

  .error-btn {
    width: 100%;
  }
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {
  .exp-header {
    padding: 6rem 3rem 3rem;
  }

  .jc-inner {
    padding: 0 3rem;
  }

  .jc-body {
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  /* Hero */
  .hero-info {
    flex-direction: column;
    gap: 0.4rem;
    text-align: center;
  }

  /* About */
  .about {
    padding: 0 1.5rem;
  }

  .about-text {
    font-size: clamp(1.8rem, 6.5vw, 2.8rem);
  }

  /* Experience header */
  .exp-header {
    padding: 4rem 1.5rem 2rem;
  }

  .experience-title,
  .projects-title {
    white-space: normal;
    font-size: clamp(2rem, 7vw, 3.5rem);
  }

  /* Cards en mobile — scroll normal, sin sticky */
  .jobs-stack-wrapper {
    height: auto;
  }

  .jobs-sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .job-card {
    position: relative;
    height: auto;
    padding: 4rem 0;
    transform: none !important;
  }

  .jc-inner {
    padding: 0 1.5rem;
    gap: 2rem;
  }

  .jc-body {
    flex-direction: column;
    gap: 1.8rem;
  }

  .jc-left {
    flex: none;
    width: auto;
  }

  /* Tools en mobile — wrap en varias filas */
  .tools-grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  /* Projects mobile */
  .proj-header {
    padding: 4rem 1.5rem 2rem;
  }

  .proj-scene {
    height: auto;
    padding: 2rem 1.5rem 4rem;
  }

  .proj-stage {
    height: auto;
    flex-direction: column;
    gap: 2.5rem;
    padding: 2rem 0;
    align-items: flex-start;
  }

  /* iPad al top */
  .proj-ipad-wrap {
    order: -1;
    transform: none !important;
    align-self: center;
  }

  .proj-ipad {
    width: clamp(200px, 70vw, 340px);
  }

  /* Tag: flujo estático, ancho completo */
  .proj-tag {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: 100%;
  }

  .proj-tag-title {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }

  /* Subtítulo sin ancho fijo, una línea con ellipsis */
  .proj-tag-sub {
    width: auto;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Botón CTA — versión compacta en mobile */
  .proj-tag-btn {
    margin-top: 1rem;
    padding: 0.6rem 1.4rem;
    background: var(--dark);
    color: var(--white);
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 50px;
  }

  /* Nav */
  .nav-wrap {
    top: 12px;
  }

  .bottom-nav {
    padding: 8px 10px;
    gap: 2px;
  }

  .nav-logo-link {
    padding: 4px;
  }

  .bottom-nav a {
    font-size: 0.58rem;
    padding: 5px 10px;
  }

  .nav-logo {
    height: 20px;
  }

  .nav-game {
    width: 34px;
    height: 34px;
  }

  .nav-game svg {
    width: 18px;
    height: 18px;
  }

  /* Tooltip hover-only: no sirve en touch, se oculta */
  .nav-game-tip {
    display: none;
  }

  .nav-lang-tag {
    transform: translateY(-50%) translateX(-15px);
    padding: 3px 4px 3px 19px;
  }

  .nav-lang-current,
  .nav-lang-link {
    font-size: 0.56rem;
    padding: 5px 9px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(4rem, 20vw, 7rem);
  }

  .tools-grid {
    gap: 6px;
  }

  /* Nav más compacta en celulares angostos (320–375px) — con el ícono del
     arcade sumado, la barra ya no entraba con la holgura del breakpoint de
     768px */
  .bottom-nav {
    padding: 6px 8px;
    gap: 0;
  }

  .nav-logo-link {
    padding: 3px;
  }

  .nav-links-wrap {
    gap: 2px;
  }

  .bottom-nav a {
    font-size: 0.5rem;
    padding: 5px 7px;
    letter-spacing: 0.04em;
  }

  .nav-logo {
    height: 17px;
  }

  .nav-sep {
    margin: 0 3px;
  }

  .nav-game {
    width: 28px;
    height: 28px;
  }

  .nav-game svg {
    width: 15px;
    height: 15px;
  }

  .nav-lang-tag {
    transform: translateY(-50%) translateX(-12px);
    padding: 3px 3px 3px 15px;
  }

  .nav-lang-current,
  .nav-lang-link {
    font-size: 0.48rem;
    padding: 4px 7px;
  }
}

/* Pantallas muy angostas (~320px, ej. iPhone SE 1ª gen): el tag de dos
   idiomas ya no tiene margen de sobra contra el borde del viewport — se
   simplifica a un solo botón con el idioma alternativo (el actual, que ya
   es obvio por el contenido de la página, se oculta) para garantizar que
   nunca se corte. */
@media (max-width: 340px) {
  .nav-lang-current {
    display: none;
  }

  .nav-lang-tag {
    transform: translateY(-50%) translateX(-8px);
    padding: 3px 3px 3px 11px;
  }

  .nav-lang-link {
    padding: 4px 8px;
  }
}