@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* Chicca Hub v1.0 */

/* ═══════════════════════════════════════════
   TOKENS — MATURE EDITORIAL PALETTE
═══════════════════════════════════════════ */
:root {
  --noir:    #1a1014;
  --deep:    #2e1420;
  --wine:    #5c1f32;
  --ruby:    #8b2d45;
  --rose:    #b85570;
  --blush:   #d4889a;
  --petal:   #f2dde2;
  --cream:   #f9f3ef;
  --warm:    #f4ece6;
  --sand:    #e8ddd5;
  --gold:    #a07840;
  --gilt:    #c8a060;
  --sage:    #4a6858;
  --ink:     #1e1014;
  --mid:     #6a4850;
  --muted:   #9a8085;
  --line:    #e0d0d5;
  --white:   #ffffff;
  --shadow:  rgba(30,16,20,.14);
  --shadow-h:rgba(30,16,20,.22);

  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-sans:  'Jost', sans-serif;
  --f-mono:  'DM Mono', monospace;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--f-sans);
  background: var(--cream);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* subtle texture overlay */
body::after {
  content:'';
  position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9999; opacity:.6;
}

/* ambient light blobs */
body::before {
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 95% 5%,  rgba(92,31,50,.08)  0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 5%  95%,  rgba(160,120,64,.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 30% at 50% 50%,  rgba(249,243,239,1)  0%, transparent 70%);
  pointer-events:none; z-index:0;
}

/* ═══════════════════════════════════════════
   WRAPPER
═══════════════════════════════════════════ */
.hub {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 18px 100px;
  position: relative; z-index:1;
}

/* ═══════════════════════════════════════════
   HEADER — editorial masthead
═══════════════════════════════════════════ */
.masthead {
  padding: 44px 0 36px;
  border-bottom: 1px solid var(--sand);
  margin-bottom: 36px;
  position: relative;
}

.masthead-kicker {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}

.kicker-line {
  flex: 1; height: 1px; background: var(--sand);
}

.kicker-text {
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--muted);
  white-space: nowrap;
}

.masthead-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: var(--wine);
  border-radius: 50%;
  margin: 0 auto 20px;
  box-shadow: 0 6px 20px rgba(92,31,50,.30);
}

.masthead-icon svg { width: 26px; height: 26px; }

h1 {
  font-family: var(--f-serif);
  font-size: clamp(2.6rem, 7vw, 3.8rem);
  font-weight: 700;
  line-height: 1.0;
  text-align: center;
  color: var(--deep);
  margin-bottom: 14px;
}

h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ruby);
}

.masthead-sub {
  font-size: .88rem;
  line-height: 1.75;
  color: var(--muted);
  text-align: center;
  max-width: 420px;
  margin: 0 auto 22px;
  font-weight: 300;
}

/* forum CTA strip under header */
.forum-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  background: var(--deep);
  border-radius: 12px;
  padding: 14px 20px;
  text-decoration: none;
  transition: background .25s, transform .18s;
  margin-top: 4px;
}
.forum-strip:hover { background: var(--wine); transform: translateY(-1px); }
.forum-strip-left { flex: 1; }
.forum-strip-eyebrow {
  font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--blush); margin-bottom: 3px;
}
.forum-strip-title {
  font-family: var(--f-serif);
  font-size: .95rem; font-style: italic;
  color: var(--white);
}
.forum-strip-arrow {
  width: 34px; height: 34px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: 1rem;
  flex-shrink: 0;
  transition: background .2s;
}
.forum-strip:hover .forum-strip-arrow { background: rgba(255,255,255,.2); }

/* ═══════════════════════════════════════════
   AD SLOT — top of page
═══════════════════════════════════════════ */
.ad-banner {
  width: 100%; min-height: 90px;
  background: var(--warm);
  border: 1px solid var(--sand);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
  position: relative; overflow: hidden;
}
.ad-banner::before {
  content: 'PUBLICIDADE';
  position: absolute; top: 6px; left: 10px;
  font-size: .55rem; letter-spacing: .15em;
  color: var(--muted); font-weight: 500;
}
/* Replace this div content with your AdSense ins tag */
.ad-banner-inner {
  font-size: .72rem; color: var(--muted); letter-spacing: .06em;
}

/* ═══════════════════════════════════════════
   TOOL NAV — horizontal tabs, editorial style
═══════════════════════════════════════════ */
.tool-nav {
  display: flex;
  border-bottom: 1px solid var(--sand);
  margin-bottom: 32px;
  gap: 0;
}

.tool-tab {
  flex: 1;
  padding: 14px 8px 16px;
  background: none; border: none;
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s, border-color .2s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}

.tool-tab .tt-icon {
  font-size: 1.15rem;
  display: block;
  transition: transform .2s;
}

