*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; overscroll-behavior: none; }

:root {
  --ink:    #1E1A4E;
  --accent: #2E2A8C;
  --accent2:#9B8FD4;
  --accent3:#F0C0D0;
  --accent-bright: #7B5EA7;
  --light:  #F2EEF9;
  --white:  #ffffff;
  --muted:  #8880A8;
  --line:   #DED8F4;

  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(46,42,140,.07);
  --shadow:    0 10px 32px rgba(46,42,140,.11);
  --shadow-lg: 0 22px 60px rgba(46,42,140,.18);

  --gradient-cta: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 55%, #E8619B 100%);

  /* Fixed-width centered container, like a max-width:1280px wrapper, without extra markup */
  --gutter: max(32px, calc((100% - 1280px) / 2));
}
@media (max-width:600px) {
  :root { --gutter: 20px; }
}

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior: none;
}
/* Locks background scroll while the mobile drawer (.mobile-menu) is open —
   toggled by main.js alongside .mobile-menu.open, so the page behind the
   drawer can't keep scrolling underneath it. */
body.menu-open { overflow: hidden; }

.accent-word {
  color: var(--accent-bright);
  font-weight: 700;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; width: 100%; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter);
  background:rgb(255 255 255);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transition: padding .3s, box-shadow .3s;
}
nav.scrolled { padding-top: 10px; padding-bottom: 10px; box-shadow: 0 4px 30px rgba(46,42,140,.12); }
.logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo img { height: 78px; width: auto; object-fit: contain; transition: opacity .2s; }
.logo:hover img { opacity: .8; }
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
  font-family: var(--font-heading);
  font-size: 1.1rem; font-weight: 500;
  color: var(--muted); text-decoration: none;
  transition: color .2s;
}
.nav-links a:hover { color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-ig {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color .2s;
}
.nav-ig:hover { color: var(--accent); }
.nav-ig svg { width: 16px; height: 16px; }
.nav-cta {
  font-family: var(--font-heading);
  font-size: 1.1rem; font-weight: 600;
  color: var(--white); text-decoration: none;
  background: var(--gradient-cta);
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow); filter: brightness(1.06); }

/* Hamburger — rounded button, not just bare bars */
.hamburger {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; width: 44px; height: 44px;
  background: var(--light); border: none; border-radius: var(--radius-sm);
  z-index: 110;
  transition: background .2s;
}
.hamburger:hover { background: var(--line); }
.hamburger span {
  display: block; width: 20px; height: 2px;
  background: var(--accent); border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu — slide-in drawer from the right, with a blurred backdrop */
.mobile-menu-backdrop {
  position: fixed; inset: 0; z-index: 97;
  background: rgba(14,12,46,.5);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.mobile-menu-backdrop.open { opacity: 1; pointer-events: auto; }
/* Closed, this sits at right:0 then slides fully off-screen via
   translateX(100%) — its own box extends ~320px past the right edge of the
   viewport while invisible, but body's overflow-x:hidden alone already
   contains that. Do NOT also add overflow-x:hidden on `html` to be extra
   safe here — that breaks the standard "body's overflow controls the whole
   page" delegation (html stops being `visible`, so html and body become two
   independent nested scroll containers instead), which broke scrolling
   outright on both desktop and mobile in production (Aug 2026, reverted
   fast). Any "phantom edge scroll" complaint on mobile is almost certainly
   the native elastic bounce — see `overscroll-behavior` on `html`/`body`. */
.mobile-menu {
  display: flex; flex-direction: column;
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 98;
  width: min(320px, 82vw);
  background: linear-gradient(165deg, var(--accent) 0%, var(--ink) 60%);
  padding: 110px 0 24px;
  gap: 0;
  overflow-y: auto;
  transform: translateX(100%);
  pointer-events: none;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  border-left: 1px solid rgba(155,143,212,.35);
  box-shadow: -24px 0 60px rgba(14,12,46,.45);
}
.mobile-menu.open { transform: translateX(0); pointer-events: all; }
.mobile-menu a {
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 500;
  color: rgba(255,255,255,.75); text-decoration: none;
  padding: 16px 28px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  width: 100%;
  transition: color .18s, padding-left .18s, background .18s;
  display: block;
}
.mobile-menu a:hover { color: #fff; padding-left: 32px; background: rgba(255,255,255,.05); }
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu a.mobile-menu-cta {
  width: auto;
  margin: 20px 28px 0;
  padding: 14px 22px;
  text-align: center;
  font-weight: 600;
  color: var(--white);
  background: var(--gradient-cta);
  border-radius: var(--radius-pill);
  border-bottom: none;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.mobile-menu a.mobile-menu-cta:hover {
  color: var(--white);
  padding: 14px 22px;
  background: var(--gradient-cta);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  filter: brightness(1.06);
}
/* The drawer now runs full-height, so hide the floating action buttons
   while it's open — otherwise they sit on top of the drawer's WhatsApp CTA. */
.mobile-menu.open ~ .chat-btn,
.mobile-menu.open ~ .float-wa,
.mobile-menu.open ~ .scroll-top {
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}

/* ── HERO ── */
#hero {
  min-height: 100vh; /* fallback for browsers without svh support */
  min-height: 100svh; /* small viewport height — fits the area actually visible with the mobile browser's address bar shown, so there's no phantom extra scroll on first load like plain 100vh causes */
  background:
    radial-gradient(ellipse at 15% 55%, rgba(155,107,212,.28) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 25%, rgba(240,192,208,.18) 0%, transparent 48%),
    radial-gradient(ellipse at 50% 90%, rgba(46,42,140,.4) 0%, transparent 60%),
    linear-gradient(135deg, #0E0C2E 0%, #2E2A8C 30%, #5B3488 55%, #9B6BD4 78%, #C8A4DF 92%, #F0C0D0 100%);
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center;
  padding-top: 76px;
  position: relative; overflow: hidden;
}
#hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(220deg, rgba(240,192,208,.12) 0%, transparent 40%, rgba(155,143,212,.1) 70%, transparent 100%);
  animation: heroDrift 12s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  0%   { opacity: .6; transform: scale(1) translate(0,0); }
  100% { opacity: 1;  transform: scale(1.06) translate(2%,-2%); }
}

.hero-star {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.8);
  animation: twinkle 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes twinkle {
  0%,100% { opacity: .15; transform: scale(.7); }
  50%      { opacity: 1;   transform: scale(1.3); }
}
.hero-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: floatOrb 9s ease-in-out infinite;
}
@keyframes floatOrb {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-28px) scale(1.08); }
}
.hero-shoot {
  position: absolute; pointer-events: none;
  width: 1.5px; height: 70px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.85));
  border-radius: 100px;
  animation: shootStar 6s ease-in infinite;
}
@keyframes shootStar {
  0%   { opacity: 0; transform: translateX(0) translateY(0) rotate(215deg); }
  5%   { opacity: 1; }
  70%  { opacity: .6; }
  100% { opacity: 0; transform: translateX(-420px) translateY(180px) rotate(215deg); }
}
.hero-ring {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(155,143,212,.25);
  animation: pulseRing 5s ease-out infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(.6); opacity: .7; }
  100% { transform: scale(1.8); opacity: 0; }
}

