/*
Theme Name: Adrivelle Estetica
Theme URI: https://adrivelle.com.br
Author: Adrivelle
Description: Tema de pagina unica da Adrivelle Estetica — Adriana Cabral, biomedica esteta em Osasco. Crio da Dri, Drenagem 3MH, tratamentos corporais e faciais.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adrivelle
Tags: one-column, custom-colors, custom-menu, editor-style, full-width-template, translation-ready
*/

html{color-scheme:light}
body{margin:0}
img{max-width:100%;display:block}
[hidden]{display:none!important}

/* ============================================================================
   ADRIVELLE — v9 "Rosé & Ouro"
   Estrutura inspirada no layout de referencia: heroi escuro com a profissional
   a direita, secoes claras e escuras alternando, foto em arco, assinatura
   manuscrita, faixa de fecho em blush.

   DOUTRINA DE FORMA (herdada das rodadas anteriores, continua valendo)
   1. A curva pertence ao horizonte da secao e a dissolucao da foto.
   2. A reta pertence ao tipo, ao fio, ao botao e a celula. Botao em 6px:
      NUNCA pilula — foi a primeira rejeicao do cliente.
   3. Nada de CAIXA ALTA em texto corrido: so a assinatura da marca.
   4. Os reveals nao podem depender de JS. animation-timeline:view() dentro de
      @supports; sem suporte, tudo aparece normal.
   ============================================================================ */

:root{
  /* --- superficies claras (rosadas) --- */
  --creme:#FDF5F4; --creme-2:#F9E8E8; --carta:#FFFFFF; --nude:#F2D9DA;
  /* --- superficies escuras: rose profundo, nao vinho-marrom --- */
  --vinho:#5C2B3D; --vinho-2:#431D2B; --vinho-3:#73384E;
  /* --- acentos --- */
  --rose:#CE8295; --acao:#A33A5C; --acao-2:#8E2F4E;
  --ouro:#D3AC75;          /* ouro sobre escuro */
  --ouro-t:#9A7340;        /* ouro de traco sobre claro */
  /* --- tinta --- */
  --ink:#361A24; --ink-2:#78505E; --ink-3:#89606F;
  --luz:#FDF6F5; --luz-2:#EBCDD4;
  --linha:#EDD7D8; --linha-esc:#7D4055;

  --gutter:clamp(22px,5.4vw,72px);
  --w:min(1240px,100% - var(--gutter)*2);
  --w-largo:min(1440px,100% - var(--gutter)*2);
  --w-estreito:min(880px,100% - var(--gutter)*2);
  --r-curto:clamp(48px,6vw,86px);
  --r-medio:clamp(70px,9vw,132px);
  --r-longo:clamp(96px,12vw,184px);
  --arco:clamp(38px,5vw,78px);
  --r-foto:16px;
  --curva:cubic-bezier(.2,.8,.2,1);
  --s1:0 1px 2px rgba(92,43,61,.07);
  --s2:0 10px 30px -18px rgba(92,43,61,.30);
  --s3:0 30px 60px -40px rgba(92,43,61,.38);
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
html,body{overflow-x:clip}
body{margin:0;background:var(--creme);color:var(--ink);
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:18px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-weight:450;line-height:1.08;letter-spacing:-.006em;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--acao);outline-offset:3px;border-radius:3px}
.wrap{width:var(--w);margin-inline:auto}
.largo{width:var(--w-largo);margin-inline:auto}
.estreito{width:var(--w-estreito);margin-inline:auto}
.pad{padding-block:var(--r-medio)}
section{position:relative}

/* ---------- rotulo de secao ---------- */
.rotulo{display:flex;align-items:center;gap:14px;margin:0 0 18px;
  font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ink-2)}
.rotulo::before{content:"";width:34px;height:1px;background:var(--ouro-t);flex:none}
.escuro .rotulo{color:var(--luz-2)}
.escuro .rotulo::before{background:var(--ouro)}

