/* =============================================
       Fluid / Responsive Typography
       ============================================= */

    /* Base html font-size scales with viewport width for fluid sizing.
       320px → 14px,  768px → 15px,  1280px → 16px                    */
    html {
      font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
    }

    /* Hero headline: scales down gracefully on small screens */
    .hero-headline,
    header h1 {
      font-size: clamp(1.75rem, 1.2rem + 3vw, 3.75rem) !important;
      line-height: 1.15;
    }

    /* Section headings (h2) */
    section h2 {
      font-size: clamp(1.5rem, 1rem + 2.5vw, 2.75rem) !important;
      line-height: 1.2;
    }

    /* Sub-headings (h3 inside cards / steps) */
    section h3 {
      font-size: clamp(1rem, 0.85rem + 0.8vw, 1.35rem) !important;
    }

    /* Body / paragraph text */
    header p,
    section p {
      font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.25rem);
    }

    /* Small labels / badges */
    .badge-pulse span,
    section .text-sm {
      font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
    }

    /* Pricing amounts */
    section .text-4xl {
      font-size: clamp(1.75rem, 1.3rem + 2vw, 2.25rem) !important;
    }

    /* Counter numbers in the hero demo card */
    [data-count] {
      font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem) !important;
    }

    /* CTA buttons — fluid padding & font */
    .glow,
    a[href*="app"] {
      font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.125rem);
    }

    /* On mobile / touch: always show bento card descriptions (no hover) */
    @media (hover: none), (max-width: 767px) {
      .bento-glow-card .bento-desc {
        max-height: 200px;
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* =============================================
       Animations
       ============================================= */
    .animate-float { animation: float 6s ease-in-out infinite; }
    .animate-float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
    }
    .gradient-text {
      background: linear-gradient(135deg, #2563EB 0%, #6366F1 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-gradient {
      background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(37, 99, 235, 0.12), transparent);
    }
    .card-hover:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    }
    .pulse-ring {
      animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulse-ring {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    /* FAQ accordion animation */
    details[open] summary ~ * {
      animation: faq-open 0.3s ease-in-out;
    }
    @keyframes faq-open {
      from { opacity: 0; transform: translateY(-8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Small cards for instrucciones */
    .small-card {
      border: 0.5pt solid #e5e7eb;
      border-radius: 3pt;
      padding: 6pt 8pt;
      background: #fff;
      margin-bottom: 8pt;
    }
    .small-card .label {
      font-size: 6pt;
      text-transform: uppercase;
      letter-spacing: 0.4pt;
      font-weight: 700;
      color: #888;
      margin-bottom: 1pt;
    }
    .small-card .value {
      font-size: 11pt;
      font-weight: 700;
      color: #111;
    }

    /* =============================================
       Dynamic Bento — hover-reveal cards
       ============================================= */

    /* Cursor-glow border: a pseudo-element mask that lights up near the cursor */
    .bento-glow-card {
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.35s ease, transform 0.35s ease;
    }
    /* The glowing border layer */
    .bento-glow-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      /* A radial spotlight that tracks --mouse-x / --mouse-y */
      background: radial-gradient(
        280px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(99, 102, 241, 0.22),
        transparent 70%
      );
      opacity: 0;
      transition: opacity 0.35s ease;
      pointer-events: none;
      z-index: 0;
    }
    .bento-glow-card:hover::after {
      opacity: 1;
    }
    /* Ensure children sit above the glow layer */
    .bento-glow-card > * {
      position: relative;
      z-index: 1;
    }

    /* Icon wrapper — starts centered, slides up on hover */
    .bento-glow-card .bento-icon {
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), margin-bottom 0.4s ease;
      will-change: transform;
    }
    .bento-glow-card:hover .bento-icon {
      transform: translateY(-6px);
    }

    /* Description — hidden by default, fades + slides in on hover */
    .bento-glow-card .bento-desc {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateY(10px);
      transition:
        max-height 0.45s ease,
        opacity 0.35s ease 0.08s,
        transform 0.35s ease 0.08s;
    }
    .bento-glow-card:hover .bento-desc {
      max-height: 160px;   /* generous upper bound */
      opacity: 1;
      transform: translateY(0);
    }

    /* Wide cards keep their horizontal layout; icon still shifts up slightly */
    .bento-glow-card.bento-item-wide .bento-icon {
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .bento-glow-card.bento-item-wide:hover .bento-icon {
      transform: translateY(-4px);
    }

    /* Subtle border glow on hover (complements the radial overlay) */
    .bento-glow-card:hover {
      box-shadow:
        0 0 0 1.5px rgba(99, 102, 241, 0.35),
        0 20px 40px -12px rgba(99, 102, 241, 0.12),
        0 8px 16px -8px rgba(0, 0, 0, 0.08);
    }