/* ==========================================================================
   MODERN THEME - WORLD CLASS DESIGN SYSTEM
   Consolidates and elevates the UI for Sales Accelerator Lead Magnets
   ========================================================================== */

:root {
  /* Typography */
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: 'Krona One', sans-serif;

  /* Spacing */
  --space-unit: 8px;
  --space-xs: calc(var(--space-unit) * 1);
  --space-sm: calc(var(--space-unit) * 2);
  --space-md: calc(var(--space-unit) * 3);
  --space-lg: calc(var(--space-unit) * 5);
  --space-xl: calc(var(--space-unit) * 8);
  --space-2xl: calc(var(--space-unit) * 12);

  /* Common Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  --color-accent: #FE7743;
  --color-accent-hover: #e0602d;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 15px rgba(254, 119, 67, 0.3);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

/* ==========================================================================
   THEMES
   ========================================================================== */

/* Green Theme (Propuesta Comercial) */
body.theme-green {
  --theme-primary: #083623;
  --theme-secondary: #021b12;
  --theme-bg-gradient: linear-gradient(135deg, #083623 0%, #021b12 100%);
  --theme-text-on-dark: #ffffff;
  --theme-text-muted-on-dark: rgba(255, 255, 255, 0.8);
}

/* Blue Theme (6 Pasos) */
body.theme-blue {
  --theme-primary: #1a1a2e;
  --theme-secondary: #0f3460;
  --theme-bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
  --theme-text-on-dark: #ffffff;
  --theme-text-muted-on-dark: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-secondary);
  color: var(--color-gray-800);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }

p {
  margin-bottom: var(--space-md);
  font-size: 1.1rem;
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* Buttons - Base styles (Verde lima con texto negro) */
.button, .btn, button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 50px;
  transition: all 0.25s ease;
  cursor: pointer;
  border: none !important;
  border-bottom: none !important;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* Default: Verde lima con texto negro */
  background: #C4D600 !important;
  color: #000000 !important;
  box-shadow: 0 4px 15px rgba(196, 214, 0, 0.3) !important;
}

.button:hover, .btn:hover, button[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(196, 214, 0, 0.4) !important;
  background: #d9eb00 !important;
  color: #000000 !important;
  border: none !important;
  border-bottom: none !important;
}

/* Asegurar que botones fuera del header sean verdes */
main .button,
main .btn,
section .button,
section .btn,
.thank-you-page .button,
#download-btn {
  background: #C4D600 !important;
  color: #000000 !important;
  box-shadow: 0 4px 15px rgba(196, 214, 0, 0.3) !important;
  border: none !important;
  border-bottom: none !important;
}

main .button:hover,
main .btn:hover,
section .button:hover,
section .btn:hover,
.thank-you-page .button:hover,
#download-btn:hover {
  background: #d9eb00 !important;
  color: #000000 !important;
  box-shadow: 0 6px 20px rgba(196, 214, 0, 0.4) !important;
  transform: translateY(-2px) !important;
  border: none !important;
  border-bottom: none !important;
}

/* Header Button - SOLO el header es Negro */
header .button,
header .btn,
header .header-cta {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 0.9rem !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
  border-radius: var(--radius-md) !important;
}

header .button:hover,
header .btn:hover,
header .header-cta:hover {
  background: #1a1a1a !important;
  color: var(--color-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4) !important;
}

/* LinkedIn Button */
.linkedin-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: #0077b5;
  color: white !important;
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-top: var(--space-md);
  box-shadow: var(--shadow-md);
}

.linkedin-button:hover {
  background-color: #005e93;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.linkedin-button i {
  font-size: 1.25rem;
}

/* Secondary/Dark Button */
.button.dark {
  background: var(--color-gray-900);
  color: var(--color-white);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
header {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding: var(--space-sm) 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
  background: var(--theme-bg-gradient) !important;
  padding: var(--space-2xl) 0 var(--space-xl);
  color: var(--theme-text-on-dark);
  position: relative;
  overflow: hidden;
}

/* Texture overlay */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.05) 0%, transparent 50%);
  pointer-events: none;
}

.hero-section h1 {
  color: var(--theme-text-on-dark);
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.hero-section p {
  color: var(--theme-text-muted-on-dark);
  font-size: 1.25rem;
  max-width: 60ch;
  line-height: 1.7;
}

.hero-section .eyebrow-tag {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  display: inline-block;
  margin-bottom: var(--space-md);
  border: 1px solid rgba(255,255,255,0.1);
}

.hero-section img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
  transform: perspective(1000px) rotateY(-5deg);
  transition: transform 0.5s ease;
}

.hero-section img:hover {
  transform: perspective(1000px) rotateY(0deg);
}

/* ==========================================================================
   CARDS SECTION (Features / TOC)
   ========================================================================== */
.cards-section {
  background: var(--color-gray-50);
  padding: var(--space-2xl) 0;
}

.section-intro h2 {
  color: var(--color-gray-900);
}

.section-intro p {
  color: var(--color-gray-700);
}

/* TOC Grid Styling */
.toc-container {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-xl);
  margin-top: var(--space-xl);
  position: relative;
  z-index: 2;
}

.toc-header h2 {
  color: var(--theme-primary);
  text-align: center;
  margin-bottom: var(--space-lg);
}

.toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.toc-item {
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0,0,0,0.03);
  position: relative;
  overflow: hidden;
}

.toc-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  background: var(--color-white);
  border-color: rgba(0,0,0,0.05);
}

.toc-chapter-number {
  color: var(--color-accent);
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
  display: block;
}

.toc-chapter-title {
  color: var(--color-gray-900);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonial-card {
  background: var(--color-white) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  height: 100%;
}

.testimonial-text {
  font-family: var(--font-secondary) !important;
  font-style: italic;
  color: var(--color-gray-700) !important;
  font-size: 1.05rem !important;
}

.testimonial-rating i {
  color: #FFB400 !important; /* Gold stars */
}

/* ==========================================================================
   AUTHORS SECTION
   ========================================================================== */
.authors-section {
  background: var(--color-white);
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--color-gray-200);
}

.authors-grid {
  background: linear-gradient(to right, #ffffff, var(--color-gray-50));
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0,0,0,0.05);
}

.author-photo {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  /* Override problematic masks from old css */
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.author-name {
  color: var(--theme-primary) !important;
}

/* ==========================================================================
   FINAL CTA SECTION
   ========================================================================== */
.final-cta-section {
  background: var(--theme-secondary) !important; /* Match footer/dark theme */
  position: relative;
  padding: var(--space-2xl) 0;
}

.final-cta-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.final-cta-card h2 {
  color: var(--color-white);
}

.final-cta-card p {
  color: rgba(255,255,255,0.9);
}

/* ==========================================================================
   MODAL
   ========================================================================== */
.reveal, .modal-content {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  background: var(--color-white);
  border: none !important;
}

.modal-left {
  padding: var(--space-xl) !important;
}

.modal-left h2 {
  font-size: 1.75rem !important;
  color: var(--color-gray-900) !important;
}

/* Forms */
.form-fields .field {
  margin-bottom: var(--space-md);
}

input[type="text"],
input[type="email"],
input[type="tel"],
select {
  width: 100%;
  padding: 1rem 1.25rem !important;
  border: 1px solid var(--color-gray-300) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-family: var(--font-secondary);
}

/* Select específico - alta especificidad para override */
select,
select.form-control,
.form-fields select,
.reveal select,
.modal-content select,
#lead-magnet-form select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #f9fafb !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 12px !important;
  padding-right: 2.5rem !important;
  cursor: pointer;
  color: #1f2937 !important;
  font-size: 1rem !important;
}

select option,
select.form-control option {
  color: #1f2937 !important;
  background: #ffffff !important;
  padding: 0.5rem;
}

input:focus,
select:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(254, 119, 67, 0.1) !important;
  background-color: var(--color-white) !important;
  outline: none;
}

.privacy-notice {
  font-size: 0.875rem;
  color: var(--color-gray-700) !important;
  text-align: center;
  margin-top: var(--space-md);
}

/* Close Button */
.close-modal-btn {
  background: rgba(0,0,0,0.05);
  color: var(--color-gray-700);
  border-radius: 50%;
  transition: all 0.2s;
}

.close-modal-btn:hover {
  background: var(--color-gray-200);
  color: var(--color-black);
}

/* ==========================================================================
   THANK YOU PAGE (Specific Overrides)
   ========================================================================== */
.thank-you-page {
  padding-top: calc(var(--space-2xl) * 1.5) !important;
  min-height: 80vh;
  background: radial-gradient(circle at top center, rgba(0,0,0,0.02) 0%, transparent 70%);
}

.thank-you-title {
  font-size: clamp(2rem, 5vw, 3rem) !important;
  color: var(--theme-primary) !important;
  margin-bottom: var(--space-md) !important;
}

.thank-you-text {
  font-size: 1.25rem !important;
  color: var(--color-gray-700) !important;
  max-width: 700px !important;
  margin: 0 auto var(--space-xl) !important;
}

.ebook-image-container {
  margin-bottom: var(--space-xl) !important;
  padding-top: 0 !important;
}

/* Masterclass Details (6 Pasos TYP) */
.masterclass-details {
  background: var(--color-white) !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

.masterclass-details ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.masterclass-details ul li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.masterclass-details ul li::before {
  content: "🎯";
  position: absolute;
  left: 0;
  top: 0;
}

.countdown-timer .time-unit .number {
  color: var(--color-accent) !important;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --space-unit: 6px; /* Tighter spacing on mobile */
  }

  .hero-section {
    padding-top: var(--space-xl);
    text-align: center;
  }

  .hero-section .columns {
    display: flex;
    flex-direction: column;
  }

  /* Image typically first visually in DOM for Foundation usually, but we want text first?
     Wait, foundation floats usually handle this.
     If image is left column, it shows first.
     Let's ensure image has margin */
  .hero-section img {
    margin: 0 auto var(--space-lg) !important;
    max-width: 80%;
  }

  .toc-grid {
    grid-template-columns: 1fr;
  }

  .authors-grid {
    flex-direction: column;
    text-align: center;
  }

  .author-photo {
    margin: 0 auto var(--space-lg) !important;
  }

  .author-card {
    padding-left: 0 !important;
  }

  /* Modal Mobile */
  .modal-content {
    flex-direction: column;
  }

  .modal-right {
    display: none; /* Hide image on mobile for simpler modal */
  }
}