/*
Theme Name: GestorCLIC
Theme URI: https://gestorclic.com
Author: GestorCLIC Development Team
Author URI: https://gestorclic.com
Description: Tema premium de WordPress para GestorCLIC desarrollado a partir de la arquitectura Agile Fintech Framework de Google Stitch. Incluye diseño dark mode vanguardista, calculadora de precios para autónomos y sociedades, formularios estructurados y conexión directa con el portal de clientes Bilky.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gestorclic
*/

/* ==========================================================================
   Base & Reset Overrides
   ========================================================================== */
:root {
  --color-background: #051424;
  --color-surface: #051424;
  --color-cobalt: #1E293B;
  --color-surface-container: #122131;
  --color-surface-high: #1c2b3c;
  --color-surface-highest: #273647;
  --color-border-subtle: #334155;
  --color-neon-lime: #84CC16;
  --color-emerald: #10B981;
  --color-tertiary: #4EDEA3;
  --color-text-main: #D4E4FA;
  --color-text-muted: #94A3B8;
  --color-text-variant: #C6C6CD;
  --color-error: #FFB4AB;
  --color-error-bg: #93000A;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--color-background);
  color: var(--color-text-main);
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Form Styling (Requisito Crítico 3)
   Card structure, subtle borders, comfortable padding, 100% responsive, clean :focus
   ========================================================================== */
.form-card,
.gestorclic-form-card,
.wpcf7-form,
.wpforms-form {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid var(--color-border-subtle);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-card::before,
.gestorclic-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-neon-lime), var(--color-emerald), transparent);
}

.form-card:hover,
.gestorclic-form-card:hover {
  border-color: rgba(132, 204, 22, 0.4);
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.5), 0 0 25px rgba(132, 204, 22, 0.1);
}

/* Form Groups & Labels */
.form-group {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-label,
label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-main);
  letter-spacing: 0.01em;
  margin-bottom: 0.375rem;
}

.form-label .required,
label .required {
  color: var(--color-neon-lime);
  margin-left: 0.25rem;
}

/* Form Inputs, Selects, and Textareas */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
select,
textarea,
.form-input {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--color-surface-container) !important;
  color: var(--color-text-main) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: 0.625rem !important;
  padding: 0.875rem 1rem !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  font-family: inherit !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #64748B !important;
  opacity: 1;
}

/* Pristine & High-Tech Focus States */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
.form-input:focus {
  border-color: var(--color-emerald) !important;
  background-color: #0d1c2d !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25), 0 0 15px rgba(16, 185, 129, 0.15) !important;
}

input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
  border-color: #475569 !important;
}

/* Select specific styling */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2384CC16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem !important;
}

/* Range input styling for pricing calculator */
input[type="range"] {
  accent-color: var(--color-neon-lime);
  background-color: var(--color-surface-high);
  height: 8px;
  border-radius: 4px;
}

/* Submit Buttons */
button[type="submit"],
input[type="submit"],
.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1.75rem;
  background: var(--color-neon-lime);
  color: #051424;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 0.625rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(132, 204, 22, 0.3);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

button[type="submit"]:hover,
input[type="submit"]:hover,
.btn-submit:hover {
  background: #a3e635;
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(132, 204, 22, 0.45);
}

button[type="submit"]:active,
input[type="submit"]:active,
.btn-submit:active {
  transform: translateY(0);
}

