/* ==========================================================================
   Cunhatã Hostel e Art — sistema visual
   Paleta e grafismos extraídos do PDF de identidade da cliente.
   terracota #CD733B · oliva #5C6229 · palha #DEB37E · castanha #772D12
   creme #FFFAF4 · mata #305529
   ========================================================================== */

:root{
  --creme:#FFFAF4;
  --creme-2:#FBF2E5;
  --papel:#FFFFFF;
  --areia:#DEB37E;
  --areia-clara:#F2E0C6;
  --terracota:#CD733B;
  --terracota-esc:#B25C28;
  /* o terracota da marca só alcança 3,3:1 sobre o creme; para texto miudo
     e para fundo com texto branco em cima usamos estes dois tons */
  --terracota-texto:#A85B2B;
  --terracota-fundo:#AD5D2C;
  --castanha:#772D12;
  --castanha-esc:#5C2410;
  --oliva:#5C6229;
  --oliva-esc:#3B4019;
  --mata:#305529;
  --tinta:#3A2A1C;
  --tinta-2:#6E5B48;
  --linha:rgba(92,98,41,.18);
  --linha-forte:rgba(92,98,41,.32);

  --r-g:20px;
  --r-m:14px;
  --r-p:10px;
  --sombra:0 20px 46px -26px rgba(119,45,18,.42);
  --sombra-forte:0 30px 70px -32px rgba(58,32,14,.5);

  --serif:'Prata', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cond:'Oswald', 'Inter', sans-serif;

  --topo:112px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--creme);color:var(--tinta);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* height:auto é obrigatório: sem ele os atributos width/height do HTML viram
   altura usada e anulam o aspect-ratio das fotos em arco */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--terracota);outline-offset:3px;border-radius:4px}

.conteiner{width:min(1220px,100% - 40px);margin-inline:auto}

/* ---------- tipografia ---------- */
.display{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.012em}
.display em{font-style:normal;color:var(--terracota)}
h1.display{font-size:clamp(2.35rem,4.9vw,4.3rem);max-width:24ch}
h2.display{font-size:clamp(1.95rem,3.7vw,3.2rem)}
h3{font-family:var(--serif);font-size:1.4rem;line-height:1.22;color:var(--castanha)}
h2.display+p,h2.display+.contagem,h3+p{margin-top:20px}

.sobrancelha{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font-family:var(--cond);font-weight:500;font-size:.82rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--terracota-texto);
}
.sobrancelha--clara{color:var(--areia)}

/* losango marajoara da identidade, usado como marcador */
.losango{
  width:11px;height:22px;flex:0 0 auto;background-color:currentColor;
  -webkit-mask:url("../marca/losango.png") no-repeat center/contain;
          mask:url("../marca/losango.png") no-repeat center/contain;
}

