/* Fontes self-hosted — sem ligacao a terceiros, sem render-blocking externo */
@font-face{
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/karla-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/karla-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/marcellus-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/marcellus-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =========================================================
   Andreia Reis — Tratamentos Faciais & Corporais
   Mundo visual: cal (caiacao) do Algarve + barra pintada
   Assinatura: renda das chamines algarvias
   Mobile-first. Sem dependencias.
   ========================================================= */

:root{
  /* --- cor --- */
  --cal:      #F5F3EE;
  --cal-2:    #EDEAE2;
  --sal:      #FFFFFF;
  --tinta:    #14302B;
  --barra:    #2C5C54;
  --pedra:    #5E6C66;
  --ocre:     #8F6118;
  --ocre-luz: #E3B667;
  --fio:      rgba(20,48,43,.10);
  --fio-c:    rgba(245,243,238,.14);

  --fonte-titulo: "Marcellus", "Iowan Old Style", Georgia, serif;
  --fonte-texto:  "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- espaco (4/8) --- */
  --e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem; --e5:1.25rem;
  --e6:1.5rem; --e8:2rem; --e10:2.5rem; --e12:3rem; --e16:4rem; --e20:5rem;

  --env: min(100% - 2.75rem, 1220px);
  --sp: clamp(4.5rem, 12vw, 9rem);

  /* --- forma --- */
  --r-card: 22px;
  --r-img: 18px;
  --r-pill: 999px;

  /* --- profundidade (difusa, nunca dura) --- */
  --sombra-1: 0 1px 2px rgba(20,48,43,.03), 0 10px 30px -18px rgba(20,48,43,.20);
  --sombra-2: 0 2px 4px rgba(20,48,43,.04), 0 26px 50px -24px rgba(20,48,43,.30);

  /* --- movimento --- */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-mov: cubic-bezier(.77, 0, .175, 1);
  --ease-gav: cubic-bezier(.32, .72, 0, 1);
  --t-toque: 140ms;
  --t-ui: 220ms;

  --barra-larg: 0px;
  --bar-baixo: 64px;

  --z-grao:95; --z-barra:80; --z-accao:70; --z-topo:60; --z-gaveta:55;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; }

body{
  margin:0;
  background:var(--cal);
  color:var(--tinta);
  font-family:var(--fonte-texto);
  font-size:1.0625rem;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
  padding-bottom:calc(var(--bar-baixo) + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color:transparent;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
svg{ flex:none; }

:focus-visible{ outline:2px solid var(--barra); outline-offset:3px; border-radius:4px; }
.secao--escura :focus-visible,
.gaveta :focus-visible,
.rodape :focus-visible{ outline-color:var(--ocre-luz); }

/* ---------- Grao de filme (fixo, nunca sobre scroll) ---------- */
.grao{
  position:fixed; inset:0; z-index:var(--z-grao);
  pointer-events:none;
  background:url(../img/grao.svg);
  opacity:.05;
}

/* ---------- Tipografia ---------- */
h1,h2,h3{
  font-family:var(--fonte-titulo);
  font-weight:400;
  margin:0;
  overflow-wrap:break-word;
}
h1{ font-size:clamp(2.6rem, 8.8vw, 4.7rem); line-height:1; letter-spacing:-.022em; }
h2{ font-size:clamp(2rem, 6.4vw, 3.1rem); line-height:1.05; letter-spacing:-.018em; }
h3{ font-size:clamp(1.24rem, 4.4vw, 1.45rem); line-height:1.22; letter-spacing:-.008em; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
h1.titulo-pagina{
  font-size:clamp(2rem, 6.4vw, 3.1rem); line-height:1.05; letter-spacing:-.018em;
}
h2 + p, h2 + .entrada,
.titulo-pagina + p, .titulo-pagina + .entrada{ margin-top:var(--e5); }
h3 + p{ margin-top:var(--e2); }

.sobrescrito{
  display:flex; align-items:center; gap:var(--e2);
  font-size:.68rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ocre);
  margin:0 0 var(--e5);
}
.sobrescrito::before{
  content:""; width:18px; height:18px; flex:none;
  background:currentColor;
  -webkit-mask:url(../img/renda.svg) 0 0 / 18px 18px repeat;
  mask:url(../img/renda.svg) 0 0 / 18px 18px repeat;
}
.sobrescrito--claro{ color:var(--ocre-luz); }

.entrada{
  font-size:clamp(1.08rem, 3.8vw, 1.26rem);
  color:var(--pedra);
  line-height:1.62;
  max-width:56ch;
}
.secao--escura .entrada{ color:rgba(245,243,238,.74); }

.env{ width:var(--env); margin-inline:auto; }
.secao{ padding-block:var(--sp); }
.secao--cal2{ background:var(--cal-2); }
.secao--escura{ background:var(--tinta); color:var(--cal); }

/* ---------- Barra pintada (assinatura, ecra largo) ---------- */
.barra-lateral{ display:none; }

/* ---------- Cabecalho: ilha flutuante ---------- */
.topo{
  position:sticky; top:0; z-index:var(--z-topo);
  padding:var(--e3) 0;
  pointer-events:none;
}
.topo__int{
  width:var(--env); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e4);
  padding:var(--e2) var(--e2) var(--e2) var(--e4);
  min-height:56px;
  border-radius:var(--r-pill);
  background:rgba(245,243,238,.72);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  box-shadow:0 1px 1px rgba(20,48,43,.03), 0 14px 34px -22px rgba(20,48,43,.45);
  pointer-events:auto;
  transition:box-shadow var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out);
}
.topo[data-colado="true"] .topo__int{
  background:rgba(245,243,238,.9);
  box-shadow:0 1px 1px rgba(20,48,43,.04), 0 18px 40px -22px rgba(20,48,43,.6);
}
.marca{ display:flex; align-items:center; gap:var(--e2); text-decoration:none; line-height:1; }
.marca__selo{ width:24px; height:24px; flex:none; }
.marca__txt{ display:flex; flex-direction:column; gap:3px; }
.marca__nome{ font-family:var(--fonte-titulo); font-size:1.08rem; letter-spacing:.005em; }
.marca__sub{
  display:none; white-space:nowrap;
  font-size:.56rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pedra);
}
.nav-desktop{ display:none; }

