/* ==================== Variables y base ==================== */
:root {
  --cream: #fff9f2;
  --blush: #fff0f4;
  --pink: #f58eb3;
  --pink-deep: #e95f96;
  --lilac: #d7b9ee;
  --violet: #70408f;
  --violet-deep: #4f286a;
  --gold: #e8b85e;
  --text: #583663;
  --muted: #7b6481;
  --white: #ffffff;
  --shadow: 0 20px 60px rgba(112, 64, 143, 0.13);
  --radius-lg: 32px;
  --radius-md: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  color: var(--text);
  background: var(--cream);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image: radial-gradient(circle at 15% 18%, rgba(232,184,94,.35) 0 1px, transparent 2px), radial-gradient(circle at 82% 34%, rgba(112,64,143,.18) 0 1px, transparent 2px);
  background-size: 95px 95px, 125px 125px;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { color: inherit; font: inherit; }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.section { padding: 110px 0; position: relative; }
.page-glow { position: fixed; border-radius: 50%; filter: blur(20px); pointer-events: none; z-index: -1; opacity: .6; }
.page-glow--one { width: 420px; height: 420px; top: 8%; left: -250px; background: rgba(245,142,179,.25); }
.page-glow--two { width: 500px; height: 500px; right: -300px; top: 55%; background: rgba(215,185,238,.28); }

h1, h2, h3 { margin-top: 0; color: var(--violet-deep); font-family: Georgia, "Times New Roman", serif; line-height: 1.12; }
h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); margin-bottom: 20px; }
p { margin-top: 0; }
.eyebrow { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 18px; color: var(--pink-deep); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.section-heading { max-width: 720px; margin: 0 auto 55px; text-align: center; }
.section-heading p { max-width: 620px; margin: 0 auto; color: var(--muted); font-size: 1.06rem; }

/* ==================== Botones ==================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 15px 28px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  color: var(--white);
  background: linear-gradient(135deg, var(--pink-deep), #b965bd);
  box-shadow: 0 13px 30px rgba(233,95,150,.28), inset 0 1px 0 rgba(255,255,255,.35);
  font-weight: 750;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.button:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(233,95,150,.38); filter: saturate(1.08); }
.button--small { min-height: 44px; padding: 11px 19px; font-size: .88rem; }
.button--wide { width: 100%; }

/* ==================== Header ==================== */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,249,242,.88); border-bottom: 1px solid rgba(112,64,143,.09); backdrop-filter: blur(18px); }
.header-inner { min-height: 78px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--violet-deep); font-family: Georgia, "Times New Roman", serif; font-size: 1.17rem; font-weight: 700; white-space: nowrap; }
.brand-star { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--gold); background: linear-gradient(145deg, #fff, #f8e8ff); box-shadow: 0 5px 15px rgba(112,64,143,.13); }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.main-nav a { position: relative; color: var(--muted); font-size: .9rem; font-weight: 650; transition: color .2s ease; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; border-radius: 2px; background: var(--pink-deep); transition: right .25s ease; }
.main-nav a:hover { color: var(--pink-deep); }
.main-nav a:hover::after { right: 0; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--blush); cursor: pointer; }
.menu-toggle span { display: block; width: 20px; height: 2px; margin: 4px auto; background: var(--violet); transition: .25s ease; }

