/* ============================================================
   VIMEDENT — Variables y estilos base
   Aquí puedes cambiar colores, tipografía y espaciados globales
   ============================================================ */

:root {
  /* Colores principales (extraídos del logo) */
  --navy:    #0f2a52;   /* Azul marino — títulos, navbar */
  --blue:    #1e5fa8;   /* Azul medio — botones, acentos */
  --mid:     #3b82c4;   /* Azul claro — degradados */
  --aqua:    #6bbfd4;   /* Turquesa — badges, highlights */
  --light:   #d6eef5;   /* Azul muy claro — fondos de íconos */
  --white:   #ffffff;
  --gray:    #f4f8fb;   /* Fondo de secciones alternas */
  --text:    #1a2535;   /* Color de texto principal */
  --muted:   #6b7f99;   /* Texto secundario / descripción */
  --border:  #dceaf4;   /* Bordes de tarjetas */

  /* Tipografía */
  --font-display: 'Cormorant Garamond', serif;  /* Títulos grandes */
  --font-body:    'DM Sans', sans-serif;         /* Texto general */

  /* Espaciados de secciones */
  --section-padding: 6rem 8vw;
  --section-padding-mobile: 4rem 6vw;
}

/* ── Reset base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

/* ── Tipografía base ── */
h1, h2, h3 {
  font-family: var(--font-display);
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

/* ── Clases de sección reutilizables ── */
.section-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: .8rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.section-sub {
  font-size: .95rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.8;
  max-width: 540px;
}

/* ── Botones globales ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: var(--white);
  padding: .85rem 2rem;
  border-radius: 100px;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 6px 24px rgba(30,95,168,.28);
}
.btn-primary:hover {
  background: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(30,95,168,.36);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--border);
  color: var(--navy);
  padding: .85rem 2rem;
  border-radius: 100px;
  font-size: .92rem;
  font-weight: 400;
  text-decoration: none;
  transition: border-color .2s, color .2s, transform .15s;
}
.btn-secondary:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
}

/* ── Animaciones ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(37,211,102,.4); }
  50%       { box-shadow: 0 6px 24px rgba(37,211,102,.4), 0 0 0 12px rgba(37,211,102,.12); }
}

/* ── Scroll reveal (activado desde main.js) ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}