/* ============================================================
   castro-cotizador.css — Selector "Elige tu vehículo" + Modal Agendar
   Portado de Megatrans y adaptado a la paleta de Castro Mudanzas.
   Rojo #D1141B (primary) · Verde #4e9d56 (secondary/accent)
   ============================================================ */

/* Variables scope: solo dentro del cotizador y el modal (no afecta al resto del sitio) */
.cc-hero,
#agendar-modal {
  --primary: #D1141B;
  --primary-hover: #A9101A;
  --secondary: #4e9d56;
  --secondary-hover: #3d7d43;
  --accent: #4e9d56;
  --accent-hover: #3d7d43;
  --bg-dark: #ffffff;
  --bg-light: #f1f5f9;
  --text-main: #1d1d1b;
  --text-muted: #575756;
  --glass-border: rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 20px rgba(209, 20, 27, 0.25);
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Contenedor hero del cotizador (fondo y espaciado propios de Castro) */
.cc-hero {
  background: #f8fafc;
  padding: 7rem 0 3rem;
}
.cc-hero .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.hero-calc-header { text-align: center; margin-bottom: 1.5rem; }
.hero-calc-header h1 { font-size: 2.2rem; font-weight: 800; color: var(--text-main); margin-bottom: 0.5rem; }
.hero-subtitle { color: var(--text-muted); font-size: 1rem; max-width: 720px; margin: 0 auto; }
.text-center { text-align: center; }

/* ==== Bloques portados de Megatrans (selector + modal + responsive) ==== */
.vehicles-catalog-container {
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
  width: 100%;
}

.vehicles-catalog-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1200px) {
  .vehicles-catalog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .vehicles-catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .vehicles-catalog-grid {
    grid-template-columns: 1fr;
  }
}

/* Tarjetas individuales del catálogo */
.vehicle-catalog-card {
  background-color: var(--bg-dark);
  border: 2px solid var(--glass-border);
  border-radius: 12px;
  padding: 1.5rem 1rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.clickable-vehicle-card {
  cursor: pointer;
}

.vehicle-catalog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

/* Estado de tarjeta seleccionada */
.vehicle-catalog-card.selected {
  border-color: var(--primary);
  background-color: rgba(209, 20, 27, 0.03);
  box-shadow: var(--shadow-glow), var(--shadow-md);
  transform: translateY(-5px) scale(1.02);
}

.vehicle-icon-box {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.08));
  transition: transform var(--transition-normal);
}

.vehicle-catalog-card:hover .vehicle-icon-box {
  transform: scale(1.1);
}

.vehicle-catalog-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.25rem;
}

.vehicle-capacity {
  font-size: 0.7rem;
  background-color: rgba(209, 20, 27, 0.1);
  color: var(--primary);
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.vehicle-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.vehicle-price {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--accent);
  border-top: 1px dashed var(--glass-border);
  width: 100%;
  padding-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.vehicle-price small {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
  display: block;
}

/* Insignia/Badge de selección en las tarjetas */
.select-badge-v2 {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--text-muted);
  width: 100%;
  padding: 0.4rem 0;
  border-radius: 6px;
  text-transform: uppercase;
  transition: var(--transition-fast);
}

.vehicle-catalog-card:hover .select-badge-v2 {
  background-color: var(--primary);
}

.vehicle-catalog-card.selected .select-badge-v2 {
  background-color: var(--primary);
}

/* Tarjeta CTA de Mudanza Personalizada */
.cta-personalized-card {
  border: 2px dashed rgba(78, 157, 86, 0.4);
}

.cta-personalized-card:hover {
  border-color: var(--accent);
  background-color: rgba(78, 157, 86, 0.02);
}

.cta-personalized-card:hover .select-badge-v2 {
  background-color: var(--accent);
}

/* Selector de modalidad de calculadora */
.calculator-mode-selector {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  width: 100%;
}

.mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 50px;
  border: 2px solid var(--glass-border);
  background-color: var(--bg-dark);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.mode-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.mode-btn.active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: var(--shadow-glow);
}

