/* ============================================================
   layout.css — estructura: contenedor, nav, secciones, footer.
   ============================================================ */

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  min-height:68px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-icon{ height:40px; width:auto; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:-.01em; }
.brand-name .accent{ color:var(--accent); }

.nav-links{ display:flex; align-items:center; gap:var(--space-4); }
.nav-link{
  text-decoration:none; font-size:var(--text-sm); font-weight:600; color:var(--ink-muted);
}
.nav-link:hover{ color:var(--ink); }

.nav-cta{ margin-left:var(--space-2); }

/* Botón de menú mobile (oculto en desktop) */
.nav-toggle{
  display:none;
  appearance:none; background:none; border:1px solid var(--rule);
  border-radius:var(--radius-sm); padding:8px 10px; cursor:pointer; color:var(--ink);
}
.nav-toggle svg{ width:20px; height:20px; }

@media (max-width:760px){
  .nav-links{
    display:none;
    position:absolute; top:68px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    padding:var(--space-2) var(--gutter) var(--space-3);
  }
  .nav-links.open{ display:flex; }
  .nav-link{ padding:var(--space-2) 0; font-size:var(--text-base); border-bottom:1px solid var(--rule); }
  .nav-cta{ margin:var(--space-3) 0 0; }
  .nav-toggle{ display:inline-flex; align-items:center; }
}

/* ---------- HERO ---------- */
.hero{
  padding:var(--space-7) 0 var(--space-6);
  border-bottom:1px solid var(--rule);
  position:relative;
  background:
    linear-gradient(105deg,
      color-mix(in srgb, var(--paper) 98%, transparent) 0%,
      color-mix(in srgb, var(--paper) 88%, transparent) 48%,
      color-mix(in srgb, var(--paper) 70%, transparent) 100%),
    url('../assets/photos/hero.jpg') center/cover no-repeat,
    var(--paper);
}
.hero-grid{
  display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
  gap:var(--space-6); align-items:center;
}
.hero h1{ font-size:var(--text-3xl); font-weight:700; letter-spacing:-.02em; }
.hero-sub{
  margin-top:var(--space-4); font-size:var(--text-lg); color:var(--ink-muted);
  max-width:var(--measure);
}
.hero-ctas{ display:flex; gap:var(--space-3); margin-top:var(--space-5); flex-wrap:wrap; }

/* Cifra firma: el dato que hace memorable la página */
.hero-fig{
  border-left:4px solid var(--accent);
  padding-left:var(--space-4);
}
.hero-fig .fig-num{
  font-family:var(--font-display); font-weight:800; font-size:var(--text-fig);
  line-height:.95; letter-spacing:-.03em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.hero-fig .fig-cap{
  margin-top:var(--space-2); color:var(--ink-muted); max-width:34ch;
}
.hero-fig .fig-meta{ margin-top:var(--space-2); color:var(--accent); }

@media (max-width:820px){
  .hero-grid{ grid-template-columns:1fr; gap:var(--space-5); }
  .hero{ padding:var(--space-6) 0 var(--space-6); }
}

/* ---------- SECCIONES ---------- */
.section{ padding:var(--space-7) 0; border-bottom:1px solid var(--rule); }
.section--alt{ background:var(--paper-2); }
.section--last{ border-bottom:none; }

/* Dos columnas para el oficio (texto + anexo fotográfico) */
.oficio-grid{
  display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
  gap:var(--space-5); align-items:start;
}
@media (max-width:820px){ .oficio-grid{ grid-template-columns:1fr; } }

/* Cabecera de sección */
.section-head{
  display:flex; align-items:baseline; gap:var(--space-3);
  margin-bottom:var(--space-5);
}
.section-head h2{ font-size:var(--text-2xl); letter-spacing:-.015em; }
.section-dek{ margin-top:var(--space-2); color:var(--ink-muted); max-width:var(--measure); }

/* ---------- CONTACTO ---------- */
.contact{ padding:var(--space-7) 0; }
.contact .prose{ max-width:var(--measure); }

/* ---------- FOOTER ---------- */
.footer{
  border-top:1px solid var(--rule);
  background:var(--paper-2);
  padding:var(--space-6) 0 var(--space-4);
}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--space-5);
}
.footer h4{ font-size:var(--text-sm); text-transform:none; letter-spacing:.02em; margin-bottom:var(--space-2); }
.footer p, .footer a{ font-size:var(--text-sm); color:var(--ink-muted); }
.footer a:hover{ color:var(--ink); }
.footer .brand-name{ color:var(--ink); }
.footer-list{ display:flex; flex-direction:column; gap:var(--space-1); }
.footer-list a{ text-decoration:none; }
.footer-bottom{
  margin-top:var(--space-5); padding-top:var(--space-3);
  border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap;
  color:var(--ink-muted); font-size:var(--text-sm);
}
@media (max-width:760px){
  .footer-grid{ grid-template-columns:1fr; gap:var(--space-4); }
}