/* ================================================
   COLORES CHROME - Paleta viva y moderna
   Rojo: #DB4437, Amarillo: #F4B400, Verde: #0F9D58, Azul: #4285F4
   ================================================ */

:root {
  /* Colores Chrome principales */
  --chrome-red: #DB4437;
  --chrome-yellow: #F4B400;
  --chrome-green: #0F9D58;
  --chrome-blue: #4285F4;

  /* Sobrescribir variables del sitio */
  --accent: #DB4437;
  --accent-hover: #C33B2E;
  --primario: #4285F4;
  --color-primario: #4285F4;
  --color-secundario: #DB4437;
  --color-cta-hover: #C33B2E;
  --color-fondo: #ffffff;
  --color-texto: #2d2d2d;
}

/* ===== FONDO DEL BODY ===== */
html, body {
  background: #ffffff !important;
  color: #2d2d2d !important;
}

/* ===== BOTONES ===== */
.btn-primario,
.btn-primary {
  background: linear-gradient(135deg, #DB4437 0%, #F4B400 100%) !important;
  color: white !important;
  border: none !important;
}

.btn-primario:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, #C33B2E 0%, #D99F00 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(219, 68, 55, 0.3) !important;
}

.btn-secundario {
  background: linear-gradient(135deg, #0F9D58 0%, #4285F4 100%) !important;
  color: white !important;
}

.btn-secundario:hover {
  background: linear-gradient(135deg, #0D8A4C 0%, #3A75D9 100%) !important;
}

/* ===== ACORDEONES ===== */
.col-izq .accordion {
  background: linear-gradient(135deg, #DB4437 0%, #F4B400 50%, #0F9D58 100%) !important;
  color: white !important;
}

.col-izq .accordion.active,
.col-izq .accordion:hover {
  background: linear-gradient(135deg, #C33B2E 0%, #D99F00 50%, #0D8A4C 100%) !important;
  box-shadow: 0 4px 15px rgba(219, 68, 55, 0.3) !important;
}

/* ===== CARDS Y TARJETAS ===== */
.card {
  border: 2px solid transparent !important;
  border-image: linear-gradient(135deg, #DB4437, #F4B400, #0F9D58, #4285F4) 1 !important;
  background: white !important;
}

.card:hover {
  border-image: linear-gradient(135deg, #4285F4, #0F9D58, #F4B400, #DB4437) 1 !important;
  box-shadow: 0 8px 25px rgba(66, 133, 244, 0.2) !important;
}

/* ===== TÍTULOS ===== */
h1, h2, h3 {
  color: #2d2d2d !important;
}

h1 {
  background: linear-gradient(90deg, #DB4437, #F4B400, #0F9D58, #4285F4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

h2 {
  color: #4285F4 !important;
}

h3 {
  color: #0F9D58 !important;
}

/* ===== ENLACES ===== */
a {
  color: #4285F4 !important;
  transition: color 0.3s ease;
}

a:hover {
  color: #DB4437 !important;
}

/* ===== BADGES Y ETIQUETAS ===== */
.badge {
  background: linear-gradient(135deg, #DB4437, #F4B400) !important;
  color: white !important;
}

.text-bg-success {
  background: #0F9D58 !important;
}

/* ===== SECCIONES Y BLOQUES ===== */
.seccion-azul,
.privadas {
  background: linear-gradient(135deg, #4285F4 0%, #0F9D58 100%) !important;
  color: white !important;
}

.seccion-azul h2,
.privadas h2,
.seccion-azul .titulo-bloque,
.privadas .titulo-bloque {
  color: white !important;
  background: none !important;
  -webkit-text-fill-color: white !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.seccion-azul > .contenedor > p,
.privadas > .contenedor > p,
.seccion-azul .texto-intro,
.privadas .texto-intro {
  color: white !important;
}

/* Las tarjetas de beneficios mantienen su texto oscuro */
.beneficio-card p {
  color: #333 !important;
}

.presentacion {
  background: white !important;
}

/* ===== TARJETAS DE BENEFICIOS ===== */
.beneficio-card,
.beneficio {
  border: 2px solid #4285F4 !important;
  background: white !important;
  transition: all 0.3s ease;
}

.beneficio-card:hover,
.beneficio:hover {
  border-color: #DB4437 !important;
  box-shadow: 0 8px 20px rgba(219, 68, 55, 0.2) !important;
  transform: translateY(-3px);
}

.beneficio-icon,
.beneficio h3::before {
  background: linear-gradient(135deg, #DB4437, #F4B400) !important;
  color: white !important;
  border: none !important;
}

/* ===== PAQUETES ===== */
.paquetes .cards-paquetes .card {
  background: linear-gradient(135deg, #4285F4 0%, #0F9D58 100%) !important;
  border: 2px solid white !important;
}

.paquetes .cards-paquetes .card:nth-child(1) {
  background: linear-gradient(135deg, #DB4437, #F4B400) !important;
}

.paquetes .cards-paquetes .card:nth-child(2) {
  background: linear-gradient(135deg, #F4B400, #0F9D58) !important;
}

.paquetes .cards-paquetes .card:nth-child(3) {
  background: linear-gradient(135deg, #0F9D58, #4285F4) !important;
}

.paquetes .cards-paquetes .card:nth-child(4) {
  background: linear-gradient(135deg, #4285F4, #DB4437) !important;
}

.paquetes .cards-paquetes .card:nth-child(5) {
  background: linear-gradient(135deg, #DB4437, #0F9D58) !important;
}

/* ===== TESTIMONIOS ===== */
.testimonio-card {
  border: 2px solid #4285F4 !important;
  background: white !important;
}

.testimonio-stars {
  color: #F4B400 !important;
}

/* ===== EXCURSIONES POPULARES ===== */
.excursiones-populares {
  background: #f8f9fa !important;
}

.excursiones-populares h2 {
  background: linear-gradient(90deg, #DB4437, #F4B400, #0F9D58, #4285F4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== HERO SECTIONS - SIN FONDO QUE TAPE EL VIDEO ===== */
.hero-video {
  position: relative !important;
  overflow: hidden !important;
  min-height: 50vh !important;
}

.hero-content {
  background: none !important;
  background-color: transparent !important;
  padding: 3rem 1rem !important;
}

.hero-content h1,
.hero-content p,
.hero-content .lead {
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8),
               0 0 20px rgba(0, 0, 0, 0.6) !important;
  color: white !important;
}

/* ===== FORMULARIOS ===== */
.form-input:focus,
input:focus,
textarea:focus {
  border-color: #4285F4 !important;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2) !important;
}

/* ===== ALERTAS ===== */
.alert-success {
  background: #E8F5E9 !important;
  border-color: #0F9D58 !important;
  color: #0D8A4C !important;
}

.alert-warning {
  background: #FFF9E6 !important;
  border-color: #F4B400 !important;
  color: #D99F00 !important;
}

.alert-error {
  background: #FFEBEE !important;
  border-color: #DB4437 !important;
  color: #C33B2E !important;
}

/* ===== DIVISORES ===== */
.divisor,
hr {
  background: linear-gradient(90deg, #DB4437, #F4B400, #0F9D58, #4285F4) !important;
  border: none !important;
  height: 3px !important;
}

/* ===== ICONOS Y EMOJIS ===== */
.beneficio-icon {
  font-size: 2rem !important;
}

/* ===== NAVEGACIÓN (si hay nav interno) ===== */
.nav-link {
  color: #4285F4 !important;
}

.nav-link:hover {
  color: #DB4437 !important;
}

/* ===== TABLAS DE PRECIOS ===== */
.tabla-precios strong {
  color: #0F9D58 !important;
}

.tabla-precios tr:hover {
  background: rgba(66, 133, 244, 0.05) !important;
}

/* ===== OVERLAY Y MODALES ===== */
.prog-overlay {
  border: 3px solid transparent !important;
  border-image: linear-gradient(135deg, #DB4437, #F4B400, #0F9D58, #4285F4) 1 !important;
}

.prog-card {
  background: white !important;
  border: 2px solid #4285F4 !important;
}

.prog-card:hover {
  border-color: #DB4437 !important;
  background: #FFF9E6 !important;
}

/* ===== RESPONSIVE - Mantener colores vivos en móvil ===== */
@media (max-width: 768px) {
  .card,
  .beneficio-card,
  .prog-card {
    border-width: 2px !important;
  }
}