/* Variables y Reset */
:root {
  --yellow: #F5C518;
  --bg: #0f0f0f;
  --bg2: #161616;
  --bg3: #1e1e1e;
  --bg4: #272727;
  --line: rgba(255,255,255,.08);
  --text: #f0ede8;
  --text2: #9b9890;
  --text3: #5a5855;
  --red: #e04040;
  --green: #3daa6e;
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 96px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--font-main); background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.6; padding-bottom: 70px; /* space for sticky mobile cta */ }
img, video { max-width: 100%; height: auto; display: block; }
.container { width: 100%; padding: 0 20px; margin: 0 auto; }
.container--wide { width: 100%; padding: 0 20px; margin: 0 auto; }

/* Tipografía Compartida */
.section-label { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--text3); margin-bottom: 14px; text-transform: uppercase; }
.section-title { font-weight: 800; font-size: clamp(26px, 6vw, 42px); line-height: 1.1; margin-bottom: var(--space-md); }
.section-title em, h1 em, h3 em { font-style: normal; color: var(--yellow); }

/* Animaciones */
@keyframes pulse-btn {
  0% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(245, 197, 24, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0); }
}
@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(0, 168, 89, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(0, 168, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 168, 89, 0); }
}

/* Botones Compartidos */
.btn-primary { background: var(--yellow); color: #111; font-weight: 700; font-size: 16px; letter-spacing: .07em; padding: 14px 20px; border-radius: 4px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, transform .1s; white-space: nowrap; width: 100%; animation: pulse-btn 2.5s infinite; }
.btn-primary:hover { background: #ffd040; }
.btn-primary:active { transform: scale(.97); }

.btn-secondary { background: #00A859; color: white; font-weight: 700; font-size: 16px; letter-spacing: .07em; padding: 14px 20px; border-radius: 4px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, transform .1s; white-space: nowrap; width: 100%; }
.btn-secondary:hover { background: #00934e; }
.btn-secondary:active { transform: scale(.97); }

.btn-outline { color: var(--text2); font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--text3); transition: color .2s; white-space: nowrap; display: inline-block; margin-top: var(--space-sm); }
.btn-outline:hover { color: var(--text); }

/* ==== MOBILE FIRST (Default: 320px+) ==== */
nav { position: sticky; top: 0; z-index: 100; background: rgba(15,15,15,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; gap: 12px; flex-wrap: wrap; }
.nav-logo { font-weight: 800; font-size: 17px; letter-spacing: .04em; color: var(--text); text-decoration: none; z-index: 101; }
.nav-logo span { color: var(--yellow); }

.menu-toggle { display: flex; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; z-index: 101; padding: 4px; }
.menu-toggle span { width: 24px; height: 2px; background-color: var(--text); transition: 0.3s; }
.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -5px); }

.nav-links { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; list-style: none; }
.nav-links.active { max-height: 300px; padding: var(--space-sm) 0; }
.nav-links a { display: block; padding: 12px 20px; font-size: 14px; color: var(--text2); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.02); }
.nav-links a:hover { color: var(--text); background: var(--bg2); }

.nav-right { display: flex; align-items: center; gap: 12px; z-index: 101; }
.nav-cta { display: none; }

.hero { padding: var(--space-lg) 0 var(--space-md); border-bottom: 1px solid var(--line); position: relative; text-align: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(245,197,24,.1); border: 1px solid rgba(245,197,24,.28); color: var(--yellow); font-size: 10px; font-weight: 600; letter-spacing: .1em; padding: 5px 10px; border-radius: 2px; margin-bottom: var(--space-sm); text-align: left; }
.hero h1 { font-weight: 800; font-size: clamp(32px, 8vw, 68px); line-height: 1.05; letter-spacing: -.01em; margin-bottom: 10px; }
.hero-hook { font-weight: 700; font-size: clamp(18px, 5vw, 28px); color: var(--yellow); margin-bottom: 14px; letter-spacing: -.01em; }
.hero-sub { font-size: 15px; color: var(--text2); margin-bottom: var(--space-md); line-height: 1.6; }
.hero-pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-md); }
.pill { display: inline-flex; align-items: center; gap: 6px; background: var(--bg3); border: 1px solid var(--line); border-radius: 20px; padding: 6px 12px; font-size: 12px; color: var(--text2); }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: var(--space-sm); }
.hero-trust { font-size: 11px; color: var(--text3); display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.trust-sep { color: var(--bg4); }
.hero-gif-wrap { margin-top: var(--space-md); border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #000; aspect-ratio: 16/9; }
.hero-authority-logos { display: flex; justify-content: center; gap: 32px; align-items: center; opacity: 0.8; flex-wrap: wrap; }

section { padding: var(--space-lg) 0; border-bottom: 1px solid var(--line); }
.bg-alt { background: var(--bg2); }

.video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.video-wrapper video { position: absolute; inset: 0; width: 100%; height: 100%; }

.stats { padding: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.stat-item { padding: 20px 10px; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-item:nth-child(even) { border-right: none; }
.stat-item:nth-child(3), .stat-item:nth-child(4) { border-bottom: none; }
.stat-num { font-weight: 800; font-size: 28px; color: var(--yellow); line-height: 1; }
.stat-label { font-size: 11px; color: var(--text2); margin-top: 5px; line-height: 1.4; }

.problems-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.problem-item { background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 0 6px 6px 0; padding: 15px; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text2); }
.px { color: var(--red); font-weight: 700; font-size: 15px; }

.solution-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.checks { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text2); }
.ci { width: 18px; height: 18px; border-radius: 50%; background: rgba(61,170,110,.14); border: 1px solid var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; font-size: 9px; color: var(--green); font-weight: 700; }
.solution-images { display: flex; flex-direction: column; gap: 10px; }
.img-wrap { border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.img-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Testimonials */
.test-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: var(--space-md); }
.test-card { background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; padding: 24px; text-align: left; }
.test-stars { color: var(--yellow); margin-bottom: 12px; letter-spacing: 2px; font-size: 14px; }
.test-text { font-size: 14px; font-style: italic; color: var(--text); margin-bottom: 16px; line-height: 1.6; }
.test-name { font-size: 11px; color: var(--text3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

.cta-banner { background: linear-gradient(135deg, rgba(245,197,24,.12) 0%, rgba(245,197,24,.04) 100%); border-top: 1px solid rgba(245,197,24,.2); border-bottom: 1px solid rgba(245,197,24,.2); text-align: center; padding: var(--space-lg) 20px; }
.cta-banner h3 { font-size: 26px; line-height: 1.2; margin-bottom: 12px; }
.cta-banner p { font-size: 14px; color: var(--text2); margin-bottom: 24px; }

.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gallery-item { aspect-ratio: 3/4; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

.how-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-md); }
.how-step { text-align: center; }
.step-num { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: var(--yellow); margin: 0 auto 14px; }
.step-title { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.step-desc { font-size: 13px; color: var(--text2); }

.includes-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.include-item { background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 16px; display: flex; gap: 12px; }
.include-icon { font-size: 20px; }
.include-title { font-weight: 600; font-size: 14px; }
.include-desc { font-size: 12px; color: var(--text2); margin-top: 4px; }
.include-tag { display: inline-block; font-size: 9px; font-weight: 700; background: rgba(245,197,24,.1); color: var(--yellow); border: 1px solid rgba(245,197,24,.22); padding: 2px 6px; border-radius: 2px; margin-top: 8px; }

/* Pricing */
.price-card { background: var(--bg3); border: 1px solid rgba(245,197,24,.4); border-radius: 8px; overflow: hidden; margin-top: var(--space-md); position: relative; }
.price-card-header { background: rgba(245,197,24,.12); border-bottom: 1px solid rgba(245,197,24,.25); padding: 12px; font-size: 10px; font-weight: 800; color: var(--yellow); letter-spacing: .05em; }
.price-card-body { padding: 24px; }

/* Countdown */
.countdown-wrap { background: rgba(224, 64, 64, 0.08); border: 1px solid rgba(224, 64, 64, 0.2); border-radius: 6px; padding: 12px; margin-bottom: 24px; color: var(--red); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.countdown-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--red); }
.countdown-timer { display: flex; gap: 8px; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cd-box { background: var(--red); color: white; padding: 6px 10px; border-radius: 4px; line-height: 1; min-width: 44px; text-align: center; }
.cd-sep { color: var(--red); padding-top: 2px; }

/* Guarantee Box */
.guarantee-box { background: rgba(61, 170, 110, 0.06); border: 1px dashed rgba(61, 170, 110, 0.3); border-radius: 8px; padding: 20px; text-align: center; margin-top: 24px; }
.guarantee-icon { font-size: 32px; margin-bottom: 8px; display: block; }
.guarantee-title { font-size: 13px; font-weight: 800; color: var(--green); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
.guarantee-desc { font-size: 12px; color: var(--text2); line-height: 1.6; }

.trust-badges { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; }
.trust-badge { background: var(--bg2); border: 1px solid var(--line); border-radius: 4px; padding: 10px; display: flex; align-items: center; gap: 8px; }
.price-btns { display: flex; flex-direction: column; gap: 10px; }
.btn-arg { background: 0 0; color: var(--text); border: 1px solid rgba(255,255,255,.2); padding: 14px; text-align: center; text-decoration: none; border-radius: 4px; font-weight: 700; font-size: 14px; transition: background .2s; }
.btn-arg:hover { background: rgba(255,255,255,.05); }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 4px; }
.faq-item { background: var(--bg3); border: 1px solid var(--line); border-radius: 4px; }
.faq-q { width: 100%; text-align: left; background: none; border: none; color: var(--text); padding: 16px; font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; cursor: pointer; }
.faq-arrow { color: var(--yellow); transition: 0.3s; font-size: 18px; line-height: 1; }
.faq-item.open .faq-arrow { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; padding: 0 16px; font-size: 13px; color: var(--text2); transition: max-height 0.3s, padding 0.3s; }
.faq-item.open .faq-a { max-height: 300px; padding: 0 16px 16px; }

/* Author & Footer */
.author-compact { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.author-photo-small { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; }
footer { padding: 32px 20px 100px; text-align: center; border-top: 1px solid var(--line); font-size: 12px; color: var(--text3); }
.footer-links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.footer-links a { color: var(--text3); text-decoration: none; }

.wa-float { position: fixed; bottom: 85px; right: 20px; z-index: 200; background: #25D366; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,.3); transition: bottom .3s; }

/* Sticky CTA Mobile */
.sticky-cta-bar { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(15,15,15,0.95); border-top: 1px solid var(--line); padding: 12px 20px; z-index: 150; backdrop-filter: blur(8px); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 -4px 20px rgba(0,0,0,0.5); }
.sticky-cta-bar.visible { transform: translateY(0); }
.sticky-cta-bar .btn-primary { width: 100%; padding: 14px; font-size: 15px; box-shadow: 0 0 15px rgba(245, 197, 24, 0.2); }

/* Modal Lightbox Payment */
.payment-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; backdrop-filter: blur(5px); }
.payment-modal-overlay.active { opacity: 1; pointer-events: auto; }
.payment-modal { background: var(--bg2); width: 90%; max-width: 400px; border-radius: 12px; padding: 32px 24px; text-align: center; border: 1px solid var(--line); position: relative; transform: translateY(20px); transition: transform 0.3s; }
.payment-modal-overlay.active .payment-modal { transform: translateY(0); }
.close-modal { position: absolute; top: 12px; right: 16px; background: none; border: none; color: var(--text3); font-size: 24px; cursor: pointer; }
.close-modal:hover { color: var(--text); }
.payment-modal h3 { font-size: 20px; margin-bottom: 24px; color: var(--text); }
.payment-modal .btn-secondary, .payment-modal .btn-primary { margin-bottom: 12px; font-size: 15px; }

/* ==== TABLET & DESKTOP (Min-width: 768px) ==== */
@media (min-width: 768px) {
  .container, .container--wide { max-width: 720px; }
  body { padding-bottom: 0; }
  .btn-primary { width: auto; padding: 14px 30px; }

  /* Nav */
  .menu-toggle { display: none; }
  .nav-links { position: static; max-height: none; flex-direction: row; gap: 24px; background: none; border: none; padding: 0; }
  .nav-links a { border: none; padding: 0; }
  .nav-inner { flex-wrap: nowrap; }

  /* Hero */
  .hero { text-align: left; padding: var(--space-xl) 0 var(--space-lg); }
  .hero-pills { justify-content: flex-start; }
  .hero-actions { flex-direction: row; align-items: center; }
  .hero-trust { justify-content: flex-start; }
  .hero-authority-logos { justify-content: flex-start; }
  .hero-gif-wrap { max-width: 640px; margin: var(--space-md) 0 0 0; }

  /* Grids */
  .stats-grid { grid-template-columns: repeat(4, 1fr); border-top: none; }
  .stat-item { border-right: 1px solid var(--line); border-bottom: none; padding: 28px 20px; }
  .stat-item:nth-child(4) { border-right: none; }
  
  .problems-grid { grid-template-columns: 1fr 1fr; }
  .solution-grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .test-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .how-steps { grid-template-columns: repeat(3, 1fr); }
  .includes-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-badges { grid-template-columns: 1fr 1fr; }

  /* Author & Misc */
  .author-compact { flex-direction: row; text-align: left; max-width: 680px; margin: 0 auto; }
  .author-photo-small { border-radius: 8px; width: 90px; height: 90px; }
  .wa-float { bottom: 20px; }
  .sticky-cta-bar { display: none !important; }
  footer { padding-bottom: 32px; }
}

/* ==== DESKTOP WIDE (Min-width: 1024px) ==== */
@media (min-width: 1024px) {
  .container { max-width: 960px; }
  .container--wide { max-width: 1100px; }
  .nav-cta { display: inline-block; background: var(--yellow); color: #111; padding: 8px 16px; border-radius: 4px; font-weight: 700; text-decoration: none; font-size: 13px; }
  .hero-sub { max-width: 520px; }
}



    .stats-container-box { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
    .stats-grid-3 { display: grid; grid-template-columns: repeat(1, 1fr); }
    @media (min-width: 768px) { .stats-grid-3 { grid-template-columns: repeat(3, 1fr); } }
    .stat-item-premium { padding: 40px 24px; text-align: center; border-bottom: 1px solid var(--line); position: relative; transition: all 0.3s; }
    .stat-item-premium:hover { background: rgba(255,255,255,0.03); transform: translateY(-3px); }
    @media (min-width: 768px) { 
      .stat-item-premium { border-bottom: none; border-right: 1px solid var(--line); } 
      .stat-item-premium:last-child { border-right: none; }
    }
  

    .prob-grid-3 { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
    @media (min-width: 768px) { .prob-grid-3 { grid-template-columns: repeat(3, 1fr); } }
    .prob-card { background: var(--bg2); border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 6px; padding: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; }
    .prob-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(224,64,64,0.1); color: var(--red); font-size: 24px; font-weight: 800; margin-bottom: 20px; }
    .prob-t { font-weight: 800; font-size: 18px; margin-bottom: 12px; color: var(--text); line-height: 1.25; }
    .prob-d { font-size: 14px; color: var(--text2); line-height: 1.6; }
  

    .chat-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
    @media (min-width: 768px) { .chat-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .chat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    .chat-card { background: #e1ffc7; color: #111; padding: 16px 20px; border-radius: 12px 12px 12px 0; font-size: 16px; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); margin-bottom: 24px; text-align: left; }
    .chat-card::after { content: ''; position: absolute; left: -10px; bottom: 0; width: 0; height: 0; border: 10px solid transparent; border-right-color: #e1ffc7; border-bottom-color: #e1ffc7; }
    .chat-name { font-size: 13px; font-weight: 700; color: #075e54; margin-bottom: 6px; text-transform: none; letter-spacing: 0; }
    .chat-text { font-size: 16px; line-height: 1.5; color: #111; }

    .btn-load-more { background: none; border: 1px solid var(--text3); color: var(--text); padding: 12px 24px; border-radius: 4px; font-size: 14px; cursor: pointer; transition: all 0.2s; margin-top: 32px; }
    .btn-load-more:hover { background: rgba(255,255,255,0.05); }
  

      .gallery-grid-new { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
      .gallery-grid-new .gallery-item { aspect-ratio: auto; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: transparent; }
      .gallery-grid-new img { width: 100%; height: auto; display: block; object-fit: contain; }
    
/* Accesibilidad de navegación y movimiento. */
a:focus-visible, button:focus-visible { outline: 3px solid #f5c518; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { html, body {scroll-behavior: auto;} *, *::before, *::after {animation: none !important; transition: none !important;} }

/* Galería compacta: mantener los tableros completos y permitir ampliarlos. */
.gallery-grid-new { max-width: 900px; margin-left: auto; margin-right: auto; }
.gallery-grid-new .gallery-item { padding: 12px; background: var(--bg2); }
.gallery-grid-new .gallery-item img { width: 100%; height: 220px; object-fit: contain; }
.apps-destacadas .apps-intro { max-width: 680px; color: var(--text2); margin-bottom: 28px; }
.destacadas-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 32px 0; }
.destacadas-grid .tarjeta { display: flex; flex-direction: column; padding: 20px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.destacadas-grid .imagen-herramienta, .destacadas-grid .imagen-pendiente { width: 100%; aspect-ratio: 1; object-fit: contain; background-color: var(--bg); border-radius: 8px; margin-bottom: 24px; }
.destacadas-grid .imagen-pendiente { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 16px; gap: 12px; background-image: linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px); background-size: 24px 24px; }
.destacadas-grid .imagen-pendiente strong { font-size: clamp(24px,3vw,40px); color: var(--yellow); }
.destacadas-grid .imagen-pendiente span, .destacadas-grid p { color: var(--text2); }
.destacadas-grid .estado { color: var(--yellow); font-size: 13px; font-weight: 700; }
.destacadas-grid h3 { font-size: 22px; margin: 16px 0 12px; line-height: 1.3; }
.destacadas-grid .enlace-herramienta, .destacadas-grid .acceso-pendiente { margin-top: auto; padding-top: 24px; }
.destacadas-grid .enlace-herramienta { color: var(--yellow); font-weight: 700; text-underline-offset: 4px; }
.autor-grid { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 56px; align-items: start; }
.autor-retrato img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; border: 1px solid var(--line); }
.autor-retrato > p { margin-top: 20px; font-size: 20px; font-weight: 700; }
.autor-retrato span { display: block; color: var(--yellow); font-size: 13px; font-weight: 500; margin-top: 4px; }
.autor-historia > p { color: var(--text2); margin-bottom: 18px; font-size: 17px; line-height: 1.75; }
.autor-pruebas { display: grid; gap: 18px; margin: 28px 0; padding-left: 20px; border-left: 2px solid var(--yellow); }
.autor-pruebas p { color: var(--text2); font-size: 14px; margin-top: 4px; }
.autor-pruebas a { color: var(--yellow); font-size: 14px; text-underline-offset: 4px; }
.wa-float { width: 56px; height: 56px; bottom: max(20px,env(safe-area-inset-bottom)); right: 20px; }
.wa-float:hover { box-shadow: 0 0 0 5px rgba(37,211,102,.18); }
#experiencia-utn { scroll-margin-top: 80px; }
@media (min-width: 850px) { .gallery-grid-new { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; } }
@media (max-width: 800px) {
  .destacadas-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .autor-grid { grid-template-columns: 1fr; gap: 32px; }
  .autor-retrato { max-width: 220px; }
  .gallery-grid-new { max-width: 560px; }
  .gallery-grid-new .gallery-item img { height: 180px; }
}

/* Blog y recursos: contenido útil después de la oferta principal. */
.recursos-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 32px 0; }
.recursos-grid article { padding: 24px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; }
.recursos-grid h3 { font-size: 21px; line-height: 1.3; margin-bottom: 14px; }
.recursos-grid p, .blog-adelanto > .container > p { color: var(--text2); }
.recursos-grid a { display: inline-block; margin-top: 20px; color: var(--yellow); text-underline-offset: 4px; }
.recursos-cabecera { max-width: 1100px; margin: auto; padding: 24px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.recursos-cabecera > a:not(.nav-logo) { color: var(--text); }
.temas-blog { padding-left: 22px; margin: 24px 0; line-height: 2; }
@media (max-width: 800px) { .recursos-grid { grid-template-columns: 1fr; } }

/* Presentación de la página inicial */
.hero h1 { color: #fff; }
.hero-sub p + p { margin-top: 16px; }

/* Comparación y ejemplos ampliados de la portada */
.hero-sub .hero-promise { color: #fff; margin-top: 28px; font-weight: 600; }
.gallery .gallery-grid-new { max-width: 1100px; grid-template-columns: 1fr; gap: 32px; }
.gallery .gallery-grid-new .gallery-item { padding: 8px; }
.gallery .gallery-grid-new .gallery-item img { height: auto; width: 100%; object-fit: contain; }


/* Presentación secuencial: dificultades primero, beneficios después. */
.presentation-story { padding: clamp(56px, 9vw, 112px) 0; }
.story-eyebrow { font-size: 11px; letter-spacing: .14em; font-weight: 700; margin-bottom: 24px; color: #a8a8ad; }
.story-title { font-size: clamp(30px, 5vw, 58px); line-height: 1.08; letter-spacing: -.045em; font-weight: 750; max-width: 880px; margin: 0 auto; }
.story-before { text-align: center; }
.story-before .story-title { color: #b8b8bd; }
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); text-align: left; }
.story-problems { margin-top: 48px; }
.story-grid h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.02em; margin-bottom: 16px; }
.story-problems h3 { color: #d5d5d9; }
.story-grid p { font-size: 15px; line-height: 1.7; color: #adadb3; }
.story-after { margin-top: clamp(64px, 10vw, 128px); padding-top: clamp(48px, 7vw, 80px); border-top: 1px solid rgba(255,255,255,.12); text-align: center; }
.story-after .story-eyebrow { color: var(--yellow); }
.story-after .story-title { color: #fff; }
.story-title em { color: var(--yellow); font-style: normal; }
.story-intro { max-width: 580px; margin: 28px auto 0; color: #b8b8bd; font-size: 18px; line-height: 1.6; }
.story-benefits { margin-top: 48px; gap: 16px; }
.story-benefits article { background: linear-gradient(145deg, #232325, #18181a); border-radius: 24px; padding: clamp(24px, 3vw, 36px); }
.story-benefits h3 { color: #fff; }
.story-number { display: block; color: var(--yellow); font-size: 13px; font-weight: 700; margin-bottom: 32px; }
.story-product-note { display: block; margin-top: 24px; color: #adadb3; font-size: 12px; }
@media (max-width: 760px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-problems article + article { padding-top: 24px; border-top: 1px solid rgba(255,255,255,.06); }
  .story-title { font-size: clamp(30px, 8vw, 48px); }
}

.chat-grid .chat-card { margin-bottom: 0; min-width: 0; }

/* Beneficios con símbolos vectoriales propios, sin dependencias. */
.problem-cross { display: block; color: #ef6868; margin-bottom: 20px; }
.includes-heading { text-align: center; font-size: clamp(32px, 5vw, 56px); line-height: 1.1; letter-spacing: -.04em; }
.includes-intro { text-align: center; color: #b8b8bd; font-size: 18px; margin: 24px 0 48px; }
.includes-grid.includes-refined { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.includes-refined .include-item { display: block; border: 0; border-radius: 24px; padding: 32px; background: #1c1c1e; }
.include-symbol { display: block; color: var(--yellow); margin-bottom: 30px; }
.includes-refined h3 { color: #fff; font-size: 23px; line-height: 1.2; letter-spacing: -.025em; margin-bottom: 14px; }
.includes-refined p { color: #b8b8bd; font-size: 16px; line-height: 1.6; }
.includes-notes { max-width: 720px; margin: 32px auto 0; text-align: center; color: #b8b8bd; font-size: 14px; line-height: 1.7; }
.includes-notes p + p { margin-top: 12px; }
.includes-notes strong { color: #e8e8ed; font-weight: 600; }
@media (max-width: 900px) { .includes-grid.includes-refined { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .includes-grid.includes-refined { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .includes-refined .include-item { transition: transform .2s ease, background-color .2s ease; }
  .includes-refined .include-item:hover { transform: translateY(-4px); background: #252527; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Mantener la navegación visible sin crear un contenedor de scroll. */
html, body { overflow-x: clip; }
html { scroll-padding-top: 90px; }
nav { position: sticky; top: 0; }

.social-presence{padding:clamp(60px,8vw,110px) 0;text-align:center;border-top:1px solid var(--line)}
.social-presence h2{font-size:clamp(34px,5vw,60px);letter-spacing:-.04em;line-height:1.1;color:#fff}
.social-presence h2 em{font-style:normal;color:var(--yellow)}
.social-intro{max-width:560px;margin:24px auto 36px;color:#b8b8bd;font-size:18px;line-height:1.6}
.social-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:850px;margin:auto}
.social-links a{display:flex;align-items:center;gap:20px;text-align:left;color:#fff;text-decoration:none;background:#1c1c1e;padding:28px;border-radius:22px;border:1px solid #353537}
.social-links svg{flex-shrink:0;color:var(--yellow)}
.social-links strong{display:block;font-size:24px;letter-spacing:-.02em}
.social-links small{display:block;color:#b8b8bd;font-size:13px;overflow-wrap:anywhere}
.social-links a>span:last-child{margin-left:auto;font-size:24px}
.social-links a:hover,.social-links a:focus-visible{border-color:var(--yellow)}
@media(max-width:640px){.social-links{grid-template-columns:1fr}.social-links a{padding:24px}}

/* Suite: una sola presentación, con ilustraciones vectoriales livianas. */
.suite-showcase{padding:clamp(64px,9vw,112px) 0;background:#111113;border-top:1px solid #272729;border-bottom:1px solid #272729}
.suite-heading{text-align:center;max-width:730px;margin:0 auto 48px}
.suite-heading h2{font-size:clamp(38px,6vw,68px);line-height:1.04;letter-spacing:-.055em;color:#fff}
.suite-heading h2 em{font-style:normal;color:var(--yellow)}
.suite-heading>p:last-child{max-width:530px;margin:24px auto 0;font-size:18px;line-height:1.6;color:#b5b5bd}
.suite-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.suite-tool{border-radius:24px;background:#1c1c1f;overflow:hidden;display:flex;flex-direction:column;border:1px solid #303034}
.tool-art{padding:24px 16px 12px;background:radial-gradient(ellipse at 50% 90%,#393a3d,#222225 70%)}
.tool-art svg{width:100%;height:auto;display:block;stroke:#93939c;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tool-art .art-accent{stroke:var(--yellow);stroke-width:2.4}
.tool-copy{padding:28px;display:flex;flex-direction:column;flex:1}
.tool-label{font-size:10px;letter-spacing:.13em;font-weight:750;color:#b1b1b9}
.tool-copy h3{font-size:clamp(22px,2.4vw,28px);line-height:1.15;letter-spacing:-.035em;margin:14px 0 18px;color:#fff}
.tool-copy p{color:#b5b5bd;font-size:15px;line-height:1.65;margin-bottom:28px}
.tool-copy a{color:var(--yellow);font-size:14px;font-weight:650;margin-top:auto;text-decoration:none;display:flex;justify-content:space-between;gap:10px}
.suite-membership{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:28px;padding:32px 36px;border-radius:22px;background:#1c1c1f}
.suite-price{font-size:38px;font-weight:750;letter-spacing:-.04em;color:#fff;margin:10px 0 5px}.suite-price span{font-size:16px;font-weight:400;letter-spacing:0;color:#b5b5bd}
.suite-terms,.suite-footnote{font-size:13px;line-height:1.65;color:#b5b5bd}
.suite-actions{display:flex;flex-direction:column;align-items:center;gap:16px}
.suite-buy{display:flex;gap:32px;align-items:center;justify-content:space-between;background:var(--yellow);border-radius:100px;padding:15px 25px;color:#111;font-weight:700;text-decoration:none}
.suite-account{color:#dddde3;font-size:13px;text-underline-offset:4px}.suite-footnote{max-width:720px;text-align:center;margin:20px auto 0}
.suite-showcase a:focus-visible{outline:2px solid var(--yellow);outline-offset:6px}
.story-problems{gap:0;text-align:left}
.story-problems article{padding:0 28px;position:relative}.story-problems article:first-child{padding-left:0}.story-problems article:last-child{padding-right:0}
.story-problems article+article{border-left:1px solid #2c292b}
.problem-marker{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #654047;border-radius:50%;background:#2a1e21;margin-bottom:24px}
.problem-marker .problem-cross{width:24px;height:24px;display:block;margin:0;color:#e99097}
.story-problems h3{font-size:20px;line-height:1.35;color:#e5e1e3}.story-problems p{font-size:15px;color:#aaa6aa}
@media(max-width:800px){.suite-tools{grid-template-columns:1fr}.suite-tool{display:grid;grid-template-columns:32% minmax(0,1fr)}.tool-art{display:flex;align-items:center;padding:14px}.tool-copy{padding:28px}.suite-membership{padding:28px}}
@media(max-width:760px){.story-problems article,.story-problems article:first-child,.story-problems article:last-child{padding:24px 0 24px 52px}.story-problems article+article{border-left:0}.problem-marker{position:absolute;left:0;top:24px;width:30px;height:30px}}
@media(max-width:520px){.suite-tool{display:flex}.tool-art{padding:20px 36px 8px}.tool-art svg{max-height:140px}.suite-membership{align-items:stretch;flex-direction:column;gap:24px}.suite-actions{align-items:stretch}.suite-account{text-align:center}}
@media(prefers-reduced-motion:no-preference) and (hover:hover){.suite-tool{transition:border-color .2s ease,transform .2s ease}.suite-tool:hover{border-color:#616167;transform:translateY(-3px)}}

/* Testimonios seleccionados, con el mensaje como protagonista. */
.testimonials-title{text-align:center;font-size:clamp(34px,5vw,56px);letter-spacing:-.04em;line-height:1.08}
.testimonials .section-label{text-align:center}
.testimonials-intro{text-align:center;max-width:520px;margin:24px auto 40px;color:#b8b8bd;font-size:16px}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.testimonial{margin:0;padding:30px;display:flex;flex-direction:column;background:#1c1c1e;border-radius:22px;text-align:left}
.testimonial-mark{color:var(--yellow);font-family:Georgia,serif;font-size:48px;line-height:.8;margin-bottom:18px}
.testimonial blockquote{font-size:17px;line-height:1.6;letter-spacing:-.015em;color:#eeedf0;margin:0 0 28px}
.testimonial figcaption{margin-top:auto;padding-top:18px;border-top:1px solid #343437;color:#b8b8bd;font-size:13px;font-weight:600}
@media(max-width:900px){.testimonials-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.testimonials-grid{grid-template-columns:1fr}.testimonial{padding:26px}}

/* Touch-friendly navigation and purchase controls on compact screens. */
.nav-right:empty { display: none; }
@media (max-width: 1023px) {
  .nav-inner { flex-wrap: nowrap; }
  .menu-toggle { display: flex; width: 44px; height: 44px; padding: 10px; justify-content: center; flex-shrink: 0; }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; max-height: 0; padding: 0; gap: 0; flex-direction: column; background: var(--bg); overflow: hidden; }
  .nav-links.active { max-height: calc(100dvh - 80px); padding: 12px 0; overflow-y: auto; overscroll-behavior: contain; }
  .nav-links a { padding: 14px 20px; min-height: 48px; }
}
@media (max-width: 767px) {
  .btn-primary, .btn-secondary, .btn-outline { white-space: normal; overflow-wrap: anywhere; text-align: center; letter-spacing: .01em; }
  .btn-primary, .btn-secondary, .suite-buy { min-height: 48px; }
  .btn-primary > span, .btn-secondary > span { min-width: 0; }
  .price-card-body .btn-primary, .price-card-body .btn-secondary { flex-wrap: wrap; justify-content: center !important; }
  .suite-membership { flex-direction: column; align-items: stretch; gap: 24px; }
  .suite-actions { align-items: stretch; min-width: 0; }
  .suite-buy { gap: 12px; padding: 15px 18px; overflow-wrap: anywhere; }
  .suite-account { text-align: center; }
  .tool-copy a { min-height: 44px; align-items: center; }
}
@media (max-width: 380px) {
  .price-card-body, .suite-membership { padding: 20px 16px; }
  .nav-logo { font-size: 15px; }
}

/* Original brand artwork, with its original proportions. */
.brand-logo-image{display:block;width:140px;height:auto;max-width:100%;object-fit:contain}
footer .brand-logo-image{margin:0 auto 16px}
.nav-inner{padding-top:4px;padding-bottom:4px}

/* Offer: quiet hierarchy, readable pricing and clear purchase options. */
.offer-section{padding:90px 0;scroll-margin-top:120px}
.offer-heading{text-align:center;max-width:740px;margin:0 auto 44px}
.offer-heading h2{font-size:clamp(34px,5vw,60px);line-height:1.08;letter-spacing:-.045em;color:#f5f5f7;margin:18px 0 24px}
.offer-heading h2 em{font-style:normal;color:var(--yellow)}
.offer-heading>p:last-child{color:#b7b7be;font-size:17px;line-height:1.65;max-width:580px;margin:auto}
.offer-panel{display:grid;grid-template-columns:1.05fr 1fr;border:1px solid #353537;background:#1c1c1e;border-radius:28px;overflow:hidden;text-align:left}
.offer-value{padding:44px 36px;background:radial-gradient(ellipse at top left,rgba(245,197,24,.07),transparent 65%)}
.offer-kicker{font-size:10px;font-weight:700;letter-spacing:.12em;color:#b8b8bd}
.offer-value h3{font-size:clamp(28px,3vw,38px);line-height:1.15;letter-spacing:-.035em;margin:24px 0 32px;color:#f5f5f7}
.offer-benefits{list-style:none;padding:0;margin:0;display:grid;gap:28px}
.offer-benefits li{display:flex;gap:14px}.offer-benefits li>span{color:var(--yellow);font-size:20px;flex-shrink:0}
.offer-benefits strong{font-size:16px;color:#f5f5f7}.offer-benefits p{font-size:14px;color:#b8b8bd;line-height:1.6;margin:7px 0 0}
.offer-separate{font-size:12px;line-height:1.7;color:#a8a8af;margin-top:34px;padding-top:24px;border-top:1px solid #363638}
.offer-checkout{padding:36px;background:#232325;min-width:0}.offer-region{margin-top:24px}.offer-region>span{font-size:14px;color:#ececf0}
.offer-price{font-size:clamp(40px,5vw,56px);font-weight:750;letter-spacing:-.05em;line-height:1.15;color:#fff;margin:10px 0}.offer-price small{font-size:15px;font-weight:500;letter-spacing:0;color:#b8b8bd}
.offer-region>p{font-size:13px;color:#b8b8bd;margin-bottom:20px}
.offer-button{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:14px 18px;border-radius:13px;text-decoration:none;font-size:14px;font-weight:700;line-height:1.35}
.offer-button small{display:block;font-size:11px;font-weight:500;margin-top:3px;opacity:.85}.offer-arg{background:var(--yellow);color:#111}.offer-kofi{background:#29abe0;color:#071c27}.offer-hotmart{background:#333336;color:#f5f5f7;border:1px solid #56565c;margin-top:10px}
.offer-channel{display:block;font-size:11px!important;color:#b8b8bd!important;margin-top:10px;text-align:center}.offer-international{border-top:1px solid #414145;padding-top:26px;margin-top:26px}.offer-activation{font-size:12px;line-height:1.6;color:#b8b8bd;margin:24px 0 0}
.offer-reassurance{display:flex;gap:28px;align-items:center;justify-content:space-between;margin:28px auto 0;padding:0 12px;text-align:left}.offer-reassurance>div{display:flex;gap:14px;max-width:560px}.offer-reassurance svg{flex-shrink:0;color:#b8b8bd}.offer-reassurance h3{font-size:14px;color:#eeeef0;margin:0 0 6px}.offer-reassurance p{font-size:12px;line-height:1.6;color:#a8a8af;margin:0}.offer-reassurance>a{font-size:13px;color:var(--yellow);text-underline-offset:4px;min-height:44px;display:flex;align-items:center;gap:8px}
.offer-section a:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:767px){.offer-section{padding:60px 0}.offer-panel{grid-template-columns:minmax(0,1fr);border-radius:22px}.offer-value,.offer-checkout{padding:28px 24px}.offer-reassurance{flex-direction:column;align-items:stretch;gap:18px}.offer-heading{margin-bottom:30px}}
@media(max-width:380px){.offer-value,.offer-checkout{padding:24px 18px}.offer-button{padding:14px;font-size:13px}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.offer-button{transition:filter .18s ease,transform .18s ease}.offer-button:hover{filter:brightness(1.08);transform:translateY(-2px)}}

/* Product names lead the featured tool cards. */
.tool-copy .tool-name{display:block;font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.035em;line-height:1.15;color:var(--yellow)}
.tool-copy:has(.tool-name) h3{font-size:20px;line-height:1.25;margin-top:18px}