.ic{width:1.15em;height:1.15em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.secao{padding:clamp(64px,8vw,112px) 0}
.secao__topo{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:20px 56px;align-items:end;margin-bottom:clamp(30px,4vw,48px)}
.secao__topo--centro{grid-template-columns:1fr;justify-items:center;text-align:center}
.secao__topo--centro .sobrancelha{justify-content:center}
.secao__intro{margin:0;color:var(--tinta-2);max-width:56ch}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 22px;border:1.5px solid transparent;border-radius:999px;
  font-weight:600;font-size:.97rem;letter-spacing:.005em;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
  text-align:center;
}
.btn--primario{background:var(--terracota-esc);color:#fff;box-shadow:0 12px 26px -14px rgba(178,92,40,.9)}
.btn--primario:hover{background:#994F22;transform:translateY(-2px)}
.btn--claro{background:var(--creme);color:var(--castanha)}
.btn--claro:hover{background:#fff;transform:translateY(-2px)}
.btn--contorno{background:transparent;border-color:var(--linha-forte);color:var(--oliva-esc)}
.btn--contorno:hover{background:var(--oliva);border-color:var(--oliva);color:#fff}
.btn--contorno-claro{background:transparent;border-color:rgba(255,250,244,.4);color:var(--creme)}
.btn--contorno-claro:hover{background:rgba(255,250,244,.12);border-color:var(--creme)}
.btn--pequeno{padding:10px 18px;font-size:.9rem}
.btn--grande{padding:17px 30px;font-size:1.02rem}
.btn--bloco{width:100%}

.link-seta{display:inline-flex;align-items:center;gap:7px;color:var(--terracota-texto);font-weight:600;font-size:.93rem}
.link-seta .ic{transition:transform .2s ease}
.link-seta:hover .ic{transform:translateX(4px)}

/* ---------- faixa marajoara (grafismo da identidade) ---------- */
.faixa-marajoara{height:14px;background:url("../img/faixa-marca.png") repeat-x center/auto 100%}
.faixa-marajoara--alta{height:26px}
.faixa-marajoara--diamantes{height:30px;background-image:url("../img/faixa-diamantes.png")}

/* arco: cita as janelas em arco do casarão */
.arco{border-radius:50% 50% var(--r-m) var(--r-m) / 26% 26% 2% 2%;overflow:hidden;margin:0}

/* ==========================================================================
   topo
   ========================================================================== */
.aviso-topo{background:var(--castanha);color:var(--areia-clara);font-size:.82rem}
.aviso-topo__linha{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:38px}
.aviso-topo p{margin:0;display:flex;align-items:center;gap:8px}
.aviso-topo__tel{font-family:var(--cond);letter-spacing:.08em;color:#fff;font-size:.9rem}

.cabecalho{position:sticky;top:0;z-index:60;background:var(--creme);border-bottom:1px solid transparent;transition:box-shadow .3s ease,border-color .3s ease}
.so-grande{display:inline}
.cabecalho.rolou{box-shadow:0 10px 30px -22px rgba(58,32,14,.6);border-bottom-color:var(--linha)}
.cabecalho__linha{display:flex;align-items:center;gap:26px;min-height:74px}

.marca{display:flex;align-items:center;gap:11px;margin-right:auto}
.marca__simbolo{width:42px;height:42px;object-fit:contain}
.marca__texto{display:block}
.marca__nome{
  display:block;height:23px;width:120px;background-color:var(--terracota);
  -webkit-mask:url("../marca/wordmark-cunhata.png") no-repeat left center/contain;
          mask:url("../marca/wordmark-cunhata.png") no-repeat left center/contain;
}
.marca__sub{
  display:block;font-family:var(--sans);font-weight:500;color:var(--oliva);
  font-size:.72rem;letter-spacing:.02em;margin-top:1px;
}

.navegacao{display:flex;align-items:center;gap:28px;font-size:.95rem;font-weight:500;color:var(--oliva-esc)}
.navegacao a{position:relative;padding:4px 0}
.navegacao a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--terracota);transition:right .25s ease}
.navegacao a:hover::after{right:0}

.cabecalho__acoes{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;width:44px;height:40px;border:1.5px solid var(--linha);border-radius:10px;background:transparent;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.menu-btn span{display:block;width:19px;height:1.8px;background:var(--oliva-esc);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

/* ==========================================================================
   hero
   ========================================================================== */
.hero{position:relative;isolation:isolate;min-height:clamp(520px,74vh,740px);display:flex;align-items:flex-end}
.hero__foto{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__foto>img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.hero__veu{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(46,26,14,.46) 0%,rgba(46,26,14,.08) 24%,rgba(46,26,14,0) 40%,rgba(46,26,14,.5) 72%,rgba(40,22,11,.9) 100%),
    linear-gradient(94deg,rgba(44,24,12,.72) 0%,rgba(44,24,12,.4) 34%,rgba(44,24,12,.05) 60%,rgba(44,24,12,0) 78%);
}
.hero__copy{width:100%;padding:0 0 clamp(56px,7vw,84px);color:var(--creme)}
.hero__copy .display{color:#fff;text-shadow:0 2px 26px rgba(30,16,8,.4)}
.hero__copy .display em{color:var(--areia)}
.hero__linha{margin:20px 0 0;max-width:44ch;color:rgba(255,250,244,.9);font-size:1.08rem;text-shadow:0 1px 14px rgba(30,16,8,.5)}
.hero__selos{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero__selos li{
  display:flex;align-items:baseline;gap:7px;padding:8px 15px;border-radius:999px;
  background:rgba(255,250,244,.13);border:1px solid rgba(255,250,244,.26);
  backdrop-filter:blur(7px);font-size:.86rem;color:rgba(255,250,244,.92);
}
.hero__selos strong{font-family:var(--cond);font-weight:500;font-size:1.05rem;color:#fff;letter-spacing:.02em}

/* ==========================================================================
   barra de reserva
   ========================================================================== */
.reserva-barra{position:relative;z-index:5;margin-top:-46px}
.reserva-barra__caixa{
  display:grid;grid-template-columns:1fr 1fr .9fr 1.25fr auto;gap:6px;align-items:end;
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-g);
  padding:14px;box-shadow:var(--sombra-forte);
}
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo>label,.campo>span{
  display:flex;align-items:center;gap:6px;
  font-family:var(--cond);font-weight:500;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--oliva);
}
.campo>span i{font-style:normal;text-transform:none;letter-spacing:0;font-family:var(--sans);color:var(--tinta-2);opacity:.8}
.campo input,.campo select,.campo textarea{
  width:100%;font:inherit;font-size:.98rem;color:var(--tinta);
  background:var(--creme);border:1.5px solid var(--linha);border-radius:var(--r-p);
  padding:12px 13px;transition:border-color .2s ease,background .2s ease;
  -webkit-appearance:none;appearance:none;
}
.campo textarea{resize:vertical;min-height:64px}
.campo select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6229' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px;padding-right:34px;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--terracota);background:#fff;outline:none}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{border-color:#B4402B;background:#FFF4F1}
.reserva-barra__btn{height:47px;padding-inline:24px;white-space:nowrap}
.reserva-barra__nota{margin:12px 0 0;text-align:center;font-size:.87rem;color:var(--tinta-2)}

/* ==========================================================================
   confiança
   ========================================================================== */
.confianca{padding:clamp(40px,5vw,60px) 0 clamp(30px,4vw,44px)}
.confianca__grade{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.confianca__grade>div{display:flex;flex-direction:column;gap:5px;padding:20px 20px 20px 0;border-right:1px solid var(--linha)}
.confianca__grade>div:last-child{border-right:0}
.confianca .ic{width:24px;height:24px;color:var(--terracota);stroke-width:1.4;margin-bottom:4px}
.confianca b{font-size:1rem;color:var(--castanha)}
.confianca span{font-size:.9rem;color:var(--tinta-2);line-height:1.6}

/* ==========================================================================
   quartos (catálogo)
   ========================================================================== */
.quartos{background:var(--creme-2)}
.quartos__controles{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:26px}
.filtros{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.filtro{
  padding:9px 17px;border-radius:999px;border:1.5px solid var(--linha);
  background:transparent;font-size:.92rem;font-weight:500;color:var(--oliva-esc);
  transition:all .2s ease;
}
.filtro:hover{border-color:var(--oliva);color:var(--oliva)}
.filtro--ativo{background:var(--oliva);border-color:var(--oliva);color:#fff}
.ordenar{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--tinta-2)}
.ordenar select{
  font:inherit;font-size:.92rem;color:var(--oliva-esc);background:transparent;
  border:0;border-bottom:1.5px solid var(--linha-forte);padding:5px 20px 5px 2px;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6229' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;background-size:14px;
}

.quartos__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.quarto{
  display:flex;flex-direction:column;background:var(--papel);
  border:1px solid var(--linha);border-radius:var(--r-g);overflow:hidden;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.quarto:hover{transform:translateY(-5px);box-shadow:var(--sombra);border-color:rgba(205,115,59,.4)}
.quarto__foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--creme-2)}
.quarto__foto img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.quarto:hover .quarto__foto img{transform:scale(1.045)}
.quarto__etiqueta{
  position:absolute;top:13px;left:13px;padding:6px 12px;border-radius:999px;
  background:rgba(255,250,244,.94);color:var(--oliva-esc);
  font-family:var(--cond);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
}
.quarto__etiqueta--destaque{background:var(--terracota-esc);color:#fff}
.quarto__lupa{
  position:absolute;right:13px;bottom:13px;display:inline-flex;align-items:center;gap:6px;
  padding:8px 13px;border:0;border-radius:999px;background:rgba(40,22,11,.62);
  backdrop-filter:blur(6px);color:#fff;font-size:.8rem;font-weight:500;
  transition:background .2s ease;
}
.quarto__lupa:hover{background:rgba(40,22,11,.85)}
.quarto__lupa .ic{width:15px;height:15px}

.quarto__corpo{display:flex;flex-direction:column;flex:1;padding:22px 22px 20px}
.quarto__corpo h3{margin-bottom:7px}
.quarto__cap{display:flex;align-items:flex-start;gap:7px;margin:0 0 14px;font-size:.88rem;color:var(--tinta-2)}
.quarto__cap .ic{color:var(--oliva);width:17px;height:17px;margin-top:.28em}

.comodidades{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px}
.comodidades li{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
  background:var(--creme-2);color:var(--oliva-esc);font-size:.8rem;
}
.comodidades .ic{width:14px;height:14px;color:var(--terracota)}
.comodidades--claras li{background:rgba(255,250,244,.14);color:var(--creme)}
.comodidades--claras .ic{color:var(--areia)}

.quarto__rodape{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--linha)}
.preco{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.preco small{font-size:.74rem;color:var(--tinta-2);letter-spacing:.02em}
.preco strong{font-family:var(--cond);font-weight:500;font-size:1.5rem;color:var(--castanha)}
.preco span{font-size:.76rem;color:var(--tinta-2)}
.preco--consulta{gap:2px}
.preco--consulta b{font-size:.95rem;font-weight:600;color:var(--oliva-esc)}
.preco--consulta em{font-style:normal;font-size:.76rem;color:var(--tinta-2)}

/* card de grupo */
.quarto--grupo{background:var(--oliva);border-color:var(--oliva);color:var(--creme)}
.quarto--grupo:hover{border-color:var(--oliva)}
.quarto__corpo--solo{position:relative;justify-content:center;padding:34px 28px;overflow:hidden}
.quarto__marca{position:absolute;right:-26px;top:-20px;width:150px;opacity:.11;filter:brightness(0) invert(1)}
.quarto--grupo h3{color:#fff;font-size:1.75rem;margin-bottom:12px;position:relative}
.quarto--grupo .quarto__cap{color:rgba(255,250,244,.82);font-size:.95rem;line-height:1.65;display:block;position:relative}
.quarto--grupo .comodidades{flex-direction:column;align-items:flex-start;position:relative}

/* ==========================================================================
   reserva direta
   ========================================================================== */
.direto{position:relative;isolation:isolate;background:var(--oliva-esc);color:var(--creme);padding:clamp(58px,7vw,92px) 0;overflow:hidden}
.direto__textura{position:absolute;inset:0;z-index:-1;background:url("../img/palha.jpg") center/cover;opacity:.11;filter:saturate(.4) brightness(.85)}
.direto__grade{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,66px);align-items:center}
.direto .display{color:#fff}
.direto__linha{margin:18px 0 0;color:rgba(255,250,244,.82);max-width:52ch}
.direto__lista{display:flex;flex-direction:column;gap:12px}
.direto__lista li{
  display:flex;gap:18px;padding:20px 22px;border-radius:var(--r-m);
  background:rgba(255,250,244,.07);border:1px solid rgba(255,250,244,.16);
}
.direto__lista span{font-family:var(--cond);font-weight:500;font-size:1.15rem;color:var(--areia);padding-top:2px}
.direto__lista b{display:block;font-size:1.05rem;color:#fff;margin-bottom:3px}
.direto__lista p{margin:0;font-size:.92rem;color:rgba(255,250,244,.76);line-height:1.6}

/* ==========================================================================
   a casa
   ========================================================================== */
.casa{position:relative;isolation:isolate;overflow:hidden}
.casa__padrao{
  position:absolute;inset:0;z-index:-1;
  background:url("../img/padrao-losango.png") repeat left top/111px 107px;
  opacity:.09;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 60%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 40%,#000 60%,transparent);
}
.casa__grade{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);align-items:center}
.casa__texto{position:relative}
.casa__simbolo{width:64px;height:64px;margin-bottom:18px}
.casa__texto p{color:var(--tinta-2);max-width:50ch}
.casa__assinatura{
  margin-top:22px;padding-top:20px;border-top:1px solid var(--linha);
  font-family:var(--serif);font-size:1.28rem;line-height:1.42;color:var(--oliva);max-width:26ch;
}
.casa__fotos{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.casa__fotos figure{margin:0}
.casa__fotos .arco img{width:100%;aspect-ratio:3/4.1;object-fit:cover}
.casa__foto-2{margin-top:52px !important}
.casa__foto-2 img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:var(--r-m)}
.casa__foto-2 figcaption{margin-top:11px;font-size:.85rem;color:var(--tinta-2);line-height:1.55}

/* ==========================================================================
   belém
   ========================================================================== */
.belem{background:var(--creme-2)}
.belem__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,44px);align-items:start}
.belem__foto{position:relative;margin:0}
.belem__foto img{width:100%;aspect-ratio:4/4.2;object-fit:cover;object-position:center 58%}
.belem__foto figcaption{
  margin-top:16px;display:flex;flex-direction:column;gap:3px;
}
.belem__foto strong{font-family:var(--serif);font-size:1.2rem;color:var(--castanha)}
.belem__foto span{font-size:.9rem;color:var(--tinta-2)}
.belem__foto .link-seta{margin-top:7px}

.distancias{border-top:1px solid var(--linha)}
.distancias li{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:17px 4px;border-bottom:1px solid var(--linha);
  position:relative;transition:padding-left .22s ease;
}
.distancias li::before{
  content:"";position:absolute;left:-2px;top:50%;transform:translateY(-50%);
  width:9px;height:18px;background-color:var(--terracota);opacity:0;
  transition:opacity .22s ease;
  -webkit-mask:url("../marca/losango.png") no-repeat center/contain;
          mask:url("../marca/losango.png") no-repeat center/contain;
}
.distancias li:hover{padding-left:20px}
.distancias li:hover::before{opacity:1}
.distancias b{display:block;font-size:1.02rem;color:var(--castanha);font-weight:600}
.distancias span{font-size:.85rem;color:var(--tinta-2)}
.distancias em{
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  font-style:normal;font-family:var(--cond);font-weight:500;font-size:1.12rem;
  color:var(--oliva);white-space:nowrap;flex:0 0 auto;
}
.distancias i{font-style:normal;font-family:var(--sans);font-weight:400;font-size:.78rem;color:var(--tinta-2);letter-spacing:0}

/* ==========================================================================
   círio
   ========================================================================== */
.cirio{padding:clamp(56px,7vw,100px) 0}
.cirio__caixa{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  background:var(--terracota-fundo);color:#fff;border-radius:clamp(20px,3vw,32px);overflow:hidden;
  box-shadow:var(--sombra);position:relative;
}
.cirio__caixa::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../marca/mandala.png") no-repeat right -90px bottom -120px/440px auto;
  opacity:.17;
}
.cirio__copy{padding:clamp(34px,4.4vw,58px);position:relative}
.cirio__copy .display{color:#fff}
.cirio__copy>p{color:var(--creme);max-width:46ch}
.contagem{display:flex;gap:10px;margin:26px 0 26px}
.contagem>div{
  min-width:82px;padding:12px 14px;border-radius:var(--r-m);
  background:rgba(255,250,244,.16);border:1px solid rgba(255,250,244,.28);text-align:center;
}
.contagem strong{display:block;font-family:var(--cond);font-weight:500;font-size:2rem;line-height:1;color:#fff}
.contagem span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--creme)}
.cirio__aviso{margin:20px 0 0;font-size:.87rem;color:var(--creme);opacity:.92;max-width:46ch}
.cirio__foto img{width:100%;height:100%;object-fit:cover;min-height:340px}

/* ==========================================================================
   galeria
   ========================================================================== */
.galeria__grade{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:12px;grid-auto-flow:row dense}
.galeria__item{padding:0;border:0;background:var(--creme-2);border-radius:var(--r-m);overflow:hidden;position:relative}
.galeria__item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .3s ease}
.galeria__item:hover img{transform:scale(1.05)}
.galeria__item--alto{grid-row:span 2}
.galeria__item--largo{grid-column:span 2}
.galeria__item::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(40,22,11,.28));
  opacity:0;transition:opacity .3s ease;
}
.galeria__item:hover::after{opacity:1}
.galeria__dica{
  display:none;margin:10px 0 0;font-size:.82rem;color:var(--tinta-2);
  align-items:center;gap:7px;
}
.galeria__dica .ic{width:15px;height:15px;color:var(--terracota)}

/* ==========================================================================
   comodidades
   ========================================================================== */
.comodidades-secao{background:var(--creme-2)}
.comodidades-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.comodidades-grade li{
  display:flex;flex-direction:column;gap:4px;padding:22px;
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-m);
}
.comodidades-grade .ic{width:23px;height:23px;color:var(--terracota);stroke-width:1.4;margin-bottom:6px}
.comodidades-grade b{font-size:.98rem;color:var(--castanha)}
.comodidades-grade span{font-size:.86rem;color:var(--tinta-2);line-height:1.55}
.nota-honesta{
  display:flex;gap:13px;margin:20px 0 0;padding:20px 24px;
  background:rgba(92,98,41,.08);border-left:3px solid var(--oliva);border-radius:0 var(--r-m) var(--r-m) 0;
  font-size:.94rem;color:var(--oliva-esc);line-height:1.65;
}
.nota-honesta .ic{width:22px;height:22px;color:var(--oliva);flex:0 0 auto;margin-top:2px}

/* ==========================================================================
   passos
   ========================================================================== */
.passos{position:relative;isolation:isolate;padding:clamp(56px,7vw,100px) 0;overflow:hidden}
.passos__mandala{
  position:absolute;z-index:-1;left:50%;top:-90px;transform:translateX(-50%);
  width:min(560px,80vw);height:auto;opacity:.4;pointer-events:none;
}
.passos__lista{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:p}
.passos__lista li{position:relative;padding:30px 26px;background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-g)}
.passos__n{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--terracota-esc);color:#fff;font-family:var(--cond);font-size:1.25rem;margin-bottom:16px;
}
.passos__lista b{display:block;font-family:var(--serif);font-size:1.32rem;color:var(--castanha);margin-bottom:7px}
.passos__lista p{margin:0;font-size:.94rem;color:var(--tinta-2);line-height:1.65}
.passos__cta{display:flex;justify-content:center;margin-top:30px}

