/* ============================================================
   WILSON GRILLS — style.css
   Estrutura: base → layout → componentes → seções → utilitários
   ============================================================ */


 .estilo  {
        background: var(--border-accent-20);
        }

/* ============================================================
           HEADER
        ============================================================ */

#header {
    background: var(--color-darker);
    position: relative;
    height: 12vh;
    z-index: 50;
}

#header::after {
    content: "";
    background: linear-gradient(to bottom, #00000000 0 50%,  #d84215af 50% 100%);
    position: absolute;
    bottom: -30%;
    left: 37.2%;
    height: 7vh;
    width: 28vw;
    border-radius: 0 0 2rem 2rem;
}

#header img {
    height: 21vh;
    width: 25vw;
    transform: translateY(-7vh);
    image-rendering:inherit;
}

nav {
    position: relative;
        z-index: 1;
}


.text-white {
    transition: color var(--transition-default)!important;
}
.text-white:hover {
    color: var(--color-gray-300) !important;
}

#header nav ul li a {
    transform: translate(-4vw,-7vh);
}

#header nav ul li a::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width .3s ease;
}

nav ul li a:hover::after {
    width: 100%;
}

#header .btn-orange {
    color: white;
    background-color: var(--color-accent);
    transition: var(--transition-default);
    transform: translateY(-7vh);
}

.btn-orange:hover {
    background-color: var(--color-accent-hover);
}

 #header .btn-orange {
    height: 6vh;
 }

 .btn-orange {
    color: white;
    background-color: var(--color-accent);
    transition: var(--transition-default);
}


 /* ============================================================
           HOME
        ============================================================ */


section#home  h1 {
    font-size: clamp(2rem, 6vw + 1rem, 7rem);
    line-height: 1.2;
    display: block;
}


section#home  {
    position: relative;
    height: 90vh;
}


/* ── Hero ────────────────────────────────────────────────────── */
.hero-slide-img {
    height: 90vh;
    object-fit: cover;
    object-position: center;
}
 
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
}
 
.hero-content {
    z-index: 10;
    pointer-events: none;
}
.hero-content > * { pointer-events: auto; }
 
.hero-badge {
    display: block;
    gap: 6px;
    color: var(--color-white);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    position: absolute;
    top: .5vh;
    right: 39vw;
}
 
.hero-p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--color-gray-300);
    max-width: 600px;
}
 
/* Indicadores personalizados — tracinhos */
.hero-indicators {
    bottom: 20px;
    z-index: 200;
}

.hero-indicators [data-bs-slide-to] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.45);
    border: none;
    transition: var(--transition-fast);
    opacity: 1;
}

.hero-indicators .active {
    background-color: var(--color-accent) !important;
    width: 28px;
    border-radius: 100px;
}

/*parte escrita*/

section#home > div:nth-child(2) {
    z-index: 60;
    position: relative;
    bottom: 90vh;
    
}

/*slide */
section#home > div:nth-child(1) {
    z-index: 1;
    height: 90vh;
  
}

section#home  > div:nth-child(3) {
    position: relative;
  bottom: 90vh;
    z-index: 100;
}

.carousel-item img {
    height: 90vh;
    object-fit: inherit;
    image-rendering: inherit;
     object-position: center;
    filter: brightness(40%);
    width: 100vw;
}

section#home div:nth-child(3) p {
    font-size: 1.5rem;
    color: var(--color-gray-300);
    text-align: center;
}

.btn-orange-oco {
    border: 2px solid var(--color-accent);
    color: white;
    margin-left: 2rem;
   transition: background-color .5s ease-in-out, transform .5s ease-in-out;

}

.btn-orange-oco:hover {
     border: 2px solid var(--color-accent-hover);
     background-color: var(--color-accent-hover);
    color: white;
     transform: translateY(-2px);  
}

section#home .btn-orange {
    color: white;
    background-color: var(--color-accent);
    transition: background-color .5s ease-in-out, transform .5s ease-in-out;
}

section#home .btn-orange:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-2px);
}

.aumenta {
    height: 11vh;
    width: 23vw;
    line-height: 8vh;
    font-weight: 700;
    border-radius: .8rem;
    font-size: 1.1rem;
}

.junta {
    position: relative;
    bottom: 5vh;
}

