/* =========================================================
   LP GRILL RESTAURANTE — STYLE.CSS FINAL APP DELIVERY
   Versão: iFood/App real
   Base: arquivo enviado pelo Paulo
   Regras aplicadas:
   - Sem duplicações de seletor brigando no final
   - Sem conflitos entre desktop e mobile
   - Desktop preservado
   - Mobile com texto dentro da hero
   - Header fino com endereço
   - Cards estilo aplicativo
   - Hero slider com 3 fotos
   - Botão fixo correto no mobile
   - Animação leve
   ========================================================= */

/* =========================================================
   01. RESET GLOBAL
   ========================================================= */

*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  width:100%;
  min-height:100%;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  width:100%;
  min-height:100vh;
  overflow-x:hidden;
  background:#ffffff;
  color:#080808;
  font-family:'Inter','Manrope',Arial,sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,
picture,
video,
canvas,
svg{
  display:block;
  max-width:100%;
}

img{
  height:auto;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea,
select{
  font:inherit;
}

button{
  border:0;
  background:none;
  cursor:pointer;
}

::selection{
  background:rgba(225,6,0,.16);
  color:#111111;
}

:focus-visible{
  outline:3px solid rgba(225,6,0,.45);
  outline-offset:4px;
}

/* =========================================================
   02. VARIÁVEIS VISUAIS
   ========================================================= */

:root{
  --lp-red:#e10600;
  --lp-red-light:#ff3030;
  --lp-red-dark:#b90400;
  --lp-green:#25d366;
  --lp-green-dark:#128c3a;

  --lp-bg:#ffffff;
  --lp-bg-soft:#fffaf5;
  --lp-bg-warm:#fff4ea;
  --lp-card:#ffffff;

  --lp-text:#070707;
  --lp-text-soft:#1a1a1a;
  --lp-muted:#555555;
  --lp-muted-2:#777777;
  --lp-border:rgba(0,0,0,.065);
  --lp-border-soft:rgba(0,0,0,.045);

  --lp-radius-xs:8px;
  --lp-radius-sm:12px;
  --lp-radius-md:18px;
  --lp-radius-lg:24px;
  --lp-radius-xl:32px;

  --lp-shadow-soft:0 14px 34px rgba(0,0,0,.06);
  --lp-shadow-card:0 12px 30px rgba(0,0,0,.07);
  --lp-shadow-strong:0 22px 60px rgba(0,0,0,.12);
  --lp-shadow-cta:0 20px 48px rgba(225,6,0,.34);

  --lp-page-pad-x:6vw;
  --lp-header-desktop:146px;

  --hero-img:url("img/tropeiro.jpg");
}

/* =========================================================
   03. ESTRUTURA GERAL
   ========================================================= */

.page{
  position:relative;
  width:100%;
  min-height:100vh;
  overflow:hidden;
  background:#ffffff;
}

.page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,#ffffff 0%,#fffdfb 100%);
}

.page > *{
  position:relative;
  z-index:1;
}

/* =========================================================
   04. LOADING OPCIONAL
   ========================================================= */

.loading,
#loading{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  transition:opacity .35s ease, visibility .35s ease;
}

.loading.hide,
#loading.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.loader-card{
  padding:28px 34px;
  border-radius:24px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.04);
  box-shadow:0 24px 60px rgba(0,0,0,.10);
  text-align:center;
}

.loader-card strong{
  display:block;
  font-family:'Manrope','Inter',Arial,sans-serif;
  font-size:30px;
  line-height:1;
  font-weight:900;
  letter-spacing:-1px;
  color:var(--lp-red);
}

.loader-card span{
  display:block;
  margin-top:8px;
  font-size:13px;
  font-weight:800;
  color:#555555;
}

.loader-line{
  width:150px;
  height:5px;
  margin:16px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--lp-red),#ff3b3b,var(--lp-red));
  animation:loadingLine 1.15s infinite ease-in-out;
  transform-origin:center;
}

/* =========================================================
   05. HERO DESKTOP
   ========================================================= */

.hero-section{
  position:relative;
  width:100%;
  min-height:100vh;
  padding:28px var(--lp-page-pad-x) 30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#ffffff;
  overflow:hidden;
}

.header{
  position:absolute;
  top:20px;
  left:var(--lp-page-pad-x);
  right:var(--lp-page-pad-x);
  z-index:70;
  height:150px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px;
  overflow:visible;
}

.header-top{
  width:100%;
  min-height:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:#111111;
  font-size:12px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:.1px;
  opacity:.92;
}

.header-top span,
.header-top strong{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}

.header-top strong{
  font-weight:900;
}

.brand{
  display:inline-flex;
  align-items:flex-start;
  justify-content:flex-start;
  min-height:0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  transform:none;
  -webkit-tap-highlight-color:transparent;
}

.header .brand img,
.brand img{
  width:440px;
  max-width:440px;
  max-height:166px;
  height:auto;
  object-fit:contain;
  object-position:left top;
  background:transparent;
  border:0;
  box-shadow:none;
  outline:0;
  filter:contrast(1.07) brightness(1.02) saturate(1.02);
  transform:none;
}

