/* =================================================================
   PÁGINAS INTERNAS — molde compartilhado (procedimentos, capilar,
   a-clínica, contato, blog). Depende de main.css.
   ================================================================= */

/* ---------- HERO INTERNO (com ken burns lento) ---------- */
.ihero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(58vh, 68vh, 78vh);
  padding: calc(var(--header-h) + clamp(2.5rem,7vh,5rem)) 0;
}
/* Heros COM foto ocupam a tela inteira (a foto preenche). Heros sem foto ficam
   proporcionais (~70vh) pelo base acima. O min-height fica nos próprios modificadores
   de foto — não depende de classe extra no HTML. */
.ihero--cover, .ihero--capilar, .ihero--cirurgiao { min-height: 100svh; }
.ihero-bg { position: absolute; inset: -24px; z-index: 0; }
.ihero-bg .hero-kb { position: absolute; inset: 0; animation: heroBreath 16s ease-in-out infinite alternate; will-change: transform; }
.ihero-bg .hero-kb > * { width: 100%; height: 100%; }
/* BASE (não-escopada): toda hero com <img class="ph-fill"> recorta em cover, sem
   esticar — imuniza /transplante-capilar e as heros internas que receberem foto.
   (Equivale à regra de blog.css:103, que cobre as páginas do /blog.) */
.ihero-bg .hero-kb > img.ph-fill { object-fit: cover; display: block; }
/* Ajuste fino só da a-clínica: object-position positivo (+40px) empurra a imagem
   ~40px para baixo, compensando o inset:-24px do .ihero-bg (que jogava o topo da
   foto acima da dobra) e revelando mais o topo da casa (laje/telhado). O scale do
   heroBreath (1.05–1.18) garante cobertura suficiente no topo nesse deslocamento. */
.ihero--cover .hero-kb > img.ph-fill { object-position: center 40px; }
/* /transplante-capilar: só no mobile, empurra o recorte para a direita (65%) para
   manter a maca/foco cirúrgico no quadro. Escopado por .ihero--capilar — não afeta
   a /a-clinica nem o desktop da própria capilar. */
@media (max-width: 760px) {
  .ihero--capilar .hero-kb > img.ph-fill { object-position: 65% center; }
}

/* /cirurgia-plastica: fusão da foto do cirurgião — espelhada (scaleX(-1)), entra
   pela direita e dissolve em direção ao texto (intacto à esquerda). Escopado por
   .ihero--cirurgiao para não vazar para blog/a-clinica/outras .ihero. */
.ihero--cirurgiao .ihero-fuse {
  position: absolute; inset: 0;
  background-image: url('/assets/img/clinica/10-cirurgiao-operando.webp');
  /* zoom out (teste): painel ~80% da largura em vez de cover — mostra mais do
     cirurgião. x:left p/ que o scaleX(-1) jogue o painel à direita; y:center
     mantém o rosto. Rollback: tag hero-cirurgia-rollback (center right cover). */
  background-size: 80%;
  background-position: left center;
  background-repeat: no-repeat;
  transform: scaleX(-1);          /* espelha: rosto vai para a direita, visível */
  opacity: .92;
  -webkit-mask-image: linear-gradient(to left, transparent 8%, rgba(0,0,0,.40) 38%, rgba(0,0,0,.82) 62%, #000 100%);
          mask-image: linear-gradient(to left, transparent 8%, rgba(0,0,0,.40) 38%, rgba(0,0,0,.82) 62%, #000 100%);
}
.ihero--cirurgiao .ihero-fuse-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, var(--graphite) 22%, color-mix(in srgb, var(--graphite) 50%, transparent) 48%, transparent 78%);
}
/* Mobile: texto sempre prioritário — reduz a presença da imagem. */
@media (max-width: 860px) {
  .ihero--cirurgiao .ihero-fuse { opacity: .5; }
}
.ihero-bg::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(25,24,23,.5) 0%, rgba(25,24,23,.35) 40%, rgba(25,24,23,.92) 100%); }
.ihero .container { position: relative; z-index: 2; }
.ihero .breadcrumb { margin-bottom: 1.4rem; }
.ihero .eyebrow { margin-bottom: 1.3rem; }
.ihero .accent-line { margin: 0 0 1.5rem; }
.ihero .headline { max-width: 18ch; }
.ihero-dek { margin-top: 1.6rem; max-width: 56ch; color: var(--on-dark-sec); font-size: 1.12rem; }
.ihero-actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1.3rem 1.8rem; align-items: center; }

