:root{
  --bg:#0d1117;
  --card: #111827;
  --accent1:#00f7ff;
  --accent2:#00f7ff;
  --text:#e2e8f0;
  --muted:#94a3b8;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(circle at 10% 10%, #071019 0%, #071019 40%, #04101a 100%);
  color:var(--text);
  padding:22px;
  display:flex;
  justify-content:center;
  min-height:100vh;
}

/* language switch */
.lang-switch{
  position:fixed;
  top:18px;
  right:18px;
  display:flex;
  gap:6px;
  z-index:60;
}


/* === Typewriter cursor === */
.typewriter {
  border-right: 2px solid var(--accent1);
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  animation: blink-caret 1s step-end infinite;
}

/* === Eliminar líneas divisorias (eliminadas en index.html) / ajusta el tamaño */
.accordion-item,
.accordion-btn,
.accordion-content {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
}

.accordion-btn {
  box-shadow: none !important;
}

/* Si quedan líneas por Tailwind (border-b, border-white, etc.) */
.border-b,
.border-white\/10 {
  border: none !important;
}

/* Fin refinar  - tailwinds*/

@keyframes blink-caret {
  50% { border-color: transparent; }
}

.lang-btn{
  border-radius:8px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,0.06);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}
.lang-btn.active{background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:#071019;}

/* layout */
.container{
  max-width:1100px;
  width:100%;
  display:grid;
  grid-template-columns:320px 1fr;
  gap:22px;
}

/* cards */
.card{
  background:var(--card);
  border-radius:16px;
  padding:18px;
  border:1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  box-shadow:0 10px 30px rgba(2,6,23,0.6);
}

/* profile */
.profile{text-align:center;}
.avatar{
  width:138px;height:138px;margin:0 auto 12px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  display:grid;place-items:center;color:#071019;font-weight:700;font-size:28px;
  box-shadow:0 10px 40px rgba(0,247,255,0.12), 0 6px 18px rgba(139,92,246,0.06);
  overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.initials{display:block;padding:14px}

/* photo buttons */
.photo-buttons{display:flex;justify-content:center;gap:8px;margin-bottom:10px;}
.btn{
  border-radius:10px;padding:8px 12px;border:1px solid rgba(255,255,255,0.06);
  background:transparent;color:var(--text);cursor:pointer;font-size:13px;
}
.btn:hover{transform:translateY(-3px);transition:all .18s}
.btn.secondary{border-color:rgba(255,80,80,0.12)}
.btn.secondary:hover{background:#ff6b6b;color:#071019}

/* text */
h1{font-size:20px;margin:8px 0 0;}
.muted{color:var(--muted);font-size:14px;}

/* sections */
.section-title{margin-top:16px;color:var(--accent1);font-weight:600;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.03);}

.contact-list{margin-top:10px;font-size:14px;text-align:left;}
.contact-item{margin:6px 0;}
a{color: #00ffff;text-decoration:none;}
a:hover{text-decoration:underline;}

/* contacts */
.contact-list{margin-top:10px;text-align:left;font-size:14px}
.contact-item{display:flex;align-items:center;gap:10px;margin:8px 0}
.contact-item .ico{width:20px;height:20px;opacity:0.9;fill:none;stroke:var(--accent1);}

/* skills */
.skill{margin-top:10px}
.label{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}
.bar{background:rgba(255,255,255,0.02);border-radius:999px;height:10px;overflow:hidden;margin-top:6px}
.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent1),var(--accent2));transition:width .9s cubic-bezier(.2,.9,.3,1)}

/* right panel */
.hero{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.headline h2{margin:0;font-size:20px}
.headline p{margin:6px 0 0;color:var(--muted);max-width:640px}

/* timeline */
.timeline{border-left:2px solid rgba(255,255,255,0.03);padding-left:14px;margin-top:10px}
.job{margin-bottom:14px;opacity:0;transform:translateY(16px);transition:all .58s ease}
.job.visible{opacity:1;transform:none}
.meta{color:var(--muted);font-size:13px}

/* modal */
.modal-backdrop{position:fixed;inset:0;display:none;place-items:center;background:rgba(2,6,23,0.6);z-index:80}
.modal{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:16px;border-radius:10px;width:90%;max-width:420px}
.close{float:right;border:none;background:transparent;font-size:20px;color:var(--muted);cursor:pointer}
.input{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text);margin-bottom:8px}

/* reveal */
.reveal{opacity:0;transform:translateY(10px);transition:all .6s ease}
.reveal.visible{opacity:1;transform:none}

/* responsive */
@media (max-width:900px){
  .container{grid-template-columns:1fr}
  .avatar{width:110px;height:110px}
  .lang-switch{top:10px;right:10px}
}

/* print */
@media print{
  body{background:white;color:#111}
  .lang-switch,.photo-buttons,.actions,.modal-backdrop{display:none}
  .card{border:0;box-shadow:none;background:transparent}
}








/* Asegura que el aside tenga contexto para posicionar el footer */
aside.card.profile {
  position: relative;      /* Necesario para posicionar elementos internos */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* El contenido va desde arriba */
  min-height: 100%;        /* Asegura altura completa dentro del contenedor */
}

/* Footer fijado al fondo del aside */
aside.card.profile footer {
  position: absolute;      /* Lo fija dentro del aside */
  bottom: 10px;            /* Distancia del borde inferior */
  left: 0;
  width: 100%;
  text-align: center;      /* Centra el texto */
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5); /* texto tenue */
}

/* Color azul NeoGlass para la fecha */
aside.card.profile footer strong {
  color: #00e0ff;
}