.brand span{
  display:none;
}

.hero-grid{
  position:relative;
  z-index:2;
  min-height:calc(100vh - 80px);
  display:grid;
  grid-template-columns:minmax(455px,.84fr) minmax(560px,1.16fr);
  align-items:center;
  gap:44px;
}

.hero-content{
  position:relative;
  z-index:5;
  max-width:610px;
  padding-top:142px;
}

.location-pill{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:14px;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 8px 20px rgba(0,0,0,.045);
  color:#1b1b1b;
  font-size:13px;
  line-height:1;
  font-weight:900;
  backdrop-filter:blur(10px);
}

.hero-content h1{
  max-width:610px;
  margin-bottom:12px;
  font-family:'Manrope','Inter',Arial,sans-serif;
  font-size:clamp(46px,4.25vw,68px);
  line-height:.95;
  font-weight:900;
  letter-spacing:-3.1px;
  color:#050505;
  text-wrap:balance;
}

.hero-content h2{
  max-width:580px;
  margin-bottom:15px;
  font-family:'Manrope','Inter',Arial,sans-serif;
  font-size:clamp(25px,2.25vw,35px);
  line-height:1;
  font-weight:900;
  letter-spacing:-1.1px;
  color:var(--lp-red);
  text-wrap:balance;
}

.hero-text{
  max-width:520px;
  margin-bottom:21px;
  font-size:16.5px;
  line-height:1.5;
  font-weight:600;
  letter-spacing:-.2px;
  color:#4c4c4c;
  text-wrap:pretty;
}

/* =========================================================
   06. HERO SLIDER DESKTOP
   ========================================================= */

.hero-image-wrap{
  position:absolute;
  top:138px;
  right:calc(-1 * var(--lp-page-pad-x));
  z-index:1;
  width:62vw;
  height:calc(100vh - 138px);
  min-height:560px;
  max-height:760px;
  overflow:hidden;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background-color:transparent !important;
  isolation:isolate;
}

.hero-slider{
  background:transparent !important;
}

.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity 1s ease, visibility 1s ease;
}

.hero-slide.active{
  opacity:1;
  visibility:visible;
}

.hero-slide img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:right center;
  filter:saturate(1.04) contrast(1.03);
}

.hero-image-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.90) 18%,
    rgba(255,255,255,.44) 42%,
    rgba(255,255,255,.08) 62%,
    rgba(255,255,255,0) 78%
  );
}

.hero-image-wrap::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  z-index:4;
  height:110px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.92));
}

.hero-overlay-mobile{
  display:none;
}

.hero-food{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.hero-grid > .order-card,
.hero-grid > .hero-card,
.hero-grid > .floating-card,
.hero-grid > .floating-order-card,
.hero-grid > .order-popover,
.hero-grid > .live-order,
.hero-grid > .pedido-card,
.hero-image-wrap .order-card,
.hero-image-wrap .hero-card,
.hero-image-wrap .floating-card,
.hero-image-wrap .floating-order-card,
.hero-image-wrap .order-popover,
.hero-image-wrap .live-order,
.hero-image-wrap .pedido-card{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* =========================================================
   07. CARDS DE CONFIANÇA / CTA DESKTOP
   ========================================================= */

.trust-row{
  width:100%;
  max-width:610px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-bottom:22px;
  overflow:hidden;
  border-radius:20px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(0,0,0,.055);
  box-shadow:0 12px 30px rgba(0,0,0,.055);
  backdrop-filter:blur(8px);
}

.trust-card{
  min-height:72px;
  padding:13px 10px;
  display:flex;
  align-items:center;
  gap:8px;
  background:#ffffff;
  transition:transform .22s ease, background .22s ease;
}

.trust-card + .trust-card{
  border-left:1px solid #f0e6dc;
}

.trust-card:hover{
  transform:translateY(-1px);
  background:#fffdfb;
}

.trust-card span{
  flex:0 0 auto;
  font-size:22px;
}

.trust-card p{
  line-height:1.05;
}

.trust-card strong{
  display:block;
  font-size:12.5px;
  line-height:1.05;
  font-weight:900;
  color:#111111;
}

.trust-card small{
  display:block;
  margin-top:4px;
  font-size:10px;
  line-height:1.05;
  font-weight:800;
  color:#666666;
}

.main-cta{
  position:relative;
  width:100%;
  max-width:610px;
  min-height:82px;
  margin-bottom:16px;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(180deg,#ff2525 0%,var(--lp-red) 58%,#c90200 100%);
  color:#ffffff;
  box-shadow:var(--lp-shadow-cta), 0 0 0 1px rgba(255,255,255,.24) inset;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
  -webkit-tap-highlight-color:transparent;
  will-change:transform;
}

.main-cta::before{
  content:"";
  position:absolute;
  top:-85%;
  left:-90px;
  width:74px;
  height:280%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);
  transform:rotate(24deg);
  animation:shine 3.1s infinite;
}

.main-cta:hover{
  transform:translateY(-2px) scale(1.025);
  box-shadow:0 28px 60px rgba(225,6,0,.44);
  filter:saturate(1.05);
}

.main-cta:active{
  transform:translateY(0) scale(.99);
}

.cta-icon{
  position:relative;
  z-index:1;
  font-size:31px;
}

.main-cta span:last-child{
  position:relative;
  z-index:1;
}

.main-cta strong{
  display:block;
  font-size:25px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.3px;
}

.main-cta small{
  display:block;
  margin-top:7px;
  font-size:14px;
  line-height:1;
  font-weight:800;
  opacity:.96;
}

.benefits-section{
  width:100%;
  max-width:1180px;
  margin:0 auto 24px;
  padding:0 var(--lp-page-pad-x);
}

.benefits-row{
  max-width:610px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  color:#242424;
  font-size:13.5px;
  line-height:1.1;
  font-weight:900;
}

.benefits-row span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}

.benefits-row span:nth-child(2){
  font-size:0;
}

.benefits-row span:nth-child(2)::after{
  content:"💳 Pix • Débito • Crédito";
  font-size:13.5px;
  font-weight:900;
  line-height:1.1;
}

@media(max-width:768px){
  .benefits-row span:nth-child(2)::after{
    font-size:14px;
    font-weight:800;
  }
}

/* =========================================================
   08. MENU PREVIEW — CARDS ESTILO APP
   ========================================================= */

.menu-preview{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--lp-page-pad-x);
  display:none;
  grid-template-columns:repeat(3,minmax(180px,1fr));
  gap:18px;
  position:relative;
  z-index:20;
}

