/* Seções extras das LPs de produto de 08/10/2026 (raia-de-piscina, material-natacao-infantil). Só classes novas:
   não altera /style.css nem /lp-produtos.css. Tokens de cor e tipo vêm do /style.css. */

.cmp-intro { margin-top: .9rem; max-width: 62ch; color: var(--muted); }

/* ---------- Comparativo das raias: discos em escala ---------- */
.cmp-fig { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; background: #F4F6F7; border: 1px solid var(--line); border-radius: 12px;
  padding: clamp(1rem, 3vw, 1.75rem) clamp(.75rem, 3vw, 2rem) clamp(.9rem, 2vw, 1.25rem); }
.cmp-fig__legenda { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem 1.5rem;
  font: 600 .875rem/1.35 var(--f-ui); color: #33434D; }
.cmp-fig__legenda li { display: flex; align-items: center; gap: .6rem; }
.cmp-fig__legenda li::before { content: ""; width: 30px; flex: none; border-top: 2px dashed var(--deep); }
.cmp-fig__legenda .l10::before { border-top-color: var(--pool); }
.cmp-fig__svg { display: block; width: 100%; height: auto; }
.cmp-fig__regua { stroke: var(--deep); stroke-width: 1.5; stroke-dasharray: 7 6; vector-effect: non-scaling-stroke; }
.cmp-fig__regua--10 { stroke: var(--pool); }
.cmp-fig__base { stroke: #9AA7AF; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cmp-fig__disco circle { fill: var(--pool); }
.cmp-fig__disco .cmp-fig__aro { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 2; }
.cmp-fig__disco .cmp-fig__cubo { fill: #F4F6F7; }
.cmp-fig__aleta { stroke: rgba(255, 255, 255, .72); stroke-width: 2.5; stroke-linecap: round; }
.cmp-fig__flut circle { fill: var(--float); }
.cmp-fig__flut .cmp-fig__furo { fill: #F4F6F7; }
.cmp-fig__nomes { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); text-align: center; }
.cmp-fig__nomes b { display: block; font: 700 1rem/1.2 var(--f-display); color: var(--ink); }
.cmp-fig__nomes span { display: block; margin-top: .15rem; font: 600 .875rem/1.3 var(--f-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.cmp-fig figcaption { margin-top: .9rem; font-size: .8125rem; color: var(--muted); }

/* ---------- Comparativo das raias: tabela ---------- */
.cmp-tab-wrap { margin-top: clamp(1.5rem, 3vw, 2rem); }
.cmp-tab { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--paper); }
.cmp-tab caption { caption-side: top; text-align: left; padding-bottom: .75rem; font: 700 .8125rem/1.3 var(--f-ui); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.cmp-tab th, .cmp-tab td { padding: .85rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp-tab thead th { font: 700 .75rem/1.2 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--ink); white-space: nowrap; }
.cmp-tab tbody th { font: 700 1.05rem/1.2 var(--f-display); color: var(--ink); }
.cmp-tab tbody th small { display: block; margin-top: .2rem; font: 600 .8125rem/1.3 var(--f-ui); color: var(--muted); }
.cmp-tab td { color: #1B2B35; font-variant-numeric: tabular-nums; }
.cmp-tab tbody tr { scroll-margin-top: 96px; }
.cmp-tab tbody tr:target { background: #FFF8E6; }             /* links da loja: /raia-de-piscina/#paris */
.cmp-tab tbody tr:target th { box-shadow: inset 3px 0 0 var(--float); }
.cmp-tab td.cmp-tab__acao { text-align: right; white-space: nowrap; }
.cmp-tab__acao a { font-weight: 700; color: var(--pool); text-decoration: none; }
.cmp-tab__acao a:hover, .cmp-tab__acao a:focus-visible { text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.cmp-nota { margin: 1.25rem 0 0; font-size: .875rem; color: var(--muted); max-width: 82ch; }
.cmp-nota a { color: var(--pool); }
.cmp-acoes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

@media (max-width: 760px) {
  .cmp-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .cmp-tab, .cmp-tab tbody, .cmp-tab tr, .cmp-tab th, .cmp-tab td { display: block; }
  .cmp-tab { background: transparent; }
  .cmp-tab caption { display: block; width: 100%; }
  .cmp-tab tbody tr { border: 1px solid var(--line); border-radius: 10px; padding: .3rem .9rem .75rem; margin-bottom: .8rem; background: var(--paper); }
  .cmp-tab th, .cmp-tab td { border-bottom: 0; padding: .32rem 0; }
  .cmp-tab tbody th { padding: .6rem 0 .55rem; margin-bottom: .25rem; border-bottom: 1px solid var(--line); }
  .cmp-tab td { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: .75rem; }
  .cmp-tab td::before { content: attr(data-label); font: 700 .72rem/1.55 var(--f-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .cmp-tab td.cmp-tab__acao { display: block; text-align: left; padding-top: .5rem; }
  .cmp-tab td.cmp-tab__acao::before { content: none; }
  .cmp-fig__nomes b { font-size: .8125rem; }
  .cmp-fig__nomes span { font-size: .72rem; }
  .cmp-fig__legenda { font-size: .8125rem; }
}
@media (max-width: 420px) { .cmp-acoes .btn { width: 100%; justify-content: center; } }

/* ---------- Natação infantil: momentos da aula ---------- */
.aula-fases { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.aula-fase { min-width: 0; display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.1rem 1.3rem; background: var(--paper);
  border: 1px solid var(--line); border-top: 4px solid var(--pool); border-radius: 0 0 10px 10px; }
.aula-fase__n { font: 700 .8125rem/1 var(--f-display); letter-spacing: .1em; color: var(--pool); }
.aula-fase h3 { margin: 0; font: 700 1.2rem/1.2 var(--f-display); color: var(--ink); }
.aula-fase .aula-fase__sub { margin: 0; font: 700 .72rem/1.3 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.aula-fase p { margin: 0; font-size: .95rem; }
.aula-fase ul { list-style: none; margin: .35rem 0 0; padding: .75rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .45rem; font-size: .9rem; }
.aula-fase li { position: relative; padding-left: 1rem; }
.aula-fase li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 1px; background: var(--float); }
.aula-fase a { color: var(--pool); font-weight: 700; }

.aula-cits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(1.5rem, 3vw, 2rem); }
.aula-cit { margin: 0; padding: 1.1rem 1.25rem; background: #F4F6F7; border-left: 3px solid var(--float); border-radius: 0 10px 10px 0; }
.aula-cit p { margin: 0; font: 600 1.05rem/1.5 var(--f-read); color: var(--ink); }
.aula-cit footer { margin-top: .6rem; font-size: .8125rem; color: var(--muted); }

@media (max-width: 1000px) { .aula-fases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .aula-cits { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .aula-fases { grid-template-columns: minmax(0, 1fr); } }