@charset "UTF-8";
/* =============================================================
   nathanieldalencon.com
   Hoja de estilos principal — Nathaniel D'Alençon Lancaster

   Índice
   01. Tokens
   02. Reset y base
   03. Layout y utilidades
   04. Capas de fondo
   05. Cabecera y navegación
   06. Portada: globo y anillo de tecnologías
   07. Tarjetas
   08. Encabezados de sección
   09. Perfil
   10. Competencias
   11. Carrusel
   12. Proyectos
   13. Trayectoria
   14. Formación
   15. Contacto y pie
   16. Entrada por scroll
   17. Lenguaje cartográfico
   18. Responsive
   19. Accesibilidad e impresión
   ============================================================= */


/* 01. Tokens
   ------------------------------------------------------------- */
:root {
  /* Superficies */
  --ink:       #0a0d12;
  --ink-2:     #0e1219;
  --surface:   rgba(232, 230, 225, .022);
  --surface-2: rgba(232, 230, 225, .045);

  /* Filetes */
  --rule:      rgba(232, 230, 225, .09);
  --rule-2:    rgba(232, 230, 225, .2);

  /* Texto */
  --text:      #e8e6e1;
  --text-2:    #9ba1a9;
  --text-3:    #6a707a;

  /* Acento: oro viejo, usado con cuentagotas */
  --gold:      #b99a63;
  --gold-2:    #8d7444;
  --gold-dim:  rgba(185, 154, 99, .12);
  --platinum:  #cdd4dc;

  /* Tipografía */
  --display: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Medidas. La caja crece un poco en pantallas muy anchas y el canal
     lateral se estrecha en móvil, sin bajar de 1,15rem. */
  --shell:  clamp(1180px, 86vw, 1360px);
  --gutter: clamp(1.15rem, 4.6vw, 4rem);
  --bar:    clamp(62px, 9vw, 78px);

  /* Movimiento: lento y sin rebotes */
  --ease: cubic-bezier(.22, .61, .36, 1);
}


/* 02. Reset y base
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 28px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.82;
  letter-spacing: .004em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(185, 154, 99, .24); color: #fff; }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }


/* 03. Layout y utilidades
   ------------------------------------------------------------- */
.wrap {
  position: relative;
  z-index: 2;
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}

/* Rótulo en versalitas: la única voz "técnica" que queda en la interfaz */
.label {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-3);
}

.rule { height: 1px; background: var(--rule); border: 0; }

.skip {
  position: absolute;
  top: -100px; left: 1.5rem;
  z-index: 400;
  padding: .8rem 1.4rem;
  background: var(--gold);
  color: var(--ink);
  font-size: .82rem;
  letter-spacing: .04em;
  transition: top .3s var(--ease);
}
.skip:focus { top: 0; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* 04. Capas de fondo
   Muy contenidas: una veladura cálida, un campo de estrellas tenue
   y un viñeteado. Nada que compita con el texto.
   ------------------------------------------------------------- */
.layer { position: fixed; inset: 0; pointer-events: none; transform: translateZ(0); }

.layer--wash {
  z-index: -2;
  background:
    radial-gradient(1200px 660px at 74% 10%, rgba(185, 154, 99, .05), transparent 68%),
    radial-gradient(1000px 760px at 12% 82%, rgba(104, 128, 176, .05), transparent 66%),
    radial-gradient(820px 560px at 88% 58%,  rgba(126, 106, 160, .042), transparent 70%),
    radial-gradient(700px 480px at 34% 30%,  rgba(88, 120, 150, .035), transparent 72%);
}



/* Campo de estrellas: puntos de un píxel, muy tenues, por detrás de la retícula. */
.layer--stars { z-index: -1; opacity: .95; }

.layer--vignette {
  z-index: 3;
  background: radial-gradient(ellipse 98% 86% at 50% 44%, transparent 58%, rgba(0, 0, 0, .52) 100%);
}

/* Progreso de lectura: un filete de oro de un píxel */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 120;
  height: 1px;
}
.progress i { display: block; width: 0; height: 100%; background: var(--gold-2); }


/* 05. Cabecera y navegación
   ------------------------------------------------------------- */
.top {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  border-block-end: 1px solid transparent;
  transition: background .5s var(--ease), border-color .5s;
}
.top.stuck {
  background: rgba(10, 13, 18, .88);
  border-block-end-color: var(--rule);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--bar);
}

