/* Scroll nativo optimizado */
    html {
      scroll-behavior: smooth;
    }

    .button_slide {
      color: #FFF;
      border: 2px solid rgb(82, 49, 155);
      border-radius: 50px;
      padding: 10px 36px;
      text-align: center;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode';
      font-weight: bold;
      font-size: 16px;
      letter-spacing: 1px;
      cursor: pointer;
      box-shadow: inset 0 0 0 0 #6cde92;
      -webkit-transition: ease-out 0.4s;
      -moz-transition: ease-out 0.4s;
      transition: ease-out 0.4s;
    }

    .slide_inside:hover {
      box-shadow: inset 0 0 0 50px #6cde92;
    }

    .espere {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 9999;
      background: url('img/loading.gif') 50% 50% no-repeat rgb(241, 241, 241);
      opacity: .7;
    }

    /* Optimizaciones adicionales para navegación rápida */
    #navbar a {
      transition: color 0.2s ease;
    }

    /* Evitar layout shifts durante scroll */
    .section {
      scroll-margin-top: 80px;
    }

    /* Optimización de la sección Hero - REDUCIR ESPACIO */
    #hero.hero {
      padding: 60px 0 40px 0 !important;
      min-height: auto !important;
    }

    #hero .container {
      padding: 0 15px !important;
    }

    #hero .row {
      margin: 0 !important;
    }

    #hero h2 {
      margin-bottom: 20px !important;
      line-height: 1.2 !important;
    }

    #hero h3 {
      margin-bottom: 15px !important;
      line-height: 1.3 !important;
    }

    #hero p {
      margin-bottom: 0 !important;
      line-height: 1.5 !important;
    }

    /* Responsive para Hero en móviles */
    @media (max-width: 768px) {
      #hero.hero {
        padding: 40px 0 30px 0 !important;
      }

      #hero h2 {
        font-size: 2rem !important;
        margin-bottom: 15px !important;
      }

      #hero h3 {
        font-size: 1.4rem !important;
        margin-bottom: 12px !important;
      }

      #hero p {
        font-size: 0.95rem !important;
      }
    }

    @media (max-width: 480px) {
      #hero.hero {
        padding: 30px 0 25px 0 !important;
      }

      #hero h2 {
        font-size: 1.7rem !important;
        margin-bottom: 12px !important;
      }

      #hero h3 {
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
      }

      #hero p {
        font-size: 0.9rem !important;
      }
    }

    /* Estilos para la sección de ubicación - CORREGIDOS PARA MÓVILES */
    .location-section {
      position: relative;
      overflow: hidden;
      min-height: auto !important;
    }

    .location-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.25);
      z-index: 1;
    }

    .location-section .container {
      position: relative;
      z-index: 2;
    }

    /* Responsive para el mapa - MEJORADO */
    @media (max-width: 768px) {
      .location-section {
        padding: 30px 0 !important;
      }

      .location-section .section-header {
        margin-bottom: 20px !important;
      }

      .location-section .section-header h3 {
        font-size: 2rem !important;
        margin-bottom: 10px !important;
      }

      .location-section .section-header p {
        font-size: 0.95rem !important;
        padding: 6px 15px !important;
      }

      #google-map {
        height: 300px !important;
      }

      .location-section .map-container {
        padding: 12px !important;
      }

      .location-section .row {
        margin-top: 0 !important;
      }
    }

    @media (max-width: 480px) {
      .location-section {
        padding: 25px 0 !important;
      }

      .location-section .section-header h3 {
        font-size: 1.5rem !important;
      }

      .location-section .section-header p {
        font-size: 0.85rem !important;
        padding: 5px 12px !important;
      }

      #google-map {
        height: 250px !important;
      }

      .location-section .map-container {
        padding: 10px !important;
      }
    }

    /* Widget WhatsApp Flotante */
    .whatsapp-widget {
      position: fixed;
      bottom: 140px;
      right: 25px;
      z-index: 9998;
      font-family: 'Roboto', Arial, sans-serif;
    }

    /* Botón principal WhatsApp */
    .whatsapp-btn {
      background: linear-gradient(135deg, #25D366 0%, #20BA5A 100%);
      border-radius: 50px;
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      text-decoration: none;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      animation: pulseWhatsApp 2s infinite;
      position: relative;
      border: none;
    }

    .whatsapp-btn:hover {
      background: linear-gradient(135deg, #20BA5A 0%, #1DA851 100%);
      transform: scale(1.1);
      text-decoration: none;
      box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6);
    }

    .whatsapp-btn i {
      color: white;
      font-size: 28px;
      transition: transform 0.3s ease;
    }

    .whatsapp-btn:hover i {
      transform: scale(1.1);
    }

    /* Animación de pulso */
    @keyframes pulseWhatsApp {
      0% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.7);
      }

      70% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 10px rgba(37, 211, 102, 0);
      }

      100% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0);
      }
    }

    /* Mensaje lateral */
    .whatsapp-message {
      position: absolute;
      right: 75px;
      bottom: 0;
      background: white;
      color: #333;
      padding: 15px 20px;
      border-radius: 15px 15px 5px 15px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      min-width: 200px;
      max-width: 280px;
      opacity: 0;
      visibility: hidden;
      transform: translateX(20px) scale(0.9);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid #e0e0e0;
    }

    .whatsapp-message.show {
      opacity: 1;
      visibility: visible;
      transform: translateX(0) scale(1);
    }

    .whatsapp-message::after {
      content: '';
      position: absolute;
      right: -8px;
      bottom: 15px;
      width: 0;
      height: 0;
      border-left: 8px solid white;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
    }

    .whatsapp-message h6 {
      margin: 0 0 8px 0;
      font-size: 14px;
      font-weight: 600;
      color: #25D366;
    }

    .whatsapp-message p {
      margin: 0;
      font-size: 13px;
      line-height: 1.4;
      color: #555;
    }

    .whatsapp-close {
      position: absolute;
      top: 8px;
      right: 10px;
      background: none;
      border: none;
      font-size: 16px;
      color: #999;
      cursor: pointer;
      padding: 0;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.3s ease;
    }

    .whatsapp-close:hover {
      color: #666;
    }

    /* Modal de mensaje personalizado */
    .whatsapp-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      backdrop-filter: blur(4px);
    }

    .whatsapp-modal.show {
      opacity: 1;
      visibility: visible;
    }

    .whatsapp-modal-content {
      background: white;
      border-radius: 15px;
      padding: 20px;
      max-width: 400px;
      width: 90%;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      transform: translateY(30px) scale(0.9);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .whatsapp-modal.show .whatsapp-modal-content {
      transform: translateY(0) scale(1);
    }

    .whatsapp-modal-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      padding-bottom: 12px;
      border-bottom: 1px solid #e0e0e0;
    }

    .whatsapp-modal-header i {
      color: #25D366;
      font-size: 24px;
      margin-right: 12px;
    }

    .whatsapp-modal-header h4 {
      margin: 0;
      color: #333;
      font-size: 18px;
      font-weight: 600;
    }

    .whatsapp-modal-close {
      margin-left: auto;
      background: none;
      border: none;
      font-size: 20px;
      color: #999;
      cursor: pointer;
      padding: 5px;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.3s ease;
    }

    .whatsapp-modal-close:hover {
      background: #f5f5f5;
      color: #666;
    }

    .whatsapp-form-group {
      margin-bottom: 15px;
    }

    .whatsapp-form-group label {
      display: block;
      margin-bottom: 8px;
      color: #333;
      font-weight: 500;
      font-size: 14px;
    }

    .whatsapp-form-group input,
    .whatsapp-form-group textarea {
      width: 100%;
      padding: 10px 12px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-size: 14px;
      transition: border-color 0.3s ease;
      font-family: 'Roboto', Arial, sans-serif;
      resize: vertical;
      box-sizing: border-box;
    }

    .whatsapp-form-group input:focus,
    .whatsapp-form-group textarea:focus {
      outline: none;
      border-color: #25D366;
      box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1);
    }

    .whatsapp-form-group textarea {
      min-height: 80px;
      max-height: 120px;
    }

    .whatsapp-char-count {
      font-size: 12px;
      color: #666;
      text-align: right;
      margin-top: 5px;
    }

    .whatsapp-quick-messages {
      margin-bottom: 12px;
    }

    .whatsapp-quick-messages p {
      margin: 0 0 10px 0;
      font-size: 13px;
      color: #666;
    }

    .whatsapp-quick-btn {
      background: #f8f9fa;
      border: 1px solid #e0e0e0;
      border-radius: 20px;
      padding: 6px 12px;
      font-size: 12px;
      color: #666;
      cursor: pointer;
      margin: 3px;
      transition: all 0.3s ease;
      display: inline-block;
    }

    .whatsapp-quick-btn:hover {
      background: #25D366;
      color: white;
      border-color: #25D366;
    }

    .whatsapp-modal-buttons {
      display: flex;
      gap: 12px;
      margin-top: 15px;
      padding-top: 12px;
      border-top: 1px solid #e0e0e0;
    }

    .whatsapp-btn-send,
    .whatsapp-btn-cancel {
      flex: 1;
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .whatsapp-btn-send {
      background: linear-gradient(135deg, #25D366 0%, #20BA5A 100%);
      color: white;
    }

    .whatsapp-btn-send:hover {
      background: linear-gradient(135deg, #20BA5A 0%, #1DA851 100%);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    }

    .whatsapp-btn-send:disabled {
      background: #ccc;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .whatsapp-btn-cancel {
      background: #f8f9fa;
      color: #666;
      border: 1px solid #e0e0e0;
    }

    .whatsapp-btn-cancel:hover {
      background: #e9ecef;
      color: #495057;
    }

    /* Responsive para móviles  ---------------------------*/
    @media (max-width: 768px) {
      .whatsapp-widget {
        bottom: 140px;
        right: 20px;
      }

      .whatsapp-btn {
        width: 55px;
        height: 55px;
      }

      .whatsapp-btn i {
        font-size: 24px;
      }

      .whatsapp-message {
        right: 70px;
        min-width: 180px;
        max-width: 220px;
        padding: 12px 16px;
      }

      .whatsapp-message h6 {
        font-size: 13px;
      }

      .whatsapp-message p {
        font-size: 12px;
      }

      .whatsapp-modal-content {
        margin: 15px;
        padding: 15px;
        max-height: 90vh;
      }

      .whatsapp-modal-header {
        margin-bottom: 12px;
        padding-bottom: 10px;
      }

      .whatsapp-form-group {
        margin-bottom: 12px;
      }

      .whatsapp-form-group textarea {
        min-height: 70px;
        max-height: 100px;
      }

      .whatsapp-modal-buttons {
        margin-top: 12px;
        padding-top: 10px;
      }
    }

    /* Tamaño y posicion en Moviles ---------------------- */
    @media (max-width: 480px) {
      .whatsapp-widget {
        bottom: 140px;
        right: 15px;
      }

      .whatsapp-btn {
        width: 50px;
        height: 50px;
      }

      .whatsapp-btn i {
        font-size: 22px;
      }

      .whatsapp-message {
        right: 65px;
        min-width: 160px;
        max-width: 200px;
        padding: 10px 14px;
      }

      .whatsapp-modal-content {
        padding: 12px;
        margin: 10px;
        max-height: 95vh;
      }

      .whatsapp-modal-header {
        margin-bottom: 10px;
        padding-bottom: 8px;
      }

      .whatsapp-modal-header h4 {
        font-size: 16px;
      }

      .whatsapp-form-group {
        margin-bottom: 10px;
      }

      .whatsapp-form-group input,
      .whatsapp-form-group textarea {
        padding: 8px 10px;
      }

      .whatsapp-form-group textarea {
        min-height: 60px;
        max-height: 80px;
      }

      .whatsapp-quick-messages {
        margin-bottom: 10px;
      }

      .whatsapp-modal-buttons {
        margin-top: 10px;
        padding-top: 8px;
      }
    }

    /* Ocultar en pantallas muy pequeñas horizontales  ----------------------------------*/
    @media (max-height: 500px) and (orientation: landscape) {
      .whatsapp-message {
        display: none;
      }
    }