/*
  home-pro.css — Diseño renovado del INICIO.

  - Solo se carga en home.blade.php.
  - No cambia el funcionamiento: mismos enlaces, carruseles, formularios y scripts.
  - No toca: carrusel de categorías (.carousel-category), "Nuestras marcas" (.brands-section),
    menú superior ni pie de página.
  - Algunas reglas llevan !important porque el HTML original trae estilos en línea (style="...").
*/

:root {
  --pro-navy: #1b3270;
  --pro-navy-dark: #0f2357;
  --pro-accent: #3d7bff;
  --pro-ink: #13213f;
  --pro-muted: #5d6e8c;
  --pro-soft: #f4f7fd;
  --pro-line: #e3e9f3;
  --pro-radius: 20px;
  --pro-shadow: 0 10px 30px rgba(19, 33, 63, .08);
  --pro-shadow-hover: 0 22px 44px rgba(19, 33, 63, .16);
  --pro-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==================================================================
   Etiquetas y títulos de sección
================================================================== */
body .pro-eyebrow {
  display: block;
  width: fit-content;
  margin: 0 auto 14px;
  padding: 6px 14px;
  border-radius: 99px;
  background: #eaf0ff;
  color: #2a4ea8;
  font-family: 'Gotham', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
body h4.text-center.text-primary {
  font-family: 'Gotham', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px);
  letter-spacing: .3px;
  line-height: 1.15;
  color: var(--pro-ink) !important;
  margin: 0 auto 6px;
}
body h4.text-center.text-primary::after {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--pro-navy), var(--pro-accent));
}
body h4.text-center.text-primary a,
body .blog-carousel .bc-title-link { color: var(--pro-ink) !important; text-decoration: none; }

/* ==================================================================
   Banner principal: marco redondeado con sombra
================================================================== */
body .pro-hero {
  margin: 18px 22px 0;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(11, 21, 41, .18);
  background: #0b1529;
  isolation: isolate;
}
body #carousel-hero .carousel-indicators { margin-bottom: 64px; gap: 6px; }
body #carousel-hero .carousel-indicators [data-bs-target] {
  width: 10px; height: 10px; border-radius: 99px; border: 0; margin: 0;
  background-color: #fff; opacity: .5; transition: width .35s var(--pro-ease), opacity .3s;
}
body #carousel-hero .carousel-indicators .active { width: 30px; opacity: 1; }
body #carousel-hero .carousel-control-prev,
body #carousel-hero .carousel-control-next { width: 84px; opacity: 1; }
body #carousel-hero .carousel-control-prev-icon,
body #carousel-hero .carousel-control-next-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background-color: rgba(255, 255, 255, .16); background-size: 18px;
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color .25s, transform .25s var(--pro-ease);
}
body #carousel-hero .carousel-control-prev:hover .carousel-control-prev-icon,
body #carousel-hero .carousel-control-next:hover .carousel-control-next-icon { background-color: rgba(255, 255, 255, .32); transform: scale(1.06); }

/* Redes sociales sobre el banner: cápsula de vidrio (suben para no quedar detrás de los accesos rápidos) */
body .pro-hero .social-icons {
  bottom: 62px !important;
  right: 26px !important;
  gap: 8px !important;
  padding: 7px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body .pro-hero .social-icons a { display: inline-flex; transition: transform .2s var(--pro-ease); }
body .pro-hero .social-icons a:hover { transform: translateY(-3px); }

/* ==================================================================
   NUEVO: accesos rápidos (barra de vidrio montada sobre el banner)
================================================================== */
body .pro-quick {
  position: relative;
  z-index: 5;
  max-width: 1180px;
  margin: -46px auto 0;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(227, 233, 243, .9);
  box-shadow: 0 18px 44px rgba(19, 33, 63, .14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body .pro-quick__item {
  display: flex; align-items: center; gap: 14px;
  min-height: 68px; padding: 10px 14px;
  border-radius: 16px;
  color: var(--pro-ink); text-decoration: none;
  transition: background-color .25s, transform .25s var(--pro-ease);
}
body .pro-quick__item:hover { background: var(--pro-soft); color: var(--pro-ink); transform: translateY(-2px); }
body .pro-quick__icon {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--pro-navy), var(--pro-accent));
  box-shadow: 0 8px 18px rgba(61, 123, 255, .28);
}
body .pro-quick__icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body .pro-quick__txt { display: flex; flex-direction: column; min-width: 0; font-family: 'Gotham', Arial, sans-serif; }
body .pro-quick__txt strong { font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--pro-ink); }
body .pro-quick__txt small { font-size: 12px; color: var(--pro-muted); line-height: 1.35; margin-top: 2px; }

