/* Variáveis CSS para cores e fontes (opcional, mas boa prática) */

/* Boa prática global */
* {
    box-sizing: border-box;
}

:root {
    --tastefy-yellow: #ffff00;
    --tastefy-background: #fdfaed;
    --tastefy-dark: #000;
    --tastefy-white: #fff;

    --tastefy-blue: #0d6efd; /* Azul do form de franqueado */
    --tastefy-magenta: #a1007c; /* Magenta do form de trabalho */    
    --tastefy-cyan: #00c4f4; /* Ciano do fundo de franqueado */
}


@font-face {
    font-family: "nutmeg-book";
    src: url(../fonts/Nutmeg-Book.ttf);
}
@font-face {
    font-family: "nutmeg-bold";
    src: url(../fonts/Nutmeg-Bold.ttf);
}
@font-face {
    font-family: "nutmeg-black";
    src: url(../fonts/Nutmeg-Black.ttf);
}
@font-face {
    font-family: "nutmeg-extra";
    src: url(../fonts/Nutmeg-ExtraBold.ttf);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.t3 {
    font-family: 'nutmeg-black';
    font-size: 38px;
}
body {
    font-family: "nutmeg-book";
    background-color: var(--tastefy-background);
    color: #000; /* Cor de texto padrão */
    /* Remove qualquer margem ou padding padrão do body que possa ser adicionado por alguns navegadores */
    margin: 0; 
    padding: 0 !important;
    /* Garante que o body não crie uma barra de rolagem horizontal desnecessária */
    overflow-x: hidden; 
}

/* Ajuste do container para respeitar o aspecto-ratio ou largura mais controlada */
.container {
    max-width: 1200px; /* Largura máxima para o container */
    margin: 0 auto; /* Centraliza o container */
    padding-left: 15px; /* Padding padrão para evitar que o conteúdo cole nas bordas */
    padding-right: 15px; /* Padding padrão para evitar que o conteúdo cole nas bordas */
    width: 100%; /* Garante que o container sempre tente ocupar 100% da largura disponível */
}

/* Para telas menores que 992px (tablets e celulares) - Bootstrap's default for 'md' breakpoint */
@media (max-width: 991.98px) { 
    .container {
        padding-left: 15px; 
        padding-right: 15px;
        /* Não é necessário mudar max-width para 100% aqui, 
           pois Bootstrap já faz isso e o padding já garante o espaçamento */
    }
}

/* Para telas menores que 576px (celulares pequenos) - Bootstrap's default for 'sm' breakpoint */
@media (max-width: 575.98px) {
    .container {
        padding-left: 15px; 
        padding-right: 15px;
    }
    .multi-brand-section .container { padding-left: 0px !important; padding-right: 0px !important;}
}

/* Navbar */
.navbar {

    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: 0.5s;
}

.fixi {
    padding-top: 0px;
    padding-bottom: 0px;
}

.abs {
    padding-top: 30px;
    padding-bottom: 30px;
}

.navbar-nav .nav-link {
    color: var(--tastefy-dark);
    font-weight: bold;
    margin-left: 15px;
    transition: color 0.3s ease;
    font-size: 14px;
    font-weight: 600;
}

.bolder {
    font-weight: bolder;
    font-family: "nutmeg-bold";
    text-transform: uppercase;
}

.bolder-title {
    font-family: "nutmeg-black";
}

.titulo-desk {
    font-family: "nutmeg-black";
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #555; /* Um tom um pouco mais escuro ao hover/ativo */
}

/* Estilo para botões primários (personalizado para Tastefy) */
.btn-primary {
    background-color: var(--tastefy-dark);
    color: var(--tastefy-yellow);
    border-color: var(--tastefy-dark);
    font-weight: bold;
    padding: 12px 30px;
    border-radius: 50px; /* Botões mais arredondados */
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-family: "nutmeg-bold";
}

.btn-primary-yellow {
    background-color: var(--tastefy-yellow);
    color: var(--tastefy-dark);
    border-color: var(--tastefy-dark);
    font-weight: bold;
    padding: 12px 30px;
    border-radius: 50px; /* Botões mais arredondados */
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-family: "nutmeg-bold";
    border: 0;

}

.btn-primary-yellow:hover {
    background-color: #333;
    border-color: #333;
    color: var(--tastefy-yellow);
    transform: scale(1.05);
}

.btn-primary:hover {
    background-color: #333;
    border-color: #333;
    color: var(--tastefy-yellow);
    transform: scale(1.05);
}

.btn-saiba-mais {
    background-color: #000;
    color: #ffdd00;
    font-weight: 800;
    border-radius: 50px; /* Formato de pílula */
    padding: 0.8rem 2.5rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-saiba-mais:hover {
    color: #fff;
    transform: scale(1.05);
}

/* Classes personalizadas para arredondamento */
.rounded-30a {
    border-radius: 120px !important;
}

.rounded-30 {
    border-radius: 30px !important;
}

.evolve {
    border: solid 1px #fff;
    padding: 10px 15px 10px 15px;
    border-radius: 5px;
}

.revolve {
    position: relative;
    background-color: #ffff00;
    width: 350px;
    height: 250px;
    border-radius: 130px;
}

.revolve img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100px;
}

#menu-footer-esquerda li a,
#menu-footer-centro li a,
#menu-footer-direita li a { color: #fff; margin-bottom: -4px;}

/* Seção Slider */
#slider {
    position: relative;
    overflow: hidden; /* Garante que as imagens de fundo não "vazem" */
    padding-top: 70px; /* Espaçamento para a navbar fixa */
}

.slick-slider-container {
    height: 100%;
}

.slick-slide-item {
    min-height: 100vh; /* Garante que cada slide ocupe a altura total */
    background-size: cover;
    background-position: center;
    position: relative; /* Para o overlay de conteúdo */
}

#slider .card {
    position: relative; /* Posição relativa dentro do slide */
    z-index: 2; /* Para ficar acima da imagem de fundo */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

#slider .slick-dots {
    bottom: 50px; /* Posição dos dots */
}

.slick-dots {
	bottom: -8px;
}

/* Customização dos dots e arrows do Slick Slider */
.slick-dots li button:before {
    font-size: 50px;
    color: var(--tastefy-yellow); /* Cor dos dots */
    opacity: 0.75;
}

.slick-dots li.slick-active button:before {
    color: var(--tastefy-dark); /* Cor do dot ativo */
    opacity: 1;
}

/* Estilo para o container de navegação customizado */
.slider-nav-controls,
.restaurantes-nav-controls,
.depoimentos-nav-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Para posicionamento dos arrows */
    gap: 15px; /* Espaçamento entre dots e arrows */
    margin-top: 20px;
    z-index: 10; /* Garante que estejam acima de outros elementos */
}

/* Arrows personalizados */
.slick-custom-arrow {
    background-color: var(--tastefy-dark);
    color: var(--tastefy-yellow);
    border: none;
    padding: 10px 15px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.slick-custom-arrow:hover {
    background-color: #333;
    color: var(--tastefy-yellow);
}


.subcta {
    font-family: 'nutmeg-bold';
    font-size: 25px;
    text-transform: uppercase;
}
.titcta {
    font-family: 'nutmeg-black';
    font-size: 37px;
}



.slick-custom-arrow.slick-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#nossos-restaurantes {
    padding-top: 100px;
}