.tool-tab:hover { color: var(--ruby); }
.tool-tab:hover .tt-icon { transform: translateY(-2px); }

.tool-tab.active {
  color: var(--deep);
  border-bottom-color: var(--ruby);
}

/* ═══════════════════════════════════════════
   PANELS
═══════════════════════════════════════════ */
.tool-panel { display:none; }
.tool-panel.active { display:block; animation: fadeUp .45s cubic-bezier(.22,1,.36,1) both; }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ═══════════════════════════════════════════
   FORM SECTION
═══════════════════════════════════════════ */
.form-section {
  margin-bottom: 24px;
}

.form-eyebrow {
  font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--ruby); margin-bottom: 6px;
}

.form-heading {
  font-family: var(--f-serif);
  font-size: 1.55rem; color: var(--deep);
  margin-bottom: 6px; line-height: 1.25;
}

.form-desc {
  font-size: .84rem; color: var(--muted);
  line-height: 1.7; margin-bottom: 28px;
  font-weight: 300;
}

/* horizontal rule with ornament */
.ornament {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.ornament-line { flex: 1; height: 1px; background: var(--sand); }
.ornament-gem  {
  width: 8px; height: 8px;
  background: var(--ruby); border-radius: 50%;
  flex-shrink: 0;
}

/* fields */
.field { margin-bottom: 20px; }

.field label {
  display: block;
  font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--mid); margin-bottom: 8px;
}

.field input, .field select {
  width: 100%;
  padding: 13px 16px;
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: 8px;
  font-family: var(--f-sans);
  font-size: .93rem; font-weight: 400;
  color: var(--ink); outline: none;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
}

.field input:focus, .field select:focus {
  border-color: var(--ruby);
  box-shadow: 0 0 0 3px rgba(139,45,69,.08);
}

.field-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* toggle */
.toggle-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px; cursor: pointer;
}
.toggle-row input[type=checkbox] { display: none; }
.tog {
  width: 40px; height: 22px;
  background: var(--sand); border-radius: 11px;
  position: relative; transition: background .2s; flex-shrink: 0;
}
.tog::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; background: var(--white);
  border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: transform .22s;
}
input[type=checkbox]:checked ~ .tog { background: var(--ruby); }
input[type=checkbox]:checked ~ .tog::after { transform: translateX(18px); }
.toggle-row span { font-size: .82rem; color: var(--muted); font-weight: 300; }

/* submit button */
.btn-submit {
  display: block; width: 100%;
  padding: 15px 24px;
  background: var(--deep);
  color: var(--white);
  border: none; border-radius: 8px;
  font-family: var(--f-sans);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: background .22s, transform .15s, box-shadow .22s;
  box-shadow: 0 4px 18px rgba(30,16,20,.20);
}
.btn-submit:hover {
  background: var(--wine);
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(30,16,20,.26);
}
.btn-submit:active { transform: translateY(0); }

/* recalc ghost */
.btn-ghost {
  display: block;
  margin: 24px auto 0;
  padding: 9px 20px;
  background: none;
  border: 1px solid var(--sand);
  border-radius: 30px;
  font-family: var(--f-sans);
  font-size: .75rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); cursor: pointer;
  transition: color .2s, border-color .2s;
}
.btn-ghost:hover { color: var(--ruby); border-color: var(--ruby); }

/* ═══════════════════════════════════════════
   RESULT — editorial layout
═══════════════════════════════════════════ */
.result-wrap { display: none; }

/* big editorial hero */
.result-hero {
  padding: 36px 28px 30px;
  border-radius: 16px;
  margin-bottom: 2px;
  position: relative; overflow: hidden;
}

