/* ------------------  VARIABLES & RESET  ------------------ */
:root {
  --bg: #fcf4ec;               /* fondo crema suave */
  --fg: #2b2b2b;               /* texto/acento neutro oscuro */
  --fg-light: #5a5a5a;         /* texto secundario */
  --line: rgba(0,0,0,.08);     /* líneas sutiles */
  --max-w: 1200px;             /* ancho máximo */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', serif;
  --transition: 220ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.2;
  
}
p { margin: 0 0 1em; }
section { padding: clamp(4rem, 8vw, 7rem) 1.25rem; }

/* ------------------  LAYOUT  ------------------ */
.container { max-width: var(--max-w); margin: 0 auto; }

/* ------------------  HEADER / NAV  ------------------ */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  z-index: 1000;
}
.nav-wrap { max-width: var(--max-w); margin: 0 auto; padding: .75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; }
.brand { font-family: var(--font-serif); font-size: 1.25rem; letter-spacing: .03em; }

/* Mobile menu toggle (checkbox hack) */
#nav-toggle { display: none; }
nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 2rem; }
nav a { position: relative; padding-bottom: .25rem; }
nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--fg);
  transition: width var(--transition);
}
nav a:hover::after { width: 100%; }

.hamburger { display: none; cursor: pointer; font-size: 1.5rem; line-height: 1; }

@media (max-width: 820px) {
  nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden;
    transition: max-height var(--transition);
  }
  nav ul { flex-direction: column; gap: 1rem; padding: 1.25rem; }
  #nav-toggle:checked ~ nav { max-height: 280px; }
  .hamburger { display: block; }
}

/* ------------------  HERO / INICIO  ------------------ */
.hero {
  padding-top: calc(70px + 6rem); /* compensate fixed header */
  text-align: center;
}
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.hero p { max-width: 620px; margin: 1rem auto 0; color: var(--fg-light); }

/* ------------------  PORTFOLIO  ------------------ */
.tabs {
  display: flex; gap: 2rem; justify-content: center; margin-bottom: 3rem;
  flex-wrap: wrap;
}
.tabs a {
  font-weight: 500; letter-spacing: .03em;
  position: relative; padding-bottom: .4rem;
}
.tabs a.active::after,
.tabs a:hover::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--fg);
}

.grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card {
  position: relative; overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,.3);
}
.card img { transition: transform 400ms ease; }
.card:hover img { transform: scale(1.05); }
.card-caption {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  color: #fff; padding: .75rem 1rem; font-size: .9rem; opacity: 0; transition: opacity var(--transition);
}
.card:hover .card-caption { opacity: 1; }

/* ------------------  ABOUT  ------------------ */
.about {
  display: grid; gap: 3rem; align-items: center;
  grid-template-columns: 1fr 1fr;
}
.about img { border: 1px solid var(--line); }
.about p { color: var(--fg-light); }

@media (max-width: 940px) {
  .about { grid-template-columns: 1fr; }
}

/* ------------------  CONTACT  ------------------ */
form {
  max-width: 520px; margin: 0 auto; display: grid; gap: 1rem;
}
input, textarea {
  width: 100%; padding: .9rem 1rem; border: 1px solid var(--line); background: rgba(255,255,255,.4);
  font-family: var(--font-sans); font-size: 1rem; resize: vertical;
}
input:focus, textarea:focus { outline: none; border-color: var(--fg); }
button {
  padding: .9rem 1.5rem; border: 1px solid var(--fg); background: var(--fg); color: var(--bg);
  font-family: var(--font-sans); font-size: .95rem; letter-spacing: .04em; cursor: pointer; transition: background var(--transition), color var(--transition);
}
button:hover { background: transparent; color: var(--fg); }

/* ------------------  FOOTER  ------------------ */
footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 1.25rem; text-align: center; color: var(--fg-light); font-size: .85rem;
}
.socials { display: flex; gap: 1.25rem; justify-content: center; margin-bottom: 1rem; }
.socials a { position: relative; }
.socials a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--fg); transition: width var(--transition); }
.socials a:hover::after { width: 100%; }
.retrato{
   max-width: 720px; height: auto; display: block; 
}