/* Ajustes específicos para os carrosséis */
#nossos-restaurantes .card {
	box-shadow: 0 4px 10px rgba(0,0,0,0.08);
	transition: transform 0.2s ease;
	border: 0px;
	border-bottom: solid 2px #000;
	border-radius: 0;
}

#nossos-restaurantes .card:hover {
    transform: translateY(-5px);
}

#numeros {
    position: relative;
    /*margin-top: 100px;*/
    padding-top: 100px;
    padding-bottom: 100px;
 
}

.boxImage {
    position: relative;
    background-image: url(../img/fundo_numeros.png);
    background-repeat: no-repeat;
    width: 100%;
    min-height: 500px;
    background-size: cover;
}

.cardbox {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tastefloat {
    position: relative;
}

.tasteImg {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 350px;
}

#o-que { padding-top: 100px; padding-bottom: 100px;}

#seja-franqueado, #equipe, #trabalhe, #faq{
    padding-top: 100px;
    padding-bottom: 100px;
}
#sobre-app {
    padding-top: 100px;
    padding-bottom: 100px;
}

.imgFloat { position: absolute; right: 20%; top: -100px;}


.subt {
    font-family: "nutmeg-black";
    text-transform: uppercase;
    font-size: 20px;
}
.t {
    font-family: "nutmeg-bold";
    font-size: 48px;
}
.t2 {
    font-family: "nutmeg-bold";
    font-size: 48px;
}

.p {
    font-size: 20px;
}

.boldline {
	font-family: "nutmeg-black";
	color: #ffff00;
	text-shadow: 4px 2px 4px #000;
}

.alista {
     list-style-image: url(../img/seta.png);
}

.alista li  {
    font-size: 20px;
    margin-bottom: 35px;
}

.mini { font-size: 20px; margin-top: 70px; }

/* Seção marcas */
#marcas img {
    /*border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);*/
}

.vh-65 {
  min-height:75vh!important
}

.vh-45 {
  min-height:55vh!important
}

.num-title { 
    font-family: "nutmeg-bold";
    font-weight: 700;
    font-size: 48px;
    line-height: 55px;
    letter-spacing: 0%;
    vertical-align: middle;
    text-transform: uppercase;
}

.num-texto {    
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0%;
}

.slick-prev::before {
    content: none;
}
.slick-next::before {
    content: none;
}

#restaurantes-grid {
    padding-top: 125px /*150px;*/;
    padding-bottom: 50px;
}

/* Seção principal */
#premios {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

#onde-comecou {
    padding-top: 50px;
    padding-bottom: 50px;
}

.evolver {
     position: relative;
     background-color: #ffff00; /* Cor amarela vibrante */
   /*  border-top-right-radius: 45px;
     border-bottom-right-radius: 45px;*/
     border-radius: 100px;
     padding: 40px;
     min-height: 190px;
}

.evolver img {
/*    position: absolute;
    top: 25px;
    right: 25px;
  */
  display: block;  
  margin: 0 auto;
}

/* O card amarelo principal */
.premios-card {
    background-color: #ffff00; /* Cor amarela vibrante */
    border-radius: 40px; /* Bordas bem arredondadas */
    padding: 2rem;
    position: relative;
    padding-top: 50px;
    padding-bottom: 50px;
  /*  overflow: hidden; /* Garante que o monstro não vaze para fora das bordas arredondadas */
}