/* per-phase hero backgrounds */
.rh-before  { background: linear-gradient(150deg, #1e1014 0%, #2e1420 100%); }
.rh-early   { background: linear-gradient(150deg, #2a1a10 0%, #3d2418 100%); }
.rh-window  { background: linear-gradient(150deg, #3a1420 0%, #5c1f32 100%); }
.rh-peak    { background: linear-gradient(150deg, #2d1235 0%, #5a1d50 100%); }
.rh-late    { background: linear-gradient(150deg, #0f2318 0%, #1e4030 100%); }
.rh-out     { background: linear-gradient(150deg, #1a1a1a 0%, #2d2530 100%); }

.result-hero::before {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255,255,255,.04);
}
.result-hero::after {
  content: '';
  position: absolute; bottom: -40px; left: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,.03);
}

.rh-eyebrow {
  font-size: .58rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  color: rgba(255,255,255,.45);
  margin-bottom: 10px;
}

.rh-badge {
  display: inline-block;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255,255,255,.75);
  margin-bottom: 16px;
}

.rh-title {
  font-family: var(--f-serif);
  font-size: clamp(1.7rem, 4.5vw, 2.3rem);
  font-weight: 700; color: var(--white);
  line-height: 1.15; margin-bottom: 12px;
}

.rh-phrase {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: .95rem; line-height: 1.8;
  color: rgba(255,255,255,.6);
  max-width: 420px;
}

/* probability bar */
.prob-bar-wrap {
  margin-top: 24px; position: relative; z-index: 1;
}

.prob-bar-labels {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 7px;
}

.prob-bar-label {
  font-size: .6rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.4);
}

.prob-bar-value {
  font-family: var(--f-mono);
  font-size: 1.3rem; font-weight: 500;
  color: var(--white);
}

.prob-bar-bg {
  height: 4px;
  background: rgba(255,255,255,.12);
  border-radius: 2px; overflow: hidden;
}

.prob-bar-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.85));
  width: 0%;
  transition: width 1.4s cubic-bezier(.22,1,.36,1);
}

/* status section */
.status-section {
  padding: 20px 0;
  border-bottom: 1px solid var(--sand);
  margin-bottom: 24px;
}

.status-row {
  display: flex; align-items: flex-start; gap: 14px;
}

.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-top: 6px;
}

.sd-before { background: var(--muted); }
.sd-early  { background: var(--gilt); }
.sd-window { background: var(--rose); animation: pulse 1.6s infinite; }
.sd-peak   { background: #9040b0; animation: pulse 1.3s infinite; }
.sd-late   { background: var(--sage); }
.sd-out    { background: var(--muted); }

@keyframes pulse {
  0%,100% { transform:scale(1); opacity:1; }
  50%     { transform:scale(1.7); opacity:.5; }
}

.status-text {
  font-size: .86rem; line-height: 1.7;
  color: var(--mid); font-weight: 300;
}

/* ad slot mid-result */
.ad-mid {
  width: 100%; min-height: 100px;
  background: var(--warm);
  border: 1px solid var(--sand);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin: 24px 0;
  position: relative; overflow: hidden;
}
.ad-mid::before {
  content: 'PUBLICIDADE';
  position: absolute; top: 5px; left: 8px;
  font-size: .52rem; letter-spacing: .15em;
  color: var(--muted); font-weight: 500;
}
.ad-mid-inner { font-size: .7rem; color: var(--muted); letter-spacing: .05em; }

/* symptoms */
.sym-heading {
  font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--muted); margin-bottom: 14px;
}

.sym-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 24px;
}

.sym-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: 8px; cursor: pointer;
  font-family: var(--f-sans);
  font-size: .8rem; font-weight: 400;
  color: var(--mid);
  transition: all .18s; text-align: left;
}
.sym-btn:hover { border-color: var(--blush); color: var(--wine); }
.sym-btn.sel   {
  background: var(--petal);
  border-color: var(--ruby);
  color: var(--wine); font-weight: 500;
}
.sym-btn .si { font-size: .95rem; flex-shrink: 0; }

/* forum CTA within result */
/* Banner de conteúdo — Ciclos & Estações (verde musgo editorial) */
.result-forum-cta {
  display: flex; align-items: center;
  gap: 16px; padding: 18px 20px;
  background: linear-gradient(135deg, #1a2e20 0%, #2e4a32 100%);
  border: 1px solid rgba(90,160,100,.25);
  border-radius: 12px;
  text-decoration: none;
  margin-bottom: 20px;
  transition: background .22s, transform .15s, box-shadow .22s;
  box-shadow: 0 3px 14px rgba(20,60,28,.18);
}
.result-forum-cta:hover {
  background: linear-gradient(135deg, #223828 0%, #3a5c3e 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(20,60,28,.26);
}
.rfc-left { flex: 1; }
.rfc-eyebrow {
  font-size: .58rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  color: rgba(160,220,170,.7); margin-bottom: 4px;
}
.rfc-title {
  font-family: var(--f-serif);
  font-size: 1rem; font-style: italic;
  color: var(--white); line-height: 1.3;
}
.rfc-desc {
  font-size: .76rem; color: rgba(255,255,255,.45);
  margin-top: 3px; font-weight: 300;
}
.rfc-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--white);
}

/* article CTA strip */
.article-cta {
  border: 1px solid var(--sand);
  border-radius: 10px;
  padding: 20px 20px 18px;
  margin-bottom: 6px;
}
.ac-label {
  font-size: .58rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--ruby); margin-bottom: 6px;
}
.ac-title {
  font-family: var(--f-serif);
  font-size: 1.05rem; color: var(--deep);
  margin-bottom: 6px; line-height: 1.3;
}
.ac-body {
  font-size: .8rem; color: var(--muted);
  line-height: 1.7; margin-bottom: 14px;
  font-weight: 300;
}
.ac-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px;
  background: var(--deep); color: var(--white);
  border-radius: 6px;
  font-family: var(--f-sans);
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  text-decoration: none;
  transition: background .2s;
}
.ac-btn:hover { background: var(--wine); }
.ac-btn::after { content: '→'; }

