/* ============ CORES E FONTES ============ */
:root{
  --bg:#fffaf6;       /* fundo geral, um branco quente */
  --cream:#fdf0ea;    /* bege rosado: serviços e cartões */
  --pink:#fad6d7;     /* rosa claro, detalhes */
  --blue:#b7d8ff;     /* azul claro do céu */
  --sage:#a7c4a3;     /* verde suave do pontinho e do WhatsApp */
  --sun:#f6b48f;      /* laranja do sol */
  --brown:#4a2e25;    /* castanho escuro: botões e bloco de contacto */
  --ink:#2f2320;      /* cor do texto */
  --muted:#6f605a;    /* texto secundário, mais apagado */
  --line:#eadfd9;     /* linhas finas de separação */
  --accent:#8f554d;   /* castanho avermelhado do hover */
  --serif:'Fraunces',Georgia,serif;
  --sans:'Plus Jakarta Sans',system-ui,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.7 var(--sans)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid #48709e;outline-offset:4px;border-radius:6px}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:32px}
.skip{position:fixed;top:-100px;left:12px;background:var(--brown);color:#fff;padding:10px 16px;z-index:50}
.skip:focus{top:12px}

/* ============ TEXTOS ============ */
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
h1{font-size:clamp(2.8rem,5.4vw,4.6rem);line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:clamp(2rem,4vw,3rem);line-height:1.1;letter-spacing:-.03em}
.tagline{display:flex;align-items:center;gap:10px;margin:0 0 26px;font-size:.85rem;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--sage)}

/* ============ BOTÕES ============ */
.btn{display:inline-block;padding:15px 26px;border-radius:8px;font-size:.92rem;font-weight:600;border:1px solid transparent;transition:background .2s}
.btn-primary{background:var(--brown);color:#fff}      /* botão castanho */
.btn-ghost{border-color:#d9c8c0}                      /* botão só com contorno */
.btn-light{background:var(--bg);color:var(--brown)}   /* botão claro, usado sobre o fundo escuro */

/* ============ TOPO ============ */
.site-header.scrolled{box-shadow:0 10px 24px -18px #4a2e2570}   /* sombra suave quando a página desce */
.site-header{position:sticky;transition:box-shadow .25s;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px;padding:0 32px;max-width:1180px;margin:auto;background:#fffaf6ee;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{margin-right:auto;display:flex;align-items:center;gap:10px;font:500 1.35rem var(--serif);letter-spacing:-.03em}
.brand svg{width:30px;fill:none;stroke:var(--brown);stroke-width:2;stroke-linecap:round}
.light{font-weight:400;color:var(--muted)}
nav{display:flex;align-items:center;gap:28px;font-size:.9rem;font-weight:500}
nav a.on{color:var(--accent)}  /* link da secção onde estás fica destacado */
.nav-cta{padding:10px 20px;border-radius:8px;background:var(--brown);color:#fff}

/* botão de idioma PT | EN */
.lang{display:flex;padding:3px;border:1px solid var(--line);border-radius:30px;background:#fff;font-size:.78rem;font-weight:600}
.lang a{padding:8px 13px;border-radius:30px;line-height:1.2;color:var(--muted)}
.lang a[aria-current]{background:var(--brown);color:#fff}   /* idioma em que estás */

/* ============ INÍCIO ============ */
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:40px}
.intro{max-width:450px;margin:26px 0 0;color:var(--muted);font-size:1.08rem}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* cartão da foto: arco no topo e a foto a encher todo o espaço */
.sunrise{justify-self:end;width:100%;max-width:400px;border-radius:200px 200px 14px 14px;overflow:hidden;background:var(--cream);border:1px solid var(--line)}
.sky{aspect-ratio:400/390;background:linear-gradient(170deg,var(--blue),#eee5ed 52%,var(--pink))}   /* cor de fundo enquanto a foto carrega */
.sky img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0;animation:aparecer 1.4s cubic-bezier(.2,.8,.2,1) both}  /* 0 mantém a cabeça sempre visível */
@keyframes aparecer{from{opacity:0;transform:scale(1.06)}}   /* a foto aparece devagar ao abrir a página */
.sunrise-text{padding:28px 32px 30px}
.sunrise-text h2{font-size:clamp(1.5rem,3vw,2rem)}
.sunrise-text p{margin:10px 0 0;font-size:.92rem;color:var(--muted)}
.sunrise-text a{display:block;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:.88rem;font-weight:600}

/* ============ SECÇÕES ============ */
.section{padding-block:96px}
.about{display:grid;grid-template-columns:1fr 1.1fr;gap:80px}
.about-body p{margin:0 0 16px;max-width:560px;color:var(--muted)}
.about-body .lead{font:400 1.55rem/1.4 var(--serif);color:var(--ink);margin-bottom:24px}
.facts{list-style:none;margin:32px 0 0;padding:0}
.facts li{padding:16px 0;border-top:1px solid var(--line)}
.facts strong{display:block;font-weight:600;font-size:.95rem}
.facts span{display:block;font-size:.85rem;color:var(--muted)}
.facts .role{margin-top:4px;font-size:.78rem;color:#75655e}   /* cargo, em letra mais pequena por baixo */

/* serviços */
.services{background:var(--cream);border-block:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px}
.section-head>p{max-width:300px;margin:0;font-size:.95rem;color:var(--muted)}
.service-list article{display:flex;align-items:center;gap:32px;padding:30px 0;border-top:1px solid #e0d0c8}
.service-list article:last-child{border-bottom:1px solid #e0d0c8}
.service-list article>div{flex:1}
.service-list h3{font-size:1.6rem;letter-spacing:-.02em;margin-bottom:8px}
.service-list p{margin:0 0 16px;max-width:620px;font-size:.95rem;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{padding:3px 12px;border-radius:30px;background:#fff;border:1px solid #e0d0c8;font-size:.78rem}
.circle{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:30px;border:1px solid #cdb9af;font-size:.88rem;font-weight:600;white-space:nowrap;transition:background .2s,color .2s}  /* botão Conversar em forma de pílula */

/* packs */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{padding:11px 22px;border-radius:30px;border:1px solid var(--line);background:#fff;font-size:.85rem}
.filters button.active{background:var(--brown);border-color:var(--brown);color:#fff}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.product{display:flex;flex-direction:column;min-height:300px;padding:28px;border-radius:12px;border:1px solid var(--line)}
.product:nth-child(3n+1){background:var(--cream)}   /* rosado */
.product:nth-child(3n+2){background:#eef4fb}        /* azulado */
.product:nth-child(3n){background:#f2f6ec}          /* esverdeado */
.product .label{font-size:.8rem;font-weight:600;color:var(--muted)}
.product h3{font-size:1.65rem;line-height:1.15;letter-spacing:-.02em;margin:22px 0 12px}
.product p{margin:0 0 18px;font-size:.92rem;color:var(--muted)}
.product button{margin-top:0;padding:14px 0 0;border:0;border-top:1px solid #c5b6ad88;background:transparent;text-align:left;font-size:.88rem;font-weight:600}
/* etiquetas do cartão: formato (autoguiado, individual...) e estado */
.meta{display:flex;flex-wrap:wrap;gap:6px;margin:auto 0 20px}
.pill{padding:3px 12px;border-radius:30px;background:#fff;border:1px solid #e0d0c8;font-size:.76rem;font-weight:500}
.pill.soon{background:transparent;border-style:dashed;color:var(--muted)}
.note{margin-top:28px;font-size:.88rem;color:var(--muted)}

/* ============ CONTACTO (bloco escuro) ============ */
.connect{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:64px;border-radius:16px;background:var(--brown);color:#fff7f5;margin-bottom:96px}
.connect-copy p{margin:20px 0 32px;max-width:380px;color:#e6d3cb}
.links{align-self:center}
.links a,.links button{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid #ffffff26;font-size:1.05rem}
.links a:first-child{border-top:1px solid #ffffff26}
.links button{width:100%;background:none;border:0;border-bottom:1px solid #ffffff26;color:inherit;text-align:left;font-family:inherit;line-height:inherit}
.links small{display:block;font-size:.75rem;color:#c9b4aa}

.tabbar{display:none}

/* ============ RODAPÉ E WHATSAPP FIXO ============ */
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:30px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.site-footer .brand{font-size:1.15rem;color:var(--ink)}
.whats{position:fixed;right:20px;bottom:20px;z-index:20;padding:13px 22px;border-radius:30px;background:#2f5d3a;color:#fff;font-size:.88rem;font-weight:600;box-shadow:0 8px 20px -8px #0000006a}

/* ============ JANELA DOS PACKS ============ */
dialog{position:fixed;inset:0;margin:auto;max-width:540px;width:calc(100% - 32px);max-height:calc(100dvh - 24px);overflow:auto;padding:40px;border:1px solid var(--line);border-radius:14px;background:var(--cream);color:var(--ink)}
dialog[open]{animation:abrir .25s ease}
dialog::backdrop{background:#2f232080;backdrop-filter:blur(5px)}  /* fundo escurecido atrás da janela */
dialog h2{font-size:2.2rem;margin-bottom:12px}
dialog p:not(.tagline){color:var(--muted)}
#dialog-details{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.92rem;color:var(--muted)}
.price{margin:18px 0 0;padding:14px 18px;border-radius:10px;background:#fff;border:1px solid var(--line)}   /* caixa do valor na janela */
.price small{display:block;font-size:.75rem;color:var(--muted)}
.price strong{font-weight:600;font-size:1rem}
.status{margin:14px 0 0;font-size:.85rem;color:var(--accent)}
dialog .btn{margin-top:24px}
.close{position:absolute;top:14px;right:16px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;font-size:1.8rem;line-height:1}
@keyframes abrir{from{opacity:0;transform:translateY(12px)}}
/* formulário de contacto */
#contact-form{margin-top:22px}
#contact-form label{display:block;margin:14px 0 6px;font-size:.82rem;font-weight:600;color:var(--ink)}
#contact-form input:not(.hp),#contact-form textarea{width:100%;padding:13px 14px;border:1px solid #d9c8c0;border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:1rem}
#contact-form textarea{resize:vertical;min-height:120px}
#contact-form input.invalid,#contact-form textarea.invalid{border-color:#b3382c}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-status{margin:14px 0 0;font-size:.9rem;color:var(--accent)}
.form-status.ok{color:#2f5d3a}
.form-status a{text-decoration:underline}
#contact-send[disabled]{opacity:.6;cursor:wait}
[hidden]{display:none!important}   /* serve para esconder os packs no filtro */

/* ============ HOVER: só com rato ============ */
/* no telemóvel o hover ficava "preso" depois do toque e estragava as cores dos botões */
@media(hover:hover){
  .btn-primary:hover{background:#6a4034}
  .btn-ghost:hover{background:var(--cream)}
  .btn-light:hover{background:var(--pink)}
  .nav-cta:hover{background:#6a4034}
  .sunrise-text a:hover{color:var(--accent)}
  .circle:hover{background:var(--brown);color:#fff}
  .filters button:not(.active):hover{background:var(--cream)}
  .product button:hover{color:var(--accent)}
  .links a:hover,.links button:hover{color:var(--pink)}
  .whats:hover{background:#3b7348}
  .close:hover{background:#fff}
  nav a:not(.nav-cta):hover{color:var(--accent)}
  .lang a:not([aria-current]):hover{color:var(--brown)}
}
/* no telemóvel o feedback é ao tocar */
.btn:active,.circle:active,.filters button:active,.product button:active,.tabbar a:active,.whats:active{opacity:.8;transform:scale(.98)}
a,button{-webkit-tap-highlight-color:transparent}

/* ============ TABLET ============ */
@media(max-width:900px){
  .hero{grid-template-columns:1.15fr 1fr;gap:32px;padding-top:48px}   /* mantém duas colunas, só empilha no telemóvel */
  .about,.connect{grid-template-columns:1fr;gap:40px}
  .products{grid-template-columns:repeat(2,1fr)}
  .connect{padding:44px 32px}
}

/* ============ TELEMÓVEL ============ */
@media(max-width:700px){
  body{padding-bottom:96px}                 /* espaço para a barra de baixo não tapar o fim da página */
  .wrap{padding-inline:20px}
  .site-header{height:64px;padding:0 20px}
  nav,.whats{display:none}        /* no telemóvel quem navega é a barra de baixo */

  /* barra de baixo com cantos redondos, em cima do conteúdo */
  .tabbar{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:2px;padding:6px;border-radius:22px;background:#fffaf6ee;backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 14px 30px -12px #4a2e2575}
  .tabbar a{flex:1;padding:12px 2px;border-radius:16px;text-align:center;font-size:.74rem;font-weight:600;color:var(--muted)}
  .tabbar a.on{background:var(--cream);color:var(--brown)}   /* separador da secção atual */
  .tabbar .tab-whats{flex:1.35;margin-left:4px;background:var(--brown);color:#fff}

  /* INÍCIO: o cartão do sol passa para cima, como uma faixa */
  .hero{display:flex;flex-direction:column;gap:30px;padding-top:16px;padding-bottom:8px}
  .sunrise{order:-1;max-width:none;justify-self:stretch;border-radius:175px 175px 26px 26px}
  .sky{aspect-ratio:1/1}
  .sunrise-text{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px}
  .sunrise-text h2{font-size:1.25rem;white-space:nowrap}
  .sunrise-text .long{display:none}   /* no telemóvel o link fica só LinkedIn */
  .sunrise-text p{display:none}
  .sunrise-text a{margin:0;padding:0;border:0;font-size:.82rem;white-space:nowrap}
  h1{font-size:2.9rem}
  .intro{font-size:1rem;margin-top:20px}
  .actions{flex-direction:column;margin-top:28px}
  .btn{width:100%;text-align:center;padding:16px}

  .section{padding-block:56px}
  .section-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:28px}
  h2{font-size:2.1rem}

  /* SOBRE: os três blocos viram cartões */
  .about{gap:28px}
  .about-body .lead{font-size:1.3rem}
  .facts{display:grid;gap:10px}
  .facts li{padding:16px 18px;border:0;border-radius:14px;background:var(--cream)}

  /* SERVIÇOS: cada um é um cartão branco com botão por baixo */
  .service-list article{flex-direction:column;align-items:stretch;gap:18px;padding:24px;margin-bottom:14px;border:1px solid #e8d9d1;border-radius:18px;background:#fff}
  .service-list article:last-child{border-bottom:1px solid #e8d9d1}
  .service-list h3{font-size:1.35rem}
  .circle{height:50px;border:0;border-radius:12px;background:var(--brown);color:#fff;font-size:.92rem}   /* no telemóvel ocupa a largura toda do cartão */

  /* PACKS: filtros e cartões deslizam para o lado */
  .filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding:0 20px 4px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex-shrink:0}
  .products{display:flex;gap:14px;overflow-x:auto;margin-inline:-20px;padding:4px 20px 18px;scroll-snap-type:x mandatory;scroll-padding-left:20px;scrollbar-width:none}
  .products::-webkit-scrollbar{display:none}
  .product{flex:0 0 80%;min-height:270px;scroll-snap-align:start}   /* o cartão seguinte espreita para mostrar que dá para deslizar */
  .product h3{font-size:1.5rem}

  /* CONTACTO */
  .connect{gap:32px;padding:34px 22px;border-radius:24px;margin-bottom:48px}
  .links a,.links button{font-size:1rem}

  .site-footer{flex-direction:column;gap:8px;text-align:center}

  /* a janela dos packs sobe de baixo, como uma gaveta */
  dialog{inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:88vh;overflow:auto;padding:32px 22px calc(28px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0}
  dialog[open]{animation:subir .3s ease}
  dialog h2{font-size:1.9rem}
  dialog .btn{width:100%}
  @keyframes subir{from{transform:translateY(100%)}}
}

/* quem desactiva animações não vê a foto a aparecer */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}