/* Meridia — estilos do tema.
   Tokens: tinta (texto), mar (ação), areia e mar-claro (zonas de imagem), névoa (fundos suaves). */

:root {
	--tinta: #13233a;
	--suave: #4a5568;
	--linha: #dde2e6;
	--linha-forte: #cbd2d8;
	--nevoa: #f2f4f5;
	--fundo: #ffffff;
	--mar: #0e5a5f;
	--mar-escuro: #0a4246;
	--mar-claro: #dce6e6;
	--mar-texto: #2e4a4c;
	--areia: #e8dfd0;
	--areia-texto: #5c4a32;
	--ok: #1f6b3a;
	--ok-fundo: #eaf5ee;
	--erro: #a12a1f;

	--letra-titulo: "Instrument Serif", Georgia, "Times New Roman", serif;
	--letra-texto: Manrope, "Helvetica Neue", Helvetica, sans-serif;

	--raio: 12px;
	--raio-grande: 16px;
	--largura: 1200px;
}

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

body {
	margin: 0;
	font-family: var(--letra-texto);
	font-size: 16px;
	line-height: 1.6;
	color: var(--tinta);
	background: var(--fundo);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--mar); }
a:hover { color: var(--mar-escuro); }

:focus-visible { outline: 3px solid var(--mar); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Estrutura */

.m-contentor { max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
.m-seccao { padding-top: 80px; }
.m-seccao--topo { padding-top: 32px; }
.m-leitura { max-width: 760px; }

.m-saltar {
	position: absolute; left: 16px; top: -60px;
	background: var(--tinta); color: #fff; padding: 12px 16px; border-radius: 8px; z-index: 10;
}
.m-saltar:focus { top: 16px; color: #fff; }

.m-aviso {
	margin: 24px 0; padding: 16px; border-radius: var(--raio);
	background: #fdf1ef; color: var(--erro); border: 1px solid #f2c9c3;
}

.m-suave { color: var(--suave); }

/* ---------- Tipografia */

.m-titulo-xl,
.m-titulo-l {
	font-family: var(--letra-titulo);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0;
}
.m-titulo-xl { font-size: clamp(40px, 6vw, 64px); line-height: 1.04; }
.m-titulo-l { font-size: clamp(32px, 4vw, 44px); line-height: 1.1; }
.m-titulo-m { font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0 0 16px; }
.m-titulo--claro { color: #fff; }
.m-lead { font-size: 18px; color: var(--suave); max-width: 60ch; margin: 16px 0 0; }

.m-texto { font-size: 17px; line-height: 1.7; color: #2d3b4e; max-width: 70ch; }
.m-texto p { margin: 0 0 12px; }

/* ---------- Botões e campos */

.m-botao {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 12px 22px;
	font: inherit; font-weight: 600; font-size: 16px; text-decoration: none;
	color: #fff; background: var(--mar);
	border: 1px solid var(--mar); border-radius: 8px; cursor: pointer;
}
.m-botao:hover { background: var(--mar-escuro); border-color: var(--mar-escuro); color: #fff; }
.m-botao[disabled] { opacity: 0.6; cursor: progress; }
.m-botao--redondo { border-radius: 999px; }
.m-botao--claro { background: #9fd3d6; border-color: #9fd3d6; color: #0a3336; }
.m-botao--claro:hover { background: #fff; border-color: #fff; color: var(--tinta); }
.m-botao--contorno { background: #fff; color: var(--tinta); border-color: var(--linha-forte); border-radius: 999px; min-height: 44px; font-size: 14px; }
.m-botao--contorno:hover { background: var(--nevoa); color: var(--tinta); border-color: var(--linha-forte); }

.m-campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--suave); }
.m-campo input,
.m-campo select {
	font: inherit; font-size: 16px; font-weight: 500; color: var(--tinta);
	min-height: 48px; padding: 11px 12px;
	border: 1px solid var(--linha-forte); border-radius: 8px; background: #fff; width: 100%;
}

/* ---------- Topo */

.m-topo { border-bottom: 1px solid #e3e7ea; }
.m-topo__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.m-marca { font-family: var(--letra-titulo); font-size: 30px; color: var(--tinta); text-decoration: none; line-height: 1; }
.m-marca img { max-height: 48px; width: auto; }
.m-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.m-nav__lista { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 0; padding: 0; font-weight: 500; font-size: 15px; }
.m-nav__lista a { color: var(--tinta); text-decoration: none; }
.m-nav__lista a:hover,
.m-nav__lista .current-menu-item a { color: var(--mar); }
.m-idiomas select { font: inherit; font-size: 14px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--linha-forte); border-radius: 8px; background: #fff; color: var(--tinta); }

/* ---------- Home */

.m-abertura { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px; align-items: center; padding-top: 48px; }
.m-abertura__texto { display: flex; flex-direction: column; gap: 4px; }
.m-abertura__imagem .m-marcador,
.m-abertura__imagem .m-imagem { min-height: 380px; border-radius: var(--raio-grande); object-fit: cover; width: 100%; height: 100%; }

.m-pesquisa {
	margin-top: 32px; padding: 20px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; align-items: end;
	border: 1px solid var(--linha); border-radius: var(--raio-grande); background: #fff;
}

.m-grelha { display: grid; gap: 24px; margin-top: 24px; }
.m-grelha--destinos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.m-grelha--hoteis { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

.m-destino { display: flex; flex-direction: column; gap: 6px; color: var(--tinta); text-decoration: none; }
.m-destino .m-marcador { height: 200px; border-radius: var(--raio); }
.m-destino__linha { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 6px; }
.m-destino__nome { font-size: 20px; font-weight: 600; }
.m-destino:hover .m-destino__nome { color: var(--mar); }

.m-faixa-concierge {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px; align-items: center;
	padding: 40px; border-radius: 20px; background: var(--tinta); color: #fff;
}
.m-faixa-concierge__texto { color: #d5dce3; margin: 12px 0 0; }
.m-faixa-concierge__acoes { display: flex; flex-direction: column; gap: 12px; }
.m-faixa-concierge .m-sugestao { background: #fff; border-color: #fff; }

/* ---------- Marcadores de imagem */

.m-marcador { display: flex; align-items: flex-end; padding: 12px; width: 100%; height: 100%; min-height: 160px; }
.m-marcador span { font-size: 12px; padding: 4px 8px; border-radius: 6px; }
.m-marcador--areia { background: var(--areia); }
.m-marcador--areia span { background: #f6f1e8; color: var(--areia-texto); }
.m-marcador--mar { background: var(--mar-claro); }
.m-marcador--mar span { background: #eef4f4; color: var(--mar-texto); }

/* ---------- Cartão de hotel */

.m-cartao-hotel { border: 1px solid var(--linha); border-radius: var(--raio-grande); overflow: hidden; background: #fff; }
.m-cartao-hotel__ligacao { display: flex; flex-direction: column; height: 100%; color: var(--tinta); text-decoration: none; }
.m-cartao-hotel__imagem { height: 220px; }
.m-cartao-hotel__imagem .m-imagem { width: 100%; height: 100%; object-fit: cover; }
.m-cartao-hotel__corpo { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.m-cartao-hotel__local { font-size: 13px; font-weight: 600; color: var(--mar); }
.m-cartao-hotel__nome { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.25; }
.m-cartao-hotel__acao { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--mar); }
.m-cartao-hotel__ligacao:hover .m-cartao-hotel__nome { color: var(--mar); }

.m-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.m-etiquetas li { font-size: 13px; background: var(--nevoa); padding: 6px 10px; border-radius: 999px; }
.m-etiquetas--ligacoes { margin-top: 20px; }
.m-etiquetas--ligacoes li { padding: 0; }
.m-etiquetas--ligacoes a { display: block; padding: 10px 14px; text-decoration: none; color: var(--tinta); font-weight: 600; }

.m-sugestao {
	display: block; font: inherit; font-size: 15px; text-align: left; text-decoration: none;
	min-height: 44px; padding: 12px 16px; border-radius: var(--raio);
	color: var(--tinta); background: #fff; border: 1px solid var(--linha-forte); cursor: pointer;
}
.m-sugestao:hover { background: var(--nevoa); color: var(--tinta); }

/* ---------- Hotel e quarto */

.m-hotel { padding-top: 24px; }

.m-migalhas ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--suave); }
.m-migalhas li + li::before { content: "›"; margin-right: 8px; color: var(--suave); }

.m-hotel__cabecalho { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 20px; }
.m-hotel__categoria { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--mar); }
.m-hotel__cabecalho .m-suave { margin: 8px 0 0; }

.m-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; margin-top: 24px; }
.m-galeria__item { height: 340px; border-radius: 14px; overflow: hidden; }
.m-galeria__item .m-imagem { width: 100%; height: 100%; object-fit: cover; }
.m-galeria--uma .m-galeria__item { height: 420px; }

.m-hotel__corpo { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; margin-top: 40px; }
.m-hotel__conteudo { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 48px; }

.m-factos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; margin: 0; }
.m-facto { border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.m-facto dt { font-size: 13px; color: var(--suave); }
.m-facto dd { margin: 4px 0 0; font-size: 17px; font-weight: 600; line-height: 1.4; }

.m-quartos { display: flex; flex-direction: column; gap: 16px; }
.m-quarto { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: 16px; border: 1px solid var(--linha); border-radius: 14px; }
.m-quarto__imagem { flex: 0 0 180px; height: 120px; border-radius: 10px; overflow: hidden; }
.m-quarto__imagem .m-imagem,
.m-quarto__imagem img { width: 100%; height: 100%; object-fit: cover; }
.m-quarto__imagem .m-marcador { min-height: 120px; }
.m-quarto__info { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; }
.m-quarto__nome { margin: 0; font-size: 20px; font-weight: 600; }
.m-quarto__nome a { color: var(--tinta); text-decoration: none; }
.m-quarto__nome a:hover { color: var(--mar); }
.m-quarto__preco { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.m-quarto__preco[hidden] { display: none; }
.m-preco__valor { font-size: 20px; font-weight: 700; }
.m-preco__noite { font-size: 14px; font-weight: 500; color: var(--suave); }
.m-preco__estado { font-size: 13px; color: var(--ok); }
.m-preco__estado--nao { color: var(--suave); }
.m-quarto__preco .m-botao { min-height: 40px; padding: 8px 16px; font-size: 14px; }

.m-tabela { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); }
.m-tabela table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 15px; }
.m-tabela th { text-align: left; background: #f7f8f9; }
.m-tabela th,
.m-tabela td { padding: 12px 16px; }
.m-tabela tbody tr { border-top: 1px solid #e3e7ea; }

.m-faq { display: flex; flex-direction: column; gap: 10px; }
.m-faq details { border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.m-faq summary { font-weight: 600; cursor: pointer; }
.m-faq p { margin: 10px 0 0; color: #2d3b4e; }

.m-reserva {
	flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px;
	padding: 24px; border: 1px solid var(--linha); border-radius: var(--raio-grande);
}
.m-reserva .m-titulo-m { margin: 0; }
.m-reserva .m-suave { margin: 0; font-size: 14px; }
.m-reserva__form { display: flex; flex-direction: column; gap: 14px; }
.m-reserva__duplo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.m-reserva__estado { margin: 0; font-size: 14px; line-height: 1.5; }
.m-reserva__estado:empty { display: none; }
.m-reserva__estado.e-ok { color: var(--ok); background: var(--ok-fundo); padding: 12px; border-radius: 8px; }
.m-reserva__estado.e-erro { color: var(--erro); }
.m-reserva__nota { margin: 0; font-size: 12px; color: var(--suave); }
.m-reserva__concierge { font-weight: 600; font-size: 15px; }

/* ---------- Concierge */

.m-concierge { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.m-chat { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: 20px; overflow: hidden; background: #fff; }
.m-chat__topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid #e3e7ea; }
.m-chat__topo .m-suave { margin: 4px 0 0; font-size: 14px; }
.m-chat__mensagens { display: flex; flex-direction: column; gap: 16px; padding: 24px; min-height: 420px; }
.m-chat__sugestoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px 16px; }
.m-chat__sugestoes .m-sugestao { border-radius: 999px; font-size: 14px; padding: 10px 14px; }
.m-chat__form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 16px 24px 24px; border-top: 1px solid #e3e7ea; }
.m-chat__campo { flex: 1 1 260px; }
.m-chat__erro { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--erro); }
.m-chat__erro:empty { display: none; }
.m-concierge__lado { flex: 1 1 280px; }

.m-msg { display: flex; flex-direction: column; gap: 8px; max-width: 80%; }
.m-msg--cliente { align-self: flex-end; }
.m-msg--concierge { align-self: flex-start; }
.m-msg__texto { padding: 12px 16px; font-size: 16px; line-height: 1.6; white-space: pre-line; }
.m-msg--cliente .m-msg__texto { background: var(--tinta); color: #fff; border-radius: 16px 16px 4px 16px; }
.m-msg--concierge .m-msg__texto { background: var(--nevoa); border-radius: 16px 16px 16px 4px; }
.m-msg--a-pensar .m-msg__texto { color: var(--suave); }
.m-msg .m-botao { align-self: flex-start; min-height: 40px; padding: 8px 16px; font-size: 14px; }

/* ---------- Rodapé */

.m-rodape { margin-top: 80px; border-top: 1px solid #e3e7ea; background: #f7f8f9; font-size: 14px; }
.m-rodape__grelha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 32px; padding-top: 48px; padding-bottom: 32px; }
.m-rodape__coluna { display: flex; flex-direction: column; gap: 10px; }
.m-rodape__marca { font-family: var(--letra-titulo); font-size: 26px; }
.m-rodape__titulo { margin: 0; font-size: 14px; font-weight: 700; }
.m-rodape__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.m-rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 16px; padding-bottom: 32px; color: var(--suave); }

@media (max-width: 640px) {
	.m-seccao { padding-top: 56px; }
	.m-faixa-concierge { padding: 24px; }
	.m-quarto__imagem { flex-basis: 100%; height: 180px; }
	.m-quarto__preco { align-items: flex-start; text-align: left; }
	.m-msg { max-width: 92%; }
	.m-galeria__item { height: 240px; }
}