/* ═══════════════════════════════════════════════════════════════
   Design em Família — Design System
   Paleta suave: rosa quartzo, lavanda, sage, pêssego, creme
   Tipografia: Playfair Display (títulos) + Lato (corpo)
   Herdado e simplificado a partir de HumanDesignMaternidade
═══════════════════════════════════════════════════════════════ */

:root {
  /* cores */
  --rose:            #e0a598;
  --rose-light:      #f3d8d1;
  --rose-dark:       #b97566;
  --rose-pale:       #fdf1ee;
  --lavender:        #b9a5cf;
  --lavender-light:  #e4dbef;
  --lavender-pale:   #f6f2fb;
  --sage:            #93b299;
  --sage-light:      #c9dece;
  --sage-pale:       #eff6f1;
  --peach:           #edc3a2;
  --peach-pale:      #fdf5ee;
  --cream:           #fdf8f2;
  --warm-white:      #fffdfa;
  --line:            #ece1dc;
  --dark:            #3b332e;
  --text:            #4d4340;
  --text-light:      #837571;

  /* tipografia */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Lato', system-ui, -apple-system, sans-serif;

  /* espaço */
  --s-xs: .25rem; --s-sm: .5rem;  --s-md: 1rem;
  --s-lg: 1.5rem; --s-xl: 2rem;   --s-2xl: 3rem; --s-3xl: 4.5rem;

  /* forma */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full: 9999px;
  --shadow-sm: 0 2px 10px rgba(59,51,46,.05);
  --shadow-md: 0 6px 26px rgba(59,51,46,.09);
  --shadow-lg: 0 14px 48px rgba(59,51,46,.13);
  --t: .25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--warm-white);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--dark); line-height: 1.25; font-weight: 600; }

/* O <FocusOnNavigate> do Routes.razor põe o foco no <h1> quando se muda de página, para
   quem usa leitor de ecrã ouvir logo onde chegou. Para o título poder receber foco, o
   Blazor acrescenta-lhe tabindex="-1" — e aí o browser desenha à volta o retângulo preto
   do foco, que aparecia por cima da primeira frase do site.

   Tira-se o retângulo e mantém-se o foco: um título não é um botão, o anel não diz nada a
   quem vê, e o leitor de ecrã continua a anunciar a página na mesma. O seletor é o mais
   apertado possível — só apanha o tabindex que o Blazor põe, e nunca um elemento em que
   se tenha carregado. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible { outline: none; }

a { color: var(--rose-dark); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--rose); }
img { max-width: 100%; display: block; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--s-lg); }
.container--narrow { max-width: 760px; }

/* ── Navbar ─────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,253,250,.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-lg); padding: var(--s-md) 0; }
.nav__brand { display: flex; align-items: center; gap: .55rem; font-family: var(--font-serif); font-size: 1.15rem; color: var(--dark); font-weight: 600; }
.nav__brand-mark { color: var(--rose); font-size: 1.35rem; line-height: 1; }
.nav__menu { display: flex; align-items: center; gap: var(--s-xs); list-style: none; }
.nav__link { padding: .4rem .8rem; border-radius: var(--r-full); font-size: .95rem; color: var(--text); }
.nav__link:hover { background: var(--rose-pale); color: var(--rose-dark); }
.nav__link--cta { background: var(--rose); color: #fff; font-weight: 700;}
.nav__link--cta:hover { background: var(--rose-dark); color: #fff; }

/* «Sair» é um botão dentro de um formulário, e não um link: sair por GET deixava um site
   qualquer terminar a sessão com uma imagem. Por fora tem de parecer igual aos links. */
.nav__form { display: contents; }
.nav__link--button { border: 0; background: transparent; font-family: inherit; line-height: inherit; cursor: pointer; }

