/* =============================================================
   CparraStudio — Design Polish (gold accents + responsive + image aspects)
   Loaded LAST after all other CSS — overrides apply
   ============================================================= */

/* ============================================================
   GOLD ENHANCEMENTS
   ============================================================ */

/* Gold gradient for primary CTAs (subtle warmth) */
.btn-primary {
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-light, #3A2A20) 100%);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(184, 152, 92, 0.18) 100%);
  pointer-events: none;
  transition: opacity 280ms ease;
  opacity: 0;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover {
  box-shadow: 0 6px 24px rgba(184, 152, 92, 0.35), 0 0 0 1px var(--gold);
}

/* Gold border on featured cards */
.service-card,
.pillar-card,
.product-card,
.compare-grid,
.brand-story {
  position: relative;
}
.service-card:hover,
.pillar-card:hover,
.product-card:hover {
  box-shadow: 0 12px 32px rgba(26, 20, 16, 0.12), 0 0 0 1px var(--gold);
  transform: translateY(-4px);
  transition: transform 320ms cubic-bezier(0.4,0,0.2,1), box-shadow 320ms cubic-bezier(0.4,0,0.2,1);
}

/* Gold underline accent on italic emphasis in h1/h2 */
section h1 em,
section h2 em,
.hero-h1 em,
.italic-serif {
  position: relative;
  display: inline-block;
  font-style: italic;
}
section h2 em::after,
.hero-h1 em::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold) 70%, transparent 100%);
  opacity: 0.72;
}

/* Gold section dividers between major sections */
section + section {
  position: relative;
}
section.gold-divider::before,
.pillars-band + section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}

/* Gold sparkle on eyebrows (mid-dot replacement) */
.eyebrow,
.pillars-eyebrow {
  color: var(--gold-deep);
  letter-spacing: 0.22em;
  font-weight: 600;
}

/* Gold accent line under section headers */
.section-header h2 {
  position: relative;
  padding-bottom: 18px;
}
.section-header h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  opacity: 0.85;
}

/* Gold corner accents on stat cards */
.stat {
  position: relative;
  padding: var(--s-5) var(--s-4);
  border-radius: 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(184, 152, 92, 0.04) 100%);
}
.stat .num {
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

/* Gold-tinted price tags */
.price-tag,
.price {
  position: relative;
}

/* Gold ring on testimonial avatars */
.testimonial .avatar img,
.review-avatar img,
.testimonial img {
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(184, 152, 92, 0.12);
}

/* Gold CTA in nav */
.nav-cta {
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--gold-deep) 100%);
  box-shadow: 0 2px 12px rgba(184, 152, 92, 0.25);
}
.nav-cta:hover {
  box-shadow: 0 4px 18px rgba(184, 152, 92, 0.42);
}

/* Sticky promo banner gold border */
.promo-banner {
  border-bottom: 1px solid var(--gold);
  background: linear-gradient(135deg, var(--terracotta) 0%, #2a2018 100%);
}

/* Gold focus rings (accessibility + brand consistency) */
:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   IMAGE ASPECT RATIOS — fix proportions everywhere
   ============================================================ */

/* Universal: prevent any img from breaking layout */
img {
  max-width: 100%;
  height: auto;
}

/* Portrait images in service/pillar cards (4:5) */
.service-card .image,
.service-card .image img,
.pillar-card-image,
.solution-card-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
}
.service-card .image img,
.pillar-card-image img,
.solution-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Portfolio thumbnails (3:4 for vertical client photos) */
.portfolio img,
.portfolio-card img,
.gallery-strip img {
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
}

/* Product cards (square, even ratios) */
.product-card .product-image,
.product-card .product-image img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.product-card .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Hero image — full bleed but with safe focal point */
.hero-bg img {
  object-fit: cover;
  object-position: center 30%;
  width: 100%;
  height: 100%;
}

/* Service deep-dive images (servicios.html details) */
.service-deep-img img {
  aspect-ratio: 4 / 5;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
  border-radius: 16px;
}

/* Brand story image (productos "¿por qué creé esta línea?") */
.brand-story-image img {
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
  border-radius: 16px;
}

/* Testimonial avatars — perfect circles, face-centered */
.testimonial .avatar,
.testimonial .avatar img,
.review-avatar,
.review-avatar img,
.avatars img {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: auto;
}

/* Course card images */
.course-card .image,
.course-card .image img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.course-card .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Before/after slider images — match heights (portrait clients) */
.ba-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Upsell card (gracias) */
.upsell img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
}

/* ============================================================
   RESPONSIVE — 100% mobile-first cleanups
   ============================================================ */

/* Base: prevent body overflow */
html, body { overflow-x: hidden; }

/* Force min font on mobile */
@media (max-width: 767px) {
  html { font-size: 16px; }
  body { font-size: 16px; }

  /* Tighter container padding */
  .container { padding-left: 20px; padding-right: 20px; }
  .container-narrow { padding-left: 20px; padding-right: 20px; }

  /* Hero text scales */
  .hero-h1 { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.15 !important; }
  .hero-sub { font-size: 16px !important; line-height: 1.55 !important; }

  /* Hero actions stack vertically */
  .hero-actions {
    flex-direction: column;
    gap: 10px !important;
  }
  .hero-actions .btn { width: 100%; min-height: 48px; }

  /* Hero trust avatars smaller */
  .hero-trust .avatars img { width: 36px; height: 36px; }

  /* All section headers smaller */
  .section-header h2,
  .pillars-heading {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.2 !important;
  }

  /* Tighter section padding on mobile */
  .section { padding-top: 60px; padding-bottom: 60px; }
  .section-sm { padding-top: 40px; padding-bottom: 40px; }

  /* Pillar grid → stack */
  .pillars-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Stats grid → 2x2 on mobile */
  .stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .stats .stat .num { font-size: clamp(28px, 8vw, 36px) !important; }
  .stats .stat .label { font-size: 12px !important; line-height: 1.3; }

  /* Services compare bar stacked + scroll */
  .compare-grid {
    grid-template-columns: 1fr !important;
  }
  .compare-grid .compare-head {
    border-bottom: 1px solid var(--gold) !important;
    padding: 16px !important;
  }

  /* Tabla de precios — tighter */
  #precios .container > div {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Process grid → single col stacked */
  .process-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .process-grid::before { display: none !important; }

  /* Service deep dive → stack image then text */
  .service-deep,
  .service-deep.reverse {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 32px 0 !important;
  }
  .service-deep.reverse > div:first-child { order: 0 !important; }

  /* Brand story → stack */
  .brand-story {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Gift grid → stack */
  .gift-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Products grid → 2 cols on phone */
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .product-card { padding: 8px !important; }
  .product-card .product-name { font-size: 13px !important; }
  .product-card .product-price { font-size: 16px !important; }

  /* On tiny phones — single col products */
  @media (max-width: 380px) {
    .products-grid { grid-template-columns: 1fr !important; }
  }

  /* Testimonials grid stack */
  .testimonials-grid,
  .review-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Footer grid stack */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  .footer-brand { grid-column: 1 / -1 !important; }

  /* Footer-bottom stack */
  .footer-bottom {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center;
  }

  /* All buttons min 44px tap target */
  .btn, button, a.btn, a.pillar-arrow, .filter-btn, .add-to-cart-btn {
    min-height: 44px;
  }

  /* Navbar collapse — hide nav links, show only hamburger */
  .nav-links { display: none !important; }

  /* Logo smaller on mobile (already done in earlier CSS but enforce) */
  .navbar .brand-logo { height: 44px !important; max-width: 150px !important; }

  /* Lead card stacks */
  .lead-card { padding: 24px 20px !important; }

  /* Section ornaments hidden on mobile (visual clutter) */
  .section-ornament { display: none !important; }

  /* Hide compare-bar that conflicts with sticky CTA */
  body[data-page="servicios"] #compareBar { bottom: 76px !important; }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
  .container { padding-left: 32px; padding-right: 32px; }
  .pillars-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .products-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .stats { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Large screens — cap max width for readability */
@media (min-width: 1440px) {
  .container { max-width: 1280px; }
}

/* Tiny phones (320px) — extra tight */
@media (max-width: 360px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .hero-h1 { font-size: 26px !important; }
  .section-header h2,
  .pillars-heading { font-size: 24px !important; }
  .btn { font-size: 14px !important; padding: 12px 18px !important; }
  .price { font-size: 18px !important; }

  /* Stats single col */
  .stats { grid-template-columns: 1fr 1fr !important; }
}

/* Accessibility — increased contrast for gold on white in small text */
@media (max-width: 767px) {
  .eyebrow,
  .pillars-eyebrow { color: var(--gold-deep) !important; }
}

/* Reduce motion polish */
@media (prefers-reduced-motion: reduce) {
  .service-card:hover,
  .pillar-card:hover,
  .product-card:hover {
    transform: none !important;
    transition: none !important;
  }
  .btn-primary::before { transition: none !important; }
}

/* Print styles */
@media print {
  .navbar, .footer, .sticky-mobile-cta, .promo-banner, .wa-fab,
  .section-ornament, .emoji-layer, .scroll-progress { display: none !important; }
  body { background: white !important; color: black !important; }
}


/* ============================================================
   PORTFOLIO GRID — clean responsive 3:4 cards
   ============================================================ */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}

.portfolio-card {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--champagne);
  aspect-ratio: 3 / 4;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(26, 20, 16, 0.08);
  transition: transform 380ms cubic-bezier(0.4,0,0.2,1), box-shadow 380ms cubic-bezier(0.4,0,0.2,1);
}

.portfolio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 600ms cubic-bezier(0.4,0,0.2,1), filter 380ms ease;
  will-change: transform;
}

