:root{
  --bg:#000; --card:#121722; --text:#f2f5f8; --muted:#9aa6b2; --border:#1c2330;
  --accent:#22e39c; --radius:16px; --maxw:1080px;
  --font-sans:"Work Sans", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display:"Outfit", var(--font-sans);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.55}
a{color:var(--text);text-decoration:none}

/* Layout */
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Header / Nav */
.header{position:sticky;top:0;z-index:10;backdrop-filter:blur(8px);background:rgba(0,0,0,.5);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-family:var(--font-display)}
.brand .logo{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--text);color:#0c1015;font-weight:800}
.nav ul{display:flex;gap:1rem;list-style:none;padding:0;margin:0}
.nav a{padding:.6rem .7rem;border-radius:10px}
.nav a.active,.nav a:hover{background:#161c27}
.menu-btn{display:none}
@media (max-width:760px){
  .menu-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--text)}
  .nav ul{display:none}
  .nav.open ul{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:#0f141d;border-bottom:1px solid var(--border)}
  .nav.open ul a{padding:1rem 20px;border-radius:0}
}

/* Hero */
.hero{padding:80px 0 50px}
.v2-wrap{text-align:center;padding:68px 0}
.v2-title{font:800 clamp(38px,6.2vw,66px)/1.02 var(--font-display);margin:0 0 12px}
.v2-sub{color:var(--muted);max-width:760px;margin:0 auto 18px}
.v2-cta{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}

/* Buttons (unificados con el verde de Home) */
.btn{display:inline-block;padding:.7rem 1rem;border-radius:12px;background:var(--accent);color:#051018;font-weight:700;border:1px solid var(--accent)}
.btn:hover{filter:brightness(1.06)}
.btn.outline{background:var(--accent);color:#051018;border:1px solid var(--accent)} /* outline igual de verde */
.btn.outline:hover{filter:brightness(1.06)}

/* Sections */
.section{padding:56px 0}
.h1{font:700 clamp(30px,5vw,56px)/1.06 var(--font-display);margin:0 0 12px}
.muted{color:var(--muted)}
.eyebrow{font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-size:.8rem}

/* Profile block */
.profile{display:grid;gap:24px;grid-template-columns:1.4fr 1.2fr;align-items:stretch}
.profile .col{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;min-height:440px}
.profile .title{font:800 clamp(32px,6vw,56px)/1.06 var(--font-display);margin:0 0 10px}
.profile .lead{color:var(--muted);font-size:clamp(16px,2.2vw,18px)}
.profile .lead strong{color:var(--text)}
.profile .photo{background:linear-gradient(135deg,#121a2a,#0c1015);display:grid;place-items:center}
#profile-photo{will-change:transform;transition:transform .2s ease-out;border-radius:16px}
@media (max-width:900px){.profile{grid-template-columns:1fr}.profile .col{min-height:auto}}

/* Cards / lists */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:0 16px 40px rgba(0,0,0,.2)}
.list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.list li{
  padding:10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  margin-bottom: 8px;
}

/* Academic — lista apilada (v19) */
.stack{display:grid;gap:12px}
.row-card{
  display:flex;flex-direction:column;gap:8px;
  padding:22px 24px;border-radius:16px;
  background:var(--card);border:1px solid var(--border);
  box-shadow:0 16px 40px rgba(0,0,0,.2);
}
.row-card h3{margin:0 0 4px;font-family:var(--font-display)}
.row-card p{margin:0 0 6px}

/* Thumbs (si los usas en otras páginas) */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card.thumb-card{position:relative;overflow:hidden;padding:0;min-height:190px;display:grid;align-content:end;border-radius:var(--radius)}
.card.thumb-card .thumb-bg{position:absolute;inset:0;background:var(--card) center/cover no-repeat;background-image:var(--bg-image,none);filter:saturate(.95) brightness(.92);transition:transform .35s ease, filter .35s ease}
.card.thumb-card:hover .thumb-bg{transform:scale(1.03);filter:saturate(1) brightness(1)}
.card.thumb-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.46) 70%)}
.card.thumb-card .thumb-content{position:relative;z-index:1;padding:18px}

