/* =========================================================
   Panini Panificadora — folha de estilos
   Fonte: Museo (300 e 700), hospedada localmente em /fonts
   ========================================================= */

@font-face{
  font-family:'Museo';
  src:url('../fonts/Museo300-Regular.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Museo';
  src:url('../fonts/Museo700-Regular.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --green:#699459;
  --green-dark:#54793f;
  --gold:#ab8a54;
  --cream:#fafafa;
  --black:#000000;
  --text:#1c1c1a;
  --radius-lg:25px;
  --radius-md:10px;
  --max:1332px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scrollbar-gutter:stable;}
body{
  margin:0;
  font-family:'Museo', system-ui, sans-serif;
  color:var(--text);
  background:#fff;
  font-weight:300;
  line-height:1.5;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;border:none;background:none;cursor:pointer;}
.container{max-width:var(--max);margin:0 auto;padding:0 20px;}
.skip-link{
  position:absolute;left:-999px;top:auto;
  background:var(--green);color:#fff;padding:10px 16px;
  border-radius:0 0 8px 0;z-index:2000;
}
.skip-link:focus{left:0;top:0;}
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}

/* Botão */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--green);
  color:#fff;
  font-weight:700;
  font-size:16px;
  padding:18px 22px;
  border-radius:var(--radius-md);
  white-space:nowrap;
  transition:background .2s ease, transform .2s ease;
}
.btn:hover,.btn:focus-visible{background:var(--green-dark); transform:translateY(-1px);}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
}
.site-header::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(6px);
  z-index:-1;
}
.site-header .container{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:18px;
  padding-bottom:18px;
  gap:24px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--text);}
.brand img{width:56px;height:56px;border-radius:50%;}
.main-nav{display:flex;align-items:center;gap:48px;flex-wrap:wrap;}
.main-nav ul{display:flex;gap:32px;}
.main-nav ul a{
  font-weight:700;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text);
  padding:4px 0;
  border-bottom:2px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.main-nav ul a:hover,.main-nav ul a:focus-visible{border-color:var(--green); color:var(--green-dark);}
