/*
Theme Name: Ribeiro Repasse
Theme URI: https://ribeirorepasses.com.br/
Author: Ribeiro Repasse
Description: Tema WordPress para a landing page VIP e a página gratuita isolada da Ribeiro Repasse.
Version: 1.0.0
Text Domain: ribeiro-repasse
*/

:root {
  --rr-red: #ed1b2f;
  --rr-red-bright: #ff3046;
  --rr-black: #070708;
  --rr-carbon: #121316;
  --rr-steel: #e5e6e8;
  --rr-muted: #a6a9ae;
  --rr-line: rgba(255, 255, 255, 0.13);
  --rr-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }

html { background: var(--rr-black); }

body {
  min-width: 320px;
  margin: 0;
  background: var(--rr-black);
  color: var(--rr-steel);
  font-family: Manrope, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

a:focus-visible { outline: 2px solid var(--rr-red-bright); outline-offset: 4px; }

.rr-page {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% -10%, rgba(237, 27, 47, 0.16), transparent 33rem),
    linear-gradient(115deg, rgba(255,255,255,0.025) 0%, transparent 28%),
    var(--rr-black);
}

.rr-page::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.34;
  background-image: linear-gradient(105deg, transparent 0%, transparent 43%, rgba(255,255,255,0.05) 43.15%, transparent 43.3%, transparent 100%);
}

.rr-container { width: min(100% - 3rem, 1280px); margin-inline: auto; }

.rr-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 8.2rem;
}

.rr-header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(237,27,47,0.85), rgba(255,255,255,0.15) 19%, rgba(255,255,255,0.1) 70%, rgba(237,27,47,0.36));
}

.rr-header::before {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 3.5rem;
  height: 3px;
  content: "";
  background: var(--rr-red);
  box-shadow: 0 0 15px rgba(237,27,47,0.88);
}

.rr-logo { display: block; width: 11.15rem; height: 5.1rem; overflow: hidden; }
.rr-logo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: drop-shadow(0 0 13px rgba(237,27,47,0.2)); }
.rr-header__code { color: var(--rr-muted); font-size: 0.63rem; font-weight: 800; letter-spacing: 0.16em; }

.rr-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 0.84fr) minmax(400px, 1.16fr);
  align-items: center;
  gap: clamp(3.2rem, 9vw, 12rem);
  min-height: calc(100svh - 12.6rem);
  padding: clamp(3rem, 7vh, 5.5rem) 0 4rem;
}

.rr-main::after {
  position: absolute;
  right: 2rem;
  bottom: 2.7rem;
  z-index: -1;
  width: min(53%, 32rem);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(237,27,47,0), rgba(237,27,47,0.7), rgba(237,27,47,0));
  box-shadow: 0 0 16px rgba(237,27,47,0.2);
  transform: rotate(-4deg);
}

