/* ============================================================
   0) DESIGN TOKENS / VARIABLES
   ============================================================ */
/* mom gpt recommend :root{
  --bg:#f7f4ef;
  --surface:#ffffff;
  --text:#4a4a4a;
  --muted:#5a6761;
  --accent:#5f9ea0;
  --accent-dark:#2f6e60;
  --border:#e2ded8;
  --shadow:0 18px 40px rgba(34,48,40,.08);
  --maxw:1100px;
}*/
:root{
  --bg:#f7f4ef;
  --surface:#ffffff;
  --text:#1c201e;
  --muted:#5a6761;
  --accent:#6f8f7a;
  --accent-dark:#4a6657;
  --border:#e2ded8;
  --shadow:0 18px 40px rgba(34,48,40,.08);
  --maxw:1100px;

  --font-scale:1.10;
  --fs-body:calc(16px * var(--font-scale));
  --fs-12:calc(12px * var(--font-scale));
  --fs-13:calc(13px * var(--font-scale));
  --fs-15:calc(15px * var(--font-scale));
  --fs-16:calc(16px * var(--font-scale));
  --fs-17:calc(17px * var(--font-scale));
  --fs-20:calc(20px * var(--font-scale));
  --fs-24:calc(24px * var(--font-scale));
  --fs-30:calc(30px * var(--font-scale));
  --fs-36:calc(36px * var(--font-scale));
}
/* ============================================================
   1) GLOBAL RESET / BASE
   ============================================================ */
*{ box-sizing:border-box }

html,body{
  margin:0;
  padding:0;
  font-size:var(--fs-body);
  font-family:"Alegreya Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.52;
  color:var(--text);
  background:var(--bg);
}

a{ color:inherit }

/* Global image sanity (prevents inline gaps + overflow weirdness) */
img{
  display:block;
  max-width:100%;
  height:auto;
}

/* ============================================================
   2) LAYOUT CONTAINER
   ============================================================ */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px;
}

/* ============================================================
   3) HEADER / TOPBAR
   ============================================================ */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(247,244,239,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
}

.topbar .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:70px;
  min-width: 0;
}

/* Brand block (name + subtitle) */
.brand{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  text-decoration:none;
}

.brand b{
  font-family:"Cambo","Times New Roman",serif;
  font-size:var(--fs-20);
  letter-spacing:.3px;
}

.brand span{
  font-size:var(--fs-12);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.6px;
}

/* ============================================================
   4) NAVIGATION (THIS IS WHERE MOST BUGS LIVE)
   IMPORTANT:
   - one single .nav block only (you had duplicates fighting)
   - anchors left, hides overflow, JS controls the ⋯ button
   ============================================================ */
.nav{

  display:flex;
  gap:4px;
  align-items:center;
  min-width: 0;
  flex-wrap:nowrap;           /* never wrap: we collapse into ⋯ instead */
  overflow:visible;            
  position:relative;          /* dropdown is positioned relative to nav */

  justify-content:flex-start; /* keep items anchored on the LEFT inside nav */
}

/* The secret sauce: don't let flexbox "squish" items */
.nav > *{
  flex-shrink:0;
}

.nav a{
  font-size:var(--fs-12);
  text-decoration:none;
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  transition:all .2s ease;

  white-space:nowrap;         /* prevents ugly multi-line pills */
}

.nav a:hover,
.nav a[aria-current="page"]{
  color:var(--text);
  background:rgba(111,143,122,.15);
}

/* When JS hides items, it can use this class (optional path) */
.nav a.is-hidden{
  display:none;
}

/* 3 dots button (JS turns display on when needed) */
.nav-more{
  background:rgba(111,143,122,.08);
  border:1px solid rgba(111,143,122,.3);
  border-radius:999px;
  padding:6px 10px;
  font-size:var(--fs-16);
  cursor:pointer;
  color:var(--accent-dark);
  flex-shrink:0;
}

.nav-more[hidden] { display:none; }

.nav-more:hover{
  color:var(--text);
}

/* dropdown containing the hidden items */
.nav-dropdown{
  display:none;
  position:absolute;
  right:0;
  top:100%;
  margin-top:6px;
  background:white;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:6px;
  min-width:180px;
  z-index:20;
}

.nav-dropdown a{
  display:block;
  padding:8px 12px;
  border-radius:10px;
  text-decoration:none;
  font-size:var(--fs-13);
}

.nav-dropdown a:hover{
  background:rgba(111,143,122,.15);
}

/* open state (JS toggles aria-expanded on the button) */
.nav-more[aria-expanded="true"] + .nav-dropdown{
  display:block;
}

/* ============================================================
   5) HERO
   ============================================================ */
.hero{
  background:
    linear-gradient(180deg, rgba(247,244,239,.88), rgba(247,244,239,.72)),
    url("../img/hero_bg.jpg?v=20260330") top/cover no-repeat;
  padding:50px 0 30px;
  border-bottom:1px solid var(--border);
}

