/* ===================== DESIGN TOKENS (from the Essencial design system) ===================== */
:root {
  /* Teal (primary) */
  --teal-900:#0B4A52; --teal-800:#0D5C66; --teal-700:#0E7A82; --teal-600:#178E93;
  --teal-500:#2FABA0; --teal-300:#8FD2CB; --teal-100:#E3F4F2;
  /* Violet (secondary) */
  --violet-900:#3D2A52; --violet-800:#4E3568; --violet-700:#6B4890;
  --violet-500:#9B7BC0; --violet-300:#C7B3DE; --violet-100:#F1EAFA;
  /* Leaf accents */
  --sunshine-500:#FFC24C; --sunshine-100:#FFEFCE;
  --coral-500:#F2825F; --coral-100:#FCE1D5;
  --blossom-500:#E0529E; --blossom-100:#FBDFEE;
  /* Neutrals */
  --ink-900:#2B2733; --ink-700:#55505E; --ink-500:#857F8F; --ink-300:#B7B1BC;
  --paper-0:#FFFFFF; --paper-50:#FBF8F4; --paper-100:#F4EEE7;
  --line-200:#E7E0D8; --line-300:#D8CFC5;

  /* Semantic aliases */
  --color-primary:var(--teal-700); --color-primary-hover:var(--teal-800);
  --color-primary-active:var(--teal-900); --color-primary-tint:var(--teal-100);
  --color-secondary:var(--violet-700); --color-secondary-hover:var(--violet-800);
  --color-secondary-tint:var(--violet-100);

  --surface-page:var(--paper-50); --surface-card:var(--paper-0);
  --surface-sunken:var(--paper-100); --surface-inverse:var(--teal-900);

  --text-primary:var(--ink-900); --text-secondary:var(--ink-700); --text-muted:var(--ink-500);
  --text-on-primary:var(--paper-0); --text-on-secondary:var(--paper-0); --text-link:var(--teal-700);

  --border-subtle:var(--line-200); --border-strong:var(--line-300); --border-focus:var(--teal-600);

  /* Fonts */
  --font-display:'Lora','Iowan Old Style','Georgia',serif;
  --font-body:'Nunito Sans','Segoe UI',sans-serif;
  --font-script:'Caveat',cursive;

  /* Sizes */
  --text-xs:0.8125rem; --text-sm:0.9375rem; --text-base:1.0625rem; --text-lg:1.25rem;
  --text-xl:1.5rem; --text-2xl:1.875rem; --text-3xl:2.375rem; --text-4xl:3rem; --text-5xl:3.75rem;

  /* Line-heights */
  --leading-display:1.15; --leading-heading:1.3; --leading-body:1.65; --leading-tight:1.05;

  /* Radius / shadow */
  --radius-sm:10px; --radius-md:16px; --radius-lg:22px; --radius-xl:30px; --radius-pill:999px;
  --shadow-sm:0 2px 8px rgba(61,42,82,0.06);
  --shadow-md:0 8px 24px rgba(61,42,82,0.10);
  --shadow-lg:0 20px 48px rgba(61,42,82,0.14);
  --shadow-focus:0 0 0 3px rgba(23,142,147,0.28);

  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --ease-out-soft:cubic-bezier(0.16,1,0.3,1);
  --duration-fast:150ms; --duration-base:220ms; --duration-slow:400ms;
}

/* ===================== BASE ===================== */
*{box-sizing:border-box;}
/* Rolagem suave ao clicar nos itens do menu + compensa o header fixo pra não cobrir o título da seção */
html{scroll-behavior:smooth; scroll-padding-top:88px;}
body{
  margin:0; background:var(--surface-page); color:var(--text-primary);
  font-family:var(--font-body); font-size:var(--text-base);
  line-height:var(--leading-body); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); line-height:var(--leading-heading); font-weight:600; color:var(--text-primary); margin:0;}
a{color:var(--text-link);}
img{max-width:100%; display:block;}

