/* layout.css — base, type primitives, page structure (sections, hero, grids). */

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  /* Belt-and-braces: prevents any decorative layer from creating a horizontal
     scrollbar on small viewports. Root causes are addressed individually. */
  overflow-x: hidden;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-default);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

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

/* ── Type primitives ──────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
}
.on-dark .eyebrow { color: var(--yellow-500); }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); }

.h-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
  hyphens: manual;
}
.h-section {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.022em;
  color: var(--navy-700);
  text-wrap: balance;
  margin: 0;
}
.lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  text-wrap: pretty;
  max-width: 60ch;
}
.on-dark .lede { color: rgba(255,255,255,0.78); }

.prose {
  max-width: var(--prose-max);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--text-secondary);
}
.prose p { margin: 0 0 1.1em; text-wrap: pretty; }
.prose h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--navy-700);
  margin: 2em 0 .6em;
}
.prose a { color: var(--navy-700); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-hover); }

.article-notice {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: #6B5210;
  background: #FFF8E5;
  border-left: 3px solid var(--yellow-500);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin: 0 0 32px;
  max-width: var(--prose-max);
}

/* ── Skip link ─────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -48px; left: 12px;
  z-index: 1000;
  background: var(--ink-900);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top 180ms var(--motion-ease-standard);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 2px solid var(--yellow-500);
  outline-offset: 2px;
  box-shadow: var(--shadow-md);
}

/* ── Section scaffold ─────────────────────────────────────────── */
section.section { padding: var(--section-y) 0; }
.section.bg-default { background: var(--surface-raised); }
.section.bg-muted   { background: var(--gray-50); }
.section.bg-warm    { background: var(--surface-warm); }
.section.bg-navy    { background: var(--gray-700); color: #fff; }
.section.bg-ink     { background: var(--ink-900); color: #fff; }

.section-head {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 64ch; margin-bottom: clamp(40px, 6vw, 72px);
}
.section-head .eyebrow { margin-bottom: 6px; }

/* ── Homepage tall hero ───────────────────────────────────────── */
.hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(9,30,39,0.55) 0%, rgba(9,30,39,0.85) 100%),
    url("../hero/hero-bg.png") center/cover no-repeat var(--ink-900);
  color: #fff;
  /* Mobile-first floor — svh prevents the URL-bar jump on iOS Safari.
     Desktop override below restores the original 100vh / 900px ceiling. */
  min-height: clamp(560px, 92svh, 760px);
  max-height: none;
  display: flex; align-items: center;
  overflow: hidden;
  padding-top: var(--nav-h);
}
@media (min-width: 641px) {
  .hero { min-height: 100vh; min-height: 100svh; max-height: 900px; }
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--scrim-top), var(--scrim-bottom);
  pointer-events: none;
  z-index: 0;
}
.hero-rays {
  position: absolute; top: -8%; right: -6%;
  width: 720px; height: 720px;
  pointer-events: none;
  opacity: 0.85;
  z-index: 0;
}
.hero-rays svg { width: 100%; height: 100%; }
@media (max-width: 768px) {
  .hero-rays {
    width: min(420px, 80vw); height: min(420px, 80vw);
    top: -10%; right: -20%;
  }
}
.hero-glow {
  position: absolute; top: -20%; right: -10%;
  width: 680px; height: 680px;
  background: radial-gradient(circle, rgba(215,172,42,0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 768px) {
  .hero-glow {
    width: min(480px, 90vw); height: min(480px, 90vw);
    right: -10%;
  }
}
.hero-content {
  position: relative; z-index: 1;
  width: 100%;
  display: flex; flex-direction: column;
  gap: 28px;
  /* Use vertical-only padding so .container's left/right padding survives.
     Shorthand `padding: 80px 0 120px` would zero out the horizontal pad
     and the text would hit the screen edge on small viewports. */
  padding-top: 80px;
  padding-bottom: 120px;
  max-width: 920px;
}
.hero-content .eyebrow { color: var(--yellow-500); }
.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--gray-300);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}
@media (max-width: 640px) { .hero-sub { max-width: 36ch; } }

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 640px) {
  .hero-ctas { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero-ctas .btn { width: 100%; }
}
.scroll-indicator {
  position: absolute;
  bottom: 32px; left: var(--container-pad);
  z-index: 1;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 180ms;
}
.scroll-indicator:hover { color: var(--yellow-500); }
.scroll-indicator .chev {
  width: 16px; height: 16px;
  animation: bounceY 2s var(--motion-ease-standard) infinite;
}
@media (max-width: 640px) { .scroll-indicator { display: none; } }

/* ── Contact page short hero ──────────────────────────────────── */
.page-hero {
  position: relative;
  background: var(--ink-900);
  color: #fff;
  min-height: 50vh;
  max-height: 480px;
  display: flex; align-items: center;
  overflow: hidden;
  padding-top: var(--nav-h);
}
.page-hero .hero-rays { width: 560px; height: 560px; }
@media (max-width: 768px) {
  .page-hero .hero-rays { width: 420px; height: 420px; right: -32%; }
}
.page-hero .hero-glow { width: 520px; height: 520px; }
.page-hero-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  gap: 18px;
  /* Vertical-only padding — see note on .hero-content. */
  padding-top: 56px;
  padding-bottom: 64px;
  max-width: 800px;
}
.page-hero-content .eyebrow { color: var(--yellow-500); }
.page-hero-sub {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--ink-100);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}
.scroll-mini {
  position: absolute; bottom: 22px; left: var(--container-pad);
  z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 180ms;
}
.scroll-mini:hover { color: var(--yellow-500); }
.scroll-mini .chev {
  width: 14px; height: 14px;
  animation: bounceY 2s var(--motion-ease-standard) infinite;
}

