/* ===== MOTHER'S DAY CAMPAIGN — Margaret Beauty Care ===== */
/* Self-contained. Does NOT affect main site CSS. */

:root {
  --gold: #c9a84c;
  --gold-light: #e8d48b;
  --purple: #7b2d8e;
  --purple-soft: #9b59b6;
  --purple-bg: #f6f0fa;
  --black: #1a1a1a;
  --dark: #2d1b3e;
  --white: #ffffff;
  --gray: #888;
  --light-bg: #faf8f6;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Lato', sans-serif;
  --radius: 16px;
  --shadow: 0 8px 32px rgba(0,0,0,0.10);
  --transition: 0.3s ease;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family: var(--font-body); color:#444; line-height:1.7; background:var(--white); overflow-x:hidden; }
a { text-decoration:none; color:inherit; transition:var(--transition); }
img { max-width:100%; height:auto; display:block; }

/* ===== HERO ===== */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--white); padding:60px 20px 40px; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background:url('images/hero-bg.png') center/cover no-repeat; z-index:0; }
.hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,10,30,0.75) 0%, rgba(20,10,30,0.50) 40%, rgba(20,10,30,0.80) 100%); }
.hero-inner { position:relative; z-index:2; max-width:720px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.hero-badge { display:inline-block; font-size:0.68rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gold-light); border:1px solid rgba(201,168,76,0.4); padding:6px 20px; border-radius:30px; }
.hero h1 { font-family:var(--font-heading); font-size:clamp(2.2rem,5vw,3.6rem); font-weight:400; line-height:1.15; letter-spacing:-0.02em; }
.hero h1 span { display:block; font-size:clamp(1.6rem,3.5vw,2.4rem); color:var(--gold-light); font-weight:600; margin-top:8px; }
.hero-subtitle { font-size:1.1rem; opacity:0.9; font-weight:300; max-width:520px; }

/* Hero Pricing Chips — now clickable */
.hero-prices { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:8px 0; }
.hero-price-chip { background:rgba(255,255,255,0.1); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.18); border-radius:14px; padding:14px 22px; text-align:center; min-width:105px; transition:var(--transition); cursor:pointer; }
.hero-price-chip:hover { background:rgba(255,255,255,0.22); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.2); }
.hero-price-chip.popular { border-color:var(--purple-soft); background:rgba(123,45,142,0.18); transform:scale(1.06); }
.hero-price-chip.popular:hover { transform:scale(1.06) translateY(-3px); }
.hero-price-chip .old { text-decoration:line-through; opacity:0.5; font-size:0.85rem; display:block; }
.hero-price-chip .new { font-size:1.6rem; font-weight:700; color:var(--gold-light); display:block; margin:2px 0; }
.hero-price-chip .tag { font-size:0.6rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--gold-light); display:block; }
.hero-urgency { font-size:0.85rem; opacity:0.95; letter-spacing:0.5px; font-weight:400; background:rgba(123,45,142,0.2); padding:8px 20px; border-radius:30px; border:1px solid rgba(123,45,142,0.3); }
.hero-cta-group { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:4px; }

/* ===== BUTTONS ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 38px; font-size:0.9rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-radius:50px; border:none; cursor:pointer; transition:var(--transition); min-height:54px; min-width:44px; }
.btn-gold { background:linear-gradient(135deg,var(--purple),var(--purple-soft)); color:var(--white); box-shadow:0 4px 20px rgba(123,45,142,0.4); }
.btn-gold:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(123,45,142,0.5); }
.btn-gold:active { transform:translateY(-1px); }
.btn-whatsapp { background:#25D366; color:var(--white); box-shadow:0 4px 16px rgba(37,211,102,0.3); }
.btn-whatsapp:hover { transform:translateY(-3px); background:#20bd5a; }
.btn-outline { background:transparent; border:2px solid rgba(255,255,255,0.6); color:var(--white); }
.btn-outline:hover { background:var(--white); color:var(--black); border-color:var(--white); }
.btn-purple { background:linear-gradient(135deg,var(--purple),var(--purple-soft)); color:var(--white); box-shadow:0 4px 18px rgba(123,45,142,0.35); }
.btn-purple:hover { transform:translateY(-3px); box-shadow:0 8px 25px rgba(123,45,142,0.45); }
.btn-lg { padding:20px 48px; font-size:1rem; }

/* ===== SECTIONS ===== */
.section { padding:80px 20px; }
.section-inner { max-width:1000px; margin:0 auto; }
.section-badge-text { display:block; text-align:center; font-size:0.7rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--purple); margin-bottom:12px; }
.section-title { font-family:var(--font-heading); font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:400; color:var(--dark); text-align:center; margin-bottom:12px; line-height:1.2; }
.section-subtitle { text-align:center; color:var(--gray); font-size:1rem; margin-bottom:40px; max-width:550px; margin-left:auto; margin-right:auto; }