.hero-text {
  padding: 60px var(--gutter);
  display: flex; flex-direction: column;
}
.hero-eyebrow {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent2); margin-bottom: 24px;
  animation: fadeUp .7s .1s both;
}
.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -.01em;
  color: #fff; margin-bottom: 24px;
  animation: titleReveal .95s .35s both;
}
.hero-title em {
  font-style: normal; font-weight: 700;
  background: linear-gradient(100deg, var(--accent3) 10%, #ffd6ec 50%, var(--accent2) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmerPink 4s 1.4s ease-in-out infinite alternate;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes titleReveal {
  0%   { opacity: 0; transform: translateY(36px) skewY(2deg); clip-path: inset(0 0 100% 0); }
  40%  { clip-path: inset(0 0 0% 0); }
  100% { opacity: 1; transform: translateY(0) skewY(0deg); clip-path: inset(0 0 0% 0); }
}
@keyframes shimmerPink {
  from { background-position: 0% 50%; filter: drop-shadow(0 0 0 rgba(240,192,208,0)); }
  to   { background-position: 100% 50%; filter: drop-shadow(0 0 18px rgba(240,192,208,.5)); }
}
.hero-title em { background-size: 200% auto; }
.hero-desc {
  font-size: 1.1rem; font-weight: 400;
  color: rgba(255,255,255,.6); line-height: 1.75;
  max-width: 420px; margin-bottom: 24px;
  animation: fadeUp .75s .75s both;
}
.hero-location {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: rgba(255,255,255,.45);
  font-weight: 500; letter-spacing: .04em;
  margin-bottom: 40px;
  animation: fadeUp .65s .95s both;
}
.hero-location svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent2); }
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; animation: fadeUp .65s 1.1s both; }
.btn-main {
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff;
  padding: 15px 32px; font-size: .82rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px rgba(37,211,102,.35);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.btn-main:hover { background: #1DB954; transform: translateY(-3px); box-shadow: 0 14px 38px rgba(37,211,102,.45); }
.btn-ig {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent2); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: opacity .2s;
}
.btn-ig:hover { opacity: .7; }

.hero-cake {
  display: flex; align-items: center; justify-content: center;
  padding: 40px var(--gutter) 40px 0;
  position: relative; height: 100%;
}
.hero-cake-wrap {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  width: 460px; height: 560px;
}

/* ── HERO PHOTOS — real toppers, floating over the hero ── */
.hero-photo {
  position: absolute;
  filter: drop-shadow(0 18px 34px rgba(14,12,46,.5)) drop-shadow(0 4px 10px rgba(14,12,46,.3));
}
/* Fade-in-on-load effect (Aug 2026) — purely visual, network priority is
   unchanged: the 3 hero <img> tags stay eager/preloaded/fetchpriority as
   before, this only animates how they reveal once decoded. .loaded is
   toggled by main.js on the image's load event (or immediately if already
   cached/complete). Scoped to the <img> itself, not the .hero-photo
   wrapper, since the wrapper's `transform` is fully owned by the
   heroFloatA/C/D keyframe animations — see "Hero photos" in CLAUDE.md. */
.hero-photo img {
  display: block; width: 100%; height: auto;
  opacity: 0;
  filter: blur(10px);
  transform: scale(.96);
  transition: opacity .6s ease-out, filter .6s ease-out, transform .6s ease-out;
}
.hero-photo img.loaded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo img { transition: none; }
}

