/*
Theme Name: José Durán
Theme URI: https://duranjose.com
Author: José Durán
Author URI: https://www.linkedin.com/in/joser16/
Description: Tema de una página para el portafolio personal de José Durán, desarrollador WordPress.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: joseduran
*/

:root{
  --bg:#F3F5F4; --surface:#FFFFFF; --ink:#1C2427; --muted:#56646A;
  --line:#D5DBDA; --accent:#1E5EB8; --accent-ink:#FFFFFF; --signal:#F2C230;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#192023; --surface:#212A2E; --ink:#E6ECEB; --muted:#9AA8AC;
    --line:#33403F; --accent:#8AB0F2; --accent-ink:#10181B; --signal:#F2C230;
  }
}
:root[data-theme="dark"]{
  --bg:#192023; --surface:#212A2E; --ink:#E6ECEB; --muted:#9AA8AC;
  --line:#33403F; --accent:#8AB0F2; --accent-ink:#10181B; --signal:#F2C230;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:46rem; margin:0 auto; padding:0 1.5rem}
h1,h2,h3{font-family:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif; line-height:1.1; margin:0}
a{color:var(--accent)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:4px}

/* Hero */
header{padding:4.5rem 0 3.5rem}
.hero{display:grid; grid-template-columns:auto 1fr; gap:1.75rem; align-items:end}
.photo{
  width:8.5rem; height:8.5rem; border-radius:50%; object-fit:cover; display:block;
  border:4px solid var(--surface); box-shadow:0 0 0 2px var(--line);
}
h1{font-size:clamp(3rem,11vw,5.75rem); font-weight:800; letter-spacing:-0.035em; line-height:.92}
.role{font-size:1.25rem; color:var(--muted); margin:.9rem 0 0}
.status{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:2rem;
  padding:.45rem .9rem; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); font-size:.95rem;
}
.status::before{
  content:""; width:.6rem; height:.6rem; border-radius:50%; background:var(--signal);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 30%,transparent);
}
.where{color:var(--muted); font-size:.95rem; margin:.9rem 0 0}

/* Sections */
section{padding:2.75rem 0; border-top:1px solid var(--line)}
h2{font-size:1.5rem; font-weight:700; letter-spacing:-0.01em; margin-bottom:1.25rem}
.about p{margin:0; max-width:38rem; font-size:1.15rem}


/* Services */
.services{display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1.75rem 2rem}
.services h3{font-size:1.1rem; font-weight:700; margin-bottom:.35rem}
.services p{margin:0; color:var(--muted)}

/* Timeline */
.timeline{list-style:none; margin:0; padding:0; position:relative}
.timeline::before{content:""; position:absolute; left:.4rem; top:.5rem; bottom:.5rem; width:2px; background:var(--line)}
.job{position:relative; padding-left:2.25rem}
.job + .job{margin-top:2.25rem}
.job::before{
  content:""; position:absolute; left:0; top:.45rem; width:.95rem; height:.95rem;
  border-radius:50%; background:var(--bg); border:2px solid var(--muted);
}
.job.current::before{background:var(--accent); border-color:var(--accent)}
.when{font-size:.95rem; color:var(--muted); margin:0}
.job h3{font-size:1.3rem; font-weight:700; margin:.2rem 0 .1rem}
.org{margin:0; color:var(--muted)}
.job ul{margin:.75rem 0 0; padding-left:1.1rem}
.job li + li{margin-top:.25rem}

/* Tools */
.tools{display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0}
.tools li{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .85rem .4rem .7rem; border-radius:6px; background:var(--surface);
  border:1px solid var(--line); font-size:.98rem;
}
.tools svg{width:1.05rem; height:1.05rem; flex:none; opacity:.85}
.tools li.main{background:var(--ink); color:var(--bg); border-color:var(--ink)}

/* Contact */
.contact p{margin:0 0 1.25rem; max-width:34rem}
.btn{
  display:inline-block; padding:.8rem 1.4rem; border-radius:8px; text-decoration:none;
  background:var(--accent); color:var(--accent-ink); font-weight:700;
}
.btn:hover{filter:brightness(1.08)}
footer{padding:2rem 0 3rem; color:var(--muted); font-size:.9rem; border-top:1px solid var(--line)}

@media (max-width:560px){
  header{padding-top:3rem}
  .hero{grid-template-columns:1fr; gap:1.25rem}
  .photo{width:6.5rem; height:6.5rem}
}
@media (prefers-reduced-motion:no-preference){
  .hero{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
}