/* ═══════════════════════════════════════════════════════════════   RTAFULL — Design System   Paleta: Navy #0A2E65 | Lime #22D31E | White #FFFFFF | Charcoal #1A1A1A | Mint #10B981   ═══════════════════════════════════════════════════════════════ */@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');/* ─── Reset & Base ─── */*, *::before, *::after {  margin: 0;  padding: 0;  box-sizing: border-box;}html {  scroll-behavior: smooth;  font-size: 16px;}body {  font-family: 'Inter', -apple-system, sans-serif;  color: #1A1A1A;  background: #FFFFFF;  line-height: 1.6;  -webkit-font-smoothing: antialiased;  overflow-x: hidden;}h1, h2, h3, h4, h5, h6 {  font-family: 'Outfit', sans-serif;  line-height: 1.15;  font-weight: 800;}a {  text-decoration: none;  color: inherit;}img {  max-width: 100%;  height: auto;  display: block;}ul, ol { list-style: none;}/* ─── Utility ─── */.container {  max-width: 1200px;  margin: 0 auto;  padding: 0 24px;}.sr-only {  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);}/* ─── Colors ─── */:root {  --navy: #0A2E65;  --navy-light: #0F3D85;  --navy-dark: #061D40;  --lime: #22D31E;  --lime-dark: #1AAF18;  --lime-glow: rgba(34, 211, 30, 0.25);  --mint: #10B981;  --white: #FFFFFF;  --charcoal: #1A1A1A;  --gray-50: #F9FAFB;  --gray-100: #F3F4F6;  --gray-200: #E5E7EB;  --gray-300: #D1D5DB;  --gray-400: #9CA3AF;  --gray-500: #6B7280;  --gray-600: #4B5563;  --gray-700: #374151;  --radius-sm: 8px;  --radius-md: 12px;  --radius-lg: 20px;  --radius-xl: 28px;  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);  --shadow-md: 0 4px 16px rgba(0,0,0,0.1);  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);  --shadow-lime: 0 4px 24px rgba(34, 211, 30, 0.35);  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);}/* ─── Buttons ─── */.btn {  display: inline-flex;  align-items: center;  justify-content: center;  gap: 10px;  font-family: 'Outfit', sans-serif;  font-weight: 700;  font-size: 1.05rem;  padding: 16px 36px;  border-radius: var(--radius-md);  border: none;  cursor: pointer;  transition: all var(--transition);  text-align: center;  white-space: nowrap;  position: relative;  overflow: hidden;}.btn-primary {  background: var(--lime);  color: var(--charcoal);  box-shadow: var(--shadow-lime);  font-size: 1.15rem;  padding: 18px 44px;}.btn-primary:hover {  background: var(--lime-dark);  transform: translateY(-2px);  box-shadow: 0 8px 32px rgba(34, 211, 30, 0.45);}.btn-primary:active {  transform: translateY(0);}.btn-outline {  background: transparent;  color: var(--white);  border: 2px solid rgba(255,255,255,0.3);}.btn-outline:hover {  border-color: var(--lime);  color: var(--lime);}.btn-white {  background: var(--white);  color: var(--navy);  font-weight: 700;}.btn-white:hover {  background: var(--gray-100);  transform: translateY(-2px);}.btn-wa {  background: #25D366;  color: var(--white);  font-size: 1.1rem;  padding: 18px 40px;}.btn-wa:hover {  background: #1DA851;  transform: translateY(-2px);}.btn-sm {  padding: 12px 24px;  font-size: 0.95rem;}/* ─── Header / Nav ─── */.header {  position: fixed;  top: 0;  left: 0;  right: 0;  z-index: 1000;  background: rgba(10, 46, 101, 0.95);  backdrop-filter: blur(12px);  border-bottom: 1px solid rgba(255,255,255,0.08);  transition: all var(--transition);}.header.scrolled {  background: rgba(10, 46, 101, 0.98);  box-shadow: 0 4px 20px rgba(0,0,0,0.2);}.nav {  display: flex;  align-items: center;  justify-content: space-between;  height: 72px;  max-width: 1200px;  margin: 0 auto;  padding: 0 24px;}.nav-logo img {  height: 44px;  width: auto;  filter: brightness(0) invert(1);}.nav-links {  display: flex;  gap: 32px;  align-items: center;}.nav-links a {  color: rgba(255,255,255,0.8);  font-weight: 500;  font-size: 0.95rem;  transition: color var(--transition);}.nav-links a:hover {  color: var(--lime);}.nav-cta {  padding: 10px 22px;  font-size: 0.9rem;}.mobile-toggle {  display: none;  background: none;  border: none;  cursor: pointer;  padding: 8px;}.mobile-toggle span {  display: block;  width: 24px;  height: 2px;  background: var(--white);  margin: 5px 0;  transition: all var(--transition);  border-radius: 2px;}/* ─── HERO ─── */.hero {  background: var(--navy);  padding: 140px 0 80px;  position: relative;  overflow: hidden;  min-height: 100vh;  display: flex;  align-items: center;}.hero::before {  content: '';  position: absolute;  top: -200px;  right: -200px;  width: 600px;  height: 600px;  background: radial-gradient(circle, var(--lime-glow) 0%, transparent 70%);  border-radius: 50%;  pointer-events: none;}.hero::after {  content: '';  position: absolute;  bottom: -100px;  left: -150px;  width: 400px;  height: 400px;  background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, transparent 70%);  border-radius: 50%;  pointer-events: none;}.hero-grid {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 60px;  align-items: center;  position: relative;  z-index: 1;}.hero-tag {  display: inline-flex;  align-items: center;  gap: 8px;  background: rgba(34, 211, 30, 0.12);  border: 1px solid rgba(34, 211, 30, 0.25);  color: var(--lime);  padding: 8px 18px;  border-radius: 50px;  font-size: 0.85rem;  font-weight: 600;  margin-bottom: 24px;  letter-spacing: 0.02em;}.hero-tag .dot {  width: 8px;  height: 8px;  background: var(--lime);  border-radius: 50%;  animation: pulse-dot 2s infinite;}@keyframes pulse-dot {  0%, 100% { opacity: 1; transform: scale(1); }  50% { opacity: 0.5; transform: scale(1.4); }}.hero h1 {  font-size: 3.2rem;  color: var(--white);  margin-bottom: 20px;  letter-spacing: -0.02em;}.hero h1 .highlight {  color: var(--lime);  position: relative;}.hero-sub {  color: rgba(255,255,255,0.75);  font-size: 1.15rem;  line-height: 1.7;  margin-bottom: 36px;  max-width: 520px;}.hero-ctas {  display: flex;  gap: 16px;  flex-wrap: wrap;  margin-bottom: 40px;}.hero-trust {  display: flex;  align-items: center;  gap: 24px;  color: rgba(255,255,255,0.6);  font-size: 0.88rem;}.hero-trust-item {  display: flex;  align-items: center;  gap: 8px;}.hero-trust-item svg {  width: 18px;  height: 18px;  color: var(--lime);  flex-shrink: 0;}.hero-image {  position: relative;  display: flex;  justify-content: center;  align-items: center;}.hero-image img {  max-height: 560px;  width: auto;  filter: drop-shadow(0 20px 60px rgba(0,0,0,0.4));  animation: float 6s ease-in-out infinite;  position: relative;  z-index: 2;}@keyframes float {  0%, 100% { transform: translateY(0); }  50% { transform: translateY(-14px); }}.hero-badge {  position: absolute;  background: var(--white);  border-radius: var(--radius-md);  padding: 14px 20px;  box-shadow: var(--shadow-lg);  z-index: 3;  animation: float-badge 5s ease-in-out infinite;}.hero-badge.badge-top {  top: 20px;  right: 0;  animation-delay: -1s;}.hero-badge.badge-bottom {  bottom: 60px;  left: 0;  animation-delay: -3s;}.hero-badge .badge-icon {  font-size: 1.6rem;  margin-bottom: 4px;}.hero-badge .badge-label {  font-size: 0.72rem;  color: var(--gray-500);  font-weight: 500;}.hero-badge .badge-value {  font-family: 'Outfit', sans-serif;  font-size: 1.05rem;  font-weight: 800;  color: var(--charcoal);}@keyframes float-badge {  0%, 100% { transform: translateY(0); }  50% { transform: translateY(-8px); }}/* ─── Social Proof Bar ─── */.proof-bar {  background: var(--gray-50);  border-top: 1px solid var(--gray-200);  border-bottom: 1px solid var(--gray-200);  padding: 28px 0;}.proof-bar-grid {  display: grid;  grid-template-columns: repeat(4, 1fr);  gap: 32px;  text-align: center;}.proof-item-num {  font-family: 'Outfit', sans-serif;  font-size: 2rem;  font-weight: 900;  color: var(--navy);}.proof-item-label {  color: var(--gray-500);  font-size: 0.88rem;  margin-top: 4px;  font-weight: 500;}/* ─── Section Common ─── */.section {  padding: 100px 0;}.section-dark {  background: var(--navy);  color: var(--white);}.section-gray {  background: var(--gray-50);}.section-label {  display: inline-flex;  align-items: center;  gap: 8px;  color: var(--lime);  font-weight: 700;  font-size: 0.85rem;  text-transform: uppercase;  letter-spacing: 0.1em;  margin-bottom: 16px;}.section-label::before {  content: '';  display: block;  width: 24px;  height: 2px;  background: var(--lime);}.section-title {  font-size: 2.6rem;  max-width: 640px;  margin-bottom: 20px;  letter-spacing: -0.02em;}.section-dark .section-title {  color: var(--white);}.section-desc {  color: var(--gray-500);  font-size: 1.1rem;  max-width: 560px;  line-height: 1.7;}.section-dark .section-desc {  color: rgba(255,255,255,0.6);}.section-header {  margin-bottom: 60px;}.section-header.center {  text-align: center;  max-width: 700px;  margin-left: auto;  margin-right: auto;}.section-header.center .section-desc {  margin: 0 auto;}/* ─── PROBLEM (PAS - P) ─── */.problem-grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 24px;}.problem-card {  background: var(--white);  border: 1px solid var(--gray-200);  border-radius: var(--radius-lg);  padding: 36px 28px;  text-align: center;  transition: all var(--transition);  position: relative;  overflow: hidden;}.problem-card::before {  content: '';  position: absolute;  top: 0;  left: 0;  right: 0;  height: 3px;  background: var(--gray-200);  transition: background var(--transition);}.problem-card:hover {  border-color: rgba(220, 38, 38, 0.2);  box-shadow: 0 8px 32px rgba(220, 38, 38, 0.08);  transform: translateY(-4px);}.problem-card:hover::before {  background: #DC2626;}.problem-icon {  width: 56px;  height: 56px;  border-radius: 50%;  background: #FEF2F2;  display: flex;  align-items: center;  justify-content: center;  margin: 0 auto 20px;  font-size: 1.5rem;}.problem-card h3 {  font-size: 1.15rem;  color: var(--charcoal);  margin-bottom: 10px;}.problem-card p {  color: var(--gray-500);  font-size: 0.92rem;  line-height: 1.6;}/* ─── AGITATE (PAS - A) ─── */.agitate-content {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 60px;  align-items: center;}.agitate-text h2 {  color: var(--white);  font-size: 2.2rem;  margin-bottom: 24px;  line-height: 1.2;}.agitate-text p {  color: rgba(255,255,255,0.7);  font-size: 1.05rem;  line-height: 1.8;  margin-bottom: 20px;}.agitate-stats {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 20px;  margin-top: 32px;}.agitate-stat {  background: rgba(255,255,255,0.06);  border: 1px solid rgba(255,255,255,0.08);  border-radius: var(--radius-md);  padding: 24px;  text-align: center;}.agitate-stat-num {  font-family: 'Outfit', sans-serif;  font-size: 2rem;  font-weight: 900;  color: var(--lime);}.agitate-stat-label {  color: rgba(255,255,255,0.6);  font-size: 0.85rem;  margin-top: 6px;}.agitate-visual {  position: relative;}.agitate-visual img {  border-radius: var(--radius-lg);  box-shadow: 0 24px 64px rgba(0,0,0,0.4);  width: 100%;  max-width: 480px;  margin: 0 auto;  display: block;}/* ─── SOLUTION (PAS - S) / Benefits ─── */.benefits-grid {  display: grid;  grid-template-columns: repeat(2, 1fr);  gap: 20px;}.benefit-card {  display: flex;  gap: 20px;  padding: 28px;  background: var(--white);  border: 1px solid var(--gray-200);  border-radius: var(--radius-md);  transition: all var(--transition);}.benefit-card:hover {  border-color: rgba(34, 211, 30, 0.3);  box-shadow: 0 4px 20px rgba(34, 211, 30, 0.06);  transform: translateY(-2px);}.benefit-icon {  width: 48px;  height: 48px;  border-radius: 12px;  background: rgba(34, 211, 30, 0.08);  display: flex;  align-items: center;  justify-content: center;  flex-shrink: 0;  font-size: 1.3rem;}.benefit-card h3 {  font-size: 1.05rem;  color: var(--charcoal);  margin-bottom: 6px;  font-weight: 700;}.benefit-card p {  color: var(--gray-500);  font-size: 0.9rem;  line-height: 1.6;}/* ─── Ingredients ─── */.ingredients-grid {  display: grid;  grid-template-columns: repeat(4, 1fr);  gap: 24px;}.ingredient-card {  text-align: center;  padding: 36px 20px;  background: rgba(255,255,255,0.04);  border: 1px solid rgba(255,255,255,0.08);  border-radius: var(--radius-lg);  transition: all var(--transition);}.ingredient-card:hover {  background: rgba(255,255,255,0.08);  border-color: rgba(34, 211, 30, 0.25);  transform: translateY(-4px);}.ingredient-icon {  width: 72px;  height: 72px;  border-radius: 50%;  background: rgba(34, 211, 30, 0.1);  border: 1px solid rgba(34, 211, 30, 0.2);  display: flex;  align-items: center;  justify-content: center;  margin: 0 auto 20px;  font-size: 2rem;}.ingredient-card h3 {  color: var(--white);  font-size: 1.1rem;  margin-bottom: 10px;}.ingredient-card p {  color: rgba(255,255,255,0.55);  font-size: 0.88rem;  line-height: 1.6;}/* ─── How to Use ─── */.steps-grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 40px;  position: relative;}.steps-grid::before {  content: '';  position: absolute;  top: 40px;  left: 15%;  right: 15%;  height: 2px;  background: linear-gradient(to right, var(--lime), var(--mint), var(--lime));  opacity: 0.3;}.step-card {  text-align: center;  position: relative;  z-index: 1;}.step-num {  width: 56px;  height: 56px;  border-radius: 50%;  background: var(--navy);  color: var(--lime);  font-family: 'Outfit', sans-serif;  font-size: 1.3rem;  font-weight: 900;  display: flex;  align-items: center;  justify-content: center;  margin: 0 auto 20px;  border: 2px solid rgba(34, 211, 30, 0.3);}.step-card h3 {  font-size: 1.1rem;  color: var(--charcoal);  margin-bottom: 8px;}.step-card p {  color: var(--gray-500);  font-size: 0.92rem;  line-height: 1.6;}.modo-uso-img {  margin-top: 40px;  text-align: center;}.modo-uso-img img {  max-width: 500px;  margin: 0 auto;  border-radius: var(--radius-lg);  box-shadow: var(--shadow-md);}/* ─── Testimonials ─── */.testimonials-scroll {  display: grid;  grid-template-columns: repeat(4, 1fr);  gap: 20px;}.testimonial-card {  background: var(--white);  border: 1px solid var(--gray-200);  border-radius: var(--radius-md);  overflow: hidden;  transition: all var(--transition);}.testimonial-card:hover {  box-shadow: var(--shadow-md);  transform: translateY(-4px);}.testimonial-card img {  width: 100%;  height: 320px;  object-fit: cover;  object-position: top;}/*/* ─── Pricing / Offers ─── */.pricing-grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 28px;  align-items: start;}.pricing-card {  background: var(--white);  border: 2px solid var(--gray-200);  border-radius: var(--radius-xl);  padding: 40px 32px;  text-align: center;  position: relative;  transition: all var(--transition);}.pricing-card:hover {  border-color: var(--gray-300);  box-shadow: var(--shadow-lg);  transform: translateY(-6px);}.pricing-card.popular {  border-color: var(--lime);  box-shadow: var(--shadow-lime);  transform: scale(1.04);}.pricing-card.popular:hover {  transform: scale(1.04) translateY(-6px);}.pricing-popular-tag {  position: absolute;  top: -14px;  left: 50%;  transform: translateX(-50%);  background: var(--lime);  color: var(--charcoal);  font-family: 'Outfit', sans-serif;  font-weight: 800;  font-size: 0.8rem;  padding: 6px 24px;  border-radius: 50px;  text-transform: uppercase;  letter-spacing: 0.05em;}.pricing-name {  font-family: 'Outfit', sans-serif;  font-size: 1.2rem;  font-weight: 700;  color: var(--charcoal);  margin-bottom: 8px;}.pricing-units {  color: var(--gray-500);  font-size: 0.9rem;  margin-bottom: 24px;}.pricing-price {  margin-bottom: 8px;}.pricing-before {  color: var(--gray-400);  font-size: 1.1rem;  text-decoration: line-through;}.pricing-current {  font-family: 'Outfit', sans-serif;  font-size: 3rem;  font-weight: 900;  color: var(--navy);  line-height: 1;}.pricing-unit {  color: var(--gray-500);  font-size: 0.85rem;  margin-top: 4px;}.pricing-save {  display: inline-block;  background: #FEF3C7;  color: #92400E;  font-weight: 700;  font-size: 0.85rem;  padding: 6px 16px;  border-radius: 50px;  margin: 20px 0 28px;}.pricing-features {  text-align: left;  margin-bottom: 32px;}.pricing-features li {  padding: 8px 0;  display: flex;  align-items: flex-start;  gap: 10px;  color: var(--gray-600);  font-size: 0.92rem;  border-bottom: 1px solid var(--gray-100);}.pricing-features li:last-child {  border-bottom: none;}.pricing-features li svg {  width: 18px;  height: 18px;  color: var(--lime);  flex-shrink: 0;  margin-top: 2px;}/* ─── FAQ ─── */.faq-list {  max-width: 760px;  margin: 0 auto;}.faq-item {  border-bottom: 1px solid var(--gray-200);}.faq-question {  width: 100%;  background: none;  border: none;  padding: 24px 0;  display: flex;  justify-content: space-between;  align-items: center;  cursor: pointer;  text-align: left;  font-family: 'Outfit', sans-serif;  font-size: 1.05rem;  font-weight: 600;  color: var(--charcoal);  transition: color var(--transition);}.faq-question:hover {  color: var(--navy);}.faq-question svg {  width: 20px;  height: 20px;  color: var(--gray-400);  transition: transform var(--transition);  flex-shrink: 0;  margin-left: 16px;}.faq-item.active .faq-question svg {  transform: rotate(45deg);  color: var(--lime);}.faq-answer {  max-height: 0;  overflow: hidden;  transition: max-height 0.4s ease, padding 0.4s ease;}.faq-item.active .faq-answer {  max-height: 300px;  padding-bottom: 24px;}.faq-answer p {  color: var(--gray-500);  font-size: 0.95rem;  line-height: 1.7;}.faq-item.active .faq-question {  color: var(--navy);}/* ─── Guarantee ─── */.guarantee {  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);  border-radius: var(--radius-xl);  padding: 60px;  text-align: center;  position: relative;  overflow: hidden;}.guarantee::before {  content: '';  position: absolute;  top: -50%;  left: -50%;  width: 200%;  height: 200%;  background: radial-gradient(circle at 30% 30%, rgba(34, 211, 30, 0.06) 0%, transparent 50%);  pointer-events: none;}.guarantee-icon {  width: 80px;  height: 80px;  border-radius: 50%;  background: rgba(34, 211, 30, 0.12);  border: 2px solid rgba(34, 211, 30, 0.25);  display: flex;  align-items: center;  justify-content: center;  margin: 0 auto 24px;  font-size: 2.2rem;  position: relative;  z-index: 1;}.guarantee h2 {  color: var(--white);  font-size: 2rem;  margin-bottom: 16px;  position: relative;  z-index: 1;}.guarantee p {  color: rgba(255,255,255,0.7);  font-size: 1.05rem;  max-width: 560px;  margin: 0 auto;  line-height: 1.7;  position: relative;  z-index: 1;}/* ─── CTA Final ─── */.cta-final {  text-align: center;}.cta-final h2 {  font-size: 2.4rem;  color: var(--navy);  margin-bottom: 16px;}.cta-final p {  color: var(--gray-500);  font-size: 1.1rem;  margin-bottom: 36px;  max-width: 500px;  margin-left: auto;  margin-right: auto;}.cta-final .cta-buttons {  display: flex;  gap: 16px;  justify-content: center;  flex-wrap: wrap;}/* ─── Footer ─── */.footer {  background: var(--charcoal);  color: rgba(255,255,255,0.5);  padding: 48px 0 24px;  font-size: 0.88rem;}.footer-content {  display: flex;  justify-content: space-between;  align-items: center;  flex-wrap: wrap;  gap: 20px;  margin-bottom: 24px;}.footer-logo {  height: 36px;  filter: brightness(0) invert(1) opacity(0.5);}.footer-links {  display: flex;  gap: 24px;}.footer-links a {  color: rgba(255,255,255,0.5);  transition: color var(--transition);}.footer-links a:hover {  color: var(--white);}.footer-invima {  font-size: 0.82rem;  padding-top: 24px;  border-top: 1px solid rgba(255,255,255,0.08);  text-align: center;}/* ─── WhatsApp Floating ─── */.wa-float {  position: fixed;  bottom: 28px;  right: 28px;  z-index: 999;  width: 64px;  height: 64px;  background: #25D366;  border-radius: 50%;  display: flex;  align-items: center;  justify-content: center;  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);  transition: all var(--transition);  cursor: pointer;}.wa-float:hover {  transform: scale(1.1);  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5);}.wa-float svg {  width: 32px;  height: 32px;  color: var(--white);}.wa-float .wa-tooltip {  position: absolute;  right: 76px;  background: var(--white);  color: var(--charcoal);  padding: 10px 18px;  border-radius: var(--radius-sm);  font-size: 0.88rem;  font-weight: 600;  white-space: nowrap;  box-shadow: var(--shadow-md);  opacity: 0;  pointer-events: none;  transition: opacity var(--transition);}.wa-float:hover .wa-tooltip {  opacity: 1;}/* ─── Sticky Bottom CTA (mobile) ─── */.sticky-cta {  display: none;  position: fixed;  bottom: 0;  left: 0;  right: 0;  z-index: 998;  background: var(--white);  border-top: 1px solid var(--gray-200);  padding: 12px 16px;  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);}.sticky-cta-inner {  display: flex;  gap: 12px;  align-items: center;}.sticky-cta .sticky-price {  font-family: 'Outfit', sans-serif;}.sticky-cta .sticky-price-old {  color: var(--gray-400);  font-size: 0.8rem;  text-decoration: line-through;}.sticky-cta .sticky-price-now {  font-size: 1.3rem;  font-weight: 900;  color: var(--navy);}.sticky-cta .btn {  flex: 1;  padding: 14px 20px;}/* ─── Tabla Nutricional ─── */.tabla-section img {  max-width: 360px;  margin: 0 auto;  border-radius: var(--radius-md);  box-shadow: var(--shadow-sm);}/*/* ─── Animations on scroll ─── */.fade-up {  opacity: 0;  transform: translateY(30px);  transition: opacity 0.7s ease, transform 0.7s ease;}.fade-up.visible {  opacity: 1;  transform: translateY(0);}/* ─── Responsive ─── */@media (max-width: 1024px) {  .hero h1 { font-size: 2.4rem; }  .hero-grid { grid-template-columns: 1fr; text-align: center; }  .hero-sub { margin: 0 auto 36px; }  .hero-ctas { justify-content: center; }  .hero-trust { justify-content: center; }  .hero-image { order: -1; }  .hero-image img { max-height: 380px; }  .hero-badge { display: none; }  .agitate-content { grid-template-columns: 1fr; }  .agitate-visual { order: -1; }  .pricing-grid { grid-template-columns: 1fr; max-width: 440px;  margin: 0 auto; }  .pricing-card.popular { transform: none; }  .pricing-card.popular:hover { transform: translateY(-6px); }  .testimonials-scroll { grid-template-columns: repeat(2, 1fr); }  .ingredients-grid { grid-template-columns: repeat(2, 1fr); }}@media (max-width: 768px) {  .hero { padding: 120px 0 60px; min-height: auto; }  .hero h1 { font-size: 2rem; }  .section { padding: 70px 0; }  .section-title { font-size: 2rem; }  .problem-grid { grid-template-columns: 1fr; max-width: 400px;  margin: 0 auto; }  .benefits-grid { grid-template-columns: 1fr; }  .steps-grid { grid-template-columns: 1fr; gap: 32px; }  .steps-grid::before { display: none; }  .testimonials-scroll { grid-template-columns: 1fr 1fr; gap: 12px; }  .proof-bar-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }  .nav-links { display: none; }  .mobile-toggle { display: block; }  .guarantee { padding: 40px 24px; }  .sticky-cta { display: block; }  .wa-float { bottom: 90px; right: 20px; width: 56px; height: 56px; }  .wa-float svg { width: 28px; height: 28px; }}@media (max-width: 480px) {  .hero h1 { font-size: 1.7rem; }  .hero-sub { font-size: 1rem; }  .btn-primary { padding: 16px 32px; font-size: 1rem; }  .pricing-current { font-size: 2.4rem; }  .testimonials-scroll { grid-template-columns: 1fr; }  .cta-final h2 { font-size: 1.8rem; }  .footer-content { flex-direction: column;  text-align: center; }}
/* ─── Lifestyle / Día a día ─── */
.lifestyle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.lifestyle-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition); margin: 0; }
.lifestyle-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.lifestyle-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.lifestyle-card figcaption { padding: 20px 24px; color: var(--gray-600); font-size: 0.95rem; line-height: 1.6; }
.lifestyle-card figcaption strong { color: var(--navy); }
@media (max-width: 768px) { .lifestyle-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }

/* ─── Mobile Optimization ─── */

/* Anchor offset for fixed header */
section[id] { scroll-margin-top: 80px; }

/* Mobile hamburger menu */
@media (max-width: 768px) {
  .nav { height: 64px; }
  .nav-logo img { height: 34px; }
  .nav-cta { display: none; }

  .mobile-toggle { display: block; position: relative; z-index: 1002; }
  .mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-toggle.active span:nth-child(2) { opacity: 0; }
  .mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-links {
    display: flex;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(10, 46, 101, 0.98);
    backdrop-filter: blur(12px);
    padding: 8px 24px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition);
    z-index: 1001;
  }
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a {
    padding: 14px 0;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-links a:last-child { border-bottom: none; }

  /* Hero: tighter, image compact */
  .hero { padding: 96px 0 48px; }
  .hero-grid { gap: 32px; }
  .hero-image img {
    max-height: 300px;
    width: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0,0,0,0.45);
  }
  .hero-ctas .btn { width: 100%; }
  .hero-trust { flex-wrap: wrap; gap: 12px 16px; justify-content: center; }
  .hero-trust-item { font-size: 0.82rem; }

  /* Sections tighter */
  .section { padding: 56px 0; }
  .section-header { margin-bottom: 36px; }
  .section-title { font-size: 1.65rem; }
  .section-header.center { max-width: 100%; }
  .container { padding: 0 18px; }

  /* Problem/benefit cards tighter */
  .problem-card { padding: 26px 20px; }
  .benefit-card { padding: 20px; gap: 14px; }
  .benefit-icon { width: 42px; height: 42px; font-size: 1.15rem; }

  /* Steps */
  .step-num { width: 48px; height: 48px; font-size: 1.15rem; margin-bottom: 14px; }

  /* Ingredients: comfortable single column */
  .ingredients-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ingredient-card { padding: 24px 14px; }
  .ingredient-icon { width: 56px; height: 56px; font-size: 1.6rem; margin-bottom: 12px; }

  /* Agitate */
  .agitate-text h2 { font-size: 1.65rem; }
  .agitate-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .agitate-stat { padding: 16px; }
  .agitate-stat-num { font-size: 1.5rem; }
  .agitate-visual img { max-width: 100%; }

  /* Modo de uso image */
  .modo-uso-img img { max-width: 100%; }

  /* Testimonials: comfortable cards */
  .testimonials-scroll { grid-template-columns: 1fr 1fr; gap: 12px; }
  .testimonial-card img { height: 260px; }

  /* Pricing */
  .pricing-card { padding: 30px 22px; }
  .pricing-current { font-size: 2.3rem; }
  .pricing-card.popular { border-width: 2px; }
  .pricing-save { margin: 14px 0 20px; }
  .pricing-features li { font-size: 0.88rem; padding: 7px 0; }

  /* Guarantee & CTA final */
  .guarantee { padding: 36px 20px; }
  .guarantee h2 { font-size: 1.55rem; }
  .guarantee-icon { width: 64px; height: 64px; font-size: 1.8rem; }
  .cta-final h2 { font-size: 1.65rem; }
  .cta-final .cta-buttons .btn { width: 100%; }

  /* FAQ tap targets */
  .faq-question { padding: 18px 0; font-size: 0.98rem; }

  /* Floating WA + sticky bar coexistence */
  .sticky-cta { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .sticky-cta .sticky-price-now { font-size: 1.15rem; }
  .wa-float { bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* Footer */
  .footer { padding: 32px 0 120px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 1.5rem; }
  .hero-tag { font-size: 0.72rem; padding: 6px 12px; }
  .pricing-current { font-size: 2rem; }
  .proof-item-num { font-size: 1.6rem; }
}