@font-face{
  font-family:"Archivo";
  src:url(fonts/archivo.woff2) format("woff2-variations"),url(fonts/archivo.woff2) format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
}

:root{
  --cal:#f2f4f5;
  --cal-2:#e4e8ea;
  --cal-3:#d5dadd;
  --branco:#fff;
  --telha:#b5552f;
  --telha-escura:#7d3a1f;
  --ink:#1c2023;
  --ink-2:#4b5157;
  --linha:#c3c9cd;
  --azul:#1f4b8f;
  --azul-escuro:#163868;
  --tavira:#2d6a4f;
  --conceicao:#4f7591;
  --casa:var(--ink);

  --font:"Archivo",system-ui,sans-serif;
  --fs-body:clamp(1rem,.95rem + .25vw,1.125rem);
  --fs-small:.875rem;
  --fs-h1:clamp(2.4rem,1.1rem + 3.5vw,4.5rem);
  --fs-h2:clamp(1.9rem,1.2rem + 2.6vw,3.4rem);
  --fs-h3:clamp(1.25rem,1rem + .9vw,1.6rem);
  --gutter:clamp(1rem,4vw,2.75rem);
  --section:clamp(4.5rem,3rem + 5vw,8rem);
  --wrap:1320px;
  --tap:44px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--cal);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.55;font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--azul);color:#fff}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:2px}
