/* =========================================================
   Mariana Nutricionista — Plataforma de Receitas
   Identidade visual extraída dos e-books: creme + verde petróleo + dourado
   ========================================================= */

:root{
  --cream: #faf3e6;
  --cream-2: #f3e8d7;
  --paper: #fffdf9;
  --teal-950: #0e2e2b;
  --teal-900: #123c37;
  --teal-800: #164943;
  --teal-700: #1b5951;
  --teal-600: #22706a;
  --gold: #b98a2e;
  --gold-light: #d9ad55;
  --gold-pale: #e9c77e;
  --ink: #2c2620;
  --ink-soft: #5b5044;
  --line: #e4d6bd;
  --white: #ffffff;
  --danger: #a3432f;
  --shadow: 0 10px 30px rgba(20, 40, 35, .10);
  --shadow-sm: 0 4px 14px rgba(20, 40, 35, .08);
  --radius: 18px;
  --radius-sm: 12px;
  --serif: "Playfair Display", "Georgia", serif;
  --body: "Lora", "Georgia", serif;
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--serif); color: var(--teal-900); margin:0 0 .5em; font-weight:700; }
p{ margin:0 0 1em; }
.container{ max-width: var(--maxw); margin:0 auto; padding: 0 20px; }
.wrap-narrow{ max-width: 880px; margin:0 auto; padding: 0 20px; }

/* decorative leaf divider */
.divider{
  display:flex; align-items:center; justify-content:center; gap:10px;
  color: var(--gold); margin: 14px 0 22px; opacity:.9;
}
.divider::before,.divider::after{
  content:""; height:1px; width:56px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* =================== HEADER =================== */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: linear-gradient(180deg, var(--teal-900), var(--teal-800));
  border-bottom: 3px solid var(--gold);
}
.site-header .inner{
  max-width: var(--maxw); margin:0 auto; padding: 14px 20px;
  display:flex; align-items:center; gap:18px; flex-wrap: wrap;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand .leaf{ color: var(--gold-light); font-size:1.3rem; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-family: var(--serif); color: var(--white); font-size:1.15rem; letter-spacing:.3px; }
.brand-text span{ color: var(--gold-pale); font-size:.68rem; letter-spacing: 2px; text-transform:uppercase; }

.main-nav{ display:flex; gap:4px; flex-wrap: wrap; }
.main-nav a{
  color: var(--cream); font-size:.92rem; padding:8px 14px; border-radius: 999px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a.active{ background: rgba(217,173,85,.18); color: var(--gold-pale); }

.header-search{ position:relative; width: 260px; max-width: 46vw; }
.header-search input{
  width:100%; padding: 9px 14px 9px 36px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.92); font-family: var(--body); font-size: .9rem; color: var(--ink);
  outline: 2px solid transparent; transition: outline-color .15s;
}
.header-search input:focus{ outline-color: var(--gold-light); }
.header-search .ico{
  position:absolute; left:12px; top:50%; transform:translateY(-50%); color: var(--teal-700); font-size:.9rem;
}
.search-results{
  position:absolute; top: calc(100% + 8px); left:0; right:0;
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); max-height: 420px; overflow-y:auto; display:none; z-index: 80;
}
.search-results.open{ display:block; }
.search-results a{
  display:flex; gap:10px; align-items:center; padding:9px 12px; border-bottom:1px solid var(--line);
}
.search-results a:last-child{ border-bottom:none; }
.search-results a:hover{ background: var(--cream-2); }
.search-results img{ width:42px; height:42px; object-fit:cover; border-radius:8px; flex:none; }
.search-results .sr-meta{ min-width:0; }
.search-results .sr-title{ font-family: var(--serif); font-size:.92rem; color: var(--teal-900); }
.search-results .sr-cat{ font-size:.72rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.5px; }
.search-empty{ padding: 14px; font-size:.85rem; color: var(--ink-soft); text-align:center; }

