*{box-sizing:border-box}
:root{
  /* Nova paleta de cores */
  --ink:#363432;          /* Cinza escuro para textos */
  --bg:#fffdfb;           /* Fundo claro mantido */
  --axis:#363432;         /* Linha da timeline em cinza escuro */
  --card:#ffffff;         /* Cards em branco */
  --stroke:#363432;       /* Bordas em cinza escuro */
  --muted:#90A19D;        /* Textos secundários em verde acinzentado */
  --accent1:#EF6024;      /* Laranja vibrante para hover/destaque */
  --accent2:#196774;      /* Azul petróleo para boxes de pergunta */
  --accent3:#F0941F;      /* Laranja dourado para detalhes */
  --accent4:#90A19D;      /* Verde acinzentado para grupos */
  --periodGlow: rgba(25,103,116,.10);   /* Brilho suave azul petróleo */
  --cardGlow: rgba(239,96,36,.18);      /* Brilho laranja nos cards */

  /* Hook para BG (substitua por seu pattern de DNA) */
  --bg-pattern: none; /* ex.: url('images/dna-pattern.svg') */
}

html,body{height:100%}
body{
  margin:0;
  background:
    var(--bg-pattern),
    linear-gradient(180deg,#fffdfb, #fff7f0 40%, #fffdfb);
  font:16px/1.55 'Open Sans', system-ui,-apple-system,Inter,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
}

.hero{
  background: #ffffff;
  border-bottom:4px solid var(--accent2);
}

.hero-content{
  max-width:1100px; 
  margin:0 auto; 
  padding:2rem 1rem 1.25rem 1rem; 
  text-align:center;
}

.intro-container{
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
}

.intro-text{
  flex: 1;
}

.hero-darwin, .hero-mendel{
  width: 256px;
  height: 256px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Hide images on smaller screens */
@media (max-width: 768px){
  .intro-container{
    display: block;
  }
  
  .hero-darwin, .hero-mendel{
    display: none;
  }
  
  .intro-text{
    flex: none;
  }
}

/* Timeline tools section */
.timeline-tools{
  background: #ffffff;
  padding: 2rem 1rem 2.5rem 1rem;
  border-top: 2px solid var(--stroke);
  }

.tools-content{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.tools-content h2{
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--dark);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.tools-content p{
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--dark);
  margin-bottom: 2rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.tools-links{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
}

.tools-links a{
  background: #90A19D;
  color: white;
  text-decoration: none;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  border: 2px solid #90A19D;
  text-align: center;
  display: block;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tools-links a:hover{
  background: transparent;
  color: #90A19D;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(144, 161, 157, 0.3);
}

@media (max-width: 768px){
  .tools-content h2{
    font-size: 1.8rem;
  }
  
  .tools-content p{
    font-size: 1rem;
  }
  
  .tools-links{
    grid-template-columns: 1fr;
    max-width: 300px;
  }
  
  .tools-links a{
    min-height: 50px;
  }
}
.hero h1{
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  text-transform:capitalize; letter-spacing:.5px; margin:0 0 .35rem 0;
  font-size:clamp(1.8rem, 4.5vw, 3rem); font-weight:900;
  color: var(--accent2); /* Azul petróleo para combinar com os nomes destacados */
}
.strap{
  display:inline-block; 
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-weight:900; 
  font-size: 1.1rem;
  text-transform:lowercase;
  margin:0 0 .6rem 0;
  color: var(--ink);
}
.intro{
  max-width:72ch; 
  color:#555555; 
  margin:.25rem auto 0 auto;
  text-align: justify;
}

.timeline{
  max-width:1100px; 
  margin:0 auto; 
  padding:1.25rem; 
  position:relative; 
  overflow:visible; /* Changed from hidden to allow SVG overflow */
}

/* SVG timeline styling */
.timeline svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Ensure SVG lines use CSS variables correctly */
.timeline svg line {
  stroke: var(--axis);
  stroke-width: 4;
}

.timeline svg .timeline-highlight-group line {
  stroke: var(--accent1);
  stroke-width: 4;
}

/* SVG arrow markers */
.timeline svg marker polygon {
  transition: fill 0.2s ease;
}

/* Future arrow styling */
.timeline svg .timeline-future-arrow {
  stroke-dasharray: none;
  transition: stroke 0.2s ease;
}

/* Hide or control the main axis element */
.axis{
  display: none; /* This element might be causing the infinite line */
}

.period{position:relative; margin:2rem 0 3rem 0; transition: background-color .2s ease; border-radius:.75rem;}
.period.active{ 
  background-color: transparent;
}
.period.active::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(860px, 100%);
  height: 100%;
  background-color: rgba(144,161,157,.08);
  border-radius: .75rem;
  z-index: -1;
  pointer-events: none;
}

.question{
  background: var(--accent2); color: white;
  padding: 0; /* Remove padding to allow header to span full width */
  margin:0 auto 1.25rem auto; max-width:860px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  position: relative;
  z-index: 3; /* Above the timeline segments */
  text-align: center; /* Center all content */
  transition: background-color .3s ease, box-shadow .3s ease;
  cursor: pointer;
  overflow: hidden; /* Prevent header background from overflowing rounded corners */
}

.question:hover{
  background: color-mix(in srgb, var(--accent2) 80%, black 20%); /* 20% mais escuro */
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}

.question h3{
  margin: 0; 
  padding: 1rem 1.5rem; /* Moved padding here */
  font-size: 1.2rem; 
  text-transform: uppercase; 
  letter-spacing: .6px;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  color: white;
  text-align: center;
  background: color-mix(in srgb, var(--accent2) 80%, white 20%); /* 20% mais claro */
  border-bottom: 2px solid rgba(255,255,255,0.2); /* Subtle separator */
}

.question .question-header{
  display: flex;
  align-items: center;
  justify-content: center; /* Center the lupa + text */
  gap: 1rem;
  margin-bottom: 0.8rem;
  padding: 0 1.5rem; /* Add horizontal padding */
  margin-top: 1.2rem; /* Add top margin to separate from header */
}

.question .question-header img{
  width: 50px;
  height: 50px;
  opacity: 0.9; /* Aumentei um pouco a opacidade para melhor contraste com fundo escuro */
  filter: brightness(0) invert(1); /* Transforma a imagem em branca */
}

.question .question-label{
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
}

.question p{
  margin: 0 auto; 
  max-width: 70ch;
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: white;
  text-align: left;
  padding: 0 1.5rem 1.2rem 1.5rem; /* Add padding to paragraph */
}

.row{position:relative; display:grid; grid-template-columns: 1fr 4px 4fr; gap:1.5rem; align-items:center; margin-bottom:1.5rem}

/* Year container - positioned in the first column */
.year-container{
  grid-column: 1;
  justify-self: end;
  text-align: center;
  padding-right: 25px;
  color: var(--ink);
  font-weight: 900; /* Black weight */
  opacity: 0.6;
  white-space: nowrap;
  min-width: 60px;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  /* Vertical position will be calculated dynamically by JavaScript */
}

.card{
  grid-column: 3; background:var(--card); border:2px solid var(--stroke);
  border-radius:.75rem; padding:1rem; box-shadow: 0 10px 18px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:grid; gap:1rem; align-items:start;
  max-width: 500px;
  position: relative;
  z-index: 10;
}

/* Cards agrupados são menores e mais compactos */
.card.grouped{
  max-width: 400px;
  padding: 0.8rem;
  gap: 0.8rem;
  font-size: 0.9em;
  margin-left: 50px; /* Distância total: 15px + 20px + 15px = 50px from tick */
}

@media (max-width: 960px){ 
  .row{grid-template-columns: 1fr 4px 3fr; gap:1rem}
  .year-container{padding-right: 15px;} /* Smaller padding on mobile */
}

.tick{
  grid-column: 2;
  justify-self: center;
  width:16px; height:16px; border-radius:50%; background:var(--axis);
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  z-index: 2;
}

.tick.active{ 
  background: var(--accent1); 
  box-shadow: 0 0 0 6px var(--cardGlow) 
}

.card{
  grid-column: 3; background:var(--card); border:2px solid var(--stroke);
  border-radius:.75rem; padding:1rem; box-shadow: 0 10px 18px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:grid; gap:1rem; align-items:start;
  max-width: 500px;
}

/* Card with image */
.card:has(.thumb) {
  grid-template-columns: 120px 1fr;
}

/* Card without image */
.card:not(:has(.thumb)) {
  grid-template-columns: 1fr;
}

@media (max-width:560px){ 
  .card{ grid-template-columns: 1fr !important; max-width: none; } 
}
.card:hover{ transform: translateY(-2px) }
.card.active{ border-color: var(--accent1); box-shadow: 0 16px 32px var(--cardGlow) }

.card .title{
  font-weight:800; margin:0 0 .25rem 0;
  font-family:'Manrope', system-ui, -apple-system, sans-serif
}

/* Destaque especial para os nomes de Darwin e Mendel nos boxes principais */
#p0-1839-darwin .title,
#p1-1863-mendel .title {
  font-weight: 900; /* Mais pesado que bold (800) */
  font-size: 1.05em; /* Ligeiramente maior */
  color: var(--accent2); /* Cor azul petróleo para destaque */
}

/* Title spans full width when there's an image */
.card:has(.thumb) .title{
  grid-column: span 2;
}

/* Title takes single column when there's no image */
.card:not(:has(.thumb)) .title{
  grid-column: 1;
}

@media (max-width:560px){ 
  .card .title{ grid-column: 1 !important; } 
}

.scientist-name{
  font-weight:800;
  font-size: 1.5em;
  font-family:'Manrope', system-ui, -apple-system, sans-serif;
}

.scientist-years{
  font-weight:400;
  font-family:'Open Sans', system-ui, -apple-system, sans-serif;
  text-transform:none;
  color:var(--muted);
  font-size:0.85em;
}

.thumb{
  width:120px; height:auto; border-radius:.5rem; background:#fff;
  max-height: 128px; /* Limit height to 128px */
  object-fit: contain; /* Maintain aspect ratio */
}

.item-icon{
  width: 32px;
  height: 32px;
  opacity: 0.7;
  align-self: start;
  justify-self: end;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.card .text{ margin:.25rem 0 0 0 }

.footer{max-width:1100px; margin:2rem auto; padding:1rem; color:var(--muted)}
/* Make footer layout a centered row on desktop, with actions pushed to the right.
   This visually centers the credits paragraph between the page edges and the action buttons. */
footer .container{
  display:flex;
  align-items:center;
  justify-content:center; /* center the main credit block */
  gap: 1rem;
}

/* Credit block should take remaining space and center its text */
footer .cred-rea{
  flex: 1 1 auto;
  text-align: center;
}

footer .cred-rea p{
  margin: 0.25rem 0;
}

/* Action buttons stay compact and are pushed to the right */
footer .aval-rea{
  flex: 0 0 auto;
  display:flex;
  gap: 0.5rem;
}

/* Responsive: stack footer vertically on small screens */
@media (max-width:768px){
  footer .container{
    flex-direction: column;
    align-items: center;
  }
  footer .aval-rea{
    width:100%;
    justify-content:center;
  }
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* Reduzir o tamanho da fonte do título do Morgan */
.card#p2-1910-morgan .title {
  font-size: 24px !important;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
  font-weight: 800 !important;
}

/* Reduzir especificamente o scientist-name dentro do Morgan */
#p2-1910-morgan .scientist-name {
  font-size: 24px !important;
}

#p2-1910-morgan .scientist-years {
  font-size: 18px !important;
}

#p2-1910-morgan .scientist-years {
  color: var(--accent2);
}