/* 3-up collage, spread toward the corners to minimize overlap:
   c (top-left) · a (right, mid) · d (bottom-left, largest/front) */
.hero-photo-c {
  width: 293px; top: -10%; left: -20%;
  z-index: 1;
  animation: heroFloatC 4.8s ease-in-out infinite .2s;
}
.hero-photo-a {
  width: 285px; top: 2%; right: -26%;
  z-index: 2;
  animation: heroFloatA 4.5s ease-in-out infinite;
}
.hero-photo-d {
  width: 293px; bottom: -18%; left: -2%;
  z-index: 3;
  animation: heroFloatD 5s ease-in-out infinite .7s;
}
@keyframes heroFloatA {
  0%,100% { transform: rotate(-7deg) translateY(0); }
  50%      { transform: rotate(-7deg) translateY(-14px); }
}
@keyframes heroFloatC {
  0%,100% { transform: rotate(6deg) translateY(0); }
  50%      { transform: rotate(6deg) translateY(-11px); }
}
@keyframes heroFloatD {
  0%,100% { transform: rotate(-5deg) translateY(0); }
  50%      { transform: rotate(-5deg) translateY(-13px); }
}
.c-sparkle {
  position:absolute; pointer-events:none;
  animation:cSparkle 2.5s ease-in-out infinite;
}
@keyframes cSparkle {
  0%,100% { opacity:0; transform:scale(0) rotate(0deg); }
  50%      { opacity:1; transform:scale(1) rotate(180deg); }
}
.cs1 { top:12%; left:5%; animation-delay:0s; }
.cs2 { top:20%; right:8%; animation-delay:.7s; }
.cs3 { bottom:28%; left:4%; animation-delay:1.4s; }
.cs4 { bottom:18%; right:6%; animation-delay:.4s; }
.cs5 { top:45%; left:2%; animation-delay:1s; }
.cs6 { top:35%; right:3%; animation-delay:1.8s; }

/* ── FEATURES STRIP ── */
.features-strip {
  background: var(--light);
  display: grid; grid-template-columns: repeat(4,1fr); gap: 18px;
  padding: 48px var(--gutter);
}
.feature {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 26px 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .25s, box-shadow .25s;
}
.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.feature-icon {
  font-size: 1.3rem;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--light);
  border-radius: var(--radius-sm);
}
.feature-title { font-family: var(--font-heading); font-size: .95rem; font-weight: 700; color: var(--ink); }
.feature-desc  { font-size: .88rem; color: var(--muted); font-weight: 400; line-height: 1.55; }

/* ── SHARED SECTION ── */
section { padding: 30px var(--gutter); }
.section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px; margin-bottom: 40px;
}
.section-title { font-family: var(--font-heading); font-size:clamp(2rem,3.5vw,2.9rem); font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.section-note { font-size:.9rem; color:var(--muted); font-weight:400; max-width:220px; text-align:right; line-height:1.6; }

/* ── PRODUCTOS ── */
#productos { background: var(--light); }
.products-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.flip-card {
  height:320px; perspective:1000px; cursor:pointer;
}
.flip-card-inner {
  width:100%; height:100%;
  position:relative; transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.flip-card:hover .flip-card-inner { transform:rotateY(180deg); }
.flip-card-front, .flip-card-back {
  position:absolute; inset:0; backface-visibility:hidden;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:32px 24px; text-align:center;
  gap:12px;
  border-radius: var(--radius-lg);
}
.flip-card-front {
  background:var(--white);
  border:1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s;
}
.flip-card:hover .flip-card-front { box-shadow: var(--shadow); }
.fc-icon {
  font-size:2.4rem;
  display:inline-block;
  transform-style:preserve-3d;
  animation:iconBob 2.8s ease-in-out infinite;
  will-change:transform;
}
@keyframes iconBob {
  0%,100% { transform:translateY(0) rotateY(0deg) rotateZ(0deg); }
  30%     { transform:translateY(-5px) rotateY(12deg) rotateZ(-3deg); }
  60%     { transform:translateY(-2px) rotateY(-8deg) rotateZ(2deg); }
}
.flip-card:hover .fc-icon {
  animation:iconSpin3d .55s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes iconSpin3d {
  0%   { transform:rotateY(0deg) scale(1); }
  45%  { transform:rotateY(200deg) scale(1.25) translateY(-4px); }
  100% { transform:rotateY(360deg) scale(1); }
}
.fc-name {
  font-family: var(--font-heading);
  font-size:1.15rem; font-weight:700; color:var(--ink);
  line-height:1.25;
}
.fc-pill {
  font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); border:1px solid currentColor;
  border-radius: var(--radius-pill);
  padding:4px 14px; margin-top:2px;
}
.flip-card-back {
  background:var(--accent);
  transform:rotateY(180deg);
  justify-content:space-evenly;
}
.fc-name-back {
  font-family: var(--font-heading);
  font-size:1.1rem; font-weight:700;
  color:rgba(255,255,255,.95); line-height:1.25;
}
.fc-desc {
  font-size:.92rem; color:rgba(255,255,255,.78);
  font-weight:400; line-height:1.65;
}
.fc-cta {
  font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); background:#fff;
  border:1px solid #fff; border-radius: var(--radius-pill);
  padding:8px 20px; text-decoration:none; margin-top:4px;
  transition:transform .2s, box-shadow .2s;
}
.fc-cta:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.18); }
@media (max-width:768px) {
  .products-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .flip-card { height:300px; }
}
@media (max-width:480px) {
  .products-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .flip-card { height:285px; }
}