@keyframes lp-fade-up{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

/* ===================== DS COMPONENTS ===================== */
/* Button */
.btn{
  font-family:var(--font-body); font-weight:700; border:none; cursor:pointer;
  border-radius:var(--radius-pill);
  transition:transform var(--duration-base) var(--ease-out-soft),
             background var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard);
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; white-space:nowrap; flex-shrink:0; text-decoration:none;
}
.btn--md{padding:12px 24px; font-size:var(--text-base);}
.btn--lg{padding:16px 32px; font-size:var(--text-lg);}
.btn--primary{background:var(--color-primary); color:var(--text-on-primary); box-shadow:var(--shadow-sm);}
.btn--primary:hover{background:var(--color-primary-hover); transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn--outline{background:transparent; color:var(--color-primary); box-shadow:inset 0 0 0 1.5px var(--color-primary);}
.btn--outline:hover{background:var(--color-primary-tint); transform:translateY(-2px);}

/* Badge */
.badge{
  display:inline-flex; align-items:center; padding:4px 12px;
  border-radius:var(--radius-pill); font-family:var(--font-body);
  font-size:var(--text-xs); font-weight:700; letter-spacing:0.02em;
}
.badge--primary{background:var(--color-primary-tint); color:var(--teal-900);}
.badge--secondary{background:var(--color-secondary-tint); color:var(--violet-900);}
.badge--sun{background:var(--sunshine-100); color:#7A4F0A;}
.badge--coral{background:var(--coral-100); color:#9A3E1E;}

/* Card */
.card{background:var(--surface-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:24px;}

/* Image slot placeholder */
.img-slot{
  border-radius:var(--radius-xl); background:linear-gradient(135deg,var(--teal-100),var(--violet-100));
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--text-muted); font-size:var(--text-sm); padding:24px;
  border:1.5px dashed var(--border-strong);
}

/* Accordion */
.accordion-item{overflow:hidden;}
.accordion-head{display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer;}
.accordion-body{display:none;}
.accordion-item.open .accordion-body{display:block;}

/* ===================== HEADER / NAV ===================== */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(251,248,244,0.9); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border-subtle);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:16px 32px;
}
.brand{
  font-family:var(--font-script); font-size:30px; color:var(--color-primary);
  text-decoration:none; flex:none; line-height:1;
}
.site-nav{display:flex; align-items:center; gap:28px;}
.nav-link{
  font-family:var(--font-body); font-weight:600; font-size:var(--text-sm);
  color:var(--text-secondary); text-decoration:none; white-space:nowrap;
  padding:6px 2px; position:relative;
  transition:color var(--duration-base) var(--ease-standard);
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--color-primary); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--duration-base) var(--ease-out-soft);
}
.nav-link:hover{color:var(--color-primary);}
.nav-link:hover::after{transform:scaleX(1);}

.header-actions{display:flex; align-items:center; gap:12px; flex:none;}
.nav-toggle{
  display:none; background:transparent; border:none; cursor:pointer;
  color:var(--color-primary); padding:6px; border-radius:var(--radius-sm);
  align-items:center; justify-content:center;
}
.nav-toggle:hover{background:var(--color-primary-tint);}

/* Menu em versão mobile (hambúrguer) */
@media (max-width:900px){
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface-page);
    border-bottom:1px solid var(--border-subtle);
    box-shadow:var(--shadow-md);
    padding:8px 20px 16px; display:none;
  }
  .site-nav.open{display:flex;}
  .nav-link{padding:14px 4px; font-size:var(--text-base); border-bottom:1px solid var(--border-subtle);}
  .nav-link:last-child{border-bottom:none;}
  .nav-link::after{display:none;}
  .nav-toggle{display:inline-flex;}
}

/* Responsive */
@media (max-width:820px){
  /* Empilha todas as colunas */
  .row{flex-direction:column !important;}
  /* Evita overflow de min-widths quando empilhado */
  .row > div{min-width:0 !important; width:100% !important;}

  /* Espaçamento lateral e vertical mais enxuto */
  header{padding-left:18px !important; padding-right:18px !important;}
  section{padding-left:20px !important; padding-right:20px !important;
          padding-top:52px !important; padding-bottom:52px !important;}
  .hero{padding-top:32px !important; gap:28px !important;}

  /* Tipografia proporcional à tela */
  h1{font-size:2.25rem !important; line-height:1.18 !important;}
  h2{font-size:1.75rem !important; line-height:1.28 !important;}

  /* Botão do header compacto pra caber ao lado da logo */
  header .btn{padding:10px 16px !important; font-size:var(--text-sm) !important;}

  /* Botões grandes um pouco menores */
  .btn--lg{padding:14px 24px !important; font-size:var(--text-base) !important;}

  /* Cartões e imagens */
  .card{padding:22px !important;}
  section img{height:240px !important;}
  /* Exceção: a foto (retrato) da fundadora aparece inteira, sem corte */
  .founder-photo{height:auto !important; object-fit:contain !important;}
}

@media (max-width:480px){
  h1{font-size:1.95rem !important;}
  h2{font-size:1.55rem !important;}
  section{padding-top:44px !important; padding-bottom:44px !important;}
  section img{height:210px !important;}
  /* Botão do hero ocupa a largura toda pra facilitar o toque */
  .hero .btn--lg{width:100% !important;}
}