.rr-copy { padding-left: clamp(0rem, 3vw, 3rem); }
.rr-eyebrow { display: flex; align-items: center; gap: 0.68rem; color: var(--rr-red-bright); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; }
.rr-eyebrow::before { width: 2.55rem; height: 2px; content: ""; background: var(--rr-red); box-shadow: 0 0 13px rgba(237,27,47,0.82); }
.rr-title { margin: 1.15rem 0 1.3rem; color: #f5f5f3; font-family: "Barlow Condensed", Impact, sans-serif; font-size: clamp(4.1rem, 7.25vw, 7.2rem); font-weight: 800; line-height: 0.86; letter-spacing: -0.04em; text-transform: uppercase; }
.rr-title span { display: block; }
.rr-title em { color: #d3d4d7; font-style: italic; }
.rr-copy__text { max-width: 27rem; margin: 0; color: #b4b6bb; font-size: 0.92rem; line-height: 1.85; }
.rr-path { display: flex; align-items: center; width: 100%; max-width: 25rem; height: 2px; margin-top: 2.4rem; background: linear-gradient(90deg, var(--rr-red) 0%, rgba(237,27,47,0.55) 60%, rgba(237,27,47,0.08) 87%, transparent 100%); box-shadow: 0 0 13px rgba(237,27,47,0.16); }
.rr-path::before { width: 0.5rem; height: 0.5rem; content: ""; background: var(--rr-red-bright); box-shadow: 0 0 15px var(--rr-red); }

.rr-panel { position: relative; max-width: 39rem; margin-left: auto; overflow: hidden; border: 1px solid rgba(255,255,255,0.18); background: linear-gradient(150deg, rgba(28,29,32,0.97), rgba(10,10,12,0.98)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.2rem), calc(100% - 2.2rem) 100%, 0 100%); box-shadow: 1.1rem 1.1rem 0 rgba(237,27,47,0.1), 0 2rem 6rem rgba(0,0,0,0.42); }
.rr-panel::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; content: ""; background: linear-gradient(90deg, transparent, var(--rr-red), transparent); box-shadow: 0 0 15px var(--rr-red); }
.rr-panel__media { position: relative; height: 16rem; overflow: hidden; }
.rr-panel__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.88; }
.rr-panel__media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 28%, rgba(10,10,12,0.98)); }
.rr-panel__badge { position: absolute; right: 1.1rem; bottom: 1rem; z-index: 1; padding: 0.5rem 0.68rem; border: 1px solid rgba(255,255,255,0.34); color: #fff; background: rgba(8,8,9,0.72); font-size: 0.59rem; font-weight: 800; letter-spacing: 0.13em; }
.rr-panel__body { padding: 1.4rem 1.5rem 1.55rem; }
.rr-panel__topline { display: flex; align-items: center; justify-content: space-between; color: var(--rr-red-bright); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; }
.rr-panel__topline::after { width: 0.75rem; height: 0.75rem; content: ""; border: 1px solid var(--rr-red); transform: rotate(45deg); }
.rr-list { display: grid; gap: 0.9rem; margin: 1.55rem 0 1.7rem; padding: 0; list-style: none; }
.rr-list li { position: relative; padding-left: 1.6rem; color: #d9dade; font-size: 0.78rem; line-height: 1.5; }
.rr-list li::before { position: absolute; top: 0.4rem; left: 0; width: 0.45rem; height: 0.2rem; content: ""; border-bottom: 1px solid var(--rr-red-bright); border-left: 1px solid var(--rr-red-bright); transform: rotate(-45deg); }
.rr-action { display: flex; align-items: center; justify-content: space-between; min-height: 3.8rem; padding: 0 1.25rem; border: 1px solid var(--rr-red); color: #fff; background: linear-gradient(105deg, #bc1023, var(--rr-red), #f02b40); font-size: 0.69rem; font-weight: 800; letter-spacing: 0.14em; transition: transform 160ms var(--rr-ease), filter 160ms var(--rr-ease), box-shadow 160ms var(--rr-ease); }
.rr-action:hover { filter: brightness(1.12); box-shadow: 0 1rem 2.5rem rgba(237,27,47,0.28); transform: translateY(-2px); }
.rr-action:active { transform: scale(0.97); }
.rr-action--disabled { border-color: rgba(255,255,255,0.16); color: #909399; background: #18191c; cursor: not-allowed; }
.rr-note { margin: 0.9rem 0 0; color: #84878d; font-size: 0.63rem; line-height: 1.6; }

.rr-footer { display: flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 4.4rem; border-top: 1px solid rgba(255,255,255,0.1); color: #7d8085; font-size: 0.57rem; font-weight: 700; letter-spacing: 0.13em; text-align: center; }
.rr-footer__dot { width: 0.32rem; height: 0.32rem; border-radius: 50%; background: var(--rr-red); box-shadow: 0 0 8px var(--rr-red); }

@media (max-width: 960px) {
  .rr-main { grid-template-columns: minmax(0, 1fr); gap: 3rem; min-height: auto; }
  .rr-copy { padding-left: 0; }
  .rr-panel { width: 100%; max-width: none; margin-left: 0; }
}

@media (max-width: 620px) {
  .rr-container { width: min(100% - 2rem, 1280px); }
  .rr-header { min-height: 6.95rem; }
  .rr-logo { width: 9.5rem; height: 4.35rem; }
  .rr-header__code { display: none; }
  .rr-main { padding: 2.55rem 0 3rem; }
  .rr-main::after { right: -2rem; bottom: 1.8rem; width: 66%; }
  .rr-title { font-size: clamp(3.85rem, 18vw, 5.8rem); }
  .rr-page--gratis .rr-title { font-size: clamp(3.45rem, 15vw, 4.2rem); letter-spacing: -0.05em; }
  .rr-copy__text { font-size: 0.84rem; }
  .rr-panel { box-shadow: 0.6rem 0.6rem 0 rgba(237,27,47,0.1), 0 2rem 5rem rgba(0,0,0,0.35); }
  .rr-panel__media { height: 12rem; }
  .rr-panel__badge { right: 0.7rem; bottom: 0.7rem; padding: 0.44rem 0.5rem; font-size: 0.52rem; }
  .rr-panel__body { padding: 1.2rem; }
  .rr-footer { flex-wrap: wrap; padding: 1.2rem 0; font-size: 0.5rem; line-height: 1.7; }
}