/* Conteúdo de texto dentro do card */
.premios-text h2 {
     font-family: "nutmeg-bold";
    font-weight: 900; /* Extra bold */
    font-size: 3.5rem;
    color: #000;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.premios-text { padding: 25px;}

.premios-text p {
    font-size: 1.25rem;
    color: #1c1c1c;
    margin-bottom: 2rem;
}

/* Botão personalizado */
.btn-saiba-mais {
    background-color: #000;
    color: #ffdd00;
    font-weight: 800;
    border-radius: 50px; /* Formato de pílula */
    padding: 0.8rem 2.5rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-saiba-mais:hover {
    color: #fff;
    transform: scale(1.05);
}

/* Container do monstro */
.premios-monster {
    position: absolute;
    right: 0px;
    bottom: -60px; /* Puxa a imagem para baixo, como no original */
    width: 400px; /* Ajuste a largura conforme necessário */
    z-index: 1; /* Garante que fique acima de outros elementos se necessário */
}

.multit {
    background-size: cover; background-color: #ffff00; background-image: url(../img/fundo_amarelo.png)
}

/* ================================================= */
/* AJUSTES PARA DISPOSITIVOS MÓVEIS (RESPONSIVIDADE) */
/* ================================================= */
@media (max-width: 991.98px) { /* Tablets e celulares */
    #premios {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .premios-card {
        padding: 3rem 1.5rem;
        /* Adicionamos o monstro como imagem de fundo para telas menores */
        background-image: url('monstro-premios.png');
        background-repeat: no-repeat;
        background-position: bottom -50px center;
        background-size: 280px;
        padding-bottom: 250px; /* Espaço extra para a imagem de fundo não sobrepor o botão */
    }

    .premios-text h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) { /* Celulares pequenos */
    .premios-text h1 {
        font-size: 2rem;
    }

    .premios-card {
        background-position: bottom -40px center;
        background-size: 220px;
        padding-bottom: 54px;
        background: none;
    }
}


/**/

 /* --- Custom Components --- */
        .btn-tastefy {
            background-color: var(--tastefy-yellow);
            color: var(--tastefy-dark);
            font-weight: 700;
            padding: 12px 30px;
            border-radius: 50px;
            border: none;
            transition: all 0.3s ease;
        }

        .btn-tastefy:hover {
            transform: scale(1.05);
            background-color: #e8dd02;
            color: var(--tastefy-dark);
        }

        .pill {
            background-color: var(--tastefy-yellow);
            border-radius: 50px;
            padding: 20px 30px;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        .pill h3 {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 0;
        }
        
        .pill p {
            font-weight: 600;
            margin-bottom: 0;
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: 800;
        }

        .section-title {
            font-size: 3rem;
            font-weight: 800;
        }

        /* --- Header --- */
        .navbar-tastefy {
            background-color: var(--tastefy-yellow);
        }
        .navbar-tastefy .navbar-brand img {
            height: 40px;
        }
        .navbar-tastefy .nav-link {
            color: var(--tastefy-dark);
            font-weight: 600;
            margin: 0 10px;
        }

        /* --- Hero Section --- */
        .hero-section {
            background-image: url('https://i.imgur.com/uR1l3zI.jpeg'); /* Placeholder - use your actual image path */
            background-size: cover;
            background-position: center;
            padding: 100px 0;
            position: relative;
        }
        .hero-content {
            background-color: var(--tastefy-yellow);
            padding: 40px;
            border-radius: 30px;
            max-width: 500px;
        }
        .hero-content .subtitle {
            font-weight: 700;
        }
        .hero-content .title {
            font-size: 4rem;
            font-weight: 800;
            line-height: 1.1;
        }

        /* --- Financials Section --- */
        .financials-section .main-title {
            font-size: 3.5rem;
            font-weight: 800;
            line-height: 1.2;
        }
        .financials-section .subtitle {
            font-weight: 600;
        }
        .financials-section .pill h3 {
            font-size: 2rem;
        }
        
        /* --- Why Tastefy Section --- */
        .why-tastefy-item {
            display: flex;
            align-items: flex-start;
            gap: 25px;
        }
        .why-tastefy-number {
            background-color: var(--tastefy-yellow);
            border-radius: 50%;
            min-width: 70px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            font-weight: 800;
        }
        .why-tastefy-item h3 {
            font-size: 1.2rem;
            font-weight: 600;
            text-transform: uppercase;
            margin-bottom: 0;
        }
        .why-tastefy-item h2 {
            font-size: 3.5rem;
            line-height: 1.0;
            margin-top: 5px;
        }

        /* --- How It Works Section --- */
        .how-it-works-item img {
            width: 150px;
            height: 150px;
            object-fit: cover;
            border-radius: 50%;
        }
        .how-it-works-item h3 {
            font-size: 2.5rem;
        }
        .how-it-works-item .saiba-mais-link {
            font-weight: 700;
            color: var(--tastefy-dark);
            text-decoration: none;
        }

        /* --- Kitchen Timeline Section --- */
        .kitchen-timeline {
            background-color: var(--tastefy-pink);
            border-radius: 30px;
            padding: 40px;
        }
        .timeline-header {
            display: flex;
            justify-content: space-between;
            font-weight: 700;
            color: var(--tastefy-dark);
            padding-left: 150px; /* To align with bars */
        }
        .brand-row {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .brand-name {
            min-width: 150px;
            font-weight: 700;
            text-align: right;
            padding-right: 20px;
        }
        .brand-bar-bg {
            flex-grow: 1;
            height: 30px;
            background-color: var(--tastefy-gray);
            border-radius: 50px;
            position: relative;
            overflow: hidden;
        }
        .brand-bar-active {
            position: absolute;
            height: 100%;
            background-color: var(--tastefy-yellow);
        }

        /* --- Partnerships Section --- */
        .partner-circle {
            background-color: var(--tastefy-yellow);
            border-radius: 32%;
            width: 200px;
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            text-align: center;
            margin: auto;
        }
        .partner-circle img {
            max-height: 50px;
            margin-bottom: 10px;
        }
        .partner-circle p {
            font-size: 0.8rem;
            font-weight: 600;
            margin: 0;
        }

        /* --- Testimonial Section --- */
        .testimonial-section {
            position: relative;
        }
        .testimonial-bubble {
            background-color: var(--tastefy-yellow);
            border-radius: 80px;
            padding: 60px;
        }
        .testimonial-slide {
            display: none;
        }
        .testimonial-slide.active {
            display: block;
        }
        .testimonial-bubble h3 {
            font-size: 1.8rem;
        }
        .testimonial-bubble p {
            font-size: 1.2rem;
            font-style: italic;
        }
        .testimonial-bubble .author {
            font-weight: 700;
            font-style: normal;
        }
        .carousel-controls {
            position: absolute;
            width: 100%;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
        }
        .carousel-arrow {
            background-color: var(--tastefy-yellow);
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 1.5rem;
            font-weight: bold;
        }
        .carousel-dots {
            text-align: center;
            margin-top: -20px; /* Pulls dots up into the bubble */
            position: relative;
            z-index: 5;
        }
        .dot {
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 5px;
            background-color: var(--tastefy-yellow);
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }
        .dot.active, .dot:hover {
            background-color: var(--tastefy-dark);
        }

        /* --- Requirements Section --- */
        .requirement-item {
            display: flex;
            gap: 20px;
            align-items: center;
        }
        .requirement-icon {
            background-color: var(--tastefy-yellow);
            border-radius: 50%;
            min-width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
        }
        .requirement-item h3 {
            font-weight: 700;
            margin-bottom: 5px;
            font-size: 23px;
            font-family: 'nutmeg-bold';
        }
        
        /* --- FAQ Section --- */
        .faq-section .accordion-item {
            background-color: var(--tastefy-yellow);
            border: none;
            border-radius: 50px !important;
            margin-bottom: 15px;
        }
        .faq-section .accordion-button {
            background-color: var(--tastefy-yellow);
            color: var(--tastefy-dark);
            font-weight: 700;
            border-radius: 50px !important;
            box-shadow: none;
        }
        .faq-section .accordion-button:not(.collapsed) {
            background-color: var(--tastefy-yellow);
        }
        .faq-section .accordion-button::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23121212'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }
        .faq-section .accordion-body {
            font-weight: 500;
            padding: 0 1.25rem 1.25rem;
        }

        /* --- Contact Section --- */
        .contact-section {
            background-color: var(--tastefy-orange);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3e%3cpath fill='%23f9f002' fill-opacity='1' d='M0,224L48,213.3C96,203,192,181,288,186.7C384,192,480,224,576,240C672,256,768,256,864,234.7C960,213,1056,171,1152,149.3C1248,128,1344,128,1392,128L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3e%3c/path%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: top center;
            background-size: cover;
            padding: 150px 0 100px 0;
            color: var(--tastefy-dark);
            position: relative;
            overflow: hidden;
        }
        .contact-section .subtitle {
            font-weight: 700;
        }
        .contact-section .mascot {
            position: absolute;
            right: 0;
            bottom: -50px;
            width: 350px;
            opacity: 0.9;
        }
        @media (max-width: 992px) {
            .contact-section .mascot {
                display: none;
            }
        }

/***/


/**/
/* 3) PLANS SECTION */
.plans-section {
    padding: 80px 0;
}
.plan-card {
    background-color: #FF9A00;
    color: #000;
    padding: 40px;
    border-radius: 20px;
    margin: 0 15px;
    text-align: center;
}
.plan-card h2 {
    font-weight: 800;
    margin-bottom: 25px;
}
.plan-card p {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Slick Slider Customization 
.slick-dots { bottom: -40px; }
.slick-dots li button:before { font-size: 12px; color: #FFDD00; opacity: 0.5; }
.slick-dots li.slick-active button:before { color: #FFDD00; opacity: 1; }
.slick-prev, .slick-next {
    width: 50px;
    height: 50px;
    background-color: #FFDD00;
    border-radius: 50%;
    z-index: 10;
}
.slick-prev:hover, .slick-next:hover { background-color: #ffd000; }
.slick-prev { left: -60px; }
.slick-next { right: -60px; }
.slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 24px; color: black; }
.slick-prev:before { content: '<'; }
.slick-next:before { content: '>'; }
*/
/* 4) BRANDS SECTION */
.brands-section {
    padding: 80px 0;
}
.brand-showcase .brand-logo {
    max-height: 80px;
    width: auto;
}
.brand-showcase p {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.5;
}
.brands-grid {
    margin-top: 50px;
}

.numtext {
	font-family: 'nutmeg-black';
	color: #AB008A;
	font-size: 43px;
	font-weight: bold;
	line-height: 40px;
	text-align: left;
}

.numtext small {
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	display: block;
}
/* 5) REQUIREMENTS SECTION */
.requirements-section {
    padding: 80px 0;
    background-color: #fff;
}
.requirement-item {
	display: flex;
	align-items: center;
	margin-bottom: -8px;
	/* margin-left: 15rem; */
	/* margin-right: 15rem; */
	padding: 30px;
}
.requirement-item .icon-box {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background-color: #FFDD00;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #000;
    margin-right: 25px;
}
.requirement-item .text-box {
    font-size: 1.1rem;
    line-height: 1.6;
}
.requirement-item .text-box strong {
    font-weight: 700;
}

/* 6) TESTIMONIALS SECTION */
.testimonials-section {
    padding: 80px 0;
}
.testimonial-card {
    background-color: #FFDD00;
    border-radius: 30px;
    padding: 50px;
    margin: 0 15px;
    text-align: center;
}
.testimonial-card h3 {
    font-weight: 800;
    font-size: 2.5rem;
    margin-bottom: 20px;
}
.testimonial-card p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}
.testimonial-card .author {
    font-weight: 600;
}

/* 7) CTA SECTION */
.cta-section {
    background-image: url('img/cta-bg.svg'); /* Crie um SVG ou PNG com o padrão ondulado */
    background-color: #FF9A00;
    background-size: cover;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.cta-section .subtitle {
    font-weight: 600;
    color: #000;
}
.cta-section .title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #000;
    margin-bottom: 30px;
}
.cta-monster {
    position: absolute;
    right: 5%;
    bottom: -20px;
    width: 300px;
    height: auto;
}

/**/


/**/
/* Mascots */
.mascot {
    position: absolute;
    z-index: 10;
}
.mascot-running {
    width: 150px;
    bottom: -20px;
    right: 0;
}
.mascot-hungry {
    width: 200px;
    bottom: -50px;
    right: -50px;
}


/* Slogan Section */
.rounded-image-container {
    border-radius: 30px;
    overflow: hidden;
}

/* Grey Placeholder */
.grey-placeholder {
    background-color: var(--grey-placeholder);
    padding: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 150px;
    text-align: center;
}
.grey-placeholder-slider {
    background-color: var(--grey-placeholder);
    height: 300px;
    margin: 0 10px;
}

/* Main Dishes Section */
.yellow-blob {
    background-color: var(--brand-yellow);
    height: 250px;
    border-radius: 50% / 60% 60% 40% 40%;
}
.yellow-blob.blob-2 {
    border-radius: 60% 40% 30% 70% / 60% 60% 40% 40%;
}
.yellow-blob.blob-3 {
    border-radius: 30% 70% 50% 50% / 50% 50% 50% 50%;
}


/* Restaurant Carousel */
.restaurant-slider .slick-slide {
    padding: 0 15px;
}

.restaurant-card {
    position: relative;
    border: none;
    background-color: transparent;
    text-align: left;
}
.restaurant-card .card-img-top {
    border-radius: 20px;
}
.restaurant-card .card-logo {
    position: absolute;
    width: 80px;
    bottom: 60px;
    left: 20px;
    z-index: 5;
}
.restaurant-card .card-mascot {
    position: absolute;
    width: 90px;
    bottom: 50px;
    right: 20px;
    z-index: 5;
}
.restaurant-card .card-body {
    padding: 15px 5px;
}
.restaurant-card .card-title {
    font-weight: bold;
}
.restaurant-card .card-text {
    color: #555;
    display: flex;
    justify-content: space-between;
}
.restaurant-card .price-indicator {
    float: none;
    margin: 0;
}
.franchise-image-container {
    position: relative;
}
.franchise-image-container .rounded-image {
    border-radius: 30px;
}

/* Location Section */
.location-section {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background-image: url('https://i.imgur.com/uR1rF0R.png');
    background-size: cover;
    background-position: center;
}
.location-section .map-image {
    max-width: 600px;
    margin-top: 40px;
}
.btn-black {
    background-color: var(--brand-black);
    color: white;
    font-weight: bold;
    padding: 12px 30px;
    border-radius: 50px;
    border: none;
}
.btn-black:hover {
    background-color: #333;
    color: white;
}
    /* --- Hero Section --- */
        .hero-section {
            background-color: var(--bg-light);
        }
       /* .map-placeholder {
            width: 100%;
            height: 400px;
            background-color: var(--brand-yellow);
            -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><path d="M473.6,14.2c-15.6-10.4-36.4-13-54.6-6.2L393.2,19.9l-11.8,2.7l-10.1-6.2c-5.1-3.4-10.1-5.1-15.3-5.1c-11.8,0-22.8,7.6-26.2,18.6l-1.7,5.9l-10.1,0c-15.2,0-29.6,8.4-36.3,21.1l-10.1,18.6L256,66.8l-15.2-1.7c-16.9-1.7-33.8,5.1-44,16.9L186.7,94l-11.8,8.4L156.3,94l-16.9-13.5l-18.6-1.7l-20.3,10.1l-10.1,15.2l-5.1,15.2l-1.7,22l5.1,15.2l-1.7,11.8l-10.1,18.6l-15.2,16.9l-11.8,20.3l-1.7,18.6l10.1,13.5l-3.4,20.3l-10.1,10.1l-11.8,22l1.7,23.7l11.8,11.8l10.1,11.8l20.3,13.5l11.8,20.3l15.2,8.4l11.8,11.8l18.6,10.1l11.8,15.2l18.6,10.1l22,11.8l23.7,6.8l25.3,10.1l15.2,15.2l13.5,23.7l18.6,15.2l20.3,15.2l18.6,6.8l13.5-3.4l18.6,3.4l13.5,6.8l27,1.7l15.2-10.1l20.3-6.8l22-13.5l15.2-16.9l8.4-15.2l13.5-13.5l11.8-22l11.8-16.9l5.1-15.2l1.7-18.6l-10.1-16.9l-6.8-16.9l-6.8-15.2l-10.1-15.2l-3.4-13.5l-10.1-16.9l-13.5-16.9l-10.1-10.1l-11.8-13.5l-15.2-10.1l-11.8-15.2l-15.2-10.1l-13.5-16.9l-20.3-15.2l-15.2-13.5l-15.2-10.1l-10.1-10.1l-11.8-6.8l-10.1-11.8l-1.7-15.2l8.4-10.1l-1.7-10.1l10.1-10.1l6.8-6.8l10.1-1.7l8.4-10.1l1.7-8.4l-3.4-8.4l8.4-8.4l13.5-5.1l11.8-8.4l8.4-8.4l6.8-10.1l-1.7-6.8l6.8-5.1l3.4-8.4l8.4-3.4l11.8-5.1l8.4-6.8l-1.7-5.1l5.1-3.4l-1.7-5.1l1.7-3.4V30.4l3.4-3.4l1.7-5.1l3.4-1.7l1.7-5.1V14.2z"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><path d="M473.6,14.2c-15.6-10.4-36.4-13-54.6-6.2L393.2,19.9l-11.8,2.7l-10.1-6.2c-5.1-3.4-10.1-5.1-15.3-5.1c-11.8,0-22.8,7.6-26.2,18.6l-1.7,5.9l-10.1,0c-15.2,0-29.6,8.4-36.3,21.1l-10.1,18.6L256,66.8l-15.2-1.7c-16.9-1.7-33.8,5.1-44,16.9L186.7,94l-11.8,8.4L156.3,94l-16.9-13.5l-18.6-1.7l-20.3,10.1l-10.1,15.2l-5.1,15.2l-1.7,22l5.1,15.2l-1.7,11.8l-10.1,18.6l-15.2,16.9l-11.8,20.3l-1.7,18.6l10.1,13.5l-3.4,20.3l-10.1,10.1l-11.8,22l1.7,23.7l11.8,11.8l10.1,11.8l20.3,13.5l11.8,20.3l15.2,8.4l11.8,11.8l18.6,10.1l11.8,15.2l18.6,10.1l22,11.8l23.7,6.8l25.3,10.1l15.2,15.2l13.5,23.7l18.6,15.2l20.3,15.2l18.6,6.8l13.5-3.4l18.6,3.4l13.5,6.8l27,1.7l15.2-10.1l20.3-6.8l22-13.5l15.2-16.9l8.4-15.2l13.5-13.5l11.8-22l11.8-16.9l5.1-15.2l1.7-18.6l-10.1-16.9l-6.8-16.9l-6.8-15.2l-10.1-15.2l-3.4-13.5l-10.1-16.9l-13.5-16.9l-10.1-10.1l-11.8-13.5l-15.2-10.1l-11.8-15.2l-15.2-10.1l-13.5-16.9l-20.3-15.2l-15.2-13.5l-15.2-10.1l-10.1-10.1l-11.8-6.8l-10.1-11.8l-1.7-15.2l8.4-10.1l-1.7-10.1l10.1-10.1l6.8-6.8l10.1-1.7l8.4-10.1l1.7-8.4l-3.4-8.4l8.4-8.4l13.5-5.1l11.8-8.4l8.4-8.4l6.8-10.1l-1.7-6.8l6.8-5.1l3.4-8.4l8.4-3.4l11.8-5.1l8.4-6.8l-1.7-5.1l5.1-3.4l-1.7-5.1l1.7-3.4V30.4l3.4-3.4l1.7-5.1l3.4-1.7l1.7-5.1V14.2z"/></svg>');
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            filter: drop-shadow(0px 10px 15px rgba(0,0,0,0.1));
        }*/

        .hero-section h1 {
            font-size: clamp(3rem, 10vw, 6rem);
            line-height: 1;
        }

        .hero-section p {
            font-size: 1.25rem;
            font-weight: 700;
        }

        /* --- Locations Section --- */
        .btn-filter {
            background-color: transparent;
            border: 2px solid var(--text-dark);
            border-radius: 999px;
            padding: 0.5rem 1.5rem;
            font-weight: 700;
            margin: 0.25rem;
            color: var(--text-dark);
        }

        .btn-filter.active, .btn-filter:hover {
            background-color: var(--brand-yellow);
            border-color: var(--brand-yellow);
        }

        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #e0e0e0;
            padding-bottom: 1rem;
            margin-bottom: 2rem;
        }

        .results-header span {
            font-weight: 700;
        }

        .location-item {
            display: flex;
            justify-content: space-between;
            padding: 1.5rem 0;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .location-item-info strong {
            display: block;
            font-size: 1.25rem;
            font-weight: 900;
        }

        .pagination-dots {
            text-align: center;
            margin-top: 2rem;
        }

        .pagination-dots .dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: #d9d9d9;
            border-radius: 50%;
            margin: 0 5px;
        }

        .pagination-dots .dot.active {
            background-color: var(--brand-yellow);
        }

        .back-to-top {
            display: block;
            text-align: center;
            margin-top: 1rem;
            color: var(--text-dark);
            font-weight: 700;
        }

        /* --- CTA Restaurants --- */
        .cta-restaurants-section {
            position: relative;
            overflow: hidden;
            background-color: var(--brand-orange);
        }
        
        .cta-restaurants-section .wavy-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .cta-restaurants-section .content {
            position: relative;
            z-index: 1;
        }
        
        .label-sm {
            display: inline-block;
            background-color: var(--brand-black);
            color: white;
            padding: 0.25rem 0.75rem;
            font-size: 0.8rem;
            font-weight: 700;
            border-radius: 4px;
            margin-bottom: 1rem;
        }
        
        .cta-restaurants-section h2 {
            font-size: clamp(2.5rem, 8vw, 5rem);
            line-height: 1;
            color: var(--text-dark);
        }

        .btn-black {
            background-color: var(--brand-black);
            color: white;
            border-radius: 999px;
            padding: 0.75rem 2rem;
            font-weight: 700;
            border: none;
        }
        
        .mascot-cta-placeholder {
            width: 100%;
            max-width: 350px;
            height: 350px;
            margin: auto;
            background-color: var(--brand-yellow);
            border-radius: 50%;
            border: 10px solid var(--text-dark);
            position: relative;
        }

        /* --- CTA Franchise --- */
        .cta-franchise-section h2 {
            font-size: clamp(2.5rem, 8vw, 4rem);
            line-height: 1.1;
        }
        
        .image-collage {
            position: relative;
            max-width: 450px;
            margin: auto;
        }
        .photo-franchise-placeholder {
            width: 100%;
            padding-top: 100%; /* 1:1 Aspect Ratio */
            background-color: #d9d9d9;
            border-radius: 40px;
            position: relative;
        }

        .mascot-franchise-placeholder {
            position: absolute;
            width: 60%;
            height: 60%;
            background-color: var(--brand-yellow);
            border: 8px solid var(--text-dark);
            border-radius: 50%;
            right: -10%;
            bottom: -15%;
        }


/**/
/* Card de Restaurante (Grid Estático) */
        .restaurant-card {
            border-bottom: 1px solid #eee;
            padding-bottom: 1.5rem;
        }
        .restaurant-card .image-container {
            position: relative;
        }
        .restaurant-card .image-container img.card-img {
            border-radius: 15px;
        }
        .restaurant-card .brand-logo {
            position: absolute;
            bottom: -30px;
            left: 20px;
            width: 150px;
            /*height: 80px;*/
            z-index: 2;
        }
        .restaurant-card .mascot {
            position: absolute;
            bottom: -10px;
            right: 15px;
            width: 90px;
            z-index: 1;
        }
        .restaurant-card .card-content {
            padding: 50px 10px 10px 10px;
        }
        .restaurant-card .card-title {
            font-weight: 800;
            font-size: 1.4rem;
        }
        .restaurant-card .card-text {
            color: #6c757d;
        }
        .restaurant-card .price {
            font-family: var(--heading-font);
            font-weight: 800;
            font-size: 1.5rem;
        }
       /* .restaurant-card*/ .price-faded {
            color: #ccc;
        }

        /* Card de "Quer Mais?" */
        .more-options-card {
            background-color: transparent; /* Ou uma cor de fundo sutil se necessário */
            padding: 2rem;
        }
        .more-options-card h2 {
            font-size: 3.5rem;
            line-height: 1.2;
        }
        .more-options-card .food-icons i {
            font-size: 3rem;
            margin: 0 0.5rem;
        }

        /* --- Seção Filtros --- */
        .filters  {
            max-width: 650px;
            margin: 0 auto;
        }

        .filters .btn-filter {
            background-color: var(--primary-yellow);
            border: none;
            color: var(--dark-text);
            font-weight: 500;
            padding: 0.5rem 1.5rem;
            margin: 5px;
        }
        .filters .btn-filter.active, .filters .btn-filter:hover {
            background-color: #e6c600;
        }
        .results-count {
            color: #6c757d;
        }
        
        /* --- Lista de Restaurantes --- */
        .restaurant-list-item {
            display: flex;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid #eee;
            margin-left: 3rem;
            margin-right: 3rem;
        }
        .restaurant-list-item:last-child {
            border-bottom: none;
        }
        .restaurant-list-item .image-container {
            position: relative;
            flex-shrink: 0;
            width: 380px;
        }
        .restaurant-list-item .image-container img.main-img {
            width: 100%;
            border-radius: 15px;
        }
        .restaurant-list-item .brand-logo {
            position: absolute;
            width: 100px;
           /* height: 100px;*/
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }
        .restaurant-list-item .info-container {
            padding-left: 2rem;
        }
        .restaurant-list-item h3 {
            font-size: 2.5rem;
        }

        /* --- Seção Franqueado --- */
        .franchise-section h4 {
            font-size: 1.2rem;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        .franchise-section h2 {
            font-size: 3.5rem;
        }
        .btn-cta {
            background-color: var(--primary-yellow);
            color: var(--dark-text);
            font-family: var(--heading-font);
            font-weight: 800;
            padding: 0.8rem 2rem;
            border-radius: 50px;
            font-size: 1.1rem;
            text-decoration: none;
            display: inline-block;
        }
        .franchise-section .image-wrapper {
            position: relative;
        }
        .franchise-section .image-wrapper img.franchise-person {
            border-radius: 20px;
        }
        .franchise-section .mascot {
            position: absolute;
            width: 200px;
            right: -50px;
            bottom: -30px;
        }
/**/


/* Estilos personalizados para a seção FAQ (opcional) */
.faq-section {
  background-color: transparent; /* Fundo da seção transparente */
}

.faq-title {
  color: #000; /* Cor do título */
  font-weight: 700;
  font-family: "nutmeg-bold";
  font-size: 40px;
}

.accordion-item {
  border: 1px solid rgba(0, 0, 0, 0.125);
  margin-bottom: 10px; /* Espaçamento entre os itens do acordeão */
  border-radius: 0.5rem; /* Cantos levemente arredondados para o item inteiro */
  overflow: hidden;
}

.accordion-button {
  background-color: #ffff00; /* Fundo do botão da pergunta: amarelo */
  color: #495057; /* Cor do texto da pergunta */
  font-weight: 600;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem; /* Cantos levemente arredondados para o botão da pergunta */
}

.accordion-button:not(.collapsed) {
  color: #0d6efd; /* Cor do texto da pergunta quando expandido */
  background-color: #e7f1ff; /* Fundo do botão da pergunta quando expandido */
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

.accordion-body {
  background-color: #ffffff; /* Fundo da resposta */
  color: #6c757d; /* Cor do texto da resposta */
  padding: 1.25rem;
  border-bottom-left-radius: 0.5rem; /* Arredondar a parte inferior da resposta */
  border-bottom-right-radius: 0.5rem; /* Arredondar a parte inferior da resposta */
}



/* contato */
/* --- Estilos Gerais das Seções --- */
.form-section {
    padding: 100px 0;
    position: relative;
  /*  background-color: var(--tastefy-yellow); /* Cor de fallback */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.section-subtitle {
    font-weight: 700;
    color: var(--tastefy-dark);
    letter-spacing: 1px;
}

.section-title {
    font-weight: 900;
    font-size: 3.5rem;
    color: var(--tastefy-dark);
}

/* --- Imagens de Fundo Específicas --- */
#sejafranqueado {
    padding-top: 80px;
    padding-bottom: 80px;
    /* IMPORTANTE: Troque pelo caminho da sua imagem */
/*    background-image: url('../img/fundo_contato_1.png'); */
    background-size: cover;
    background-position: center;
}

#trabalheconosco {
    padding-top: 100px;
    padding-bottom: 100px;
    /* IMPORTANTE: Troque pelo caminho da sua imagem */
    background-image: url('../img/fundo_contato_2.png');
    background-size: cover;
    background-position: center center;
}

/* --- Estilos dos Wrappers de Formulário --- */
.form-wrapper {
    border-radius: 40px; /* Bordas bem arredondadas */
    color: var(--tastefy-light);
}

.form-wrapper-franqueado {
    background-color: #f9a11b;
}

.form-wrapper-trabalhe {
    background-color: var(--tastefy-magenta);
}

/* --- Estilos dos Campos de Formulário --- */
.form-control {
    border-radius: 50px; /* Estilo "pílula" */
    padding: 0.9rem 1.5rem;
    background-color: #fff;
    border: none;
    font-size: 0.9rem;
    transition: all 0.3s ease-in-out;
}

.form-control:focus {
    background-color: var(--tastefy-light);
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.4);
    border: none;
}

.form-control::placeholder {
    color: #888;
}
.minit {
    font-weight: 900;
    font-size: 20px;
}
/* --- Estilos de Textos e Links no Formulário --- */
.privacy-text {
    color: rgba(0, 0, 0, 0.8);
    padding-left: 2rem;
    padding-right: 2rem;
}

.privacy-text a {
    color: var(--tastefy-yellow);
    font-weight: 700;
    text-decoration: underline;
    transition: color 0.3s;
}

.privacy-text a:hover {
    color: var(--tastefy-light);
}

/* --- Estilos dos Botões --- */
.btn-brand-yellow {
    background-color: var(--tastefy-yellow);
    color: var(--tastefy-dark);
    border-radius: 50px;
    padding: 0.8rem 3rem;
    font-weight: 700;
    border: none;
    transition: transform 0.2s ease-in-out;
}

.btn-brand-yellow:hover {
    background-color: var(--tastefy-yellow);
    color: var(--tastefy-dark);
    transform: scale(1.05); /* Efeito de zoom no hover */
}

/* --- Estilo Personalizado para Upload de Arquivo --- */
.btn-file-upload {
    background-color:#fa85a3;
    color: #000;
    border-radius: 50px;
    padding: 0.6rem 1.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-file-upload:hover {
    background-color: #f0f0f0;
    color: var(--tastefy-magenta);
}

/* --- Responsividade --- */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.4rem;
        font-family: 'nutmeg-bold';
    }

    .form-section {
        padding: 60px 0;
    }
    
    .form-wrapper {
        border-radius: 25px;
    }
}
/* contato */
.titlu{
    font-family: 'nutmeg-bold';
    font-size: 50px;
}



.multi-brand-section {
    background-color: #fdfbf5; /* Cor de fundo creme, similar à imagem */
    padding: 30px 0;
    overflow: hidden; /* Evita que elementos saiam da tela durante a animação */
}

.yellow-box {
	background-color: #fdfe00;
	border-radius: 40px;
	padding: 0px 40px 0px 40px;
}

/* Estilo do Título */
.title {
    font-family: 'nutmeg-bold', sans-serif; /* Usa a fonte personalizada com um fallback */
    font-size: 3.5rem; /* Tamanho grande para desktop */
    color: #1a1a1a;
    line-height: 1.1;
    font-weight: bold;
}

/* Container para as imagens da direita */
.images-container {
    position: relative; /* Essencial para sobrepor as imagens */
    display: grid; /* Usamos grid para centralizar e sobrepor facilmente */
    place-items: center;
    min-height: 400px; /* Garante que o container tenha altura */
}

/* Estilos para as imagens (mascote e mandala) */
.images-container img {
    /* Coloca ambas as imagens na mesma célula do grid, sobrepondo-as */
    grid-area: 1 / 1; 
    max-width: 100%;
    height: auto;
}

.mascot-image {
    width: 150px; /* Tamanho do mascote */
    z-index: 2; /* Garante que o mascote fique na frente */
}

.mandala-image {
    width: 400px; /* Mandala é maior que o mascote */
    z-index: 1; /* Mandala fica atrás */
    
    /* Aplica a animação de rotação */
    animation: rotate-slowly 30s linear infinite;
}

/* Animação de Rotação (Keyframes) */
@keyframes rotate-slowly {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/* --- Media Queries para Responsividade --- */

/* Telas médias (tablets) */
@media (max-width: 991.98px) {
    .title {
        font-size: 2.8rem;
        margin-bottom: 40px; /* Espaço entre o texto e as imagens quando empilhados */
    }

    .images-container {
        min-height: 350px;
    }
    
    .mascot-image {
        width: 150px;
    }

    .mandala-image {
        width: 300px;
    }
}

/* Telas pequenas (celulares) */
@media (max-width: 767.98px) {
    .yellow-box {
        padding: 30px 20px;
        border-radius: 0px;
    }
    
    .title {
        font-size: 1.8rem;
    }
}




#qs-cta {
    padding-top: 100px;
    padding-bottom: 100px;
    min-height: 500px;
 
	background-color: #ffcc07;
	background-image: url(../img/cta_quemsomos.png);
	background-size: cover;
	background-position: center;
}


.estreita { margin-left: 20%; margin-right: 20%;}

#numbers-section { padding-top: 100px; padding-bottom: 100px;}

.mr10 { margin-right: 15%;}

.mix {
    padding-top: 30px;
    padding-bottom: 30px;
}

 .schedule-container {
            /*background-color: #f883a3; /* Cor de fundo rosa da imagem */
            border-radius: 25px;
            padding: 2rem 1.5rem;
            max-width: 900px;
            margin: auto;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .schedule-container h2 {
            font-family: 'nutmeg-black';
            color: #000;
            font-weight: 700;
            text-align: center;
            margin-bottom: 1.5rem;
            font-size: 35px;
        }

        .schedule-table {
            border-collapse: separate;
            border-spacing: 0 1rem; /* Espaçamento vertical entre as linhas (barras) */
            margin-bottom: 0;
        }

        /* --- Cabeçalho da Tabela (Horas) --- */
        .schedule-table thead th {
            color: #000000;
            font-weight: 600;
            border: none;
            text-align: center;
            padding-bottom: 0.5rem;
            font-size: 0.9em;
        }

        /* --- Corpo da Tabela (Restaurantes e Barras) --- */
        .schedule-table tbody th {
            color: #000000;
            font-weight: 600;
            border: none;
            vertical-align: middle;
            padding-right: 1rem;
            line-height: 1.2;
        }
        
        .schedule-table tbody td {
            padding: 0;
            border: none;
            vertical-align: middle;
        }

        /* --- Mágica das Barras de Horário --- */
        /* 1. O container da barra (a faixa cinza) */
        .bar-container {
            position: relative;
            display: grid;
            /* Cria 14 colunas, uma para cada hora de 11h a 0h */
            grid-template-columns: repeat(14, 1fr);
            height: 35px;
            background-color: #d8d8d8; /* Cor cinza de fundo */
            border-radius: 50px; /* Borda bem arredondada */
        }

        /* 2. O bloco de horário ativo (a faixa amarela) */
        .active-block {
            background-color: #fcee21; /* Cor amarela vibrante */
            border-radius: 50px; /* A mesma borda para se encaixar perfeitamente */
            
            /* Posiciona o bloco na grid usando variáveis CSS */
            /* A mágica acontece aqui: usamos as variáveis definidas no HTML */
            grid-column: var(--start-col) / span var(--span-col);
        }

        #home-cta {
            padding-top: 150px;
            padding-bottom: 150px;
            background-image: url(../img/ctahome.png);
            background-position: center;
            background-size: cover;
        }

        /* Ajustes para responsividade */
        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }
            .schedule-container {
                padding: 1.5rem 1rem;
            }
            .schedule-container h2 {
                font-size: 1.5rem;
            }
            .schedule-table thead th,
            .schedule-table tbody th {
                font-size: 0.8em;
            }
           #home-cta {
                padding-top: 90px;
                padding-bottom: 90px;
                background-image: url(../img/cta_brasil_mobile.png);
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
            }
        }





