/* ==========================================================================
   Colosseo Restaurante — loja de reservas · TEMA CLARO
   A casa é escura e quente; o site é o cardápio dela: papel claro, tinta
   marrom, dourado de letreiro e o bordô das cadeiras como cor estrutural.
   O hero segue escuro — é a foto da noite — e o corpo abre em papel.

   Regra do dourado: #C9964E só como PREENCHIMENTO (botão, fundo).
   Sobre papel ele some, então texto e filete usam --ouro-tx, mais escuro.
   ========================================================================== */

:root {
  --papel:    #FBF7F0;   /* papel de menu, quente */
  --papel-2:  #F3EBDF;   /* seções alternadas */
  --papel-3:  #FFFFFF;   /* cartões */
  --tinta:    #241C15;   /* texto principal */
  --tinta-2:  #6B5D4E;   /* texto secundário */
  --ouro:     #C9964E;   /* preenchimento: botão, selo */
  --ouro-tx:  #7E5D15;   /* dourado legível sobre papel — 5,7:1, passa AA
                            mesmo nos textos pequenos (o #C9964E dá 2:1 e some) */
  --bordo:    #6E2029;   /* cadeiras: acento estrutural */
  --linha:    #E2D6C4;
  --noite:    #14100C;   /* usado só no hero e nas legendas sobre foto */

  --display: 'Cinzel', 'Times New Roman', serif;
  --corpo:   'Jost', -apple-system, BlinkMacSystemFont, sans-serif;

  --max:   1180px;
  --gap:   clamp(1rem, 3vw, 2rem);
  --raio:  2px;
  --sombra: 0 1px 2px rgba(36,28,21,.05), 0 8px 24px rgba(36,28,21,.06);
}

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  letter-spacing: .01em;
}

a { color: var(--ouro-tx); }

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

.env { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gap); }

/* ---- rótulo de seção: o bordô ancora a hierarquia ---- */
.rotulo {
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--corpo); font-size: .72rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--bordo); margin-bottom: 1.1rem;
}
.rotulo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--linha), transparent); }

