/*
  Alta Roda Boutique — renovação visual
  Direção: sobriedade editorial, inspirada na identidade visual de BOUTARO.
  Preserva o logótipo original, o conteúdo PT/EN e a lógica dos formulários.
*/

:root {
  color-scheme: light;
  --bg: #f7f4ed;
  --surface: #eee9df;
  --ink: #22262b;
  --muted: #5e605e;
  --line: #d5cdbf;
  --brand: #173253;
  --brand-ink: #fffdf9;
  --accent: #173253;
  --tape: #e5d5b4;
  --tape-ink: #45402f;
  --display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 4.7vw, 88px);
}

html { scroll-padding-top: 125px; scrollbar-gutter: stable; }
body { background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.65; }
.wrap { max-width:1472px; padding-inline:var(--gutter); }
:where(a,button,input,select,textarea,summary):focus-visible {outline:3px solid #51799c; outline-offset:4px;}
a { color:var(--accent); text-underline-offset:.2em; }
a:hover {text-decoration-thickness:2px;}

/* Navegação clara, tipografia e logótipo do site original. */
header.top { position:sticky; top:0; background:rgba(247,244,237,.97); color:var(--ink); border-bottom:1px solid var(--line); box-shadow:0 5px 20px rgba(28,31,35,.035); backdrop-filter:blur(12px); }
header.top .wrap { min-height:91px; padding-block:12px; gap:clamp(14px,2.5vw,36px); flex-wrap:nowrap; }
header.top .header-logo { display: block; width: clamp(194px, 19vw, 260px); height: auto; }
header.top a[aria-label] { flex:none; color:var(--brand)!important; }
.navgroup { min-width:0; margin-left:auto; justify-content:flex-end; flex-wrap:nowrap; gap:clamp(12px,1.7vw,26px); }
header.top nav { gap:clamp(9px,1.6vw,24px); flex-wrap:nowrap; font-size:clamp(11px,.94vw,13px); font-weight:650; text-transform:none; letter-spacing:.01em; white-space:nowrap; }
header.top nav a { color:var(--ink); opacity:.89; }
header.top nav a:hover {color:var(--brand); text-underline-offset:7px;}
.lang {border:1px solid var(--line); flex:none;}
.lang button {color:var(--ink); min-height:37px; min-width:38px; letter-spacing:.02em; font-size:12px;}
.lang button[aria-pressed="true"] {color:var(--brand-ink); background:var(--brand);}

/* Sugestão de idioma junto ao seletor, sem deslocar o conteúdo. */
header.top > .wrap { position: relative; }
.language-suggestion {
  position: absolute;
  z-index: 2;
  inset-block-start: calc(100% + .5rem);
  inset-inline-end: var(--gutter);
  width: min(20rem, calc(100% - 2 * var(--gutter)));
  padding: 1rem;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 8px 24px #17325320;
  font-size: .9375rem;
}
.language-suggestion p { margin: 0; }
.language-suggestion-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .85rem;
  margin-top: .75rem;
}
.language-suggestion-actions button {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.language-suggestion-actions .language-suggestion-accept {
  padding-inline: .75rem;
  background: var(--brand);
  color: var(--brand-ink);
}
.language-suggestion-accept:is(:hover, :focus-visible) { background: #294b70; }
.language-suggestion-dismiss { text-decoration: underline; }

/* Hero editorial: conteúdo original à esquerda, imagem de traje à direita. */
.hero { background:var(--bg); color:var(--ink); padding:clamp(18px,2.5vw,36px) 0 0; }
.hero-layout { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:stretch; min-height:clamp(570px,53vw,728px); }
.hero-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; padding:clamp(38px,5.4vw,90px) clamp(28px,5vw,78px); background:var(--surface); }
.hero .eyebrow {color:var(--brand); opacity:1; font-weight:700; letter-spacing:.13em; font-size:12px; margin-bottom:24px;}
.hero h1 {font-size:clamp(45px,5.35vw,85px); font-weight:400; letter-spacing:-.055em; line-height:1.02; max-width:13ch; margin-bottom:27px;}
.hero .hero-copy>p:not(.eyebrow) {font-size:clamp(17px,1.35vw,20px); line-height:1.65; max-width:42ch; margin-bottom:32px; opacity:1; color:var(--muted);}
.hero-visual {margin:0; min-width:0; overflow:hidden; background:#c2b9ad;}
.hero-visual img {display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 41%;}
.ctas { gap:10px; }
.btn {min-height:47px; padding:13px 17px; background:transparent; color:var(--brand); border:1px solid #9c9c96; font-size:13px; line-height:1.2; font-weight:650; letter-spacing:0; border-radius:0; justify-content:center; transition:background-color .18s, border-color .18s, color .18s;}
.btn.solid,.btn.brand {background:var(--brand); color:#fff; border-color:var(--brand);}
.btn:not(.solid):not(.brand):hover {border-color:var(--brand); background:rgba(23,50,83,.06);}
.btn.solid:hover,.btn.brand:hover {background:#294b70; border-color:#294b70;}

/* Ritmo editorial para as secções originais. */
main section { padding-block:clamp(68px,7.8vw,125px); border-top:0; }
main section+section { border-top:1px solid var(--line); }
main section > .wrap {display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:0 clamp(32px,7vw,100px);}
main section > .wrap > :not(h2):not(.lede) {grid-column:1/-1; min-width:0;}
main section h2 {font-weight:400; font-size:clamp(43px,4.5vw,69px); line-height:1.07; letter-spacing:-.045em; max-width:15ch; margin:0 0 clamp(35px,4.2vw,55px);}
main section .lede {max-width:47ch; margin:5px 0 clamp(35px,4.2vw,55px); color:var(--muted); font-size:clamp(17px,1.45vw,20px); line-height:1.65; align-self:start;}

/* Oferta: imagens retiradas do BOUTARO e preços rigorosamente conservados. */
.offer {gap:clamp(18px,2.5vw,34px); grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.offer .col {background:#fffdfa; padding:clamp(22px,3vw,42px); border:1px solid var(--line);}
.offer .col::before {content:""; display:block; height:clamp(190px,22vw,310px); margin:calc(-1*clamp(22px,3vw,42px)) calc(-1*clamp(22px,3vw,42px)) clamp(27px,3vw,42px); background-position:center; background-repeat:no-repeat; background-size:cover;}
.offer .col:first-child::before {background-image:url('fatos-na-boutique.webp'); background-position:center 43%;}
.offer .col:nth-child(2)::before {background-image:url('vestidos-na-boutique.webp'); background-position:center 51%;}
.kicker {color:var(--brand); letter-spacing:.13em; font-weight:750; margin-bottom:19px; font-size:12px;}
.prices th,table.prices td {padding-block:17px; border-color:var(--line);}
table.prices th {font-size:17px; font-weight:650;}
table.prices td {font-size:17px; color:var(--brand);}
table.prices th span,ul.sale span {font-size:14px; line-height:1.55;}
.sale strong {font-size:17px; font-weight:650;}
.price-note {font-size:17px; color:var(--brand);}
.fine {font-size:14px; line-height:1.65;}
#servicos .grid {margin-top:clamp(40px,5.6vw,80px)!important; gap:clamp(25px,3vw,42px);}
.item {border-top:1px solid var(--line); padding-top:24px;}
.item h3 {font-size:clamp(25px,2.6vw,35px); font-weight:400; letter-spacing:-.025em; margin-bottom:9px;}
.item p {font-size:16px; line-height:1.7;}

/* Aluguer: percurso legível e fotografia da montra. */
#aluguer {--hire-bg:#f0ebe2; background:var(--hire-bg);}
.steps-layout {display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(24px,5vw,80px); align-items:start;}
.steps {margin:0;}
.steps li {grid-template-columns:65px 1fr; padding:20px 0 24px; gap:14px;}
.steps li:first-child {padding-top:2px;}
.steps li::before {font-size:44px; font-weight:400; color:#9a8063;}
.steps h3 {font-size:22px; font-weight:650;}
.steps p {font-size:16px; line-height:1.68;}
.steps-photo {margin:0; align-self:stretch; background:#ccc0b1; min-height:500px; max-height:820px; overflow:hidden;}
.steps-photo img {display:block; width:100%; height:100%; min-height:500px; object-fit:cover; object-position:48% 50%;}
.extras {margin-top:clamp(35px,5vw,70px); gap:1px; background:var(--line); border:1px solid var(--line); grid-template-columns:repeat(5,minmax(0,1fr));}
.extra {background:var(--bg); padding:clamp(18px,2.1vw,28px);}
.extra strong {font-size:15px; line-height:1.4; color:var(--brand);}
.extra span {font-size:14px; line-height:1.6; display:block; margin-top:7px;}

/* A fita métrica e os ícones originais são conservados, mas integrados na nova grelha. */
#medidas {background:#faf8f3;}
.tape {margin-top:5px; margin-bottom:48px;}
.measures {grid-template-columns:repeat(3,minmax(0,1fr)); gap:35px 42px;}
.measure {grid-template-columns:48px 1fr; gap:14px; padding:17px 0 0; border-top:1px solid var(--line);}
.measure svg {color:#a68b64; width:39px; height:39px;}
.measure h3 {font-size:19px; font-weight:650; margin-bottom:5px;}
.measure p {font-size:15px; line-height:1.65;}
.note {margin-top:36px;}

/* Reserva: fundo forte e formulário leve, mantendo a lógica WhatsApp/email. */
#reservas {background:var(--brand); color:#fffdf8;}
#reservas .lede {color:#e8e1d7;}
#reservas form {background:#f7f4ed; color:var(--ink); padding:clamp(22px,4.5vw,60px); gap:19px 25px; border:0;}
form label {font-size:13px; font-weight:700; line-height:1.4; gap:9px; color:var(--brand);}
form input,form select,form textarea {border:1px solid #bbb8b1; border-radius:0; background:#fffdf9; padding:13px 14px; min-height:48px; box-shadow:none; color:var(--ink);}
form input:focus,form select:focus,form textarea:focus {border-color:var(--brand);}
form .btn {min-height:48px;}
.out pre {background:#fffdf9; color:var(--ink); font-size:14px; padding:18px; border-color:var(--line);}

/* Termos e perguntas em superfícies quietas. */
#regras .rules {grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(30px,7vw,94px);}
.rules li {padding:23px 0 26px; border-color:var(--line);}
.rules h3 {font-size:20px; color:var(--brand); font-weight:700; margin-bottom:8px;}
.rules p {font-size:16px; line-height:1.7;}
#perguntas {background:#eee9df;}
#perguntas details {max-width:1080px; width:100%; margin:0 auto; padding:5px 0; border-color:#c9beaf;}
#perguntas summary {padding:20px 0; font-size:18px; font-weight:650; color:var(--ink);}
#perguntas summary::after {font-family:var(--display); color:var(--accent);}
#perguntas details p {font-size:16px; line-height:1.75; max-width:74ch;}

/* Contactos: a loja real presente no mesmo espaço que a informação prática. */
#contactos .contact {display:grid; grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,auto); align-items:start; gap:28px clamp(24px,4.4vw,62px);}
.contact-photo {grid-column:1; grid-row:1/4; margin:0; height:100%; min-height:490px; background:#c4b6a5; overflow:hidden;}
.contact-photo img {width:100%; height:100%; display:block; object-fit:cover; object-position:50% 45%;}
.contact h3 {font-size:12px; letter-spacing:.12em; color:var(--muted); margin-bottom:9px;}
.contact .big {font-size:20px; font-weight:600; font-family:var(--body);}
.contact p,.contact td {line-height:1.65; font-size:15px;}
.contact table.hours td {padding:3px 12px 3px 0;}
footer {background:#142b46; color:#eee9df; font-size:14px; padding:35px 0;}
footer a {color:#f7f4ed;}

@media (max-width:1200px) {
  header.top .wrap {flex-wrap:wrap; gap:10px 24px; padding-block:10px;}
  .navgroup {flex:1 1 100%; margin-left:0; justify-content:space-between;}
  header.top nav {font-size:13px; gap:17px;}
  .hero-layout {min-height:575px;}
  .hero h1 {font-size:clamp(45px,5.2vw,70px);}
  .extras {grid-template-columns:repeat(3,minmax(0,1fr));}
  #contactos .contact {grid-template-columns:repeat(2,minmax(0,1fr));}
  .contact-photo {grid-column:1/-1; grid-row:auto; height:350px; min-height:0;}
}

@media (max-width:800px) {
  html {scroll-padding-top:135px;}
  header.top .wrap {gap:10px 14px;}
  header.top .header-logo {width:clamp(184px,39vw,240px);}
  .navgroup {width:100%; display:flex; align-items:center; flex-wrap:nowrap; gap:12px;}
  header.top nav {display:flex; flex:1; overflow-x:auto; gap:22px; scrollbar-width:none; scroll-snap-type:x proximity; white-space:nowrap; padding-block:5px;}
  header.top nav::-webkit-scrollbar {display:none;}
  header.top nav a {scroll-snap-align:start;}
  .lang button {min-height:32px; min-width:34px;}
  .hero-layout {display:flex; flex-direction:column; min-height:0; padding-inline:var(--gutter);}
  .hero .hero-layout {padding-inline:var(--gutter);}
  .hero-copy {width:100%; padding:clamp(30px,7vw,55px);}
  .hero h1 {max-width:14ch; font-size:clamp(43px,8.4vw,70px);}
  .hero-visual {height:clamp(310px,70vw,550px);}
  .hero-visual img {object-position:center 35%;}
  main section > .wrap {display:block;}
  main section h2 {max-width:none; margin-bottom:16px;}
  main section .lede {margin-bottom:38px;}
  .offer {grid-template-columns:1fr 1fr; gap:15px;}
  .offer .col {padding:23px;}
  .offer .col::before {margin:-23px -23px 28px; height:210px;}
  .steps-layout {grid-template-columns:1fr; gap:38px;}
  .steps-photo {min-height:340px; height:460px;}
  .steps-photo img {min-height:340px;}
  .measures {grid-template-columns:repeat(2,minmax(0,1fr));}
  #contactos .contact {gap:32px;}
}

@media (max-width:580px) {
  :root {--gutter:18px;}
  body {font-size:16px;}
  header.top .wrap {min-height:0; padding-block:10px 8px;}
  header.top .header-logo {width:185px;}
  header.top nav {font-size:12px; gap:18px;}
  .hero {padding-top:14px;}
  .hero .hero-layout {padding-inline:0;}
  .hero-copy {padding:38px var(--gutter) 42px;}
  .hero .eyebrow {font-size:11px; margin-bottom:16px;}
  .hero h1 {font-size:clamp(43px,11vw,60px); margin-bottom:20px; line-height:1.03;}
  .hero .hero-copy>p:not(.eyebrow) {font-size:16px; margin-bottom:27px;}
  .hero-visual {height:360px;}
  .ctas {width:100%; gap:8px;}
  .ctas .btn {flex:1 1 calc(50% - 8px); min-width:0; padding:13px 11px; font-size:12px;}
  .ctas .btn.solid {flex-basis:100%;}
  main section {padding-block:64px;}
  main section h2 {font-size:clamp(38px,10vw,52px);}
  main section .lede {font-size:16px; margin-bottom:32px;}
  .offer {grid-template-columns:1fr; gap:19px;}
  .offer .col {padding:25px;}
  .offer .col::before {height:240px; margin:-25px -25px 26px;}
  #servicos .grid {gap:24px;}
  .steps li {grid-template-columns:46px 1fr; gap:12px;}
  .steps li::before {font-size:37px;}
  .steps h3 {font-size:18px;}
  .steps-photo {height:350px; min-height:300px;}
  .extras {grid-template-columns:1fr 1fr;}
  .extra {padding:17px;}
  .extra strong {font-size:14px;}
  .measures {grid-template-columns:1fr; gap:19px;}
  #reservas form {grid-template-columns:1fr; padding:22px;}
  #regras .rules {grid-template-columns:1fr;}
  #contactos .contact {grid-template-columns:1fr 1fr; gap:30px 15px;}
  .contact-photo {height:290px;}
  .contact p,.contact td {font-size:14px;}
  .contact .big {font-size:18px;}
  .contact table.hours {font-size:13px;}
  footer .wrap {gap:10px;}
}

@media (max-width:400px) {
  .extras {grid-template-columns:1fr;}
  #contactos .contact {grid-template-columns:1fr;}
  .contact-photo {grid-column:1; height:300px;}
  .hero-visual {height:310px;}
}
@media (prefers-reduced-motion:reduce) {
  .btn {transition:none;}
}

/* No telemóvel, todas as secções ficam visíveis: evita navegação oculta por scroll. */
@media (max-width:580px) {
  header.top .wrap {display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 12px;}
  header.top a[aria-label] {grid-column:1; grid-row:1;}
  header.top .navgroup {display:contents;}
  header.top .header-options {grid-column:2; grid-row:1; justify-self:end;}
  header.top nav {grid-column:1/-1; grid-row:2; display:flex; flex:initial; flex-wrap:wrap; overflow:visible; white-space:normal; gap:3px 16px; padding-block:4px;}
  header.top nav a {min-height:25px; display:inline-flex; align-items:center;}
  .hero-visual img {object-position:50% 3%;}
}


/* Ajustes finais da montra, fotografias e navegação. */
/* Suavizar discretamente o contorno original sem alterar a imagem/logótipo. */

/* O modelo deve conservar a pose e o rosto visíveis nos diferentes ecrãs. */
.hero-visual img {object-position:center 12%;}
@media (max-width:800px) {
  .hero-visual img {object-position:center 8%;}
}

/* Dar ao letreiro da loja a largura necessária: a primeira letra deixa de ser cortada. */
.steps-photo {aspect-ratio:1.12; height:auto; min-height:0; max-height:none; position:relative; align-self:start;}
.steps-photo img {position:absolute; inset:0; width:100%; height:100%; min-height:0; object-fit:cover; object-position:50% 48%;}

/* Controlo flutuante retomado do BOUTARO, com o mesmo comportamento de ocultação. */
.floating-tools {
  position:fixed; z-index:20;
  right:max(.5rem,env(safe-area-inset-right));
  bottom:max(1.25rem,env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
}
.floating-tools:has(> button:not([hidden])) {
  border:1px solid rgb(247 244 237 / 40%); border-radius:2rem;
  background:rgb(23 50 83 / 86%); color:var(--bg); box-shadow:0 2px 8px #0002;
}
.floating-tools.is-idle:where(:not(:has(> button:focus-visible))) {opacity:0; pointer-events:none;}
@media (hover:hover) and (pointer:fine) {
  .floating-tools.is-idle:hover {opacity:1; pointer-events:auto;}
}
@media (prefers-reduced-motion:no-preference) {
  .floating-tools {transition:opacity .18s ease;}
}
.floating-tools > button {
  position:relative; inset:auto; display:grid; place-items:center;
  width:2.875rem; height:2.875rem; padding:0; border:0; border-radius:2rem;
  background:transparent; color:var(--bg); box-shadow:none; cursor:pointer;
}
.floating-tools > button[hidden] {display:none;}
.floating-tools > button:is(:hover,:focus-visible) {background:#294b70;}
.floating-tools > button:focus-visible {outline:2px solid var(--bg); outline-offset:-4px;}


/* Ajustes finos solicitados na revisão final. */
@media (min-width: 801px) {
  /* O painel do texto define a altura; a fotografia preenche-a sem a ultrapassar. */
  .hero-layout {
    min-height: 0;
    align-items: stretch;
  }
  .hero-copy {
    justify-content: center;
    padding: clamp(28px, 3.2vw, 46px);
  }
  .hero-visual {
    position: relative;
    aspect-ratio: auto;
    min-height: 0;
  }
  .hero-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
  }
}

/* Reposicionamento das fotografias da grelha de oferta. */
.offer .col:first-child::before { background-position: center 37%; }
.offer .col:nth-child(2)::before { background-position: center 61%; }

/* Ajustar a montra do bloco de aluguer, abrindo mais à direita. */
.steps-photo img { object-position: 56% 48%; }

/* Ajustar a fotografia de entrada para privilegiar o lado direito e a zona inferior. */
.contact-photo { min-height: 560px; }
.contact-photo img { object-position: 73% 63%; }

/* Ritmo vertical uniforme: a introdução começa ligeiramente abaixo do topo
   do título em todas as secções de duas colunas. */
@media (min-width: 801px) {
  main section > .wrap > .lede {
    margin-top: clamp(14px, 1.5vw, 22px);
    align-self: start;
  }
}

/* Rodapé com crédito partilhado. */
footer .wrap { align-items: center; }
footer .credit-stack { line-height: 1.65; text-align: right; }
@media (max-width: 800px) {
  footer .credit-stack { text-align: left; }
}

/* Revisão das quatro fotografias interiores (sem alterar as dimensões dos módulos).
   A posição anterior mantinha os vestidos cortados e não centrava os letreiros. */
/* Alfaiataria: mostrar um pouco mais da parte inferior dos fatos no mesmo enquadramento. */
.offer .col:first-child::before { background-position: center 54%; }
/* Vestidos: baixar a fotografia para os cabides e a parte superior ficarem visíveis. */
.offer .col:nth-child(2)::before { background-position: center 43%; }
/* Montra de cerimónia: margem visual equilibrada dos dois lados do nome. */
.steps-photo img { object-position: 28% 48%; }
/* Fachada dos contactos: conservar o lado direito do letreiro e não aumentar
   a altura artificialmente; terminar junto à última linha de horário. */
@media (min-width: 1201px) {
  .contact-photo { min-height: 0; }
}
.contact-photo img { object-position: 100% 49%; }
@media (max-width: 580px) and (orientation: portrait) {
  .contact-photo { width: 100%; height: auto; min-height: 0; max-height: 560px; aspect-ratio: 17 / 25; }
  .contact-photo img { object-position: 90% 49%; }
}


/* Contactos: acções directas, legíveis e acessíveis sem prejudicar a fotografia. */
#contactos .contact { align-items: stretch; gap: clamp(18px,2.3vw,30px) clamp(20px,3.2vw,44px); }
#contactos .contact-detail { min-width: 0; border-top: 1px solid var(--line); padding-top: 16px; }
#contactos .contact h3 { font-size: 12px; letter-spacing: .1em; font-weight: 750; margin: 0 0 12px; }
#contactos .contact p,
#contactos .contact td,
#contactos .contact th,
#contactos .contact .contact-action { font-family: var(--body); font-size: 16px; line-height: 1.55; }
#contactos .contact p { margin: 0; }
#contactos .contact .maps-action { margin-top: 10px; }
#contactos .maps-action a { font-size: 15px; font-weight: 650; text-decoration: underline; }
#contactos .contact-action { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; color: var(--brand); font-weight: 650; min-height: 44px; }
#contactos .contact-action:hover span { text-decoration: underline; text-underline-offset: 3px; }
#contactos .contact-action svg { flex: none; }
#contactos .contact .email-link { overflow-wrap: anywhere; font-size: clamp(14px, 1.2vw, 16px); }
#contactos .contact .email-link span { min-width:0; }
#contactos .contact .social-actions { display: flex; align-items: center; gap: 11px; }
#contactos .contact .social-link { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: #fffdfa; transition: background-color .16s, border-color .16s; }
#contactos .contact .social-link:hover { background: var(--surface); border-color: #aeb2b6; }
#contactos .contact .social-link svg { display: block; }
#contactos .contact .contact-hours { align-self: end; }
#contactos .contact .hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
#contactos .contact .hours th { font-weight: 550; text-align: left; color: var(--ink); }
#contactos .contact .hours td { text-align: right; font-weight: 650; color: var(--brand); white-space: nowrap; }
#contactos .contact .hours th,
#contactos .contact .hours td { border-bottom: 1px solid var(--line); padding: 9px 0; vertical-align: top; }
#contactos .contact .hours th { padding-right: 12px; }
#contactos .contact .hours tbody tr:last-child :is(th,td) { border-bottom: 0; }
#contactos .contact-photo { margin: 0; }
@media (max-width: 1200px) {
  #contactos .contact { gap: 25px 30px; }
  #contactos .contact .hours th,
  #contactos .contact .hours td { padding-block: 10px; }
}
@media (max-width: 580px) {
  #contactos .contact { gap: 24px 16px; }
  #contactos .contact p,
  #contactos .contact td,
  #contactos .contact th,
  #contactos .contact .contact-action { font-size: 15px; }
  #contactos .contact .email-link { font-size: 14px; }
  #contactos .contact .contact-action { gap: 6px; }
  #contactos .contact .hours th,
  #contactos .contact .hours td { font-size: 14px; }
}
@media (max-width: 400px) {
  #contactos .contact .email-link { font-size: 16px; }
  #contactos .contact .contact-action { gap: 10px; }
}

/* Serviços: mesma linha base para todos os títulos e parágrafos. */
#servicos .grid > .item { display: flex; flex-direction: column; }
#servicos .grid > .item h3 { line-height: 1.2; margin: 0 0 14px; }
#servicos .grid > .item p { margin: 0; }

/* Revisão 8: acção principal única e grelha de serviços com linhas partilhadas.
   A linha do título é igual nas três colunas e o corpo inicia na mesma coordenada. */
.hero .ctas { justify-content: flex-start; }
.hero .ctas .btn { min-width: 158px; }
@media (max-width: 580px) {
  .hero .ctas { width: auto; }
  .hero .ctas .btn.solid { flex: 0 0 auto; min-width: 160px; }
}
#servicos .grid { align-items: stretch; }
#servicos .grid > .item {
  display: grid;
  grid-template-rows: minmax(50px,auto) 1fr;
  align-content: start;
  min-height: 185px;
}
#servicos .grid > .item h3 {
  margin: 0;
  line-height: 1.2;
  align-self: start;
}
#servicos .grid > .item p {
  margin: 0;
  align-self: start;
  line-height: 1.7;
}
@media (max-width: 580px) {
  #servicos .grid > .item { min-height: 0; grid-template-rows: minmax(44px,auto) auto; }
}


/* Revisão 9 — cabeçalho compacto ao deslizar, seguindo o BOUTARO.
   Apenas reduz espaço vertical e logótipo; não diminui as letras do menu. */
html { scroll-padding-top: calc(var(--ar-header-height, 125px) + 12px); }
header.top { z-index: 30; }
header.top.is-compact .wrap {
  min-height: 0;
  padding-block: 4px;
}
header.top.is-compact .header-logo { width: clamp(155px, 13vw, 180px); }
header.top.is-compact .lang button { min-height: 34px; }

@media (max-width: 1200px) {
  header.top.is-compact .wrap { row-gap: 3px; padding-block: 4px; }
  header.top.is-compact .header-logo { width: clamp(160px, 21vw, 184px); }
}
@media (max-width: 800px) {
  header.top.is-compact .wrap { row-gap: 4px; padding-block: 4px; }
  header.top.is-compact .header-logo { width: clamp(154px, 31vw, 172px); }
}
@media (max-width: 580px) {
  header.top.is-compact .wrap {
    row-gap: 3px;
    padding-block: 4px 3px;
  }
  header.top.is-compact .header-logo { width: clamp(142px, 37vw, 160px); }
  header.top.is-compact nav { padding-block: 2px; }
}
@media (prefers-reduced-motion: no-preference) {
  header.top .wrap { transition: padding-block .22s ease, row-gap .22s ease, min-height .22s ease; }
  header.top .header-logo { transition: width .22s ease; }
  header.top .lang button { transition: min-height .22s ease; }
}


/* Revisão v10: subir ligeiramente os fatos no enquadramento, sem alterar o tamanho do módulo. */
.offer .col:first-child::before { background-position: center 78%; }

/* Revisão 11 — áreas táteis confortáveis sem abandonar o cabeçalho compacto.
   No telemóvel, manter todas as ligações visíveis e a redução do cabeçalho.
   Os 44 px pertencem ao alvo inteiro, não apenas ao texto. */
@media (max-width: 800px) {
  header.top nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding-inline: 3px;
    font-size: 13px;
    line-height: 1.2;
  }
  header.top .lang button,
  header.top.is-compact .lang button {
    min-width: 44px;
    min-height: 44px;
  }
  header.top nav { column-gap: 10px; }
}
@media (max-width: 580px) {
  header.top .wrap { row-gap: 3px; padding-block: 6px 5px; }
  header.top a[aria-label] { display: inline-flex; align-items: center; min-height: 44px; }
  header.top nav {
    gap: 0 8px;
    padding-block: 0;
    align-items: center;
  }
  header.top.is-compact .wrap {
    row-gap: 2px;
    padding-block: 2px;
  }
  header.top.is-compact nav { padding-block: 0; }
}

/* Revisão v11 — alvos de toque confortáveis em todas as resoluções.
   O cabeçalho continua a encolher, mas sem reduzir as áreas clicáveis. */
header.top a[href="#inicio"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
header.top nav {
  align-items: center;
  column-gap: clamp(3px, .65vw, 10px);
  row-gap: 2px;
  font-size: clamp(13px, .98vw, 14px);
}
header.top nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 7px 5px;
  line-height: 1.25;
}
header.top .lang button,
header.top.is-compact .lang button {
  min-height: 44px;
  min-width: 44px;
}
@media (max-width: 800px) {
  header.top nav { font-size: 13px; column-gap: 4px; }
}
@media (max-width: 580px) {
  header.top nav { font-size: 13px; column-gap: 2px; row-gap: 2px; padding-block: 2px; }
  header.top.is-compact nav { padding-block: 2px; }
  header.top nav a { padding-inline: 5px; }
}

/* Em telemóveis estreitos, só o estado compacto usa uma fila horizontal
   deslocável; mantém o cabeçalho pequeno sem sacrificar alvos de 44px.
   No topo, todas as ligações continuam visíveis em duas linhas. */
@media (max-width: 580px) {
  header.top.is-compact nav {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  header.top.is-compact nav a {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

.international-showcase {
  background: #e4e8e8;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 55rem) {
  .international-showcase {
    display: grid;
    align-items: center;
    min-block-size: calc(clamp(3rem, 6vw, 5rem) + 3.3rem);
    padding-block: .75rem;
  }
}
.international-showcase-inner {
  inline-size: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.international-showcase-logo {
  width: 11rem;
  max-width: 100%;
  cursor: zoom-in;
}
.international-showcase-logo img,
.international-showcase-dialog img {
  display: block;
  width: 100%;
  height: auto;
}
.international-showcase-dialog {
  width: min(35rem, calc(100% - 2rem));
  padding: 3.25rem clamp(1rem, 4vw, 2rem) clamp(1rem, 4vw, 2rem);
  border: 1px solid var(--line);
  background: var(--bg);
}
.international-showcase-dialog:not([open]) { display: none; }
.international-showcase-dialog::backdrop { background: rgb(23 50 83 / 60%); }
.international-showcase-dialog form {
  position: absolute;
  inset-block-start: .25rem;
  inset-inline-end: .25rem;
  display: block;
  padding: 0;
  background: transparent;
}
.international-showcase-close {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font: 400 1.75rem/1 var(--body);
  cursor: pointer;
}
.international-showcase-close:hover { background: var(--surface); }
.international-showcase-close:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.international-showcase-copy {
  flex: 1 1 22rem;
  max-width: 44.625rem;
}
.international-showcase-copy p { margin: 0; font-weight: 700; }
.international-showcase-link {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  color: var(--brand);
  font: inherit;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.international-showcase-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Efeito de ampliação das ligações, igual ao do BOUTARO. */
@media (prefers-reduced-motion: no-preference) {
  #contactos .maps-action a,
  footer .credit a { display: inline-block; }

  a[href] {
    transform-origin: left center;
    transition: transform .2s ease, color .2s ease, background-color .2s ease;
  }
  header.top nav a,
  #contactos .social-link { transform-origin: center; }
  #contactos .contact .social-link {
    transition: transform .2s ease, background-color .16s, border-color .16s;
  }
  .international-showcase-link > span[aria-hidden="true"] { transition: transform .2s ease; }

  a[href]:focus-visible { transform: translateY(-1px) scale(1.03); }
  .international-showcase-link:focus-visible > span[aria-hidden="true"] { transform: translate(2px, -2px); }

  @media (hover: hover) and (pointer: fine) {
    a[href]:hover { transform: translateY(-1px) scale(1.03); }
    .international-showcase-link:hover > span[aria-hidden="true"] { transform: translate(2px, -2px); }
  }
}

/* Modo escuro: azul do site original, com superfícies em ardósia. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151d29;
  --surface: #212c3a;
  --ink: #f3ede2;
  --muted: #c2c7d0;
  --line: #526173;
  --brand: #07316d;
  --brand-ink: #fffdf9;
  --accent: #d7c6a0;
  --tape: #cbbf9f;
  --tape-ink: #2b2518;
  --night-navy: #121d33;
}
.header-options { display: flex; flex: none; align-items: center; gap: 14px; }
@media (width > 580px) {
  header.top .navgroup {
    --header-control-gap: clamp(12px, 1.7vw, 26px);
    column-gap: var(--header-control-gap);
  }
  .header-options { gap: calc(var(--header-control-gap) + 3px); }
}
@media (580px < width <= 800px) {
  header.top .navgroup { --header-control-gap: 12px; }
}
header.top > .wrap { padding-inline-end: max(.75rem, env(safe-area-inset-right)); }
@media (width > 580px) {
  header.top > .wrap { padding-inline-end: max(calc(var(--gutter) - 2px), env(safe-area-inset-right)); }
}
@media (580px < width < 960px) {
  header.top .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  header.top a[href="#inicio"] { grid-area: 1 / 1; }
  header.top .navgroup { display: contents; }
  header.top .header-options { grid-area: 1 / 2; }
  header.top nav {
    grid-area: 2 / 1 / auto / -1;
    flex-wrap: wrap;
    overflow: visible;
  }
}
@media (960px <= width <= 1200px) {
  header.top .wrap { flex-wrap: nowrap; }
  header.top .navgroup { flex: 0 1 auto; margin-inline-start: auto; justify-content: flex-end; }
}
.theme-toggle {
  display: inline-grid;
  place-items: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
}
.theme-track {
  position: relative;
  inline-size: 40px;
  block-size: 24px;
  border: 2px solid currentColor;
  border-radius: 999px;
}
.theme-track::after {
  content: "";
  position: absolute;
  inset: 2px auto auto 2px;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: #c7ad7e;
}
.theme-toggle[aria-checked="true"] .theme-track::after {
  background: radial-gradient(circle at 30% 32%, transparent 8px, #f3ede2 8.5px);
  transform: translateX(16px);
}
@media (prefers-reduced-motion: no-preference) {
  .theme-track::after { transition: transform .18s ease; }
}
@media (max-width: 580px) {
  header.top a[href="#inicio"] { min-width: 0; max-width: 100%; }
  header.top .header-logo { max-width: 100%; }
}
[data-theme="dark"] header.top { background: rgb(18 29 51 / 97%); }
[data-theme="dark"] header.top .header-logo { filter: brightness(0) saturate(100%) invert(94%) sepia(13%) saturate(253%) hue-rotate(340deg) brightness(102%); }
[data-theme="dark"] :is(footer, #reservas) { background: var(--night-navy); }
[data-theme="dark"] #aluguer { --hire-bg: var(--surface); }
[data-theme="dark"] :is(.offer .col, #medidas, #perguntas, #reservas form, .international-showcase, .out pre) { background: var(--surface); }
[data-theme="dark"] :is(form input, form select, form textarea) { background: var(--bg); border-color: #8492a3; }
[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
[data-theme="dark"] :is(.hero .eyebrow, .kicker, table.prices td, .price-note, .extra strong, form label, .rules h3, .international-showcase-link, .international-showcase-close),
[data-theme="dark"] header.top nav a:hover,
[data-theme="dark"] #contactos :is(.contact-action, .contact .hours td),
[data-theme="dark"] .btn:not(.solid):not(.brand) { color: var(--accent); }
[data-theme="dark"] :is(.steps li::before, .measure svg) { color: var(--tape); }
[data-theme="dark"] :is(.btn.solid, .btn.brand, .lang button[aria-pressed="true"], .language-suggestion-accept) { border: 1px solid #8ba3be; }
[data-theme="dark"] :is(.btn.solid, .btn.brand):hover { border-color: #b6c9dc; }
[data-theme="dark"] .btn:not(.solid):not(.brand):hover { background: var(--surface); border-color: var(--accent); }
[data-theme="dark"] :is(a,button,input,select,textarea,summary):focus-visible { outline-color: var(--accent); }
[data-theme="dark"] :is(form input, form select, form textarea):focus { border-color: var(--accent); }
[data-theme="dark"] :is(#perguntas details, .out pre) { border-color: var(--line); }
[data-theme="dark"] #contactos .contact .social-link { background: var(--night-navy); border-color: #8492a3; }
[data-theme="dark"] #contactos .contact .social-link:hover { background: var(--surface); }
[data-theme="dark"] .floating-tools > button { color: var(--brand-ink); }
[data-theme="dark"] .international-showcase-logo { background: #f3ede2; }
[data-theme="dark"] .international-showcase-dialog {
  color-scheme: light;
  background: #f7f4ed;
  border-color: #d5cdbf;
}
[data-theme="dark"] .international-showcase-dialog .international-showcase-close { color: #173253; }
[data-theme="dark"] .international-showcase-dialog .international-showcase-close:hover { background: #eee9df; }
[data-theme="dark"] .international-showcase-dialog .international-showcase-close:focus-visible { outline-color: #173253; }
[data-theme="dark"] .international-showcase-logo { box-shadow: 0 0 0 8px #f3ede2; }
[data-theme="dark"] .international-showcase-logo:focus-visible { outline-offset: 10px; }

@media (400px < width <= 1200px) {
  .extras::after {
    content: "";
    background: var(--hire-bg);
  }
}