/*
Theme Name: Esaude
Version: 1.0
Author: Tu Nombre
Description: Tema personalizado para E-saude.
*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap');

/* === VARIABLES === */
:root {
  --color-dark:       #18181b;
  --color-dark-2:     #27272a;
  --color-dark-3:     #3f3f46;
  --color-mid:        #717a72;
  --color-light:      #a1a1aa;
  --color-lighter:    #d4d4d8;
  --color-border:     #e4e4e7;
  --color-border-l:   #f4f4f5;
  --color-bg:         #ffffff;
  --color-bg-soft:    #fafafa;
  --color-bg-muted:   #f4f4f5;
  --color-whatsapp:   #14b850;
  --font-head:        'Outfit', sans-serif;
  --font-body:        'Inter', sans-serif;
  --radius-sm:        0.5rem;
  --radius-md:        0.75rem;
  --radius-lg:        1rem;
  --radius-xl:        1.5rem;
  --radius-2xl:       2rem;
  --radius-full:      999px;
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:        0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:        0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:        0 16px 48px rgba(0,0,0,0.14);
  --transition:       0.22s ease;
}

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-dark);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); line-height: 1.15; }

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* === LAYOUT === */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 768px)  { .container { padding: 0 2rem; } }
@media (min-width: 1280px) { .container { padding: 0 2.5rem; } }

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.8rem 1.75rem;
  border-radius: var(--radius-full);
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-dark-2);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.btn-primary:hover { background: var(--color-dark); transform: translateY(-2px); }
.btn-outline {
  background: #fff;
  color: var(--color-dark-3);
  border: 2px solid var(--color-border);
}
.btn-outline:hover { background: var(--color-bg-muted); border-color: var(--color-lighter); }
.btn svg { width: 1rem; height: 1rem; }

/* === SECTION LABEL === */
.section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-mid);
  margin-bottom: 0.75rem;
}