/*
  Styles for "Viver bem com diabetes" landing page
  - CSS separado conforme instruções
  - Comentários explicativos e variáveis de estilo obrigatórias
*/

:root {
  --color-primary: #A064D0;
  --color-secondary: #C7DF00;
  --text-color: #202020;
  --text-light: #555;
  --background-light: #F2F4F8;
  --body-bg: #ffffff;

  --font-primary: 'Open Sans', sans-serif;
  --font-secondary: 'Ubuntu', sans-serif;

  --border-radius: 5px;
  --box-shadow: 5px 5px 35px rgba(23, 54, 75, .15);
  --section-gap: 120px; /* distância entre blocos */
  --section-padding: 60px; /* padding padrão por seção (top + bottom = section-gap) */
  --bg-section-padding: 80px; /* padding para seções com background */
  --card-padding: 40px; /* padding para cards */
  --column-gap: 60px; /* gap entre colunas */
  --step-icon-size: 72px; /* tamanho padrão do ícone na timeline */
  --color-primary-hover: #793fa8;
}

/* Reset simples */
*{box-sizing:border-box}
html{scroll-behavior:smooth} /* scroll suave para âncoras */
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-primary);
  color:var(--text-color);
  background:var(--body-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Tipografia: padronizar parágrafos do site */
p{font-size:17px;line-height:1.6;margin-top:0;margin-bottom:1rem}
/* Remover margin-bottom do último parágrafo dentro da div pai */
p:last-child{margin-bottom:0}

/* Reset: remover margin-top de todos os títulos */
h1,h2,h3,h4,h5,h6{margin-top:0}

.container{
  width:90%;
  max-width:1200px; /* Container central com max-width: 1200px */
  margin:0 auto;
}

/* Topbar */
.topbar{
  position:absolute; /* header sobreposto ao hero */
  top:0;left:0;width:100%;
  background:transparent;
  padding:12px 0;
  z-index:100;
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between}
.topbar-left img{height:44px;display:block}
.topbar-right a{margin-left:18px;color:#fff !important;text-decoration:none;font-weight:600;text-transform:capitalize} /* links em branco e com primeira letra maiúscula */

/* HERO: background-image + overlay */
.hero{
  position:relative;
  display:flex;align-items:end;
  color:#fff;
  padding-top:72px; /* espaço para o header sobreposto */
  overflow:hidden;
  background-color: var(--color-primary);
}

.hero-inner{display:flex;gap:var(--column-gap);align-items:stretch;height:calc(100% - 72px)}
.hero-left{flex:1;display:flex;flex-direction:column;justify-content:center;z-index:2;padding:48px 0}
.hero-right{width:50%;display:flex;align-items:flex-end;justify-content:center}
.hero-right .hero-img{width:100%;height:auto;display:block;object-fit:cover;max-height:100%}
.hero h1{font-family:var(--font-secondary);font-size:2.4rem;margin:0 0 12px}
.hero p{max-width:780px;line-height:1.6;color:#fff}
.hero-small{margin-top:12px;color:rgba(255,255,255,0.9)}

/* Buttons: todos com background-color var(--color-primary) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.5rem 1rem;border-radius:8px;border:1px solid transparent;text-decoration:none;color:#fff;background-color:var(--color-primary);font-weight:600;cursor:pointer;box-shadow:0 1px 2px rgba(16,24,40,0.05);transition:background-color .25s ease-in-out,box-shadow .20s ease-in-out}
.btn:hover{background-color:var(--color-primary-hover);box-shadow:0 6px 18px rgba(73,139,202,0.12)}
.btn:focus{outline:none;box-shadow:0 0 0 4px rgba(73,139,202,0.12)}
.btn:active{transform:none}
.btn-primary{background-color:var(--color-primary);color:#fff;border-color:transparent}
.btn-secondary{background-color:var(--color-secondary);color:#fff;border-color:transparent}

/* Link hover states (use project colors; ensure contrast) */
a, a:link, a:visited{color:inherit;transition:color .15s ease,fill .15s ease}
a:hover,a:focus{color:var(--color-primary)}
.topbar-right a:hover,.topbar-right a:focus{color:var(--color-primary)}
.footer-col a:hover,.footer-col a:focus{color:var(--color-primary)}
.mobile-menu a:hover,.mobile-menu a:focus{color:var(--color-primary)}
.social-icons a:hover .social-svg,.social-icons a:focus .social-svg{fill:var(--color-primary)}
.sac-card:hover .sac-svg,.sac-card:focus .sac-svg{fill:var(--color-primary)}


/* Seções gerais */
.section{padding:var(--section-padding) 0}

/* SOBRE: cada bloco com duas colunas (desktop) e uma coluna mobile */
.sobre-block{display:flex;gap:var(--column-gap);align-items:center;margin-bottom:var(--section-gap)}
.sobre-text{flex:1}
.sobre-image{flex:1}
/* Imagem do #sobre responsiva */
.sobre-img{width:100%;height:auto;display:block;border-radius:var(--border-radius);box-shadow:var(--box-shadow)}
.image-placeholder{background:var(--background-light);border-radius:var(--border-radius);box-shadow:var(--box-shadow);padding:48px;text-align:center;color:var(--text-light)}
.sobre-block.reverse{flex-direction:column-reverse}

.juntos{background:var(--background-light);padding:var(--bg-section-padding) 0}
  .juntos-inner{display:flex;gap:var(--column-gap);align-items:flex-start;padding:0}
.juntos-text{flex:1}
.juntos-card{width:500px}
.card{background:#fff;padding:var(--card-padding);border-radius:var(--border-radius);box-shadow:var(--box-shadow)}
.card h4{margin:0 0 8px;color:var(--text-color)}
.dates{font-size:1.6rem;font-weight:700;color:var(--color-primary);margin-bottom:12px}

/* Processo: fundo branco, layout com dois cards */
.processo-selecao{background:var(--body-bg);padding:var(--bg-section-padding) 0}
.processo-inner{display:flex;gap:var(--column-gap);align-items:stretch;padding:0}
.process-card{flex:1;min-width:260px}
.process-card h3{margin-top:0;color:var(--text-color)}
.process-list{list-style:none;padding:0;margin:12px 0 0}
.process-list li{display:flex;align-items:flex-start;gap:12px;margin:10px 0;color:var(--text-color)}
.process-list svg.check-icon{width:20px;height:20px;flex:0 0 20px;color:var(--color-primary)}
.process-list span{line-height:1.4}

/* Propósito: 3 cards */
.proposito-cards{display:flex;gap:var(--column-gap);flex-wrap:wrap;margin-top:18px}
.proposito-cards .card{flex:1;min-width:240px}
.icon-placeholder{width:56px;height:56px;border-radius:8px;background:var(--background-light);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.proposito-icon{width:56px;height:56px;display:block;margin-bottom:12px;color:var(--color-primary)}

/* Notices (card-notice) should show an icon on the left and text on the right */
.card-notice{display:flex;gap:20px;align-items:flex-start}
.card-notice .notice-icon{flex:0 0 60px;width:60px;height:60px;display:flex;align-items:flex-start;color:var(--color-primary)}
.card-notice .notice-icon svg{width:60px;height:60px;display:block;fill:currentColor}
.card-notice .notice-content{flex:1}
.card-rodape{margin-top: 24px;}

@media(max-width:899px){
  .card-notice{flex-direction:column}
  .card-notice .notice-icon{align-items:center}
}

/* Como participar */
.como-inner{display:flex;gap:var(--column-gap);align-items:center}
.como-text{flex:1}
.como-participar{background:var(--background-light);padding:var(--bg-section-padding) 0} /* Como participar com background */

/* Processo de seleção */
.processo-cards{display:flex;gap:18px;flex-wrap:wrap}
.process-card{flex:1;min-width:260px}

.timeline{position:relative;display:flex;gap:var(--column-gap);align-items:flex-start;margin-top:24px}
.timeline:before{content:'';position:absolute;left:calc(var(--step-icon-size) / 2 + 74px);right:calc(var(--step-icon-size) / 2 + 74px);top:calc(var(--step-icon-size) / 1.5);height:4px;background:var(--color-primary);border-radius:999px;z-index:1}
.step{flex:1;position:relative;text-align:center;padding-top:12px;display:flex;flex-direction:column}
.step-icon{width:var(--step-icon-size);height:var(--step-icon-size);border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto;position:relative;z-index:2;box-shadow:var(--box-shadow);color:var(--color-primary)}
.step-card{margin-top:14px;padding:18px;flex:1;display:flex;flex-direction:column;justify-content:flex-start}
.step-svg{width:36px;height:36px;display:block;fill:currentColor}

/* Force timeline icons to use primary color (override inline fills) */
.timeline .step-icon{color:var(--color-primary)}
.timeline .step-svg{width:36px;height:36px;display:block;fill:var(--color-primary);stroke:var(--color-primary)}
.timeline .step-svg path,
.timeline .step-svg circle,
.timeline .step-svg rect,
.timeline .step-svg g{fill:var(--color-primary) !important;stroke:var(--color-primary) !important}

@media(max-width:899px){
  .timeline{flex-direction:column;gap:16px;align-items:center}
  .timeline:before{display:none}
  .step{text-align:center}
  .step-icon{margin-left:auto;margin-right:auto}
  .step-card{margin-left:0;margin-top:12px}
}

/* Encerramento */
.encerramento-inner{display:flex;gap:var(--column-gap);align-items:center}
.enc-text{flex:1.4}
.enc-image{flex:0.8;max-width:520px}
.enc-text p{color:var(--text-light);font-size:0.98rem;line-height:1.6}
.enc-image .enc-img{width:100%;height:auto;display:block;border-radius:var(--border-radius);box-shadow:var(--box-shadow)}

/* Contato */
.background-encerramento{background-image:url('imgs/biomm-bg.png');background-position:center bottom;background-size:cover;background-repeat:no-repeat;padding:0}

/* Footer */
.site-footer{background:#f8f9fb;padding:0;color:var(--text-light)}
/* Footer top holds the main footer content and provides the requested vertical padding */
.footer-top{padding:60px 0}
.footer-grid{display:flex;gap:18px;flex-wrap:wrap}
.footer-col{flex:1;min-width:220px}
.footer-col a{color:var(--text-color);text-decoration:none;margin:8px 0}
.footer-col img{max-height:44px;width:auto;display:block;margin-bottom:8px} /* reduzir logo no footer para ficar semelhante ao header */
.social-icons .icon{display:inline-block;margin-right:8px}
.footer-bottom{padding:12px 0;text-align:center;color:var(--text-light)}

/* Footer menu wrapper to ensure links stack vertically */
.footer-col .menu{display:flex;flex-direction:column}

/* Social icons styling */
.social-icons{margin-top:8px}
.social-icons a{display:inline-block;margin-right:12px}
.social-svg{width:20px;height:20px;display:block;fill:var(--text-color)}

/* SAC card visual (conforme anexo) */
.sac-card{display:flex;align-items:center;gap:12px;color:var(--text-color);text-decoration:none;margin:0}
.sac-svg{width:40px;height:40px;display:block;fill:var(--text-color)}
.sac-icon{display:flex;align-items:center;justify-content:center}
.sac-icon{font-size:28px;line-height:1}
.sac-copy{display:flex;flex-direction:column}
.sac-label{font-size:0.85rem;font-weight:700}
.sac-phone{font-size:1rem;font-weight:600}

/* Responsividade */
@media(min-width:900px){
  .sobre-block{flex-direction:row}
  .sobre-block.reverse{flex-direction:row-reverse}
  .juntos-inner{align-items:center}
  .como-inner{align-items:center}
  .encerramento-inner{align-items:center}
}

/* Tablet / medium screens: stack juntos card to avoid breaking layout */
@media(max-width:1100px){
  .juntos-inner{flex-direction:column}
  .juntos-card{width:100%}
}

@media(max-width:899px){
  .container{width:85%}
  .juntos-inner,.como-inner,.encerramento-inner{flex-direction:column}
  .topbar-right a{margin-left:12px}

  /* Mobile spacing overrides: reduzir para manter legibilidade */
  .section{padding:32px 0}
  .card,.step-card{padding:24px}
  .sobre-block,.juntos-inner,.processo-inner,.como-inner,.proposito-cards,.footer-grid,.encerramento-inner{gap:24px}
  .timeline{gap:24px}
  .sobre-block{margin-bottom:24px}
  .enc-image{width:100%}
  .enc-text{flex:1}
  .enc-image{flex:none;max-width:none}

  /* Make the image appear before text in each .sobre-block on mobile */
  .sobre-block{flex-direction:column}
  .sobre-block .sobre-image{order:-1}
  .sobre-block.reverse{flex-direction:column}

  /* Center everything in #como-participar on mobile */
  .como-text{text-align:center}
  .como-inner{align-items:center}
  .como-card{display:flex;justify-content:center}

  /* Ensure processo (processo-inner) stacks on mobile */
  .processo-inner{flex-direction:column}
  .process-card{width:100%}
}

/* Mobile: make the hero image a narrow right strip (20%) */
@media(max-width:899px){
  .hero-inner{flex-direction:column}
  .hero-right{width:100%;align-items:flex-end;margin-top:auto}
  .hero-left{padding-bottom:16px}
}


/* Mobile: increase hero overlay opacity for better contrast */
/* no overlay on hero — removed per design */

@media(max-width:899px){
  .etapas-projeto h2{ text-align:center }
}

/* Mobile header: hamburger and overlay menu */
.menu-toggle{display:none;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer;padding:8px;border-radius:6px}
.menu-toggle .bar{display:none}
.menu-toggle .menu-icon{display:block;width:26px;height:22px}
.menu-toggle svg path{width:26px;height:22px;display:block;fill:#fff}
.mobile-menu{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:84px;background:rgba(0,0,0,0.6);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:2000}
.mobile-menu-inner{background:#fff;width:92%;max-width:320px;border-radius:10px;padding:22px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.35)}
.mobile-menu a{display:block;padding:12px 0;color:var(--text-color);text-decoration:none;font-weight:700}
.mobile-menu-close{position:absolute;right:12px;top:8px;background:transparent;border:0;font-size:24px;line-height:1;cursor:pointer}
body.menu-open{overflow:hidden}
.menu-open .mobile-menu{opacity:1;pointer-events:auto}

@media(max-width:899px){
  .topbar-right{display:none}
  .menu-toggle{display:flex}
  .sobre-block{flex-direction:column}
}

/* Ensure button text and icons remain white in all states (override global link hover) */
.btn, .btn:link, .btn:visited, .btn:hover, .btn:focus, .btn:active { color: #ffffff !important }
.btn svg, .btn .icon svg { fill: #ffffff !important; stroke: #ffffff !important }


/* removed specific background-encerramento spacing; inner .section handles mobile spacing */

/* Footer: center all texts/elements on mobile */
@media(max-width:899px){
  .footer-top .footer-grid{flex-direction:column;align-items:center;text-align:center}
  .footer-col{min-width:unset;width:100%;display:flex;flex-direction:column;align-items:center}
  .footer-col img{margin:0 auto 8px}
  .footer-col .menu{align-items:center}
  .social-icons{display:flex;justify-content:center;margin-top:12px}
  .social-icons a{margin:0 8px}
  .sac-card{justify-content:center}
  .footer-bottom{text-align:center}
}

/* Acessibilidade e pequenas melhorias */
a.btn:focus{outline:3px solid rgba(73,139,202,0.25);outline-offset:2px}

/* Utility: visually hidden but available to screen readers / SEO */
.visually-hidden{position:absolute !important;border:0 !important;padding:0 !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;white-space:nowrap !important}

/* Ensure hero logo scales nicely */
.site-title img{max-width:420px;width:100%;height:auto;display:block}