/* Subtle initial darkening so caption is always readable when overlay appears */
.portfolio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(26, 20, 16, 0.6) 100%);
  opacity: 0;
  transition: opacity 320ms ease;
  z-index: 1;
  pointer-events: none;
}

/* Gold corner accent — always visible to hint interactivity */
.portfolio-card::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  opacity: 0.8;
  z-index: 2;
  pointer-events: none;
  transition: opacity 280ms ease, transform 280ms ease;
}

.portfolio-card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 16px 18px;
  color: var(--cream);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 320ms ease, opacity 320ms ease;
}

.portfolio-card .portfolio-cat {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: 0;
}

.portfolio-card .portfolio-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.95;
}

/* Hover: zoom image, show overlay + caption, expand gold corner */
.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(26, 20, 16, 0.18), 0 0 0 1px var(--gold);
}
.portfolio-card:hover img { transform: scale(1.06); }
.portfolio-card:hover::before { opacity: 1; }
.portfolio-card:hover::after { transform: scale(1.2); opacity: 1; }
.portfolio-card:hover figcaption {
  transform: translateY(0);
  opacity: 1;
}

/* Always show caption faintly on touch devices (no hover) */
@media (hover: none) {
  .portfolio-card::before { opacity: 0.65; }
  .portfolio-card figcaption { transform: translateY(0); opacity: 1; }
}

.portfolio-cta {
  margin-top: 36px;
  text-align: center;
}

/* Responsive — portfolio grid */
@media (max-width: 1023px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .portfolio-card { border-radius: 14px; }
  .portfolio-card .portfolio-cat { font-size: 16px; }
  .portfolio-card .portfolio-meta { font-size: 10px; letter-spacing: 0.14em; }
  .portfolio-card figcaption { padding: 12px 12px; gap: 6px; }
}
@media (max-width: 340px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BUTTONS — refined consistency + responsive
   ============================================================ */

/* Base button improvements: allow wrap on tiny screens */
.btn {
  white-space: normal;
  line-height: 1.2;
  min-height: 44px;
  text-align: center;
}

/* Primary — already enhanced earlier, refine shadow */
.btn-primary {
  background: linear-gradient(135deg, var(--terracotta) 0%, #2a2018 100%);
  color: var(--cream);
  box-shadow: 0 6px 18px rgba(26, 20, 16, 0.18), 0 0 0 1px rgba(184, 152, 92, 0.2);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(26, 20, 16, 0.32), 0 0 0 1px var(--gold);
}
.btn-primary:active { transform: translateY(0); }

/* Ghost — bordered gold tint on hover */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(26, 20, 16, 0.18), 0 0 0 1px var(--gold);
}

/* Light — for dark backgrounds */
.btn-light {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--gold);
}
.btn-light:hover {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold-deep);
  transform: translateY(-2px);
}

/* Gold CTA */
.btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: var(--cream);
  box-shadow: 0 6px 18px rgba(184, 152, 92, 0.32);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(184, 152, 92, 0.45);
  filter: brightness(1.05);
}

/* Block variant — full width */
.btn-block { width: 100%; }

/* Large variant */
.btn-lg { padding: 18px 36px; font-size: 15px; min-height: 52px; }

/* Small variant */
.btn-sm { padding: 10px 18px; font-size: 12px; min-height: 38px; }

/* Btn-link (text link with arrow) */
.btn-link {
  background: transparent;
  color: var(--terracotta-deep, var(--ink));
  padding: 12px 4px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.btn-link:hover { color: var(--gold-deep); }

/* Focus visible for all buttons */
.btn:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Mobile button refinements */
@media (max-width: 767px) {
  .btn {
    padding: 14px 22px;
    font-size: 14px;
    letter-spacing: 0.04em;
  }
  .btn-lg { padding: 16px 28px; font-size: 14px; }
  .hero-actions .btn { width: 100%; }
}

/* Ripple effect cleanup — visible only on actual clicks */
.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple-anim 600ms ease-out;
}
@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn-primary:hover, .btn-ghost:hover, .btn-gold:hover, .btn-light:hover {
    transform: none !important;
  }
  .ripple { animation: none !important; }
}


/* ============================================================
   MENU OPTIMIZATION — Desktop navbar + Mobile drawer
   ============================================================ */

/* DESKTOP NAVBAR — sliding gold underline indicator */
.nav-links { gap: 6px !important; }
.nav-link {
  position: relative;
  padding: 10px 18px !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-radius: 999px;
  transition: color 280ms cubic-bezier(0.4,0,0.2,1);
}
.nav-link::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  transform: translateX(-50%);
  transition: width 320ms cubic-bezier(0.4,0,0.2,1);
}
.nav-link:hover::before { width: 60%; }
.nav-link:hover { color: var(--gold-deep); }
.nav-link.active::before {
  width: 60%;
  background: var(--gold);
  height: 2px;
}
.nav-link.active { color: var(--gold-deep); font-weight: 600; }