/* ---------- botoes ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:17px 30px;border-radius:6px;background:var(--acao);color:#fff;
  text-decoration:none;font-weight:600;font-size:16px;letter-spacing:.008em;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 14px 28px -16px rgba(163,58,92,.85);
  transition:background .22s var(--curva),transform .18s var(--curva),box-shadow .22s var(--curva)}
.cta:hover{background:var(--acao-2);transform:translateY(-1px)}
.cta:active{transform:translateY(1px)}
.cta svg{width:19px;height:19px;flex:none;fill:currentColor}
.cta-vazado{display:inline-flex;align-items:center;gap:10px;padding:16px 0;
  text-decoration:none;font-weight:600;font-size:15.5px;color:var(--ink);
  border-bottom:1.5px solid var(--ouro-t);transition:gap .22s var(--curva),color .22s var(--curva)}
.cta-vazado:hover{gap:16px;color:var(--acao)}
.escuro .cta-vazado{color:var(--luz);border-bottom-color:var(--ouro)}
.escuro .cta-vazado:hover{color:var(--ouro)}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,38px);margin-top:34px}

/* ============================ cabecalho ============================ */
.topo{position:fixed;left:0;right:0;top:0;z-index:60;transition:background .34s var(--curva),
  box-shadow .34s var(--curva),padding .3s var(--curva)}
.topo .largo{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);padding-block:20px;
  transition:padding .3s var(--curva)}
.topo.fixo{background:color-mix(in srgb,var(--creme) 92%,transparent);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:var(--s1)}
.topo.fixo .largo{padding-block:12px}
.marca{display:flex;flex-direction:column;text-decoration:none;flex:none;line-height:1}
.marca .nome{font-family:"Newsreader",Georgia,serif;font-size:clamp(25px,2.5vw,31px);
  font-weight:500;letter-spacing:.14em;color:var(--luz);display:flex;align-items:baseline;
  transition:color .34s var(--curva),font-size .3s var(--curva)}
.topo.fixo .marca .nome{color:var(--ink);font-size:25px}
.gema{width:.26em;height:.26em;margin:0 .07em;flex:none;align-self:center;
  background:var(--ouro);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.marca .sub{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--luz-2);margin-top:8px;transition:color .34s var(--curva)}
.topo.fixo .marca .sub{color:var(--ink-2)}
.nav{display:none;margin-left:auto;gap:4px;align-items:center}
.nav a{padding:9px 13px;border-radius:4px;text-decoration:none;font-size:15px;font-weight:500;
  color:var(--luz-2);transition:color .2s var(--curva),background .2s var(--curva)}
.nav a:hover{color:var(--luz);background:rgba(255,255,255,.08)}
.topo.fixo .nav a{color:var(--ink-2)}
.topo.fixo .nav a:hover{color:var(--ink);background:rgba(163,58,92,.08)}
.topo .cta{padding:13px 22px;font-size:14.5px;margin-left:auto;white-space:nowrap}
.nav + .cta{margin-left:0}
@media (min-width:1060px){.nav{display:flex}}
.progresso{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acao);
  transform-origin:left;transform:scaleX(0)}

/* ============================== heroi ============================== */
.hero{background:var(--vinho);color:var(--luz);overflow:hidden;
  border-radius:0 0 50% 50%/0 0 var(--arco) var(--arco)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 18% 8%,rgba(194,124,138,.22),transparent 62%),
             radial-gradient(70% 60% at 96% 96%,rgba(201,162,106,.14),transparent 64%)}
.hero-grid{position:relative;display:grid;gap:clamp(30px,4vw,56px);align-items:center;
  padding-block:clamp(104px,11vw,150px) clamp(60px,8vw,120px)}
@media (min-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    padding-block:clamp(116px,10vw,152px) clamp(76px,8vw,128px)}
}
.hero h1{font-size:clamp(40px,6.1vw,80px);line-height:1.03;letter-spacing:-.015em;max-width:15ch}
.hero h1 em{font-style:italic;color:var(--ouro);font-weight:400}
.hero .lede{margin-top:26px;font-size:clamp(17px,1.4vw,19.5px);line-height:1.66;
  color:var(--luz-2);max-width:46ch}
.hero-foto{position:relative;justify-self:center;width:100%;max-width:560px}
.hero-foto img{width:100%;border-radius:220px 220px var(--r-foto) var(--r-foto);
  box-shadow:var(--s3)}
.hero-foto::after{content:"";position:absolute;inset:auto -16px -16px auto;width:62%;height:46%;
  border:1px solid var(--ouro);border-radius:0 0 var(--r-foto) 0;opacity:.5;z-index:-1}
.selos{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:34px}
.selo{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;
  color:var(--luz-2)}
