:root{
  /* Colores y tipografías */
  --bg:#ffffff;
  --text:#333333;
  --accent:#ffffff;
  --accent-hover:#ffffff;
  --fg-inactive:#888888;

  --font-sans:'Inter',sans-serif;
  --font-serif:'Playfair Display',serif;
}

/* Reset mínimo */
*{margin:0;padding:0;box-sizing:border-box}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  line-height:1.6;
}

/* ----------  Layout  ---------- */
.container{max-width:800px;margin:0 auto;padding:2rem 1rem}

/* Header */
.site-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 0;background:var(--bg);
  position:sticky;top:0;z-index:100;
}
.logo-container .logo-img{width:48px;height:auto}
.nav{display:flex;gap:1.5rem}
.nav a{color:var(--text);text-decoration:none;transition:color .2s}
.nav a:hover{color:var(--accent)} 

/* ----------  Hero  ---------- */
.hero{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:80vh;text-align:center;
  background:linear-gradient(270deg,var(--accent),var(--accent-hover));
  background-size:400% 400%;animation:gradientShift 15s ease infinite;
}
.hero-content{color:#fff}                 /* <<< texto blanco para contraste */
.hero-content h2{font-family:var(--font-serif);font-size:3rem;margin-bottom:.5rem}
.subtitle{color:#000000;font-size:1.25rem;margin-bottom:1.5rem}
.btn-primary{
  background:#ffe56e;color:#000;
  padding:.75rem 1.5rem;border-radius:.5rem;text-decoration:none;
  transition:background .2s;
}
.btn-primary:hover{background:#ffd645}

/* Máquina de escribir */
.typewriter{
  display:inline-block;overflow:hidden;white-space:nowrap;
  border-right:2px solid #ffe56e;
  animation:typing 3s steps(30,end),blink-caret .75s step-end infinite;
}
@keyframes typing{from{width:0}to{width:100%}}
@keyframes blink-caret{50%{border-color:transparent}}

/* Flecha “scroll down” */
.scroll-down{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  font-size:2rem;color:#002f3d;animation:bounce 2s infinite;
}
@keyframes bounce{
  0%,20%,50%,80%,100%{transform:translate(-50%,0)}
  40%{transform:translate(-50%,-10px)}
  60%{transform:translate(-50%,-5px)}
}

/* ----------  Sobre mí  ---------- */
.profile{text-align:center;margin-bottom:3rem}
.profile-pic{
  width:120px;height:120px;border-radius:50%;object-fit:cover;
  margin-bottom:1rem;box-shadow:0 2px 8px rgba(0,0,0,.1);
}

/* Secciones generales */
section{padding:4rem 0}
.about h3,.projects h3,.contact h3{
  font-family:var(--font-serif);font-size:2rem;margin-bottom:1rem;
}

/* ----------  Proyectos  ---------- */
.project-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;
}
.project-card{
  background:rgba(0,0,0,.03);padding:1.5rem;border-radius:.75rem;
}
.project-card h4{margin-bottom:.5rem}
/* .project-card a{color:#000(--accent);text-decoration:none;transition:opacity .2s} */
.project-card a{color:#888;text-decoration:none;transition:opacity .2s}
.project-card a:hover{opacity:.8}

/* ----------  Footer  ---------- */
.site-footer{
  text-align:center;padding:1.5rem 0;font-size:.875rem;
  border-top:1px solid rgba(0,0,0,.1);color:var(--fg-inactive);
}

/* ----------  Estados activo / inactivo  ---------- */
section h2,section h3,section h4,section p,section .highlight{
  transition:color .3s ease,text-shadow .3s ease;
}
section.inactive h2,section.inactive h3,section.inactive h4,
section.inactive p,section.inactive .highlight{
  color:var(--fg-inactive)!important;text-shadow:none!important;
}
section.active h2,section.active h3,section.active h4,
section.active p,section.active .highlight{
  color:#002f3d!important;text-shadow:0 0 8px rgba(255,229,110,.6)!important;
}

/* ----------  Efecto “reveal” (fade-in arriba)  ---------- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}
                    to  {opacity:1;transform:translateY(0)}}
.reveal{
  opacity:0;transform:translateY(20px);        /* estado inicial */
  animation:fadeInUp .8s ease forwards;        /* <<< ahora SÍ tiene animation-name */
}

/* ----------  Degradado animado  ---------- */
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}



/* ---- Responsive ---- */
/* ----------  RESPONSIVE  ---------- */

/* Tablet (≤ 768 px) */
@media (max-width: 768px) {
  /* ——— Header ——— */
  .site-header {
    padding: 0.75rem 0;
  }
  .nav {
    gap: 1rem;                /* enlaces un poco más juntos */
  }
  .nav a {
    font-size: 0.95rem;
  }

  /* ——— Hero ——— */
  .hero {
    height: 70vh;             /* menos alto en tablet */
    padding: 0 1rem;
  }
  .hero-content h2 {
    font-size: 2.4rem;        /* título más pequeño */
  }
  .subtitle {
    font-size: 1.1rem;
  }
  .btn-primary {
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
  }

  /* ——— Grid de proyectos ——— */
  .project-list {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
  }
}

/* ----------  MÓVIL (≤ 480px) – menú en fila  ---------- */
@media (max-width: 480px) {
  /* Header: mismo layout, solo ajusta padding */
  .site-header {
    padding: 0.75rem 1rem;
    /* elimina flex-direction: column; */
  }

  /* Nav en fila, con wrap o scroll si hace falta */
  .nav {
    display: flex;
    flex-wrap: wrap;       /* para que bajen si no caben */
    justify-content: center;
    gap: 0.75rem;
    overflow-x: auto;      /* scroll horizontal si es necesario */
    -webkit-overflow-scrolling: touch;
  }
  .nav a {
    margin: 0;             /* elimina márgenes verticales */
    font-size: 0.9rem;
    white-space: nowrap;   /* evitar que se rompan en varias líneas */
  }

  /* Hero */
  .hero {
    height: 65vh;
  }
  .hero-content h2 {
    font-size: 1.9rem;
  }
  .subtitle {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .btn-primary {
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
  }
  .scroll-down {
    font-size: 1.6rem;
  }

  /* Secciones */
  section {
    padding: 2rem 0;
  }

  /* Proyectos: una sola columna */
  .project-list {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .project-card {
    padding: 1.25rem;
  }

  /* Footer */
  .site-footer {
    padding: 1rem 0;
    font-size: 0.8rem;
  }
}