.junta3 {
    transform: translateY(-3vh);
}

.custom-card {
            background-color: var(--color-card);
            border: 1px solid var(--border-accent-20) !important;
            border-radius: 12px;
            transition: var(--transition-default);
        }

        /*afeta todos os cards*/
        .custom-card:hover {
            border-color: var(--border-accent-30) !important;
            box-shadow: 0 8px 30px rgba(216, 67, 21, 0.12);
        }

        .hero-content h1 {
            padding-top: 4.5rem;
        }
        
 
        /* ============================================================
           COMO FUNCIONA 
        ============================================================ */

        #servico {
            padding-top: 3rem;
            padding-top: 3rem;
            margin-top: 3rem;
        }
        .step-icon-wrap {
            width: 60px; height: 60px;
            background-color: rgba(216,67,21,0.15);
            border: 1px solid var(--border-accent-30);
            border-radius: 50%;
            color: var(--color-accent);
            transition: var(--transition-default);
        }
        .custom-card:hover .step-icon-wrap {
            background-color: rgba(216,67,21,0.25);
        }
 
        /* Serviço Flexível — setas nos itens da lista */
        #container-flexivel li {
            position: relative;
            padding-left: 22px;
            color: var(--color-gray-400);
            font-size: 0.97rem;
        }
        #container-flexivel li::before {
            content: '→';
            position: absolute;
            left: 0;
            color: var(--color-accent);
            font-weight: 700;
        }

      /* ============================================================
   PORTFOLIO / BUFFETS
   Bootstrap row/col cuida do grid; CSS só para o card visual
============================================================ */
.buffet-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid rgba(216, 67, 21, 0.2);
    transition: var(--transition-default);
}

.buffet-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    filter: brightness(55%);
    transition: var(--transition-default);
}

.buffet-card:hover {
    border-color: rgba(216, 67, 21, 0.35);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.buffet-card:hover img {
    transform: scale(1.07);
    filter: brightness(65%);
}

.buffet-card-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 24px 18px 18px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        transparent 100%
    );
}

.buffet-card-overlay h3 {
    color: var(--color-white);
    font-weight: 700;
}

.buffet-card-overlay p {
    color: var(--color-gray-400);
    font-size: 0.9rem;
}

.buffet-card-overlay span {
    color: var(--color-accent);
    font-size: 0.85rem;
    font-weight: 600;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--color-accent);
    border-radius: 50%;
    padding: 1.4rem;
}

/* Posição das setas — só em telas grandes (desktop) */
@media (min-width: 992px) {
    .carousel-control-prev {
        left: -8vw;
    }

    .carousel-control-next {
        right: -8vw;
    }
}

/* Stat card — hover */
.stat-card {
    background-color: var(--color-card);
    border: 1px solid var(--border-accent-20);
    border-radius: 12px;
    transition: var(--transition-default);
}

.stat-card:hover {
    border-color: var(--border-accent-30);
}

.stat-card strong {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--color-accent);
    line-height: 1;
}

#banner-cta p {
    font-size: 1.2rem;
}
      /* ── Depoimentos — imagem Wilson ───────────────────────────────── */

      section#depoimentos {
        padding-top: 4rem;
      }

.feedback-video-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  background-color: var(--color-card);
}

.feedback-video-card__media {
  width: 100%;
  height: 100%;
  object-fit: inherit;
  display: block;
  min-height: 200px;
  aspect-ratio: 9 / 16;
}

.feedback-video-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: var(--color-gray-400);
  font-size: 0.9rem;
}

/* ── Cards de feedback — formato salsicha ──────────────────────── */
.feedback-card {
  display: flex;
  align-items: stretch;
  background-color: var(--color-card);
  border: 1px solid var(--border-accent-30);
  border-radius: 12px;
  overflow: hidden;
  min-height: 90px;
  transition: border-color 0.2s ease;
}

.feedback-card:hover {
  border-color: var(--color-accent);
}

