/* AMVORA :: texto moderno do imóvel
   Cartões com ícone para "Cozinha:", "Quarto:"..., etiquetas para as listas
   e nota para "Importante:". Usado no guia do hóspede e na prévia do painel.
   Os ícones pegam a cor do texto (currentColor). */

.recursos { display: grid; gap: 10px; margin: 4px 0 14px; }

.recurso {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px 14px; align-items: center;
  padding: 14px; border-radius: 16px;
  background: linear-gradient(180deg, #FFFFFF, #FBF8F2);
  border: 1px solid rgba(10, 46, 92, .10);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 6px 18px -14px rgba(0, 20, 47, .45);
}
.recurso > .recurso-corpo { grid-column: 1 / -1; }
.recurso--simples > .recurso-corpo { grid-column: auto; }
@media (min-width: 40rem) {
  .recurso { align-items: start; }
  .recurso > .recurso-corpo { grid-column: 2; margin-top: -4px; }
  .recurso > .recurso-titulo { align-self: center; }
}
.recurso-ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
  background: radial-gradient(120% 120% at 30% 20%, #F3F6FB, #E4EBF5);
  color: #0A2E5C; border: 1px solid rgba(10, 46, 92, .08);
}
.recurso-ic .ic-casa, .recurso-ic .icone { width: 26px; height: 26px; }
.recurso-corpo { min-width: 0; }
.recurso-corpo > p { margin: 0; }
.recurso-titulo { font-weight: 800; color: #0B1420; margin: 0 !important; letter-spacing: .005em; font-size: 1.05rem; }

.ic-casa { width: 24px; height: 24px; flex: 0 0 auto; display: inline-block; vertical-align: middle; --ic-corte: #fff; }
.ic-casa--mini { width: 18px; height: 18px; color: #0A2E5C; }
.ic-casa--linha { width: 20px; height: 20px; margin: -3px 8px 0 0; color: #0A2E5C; }
.ic-casa--passo { width: 20px; height: 20px; margin: -3px 8px 0 0; color: #0A2E5C; }

.etiquetas-casa { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.etiquetas-casa li {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  padding: 6px 11px 6px 8px; border-radius: 999px; margin: 0;
  background: #F5F0E6; border: 1px solid rgba(10, 46, 92, .08);
  font-size: .94rem; line-height: 1.3; color: #0B1420;
}
.etiquetas-casa li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.etiqueta-ponto { width: 7px; height: 7px; margin: 0 4px 0 3px; border-radius: 50%; background: #B8873A; flex: 0 0 auto; }

.nota-casa {
  display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 14px;
  padding: 12px 14px; border-radius: 14px;
  background: #FDF1DA; color: #4A2F00; border: 1px solid rgba(122, 75, 0, .18);
}
.nota-casa .icone { color: #7A4B00; margin-top: 1px; flex: 0 0 auto; }

.titulo-casa { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; }
.titulo-casa-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #EEF2F8; color: #0A2E5C; flex: 0 0 auto; }
.titulo-casa-ic .ic-casa { width: 22px; height: 22px; }

.sprite-casa { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (hover: hover) and (pointer: fine) {
  .recurso { transition: transform 260ms cubic-bezier(.16, .84, .24, 1), box-shadow 260ms ease, border-color 260ms ease; }
  .recurso:hover { transform: translateY(-2px); border-color: rgba(184, 135, 58, .45); box-shadow: 0 14px 28px -18px rgba(0, 20, 47, .55); }
  .recurso:hover .recurso-ic { color: #7A4B00; background: radial-gradient(120% 120% at 30% 20%, #FFF8EA, #F6E3BC); }
  .recurso-ic { transition: background 260ms ease, color 260ms ease; }
}

@media (prefers-reduced-motion: no-preference) {
  details[open] .recurso { animation: recurso-entra 520ms cubic-bezier(.16, .84, .24, 1) both; }
  details[open] .recurso:nth-child(2) { animation-delay: 50ms; }
  details[open] .recurso:nth-child(3) { animation-delay: 100ms; }
  details[open] .recurso:nth-child(4) { animation-delay: 150ms; }
  details[open] .recurso:nth-child(5) { animation-delay: 200ms; }
  details[open] .recurso:nth-child(n+6) { animation-delay: 250ms; }
  details[open] .recurso .recurso-ic .ic-casa { animation: recurso-icone 700ms cubic-bezier(.16, .84, .24, 1) 120ms both; }
  details[open] .etiquetas-casa li { animation: etiqueta-entra 420ms cubic-bezier(.16, .84, .24, 1) 160ms both; }
  details[open] .etiquetas-casa li:nth-child(2) { animation-delay: 190ms; }
  details[open] .etiquetas-casa li:nth-child(3) { animation-delay: 220ms; }
  details[open] .etiquetas-casa li:nth-child(4) { animation-delay: 250ms; }
  details[open] .etiquetas-casa li:nth-child(5) { animation-delay: 280ms; }
  details[open] .etiquetas-casa li:nth-child(n+6) { animation-delay: 310ms; }
  @keyframes recurso-entra { from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(4px); } }
  @keyframes recurso-icone { from { opacity: 0; transform: scale(.6) rotate(-8deg); } }
  @keyframes etiqueta-entra { from { opacity: 0; transform: translateY(6px); } }
}

@media print {
  .recurso { box-shadow: none; break-inside: avoid; }
}

/* 4.3.3 o código da porta dentro das instruções: {código} vira a senha desta estadia */
.codigo-no-texto {
  display: inline-block; padding: .05em .45em; margin: 0 .1em; border-radius: .4em;
  background: #001F47; color: #F6E3BC; font-weight: 800; letter-spacing: .08em;
  font-variant-numeric: tabular-nums; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; white-space: nowrap;
}
.codigo-no-texto--espera, .codigo-no-texto--exemplo {
  font-family: inherit; letter-spacing: 0; font-weight: 700; white-space: normal;
  background: #EEF2F8; color: #0A2E5C; box-shadow: inset 0 0 0 1px rgba(10, 46, 92, .2);
}
.codigo-no-texto--exemplo { background: #FDF1DA; color: #5A3700; box-shadow: inset 0 0 0 1px rgba(122, 75, 0, .3); }
.passo-texto { min-width: 0; }