/* =========================================================
   CV Diego Hernán García — styles.css
   Modo: Avatar lateral (izquierda) + Banner + Dark/Light
   ========================================================= */

/* ===================== */
/* Reset & Variables     */
/* ===================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  --bg: #0d1117;
  --card: #161b22;
  --primary: #00e5ff;
  --secondary: #00bcd4;
  --text: #e6edf3;
  --accent: #1f6feb;
  --muted: #9aa6b2;
}

:root.light {
  --bg: #f6f8fb;
  --card: #ffffff;
  --primary: #0d47a1;
  --secondary: #1976d2;
  --text: #222;
  --accent: #1565c0;
  --muted: #4b5563;
}

body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
}

/* ===================== */
/* Header + Banner       */
/* ===================== */
header {
  position: relative;
  text-align: center;            /* en desktop lo cambiaremos a izquierda vía .head-text */
  padding: 110px 0 80px;         /* padding vertical; horizontal lo maneja .header-inner */
  border-bottom: 1px solid #1f2630;
  overflow: hidden;
  isolation: isolate;
}

/* Banner de fondo */
header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(13,17,23,.85)),
    url("../images/bannerdiego.jpg") center/cover no-repeat;
  z-index: -1;
  filter: saturate(1.05);
}

/* ===================== */
/* Header: layout 2 col  */
/* ===================== */
.header-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;               /* alinea con .container */
  display: grid;
  grid-template-columns: 220px 1fr;  /* avatar | textos */
  gap: 24px;
  align-items: end;
  position: relative;
}

/* Columna avatar lateral */
.header-avatar {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 6px;
}

/* Avatar con glow (reutiliza tu estilo original, pero sin position absolute) */
.avatar-wrap {
  position: static;              /* antes era absolute; ahora es estático dentro de la columna */
  transform: none;
  bottom: auto;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  padding: 3px;                  /* “borde” glow */
  background: radial-gradient(80% 80% at 50% 50%, var(--primary), transparent 70%);
  box-shadow: 0 0 18px rgba(0,229,255,.45), 0 8px 30px rgba(0,0,0,.35);
}
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid #0b1722;
  background: #0b1722;
}

/* Columna textos hero */
.head-text {
  text-align: left;              /* pasa de centrado a izquierda en desktop */
}

.title {
  font-family: Orbitron, Inter, system-ui, sans-serif;
  font-size: 46px;
  margin: 0 0 8px;
  color: var(--primary);
  text-shadow: 0 2px 14px rgba(0,229,255,.25);
}

.subtitle {
  font-weight: 300;
  margin: 0 0 6px;
  opacity: .9;
}

.meta {
  opacity: .75;
  font-size: 14px;
}
.meta a {
  color: var(--accent);
  text-decoration: none;
}
.meta a:hover { text-decoration: underline; }

/* Contacto debajo del subtítulo */
.contact {
  margin-top: 6px;
  font-size: 14.5px;
  opacity: .88;
}
.contact a { color: var(--accent); text-decoration: none; }
.contact a:hover { text-decoration: underline; }

/* Botón de tema */
.theme-toggle {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 2;
  border: 1px solid #263241;
  background: var(--card);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.theme-toggle:hover { filter: brightness(1.06); }

/* ===================== */
/* Contenedor principal  */
/* ===================== */
.container {
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
}

h2 {
  font-family: Orbitron, Inter, system-ui, sans-serif;
  font-size: 22px;
  color: var(--primary);
  margin: 0 0 14px;
  border-left: 4px solid var(--secondary);
  padding-left: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon { width: 20px; height: 20px; }

/* Secciones y cards */
.section { margin-bottom: 36px; }

.card {
  background: var(--card);
  padding: 22px;
  border-radius: 14px;
  margin-bottom: 18px;
  border: 1px solid #222a36;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 0 14px rgba(0,255,255,.05);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 24px rgba(0,255,255,.12);
}

.job-title { font-weight: 700; color: var(--secondary); }
.job-sub   { opacity: .75; font-size: 14px; margin: .25rem 0 .75rem; }

ul { margin: .25rem 0 0 1rem; }
li { margin: .35rem 0; }

/* ===================== */
/* Animaciones Reveal    */
/* ===================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s ease;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger (escalonado) para varias cards consecutivas */
.card.reveal { transition-delay: .12s; }
.card.reveal:nth-child(2) { transition-delay: .24s; }
.card.reveal:nth-child(3) { transition-delay: .36s; }
.card.reveal:nth-child(4) { transition-delay: .48s; }
.card.reveal:nth-child(5) { transition-delay: .60s; }

/* ===================== */
/* Responsive            */
/* ===================== */
@media (max-width: 720px) {
  .header-inner {
    grid-template-columns: 1fr; /* vuelve a 1 columna */
    gap: 18px;
    padding: 0 16px;
    align-items: center;
    text-align: center;
  }
  .head-text { text-align: center; }
  .header-avatar { justify-content: center; }
  .title { font-size: 30px; }
}

/* ===================== */
/* Print (PDF prolijo)   */
/* ===================== */
@media print {
  :root {
    --bg: #fff;
    --text: #000;
  }
  header::before { filter: grayscale(1) brightness(.9); }
  .card { box-shadow: none; border: 1px solid #ddd; background: #fff; }
  a { color: #000; text-decoration: underline; }
}

/* ===================== */
/* Extras opcionales     */
/* ===================== */
/* Sutil: bordes redondeados inferiores del header */
header {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* Glow un poco más suave del avatar (opcional) */
/*
.avatar-wrap {
  box-shadow: 0 0 14px rgba(0,229,255,.35), 0 8px 26px rgba(0,0,0,.28);
}
*/