/* =========================
   RAMBO MAX — SCIENCE SECTION
   File: assets/css/rmx-science.css
   ========================= */

/* Vars (herda --accent do tema se existir) */
:root{
  --sci-bg:#0A0A0B;
  --sci-ink:#F2F2F3;
  --sci-soft:#121316;
  --sci-line:rgba(255,255,255,.14);
  --sci-accent:var(--accent, #E45A1F);
  --sci-muted:#C9CDD6;
}

/* Section & container */
.science{background:var(--sci-bg); color:var(--sci-ink); padding:56px 16px; overflow:hidden;}
.sci-wrap{max-width:1200px; margin:0 auto;}
.science, .science *{box-sizing:border-box}

/* Header */
.sci-head{ text-align:center; max-width:920px; margin:0 auto 28px }
.sci-kicker{ font-weight:900; letter-spacing:.14em; color:#FFB794; text-transform:uppercase; margin:0 0 6px }
.sci-title{ font-weight:900; font-size:clamp(28px,4.8vw,44px); margin:0 0 10px }
.sci-lead{ opacity:.95; line-height:1.55; font-size:1.06rem; margin:0 auto }

/* Main grid: left cards + right image (desktop) */
.sci-grid{
  display:grid; gap:28px; align-items:start;
  grid-template-columns: 1.05fr 1fr;
}
@media (max-width:980px){ .sci-grid{ grid-template-columns:1fr; gap:16px; } }

/* Stack of cards (left column) */
.sci-stack{ display:grid; gap:16px; }
.sci-card{
  background:linear-gradient(180deg,#111318,#0D0E12);
  border:1px solid var(--sci-line);
  border-radius:16px;
  padding:18px 16px;
  box-shadow:0 14px 36px rgba(0,0,0,.45);
  max-width:100%;
}
.sci-card--accent{
  background:
    linear-gradient(180deg, rgba(228,90,31,.10), rgba(228,90,31,.05)),
    linear-gradient(180deg,#111318,#0D0E12);
  border:1px solid rgba(228,90,31,.36);
}
.sci-h3{ margin:0 0 .6rem; font-weight:900; font-size:1.22rem }
.sci-h4{ margin:.25rem 0 .35rem; font-weight:900; font-size:1rem; opacity:.95 }
.sci-p{ margin:.35rem 0 .7rem; line-height:1.55; color:#E7E8EC }

/* Icon bullets list (optional) */
.sci-list--icons{ list-style:none; padding:0; margin:.25rem 0 0 }
.sci-list--icons li{
  display:flex; gap:.55rem; align-items:flex-start; margin:.5rem 0;
}
.sci-list--icons li::before{
  content:attr(data-ico);
  display:inline-grid; place-content:center;
  width:26px; height:26px; flex:0 0 26px;
  border-radius:999px; color:#fff; font-weight:900; font-size:14px; line-height:1;
  background:linear-gradient(180deg,#F1733A,var(--sci-accent));
  box-shadow:0 6px 18px rgba(228,90,31,.25);
}

/* Pill tags */
.sci-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 2px }
.tag{
  background:#171A1F; color:#F1F2F6;
  border:1px solid var(--sci-line);
  padding:.42rem .66rem; border-radius:999px; font-weight:800; font-size:.92rem;
}

/* Steps (analogy items) — FLEX, sem quebras estranhas */
.sci-steps{ list-style:none; padding:0; margin:.5rem 0 0; display:grid; gap:10px; }
.sci-step{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px; border:1px solid rgba(255,255,255,.10);
  border-radius:12px; background:linear-gradient(180deg,#15161B,#111215);
}
.sci-step .num{
  flex:0 0 28px; width:28px; height:28px;
  display:grid; place-content:center;
  border-radius:9px; color:#fff; font-weight:900; font-size:14px;
  background:linear-gradient(180deg,#F1733A,var(--sci-accent));
  box-shadow:0 0 0 2px rgba(0,0,0,.25) inset;
}
.sci-step .txt{
  flex:1 1 auto; min-width:0;  /* evita quebra de palavra esquisita */
  font-size:.98rem; line-height:1.45;
  word-break:normal; overflow-wrap:normal; hyphens:manual;
}
.sci-step .txt strong{ font-weight:900; }

/* Short callouts (lista simples) */
.sci-callouts{ margin:.5rem 0 1rem; padding-left:1.1rem; }
.sci-callouts li{ margin:.4rem 0; line-height:1.45; }

/* Highlight & Bottom line */
.sci-note{
  margin-top:12px; font-size:.98rem; line-height:1.45; font-weight:800; color:#FFEDE3;
  background:rgba(228,90,31,.12); border:1px solid rgba(228,90,31,.38);
  padding:.75rem .85rem; border-radius:14px;
}
.sci-bottomline{
  margin-top:12px; font-size:1rem; line-height:1.55;
  background:linear-gradient(180deg,#16181C,#121316);
  border:1px solid var(--sci-line); border-left:4px solid var(--sci-accent);
  border-radius:14px; padding:.9rem 1rem;
}

/* Right column visual (figure full-width) */
.sci-visual{ max-width:100%; }
.sci-figure{
  background:
    radial-gradient(340px 200px at 45% 55%, rgba(228,90,31,.10), transparent),
    linear-gradient(180deg,#101114,#0D0E10);
  border:1px solid var(--sci-line);
  border-radius:18px;
  padding:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  max-width:100%;
}
.sci-figure img{ display:block; width:100%; height:auto; border-radius:12px; }
.sci-cap{
  margin-top:8px; font-size:.95rem; color:#EDECF2; opacity:.9;
  border-left:3px solid var(--sci-accent); padding-left:.6rem;
}

/* Mobile tuning */
@media (max-width:720px){
  .science{ padding:44px 12px; }
  .sci-head{ margin-bottom:18px; }
  .sci-title{ font-size:clamp(24px,7vw,28px); }
  .sci-card{ padding:14px 12px; border-radius:14px; }
  .sci-card + .sci-card{ margin-top:6px; }
  .sci-h3{ font-size:18px; margin-bottom:8px; }
  .sci-figure{ padding:12px; border-radius:16px; }
  .sci-step{ padding:12px; gap:10px; }
  .sci-step .num{ width:24px; height:24px; font-size:13px; border-radius:8px; }
  .sci-note{ padding:10px 12px; font-size:13px; }
  .sci-bottomline{ font-size:14px; line-height:1.45; }
  /* segurança anti-overflow */
  .sci-card, .sci-note, .sci-bottomline{ max-width:100%; overflow-wrap:anywhere; }
}

/* ==== Fix 1: remove quebras agressivas e manter leitura natural ==== */
.science * {
  box-sizing: border-box;
}
.sci-card,
.sci-card p,
.sci-list--icons li,
.sci-bottomline,
.sci-note {
  word-break: normal;        /* NÃO quebrar no meio da palavra */
  overflow-wrap: break-word; /* só quebra em espaços/pontos naturais */
  hyphens: auto;
}

/* ==== Fix 2: ajustar o figure para não criar “buraco” ==== */
.sci-figure {
  margin: 0;                 /* zera margin default do <figure> */
}
.sci-cap {                   /* legenda mais compacta */
  margin-top: 6px;
}

/* ==== Fix 3: layout mobile mais justinho ==== */
@media (max-width: 720px){
  .science { padding: 28px 12px; }
  .sci-grid { grid-template-columns: 1fr; gap: 10px; } /* antes 12–20px */
  .sci-card { padding: 14px 12px; border-radius: 14px; }
  .sci-card + .sci-card { margin-top: 8px; }

  /* ícones dos itens e espaçamento */
  .sci-list--icons li { gap: .5rem; margin: .45rem 0; align-items: flex-start; }
  .sci-list--icons li::before { width: 24px; height: 24px; font-size: 13px; }

  /* analogia e steps compactos */
  .sci-analogy { grid-template-columns: 26px 1fr; gap: 10px; margin: 6px 0 8px; }
  .sci-analogy .sci-ico { width: 26px; height: 26px; font-size: 14px; }
  .sci-steps { gap: 8px; }
  .sci-steps .num { width: 24px; height: 24px; font-size: 13px; margin-right: 8px; }

  /* nota e bottomline menores */
  .sci-note { margin-top: 10px; padding: 10px 12px; font-size: 13px; }
  .sci-bottomline { margin-top: 10px; font-size: 14px; line-height: 1.45; }
}

/* ==== (opcional) dar um respiro entre a imagem e a coluna de cards no desktop ==== */
@media (min-width: 981px){
  .sci-grid { gap: 24px; } /* levemente menor que antes */
}