/* =========================================================
   Shopping Pátio Água Fria — main.css
   Paleta: verde musgo + vinho bordô + dourado / fonte Jost
   ========================================================= */

:root{
  --verde: #38543E;
  --verde-escuro: #28402F;
  --vinho: #811429;
  --vinho-escuro: #5F0E1E;
  --dourado: #DDBB80;
  --dourado-claro: #EBD5A8;
  --creme: #FAF6EC;

  --container-max: 1220px;
  --radius: 0.5rem;
  --radius-lg: 1rem;
  --header-h-mobile: 89px;
  --header-h-desktop: 97px;
}

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--creme);
  color: var(--verde-escuro);
  font-family: "Jost", Futura, "Trebuchet MS", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-h-mobile);
}
@media (min-width: 1024px){
  body{ padding-top: var(--header-h-desktop); }
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; border: none; background: none; }

h1,h2,h3,h4,h5,h6{
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
}

.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 768px){
  .container{ padding: 0 2rem; }
}

.section{ padding: 5rem 0; }

.eyebrow{
  display: block;
  color: var(--dourado);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.section-title{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--vinho);
  font-size: 1.9rem;
  margin-bottom: 1.25rem;
}
.section-title.on-dark{ color: var(--dourado); }

.section-subtitle{
  text-align: center;
  font-size: 1.05rem;
  margin: 0 0 2.5rem;
  opacity: 0.85;
}

.title-rule{
  width: 96px;
  height: 1px;
  background: var(--dourado);
  margin: 0 auto 1.75rem;
}

.btn-primary{
  display: inline-block;
  background: var(--dourado);
  color: var(--verde-escuro);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  transition: background 0.2s ease;
}
.btn-primary:hover{ background: var(--dourado-claro); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
  background: var(--vinho);
  color: var(--dourado-claro);
  height: var(--header-h-mobile);
}
@media (min-width: 1024px){
  .site-header{ height: var(--header-h-desktop); }
}

/* Quando logado no WP, a admin bar fica fixa no topo — o header precisa descer pra não ficar atrás dela */
body.admin-bar .site-header{ top: 46px; }
@media (min-width: 783px){
  body.admin-bar .site-header{ top: 32px; }
}
body.admin-bar{ padding-top: calc(var(--header-h-mobile) + 46px); }
@media (min-width: 783px){
  body.admin-bar{ padding-top: calc(var(--header-h-mobile) + 32px); }
}
@media (min-width: 1024px){
  body.admin-bar{ padding-top: calc(var(--header-h-desktop) + 32px); }
}

.header-inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo img{ height: 64px; width: auto; }
@media (min-width: 1024px){ .site-logo img{ height: 72px; } }