/* Sticky navbar — backdrop blur intensifies on scroll */
.navbar {
  transition: padding 280ms cubic-bezier(0.4,0,0.2,1),
              background 320ms ease,
              backdrop-filter 320ms ease,
              box-shadow 320ms ease;
}
.navbar.scrolled {
  background: rgba(245, 239, 230, 0.86) !important;
  backdrop-filter: saturate(180%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
  box-shadow: 0 8px 32px rgba(26, 20, 16, 0.07), 0 1px 0 rgba(184, 152, 92, 0.18);
  padding: 6px 0;
}

/* MOBILE MENU — staggered slide-in + gold accents */
.mobile-menu-backdrop {
  background: rgba(26, 20, 16, 0.66) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: opacity 380ms cubic-bezier(0.4,0,0.2,1);
}

.mobile-menu-panel {
  background: linear-gradient(180deg, var(--cream) 0%, var(--champagne) 100%) !important;
  box-shadow: -8px 0 40px rgba(26, 20, 16, 0.22);
  border-left: 1px solid var(--gold);
  transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.mobile-menu-header {
  border-bottom: 1px solid rgba(184, 152, 92, 0.25);
  padding: 22px 24px 18px !important;
}

.mobile-menu-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  font-weight: 300;
  cursor: pointer;
  transition: all 280ms cubic-bezier(0.4,0,0.2,1);
}
.mobile-menu-close:hover {
  background: var(--gold);
  color: var(--cream);
  transform: rotate(90deg);
}

.mobile-menu-nav {
  padding: 16px 14px !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu-link {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 14px 16px !important;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  min-height: 52px;
  transition: background 280ms ease, transform 280ms ease, color 280ms ease;
}

.mobile-menu-link .ico {
  font-size: 18px;
  line-height: 1;
  width: 28px;
  text-align: center;
  flex: 0 0 auto;
}
.mobile-menu-link .label { flex: 1; }
.mobile-menu-link .chevron {
  color: var(--gold);
  font-weight: 300;
  font-size: 18px;
  transform: translateX(-4px);
  opacity: 0.6;
  transition: transform 280ms ease, opacity 280ms ease;
}

.mobile-menu-link:hover,
.mobile-menu-link:focus-visible {
  background: rgba(184, 152, 92, 0.10);
  color: var(--gold-deep);
}
.mobile-menu-link:hover .chevron { transform: translateX(0); opacity: 1; }

.mobile-menu-link.active {
  background: linear-gradient(90deg, rgba(184, 152, 92, 0.18), rgba(184, 152, 92, 0.04));
  color: var(--gold-deep);
  font-weight: 600;
}
.mobile-menu-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border-radius: 0 3px 3px 0;
}

/* Staggered entrance — items slide in one by one when menu opens */
.mobile-menu .mobile-menu-link {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 380ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1), background 280ms, color 280ms;
}
.mobile-menu.open .mobile-menu-link {
  opacity: 1;
  transform: translateX(0);
}
.mobile-menu.open .mobile-menu-link:nth-child(1) { transition-delay: 120ms; }
.mobile-menu.open .mobile-menu-link:nth-child(2) { transition-delay: 170ms; }
.mobile-menu.open .mobile-menu-link:nth-child(3) { transition-delay: 220ms; }
.mobile-menu.open .mobile-menu-link:nth-child(4) { transition-delay: 270ms; }
.mobile-menu.open .mobile-menu-link:nth-child(5) { transition-delay: 320ms; }
.mobile-menu.open .mobile-menu-link:nth-child(6) { transition-delay: 370ms; }

.mobile-menu-cart {
  border-top: 1px solid rgba(184, 152, 92, 0.25);
  padding: 14px 24px !important;
}
.mobile-menu-cart-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 280ms ease;
}
.mobile-menu-cart-row:hover {
  background: rgba(184, 152, 92, 0.10);
  border-color: var(--gold-deep);
}
.mobile-menu-cart-row .cart-count {
  margin-left: auto;
  background: var(--gold);
  color: var(--cream);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
}

.mobile-menu-footer {
  border-top: 1px solid rgba(184, 152, 92, 0.25);
  padding: 18px 24px 24px !important;
}
.mobile-menu-social {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 14px;
}
.mobile-menu-social a {
  color: var(--gold-deep);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  font-size: 13px;
  transition: color 200ms ease;
}
.mobile-menu-social a:hover { color: var(--ink); }

/* Hamburger button refinement */
.nav-mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold);
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: all 280ms ease;
}
.nav-mobile-toggle span,
.nav-mobile-toggle span::before,
.nav-mobile-toggle span::after {
  display: block;
  position: absolute;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  left: 50%;
  transform-origin: center;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              top 320ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 200ms ease;
}
.nav-mobile-toggle span {
  top: 50%;
  margin-left: -8px;
  margin-top: -0.75px;
}
.nav-mobile-toggle span::before {
  content: "";
  top: -6px;
  left: 0;
}
.nav-mobile-toggle span::after {
  content: "";
  top: 6px;
  left: 0;
}
.nav-mobile-toggle[aria-expanded="true"] span { background: transparent; }
.nav-mobile-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-mobile-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
.nav-mobile-toggle:hover { background: rgba(184, 152, 92, 0.10); }

@media (max-width: 767px) {
  .nav-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* ============================================================
   FEMININE PAGE ANIMATIONS — flowy, smooth, impactful
   ============================================================ */

/* Floating gold sparkle particles in hero (CSS-only) */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before,
.hero::after {
  content: "✦";
  position: absolute;
  color: var(--gold);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: floatSparkle 14s ease-in-out infinite;
  text-shadow: 0 0 12px rgba(184, 152, 92, 0.6);
}
.hero::before { left: 8%; top: 22%; animation-delay: 0s; }
.hero::after { right: 12%; top: 45%; animation-delay: 7s; font-size: 18px; }

@keyframes floatSparkle {
  0%, 100% { opacity: 0; transform: translateY(0) rotate(0); }
  10%, 80% { opacity: 0.65; }
  50% { transform: translateY(-30px) rotate(180deg); opacity: 1; }
}

/* Soft reveal — fade-up on scroll (universal) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

/* Word reveal — hero H1 letter cascade (already exists, enhance timing) */
.word-reveal-item {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) rotate(-2deg);
  filter: blur(8px);
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 800ms ease;
}
.word-reveal-item.show {
  opacity: 1;
  transform: translateY(0) rotate(0);
  filter: blur(0);
}

/* Image curtain reveal — luxury feel for portfolio + hero */
.curtain-reveal {
  position: relative;
  overflow: hidden;
}
.curtain-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 1100ms cubic-bezier(0.86, 0, 0.07, 1);
  z-index: 3;
  pointer-events: none;
}
.curtain-reveal.revealed::after { transform: scaleX(0); }

/* Hero image — slow zoom-out on load (Ken Burns soft) */
.hero-bg img {
  animation: kenBurns 22s ease-in-out infinite alternate;
  transform-origin: center 30%;
}
@keyframes kenBurns {
  0% { transform: scale(1.0) translateY(0); }
  100% { transform: scale(1.06) translateY(-12px); }
}

/* Smooth hover on every link */
a:not(.btn):not(.nav-link):not(.mobile-menu-link):not(.portfolio-card) {
  transition: color 220ms ease;
}

/* Card pulse on initial reveal — soft breath */
@keyframes softBreath {
  0%, 100% { box-shadow: 0 6px 22px rgba(26, 20, 16, 0.08); }
  50% { box-shadow: 0 8px 28px rgba(184, 152, 92, 0.16); }
}
.pillar-card:not(:hover),
.service-card:not(:hover) {
  animation: softBreath 6s ease-in-out infinite;
}

/* Floating petal hint on key CTA buttons */
.btn-primary:hover::after,
.btn-gold:hover::after {
  content: "✦";
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 12px;
  color: var(--gold);
  opacity: 0;
  animation: petalPop 600ms ease-out forwards;
  pointer-events: none;
}
@keyframes petalPop {
  0% { opacity: 0; transform: scale(0) rotate(0); }
  60% { opacity: 1; transform: scale(1.2) rotate(180deg); }
  100% { opacity: 0.8; transform: scale(1) rotate(360deg); top: -14px; right: -12px; }
}

/* Section-header gold dot pulse */
.section-header h2::after {
  animation: dotPulse 3.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scaleX(1); }
  50% { opacity: 1; transform: translateX(-50%) scaleX(1.4); }
}

