/* Bruno Meira | Link da bio. Preto, vermelho e branco do site de consórcio; bordô e creme do site institucional no cartão da história.
   Paleta: vermelho #BC000D / #E3121F, preto #0A0A0A, cinza #C2C2C2; bordô #510900, vivo #FB1B0F, creme #FFE6C4.
   Tipografia: League Gothic (títulos) e Inter (texto), ambas hospedadas no próprio site.
   Cantos cortados em ângulo, sem arredondar. Compatível com Safari antigo: sem aspect-ratio, sem inset, sem gap em flex. */

@font-face { font-family: "League Gothic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/league-gothic-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); }

:root {
  --verm: #BC000D;
  --verm2: #E3121F;
  --vermesc: #6E0007;
  --vivo: #FB1B0F;
  --bordo: #510900;
  --creme: #FFE6C4;
  --preto: #0A0A0A;
  --cinza: #C2C2C2;
  --mudo: #8C8C8C;
  --titulo: "League Gothic", "Anton", "Arial Narrow", Impact, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cromo: linear-gradient(180deg, #FFFFFF 0%, #E4E4E4 38%, #8E8E8E 50%, #D9D9D9 66%, #FFFFFF 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--preto); }
body { margin: 0; background: var(--preto); color: var(--cinza); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100%; }
h1, h2, p { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: rgba(227, 18, 31, .25); }
a:focus-visible { outline: 3px solid var(--verm2); outline-offset: 4px; }

/* ---------- fundo: brilho vermelho e fios em diagonal ---------- */
.fundo { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 38% at 88% 0%, rgba(188, 0, 13, .34), transparent 72%),
    radial-gradient(55% 34% at 0% 100%, rgba(188, 0, 13, .20), transparent 72%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .028) 0, rgba(255, 255, 255, .028) 1px, transparent 1px, transparent 15px),
    var(--preto); }

.pagina { position: relative; z-index: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 28px 16px 44px; padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }

/* ---------- abertura ---------- */
.hero { text-align: center; }
.hero__moldura { position: relative; width: 74%; max-width: 330px; height: 392px; margin: 0 auto; }
.hero__sombra { position: absolute; left: -16px; right: 16px; top: 16px; bottom: -16px; background: linear-gradient(150deg, var(--verm2) 0%, var(--vermesc) 100%);
  -webkit-clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 38px 100%, 0 calc(100% - 38px));
  clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 38px 100%, 0 calc(100% - 38px)); }
.hero__foto { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #111 url("../img/hero-pb.jpg") 50% 6% / cover no-repeat;
  -webkit-clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 38px 100%, 0 calc(100% - 38px));
  clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 38px 100%, 0 calc(100% - 38px)); }
.hero__foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(180deg, rgba(10, 10, 10, 0), rgba(10, 10, 10, .92) 86%, #0A0A0A); }
.hero__nome { position: relative; margin-top: -92px; font-family: var(--titulo); font-weight: 400; font-size: 118px; line-height: .82; letter-spacing: .01em; text-transform: uppercase; color: #fff; }
.hero__nome span { display: block; background: var(--cromo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-bottom: .04em; }
.hero__nome span + span { margin-top: -.02em; }
.hero__cargo { margin-top: 18px; font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--verm2); }
.hero__txt { max-width: 34ch; margin: 12px auto 0; font-size: 16px; line-height: 1.5; color: var(--cinza); }

/* ---------- cartões ---------- */
.lista { margin-top: 30px; }
.card { position: relative; display: block; padding: 1px; margin-top: 18px; background: linear-gradient(135deg, #F4F4F4 0%, #6A6A6A 20%, #262626 44%, #8C8C8C 70%, #FFFFFF 100%);
  -webkit-clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.card__in { position: relative; display: block; overflow: hidden; min-height: 318px; background: var(--bg);
  -webkit-clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 25px 100%, 0 calc(100% - 25px));
  clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 25px 100%, 0 calc(100% - 25px)); }

.card__foto { position: absolute; right: 0; top: 0; bottom: 0; width: 62%; display: block; background-repeat: no-repeat; background-size: cover; }
.card__foto::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background:
  linear-gradient(90deg, var(--bg) 0%, var(--bg0) 62%),
  linear-gradient(0deg, var(--bg0) 70%, var(--bg0)); }

.card__txt { position: relative; z-index: 2; display: block; width: 68%; padding: 26px 0 26px 20px; }

.rotulo { display: inline-block; margin-bottom: 14px; font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cinza); }
.rotulo b { display: inline-block; margin-right: 9px; padding: 5px 7px 4px; font-weight: 700; letter-spacing: .06em; color: #fff; background: var(--acento);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 62%, 78% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 62%, 78% 100%, 0 100%); }

.card__t { font-family: var(--titulo); font-weight: 400; font-size: 36px; line-height: .98; letter-spacing: .012em; text-transform: uppercase; color: #fff; }
.card__t em { font-style: normal; color: var(--acento-t); }
.card__p { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--texto); }

.btn { display: inline-block; margin-top: 18px; padding: 13px 20px 13px 18px; font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: -.005em; color: var(--btn-t); background: var(--btn);
  -webkit-clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.btn__in { display: inline-block; white-space: nowrap; }
.seta { display: inline-block; vertical-align: -2px; margin-left: 9px; }

/* brilho que cruza o cartão (uma vez ao abrir e ao passar o mouse) */
.card__in::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .18) 50%, transparent 100%); -webkit-transform: translateX(-140%) skewX(-18deg); transform: translateX(-140%) skewX(-18deg); }
.card:hover .card__in::after, .card:focus-visible .card__in::after { -webkit-animation: brilho 1.1s ease 1 both; animation: brilho 1.1s ease 1 both; }
.card:hover { -webkit-filter: brightness(1.06); filter: brightness(1.06); }
.card:active { -webkit-transform: scale(.992); transform: scale(.992); }
.card[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }

/* ---------- variações por destino ---------- */
/* 01 história: bordô, vivo e creme (site institucional) */
.card--historia { --bg: #2B0600; --bg0: rgba(43, 6, 0, 0); --acento: var(--vivo); --acento-t: var(--vivo); --texto: #E9CDB0; --btn: var(--creme); --btn-t: #2A0500; }
.card--historia .card__in { background: radial-gradient(90% 70% at 0% 100%, rgba(251, 27, 15, .22), transparent 70%), linear-gradient(125deg, #2B0600 0%, #3C0A02 55%, #510900 100%); }
.card--historia .card__foto::after { background: linear-gradient(90deg, #2B0600 0%, rgba(43, 6, 0, .55) 38%, rgba(43, 6, 0, 0) 78%), linear-gradient(0deg, rgba(43, 6, 0, .55) 0%, rgba(43, 6, 0, 0) 40%); }
.card--historia .rotulo { color: var(--creme); }

/* 02 consórcio e 03 time: preto e vermelho (site de consórcio) */
.card--consorcio, .card--time { --bg: #101010; --bg0: rgba(16, 16, 16, 0); --acento: var(--verm); --acento-t: var(--verm2); --texto: var(--cinza); --btn: linear-gradient(135deg, var(--verm2), var(--verm)); --btn-t: #fff; }
.card--consorcio .card__in { background: radial-gradient(80% 60% at 0% 100%, rgba(188, 0, 13, .26), transparent 70%), linear-gradient(125deg, #0A0A0A 0%, #161616 100%); }
.card--consorcio .card__foto::after { background: linear-gradient(90deg, #0F0F0F 0%, rgba(15, 15, 15, .6) 36%, rgba(15, 15, 15, 0) 76%), linear-gradient(0deg, rgba(10, 10, 10, .5) 0%, rgba(10, 10, 10, 0) 36%); }
.card--time .card__in { background: radial-gradient(90% 70% at 0% 100%, rgba(227, 18, 31, .34), transparent 70%), linear-gradient(125deg, #0A0A0A 0%, #1A0508 100%); }
.card--time .card__foto::after { background: linear-gradient(90deg, #0E0506 0%, rgba(14, 5, 6, .6) 36%, rgba(14, 5, 6, 0) 76%), linear-gradient(0deg, rgba(10, 10, 10, .5) 0%, rgba(10, 10, 10, 0) 36%); }

/* ---------- rodapé ---------- */
.rodape { margin-top: 36px; padding-top: 22px; text-align: center; border-top: 1px solid rgba(255, 255, 255, .14); }
.rodape__marca { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cinza); }
.rodape__marca span { color: #fff; }
.rodape__aviso { max-width: 44ch; margin: 12px auto 0; font-size: 12px; line-height: 1.55; color: var(--mudo); }

.rodape__credito { margin-top: 18px; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--mudo); }
.rodape__credito a { color: #fff; padding-bottom: 2px; border-bottom: 2px solid var(--verm2); }
.rodape__credito a:hover { color: var(--verm2); }

/* ---------- entrada ---------- */
@-webkit-keyframes subir { from { opacity: 0; -webkit-transform: translateY(18px); } to { opacity: 1; -webkit-transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@-webkit-keyframes brilho { from { opacity: 1; -webkit-transform: translateX(-140%) skewX(-18deg); } to { opacity: 1; -webkit-transform: translateX(380%) skewX(-18deg); } }
@keyframes brilho { from { opacity: 1; transform: translateX(-140%) skewX(-18deg); } to { opacity: 1; transform: translateX(380%) skewX(-18deg); } }
.hero { -webkit-animation: subir .7s ease both; animation: subir .7s ease both; }
.card { -webkit-animation: subir .7s ease both; animation: subir .7s ease both; }
.card:nth-child(1) { -webkit-animation-delay: .15s; animation-delay: .15s; }
.card:nth-child(2) { -webkit-animation-delay: .3s; animation-delay: .3s; }
.card:nth-child(3) { -webkit-animation-delay: .45s; animation-delay: .45s; }
.card:nth-child(1) .card__in::after { -webkit-animation: brilho 1.3s ease 1.1s 1 both; animation: brilho 1.3s ease 1.1s 1 both; }
.card:nth-child(2) .card__in::after { -webkit-animation: brilho 1.3s ease 1.35s 1 both; animation: brilho 1.3s ease 1.35s 1 both; }
.card:nth-child(3) .card__in::after { -webkit-animation: brilho 1.3s ease 1.6s 1 both; animation: brilho 1.3s ease 1.6s 1 both; }
@media (prefers-reduced-motion: reduce) {
  .hero, .card, .card__in::after { -webkit-animation: none !important; animation: none !important; }
  .card__in::after { display: none; }
}

/* ---------- telas maiores ---------- */
@media (min-width: 480px) {
  .pagina { padding-top: 40px; }
  .hero__moldura { height: 430px; max-width: 360px; }
  .hero__nome { font-size: 132px; margin-top: -104px; }
  .card__in { min-height: 340px; }
  .card__t { font-size: 42px; }
  .card__p { font-size: 14.5px; }
  .card__txt { width: 62%; padding: 30px 0 30px 26px; }
}
@media (max-width: 359px) {
  .hero__nome { font-size: 96px; margin-top: -76px; }
  .card__t { font-size: 31px; }
  .card__txt { width: 72%; padding-left: 16px; }
}