/* separador DEPOIS de cada selo, menos o ultimo: ao quebrar a linha o ponto
   fica no fim da linha anterior, nao pendurado no comeco da seguinte */
.selo:not(:last-child)::after{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--ouro);flex:none;margin-left:8px}
@media (max-width:620px){.selos{gap:8px 14px}.selo{font-size:12.5px}}

/* ============================== sobre ============================== */
.sobre{background:var(--creme)}
.sobre-grid{display:grid;gap:clamp(34px,4.6vw,70px);align-items:center}
@media (min-width:920px){.sobre-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}}
.sobre-foto{position:relative;justify-self:center;width:100%;max-width:440px}
.sobre-foto img{width:100%;border-radius:999px 999px var(--r-foto) var(--r-foto)}
.assinatura{position:absolute;left:-10px;bottom:22px;display:grid;place-items:center;
  width:116px;height:116px;border:1px solid var(--ouro-t);border-radius:50%;
  background:var(--creme);font-family:"Parisienne",cursive;font-size:30px;color:var(--acao);
  line-height:1;padding-bottom:6px;box-shadow:var(--s1)}
.sobre h2{font-size:clamp(31px,3.9vw,52px);max-width:18ch}
.sobre .lede{margin-top:22px;font-size:clamp(17px,1.3vw,19px);color:var(--ink-2);max-width:52ch}
.sobre p{color:var(--ink-2);max-width:52ch}
.citacao{margin-top:30px;padding-left:22px;border-left:2px solid var(--ouro-t);
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(20px,2.1vw,27px);line-height:1.32;color:var(--ink);max-width:24ch}

/* ============================ metodos ============================ */
.metodos{background:var(--creme-2)}
.metodos-cabeca{text-align:center;max-width:46ch;margin-inline:auto}
.metodos-cabeca .rotulo{justify-content:center}
.metodos-cabeca h2{font-size:clamp(30px,3.7vw,50px)}
.metodos-cabeca p{margin-top:16px;color:var(--ink-2)}
.metodos-lista{display:grid;gap:clamp(26px,3vw,44px);margin-top:clamp(40px,5vw,68px)}
@media (min-width:900px){.metodos-lista{grid-template-columns:1fr 1fr}}
.metodo{background:var(--carta);border-radius:var(--r-foto);overflow:hidden;
  box-shadow:var(--s2);display:flex;flex-direction:column}
.metodo-foto{aspect-ratio:4/3;overflow:hidden;background:var(--nude)}
.metodo-foto img{width:100%;height:100%;object-fit:cover}
.metodo-corpo{padding:clamp(26px,2.8vw,40px);display:flex;flex-direction:column;flex:1}
.metodo .eta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:12.5px;font-weight:600;color:var(--acao);margin-bottom:12px}
.metodo .eta::before{content:"";width:6px;height:6px;background:var(--acao);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.metodo h3{font-size:clamp(25px,2.5vw,34px)}
.metodo .sub{margin-top:6px;font-size:15px;font-weight:600;color:var(--ink-3)}
.metodo p{margin-top:16px;font-size:16.5px;line-height:1.64;color:var(--ink-2)}
.passos{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--linha)}
.passos li{display:flex;align-items:baseline;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--linha);font-size:16px;color:var(--ink-2)}
.passos b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.metodo .fecho-linha{margin-top:auto;padding-top:22px;font-family:"Newsreader",Georgia,serif;
  font-style:italic;font-size:19px;color:var(--acao)}

/* =========================== tratamentos =========================== */
.trat{background:var(--vinho);color:var(--luz);overflow:hidden;
  border-radius:50% 50% 0 0/var(--arco) var(--arco) 0 0}
.trat::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(74% 54% at 88% 6%,rgba(194,124,138,.18),transparent 60%)}
.trat .wrap{position:relative}
.trat-cabeca{display:grid;gap:20px 40px;align-items:end;margin-bottom:clamp(34px,4vw,56px)}
@media (min-width:900px){.trat-cabeca{grid-template-columns:minmax(0,1fr) auto}}
.trat-cabeca h2{font-size:clamp(30px,3.7vw,50px);max-width:20ch}
.trat-lista{display:grid;gap:clamp(22px,2.6vw,34px)}
@media (min-width:860px){.trat-lista{grid-template-columns:repeat(3,1fr)}}
.card{background:color-mix(in srgb,var(--luz) 7%,transparent);border:1px solid var(--linha-esc);
  border-radius:var(--r-foto);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .4s var(--curva),border-color .4s var(--curva)}
