/* Mobile-first presentation. All sales copy stays in index.html. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter-page.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../fonts/playfair-display-page.woff2') format('woff2');
}
:root {
  --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bg-cream: #FFF9F5;
  --bg-white: #FFFFFF;
  --bg-dark: #24121C;
  --bg-dark-warm: #2D1F1F;
  --text-dark: #2F2027;
  --text-body: #51464B;
  --text-muted: #75666B;
  --text-white: #FFFFFF;
  --accent-rose: #AD3658;
  --accent-rose-dark: #912541;
  --accent-rose-light: #FBEAF0;
  --accent-gold: #BD955E;
  --accent-gold-light: #F0DDBF;
  --accent-green: #286447;
  --accent-red: #AD3658;
  --radius-md: 16px;
  --radius-lg: 24px;
  --line: #EBDDD7;
}
*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-cream);
  color: var(--text-body);
  font: 16px/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; border: 0; }
svg { max-width: 100%; }
figure, p, h1, h2, h3, h4, h5, h6 { margin: 0; }
p + p { margin-top: 18px; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
strong { color: var(--text-dark); font-weight: 700; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent-gold); outline-offset: 5px; }
::selection { background: #E9B6C6; color: #2F2027; }
.section { width: 100%; position: relative; }
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.fade-in { opacity: 1; transform: none; }
.divider { width: 48px; height: 2px; margin: 0 auto 32px; background: var(--accent-gold); }
.copy-break { display: block; margin-top: 14px; }
.app-showcase { margin: 0 auto; width: 100%; max-width: 340px; }
.app-showcase img { width: 100%; border-radius: 22px; }

/* A consistent, legible purchase action. */
.cta-wrap { width: 100%; max-width: 600px; padding: 0; margin: 0 auto; text-align: center; }
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 19px 22px;
  border: 1px solid #BD4668;
  border-radius: 12px;
  background: linear-gradient(135deg, #AD3658, #912541);
  box-shadow: 0 7px 20px #72203920;
  color: white;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.45;
  letter-spacing: .15px;
  text-align: center;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cta-btn::after { content: ''; flex: 0 0 8px; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
@media (hover: hover) {
  .cta-btn:hover { background: #85223E; transform: translateY(-2px); box-shadow: 0 10px 26px #7220392B; }
}
.cta-btn:active { transform: translateY(0); }
.cta-sub { display: block; margin-top: 12px; color: var(--text-muted); font-size: 13px; font-weight: 450; line-height: 1.65; text-align: center; }

/* Opening: the original promise beside the mobile app. */
.s-hero { padding: 28px 0 0; background: radial-gradient(ellipse at 90% 55%, #522237 0, transparent 62%), #29151F; color: white; }
.hero-center { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; }
.hero-intro { min-width: 0; }
.hero-logo { width: 142px; margin-bottom: 26px; }
.hero-logo img { width: 100%; filter: brightness(0) invert(1); opacity: .9; }
.pre-headline { padding: 0 0 0 13px; margin-bottom: 24px; border-left: 2px solid var(--accent-gold); color: #E9CBA6; font-size: 12px; font-weight: 550; line-height: 1.6; letter-spacing: .12px; text-align: left; }
.hero-h1 { margin: 0 0 24px; color: #FFF9F5; font-family: var(--font-head); font-size: clamp(29px, 7.8vw, 38px); font-weight: 700; line-height: 1.18; letter-spacing: -.65px; text-align: left; text-wrap: pretty; }
.hero-h1 em { color: #E6BD87; font-style: normal; }
.hero-h1 strong { color: #F4C2D2; font-weight: 700; }
.hero-sub { margin-bottom: 26px; color: #E5D7DE; font-size: 16px; line-height: 1.7; text-align: left; }
.hero-lead { display: block; color: #FFF6F2; font-weight: 500; margin-bottom: 12px; }
.hero-evidence { font-size: 15px; color: #D9C9D1; }
.hero-sub > strong { display: inline; color: #FFF6F2; white-space: nowrap; }
.hero-scroll-cue { display: flex; justify-content: center; margin: 24px auto 0; }
.hero-scroll-cue span { display: block; width: 12px; height: 12px; border-right: 2px solid #D5AC79; border-bottom: 2px solid #D5AC79; transform: rotate(45deg); }
.hero-journey { width: 100%; max-width: 390px; margin: 0 auto; }
.hero-journey-product { width: 100%; min-width: 0; }
.hero-journey-product img { width: 100%; height: auto; border-radius: 24px; border: 1px solid #75425150; }

/* The section boundary passes through the image without cropping it. */
.hero-story-transition { margin-top: 40px; background: linear-gradient(to bottom, transparent 50%, #FFFFFF 50%); }
.story-bridge { position: relative; width: 100%; max-width: 520px; margin: 0 auto; }
.story-bridge img { width: 100%; height: auto; }
.story-label { position: absolute; transform: translate(-50%, -50%); color: #080808; font-size: clamp(10px, 2.8vw, 14px); font-weight: 800; line-height: 1; letter-spacing: .8px; white-space: nowrap; }
.story-label--before { top: 4.3%; left: 23.3%; transform: translate(-50%, -50%) rotate(-1.5deg); }
.story-label--after { top: 10.1%; left: 74.2%; transform: translate(-50%, -50%) rotate(1.5deg); }

/* Familiar situations: emphasis without narrowing the text column. */
.s-dolor, .s-verdad, .s-mecanismo, .s-stack, .s-precio { padding: 64px 0; }
.s-dolor { padding-top: 32px; background: white; }
.dolor-title, .verdad-title, .mecanismo-title, .stack-title, .precio-title {
  max-width: 760px;
  margin: 0 auto 30px;
  color: var(--text-dark);
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.65px;
  text-align: center;
  text-wrap: balance;
}
.dolor-title span { color: var(--text-dark); }
.dolor-grid { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.dolor-item { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 22px 0; border-bottom: 1px solid #EDDEE2; background: white; }
.dolor-emoji { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #FAEAF0; font-size: 22px; line-height: 1; }
.dolor-text { margin: 0; font-size: 16px; line-height: 1.75; }
.dolor-text strong { color: #822D46; }
.dolor-cta { max-width: 820px; margin: 26px auto 0; padding: 25px 24px; border-left: 3px solid var(--accent-rose); background: #FBEEF2; border-radius: 0 14px 14px 0; }
.dolor-cta p { font-size: 17px; line-height: 1.7; }
.dolor-cta strong { color: #822D46; }

/* Method explanation with a clear rhythm between paragraphs and callouts. */
.s-verdad { background: var(--bg-cream); }
.verdad-body, .verdad-highlight { max-width: 740px; margin: 0 auto; }
.verdad-body p { font-size: 17px; line-height: 1.75; }
.verdad-emphasis { margin: 24px 0; padding: 23px 24px; border: 1px solid var(--line); border-radius: 16px; font-size: 16px; line-height: 1.95; color: var(--text-body); }
.verdad-emphasis--error { background: #FFFDFB; border-left: 3px solid #BA6079; }
.truth-consequence { display: block; padding: 13px 0; line-height: 1.65; }
.truth-consequence + .truth-consequence { border-top: 1px solid #EBDDD7; }
.truth-consequence:first-child { padding-top: 0; }
.truth-consequence:last-child { padding-bottom: 0; }
.verdad-emphasis--hope { background: #F0F5EF; border-color: #DBE5D8; }
.verdad-highlight { margin-top: 30px; padding: 28px 24px; background: #F1DFE4; border-radius: 18px; color: #713045; font-size: 18px; line-height: 1.65; }
.verdad-highlight strong { color: #713045; font-family: var(--font-head); font-size: 23px; }
.s-mecanismo { background: #34202A; color: white; }
.mecanismo-title { color: #FFF7F1; }
.mecanismo-body, .mecanismo-callout, .authority-note { max-width: 740px; margin-left: auto; margin-right: auto; }
.mecanismo-body p { color: #E8DDE3; font-size: 17px; line-height: 1.75; }
.mecanismo-body strong { color: #FFF5EF; }
.method-state { margin: 28px 0; padding: 28px 0; border-top: 1px solid #85657166; border-bottom: 1px solid #85657166; }
.method-state-symbol { display: block; width: 56px; height: 56px; padding: 7px; margin: 0 auto 16px; border-radius: 50%; background: #503442; color: #EBC492; }
.method-state-symbol svg { width: 100%; height: 100%; }
.method-state p:first-of-type { max-width: 420px; margin: 0 auto; font-family: var(--font-head); font-size: 26px; line-height: 1.35; text-align: center; text-wrap: balance; }
.method-state p + p { margin-top: 20px; }
.method-demo { overflow: hidden; margin-top: 28px; border: 1px solid #88626E; border-radius: 20px; background: #482B37; }
.method-screen { position: relative; overflow: hidden; height: 290px; background: #FFF7F0; }
.method-screen img { position: absolute; top: 0; left: 50%; width: 145%; max-width: none; height: auto; transform: translate(-50%, -27%); }
.mecanismo-body .method-feature { padding: 26px 24px; margin: 0; text-align: center; }
.method-feature strong { display: block; margin: 10px auto; max-width: 300px; color: #F4C5D3; font-family: var(--font-head); font-size: 32px; line-height: 1.2; text-wrap: balance; }
.mecanismo-body .method-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 30px; color: #F6D5DF; font-family: var(--font-head); font-size: 23px; line-height: 1.4; text-align: center; }
.method-result span { position: relative; padding: 18px 10px; border: 1px solid #775062; border-radius: 12px; }
.method-result span:first-child::after { content: ''; position: absolute; top: 50%; right: -14px; width: 7px; height: 7px; border-top: 2px solid #D5AC79; border-right: 2px solid #D5AC79; transform: translateY(-50%) rotate(45deg); }
.method-result span:last-child { grid-column: 1 / -1; padding: 10px 20px 0; border: 0; color: #E8DDE3; font-family: var(--font-body); font-size: 16px; }
.mecanismo-callout { margin-top: 22px; padding-top: 22px; border-top: 1px solid #85657166; color: #ECD6B5; font-size: 17px; font-weight: 650; text-align: center; }
.authority-note { padding: 22px 0 0; margin-top: 8px; color: #CEBDC6; font-size: 14px; line-height: 1.75; }
.authority-note strong { color: #F0DDBF; }
.s-mecanismo .cta-wrap { margin-top: 32px; }
.s-mecanismo .cta-sub { color: #D9C9D1; }

/* Included content: the library remains visible beside the modules on desktop. */
.s-stack { background: var(--bg-cream); }
.stack-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.stack-preview { min-width: 0; }
.stack-preview .app-showcase { max-width: 340px; }
.stack-list { display: grid; gap: 18px; min-width: 0; }
.stack-item { display: grid; grid-template-columns: minmax(0, 1fr); padding: 24px 20px; background: white; border: 1px solid #E8DAD4; border-radius: 20px; position: relative; }
.stack-item-img { grid-column: 1; grid-row: 2; width: 100%; padding: 18px 0 26px; margin-bottom: 14px; background: radial-gradient(ellipse at 50% 70%, #EBD9D2, #FBF5F0 52%, #FFFFFF 73%); }
.stack-item-img img { width: 128px; margin: 0 auto; border-radius: 5px; box-shadow: 9px 12px 19px #3517222B; transform: perspective(800px) rotateY(-12deg) rotateZ(-3deg); }
.stack-item-content { display: contents; }
.stack-label { grid-column: 1; grid-row: 1; display: flex; justify-content: center; gap: 6px; align-items: center; margin-bottom: 4px; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--accent-rose-dark); }
.stack-label .emoji { font-size: 15px; }
.stack-label .tag { text-transform: uppercase; letter-spacing: 1px; }
.stack-h3 { grid-column: 1; grid-row: 3; font-family: var(--font-head); font-size: 25px; font-weight: 700; line-height: 1.25; letter-spacing: -.25px; color: var(--text-dark); text-align: center; text-wrap: balance; }
.stack-desc { grid-column: 1 / -1; margin: 20px 0 0; font-size: 16px; line-height: 1.65; }
.stack-desc .copy-break { margin-top: 16px; padding: 13px 15px; border-left: 2px solid #C998A4; background: #FBF5F6; font-size: 15px; }
.stack-price { grid-column: 1 / -1; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #F0E5DF; color: var(--accent-rose-dark); font-size: 14px; font-weight: 650; text-align: center; }
.stack-price del { color: var(--text-muted); font-weight: 400; margin-right: 6px; }
.stack-price strong { color: var(--accent-rose-dark); margin-left: 6px; }
.stack-item.is-bonus { border-color: #D9BF9B; background: #FFFDFA; }
.stack-item.is-bonus::before { content: 'GRATIS'; position: absolute; right: 18px; top: -10px; padding: 2px 10px; background: #F4E4CC; border: 1px solid #E2C9A5; border-radius: 5px; color: #73542A; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.stack-item.is-bonus .stack-label { color: #73542A; }
.app-features { padding: 24px 0 0; max-width: 500px; margin: 0 auto; }
.app-features-title { margin-bottom: 20px; font-size: 17px; line-height: 1.6; color: var(--text-dark); font-weight: 700; text-align: center; }
.app-features-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app-features-list li { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 12px; border: 1px solid var(--line); border-radius: 14px; background: #FFFDFA; font-size: 14px; line-height: 1.6; text-align: center; }
.app-features-list .af-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #F8EBE8; font-size: 24px; }
.app-features-list li:last-child { grid-column: 1 / -1; flex-direction: row; text-align: left; color: var(--accent-rose-dark); font-weight: 650; }
.app-features-list li:last-child .af-icon { flex: 0 0 38px; }

/* Purchase summary first; the original valuation remains below it. */
.s-precio { background: #F3E5E9; scroll-margin-top: 20px; }
.offer-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: start; }
.offer-summary { padding: 28px 22px; border: 1px solid #CCA4AF; border-radius: 22px; background: #FFFDFB; box-shadow: 0 12px 36px #5126360C; }
.offer-lead { font-size: 17px; line-height: 1.65; text-align: center; color: var(--text-dark); }
.precio-final { margin: 22px 0 24px; text-align: center; }
.precio-amount { display: block; margin-bottom: 12px; color: var(--accent-rose-dark); font-family: var(--font-head); font-size: 76px; font-weight: 800; letter-spacing: -3px; line-height: 1.05; }
.precio-note { display: block; max-width: 270px; margin: 0 auto; font-size: 15px; line-height: 1.6; color: var(--text-body); }
.offer-summary .cta-btn { font-size: 15px; padding-left: 17px; padding-right: 17px; }
.offer-summary .currency-note { padding-top: 12px; margin-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-muted); }
.offer-details { min-width: 0; }
.precio-table-wrap { border: 1px solid #DFC9D0; border-radius: 16px; overflow: hidden; background: #FFFBF9; }
.precio-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.precio-table th { padding: 16px; background: #3E2530; color: #FFF8F2; font-size: 12px; font-weight: 600; text-align: left; }
.precio-table td { padding: 15px 16px; border-bottom: 1px solid #EEDFE4; vertical-align: top; color: var(--text-body); }
.precio-table th:last-child, .precio-table td:last-child { text-align: right; white-space: nowrap; }
.precio-table td:last-child { font-weight: 650; color: var(--accent-rose-dark); }
.precio-table tbody tr:nth-child(even) { background: #FCF4F5; }
.precio-table tfoot td { border-bottom: 0; padding-top: 18px; padding-bottom: 18px; color: var(--text-dark); font-weight: 700; }
.precio-compare { padding: 0 4px; margin: 20px 0 18px; font-size: 14px; color: #6C5360; line-height: 1.7; text-align: center; }
.precio-anchor { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding: 16px 0 0; border-top: 1px solid #DEC8D1; }
.precio-anchor p, .precio-anchor p + p { margin: 0; font-size: 14px; line-height: 1.6; }
.precio-anchor del { color: #8C3551; }

@media (min-width: 700px) {
  .container { padding: 0 32px; }
  .hero-center { max-width: 740px; }
  .hero-h1 { font-size: 42px; }
  .hero-sub { max-width: 620px; }
  .hero-journey { max-width: 430px; }
  .dolor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .dolor-item:last-child { grid-column: 1 / -1; }
  .dolor-cta { max-width: none; }
  .offer-layout { max-width: 680px; margin: 0 auto; }
  .stack-list { max-width: 740px; margin: 0 auto; }
  .stack-preview .app-showcase { max-width: 370px; }
}
@media (min-width: 960px) {
  .s-hero { padding: 42px 0 0; }
  .hero-center { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: 52px; max-width: 1180px; }
  .hero-logo { width: 150px; margin-bottom: 28px; }
  .pre-headline { font-size: 12px; max-width: 520px; }
  .hero-h1 { font-size: clamp(38px, 3.4vw, 46px); }
  .hero-journey { max-width: 420px; }
  .hero-evidence { font-size: 15px; }
  .s-dolor, .s-verdad, .s-mecanismo, .s-stack, .s-precio { padding: 88px 0; }
  .s-dolor { padding-top: 40px; }
  .hero-story-transition { margin-top: 52px; }
  .dolor-title, .verdad-title, .mecanismo-title, .stack-title, .precio-title { font-size: 40px; letter-spacing: -.9px; }
  .dolor-item { padding: 26px; }
  .dolor-text { font-size: 17px; }
  .dolor-cta { padding: 28px 32px; }
  .stack-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; }
  .stack-preview { position: sticky; top: 24px; }
  .stack-preview .app-showcase { max-width: 330px; }
  .stack-item { grid-template-columns: 144px minmax(0, 1fr); gap: 0 24px; padding: 28px; }
  .stack-item-img { grid-column: 1; grid-row: 1 / 5; align-self: start; padding: 20px 0; margin: 0; }
  .stack-item-img img { width: 144px; }
  .stack-h3 { grid-column: 2; grid-row: 2; font-size: 25px; }
  .stack-label { grid-column: 2; grid-row: 1; margin-bottom: 10px; font-size: 12px; }
  .stack-desc { grid-column: 2; grid-row: 3; }
  .stack-price { grid-column: 2; grid-row: 4; }
  .stack-list { max-width: none; margin: 0; }
  .offer-layout { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .offer-summary { padding: 34px 30px; position: sticky; top: 24px; }
  .offer-lead { font-size: 18px; }
  .precio-amount { font-size: 88px; }
  .precio-table { font-size: 15px; }
  .precio-table td, .precio-table th { padding-left: 20px; padding-right: 20px; }
  .method-demo { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .method-screen { height: 360px; }
  .hero-scroll-cue { justify-content: flex-start; margin-left: 6px; }
}
@media (max-width: 959px) {
  .hero-logo { margin: 0 auto 22px; }
  .pre-headline { max-width: 540px; margin: 0 auto 24px; padding: 0 10px; border-left: 0; text-align: center; }
  .hero-h1 { text-align: center; text-wrap: balance; }
  .hero-sub { margin: 0 auto; text-align: center; }
  .hero-sub > strong { display: block; margin-top: 6px; }
}
@media (min-width: 960px) and (max-height: 979px) {
  .stack-preview { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}