/* =========================================================
   Ordexian · Global Styles (site.css)
   ========================================================= */

/* --------- Design Tokens --------- */
:root{
  --ink:#111827;
  --muted:#4b5563;
  --bg:#ffffff;
  --soft:#f7f7f9;
  --line:#e5e7eb;

  --primary:#7A1E3A;   /* burgundy */
  --primary2:#4B1022;  /* dark burgundy */
  --accent:#B45A7A;    /* magenta-ish */

  --shadow: 0 10px 30px rgba(2,6,23,.08);
}

/* --------- Base --------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}
a{color:inherit}
img{max-width:100%; height:auto}

/* Improve tap targets slightly on mobile */
button, .btn, a.btn, a.btn-main, a.btn-ghost{ -webkit-tap-highlight-color: transparent; }

/* --------- Navbar --------- */
.navbar{
  background:rgba(122,30,58,.92);
  backdrop-filter: blur(10px);
}
.navbar .nav-link,
.navbar .navbar-brand{color:#fff}
.navbar .nav-link:hover{color:var(--accent)}
.navbar .nav-link.active{color:#fff; opacity:1; font-weight:800}

/* Logo behavior: keep it stable across pages */
.navbar-brand{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-weight:800;
  letter-spacing:-.3px;
}
.navbar-logo{
  height:34px;
  width:auto;
  display:block;
  object-fit:contain;
}

/* If you want the text hidden on mobile but visible on desktop */
.brand-text{display:none}
@media (min-width: 576px){
  .brand-text{display:inline}
}

/* Flags */
.flag-nav{
  width:26px;
  height:18px;
  border-radius:3px;
  cursor:pointer;
  transition:transform .15s ease;
  box-shadow:0 2px 10px rgba(2,6,23,.15);
}
.flag-nav:hover{transform:scale(1.12)}

/* --------- Hero --------- */
.hero{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:center;
  color:#fff;
  padding: 92px 0 56px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 420px at 30% 0%, rgba(180,90,122,.24), transparent 60%),
    linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
    var(--hero-image);
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
}
.hero > .container{position:relative; z-index:2}
.hero h1{font-weight:900; line-height:1.06; letter-spacing:-.7px}
.hero p{color:rgba(255,255,255,.86); font-size:1.06rem}

.badge-soft{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.92);
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.2px;
  font-size:.92rem;
}

/* --------- Buttons --------- */
.btn-main{
  background:linear-gradient(135deg, var(--accent), var(--primary));
  color:#ffffff;
  border:none;
  padding:12px 18px;
  border-radius:12px;
  font-weight:900;
  box-shadow: var(--shadow);
  text-decoration:none;
  display:inline-block;
}
.btn-main:hover{background:#d47e9b; color:var(--primary2)}
.btn-main:focus{outline: 3px solid rgba(180,90,122,.25); outline-offset: 2px;}

.btn-ghost{
  border:1px solid rgba(255,255,255,.38);
  color:#fff;
  padding:12px 18px;
  border-radius:12px;
  font-weight:900;
  background:rgba(255,255,255,.06);
  text-decoration:none;
  display:inline-block;
}
.btn-ghost:hover{background:rgba(255,255,255,.12); color:#fff}

/* Make Bootstrap outline buttons a bit more “Ordexian” */
.btn-outline-dark{
  border-color: rgba(17,24,39,.25);
}
.btn-outline-dark:hover{
  border-color: rgba(17,24,39,.35);
}

/* --------- Layout Helpers --------- */
.section{padding: 72px 0;}
.section-title{
  font-weight:900;
  letter-spacing:-.5px;
  color:var(--primary);
  margin-bottom: 14px;
}
.lead-muted{color:var(--muted)}

.hr-soft{
  border-top:1px solid var(--line);
  margin: 48px 0;
}

/* --------- Cards --------- */
.card{
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: 0 6px 18px rgba(2,6,23,.05);
}
.card-hover{transition: transform .15s ease, box-shadow .15s ease}
.card-hover:hover{transform: translateY(-3px); box-shadow: 0 14px 34px rgba(2,6,23,.10)}

/* Hero side card (white for legibility) */
.hero-card{
  background:#fff;
  color:var(--ink);
  border:1px solid rgba(255,255,255,.35);
}
.hero-card .small-note{color:var(--muted)}
.hero-card .price{
  font-size:2rem;
  font-weight:900;
  letter-spacing:-.6px;
  color:var(--primary2);
  line-height:1;
}

/* KPI block */
.kpi{
  border:1px dashed rgba(122,30,58,.28);
  background: linear-gradient(180deg, rgba(180,90,122,.10), rgba(180,90,122,.03));
  border-radius:18px;
  padding:18px;
}

/* Pills */
.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  font-weight:800;
  font-size:.92rem;
}

/* Check list */
.list-check{padding-left:0; list-style:none; margin:0}
.list-check li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin: 10px 0;
  color:var(--muted);
}
.list-check li::before{
  content:"✓";
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:8px;
  background: rgba(180,90,122,.12);
  border:1px solid rgba(180,90,122,.28);
  color: var(--primary2);
  font-weight:900;
  flex:0 0 auto;
}

