/* === Base: tokens, reset, theming === */
:root {
  /* spacing & radii */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --radius-1:10px; --radius-2:14px; --radius-round:999px;
  --progress-h:4px;

  /* colors (light default) */
  --bg-page:#fdfdfd;
  --fg:#111;
  --fg-muted:#555;
  --bg-card:#fff;
  --bg-card-alt:#f3f3f3;
  --border:rgba(0,0,0,.12);
  --accent:#ff8c00;
  --link:#0066cc;
  --link-hover:#004999;
}
html[data-theme="dark"]{
  --bg-page:#0b1030;
  --fg:#e7e7e7;
  --fg-muted:#bbb;
  --bg-card:#111;
  --bg-card-alt:#101426;
  --border:rgba(255,255,255,.12);
  --link:#66d9ff;
  --link-hover:#33bbff;
}

*,
*::before,
*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(80px + var(--progress-h)); }
body{
  font-family: 'Inter','Poppins',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
  font-size:16px; line-height:1.6; color:var(--fg); background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
}

/* === Typography & links === */
h1,h2,h3,h4,h5,h6{
  font-family:'Poppins','Inter',sans-serif; font-weight:600; line-height:1.3; margin:1.2rem 0 .6rem;
}
h1{ font-size:2.4rem; } h2{ font-size:1.9rem; } h3{ font-size:1.6rem; } h4{ font-size:1.3rem; }
h1:hover,h2:hover,h3:hover,h4:hover,h5:hover,h6:hover{
  text-decoration-color:#504644; text-underline-offset:4px; transition:text-decoration-color .3s ease;
}
p{ font-size:1rem; line-height:1.7; }

a{ color:var(--link); font-weight:500; text-decoration:none; border-bottom:1px solid transparent; transition:color .3s, border-color .3s; }
a:hover{ color:var(--link-hover); border-bottom-color:var(--link-hover); }

/* === Layout basics === */
.container{ width:80%; max-width:1200px; margin-inline:auto; }
section{ padding:60px 0; }

/* === Header / Nav === */
header.rutas{
  position:sticky; top:var(--progress-h); width:100%; z-index:1000;
  background:#333; box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.nav-list{ display:flex; justify-content:center; align-items:center; gap:20px; }
.nav-list ul{ list-style:none; display:flex; justify-content:center; align-items:center; gap:15px; }
.nav-list a{ color:#fff; font-size:1.1rem; transition:color .3s; }
.nav-list a:hover{ color:var(--accent); }
.nav-list a.active{ color:var(--accent); border-bottom:2px solid var(--accent); }
.menu-toggle{ display:none; background:none; border:0; font-size:1.6rem; color:#fff; }

/* Mobile nav */
@media (max-width:768px){
  .menu-toggle{ display:inline-block; margin-right:1rem; }
  .nav-list{ display:none; flex-direction:column; gap:10px; }
  .nav-list.open{ display:flex; }
}

/* === About === */
#Acercademi{
  --radius:22px;
  --pad:clamp(1.1rem,3vw,2rem);
  max-width:min(980px,92vw);
  margin:clamp(1rem,3vw,2.4rem) auto;
  padding:var(--pad);
  border-radius:var(--radius);
  text-align:left;
  background:
    radial-gradient(1200px 600px at 0% -10%, rgba(255,140,0,.10), transparent 45%),
    radial-gradient(1000px 500px at 110% 10%, rgba(0,188,212,.10), transparent 45%),
    var(--bg-card-alt);
  box-shadow:0 10px 32px rgba(0,0,0,.18);
  backdrop-filter:saturate(120%) blur(6px);
}
#Acercademi .about-grid{
  display:grid; grid-template-columns:1fr; gap:clamp(1rem,2.4vw,2rem); align-items:center;
}
@media (min-width:860px){
  #Acercademi .about-grid{ grid-template-columns:minmax(220px,280px) 1fr; }
}

/* avatar */
.about_img{
  inline-size:clamp(160px,26vw,240px); aspect-ratio:1; object-fit:cover; border-radius:50%;
  display:block; margin:0 auto; position:relative; isolation:isolate;
  box-shadow:0 0 0 6px rgba(255,140,0,.9), 0 16px 34px rgba(0,0,0,.18);
}
.about_img::after{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  background:conic-gradient(from 0deg, #ffb266 0 25%, #a9f2ff 25% 50%, #c7b9ff 50% 75%, #ffb266 75% 100%);
  filter:blur(10px) saturate(120%) opacity(.35); z-index:-1; animation:spinRing 14s linear infinite;
}
@keyframes spinRing{ to{ transform:rotate(360deg); } }
.about_img:hover{ transform:translateY(-2px); transition:transform .18s ease; }
.about_img:focus-visible{ outline:3px solid var(--accent); outline-offset:4px; }
@media (prefers-reduced-motion:reduce){
  .about_img::after{ animation:none; }
  .about_img:hover{ transform:none; }
}

#Acercademi h1{ font-size:clamp(1.8rem,3vw,2.4rem); line-height:1.15; margin:.2rem 0 .4rem; }
#Acercademi h3{ font-size:clamp(1.1rem,2vw,1.25rem); opacity:.9; margin-top:.2rem; }
#Acercademi p{ margin:.4rem 0 1rem; }

.badge-available{
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(34,197,94,.12); color:inherit; border:1px solid rgba(34,197,94,.45);
  padding:.35rem .7rem; border-radius:var(--radius-round); font-size:.95rem; font-weight:600;
}
.badge-available::before{
  content:""; inline-size:.6rem; block-size:.6rem; border-radius:50%;
  background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.45); animation:ping 2s cubic-bezier(.2,0,.2,1) infinite;
}
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.45);} 70%{ box-shadow:0 0 0 10px rgba(34,197,94,0);} 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0);} }
@media (prefers-reduced-motion:reduce){ .badge-available::before{ animation:none; } }

