/* Hotel Elite Pet — estilos modernos e responsivos */
:root{
  --bg:#fffefc;
  --text:#1f2937;
  --muted:#6b7280;
  --brand:#ffb703;
  --brand-2:#fb8500;
  --accent:#8ecae6;
  --radius:20px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

.container{width:min(1100px, 92%); margin-inline:auto}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:color-mix(in srgb, white 80%, transparent);
  border-bottom:1px solid #eee;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; font-size:1.1rem}
.brand .brand-icon{width:32px; height:32px}
.nav a{margin:0 10px; text-decoration:none; color:var(--muted); font-weight:700}
.nav a:hover{color:var(--text)}
.btn-cta{
  background:var(--brand-2); border:none; color:white; padding:10px 16px; border-radius:999px; cursor:pointer; font-weight:800;
  box-shadow:var(--shadow);
}
.btn-cta:hover{filter:brightness(0.95)}

.hero{
  background: radial-gradient(1000px 500px at 80% -10%, #ffe1a8 0%, transparent 60%), 
              radial-gradient(1000px 500px at 0% 100%, #cdeffd 0%, transparent 60%);
  padding: 56px 0 40px;
}
.hero-inner{padding:30px 0 10px}
.hero h1{font-size: clamp(1.8rem, 2vw + 1rem, 3rem); line-height:1.15; margin:0 0 10px; font-weight:900}
.hero p{color:var(--muted); margin:0 0 20px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.btn-primary,.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-weight:800;
  padding:12px 18px; border-radius:14px; box-shadow:var(--shadow)
}
.btn-primary{background:var(--brand); color:#0b132b}
.btn-primary:hover{filter:brightness(0.97)}
.btn-secondary{background:white; border:1px solid #eee; color:var(--text)}
.btn-secondary:hover{background:#f9fafb}

.section{padding:42px 0}
.section-head h2{font-size: clamp(1.4rem, 1vw + 1rem, 2rem); margin:0 0 6px}
.section-head p{color:var(--muted); margin:0 0 16px}

.products{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:10px}
.card{
  background:white; border:1px solid #f1f5f9; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}
.product .thumb{
  aspect-ratio: 3/2; border-radius:16px; overflow:hidden; background:#f9fafb; display:grid; place-items:center; margin-bottom:12px
}
.product img{width:100%; height:100%; object-fit:cover}
.product .title{font-size:1.05rem; font-weight:800; margin:4px 0}
.product .price{color:#065f46; font-weight:800}
.product .actions{display:flex; gap:10px; margin-top:10px}
.product .btn-buy{
  flex:1; text-align:center; text-decoration:none; background:var(--brand-2); color:white; padding:10px 14px; border-radius:12px; font-weight:900
}
.product .btn-buy:hover{filter:brightness(0.95)}

.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px}
.hint{color:var(--muted); font-size:.9rem}

.contact{background:white; border:1px solid #f1f5f9; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.contact .grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.contact label{display:flex; flex-direction:column; gap:6px; font-weight:700}
.contact input,.contact textarea{
  border:1px solid #e5e7eb; border-radius:10px; padding:12px; font:inherit
}
.contact button{margin-top:8px}

.site-footer{padding:28px 0; border-top:1px solid #eee; margin-top:30px}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px}
.footer-inner a{color:var(--muted); text-decoration:none}
.footer-inner a:hover{color:var(--text)}

@media (max-width:640px){
  .contact .grid{grid-template-columns:1fr}
}

/* Botão flutuante do WhatsApp */
.whatsapp-float{
  position:fixed;
  bottom:20px;
  right:20px;
  width:64px;
  height:64px;
  background:#25D366;
  border-radius:50%;
  box-shadow:0 4px 10px rgba(0,0,0,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  transition:transform 0.2s, opacity 0.2s;
}
.whatsapp-float:hover{
  transform:scale(1.08);
  opacity:0.9;
}
.whatsapp-float img{
  width:34px;
  height:34px;
  filter:invert(1);
}


/* Selo no rodapé (discreto) */
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.footer-badge img{
  width:120px; height:auto; display:block; opacity:0.9;
  filter: saturate(1.05);
}
@media (max-width:640px){
  .footer-badge img{width:90px}
}

/* Logo oficial no cabeçalho */
.brand .brand-logo{
  height:42px;
  width:auto;
  display:block;
  border-radius:8px;
  object-fit:contain;
  background:white; /* para destacar em fundos claros do header blur */
  padding:2px 6px;
  box-shadow: var(--shadow);
  border:1px solid #f1f5f9;
  margin-right:6px;
}
@media (max-width:640px){
  .brand .brand-logo{ height:36px; padding:2px 4px }
  .brand span{ font-size:1rem }
}