/* Indicador de scroll no fim do hero — mesmo padrão da home (.scroll-cue em home.css),
   portado aqui porque as landings carregam page.css, não home.css. */
.scroll-cue { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 2;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--on-dark-mut);
  display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.scroll-cue:hover { color: var(--champagne); }
.scroll-cue .chev { font-size: 15px; line-height: 1; animation: cueBounce 2s ease-in-out infinite; }
@keyframes cueBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Ilustração larga (ex.: fases do CoolSculpting): no desktop ocupa 100%; abaixo de
   640px rola horizontalmente para não ficar ilegível. */
@media (max-width: 640px) {
  .fig-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fig-scroll img { min-width: 880px; }
}

/* a-clínica "o cirurgião": no desktop a coluna da foto estica até a altura do
   texto (align-items:stretch inline + img object-fit:cover) — o retrato preenche
   sem distorcer, só ajustando o recorte. Em telas estreitas volta a 1 coluna com
   proporção natural 4/5, sem esticar. Escopado em .split--cir/.media--cir
   (classes exclusivas desta página); não afeta o /blog nem outras páginas. */
@media (max-width: 767px) {
  .split--cir { grid-template-columns: 1fr !important; align-items: start !important; }
  .media--cir { aspect-ratio: 4 / 5; }
}

/* ---------- CABEÇALHO DE SEÇÃO ---------- */
.sec-head { max-width: 62ch; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head .eyebrow { margin-bottom: 1rem; }
.sec-head p.lead { margin-top: 1.3rem; }
.sec-head.center .lead { margin-inline: auto; }

/* ---------- CARDS DE INDICAÇÃO ("você se reconhece?") ---------- */
.indic { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem; }
.indic li { background: var(--graphite-panel); border: 1px solid var(--border-dark); border-radius: 2px;
  padding: 1.4rem 1.5rem; display: flex; gap: .9rem; align-items: flex-start;
  transition: border-color .5s var(--ease-luxe); }
.indic li:hover { border-color: var(--champagne); }
.indic li::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-top: .55em;
  border: 1px solid var(--champagne); transform: rotate(45deg); }
