/* =============================================
   LITTLE MILESTONES — Global Stylesheet v2
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --primary:    #7B3F00;
  --primary-lt: #A0521A;
  --secondary:  #C8860A;
  --secondary-lt:#E5A020;
  --accent:     #4A7C59;
  --accent2:    #C0392B;
  --bg-light:   #FDF6EE;
  --bg-cream:   #FFF8F0;
  --bg-dark:    #3B1E08;
  --logo-bg:    #FEFDF5;   /* exact logo background */
  --text-dark:  #2C1A0E;
  --text-muted: #7A6352;
  --white:      #ffffff;
  --radius:     14px;
  --radius-lg:  24px;
  --shadow-sm:  0 2px 12px rgba(60,30,8,0.08);
  --shadow:     0 4px 28px rgba(60,30,8,0.12);
  --shadow-lg:  0 12px 48px rgba(60,30,8,0.18);
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 0.6s cubic-bezier(0.4,0,0.2,1);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  background: var(--bg-light);
  color: var(--text-dark);
  line-height: 1.7;
  overflow-x: hidden;
}
h1,h2,h3,h4 { font-family:'Playfair Display',Georgia,serif; line-height:1.2; }
h1 { font-size: clamp(2.2rem,5vw,3.8rem); }
h2 { font-size: clamp(1.7rem,3.5vw,2.6rem); }
h3 { font-size: clamp(1.2rem,2.5vw,1.65rem); }
h4 { font-size: 1.05rem; }
p  { font-size:1rem; color:var(--text-muted); line-height:1.8; }
a  { text-decoration:none; color:inherit; transition:color var(--transition); }
ul { list-style:none; }
img { max-width:100%; display:block; object-fit:cover; }

/* ── LAYOUT ── */
.container   { max-width:1200px; margin:0 auto; padding:0 24px; }
.section     { padding:90px 0; }
.section-alt { background:var(--bg-cream); }
.text-center { text-align:center; }

/* ── SECTION LABELS ── */
.section-tag {
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.72rem; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--secondary);
  background:linear-gradient(135deg,#FFF0D6,#FFE4A8);
  padding:5px 16px; border-radius:30px; margin-bottom:14px;
  border:1px solid rgba(200,134,10,0.2);
}
.section-title { color:var(--primary); margin-bottom:16px; }
.section-sub   { max-width:640px; margin:0 auto 52px; color:var(--text-muted); font-size:1.05rem; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px; border-radius:50px;
  font-weight:700; font-size:0.92rem; letter-spacing:0.3px;
  cursor:pointer; border:none;
  transition:all var(--transition);
  position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0.15);
  opacity:0; transition:opacity var(--transition);
}
.btn:hover::after { opacity:1; }

