.responsive-img {
    width: 100%; /* Se ajusta al 100% del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}


.full-width {
    width: 100%; /* Ocupar todo el ancho */
    overflow: hidden; /* Evitar desbordamientos */
}

.full-width img {
    width: 100%; /* Hacer que la imagen ocupe todo el ancho del contenedor */
    height: auto; /* Mantener la proporción de la imagen */
}

.cards-container {
    display: flex; /* Usa flexbox para alinear las cartas horizontalmente */
    overflow-x: auto; /* Permite desplazamiento horizontal */
    padding: 10px; /* Espacio interno */
    gap: 10px; /* Espacio entre cartas */
}

.pic-page {
    width: 560px; 
    height: 340px; 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
  }

  .pic-page:hover {
    transform: scale(1.05); /* Aumenta el tamaño un poco */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    
  }

  .pic-text {
    width: 720px; 
    height: 300px; 
  }

  .pic-text:hover {
    transform: scale(1.05); /* Aumenta el tamaño un poco */
  }

  .pic-text-2 {
    width: 400px; 
    height: 340px; 
  }

  .pic-text-2:hover {
    transform: scale(1.05); /* Aumenta el tamaño un poco */
  }

  .responsive-img {
    width: 100%; /* Se ajusta al 100% del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

.modern-title-nav {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 2.4rem; /* Tamaño de fuente grande */
    font-weight: 600; /* Peso de fuente para un toque moderno */
    color: #1d1d1a; /* Color de texto oscuro para buen contraste */
    text-align: center; /* Centrar el título */
    margin-top: 1rem;
    margin-bottom: 1rem; /* Espacio debajo del título */
    border-bottom: 1px solid #0078D4; /* Línea inferior para destacar */
    padding-bottom: 0.5rem; /* Espacio entre el texto y la línea */
  }
  .modern-title-nav-meta h1{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 50px; /* Tamaño de fuente grande */
    font-weight: 600; /* Peso de fuente para un toque moderno */
    color: #040721; /* Color de texto oscuro para buen contraste */
    text-align: center; /* Centrar el título */
    margin-top: 1rem;
    padding-bottom: 0.5rem; /* Espacio entre el texto y la línea */
  }
  .card-custom {
    background: rgba(255, 252, 252, 0.994);
    border-radius: 30px;

}

/* Estilo de la tarjeta al pasar el mouse */
.card-custom:hover {
    box-shadow: 0 8px 16px rgba(223, 52, 52, 0.2);
    background: transparent;
}

.card-custom-premium {
    background: rgba(255, 252, 252, 0.994);
    border: 3px solid rgb(233, 163, 163);
    border-radius: 30px;
    padding-left: 20px;
    padding-right: 20px;
    transition: transform 0.3s ease; /* Suaviza la transición */
}

.card-custom-premium:hover {
    box-shadow: 0 8px 16px rgba(223, 52, 52, 0.2);
    background: rgb(255, 252, 252);
    transform: translateY(-10px); /* Ajusta el valor para moverla más o menos */
}

.card-custom, .card-custom-premium {
    max-width: 400px; /* Ancho mínimo de cada carta */
    flex: 0 0 auto; /* Previene que las cartas se reduzcan */
    /* Agrega aquí más estilos personalizados para tus cartas */
}

.card-header-custom {
    background-color: transparent;
    color: #fff;
    text-align: left;
    padding: 2rem;
    border: none;
    margin-bottom: -3rem; /* Ajusta este margen según sea necesario */
}

.pricing {
    font-size: 2.6rem; /* Tamaño de fuente grande para el monto */
    font-weight: bold;
    color: #2e2828d3;
    text-align: left;
    margin: 1rem 0;
}

.pricing .amount {
    font-size: 2.6rem; /* Asegúrate de que el monto mantenga el tamaño de fuente grande */
    font-weight: bold;
}

.pricing .period {
    font-weight: lighter;
    font-size: 1.5rem; /* Tamaño de fuente más pequeño para la unidad de tiempo */
    color: #292626; /* Puedes ajustar el color si es necesario */
}

.features {
    font-size: 1.1rem;
    line-height: 1.6;
    list-style-type: disc; /* Usa 'disc' para viñetas redondas */
    padding-left: 20px;
}

.parrafo {
    font-size: 1.2rem;
    line-height: 1.6;
    list-style-type: disc; 
    padding-left: 20px;
    text-align: left;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
}

