/* ============================
   CSS Variables & Base Styles v3.0 (Colorful Update)
   ============================ */
   :root {
    /* Colors - Inspired by WebFX example */
    --clr-primary: #1e3a8a; /* Deep Blue */
    --clr-primary-dark: #1e293b; /* Darker Blue/Slate */
    --clr-secondary: #7c3aed; /* Purple */
    --clr-secondary-dark: #6d28d9;
    --clr-accent: #06b6d4; /* Cyan/Teal */
    --clr-accent-dark: #0891b2;
    --clr-accent-alt: #FF5722; /* Pink/Magenta Accent #ec4899*/
  
    --clr-success: #10b981; /* Green */
    --clr-error: #ef4444; /* Red */
    --clr-warning: #f59e0b; /* Amber */
  
    --clr-grey-900: #0f172a; /* Very Dark Blue/Slate */
    --clr-grey-800: #1e293b; /* Dark Blue/Slate */
    --clr-grey-700: #334155; /* Medium Slate */
    --clr-grey-600: #475569;
    --clr-grey-500: #64748b;
    --clr-grey-300: #cbd5e1;
    --clr-grey-100: #f1f5f9; /* Very Light Grey/Blue */
    --clr-white: #ffffff;
    --clr-black: #000000;
  
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-secondary) 100%);
    --gradient-accent: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-alt));
    --gradient-dark: linear-gradient(145deg, var(--clr-grey-900) 0%, var(--clr-primary-dark) 100%);
  
    /* Typography */
    --ff-title: "Poppins", sans-serif;
    --ff-body: "Inter", sans-serif;
    --fs-base: 16px;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.875rem;
    --fs-4xl: 2.25rem;
    --fs-5xl: 3rem;
    --fs-6xl: 3.75rem; /* Added larger size */
  
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 5rem; /* Added larger space */
  
    /* Layout */
    --container-width: 1400px; /*antes 1200px*/
    --container-padding: 1rem;
    --header-height: 5rem; /* Slightly taller header */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem; /* Added larger radius */
    --border-radius-full: 9999px;
  
    /* Transitions & Shadows */
    --transition-base: all 0.3s ease-in-out;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  }
  
  /* ============================
     Global Reset & Base Styles
     ============================ */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-margin-top: calc(var(--header-height) + 1rem);
  }
  
  html {
    font-size: var(--fs-base);
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
  }
  
  body {
    font-family: var(--ff-body);
    color: var(--clr-grey-700); /* Default text color */
    background-color: var(--clr-white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-title);
    font-weight: 700;
    line-height: 1.3;
    color: var(--clr-grey-900); /* Darker headings */
  }
  
  p {
    margin-bottom: var(--space-md);
    max-width: 70ch; /* Slightly wider max-width */
  }
  
  a {
    text-decoration: none;
    color: var(--clr-secondary); /* Purple links */
    transition: var(--transition-base);
  }
  a:hover, a:focus {
    color: var(--clr-secondary-dark);
    text-decoration: underline;
  }
  *:focus-visible {
      outline: 3px solid var(--clr-accent);
      outline-offset: 3px;
      border-radius: var(--border-radius-sm);
  }
  
  img, svg, video, canvas {
    max-width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
  }
  
  ul, ol { list-style: none; }
  button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
  input, button, textarea, select { font: inherit; }
  
  /* ============================
     Utility Classes
     ============================ */
  .container {
    width: min(100% - (var(--container-padding) * 2), var(--container-width));
    margin-inline: auto;
  }
  
  .section {
    padding: var(--space-3xl) 0;
    position: relative;
    overflow: hidden; /* Prevent content overflow */
  }
  @media (min-width: 768px) {
      .section { padding: var(--space-4xl) 0; }
  }
  
  .section--alt {
    background-color: var(--clr-grey-100);
  }
  
  /* Section with gradient background */
  .section--gradient-bg {
      background: var(--gradient-dark);
      color: var(--clr-grey-300); /* Light text on dark bg */
  }
  .section--gradient-bg h2,
  .section--gradient-bg h3 {
      color: var(--clr-white); /* White headings on dark bg */
  }
  
  .section__title {
    font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl)); /* Larger title */
    text-align: center;
    margin-bottom: var(--space-xl);
    position: relative;
    padding-bottom: var(--space-md); /* Increased padding */
  }
  .section__title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100px; /* Wider underline */
      height: 5px; /* Thicker underline */
      background: var(--gradient-accent); /* Use accent gradient */
      border-radius: var(--border-radius-full);
  }
  /* Light title style for dark backgrounds */
  .section__title--light {
      color: var(--clr-white);
  }
  .section__title--light::after {
       background: var(--clr-accent); /* Solid accent color for underline */
  }
  
  .section__title--left { text-align: left; }
  .section__title--left::after { left: 0; transform: translateX(0); }
  
  /* Buttons */
  .btn {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--border-radius-md);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-base);
    border: 2px solid transparent;
    line-height: 1.5;
    box-shadow: var(--shadow-md); /* Default shadow */
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 0.5px; /* Slight letter spacing */
    font-size: var(--fs-sm); /* Slightly smaller base size */
  }
  .btn:hover, .btn:focus {
    transform: translateY(-3px) scale(1.02); /* Add scale effect */
    box-shadow: var(--shadow-lg);
    text-decoration: none;
  }
  .btn:active {
      transform: translateY(-1px) scale(1);
      box-shadow: var(--shadow-sm);
  }
  
  .btn--primary {
    background-color: var(--clr-accent-alt); /* Pink/Magenta */
    color: var(--clr-white);
    border-color: var(--clr-accent-alt);
  }
  .btn--primary:hover, .btn--primary:focus {
    background-color: #d91a73; /* Darker Pink #d91a73*/
    border-color: #FF5722;
    color: var(--clr-white);
  }
  
  .btn--secondary {
    background-color: var(--clr-accent); /* Cyan/Teal */
    color: var(--clr-grey-900); /* Dark text for contrast */
    border-color: var(--clr-accent);
  }
  .btn--secondary:hover, .btn--secondary:focus {
    background-color: var(--clr-accent-dark);
    border-color: var(--clr-accent-dark);
    color: var(--clr-grey-900);
  }
  
  /* Outline button for light backgrounds */
  .btn--outline-dark {
      background-color: transparent;
      color: var(--clr-primary); /* Dark blue text */
      border-color: var(--clr-primary);
  }
  .btn--outline-dark:hover, .btn--outline-dark:focus {
      background-color: var(--clr-primary);
      color: var(--clr-white);
  }
  /* Outline button for dark backgrounds */
  .btn--outline-light {
      background-color: transparent;
      color: var(--clr-white);
      border-color: var(--clr-white);
  }
  .btn--outline-light:hover, .btn--outline-light:focus {
      background-color: rgba(255, 255, 255, 0.1);
      color: var(--clr-white);
      border-color: var(--clr-white);
  }
  
  
  .btn--lg {
    font-size: var(--fs-md); /* Adjusted large size */
    padding: var(--space-md) var(--space-xl);
  }
  .btn--full { width: 100%; display: block; }
  .btn:disabled { /* Keep disabled style */
      background-color: var(--clr-grey-300);
      border-color: var(--clr-grey-300);
      color: var(--clr-grey-500);
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
  }
  
  /* Gradient Text */
  .gradient-text { /* Primary gradient (Blue/Purple) */
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
  .gradient-text-alt { /* Accent gradient (Cyan/Pink) */
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
  
  .sr-only { /* Keep screen reader only */
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
  }
  .badge { /* Keep badge style */
    background-color: var(--clr-accent); color: var(--clr-grey-900);
    padding: var(--space-xs) var(--space-sm); border-radius: var(--border-radius-full);
    font-size: var(--fs-sm); font-weight: 600; margin-left: var(--space-sm);
    display: inline-block; vertical-align: middle;
  }
  
  /* ============================
     Header / Navigation
     ============================ */
  .header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    background-color: transparent; /* Start transparent */
    z-index: 1000;
    height: var(--header-height);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
  }
  .header.scrolled {
      background-color: rgba(15, 23, 42, 0.9); /* Dark Blue/Slate semi-transparent */
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: var(--shadow-lg);
      height: calc(var(--header-height) - 0.5rem); /* Slightly shrink on scroll */
  }
  
  .header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
  }
  
  .header__logo { /* Styles adjusted for visibility */
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--clr-white); /* White text */
    font-weight: 700;
    font-size: var(--fs-xl);
    text-decoration: none;
  }
  .header__logo svg { transition: transform 0.3s ease; }
  .header__logo:hover svg, .header__logo:focus svg { transform: rotate(15deg) scale(1.1); }
  .header__logo:hover, .header__logo:focus { color: var(--clr-accent); text-decoration: none; }
  
  .header__logo-text { display: none; } /* Keep hidden on mobile */
  
  .header__nav { display: none; } /* Keep hidden on mobile */
  
  .header__list { display: flex; gap: var(--space-lg); }
  
  .header__link { /* Adjusted for dark background */
    font-weight: 500;
    color: var(--clr-grey-300); /* Light grey links */
    padding: var(--space-sm) 0;
    position: relative;
    text-decoration: none;
    text-transform: uppercase; /* Uppercase nav links */
    font-size: var(--fs-sm);
    letter-spacing: 0.5px;
  }
  .header__link::after {
      content: ''; position: absolute; bottom: -2px; left: 0;
      width: 0; height: 2px;
      background-color: var(--clr-accent); /* Accent underline */
      transition: width 0.3s ease;
  }
  .header__link:hover, .header__link:focus, .header__link.active {
    color: var(--clr-white); /* White active/hover link */
  }
  .header__link:hover::after, .header__link:focus::after, .header__link.active::after {
    width: 100%;
  }
  
  .header__cta { display: none; } /* Keep hidden on mobile */
  
  /* Mobile Menu Toggle Button */
  .header__toggle { /* Adjusted for visibility */
    display: flex; flex-direction: column; justify-content: space-around;
    width: 28px; height: 24px; background: transparent; border: none;
    cursor: pointer; padding: 0; z-index: 10;
  }
  .header__toggle-bar {
    display: block; width: 100%; height: 3px;
    background-color: var(--clr-white); /* White bars */
    border-radius: var(--border-radius-full);
    transition: all 0.3s ease-in-out;
  }
  /* Keep toggle animation */
  .header__toggle.is-open .header__toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .header__toggle.is-open .header__toggle-bar:nth-child(2) { opacity: 0; }
  .header__toggle.is-open .header__toggle-bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
  
  /* Mobile Menu Styles */
  @media (max-width: 991.98px) {
    .header__nav {
      display: block; position: absolute;
      top: calc(100% - 1px); /* Position below scrolled header height */
      left: 0; width: 100%;
      background-color: var(--clr-grey-900); /* Dark background */
      box-shadow: var(--shadow-lg);
      padding: var(--space-lg) var(--container-padding);
      transform: translateY(-100%); opacity: 0; visibility: hidden;
      transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease, visibility 0s 0.4s;
      border-bottom-left-radius: var(--border-radius-lg);
      border-bottom-right-radius: var(--border-radius-lg);
    }
    .header.scrolled .header__nav {
        top: 100%; /* Ensure it attaches correctly when header shrinks */
    }
  
    .header__nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; transition-delay: 0s; }
    .header__list { flex-direction: column; align-items: center; gap: var(--space-md); }
    .header__link { font-size: var(--fs-lg); padding: var(--space-sm); color: var(--clr-white); } /* White links */
    .header__cta { display: block; margin-top: var(--space-lg); text-align: center; }
  }
  
  /* Desktop Navigation */
  @media (min-width: 992px) {
    .header__logo-text { display: inline; }
    .header__nav { display: block; position: static; background-color: transparent; box-shadow: none; padding: 0; transform: none; opacity: 1; visibility: visible; transition: none; border-radius: 0; }
    .header__list { flex-direction: row; }
    .header__cta { display: inline-block; margin-top: 0; margin-left: var(--space-lg); }
    .header__toggle { display: none; }
  }
  
  /* ============================
     Hero Section
     ============================ */
  .hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding-top: calc(var(--header-height) + var(--space-2xl)); /* More top padding */
    padding-bottom: var(--space-3xl);
    background: var(--gradient-dark); /* Use dark gradient */
    color: var(--clr-white);
    overflow: hidden;
  }
  
  .hero__canvas { /* Keep canvas styles */
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      z-index: 1; pointer-events: none;
  }
  
  .hero__content {
    position: relative; z-index: 3;
    display: grid; /* Use grid for layout */
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: var(--space-2xl);
    align-items: center;
    text-align: center; /* Center align on mobile */
  }
  @media (min-width: 992px) {
      .hero__content {
          grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); /* Two columns on desktop */
          text-align: left; /* Left align on desktop */
      }
  }
  
  .hero__text-content { /* Container for text and buttons */ }
  
  .hero__title {
    font-size: clamp(var(--fs-4xl), 7vw, var(--fs-6xl)); /* Even larger title */
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--clr-white);
    line-height: 1.2; /* Tighter line height */
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  
  .hero__subtitle {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-xl);
    max-width: 55ch; /* Limit width */
    color: var(--clr-grey-300); /* Light grey subtitle */
    opacity: 0.9;
    margin-left: auto; /* Center on mobile */
    margin-right: auto; /* Center on mobile */
  }
  @media (min-width: 992px) {
      .hero__subtitle { font-size: var(--fs-xl); margin-left: 0; margin-right: 0; } /* Align left on desktop */
  }
  
  
  .hero__actions {
    display: flex;
    flex-direction: column; /* Stack buttons on small screens */
    gap: var(--space-md);
    align-items: center; /* Center align on mobile */
    margin-top: var(--space-lg);
  }
  @media (min-width: 576px) {
    .hero__actions {
      flex-direction: row; /* Side-by-side buttons */
      justify-content: center; /* Center align on mobile */
    }
  }
  @media (min-width: 992px) {
      .hero__actions {
          align-items: flex-start; /* Align left on desktop */
          justify-content: flex-start;
      }
  }
  
  .hero__visual {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: var(--space-xl); /* Add margin on mobile */
  }
  @media (min-width: 992px) {
      .hero__visual { margin-top: 0; }
  }
  
  .hero__visual-placeholder {
      padding: 0;
      color: var(--clr-grey-500);
      text-align: center;
      min-height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 450px;
  }
  .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
  }

  /* ============================
     Steps Section (Cómo Funciona)
     ============================ */
  .steps__grid {
    display: grid;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
  }
  
  .step--light {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: flex; flex-direction: column;
  }
  .step--light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
  }
  
  .step--light .step__icon {
      background: var(--clr-accent);
      width: 70px; height: 70px;
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      margin-inline: auto; margin-bottom: var(--space-lg);
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      flex-shrink: 0;
  }
  .step--light .step__icon img {
      width: 35px; height: 35px;
      filter: none;
  }
  
  .step--light .step__title {
    font-size: var(--fs-xl); font-weight: 600; margin-bottom: var(--space-sm);
    color: var(--clr-white);
  }
  
  .step--light .step__text {
      color: var(--clr-grey-300);
      font-size: var(--fs-md);
      flex-grow: 1;
  }
  
  .steps__cta { text-align: center; margin-top: var(--space-xl); }
  
  @media (min-width: 640px) { .steps__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024x) { .steps__grid { grid-template-columns: repeat(4, 1fr); } }
  
  /* ============================
     Benefits Section
     ============================ */
  .benefits__grid { display: grid; gap: var(--space-lg); }
  
  .benefit {
    background-color: var(--clr-white);
    border-radius: var(--border-radius-md);
    padding: var(--space-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
    border-left: 5px solid var(--clr-primary);
    display: flex; flex-direction: column;
  }
  .benefit:hover, .benefit:focus-within {
    box-shadow: var(--shadow-xl);
    transform: translateY(-5px);
    border-left-color: var(--clr-secondary);
  }
  
  .benefit__icon {
      color: var(--clr-primary);
      margin-bottom: var(--space-md); flex-shrink: 0;
  }
  .benefit__icon img { width: 48px; height: 48px; margin-inline: auto; }
  
  .benefit__title {
    font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--space-xs);
    color: var(--clr-grey-900);
  }
  .benefit__text { color: var(--clr-grey-600); font-size: var(--fs-md); flex-grow: 1; }
  
  @media (min-width: 640px) { .benefits__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .benefits__grid { grid-template-columns: repeat(3, 1fr); } }
  
  /* ============================
     Plans Section - UPDATED
     ============================ */
  .plans__tabs, .plans__tab { display: none; }
  
  .plans__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-xl);
      margin-bottom: var(--space-xl);
      justify-content:center;
  }
  @media (min-width: 768px) {
      .plans__grid {
          grid-template-columns: repeat(2, 1fr);
      }
  }
  @media (min-width: 1024px) {
      .plans__grid {
          grid-template-columns: repeat(4, 1fr);
      }
  }
  
  .plan {
    background-color: var(--clr-white);
    border-radius: var(--border-radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
    text-align: center;
    border: 1px solid var(--clr-grey-300);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .plan:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-xl);
  }
  
  .plan--featured {
      border: 2px solid var(--clr-secondary);
      z-index: 2;
  }
  .plan__featured-badge {
      position: absolute;
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gradient-accent);
      color: var(--clr-white);
      padding: var(--space-xs) var(--space-md);
      border-radius: var(--border-radius-full);
      font-size: var(--fs-sm);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      box-shadow: var(--shadow-md);
      white-space: nowrap;
  }
  
  
  .plan__title { font-size: var(--fs-xl); font-weight: 600; margin-bottom: var(--space-sm); padding-top: var(--space-md); }
  .plan__price { font-size: var(--fs-3xl); font-weight: 700; color: var(--clr-primary); margin: var(--space-sm) 0 var(--space-md) 0; }
  .plan__price span { font-size: var(--fs-4xl); }
  .plan__price::after { content: "/mes"; font-size: var(--fs-sm); font-weight: 400; color: var(--clr-grey-600); margin-left: var(--space-xs); display: inline; }
  
  .plan__price1 span { font-size: var(--fs-4xl); }
  .plan__price1::after { content: ""; font-size: var(--fs-sm); font-weight: 400; color: var(--clr-grey-600); margin-left: var(--space-xs); display: inline; }

  .plan__features { display: grid; gap: var(--space-sm); margin: var(--space-lg) 0; text-align: left; color: var(--clr-grey-700); flex-grow: 1; font-size: var(--fs-sm); }
  .plan__features li { display: flex; align-items: flex-start; gap: var(--space-sm); }
  .plan__feature-icon { color: var(--clr-accent); font-weight: 700; line-height: 1.5; }
  
  .plan__ideal { font-size: var(--fs-sm); color: var(--clr-grey-500); margin-bottom: var(--space-lg); font-style: italic; }
  .plan__cta { margin-top: auto; width: 100%; }
  
  .plans__compare { grid-column:1/-1; display:flex; justify-content:center; text-align: center; margin-top: var(--space-xl); }
  .plans__compare a { grid-column:1/-1; font-weight: 500; color: var(--clr-grey-600); }

  .plan--starter {
    border: 2px dashed var(--clr-accent-light);
    opacity: .95;
  }
  .plan--starter .plan__price span {
    font-size: 2.25rem;
  }

  
  /* ============================
     FAQ Section
     ============================ */
  .faq__accordion {
    max-width: 850px;
    margin-inline: auto;
    border: none;
    border-radius: 0;
    overflow: visible;
    background-color: transparent;
    box-shadow: none;
  }
  
  .faq__item {
    border: 1px solid var(--clr-grey-300);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-md);
    background-color: var(--clr-white);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
  }
  .faq__item:last-child { margin-bottom: 0; }
  .faq__item:hover { box-shadow: var(--shadow-lg); }
  
  .faq__question-heading { margin: 0; font: inherit; }
  
  .faq__question {
    width: 100%; padding: var(--space-lg); text-align: left;
    font-weight: 600; font-size: var(--fs-lg);
    background-color: transparent; border: none; cursor: pointer;
    position: relative; transition: background-color 0.2s ease;
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
    color: var(--clr-grey-800);
  }
  .faq__question:hover, .faq__question:focus {
      background-color: var(--clr-grey-100);
      color: var(--clr-secondary);
  }
  
  .faq__icon {
    flex-shrink: 0; width: 1.2em; height: 1.2em;
    transition: transform 0.3s ease; display: inline-block; position: relative;
}
.faq__icon::before, .faq__icon::after {
    content: ''; position: absolute; background-color: var(--clr-secondary);
    transition: transform 0.3s ease, opacity 0.3s ease; border-radius: 1px;
}
.faq__icon::before { top: 50%; left: 50%; width: 1em; height: 2px; transform: translate(-50%, -50%); }
.faq__icon::after { top: 50%; left: 50%; width: 2px; height: 1em; transform: translate(-50%, -50%); }