@media (hover:hover){.card:hover{transform:translateY(-5px);border-color:var(--ouro)}}
.card-foto{aspect-ratio:4/3;overflow:hidden}
.card-foto img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--curva)}
@media (hover:hover){.card:hover .card-foto img{transform:scale(1.05)}}
.card-corpo{padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;flex:1}
.card h3{font-size:clamp(22px,2.1vw,28px);color:var(--luz)}
.card p{margin-top:12px;font-size:15.5px;line-height:1.62;color:var(--luz-2)}
.card ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.card li{font-size:13.5px;color:var(--luz-2);padding:5px 11px;border-radius:4px;
  background:rgba(255,255,255,.07);border:1px solid var(--linha-esc)}
.card .cta-vazado{margin-top:auto;padding-top:22px;align-self:flex-start}

/* =========================== tecnologias =========================== */
.tecno{background:var(--creme)}
.tecno-grid{display:grid;gap:clamp(32px,4vw,64px);align-items:center}
@media (min-width:960px){.tecno-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}}
.tecno h2{font-size:clamp(29px,3.5vw,47px);max-width:17ch}
.tecno .lede{margin-top:20px;color:var(--ink-2);max-width:48ch}
.equip{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--linha);counter-reset:eq}
.equip li{counter-increment:eq;display:flex;align-items:baseline;gap:16px;
  padding:14px 2px;border-bottom:1px solid var(--linha);
  font-size:17px;color:var(--ink);transition:padding-left .3s var(--curva)}
.equip li::before{content:counter(eq,decimal-leading-zero);font-size:12.5px;font-weight:600;
  color:var(--ouro-t);font-variant-numeric:tabular-nums;flex:none;min-width:2.2ch}
@media (hover:hover){.equip li:hover{padding-left:10px}}
.tecno-foto{position:relative;justify-self:center;width:100%;max-width:470px}
.tecno-foto img{width:100%;border-radius:var(--r-foto) var(--r-foto) 999px 999px}
.tecno-nota{margin-top:24px;font-size:14.5px;color:var(--ink-3)}

/* ============================== fecho ============================== */
.fecho{background:linear-gradient(170deg,var(--nude),var(--creme-2) 62%);overflow:hidden;
  border-radius:50% 50% 0 0/var(--arco) var(--arco) 0 0}
.fecho-grid{display:grid;gap:clamp(28px,3.4vw,54px);align-items:center}
@media (min-width:900px){.fecho-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.fecho h2{font-size:clamp(30px,3.8vw,52px);max-width:16ch}
.fecho p{margin-top:18px;color:var(--ink-2);max-width:44ch}
.fecho-cartao{background:var(--carta);border-radius:var(--r-foto);padding:clamp(26px,2.8vw,38px);
  box-shadow:var(--s2)}
.fecho-cartao .micro{margin-top:14px;font-size:14.5px;color:var(--ink-3)}
.quem{display:flex;align-items:center;gap:15px;margin-top:24px;padding-top:22px;
  border-top:1px solid var(--linha)}
.quem img{width:62px;height:62px;border-radius:50%;object-fit:cover;flex:none}
.quem b{display:block;font-size:16px;font-weight:600}
.quem span{display:block;font-size:14px;color:var(--ink-3)}

/* ============================== rodape ============================== */
.rodape{background:var(--vinho-2);color:var(--luz-2);padding:clamp(52px,6vw,84px) 0 34px;
  border-radius:var(--arco) var(--arco) 0 0}
.rodape-grid{display:grid;gap:clamp(30px,3.4vw,54px)}
@media (min-width:820px){.rodape-grid{grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr))}}
.rodape .marca .nome{color:var(--luz);font-size:26px}
.rodape .marca .sub{color:var(--luz-2)}
.rodape h4{margin:0 0 14px;font-size:14px;font-weight:600;color:var(--luz);letter-spacing:.02em}
.rodape p,.rodape a{font-size:15px;line-height:1.66;color:var(--luz-2);text-decoration:none}
.rodape a:hover{color:var(--ouro)}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rodape .tagline{margin-top:18px;max-width:34ch}
.sociais{display:flex;gap:12px;margin-top:20px}
.sociais a{display:grid;place-items:center;width:40px;height:40px;border-radius:5px;
  border:1px solid var(--linha-esc);transition:border-color .24s var(--curva),background .24s var(--curva)}