.btn-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:.4rem 0 1.2rem; padding:.7rem 1rem; border-radius:12px; font-weight:700;
  border:0; background:linear-gradient(180deg,#ffb266,var(--accent)); color:#111;
  box-shadow:0 10px 24px rgba(255,140,0,.28);
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-cta::after{ content:"→"; font-weight:800; transition:transform .12s ease; }
.btn-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(255,140,0,.34); filter:brightness(1.04); }
.btn-cta:hover::after{ transform:translateX(2px); }

/* === Aportaría === */
.aportaria{
  max-width:900px; margin:1rem auto 2rem; padding:1.5rem;
  background:rgba(124,101,101,.103); border-radius:14px; box-shadow:0 4px 20px rgba(214,86,86,.08);
}
.aportaria h2{ font-size:1.4rem; margin-bottom:.6rem; }
.aportaria-list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; list-style:none; padding:0; margin:.5rem 0 0;
}
.aportaria-list li{
  color:#5858cfee; text-align:left; border:1px solid rgba(255,39,122,.07);
  background:rgba(255,255,255,.6); padding:.8rem .9rem;
}
html[data-theme="dark"] .aportaria{ background:rgba(17,17,17,.9); }
html[data-theme="dark"] .aportaria-list li{ background:rgba(34,34,34,.9); border-color:rgba(255,255,255,.06); }
@media (max-width:640px){ .aportaria-list{ grid-template-columns:1fr; } }

/* === Habilidades & Soft skills === */
.Habilidades{ background-color:#f0f0f0; text-align:center; }
.Habilidades h4{ color:#000; font-weight:700; margin-top:20px; }
.Habilidades img{ width:70px; height:90px; margin:12px; transition:transform .3s; }
.Habilidades img:hover{ transform:scale(1.1); }

.softskills{ padding:20px; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,.1); margin-top:20px; text-align:center; }
.softskills .skills-list{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem; list-style:none; padding:0; margin:0;
}
.softskills .skills-list li{
  display:flex; align-items:center; gap:.6rem; padding:.9rem 1rem; border-radius:12px;
  border:1px solid var(--border); background:rgba(255,255,255,.05); box-shadow:0 2px 10px rgba(0,0,0,.12);
}
@media (max-width:640px){ .softskills .skills-list{ grid-template-columns:1fr; } }

/* === Estudios & Proyectos === */
#Estudios, #Proyectos, .certificados, .proyectos{ background:var(--bg-card); color:var(--fg); text-align:center; }

.certificados{ font-size:1.1rem; margin-bottom:10px; }
.certificados ul{ list-style:none; padding:0; }
.certificados ul li{ margin-bottom:30px; }

/* Proyectos grid & cards */
#Proyectos{ padding:16px 8px; }
#Proyectos ul{ list-style:none; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
#Proyectos li{
  border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.05);
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  transition:transform .2s, box-shadow .2s, border-color .2s, background .2s;
  padding:16px; margin:10px;
}
#Proyectos li:hover{
  transform:translateY(-4px); border-color:#00bcd4; background:rgba(0,188,212,.12);
  box-shadow:0 8px 22px rgba(0,188,212,.25);
}
#Proyectos p, #Proyectos a{ color:#057e78ee; }

