/* ═══════════════════════════════════════════════════════
   CeroManual — Shared Design System
   Applies to: ceromanualhtml, politica-de-privacidad.html
   ═══════════════════════════════════════════════════════ */

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

/* ── DESIGN TOKENS ── */
:root {
  --bg:        #FAF9F6;
  --surface:   #FFFFFF;
  --surface-2: #F4F2EC;
  --teal:      #0D9488;
  --teal-lt:   rgba(13,148,136,0.07);
  --teal-bd:   rgba(13,148,136,0.2);
  --gold:      #A87828;
  --gold-lt:   rgba(168,120,40,0.07);
  --gold-bd:   rgba(168,120,40,0.22);
  --text:      #1A1917;
  --muted:     #6E6860;
  --subtle:    #B5AFA8;
  --border:    rgba(0,0,0,0.08);
  --shadow:    0 8px 48px rgba(0,0,0,0.07);
}

/* ── BASE ── */
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 22px 52px;
  display: flex; align-items: center; justify-content: space-between;
  transition: all .4s ease;
}
nav.scrolled {
  background: rgba(250,249,246,.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
  padding: 15px 52px;
}

/* ── LOGO ── */
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-sq {
  width: 32px; height: 32px; border-radius: 7px; background: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 12px; color: #fff;
}
.logo-name { font-weight: 600; font-size: 16.5px; color: var(--text); }

/* ── NAV LINKS ── */
.nav-ul { display: flex; align-items: center; gap: 34px; list-style: none; }
.nav-ul a { text-decoration: none; color: var(--muted); font-size: 14px; transition: color .2s; }
.nav-ul a:hover { color: var(--text); }
.nav-pill {
  background: var(--teal) !important; color: #fff !important;
  padding: 9px 20px; border-radius: 100px; font-weight: 500 !important;
  transition: all .25s !important;
}
.nav-pill:hover { background: #0b7a70 !important; box-shadow: 0 4px 22px rgba(13,148,136,.28) !important; }

/* ── BUTTONS ── */
.btn-teal {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--teal); color: #fff; text-decoration: none;
  padding: 13px 26px; border-radius: 100px; font-weight: 500; font-size: 15px;
  transition: all .3s ease;
}
.btn-teal:hover { background: #0b7a70; box-shadow: 0 8px 30px rgba(13,148,136,.25); transform: translateY(-1px); }
.btn-teal svg { transition: transform .2s; }
.btn-teal:hover svg { transform: translateX(3px); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: var(--text); text-decoration: none;
  padding: 12px 26px; border-radius: 100px; font-weight: 400; font-size: 15px;
  border: 1.5px solid var(--border); transition: all .2s;
}
.btn-outline:hover { border-color: var(--teal); color: var(--teal); }

.btn-white {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: var(--teal); text-decoration: none;
  padding: 13px 26px; border-radius: 100px; font-weight: 600; font-size: 15px;
  transition: all .25s;
}
.btn-white:hover { box-shadow: 0 8px 28px rgba(0,0,0,.15); transform: translateY(-1px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: #fff; text-decoration: none;
  padding: 12px 26px; border-radius: 100px; font-weight: 400; font-size: 15px;
  border: 1.5px solid rgba(255,255,255,.38); transition: all .2s;
}
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ── FOOTER ── */
footer { border-top: 1px solid var(--border); padding: 50px 52px; }
.foot-in {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.foot-copy { font-size: 13px; color: var(--subtle); font-weight: 300; }
.foot-links { display: flex; gap: 26px; }
.foot-links a, .foot-link {
  font-size: 13px; color: var(--muted); text-decoration: none; transition: color .2s;
}
.foot-links a:hover, .foot-link:hover { color: var(--teal); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  nav { padding: 18px 28px; }
  nav.scrolled { padding: 14px 28px; }
  .nav-ul { display: none; }
  footer { padding: 44px 28px; }
  .foot-in { flex-direction: column; text-align: center; }
}
@media (max-width: 600px) {
  nav { padding: 16px 22px; }
}