/* ============================================
   estilos.css — Portfolio Audiovisual
   Santiago Guillermo Ahumada · FADU · UBA
   Estética: Neon Genesis Evangelion — dark minimal
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow:ital,wght@0,300;0,400;0,500;1,300&display=swap');

/* ============================================
   VARIABLES
   ============================================ */
:root {
  --bg:          #080808;
  --bg-section:  #0e0e0e;
  --bg-card:     #111111;
  --border:      #1c1c1c;
  --border-mid:  #282828;

  --text:        #ccc8c0;
  --text-soft:   #888480;
  --text-dim:    #303030;

  --orange:      #ff6000;
  --orange-glow: rgba(255, 96, 0, 0.11);
  --orange-line: rgba(255, 96, 0, 0.4);
  --green:       #3dff80;
  --green-glow:  rgba(61, 255, 128, 0.07);
  --ig-pink:     #e1306c;
  --ig-glow:     rgba(225, 48, 108, 0.09);
  --be-blue:     #1769ff;
  --be-glow:     rgba(23, 105, 255, 0.08);

  --nav-h:       52px;
  --max-w:       900px;
  --font-mono:   'Share Tech Mono', 'Courier New', monospace;
  --font-body:   'Barlow', sans-serif;
  --ease:        0.24s ease;
}

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  font-size: 15px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.75;
  /* scanlines CRT sutiles */
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px
  );
}

/* ============================================
   TIPOGRAFÍA GLOBAL
   ============================================ */
h1 {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 6vw, 3.8rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.1;
  color: var(--text);
  text-transform: uppercase;
}

h2 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 2rem;
}
h2::before { content: '//'; color: var(--text-dim); flex-shrink: 0; }
h2::after  { content: ''; flex: 1; height: 1px; background: var(--border-mid); }

h3 {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 1.75rem;
  margin-bottom: 0.65rem;
}
h3::before { content: '> '; color: var(--green); }

p { font-size: 0.92rem; color: var(--text); line-height: 1.85; }

/* ============================================
   MAIN
   ============================================ */
main {
  padding-top: var(--nav-h);
  display: flex;
  flex-direction: column;
}

main > section {
  width: 100%;
  padding: 4rem 2rem;
  border-bottom: 1px solid var(--border);
  position: relative;
}

/* ============================================
   NAVBAR FIJA — .navegacion
   ============================================ */
.navegacion {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--nav-h);
  background: rgba(8, 8, 8, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  /* override section padding */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Logo izquierda — re-estilizar h2 dentro del nav */
.navegacion h2 {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: var(--orange);
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: auto;
  margin-bottom: 0;
  border: none;
  flex-shrink: 0;
}
.navegacion h2::before,
.navegacion h2::after { display: none; }

/* h3 categorías ocultos en navbar */
.navegacion h3 { display: none; }

/* Links horizontales */
.navegacion nav {
  display: flex;
  align-items: center;
  height: var(--nav-h);
}

.navegacion nav a {
  display: inline-flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  border-right: 1px solid var(--border);
  transition: color var(--ease), background var(--ease);
}
.navegacion nav a:first-child { border-left: 1px solid var(--border); }
.navegacion nav a:hover { color: var(--orange); background: var(--orange-glow); }

/* Link "Materias" tipo pill */
.navegacion > p {
  margin: 0;
  padding-left: 1.25rem;
}
.navegacion > p a {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  text-decoration: none;
  padding: 0.28rem 0.75rem;
  border: 1px solid rgba(61,255,128,0.2);
  transition: background var(--ease), border-color var(--ease);
}
.navegacion > p a::before { content: none; }
.navegacion > p a:hover {
  background: var(--green-glow);
  border-color: var(--green);
}

/* ============================================
   HERO — .presentacion
   ============================================ */
.presentacion {
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 3rem;
  row-gap: 1.5rem;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  /* override section padding para centrar el grid */
  padding: 5rem 2rem 4rem;
  /* quitar border-bottom del section base y poner el gradiente */
  border-bottom: none;
}

.presentacion::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(to right, var(--orange) 0%, transparent 55%);
}

/* h1 — col 1, row 1 */
.presentacion h1 {
  grid-column: 1;
  grid-row: 1;
}

/* foto — col 2, rows 1-2 */
.foto-perfil {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 500px;
  height: 500px;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid var(--border-mid);
  outline: 1px solid var(--orange);
  outline-offset: 4px;
  filter: contrast(1.08) saturate(0.75) grayscale(0.1);
  align-self: start;
  transition: outline-color var(--ease), outline-offset var(--ease), filter var(--ease);
}
.foto-perfil:hover {
  outline-color: var(--green);
  outline-offset: 7px;
  filter: contrast(1.1) saturate(1);
}

/* párrafo — col 1, row 2 */
.presentacion p {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.95rem;
  color: var(--text-soft);
  max-width: 52ch;
  border-left: 2px solid var(--orange-line);
  padding-left: 1.1rem;
  font-style: italic;
}

/* ============================================
   REDES — Instagram + Portfolio
   ============================================ */
.redes {
  background: var(--bg-section);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 2rem 0;
}

/* Título */
.redes h2 {
  width: 100%;
  max-width: var(--max-w);
  margin-bottom: 1.75rem;
}

/* ---- Botón Instagram ---- */
.redes > a:not(.portfolio-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-bottom: 3rem;
  padding: 0.85rem 2.25rem;
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  border: 1px solid var(--border-mid);
  background: transparent;
  transition: color var(--ease), border-color var(--ease),
              background var(--ease), transform var(--ease);
}
.redes > a:not(.portfolio-link) i {
  font-size: 1.35rem;
  line-height: 1;
}
.redes > a:not(.portfolio-link)::after {
  content: '@santiahum';
  font-size: 0.67rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  transition: color var(--ease);
}
.redes > a:not(.portfolio-link):hover {
  color: var(--ig-pink);
  border-color: var(--ig-pink);
  background: var(--ig-glow);
  transform: translateY(-2px);
}
.redes > a:not(.portfolio-link):hover::after { color: var(--ig-pink); }