.menu-card{
  min-height:190px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:24px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 14px 34px rgba(0,0,0,.07);
  transition:transform .22s ease, box-shadow .22s ease;
}

.menu-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 46px rgba(0,0,0,.10);
}

.menu-card img{
  width:100%;
  height:135px;
  object-fit:cover;
  background:#f4f4f4;
}

.menu-card span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:10px;
  color:#171717;
  font-family:'Manrope','Inter',Arial,sans-serif;
  font-size:22px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.5px;
  text-align:center;
}

/* =========================================================
   09. WHATSAPP / CRÉDITO
   ========================================================= */

.whatsapp{
  position:fixed;
  right:24px;
  bottom:28px;
  z-index:95;
  width:56px;
  height:56px;
  min-width:56px;
  min-height:56px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--lp-green);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 12px 28px rgba(37,211,102,.28), 0 10px 26px rgba(0,0,0,.12);
  font-size:0;
  animation:mobileWhatsPulse 2.5s ease-in-out infinite;
  transition:transform .22s ease, box-shadow .22s ease;
  -webkit-tap-highlight-color:transparent;
}

.whatsapp:hover{
  transform:translateY(-2px) scale(1.055);
  box-shadow:0 16px 36px rgba(37,211,102,.36), 0 12px 30px rgba(0,0,0,.14);
}

.whatsapp span,
.whatsapp img{
  display:none !important;
}

.whatsapp::before{
  content:"☎";
  width:auto;
  height:auto;
  display:block;
  color:#ffffff;
  font-size:25px;
  font-weight:900;
  line-height:1;
}

.whatsapp::after{
  display:none;
  content:"";
}

.footer-credit{
  position:fixed;
  right:16px;
  bottom:7px;
  z-index:100;
  color:#2e7d32;
  font-size:9px;
  line-height:1;
  font-weight:700;
  letter-spacing:.1px;
  opacity:.46;
  text-shadow:none;
  user-select:none;
}

.footer-credit a{
  color:#2e7d32;
  text-decoration:none;
}

.footer-credit a:hover{
  color:#1b5e20;
}

/* =========================================================
   10. PEDIDOS / SLIDES HORIZONTAIS
   ========================================================= */

.orders-live{
  width:100%;
  max-width:1180px;
  margin:0 auto 38px;
  padding:0 0 4px;
  overflow:hidden;
  position:relative;
  z-index:10;
  background:#ffffff;
}

.orders-track{
  display:flex;
  align-items:stretch;
  gap:16px;
  width:max-content;
  animation:slideOrders 26s linear infinite;
  will-change:transform;
}

.orders-track:hover{
  animation-play-state:paused;
}

.order-card{
  width:248px;
  min-width:248px;
  min-height:112px;
  padding:10px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 14px 34px rgba(0,0,0,.065);
  display:grid;
  grid-template-columns:82px 1fr;
  gap:10px;
  align-items:center;
}

.order-card img{
  width:82px;
  height:82px;
  object-fit:cover;
  border-radius:14px;
  background:#f5f5f5;
}

.order-card span{
  display:block;
  font-family:'Manrope','Inter',Arial,sans-serif;
  font-size:13px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.2px;
  color:#111111;
}

.order-card small{
  display:block;
  margin-top:5px;
  font-size:11px;
  line-height:1.1;
  font-weight:800;
  color:#7a3f15;
}

.orders-live::before,
.orders-live::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:78px;
  z-index:3;
  pointer-events:none;
}