.feedback-card__meta {
  flex: 0 0 180px;
  padding: 12px 14px;
  border-right: 1px solid var(--border-accent-20);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.feedback-card__stars {
  color: var(--color-accent);
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 1;
}

.feedback-card__desc {
  color: var(--color-gray-400);
  font-size: 12px;
  line-height: 1.4;
}

.feedback-card__print {
  flex: 1;
  background-color: var(--color-darker);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
}

.feedback-card__print img {
  width: 100%;
  height: 100%;
  max-height: 95px;
  border-radius: 6px;
  display: block;
  object-fit: inherit;
}


 
        /* ============================================================
           ORÇAMENTO — inputs com tema escuro
           Bootstrap .form-control não tem bg escuro por padrão
        ============================================================ */

       
        .form-control-dark,
        .form-select-dark {
            background-color: var(--color-dark);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 10px;
            color: var(--color-white);
            font-size: 0.95rem;
            transition: var(--transition-fast);
        }
        .form-control-dark::placeholder { color: var(--color-gray-400); }
        .form-control-dark:focus,
        .form-select-dark:focus {
            background-color: var(--color-dark);
            border-color: var(--color-accent);
            box-shadow: 0 0 0 3px rgba(216,67,21,0.15);
            color: var(--color-white);
        }
        .form-select-dark option { background-color: var(--color-dark); }
        .form-label-custom {
            color: var(--color-accent);
            font-size: 0.85rem;
            font-weight: 600;
        }
        .field-hint { color: var(--color-gray-400); font-size: 0.75rem; }
        .btn-submit-custom {
            background-color: var(--color-accent);
            color: var(--color-white);
            font-weight: 700;
            font-size: 1.05rem;
            border: none;
            border-radius: 10px;
            transition: var(--transition-fast);
        }
        .btn-submit-custom:hover {
            background-color: var(--color-accent-hover);
            color: var(--color-white);
           
        }
 
        /* Contact cards */
        .contact-card {
            background-color: var(--color-dark);
            border: 1px solid var(--border-accent-20);
            border-radius: 10px;
            text-decoration: none;
            transition: var(--transition-fast);
        }
        .contact-card:hover { border-color: var(--border-accent-30); }
        .contact-card .cc-label { color: var(--color-gray-400); font-size: 0.75rem; margin: 0; }
        .contact-card .cc-value { color: var(--color-white); font-weight: 600; font-size: 0.95rem; margin: 0; }
 
        /* ============================================================
           FOOTER
           Bootstrap .row cuida do grid; CSS só para cores e bordas
        ============================================================ */
        .footer-link {
            color: var(--color-gray-400);
            text-decoration: none;
            font-size: 0.9rem;
            transition: var(--transition-fast);
        }
        .footer-link:hover { color: var(--color-accent); }
        .footer-border-top { border-top: 1px solid var(--border-accent-20); }

         /* ── Checkbox grupo — só o que Bootstrap não cobre ───────── */
.form-check-group-dark {
    background-color: var(--color-dark);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: var(--transition-fast);
}

.form-check-group-dark:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--border-accent-20);
}

/* ── Checkbox input ─────────────────────────────────────── */
.form-check-input-dark {
    background-color: var(--color-card);
    border-color: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: var(--transition-fast);
}

.form-check-input-dark:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.form-check-input-dark:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--border-accent-20);
    outline: none;
}

/* ── Checkbox label ─────────────────────────────────────── */
.form-check-dark .form-check-label {
    color: var(--color-gray-400);
    cursor: pointer;
    transition: var(--transition-fast);
}

.form-check:has(.form-check-input-dark:checked) .form-check-label {
    color: var(--color-white);
}
 
        /* ============================================================
           WHATSAPP FAB
        ============================================================ */
        .fab-whatsapp {
            position: fixed;
            bottom: 40px; right: 5vw;
            z-index: 999;
            width: 56px; height: 56px;
            background-color: #25D366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(37,211,102,0.4);
            text-decoration: none;
            transition: var(--transition-fast);
        }
        .fab-whatsapp:hover { transform: scale(1.1); }
        .fab-whatsapp svg { width: 28px; height: 28px; fill: white; }

          /* ============================================================
           instagram FAB
        ============================================================ */

          .fab-instagram {
            position: fixed;
            bottom: 40px; right: 0.3vw;
            z-index: 999;
            width: 56px; height: 56px;
            background-color: #E1306C;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px #E1306C66;
            text-decoration: none;
            transition: var(--transition-fast);
        }
        .fab-instagram:hover { transform: scale(1.1); }
        .fab-instagram svg { width: 28px; height: 28px; fill: white; }