/*
  Template Name: Finautos Redesign
  Description: Clean, modern, conversion-focused design.
  Version: 1.7 - Visibility Fix
*/

/* 1. Global Styles & Variables
--------------------------------------------- */
:root {
  --primary-color: #E47506;
  --primary-color-accessible: #B95A04; 
  --secondary-color: #ff8c20;
  --whatsapp-color: #25D366;
  --dark-color: #030303; 
  --light-color: #f8f9fa;
  --text-color: #212529;
  --text-muted-accessible: #525252;
}

body { font-family: 'Poppins', sans-serif; background-color: #fff; color: var(--text-color); line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--text-color); }
p { color: var(--text-muted-accessible); } 
.lead.text-muted { color: var(--text-muted-accessible) !important; }
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); font-weight: 500; padding: 12px 24px; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; background-image: linear-gradient(to right, var(--primary-color) 0%, var(--secondary-color) 51%, var(--primary-color) 100%); background-size: 200% auto; border-radius: 8px; }
.btn-primary:hover { background-position: right center; border-color: var(--secondary-color); color: #fff; }
.bg-light { background-color: var(--light-color) !important; }

/* 2. Header
--------------------------------------------- */
.header { background-color: var(--dark-color); box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.navbar-brand img { max-height: 40px; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.8); font-weight: 500; transition: color 0.3s ease; }
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link.active { color: #fff; }
.btn-whatsapp { background-color: var(--whatsapp-color); border-color: var(--whatsapp-color); color: #fff; font-weight: 500; transition: all 0.3s ease; border-radius: 8px; }
.btn-whatsapp:hover { background-color: #128C7E; border-color: #128C7E; color: #fff; }

/* 3. Hero Section & Booking Form (VISIBILITY FIX)
--------------------------------------------- */
.hero-section {
  position: relative;
  padding: 120px 0;
  background-color: #111;
  /* NUEVO ESTILO: GRADIENTE ASIMÉTRICO PARA LEGIBILIDAD */
  background-image: 
    linear-gradient(to right, 
      rgba(0, 0, 0, 0.75) 0%,   /* Más oscuro a la izquierda (detrás del texto) */
      rgba(0, 0, 0, 0.4) 50%,   /* Transición en el medio */
      rgba(0, 0, 0, 0.1) 100%   /* Casi transparente a la derecha */
    ), 
    url('img/hero/hero-background-finautos.webp');
  background-size: cover;
  background-position: center;
}
.hero-content { color: #fff; }
.hero-content h1 {
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.7); /* Sombra de texto mejorada */
}
.hero-content p.lead {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px 6px rgba(0,0,0,0.7);
}
.booking-form-wrapper { background-color: #fff; padding: 40px; border-radius: 16px; box-shadow: 0 15px 35px rgba(0,0,0,0.15); color: var(--text-color); }
.booking-form .form-control, .booking-form .form-select { padding: 12px 16px; border: 1px solid #e1e1e1; border-radius: 8px; height: 52px; }
.booking-form .form-control::placeholder { color: #888; }
.booking-form .form-select { color: var(--text-muted-accessible); }
.booking-form .form-select:required:invalid { color: var(--text-muted-accessible); }
.booking-form option[value=""][disabled] { display: none; }
.booking-form option { color: var(--text-color); }
.booking-form .form-control:focus, .booking-form .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(228, 117, 6, 0.25); }

/* 4. Features Section
--------------------------------------------- */
.feature-item .icon-circle { width: 80px; height: 80px; background-color: var(--light-color); border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.feature-item .icon-circle i { font-size: 36px; color: var(--primary-color-accessible); }
.feature-item:hover .icon-circle { background-color: var(--primary-color); }
.feature-item:hover .icon-circle i { color: #fff; }
.feature-item p { color: var(--text-muted-accessible); }

/* 5. Services Section
--------------------------------------------- */
.service-card { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
.service-card .card-img-top { height: 220px; object-fit: cover; }
.service-card .card-text { color: var(--text-muted-accessible); }

/* 6. Fleet Section
--------------------------------------------- */
.fleet-card { border: none; border-radius: 12px; background-color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; padding: 20px; display: flex; flex-direction: column; }
.fleet-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
.fleet-card-img-container { background-color: #fff; padding: 1rem; height: 200px; display: flex; align-items: center; justify-content: center; }
.fleet-card-img-container img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fleet-card .card-body { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.fleet-specs { display: flex; justify-content: space-around; border-top: 1px solid #eee; padding-top: 1rem; margin-top: auto; }
.fleet-specs span { color: var(--text-muted-accessible); }
.fleet-specs i { color: var(--primary-color-accessible); margin-right: 8px; font-size: 1.1rem; }
.fleet-card .text-muted { color: var(--text-muted-accessible) !important; }

/* 7. Security & Trust Section
--------------------------------------------- */
.security-section .text-primary { color: var(--primary-color-accessible) !important; }
.security-section .text-muted { color: var(--text-muted-accessible) !important; }
.association-logo { max-width: 100%; height: auto; max-height: 120px; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease; object-fit: contain; }
.association-logo:hover { filter: grayscale(0%); opacity: 1; }
.trust-item p { color: var(--text-muted-accessible); }

/* 8. Footer
--------------------------------------------- */
.footer a { text-decoration: none; transition: color 0.3s ease; }
.footer a:hover { color: var(--primary-color) !important; }
.footer .text-white { opacity: 0.8; }
.footer .text-white:hover { opacity: 1; }
.footer p { color: rgba(255,255,255,0.7); }

/* 9. Sticky WhatsApp Button for Mobile
--------------------------------------------- */
.whatsapp-sticky-button { position: fixed; bottom: 20px; right: 20px; background-color: var(--whatsapp-color); color: #fff; width: 60px; height: 60px; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 1000; transition: transform 0.3s ease; }
.whatsapp-sticky-button:hover { transform: scale(1.1); color: #fff; }

/* 10. Responsive Adjustments
--------------------------------------------- */
@media (max-width: 991.98px) {
  .hero-section { padding: 80px 0; text-align: center; }
  .booking-form-wrapper { margin-top: 40px; }
}
@media (max-width: 767.98px) {
    .hero-section { padding: 60px 0; }
    .hero-content h1 { font-size: 2.5rem; }
    .whatsapp-sticky-button { display: flex; }
}