@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap');

:root {
  --primary-dark: #a84320;
  --primary-medium: #cc522a;
  --primary-light: #e67e22;
  --accent-light: #fdebdc;
  --accent-lighter: #fff5e6;
  --background: #f9f3e9;
  --text-dark: #5d2812;
  --text-medium: #7c3a1d;
  --text-light: #9c5a3d;
}

body {
  margin: 0;
  font-family: 'Roboto Slab', serif;
  background: linear-gradient(to bottom, var(--background), var(--accent-lighter));
  color: var(--text-medium);
  text-align: center;
  line-height: 1.6;
}

header {
  padding: 40px 20px 20px;
  position: relative;
}

header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 600px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--primary-light), transparent);
}

header img {
  max-width: 280px;
  height: auto;
  border-radius: 50%;
  padding: 15px;
  box-shadow: 0 5px 15px rgba(168, 67, 32, 0.15);
  background-color: var(--accent-lighter);
  border: 2px solid var(--primary-light);
  transition: transform 0.3s ease;
  display: block;
  margin: 0 auto 20px;
}

header img:hover {
  transform: scale(1.02);
}

h1.frase-efeito {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 25px auto 15px;
  color: var(--primary-dark);
  max-width: 800px;
  position: relative;
  padding-bottom: 15px;
  font-family: 'Playfair Display', serif;
}

h1.frase-efeito::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, var(--primary-light), var(--primary-dark));
  border-radius: 2px;
}

.video-container {
  position: relative;
  padding-bottom: 50%; /* Reduzido de 56.25% para ficar menor */
  height: 0;
  overflow: hidden;
  margin: 40px auto;
  max-width: 75%; /* Reduzido de 90% para ficar menor */
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(168, 67, 32, 0.2);
  border: 3px solid var(--primary-light);
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

.botao-zap {
  background: linear-gradient(to bottom right, #25D366, #1ebe57);
  color: white;
  font-size: 1.3rem;
  padding: 16px 32px;
  border: none;
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
  margin: 10px auto 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.botao-zap::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.7s ease;
}

.botao-zap:hover {
  background: linear-gradient(to bottom right, #1ebe57, #0da744);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(37, 211, 102, 0.4);
}

.botao-zap:hover::before {
  left: 100%;
}

footer {
  background: linear-gradient(to bottom, var(--accent-light), var(--accent-lighter));
  padding: 40px 20px;
  color: var(--text-medium);
  border-top: 1px solid rgba(168, 67, 32, 0.2);
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, var(--primary-light), var(--primary-dark), var(--primary-light));
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
}

.footer-section {
  flex: 1;
  min-width: 250px;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 3px 10px rgba(168, 67, 32, 0.1);
}

.footer-section h3 {
  color: var(--primary-dark);
  font-family: 'Playfair Display', serif;
  margin-top: 0;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.footer-section h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--primary-medium);
}

.contact-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
}

.contact-item i {
  margin-right: 8px;
  color: var(--primary-medium);
  font-size: 1.2rem;
}

footer a {
  color: var(--primary-dark);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  position: relative;
}

footer a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--primary-dark);
  transition: width 0.3s ease;
}

footer a:hover {
  color: var(--primary-medium);
}

footer a:hover::after {
  width: 100%;
}

.copyright {
  margin-top: 30px;
  font-size: 0.9rem;
  color: var(--text-light);
}

@media (max-width: 768px) {
  header img {
    max-width: 240px;
  }
  
  h1.frase-efeito {
    font-size: 1.5rem;
  }
  
  .video-container {
    max-width: 85%;
  }
  
  .footer-container {
    flex-direction: column;
    gap: 20px;
  }
  
  .footer-section {
    min-width: auto;
  }
}

@media (max-width: 480px) {
  header img {
    max-width: 200px;
  }
  
  h1.frase-efeito {
    font-size: 1.3rem;
  }
  
  .botao-zap {
    font-size: 1.1rem;
    padding: 14px 28px;
  }
  
  .video-container {
    max-width: 90%;
  }
}


/* === Premium outline for Vitrine heading === */
.vitrine-title{
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary-dark);
  text-shadow: 
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
     0 2px 8px rgba(0,0,0,.08);
  border-bottom: 2px solid var(--primary-medium);
  padding-bottom: 8px;
  margin: 24px auto 12px;
  width: fit-content;
}
/* === Grid da Vitrine (5 categorias) === */
.vitrine{
  padding: 30px 20px 10px;
  max-width: 1200px;
  margin: 0 auto;
}
.catalog-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.catalog-card{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
  border: 1px solid rgba(168,67,32,.08);
}
.catalog-card img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.catalog-info{
  padding: 12px 14px 16px;
  text-align: center;
}
.catalog-info h3{
  margin: 6px 0 4px;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--text-dark);
}
.ver-mais{
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--primary-medium);
  border-bottom: 1px dashed var(--primary-light);
}
.catalog-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}

/* mapa */
.mapa-embed{
  max-width: 1200px;
  margin: 24px auto 8px;
  padding: 0 20px;
}

/* Instagram footer */
.instagram-footer{
  text-align:center;
  margin: 12px auto 16px;
}
.instagram-footer a{
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--primary-medium);
  padding: 8px 14px;
  background: rgba(230,126,34,.08);
  border: 1px solid rgba(204,82,42,.18);
  border-radius: 999px;
  display: inline-block;
}

/* Contact cards responsive */
.contact-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 0 20px;
  max-width: 900px;
  margin: 0 auto 10px;
}
a.contact-card{
  display:block;
  border-radius: 14px;
  background: #fff;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  border: 1px solid rgba(168,67,32,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
  color: inherit;
}
a.contact-card:hover{ transform: translateY(-3px); }