/* ── Contact-page hero scrim parity ───────────────────────────── */
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--scrim-top), var(--scrim-bottom);
  pointer-events: none;
  z-index: 0;
}

/* ── Project detail hero (parallax) ───────────────────────────── */
.proj-hero {
  position: relative;
  height: 70vh;
  max-height: 720px;
  min-height: 560px;
  overflow: hidden;
  background: var(--ink-900);
}
@media (max-width: 768px) {
  .proj-hero { height: 60vh; min-height: 480px; }
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(0,59,114,0.55), transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(20,41,50,0.6), transparent 55%),
    linear-gradient(135deg, #0A1F2C 0%, var(--navy-800) 100%);
  will-change: transform;
}
.hero-bg::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 70vmin; height: 70vmin;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='white'><circle cx='50' cy='14' r='3.6'/><circle cx='38' cy='17' r='3'/><circle cx='60' cy='19' r='2.6'/><circle cx='28' cy='24' r='3.6'/><circle cx='68' cy='27' r='3.4'/><circle cx='22' cy='34' r='2.4'/><circle cx='44' cy='33' r='2.2'/><circle cx='36' cy='42' r='2'/><circle cx='20' cy='48' r='3.8'/><circle cx='22' cy='62' r='3'/><circle cx='28' cy='74' r='3.4'/><circle cx='40' cy='80' r='3'/></g><path d='M55 36 L62 41 L58 46 L66 50 L60 56 L72 60 L64 68 L78 70 L70 78 L80 80' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'/><path d='M48 60 L54 64 L50 70 L60 73 L54 80 L66 84' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.08;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    var(--scrim-top),
    linear-gradient(to bottom, rgba(9,30,39,0.20) 0%, rgba(9,30,39,0.45) 55%, rgba(9,30,39,0.85) 100%);
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding-top: calc(var(--nav-h) + 24px);
  padding-bottom: 56px;
}
.proj-hero .hero-content {
  display: flex; flex-direction: column;
  gap: 18px;
  max-width: 960px;
  padding: 0;
}
.hero-eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: #fff;
  text-wrap: balance;
  margin: 0;
}
.hero-loc {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(255,255,255,0.80);
  display: inline-flex; align-items: center; gap: 8px;
}
.hero-loc svg { width: 16px; height: 16px; opacity: 0.7; }
.facts-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.proj-hero .scroll-mini {
  bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  font-size: 10.5px;
}

/* ── Services grid (homepage) ─────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Stack to one column at the same threshold the nav collapses, so the
   widescreen 3-up layout doesn't compress to unreadable card widths. */
@media (max-width: 1023px) { .services-grid { grid-template-columns: 1fr; } }

/* ── Proyectos head row ───────────────────────────────────────── */
.projects-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.projects-head .head { display: flex; flex-direction: column; gap: 14px; max-width: 56ch; }
.projects-head .head .eyebrow { margin-bottom: 4px; }
.see-all-row { display: flex; justify-content: center; margin-top: 40px; }

/* ── Projects grid (homepage + listing page) ─────────────────── */
/* --projects-cols is set inline by projects-grid.js from data-cols.
   Below 1024px we collapse to 2 cols regardless, and below 640px to 1. */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(var(--projects-cols, 3), 1fr);
  gap: 24px;
  align-items: stretch;
}
.projects-grid > .proj-card { height: 100%; }
@media (max-width: 1023px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 639px) {
  .projects-grid { grid-template-columns: 1fr; gap: 16px; }
}
.projects-grid-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 48px 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--fs-body);
}

/* ── Homepage carousel (2 rows × N columns, horizontal scroll-snap) ── */
/* Activated whenever data-rows="2" is present on the grid. The visible
   viewport shows 3 columns at desktop; the rest are revealed by scrolling.
   Cards in the same column share an x position, so the snap effectively
   advances by column (= 2 cards) at a time. */
