/* --- Reseteo Básico y Variables de Diseño --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --font-display: 'Space Grotesk', sans-serif;
    --font-sans: 'Inter', sans-serif;
    --color-space-black: #0B0C10;
    --color-white: #FFFFFF;
    --color-purple: #6A0DAD;
    --color-magenta: #E60073;
    --color-lime: #BCEE93;
    --color-lila-claro: #F2ECF3;
}

/* --- Estilos Generales y Fondo Animado --- */
body {
    font-family: var(--font-sans);
    color: var(--color-white);
    line-height: 1.6;
    background: linear-gradient(315deg, var(--color-purple), var(--color-magenta), var(--color-space-black));
    background-size: 400% 400%;
    animation: gradientAnimation 20s ease infinite;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Cabecera (Hero Section) --- */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
    padding: 2rem;
}

.hero-content { max-width: 800px; }
.title, h2, h3, h4 { font-family: var(--font-display); }
.title { font-size: 3.5rem; color: var(--color-lila-claro); font-weight: 500; line-height: 1.2; }
.subtitle { font-size: 1.25rem; margin-top: 1rem; opacity: 0.9; }

/* ======================================================= */
/* ===== INICIO DE NUEVOS ESTILOS PARA PLANES DE PRECIOS ====== */
/* ======================================================= */

.main-content {
    padding: 3rem 2rem;
}

.service-category {
    text-align: center;
    margin-bottom: 5rem; /* Espacio grande entre cada categoría de servicio */
}

.category-title {
    font-size: 2.8rem;
    color: var(--color-lila-claro);
    margin-bottom: 3rem;
}

.plans-container {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Hace que las tarjetas tengan la misma altura */
    flex-wrap: wrap;
    gap: 2rem;
}

.plan-card {
    background-color: rgba(11, 12, 16, 0.8);
    border: 1px solid rgba(242, 236, 243, 0.2);
    border-radius: 12px;
    padding: 2rem;
    flex-basis: 340px; /* Ancho base de cada tarjeta */
    flex-grow: 1;
    max-width: 380px;
    display: flex;
    flex-direction: column; /* Apila el contenido de la tarjeta verticalmente */
    text-align: left;
    position: relative; /* Necesario para la insignia de "Recomendado" */
}

.plan-card h4 {
    font-size: 1.75rem;
    color: var(--color-lila-claro);
    margin-bottom: 0.5rem;
    text-align: center;
}

.plan-phrase {
    text-align: center;
    opacity: 0.7;
    min-height: 50px; /* Asegura espacio consistente para la frase */
    margin-bottom: 1.5rem;
}

.plan-features {
    list-style: none;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* ¡TRUCO! Empuja el precio y el botón hacia abajo */
}

.plan-features li {
    padding-left: 1.8rem;
    position: relative;
    margin-bottom: 0.8rem;
}

/* Icono de check personalizado para las características */
.plan-features li::before {
    content: '✓';
    color: var(--color-lime);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

.price-display {
    text-align: center;
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-lila-claro);
    margin-bottom: 1.5rem;
}

.price-usd {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.6;
}

/* Estilos para el plan recomendado */
.plan-card.recommended {
    border-color: var(--color-lime);
    transform: scale(1.05); /* Lo hace ligeramente más grande */
    box-shadow: 0 0 30px rgba(188, 238, 147, 0.2);
}

.recommended-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-lime);
    color: var(--color-space-black);
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
}

/* --- Botones --- */
.cta-button {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-space-black);
    background-color: var(--color-lime);
    border: none;
    border-radius: 5px;
    padding: 1rem 1.5rem; /* Botón un poco más grande */
    cursor: pointer;
    transition: transform 0.2s ease;
    width: 100%; /* El botón ocupa todo el ancho de la tarjeta */
}
.cta-button:hover {
    transform: scale(1.05);
}