.btn-primary {
  background: linear-gradient(135deg, var(--secondary-lt) 0%, var(--secondary) 50%, #A0660A 100%);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(200,134,10,0.35);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--primary-lt) 50%, var(--primary) 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(123,63,0,0.4);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(4px);
}
.btn-outline:hover {
  background: var(--white);
  color: var(--primary);
  border-color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.btn-dark {
  background: linear-gradient(135deg, var(--primary-lt), var(--primary));
  color: var(--white);
  box-shadow: 0 4px 16px rgba(123,63,0,0.3);
}
.btn-dark:hover {
  background: linear-gradient(135deg, var(--primary), var(--bg-dark));
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(60,30,8,0.4);
}

.btn-green {
  background: linear-gradient(135deg, #27AE60, #1E8449);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(39,174,96,0.35);
}
.btn-green:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(39,174,96,0.45);
}

/* ── NAVBAR ── */
.navbar {
  position:fixed; top:0; width:100%; z-index:1000;
  background: var(--logo-bg);
  border-bottom:2px solid rgba(123,63,0,0.08);
  transition: box-shadow var(--transition), background var(--transition);
}
.navbar.scrolled {
  box-shadow: 0 4px 24px rgba(60,30,8,0.14);
  background: rgba(254,253,245,0.98);
  backdrop-filter: blur(12px);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 24px; max-width:1280px; margin:0 auto;
}

/* Logo image */
.nav-logo {
  display:flex; align-items:center; text-decoration:none;
  background: var(--logo-bg);
  border-radius: 10px;
  padding: 4px 8px;
}
.nav-logo img {
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
}

.nav-links { display:flex; align-items:center; gap:24px; }
.nav-links a {
  font-size:0.88rem; font-weight:600; color:var(--text-dark);
  position:relative; padding-bottom:4px; letter-spacing:0.2px;
  white-space: nowrap;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:0; height:2.5px; background:var(--secondary);
  border-radius:2px; transition:width var(--transition);
}
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a:hover, .nav-links a.active { color:var(--primary); }

.nav-cta {
  padding:10px 24px !important;
  font-size:0.82rem !important;
  background: linear-gradient(135deg, var(--secondary-lt), var(--secondary)) !important;
  color: var(--white) !important;
  border-radius: 50px;
  font-weight: 700 !important;
  box-shadow: 0 3px 12px rgba(200,134,10,0.3);
  transition: all var(--transition) !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  background: linear-gradient(135deg, var(--secondary), var(--primary-lt)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(123,63,0,0.35) !important;
  color: var(--white) !important;
}

.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:6px; border:none; background:none;
}
.hamburger span {
  display:block; width:25px; height:2.5px;
  background:var(--primary); border-radius:2px;
  transition:all var(--transition);
}
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ── WHATSAPP FLOATING ── */
.whatsapp-float {
  position:fixed; bottom:28px; right:28px; z-index:999;
  width:60px; height:60px;
  background: linear-gradient(135deg,#25D366,#128C7E);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 24px rgba(37,211,102,0.5);
  animation: waPulse 2.5s infinite;
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: scale(1.12) translateY(-4px);
  box-shadow: 0 12px 32px rgba(37,211,102,0.6);
}
.whatsapp-float svg {
  width:30px; height:30px; fill:#fff;
}
@keyframes waPulse {
  0%,100% { box-shadow:0 6px 24px rgba(37,211,102,0.5); }
  50%      { box-shadow:0 6px 36px rgba(37,211,102,0.75), 0 0 0 10px rgba(37,211,102,0.1); }
}

/* ── FOOTER ── */
.footer { background:var(--bg-dark); color:#D4B89A; padding:70px 0 0; }
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1.6fr;
  gap:44px; padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-brand .footer-logo img {
  height:48px; width:auto; margin-bottom:14px;
  background:var(--logo-bg); border-radius:8px; padding:4px 8px;
}
.footer-brand .tagline {
  font-style:italic; font-size:0.9rem; color:var(--secondary); margin-bottom:16px;
}
.footer-brand p { font-size:0.88rem; color:#C4A882; line-height:1.9; }
.footer h4 {
  color:var(--white); margin-bottom:18px;
  font-size:0.82rem; text-transform:uppercase; letter-spacing:1.5px;
  font-family:'Inter',sans-serif;
}
.footer ul li { margin-bottom:10px; }
.footer ul li a {
  color:#C4A882; font-size:0.88rem;
  display:flex; align-items:center; gap:6px;
  transition:all var(--transition);
}
.footer ul li a::before { content:'›'; color:var(--secondary); font-size:1rem; }
.footer ul li a:hover { color:var(--secondary); padding-left:4px; }
.footer-contact li { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:0.88rem; }
.footer-contact .icon { font-size:1.1rem; margin-top:1px; flex-shrink:0; }
.footer-contact a { color:#C4A882; }
.footer-contact a:hover { color:var(--secondary); }
.footer-bottom {
  padding:22px 0; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:12px;
}
/* ── NAV INSTAGRAM BUTTON ── */
.nav-ig-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  transition: all var(--transition);
  flex-shrink: 0;
}
.nav-ig-btn:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 6px 20px rgba(220,39,67,0.4);
  color: #fff;
}
.nav-ig-btn svg { display: block; }

/* ── FOOTER SOCIAL BUTTONS ── */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 30px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition);
  color: #fff;
}
.social-btn span { line-height: 1; }
.social-ig {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  box-shadow: 0 3px 12px rgba(188,24,136,0.35);
}
.social-ig:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(188,24,136,0.5);
  color: #fff;
}
.social-wa {
  background: linear-gradient(135deg, #25D366, #128C7E);
  box-shadow: 0 3px 12px rgba(37,211,102,0.35);
}
.social-wa:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(37,211,102,0.5);
  color: #fff;
}

/* ── MINI STATS BAR (inner pages) ── */
.mini-stats-bar {
  background: var(--white);
  padding: 0;
  box-shadow: 0 4px 20px rgba(60,30,8,0.08);
  position: relative; z-index: 2;
}
.mini-stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
}
.mini-stat {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 24px 16px; text-align: center;
  border-right: 1px solid rgba(123,63,0,0.08);
  transition: background var(--transition);
}
.mini-stat:last-child { border-right: none; }
.mini-stat:hover { background: var(--bg-cream); }
.mini-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, var(--primary-lt), var(--primary));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.mini-stat-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }

