/* ══════════════════════════════════════════════════════
   base.css — Reset, tipografía global, utilidades
   ══════════════════════════════════════════════════════ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 17px;      /* subido de 16px — todo el sitio escala proporcionalmente */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg-off);
  color: var(--color-gray-dark);
  overflow-x: hidden;
  line-height: 1.6;
}

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

a { color: inherit; }
button { cursor: pointer; font-family: inherit; }
ul, ol { list-style: none; }

/* ── Contenedor ────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

.container--center {
  text-align: center;
  max-width: 700px;
}

/* ── Secciones ─────────────────────────────────────── */
section {
  padding: var(--space-2xl) var(--space-sm);
}

section.section--dark {
  background: var(--color-green-dark);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

section.section--dark::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,134,83,0.25) 0%, transparent 65%);
  pointer-events: none;
}

section.section--gray {
  background: var(--color-bg);
}

section.section--cta {
  background: var(--color-green-dark);
  padding: 5rem var(--space-sm);
  color: var(--color-white);
}

/* ── Etiqueta de sección ───────────────────────────── */
.section-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-green-bright);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-sm);
}

.section-label::before {
  content: '';
  width: 40px; height: 2px;
  background: var(--color-green-bright);
  flex-shrink: 0;
}

.section--dark .section-label,
.section--cta .section-label {
  color: var(--color-gold);
  justify-content: flex-start;
}
.section--dark .section-label::before,
.section--cta .section-label::before {
  background: var(--color-gold);
}

.section--cta .section-label {
  justify-content: center;
}

/* ── Títulos de sección ────────────────────────────── */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-gray-dark);
  margin-bottom: var(--space-md);
}

.section--dark .section-title,
.section--cta .section-title {
  color: var(--color-white);
}

.section--cta .section-title em {
  font-style: italic;
  color: var(--color-gold);
}

/* ── Cuerpo de sección ─────────────────────────────── */
.section-body {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-gray-mid);
  max-width: 580px;
}

.section--dark .section-body,
.section--cta .section-body {
  color: rgba(255,255,255,0.65);
}

.section-body--centered {
  margin: 0 auto var(--space-lg);
  max-width: 560px;
}

/* ── Header de sección (título + bajada lado a lado) ─ */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3.5rem;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* ── Botones generales ─────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 1rem 2rem;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  transition: all var(--transition-normal);
}

.btn--whatsapp {
  background: #25D366;
  color: var(--color-white);
  border-color: #25D366;
}
.btn--whatsapp:hover { opacity: 0.88; }

.btn--outline {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,0.4);
}
.btn--outline:hover { border-color: var(--color-white); }

.cta-buttons {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Divider hero→secciones ────────────────────────── */
.fade-divider {
  height: auto;
  background: linear-gradient(to bottom, var(--color-green-dark), var(--color-bg-off));
  pointer-events: none;
}

/* ── Animación reveal on scroll ────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 600px) {
  section { padding: 4rem var(--space-md); }
}