.features li {
    margin-bottom: 0.5rem;
    text-align: left;
    font-weight: 400;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.toggle-details {
    background: none; /* Sin fondo para que solo se vea el texto */
    border: none; /* Sin borde */
    color: #007bff; /* Color del texto */
    font-size: 1rem; /* Tamaño del texto */
    text-decoration: underline; /* Subrayado */
    text-underline-offset: 3px; /* Opcional: espacio entre el texto y la línea */
    padding: 0; /* Elimina el relleno predeterminado */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
}

.btn-comprar {
    background-color: #007aff; /* Color azul similar al de Apple */
    color: white; /* Texto en blanco */
    border: none; /* Sin borde */
    border-radius: 25px; /* Esquinas redondeadas */
    padding: 10px 20px; /* Espaciado interno */
    font-size: 16px; /* Tamaño de fuente */
    font-weight: bold; /* Negrita */
    text-transform: uppercase; /* Texto en mayúsculas */
    cursor: pointer; /* Cambia el cursor al pasar el ratón */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Suaviza la transición */
}

.btn-comprar:hover {
    background-color: #005bb5; /* Color más oscuro al hacer hover */
    transform: scale(1.05); /* Aumenta el tamaño un poco */
}

.btn-comprar:focus {
    outline: none; /* Sin contorno al hacer clic */
}

.btn-factura {
    background-color: #aa6e1f; /* Color azul similar al de Apple */
    color: white; /* Texto en blanco */
    border: none; /* Sin borde */
    border-radius: 25px; /* Esquinas redondeadas */
    padding: 10px 20px; /* Espaciado interno */
    font-size: 12px; /* Tamaño de fuente */
    font-weight: bold; /* Negrita */
    cursor: pointer; /* Cambia el cursor al pasar el ratón */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Suaviza la transición */
}

.btn-factura:hover {
    background-color: #79470f; /* Color más oscuro al hacer hover */
    transform: scale(1.05); /* Aumenta el tamaño un poco */
}

.btn-factura:focus {
    outline: none; /* Sin contorno al hacer clic */
}

.h4-basico {
    color: #ca6c14;
    font-size: 30px;
    font-weight: bold;
}

.h4-premium {
    color: #c2331a;
    font-size: 30px;
    font-weight: bold;
}

.h4-tienda {
    color: #151a1f;
    font-size: 30px;
    font-weight: bold;
}

.additional-features {
    max-height: 0; /* Oculta inicialmente las características adicionales */
    opacity: 0; /* Inicialmente invisibles */
    overflow: hidden; /* Evita que se vea el contenido desbordante */
    transition: max-height 0.3s ease, opacity 0.3s ease; /* Transición suave */
    display: none;
}

.card-body-custom.expanded .additional-features {
    max-height: 500px; /* Valor alto para permitir el despliegue */
    opacity: 1; /* Hace visibles las características */
    display: block; /* Asegura que el elemento se trate como bloque */
}
.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366; /* Color verde de WhatsApp */
    color: white; /* Color del ícono */
    border-radius: 50%; /* Bordes redondeados */
    width: 60px; /* Ancho del botón */
    height: 60px; /* Altura del botón */
    display: flex; /* Centrar el ícono */
    justify-content: center; /* Centrar el ícono horizontalmente */
    align-items: center; /* Centrar el ícono verticalmente */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Sombra */
    text-decoration: none; /* Sin subrayado */
    z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
}

.whatsapp-button i {
    font-size: 24px; /* Tamaño del ícono */
}


@media (max-width: 768px) {
    .h4-basico, .h4-premium, .h4-tienda {
        font-size: 20px; /* Reducir el tamaño de la fuente */
    }

    .card-custom, .card-custom-premium {
        max-width: 90%; /* Ajustar al 90% del contenedor */
        margin: 10px auto; /* Centrarlas con un margen superior e inferior */
    }

    .pricing {
        font-size: 1.8rem; /* Reducir el tamaño de fuente */
    }

    .parrafo {
        font-size: 1rem; /* Reducir el tamaño de fuente */
    }

    .features {
        font-size: 1rem; /* Reducir el tamaño de fuente */
    }

    .btn-comprar {
        padding: 8px 16px; /* Ajustar el espaciado interno */
        font-size: 14px; /* Reducir el tamaño de fuente */
    }

    .btn-factura {
        padding: 8px 16px; /* Ajustar el espaciado interno */
        font-size: 12px; /* Reducir el tamaño de fuente */
    }
}