.footer-bottom p { font-size:0.8rem; color:#8A6D55; }
.footer-dev-link {
  color: var(--secondary);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dotted rgba(200,134,10,0.5);
  transition: color var(--transition), border-color var(--transition);
}
.footer-dev-link:hover {
  color: var(--secondary-lt);
  border-bottom-color: var(--secondary-lt);
}

/* ── CARDS ── */
.card {
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:32px;
  transition:transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }

/* ── ICON BOX ── */
.icon-box {
  width:64px; height:64px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; margin-bottom:18px; flex-shrink:0;
}
.icon-box.brown  { background:linear-gradient(135deg,#F5E6D0,#F0D4B0); }
.icon-box.green  { background:linear-gradient(135deg,#DDF0E4,#C2E8CF); }
.icon-box.blue   { background:linear-gradient(135deg,#D6EAF8,#B8D8F0); }
.icon-box.red    { background:linear-gradient(135deg,#FAD7D3,#F5B8B2); }
.icon-box.purple { background:linear-gradient(135deg,#E8D5F5,#D4B8EC); }
.icon-box.gold   { background:linear-gradient(135deg,#FEF3C7,#FDE58A); }

/* ── CHECKLIST ── */
.checklist li {
  position:relative; padding-left:28px;
  margin-bottom:10px; font-size:0.95rem; color:var(--text-muted);
}
.checklist li::before {
  content:'✓'; position:absolute; left:0;
  color:var(--accent); font-weight:700; font-size:1rem;
}

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  position:relative; overflow:hidden;
  padding:140px 0 90px; text-align:center; color:var(--white);
}
.page-hero-bg {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(135deg,var(--bg-dark) 0%,var(--primary) 100%);
}
.page-hero-bg img {
  width:100%; height:100%; object-fit:cover; opacity:0.18;
}
.page-hero .container { position:relative; z-index:1; }
.page-hero .breadcrumb {
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:0.83rem; color:rgba(255,255,255,0.55); margin-bottom:18px;
}
.page-hero .breadcrumb a { color:var(--secondary); font-weight:600; }
.page-hero .breadcrumb a:hover { color:var(--secondary-lt); }
.page-hero .breadcrumb .sep { opacity:0.4; }
.page-hero h1 { color:var(--white); margin-bottom:18px; text-shadow:0 2px 16px rgba(0,0,0,0.3); }
.page-hero p  { color:rgba(255,255,255,0.78); max-width:580px; margin:0 auto; font-size:1.1rem; }

/* ── SCROLL REVEAL ── */
[data-reveal] {
  opacity:0; transform:translateY(36px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].revealed { opacity:1; transform:translateY(0); }
[data-reveal][data-delay="1"] { transition-delay:0.1s; }
[data-reveal][data-delay="2"] { transition-delay:0.2s; }
[data-reveal][data-delay="3"] { transition-delay:0.3s; }
[data-reveal][data-delay="4"] { transition-delay:0.4s; }

/* ── IMAGE UTILS ── */
.img-cover { width:100%; height:100%; object-fit:cover; }
.img-rounded { border-radius:var(--radius-lg); }

/* ── RESPONSIVE ── */
@media (max-width:1200px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .nav-links.open {
    display:flex; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    background:var(--logo-bg); padding:20px 24px; gap:16px;
    border-bottom:2px solid rgba(123,63,0,0.1);
    box-shadow:0 12px 32px rgba(60,30,8,0.12);
    animation: slideDown 0.3s ease;
  }
  .nav-links.open .nav-cta { width:fit-content; }
  @keyframes slideDown {
    from { opacity:0; transform:translateY(-10px); }
    to   { opacity:1; transform:translateY(0); }
  }
}
@media (max-width:768px) {
  .section { padding:64px 0; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .whatsapp-float { bottom:20px; right:20px; width:52px; height:52px; }
  .whatsapp-float svg { width:26px; height:26px; }
  .mini-stats-grid { grid-template-columns:repeat(2,1fr); }
  .mini-stat { border-bottom:1px solid rgba(123,63,0,0.08); }
  .mini-stat:nth-child(2n) { border-right:none; }
}
@media (max-width:480px) {
  .container { padding:0 16px; }
  h1 { font-size:2rem; }
  .mini-stats-grid { grid-template-columns:repeat(2,1fr); }
}