/* Seções com imagem e texto (O que fazemos, Seja Franqueado, Home CTA) */
#o-que .img-fluid,
#seja-franqueado .img-fluid,
#home-cta .img-fluid {
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
    max-height: 520px; /* Altura máxima para as imagens 520x520 */
    width: 100%; /* Ajuste de largura para ocupar o espaço da coluna */
}
#home-cta .img-fluid {
    max-height: 636px; /* Altura máxima para a imagem 713x636 */
}


/* Seção depoimentos */
#depoimentos {
    padding-bottom: 100px;
}
#depoimentos .slick-depoimentos-container {
    border: none /*2px solid var(--tastefy-dark); /* Borda para destaque */
}

#depoimentos .slick-slide {
	 
	padding: 60px;
}
/* Seção Sobre o App */
#sobre-app .list-unstyled li i {
    font-size: 1.2em;
}

/* Rodapé */
#footer a {
    transition: color 0.3s ease;
}

#footer a:hover {
    color: var(--tastefy-yellow) !important;
}

#footer-mobile {
    background-color: #000000;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Links do Footer */
.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease-in-out;
}

.footer-links a:hover {
    color: #cccccc;
}

/* Logo e Tagline */
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.logo-icon {
    height: 40px;
    width: auto;
}

.logo-text {
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: -1.5px;
}