.mark {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.mark em { font-style: italic; color: var(--gold); }
.mark span {
  font-family: var(--body);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
}

.menu { display: flex; align-items: center; gap: .3rem; }
.menu a {
  position: relative;
  padding: .5rem .9rem;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--text-2);
  transition: color .4s var(--ease);
}
.menu a::after {
  content: "";
  position: absolute;
  inset-inline: .9rem;
  inset-block-end: .35rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.menu a:hover { color: var(--text); }
.menu a:hover::after { transform: scaleX(1); }

.tools { display: flex; align-items: center; gap: 1rem; }

.lang { display: flex; align-items: center; gap: .5rem; font-size: .72rem; letter-spacing: .14em; }
.lang a { color: var(--text-3); transition: color .4s; }
.lang a:hover { color: var(--text-2); }
.lang a[aria-current="true"] { color: var(--gold); }
.lang i { width: 1px; height: 11px; background: var(--rule-2); }

.burger { display: none; padding: .5rem; }
.burger span {
  display: block;
  width: 20px; height: 1px;
  margin: 5px 0;
  background: var(--text);
  transition: transform .45s var(--ease), opacity .25s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* 06. Portada: globo y anillo de tecnologías
   ------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: calc(var(--bar) + 70px) 100px;
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: 3.5rem;
  align-items: center;
}

.available {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-block-end: 2.4rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-3);
}
/* Un filete corto en lugar del punto luminoso: menos aviso, más nota al margen. */
.available i {
  width: 26px; height: 1px;
  background: var(--gold-2);
}

.hero h1 {
  margin-block-end: 1.6rem;
  font-family: var(--display);
  font-size: clamp(3.1rem, 8vw, 6.4rem);
  font-weight: 300;
  line-height: 1.07;
  letter-spacing: -.015em;
}
.hero h1 b { display: block; font-weight: 300; }
.hero h1 em { display: block; font-style: italic; font-weight: 300; color: var(--gold); }

.role {
  min-height: 1.7em;
  margin-block-end: 2rem;
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.caret { display: none; }

.role { transition: opacity .7s var(--ease); }
.role.fade { opacity: 0; }

.lede {
  max-width: 46ch;
  margin-block-end: 2.8rem;
  padding-block-start: 1.8rem;
  border-block-start: 1px solid var(--rule);
  color: var(--text-2);
  font-size: 1.02rem;
  line-height: 1.85;
}

.cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-end: 3.2rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 1rem 2.1rem;
  border: 1px solid var(--rule-2);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}
.btn svg { display: none; }
.btn--solid { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--solid:hover { background: #c9aa72; border-color: #c9aa72; }
.btn--quiet { color: var(--text-2); }
.btn--quiet:hover { border-color: var(--gold); color: var(--gold); }

.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figures > div { padding-block-start: 1.6rem; padding-inline-end: 1.4rem; border-block-start: 1px solid var(--rule); }
.figures dd {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 300;
  line-height: 1;
  color: var(--gold);
}
.figures dt {
  margin-block-start: .7rem;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* --- Escenario del globo --- */
.stage {
  position: relative;
  justify-self: center;
  width: min(560px, 100%);
  aspect-ratio: 1 / .95;
  perspective: 1300px;
  perspective-origin: 50% 46%;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
          user-select: none;
}
.stage:active { cursor: grabbing; }

.stage__globe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }

.ring {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 2;
  width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
  list-style: none;
}
.ring li {
  position: absolute;
  inset-block-start: -13px;
  inset-inline-start: -66px;
  display: grid;
  place-items: center;
  width: 132px; height: 26px;
  /* Sin caja: una veladura de bordes difuminados basta para que el rótulo
     se lea sobre el globo sin recortar un rectángulo encima. */
  background: radial-gradient(ellipse 58% 130% at 50% 50%, rgba(10, 13, 18, .93), transparent 74%);
  color: var(--text-2);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--ink), 0 0 4px var(--ink), 0 0 2px var(--ink);
  will-change: transform, opacity;
}

.stage__note {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  z-index: 3;
  transform: translateX(-50%);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  pointer-events: none;
}


/* 07. Tarjetas
   ------------------------------------------------------------- */
.card {
  position: relative;
  min-width: 0;
  padding: 2.2rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  overflow-wrap: anywhere;
  transition: border-color .55s var(--ease), background .55s var(--ease), transform .55s var(--ease);
}
.card:hover { border-color: var(--rule-2); background: var(--surface-2); }

.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.8rem;
  padding-block-end: 1.1rem;
  border-block-end: 1px solid var(--rule);
}
.card__head h3 { font-family: var(--display); font-size: 1.32rem; font-weight: 400; letter-spacing: .01em; }
.card__head p  { flex: 0 0 auto; font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }


/* 08. Encabezados de sección
   ------------------------------------------------------------- */
.band { position: relative; z-index: 2; padding-block: clamp(96px, 13.5vw, 178px); }

.band__head { margin-block-end: 4.8rem; }

.band__id {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-block-end: 1.6rem;
}
.band__id b {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 400;
  font-style: italic;
  color: var(--gold);
}
.band__id span { font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); }
.band__id i { flex: 1; max-width: 90px; height: 1px; background: var(--rule); }

.band__title {
  max-width: 24ch;
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.012em;
}
.band__title em { font-style: italic; color: var(--gold); }

.band__sub {
  max-width: 54ch;
  margin-block-start: 1.4rem;
  color: var(--text-2);
  font-size: 1.02rem;
}


/* 09. Perfil
   ------------------------------------------------------------- */
.profile { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr); gap: 4rem; align-items: start; }

.profile__text p { margin-block-end: 1.4rem; color: var(--text-2); }
.profile__text p:first-child {
  color: var(--text);
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  letter-spacing: .005em;
}
.profile__text strong { color: var(--text); font-weight: 500; }

.facts { display: grid; }
.facts > div { padding-block: 1.2rem; border-block-end: 1px solid var(--rule); }
.facts > div:first-child { border-block-start: 1px solid var(--rule); }
.facts dt { font-size: .6rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.facts dd { margin-block-start: .35rem; font-size: .95rem; color: var(--text); }


/* 10. Competencias
   Un filete que se rellena; el nivel se lee en palabras, no en números.
   ------------------------------------------------------------- */
.skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.4rem 4.5rem; }
.skills > * { min-width: 0; }

.skills h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.6rem;
  padding-block-end: .9rem;
  border-block-end: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 400;
}
/* Distintivo de dominio junto al título del bloque */
.skills h3 span {
  flex: 0 0 auto;
  color: var(--gold-2);
  font-family: var(--body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.skill { margin-block-end: 0; }
.skill__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.4rem;
  padding-block: .82rem;
  border-block-end: 1px solid var(--rule);
}
.skill:last-child .skill__top { border-block-end: 0; }
.skill__name { min-width: 0; overflow: hidden; font-size: .95rem; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.skill__level { flex: 0 0 auto; font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }

/* Las barras de progreso se retiran: el nivel se lee en palabras. */
.skill__bar { display: none; }


/* 11. Carrusel
   ------------------------------------------------------------- */
.carousel { position: relative; }
.carousel--gap { margin-block-start: 4rem; }

.carousel__note { display: flex; justify-content: flex-end; margin-block-end: 1.2rem; }
.carousel__note span { font-size: .62rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); }

.carousel__stage {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  perspective: 1900px;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
          user-select: none;
}
.carousel__stage:active { cursor: grabbing; }
.carousel__track { position: absolute; inset: 0; transform-style: preserve-3d; }

.carousel__item {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.carousel__item.eased { transition: transform .95s var(--ease), opacity .7s var(--ease); }
.carousel__item > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ink-2);
}
.carousel__item.here > .card { border-color: rgba(185, 154, 99, .26); box-shadow: 0 54px 110px -46px #000; }

.carousel__fade { display: none; }

.carousel__nav { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-block-start: 2.2rem; }
.carousel__btn {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--text-2);
  transition: border-color .45s var(--ease), color .45s var(--ease);
}
.carousel__btn:hover { border-color: var(--gold); color: var(--gold); }
.carousel__btn svg { width: 14px; height: 14px; }

.carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 340px; }
.carousel__dots button {
  position: relative;
  width: 5px; height: 5px;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  transition: background .5s var(--ease), border-color .5s var(--ease);
}
/* Zona de pulsación cómoda alrededor de cada punto, sin agrandarlo */
.carousel__dots button::after {
  content: "";
  position: absolute;
  inset: -20px -8px;
}
.carousel__dots button[aria-current="true"] { background: var(--gold); border-color: var(--gold); }