.orders-live::before{
  left:0;
  background:linear-gradient(90deg,#ffffff,rgba(255,255,255,0));
}

.orders-live::after{
  right:0;
  background:linear-gradient(270deg,#ffffff,rgba(255,255,255,0));
}

/* =========================================================
   11. COMO FUNCIONA
   ========================================================= */

.how-section{
  width:calc(100% - 12vw);
  max-width:1180px;
  margin:0 auto 48px;
  padding:44px 36px 34px;
  border-radius:28px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.055);
  box-shadow:0 18px 46px rgba(0,0,0,.045);
}

.how-section h2{
  margin-bottom:30px;
  text-align:center;
  font-family:'Manrope','Inter',Arial,sans-serif;
  font-size:36px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-1.2px;
  color:#111111;
}

.how-section h2::after{
  content:"";
  display:block;
  width:74px;
  height:3px;
  margin:10px auto 0;
  border-radius:999px;
  background:var(--lp-red);
}

.steps-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  align-items:stretch;
}

.step-arrow{
  display:none;
}

.step-card{
  position:relative;
  min-height:150px;
  padding:22px 18px 18px;
  border-radius:20px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.055);
  box-shadow:0 12px 30px rgba(0,0,0,.055);
  text-align:center;
  transition:transform .22s ease, box-shadow .22s ease;
}

.step-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.step-number{
  position:absolute;
  top:14px;
  left:16px;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--lp-red);
  color:#ffffff;
  font-size:14px;
  font-weight:900;
}

.step-icon{
  width:56px;
  height:56px;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff2f2;
  color:var(--lp-red);
  font-size:28px;
}

.step-card h3{
  margin-bottom:8px;
  color:#111111;
  font-size:16px;
  line-height:1.18;
  font-weight:900;
}

.step-card p{
  max-width:210px;
  margin:0 auto;
  color:#666666;
  font-size:13px;
  line-height:1.35;
  font-weight:600;
}

.love-bar{
  margin-top:26px;
  min-height:78px;
  padding:18px 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  border-radius:22px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.055);
  box-shadow:0 12px 32px rgba(0,0,0,.052);
  text-align:center;
}

.love-bar > div{
  display:flex;
  align-items:center;
  gap:15px;
}

.love-bar span{
  font-size:34px;
}

.love-bar strong{
  display:block;
  color:var(--lp-red);
  font-size:20px;
  line-height:1.1;
  font-weight:900;
}

.love-bar small{
  display:block;
  margin-top:5px;
  color:#666666;
  font-size:14px;
}

.love-bar em{
  color:var(--lp-red);
  font-family:'Manrope','Inter',Arial,sans-serif;
  font-size:24px;
  line-height:1.1;
  font-weight:800;
  font-style:italic;
  letter-spacing:-.5px;
  white-space:nowrap;
}

/* =========================================================
   12. TABLET / NOTEBOOK
   ========================================================= */