/* =================== HERO (home) =================== */
.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(120% 140% at 100% 0%, #1d5a52 0%, var(--teal-900) 45%, var(--teal-950) 100%);
  color: var(--cream);
  padding: 64px 0 84px;
}
.hero .container{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items:center; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px; color: var(--gold-pale);
  font-size:.78rem; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:14px;
}
.hero h1{ color: var(--white); font-size: clamp(2rem, 4vw, 3rem); line-height:1.15; margin-bottom:16px; }
.hero h1 em{ font-style:italic; color: var(--gold-pale); }
.hero p.lead{ color: #d9e6e2; font-size:1.05rem; max-width: 46ch; margin-bottom: 26px; }
.hero-photo{
  position:relative; justify-self:center;
}
.hero-photo img{
  width: 280px; height: 340px; object-fit:cover; border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%;
  border: 6px solid rgba(217,173,85,.55); box-shadow: var(--shadow);
}
.hero-photo .badge{
  position:absolute; bottom:-6px; right:-10px; background: var(--gold); color: var(--teal-950);
  font-family: var(--serif); font-weight:700; font-size:.82rem; padding: 10px 16px; border-radius: 999px;
  box-shadow: var(--shadow-sm); text-align:center; line-height:1.2;
}

.hero-search{ max-width: 560px; margin-top: 8px; }
.hero-search form{ display:flex; gap:0; background: var(--paper); border-radius: 999px; padding:6px; box-shadow: var(--shadow); }
.hero-search input{
  flex:1; border:none; background:transparent; padding: 12px 18px; font-family: var(--body); font-size:1rem; color:var(--ink);
}
.hero-search input:focus{ outline:none; }
.hero-search button{
  border:none; background: var(--gold); color: var(--teal-950); font-family: var(--serif); font-weight:700;
  padding: 0 24px; border-radius: 999px; cursor:pointer; font-size:.95rem;
}
.hero-search button:hover{ background: var(--gold-light); }
.hero .search-results{ margin-top: 8px; position: static; box-shadow: var(--shadow); display:none; }
.hero .search-results.open{ display:block; }

.stat-row{ display:flex; gap: 34px; margin-top: 30px; flex-wrap: wrap; }
.stat-row .stat b{ display:block; font-family: var(--serif); font-size:1.7rem; color: var(--gold-pale); }
.stat-row .stat span{ font-size:.78rem; letter-spacing:1px; text-transform:uppercase; color:#bcd0cb; }

/* =================== CATEGORY CARDS =================== */
.cat-section{ padding: 60px 0; }
.section-head{ text-align:center; max-width: 620px; margin: 0 auto 40px; }
.section-head .kicker{ color: var(--gold); font-size:.78rem; letter-spacing:3px; text-transform:uppercase; }
.section-head h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
.section-head p{ color: var(--ink-soft); }

.cat-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.cat-card{
  position:relative; background: var(--paper); border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow-sm); border:1px solid var(--line); transition: transform .2s, box-shadow .2s;
  display:flex; flex-direction:column;
}
.cat-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow); }
.cat-card .cat-photo{ height: 190px; overflow:hidden; position:relative; }
.cat-card .cat-photo img{ width:100%; height:100%; object-fit:cover; transition: transform .4s; }
.cat-card:hover .cat-photo img{ transform: scale(1.06); }
.cat-card .cat-count{
  position:absolute; top:12px; right:12px; background: rgba(14,46,43,.82); color: var(--gold-pale);
  font-size:.72rem; letter-spacing:1px; padding: 5px 11px; border-radius: 999px; font-family: var(--serif);
}
.cat-card .cat-body{ padding: 20px 22px 24px; flex:1; display:flex; flex-direction:column; }
.cat-card h3{ font-size:1.3rem; margin-bottom:8px; }
.cat-card p{ color: var(--ink-soft); font-size:.92rem; flex:1; }
.cat-card .cat-link{
  margin-top:10px; color: var(--teal-700); font-weight:600; font-size:.88rem; display:inline-flex; align-items:center; gap:6px;
}
.cat-card .cat-link .arrow{ transition: transform .2s; }
.cat-card:hover .cat-link .arrow{ transform: translateX(4px); }

