:root{
  --sana-blue:#2A4D6E;
  --sana-green:#0f6a54;
  --sana-mint:#B5E3D8;
  --font-primary:'Comfortaa',cursive;
  --font-secondary:'Nunito Sans',sans-serif;
}



/* Onda inferior */
.wave-bottom{ position:absolute; left:0; right:0; bottom:-1px; line-height:0; z-index:0; }
.wave-bottom svg{ display:block; width:100%; height:110px; }

/* Retina opcional */
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
  .business-main-header{ background-image:url('/images/empresas/bg-b2b.jpg'); }
}

/* ================================
   SANA • WORK STRESS TRENDS (B2B)
   ================================ */



/* === Trends card === */
.trend-card{
  background:#fff;
  border:1px solid rgba(23,56,79,.10);
  border-radius:14px;
  padding:14px 14px 12px;
  box-shadow:0 6px 20px rgba(23,56,79,.06);
  margin:0;
}
.trend-card-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem;
  padding:2px 2px 10px;
  border-bottom:1px solid rgba(23,56,79,.08);
  margin-bottom:10px;
}
.trend-card-title{
  font-size:.98rem; color:#17384f; font-weight:800; letter-spacing:-.1px;
}

/* Chart wrapper — clean (no gradient background) */
.trend-wrap{
  position:relative;
  background:#fff;
  border:1px solid rgba(23,56,79,.08);
  border-radius:12px;
  overflow:visible; /* avoid crop while resizing */
}

/* Hide ranges (fixed timeline) */
.trend-range{ display:none !important; }