.faq-item--is-open .faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item--is-open .faq__icon::before {
    transform: translate(-50%, -50%) rotate(180deg);
    opacity: 0;
}

.faq__answer {
  padding: 0 var(--space-lg) 0 var(--space-lg);
  color: var(--clr-grey-700);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1), padding-top 0.5s ease, padding-bottom 0.5s ease;
  font-size: var(--fs-md);
}
.faq__answer p:last-child { margin-bottom: 0; }

.faq-item--is-open .faq__answer {
  max-height: 500px;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-lg);
}
  
  /* ============================
     Testimonials Section
     ============================ */
  .testimonials__grid { display: grid; gap: var(--space-xl); margin-bottom: var(--space-2xl); }
  
  .testimonial {
    background-color: var(--clr-white);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
    position: relative;
    border-top: none;
    border-left: 5px solid var(--clr-accent);
    display: flex; flex-direction: column;
  }
  .testimonial::before {
      content: '“'; position: absolute; top: var(--space-md); right: var(--space-lg);
      font-size: 5rem; color: var(--clr-primary); opacity: 0.05; line-height: 1;
      font-family: serif; z-index: 0;
  }
  
  .testimonial__photo {
    width: 70px; height: 70px;
    border-radius: 50%; object-fit: cover; margin-bottom: var(--space-md);
    border: 3px solid var(--clr-white); box-shadow: var(--shadow-sm);
    align-self: flex-start;
  }
  
  .testimonial__quote { font-style: italic; margin-bottom: var(--space-md); color: var(--clr-grey-800); position: relative; z-index: 1; flex-grow: 1; }
  .testimonial__quote p { margin-bottom: 0; }
  
  .testimonial__author { font-weight: 600; font-size: var(--fs-md); color: var(--clr-grey-900); margin-top: var(--space-md); text-align: left; }
  .testimonial__author cite { display: block; font-style: normal; font-weight: 400; font-size: var(--fs-sm); color: var(--clr-grey-600); }
  
  .testimonials__actions { text-align: center; }
  
  @media (min-width: 768px) { .testimonials__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .testimonials__grid { grid-template-columns: repeat(3, 1fr); } }
  
  
  /* ============================
     CTA Section (Replaces Trust/Team)
     ============================ */
  .cta-final__container {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-2xl);
      align-items: center;
  }
  @media (min-width: 992px) {
      .cta-final__container {
          grid-template-columns: 1fr 1fr;
          gap: var(--space-3xl);
      }
  }
  
  .cta-final__content { /* Text content styles */ }
  .cta-final__text {
      font-size: var(--fs-lg);
      color: var(--clr-grey-300);
      margin-bottom: var(--space-xl);
      max-width: 55ch;
  }
  
  .cta-final__visual {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .cta-final__visual img {
      border-radius: var(--border-radius-lg);
      box-shadow: var(--shadow-xl);
      max-width: 70%;
  }
  
  /* ============================
     Contact Section & Forms
     ============================ */
  .contact__subtitle { text-align: center; font-size: var(--fs-lg); color: var(--clr-grey-600); max-width: 65ch; margin-inline: auto; margin-bottom: var(--space-xl); }
  
  .contact__form {
      max-width: 800px;
      margin-inline: auto; background-color: var(--clr-white);
      padding: var(--space-xl); border-radius: var(--border-radius-lg);
      box-shadow: var(--shadow-xl);
      border: 1px solid var(--clr-grey-100);
  }
  @media (min-width: 768px) {
      .contact__form { padding: var(--space-2xl); }
  }
  
  .form__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-lg);
  }
  @media (min-width: 768px) {
      .form__grid {
          grid-template-columns: 1fr 1fr;
      }
      .form__group--full-width {
          grid-column: 1 / -1;
      }
  }
  
  
  .form__group { margin-bottom: 0; position: relative; }
  .form__label { display: block; font-weight: 600; margin-bottom: var(--space-sm); color: var(--clr-grey-700); font-size: var(--fs-sm); }
  
  .form__input, .form__select, .form__textarea {
    width: 100%; padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--clr-grey-300); border-radius: var(--border-radius-md);
    font-family: var(--ff-body); font-size: var(--fs-md);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--clr-white); color: var(--clr-grey-900);
  }
  .form__input:focus, .form__select:focus, .form__textarea:focus {
    outline: none; border-color: var(--clr-secondary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
  }
  .form__input::placeholder, .form__textarea::placeholder { color: var(--clr-grey-500); opacity: 1; }
  .form__select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right var(--space-md) center;
      background-size: 1.2em 1.2em; padding-right: calc(var(--space-md) * 2.5);
  }
  .form__select:required:invalid { color: var(--clr-grey-500); }
  .form__select option[value=""] { color: var(--clr-grey-500); }
  .form__select option { color: var(--clr-grey-900); }
  
  
  .form__textarea { resize: vertical; min-height: 120px; }
  
  .form__checkbox { display: flex; align-items: flex-start; gap: var(--space-sm); }
  .form__checkbox-input {
    flex-shrink: 0; appearance: none; width: 1.15em; height: 1.15em;
    border: 1px solid var(--clr-grey-500); border-radius: var(--border-radius-sm);
    margin-top: 0.15em; cursor: pointer; position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
  .form__checkbox-input:checked { background-color: var(--clr-secondary); border-color: var(--clr-secondary); }
  .form__checkbox-input:checked::before {
      content: '✔'; position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%); color: var(--clr-white);
      font-size: 0.8em; font-weight: bold;
  }
  .form__checkbox-input:focus-visible { outline: 2px solid var(--clr-secondary); outline-offset: 2px; }
  .form__checkbox-label { font-weight: 400; color: var(--clr-grey-700); font-size: var(--fs-sm); line-height: 1.5; }
  .form__checkbox-label a { color: var(--clr-secondary); font-weight: 500; }
  
  .form__input.invalid, .form__select.invalid, .form__textarea.invalid { border-color: var(--clr-error) !important; }
  .form__input.invalid:focus, .form__select.invalid:focus, .form__textarea.invalid:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important; }
  .form__checkbox-input.invalid { border-color: var(--clr-error) !important; }
  .form__checkbox-input.invalid:focus-visible { outline-color: var(--clr-error); }
  
  .form__error-message { color: var(--clr-error); font-size: var(--fs-sm); margin-top: var(--space-xs); display: none; font-weight: 500; }
  .form__group.has-error .form__error-message { display: block; }
  
  .form__response { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--border-radius-md); font-size: var(--fs-sm); display: none; text-align: center; font-weight: 500; }
  .form__response.success { background-color: rgba(16, 185, 129, 0.1); color: var(--clr-success); border: 1px solid var(--clr-success); display: block; }
  .form__response.error { background-color: rgba(239, 68, 68, 0.1); color: var(--clr-error); border: 1px solid var(--clr-error); display: block; }
  
  .form__submit { margin-top: var(--space-md); }
  
  /* ============================
     Footer
     ============================ */
  .footer {
    background-color: var(--clr-grey-900);
    color: var(--clr-grey-300);
    padding: var(--space-3xl) 0 var(--space-md);
    font-size: var(--fs-sm);
    border-top: 5px solid var(--clr-primary);
  }
  
  .footer a { color: var(--clr-accent); }
  .footer a:hover, .footer a:focus { color: var(--clr-white); }
  
  .footer__grid {
    display: grid;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  .footer__info .footer__logo {
      color: var(--clr-white); font-size: var(--fs-xl); margin-bottom: var(--space-md);
      display: inline-flex; align-items: center; gap: var(--space-sm);
  }
  .footer__info .footer__logo:hover { color: var(--clr-accent); }
  .footer__info p, .footer__info address { margin-bottom: var(--space-sm); font-style: normal; line-height: 1.6; }
  
  .footer__nav h4, .footer__legal-social h4 { font-size: var(--fs-lg); color: var(--clr-white); margin-bottom: var(--space-md); font-weight: 600; }
  .footer__nav ul, .footer__legal-social ul { display: grid; gap: var(--space-sm); }
  .footer__nav a, .footer__legal-social a { color: var(--clr-grey-300); display: inline-block; padding: var(--space-xs) 0; }
  .footer__nav a:hover, .footer__nav a:focus,
  .footer__legal-social a:hover, .footer__legal-social a:focus { color: var(--clr-white); }
  
  .footer__legal-social {
      display: flex;
      flex-direction: column;
      gap: var(--space-xl);
  }
  
  .footer__social { margin-top: 0; }
  .footer__social h4 { font-size: var(--fs-lg); margin-bottom: var(--space-sm); }
  .footer__social a { display: inline-block; margin-right: var(--space-md); color: var(--clr-grey-300); transition: color 0.3s ease, transform 0.3s ease; }
  .footer__social a:hover, .footer__social a:focus { color: var(--clr-white); transform: scale(1.1); }
  .footer__social svg { width: 24px; height: 24px; fill: currentColor; vertical-align: middle; }
  
  .footer__copy {
      border-top: 1px solid var(--clr-grey-700);
      padding-top: var(--space-lg);
      text-align: center;
      font-size: var(--fs-sm);
      color: var(--clr-grey-500);
  }
  .footer__copy p { margin-bottom: 0; }
  
  @media (max-width: 767.98px) {
      .footer__grid { text-align: center; }
      .footer__info .footer__logo { justify-content: center; }
      .footer__social { text-align: center; }
      .footer__social a { margin: 0 var(--space-sm); }
  }
  
  /* ============================
     Modal Styles
     ============================ */
  .modal {
      position: fixed; inset: 0; z-index: 2000; display: flex;
      align-items: center; justify-content: center; padding: var(--space-md);
      opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s 0.4s;
  }
  .modal[aria-hidden="false"] { opacity: 1; visibility: visible; transition-delay: 0s; }
  .modal__overlay { position: absolute; inset: 0; background-color: rgba(15, 23, 42, 0.85); cursor: pointer; }
  .modal__content {
      position: relative; background-color: var(--clr-white); border-radius: var(--border-radius-lg);
      padding: var(--space-xl); max-width: 600px; width: 100%; box-shadow: var(--shadow-xl);
      z-index: 2001; transform: scale(0.9) translateY(10px);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; opacity: 0;
  }
  .modal[aria-hidden="false"] .modal__content { transform: scale(1) translateY(0); opacity: 1; }
  .modal__close {
      position: absolute; top: var(--space-md); right: var(--space-md); background: transparent;
      border: none; font-size: 1.8rem; font-weight: 300; color: var(--clr-grey-500);
      cursor: pointer; line-height: 1; padding: var(--space-xs); transition: color 0.2s ease, transform 0.2s ease;
  }
  .modal__close:hover, .modal__close:focus { color: var(--clr-grey-900); transform: rotate(90deg); }
  .modal__title { font-size: var(--fs-2xl); margin-bottom: var(--space-md); color: var(--clr-grey-900); }
  .modal__content p { color: var(--clr-grey-700); margin-bottom: var(--space-lg); }
  .modal__content p small { display: block; margin-top: var(--space-md); color: var(--clr-grey-500); }
  .modal__action { margin-top: var(--space-lg); text-align: center; }
  
  /* ============================
     Animations (Scroll-based)
     ============================ */
  .animate-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
      will-change: opacity, transform;
  }
  .animate-on-scroll.is-visible {
      opacity: 1;
      transform: translateY(0);
  }
  .animate-delay-1 { transition-delay: 0.1s; }
  .animate-delay-2 { transition-delay: 0.2s; }
  .animate-delay-3 { transition-delay: 0.3s; }