/* ==================== Hero ==================== */
.hero { min-height: 720px; padding: 85px 0 105px; background: radial-gradient(circle at 78% 42%, rgba(245,142,179,.24), transparent 34%), linear-gradient(145deg, #fffaf4 15%, #fff2f8 65%, #f5eaff); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: -55px; height: 100px; border-radius: 50%; background: var(--cream); }
.hero-grid { display: grid; grid-template-columns: 1.03fr .97fr; gap: 62px; align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { margin-bottom: 14px; font-size: clamp(4rem, 7vw, 6.6rem); letter-spacing: -.055em; }
.hero h1 span { display: block; color: transparent; background: linear-gradient(100deg, var(--pink-deep), #9a59ad 75%); background-clip: text; -webkit-background-clip: text; }
.hero h2 { max-width: 580px; margin-bottom: 22px; font-size: clamp(1.55rem, 2.6vw, 2.25rem); font-style: italic; font-weight: 500; }
.hero-copy > p { max-width: 620px; margin-bottom: 32px; color: var(--muted); font-size: 1.08rem; }
.hero-note { margin: 20px 0 0 20px; color: #a37a9f; font-size: .87rem; font-weight: 650; }
.hero-note span { color: var(--pink-deep); }

.cosmic-art { position: relative; min-height: 520px; border: 1px solid rgba(255,255,255,.8); border-radius: 48% 48% 44% 44%; background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.95) 0 20%, transparent 21%), radial-gradient(circle at 50% 50%, #f9d9e6 0 39%, #d8b8e9 65%, #9b6db7 100%); box-shadow: 0 35px 80px rgba(112,64,143,.22), inset 0 0 50px rgba(255,255,255,.65); isolation: isolate; }
.cosmic-art::before { content: ""; position: absolute; inset: 7%; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; }
.orbit { position: absolute; border: 1px solid rgba(232,184,94,.55); border-radius: 50%; transform: rotate(-16deg); }
.orbit--one { inset: 18% 4%; }
.orbit--two { inset: 8% 24%; transform: rotate(34deg); }
.moon { position: absolute; top: 13%; right: 15%; width: 115px; height: 115px; border-radius: 50%; background: linear-gradient(145deg, #fff7da, #f8c9d8); box-shadow: 0 0 35px rgba(255,255,218,.9); }
.moon span { position: absolute; width: 100%; height: 100%; left: -27%; top: -14%; border-radius: 50%; background: #c79edb; }
.planet { position: absolute; top: 20%; left: 13%; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(145deg, #ff9bbb, #da71ac); box-shadow: 0 0 18px rgba(255,255,255,.7); }
.planet::after { content: ""; position: absolute; width: 95px; height: 22px; left: -18px; top: 19px; border: 4px solid rgba(255,224,183,.9); border-radius: 50%; transform: rotate(-18deg); }
.cat { position: absolute; left: 50%; top: 49%; width: 176px; height: 152px; transform: translate(-50%,-50%); border-radius: 48% 48% 44% 44%; background: linear-gradient(145deg, #fff8ed, #f3c6ce); box-shadow: inset 0 -12px 20px rgba(166,96,133,.13), 0 12px 30px rgba(112,64,143,.14); }
.cat-ear { position: absolute; top: -38px; width: 74px; height: 83px; background: #f8d8dc; clip-path: polygon(50% 0, 100% 100%, 0 82%); z-index: -1; }
.cat-ear::after { content: ""; position: absolute; inset: 22px 19px 10px; background: #eaa4b8; clip-path: inherit; }
.cat-ear--left { left: 4px; transform: rotate(-13deg); }
.cat-ear--right { right: 4px; transform: rotate(13deg); }
.cat-eye { position: absolute; top: 58px; width: 24px; height: 31px; border-radius: 50%; background: #70408f; box-shadow: inset 6px 0 #9163a7; }
.cat-eye::after { content: ""; position: absolute; top: 5px; left: 7px; width: 7px; height: 9px; border-radius: 50%; background: white; }
.cat-eye--left { left: 39px; }.cat-eye--right { right: 39px; }
.cat-nose { position: absolute; top: 95px; left: 50%; width: 16px; height: 11px; transform: translateX(-50%); border-radius: 50% 50% 60% 60%; background: var(--pink-deep); }
.cat-nose::after { content: "⌣"; position: absolute; top: 1px; left: -4px; width: 25px; color: #9e6082; font-size: 22px; text-align: center; }
.cat-whisker { position: absolute; top: 102px; width: 53px; height: 1px; background: #bd839d; }
.cat-whisker::before { content: ""; position: absolute; width: 48px; height: 1px; top: 10px; background: inherit; transform: rotate(8deg); }
.cat-whisker--left { left: -5px; transform: rotate(5deg); }.cat-whisker--right { right: -5px; transform: rotate(-5deg); }
.magic-message { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); width: 70%; padding: 14px 18px; border: 1px solid rgba(255,255,255,.7); border-radius: 50px; color: var(--violet); background: rgba(255,250,246,.72); backdrop-filter: blur(8px); font-family: Georgia, serif; text-align: center; line-height: 1.3; box-shadow: 0 8px 25px rgba(112,64,143,.1); }
.spark { position: absolute; color: #fff7cf; text-shadow: 0 0 12px white; animation: twinkle 2.5s ease-in-out infinite; }
.spark--one { top: 8%; left: 42%; font-size: 32px; }.spark--two { top: 38%; right: 8%; font-size: 25px; animation-delay: .6s; }.spark--three { bottom: 21%; left: 10%; font-size: 29px; animation-delay: 1.2s; }.spark--four { top: 34%; left: 32%; font-size: 45px; }
@keyframes twinkle { 50% { transform: scale(.7) rotate(20deg); opacity: .45; } }

/* ==================== Tarjetas de contenido ==================== */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card { position: relative; min-height: 310px; padding: 35px 30px; border: 1px solid rgba(112,64,143,.1); border-radius: var(--radius-md); background: rgba(255,255,255,.78); box-shadow: 0 15px 45px rgba(112,64,143,.08); transition: transform .3s ease, box-shadow .3s ease; overflow: hidden; }
.feature-card::after { content: "✧"; position: absolute; right: 22px; bottom: 12px; color: rgba(232,184,94,.35); font-size: 65px; }
.feature-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.feature-card--featured { background: linear-gradient(145deg, #fff, #faeafa); transform: translateY(-12px); }
.feature-card--featured:hover { transform: translateY(-19px); }
.icon-bubble { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 28px; border-radius: 21px; background: linear-gradient(145deg, #fbe0e9, #ead7f5); box-shadow: inset 0 1px 0 white; font-size: 30px; }
.card-number { position: absolute; top: 28px; right: 28px; color: rgba(112,64,143,.2); font-family: Georgia, serif; font-size: 1.4rem; }
.feature-card h3 { margin-bottom: 13px; font-size: 1.55rem; }
.feature-card p { color: var(--muted); }

/* ==================== Mensaje emocional ==================== */
.emotional { padding-top: 70px; }
.emotional-box { position: relative; display: grid; grid-template-columns: 190px 1fr; gap: 50px; align-items: center; padding: 65px 80px; border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius-lg); background: linear-gradient(120deg, #f8e8fa, #ffe8ee 55%, #fff5df); box-shadow: var(--shadow); overflow: hidden; }
.emotional-box::before { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -100px; border: 1px solid rgba(112,64,143,.1); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.13), 0 0 0 70px rgba(255,255,255,.1); }
.moon-icon { display: grid; place-items: center; width: 170px; height: 170px; border-radius: 50%; color: #fff8d8; background: linear-gradient(145deg, #a56dbc, #e18eb8); box-shadow: 0 20px 40px rgba(112,64,143,.22), inset -15px -12px 25px rgba(80,40,110,.15); font-family: Georgia, serif; font-size: 7rem; line-height: 1; }
.emotional-box h2 { max-width: 760px; }
.emotional-box p { max-width: 760px; margin-bottom: 0; color: var(--muted); font-size: 1.08rem; }
.emotional-star { position: absolute; top: 27px; left: 37%; color: var(--gold); font-size: 28px; }

/* ==================== Beneficios ==================== */
.benefits { background: linear-gradient(180deg, transparent, rgba(248,231,245,.55), transparent); }
.benefits-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 17px; }
.benefit { min-height: 190px; padding: 27px 20px; border: 1px solid rgba(112,64,143,.1); border-radius: 70px 70px 24px 24px; background: rgba(255,255,255,.82); text-align: center; box-shadow: 0 12px 35px rgba(112,64,143,.07); transition: transform .25s ease; }
.benefit:nth-child(even) { transform: translateY(18px); }
.benefit:hover { transform: translateY(-5px); }
.benefit:nth-child(even):hover { transform: translateY(12px); }
.benefit > span { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 20px; border-radius: 50%; background: linear-gradient(145deg, #fff0f5, #ebd9f8); font-size: 31px; }
.benefit p { margin: 0; color: var(--violet); font-weight: 680; line-height: 1.4; }

/* ==================== Precio y producto ==================== */
.pricing { padding-top: 125px; }
.pricing-card { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 650px; border: 1px solid rgba(255,255,255,.85); border-radius: 40px; background: linear-gradient(130deg, #f4e4f8, #fff1f4 52%, #fff8e9); box-shadow: 0 30px 90px rgba(112,64,143,.18); overflow: hidden; }
.product-visual { position: relative; display: grid; place-items: center; padding: 50px; background: radial-gradient(circle, rgba(255,255,255,.86), transparent 57%); }
.product-visual::before { content: ""; position: absolute; width: 72%; aspect-ratio: 1; border: 1px solid rgba(232,184,94,.28); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,255,255,.12), 0 0 0 60px rgba(255,255,255,.09); }
.product-visual img { position: relative; z-index: 1; width: 100%; max-height: 550px; object-fit: contain; border-radius: 22px; filter: drop-shadow(0 25px 24px rgba(84,44,105,.22)); }
.product-spark { position: absolute; z-index: 2; color: var(--gold); text-shadow: 0 0 10px white; font-size: 34px; }
.product-spark--one { top: 12%; left: 10%; }.product-spark--two { right: 8%; bottom: 15%; }
.pricing-copy { display: flex; flex-direction: column; justify-content: center; padding: 65px 70px 65px 45px; }
.pricing-copy h2 { font-size: clamp(2.2rem, 3.5vw, 3.25rem); }
.product-list { display: grid; gap: 10px; padding: 0; margin: 8px 0 25px; list-style: none; }
.product-list li { color: var(--muted); font-weight: 650; }
.product-list li span { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; color: white; background: var(--pink); font-size: .75rem; }
.price-label { align-self: flex-start; padding: 8px 15px; border-radius: 99px; color: #9b6d24; background: #fff0c9; font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.price { margin: 10px 0 20px; color: var(--violet-deep); font-family: Georgia, serif; font-size: clamp(3.6rem, 6vw, 5.2rem); font-weight: 700; line-height: 1; }
.price small { font-family: "Segoe UI", sans-serif; font-size: .28em; letter-spacing: .08em; }
.access-note { margin: 14px 0 0; color: var(--muted); font-size: .82rem; text-align: center; }
.access-note span { margin: 0 6px; color: var(--pink); }

/* ==================== Preguntas frecuentes ==================== */
.faq-container { max-width: 900px; }
.faq-list { display: grid; gap: 15px; }
.faq-item { border: 1px solid rgba(112,64,143,.11); border-radius: 18px; background: rgba(255,255,255,.78); box-shadow: 0 10px 30px rgba(112,64,143,.06); overflow: hidden; }
.faq-item button { width: 100%; padding: 23px 28px; border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--violet-deep); font-family: Georgia, serif; font-size: 1.18rem; font-weight: 700; text-align: left; cursor: pointer; }
.faq-plus { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; color: var(--pink-deep); background: var(--blush); font-family: "Segoe UI", sans-serif; font-size: 1.4rem; transition: transform .25s ease; }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-answer p { min-height: 0; margin: 0; padding: 0 28px; color: var(--muted); overflow: hidden; transition: padding .3s ease; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-item.is-open .faq-answer p { padding-bottom: 24px; }
.faq-item.is-open .faq-plus { transform: rotate(45deg); }

/* ==================== Footer ==================== */
.site-footer { padding: 42px 0; border-top: 1px solid rgba(112,64,143,.1); background: #f8eaf4; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer-inner p { margin: 0; color: var(--muted); font-size: .9rem; }
.social-links { display: flex; gap: 12px; }
.social-links a { padding: 9px 14px; border: 1px solid rgba(112,64,143,.15); border-radius: 999px; color: var(--violet); background: rgba(255,255,255,.55); font-size: .85rem; font-weight: 700; transition: background .2s, color .2s; }
.social-links a:hover { color: white; background: var(--violet); }
.social-links a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.social-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social-icon-dot { fill: currentColor; stroke: none; }

/* Animación suave al entrar en pantalla */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==================== Responsive ==================== */
@media (max-width: 1020px) {
  .header-cta { display: none; }
  .hero-grid { gap: 30px; }
  .benefits-grid { grid-template-columns: repeat(3, 1fr); }
  .pricing-copy { padding: 55px 40px 55px 20px; }
}

@media (max-width: 820px) {
  .section { padding: 85px 0; }
  .menu-toggle { display: block; margin-left: auto; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .main-nav { position: absolute; top: 68px; left: 20px; right: 20px; display: grid; gap: 0; padding: 12px; border: 1px solid rgba(112,64,143,.1); border-radius: 18px; background: rgba(255,249,242,.98); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .25s ease; }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .main-nav a { padding: 11px 13px; }
  .main-nav a::after { display: none; }
  .hero { padding-top: 65px; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy > p, .hero h2 { margin-left: auto; margin-right: auto; }
  .hero h1 span { display: inline; }
  .hero-note { margin-left: 0; }
  .cosmic-art { width: min(560px, 100%); min-height: 480px; margin: 20px auto 0; }
  .cards-grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
  .feature-card { min-height: 0; }
  .feature-card--featured { transform: none; }
  .feature-card--featured:hover { transform: translateY(-7px); }
  .emotional-box { grid-template-columns: 1fr; padding: 50px 45px; text-align: center; }
  .moon-icon { width: 130px; height: 130px; margin: 0 auto; font-size: 5.5rem; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit:nth-child(even) { transform: none; }
  .benefit:nth-child(even):hover { transform: translateY(-5px); }
  .pricing-card { grid-template-columns: 1fr; }
  .product-visual { min-height: 540px; padding: 40px; }
  .pricing-copy { padding: 55px; text-align: center; }
  .price-label { align-self: center; }
  .product-list { width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }
  .footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 560px) {
  .container { width: min(100% - 26px, 1160px); }
  .section { padding: 72px 0; }
  h2 { font-size: 2.25rem; }
  .site-header .brand { font-size: 1rem; }
  .hero { min-height: auto; padding: 55px 0 90px; }
  .hero h1 { font-size: clamp(3.3rem, 17vw, 4.5rem); }
  .hero h1 span { display: block; }
  .hero h2 { font-size: 1.48rem; }
  .hero-copy > p { font-size: 1rem; }
  .hero .button { width: 100%; padding-inline: 18px; }
  .cosmic-art { min-height: 405px; border-radius: 42% 42% 38% 38%; }
  .cat { transform: translate(-50%,-50%) scale(.8); }
  .moon { width: 85px; height: 85px; }
  .magic-message { width: 82%; font-size: .9rem; }
  .section-heading { margin-bottom: 38px; }
  .feature-card { padding: 30px 25px; }
  .emotional-box { padding: 42px 24px; border-radius: 25px; }
  .benefits-grid { grid-template-columns: 1fr; }
  .benefit { min-height: 0; border-radius: 25px; display: flex; align-items: center; gap: 17px; padding: 18px; text-align: left; }
  .benefit > span { flex: 0 0 58px; width: 58px; height: 58px; margin: 0; font-size: 25px; }
  .pricing { padding-top: 80px; }
  .pricing-card { border-radius: 27px; }
  .product-visual { min-height: 0; padding: 27px 20px; }
  .product-visual img { max-height: none; border-radius: 16px; }
  .pricing-copy { padding: 42px 23px; }
  .pricing-copy h2 { font-size: 2.2rem; }
  .price { font-size: 3.7rem; }
  .faq-item button { padding: 20px; font-size: 1.05rem; }
  .faq-answer p { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==================== Hero con imagen banner ==================== */
.hero.hero--banner {
  min-height: 0;
  padding: 0;
  background: #f8dceb;
  overflow: hidden;
}

.hero.hero--banner::before,
.hero.hero--banner::after {
  display: none;
}

.hero-banner-container {
  width: 100%;
  margin: 0 auto;
  background: #f8dceb;
}

.hero-banner-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 1680px) {
  .hero-banner-container {
    max-width: 1920px;
  }
}

@media (max-width: 700px) {
  .hero.hero--banner {
    padding: 0;
  }

  .hero-banner-image {
    width: 100%;
    min-height: 0;
    object-fit: contain;
  }
}

/* ==========================================================
   AJUSTE VISUAL: PROTOTIPO MÁGICO, ILUSTRADO Y EDITORIAL
   ========================================================== */
:root {
  --cream: #fff7f0;
  --blush: #ffeaf0;
  --pink: #f47ca3;
  --pink-deep: #ed5f8d;
  --lilac: #d9b7ed;
  --violet: #64358a;
  --violet-deep: #452068;
  --gold: #efb24b;
  --text: #4c2c68;
  --muted: #67556e;
}

body {
  background:
    radial-gradient(circle at 10% 8%, rgba(247,153,186,.13), transparent 17%),
    radial-gradient(circle at 94% 28%, rgba(196,151,225,.14), transparent 19%),
    #fff8f2;
}
body::before {
  opacity: .75;
  background-image:
    radial-gradient(circle, rgba(237,178,75,.55) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(231,113,158,.3) 0 1px, transparent 1.8px);
  background-position: 0 0, 34px 45px;
  background-size: 92px 92px, 137px 137px;
}
.container { width: min(1240px, calc(100% - 44px)); }
.section { padding: 72px 0; }
h1, h2, h3, .brand { font-family: Georgia, "Times New Roman", serif; }
h2 { font-weight: 500; letter-spacing: -.025em; }
.eyebrow { color: #e76796; }

/* Header del prototipo */
.site-header { background: rgba(255,248,243,.95); box-shadow: 0 4px 22px rgba(104,53,124,.06); }
.header-inner { min-height: 82px; }
.brand { font-size: 1.45rem; font-weight: 500; }
.brand-star { width: 48px; height: 48px; border: 1px solid rgba(232,113,154,.22); background: radial-gradient(circle, #ffdbe6, #efcbf2); font-size: 1.5rem; }
.main-nav a { color: #4d3064; font-size: .94rem; font-weight: 550; }

/* Hero: paisaje pastel con nubes, astros y personaje central */
.hero {
  min-height: 650px;
  padding: 58px 0 54px;
  background:
    radial-gradient(circle at 7% 22%, rgba(176,142,231,.42), transparent 17%),
    radial-gradient(circle at 92% 18%, rgba(239,146,195,.38), transparent 20%),
    radial-gradient(circle at 50% 105%, #ffcbdc 0 11%, transparent 31%),
    linear-gradient(120deg, #fff7ed, #ffeef3 48%, #f4e7ff);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .45;
  background-image: radial-gradient(circle, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle, #eab14c 0 1px, transparent 2px);
  background-position: 20px 30px, 70px 10px;
  background-size: 87px 87px, 143px 143px;
}
.hero::after { display: none; }
.hero-grid { grid-template-columns: .92fr 1.08fr; gap: 34px; }
.hero-copy { padding-left: 28px; }
.hero .eyebrow { display: none; }
.hero h1 { font-size: clamp(5rem, 8.2vw, 7.7rem); font-weight: 400; line-height: .79; letter-spacing: -.055em; }
.hero h1 span { display: block; color: var(--violet-deep); background: none; -webkit-text-fill-color: initial; }
.hero h2 { max-width: 650px; margin: 38px 0 20px; font-size: clamp(2rem, 3.2vw, 2.75rem); font-style: normal; font-weight: 400; }
.hero-copy > p { max-width: 610px; color: #44304f; font-size: 1.08rem; }
.hero-note { display: none; }
.button { background: linear-gradient(110deg, #f46e99, #ed5f8d); box-shadow: 0 12px 28px rgba(232,82,135,.27), inset 0 1px 0 rgba(255,255,255,.55); }

.cosmic-art {
  min-height: 530px;
  border: 0;
  border-radius: 42% 42% 18% 18%;
  background: radial-gradient(circle at 52% 50%, rgba(255,255,255,.78) 0 16%, rgba(250,218,233,.68) 17% 45%, transparent 46%);
  box-shadow: none;
  overflow: visible;
}
.cosmic-art::before { inset: 6% 7% 3%; border: 2px solid rgba(224,159,57,.82); border-bottom-color: transparent; }
.orbit--one { inset: 15% 1% 12%; border-color: rgba(224,159,57,.35); }
.orbit--two { display: none; }
.cat { top: 51%; width: 230px; height: 210px; background: linear-gradient(145deg,#f6c993,#b86d42); box-shadow: inset 0 -22px 30px rgba(93,42,25,.19), 0 20px 34px rgba(93,54,95,.18); }
.cat::after { content: ""; position: absolute; left: 50%; top: 120px; width: 120px; height: 150px; transform: translateX(-50%); border-radius: 55% 55% 25% 25%; background: linear-gradient(100deg,#b96d42,#e8ae76 48%,#9b5736); z-index: -1; }
.cat-ear { width: 93px; height: 104px; background: #c67b51; }
.cat-ear::after { background: #e99ba0; }
.cat-eye { top: 78px; width: 31px; height: 39px; background: #42263a; box-shadow: inset 8px 0 #b47938; }
.cat-eye--left { left: 50px; }.cat-eye--right { right: 50px; }
.cat-nose { top: 127px; }
.cat-whisker { top: 139px; }
.moon { top: 3%; right: 3%; width: 105px; height: 105px; background: linear-gradient(145deg,#ffcee0,#e989bd); }
.moon span { background: #f6eafb; }
.planet { top: 27%; left: 1%; width: 72px; height: 72px; }
.cloud { position: absolute; z-index: 3; height: 70px; border-radius: 60px; background: linear-gradient(#ffe7f1,#f5b9d4); filter: drop-shadow(0 10px 12px rgba(150,85,135,.12)); }
.cloud::before,.cloud::after { content:""; position:absolute; bottom: 15px; border-radius:50%; background:inherit; }
.cloud::before { width:90px;height:90px;left:32px; }.cloud::after { width:110px;height:110px;right:35px; }
.cloud--one { left: 3%; right: 35%; bottom: 8%; }.cloud--two { left: 43%; right: 0; bottom: 4%; background:linear-gradient(#fbe7f5,#e5bbea); }
.magic-message { display: none; }

/* Qué incluye: tarjetas grandes e ilustradas */
.includes { padding-top: 52px; background: linear-gradient(180deg,#fff9f4,#fff5f0); border-bottom: 1px solid rgba(225,150,173,.22); }
.includes .section-heading { margin-bottom: 30px; }
.includes .section-heading .eyebrow, .includes .section-heading p { display: none; }
.includes .section-heading h2::before, .includes .section-heading h2::after { content:"✦"; margin:0 22px; color:var(--gold); font-size:.55em; vertical-align:middle; }
.cards-grid { gap: 16px; }
.feature-card, .feature-card--featured {
  min-height: 260px;
  display: grid;
  grid-template-columns: 42% 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 24px;
  align-items: center;
  padding: 24px;
  border: 1px solid rgba(231,129,161,.34);
  border-radius: 18px;
  background: linear-gradient(135deg,rgba(255,232,237,.72),rgba(255,247,239,.86));
  box-shadow: inset 0 1px 0 white, 0 12px 28px rgba(125,69,126,.06);
  transform: none;
}
.feature-card:hover,.feature-card--featured:hover { transform: translateY(-5px); }
.feature-card::after { content:"✦"; right:14px;bottom:8px;font-size:32px;color:rgba(230,165,67,.7); }
.feature-card h3 { margin: 0 0 8px; font-size: 1.65rem; font-weight: 500; }
.feature-card p { margin: 0; font-size: .94rem; line-height: 1.55; }
.card-number { display:none; }
.card-art { grid-row:1 / 3; justify-self:center; position:relative; display:grid;place-items:center; color:#593479; text-align:center; font:600 1rem/1.05 Georgia,serif; filter:drop-shadow(0 12px 10px rgba(92,45,100,.18)); }
.card-art--book { width:120px;height:165px;border:3px solid #b47ec8;border-radius:7px 13px 13px 7px;background:radial-gradient(circle at 75% 20%,#f390b5 0 7px,transparent 8px),linear-gradient(145deg,#ffe7eb,#efd6f5);transform:rotate(-6deg); }
.card-art--book::before { content:"☾ ✦";position:absolute;top:16px;color:#e581a9; }
.card-art--phone { width:90px;height:170px;border:7px solid #3d2944;border-radius:19px;background:linear-gradient(#ffe3eb,#f2d6fa); }
.card-art--phone::before { content:"";position:absolute;top:5px;width:34px;height:5px;border-radius:5px;background:#3d2944; }
.card-art--journal { width:125px;height:160px;border:3px solid #a986ce;border-radius:10px;background:linear-gradient(145deg,#d9b7ef,#a883d0);transform:rotate(6deg);box-shadow:inset 9px 0 rgba(255,255,255,.18); }
.card-art--journal span { color:#ffe49a;font-size:4rem; }

/* Banner emocional ilustrado */
.emotional { padding: 0; }
.emotional-box { width:100%;max-width:none;min-height:285px;grid-template-columns:42% 58%;gap:20px;padding:42px max(6vw,60px);border:0;border-radius:0;background:radial-gradient(circle at 10% 80%,rgba(226,179,233,.65),transparent 25%),linear-gradient(110deg,#ffe7ed,#fff5ec 58%,#f0e3ff);box-shadow:none; }
.emotional-visual { position:relative; height:190px;display:grid;place-items:center; }
.sleepy-cat { position:relative;z-index:2;font-size:8.3rem;filter:drop-shadow(0 14px 12px rgba(105,53,107,.18));transform:rotate(-8deg); }
.mini-planet { position:absolute;left:4%;top:3%;font-size:4rem;transform:rotate(-20deg); }
.dream-cloud { position:absolute;left:10%;right:8%;bottom:3%;height:75px;border-radius:60%;background:linear-gradient(#f9d8e8,#e9b8e1);box-shadow:50px -20px 0 -12px #f6d5e8,-45px -12px 0 -18px #ffe1eb; }
.emotional-box h2 { font-size:clamp(2.4rem,4vw,3.8rem);font-weight:400; }
.emotional-box .eyebrow { display:none; }
.emotional-star { right:10%;left:auto;color:var(--gold); }

/* Beneficios sin cajas blancas: cinco símbolos editoriales */
.benefits { padding:44px 0 56px;background:#fff9f4; }
.benefits .section-heading { margin-bottom:28px; }
.benefits .section-heading .eyebrow { display:none; }
.benefits .section-heading h2::before,.benefits .section-heading h2::after { content:"✧";margin:0 20px;color:var(--gold);font-size:.6em; }
.benefits-grid { gap:0; }
.benefit,.benefit:nth-child(even) { min-height:190px;padding:10px 25px;border:0;border-right:1px solid rgba(125,70,133,.13);border-radius:0;background:transparent;box-shadow:none;transform:none; }
.benefit:last-child { border-right:0; }
.benefit:hover,.benefit:nth-child(even):hover { transform:translateY(-4px); }
.benefit > span { width:100px;height:100px;background:radial-gradient(circle,#ffeaf2 0 48%,transparent 50%);font-size:3.6rem;color:#e57aa4;text-shadow:0 4px 0 #fff,0 8px 15px rgba(118,63,132,.15); }

/* Precio: banda cósmica protagonista */
.pricing { padding:0; }
.pricing-card { position:relative;width:100%;max-width:none;min-height:500px;border:0;border-radius:0;background:radial-gradient(circle at 3% 16%,rgba(159,110,205,.5),transparent 18%),radial-gradient(circle at 94% 78%,rgba(241,128,182,.45),transparent 20%),linear-gradient(112deg,#ead8fb,#fff0ed 51%,#f1d8fa);box-shadow:inset 0 1px white,inset 0 -1px white; }
.pricing-card::before { content:"✦  ·  ✧  ·  ✦";position:absolute;right:5%;top:5%;color:#d99b3f;letter-spacing:24px; }
.product-visual { padding:35px 45px;background:radial-gradient(circle,rgba(255,255,255,.78),transparent 64%); }
.product-visual img { width:min(100%,560px);max-height:430px;border-radius:16px; }
.pricing-copy { padding:45px 7% 45px 25px; }
.pricing-copy .eyebrow { display:none; }
.pricing-copy h2 { font-weight:400; }
.product-list { display:flex;flex-wrap:wrap;gap:17px;margin:0 0 22px; }
.product-list li span { background:transparent;color:#da76a2;font-size:1.2rem; }
.price-label { align-self:center;position:relative;z-index:2;margin-bottom:-8px;padding:8px 24px;color:white;background:linear-gradient(110deg,#f37ba3,#e9659a);font-size:.9rem;text-transform:none;box-shadow:0 6px 16px rgba(221,86,142,.2); }
.price-limited { margin:16px 0 2px;color:#a35c81;font-size:.82rem;font-weight:750;letter-spacing:.04em;text-align:center;text-transform:uppercase; }
.price-before { margin:0;padding-top:10px;border:1px solid rgba(218,143,67,.65);border-bottom:0;border-radius:20px 20px 0 0;color:var(--muted);background:rgba(255,248,242,.62);font-size:.9rem;text-align:center; }
.price-before span { text-decoration:line-through;text-decoration-thickness:1.5px; }
.price { margin:0;padding:5px 20px 15px;border:1px solid rgba(218,143,67,.65);border-top:0;border-bottom:0;border-radius:0;text-align:center;background:rgba(255,248,242,.62);font-weight:400; }
.price-now { display:block;margin-bottom:3px;color:#a35c81;font-family:"Segoe UI",sans-serif;font-size:.19em;font-weight:750;letter-spacing:.06em;text-transform:uppercase; }
.pricing-copy .button { border-radius:0 0 20px 20px; }

/* Preguntas: tres tarjetas visibles, como en la referencia */
.faq { padding:36px 0 42px; }
.faq-container { max-width:1200px; }
.faq .section-heading { margin-bottom:24px; }
.faq .section-heading .eyebrow { display:none; }
.faq .section-heading h2 { font-size:2.6rem;font-weight:400; }
.faq-list { grid-template-columns:repeat(3,1fr);gap:14px; }
.faq-item { min-height:150px;border:1px solid rgba(231,145,171,.3);background:linear-gradient(145deg,#fff1f2,#fff9f3);box-shadow:none; }
.faq-item button { pointer-events:none;padding:24px 24px 8px;font-size:1.12rem;font-weight:500; }
.faq-plus { display:none; }
.faq-answer,.faq-item.is-open .faq-answer { display:block;grid-template-rows:1fr; }
.faq-answer p,.faq-item.is-open .faq-answer p { padding:0 24px 24px;overflow:visible; }

/* Footer con CTA final */
.site-footer { padding:25px 0;background:linear-gradient(100deg,#f8e6f2,#fff2ed); }
.footer-inner { flex-wrap:wrap;gap:24px; }
.footer-inner .brand { font-size:1.2rem; }
.footer-inner p { display:none; }
.footer-cta { margin-left:auto; }
.footer-inner .footer-copyright { display:block;flex:0 0 100%;margin:0;padding-top:14px;border-top:1px solid rgba(112,64,143,.1);color:#927d9b;font-size:.76rem;line-height:1.4;text-align:center; }

/* Adaptación tablet y celular */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { padding-left:0;text-align:center; }
  .hero h1 span { display:block; }
  .hero h2 { margin-left:auto;margin-right:auto; }
  .cosmic-art { width:min(630px,100%);margin:auto; }
  .cards-grid { grid-template-columns:1fr; }
  .feature-card { max-width:680px;width:100%;margin:auto; }
  .emotional-box { grid-template-columns:1fr;text-align:center; }
  .pricing-card { grid-template-columns:1fr; }
  .pricing-copy { padding:45px max(25px,8%); }
  .faq-list { grid-template-columns:1fr; }
  .faq-item { min-height:0; }
  .footer-inner { flex-wrap:wrap; }
}

@media (max-width: 560px) {
  .container { width:min(100% - 24px,1240px); }
  .hero { padding-top:42px; }
  .hero h1 { font-size:clamp(4rem,19vw,5.5rem);line-height:.88; }
  .hero h1 span { display:block; }
  .hero h2 { margin-top:28px;font-size:1.7rem; }
  .cosmic-art { min-height:420px; }
  .cat { transform:translate(-50%,-50%) scale(.77); }
  .feature-card { grid-template-columns:35% 1fr;padding:18px;column-gap:17px; }
  .card-art--book,.card-art--journal { transform:scale(.78) rotate(-5deg); }
  .card-art--phone { transform:scale(.8); }
  .feature-card h3 { font-size:1.35rem; }
  .feature-card p { font-size:.86rem; }
  .emotional-box { padding:35px 20px; }
  .emotional-visual { height:150px; }
  .sleepy-cat { font-size:6.4rem; }
  .benefits-grid { grid-template-columns:1fr; }
  .benefit { min-height:0;display:grid;grid-template-columns:82px 1fr;border-right:0;border-bottom:1px solid rgba(125,70,133,.1);text-align:left; }
  .benefit > span { width:75px;height:75px;margin:0;font-size:2.7rem; }
  .product-visual { padding:24px 15px; }
  .product-list { display:grid; }
  .price { font-size:3.6rem; }
  .pricing-copy .button { padding-inline:16px;font-size:.92rem; }
  .footer-inner { flex-direction:column; }
  .footer-cta { margin-left:0;width:100%; }
}

/* Integración final del banner: prevalece sobre el hero ilustrado anterior. */
.hero.hero--banner {
  min-height: 0;
  padding: 0;
  background: #f8dceb;
  overflow: hidden;
}

.hero.hero--banner::before,
.hero.hero--banner::after {
  display: none;
  content: none;
}

.hero--banner .hero-banner-container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.hero--banner .hero-banner-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 560px) {
  .hero.hero--banner {
    min-height: 0;
    padding: 0;
  }
}

/* Sección emocional: composición limpia, centrada y sin personaje. */
.emotional .emotional-box {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 58px max(28px, 8vw);
  text-align: center;
  background:
    radial-gradient(circle at 14% 74%, rgba(226, 179, 233, .52), transparent 24%),
    radial-gradient(circle at 88% 24%, rgba(255, 207, 222, .62), transparent 22%),
    linear-gradient(110deg, #ffe7ed, #fff6ef 52%, #f0e3ff);
}

.emotional .emotional-box::before {
  width: 170px;
  height: 170px;
  right: 7%;
  top: -68px;
  border-color: rgba(232, 184, 94, .2);
  box-shadow: 0 0 0 28px rgba(255,255,255,.1), 0 0 0 56px rgba(255,255,255,.07);
}

.emotional .emotional-box::after {
  content: "☾   ✦   ·   ✧";
  position: absolute;
  left: 7%;
  top: 34px;
  color: rgba(220, 150, 62, .62);
  font-size: 1.35rem;
  letter-spacing: .45rem;
}

.emotional .emotional-copy {
  position: relative;
  z-index: 2;
  width: min(820px, 100%);
  margin: 0 auto;
}

.emotional .emotional-box h2,
.emotional .emotional-box p {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.emotional .emotional-box h2 {
  margin-bottom: 22px;
}

.emotional .emotional-star {
  top: auto;
  right: 8%;
  bottom: 28px;
  left: auto;
  opacity: .7;
}

@media (max-width: 560px) {
  .emotional .emotional-box {
    min-height: 330px;
    padding: 54px 22px;
  }

  .emotional .emotional-box::after {
    left: 24px;
    top: 22px;
    font-size: 1rem;
  }

  .emotional .emotional-box h2 {
    font-size: 2.25rem;
  }
}

/* ==================== Preview vertical de la app ==================== */
.app-preview {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 22%, rgba(215, 185, 238, .5), transparent 23%),
    radial-gradient(circle at 12% 82%, rgba(245, 142, 179, .24), transparent 24%),
    linear-gradient(135deg, #fff8f1, #ffedf4 54%, #f5ebff);
}

.app-preview::before {
  content: "✦      ·      ✧";
  position: absolute;
  top: 34px;
  left: 8%;
  color: rgba(232, 174, 72, .65);
  font-size: 1.2rem;
  letter-spacing: .35rem;
}

.app-preview::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(112, 64, 143, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(255,255,255,.13), 0 0 0 70px rgba(255,255,255,.09);
}

.app-preview-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, .72fr);
  gap: clamp(55px, 8vw, 120px);
  align-items: center;
  max-width: 1050px;
}

.app-preview-copy h2 {
  max-width: 650px;
  margin-bottom: 24px;
  font-size: clamp(2.6rem, 4.6vw, 4.3rem);
  font-weight: 400;
}

.app-preview-copy p {
  max-width: 610px;
  margin-bottom: 32px;
  color: var(--muted);
  font-size: 1.08rem;
}

.app-preview-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.phone-frame {
  position: relative;
  width: min(100%, 330px);
  padding: 13px;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 42px;
  background: linear-gradient(145deg, #7b4a94, #3f2853);
  box-shadow:
    0 30px 65px rgba(82, 42, 102, .25),
    0 8px 20px rgba(232, 93, 147, .13),
    inset 0 1px 1px rgba(255,255,255,.45);
}

.phone-frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 36px;
}

.phone-speaker {
  position: absolute;
  z-index: 3;
  top: 19px;
  left: 50%;
  width: 76px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #32203d;
  box-shadow: inset 0 -1px rgba(255,255,255,.12);
}

.app-preview-video {
  display: block;
  width: 100%;
  max-height: 620px;
  aspect-ratio: 9 / 16;
  border-radius: 31px;
  background: #ead9ef;
  object-fit: contain;
}

.preview-caption {
  margin-top: 20px;
  color: var(--violet);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .96rem;
  font-style: italic;
  text-align: center;
}

.preview-spark {
  position: absolute;
  z-index: 4;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255,255,255,.9);
  animation: twinkle 2.7s ease-in-out infinite;
}

.preview-spark--one { top: 7%; left: -5%; font-size: 2rem; }
.preview-spark--two { top: 32%; right: -8%; font-size: 1.6rem; animation-delay: .8s; }
.preview-spark--three { bottom: 15%; left: -9%; font-size: 2.2rem; animation-delay: 1.4s; }

@media (max-width: 820px) {
  .app-preview-grid {
    grid-template-columns: 1fr;
    gap: 55px;
    text-align: center;
  }

  .app-preview-copy h2,
  .app-preview-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  .app-preview-visual {
    width: min(100%, 390px);
    margin: 0 auto;
  }
}

@media (max-width: 560px) {
  .app-preview {
    padding: 72px 0;
  }

  .app-preview-copy h2 {
    font-size: 2.35rem;
  }

  .app-preview-copy .button {
    width: 100%;
  }

  .phone-frame {
    width: min(88vw, 310px);
    border-radius: 38px;
  }

  .app-preview-video {
    border-radius: 28px;
  }

  .preview-spark--one { left: 0; }
  .preview-spark--two { right: 0; }
}