/* =========================================================
   Sistema de diseño — Alejandro Gómez
========================================================= */
:root{
  /* Paleta (azul primario) */
  --brand-800:#0b3d5c;
  --brand-700:#003d5c;   /* Primario base */
  --brand-600:#005b96;   /* Botón primario */
  --brand-500:#0a72bf;   /* Hover primario */
  --accent-500:#2ad1ff;  /* Sutil acento para microinteracciones */

  --neutral-900:#0f172a; /* Texto principal */
  --neutral-700:#334155; /* Texto secundario */
  --neutral-300:#d1d5db;
  --neutral-200:#e5e7eb;
  --neutral-100:#f6f7fb; /* Fondo principal */
  --white:#ffffff;

  /* Tipografía y ritmo */
  --font-sans:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  --fs-hero: clamp(28px, 6vw, 44px);
  --fs-h1: clamp(22px, 4.5vw, 32px);
  --fs-body: 16px;
  --lh-body: 1.65;

  /* Espaciado (8px scale) */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  --radius-1: 10px;
  --radius-2: 14px;

  /* Focus ring accesible */
  --focus: 3px solid rgba(10,114,191,.55);
}

/* Reset mínimo y base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--neutral-900);
  background: var(--neutral-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width:100%; display:block; }

/* =========================================================
   Layout principal compartido
========================================================= */
.layout{
  min-height: 100svh;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
}

/* Sidebar / Header colapsable */
.sidebar{
  background: var(--brand-700);
  color: var(--white);
  padding: var(--space-5) var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4);
}
.photo-container{ margin-bottom: var(--space-2); }
.profile-photo{
  width: 160px; height: 160px; object-fit: cover;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 22px rgba(0,0,0,.25);
}

/* Redes / contacto */
.social{
  display: grid;
  gap: var(--space-3);
  width: 100%;
}
.btn--social{ width: 100%; }

/* Contenido principal */
.main{
  display: block;
  padding: var(--space-6) var(--space-5);
}
.hero{
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}
.hero__title{
  font-size: var(--fs-hero);
  line-height: 1.15;
  color: var(--brand-700);
  margin: 0 0 var(--space-2) 0;
}
.hero__motto{
  display:block;
  font-size: clamp(16px, 2.8vw, 20px);
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--accent-500);
  margin-top: 4px;
}
.hero__lede{
  max-width: 70ch;
  margin: 0 0 var(--space-5) 0;
  color: var(--neutral-700);
}
.hero__ctas{
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

/* Métricas / trust */
.stats{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  color: var(--neutral-700);
}
.stats li{
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-1);
  padding: 10px 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.stats strong{ color: var(--brand-700); }

/* =========================================================
   Títulos comunes
========================================================= */
.section-title{
  font-size: var(--fs-h1);
  color: var(--brand-700);
  margin: 0 0 var(--space-3) 0;
}

/* =========================================================
   Botones
========================================================= */
.btn{
  --padY: 12px;
  --padX: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px; /* target táctil */
  padding: var(--padY) var(--padX);
  border-radius: var(--radius-1);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  outline: none;
}
.btn:focus-visible { outline: var(--focus); outline-offset: 2px; }

.btn--primary{
  background: var(--brand-600);
  color: var(--white);
  border: 1px solid transparent;
  box-shadow: 0 4px 10px rgba(0,91,150,.25);
}
.btn--primary:hover{ background: var(--brand-500); transform: translateY(-1px); }
.btn--primary:active{ transform: translateY(0); }

.btn--secondary{
  background: var(--white);
  color: var(--brand-700);
  border: 1px solid var(--neutral-200);
}
.btn--secondary:hover{ border-color: var(--brand-600); color: var(--brand-600); transform: translateY(-1px); }
.btn--secondary:active{ transform: translateY(0); }

.ext-icon svg{ display:inline-block; fill: currentColor; }

/* =========================================================
   Página Proyectos (layout estilo wireframe)
========================================================= */
.filter-container{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin-bottom: var(--space-4);
}
.filter-container > div{
  flex: 1 1 220px;
  min-width: 220px;
}
.filter-container label{
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--brand-700);
}
.filter-container select{
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-1);
  border: 1px solid var(--neutral-200);
  background: var(--white);
}

/* ======== Proyecto: layout estilo wireframe solicitado ======== */
.case-layout{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "year year year"
    "proj proj proj"
    "context context context"
    "problem tools results"
    "problem skills results";
  gap: var(--space-3);
}

/* Barras (Year / Project) estilo bloque */
.bar{
  background: var(--brand-700);
  color: var(--white);
  border-radius: var(--radius-1);
  padding: var(--space-3);
  grid-area: unset;
  display:flex;
  align-items:center;
  gap: var(--space-3);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.bar--year{ grid-area: year; }
.bar--proj{ grid-area: proj; }

.bar label{
  font-weight: 600;
  margin:0;
  color: var(--white);
  min-width: 180px;
}
.bar select{
  flex:1 1 auto;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-1);
  border: 1px solid rgba(255,255,255,.25);
  background: var(--white);
  color: var(--neutral-900);
}

/* Cajas principales con transparencia y hover */
.case-box{
  background: rgba(0,61,92,0.88); /* Azul semitransparente */
  color: var(--white);
  border-radius: var(--radius-1);
  padding: var(--space-4);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  transition: background-color .2s ease;
}
.case-box:hover{
  background: var(--brand-700); /* resalta sólido al pasar el mouse */
}
.case-box h2{
  color: var(--white);
  font-size: clamp(14px, 1.9vw, 18px);
  letter-spacing: .3px;
  margin: 0 0 var(--space-2) 0;
  opacity: .95;
  text-transform: uppercase;
}
.case-box p{ margin:0; white-space: pre-wrap; line-height: 1.65; }

.case--context{ grid-area: context; min-height: 220px; }
.case--problem{ grid-area: problem; min-height: 200px; }
.case--tools{ grid-area: tools; min-height: 120px; }
.case--skills{ grid-area: skills; min-height: 120px; }
.case--results{ grid-area: results; min-height: 200px; }

/* Herramientas en modo claro sobre fondo oscuro */
.case--tools #detail-herramientas .tool-chip{
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
}
.case--tools #detail-herramientas iconify-icon{
  color: var(--white);
}

/* Grid de detalle (versión anterior) — por si lo usas en otra vista */
.project-detail{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
.detail-box{
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-1);
  padding: var(--space-3);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.detail-box h2{
  font-size: 16px;
  margin: 0 0 8px 0;
  color: var(--brand-600);
}
.detail-box p{
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* Herramientas como iconos (modo claro) */
#detail-herramientas{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tool-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--neutral-200);
  background: var(--white);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.tool-chip iconify-icon{
  font-size: 20px;
  line-height: 1;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1200px){
  .project-detail{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 920px){
  .case-layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "year"
      "proj"
      "context"
      "problem"
      "tools"
      "skills"
      "results";
  }
}
@media (max-width: 820px){
  .project-detail{ grid-template-columns: 1fr; }
}
@media (max-width: 1024px){
  .layout{
    grid-template-columns: 1fr; /* sidebar pasa arriba como header */
  }
  .sidebar{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
  }
  .photo-container{ margin: 0; }
  .profile-photo{ width: 64px; height: 64px; border-width: 2px; }
  .social{
    grid-auto-flow: column;
    grid-auto-columns: minmax(120px,1fr);
    width: auto;
  }
  .main{
    padding: var(--space-5) var(--space-4);
  }
}