/* Number counters glow on entrance */
.stat .num {
  position: relative;
}
.stat.visible .num,
.stat .num.visible {
  animation: numGlow 1200ms ease-out;
}
@keyframes numGlow {
  0% { filter: brightness(1) drop-shadow(0 0 0 rgba(184,152,92,0)); }
  50% { filter: brightness(1.18) drop-shadow(0 0 20px rgba(184,152,92,0.4)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 rgba(184,152,92,0)); }
}

/* Hero scroll hint — gentle bounce */
.scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--gold-deep);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
  animation: scrollBounce 2.6s ease-in-out infinite;
  z-index: 3;
}
.scroll-hint .arrow {
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, var(--gold), transparent);
}
@keyframes scrollBounce {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
  50% { transform: translate(-50%, 8px); opacity: 0.9; }
}

/* Smooth fade-in on page load */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
main {
  animation: pageFadeIn 600ms ease-out;
}

/* Promo banner subtle pulse to draw attention */
.promo-banner:not(.hidden) {
  animation: bannerSlideIn 580ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes bannerSlideIn {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* WhatsApp FAB — subtle attention pulse */
.wa-fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 80;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #25D366;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  animation: waPulse 3s ease-in-out infinite;
}
.wa-fab svg { width: 28px; height: 28px; fill: currentColor; }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.35); }
  50% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 0 0 16px rgba(37, 211, 102, 0); }
}
.wa-fab:hover { transform: scale(1.06); transition: transform 220ms ease; }

@media (max-width: 767px) {
  .wa-fab { bottom: 90px; right: 16px; width: 52px; height: 52px; }
}

/* Reduce all heavy animations on prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none !important; opacity: 0 !important; }
  .hero-bg img { animation: none !important; }
  .section-header h2::after { animation: none !important; }
  .pillar-card:not(:hover), .service-card:not(:hover) { animation: none !important; }
  .wa-fab { animation: none !important; }
  main { animation: none !important; }
  .scroll-hint { animation: none !important; }
}


/* ============================================================
   TEXT POSITIONING & READABILITY — final cleanup
   ============================================================ */

/* Universal text wrap behavior */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
}
p, li, .lead, .desc {
  text-wrap: pretty;
}

/* Prevent letter-spacing crushing on tiny screens */
@media (max-width: 480px) {
  .eyebrow, .pillars-eyebrow {
    letter-spacing: 0.16em !important;
    font-size: 11px !important;
  }
  .nav-link {
    letter-spacing: 0.05em !important;
    font-size: 12px !important;
  }
  .btn {
    letter-spacing: 0.04em !important;
  }
}

