/* Cookie banner — GDPR compliant */
    #yw-cookie {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
      background: #0c1c30; border-top: 1px solid #1d3358;
      box-shadow: 0 -4px 24px rgba(0,0,0,.5);
      font-family: Inter, system-ui, sans-serif; font-size: .84rem;
      transform: translateY(100%); transition: transform .4s cubic-bezier(.4,0,.2,1);
    }
    #yw-cookie.visible { transform: translateY(0) }

    .ywc-main {
      max-width: 1200px; margin: 0 auto;
      padding: 1.25rem 1.5rem;
      display: grid; grid-template-columns: 1fr auto;
      gap: 1.5rem; align-items: center;
    }
    .ywc-text { color: #6b89aa; line-height: 1.6; max-width: 68ch }
    .ywc-text strong { color: #e2eeff; font-weight: 600 }
    .ywc-text a { color: #60a5fa; text-decoration: underline }

    .ywc-actions { display: flex; gap: .6rem; flex-shrink: 0; flex-wrap: wrap; align-items: center }

    /* Equal visual weight — no nudge */
    .ywc-btn {
      padding: .52em 1.1em; border-radius: 8px; font-size: .8rem;
      font-weight: 600; cursor: pointer; white-space: nowrap;
      transition: background .15s, border-color .15s, color .15s; border: 1px solid transparent;
    }
    .ywc-accept {
      background: #3b82f6; color: #fff; border-color: #3b82f6;
    }
    .ywc-accept:hover { background: #2563eb; border-color: #2563eb }

    .ywc-reject {
      background: transparent; color: #6b89aa; border-color: #1d3358;
    }
    .ywc-reject:hover { color: #e2eeff; border-color: #2e4a68 }

    .ywc-settings {
      background: transparent; color: #60a5fa; border-color: transparent;
      text-decoration: underline; padding-inline: .5em;
    }
    .ywc-settings:hover { color: #93c5fd }

    /* Preferences panel */
    #ywc-panel {
      border-top: 1px solid #162540; display: none;
      padding: 1.25rem 1.5rem; max-width: 1200px; margin: 0 auto;
    }
    #ywc-panel.open { display: block }

    .ywc-cats { display: flex; flex-direction: column; gap: .85rem; margin-bottom: 1rem }

    .ywc-cat {
      display: grid; grid-template-columns: 1fr auto;
      align-items: start; gap: 1rem;
      padding: .85rem 1rem;
      background: rgba(255,255,255,.02); border: 1px solid #162540; border-radius: 8px;
    }
    .ywc-cat-name { font-weight: 600; color: #e2eeff; font-size: .83rem; margin-bottom: .2rem }
    .ywc-cat-desc { color: #6b89aa; font-size: .77rem; line-height: 1.55 }

    /* Toggle switch */
    .ywc-toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; margin-top: .1rem }
    .ywc-toggle input { opacity: 0; width: 0; height: 0; position: absolute }
    .ywc-track {
      position: absolute; inset: 0; border-radius: 10px;
      background: #1d3358; transition: background .2s; cursor: pointer;
    }
    .ywc-toggle input:checked + .ywc-track { background: #3b82f6 }
    .ywc-toggle input:disabled + .ywc-track { background: #16a34a; cursor: not-allowed; opacity: .7 }
    .ywc-knob {
      position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
      border-radius: 50%; background: #fff; transition: transform .2s; pointer-events: none;
    }
    .ywc-toggle input:checked ~ .ywc-knob { transform: translateX(16px) }
    .ywc-always { font-size: .7rem; color: #22c55e; font-weight: 600; margin-top: .3rem; display: block }

    .ywc-panel-actions {
      display: flex; gap: .6rem; flex-wrap: wrap; padding-top: .75rem;
      border-top: 1px solid #162540;
    }

    @media (max-width: 640px) {
      .ywc-main { grid-template-columns: 1fr }
      .ywc-actions { width: 100%; flex-wrap: wrap }
      .ywc-btn { flex: 1; text-align: center }
    }

    /* ── V39: smooth scroll + padding ── */
    html { scroll-behavior: smooth; scroll-padding-top: 80px }

    /* ── V2: typing cursor in hero ── */
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
    .hero-text.active .hi::after {
      content: '|';
      display: inline-block;
      margin-left: 2px;
      animation: blink 1s step-end infinite;
      color: var(--c-primary, #0ea5e9);
      font-weight: 300;
    }

    /* ── V3: animated gradient border on hero badge ── */
    .hero-badge {
      position: relative;
      background: linear-gradient(var(--c-surface,#0c1c30), var(--c-surface,#0c1c30)) padding-box,
                  linear-gradient(90deg,#0ea5e9,#8b5cf6,#0ea5e9) border-box;
      background-size: 200% auto;
      border: 1px solid transparent !important;
      animation: badgeBorderSpin 3s linear infinite;
    }
    @keyframes badgeBorderSpin { to { background-position: 200% center } }

    /* ── V4: trust bar star + bigger mobile text ── */
    .trust-star-icon { color: #facc15; font-style: normal; font-size: 1rem }
    @media (max-width: 768px) { .trust-item { font-size: .9rem } }

    /* ── V6: services pills bar ── */
    #sec-pills { padding: 1.5rem 0; background: linear-gradient(90deg,rgba(14,165,233,.06),rgba(139,92,246,.06)) }
    .pills-row { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center }
    .pill-chip {
      display: inline-flex; align-items: center; gap: .4rem;
      background: linear-gradient(135deg,rgba(14,165,233,.12),rgba(139,92,246,.12));
      border: 1px solid rgba(14,165,233,.25);
      color: #93c5fd; font-size: .8rem; font-weight: 600;
      padding: .4rem .9rem; border-radius: 2rem;
      text-decoration: none; transition: all .2s;
      letter-spacing: .03em;
    }
    .pill-chip:hover { background: linear-gradient(135deg,rgba(14,165,233,.22),rgba(139,92,246,.22)); color:#fff; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(14,165,233,.2) }
    .pill-chip svg { flex-shrink: 0 }

    /* ── V7: software tab active indicator ── */
    .sw-tab-btn.active { box-shadow: inset 0 -2px 0 var(--c-primary, #0ea5e9) }

    /* ── V8: shimmer on active tab panel image ── */
    .sw-tab-content.active .sw-tab-img { position: relative; overflow: hidden }
    .sw-tab-content.active .sw-tab-img::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
      animation: shimmerTab 1.2s ease forwards;
      pointer-events: none;
    }
    @keyframes shimmerTab { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }

    /* ── V9: testimonial colored top border ── */
    .testi-card:nth-child(1) { border-top: 3px solid #0ea5e9 }
    .testi-card:nth-child(2) { border-top: 3px solid #8b5cf6 }
    .testi-card:nth-child(3) { border-top: 3px solid #22c55e }

    /* ── V10: testimonial avatar with initials ── */
    .testi-avatar-init {
      width: 44px; height: 44px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .85rem; font-weight: 800; color: #fff; flex-shrink: 0;
    }
    .testi-avatar-init.av-blue { background: linear-gradient(135deg,#0ea5e9,#3b82f6) }
    .testi-avatar-init.av-violet { background: linear-gradient(135deg,#8b5cf6,#a855f7) }
    .testi-avatar-init.av-green { background: linear-gradient(135deg,#22c55e,#16a34a) }

    /* ── V11: blog card enhanced hover ── */
    .blog-card-enhanced {
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      border-radius: 1.25rem;
      overflow: hidden;
      display: flex; flex-direction: column;
      transition: border-color .2s, transform .25s, box-shadow .25s;
    }
    .blog-card-enhanced:hover {
      border-color: var(--c-primary);
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(14,165,233,.18);
    }

    /* ── V12: blog reading time ── */
    .read-time { color: var(--c-text-muted,#6b89aa); font-size: .73rem; font-style: italic; margin-top: .2rem }

    /* ── V14/F5: timeline fill animation ── */
    .timeline-line-fill { transition: height 1.2s cubic-bezier(.4,0,.2,1) }
    .timeline-line-fill.scroll-fill { height: 100% }

    /* ── V15: cybersecurity danger badge ── */
    .ciber-danger-badge {
      display: inline-flex; align-items: center; gap: .4rem;
      background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.35);
      color: #fca5a5; font-size: .78rem; font-weight: 700;
      padding: .35rem .9rem; border-radius: 2rem;
      margin-bottom: 1rem; letter-spacing: .03em;
    }

    /* ── V16: cybersecurity dot pattern background ── */
    #sec-ciber {
      background-image: radial-gradient(circle, rgba(14,165,233,.08) 1px, transparent 1px) !important;
      background-size: 28px 28px !important;
    }

    /* ── V17: e-commerce image frame ── */
    .ecom-img-frame {
      border-radius: var(--r-xl,1rem);
      box-shadow: 0 0 0 6px rgba(14,165,233,.08), 0 0 0 12px rgba(139,92,246,.05), var(--shadow-lg, 0 20px 60px rgba(0,0,0,.4));
      border: 1px solid var(--c-border);
    }

    /* ── V18: hosting guarantee bullets ── */
    .hosting-guarantee-list {
      display: flex; flex-wrap: wrap; gap: .5rem;
      margin: 1rem 0 1.5rem; padding: .75rem 1rem;
      background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.15);
      border-radius: var(--r-lg,.75rem);
    }
    .hosting-guarantee-list span { color: #4ade80; font-size: .83rem; font-weight: 600 }
    .hosting-guarantee-list .sep { color: rgba(255,255,255,.2) }

    /* ── V19: software tab install count ── */
    .sw-install-count {
      font-size: .75rem; color: rgba(147,197,253,.65);
      font-style: italic; margin-top: .35rem; margin-bottom: .75rem;
    }

    /* ── V20: social proof bar enhanced ── */
    .social-proof-bar {
      display: flex; gap: 0;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--r-lg,.75rem);
      overflow: hidden;
      margin: 1.25rem 0;
    }
    .sp-item {
      flex: 1; text-align: center;
      padding: .65rem .5rem;
      border-right: 1px solid rgba(255,255,255,.08);
      font-size: .8rem; color: rgba(232,244,255,.6);
    }
    .sp-item:last-child { border-right: none }
    .sp-num { display: block; font-size: 1.05rem; font-weight: 800; color: #fff; margin-bottom: .1rem }

    /* ── V21: footer description updated (via HTML) ── */

    /* ── V23: footer social icons ── */
    .footer-social { display: flex; gap: .75rem; margin-top: 1rem }
    .footer-social-link {
      width: 36px; height: 36px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,.12);
      display: flex; align-items: center; justify-content: center;
      color: rgba(232,244,255,.45); text-decoration: none;
      transition: all .2s;
    }
    .footer-social-link:hover.linkedin { color: #0a66c2; border-color: #0a66c2; background: rgba(10,102,194,.12) }
    .footer-social-link:hover.twitter  { color: #1da1f2; border-color: #1da1f2; background: rgba(29,161,242,.12) }
    .footer-social-link:hover.facebook { color: #1877f2; border-color: #1877f2; background: rgba(24,119,242,.12) }

    /* ── V24: WhatsApp tooltip ── */
    .whatsapp-btn { position: relative }
    .whatsapp-btn::before {
      content: 'Chat con soporte';
      position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
      background: rgba(10,20,40,.92); color: #e2eeff;
      font-size: .72rem; font-weight: 600; white-space: nowrap;
      padding: .35rem .7rem; border-radius: .4rem;
      opacity: 0; pointer-events: none; transition: opacity .2s;
    }
    .whatsapp-btn:hover::before { opacity: 1 }

    /* ── V25: hero progress bars thicker ── */
    .hero-pbar { height: 4px !important }
    .hero-pbar-fill { background: linear-gradient(90deg,var(--c-primary,#0ea5e9),var(--c-violet,#8b5cf6)) !important }

    /* ── V26: process section subtle gradient ── */
    #processTimeline { background: linear-gradient(90deg, rgba(14,165,233,.03) 0%, rgba(139,92,246,.04) 100%); border-radius: 1rem; padding: 1.5rem .5rem }

    /* ── V27: why us section ── */
    #sec-whyus { padding: var(--section-py,5rem) 0; background: var(--c-bg,#050d1a) }
    .whyus-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin-top: 2.5rem }
    @media (max-width: 768px) { .whyus-grid { grid-template-columns: 1fr } }
    .whyus-card {
      text-align: center; padding: 2rem 1.5rem;
      background: var(--c-surface,#0c1c30);
      border: 1px solid var(--c-border,#1d3358);
      border-radius: 1.25rem; transition: transform .2s, box-shadow .2s;
    }
    .whyus-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(14,165,233,.12) }
    .whyus-icon {
      width: 56px; height: 56px; border-radius: 50%;
      background: linear-gradient(135deg,rgba(14,165,233,.15),rgba(139,92,246,.15));
      border: 1px solid rgba(14,165,233,.2);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1rem;
    }
    .whyus-title { font-size: 1rem; font-weight: 700; color: var(--c-text,#e8f4ff); margin-bottom: .5rem }
    .whyus-desc { font-size: .85rem; color: var(--c-text-muted,#6b89aa); line-height: 1.7 }
    .whyus-tagline { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-primary,#0ea5e9); margin-bottom: .4rem }

    /* ── V28: sectors section ── */
    #sec-sectors { padding: 3rem 0; background: var(--c-surface,#0c1c30) }
    .sectors-grid { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem }
    .sector-chip {
      display: inline-flex; align-items: center; gap: .5rem;
      background: rgba(14,165,233,.08); border: 1px solid rgba(14,165,233,.18);
      color: var(--c-text,#e8f4ff); font-size: .82rem; font-weight: 600;
      padding: .6rem 1.1rem; border-radius: .75rem; transition: all .2s;
    }
    .sector-chip:hover { background: rgba(14,165,233,.16); transform: translateY(-2px) }

    /* ── V29: CTA final banner ── */
    #sec-cta-final {
      padding: 4rem 0;
      background: linear-gradient(135deg,#040a16 0%,#071428 50%,#040a16 100%);
      border-top: 1px solid rgba(14,165,233,.12);
      border-bottom: 1px solid rgba(14,165,233,.12);
    }
    .cta-final-inner { text-align: center; max-width: 680px; margin: 0 auto }
    .cta-final-inner h2 { font-size: clamp(1.4rem,3vw,2rem); color: #e8f4ff; margin-bottom: 1rem }
    .cta-final-inner p { color: #6b89aa; margin-bottom: 2rem; line-height: 1.8; font-size:1.02rem }
    .cta-final-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap }

    /* ── V30: reveal animation CSS (ensure present) ── */
    .reveal { opacity: 0; transform: translateY(26px) scale(.975); filter: blur(8px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1), filter .7s ease }
    .reveal.visible { opacity: 1; transform: none; filter: blur(0) }
    .reveal-delay-1 { transition-delay: .12s }
    .reveal-delay-2 { transition-delay: .24s }
    .reveal-delay-3 { transition-delay: .36s }
    .reveal-delay-4 { transition-delay: .48s }

    /* ── V31: button micro-interactions ── */
    .btn-primary:hover { transform: scale(1.03); box-shadow: 0 8px 28px rgba(14,165,233,.35) !important }
    .btn-primary { transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important }

    /* ── V33: nav active dot indicator ── */
    .nav-link.nav-active-page::after {
      content: ''; display: block;
      width: 100%; height: 2px;
      background: var(--c-primary,#0ea5e9);
      border-radius: 2px; margin-top: 2px;
    }

    /* ── V34: client logos marquee ── */
    #sec-clients { padding: 2.5rem 0; overflow: hidden; background: var(--c-bg,#050d1a) }
    .clients-track {
      display: flex; gap: 2.5rem; align-items: center;
      white-space: nowrap;
    }
    .client-logo-text {
      font-size: .9rem; font-weight: 700; color: rgba(232,244,255,.22);
      letter-spacing: .05em; text-transform: uppercase; flex-shrink: 0;
      transition: color .2s;
    }
    .client-logo-text:hover { color: rgba(232,244,255,.5) }
    @keyframes marqueeScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
    .clients-track { animation: marqueeScroll 28s linear infinite }
    @media (prefers-reduced-motion: reduce) { .clients-track { animation: none; flex-wrap: wrap; justify-content: center } }

    /* ── V35: marketing paragraph typography ── */
    .sec-marketing-text p { font-size: 1.02rem; line-height: 1.85 }

    /* ── V36: ecommerce mini stats ── */
    .ecom-stats-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem }
    .ecom-stat-chip {
      background: rgba(14,165,233,.08); border: 1px solid rgba(14,165,233,.2);
      border-radius: .5rem; padding: .4rem .8rem;
      font-size: .78rem; font-weight: 600; color: #93c5fd;
    }

    /* ── V37: alternate section gradient depth ── */
    .section-alt { background: linear-gradient(180deg, var(--c-surface,#0c1c30) 0%, rgba(7,20,40,1) 100%) !important }

    /* ── V38: AI icon pulse animation ── */
    @keyframes aiPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(1.12)} }
    .ai-pulse-icon { animation: aiPulse 2s ease-in-out infinite; display: inline-block }

    @keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
    @keyframes ping{0%{opacity:1;transform:scale(1)}75%,100%{opacity:0;transform:scale(2)}}

    /* ── V40: back to top (already exists, style improvement) ── */
    #back-top { z-index: 998 }

    /* ── F19: hero dot ping animation ── */
    @keyframes dotPing {
      0%{transform:scale(1);opacity:.8}
      70%{transform:scale(2.2);opacity:0}
      100%{transform:scale(2.2);opacity:0}
    }
    .hero-status .dot { position: relative }
    .hero-status .dot::before {
      content: ''; position: absolute; inset: -2px; border-radius: 50%;
      background: #22c55e; animation: dotPing 1.8s ease-out infinite;
    }
    .hero-status .dot { background: #22c55e !important }

    /* ── F6: testimonials mobile auto-rotate ── */
    @media (max-width: 768px) {
      .testi-grid { display: flex; overflow: hidden }
      .testi-card {
        min-width: 100%; flex-shrink: 0;
        animation: testiRotate 18s linear infinite;
      }
    }
    @keyframes testiRotate { 0%,28%{opacity:1;transform:translateX(0)} 33%,61%{opacity:0;transform:translateX(-100%)} 66%,100%{opacity:0} }

    /* ── F14: quick contact modal ── */
    #quick-contact-widget {
      position: fixed; right: 80px; bottom: 120px;
      display: none;
    }
    @media (min-width: 1200px) { #quick-contact-widget { display: block } }
    .qc-trigger {
      background: linear-gradient(135deg,#0ea5e9,#8b5cf6);
      color: #fff; font-size: .78rem; font-weight: 700;
      padding: .5rem 1rem; border-radius: 2rem;
      border: none; cursor: pointer; writing-mode: vertical-rl;
      letter-spacing: .05em; box-shadow: 0 4px 16px rgba(14,165,233,.3);
      transition: transform .2s, box-shadow .2s;
    }
    .qc-trigger:hover { transform: scale(1.05); box-shadow: 0 6px 24px rgba(14,165,233,.4) }
    #qc-modal {
      position: absolute; bottom: 50px; right: 0;
      width: 280px; background: #0c1c30;
      border: 1px solid #1d3358; border-radius: 1rem;
      padding: 1.25rem; display: none;
      box-shadow: 0 16px 48px rgba(0,0,0,.5);
    }
    #qc-modal.open { display: block }
    #qc-modal h4 { font-size: .9rem; color: #e8f4ff; margin-bottom: .75rem }
    .qc-field { width: 100%; background: rgba(255,255,255,.05); border: 1px solid #1d3358; border-radius: .5rem; padding: .5rem .75rem; color: #e8f4ff; font-size: .82rem; margin-bottom: .5rem; font-family: inherit; box-sizing: border-box }
    .qc-field:focus { outline: none; border-color: #0ea5e9 }
    .qc-submit { width: 100%; background: linear-gradient(135deg,#0ea5e9,#8b5cf6); border: none; border-radius: .5rem; padding: .55rem; color: #fff; font-size: .82rem; font-weight: 700; cursor: pointer; margin-top: .25rem }
    .qc-submit:hover { opacity: .9 }

    /* Hosting section upgrade */
    .hosting-guarantee-list { display:flex; flex-direction:column; gap:.5rem; margin:1rem 0 1.5rem }
    .hosting-guarantee-list li { display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--c-text-muted); list-style:none }
    .hosting-guarantee-list li svg { flex-shrink:0; color:var(--c-success,#22c55e) }
    /* Hero slide 3 ERP badge pulsante */
    @keyframes erpPulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4)} 50%{box-shadow:0 0 0 8px rgba(34,197,94,0)} }
    /* Trust bar pause hover ya existe */
    /* Blog card hover ya existe */
    /* Software section marketing text */
    .sw-marketing-quote { background:rgba(59,130,246,.06); border-left:3px solid var(--c-primary); border-radius:0 .75rem .75rem 0; padding:1rem 1.25rem; margin:1.5rem 0; font-style:italic; color:var(--c-text-muted); font-size:.93rem; line-height:1.7 }
    /* Ciber badge */
    .ciber-danger-badge svg { margin-right:.4rem; vertical-align:middle }
    /* Animated counter done state */
    .counter-idx.done { animation: countDone .3s ease }
    @keyframes countDone { 0%{transform:scale(1)} 50%{transform:scale(1.15)} 100%{transform:scale(1)} }
    /* Section number accent */
    .sec-num { display:inline-block; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--c-primary); margin-bottom:.5rem; opacity:.7 }
    /* Hosting stats chips */
    .hosting-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 }
    .hosting-chip { background:rgba(14,165,233,.1); border:1px solid rgba(14,165,233,.2); border-radius:2rem; padding:.25rem .75rem; font-size:.76rem; font-weight:700; color:var(--c-primary) }
    /* CTA final glow */
    #sec-cta-final::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:300px; background:radial-gradient(ellipse,rgba(59,130,246,.08) 0%,transparent 70%); pointer-events:none }
    #sec-cta-final { position:relative }
    /* Blog read time style */
    .read-time { font-size:.72rem; color:var(--c-text-muted); display:inline-flex; align-items:center; gap:.25rem }