/* =================================================================== */
    /* == ESTILOS ORIGINALES PARA MÉTRICAS (LOS QUE TE GUSTABAN) == */
    /* =================================================================== */
    .metric-highlight-card {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 25px 20px;
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: transform 0.3s ease;
      height: 100%;
    }

    .metric-highlight-card:hover {
      transform: translateY(-5px);
      background: rgba(255, 255, 255, 0.15);
    }

    .metric-highlight-value {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 10px;
      color: white;
    }

    .metric-highlight-label {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.8);
    }

    .metric-highlight-icon {
      font-size: 2rem;
      margin-bottom: 15px;
      color: #68a4c4;
    }

    /* =================================================================== */
    /* == VOLQUI: ESTILOS RESPONSIVOS PARA SECCIÓN CARACTERÍSTICAS E INTEGRACIONES == */
    /* =================================================================== */

    /* ESTILOS PARA SECCIÓN CARACTERÍSTICAS (FEATURES) */
    .features .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .feature-item {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 25px 20px;
      text-align: center;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      background: #fff;
      margin-bottom: 20px;
    }

    .feature-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    }

    .feature-item i {
      font-size: 36px;
      margin-bottom: 15px;
    }

    .feature-item h3 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #333;
    }

    .feature-item p {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
    }

    /* ESTILOS PARA SECCIÓN INTEGRACIONES */
    .integrations .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .integration-badge {
      display: inline-flex;
      align-items: center;
      padding: 10px 18px;
      background-color: #f8f9fa;
      border-radius: 50px;
      font-size: 14px;
      font-weight: 500;
      color: #333;
      border: 1px solid #e9ecef;
      transition: all 0.3s ease;
    }

    .integration-badge:hover {
      background-color: #e9ecef;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .integration-badge i {
      margin-right: 8px;
      font-size: 16px;
    }

    /* =================================================================== */
    /* == VOLQUI: ESTILOS RESPONSIVOS PARA SECCIÓN MÉTRICAS INTERACTIVAS == */
    /* =================================================================== */

    /* Contenedor principal de métricas destacadas */
    .metrics .row.mb-5 {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    /* =================================================================== */
    /* == ESTILOS CORREGIDOS PARA EL CARRUSEL DE GRÁFICOS == */
    /* =================================================================== */

    .metrics-carousel {
      margin-top: 40px;
      position: relative;
    }

    .metric-title {
      text-align: center;
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #333;
    }

    .metric-description {
      text-align: center;
      color: #666;
      margin-bottom: 30px;
      font-size: 16px;
    }

    .metric-chart-container {
      height: 400px;
      position: relative;
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }

    /* CORRECCIÓN DE INDICADORES DEL CARRUSEL */
    .carousel-indicators-metrics {
      position: absolute;
      bottom: -50px;
      left: 0;
      right: 0;
      z-index: 15;
      display: flex;
      justify-content: center;
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .carousel-indicators-metrics button {
      box-sizing: content-box;
      flex: 0 1 auto;
      width: 12px;
      height: 12px;
      margin: 0 5px;
      text-indent: -999px;
      cursor: pointer;
      background-color: #ddd;
      background-clip: padding-box;
      border: 0;
      border-radius: 50%;
      opacity: 0.5;
      transition: opacity 0.6s ease;
    }

    .carousel-indicators-metrics button.active {
      opacity: 1;
      background-color: #667eea;
    }

    /* CORRECCIÓN DE FLECHAS DE NAVEGACIÓN */
    .metrics-carousel .carousel-control-prev,
    .metrics-carousel .carousel-control-next {
      position: absolute;
      top: 50%;
      width: 50px;
      height: 50px;
      background-color: rgba(102, 126, 234, 0.8);
      border-radius: 50%;
      transform: translateY(-50%);
      opacity: 0.7;
      transition: all 0.3s ease;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .metrics-carousel .carousel-control-prev {
      left: -25px;
    }

    .metrics-carousel .carousel-control-next {
      right: -25px;
    }

    .metrics-carousel .carousel-control-prev:hover,
    .metrics-carousel .carousel-control-next:hover {
      opacity: 1;
      background-color: rgba(102, 126, 234, 1);
    }

    .metrics-carousel .carousel-control-prev-icon,
    .metrics-carousel .carousel-control-next-icon {
      width: 20px;
      height: 20px;
      background-size: 20px 20px;
      background-color: transparent;
    }

    .metrics-carousel .carousel-control-prev-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    }

    .metrics-carousel .carousel-control-next-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }

    /* =================================================================== */
    /* == MEDIA QUERIES PARA TODAS LAS SECCIONES == */
    /* =================================================================== */

    /* Para pantallas pequeñas (móviles) */
    @media (max-width: 767.98px) {

      /* MÉTRICAS: Mostrar 2 tarjetas por fila en móviles */
      .metrics .row.mb-5 {
        display: flex !important;
        flex-wrap: nowrap !important;
        /* IMPORTANTE: Evita que bajen a la siguiente línea */
        justify-content: space-between !important;
        /* Distribuye el espacio */
        padding: 0 5px !important;
        /* Margen mínimo a los costados de la pantalla */
        gap: 0 !important;
        /* Sin huecos extraños */
        margin-bottom: 20px !important;
      }

      /* 2. Las columnas: Forzar ancho exacto del 25% (100% / 4) */
      .metrics .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        padding: 0 2px !important;
        /* Espacio muy pequeño entre tarjetas */
        margin: 0 !important;
      }

      /* 3. La tarjeta: Reducir acolchado para ganar espacio */
      .metric-highlight-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        min-height: 100px !important;
        /* Altura más pequeña */
        padding: 10px 2px !important;
        /* Padding interno mínimo */
        border-radius: 8px !important;
      }

      /* 4. Ajuste de textos e iconos (Miniaturización para que quepan) */

      /* Icono */
      .metric-highlight-icon {
        font-size: 1.2rem !important;
        /* Icono pequeño */
        margin-bottom: 4px !important;
        width: 100%;
        text-align: center;
      }

      /* Valor (El número o $8.5M) */
      .metric-highlight-value {
        font-size: 0.9rem !important;
        /* Número pequeño para que no se salga */
        margin-bottom: 2px !important;
        word-break: break-all;
        /* Romper si es muy largo */
      }

      /* Etiqueta (El texto de abajo) */
      .metric-highlight-label {
        font-size: 0.6rem !important;
        /* Letra muy pequeña necesaria para 4 columnas */
        line-height: 1 !important;
        white-space: normal !important;
        /* Permitir que el texto baje de línea */
        word-wrap: break-word !important;
        /* Romper palabras largas si es necesario */
      }

      /* --- Mantener correcciones de otras secciones --- */
      .features .col-12 {
        flex: 0 0 50%;
        max-width: 50%;
      }

      .integrations .col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 10px;
      }

      .metric-chart-container {
        height: 300px;
        padding: 10px;
      }

      .carousel-indicators-metrics {
        bottom: -40px;
      }
    }

    .integration-badge {
      width: 100%;
      justify-content: center;
      padding: 12px 20px;
    }

    /* CARRUSEL: Ajustes para móviles */
    .metric-chart-container {
      height: 300px;
      padding: 15px;
    }

    .metric-title {
      font-size: 20px;
    }

    .metric-description {
      font-size: 14px;
    }

    .metrics-carousel .carousel-control-prev,
    .metrics-carousel .carousel-control-next {
      width: 40px;
      height: 40px;
    }

    .metrics-carousel .carousel-control-prev {
      left: -15px;
    }

    .metrics-carousel .carousel-control-next {
      right: -15px;
    }

    .carousel-indicators-metrics {
      bottom: -40px;
    }

    .carousel-indicators-metrics button {
      width: 10px;
      height: 10px;
    }


    /* Para pantallas medianas (tablets) */
    @media (min-width: 768px) and (max-width: 991.98px) {

      /* CARACTERÍSTICAS: Mostrar 2 tarjetas por fila en tablets */
      .features .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
      }

      /* INTEGRACIONES: Mostrar 2 badges por fila en tablets */
      .integrations .col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
      }

      /* MÉTRICAS: Mostrar 4 tarjetas en una fila en tablets */
      .metrics .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
      }
    }

    /* Para pantallas grandes (PC) */
    @media (min-width: 992px) {

      /* CARACTERÍSTICAS: Mostrar 3 tarjetas por fila en PC */
      .features .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
      }

      /* INTEGRACIONES: Mostrar 4 badges por fila en PC */
      .integrations .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
      }

      /* MÉTRICAS: Mostrar 4 tarjetas en una fila en PC */
      .metrics .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
      }
    }

    /* =================================================================== */
    /* == ESTILOS MEJORADOS PARA BOTONES CTA == */
    /* =================================================================== */

    .cta .cta-btn {
      display: inline-block;
      padding: 14px 35px;
      border-radius: 50px;
      background: #68A4C4;
      color: white;
      font-weight: 600;
      font-size: 16px;
      text-decoration: none;
      transition: all 0.3s ease;
      border: 2px solid #68A4C4;
      text-align: center;
      margin: 5px 10px;
      box-shadow: 0 4px 15px rgba(104, 164, 196, 0.3);
    }

    .cta .cta-btn:hover {
      background: transparent;
      color: #68A4C4;
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(104, 164, 196, 0.4);
      text-decoration: none;
    }

    .cta .cta-btn:first-child {
      background: #68A4C4;
      border-color: #68A4C4;
      color: white;
    }

    .cta .cta-btn:first-child:hover {
      background: transparent;
      color: #68A4C4;
    }

    .cta .cta-btn:last-child {
      background: #1e4356;
      border-color: #1e4356;
      color: white;
    }

    .cta .cta-btn:last-child:hover {
      background: transparent;
      color: #20b0f8;
      border-color: #1e4356;
    }

    /* =================================================================== */
    /* == RESPONSIVE PARA BOTONES CTA == */
    /* =================================================================== */

    @media (max-width: 768px) {
      .cta .cta-btn {
        display: block;
        width: 100%;
        max-width: 280px;
        margin: 10px auto;
        padding: 12px 25px;
        font-size: 15px;
      }

      .cta .cta-btn.ms-3 {
        margin-left: auto !important;
      }
    }

    @media (min-width: 769px) and (max-width: 991px) {
      .cta .cta-btn {
        padding: 12px 30px;
        font-size: 15px;
        margin: 5px 8px;
      }
    }

    /* ========================================================= */
    /* == CORRECCIÓN PRECIOS MÓVIL (Espaciado y legibilidad) == */
    /* ========================================================= */
    /* ========================================================= */
    /* == CORRECCIÓN PRECIOS MÓVIL (Título arriba, texto abajo) == */
    /* ========================================================= */
    @media (max-width: 767.98px) {

      /* 1. Contenedor de la tarjeta */
      .pricing-item.featured {
        padding: 30px 20px !important;
        margin: 0 0 30px 0 !important;
      }

      /* 2. Configuración del Ítem de lista (El contenedor) */
      .pricing-item.featured ul li {
        display: block !important;
        /* Usamos bloque en lugar de flex para permitir el salto */
        position: relative !important;
        /* Para poder posicionar el icono */
        padding-left: 35px !important;
        /* Dejamos espacio a la izquierda para el icono */
        margin-bottom: 20px !important;
        /* Separación entre puntos */
        padding-bottom: 15px !important;
        border-bottom: 1px solid #f0f0f0;
        /* Línea separadora sutil */
        text-align: left !important;
      }

      /* 3. El Icono (Check) */
      .pricing-item.featured ul li i {
        position: absolute !important;
        /* Lo fijamos a la izquierda */
        left: 0 !important;
        top: 2px !important;
        /* Alineado con el título */
        font-size: 22px !important;
        color: #28a745;
        margin-right: 0 !important;
      }

      /* 4. El Título (Lo que está en negrita) */
      .pricing-item.featured ul li strong {
        display: block !important;
        /* CLAVE: Esto fuerza el salto de línea */
        width: 100% !important;
        font-size: 1.1rem !important;
        /* Un poco más grande y legible */
        color: #1e4356;
        /* Color azul oscuro para destacar */
        margin-bottom: 6px !important;
        /* Espacio antes de la descripción */
        line-height: 1.2 !important;
      }

      /* 5. La descripción (El texto normal) */
      /* Al ser texto suelto, heredará el padding-left del li y caerá debajo del strong */
      .pricing-item.featured ul li {
        font-size: 0.95rem !important;
        color: #666;
        line-height: 1.5 !important;
      }

      /* 6. Precio gigante */
      .pricing-item.featured h4 {
        font-size: 2.5rem !important;
        margin-bottom: 15px !important;
      }

      /* Quitar borde del último elemento */
      .pricing-item.featured ul li:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
      }
    }

    .pricing-item.featured h4 span {
      font-size: 16px;
    }

    /* Lista de características */
    .pricing-item.featured ul {
      padding-left: 0;
      margin-bottom: 25px;
    }

    .pricing-item.featured ul li {
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 12px;
      padding-left: 30px;
      text-align: left;
    }

    .pricing-item.featured ul li i {
      left: 0;
      font-size: 16px;
      width: 22px;
      height: 22px;
      line-height: 22px;
    }

    /* Botón */
    .pricing-item.featured .buy-btn {
      display: block;
      width: 100%;
      padding: 14px 20px;
      font-size: 16px;
      margin-top: 10px;
    }

    /* Sección de información de inversión */
    .pricing-info {
      padding: 20px 15px;
      text-align: center;
    }

    .pricing-info h3 {
      font-size: 20px;
      margin-bottom: 15px;
    }

    .pricing-info p {
      font-size: 15px;
      line-height: 1.5;
      margin-bottom: 15px;
    }

    .pricing-info .fs-5 {
      font-size: 16px !important;
    }

    /* Espaciado entre columnas cuando se apilan */
    #pricing .col-lg-7,
    #pricing .col-lg-5 {
      margin-bottom: 25px;
    }


    /* Ajustes adicionales para pantallas muy pequeñas */
    @media (max-width: 375px) {
      .pricing-item.featured {
        padding: 20px 15px;
      }

      .pricing-item.featured h4 {
        font-size: 24px;
      }

      .pricing-item.featured ul li {
        font-size: 13px;
        margin-bottom: 10px;
      }
    }

    /* Estilo para el botón al pasar el mouse (HOVER) */
    .buy-btn:hover {
      background-color: #1e4356 !important;
      /* Fondo Azul Oscuro */
      color: #ffffff !important;
      /* Texto Blanco */
      border-color: #1e4356 !important;
      /* Borde del mismo color */
      transform: scale(1.05);
      /* Un pequeño efecto de crecimiento (opcional) */
    }

    /* =================================================================== */
    /* == ESTILO UNIFICADO PRECIOS (PC Y MÓVIL IGUALES) == */
    /* == Título arriba, descripción abajo, icono a la izquierda == */
    /* =================================================================== */

    /* 1. Contenedor de la lista */
    .pricing-item.featured ul {
      padding: 0;
      margin: 20px 0;
      list-style: none;
    }

    /* 2. El ítem (La fila completa) */
    .pricing-item.featured ul li {
      display: block !important;
      /* Bloque para permitir saltos de línea */
      position: relative !important;
      /* Referencia para el icono absoluto */
      padding-left: 40px !important;
      /* Espacio a la izquierda para el icono */
      margin-bottom: 20px !important;
      /* Separación entre puntos */
      padding-bottom: 15px !important;
      /* Aire abajo */
      border-bottom: 1px solid #f0f0f0;
      /* Línea divisoria sutil */
      text-align: left !important;
      /* Todo alineado a la izquierda */
    }

    /* Quitar la línea del último ítem */
    .pricing-item.featured ul li:last-child {
      border-bottom: none !important;
      margin-bottom: 0 !important;
    }

    /* 3. El Icono (Check verde) */
    .pricing-item.featured ul li i {
      position: absolute !important;
      /* Fijado a la izquierda */
      left: 0 !important;
      top: 2px !important;
      /* Alineado con la primera línea */
      font-size: 24px !important;
      /* Tamaño grande y visible */
      color: #28a745 !important;
      /* Verde éxito */
      width: auto !important;
      height: auto !important;
      line-height: 1 !important;
    }

    /* 4. El Título (Texto en negrita) */
    .pricing-item.featured ul li strong {
      display: block !important;
      /* CLAVE: Fuerza el salto de línea */
      font-size: 1.15rem !important;
      /* Tamaño de letra destacado */
      font-weight: 700 !important;
      color: #1e4356 !important;
      /* Azul de tu marca */
      margin-bottom: 5px !important;
      /* Espacio antes de la descripción */
    }

    /* 5. La descripción (Texto normal) */
    /* Al ser el texto que sobra en el <li>, caerá automáticamente abajo */
    .pricing-item.featured ul li {
      font-size: 1rem !important;
      /* Tamaño de lectura cómodo */
      color: #555 !important;
      /* Gris oscuro para buen contraste */
      line-height: 1.5 !important;
      /* Altura de línea para legibilidad */
    }

    /* Ajuste extra para PC: dar un poco más de margen a la tarjeta */
    @media (min-width: 992px) {
      .pricing-item.featured {
        padding: 40px !important;
      }
    }
  

          /* =================================================================== */
          /* == ESTILOS PARA BOTÓN DE SOLICITAR DEMO EN SECCIÓN MÉTRICAS == */
          /* =================================================================== */

          .metrics .cta-btn {
            display: inline-block;
            padding: 14px 35px;
            border-radius: 50px;
            background: #1e4356;
            color: white;
            font-weight: 600;
            font-size: 16px;
            text-decoration: none;
            transition: all 0.3s ease;
            border: 2px solid #1e4356;
            text-align: center;
            box-shadow: 0 4px 15px rgba(30, 67, 86, 0.3);
            margin-top: 15px;
          }

          .metrics .cta-btn:hover {
            background: transparent;
            color: #3ab0eb;
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(30, 67, 86, 0.4);
            text-decoration: none;
          }

          /* =================================================================== */
          /* == RESPONSIVE PARA BOTÓN EN MÉTRICAS == */
          /* =================================================================== */

          @media (max-width: 768px) {
            .metrics .cta-btn {
              display: block;
              width: 100%;
              max-width: 280px;
              margin: 15px auto 0 auto;
              padding: 12px 25px;
              font-size: 15px;
            }

            .metrics .cta-btn.ms-3 {
              margin-left: auto !important;
            }

          }
        

            /* =================================================================== */
            /* == VOLQUI: CORRECCIÓN PRECIOS Y SIGNO $ == */
            /* =================================================================== */

            /* Arreglar el signo pesos */
            .pricing-item.featured h4 {
              position: relative;
              display: inline-block;
            }

            .pricing-item.featured h4 sup {
              top: -15px;
              /* Sube un poco el signo */
              font-size: 24px;
              /* Tamaño legible */
              margin-right: 2px;
              /* Espacio pequeño con el número */
              vertical-align: baseline;
            }

            /* Color de textos oscuros (lo que ya tenías) */
            .pricing-item.featured {
              color: #444;
            }

            .pricing-item.featured h3,
            .pricing-item.featured h4,
            .pricing-item.featured h4 span {
              color: #333;
            }

            .pricing-item.featured ul li {
              color: #444;
            }


            /* =================================================================== */
            /* == VOLQUI: AJUSTES RESPONSIVE ESPECÍFICOS PRECIOS == */
            /* =================================================================== */

            @media (max-width: 991px) {

              /* En celular, separamos la información del precio */
              .pricing-info {
                text-align: center;
                /* Centra el texto "Una inversión..." en celular */
                margin-bottom: 40px;
                /* Espacio grande abajo para que no se pegue a la tarjeta */
                padding: 0 15px;
              }

              /* Ajuste para que la tarjeta de precio no quede pegada a los bordes */
              .pricing-item.featured {
                margin-top: 10px;
              }
            }
          

      /* =================================================================== */
      /* == MOVER BOTÓN SCROLL TO TOP AL LADO IZQUIERDO == */
      /* =================================================================== */

      #scroll-top {
        right: auto;
        left: 20px;
        /* Mantener las propiedades existentes pero cambiar la posición */
      }

      /* Asegurar que mantenga su comportamiento responsive */
      @media (max-width: 768px) {
        #scroll-top {
          left: 15px;
          bottom: 80px;
          /* Para que no interfiera con la burbuja de WhatsApp */
        }
      }

      /* Si el botón no tiene estilos base, aquí está la versión completa: */
      .scroll-top {
        position: fixed;
        visibility: hidden;
        opacity: 0;
        right: 15px;
        bottom: 15px;
        z-index: 99999;
        background: #68A4C4;
        width: 44px;
        height: 44px;
        border-radius: 50px;
        transition: all 0.4s;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }

      .scroll-top.active {
        visibility: visible;
        opacity: 1;
      }

      .scroll-top:hover {
        background: #5a93b0;
        color: #fff;
      }

      .scroll-top i {
        font-size: 24px;
        line-height: 0;
      }

      /* Versión específica para mover a la izquierda */
      #scroll-top {
        right: auto;
        left: 20px;
        bottom: 20px;
      }

      @media (max-width: 768px) {
        #scroll-top {
          left: 15px;
          bottom: 80px;
          /* Para separarlo de la burbuja de WhatsApp */
        }
      }

      /* Estilos para la burbuja de WhatsApp */
      .whatsapp-float {
        position: fixed;
        width: 60px;
        height: 60px;
        bottom: 25px;
        right: 25px;
        background-color: #25d366;
        color: #FFF;
        border-radius: 50px;
        text-align: center;
        font-size: 30px;
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        animation: pulse-whatsapp 2s infinite;
        text-decoration: none;
      }

      .whatsapp-float:hover {
        background-color: #128C7E;
        transform: scale(1.1);
        box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
        text-decoration: none;
        color: #FFF;
      }

      .whatsapp-float i {
        margin: 0;
      }

      /* Animación de pulso */
      @keyframes pulse-whatsapp {
        0% {
          box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
        }

        70% {
          box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
        }

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

      /* Tooltip opcional (se muestra al hacer hover) */
      .whatsapp-float::after {
        content: "¡Chateá con nosotros!";
        position: absolute;
        right: 70px;
        top: 50%;
        transform: translateY(-50%);
        background: #333;
        color: white;
        padding: 8px 12px;
        border-radius: 5px;
        font-size: 14px;
        white-space: nowrap;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
      }

      .whatsapp-float:hover::after {
        opacity: 1;
      }

      /* Responsive */
      @media (max-width: 768px) {
        .whatsapp-float {
          width: 50px;
          height: 50px;
          bottom: 20px;
          right: 20px;
          font-size: 25px;
        }

        .whatsapp-float::after {
          font-size: 12px;
          padding: 6px 10px;
          right: 60px;
        }
      }
    

              /* =================================================================== */
              /* == VOLQUI: MEJORA DE ESTILOS PARA LA SECCIÓN DE CONTACTO == */
              /* =================================================================== */
              /* =================================================================== */
              /* == VOLQUI: MEJORA DE ESTILOS Y CENTRADO PARA CONTACTO == */
              /* =================================================================== */

              .contact .info-item {
                width: 100%;
                /* Estas 3 líneas son la clave del centrado */
                display: flex;
                align-items: center;
                /* Alinea verticalmente el icono y el texto */
                justify-content: center;
                /* Centra el grupo (icono + texto) horizontalmente */
                margin-bottom: 25px;
                /* Un poco más de espacio entre los ítems */
              }

              .contact .info-item i {
                font-size: 20px;
                color: var(--accent-color);
                background: color-mix(in srgb, var(--accent-color), transparent 90%);
                width: 44px;
                height: 44px;
                min-width: 44px;
                /* Evita que el icono se encoja */
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50px;
                transition: all 0.3s ease-in-out;
                margin-right: 15px;
                /* Espacio entre el icono y el texto */
              }

              /* Apuntamos al div que contiene el h3 y el p */
              .contact .info-item>div {
                text-align: left;
                /* Mantenemos el texto alineado a la izquierda para que se lea bien */
              }

              .contact .info-item h3 {
                font-size: 20px;
                padding: 0;
                /* Eliminamos el padding antiguo */
                font-weight: 600;
                margin-bottom: 5px;
                color: var(--heading-color);
              }

              .contact .info-item p {
                padding: 0;
                /* Eliminamos el padding antiguo */
                margin-bottom: 0;
                /* Ajustamos el margen */
                font-size: 14px;
                color: color-mix(in srgb, var(--heading-color), transparent 30%);
              }

              .contact .info-item:hover i {
                background: var(--accent-color);
                color: var(--contrast-color);
              }
            

    .ios-prompt {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #fdfdfd;
      padding: 20px;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
      z-index: 99999;
      border-top: 1px solid #e0e0e0;
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      animation: slideUp 0.5s ease-out;
    }

    .ios-prompt-container {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      max-width: 600px;
      margin: 0 auto;
    }

    .ios-prompt-text {
      font-size: 14px;
      color: #333;
      line-height: 1.4;
      flex: 1;
      margin-right: 15px;
    }

    .ios-prompt-text strong {
      color: #1e4356;
      /* Tu color de marca */
      font-weight: 600;
    }

    .ios-icon-share {
      display: inline-block;
      vertical-align: middle;
      margin: 0 3px;
      color: #007aff;
      /* Azul de Apple */
      font-size: 20px;
    }

    .ios-icon-add {
      display: inline-block;
      vertical-align: middle;
      margin: 0 3px;
      font-size: 18px;
    }

    .ios-prompt-close {
      background: none;
      border: none;
      font-size: 24px;
      color: #999;
      cursor: pointer;
      padding: 0;
      line-height: 1;
    }

    @keyframes slideUp {
      from {
        transform: translateY(100%);
      }

      to {
        transform: translateY(0);
      }
    }