/* Pousada Varanda Azul: the guesthouse's own design (a fictional example by Site na Conversa).
   Built only from its kit: five colours, Lora (titles) and SNC Texto (Source Sans 3, text), the logo and three drawings.
   The frame (.snc-band, .snc-cta) is moldura.css's: nothing here styles it, and element rules stay inside the
   business's own header, main and footer. */
@font-face{font-family:Lora;src:url('/exemplos/fontes/Lora-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Lora;src:url('/exemplos/fontes/Lora-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'SNC Texto';src:url('/assets/snc-texto-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SNC Texto';src:url('/assets/snc-texto-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --tinta:#243746;   /* texto escuro */
  --cal:#faf7f0;     /* fundo da página */
  --acento:#4f87a0;  /* azul suave: só detalhes, nunca texto */
  --varanda:#245b78; /* botão principal */
  --nevoa:#e3eef0;   /* painéis */
  --branco:#fff;     /* só o texto dos botões */
  --linha:color-mix(in srgb,var(--acento) 32%,var(--cal));
  --titulo:Lora,Georgia,'Times New Roman',serif;
  --texto:'SNC Texto','Source Sans 3',Arial,sans-serif;
  --margem:max(16px,4vw,calc((100% - 1160px) / 2));
  --espaco:clamp(3.5rem,2.4rem + 4.4vw,6.5rem);
  --beiral:22px;
  --icone-conversa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a8.5 8.5 0 0 0-7.4 12.7L3.5 20.5l4.4-1.1A8.5 8.5 0 1 0 12 3.5z'/%3E%3Ccircle cx='8.4' cy='12' r='1.15' fill='black' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.15' fill='black' stroke='none'/%3E%3Ccircle cx='15.6' cy='12' r='1.15' fill='black' stroke='none'/%3E%3C/svg%3E");
  --icone-pessoa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20.2c.9-3.7 3.7-5.7 7.2-5.7s6.3 2 7.2 5.7'/%3E%3C/svg%3E");
  --icone-cama:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5v14M3 16h18M21 16v3.5M3 12.5h14.5a3.5 3.5 0 0 1 3.5 3.5'/%3E%3Crect x='5.5' y='8.5' width='5' height='4' rx='1.3'/%3E%3C/svg%3E");
  --icone-certo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M7.9 12.3l2.8 2.8 5.5-5.8'/%3E%3C/svg%3E");
  --icone-relogio:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.2V12l3.2 2'/%3E%3C/svg%3E");
  --icone-idiomas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M2.8 12h18.4M12 2.8c2.6 2.6 3.9 5.6 3.9 9.2s-1.3 6.6-3.9 9.2c-2.6-2.6-3.9-5.6-3.9-9.2S9.4 5.4 12 2.8z'/%3E%3C/svg%3E");
}

/* From 37.5em the frame's band is sticky: anchors and focus land below it. 72 px at normal text; the band grows with
   enlarged text, so the padding grows with the root size and the width. Below 37.5em the band scrolls away with the
   page, so 72 px is enough. */
html{scroll-padding-top:72px;scroll-padding-top:max(72px,calc(7rem - 40px))}
@media (max-width:47.99em){html{scroll-padding-top:max(72px,calc(17rem - 200px))}}
@media (max-width:37.49em){html{scroll-padding-top:72px}}
body{margin:0;background:var(--cal);color:var(--tinta);font:400 1.0625rem/1.6 var(--texto)}
*,*::before,*::after{box-sizing:border-box}
:where(.topo,main,.rodape) :where(h1,h2,h3,p,ul,figure){margin:0}
:where(.topo,main,.rodape) img{display:block;max-width:100%;height:auto}
:where(main) :where(h1,h2,h3){font-family:var(--titulo);color:var(--tinta);text-wrap:balance;overflow-wrap:anywhere}
:where(main) :where(p,li){text-wrap:pretty;overflow-wrap:anywhere}
main h1{font-weight:500;font-size:clamp(2.5rem,1.75rem + 3.1vw,4.25rem);line-height:1.06;letter-spacing:-.015em}
main h2{font-weight:500;font-size:clamp(2rem,1.6rem + 1.7vw,2.875rem);line-height:1.12;letter-spacing:-.01em}
main h3{font-weight:600;font-size:1.375rem;line-height:1.25}
main:focus{outline:none}

/* Icons: line drawings in the page's own CSS, painted in the text's colour through a mask. */
.demo-wa>summary::before,.quarto-fatos li::before,.incluido-lista li::before,.contato-lista li::before{content:"";flex:none;display:inline-block;width:1.375rem;height:1.375rem;background:currentColor;-webkit-mask:var(--icone) center/contain no-repeat;mask:var(--icone) center/contain no-repeat}

/* Skip link: hidden until the keyboard reaches it, then over the band. */
.pular{position:absolute;top:8px;left:8px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:8px;background:var(--cal);color:var(--tinta);font:600 1rem/1.3 var(--texto);text-decoration:underline;text-underline-offset:.2em}
.pular:not(:focus){width:1px;height:1px;min-height:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pular:focus-visible{outline:3px solid var(--cal);outline-offset:3px}

/* Focus: one clear ring in the veranda blue on every light background. */
:where(.topo,main) :is(a,summary):focus-visible{outline:3px solid var(--varanda);outline-offset:3px}

/* Header: the full logo (280 px or more), the language switch, four section links: the source order is the order
   on screen at every width. Phones: the switch beside the logo (or on its own line when it does not fit), the links
   below. Desktop: one row, the switch leading the links. */
.topo{padding:10px var(--margem) 4px;background:var(--cal)}
.topo-grade{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
.marca{display:inline-flex;align-items:center;min-height:44px;padding:6px 0;margin-right:auto;border-radius:4px}
.marca img{width:280px}
.idioma{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;color:var(--varanda);font-weight:600;font-size:1rem;line-height:1.2;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.25em;border-radius:6px}
.idioma:hover{text-decoration-thickness:2.5px}
.menu{flex:1 1 100%}
.menu ul{display:flex;flex-wrap:wrap;margin:0 0 0 -10px;padding:0;list-style:none}
.menu a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:6px;color:var(--tinta);font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none}
.menu a:hover{color:var(--varanda);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--acento);text-underline-offset:.4em}

/* The demonstration WhatsApp button: a native disclosure styled as the kit's main button. */
.demo-wa>summary{--icone:var(--icone-conversa);display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 24px 12px 18px;border-radius:10px;background:var(--varanda);color:var(--branco);font:600 1.0625rem/1.3 var(--texto);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.demo-wa>summary::-webkit-details-marker{display:none}
.demo-wa>summary:hover,.demo-wa[open]>summary{background:var(--tinta)}
.demo-wa-painel{position:relative;max-width:29rem;margin-top:16px;padding:16px 20px 18px;border:1.5px solid var(--acento);border-radius:6px 16px 16px;background:var(--cal);color:var(--tinta);font-size:1.0625rem;line-height:1.55;text-align:left}
.demo-wa-painel::before{content:"";position:absolute;top:-8.5px;left:26px;width:15px;height:15px;border-top:1.5px solid var(--acento);border-left:1.5px solid var(--acento);border-top-left-radius:3px;background:var(--cal);transform:rotate(45deg)}
.demo-wa-painel p+p{margin-top:8px;font-weight:600}

/* Hero: the veranda itself, a soft blue panel under a painted eave trim, the hammock standing on its floor. */
.hero{position:relative;padding:calc(var(--beiral) + clamp(2rem,1.2rem + 3.2vw,4.25rem)) var(--margem) 6px;background:var(--nevoa)}
.hero::before,.contato::before{content:"";position:absolute;top:0;left:0;right:0;height:var(--beiral);background:linear-gradient(var(--varanda),var(--varanda)) 0 0/100% 8px no-repeat,radial-gradient(circle at 50% 0,var(--varanda) 9.4px,transparent 10px) 50% 8px/24px 14px repeat-x}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--varanda)}
.hero-grade{display:grid;gap:clamp(1.75rem,1rem + 3vw,3rem)}
.hero-linha{max-width:31rem;margin-top:1rem;font-size:clamp(1.1875rem,1.05rem + .55vw,1.4375rem);line-height:1.5}
.hero .demo-wa{margin-top:1.75rem}
.hero-arte img{width:100%;max-width:560px;margin:0 auto}

/* Sections. Two cal sections in a row share a hairline instead of a double gap. */
.secao{padding:var(--espaco) var(--margem)}
.secao--cal+.secao--cal{padding-top:0}
.secao--cal+.secao--cal>.secao-corpo{padding-top:var(--espaco);border-top:1px solid var(--linha)}
.quartos-intro p,.contato .secao-corpo>p{margin-top:1.25rem}

/* About: the old key in an arched doorway. */
.sobre-grade{display:grid;gap:2.5rem;align-items:center}
.sobre-texto>*+*{margin-top:1rem}
.sobre-texto>h2+p{margin-top:1.25rem}
.sobre-texto p{max-width:36rem}
.sobre-texto .sobre-fecho{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--linha);font-family:var(--titulo);font-weight:500;font-size:1.3125rem;line-height:1.5}
.arco{display:grid;place-items:end center;width:100%;max-width:20rem;margin-inline:auto;aspect-ratio:1/1;padding:0 12% 15%;border-radius:50% 50% 18px 18px/50% 50% 18px 18px;background:var(--nevoa)}
.arco img{width:100%}

/* Rooms and rates. */
.quartos-intro p{max-width:40rem}
.quartos-lista{display:grid;gap:1.25rem;margin:2.5rem 0 0;padding:0;list-style:none}
.quarto{display:flex;flex-direction:column;padding:1.75rem 1.5rem 1.5rem;border-radius:16px;background:var(--nevoa)}
.quarto>p:first-of-type{margin-top:.625rem}
.quarto-fatos{display:grid;gap:.375rem;margin-top:1rem;padding:0;list-style:none;font-size:1rem;font-weight:600}
.quarto-fatos li{display:flex;align-items:center;gap:10px}
.quarto-fatos li::before{color:var(--varanda)}
.fato-pessoas{--icone:var(--icone-pessoa)}
.fato-camas{--icone:var(--icone-cama)}
.quarto-preco{margin-top:auto;padding-top:1.5rem}
.quarto-preco::before{content:"";display:block;height:1px;margin-bottom:1rem;background:var(--linha)}
.quarto-preco strong{display:block;font-family:var(--titulo);font-weight:600;font-size:2rem;line-height:1.1;color:var(--tinta);overflow-wrap:normal}
.quartos-nota{max-width:40rem;margin-top:1.5rem;padding-left:1rem;border-left:3px solid var(--acento);font-size:1rem}
.incluido{display:grid;gap:2.5rem;align-items:center;margin-top:clamp(3rem,2rem + 3vw,4.5rem)}
.incluido-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr));gap:0 1.5rem;margin-top:1rem;padding:0;list-style:none}
.incluido-lista li{--icone:var(--icone-certo);display:flex;align-items:center;gap:12px;padding:.3125rem 0}
.incluido-lista li::before{color:var(--varanda)}
.mesa{display:grid;place-items:center;width:100%;max-width:20rem;margin-inline:auto;aspect-ratio:1/1;border-radius:50%;background:var(--nevoa)}
.mesa img{width:80%}