.indic li span { color: var(--on-dark-sec); font-size: 15px; }
.section-light .indic li { background: #fff; border-color: var(--border-light); }
.section-light .indic li span { color: var(--on-light-body); }
@media (max-width: 720px){ .indic { grid-template-columns: 1fr; } }

/* ---------- ETAPAS NUMERADAS ---------- */
.steps { display: grid; gap: 1.5rem; counter-reset: step; }
.steps.cols { grid-template-columns: repeat(4,1fr); }
.step { position: relative; padding-top: 1.4rem; border-top: 1px solid var(--border-dark); }
.section-light .step { border-top-color: var(--border-light); }
.step .step-num { font-family: var(--font-voice); font-size: 2.6rem; line-height: 1; color: var(--champagne); display: block; margin-bottom: .8rem; }
.step h3 { color: var(--on-dark-title); font-size: 1.15rem; margin-bottom: .5rem; }
.section-light .step h3 { color: var(--on-light-title); }
.step p { font-size: 14px; color: var(--on-dark-sec); }
.section-light .step p { color: var(--on-light-body); }
@media (max-width: 860px){ .steps.cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .steps.cols { grid-template-columns: 1fr; } }

/* ---------- FASES DE RECUPERAÇÃO (timeline) ---------- */
.phases { display: grid; gap: 1.2rem; }
.phase { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: baseline;
  padding-bottom: 1.2rem; border-bottom: 1px solid var(--border-dark); }
.section-light .phase { border-bottom-color: var(--border-light); }
.phase:last-child { border-bottom: 0; }
.phase .when { font-family: var(--font-voice); font-weight: 600; font-size: 1.25rem; color: var(--champagne); min-width: 7.5rem; }
.section-light .phase .when { color: var(--champagne-ink); }
.phase .what { color: var(--on-dark-sec); font-size: 15px; }
.section-light .phase .what { color: var(--on-light-body); }
@media (max-width: 560px){ .phase { grid-template-columns: 1fr; gap: .3rem; } }

/* ---------- BANDA DE DESTAQUE (diferencial / "por que cirurgião") ---------- */
.feature-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin-top: 2.6rem; }
.feature-list .fi { }
.feature-list .fi .k { font-family: var(--font-voice); font-size: 1.5rem; color: var(--on-dark-title); margin-bottom: .5rem; }
.feature-list .fi .v { font-size: 14px; color: var(--on-dark-sec); }
@media (max-width: 760px){ .feature-list { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---------- CALLOUT "IMPORTANTE" ---------- */
.callout { background: var(--graphite-panel); border: 1px solid var(--border-dark);
  border-left: 2px solid var(--champagne); border-radius: 2px; padding: 1.6rem 1.8rem; }
.callout .k { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--champagne); margin-bottom: .6rem; }
/* callout em seção clara tem fundo #fff → champanhe reprova AA; usa o ink escuro. */
.section-light .callout .k { color: var(--champagne-ink); }
.callout p { color: var(--on-dark-sec); font-size: 15px; }
.section-light .callout { background: #fff; border-color: var(--border-light); border-left-color: var(--champagne); }
.section-light .callout p { color: var(--on-light-body); }

/* ---------- FAQ ACORDEÃO ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--border-dark); }
.section-light .faq-item { border-bottom-color: var(--border-light); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.5rem 0; text-align: left; font-family: var(--font-voice); font-size: 1.3rem;
  color: var(--on-dark-title); transition: color .35s; }
.section-light .faq-q { color: var(--on-light-title); }
.faq-q:hover { color: var(--champagne); }
.faq-q .ic { flex: 0 0 auto; width: 18px; height: 18px; position: relative; }
.faq-q .ic::before, .faq-q .ic::after { content: ''; position: absolute; background: var(--champagne); transition: transform .4s var(--ease-luxe); }
.faq-q .ic::before { top: 8px; left: 0; width: 18px; height: 1.5px; }
.faq-q .ic::after { left: 8px; top: 0; width: 1.5px; height: 18px; }
.faq-q[aria-expanded="true"] .ic::after { transform: scaleY(0); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .5s var(--ease-luxe); }
.faq-a-inner { padding: 0 0 1.5rem; color: var(--on-dark-sec); font-size: 15px; line-height: 1.8; max-width: 70ch; }
.section-light .faq-a-inner { color: var(--on-light-body); }

/* ---------- CTA DE SEÇÃO (meio/fim) ---------- */
.cta-band { text-align: center; }
.cta-band .headline { margin-inline: auto; max-width: 20ch; }
.cta-band .lead { margin: 1.4rem auto 0; }
.cta-band .btn { margin-top: 2.2rem; }

/* Cards com âncora (ex.: #criolipolise, #mmp): compensa o header fixo para o
   alvo não ficar escondido atrás dele ao chegar via faixa-ponte. */
.grid .cardlink[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* ---------- CANAIS DE CONTATO ---------- */
.channel { display: flex; gap: 1rem; align-items: flex-start; }
.channel .icon { color: var(--champagne); margin-top: .15rem; }
.channel .k { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--on-dark-mut); margin-bottom: .3rem; }
.channel a, .channel p { color: var(--on-dark-title); font-size: 1.05rem; }
.channel a:hover { color: var(--champagne); }

/* ---------- MAPA ---------- */
.map-card { border: 1px solid var(--border-dark); border-radius: 3px; overflow: hidden; background: var(--graphite-panel); min-height: clamp(280px, 42vw, 440px); }
.map-card iframe { display: block; width: 100%; height: clamp(280px, 42vw, 440px); border: 0; filter: grayscale(.3) contrast(.95); }

/* ---------- FORMULÁRIO DE PRÉ-AVALIAÇÃO ---------- */
.form-grid { display: grid; gap: 1.7rem; }
.field label { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--on-dark-mut); margin-bottom: .55rem; }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--border-dark);
  color: var(--on-dark-title); padding: .6rem 0; font-size: 1rem; font-family: var(--font-sans);
  transition: border-color .4s var(--ease-luxe); }
.field input::placeholder, .field textarea::placeholder { color: var(--on-dark-mut); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--champagne); }
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--champagne) 50%), linear-gradient(135deg, var(--champagne) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 9px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--graphite-panel); color: var(--on-dark-title); }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: 13px; line-height: 1.6; color: var(--on-dark-sec); }
.consent input { width: auto; margin-top: .2rem; accent-color: var(--champagne); flex: 0 0 auto; }
.consent a { color: var(--champagne); }
.form-note { font-size: 12px; color: var(--on-dark-mut); margin-top: -.4rem; }
.form-status { font-size: 14px; min-height: 1.3em; }
.form-status.ok { color: var(--champagne); }
.form-status.err { color: #c98b7a; }

/* ---------- ÍNDICE DE PROCEDIMENTOS (cards agrupados) ---------- */
.group { margin-top: clamp(2.5rem,6vw,4rem); }
.group-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.6rem; }
.group-head .eyebrow { margin: 0; }
.group-head h3 { font-family: var(--font-voice); font-weight: 400; font-size: clamp(1.5rem,3vw,2rem); color: var(--on-dark-title); }
.section-light .group-head h3 { color: var(--on-light-title); }
.cardlink { display: flex; flex-direction: column; }
.cardlink .go { margin-top: 1.2rem; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--champagne); }
.section-light .cardlink .go { color: var(--champagne-ink); }
.cardlink .go span { display: inline-block; transition: margin-left .4s var(--ease-luxe); }
.cardlink:hover .go span { margin-left: .4rem; }