.hero .box{
  max-width:720px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(111,143,122,.2);
  border-radius:20px;
  padding:22px 22px;
  box-shadow:var(--shadow);
}

.eyebrow{
  margin:0 0 6px;
  font-size:var(--fs-12);
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--accent-dark);
}

h1{
  margin:0 0 10px;
  font-size:var(--fs-36);
  font-family:"Cambo","Times New Roman",serif;
}

.hero-quote{
  margin:0;
  color:var(--muted);
  font-size:var(--fs-16);
  line-height:1.52;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}

/* ============================================================
   6) BUTTONS
   ============================================================ */
.cta{
  display:inline-block;
  background:var(--accent);
  color:white;
  border:1px solid var(--accent-dark);
  padding:11px 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  transition:all .2s ease;
}

.cta:hover{ background:var(--accent-dark) }

.btn{
  display:inline-block;
  background:rgba(111,143,122,.08);
  border:1px solid rgba(111,143,122,.3);
  padding:10px 16px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  color:var(--accent-dark);
  transition:all .2s ease;
}

.btn, .cta{ cursor:pointer }
.btn:hover{ background:rgba(111,143,122,.18) }
.btn.ghost{ background:transparent }

.card .btn-contact{
  margin-top:14px;
}

/* ============================================================
   7) MAIN WRAPPER
   ============================================================ */
.main{ padding:24px 0 40px }

/* ============================================================
   8) CARDS (base)
   ============================================================ */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  margin:14px 0;
  box-shadow:var(--shadow);
}

.card h2{
  margin:0 0 12px;
  font-size:var(--fs-24);
  line-height:1.25;
  font-family:"Cambo","Times New Roman",serif;
}

.card h3{ margin:14px 0 8px; font-size:var(--fs-20); line-height:1.3 }
.card p, .card li{ color:var(--muted); font-size:var(--fs-15); line-height:1.58 }
.card ol{ color:var(--muted) }

.tools-list a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.tools-list a:hover{
  color:var(--accent-dark);
  border-bottom-color:rgba(74,102,87,.35);
}

/* ============================================================
   9) GRID (used in footer etc.)
   ============================================================ */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px }
.col-6{ grid-column:span 6 }
.col-12{ grid-column:span 12 }

/* ============================================================
   10) FIGURES / IMAGES IN CONTENT
   ============================================================ */
.figure{ margin:16px 0 }

.figure img{
  width:100%;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:0 12px 28px rgba(36,46,40,.12);
}

/* Niromathé session image layout (page-specific) */
.niro-shot{
  height:520px;
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:0 12px 28px rgba(36,46,40,.12);
}

.niro-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Detail / close-up framing */
.niro-shot--detail img{
  object-position:60% 65%;
}

/* ============================================================
   11) INLINE CARD SYSTEM (text + image side-by-side)
   ============================================================ */
.card.inline{
  display:grid;
  grid-template-columns: 1fr auto; /* text + small image */
  gap:24px;
  align-items:start;
}

/* homepage variant: image left, text right */
.card.inline.inline-media-left{
  grid-template-columns:auto 1fr;
}

.card.inline .figure{
  margin:0;
}

.card.inline .figure img{
  width:180px;
  max-width:180px;
}

.card.inline.inline-media-left .figure img{
  width:235px;
  max-width:235px;
}

/* --- LARGE SPLIT MODE (auto)
   triggers when the image is portrait/tall */
.card.inline .figure img[data-tall]{
  width:100%;
  max-width:none;
  height:100%;
  object-fit:cover;
}

/* force split when image is tall */
.card.inline:has(.figure img[data-tall]){
  grid-template-columns: 5fr 4fr;
  align-items:stretch;
}

.card.inline:has(.figure img[data-tall]) .figure{
  display:flex;
}

/* ============================================================
   12) SMALL UI HELPERS
   ============================================================ */
.badge{
  display:inline-block;
  font-size:var(--fs-12);
  color:var(--accent-dark);
  border:1px solid rgba(111,143,122,.3);
  padding:6px 12px;
  border-radius:999px;
  background:rgba(111,143,122,.1);
}

.note{ font-size:var(--fs-13); color:var(--muted); line-height:1.45 }
.divider{ height:1px; background:var(--border); margin:24px 0 }

.highlight{
  background:rgba(111,143,122,.1);
  padding:16px;
  border-radius:16px;
}

/* ============================================================
   13) FORMS
   ============================================================ */
.form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:10px;
}

.form label{ font-size:var(--fs-13); color:var(--muted); line-height:1.45 }

.form input,
.form textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fbfaf7;
  color:var(--text);
}

.form textarea{
  min-height:120px;
  grid-column:span 2;
  resize:vertical;
}

.form .full{ grid-column:span 2 }

/* ============================================================
   14) TESTIMONIALS
   ============================================================ */
.testimonials{
  padding:30px 24px;
}

/* title */
.testimonials h2{
  text-align:center;
  margin-bottom:6px;
}

.testimonials .subtitle{
  text-align:center;
  color:var(--muted);
  margin-bottom:26px;
}