/* Times and policies: two plain cards on the blue band. */
.regras{background:var(--nevoa)}
.regras-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));gap:1.25rem;margin-top:2rem}
.cartao{padding:1.75rem 1.5rem 1.25rem;border-radius:16px;background:var(--cal)}
.lista-info{margin-top:.75rem;padding:0;list-style:none}
.lista-info li{position:relative;padding:.75rem 0 .75rem 1.5rem}
.lista-info li+li{border-top:1px solid var(--linha)}
.lista-info li::before{content:"";position:absolute;left:2px;top:1.3rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--acento)}
.lista-info strong{font-weight:600}

/* Getting here and questions: a calm two-column page. */
.editorial{display:grid;gap:1.5rem 3rem}
.editorial-texto{max-width:40rem}
.editorial-texto>p+p{margin-top:1rem}
.duvida+.duvida{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--linha)}
.duvida h3{font-size:1.25rem}
.duvida p{margin-top:.5rem}

/* Contact: back on the veranda. */
.contato{position:relative;padding-top:calc(var(--beiral) + var(--espaco));background:var(--nevoa);text-align:center}
.contato .secao-corpo>p{max-width:34rem;margin-inline:auto;text-wrap:balance}
.contato .demo-wa{margin-top:1.75rem}
.contato .demo-wa-painel{margin-inline:auto}
.contato .demo-wa-painel::before{left:calc(50% - 7.5px)}
.contato-lista{display:grid;justify-content:center;gap:.625rem 2.5rem;margin-top:2rem;padding:0;list-style:none;font-size:1rem}
.contato-lista li{display:flex;align-items:center;gap:10px;text-align:left}
.contato-lista li::before{color:var(--varanda)}
.contato-horario{--icone:var(--icone-relogio)}
.contato-idiomas{--icone:var(--icone-idiomas)}