/* Form Alert Notices */
.gestorclic-form-notice {
  padding: 1rem 1.25rem;
  border-radius: 0.625rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gestorclic-form-notice.success {
  background-color: rgba(16, 185, 129, 0.15);
  border: 1px solid var(--color-emerald);
  color: #6EE7B7;
}

.gestorclic-form-notice.error {
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid #EF4444;
  color: #FCA5A5;
}

/* ==========================================================================
   Fintech Utilities & Effects
   ========================================================================== */
.glow-neon {
  box-shadow: 0px 4px 20px rgba(132, 204, 22, 0.3);
}

.glow-emerald {
  box-shadow: 0px 4px 20px rgba(16, 185, 129, 0.3);
}

.glow-border:hover {
  border-color: #84CC16 !important;
  box-shadow: 0 0 15px rgba(132, 204, 22, 0.25);
}

.bg-grid-pattern {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

.glass-panel {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(51, 65, 85, 0.8);
}

/* Animations */
@keyframes scanline {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

.animate-scan {
  animation: scanline 3s linear infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
/* Pricing Grid & Section Clear Fixes */
#content-pricing {
  display: block !important;
  width: 100% !important;
  margin-top: 1.5rem !important;
  margin-bottom: 2.5rem !important;
  clear: both !important;
  position: relative !important;
  z-index: 1 !important;
}

#content-pricing .grid {
  display: grid !important;
  gap: 2rem !important;
  position: relative !important;
}

@media (min-width: 768px) {
  #content-pricing .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.pricing-notes-section,
.pricing-faq-section {
  width: 100% !important;
  margin-top: 2.5rem !important;
  clear: both !important;
  position: relative !important;
  z-index: 1 !important;
}
/* ==========================================================================
   Stitch Exact Color Palette & Utilities (Guaranteed Pure CSS Overrides)
   ========================================================================== */

/* Primary Brand Colors */
.bg-neon-lime {
  background-color: #84CC16 !important;
  color: #051424 !important;
}

.text-neon-lime {
  color: #84CC16 !important;
}

.border-neon-lime {
  border-color: #84CC16 !important;
}

.bg-tertiary {
  background-color: #4EDEA3 !important;
  color: #051424 !important;
}

.text-tertiary {
  color: #4EDEA3 !important;
}

.border-tertiary {
  border-color: #4EDEA3 !important;
}

/* Backgrounds & Surfaces */
.bg-background {
  background-color: #051424 !important;
}

.bg-surface {
  background-color: #051424 !important;
}

.bg-surface-container {
  background-color: #122131 !important;
}

.bg-surface-container-low {
  background-color: #0d1c2d !important;
}

.bg-surface-container-lowest {
  background-color: #010f1f !important;
}

.bg-surface-container-high {
  background-color: #1c2b3c !important;
}

.bg-surface-container-highest {
  background-color: #273647 !important;
}

.bg-cobalt-surface {
  background-color: #1E293B !important;
}

.border-border-subtle {
  border-color: #334155 !important;
}

/* Text Colors */
.text-on-surface,
.text-on-background {
  color: #D4E4FA !important;
}

.text-on-surface-variant {
  color: #C6C6CD !important;
}

/* Hero Vibrant Gradient Text (Guaranteed Fallback) */
.gradient-text-lime {
  color: #84CC16 !important;
  background: linear-gradient(90deg, #84CC16 0%, #4EDEA3 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}

/* Badges */
.badge-neon-lime {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  background-color: rgba(132, 204, 22, 0.1) !important;
  border: 1px solid rgba(132, 204, 22, 0.3) !important;
  color: #84CC16 !important;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Action Buttons */
.btn-cta-lime {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background-color: #84CC16 !important;
  color: #051424 !important;
  font-weight: 800 !important;
  border-radius: 0.75rem !important;
  padding: 0.875rem 2rem !important;
  box-shadow: 0px 4px 20px rgba(132, 204, 22, 0.35) !important;
  transition: all 0.25s ease-in-out !important;
  text-decoration: none !important;
}

.btn-cta-lime:hover {
  background-color: #65a30d !important;
  color: #051424 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0px 6px 25px rgba(132, 204, 22, 0.5) !important;
}

.btn-cta-dark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background-color: #122131 !important;
  color: #D4E4FA !important;
  font-weight: 600 !important;
  border: 1px solid #334155 !important;
  border-radius: 0.75rem !important;
  padding: 0.875rem 2rem !important;
  transition: all 0.25s ease-in-out !important;
  text-decoration: none !important;
}

.btn-cta-dark:hover {
  background-color: #1c2b3c !important;
  border-color: #84CC16 !important;
  color: #84CC16 !important;
}