.projects-grid[data-rows="2"] {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: none;
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.projects-grid[data-rows="2"] > .proj-card {
  scroll-snap-align: start;
  height: 100%;
}
@media (max-width: 1023px) {
  .projects-grid[data-rows="2"] {
    grid-template-rows: 1fr;
    grid-auto-columns: minmax(78%, 1fr);
    gap: 16px;
    margin: 0 calc(-1 * var(--container-pad));
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
}
@media (max-width: 639px) {
  .projects-grid[data-rows="2"] { grid-auto-columns: minmax(86%, 1fr); }
}

/* ── Nosotros + stats ─────────────────────────────────────────── */
.nosotros-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 1024px) { .nosotros-grid { grid-template-columns: 1fr; gap: 32px; } }
.nosotros-left { display: flex; flex-direction: column; gap: 18px; }
.nosotros-right { display: flex; flex-direction: column; gap: 22px; }
.nosotros-right p {
  font-size: var(--fs-body); line-height: var(--lh-prose);
  color: var(--text-secondary);
  margin: 0;
  text-wrap: pretty;
  max-width: var(--prose-max);
}
.stats-row {
  margin-top: 80px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
}
@media (max-width: 1024px) { .stats-row { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 480px) { .stats-row { grid-template-columns: 1fr; gap: 24px; margin-top: 56px; } }
.stat .num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--navy-700);
}
.stat .label {
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ── CTA strip ────────────────────────────────────────────────── */
.cta-strip {
  text-align: center;
  padding: clamp(64px, 8vw, 100px) 0;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 0%, rgba(215,172,42,0.10), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(255,255,255,0.04), transparent 60%);
  pointer-events: none;
}
.cta-strip .inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.cta-strip h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: #fff; margin: 0;
  text-wrap: balance;
}
.cta-strip p {
  font-size: var(--fs-body-lg); line-height: var(--lh-body);
  color: rgba(255,255,255,0.82);
  max-width: 52ch; margin: 0;
}
.cta-strip .btn { margin-top: 12px; }

/* ── Contact form layout ──────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid .side-panel { order: -1; }
}
/* ── Project detail metrics + story + chart + specs + gallery ─ */
.metrics-strip {
  background: #F1EEE7;
  border-bottom: 1px solid var(--border-subtle);
  padding: clamp(36px, 5vw, 56px) 0;
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
@media (max-width: 1024px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } }
@media (max-width: 480px) { .metrics-grid { grid-template-columns: 1fr; gap: 28px; } }

.story-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
}
.story-cards > .story-card:nth-child(3) { grid-column: 1 / -1; }
@media (max-width: 768px) {
  .story-cards { grid-template-columns: 1fr; }
}

.chart-wrap { position: relative; height: 380px; }
@media (max-width: 640px) { .chart-wrap { height: 280px; } }
.chart-stats {
  margin-top: 20px;
  display: flex; flex-wrap: wrap; gap: 24px 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}

.specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
@media (max-width: 768px) { .specs { grid-template-columns: 1fr; } }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
}
@media (max-width: 1024px) { .gallery-grid { grid-auto-rows: 200px; } }
@media (max-width: 640px) { .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; } }

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1024px) {
  .related-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78%, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin: 0 calc(-1 * var(--container-pad));
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
  .related-grid > * { scroll-snap-align: start; }
}
@media (max-width: 480px) {
  .related-grid { grid-auto-columns: minmax(86%, 1fr); }
}

/* ── Otros proyectos: condensed section + cards ───────────────── */
section.section.section-related { padding: clamp(36px, 5vw, 64px) 0; }
.section-related .section-head { margin-bottom: clamp(20px, 3vw, 32px); }
.section-related .section-head h2 { font-size: clamp(22px, 2.4vw, 28px); }
.section-related .related-grid .proj-img { aspect-ratio: 16 / 9; }
.section-related .related-grid .proj-body { padding: 14px 16px 16px; gap: 8px; }
.section-related .related-grid .proj-name { font-size: 16px; line-height: 1.2; }
.section-related .related-grid .proj-loc { font-size: 12.5px; }
.section-related .related-grid .proj-tags { gap: 4px; }
.section-related .related-grid .badge { font-size: 10.5px; padding: 2px 8px; }
.section-related .related-grid .proj-link {
  font-size: 12.5px; padding-top: 8px; min-height: 28px;
}
@media (hover: none) and (pointer: coarse) {
  .section-related .related-grid .proj-link { min-height: 44px; }
}

/* ── Responsive nav threshold ─────────────────────────────────── */
/* Strictly below 1024 so the iPad-landscape viewport (exactly 1024px) gets
   the full desktop nav. Mirrors min-width: 1024 in mobile-first parlance. */
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .nav-actions .btn { display: none; }
  .nav-burger { display: inline-flex; }
}