/* ---------- FICHA TÉCNICA (sutura silhouette etc.) ---------- */
.spec { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; margin-top: 2.4rem;
  border-block: 1px solid var(--border-dark); padding-block: 1.8rem; }
.section-light .spec { border-block-color: var(--border-light); }
.spec .si .k { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--on-dark-mut); margin-bottom: .4rem; }
.spec .si .v { font-family: var(--font-voice); font-size: 1.3rem; color: var(--champagne); line-height: 1.15; }
.section-light .spec .si .v { color: var(--on-light-strong); }
@media (max-width: 720px){ .spec { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

/* ---------- FAIXA DE DESTAQUE (pioneirismo etc.) ---------- */
.highlight { background: var(--graphite-panel); border: 1px solid var(--border-dark);
  border-radius: 3px; padding: clamp(1.8rem,4vw,2.6rem); display: flex; gap: 1.4rem; align-items: flex-start; }
.highlight .badge { flex: 0 0 auto; width: 30px; height: 30px; color: var(--champagne); }
.highlight .k { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--champagne); margin-bottom: .5rem; }
.highlight h3 { font-family: var(--font-voice); font-weight: 400; font-size: clamp(1.4rem,3vw,1.9rem); color: var(--on-dark-title); margin-bottom: .5rem; }
.highlight p { color: var(--on-dark-sec); font-size: 15px; max-width: 60ch; }

/* ---------- COMPARATIVO (tabela responsiva → cards no mobile) ---------- */
.compare { border: 1px solid var(--border-dark); border-radius: 3px; overflow: hidden; }
.compare-head, .compare-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; }
.compare-head { background: var(--graphite-panel); }
.compare-head span { padding: 1rem 1.2rem; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--champagne); }
.compare-row { border-top: 1px solid var(--border-dark); }
.compare-row span { padding: 1rem 1.2rem; font-size: 14px; color: var(--on-dark-sec); }
.compare .compare-crit { color: var(--on-dark-title); font-weight: 500; }
.compare .compare-a { color: var(--champagne); border-inline: 1px solid var(--border-dark); }
/* Símbolos +/x maiores e mais nítidos (legibilidade) — cor inalterada. */
.compare-row .compare-a, .compare-row .compare-b { font-size: 15px; font-weight: 500; }
/* Cabeçalho da tabela em seção clara: champanhe reprova AA → ink escuro. */
.section-light .compare-head span { color: var(--champagne-ink); }
@media (max-width: 640px) {
  .compare { border: 0; display: grid; gap: 1rem; }
  .compare-head { display: none; }
  .compare-row { grid-template-columns: 1fr; border: 1px solid var(--border-dark); border-radius: 2px; overflow: hidden; }
  .compare-row span { border-top: 1px solid var(--border-dark); }
  .compare-row .compare-crit { border-top: 0; background: var(--graphite-panel); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--champagne); }
  .compare .compare-a { border-inline: 0; }
  .compare-row .compare-a::before, .compare-row .compare-b::before {
    content: attr(data-col) ": "; color: var(--on-dark-mut); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; display: block; margin-bottom: .2rem; }
}
/* Variante para seções claras (ex.: FUE×FUT em /fue-motorizada). */
.section-light .compare, .section-light .compare-row,
.section-light .compare .compare-a { border-color: var(--border-light); }
.section-light .compare-head { background: var(--offwhite); }
.section-light .compare-row span { color: var(--on-light-body); }
.section-light .compare .compare-crit { color: var(--on-light-title); }
.section-light .compare .compare-a { color: var(--on-light-title); font-weight: 500; }
@media (max-width: 640px) {
  .section-light .compare-row span { border-top-color: var(--border-light); }
  .section-light .compare-row .compare-crit { background: var(--offwhite); color: var(--on-light-title); }
  .section-light .compare-row .compare-a::before, .section-light .compare-row .compare-b::before { color: var(--on-light-body); }
}