/* Loader skeleton */
.trend-loader{
  position:absolute; inset:0;
  background:linear-gradient(90deg,#f3f6f5 0%,#fafdfc 40%,#f3f6f5 80%);
  background-size:200% 100%;
  animation:shimmer 1.2s linear infinite;
  opacity:0; pointer-events:none;
  border-radius:12px;
}
.trend-loader.show{ opacity:1; }
@keyframes shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Viewport — JS sets final height */
.trend-viewport{
  display:block;
  min-height:360px;
  height:auto;
  padding:0; margin:0; border-radius:12px;
  /* subpixel anti-alias over white edges (helps canvas rounding) */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
}
@media (min-width:992px){ .trend-viewport{ min-height:410px; } }

/* Canvas fill */
.trend-viewport canvas{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:100%;
  border-radius:12px;
}

/* Fallback & credit */
.trend-fallback{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:1rem;
  background:#fff;
  border:1px dashed rgba(23,56,79,.25);
  border-radius:12px;
}
.trend-credit.small{ color:#6c879a; margin-top:.35rem; }

.d-none{ display:none !important; }
.trend-viewport > iframe{ min-height:320px; display:block; width:100%; }

@media (max-width:576px){ .trend-viewport{ min-height:360px; } }

/* Optional ghost button (if ever shown) */
.btn-ghost{
  background:transparent;
  border:1px solid rgba(23,56,79,.12);
  color:#456277; padding:.25rem .5rem; border-radius:999px;
}
.btn-ghost.active{
  background:#eef5f3;
  border-color:rgba(15,106,84,.24);
  color:#0f6a54;
}

/* Small figcaption polish */
figcaption.small{ color:#6c879a; }

/* ===== ROI CENTERED & POSITIVE ===== */
.sana-roi-center{ background:#f6faf8; }
.roi-wrap{ max-width:980px; }
.roi-header{ margin-bottom:1.25rem; }
.roi-title{ color:#124a3e; font-weight:900; letter-spacing:-.3px; }
.roi-sub{ color:#315b53; margin-bottom:.25rem; }

/* Centered card */
.roi-card{
  background:#fff;
  border:1px solid rgba(18,74,62,.12);
  border-radius:16px;
  padding:16px;
  margin:0 auto;
  box-shadow:0 10px 28px rgba(18,74,62,.06);
}
@media (min-width:768px){ .roi-card{ padding:20px; } }

/* Sections */
.roi-section + .roi-section{
  border-top:1px dashed rgba(18,74,62,.16);
  margin-top:14px; padding-top:14px;
}
.roi-section-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.roi-section-head h6{ margin:0; font-weight:800; color:#0d3d33; letter-spacing:-.2px; }
.badge-soft{
  display:inline-flex; align-items:center; padding:.2rem .5rem;
  border-radius:999px; font-size:.75rem; font-weight:700;
  color:#0f6a54; background:rgba(181,227,216,.55); border:1px solid rgba(28,93,76,.25);
}

/* Soft green button */
.btn-success-subtle{
  border-radius:999px; border:1px solid rgba(28,93,76,.35);
  background:rgba(181,227,216,.5); color:#0f5747; font-weight:800;
}
.btn-success-subtle:hover{ background:rgba(181,227,216,.75); }

/* Impact (results) */
.impact-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:768px){ .impact-grid{ grid-template-columns:repeat(2,1fr); } }
.impact-card{
  background:linear-gradient(180deg, rgba(181,227,216,.18) 0%, rgba(181,227,216,.08) 100%);
  border:1px solid rgba(28,93,76,.18);
  border-radius:12px; padding:12px;
}
.impact-total{
  grid-column:1 / -1;
  background:#0f6a54; color:#fff; border-radius:12px; padding:14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.total-label{ font-weight:800; opacity:.95; }
.total-value{ font-size:clamp(1.4rem, 3vw, 1.8rem); font-weight:900; letter-spacing:-.3px; }

/* Typographic helpers */
.label{ color:#1a4b41; font-weight:700; font-size:.9rem; }
.value{ font-weight:800; color:#0d3d33; font-size:1.15rem; }
.value.positive::before{ content:"▲ "; font-weight:900; margin-right:2px; }

/* Inputs */
.roi-card .form-control{ border-radius:10px; border:1px solid rgba(18,74,62,.18); }
.roi-card .form-control:focus{ border-color:#0f6a54; box-shadow:0 0 0 .2rem rgba(15,106,84,.1); }

/* Details (advanced) */
.roi-advanced summary{ list-style:none; cursor:pointer; }
.roi-advanced summary::-webkit-details-marker{ display:none; }
.roi-advanced summary .badge-soft{ margin-left:auto; }
.roi-advanced[open] summary h6{ color:#0f6a54; }

/* Accessibility */
.faq-question:focus-visible{ outline:3px solid var(--sana-mint); outline-offset:3px; }

/* Problem chips */
.problem-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.problem-chips .chip{
  display:inline-block; padding:.25rem .6rem; border-radius:999px;
  background:#fff; border:1px solid rgba(42,77,110,.12); color:#1f3b52; font-weight:700; font-size:.85rem;
}

/* Compact metrics */
.problem-metrics{ display:grid; gap:.75rem; grid-template-columns:1fr; }
@media (min-width:768px){ .problem-metrics{ grid-template-columns:repeat(3,1fr); } }
.metric{
  background:#fff; border:1px solid rgba(42,77,110,.08); border-radius:12px;
  padding:14px; height:100%;
}
.metric-title{ font-weight:800; color:#17384f; letter-spacing:-.2px; margin-bottom:2px; }
.metric-sub{ color:#2A4D6E; font-weight:600; margin-bottom:.35rem; font-size:.9rem; }
.metric-desc{ color:#3a556b; font-size:.9rem; margin:0; }

/* Compact list */
.sana-list-check.compact li{ margin-bottom:.35rem; }

/* === Positive section (greens) === */
.impacto-positivo .section-title{ color:var(--sana-blue); }
.kpi-green-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:768px){ .kpi-green-grid{ grid-template-columns:repeat(3,1fr); } }

.kpi-green-card{
  background:linear-gradient(180deg, rgba(181,227,216,0.22) 0%, rgba(181,227,216,0.12) 100%);
  border:1px solid rgba(28,93,76,0.18);
  border-radius:14px; padding:16px;
  box-shadow:0 6px 18px rgba(28,93,76,0.06);
}
.kpi-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.25rem; }
.kpi-title{ font-weight:800; color:#134a3e; letter-spacing:-.2px; }
.kpi-tag{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:999px; font-weight:900;
  border:1px solid rgba(28,93,76,.35); color:#0f6a54; background:rgba(181,227,216,.65);
}
.kpi-value{ font-size:1.35rem; font-weight:800; color:#0d3d33; letter-spacing:-.3px; margin:2px 0 6px; }
.kpi-note{ color:#275a4e; margin:0; font-size:.93rem; }

/* Positive chips */
.benefit-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip-pos{ background:#e9f7f3; border:1px solid rgba(28,93,76,.18); color:#125046; }
.benefit-chips .chip{ display:inline-block; padding:.25rem .6rem; border-radius:999px; font-weight:700; font-size:.85rem; }

/* Button override (optional visual coherence) */
.impacto-positivo .btn-outline-primary{ color:#0f6a54; border-color:#0f6a54; }
.impacto-positivo .btn-outline-primary:hover{ color:#fff; background:#0f6a54; border-color:#0f6a54; }

/* PROBLEM — snapshot */
.problem-snap .section-title{ color:var(--sana-blue); }
.snap-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:768px){ .snap-grid{ grid-template-columns:repeat(3,1fr); } }
.snap-card{
  background:#fff; border:1px solid rgba(42,77,110,.10);
  border-radius:12px; padding:14px;
}
.snap-title{ font-weight:800; color:#17384f; letter-spacing:-.2px; margin-bottom:4px; }
.snap-value{ font-size:1.15rem; font-weight:800; color:#0f2a3d; margin-bottom:4px; }
.snap-note{ color:#3a556b; margin:0; font-size:.93rem; }

/* PROBLEM — default data block */
.problem-data .section-title{ color:var(--sana-blue); }

/* KPI grid */
.stat-grid{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (max-width:575.98px){ .stat-grid{ grid-template-columns:1fr; } }

/* Base stat-card */
.stat-card{
  background:linear-gradient(180deg, rgba(181,227,216,0.22) 0%, rgba(181,227,216,0.12) 100%);
  border:1px solid rgba(28,93,76,0.18);
  border-radius:14px; padding:16px; height:100%;
  box-shadow:0 6px 18px rgba(28,93,76,0.06);
}
.stat-kpi{ font-size:clamp(1.8rem, 4.5vw, 2.2rem); font-weight:900; letter-spacing:-.5px; color:#0d3d33; line-height:1; }
.stat-label{ margin-top:.15rem; font-weight:800; color:#134a3e; }
.stat-note{ margin:.25rem 0 0; color:#275a4e; font-size:.95rem; }

/* Visual separation across sections */
.section-neutral{ background:#f7f9fb; } /* analytic / cool */
.section-positive{
  background:linear-gradient(180deg,#f8faf9 0%, #eef5f3 100%); /* positive / soft green */
}

/* Accent on PROBLEM title */
.title-with-accent{ position:relative; padding-left:.85rem; }
.title-with-accent::before{
  content:""; position:absolute; left:0; top:.15rem; bottom:.15rem;
  width:4px; border-radius:4px;
  background:linear-gradient(180deg,#2A4D6E 0%, rgba(42,77,110,.5) 100%);
}

/* Neutral variant for cards (when section-neutral) */
.stat-card--neutral{ background:#fff; border:1px solid rgba(42,77,110,.12); box-shadow:none; }
.stat-kpi--neutral{ color:#17384f; }
.stat-label--neutral{ color:#345269; }
.stat-note--neutral{ color:#5e7486; }

.section-neutral .stat-card{ background:#fff; border:1px solid rgba(42,77,110,.12); box-shadow:none; }
.section-neutral .stat-kpi{ color:#17384f; }
.section-neutral .stat-label{ color:#345269; }
.section-neutral .stat-note{ color:#5e7486; }

/* Bulleted list tint */
.quick-signals--neutral li::before{ color:#2A4D6E; }

/* HOW — minimal & scan-friendly */
.sana-how .how-title{
  color:var(--sana-blue);
  font-family:var(--font-primary);
  font-weight:800;
  letter-spacing:-0.3px;
}
.sana-how .how-sub{ color:#3a556b; margin:0; }

.how-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:768px){ .how-grid{ grid-template-columns:repeat(4,1fr); } }
.how-card{
  background:#fff; border:1px solid rgba(42,77,110,.10);
  border-radius:12px; padding:14px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.how-card:hover{ transform: translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.06); }
.how-head{ font-weight:800; color:#17384f; margin-bottom:6px; letter-spacing:-.2px; }
.how-desc{ color:#3a556b; margin:0; }
.how-note{ color:#6b7f8d; font-size:.92rem; }

/* ===== Intro (white) ===== */
.sana-intro-growth{ background:#fff; }

.intro-title{
  font-family:var(--font-primary);
  color:var(--sana-blue);
  font-weight:900;
  letter-spacing:-0.3px;
  font-size:clamp(1.6rem, 4.2vw, 2.2rem);
  margin:0 0 .35rem 0;
  text-wrap:balance;
  position:relative;
  display:inline-block;
  padding-bottom:.3rem;
}
.intro-subtitle{
  font-family:var(--font-secondary);
  color:#3a556b;
  margin:.75rem auto 0;
  max-width:68ch;
  line-height:1.5;
  font-size:clamp(.98rem, 2.1vw, 1.08rem);
}

/* —— Bridge / section separator —— */
.section-bridge{
  background:#fff;
  padding:clamp(28px, 6vw, 56px) 0;
}
.section-bridge .bridge-wrap{
  text-align:center;
  max-width:760px;
  margin:0 auto;
}
.bridge-chip{
  display:inline-block;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.2px;
  color:#0f6a54;
  background:rgba(181,227,216,.45);
  border:1px solid rgba(28,93,76,.25);
  border-radius:999px;
  padding:.25rem .6rem;
  margin-bottom:.6rem;
}
.bridge-title{
  margin:0 0 .25rem 0;
  font-family:var(--font-primary);
  font-weight:900;
  letter-spacing:-.2px;
  color:#17384f;
  font-size:clamp(1.15rem, 3.2vw, 1.5rem);
  text-wrap:balance;
}
.bridge-sub{
  margin:0 auto .9rem auto;
  color:#3a556b;
  font-size:.98rem;
  line-height:1.45;
  max-width:60ch;
}
.bridge-divider{
  width:min(220px, 38%);
  height:2px;
  margin:0.25rem auto 0;
  background:linear-gradient(90deg, rgba(181,227,216,0), rgba(15,106,84,.55), rgba(181,227,216,0));
  border-radius:2px;
  opacity:.9;
}

/* --- Mobile visibility guarantees for Google Trends iframes --- */
@media (max-width: 576px){
  .trend-wrap{ aspect-ratio:auto; overflow:visible; }
  .trend-viewport{ min-height:340px; }
  #gt-trend-container iframe{
    display:block !important;
    width:100% !important;
    min-height:340px !important;
    height:340px !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .trend-min-head{ flex-wrap:wrap; row-gap:6px; }
}

/* Small tablets — a bit taller helps */
@media (min-width:577px) and (max-width:768px){
  #gt-trend-container iframe{ height:420px !important; min-height:420px !important; }
}

/* Extra defense in case the iframe selector changes */
.trend-viewport > iframe{ min-height:320px; }

/* iOS/Safari: avoid initial height:0 */
#gt-trend-container iframe[style*="height: 0"]{
  height:340px !important; min-height:340px !important;
}

/* ===== ROI: mejoras mobile-first ===== */

/* Wrapper botones +/- (solo se inyecta en mobile con JS) */
.num-wrap{
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: stretch;
  gap: 6px;
}
.num-wrap .form-control{
  text-align: center;
  font-size: 1.05rem;
  padding-block: .65rem;
}
.num-btn{
  appearance: none;
  border: 1px solid rgba(18,74,62,.2);
  background: #fff;
  color: #0f5747;
  font-weight: 900;
  font-size: 1.2rem;
  border-radius: 10px;
  line-height: 1;
  padding: .2rem 0;
  touch-action: manipulation;
}
.num-btn:active{ transform: scale(.98); }
.num-btn--minus{}
.num-btn--plus{}

/* Inputs más respirados en mobile */
@media (max-width: 576px){
  .roi-card .form-label{
    font-size: .92rem;
    color:#2b5147;
    margin-bottom: .25rem;
    font-weight: 700;
  }
  .roi-card .row.g-3{ row-gap: .75rem !important; }
}

/* Barra sticky inferior con ROI en vivo (solo visible en mobile via JS) */
.roi-mobile-bar{
  position: sticky;
  bottom: 10px;
  left: 0; right: 0;
  z-index: 30;
  display: none; /* JS la muestra en mobile */
  margin-top: 12px;
}
.roi-mobile-bar.show{ display: block; }

.roi-mobile-bar{
  background: #0f6a54;
  color: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 10px 26px rgba(15,106,84,.28);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
}
.roi-mobile-bar__label{
  font-weight: 800;
  opacity: .95;
  font-size: .95rem;
}
.roi-mobile-bar__value{
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: -.2px;
}
.roi-mobile-bar__btn{
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.15);
  color: #fff;
  font-weight: 900;
  padding: .45rem .7rem;
}

/* Mejor legibilidad de resultados en pantallas pequeñas */
@media (max-width: 576px){
  .impact-grid{ gap:10px; }
  .impact-card{ padding:10px; }
  .impact-total{
    padding:12px;
    gap:8px;
  }
  .total-label{ font-size: .95rem; }
  .total-value{ font-size: clamp(1.2rem, 4.8vw, 1.6rem); }
}

/* Pequeños tokens de sufijos (opcional, usando label) */
.form-label[data-suffix]::after{
  content: attr(data-suffix);
  margin-left: .35rem;
  color: #5a7a71;
  font-weight: 700;
  font-size: .85rem;
}

/* Toques accesibles */
.btn-success-subtle{ min-height: 40px; }
.num-btn{ min-height: 40px; }

.section-bridge--premium{
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
  padding: clamp(28px, 6vw, 64px) 0;
}

.section-bridge--premium .bridge-card{
  position: relative;
  border-radius: 20px;
  padding: clamp(18px, 3vw, 28px);
  background:
    radial-gradient(900px 420px at 16% 0%, rgba(181,227,216,.28), transparent 60%),
    radial-gradient(820px 420px at 84% 20%, rgba(42,77,110,.12), transparent 62%),
    #ffffff;
  border: 1px solid rgba(42,77,110,.10);
  box-shadow: 0 18px 48px rgba(23,56,79,.10);
  overflow: hidden;
}

.section-bridge--premium .bridge-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 18% 10%, rgba(181,227,216,.35), transparent 40%),
    radial-gradient(circle at 82% 30%, rgba(42,77,110,.14), transparent 42%);
  opacity:.55;
  pointer-events:none;
}

.section-bridge--premium .bridge-top{
  position: relative;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}

.section-bridge--premium .bridge-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0f6a54;
  background: rgba(181,227,216,.55);
  border: 1px solid rgba(15,106,84,.22);
  border-radius: 999px;
  padding: .35rem .75rem;
}

.section-bridge--premium .bridge-title{
  margin: .65rem 0 .25rem 0;
  font-family: var(--font-primary);
  font-weight: 900;
  letter-spacing: -0.3px;
  color: #17384f;
  font-size: clamp(1.25rem, 3.6vw, 1.7rem);
  text-wrap: balance;
}

.section-bridge--premium .bridge-sub{
  margin: 0 auto;
  color: #3a556b;
  font-family: var(--font-secondary);
  max-width: 70ch;
  line-height: 1.55;
  font-size: 1rem;
}

.section-bridge--premium .bridge-points{
  position: relative;
  margin-top: 1.15rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px){
  .section-bridge--premium .bridge-points{
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 1.25rem;
  }
}

.section-bridge--premium .bridge-point{
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(42,77,110,.10);
  box-shadow: 0 10px 22px rgba(23,56,79,.06);
}

.section-bridge--premium .bridge-icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(181,227,216,.45);
  border: 1px solid rgba(15,106,84,.18);
  color: #2A4D6E;
  flex: 0 0 auto;
}

.section-bridge--premium .bridge-icon i{
  font-size: 1.05rem;
}

.section-bridge--premium .bridge-point-text strong{
  display: block;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: #17384f;
  margin-top: .05rem;
}

.section-bridge--premium .bridge-point-text span{
  display: block;
  margin-top: .15rem;
  color: #5a6e7d;
  font-family: var(--font-secondary);
  line-height: 1.45;
  font-size: .95rem;
}

.section-bridge--premium .bridge-actions{
  position: relative;
  margin-top: 1.1rem;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.section-bridge--premium .bridge-actions .btn-outline{
  border-color: rgba(42,77,110,.35);
  color: #2A4D6E;
}

.section-bridge--premium .bridge-actions .btn-outline:hover{
  background: rgba(42,77,110,.08);
}

.section-bridge--premium .bridge-footnote{
  flex-basis: 100%;
  text-align: center;
  color: rgba(58,85,107,.85);
  font-size: .88rem;
  margin-top: .25rem;
  font-family: var(--font-secondary);
}

.faq-answer{
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height .25s ease, opacity .25s ease;
}



.faq-item.open .faq-answer{
  opacity: 1;
}