.menu-botao{
  display:inline-flex; align-items:center; gap:var(--e2);
  min-height:44px; padding:0 var(--e2) 0 var(--e4);
  background:none; border:0; cursor:pointer;
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  touch-action:manipulation;
  transition:transform var(--t-toque) var(--ease-out);
}
.menu-botao:active{ transform:scale(.96); }
.menu-botao__linhas{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:var(--r-pill);
  background:rgba(20,48,43,.06);
  position:relative;
}
.menu-botao__linhas::before,
.menu-botao__linhas::after{
  content:""; position:absolute; left:11px; right:11px; height:1.5px;
  background:var(--tinta);
  transition:transform 260ms var(--ease-out), top 260ms var(--ease-out);
}
.menu-botao__linhas::before{ top:15px; }
.menu-botao__linhas::after{ top:20px; }
.menu-botao[aria-expanded="true"] .menu-botao__linhas::before{ top:17.5px; transform:rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__linhas::after{ top:17.5px; transform:rotate(-45deg); }

/* ---------- Gaveta ---------- */
.gaveta{
  position:fixed; inset:0; z-index:var(--z-gaveta);
  background:rgba(20,48,43,.96);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  color:var(--cal);
  padding:calc(72px + var(--e8)) 0 calc(var(--bar-baixo) + var(--e8));
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition:opacity 300ms var(--ease-out), visibility 300ms;
  overflow-y:auto; overscroll-behavior:contain;
}
.gaveta[data-aberta="true"]{ opacity:1; visibility:visible; }
.gaveta__lista{ list-style:none; margin:0; padding:0; width:var(--env); margin-inline:auto; }
.gaveta__lista li{
  opacity:0; transform:translateY(14px);
  transition:opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  transition-delay:calc(var(--i, 0) * 45ms);
}
.gaveta[data-aberta="true"] .gaveta__lista li{ opacity:1; transform:none; }
.gaveta__lista a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e4);
  min-height:60px; padding:var(--e2) 0;
  font-family:var(--fonte-titulo); font-size:2rem; letter-spacing:-.015em;
  text-decoration:none;
  border-bottom:1px solid var(--fio-c);
}
.gaveta__lista a[aria-current="page"]{ color:var(--ocre-luz); }
.gaveta__lista a span{
  font-family:var(--fonte-texto); font-size:.62rem; font-weight:600;
  letter-spacing:.2em; color:rgba(245,243,238,.4);
}
.gaveta__pe{
  width:var(--env); margin-inline:auto; margin-top:auto; padding-top:var(--e8);
  font-size:.94rem; color:rgba(245,243,238,.68);
  opacity:0; transition:opacity 400ms var(--ease-out) 220ms;
}
.gaveta[data-aberta="true"] .gaveta__pe{ opacity:1; }
.gaveta__pe a{ color:var(--ocre-luz); }