/* ============================ CABEÇALHO ============================ */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 247, 240, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo-i { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
.marca {
  font-family: var(--display); font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  font-weight: 700; letter-spacing: .22em; color: var(--tinta);
  text-decoration: none; line-height: 1;
}
.marca span {
  display: block; font-family: var(--corpo); font-size: .52rem;
  letter-spacing: .58em; color: var(--ouro-tx); margin-top: .28rem; text-indent: .58em;
}
.topo-nav { display: flex; align-items: center; gap: 1.6rem; }
.topo-nav a {
  color: var(--tinta-2); text-decoration: none; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; transition: color .2s;
}
.topo-nav a:hover { color: var(--bordo); }
@media (max-width: 760px) { .topo-nav .some { display: none; } }

/* ============================== BOTÕES ============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--corpo); font-size: .82rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .95rem 1.9rem;
  border: 1px solid var(--bordo); border-radius: var(--raio);
  background: var(--bordo); color: #FDF8F1;
  text-decoration: none; cursor: pointer;
  transition: background .22s, color .22s, border-color .22s, opacity .2s;
}
.btn:hover:not(:disabled) { background: #83262F; border-color: #83262F; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.fantasma { background: transparent; color: var(--bordo); }
.btn.fantasma:hover:not(:disabled) { background: rgba(110, 32, 41, .07); }
.btn.discreto {
  background: transparent; border-color: var(--linha); color: var(--tinta-2);
  letter-spacing: .12em; padding: .8rem 1.3rem;
}
.btn.discreto:hover:not(:disabled) { border-color: var(--tinta-2); color: var(--tinta); }

/* =============================== HERO ===============================
   Continua escuro: é a foto da noite no salão. O papel começa depois. */
.hero { position: relative; min-height: min(88vh, 780px); display: grid; align-items: end; overflow: hidden; background: var(--noite); }
.hero-img { position: absolute; inset: 0; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-img::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(14,10,7,.92) 3%, rgba(14,10,7,.55) 45%, rgba(14,10,7,.25) 100%),
    linear-gradient(to right, rgba(14,10,7,.72), transparent 62%);
}
.hero-txt { position: relative; padding-block: clamp(2.5rem, 8vw, 5.5rem); max-width: 40rem; color: #F5EEE3; }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); letter-spacing: .04em; text-transform: uppercase; text-wrap: balance; }
.hero h1 em { display: block; font-style: normal; color: #E3B978; font-size: .42em; letter-spacing: .3em; margin-top: .9rem; }
.hero p { color: #CDBFAC; font-size: 1.05rem; margin: 1.4rem 0 2rem; max-width: 30rem; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: .8rem; }
/* no hero escuro o botão volta a ser dourado */
.hero .btn { background: var(--ouro); border-color: var(--ouro); color: #1A1209; }
.hero .btn:hover { background: #E3B978; border-color: #E3B978; }
.hero .btn.fantasma { background: transparent; color: #E3B978; border-color: rgba(227,185,120,.55); }
.hero .btn.fantasma:hover { background: rgba(227,185,120,.14); }

.selo {
  display: inline-block;
  border-top: 1px solid rgba(227,185,120,.3); border-bottom: 1px solid rgba(227,185,120,.3);
  padding: .5rem 0; margin-bottom: 1.6rem;
  font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: #E3B978;
}

/* ============================== SEÇÕES ============================== */
.secao { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.secao-alt { background: var(--papel-2); border-block: 1px solid var(--linha); }
.secao h2 { font-size: clamp(1.7rem, 4.2vw, 2.6rem); letter-spacing: .06em; text-transform: uppercase; }
.secao > .env > p.intro { color: var(--tinta-2); max-width: 46rem; margin: 1rem 0 0; }

/* ===================== CARDÁPIO DAS SEQUÊNCIAS ===================== */
.carta { margin-top: 2.6rem; display: grid; gap: 1.5rem; }
.item {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.2rem); align-items: center;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--linha);
}
.item:last-child { border-bottom: 0; }
.item-foto { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--raio); }
.item-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.item:hover .item-foto img { transform: scale(1.04); }
.item h3 { font-size: 1.32rem; letter-spacing: .05em; }
.item-linha { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .5rem; }
.item-pontos { flex: 1; border-bottom: 1px dotted #C4B29A; transform: translateY(-.28rem); }
.item-preco { font-family: var(--display); font-size: 1.2rem; color: var(--bordo); white-space: nowrap; }
.item-preco small { font-family: var(--corpo); font-size: .62rem; letter-spacing: .16em; color: var(--tinta-2); display: block; text-align: right; text-transform: uppercase; }
.item p { color: var(--tinta-2); margin: 0 0 .9rem; font-size: .95rem; }
@media (max-width: 720px) { .item { grid-template-columns: 1fr; } .item-foto { aspect-ratio: 16 / 9; } }

/* ========================= MOTOR DE RESERVA ========================= */
.motor { background: var(--papel-3); border: 1px solid var(--linha); border-radius: var(--raio); padding: clamp(1.3rem, 4vw, 2.6rem); margin-top: 2.2rem; box-shadow: var(--sombra); }

.passos { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 2.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--linha); }
.passo { display: flex; align-items: center; gap: .55rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: #AFA08C; }
.passo b {
  font-family: var(--display); font-weight: 600; font-size: .78rem;
  width: 1.65rem; height: 1.65rem; display: grid; place-items: center;
  border: 1px solid currentColor; border-radius: 50%;
}
.passo.ativo { color: var(--bordo); }
.passo.feito { color: var(--tinta-2); }

.tela { display: none; }
.tela.ativa { display: block; animation: sobe .32s ease both; }
@keyframes sobe { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* -- escolha da sequência -- */
.escolhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.escolha {
  text-align: left; background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 1.3rem; cursor: pointer; color: inherit;
  font: inherit; transition: border-color .2s, background .2s, box-shadow .2s;
}
.escolha:hover { border-color: #C9B79E; box-shadow: var(--sombra); }
.escolha[aria-pressed="true"] { border-color: var(--bordo); background: rgba(110,32,41,.05); }
.escolha h4 { font-family: var(--display); font-size: 1.05rem; margin: 0 0 .4rem; letter-spacing: .04em; }
.escolha .desc { font-size: .85rem; color: var(--tinta-2); margin: 0 0 .9rem; }
.escolha .val { font-family: var(--display); color: var(--bordo); font-size: 1.1rem; }
.escolha .val small { font-family: var(--corpo); font-size: .68rem; color: var(--tinta-2); letter-spacing: .1em; }

/* -- campos -- */
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.1rem; margin-bottom: 1.8rem; }
.campo { display: flex; flex-direction: column; gap: .45rem; }
.campo > span { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2); }
.campo input, .campo select {
  background: var(--papel-3); border: 1px solid var(--linha); border-radius: var(--raio);
  color: var(--tinta); font: inherit; font-size: .95rem; padding: .8rem .9rem; transition: border-color .2s;
}
.campo input:focus, .campo select:focus { border-color: var(--bordo); outline: none; }
.campo input::placeholder { color: #B5A692; }
.campo.erro input { border-color: #A5342B; }
.campo small { font-size: .74rem; color: #A5342B; min-height: 1rem; }

/* -- A CARTA DE HORÁRIOS — assinatura da página -- */
.horarios { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.horario { border: 0; width: 100%; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; padding: .7rem .6rem; border-radius: var(--raio); transition: background .18s; }
.horario:hover:not(:disabled) { background: rgba(110,32,41,.05); }
.horario:disabled { cursor: not-allowed; opacity: .42; }
.horario-i { display: flex; align-items: baseline; gap: .85rem; }
.horario-h { font-family: var(--display); font-size: 1.18rem; letter-spacing: .06em; min-width: 4.2rem; }
.horario-p { flex: 1; border-bottom: 1px dotted #C4B29A; transform: translateY(-.3rem); }
.horario-v { font-size: .78rem; letter-spacing: .1em; color: var(--tinta-2); white-space: nowrap; text-transform: uppercase; }
.horario[aria-pressed="true"] { background: rgba(110,32,41,.1); }
.horario[aria-pressed="true"] .horario-h { color: var(--bordo); }
.horario[aria-pressed="true"] .horario-v { color: var(--bordo); }

/* -- resumo -- */
.resumo { background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.2rem 1.4rem; margin-bottom: 1.6rem; }
.resumo dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0; font-size: .9rem; }
.resumo dt { color: var(--tinta-2); letter-spacing: .1em; font-size: .74rem; text-transform: uppercase; align-self: center; }
.resumo dd { margin: 0; text-align: right; }
.resumo .total { border-top: 1px solid var(--linha); margin-top: .8rem; padding-top: .8rem; }
.resumo .total dd { font-family: var(--display); font-size: 1.3rem; color: var(--bordo); }

/* -- pagamento -- */
.metodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .8rem; margin-bottom: 1.6rem; }
.metodo { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.2rem; cursor: pointer; font: inherit; color: inherit; text-align: left; transition: border-color .2s, background .2s; }
.metodo[aria-pressed="true"] { border-color: var(--bordo); background: rgba(110,32,41,.05); }
.metodo b { display: block; font-family: var(--display); font-size: 1rem; letter-spacing: .04em; }
.metodo span { font-size: .78rem; color: var(--tinta-2); }

.pix-caixa { text-align: center; padding: 1.6rem; background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--raio); }
.pix-caixa img { width: min(230px, 60vw); margin: 0 auto 1.2rem; background: #fff; padding: .6rem; border-radius: var(--raio); border: 1px solid var(--linha); }
.pix-cc { display: flex; gap: .5rem; max-width: 30rem; margin: 0 auto; }
.pix-cc input { flex: 1; min-width: 0; background: var(--papel-3); border: 1px solid var(--linha); color: var(--tinta-2); font-family: ui-monospace, monospace; font-size: .76rem; padding: .7rem .8rem; border-radius: var(--raio); }

.aguardando { display: flex; align-items: center; justify-content: center; gap: .7rem; color: var(--tinta-2); font-size: .88rem; margin-top: 1.2rem; }
.ponto { width: .5rem; height: .5rem; border-radius: 50%; background: var(--bordo); animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

/* -- confirmação -- */
.confirma { text-align: center; padding: 1rem 0; }
.confirma .rotulo { justify-content: center; }
.confirma .codigo {
  font-family: var(--display); font-size: clamp(1.6rem, 5vw, 2.4rem);
  letter-spacing: .16em; color: var(--bordo); margin: 1rem 0;
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  padding: 1rem 0; display: inline-block; min-width: min(22rem, 90%);
}

.aviso { border-left: 2px solid var(--bordo); background: rgba(110,32,41,.07); padding: .85rem 1.1rem; font-size: .88rem; color: #6E2029; border-radius: var(--raio); margin-top: 1.2rem; }
.nav-passo { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--linha); }

/* ============================ A CASA (3 figuras) ============================ */
.casa { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.6rem; margin-top: 2.6rem; }
.casa figure { margin: 0; }
.casa img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border-radius: var(--raio); }
.casa figcaption { margin-top: .9rem; }
.casa h3 { font-size: 1.1rem; letter-spacing: .05em; margin-bottom: .35rem; }
.casa p { color: var(--tinta-2); font-size: .92rem; margin: 0; }

/* ============================ ONDE ============================ */
.onde { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-top: 2.2rem; }
@media (max-width: 780px) { .onde { grid-template-columns: 1fr; } }
.onde dl { display: grid; gap: 1.2rem; margin: 0; }
.onde dt { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--bordo); margin-bottom: .25rem; }
.onde dd { margin: 0; color: var(--tinta); }
.onde dd a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--linha); }
.onde dd a:hover { color: var(--bordo); border-color: var(--bordo); }

/* ============================ RODAPÉ ============================ */
.rodape { border-top: 1px solid var(--linha); padding-block: 2.6rem; font-size: .82rem; color: var(--tinta-2); background: var(--papel-2); }
.rodape-i { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.rodape a { color: var(--tinta-2); }

.oculto { display: none !important; }

/* ==========================================================================
   BLOCOS DE LANDING
   ========================================================================== */

/* ---- barra de destaques: dentro do hero, segue clara sobre a foto ---- */
.stats {
  position: relative;
  border-top: 1px solid rgba(227,185,120,.28);
  margin-top: clamp(2rem, 5vw, 3.2rem);
  padding-top: clamp(1.1rem, 3vw, 1.5rem);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.stats div { text-align: center; padding-inline: .4rem; border-left: 1px solid rgba(227,185,120,.2); }
.stats div:first-child { border-left: 0; }
.stats b {
  display: block; font-family: var(--display); font-size: clamp(.82rem, 1.9vw, 1rem);
  letter-spacing: .12em; color: #E3B978; text-transform: uppercase;
}
.stats span { display: block; font-size: clamp(.68rem, 1.5vw, .78rem); color: #C0B19E; margin-top: .2rem; }
@media (max-width: 700px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 1.1rem .6rem; }
  .stats div:nth-child(3) { border-left: 0; }
}

/* ---- experiência ---- */
.exp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; margin-top: 2.4rem; }
@media (max-width: 860px) { .exp { grid-template-columns: 1fr; } }
.exp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1.8rem; }
@media (max-width: 460px) { .exp-cards { grid-template-columns: 1fr; } }
.exp-card { background: var(--papel-3); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.2rem 1rem; text-align: center; }
.exp-card svg { width: 26px; height: 26px; stroke: var(--bordo); fill: none; stroke-width: 1.2; margin: 0 auto .7rem; display: block; }
.exp-card b { display: block; font-family: var(--display); font-size: .96rem; letter-spacing: .03em; margin-bottom: .3rem; }
.exp-card span { font-size: .78rem; color: var(--tinta-2); line-height: 1.45; display: block; }
.exp-foto { border-radius: var(--raio); overflow: hidden; }
.exp-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---- grade de fotos com legenda ---- */
.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.4rem; }
@media (max-width: 640px) { .grade { grid-template-columns: 1fr; } }
.grade figure { position: relative; margin: 0; border-radius: var(--raio); overflow: hidden; }
.grade img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .7s ease; }
.grade figure:hover img { transform: scale(1.05); }
.grade figcaption {
  position: absolute; inset-inline: 0; bottom: 0; padding: 1.6rem 1.2rem .95rem;
  background: linear-gradient(to top, rgba(12,9,6,.9), transparent);
  color: #F5EEE3;
}
.grade figcaption b { display: block; font-family: var(--display); font-size: 1rem; letter-spacing: .04em; margin-bottom: .15rem; }
.grade figcaption span { font-size: .8rem; color: #CDBFAC; }

/* ---- passo a passo ---- */
.comofunciona { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2rem; }
@media (max-width: 780px) { .comofunciona { grid-template-columns: repeat(2, 1fr); } }
.cf { text-align: left; }
.cf svg { width: 28px; height: 28px; stroke: var(--bordo); fill: none; stroke-width: 1.2; margin-bottom: .75rem; display: block; }
.cf b { display: block; font-family: var(--display); font-size: .82rem; letter-spacing: .16em; color: var(--bordo); text-transform: uppercase; margin-bottom: .3rem; }
.cf span { font-size: .86rem; color: var(--tinta-2); line-height: 1.5; }

/* ---- a casa ---- */
.acasa-bloco { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; margin-top: 2.2rem; }
@media (max-width: 860px) { .acasa-bloco { grid-template-columns: 1fr; } }
.acasa-foto { position: relative; border-radius: var(--raio); overflow: hidden; }
.acasa-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.acasa-selo {
  position: absolute; top: 1.1rem; right: 1.1rem;
  background: rgba(14,10,7,.88); border: 1px solid rgba(227,185,120,.4);
  padding: .9rem 1.3rem; text-align: center; border-radius: var(--raio); color: #F5EEE3;
}
.acasa-selo small { display: block; font-size: .6rem; letter-spacing: .3em; color: #E3B978; text-transform: uppercase; }
.acasa-selo b { display: block; font-family: var(--display); font-size: 1.7rem; letter-spacing: .05em; line-height: 1.1; margin: .15rem 0; }
.acasa-selo span { display: block; font-size: .68rem; color: #C0B19E; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 1.4rem; padding: 0; }
.chips li { list-style: none; border: 1px solid var(--linha); background: var(--papel-3); border-radius: var(--raio); padding: .38rem .85rem; font-size: .74rem; letter-spacing: .1em; color: var(--tinta-2); text-transform: uppercase; }

/* ---- prova social ---- */
.nota-google { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; flex-wrap: wrap; }
.nota-google b { font-family: var(--display); font-size: 2.4rem; color: var(--bordo); line-height: 1; }
.estrelas { color: var(--ouro-tx); letter-spacing: .12em; font-size: 1rem; }
.nota-google span { font-size: .84rem; color: var(--tinta-2); }
.depos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 2rem; }
.depo { background: var(--papel-3); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.3rem; }
.depo p { font-size: .95rem; margin: 0 0 .7rem; color: var(--tinta); line-height: 1.5; }
.depo cite { font-style: normal; font-size: .74rem; letter-spacing: .12em; color: var(--tinta-2); text-transform: uppercase; }