.menu-toggle, .search-toggle{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--dourado-claro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 500;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.menu-toggle:hover, .search-toggle:hover{
  color: var(--dourado);
  opacity: 0.9;
}
.menu-toggle .icon-bars{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 15px;
  flex-shrink: 0;
}
.menu-toggle .icon-bars span{
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.search-toggle svg{ width: 18px; height: 18px; stroke: currentColor; fill: none; flex-shrink: 0; }

.header-search{
  max-height: 0;
  overflow: hidden;
  background: var(--vinho-escuro);
  transition: max-height 0.25s ease;
}
.header-search.is-open{ max-height: 80px; }
.header-search form{ padding: 1rem 1.5rem; }
.header-search input{
  width: 100%;
  border: 1px solid var(--dourado);
  background: transparent;
  color: var(--dourado-claro);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  font-family: inherit;
}
.header-search input::placeholder{ color: var(--dourado-claro); opacity: 0.7; }

/* Overlay do menu mobile/full-width */
.mobile-menu-overlay{
  position: fixed;
  inset: 0;
  top: var(--header-h-mobile);
  background: var(--verde);
  color: var(--dourado-claro);
  transform: translateY(-110%);
  visibility: hidden;
  transition: transform 0.35s ease, visibility 0s linear 0.35s;
  z-index: 90;
  overflow-y: auto;
}
@media (min-width: 1024px){
  .mobile-menu-overlay{ top: var(--header-h-desktop); }
}
.mobile-menu-overlay.is-open{
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.35s ease, visibility 0s linear 0s;
}

body.admin-bar .mobile-menu-overlay{ top: calc(var(--header-h-mobile) + 46px); }
@media (min-width: 783px){
  body.admin-bar .mobile-menu-overlay{ top: calc(var(--header-h-mobile) + 32px); }
}
@media (min-width: 1024px){
  body.admin-bar .mobile-menu-overlay{ top: calc(var(--header-h-desktop) + 32px); }
}

.mobile-menu-inner{
  padding: 3rem 1.5rem 4rem;
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px){
  .mobile-menu-inner{ grid-template-columns: 1.2fr 1fr; padding: 5rem 2rem; gap: 5rem; }
}

.menu-navegue ul{ margin-top: 1.5rem; }
.menu-navegue li{
  border-bottom: 1px solid rgba(221,187,128,0.25);
}
.menu-navegue li a{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  transition: padding-left 0.25s ease, color 0.25s ease;
}
.menu-navegue li a:hover{
  color: var(--dourado);
  padding-left: 0.75rem;
}
.menu-navegue .num{
  color: var(--dourado);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}
.menu-navegue .nome{
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1.5rem;
  font-weight: 500;
}
@media (min-width: 1024px){ .menu-navegue .nome{ font-size: 2rem; } }
.menu-navegue .arrow{ color: var(--dourado); font-size: 1.25rem; transition: transform 0.25s ease; }
.menu-navegue li a:hover .arrow{ transform: translateX(6px); }

.servicos-cards{
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}
.servicos-cards a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--dourado);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  transition: background 0.25s ease, color 0.25s ease;
}
.servicos-cards a .arrow{ transition: transform 0.25s ease; }
.servicos-cards a:hover{
  background: var(--dourado);
  color: var(--verde-escuro);
}
.servicos-cards a:hover .arrow{ transform: translateX(4px); }
.endereco-card{
  margin-top: 1.5rem;
  background: var(--vinho);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
}
.endereco-card-title{
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--dourado);
  margin-bottom: 0.5rem;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: calc(100vh - var(--header-h-mobile));
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
@media (min-width: 1024px){
  .hero{ min-height: calc(100vh - var(--header-h-desktop)); }
}
.hero::before{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(56,84,62,0.88) 0%, rgba(56,84,62,0.55) 45%, rgba(56,84,62,0.15) 100%);
}
.hero-selo{
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 88px;
  filter: sepia(1) saturate(3) hue-rotate(-10deg) brightness(1.05);
  z-index: 2;
}
@media (min-width: 1024px){ .hero-selo{ width: 120px; top: 2.5rem; right: 2.5rem; } }

.hero-container{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-bottom: 3rem;
}
@media (min-width: 1024px){ .hero-container{ padding-bottom: 5rem; } }

.hero-content{
  color: var(--dourado-claro);
  max-width: 780px;
}
.hero-content h1{
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 2.75rem;
  line-height: 1.05;
  color: #fff;
  margin: 0.5rem 0 1rem;
}
@media (min-width: 1024px){ .hero-content h1{ font-size: 5.5rem; } }
.hero-content p{
  font-size: 1.1rem;
  margin-bottom: 1.75rem;
}

/* =========================================================
   ESTACIONAMENTOS
   ========================================================= */