/* ==================================================================
   ¿Qué estás buscando? — mosaico (la principal más grande)
================================================================== */
body .busqueda-web { background: #fff; }
body .busqueda-web > .p-5 { max-width: 1240px; margin: 0 auto; padding: 72px 32px 32px !important; top: 0 !important; }
body .busqueda-web br { display: none; }
body #carouser_finding { margin-top: 36px; }
body #carouser_finding .d-flex {
  display: grid !important;
  /* 2:1 hace que la tarjeta grande tenga casi la misma proporción que su imagen,
     así no se recorta el texto que viene dentro de la foto */
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 22px;
}
body #carouser_finding a {
  position: relative;
  display: block; width: auto !important; margin: 0 !important;
  border-radius: var(--pro-radius); overflow: hidden;
  box-shadow: var(--pro-shadow);
  transition: transform .35s var(--pro-ease), box-shadow .35s var(--pro-ease);
}
body #carouser_finding a:first-child { grid-row: 1 / 3; }
body #carouser_finding a:hover { transform: translateY(-6px); box-shadow: var(--pro-shadow-hover); }
body #carouser_finding .img-category {
  display: block; width: 100% !important; height: 100% !important;
  aspect-ratio: 639 / 345;
  object-fit: cover;
  border-radius: 0 !important; margin: 0 !important;
  transition: transform .7s var(--pro-ease);
}
body #carouser_finding a:hover .img-category { transform: scale(1.06); }
/* Flecha que aparece al pasar el mouse */
body #carouser_finding a::after {
  content: '→';
  position: absolute; right: 18px; bottom: 18px;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--pro-ink); font-size: 18px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s, transform .3s var(--pro-ease);
}
body #carouser_finding a:hover::after { opacity: 1; transform: none; }

/* Celular */
body .busqueda-movil { padding-top: 8px; }
body .busqueda-movil br { display: none; }
body .busqueda-movil h4.text-center.text-primary { margin-bottom: 22px !important; }
body .busqueda-movil .row { row-gap: 12px; margin-top: 18px; }
body .busqueda-movil a { display: block; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 24px rgba(19, 33, 63, .12); }
body .busqueda-movil .img-category-1,
body .busqueda-movil .img-category-2 { height: auto !important; aspect-ratio: 639 / 345; border-radius: 0 !important; margin-top: 0 !important; display: block; }
body .busqueda-movil .img-category-1 { aspect-ratio: 16 / 8; }

/* ==================================================================
   Servicios (Agenda tu cita · Posventa · Locales)
================================================================== */
body #revisa_auto { max-width: 1240px; margin: 0 auto; padding: 72px 32px 88px !important; }
body #revisa_auto .pro-srv-title { margin-bottom: 40px !important; }
body #revisa_auto > .row > .col { padding: 0 !important; }
body #revisa_auto .revisa-row,
body #revisa_auto .revisa-right { gap: 22px; }
body #revisa_auto .home-bg-img {
  position: relative;
  border-radius: 24px !important;
  box-shadow: var(--pro-shadow);
  transition: transform .35s var(--pro-ease), box-shadow .35s var(--pro-ease);
}
body #revisa_auto .home-bg-img:hover { transform: translateY(-6px); box-shadow: var(--pro-shadow-hover); }
body #revisa_auto .service-link {
  position: relative;
  justify-content: flex-start !important;
  align-items: flex-end !important;
  text-align: left !important;
  padding: 30px 34px;
  background: linear-gradient(15deg, rgba(9, 22, 49, .86) 0%, rgba(9, 22, 49, .35) 55%, rgba(9, 22, 49, 0) 100%);
  font-family: 'Gotham', Arial, sans-serif;
  font-size: clamp(22px, 2.3vw, 32px);
  letter-spacing: .8px;
  line-height: 1.12;
  text-decoration: none;
  transition: background-color .3s;
}
body #revisa_auto .service-link:hover { color: #fff; background-color: rgba(27, 50, 112, .25); }
body #revisa_auto .service-link::after {
  content: '→';
  position: absolute; right: 26px; bottom: 26px;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .18); color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 20px; letter-spacing: 0;
  transition: background-color .3s, color .3s, transform .3s var(--pro-ease);
}
body #revisa_auto .service-link:hover::after { background: #fff; color: var(--pro-ink); transform: translateX(4px); }

