/* ZEH0_001_SITE_INSTITUCIONAL, casa.css. v11 a v15: video de A casa, Boas-vindas, etiquetas e abertura com zoom. Carregar na ordem das paginas. */
/* ===== v11: video em "A casa" (9:16, efeito de camera, som no toque) e logo do topo 15% maior no computador ===== */
.mani .foto.casa-vid{aspect-ratio:9/16}
.casa-cx video{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .6s}
.casa-cx.vivo video{opacity:1}
.casa-cx.vivo.tem-som{cursor:pointer}
.rec,.casa-som{display:none}
.casa-cx.vivo .rec{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .5s}
.casa-cx.som .rec{opacity:0}
.rec i{position:absolute;width:26px;height:26px;border:0 solid rgba(255,255,255,.85)}
.rec i:nth-child(1){top:16px;left:16px;border-top-width:2px;border-left-width:2px}
.rec i:nth-child(2){top:16px;right:16px;border-top-width:2px;border-right-width:2px}
.rec i:nth-child(3){bottom:16px;left:16px;border-bottom-width:2px;border-left-width:2px}
.rec i:nth-child(4){bottom:16px;right:16px;border-bottom-width:2px;border-right-width:2px}
.rec b{position:absolute;top:28px;left:32px;display:flex;align-items:center;gap:8px;font-weight:500;font-size:.72rem;letter-spacing:.22em;line-height:1;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.rec b::before{content:"";width:10px;height:10px;border-radius:50%;background:#e02424;box-shadow:0 0 8px rgba(224,36,36,.8);animation:pisca 1.2s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.casa-cx.vivo .casa-som{display:grid;place-items:center;position:absolute;left:30px;bottom:30px;z-index:2;width:46px;height:46px;border-radius:50%;background:rgba(10,9,8,.6);border:1px solid rgba(236,220,180,.55);color:var(--ouro-claro);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.casa-som svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.casa-som .on,.casa-cx.som .casa-som .off{display:none}
.casa-cx.som .casa-som .on{display:block}
.casa-som:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}
@media(min-width:960px){
  .mani .foto.casa-vid{width:70.3%;justify-self:center}
  .logo img.lg{height:55px}
  header.rolou .logo img.lg{height:47px}
  footer .logo img.lg{height:46px}
}

/* ===== v12: efeito de camera fica com o som ligado, volume da musica e nome sobre a foto em Boas-vindas ===== */
.casa-cx.som .rec{opacity:1}
.casa-vol{display:none}
.casa-cx.vivo.som.tem-vol .casa-vol{display:block;position:absolute;left:88px;bottom:30px;z-index:2;width:calc(54% - 100px);height:46px;margin:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.casa-vol::-webkit-slider-runnable-track{height:2px;background:var(--ouro-claro);box-shadow:0 0 8px rgba(0,0,0,.7)}
.casa-vol::-moz-range-track{height:2px;background:var(--ouro-claro);box-shadow:0 0 8px rgba(0,0,0,.7)}
.casa-vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-8px;border-radius:50%;border:0;background:var(--ouro);box-shadow:0 2px 8px rgba(0,0,0,.6)}
.casa-vol::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:0;background:var(--ouro);box-shadow:0 2px 8px rgba(0,0,0,.6)}
.casa-vol:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
.arco-r::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 60%,rgba(10,9,8,.9));pointer-events:none}
.arco-nome{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;font-family:var(--serif);font-size:1.9rem;line-height:1.1;color:var(--ouro-claro)}

/* ===== v13: foto de Boas-vindas com respiracao lenta e movimento leve na rolagem ===== */
.arco-r img{height:120%;translate:0 -10%;will-change:transform;transition:none;animation:respiraS 12s ease-in-out infinite}
@keyframes respiraS{0%,100%{scale:1}50%{scale:1.06}}
@media(prefers-reduced-motion:reduce){.arco-r img{height:100%;translate:none}}

/* ===== v14: etiquetas "Antes" e "Depois" mais destacadas ===== */
.comp .tag{font-size:.86rem;font-weight:500;letter-spacing:.26em;line-height:1;padding:11px 18px;box-shadow:4px 5px 14px -3px rgba(0,0,0,.7);backdrop-filter:none;-webkit-backdrop-filter:none}
.comp .tag.a{background:var(--preto);color:var(--ouro-claro);border:1px solid var(--ouro)}
.comp .tag.d{background:linear-gradient(120deg,var(--ouro-escuro),var(--ouro) 45%,var(--ouro-claro));color:#17130c;border:1px solid transparent}

/* ===== v15: abertura com impulso e super zoom no fim (mesmo tempo total; a troca de tela continua aos 2,3 s) ===== */
#abre{overflow:hidden}
#abre .cx{will-change:transform;animation:abreZoom 1.5s linear 1.45s forwards}
@keyframes abreZoom{
  0%{transform:scale(1);animation-timing-function:ease-out}
  14%{transform:scale(.86);animation-timing-function:cubic-bezier(.45,0,.9,.6)}
  100%{transform:scale(12)}
}