/* Footer: the white logo on the dark blue, as the kit allows. */
.rodape{padding:clamp(2.5rem,2rem + 2vw,3.5rem) var(--margem);background:var(--tinta);color:var(--cal)}
.rodape-grade{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 3rem}
.rodape img{width:280px}
.rodape p{font-size:1rem;line-height:1.6}

@media (min-width:36em){
  .quarto{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:2rem;align-items:start}
  .quarto>*{grid-column:1}
  .quarto-preco{grid-column:2;grid-row:1/span 3;align-self:end;margin:0;padding:0;text-align:right}
  .quarto-preco::before{display:none}
}
@media (min-width:52em){
  .sobre-grade{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(3rem,6vw,6rem)}
  .arco{order:-1;max-width:26rem;aspect-ratio:4/5;padding:0 13% 16%;border-radius:50% 50% 18px 18px/40% 40% 18px 18px}
  .incluido{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem;align-items:start}
  .incluido-texto{padding-top:1.5rem}
  .mesa{max-width:21rem}
  .editorial{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  .contato-lista{grid-auto-flow:column}
}
@media (min-width:56em){
  .hero-grade{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:end}
  .hero-texto{align-self:center;padding-bottom:clamp(2.5rem,1.5rem + 3vw,4.5rem)}
}
@media (min-width:60em){
  body{font-size:1.125rem}
  .quartos-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
  .quarto{display:flex}
  .quarto h3{font-size:1.5rem}
  .quarto-preco{align-self:stretch;margin-top:auto;padding-top:1.5rem;text-align:left}
  .quarto-preco::before{display:block}
  .topo{padding:22px var(--margem)}
  .topo-grade{column-gap:24px}
  .marca img{width:300px}
  .menu{flex:0 1 auto}
  .menu ul{margin:0 -10px 0 0}
  .menu a{font-size:1.0625rem}
  .idioma{margin:0 10px 0 0;padding:0 18px;border:1.5px solid var(--acento);border-radius:999px;text-decoration:none}
  .idioma:hover{background:var(--nevoa)}
  .rodape img{width:300px}
}