/* Pasticceria Malta - estilos */
:root{
  --blue:#0b1a3b;
  --gold:#d4af37;
  --cream:#fffaf3;
  --ink:#1b1b1b;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:#fff;
}
img{max-width:100%;display:block;height:auto}
.container{width:min(1100px, 92%); margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:#000;color:#fff;padding:.5rem 1rem;border-radius:.5rem;z-index:1000}

.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(11,26,59,.98), rgba(11,26,59,.92));
  color:#fff;
  border-bottom:2px solid var(--gold);
}
.nav{display:flex; align-items:center; gap:1rem; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.6rem; color:#fff; text-decoration:none; letter-spacing:.5px}
.logo{width:42px; height:42px; border-radius:.5rem; object-fit:cover}
.logo.small{width:32px; height:32px}
.brand span{font-family:'Playfair Display', serif; font-size:1.25rem}
.menu{display:flex; gap:1rem; list-style:none; margin:0; padding:0; margin-left:auto}
.menu a{color:#fff; text-decoration:none; padding:.5rem .75rem; border-radius:.5rem}
.menu a:hover{background:rgba(255,255,255,.08)}
.nav-toggle{display:none}
.hamburger{display:none; cursor:pointer; font-size:1.5rem;}

.hero{
  background: radial-gradient(80% 60% at 20% 20%, var(--cream), #fff 50%), linear-gradient(90deg, #fff 0%, #fff 50%, #f9fafc 100%);
  padding: clamp(2rem, 5vw, 4rem) 0;
}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:2rem}
.hero-copy h1{
  font-family:'Playfair Display', serif;
  font-size: clamp(2rem, 2.5vw + 1.2rem, 3.2rem);
  margin:.2rem 0 .5rem;
  color:var(--blue);
}
.accent{color:var(--gold)}
.hero-copy p{max-width:55ch; line-height:1.6}
.cta-row{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem}
.btn{display:inline-block; padding:.85rem 1.1rem; border-radius:.8rem; text-decoration:none; font-weight:600; border:2px solid transparent}
.btn.primary{background:var(--gold); color:#111}
.btn.ghost{border-color:var(--blue); color:var(--blue)}
.btn:hover{transform:translateY(-1px)}
.social .ig{display:inline-block; margin-top:.8rem; font-size:.95rem; color:var(--blue)}

.hero-media img{border-radius:1.25rem; box-shadow:0 20px 50px rgba(11,26,59,.15)}

.section{padding: clamp(2rem, 3.5vw, 3.5rem) 0}
.section h2{
  font-family:'Playfair Display', serif;
  font-size: clamp(1.6rem, 1.6vw + 1rem, 2.2rem);
  color:var(--blue);
  margin-top:0
}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1rem}
.card{background:#fff; border:1px solid #eee; border-radius:1rem; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.05)}
.card-body{padding:1rem}
.note{margin-top:1rem; color:#555}

.band{background:linear-gradient(180deg, #fff, #f7f8fb); border-block:1px solid #eee}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center}
.rounded{border-radius:1rem; box-shadow:0 16px 40px rgba(0,0,0,.08)}
.ticks{padding-left:1rem}
.ticks li{margin:.25rem 0}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.75rem; margin-top:1rem}
.grid img{border-radius:.8rem; aspect-ratio: 4/3; object-fit:cover}

.contact{display:grid; grid-template-columns: 1fr 1fr; gap:1.5rem; align-items:start}
.contact-card{background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem}
.contact-form{display:grid; gap:.8rem}
.contact-form input, .contact-form textarea{
  width:100%; padding:.8rem .9rem; border:1px solid #dcdcdc; border-radius:.7rem; font:inherit
}
.contact-form button{justify-self:start}

.site-footer{background:var(--blue); color:#fff; padding:2rem 0; margin-top:1rem}
.footer-inner{display:grid; grid-template-columns: 1.2fr 1fr; gap:1rem; align-items:center}
.footer-links{display:flex; gap:.8rem; flex-wrap:wrap; justify-content:flex-end}
.footer-links a{color:#fff; text-decoration:none; opacity:.9}
.credit{grid-column:1/-1; margin:0; text-align:center; opacity:.9}
.sg{opacity:.7}

.wa-float{
  position:fixed; right:18px; bottom:18px; width:56px; height:56px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--gold); color:#111; text-decoration:none; font-size:26px;
  box-shadow:0 10px 30px rgba(0,0,0,.2); z-index:60
}

@media (max-width: 880px){
  .hero-inner, .two-col, .contact, .footer-inner{grid-template-columns:1fr}
  .menu{position:absolute; right:0; top:60px; background:var(--blue); width:100%; flex-direction:column; padding:1rem; display:none}
  .nav-toggle:checked + .hamburger + .menu{display:flex}
  .hamburger{display:block; color:#fff}
}