.mode-btn svg {
  transition: transform var(--transition-normal);
}

.mode-btn.active svg {
  transform: scale(1.1);
}

/* Ajustes responsivos para pestañas móviles de calculadora dual */
@media (max-width: 768px) {
  .calculator-tabs-nav {
    display: none;
    /* Oculta si no hay cotización activa en móvil */
  }

  .calculator-tabs-nav.visible {
    display: flex;
  }

  .calculator-grid-compact-active-form #calc-result-col-container {
    display: none !important;
  }

  .calculator-grid-compact-active-result #calc-form-col {
    display: none !important;
  }
}

/* ============================================================
   TARJETAS DE VEHÍCULO V3 (con foto, sin precio) + BOTÓN AGENDAR
   ============================================================ */
.vehicle-card-v3 {
  padding: 1rem 1rem 1.25rem;
}

.vehicle-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.9rem;
  background-color: #f5f6f8;
}

.vehicle-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6%;
  display: block;
  transition: transform var(--transition-normal);
}

.vehicle-card-v3:hover .vehicle-photo img {
  transform: scale(1.06);
}

/* Realce naranja al pasar el mouse sobre toda la tarjeta */
.vehicle-card-v3 {
  cursor: pointer;
}

.vehicle-card-v3:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 28px rgba(209, 20, 27, 0.18);
  transform: translateY(-6px);
}

/* Tarjeta destacada "Más popular" */
.vehicle-card-popular {
  border-color: var(--primary);
  box-shadow: 0 10px 24px rgba(209, 20, 27, 0.15);
}

.popular-badge {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  background-color: var(--primary);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.22rem 0.5rem;
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(209, 20, 27, 0.35);
  white-space: nowrap;
  pointer-events: none;
}

.vehicle-card-v3 h4 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.vehicle-card-v3 .vehicle-capacity {
  font-size: 0.72rem;
}

