/**
 * ORETANA LOG

ÍSTICA - OPTIMIZACIONES RESPONSIVE PARA MÓVIL
 * Este archivo contiene mejoras responsive adicionales para todas las páginas
 * Sin modificar la visibilidad en escritorio
 */

.footer-divider {
  display: none;
}

/* ==========================================
   MEJORAS GENERALES PARA MÓVIL
   ========================================== */

@media (max-width: 768px) {
  /* Mejorar espaciado general en móvil */
  section {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Mejorar tipografía en móvil */
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    word-wrap: break-word;
  }

  /* Botones más grandes para mejor usabilidad en móvil */
  button, .btn, [class*="btn-"] {
    min-height: 44px; /* Tamaño mínimo recomendado para touch */
    padding: 12px 20px;
  }

  /* Mejorar inputs en móvil */
  input, textarea, select {
    font-size: 16px; /* Prevenir zoom automático en iOS */
    min-height: 44px;
  }

  /* Imágenes responsive */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Links más grandes para touch */
  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  nav a {
    padding: 12px;
    display: block;
  }
}

/* ==========================================
   NAVBAR - OPTIMIZACIONES MÓVIL
   ========================================== */

@media (max-width: 991px) {
  .navbar-main {
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--color-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  [data-bs-theme="dark"] .navbar-main {
    background: var(--color-gray-900);
  }

  .navbar-brand-logo {
    height: 40px;
    width: auto;
  }

  .navbar-toggler {
    border: none;
    padding: 8px;
    font-size: 1.5rem;
  }

  .navbar-collapse {
    padding: 0;
    margin: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* Transición limpia del collapse sin interferencias */
  .navbar-collapse.collapsing {
    transition: height 0.35s ease !important;
  }

  .navbar-nav {
    gap: 5px;
    text-align: center !important;
    width: 100% !important;
    padding: 15px;
    margin-top: 10px;
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  [data-bs-theme="dark"] .navbar-nav {
    background: var(--color-gray-800);
  }

  .navbar-nav .nav-item {
    width: 100% !important;
    text-align: center !important;
  }

  .navbar-nav .nav-link {
    padding: 12px 15px !important;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  .navbar-nav .nav-link:hover {
    background: var(--color-gray-100);
  }

  [data-bs-theme="dark"] .navbar-nav .nav-link:hover {
    background: var(--color-gray-700);
  }

  /* Dropdown de idiomas - que no se salga de la pantalla */
  .language-selector .dropdown-menu {
    right: auto !important;
    left: auto !important;
    transform: translateX(-50%) !important;
    min-width: 140px !important;
  }

  .language-selector .dropdown-menu.dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
    transform: translateX(-20px) !important;
  }
}

/* ==========================================
   HOME - HERO SECTION MÓVIL
   ========================================== */

@media (max-width: 768px) {
  .hero-section {
    min-height: auto !important;
    height: auto !important;
    padding: 80px 15px 40px !important;
    overflow: visible !important;
    display: block !important;
  }

  .hero-content {
    padding: 0 !important;
    text-align: center;
  }

  .hero-logo {
    max-width: 120px;
    margin: 0 auto 20px;
  }

  /* Título - posicionado más arriba */
  .hero-title {
    font-size: clamp(2.5rem, 11vw, 3rem) !important;
    line-height: 1.1 !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
  }

  .hero-subtitle {
    font-size: clamp(0.85rem, 3.5vw, 1rem) !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
  }

  .hero-cta-group {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    margin-bottom: 25px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Botones del hero - en fila, texto en una línea */
  .hero-cta-group .btn-hero-primary {
    width: auto !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    font-size: 0.65rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    white-space: nowrap !important;
  }

  /* Badge de teléfono - mismo ancho que los dos botones juntos */
  .hero-cta-group .hero-phone-badge {
    width: 100% !important;
    flex-basis: 100% !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    font-size: 0.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    white-space: nowrap !important;
  }

  /* Iconos en botones hero - todos iguales */
  .hero-cta-group .btn-hero-primary i {
    font-size: 0.9rem !important;
    line-height: 1 !important;
  }

  /* Stats - 2 arriba, 1 abajo centrado */
  .hero-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
    width: 100% !important;
  }

  .hero-stat {
    padding: 12px 15px !important;
    min-width: auto !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    text-align: center !important;
    flex: 0 0 auto !important;
  }

  /* Tercer stat - en su propia línea centrado */
  .hero-stat:last-child {
    flex-basis: 100% !important;
    max-width: fit-content !important;
    margin: 0 auto !important;
  }

  .hero-stat-number {
    font-size: 1.1rem !important;
    margin-bottom: 4px !important;
  }

  .hero-stat-label {
    font-size: 0.6rem !important;
    line-height: 1.2 !important;
  }

  /* Ocultar imagen del hero en móvil */
  .hero-image-wrapper {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 85px 12px 35px !important;
  }

  .hero-title {
    font-size: 2.2rem !important;
  }

  .hero-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  .hero-stat {
    padding: 10px 6px !important;
  }

  .hero-stat-number {
    font-size: 1rem !important;
  }

  .hero-stat-label {
    font-size: 0.55rem !important;
  }
}

/* ==========================================
   SERVICIOS - CARDS MÓVIL
   ========================================== */

@media (max-width: 768px) {
  .services-grid,
  .service-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .service-card {
    padding: 25px 20px;
    margin-bottom: 15px;
  }

  .service-icon {
    width: 55px;
    height: 55px;
    margin-bottom: 15px;
  }

  .service-icon i,
  .service-icon .custom-icon {
    font-size: 1.5rem;
  }

  .service-title {
    font-size: 1.125rem;
    margin-bottom: 10px;
  }

  .service-description {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  /* Hero de servicios */
  .servicios-hero {
    padding: 100px 0 60px;
    min-height: auto;
  }

  .servicios-hero-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .servicios-hero-left {
    text-align: center;
  }

  .servicios-hero-right {
    margin-top: 20px;
  }

  .servicios-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .servicio-card {
    padding: 20px;
  }

  .servicio-card-icon {
    width: 55px;
    height: 55px;
  }

  .servicio-card-title {
    font-size: 1rem;
  }

  .servicio-card-desc {
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {
  .servicios-grid {
    max-width: 100%;
  }

  .servicio-card {
    padding: 18px;
  }
}

/* ==========================================
   PRESUPUESTO - FORMULARIO MÓVIL
   ========================================== */

@media (max-width: 768px) {
  .presupuesto-section {
    padding: 90px 0 50px;
  }

  .presupuesto-wrapper {
    padding: 0 15px;
  }

  .presupuesto-title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    margin-bottom: 15px;
  }

  .presupuesto-subtitle {
    font-size: 0.9375rem;
    margin-bottom: 25px;
  }

  .progress-indicator {
    padding: 18px 20px;
    margin-top: 30px;
  }

  .progress-text {
    font-size: 0.875rem;
  }

  .step-indicators {
    gap: 8px;
    flex-wrap: wrap;
  }

  .step-indicator {
    width: 12px;
    height: 12px;
  }

  .step-indicator.active {
    width: 14px;
    height: 14px;
  }

  .step-content {
    padding: 25px 18px;
  }

  .step-title {
    font-size: clamp(1.25rem, 6vw, 1.75rem);
    margin-bottom: 12px;
  }

  .step-subtitle {
    font-size: 0.9375rem;
    margin-bottom: 20px;
  }

  .service-cards {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .service-card {
    padding: 25px 20px;
  }

  .service-card h3 {
    font-size: 1.125rem;
  }

  .service-card p {
    font-size: 0.875rem;
  }

  /* Icono casita - centrar dentro del cuadrado */
  .service-card .service-icon i.ai-home {
    font-size: 32px !important;
    transform: translate(-6px, -7px);
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .form-input,
  .form-textarea,
  .form-select {
    font-size: 16px; /* Prevenir zoom en iOS */
    padding: 12px 15px;
  }

  .radio-cards {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .radio-card {
    padding: 18px 15px;
  }

  .step-actions {
    padding-top: 25px;
    margin-top: 30px;
  }

  .btn-prev,
  .btn-next,
  .btn-submit {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 0.9375rem;
  }

  /* Resumen del formulario - texto más pequeño */
  .summary-box {
    padding: 18px !important;
  }

  .summary-section h4 {
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
  }

  .summary-section p {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }

  /* Checkbox de privacidad - igual que contacto y trabaja */
  .checkbox-group {
    padding: 12px !important;
    gap: 10px !important;
  }

  .checkbox-group input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
  }

  .checkbox-group .checkbox-label {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
  }

  /* Select tipo vehículo - texto que no se salga */
  select.form-input {
    font-size: 0.85rem !important;
    padding: 12px 10px !important;
    white-space: normal !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  select.form-input option {
    font-size: 0.85rem !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }
}

@media (max-width: 480px) {
  .presupuesto-title {
    font-size: 1.5rem;
  }

  .step-content {
    padding: 20px 15px;
  }

  .service-icon {
    width: 60px;
    height: 60px;
  }

  .service-icon i {
    font-size: 2rem;
  }
}

/* ==========================================
   CONTACTO - FORMULARIO MÓVIL
   ========================================== */

@media (max-width: 991px) {
  /* ==================================
     CONTACTO HERO - CORRECCIÓN MÓVIL
     ================================== */
  .contacto-hero {
    min-height: auto;
    height: auto;
    padding: 100px 0 60px;
    display: flex;
    align-items: center;
    overflow: visible;
  }

  /* Cambiar orden en móvil: Badge/Título arriba, Stats abajo */
  .contacto-hero > .container > .row {
    display: flex;
    flex-direction: column;
  }

  .contacto-hero > .container > .row > .col-lg-7 {
    order: 2;
  }

  .contacto-hero > .container > .row > .col-lg-5 {
    order: 1;
    margin-bottom: 2rem;
  }

  .contacto-hero-content {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 2.5rem;
  }

  .contacto-hero-left,
  .contacto-hero-right {
    width: 100%;
  }

  .contacto-hero-right {
    text-align: left;
    max-width: 100%;
  }

  .contacto-hero-info {
    flex-direction: column;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
  }

  .contacto-hero-tag {
    width: 100%;
    justify-content: center;
  }

  .contacto-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .contacto-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .contacto-stats-row.justify-content-center {
    justify-content: center;
  }

  .contacto-stat {
    flex-grow: 1;
    flex-basis: 240px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 1.25rem;
    border-radius: 12px;
  }

  .contacto-info-card {
    padding: 2rem;
    margin-bottom: 2rem;
  }

  .contacto-mapa {
    min-height: 400px;
  }

  .faq-promo-section {
    padding: 60px 0;
  }

  .faq-promo-card {
    padding: 2.5rem 2rem;
    text-align: center;
  }

  .formulario-contacto-card {
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  .contacto-hero {
    padding: 80px 0 50px;
  }

  .contacto-hero-title {
    font-size: 1.75rem;
  }

  .contacto-hero-subtitle {
    font-size: 1rem;
  }

  /* Stats en móvil - layout 2-2-1 con CSS Grid */
  .contacto-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    justify-items: center !important;
  }

  /* Resetear los estilos de desktop para móvil */
  .contacto-stats-grid .contacto-stat:nth-child(1),
  .contacto-stats-grid .contacto-stat:nth-child(2),
  .contacto-stats-grid .contacto-stat:nth-child(3),
  .contacto-stats-grid .contacto-stat:nth-child(4) {
    grid-column: span 1 !important;
  }

  /* El último stat (5º) ocupa las 2 columnas y se centra */
  .contacto-stats-grid .contacto-stat:nth-child(5) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: 45% !important;
  }

  .contacto-stats-grid .contacto-stat {
    padding: 0.4rem 0.35rem !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.15rem !important;
    height: 100% !important;
    width: 100% !important;
  }

  .contacto-stats-grid .contacto-stat i {
    font-size: 1rem !important;
  }

  .contacto-stats-grid .contacto-stat-number {
    font-size: 0.65rem !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .contacto-stats-grid .contacto-stat-label {
    font-size: 0.5rem !important;
    white-space: normal !important;
  }


  .ubicacion-section,
  .formulario-contacto-section {
    padding: 60px 0;
  }

  .contacto-info-card {
    padding: 1.5rem;
    margin-bottom: 20px;
  }

  /* Disposición vertical: icono arriba, texto abajo */
  .contacto-info-item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.5rem !important;
  }

  .contacto-info-icon {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }

  .contacto-info-text {
    text-align: center !important;
  }

  .contacto-info-text h4 {
    font-size: 0.85rem !important;
  }

  .contacto-info-text p {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
  }

  .contacto-info-text p a {
    font-size: 0.75rem !important;
  }

  .contacto-mapa {
    min-height: 300px;
  }

  .faq-promo-card {
    padding: 2rem 1.5rem;
  }

  .faq-promo-icon {
    width: 60px;
    height: 60px;
  }

  .formulario-contacto-card {
    padding: 1.5rem;
  }

  .contacto-form .form-control {
    font-size: 16px; /* Prevenir zoom en iOS */
    padding: 12px 15px;
  }

  .contacto-form textarea.form-control {
    min-height: 120px;
  }

  .btn-contacto-submit {
    width: 100%;
    padding: 0.875rem 2rem;
    font-size: 0.9375rem;
  }

  /* Checkbox de privacidad - cuadrado y texto pequeño */
  .contacto-form .form-check-input {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
  }

  .contacto-form .form-check-label {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
  }
}

/* ==========================================
   TRABAJA CON NOSOTROS - RESPONSIVE MÓVIL
   ========================================== */

/* --- Tablet (max-width: 991px) --- */
@media (max-width: 991px) {
  .trabaja-hero {
    min-height: auto;
    padding: 130px 0 70px;
  }

  .trabaja-hero-content {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .trabaja-hero-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
  }

  .trabaja-hero-subtitle {
    font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
  }

  .trabaja-hero-visual {
    max-width: 400px;
  }

  .trabaja-stat-number {
    font-size: 2rem;
  }

  .perfil-section,
  .conoce-section,
  .formulario-section {
    padding: 80px 0;
  }

  .formulario-card {
    padding: 40px 30px;
  }

  .dudas-card {
    padding: 40px 30px;
    text-align: center;
  }

  .btn-dudas {
    margin-top: 20px;
  }

  /* Flip Cards - Tablet */
  .flip-cards-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 240px;
    gap: 16px;
  }

  .flip-card-icon {
    width: 60px;
    height: 60px;
    font-size: 28px;
  }

  .flip-card-number {
    font-size: 36px;
  }

  .flip-card-label {
    font-size: 16px;
  }
}

/* --- Móvil (max-width: 767px) --- */
@media (max-width: 767px) {
  .trabaja-hero {
    min-height: auto;
    padding: 120px 0 40px;
  }

  .trabaja-hero-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Título y subtítulo centrados */
  .trabaja-hero-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
    text-align: center !important;
  }

  .trabaja-hero-subtitle {
    font-size: clamp(0.875rem, 2vw, 1rem);
    margin-bottom: 1.5rem;
    text-align: center !important;
  }

  /* Badge centrado */
  .trabaja-badge-top {
    display: block !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: fit-content !important;
  }

  .trabaja-hero-left {
    align-items: center;
    text-align: center !important;
  }

  /* Flip cards más abajo */
  .trabaja-hero-image {
    margin-top: auto !important;
    padding-bottom: 10px !important;
  }

  /* Botones en fila y más pequeños */
  .trabaja-hero-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
  }

  .trabaja-hero .btn-hero-primary,
  .trabaja-hero .btn-hero-secondary {
    justify-content: center;
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.75rem !important;
  }

  .trabaja-hero .btn-hero-primary i,
  .trabaja-hero .btn-hero-secondary i {
    font-size: 0.8rem !important;
  }

  .trabaja-hero-visual {
    padding: 30px 20px;
  }

  .trabaja-stats {
    gap: 15px;
  }

  .trabaja-stat-item {
    padding: 15px;
  }

  .trabaja-stat-number {
    font-size: 1.75rem;
  }

  .trabaja-stat-label {
    font-size: 0.75rem;
  }

  .perfil-section,
  .conoce-section,
  .formulario-section {
    padding: 60px 0;
  }

  /* Perfil cards - contenido centrado y ancho adaptable */
  .perfil-section .row.g-4 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }

  .perfil-section .row.g-4 > .col-lg-6 {
    width: auto !important;
    max-width: 90% !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
  }

  .perfil-section .perfil-card {
    padding: 24px 20px !important;
    text-align: center !important;
    width: 340px !important;
    max-width: 95vw !important;
    margin: 0 auto !important;
    height: auto !important;
  }

  .perfil-section .perfil-card-icon {
    margin: 0 auto 1rem auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  .perfil-section .perfil-card-title {
    text-align: center !important;
  }

  .perfil-section .perfil-list {
    text-align: left !important;
    padding-left: 0 !important;
  }

  .perfil-section .perfil-list li {
    justify-content: flex-start !important;
  }

  .formulario-card {
    padding: 30px 24px;
  }

  .trabaja-form .form-control,
  .trabaja-form select {
    font-size: 16px; /* Prevenir zoom en iOS */
    padding: 12px 15px;
  }

  .file-upload-info {
    padding: 30px 20px;
  }

  .btn-form-submit {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
  }

  /* Checkbox de privacidad - cuadrado y texto pequeño */
  .trabaja-form .form-check-input {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
  }

  .trabaja-form .form-check-label {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
  }

  /* Conoce Oretana - Centrado completo */
  .conoce-section .row {
    flex-direction: column !important;
  }

  .conoce-section .col-lg-6 {
    width: 100% !important;
    max-width: 100% !important;
  }

  .conoce-section .conoce-content {
    text-align: center !important;
  }

  .conoce-section .section-badge {
    display: inline-block !important;
    margin: 0 auto 1rem !important;
  }

  .conoce-section .section-title {
    text-align: center !important;
  }

  .conoce-section .conoce-text {
    text-align: center !important;
  }

  /* Recuadros verdes - centrados */
  .conoce-section .conoce-features {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    margin: 1rem 0 !important;
  }

  .conoce-section .conoce-feature {
    width: 100% !important;
    max-width: 340px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0.75rem 1.25rem 1.25rem !important;
    margin-bottom: 0 !important;
    border-left: none !important;
    border-top: 4px solid var(--color-success) !important;
  }

  .conoce-section .conoce-feature i {
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
  }

  .conoce-section .conoce-feature > div {
    width: 100% !important;
  }

  .conoce-section .conoce-feature h4,
  .conoce-section .conoce-feature p {
    text-align: center !important;
  }

  /* Botón centrado */
  .conoce-section .btn-conoce {
    display: inline-flex !important;
    margin: 0 auto !important;
  }

  /* Ocultar imagen en móvil */
  .conoce-section .conoce-image-wrapper {
    display: none !important;
  }

  .dudas-section {
    padding: 60px 0;
  }

  .dudas-card {
    padding: 30px 24px;
  }

  /* Flip Cards - Móvil (en fila horizontal y pequeñas) */
  .flip-cards-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
    max-width: 100%;
  }

  .flip-card {
    width: 95px;
    height: 95px;
  }

  .flip-card-front {
    padding: 0.3rem 0.5rem 0.5rem;
    justify-content: flex-end !important;
    padding-bottom: 0.4rem !important;
  }

  .flip-card-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 0.35rem;
  }

  .flip-card-icon i {
    font-size: 1rem;
  }

  .flip-card-number {
    font-size: 1.1rem;
    margin-bottom: 0;
    line-height: 1;
  }

  .flip-card-label {
    font-size: 0.55rem;
    line-height: 1;
  }

  /* Botones móvil genéricos */
  .btn-hero-mobile {
    padding: 0.5rem 0.875rem !important;
    font-size: 0.75rem !important;
  }

  .btn-hero-mobile i {
    font-size: 0.8rem !important;
  }

  /* Toast en móvil */
  #toast-container {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .toast {
    min-width: 100%;
    max-width: 100%;
  }
}

/* ==========================================
   NOSOTROS - RESPONSIVE MÓVIL
   ========================================== */

@media (max-width: 991px) {
  .nosotros-hero {
    padding: 100px 0 60px;
  }

  .nosotros-hero-title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .nosotros-hero-text {
    font-size: 1rem;
    margin-bottom: 25px;
  }

  /* Reglas para la rejilla de stats en tablets */
  .nosotros-hero .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 500px;
    margin: 15px auto 0; /* Margen superior reducido */
  }

  .nosotros-hero .stats-grid .stat-item {
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .nosotros-hero .stats-grid .stat-item.stat-image {
    padding: 0;
  }
  
  .nosotros-hero .stats-grid .stat-item.stat-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .nosotros-hero .stats-grid .stat-value {
    font-size: 2.5rem;
  }

  .nosotros-hero .stats-grid .stat-label {
    font-size: 0.8rem;
    text-align: center;
  }

  .valores-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .valor-item {
    padding: 25px 20px;
  }
}

@media (max-width: 768px) {
  .nosotros-hero {
    padding: 90px 0 50px;
  }

  .nosotros-intro {
    text-align: center;
  }

  .nosotros-commitment {
    display: flex;
    justify-content: center;
    align-items: center; /* Good to have for vertical alignment */
  }

  /* Forzar la rejilla de 2 columnas en móvil y hacerla más pequeña */
  .nosotros-hero .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    padding: 0 15px !important;
    max-width: 100%; /* Ocupar todo el ancho en móvil */
    margin-top: 15px; /* Margen superior para que no esté pegado */
  }

  .nosotros-hero .stats-grid .stat-item {
    height: auto;
    aspect-ratio: 1; /* Hacerlos cuadrados */
  }

  .nosotros-hero .stats-grid .stat-value {
    font-size: 1.8rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .nosotros-hero .stats-grid .stat-label {
    font-size: 0.7rem !important;
    line-height: 1.2;
  }

  /* Limpiando las reglas duplicadas/conflictivas */
  .stat-value {
    font-size: 1.8rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }

  .mision-vision-section {
    padding: 60px 0;
  }

  .mv-card {
    padding: 30px 20px;
  }

  .mv-icon {
    width: 65px;
    height: 65px;
  }

  .mv-title {
    font-size: 1.375rem;
  }

  .mv-text {
    font-size: 1rem;
  }

  .historia-content {
    padding: 60px 0 30px;
  }

  /* --- INICIO CAMBIOS TIMELINE v5 (REFINADO) --- */

  /* Contenedor principal con scroll y scrollbar visible y estilizada */
  .timeline-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px; /* Espacio para el scrollbar y la sombra */
    margin: 0 -15px;
    /* Estilos para el scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--color-success) var(--color-gray-200);
  }
  .timeline-wrapper::-webkit-scrollbar {
    height: 8px;
    display: block !important; /* Asegurar que se vea */
  }
  .timeline-wrapper::-webkit-scrollbar-track {
    background: var(--color-gray-200);
    border-radius: 4px;
  }
  .timeline-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--color-success);
    border-radius: 4px;
  }

  /* El timeline como tal, ahora un flexbox con línea de unión */
  .historia-timeline {
    display: flex;
    flex-wrap: nowrap;
    gap: 25px; /* Reducimos el gap */
    padding: 0 25px;
    width: max-content;
    position: relative; /* Contexto para la línea de unión */
  }

  /* Línea de unión que se scrolla con el contenido */
  .historia-timeline::before {
    content: '';
    position: absolute;
    top: 220px; /* Baja la línea para que esté debajo del título */
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--color-success);
    z-index: 0; /* Detrás de los items */
  }

  /* Contenedor de cada hito (dot + card) */
  .timeline-item {
    width: 250px !important; /* Un poco más pequeño */
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important; /* Mantiene el contexto de stacking */
    z-index: 1 !important; /* Para que esté sobre la línea del timeline */
    animation: none !important;
  }

  /* Círculo con el año, un poco más pequeño */
  .timeline-dot {
    width: 80px !important;
    height: 80px !important;
    margin-bottom: -40px !important; /* Mitad de la nueva altura */
    position: relative !important;
    z-index: 2 !important;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-success) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.25);
    transition: all 0.4s ease;
  }

  /* Tarjeta con la info, un poco más pequeña */
  .timeline-card {
    padding-top: 55px !important; /* Espacio para el dot de 80px */
    min-height: 290px !important; /* Altura reducida */
    position: relative !important;
    z-index: 1 !important;
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: 20px; /* Un poco menos redondeada */
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* Fuentes ligeramente ajustadas */
  .timeline-year {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
  }
  .timeline-title {
    font-size: 1.5rem !important; /* Título más grande */
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
  }
  .timeline-text {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Colores y hovers */
  .timeline-item:nth-child(1) .timeline-dot { background: linear-gradient(135deg, #2563eb, #10b981); }
  .timeline-item:nth-child(2) .timeline-dot { background: linear-gradient(135deg, #10b981, #2563eb); }
  .timeline-item:nth-child(3) .timeline-dot { background: linear-gradient(135deg, #2563eb, #10b981); }
  .timeline-item:nth-child(4) .timeline-dot { background: linear-gradient(135deg, #10b981, #2563eb); }
  .timeline-item:hover .timeline-dot { transform: scale(1.1); }
  
  .timeline-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); }
  .timeline-card::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--color-accent), var(--color-success)); border-radius: 0 0 20px 20px; transform: scaleX(0); transition: transform 0.4s ease; }
  .timeline-card:hover::before { transform: scaleX(1); }
  
  /* Soporte para modo oscuro */
  [data-bs-theme="dark"] .timeline-card { background: var(--color-primary); border-color: rgba(255, 255, 255, 0.1); }
  [data-bs-theme="dark"] .timeline-card:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25); }
  [data-bs-theme="dark"] .timeline-title { color: var(--color-white); }
  [data-bs-theme="dark"] .timeline-text { color: var(--color-gray-400); }
  [data-bs-theme="dark"] .timeline-text strong { color: var(--color-success); }

  /* --- FIN CAMBIOS TIMELINE v5 --- */

  .historia-stats {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 15px;
  }

  .cta-section {
    padding: 60px 0;
  }

  .cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .btn-cta-primary,
  .btn-cta-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================
   FOOTER - OPTIMIZACIONES MÓVIL
   ========================================== */

@media (max-width: 768px) {
  .footer-main {
    padding: 40px 0 20px;
  }

  .footer-brand {
    text-align: center;
    margin-bottom: 30px;
  }

  .footer-logo {
    height: 35px;
    margin-bottom: 15px;
  }

  .footer-description {
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 15px;
  }

  .footer-divider {
    display: block;
    border: 0;
    border-top: 2px solid rgba(255, 255, 255, 0.4);
    width: 70%;
    margin: -10px auto 20px;
  }

  .footer-title {
    font-size: 1.0625rem;
    margin-bottom: 15px;
    text-align: center;
  }

  .footer-links {
    text-align: center;
  }

  .footer-links li {
    margin: 0;
    padding: 0;
    line-height: 1.2;
  }

  .footer-links a {
    font-size: 0.875rem;
    padding: 2px 0;
    display: block;
    min-height: auto;
  }

  .footer-contact-item {
    font-size: 0.875rem;
    justify-content: center;
    margin-bottom: 12px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 15px;
    padding-top: 20px;
    margin-top: 30px;
  }

  .footer-copyright {
    font-size: 0.8125rem;
    text-align: center;
  }

  .footer-legal {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .footer-legal a {
    font-size: 0.8125rem;
  }
}

/* ==========================================
   BOTONES Y CTA - OPTIMIZACIONES MÓVIL
   ========================================== */

@media (max-width: 768px) {
  /* Todos los botones principales */
  [class*="btn-cta"],
  [class*="btn-hero"],
  [class*="btn-servicio"],
  [class*="btn-form"] {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 0.9375rem;
    min-height: 48px;
  }

  /* Grupos de botones */
  [class*="cta-buttons"],
  [class*="hero-buttons"] {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
}

/* ==========================================
   UTILIDADES RESPONSIVE MÓVIL
   ========================================== */

@media (max-width: 768px) {
  /* Ocultar en móvil */
  .mobile-hidden {
    display: none !important;
  }

  /* Mostrar solo en móvil */
  .mobile-only {
    display: block !important;
  }

  /* Texto centrado en móvil */
  .mobile-center {
    text-align: center !important;
  }

  /* Ancho completo en móvil */
  .mobile-full-width {
    width: 100% !important;
  }

  /* Margen superior en móvil */
  .mobile-mt-1 { margin-top: 0.5rem !important; }
  .mobile-mt-2 { margin-top: 1rem !important; }
  .mobile-mt-3 { margin-top: 1.5rem !important; }
  .mobile-mt-4 { margin-top: 2rem !important; }

  /* Margen inferior en móvil */
  .mobile-mb-1 { margin-bottom: 0.5rem !important; }
  .mobile-mb-2 { margin-bottom: 1rem !important; }
  .mobile-mb-3 { margin-bottom: 1.5rem !important; }
  .mobile-mb-4 { margin-bottom: 2rem !important; }

  /* Padding en móvil */
  .mobile-p-1 { padding: 0.5rem !important; }
  .mobile-p-2 { padding: 1rem !important; }
  .mobile-p-3 { padding: 1.5rem !important; }
  .mobile-p-4 { padding: 2rem !important; }
}

/* ==========================================
   MEJORAS DE ACCESIBILIDAD MÓVIL
   ========================================== */

@media (max-width: 768px) {
  /* Mejorar contraste de focus */
  *:focus {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
  }

  /* Mejorar áreas de toque */
  a, button, input, select, textarea {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }

  /* Prevenir scroll horizontal */
  html, body {
    overflow-x: hidden;
  }

  /* Mejorar legibilidad */
  p, li, span {
    line-height: 1.6;
  }
}

/* ==========================================
   OPTIMIZACIONES DE RENDIMIENTO MÓVIL
   ========================================== */

@media (max-width: 768px) {
  /* FIX: Desactivar animaciones de iconos que causan bug de repetición rápida */
  .service-icon,
  .service-icon-camion {
    animation: none !important;
  }

  .advantage-icon {
    animation: none !important;
  }

  /* Optimizar imágenes de fondo en móvil */
  [class*="hero"]::before,
  [class*="section"]::before {
    background-attachment: scroll !important;
  }

  /* Hero - Sin animaciones de parpadeo */
  .hero-section,
  .hero-bg-image,
  .hero-overlay {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================
   TOASTS Y NOTIFICACIONES MÓVIL
   ========================================== */

@media (max-width: 768px) {
  #toast-container,
  .toast-container {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }

  .toast {
    min-width: 100%;
    max-width: 100%;
    padding: 14px 16px;
  }

  .toast-icon {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .toast-title {
    font-size: 0.9375rem;
  }

  .toast-message {
    font-size: 0.8125rem;
  }
}

/* ==========================================
   FAQ - CTA CENTRADO EN MÓVIL
   ========================================== */

@media (max-width: 768px) {
  .faq-cta-card {
    text-align: center;
  }

  .faq-cta-card .row {
    flex-direction: column;
    gap: 20px;
  }

  .faq-cta-card .col-lg-8,
  .faq-cta-card .col-lg-4 {
    width: 100%;
    text-align: center;
  }

  .faq-cta-card .text-lg-end {
    text-align: center !important;
  }

  .faq-cta-title {
    text-align: center;
  }

  .faq-cta-text {
    text-align: center;
  }

  .btn-faq-cta {
    display: inline-flex;
    justify-content: center;
    margin: 0 auto;
  }
}

/* ==========================================
   SERVICIOS - MEJORAS RESPONSIVE ESPECÍFICAS
   ========================================== */

@media (max-width: 991.98px) { /* Abarca tablets y móviles */

  /* HERO SECTION - Corrección de colapso */
  .servicios-hero {
    min-height: auto; /* Permitir que el contenido defina la altura */
    height: auto; /* Permitir que crezca con el contenido */
    padding: 100px 15px 60px; /* Espaciado seguro para el contenido */
    overflow: visible; /* Permitir que el contenido sea visible */
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .servicios-hero-content {
    display: flex;
    flex-direction: column; /* Apilamos los elementos verticalmente */
    text-align: center;
    gap: 30px; /* Espacio entre el texto y la rejilla de servicios */
    width: 100%;
    max-width: 100%; /* Ancho completo en móvil */
    margin-left: auto; /* Centramos el bloque de contenido */
    margin-right: auto; /* Centramos el bloque de contenido */
  }

  .servicios-hero-left {
    align-items: center; /* Centramos el contenido de la izquierda */
  }

  /* Badge centrado */
  .servicios-badge {
    align-self: center;
    margin-bottom: 0.75rem;
  }

  .servicios-hero-subtitle {
    margin-bottom: 1.5rem;
  }

  /* El grid de tarjetas de servicios dentro del hero (2 columnas en tablet) */
  .servicios-hero .servicios-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
  }

  /* DETALLE DE SERVICIOS (Estas reglas funcionaron bien) */
  .servicio-detalle .servicio-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .servicio-detalle .servicio-caracteristicas {
    justify-content: center;
  }
  
  .servicio-detalle .btn-servicio-cta {
    width: auto;
    max-width: 100%;
  }

  .servicio-imagen-wrapper {
    margin-bottom: 2rem;
  }
  
  .servicio-titulo::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Ajuste específico para móviles (pantallas más pequeñas que tablets) */
@media (max-width: 767px) {
  /* Mantenemos 2 columnas (2x2) para que el hero sea más compacto */
  .servicios-hero .servicios-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  /* Reducimos el padding en pantallas pequeñas para dar más espacio al contenido */
  .servicios-hero {
    padding-top: 90px;
    padding-bottom: 2rem;
  }

  /* Tarjetas más compactas en móvil */
  .servicios-hero .servicio-card {
    padding: 1.25rem 1rem;
  }

  .servicios-hero .servicio-card-icon {
    width: 55px;
    height: 55px;
    margin-bottom: 0.75rem;
  }

  .servicios-hero .servicio-card-title {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
  }

  .servicios-hero .servicio-card-desc {
    font-size: 0.75rem;
  }
}

/* Tablets grandes - Servicios */
@media (max-width: 1200px) {
  .servicio-titulo {
    font-size: 2rem;
  }
}

/* Tablets - Servicios detalle */
@media (max-width: 992px) {
  .servicio-detalle {
    padding: 4rem 0;
  }

  .servicio-numero {
    font-size: 3rem;
  }

  .servicio-titulo {
    font-size: 1.75rem;
  }

  .servicio-imagen-wrapper {
    padding: 1.5rem;
  }
}

/* Móviles - Servicios detalle */
@media (max-width: 768px) {
  .servicios-hero {
    min-height: auto !important;
    height: auto !important;
    padding-top: 100px;
    padding-bottom: 2.5rem;
    overflow: visible !important;
  }

  .servicios-hero-title {
    font-size: 1.75rem;
  }

  .servicios-hero-subtitle {
    font-size: 0.95rem;
  }

  .servicio-detalle {
    padding: 3rem 0;
  }

  .servicio-contenido {
    padding: 1rem 0;
    text-align: center;
  }

  .servicio-numero {
    font-size: 2.5rem;
  }

  .servicio-titulo {
    font-size: 1.5rem;
  }

  .servicio-descripcion {
    font-size: 0.95rem;
  }

  .servicio-destacado {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  /* Características: 2 arriba + 1 centrada abajo */
  .servicio-caracteristicas {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    justify-items: center;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .caracteristica {
    font-size: 0.75rem;
    padding: 0.5rem 0.65rem;
    width: 100%;
    justify-content: center;
    white-space: nowrap;
  }

  /* La tercera característica ocupa las 2 columnas y se centra */
  .caracteristica:nth-child(3) {
    grid-column: 1 / -1;
    width: auto;
    max-width: fit-content;
    justify-self: center;
  }

  .btn-servicio-cta {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.5rem;
  }

  .servicio-imagen-wrapper {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }

  .servicio-imagen-decoration {
    top: 10px;
    left: 10px;
  }

  .servicio-imagen-badge {
    bottom: -15px;
    right: 15px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }

  .servicio-imagen-badge i {
    font-size: 1rem;
  }

  .servicios-hero-buttons {
    flex-direction: column-reverse; /* Presupuesto arriba, Explorar abajo */
    align-items: center;
    gap: 0.6rem;
    width: 100%;
  }

  .servicios-hero .btn-hero-primary,
  .servicios-hero .btn-hero-secondary {
    width: 100%;
    max-width: 280px;
    padding: 0.75rem 1.25rem;
    font-size: 0.85rem;
    justify-content: center;
  }

  .servicios-hero .btn-hero-primary i,
  .servicios-hero .btn-hero-secondary i {
    display: none; /* Ocultar iconos en móvil */
  }
}

/* Móviles pequeños - Servicios */
@media (max-width: 480px) {
  .servicios-hero {
    padding-top: 90px;
    padding-bottom: 2rem;
  }

  .servicios-hero-title {
    font-size: 1.5rem;
  }

  .servicios-badge {
    font-size: 0.7rem;
    padding: 0.4rem 1rem;
  }

  /* Tarjetas del hero más compactas */
  .servicios-hero .servicio-card {
    padding: 1rem 0.75rem;
  }

  .servicios-hero .servicio-card-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 0.5rem;
  }

  .servicios-hero .servicio-card-icon i {
    font-size: 1.5rem;
  }

  .servicios-hero .servicio-card-icon .custom-icon {
    width: 28px;
    height: 28px;
  }

  .servicios-hero .servicio-card-icon-camion .custom-icon {
    width: 40px;
    height: 40px;
  }

  .servicios-hero .servicio-card-title {
    font-size: 0.9rem;
  }

  .servicios-hero .servicio-card-desc {
    font-size: 0.75rem;
  }

  .servicio-titulo {
    font-size: 1.35rem;
  }

  .servicio-numero {
    font-size: 2rem;
  }
}

/* ==========================================
   HOME - RESPONSIVE COMPLETO (migrado de home.css)
   ========================================== */

/* Service card featured */
@media (max-width: 768px) {
  .service-card-featured {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }

  .service-card-featured .service-content {
    padding-right: 0;
  }
}

/* About section - Tablet */
@media (max-width: 991px) {
  .about-title {
    font-size: 2rem;
  }

  .values-list {
    grid-template-columns: 1fr;
  }
}

/* About section - Móvil */
@media (max-width: 768px) {
  .about-section {
    padding: 4rem 0;
  }

  /* Centrar contenido de la introducción */
  .about-intro {
    text-align: center;
  }

  .about-title {
    font-size: 1.75rem;
  }

  .about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-mission {
    flex-direction: column;
    text-align: center;
  }

  .mission-icon {
    margin: 0 auto;
  }

  /* Centrar título de valores */
  .values-title {
    text-align: center;
  }

  /* Reducir texto de sectores y agrandar icono */
  .sectors-label {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    justify-content: center;
  }

  .sectors-label i {
    font-size: 1.2rem;
    margin-right: 0.5rem;
  }
}

/* Careers Section (Únete al equipo) - Móvil */
@media (max-width: 768px) {
  .careers-content {
    text-align: center;
  }

  .careers-buttons {
    display: flex;
    justify-content: center;
  }

  .careers-buttons .btn-careers-primary {
    width: auto;
    flex-grow: 0;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

/* Advantages grid */
@media (max-width: 768px) {
  .advantages-grid {
    grid-template-columns: 1fr;
  }
}

/* Footer legal */
@media (max-width: 768px) {
  .footer-legal {
    justify-content: center;
    margin-top: 1rem;
  }
}

/* Tablets grandes y pantallas medianas */
@media (max-width: 1200px) {
  .hero-section {
    min-height: auto;
    padding-top: 70px;
  }

  .hero-content {
    padding: 2rem 0 3rem;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-stats {
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  .hero-stat {
    min-width: auto;
  }

  .hero-stat-number {
    font-size: 2rem;
  }

  .hero-stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
  }

  .section-title {
    font-size: 2.25rem;
  }
}

/* Tablets */
@media (max-width: 992px) {
  .hero-section {
    padding-top: 60px;
  }

  .hero-content {
    padding: 2rem 0 3rem;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .hero-stats {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .hero-stat {
    flex: 0 0 auto;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    justify-content: center;
  }

  .hero-logo {
    max-width: 180px;
  }

  .section-title {
    font-size: 2rem;
  }

  .section-subtitle {
    font-size: 0.95rem;
  }

  .advantages-title {
    font-size: 1.75rem;
  }

  .footer-main {
    padding: 3rem 0 1.5rem;
  }
}

/* Móviles y tablets pequeñas */
@media (max-width: 768px) {
  /* Navbar */
  .navbar-main {
    padding: 0.5rem 0;
  }

  .navbar-brand-logo {
    height: 45px;
  }

  .mode-switch {
    margin-right: 0.5rem !important;
  }

  /* Menú desplegable centrado */
  .navbar-nav {
    text-align: center;
    padding: 1rem 0;
  }

  .navbar-nav .nav-item {
    width: 100%;
  }

  .navbar-nav .nav-link {
    display: block;
    padding: 0.75rem 1rem !important;
  }

  /* Hero Section - Estilos consolidados en HOME - HERO SECTION MÓVIL */

  .hero-image-wrapper {
    margin-top: 2rem;
    display: none;
  }

  /* Services Section */
  .services-section {
    padding: 3rem 0;
  }

  .section-header {
    margin-bottom: 2rem;
  }

  .section-badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
  }

  .section-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .section-subtitle {
    font-size: 0.875rem;
  }

  .service-card {
    padding: 1.5rem;
  }

  .service-icon {
    width: 50px;
    height: 50px;
  }

  .service-icon i,
  .service-icon .custom-icon {
    font-size: 1.25rem;
    width: 1.5rem;
    height: 1.5rem;
  }

  /* Igualar tamaño del icono de transporte nacional con los demás */
  .service-icon-camion {
    width: 50px;
    height: 50px;
  }

  /* Icono camión - más grande para que se vea igual que los demás */
  .service-icon-camion .custom-icon,
  .service-icon-camion img.custom-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  /* Icono globo (transporte internacional) - centrar mejor */
  .service-icon i.ai-globe {
    position: relative;
    left: 2px;
    top: 2px;
  }

  /* Icono casita (almacén) - centrar mejor */
  .service-icon i.ai-home {
    position: relative;
    left: 2px;
    top: 2px;
  }

  /* Icono paquete (paquetería express) - centrar mejor */
  .service-card .service-icon img.custom-icon[alt="Paquetería Express"] {
    position: relative;
    left: -2px;
  }

  .service-title {
    font-size: 1.1rem;
  }

  .service-description {
    font-size: 0.8rem;
  }

  /* Advantages Section */
  .advantages-section {
    padding: 3rem 0;
  }

  .advantages-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }

  .advantages-grid {
    grid-template-columns: 1fr;
    gap: 1rem; /* Reducido el espacio */
  }

  .advantage-item {
    text-align: center;
  }

  .advantage-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem auto; /* Centrado y con margen inferior */
    display: flex; /* Para centrar el icono dentro */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
  }

  .advantage-icon i,
  .advantage-icon .custom-icon {
    font-size: 1.5rem;
    width: 2rem;
    height: 2rem;
  }

  /* Ajuste manual para centrar el icono de ubicación */
  .advantage-icon .ai-map-pin {
    position: relative;
    left: 4px; /* Más a la derecha */
    top: 3px; /* Un poco más hacia abajo */
  }

  .advantage-title {
    font-size: 1.1rem;
  }

  .advantage-description {
    font-size: 0.9rem; /* Texto de la descripción más grande */
  }

  /* CTA Section */
  .cta-section {
    padding: 3rem 0;
  }

  .cta-title {
    font-size: 1.5rem;
  }

  .cta-subtitle {
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
  }

  .cta-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }

  .btn-cta-primary,
  .btn-cta-secondary {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
  }

  /* Footer */
  .footer-main {
    padding: 2.5rem 0 1rem;
  }

  .footer-brand {
    text-align: center;
    margin-bottom: 1rem;
  }

  .footer-logo {
    height: 40px;
  }

  .footer-description {
    font-size: 0.8rem;
    text-align: center;
  }

  .footer-social {
    justify-content: center;
    margin-top: 1rem;
  }

  .footer-title {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }

  .footer-links a {
    font-size: 0.8rem;
  }

  .footer-contact-item {
    font-size: 0.8rem;
  }

  .footer-bottom {
    padding-top: 1rem;
    margin-top: 1.5rem;
  }

  .footer-copyright {
    font-size: 0.75rem;
  }

  .footer-legal a {
    font-size: 0.75rem;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  /* Hero - Estilos consolidados en HOME - HERO SECTION MÓVIL */

  .section-title {
    font-size: 1.35rem;
  }

  .advantages-title {
    font-size: 1.35rem;
  }

  .cta-title {
    font-size: 1.35rem;
  }

  .service-card {
    padding: 1.25rem;
  }

  .btn-hero-primary,
  .btn-hero-secondary,
  .btn-cta-primary,
  .btn-cta-secondary {
    padding: 0.75rem 1.25rem;
    font-size: 0.8rem;
  }

  .footer-social a {
    width: 36px;
    height: 36px;
  }
}

/* Landscape en móviles - Hero ajustado en HOME - HERO SECTION MÓVIL */

/* Ajustes para pantallas muy anchas */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }

  .hero-title {
    font-size: 4rem;
  }

  .section-title {
    font-size: 3rem;
  }
}

/* Botón volver arriba - Responsive */
@media (max-width: 768px) {
  .back-to-top {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }
}

/* ==========================================
   HOME - CAREERS SECTION RESPONSIVE
   ========================================== */

@media (max-width: 991px) {
  .careers-section {
    padding: 100px 0 60px;
  }

  .careers-title {
    font-size: 2.25rem;
  }

  .careers-text {
    font-size: 1rem;
  }

  .careers-buttons {
    justify-content: center;
  }

  .careers-image-wrapper {
    margin-top: 40px;
  }

  .careers-decoration {
    top: -15px;
    right: -15px;
  }
}

@media (max-width: 767px) {
  .careers-section {
    padding: 80px 0 50px;
  }

  .careers-title {
    font-size: 1.875rem;
  }

  .careers-benefits {
    gap: 12px;
  }

  .benefit-item {
    padding: 14px 18px;
  }

  .benefit-item i {
    font-size: 1.25rem;
  }

  .benefit-item span {
    font-size: 0.9375rem;
  }

  .careers-buttons {
    flex-direction: column;
    width: 100%;
  }

  .btn-careers-primary,
  .btn-careers-secondary {
    width: 100%;
    justify-content: center;
  }

  .careers-decoration {
    top: -10px;
    right: -10px;
  }
}

@media (max-width: 575px) {
  .careers-section {
    padding: 70px 0 40px;
  }

  .careers-title {
    font-size: 1.625rem;
  }

  .careers-text {
    font-size: 0.9375rem;
  }
}

/* ==========================================
   DIÁLOGOS DE CONFIRMACIÓN - MÓVIL
   ========================================== */

@media (max-width: 768px) {
  .confirm-dialog {
    min-width: 280px !important;
    max-width: 85vw !important;
    margin: 0 15px !important;
  }

  .confirm-dialog .toast-title {
    font-size: 1rem !important;
  }

  .confirm-dialog .toast-message {
    font-size: 0.85rem !important;
  }

  .confirm-dialog .btn-confirm,
  .confirm-dialog .btn-cancel {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
  }
}

/* ==========================================
   FIN DE OPTIMIZACIONES RESPONSIVE MÓVIL
   ========================================== */
/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1199px) {
    .historia-timeline {
        grid-template-columns: repeat(4, 1fr); /* Mantener 4 columnas */
        gap: 30px;
        padding: 0 30px;
    }

    .timeline-dot {
        width: 90px;
        height: 90px;
    }

    .timeline-year {
        font-size: 1.5rem;
    }

    .timeline-card {
        min-height: 280px;
    }
}

@media (max-width: 991px) {
    .historia-content {
        padding: 80px 0 70px;
    }

    .historia-intro {
        font-size: 1.0625rem;
        margin-bottom: 50px;
    }

    .historia-timeline {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
        padding: 0 30px;
        gap: 40px;
    }

    .timeline-line-horizontal {
        display: none; /* Ocultar línea en tablet y móvil */
    }

    .timeline-card {
        min-height: 300px;
        padding: 60px 28px 28px;
    }

    .historia-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        margin-top: 80px;
    }
}

@media (max-width: 767px) {
    .historia-content {
        padding: 70px 0 60px;
    }

    .historia-intro {
        font-size: 1rem;
        margin-bottom: 40px;
    }

    .historia-timeline {
        grid-template-columns: 1fr;
        padding: 0 20px;
        gap: 50px;
    }

    .timeline-dot {
        width: 80px;
        height: 80px;
        margin-bottom: -40px;
    }

    .timeline-year {
        font-size: 1.375rem;
    }

    .timeline-card {
        min-height: 280px;
        padding: 55px 24px 24px;
    }

    .timeline-title {
        font-size: 1.25rem;
    }

    .timeline-text {
        font-size: 0.9375rem;
    }

    .historia-stats {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 60px;
        padding: 0 20px;
    }

    .historia-stat-card {
        padding: 35px 28px;
    }

    .historia-stat-icon {
        font-size: 44px;
    }

    .historia-stat-number {
        font-size: 2.25rem;
    }
}

@media (max-width: 575px) {
    .historia-content {
        padding: 60px 0 50px;
    }

    .historia-intro {
        font-size: 0.9375rem;
        margin-bottom: 40px;
    }

    .timeline-dot {
        width: 70px;
        height: 70px;
        margin-bottom: -35px;
    }

    .timeline-year {
        font-size: 1.25rem;
    }

    .timeline-card {
        padding: 50px 20px 20px;
        min-height: 260px;
    }

    .timeline-title {
        font-size: 1.125rem;
    }

    .timeline-text {
        font-size: 0.875rem;
    }
}

/* ========================================
   CTA - FONDO BLANCO
   ======================================== */
.cta-section {
    padding: 100px 0;
    background: var(--color-white);
    position: relative;
    border-top: 1px solid var(--color-gray-200);
}

[data-bs-theme="dark"] .cta-section {
    background: var(--color-primary);
    border-top-color: rgba(255, 255, 255, 0.1);
}

.cta-content {
    text-align: center;
    position: relative;
}

.cta-title {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--color-gray-900);
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--color-accent), var(--color-success));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-bs-theme="dark"] .cta-title {
    color: var(--color-white);
    -webkit-text-fill-color: inherit;
    background: none;
}

.cta-subtitle {
    font-size: 1.25rem;
    color: var(--color-gray-600);
    margin-bottom: 2.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

[data-bs-theme="dark"] .cta-subtitle {
    color: var(--color-gray-300);
}

.cta-buttons {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-cta-primary,
.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 36px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.0625rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-cta-primary {
    background: linear-gradient(135deg, var(--color-accent), var(--color-success));
    color: white;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
}

.btn-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(37, 99, 235, 0.4);
}

.btn-cta-secondary {
    background: white;
    color: var(--color-accent);
    border-color: var(--color-gray-300);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] .btn-cta-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-cta-secondary:hover {
    background: var(--color-gray-100);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border-color: var(--color-accent);
}

[data-bs-theme="dark"] .btn-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-accent);
}

/* ========================================
   ANIMACIONES
   ======================================== */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Clases para animaciones con Intersection Observer */
.reveal {
    opacity: 0;
    transition: all 0.6s ease;
}

.reveal.active {
    opacity: 1;
    animation: fadeInUp 0.6s ease forwards;
}

.reveal-left {
    opacity: 0;
    transition: all 0.6s ease;
}

.reveal-left.active {
    opacity: 1;
    animation: fadeInLeft 0.6s ease forwards;
}

.reveal-right {
    opacity: 0;
    transition: all 0.6s ease;
}

.reveal-right.active {
    opacity: 1;
    animation: fadeInRight 0.6s ease forwards;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1199px) {
    .stats-grid {
        max-width: 450px;
    }
}

@media (max-width: 991px) {
    .nosotros-hero {
        padding: 120px 0 80px;
    }

    .nosotros-hero-title {
        font-size: 2.5rem;
    }

    .stats-grid {
        max-width: 400px;
        gap: 14px;
        margin-top: 40px;
    }

    .valores-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-title {
        font-size: 2.25rem;
    }

    .cta-title {
        font-size: 2.25rem;
    }
}

@media (max-width: 767px) {
    .nosotros-hero {
        padding: 100px 0 60px;
    }

    .nosotros-hero-title {
        font-size: 2rem;
    }

    .nosotros-hero-text {
        font-size: 1rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        max-width: 300px;
        margin: 30px auto 0;
    }

    .stat-value {
        font-size: 2.25rem;
    }

    .section-title {
        font-size: 1.875rem;
    }

    .mision-vision-section,
    .historia-section {
        padding: 70px 0;
    }

    .valores-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .servicios-badges {
        flex-direction: column;
    }

    .servicio-badge {
        justify-content: center;
        width: 100%;
    }

    .cta-section {
        padding: 70px 0;
    }

    .cta-title {
        font-size: 1.875rem;
    }

    .cta-subtitle {
        font-size: 1.125rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        width: 100%;
        justify-content: center;
    }

    /* Timeline horizontal responsivo */
    .historia-timeline {
        padding: 80px 20px;
        gap: 40px;
    }

    .timeline-item {
        min-width: 220px;
    }

    .timeline-card {
        padding: 18px 20px;
    }

    .timeline-dot {
        width: 16px;
        height: 16px;
        border-width: 2px;
    }

    .historia-hero h2 {
        font-size: 2rem;
    }

    .historia-hero p {
        font-size: 1.0625rem;
    }

    .historia-stats {
        grid-template-columns: 1fr;
    }

    .historia-stat-card {
        padding: 35px 25px;
    }
}

@media (max-width: 575px) {
    .nosotros-hero {
        padding: 90px 0 50px;
    }

    .mv-card {
        padding: 35px 25px;
    }

    .historia-badge {
        padding: 12px 20px;
        font-size: 0.9375rem;
    }

    .historia-badge i {
        font-size: 20px;
    }

    .historia-hero {
        min-height: 400px;
        background-attachment: scroll;
    }

    .historia-hero h2 {
        font-size: 1.75rem;
    }

    .historia-timeline {
        padding: 70px 15px;
        gap: 30px;
    }

    .timeline-item {
        min-width: 200px;
    }

    .timeline-card {
        padding: 16px 18px;
    }

    .timeline-dot {
        width: 14px;
        height: 14px;
        border-width: 2px;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
    }

    .timeline-year {
        font-size: 1.25rem;
    }

    .timeline-title {
        font-size: 1rem;
    }

    .timeline-text {
        font-size: 0.875rem;
    }
}