/* O botão do menu de telemóvel. Escondido em ecrã grande, onde a lista já cabe toda. */
.nav__switch { position: absolute; opacity: 0; width: 0; height: 0; }
.nav__burger { display: none; }
.nav__burger span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--dark); transition: all var(--t);
}

/* ── Botões ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.6rem; border-radius: var(--r-full);
  font-family: var(--font-sans); font-size: .95rem; font-weight: 700;
  border: 2px solid transparent; cursor: pointer; transition: all var(--t);
}
.btn--primary { background: var(--rose); border-color: var(--rose); color: #fff; }
.btn--primary:hover { background: var(--rose-dark); border-color: var(--rose-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; border-color: var(--rose-light); color: var(--rose-dark); }
.btn--ghost:hover { background: var(--rose-pale); border-color: var(--rose); }
.btn--lg { padding: .9rem 2.1rem; font-size: 1.02rem; }
.btn--sm { padding: .45rem 1.05rem; font-size: .88rem; }

/* ── Secções ────────────────────────────────────────────── */
.section { padding: var(--s-3xl) 0; }
.section--tint { background: var(--cream); }
.section__eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--rose-dark); margin-bottom: var(--s-sm);
}
.section__title { font-size: clamp(1.7rem, 3.2vw, 2.35rem); margin-bottom: var(--s-md); }
.section__lead { font-size: 1.08rem; color: var(--text-light); max-width: 58ch; }
.section__head { margin-bottom: var(--s-2xl); }
.section__head--center { text-align: center; }
.section__head--center .section__lead { margin-inline: auto; }
/* Para páginas que se usam, e não só se leem: o título encosta ao que vem a seguir. */
.section__head--tight { margin-bottom: var(--s-md); }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  padding: var(--s-3xl) 0;
  background:
    radial-gradient(900px 420px at 8% -10%, var(--lavender-pale) 0%, transparent 62%),
    radial-gradient(760px 380px at 96% 4%, var(--peach-pale) 0%, transparent 58%),
    linear-gradient(170deg, var(--rose-pale) 0%, var(--warm-white) 72%);
  border-bottom: 1px solid var(--line);
}
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-2xl); align-items: center; }
.hero__badge {
  display: inline-block; background: #fff; color: var(--rose-dark);
  padding: .35rem 1.05rem; border-radius: var(--r-full);
  font-size: .82rem; font-weight: 700; box-shadow: var(--shadow-sm);
  margin-bottom: var(--s-lg);
}
.hero__title { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: var(--s-md); }
.hero__title em { font-style: normal; color: var(--rose-dark); }
.hero__lead { font-size: 1.15rem; color: var(--text-light); max-width: fit-content; margin-bottom: var(--s-xl); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-md); }

/* ── Cartões ────────────────────────────────────────────── */
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-xl);
  box-shadow: var(--shadow-sm); transition: all var(--t);
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--rose-light); }
.card__icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--rose-pale);
  font-size: 1.35rem; margin-bottom: var(--s-md);
}
.card__title { font-size: 1.2rem; margin-bottom: var(--s-sm); }
.card__text { color: var(--text-light); font-size: .96rem; }
.card--compact { padding: var(--s-lg); }
/* Os botões de um cartão numa linha: o principal encostado à esquerda, o outro à direita.
   Um por baixo do outro pareciam colados, e gastavam uma altura inteira de cartão. */
.card__actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-sm); flex-wrap: wrap; margin-top: var(--s-md);
}

.grid { display: grid; gap: var(--s-lg); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Listas longas de coisas curtas — as portas. `auto-fill` e não `auto-fit`: com poucas,
   os cartões ficam do tamanho deles em vez de esticarem a linha toda. */
.grid--5 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid--tight { gap: var(--s-sm); }

/* ── Duas colunas ────────────────────────────────────────── */
/* Em ecrã grande, o formulário fica de um lado e o resto do outro, em vez de tudo numa
   coluna estreita ao meio com espaço vazio dos lados. Abaixo de 860px volta a ser uma
   coluna só. `minmax(0, …)` e não `1fr`: sem ele, um cartão com texto comprido empurrava
   a coluna para fora do ecrã. */
.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-xl); align-items: start; }
.split--aside-first { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }

/* ── Cartão de conceito (tipo, centro, perfil) ──────────── */
.concept {
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-lg);
  box-shadow: var(--shadow-sm); transition: all var(--t);
  border-top: 4px solid var(--rose-light);
}
a.concept:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-top-color: var(--rose); }
.concept--lavender { border-top-color: var(--lavender-light); }
a.concept--lavender:hover { border-top-color: var(--lavender); }
.concept--sage { border-top-color: var(--sage-light); }
a.concept--sage:hover { border-top-color: var(--sage); }
.concept--peach { border-top-color: var(--peach); }
/* A versão curta, para listas longas — os canais e as portas. Só o nome. */
.concept--compact { padding: var(--s-sm) var(--s-md); border-top-width: 3px; border-radius: var(--r-md); }
.concept--compact .concept__name { font-size: .95rem; margin-bottom: 0; }
.concept__glyph { font-size: 1.75rem; margin-bottom: var(--s-sm); }
.concept__name { font-size: 1.1rem; color: var(--dark); margin-bottom: .25rem; }
.concept__meta { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); margin-bottom: var(--s-sm); }
.concept__desc { font-size: .93rem; color: var(--text-light); }

/* ── Lentes (criança / mim) ─────────────────────────────── */
.lens {
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-full);
}
.lens__btn {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: .9rem; font-weight: 700;
  color: var(--text-light); padding: .45rem 1.2rem;
  border-radius: var(--r-full); transition: all var(--t);
}
.lens__btn[aria-pressed="true"] { background: #fff; color: var(--rose-dark); box-shadow: var(--shadow-sm); }

/* ── Língua (só na área de escrita) ─────────────────────── */
/* A mesma pastilha das lentes, mas bloco próprio de propósito: na
   página de escrita aparecem as duas ao mesmo tempo, e um seletor
   que apanhasse as duas era um erro à espera de acontecer. */
.lang {
  display: inline-flex; padding: 4px; gap: 4px;
  margin-bottom: var(--s-lg);
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-full);
}
.lang__btn {
  border: 0; background: transparent; cursor: pointer; text-decoration: none;
  font-family: var(--font-sans); font-size: .9rem; font-weight: 700;
  color: var(--text-light); padding: .45rem 1.2rem;
  border-radius: var(--r-full); transition: all var(--t);
}
.lang__btn[aria-pressed="true"] { background: #fff; color: var(--rose-dark); box-shadow: var(--shadow-sm); }

/* ── Bloco de secção de ficha ───────────────────────────── */
.entry { border-top: 1px solid var(--line); padding: var(--s-xl) 0; }
.entry:first-of-type { border-top: 0; }
.entry__label {
  font-family: var(--font-sans); /* também serve de título (h2) em cartões, e os títulos são serifados */
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rose-dark); margin-bottom: var(--s-sm);
}
.entry__title { font-size: 1.35rem; margin-bottom: var(--s-md); }
.entry p + p { margin-top: var(--s-md); }

.callout {
  background: var(--sage-pale); border-left: 4px solid var(--sage);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-lg); margin: var(--s-lg) 0;
}
.callout--warn { background: var(--peach-pale); border-left-color: var(--peach); }
.callout--quote {
  background: var(--lavender-pale); border-left-color: var(--lavender);
  font-family: var(--font-serif); font-size: 1.15rem; color: var(--dark); font-style: italic;
}
.callout__label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-light); margin-bottom: var(--s-xs); font-style: normal; font-family: var(--font-sans); }

/* lista de idades */
.ages { list-style: none; display: grid; gap: var(--s-md); }
.ages li { display: grid; grid-template-columns: 116px 1fr; gap: var(--s-md); align-items: start; }
.ages__age { font-weight: 700; color: var(--rose-dark); font-size: .88rem; padding-top: .2rem; }