.vehicle-card-v3 .vehicle-desc {
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

/* Botón AGENDAR dentro de la tarjeta */
.btn-agendar {
  width: 100%;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  cursor: pointer;
}

.btn-personalizado {
  background-color: var(--accent);
  color: #fff;
  border: none;
}

.btn-personalizado:hover {
  background-color: var(--accent-hover);
}

/* ============================================================
   POP-UP / MODAL AGENDAR
   ============================================================ */
.agendar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.agendar-overlay.active {
  opacity: 1;
  visibility: visible;
}

.agendar-modal {
  background: var(--bg-dark, #fff);
  border-radius: 16px;
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 1.75rem 1.75rem 1.5rem;
  position: relative;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  transform: translateY(15px);
  transition: transform 0.25s ease;
}

.agendar-overlay.active .agendar-modal {
  transform: translateY(0);
}

.agendar-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.agendar-close:hover {
  color: var(--primary);
}

.agendar-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.agendar-header h3 {
  font-size: 1.4rem;
  color: var(--text-main);
  margin: 0;
}

.agendar-vehiculo-badge {
  background-color: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
}

.agendar-sub {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.agendar-disclaimer {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.75rem;
}

/* Paso Gracias */
#agendar-step-gracias {
  text-align: center;
  padding: 1rem 0 0.5rem;
}

.agendar-check {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background-color: var(--accent);
  color: #fff;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(78, 157, 86, 0.35);
}

.agendar-gracias-title {
  font-size: 1.6rem;
  color: var(--text-main);
  margin-bottom: 0.4rem;
}

.agendar-gracias-sub {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.agendar-tarifa-box {
  background: linear-gradient(135deg, rgba(209, 20, 27, 0.08), rgba(78, 157, 86, 0.08));
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.agendar-tarifa-vehiculo {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.agendar-tarifa-precio {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
}

.agendar-tarifa-min {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.agendar-tarifa-detalle {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--glass-border);
}

.agendar-tarifa-detalle:empty {
  display: none;
}

@media (max-width: 480px) {
  .agendar-modal {
    padding: 1.5rem 1.1rem 1.25rem;
  }

  .agendar-header h3 {
    font-size: 1.2rem;
  }
}

/* Wrapper de texto en las tarjetas de vehículo (escritorio: columna, móvil: crece) */
.vehicle-info-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex-grow: 1;
}

/* ============================================================
   MÓVIL: 5 TARJETAS DE VEHÍCULO EN PRIMERA PANTALLA (sin scroll)
   ============================================================ */
@media (max-width: 600px) {

  /* ① Eliminar difuminado blanco del fondo del hero que tapaba los botones */
  .hero::after {
    display: none !important;
  }

  /* Reducir cabecera del hero al mínimo */
  .hero-calc-header {
    margin-bottom: 0.5rem !important;
  }

  .hero-calc-header h1 {
    font-size: 1.3rem !important;
    margin-bottom: 0.2rem !important;
  }

  .hero-subtitle {
    font-size: 0.78rem !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
  }

  /* Reducir padding del hero para que las tarjetas quepan en pantalla */
  .hero.hero-compact-layout,
  .hero-compact-layout {
    min-height: unset !important;
    padding-top: 4.5rem !important;
    padding-bottom: 1rem !important;
    align-items: flex-start !important;
  }

  /* Catálogo: 1 sola columna compacta */
  .vehicles-catalog-container {
    margin-top: 0.5rem !important;
    margin-bottom: 0.25rem !important;
  }

  .vehicles-catalog-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
  }

  /* Tarjeta: modo fila horizontal compacta */
  .vehicle-catalog-card.vehicle-card-v3 {
    flex-direction: row !important;
    align-items: center !important;
    padding: 0.45rem 0.7rem !important;
    gap: 0.6rem !important;
    height: auto !important;
    text-align: left !important;
    border-radius: 10px !important;
  }

  .vehicle-catalog-card.vehicle-card-v3:hover {
    transform: none !important;
  }

  /* ② Imagen: thumbnail cuadrado pequeño en lugar de ocultarla */
  .vehicle-card-v3 .vehicle-photo {
    display: flex !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    background-color: #f0f1f3 !important;
    flex-shrink: 0 !important;
  }

  .vehicle-card-v3 .vehicle-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 4px !important;
  }

  /* Wrapper texto: alineación izquierda y crece */
  .vehicle-info-text {
    align-items: flex-start !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
  }

  .vehicle-card-v3 h4 {
    font-size: 0.88rem !important;
    margin-bottom: 0.1rem !important;
  }

  .vehicle-card-v3 .vehicle-capacity {
    font-size: 0.62rem !important;
    margin-bottom: 0 !important;
  }

  /* Ocultar descripción larga */
  .vehicle-card-v3 .vehicle-desc {
    display: none !important;
  }

  /* Botón AGENDAR compacto a la derecha */
  .vehicle-card-v3 .btn-agendar {
    width: auto !important;
    min-width: 78px !important;
    padding: 0.42rem 0.6rem !important;
    font-size: 0.72rem !important;
    flex-shrink: 0 !important;
    border-radius: 7px !important;
    letter-spacing: 0.02em !important;
  }

  /* Badge "Más popular" en móvil: inline dentro del texto, NO absoluto */
  .popular-badge {
    position: static !important;
    display: inline-flex !important;
    align-self: flex-start !important;
    font-size: 0.6rem !important;
    padding: 0.18rem 0.5rem !important;
    margin-bottom: 0.2rem !important;
    border-radius: 50px !important;
    box-shadow: 0 2px 6px rgba(209, 20, 27, 0.3) !important;
    order: -1;
  }

  /* Tarjeta personalizado: borde verde punteado */
  .cta-personalized-card.vehicle-card-v3 {
    border-style: dashed !important;
  }
}

/* ============================================================
   Formularios y botones del cotizador (scopeado al selector y al modal)
   No afecta a los .btn de Bootstrap del resto del sitio Castro.
   ============================================================ */
.cc-hero .btn,
#agendar-modal .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-normal);
}
.cc-hero .btn-primary,
#agendar-modal .btn-primary {
  background-color: var(--primary);
  color: #fff;
}
.cc-hero .btn-primary:hover,
#agendar-modal .btn-primary:hover {
  background-color: var(--primary-hover);
}
#agendar-modal .btn-full { width: 100%; padding: 0.85rem 1rem; font-size: 1rem; margin-top: 0.25rem; }
#agendar-modal .btn-full:disabled { opacity: 0.6; cursor: not-allowed; }