/* Demo button */
.btn-demo{
  display:inline-block; margin:5px 0; padding:6px 12px; background-color:#0926cc; color:#fff;
  text-decoration:none; border-radius:6px; font-size:.9rem; transition:background-color .3s;
}
.btn-demo:hover{ background-color:#db830e; }
.btn-demo::before{
  content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" width="16" height="16" viewBox="0 0 16 16"><path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8z"/><path d="M8 5a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg>');
  display:inline-block; vertical-align:middle; margin-right:6px;
}

/* === Lists (shared) === */
ul{ list-style-type:none; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
li{
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  text-align:center; border-radius:12px; transition:all .3s; background:rgba(255,255,255,.05); backdrop-filter:blur(6px);
}
li:hover{ border-color:#00bcd4; background:rgba(0,188,212,.15); box-shadow:0 6px 14px rgba(0,188,212,.4); transform:translateY(-4px); }

/* === Utilities: to-top, progress, theme toggle === */
.to-top{
  position:fixed; right:1rem; bottom:1rem; padding:.6rem .8rem;
  border-radius:var(--radius-round); border:0; box-shadow:0 2px 10px rgba(0,0,0,.2);
  cursor:pointer; z-index:60; background:var(--accent); color:#111; transition:transform .12s, box-shadow .2s;
}
.to-top:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.22); }
.theme-toggle{
  position:fixed; right:1rem; bottom:4.2rem; z-index:60; border:0;
  padding:.5rem .6rem; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.2); background:var(--accent); color:#111;
  transition:transform .12s, box-shadow .2s;
}
.theme-toggle:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.22); }
html[data-theme="dark"] .to-top,
html[data-theme="dark"] .theme-toggle{
  background:#222; color:var(--fg); border:1px solid #333;
}

.progress{
  position:fixed; top:0; left:0; height:4px; width:0%; background:var(--accent); z-index:1100;
  pointer-events:none;
}

/* === Lightbox === */
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.8); display:grid; place-items:center; z-index:1000;
}
.lightbox-overlay img{ max-width:90vw; max-height:85vh; border-radius:10px; }

/* === Footer === */
.footer-top{
  display:flex; justify-content:center; align-items:flex-start; gap:1.5rem; flex-wrap:wrap; margin:1.5rem auto; width:600px; text-align:left;
}
.contact-info{ flex:1; align-items:center; }
.social-links{ flex:1; display:flex; flex-direction:column; gap:.4rem; align-items:center; }

footer .contact-card{
  display:flex; align-items:center; gap:.8rem; padding:.8rem 1rem; width:68%;
  border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 4px 18px rgba(0,0,0,.12); transition:transform .15s, box-shadow .2s;
}
footer .contact-card:hover{ transform:translateY(-2px); box-shadow:0 6px 22px rgba(0,0,0,.18); }
footer .contact-card img{ width:24px; height:24px; filter:grayscale(100%) brightness(200%); }
footer .contact-card a{ color:inherit; display:flex; justify-content:center; text-decoration:none; font-size:1rem; overflow-wrap:break-word; word-break:break-all; min-width:0; }
footer .contact-card a:hover{ color:var(--accent); }

.footer-badges{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; align-items:center; margin-top:.8rem; }
.footer-badges .badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border-radius:var(--radius-round); font-size:.9rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); box-shadow:0 2px 8px rgba(0,0,0,.12); }
.footer-badges .badge a{ color:inherit; text-decoration:none; }
.footer-badges .badge a:hover{ color:var(--accent); }

footer .footer-bottom{
  display:flex; flex-direction:column; align-items:center; gap:.5rem; margin-top:1.2rem; padding-top:1rem;
  border-top:1px solid var(--border);
}
footer .footer-bottom p{ margin:.4rem 0; font-size:.95rem; color:var(--fg); text-align:center; }
footer .footer-bottom a{
  display:inline-block; margin-top:.3rem; padding:.5rem 1rem; border-radius:12px;
  background:var(--accent); color:#111; text-decoration:none; transition:transform .15s, filter .2s;
}
footer .footer-bottom a:hover{ transform:translateY(-2px); filter:brightness(1.05); }

/* === Filters (proyectos) === */
.filtros{ display:flex; gap:.5rem; justify-content:center; margin:1rem 0; flex-wrap:wrap; }
.btn-filter{ border:1px solid #ccc; padding:.4rem .8rem; border-radius:var(--radius-round); cursor:pointer; background:#fff; color:#5858cfee; }
.btn-filter.active{ border-color:var(--accent); }

/* === Responsive polish === */
@media (max-width:768px){
  .container{ width:95%; padding:10px; font-size:14px; }
  ul{ display:block; padding:0; }
  .nav-list ul{ display:flex; gap:12px; justify-content:center; }
  #Acercademi{ padding:1.1rem; margin-inline:.5rem; }
  .about_img{ inline-size:clamp(130px,42vw,180px); }
  .Habilidades{ padding:10px; }
  .Habilidades img{ width:56px; height:72px; margin:8px; }
  .softskills{ margin:12px 8px 0; }
  .softskills .skills-list{ grid-template-columns:1fr; gap:8px; }
  #Proyectos ul{ display:grid; grid-template-columns:1fr; gap:12px; }
  #Proyectos img{ width:100%; height:auto; max-width:520px; border-radius:8px; }
  footer{ text-align:center; }
  img,video,canvas,svg{ max-width:100%; height:auto; }
}