/* ── Formulário ─────────────────────────────────────────── */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.panel__head { padding: var(--s-lg); background: var(--rose-pale); border-bottom: 1px solid var(--line); text-align: center; }
.panel__head--lavender { background: var(--lavender-pale); }
.panel__glyph { font-size: 1.9rem; }
.panel__title { font-size: 1.15rem; margin-top: var(--s-xs); }
.panel__sub { font-size: .88rem; color: var(--text-light); }
.panel__body { padding: var(--s-xl); }
.field { margin-bottom: var(--s-lg); }
.field__label { display: block; font-weight: 700; font-size: .87rem; color: var(--dark); margin-bottom: var(--s-xs); }
.field__input {
  width: 100%; padding: .75rem 1rem; border-radius: var(--r-md);
  border: 1px solid var(--line); font-family: var(--font-sans); font-size: .95rem;
  color: var(--text); background: var(--warm-white); transition: all var(--t);
}
.field__input:focus { outline: 0; border-color: var(--rose); box-shadow: 0 0 0 4px var(--rose-pale); }
/* A regra dita antes de se escrever, e não como erro depois de se carregar em guardar. */
.field__hint { font-size: .84rem; color: var(--text-light); margin: var(--s-xs) 0 0; }
/* Dois campos curtos lado a lado — a data e a hora. Poupam uma altura inteira de
   formulário, e cabem os dois até num telemóvel. */
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-md); }

/* ── Caixa de procura do sítio de nascimento ─────────────── */
/* Só aparece se o JavaScript correr; sem ele fica a lista completa. */
.lugar { position: relative; }

.lugar__lista {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: var(--s-xs); list-style: none;
  max-height: 17rem; overflow-y: auto; overscroll-behavior: contain;
  background: var(--warm-white); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
}

.lugar__opcao {
  display: block; padding: .55rem .7rem; border-radius: var(--r-sm); cursor: pointer;
}
.lugar__opcao[aria-selected="true"] { background: var(--rose-pale); }

.lugar__nome { display: block; font-weight: 700; font-size: .93rem; color: var(--dark); }
.lugar__detalhe { display: block; font-size: .8rem; color: var(--text-light); }

.lugar__escolhido {
  margin: var(--s-xs) 0 0; font-size: .82rem; color: var(--text-light);
}

/* ── Resultado / comparação ─────────────────────────────── */
.person { text-align: center; }
.person__avatar {
  width: 64px; height: 64px; margin: 0 auto var(--s-sm);
  border-radius: var(--r-full); display: grid; place-items: center;
  font-size: 1.7rem; background: var(--rose-pale);
}
.person__avatar--child { background: var(--sage-pale); }
.person__name { font-size: 1.25rem; }
.person__type { color: var(--rose-dark); font-weight: 700; font-size: .95rem; letter-spacing: .04em; }
.person__type--child { color: var(--sage); }

.stats { list-style: none; display: grid; gap: .1rem; margin-top: var(--s-md); text-align: left; }
.stats li { display: flex; justify-content: space-between; gap: var(--s-md); padding: .5rem 0; border-bottom: 1px dashed var(--line); font-size: .93rem; }
.stats li:last-child { border-bottom: 0; }
.stats dt, .stats__k { color: var(--text-light); }
.stats__v { font-weight: 700; color: var(--dark); }