#agendar-modal .form-group { margin-bottom: 1rem; display: flex; flex-direction: column; }
#agendar-modal .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
#agendar-modal .form-group label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.35rem;
}
#agendar-modal .form-input {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1.5px solid var(--glass-border);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text-main);
  background: #fff;
  transition: border-color var(--transition-fast);
}
#agendar-modal .form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(209, 20, 27, 0.12);
}
@media (max-width: 480px) {
  #agendar-modal .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Botón WhatsApp (verde) y botón secundario — modal y personalizado
   ============================================================ */
#agendar-modal .btn-whatsapp,
.cc-pers .btn-whatsapp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 0.85rem 1rem; margin-top: 0.25rem;
  border: none; border-radius: 8px;
  background-color: #25D366; color: #fff;
  font-weight: 800; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s;
}
#agendar-modal .btn-whatsapp:hover,
.cc-pers .btn-whatsapp:hover { background-color: #1ebe5b; color: #fff; }

#agendar-modal .btn-secondary {
  width: 100%; padding: 0.7rem 1rem; border-radius: 8px;
  border: 1.5px solid var(--glass-border); background: #fff; color: var(--text-muted);
  font-weight: 700; cursor: pointer; transition: all 0.2s;
}
#agendar-modal .btn-secondary:hover { border-color: var(--text-muted); color: var(--text-main); }

/* ============================================================
   Caja de precio estimado (paso gracias del modal)
   ============================================================ */
#agendar-modal .agendar-precio-box {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  background: linear-gradient(135deg, rgba(209,20,27,0.06), rgba(78,157,86,0.06));
  border: 1px solid var(--glass-border); border-radius: 12px;
  padding: 1rem 1.25rem; margin: 0.5rem 0 1rem;
}
#agendar-modal .agendar-precio-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
}
#agendar-modal .agendar-precio-total {
  font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1.1;
}
#agendar-modal .agendar-precio-nota { font-size: 0.78rem; color: var(--text-muted); }

/* ============================================================
   NAVBAR legible sobre el hero claro (inicio y personalizado)
   ------------------------------------------------------------
   El tema pinta el menú en BLANCO porque estaba pensado para ir sobre
   un banner oscuro. Como ahora el inicio tiene fondo claro, los enlaces
   (Inicio, Nosotros, Servicios, Contacto) quedaban invisibles.
   Este archivo SOLO se carga en inicio y personalizado, así que las
   demás páginas (con banner oscuro) mantienen su menú blanco.
   ============================================================ */
.navbar-nav li a { color: #333841 !important; }
.navbar-nav li a:hover,
.navbar-nav li.current > a,
.navbar-nav li.active > a { color: #D1141B !important; }

/* Botón hamburguesa ya es rojo (visible). Menú desplegable en móvil: fondo
   claro por seguridad para que los enlaces oscuros se lean bien. */
@media (max-width: 991px) {
  .navbar-collapse,
  .navbar-collapse .navbar-nav { background: #ffffff; }
}

/* ============================================================
   Autocompletado de direcciones (sugerencias Origen/Destino)
   ============================================================ */
.cc-suggest {
  list-style: none; margin: 0; padding: 4px;
  position: absolute; left: 0; right: 0; top: 100%; z-index: 3000;
  background: #fff; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
  max-height: 220px; overflow-y: auto; display: none;
}
.cc-suggest li {
  padding: 0.5rem 0.6rem; font-size: 0.82rem; color: #1d1d1b;
  border-radius: 6px; cursor: pointer; line-height: 1.3;
}
.cc-suggest li:hover { background: rgba(209,20,27,0.08); color: #D1141B; }