.tagline {
    font-size: 1.1rem;
    color: #f8f9fa;
    margin: 0;
}

/* Informações de Endereço */
.address-info p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #f8f9fa;
}

.colunas2 {
    columns: 2;
}

#menu-menu-footer-mobile .nav-link {
	padding: 0.0rem 1rem;
}


/* Ícones de Redes Sociais */

.social-icons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    justify-content: center;
}

.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border: 2px solid #ffffff;
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.5rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.social-icons a:hover {
    background-color: #333333;
    border-color: #dddddd;
}



/* --- Animação de Marcas --- */

/* O 'palco' que define a área visível e esconde o resto */
.palco-rotate {
  overflow: hidden; /* ESSENCIAL: Esconde as partes da imagem que estão fora */
  padding: 2rem 0;  /* Espaçamento vertical para a imagem respirar */
  position: relative;
  width: 100%;
}

/* A 'pista' que contém as imagens e que será animada */
.marcas-track {
  display: flex; /* Alinha as duas imagens lado a lado */
  
  /* A pista tem o dobro da largura do palco, pois contém duas imagens */
  width: 200%; 
  
  /* Aplica a animação */
  animation: scroll-left 30s linear infinite;
}

/* Estilo para cada imagem dentro da pista */
.marcas-track img {
  /* Cada imagem ocupa metade da pista */
  /*width: 50%; */
  height: auto; /* Mantém a proporção da imagem */
  padding: 0 1px; /* Adiciona um espaço entre as imagens */
}