/* ===== MID-CTA ===== */
.mid-cta { background:var(--purple-bg); padding:50px 20px; }
.mid-cta-text { font-family:var(--font-heading); font-size:1.3rem; color:var(--dark); margin-bottom:20px; font-weight:400; }

/* ===== PRICING CARDS ===== */
.pricing-section { background:var(--light-bg); }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.pricing-card { background:var(--white); border-radius:var(--radius); padding:32px 22px; text-align:center; box-shadow:0 4px 24px rgba(0,0,0,0.07); border:2px solid transparent; transition:all 0.35s ease; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; cursor:pointer; }
.pricing-card:hover { transform:translateY(-8px); box-shadow:0 12px 36px rgba(0,0,0,0.12); }
.pricing-card.featured { border-color:var(--purple-soft); transform:scale(1.05); box-shadow:0 12px 40px rgba(123,45,142,0.15); }
.pricing-card.featured:hover { transform:scale(1.05) translateY(-8px); }
.pricing-card .ribbon { position:absolute; top:18px; right:-30px; background:linear-gradient(135deg,var(--purple),var(--purple-soft)); color:var(--white); font-size:0.6rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:5px 40px; transform:rotate(45deg); }
.pricing-card .card-img { width:100%; border-radius:10px; margin-bottom:6px; }
.pricing-card .old-price { text-decoration:line-through; color:#aaa; font-size:1.1rem; }
.pricing-card .new-price { font-size:2.6rem; font-weight:700; color:var(--dark); }
.pricing-card .save-badge { display:inline-block; background:rgba(201,168,76,0.15); color:var(--gold); font-size:0.75rem; font-weight:700; padding:5px 16px; border-radius:20px; }

/* ===== EMOTIONAL ===== */
.emotional-section { background:linear-gradient(135deg,var(--purple-bg) 0%,#f0e6f6 100%); }
.emotional-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.emotional-text { text-align:left; }
.emotional-text h2 { font-family:var(--font-heading); font-size:clamp(1.8rem,3vw,2.4rem); color:var(--dark); margin-bottom:12px; font-weight:400; }
.emotional-lead { font-size:1.05rem; color:#666; margin-bottom:24px; line-height:1.7; font-style:italic; }
.emotional-points { list-style:none; display:flex; flex-direction:column; gap:16px; margin-bottom:28px; }
.emotional-points li { display:flex; align-items:center; gap:12px; font-size:1.05rem; color:#555; }
.emotional-points li .icon { width:42px; height:42px; background:rgba(123,45,142,0.1); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.emotional-cta { margin-top:4px; }
.emotional-img { border-radius:var(--radius); box-shadow:var(--shadow); }

/* ===== COUNTDOWN ===== */
.urgency-section { background:var(--dark); color:var(--white); text-align:center; }
.urgency-section .section-badge-text { color:var(--gold-light); }
.urgency-section .section-title { color:var(--white); }
.countdown { display:flex; gap:16px; justify-content:center; margin:30px 0 20px; flex-wrap:wrap; }
.countdown-item { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); border-radius:14px; padding:22px 18px; min-width:85px; text-align:center; }
.countdown-item .num { font-size:2.6rem; font-weight:700; color:var(--gold-light); display:block; line-height:1; }
.countdown-item .label { font-size:0.7rem; text-transform:uppercase; letter-spacing:1.5px; opacity:0.6; margin-top:6px; display:block; }
.urgency-note { font-size:0.85rem; opacity:0.6; margin-top:10px; }

/* ===== CTA / ORDER ===== */
.cta-section { background:var(--light-bg); }
.cta-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.cta-whatsapp { background:var(--white); border-radius:var(--radius); padding:40px 30px; text-align:center; box-shadow:0 4px 24px rgba(0,0,0,0.07); }
.cta-whatsapp h3 { font-family:var(--font-heading); font-size:1.6rem; color:var(--dark); margin-bottom:12px; }
.cta-whatsapp p { color:var(--gray); margin-bottom:20px; font-size:0.95rem; }
.order-form { background:var(--white); border-radius:var(--radius); padding:40px 30px; box-shadow:0 4px 24px rgba(0,0,0,0.07); }
.order-form h3 { font-family:var(--font-heading); font-size:1.6rem; color:var(--dark); margin-bottom:20px; text-align:center; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:0.82rem; font-weight:600; letter-spacing:0.5px; color:var(--dark); margin-bottom:6px; }
.form-group input, .form-group select { width:100%; padding:15px 16px; border:1px solid #ddd; border-radius:12px; font-size:1rem; font-family:var(--font-body); transition:var(--transition); background:#fafafa; }
.form-group input:focus, .form-group select:focus { outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(123,45,142,0.1); }
.form-submit { width:100%; margin-top:8px; }

/* ===== FAQ ===== */
.faq-section { background:var(--white); }
.faq-list { max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { background:var(--light-bg); border-radius:14px; border:1px solid #eee; overflow:hidden; transition:var(--transition); }
.faq-item[open] { border-color:rgba(123,45,142,0.2); box-shadow:0 4px 16px rgba(123,45,142,0.06); }
.faq-item summary { padding:18px 24px; font-size:1rem; font-weight:600; color:var(--dark); cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'＋'; font-size:1.2rem; color:var(--purple); transition:var(--transition); flex-shrink:0; }
.faq-item[open] summary::after { content:'−'; }
.faq-item p { padding:0 24px 18px; color:#666; font-size:0.95rem; line-height:1.7; }

/* ===== TRUST ===== */
.trust-section { text-align:center; background:var(--light-bg); }
.trust-logo { height:50px; margin:0 auto 20px; }
.trust-features { display:flex; gap:30px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.trust-item { display:flex; align-items:center; gap:8px; font-size:0.95rem; color:#555; font-weight:500; }

/* ===== FINAL CTA ===== */
.final-cta-section { background:linear-gradient(135deg,var(--purple) 0%,var(--dark) 100%); padding:80px 20px; }

/* ===== TERMS ===== */
.terms-section { background:var(--dark); color:rgba(255,255,255,0.6); padding:40px 20px; text-align:center; }
.terms-section h4 { font-family:var(--font-heading); color:var(--white); font-size:1.1rem; margin-bottom:16px; font-weight:400; }
.terms-list { list-style:none; display:flex; gap:30px; justify-content:center; flex-wrap:wrap; font-size:0.85rem; }
.terms-list li::before { content:'· '; color:var(--gold); font-weight:700; }

/* ===== STICKY WHATSAPP (desktop) ===== */
.sticky-wa { position:fixed; bottom:24px; right:24px; z-index:9998; width:60px; height:60px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,0.4); transition:var(--transition); animation:pulse-wa 2s infinite; }
.sticky-wa:hover { transform:scale(1.1); }
.sticky-wa svg { width:30px; height:30px; fill:var(--white); }

/* ===== STICKY CTA BAR (mobile) ===== */
.sticky-cta-bar { position:fixed; bottom:0; left:0; right:0; z-index:9999; background:var(--dark); padding:12px 16px; transform:translateY(100%); transition:transform 0.4s ease; box-shadow:0 -4px 20px rgba(0,0,0,0.2); }
.sticky-cta-bar.visible { transform:translateY(0); }
.sticky-cta-btn { display:block; width:100%; padding:16px; text-align:center; background:linear-gradient(135deg,var(--purple),var(--purple-soft)); color:var(--white); font-size:0.9rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-radius:12px; }

@keyframes pulse-wa {
  0%,100% { box-shadow:0 4px 20px rgba(37,211,102,0.4); }
  50% { box-shadow:0 4px 30px rgba(37,211,102,0.6), 0 0 0 10px rgba(37,211,102,0.1); }
}

/* ===== SCROLL FADE-IN ===== */
.fade-in { opacity:0; transform:translateY(30px); transition:opacity 0.7s ease, transform 0.7s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns:1fr; max-width:360px; margin:0 auto; }
  .pricing-card.featured { transform:none; }
  .pricing-card.featured:hover { transform:translateY(-8px); }
  .emotional-grid { grid-template-columns:1fr; }
  .emotional-text { text-align:center; }
  .cta-grid { grid-template-columns:1fr; }
  .section { padding:60px 20px; }
  .hero { min-height:100svh; padding:50px 16px 30px; }
  .hero-price-chip .new { font-size:1.3rem; }
  .hero-price-chip { padding:12px 16px; min-width:90px; }
  .hero-price-chip.popular { transform:scale(1.04); }
  .btn { padding:15px 28px; font-size:0.85rem; width:100%; }
  .btn-lg { padding:18px 36px; }
  .sticky-wa { display:none; }
  .sticky-cta-bar { display:block; }
  .countdown-item { min-width:68px; padding:16px 12px; }
  .countdown-item .num { font-size:2rem; }
  .terms-list { flex-direction:column; gap:10px; }
  .trust-features { flex-direction:column; align-items:center; gap:14px; }
  .mid-cta { padding:40px 20px; }
  body { padding-bottom:70px; }
}

@media (min-width: 769px) {
  .sticky-cta-bar { display:none !important; }
}

@media (max-width: 380px) {
  .hero-prices { gap:8px; }
  .hero-price-chip { min-width:80px; padding:10px 12px; }
}