/* ---------- Botoes: ilha com icone encaixado ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:var(--e4);
  min-height:52px; padding:0 var(--e2) 0 var(--e6);
  border-radius:var(--r-pill); border:1px solid transparent;
  font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  touch-action:manipulation;
  transition:transform var(--t-toque) var(--ease-out),
             background-color var(--t-ui) var(--ease-out),
             color var(--t-ui) var(--ease-out),
             border-color var(--t-ui) var(--ease-out),
             box-shadow var(--t-ui) var(--ease-out);
}
.btn:active{ transform:scale(.975); }
.btn__ico{
  display:grid; place-items:center;
  width:38px; height:38px; flex:none;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);
  transition:transform var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out);
}
.btn__ico svg{ width:17px; height:17px; }
.btn--cheio{ background:var(--barra); color:var(--cal); box-shadow:var(--sombra-1); }
.btn--linha{ border-color:rgba(20,48,43,.16); color:var(--tinta); }
.btn--linha .btn__ico{ background:rgba(20,48,43,.06); }
.btn--claro{ border-color:rgba(245,243,238,.24); color:var(--cal); }
.btn--largo{ width:100%; }
.btns{ display:flex; flex-direction:column; gap:var(--e3); margin-top:var(--e10); }

@media (hover:hover) and (pointer:fine){
  .btn--cheio:hover{ background:var(--tinta); box-shadow:var(--sombra-2); }
  .btn--linha:hover{ border-color:var(--tinta); }
  .btn--claro:hover{ background:rgba(245,243,238,.08); border-color:rgba(245,243,238,.5); }
  .btn:hover .btn__ico{ transform:translateX(2px); }
  .btn--cheio:hover .btn__ico,
  .btn--claro:hover .btn__ico{ background:rgba(255,255,255,.22); }
  .btn--linha:hover .btn__ico{ background:rgba(20,48,43,.1); }
}

/* ---------- Barra de accao fixa (telemovel) ---------- */
.accao-fixa{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-accao);
  display:grid; grid-template-columns:1fr 1fr;
  background:rgba(245,243,238,.82);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-top:1px solid var(--fio);
  padding:var(--e2) var(--e2) calc(var(--e2) + env(safe-area-inset-bottom));
  gap:var(--e2);
}
.accao-fixa a{
  display:flex; align-items:center; justify-content:center; gap:var(--e2);
  min-height:48px; border-radius:var(--r-pill);
  text-decoration:none;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  touch-action:manipulation;
  transition:transform var(--t-toque) var(--ease-out);
}
.accao-fixa a:active{ transform:scale(.97); }
.accao-fixa .a-wa{ background:var(--barra); color:var(--cal); }
.accao-fixa .a-tel{ color:var(--tinta); border:1px solid rgba(20,48,43,.16); }
.accao-fixa svg{ width:17px; height:17px; }

/* ---------- Heroi ---------- */
.heroi{ padding-top:clamp(1.5rem, 6vw, 3.5rem); }
.heroi__texto{ width:var(--env); margin-inline:auto; }
.heroi h1{ margin-bottom:var(--e6); }
.heroi h1 em{ font-style:normal; color:var(--barra); display:block; }
.heroi__img{ margin-top:var(--e12); }
.heroi__img img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r-card); background:var(--cal-2);
  box-shadow:var(--sombra-2);
}

/* ---------- Prova social ---------- */
.estrelas{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--e2);
  margin-top:var(--e8); padding-top:var(--e5);
  border-top:1px solid var(--fio);
  font-size:.92rem; color:var(--pedra);
}
.estrelas b{ color:var(--tinta); font-weight:600; }
.estrelas__icones{ display:inline-flex; gap:2px; color:var(--ocre); }
.estrelas__icones svg{ width:14px; height:14px; }

/* ---------- Cartoes ---------- */
.carrossel{
  display:grid; grid-auto-flow:column; grid-auto-columns:76%;
  gap:var(--e4); margin-top:var(--e12);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-block:var(--e2) var(--e6);
  margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%);
}
.carrossel::-webkit-scrollbar{ display:none; }
.carrossel > *{ scroll-snap-align:start; }

.cartao{
  background:var(--sal);
  border-radius:var(--r-card);
  padding:var(--e2) var(--e2) 0;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
  box-shadow:var(--sombra-1);
  transition:transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
.cartao img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:calc(var(--r-card) - 8px);
  background:var(--cal-2);
}
.cartao__corpo{ padding:var(--e5) var(--e4) var(--e5); display:flex; flex-direction:column; gap:var(--e2); flex:1; }
.cartao__corpo p{ font-size:.95rem; color:var(--pedra); }
.cartao__meta{
  margin-top:auto; padding-top:var(--e4);
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--e2);
  border-top:1px solid var(--fio);
  font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pedra);
}
.cartao__meta b{
  font-family:var(--fonte-titulo); font-weight:400; font-size:1.1rem;
  letter-spacing:0; text-transform:none; color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
@media (hover:hover) and (pointer:fine){
  .cartao:hover{ transform:translateY(-4px); box-shadow:var(--sombra-2); }
}

/* ---------- Grelhas ---------- */
.grelha{ display:grid; gap:var(--e4); margin-top:var(--e12); }
.grelha--2{ grid-template-columns:1fr; }
.grelha--3{ grid-template-columns:1fr; }

/* ---------- Precos ---------- */
.precos{ margin-top:var(--e12); }
.precos__grupo + .precos__grupo{ margin-top:var(--e16); }
.precos__titulo{ padding-bottom:var(--e4); margin-bottom:var(--e2); border-bottom:1px solid rgba(20,48,43,.24); }
.precos__titulo h2,
.precos__titulo h3{ font-size:clamp(1.5rem,5.4vw,1.9rem); line-height:1.1; }
.precos__titulo p{ margin:var(--e3) 0 0; font-size:.94rem; color:var(--pedra); }
.precos__lista{ list-style:none; margin:0; padding:0; }
.item{
  display:grid; grid-template-columns:1fr auto; gap:var(--e2) var(--e4);
  align-items:baseline;
  padding:var(--e5) 0; border-bottom:1px solid var(--fio);
}
.item__nome{ font-weight:600; font-size:1.04rem; letter-spacing:-.004em; }
.item__preco{
  font-family:var(--fonte-titulo); font-size:1.3rem;
  grid-row:1; grid-column:2; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.item__desc{ grid-column:1 / -1; font-size:.95rem; color:var(--pedra); line-height:1.55; }
.item__dur{
  display:inline-block; margin-right:var(--e3);
  font-size:.64rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ocre);
}

/* ---------- Citacoes ---------- */
.citacao{
  background:var(--sal); border-radius:var(--r-card);
  padding:var(--e8) var(--e6);
  display:flex; flex-direction:column; gap:var(--e4);
  box-shadow:var(--sombra-1);
}
.secao--escura .citacao{ background:rgba(245,243,238,.045); box-shadow:none; }
.secao--cal2 .citacao{ box-shadow:var(--sombra-1); }
.citacao blockquote{
  margin:0; font-family:var(--fonte-titulo); font-size:1.24rem;
  line-height:1.42; letter-spacing:-.01em;
}
.citacao__estrelas{ display:inline-flex; gap:2px; color:var(--ocre); }
.citacao__estrelas svg{ width:13px; height:13px; }
.secao--escura .citacao__estrelas{ color:var(--ocre-luz); }
.citacao__autor{
  margin-top:auto; padding-top:var(--e4); border-top:1px solid var(--fio);
  font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pedra);
}
.secao--escura .citacao__autor{ border-color:var(--fio-c); color:rgba(245,243,238,.58); }
.citacao__resp{
  margin:0; padding-left:var(--e4);
  border-left:1px solid var(--ocre);
  font-size:.9rem; color:var(--pedra);
}
.secao--escura .citacao__resp{ border-color:var(--ocre-luz); color:rgba(245,243,238,.6); }

