/* =============================================================
   GOLDEN ASSET — 02-layout.css
   Capa "Layout" (SMACSS): estructura de las regiones de página
   (posición, grid, flex, paddings). El detalle visual de cada
   pieza vive en 03-components.css.
   ============================================================= */

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:80px; }

.nav-links{ display:flex; align-items:center; gap:36px; }
.menu-toggle{ display:none; background:none; border:none; color:var(--paper); cursor:pointer; padding:6px; }
.menu-toggle svg{ width:22px; height:22px; }
@media (max-width:880px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .menu-toggle{ display:block; }
}

/* ---------- Mobile drawer ---------- */
.drawer{
  position:fixed; inset:0; z-index:60;
  background:var(--ink);
  display:flex; flex-direction:column; padding:26px 24px;
  transform:translateY(-100%);
  transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.drawer.open{ transform:translateY(0); }
.drawer-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:56px; }
.drawer-links{ display:flex; flex-direction:column; gap:26px; }
.drawer-bottom{ margin-top:auto; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:100px 0 88px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.85fr; gap:60px; align-items:center; }
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .chart-frame{ max-width:420px; margin:0 auto; }
}

/* ---------- Generic section shell ---------- */
section{ padding:104px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
  margin-bottom:56px; border-bottom:1px solid var(--line-soft); padding-bottom:32px;
}
@media (max-width:700px){ .section-head{ flex-direction:column; align-items:flex-start; gap:16px; } }

/* ---------- Strip (pillar tickers) ---------- */
.strip{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:22px 0; }
.strip .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }

/* ---------- Services (4 pillars) ---------- */
.services{ background:var(--panel); }
.pillar-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
@media (max-width:820px){ .pillar-grid{ grid-template-columns:1fr; } }

/* ---------- About ---------- */
.about .wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:start; }
@media (max-width:900px){ .about .wrap{ grid-template-columns:1fr; } }

/* ---------- Banner (full-bleed photo) ---------- */
.banner{ position:relative; padding:130px 0; overflow:hidden; }

/* ---------- Contact ---------- */
.contact{ background:linear-gradient(180deg, var(--panel-2), var(--ink)); position:relative; }
.contact .section-head{ margin-bottom:60px; }
.contact-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line-soft); padding:44px 0; background:var(--panel-2); }
.footer-inner{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px; }
@media (max-width:600px){ .footer-inner{ flex-direction:column; } }