/* ── GALERÍA ── */
#galeria { background: var(--white); padding-bottom: 0; }
.ig-note {
  display:flex; align-items:center; gap:10px;
  font-size:.8rem; color:var(--muted); font-weight:500;
  margin-bottom:-40px;
}
.ig-note svg { width:16px; height:16px; flex-shrink:0; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.g-photo {
  aspect-ratio: 1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
  background: var(--light);
  text-decoration:none;
  cursor:pointer;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s, transform .3s;
}
.g-photo:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.g-photo img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease;
}
.g-photo:hover img { transform:scale(1.05); }
.g-photo-overlay {
  position:absolute; inset:0;
  background:rgba(30,26,78,.65);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  opacity:0; transition:opacity .3s;
}
.g-photo:hover .g-photo-overlay { opacity:1; }
.g-photo-overlay svg { width:28px; height:28px; color:white; }
.g-photo-overlay span { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.9); }
.g-photo.no-img { background:var(--light); }
.g-ph {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  width:100%; height:100%; position:absolute; inset:0;
}
.g-ph span { font-size:.72rem; font-weight:600; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.g-photo:nth-child(1) .g-ph { background:#EDE9F8; }
.g-photo:nth-child(2) .g-ph { background:#FDE8EF; }
.g-photo:nth-child(3) .g-ph { background:#E8E8F8; }
.g-photo:nth-child(4) .g-ph { background:#F8E4EF; }
.gallery-carousel-dots {
  display:none;
  justify-content:center; gap:8px;
  padding:14px 0 4px;
}
.gal-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--line); transition:background .25s, transform .25s;
  cursor:pointer;
}
.gal-dot.active { background:var(--accent); transform:scale(1.4); }
@media (max-width:900px) {
  .gallery-carousel-dots { display:flex; }
}
.gallery-footer {
  padding:36px 7%; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.gallery-footer p { font-size:.82rem; color:var(--muted); font-weight:400; }
.ig-gallery-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
  color:#fff; padding:12px 28px;
  font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; border-radius: var(--radius-pill);
  transition:opacity .2s, transform .2s, box-shadow .2s;
  box-shadow: var(--shadow-sm);
}
.ig-gallery-btn:hover { opacity:.92; transform:translateY(-2px); box-shadow: var(--shadow); }

/* ── TESTIMONIOS ── */
#testimonios { background: var(--light); }
.testi-slider {
  display: flex;
  align-items: center;
  gap: 16px;
}
.testi-viewport {
  overflow: hidden;
  flex: 1;
}
.testi-track {
  display: flex;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.testi-slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.testi-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 32px 22px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  transition: transform .25s, box-shadow .25s;
}
.testi-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.testi-big-quote {
  font-family: var(--font-heading);
  font-size: 3.6rem;
  line-height: .55;
  color: var(--accent3);
  font-weight: 700;
  user-select: none;
}
.testi-quote {
  font-size: .9rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.75;
  flex: 1;
}
.testi-stars {
  color: #FFB800;
  font-size: .95rem;
  letter-spacing: 2px;
}
.testi-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  width: 100%;
}
.testi-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
}
.testi-city {
  font-size: .78rem;
  color: var(--muted);
}
.testi-product {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  margin-top: 4px;
}
.testi-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--accent);
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.testi-arrow:hover { background: var(--accent); color: var(--white); transform: scale(1.08); }
.testi-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.testi-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
  padding: 0;
}
.testi-dot.active { background: var(--accent); transform: scale(1.35); }
@media (max-width: 768px) {
  .testi-slide { display: contents; }
  .testi-card { min-width: 100%; }
  .testi-dots { display: none; }
  .testi-arrow { width: 36px; height: 36px; }
  .testi-slider { gap: 8px; }
}

/* ── FAQ ── */
#faq { background: var(--light); }
.faq-list {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 860px;
  margin: 0 auto;
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  font-family: var(--font-heading);
  font-weight: 600; font-size: 1rem;
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: background .18s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }
.faq-item summary:hover { background: var(--light); }
.faq-icon {
  position: relative; flex-shrink: 0;
  width: 20px; height: 20px;
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: var(--accent-bright);
  transform: translate(-50%, -50%);
  transition: transform .25s, opacity .25s;
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; }
.faq-item[open] .faq-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.faq-item p {
  margin: 0; padding: 0 24px 22px;
  color: var(--muted); font-size: .92rem; line-height: 1.7;
}
@media (max-width: 600px) {
  .faq-item summary { padding: 16px 18px; font-size: .92rem; }
  .faq-item p { padding: 0 18px 18px; }
}