/* ---------- Galeria ---------- */
.galeria{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e3); margin-top:var(--e12); }
.galeria figure{ margin:0; }
.galeria img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r-img); background:var(--cal-2);
  box-shadow:var(--sombra-1);
}
.galeria figcaption{
  margin-top:var(--e3); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pedra);
}
.galeria__alta{ grid-column:1 / -1; }
.galeria__alta img{ aspect-ratio:1/1; }

/* ---------- Info / horario / mapa ---------- */
.info{ list-style:none; margin:var(--e10) 0 0; padding:0; }
.info li{ display:grid; gap:var(--e1); padding:var(--e5) 0; border-bottom:1px solid var(--fio); }
.info__rot{
  font-size:.64rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pedra);
}
.info__val{ font-size:1.06rem; }
.info__val a{ color:var(--barra); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }

.horario{ list-style:none; margin:var(--e8) 0 0; padding:0; }
.horario li{
  display:flex; justify-content:space-between; gap:var(--e4);
  padding:var(--e4) 0; border-bottom:1px solid var(--fio);
  font-size:1rem; font-variant-numeric:tabular-nums;
}
.horario li[data-hoje="true"]{ color:var(--barra); font-weight:600; }
.horario .fechado{ color:var(--pedra); }

.mapa{
  margin-top:var(--e12); border-radius:var(--r-card); overflow:hidden;
  background:var(--cal-2); aspect-ratio:4/3; width:100%;
  box-shadow:var(--sombra-1);
}
.mapa iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- Passos ---------- */
.passos{ list-style:none; counter-reset:p; margin:var(--e12) 0 0; padding:0; }
.passos li{
  counter-increment:p;
  display:grid; grid-template-columns:auto 1fr; gap:var(--e2) var(--e5);
  padding:var(--e6) 0; border-top:1px solid var(--fio);
}
.passos li::before{
  content:counter(p,decimal-leading-zero);
  grid-row:1 / span 2;
  font-family:var(--fonte-titulo); font-size:1.5rem; color:var(--ocre); line-height:1;
}
.passos h3{ font-size:1.16rem; }
.passos p{ font-size:.96rem; color:var(--pedra); }
.secao--escura .passos li{ border-color:var(--fio-c); }
.secao--escura .passos p{ color:rgba(245,243,238,.7); }
.secao--escura .passos li::before{ color:var(--ocre-luz); }

/* ---------- Imagem + texto ---------- */
.dupla{ display:grid; gap:var(--e10); margin-top:var(--e12); align-items:center; }
.dupla img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r-card); background:var(--cal-2);
  box-shadow:var(--sombra-2);
}

/* ---------- Perguntas ---------- */
.faq{ margin-top:var(--e12); border-top:1px solid var(--fio); }
.faq details{ border-bottom:1px solid var(--fio); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e4);
  min-height:64px; padding:var(--e4) 0; cursor:pointer;
  font-weight:600; font-size:1.02rem; list-style:none;
  touch-action:manipulation;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; width:32px; height:32px; flex:none; border-radius:var(--r-pill);
  background:rgba(20,48,43,.06);
  -webkit-mask:none;
  position:relative;
  transition:background-color var(--t-ui) var(--ease-out);
}
.faq summary{ position:relative; }
.faq summary::before{
  content:""; position:absolute; right:11px; top:50%; z-index:1;
  width:9px; height:9px; margin-top:-6px;
  border-right:1.5px solid var(--barra); border-bottom:1.5px solid var(--barra);
  transform:rotate(45deg);
  transition:transform 260ms var(--ease-out);
}
.faq details[open] summary::before{ transform:rotate(-135deg); margin-top:-2px; }
.faq p{ margin:0 0 var(--e5); color:var(--pedra); font-size:.98rem; max-width:62ch; }