/* =================== ABOUT STRIP =================== */
.about-strip{ background: var(--cream-2); padding: 54px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-strip .container{ display:grid; grid-template-columns: auto 1fr; gap: 30px; align-items:center; }
.about-strip img{ width:120px; height:120px; border-radius:50%; object-fit:cover; border:4px solid var(--paper); box-shadow: var(--shadow-sm); }
.about-strip h3{ font-size:1.2rem; margin-bottom:6px; }
.about-strip p{ color: var(--ink-soft); margin:0; max-width: 60ch; }

/* =================== LISTING PAGES =================== */
.page-hero{
  background: linear-gradient(180deg, var(--teal-900), var(--teal-800));
  color: var(--cream); padding: 46px 0 40px; text-align:center;
}
.page-hero .kicker{ color: var(--gold-pale); letter-spacing:3px; text-transform:uppercase; font-size:.76rem; }
.page-hero h1{ color:var(--white); margin: 10px 0 8px; font-size: clamp(1.8rem,3.4vw,2.6rem); }
.page-hero p{ color:#d9e6e2; max-width:56ch; margin:0 auto; }

.toolbar{
  max-width: var(--maxw); margin: -26px auto 0; padding: 0 20px 0;
  position:relative; z-index: 5;
}
.toolbar-inner{
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 22px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; border:1px solid var(--line);
}
.toolbar .search-box{ position:relative; flex:1; min-width:220px; }
.toolbar .search-box input{
  width:100%; padding:11px 14px 11px 36px; border-radius:999px; border:1px solid var(--line);
  font-family: var(--body); font-size:.95rem; background: var(--cream);
}
.toolbar .search-box .ico{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--teal-700); }
.filter-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  padding:8px 15px; border-radius:999px; border:1px solid var(--line); background: var(--cream);
  font-size:.82rem; cursor:pointer; color: var(--ink-soft); transition: all .15s; white-space:nowrap;
}
.chip:hover{ border-color: var(--gold); color: var(--teal-800); }
.chip.active{ background: var(--teal-800); color: var(--white); border-color: var(--teal-800); }

.results-count{ max-width: var(--maxw); margin: 22px auto 8px; padding: 0 20px; color: var(--ink-soft); font-size:.9rem; }

.recipe-grid{
  max-width: var(--maxw); margin: 0 auto; padding: 6px 20px 70px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.recipe-card{
  background: var(--paper); border-radius: var(--radius-sm); overflow:hidden; border:1px solid var(--line);
  box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s; display:flex; flex-direction:column;
}
.recipe-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.recipe-card .thumb{ position:relative; aspect-ratio: 4/3.1; overflow:hidden; background: var(--cream-2); }
.recipe-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .35s; }
.recipe-card:hover .thumb img{ transform: scale(1.07); }
.recipe-card .thumb .num{
  position:absolute; top:10px; left:10px; background: rgba(14,46,43,.85); color: var(--gold-pale);
  font-family: var(--serif); font-size:.78rem; padding:4px 10px; border-radius:999px;
}
.recipe-card .rc-body{ padding: 14px 16px 16px; flex:1; display:flex; flex-direction:column; }
.recipe-card .rc-cat{ font-size:.68rem; letter-spacing:1px; text-transform:uppercase; color: var(--gold); margin-bottom:4px; }
.recipe-card h3{ font-size:1.02rem; line-height:1.3; margin-bottom:8px; flex:1; }
.recipe-card .rc-meta{ display:flex; gap:12px; font-size:.76rem; color: var(--ink-soft); }
.recipe-card .rc-meta span{ display:inline-flex; align-items:center; gap:4px; }
.no-results{ text-align:center; padding: 60px 20px; color: var(--ink-soft); grid-column: 1/-1; }

