/* ===================================================================== */
/*         Estilos Inspirados en la "Duration Monitor App"               */
/* ===================================================================== */

/* Variables de Color para fácil personalización */
:root {
    --bg-outer: #f5efff; /* Lavanda muy claro del fondo exterior */
    --bg-app-start: #1e122b; /* Púrpura muy oscuro, casi negro */
    --bg-app-end: #3a2d4d;   /* Púrpura oscuro/indigo */
    --card-bg: rgba(30, 22, 43, 0.5); /* Fondo de tarjeta de vidrio translúcido */
    --card-border: rgba(255, 255, 255, 0.1); /* Borde sutil para las tarjetas */
    --accent-glow-cyan: #a7f3d0; /* Cian/Menta pálido para brillos y texto */
    --accent-button-start: #d946ef; /* Magenta vibrante */
    --accent-button-end: #c084fc;    /* Lavanda/Púrpura medio */
    --text-primary: #f8fafc;        /* Blanco principal */
    --text-secondary: rgba(248, 250, 252, 0.6); /* Texto secundario más tenue */
    --nav-icon-active: #67e8f9; /* Cian brillante para el icono activo */
}


/* General Body Styles */
body {
    font-family: 'Inter', 'Poppins', sans-serif; /* Fuente moderna y limpia */
    overflow-x: hidden;
    background-color: var(--bg-outer);
    color: var(--text-primary);
}

/* Font Imports */
h1, h2, h3, .font-orbitron {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

/* Background Animations - Para el contenedor principal de la app */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-gradient-shift {
    background: linear-gradient(-45deg, var(--bg-app-start), var(--bg-app-end));
    background-size: 400% 400%;
    animation: gradient-shift 25s ease infinite;
}

/* Blob animado para un brillo de fondo púrpura */
@keyframes blob {
    0% { transform: translate(0, 0) scale(1); }
    30% { transform: translate(30px, -50px) scale(1.1); }
    60% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
}

.animate-blob {
    animation: blob 12s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
    background: rgba(192, 132, 252, 0.1); /* Brillo de lavanda muy tenue */
}

/* Pulse Glow - Para el brillo exterior del contenedor de la app */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 20px rgba(245, 239, 255, 0.5); }
    50% { box-shadow: 0 0 60px 15px rgba(245, 239, 255, 0.8); }
    100% { box-shadow: 0 0 20px rgba(245, 239, 255, 0.5); }
}

.animate-pulse-glow {
    animation: pulse-glow 6s infinite alternate;
}

/* Text Animations (sin cambios) */
@keyframes fade-in-up { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fade-in-up 1s ease-out forwards; }


/* Card Styles - El efecto de vidrio esmerilado */
.glass-effect {
    background: var(--card-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--card-border);
    border-radius: 24px; /* Esquinas bien redondeadas */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.glass-effect:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

/* Unificamos .feature-card con .glass-effect para consistencia */
.feature-card {
    background: var(--card-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

/* Text Style - Para los títulos con brillo de neón */
.text-glow {
    color: var(--accent-glow-cyan);
    text-shadow: 0 0 8px var(--accent-glow-cyan), 0 0 16px rgba(167, 243, 208, 0.5);
}

/* Button Styles */
/* Botón principal púrpura "Start Contraction" */
.btn-primary {
    border-radius: 9999px;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e122b; /* Texto oscuro para contraste */
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background-image: linear-gradient(to right, var(--accent-button-end), var(--accent-button-start));
    box-shadow: 0 5px 20px rgba(217, 70, 239, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(192, 132, 252, 0.4);
}

/* Botón secundario "DURATION MONITOR" con brillo */
.btn-secondary {
    border-radius: 30px;
    padding: 1rem 3rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background-image: linear-gradient(to right, #a890fe, #c084fc);
    box-shadow: 0 0 25px var(--accent-glow-cyan), 0 0 40px rgba(167, 243, 208, 0.4);
}

.btn-secondary:hover {
    transform: scale(1.05);
    box-shadow: 0 0 35px var(--accent-glow-cyan), 0 0 60px rgba(167, 243, 208, 0.6);
}

/* Estilo para la etiqueta "Early" */
.btn-tag {
    background: transparent;
    border: 2px solid var(--nav-icon-active);
    color: var(--nav-icon-active);
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-weight: 500;
}