*, *::before, *::after { box-sizing: border-box; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--oliva-intenso); outline-offset: 2px; }
html { scroll-behavior: smooth; }
html {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: clip;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  overflow-x: clip;
  font-family: 'Poppins', sans-serif;
  background: var(--blanco-hueso);
  color: var(--carbon-organico);
}
#hero,
.presentation-section,
.section,
.footer,
.trust-section,
.emotional-section,
.cta-section,
.categories-section,
.experiences-section,
.packages-section,
.benefits-section,
.testimonials-section,
.tour-page,
.tour-related,
.contact-page,
.legal-page,
.about-page,
.availability-page {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
#hero { overflow: visible; }

/* Contenedores de contenido alineados con el header */
.container, .presentation-inner, .emotional-inner, .cta-inner, .hero-inner, .footer-inner, .trust-inner, .contact-inner, .legal-inner, .legal-hero-inner, .tour-category-hero__inner, .landing-hero__inner, .landing-body__inner, .availability-inner {
  max-width: var(--site-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--site-gutter-x) !important;
  padding-right: var(--site-gutter-x) !important;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  :root { --site-gutter-x: 32px; }
}

@media (max-width: 1024px) {
  :root { --site-gutter-x: 24px; }
}

@media (max-width: 768px) {
  :root { --site-gutter-x: 24px; }
}

@media (max-width: 640px) {
  :root { --site-gutter-x: 20px; }
}
.lang-flag { display: block; }
.fi { background-size: cover; background-position: center; }

:root {
  --site-max-width: 1400px;
  --site-gutter-x: 48px;
  /* Paleta orgánica (nombre → uso) */
  --bosque-profundo: #3E4F22;
  --oliva-intenso: #667026;
  --carbon-organico: #2F2F2B;
  --blanco-hueso: #FAFAF7;
  --lima-musgo: #A4B34C;
  /* Tokens usados en componentes (mapeados a la paleta) */
  --verde-dark: var(--bosque-profundo);
  --verde-main: var(--oliva-intenso);
  --verde-medio: #7A8840;
  --verde-claro: var(--lima-musgo);
  --naranja: var(--oliva-intenso);
  --naranja-hover: #4F5C24;
  --naranja-claro: #8A9A45;
  --beige: #EEF1E6;
  --beige-light: #F6F7EF;
  --verde-footer: #323D22;
  --verde-footer-darker: #2A3320;
  --verde-muy-oscuro: #252E18;
  --blanco: var(--blanco-hueso);
  --gris-texto: var(--carbon-organico);
  --gris-secundario: #6B6B6B;
  --gris-suave: #ECF0E6;
  --gris-borde: #D8DCCF;
  --gris: #555;
  --gris-claro: #888;
  /* Aliases para compatibilidad */
  --verde: var(--verde-main);
  --verde-principal: var(--verde-main);
  --verde-oscuro: var(--verde-dark);
  --naranja-premium: var(--naranja);
}

.section { padding: 100px 0 90px; }
.container { max-width: var(--site-max-width); margin: 0 auto; width: 100%; box-sizing: border-box; }

/* Patrón profesional de títulos (estilo Categories / Klook) */
.section-header { margin-bottom: 56px; max-width: 640px; }
.section-title {
  font-family: 'Poppins', sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--verde-dark);
  margin-bottom: 16px;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-align: left;
}
.section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, var(--lima-musgo), var(--oliva-intenso));
  margin-top: 14px;
  opacity: 1;
  border-radius: 2px;
}
.section-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: var(--gris-secundario);
  line-height: 1.7;
  margin-top: 14px;
  max-width: 520px;
}
.section-header-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 56px;
}
.section-header-row .section-header { margin-bottom: 0; }
.section-view-all {
  font-size: 14px;
  font-weight: 600;
  color: var(--naranja);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 8px;
}
.section-view-all:hover { color: var(--naranja-hover); text-decoration: underline; }
.btn-cta { display: inline-block; background: var(--naranja); color: #fff; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; padding: 14px 32px; border-radius: 999px; text-decoration: none; transition: all 0.3s ease; }
.btn-cta:hover { background: var(--naranja-hover); transform: translateY(-2px); }