/* =====================================================================
   RadiosPro — fondos modernos para el sitio principal
   Se carga después de style.css. Solo cambia fondos, bordes y sombras.
   Paleta: negro #0e0e0e, grafito #1d1d1b, azul #005eb8, celeste #00a3e0.
   ===================================================================== */
:root {
  --m-ink: #0e0e0e; --m-graphite: #1d1d1b; --m-blue: #005eb8; --m-cyan: #00a3e0;
  --m-soft: #f4f7fb; --m-line: #e3e8ef;
  --m-aurora:
    radial-gradient(900px 420px at 8% -12%, rgba(0, 163, 224, .20), transparent 62%),
    radial-gradient(760px 480px at 100% -5%, rgba(0, 94, 184, .17), transparent 60%),
    radial-gradient(600px 300px at 55% 115%, rgba(0, 163, 224, .08), transparent 70%),
    linear-gradient(180deg, #f8fbfe 0%, #eef3f9 100%);
  --m-dark: radial-gradient(800px 400px at 90% -20%, rgba(0, 163, 224, .30), transparent 60%),
            linear-gradient(120deg, #0e0e0e 0%, #10233d 58%, #005eb8 130%);
  --m-shadow: 0 1px 2px rgba(16, 35, 61, .05), 0 14px 36px rgba(16, 35, 61, .10);
}

body { background: #fff; }

/* ---------- Banners superiores (portada, regiones, minería, servicios) ---------- */
#hero,
body .rental-hero, body .projects-hero, body .fleet-hero, body .drowsy-hero {
  position: relative;
  background: var(--m-aurora) !important;
}
#hero::before,
body .rental-hero::before, body .projects-hero::before, body .fleet-hero::before, body .drowsy-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(14, 14, 14, .075) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 90%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 90%);
}
#hero > .container,
body .rental-hero > *, body .projects-hero > *, body .fleet-hero > *, body .drowsy-hero > * { position: relative; z-index: 1; }
#hero h1 { color: var(--m-ink); font-weight: 800; letter-spacing: -.02em; }
#hero hr { border-color: rgba(0, 94, 184, .14); }

/* Tarjetas, formularios e imágenes destacadas sobre el banner */
#hero .card, #hero .contact-form-rp,
.contact-form-rp {
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 12px;
  box-shadow: var(--m-shadow);
  background: #fff;
}
#hero img.img-fluid { border-radius: 10px; }

/* ---------- Secciones de la portada ---------- */
.jumbotron { background: transparent; }
section.jumbotron.text-center {
  background: linear-gradient(180deg, #fff 0%, var(--m-soft) 100%);
  border-top: 1px solid var(--m-line);
  border-bottom: 1px solid var(--m-line);
  border-radius: 0;
  margin-bottom: 0;
}
.album.bg-light { background: linear-gradient(180deg, var(--m-soft) 0%, #fff 30%, #fff 70%, var(--m-soft) 100%) !important; }
.album .card {
  border: 1px solid var(--m-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.album .card:hover { transform: translateY(-3px); box-shadow: var(--m-shadow) !important; border-color: transparent; }
.album .card .img-thumbnail { border: 0; border-radius: 0; background: #fff; }

/* "Ventajas de Comprar con Nosotros": banda oscura */
.jumbotron.jumbotron-fluid {
  background: var(--m-dark);
  border-radius: 16px;
  color: #fff;
  overflow: hidden;
  margin: 24px 15px 40px;
  width: calc(100% - 30px);
}
.jumbotron.jumbotron-fluid h2, .jumbotron.jumbotron-fluid b, .jumbotron.jumbotron-fluid li { color: #fff; }
.jumbotron.jumbotron-fluid p { color: #c9d3df; }

/* Listado de comunas / regiones */
#ciudades, #mineria { background: linear-gradient(180deg, #fff 0%, var(--m-soft) 100%); }

/* ---------- Páginas de servicios: secciones suaves y llamados a la acción ---------- */
body .rental-section--soft, body .projects-section--soft, body .fleet-section--soft, body .drowsy-section--soft {
  background: linear-gradient(180deg, var(--m-soft) 0%, #f9fbfd 100%) !important;
}
body .rental-cta, body .projects-cta, body .fleet-cta, body .drowsy-cta {
  background: var(--m-dark) !important;
}

/* ---------- Pie de página ---------- */
footer { background: var(--m-graphite); border-top: 3px solid var(--m-blue); }