/* 12. Proyectos
   ------------------------------------------------------------- */
.work { padding: 0; --brand: var(--gold); }

.work--pixenty  { --brand: #6386ad; }
.work--zenti    { --brand: #877cab; }
.work--dalencon { --brand: #6f92ae; }
.work--gestdesk { --brand: #6f9a81; }
.work--redvivienda { --brand: #a97a66; }

.work__view {
  position: relative;
  display: grid;
  place-items: end center;
  height: 178px;
  padding: 26px 32px 0;
  overflow: hidden;
  border-block-end: 1px solid var(--rule);
  perspective: 900px;
  perspective-origin: 50% 30%;
  background: linear-gradient(180deg, rgba(236, 231, 222, .022), transparent 64%);
}

.screen {
  position: relative;
  width: 100%;
  border: 1px solid var(--rule-2);
  background: #070a0f;
  box-shadow: 0 26px 50px -28px #000;
  transform: rotateX(13deg) rotateY(-13deg);
  transform-origin: 50% 100%;
  transition: transform 1s var(--ease);
  will-change: transform;
}
.carousel__item.here .screen { transform: rotateX(7deg) rotateY(-6deg); }
.carousel__item.here .work:hover .screen { transform: rotateX(2deg) rotateY(0deg) scale(1.03); }

.screen__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-block-end: 1px solid var(--rule);
  background: rgba(236, 231, 222, .03);
}
.screen__bar i { width: 4px; height: 4px; border-radius: 50%; background: var(--rule-2); }
.screen__bar span { margin-inline-start: 9px; color: var(--text-3); font-size: .54rem; letter-spacing: .1em; }

.screen__body {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  height: 96px;
  padding: 12px;
  background: linear-gradient(168deg, rgba(232, 230, 225, .05), transparent 70%);
}
.screen__body > span { background: rgba(232, 230, 225, .08); }
.screen__body .r1 { height: 5px; width: 38%; }
.screen__body .r2 { height: 16px; width: 66%; background: var(--brand); opacity: .42; }
.screen__body .r3 { display: flex; gap: 8px; background: none; }
.screen__body .r3 i { flex: 1; height: 28px; border: 1px solid var(--rule); }
/* Si añades una captura real, se coloca sobre la maqueta */
.screen__body img { position: absolute; inset-block-start: 0; inset-inline: 0; width: 100%; height: 96px; object-fit: cover; object-position: top center; }

.work__body { display: flex; flex: 1; flex-direction: column; padding: 2rem; }
.work__body h3 { font-family: var(--display); font-size: 1.6rem; font-weight: 400; letter-spacing: .005em; }

.work__host {
  margin-block: .5rem 1.3rem;
  padding-block-end: 1.3rem;
  border-block-end: 1px solid var(--rule);
  color: var(--brand);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .14em;
}

.work__body p { flex: 1; margin-block-end: 1.6rem; color: var(--text-2); font-size: .94rem; }

.work__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-block-end: 1.6rem; }
.work__meta dt { font-size: .56rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.work__meta dd { margin-block-start: .3rem; font-size: .8rem; color: var(--text-2); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem .7rem; margin-block-end: 1.8rem; list-style: none; }
.chips li { color: var(--text-3); font-size: .72rem; letter-spacing: .06em; }
.chips li:not(:last-child)::after { content: "·"; margin-inline-start: .6rem; color: var(--rule-2); }

.work__go {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  align-self: flex-start;
  padding-block-end: .4rem;
  border-block-end: 1px solid var(--rule-2);
  color: var(--text);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.work__go svg { width: 11px; height: 11px; transition: transform .5s var(--ease); }
.work__go:hover { color: var(--brand); border-color: var(--brand); }
.work__go:hover svg { transform: translate(2px, -2px); }


/* 13. Trayectoria
   La línea se rellena con el scroll (--fill lo escribe main.js).
   ------------------------------------------------------------- */
.track { position: relative; padding-inline-start: 3rem; list-style: none; }
.track::before,
.track::after {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  width: 1px;
}
.track::before { inset-block: 12px; background: var(--rule); }
.track::after  { inset-block-start: 12px; height: calc(var(--fill, 0) * 1%); background: var(--gold); }

.track > li { position: relative; padding-block: 2.4rem; border-block-end: 1px solid var(--rule); }
.track > li:first-child { padding-block-start: 0; }
.track > li:last-child { border-block-end: 0; padding-block-end: 0; }
.track > li::before {
  content: "";
  position: absolute;
  inset-block-start: 2.9rem;
  inset-inline-start: -3rem;
  z-index: 3;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--gold);
}
.track > li:first-child::before { inset-block-start: .5rem; }

.post__when { display: block; margin-block-end: .7rem; font-size: .64rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.post h3 { font-family: var(--display); font-size: 1.6rem; font-weight: 400; }
.post__where { margin-block-end: 1.4rem; color: var(--text-3); font-size: .88rem; font-style: italic; }
.post ul { display: grid; gap: .6rem; list-style: none; max-width: 68ch; }
.post li { position: relative; padding-inline-start: 1.4rem; color: var(--text-2); font-size: .94rem; }
.post li::before { content: ""; position: absolute; inset-block-start: .82em; inset-inline-start: 0; width: 7px; height: 1px; background: var(--rule-2); }


/* 14. Formación
   ------------------------------------------------------------- */
.school { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem 4rem; align-items: start; }
.school > * { min-width: 0; }

.school h3 {
  margin-block-end: 1.4rem;
  padding-block-end: .9rem;
  border-block-end: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 400;
}

.entry { padding-block: 1.3rem; border-block-end: 1px solid var(--rule); }
.entry:last-child { border-block-end: 0; }
.entry h4 { font-size: 1rem; font-weight: 400; }
.entry p { margin-block-start: .2rem; color: var(--text-3); font-size: .85rem; font-style: italic; }
.entry span { display: block; margin-block-start: .5rem; font-size: .58rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }

.cert { gap: .6rem; padding: 2rem; }
.cert__year { font-family: var(--display); font-size: 1.1rem; font-style: italic; color: var(--gold); }
.cert h4 { flex: 1; margin-block: .9rem 1.2rem; font-family: var(--display); font-size: 1.28rem; font-weight: 400; line-height: 1.35; }
.cert__by { padding-block-start: 1.1rem; border-block-start: 1px solid var(--rule); color: var(--text-3); font-size: .82rem; font-style: italic; }
.cert__h { position: absolute; inset-block-start: 2rem; inset-inline-end: 2rem; color: var(--text-3); font-size: .62rem; letter-spacing: .14em; }


/* Página de error */
.oops { display: grid; place-items: center; min-height: 100svh; text-align: center; }
.oops .wrap { max-width: 46ch; }
.oops .band__id--mid { justify-content: center; }
.oops .band__sub { margin-inline: auto; margin-block-end: 2.6rem; }


/* 15. Contacto y pie
   ------------------------------------------------------------- */
.contact__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); list-style: none; border-block-start: 1px solid var(--rule); }
.contact__list li { border-block-end: 1px solid var(--rule); }
.contact__list a {
  display: block;
  height: 100%;
  padding: 2.4rem 0;
  transition: padding .5s var(--ease);
}
.contact__list a:hover { padding-inline-start: .8rem; }
.contact__list dt { font-size: .6rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.contact__list dd {
  margin-block-start: .6rem;
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 400;
  word-break: break-word;
  transition: color .45s var(--ease);
}
.contact__list a:hover dd { color: var(--gold); }

.foot { position: relative; z-index: 2; padding-block: 3rem; border-block-start: 1px solid var(--rule); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; }
.foot p { color: var(--text-3); font-size: .78rem; letter-spacing: .04em; }
.foot .name { font-family: var(--display); font-size: 1.1rem; color: var(--text-2); }

.up {
  position: fixed;
  inset-block-end: 44px;
  inset-inline-end: 34px;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: rgba(10, 13, 18, .8);
  color: var(--text-2);
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: opacity .5s var(--ease), border-color .45s, color .45s;
}
.up.on { opacity: 1; pointer-events: auto; }
.up:hover { border-color: var(--gold); color: var(--gold); }
.up svg { width: 13px; height: 13px; }


/* 16. Entrada por scroll
   Solo desvanecido y un desplazamiento corto. Sin giros ni rebotes.
   ------------------------------------------------------------- */
.rise {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.rise.in { opacity: 1; transform: none; }



/* 17. Lenguaje cartográfico
   El globo manda: si la portada es un instrumento de navegación, la página
   entera se comporta como la lámina de un atlas. Retícula de meridianos al
   fondo, limbo graduado alrededor del globo, marcas de encuadre en las
   fichas y láminas numeradas en lugar de secciones.
   ------------------------------------------------------------- */

/* --- Retícula y grano de papel --- */
.layer--chart {
  z-index: -2;
  opacity: .5;
  /* Solo grano: una turbulencia mínima para que el negro no banding-ee.
     La retícula de meridianos se retiró; el fondo es cielo abierto. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.24'/%3E%3C/svg%3E");
}

/* --- Limbo graduado y cruz de centrado alrededor del globo --- */
.stage::before,
.stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* La cruz se interrumpe sobre la esfera: sirve para encuadrar, no para tachar. */
.stage::before {
  inset: 4% 0;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(185, 154, 99, .22) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg,  transparent calc(50% - .5px), rgba(185, 154, 99, .14) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 30%, #000 34%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 0 30%, #000 34%);
}

/* Setenta y dos marcas cada cinco grados, como el limbo de un sextante. */
.stage::after {
  inset: 3%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
              rgba(185, 154, 99, .42) 0deg .35deg, transparent .35deg 5deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 47.4%, #000 47.4% 49.6%, transparent 49.6%);
          mask-image: radial-gradient(circle, transparent 0 47.4%, #000 47.4% 49.6%, transparent 49.6%);
}

/* --- Separación entre secciones ---
   Ni numeración ni rótulo de lámina: un filete que se desvanece por los
   extremos y una estrella de cuatro puntas en el centro. La sección se
   reconoce por su nombre, no por un número. --- */
.band + .band::before,
.band + .band::after { content: ""; position: absolute; pointer-events: none; }

.band + .band::before {
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-2) 30%, var(--rule-2) 70%, transparent);
}
.band + .band::after {
  inset-block-start: -5px;
  inset-inline-start: 50%;
  width: 11px; height: 11px;
  margin-inline-start: -5.5px;
  background: var(--gold);
  opacity: .9;
  -webkit-clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
          clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}

.band__id { gap: 0; }
.band__id b { display: none; }

/* Filete doble grabado, del numeral al rótulo */
.band__id i {
  flex: 1;
  max-width: none;
  height: 5px;
  margin-inline: 1.3rem;
  border-block: 1px solid var(--rule);
  background: none;
}

.band__id span { flex: 0 0 auto; }

/* El rótulo abre la sección; el filete la cierra por la derecha. */
.band__id { flex-direction: row-reverse; }
.band__id span { letter-spacing: .3em; color: var(--text-2); }
.band__id i { margin-inline: 1.6rem 0; }

/* --- Marcas de encuadre en las fichas --- */
.card::before,
.card::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 11px; height: 11px;
  border: 0 solid var(--gold-2);
  opacity: .6;
  pointer-events: none;
  transition: opacity .55s var(--ease);
}
.card::before { inset-block-start: -1px; inset-inline-start: -1px; border-block-start-width: 1px; border-inline-start-width: 1px; }
.card::after  { inset-block-end: -1px;   inset-inline-end: -1px;   border-block-end-width: 1px;   border-inline-end-width: 1px; }
.card:hover::before,
.card:hover::after { opacity: 1; }

/* --- La trayectoria como un meridiano graduado --- */
.track::before {
  background-image: repeating-linear-gradient(180deg,
                    var(--rule) 0 7px, transparent 7px 15px);
  background-color: transparent;
}

/* --- Cifras de estilo antiguo donde la fuente las trae --- */
.figures dd,
.band__id b,
.track time,
.cert__year { font-variant-numeric: oldstyle-nums; }


/* --- Las portadas de los proyectos se numeran como figuras --- */
.work__view { counter-increment: figura; }
.work__view::after {
  content: "Fig. " counter(figura, decimal-leading-zero);
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 14px;
  z-index: 2;
  font-size: .54rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
}
.carousel__track { counter-reset: figura; }


/* --- La portada de cada proyecto, como una lámina grabada ---
   Se retira el marco de navegador —tres puntos y barra de dirección—, que
   convertía la ficha en una captura falsa. En su lugar, un esquema a línea
   con un solo elemento entintado con el color de la marca. --- */
.screen__bar { display: none; }

.screen {
  border-color: rgba(185, 154, 99, .2);
  background: linear-gradient(162deg, rgba(236, 231, 222, .035), transparent 64%);
}

.screen__body {
  gap: 11px;
  height: 128px;
  padding: 18px 18px 0;
  background: none;
}
.screen__body > span { background: none; border: 1px solid rgba(236, 231, 222, .13); }
.screen__body .r1 { height: 2px; width: 30%; border: 0; background: var(--gold-2); opacity: .6; }
.screen__body .r2 { height: 26px; width: 68%; background: none; border: 1px solid var(--brand); opacity: .62; }
.screen__body .r3 i { height: 40px; border-color: rgba(236, 231, 222, .13); }


/* --- El contacto, como la cartela de un mapa: doble filete alrededor --- */
.contact > .wrap {
  position: relative;
  padding: clamp(2.8rem, 5vw, 4.6rem) clamp(1.9rem, 4vw, 3.8rem);
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: 7px;
}
.contact .band__head { margin-block-end: 3.4rem; }

/* 18. Responsive
   Escalera de anchos: 1600 · 1200 · 1000 · 860 · 700 · 560 · 400 · 340,
   más dos reglas por altura para móvil en horizontal.
   ------------------------------------------------------------- */

/* — Pantallas muy anchas: se aprovecha el espacio sin perder la medida de lectura — */
@media (min-width: 1600px) {
  body { font-size: 1.06rem; }
  .band { padding-block: 170px; }
}

/* — Portátiles pequeños: se aprieta la navegación antes de plegarla — */
@media (max-width: 1180px) {
  .menu a { padding: .5rem .62rem; font-size: .78rem; }
  .menu a::after { inset-inline: .62rem; }
  .mark { font-size: 1.2rem; }
  .profile { gap: 3rem; }
  .skills { gap: 3rem 3rem; }
}

/* — Por debajo de 1000 px la navegación horizontal ya no cabe: menú plegable — */
@media (max-width: 1000px) {
  .menu {
    position: fixed;
    inset-block-start: var(--bar);
    inset-inline: 0;
    flex-direction: column;
    gap: 0;
    max-height: calc(100svh - var(--bar));
    padding: .5rem var(--gutter) 1.4rem;
    overflow-y: auto;
    border-block-end: 1px solid var(--rule);
    background: rgba(10, 13, 18, .98);
    transform: translateY(-140%);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    transition: transform .6s var(--ease);
  }
  .menu.open { transform: translateY(0); }
  .menu a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: .6rem .2rem;
    border-block-end: 1px solid var(--rule);
    font-size: .95rem;
  }
  .menu a::after { display: none; }

  .burger { display: block; min-width: 44px; min-height: 44px; }
  .lang a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .25rem; }
}

/* — Tabletas: la portada pasa a una columna — */
@media (max-width: 980px) {
  .hero { padding-block: calc(var(--bar) + 44px) 76px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 3rem; }
  .stage { order: -1; width: min(430px, 100%); }
  .profile { grid-template-columns: 1fr; gap: 2.6rem; }
  .skills { grid-template-columns: 1fr; gap: 2.6rem; }
  .school { gap: 2.6rem; }
}

/* — Móvil grande — */
@media (max-width: 700px) {
  .mark span { display: none; }
  .top .wrap { gap: .8rem; }
  .band__head { margin-block-end: 2.8rem; }
  .lede { max-width: none; }
  .cta { gap: .7rem; }
  .btn { flex: 1 1 auto; justify-content: center; padding: .9rem 1.1rem; }
  .work__meta { grid-template-columns: 1fr 1fr; }
  .track { padding-inline-start: 2rem; }
  .track > li::before { inset-inline-start: -2rem; }
  .layer--vignette { display: none; }
  .up { inset-block-end: 20px; inset-inline-end: 18px; }
}

/* — Móvil medio: el anillo reduce el número de fichas desde main.js — */
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .role { font-size: .82rem; letter-spacing: .08em; }
  .lede { padding-block-start: 1.4rem; font-size: .97rem; }
  .figures { grid-template-columns: 1fr 1fr; }
  .figures > div:last-child { grid-column: 1 / -1; }
  .figures > div { padding-block-start: 1.1rem; padding-inline-end: .8rem; }
  .card { padding: 1.5rem; }
  .work__body, .cert { padding: 1.5rem; }
  .work__body h3, .post h3 { font-size: 1.4rem; }
  .work__meta { grid-template-columns: 1fr; gap: .5rem; }
  .cert__h { inset-block-start: 1.5rem; inset-inline-end: 1.5rem; }
  .contact__list dd { font-size: 1.08rem; }
  .carousel__nav { gap: 1.2rem; margin-block-start: 1.6rem; }
  .carousel__dots { max-width: 200px; gap: 8px; }
}

/* — Móvil pequeño — */
@media (max-width: 400px) {
  .hero h1 { font-size: 2.5rem; }
  .available { font-size: .6rem; letter-spacing: .18em; gap: .6rem; }
  .figures { grid-template-columns: 1fr; }
  .figures > div:last-child { grid-column: auto; }
  .figures dd { font-size: 1.9rem; }
  .btn { width: 100%; }
  .card, .work__body, .cert { padding: 1.25rem; }
  .cert__h { inset-block-start: 1.25rem; inset-inline-end: 1.25rem; }
  .skills h3, .school h3 { font-size: 1.22rem; }
  .skills h3 span { font-size: .5rem; padding: .14rem .45rem; }
}

/* — Pantallas estrechas de verdad (320 px): la cabecera se compacta — */
@media (max-width: 340px) {
  .mark { font-size: 1.05rem; gap: .35rem; }
  .lang { gap: .3rem; font-size: .66rem; }
  .tools { gap: .5rem; }
  .hero h1 { font-size: 2.25rem; }
  .band__title { font-size: 1.85rem; }
  .profile__text p:first-child { font-size: 1.24rem; }
}

/* — Móvil en horizontal: hay ancho pero no altura. Se recupera la doble
     columna en la portada y se recortan los espacios verticales. — */
@media (orientation: landscape) and (max-height: 560px) {
  .hero { min-height: 0; padding-block: calc(var(--bar) + 24px) 40px; }
  .hero .wrap { grid-template-columns: 1.1fr .9fr; gap: 1.6rem; align-items: center; }
  .stage { order: 0; width: min(300px, 42vw); }
  .band { padding-block: 56px; }
  .band__head { margin-block-end: 2rem; }
  .lede { margin-block-end: 1.6rem; padding-block-start: 1.2rem; }
  .cta { margin-block-end: 1.6rem; }
  .figures > div { padding-block-start: 1rem; }
  .menu { max-height: calc(100svh - var(--bar)); }
}

@media (orientation: landscape) and (max-height: 420px) {
  .hero h1 { font-size: 2.2rem; }
  .role, .available { margin-block-end: 1rem; }
  .figures { display: none; }        /* no cabe: las cifras se repiten en el perfil */
}


/* — Dispositivos táctiles: ningún destino por debajo de 44 px de alto.
     Se separa por `pointer: coarse` para no engordar la interfaz con ratón. — */
@media (pointer: coarse) {
  .mark { min-height: 44px; align-items: center; }
  .up { width: 44px; height: 44px; }

  /* El enlace del proyecto crece hacia arriba: el filete sigue bajo el texto */
  .work__go {
    min-height: 44px;
    align-items: flex-end;
    padding-block: .95rem .5rem;
  }

  .contact__list a { padding-block: 2.2rem; }
}


/* 19. Accesibilidad e impresión
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .rise { opacity: 1; transform: none; }
}

@media print {
  .layer, .progress, .top, .up, .stage,
  .carousel__nav, .carousel__note, .skip { display: none !important; }

  body { background: #fff; color: #111; font-size: 10.5pt; line-height: 1.5; }
  .band { padding-block: 1.1rem; break-inside: avoid; }
  .card { border: 1px solid #ccc; background: none; }
  .hero h1 em, .band__title em, .figures dd, .post__when, .cert__year { color: #111; }
  .work__host, .work__go { color: #333; }

  /* El carrusel se despliega en vertical para el currículum impreso */
  .carousel__stage { height: auto !important; overflow: visible; perspective: none; }
  .carousel__track { position: static; }
  .carousel__item {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 1rem !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .work__view { display: none; }
}