:root{
  --bg:#0b0f14;
  --fg:#e9eef5;
  --muted:rgba(233,238,245,.75);
  --card:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.10);
  --glow:rgba(255,255,255,.06);
  --accent:#fd8700;
}

html {
  scroll-behavior:smooth;
}

body {
  background:var(--bg);
  color:var(--fg);
}

a {
  color:inherit;
}

.muted {
  color:var(--muted);
}

/* Navbar con blur */
.nav-blur {
  backdrop-filter: blur(10px);
  background: rgba(11,15,20,.60);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* Pills tipo etiqueta */
.pill {
  border:1px solid rgba(255,255,255,.15);
  background:var(--glow);
  border-radius:999px;
}

/* Tarjetas principales */
.cardx {
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:18px;
}

/* Secciones */
.section {
  padding:80px 0;
}

/* Botones principales */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color:#111;
  font-weight:800;
}
.btn-primary:hover {
  filter:brightness(.95);
}

/* Botón outline claro */
.btn-outline-light {
  border-color:rgba(255,255,255,.22);
}
.btn-outline-light:hover {
  background:rgba(255,255,255,.06);
}

/* Pills con acento */
.accent-pill{
  border:1px solid rgba(253,135,0,.45);
  background: rgba(253,135,0,.10);
  color: var(--fg);
}

/* HERO MINI */
.hero-mini{
  padding:70px 0 40px;
  background:
    radial-gradient(1000px 480px at 20% 20%, rgba(253,135,0,.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.88)),
    url('../img/gal/gravel-mexico-2024/413d33d4-031a-49ff-b332-c02d2aa70dc8_rw_1200.jpg') center/cover no-repeat;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.hero-mini:after{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px 280px at 70% 30%, rgba(255,255,255,.08), transparent 60%);
  pointer-events:none;
}

.hero-mini .container{
  position:relative;
  z-index:2;
}

/* Botón instagram */
.ig-cta{
  border:1px solid rgba(253,135,0,.55);
  border-radius:999px;
  background: rgba(253,135,0,.10);
  color: var(--fg);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, background .18s ease;
}

.ig-cta:hover{
  transform: translateY(-1px);
  background: rgba(253,135,0,.16);
  box-shadow: 0 0 0 6px rgba(253,135,0,.10), 0 10px 30px rgba(0,0,0,.35);
  filter: brightness(1.03);
}

/* Formularios */
.form-control,
.form-select{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--fg);
}

.form-control:focus,
.form-select:focus{
  background: rgba(255,255,255,.03);
  border-color: rgba(253,135,0,.45);
  box-shadow: 0 0 0 .2rem rgba(253,135,0,.10);
  color: var(--fg);
}

.form-check-input{
  background-color: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.18);
}

.form-check-input:checked{
  background-color: var(--accent);
  border-color: var(--accent);
}

/* Info head */
.info-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.info-title{
  letter-spacing:.02em;
  margin:0;
}

.info-kv{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-top:10px;
}

.kv{
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--muted);
}

.kv .dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.25);
}

.info-price{
  text-align:right;
}

.info-price .price{
  font-weight:900;
  color:var(--accent);
  font-size:1.1rem;
}

/* Mini-cards */
.mini-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

@media (max-width: 992px){
  .mini-cards{
    grid-template-columns:1fr;
  }
  .info-price{
    text-align:left;
  }
}

.mini-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:14px;
}

.mini-card .label{
  font-size:.75rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(233,238,245,.60);
  margin-bottom:6px;
}

.mini-card a{
  color:var(--accent);
  font-weight:900;
  text-decoration:none;
}

/* Subtítulos y separadores */
.soft-title{
  font-size:.85rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(233,238,245,.65);
  margin-bottom:10px;
}

.clean-list{
  display:grid;
  gap:8px;
  color:var(--muted);
}

.hr-soft{
  border-color:rgba(255,255,255,.10);
}

/* Modales oscuros */
.modal-content{
  background:rgba(11,15,20,.96);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
}