/* ---------- Rodape ---------- */
.rodape{ background:var(--tinta); color:var(--cal); padding-block:var(--sp) var(--e10); }
.rodape a{ color:inherit; text-decoration:none; }
.rodape__cols{ display:grid; gap:var(--e10); }
.rodape h2{ margin-bottom:var(--e5); }
.rodape p{ color:rgba(245,243,238,.74); }
.rodape__rot{
  font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(245,243,238,.45); margin:0 0 var(--e4);
}
.rodape__lista{ list-style:none; margin:0; padding:0; }
.rodape__lista li{ margin-bottom:var(--e2); }
.rodape__lista a{
  display:inline-flex; align-items:center; min-height:32px;
  border-bottom:1px solid transparent;
  transition:border-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .rodape__lista a:hover{ border-color:var(--ocre-luz); }
}
.rodape__fim{
  margin-top:var(--e16); padding-top:var(--e6);
  border-top:1px solid var(--fio-c);
  display:flex; flex-direction:column; gap:var(--e2);
  font-size:.76rem; color:rgba(245,243,238,.5);
}

/* ---------- Utilitarios ---------- */
.oculto-visual{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.saltar{
  position:absolute; left:var(--e3); top:-5rem; z-index:99;
  background:var(--tinta); color:var(--cal);
  padding:var(--e3) var(--e5); border-radius:var(--r-pill);
  transition:top var(--t-ui) var(--ease-out);
}
.saltar:focus{ top:var(--e3); }
.nota{ margin-top:var(--e8); font-size:.84rem; color:var(--pedra); }

/* =========================================================
   MOVIMENTO
   ========================================================= */

/* Entrada do heroi (CSS puro, fora da main thread) */
@keyframes subir{ to{ opacity:1; transform:none; } }
.js .heroi__texto > div > *,
.js .heroi__img{
  opacity:0; transform:translateY(16px);
  animation:subir 620ms var(--ease-out) forwards;
}
.js .heroi__texto > div > *:nth-child(1){ animation-delay:60ms; }
.js .heroi__texto > div > *:nth-child(2){ animation-delay:120ms; }
.js .heroi__texto > div > *:nth-child(3){ animation-delay:180ms; }
.js .heroi__texto > div > *:nth-child(4){ animation-delay:240ms; }
.js .heroi__texto > div > *:nth-child(5){ animation-delay:300ms; }
.js .heroi__img{ animation-delay:160ms; }

/* Revelacao ao scroll */
.js [data-revelar]{
  opacity:0; transform:translateY(20px);
  transition:opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay:calc(var(--i, 0) * 60ms);
}
.js [data-revelar].e-visivel{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .heroi__texto > div > *,
  .js .heroi__img{ opacity:1; transform:none; animation:none; }
  .js [data-revelar]{ opacity:1; transform:none; transition:none; }
  .gaveta__lista li{ opacity:1; transform:none; transition:opacity 120ms linear; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* =========================================================
   >= 620px
   ========================================================= */
@media (min-width:620px){
  .btns{ flex-direction:row; flex-wrap:wrap; }
  .btn--largo{ width:auto; }
  .grelha--2{ grid-template-columns:1fr 1fr; gap:var(--e5); }
  .galeria{ grid-template-columns:repeat(3,1fr); gap:var(--e4); }
  .galeria__alta{ grid-column:span 2; }
  .galeria__alta img{ aspect-ratio:3/2; }
  .info li{ grid-template-columns:11rem 1fr; align-items:baseline; gap:var(--e6); }
  .rodape__fim{ flex-direction:row; justify-content:space-between; }
}

/* =========================================================
   >= 900px
   ========================================================= */
@media (min-width:900px){
  :root{ --bar-baixo:0px; }
  body{ padding-bottom:0; }
  .accao-fixa{ display:none; }
  .menu-botao{ display:none; }
  .gaveta{ display:none; }
  .marca__sub{ display:block; }
  .marca__selo{ width:28px; height:28px; }

  .topo{ padding:var(--e5) 0; }
  .topo__int{ min-height:64px; padding:var(--e2) var(--e2) var(--e2) var(--e6); }
  .nav-desktop{ display:flex; align-items:center; gap:var(--e8); }
  .nav-desktop a{
    text-decoration:none; font-size:.7rem; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase;
    color:var(--pedra);
    transition:color var(--t-ui) var(--ease-out);
  }
  .nav-desktop a:hover{ color:var(--tinta); }
  .nav-desktop a[aria-current="page"]{ color:var(--tinta); }
  .nav-desktop .btn--cheio{ color:var(--cal); }
  .nav-desktop .btn--cheio:hover{ color:var(--cal); }
  .nav-desktop .btn{ min-height:44px; padding:0 var(--e2) 0 var(--e5); font-size:.7rem; }
  .nav-desktop .btn__ico{ width:32px; height:32px; }
  .nav-desktop .btn__ico svg{ width:15px; height:15px; }

  .heroi{ padding-top:var(--e6); }

  .grelha--3{ grid-template-columns:repeat(3,1fr); gap:var(--e5); }
  .carrossel{
    display:grid; grid-auto-flow:row; grid-template-columns:repeat(3,1fr);
    gap:var(--e5); overflow:visible; margin-inline:auto; padding-inline:0;
  }
  .dupla{ grid-template-columns:1fr 1fr; gap:var(--e20); }
  .dupla--inversa .dupla__img{ order:2; }

  .precos__grupo{ display:grid; grid-template-columns:17rem 1fr; gap:var(--e16); }
  .precos__titulo{ border-bottom:0; padding-bottom:0; align-self:start; position:sticky; top:120px; }
  .precos__grupo + .precos__grupo{ margin-top:var(--e20); padding-top:var(--e16); border-top:1px solid var(--fio); }

  .rodape__cols{ grid-template-columns:1.5fr 1fr 1fr; gap:var(--e16); }
  .chamada{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e16); align-items:end; }
  .chamada .btns{ margin-top:0; justify-content:flex-end; }
}

/* =========================================================
   >= 1040px — heroi em duas colunas
   ========================================================= */
@media (min-width:1040px){
  .heroi__texto{ display:grid; grid-template-columns:1.08fr .92fr; gap:var(--e16); align-items:center; }
  .heroi__img{ margin-top:0; }
  .heroi__img img{ aspect-ratio:3/4; }
}

/* =========================================================
   >= 1180px — barra pintada
   ========================================================= */
@media (min-width:1180px){
  :root{ --barra-larg:34px; }
  .barra-lateral{
    display:block; position:fixed; left:0; top:0; bottom:0; width:var(--barra-larg);
    background:var(--barra); z-index:var(--z-barra); pointer-events:none;
  }
  .barra-lateral::after{
    content:""; position:absolute; inset:0;
    background:var(--cal); opacity:.26;
    -webkit-mask:url(../img/renda.svg) center top / 34px 34px repeat-y;
    mask:url(../img/renda.svg) center top / 34px 34px repeat-y;
  }
  body{ padding-left:var(--barra-larg); }
}

/* =========================================================
   CAMADA 2 — craft, transicoes de pagina, componentes
   ========================================================= */

/* ---------- Detalhe tipografico ---------- */
h1,h2,h3{ text-wrap:balance; }
p,.entrada,.item__desc{ text-wrap:pretty; }
blockquote{ hanging-punctuation:first last; }

::selection{ background:var(--barra); color:var(--cal); }
.secao--escura ::selection,
.rodape ::selection,
.gaveta ::selection{ background:var(--ocre-luz); color:var(--tinta); }

html{ scrollbar-color:rgba(20,48,43,.28) transparent; }

/* ---------- Transicoes entre paginas ---------- */
@view-transition{ navigation:auto; }

@keyframes vt-sai{ to{ opacity:0; transform:translateY(-8px); } }
@keyframes vt-entra{ from{ opacity:0; transform:translateY(12px); } }

::view-transition-old(root){ animation:200ms var(--ease-out) both vt-sai; }
::view-transition-new(root){ animation:340ms var(--ease-out) both vt-entra; }

.topo__int{ view-transition-name:topo; }
.accao-fixa{ view-transition-name:accao; }
.barra-lateral{ view-transition-name:barra; }
.grao{ view-transition-name:grao; }

/* ---------- Parallax ligado ao scroll (progressivo) ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes deslize{
      from{ transform:translateY(-3.5%) scale(1.09); }
      to{ transform:translateY(3.5%) scale(1.09); }
    }
    html:not(.leve) .heroi__img img,
    html:not(.leve) .dupla img{
      animation:deslize linear both;
      animation-timeline:view();
      animation-range:entry 10% exit 90%;
    }
  }
}

/* ---------- Acordeao com altura animada (progressivo) ---------- */
@supports (interpolate-size: allow-keywords){
  :root{ interpolate-size:allow-keywords; }
  @media (prefers-reduced-motion:no-preference){
    .faq details::details-content{
      block-size:0; overflow:hidden; opacity:0;
      transition:block-size 340ms var(--ease-out), opacity 240ms var(--ease-out),
                 content-visibility 340ms allow-discrete;
    }
    .faq details[open]::details-content{ block-size:auto; opacity:1; }
  }
}

/* ---------- Fichas (chips): guia + filtros ---------- */
.fichas{ display:flex; flex-wrap:wrap; gap:var(--e2); margin:0; padding:0; border:0; }
.ficha{ position:relative; display:inline-flex; }
.ficha input{
  position:absolute; inset:0; opacity:0; margin:0; cursor:pointer;
  width:100%; height:100%;
}
.ficha span{
  display:inline-flex; align-items:center; gap:var(--e2);
  min-height:46px; padding:0 var(--e5);
  border-radius:var(--r-pill);
  border:1px solid rgba(20,48,43,.16);
  font-size:.85rem; font-weight:500;
  transition:background-color var(--t-ui) var(--ease-out),
             border-color var(--t-ui) var(--ease-out),
             color var(--t-ui) var(--ease-out),
             transform var(--t-toque) var(--ease-out);
}
.ficha input:active + span{ transform:scale(.97); }
.ficha input:checked + span{ background:var(--tinta); border-color:var(--tinta); color:var(--cal); }
.ficha input:focus-visible + span{ outline:2px solid var(--barra); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){
  .ficha input:not(:checked):hover + span{ border-color:rgba(20,48,43,.4); }
}
.secao--escura .ficha span{ border-color:rgba(245,243,238,.24); }
.secao--escura .ficha input:checked + span{ background:var(--cal); border-color:var(--cal); color:var(--tinta); }
.secao--escura .ficha input:focus-visible + span{ outline-color:var(--ocre-luz); }
@media (hover:hover) and (pointer:fine){
  .secao--escura .ficha input:not(:checked):hover + span{ border-color:rgba(245,243,238,.5); }
}

/* ---------- Guia: "diga-me o que sente" ---------- */
.guia{ margin-top:var(--e12); display:grid; gap:var(--e10); }
.guia__passos{ display:grid; gap:var(--e8); }
.guia__passo{ border:0; margin:0; padding:0; }
.guia__passo legend{
  padding:0; margin:0 0 var(--e4);
  display:flex; align-items:baseline; gap:var(--e3);
  font-size:.95rem; color:rgba(245,243,238,.82);
}
.guia__passo legend b{
  font-family:var(--fonte-titulo); font-weight:400; font-size:.95rem;
  color:var(--ocre-luz); font-variant-numeric:tabular-nums;
}
.guia__saida{
  display:block;
  border-radius:var(--r-card);
  background:rgba(245,243,238,.06);
  border:1px solid var(--fio-c);
  padding:var(--e8) var(--e6);
}
.guia__cabeca{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--e4);
  flex-wrap:wrap;
  padding-bottom:var(--e4); margin-bottom:var(--e4);
  border-bottom:1px solid var(--fio-c);
}
.guia__nome{
  font-family:var(--fonte-titulo); font-size:clamp(1.55rem,5.5vw,2.15rem);
  line-height:1.08; letter-spacing:-.014em;
}
.guia__preco{
  font-family:var(--fonte-titulo); font-size:1.3rem; white-space:nowrap;
  color:var(--ocre-luz); font-variant-numeric:tabular-nums;
}
.guia__porque{ color:rgba(245,243,238,.74); font-size:1rem; margin:0; }
.guia__extra{
  margin:var(--e4) 0 0; padding-left:var(--e4);
  border-left:1px solid var(--ocre-luz);
  font-size:.92rem; color:rgba(245,243,238,.62);
}
.guia__corpo{ transition:opacity 200ms var(--ease-out), filter 200ms var(--ease-out); }
.guia__saida[data-a-mudar="true"] .guia__corpo{ opacity:.3; filter:blur(4px); }
.guia .btns{ margin-top:var(--e6); }
.guia__rot{
  font-size:.64rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ocre-luz); margin:0 0 var(--e4);
}