.header-cta{
  font-size:14px;
  padding:16px 26px;
  color:#fff;
  letter-spacing:.03em;
}
.header-cta:hover,.header-cta:focus-visible{background:var(--green-dark); color:#fff;}
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:0;
  flex-shrink:0;
}
.nav-toggle span{
  display:block;
  width:26px;
  height:2.5px;
  background:var(--text);
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.nav-overlay{display:none;}

/* Hero */
.hero{
  display:block;
  background:#efe6d8;
  cursor:pointer;
  transition:opacity .2s ease;
  aspect-ratio:1440/472;
  overflow:hidden;
}
.hero:hover,.hero:focus-visible{opacity:.94;}
.hero picture{display:block;width:100%;height:100%;}
.hero-bg{
  width:100%;
  height:100%;
  object-fit:cover;
}

@media (max-width:900px){
  .hero{aspect-ratio:393/541;}
}

/* Promo banner */
.promo{
  max-width:var(--max);
  margin:40px auto 0;
  padding:0 20px;
}
.promo a{
  display:block;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:1332/390;
}
.promo picture{display:block;width:100%;height:100%;}
.promo img{width:100%;height:100%;object-fit:cover;}

@media (max-width:900px){
  .promo a{aspect-ratio:320/479;}
}

/* Serviços */
.services{
  max-width:var(--max);
  margin:0 auto;
  padding:96px 20px 40px;
  text-align:center;
}
.eyebrow{
  color:var(--gold);
  font-weight:700;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 12px;
}
.services h2{
  font-size:clamp(28px,4vw,36px);
  font-weight:700;
  max-width:600px;
  margin:0 auto 20px;
}
.services > p{
  max-width:680px;
  margin:0 auto 56px;
  font-size:16px;
}

/* Quebra de linha manual — ativa só no desktop (revisão da agência) */
.break-desktop{display:none;}
@media (min-width:901px){
  .break-desktop{display:inline;}
}
@media (min-width:1200px){
  #servicos-desc{max-width:1000px;}
}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:51px;
  text-align:left;
}
.card{
  display:flex;
  flex-direction:column;
  background:var(--cream);
  border-radius:var(--radius-lg);
  overflow:hidden;
  height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
a.card{cursor:pointer;}
.card:hover,a.card:focus-visible{transform:translateY(-4px); box-shadow:0 18px 30px rgba(0,0,0,.12);}
.card-img{
  width:100%;
  aspect-ratio:410/248;
  object-fit:cover;
}
.card-body{padding:24px 21px 30px;}
.card-body h3{font-size:20px;font-weight:700;margin:0 0 16px;}
.card-body p{font-size:16px;font-weight:300;margin:0 0 10px;}
.card-body strong{font-weight:700;}
.card-link{color:var(--green);font-weight:700;text-decoration:underline;}

/* Quem somos */
.about{
  max-width:var(--max);
  margin:120px auto 0;
  padding:0 20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.about h2{font-size:clamp(28px,4vw,36px); font-weight:700; margin:0 0 24px;}
.about p{font-size:16px; margin:0 0 16px;}
.about-media{position:relative;}
.about-media img.main{
  width:100%;
  border-radius:var(--radius-lg);
  aspect-ratio:687/432;
  object-fit:cover;
}
.about-media img.badge{
  position:absolute;
  top:-30px;
  left:-40px;
  width:150px;
  height:150px;
  border-radius:50%;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

/* Footer */
.site-footer{
  margin-top:140px;
  background:var(--black);
  color:#fff;
  padding:78px 0 60px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
.footer-map img{
  width:100%;
  border-radius:var(--radius-lg);
  aspect-ratio:578/424;
  object-fit:cover;
}
.footer-map iframe{
  width:100%;
  aspect-ratio:578/424;
  border-radius:var(--radius-lg);
  border:0;
  display:block;
}
.footer-contact h3{font-size:20px;font-weight:700;margin:0 0 20px;}
.footer-contact p{font-size:16px;font-weight:300;margin:0 0 16px;}
.footer-contact address{font-style:normal;margin:0 0 16px;}
.footer-contact strong{font-weight:700;color:#fff;}
.footer-contact .email{margin:20px 0 28px;display:flex;align-items:center;gap:8px;}
.footer-contact .email svg{flex-shrink:0;}
.footer-divider{border:0;border-top:1px solid rgba(255,255,255,.25);margin:56px 0 32px;}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
}
.footer-copy{font-size:14px;font-weight:300;color:rgba(255,255,255,.85);}
.footer-social{display:flex;gap:14px;}
.footer-social img{width:42px;height:42px;border-radius:50%;object-fit:cover;}
.footer-privacy{font-size:14px;text-decoration:underline;color:#fff;}
.footer-bottom-strip{
  height:18px;
  background:#efe6d8;
}
.footer-bottom-strip img{width:100%;height:100%;object-fit:cover;}

/* Modal */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:60px 20px;
  z-index:1000;
  overflow-y:auto;
}
.modal-overlay.open{display:flex;}
.modal{
  background:#fff;
  max-width:900px;
  width:100%;
  border-radius:20px;
  padding:48px;
  position:relative;
  max-height:85vh;
  overflow-y:auto;
}
.modal h2{font-size:28px;font-weight:700;margin:0 0 20px;}
.modal p{font-size:15px;margin:0 0 14px;line-height:1.7;}
.modal a{color:var(--green);text-decoration:underline;}
.modal a:hover,.modal a:focus-visible{color:var(--green-dark);}
.modal ul{list-style:disc;margin:0 0 14px;padding:0 0 0 20px;}
.modal li{font-size:15px;line-height:1.7;margin:0 0 4px;}
.modal-close{
  position:absolute;
  top:20px;
  right:20px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#f2f2f2;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

@media (max-width:900px){
  .nav-toggle{display:flex;}

  .main-nav{
    display:flex;
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:min(320px,80vw);
    background:#fff;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:36px;
    padding:100px 32px 40px;
    box-shadow:-12px 0 30px rgba(0,0,0,.12);
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:99;
  }
  .main-nav.is-open{transform:translateX(0);}
  .main-nav ul{flex-direction:column;gap:24px;}
  .main-nav ul a{font-size:15px;}
  .header-cta{width:100%;}

  .nav-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    z-index:98;
  }
  .nav-overlay.is-open{display:block;}

  .cards{grid-template-columns:1fr;}
  .about{grid-template-columns:1fr; margin-top:80px;}
  .about-media{order:-1;}
  .about-media img.badge{width:100px;height:100px;top:-20px;left:-20px;}
  .footer-grid{grid-template-columns:1fr;}
  .site-footer{margin-top:80px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .btn,a.card{transition:none;}
}