/* ... (El resto de los estilos del formulario no cambian, pero los incluyo por completitud) ... */
.purchase-form { margin-top: 2rem; text-align: left; border-top: 1px solid rgba(242, 236, 243, 0.2); padding-top: 1.5rem; }
.form-step { margin-bottom: 1.25rem; }
.form-step label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; opacity: 0.8; }
.form-step input {
    width: 100%; padding: 0.8rem; background-color: rgba(11, 12, 16, 0.5);
    border: 1px solid rgba(242, 236, 243, 0.3); border-radius: 5px;
    color: var(--color-white); font-family: var(--font-sans); font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-step input::placeholder { color: rgba(255, 255, 255, 0.4); }
.form-step input:focus {
    outline: none; border-color: var(--color-lime);
    box-shadow: 0 0 15px rgba(188, 238, 147, 0.3);
}
.form-step input.error { border-color: #E53E3E; background-color: #4A2222; }

.payment-buttons { margin-top: 1.5rem; display: flex; gap: 1rem; }
.submit-button, .yape-plin-button {
    flex-grow: 1; font-family: var(--font-display); font-weight: 700; font-size: 1rem;
    border-radius: 5px; padding: 0.8rem 1.5rem; cursor: pointer; transition: all 0.2s ease;
}
.submit-button { background-color: var(--color-lime); color: var(--color-space-black); border: none; }
.submit-button:hover:not(:disabled) { transform: scale(1.02); }
.yape-plin-button {
    background-color: transparent; color: var(--color-lila-claro); border: 1px solid var(--color-lila-claro);
}
.yape-plin-button:hover:not(:disabled) { background-color: var(--color-lila-claro); color: var(--color-space-black); }
.submit-button:disabled, .yape-plin-button:disabled {
    background-color: #555; color: #999; border-color: #555; cursor: not-allowed; transform: none;
}

/* ======================================================= */
/* ====== FIN DE NUEVOS ESTILOS PARA PLANES DE PRECIOS ======== */
/* ======================================================= */

/* ... (El resto de tus estilos para Modal, Notificación, Footer, etc. no cambian) ... */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center;
    z-index: 1000;
}
.modal-content {
    background-color: var(--color-space-black); padding: 2.5rem; border-radius: 12px;
    border: 1px solid rgba(242, 236, 243, 0.2); width: 90%; max-width: 500px;
    position: relative; text-align: left;
}
.close-button {
    position: absolute; top: 15px; right: 20px; background: none; border: none;
    color: var(--color-white); font-size: 2rem; cursor: pointer;
}
.modal-content h3 {
    text-align: center; color: var(--color-lila-claro); font-size: 1.75rem; margin-bottom: 1.5rem;
}
.instructions { margin-left: 1.5rem; margin-bottom: 1.5rem; opacity: 0.9; }
.instructions li { margin-bottom: 0.5rem; }
.qr-code-container { text-align: center; margin: 2rem 0; }
.qr-code-container img { max-width: 200px; border-radius: 5px; margin-bottom: 1rem; }
.upload-section { margin-top: 1.5rem; margin-bottom: 1.5rem; }
#confirm-upload-button { width: 100%; }

.notification {
    position: fixed; top: 0; left: 50%; padding: 1rem 2rem; border-radius: 12px;
    color: var(--color-white); font-family: var(--font-sans); z-index: 2000;
    background-color: rgba(41, 41, 56, 0.6);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -150%); opacity: 0; pointer-events: none;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.notification.visible { transform: translate(-50%, 100%); opacity: 1; pointer-events: auto; }
.notification.error { background-color: rgba(74, 34, 34, 0.6); border-color: rgba(229, 62, 62, 0.5); }
.notification.success { background-color: rgba(26, 74, 58, 0.6); border-color: rgba(56, 161, 105, 0.5); }

.footer {
    text-align: center; padding: 3rem 2rem 2rem 2rem; margin-top: 3rem;
    border-top: 1px solid rgba(242, 236, 243, 0.1);
    display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.copyright { font-size: 0.9rem; opacity: 0.7; }
.footer-credit { font-size: 0.8rem; opacity: 0.5; transition: opacity 0.3s ease; }
.footer-credit:hover { opacity: 1; }
.footer-credit p { margin-bottom: 0.5rem; }
.agency-logo { width:50px; height: auto; }

.hidden { display: none !important; }

/* --- Diseño Adaptable para la Nueva Estructura --- */
@media (max-width: 900px) { /* Un breakpoint un poco más grande para tablets */
    .plans-container {
        flex-direction: column;
        align-items: center;
    }
    .plan-card {
        max-width: 500px; /* Las tarjetas pueden ser más anchas en tablets */
    }
    .plan-card.recommended {
        transform: scale(1); /* Quitamos el zoom en móvil para que no se vea raro */
    }
}

@media (max-width: 768px) {
    .title { font-size: 2.5rem; line-height: 1.2; }
    .subtitle { font-size: 1.1rem; }
    .category-title { font-size: 2.2rem; }
    .hero-section { min-height: 50vh; padding: 2rem 1rem; }
    .main-content { padding: 2rem 1rem; }
    .payment-buttons { flex-direction: column; }
}

@media (max-width: 480px) {
    .title { font-size: 2rem; }
    .subtitle { font-size: 1rem; }
}