/* ═══════════════════════════════════════════
   TOOL 2 — BETA HCG
═══════════════════════════════════════════ */
.hcg-result { display: none; }

.value-display {
  text-align: center; padding: 32px 20px 28px;
  background: var(--deep); border-radius: 14px;
  margin-bottom: 20px; position: relative; overflow: hidden;
}
.value-display::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(184,85,112,.15) 0%, transparent 60%);
}
.vd-label {
  font-size: .58rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em;
  color: rgba(255,255,255,.35); margin-bottom: 10px;
  position: relative; z-index:1;
}
.vd-number {
  font-family: var(--f-mono);
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  font-weight: 500; color: var(--white);
  letter-spacing: -.02em;
  position: relative; z-index:1;
}
.vd-unit {
  font-size: .8rem; color: rgba(255,255,255,.4);
  margin-left: 6px; font-weight: 300;
}
.vd-badge {
  display: inline-block; margin-top: 12px;
  padding: 4px 14px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 4px;
  font-size: .65rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.6);
  position: relative; z-index:1;
}

/* gauge */
.gauge-section {
  padding: 20px;
  background: var(--warm); border-radius: 12px;
  margin-bottom: 20px;
}
.gauge-label {
  font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--muted); text-align: center; margin-bottom: 14px;
}
.gauge-track {
  height: 10px; border-radius: 5px; overflow: visible;
  background: linear-gradient(90deg, var(--sand), #ffd0a0, var(--petal), #d8c0f0, #a0c8f0);
  position: relative; margin-bottom: 10px;
}
.gauge-needle {
  position: absolute; top: -8px;
  width: 3px; height: 26px;
  background: var(--deep); border-radius: 2px;
  transform: translateX(-50%);
  transition: left 1.2s cubic-bezier(.22,1,.36,1);
  left: 0%;
}
.gauge-needle::before {
  content:'';
  position: absolute; top: -4px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 10px;
  background: var(--deep); border-radius: 50%;
  border: 2px solid var(--white);
}
.gauge-zones {
  display: flex; justify-content: space-between;
  font-size: .6rem; color: var(--muted); line-height: 1.4; text-align: center;
}

/* interpretation box */
.hcg-interp {
  border-radius: 10px; padding: 18px 20px;
  display: flex; gap: 14px; align-items: flex-start;
  margin-bottom: 20px;
}
.hi-icon { font-size: 1.5rem; flex-shrink: 0; }
.hi-body strong {
  display: block; font-family: var(--f-serif);
  font-size: 1rem; color: var(--deep);
  margin-bottom: 5px;
}
.hi-body p {
  font-size: .83rem; line-height: 1.75;
  color: var(--mid); font-weight: 300;
}

/* reference table */
.ref-table {
  width: 100%; border-collapse: collapse;
  font-size: .78rem; margin-bottom: 20px;
}
.ref-table thead tr { background: var(--deep); }
.ref-table thead th {
  padding: 10px 14px; text-align: left;
  font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255,255,255,.6);
}
.ref-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--sand);
  color: var(--mid); font-weight: 300;
}
.ref-table tbody tr.hl td {
  background: var(--petal);
  color: var(--wine); font-weight: 500;
}
.ref-table tbody tr:last-child td { border-bottom: none; }

/* ═══════════════════════════════════════════
   TOOL 3 — JANELA FÉRTIL
═══════════════════════════════════════════ */
.fw-result { display: none; }