/* ==========================================================================
   dúvidas
   ========================================================================== */
.duvidas__grade{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,5vw,68px);align-items:start}
.duvidas__titulo{position:sticky;top:110px}
.duvidas__titulo p{color:var(--tinta-2);max-width:34ch;margin-bottom:22px}
.acordeao{border-top:1px solid var(--linha)}
.acordeao__item{border-bottom:1px solid var(--linha)}
.acordeao__q{
  display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;
  padding:21px 0;background:transparent;border:0;text-align:left;
  font-size:1.04rem;font-weight:600;color:var(--castanha);
}
.acordeao__q .ic{
  width:30px;height:30px;padding:6px;flex:0 0 auto;border:1.5px solid var(--linha);border-radius:50%;
  color:var(--terracota);transition:transform .28s ease,background .28s ease,color .28s ease,border-color .28s ease;
}
.acordeao__q[aria-expanded="true"] .ic{transform:rotate(135deg);background:var(--terracota-esc);color:#fff;border-color:var(--terracota-esc)}
.acordeao__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.acordeao__a>div{overflow:hidden}
.acordeao__a p{margin:0;padding:0 46px 22px 0;color:var(--tinta-2);line-height:1.75}
.acordeao__item.aberto .acordeao__a{grid-template-rows:1fr}

/* ==========================================================================
   cta final + rodapé
   ========================================================================== */
.cta-final{position:relative;isolation:isolate;background:var(--castanha);color:var(--creme);padding:clamp(56px,7vw,96px) 0;overflow:hidden}
.cta-final__textura{position:absolute;inset:0;z-index:-1;background:url("../img/palha.jpg") center/cover;opacity:.14;filter:saturate(.4) brightness(.8)}
.cta-final__caixa{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(24px,4vw,52px);align-items:center}
.cta-final__marca{
  display:block;width:130px;height:52px;background-color:var(--areia);opacity:.3;
  -webkit-mask:url("../marca/wordmark-condensada.png") no-repeat center/contain;
          mask:url("../marca/wordmark-condensada.png") no-repeat center/contain;
}
.cta-final .display{color:#fff}
.cta-final p{margin:12px 0 0;color:rgba(255,250,244,.8);max-width:48ch}
.cta-final__botoes{display:flex;flex-direction:column;gap:10px;min-width:250px}

.rodape{background:var(--oliva-esc);color:rgba(255,250,244,.78);font-size:.92rem}
.rodape .faixa-marajoara{margin-bottom:clamp(36px,5vw,54px)}
.rodape__grade{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-bottom:34px}
.rodape__marca p{margin:16px 0 0;max-width:38ch;line-height:1.65}
.marca--rodape .marca__nome{background-color:var(--areia);height:26px;width:136px}
.marca--rodape .marca__sub{color:rgba(255,250,244,.72)}
.rodape__col h3{font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--areia);margin-bottom:13px}
.rodape__col p{margin:0 0 11px;line-height:1.6}
.rodape__col a{transition:color .2s ease;display:inline-flex;align-items:center;gap:7px}
.rodape__col a:hover{color:#fff}
.rodape__base{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  padding:20px 0 26px;border-top:1px solid rgba(255,250,244,.14);
  font-size:.8rem;color:rgba(255,250,244,.52);
}
.rodape__base a{color:var(--areia)}
.rodape__selo{display:inline-flex;align-items:center;gap:10px}
.rodape__selo img{width:13px;height:auto;opacity:.6;filter:brightness(0) invert(1)}

/* ==========================================================================
   flutuantes
   ========================================================================== */
.zap-flutuante{
  position:fixed;right:22px;bottom:22px;z-index:70;
  display:inline-flex;align-items:center;gap:9px;padding:15px 22px;
  border:0;border-radius:999px;background:var(--terracota-esc);color:#fff;
  font-weight:600;font-size:.95rem;box-shadow:0 16px 34px -14px rgba(119,45,18,.85);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),opacity .28s ease,background .22s ease;
  opacity:0;transform:translateY(20px) scale(.94);pointer-events:none;
}
.zap-flutuante.visivel{opacity:1;transform:none;pointer-events:auto}
.zap-flutuante.visivel:hover{transform:translateY(-3px);background:#994F22}
.zap-flutuante .ic{width:20px;height:20px}

.barra-mobile{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  align-items:center;justify-content:space-between;gap:14px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:var(--papel);border-top:1px solid var(--linha);
  box-shadow:0 -12px 30px -22px rgba(58,32,14,.7);
}
.barra-mobile small{display:block;font-size:.72rem;color:var(--tinta-2)}
.barra-mobile strong{font-family:var(--cond);font-weight:500;font-size:1.28rem;color:var(--castanha)}

/* ==========================================================================
   modais
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal__fundo{position:absolute;inset:0;background:rgba(40,22,11,.62);backdrop-filter:blur(4px);animation:fade .25s ease}
.modal__caixa{
  position:relative;width:min(620px,100%);max-height:min(92vh,900px);overflow:auto;
  background:var(--creme);border-radius:clamp(16px,2.4vw,24px);padding:clamp(24px,3.4vw,36px);
  box-shadow:var(--sombra-forte);animation:sobe .3s cubic-bezier(.2,.8,.3,1);
}
.modal__caixa--largo{width:min(1000px,100%);padding:0;overflow:hidden}
.modal__x{
  position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--linha);border-radius:50%;background:var(--creme);color:var(--castanha);
  transition:background .2s ease,color .2s ease;
}
.modal__x:hover{background:var(--castanha);color:#fff;border-color:var(--castanha)}
.modal__cabeca{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px;padding-right:42px}
.modal__cabeca img{width:30px;height:auto;flex:0 0 auto;margin-top:4px;opacity:.85}
.modal__cabeca h2{font-size:2rem;color:var(--castanha);margin-bottom:5px}
.modal__cabeca p{margin:0;font-size:.94rem;color:var(--tinta-2);line-height:1.6}
.modal__linha{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
#form-reserva .campo{margin-bottom:12px}
#form-reserva .modal__linha .campo{margin-bottom:0}
.modal__erro{margin:0 0 12px;padding:11px 14px;border-radius:var(--r-p);background:#FFF0EC;border:1px solid #E8B4A6;color:#8A2F16;font-size:.9rem}
.modal__nota{margin:11px 0 0;text-align:center;font-size:.8rem;color:var(--tinta-2)}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes sobe{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

/* modal de quarto */
.qv{display:grid;grid-template-columns:1.15fr .85fr;min-height:420px}
.qv__fotos{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--creme-2);max-height:min(80vh,620px);overflow:auto}
.qv__fotos img{width:100%;height:210px;object-fit:cover;cursor:zoom-in}
.qv__fotos img:first-child{grid-column:span 2;height:290px}
.qv__info{padding:clamp(24px,3vw,34px);display:flex;flex-direction:column}
.qv__info h2{font-size:1.9rem;color:var(--castanha);margin-bottom:10px}
.qv__info>p{color:var(--tinta-2);font-size:.96rem}
.qv__acao{margin-top:auto;padding-top:20px}
.qv__nota{display:flex;gap:9px;margin:0 0 14px;font-size:.85rem;line-height:1.55;color:var(--oliva-esc)}
.qv__nota .ic{width:19px;height:19px;flex:0 0 auto;color:var(--oliva);margin-top:1px}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:110;display:grid;place-items:center;background:rgba(28,15,7,.94);padding:36px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:8px}
.lightbox__x,.lightbox__nav{
  position:absolute;width:48px;height:48px;display:grid;place-items:center;
  border:1px solid rgba(255,250,244,.28);border-radius:50%;background:rgba(255,250,244,.09);color:#fff;
  transition:background .2s ease;
}
.lightbox__x:hover,.lightbox__nav:hover{background:rgba(255,250,244,.24)}
.lightbox__x{top:22px;right:22px}
.lightbox__nav--ant{left:22px;top:50%;transform:translateY(-50%) rotate(180deg)}
.lightbox__nav--prox{right:22px;top:50%;transform:translateY(-50%)}
.lightbox .ic{width:22px;height:22px}