/* ---- Divisor entre Instagram y Portfolio ---- */
.redes::after {
  content: '';
  display: block;
  width: 100%;
  max-width: var(--max-w);
  height: 1px;
  background: var(--border-mid);
}

/* ---- Bloque Portfolio / Behance ---- */
.portfolio-link {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--max-w);
  padding: 2.75rem 0;
  background: transparent;
  color: var(--text-soft);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color var(--ease);
}

/* Barra lateral izquierda animada */
.portfolio-link::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 0;
  background: var(--be-blue);
  transition: height 0.4s ease;
}
.portfolio-link:hover::before { height: 100%; }

/* Ícono Behance */
.portfolio-link i {
  font-size: 2.2rem;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: color var(--ease);
}

/* Info textual con ::after */
.portfolio-link::after {
  content: 'PORTFOLIO.EXE\A Santiago Ahumada — DIS · FADU · UBA\A Dirección de Fotografía · Montaje · Cámara · Gaffer\A behance.net/rentsofexile  ↗';
  white-space: pre;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  transition: color var(--ease);
}

.portfolio-link:hover { background: rgba(23,105,255,0.05); }
.portfolio-link:hover i { color: var(--be-blue); }
.portfolio-link:hover::after { color: var(--text); }

/* ============================================
   MATERIAS
   ============================================ */
.materias { background: var(--bg-section); }

.materias h2,
.materias h3 {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.materias h3 { display: block; }

.materias ul {
  list-style: none;
  max-width: var(--max-w);
  margin: 0 auto;
  border: 1px solid var(--border);
}

.materias ul li {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--text);
  padding: 0.75rem 1rem 0.75rem 2rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background var(--ease), padding-left var(--ease);
}
.materias ul li:last-child { border-bottom: none; }

.materias ul li::before {
  content: '›';
  position: absolute;
  left: 0.7rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  color: var(--text-dim);
  transition: color var(--ease);
}
.materias ul li:hover { background: var(--green-glow); padding-left: 2.5rem; }
.materias ul li:hover::before { color: var(--green); }

/* ============================================
   DATOS FACULTAD
   ============================================ */
.datos-facultad { background: var(--bg); }

.datos-facultad h2,
.datos-facultad p {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.datos-facultad h2 { display: flex; }

.datos-facultad > p:first-of-type {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  color: var(--orange);
  opacity: 0.55;
  letter-spacing: 0.06em;
  margin-bottom: 2rem;
}

.datos-facultad p:last-of-type {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-soft);
  line-height: 2.1;
  border: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
  background: var(--bg-card);
}

/* ============================================
   EXPERIENCIA CON IA
   ============================================ */
.experiencia {
  background: var(--bg);
  position: relative;
}

/* Línea de acento superior naranja */
.experiencia::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(to right, var(--orange) 0%, transparent 55%);
}

.experiencia h2,
.experiencia h3,
.experiencia p {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.experiencia h2 { display: flex; }

/* Cada bloque h3 + p como tarjeta terminal */
.experiencia h3 {
  margin-top: 2rem;
  margin-bottom: 0;
  padding: 0.6rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom: none;
  max-width: var(--max-w);
}

.experiencia h3:first-of-type { margin-top: 0; }

.experiencia p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.9;
  border: 1px solid var(--border);
  border-top: 1px solid var(--border-mid);
  padding: 1.1rem 1rem 1.25rem;
  background: var(--bg-section);
  max-width: var(--max-w);
  /* cursor parpadeante tipo terminal al final del texto editable */
  transition: color var(--ease), background var(--ease);
}

.experiencia p:hover {
  background: var(--bg-card);
  color: var(--text);
}

/* ============================================
   FOOTER
   ============================================ */
footer {
  width: 100%;
  padding: 1.5rem 2rem;
  background: var(--bg);
  border-top: 1px solid var(--orange);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-dim);
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-align: center;
}
footer::before { content: '// '; color: var(--orange); opacity: 0.4; }

/* ============================================
   RESPONSIVE — tablet ≤ 768px
   ============================================ */
@media (max-width: 768px) {
  .navegacion {
    padding: 0 1rem;
    overflow-x: auto;
  }
  .navegacion h2 { display: none; }
  .navegacion nav a { padding: 0 0.75rem; font-size: 0.6rem; }

  .presentacion {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding: 3.5rem 1.5rem 3rem;
    min-height: auto;
  }
  .presentacion h1 { grid-column: 1; grid-row: 1; }
  .foto-perfil {
    grid-column: 1; grid-row: 2;
    width: 100px; height: 100px;
    justify-self: start;
  }
  .presentacion p { grid-column: 1; grid-row: 3; }

  .redes::after { width: calc(100% - 2rem); margin: 0 1rem; }
}

/* ============================================
   RESPONSIVE — mobile ≤ 480px
   ============================================ */
@media (max-width: 480px) {
  main > section { padding: 3rem 1.1rem; }

  .redes h2 { padding: 2.25rem 1.1rem 1.5rem; }
  .redes > a:not(.portfolio-link) { margin-bottom: 2.25rem; }
  .portfolio-link { padding: 2rem 1.1rem; gap: 1rem; }
  .portfolio-link::after { font-size: 0.63rem; }

  .materias ul li { font-size: 0.82rem; }
  .datos-facultad p:last-of-type { font-size: 0.68rem; padding: 1rem; }
  footer { font-size: 0.58rem; padding: 1.25rem 1rem; text-align: left; }
}