/* status card */
.fw-status-card {
  padding: 28px 26px;
  border-radius: 14px;
  margin-bottom: 20px;
  position: relative; overflow: hidden;
}
.fw-status-card::before {
  content:''; position:absolute; top:-50px; right:-50px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.fsc-menstrual { background: linear-gradient(135deg, #1a1a2e, #2d1a3a); }
.fsc-folicular { background: linear-gradient(135deg, #1e1a10, #3a2a14); }
.fsc-fertile   { background: linear-gradient(135deg, #2a1012, #5c1f32); }
.fsc-ovulacao  { background: linear-gradient(135deg, #1e0e20, #4a1a50); }
.fsc-luteal    { background: linear-gradient(135deg, #0e1e14, #1a3a28); }

.fsc-label {
  font-size: .58rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  color: rgba(255,255,255,.4); margin-bottom: 8px;
}
.fsc-title {
  font-family: var(--f-serif);
  font-size: 1.55rem; color: var(--white);
  margin-bottom: 8px; line-height: 1.2;
}
.fsc-sub {
  font-size: .83rem; line-height: 1.7;
  color: rgba(255,255,255,.5); font-weight: 300;
}

/* day timeline */
.timeline-label {
  font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--muted); margin-bottom: 10px;
}
.timeline-scroll {
  display: flex; gap: 6px;
  overflow-x: auto; padding-bottom: 12px; margin-bottom: 6px;
  scrollbar-width: none;
}
.timeline-scroll::-webkit-scrollbar { display: none; }

.t-day {
  flex-shrink: 0; width: 54px;
  border-radius: 8px; padding: 10px 6px 8px;
  text-align: center; border: 1.5px solid transparent;
  transition: transform .2s;
}
.t-day .td-n    { font-size: .58rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 3px; }
.t-day .td-d    { font-size: .75rem; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.t-day .td-icon { font-size: 1rem; margin-bottom: 2px; }
.t-day .td-name { font-size: .55rem; color: var(--muted); line-height: 1.3; }

.td-mens    { background: #f5f0f2; }
.td-fol     { background: #f8f0e8; }
.td-fertile { background: #fff3d0; border-color: var(--gilt); }
.td-ov      { background: var(--petal); border-color: var(--ruby); }
.td-lut     { background: #e8f2ec; }
.td-today   {
  background: var(--deep); border-color: var(--ruby);
  transform: scale(1.08);
}
.td-today .td-n, .td-today .td-d, .td-today .td-icon, .td-today .td-name {
  color: rgba(255,255,255,.7);
}
.td-today .td-d { color: var(--white); }

.timeline-legend {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 12px 0 20px;
}
.tl-item {
  display: flex; align-items: center; gap: 5px;
  font-size: .68rem; color: var(--muted); font-weight: 300;
}
.tl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* checklist */
.checklist-heading {
  font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--muted); margin-bottom: 14px;
}
.cl { list-style: none; }
.cl-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--sand); cursor: pointer;
}
.cl-item:last-child { border-bottom: none; }
.cl-cb {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
  border: 1px solid var(--sand); border-radius: 4px;
  transition: all .18s;
  display: flex; align-items: center; justify-content: center;
}
.cl-item.ck .cl-cb { background: var(--ruby); border-color: var(--ruby); }
.cl-item.ck .cl-cb::after {
  content:''; width:5px; height:8px;
  border: 1.5px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg) translateY(-1px); display: block;
}
.cl-item.ck { opacity: .5; }
.cl-text strong { display: block; font-size: .84rem; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.cl-text span   { font-size: .76rem; color: var(--muted); line-height: 1.6; font-weight: 300; }

.progress-row { margin-top: 16px; }
.progress-labels {
  display: flex; justify-content: space-between;
  font-size: .65rem; color: var(--muted); margin-bottom: 5px;
}
.progress-bg { height: 3px; background: var(--sand); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--ruby); border-radius: 2px; transition: width .4s ease; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.hub-footer {
  padding-top: 32px;
  border-top: 1px solid var(--sand);
  margin-top: 8px;
}

/* Banner do Fórum — comunidade (vinho com borda dourada) */
.footer-forum {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px;
  background: var(--deep);
  border: 1px solid rgba(200,160,96,.3);
  border-radius: 12px;
  text-decoration: none;
  margin-bottom: 20px;
  transition: background .22s, border-color .22s, box-shadow .22s;
  box-shadow: 0 3px 14px rgba(30,16,20,.15);
}
.footer-forum:hover {
  background: var(--wine);
  border-color: rgba(200,160,96,.5);
  box-shadow: 0 6px 22px rgba(30,16,20,.22);
}
.ff-left { flex:1; }
.ff-over { font-size:.58rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--gilt); margin-bottom:4px; }
.ff-title { font-family:var(--f-serif); font-style:italic; font-size:1.1rem; color:var(--white); }
.ff-sub { font-size:.76rem; color:rgba(255,255,255,.4); margin-top:3px; font-weight:300; }
.ff-arrow { font-size:1.1rem; color:var(--gilt); opacity:.8; }

.disclaimer {
  font-size: .68rem; color: var(--muted);
  text-align: center; line-height: 1.9; opacity: .65; font-weight: 300;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:480px) {
  .field-duo { grid-template-columns: 1fr; }
  .sym-grid  { grid-template-columns: 1fr; }
  .tool-tab  { font-size: .58rem; letter-spacing: .08em; padding: 12px 4px 14px; }
  h1         { font-size: 2.4rem; }
  .ef-grid   { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   TOOL 4 — BBT TEMPERATURA BASAL
═══════════════════════════════════════════ */
.bbt-phase-card {
  border-radius:14px; padding:22px 24px;
  margin-bottom:18px; position:relative; overflow:hidden;
  transition: background .4s;
}
.bbt-phase-card::before {
  content:''; position:absolute; top:-50px; right:-50px;
  width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.05); pointer-events:none;
}
.bpc-default { background: linear-gradient(135deg,#1a1020,#301838); }
.bpc-mens    { background: linear-gradient(135deg,#200810,#3e1020); }
.bpc-fol     { background: linear-gradient(135deg,#1c1808,#362a10); }
.bpc-ov      { background: linear-gradient(135deg,#180830,#3a1250); }
.bpc-lut     { background: linear-gradient(135deg,#081c10,#103820); }

.bpc-eyebrow { font-size:.58rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:rgba(255,255,255,.35); margin-bottom:7px; }
.bpc-title   { font-family:var(--f-serif); font-size:1.35rem; color:var(--white); line-height:1.2; margin-bottom:6px; }
.bpc-sub     { font-size:.81rem; color:rgba(255,255,255,.45); font-weight:300; line-height:1.65; }
.bpc-meta    { display:flex; gap:18px; margin-top:16px; flex-wrap:wrap; }
.bpc-stat    { display:flex; flex-direction:column; gap:2px; }
.bpc-stat-v  { font-family:var(--f-mono); font-size:1.05rem; color:var(--white); }
.bpc-stat-l  { font-size:.58rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.3); }

.conf-badge  {
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  padding:6px 14px; border-radius:20px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
}
.cb-val { font-family:var(--f-mono); font-size:1rem; color:var(--white); }
.cb-lbl { font-size:.62rem; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.1em; }

.ov-banner {
  display:none; border-radius:12px; padding:16px 20px;
  background: linear-gradient(135deg,#280838,#501848);
  margin-bottom:16px;
}
.ov-banner.show { display:block; animation:fadeUp .4s ease; }
.ovb-kicker { font-size:.58rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:rgba(255,255,255,.35); margin-bottom:5px; }
.ovb-title  { font-family:var(--f-serif); font-size:1rem; color:var(--white); }
.ovb-sub    { font-size:.76rem; color:rgba(255,255,255,.4); margin-top:3px; font-weight:300; }

/* Alert banners */
.ab { border-radius:10px; padding:13px 16px; margin-bottom:10px; display:flex; gap:12px; align-items:flex-start; }
.ab-info  { background:#e8f2fc; border:1px solid #90b8e0; color:#0a2a48; }
.ab-warn  { background:#fef8e0; border:1px solid #d8b828; color:#4a3600; }
.ab-alert { background:#fde8ec; border:1px solid #d88090; color:#600a20; }
.ab-good  { background:#e8f8ee; border:1px solid #70c898; color:#083820; }
.ab-icon  { font-size:1rem; flex-shrink:0; margin-top:1px; }
.ab-text  { font-size:.8rem; line-height:1.65; font-weight:300; }
.ab-text strong { display:block; font-weight:600; margin-bottom:1px; font-size:.82rem; }

/* Chart */
.chart-wrap {
  background:var(--white); border:1px solid var(--sand);
  border-radius:14px; padding:16px 14px 14px; margin-bottom:18px;
}
.chart-topbar {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:12px; gap:8px; flex-wrap:wrap;
}
.chart-info-title   { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--mid); }
.chart-info-sub     { font-size:.66rem; color:var(--muted); font-weight:300; margin-top:2px; }
.unit-toggle        { display:flex; gap:4px; }
.utb {
  padding:4px 10px; border-radius:4px; cursor:pointer;
  font-family:var(--f-sans); font-size:.68rem; font-weight:500;
  border:1px solid var(--sand); background:none; color:var(--muted);
  transition:all .15s;
}
.utb.on { background:var(--deep); border-color:var(--deep); color:var(--white); }

.chart-scroll { overflow-x:auto; }
#bbtChart { display:block; min-width:340px; }

.chart-legend {
  display:flex; flex-wrap:wrap; gap:10px;
  padding-top:12px; border-top:1px solid var(--sand); margin-top:10px;
}
.cl-lg { display:flex; align-items:center; gap:5px; font-size:.63rem; color:var(--muted); font-weight:300; }
.cld   { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.cll   { width:14px; height:2px; border-radius:1px; flex-shrink:0; }

/* Event markers row below chart */
.event-row {
  display:flex; gap:0; overflow-x:auto; margin-top:4px;
  padding-bottom:4px; scrollbar-width:none;
}
.event-row::-webkit-scrollbar { display:none; }
.ev-cell {
  flex-shrink:0; width:32px; text-align:center;
  font-size:.75rem; line-height:1; padding:2px 0;
  min-height:20px;
}

/* Log bar */
.log-bar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.log-bar-title { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--mid); }
.btn-log {
  display:flex; align-items:center; gap:6px;
  padding:8px 16px; background:var(--deep); color:var(--white);
  border:none; border-radius:6px; cursor:pointer;
  font-family:var(--f-sans); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
  transition:background .2s;
}
.btn-log:hover { background:var(--wine); }

/* Entry form */
.ef {
  background:var(--warm); border:1px solid var(--sand);
  border-radius:14px; padding:20px; margin-bottom:18px;
  display:none;
}
.ef.open { display:block; animation:fadeUp .3s ease; }
.ef-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.ef-full { grid-column:1/-1; }
.ef-label {
  display:block; font-size:.6rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--mid); margin-bottom:7px;
}
.ef input, .ef select, .ef textarea {
  width:100%; padding:11px 14px;
  background:var(--white); border:1px solid var(--sand);
  border-radius:7px; font-family:var(--f-sans); font-size:.9rem;
  color:var(--ink); outline:none; transition:border-color .2s;
  -webkit-appearance:none;
}
.ef input:focus, .ef select:focus, .ef textarea:focus {
  border-color:var(--ruby); box-shadow:0 0 0 3px rgba(139,45,69,.07);
}

/* Chip selectors */
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip {
  padding:6px 12px; border-radius:6px;
  background:var(--white); border:1px solid var(--sand);
  font-size:.76rem; cursor:pointer;
  color:var(--mid); font-family:var(--f-sans);
  transition:all .15s; display:flex; align-items:center; gap:4px;
  -webkit-tap-highlight-color: transparent;
}
.chip:hover { border-color:var(--blush); }
.chip.on { background:var(--petal); border-color:var(--ruby); color:var(--wine); font-weight:500; }
.chip.flag-on { background:#fff3dc; border-color:#d09030; color:#6a4000; }

/* Entries list */
.entries-wrap { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.er {
  display:flex; align-items:center; gap:8px;
  padding:11px 14px; background:var(--white);
  border:1px solid var(--sand); border-radius:10px;
}
.er-d  { font-size:.68rem; font-weight:600; color:var(--muted); min-width:48px; }
.er-t  { font-family:var(--f-mono); font-size:.98rem; font-weight:500; color:var(--deep); min-width:58px; }
.er-ph { font-size:.62rem; padding:2px 7px; border-radius:3px; font-weight:500; flex-shrink:0; }
.er-ic { font-size:.8rem; flex:1; line-height:1; }
.er-fl { font-size:.62rem; background:#fff3dc; color:#7a4800; padding:2px 6px; border-radius:3px; }
.er-edit{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:.85rem; opacity:.35; padding:2px 5px; transition:opacity .15s, color .15s; }
.er-edit:hover { opacity:1; color:var(--gold); }
.er-x  { background:none; border:none; color:var(--muted); cursor:pointer; font-size:.85rem; opacity:.4; padding:2px 5px; transition:opacity .15s; }
.er-x:hover { opacity:1; color:var(--ruby); }

/* ── Icon legend box ── */
.icon-legend-box {
  background: linear-gradient(135deg, #fdf0f4 0%, #f4ece6 100%);
  border: 1px solid var(--sand, #e8ddd5);
  border-left: 3px solid var(--blush, #d4889a);
  border-radius: 10px;
  padding: 14px 16px 14px;
  margin-top: 14px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(92,31,50,.06);
}
.icon-legend-title {
  display: flex; align-items: center; gap: 7px;
  font-size: .58rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ruby, #8b2d45); margin-bottom: 12px;
}
.icon-legend-title::before {
  content: '';
  display: inline-block; width: 14px; height: 1px;
  background: var(--blush, #d4889a);
}
.icon-legend-grid {
  display: flex; flex-wrap: wrap; gap: 7px 16px;
}
.icon-legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: .68rem; color: var(--mid, #6a4850); font-weight: 300;
  white-space: nowrap;
  background: rgba(255,255,255,.55);
  border-radius: 5px; padding: 3px 7px;
}

.ph-tag-mens    { background:#fce4ea; color:#7a1830; font-weight:600; }
.ph-tag-fol     { background:#eaf2e0; color:#3a5c1a; font-weight:600; }
.ph-tag-fertile { background:#fff0cc; color:#7a4800; font-weight:600; }
.ph-tag-ov      { background:#f0e0ff; color:#5a0890; font-weight:600; }
.ph-tag-lut     { background:#ddeeff; color:#1a3a6a; font-weight:600; }

/* Insights */
.insights-block { margin-bottom:18px; }
.ib-title { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--mid); margin-bottom:12px; }
.ins-row {
  display:flex; gap:12px; align-items:flex-start;
  padding:11px 0; border-bottom:1px solid var(--sand);
}
.ins-row:last-child { border-bottom:none; }
.ins-ic { font-size:1.05rem; flex-shrink:0; margin-top:1px; }
.ins-bd { font-size:.81rem; line-height:1.65; color:var(--mid); font-weight:300; }
.ins-bd strong { display:block; font-weight:600; color:var(--deep); margin-bottom:1px; font-size:.83rem; }


/* FAB container — fixed bottom right */
.fab-dock {
  position: fixed;
  bottom: 28px; right: 20px;
  display: flex; flex-direction: column-reverse;
  align-items: flex-end; gap: 10px;
  z-index: 1000;
}

/* Main FAB trigger */
.fab-main {
  width: 56px; height: 56px;
  background: var(--deep);
  border: none; border-radius: 50%;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(30,16,20,.35);
  transition: background .22s, transform .22s, box-shadow .22s;
  position: relative; flex-shrink: 0;
}
.fab-main:hover { background: var(--wine); transform: scale(1.07); }
.fab-main.open  { background: var(--wine); transform: rotate(45deg) scale(1.05); }
.fab-main-icon  { font-size: 1.4rem; transition: transform .22s; pointer-events: none; }

/* Pulse ring — draws attention */
.fab-main::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(139,45,69,.4);
  animation: fab-pulse 2.8s ease-in-out infinite;
}
@keyframes fab-pulse {
  0%, 100% { transform: scale(1);   opacity: .7; }
  50%       { transform: scale(1.2); opacity: 0;  }
}

/* Notification dot */
.fab-notif {
  position: absolute; top: 3px; right: 3px;
  width: 12px; height: 12px;
  background: var(--gilt); border-radius: 50%;
  border: 2px solid var(--cream);
  display: none;
}
.fab-notif.show { display: block; animation: notif-pop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes notif-pop { from { transform:scale(0); } to { transform:scale(1); } }

/* Action items (hidden by default) */
.fab-actions {
  display: flex; flex-direction: column-reverse;
  align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.fab-action {
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(12px) scale(.9);
  transition: opacity .22s, transform .22s;
  pointer-events: none;
}
.fab-dock.open .fab-actions { pointer-events: auto; }
.fab-dock.open .fab-action  {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* stagger delays */
.fab-action:nth-child(1){ transition-delay:.04s; }
.fab-action:nth-child(2){ transition-delay:.08s; }
.fab-action:nth-child(3){ transition-delay:.12s; }
.fab-action:nth-child(4){ transition-delay:.16s; }
.fab-action:nth-child(5){ transition-delay:.20s; }

.fab-action-label {
  background: var(--deep);
  color: var(--white);
  padding: 6px 13px;
  border-radius: 20px;
  font-family: var(--f-sans);
  font-size: .73rem; font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(30,16,20,.25);
  line-height: 1.4;
  max-width: 200px;
}
.fab-action-label small {
  display: block; font-size: .62rem;
  opacity: .55; font-weight: 300; margin-top: 1px;
}
.fab-action-btn {
  width: 44px; height: 44px;
  background: var(--white);
  border: 2px solid var(--sand);
  border-radius: 50%; flex-shrink: 0;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 3px 12px rgba(30,16,20,.15);
  transition: border-color .18s, transform .18s, background .18s;
}
.fab-action-btn:hover { border-color: var(--ruby); transform: scale(1.1); background: var(--petal); }

/* Context-specific accent colors */
.fab-action-btn.accent-gold  { border-color: var(--gilt); }
.fab-action-btn.accent-sage  { border-color: var(--sage); }
.fab-action-btn.accent-ruby  { border-color: var(--ruby); }
.fab-action-btn.accent-wine  { border-color: var(--wine); }

/* Overlay to close on outside tap */
.fab-overlay {
  display: none; position: fixed; inset: 0;
  z-index: 999;
}
.fab-overlay.show { display: block; }

/* Context toast — bottom center, appears briefly */
.fab-toast {
  position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--deep); color: var(--white);
  padding: 10px 20px; border-radius: 24px;
  font-family: var(--f-sans); font-size: .78rem; font-weight: 400;
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(30,16,20,.3);
  z-index: 1001;
}
.fab-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── LH chip — highlighted as confirmation action ── */
.chip.chip-lh {
  background: linear-gradient(135deg, #f5eaf0, #eeddf5);
  border-color: #9050c0;
  color: #5a2080;
  font-weight: 500;
}
.chip.chip-lh.on {
  background: linear-gradient(135deg, #8040b0, #9a4ed0);
  border-color: #8040b0;
  color: #fff;
}

/* ── ov-banner action button ── */
.ovb-actions { margin-top: 10px; }
.ovb-btn {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 20px;
  padding: 6px 16px;
  font-family: 'Jost', sans-serif;
  font-size: .75rem; font-weight: 500;
  color: rgba(255,255,255,.9);
  cursor: pointer;
  transition: all .18s;
}
.ovb-btn:hover {
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.55);
}

/* ── Exercise tip note ── */
#ef-exercise + p { font-style: italic; }