/* =========================================================
   Jan Tornil — Portfolio (una sola pantalla)
   Todo el estilo de la web. Las animaciones solo usan opacity y transform
   (las únicas que el navegador mueve por GPU), para que vaya fluido.
   ========================================================= */

:root {
  --ink: #f4f5f2;
  --muted: rgba(244, 245, 242, .66);
  --line: rgba(244, 245, 242, .18);
  --paper: rgba(255, 255, 255, .08);
  --dark: #0a0f0d;
  --live: #3ccf7a;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "DM Serif Display", "Didot", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --jost: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(22px, 4vw, 56px);
  --nav-space: max(140px, 20.5vh); /* la sección termina donde empieza el suelo de la foto */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
html { -webkit-text-size-adjust: 100%; }
body { position: fixed; inset: 0; background: var(--dark); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
::selection { background: var(--ink); color: var(--dark); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

.mono { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.label, .kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.label::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin: 0 0 1px 8px; vertical-align: middle; animation: blink 2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* ---------- Fondo fijo ---------- */
.stage { position: fixed; inset: 0; z-index: 0; background: var(--dark) url("/img/menu-bg.jpg") center 50% / cover no-repeat; }
.stage::before, .stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.stage::before { background: radial-gradient(ellipse at 50% 48%, rgba(2, 8, 6, .62), rgba(2, 8, 6, .34) 72%), linear-gradient(rgba(2, 8, 6, .3), rgba(2, 8, 6, .3)); }
.stage::after { background: rgba(2, 8, 6, .5); opacity: 0; transition: opacity .8s var(--ease); will-change: opacity; }
html:not([data-view="home"]) .stage::after { opacity: 1; }

/* ---------- Esquinas ---------- */
.top { position: fixed; z-index: 30; left: var(--pad); top: 26px; }
.top__logo { display: inline-flex; align-items: center; gap: 14px; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.top__mark { width: 22px; height: 18px; flex: none; background: currentColor; -webkit-mask: url("/img/logo-jt.png") center / contain no-repeat; mask: url("/img/logo-jt.png") center / contain no-repeat; }
.top__brand { white-space: nowrap; }
.top__logo em { font-style: normal; color: var(--muted); margin: 0 4px; }

.socials { position: fixed; z-index: 30; top: 18px; right: var(--pad); display: flex; gap: 12px; }
.socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); color: #fff; background: rgba(2, 8, 6, .25); transition: background-color .3s, color .3s, border-color .3s; }
.socials a:hover { background: #fff; color: var(--dark); border-color: #fff; }
.socials svg { width: 18px; height: 18px; }

.bl { position: fixed; z-index: 20; left: var(--pad); bottom: 30px; display: flex; flex-direction: column; gap: 6px; font-size: 10px; color: rgba(255, 255, 255, .92); }
.bl b { font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---------- Menús ---------- */
/* Grande y centrado en el inicio */
.menu { position: fixed; z-index: 20; left: 50%; top: 48%; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); }
.menu a { display: block; padding: 0 .1em; color: #fff; transition: opacity .4s; will-change: transform, opacity; }
.menu span { display: block; white-space: nowrap; font: 200 clamp(42px, 8vh, 96px)/1.08 var(--jost); letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 2px 30px rgba(0, 0, 0, .55); transition: letter-spacing .8s var(--ease); }
.menu:hover a { opacity: .3; }
.menu a:hover { opacity: 1; }
.menu a:hover span { letter-spacing: .12em; }
html:not([data-view="home"]) .menu { visibility: hidden; pointer-events: none; transition: visibility 0s 1.1s; }

/* Pequeño abajo a la derecha dentro de las secciones */
.index { position: fixed; z-index: 20; right: var(--pad); bottom: 30px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); will-change: opacity; }
.index a { display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; padding: 5px 0; color: rgba(255, 255, 255, .55); transition: color .4s; }
.index a::after { content: ""; width: 24px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.index a:hover, .index a.is-active { color: #fff; }
.index a:hover::after, .index a.is-active::after { transform: none; }
html:not([data-view="home"]) .index { opacity: 1; pointer-events: auto; transition-delay: .55s; }

/* ---------- Secciones: una a la vez, encima del fondo ---------- */
main { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.view {
  position: absolute; inset: 0 0 var(--nav-space); padding: 84px var(--pad) 12px; overflow: auto; overscroll-behavior: contain; scrollbar-width: none;
  opacity: 0; visibility: hidden; transform: translate3d(0, 16px, 0); pointer-events: none;
  transition: opacity .4s var(--ease), transform .6s var(--ease), visibility 0s .4s;
  will-change: opacity, transform; contain: layout paint;
}
.view::-webkit-scrollbar { display: none; }
html[data-view="about"] .view--about, html[data-view="experience"] .view--exp,
html[data-view="work"] .view--work {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .6s var(--ease) var(--view-delay, .15s), transform .8s var(--ease) var(--view-delay, .15s), visibility 0s;
}
.wrap { max-width: 1440px; margin: 0 auto; }

/* ---------- About me ---------- */
.about__grid { display: grid; grid-template-columns: minmax(210px, .7fr) 1.35fr 1.05fr; gap: clamp(24px, 3.2vw, 52px); align-items: start; }
.about__photo { position: relative; aspect-ratio: 1 / 1.08; background: #d6d6d1; overflow: hidden; border-radius: 4px; }
.about__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.about__name { display: inline-block; font: 400 clamp(34px, 3.4vw, 54px)/1 var(--serif); letter-spacing: -.035em; margin: 16px 0 10px; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); }
.about__card li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45em; padding: 2px 0; font-size: 14px; line-height: 1.45; }
.about__card li.about__fullname { display: block; padding-bottom: 5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.about__card .k { color: var(--muted); font-size: 13px; letter-spacing: .02em; }
.about__card .k::after { content: ":"; }
.about__card .v { font-variant-numeric: tabular-nums; }

.about__lead { font: 400 clamp(26px, 2.5vw, 42px)/1.08 var(--serif); letter-spacing: -.025em; margin: 14px 0 16px; }
.about__text { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.6; color: var(--muted); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; border-top: 1px solid var(--line); }
.facts li { padding: 16px 16px 0 0; }
.facts li + li { padding-left: 16px; border-left: 1px solid var(--line); }
.facts b { display: block; font: 400 clamp(34px, 3.4vw, 56px)/1 var(--serif); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.facts span { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }

.cv { display: grid; gap: 20px; }
.cv .label { margin-bottom: 4px; color: var(--ink); }
.cv .label::before { display: none; }
.cv__list--grid, .langs, .skills--plain { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.cv__list li, .langs li, .skills--plain li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.cv__list li { display: grid; gap: 2px; }
.cv__list time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cv__list span { font-size: 14px; line-height: 1.3; }
.langs li { display: flex; flex-direction: column-reverse; gap: 2px; }
.langs time { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.langs span { font-size: 15px; }
.skills--plain li { font-size: 14px; }

/* ---------- Experience ---------- */
.exp__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.exp__title { font: 400 clamp(28px, 3vw, 46px)/.92 var(--serif); letter-spacing: -.035em; }
.exp__list { border-bottom: 1px solid var(--line); }
.exp__row { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(150px, .8fr) 1.5fr 1.4fr .9fr; gap: 16px; align-items: baseline; padding: 9px 12px; border-top: 1px solid var(--line); transition: color .4s; }
.exp__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); }
.exp__row:hover { color: var(--dark); }
.exp__row:hover::before { transform: none; transform-origin: top; }
.exp__num { display: none; }
.exp__date { font-size: 14px; opacity: .7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp__role { font: 400 clamp(18px, 1.7vw, 26px)/1 var(--serif); letter-spacing: -.02em; }
.exp__company { font-size: 14px; font-weight: 500; }
.exp__company small { display: block; font-size: 13px; font-weight: 400; opacity: .6; margin-top: 2px; }
.exp__place { font-size: 14px; opacity: .7; text-align: right; }

/* ---------- Pantallas medianas y móvil ---------- */
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__photo { max-width: 260px; }
  .exp__row { grid-template-columns: 1fr 1.2fr; }
  .exp__date { grid-column: 1; grid-row: 1; }
  .exp__company { grid-column: 2; grid-row: 1; }
  .exp__role { grid-column: 1 / 3; grid-row: 2; }
  .exp__place { grid-column: 1 / 3; grid-row: 3; text-align: left; }
  .socials a { width: 38px; height: 38px; }
}
@media (max-width: 560px) {
  .top__brand-extra { display: none; }
  .exp__row { grid-template-columns: 1fr; }
  .exp__date, .exp__company, .exp__role, .exp__place { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* Grano fino estático sobre la foto (disimula la falta de resolución; no se anima, no cuesta rendimiento) */
.stage::before { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(ellipse at 50% 48%, rgba(2, 8, 6, .62), rgba(2, 8, 6, .34) 72%), linear-gradient(rgba(2, 8, 6, .3), rgba(2, 8, 6, .3)); }

/* ---------- Cuadro con el correo ---------- */
.mail-pop { position: fixed; z-index: 40; top: 70px; right: var(--pad); width: min(320px, calc(100vw - var(--pad) * 2)); padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(8, 13, 11, .94);
  opacity: 0; visibility: hidden; transform: translate3d(0, -8px, 0); pointer-events: none; transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s .3s; }
.mail-pop.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s; }
.mail-pop__label { color: var(--muted); margin-bottom: 8px; }
.mail-pop__addr { font: 400 22px/1.2 var(--serif); letter-spacing: -.01em; word-break: break-all; margin-bottom: 16px; user-select: all; }
.mail-pop__actions { display: flex; align-items: center; gap: 14px; }
.mail-pop__copy { padding: 9px 16px; border: 1px solid var(--ink); border-radius: 999px; font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; transition: background-color .3s, color .3s; }
.mail-pop__copy:hover, .mail-pop__copy.is-done { background: var(--ink); color: var(--dark); }
.mail-pop__open { font-size: 13px; color: var(--muted); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.mail-pop__open:hover { color: #fff; border-color: currentColor; }

/* Titular de About me siempre en una sola línea: la letra se ajusta al ancho de su columna */
.about__lead { white-space: nowrap; font-size: clamp(16px, 2vw, 34px); }
@supports (width: 1cqw) {
  .about__main { container-type: inline-size; }
  .about__lead { font-size: clamp(15px, 5.6cqw, 46px); }
}

/* ---------- Titulares en mayúsculas, justificados al ancho de su columna ---------- */

.about__id { container-type: inline-size; }
.about__name { display: block; text-transform: uppercase; white-space: nowrap; font-size: clamp(18px, 19cqw, 64px); letter-spacing: -.01em; }

.about__lead { text-transform: uppercase; letter-spacing: -.005em; text-align: justify; text-align-last: justify; }
@supports (width: 1cqw) { .about__lead { font-size: clamp(15px, 3.9cqw, 46px); } }

.exp__title { text-transform: uppercase; }


/* "JAN GONZÁLEZ TORNIL" más grande, ocupando el ancho de la foto */
.about__card li.about__fullname { margin-top: 14px; white-space: nowrap; font-size: 12px; }
@supports (width: 1cqw) { .about__card li.about__fullname { font-size: clamp(12px, 6.4cqw, 20px); } }

/* El contenido de cada sección se amplía (zoom) hasta llegar al suelo de la foto; lo calcula app.js */
.fit { transform-origin: 0 0; }

/* Sin la línea de abajo del todo en Skills (Team Leading / Team Work) ni en Experience */
.skills--plain li:nth-last-child(-n+2) { border-bottom: 0; }
.exp__list { border-bottom: 0; }
@media (max-width: 900px) { .skills--plain li:nth-last-child(2) { border-bottom: 1px solid var(--line); } }

/* Columna derecha de About me: 20 px menos alta (el valor lo calcula app.js) */
.about__side .cv { gap: calc(20px - var(--trim, 0px)); }

.view--work .exp__head + .exp__list + .exp__head, .view--work .exp__list + .exp__head { margin-top: 26px; }

/* Work: una sola lista de 9 filas; la empresa y su detalle van en la misma línea para que quepa */
.view--work .exp__row { grid-template-columns: minmax(150px, .7fr) 1.45fr 2.1fr .95fr; }
.view--work .exp__company { white-space: nowrap; }
.view--work .exp__company small { display: inline; margin: 0 0 0 8px; }
@media (max-width: 900px) { .view--work .exp__row { grid-template-columns: 1fr 1.2fr; } .view--work .exp__company { white-space: normal; } }
@media (max-width: 560px) { .view--work .exp__row { grid-template-columns: 1fr; } }
.view--work .exp__row { grid-template-columns: minmax(150px, .75fr) minmax(0, 1.5fr) minmax(0, 2.3fr) minmax(0, 1fr); }
.view--work .exp__company { white-space: normal; }
@media (max-width: 900px) { .view--work .exp__row { grid-template-columns: 1fr 1.2fr; } }
@media (max-width: 560px) { .view--work .exp__row { grid-template-columns: 1fr; } }