/* ==========================================================================
   responsivo
   ========================================================================== */
@media (max-width:1080px){
  .quartos__grade{grid-template-columns:repeat(2,1fr)}
  .comodidades-grade{grid-template-columns:repeat(2,1fr)}
  .confianca__grade{grid-template-columns:repeat(2,1fr)}
  .confianca__grade>div:nth-child(2){border-right:0}
  .rodape__grade{grid-template-columns:1fr 1fr;gap:30px}
  .cta-final__caixa{grid-template-columns:1fr;text-align:left}
  .cta-final__marca{display:none}
  .cta-final__botoes{flex-direction:row;flex-wrap:wrap}
}

@media (max-width:940px){
  /* ancorado no próprio cabeçalho (sticky = posicionado), assim não depende
     da altura da barra de aviso, que muda quando o texto quebra */
  .navegacao{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--creme);border-bottom:1px solid var(--linha);padding:6px 20px 18px;
    box-shadow:0 22px 40px -30px rgba(58,32,14,.8);
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:transform .28s cubic-bezier(.2,.8,.3,1),opacity .22s ease,visibility .28s;
  }
  .navegacao.aberto{transform:none;opacity:1;visibility:visible}
  .navegacao a{padding:14px 0;border-bottom:1px solid var(--linha);font-size:1.05rem}
  .navegacao a:last-child{border-bottom:0}
  .navegacao a::after{display:none}
  .menu-btn{display:flex}
  .cabecalho__acoes .btn{display:none}

  .hero{display:block;min-height:0}
  .hero__foto{position:relative;inset:auto;z-index:0;aspect-ratio:16/10;max-height:52vh}
  .hero__veu{background:linear-gradient(180deg,rgba(46,26,14,.3) 0%,transparent 34%)}
  .hero__copy{padding:28px 0 6px;color:var(--tinta)}
  h1.display{max-width:none}
  .hero__copy .display{color:var(--castanha);text-shadow:none}
  .hero__copy .display em{color:var(--terracota)}
  .hero__linha{color:var(--tinta-2);text-shadow:none;max-width:none}
  .hero__selos li{background:var(--creme-2);border-color:var(--linha);color:var(--oliva-esc);backdrop-filter:none}
  .hero__selos strong{color:var(--castanha)}

  .reserva-barra{margin-top:22px}
  .reserva-barra__caixa{grid-template-columns:1fr 1fr;gap:10px}
  .reserva-barra__caixa .campo:nth-child(3),.reserva-barra__caixa .campo:nth-child(4){grid-column:span 1}
  .reserva-barra__btn{grid-column:span 2;height:50px}

  .secao__topo{grid-template-columns:1fr;gap:14px}
  .direto__grade,.casa__grade,.belem__grade,.duvidas__grade,.cirio__caixa{grid-template-columns:1fr}
  .casa__fotos{gap:12px}
  .casa__foto-2{margin-top:0 !important}
  .duvidas__titulo{position:static}
  .cirio__foto{order:-1}
  .cirio__foto img{min-height:0;aspect-ratio:16/10}
  .passos__lista{grid-template-columns:1fr}
  .galeria__grade{grid-template-columns:repeat(2,1fr);grid-auto-rows:230px}
  .galeria__item--largo{grid-column:span 2}
  .qv{grid-template-columns:1fr}
  .qv__fotos{max-height:44vh}
  .qv__fotos img{height:150px}
  .qv__fotos img:first-child{height:210px}

  .zap-flutuante{display:none}
  .barra-mobile{display:flex}
  body{padding-bottom:calc(86px + env(safe-area-inset-bottom))}

  /* alvos de toque: mínimo confortável no dedo */
  .campo input,.campo select{padding-block:14px}
  .ordenar select{padding-block:11px}
  .quarto__lupa{padding:11px 15px}
  .modal__x{width:44px;height:44px}
  .navegacao a{min-height:48px;display:flex;align-items:center}
  .rodape__base{padding-bottom:34px}
}