/* Step badge (no emojis) */
.step-badge{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: rgba(180,90,122,.12);
  border: 1px solid rgba(180,90,122,.28);
  color: var(--primary2);
  font-weight:900;
  flex:0 0 auto;
}

/* --------- Sticky CTA --------- */
.sticky-cta{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  padding: 10px 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--line);
  z-index: 9999;
  display:none;
}
@media (max-width: 992px){
  .sticky-cta{display:block}
  .hero{min-height: 74vh; padding-top:88px}
}

/* --------- Footer --------- */
.footer{
  background: #2a0b14;
  color: rgba(255,255,255,.88);
  padding: 36px 0;
}
.footer a{color: rgba(255,255,255,.88); text-decoration:none}
.footer a:hover{color: var(--accent)}
.small-muted{color: rgba(255,255,255,.72)}

/* --------- Cookie Banner (your current one) --------- */
.cookie-banner{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: #2a0b14;
  color: rgba(255,255,255,.92);
  padding: 14px 14px;
  border-radius: 16px;
  box-shadow: var(--shadow);
  z-index: 10000;
  display:none;
}
.cookie-banner a{color: var(--accent); text-decoration:underline}
.cookie-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
  align-items:center
}
.cookie-btn{
  background: var(--accent);
  color: var(--primary2);
  border:none;
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 900;
  cursor:pointer;
}
.cookie-btn.secondary{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}

/* --------- Cookie consent banner (your alternative ID version) ---------
   Use this only if you implement #cookie-consent-banner instead of .cookie-banner
----------------------------------------------------------------------- */
#cookie-consent-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
  padding: 20px;
}
#cookie-consent-banner .cc-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#cookie-consent-banner p{
  margin: 0;
  font-size: 14px;
}
#cookie-consent-banner .cc-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
@media (max-width: 575.98px){
  #cookie-consent-banner .cc-container{
    flex-direction: column;
    align-items: stretch;
  }
  #cookie-consent-banner .cc-actions{
    justify-content: flex-end;
  }
}

/* --------- Video helpers (your example) --------- */
/* Video background for carousel slides */
.slide-background-video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; /* Below overlay and content */
}

/* Tilted video style for content sections */
.video-tilted{
  display: block;
  transform-origin: center;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden; /* Ensure rounded corners clip video */
}
.rotated-video-left{transform: rotate(-5deg);}
.rotated-video-right{transform: rotate(5deg);}

/* --------- Small QoL --------- */
.shadow-soft{box-shadow: var(--shadow) !important;}
.rounded-4{border-radius: 18px !important;} /* align with your cards */

/* Avoid ugly horizontal scroll if any element overflows */
body{overflow-x:hidden;}
.brand-logo{
  height: 44px;
  width: auto;
  display:block;
}
.brand-name{
  display:inline-block;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  color: #fff;
}

/* En pantallas pequeñas, reduce un poco el logo y el texto */
@media (max-width: 575.98px){
  .brand-logo{ height: 38px; }
  .brand-name{ font-size: .95rem; }
}
/* Fix SVG preview sizing (prevents overlap / shifting) */
.svg-wrap{
  width: 100%;
  aspect-ratio: 900 / 520;
}

.svg-wrap > svg{
  width: 100%;
  height: 100%;
  display: block; /* removes inline baseline gaps */
}


.deliverable .eyebrow{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:600;
  font-size:.78rem;
  color: rgba(17,24,39,.62);
}
.deliverable .checklist{
  list-style:none;
  padding-left:0;
  margin:0;
}
.deliverable .checklist li{
  padding:.55rem 0 .55rem 1.9rem;
  position:relative;
  border-bottom:1px solid rgba(17,24,39,.08);
}
.deliverable .checklist li:last-child{border-bottom:0}
.deliverable .checklist li:before{
  content:"✓";
  position:absolute;
  left:0;
  top:.55rem;
  font-weight:800;
  color: rgba(122,30,58,.95);
}
.deliverable .note{
  font-size:.95rem;
  color: rgba(17,24,39,.62);
}
.report-card{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(2,6,23,.10);
  backdrop-filter: blur(8px);
}
.report-card .mini-title{
  font-weight:600;
  font-size:.95rem;
  color: rgba(17,24,39,.78);
}

/* --- Hardening: make the preview always fit perfectly (no overflow/shift) --- */
.report-card svg{
  width:100%;
  height:auto;
  display:block;
}
@media (max-width: 992px){
  .deliverable .btn.btn-lg{ width:100%; }
}