@font-face {
  font-family: "Futura Condensed Local";
  src: local("Futura Condensed PT Medium"), local("Futura PT Condensed Medium"), local("FuturaPTCond-Medium"), local("Futura Condensed Medium"), local("Futura-CondensedMedium");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Futura Condensed Local";
  src: local("Futura PT Condensed Extra Bold"), local("FuturaPTCond-ExtraBold"), local("Futura-CondensedExtraBold"), local("Futura Condensed PT Medium"), local("Futura PT Condensed Medium"), local("FuturaPTCond-Medium");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("barlow-condensed-bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --fondo: #0b0b14;
  --panel: #131321;
  --tinta: #f7f2ff;
  --suave: #c1b9d1;
  --lavanda: #d0b4f5;
  --morado: #ae86eb;
  --contorno: #37304a;
  --titulo: "Futura Condensed Local", "Barlow Condensed", "Arial Narrow", "Aptos Narrow", "Franklin Gothic Medium", sans-serif;
  --cuerpo: "DM Sans", "Segoe UI", sans-serif;
  --marco: min(1160px, 100% - clamp(36px, 9vw, 112px));
  --cabecera: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--cabecera) + 18px); }
body { margin: 0; color: var(--tinta); background: var(--fondo); font: 400 1rem/1.6 var(--cuerpo); }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
button { color: inherit; font: inherit; }
p, h1, h2, h3, figure, blockquote { margin: 0; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; line-height: .98; }
h2 { font-size: clamp(2.65rem, 5.25vw, 4.65rem); }
.marco { width: var(--marco); margin-inline: auto; }
.bloque { padding-block: clamp(55px, 8.3vw, 112px); }
.texto { color: var(--suave); max-width: 58ch; }
.sobrelinea { color: var(--lavanda); text-transform: uppercase; letter-spacing: .15em; font-size: .76rem; font-weight: 600; }
.salto { position: fixed; top: 10px; left: 12px; z-index: 10; transform: translateY(-160%); background: var(--lavanda); color: var(--fondo); padding: 10px 16px; }
.salto:focus { transform: none; }
:focus-visible { outline: 2px solid #e7d3ff; outline-offset: 4px; }
main:focus { outline: none; }

.cabecera {
  position: sticky;
  z-index: 5;
  top: 0;
  background: #0c0d17f5;
  border-bottom: 1px solid var(--contorno);
}
.cabecera-interior {
  min-height: var(--cabecera);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(18px, 3vw, 42px);
}
.marca { display: inline-flex; justify-self: start; align-items: center; }
.marca img {
  display: block;
  width: 57px;
  height: 51px;
  border-radius: 47%;
  object-fit: contain;
  mix-blend-mode: lighten;
}
.nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px clamp(15px, 2.3vw, 33px); }
.nav a, .cabecera-canal {
  padding-block: 12px;
  color: var(--suave);
  text-decoration: none;
  font-size: .92rem;
  white-space: nowrap;
}
.nav a:hover, .cabecera-canal:hover { color: var(--tinta); }
.cabecera-canal { justify-self: end; }
.cabecera-canal span { color: var(--lavanda); margin-inline-end: .32em; font-size: .77em; }
.menu { display: none; }