/* Celular: carrusel de servicios */
body .mobile-service-card { border-radius: 20px !important; box-shadow: 0 12px 26px rgba(19, 33, 63, .14); }
body .mobile-service-card a {
  align-items: flex-end !important; justify-content: flex-start !important; text-align: left !important;
  padding: 24px; letter-spacing: .6px;
  background: linear-gradient(15deg, rgba(9, 22, 49, .82) 0%, rgba(9, 22, 49, .1) 75%);
}

/* ==================================================================
   Los más vendidos: franja de color + tarjetas modernas
================================================================== */
body .pro-band {
  position: relative;
  padding: 88px 0 80px;
  background:
    radial-gradient(900px 340px at 12% 0%, rgba(61, 123, 255, .10), transparent 70%),
    radial-gradient(700px 300px at 92% 100%, rgba(27, 50, 112, .10), transparent 70%),
    var(--pro-soft);
}
body #carousel_best_selling_desktop,
body #carousel_best_selling_mobile { max-width: 1240px; margin: 36px auto 0; padding: 8px 64px 12px; }
body #carousel_best_selling_mobile { padding: 8px 14px 12px; }
body .car-card {
  width: 100%;
  border: 1px solid rgba(227, 233, 243, .9) !important;
  border-top: 0 !important;
  border-radius: 24px !important;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--pro-shadow) !important;
  transition: transform .35s var(--pro-ease), box-shadow .35s var(--pro-ease) !important;
}
body .car-card:hover { transform: translateY(-8px) !important; box-shadow: var(--pro-shadow-hover) !important; }
body .car-card .card-header {
  background: #fff !important;
  color: var(--pro-ink) !important;
  border-bottom: 0 !important;
  font-family: 'Gotham', Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 1.2px;
  padding: 20px 16px 0 !important;
}
body .car-card .card-body { padding: 14px 22px 24px; }
body .car-card .car-card__img-wrap {
  position: relative;
  height: 210px;
  background: radial-gradient(120% 90% at 50% 100%, #e7edf8 0%, #f7f9fd 55%, #fff 100%);
  border-radius: 18px;
}
body .car-card .car-card__img-wrap::before {
  content: 'Más vendido';
  position: absolute; top: 12px; left: 12px; z-index: 1;
  padding: 5px 10px; border-radius: 99px;
  background: #fff4dd; color: #7a4b00;
  font: 700 10px/1 'Gotham', Arial, sans-serif; letter-spacing: .8px; text-transform: uppercase;
}
body .car-card .car-card__img { object-fit: contain !important; transition: transform .5s var(--pro-ease); }
body .car-card:hover .car-card__img { transform: scale(1.06); }
body .car-card .text-muted { font-size: 11px !important; letter-spacing: 1.6px; color: var(--pro-muted) !important; }
body .car-card .h5 { font-size: 24px !important; letter-spacing: -.3px; color: var(--pro-navy) !important; }
body .car-card .btn {
  display: block; width: 100%;
  min-height: 48px;
  border-radius: 14px !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--pro-navy), #2b4fae) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(27, 50, 112, .22) !important;
  letter-spacing: 1px;
  line-height: 32px;
  transition: transform .25s var(--pro-ease), box-shadow .25s !important;
}
body .car-card .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(27, 50, 112, .3) !important; }
body #carousel_best_selling_desktop .carousel-control-prev,
body #carousel_best_selling_desktop .carousel-control-next { width: 56px; opacity: 1; }
body #carousel_best_selling_desktop .carousel-control-prev-icon,
body #carousel_best_selling_desktop .carousel-control-next-icon {
  width: 46px; height: 46px; border-radius: 50%;
  background-color: var(--pro-navy); background-size: 16px;
  box-shadow: 0 8px 20px rgba(27, 50, 112, .25);
}