.tag {
  display: inline-block; padding: .22rem .8rem; border-radius: var(--r-full);
  font-size: .78rem; font-weight: 700; letter-spacing: .03em;
}
.tag--rose { background: var(--rose-pale); color: var(--rose-dark); }
.tag--sage { background: var(--sage-pale); color: #4f7256; }
.tag--lavender { background: var(--lavender-pale); color: #6a5384; }

/* ── Rodapé ─────────────────────────────────────────────── */
.footer { background: var(--cream); border-top: 1px solid var(--line); padding: var(--s-2xl) 0 var(--s-xl); margin-top: var(--s-3xl); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-xl); margin-bottom: var(--s-xl); }
.footer h4 { font-family: var(--font-sans); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-light); margin-bottom: var(--s-sm); }
.footer ul { list-style: none; display: grid; gap: .35rem; font-size: .94rem; }
.footer__bottom { border-top: 1px solid var(--line); padding-top: var(--s-md); font-size: .85rem; color: var(--text-light); display: flex; justify-content: space-between; gap: var(--s-md); flex-wrap: wrap; }

/* ── Responsivo ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }

  /* Aqui a lista não cabe ao lado da marca, por isso desce para baixo dela e só
     aparece quando o botão está carregado. Antes desaparecia e mais nada — quem
     entrava pelo telemóvel ficava sem menu nenhum. */
  .nav__inner { flex-wrap: wrap; gap: var(--s-sm); }
  .nav__burger {
    display: flex; flex-direction: column; gap: 5px;
    padding: .55rem; margin: -.55rem; cursor: pointer; border-radius: var(--r-md);
  }
  .nav__switch:focus-visible ~ .nav__burger { outline: 2px solid var(--rose); outline-offset: 2px; }
  .nav__switch:checked ~ .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__switch:checked ~ .nav__burger span:nth-child(2) { opacity: 0; }
  .nav__switch:checked ~ .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav__menu { display: none; flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
  .nav__switch:checked ~ .nav__menu { display: flex; padding-bottom: var(--s-sm); }
  .nav__menu .nav__link { display: block; padding: .7rem .9rem; border-radius: var(--r-md); }
  .nav__menu .nav__link--cta { text-align: center; margin-top: var(--s-xs); border-radius: var(--r-full); }
  .nav__menu .nav__link--button { width: 100%; text-align: left; }
  .ages li { grid-template-columns: 1fr; gap: var(--s-xs); }
  .section { padding: var(--s-2xl) 0; }
  .split, .split--aside-first { grid-template-columns: minmax(0, 1fr); }
}


/* ── Erro do Blazor ─────────────────────────────────────── */
#blazor-error-ui {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  background: var(--peach-pale); border-top: 1px solid var(--peach);
  padding: var(--s-md) var(--s-lg); font-size: .92rem; color: var(--dark);
  box-shadow: var(--shadow-md);
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ── Ficha pública: troca de lentes sem JavaScript ───────── */
/* Os radios ficam escondidos; as labels são os botões; o painel
   correspondente aparece pelo seletor irmão. Zero circuito. */
.lens__radio { position: absolute; opacity: 0; pointer-events: none; }
.lens__btn { cursor: pointer; }
#lente-crianca:checked ~ .lens-bar label[for="lente-crianca"],
#lente-adulto:checked ~ .lens-bar label[for="lente-adulto"] {
  background: #fff;
  color: var(--rose-dark);
  box-shadow: var(--shadow-sm);
}
#lente-crianca:focus-visible ~ .lens-bar label[for="lente-crianca"],
#lente-adulto:focus-visible ~ .lens-bar label[for="lente-adulto"] {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

.lens-pane { display: none; }
#lente-crianca:checked ~ * .lens-pane--crianca,
#lente-adulto:checked ~ * .lens-pane--adulto { display: block; }

.lens-bar {
  position: sticky; top: 57px; z-index: 20;
  padding: var(--s-md) 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255,253,250,.96);
  backdrop-filter: blur(12px);
}
.lens-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-md); flex-wrap: wrap;
}
.lens-bar__hint { font-size: .87rem; color: var(--text-light); }

.breadcrumb { font-size: .87rem; color: var(--text-light); margin-bottom: var(--s-md); }
.breadcrumb a { color: var(--text-light); }