/* Inspired by Brittany Chiang v4 (MIT): https://github.com/bchiang7/v4 */
/* ===== Tokens ===== */
:root{
  --navy:#0a192f; --light-navy:#112240; --lightest-navy:#233554;
  --slate:#8892b0; --light-slate:#a8b2d1; --lightest-slate:#ccd6f6;
  --white:#e6f1ff; --green:#64ffda;
  --sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --max: 1000px; --radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--navy); color:var(--slate); font-family:var(--sans); -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
a:hover{color:var(--green)}
.wrap{width:min(var(--max), 90%); margin:0 auto}

/* ===== Sidebars (left socials / right email) ===== */
.side{position:fixed; bottom:0; z-index:10; color:var(--light-slate)}
.side.left{left:40px}
.side.right{right:40px; bottom:24px; writing-mode:vertical-rl}
.side ul{display:flex; flex-direction:column; gap:16px; padding:0; margin:0 0 20px 0; list-style:none}
.side a{display:inline-flex; align-items:center; color: var(--light-slate); transition: color .2s ease}
.side a:hover{color: var(--green)}
.side::after{content:""; display:block; width:1px; height:80px; background:var(--light-slate); margin:0 auto}
.side.right a{
  font-size:0.9rem;         /* ⬅ un poco más pequeño */
  letter-spacing:.08em;     /* look tipo v4 */
  margin-bottom:20px;       /* ⬅ “respiro” antes de la línea, simétrico al left */
}
.side.right::after{
  height:90px;              /* ⬅ puedes mover a 80–100 para afinar */
}
@media (max-width: 900px){ .side{display:none} }

/* Hex-logo */
.hex-logo{display:block; transition:transform .3s ease;}
.hex-logo:hover{transform:rotate(20deg);}

/* ===== Topbar ===== */
.topbar{position:sticky; top:0; z-index:9; display:flex; justify-content:space-between; align-items:center;
  backdrop-filter: blur(6px); background: rgba(10,25,47,.6); padding: 1.55rem 2rem}
.topnav{display:flex; gap:22px; align-items:center}
.topnav .num{color:var(--green); font-family:var(--mono); font-size:.9rem; margin-right:.25rem}
.btn{border:1px solid var(--green); color:var(--green); border-radius:8px; padding:.6rem 1rem; font-weight:600}
.btn:hover{background:rgba(100,255,218,.08)}

/* ===== Hero ===== */
:root { --topbar-h: 68px; } /* altura aprox. de la barra superior */

/* Layout del hero: ocupa la pantalla y va un pelín más arriba */
.hero{
  min-height: calc(100vh - var(--topbar-h));  /* fallback */
  display: grid;
  align-content: center;        /* centra vertical */
  transform: translateY(-6vh);  /* súbelo un poco (-3/-5vh para ajustar) */
  padding: 0;
  row-gap: .7rem;
}
@supports (height: 100svh){
  .hero{ min-height: calc(100svh - var(--topbar-h)); } /* móvil moderno */
}

/* Tipografía/espaciado del bloque */
.pre{
  color: var(--green);
  font-family: var(--mono);
  margin: 0 0 .4rem;
}
.title{
  color: var(--lightest-slate);
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 800;
  line-height: 1.08;
  margin: .2rem 0 .7rem;
  text-wrap: balance;
}
.subtitle{
  color: var(--light-slate);
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
.hero .lead{
  max-width: 63ch;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
  line-height: 1.6;             /* ⬅ más respiración */
  letter-spacing: .005em;       /* sutil apertura */
}
.cta{ margin-top: 1.2rem; }

/* Palabra dinámica (si usas #rotatingWord) */
.accent { color: var(--green); }
#rotatingWord{
  display: inline-flex;
  width: 3.2ch;                 /* ajusta si cambias las palabras */
  justify-content: center;
  text-align: center;
  transition: opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1), filter .28s ease;
  will-change: transform, opacity;
}
#rotatingWord.is-out{
  opacity: 0;
  transform: translateY(.35em) scale(.98);
  filter: blur(2px);
}

/* Ajuste en pantallas muy bajas */
@media (max-height: 700px){
  .hero{ transform: translateY(-2vh); }
}

/* el hero será el contenedor del canvas de Vanta */
.hero{ position: relative; overflow: hidden; }