/* tags reaproveitadas em páginas internas (já existe .tags/.tag em home.css;
   redeclaradas aqui de forma idêntica para não depender de home.css) */
.tagrow { display: flex; flex-wrap: wrap; gap: .6rem; }
.tagrow .tag { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--on-dark-sec);
  border: 1px solid var(--border-dark); border-radius: 100px; padding: .55em 1.1em; transition: border-color .4s, color .4s; }
.tagrow .tag:hover { border-color: var(--champagne); color: var(--champagne); }

/* ---------- CAPTURA DO E-BOOK (compartilhado: /transplante-capilar e posts capilares) ----------
   Movido do <style> inline da landing: o mesmo componente #ebook-capilar é usado
   nos posts do blog (page.css é carregado pelos dois). */
/* Bloco de captura do e-book — card branco sobre off-white (branco=card),
   capa à esquerda, formulário à direita. Campos reescritos para fundo
   claro (os .field padrão miram fundo escuro). Acentos em champanhe. */
#ebook-capilar .eb-card {
  background: #fff; border: 1px solid var(--border-light); border-radius: 3px;
  padding: clamp(1.6rem, 4vw, 3rem);
  display: grid; grid-template-columns: minmax(0, 280px) 1fr;
  gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center;
}
#ebook-capilar .eb-cover { margin: 0; }
#ebook-capilar .eb-cover img {
  display: block; width: 100%; height: auto; border-radius: 2px;
  box-shadow: 0 18px 40px -22px rgba(30,29,27,.45);
}
#ebook-capilar .eb-eyebrow { color: var(--champagne-ink); display: block; }
#ebook-capilar .eb-title {
  font-family: var(--font-voice); font-weight: 600; line-height: 1.08;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--on-light-title);
  margin: .7rem 0 .6rem;
}
#ebook-capilar .eb-dek { color: var(--on-light-body); max-width: 46ch; }
#ebook-capilar .form-grid { margin-top: 1.8rem; }
/* campos sobre fundo claro */
#ebook-capilar .field label { color: var(--on-light-strong); }
#ebook-capilar .field input, #ebook-capilar .field select {
  color: var(--on-light-title); border-bottom-color: var(--border-light);
}
#ebook-capilar .field input::placeholder { color: var(--on-light-body); opacity: .7; }
#ebook-capilar .field select option { background: #fff; color: var(--on-light-title); }
#ebook-capilar .consent { color: var(--on-light-body); }
#ebook-capilar .consent a { color: var(--champagne-ink); text-decoration: underline; text-underline-offset: 2px; }
#ebook-capilar .eb-submit[disabled] { opacity: .45; cursor: not-allowed; }
#ebook-capilar .form-status.err { color: #b5654f; }
#ebook-capilar .eb-success .eb-title { margin-top: 0; }
#ebook-capilar .eb-success-actions {
  display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem;
}
@media (max-width: 760px) {
  #ebook-capilar .eb-card { grid-template-columns: 1fr; }
  #ebook-capilar .eb-cover { max-width: 220px; margin: 0 auto; }
}

/* ── Vídeo lite-embed (facade YouTube; iframe só carrega no clique) ──────── */
.video-embed { max-width: 1000px; margin: 2.4rem auto 0; }
.yt-lite {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  padding: 0; margin: 0; border: 1px solid var(--border-dark); border-radius: 3px;
  overflow: hidden; cursor: pointer; background: var(--graphite-deep);
}
.yt-lite__poster {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease-luxe), opacity .4s var(--ease-luxe);
}
.yt-lite:hover .yt-lite__poster,
.yt-lite:focus-visible .yt-lite__poster { transform: scale(1.03); opacity: .9; }
.yt-lite__play {
  position: absolute; inset: 0; margin: auto;
  width: 74px; height: 74px; display: grid; place-items: center;
  border-radius: 50%; background: var(--champagne); color: var(--graphite);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .38);
  transition: background .35s var(--ease-luxe), transform .35s var(--ease-luxe);
}
.yt-lite:hover .yt-lite__play,
.yt-lite:focus-visible .yt-lite__play { background: var(--champagne-hi); transform: scale(1.06); }
.yt-lite__play svg { width: 30px; height: 30px; margin-left: 4px; }
.yt-lite:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
.yt-lite__frame {
  width: 100%; aspect-ratio: 16 / 9; display: block;
  border: 1px solid var(--border-dark); border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .yt-lite__poster, .yt-lite__play { transition: none; }
}