/* ---------- Filtros da tabela de precos ---------- */
.filtros{
  position:sticky; top:72px; z-index:20;
  margin-top:var(--e10);
  padding:var(--e3) 0 var(--e4);
  background:linear-gradient(var(--cal) 68%, rgba(245,243,238,0));
}
.filtros .fichas{
  overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none;
  overscroll-behavior-inline:contain;
  padding-bottom:2px;
  scroll-padding-inline:var(--e4);
}
.filtros .fichas::-webkit-scrollbar{ display:none; }
.filtros .ficha span{ white-space:nowrap; background:var(--cal); }
.filtros .ficha input:checked + span{ background:var(--tinta); }
.precos__grupo[hidden]{ display:none; }

/* ---------- Galeria: botao + visor ---------- */
.galeria button{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
  border-radius:var(--r-img); overflow:hidden;
  transition:transform var(--t-ui) var(--ease-out);
}
.galeria button:active{ transform:scale(.985); }
@media (hover:hover) and (pointer:fine){
  .galeria button:hover img{ box-shadow:var(--sombra-2); }
}

.visor{
  position:fixed; inset:0; z-index:120;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  background:rgba(20,48,43,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  opacity:0; transition:opacity 240ms var(--ease-out);
}
.visor[hidden]{ display:none; }
.visor[data-aberto="true"]{ opacity:1; }
.visor__topo{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e4);
  padding:var(--e4) var(--e5);
  color:rgba(245,243,238,.6);
  font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.visor__palco{ display:grid; place-items:center; padding:0 var(--e4); min-height:0; }
.visor__palco img{
  max-width:100%; max-height:100%;
  border-radius:var(--r-img); object-fit:contain;
  transition:opacity 180ms var(--ease-out), filter 180ms var(--ease-out);
}
.visor[data-a-mudar="true"] .visor__palco img{ opacity:.35; filter:blur(6px); }
.visor__baixo{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e4);
  padding:var(--e5);
}
.visor__leg{
  flex:1; margin:0; color:rgba(245,243,238,.72); font-size:.9rem; text-align:center;
}
.visor__bt{
  display:grid; place-items:center;
  width:52px; height:52px; flex:none;
  border-radius:var(--r-pill);
  border:1px solid rgba(245,243,238,.24);
  background:none; color:var(--cal); cursor:pointer;
  touch-action:manipulation;
  transition:background-color var(--t-ui) var(--ease-out), transform var(--t-toque) var(--ease-out);
}
.visor__bt:active{ transform:scale(.94); }
.visor__bt svg{ width:20px; height:20px; }
.visor__bt[disabled]{ opacity:.28; cursor:default; }
@media (hover:hover) and (pointer:fine){
  .visor__bt:not([disabled]):hover{ background:rgba(245,243,238,.12); }
}

