/* LP de nado preso e paraquedas (lp.floty.com/nado-preso/) — 28/10/2026.
   Gerado por ~/floty-lps/lps-produto/nado-preso/gerar_nado_preso.py. Vem depois do /style.css, /compra.css e /comprar/hidro.css.
   Assinatura: a «planta» da piscina vista de cima (retas e azulejo), com o elástico na cor real da carga. Prefixo np-. */

:root { --np-c1: #F2C230; --np-c2: #2EAD4B; --np-c3: #D93A2E; }

/* ---------- escolhedor ---------- */
.np-escolher { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
.np-pergs { display: grid; gap: .9rem; counter-reset: np-q; }
.np-perg { margin: 0; padding: .9rem 1.1rem 1.05rem; border: 1px solid var(--cp-linha); border-radius: 16px; background: #fff; min-width: 0; }
.np-perg:not([hidden]) { counter-increment: np-q; }
.np-perg legend { display: flex; align-items: center; gap: .6rem; padding: 0 .35rem; font: 700 1.08rem/1.2 var(--f-display); color: var(--cp-abismo); }
.np-perg legend b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cp-amarelo); color: #1C1C1C; font: 800 .95rem/1 var(--f-display); flex: none; }
.np-perg legend b::before { content: counter(np-q); }
.np-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
.np-chips .cp-chip { min-height: 44px; font-size: .98rem; }
.np-dica { margin: .5rem 0 0; font-size: .92rem; color: var(--muted); }

.np-res { position: relative; display: grid; gap: .85rem; align-content: start; min-width: 0; padding: clamp(1.1rem, .9rem + 1.2vw, 1.8rem);
  border-radius: 20px; background: #fff; border: 2px solid var(--cp-azul); box-shadow: 0 18px 40px -26px rgba(7, 42, 61, .45); scroll-margin-top: 96px; }
.np-res::before { content: "O seu treino"; position: absolute; top: -.8rem; left: 1.2rem; font: 800 .74rem/1 var(--f-ui); letter-spacing: .09em; text-transform: uppercase;
  background: var(--cp-azul); color: #fff; padding: .45rem .7rem; border-radius: 999px; }
.np-res-planta { border-radius: 14px; overflow: hidden; background: #F1F5F7; }
.np-res-planta .np-svg { max-height: 230px; }
.np-res-cab .hx-rot { background: var(--cp-amarelo-claro); color: #5A4300; }
.np-res h3 { font: 700 clamp(1.35rem, 1.15rem + .8vw, 1.8rem)/1.15 var(--f-display); margin: .5rem 0 0; color: var(--cp-abismo); }
.np-carga { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.np-carga small { flex-basis: 100%; font-size: .9rem; color: #2A3C47; font-weight: 700; }
.np-c { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; padding: .35rem .75rem; border-radius: 999px; border: 1.5px solid var(--cp-linha);
  font: 700 .88rem/1 var(--f-ui); color: #5C6B74; background: #fff; }
.np-c1::before, .np-c2::before, .np-c3::before { content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.np-c1::before { background: var(--np-c1); } .np-c2::before { background: var(--np-c2); } .np-c3::before { background: var(--np-c3); }
.np-c.on { color: var(--cp-abismo); border-color: var(--cp-abismo); box-shadow: inset 0 0 0 1px var(--cp-abismo); }
.np-c1.on { background: #FFF6D9; } .np-c2.on { background: #E5F6E9; } .np-c3.on { background: #FCE7E5; }
.np-c-tam.on, .np-c-prog.on { background: #E6F3F8; }
.np-preco { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; }
.np-preco b { font: 800 clamp(1.5rem, 1.3rem + .9vw, 1.9rem)/1 var(--f-display); color: var(--cp-azul); font-variant-numeric: tabular-nums; }
.np-preco span { font-size: .92rem; color: var(--muted); }
.np-preco .np-cons { font-weight: 700; color: var(--cp-azul-2); }
.np-porque { margin: 0; }
.np-porque small { display: inline-block; font: 700 .74rem/1.2 var(--f-ui); color: var(--muted); background: var(--cp-fundo); border-radius: 6px; padding: .15rem .4rem; margin-left: .15rem; }
.np-serie-box { background: var(--cp-fundo); border-radius: 14px; padding: .9rem 1rem; border-left: 4px solid var(--cp-aqua); }
.np-serie-t { margin: 0 0 .3rem; font: 800 .8rem/1.2 var(--f-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--cp-azul); }
.np-serie { margin: 0 0 .35rem; color: #1F2F38; font-size: 1rem; }
.np-serie-box small { display: block; color: var(--muted); font-size: .84rem; }
.np-aviso { margin: 0; font-size: .95rem; color: #2A3C47; }
.np-aviso b { color: #8A5A00; }
.np-aviso a, .np-alt a { font-weight: 800; color: var(--cp-azul); }
.np-qtd { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.np-qtd label { font: 800 .8rem/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.np-qtd input { width: 7.5rem; font: 700 1.6rem/1 var(--f-display); padding: .5rem .7rem; min-height: 52px; border: 2px solid var(--cp-linha); border-radius: 12px; color: var(--cp-abismo); }
.np-qtd input:focus-visible { outline: 3px solid var(--cp-amarelo); outline-offset: 2px; border-color: var(--cp-azul); }
.np-acoes { display: flex; flex-wrap: wrap; gap: .7rem; }
.np-acoes .btn { min-height: 48px; }
.np-alt { margin: 0; padding-top: .7rem; border-top: 1px dashed var(--cp-linha); font-size: .95rem; color: #2A3C47; }
.cp-card.np-destaque { border-color: var(--cp-amarelo); box-shadow: 0 0 0 4px rgba(245, 180, 30, .45); }

/* ---------- a planta (SVG, vista de cima) ---------- */
.np-svg { display: block; width: 100%; height: auto; }
.np-deck { fill: #F1F5F7; }
.np-agua { fill: #D9EEF4; stroke: #A3D2DF; stroke-width: 2; }
.np-azulejo line { stroke: #C3E3EC; stroke-width: 1; }
.np-nad rect, .np-nad circle { fill: var(--cp-azul); }
.np-nad line { stroke: var(--cp-azul); stroke-width: 6; stroke-linecap: round; }
.np-cinto { fill: #1C1C1C; }
.np-ponto { fill: #fff; stroke: var(--cp-amarelo); stroke-width: 4; }
.np-el { stroke: var(--el, var(--np-c1)); stroke-width: 4; stroke-linecap: round; }
.np-fita { stroke: #1C1C1C; stroke-width: 5; stroke-linecap: round; }
.np-fixo { fill: #7D8D96; }
.np-seta { fill: none; stroke: #2BA9C6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.np-raia .a { fill: var(--cp-amarelo); } .np-raia .b { fill: var(--cp-azul); }
.np-cordao { stroke: #1C1C1C; stroke-width: 2; }
.np-chute { fill: #E5483A; }
.np-boia { fill: var(--cp-amarelo); stroke: #B8860B; stroke-width: 1; }
.np-chao { stroke: #9AA8B0; stroke-width: 3; stroke-linecap: round; }
.np-pess line { stroke: var(--cp-azul); stroke-width: 12; stroke-linecap: round; }
.np-pess .np-perna { stroke-width: 8; } .np-pess .np-braco { stroke-width: 6; }
.np-pess circle { fill: var(--cp-azul); }
.np-num circle { fill: var(--cp-abismo); }
.np-num text { fill: #fff; font: 800 13px/1 var(--f-ui); text-anchor: middle; }
.np-planta-fig { margin: 0; display: grid; gap: .7rem; }
.np-planta-fig svg { border-radius: 14px; }
.np-leg { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.np-leg li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .55rem; align-items: start; font-size: .95rem; color: #2A3C47; }
.np-leg b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cp-abismo); color: #fff; font: 800 .8rem/1 var(--f-ui); }

/* ---------- como prender ---------- */
.np-prender { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.np-prender-card { background: #fff; border: 1px solid var(--cp-linha); border-radius: 18px; padding: clamp(1rem, .9rem + .8vw, 1.5rem); display: grid; gap: .8rem; align-content: start; min-width: 0; }
.np-prender-card h3 { font: 700 clamp(1.2rem, 1.05rem + .6vw, 1.5rem)/1.2 var(--f-display); margin: .2rem 0 0; color: var(--cp-abismo); }
.np-passos { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem; color: #2A3C47; }
.np-passos li::marker { font-weight: 800; color: var(--cp-azul); }
.np-passos a { color: var(--cp-azul); font-weight: 800; }
.np-seguro { margin-top: 1.4rem; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.np-checar, .np-supervisao { background: #fff; border-radius: 18px; padding: clamp(1.1rem, 1rem + .8vw, 1.6rem); border: 1px solid var(--cp-linha); }
.np-checar h3, .np-supervisao h3 { font: 700 1.35rem/1.2 var(--f-display); margin: 0 0 .5rem; color: var(--cp-abismo); }
.np-supervisao { background: var(--cp-amarelo-claro); border-left: 5px solid var(--cp-amarelo); }
.np-supervisao .hx-rot { background: var(--cp-amarelo); color: #1C1C1C; }
.np-supervisao h3 { margin-top: .6rem; }
.np-supervisao p { margin: 0 0 .6rem; color: #2A3C47; }

/* ---------- paraquedas (faixa escura) ---------- */
#paraquedas .section-head h2 { color: #fff; }
#paraquedas .section-head p { color: rgba(255, 255, 255, .88); }
.np-para { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.np-para-tam { margin: 0; background: #fff; border-radius: 18px; padding: 1.2rem 1.2rem 1rem; display: grid; gap: .8rem; }
.np-para-tam svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.np-tam { fill: #DDF1F6; stroke: var(--cp-azul); stroke-width: 2.5; }
.np-tam-m { fill: #CBEAF2; } .np-tam-g { fill: #B5E1EC; }
/* colunas na proporção dos quadrados do desenho (P 75, M 100, G 150 + folgas = 96/122/171 de 389): cada rótulo fica sob o seu */
.np-para-rot { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 440px; display: grid; grid-template-columns: 96fr 122fr 171fr; gap: 0; text-align: center; }
.np-para-rot li { min-width: 0; padding: 0 .15rem; }
.np-para-rot b { display: block; font: 800 clamp(1.3rem, 1.1rem + .8vw, 1.8rem)/1.1 var(--f-display); color: var(--cp-azul); }
.np-para-rot span { display: block; font-weight: 700; color: var(--cp-abismo); font-size: clamp(.8rem, .7rem + .5vw, .95rem); white-space: nowrap; }
.np-para-rot small { display: block; color: var(--muted); font-size: .84rem; }
.np-para-tam figcaption { font-size: .86rem; color: var(--muted); text-align: center; }
.np-para-txt { grid-row: span 2; color: rgba(255, 255, 255, .92); }
.np-para-txt h3 { font: 700 1.4rem/1.2 var(--f-display); margin: 0 0 .6rem; color: #fff; }
.np-para-txt .hx-lista li { color: rgba(255, 255, 255, .92); font-size: 1rem; }
.np-para-txt a { color: var(--cp-aqua); font-weight: 800; }
#np-d-para { background: #fff; border-radius: 18px; padding: 1rem; }

/* ---------- séries prontas ---------- */
.np-series { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.np-series-card { background: #fff; border: 1px solid var(--cp-linha); border-radius: 18px; padding: 1.1rem 1.15rem; display: grid; gap: .7rem; align-content: start; min-width: 0; }
.np-series-card h3 { font: 700 1.2rem/1.2 var(--f-display); margin: 0; color: var(--cp-abismo); }
.np-series-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.np-serie-n { border-left: 4px solid var(--np-c1); padding: .1rem 0 .1rem .8rem; }
.np-serie-n2 { border-left-color: var(--np-c2); } .np-serie-n3 { border-left-color: var(--np-c3); }
.np-serie-n b { display: block; font: 800 .78rem/1.2 var(--f-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--cp-azul); margin-bottom: .2rem; }
.np-serie-n p { margin: 0; font-size: .95rem; color: #2A3C47; }
.np-series-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; }
#series .actions { margin-top: 1.2rem; }
#series .section-head a { color: var(--cp-azul); font-weight: 800; }

@media (max-width: 1100px) { .np-series { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .np-escolher, .np-seguro, .np-para { grid-template-columns: minmax(0, 1fr); }
  .np-para-txt { grid-row: auto; }
}
@media (max-width: 760px) { .np-prender { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .np-series { grid-template-columns: minmax(0, 1fr); }
  .np-acoes .btn { flex: 1 1 100%; justify-content: center; }
  .np-pergs { gap: .75rem; }
  .np-perg { padding: .8rem .85rem .9rem; }
  .np-chips { gap: .4rem; }
  .np-chips .cp-chip { padding: .6rem .85rem; }
}
[hidden] { display: none !important; }