/* =========================================================== Alegria Pet — folha de estilo única (cacheada em todo o site) =========================================================== */ :root{ --amarelo:#FFD400; --amarelo-forte:#FFC800; --amarelo-claro:#FFEA80; --azul:#1E3FBF; --azul-escuro:#152B8A; --laranja:#FF8C42; --rosa:#FF6B9D; --verde:#3ECF8E; --roxo:#8B5CF6; --branco:#FFFDF5; /* paleta variável por animal (sobrescrita em [data-pet]) */ --acento:var(--rosa); --suave:var(--amarelo-claro); --capa:linear-gradient(135deg,#FFD9A0,#FFB25E); } /* ---- identidade de cada animal ---------------------------------- --acento: tom profundo (passa 4.5:1 com texto branco) --suave : tom claro de fundo (texto azul continua legível) Vale no das páginas de espécie e em cada cartão do carrossel, que carrega o seu próprio data-pet. ---------------------------------------------------------------- */ [data-pet="cachorro"]{--acento:#C2410C;--suave:#FFEAD5;--capa:linear-gradient(135deg,#FFD9A0,#FFB25E);} [data-pet="gato"]{--acento:#6D28D9;--suave:#EDE4FF;--capa:linear-gradient(135deg,#D9C2FF,#B79CFF);} [data-pet="aves"]{--acento:#0F766E;--suave:#D3F3EC;--capa:linear-gradient(135deg,#C2F0DC,#7FE3B5);} [data-pet="coelho"]{--acento:#BE185D;--suave:#FFE0EC;--capa:linear-gradient(135deg,#FFC2D6,#FF8FB6);} [data-pet="peixe"]{--acento:#0369A1;--suave:#D8EEFA;--capa:linear-gradient(135deg,#BFEAF7,#7FD4EE);} [data-pet="hamster"]{--acento:#92400E;--suave:#FFEBC9;--capa:linear-gradient(135deg,#FFE3B0,#FFC670);} [data-pet="tartaruga"]{--acento:#3F6212;--suave:#E6F2CF;--capa:linear-gradient(135deg,#D6EFB8,#A8D97A);} [data-pet="porquinho"]{--acento:#9A3412;--suave:#FFE4D6;--capa:linear-gradient(135deg,#FFD3C2,#FFA98C);} *{margin:0;padding:0;box-sizing:border-box;} [hidden]{display:none!important;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ font-family:'Nunito',system-ui,sans-serif; background:var(--amarelo); color:var(--azul); overflow-x:hidden; } h1,h2,h3,h4,.font-display{font-family:'Fredoka','Nunito',system-ui,sans-serif;} a{color:inherit;text-decoration:none;} a:hover{color:var(--azul-escuro);} img{max-width:100%;display:block;} /* ---------- HEADER ---------- */ header{ position:sticky;top:0;z-index:100; background:rgba(255,212,0,.92); backdrop-filter:blur(8px); border-bottom:4px dashed var(--azul); } .nav{ max-width:1200px;margin:0 auto; display:flex;align-items:center;justify-content:space-between; padding:14px 24px;gap:16px;flex-wrap:wrap; } .logo{ display:flex;align-items:center;gap:10px; font-family:'Fredoka','Nunito',sans-serif;font-weight:700;font-size:1.6rem; color:var(--azul); } .logo .paw{ width:52px;height:52px; display:block;object-fit:contain; animation:spinPaw 6s ease-in-out infinite; } @keyframes spinPaw{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}} .nav-links{display:flex;gap:8px;list-style:none;flex-wrap:wrap;align-items:center;} .nav-links a{ font-weight:800;font-size:1rem;padding:10px 18px;border-radius:999px; transition:.25s;border:3px solid transparent;display:inline-block; } .nav-links a:hover{ background:var(--azul);color:var(--amarelo); transform:translateY(-3px) rotate(-2deg); box-shadow:0 6px 0 var(--azul-escuro); } .nav-links a.ativo{background:var(--azul);color:var(--amarelo);} .btn{ display:inline-block;font-family:'Fredoka','Nunito',sans-serif;font-weight:600; background:var(--azul);color:var(--amarelo)!important; padding:12px 28px;border-radius:999px;font-size:1.05rem; border:3px solid var(--azul-escuro); box-shadow:0 6px 0 var(--azul-escuro); transition:.2s;cursor:pointer; } .btn:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--azul-escuro);} .btn-branco{background:var(--branco);color:var(--azul)!important;border-color:var(--azul);box-shadow:0 6px 0 var(--azul);} .btn-branco:hover{box-shadow:0 2px 0 var(--azul);} .menu-toggle{ display:none;width:46px;height:46px;border-radius:50%; background:var(--azul);color:var(--amarelo);font-size:1.3rem; border:3px solid var(--azul-escuro);box-shadow:0 4px 0 var(--azul-escuro); cursor:pointer;font-family:'Fredoka','Nunito',sans-serif;place-items:center; } /* ---------- HERO ---------- */ .hero{ position:relative;min-height:88vh; display:flex;align-items:center;justify-content:center; text-align:center;padding:80px 24px 160px; background:radial-gradient(circle at 20% 20%, var(--amarelo-claro), var(--amarelo) 60%); overflow:hidden; } .hero-inner{position:relative;z-index:5;max-width:1040px;} .hero h1{ font-size:clamp(2.6rem,7vw,5.2rem);font-weight:700;line-height:1.05; color:var(--azul); text-shadow:4px 4px 0 rgba(255,255,255,.55); animation:popIn .8s cubic-bezier(.68,-.55,.27,1.55) both; } .hero h1 .destaque{color:var(--rosa);display:inline-block;animation:wiggle 2.4s ease-in-out infinite;} .hero h1 .junto{white-space:nowrap;} .hero h1 .logo-inline{ display:inline-block;vertical-align:-.22em; width:clamp(44px,6vw,76px);height:auto; animation:wiggle 3s ease-in-out infinite; } @keyframes wiggle{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.06)}} .hero p{ font-size:clamp(1.05rem,2.4vw,1.4rem);font-weight:700; max-width:620px;margin:22px auto 34px;color:var(--azul-escuro); animation:popIn .8s .2s cubic-bezier(.68,-.55,.27,1.55) both; } .hero .acoes{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;animation:popIn .8s .4s both;} @keyframes popIn{from{opacity:0;transform:scale(.6) translateY(30px)}to{opacity:1;transform:scale(1) translateY(0)}} /* nuvens flutuantes */ .nuvem{position:absolute;background:var(--branco);border-radius:999px;opacity:.9;z-index:1;animation:flutuar linear infinite;} .nuvem::before,.nuvem::after{content:"";position:absolute;background:var(--branco);border-radius:50%;} .nuvem.n1{width:180px;height:56px;top:18%;left:-200px;animation-duration:38s;} .nuvem.n1::before{width:70px;height:70px;top:-34px;left:28px;} .nuvem.n1::after{width:50px;height:50px;top:-22px;left:92px;} .nuvem.n2{width:130px;height:42px;top:58%;left:-160px;animation-duration:52s;animation-delay:-18s;opacity:.7;} .nuvem.n2::before{width:52px;height:52px;top:-26px;left:22px;} .nuvem.n2::after{width:36px;height:36px;top:-16px;left:66px;} .nuvem.n3{width:220px;height:64px;top:34%;left:-260px;animation-duration:64s;animation-delay:-40s;opacity:.55;} .nuvem.n3::before{width:84px;height:84px;top:-40px;left:36px;} .nuvem.n3::after{width:58px;height:58px;top:-26px;left:118px;} @keyframes flutuar{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 400px))}} /* patinhas caindo */ .patinha{position:absolute;top:-60px;font-size:2rem;z-index:1;animation:cair linear infinite;opacity:.35;} @keyframes cair{0%{transform:translateY(0) rotate(0deg)}100%{transform:translateY(110vh) rotate(360deg)}} .topo-blog .patinha{animation-name:cairCurto;} @keyframes cairCurto{0%{transform:translateY(0) rotate(0deg)}100%{transform:translateY(60vh) rotate(360deg)}} /* ---------- DIVISOR NUVEM (gerado por JS) ---------- */ .divisor-nuvem{ position:absolute;left:0;right:0;bottom:-1px;width:100%; line-height:0;z-index:1;pointer-events:none; } .divisor-nuvem svg{display:block;width:100%;} /* ---------- SEÇÕES ---------- */ section{padding:90px 24px;position:relative;} .container{max-width:1200px;margin:0 auto;position:relative;z-index:2;} .titulo-secao{text-align:center;font-size:clamp(1.9rem,4.5vw,3rem);font-weight:700;margin-bottom:14px;} .subtitulo-secao{text-align:center;font-weight:800;font-size:1.1rem;max-width:560px;margin:0 auto 50px;color:var(--azul-escuro);} .secao-branca{background:var(--branco);} .secao-clara{background:var(--amarelo-claro);} .com-divisor{padding-bottom:170px!important;} @media(max-width:640px){.com-divisor{padding-bottom:110px!important;}} /* ---------- CARROSSEL DE ANIMAIS ---------- */ .carrossel-area{position:relative;} .carrossel{ display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-padding:0 28px; padding:34px 28px 40px;margin:-26px -28px -14px; scrollbar-width:none;-ms-overflow-style:none; cursor:grab; } .carrossel::-webkit-scrollbar{display:none;} .carrossel.arrastando{cursor:grabbing;scroll-snap-type:none;} .carrossel.arrastando *{pointer-events:none;} .carrossel>*{flex:0 0 min(250px,74vw);scroll-snap-align:start;} .seta-carrossel{ display:none;position:absolute;top:calc(50% - 40px);z-index:6; width:56px;height:56px;border-radius:50%; background:var(--azul);color:var(--amarelo); border:3px solid var(--azul-escuro);box-shadow:0 6px 0 var(--azul-escuro); font-size:1.5rem;font-family:'Fredoka','Nunito',sans-serif;cursor:pointer; place-items:center;transition:.2s; } .seta-carrossel:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--azul-escuro);} .seta-carrossel[disabled]{opacity:.3;cursor:default;transform:none;box-shadow:0 6px 0 var(--azul-escuro);} .seta-carrossel.esq{left:-20px;} .seta-carrossel.dir{right:-20px;} @media(min-width:1024px){.seta-carrossel{display:grid;}} .trilha-progresso{ height:8px;border-radius:999px;background:rgba(30,63,191,.15); max-width:280px;margin:0 auto;overflow:hidden; } .trilha-progresso i{display:block;height:100%;border-radius:999px;background:var(--azul);width:30%;transition:.15s linear;} /* cartão de animal / categoria */ .card-categoria{ background:var(--branco);border:4px solid var(--azul);border-radius:34px; padding:32px 22px;text-align:center; transition:.3s cubic-bezier(.68,-.55,.27,1.55); box-shadow:0 8px 0 var(--azul); cursor:pointer;position:relative;display:block; } .card-categoria:hover{ transform:translateY(-10px) rotate(-2deg) scale(1.03); box-shadow:0 16px 0 var(--azul); background:var(--amarelo-claro);color:var(--azul); } .card-categoria .icone{font-size:3.4rem;margin-bottom:14px;display:inline-block;animation:balancar 3s ease-in-out infinite;} .card-categoria:nth-child(2n) .icone{animation-delay:.4s} .card-categoria:nth-child(3n) .icone{animation-delay:.8s} .card-categoria:nth-child(4n) .icone{animation-delay:1.2s} @keyframes balancar{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}} .card-categoria h3{font-size:1.4rem;margin-bottom:8px;} .card-categoria p{font-weight:700;font-size:.95rem;color:var(--azul-escuro);} .card-categoria .qtd{display:inline-block;margin-top:14px;background:var(--azul);color:var(--amarelo);font-weight:800;font-size:.85rem;padding:6px 16px;border-radius:999px;} /* cartão com identidade do animal */ .card-categoria[data-pet]{background:var(--suave);} .card-categoria[data-pet]:hover{background:var(--branco);box-shadow:0 16px 0 var(--acento);} .card-categoria[data-pet] .icone{ width:108px;height:108px;margin:0 auto 16px; display:grid;place-items:center;border-radius:50%; background:var(--branco);border:4px dashed var(--acento); overflow:hidden;padding:8px; } .card-categoria[data-pet] .icone img{ width:auto;height:auto;max-width:100%;max-height:100%;min-height:0;object-fit:contain; animation:balancar 3.4s ease-in-out infinite; } .card-categoria[data-pet]:nth-child(2n) .icone img{animation-delay:.5s} .card-categoria[data-pet]:nth-child(3n) .icone img{animation-delay:1s} .card-categoria[data-pet]:hover .icone{background:var(--suave);} .card-categoria[data-pet] .qtd{background:var(--acento);color:var(--branco);} .grid-categorias{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;} /* ---------- CARDS DE POST ---------- */ .grid-posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;} .card-post{ background:var(--branco);border:4px solid var(--azul);border-radius:30px; overflow:hidden;transition:.3s;box-shadow:0 8px 0 var(--azul); display:flex;flex-direction:column; } .card-post:hover{transform:translateY(-8px) rotate(1deg);box-shadow:0 14px 0 var(--azul);} .card-post .capa{height:180px;display:grid;place-items:center;font-size:4.5rem;position:relative;overflow:hidden;} .card-post .capa:not([data-pet]) img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;} .card-post .capa[data-pet]{background:var(--suave)!important;} /* Altura percentual num item de grid resolve contra a altura INTRÍNSECA da imagem, não contra o contêiner: 74% de 256px daria 189px dentro de uma caixa de 180px, e o overflow:hidden cortaria as patas. object-fit não salva, porque governa a pintura dentro da caixa, não o tamanho dela. Por isso: teto em max-height, nunca height percentual. */ .card-post .capa[data-pet] img{ position:relative;width:auto;height:auto; max-height:74%;max-width:80%;min-height:0; object-fit:contain; animation:pular 2.6s ease-in-out infinite; } .card-post .capa .emoji{animation:pular 2.2s ease-in-out infinite;} @keyframes pular{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .card-post .corpo{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1;} .tag{ align-self:flex-start;font-size:.75rem;font-weight:900;letter-spacing:.5px; padding:5px 14px;border-radius:999px;color:var(--branco);text-transform:uppercase; } .card-post h3{font-size:1.3rem;line-height:1.25;} .card-post p{font-weight:700;color:var(--azul-escuro);font-size:.95rem;flex:1;} .card-post .meta{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:800;margin-top:6px;gap:10px;flex-wrap:wrap;} .card-post .meta a{color:var(--azul);border-bottom:3px dashed var(--azul);transition:.2s;} .card-post .meta a:hover{background:var(--azul);color:var(--amarelo);border-radius:6px;} /* ---------- DICA DO DIA ---------- */ .dica-do-dia{ background:var(--azul);color:var(--branco);border-radius:44px; padding:56px 48px;display:flex;gap:36px;align-items:center; border:5px dashed var(--amarelo);flex-wrap:wrap;justify-content:center;text-align:center; } .dica-do-dia .foco{font-size:4.5rem;animation:girarBob 4s ease-in-out infinite;} @keyframes girarBob{0%,100%{transform:rotate(-10deg) scale(1)}50%{transform:rotate(10deg) scale(1.15)}} .dica-do-dia h2{color:var(--amarelo);font-size:clamp(1.6rem,3.5vw,2.4rem);margin-bottom:10px;} .dica-do-dia p{font-weight:700;font-size:1.1rem;max-width:640px;color:#EAF0FF;} .dica-do-dia .btn{margin-top:20px;} /* ---------- NEWSLETTER ---------- */ #newsletter{background:var(--azul);} .newsletter-box{ background:var(--branco);border:4px solid var(--azul);border-radius:40px; padding:50px 40px;text-align:center;box-shadow:0 10px 0 rgba(10,25,90,.5); max-width:720px;margin:0 auto; } .newsletter-box form{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap;} .newsletter-box input{ font-family:'Nunito',sans-serif;font-weight:700;font-size:1rem; padding:14px 22px;border-radius:999px;border:3px solid var(--azul); outline:none;min-width:min(320px,100%);color:var(--azul);background:var(--amarelo-claro); } .newsletter-box input:focus{background:#fff;box-shadow:0 0 0 4px rgba(30,63,191,.2);} /* ---------- RODAPÉ ---------- */ footer{background:var(--amarelo-forte);position:relative;padding-top:0;} footer .conteudo{ max-width:1200px;margin:0 auto;padding:60px 24px 30px; display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px; } footer h4{font-size:1.3rem;margin-bottom:16px;} footer p, footer li{font-weight:700;color:var(--azul-escuro);} footer ul{list-style:none;display:grid;gap:10px;} footer ul a{transition:.2s;display:inline-block;} footer ul a:hover{transform:translateX(6px);color:var(--rosa);} .social{display:flex;gap:12px;margin-top:14px;} .social a{width:46px;height:46px;border-radius:50%;background:var(--azul);display:grid;place-items:center;font-size:1.2rem;transition:.25s cubic-bezier(.68,-.55,.27,1.55);} .social a:hover{transform:translateY(-6px) rotate(15deg);background:var(--rosa);} footer .base{border-top:3px dashed var(--azul);text-align:center;padding:20px;font-weight:800;font-size:.9rem;color:var(--azul-escuro);} /* revelação no scroll (o JS marca html.js-ok; sem JS nada fica invisível) */ .js-ok .revelar{opacity:0;transform:translateY(40px);transition:.7s cubic-bezier(.2,.7,.3,1);} .revelar.visivel{opacity:1;transform:translateY(0);} /* ---------- TOPO DO BLOG ---------- */ .topo-blog{ text-align:center;padding:70px 24px 140px;position:relative;overflow:hidden; background:radial-gradient(circle at 80% 15%, var(--amarelo-claro), var(--amarelo) 60%); } .topo-blog h1{font-size:clamp(2.4rem,6vw,4.2rem);text-shadow:4px 4px 0 rgba(255,255,255,.55);animation:popIn .8s cubic-bezier(.68,-.55,.27,1.55) both;} .topo-blog p{font-weight:800;font-size:1.15rem;margin-top:14px;color:var(--azul-escuro);animation:popIn .8s .15s both;} /* ---------- LISTAGEM DO BLOG ---------- */ .secao-blog{background:var(--branco);padding:70px 24px 90px;position:relative;} .layout-blog{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start;} @media(max-width:900px){.layout-blog{grid-template-columns:1fr;}} .busca-filtros{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px;} .busca-filtros input{ flex:1;min-width:240px;font-family:'Nunito',sans-serif;font-weight:700;font-size:1rem; padding:14px 22px;border-radius:999px;border:3px solid var(--azul); background:var(--amarelo-claro);color:var(--azul);outline:none; } .busca-filtros input:focus{background:#fff;box-shadow:0 0 0 4px rgba(30,63,191,.2);} #filtros{margin-bottom:36px;} .chip{ font-weight:900;font-size:.85rem;padding:10px 18px;border-radius:999px; border:3px solid var(--azul);background:var(--branco);color:var(--azul); cursor:pointer;transition:.2s;font-family:'Nunito',sans-serif; } .chip:hover{transform:translateY(-3px);} .chip.ativo{background:var(--azul);color:var(--amarelo);} .grade-artigos{display:grid;gap:28px;} .artigo{ display:grid;grid-template-columns:190px 1fr;gap:0; background:var(--branco);border:4px solid var(--azul);border-radius:30px; overflow:hidden;transition:.3s cubic-bezier(.68,-.55,.27,1.55);box-shadow:0 8px 0 var(--azul); } .artigo:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 14px 0 var(--azul);} .artigo .capa{display:grid;place-items:center;font-size:3.6rem;min-height:170px;position:relative;overflow:hidden;} .artigo .capa:not([data-pet]) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .artigo .capa[data-pet]{background:var(--suave)!important;} .artigo .capa[data-pet] img{position:relative;inset:auto;width:auto;height:auto;max-height:70%;max-width:80%;min-height:0;object-fit:contain;} .artigo .corpo{padding:24px 26px;} .artigo .tag{display:inline-block;margin-bottom:10px;} .artigo h2{font-size:1.35rem;line-height:1.25;margin-bottom:8px;} .artigo p{font-weight:700;color:var(--azul-escuro);font-size:.95rem;} .artigo .rodape-artigo{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:.85rem;font-weight:800;flex-wrap:wrap;gap:8px;} .artigo .rodape-artigo a{color:var(--azul);border-bottom:3px dashed var(--azul);transition:.2s;padding:2px 4px;} .artigo .rodape-artigo a:hover{background:var(--azul);color:var(--amarelo);border-radius:6px;} @media(max-width:640px){ .artigo{grid-template-columns:1fr;} .artigo .capa{min-height:120px;font-size:3rem;} } .paginacao{display:flex;gap:10px;justify-content:center;margin-top:44px;flex-wrap:wrap;} .paginacao a,.paginacao button{ min-width:48px;height:48px;border-radius:50%;border:3px solid var(--azul); background:var(--branco);color:var(--azul);font-weight:900;font-size:1rem; cursor:pointer;transition:.2s;font-family:'Nunito',sans-serif;display:grid;place-items:center; } .paginacao a:hover,.paginacao button:hover{transform:translateY(-4px);} .paginacao .atual{background:var(--azul);color:var(--amarelo);} /* ---------- SIDEBAR ---------- */ .sidebar{display:grid;gap:26px;} @media(min-width:901px){.sidebar{position:sticky;top:110px;}} .widget{background:var(--amarelo-claro);border:4px solid var(--azul);border-radius:30px;padding:26px;box-shadow:0 8px 0 var(--azul);} .widget h3{font-size:1.25rem;margin-bottom:16px;display:flex;align-items:center;gap:8px;} .widget ul{list-style:none;display:grid;gap:12px;} .widget ul a{display:flex;justify-content:space-between;gap:10px;font-weight:800;transition:.2s;background:var(--branco);padding:10px 16px;border-radius:16px;border:2px solid transparent;} .widget ul a:hover{border-color:var(--azul);transform:translateX(6px);} .widget ul a span{opacity:.6;font-size:.85rem;} .widget.sobre{background:var(--azul);color:var(--branco);} .widget.sobre h3{color:var(--amarelo);} .widget.sobre p{font-weight:700;color:#EAF0FF;font-size:.95rem;} .widget .avatar{width:70px;height:70px;border-radius:50%;background:var(--amarelo);display:grid;place-items:center;font-size:2rem;margin-bottom:14px;animation:pular 2.4s ease-in-out infinite;} .widget.newsletter form{display:grid;gap:10px;} .widget.newsletter input{font-family:'Nunito',sans-serif;font-weight:700;padding:12px 18px;border-radius:999px;border:3px solid var(--azul);outline:none;color:var(--azul);} .widget.newsletter .btn{width:100%;text-align:center;} /* ---------- SLOTS DE ANÚNCIO (AdSense) ---------- */ .slot-anuncio{ display:block;position:relative;margin:38px 0; border-radius:24px;overflow:hidden; background:rgba(30,63,191,.04); } .slot-anuncio::before{ content:"Publicidade"; display:block;font-size:.65rem;font-weight:900;letter-spacing:1.5px; text-transform:uppercase;color:rgba(21,43,138,.45); text-align:center;padding:8px 0 6px; } .slot-anuncio ins{display:block;} /* alturas reservadas = zero salto de layout (bom para Core Web Vitals e AdSense) */ .slot-anuncio[data-formato="artigo"]{min-height:310px;} .slot-anuncio[data-formato="lateral"]{min-height:640px;} .slot-anuncio[data-formato="horizontal"]{min-height:130px;} .slot-vazio{ border:3px dashed rgba(30,63,191,.3);border-radius:24px; display:grid;place-items:center;text-align:center;padding:26px; font-weight:800;font-size:.9rem;color:rgba(21,43,138,.55); min-height:inherit; } .slot-anuncio[data-formato="artigo"] .slot-vazio{min-height:250px;} .slot-anuncio[data-formato="lateral"] .slot-vazio{min-height:580px;} .slot-anuncio[data-formato="horizontal"] .slot-vazio{min-height:90px;} .widget-anuncio{background:transparent;border:0;box-shadow:none;padding:0;} /* ---------- CAPA COMPOSTA DO ARTIGO --------------------------- Resolve o problema de 12 mil imagens: nenhuma imagem por post. A capa é montada com 4 peças reutilizáveis 1. cor da espécie (--suave / --acento) 2. padrão de fundo conforme o GRUPO editorial (puro CSS) 3. mascote da espécie (8 webp de ~70 KB, cacheados no site todo) 4. a ENTIDADE do catálogo em tipografia grande ("Cereja") Se um dia existir a arte da entidade, ela entra no lugar do selo sem mexer em mais nada. -------------------------------------------------------------- */ .capa-artigo.capa-composta{ position:relative;overflow:hidden; border:4px solid var(--azul);border-radius:30px; box-shadow:0 8px 0 var(--azul); aspect-ratio:2.5/1;margin-bottom:34px; background:var(--suave); display:grid;grid-template-columns:1.25fr .9fr; grid-template-rows:minmax(0,1fr); place-items:end start; font-size:initial; padding:clamp(20px,3.4vw,38px);gap:12px; } /* padrões por grupo editorial */ .capa-composta[data-grupo]::before{ content:"";position:absolute;inset:0;z-index:0;opacity:.5; } .capa-composta[data-grupo="alimentacao"]::before{ background-image:radial-gradient(circle closest-side, color-mix(in oklab, var(--acento) 30%, transparent) 98%, transparent 100%); background-size:26px 26px;background-position:0 0; } .capa-composta[data-grupo="saude"]::before{ background:repeating-linear-gradient(-45deg, color-mix(in oklab, var(--acento) 18%, transparent) 0 14px, transparent 14px 34px); } .capa-composta[data-grupo="racas"]::before{ background:repeating-linear-gradient(90deg, color-mix(in oklab, var(--acento) 16%, transparent) 0 8px, transparent 8px 44px); } .capa-composta[data-grupo="comportamento"]::before{ background-image:radial-gradient(circle closest-side, transparent 68%, color-mix(in oklab, var(--acento) 26%, transparent) 70% 98%, transparent 100%); background-size:64px 64px; } .capa-composta[data-grupo="cuidados"]::before{ background:repeating-linear-gradient(0deg, color-mix(in oklab, var(--acento) 15%, transparent) 0 12px, transparent 12px 38px); } .capa-texto{position:relative;z-index:2;display:grid;gap:6px;justify-self:start;align-self:end;min-height:0;} .capa-chapeu{ font-family:'Nunito',sans-serif;font-weight:900; font-size:clamp(.7rem,1.5vw,.88rem);letter-spacing:1.6px;text-transform:uppercase; color:var(--branco);background:var(--acento); padding:6px 16px;border-radius:999px;justify-self:start; } .capa-entidade{ font-family:'Fredoka','Nunito',sans-serif;font-weight:700; font-size:clamp(2rem,6.6vw,4.4rem);line-height:.95;color:var(--azul); text-shadow:3px 3px 0 var(--branco); overflow-wrap:anywhere;hyphens:auto; } /* entidade longa ("Ansiedade de separação no Persa") pede tipo menor */ .capa-composta[data-ent="longa"] .capa-entidade{font-size:clamp(1.45rem,3.6vw,2.5rem);line-height:1.05;} .capa-pergunta{font-weight:900;font-size:clamp(.85rem,1.9vw,1.1rem);color:var(--azul-escuro);text-wrap:pretty;} /* resposta longa (custo, expectativa de vida) em tipo menor */ .capa-pergunta[data-linha="longa"]{font-size:clamp(.78rem,1.35vw,.95rem);font-weight:800;line-height:1.35;} .capa-mascote{ position:relative;z-index:2;align-self:end;justify-self:center; width:auto;max-width:100%; height:auto;max-height:100%;min-height:0; object-fit:contain;object-position:bottom center; filter:drop-shadow(0 8px 0 rgba(21,43,138,.15)); } @media(max-width:560px){ .capa-artigo.capa-composta{grid-template-columns:1fr;align-content:end;aspect-ratio:16/9;} /* coluna estreita: justificar abre buracos entre as palavras */ .corpo-artigo p,.corpo-artigo li{text-align:left;} .capa-mascote{position:absolute;right:-5%;bottom:-4%;width:42%;max-width:none;max-height:72%;} .capa-texto{max-width:56%;justify-self:start;} .capa-entidade{font-size:clamp(1.5rem,7.4vw,2.4rem);} .capa-composta[data-ent="longa"] .capa-entidade{font-size:clamp(1.15rem,5vw,1.6rem);} /* no celular a capa é estreita: a resposta longa fica só no quadro "Resposta rápida" da lateral, com o texto inteiro */ .capa-pergunta[data-linha="longa"]{display:none;} } /* ilustrações de mascote: sempre inteiras, nunca recortadas. Vale para a capa do post, os cartões e a listagem. */ img.capa-mascote, .card-post .capa[data-pet] img, .artigo .capa[data-pet] img, .card-categoria[data-pet] .icone img, .hub-topo .mascote img{object-fit:contain;} .trilha{ max-width:1200px;margin:0 auto;padding:0 0 18px; display:flex;gap:8px;flex-wrap:wrap;font-weight:800;font-size:.85rem;color:var(--azul-escuro); } .trilha a{border-bottom:2px dashed var(--azul);} .artigo-topo{ position:relative;overflow:hidden;padding:48px 24px 130px; background:radial-gradient(circle at 85% 10%, var(--amarelo-claro), var(--amarelo) 65%); } .artigo-topo .container{max-width:860px;} .artigo-topo h1{ font-size:clamp(2rem,5.2vw,3.4rem);line-height:1.1; text-shadow:3px 3px 0 rgba(255,255,255,.5); animation:popIn .7s cubic-bezier(.68,-.55,.27,1.55) both; } .artigo-topo .resumo{font-weight:800;font-size:clamp(1rem,2.2vw,1.2rem);color:var(--azul-escuro);margin-top:16px;max-width:680px;} .artigo-meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:22px;font-weight:800;font-size:.9rem;color:var(--azul-escuro);} .artigo-meta .autor{display:flex;align-items:center;gap:10px;} .artigo-meta .autor .foto{width:48px;height:48px;display:block;object-fit:contain;} .layout-artigo{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start;} @media(max-width:980px){.layout-artigo{grid-template-columns:minmax(0,1fr);}} .capa-artigo{ border:4px solid var(--azul);border-radius:30px;overflow:hidden; box-shadow:0 8px 0 var(--azul);background:var(--capa); aspect-ratio:16/9;display:grid;place-items:center;font-size:4.5rem;margin-bottom:34px; } /* só a capa fotográfica preenche a moldura. O mascote ilustrado nunca: cover recortaria as laterais (cauda, patas) dentro da caixa. */ .capa-artigo>img:not(.capa-mascote){width:100%;height:100%;object-fit:cover;} .sumario{ background:var(--amarelo-claro);border:4px solid var(--azul);border-radius:26px; padding:22px 26px;margin-bottom:34px;box-shadow:0 8px 0 var(--azul); } .sumario h2{font-size:1.15rem;margin-bottom:12px;} .sumario ol{margin:0;padding-left:22px;display:grid;gap:8px;font-weight:800;} .sumario a{border-bottom:2px dashed var(--azul);} .corpo-artigo{font-size:clamp(1.05rem,1.15vw,1.15rem);line-height:1.75;color:var(--azul-escuro);font-weight:600;text-wrap:pretty;} .corpo-artigo p,.corpo-artigo li{text-align:justify;hyphens:auto;-webkit-hyphens:auto;} .corpo-artigo>*+*{margin-top:22px;} .corpo-artigo h2{ font-family:'Fredoka','Nunito',sans-serif;color:var(--azul); font-size:clamp(1.5rem,3.2vw,2rem);line-height:1.2;margin-top:44px; scroll-margin-top:96px; } .corpo-artigo h3{color:var(--azul);font-size:1.3rem;margin-top:32px;scroll-margin-top:96px;} .corpo-artigo strong{color:var(--azul);} .corpo-artigo ul,.corpo-artigo ol{padding-left:24px;display:grid;gap:12px;} .corpo-artigo a{color:var(--azul);font-weight:800;border-bottom:2px dashed var(--azul);} .corpo-artigo a:hover{background:var(--azul);color:var(--amarelo);border-radius:6px;} .corpo-artigo blockquote{ background:var(--amarelo-claro);border:4px dashed var(--azul);border-radius:26px; padding:24px 26px;font-weight:700;color:var(--azul-escuro); } .caixa-destaque{ background:var(--azul);color:#EAF0FF;border:5px dashed var(--amarelo); border-radius:30px;padding:28px 30px;font-weight:700; } .caixa-destaque h3{color:var(--amarelo);margin-bottom:10px;font-size:1.3rem;} .tags-artigo{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px;} .tags-artigo a{ font-weight:800;font-size:.85rem;padding:8px 16px;border-radius:999px; border:3px solid var(--azul);background:var(--branco);color:var(--azul);transition:.2s; } .tags-artigo a:hover{background:var(--azul);color:var(--amarelo);} .compartilhar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:28px;font-weight:900;} .compartilhar a{ width:48px;height:48px;border-radius:50%;background:var(--azul);color:var(--amarelo); display:grid;place-items:center;font-size:1.1rem;transition:.25s cubic-bezier(.68,-.55,.27,1.55); } .compartilhar a:hover{transform:translateY(-5px) rotate(10deg);background:var(--acento);color:var(--branco);} /* ---------- HUB DO ANIMAL ---------- */ .hub-topo{ position:relative;overflow:hidden;text-align:center; padding:60px 24px 140px; background:radial-gradient(circle at 25% 15%, var(--suave), var(--amarelo) 62%); } .hub-topo .mascote{ display:inline-grid;place-items:center; width:clamp(150px,30vw,210px);height:clamp(150px,30vw,210px); border-radius:50%;background:var(--branco); border:6px dashed var(--acento); margin-bottom:18px;padding:14px;overflow:hidden; animation:balancar 3.4s ease-in-out infinite; } .hub-topo .mascote img{width:auto;height:auto;max-width:100%;max-height:100%;min-height:0;object-fit:contain;} .hub-topo h1{font-size:clamp(2.2rem,6vw,4rem);text-shadow:4px 4px 0 rgba(255,255,255,.55);} .hub-topo h1 em{font-style:normal;color:var(--acento);} .hub-topo p{font-weight:800;font-size:clamp(1rem,2.2vw,1.2rem);max-width:620px;margin:16px auto 0;color:var(--azul-escuro);} .fitas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px;} .fita{background:var(--acento);color:var(--branco);font-weight:900;font-size:.85rem;padding:8px 18px;border-radius:999px;border:3px solid var(--azul-escuro);} body[data-pet] .secao-clara{background:var(--suave);} body[data-pet] .artigo-topo{background:radial-gradient(circle at 85% 10%, var(--suave), var(--amarelo) 65%);} body[data-pet] .sumario{background:var(--suave);} .grid-racas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px;} .card-raca{ background:var(--branco);border:4px solid var(--azul);border-radius:26px; padding:22px 20px;box-shadow:0 7px 0 var(--azul);transition:.25s cubic-bezier(.68,-.55,.27,1.55); display:grid;gap:6px; } .card-raca:hover{transform:translateY(-8px) rotate(-1.5deg);box-shadow:0 14px 0 var(--acento);background:var(--suave);color:var(--azul);} .card-raca h3{font-size:1.15rem;} .card-raca span{font-weight:800;font-size:.82rem;color:var(--azul-escuro);} .card-raca b{font-weight:900;font-size:.75rem;color:var(--branco);background:var(--acento);border-radius:999px;padding:4px 12px;justify-self:start;margin-top:4px;} .grid-temas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;} .card-tema{ background:var(--suave);border:4px solid var(--azul);border-radius:28px; padding:26px 24px;box-shadow:0 8px 0 var(--azul);transition:.25s;display:grid;gap:8px; } .card-tema:hover{transform:translateY(-6px);box-shadow:0 14px 0 var(--acento);background:var(--branco);color:var(--azul);} .card-tema .icone{font-size:2.4rem;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:var(--branco);border:3px solid var(--acento);} .card-tema:hover .icone{background:var(--suave);} .card-tema h3{font-size:1.2rem;} .card-tema p{font-weight:700;font-size:.92rem;color:var(--azul-escuro);} /* ---------- MOBILE ---------- */ @media(max-width:720px){ .menu-toggle{display:grid;} .nav{flex-wrap:nowrap;position:relative;padding:12px 16px;} .nav-links{ display:none;position:absolute;top:100%;left:0;right:0; background:var(--amarelo);flex-direction:column;gap:6px;align-items:stretch; padding:14px 18px 20px;border-bottom:4px dashed var(--azul);z-index:99; } .nav-links.aberto{display:flex;} .nav-links a{display:block;text-align:center;} } @media(max-width:640px){ .dica-do-dia{padding:40px 24px;} section{padding:64px 18px;} .secao-blog{padding:56px 18px 70px;} .layout-artigo{gap:34px;} }