/* Definição da animação com @keyframes */
@keyframes scroll-left {
  0% {
    /* Começa na posição inicial */
    transform: translateX(0);
  }
  100% {
    /* Termina quando a primeira imagem saiu completamente da tela.
       translateX(-50%) move a pista para a esquerda pela metade do seu tamanho total,
       o que equivale a 100% da largura do palco (.palco-rotate). */
    transform: translateX(-50%);
  }
}

/* Opcional: Pausar a animação ao passar o mouse */
.palco-rotate:hover .marcas-track {
    animation-play-state: paused;
}

/* Responsividade básica */
@media (max-width: 991.98px) {
    #sejafranqueado {
	    padding-top: 0;	
    }
    .requirement-item {	
	    padding: 7px;
    }
    #depoimentos {
    	padding-bottom: 20px;
    }
    #slider .card {
        max-width: 90%;
        margin: 0 auto; /* Centraliza o card em telas menores */
        text-align: center;
        padding: 30px !important;
    }
    #slider .card h2 {
        font-size: 2.1rem; /* Ajuste para telas menores */
    }
    .slider-nav-controls {
        position: static; /* Remove o posicionamento absoluto em mobile */
        transform: none;
        padding-bottom: 20px; /* Ajuste do padding */
    }
    #o-que .text-md-end,
    #seja-franqueado .text-md-start {
        text-align: center !important;
    }
    #seja-franqueado .order-md-2 {
        order: 1 !important; /* Inverte a ordem da coluna em mobile para a imagem vir primeiro */
    }
    #seja-franqueado .order-md-1 {
        order: 2 !important;
    }
    .navbar-nav {
        text-align: center;
    }
    .navbar-nav .nav-item {
        margin: 5px 0;
    }
}

