@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap');
/* tema/site.css — CSS deste cliente, carregado DEPOIS do tema pai. Comece pelas variáveis; depois, só o que mudar.
   As cores principal e de destaque vêm do painel (Site › Aparência e busca); para fixar aqui, descomente: */
:root{
  /* --pm-principal:#15171A; */
  /* --pm-destaque:#1F4D45; */
  --pm-fonte:'Lato',system-ui,-apple-system,'Segoe UI',sans-serif; /* site todo em Lato, como o site antigo (Julian, 24/10); o menu do topo segue em Cinzel */
  /* --pm-raio:18px; --pm-largura:1280px; */
}

/* ===== Dra. Naiana Sá (23/10/2026, chat da Naiana) ===== */

/* 1. Topo na cor da marca, com a logo branca (como o site antigo). No Premium o topo é branco por desenho. */
.pm-topo{background:var(--pm-principal);border-bottom-color:transparent;color:#fff}
.pm-topo .pm-acoes .pm-circ{color:#fff;border-color:rgba(255,255,255,.35);background:transparent}
.pm-topo .pm-acoes .pm-circ--nu{border-color:transparent}
.pm-topo .pm-acoes .pm-circ:hover{background:rgba(255,255,255,.12)}
.pm-topo .pm-busca{color:var(--pm-texto)}
.pm-topo .pm-busca .pm-circ{color:var(--pm-texto);border-color:#D9D7D2;background:#fff}
.pm-topo .pm-nav>ul>li>a:hover,.pm-topo .pm-nav a[aria-current]{border-bottom-color:#fff}
.pm-topo .pm-nav .tem-sub ul{color:var(--pm-texto)}
/* Menu em serifada, sem negrito, como a logo (Cinzel). Julian, 24/10; em caixa alta como a logo desde 30/10. */
.pm-topo .pm-nav>ul{font-family:'Cinzel',Georgia,serif;font-weight:400;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.pm-topo .pm-nav>ul>li>a,.pm-topo .pm-nav>ul>li>span{white-space:nowrap}
@media(min-width:901px) and (max-width:1180px){.pm-topo .pm-nav>ul{font-size:12px;gap:18px;letter-spacing:.03em}}
.pm-topo .pm-nav .tem-sub ul{font-family:var(--pm-fonte);letter-spacing:0;text-transform:none}
@media(max-width:900px){
  .pm-topo .pm-nav>ul{font-size:16px}
  .pm-topo .pm-nav{color:var(--pm-texto)}
  .pm-topo .pm-nav a[aria-current]{border-bottom-color:transparent;color:var(--pm-principal)}
}

/* Seções da home desenhadas como no site antigo (fonte Lato). Conteúdo no painel (blocos com nome de seção);
   o script dos vídeos fica num bloco HTML livre com nome de seção "nsa-js", escondido aqui. Sem script, os
   botões e os cartões abrem o vídeo no YouTube. */
#nsa-js,#historia-js{display:none}
#historia,#laser,#ambiente,#canal{font-family:'Lato',var(--pm-fonte)}

/* 2. História (bloco Imagem + texto "historia"): assinatura em cima, frase à esquerda, foto com play no meio,
      frase à direita; o clique na foto troca pelo vídeo do botão (o botão some com o script). */
#historia{background:var(--pm-fundo)}
/* H1 da home (bloco HTML livre "titulo", logo antes da História; pedido do Julian, 24/10): linha pequena em cima
   da assinatura, como parte da seção, para a home ter um H1 com o termo principal sem mexer nos banners. */
#titulo{padding:64px 0 0;background:var(--pm-fundo)}
#titulo .nsa-h1{margin:0;font-family:'Lato',var(--pm-fonte);font-size:14px;line-height:1.4;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pm-destaque);text-align:center}
#titulo+#historia{padding-top:22px}
@media(max-width:900px){#titulo{padding-top:44px}#titulo .nsa-h1{font-size:12px;letter-spacing:.14em}#titulo+#historia{padding-top:18px}}
#historia .pm-split{max-width:1120px;grid-template-columns:minmax(0,1fr) 349px minmax(0,1fr);
  grid-template-rows:auto 1fr auto auto auto 1fr;
  grid-template-areas:"ass ass ass" ". img ." "esq img tit" "esq img txt" "esq img bot" ". img .";gap:0 56px;align-items:start}
#historia .pm-split::before{content:"";grid-area:ass;justify-self:center;width:244px;height:37px;margin-bottom:34px;background:url(assets/assinatura.png) center/contain no-repeat}
#historia .pm-split-txt{display:contents}
#historia .pm-split-img{grid-area:img;width:349px;max-width:100%;aspect-ratio:349/613;justify-self:center;border-radius:30px;border:1px solid var(--pm-principal);transition:box-shadow .2s ease}
#historia .pm-split-img iframe{display:block;width:100%;height:100%;border:0}
#historia .pm-sobre,#historia .pm-h2{margin:0;font-family:inherit;font-size:58px;line-height:1.12;font-weight:700;letter-spacing:0;text-transform:none;color:var(--pm-principal);text-align:center}
#historia .pm-sobre{grid-area:esq}
#historia .pm-h2{grid-area:tit}
#historia .pm-rich{grid-area:txt;margin:36px 0 0;font-size:18px;color:#333;text-align:center}
#historia .pm-rich p{margin:0}
#historia .pm-btn{grid-area:bot;justify-self:center;margin-top:24px}
#historia.nsa-video-js .pm-btn{display:none}
#historia.nsa-video-js .pm-split-img{cursor:pointer}
#historia.nsa-video-js .pm-split-img:hover,#historia.nsa-video-js .pm-split-img:focus-visible{box-shadow:1px 1px 10px var(--pm-principal);outline:0}
@media(max-width:1100px){#historia .pm-sobre,#historia .pm-h2{font-size:44px}#historia .pm-split{column-gap:36px}}
@media(max-width:900px){
  #historia .pm-split{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"ass" "esq" "img" "tit" "txt" "bot";gap:0}
  #historia .pm-split::before{margin-bottom:22px}
  #historia .pm-sobre,#historia .pm-h2{font-size:30px}
  #historia .pm-sobre{margin-bottom:24px}
  #historia .pm-split-img{width:335px}
  #historia .pm-h2{margin-top:28px}
  #historia .pm-rich{margin-top:14px;font-size:17px}
}

/* 3. Laser (bloco Imagem + texto "laser"): a foto vira o fundo da faixa e o texto fica à direita. */
#laser{position:relative;padding:0;background:#EDE7E2;overflow:hidden}
#laser .pm-split{display:flex;justify-content:flex-end;align-items:center;min-height:clamp(440px,31.4vw,602px)}
#laser .pm-split-img{position:absolute;inset:0;border-radius:0;aspect-ratio:auto;background:none}
#laser .pm-split-img img{object-position:left center}
#laser .pm-split-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 45%,rgba(255,255,255,.55) 80%)}
@media(min-width:901px) and (max-width:1180px){#laser .pm-split-img::after{background:linear-gradient(90deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.82) 62%)}}
#laser .pm-split-txt{position:relative;width:420px;max-width:100%;padding:56px 0;text-align:right}
#laser .pm-sobre,#laser .pm-h2{margin:0;font-family:inherit;font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--pm-principal);line-height:1.05}
#laser .pm-sobre{font-size:52px}
#laser .pm-h2{font-size:45px}
#laser .pm-rich{margin:32px 0;font-size:18px;line-height:32px;color:#333}
#laser .pm-rich p{margin:0}
@media(max-width:900px){
  /* 30/10: o texto fica sobre a foto, como no computador (antes: foto em cima e texto embaixo) */
  #laser .pm-split{display:flex;flex-direction:column;justify-content:flex-end;min-height:640px}
  #laser .pm-split-img{inset:0;margin:0;aspect-ratio:auto}
  #laser .pm-split-img img{object-position:52% center}
  /* véu na cor da marca, escurecendo para baixo, e texto branco (Julian, 30/10; antes era véu branco e texto marrom) */
  #laser .pm-split-img::after{background:linear-gradient(180deg,rgba(58,30,24,0) 30%,rgba(58,30,24,.72) 56%,rgba(48,24,19,.92) 100%)}
  #laser .pm-split-txt{width:auto;padding:0 0 44px;text-align:right}
  #laser .pm-sobre{font-size:34px}#laser .pm-h2{font-size:30px}
  #laser .pm-sobre,#laser .pm-h2,#laser .pm-rich{color:#fff}
  #laser .pm-rich{margin:20px 0 26px;font-size:17px;line-height:28px}
}

/* 4. Ambiente (bloco Imagem + texto "ambiente", imagem à direita): texto à esquerda com o botão "Assista";
      a foto do consultório (com o play desenhado) vira o vídeo no clique. */
#ambiente{background:var(--pm-fundo)}
#ambiente .pm-split{max-width:1180px;grid-template-columns:minmax(0,412px) minmax(0,713px);justify-content:space-between;gap:56px}
/* 30/10: a seção virou o convite para a página Clínica (foto da recepção, botão "Ver fotos da clínica"), no lugar da
   galeria de 6 fotos na home; a foto antiga com o play desenhado saiu. */
#ambiente .pm-split-img{aspect-ratio:4/3;border-radius:14px;background:none;overflow:hidden;display:flex;align-items:center}
#ambiente .pm-split-img img{width:100%;height:100%;object-fit:cover}
#ambiente .pm-split-img.is-video iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0}
#ambiente.nsa-video-js .pm-split-img{cursor:pointer}
#ambiente .pm-h2{font-family:inherit;font-size:42px;font-weight:700;letter-spacing:0;color:var(--pm-principal)}
#ambiente .pm-rich{margin:26px 0 30px;font-size:18px;line-height:32px;color:#333}
#ambiente .pm-rich p{margin:0}
@media(max-width:900px){
  #ambiente .pm-split{grid-template-columns:minmax(0,1fr);gap:28px}
  #ambiente .pm-split-txt{order:-1;text-align:center}
  #ambiente .pm-h2{font-size:30px}
}

/* Botões das seções 3 e 4 como no site antigo (marrom, cantos de 15 px, sem a seta). */
#laser .pm-btn,#ambiente .pm-btn{border-radius:15px;border:1px solid var(--pm-principal);transition:border-color .3s}
#laser .pm-btn svg,#ambiente .pm-btn svg{display:none}
#laser .pm-btn:hover{border-color:#fff}

/* 5. Meu canal (bloco Lista "canal", lista "Vídeos do canal" em carrossel; Home e Sobre): título e texto à esquerda
      com o ícone de play, vídeos verticais à direita. O cartão vira o vídeo no clique. */
#canal{display:grid;grid-template-columns:minmax(0,32%) minmax(0,1fr);gap:0 40px;align-items:center;max-width:var(--pm-largura);margin:0 auto;padding-left:var(--pm-gutter);padding-right:var(--pm-gutter)}
#canal>.pm-wrap{padding:0;max-width:none;margin:0}
#canal .pm-cabeca{margin:0}
#canal .pm-cabeca>div{display:flex;flex-direction:column;padding-top:86px;background:url(assets/play.png) left top/43px 57px no-repeat}
#canal .pm-h2{order:1;font-family:inherit;font-size:42px;font-weight:700;letter-spacing:0;color:var(--pm-principal)}
#canal .pm-sobre{order:2;margin:26px 0 0;font-size:18px;line-height:32px;font-weight:400;letter-spacing:0;text-transform:none;color:#333}
#canal .pm-trilho-caixa{min-width:0}
#canal .pm-trilho{padding:12px 0 12px;scroll-padding-left:0;gap:24px}
#canal .pm-seta--ant{left:-20px}#canal .pm-seta--prox{right:-20px}
#canal .pm-trilho>.pm-card{width:195px;min-height:0;padding:0;border:0;background:none;gap:6px;align-items:center;transform:none}
#canal .pm-quadro--g{width:195px;height:343px;border-radius:30px;border:1px solid var(--pm-principal);overflow:hidden;background:#000;transition:box-shadow .3s}
#canal .pm-quadro--g img{width:100%;height:100%;object-fit:cover}
#canal .pm-quadro--g iframe{display:block;width:100%;height:100%;border:0}
#canal a.pm-card:hover .pm-quadro--g{box-shadow:1px 1px 10px var(--pm-principal)}
#canal .pm-card strong{font-size:14px;line-height:1.6;font-weight:400;letter-spacing:0;color:var(--pm-principal);text-align:center;max-width:180px}
#canal .pm-card-txt,#canal .pm-card-mais{display:none}
@media(max-width:900px){
  #canal{display:block;padding-left:0;padding-right:0}
  #canal>.pm-wrap{padding:0 var(--pm-gutter);margin-bottom:24px}
  #canal .pm-cabeca>div{padding-top:72px;align-items:center;text-align:center;background-position:center top}
  #canal .pm-h2{font-size:30px}
  #canal .pm-sobre{margin-top:16px;font-size:17px;line-height:28px}
  #canal .pm-trilho{padding:12px var(--pm-gutter);scroll-padding-left:var(--pm-gutter)}
  #canal .pm-trilho>.pm-card{width:195px}
}

/* 6. Mapa (HTML livre na Clínica e no Contato). */
.nsa-mapa{max-width:1200px;margin:0 auto;padding:24px 20px 56px}
.nsa-mapa iframe{width:100%;height:420px;border:0;border-radius:12px}

/* 7. Cartão do procedimento (listagens, home e relacionados): seta ao lado do nome, para mostrar que abre a página
   (pedido do Julian, 24/10). A seta anda um pouco no hover. */
.pm-prod-nome{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pm-prod-nome::after{content:"";flex:0 0 30px;height:30px;border-radius:50%;border:1px solid var(--pm-linha);
  background:var(--pm-fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23573027' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:transform .25s ease,border-color .25s ease}
.pm-prod:hover .pm-prod-nome::after,.pm-prod:focus-visible .pm-prod-nome::after{transform:translateX(4px);border-color:var(--pm-principal)}
@media(max-width:900px){.pm-prod-nome::after{flex-basis:26px;height:26px;background-size:14px}}

/* 8. "Compartilhar com alguém" na página do procedimento (tema/paginas/produto.php), abaixo do botão de agendar.
   Evento no GA4 pelo script de Configurações → Scripts (data-compartilhar). */
.nsa-compartilhar{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:14px;color:var(--pm-texto-2);text-decoration:underline;text-underline-offset:3px}
.nsa-compartilhar:hover{color:var(--pm-principal)}
.nsa-compartilhar svg{flex-shrink:0}

/* 9. Meu canal: ícone de play sobre a capa (as capas novas, tiradas do YouTube em 30/10, não têm o play desenhado
   como as antigas). Some quando o cartão vira o vídeo (iframe no lugar da imagem). */
#canal .pm-quadro--g{position:relative}
#canal .pm-quadro--g::after{content:"";position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;pointer-events:none;
  background:rgba(87,48,39,.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23fff'/%3E%3C/svg%3E") 55% 50%/26px no-repeat;
  box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .2s ease}
#canal a.pm-card:hover .pm-quadro--g::after{transform:scale(1.08)}
#canal .pm-quadro--g:has(iframe)::after{display:none}

/* 10. Celular (pedido do Julian, 30/10): especialidades uma embaixo da outra, com "Ver procedimentos" abaixo dos
   cartões (bloco Categorias com nome de seção "especialidades"). O laser com o texto sobre a foto está na seção 3. */
@media(max-width:900px){
  #especialidades .pm-wrap{display:flex;flex-direction:column}
  #especialidades .pm-cabeca{display:contents}
  #especialidades .pm-cabeca>div{order:1;margin-bottom:24px}
  #especialidades .pm-cats{order:2;grid-template-columns:minmax(0,1fr);gap:14px}
  #especialidades .pm-cat{height:190px}
  #especialidades .pm-link-forte{order:3;align-self:center;margin-top:22px;font-size:15px}
}

/* 11. Página Dra. Naiana Sá, seção do vídeo (bloco Imagem + texto "video", 30/10): tudo centralizado, como a
   História da home: título leve, texto e a foto vertical que vira o vídeo no clique (script nsa-js da página). */
#video{background:var(--pm-fundo);font-family:'Lato',var(--pm-fonte)}
#video .pm-split{display:flex;flex-direction:column;align-items:center;gap:0;max-width:760px;text-align:center}
#video .pm-split-txt{display:contents}
#video .pm-h2{order:1;margin:0;font-family:inherit;font-size:38px;line-height:1.2;font-weight:400;letter-spacing:0;color:var(--pm-principal)}
#video .pm-rich{order:2;margin:14px 0 30px;font-size:18px;color:#333}
#video .pm-rich p{margin:0}
#video .pm-split-img{order:3;width:349px;max-width:100%;aspect-ratio:349/613;border-radius:30px;border:1px solid var(--pm-principal);transition:box-shadow .2s ease}
#video .pm-split-img iframe{display:block;width:100%;height:100%;border:0}
#video .pm-btn{order:4;margin-top:24px;border-radius:15px}
#video.nsa-video-js .pm-btn{display:none}
#video.nsa-video-js .pm-split-img{cursor:pointer}
#video.nsa-video-js .pm-split-img:hover,#video.nsa-video-js .pm-split-img:focus-visible{box-shadow:1px 1px 10px var(--pm-principal);outline:0}
@media(max-width:900px){#video .pm-h2{font-size:28px}#video .pm-rich{font-size:17px;margin-bottom:22px}#video .pm-split-img{width:335px}}

/* 12. Galeria da clínica (30/10, fotos da inauguração): prévia de 6 na home (bloco "galeria" + botão "galeria-mais")
   e as 24 na página Clínica. Grade de 3 na home e de 4 na Clínica (6 linhas certinhas), fotos 4:3 com canto suave;
   no celular, 2 por linha. O botão fica colado na galeria, centralizado. */
#galeria .pm-galeria-grade{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#galeria:has(+#galeria-mais) .pm-galeria-grade{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
#galeria .pm-galeria-grade a{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:14px}
#galeria .pm-galeria-grade img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
#galeria .pm-galeria-grade a:hover img{transform:scale(1.04)}
#galeria:has(+#galeria-mais){padding-bottom:0}
#galeria-mais{padding-top:34px}
.nsa-galeria-mais{margin:0;text-align:center}
@media(max-width:900px){
  #galeria .pm-galeria-grade,#galeria:has(+#galeria-mais) .pm-galeria-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #galeria .pm-galeria-grade a{border-radius:10px}
  #galeria-mais{padding-top:26px}
}

/* 13. Página Agende (30/10, Julian: "blocos muito espaçados"): os três blocos (nomes de seção agende, onde, mapa)
   mais próximos. */
#agende{padding:64px 0 24px}
#onde{padding:24px 0 0}
#mapa{padding:20px 0 72px}
#mapa .nsa-mapa{padding:0}
@media(max-width:900px){#agende{padding:36px 0 12px}#onde{padding:20px 0 0}#mapa{padding:16px 0 48px}#mapa .nsa-mapa iframe{height:340px}}

/* 14. Rodapé no celular: direitos, Política e "Desenvolvido por" centralizados, uma linha cada (Julian, 30/10). */
@media(max-width:900px){
  .pm-rodape-base-in{flex-direction:column;align-items:center;gap:10px;text-align:center}
}

/* 15. Laser no celular: botão branco sobre o véu escuro (fica no fim para vencer a regra geral do botão do laser, no fim da seção 4). */
@media(max-width:900px){
  #laser .pm-btn{background:#fff;color:var(--pm-principal);border-color:#fff}
  #laser .pm-btn:hover{background:transparent;color:#fff;border-color:#fff}
}

/* 16. Banners da home (30/10, artes novas com as fotos da inauguração): a faixa segue a proporção da arte, então a
   imagem aparece inteira e o texto escrito nela nunca é cortado (antes: altura fixa de 420 px no celular cortava
   a arte de 800×1280 em cima e embaixo). Artes: computador 2400×900 (8:3), celular 1080×1350 (4:5), trocadas pelo
   formato da <picture> do Premium (até 767 px). O arrastar no celular e o banner sem botão vieram da base (Premium
   1.47.0, pedidos F22 e F25, 30/10): o touch-action e a antiga seção 17 saíram daqui. */
.pm-banners--alta .pm-slide{min-height:0;aspect-ratio:8/3}
@media(max-width:767px){.pm-banners--alta .pm-slide{aspect-ratio:4/5}}

/* 18. Convite para a Clínica na home (bloco "ambiente"): a foto também leva à página Clínica, com uma seta no canto,
   no mesmo desenho da seta dos cartões (Julian, 30/10). O link do botão se estende sobre a seção inteira (sem script);
   o botão continua visível e é o que o leitor de tela anuncia. */
#ambiente .pm-split{position:relative}
#ambiente .pm-split-txt .pm-btn{position:static}
#ambiente .pm-split-txt .pm-btn::after{content:"";position:absolute;inset:0;z-index:1}
#ambiente .pm-split-img{position:relative}
#ambiente .pm-split-img img{transition:transform .4s ease}
#ambiente .pm-split:hover .pm-split-img img{transform:scale(1.03)}
#ambiente .pm-split-img::after{content:"";position:absolute;right:16px;bottom:16px;width:48px;height:48px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23573027' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat;
  box-shadow:0 4px 14px rgba(0,0,0,.18);transition:transform .25s ease}
#ambiente .pm-split:hover .pm-split-img::after{transform:translateX(4px)}
@media(max-width:900px){#ambiente .pm-split-img::after{width:42px;height:42px;right:12px;bottom:12px;background-size:18px}}

/* 19. Título principal (H1) pequeno no topo da Sobre e da Agende (HTML livre "titulo", como o da home; Julian, 30/10). */
#titulo+section{padding-top:22px}
#titulo:has(+.pm-sec--suave:not(#historia)){background:var(--pm-suave)} /* Sobre: a faixa do H1 no mesmo tom da seção de baixo (Julian, 09/11); a História da home é suave no pai, mas branca aqui */
#titulo+.pm-sec--suave:not(#historia) .pm-split{align-items:start} /* Sobre: foto alinhada ao topo do texto (Julian, 09/11) */
@media(max-width:900px){#titulo+section{padding-top:18px}}

/* 20. Vídeo institucional (História na home e "video" na Sobre): a capa nova (ensaio de 2026) não tem o play desenhado;
   o play é o mesmo dos cartões do canal (seção 9), maior, e some quando a capa vira o vídeo (Julian, 30/10). */
#historia .pm-split-img,#video .pm-split-img{position:relative;overflow:hidden}
#historia .pm-split-img img,#video .pm-split-img img{width:100%;height:100%;object-fit:cover}
#historia .pm-split-img::after,#video .pm-split-img::after{content:"";position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;pointer-events:none;
  background:rgba(87,48,39,.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23fff'/%3E%3C/svg%3E") 55% 50%/32px no-repeat;
  box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .2s ease}
#historia .pm-split-img:hover::after,#video .pm-split-img:hover::after{transform:scale(1.08)}
#historia .pm-split-img:has(iframe)::after,#video .pm-split-img:has(iframe)::after{display:none}
@media(max-width:900px){#historia .pm-split-img::after,#video .pm-split-img::after{width:62px;height:62px;margin:-31px 0 0 -31px;background-size:28px}}