.sociais a:hover{border-color:var(--ouro);background:rgba(255,255,255,.06)}
.sociais svg{width:18px;height:18px;fill:currentColor}
.rodape-fim{margin-top:clamp(36px,4vw,56px);padding-top:24px;border-top:1px solid var(--linha-esc);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;font-size:14px}
.conforme{max-width:72ch;color:var(--ink-3);font-size:13.5px;line-height:1.6}

/* ============================ barra fixa ============================ */
.balcao{position:fixed;inset:auto 0 0 0;z-index:70;display:flex;align-items:center;gap:14px;
  padding:11px clamp(14px,3vw,22px);background:color-mix(in srgb,var(--vinho) 94%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--luz);
  border-top:1px solid var(--linha-esc);transform:translateY(102%);
  transition:transform .42s var(--curva)}
.balcao.abre{transform:translateY(0)}
@media (min-width:620px){
  .balcao{width:min(1100px,100% - 32px);margin-inline:auto;bottom:14px;border-radius:12px;
    box-shadow:var(--s3);border:1px solid var(--linha-esc)}
}
@media (max-width:619px){.balcao{inset:auto 10px 10px 10px;width:auto;border-radius:12px}}
.balcao .gancho{flex:1;min-width:0;font-size:14px;color:var(--luz-2)}
.balcao .gancho b{color:var(--luz);font-weight:600}
.balcao .cta{padding:11px 19px;font-size:14.5px}
.balcao .fechar{flex:none;width:38px;height:38px;display:grid;place-items:center;
  background:none;border:0;color:var(--luz-2);cursor:pointer;border-radius:5px;font-size:20px;
  line-height:1}
.balcao .fechar:hover{background:rgba(255,255,255,.1);color:var(--luz)}
@media (max-width:620px){.balcao .gancho{font-size:13px;line-height:1.3}}

/* ============================ revelacoes ============================ */
@keyframes entra{from{opacity:0;translate:0 24px}to{opacity:1;translate:none}}
@keyframes entra-esq{from{opacity:0;translate:-26px 10px}to{opacity:1;translate:none}}
@keyframes entra-dir{from{opacity:0;translate:26px 10px}to{opacity:1;translate:none}}
@keyframes progride{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion:no-preference){
  .rev{animation:entra linear both;animation-timeline:view();animation-range:entry 3% cover 26%}
  .rev-e{animation-name:entra-esq}
  .rev-d{animation-name:entra-dir}
 }}
@supports (animation-timeline:scroll()){
  .progresso{animation:progride linear both;animation-timeline:scroll(root block)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .progresso{animation-duration:auto!important}
  html{scroll-behavior:auto}
}

/* ============================== celular ============================== */
@media (max-width:980px){
  /* no celular o texto vem primeiro: com a foto na frente o botao caia para
     921px, abaixo da dobra de 812. */
  .hero-foto{max-width:420px}
  .hero h1{max-width:none}
  .hero-grid{padding-block:clamp(96px,22vw,130px) clamp(48px,9vw,86px)}
}
@media (min-width:701px) and (max-width:980px){
  .hero-foto{order:-1;max-width:460px}
}
.rot-curto{display:none}
@media (max-width:560px){
  .rot-longo{display:none}
  .rot-curto{display:inline}
}
@media (max-width:480px){
  .topo .largo{gap:10px}
  .marca .sub{font-size:9.5px;letter-spacing:.11em}
  .topo .cta{padding:11px 16px;font-size:13.5px}
  .topo .cta svg{width:17px;height:17px}
}
@media (max-width:360px){
  .marca .sub{font-size:8.6px;letter-spacing:.06em}
}
@media (max-width:620px){
  body{font-size:17px}
  .hero h1{font-size:clamp(32px,8.6vw,44px)}
  .assinatura{width:92px;height:92px;font-size:25px;left:-4px;bottom:14px}
  .rodape-fim{flex-direction:column}
}
.pular{position:absolute;left:-9999px;top:0;background:var(--acao);color:#fff;
  padding:12px 18px;z-index:200;border-radius:0 0 6px 0}
.pular:focus{left:0;top:0}