/* Flutuador infantil: boia de braço, boia de tubarão ou boia circular (lp.floty.com/flutuador-infantil/) — 28/10/2026.
   Gerado por ~/floty-lps/lps-produto/flutuador-infantil/gerar_flutuador.py. Vem depois do /style.css e do /compra.css
   (tokens --cp-* do .cp). Assinatura: «a raia da aula», as 4 fases separadas por uma corda de raia (boias amarelas e azuis). */
[hidden] { display: none !important; }

/* medidas mínimas da skill frontend-design: botão principal >= 48 px, preço >= 28 px no computador e >= 22 no celular */
.cp .btn { min-height: 48px; }
.cp .cp-barra .btn { min-height: 44px; }
.cp-preco-1 b { font-size: clamp(1.65rem, 1.45rem + .55vw, 1.8rem); }

/* ---------- herói ---------- */
.cp .lp-hero h1 { max-width: 19ch; }
.fi-hero-seg { display: inline-flex; align-items: center; gap: .55rem; margin: 1.1rem 0 0; padding: .55rem .9rem; border-radius: 12px;
  background: rgba(245,180,30,.14); border: 1px solid rgba(245,180,30,.55); color: #fff; font: 700 .95rem/1.35 var(--f-ui); }
.fi-hero-seg svg { width: 20px; height: 20px; flex: none; fill: var(--cp-amarelo); }

/* ---------- indicador: perguntas ---------- */
.fi-ind { display: grid; gap: 1.5rem; }
.fi-perg { margin: 0; padding: 0; border: 0; min-width: 0; }
.fi-perg legend { display: flex; align-items: center; gap: .6rem; padding: 0; margin: 0 0 .75rem; font: 700 1.15rem/1.25 var(--f-display); color: var(--cp-abismo); }
.fi-perg legend b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cp-abismo); color: #fff; font: 800 .95rem/1 var(--f-display); flex: none; }
.fi-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.fi-chip { min-height: 48px; padding: .6rem 1.15rem; border-radius: 999px; border: 1.5px solid var(--cp-linha); background: #fff; color: var(--cp-abismo);
  font: 700 1rem/1.15 var(--f-display); cursor: pointer; }
.fi-chip:hover { border-color: var(--cp-azul); }
.fi-chip[aria-pressed="true"] { background: var(--cp-abismo); border-color: var(--cp-abismo); color: #fff; }

/* ---------- a raia da aula: 4 fases, separadas pela corda de raia ---------- */
.fi-raia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff;
  border: 1px solid var(--cp-linha); border-radius: 22px; overflow: hidden; }
.fi-raia li { position: relative; min-width: 0; display: flex; }
.fi-raia li + li::before { content: ""; position: absolute; z-index: 2; left: -6px; top: 14px; bottom: 14px; width: 12px; pointer-events: none;
  background:
    radial-gradient(circle at 6px 6px, var(--cp-amarelo) 5px, transparent 5.6px) 0 0 / 12px 24px repeat-y,
    radial-gradient(circle at 6px 6px, var(--cp-azul) 5px, transparent 5.6px) 0 12px / 12px 24px repeat-y; }
.fi-passo { flex: 1; display: grid; grid-template-rows: auto 1fr; gap: .7rem; align-content: start; text-align: left; min-width: 0;
  padding: 1rem 1.15rem 1.25rem; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
  transition: background-color .2s, box-shadow .2s; }