.testi-grid{
  column-count:2;
  column-gap:18px;
}

.testi{
  background:linear-gradient(180deg, #ffffff, rgba(111,143,122,.08));
  border:1px solid rgba(111,143,122,.25);
  box-shadow:0 12px 26px rgba(36,46,40,.14);
  border-radius:16px;
  padding:16px 18px;
  display:inline-block;
  width:100%;
  margin:0 0 18px;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
}

.testi p{
  margin:0 0 8px;
  line-height:1.5;
  color:#55645d;
  font-style:italic;
}

.testi span{
  font-weight:600;
  color:#1c201e;
}

.testi-meta{
  margin:0 0 8px;
  color:#6a756f;
  font-size:var(--fs-12);
  line-height:1.35;
}

/* these two selectors existed in your file (kept as-is),
   even if they're a bit odd — removing them could break something */
.card.testimonials .card p:first-child{
  font-style:italic;
  color:#55645d;
}

.card.testimonials .card p:last-child{
  margin-top:10px;
  font-weight:600;
  color:#1c201e;
}

/* ============================================================
   15) GALLERY (page-specific)
   ============================================================ */
.card.gallery .figure{
  height:600px;      /* ajuste si besoin */
  overflow:hidden;
}

.card.gallery .figure img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ============================================================
   16) FOOTER
   ============================================================ */
.footer{
  border-top:1px solid var(--border);
  padding:26px 0 36px;
  color:var(--muted);
  font-size:var(--fs-13);
  line-height:1.45;
  background:#f2eee8;
}

.prose-justify p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:none;
  word-break:normal;
  overflow-wrap:normal;
}

.prose-justify .justify-wrap li{
  text-align:justify;
  text-justify:inter-word;
  hyphens:none;
  word-break:normal;
  overflow-wrap:normal;
}

.prose-justify .note,
.prose-justify .badge{
  text-align:left;
}

.footer a{ text-decoration:none; color:var(--muted) }
.footer a:hover{ color:var(--text) }

.footer .backup-link{
  display:block;
  margin-top:6px;
  font-size:var(--fs-12);
}

.footer .col-12{
  text-align:center;
}

.footer .backup-link a{
  text-decoration:underline;
}

.social{ display:flex; gap:12px; align-items:center }
.social img{ width:22px; height:22px; border-radius:6px }

/* ============================================================
   17) RESPONSIVE (MOBILE) — keep at bottom so it overrides stuff
   ============================================================ */
@media (max-width:900px){
  .container{ padding:0 14px }
  .main{ padding:24px 0 40px }

  .card{
    margin:12px 0;
    padding:18px;
    border-radius:16px;
  }

  .card p,
  .card li{
    line-height:1.62;
  }

  .testimonials{
    padding:28px 18px;
  }

  .col-6{ grid-column:span 12 }
  h1{ font-size:var(--fs-30) }

  /* nav already anchored left; keeping your intent */
  .nav{ justify-content:flex-start }

  /* NOTE: your .card.inline is display:grid, not flex.
     These flex rules don't do anything, but we keep them
     because deleting them can feel scary when debugging. */
  .card.inline{
    grid-template-columns:1fr;
    gap:16px;
  }

  .card.inline .figure img{
    width:100%;
    max-width:100%;
  }

  .card.inline.inline-media-left .figure{
    text-align:center;
  }

  .card.inline.inline-media-left .figure img{
    width:230px;
    max-width:100%;
    margin:0 auto;
  }

  .card.inline .figure{
    margin:0 0 16px;
  }

  /* testimonials already switch below */
  .testi-grid{
    column-count:1;
    column-gap:0;
  }

  .testi{
    display:block;
    width:100%;
    margin:0 0 14px;
    break-inside:avoid;
  }

  .prose-justify p{
    text-align:left;
    text-justify:auto;
    hyphens:none;
  }

  .prose-justify .justify-wrap li{
    text-align:left;
    text-justify:auto;
    hyphens:none;
  }
}






.SocialMediacard {
  width: fit-content;
  height: fit-content;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
  gap: 5px;
  box-shadow: none;
}

/* for all social containers*/
.socialContainer {
  width: 22px;
  height: 22px;
  background-color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition-duration: .3s;
  border-radius: 6px;
}
/* instagram*/
.containerOne:hover {
  background-color: #d62976;
  transition-duration: .3s;
}
/* facebook*/
.containerTwo:hover {
  background-color: #1877F2;
  transition-duration: .3s;
}
/* linkdin*/
.containerThree:hover {
  background-color: #0072b1;
  transition-duration: .3s;
}
/* Whatsapp*/
.containerFour:hover {
  background-color: #128C7E;
  transition-duration: .3s;
}

.socialContainer:active {
  transform: scale(0.9);
  transition-duration: .3s;
}

.socialSvg {
  width: 12px;
}

.socialSvg path {
  fill: rgb(255, 255, 255);
}

.socialContainer:hover .socialSvg {
  animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}