/* ==================================================================
   Blog
================================================================== */
body .pro-eyebrow--blog { margin-top: 80px; }
body .blog-carousel {
  max-width: 1240px;
  margin: 0 auto !important;
  padding: 0 32px 24px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
body .blog-carousel .bc-header { margin-bottom: 32px !important; }
body .blog-carousel .post-card { border-radius: 22px !important; border-color: var(--pro-line) !important; box-shadow: var(--pro-shadow) !important; }
body .blog-carousel .post-card:hover { transform: translateY(-6px) !important; box-shadow: var(--pro-shadow-hover) !important; border-color: #c9d3e6 !important; }
body .blog-carousel .post-card::before { display: none; }
body .blog-carousel .post-image-container { height: 210px !important; }
body .blog-carousel .post-card h3 { font-size: 18px !important; line-height: 1.4 !important; color: var(--pro-ink) !important; }
body .blog-carousel .post-category { background: #eaf0ff !important; color: #2a4ea8 !important; font-size: 10px !important; letter-spacing: 1px !important; }
body .blog-carousel .bc-btn { border-radius: 50% !important; width: 44px !important; height: 44px !important; background: var(--pro-navy) !important; }

/* ==================================================================
   Texto legal
================================================================== */
body .text-terms {
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 32px !important;
  font-size: 12px;
  line-height: 1.85;
  color: var(--pro-muted) !important;
}

/* ==================================================================
   Animación al aparecer (se activa con JS; sin JS todo se ve normal)
================================================================== */
html.pro-anim .pro-reveal { opacity: 0; transform: translateY(28px); }
html.pro-anim .pro-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--pro-ease), transform .8s var(--pro-ease);
}

/* ==================================================================
   Accesibilidad
================================================================== */
body .pro-quick__item:focus-visible,
body #carouser_finding a:focus-visible,
body #revisa_auto a:focus-visible,
body .car-card a:focus-visible,
body .blog-carousel a:focus-visible { outline: 3px solid var(--pro-accent); outline-offset: 4px; }

/* ==================================================================
   Tablet y celular
================================================================== */
@media (max-width: 1100px) {
  body .pro-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: -40px 24px 0; }
}
@media (max-width: 768px) {
  body .pro-hero { margin: 10px 10px 0; border-radius: 18px; }
  body #carousel-hero .carousel-indicators { margin-bottom: 10px; }
  body #carousel-hero .carousel-control-prev, body #carousel-hero .carousel-control-next { width: 52px; }
  body #carousel-hero .carousel-control-prev-icon, body #carousel-hero .carousel-control-next-icon { width: 36px; height: 36px; background-size: 14px; }
  body .pro-quick { margin: 12px 10px 0; padding: 8px; gap: 4px; border-radius: 18px; box-shadow: 0 10px 26px rgba(19, 33, 63, .1); }
  body .pro-quick__item { gap: 10px; min-height: 60px; padding: 8px; }
  body .pro-quick__icon { width: 38px; height: 38px; border-radius: 12px; }
  body .pro-quick__icon svg { width: 18px; height: 18px; }
  body .pro-quick__txt strong { font-size: 12px; }
  body .pro-quick__txt small { display: none; }
  body .busqueda-movil .pro-eyebrow { margin-top: 28px; }
  body #revisa_auto { padding: 48px 0 56px !important; }
  body #revisa_auto .pro-srv-title { margin-bottom: 8px !important; }
  body .pro-band { padding: 56px 0 48px; }
  body #carousel_best_selling_desktop { padding: 8px 12px 12px; }
  body .pro-eyebrow--blog { margin-top: 56px; }
  body .blog-carousel { padding: 0 14px 16px !important; }
  body .text-terms { padding: 24px 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.pro-anim .pro-reveal { opacity: 1 !important; transform: none !important; }
  body .pro-quick__item, body #carouser_finding a, body #carouser_finding .img-category,
  body #revisa_auto .home-bg-img, body .car-card, body .car-card .car-card__img { transition: none !important; }
}