/* =====================
    TOKENS / RESET
====================== */
:root{
    --bg: #F7F8FA;            /* fondo base */
    --surface: #FFFFFF;       /* tarjetas/nav */
    --border: #E8EAF0;        /* divisores */
    --text: #0F141B;          /* texto principal */
    --muted: #5E6673;         /* texto secundario */
    --accent: #3F68FF;        /* acento sutil */
    --accent-2: #5A7CFF;      /* hover acento */
    --ring: rgba(63,104,255,0.25);
    --radius: 16px;
    --shadow: 0 10px 30px rgba(15,20,27,0.06);
    --container: 1200px;
    color:#0F141B;
    border-color:#F7F8FA;
}

:root[data-theme="dark"]{
  --bg:#0F1115;
  --surface:#151821;
  --text:#E6EAF0;
  --muted:#9AA5B1;
  --shadow:0 10px 30px rgba(0,0,0,0.35);
}

:root[data-theme="dark"] .chip{border-color: color-mix(in srgb, var(--c) 45%, #232733);background: color-mix(in srgb, var(--c) 18%, #12151f);}
:root[data-theme="dark"] .icon.theme{background:#F7F8FA; color:#0F141B; border-color:#F7F8FA;}
:root[data-theme="dark"] .badge{ background:#1a1f2b; border-color:#232733; }
:root[data-theme="dark"] .xp-logo{ background:#12151f; }
:root[data-theme="dark"] .chip{border-color: color-mix(in srgb, var(--c) 70%, #232733);}
:root[data-theme="dark"] .xp-tags .chip{ background:#1a1f2b; border-color:#232733; }
:root:not([data-theme="dark"]) .theme-toggle{background:#313131;}
:root:not([data-theme="dark"]) .icon.theme{background:#4c4c4c; color:#FFFFFF; border-radius: 17px; cursor: pointer;}

*,*::before,*::after{box-sizing:border-box}
html[data-theme="dark"] .chips .chip.tech{ box-shadow:none; }
html{ scroll-behavior:smooth; }
html,body{height:100%}
html[data-theme="dark"] .badge{background:#0E1218; border-color:#202633; color:#E5E7EB; box-shadow:none;}
html[data-theme="dark"] .badge:hover{ filter:brightness(1.05); }
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.surface{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.muted{color:var(--muted)}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:var(--surface);border:1px solid var(--border);padding:8px 12px;border-radius:8px;z-index:1000}
/* --- BASE (desktop por defecto) --- */
#btn-menu{ display:none; }        /* oculta el burger en desktop */
#nav-backdrop{ display:none; }    /* backdrop apagado por defecto */

/* --- Fuerza modo desktop a ignorar el drawer aunque quede nav-open --- */
@media (min-width:769px){
  body.nav-open #nav-backdrop{ display:none !important; }
  body.nav-open nav.primary{
    position:static !important;
    transform:none !important;
    width:auto !important;
    height:auto !important;
    display:flex !important;      /* menú normal en la barra */
    box-shadow:none !important;
    border:0 !important;
  }
}

/* =====================
    NAVBAR
====================== */
header.nav{position:sticky;top:0;z-index:1200;background:rgba(255,255,255,0.85);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;gap:12px;height:64px}
.brand{margin-right:auto;} 
nav.primary{margin-left:auto;}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#f4f6fb,#ffffff);border:1px solid var(--border);display:grid;place-items:center;box-shadow:var(--shadow)}
.logo span{font-weight:700;font-family:'Plus Jakarta Sans',Inter,sans-serif}
nav.primary{display:flex;align-items:center;gap:20px}
nav.primary a{padding:8px 10px;border-radius:10px}
nav.primary a.active{background:#F2F5FF;color:#2a45c7}

.lang-toggle{display:flex;align-items:center;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.lang-toggle button{padding:6px 10px;background:transparent;border:0;cursor:pointer}
.lang-toggle button.active{background:var(--surface);color:#2a45c7}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:box-shadow .2s, transform .05s}
.btn:hover{box-shadow:var(--shadow)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg,#f7f9ff,#eef2ff);border-color:#dfe6ff}

/* =====================
    HERO
====================== */
/* Redes en hero */
.socials{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:16px; }
.social-icons{ display:flex; align-items:center; gap:12px; }

.icon{width:40px; height:40px; display:grid; place-items:center;border-radius:12px; border:1px solid var(--border);background:var(--surface); color:var(--muted);transition: transform .06s, box-shadow .2s, background .2s, color .2s, border-color .2s;}
.icon.theme{ width:36px; height:36px; }
.icon svg{ width:22px; height:22px; fill:currentColor; }
.icon:hover{ transform:translateY(-1px); box-shadow:var(--shadow); color:#fff; }

.icon.ln:hover{ background:#0a66c2; border-color:#0a66c2; }
.icon.gm:hover{ background:#EA4335; border-color:#EA4335; }
.icon.fb:hover{ background:#1877F2; border-color:#1877F2; }
.icon.wa:hover{ background:#25D366; border-color:#25D366; }

:root[data-theme="dark"] .icon{ background:#1a1f2b; border-color:#232733; color:#AAB4C0; }
:root[data-theme="dark"] .icon:hover{ color:#fff; }

/* botón CV junto a iconos */
.btn.cv{ padding:10px 14px; }

#hero-name .first,
#hero-name .last { display:block; word-spacing: 10px; }
.hero{padding:56px 0}
.hero-grid{display:grid;grid-template-columns:1fr;gap:32px}
.avatar{width: clamp(200px, 28vw, 320px);aspect-ratio: 1 / 1;height: auto;border-radius: 50%;object-fit: cover;object-position: 50% 45%;box-shadow: var(--shadow);background: none;}

.hero h1{font-family:'Plus Jakarta Sans',Inter,sans-serif;font-size:56px;line-height:1.1;margin:8px 0;letter-spacing:-0.02em;}
.hero h2{font-family:'Plus Jakarta Sans',Inter,sans-serif;font-size:24px;line-height:1.25;margin:20px 0;}
.hero p{font-size:18px;color:var(--muted)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* ======= Availability pill ======= */
.availability{display:inline-flex; align-items:center; gap:8px;margin-left:10px; padding:6px 10px; border-radius:999px;border:1px solid var(--border);background:linear-gradient(180deg,#f7f9ff,#eef2ff);color:#2a45c7; font-weight:600; font-size:13px; white-space:nowrap;}
.availability .dot{width:8px;height:8px;border-radius:50%;background:#22c55e}

/* ======= Darkmode toggle ======= */
.theme-toggle{border-radius:10px; padding:6px 10px; cursor:pointer;border:1px solid var(--border);transition:box-shadow .2s, transform .05s, background .2s, color .2s, border-color .2s;}
.theme-toggle:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }

/* =====================
    KPI BAR
====================== */
.kpi{margin:24px 0 0;display:grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap:12px}
.kpi .surface{padding:14px 16px;display:flex;align-items:center;justify-content:center;gap:10px; text-align: center;}
.kpi strong{font-family:'Plus Jakarta Sans',Inter,sans-serif}

/* =====================
    HIGHLIGHTS & TECH
====================== */
section{margin:56px 0}
.section-title{font-family:'Plus Jakarta Sans',Inter,sans-serif;font-size:28px;margin:0 0 12px;}
.grid-3{display:grid;grid-template-columns: repeat(3, minmax(260px, 1fr));gap:16px;max-width: 1100px;margin: 0 auto;}
.highlight{padding:16px}
.highlight-wrap{ position:relative; }
.highlight-scroller .highlight{scroll-snap-align:start; min-width:280px; padding:16px;}
.highlight-scroller{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;padding: 4px 40px; /* deja espacio para flechas */}
.highlight .title{font-weight:600;margin-bottom:6px}
.highlight.accent{border: 1px solid rgba(63,104,255,0.25);background: linear-gradient(180deg, #f7f9ff, #ffffff);box-shadow: 0 8px 24px rgba(63,104,255,0.08);}
.highlight .title{ display:flex; align-items:center; gap:8px; font-weight:600; }
.hl-arrow{position:absolute; top:50%; transform:translateY(-50%);width:32px; height:32px; border-radius:999px; border:1px solid var(--border);background:var(--surface); box-shadow:var(--shadow); cursor:pointer;display:grid; place-items:center; user-select:none;}
.hl-left{ left:0; } .hl-right{ right:0; }

.tech-badges{display:flex;flex-wrap:wrap;gap:12px 14px;}
.badge{--c:#fff;--bd:#E7EBF3;--txt:#0F141B;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--bd);background:var(--surface);color:var(--txt);line-height:1;border-radius:9999px;box-shadow:0 1px 0 rgba(16,24,40,.02);transition:background .18s,color .18s,border-color .18s,transform .18s;}
.badge:hover{background:var(--c,#111);color:var(--tc,#fff);border-color:transparent;transform:translateY(-1px);}
.badge .dot{width:8px; height:8px; border-radius:9999px;background:var(--c,#94a3b8);box-shadow:0 0 0 3px rgba(16,24,40,.04);}
.badge:hover .dot{ background:currentColor; }
.dot{ width:8px; height:8px; border-radius:50%; background:#c7cfe2; }
.dot-accent{ width:8px; height:8px; border-radius:50%; background: var(--accent); }
.badge.active{background:#0F141B; color:#fff; border-color:transparent;}
.badge.active .dot{ background:#fff; opacity:.9; }

/* =====================
    PROJECT TEASER (HOME)
====================== */
.cards{display:grid;grid-template-columns:1fr;gap:16px}
.card{cursor:pointer;border:1px solid var(--border);border-radius:18px;background:var(--surface);overflow:hidden;transition:box-shadow .2s, transform .06s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.card-cover{position: relative;aspect-ratio: 16 / 9;overflow: hidden;background: linear-gradient(135deg,#EDEFF5,#FBFCFF);border-bottom: 1px solid var(--border);}
.card-cover img{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;display: block;}
.modal-body .card-cover{position: relative;aspect-ratio: 16 / 9;overflow: hidden;border-radius: 12px;}
.modal-body .card-cover img{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;}
.card-body{text-align:left; padding:14px 14px 16px}
.meta{display:flex;flex-wrap:wrap;gap:8px 8px;color:var(--muted);font-size:14px;margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{--c: #e5e7eb;--tc: #0F141B;border: 1px solid var(--c);background: var(--c);color: var(--tc);transition: box-shadow .2s, transform .05s;}
.chip:hover{background: var(--c);border-color: var(--c);color: var(--tc);box-shadow: var(--shadow);transform: translateY(-1px);}
.card-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.chips .chip:hover .xp-tags .chip:hover .chip:hover{box-shadow: var(--shadow);transform: translateY(-1px);}
.tags { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 2px; }
.tag {font: 500 12px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;padding: 4px 8px;border-radius: 999px;background: var(--surface-2, #EEF1F6);color: var(--text-2, #5E6673);border: 1px solid rgba(0,0,0,0.04);}
.bullets {margin: 10px 0 0 18px;padding: 0;list-style: disc;color: var(--text-2, #5E6673);}
.bullets li {margin: 4px 0;font: 500 14px/1.35 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;}
.chips .chip.tech{--c:#e5e7eb;--tc:#0F141B;display:inline-flex;align-items:center;padding:4px 8px;border:0;border-radius:6px;     /* rectangulito suave */font-weight:700;font-size:12px;background:var(--c);color:var(--tc);box-shadow:0 1px 0 rgba(15,20,27,.06);transition:transform .06s, box-shadow .2s;}
.chips .chip.tech:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
.chips .chip:hover .xp-tags .chip:hover .chip:hover{ all: unset; }

/* =====================
    PROJECTS VIEW
====================== */
#view-projects .toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);cursor:pointer}
.tab.active{background:#F2F5FF;color:#2a45c7;border-color:#dfe6ff}
.search{display:flex;align-items:center;border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:8px 10px;gap:8px}
.search input{border:0;outline:0;background:transparent;min-width:200px}
.select{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--surface)}

/* =====================
    CONTACT & FOOTER
====================== */
.contact-list{display:flex;flex-wrap:wrap;gap:10px}
.contact-list .btn.contact{flex:0 0 180px; height:48px;display:flex; align-items:center; justify-content:center;border-radius:14px;transition: transform .06s, box-shadow .2s, background .2s, color .2s;}
.contact-list .btn.contact:hover{ transform: translateY(-1px); box-shadow: var(--shadow); color:#fff; }
.contact-list .btn.contact.email:hover    { background:#0072c6; border-color:#0072c6; }
.contact-list .btn.contact.linkedin:hover { background:#0a66c2; border-color:#0a66c2; }
.contact-list .btn.contact.github:hover   { background:#171515; border-color:#171515; }
.contact-list .btn.contact.whatsapp:hover { background:#25d366; border-color:#25d366; }
#footer{margin-top:48px;border-top:1px solid var(--line, #e9edf3);background:var(--surface-1, #f8f9fb);}
footer{margin-top:72px;border-top:1px solid var(--border);background:var(--surface)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:24px 0;}
.footer-title{font-weight:700;font-size:16px;}
.footer-tagline{color:var(--text-2,#5e6673);font-size:14px;}
.footer-socials .icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2,#eef2f7);color:var(--text-1,#0f141b);transition:transform .15s ease, background .2s ease, box-shadow .2s ease;}
.footer-socials .icon:hover{transform:translateY(-2px);background:var(--surface-3,#e6ebf2);box-shadow:0 6px 18px rgba(17,24,39,.10);}
.footer-promo{display:flex; align-items:center; justify-content:space-between;gap:20px; padding:28px 0; border-top:1px solid var(--hairline,#E8EBF1);}
.footer-left .footer-name{font-weight:700; color:var(--text,#0F141B); font-size:1rem; line-height:1.2;display:block;}
.footer-left .footer-sub{margin-top:4px; color:var(--muted,#5E6673); font-size:.95rem;}
.footer-icons{ display:flex; gap:12px; }
.footer-icons .icon{width:44px; height:44px; border-radius:12px;display:inline-flex; align-items:center; justify-content:center;background:var(--surfaceElevated,#fff);color:var(--text,#0F141B);box-shadow:0 2px 10px rgba(0,0,0,.04);transition:background .2s,color .2s,transform .15s,box-shadow .2s;border:none; outline:none;}
.footer-icons .icon:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.08);}
.footer-icons .icon.ln:hover{ background:#0A66C2; color:#fff; }
.footer-icons .icon.gm:hover{ background:#EA4335; color:#fff; }
.footer-icons .icon.fb:hover{ background:#1877F2; color:#fff; }
.footer-icons .icon.wa:hover{ background:#25D366; color:#fff; }
.footer-icons .icon:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(88,101,242,.18), 0 2px 10px rgba(0,0,0,.06);}

/* =====================
    MODAL
====================== */
.modal{position:fixed;inset:0;background:rgba(15,20,27,0.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}
.modal.open{display:flex}
.modal-card{max-width:900px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.modal-body{padding:16px}
.modal-body p{ margin:12px 0; }

/* =====================
    WHATSAPP FAB
====================== */
.wa-fab{position:fixed;right:16px;bottom:16px;border-radius:999px;border:1px solid var(--border);background:#e7f5ec;box-shadow:var(--shadow);padding:12px;display:grid;place-items:center;cursor:pointer}

/* =====================
    FORMS & FOCUS
====================== */
input,select,button,textarea,.btn,.tab,.search{outline:none}
:focus-visible{box-shadow:0 0 0 3px var(--ring)}

/* =====================
   EXPERIENCIA
====================== */
#experience{ margin-top:56px; }
#experience .chip{background: var(--c) !important;border-color: var(--c) !important;color: var(--tc) !important;box-shadow: none;}
#experience .chip:hover{box-shadow: var(--shadow);transform: translateY(-1px);}
.xp-list{display:grid; gap:16px;grid-template-columns:1fr;}
.xp-card{ padding:16px; transition: box-shadow .2s, transform .06s, border-color .2s; }
.xp-card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.xp-head{ display:flex; align-items:center; gap:12px; }
.xp-logo{width:56px; height:56px; border-radius:14px;border:1px solid var(--border); background:#fff; object-fit:contain;}
.xp-head-text{ display:flex; flex-direction:column; gap:2px; }
.xp-role{ font-family:'Plus Jakarta Sans',Inter,sans-serif; font-weight:700; }
.xp-meta{ color:var(--muted); font-size:14px; display:flex; align-items:center; gap:6px; }
.dot-sep{ opacity:.6; }
.xp-desc{ margin:10px 0 12px; }
.xp-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.xp-tags .chip{font-size:12px; padding:6px 10px; border-radius:999px;border:1px solid var(--border); background:#f9fafc;}

.back-btn{ display:none; padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface); }
.projects-mode nav.primary a:not(#nav-back){ display:none; }        /* oculta enlaces del nav */
.projects-mode #btn-theme{ display:none; }                          /* oculta el switch de tema (opcional) */
.projects-mode #nav-back{ display:inline-flex; }

#extras .card-cover{aspect-ratio:16/9; overflow:hidden;}
#extras .card-cover img{width:100%; height:100%; object-fit:cover;}
#extras .cards{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;padding: 6px 2px 12px;}
#extras .card{ min-width: 420px; max-width: 520px; scroll-snap-align:start; }
#extras .carousel { position: relative; }
#extras .carousel .cards{display:flex; gap:12px; overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 28px 12px;}
#extras .carousel .card{min-width:400px; max-width:500px;scroll-snap-align:start;}
#extras .carousel{ position:relative; overflow:hidden; }
#extras .carousel .cards{padding: 6px 8px 12px;}
#extras .carousel .cards{scrollbar-width: none;-ms-overflow-style: none;}
#extras .carousel .cards::-webkit-scrollbar{ display:none; }
#extras .carousel .scroller{display:flex; gap:12px; scroll-snap-type:x mandatory;overflow-x:auto; padding:6px 8px 12px;scrollbar-width:none; -ms-overflow-style:none;}
#extras .carousel .scroller::-webkit-scrollbar{ display:none; }
#extras .carousel.has-left::before{  opacity:1; }
#extras .carousel.has-right::after{ opacity:1; }

.empty-state{display:grid; place-items:center; text-align:center;gap:8px; padding:36px; border:1px dashed var(--border); border-radius:14px;background: color-mix(in srgb, var(--surface) 92%, #7f8ea3);min-height:220px;}
.empty-state .emoji{font-size:28px; opacity:.9;}
.empty-state strong{font-family:'Plus Jakarta Sans', Inter, sans-serif;}
.card-cover{aspect-ratio:16/9; overflow:hidden;}
.card-cover img{width:100%; height:100%; object-fit:cover;}

#nav-back { display: none; }
header.nav.only-projects #nav-back { display: inline-flex; }
header.nav.only-projects .lang-toggle,
header.nav.only-projects .availability,
header.nav.only-projects nav.primary a:not(#nav-projects):not(#nav-back) { display: none; }
.btn.small { padding:8px 12px; border-radius:10px; }

.empty-state{grid-column: 1 / -1;display:grid; place-items:center; text-align:center;min-height: 500px;background: var(--surface); border:1px solid var(--border);border-radius: var(--radius); box-shadow: var(--shadow);color: var(--muted);}
.empty-state .emoji{ font-size:26px; margin-bottom:8px; }

.carousel-arrow{position:absolute; top:50%; transform:translateY(-50%);width:36px; height:36px; border-radius:999px;border:1px solid var(--border); background:var(--accent);display:grid; place-items:center; box-shadow:var(--shadow);cursor:pointer; z-index:2;}
.extras-left  { left:8px;  color:white; }
.extras-right { right:8px; color:white; }
.carousel-arrow[disabled]{
  opacity:.35;
  pointer-events:none;
  filter:saturate(0.2);
  cursor: default;
}

/* =====================
    RESPONSIVE
====================== */
@media (max-width:680px){#extras .carousel .card{ min-width:320px; }}
@media (min-width: 768px){
  .hero-grid{ grid-template-columns:0.8fr 1.2fr; align-items:center; }
  .kpi{grid-template-columns:repeat(4,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(3,1fr)}
  .xp-list{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr; }
}
@media (min-width: 1024px){
  .hero h1{font-size:64px}
  .hero h2{font-size:28px;}
}

/* ===== Project modal – Media carrusel + layout ===== */
.modal-card{ max-width:1100px; }

.project-modal{
  display:grid; gap:16px;
  grid-template-columns: 1.4fr .9fr;
}
@media (max-width:960px){
  .project-modal{ grid-template-columns:1fr; }
}

.pm-left{ display:flex; flex-direction:column; gap:12px; }
.pm-side{ display:flex; flex-direction:column; gap:12px; }

.pm-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:12px; box-shadow:var(--shadow);
}
:root[data-theme="dark"] .pm-card{ background:#151821; }

.pm-title{
  font: 800 20px/1.2 'Plus Jakarta Sans',Inter,system-ui;
  margin-bottom:6px;
}
.pm-summary{ color:var(--muted); margin:6px 0 0; }
.pm-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* === Media carrusel === */
.pm-media{ position:relative; border-radius:16px; overflow:hidden; background:#0a0f1a; }
.pm-track{
  display:flex; gap:10px; overflow-x:auto;
  scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none;
}
.pm-track::-webkit-scrollbar{ display:none; }

.pm-slide{ min-width:100%; scroll-snap-align:center; background:#000; }
.pm-slide img, .pm-slide video{
  display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16/9;
}

/* Flechas del carrusel */
.pm-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); display:grid; place-items:center;
  box-shadow:var(--shadow); cursor:pointer; z-index:2;
}
.pm-prev{ left:8px; } .pm-next{ right:8px; }
.pm-arrow[disabled]{ opacity:.35; pointer-events:none; }

/* Dots */
.pm-dots{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:8px; display:flex; gap:6px; z-index:1;
}
.pm-dot{ width:8px; height:8px; border-radius:50%; background:#fff8; border:1px solid #fff; }
.pm-dot.active{ background:var(--accent); border-color:var(--accent); }

/* Stats (si los sigues usando) */
.pm-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
.pm-stat{
  text-align:center; padding:10px; border-radius:12px; border:1px solid var(--border);
  background:linear-gradient(180deg,#f8faff,#ffffff);
}
:root[data-theme="dark"] .pm-stat{ background:#12151f; }
.pm-stat .val{ font-weight:800; font-size:18px; }
.pm-stat .lbl{ color:var(--muted); font-size:12px; }

/* ===== Modal stats (Año / Tipo / Tech) ===== */
.pm-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:12px;
}
.pm-stat{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  text-align:center;
  box-shadow:var(--shadow);
}
.pm-stat .n{
  font:700 18px/1 'Plus Jakarta Sans', Inter, sans-serif;
}
.pm-stat .l{
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
}

/* ============ DARK FIXES (aplicar al final) ============ */

/* Navbar: glass oscuro + borde correcto */
html[data-theme="dark"] header.nav{
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom-color: var(--border);
}

/* Logo: evitar el gradiente claro en oscuro */
html[data-theme="dark"] .logo{
  background: linear-gradient(135deg,#141823,#0f131c);
  border-color: var(--border);
}

/* Botones */
html[data-theme="dark"] .btn{
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn.cv{
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  color: #e7efff;
}

/* Inputs / search / select */
html[data-theme="dark"] .search,
html[data-theme="dark"] .select{
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="dark"] .search input{ color: var(--text); }
html[data-theme="dark"] .search input::placeholder{ color:#94a3b8; }

/* Chips neutros */
html[data-theme="dark"] .chip{
  border-color: color-mix(in srgb, var(--c, #2b3445) 60%, var(--border));
  background: color-mix(in srgb, var(--c, #1b2433) 18%, #0f131c);
  color: var(--tc, var(--text));
}
/* Chips de tecnología: sin sombras duras en dark */
html[data-theme="dark"] .chips .chip.tech{ box-shadow:none; }

/* Tabs / filtros */
html[data-theme="dark"] .tab{
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .tab.active{
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  color: #dce7ff;
}

/* Enlaces del nav activos */
html[data-theme="dark"] nav.primary a.active{
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: #dce7ff;
}

/* Availability pill */
html[data-theme="dark"] .availability{
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  color:#dce7ff;
}

/* Tarjetas, modales, paneles ya usan var(--surface).
   Sólo ajustamos la portada para evitar gradiente claro. */
html[data-theme="dark"] .card-cover{
  background: linear-gradient(135deg,#101521,#0f131b);
}

/* Footer y contenedores del footer */
html[data-theme="dark"] footer,
html[data-theme="dark"] #footer{
  background: var(--surface);
  border-top-color: var(--border);
}
html[data-theme="dark"] .footer-socials .icon,
html[data-theme="dark"] .footer-icons .icon{
  background: #141a24;
  color: var(--text);
  box-shadow: none;
  border: 1px solid var(--border);
}

/* Focus ring más sutil en dark */
html[data-theme="dark"] :focus-visible{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent);
}

html[data-theme="dark"] .badge{
  background:#0E1218; border-color:#202633; color:#E5E7EB; box-shadow:none;
}

/* ============== QUIET BORDERS / DARK POLISH ============== */
/* 1) Tokens para hairlines sutiles */
:root{
  --hairline: rgba(15,20,27,.08);
  --hairline-strong: rgba(15,20,27,.14);
  --shadow-sm: 0 1px 2px rgba(15,20,27,.06), 0 3px 8px rgba(15,20,27,.05);
  --shadow-lg: 0 10px 30px rgba(15,20,27,.10);
}
:root[data-theme="dark"]{
  --hairline: rgba(255,255,255,.06);
  --hairline-strong: rgba(255,255,255,.10);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.30);
  --shadow-lg: 0 12px 28px rgba(0,0,0,.45);
}

/* 2) Navbar translúcida y con hairline sutil */
header.nav{
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom-color: var(--hairline);
}
:root[data-theme="dark"] header.nav{
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}

/* 3) Tarjetas / superficies: quitar borde “duro”, usar inset hairline + sombra */
.surface,
.card,
.xp-card,
.pm-card,
.modal-card,
.tab,
.search,
.select {
  border-color: transparent !important;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--hairline);
  background: var(--surface);
}
.card:hover,
.xp-card:hover,
.pm-card:hover {
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--hairline-strong);
}

/* 4) Badges & chips: sin borde visible; tint suave en dark */
.badge, .chip{
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
:root[data-theme="dark"] .badge{
  background:#12161f;
}
:root[data-theme="dark"] .chip{
  background: color-mix(in srgb, var(--c) 20%, #12161f);
}

/* Tech pills: mantener color de marca, sin borde blanco */
.chips .chip.tech{
  border:0 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
html[data-theme="dark"] .chips .chip.tech{
  box-shadow:none;
}

/* 5) Controles activos: en dark, resaltado por fill, no por borde */
.tab.active,
nav.primary a.active{
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
:root[data-theme="dark"] .tab.active,
:root[data-theme="dark"] nav.primary a.active{
  background: color-mix(in srgb, var(--accent) 22%, #151821);
  color: #E6ECFF;
}

/* 6) Modal: stats y paneles laterales sin “cajas” ruidosas */
.pm-stat{
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--hairline);
  background: var(--surface);
}
.pm-side .pm-card{
  border-color: transparent !important;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--hairline);
}

/* 7) Íconos y botones: sin anillos blancos; usar hairline en foco */
.icon, .btn, .btn.cv, .contact-list .btn.contact{
  border-color: transparent !important;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--hairline);
}
.icon:hover, .btn:hover, .contact-list .btn.contact:hover{
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--hairline-strong);
}

/* 8) Secciones/empty state: contraste por fondo, no por borde */
.empty-state{
  border-color: transparent !important;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--hairline);
}

/* 9) Dots del carrusel más sobrios en dark */
.pm-dot{ background:#fff8; border:1px solid #ffffff66; }
:root[data-theme="dark"] .pm-dot{ background:#ffffff33; border-color:#ffffff22; }
.pm-dot.active{
  background: var(--accent);
  border-color: var(--accent);
}

/* =========================================================
   DARK MODE — CONTRAST, BORDERS & CONTROLS PATCH
   (Pégalo al final de tu CSS)
   ========================================================= */

/* Variables oscuras: incluye el border oscuro para matar líneas blancas */
:root[data-theme="dark"]{
  --bg:#0f1115;
  --surface:#151821;
  --surface-2:#10141c;
  --border:#232733;           /* <-- antes era claro */
  --text:#e6eaf0;
  --muted:#a3acb8;
  --shadow:0 12px 30px rgba(0,0,0,.45);
  --ring:rgba(88,101,242,.35);
}

/* Sugerencia general: deja que el UA pinte widgets oscuros nativos */
html[data-theme="dark"]{ color-scheme: dark; }

/* ---------- Navbar ---------- */
html[data-theme="dark"] header.nav{
  background:rgba(10,12,16,.86);
  border-bottom-color:var(--border);
  backdrop-filter:saturate(160%) blur(10px);
}
html[data-theme="dark"] nav.primary a.active{
  background:#1b2230; color:#c5d0db;
}

/* ---------- Toggle ES / EN ---------- */
html[data-theme="dark"] .lang-toggle{
  background:#10141c; border-color:var(--border);
}
html[data-theme="dark"] .lang-toggle button{ color:#a3acb8; }
html[data-theme="dark"] .lang-toggle button.active{
  background:#1b2230; color:#e6eaf0;
}

/* ---------- Botón del tema (sol/luna) ---------- */
/* Neutral en claro */
:root:not([data-theme="dark"]) .icon.theme{
  background:var(--surface); color:var(--muted); border-color:var(--border);
}
/* Neutral en oscuro (evita “cuadro blanco”) */
.icon.theme{ background:var(--surface); color:var(--muted); border:1px solid var(--border); }
html[data-theme="dark"] .icon.theme{
  background:#1a1f2b; color:#e6eaf0; border-color:var(--border);
}
.icon.theme:hover{ background:#212838; color:#fff; }

/* ---------- Footer ---------- */
html[data-theme="dark"] footer,
html[data-theme="dark"] #footer{
  background:#12151c; border-top-color:var(--border);
}

/* ---------- Chips/Badges (menos ruido) ---------- */
html[data-theme="dark"] .badge{ background:#0e1218; border-color:#202633; color:#e6eaf0; box-shadow:none; }
html[data-theme="dark"] .chip{ background:#151a22; border-color:#232733; }
html[data-theme="dark"] .chips .chip.tech{ box-shadow:none; }

/* ---------- Controles de la toolbar (search/select) ---------- */
html[data-theme="dark"] .search{
  background:#10141c; border-color:#2a303b;
}
html[data-theme="dark"] .search input{ color:#e6eaf0; }

html[data-theme="dark"] .select{
  background:#10141c; color:#e6eaf0; border-color:#2a303b;
}
/* Opciones del <select> (evita menu claro en algunos navegadores) */
html[data-theme="dark"] select{ background:#10141c; color:#e6eaf0; border-color:#2a303b; }
html[data-theme="dark"] select option{ background:#0f1115; color:#e6eaf0; }

/* ---------- Carruseles (modal y extras) ---------- */
html[data-theme="dark"] .pm-arrow,
html[data-theme="dark"] .carousel-arrow{
  background:#0f141b; border-color:#2a303b; color:#e6eaf0;
  box-shadow:0 6px 18px rgba(0,0,0,.55);
}
html[data-theme="dark"] .pm-arrow:hover,
html[data-theme="dark"] .carousel-arrow:hover{
  background:#1b2230; border-color:#3a4150;
}

/* ---------- Tarjetas, modales y “ghost borders” más sutiles ---------- */
html[data-theme="dark"] .surface,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .pm-card{
  border-color:#232733; box-shadow:var(--shadow);
}

:root[data-theme="dark"] .chip{
  border-color: color-mix(in srgb, var(--c) 45%, #232733);
  background: color-mix(in srgb, var(--c) 18%, #12151f);
}
/* Fix: no mezclar color de las tech pills en dark mode */
html[data-theme="dark"] .chips .chip.tech{
  background: var(--c) !important;
  color: var(--tc) !important;
  border-color: color-mix(in srgb, var(--c) 60%, #232733) !important; /* borde sutil */
  box-shadow: none;
}

/* aplica la mezcla solo a chips genéricas, NO a .chip.tech */
:root[data-theme="dark"] .chip:not(.tech){
  border-color: color-mix(in srgb, var(--c) 45%, #232733);
  background: color-mix(in srgb, var(--c) 18%, #12151f);
}

/* ===== SOLO MOBILE: centrar contenido (sin tocar navbar) ===== */
@media (max-width:768px){
  /* Hero */
  .hero-grid{ grid-template-columns:1fr; justify-items:center; }
  .hero-grid > div:last-child{ display:grid; justify-items:center; }
  .avatar{ margin:0 auto; }
  .hero h1, .hero h2, .hero p{ text-align:center; }

  /* Redes y call-to-action */
  .socials{ justify-content:center; }

  /* Secciones y badges */
  .section-title{ text-align:center; }
  .tech-badges{ justify-content:center; }

  /* KPI / tarjetas */
  /* .kpi{ grid-template-columns:1fr; }
  .cards .card-body{ text-align:center; }
  .meta, .chips{ justify-content:center; } */

  /* Contacto y footer */
  .contact-list{ justify-content:center; }
  .footer-inner, .footer-promo{
    flex-direction:column; align-items:center; text-align:center;
  }
}

/* ====== Drawer móvil (70% derecha) ====== */
@media (max-width:768px){
  /* desactiva el blur del header solo mientras el menú está abierto */
  body.nav-open header.nav{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  /* botón hamburguesa visible en mobile */
  #btn-menu{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; margin-left:12px;
    border-radius:12px; cursor:pointer;
    background:var(--surface); color:var(--muted);
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
  }
  #btn-menu .bar{ position:relative; width:18px; height:2px; background:currentColor; border-radius:4px; }
  #btn-menu .bar::before, #btn-menu .bar::after{
    content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:4px;
  }
  #btn-menu .bar::before{ top:-6px; } #btn-menu .bar::after{ top:6px; }

  /* backdrop SOLO en mobile */
  #nav-backdrop{
    display:none; position:fixed; inset:0; z-index:2990;
    background:rgba(15,20,27,.45);
  }
  body.nav-open #nav-backdrop{ display:block; }

  /* drawer: 70% desde la derecha, 100vh */
  nav.primary{ display:none; }                 /* oculto por defecto en mobile */
  body.nav-open nav.primary{
    display:flex; flex-direction:column; gap:12px;
    position:fixed; top:0; right:0; bottom:0; left:auto;
    width:min(70vw, 420px);
    height:100vh;
    padding:16px 18px 24px;
    background:var(--surface);
    border-left:1px solid var(--border);
    box-shadow:var(--shadow-lg);
    overflow-y:auto;
    transform:translateX(0);
    z-index:2999;
  }

  /* animación del botón a “X” (opcional) */
  body.nav-open #btn-menu{ background:#1b2230; color:#e6eaf0; }
  body.nav-open #btn-menu .bar{ background:transparent; }
  body.nav-open #btn-menu .bar::before{ transform:rotate(45deg); top:0; }
  body.nav-open #btn-menu .bar::after { transform:rotate(-45deg); top:0; }

  /* botón ✕ dentro del drawer */
  .close-menu{
    display:inline-grid; place-items:center;
    align-self:flex-end;
    width:36px; height:36px; border-radius:10px;
    border:1px solid var(--border); background:var(--surface);
    margin:4px 2px 6px; position:sticky; top:4px; cursor:pointer;
  }
}
/* oculta la ✕ en desktop */
@media (min-width:769px){ .close-menu{ display:none !important; } }

/* capas: modal > drawer > backdrop > header */
.modal{ z-index:3000; }
header.nav{ z-index:190; }


/* --- Guardas anti-drawer en desktop --- */
#nav-backdrop{ display:none; }  /* siempre oculto por defecto */

/* Sólo en mobile se activa el drawer/backdrop */
@media (max-width:768px){
  /* backdrop visible sólo con el menú abierto */
  body.nav-open #nav-backdrop{
    display:block;
    position:fixed; inset:0; z-index:2990;
    background:rgba(15,20,27,.45);
  }
  /* nav en modo drawer */
  nav.primary{ display:none; }                       /* oculto por defecto en mobile */
  body.nav-open nav.primary{
    display:flex; flex-direction:column; gap:12px;
    position:fixed; top:0; right:0; bottom:0; left:auto;
    width:min(70vw,420px); height:100vh;
    padding:16px 18px 24px;
    background:var(--surface);
    border-left:1px solid var(--border);
    box-shadow:var(--shadow-lg);
    overflow-y:auto; z-index:2999;
  }
}

/* En ≥769px fuerza modo desktop aunque exista .nav-open */
@media (min-width:769px){
  body.nav-open nav.primary{
    position:static !important;
    width:auto !important; height:auto !important;
    transform:none !important;
    display:flex !important; flex-direction:row !important;
    border:0 !important; box-shadow:none !important; overflow:visible !important;
  }
  #nav-backdrop{ display:none !important; }
  .close-menu{ display:none !important; }
}

/* Elevar el header SOLO cuando el drawer esté abierto en mobile */
@media (max-width:768px){
  body.nav-open header.nav{
    z-index: 3001 !important;          /* por encima del backdrop */
  }
  body.nav-open nav.primary{
    z-index: 3002 !important;          /* por encima del header/backdrop */
  }
  body.nav-open #nav-backdrop{
    z-index: 2990 !important;          /* debajo del drawer */
  }
}

/* Lang toggle genérico (desktop + mobile) */
.lang-toggle{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border);
  border-radius:999px; padding:6px 8px;
  background:var(--surface);
}
.lang-toggle button{
  padding:6px 10px; background:transparent; border:0; cursor:pointer;
  border-radius:999px;
}
.lang-toggle button.active{
  background:color-mix(in srgb, var(--accent) 16%, var(--surface));
  color:#2a45c7;
}

/* Desktop: encaja junto a los enlaces si lo dejas visible en nav.primary */
@media (min-width:769px){
  nav.primary{
    display:flex; align-items:center; gap:20px;
  }
  nav.primary .lang-toggle{ margin-left:4px; }
}

/* Dark mode */
html[data-theme="dark"] .lang-toggle{
  background:#10141c; border-color:var(--border);
}
html[data-theme="dark"] .lang-toggle button.active{
  background: color-mix(in srgb, var(--accent) 22%, #151821);
  color:#e6eaf0;
}

/* ===== Project modal: compacto en móviles ===== */
@media (max-width: 520px){
  .project-modal { gap: 12px; }
  .project-modal .pm-left,
  .project-modal .pm-side { gap: 12px; }

  /* Tarjetas más compactas */
  .pm-card { padding: 12px; border-radius: 14px; }
  .pm-title { font-size: 1.05rem; }
  .pm-summary { font-size: .95rem; line-height: 1.35; }
  .pm-card .bullets li { margin: 2px 0; }

  /* Carrusel con altura contenida */
  .pm-media { border-radius: 16px; }
  .pm-media .pm-slide img,
  .pm-media video{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .pm-media .pm-arrow { width: 28px; height: 28px; font-size: 18px; }

  /* Chips más pequeños (si se expanden) */
  .chips .chip { font-size: 11px; padding: 3px 6px; }

  /* Botón "Ver detalles" */
  .pm-more{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 8px 12px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--surface, #f9fafb);
    border-radius: 12px;
    font-weight: 600;
  }
}

@media (max-width: 360px){
  .pm-title { font-size: 1rem; }
  .pm-summary { font-size: .9rem; }
}

@media (max-width: 520px){
  .pm-stats, .pm-highlights { display: none; }
}