.estac-grid{
  display: grid;
  gap: 2rem;
  margin-top: 1rem;
}
@media (min-width: 768px){
  .estac-grid{ grid-template-columns: 1fr 1fr; }
}
.estac-card{
  position: relative;
  background: #fff;
  border: 2px solid var(--verde);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem 2rem;
  box-shadow: 0 4px 14px rgba(56,84,62,0.08);
}
.estac-badge{
  position: absolute;
  top: -18px; left: 1.75rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--dourado-claro);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.estac-card h3{
  color: var(--verde-escuro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}
.estac-tag{
  display: block;
  color: var(--vinho);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.estac-table{ width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: 1.05rem; }
.estac-table td{ padding: 0.55rem 0; border-bottom: 1px dashed rgba(56,84,62,0.2); }
.estac-table td:last-child{ text-align: right; font-weight: 500; }
.estac-horarios{ font-size: 1rem; color: var(--verde-escuro); opacity: 0.85; line-height: 1.8; text-transform: uppercase; letter-spacing: 0.02em; }
.estac-nota{
  text-align: center;
  margin-top: 2rem;
  font-size: 1rem;
  opacity: 0.85;
  font-style: italic;
}

/* =========================================================
   BLOG (home + arquivo)
   ========================================================= */
.blog-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.blog-head .ver-todas{
  color: var(--vinho);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  font-weight: 500;
}
.blog-grid{
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){ .blog-grid{ grid-template-columns: repeat(3, 1fr); } }

.post-card img{
  width: 100%;
  height: 14rem;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform 0.35s ease;
}
.post-card:hover img{ transform: scale(1.05); }
.post-card .post-meta{
  color: var(--dourado);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  margin: 1rem 0 0.5rem;
}
.post-card h3{
  color: var(--vinho);
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}
.post-card p{ font-size: 0.95rem; opacity: 0.85; }
.post-card .ler-materia{
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--verde);
  font-weight: 500;
  font-size: 0.9rem;
}

/* =========================================================
   ONDE ESTAMOS
   ========================================================= */
.onde-estamos{
  background: var(--verde);
  color: var(--dourado-claro);
  text-align: center;
}
.onde-estamos .endereco{ margin-bottom: 2rem; font-size: 1.1rem; }
.onde-estamos iframe{
  width: 100%;
  height: 420px;
  border: 2px solid var(--dourado);
  border-radius: var(--radius);
}

/* =========================================================
   LOJA — página de detalhe (single-loja.php)
   ========================================================= */
.loja-voltar, .post-voltar{ padding: 1.5rem 0 0; margin: 0; }
.loja-voltar a, .post-voltar a{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--verde-escuro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 500;
  transition: color 0.2s ease;
}
.loja-voltar a:hover, .post-voltar a:hover{ color: var(--vinho); }
.loja-voltar .arrow-left, .post-voltar .arrow-left{ transition: transform 0.2s ease; }
.loja-voltar a:hover .arrow-left, .post-voltar a:hover .arrow-left{ transform: translateX(-4px); }

.loja-hero-box{
  background: var(--vinho);
  color: var(--dourado-claro);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  margin: 2rem 0 0;
}
@media (min-width: 768px){ .loja-hero-box{ padding: 3.5rem 3rem; } }
.loja-hero-box .eyebrow{ margin-bottom: 0.5rem; }
.loja-hero-box h1{
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 2rem;
  color: #fff;
  margin: 0;
}
@media (min-width: 768px){ .loja-hero-box h1{ font-size: 3rem; } }
.loja-desde-tag{
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.9rem;
  color: var(--dourado);
  margin: 0.75rem 0 0;
}

.loja-card-wrap{
  border: 1px solid rgba(221,187,128,0.6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 2rem 0 4rem;
}

.loja-detalhe-grid{
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 800px){
  .loja-detalhe-grid{ grid-template-columns: 330px 1fr; align-items: start; }
}

.loja-logo-col{ padding: 2rem 0; display: flex; justify-content: center; }
@media (min-width: 800px){ .loja-logo-col{ padding: 3rem 3rem 3rem 0; justify-content: flex-start; } }
.loja-logo-card{
  background: #fff;
  border: 1px solid rgba(221,187,128,0.6);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(40,64,47,0.12);
  padding: 1.5rem;
  max-width: 280px;
  width: 100%;
}
.loja-logo-card img{ width: 100%; height: auto; border-radius: calc(var(--radius-lg) - 0.4rem); }

.loja-info-col{
  background: #fff;
  padding: 2rem;
}
@media (min-width: 800px){ .loja-info-col{ padding: 3rem; } }
.loja-sobre-texto{ margin: 0.75rem 0 2.25rem; font-size: 1rem; line-height: 1.7; }

.loja-info-eyebrow{ display: block; }

.loja-info-rows{ margin-top: 1rem; }
.loja-info-row{
  display: grid;
  grid-template-columns: 1.75rem 8rem 1fr;
  align-items: start;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(56,84,62,0.15);
}
@media (max-width: 480px){
  .loja-info-row{ grid-template-columns: 1.5rem 5.5rem 1fr; gap: 0.6rem; }
}
.loja-info-icon{ color: var(--dourado); }
.loja-info-icon svg{ width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.loja-info-label{
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--verde-escuro);
  opacity: 0.75;
  padding-top: 0.15rem;
}
.loja-info-value{ font-size: 1rem; line-height: 1.6; }
.loja-info-value a{ color: var(--verde-escuro); transition: color 0.2s ease; }
.loja-info-value a:hover{ color: var(--vinho); }

.loja-obs-box{
  margin-top: 1.75rem;
  background: var(--creme);
  border: 1px solid rgba(221,187,128,0.5);
  border-radius: var(--radius);
  padding: 1.1rem 1.5rem;
  font-style: italic;
  font-size: 0.95rem;
  opacity: 0.85;
}

.loja-galeria-section{
  background: #fff;
  border-top: 1px solid rgba(221,187,128,0.4);
  padding: 3rem 1.5rem 3.5rem;
}
@media (min-width: 800px){ .loja-galeria-section{ padding: 3rem 3rem 3.5rem; } }
.loja-galeria-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (min-width: 700px){ .loja-galeria-grid{ grid-template-columns: repeat(3, 1fr); } }
.loja-galeria-item{
  border: 1px solid rgba(221,187,128,0.6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(40,64,47,0.1);
}
.loja-galeria-item img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.loja-galeria-item:hover img{ transform: scale(1.05); }



/* =========================================================
   PÁGINAS INSTITUCIONAIS (sobre / contato)
   ========================================================= */
.page-hero{
  background: var(--vinho);
  color: var(--dourado-claro);
  text-align: center;
  padding: 4rem 0;
}
.page-hero h1{ text-transform: uppercase; letter-spacing: 0.14em; font-size: 2.25rem; color: #fff; }

.numeros-grid{
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2,1fr);
  text-align: center;
  margin-top: 2rem;
}
@media (min-width: 768px){ .numeros-grid{ grid-template-columns: repeat(4,1fr); } }
.numeros-grid .num{ font-size: 2.5rem; color: var(--vinho); font-weight: 500; }
.numeros-grid .label{ text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; opacity: 0.75; }

/* =========================================================
   CONTATO — page-contato.php
   ========================================================= */
.contato-section{ padding-top: 3rem; }

.contato-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 900px){
  .contato-grid{ grid-template-columns: 460px 1fr; gap: 3rem; }
}

.contato-info-col .eyebrow{ margin-bottom: 0.5rem; }
.contato-info-col h1{
  color: var(--vinho);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 2.75rem;
  margin: 0 0 1rem;
}
@media (min-width: 480px){ .contato-info-col h1{ font-size: 3.25rem; } }
.contato-info-col > p{ font-size: 1.05rem; max-width: 420px; margin-bottom: 2rem; }

.contato-info-card{
  background: var(--verde-escuro);
  color: var(--dourado-claro);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contato-info-row{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 1rem;
  line-height: 1.6;
}
.contato-info-icon{ color: var(--dourado); flex-shrink: 0; margin-top: 0.1rem; }
.contato-info-icon svg{ width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.contato-form-col{
  background: #fff;
  border: 1px solid rgba(221,187,128,0.4);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
@media (min-width: 640px){ .contato-form-col{ padding: 2.75rem; } }

.contato-form{ display: grid; gap: 1.5rem; }
.contato-form label{
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--verde-escuro);
  display: block;
  margin-bottom: 0.6rem;
}
.contato-form input, .contato-form textarea{
  width: 100%;
  border: 1px solid rgba(56,84,62,0.2);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  background: var(--creme);
  color: var(--verde-escuro);
}
.contato-form textarea{ resize: vertical; min-height: 130px; }
.contato-form input:focus, .contato-form textarea:focus{ outline: none; border-color: var(--dourado); box-shadow: 0 0 0 2px rgba(221,187,128,0.35); }

.contato-submit{
  background: var(--vinho);
  color: #fff;
  width: 100%;
  text-align: center;
  padding: 1rem 1.75rem;
  border-radius: var(--radius);
  transition: background 0.2s ease;
}
.contato-submit:hover{ background: var(--vinho-escuro); }
.contato-submit:disabled{ opacity: 0.6; cursor: not-allowed; }

.contato-alerta{
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
.contato-alerta--sucesso{
  background: rgba(56,84,62,0.1);
  border: 1px solid var(--verde);
  color: var(--verde-escuro);
}
.contato-alerta--erro{
  background: rgba(129,20,41,0.08);
  border: 1px solid var(--vinho);
  color: var(--vinho);
}

/* =========================================================
   SOBRE O SHOPPING — seção "Desde 2006"
   ========================================================= */
.sobre-hero-section{ padding-top: 3rem; }

.sobre-hero-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 900px){
  .sobre-hero-grid{ grid-template-columns: 1fr 1.25fr; gap: 0; align-items: stretch; }
}

.sobre-hero-left{
  background: var(--vinho);
  color: var(--dourado-claro);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
}
@media (min-width: 900px){
  .sobre-hero-left{ border-radius: var(--radius-lg) 0 0 var(--radius-lg); padding: 3.5rem; }
}
.sobre-hero-left .eyebrow{ margin-bottom: 0.5rem; }
.sobre-ano{
  font-size: 3.25rem;
  font-weight: 600;
  color: var(--dourado-claro);
  line-height: 1;
  margin-bottom: 1.5rem;
}
@media (min-width: 480px){ .sobre-ano{ font-size: 4.5rem; } }
@media (min-width: 900px){ .sobre-ano{ font-size: 6rem; } }
.sobre-tagline{ font-size: 1.15rem; max-width: 320px; }

.btn-outline{
  align-self: flex-start;
  display: inline-block;
  border: 1px solid var(--dourado);
  color: var(--dourado-claro);
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius);
  transition: background 0.25s ease, color 0.25s ease;
}
.btn-outline:hover{ background: var(--dourado); color: var(--verde-escuro); }

.sobre-hero-right{
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(221,187,128,0.5);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 900px){
  .sobre-hero-right{ border-left: none; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
}

.sobre-foto-card img{
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}
@media (min-width: 900px){ .sobre-foto-card img{ height: 340px; } }
.sobre-foto-legenda{
  background: var(--verde-escuro);
  color: var(--dourado-claro);
  font-style: italic;
  text-align: center;
  padding: 1rem 1.5rem;
  margin: 0;
}

.sobre-texto-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  font-size: 0.98rem;
  line-height: 1.7;
}
@media (min-width: 700px){
  .sobre-texto-grid{ grid-template-columns: repeat(3, 1fr); padding: 2.5rem; }
}

.sobre-conteudo-extra{
  max-width: 860px;
  margin: 3.5rem auto 0;
  font-size: 1rem;
  line-height: 1.75;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background: var(--verde);
  color: var(--dourado-claro);
  padding: 4rem 0 1.5rem;
}
.footer-grid{
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  text-align: center;
}
.footer-grid img{ width: 76px; height: auto; margin: 0 auto; }
.footer-social{ justify-content: center; }
@media (min-width: 768px){
  .footer-grid{ grid-template-columns: repeat(4,1fr); text-align: left; }
  .footer-grid img{ margin: 0; }
  .footer-social{ justify-content: flex-start; }
}
.site-footer h4{
  color: var(--dourado);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.site-footer p{ margin: 0; font-size: 0.9rem; opacity: 0.9; }
.footer-social{ display: flex; gap: 1rem; }
.footer-social a{
  width: 38px; height: 38px;
  border: 1px solid var(--dourado);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.footer-social svg{ width: 16px; height: 16px; fill: var(--dourado-claro); }
.footer-bottom{
  text-align: center;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(221,187,128,0.25);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  opacity: 0.75;
}

/* =========================================================
   LOJAS — página diretório (arquivo)
   ========================================================= */
.lojas-layout{
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .lojas-layout{ grid-template-columns: 380px 1fr; align-items: stretch; }
}

.lojas-sidebar{
  background: var(--verde);
  color: var(--dourado-claro);
  padding: 3rem 1.5rem;
}
@media (min-width: 900px){ .lojas-sidebar{ padding: 4rem 3rem; } }
.lojas-sidebar h1{
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 3rem;
  color: var(--dourado-claro);
  margin: 0.5rem 0 1.25rem;
}
.lojas-sidebar > p{ opacity: 0.9; margin-bottom: 2rem; max-width: 380px; }

.lojas-busca{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(221,187,128,0.5);
  padding-bottom: 0.75rem;
  margin-bottom: 2rem;
}
.lojas-busca svg{ width: 18px; height: 18px; stroke: var(--dourado); fill: none; flex-shrink: 0; }
.lojas-busca input{
  background: transparent;
  border: none;
  color: var(--dourado-claro);
  font-family: inherit;
  font-size: 1rem;
  width: 100%;
}
.lojas-busca input::placeholder{ color: var(--dourado-claro); opacity: 0.6; }
.lojas-busca input:focus{ outline: none; }

.lojas-alfabeto{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
}
.letra-btn{
  border: 1px solid rgba(221,187,128,0.5);
  border-radius: 0.35rem;
  color: var(--dourado-claro);
  padding: 0.5rem 0;
  font-family: inherit;
  font-size: 0.85rem;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.letra-btn:hover, .letra-btn.is-active{
  background: var(--dourado);
  color: var(--verde-escuro);
  border-color: var(--dourado);
}

.lojas-conteudo{ padding: 3rem 1.5rem 5rem; }
@media (min-width: 900px){ .lojas-conteudo{ padding: 4rem 3rem 5rem; } }

.lojas-header-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(56,84,62,0.2);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}
.lojas-header-row h2{
  color: var(--vinho);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 2rem;
  margin: 0;
}
.lojas-total{ font-size: 0.95rem; opacity: 0.7; }

.lojas-lista-grid{
  column-count: 1;
  column-gap: 3rem;
}
@media (min-width: 700px){
  .lojas-lista-grid{ column-count: 2; }
}

.loja-linha{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(56,84,62,0.15);
  break-inside: avoid;
  transition: padding-left 0.25s ease, color 0.25s ease;
}
.loja-linha:hover{
  color: var(--vinho);
  padding-left: 0.5rem;
}
.loja-linha .num{
  color: var(--dourado);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  width: 1.5rem;
  flex-shrink: 0;
}
.loja-linha .nome{
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.05rem;
  font-weight: 500;
}
.loja-linha .arrow{ color: var(--verde); transition: transform 0.25s ease; }
.loja-linha:hover .arrow{ color: var(--vinho); transform: translateX(6px); }

.lojas-vazio{ text-align: center; opacity: 0.7; padding: 2rem 0; }

/* =========================================================
   BLOG — listagem (home.php)
   ========================================================= */
.blog-lista{ display: flex; flex-direction: column; }
.blog-post-linha{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(56,84,62,0.15);
}
.blog-post-linha:first-child{ padding-top: 0; }
@media (min-width: 640px){
  .blog-post-linha{ grid-template-columns: 260px 1fr; gap: 2rem; align-items: center; padding: 2.5rem 0; }
}
.blog-post-thumb{ display: block; }
.blog-post-thumb img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform 0.35s ease;
}
.blog-post-linha:hover .blog-post-thumb img{ transform: scale(1.03); }
.blog-post-texto .post-meta{
  color: var(--dourado);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
.blog-post-texto h2{
  margin: 0 0 0.75rem;
}
.blog-post-texto h2 a{
  color: var(--vinho);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.3rem;
  font-weight: 500;
  transition: opacity 0.2s ease;
}
.blog-post-texto h2 a:hover{ opacity: 0.75; }
.blog-post-texto p{ margin: 0 0 0.75rem; opacity: 0.85; line-height: 1.6; }
.blog-post-texto .ler-materia{
  display: inline-block;
  color: var(--verde);
  font-weight: 500;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}
.blog-post-texto .ler-materia:hover{ color: var(--vinho); }
.blog-paginacao{ margin-top: 3rem; }

/* =========================================================
   POST — single.php
   ========================================================= */
.post-header{ padding: 2rem 0 2.5rem; max-width: 900px; }
.post-header .post-meta{
  color: var(--dourado);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.post-header h1{
  color: var(--vinho);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 2rem;
  line-height: 1.15;
  margin: 0;
}
@media (min-width: 768px){ .post-header h1{ font-size: 3rem; } }

.post-imagem-destaque{ margin-bottom: 2.5rem; }
.post-imagem-destaque img{
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

.post-conteudo{
  font-size: 1.05rem;
  line-height: 1.8;
}
.post-conteudo p{ margin: 0 0 1.5rem; }

.post-veja-tambem{
  border-top: 1px solid rgba(56,84,62,0.15);
  padding: 3rem 0 5rem;
  margin-top: 1rem;
}
.post-veja-tambem .blog-grid{
  grid-template-columns: 1fr;
  max-width: 900px;
}
@media (min-width: 640px){
  .post-veja-tambem .blog-grid{ grid-template-columns: repeat(2, 1fr); }
}


/* =========================================================
   HISTÓRICO / ARQUIVO POR ANO
   ========================================================= */
.historico-ano{ margin-bottom: 3rem; }
.historico-ano h2{ color: var(--vinho); border-bottom: 1px solid var(--dourado); padding-bottom: 0.5rem; }
.historico-lista li{ padding: 0.5rem 0; border-bottom: 1px dashed rgba(56,84,62,0.2); }
.historico-lista a:hover{ color: var(--vinho); }