.portada {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 76% 54%, #372052 0%, #211831 23%, transparent 55%),
    linear-gradient(105deg, #0b0d18 3%, #101023 60%, #131023);
  border-bottom: 1px solid var(--contorno);
}
.portada-interior {
  min-height: clamp(515px, 48vw, 655px);
  position: relative;
  display: grid;
  grid-template-columns: .99fr 1.01fr;
  align-items: center;
}
.portada-interior::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 39px;
  border-top: 1px solid #a58bc743;
}
.portada-texto { z-index: 2; padding-block: 56px 84px; }
.portada h1 {
  margin: .12em 0 .15em;
  font-size: clamp(5.4rem, 11.25vw, 10rem);
  text-transform: uppercase;
  letter-spacing: -.042em;
  line-height: .75;
}
.portada h1 span { color: #c6a0ef; }
.portada-bajada { margin-block: 25px 29px; color: var(--suave); font-size: clamp(1.04rem, 1.7vw, 1.34rem); }
.portada-figura { position: relative; align-self: stretch; }
.portada-orbita {
  position: absolute;
  z-index: -1;
  width: 91%;
  max-width: 510px;
  aspect-ratio: 1;
  top: 50%;
  right: 3%;
  transform: translateY(-51%) rotate(-18deg);
  border: 1px solid #b892ee51;
  border-radius: 50%;
  background:
    radial-gradient(circle, #a67ce6ad 0 1px, transparent 1.6px) 12% 25% / 21px 29px,
    radial-gradient(circle, #ae80e514, transparent 72%);
  box-shadow: 0 0 66px #43236b56, inset 0 0 64px #794c9a24;
}
.portada-orbita::before, .portada-orbita::after {
  content: "";
  position: absolute;
  inset: 6%;
  border: 1px solid #bf9ce73f;
  border-radius: inherit;
}
.portada-orbita::after { inset: -5%; border-right-color: transparent; border-bottom-color: transparent; }
.portada-orbita span, .portada-orbita i {
  position: absolute;
  top: 17%;
  right: 7%;
  width: 9px;
  aspect-ratio: 1;
  background: #d8b6ff;
  transform: rotate(45deg);
  box-shadow: 0 0 14px #ba81ff;
}
.portada-orbita i { top: auto; right: auto; bottom: 11%; left: 9%; width: 6px; }
.portada-render {
  position: absolute;
  left: 1%;
  bottom: 26px;
  width: min(111%, 640px);
  max-width: none;
  max-height: 92%;
  object-fit: contain;
  object-position: bottom left;
  filter: drop-shadow(0 10px 30px #08051394);
  mask-image: linear-gradient(#000 0 92%, transparent 100%);
}

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-height: 47px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 4px;
  width: fit-content;
  font-size: .94rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.boton span, .enlace-texto span { font-size: 1.1em; }
.boton-primario { background: #c7a5f4; color: #190f27; }
.boton-primario:hover { background: #dfc9fb; }
.boton-secundario { border-color: #9581b3; background: #16132580; color: var(--tinta); }
.boton-secundario:hover { background: #302140; border-color: #c3a8e3; }
.enlace-texto { align-self: flex-start; color: var(--lavanda); font-size: .94rem; text-decoration: none; }
.enlace-texto:hover { color: var(--tinta); text-decoration: underline; }
.acciones > .enlace-texto { padding: 11px 6px; }

.encabezado-seccion { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: end; gap: 12px 30px; margin-bottom: clamp(22px, 4vw, 41px); }
.encabezado-seccion > p { color: var(--suave); }
.proyecto { padding-bottom: 0; }
.destacado {
  min-width: 0;
  display: grid;
  grid-template-columns: .87fr 1.13fr;
  border: 1px solid var(--contorno);
  border-radius: 7px;
  overflow: hidden;
  background: #161423;
}
.destacado-visual {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  min-height: 360px;
  padding: 32px 19px;
  background: radial-gradient(ellipse at 50% 50%, #503365, #211a34 54%, #111322 100%);
}
.destacado-orbita {
  position: absolute;
  z-index: -1;
  width: min(82%, 430px);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) rotate(26deg);
  border: 1px solid #d2acf54a;
  border-radius: 50%;
  box-shadow: 0 0 0 13px #ba8df220, 0 0 0 32px #ba8df210;
}
.destacado-orbita::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px dashed #cea6f564;
  border-radius: 50%;
}
.destacado-visual img {
  width: clamp(144px, 19vw, 244px);
  height: auto;
  border: 1px solid #efecff88;
  box-shadow: 0 18px 38px #05030bd9;
  transform: rotate(-8deg);
}
.destacado-texto { min-width: 0; padding: clamp(23px, 4.5vw, 57px); }
.destacado-texto h3 { font-size: clamp(2.9rem, 6.2vw, 5.2rem); margin-top: .16em; }
blockquote { font: italic 1.22rem/1.43 Georgia, serif; color: #efe4ff; }
.destacado-texto blockquote { margin: 21px 0 14px; border-left: 2px solid var(--morado); padding-left: 15px; }
.destacado-texto .texto { font-size: .96rem; }
.formula {
  margin: 22px 0;
  padding: 14px 6px 12px;
  border-block: 1px solid var(--contorno);
  color: #e5d1ff;
  text-align: center;
}
.formula math { font-size: clamp(1.17rem, 2.55vw, 1.86rem); font-family: "Cambria Math", "STIX Two Math", math; margin: 0 auto 8px; }
.formula figcaption { font-size: .78rem; color: var(--suave); }
.formula a { color: var(--lavanda); }

.filosofia { padding-bottom: clamp(57px, 9vw, 115px); }
.ensayos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.2vw, 26px); }
.ensayo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--contorno);
  border-radius: 6px;
  overflow: hidden;
}
.ensayo:hover { border-color: #9e7bca; }
.ensayo-imagen { display: block; overflow: hidden; }
.ensayo-imagen img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.ensayo-cuerpo { display: flex; flex-direction: column; padding: clamp(15px, 2.3vw, 25px); flex: 1; }
.ensayo h3 { font-size: clamp(1.85rem, 3.25vw, 2.5rem); margin: 15px 0 20px; }
.ensayo h3 a { text-decoration: none; }
.ensayo h3 a:hover { color: var(--lavanda); text-decoration: underline; }
.ensayo blockquote { font-size: 1.02rem; color: var(--lavanda); }
.ensayo .enlace-texto { margin-top: auto; }

.sobre-mi {
  background: radial-gradient(ellipse at 25% 63%, #33224c 0, #17172b 36%, #121220 75%);
  border-block: 1px solid var(--contorno);
  overflow: hidden;
}
.bio {
  display: grid;
  grid-template-columns: minmax(210px, .77fr) minmax(0, 1.23fr);
  gap: clamp(26px, 7vw, 91px);
  align-items: center;
}
.bio-figura { align-self: end; display: grid; justify-items: center; padding-top: 20px; }
.bio-figura img { max-height: 375px; object-fit: contain; object-position: bottom; mask-image: linear-gradient(#000 93%, transparent); }
.bio-texto { padding-block: clamp(44px, 7vw, 86px); }
.bio h3 { font-size: clamp(1.75rem, 3.5vw, 2.85rem); margin-top: 12px; color: var(--lavanda); }
.bio-texto > p { max-width: 56ch; margin: 17px 0; color: var(--suave); }
.bio blockquote { color: var(--tinta); font-size: clamp(1.17rem, 2.4vw, 1.6rem); margin-top: 23px; }
.contacto { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.contacto p { color: var(--suave); margin-top: 11px; max-width: 56ch; }
.contacto .boton { flex: none; }
.pie { border-top: 1px solid var(--contorno); background: #0d0d18; }
.pie-interior { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--suave); font-size: .85rem; }
.pie-interior span { color: var(--lavanda); }
.pie-interior a { text-decoration: none; white-space: nowrap; }
.pie-interior a:hover { text-decoration: underline; }

.lectura { background: radial-gradient(ellipse at 71% 7%, #251a37, transparent 60%), var(--fondo); }
.lectura-interior { max-width: 980px; padding-block: clamp(25px, 5vw, 58px) clamp(58px, 8vw, 112px); }
.ruta { margin-bottom: clamp(28px, 5vw, 61px); }
.ruta a { color: var(--lavanda); text-decoration: none; }
.ruta a:hover { text-decoration: underline; }
.ruta span { margin-right: .3em; }
.obra-titulo h1 { max-width: 17ch; font-size: clamp(3.1rem, 8vw, 7.1rem); margin-bottom: .27em; }
.obra-titulo .sobrelinea { margin-bottom: 13px; }
.obra-titulo blockquote { max-width: 46ch; font-size: clamp(1.28rem, 3.55vw, 2.35rem); }
.referencia { color: var(--suave); font-size: .86rem; margin-top: 13px; }
.referencia a { color: var(--lavanda); }
.obra-contenido {
  display: grid;
  grid-template-columns: 1fr 1.03fr;
  gap: clamp(22px, 5vw, 65px);
  align-items: start;
  margin-top: clamp(30px, 6vw, 60px);
  border-top: 1px solid var(--contorno);
  padding-top: clamp(25px, 4vw, 42px);
}
.obra-contenido .sobrelinea { margin-bottom: 8px; }
.obra-miniatura { width: 100%; height: auto; border-radius: 5px; border: 1px solid var(--contorno); }
.obra-arcana .destacado-visual { border-radius: 5px; min-height: 350px; }
.acciones-lectura { margin-block: 22px 9px; }
.datos-obra { color: var(--suave); font-size: .8rem; margin-bottom: 15px; }

@media (hover: hover) and (pointer: fine) {
  body { cursor: url("cursor.png") 5 4, auto; }
  a, button { cursor: url("cursor-enlace.png") 5 4, pointer; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .portada-orbita { animation: encender 1100ms ease-out both; }
  .boton, .nav a, .enlace-texto, .ensayo { transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .16s ease; }
  .boton:active { transform: scale(.97); }
  .ensayo-imagen img { transition: transform .28s ease; }
  .ensayo:hover img { transform: scale(1.025); }
  .aparecer.visible { animation: levantar .46s ease-out; }
  @keyframes levantar { from { transform: translateY(8px); } to { transform: none; } }
  @keyframes encender { from { opacity: .38; } to { opacity: 1; } }
}

@media (max-width: 850px) {
  .portada-interior { min-height: 490px; }
  .portada h1 { font-size: clamp(4.7rem, 12vw, 7rem); }
  .portada-render { width: min(118%, 530px); left: -4%; bottom: 39px; }
  .destacado { grid-template-columns: .72fr 1.28fr; }
}

@media (max-width: 680px) {
  :root { --cabecera: 63px; }
  .cabecera-interior { grid-template-columns: 1fr auto; column-gap: 18px; }
  .marca img { width: 53px; height: 47px; }
  .menu {
    justify-self: end;
    gap: 7px;
    border: 1px solid var(--contorno);
    border-radius: 4px;
    padding: 7px 10px;
    background: var(--panel);
    min-height: 42px;
    font-size: .86rem;
  }
  .tiene-js .menu { display: inline-flex; align-items: center; }
  .cabecera-canal { display: none; }
  .nav { grid-column: 1 / -1; justify-content: start; gap: 0 16px; padding-block: 4px 9px; }
  .nav a { font-size: .86rem; }
  .tiene-js .nav { display: none; }
  .tiene-js .menu[aria-expanded="true"] + .nav { display: flex; }
  .portada-interior { grid-template-columns: 1fr; min-height: auto; }
  .portada-texto { padding-block: 51px 8px; }
  .portada h1 { font-size: clamp(4.7rem, 15vw, 7.5rem); }
  .portada-bajada { margin: 16px 0 18px; }
  .portada-figura { height: clamp(275px, 75vw, 430px); }
  .portada-orbita { width: min(78%, 390px); right: 7%; transform: translateY(-47%) rotate(-18deg); }
  .portada-render { width: min(100%, 470px); height: 100%; max-height: 100%; left: auto; right: 0; bottom: 7px; object-position: right bottom; }
  .portada-interior::after { bottom: 22px; }
  .destacado { grid-template-columns: 1fr; }
  .destacado-visual { min-height: 240px; }
  .destacado-visual img { width: clamp(122px, 32vw, 180px); }
  .destacado-orbita { width: min(56%, 250px); }
  .ensayos, .obra-contenido { grid-template-columns: 1fr; }
  .ensayo-cuerpo { padding: 19px; }
  .ensayo h3 { font-size: clamp(2rem, 6.6vw, 2.6rem); }
  .bio { grid-template-columns: 1fr; gap: 0; }
  .bio-texto { grid-row: 1; padding-block: 40px 12px; }
  .bio-figura img { max-height: 245px; }
  .contacto { align-items: start; flex-direction: column; }
  .obra-arcana .destacado-visual { min-height: 245px; }
}

@media (max-width: 360px) {
  .portada h1 { font-size: clamp(3.55rem, 19.7vw, 4.6rem); }
  .boton { gap: 9px; padding-inline: 11px; }
  .destacado-texto { padding: 18px; }
  .pie-interior { flex-wrap: wrap; padding-block: 14px; gap: 4px 14px; }
}