/* Layout — Excavaciones BCN */

/* ── Container ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
}
.container-sm  { max-width: var(--container-sm); }
.container-md  { max-width: var(--container-md); }
.container-lg  { max-width: var(--container-lg); }
.container-xl  { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }

/* ── Secciones ── */
.section {
  padding-block: var(--space-32);
  position: relative;
  overflow: hidden;
}
.section-sm  { padding-block: var(--space-20); }
.section-lg  { padding-block: clamp(var(--space-32), 10vw, 10rem); }

.section-dark {
  background: var(--color-surface);
}
.section-darker {
  background: var(--color-surface-raised);
}

/* ── Grid genérico ── */
.grid {
  display: grid;
  gap: var(--space-8);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* ── Flex utilities ── */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

/* ── Section header ── */
.section-header {
  max-width: 680px;
}
.section-header-center {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}
.section-header h2,
.section-header-center h2 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}
.section-header p,
.section-header-center p {
  font-size: var(--text-lg);
  max-width: 58ch;
}
.section-header-center p { margin-inline: auto; }

/* ── Two-col layout ── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: center;
}
.two-col-reverse > *:first-child { order: 1; }
.two-col-60-40 { grid-template-columns: 60fr 40fr; }
.two-col-40-60 { grid-template-columns: 40fr 60fr; }

/* ── Marquee (social proof bar) ── */
.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.marquee-wrapper::before,
.marquee-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: var(--z-raised);
  pointer-events: none;
}
.marquee-wrapper::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-surface) 0%, transparent 100%);
}
.marquee-wrapper::after {
  right: 0;
  background: linear-gradient(-90deg, var(--color-surface) 0%, transparent 100%);
}
.marquee-track {
  display: flex;
  gap: var(--space-16);
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.marquee-dot {
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Decorative elements ── */
.grain-overlay {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.5;
}

.section-border-top {
  border-top: 1px solid var(--color-border);
}

/* ── Página interna layout ── */
.page-hero {
  padding-top: calc(var(--navbar-height) + var(--space-20));
  padding-bottom: var(--space-20);
  background: var(--color-surface);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-emphasis), transparent);
}

/* ── CTA final ── */
.cta-section {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-emphasis);
  border-radius: var(--radius-xl);
  padding: var(--space-20) var(--space-12);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse at center, rgba(212, 117, 10, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.cta-section h2 { font-size: var(--text-5xl); margin-bottom: var(--space-6); }
.cta-section p  { font-size: var(--text-xl); margin-inline: auto; margin-bottom: var(--space-10); max-width: 55ch; }
.cta-section .btn-group {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}