:root{
  --fg-bg:#f6f9fb;
  --fg-card:#ffffff;
  --fg-border:#d9e3ea;
  --fg-muted:#57758a;
  /* --fg-text:#20323d; */
  --radius:14px;
  --shadow:0 6px 24px rgba(14,37,53,.06);
  --blue:#1b597e;
  --orange:#e87058;
  --green:#86a88e;
  --teal:#6aa9b7;
  /* --navy:#2f3647; */
}
.container-lg.full{
    max-width: 100%;
}

.container {
    max-width: 95%;
}
.fg-wrap{container-type:inline-size;background: white;padding:clamp(16px,3vw,28px);}
.sauna .fg-step-body {
    border-color: #E27659;
}

.sauna .fg-step-body {
    border-color: #E27659;
}

.plunge .fg-step-body {
    border-color: #4995AB;
}

.salt .fg-step-body {
    border-color: #7EA28B;
}

.comp .fg-step-body {
    border-color: #41405A;
}

.massage .fg-step-body {
    border-color: #3B9BA2;
}
.breath .fg-step-body {
    border-color: #3c9292;
}
.breath .fg-aside-card{background:#3c9292!important}

.salt .fg-aside-card{background:#7EA28B!important}
.plunge .fg-aside-card{background:#4995AB!important}
.comp .fg-aside-card{background:#41405A!important}
.massage .fg-aside-card{background:#3B9BA2!important}
.sauna .fg-aside-card{background:#E27659!important}
/* Pills */
.fg-pills{ display:flex; gap:10px; align-items:center; overflow:auto; padding-bottom:8px; margin-bottom:18px; scrollbar-width:none;}
.fg-pills::-webkit-scrollbar{display:none;}
.fg-pill{white-space:nowrap;text-decoration:none;/* border:1px solid var(--fg-border); */transition:transform .15s ease, box-shadow .2s ease, background .2s ease;color: #FFF;text-align: center;font-family: "Titillium Web";font-size: 14px;font-style: normal;font-weight: 700;display: flex;padding: 5px 10px;justify-content: center;align-items: center;gap: 10px;line-height: normal;border-radius: 10px;}
.fg-pill:is(:hover,:focus-visible){transform:translateY(-1px);box-shadow:var(--shadow);}
.fg-pill.is-active{/* background: grey; */}
.fg-pill-blue{/* box-shadow: inset 0 0 0 2px var(--blue); */background: #4C95AC;border-color: #4C95AC;} .fg-pill-orange{box-shadow: inset 0 0 0 2px var(--orange);background: #E27659;} .fg-pill-green{box-shadow: inset 0 0 0 2px var(--green);background: #7FA28B;} .fg-pill-teal{box-shadow: inset 0 0 0 2px var(--teal);background: #409AA2;} .fg-pill-navy{box-shadow: inset 0 0 0 2px var(--navy);background: #3D405B;}
nav.fg-pills h1 {
    color: #626262;
    font-family: "Open Sans";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 0;
    line-height: normal;
    margin-right: 40px;
}

.fg-pills a:focus,.fg-pills a:hover{
  color:white!important;
}
section#energize-reset {
    background: #E27659;
}
li.fg-step.salt.lone {
    display: flex;
    background: #8E8E8E;
}

.lone .fg-step-body{
    border-left:none;
    color:white;
  border-top:none;
}

.lone .fg-step-title, .lone .fg-step-text{
    color:#FFF;
}
/* Sessions */
.fg-session{/* background:var(--fg-card); */border:1px solid var(--fg-border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden;}
.fg-session-header{padding: 30px;/* background:linear-gradient(0deg, #eaf3f9 0%, #f7fbff 100%); */cursor:pointer;}
.fg-head-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; align-items:start; }
.fg-head-left{ display:grid; gap:6px; align-content:start; }
.fg-session-meta{display:flex;align-items:center;gap:10px;color: #FFF;font-family: "Open Sans";font-size: 20px;font-style: normal;font-weight: 700;line-height: normal;}
.fg-session-meta .dot{ width:10px; height:10px; border-radius:999px; background:#5fb3cf; display:inline-block; }
.fg-session-title{margin:0;font-size:clamp(22px, 3.2vw, 30px);color: white;color: #FFF;font-family: "Open Sans";font-size: 40px;font-style: normal;font-weight: 700;line-height: normal;margin-bottom: 10px;}
.fg-session-blurb{margin:4px 0 0;color: white;font-size:.95rem;line-height:1.4;color: #FFF;font-family: "Open Sans";font-size: 24px;font-style: normal;font-weight: 700;line-height: normal;}
p.fg-session-blurb  span {
    color: #FFF;
    font-family: "Open Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
/* botão agora é estático à esquerda */
.fg-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--fg-border);background:var(--fg-card);padding:8px 12px;border-radius:10px;transition:background .2s ease, transform .15s ease;width:max-content;text-align: center;font-family: "Titillium Web";font-size: 18px;font-style: normal;font-weight: 700;line-height: normal;}
.fg-toggle:hover{ transform:translateY(-1px); }
.fg-toggle svg{ width:18px; height:18px; fill:none; stroke:#1e3a4a; stroke-width:2; transition:transform .2s ease; }
.fg-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }

.fg-panel{border-top:1px solid var(--fg-border);padding:18px clamp(16px, 2.4vw, 24px) 22px;color: white;background: white;}

.fg-steps{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.fg-step{display:grid;grid-template-columns:56px 1fr 1fr;gap:12px;padding:14px;/* border-right: 1px solid var(--fg-border); */border-radius:12px;/* background:#fcfeff; */align-items:start;}
.fg-step-icon img{width: 89px;height: 111px;object-fit: contain;}
.fg-step-body{grid-column:2;border-left: 2px solid red;padding-left: 15px;}
.fg-step-time{margin-bottom:4px;color: #425C68;/* text-align: center; */font-family: "Open Sans";font-size: 16px;font-style: normal;font-weight: 700;line-height: normal;display: flex;flex-flow: row;gap: 6px;align-items: anchor-center;}
.fg-step-title{margin:0 0 6px;color: #000;/* text-align: center; */font-family: "Open Sans";font-size: 25px;font-style: normal;font-weight: 700;line-height: normal;}
.fg-step-text{margin:0;color: #000;font-family: "Open Sans";font-size: 18px;font-style: normal;font-weight: 400;line-height: normal;}
.fg-tip{ grid-column:3; }

.fg-tip .fg-aside-card{border-left:4px solid var(--blue);background:#eef6fb;border:1px solid var(--fg-border);padding: 30px;border-radius:12px;display: flex;flex-flow: row;}
.tip-title{margin:0 0 6px;color: #FFF;/* text-align: center; */font-family: "Open Sans";font-size: 25px;font-style: normal;font-weight: 700;line-height: normal;}
.tip-text{margin:0 0 10px;color: #FFF;font-family: "Open Sans";font-size: 18px;font-style: normal;font-weight: 400;line-height: normal;}
.ghost-btn{border: none;padding:8px 10px;color: #717171;text-align: center;font-family: "Titillium Web";font-size: 18px;font-style: normal;font-weight: 700;border-radius: 10px;background: #FFF;line-height: normal;width: 240px;}

.salt .fg-aside-card{background:#7EA28B}
.plunge .fg-aside-card{background:#7EA28B}
.comp .fg-aside-card{background:#7EA28B}
.massage .fg-aside-card{background:#7EA28B}
.salt .fg-aside-card{background:#7EA28B}
/* Mobile */
@container (max-width:860px){
  .fg-head-grid{ grid-template-columns:1fr; gap:10px; }
  .fg-session-blurb{ margin-top:2px; }
  .fg-step{ grid-template-columns:56px 1fr; }
  .fg-tip{ grid-column:1 / -1; margin-left:56px; margin-top:8px; }
.fg-tip .fg-aside-card {
    flex-flow: column;
}
} 
.teal .fg-toggle{color:#4C95AC}
.teal .fg-toggle svg{stroke:#4C95AC} 

.accent-orange .fg-toggle{color:#E27659}
.accent-orange .fg-toggle svg{stroke:#E27659}

section#mind-body { background-color:#7FA28B}
.accent-green .fg-toggle{color:#7FA28B}
.accent-green .fg-toggle svg{stroke:#7FA28B}

section#mental-clarity { background-color:#3B9BA2}
.accent-teal .fg-toggle{color:#3B9BA2}
.accent-teal .fg-toggle svg{stroke:#3B9BA2}


section#flow-recovery { background-color:#3D405B}
.accent-navy .fg-toggle{color:#3D405B}
.accent-navy .fg-toggle svg{stroke:#3D405B}

.cardsidebtn {
    /* display: flex; */
    align-self: anchor-center;
    padding-left: 20px;
}
#relax-recover.fg-session.accent-blue.teal  {background: #4C95AC!important;/* color: red; */}

 
@container (max-width: 460px){
   
  .fg-step{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .fg-step-icon{
    grid-column:1; grid-row:1;
    justify-self:start;
    margin-bottom:8px;
  }
  .fg-step-icon img{
    width:56px; height:56px;  
  }

  .fg-step-body{
    grid-column:1; grid-row:2;
    padding-left:0;               
    border-left:none;             
    border-top:2px solid currentColor;   
    padding-top:10px;
  }

  .fg-tip{
    grid-column:1; grid-row:3;
    margin-left:0 !important;     
    margin-top:10px;
  }

  .fg-tip .fg-aside-card{
    padding:16px;                 
  }

  .ghost-btn{
    width:100%;                
    display:block;
  }

  .fg-panel{
    padding:12px;                 
  }

   .fg-step-text,
  .tip-text{ overflow-wrap:anywhere; word-break:normal; }
}

 .fg-wrap, .fg-wrap *{ box-sizing:border-box; max-width:100%; }
nav.fg-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

nav.fg-pills h1 {
  margin: 0;
   
}

nav.fg-pills .fg-pill {
  padding: 8px 16px;
  
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}