/* Line-height adjustments per context */
.lead {
  line-height: 1.55;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
section .lead {
  text-align: center;
}

/* Heading line-height */
.hero-h1 { line-height: 1.06; }
.section-header h2 { line-height: 1.12; max-width: 22ch; margin-left: auto; margin-right: auto; }

/* Prevent orphaned single words on the last line */
h1 br, h2 br, h3 br {
  display: none;
}
@media (min-width: 768px) {
  h1 br, h2 br, h3 br {
    display: inline;
  }
}

/* Container max widths refined for readability */
.section-header {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Form text alignment */
.form-field label,
.form-field input,
.form-field textarea {
  font-family: var(--font-body);
  letter-spacing: 0;
}

/* Accent colors readable on champagne backgrounds */
.eyebrow {
  text-shadow: 0 0 1px rgba(245, 239, 230, 0.4);
}

/* Long body paragraphs — improve readability */
section p:not(.lead):not(.eyebrow):not(.fineprint) {
  max-width: 64ch;
}

/* Lists — proper indentation */
ul, ol {
  padding-left: 1.4em;
}
li {
  line-height: 1.6;
  margin-bottom: 6px;
}

/* Tables responsive */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
@media (max-width: 640px) {
  table { font-size: 13px; }
  thead { display: none; }
  tr { display: block; margin-bottom: 12px; border: 1px solid var(--hairline); border-radius: 8px; padding: 10px; }
  td { display: flex; justify-content: space-between; padding: 6px 0; }
  td::before { content: attr(data-label); font-weight: 600; color: var(--ink-soft); }
}

/* Forms — proper spacing on mobile */
@media (max-width: 480px) {
  .form-field { margin-bottom: 12px; }
  .form-field input,
  .form-field textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    padding: 14px 16px !important;
  }
}

/* Improve focus styles on inputs */
.form-field input:focus,
.form-field textarea:focus,
input:focus,
textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Block FAB & sticky CTA from overlapping content at end of page */
main {
  padding-bottom: 0;
}
@media (max-width: 767px) {
  body { padding-bottom: 80px; }  /* Space for sticky mobile CTA */
}

/* Pre-launch banner on productos — spacing fix */
section[style*="background: var(--terracotta)"] p {
  max-width: 90vw;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Footer text alignment fixes */
.footer-col h5 {
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer-col ul { padding-left: 0; list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a {
  color: var(--cream);
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 200ms, color 200ms;
  font-size: 14px;
}
.footer-col a:hover { opacity: 1; color: var(--gold); }

/* Final mobile breakpoint protections */
@media (max-width: 360px) {
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-col { text-align: center; }
  .footer-col h5 { margin-top: 16px; }
}

/* Word-break safety for emails/URLs that could break layout */
a[href^="mailto:"], a[href^="tel:"] {
  word-break: break-word;
}

/* Print styles — for client review prints */
@media print {
  .mobile-menu, .navbar .nav-actions { display: none; }
  body { color: black; background: white; }
  a { color: black; text-decoration: underline; }
}


/* ============================================================
   MOBILE CRITICAL FIX — eliminate overlaps & stacking conflicts
   Reported issue: "en mobil el menu y textos se ven sobrepuestos"
   ============================================================ */

/* CRITICAL — Mobile only */
@media (max-width: 767px) {

  /* 1. Hide promo banner on mobile entirely
     Stacking with navbar caused text overlap on small screens.
     The 10% off promo is already in hero CTA + final #unete section.
  */
  .promo-banner,
  #promoBanner {
    display: none !important;
  }

  /* 2. Navbar — ALWAYS solid background on mobile (never transparent) */
  .navbar {
    background: rgba(245, 239, 230, 0.97) !important;
    backdrop-filter: saturate(180%) blur(16px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
    border-bottom: 1px solid rgba(184, 152, 92, 0.18) !important;
    padding: 8px 0 !important;
    box-shadow: 0 2px 12px rgba(26, 20, 16, 0.06);
    min-height: 60px;
  }
  .navbar.scrolled { padding: 6px 0 !important; }

  /* Navbar logo smaller on mobile (cleaner) */
  .navbar .brand-logo {
    height: 38px !important;
    max-width: 130px !important;
  }

  /* Hide nav-links on mobile (navbar collapse) */
  .nav-links { display: none !important; }

  /* Show only hamburger + cart + CTA on mobile */
  .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Hide "Únete" CTA in nav on mobile (saves space, hamburger has VIP link inside) */
  .nav-cta { display: none !important; }

  /* Force hamburger visible mobile */
  .nav-mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 50%;
    cursor: pointer;
  }

  /* 3. Hero — proper padding to clear navbar (no more overlap) */
  .hero {
    padding-top: 90px !important;
    min-height: auto !important;
  }
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .hero-copy {
    text-align: center;
  }

  /* Hero text sizing — robust against any overflow */
  .hero .eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
  }
  .hero-h1 {
    font-size: clamp(24px, 7.5vw, 32px) !important;
    line-height: 1.15 !important;
    margin: 12px 0 16px !important;
    letter-spacing: -0.01em;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .hero-h1 .script-word {
    font-size: 1.1em !important;
    display: inline-block;
  }
  .hero-h1 em { display: inline; }
  .hero-h1 em::after { display: none !important; }  /* Hide gold underline on tiny */
  .hero-sub {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
  }
  .hero-actions {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100%;
  }
  .hero-actions .btn {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
  }
  .hero-trust {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 18px !important;
    text-align: center;
  }
  .hero-trust .avatars {
    display: flex;
    justify-content: center;
  }
  .hero-trust .avatars img {
    width: 32px !important;
    height: 32px !important;
    border-width: 2px !important;
  }
  .hero-trust .trust-text {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* Hide hero floating sparkles on mobile (noise) */
  .hero::before, .hero::after { display: none !important; }

  /* Hero background image - center on face */
  .hero-bg img { object-position: center 25% !important; }

  /* Hide ken burns on mobile (perf + battery) */
  .hero-bg img { animation: none !important; }

  /* 4. Scroll hint hidden on mobile (clutter near sticky CTA) */
  .scroll-hint { display: none !important; }

  /* 5. Compare bar — push down to clear navbar + don't overlap on mobile */
  .compare-bar {
    top: 60px !important;
    padding: 8px 0 !important;
    font-size: 12px;
  }
  .compare-bar-inner { gap: 8px !important; }
  .compare-bar a { padding: 6px 10px !important; font-size: 11px !important; }

  /* 6. Sticky mobile CTA — ensure solid background, above WhatsApp FAB */
  .sticky-mobile-cta {
    z-index: 95 !important;
    background: rgba(26, 20, 16, 0.96) !important;
  }

  /* 7. WhatsApp FAB — move up to clear sticky CTA */
  .wa-fab {
    bottom: 88px !important;
    right: 14px !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 70 !important;
  }
  .wa-fab svg { width: 24px !important; height: 24px !important; }

  /* 8. Body padding for sticky CTA at bottom */
  body { padding-bottom: 76px !important; }

  /* 9. Section padding tighter on mobile (no waste) */
  main > section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  main > section.hero {
    padding-top: 90px !important;
    padding-bottom: 40px !important;
  }

  /* 10. Headings — strict max width to prevent line break weirdness */
  .section-header {
    padding: 0 8px;
  }
  .section-header h2,
  .pillars-heading {
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.2 !important;
    margin: 0 0 12px !important;
  }
  .section-header .lead {
    font-size: 14px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  /* 11. Lead form on hero — already removed, but if any duplicate appears */
  .hero .lead-card { display: none !important; }

  /* 12. Stats responsive — 2x2 with proper sizing */
  .stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .stat {
    padding: 16px 8px !important;
  }
  .stat .num {
    font-size: clamp(26px, 8vw, 36px) !important;
    display: block !important;
  }
  .stat .label {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin-top: 4px;
  }

  /* 13. Pillars/3 caminos stack with proper padding */
  .pillars-band { padding: 40px 0 !important; }
  .pillars-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .pillar-card {
    padding: 22px 18px !important;
  }
  .pillar-card h3 {
    font-size: 18px !important;
    margin-bottom: 6px !important;
  }
  .pillar-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* 14. Portfolio — already 2-col responsive (from earlier polish) */
  .portfolio-grid { gap: 10px !important; }
  .portfolio-card { border-radius: 12px !important; }
  .portfolio-card figcaption { padding: 10px 12px !important; }
  .portfolio-card .portfolio-cat { font-size: 14px !important; }
  .portfolio-card .portfolio-meta { font-size: 9px !important; }

  /* 15. Servicios cards stack tightly */
  .services {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .service-card .body {
    padding: 16px !important;
  }
  .service-card h3 {
    font-size: 18px !important;
    margin: 4px 0 8px !important;
  }
  .service-card .desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .service-card .meta { gap: 8px !important; flex-wrap: wrap; }
  .service-card .price { font-size: 22px !important; }

  /* 16. Pre-launch banner (productos) — full width, smaller text */
  section[style*="terracotta"][style*="text-align: center"] p {
    font-size: 12px !important;
    line-height: 1.5 !important;
    padding: 0 12px !important;
  }

  /* 17. FAQ accordion mobile */
  .faq-q { font-size: 14px !important; padding: 16px 12px !important; }
  .faq-a-inner { font-size: 13px !important; padding: 0 12px 16px !important; }

  /* 18. Footer — clean stacking */
  .footer { padding: 32px 0 60px !important; }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
  }
  .footer-brand {
    grid-column: 1 / -1 !important;
    text-align: center;
  }
  .footer-brand .footer-social {
    justify-content: center;
  }
  .footer-col h5 { font-size: 11px !important; margin-bottom: 10px !important; }
  .footer-col li { font-size: 13px !important; line-height: 1.5 !important; }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
    font-size: 12px !important;
  }

  /* 19. Promo code etc — readable on small screens */
  .promo-text-detail { display: none !important; }

  /* 20. Remove all section ornaments (decorative emojis) on mobile */
  .section-ornament,
  span.section-ornament { display: none !important; }

  /* 21. Solution/Método cards stack */
  .solution-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .solution-card {
    padding: 18px !important;
  }
  .solution-card h3 { font-size: 17px !important; }
  .solution-card p { font-size: 13px !important; line-height: 1.5 !important; }

  /* 22. Before/after slider — portrait + full width on mobile */
  .ba-wrap {
    aspect-ratio: 3 / 4 !important;
    margin: 0 auto !important;
  }

  /* 23. Hero CTA group spacing */
  .hero-actions { margin-top: 4px !important; }
}

/* Very small phones */
@media (max-width: 360px) {
  .hero-h1 { font-size: 22px !important; }
  .hero-sub { font-size: 14px !important; }
  .stats { grid-template-columns: 1fr 1fr !important; }
  .stat .num { font-size: 24px !important; }
  .portfolio-grid { grid-template-columns: 1fr !important; }
  .navbar .brand-logo { height: 34px !important; max-width: 110px !important; }
  .sticky-mobile-cta a { font-size: 12px !important; padding: 10px 12px !important; }
  .container, .container-narrow { padding-left: 14px !important; padding-right: 14px !important; }
}

/* Landscape mobile (e.g. iPhone in landscape) — keep usable */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 110vh !important; padding-top: 76px !important; }
  .hero-inner { padding: 12px 0 !important; }
}

/* ============================================================
   HERO SPLIT EDITORIAL — Carelis a la izquierda, copy a la derecha
   Sustituye el hero oscuro con overlay por un layout tipo revista.
   ============================================================ */
.hero.hero-split {
  min-height: auto !important;
  padding: 130px 0 var(--s-8) !important;
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(184, 152, 92, 0.06) 0%, transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(232, 196, 176, 0.10) 0%, transparent 60%),
    var(--cream) !important;
  overflow: hidden;
}

/* Neutralizar la foto de fondo y overlays oscuros del hero anterior */
.hero.hero-split .hero-bg,
.hero.hero-split .hero-bg::after,
.hero.hero-split .hero-bg::before,
.hero.hero-split .scroll-hint { display: none !important; }
.hero.hero-split::before,
.hero.hero-split::after { display: none !important; }

/* Grid editorial: foto a la izquierda, copy a la derecha */
.hero.hero-split .hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
  gap: var(--s-8) !important;
  align-items: center !important;
}

/* La foto como columna real, no como fondo */
.hero.hero-split .hero-photo {
  position: relative;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(58, 42, 32, 0.35);
  opacity: 0;
  transform: scale(1.02);
  animation: heroPhotoIn 900ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
}
.hero.hero-split .hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  filter: none !important;
  animation: none !important;
}

@keyframes heroPhotoIn {
  to { opacity: 1; transform: scale(1); }
}

