/* ============================================================
   INTECHIA — Hoja de estilos principal
   Sitio corporativo one-page. Organizado por: base, tokens,
   header, botones, hero, secciones, pilares, cards, footer,
   modal de contacto y utilidades. Responsive al final.
   ============================================================ */

/* ── Reset base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Montserrat', sans-serif; background: var(--clr-dark); color: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }

    /* ───── Montserrat auto-hospedada (no depende de Google Fonts) ───── */
    /* latin */
    @font-face {
      font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap;
      src: url('../fonts/montserrat-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
      src: url('../fonts/montserrat-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap;
      src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
      src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    .font-mono  { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
    .font-brand { font-family: 'Montserrat', sans-serif; }
    #mobile-menu { display: none; }
    #mobile-menu.open { display: block; }

    /* ── Brand tokens ── */
    :root {
      --clr-dark:    #0A0A0F;
      --clr-grafito: #494949;
      --grad-start:  #00DBFF;
      --grad-end:    #FF00FF;
      --gradient:    linear-gradient(90deg, #00DBFF, #FF00FF);
    }

    /* ── Header ── */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: var(--clr-dark);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    /* Layout interno del header */
    .header-inner {
      max-width: 80rem;
      margin: 0 auto;
      padding: 0 24px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .logo-link { display: flex; align-items: center; flex-shrink: 0; }
    .nav-desktop { display: none; align-items: center; gap: 36px; }
    .header-actions { display: flex; align-items: center; gap: 12px; }
    /* Visibilidad responsive (reemplaza utilidades de Tailwind) */
    .desktop-only { display: none; }
    @media (min-width: 768px) {
      .nav-desktop { display: flex; }
      .desktop-only { display: inline-block; }
      .mobile-only { display: none; }
      #mobile-menu { display: none !important; }
    }
    .nav-link {
      color: rgba(255,255,255,0.55);
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      letter-spacing: 0.02em;
      transition: color 0.2s;
    }
    .nav-link:hover { color: #fff; }

    /* Primary button — gradient fill */
    .btn-primary {
      position: relative;
      padding: 10px 24px;
      background: linear-gradient(90deg, #00DBFF, #FF00FF);
      color: #0A0A0F;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 13px;
      letter-spacing: 0.04em;
      border: none;
      border-radius: 9px;
      cursor: pointer;
      transition: opacity 0.2s, box-shadow 0.2s, transform 0.15s;
    }
    .btn-primary:hover {
      opacity: 0.9;
      box-shadow: 0 0 24px rgba(0,219,255,0.35), 0 0 8px rgba(255,0,255,0.2);
      transform: translateY(-1px);
    }

    /* Secondary button — ghost/outline */
    .btn-secondary {
      padding: 10px 24px;
      background: transparent;
      color: rgba(255,255,255,0.65);
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 13px;
      letter-spacing: 0.04em;
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 9px;
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s;
    }
    .btn-secondary:hover {
      border-color: rgba(255,255,255,0.55);
      color: #fff;
      background: rgba(255,255,255,0.06);
      transform: translateY(-1px);
    }

    /* Mobile burger */
    .burger-icon { color: rgba(255,255,255,0.7); cursor: pointer; }
    #mobile-menu {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding: 0 24px 20px;
      display: none;
    }
    #mobile-menu.open { display: block; }
    .mobile-menu-cta { margin-top: 16px; }
    .btn-block { width: 100%; }
    .mobile-nav-link {
      display: block;
      color: rgba(255,255,255,0.55);
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      padding: 8px 0;
      letter-spacing: 0.02em;
      transition: color 0.2s;
    }
    .mobile-nav-link:hover { color: #fff; }

    /* ── Diagram: JS-driven loop animation ── */
    .dc-group { opacity: 0; transition: opacity 0.5s ease; }
    .partner-logo { opacity: 0.65; transition: opacity 0.25s ease; cursor: default; }
    .partner-logo:hover { opacity: 1; }

    /* ── Aliado cards ── */
    .aliado-card {
      padding: 32px 28px;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 16px;
      background: linear-gradient(145deg, rgba(0,219,255,0.04) 0%, rgba(10,10,20,0) 75%);
      transition: border-color 0.3s ease, background 0.3s ease, opacity 0.7s ease, transform 0.7s ease;
      opacity: 0;
      transform: translateY(28px);
    }
    .aliado-card.aliado-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .aliado-card:hover {
      border-color: rgba(0,219,255,0.22);
      background: linear-gradient(145deg, rgba(0,219,255,0.08) 0%, rgba(10,10,20,0) 75%);
    }
    .aliado-card h3 {
      font-family: 'Montserrat', sans-serif;
      font-size: 17px;
      font-weight: 300;
      color: white;
      line-height: 1.4;
      margin: 20px 0 12px;
    }
    .aliado-card p {
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
      font-weight: 300;
      color: rgba(255,255,255,0.62);
      line-height: 1.75;
      margin: 0;
    }
    /* ── Benefit cards ── */
    .benefit-card {
      padding: 32px 28px;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 16px;
      background: linear-gradient(145deg, rgba(0,219,255,0.04) 0%, rgba(10,10,20,0) 75%);
      transition: border-color 0.3s ease, background 0.3s ease, opacity 0.7s ease, transform 0.7s ease;
      opacity: 0;
      transform: translateY(28px);
    }
    .benefit-card.benefit-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .benefit-card:hover {
      border-color: rgba(0,219,255,0.22);
      background: linear-gradient(145deg, rgba(0,219,255,0.08) 0%, rgba(10,10,20,0) 75%);
    }
    .benefit-num {
      font-family: 'Montserrat', sans-serif;
      font-size: 68px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: -0.02em;
      background: linear-gradient(90deg, #00DBFF, #FF00FF);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin: 22px 0 18px;
      display: block;
    }
    .b-num { display: inline-block; }
    .benefit-card h3 {
      font-family: 'Montserrat', sans-serif;
      font-size: 16px;
      font-weight: 300;
      color: white;
      line-height: 1.4;
      margin: 0 0 12px;
    }
    .benefit-card p {
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
      font-weight: 300;
      color: rgba(255,255,255,0.62);
      line-height: 1.75;
      margin: 0;
    }

    @keyframes ctaFloat {
      0%   { transform: perspective(1000px) rotateX(2deg) rotateY(-1.5deg); }
      33%  { transform: perspective(1000px) rotateX(-1deg) rotateY(2deg); }
      66%  { transform: perspective(1000px) rotateX(1.5deg) rotateY(-2deg); }
      100% { transform: perspective(1000px) rotateX(2deg) rotateY(-1.5deg); }
    }
    @keyframes borderRun {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    .cta-border-anim {
      position: relative;
      padding: 1px;
      overflow: hidden;
      animation: ctaFloat 6s ease-in-out infinite;
    }
    .cta-border-anim::before {
      content: '';
      position: absolute;
      width: 200%;
      height: 200%;
      top: -50%;
      left: -50%;
      background: conic-gradient(from 0deg, transparent 0deg, #00DBFF 80deg, #FF00FF 160deg, transparent 240deg, transparent 360deg);
      animation: borderRun 10s linear infinite;
    }
    .cta-inner {
      position: relative;
      z-index: 1;
      background: #0D0D1C;
      padding: 64px 56px;
      text-align: center;
      transition: background 0.3s ease;
    }
    @keyframes dcAura {
      0%,100% { opacity: 0.4; }
      50%      { opacity: 0.9; }
    }

    /* ───── Pilar 2: Smart Checkout (glassmorphic) ───── */
    .p2-wrap { display:flex; align-items:stretch; justify-content:center; gap:16px; width:100%; }
    .p2-side { display:flex; flex-direction:column; justify-content:space-between; padding:26px 0; flex-shrink:0; }
    .p2-feat { display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; width:92px; }
    .p2-ico {
      width:56px; height:56px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      background:radial-gradient(circle at 50% 32%, rgba(0,219,255,0.14), rgba(12,12,26,0.5));
      border:1px solid rgba(0,219,255,0.3);
      animation:p2Pulse 3.6s ease-in-out infinite;
    }
    .p2-feat:nth-child(2) .p2-ico { animation-delay:1.8s; }
    .p2-lbl { font-family:'Montserrat',sans-serif; font-size:12px; font-weight:300; color:rgba(255,255,255,0.55); line-height:1.3; }
    @keyframes p2Pulse {
      0%,100% { box-shadow:0 0 16px rgba(0,219,255,0.07), inset 0 0 10px rgba(0,219,255,0.05); border-color:rgba(0,219,255,0.22); }
      50%     { box-shadow:0 0 26px rgba(0,219,255,0.20), inset 0 0 14px rgba(0,219,255,0.10); border-color:rgba(0,219,255,0.45); }
    }

    .p2-card {
      position:relative; width:296px; flex-shrink:0; border-radius:18px; padding:1px;
      background:linear-gradient(160deg, rgba(0,219,255,0.55), rgba(255,0,255,0.45) 55%, rgba(0,219,255,0.2));
      box-shadow:0 26px 60px rgba(0,0,0,0.55), 0 0 46px rgba(120,40,255,0.12);
      animation:p2Float 7s ease-in-out infinite;
    }
    .p2-card-inner { border-radius:17px; background:linear-gradient(165deg, rgba(24,24,46,0.94), rgba(12,12,24,0.97)); padding:18px 18px 20px; }
    @keyframes p2Float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }

    .p2-prog { height:5px; border-radius:3px; background:rgba(255,255,255,0.08); overflow:hidden; margin-bottom:15px; }
    .p2-prog-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,#00DBFF,#FF00FF); box-shadow:0 0 10px rgba(120,40,255,0.55); animation:p2Prog 4.5s ease-in-out infinite; }
    @keyframes p2Prog { 0%,100% { width:46%; } 50% { width:62%; } }

    .p2-panel { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:13px; }
    .p2-cardchip { width:30px; height:20px; border-radius:4px; background:linear-gradient(135deg,#1a1f71,#3a4bb5); display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-size:7px; font-weight:700; color:#fff; letter-spacing:0.4px; flex-shrink:0; }
    .p2-pill { font-family:'Montserrat',sans-serif; font-size:8.5px; font-weight:600; color:#fff; padding:5px 9px; border-radius:20px; background:linear-gradient(90deg,rgba(0,219,255,0.16),rgba(255,0,255,0.18)); border:1px solid rgba(150,90,255,0.4); white-space:nowrap; flex-shrink:0; }
    .p2-label { font-family:'Montserrat',sans-serif; font-size:10px; font-weight:600; color:rgba(255,255,255,0.72); }
    .p2-field { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); border-radius:7px; padding:8px 10px; font-family:'Montserrat',sans-serif; font-size:9.5px; font-weight:300; color:rgba(255,255,255,0.4); }
    .p2-opt { display:flex; align-items:center; gap:10px; background:rgba(120,60,255,0.07); border:1px solid rgba(150,90,255,0.35); border-radius:9px; padding:9px 12px; }
    .p2-radio { width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,#00DBFF,#FF00FF); display:flex; align-items:center; justify-content:center; flex-shrink:0; animation:p2Radio 2.6s ease-in-out infinite; }
    .p2-radio-dot { width:11px; height:11px; border-radius:50%; background:#15152a; display:flex; align-items:center; justify-content:center; }
    .p2-radio-core { width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,#00DBFF,#FF00FF); }
    @keyframes p2Radio { 0%,100% { box-shadow:0 0 8px rgba(120,40,255,0.4); } 50% { box-shadow:0 0 16px rgba(120,40,255,0.75); } }

    /* ───── Pilar 3: Timeline de pago recurrente ───── */
    .p3-wrap { max-width:340px; margin:0 auto; width:100%; }
    .p3-card {
      background:linear-gradient(165deg,rgba(24,24,46,0.9),rgba(12,12,24,0.95));
      border:1px solid rgba(255,255,255,0.09); border-radius:14px; padding:16px 18px; margin-bottom:24px;
      box-shadow:0 18px 44px rgba(0,0,0,0.45), 0 0 30px rgba(120,40,255,0.08);
    }
    .p3-card-row { display:flex; align-items:center; gap:13px; }
    .p3-card-row + .p3-card-row { margin-top:15px; }
    .p3-cardnum { font-family:'Montserrat',sans-serif; font-size:14px; font-weight:600; color:#fff; letter-spacing:0.06em; }
    .p3-toggle { width:40px; height:22px; border-radius:20px; background:rgba(255,255,255,0.12); position:relative; transition:background 0.55s ease; flex-shrink:0; }
    .p3-toggle .p3-knob { position:absolute; top:2.5px; left:2.5px; width:17px; height:17px; border-radius:50%; background:#fff; transition:left 0.55s cubic-bezier(.4,1.4,.5,1); box-shadow:0 1px 3px rgba(0,0,0,0.3); }
    .p3-toggle.on { background:linear-gradient(90deg,#00DBFF,#7C5CFF); box-shadow:0 0 16px rgba(80,120,255,0.45); }
    .p3-toggle.on .p3-knob { left:20.5px; }
    .p3-toggle-label { font-family:'Montserrat',sans-serif; font-size:13px; font-weight:300; color:rgba(255,255,255,0.7); }

    .p3-timeline { position:relative; }
    .p3-item { display:flex; gap:14px; opacity:0; transform:translateY(12px); transition:opacity 0.55s ease, transform 0.55s ease; }
    .p3-item.show { opacity:1; transform:translateY(0); }
    .p3-rail { display:flex; flex-direction:column; align-items:center; }
    .p3-node { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; transform:scale(0.4); transition:transform 0.45s cubic-bezier(.34,1.56,.64,1) 0.1s; }
    .p3-item.show .p3-node { transform:scale(1); }
    .p3-node.ok  { background:radial-gradient(circle at 50% 32%,#33D67F,#159C55); box-shadow:0 0 16px rgba(46,212,122,0.4); }
    .p3-node.err { background:radial-gradient(circle at 50% 32%,#FF5C6C,#D32F3F); box-shadow:0 0 16px rgba(255,80,90,0.45); }
    .p3-line { width:2px; flex:1 0 auto; min-height:30px; background:rgba(255,255,255,0.13); margin:5px 0; transform:scaleY(0); transform-origin:top; transition:transform 0.5s ease 0.25s; }
    .p3-item.show .p3-line { transform:scaleY(1); }
    .p3-line.err { background:linear-gradient(180deg,#D32F3F,rgba(211,47,63,0.3)); }
    .p3-check { stroke-dasharray:26; stroke-dashoffset:26; }
    .p3-item.show .p3-check { animation:p3Draw 0.5s ease forwards 0.28s; }
    @keyframes p3Draw { to { stroke-dashoffset:0; } }
    .p3-content { padding-top:4px; padding-bottom:8px; }
    .p3-month { font-family:'Montserrat',sans-serif; font-size:14px; font-weight:600; color:#fff; margin-bottom:3px; }
    .p3-status { font-family:'Montserrat',sans-serif; font-size:11.5px; font-weight:300; color:rgba(255,255,255,0.5); display:flex; align-items:center; gap:7px; flex-wrap:wrap; line-height:1.5; }
    .p3-status .p3-err  { color:#FF6B78; font-weight:600; }
    .p3-status .p3-okk  { color:#3FD98B; font-weight:600; }
    .p3-intechia { display:inline-flex; align-items:center; gap:5px; }
    .p3-intechia img { height:17px; display:block; }
    .p3-intechia .p3-word { font-family:'Montserrat',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; color:#fff; }
    .p3-logo-chip { background:#fff; border-radius:4px; padding:2px 6px; display:inline-flex; align-items:center; }
    .p3-logo-chip img { height:13px; display:block; }

    /* ───── Pilar 4: Chat Intechia IA ───── */
    .p4-chat {
      width:330px; margin:0 auto; border-radius:22px; padding:1px;
      background:linear-gradient(160deg, rgba(0,219,255,0.5), rgba(255,0,255,0.42) 55%, rgba(0,219,255,0.18));
      box-shadow:0 26px 60px rgba(0,0,0,0.55), 0 0 46px rgba(120,40,255,0.12);
    }
    .p4-chat-inner { border-radius:21px; overflow:hidden; background:linear-gradient(170deg, rgba(22,22,42,0.96), rgba(12,12,24,0.98)); }
    .p4-head { display:flex; align-items:center; gap:11px; padding:13px 15px; background:rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.07); }
    .p4-avatar { width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 35%, rgba(0,219,255,0.16), rgba(12,12,26,0.6)); border:1px solid rgba(150,90,255,0.45); }
    .p4-avatar img { height:21px; display:block; }
    .p4-name { font-family:'Montserrat',sans-serif; font-size:13px; font-weight:600; color:#fff; }
    .p4-status { font-family:'Montserrat',sans-serif; font-size:10px; font-weight:300; color:rgba(255,255,255,0.45); display:flex; align-items:center; gap:5px; margin-top:1px; }
    .p4-status .p4-dot { width:6px; height:6px; border-radius:50%; background:#3FD98B; box-shadow:0 0 6px rgba(63,217,139,0.8); }

    .p4-body { height:430px; overflow-y:auto; scrollbar-width:none; background:linear-gradient(180deg, rgba(10,10,22,0.4), rgba(10,10,20,0.1)); }
    .p4-body::-webkit-scrollbar { display:none; }
    .p4-list { display:flex; flex-direction:column; gap:9px; padding:16px 14px; min-height:100%; justify-content:flex-end; box-sizing:border-box; }

    .p4-msg { max-width:80%; padding:9px 12px; font-family:'Montserrat',sans-serif; font-size:11.5px; font-weight:300; line-height:1.55; opacity:0; transform:translateY(9px); transition:opacity .35s ease, transform .35s ease; word-wrap:break-word; }
    .p4-msg.show { opacity:1; transform:translateY(0); }
    .p4-agent { align-self:flex-start; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.86); border-radius:14px 14px 14px 4px; }
    .p4-user  { align-self:flex-end; background:linear-gradient(135deg, #00C2E8, #9D38FF); color:#fff; border-radius:14px 14px 4px 14px; box-shadow:0 4px 14px rgba(120,40,255,0.25); }
    .p4-agent.p4-success {
      background:linear-gradient(135deg, rgba(46,212,122,0.18), rgba(46,212,122,0.05));
      border:1px solid rgba(63,217,139,0.55); color:#fff;
      animation:p4Pop .45s cubic-bezier(.34,1.56,.64,1), p4SuccessPulse 2.6s ease-in-out .45s infinite;
    }
    .p4-ok-label { color:#46E08C; font-weight:700; }
    @keyframes p4Pop { 0% { transform:scale(0.85); } 60% { transform:scale(1.04); } 100% { transform:scale(1); } }
    @keyframes p4SuccessPulse { 0%,100% { box-shadow:0 0 16px rgba(46,212,122,0.18); } 50% { box-shadow:0 0 30px rgba(46,212,122,0.42); } }

    .p4-typing { align-self:flex-start; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); border-radius:14px 14px 14px 4px; padding:11px 13px; display:flex; gap:4px; }
    .p4-typing span { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.55); animation:p4Dot 1.3s infinite ease-in-out; }
    .p4-typing span:nth-child(2) { animation-delay:.2s; }
    .p4-typing span:nth-child(3) { animation-delay:.4s; }
    @keyframes p4Dot { 0%,60%,100% { transform:translateY(0); opacity:.35; } 30% { transform:translateY(-4px); opacity:1; } }

    .p4-invoice { margin:8px 0 6px; padding:10px 11px; border-radius:9px; background:rgba(0,219,255,0.05); border:1px solid rgba(150,90,255,0.3); }
    .p4-inv-row { display:flex; justify-content:space-between; font-size:10.5px; color:rgba(255,255,255,0.6); margin-bottom:4px; }
    .p4-inv-row b { color:rgba(255,255,255,0.9); font-weight:600; }
    .p4-inv-amt { font-size:16px; font-weight:600; background:linear-gradient(90deg,#00DBFF,#FF00FF); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-top:4px; }

    @media (max-width: 768px) {
      .hero-grid { grid-template-columns: 1fr !important; padding: 56px 20px 64px !important; gap: 40px !important; }

      /* ── Soluciones: colapsar a 1 columna ── */
      #solutions > div { padding-left: 20px !important; padding-right: 20px !important; }
      #sol-automatizacion, #sol-pagos, #sol-orquestacion, #sol-transformacion {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
        margin-bottom: 90px !important;
      }
      /* En los pilares con la animación arriba, mostrar el texto primero */
      #sol-pagos > div:last-child,
      #sol-transformacion > div:last-child { order: -1; }

      /* Pilar 2 (checkout): apilar tarjeta + features para que quepa */
      #sol-pagos .p2-wrap { flex-direction: column; align-items: center; gap: 22px; }
      #sol-pagos .p2-side { flex-direction: row; justify-content: center; gap: 34px; padding: 0; width: auto; }

      /* Pilar 4 (chat): ancho fluido */
      .p4-chat { width: 100%; max-width: 330px; }
    }

    /* ───── Modal de contacto ───── */
    .cm-overlay {
      position: fixed; inset: 0; z-index: 1000;
      display: none; align-items: center; justify-content: center;
      padding: 24px;
      background: rgba(5,5,12,0.72);
      backdrop-filter: blur(6px);
      opacity: 0; transition: opacity 0.25s ease;
    }
    .cm-overlay.open { display: flex; opacity: 1; }
    .cm-box {
      position: relative;
      width: 100%; max-width: 460px;
      border-radius: 18px; padding: 1px;
      background: linear-gradient(160deg, rgba(0,219,255,0.55), rgba(255,0,255,0.45) 55%, rgba(0,219,255,0.2));
      box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 0 50px rgba(120,40,255,0.18);
      transform: translateY(14px) scale(0.98); transition: transform 0.28s cubic-bezier(.2,.9,.3,1);
      max-height: calc(100vh - 48px); overflow-y: auto;
    }
    .cm-overlay.open .cm-box { transform: translateY(0) scale(1); }
    .cm-inner { border-radius: 17px; background: linear-gradient(165deg,#15152b,#0C0C1A); padding: 32px 30px 28px; }
    .cm-close {
      position: absolute; top: 14px; right: 16px; z-index: 2;
      width: 30px; height: 30px; border: none; border-radius: 50%;
      background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6);
      font-size: 20px; line-height: 1; cursor: pointer; transition: background 0.2s, color 0.2s;
    }
    .cm-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
    .cm-title { font-family:'Montserrat',sans-serif; font-weight:600; font-size:22px; color:#fff; margin:0 0 6px; }
    .cm-sub { font-family:'Montserrat',sans-serif; font-weight:300; font-size:13.5px; color:rgba(255,255,255,0.5); line-height:1.6; margin:0 0 22px; }
    .cm-field { margin-bottom: 14px; }
    .cm-label { display:block; font-family:'Montserrat',sans-serif; font-weight:600; font-size:11px; letter-spacing:0.02em; color:rgba(255,255,255,0.6); margin-bottom:6px; }
    .cm-input, .cm-textarea {
      width: 100%; box-sizing: border-box;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 9px; padding: 11px 13px;
      font-family:'Montserrat',sans-serif; font-weight:300; font-size:14px; color:#fff;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .cm-input::placeholder, .cm-textarea::placeholder { color: rgba(255,255,255,0.3); }
    .cm-input:focus, .cm-textarea:focus { outline:none; border-color: rgba(0,219,255,0.55); box-shadow: 0 0 0 3px rgba(0,219,255,0.12); }
    .cm-textarea { resize: vertical; min-height: 96px; }
    .cm-submit {
      width: 100%; margin-top: 6px; padding: 13px 24px;
      background: linear-gradient(90deg,#00DBFF,#FF00FF); color:#0A0A0F;
      font-family:'Montserrat',sans-serif; font-weight:600; font-size:14px; letter-spacing:0.03em;
      border:none; border-radius:9px; cursor:pointer; transition: opacity 0.2s, box-shadow 0.2s, transform 0.15s;
    }
    .cm-submit:hover { opacity:0.92; box-shadow:0 0 24px rgba(0,219,255,0.35); transform: translateY(-1px); }
    .cm-submit:disabled { opacity:0.55; cursor:default; transform:none; box-shadow:none; }
    /* honeypot anti-spam: oculto para humanos */
    .cm-hp { position:absolute; left:-9999px; opacity:0; height:0; width:0; }
    .cm-result { font-family:'Montserrat',sans-serif; font-size:13.5px; font-weight:300; text-align:center; margin-top:14px; min-height:18px; }
    .cm-result.ok  { color:#3FD98B; }
    .cm-result.err { color:#FF6B78; }

    /* ============================================================
       CLASES DE LAYOUT Y CONTENIDO (reemplazan estilos inline)
       ============================================================ */

    /* ── Fondos de sección ── */
    .bg-deep  { background: linear-gradient(150deg,#141430 0%,#0E0E22 60%,#0C0C1A 100%); }
    .bg-night { background: #0B0B16; }

    /* ── Utilidades ── */
    .flex-center { display: flex; align-items: center; justify-content: center; }
    .flex-1      { flex: 1; }
    .svg-block   { display: block; }
    .text-gradient {
      background: linear-gradient(90deg,#00DBFF,#FF00FF);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .fw-600  { font-weight: 600; }
    .mb-7    { margin-bottom: 7px; }
    .mb-8    { margin-bottom: 8px; }
    .mw-500  { max-width: 500px; }
    .mw-520  { max-width: 520px; }
    .mw-540  { max-width: 540px; }
    .w-55    { width: 55px; }
    .w-90    { width: 90px; }
    .num-slot { display: inline-block; }

    /* ── Hero ── */
    .section-hero { position: relative; overflow: hidden; }
    .hero-glow {
      position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
      width: 600px; height: 600px;
      background: radial-gradient(ellipse at center,rgba(0,219,255,0.07),rgba(255,0,255,0.05) 45%,transparent 65%);
      pointer-events: none;
    }
    .hero-grid {
      max-width: 1280px; margin: 0 auto; padding: 88px 32px 100px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
      align-items: center; position: relative; z-index: 1;
    }
    .hero-text  { display: flex; flex-direction: column; gap: 28px; }
    .hero-badge { font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.35); }
    .hero-title { font-weight: 300; font-size: clamp(32px,3.6vw,56px); line-height: 1.12; color: #fff; margin: 0; letter-spacing: -0.01em; }
    .hero-lead  { font-weight: 300; font-size: 15px; line-height: 1.85; color: rgba(255,255,255,0.66); max-width: 440px; margin: 0; }
    .hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
    .btn-lg { padding: 14px 32px; font-size: 14px; }
    .dc-svg { max-width: 624px; display: block; }
    .dc-aura { animation: dcAura 3s ease-in-out infinite; }

    /* ── Encabezados de sección (comunes) ── */
    .section-pad     { max-width: 1200px; margin: 0 auto; padding: 88px 32px 130px; }
    .section-head    { text-align: center; margin-bottom: 64px; }
    .section-head-lg { margin-bottom: 88px; }
    .section-eyebrow { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.28); margin-bottom: 14px; }
    .section-title   { font-size: clamp(28px,3.5vw,42px); font-weight: 300; color: #fff; margin: 0 0 16px; line-height: 1.2; }
    .section-intro   { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.6); margin: 0 auto; line-height: 1.75; }

    /* ── Partners ── */
    .partners-inner { max-width: 1100px; margin: 0 auto; padding: 30px 32px; }
    .partners-label { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.28); margin-bottom: 30px; }
    .partners-row   { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px 72px; }
    .partner-img    { width: auto; display: block; }
    .h16 { height: 16px; }
    .h20 { height: 20px; }
    .h26 { height: 26px; }

    /* ── Grid de cards (Aliado / Beneficios) ── */
    .cards-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 20px; }

    /* ── Pilares de Soluciones ── */
    .pillar       { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
    .pillar--mb   { margin-bottom: 160px; }
    .pillar-title { font-size: clamp(20px,2vw,26px); font-weight: 300; color: #fff; line-height: 1.35; margin: 0 0 18px; }
    .pillar-text  { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.62); line-height: 1.85; margin: 0 0 28px; }
    .tag-row      { display: flex; flex-wrap: wrap; gap: 8px; }
    /* Etiquetas/keywords de los pilares — con punto de marca para diferenciarlas de los botones */
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.01em;
      padding: 6px 14px;
      border: 1px solid rgba(0,219,255,0.32);
      color: rgba(255,255,255,0.82);
      background: rgba(0,219,255,0.07);
      border-radius: 999px;
    }
    .tag::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: linear-gradient(90deg, #00DBFF, #FF00FF);
      flex-shrink: 0;
    }

    /* ── Tarjeta Smart Checkout (Pilar 2) — textos internos ── */
    .p2-head           { text-align: center; margin-bottom: 14px; }
    .p2-logo           { height: 17px; display: inline-block; }
    .p2-tagline        { font-size: 5.5px; font-weight: 600; letter-spacing: 0.3em; color: rgba(255,255,255,0.62); margin-top: 3px; }
    .p2-checkout-title { font-size: 18px; font-weight: 600; color: #fff; margin-top: 9px; }
    .p2-prog-head      { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; margin-bottom: 6px; }
    .p2-muted          { color: rgba(255,255,255,0.35); }
    .p2-amount-label   { font-size: 11px; font-weight: 600; color: #fff; }
    .p2-amount-sub     { font-size: 9px; font-weight: 300; color: rgba(255,255,255,0.4); margin-bottom: 13px; }
    .p2-card-row       { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
    .p2-strong         { font-size: 10.5px; font-weight: 600; color: #fff; }
    .p2-tiny           { font-size: 8.5px; font-weight: 300; color: rgba(255,255,255,0.4); }
    .p2-field-row      { display: flex; gap: 7px; margin-bottom: 14px; }
    .p2-more           { text-align: right; margin-top: 9px; font-size: 9.5px; font-weight: 600; }
    .p2-12x            { font-size: 18px; font-weight: 600; }

    /* ── Beneficios ── */
    .benefit-num--nowrap { white-space: nowrap; }

    /* ── CTA final ── */
    .cta-wrap  { max-width: 860px; margin: 0 auto; padding: 88px 32px 100px; }
    .cta-title { font-size: clamp(26px,3vw,38px); font-weight: 300; color: #fff; line-height: 1.25; margin: 0 0 20px; }
    .cta-text  { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.62); line-height: 1.85; max-width: 560px; margin: 0 auto 40px; }

    /* ── Footer ── */
    .site-footer   { background: var(--clr-dark); border-top: 1px solid rgba(255,255,255,0.08); }
    .footer-inner  { max-width: 1200px; margin: 0 auto; padding: 48px 32px; }
    .footer-top    { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 48px; }
    .footer-brand  { max-width: 280px; }
    .footer-logo   { display: inline-flex; align-items: center; margin-bottom: 16px; }
    .footer-desc   { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.62); line-height: 1.75; margin: 0; }
    .footer-heading{ font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.28); margin: 0 0 16px; }
    .footer-list   { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
    .footer-link   { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.2s; }
    .footer-link:hover { color: #fff; }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; text-align: center; }
    .footer-copy   { font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.25); margin: 0; }

    /* ── Modal ── */
    .cm-optional { font-weight: 300; opacity: 0.5; }