/* ── CONTACTO ── */
#contacto { background:var(--ink); padding:48px var(--gutter); }
#contacto .section-title { color:var(--white); font-size:clamp(1.6rem,2.8vw,2.4rem); }
#contacto .section-header { border-bottom-color:rgba(255,255,255,.12); margin-bottom:28px; }
#contacto .section-note { color:rgba(255,255,255,.3); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.contact-left h3 { font-family: var(--font-heading); font-size:clamp(1.6rem,2.5vw,2.2rem); font-weight:700; color:var(--white); line-height:1.2; margin-bottom:14px; }
.contact-left h3 em { font-style:normal; color:var(--accent2); }
.contact-left p { font-size:.92rem; color:rgba(255,255,255,.5); font-weight:400; line-height:1.7; margin-bottom:24px; }
.contact-btns { display:flex; flex-direction:row; gap:12px; flex-wrap:wrap; }
.wa-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:#25D366; color:#fff;
  padding:12px 26px; font-size:.75rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; border-radius: var(--radius-pill);
  transition:transform .2s, box-shadow .2s; width:fit-content;
  box-shadow: 0 8px 24px rgba(37,211,102,.3);
}
.wa-btn:hover { transform:translateY(-2px); box-shadow: 0 12px 30px rgba(37,211,102,.4); }
.ig-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
  color:#fff; padding:12px 26px;
  font-size:.75rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; border-radius: var(--radius-pill);
  transition:transform .2s, box-shadow .2s; width:fit-content;
  box-shadow: 0 8px 24px rgba(131,58,180,.3);
}
.ig-btn:hover { transform:translateY(-2px); box-shadow: 0 12px 30px rgba(131,58,180,.4); }
.contact-right { border-left:1px solid rgba(255,255,255,.1); padding-left:48px; display:flex; flex-direction:column; }
.contact-item { padding:16px 18px; border-radius: var(--radius-sm); background: rgba(255,255,255,.04); margin-bottom:10px; }
.contact-item:last-child { margin-bottom:0; }
.contact-item label { font-size:.65rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.3); display:block; margin-bottom:3px; }
.contact-item span { font-size:.88rem; color:rgba(255,255,255,.8); font-weight:400; }
.contact-item a { color:rgba(255,255,255,.8); text-decoration:none; transition:color .2s; }
.contact-item a:hover { color:var(--accent2); }

/* ── FOOTER ── */
footer {
  background:var(--ink); border-top:1px solid rgba(255,255,255,.08);
  padding:28px var(--gutter); display:flex; align-items:center; justify-content:space-between;
}
footer p { font-size:.72rem; color:rgba(255,255,255,.3); font-weight:400; letter-spacing:.04em; }
.footer-links { display:flex; align-items:center; gap:24px; }
footer a { font-size:.72rem; color:rgba(255,255,255,.3); text-decoration:none; transition:color .2s; }
footer a:hover { color:var(--accent2); }

/* ── CHAT WIDGET ── */
.chat-btn {
  position:fixed; bottom:28px; left:28px; z-index:200;
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,#7B5EA7,#9B6BD4);
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 24px rgba(123,94,167,.55);
  transition:transform .25s, box-shadow .25s;
}
.chat-btn:hover { transform:translateY(-4px) scale(1.08); box-shadow:0 10px 36px rgba(123,94,167,.7); }
.chat-btn svg { width:26px; height:26px; }
.chat-btn .chat-notif {
  position:absolute; top:-3px; right:-3px;
  width:14px; height:14px; border-radius:50%;
  background:#e8408e; border:2px solid #fff;
  animation:pulseRing 1.8s ease-in-out infinite;
}
/* Chat widget disabled on mobile for now (Aug 2026) — CSS-only, easy to
   revert: just remove this rule. Button + panel stay in the DOM/JS
   untouched, they're only hidden below the ≤768px "mobile" breakpoint
   (same cutoff the nav uses to switch to the hamburger). */
@media (max-width:768px) {
  .chat-btn, .chat-panel { display:none !important; }
}
.chat-panel {
  position:fixed; bottom:94px; left:20px; z-index:201;
  width:340px; max-height:520px;
  background:#fff; border-radius:20px;
  box-shadow:0 12px 48px rgba(14,12,46,.22);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(18px) scale(.96);
  pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}