/* Texto sobre fondo claro: cambiar a colores oscuros */
.hero.hero-split .hero-copy { color: var(--ink) !important; }
.hero.hero-split .hero-h1,
.hero.hero-split .hero-h1 .hl-inner { color: var(--ink) !important; }
.hero.hero-split .hero-sub { color: var(--ink-soft) !important; }
.hero.hero-split .hero-sub strong { color: var(--ink) !important; }
.hero.hero-split .hero-whisper,
.hero.hero-split .hero-whisper .ws { color: var(--gold-deep) !important; }
.hero.hero-split .hero-trust .trust-text { color: var(--ink-soft) !important; }
.hero.hero-split .hero-trust .trust-text strong { color: var(--gold-deep) !important; }
.hero.hero-split .hero-trust .avatars img { border-color: var(--cream) !important; }

/* Botón "light" sobre fondo claro necesita más definición */
.hero.hero-split .btn-light {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--ink-soft) !important;
}
.hero.hero-split .btn-light:hover {
  background: var(--ink) !important;
  color: var(--cream) !important;
  border-color: var(--ink) !important;
}

/* Cascada del texto un poco más rápida (el grid se ve completo más rápido) */
.hero.hero-split .hero-copy > * { animation-duration: 700ms !important; }
.hero.hero-split .hero-copy > *:nth-child(1) { animation-delay: 200ms !important; }
.hero.hero-split .hero-copy > *:nth-child(2) { animation-delay: 300ms !important; }
.hero.hero-split .hero-copy > *:nth-child(3) { animation-delay: 400ms !important; }
.hero.hero-split .hero-copy > *:nth-child(4) { animation-delay: 500ms !important; }
.hero.hero-split .hero-copy > *:nth-child(5) { animation-delay: 600ms !important; }
.hero.hero-split .hero-copy > *:nth-child(6) { animation-delay: 700ms !important; }

/* Tablet — apretar gap, foto algo más chica */
@media (max-width: 1024px) {
  .hero.hero-split .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important;
    gap: var(--s-6) !important;
  }
}

/* Mobile — apilar: foto arriba, copy debajo */
@media (max-width: 767px) {
  .hero.hero-split {
    padding: 100px 0 var(--s-7) !important;
  }
  .hero.hero-split .hero-inner {
    grid-template-columns: 1fr !important;
    gap: var(--s-5) !important;
  }
  .hero.hero-split .hero-photo {
    max-height: 60vh;
    margin: 0 auto;
  }
  .hero.hero-split .hero-photo img {
    aspect-ratio: 3 / 4;
    max-height: 60vh;
  }
  .hero.hero-split .hero-h1 {
    font-size: clamp(2rem, 7vw, 2.6rem) !important;
    line-height: 1.05 !important;
  }
  .hero.hero-split .hero-sub { font-size: 16px !important; line-height: 1.6 !important; }
}

/* Reduced motion — sin animar entrada de la foto */
@media (prefers-reduced-motion: reduce) {
  .hero.hero-split .hero-photo {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   HERO OVERLAY — foto fullbleed + texto sobrepuesto editorial
   Entra animado DESPUÉS del page-loader (escucha cparra:loader-done).
   ============================================================ */
.hero.hero-overlay {
  position: relative;
  min-height: 100vh !important;
  min-height: 100svh !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  padding: 110px 0 var(--s-8) !important;
  background: var(--ink) !important;
}
/* Neutralizar el doble overlay terracotta antiguo del hero (.hero-bg::after) */
.hero.hero-overlay .hero-bg::after,
.hero.hero-overlay .hero-bg::before {
  display: none !important;
}
.hero.hero-overlay .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero.hero-overlay .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1400ms var(--ease-soft), transform 1800ms var(--ease-soft);
  filter: none !important;
}
.hero.hero-overlay.is-animated .hero-bg img {
  opacity: 1;
  transform: scale(1);
}
.hero.hero-overlay .hero-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(26, 20, 16, 0.65) 0%, rgba(26, 20, 16, 0.45) 50%, rgba(26, 20, 16, 0.25) 100%),
    linear-gradient(180deg, rgba(26, 20, 16, 0.20) 0%, rgba(26, 20, 16, 0.40) 60%, rgba(26, 20, 16, 0.70) 100%);
  z-index: 1;
}
.hero.hero-overlay .container {
  position: relative;
  z-index: 2;
}
.hero.hero-overlay .hero-content {
  max-width: 620px;
}
.hero.hero-overlay .hero-content > * {
  opacity: 0;
  transform: translateY(24px);
}
.hero.hero-overlay.is-animated .hero-content > * {
  animation: heroFadeUp 900ms var(--ease-soft) forwards;
}
.hero.hero-overlay.is-animated .hero-content > *:nth-child(1) { animation-delay: 200ms; }
.hero.hero-overlay.is-animated .hero-content > *:nth-child(2) { animation-delay: 350ms; }
.hero.hero-overlay.is-animated .hero-content > *:nth-child(3) { animation-delay: 500ms; }
.hero.hero-overlay.is-animated .hero-content > *:nth-child(4) { animation-delay: 650ms; }
.hero.hero-overlay.is-animated .hero-content > *:nth-child(5) { animation-delay: 800ms; }

.hero.hero-overlay .hero-eyebrow {
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero.hero-overlay .hero-eyebrow .eb-dot { color: var(--gold); }
.hero.hero-overlay .hero-h1 {
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: var(--s-5) 0 var(--s-4);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
.hero.hero-overlay .hero-h1 em {
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
}
.hero.hero-overlay .hero-sub {
  color: rgba(245, 239, 230, 0.92);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.55;
  max-width: 540px;
  margin-bottom: var(--s-6);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
}
.hero.hero-overlay .hero-sub strong {
  color: var(--cream);
  font-weight: 600;
}
.hero.hero-overlay .hero-actions {
  display: flex;
  margin-bottom: var(--s-6);
}
.hero.hero-overlay .btn-hero {
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.hero.hero-overlay .btn-hero:hover {
  background: var(--gold-deep);
  color: var(--ink);
}
.hero.hero-overlay .hero-trust {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.hero.hero-overlay .hero-trust .avatars {
  display: flex;
}
.hero.hero-overlay .hero-trust .avatars img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--cream);
  margin-left: -10px;
  object-fit: cover;
  object-position: center top;
  background: var(--ink);
}
.hero.hero-overlay .hero-trust .avatars img:first-child { margin-left: 0; }
.hero.hero-overlay .hero-trust .trust-text {
  color: rgba(245, 239, 230, 0.85);
  font-size: 13px;
  line-height: 1.4;
}
.hero.hero-overlay .hero-trust .trust-text strong {
  color: var(--cream);
  font-weight: 600;
}

/* Mobile (≤767px) — foto fullbleed pero texto al pie para máximo impacto */
@media (max-width: 767px) {
  .hero.hero-overlay {
    min-height: 92vh !important;
    min-height: 92svh !important;
    padding: 100px 0 var(--s-7) !important;
    align-items: flex-end !important;
    text-align: left !important;
  }
  .hero.hero-overlay .hero-bg img {
    object-position: center 18%;
  }
  .hero.hero-overlay .hero-bg-overlay {
    background:
      linear-gradient(180deg, rgba(26, 20, 16, 0.25) 0%, rgba(26, 20, 16, 0.50) 45%, rgba(26, 20, 16, 0.88) 100%);
  }
  .hero.hero-overlay .hero-content { max-width: 100%; }
  .hero.hero-overlay .hero-h1 {
    font-size: clamp(2rem, 8vw, 2.6rem);
    line-height: 1.05;
  }
  .hero.hero-overlay .hero-sub {
    font-size: 15px;
    line-height: 1.55;
  }
}

/* Reduced motion — entra sin animar */
@media (prefers-reduced-motion: reduce) {
  .hero.hero-overlay .hero-bg img,
  .hero.hero-overlay .hero-content > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   COLOR SWAP — terracotta dark → gold
   El --terracotta ahora es dorado. Los textos sobre fondo terracotta
   (botones, barra mobile, etc.) necesitan pasar de cream → ink para
   mantener contraste WCAG. También ajusto el shine sweep del btn-primary
   para que el blanco translúcido no se mezcle con el oro.
   ============================================================ */
.btn-primary { color: var(--ink); }
.btn-primary:hover { background: var(--terracotta-deep); color: var(--ink); }
.btn-primary::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
}
.sticky-mobile-cta-book {
  background: var(--terracotta);
  color: var(--ink);
}
.btn-gold { color: var(--ink); }
.btn-gold:hover { color: var(--ink); }
/* Links con --terracotta-deep como color de texto pueden quedar gold-deep
   sobre cream → bordeline contraste. Forzamos ink-soft para legibilidad. */
.btn-link { color: var(--ink); }
.btn-link:hover { color: var(--gold-deep); }
/* Consent checkbox link (hardcoded en JS) — ajusto vía especificidad */
form[data-demo-form="lead"] a[href="privacidad.html"] {
  color: var(--ink) !important;
  text-decoration-color: var(--gold);
}

/* Add-to-cart estaba en --ink dark; lo paso a dorado para alinearlo
   con el cambio global de marca. Hover: gold-deep. */
.add-to-cart-btn {
  background: var(--terracotta);
  color: var(--ink);
}
.add-to-cart-btn:hover {
  background: var(--terracotta-deep);
  color: var(--ink);
}
.add-to-cart-btn.added {
  background: var(--gold-deep);
  color: var(--cream);
}

/* ============================================================
   BOTONES PREMIUM — depth / 3D feel para CTAs principales
   Aplica a hero CTA, "Reservar mi cita" en pricing, "Ver toda la
   colección" en productos, etc. (todos los .btn-primary.btn-lg).
   ============================================================ */
.btn-primary.btn-lg {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.16),
    0 4px 12px rgba(184, 152, 92, 0.28),
    0 14px 32px -10px rgba(184, 152, 92, 0.42);
  transform: translateY(0);
  transition: transform 220ms var(--ease-soft), box-shadow 240ms var(--ease-soft), background 240ms var(--ease-soft);
}
.btn-primary.btn-lg:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 10px 22px rgba(184, 152, 92, 0.38),
    0 22px 44px -10px rgba(184, 152, 92, 0.50);
}
.btn-primary.btn-lg:active {
  transform: translateY(-1px);
  transition-duration: 100ms;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    0 4px 8px rgba(184, 152, 92, 0.22);
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary.btn-lg,
  .btn-primary.btn-lg:hover,
  .btn-primary.btn-lg:active {
    transform: none;
    transition: background 200ms ease;
  }
}

