/* =================================================================
   Base Styles & Light Theme Variables
   ================================================================= */
body {
    background-color: #f9fafb; /* bg-gray-50 */
    color: #374151; /* text-gray-700 */
}

/* =================================================================
   Reusable Component Styles
   ================================================================= */

/* --- Buttons --- */
.cta-button {
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 174, 239, 0.3);
}
.cta-button:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 0 25px rgba(0, 174, 239, 0.5);
}

/* --- Cards --- */
.card-style {
    background-color: #ffffff; /* white */
    border: 1px solid #e5e7eb; /* gray-200 */
    transition: all 0.3s ease;
}
.card-style:hover {
    border-color: #00AEEF;
    transform: translateY(-5px);
}

.plan-card:hover {
    transform: translateY(-10px);
    border-color: #00AEEF;
}
.plan-popular {
    border-color: #00AEEF;
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(0, 174, 239, 0.3);
}
.plan-popular:hover {
     transform: scale(1.08) translateY(-10px);
}

/* --- Forms --- */
.form-input {
    width: 100%;
    background-color: #f3f4f6; /* bg-gray-100 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 0.75rem 1rem; /* p-3 */
}
.form-input:focus {
    outline: none;
    --tw-ring-color: #00AEEF; /* focus:ring-primary */
    box-shadow: 0 0 0 2px var(--tw-ring-color);
}
.form-checkbox {
    height: 1.25rem; /* h-5 */
    width: 1.25rem; /* w-5 */
    color: #00AEEF; /* text-primary */
    background-color: #f3f4f6; /* bg-gray-100 */
    border-color: #9ca3af; /* border-gray-400 */
}
.form-checkbox:focus {
    --tw-ring-color: #00AEEF; /* focus:ring-primary */
}
.form-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* space-x-3 */
    background-color: #f9fafb; /* bg-gray-50 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    padding: 0.75rem; /* p-3 */
    border-radius: 0.5rem; /* rounded-lg */
    cursor: pointer;
}
.form-checkbox-label:hover {
    border-color: #00AEEF; /* hover:border-primary */
}
.form-radio {
    height: 1.25rem;
    width: 1.25rem;
    color: #00AEEF;
}

/* --- Header --- */
.header-scrolled {
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
}

/* --- Section Title --- */
.section-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    background-color: #00AEEF;
    margin: 1rem auto 0;
    border-radius: 2px;
}

/* =================================================================
   Page-Specific & Animation Styles
   ================================================================= */

/* --- Animations --- */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animación para el menú desplegable (mega menu) */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fade-in-up 0.3s ease-out forwards;
}

/* Mega menu hover fix */
.mega-menu-group:hover .mega-menu-content,
.mega-menu-group:focus-within .mega-menu-content {
    display: flex !important;
}
.mega-menu-content {
    display: none;
}

/* --- SEO Page Specific --- */
.reputation-card-winner {
    box-shadow: 0 0 35px rgba(0, 174, 239, 0.2);
    transform: scale(1.02);
}
.faq-answer {
    transition: all 0.3s ease-in-out;
}

/* --- Diseño Web Page Specific --- */
.animated-gradient-text {
    color: #00AEEF; /* Fallback color */
    background: linear-gradient(90deg, #00AEEF, #374151, #00AEEF); /* primary, gray-700, primary */
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-pan 4s linear infinite;
}

.hero-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, #e5e7eb 1px, transparent 1px), /* gray-200 */
        linear-gradient(to bottom, #e5e7eb 1px, transparent 1px); /* gray-200 */
    background-size: 50px 50px;
    z-index: 0;
}


/* --- AI Chat Animation --- */
.typing-cursor::after {
    content: '▋';
    animation: blink 1s step-end infinite;
    color: #00AEEF;
    margin-left: 2px;
}
@keyframes blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

/* =================================================================
   Third-Party Library Overrides (intl-tel-input)
   ================================================================= */
.iti {
    width: 100%;
}
.iti .form-input {
    padding-left: 52px; /* Adjust based on flag width */
}
.iti__country-list {
    background-color: #ffffff;
    border-color: #e5e7eb;
}
.iti__country:hover, .iti__country.iti__active {
    background-color: #f3f4f6;
}
.iti__dial-code {
    color: #6b7280;
}
.iti__selected-flag {
    background-color: #f3f4f6;
}