/* ============================================
   DAMARIS CAI — Design Tokens (Manual de Marca)
   ============================================ */
:root {
  /* Paleta oficial */
  --honolulu: #076BB3;
  --honolulu-dark: #054E84;
  --honolulu-darker: #033456;
  --honolulu-50: #EAF3FB;
  --honolulu-100: #D5E7F6;
  --honolulu-200: #A8CDEB;

  --mint: #42B887;
  --mint-dark: #2E9C6E;
  --mint-50: #ECF8F2;
  --mint-100: #D4F0E2;

  --saffron: #95BE3C;
  --saffron-50: #F4F8E6;

  --charcoal: #333333;
  --charcoal-soft: #4A4A4A;
  --charcoal-muted: #6B6B6B;
  --charcoal-light: #9A9A9A;

  /* Neutrales cálidos */
  --cream: #FBF6EC;
  --cream-deep: #F5EDDC;
  --paper: #FFFCF6;
  --line: #E9E1CF;
  --line-soft: #F0E9D8;

  /* Tipografía */
  --font-display: "Amaranth", "Mulish", system-ui, sans-serif;
  --font-body: "DM Sans", "Mulish", system-ui, sans-serif;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-2xl: 44px;
  --r-pill: 999px;

  /* Sombras suaves */
  --shadow-sm: 0 1px 2px rgba(20, 30, 50, 0.04), 0 2px 6px rgba(20, 30, 50, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 30, 50, 0.06), 0 12px 32px rgba(20, 30, 50, 0.05);
  --shadow-lg: 0 12px 28px rgba(7, 107, 179, 0.10), 0 30px 60px rgba(7, 107, 179, 0.08);

  --container: 1200px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0;
  color: var(--charcoal);
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--honolulu); color: white; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

/* ============================================
   Tipografía utilitaria
   ============================================ */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint-dark);
}

.lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--charcoal-soft);
}

/* ============================================
   Botones
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.005em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
  border: 2px solid transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--honolulu);
  color: white;
  box-shadow: 0 6px 16px rgba(7, 107, 179, 0.25);
}
.btn-primary:hover { background: var(--honolulu-dark); box-shadow: 0 10px 22px rgba(7, 107, 179, 0.30); }
.btn-ghost {
  background: transparent;
  color: var(--honolulu);
  border-color: var(--honolulu);
}
.btn-ghost:hover { background: var(--honolulu-50); }
.btn-whatsapp {
  background: #1DA851;
  color: white;
  box-shadow: 0 6px 16px rgba(29, 168, 81, 0.25);
}
.btn-whatsapp:hover { background: #168F44; }
.btn-sm { padding: 11px 20px; font-size: 14px; }
.btn-lg { padding: 19px 36px; font-size: 17px; }

/* ============================================
   Badges / Chips
   ============================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--mint-50);
  color: var(--mint-dark);
  font-weight: 600;
  font-size: 13.5px;
}
.chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mint);
}

/* ============================================
   Sections
   ============================================ */
section { padding: 96px 0; position: relative; }
.sec-head { max-width: 720px; margin-bottom: 48px; }
.sec-head .eyebrow { margin-bottom: 16px; display: block; }
.sec-head h2 {
  font-size: clamp(34px, 4vw, 52px);
  margin-bottom: 18px;
}
.sec-head p { color: var(--charcoal-muted); font-size: 18px; }

/* ============================================
   Cards
   ============================================ */
.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--honolulu-200);
}
.card-flat { box-shadow: none; }

/* ============================================
   Animaciones de entrada
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

/* ============================================
   Misc helpers
   ============================================ */
.hr-soft { border: 0; height: 1px; background: var(--line); margin: 0; }

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes pulse-ring {
  0% { transform: scale(.95); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}