/* Base styling */
* { box-sizing: border-box; }
h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, body { margin: 0; padding: 0; }
html, body { 
  font-family: 'Poppins', system-ui, -apple-system, sans-serif; 
  background: #fafafa; 
  color: #1a1a1a; 
  min-height: 100vh; 
  -webkit-font-smoothing: antialiased; 
  display: flex;
  flex-direction: column;
}

/* Header */
.hdr { 
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 1rem; 
  background: #fff; 
  border-bottom: 1px solid #eee; 
}
.back-btn { 
  position: absolute; 
  left: 1rem; 
  color: #1a1a1a; 
  display: flex; 
  align-items: center; 
  text-decoration: none; 
}
.back-btn svg { width: 24px; height: 24px; }
.logo-container { display: flex; align-items: center; }
.hdr-logo { font-family: 'Anton', system-ui, sans-serif; color: #d64d7a; font-size: 1.875rem; font-weight: 400; letter-spacing: .05em; }
.hdr-badge { font-size: .75rem; background: #f5f5f5; padding: .125rem .5rem; border-radius: .25rem; color: #666; margin-left: .5rem; }

/* Progress Bar */
.progress-container { width: 100%; height: 4px; background: #f3e3ea; }
.progress-bar { height: 100%; background: linear-gradient(90deg, #e5709a, #d64d7a); border-radius: 0 999px 999px 0; transition: width 0.45s cubic-bezier(.22,.8,.32,1); }

/* Shared Button */
.btn-pink { 
  background: #d64d7a; 
  color: #fff; 
  border: none; 
  border-radius: 8px; 
  padding: 1rem 2rem; 
  font-size: 1rem; 
  font-weight: 600; 
  width: 100%; 
  max-width: 400px; 
  cursor: pointer; 
  text-decoration: none; 
  display: inline-flex; 
  justify-content: center; 
  align-items: center; 
  transition: background 0.2s; 
  text-transform: uppercase;
}
.btn-pink:hover { background: #bf4069; }

/* Step 2 */
.step2-container { display: flex; flex-direction: column; align-items: center; padding: 3rem 1rem; max-width: 600px; margin: 0 auto; text-align: center; }
.step2-img { width: 100%; max-width: 420px; border-radius: 20px; object-fit: cover; object-position: center 22%; aspect-ratio: 16/11; margin-bottom: 2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.step2-title { font-size: 1.6rem; font-weight: 700; color: #1a1a1a; margin-bottom: 1rem; line-height: 1.3; }
.step2-subtitle { font-size: 1rem; color: #666; margin-bottom: 2.5rem; line-height: 1.5; padding: 0 1rem; }

/* Step 3 */
.step3-container { display: flex; flex-direction: column; align-items: center; padding: 3rem 1rem; max-width: 800px; margin: 0 auto; }
.step3-title { font-size: 1.6rem; font-weight: 700; color: #1a1a1a; margin-bottom: 3rem; text-align: center; }
.step3-content { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 4rem; width: 100%; }
.options { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 300px; }
.option-btn { background: #fff; border: 1px solid #eee; box-shadow: 0 4px 10px rgba(0,0,0,0.03); border-radius: 12px; padding: 1.25rem 1.5rem; font-size: 1rem; font-weight: 600; color: #1a1a1a; text-align: left; cursor: pointer; transition: all 0.2s; text-decoration: none; display: block; }
.option-btn:hover { border-color: #d64d7a; box-shadow: 0 4px 10px rgba(214, 77, 122, 0.1); }
.step3-img { max-width: 250px; object-fit: contain; }

@media(max-width: 768px) {
  .step3-content { flex-direction: column-reverse; gap: 2rem; }
  .step3-title { margin-bottom: 2rem; }
}

/* Step 4 (Sim / Nao) */
.split-layout { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 4rem 2rem; max-width: 1000px; margin: 0 auto; gap: 4rem; flex: 1; }
.text-content { flex: 1; display: flex; flex-direction: column; align-items: flex-start; max-width: 500px; }
.split-title { font-size: 2rem; font-weight: 700; color: #1a1a1a; margin-bottom: 1.5rem; line-height: 1.2; }
.split-text { font-size: 1.1rem; color: #666; line-height: 1.6; }
.split-text strong { color: #1a1a1a; font-weight: 700; }
.image-content { flex: 1; display: flex; justify-content: center; align-items: center; }
.rounded-image { width: 100%; max-width: 450px; border-radius: 24px; object-fit: cover; object-position: center 18%; aspect-ratio: 4/3; background: #f5f5f5; }
.bottom-action { display: flex; justify-content: center; padding: 2rem 1rem 4rem; }

@media(max-width: 768px) {
  .split-layout { flex-direction: column; padding: 2rem 1rem; gap: 2rem; text-align: center; }
  .text-content { align-items: center; }
  .split-title { font-size: 1.6rem; }
}

/* Step 5 (Objetivo) */
.step5-container { display: flex; flex-direction: column; align-items: center; padding: 4rem 1rem; max-width: 600px; margin: 0 auto; width: 100%; }
.step5-title { font-size: 1.6rem; font-weight: 700; color: #1a1a1a; margin-bottom: 2.5rem; text-align: center; }
.step5-title span { color: #d64d7a; }
.options-list { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 500px; }
.option-list-item { display: flex; align-items: center; background: #fff; border: 1px solid #eee; box-shadow: 0 4px 10px rgba(0,0,0,0.03); border-radius: 12px; padding: 1.25rem 1.5rem; font-size: 1rem; font-weight: 600; color: #1a1a1a; text-decoration: none; cursor: pointer; transition: all 0.2s; }
.option-list-item:hover { border-color: #d64d7a; box-shadow: 0 4px 10px rgba(214, 77, 122, 0.1); }
.option-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #fdf2f5; border-radius: 8px; color: #d64d7a; margin-right: 1.5rem; }
.option-icon svg { width: 20px; height: 20px; }

/* Multi-select Options */
.option-multi { display: flex; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 0.75rem 1.25rem; margin-bottom: 0.75rem; cursor: pointer; transition: all 0.2s; text-decoration: none; color: #1a1a1a; width: 100%; }
.option-multi:hover { border-color: #d64d7a; box-shadow: 0 4px 10px rgba(214, 77, 122, 0.1); }
.option-multi.selected { border-color: #d64d7a; background: #fdf2f5; }
.option-multi-img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; margin-right: 1.25rem; background: #f5f5f5; }
.option-multi-icon { width: 32px; height: 32px; background: #fdf2f5; color: #d64d7a; border-radius: 8px; display: flex; justify-content: center; align-items: center; margin-right: 1.25rem; flex-shrink: 0; }
.option-multi-icon svg { width: 18px; height: 18px; }
.option-multi-text { flex: 1; font-weight: 600; font-size: 0.95rem; text-align: left; }
.option-multi-circle { width: 22px; height: 22px; border: 2px solid #ddd; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; margin-left: auto; }
.option-multi.selected .option-multi-circle { border-color: #d64d7a; background: #d64d7a; }
.option-multi.selected .option-multi-circle::after { content: ''; width: 8px; height: 8px; background: #fff; border-radius: 50%; }

/* Toggle */
.toggle-container { display: flex; align-items: center; margin-bottom: 1.5rem; cursor: pointer; align-self: flex-start; }
.toggle-switch { width: 36px; height: 20px; background: #eee; border-radius: 12px; position: relative; transition: background 0.3s; margin-right: 0.75rem; }
.toggle-switch::after { content: ''; position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: transform 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.toggle-container.active .toggle-switch { background: #d64d7a; }
.toggle-container.active .toggle-switch::after { transform: translateX(16px); }
.toggle-text { font-size: 0.9rem; color: #666; font-weight: 600; }

/* Grid Cards (Step 10) */
.grid-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; width: 100%; max-width: 800px; }
.card-item { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 1rem; text-align: center; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #1a1a1a; }
.card-item:hover { border-color: #d64d7a; box-shadow: 0 4px 10px rgba(214, 77, 122, 0.1); }
.card-item.selected { border-color: #d64d7a; background: #fdf2f5; }
.card-img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; margin-bottom: 1rem; background: #fdfdfd; }
.card-text { font-weight: 600; font-size: 0.95rem; }
@media(max-width: 768px) {
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Step 9 Content */
.step9-container { display: flex; flex-direction: column; align-items: center; padding: 2rem 1rem; max-width: 600px; margin: 0 auto; text-align: center; }
.step9-img { width: 100%; max-width: 360px; border-radius: 20px; object-fit: contain; aspect-ratio: 1/1; margin-bottom: 2rem; background: transparent; }
.step9-title { font-size: 1.4rem; font-weight: 700; color: #1a1a1a; margin-bottom: 1.5rem; line-height: 1.4; }
.step9-title span { color: #d64d7a; }
.step9-text { font-size: 0.95rem; color: #666; line-height: 1.6; margin-bottom: 2rem; }

/* Inactive button */
.btn-pink.disabled { opacity: 0.6; cursor: not-allowed; }
.btn-pink.disabled:hover { background: #d64d7a; }

/* Single Card Horizontal (Step 11) */
.option-single-card { display: flex; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 0.5rem 1.5rem; margin-bottom: 1rem; cursor: pointer; transition: all 0.2s; text-decoration: none; color: #1a1a1a; width: 100%; max-width: 500px; }
.option-single-card:hover { border-color: #d64d7a; box-shadow: 0 4px 10px rgba(214, 77, 122, 0.1); }
.option-single-card.selected { border-color: #d64d7a; background: #fdf2f5; }
.option-single-card-img { width: 64px; height: 64px; object-fit: contain; margin-right: 1.5rem; border-radius: 8px; }
.option-single-card-text { font-weight: 600; font-size: 1rem; }

/* Emoji Options (Step 14) */
.option-emoji { display: flex; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1rem; cursor: pointer; transition: all 0.2s; text-decoration: none; color: #1a1a1a; width: 100%; max-width: 500px; justify-content: flex-start; gap: 1rem; }
.option-emoji:hover { border-color: #d64d7a; box-shadow: 0 4px 10px rgba(214, 77, 122, 0.1); }
.option-emoji span.emoji { font-size: 1.5rem; }
.option-emoji span.text { font-weight: 600; font-size: 1rem; }

/* Step 15 Content */
.step15-container { display: flex; flex-direction: column; align-items: center; padding: 4rem 1rem; max-width: 600px; margin: 0 auto; text-align: center; }
.step15-img { width: 100%; max-width: 380px; border-radius: 24px; object-fit: contain; aspect-ratio: 1/1; margin-bottom: 2rem; background: #f5f5f5; }
.step15-title { font-size: 1.6rem; font-weight: 700; color: #1a1a1a; margin-bottom: 1rem; }
.step15-text { font-size: 1rem; color: #666; line-height: 1.6; margin-bottom: 2.5rem; padding: 0 1rem; }

/* No Image Multi Option */
.option-multi.no-img { padding: 1.25rem 1.5rem; }

/* Scrollable Ruler Components (Step 16-18) */
.ruler-container { width: 100%; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.unit-toggle { display: flex; background: #f5f5f5; border-radius: 20px; padding: 4px; margin-bottom: 2rem; }
.unit-btn { background: transparent; border: none; padding: 0.5rem 1.5rem; border-radius: 16px; font-weight: 600; color: #666; cursor: pointer; transition: 0.2s; }
.unit-btn.active { background: #d64d7a; color: #fff; }
.ruler-value { font-size: 3.5rem; font-weight: 700; color: #1a1a1a; margin-bottom: 1rem; line-height: 1; display: flex; align-items: baseline; justify-content: center; width: 100%; }
.ruler-unit { font-size: 1rem; font-weight: 600; color: #999; margin-left: 0.25rem; }

.scroll-ruler-wrapper { position: relative; width: 100%; max-width: 400px; height: 80px; margin: 0 auto 1rem; overflow: hidden; }
.scroll-ruler-pointer { position: absolute; top: 0; left: 50%; width: 2px; height: 45px; background-color: #d64d7a; transform: translateX(-50%); z-index: 10; pointer-events: none; }
.scroll-ruler-pointer::after { content: ''; position: absolute; bottom: -5px; left: -4px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #d64d7a; }
.scroll-ruler-area { width: 100%; height: 100px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }
.scroll-ruler-area::-webkit-scrollbar { display: none; }
.scroll-ruler-area:active { cursor: grabbing; }
.scroll-ruler-track { display: flex; height: 80px; align-items: flex-start; padding: 0 calc(50% - 1px); border-top: 1px solid #ccc; margin-top: 0; }
.ruler-tick { position: relative; flex-shrink: 0; width: 10px; height: 15px; border-left: 1px solid #ccc; }
.ruler-tick.major { height: 30px; }
.ruler-tick.major::after { content: attr(data-val); position: absolute; top: 35px; left: -15px; width: 30px; text-align: center; font-size: 11px; font-weight: 600; color: #b0b0b0; }

.ruler-hint { color: #ccc; font-size: 0.85rem; margin-bottom: 1rem; text-align: center; width: 100%; }

/* Info box IMC/Age */
.info-box { background: #f9f9f9; border-radius: 12px; padding: 1rem 1.25rem; display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 2rem; width: 100%; text-align: left; }
.info-icon { width: 20px; height: 20px; background: #fdf2f5; color: #d64d7a; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 0.75rem; font-weight: bold; flex-shrink: 0; margin-top: 2px; }
.info-text { font-size: 0.85rem; color: #666; line-height: 1.5; }
.info-text strong { color: #f28b4c; font-weight: 700; } /* Matches IMC color from print */

/* Input Age */
.age-input { width: 100%; border: 1px solid #eee; border-radius: 12px; padding: 1.25rem; font-size: 1rem; font-family: 'Poppins', sans-serif; text-align: left; color: #1a1a1a; outline: none; transition: border-color 0.2s; margin-bottom: 1rem; }
.age-input:focus { border-color: #d64d7a; }

/* Vertical Cards (Step 20) */
.card-vertical { display: flex; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 1rem; margin-bottom: 1rem; cursor: pointer; transition: all 0.2s; text-decoration: none; color: #1a1a1a; width: 100%; max-width: 500px; }
.card-vertical:hover { border-color: #d64d7a; box-shadow: 0 4px 10px rgba(214, 77, 122, 0.1); }
.card-vertical.selected { border-color: #d64d7a; background: #fdf2f5; }
.card-vertical-img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; margin-right: 1.5rem; background: #f5f5f5; }
.card-vertical-content { flex: 1; text-align: left; }
.card-vertical-title { font-weight: 700; font-size: 1rem; margin-bottom: 0.25rem; }
.card-vertical-subtitle { font-size: 0.85rem; color: #666; line-height: 1.3; }


/* ---- landing (step1) styles ---- */

      h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,body{margin:0;padding:0}
      html,body{font-family:'Poppins',system-ui,-apple-system,sans-serif;background:#fafafa;color:#1a1a1a;min-height:100vh;-webkit-font-smoothing:antialiased}
      
      /* Header */
      .hdr{display:flex;align-items:center;justify-content:center;padding:.75rem 1rem;background:#fff;contain:layout style}
      .hdr-logo{font-family:'Anton',system-ui,sans-serif;color:#d64d7a;font-size:1.875rem;font-weight:400;letter-spacing:.05em}
      .hdr-badge{font-size:.75rem;background:#f5f5f5;padding:.125rem .5rem;border-radius:.25rem;color:#666;margin-left:.5rem}
      
      /* Main container */
      .main{display:flex;flex-direction:column;align-items:center;padding:1rem;position:relative;overflow:hidden;min-height:calc(100vh - 52px);contain:layout}
      
      /* Title */
      .title{text-align:center;margin-top:1rem;max-width:600px;contain:content}
      .title h1{font-size:1.7rem;font-weight:700;line-height:1.2}
      .title .hl{color:#d64d7a}
      .title .sub{color:#666;margin-top:.5rem;font-size:1rem}
      .title .badge{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:.75rem}
      
      /* Buttons - explicit sizing to prevent CLS */
      .btns{margin-top:1.5rem;display:flex;flex-direction:column;gap:.75rem;width:70%;max-width:300px;position:relative;z-index:10}
      .btn{background:#f5f5f5;border-radius:12px;padding:1rem 1.25rem;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;border:none;width:100%;text-align:left;transition:background .15s;min-height:56px}
      .btn:hover{background:#ebebeb}
      .btn svg{width:20px;height:20px;color:#999;flex-shrink:0}
      
      /* Image - explicit dimensions to prevent CLS */
      .hero-img{position:absolute;right:-120px;top:80px;width:380px;height:500px;pointer-events:none;z-index:0;-o-object-fit:contain;object-fit:contain;content-visibility:auto}
      @media(max-width:768px){.hero-img{right:-180px;width:420px;height:560px}}
      
      /* Footer */
      .ftr{padding:1rem;text-align:center;font-size:.75rem;color:#666;margin-top:auto;contain:content}
      .ftr a{text-decoration:underline}
      
      /* Hide skeleton when React mounts */
      #root:not(:empty)+.skeleton{display:none}
      #root:empty{display:none}
    
/* ---- button elements reused as funnel options ---- */
button.option-multi,
button.option-list-item,
button.card-item {
  font: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
button.card-item { text-align: center; }
a.btn { text-decoration: none; color: inherit; }
.toggle-container { cursor: pointer; }

/* ===== steps 18-29 ===== */
.split-options-container { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:2rem; width:100%; }
.split-options-list { display:flex; flex-direction:column; gap:1rem; flex:1; max-width:300px; }
.split-options-img { flex:1; display:flex; justify-content:center; }
.split-options-img img { width:100%; max-width:350px; object-fit:contain; }
img { content-visibility: auto; }
@media(max-width:768px){ .split-options-container { flex-direction:column-reverse; } }

.chart-anim-line { stroke-dasharray:1000; stroke-dashoffset:1000; animation: drawLine 1.5s cubic-bezier(0.4,0,0.2,1) forwards; }
.chart-anim-area { opacity:0; animation: fadeInChart 1s ease-out forwards; }
.chart-anim-point { opacity:0; animation: fadeInChart .5s ease-out forwards; }
@keyframes drawLine { to { stroke-dashoffset:0; } }
@keyframes fadeInChart { to { opacity:1; } }
.badge-voce { position:absolute; left:13.33%; top:28%; transform:translate(-50%,-50%); background:#fff; border:1px solid #ddd; border-radius:8px; padding:4px 14px; font-weight:600; font-size:.9rem; color:#1a1a1a; box-shadow:0 2px 4px rgba(0,0,0,.05); opacity:0; animation: fadeInChart .5s forwards; white-space:nowrap; }
.badge-green { position:absolute; left:78%; top:27.27%; transform:translate(-50%,-100%); margin-top:-8px; background:#22c55e; color:#fff; border-radius:8px; padding:6px 14px; font-weight:600; font-size:.9rem; opacity:0; animation: fadeInChart .5s 1s forwards; white-space:nowrap; }
.badge-red { position:absolute; left:78%; top:72.72%; transform:translate(-50%,-100%); margin-top:-8px; background:#ef4444; color:#fff; border-radius:8px; padding:6px 14px; font-weight:600; font-size:.9rem; opacity:0; animation: fadeInChart .5s 1s forwards; white-space:nowrap; }
@media(max-width:400px){ .badge-green,.badge-red{ font-size:.75rem; padding:4px 10px; } .badge-voce{ font-size:.8rem; } }

.loading-container { display:flex; flex-direction:column; align-items:center; width:100%; max-width:400px; margin:0 auto; text-align:center; }
.carousel-wrapper { width:100%; height:350px; overflow:hidden; border-radius:20px; margin-bottom:2rem; position:relative; box-shadow:0 10px 30px rgba(0,0,0,.1); }
.carousel-track { display:flex; width:300%; height:100%; transition: transform .5s ease-in-out; }
.carousel-slide { width:33.333%; height:100%; }
.carousel-slide img { width:100%; height:100%; object-fit:cover; }
.progress-bar-container { width:100%; height:8px; background:#eee; border-radius:4px; margin-bottom:1rem; overflow:hidden; }
.progress-bar-fill { height:100%; width:0%; background:#d64d7a; border-radius:4px; transition: width .1s linear; }
.loading-text { font-size:1.1rem; font-weight:600; color:#1a1a1a; min-height:2rem; }
.loading-percentage { font-size:2.5rem; font-weight:700; color:#d64d7a; margin-bottom:1rem; }

/* ---------- Etapa 30: VSL / oferta ---------- */
.custom-video-wrapper { position: relative; width: 100%; max-width: 400px; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); background: #000; aspect-ratio: 9/16; }
.video-player { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 12px; cursor: pointer; }
.video-player::-webkit-media-controls { display: none !important; }
.video-unmute { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.55); color: #fff; border: none; border-radius: 999px; padding: 10px 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer; z-index: 10; }
.custom-progress-bg { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: rgba(255,255,255,0.2); z-index: 10; }
.custom-progress-fill { height: 100%; width: 0%; background: #cc0000; transition: width 0.2s linear; }

.vsl-content { display: none; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; width: 100%; max-width: 500px; margin: 0 auto; text-align: center; }
.vsl-content.visible { display: block; opacity: 1; transform: translateY(0); }
.vsl-cta { width: 100%; font-size: 1rem; }
.vsl-note { font-size: 0.75rem; color: #999; margin-top: 0.5rem; }

.pulse-btn { animation: pulseBtn 2s infinite; }
@keyframes pulseBtn {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(214,77,122,0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(214,77,122,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(214,77,122,0); }
}

.benefits-list { text-align: left; margin: 2rem 0; padding: 0; list-style: none; }
.benefit-item { display: flex; align-items: flex-start; margin-bottom: 1rem; font-size: 0.9rem; color: #1a1a1a; line-height: 1.5; }
.benefit-icon { color: #22c55e; margin-right: 0.75rem; flex-shrink: 0; margin-top: 2px; display: flex; }

.mockup-img { width: 100%; max-width: 350px; margin: 0 auto 2rem; display: block; }

.price-box { background: #fff; border: 2px solid #d64d7a; border-radius: 16px; padding: 1.5rem; margin-bottom: 2rem; box-shadow: 0 10px 30px rgba(214,77,122,0.1); }
.price-discount { color: #d64d7a; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; margin-bottom: 0.5rem; }
.price-old { text-decoration: line-through; color: #999; font-size: 1.1rem; }
.price-new { font-size: 2.5rem; font-weight: 700; color: #1a1a1a; line-height: 1; margin: 0.5rem 0; }
.price-terms { color: #666; font-size: 0.8rem; font-weight: 600; }

.section-title { font-size: 1.3rem; font-weight: 700; color: #1a1a1a; margin: 3rem 0 1.5rem; }

.testimonial { text-align: left; margin-bottom: 2rem; }
.testimonial-img { width: 100%; border-radius: 12px; margin-bottom: 1rem; }
.testimonial-name { font-weight: 700; color: #d64d7a; font-size: 1rem; margin-bottom: 0.5rem; }
.testimonial-text { font-size: 0.9rem; color: #444; line-height: 1.6; font-style: italic; }

.faq-item {
  text-align: left;
  background: #fff;
  border: 1px solid #f3e3ea;
  border-radius: 16px;
  padding: 0;
  margin-bottom: 0.75rem;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(214, 77, 122, 0.05);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.faq-item.open { border-color: #f0c3d4; box-shadow: 0 6px 20px rgba(214, 77, 122, 0.12); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 700;
  color: #1a1a1a;
  font-size: 0.95rem;
  padding: 1.1rem 1.25rem;
  text-align: left;
  line-height: 1.4;
  touch-action: manipulation;
}
.faq-item.open .faq-q { color: #d64d7a; }
.faq-chevron {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fdeef3;
  color: #d64d7a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); background: #d64d7a; color: #fff; }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-a-inner {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.6;
  padding: 0 1.25rem 1.15rem;
}

.guarantee-box {
  background: #fff9fa;
  border: 1px solid #fce8e6;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  margin: 3rem 0;
  text-align: center;
  box-shadow: 0 8px 24px rgba(214, 77, 122, 0.08);
}
.guarantee-img { width: 92px; display: block; margin: 0 auto 1.1rem; }
.guarantee-title { font-weight: 800; font-size: 1.15rem; color: #1a1a1a; margin-bottom: 0.6rem; }

/* ===== Etapas 30-31: projeção e perfil ===== */
.weight-badge {
  background: #e8f0fe;
  color: #1a5fd7;
  padding: 0.15rem 0.6rem;
  border-radius: 6px;
  font-weight: 800;
}
.projection-chart {
  max-width: 420px;
  margin: 0 auto;
}
.profile-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  text-align: left;
}
.profile-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
}
.imc-scale { position: relative; }
.imc-marker {
  position: absolute;
  top: -2rem;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  white-space: nowrap;
}
.imc-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
  border-bottom: none;
}
.imc-ticks {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
}
.imc-bar {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(to right, #4a90e2, #3fbf6f 25%, #f5c243 50%, #e05252);
}
.imc-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #333;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.imc-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.62rem;
  color: #999;
  font-weight: 600;
}
.imc-labels span.active { color: #333; font-weight: 800; }
.alert-box {
  background: #fdeef1;
  border: 1px solid #f5c6d0;
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  text-align: left;
}
.alert-title { color: #d64d7a; font-weight: 800; margin-bottom: 0.5rem; }
.alert-text { color: #b0405e; font-size: 0.88rem; line-height: 1.55; }
.profile-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.profile-row:first-child { padding-top: 0; }
.profile-row:last-child { padding-bottom: 0; }
.profile-icon { font-size: 1.2rem; color: #888; }
.profile-label { font-size: 0.78rem; color: #999; }
.profile-value { font-size: 1rem; font-weight: 700; color: #222; }

/* Resposta imediata ao toque/clique */
* { -webkit-tap-highlight-color: transparent; }
a, button, .option-btn, .option-multi, .card-vertical, .btn, .btn-pink {
  touch-action: manipulation;
  transition-duration: 90ms !important;
}
img { content-visibility: auto; }