/* LP do espaguete de piscina com capa (lp.floty.com/espaguete-de-piscina/) — 28/10/2026.
   Gerado por ~/floty-lps/lps-produto/espaguete/gerar_espaguete.py. Vem depois do /style.css, /compra.css e /comprar/hidro.css. */

/* ---------- três motivos ---------- */
.ep-motivos { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.ep-motivos li { background: #fff; border: 1px solid var(--cp-linha); border-radius: 18px; padding: clamp(1.1rem, .9rem + 1vw, 1.6rem); display: grid; gap: .45rem; align-content: start; }
.ep-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cp-amarelo); color: #1C1C1C; font: 800 1.25rem/1 var(--f-display); }
.ep-motivos h3 { font: 700 clamp(1.3rem, 1.1rem + .7vw, 1.65rem)/1.15 var(--f-display); margin: .2rem 0 0; color: var(--cp-abismo); }
.ep-motivos p { margin: 0; font-size: 1rem; color: #2A3C47; }

/* ---------- sem capa × com capa ---------- */
.ep-comparar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); border-radius: 18px; overflow: hidden; border: 1px solid var(--cp-linha); }
.ep-lado { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: clamp(1.2rem, 1rem + 1.4vw, 2rem); }
.ep-lado svg { width: 112px; height: 112px; }
.ep-lado h3 { font: 700 clamp(1.2rem, 1.05rem + .6vw, 1.5rem)/1.2 var(--f-display); margin: .55rem 0 .45rem; }
.ep-lado p { margin: 0; }
.ep-sem { background: var(--cp-fundo); color: #2A3C47; }
.ep-sem .hx-rot { background: #fff; color: #5C6B74; border: 1px solid var(--cp-linha); }
.ep-sem h3 { color: #3B4A53; }
.ep-com { color: #fff; background: linear-gradient(180deg, var(--cp-azul) 0%, var(--cp-abismo) 100%); border-left: 4px solid var(--cp-aqua); }
.ep-com .hx-rot { background: var(--cp-amarelo); color: #1C1C1C; }
.ep-com li { color: rgba(255,255,255,.92); }
.ep-com b { color: #fff; }

/* ---------- quantos para a turma ---------- */
.ep-calc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(1.2rem, 3vw, 2.4rem); background: #fff; border: 1px solid var(--cp-linha); border-radius: 18px; padding: clamp(1.2rem, 1rem + 1.4vw, 2.2rem); }
.ep-calc-campos { display: grid; gap: .6rem; align-content: start; }
.ep-calc-campos > label:first-child { font: 800 .8rem/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ep-calc-campos input[type=number] { width: 100%; max-width: 220px; font: 700 2rem/1 var(--f-display); padding: .7rem .9rem; border: 2px solid var(--cp-linha); border-radius: 12px; min-height: 60px; color: var(--cp-abismo); }
.ep-calc-campos input[type=number]:focus-visible { outline: 3px solid var(--cp-amarelo); outline-offset: 2px; border-color: var(--cp-azul); }
.ep-check { display: flex; gap: .6rem; align-items: center; font-weight: 700; min-height: 44px; cursor: pointer; }
.ep-check input { width: 22px; height: 22px; accent-color: var(--cp-azul); }
.ep-nota { margin: .3rem 0 0; font-size: .92rem; color: var(--muted); }
.ep-calc-res { display: grid; gap: .8rem; align-content: start; min-width: 0; }
.ep-res-n { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.ep-res-n b { font: 800 clamp(2.2rem, 1.8rem + 1.6vw, 3rem)/1 var(--f-display); color: var(--cp-azul); }
.ep-res-n span { font: 700 1.1rem/1.3 var(--f-ui); color: var(--cp-abismo); }
.ep-res-preco { margin: 0; color: #2A3C47; }
.ep-res-preco b { font: 700 1.15rem/1.2 var(--f-display); color: var(--cp-abismo); }
.ep-acoes { display: flex; flex-wrap: wrap; gap: .7rem; }
.ep-guarda-t { font: 700 1.1rem/1.2 var(--f-display); margin: .6rem 0 0; }
.ep-guarda { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--cp-linha); border-radius: 14px; overflow: hidden; }
.ep-guarda li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .65rem .9rem; border-top: 1px solid var(--cp-linha); }
.ep-guarda li:first-child { border-top: 0; background: #EEF6F9; }
.ep-guarda b { font: 800 1.05rem/1 var(--f-display); color: var(--cp-azul); }
.ep-guarda small { display: block; color: var(--muted); font-size: .85rem; }
.ep-guarda a { font-weight: 800; color: var(--cp-azul); white-space: nowrap; }

/* ---------- capa personalizada ---------- */
.ep-perso .cp-corpo { display: grid; gap: .55rem; align-content: start; padding: clamp(1.1rem, 1rem + 1vw, 1.6rem); }
.ep-perso .hx-rot { justify-self: start; background: var(--cp-amarelo); color: #1C1C1C; }
.ep-perso h3 { font: 700 1.35rem/1.2 var(--f-display); margin: .2rem 0 0; }
.ep-perso .btn { justify-self: start; }

@media (max-width: 900px) {
  .ep-motivos { grid-template-columns: minmax(0, 1fr); }
  .ep-comparar, .ep-calc { grid-template-columns: minmax(0, 1fr); }
  .ep-com { border-left: 0; border-top: 4px solid var(--cp-aqua); }
}
@media (max-width: 480px) {
  .ep-lado { grid-template-columns: minmax(0, 1fr); }
  .ep-lado svg { width: 88px; height: 88px; }
  .ep-guarda li { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .ep-guarda a { grid-column: 2; }
}
[hidden] { display: none !important; }

/* ---------- exercícios (28/10) ---------- */
.ep-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .9rem; }
.ep-chip { min-height: 44px; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--cp-linha); background: #fff; color: var(--cp-abismo); font: 700 .95rem/1.2 var(--f-display); cursor: pointer; }
.ep-chip[aria-pressed="true"] { background: var(--cp-azul); border-color: var(--cp-azul); color: #fff; }
.ep-chip:focus-visible { outline: 3px solid var(--cp-amarelo); outline-offset: 2px; }
.ep-ex-cont { margin: 0 0 1rem; color: #2A3C47; }
.ep-exs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ep-ex { background: #fff; border: 1px solid var(--cp-linha); border-radius: 16px; padding: 1.1rem 1.2rem; display: grid; gap: .4rem; align-content: start; }
.ep-ex[hidden] { display: none; }
.ep-ex h3 { font: 700 1.2rem/1.2 var(--f-display); margin: 0; color: var(--cp-abismo); }
.ep-ex p { margin: 0; font-size: 1rem; color: #2A3C47; }
.ep-ex-pos { justify-self: start; font: 700 .78rem/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; padding: .35rem .55rem; border-radius: 6px; background: var(--cp-fundo); color: var(--cp-azul); }
.ep-ex-musc { font-size: .95rem !important; }
.ep-ex-meta { font-size: .85rem !important; color: #5C6B74 !important; }
.ep-ex-meta span + span::before { content: " · "; }
.ep-ex-aviso { margin: 1.2rem 0 0; padding: .9rem 1.1rem; border-left: 4px solid var(--cp-amarelo); background: #fff; border-radius: 0 12px 12px 0; color: #2A3C47; }
@media (max-width: 980px) { .ep-exs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ep-exs { grid-template-columns: minmax(0, 1fr); } }