/* -----------------------------
   Álvaro Pérez | Portfolio v2
--------------------------------*/
:root{--header-h:64px;
  --bg:#0b1020; --panel:#101935; --muted:#8BA3B8; --text:#E8EEF5;
  --brand:#7dd3fc; --brand-2:#a78bfa; --accent:#22d3ee; --ok:#34d399;
  --link:#7dd3fc; --linkVisited:#c084fc; --linkHover:#a5f3fc; --linkFocusRing:0 0 0 3px rgba(125,211,252,.45);
  --ring:0 0 0 4px rgba(125,211,252,.35); --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
:root.light{
  --bg:#f7f9fc; --panel:#ffffff; --muted:#5b6b7b; --text:#0b1020;
  --brand:#0ea5e9; --brand-2:#7c3aed; --accent:#06b6d4; --ok:#059669;
  --link:#0ea5e9; --linkVisited:#7c3aed; --linkHover:#0284c7;
  --shadow:0 10px 30px rgba(8,28,64,.1);
}
*{box-sizing:border-box} html,body{height:100%} html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 1200px at 120% -10%, rgba(125,211,252,.08), transparent 40%),
              radial-gradient(900px 900px at -10% 120%, rgba(167,139,250,.08), transparent 45%),
              var(--bg);
}
a{color:var(--link)} a:visited{color:var(--linkVisited)} a:hover{color:var(--linkHover)} a:focus-visible{outline:none; box-shadow:var(--linkFocusRing); border-radius:6px}

.container{width:min(1100px,92vw);margin:0 auto} .grid{display:grid;gap:20px} .section{padding:72px 0}
h1,h2,h3{line-height:1.2;margin:0 0 12px} h1{font-size:clamp(34px,5vw,52px)} h2{font-size:clamp(26px,4vw,34px)} h3{font-size:clamp(20px,3.2vw,24px)}
p{margin:0 0 12px}