@media (max-width: 767.98px) {
    h2.display-4, h2.display-5 {
        font-size: 2rem;
    }
    .btn-lg {
        padding: 10px 20px;
        font-size: 1rem;
    }
    .footer .col-md-4 {
        margin-bottom: 20px;
    }
    .footer .row.mb-4.align-items-center .col-md-6.text-md-end {
        text-align: center !important;
    }
    #footer .img-fluid {
        margin: 0 auto 20px auto;
        display: block;
    }
}


@media screen and (max-width: 767px) {

    #equipe .btn-primary-yellow {	
    	font-size: 12px;    
    }

    .estreita {
    	margin-left: 5%;
    	margin-right: 5%;
    }
    .btg { font-size: 12px;}
    .titlu { font-size: 14px;}
    #comof .img-fluid {
        object-fit: cover;
        max-height: 520px;
        min-height: 216px;
        width: 100%;
        border-radius: 25px;
        margin-top: 45px
    }
    #equipe .img-fluid {
        object-fit: cover;
        max-height: 520px;
        min-height: 216px;
        width: 100%;
        border-radius: 25px;
        margin-top: 0px
    }
    #nossos-restaurantes {
    	padding-top: 150px;
        padding-bottom: 70px;
    }
    .revolve img {	
	    max-width: 75px;
    }
    .revolve {
        position: relative;
        background-color: #ffff00;
        width: 100%;
        height: 209px;
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;;
    }
    #onde-comecou p {
        font-size: 13px;
    }
    .zigzag .evolver {
        min-height: 162px !important;
    }
    .evdir {
        right: -23px
    }
    .evesq {
        left: -23px;
    }
    .evdir img {
        display: block;
        float: left;
        max-width: 70px !important;
        
    }
    .evesq img {
        display: block;
        float: right;
        max-width: 70px !important;
        
    }
    .privacy-text { 	
	padding-left: 1rem;
	padding-right: 1rem;
    }
    .requirement-item h3 { 
        font-size: 13px;
    }
    .requirement-item {	
        margin-left: 0rem;
        margin-right: 0rem;
    }
    .why-tastefy-item h3 {
	    font-size: 0.8rem;	
	    margin-bottom: 10px;
    }
    .why-tastefy-item h2 {
        font-size: 1.5rem; 
    }
    .financials-section .main-title {
	    font-size: 1.5rem;
    }
    .restaurant-list-item {        
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    .tasty { filter: opacity(0);}
    #numeros {
        position: relative;
        /* margin-top: 100px; */
        padding-top: 50px;
        padding-bottom: 20px;
        background-image: url(../img/multimarcas_mobile.png);
    }
    #numeros .container {
        padding-left: 0;
        padding-right: 0;
    }
  
    .boxImage {
        background-size: 189%;
        background-position: center;
    }
    .cardbox {        
        top: 56%;        
    }
    .boldline { 
        font-size: 23px;
    }
 
    .subt {	
	    font-size: 14px;
    }
    .t {	
	    font-size: 21px;
    }

    #equipe .t {
        font-size: 14px;
    }
    .t2 { 
	    font-size: 42px;
    }
    .p {
    	font-size: 13px;
    }
    #o-que .img-fluid, #seja-franqueado .img-fluid, #home-cta .img-fluid, #trabalhe .img-fluid, #generic .img-fluid {
	    object-fit: cover;
	    max-height: 520px;
        min-height: 400px;
	    width: 100%;
    }

   #seja-franqueado .img-fluid {
	object-fit: contain;	
	width: 127%;

    max-height: auto;
    min-height: auto;
    }

    .imgFloat {
        position: absolute;
        right: -1%;
        top: -100px;
        max-width: 210px;
    }
    .lead {
	    font-size: 13px;	    
    }
    .mini {
	    font-size: 13px;
	    margin-top: -10px;
    }
    .alista li {
	    font-size: 13px;
	    margin-bottom: 7px;
    }

    #sobre-app .imgclois {
        object-fit: cover;
        max-height: 450px;
        min-height: 359px;
        width: 100%;
        margin-top: -65px;
    }
    .rounded-30a {
	    border-radius: 72px !important;
    }
    .premios-text {
        padding: 0px;
        text-align: left;
    }
    .premios-text h2 {    
        font-size: 30px;    
    }
    .premios-monster {
        position: absolute;
        right: 0px;
        top: 58px;
        width: 207px;
        z-index: 1;
        right: -20px;
    }
    .premios-text p {
        font-size: 13px;
        color: #1c1c1c;
        margin-bottom: 2rem;
    }
    .btn-saiba-mais {	
	    font-size: 11px;
    }
