@charset "UTF-8";
/* ProtectMe - hero da home com a foto (portal.jsp). Carregado só na home, depois de home.1.9.css:
   a classe .hero também existe em outras páginas que usam home.1.9.css. */

.hero{background:#41698a image-set(url(../img/home/hero-senior-desktop-1920.webp) type("image/webp"),url(../img/home/hero-senior-desktop-1920.jpg) type("image/jpeg")) 78% 100%/auto 100% no-repeat;color:#fff;padding:72px 0 104px}
.hero .w{grid-template-columns:minmax(0,720px)}
.hero h1 em{color:#fdba74}
.hero .sub{color:#e4edf4}
.hero .trust,.hero .trust svg{color:#fff}
/* :hover/:focus explícitos: "body.pm-site a:hover{color:inherit}" (home.css) faria o texto herdar o branco do hero, e o Bootstrap sublinharia */
.hero .op,.hero .op:hover,.hero .op:focus{color:var(--ink);text-decoration:none}
.seguradoras{padding-top:32px}

/* telas largas: a foto passa a cobrir a largura toda, sem mostrar as bordas da imagem */
@media (min-width:1600px){
 .hero{background-size:cover;background-position:78% 35%}
}

/* telas médias: conteúdo mais estreito e foto mais à direita, para os cartões não cobrirem o rosto */
@media (min-width:961px) and (max-width:1279px){
 .hero{background-position:30% 100%}
 .hero .w{grid-template-columns:minmax(0,620px)}
}

/* celular e tablet: conteúdo primeiro, foto abaixo dos cartões, surgindo do azul */
@media (max-width:960px){
 .hero{background:#41698a;padding:36px 0 0}
 .hero:after{content:"";display:block;height:72vw;max-height:440px;margin-top:24px;background:image-set(url(../img/home/hero-senior-mobile-800.webp) type("image/webp"),url(../img/home/hero-senior-mobile-800.jpg) type("image/jpeg")) 50% 18%/cover;-webkit-mask:linear-gradient(transparent,#000 30%);mask:linear-gradient(transparent,#000 30%)}
}

/* seta em todas as escolhas: a do carro (escolha principal) é laranja cheia; moto e consórcio têm a seta
   vazada, com borda e seta na cor de cada produto, para mostrar que também são clicáveis */
.hero .op{--cor:var(--act);--pastel:#ffe4cc}
.hero .op.moto{--cor:#1d4ed8;--pastel:#dbe7ff}
.hero .op.casa{--cor:#7e22ce;--pastel:#efdcff}
/* seta sem círculo (2026-10-26): sem fundo e sem borda, traço grosso na cor do produto; no hover ela avança */
.hero .op .ir,.hero .op .ir.lin{background:transparent;border:0;color:var(--cor)}
.hero .op .ir svg{width:30px;height:30px;stroke-width:4.4;overflow:visible;transition:transform .3s var(--ease)}
.hero .op .ir svg,.hero .op .ir svg path{stroke:var(--cor)!important}
.hero .op:hover .ir svg{transform:translateX(4px)}

/* sem borda, todos do mesmo tamanho (inclusive o Carro, que antes tinha borda de destaque) */
.hero .op,.hero .op.ativa{border:0}
.hero .opcoes{grid-auto-rows:1fr}

/* formato arredondado (2026-10-26): ícone dentro de um círculo cheio na cor do produto */
.hero .op{border-radius:28px;box-shadow:0 14px 30px -18px rgba(15,35,55,.55)}
.hero .op .ic{width:60px;height:60px;padding:11px 6px;border-radius:50%;background:var(--pastel);color:var(--cor);box-sizing:border-box;stroke-width:3.6}

/* celular: pílulas compactas, para as três caberem na tela junto com o título */
@media (max-width:600px){
 .hero{padding-top:24px}
 .hero h1{font-size:clamp(32px,9.6vw,40px)}
 .hero .sub{font-size:16px;margin:12px 0 20px}
 .hero .opcoes{gap:10px}
 .hero .op{gap:12px;padding:6px 8px 6px 6px;border-radius:999px}
 .hero .op .ic{width:48px;height:48px;padding:9px 4px;stroke-width:4}
 .hero .op > div{flex:1;padding-right:44px;line-height:1.25}
 .hero .op b{font-size:18px}
 .hero .op span{font-size:13px;line-height:1.3}
 .hero .op .ir{width:36px;height:36px;right:8px;bottom:auto;top:50%;margin-top:-18px}
 .hero .op .ir svg{width:28px;height:28px}
 .hero .trust{margin-top:14px;gap:6px 16px;font-size:14px}
}
/* celulares pequenos (até 374 px, ex.: iPhone SE): só o nome do produto, para os três botões caberem na tela */
@media (max-width:374px){
 .hero h1{font-size:30px}
 .hero .sub{font-size:15px;margin:10px 0 16px}
 .hero .op > div > span,.hero .op > div > br{display:none}
 .hero .op .ic{width:40px;height:40px;padding:7px 3px}
}