/* Header */
.header{position:fixed; top:0; left:0; right:0; z-index:100; backdrop-filter:blur(10px); background:color-mix(in oklab,var(--bg),transparent 60%); border-bottom:1px solid color-mix(in oklab,var(--text),transparent 90%)}
.header .wrap{display:flex; align-items:center; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)} .brand img{width:32px;height:32px;border-radius:50%} .brand span{font-weight:800;letter-spacing:.6px}
.nav{margin-left:auto; display:flex; gap:12px; align-items:center}
.nav a{color:var(--text); text-decoration:none; padding:8px 12px; border-radius:12px}
.nav a:hover,.nav a:focus-visible{outline:none; box-shadow:var(--ring)}
.theme-toggle{background:linear-gradient(135deg,var(--brand),var(--brand-2)); border:none; color:#001; font-weight:700; padding:9px 12px; border-radius:12px; cursor:pointer}

/* Hero */
.hero{display:grid; gap:24px; align-items:center; grid-template-columns:110px 1fr; padding:28px 0 12px}
.hero .avatar{width:90px; height:90px; border-radius:24px; overflow:hidden; border:1px solid color-mix(in oklab,var(--text),transparent 85%); box-shadow:var(--shadow); background:linear-gradient(135deg, rgba(125,211,252,.25), rgba(167,139,250,.25))}
.hero .meta{display:flex; flex-wrap:wrap; gap:10px}
.tag{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:color-mix(in oklab,var(--panel),transparent 20%); border:1px solid color-mix(in oklab,var(--text),transparent 90%); font-size:13px}

/* Cards */
.card{background:color-mix(in oklab,var(--panel),transparent 0%); border:1px solid color-mix(in oklab,var(--text),transparent 90%); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}

/* Timeline */
.timeline{position:relative; display:grid; gap:18px}
.timeline::before{content:''; position:absolute; left:14px; top:4px; bottom:4px; width:2px; background:color-mix(in oklab,var(--text),transparent 88%)}
.entry{position:relative; padding-left:42px}
.entry .dot{position:absolute; left:8px; top:8px; width:12px; height:12px; border-radius:50%; background:linear-gradient(180deg,var(--brand),var(--brand-2)); box-shadow:0 0 0 4px color-mix(in oklab,var(--brand),transparent 70%)}
.entry h4{margin:0 0 6px; font-size:18px} .entry .when{color:var(--muted); font-size:13px; margin-bottom:8px}

/* Skills */
.skills{display:flex; flex-wrap:wrap; gap:10px}
.skill{border:1px dashed color-mix(in oklab,var(--text),transparent 70%); padding:8px 12px; border-radius:10px; font-size:14px; background:color-mix(in oklab,var(--panel),transparent 10%); transition:transform .15s ease}
.skill:hover{transform:translateY(-2px)}

/* Quote */
.quote{border-left:4px solid var(--brand); padding-left:14px; font-style:italic; color:var(--muted)}

/* Footer */
.footer{padding:40px 0 80px; color:var(--muted); text-align:center; border-top:1px solid color-mix(in oklab,var(--text),transparent 90%)}

/* Command palette */

#letter-modal{position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.55); z-index:120}
#letter-modal .panel{width:min(1000px,94vw); max-height:92vh; background:var(--panel); border:1px solid color-mix(in oklab,var(--text),transparent 85%); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}
#letter-modal header{display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid color-mix(in oklab,var(--text),transparent 85%)}
#letter-modal header h4{margin:0; font-size:16px}
#letter-modal .content{overflow:auto; padding:0; background:#1116}
#letter-modal .content img{display:block; width:100%; height:auto}
#close-letter{background:transparent; border:1px solid color-mix(in oklab,var(--text),transparent 70%); color:var(--text); padding:6px 10px; border-radius:10px; cursor:pointer}
.letter-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.letter-card{display:flex; flex-direction:column; gap:10px}
.preview{height:180px; border-radius:12px; overflow:hidden; border:1px solid color-mix(in oklab,var(--text),transparent 85%); background:color-mix(in oklab,var(--panel),transparent 8%); display:block}
.preview img{width:100%; height:100%; object-fit:cover; object-position:center 20%; filter:contrast(1.05) saturate(1.05); transition:transform .3s ease}
.preview:hover img{transform:scale(1.02)}

/* Media */
@media (max-width:900px){ :root{--header-h:56px} .hero{grid-template-columns:80px 1fr} .nav a{display:none} }

/* Dark theme explicit button (keep original gradient solid look) */
/* Light theme variant: outlined pill to blend with light panels */

/* === Recommendation CTA Styles (theme-aware, final) === */
:root:not(.light) .letter-card button{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  display:block; width:100%;
  background-image: linear-gradient(135deg, var(--brand), var(--brand-2));
  background-color: transparent;
  border:0;
  color:#020617;
  padding:14px 18px;
  border-radius:999px;
  font-weight:800; font-size:0.95rem;
  letter-spacing:.2px;
  box-shadow:0 18px 40px rgba(0,0,0,.32);
  cursor:pointer;
  transition:transform .12s ease-out, box-shadow .12s ease-out, filter .15s ease;
}
:root:not(.light) .letter-card button:hover{ transform:translateY(-1px); filter:saturate(1.05); }
:root:not(.light) .letter-card button:active{ transform:translateY(0); }
:root:not(.light) .letter-card button::after{ content:"→"; font-weight:900; font-size:1rem; margin-left:6px; }

:root.light .letter-card button{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  display:block; width:100%;
  background:
    linear-gradient(180deg, #f7fbff, #eef5ff) padding-box,
    linear-gradient(135deg, var(--brand), var(--brand-2)) border-box;
  border:2px solid transparent;
  color:#0f172a;
  padding:14px 18px;
  border-radius:999px;
  font-weight:800; font-size:0.95rem;
  letter-spacing:.2px;
  box-shadow: 0 12px 28px rgba(2, 6, 23, .10);
  cursor:pointer;
  transition:transform .12s ease-out, box-shadow .12s ease-out, filter .15s ease;
}
:root.light .letter-card button:hover{ transform:translateY(-1px); box-shadow:0 16px 34px rgba(2,6,23,.12); }
:root.light .letter-card button:active{ transform:translateY(0); }
:root.light .letter-card button::after{ content:"→"; font-weight:900; font-size:1rem; margin-left:6px; }

section[id]{scroll-margin-top:calc(var(--header-h) + 12px)}

/* Active section indicator in top nav */
.nav a.active, .nav a[aria-current="true"]{
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
  text-decoration-color: color-mix(in oklab, var(--brand), var(--brand-2) 40%);
}

/* How-I-work helpers */
.card ul.principles{padding-left:18px;margin:6px 0 0 0}
.card ul.principles li{margin:6px 0}

/* Active state for brand when at #inicio */
.brand.active{ text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px;
  text-decoration-color: color-mix(in oklab, var(--brand), var(--brand-2) 40%); }

/* Contact section styles */
.contact-card{
  display:grid; gap:18px; grid-template-columns:1.2fr .8fr;
  background: linear-gradient(135deg, color-mix(in oklab,var(--brand),transparent 70%), color-mix(in oklab,var(--brand-2),transparent 70%));
  border:1px solid color-mix(in oklab,var(--text),transparent 85%);
  border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow);
}
.contact-main h3{margin:0 0 8px; font-size:clamp(22px,2.8vw,28px)}
.contact-main p{margin:0 0 12px}
.cta-row{display:flex; flex-wrap:wrap; gap:10px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:none; text-decoration:none; cursor:pointer; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#001; font-weight:700}
.btn.outline{background:transparent; border:1.5px solid color-mix(in oklab,var(--brand),var(--brand-2) 40%); color:var(--text)}
.contact-facts{list-style:none; margin:0; padding:0; display:grid; gap:8px}
@media (max-width:900px){ .contact-card{grid-template-columns:1fr} }


:root.light .contact-card{
  background:
    linear-gradient(180deg, rgba(14,165,233,.08), rgba(124,58,237,.08)),
    #ffffff;
  border: 1px solid color-mix(in oklab, var(--text), transparent 86%);
  box-shadow: 0 12px 28px rgba(8, 28, 64, .08);
}
:root.light .btn{ color:#0f172a }
:root.light .btn.outline{
  background: transparent;
  border-color: color-mix(in oklab, var(--brand), var(--brand-2) 40%);
  color:#0b1020;
}


/* Light theme: force primary CTAs to soft/glassy look */
:root.light .contact-card .btn:not(.outline){
  background:
    linear-gradient(180deg, #ffffff, #f7fbff) padding-box,
    linear-gradient(135deg, var(--brand), var(--brand-2)) border-box !important;
  border:2px solid transparent !important;
  color:#0f172a !important;
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
}
:root.light .contact-card .btn:not(.outline):hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(2,6,23,.12);
}

.btn.sm{ padding:8px 12px; font-size:.9rem; border-radius:10px }

#cv-modal{position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.55); z-index:120}
#cv-modal .panel{width:min(1100px,95vw); height:min(92vh, 1200px); background:var(--panel); border:1px solid color-mix(in oklab,var(--text),transparent 85%); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}
#cv-modal header{display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid color-mix(in oklab,var(--text),transparent 85%)}
#cv-modal header h4{margin:0; font-size:16px}
#cv-modal .content{flex:1; overflow:hidden; background:#1116}
#cv-modal .content iframe{display:block; width:100%; height:100%; border:0; background:#fff}

/* CV card refinements */
.cv-card .cv-actions{ margin-top:12px }
.cv-meta{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.cv-meta li{ padding:6px 10px; border-radius:999px; border:1px solid color-mix(in oklab,var(--text),transparent 85%); background:color-mix(in oklab,var(--bg),transparent 10%); font-size:.95rem }

:root.light .cv-card .btn{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  display:block; width:100%;

  background:
    linear-gradient(180deg, #ffffff, #f7fbff) padding-box,
    linear-gradient(135deg, var(--brand), var(--brand-2)) border-box !important;
  border:2px solid transparent;
  color:#0f172a;
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
}

/* CV preview thumbnail */
.cv-preview{ position:relative; height:170px; border-radius:14px; overflow:hidden;
  border:1px solid color-mix(in oklab,var(--text),transparent 88%);
  box-shadow: 0 10px 26px rgba(0,0,0,.12); margin:6px 0 12px; background:var(--panel) }
.cv-preview iframe{ width:100%; height:100%; border:0; pointer-events:none; background:#fff }
.cv-preview .cv-fade{ position:absolute; inset:auto 0 0 0; height:38px;
  background: linear-gradient(180deg, transparent, color-mix(in oklab,var(--panel), transparent 0%)); }
:root.light .cv-preview{ box-shadow: 0 8px 22px rgba(2,6,23,.08); border-color: color-mix(in oklab,var(--text),transparent 86%) }

.cv-preview{ transition: transform .18s ease, box-shadow .18s ease; }
.cv-preview:hover{ transform: scale(1.02); box-shadow: 0 18px 38px rgba(0,0,0,.18) }
.cv-preview iframe{ width: calc(100% + 14px); transform: translateX(-7px); }

.cv-card .cv-actions .btn{ width:100% !important; display:block !important; }

/* CV CTA motion = letter CTA motion */
:root:not(.light) .cv-card .btn{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  display:block; width:100%;
  background-image: linear-gradient(135deg, var(--brand), var(--brand-2));
  background-color: transparent;
  border:0;
  color:#020617;
  padding:14px 18px;
  border-radius:999px;
  font-weight:800; font-size:0.95rem;
  letter-spacing:.2px;
  box-shadow:0 18px 40px rgba(0,0,0,.32);
  cursor:pointer;
  transition:transform .12s ease-out, box-shadow .12s ease-out, filter .15s ease;
}
:root:not(.light) .cv-card .btn:hover{ transform:translateY(-1px); filter:saturate(1.05); }
:root:not(.light) .cv-card .btn:active{ transform:translateY(0); }
:root:not(.light) .cv-card .btn::after{ content:"→"; font-weight:900; font-size:1rem; margin-left:6px; }

:root.light .cv-card .btn:hover{ transform:translateY(-1px); box-shadow:0 16px 34px rgba(2,6,23,.12); }
:root.light .cv-card .btn:active{ transform:translateY(0); }
:root.light .cv-card .btn::after{ content:"→"; font-weight:900; font-size:1rem; margin-left:6px; }


/* Contact CTA hover cues */
.contact-card .btn.outline{
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease;
}
/* Attribute-based targeting for brand-specific hover */
.contact-card a[href*="linkedin"]{ --brandL:#0A66C2; }
.contact-card a[href*="github"]{ --brandL:#24292e; }

:root:not(.light) .contact-card a[href*="linkedin"]:hover,
:root:not(.light) .contact-card a[href*="github"]:hover{
  background: color-mix(in oklab, var(--brandL), transparent 82%);
  border-color: color-mix(in oklab, var(--brandL), transparent 30%);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.25);
}

:root.light .contact-card a[href*="linkedin"]:hover,
:root.light .contact-card a[href*="github"]:hover{
  background: color-mix(in oklab, var(--brandL), #ffffff 88%);
  border-color: color-mix(in oklab, var(--brandL), transparent 20%);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(2,6,23,.10);
  text-decoration: none;
}
/* Focus-visible ring for accessibility */
.contact-card .btn.outline:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--brand), var(--brand-2) 40%);
  outline-offset: 2px;
}

/* Educación grid keeps default spacing */
.edu-cards{ gap: 28px; }


/* === Responsive fixes & hamburger (v2025-11-10) ===================== */

/* 1) Evitar solape del avatar con el título en formatos muy estrechos */
@media (max-width: 560px){
  .hero{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .hero .avatar{
    width: 86px;
    height: 86px;
  }
}

/* 2) Menú hamburguesa: estilos (se inyecta por JS, sin tocar HTML) */

/* Botón hamburguesa */
.nav-toggle{
  background: transparent;
  border: 1.5px solid color-mix(in oklab,var(--text),transparent 70%);
  width: 38px;
  height: 32px;
  border-radius: 10px;
  display: none; /* visible solo cuando haga falta */
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 7px;
  cursor: pointer;
}
.nav-toggle span{
  display: block;
  height: 2.7px;
  border-radius: 999px;
  background: var(--text);
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle.is-open span:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2){
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}

/* Panel desplegable */
.mobile-menu{
  position: fixed;
  top: calc(var(--header-h) + 6px);
  right: 12px;
  background: color-mix(in oklab,var(--panel),transparent 0%);
  border: 1px solid color-mix(in oklab,var(--text),transparent 85%);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px 12px;
  display: none;
  flex-direction: column;
  gap: 6px;
  z-index: 120;
  min-width: 180px;
}
.mobile-menu a{
  text-decoration: none;
  color: var(--text);
  padding: 7px 8px;
  border-radius: 10px;
}
.mobile-menu a:hover,
.mobile-menu a:focus-visible{
  background: color-mix(in oklab,var(--text),transparent 90%);
  outline: none;
}

/* Estado comprimido: ocultamos enlaces y mostramos el botón */
.nav.nav--compressed a{ display: none; }
.nav.nav--compressed .nav-toggle{ display: flex; }

/* En móviles muy estrechos ya ocultas los enlaces: mostramos botón */
@media (max-width: 900px){
  .nav a{ display: none; }
  .nav .nav-toggle{ display: flex; }
}