.chat-panel.open { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
.chat-header {
  background:linear-gradient(135deg,#7B5EA7,#9B6BD4);
  border-radius:20px 20px 0 0; padding:14px 18px;
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.chat-header-avatar {
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; flex-shrink:0;
}
.chat-header-info { flex:1; }
.chat-header-info strong { display:block; color:#fff; font-size:.9rem; font-weight:700; }
.chat-header-info span { color:rgba(255,255,255,.75); font-size:.72rem; }
.chat-close {
  background:none; border:none; cursor:pointer; color:rgba(255,255,255,.8);
  font-size:1.2rem; padding:4px; line-height:1; transition:color .2s;
}
.chat-close:hover { color:#fff; }
.chat-msgs {
  flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
  max-height:300px; scroll-behavior:smooth;
}
.chat-msgs::-webkit-scrollbar { width:4px; }
.chat-msgs::-webkit-scrollbar-thumb { background:var(--accent2); border-radius:2px; }
.msg-bot, .msg-user {
  max-width:88%; padding:10px 14px; border-radius:16px;
  font-size:.82rem; line-height:1.5; animation:fadeUp .25s ease;
}
.msg-bot { background:#f3eeff; color:var(--ink); border-bottom-left-radius:4px; align-self:flex-start; }
.msg-user { background:linear-gradient(135deg,#7B5EA7,#9B6BD4); color:#fff; border-bottom-right-radius:4px; align-self:flex-end; }
.msg-typing { display:flex; gap:5px; align-items:center; padding:12px 14px; }
.msg-typing span { width:7px; height:7px; border-radius:50%; background:#9B6BD4; display:inline-block; }
.msg-typing span:nth-child(1) { animation:typingDot .9s .0s ease-in-out infinite; }
.msg-typing span:nth-child(2) { animation:typingDot .9s .15s ease-in-out infinite; }
.msg-typing span:nth-child(3) { animation:typingDot .9s .3s ease-in-out infinite; }
@keyframes typingDot { 0%,80%,100%{transform:translateY(0);opacity:.4;} 40%{transform:translateY(-6px);opacity:1;} }
.chat-chips { padding:8px 16px; display:flex; flex-wrap:wrap; gap:6px; flex-shrink:0; }
.chat-chip {
  background:#f3eeff; color:#7B5EA7; border:1.5px solid #c5aeed;
  border-radius:20px; padding:5px 12px; font-size:.75rem; font-weight:600;
  cursor:pointer; transition:background .2s, color .2s;
}
.chat-chip:hover { background:#7B5EA7; color:#fff; }
.chat-input-row {
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-top:1px solid #f0e8ff; flex-shrink:0;
}
.chat-input {
  flex:1; border:1.5px solid #e0d4f7; border-radius:24px;
  padding:9px 14px; font-size:.82rem; font-family:inherit;
  outline:none; color:var(--ink); transition:border-color .2s;
}
.chat-input:focus { border-color:#7B5EA7; }
.chat-send {
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,#7B5EA7,#9B6BD4); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s; flex-shrink:0;
}
.chat-send:hover { transform:scale(1.1); }
.chat-send svg { width:16px; height:16px; }
.chat-wa-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:#25D366; color:#fff; border:none; border-radius:24px;
  padding:11px 20px; font-size:.85rem; font-weight:700;
  cursor:pointer; width:100%; margin-top:4px;
  transition:background .2s;
}
.chat-wa-btn:hover { background:#1ebe5d; }
@media (max-width:600px) {
  .chat-panel { width:calc(100vw - 16px); left:8px; bottom:80px; }
}

/* ── FLOAT WA ── */
.float-wa {
  position:fixed; bottom:28px; right:28px; z-index:200;
  background:#25D366; color:#fff;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  box-shadow:0 4px 24px rgba(37,211,102,.5);
  transition:transform .25s, box-shadow .25s;
}
.float-wa:hover { transform:translateY(-4px) scale(1.08); box-shadow:0 10px 36px rgba(37,211,102,.6); }
.float-wa svg { width:26px; height:26px; }
.float-wa-label {
  position:fixed; bottom:36px; right:92px; z-index:199;
  background:var(--ink); color:var(--white);
  font-size:.72rem; font-weight:600; letter-spacing:.08em;
  padding:7px 14px; opacity:0; pointer-events:none;
  transform:translateX(8px); transition:opacity .3s, transform .3s;
  white-space:nowrap;
}
.float-wa:hover ~ .float-wa-label { opacity:1; transform:translateX(0); }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .hero-cake-wrap { transform:scale(.85); transform-origin:center; }
}
@media (max-width:900px) {
  #hero { grid-template-columns:1fr; }
  .hero-cake { order:-1; padding:80px 0 10px; height:auto; }
  /* Below the desktop diagonal-collage breakpoint, stack the 3 photos in normal
     flow instead of absolute-positioning them — guarantees no overlap and no
     bleeding off the edge of the screen at any width, regardless of photo size. */
  .hero-cake-wrap {
    width:auto; height:auto; max-width:100%;
    display:flex; flex-direction:column; align-items:center; gap:18px;
    transform:none;
  }
  .hero-photo { position:static; }
  .hero-photo-c { width:min(288px, 74vw); align-self:flex-start; margin-left:6%; }
  .hero-photo-a { width:min(288px, 74vw); align-self:flex-end; margin-right:2%; }
  .hero-photo-d { width:min(301px, 78vw); align-self:center; }
  .hero-text { padding:0 var(--gutter) 60px; }
  .contact-grid { grid-template-columns:1fr; gap:28px; }
  .contact-right { border-left:none; padding-left:0; border-top:1px solid rgba(255,255,255,.1); padding-top:28px; }
  .contact-btns { flex-direction:column; }
  .gallery-grid {
    display:flex; flex-direction:row;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:6px; margin:0 calc(var(--gutter) * -1);
    padding:0 var(--gutter) 12px;
    scrollbar-width:none;
  }
  .gallery-grid::-webkit-scrollbar { display:none; }
  .gallery-grid .g-photo {
    flex:0 0 72vw; max-width:280px;
    scroll-snap-align:center;
    aspect-ratio:1; display:flex;
  }
  .gallery-grid .g-photo:nth-child(n+3) { display:flex; }
}
@media (max-width:768px) {
  .nav-links, .nav-ig, .nav-cta { display:none; }
  .hamburger { display:flex; }
  .features-strip { grid-template-columns:1fr 1fr; padding-top:36px; padding-bottom:36px; gap:14px; }
}
@media (max-width:600px) {
  nav { padding-top:16px; padding-bottom:16px; }
  section { padding-top:64px; padding-bottom:64px; }
  .gallery-grid {
    margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter) 12px;
  }
  .gallery-grid .g-photo { flex:0 0 80vw; max-width:260px; }
  .gallery-footer { flex-direction:column; gap:16px; align-items:flex-start; }
  .section-header { flex-direction:column; align-items:flex-start; gap:12px; }
  .section-note { text-align:left; }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .product-row { grid-template-columns:40px 1fr; }
  .product-pill { display:none; }
  footer { flex-direction:column; gap:12px; align-items:flex-start; }
  .features-strip { grid-template-columns:1fr; padding-top:32px; padding-bottom:32px; }
}

/* Extra-small phones */
@media (max-width:380px) {
  .hero-title { font-size:clamp(2.2rem,9vw,2.6rem); }
  .hero-desc { font-size:1rem; }
  .btn-main, .wa-btn, .ig-btn { padding-left:22px; padding-right:22px; }
  .testi-card { padding:26px 16px 22px; }
  .flip-card-front, .flip-card-back { padding:24px 16px; }
  .logo img { height:64px; }
}

/* Short / landscape viewports — avoid an overly tall, scroll-locked hero */
@media (max-height:480px) and (orientation:landscape) {
  #hero { min-height:auto; padding-top:90px; padding-bottom:40px; }
  #hero, .hero-cake { height:auto; }
  .hero-cake { padding:20px var(--gutter); }
  .hero-cake-wrap { transform:scale(.55); }
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .65s cubic-bezier(.2,0,.1,1), transform .65s cubic-bezier(.2,0,.1,1);
}
.reveal.from-left  { transform: translateX(-40px); }
.reveal.from-right { transform: translateX(40px); }
.reveal.scale-in   { transform: scale(.94); }
.reveal.in-view {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}
.stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s cubic-bezier(.2,0,.1,1), transform .55s cubic-bezier(.2,0,.1,1);
}
.stagger.in-view > *:nth-child(1) { opacity:1; transform:none; transition-delay:.05s; }
.stagger.in-view > *:nth-child(2) { opacity:1; transform:none; transition-delay:.15s; }
.stagger.in-view > *:nth-child(3) { opacity:1; transform:none; transition-delay:.25s; }
.stagger.in-view > *:nth-child(4) { opacity:1; transform:none; transition-delay:.35s; }
.stagger.in-view > *:nth-child(5) { opacity:1; transform:none; transition-delay:.45s; }
.stagger.in-view > *:nth-child(6) { opacity:1; transform:none; transition-delay:.55s; }
.stagger.in-view > *:nth-child(n+7) { opacity:1; transform:none; transition-delay:.55s; }

/* ── SCROLL-TO-TOP ── */
.scroll-top {
  position:fixed; bottom:96px; right:28px; z-index:200;
  width:46px; height:46px; border-radius:50%;
  background:var(--accent); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(46,42,140,.4);
  opacity:0; pointer-events:none;
  transform:translateY(14px);
  transition:opacity .3s, transform .3s, background .2s;
}
.scroll-top.visible { opacity:1; pointer-events:all; transform:translateY(0); }
.scroll-top:hover { background:var(--ink); }
.scroll-top svg { width:20px; height:20px; }

/* ── CAMEO SECTION ── */
#cameo { background:var(--light); }
.cameo-slider { position:relative; overflow:hidden; }
.cameo-track { display:flex; transition:transform .55s cubic-bezier(.4,0,.2,1); }
.cameo-slide {
  min-width:100%; flex:0 0 100%;
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:center;
}
.cameo-visual { display:flex; align-items:center; justify-content:center; padding:40px 0; }
.cameo-scene {
  perspective:900px;
  width:340px; height:260px;
  display:flex; align-items:center; justify-content:center;
}
.cameo-machine {
  transform-style:preserve-3d;
  transform:rotateX(22deg) rotateY(-18deg);
  position:relative;
  width:280px; height:130px;
}
.cm-face { position:absolute; backface-visibility:hidden; }
.cm-front {
  width:280px; height:130px;
  background:linear-gradient(160deg,#f5f5f5,#e0dff0);
  transform:translateZ(46px);
  border:1px solid #ccc;
  border-radius: 12px;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:12px;
  overflow:hidden;
}
.cm-top {
  width:280px; height:92px;
  background:linear-gradient(160deg,#e8e8f4,#d0ceea);
  transform:rotateX(90deg) translateZ(130px);
  border:1px solid #bbb;
  border-radius: 12px;
}
.cm-right {
  width:92px; height:130px;
  background:linear-gradient(135deg,#dddcee,#ccc8e4);
  transform:rotateY(90deg) translateZ(280px);
  border:1px solid #bbb;
}
.cm-left {
  width:92px; height:130px;
  background:linear-gradient(135deg,#dddcee,#ccc8e4);
  transform:rotateY(-90deg) translateZ(0);
  border:1px solid #bbb;
}
.cm-back { width:280px; height:130px; background:#c8c6e0; transform:rotateY(180deg) translateZ(46px); }
.cm-bottom { width:280px; height:92px; background:#b8b6d4; transform:rotateX(-90deg) translateZ(0); }
.cm-slot { position:absolute; bottom:28px; left:0; right:0; height:8px; background:#9B8FD4; opacity:.5; }
.cm-logo-badge {
  position:absolute; top:10px; left:14px;
  font-size:.55rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); opacity:.7;
}
.cm-screen-area {
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:180px; height:60px;
  background:#1E1A4E; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.cm-screen-area svg { width:90px; height:50px; }
.cm-rail {
  position:absolute; top:30px; left:0; right:0;
  height:18px;
  display:flex; align-items:center;
}
.cm-carriage {
  position:absolute; left:0;
  width:28px; height:18px;
  background:linear-gradient(135deg,#9B8FD4,#7B68BF);
  border-radius:3px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.cm-carriage::after {
  content:''; position:absolute;
  bottom:-6px; left:50%;
  transform:translateX(-50%);
  width:3px; height:8px;
  background:#555; border-radius:1px;
}
@keyframes bladeRun {
  0%   { left:4px; }
  48%  { left:248px; }
  52%  { left:248px; }
  100% { left:4px; }
}
.cutting .cm-carriage { animation:bladeRun 3.2s linear infinite; }
.cm-mat-wrap {
  position:absolute; bottom:-30px; left:-20px;
  width:320px; height:44px;
  transform-style:preserve-3d;
}
.cm-mat {
  width:320px; height:44px;
  background:linear-gradient(90deg,#e8e8e8,#f5f5f5,#e8e8e8);
  border:1px solid #ccc;
  border-radius: 8px;
  transform:rotateX(0deg);
  position:relative; overflow:hidden;
}
.cm-mat-lines {
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(0,0,0,.06) 18px, rgba(0,0,0,.06) 19px);
}
.princess-draw {
  stroke-dasharray:600;
  stroke-dashoffset:600;
}
.cameo-slide.active .princess-draw {
  animation:drawLine 3s ease forwards .5s;
}
@keyframes drawLine { to { stroke-dashoffset:0; } }
.cut-path { stroke-dasharray:500; stroke-dashoffset:500; }
.cameo-slide.active .cut-path { animation:drawLine 3.2s linear forwards; }
.finished-topper {
  display:flex; flex-direction:column; align-items:center; gap:0;
  animation:topperFloat 3s ease-in-out infinite;
}
@keyframes topperFloat {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-14px); }
}
.topper-stick-3d {
  width:5px; height:40px;
  background:linear-gradient(to bottom,#FFE066,#FFB300);
  margin:0 auto;
}
.cameo-card-text { display:flex; flex-direction:column; gap:16px; }
.cameo-step-num {
  font-family: var(--font-body); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  background: var(--white); display:inline-block; width:fit-content;
  padding:5px 14px; border-radius: var(--radius-pill);
}
.cameo-card-text h3 {
  font-family: var(--font-heading);
  font-size:clamp(1.8rem,2.5vw,2.4rem);
  font-weight:700; color:var(--ink); line-height:1.15;
}
.cameo-card-text p {
  font-size:1.05rem; color:var(--muted);
  font-weight:400; line-height:1.75;
  max-width:400px;
}
.cameo-dots { display:flex; align-items:center; justify-content:center; gap:10px; padding-top:48px; }
.cameo-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--line); border:none; cursor:pointer;
  transition:background .3s, transform .3s;
}
.cameo-dot.active { background:var(--accent); transform:scale(1.35); }
@media (max-width:900px) {
  .cameo-slide { grid-template-columns:1fr; gap:32px; }
  .cameo-visual { order:-1; }
  .cameo-scene { width:280px; height:220px; transform:scale(.85); transform-origin:center top; }
}
@media (max-width:600px) {
  .cameo-scene { transform:scale(.65); transform-origin:center top; }
}

/* ── Magic cursor — decorative star-shaped glow + fading star-sparkle trail ──
   JS-driven (main.js): the glow lags toward the real cursor position for a
   soft "magic" feel, and spawns .cursor-spark spans as the mouse moves.
   Desktop-only: hidden on touch/coarse-pointer devices, and never
   initialized by main.js when prefers-reduced-motion is set. */
.magic-cursor {
  position: fixed; top: 0; left: 0;
  width: 30px; height: 30px;
  background: radial-gradient(circle, rgba(155,143,212,.85) 0%, rgba(240,192,208,.65) 55%, transparent 78%);
  /* 4-point sparkle/star silhouette, same shape language as the ✦ hero star particles */
  clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%);
  filter: blur(.5px) drop-shadow(0 0 6px rgba(155,143,212,.55));
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .25s ease;
  will-change: transform;
}
.magic-cursor.active { opacity: 1; }
.cursor-spark {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
  color: var(--accent-bright);
  font-size: 11px;
  transform: translate(-50%, -50%);
  animation: cursorSparkFade .7s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes cursorSparkFade {
  0%   { opacity: .9; transform: translate(-50%, -50%) scale(1) translateY(0); }
  100% { opacity: 0;  transform: translate(-50%, -50%) scale(.3) translateY(-18px); }
}
@media (hover: none), (pointer: coarse) {
  .magic-cursor, .cursor-spark { display: none; }
}