@media (min-width:620px){
  .guia__saida{ padding:var(--e10) var(--e8); }
  .visor__leg{ font-size:.95rem; }
}

@media (min-width:900px){
  .guia{ grid-template-columns:1fr 1fr; gap:var(--e16); align-items:start; }
  .guia__saida{ position:sticky; top:124px; }
  .filtros{ top:100px; }
}

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important; }
}

/* =========================================================
   CAMADA 3 — desempenho
   Objectivo: telemóveis fracos não pagam pelo que não veem.
   ========================================================= */

/* Nota: experimentei content-visibility:auto nestes blocos e medi um
   salto de 1566 px na altura da página, porque o contain-intrinsic-size
   é sempre uma estimativa. Como as imagens já declaram aspect-ratio e
   width/height, o layout já é barato e exacto — a técnica só trazia
   risco. Ficou de fora de propósito.

   Isolar as camadas fixas para não repintarem o resto: */
.topo__int,
.accao-fixa{ contain:paint; }

/* =========================================================
   MODO LEVE
   Activado por JS quando o aparelho é fraco (pouca memória,
   poucos núcleos) ou o utilizador pediu poupança de dados.
   Cai tudo o que custa GPU; a página continua igual em
   estrutura, tipografia e cor.
   ========================================================= */
.leve .grao{ display:none; }