.fi-passo-foto { position: relative; height: 112px; border-radius: 14px; background: var(--cp-fundo); display: grid; place-items: center; overflow: hidden; }
.fi-passo-foto img { width: 88%; height: 92px; object-fit: contain; mix-blend-mode: multiply; }
.fi-passo-n { position: absolute; left: .55rem; top: .55rem; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cp-amarelo); color: #1C1C1C; font: 800 .95rem/1 var(--f-display); }
.fi-passo-txt { display: grid; gap: .25rem; align-content: start; min-width: 0; }
.fi-passo-txt b { font: 700 1.15rem/1.2 var(--f-display); color: var(--cp-abismo); }
.fi-passo-txt span { font-size: .97rem; line-height: 1.4; color: #2A3C47; }
.fi-passo-txt small { margin-top: .3rem; font: 800 .8rem/1.25 var(--f-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--cp-azul); }
.fi-passo:hover { background: #F6FAFC; }
.fi-passo[aria-pressed="true"] { background: linear-gradient(180deg, #E6F6F9 0%, #F7FCFD 100%); box-shadow: inset 0 -6px 0 var(--cp-azul); }
.fi-passo[aria-pressed="true"] .fi-passo-n { background: var(--cp-azul); color: #fff; }
.fi-chip:focus-visible, .fi-passo:focus-visible, .fi-q-ctl button:focus-visible, .fi-copiar:focus-visible { outline: 3px solid var(--cp-amarelo); outline-offset: -3px; }

/* ---------- resultado ---------- */
.fi-res { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); background: #fff; border: 1px solid var(--cp-linha); border-radius: 22px;
  overflow: hidden; box-shadow: 0 24px 50px -36px rgba(7,42,61,.55); scroll-margin-top: 90px; }
.fi-res.sem-prod { grid-template-columns: minmax(0, 1fr); }
.fi-res-prod { display: grid; gap: .7rem; align-content: start; padding: clamp(1.1rem, 2.4vw, 1.8rem); background: var(--cp-fundo); min-width: 0; }
.fi-res-foto { position: relative; aspect-ratio: 4 / 3; background: #fff; border-radius: 16px; overflow: hidden; }
.fi-res-foto img { position: absolute; inset: .9rem; width: calc(100% - 1.8rem); height: calc(100% - 1.8rem); object-fit: contain; }
.fi-res-rot { font: 800 .78rem/1.2 var(--f-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--cp-azul); }
.fi-res-nome { margin: 0; font: 700 1.2rem/1.2 var(--f-display); color: var(--cp-abismo); }
.fi-res-med { margin: 0; font-size: .95rem; color: #4A5B66; }
.fi-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin: .2rem 0 0; }
.fi-preco b { font: 800 clamp(1.45rem, 1.1rem + 1.2vw, 2rem)/1 var(--f-display); color: var(--cp-abismo); font-variant-numeric: tabular-nums; }
.fi-preco span { font-weight: 700; color: var(--muted); font-size: .92rem; }
.fi-preco .fi-esg { color: #9B2C2C; }
.fi-res-txt { display: grid; gap: .85rem; align-content: start; padding: clamp(1.1rem, 2.4vw, 1.9rem); min-width: 0; }
.fi-res-eyebrow { font: 800 .8rem/1.25 var(--f-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.fi-res-txt h3 { margin: 0; font: 700 clamp(1.5rem, 1.15rem + 1.2vw, 2.15rem)/1.1 var(--f-display); color: var(--cp-abismo); letter-spacing: -.01em; }
.fi-porque { margin: 0; font-size: 1.05rem; line-height: 1.55; color: #22333D; }
.fi-porque small { display: block; margin-top: .3rem; font-size: .82rem; color: var(--muted); }
.fi-seg { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .6rem; align-items: start; margin: 0; padding: .7rem .9rem;
  background: var(--cp-amarelo-claro); border-left: 4px solid var(--cp-amarelo); border-radius: 0 12px 12px 0; font-weight: 700; color: #2A2410; }
.fi-seg svg { width: 22px; height: 22px; fill: #B7820A; margin-top: .05rem; }
.fi-quem { display: grid; gap: .55rem; padding-top: .9rem; border-top: 1px dashed var(--cp-linha); }
.fi-quem > span { font: 800 .78rem/1.2 var(--f-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.fi-qtd { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.fi-qtd label { font-weight: 800; color: var(--cp-abismo); }
.fi-q-ctl { display: inline-grid; grid-template-columns: 48px 4.4rem 48px; border: 2px solid var(--cp-linha); border-radius: 14px; overflow: hidden; background: #fff; }
.fi-q-ctl button { min-height: 50px; border: 0; background: var(--cp-fundo); font: 800 1.4rem/1 var(--f-display); color: var(--cp-azul); cursor: pointer; }
.fi-q-ctl input { width: 100%; border: 0; text-align: center; font: 800 1.5rem/1 var(--f-display); color: var(--cp-abismo); -moz-appearance: textfield; }
.fi-q-ctl input::-webkit-outer-spin-button, .fi-q-ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fi-total { margin: 0; font-weight: 700; color: #2A3C47; }
.fi-total b { font: 800 1.25rem/1 var(--f-display); color: var(--cp-abismo); }
.fi-acoes { display: flex; flex-wrap: wrap; gap: .6rem; }
.fi-acoes .btn { flex: 1 1 auto; justify-content: center; }
.fi-acoes .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.fi-alt, .fi-ativ, .fi-nota { margin: 0; font-size: .97rem; color: #2A3C47; }
.fi-alt a, .fi-ativ a { font-weight: 800; color: var(--cp-azul); }
.fi-ativ { padding: .7rem .9rem; border-radius: 12px; background: var(--cp-fundo); }
.fi-ativ b { color: var(--cp-abismo); }
.fi-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.fi-copiar { min-height: 44px; padding: .5rem .9rem; border-radius: 12px; border: 1.5px dashed var(--cp-azul); background: #fff; color: var(--cp-azul);
  font: 800 .92rem/1.2 var(--f-display); cursor: pointer; }
.fi-msg { margin: 0; font-weight: 700; color: #116B3A; font-size: .92rem; min-height: 1.2em; }
.fi-nota { font-size: .88rem; color: var(--muted); }
.cp-card.fi-destaque, .cp-linha.fi-destaque { box-shadow: 0 0 0 4px var(--cp-amarelo); border-radius: 16px; transition: box-shadow .3s; }

/* ---------- segurança (faixa escura) ---------- */
.fi-seg-sec { color: #fff; background: radial-gradient(1000px 560px at 88% 0%, #0E6E98 0%, #0A4E70 42%, #072A3D 100%); }
.fi-seg-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); gap: clamp(1.5rem, 4.5vw, 3.6rem); align-items: center; }
.fi-seg-foto { margin: 0; display: grid; gap: .6rem; }
.fi-seg-foto img { display: block; width: 100%; height: auto; border-radius: 18px; background: #fff; box-shadow: 0 40px 70px -40px rgba(0,0,0,.8); }
.fi-seg-foto figcaption { font-size: .85rem; color: rgba(255,255,255,.75); }
.fi-seg-sec .section-head .eyebrow { color: var(--cp-aqua); }
.fi-seg-sec .section-head h2 { color: #fff; }
.fi-seg-sec .section-head h2 em { color: var(--cp-amarelo); font-style: normal; }
.fi-seg-sec .section-head p { color: rgba(255,255,255,.85); }
.fi-regras { list-style: none; margin: 0; padding: 0; display: grid; gap: .95rem; }
.fi-regras li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: .85rem; align-items: start; }
.fi-regras li::before { content: ""; width: 14px; height: 14px; margin-top: .3rem; border-radius: 50%; background: var(--cp-amarelo); box-shadow: 0 0 0 4px rgba(245,180,30,.22); }
.fi-regras b { display: block; font: 700 1.12rem/1.3 var(--f-display); color: #fff; margin-bottom: .2rem; }
.fi-regras p { margin: 0; color: rgba(255,255,255,.86); font-size: 1rem; line-height: 1.55; }
.fi-seg-fonte { margin: 1.2rem 0 0; font-size: .82rem; color: rgba(255,255,255,.62); }

/* ---------- tabela comparativa ---------- */
.fi-tab-wrap { border: 1px solid var(--cp-linha); border-radius: 18px; overflow: hidden; background: #fff; }
.fi-tab { width: 100%; border-collapse: collapse; }
.fi-tab th, .fi-tab td { padding: .9rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cp-linha); font-size: .96rem; line-height: 1.45; }
.fi-tab thead th { font: 800 .76rem/1.2 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--cp-fundo); }
.fi-tab tbody tr:last-child th, .fi-tab tbody tr:last-child td { border-bottom: 0; }
.fi-tab tbody th { min-width: 210px; }
.fi-tab-nome { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: .75rem; align-items: center; }
.fi-tab-nome img { width: 72px; height: 54px; object-fit: contain; mix-blend-mode: multiply; background: var(--cp-fundo); border-radius: 10px; padding: 4px; }
.fi-tab-nome b { font: 700 1.05rem/1.25 var(--f-display); color: var(--cp-abismo); }
.fi-fase { display: inline-block; font: 800 .8rem/1.25 var(--f-ui); color: var(--cp-abismo); background: #E6F6F9; border: 1px solid #BFE6EE; padding: .3rem .55rem; border-radius: 8px; }
.fi-tab-preco b { display: block; font: 800 1.75rem/1 var(--f-display); color: var(--cp-abismo); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fi-tab-preco small { display: block; margin-top: .3rem; font-size: .82rem; color: var(--muted); }
.fi-tab-preco small span { white-space: nowrap; }
.fi-tab-nota { margin: 1rem 0 0; font-size: .92rem; color: #2A3C47; max-width: 90ch; }

/* ---------- na aula (atividades) ---------- */
.fi-ativs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.fi-ativs li { display: grid; gap: .55rem; align-content: start; background: #fff; border: 1px solid var(--cp-linha); border-top: 6px solid var(--cp-amarelo);
  border-radius: 16px; padding: 1.05rem 1.15rem 1.2rem; min-width: 0; }
.fi-ativ-boia { font: 800 .78rem/1.2 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cp-azul); }
.fi-ativs h3 { margin: 0; font: 700 1.25rem/1.2 var(--f-display); color: var(--cp-abismo); }
.fi-ativs p { margin: 0; font-size: .98rem; line-height: 1.5; color: #2A3C47; }
.fi-ativs .fi-ativ-seg { font-size: .93rem; padding: .5rem .65rem; background: #FFF8E6; border-radius: 10px; }
.fi-ativs a { font-weight: 800; color: var(--cp-azul); }

/* ---------- dados técnicos ---------- */
.fi-dados { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.fi-dados li { background: #fff; border: 1px solid var(--cp-linha); border-top: 4px solid var(--cp-azul); border-radius: 0 0 14px 14px; padding: 1.1rem 1.2rem; }
.fi-dados b { display: block; font: 700 1.6rem/1.1 var(--f-display); color: var(--cp-azul); margin-bottom: .35rem; }
.fi-dados p { margin: 0 0 .5rem; font-size: .98rem; color: #2A3C47; }
.fi-dados small { display: block; font-size: .8rem; color: var(--muted); }
.fi-dados small a { color: var(--cp-azul); }
.fi-cuidados { margin: 1.4rem 0 0; padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--cp-linha); border-radius: 14px; max-width: 90ch; }
.fi-cuidados b { color: var(--cp-abismo); }
.fi-links { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 1.4rem; }
.fi-links a { font-weight: 800; color: var(--cp-azul); }

/* ---------- produtos ---------- */
.fi-linha-titulo { margin: 1.8rem 0 .6rem; font: 700 1.15rem/1.2 var(--f-display); color: var(--cp-abismo); }
.fi-linhas { background: #fff; border: 1px solid var(--cp-linha); border-radius: 16px; padding: .3rem 1.2rem; }
.fi-linhas .cp-linha:first-child { border-top: 0; }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .fi-ativs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .fi-res, .fi-seg-grid { grid-template-columns: minmax(0, 1fr); }
  /* quadro do produto compacto (foto ao lado do nome e do preço): o motivo e o aviso de segurança sobem para a primeira tela */
  .fi-res-prod { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: 1fr auto auto auto auto 1fr; column-gap: 1rem; row-gap: .3rem; }
  .fi-res-foto { grid-column: 1; grid-row: 1 / -1; align-self: center; }
  .fi-res-foto img { inset: .45rem; width: calc(100% - .9rem); height: calc(100% - .9rem); }
  .fi-res-prod > :not(.fi-res-foto) { grid-column: 2; }
  .fi-res-rot { grid-row: 2; } .fi-res-nome { grid-row: 3; } .fi-res-med { grid-row: 4; } .fi-preco { grid-row: 5; }
  .fi-res-nome { font-size: 1.05rem; }
  .fi-res-med { font-size: .88rem; }
  /* segurança: o texto vem antes da foto */
  .fi-seg-foto { order: 2; max-width: 380px; }
  .fi-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* tabela vira um cartão por boia */
  .fi-tab-wrap { border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .fi-tab, .fi-tab tbody, .fi-tab tr, .fi-tab th, .fi-tab td { display: block; width: 100%; }
  .fi-tab thead { display: none; }
  .fi-tab tbody { display: grid; gap: 1rem; }
  .fi-tab tr { background: #fff; border: 1px solid var(--cp-linha); border-radius: 16px; overflow: hidden; }
  .fi-tab tbody th { min-width: 0; background: var(--cp-fundo); border-bottom: 1px solid var(--cp-linha); }
  .fi-tab td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .8rem; padding: .6rem .95rem; border-bottom: 1px solid var(--cp-linha); }
  .fi-tab tbody th { padding: .7rem .95rem; }
  .fi-tab tbody tr td:last-child { border-bottom: 0; }
  .fi-tab td::before { content: attr(data-rot); font: 800 .74rem/1.3 var(--f-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding-top: .15rem; }
  .fi-tab-preco b { font-size: 1.5rem; }
}
@media (max-width: 760px) {
  /* a raia fica de pé: as fases uma embaixo da outra, a corda de raia na horizontal */
  .fi-raia { grid-template-columns: minmax(0, 1fr); }
  .fi-raia li + li::before { left: 14px; right: 14px; top: -6px; bottom: auto; width: auto; height: 12px;
    background:
      radial-gradient(circle at 6px 6px, var(--cp-amarelo) 5px, transparent 5.6px) 0 0 / 24px 12px repeat-x,
      radial-gradient(circle at 6px 6px, var(--cp-azul) 5px, transparent 5.6px) 12px 0 / 24px 12px repeat-x; }
  .fi-passo { grid-template-rows: none; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: .9rem; padding: .95rem 1rem; }
  .fi-passo-foto { height: 84px; }
  .fi-passo-foto img { height: 68px; }
  .fi-passo-n { width: 26px; height: 26px; font-size: .85rem; left: .35rem; top: .35rem; }
  .fi-passo[aria-pressed="true"] { box-shadow: inset 6px 0 0 var(--cp-azul); }
  .fi-ativs, .fi-dados { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .fi-tab td { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .fi-acoes .btn { width: 100%; }
  .fi-preco b { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .fi-passo, .cp-card.fi-destaque { transition: none; } }