@media(max-width:1180px) and (min-width:769px){
  .hero-section{
    padding-top:138px;
  }

  .header{
    height:136px;
  }

  .header .brand img,
  .brand img{
    width:390px;
    max-width:390px;
    max-height:146px;
  }

  .hero-grid{
    grid-template-columns:minmax(420px,.95fr) minmax(440px,1.05fr);
    gap:28px;
  }

  .hero-content h1{
    font-size:56px;
  }

  .hero-content h2{
    font-size:30px;
  }

  .hero-image-wrap{
    top:146px;
    right:-9vw;
    width:62vw;
    height:470px;
    min-height:470px;
    max-height:470px;
  }

  .steps-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* =========================================================
   13. MOBILE — CARA REAL DE APP
   ========================================================= */

@media(max-width:768px){
  html,
  body{
    width:100%;
    overflow-x:hidden;
    background:#ffffff;
  }

  body{
    padding-bottom:94px;
  }

  .page{
    overflow:hidden;
    background:#ffffff;
  }

  .page::before{
    background:#ffffff;
  }

  .hero-section{
    min-height:auto;
    padding:0 0 18px;
    justify-content:flex-start;
    background:#ffffff;
    overflow:visible;
  }

  .header{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    width:100%;
    height:auto;
    min-height:82px;
    margin:0;
    padding:8px 14px 7px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:5px;
    background:#ffffff;
    border-bottom:1px solid rgba(0,0,0,.055);
    z-index:100;
    overflow:visible;
  }

  .header-top{
    order:1;
    width:100%;
    min-height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#101010;
    font-size:9.5px;
    line-height:1.15;
    font-weight:750;
    letter-spacing:.05px;
    text-align:center;
    opacity:.96;
    white-space:normal;
  }

  .header-top span,
  .header-top strong{
    white-space:normal;
  }

  .header-top strong{
    font-size:9.8px;
  }

  .brand{
    order:2;
    max-width:74vw;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
    transform:none;
  }

  .header .brand img,
  .brand img{
    width:198px;
    max-width:74vw;
    max-height:58px;
    object-position:center;
    filter:contrast(1.07) brightness(1.02) saturate(1.02);
  }

  .hero-grid{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    min-height:auto;
    padding:0;
  }

  .hero-content{
    width:100%;
    max-width:none;
    padding:0 14px;
    z-index:5;
  }

  .hero-content .location-pill,
  .hero-content h1,
  .hero-content h2,
  .hero-content .hero-text{
    display:none;
  }

  .hero-image-wrap{
    position:relative;
    order:-1;
    top:auto;
    right:auto;
    left:auto;
    width:100%;
    height:520px;
    min-height:520px;
    max-height:520px;
    margin:0;
    overflow:hidden;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:#ffffff !important;
  }

  .hero-image-wrap::before{
    content:"" !important;
    display:block !important;
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    background:linear-gradient(90deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.86) 25%,
      rgba(255,255,255,.42) 47%,
      rgba(255,255,255,.10) 72%,
      rgba(255,255,255,0) 100%
    );
  }

  .hero-image-wrap::after{
    content:"" !important;
    display:block !important;
    position:absolute;
    inset:auto 0 0 0;
    z-index:5;
    height:140px;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,0),#ffffff 82%);
  }

  .hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .9s ease, visibility .9s ease;
  }

  .hero-slide.active{
    opacity:1;
    visibility:visible;
  }

  .hero-slide img{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:72% center;
    filter:saturate(1.04) contrast(1.03);
    pointer-events:none;
  }

  .hero-overlay-mobile{
    position:absolute;
    left:18px;
    right:122px;
    top:70px;
    z-index:8;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    color:#101010;
  }

  .hero-overlay-mobile h1{
    max-width:100%;
    margin:0 0 12px;
    font-family:'Manrope','Inter',Arial,sans-serif;
    font-size:46px;
    line-height:.94;
    font-weight:900;
    letter-spacing:-2.5px;
    color:#a26332;
    text-align:left;
  }

  .hero-overlay-mobile p{
    max-width:100%;
    margin:0 0 18px;
    color:#4c4c4c;
    font-size:25px;
    line-height:1.13;
    font-weight:500;
    letter-spacing:-.7px;
    text-align:left;
  }

  .cta-mobile{
    min-width:210px;
    min-height:58px;
    padding:0 24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:linear-gradient(180deg,#ff3030 0%,var(--lp-red) 70%,#c90200 100%);
    color:#ffffff;
    box-shadow:0 18px 38px rgba(225,6,0,.30), inset 0 1px 0 rgba(255,255,255,.35);
    font-family:'Inter','Manrope',Arial,sans-serif;
    font-size:18px;
    line-height:1;
    font-weight:900;
    letter-spacing:.2px;
    text-align:center;
    animation:ctaBreathMobile 2.8s ease-in-out infinite;
  }

  .trust-row{
    width:100%;
    max-width:100%;
    display:grid;
    grid-template-columns:repeat(4, minmax(96px,1fr));
    gap:10px;
    margin:14px 0 13px;
    padding:0 2px 4px;
    overflow-x:auto;
    overflow-y:hidden;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:transparent;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  .trust-row::-webkit-scrollbar{
    display:none;
  }

  .trust-card{
    min-height:58px;
    padding:9px 10px;
    border:1px solid rgba(0,0,0,.055) !important;
    border-radius:16px;
    box-shadow:0 8px 18px rgba(0,0,0,.045);
    scroll-snap-align:start;
  }

  .trust-card span{
    font-size:18px;
  }

  .trust-card strong{
    font-size:11px;
  }

  .trust-card small{
    font-size:9px;
  }

  .main-cta{
    position:fixed;
    left:14px;
    right:14px;
    bottom:16px;
    z-index:91;
    width:auto;
    max-width:none;
    min-height:64px;
    margin:0;
    padding:0 16px;
    gap:12px;
    border-radius:20px;
    animation:none;
  }

  .main-cta::before{
    animation:shine 3.4s infinite;
  }

  .cta-icon{
    font-size:25px;
  }

  .main-cta strong{
    font-size:19px;
  }

  .main-cta small{
    margin-top:5px;
    font-size:11.5px;
  }

  .benefits-section{
    padding:0 14px;
    margin:0 auto 18px;
  }

  .benefits-row{
    max-width:100%;
    justify-content:flex-start;
    gap:8px;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:3px;
    font-size:14px;
    line-height:1;
    -webkit-overflow-scrolling:touch;
  }

  .benefits-row::-webkit-scrollbar{
    display:none;
  }

  .benefits-row span{
    min-height:36px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#ededed;
    color:#4a4a4a;
    font-weight:700;
    flex:0 0 auto;
  }

  .menu-preview{
    width:100%;
    max-width:100%;
    margin:-66px auto 20px;
    padding:0 0 0 18px;
    display:flex;
    gap:16px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  .menu-preview::-webkit-scrollbar{
    display:none;
  }

  .menu-card{
    width:156px;
    min-width:156px;
    min-height:178px;
    border-radius:18px;
    scroll-snap-align:start;
    box-shadow:0 12px 28px rgba(0,0,0,.10);
  }

  .menu-card img{
    height:118px;
    border-radius:18px 18px 0 0;
  }

  .menu-card span{
    min-height:60px;
    font-size:22px;
  }

  .orders-live{
    width:100%;
    max-width:100%;
    margin:8px auto 22px;
    padding:0 0 2px;
  }

  .orders-track{
    gap:10px;
    animation:slideOrders 22s linear infinite;
  }

  .order-card{
    width:210px;
    min-width:210px;
    min-height:92px;
    grid-template-columns:66px 1fr;
    padding:8px;
    border-radius:16px;
  }

  .order-card img{
    width:66px;
    height:66px;
    border-radius:13px;
  }

  .order-card span{
    font-size:12px;
  }

  .order-card small{
    font-size:10px;
  }

  .orders-live::before,
  .orders-live::after{
    width:34px;
  }

  .how-section{
    width:calc(100% - 24px);
    margin:14px auto 26px;
    padding:24px 14px 18px;
    border-radius:24px;
    box-shadow:0 14px 38px rgba(0,0,0,.052);
  }

  .how-section h2{
    margin-bottom:22px;
    font-size:28px;
    line-height:1.05;
    letter-spacing:-1px;
  }

  .steps-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .step-card{
    min-height:auto;
    padding:20px 16px;
    border-radius:20px;
  }

  .step-card:hover{
    transform:none;
  }

  .love-bar{
    padding:18px 16px;
    flex-direction:column;
    gap:12px;
    border-radius:20px;
  }

  .love-bar > div{
    flex-direction:column;
    gap:8px;
  }

  .love-bar strong{
    font-size:18px;
  }

  .love-bar small{
    font-size:13px;
  }

  .love-bar em{
    font-size:20px;
    white-space:normal;
  }

  .whatsapp{
    position:fixed;
    right:16px;
    bottom:96px;
    width:52px;
    height:52px;
    min-width:52px;
    min-height:52px;
    z-index:92;
  }

  .whatsapp::before{
    font-size:23px;
  }

  .footer-credit{
    right:10px;
    bottom:5px;
    font-size:8px;
    opacity:.38;
  }
}

/* =========================================================
   14. CELULARES PEQUENOS
   ========================================================= */

@media(max-width:430px){
  .header{
    min-height:78px;
    padding:7px 12px 6px;
  }

  .header-top{
    font-size:8.8px;
    gap:5px;
  }

  .header-top strong{
    font-size:9px;
  }

  .header .brand img,
  .brand img{
    width:184px;
    max-width:72vw;
    max-height:54px;
  }

  .hero-image-wrap{
    height:470px;
    min-height:470px;
    max-height:470px;
  }

  .hero-slide img{
    object-position:76% center;
  }

  .hero-overlay-mobile{
    left:18px;
    right:92px;
    top:66px;
  }

  .hero-overlay-mobile h1{
    font-size:42px;
    letter-spacing:-2.3px;
  }

  .hero-overlay-mobile p{
    font-size:23px;
  }

  .cta-mobile{
    min-width:200px;
    min-height:56px;
    font-size:17px;
  }

  .menu-preview{
    margin-top:-62px;
  }

  .menu-card{
    width:150px;
    min-width:150px;
  }

  .menu-card img{
    height:114px;
  }

  .menu-card span{
    font-size:21px;
  }
}

@media(max-width:390px){
  .hero-image-wrap{
    height:478px;
    min-height:478px;
    max-height:478px;
  }

  .hero-overlay-mobile{
    right:78px;
    top:62px;
  }

  .hero-overlay-mobile h1{
    font-size:38px;
  }

  .hero-overlay-mobile p{
    font-size:21px;
  }

  .cta-mobile{
    min-width:184px;
    min-height:54px;
    font-size:16px;
  }

  .main-cta strong{
    font-size:18px;
  }

  .main-cta small{
    font-size:11px;
  }
}

@media(max-width:360px){
  .header .brand img,
  .brand img{
    width:166px;
    max-width:70vw;
  }

  .hero-image-wrap{
    height:454px;
    min-height:454px;
    max-height:454px;
  }

  .hero-overlay-mobile{
    left:15px;
    right:70px;
  }

  .hero-overlay-mobile h1{
    font-size:35px;
  }

  .hero-overlay-mobile p{
    font-size:19px;
  }

  .menu-card{
    width:138px;
    min-width:138px;
  }
}

/* =========================================================
   15. DESKTOP AMPLO
   ========================================================= */

@media(min-width:1500px){
  .hero-grid{
    grid-template-columns:minmax(480px,.82fr) minmax(650px,1.18fr);
    gap:56px;
  }

  .hero-content{
    max-width:640px;
  }

  .hero-content h1{
    max-width:640px;
  }

  .hero-content h2{
    max-width:620px;
  }

  .hero-image-wrap{
    width:64vw;
  }

  .menu-preview,
  .orders-live,
  .how-section{
    max-width:1320px;
  }
}

/* =========================================================
   16. TELAS BAIXAS
   ========================================================= */

@media(min-width:1000px) and (max-height:760px){
  .hero-section{
    padding-top:22px;
    padding-bottom:20px;
  }

  .header{
    top:16px;
    height:128px;
  }

  .header .brand img,
  .brand img{
    width:390px;
    max-height:146px;
  }

  .hero-content{
    padding-top:124px;
  }

  .hero-content h1{
    font-size:clamp(42px,4vw,58px);
  }

  .hero-content h2{
    font-size:clamp(24px,2.1vw,31px);
  }

  .hero-text{
    margin-bottom:16px;
  }

  .trust-row{
    margin-bottom:16px;
  }

  .main-cta{
    min-height:72px;
  }

  .hero-image-wrap{
    top:132px;
    height:calc(100vh - 132px);
    min-height:480px;
  }
}

/* =========================================================
   17. ACESSIBILIDADE / MOVIMENTO
   ========================================================= */

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* =========================================================
   18. ANIMAÇÕES
   ========================================================= */

@keyframes shine{
  0%{
    left:-90px;
  }

  45%,
  100%{
    left:120%;
  }
}

@keyframes loadingLine{
  0%{
    transform:scaleX(.2);
    opacity:.55;
  }

  50%{
    transform:scaleX(1);
    opacity:1;
  }

  100%{
    transform:scaleX(.2);
    opacity:.55;
  }
}

@keyframes mobileWhatsPulse{
  0%,
  100%{
    transform:translateY(0) scale(1);
    box-shadow:0 12px 28px rgba(37,211,102,.28), 0 10px 26px rgba(0,0,0,.12);
  }

  50%{
    transform:translateY(-1px) scale(1.035);
    box-shadow:0 15px 34px rgba(37,211,102,.36), 0 12px 30px rgba(0,0,0,.14);
  }
}

@keyframes slideOrders{
  0%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(-50%);
  }
}

@keyframes ctaBreathMobile{
  0%,
  100%{
    transform:translateY(0) scale(1);
    box-shadow:0 18px 38px rgba(225,6,0,.30), inset 0 1px 0 rgba(255,255,255,.35);
  }

  50%{
    transform:translateY(-1px) scale(1.025);
    box-shadow:0 22px 46px rgba(225,6,0,.38), inset 0 1px 0 rgba(255,255,255,.42);
  }
}


/* =========================================================
   19. AJUSTE FINAL PAULO — SALMO BRONZE + MOBILE RESPONSIVO + LOGO +30%
   Aplicado por último para não mexer no restante do layout.
   - Salmo centralizado, bronze, clássico e com primeira letra destacada
   - Cards de confiança no mobile encaixando todos na tela
   - Logo mobile aumentada em mais 30%
   ========================================================= */

/* SALMO — DESKTOP */
.benefits-section{
  width:100% !important;
  max-width:1180px !important;
  margin:0 auto 28px !important;
  padding:0 var(--lp-page-pad-x) !important;
}

.benefits-row{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  padding:0 14px !important;
  overflow:visible !important;
  text-align:center !important;
}

.benefits-row span{
  display:none !important;
}

/* SALMO BONITO (CORRETO) */
.benefits-row::before{
  content:"Seja forte e corajoso, não desista, pois Deus está com você.";
  display:block;

  width:100%;
  max-width:860px;
  margin:0 auto;

  text-align:center;

  font-family:"Playfair Display", Georgia, "Times New Roman", serif;

  font-size:28px;
  line-height:1.45;
  font-weight:600;

  letter-spacing:0.6px;

  /* BRONZE GRADIENTE */
  background: linear-gradient(90deg,#8c4a1f,#c17a3a,#e0a96d);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.6),
    0 2px 8px rgba(0,0,0,0.08);

  font-style:italic;
}

/* PRIMEIRA LETRA */
.benefits-row::first-letter{
  font-size:46px;
  line-height:.9;
  font-weight:800;
  letter-spacing:1px;
}

/* MOBILE */
@media(max-width:768px){
  .benefits-row::before{
    font-size:19px !important;
    line-height:1.35 !important;
    max-width:90% !important;
  }

  .benefits-row::first-letter{
    font-size:32px !important;
  }
}/* MOBILE — CARDS MARCADOS ENCAIXADOS NA TELA */
@media(max-width:768px){
  .trust-row{
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:5px !important;
    margin:10px 0 12px !important;
    padding:0 !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:transparent !important;
  }

  .trust-card{
    min-width:0 !important;
    width:100% !important;
    min-height:50px !important;
    padding:7px 4px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    border-radius:13px !important;
    background:#ffffff !important;
    border:1px solid rgba(0,0,0,.06) !important;
    box-shadow:0 7px 16px rgba(0,0,0,.045) !important;
  }

  .trust-card + .trust-card{
    border-left:1px solid rgba(0,0,0,.06) !important;
  }

  .trust-card span{
    flex:0 0 auto !important;
    font-size:14px !important;
    line-height:1 !important;
  }

  .trust-card p{
    min-width:0 !important;
    line-height:1 !important;
  }

  .trust-card strong{
    display:block !important;
    font-size:8.6px !important;
    line-height:1.02 !important;
    font-weight:900 !important;
    letter-spacing:-.25px !important;
    white-space:normal !important;
    color:#111111 !important;
  }

  .trust-card small{
    display:block !important;
    margin-top:2px !important;
    font-size:7px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:-.2px !important;
    white-space:normal !important;
    color:#555555 !important;
  }

  /* SALMO — MOBILE */
  .benefits-section{
    margin:0 auto 18px !important;
    padding:0 18px !important;
  }

  .benefits-row{
    padding:0 !important;
    overflow:visible !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
  }

  .benefits-row::before{
    max-width:355px !important;
    font-family:Georgia,'Times New Roman',serif !important;
    font-size:20px !important;
    line-height:1.25 !important;
    font-weight:700 !important;
    letter-spacing:.05px !important;
    color:#a8642f !important;
    font-style:italic !important;
    text-align:center !important;
  }

  .benefits-row::first-letter{
    font-size:34px !important;
    line-height:.8 !important;
    color:#b87336 !important;
    font-weight:800 !important;
  }

  /* LOGO MOBILE +30% */
  .header .brand img,
  .brand img{
    width:334px !important;
    max-width:94vw !important;
    max-height:99px !important;
  }

  .brand{
    max-width:94vw !important;
  }

  .header{
    min-height:116px !important;
  }
}

@media(max-width:430px){
  .trust-row{
    gap:4px !important;
  }

  .trust-card{
    min-height:48px !important;
    padding:7px 3px !important;
    border-radius:12px !important;
    gap:3px !important;
  }

  .trust-card span{
    font-size:13px !important;
  }

  .trust-card strong{
    font-size:8px !important;
  }

  .trust-card small{
    font-size:6.6px !important;
  }

  .header .brand img,
  .brand img{
    width:311px !important;
    max-width:93vw !important;
    max-height:91px !important;
  }

  .brand{
    max-width:93vw !important;
  }

  .header{
    min-height:110px !important;
  }

  .benefits-row::before{
    max-width:330px !important;
    font-size:19px !important;
  }

  .benefits-row::first-letter{
    font-size:32px !important;
  }
}

@media(max-width:390px){
  .trust-row{
    gap:3px !important;
  }

  .trust-card{
    min-height:46px !important;
    padding:6px 2px !important;
  }

  .trust-card span{
    font-size:12px !important;
  }

  .trust-card strong{
    font-size:7.4px !important;
  }

  .trust-card small{
    font-size:6.2px !important;
  }

  .header .brand img,
  .brand img{
    width:294px !important;
    max-width:92vw !important;
    max-height:86px !important;
  }

  .benefits-row::before{
    max-width:310px !important;
    font-size:18px !important;
  }

  .benefits-row::first-letter{
    font-size:30px !important;
  }
}

@media(max-width:360px){
  .trust-card{
    min-height:44px !important;
    gap:2px !important;
  }

  .trust-card span{
    font-size:11px !important;
  }

  .trust-card strong{
    font-size:6.8px !important;
  }

  .trust-card small{
    font-size:5.8px !important;
  }

  .header .brand img,
  .brand img{
    width:281px !important;
    max-width:92vw !important;
    max-height:82px !important;
  }

  .benefits-row::before{
    max-width:292px !important;
    font-size:17px !important;
  }

  .benefits-row::first-letter{
    font-size:28px !important;
  }
}
/* SALMO — CENTRALIZADO + LETRA BONITA + DOURADO/BRONZE */
.salmo-text{
  width:100%;
  max-width:760px;
  margin:0 auto !important;
  padding:18px 22px;
  display:block;
  text-align:center !important;

  color:#b8792f;
  font-family:Georgia, 'Times New Roman', serif;
  font-size:26px;
  line-height:1.35;
  font-weight:700;
  font-style:italic;
  letter-spacing:.2px;

  background:linear-gradient(90deg,#8a4b1e,#c89446,#a76524);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:0 1px 0 rgba(255,255,255,.75);
}

.benefits-section{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

@media(max-width:768px){
  .salmo-text{
    max-width:340px;
    padding:14px 10px;
    font-size:20px;
    line-height:1.32;
  }
}

@media(max-width:390px){
  .salmo-text{
    font-size:18px;
    max-width:310px;
  }
}
/* HERO — MAIS CONTRASTE (TEXTO MAIS FORTE) */

/* Desktop */
.hero-content h1{
  color:#111111 !important;
  text-shadow:0 2px 6px rgba(0,0,0,.08);
}

.hero-content h2{
  color:#c40200 !important;
  text-shadow:0 2px 6px rgba(0,0,0,.06);
}

.hero-text{
  color:#2b2b2b !important;
  font-weight:700 !important;
}

/* Mobile (overlay em cima da imagem) */
.hero-overlay-mobile h1{
  color:#1a1a1a !important;
  text-shadow:0 3px 10px rgba(255,255,255,.65);
}

.hero-overlay-mobile p{
  color:#2e2e2e !important;
  font-weight:600 !important;
  text-shadow:0 2px 8px rgba(255,255,255,.6);
}