/* Responsivo geral */
@media (max-width: 1100px){
  .catalog-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .catalog-grid{ grid-template-columns: repeat(2, 1fr); }
  .catalog-card img{ height: 170px; }
}
@media (max-width: 460px){
  .catalog-grid{ grid-template-columns: 1fr; }
  .catalog-card img{ height: 200px; }
  header img{ max-width: 220px; height: auto; }
  h1.frase-efeito{ font-size: 1.3rem; padding: 0 10px; }
}


/* === Página interna de produto === */
.produto-detalhe{
  padding: 40px 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.produto-detalhe-container{
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.produto-detalhe-container img{
  max-width: 440px;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.produto-info{
  max-width: 500px;
  text-align: left;
}
.produto-info h2{
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  margin-bottom: 12px;
  color: var(--primary-dark);
}
.produto-info p{
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
  color: var(--text-medium);
}


/* === Gallery grid & Lightbox === */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  max-width: 1100px;
  margin: 20px auto 40px;
  padding: 0 20px;
}
.gallery-item{
  border: none;
  padding: 0;
  background: none;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.gallery-item img{ width:100%; height:160px; object-fit:cover; display:block; }
.lightbox-modal{ position: fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; }
.lightbox-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.6); }
.lightbox-content{ position:relative; max-width:90%; max-height:90%; z-index:10000; display:flex; flex-direction:column; align-items:center; gap:10px; }
.lightbox-content img{ max-width:100%; max-height:78vh; border-radius:8px; }
.lightbox-close{ position:absolute; right:-8px; top:-28px; background:#fff; border-radius:999px; padding:6px 10px; border:none; box-shadow:0 6px 18px rgba(0,0,0,.12); cursor:pointer; font-weight:700; }
.lightbox-caption{ color:#fff; font-weight:600; margin-top:6px; background:rgba(0,0,0,.28); padding:6px 10px; border-radius:8px; }

@media (max-width:900px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } .gallery-item img{ height:150px; } }
@media (max-width:480px){ .gallery-grid{ grid-template-columns: 1fr; } .gallery-item img{ height:220px; } }


/* Discreet WhatsApp button in footer */
.footer-whatsapp{
  text-align:center;
  margin: 18px 0 6px;
}
.whatsapp-small{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: linear-gradient(180deg, #25D366, #1DA851);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration:none;
  font-weight:700;
  box-shadow: 0 8px 22px rgba(37,211,102,0.12);
  transition: transform .14s ease, box-shadow .14s ease;
  border: 1px solid rgba(0,0,0,0.06);
  font-size: 0.95rem;
}
.whatsapp-small .wa-ico { font-size:1.05rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.08)); }
.whatsapp-small:hover{ transform: translateY(-3px); box-shadow: 0 18px 36px rgba(37,211,102,0.16); }

/* Produto lead emphasis */
.produto-lead{
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-dark);
  background: linear-gradient(90deg, rgba(250,243,237,0.7), rgba(255,255,255,0.35));
  padding: 12px 16px;
  border-left: 4px solid var(--primary-medium);
  border-radius: 10px;
  margin-bottom: 18px;
  line-height: 1.5;
}

/* Ensure footer whatsapp small is responsive */
@media (max-width: 520px){
  .whatsapp-small{ padding: 10px 12px; font-size: 0.92rem; }
  .produto-lead{ font-size: 1.02rem; padding:10px; }
}


/* ===== IMPROVEMENTS: Premium "ver mais" and mobile responsiveness ===== */

/* Premium "ver mais" pill/button */
.ver-mais{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,243,237,0.85));
  border: 1px solid rgba(204,82,42,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  color: var(--primary-medium);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
  cursor: pointer;
  width: fit-content;
}
.ver-mais::after{
  content: "→";
  font-weight: 700;
  margin-left: 6px;
  opacity: .9;
  transform: translateX(0);
  transition: transform .16s ease;
}
.catalog-card:hover .ver-mais{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(168,67,32,0.06); }
.catalog-card:hover .ver-mais::after{ transform: translateX(4px); }

/* Ensure the ver-mais is centered under the title */
.catalog-info{ display:flex; flex-direction:column; align-items:center; gap:8px; }

/* Catalog / Vitrine images: keep good aspect/cover on desktop, adapt to auto height on mobile */
.catalog-card img{
  width: 100%;
  height: 220px; /* desktop preview height */
  object-fit: cover;
  display: block;
  transition: transform .28s ease;
}
.catalog-card:hover img{ transform: scale(1.03); }

/* Gallery thumbnails: make them responsive and not fixed height on small screens */
.gallery-item img{
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: transform .18s ease;
}
.gallery-item:hover img{ transform: scale(1.04); }

/* For very small screens, let images be natural height (auto) */
@media (max-width: 520px){
  .catalog-card img{ height: auto; object-fit: contain; }
  .gallery-item img{ height: auto; object-fit: contain; }
  .gallery-grid{ grid-template-columns: 1fr; gap:10px; padding: 0 12px; }
  .catalog-grid{ gap: 12px; padding: 0 12px; }
  .catalog-card img, .gallery-item img { border-radius: 12px; }
  /* make ver-mais slightly smaller on mobile */
  .ver-mais{ padding:6px 10px; font-size: 0.95rem; }
}

/* For medium screens, use two columns for the vitrine to avoid tiny thumbs */
@media (max-width: 800px) and (min-width: 521px){
  .catalog-grid{ grid-template-columns: repeat(2, 1fr); }
  .catalog-card img{ height: 200px; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
}
/* desktop fallback: keep 5 -> 3 -> 2 behavior handled earlier */