/* ============================================================
   MOBILE — IMÁGENES COMPACTAS
   Sin esto las imágenes ocupan todo el viewport y dominan
   la pantalla. Las acotamos a ~78vw y reducimos aspect-ratios
   muy verticales (4:5 → 1:1, 3:4 → 4:5) para que sean más
   "scrolleables" en el celular.
   ============================================================ */
@media (max-width: 767px) {
  .service-card .image,
  .pillar-card-image,
  .solution-card-image,
  .product-card .product-image,
  .course-card .image,
  .service-deep-img,
  .brand-story-image,
  .ba-wrap {
    max-width: min(360px, 78vw);
    margin-left: auto;
    margin-right: auto;
  }
  .portfolio-card,
  .gallery-strip img,
  .upsell img {
    max-width: min(360px, 78vw);
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .portfolio img {
    max-width: 100%;
  }
  .service-card .image,
  .service-card .image img,
  .pillar-card-image,
  .pillar-card-image img,
  .solution-card-image,
  .solution-card-image img,
  .service-deep-img img,
  .brand-story-image img {
    aspect-ratio: 1 / 1;
  }
  .portfolio img,
  .portfolio-card img {
    aspect-ratio: 4 / 5;
  }
  .ba-wrap {
    aspect-ratio: 1 / 1;
  }
}

/* ============================================================
   MOBILE BUBBLE NAV — píldora flotante centrada arriba
   Reemplaza el navbar full-width en mobile. Desktop intacto.
   ============================================================ */
.mobile-bubble-nav { display: none; }

@media (max-width: 767px) {
  /* Ocultar navbar viejo en mobile */
  .navbar { display: none !important; }

  .mobile-bubble-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: 50%;
    z-index: 100;
    padding: 7px 14px 7px 7px;
    border-radius: 999px;
    background: rgba(245, 239, 230, 0.78);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid rgba(184, 152, 92, 0.30);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.55) inset,
      0 12px 28px -8px rgba(26, 20, 16, 0.22),
      0 4px 10px -2px rgba(26, 20, 16, 0.14);
    opacity: 0;
    transform: translate(-50%, -14px) scale(0.96);
    animation: bubbleNavEnter 720ms cubic-bezier(0.34, 1.56, 0.64, 1) 400ms forwards;
    transition:
      gap 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
      padding 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 320ms ease,
      background 320ms ease,
      opacity 240ms ease;
  }

  .mb-logo {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(26, 20, 16, 0.22), 0 0 0 1px rgba(184, 152, 92, 0.25);
    background: var(--ink);
    transition: width 320ms cubic-bezier(0.34, 1.56, 0.64, 1), height 320ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 320ms ease;
  }
  .mb-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: brand-pulse 3.6s ease-in-out infinite;
    transform-origin: center;
  }

  .mb-cart, .mb-burger {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.50);
    border: 1px solid rgba(184, 152, 92, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    cursor: pointer;
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms, width 320ms cubic-bezier(0.34, 1.56, 0.64, 1), height 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    flex-shrink: 0;
    padding: 0;
  }
  .mb-cart:active, .mb-burger:active { transform: scale(0.90); }
  .mb-cart:hover, .mb-burger:hover { background: rgba(255, 255, 255, 0.75); }

  .mb-cart svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mb-cart .cart-count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--terracotta);
    color: var(--ink);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    transform: scale(0);
    transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(245, 239, 230, 0.6);
  }
  .mb-cart .cart-count.visible { transform: scale(1); }

  /* Burger: 3 líneas que morfan a X al abrir */
  .mb-burger span {
    width: 16px;
    height: 1.8px;
    background: var(--ink);
    border-radius: 2px;
    position: relative;
    display: block;
    transition: background 200ms ease;
  }
  .mb-burger span::before,
  .mb-burger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 16px;
    height: 1.8px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1), top 220ms ease;
  }
  .mb-burger span::before { top: -5px; }
  .mb-burger span::after  { top: 5px; }
  .mb-burger.open span { background: transparent; }
  .mb-burger.open span::before { top: 0; transform: rotate(45deg); }
  .mb-burger.open span::after  { top: 0; transform: rotate(-45deg); }

  /* Scroll-react state: cuando bajás contenido, la burbuja se compacta.
     Cuando volvés a subir, vuelve a su tamaño completo. */
  .mobile-bubble-nav.scrolled {
    gap: 10px;
    padding: 4px 10px 4px 4px;
    background: rgba(245, 239, 230, 0.88);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.55) inset,
      0 6px 18px -6px rgba(26, 20, 16, 0.22),
      0 2px 6px -2px rgba(26, 20, 16, 0.12);
  }
  .mobile-bubble-nav.scrolled .mb-logo {
    width: 36px;
    height: 36px;
  }
  .mobile-bubble-nav.scrolled .mb-cart,
  .mobile-bubble-nav.scrolled .mb-burger {
    width: 32px;
    height: 32px;
  }
  .mobile-bubble-nav.scrolled .mb-cart svg {
    width: 15px;
    height: 15px;
  }
  .mobile-bubble-nav.scrolled .mb-burger span,
  .mobile-bubble-nav.scrolled .mb-burger span::before,
  .mobile-bubble-nav.scrolled .mb-burger span::after {
    width: 13px;
  }

  /* Cuando el drawer está abierto, suavizamos la burbuja para que no
     compita visualmente con el menú abierto */
  body:has(.mobile-menu.open) .mobile-bubble-nav {
    opacity: 0.4;
    transform: translate(-50%, -4px) scale(0.96);
    transition: opacity 240ms ease, transform 240ms ease;
  }
}

