:root {
  /* Color — paleta de marca */
  --lasea-forest: #14503f; /* verde bosque oscuro — fondos, headings sobre claro */
  --lasea-forest-dark: #0d3a2d; /* variante más oscura — degradados, hover */
  --lasea-leaf: #9bc53d; /* verde lima — acentos, swooshes, checks */
  --lasea-leaf-dark: #7fa82c; /* lima hover/borde */
  --lasea-mint: #eaf3ec; /* tinte muy claro — fondos alternos */
  --lasea-paper: #fbfcfa; /* blanco cálido — fondo base */
  --lasea-ink: #1d2b24; /* texto principal, verde-negro */
  --lasea-ink-soft: #4d5c53; /* texto secundario */
  --lasea-line: #dbe6dd; /* bordes / divisores */
  --lasea-white: #ffffff;

  /* Tipografía */
  --font-display: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Work Sans", "Segoe UI", sans-serif;

  /* Escala tipográfica */
  --step-h1: clamp(2.1rem, 1.6rem + 2vw, 3.2rem);
  --step-h2: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
  --step-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --step-h4: 1.05rem;
  --step-body: 1rem;
  --step-small: 0.875rem;

  /* Espaciado */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 6rem;

  /* Forma */
  --radius-card: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 16px 32px -20px rgba(13, 58, 45, 0.35);
  --shadow-card-hover: 0 22px 40px -18px rgba(13, 58, 45, 0.45);

  /* Contenedor */
  --content-width: 1360px;
}

/* Utilidad universal: SOLO controla el ancho al que se limitan textos e
   imágenes en cualquier página — no toca tipografía, color ni espaciado
   vertical. Úsala en vez de repetir max-width/margin/padding en cada
   sección nueva. */
.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Compensa el navbar sticky al saltar a un ancla (#nosotros, #contacto...)
     para que la sección no quede tapada debajo de él. */
  scroll-padding-top: 88px;
  /* Red de seguridad: evita scroll horizontal si algún elemento se
     desborda por error (la causa típica de contenido "cortado" a un lado). */
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--lasea-ink);
  background: var(--lasea-paper);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}