/* el canvas que inyecta Vanta */
.vanta-canvas{
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;     /* detrás del contenido */
  pointer-events: none !important; /* no bloquea clics en botones/enlaces */
  opacity: .35;               /* intensidad global del efecto (ajusta 0.25–0.45) */
}

/* ===== Sections ===== */
.section{padding:80px 0; border-top:0}
.section:first-of-type{border-top:0}
.section-title{color:var(--lightest-slate); font-size:1.5rem; display:flex; align-items:center; gap:.8rem; margin:0 0 24px}
.section-title span:first-child{color:var(--green); font-family:var(--mono); font-size:1.1rem}

/* About */
.about-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:start}
.about-text p{text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; line-height: 1.6}
.about-photo{position:relative; border-radius:var(--radius); padding:8px; border:1px solid rgba(100,255,218,.3)}
.about-photo img{display:block; width:100%; height:auto; border-radius:8px; filter:grayscale(10%) contrast(105%) brightness(95%)}
.about-photo.placeholder{background:linear-gradient(135deg, #09395a, #0e2240); height:260px}
/* Lista de skills en cuadrícula 3x3 con viñetas ▸ verdes */
.skills{
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: .35rem 1rem;
}
.skills li{
  position: relative;
  padding-left: 1.2rem;
  font-family: var(--mono);
  font-size: .95rem;
  color: var(--light-slate);
}
.skills li::before{
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  color: var(--green);
}

/* Responsive: en móviles pasa a 2 columnas */
@media (max-width: 640px){
  .skills{ grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

/* Experience (tabs) */
.tabs{display:grid; grid-template-columns:240px 1fr; gap:24px}
.tablist{display:flex; flex-direction:column; border-left:1px solid rgba(204,214,246,.15)}
.tab{all:unset; cursor:pointer; padding:.8rem 1rem; border-left:2px solid transparent; color:var(--light-slate)}
.tab.active{color:var(--green); border-color:var(--green); background:rgba(100,255,218,.06)}
.panel{display:none}
.panel.active{display:block}
.jobhead{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.jobhead h3{margin:0; color:var(--lightest-slate); font-size:1.1rem}
.at{color:var(--green)}
.date{font-family:var(--mono); color:var(--slate)}
.panel ul{margin:.6rem 0 0 0; padding-left:1.1rem}
.panel li{margin:.3rem 0}
@media (max-width: 900px){ .tabs{grid-template-columns:1fr} .tablist{flex-direction:row; border-left:0; border-bottom:1px solid rgba(204,214,246,.15)} .tab{border-left:0; border-bottom:2px solid transparent} .tab.active{border-bottom-color:var(--green)} }

/* Work / Projects */
.project{position:relative; display:grid; grid-template-columns: 1.1fr 1fr; gap:20px; align-items:center; margin:28px 0; background:transparent}
.project.alt{grid-template-columns: 1fr 1.1fr}
.project-media{height:280px; border-radius:var(--radius); background:linear-gradient(180deg,#0f2a4d,#12325b); border:1px solid rgba(100,255,218,.18)}
.project-copy{position:relative; z-index:2; background:var(--light-navy); border:1px solid rgba(100,255,218,.12); padding:18px; border-radius:var(--radius); box-shadow:0 12px 30px -24px rgba(2,12,27,.7)}
.project .eyebrow{color:var(--green); font-family:var(--mono); margin:0 0 6px}
.project h3{color:var(--lightest-slate); margin:.1rem 0 .5rem}
.tags{display:flex; gap:.5rem; flex-wrap:wrap; list-style:none; margin:.7rem 0 0; padding:0}
.tags li{font-family:var(--mono); border:1px solid rgba(204,214,246,.18); padding:.2rem .5rem; border-radius:8px; color:var(--light-slate); font-size:.9rem}
.links{margin-top:.6rem; display:flex; gap:12px; font-family:var(--mono)}
.img1{background-image:linear-gradient(135deg,#163e6f,#0a203d)}
.img2{background-image:linear-gradient(135deg,#0a203d,#184c7e)}
.img3{background-image:linear-gradient(135deg,#183c74,#0a203d)}
@media (max-width: 900px){ .project, .project.alt{grid-template-columns:1fr} }

/* Contact */
.contact{text-align:center}
.contact-title{color:var(--lightest-slate); font-size:clamp(24px, 4vw, 36px); margin:.4rem 0 1rem}

/* Footer */
.footer{padding:40px 0; text-align:center; color:var(--slate); border-top:0}