h1,h2,h3{margin:0;font-weight:800;font-stretch:125%;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
.num{font-variant-numeric:tabular-nums}

.saltar{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:100}
.saltar:focus{left:1rem;top:1rem}

/* faixa de maquete */
.maquete{background:var(--ink);color:#fff;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:.4rem var(--gutter)}

/* cabeçalho */
.topo{position:sticky;top:0;z-index:40;background:var(--cal);border-bottom:1px solid var(--linha)}
.topo-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);height:4.25rem;display:flex;align-items:center;gap:1.5rem}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;line-height:1;margin-right:auto}
.marca-sinal{display:flex;width:2.2rem;height:2.2rem;border-radius:9px;overflow:hidden;flex:none;box-shadow:0 1px 2px rgb(28 32 35 / .12)}
.marca-sinal i{flex:1}
.marca-sinal i:nth-child(1){background:var(--tavira)}
.marca-sinal i:nth-child(2){background:var(--conceicao)}
.marca-sinal i:nth-child(3){background:var(--cal-3)}
.marca-txt{display:flex;flex-direction:column}
.marca b{white-space:nowrap;font-weight:800;font-stretch:108%;font-size:1.5rem;letter-spacing:-.025em;line-height:.95}
.marca small{white-space:nowrap;font-size:.8125rem;font-weight:600;color:var(--ink-2);letter-spacing:.1em;text-transform:uppercase;margin-top:.3rem}
.marca:hover .marca-sinal i:nth-child(3){background:var(--ink-2)}
.marca-sinal i{transition:background .5s var(--ease)}
.nav{display:flex;gap:.25rem}
.nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 .8rem;text-decoration:none;font-weight:600}
.nav a:hover{text-decoration:underline}
.langs{display:inline-flex;border:1px solid var(--ink);border-radius:999px;padding:2px}
.langs a{min-width:2.75rem;min-height:2.25rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:.8125rem;font-weight:700;text-decoration:none;letter-spacing:.04em}
.langs a[aria-current="true"]{background:var(--ink);color:#fff}
.btn.menu-btn{display:none;padding-inline:.8rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:var(--tap);padding:.7rem 1.35rem;border-radius:4px;border:2px solid var(--ink);background:transparent;font-weight:700;font-size:.9375rem;letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.btn:hover{background:var(--ink);color:#fff}
.btn-azul{background:var(--azul);border-color:var(--azul);color:#fff}
.btn-azul:hover{background:var(--azul-escuro);border-color:var(--azul-escuro)}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* ---------- topo da página: os cartões das casas ---------- */
.abertura{max-width:var(--wrap);margin:0 auto;padding:clamp(1.5rem,1rem + 1.5vw,2.25rem) var(--gutter) 0}
.abertura{display:grid;grid-template-columns:1.12fr 1.06fr .82fr;column-gap:clamp(.75rem,1.6vw,1.5rem);align-items:end}
.abertura-txt{grid-column:2/4;grid-row:1;align-self:start;padding:0 0 clamp(1.25rem,.75rem + 1.2vw,2rem) clamp(.25rem,1vw,1rem)}
.abertura h1{font-size:var(--fs-h1)}
.abertura h1 span{display:block;color:var(--ink-2);font-weight:500;font-stretch:112%}
.abertura-txt p{max-width:52ch;margin-top:1rem;color:var(--ink-2);font-size:clamp(1.05rem,1rem + .3vw,1.2rem)}
.rua{display:contents}
.rua .cartao[data-casa="tavira"]{grid-column:1;grid-row:1/3;align-self:stretch}
.rua .cartao[data-casa="conceicao"]{grid-column:2;grid-row:2}
.rua .cartao.breve{grid-column:3;grid-row:2;align-self:stretch}
.passeio{grid-column:1/-1}

.cartao{--casa:var(--ink);position:relative;display:flex;flex-direction:column;background:var(--branco);border-radius:16px;padding:10px;text-decoration:none;color:inherit;
  box-shadow:0 1px 2px rgb(28 32 35 / .06),0 14px 34px -14px rgb(28 32 35 / .22);
  transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.cartao[data-casa="tavira"]{--casa:var(--tavira)}
.cartao[data-casa="conceicao"]{--casa:var(--conceicao)}
.cartao-foto{position:relative;flex:1;min-height:15rem;border-radius:10px;overflow:hidden;background:var(--cal-2)}
.cartao[data-casa="conceicao"] .cartao-foto{flex:none;aspect-ratio:16/10}
.cartao-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.cartao-sitio{position:absolute;left:.75rem;top:.75rem;background:rgb(255 255 255 / .94);color:var(--ink);font-size:.8125rem;font-weight:700;letter-spacing:.02em;padding:.35rem .75rem;border-radius:999px}
.cartao-info{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:.35rem 1rem;padding:1.05rem .7rem .8rem}
.cartao-info h2{font-size:clamp(1.2rem,.9rem + .8vw,1.6rem);font-stretch:112%}
.cartao-info p{color:var(--ink-2);font-size:var(--fs-small);margin-top:.3rem}
.cartao-nota{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.cartao-nota b{background:var(--casa);color:#fff;font-weight:800;font-stretch:110%;font-size:1.05rem;padding:.4rem .55rem;border-radius:8px}
.cartao-nota small{font-size:.8125rem;color:var(--ink-2);margin-top:.35rem}
.cartao-ver{grid-column:1/-1;display:inline-flex;align-items:center;gap:.4rem;margin-top:.55rem;font-weight:700;font-size:.9375rem;color:var(--casa)}
.cartao-ver svg{width:1.1em;height:1.1em;transition:transform .6s var(--ease)}
.cartao-linha{position:absolute;left:.7rem;right:.7rem;bottom:0;height:3px;border-radius:3px;background:var(--casa);transform:scaleX(.12);transform-origin:left;transition:transform .9s var(--ease)}
.cartao:hover,.cartao:focus-visible{transform:translateY(-6px);box-shadow:0 2px 4px rgb(28 32 35 / .07),0 30px 50px -18px rgb(28 32 35 / .32)}
.cartao:hover .cartao-foto img,.cartao:focus-visible .cartao-foto img{transform:scale(1.06)}
.cartao:hover .cartao-ver svg,.cartao:focus-visible .cartao-ver svg{transform:translateX(5px)}
.cartao:hover .cartao-linha,.cartao:focus-visible .cartao-linha{transform:scaleX(1)}

.cartao.breve{background:var(--ink);color:#fff}
.cartao.breve .cartao-info p{color:#c9cdd1}
.cartao.breve .cartao-ver{color:#fff}
.breve-cena{flex:1;min-height:15rem;border-radius:10px;border:1px solid #3a4046;display:flex;flex-direction:column;justify-content:flex-end;padding:1.25rem}
.breve-grande{font-weight:800;font-stretch:125%;font-size:clamp(1.8rem,1rem + 2vw,2.9rem);line-height:.98;letter-spacing:-.02em;text-transform:uppercase}
.breve-linha{display:block;height:2px;background:#fff;margin:1rem 0 .8rem;transform-origin:left;transition:transform .9s var(--ease)}
.breve-pt{font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c9cdd1}
.cartao.breve:hover .breve-linha{transform:scaleX(.55)}

/* passeio: o formulário de datas */
.passeio{background:var(--ink);color:#fff;padding:clamp(1rem,2vw,1.5rem);display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr auto;gap:.75rem;align-items:end}
.campo{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.campo label{font-size:.8125rem;font-weight:600;letter-spacing:.04em;color:#d6d9dc}
.campo input,.campo select{width:100%;min-height:3rem;padding:.6rem .75rem;border:0;border-radius:4px;background:#fff;color:var(--ink);font-size:1rem;font-variant-numeric:tabular-nums;accent-color:var(--azul)}
.passeio .btn-azul{min-height:3rem;border-color:#fff0;padding-inline:1.6rem;background:var(--azul)}
.passeio .btn-azul:hover{background:var(--azul-escuro)}
.passeio-nota{grid-column:1/-1;font-size:.8125rem;color:#c3c7cb}
.passeio-nota a{color:#fff}

/* ---------- secções ---------- */
.seccao{max-width:var(--wrap);margin:0 auto;padding:var(--section) var(--gutter) 0}
.seccao-tit{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 3rem;margin-bottom:clamp(1.75rem,1rem + 2vw,3rem)}
.seccao-tit h2{font-size:var(--fs-h2)}
.seccao-tit p{max-width:44ch;color:var(--ink-2)}

/* separadores das casas */
.tabs-casas{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.9rem}
.tab{--casa:var(--ink);appearance:none;border:0;cursor:pointer;display:flex;align-items:center;gap:.75rem;padding:.4rem 1.1rem .4rem .4rem;border-radius:14px;background:var(--branco);color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgb(28 32 35 / .06),0 8px 20px -12px rgb(28 32 35 / .2);transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease)}
.tab[data-casa="tavira"]{--casa:var(--tavira)}
.tab[data-casa="conceicao"]{--casa:var(--conceicao)}
.tab img,.tab-breve{width:3.25rem;height:3.25rem;border-radius:10px;object-fit:cover;flex:none}
.tab-breve{display:grid;place-items:center;background:var(--ink);color:#fff;font-size:.8125rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.tab-nome{font-size:1rem;font-stretch:110%}
.tab:hover{transform:translateY(-2px)}
.tab[aria-selected="true"]{background:var(--casa);color:#fff}

.painel{--casa:var(--ink);--sub:rgb(255 255 255 / .84);--fio:rgb(255 255 255 / .28);background:var(--casa);color:#fff;border-radius:16px;padding:clamp(1.25rem,1rem + 2.5vw,3rem) clamp(1rem,1rem + 2.5vw,3rem)}
.painel[data-casa="tavira"]{--casa:var(--tavira)}
.painel[data-casa="conceicao"]{--casa:var(--conceicao)}
.painel[hidden]{display:none}
.painel-grelha{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);gap:clamp(1.75rem,1rem + 3vw,4rem)}
.painel h3{font-size:var(--fs-h2);font-stretch:120%}
.onde{margin-top:.6rem;color:var(--sub)}
.nota-booking{display:flex;align-items:center;gap:.9rem;margin-top:1.5rem;padding:.9rem 0;border-top:1px solid var(--fio);border-bottom:1px solid var(--fio)}
.nota-booking b{font-size:2.25rem;font-weight:800;font-stretch:110%;line-height:1;color:#fff}
.nota-booking span{font-size:var(--fs-small);color:var(--sub);line-height:1.35}
.painel .intro{margin-top:1.4rem;max-width:52ch}
.quartos{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:0}
.quartos li{display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;padding:.85rem 0;border-bottom:1px solid var(--fio)}
.quartos li:first-child{border-top:1px solid var(--fio)}
.quartos b{font-weight:700;font-stretch:110%}
.quartos span{color:var(--sub);font-size:var(--fs-small);text-align:right}
.quartos small{grid-column:1/-1;color:var(--sub);font-size:var(--fs-small)}
.comodidades{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.25rem;padding:0;list-style:none}
.comodidades li{font-size:var(--fs-small);padding:.3rem .75rem;border:1px solid rgb(255 255 255 / .5);border-radius:999px}
.painel .btn{border-color:#fff;color:#fff}
.painel .btn:hover{background:#fff;color:var(--casa)}
.painel .btn-azul{background:#fff;color:var(--casa)}
.painel .btn-azul:hover{background:var(--cal);color:var(--casa)}
.acoes{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.75rem}

.galeria{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(4.5rem,2rem + 6vw,8.5rem);gap:clamp(.4rem,.8vw,.7rem);align-content:start}
.galeria>button{appearance:none;border:0;padding:0;background:rgb(255 255 255 / .12);cursor:zoom-in;overflow:hidden;position:relative;border-radius:10px}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.galeria>button:hover img{transform:scale(1.04)}
.galeria>button:nth-child(1){grid-column:span 4;grid-row:span 3}
.galeria>button:nth-child(2){grid-column:span 2;grid-row:span 2}
.galeria>button:nth-child(3){grid-column:span 2;grid-row:span 2}
.galeria>button:nth-child(4){grid-column:span 2;grid-row:span 2}
.galeria>button:nth-child(5){grid-column:span 2;grid-row:span 2}
.galeria>button:nth-child(n+6){display:none}
.ver-todas{grid-column:span 2;grid-row:span 1;display:flex;align-items:center;justify-content:center}
.ver-todas .btn{width:100%;height:100%;font-size:.875rem;padding-inline:.75rem;text-align:center}

.citacoes{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 2rem;margin-top:2rem}
.citacoes blockquote{margin:0;padding-top:.9rem;border-top:2px solid rgb(255 255 255 / .6)}
.citacoes p{font-size:1rem}
.citacoes cite{display:block;margin-top:.5rem;font-style:normal;font-size:var(--fs-small);color:var(--sub)}

/* a casa que vem aí */
.carimbo{font-weight:800;font-stretch:125%;font-size:clamp(1.3rem,1rem + 1vw,2rem);letter-spacing:.02em;text-transform:uppercase;text-align:center;line-height:1.1}
.carimbo span{display:block;font-size:.8125rem;font-weight:700;font-stretch:100%;letter-spacing:.12em;margin-top:.5rem}
.painel.breve{background:var(--ink)}
.breve-grelha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;align-items:center}
.breve-janela{border:1px solid #3a4046;border-radius:10px;aspect-ratio:4/3;display:grid;place-items:center;padding:1rem}
.breve-janela .carimbo{color:#fff}
.breve-janela .carimbo span{color:#c9cdd1}
.breve p{max-width:46ch;margin-top:1rem;color:#c9cdd1}

/* os pormenores */
.pm-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,2rem) clamp(.75rem,1.6vw,1.5rem)}
.pm-lista li{--casa:var(--ink)}
.pm-lista li[data-casa="tavira"]{--casa:var(--tavira)}
.pm-lista li[data-casa="conceicao"]{--casa:var(--conceicao)}
.pm-lista li:nth-child(3n+2){margin-top:clamp(0rem,4vw,3.5rem)}
.pm-lista figure{margin:0}
.pm-foto{aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--cal-2)}
.pm-vazio{display:grid;place-items:center;background:var(--cal-2);border:1px solid var(--linha)}
.pm-vazio span{font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.pm-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.pm-lista li:hover .pm-foto img{transform:scale(1.05)}
.pm-lista figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:.85rem}
.pm-lista figcaption b{font-weight:700;font-stretch:108%;line-height:1.35;max-width:26ch}
.pm-lista figcaption span{flex:none;font-size:.8125rem;font-weight:700;color:var(--casa)}

/* tavira a pé */
.guia{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,1rem + 3vw,4rem)}
.guia-col h3{display:flex;align-items:center;gap:.75rem;font-size:var(--fs-h3);font-stretch:118%;padding-bottom:.9rem;border-bottom:3px solid var(--casa)}
.guia-col[data-casa="tavira"]{--casa:var(--tavira)}
.guia-col[data-casa="conceicao"]{--casa:var(--conceicao)}
.amostra{width:1.1rem;height:1.1rem;border-radius:4px;background:var(--casa);flex:none}
.guia-col ul{list-style:none;margin:0;padding:0}
.guia-col li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--linha)}
.guia-col li b{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;font-stretch:110%}
.guia-fonte{margin-top:1.25rem;font-size:var(--fs-small);color:var(--ink-2)}

/* reservar */
.reservar-faixa{background:var(--telha);color:#fff;margin-top:var(--section)}
.reservar-in{max-width:var(--wrap);margin:0 auto;padding:clamp(3rem,2rem + 4vw,6rem) var(--gutter);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,5rem)}
.reservar-in h2{font-size:var(--fs-h2)}
.reservar-in .lead{margin-top:1rem;max-width:42ch;color:#fff;font-size:clamp(1.05rem,1rem + .3vw,1.2rem)}
.reservar-in .btn{border-color:#fff;color:#fff}
.reservar-in .btn:hover{background:#fff;color:var(--azul)}
.reservar-in .btn-branco{background:#fff;color:var(--azul)}
.reservar-in .btn-branco:hover{background:var(--cal);color:var(--azul-escuro)}
.vias{list-style:none;margin:0;padding:0}
.vias li{padding:1.1rem 0;border-bottom:1px solid rgb(255 255 255 / .3)}
.vias li:first-child{border-top:1px solid rgb(255 255 255 / .3)}
.vias b{display:block;font-size:1.1rem;font-stretch:112%}
.vias span{display:block;color:#fff;font-size:var(--fs-small);margin-top:.2rem}
.vias a{color:#fff}
.regras{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:.4rem 2rem;margin-top:2rem;font-size:var(--fs-small);color:#fff}
.regras b{color:#fff;font-weight:700}

/* rodapé */
.rodape{background:var(--ink);color:#c9cdd1;font-size:var(--fs-small)}
.rodape-in{max-width:var(--wrap);margin:0 auto;padding:3.5rem var(--gutter) 2.5rem;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:2rem}
.rodape .marca b{color:#fff}
.rodape .marca small{color:#aeb3b8}
.rodape .marca-sinal i:nth-child(3){background:#4b5157}
.rodape h2{font-size:.8125rem;font-weight:700;font-stretch:100%;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:.75rem}
.rodape p{line-height:1.6}
.rodape a{color:#fff;display:inline-flex;align-items:center;min-height:var(--tap)}
.rodape-fim{max-width:var(--wrap);margin:0 auto;padding:1.25rem var(--gutter) 2rem;border-top:1px solid #3a4046;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;color:#aeb3b8}

/* galeria aberta */
.album{position:fixed;inset:0;z-index:80;background:rgb(20 23 26 / .96);color:#fff;display:flex;flex-direction:column}
.album[hidden]{display:none}
.album-topo{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem var(--gutter);border-bottom:1px solid #353b41}
.album-topo h2{font-size:1.1rem;font-stretch:115%}
.album-fechar{appearance:none;border:2px solid #fff;background:none;color:#fff;width:var(--tap);height:var(--tap);border-radius:4px;cursor:pointer;display:grid;place-items:center}
.album-fechar svg{width:1.2rem;height:1.2rem}
.album-lista{overflow-y:auto;padding:1.5rem var(--gutter) 3rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:1rem;align-items:start}
.album-lista figure{margin:0}
.album-lista img{width:100%;background:#2a2f34}
.album-lista figcaption{font-size:var(--fs-small);color:#c9cdd1;margin-top:.4rem}
.album-mais{grid-column:1/-1;border:1.5px dashed #6b737b;padding:1.5rem;text-align:center;color:#c9cdd1}

/* ---------- página de reserva ---------- */
.reserva{max-width:var(--wrap);margin:0 auto;padding:clamp(2rem,1rem + 3vw,4rem) var(--gutter) var(--section)}
.reserva h1{font-size:clamp(2rem,1.2rem + 3vw,3.6rem)}
.reserva-sub{margin-top:.75rem;color:var(--ink-2);max-width:56ch}
.reserva-grelha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(1.5rem,1rem + 3vw,4rem);margin-top:2.5rem;align-items:start}
.resumo{position:sticky;top:6rem;--casa:var(--ink)}
.resumo[data-casa="tavira"]{--casa:var(--tavira)}
.resumo[data-casa="conceicao"]{--casa:var(--conceicao)}
.resumo-cartao{position:relative;display:flex;flex-direction:column;gap:1rem;background:var(--branco);border-radius:16px;padding:10px 10px 1.5rem;box-shadow:0 1px 2px rgb(28 32 35 / .06),0 14px 34px -14px rgb(28 32 35 / .22)}
.resumo-cartao::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:0;height:3px;border-radius:3px;background:var(--casa)}
.resumo .resumo-cartao>h2,.resumo .resumo-cartao>dl{margin-inline:.7rem}
.resumo-foto{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--cal-2)}
.resumo-foto img{width:100%;height:100%;object-fit:cover}
.resumo dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem;font-size:var(--fs-small)}
.resumo dt{color:var(--ink-2)}
.resumo dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.passos{display:grid;gap:1.25rem}
.passo{background:var(--branco);padding:clamp(1.25rem,1rem + 1.5vw,2rem);border-top:4px solid var(--ink)}
.passo legend,.passo-tit{font-weight:800;font-stretch:118%;font-size:var(--fs-h3);padding:0;margin-bottom:1rem;display:flex;align-items:baseline;gap:.6rem}
.passo legend em,.passo-tit em{font-style:normal;font-size:.8125rem;font-stretch:100%;font-weight:700;color:var(--ink-2);letter-spacing:.06em}
fieldset.passo{border:0;border-top:4px solid var(--ink);margin:0;min-width:0}
fieldset.passo>legend{float:left;width:100%}
fieldset.passo>legend+*{clear:both}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.campos .largo{grid-column:1/-1}
.passo .campo label{color:var(--ink-2)}
.passo .campo input,.passo .campo select,.passo .campo textarea{width:100%;min-height:3rem;padding:.65rem .8rem;border:1.5px solid var(--linha);border-radius:4px;background:var(--cal);font-size:1rem;accent-color:var(--azul)}
.passo .campo textarea{min-height:6rem;resize:vertical}
.passo .campo input:focus,.passo .campo select:focus,.passo .campo textarea:focus{border-color:var(--azul);outline:2px solid var(--azul);outline-offset:0}
.passo .campo input[aria-invalid="true"]{border-color:#b3261e}
.erro{color:#b3261e;font-size:var(--fs-small);min-height:1.2em}
.escolha-quarto{display:grid;gap:.6rem}
.escolha-quarto label{display:grid;grid-template-columns:auto 1fr auto;gap:.2rem .9rem;align-items:center;padding:.9rem 1rem;border:1.5px solid var(--linha);border-radius:4px;cursor:pointer;background:var(--cal)}
.escolha-quarto label:has(input:checked){border-color:var(--azul);background:#eef2f9}
.escolha-quarto input{width:1.2rem;height:1.2rem;accent-color:var(--azul);margin:0}
.escolha-quarto b{font-stretch:110%}
.escolha-quarto span{color:var(--ink-2);font-size:var(--fs-small)}
.pagar{display:grid;gap:1rem}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1rem 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.total b{font-size:1.4rem;font-stretch:110%}
.total span{font-size:var(--fs-small);color:var(--ink-2)}
.btn-paypal{width:100%;min-height:3.4rem;font-size:1.05rem}
.ou{display:flex;align-items:center;gap:1rem;color:var(--ink-2);font-size:var(--fs-small)}
.ou::before,.ou::after{content:"";height:1px;background:var(--linha);flex:1}
.aviso{font-size:var(--fs-small);color:var(--ink-2);background:var(--cal);padding:.9rem 1rem;border-left:0;border:1px dashed var(--ink-2)}
.aviso b{color:var(--ink)}
.estado{font-size:var(--fs-small);padding:.9rem 1rem;background:#eef2f9;border:1px solid var(--azul);color:var(--azul-escuro)}
.estado[hidden]{display:none}

/* ---------- telemóvel ---------- */
@media (max-width:1060px){
  .passeio{grid-template-columns:1fr 1fr}
  .passeio .campo-casa{grid-column:1/-1}
  .passeio .btn-azul{grid-column:1/-1}
  .painel-grelha{grid-template-columns:1fr}
  .reservar-in{grid-template-columns:1fr}
  .rodape-in{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .nav{display:none}
  .btn.menu-btn{display:inline-flex}
  .abertura{display:block}
  .abertura-txt{padding:0}
  .topo-in{gap:.6rem}
  .abertura-txt{grid-template-columns:1fr;gap:1rem}
  .rua{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1.5rem 0 1.25rem}
  .rua .cartao[data-casa="tavira"]{grid-column:1/-1;grid-row:1}
  .rua .cartao[data-casa="conceicao"]{grid-column:1;grid-row:2}
  .rua .cartao.breve{grid-column:2;grid-row:2;align-self:stretch}
  .cartao-foto,.cartao[data-casa="conceicao"] .cartao-foto{flex:none;min-height:0;aspect-ratio:4/3.1}
  .breve-cena{min-height:0}
  /* separadores: os três numa linha */
  .tabs-casas{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
  .tab{flex-direction:column;gap:.45rem;padding:.4rem .4rem .6rem;text-align:center}
  .tab img,.tab-breve{width:100%;height:auto;aspect-ratio:4/3}
  .tab-nome{font-size:.9375rem}
  .pm-lista{grid-template-columns:1fr 1fr}
  .pm-lista li:nth-child(3n+2){margin-top:0}
  .pm-lista li:nth-child(even){margin-top:2rem}
  .pm-lista figcaption{flex-direction:column;gap:.3rem}
  .pm-lista figcaption b{font-size:.9375rem}
  .guia,.breve-grelha,.citacoes{grid-template-columns:1fr}
  .reserva-grelha{grid-template-columns:1fr}
  .resumo{position:static}
  .regras{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .marca b{font-size:1.3rem}
  .marca-sinal{width:2rem;height:2rem}
  .topo .langs{display:none}
  [data-pagina="reserva"] .topo .langs{display:inline-flex}
  .maquete{font-size:.8125rem;letter-spacing:.03em}
  .maquete .longo{display:none}
  .abertura h1{font-size:2.2rem}
  .rua .cartao:not([data-casa="tavira"]){padding:7px;border-radius:14px}
  .rua .cartao:not([data-casa="tavira"]) .cartao-foto,.rua .breve-cena{border-radius:9px}
  .rua .cartao:not([data-casa="tavira"]) .cartao-info{grid-template-columns:1fr;gap:.3rem;padding:.75rem .35rem .65rem}
  .rua .cartao:not([data-casa="tavira"]) .cartao-info h2{font-size:1.05rem;font-stretch:104%}
  .rua .cartao:not([data-casa="tavira"]) .cartao-info p{font-size:.8125rem}
  .rua .cartao:not([data-casa="tavira"]) .cartao-nota{flex-direction:row;align-items:center;gap:.45rem;justify-self:start}
  .rua .cartao:not([data-casa="tavira"]) .cartao-nota small{margin-top:0}
  .rua .cartao:not([data-casa="tavira"]) .cartao-ver{margin-top:.25rem;font-size:.875rem}
  .rua .cartao:not([data-casa="tavira"]) .cartao-linha{left:.35rem;right:.35rem}
  .rua .cartao:not([data-casa="tavira"]) .cartao-sitio{left:.5rem;top:.5rem;padding:.3rem .6rem}
  .rua .breve-cena{padding:.9rem;justify-content:center}
  .rua .breve-grande{font-size:1.45rem}
  .rua .breve-linha{margin:.7rem 0 .55rem}
  .topo .btn-reservar{padding-inline:.9rem}
  .galeria{grid-template-columns:repeat(4,1fr);grid-auto-rows:5.2rem}
  .galeria>button:nth-child(1){grid-column:span 4;grid-row:span 3}
  .ver-todas{grid-column:span 4}
  .campos{grid-template-columns:1fr}
  .rodape-in{grid-template-columns:1fr}
  .acoes .btn{flex:1 1 100%}
}

/* menu do telemóvel */
.menu{position:fixed;inset:0;z-index:70;background:var(--cal);display:flex;flex-direction:column;padding:1rem var(--gutter) 2rem}
.menu[hidden]{display:none}
.menu-topo{display:flex;justify-content:space-between;align-items:center;height:3.25rem}
.menu nav{display:flex;flex-direction:column;margin-top:2rem}
.menu .langs{align-self:flex-start;margin-top:2rem}
.menu nav a{font-size:2rem;font-weight:800;font-stretch:125%;text-decoration:none;padding:.6rem 0;border-bottom:1px solid var(--linha)}

/* movimento: os cartões entram uma vez, as fotos abrem como uma cortina */
@media (prefers-reduced-motion:no-preference){
  .js .rua .cartao{animation:cartao-entra 1.1s var(--ease) backwards}
  .js .rua .cartao:nth-child(2){animation-delay:.14s}
  .js .rua .cartao:nth-child(3){animation-delay:.28s}
  .js .rua .cartao-foto{animation:cortina 1.3s var(--ease) backwards;animation-delay:inherit}
  .js .rua .cartao-foto img{animation:assenta 2s var(--ease) backwards}
  .js .rua .cartao:nth-child(1) .cartao-foto,.js .rua .cartao:nth-child(1) .cartao-foto img{animation-delay:.12s}
  .js .rua .cartao:nth-child(2) .cartao-foto,.js .rua .cartao:nth-child(2) .cartao-foto img{animation-delay:.26s}
  .js .rua .breve-linha{animation:linha 1.4s .7s var(--ease) backwards}
  .js .rua .cartao-linha{animation:linha-casa 1.4s .9s var(--ease) backwards}
  @keyframes cartao-entra{from{opacity:0;transform:translateY(48px)}}
  @keyframes cortina{from{clip-path:inset(100% 0 0 0 round 10px)}to{clip-path:inset(0 0 0 0 round 10px)}}
  @keyframes assenta{from{transform:scale(1.18)}}
  @keyframes linha{from{transform:scaleX(0)}}
  @keyframes linha-casa{from{transform:scaleX(0)}}
  .js .pm-lista li{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
  .js .pm-lista li.visto{opacity:1;transform:none}
  .js .pm-lista li.visto .pm-foto{animation:cortina 1.2s var(--ease) backwards}
  .painel:not([hidden]){animation:entra .6s var(--ease) both}
  @keyframes entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}