@keyframes bubbleNavEnter {
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bubble-nav {
    animation: none;
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  .mb-logo img { animation: none; }
}

/* ============================================================
   BOTONES — estilo Uiverse adaptado (blanco + texto negro + ripple)
   Carelis pidió integrar este estilo de uiverse.io/cssbuttons-io:
   - Fondo blanco, texto negro → máxima legibilidad
   - Píldora rounded (matches our 999px)
   - Hover: lift -3px + shadow
   - Active: lift -1px + lighter shadow
   - ::after ripple que escala y se desvanece en hover
   El brand accent gold se mantiene en bordes, hover overlay y el loader.
   ============================================================ */
.btn-primary,
.btn-gold,
.add-to-cart-btn,
.sticky-mobile-cta-book {
  position: relative !important;
  background: #FFFFFF !important;
  background-image: none !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  border: 1px solid rgba(184, 152, 92, 0.28) !important;
  isolation: isolate;
  transition:
    transform 220ms var(--ease-soft),
    box-shadow 240ms var(--ease-soft),
    border-color 200ms ease !important;
}

/* Hover: lift + shadow más pronunciada + borde dorado más visible */
.btn-primary:hover,
.btn-gold:hover,
.add-to-cart-btn:hover,
.sticky-mobile-cta-book:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 10px 24px rgba(26, 20, 16, 0.18),
    0 4px 10px rgba(184, 152, 92, 0.20) !important;
  color: var(--ink) !important;
  border-color: rgba(184, 152, 92, 0.55) !important;
}

/* Active: lift menor, sombra más chica (estado presionado) */
.btn-primary:active,
.btn-gold:active,
.add-to-cart-btn:active,
.sticky-mobile-cta-book:active {
  transform: translateY(-1px) !important;
  box-shadow:
    0 5px 12px rgba(26, 20, 16, 0.18),
    0 2px 6px rgba(184, 152, 92, 0.18) !important;
}

/* Ripple del Uiverse — círculo blanco que escala y se desvanece en hover.
   Aprovecho ::after, neutralizando el shine sweep viejo de styles.css */
.btn-primary::after,
.btn-gold::after,
.add-to-cart-btn::after,
.sticky-mobile-cta-book::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: #FFFFFF !important;
  z-index: -1 !important;
  opacity: 1 !important;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 380ms ease !important;
  pointer-events: none !important;
}
.btn-primary:hover::after,
.btn-gold:hover::after,
.add-to-cart-btn:hover::after,
.sticky-mobile-cta-book:hover::after {
  transform: scaleX(1.4) scaleY(1.6) !important;
  opacity: 0 !important;
}

/* btn-lg conserva la depth premium del PR #6 (issue #4-bis), pero
   ahora con shadows que matchean el look blanco/dorado */
.btn-primary.btn-lg {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 0 rgba(184, 152, 92, 0.08),
    0 6px 14px rgba(26, 20, 16, 0.10),
    0 14px 32px -10px rgba(26, 20, 16, 0.18) !important;
}
.btn-primary.btn-lg:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 rgba(184, 152, 92, 0.10),
    0 14px 28px rgba(26, 20, 16, 0.14),
    0 24px 48px -10px rgba(26, 20, 16, 0.22),
    0 0 0 1px rgba(184, 152, 92, 0.18) !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-gold, .add-to-cart-btn, .sticky-mobile-cta-book {
    transition: none !important;
  }
  .btn-primary::after, .btn-gold::after,
  .add-to-cart-btn::after, .sticky-mobile-cta-book::after {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-gold, .add-to-cart-btn, .sticky-mobile-cta-book {
    transition: none !important;
  }
}

/* ============================================================
   STATS SECTION — Rediseño femenino premium
   4 cards con cream/champagne gradient, borde dorado vivo,
   números con shine, sparkles decorativos en esquinas,
   entrada con bounce y hover con shine-pass.
   ============================================================ */
.stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px !important;
  padding: 32px 24px !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
  position: relative;
}

/* Cards individuales con look premium */
.stat {
  position: relative;
  padding: 28px 20px 26px !important;
  border-radius: 18px !important;
  background: linear-gradient(155deg, #FFFFFF 0%, #F5EFE6 35%, #E8DCC8 100%) !important;
  border: 1px solid rgba(184, 152, 92, 0.32) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 6px 18px -6px rgba(184, 152, 92, 0.28),
    0 12px 32px -12px rgba(26, 20, 16, 0.18) !important;
  overflow: hidden !important;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 320ms ease;
}

/* Línea dorada superior — accent decorativo */
.stat::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 40% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent 0%, #C9A86C 25%, #B8985C 50%, #C9A86C 75%, transparent 100%) !important;
  border-radius: 0 0 2px 2px !important;
  inset: auto !important;
  opacity: 1 !important;
  transition: width 320ms ease, opacity 320ms ease;
}

/* Sparkle decorativo en esquina superior derecha */
.stat::after {
  content: "✦";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 12px;
  color: rgba(184, 152, 92, 0.55);
  animation: statSparkle 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes statSparkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.15) rotate(180deg); }
}

/* Hover: lift + glow + accent crece + shimmer */
.stat:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 12px 28px -8px rgba(184, 152, 92, 0.42),
    0 22px 44px -14px rgba(26, 20, 16, 0.22) !important;
}
.stat:hover::before {
  width: 70% !important;
}

/* Números — más grandes con gradient gold y entrada con bounce */
.stat .num {
  font-family: var(--font-display) !important;
  font-size: clamp(2.4rem, 7vw, 3.4rem) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
  background: linear-gradient(135deg, #C9A86C 0%, #B8985C 50%, #8B7340 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block !important;
  letter-spacing: -0.02em;
  filter: drop-shadow(0 2px 8px rgba(184, 152, 92, 0.18));
}

/* Star del rating — gira y glow constante */
.stat .num .sparkle {
  display: inline-block;
  -webkit-text-fill-color: #B8985C;
  color: #B8985C;
  font-size: 0.75em;
  margin-left: 4px;
  vertical-align: 0.12em;
  animation: ratingStarSpin 6s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(184, 152, 92, 0.6));
}
@keyframes ratingStarSpin {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(180deg) scale(1.18); }
}

/* Label — más legible, gold deep, letter-spacing balanceado */
.stat .label {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ink-soft) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}

/* Entrada animada cuando la sección entra al viewport.
   Reusa el .reveal/.visible existente y agrega bounce. */
.stats.reveal .stat {
  opacity: 0;
  transform: translateY(28px) scale(0.92);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 720ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stats.reveal.visible .stat {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.stats.reveal.visible .stat:nth-child(1) { transition-delay: 80ms; }
.stats.reveal.visible .stat:nth-child(2) { transition-delay: 200ms; }
.stats.reveal.visible .stat:nth-child(3) { transition-delay: 320ms; }
.stats.reveal.visible .stat:nth-child(4) { transition-delay: 440ms; }

/* Mobile: 2x2 grid con padding ajustado */
@media (max-width: 767px) {
  .stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 24px 12px !important;
  }
  .stat {
    padding: 22px 12px 20px !important;
    border-radius: 16px !important;
  }
  .stat .num { font-size: clamp(2rem, 9vw, 2.4rem) !important; }
  .stat .label { font-size: 10px !important; letter-spacing: 0.14em !important; }
  .stat::after { top: 6px; right: 8px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .stat,
  .stat::after,
  .stat .num .sparkle,
  .stats.reveal .stat {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}