:root {

--cor-primary:  #52B1FF;
--cor-second: #faeded;



}


/* ==========================================
   1. ESTILOS BASE (Para telas grandes/Desktop)
   ========================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #f0f7ff;
  color: #1e293b;
  line-height: 1.6;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--cor-primary);
  padding: 10px 40px;
  height: 70px;
}

.navbar-Logo img {
  height: 70px;
}

.navbar-Menu {
  display: flex;
  gap: 32px;
}

.navbar-Link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding-bottom: 6px;
}

.navbar-Link:hover {
  opacity: 0.85;
}

.navbar-Button {
  background-color: #ffffff;
  color: #2196d8;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 22px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  transition: opacity 0.2s;
}


/* Marmita da Semana */
.food-week {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}

.box-food {
  background: #ffffff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.food-title {
  font-size: 28px;
  color: #0f172a;
  margin-bottom: 24px;
  text-align: center;
}

.info-food {
  display: flex;
  gap: 32px;
  align-items: center;
}

.img-food {
  flex: 1;
}

.img-food img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.text-food {
  flex: 1.2;
}

.text-food h2 {
  font-size: 22px;
  color: #0284c7;
  margin-bottom: 12px;
}

.text-food p {
  color: #475569;
  margin-bottom: 20px;
}

.ingredients-container h3 {
  font-size: 16px;
  color: #334155;
  margin-bottom: 10px;
}

.ingredients-list {
  list-style: none;
}

.ingredients-list li {
  font-size: 15px;
  color: #475569;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ingredient-bullet {
  color: #0284c7;
  font-weight: bold;
}

/* Chave PIX */
.pix {
  background: #52B1FF;
  color: #ffffff;
  text-align: center;
  padding: 60px 20px;
  margin-top: 40px;
}

.pix-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 12px;
}

.pix-subtitle {
  max-width: 600px;
  margin: 0 auto 30px auto;
  font-size: 16px;
  opacity: 0.95;
}

.pix-card {
  background: #ffffff;
  color: #0f172a;
  max-width: 480px;
  margin: 0 auto;
  padding: 28px;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(15, 90, 150, 0.25);
}

.pix-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 12px;
}

.pix-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 16px;
}

.pix-value {
  font-weight: 600;
  font-size: 16px;
  color: #0f172a;
}

.pix-copy {
  background: #0ea5e9;
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pix-copy:hover {
  background: #0284c7;
}

.pix-beneficiario {
  font-size: 13px;
  color: #64748b;
}

/* Voluntários */
.volunteer {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
}

.volunteer-header {
  text-align: center;
  margin-bottom: 40px;
}

.volunteer-header h1 {
  font-size: 30px;
  color: #0f172a;
  margin-bottom: 8px;
}

.volunteer-header p {
  color: #64748b;
}

.volunteer-cards {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
}

.volunteer-card {
  flex: 1;
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.volunteer-img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
}

.volunteer-card h3 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 10px;
}

.volunteer-card p {
  font-size: 14px;
  color: #64748b;
}

.volunteer-contact {
  background: #e0f2fe;
  border-radius: 16px;
  padding: 30px;
  text-align: center;
}

.volunteer-contact h2 {
  font-size: 20px;
  color: #0369a1;
  margin-bottom: 6px;
}

.volunteer-contact p {
  color: #0284c7;
  margin-bottom: 16px;
}

.phone-box {
  display: inline-block;
  background: #ffffff;
  padding: 10px 24px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 18px;
  color: #0284c7;
}

/* Localização */
.location {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
}

.location-title {
  text-align: center;
  margin-bottom: 30px;
}

.location-title h1 {
  font-size: 28px;
  color: #0f172a;
}

.location-title p {
  color: #64748b;
}

.location-box {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.location-image {
  flex: 1;
}

.location-text {
  flex: 1;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.location-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #0ea5e9;
  background: #e0f2fe;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
  width: fit-content;
}

.location-text h2 {
  font-size: 22px;
  color: #0f172a;
  margin-bottom: 10px;
}

.address-detail {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 4px;
}

.location-button {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 24px;
  background: #0ea5e9;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 10px;
  text-align: center;
  width: fit-content;
}


/* ==========================================
   2. REGRAS RESPONSIVAS (O seu código ajustado)
   ========================================== */

/* Tablets */
@media (max-width: 1024px) {
    .location-box {
        gap: 24px;
    }

    .volunteer-cards {
        gap: 20px;
    }
}

@media (max-width: 900px) {
    .navbar {
        padding: 10px 20px;
        flex-wrap: wrap;
        height: auto;
    }

    .navbar-Menu {
        gap: 16px;
        flex-wrap: wrap;
    }

    .info-food {
        flex-direction: column;
    }

    .img-food {
        max-width: 100%;
    }

    .img-food img {
        height: 260px;
    }

    .volunteer-cards {
        flex-wrap: wrap;
    }

    .volunteer-card {
        flex: 1 1 45%;
    }

    .location-box {
        flex-direction: column;
    }

    .location-image {
        width: 100%;
    }

    .footer-container {
        flex-wrap: wrap;
        gap: 30px;
    }

    .footer-col {
        flex: 1 1 45%;
    }
}

/* Celulares */
@media (max-width: 768px) {
    .food-week,
    .pix,
    .volunteer,
    .location {
        padding: 50px 20px;
    }

    .box-food {
        padding: 24px;
    }

    .food-title {
        font-size: 24px;
    }

    .text-food h2 {
        font-size: 22px;
    }

    .pix-title,
    .volunteer-header h1,
    .location-title h1 {
        font-size: 24px;
    }

    .pix-card {
        padding: 22px 20px;
    }

    .pix-field {
        flex-direction: column;
    }

    .pix-copy {
        padding: 12px 0;
        width: 100%;
        margin-top: 8px;
    }

    .volunteer-card {
        flex: 1 1 100%;
    }

    .volunteer-contact {
        padding: 24px 20px;
    }

    .location-box {
        padding: 20px;
    }

    .location-button {
        width: 100%;
        text-align: center;
    }

    .footer {
        padding: 40px 24px 20px;
    }

    .footer-col {
        flex: 1 1 100%;
        text-align: center;
    }

    .footer-links li,
    .footer-col p {
        text-align: center;
    }
}

/* Telas bem pequenas */
@media (max-width: 480px) {
    .navbar-Logo img {
        height: 50px;
    }

    .navbar-Link {
        font-size: 12px;
    }

    .food-title,
    .pix-title,
    .volunteer-header h1,
    .location-title h1 {
        font-size: 20px;
    }

    .pix-subtitle,
    .volunteer-header p,
    .location-title p {
        font-size: 14px;
    }

    .phone-number {
        font-size: 16px;
    }

    .location-text h2 {
        font-size: 20px;
    }
}