/* =================== RECIPE PAGE =================== */
.recipe-hero{
  background: linear-gradient(180deg, var(--teal-900), var(--teal-800)); color: var(--cream); padding: 30px 0 0;
}
.breadcrumb{ font-size:.8rem; color:#bcd0cb; padding-top:8px; }
.breadcrumb a:hover{ color: var(--gold-pale); }
.recipe-hero-inner{
  max-width: var(--maxw); margin:0 auto; padding: 18px 20px 40px;
  display:grid; grid-template-columns: 1.2fr 1fr; gap: 34px; align-items:center;
}
.recipe-tag{
  display:inline-block; background: rgba(217,173,85,.16); color: var(--gold-pale); border:1px solid rgba(217,173,85,.4);
  font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; padding: 6px 14px; border-radius:999px; margin-bottom:14px;
}
.recipe-hero h1{ color: var(--white); font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom:12px; }
.recipe-hero .num{ color: var(--gold-light); font-weight:700; }
.recipe-desc{ color:#d9e6e2; font-style:italic; font-size:1.05rem; }
.recipe-hero-photo{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); border: 5px solid rgba(255,255,255,.08); }
.recipe-hero-photo img{ width:100%; height: 320px; object-fit:cover; }

.stat-cards{ display:flex; gap:16px; margin-top: 22px; flex-wrap:wrap; }
.stat-card{
  background: rgba(255,255,255,.06); border:1px solid rgba(217,173,85,.25); border-radius: var(--radius-sm);
  padding: 12px 18px; min-width: 150px;
}
.stat-card .lbl{ font-size:.68rem; letter-spacing:1px; text-transform:uppercase; color: var(--gold-pale); margin-bottom:3px; }
.stat-card .val{ font-family: var(--serif); font-size:1.05rem; color: var(--white); }

.recipe-body{ max-width: var(--maxw); margin: 0 auto; padding: 46px 20px 30px; display:grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.panel h2{ display:flex; align-items:center; gap:10px; font-size:1.3rem; }
.panel h2 .ico{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  background: var(--teal-800); color: var(--gold-pale); font-size:1rem; flex:none;
}
.ingredient-list li{ padding: 9px 0; border-bottom: 1px dashed var(--line); display:flex; gap:10px; }
.ingredient-list li::before{ content:"❖"; color: var(--gold); flex:none; font-size:.8rem; margin-top:.25em; }
.steps-list{ counter-reset: step; }
.steps-list li{
  counter-increment: step; padding: 12px 0 12px 42px; border-bottom:1px dashed var(--line); position:relative;
}
.steps-list li::before{
  content: counter(step); position:absolute; left:0; top:10px; width:28px; height:28px; border-radius:50%;
  background: var(--teal-800); color: var(--gold-pale); font-family: var(--serif); font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.note-box{
  margin-top: 18px; background: var(--cream-2); border-left:3px solid var(--gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px; font-size:.9rem; color: var(--ink-soft); font-style:italic;
}

.nutrition-section{ background: var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 40px 0; margin-top: 10px; }
.nutrition-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap: 16px; max-width: var(--maxw); margin:0 auto; padding: 0 20px; }
.nutri-card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-sm); text-align:center; padding: 20px 10px;
  box-shadow: var(--shadow-sm);
}
.nutri-card .ico{ font-size:1.4rem; color: var(--gold); margin-bottom:8px; }
.nutri-card .lbl{ font-size:.72rem; letter-spacing:1px; text-transform:uppercase; color: var(--ink-soft); margin-bottom:4px; }
.nutri-card .val{ font-family: var(--serif); font-size:1.25rem; color: var(--teal-900); font-weight:700; }

.related-section{ padding: 54px 0 70px; }
.related-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }

.site-footer{ background: var(--teal-950); color: #bcd0cb; padding: 44px 0 26px; margin-top: 20px; }
.site-footer .container{ display:flex; justify-content:space-between; gap: 20px; flex-wrap:wrap; }
.site-footer .brand-text strong{ color: var(--white); }
.footer-links{ display:flex; gap: 26px; flex-wrap:wrap; }
.footer-links a:hover{ color: var(--gold-pale); }
.footer-bottom{ text-align:center; font-size:.78rem; color:#7c948d; margin-top: 30px; border-top:1px solid rgba(255,255,255,.08); padding-top: 18px; }

/* =================== RESPONSIVE =================== */
@media (max-width: 980px){
  .hero .container{ grid-template-columns: 1fr; text-align:center; }
  .hero-photo{ order:-1; }
  .hero p.lead{ margin-left:auto; margin-right:auto; }
  .stat-row{ justify-content:center; }
  .cat-grid{ grid-template-columns: 1fr 1fr; }
  .recipe-grid{ grid-template-columns: repeat(3,1fr); }
  .recipe-hero-inner{ grid-template-columns: 1fr; }
  .recipe-hero-photo img{ height: 260px; }
  .recipe-body{ grid-template-columns: 1fr; gap: 30px; }
  .nutrition-grid{ grid-template-columns: repeat(5,1fr); }
  .related-grid{ grid-template-columns: repeat(2,1fr); }
  .about-strip .container{ grid-template-columns: 1fr; text-align:center; justify-items:center; }
}
@media (max-width: 640px){
  .main-nav{ order:3; width:100%; justify-content:center; }
  .header-search{ width: 100%; max-width:none; }
  .cat-grid{ grid-template-columns: 1fr; }
  .recipe-grid{ grid-template-columns: repeat(2,1fr); }
  .nutrition-grid{ grid-template-columns: repeat(2,1fr); }
  .related-grid{ grid-template-columns: 1fr 1fr; }
  .stat-cards{ gap:10px; }
  .stat-card{ min-width: 120px; padding: 10px 14px; }
}