/*    #home-cta {
	    background-position: -388px center !important;
    }*/

    #home-cta .t {
	    font-size: 39px;
    }
    .slick-custom-arrow { display: none !important; }
    .num-title {
        font-size: 24px;
        line-height: 29px; 
        padding: 15px;
    }
    .num-texto {
        font-weight: 500;
        font-size: 15px;
        line-height: 24px;  
        padding: 15px;
    }
    .evolver img {
        display: block;
        margin: 0 auto;
        max-width: 70px;
    }

    .evolver {
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
    }
    .evolver-b {
        background-color: #ffff00;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;

      
    }
    .restaurant-card .image-container img.card-img {
        	border-radius: 0px;
    }
    #restaurantes-grid .container { padding-left: 0 !important; padding-right: 0 !important;}
    .restaurant-card .card-content {	    padding: 50px 25px 10px 25px;    }
    .btn-saiba-mais {	
	    padding: 0.3rem 1.9rem;	
    }
    #sobre-app {
        padding-top: 50px;
        padding-bottom: 20px;
    }
    .premios-card {
        padding: 2rem 0.5rem;        
    }
    .boxImage {
        min-height: 340px;
    }
    #faq {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    #qs-cta { 
        background-image: url(../img/cta_quemsomos_mobile.png);
    }

    #qs-cta .subt {	
	    font-size: 22px;
    }
    #qs-cta .t {	
	    font-size: 43px;
        font-family: 'nutmeg-black';
    }
    #numbers-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .numtext {	
	    font-size: 39px;	
    }
    
}