@media (max-width:640px){
  .conteiner{width:min(1220px,100% - 32px)}
  .so-grande{display:none}
  .aviso-topo__linha{font-size:.78rem;gap:10px;min-height:34px}
  h1.display,h2.display{font-size:clamp(1.8rem,7.6vw,2.6rem)}

  /* catálogo no celular: a foto continua vendendo o quarto, mas em faixa
     16:9 e com o corpo enxuto. Antes o card ia a ~570px e tomava a tela
     inteira; assim fica em ~400px e o próximo já aparece na dobra. */
  .quartos__grade{grid-template-columns:1fr;gap:14px}
  .quarto{border-radius:16px}
  .quarto__foto{aspect-ratio:16/9}
  .quarto:hover{transform:none}
  .quarto__etiqueta{top:10px;left:10px;padding:6px 11px;font-size:.66rem;letter-spacing:.12em}
  .quarto__lupa{right:10px;bottom:10px;padding:7px 12px;font-size:.76rem;gap:5px}
  .quarto__lupa .ic{width:13px;height:13px}
  .quarto__corpo{padding:15px 16px 14px}
  .quarto__corpo h3{font-size:1.22rem;line-height:1.2;margin-bottom:6px}
  .quarto__cap{font-size:.82rem;line-height:1.45;margin-bottom:11px}
  .quarto__cap .ic{width:16px;height:16px}
  .comodidades{gap:5px;margin-bottom:12px}
  .comodidades li{font-size:.71rem;padding:4px 8px;gap:4px}
  .comodidades .ic{width:12px;height:12px}
  /* na coluna estreita do card, pastilha vira uma pilha alta:
     no celular as comodidades viram uma linha corrida */
  .quarto__corpo .comodidades{display:block;margin-bottom:11px;font-size:.77rem;line-height:1.5;color:var(--tinta-2)}
  .quarto__corpo .comodidades li{display:inline;background:none;padding:0;color:inherit}
  .quarto__corpo .comodidades li:not(:last-child)::after{content:" · "}
  .quarto__corpo .comodidades .ic{display:none}
  .quarto__rodape{gap:10px;padding-top:12px}
  .quarto__rodape .btn{padding:11px 20px;flex:0 0 auto}
  .preco strong{font-size:1.3rem}
  .preco--consulta b{font-size:.92rem}

  .quarto__corpo--solo{padding:26px 20px}
  .quarto--grupo h3{font-size:1.45rem}
  .quarto--grupo .quarto__cap{font-size:.88rem}
  .quarto--grupo .quarto__corpo .comodidades{display:flex;flex-direction:column;align-items:flex-start;font-size:.8rem}
  .quarto--grupo .quarto__corpo .comodidades li{display:inline-flex;background:rgba(255,250,244,.14);color:var(--creme);padding:6px 11px}
  .quarto--grupo .quarto__corpo .comodidades li::after{content:none}
  .quarto--grupo .quarto__corpo .comodidades .ic{display:block}
  .quarto__marca{width:110px;right:-18px;top:-14px}
  .confianca__grade{grid-template-columns:1fr;gap:0}
  .confianca__grade>div{border-right:0;border-bottom:1px solid var(--linha);padding:16px 0}
  .confianca__grade>div:last-child{border-bottom:0}
  .rodape__grade{grid-template-columns:1fr}
  .modal__linha{grid-template-columns:1fr}
  .quartos__controles{flex-direction:column;align-items:flex-start;gap:12px}
  .filtros{
    width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);
            mask-image:linear-gradient(90deg,#000 82%,transparent);
  }
  .filtros::-webkit-scrollbar{display:none}
  .filtro{white-space:nowrap;padding-block:12px}
  .distancias li{gap:12px}
  .distancias li:hover{padding-left:4px}
  .distancias li:hover::before{opacity:0}
  .cta-final__botoes{flex-direction:column}

  /* fotos maiores: em tela pequena duas colunas viram miniatura ilegível */
  .casa__fotos{grid-template-columns:1fr}
  .casa__fotos .arco img{aspect-ratio:4/3.6}
  .galeria__grade{
    display:flex;overflow-x:auto;gap:10px;padding-bottom:10px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .galeria__grade::-webkit-scrollbar{display:none}
  .galeria__item{flex:0 0 78%;height:290px;scroll-snap-align:center}
  .galeria__item--alto,.galeria__item--largo{grid-row:auto;grid-column:auto}
  .galeria__dica{display:flex}

  /* comodidades compactas: ícone à esquerda, texto à direita */
  .comodidades-grade{grid-template-columns:1fr;gap:8px}
  .comodidades-grade li{
    display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:2px;
    align-items:center;padding:14px 16px;
  }
  .comodidades-grade .ic{grid-row:span 2;margin:0;align-self:center}
  .comodidades-grade b{align-self:end}
  .comodidades-grade span{align-self:start}

  .lightbox{padding:16px}
  .lightbox__nav--ant{left:8px}
  .lightbox__nav--prox{right:8px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ==========================================================================
   Ficha da casa (.aeo-fatos)
   Bloco de fatos crus. Existe para o leitor que quer decidir em 10 segundos e
   para a busca generativa, que copia par rótulo/valor muito melhor do que
   parágrafo. É o mesmo papel que a Ficha tinha no site anterior.
   ========================================================================== */
.ficha{
  margin-bottom:clamp(36px,5vw,64px);
  padding:clamp(24px,3.4vw,42px);
  background:var(--creme-2);
  border:1px solid var(--linha);
  border-radius:var(--r-g);
  box-shadow:var(--sombra);
}
.ficha__cabeca{margin-bottom:clamp(20px,2.6vw,30px);max-width:60ch}
.ficha__cabeca h3{
  margin:0 0 8px;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.15;color:var(--castanha);
}
.ficha__cabeca p:not(.sobrancelha){margin:0;color:var(--tinta-2);font-size:.95rem}

.ficha__lista{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,4vw,56px);margin:0;
  border-top:1px solid var(--linha);
}
.ficha__par{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:baseline;gap:6px 18px;
  padding:13px 2px;border-bottom:1px solid var(--linha);
}
.ficha__par dt{
  margin:0;font-family:var(--cond);font-weight:500;font-size:.76rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--terracota-texto);
}
.ficha__par dd{
  margin:0;font-size:.93rem;line-height:1.45;color:var(--castanha);font-weight:500;
}

@media (max-width:940px){
  .ficha__lista{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* em tela estreita o par vira empilhado: rótulo em cima, valor embaixo.
     Lado a lado, o valor longo (endereço, formas de pagamento) quebra em
     quatro linhas contra um rótulo de uma, e a linha some no meio do vão. */
  .ficha__par{grid-template-columns:1fr;gap:3px;padding:12px 2px}
  .ficha__par dd{font-size:.9rem}
}