/* ==========================================================================
   layout.css — Contenedores, secciones, grids, header, footer (mobile-first)
   ========================================================================== */

/* --- Contenedores y secciones --- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container.narrow { max-width: 760px; }
main { padding-top: var(--header-h); }
.section { padding-block: var(--space-section); }
.section--alt { background: var(--color-bg-alt); }
.section-head { max-width: 640px; margin-bottom: var(--space-5); }
.section-head.text-center { margin-inline: auto; }
.section-head .kicker { margin-bottom: var(--space-1); }
.section-head p:not(.kicker) { margin-top: var(--space-2); color: var(--color-muted); }

/* --- Grids --- */
.grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.split { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.stack--center { align-items: center; }

@media (min-width: 640px) {
  .grid-2, .grid-cards, .grid-gallery, .grid-features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .split { grid-template-columns: 1.4fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .grid-features { grid-template-columns: repeat(4, 1fr); }
  .grid-gallery { grid-template-columns: repeat(3, 1fr); }
}


/* --- Hero principal (pantalla completa) --- */
.hero {
  position: relative;
  min-height: 100svh;
  margin-top: calc(var(--header-h) * -1);
  display: grid;
  place-items: center;
  text-align: center;
  isolation: isolate;
}
.hero > .ph { position: absolute; inset: 0; z-index: -1; border-radius: 0; }
.hero-content { max-width: 820px; padding-block: calc(var(--header-h) + var(--space-5)) var(--space-5); }
.hero-content > * + * { margin-top: var(--space-3); }

/* --- Hero de páginas internas --- */
.page-hero { padding-block: var(--space-6) var(--space-5); background: var(--color-bg-alt); }
.page-hero .lead { margin-top: var(--space-2); max-width: 640px; }
.page-hero--image {
  position: relative;
  min-height: 60svh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.page-hero--image > .ph { position: absolute; inset: 0; z-index: -1; border-radius: 0; }
.page-hero-content > * + * { margin-top: var(--space-1); }

/* --- Header --- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--color-line); box-shadow: var(--shadow-sm); }
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.header-logo img { height: 44px; width: auto; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }

/* Navegación: móvil = panel desplegable, desktop = en línea */
.header-nav {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-2) var(--gutter) var(--space-4);
  display: none;
}
.site-header.menu-open .header-nav { display: block; }
.nav-list { display: flex; flex-direction: column; }
.nav-list a {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-deep);
  border-bottom: 1px solid var(--color-line);
}
.nav-list a[aria-current="page"] { color: var(--color-brand-deep); }
.header-actions > .btn-primary { display: none; }
@media (min-width: 600px) { .header-actions > .btn-primary { display: inline-flex; } }

@media (min-width: 960px) {
  .header-nav {
    position: static;
    display: block;
    padding: 0;
    border: 0;
    background: none;
  }
  .nav-list { flex-direction: row; gap: var(--space-4); }
  .nav-list a { padding: 0; border: 0; font-size: var(--fs-xs); }
  .menu-toggle { display: none; }
}