/* /rca/assets/css/slider.css - DISEÑO PREMIUM MEJORADO */

/* 1. CONTENEDOR PRINCIPAL */
.slider-area {
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative;
  z-index: 1;
}

.single-slide {
  height: 650px; /* Altura imponente para escritorio */
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center; /* Centrar verticalmente */
}

/* 2. CAJA DE CONTENIDO (TEXTO) */
.slide-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* Centrado vertical exacto */
  
  /* Fondo elegante oscuro para leer bien el texto */
  background: rgba(0, 0, 0, 0.65); 
  backdrop-filter: blur(5px); /* Efecto vidrio borroso moderno */
  
  padding: 40px 50px; /* Más espacio interno */
  border-left: 5px solid var(--color-principal); /* Línea roja decorativa a la izquierda */
  border-radius: 4px;
  max-width: 600px; /* Ancho máximo para que no se estire */
  color: white;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Sombra para dar profundidad */
}

/* Ubicación: Derecha o Izquierda */
.texto-derecha { 
  right: 10%; /* Separado 10% del borde derecho */
  text-align: left; /* El texto se lee mejor alineado a la izquierda dentro de la caja */
}

.texto-izquierda { 
  left: 10%; /* Separado 10% del borde izquierdo */
  text-align: left; 
}

/* Tipografía del Slider */
.slide-content h2 {
  font-size: 42px; /* Título más grande */
  margin-bottom: 20px;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.slide-content p {
  font-size: 20px;
  color: #f0f0f0;
  line-height: 1.6;
  margin-bottom: 35px; /* Espacio para el botón */
  font-weight: 300;
}

/* 3. BOTÓN DE LLAMADA (ESTILO NUEVO) */
.btn-slider {
  display: inline-block;
  padding: 15px 40px; /* Botón más gordo */
  background-color: var(--color-principal); /* Rojo */
  color: white !important;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 50px; /* Bordes redondos */
  box-shadow: 0 4px 15px rgba(228, 0, 43, 0.4); /* Resplandor rojo */
  transition: all 0.3s ease;
  border: 2px solid var(--color-principal);
}

.btn-slider:hover {
  background-color: transparent; /* Fondo transparente al pasar mouse */
  color: white !important; /* Texto sigue blanco */
  border: 2px solid white; /* Borde blanco */
  transform: translateY(-3px); /* Se eleva un poco */
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* 4. FLECHAS DE NAVEGACIÓN (GRANDES Y VISIBLES) */
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px !important;
  height: 60px !important;
  background-color: rgba(0, 0, 0, 0.5) !important; /* Fondo negro semi */
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-radius: 50%;
  color: white !important;
  font-size: 24px !important;
  transition: all 0.3s ease;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.owl-nav button.owl-prev:hover,
.owl-nav button.owl-next:hover {
  background-color: var(--color-principal) !important; /* Rojo al hover */
  border-color: var(--color-principal) !important;
  transform: translateY(-50%) scale(1.1);
}

.owl-nav button.owl-prev { left: 40px; }
.owl-nav button.owl-next { right: 40px; }

/* 5. ANIMACIONES DE ENTRADA */
.owl-item .slide-content { opacity: 0; transform: translateY(50px); transition: all 0.8s ease; }
.owl-item.active .slide-content { opacity: 1; transform: translateY(-50%); }

/* ==================== RESPONSIVE (MÓVIL) ==================== */
@media (max-width: 768px) {
  .single-slide { height: 70vh; min-height: 500px; }
  
  .slide-content { 
    width: 85%; 
    padding: 30px; 
    left: 50% !important; 
    right: auto !important;
    transform: translate(-50%, -50%) !important; /* Centrado total en móvil */
    text-align: center; /* Texto centrado en móvil */
    border-left: none;
    border-top: 5px solid var(--color-principal);
  }
  
  .texto-derecha, .texto-izquierda { text-align: center; }
  
  .slide-content h2 { font-size: 26px; }
  .slide-content p { font-size: 16px; margin-bottom: 25px; }
  
  /* Flechas más pequeñas en móvil para no estorbar */
  .owl-nav button.owl-prev, .owl-nav button.owl-next { 
    width: 40px !important; 
    height: 40px !important; 
    font-size: 16px !important;
    left: 10px; right: 10px;
  }
}