/* ==================== DESIGN SYSTEM - GIGSTACK ==================== */
    /*
     * COLORES PERMITIDOS:
     *
     * Texto (escala de grises):
     * --primary-text: #0f172a (headings, títulos)
     * --secondary-text: #6b7280 (subtextos, descripciones)
     * --body-text: #374151 (párrafos)
     *
     * Acentos (solo estos 3):
     * --accent-light: #cef17b (verde lima claro)
     * --accent-dark: #044737 (verde oscuro)
     * --accent-soft: #ceedb2 (verde suave)
     *
     * FONDOS PERMITIDOS (solo estos 3):
     * --bg-white: #ffffff (blanco)
     * --bg-gray: #fafafa (gris claro)
     * --bg-dark: #141414 (oscuro)
     * --border-light: #e5e5e5 (bordes claros)
     * --border-gray: #f3f4f6 (bordes muy claros)
     *
     * TIPOGRAFÍA:
     * - Headings: Geist, sans-serif (font-weight: 500-600)
     * - Body: Inter, sans-serif (font-weight: 400)
     * - Logo: Russo One, sans-serif
     * - Tags/Badges: Geist Mono, monospace
     *
     * TAMAÑOS DE TEXTO:
     * - Hero H1 (centrado): 65px, line-height: 1.1, letter-spacing: -0.02em, color: #0f172a
     * - Hero H1 (lado/2 columnas): 55px, line-height: 1.1, letter-spacing: -0.02em, color: #0f172a
     * - Section H2: 48px, line-height: 1.1, color: #0f172a
     *   Clase: .h3-heading-17.hero-heading con style=""
     *   Tag arriba: .hero-tag (fondo claro) o .hero-tag-dark (fondo oscuro)
     * - Card H3/H4: 20-24px, font-weight: 600, color: #0f172a
     * - Subheadline: 18px, line-height: 1.5, letter-spacing: -0.4px, color: #6b7280
     * - Body text: 15-16px, line-height: 1.6, color: #374151
     * - Small text: 14px, color: #6b7280
     *
     * ==================== BOTONES (DESIGN SYSTEM) ====================
     *
     * BASE: .gs-btn (siempre requerido)
     *
     * PRIMARY BUTTON (Dark):
     * - Clase: .gs-btn .gs-btn-primary
     * - Background: #1a1a1a, hover: #333
     * - Color: #fff
     * - Uso: <a href="URL" class="gs-btn gs-btn-primary">Texto</a>
     *
     * SECONDARY BUTTON (Light with border):
     * - Clase: .gs-btn .gs-btn-secondary
     * - Background: #fff, hover: #fafafa
     * - Color: #1a1a1a
     * - Border: 1px solid #e0e0e0
     * - Uso: <a href="URL" class="gs-btn gs-btn-secondary">Texto</a>
     *
     * WHITE BUTTON (For dark backgrounds):
     * - Clase: .gs-btn .gs-btn-white
     * - Background: #fff, hover: #f5f5f5
     * - Color: #1a1a1a
     * - Uso: <a href="URL" class="gs-btn gs-btn-white">Texto</a>
     *
     * OUTLINE BUTTON:
     * - Clase: .gs-btn .gs-btn-outline
     * - Background: transparent, hover: #1a1a1a
     * - Color: #1a1a1a, hover: #fff
     * - Border: 1.5px solid #1a1a1a
     * - Uso: <a href="URL" class="gs-btn gs-btn-outline">Texto</a>
     *
     * SIZES: .gs-btn-sm (32px) | default (40px) | .gs-btn-lg (48px)
     *
     * WRAPPER PARA 2 BOTONES:
     * - Clase: .spacer-large ._2-buttons
     * - Flex row, gap: 16px, centered
     * - Uso: <div class="spacer-large _2-buttons">...botones...</div>
     *
     * ESPACIADO:
     * - Section padding: 100px vertical
     * - Container max-width: 1200px
     * - Card border-radius: 16-24px
     */

    /* Base Font */
    * {
      font-family: 'Inter', sans-serif;
    }

    .text-block-100 {
      font-family: 'Russo One', sans-serif !important;
    }

    /* Geist font for headings and their children */
    .heading-style-h1,
    .heading-style-h1 *,
    .h3-heading-17,
    .h3-heading-17 *,
    .h2-heading-33,
    .h2-heading-33 *,
    .h2-heading-2,
    .h2-heading-2 *,
    .h4-heading-25,
    .h4-heading-25 *,
    .h4-heading-18,
    .h4-heading-18 *,
    .h6-heading-16,
    .h6-heading-16 *,
    .ps-title,
    .ps-title *,
    .benefit-title,
    .benefit-title *,
    .hero-heading,
    .hero-heading *,
    .footer_heading,
    .footer_heading *,
    .login-head,
    .login-head *,
    h1,
    h1 *,
    h2,
    h2 *,
    h3,
    h3 *,
    h4,
    h4 *,
    h5,
    h5 *,
    h6,
    h6 * {
      font-family: 'Geist', sans-serif !important;
    }

    /* Hero Heading */
    .heading-style-h1.hero-heading {
      font-size: 48px !important;
      font-weight: 500 !important;
      line-height: 1.1 !important;
      letter-spacing: -0.02em !important;
      color: #0f172a !important;
    }

    /* Section Heading */
    .section-heading {
      font-size: 48px;
      font-weight: 500;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: #0f172a;
      margin-bottom: 16px;
    }

    /* Subheadline / Body Large */
    .text-size-medium-3 {
      font-size: 18px;
      line-height: 1.5;
      letter-spacing: -0.4px;
      color: #6b7280;
    }

    /* Scroll Animations */
    .fade-up {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .fade-up-delay-1 {
      transition-delay: 0.1s;
    }

    .fade-up-delay-2 {
      transition-delay: 0.2s;
    }

    .fade-up-delay-3 {
      transition-delay: 0.3s;
    }

    /* Section Styles */
    .mexico-section {
      padding: 100px 0;
    }

    .mexico-section.gray-bg {
      background: #fafafa;
    }

    .mexico-section.dark-bg {
      background: #141414;
      color: #fff;
    }

    .mexico-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* Dark Section Text */
    .dark-bg .h3-heading-17,
    .dark-bg .section-heading {
      color: #fff;
    }

    .dark-bg .text-size-medium-3 {
      color: rgba(255, 255, 255, 0.7);
    }

    /* Benefits Grid Dark */
    .benefits-grid-dark {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      margin-top: 60px;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }

    @media (max-width: 900px) {
      .benefits-grid-dark {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .benefits-grid-dark {
        grid-template-columns: 1fr;
      }
    }

    .benefit-card-dark {
      text-align: left;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      padding: 28px;
    }

    .benefit-icon-dark {
      width: 48px;
      height: 48px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      color: #fff;
    }

    .benefit-icon-dark svg {
      width: 24px;
      height: 24px;
    }

    .benefit-card-dark h4 {
      font-size: 17px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 10px;
    }

    .benefit-card-dark p {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.55);
      line-height: 1.6;
    }

    /* Features List */
    .features-list {
      list-style: none;
      padding: 0;
      margin: 24px 0 0;
    }

    .features-list li {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 14px 0;
      border-bottom: 1px solid #f3f4f6;
    }

    .features-list li:last-child {
      border-bottom: none;
    }

    .features-list .check-black {
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
      color: #0f172a;
    }

    .features-list .check-black svg {
      width: 20px;
      height: 20px;
    }

    .features-list li span {
      font-size: 15px;
      color: #374151;
    }

    /* Section Header */
    .section-header {
      text-align: center;
      max-width: 700px;
      margin: 0 auto;
    }

    .section-header.left {
      text-align: left;
      max-width: none;
    }

    /* ==================== HERO ANIMATION ==================== */
    .hero-animation-container {
      background: #fafafa;
      border-radius: 24px;
      padding: 24px;
      position: relative;
      min-height: 380px;
      border: 1px solid #e5e5e5;
    }

    .hero-tx-list {
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }

    .hero-tx-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid #f3f4f6;
      font-size: 14px;
      font-weight: 600;
      color: #0f172a;
    }

    .hero-tx-live {
      font-size: 12px;
      font-weight: 500;
      color: #044737;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }
    }

    .hero-tx-scroll {
      max-height: 280px;
      overflow: hidden;
    }

    .hero-tx-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 20px;
      border-bottom: 1px solid #f9fafb;
      animation: slideIn 0.5s ease forwards;
      opacity: 0;
      transform: translateY(-10px);
    }

    .hero-tx-item:nth-child(1) {
      animation-delay: 0.1s;
    }

    .hero-tx-item:nth-child(2) {
      animation-delay: 0.3s;
    }

    .hero-tx-item:nth-child(3) {
      animation-delay: 0.5s;
    }

    .hero-tx-item:nth-child(4) {
      animation-delay: 0.7s;
    }

    @keyframes slideIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .hero-tx-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .hero-tx-icon.stripe {
      background: #f3f4f6;
      color: #1f2937;
    }

    .hero-tx-icon.conekta {
      background: #f3f4f6;
      color: #1f2937;
    }

    .hero-tx-icon.spei {
      background: #f3f4f6;
      color: #1f2937;
    }

    .hero-tx-icon.paypal {
      background: #f3f4f6;
      color: #1f2937;
    }

    .hero-tx-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .hero-tx-name {
      font-size: 13px;
      font-weight: 500;
      color: #0f172a;
    }

    .hero-tx-amount {
      font-size: 12px;
      color: #6b7280;
    }

    .hero-tx-status {
      font-size: 11px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 100px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .hero-tx-status.pending {
      background: #f5f5f5;
      color: #6b7280;
    }

    .hero-tx-status.success {
      background: #cef17b;
      color: #044737;
    }

    /* Toast notification */
    .hero-complement-toast {
      position: absolute;
      bottom: 40px;
      right: -10px;
      background: #fff;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      animation: toastSlide 0.5s ease 1.2s forwards, toastPulse 2s ease 1.7s infinite;
      opacity: 0;
      transform: translateX(20px);
    }

    @keyframes toastSlide {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes toastPulse {

      0%,
      100% {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      }

      50% {
        box-shadow: 0 8px 30px rgba(4, 71, 55, 0.15);
      }
    }

    .toast-icon {
      width: 40px;
      height: 40px;
      background: #ceedb2;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .toast-content {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .toast-title {
      font-size: 13px;
      font-weight: 600;
      color: #0f172a;
    }

    .toast-subtitle {
      font-size: 11px;
      color: #6b7280;
    }

    /* Responsive hero animation */
    @media (max-width: 991px) {
      .hero-animation-container {
        min-height: 320px;
      }

      .hero-complement-toast {
        right: 10px;
        bottom: 20px;
      }
    }

    /* ==================== FEATURE CARDS WITH ANIMATIONS ==================== */
    .feature-card {
      background: #fff;
      border-radius: 24px;
      padding: 0;
      overflow: hidden;
      border: 1px solid #e5e7eb;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    }

    .feature-card-visual {
      background: #fff;
      padding: 0;
      min-height: 220px;
      display: flex;
      align-items: stretch;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .feature-card-content {
      padding: 28px 32px;
    }

    .feature-card-content h3 {
      font-size: 20px;
      font-weight: 600;
      color: #0f172a;
      margin-bottom: 8px;
    }

    .feature-card-content p {
      font-size: 15px;
      color: #6b7280;
      line-height: 1.6;
    }

    /* Chart Card Styles */
    .chart-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      width: 100%;
      max-width: 320px;
      overflow: hidden;
    }

    .chart-header {
      padding: 16px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f3f4f6;
    }

    .chart-title {
      font-size: 14px;
      font-weight: 600;
      color: #0f172a;
    }

    .chart-badge {
      font-size: 11px;
      padding: 4px 10px;
      border-radius: 100px;
      background: #f5f5f5;
      color: #6b7280;
    }

    .chart-body {
      padding: 20px;
    }

    /* Bar Chart */
    .bar-chart {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      height: 120px;
      gap: 8px;
      padding-top: 10px;
    }

    .bar-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }

    .bar {
      width: 100%;
      max-width: 32px;
      border-radius: 4px 4px 0 0;
      opacity: 0;
      transform: scaleY(0);
      transform-origin: bottom;
      animation: barGrow 0.6s ease forwards;
    }

    .bar-group:nth-child(1) .bar {
      animation-delay: 0.1s;
    }

    .bar-group:nth-child(2) .bar {
      animation-delay: 0.2s;
    }

    .bar-group:nth-child(3) .bar {
      animation-delay: 0.3s;
    }

    .bar-group:nth-child(4) .bar {
      animation-delay: 0.4s;
    }

    .bar-group:nth-child(5) .bar {
      animation-delay: 0.5s;
    }

    .bar-group:nth-child(6) .bar {
      animation-delay: 0.6s;
    }

    .bar-group:nth-child(7) .bar {
      animation-delay: 0.7s;
    }

    @keyframes barGrow {
      to {
        opacity: 1;
        transform: scaleY(1);
      }
    }

    .bar-label {
      font-size: 10px;
      color: #9ca3af;
      margin-top: 8px;
    }

    /* Integration Circle */
    .integration-circle {
      position: relative;
      width: 200px;
      height: 200px;
    }

    .integration-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 56px;
      height: 56px;
      background: #cef17b;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      box-shadow: 0 4px 20px rgba(206, 241, 123, 0.4);
    }

    .integration-orbit {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 160px;
      height: 160px;
      border: 1px dashed #e5e5e5;
      border-radius: 50%;
      animation: orbitRotate 20s linear infinite;
    }

    @keyframes orbitRotate {
      from {
        transform: translate(-50%, -50%) rotate(0deg);
      }

      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    .integration-icon {
      position: absolute;
      width: 40px;
      height: 40px;
      background: #fff;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
      opacity: 0;
      animation: iconPop 0.4s ease forwards;
    }

    .integration-icon:nth-child(1) {
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      animation-delay: 0.1s;
    }

    .integration-icon:nth-child(2) {
      top: 20%;
      right: -10px;
      animation-delay: 0.2s;
    }

    .integration-icon:nth-child(3) {
      bottom: 20%;
      right: -10px;
      animation-delay: 0.3s;
    }

    .integration-icon:nth-child(4) {
      bottom: -20px;
      left: 50%;
      transform: translateX(-50%);
      animation-delay: 0.4s;
    }

    .integration-icon:nth-child(5) {
      bottom: 20%;
      left: -10px;
      animation-delay: 0.5s;
    }

    .integration-icon:nth-child(6) {
      top: 20%;
      left: -10px;
      animation-delay: 0.6s;
    }

    @keyframes iconPop {
      from {
        opacity: 0;
        transform: scale(0.5);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .integration-icon:nth-child(1) {
      animation: iconPop1 0.4s ease 0.1s forwards;
    }

    @keyframes iconPop1 {
      from {
        opacity: 0;
        transform: translateX(-50%) scale(0.5);
      }

      to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
      }
    }

    .integration-icon:nth-child(4) {
      animation: iconPop1 0.4s ease 0.4s forwards;
    }

    /* Chart Line Animation */
    .chart-line-animated {
      stroke-dasharray: 600;
      stroke-dashoffset: 600;
      transition: stroke-dashoffset 1.5s ease-out;
    }

    .chart-area-animated {
      opacity: 0;
      transition: opacity 1s ease-out 0.5s;
    }

    .chart-dot-animated {
      opacity: 0;
      transform-origin: center;
      transform: scale(0);
      transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }

    .chart-dot-animated:nth-child(1) {
      transition-delay: 0.8s;
    }

    .chart-dot-animated:nth-child(2) {
      transition-delay: 1s;
    }

    .chart-dot-animated:nth-child(3) {
      transition-delay: 1.2s;
    }

    .chart-container.visible .chart-line-animated {
      stroke-dashoffset: 0;
    }

    .chart-container.visible .chart-area-animated {
      opacity: 0.5;
    }

    .chart-container.visible .chart-dot-animated {
      opacity: 1;
      transform: scale(1);
    }

    /* Steps Animation */
    .steps-container .step-item {
      opacity: 0;
      transform: translateY(15px);
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

    .steps-container .step-connector {
      opacity: 0;
      transition: opacity 0.4s ease-out;
    }

    .steps-container.visible .step-item:nth-child(1) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0s;
    }

    .steps-container.visible .step-connector:nth-child(2) {
      opacity: 1;
      transition-delay: 0.3s;
    }

    .steps-container.visible .step-item:nth-child(3) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.5s;
    }

    .steps-container.visible .step-connector:nth-child(4) {
      opacity: 1;
      transition-delay: 0.8s;
    }

    .steps-container.visible .step-item:nth-child(5) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 1s;
    }

    /* Carousel Animations */
    .carousel-row-right {
      animation: floatRight 6s ease-in-out infinite;
    }

    .carousel-row-left {
      animation: floatLeft 6s ease-in-out infinite;
    }

    @keyframes floatRight {

      0%,
      100% {
        transform: translateX(-8px);
      }

      50% {
        transform: translateX(8px);
      }
    }

    @keyframes floatLeft {

      0%,
      100% {
        transform: translateX(8px);
      }

      50% {
        transform: translateX(-8px);
      }
    }

    /* Hero Transactions Carousel */
    @keyframes scrollTxList {
      0% {
        transform: translateY(0);
      }

      100% {
        transform: translateY(-50%);
      }
    }

    /* Bar Chart Animation */
    .bar-chart-container .bar-animated {
      transform-origin: bottom;
      transform: scaleY(0);
      transition: transform 0.6s ease-out;
    }

    .bar-chart-container.visible .bar-animated:nth-child(1) {
      transform: scaleY(1);
      transition-delay: 0.1s;
    }

    .bar-chart-container.visible .bar-animated:nth-child(2) {
      transform: scaleY(1);
      transition-delay: 0.2s;
    }

    .bar-chart-container.visible .bar-animated:nth-child(3) {
      transform: scaleY(1);
      transition-delay: 0.3s;
    }

    .bar-chart-container.visible .bar-animated:nth-child(4) {
      transform: scaleY(1);
      transition-delay: 0.4s;
    }

    .bar-chart-container.visible .bar-animated:nth-child(5) {
      transform: scaleY(1);
      transition-delay: 0.5s;
    }

    .bar-chart-container.visible .bar-animated:nth-child(6) {
      transform: scaleY(1);
      transition-delay: 0.6s;
    }

    /* Portal Autofactura Animation */
    .portal-form-container .form-field {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }

    .portal-form-container.visible .form-field:nth-child(1) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.2s;
    }

    .portal-form-container.visible .form-field:nth-child(2) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.4s;
    }

    .portal-form-container.visible .form-field:nth-child(3) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.6s;
    }

    /* Calendar Visual */
    .calendar-visual {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      width: 100%;
      max-width: 280px;
      overflow: hidden;
    }

    .calendar-header {
      background: #0f172a;
      color: #fff;
      padding: 14px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .calendar-month {
      font-size: 14px;
      font-weight: 600;
    }

    .calendar-nav {
      display: flex;
      gap: 8px;
    }

    .calendar-nav span {
      width: 24px;
      height: 24px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      padding: 16px;
    }

    .cal-day {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #6b7280;
      border-radius: 8px;
      position: relative;
    }

    .cal-day.head {
      font-size: 10px;
      font-weight: 600;
      color: #9ca3af;
    }

    .cal-day.highlight {
      background: #cef17b;
      color: #044737;
      font-weight: 600;
    }

    .cal-day.highlight::after {
      content: '';
      position: absolute;
      bottom: 2px;
      width: 4px;
      height: 4px;
      background: #044737;
      border-radius: 50%;
    }

    /* Portal Visual */
    .portal-visual {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      width: 100%;
      max-width: 300px;
      overflow: hidden;
    }

    .portal-header {
      padding: 14px 20px;
      border-bottom: 1px solid #f3f4f6;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .portal-icon {
      width: 32px;
      height: 32px;
      background: #ceedb2;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .portal-title {
      font-size: 13px;
      font-weight: 600;
      color: #0f172a;
    }

    .portal-body {
      padding: 20px;
    }

    .portal-field {
      margin-bottom: 14px;
    }

    .portal-label {
      font-size: 10px;
      color: #9ca3af;
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .portal-input {
      background: #f5f5f5;
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 13px;
      color: #0f172a;
      font-weight: 500;
      position: relative;
      overflow: hidden;
    }

    .portal-input::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      background: #f5f5f5;
      animation: typeReveal 0.8s ease forwards;
    }

    .portal-field:nth-child(1) .portal-input::after {
      animation-delay: 0.2s;
    }

    .portal-field:nth-child(2) .portal-input::after {
      animation-delay: 0.5s;
    }

    .portal-field:nth-child(3) .portal-input::after {
      animation-delay: 0.8s;
    }

    @keyframes typeReveal {
      to {
        width: 0;
      }
    }

    .portal-btn {
      background: #0f172a;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 12px;
      width: 100%;
      font-size: 13px;
      font-weight: 600;
      margin-top: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      opacity: 0;
      animation: fadeUp 0.4s ease 1.2s forwards;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Responsive Feature Cards */
    @media (max-width: 991px) {
      .feature-card-visual {
        min-height: 200px;
        padding: 24px 20px;
      }

      .integration-circle {
        width: 160px !important;
        height: 160px !important;
      }

      .integration-orbit {
        width: 130px !important;
        height: 130px !important;
      }

      .integration-icon {
        width: 32px;
        height: 32px;
      }
    }

    @media (max-width: 768px) {

      .chart-card,
      .calendar-visual,
      .portal-visual {
        max-width: 260px;
      }
    }

    /* Animation for fadeSlideIn used in notifications */
    @keyframes fadeSlideIn {
      from {
        opacity: 0;
        transform: translateX(-10px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* ==================== CSS VARIABLES ==================== */
    :root {
      /* Colores de texto */
      --primary-text: #0f172a;
      --secondary-text: #6b7280;
      --body-text: #374151;

      /* Colores de acento (solo estos 3 permitidos) */
      --accent-light: #cef17b;
      /* verde lima claro */
      --accent-dark: #044737;
      /* verde oscuro */
      --accent-soft: #ceedb2;
      /* verde suave */

      /* Fondos */
      --bg-white: #ffffff;
      --bg-gray: #fafafa;
      --bg-dark: #141414;

      /* Bordes */
      --border-light: #e5e5e5;
      --border-gray: #f3f4f6;

      /* Tipografía */
      --font-heading: 'Geist', sans-serif;
      --font-body: 'Inter', sans-serif;
      --font-logo: 'Russo One', sans-serif;
      --font-mono: 'Geist Mono', monospace;
    }

    /* ==================== FAQ STYLES ==================== */
    .faq-icon::before,
    .faq-icon::after {
      content: '';
      position: absolute;
      background: #666;
      border-radius: 2px;
      transition: transform 0.3s ease;
    }

    .faq-icon::before {
      width: 12px;
      height: 2px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .faq-icon::after {
      width: 2px;
      height: 12px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .faq-item.active .faq-icon::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .faq-item.active .faq-icon::before {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    /* ==================== RESPONSIVE ==================== */
    @media (max-width: 991px) {
      .heading-style-h1.hero-heading {
        font-size: 40px !important;
      }

      .section-heading {
        font-size: 40px;
      }

      .mexico-section {
        padding: 80px 0;
      }

      .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
      }

      .hero-grid .hero-content {
        text-align: center;
      }

      .hero-grid .hero-content h1,
      .hero-grid .hero-content p {
        text-align: center !important;
      }

      .hero-grid .spacer-large._2-buttons {
        justify-content: center !important;
      }

      .hero-grid .hero-social-proof {
        justify-content: center !important;
      }
    }

    /* Mobile (767px) */
    @media screen and (max-width: 767px) {

      h1.heading-style-h1.hero-heading,
      h1.heading-style-h1,
      h1.hero-heading {
        font-size: 44px !important;
      }

      h2.heading-style-h1.hero-heading,
      h2.heading-style-h1,
      h2.hero-heading,
      h2,
      .section-heading,
      .heading-style-h1.hero-heading {
        font-size: 38px !important;
      }

      /* Target spans inside headings too */
      h2 span,
      h2.hero-heading span,
      h2.heading-style-h1 span,
      .heading-style-h1.hero-heading span {
        font-size: 38px !important;
      }

      .text-size-medium-3 {
        font-size: 16px;
      }

      .mexico-section {
        padding: 60px 0;
      }
    }

    /* Small Mobile (479px) */
    @media screen and (max-width: 479px) {

      h1.heading-style-h1.hero-heading,
      h1.heading-style-h1,
      h1.hero-heading {
        font-size: 36px !important;
      }

      h2.heading-style-h1.hero-heading,
      h2.heading-style-h1,
      h2.hero-heading,
      h2,
      .section-heading,
      .heading-style-h1.hero-heading {
        font-size: 38px !important;
      }

      /* Target spans inside headings too */
      h2 span,
      h2.hero-heading span,
      h2.heading-style-h1 span,
      .heading-style-h1.hero-heading span {
        font-size: 38px !important;
      }

      .text-size-medium-3 {
        font-size: 15px;
      }

      .hero-grid .spacer-large._2-buttons {
        flex-direction: column !important;
        align-items: center !important;
      }

      .mexico-section {
        padding: 48px 0;
      }
    }

    /* ==================== SECTIONS RESPONSIVE ==================== */
    /* Tablet */
    @media (max-width: 991px) {
      .how-steps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .testimonials-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .platform-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
      }

      .features-large-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .features-small-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }

    /* Mobile */
    @media (max-width: 767px) {
      .how-steps-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }

      .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }

      .testimonials-grid>div {
        height: 450px !important;
      }

      .platform-features-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }

      .features-large-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }

      .features-small-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }

      .final-cta-card {
        padding: 50px 24px !important;
        border-radius: 16px !important;
      }

      .faq-list {
        gap: 10px !important;
      }
    }

    /* Small Mobile */
    @media (max-width: 479px) {
      .testimonials-grid>div {
        height: 400px !important;
      }

      .testimonial-quote-card {
        padding: 18px !important;
      }

      .testimonial-quote-card p {
        font-size: 14px !important;
      }

      .testimonial-metric {
        font-size: 28px !important;
      }

      .final-cta-card {
        padding: 40px 20px !important;
      }

      .final-cta-card h2 {
        font-size: 28px !important;
      }
    }

    /* ============================================
       CALCULADORA STYLES
       ============================================ */

    #calc-form,
    #calc-results {
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    #calc-form.hiding {
      opacity: 0;
      transform: translateY(-20px);
    }

    #calc-results.showing {
      animation: calcFadeInUp 0.5s ease forwards;
    }

    @keyframes calcFadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Calculadora Responsive */
    @media (max-width: 767px) {
      #calculadora {
        padding: 60px 16px !important;
      }

      #calc-results .calc-metricas-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
      }

      #calc-results .calc-costos-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
      }

      #ahorro-total {
        font-size: 48px !important;
      }

      #calc-results .calc-metric-card p:first-child {
        font-size: 28px !important;
      }

      #empleados-desglose {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 16px !important;
      }
    }

    @media (max-width: 479px) {
      #ahorro-total {
        font-size: 40px !important;
      }
    }

    /* ==================== DESIGN SYSTEM - BOTONES ==================== */

    /* Base Button */
    .gs-btn {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      height: 40px;
      padding: 0 20px;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      border-radius: 8px;
      border: none;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      width: fit-content;
    }

    /* Primary Button - Dark */
    .gs-btn-primary {
      color: #fff;
      background: #1a1a1a;
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .gs-btn-primary:hover {
      background: #333;
      box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
      transform: translateY(-1px);
    }

    .gs-btn-primary:active {
      background: #111;
      transform: translateY(0);
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    /* Secondary Button - Light with border */
    .gs-btn-secondary {
      color: #1a1a1a;
      background: #fff;
      border: 1px solid #e0e0e0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .gs-btn-secondary:hover {
      background: #fafafa;
      border-color: #ccc;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      transform: translateY(-1px);
    }

    .gs-btn-secondary:active {
      background: #f5f5f5;
      transform: translateY(0);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    /* White Button - Solid white for dark backgrounds */
    .gs-btn-white {
      color: #1a1a1a;
      background: #fff;
      border: none;
      box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    }

    .gs-btn-white:hover {
      background: #f5f5f5;
      box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
      transform: translateY(-1px);
    }

    .gs-btn-white:active {
      background: #ebebeb;
      transform: translateY(0);
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    /* Outline Button */
    .gs-btn-outline {
      color: #1a1a1a;
      background: transparent;
      border: 1.5px solid #1a1a1a;
    }

    .gs-btn-outline:hover {
      background: #1a1a1a;
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .gs-btn-outline:active {
      background: #333;
      transform: translateY(0);
    }

    /* Ghost Button */
    .gs-btn-ghost {
      color: #666;
      background: transparent;
      padding: 12px 16px;
    }

    .gs-btn-ghost:hover {
      color: #1a1a1a;
      background: #f5f5f5;
    }

    /* Button Sizes */
    .gs-btn-sm {
      height: 32px;
      padding: 0 14px;
      font-size: 13px;
      border-radius: 6px;
    }

    .gs-btn-lg {
      height: 48px;
      padding: 0 28px;
      font-size: 15px;
      border-radius: 10px;
    }

    /* Button with Icon */
    .gs-btn svg {
      width: 18px;
      height: 18px;
    }

    .gs-btn-sm svg {
      width: 16px;
      height: 16px;
    }

    .gs-btn-lg svg {
      width: 20px;
      height: 20px;
    }

    /* Full Width */
    .gs-btn-block {
      width: 100%;
    }

    /* Mobile responsive */
    @media (max-width: 767px) {
      .gs-btn {
        width: 100%;
      }

      .spacer-large._2-buttons {
        flex-direction: column;
        gap: 12px;
      }
    }

    /* ==================== OVERRIDE HEADING SIZES - FINAL ==================== */
    /* Mobile 767px - H2 section headings at 38px */
    @media screen and (max-width: 767px) {

      h2.heading-style-h1.hero-heading,
      h2.heading-style-h1,
      h2.hero-heading,
      .heading-style-h1.hero-heading,
      h2 {
        font-size: 38px !important;
      }
    }

    /* Small Mobile 479px - H2 section headings at 38px */
    @media screen and (max-width: 479px) {

      h2.heading-style-h1.hero-heading,
      h2.heading-style-h1,
      h2.hero-heading,
      .heading-style-h1.hero-heading,
      h2 {
        font-size: 38px !important;
      }
    }
  


    /* Hide old Webflow modal completely */
    .modal-2,
    #modal,
    div[role="dialog"][aria-labelledby="Popup Modal"],
    .modal-bg-2,
    .signup-form-block {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    /* Modal Styles */
    body.modal-open .navigation-component {
      visibility: hidden;
    }

    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
    }

    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .modal-container {
      background: #fff;
      border-radius: 20px;
      padding: 36px;
      width: 90%;
      max-width: 480px;
      position: relative;
      transform: scale(0.9) translateY(20px);
      opacity: 0;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      margin: 40px 20px;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    .modal-overlay.active .modal-container {
      transform: scale(1) translateY(0);
      opacity: 1;
    }

    .modal-close {
      position: absolute;
      top: 20px;
      right: 20px;
      background: #f5f5f5;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .modal-close:hover {
      background: #e5e5e5;
      transform: rotate(90deg);
    }

    .modal-close svg {
      width: 18px;
      height: 18px;
      color: #666;
    }

    .modal-content {
      text-align: center;
    }

    /* Phone input styles */
    .iti {
      width: 100%;
    }

    .iti__flag-container {
      border-right: 1px solid #e5e5e5;
    }

    .form-error {
      display: none;
      color: #ef4444;
      font-size: 13px;
      margin-top: 4px;
    }

    .form-group.error input {
      border-color: #ef4444;
    }

    .form-group.error .form-error {
      display: block;
    }

    .modal-title {
      font-family: 'Geist', sans-serif;
      font-size: 24px;
      font-weight: 600;
      color: #1a1a1a;
      margin: 0 0 24px;
      line-height: 1.2;
    }

    .modal-form {
      text-align: left;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: #333;
      margin-bottom: 8px;
    }

    .form-group input {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid #e5e5e5;
      border-radius: 10px;
      font-size: 15px;
      transition: all 0.2s ease;
      font-family: 'Inter', sans-serif;
    }

    .form-group input:focus {
      outline: none;
      border-color: #1a1a1a;
      box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1);
    }

    .form-group input::placeholder {
      color: #aaa;
    }

    .modal-submit {
      width: 100%;
      margin-top: 8px;
      justify-content: center;
    }

    .modal-disclaimer {
      font-size: 12px;
      color: #999;
      margin: 20px 0 0;
      line-height: 1.5;
    }

    /* Success State */
    .modal-success {
      display: none;
      text-align: center;
      padding: 20px 0;
    }

    .modal-success.active {
      display: block;
      animation: success-appear 0.5s ease forwards;
    }

    @keyframes success-appear {
      0% {
        opacity: 0;
        transform: scale(0.9);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    .modal-content.hidden {
      display: none;
    }

    .success-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 24px;
      background: #10b981;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .success-icon svg {
      width: 32px;
      height: 32px;
      color: #fff;
    }

    .modal-subtitle {
      color: #666;
      font-size: 15px;
      line-height: 1.6;
      margin: 12px 0 24px;
    }

    /* reCAPTCHA Styles */
    .recaptcha-container {
      display: flex;
      justify-content: center;
      margin: 20px 0;
    }