/* ===================================================
   INICIO: AJUSTES PARA MEJORAR RESPONSIVE EN MÓVILES
   =================================================== */

@media (max-width: 768px) {

    /* -- 1. Ajustes Generales de Tipografía y Espaciado -- */
    :root {
        /* Reducir ligeramente los espacios para compactar de forma elegante */
        --space-xl: 1.5rem;
        --space-2xl: 2.5rem;
        --space-3xl: 3rem;
    }

    .section {
        padding: var(--space-3xl) 0;
    }

    /* -- 2. Header y Navegación Móvil -- */
    .header__logo img {
        max-width: 220px; /* Reducir tamaño del logo en móvil */
    }

    .header__container {
        /* Asegurar padding en el contenedor del header. 
           Usamos !important para garantizar que sobreescriba otros estilos si es necesario,
           aunque es mejor evitarlo si es posible. En este caso, es para asegurar el cambio. */
        padding-inline: 1rem !important;
    }
    
    /* Hacer visible el CTA en el menú desplegable */
    .header__nav.is-open .header__cta {
        display: block;
        margin-top: var(--space-lg);
        text-align: center;
        padding: var(--space-sm) var(--space-md);
        font-size: var(--fs-sm);
    }


    /* -- 3. Sección Hero -- */
    .hero__title {
        /* Usar clamp para un tamaño de fuente fluido y controlado */
        font-size: clamp(2.25rem, 10vw, 3rem);
        line-height: 1.2; /* Reducir interlineado */
    }

    .hero__subtitle {
        font-size: var(--fs-md);
    }

    .hero__actions {
        flex-direction: column; /* Apilar botones verticalmente */
        align-items: center; /* Centrar botones apilados */
        gap: var(--space-md);
    }

    .hero__actions .btn {
        width: 100%;
        max-width: 320px; /* Evitar que los botones sean excesivamente anchos */
    }
    
    .hero__visual {
        margin-top: var(--space-xl);
    }

    /* -- 4. Títulos de Sección -- */
    .section__title {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }
    
    .section__title::after {
        width: 80px;
        height: 4px;
    }

    /* -- 5. Tarjetas de Planes y Beneficios -- */
    .plans__grid, .benefits__grid, .steps__grid {
        gap: var(--space-lg); /* Espacio consistente entre tarjetas */
    }
    
    .plan--featured {
      transform: scale(1); /* Evitar que el plan destacado se salga del layout */
    }

}

/* ===================================================
   FIN: AJUSTES PARA MEJORAR RESPONSIVE EN MÓVILES
   =================================================== */