.leve .topo__int,
.leve .accao-fixa,
.leve .gaveta,
.leve .visor{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.leve .topo__int{ background:#F0EEE8; }
.leve .accao-fixa{ background:var(--cal); }
.leve .gaveta{ background:var(--tinta); }
.leve .visor{ background:#122824; }

/* sem sombras difusas grandes (blur de sombra também custa) */
.leve .cartao,
.leve .citacao,
.leve .heroi__img img,
.leve .dupla img,
.leve .galeria img,
.leve .mapa,
.leve .btn--cheio{ box-shadow:none; }
.leve .cartao,
.leve .citacao{ border:1px solid var(--fio); }

/* revelação mais curta e só opacidade */
.leve.js [data-revelar]{
  transform:none;
  transition:opacity 300ms var(--ease-out);
  transition-delay:0ms;
}

/* sem entrada encenada do herói */
.leve.js .heroi__texto > div > *,
.leve.js .heroi__img{ opacity:1; transform:none; animation:none; }

/* sem desfoque nas trocas de estado */
.leve .guia__saida[data-a-mudar="true"] .guia__corpo,
.leve .visor[data-a-mudar="true"] .visor__palco img{ filter:none; opacity:.5; }

/* ---------- Temas destacados pelo Google ---------- */
.temas{ list-style:none; margin:var(--e8) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--e2); }
.tema{
  display:inline-flex; align-items:center; gap:var(--e3);
  min-height:46px; padding:0 var(--e2) 0 var(--e5);
  border:1px solid var(--fio); border-radius:var(--r-pill);
  font-size:.9rem; background:var(--sal);
}
.tema b{
  display:grid; place-items:center; min-width:30px; height:30px; padding:0 8px;
  border-radius:var(--r-pill); background:var(--tinta); color:var(--cal);
  font-size:.78rem; font-variant-numeric:tabular-nums;
}
.tema--mais{ padding:0 var(--e5); color:var(--pedra); background:transparent; }

/* ---------- Selo "mencionado nas avaliações" ---------- */
.selo{
  display:inline-flex; align-items:center; gap:3px;
  margin-left:var(--e2); padding:2px 8px;
  border-radius:var(--r-pill);
  background:rgba(143,97,24,.1); color:var(--ocre);
  font-size:.66rem; font-weight:600; font-variant-numeric:tabular-nums;
  vertical-align:middle;
}
.selo svg{ width:9px; height:9px; }

/* ---------- Autor da avaliação, com o perfil real ---------- */
.citacao__autor{ display:flex; flex-direction:column; gap:3px; text-transform:none; letter-spacing:0; }
.citacao__autor b{
  font-size:.9rem; font-weight:600; color:var(--tinta); letter-spacing:0;
}
.secao--escura .citacao__autor b{ color:var(--cal); }
.citacao__autor span{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pedra);
}
.citacao__nota{
  margin:0; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pedra);
}
.legenda{
  display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap;
  margin-top:var(--e6); font-size:.86rem; color:var(--pedra);
}
.legenda .selo{ margin-left:0; }