/* Timeline (v19 con línea verde central y logos 64x64) */
.timeline{position:relative;margin:32px 0;padding:10px 0}
.timeline::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-2px);
  width:4px;border-radius:999px;
  background:linear-gradient(180deg,rgba(34,227,156,1) 0%,rgba(34,227,156,.75) 60%,rgba(34,227,156,.35) 100%);
  box-shadow:0 0 0 1px rgba(34,227,156,.15),0 0 18px rgba(34,227,156,.35),0 0 36px rgba(34,227,156,.2);
}
.tl-item{position:relative;width:100%;margin:34px 0}
.tl-dot{
  position:absolute;top:10px;left:50%;transform:translate(-50%,-50%);
  width:16px;height:16px;border-radius:999px;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 35%, transparent 65%);border:1px solid rgba(0,0,0,.4)
}
.tl-arm{position:absolute;top:10px;height:2px;width:44px;background:rgba(34,227,156,.35)}
.tl-arm.left{left:calc(50% - 44px)}
.tl-arm.right{left:50%}
.tl-side{max-width:520px}
.tl-side.left{margin-right:auto;padding-right:40px;text-align:right}
.tl-side.right{margin-left:auto;padding-left:40px;text-align:left}
.tl-head{display:flex;gap:.6rem;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.tl-role{font-weight:700;font-family:var(--font-display)}
.tl-meta{color:var(--muted);font-size:.95rem}
.tl-card{border:1px solid var(--border);border-radius:var(--radius);background:color-mix(in oklab, var(--card) 92%, black 8%);padding:18px}

/* Logos compactos (sustituye al .tl-ico antiguo de 28px) */
.tl-ico{width:64px;height:64px;border-radius:12px;display:inline-grid;place-items:center;background:#0f141d;border:1px solid var(--border);overflow:hidden;flex-shrink:0}
.tl-ico img{width:100%;height:100%;object-fit:contain;object-position:center}

.tl-ico{
  position: relative;             /* necesario para el pseudo-borde */
  width:64px;
  height:64px;
  border-radius:12px;
  display:inline-grid;
  place-items:center;
  background:#0f141d;
  border:1px solid var(--border);
  overflow:hidden;
  flex-shrink:0;
}

.tl-ico::after{
  content:"";
  position:absolute;
  inset:0;                        /* ocupa todo el recuadro */
  border:4px solid #fff;          /* borde blanco */
  border-radius:12px;
  pointer-events:none;            /* no bloquea clics */
  box-sizing:border-box;
}

.tl-ico img{
  width:100%;
  height:100%;
  object-fit:cover;               /* rellena el cuadro completo */
  object-position:center;
  display:block;
}


@media (max-width:980px){
  .timeline::before{left:18px;transform:none}
  .tl-dot{left:18px;transform:translate(-50%,-50%)}
  .tl-arm{display:none}
  .tl-side{max-width:none;padding-left:40px;padding-right:0;text-align:left}
  .tl-side.left,.tl-side.right{margin:0}
}

/* Canvas de fondo siempre debajo del contenido y sin bloquear clics */
#bg-canvas{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
main,header,footer{position:relative;z-index:1}

/* Floating side buttons */
.fab-stack{position:fixed;right:18px;bottom:18px;z-index:50;display:grid;gap:10px}
.fab{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--card);border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.fab:hover{transform:translateY(-1px)}
.fab svg{width:22px;height:22px;fill:var(--text);opacity:.9}

/* Footer */
.footer{padding:28px 0;color:var(--muted);border-top:1px solid var(--border);background:transparent}

/* Títulos en verde + subrayado sutil */
.card > h3,
.section > h2,
article > h3 {
  color: var(--accent);
  letter-spacing: .2px;
}
.card > h3{position: relative;padding-bottom: 6px}
.card > h3::after{
  content:"";position:absolute;left:0;bottom:0;width:72px;height:2px;
  background: linear-gradient(90deg,var(--accent),transparent);
  opacity:.85;border-radius:2px;
}

/* Imagen inline (float) para romper bloques de texto en páginas largas */
.figure-inline{
  max-width: min(42%, 360px);
  margin: .25rem 0 1rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.figure-inline img{width: 100%; height: auto; display:block}
.figure-inline figcaption{font-size: .85rem; opacity:.7; padding:6px 8px 8px}
.figure-inline.right{ float: right; margin-left: 16px }
.figure-inline.left { float: left;  margin-right:16px }
@media (max-width: 760px){
  .figure-inline{ float:none; max-width:100%; margin: .5rem 0 1rem }
  .figure-inline.right, .figure-inline.left{ margin: .5rem 0 1rem }
}

/* === Personal Projects grid — portadas uniformes === */
.projects-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
}
.project-card{
  display:flex; flex-direction:column; gap:4px;
  border-radius:16px;
  padding:16px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}
.project-media{
  position:relative;
  aspect-ratio: 16 / 9;          /* tamaño uniforme moderno */
  border-radius:4px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
  background:#0a0a0a;
}
/* Fallback para navegadores sin aspect-ratio */
@supports not (aspect-ratio: 16 / 9){
  .project-media::before{
    content:""; display:block; padding-top:56.25%; /* 16:9 */
  }
  .project-media > img{ position:absolute; inset:0 }
}
.project-media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block }
.project-title{ margin-top:4px }
.project-card .btn{ margin-top:2px }

/* --- Safe media boxes for inline images (evita overflow) --- */
.card img { max-width: 100%; height: auto; display: block; }

.media-box{
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
  background: rgba(255,255,255,0.03);
}
.media-box.ratio-16x9{ aspect-ratio: 16/9; }
.media-box.ratio-1x1 { aspect-ratio: 1/1; }
.media-box.ratio-4x3 { aspect-ratio: 4/3; }
.media-box > img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* clave para que no se salga */
  object-position: center;
}

/* Filas texto/imagen consistentes */
.row-2col{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 820px){
  .row-2col{ grid-template-columns: 1fr; }
}

/* ==== Hardening Tequila layout (solo maquetación) ==== */

/* Asegura que las columnas del grid no desborden */
.two-col, .two-col-alt {
  display: grid;
  gap: 18px;
  align-items: start;
}
.two-col       { grid-template-columns: 1.1fr 1fr; }
.two-col-alt   { grid-template-columns: 1fr 1.1fr; }
.two-col > *, .two-col-alt > * { min-width: 0; }

/* Figuras e imágenes dentro de tarjetas: no overflow */
.card figure, .card .figure, .media-box {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}

/* Si la figura debe mantener proporción, usa estas utilidades */
.media-box { aspect-ratio: 16/9; }
.media-box.square { aspect-ratio: 1 / 1; }
.media-box img,
.card figure img,
.card .figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;      /* clave para que no se salga */
  object-position: center;
}

/* Capciones más legibles pero compactas */
.card figure figcaption,
.card .figure figcaption {
  padding: 6px 8px 8px;
  font-size: .9rem;
  color: var(--muted);
}

/* En móviles, columnas apiladas */
@media (max-width: 860px){
  .two-col, .two-col-alt { grid-template-columns: 1fr; }
}