/* ═══════════════════════════════════════
       VARIABLES COSMO — PALETA MARCA 360SUMA
    ═══════════════════════════════════════ */
    :root {
      /* Fondos deep space */
      --bg-deep:    #010812;
      --bg-surface: #040D1E;
      --bg-mid:     #071325;

      /* Azules de marca (Pantone 2758C + 300C) */
      --blue-deep:  #0A1C5B;
      --blue-mid:   #0062B1;
      --blue-light: #3B8EE0;
      --blue-glow:  rgba(0, 98, 177, 0.28);

      /* Acentos cósmicos (del gradiente del símbolo) */
      --pink:       #D946A8;
      --teal:       #00C9C8;
      --gold:       #C8A84B;
      --gold-light: #E8CA7A;

      /* Glass dark */
      --glass:        rgba(0, 98, 177, 0.07);
      --glass-hover:  rgba(0, 98, 177, 0.14);
      --glass-border: rgba(59, 142, 224, 0.22);
      --glass-border-gold: rgba(200, 168, 75, 0.3);

      /* Texto */
      --text-1: #EDF4FF;
      --text-2: #8BA8CC;
      --text-3: #3A5570;

      /* Efectos */
      --glow-blue: 0 0 48px rgba(0,98,177,0.35);
      --glow-gold: 0 0 40px rgba(200,168,75,0.25);
      --trans: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ═══════════════════════════════════════
       RESET & BASE
    ═══════════════════════════════════════ */
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior: smooth; }

    body {
      font-family: 'Montserrat', sans-serif;
      background: var(--bg-deep);
      color: var(--text-1);
      overflow-x: hidden;
      line-height: 1.6;
    }

    /* ── Scroll progress bar ── */
    #scroll-progress {
      position:fixed; top:0; left:0; height:2px; width:0%;
      background:linear-gradient(90deg, var(--blue-mid), var(--blue-light), var(--gold));
      z-index:2001; transition:width .05s linear;
      box-shadow:0 0 8px rgba(59,142,224,.6);
    }

    /* ── Split-word animation ── */
    .word-wrap { display:inline-block; overflow:hidden; vertical-align:bottom; }
    .word { display:inline-block; transform:translateY(105%); }

    /* ── Eyebrow clip wipe ── */
    .section-eyebrow { clip-path:inset(0 100% 0 0); }
    .section-eyebrow.anim-in { clip-path:inset(0 0% 0 0); transition:clip-path .7s cubic-bezier(.4,0,.2,1); }

    /* Grain overlay sutil */
    body::after {
      content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
      opacity:.5;
    }

    section { position:relative; z-index:1; }

    /* ═══════════════════════════════════════
       CANVAS DE ESTRELLAS (JS lo rellena)
    ═══════════════════════════════════════ */
    #stars-canvas {
      position:fixed; top:0; left:0; width:100%; height:100%;
      z-index:0; pointer-events:none;
    }

    /* ═══════════════════════════════════════
       NAVEGACIÓN FLOTANTE
    ═══════════════════════════════════════ */
    nav {
      position:fixed; top:20px; left:50%; transform:translateX(-50%);
      width:calc(100% - 48px); max-width:1200px;
      z-index:1000;
      background:rgba(1,8,18,0.75);
      backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
      border:1px solid var(--glass-border);
      border-radius:16px;
      padding:14px 32px;
      display:flex; align-items:center; justify-content:space-between;
      transition:var(--trans);
    }

    .nav-logo {
      text-decoration:none;
      display:flex; align-items:center;
    }
    .nav-logo-img {
      height:44px; width:auto;
      object-fit:contain;
      filter:brightness(1) drop-shadow(0 0 8px rgba(0,98,177,.35));
      transition:filter .3s ease;
    }
    .nav-logo:hover .nav-logo-img {
      filter:brightness(1.1) drop-shadow(0 0 14px rgba(59,142,224,.55));
    }

    .nav-links { display:flex; gap:28px; list-style:none; }
    .nav-links a {
      color:var(--text-2); text-decoration:none;
      font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
      transition:color .2s;
    }
    .nav-links a:hover { color:var(--blue-light); }

    .nav-cta {
      background:linear-gradient(135deg, var(--blue-mid), var(--blue-light));
      color:#fff !important; padding:9px 22px; border-radius:8px;
      font-weight:700 !important; letter-spacing:.1em !important;
      box-shadow:var(--glow-blue);
      transition:var(--trans) !important;
    }
    .nav-cta:hover { transform:translateY(-1px); box-shadow:0 0 64px rgba(0,98,177,.5) !important; }

    .nav-toggle {
      display:none; flex-direction:column; justify-content:center; gap:5px;
      width:32px; height:32px; background:transparent; border:none;
      cursor:pointer; padding:0;
    }
    .nav-toggle span {
      display:block; width:100%; height:2px; background:var(--text-1);
      border-radius:2px; transition:var(--trans);
    }
    .nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2) { opacity:0; }
    .nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

    /* ═══════════════════════════════════════
       HERO — VIDEO CINEMATIC
    ═══════════════════════════════════════ */
    #hero {
      position:relative; width:100%; height:100vh;
      overflow:hidden; display:flex; align-items:flex-end; justify-content:flex-start;
    }

    .hero-video {
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      min-width:100%; min-height:100%;
      width:auto; height:auto;
      object-fit:cover; z-index:1;
    }

    /* Gradiente sobre video */
    .hero-overlay {
      position:absolute; inset:0; z-index:2;
      background:linear-gradient(
        to bottom,
        rgba(1,8,18,.25) 0%,
        rgba(1,8,18,.55) 40%,
        rgba(1,8,18,.92) 100%
      );
    }

    /* Resplandor cósmico detrás del texto */
    .hero-glow-orb {
      position:absolute; bottom:-80px; left:-100px;
      width:800px; height:700px; z-index:2; pointer-events:none;
      background:radial-gradient(ellipse,
        rgba(0,98,177,.15) 0%,
        rgba(217,70,168,.05) 45%,
        transparent 70%
      );
    }

    .hero-content {
      position:relative; z-index:3;
      text-align:left; max-width:820px;
      padding:0 48px 120px 64px;
    }

    .hero-eyebrow {
      font-size:.68rem; letter-spacing:.35em; text-transform:uppercase;
      color:var(--gold); margin-bottom:24px;
      opacity:0; transform:translateY(16px);
    }

    .hero-title {
      font-size:clamp(1.8rem,3.8vw,3.4rem);
      font-weight:600; line-height:1.05; letter-spacing:.02em;
      margin-bottom:8px;
      opacity:0; transform:translateY(30px);
    }

    .hero-sub {
      font-size:clamp(.9rem,2vw,1.15rem);
      font-weight:300; color:var(--text-2);
      letter-spacing:.04em; margin-bottom:6px;
      opacity:0; transform:translateY(20px);
    }
    .hero-sub em { color:var(--gold-light); font-style:italic; font-weight:600; }

    .hero-desc {
      font-size:.92rem; color:var(--text-2);
      max-width:580px; margin:20px 0 44px;
      font-weight:300; line-height:1.85;
      opacity:0; transform:translateY(20px);
    }

    .hero-btns {
      display:flex; gap:16px; justify-content:flex-start; flex-wrap:wrap;
      opacity:0; transform:translateY(20px);
    }

    .btn-primary {
      background:transparent; color:var(--blue-light);
      padding:15px 40px; border-radius:8px;
      text-decoration:none; font-size:.8rem; font-weight:700;
      letter-spacing:.12em; text-transform:uppercase;
      border:1px solid var(--glass-border); transition:var(--trans); cursor:pointer;
    }
    .btn-primary:hover {
      background:rgba(0,98,177,.12); border-color:var(--blue-light);
      transform:translateY(-2px); box-shadow:0 0 48px rgba(0,98,177,.3);
    }

    .btn-ghost {
      background:transparent; color:var(--gold-light);
      padding:15px 40px; border-radius:8px; text-decoration:none;
      font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
      border:1px solid var(--glass-border-gold); transition:var(--trans); cursor:pointer;
    }
    .btn-ghost:hover { background:rgba(200,168,75,.1); border-color:var(--gold); }

    /* CTA intermedio */
    .mid-cta {
      display:flex; justify-content:center; margin-top:56px;
    }
    .mid-cta a {
      display:inline-flex; align-items:center; gap:10px;
      color:var(--blue-light); text-decoration:none;
      font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
      padding:16px 34px; border:1px solid var(--glass-border); border-radius:8px;
      transition:var(--trans);
    }
    .mid-cta a:hover {
      background:rgba(0,98,177,.12); border-color:var(--blue-light);
      transform:translateY(-2px); box-shadow:0 0 48px rgba(0,98,177,.3);
    }
    .mid-cta a svg { width:16px; height:16px; transition:transform .3s ease; }
    .mid-cta a:hover svg { transform:translateX(4px); }

    /* Scroll indicator */
    .scroll-down {
      position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
      z-index:3; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
      opacity:0;
    }
    .scroll-down span {
      font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; color:var(--text-3);
    }
    .scroll-line {
      width:1px; height:48px;
      background:linear-gradient(to bottom, var(--blue-light), transparent);
      animation:scrollPulse 2s ease-in-out infinite;
    }
    @keyframes scrollPulse {
      0%,100% { opacity:.3; transform:scaleY(1); }
      50%      { opacity:1;  transform:scaleY(1.15); }
    }

    /* ═══════════════════════════════════════
       UTILIDADES SECCIÓN
    ═══════════════════════════════════════ */
    .container { max-width:1200px; margin:0 auto; padding:0 24px; }

    .section-header { text-align:center; margin-bottom:72px; }
    .section-eyebrow {
      display:block; font-size:.65rem; letter-spacing:.35em; text-transform:uppercase;
      color:var(--gold); margin-bottom:16px;
    }
    .section-title {
      font-size:clamp(1.7rem,3.5vw,2.8rem);
      font-weight:800; letter-spacing:.03em; line-height:1.15; margin-bottom:16px;
    }
    .section-lead {
      font-size:.95rem; color:var(--text-2); max-width:580px;
      margin:0 auto; font-weight:300; line-height:1.8;
    }
    .section-bar {
      width:56px; height:2px; margin:24px auto 0;
      background:linear-gradient(90deg, var(--blue-mid), var(--teal), var(--pink));
      border-radius:2px;
    }

    /* Scroll reveal */
    .reveal { opacity:0; transform:translateY(44px); transition:opacity .8s ease,transform .8s ease; }
    .reveal.on { opacity:1; transform:translateY(0); }
    .d1 { transition-delay:.1s; } .d2 { transition-delay:.2s; }
    .d3 { transition-delay:.3s; } .d4 { transition-delay:.4s; }
    .d5 { transition-delay:.5s; } .d6 { transition-delay:.6s; }

    /* ═══════════════════════════════════════
       ECOSISTEMA — DIAGRAMA HEXAGONAL
    ═══════════════════════════════════════ */
    #ecosistema {
      padding:120px 24px;
      background:var(--bg-deep);
    }

    .hex-wrapper {
      position:relative; max-width:620px; margin:0 auto;
    }

    .hex-svg { width:100%; height:auto; overflow:visible; }

    /* Estilos SVG hexágonos */
    .hex-unit { cursor:pointer; outline:none; }
    .hex-unit:focus { outline:none; }
    .hex-unit:focus-visible path.octa-shape {
      filter:drop-shadow(0 0 8px rgba(59,142,224,.8));
    }
    .hex-unit path.octa-shape {
      transition:filter .3s ease, opacity .3s ease;
      stroke-width:1.5;
    }
    .hex-unit:hover path.octa-shape { filter:brightness(1.4) drop-shadow(0 0 12px rgba(59,142,224,.6)); }
    .hex-unit image { opacity:.45; transition:opacity .3s ease; }
    .hex-unit:hover image { opacity:1; }
    .hex-unit text { pointer-events:none; user-select:none; }

    .hex-center image {
      filter:none;
      transition:filter .4s ease;
    }
    .hex-center:hover image {
      filter:drop-shadow(0 0 22px rgba(0,201,200,.75));
    }

    .conn-line {
      stroke:rgba(59,142,224,.3); stroke-width:1.2;
      stroke-dasharray:6,5;
      animation:flowLine 3s linear infinite;
    }
    @keyframes flowLine {
      from { stroke-dashoffset:0; } to { stroke-dashoffset:-22; }
    }

    .inter-line {
      fill:none;
      stroke-width:1;
      stroke-dasharray:4 12;
      animation:interFlow 2.4s linear infinite;
    }
    @keyframes interFlow {
      from { stroke-dashoffset:0; } to { stroke-dashoffset:-32; }
    }

    .hex-pulse {
      animation:hexPulse 4s ease-in-out infinite;
    }
    @keyframes hexPulse {
      0%,100% { opacity:.15; transform-origin:center; transform:scale(1); }
      50%      { opacity:.3;  transform:scale(1.04); }
    }

    /* Etiquetas de la leyenda */
    .hex-legend {
      display:grid; grid-template-columns:repeat(3,1fr);
      gap:12px; margin-top:40px; max-width:580px; margin-left:auto; margin-right:auto;
    }
    .hex-legend-item {
      display:flex; align-items:center; gap:8px;
      font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
      color:var(--text-2); cursor:pointer; padding:10px 14px;
      background:var(--glass); border:1px solid var(--glass-border);
      border-radius:8px; transition:var(--trans);
    }
    .hex-legend-item:hover { background:var(--glass-hover); color:var(--text-1); border-color:var(--blue-light); }
    .hex-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

    /* ═══════════════════════════════════════
       MODAL
    ═══════════════════════════════════════ */
    /* ═══════════════════════════════════════
       MODAL — REDISEÑO RADICAL
    ═══════════════════════════════════════ */
    .modal-overlay {
      position:fixed; inset:0;
      background:rgba(1,8,18,.92);
      backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
      z-index:2000; display:flex; align-items:center; justify-content:center; padding:20px;
      opacity:0; pointer-events:none; transition:opacity .3s ease;
    }
    .modal-frame {
      display:flex; align-items:center; gap:16px;
      width:100%; max-width:1080px;
    }
    .modal-overlay.open { opacity:1; pointer-events:all; }

    .modal-box {
      background:#060E24;
      border:1px solid rgba(59,142,224,.2); border-radius:20px;
      flex:1; min-width:0; max-width:920px; max-height:92vh;
      overflow-y:auto; overflow-x:hidden;
      position:relative;
      transform:scale(.93) translateY(28px);
      transition:transform .38s cubic-bezier(.34,1.5,.64,1);
      box-shadow:0 0 100px rgba(0,98,177,.18), 0 32px 80px rgba(0,0,0,.6);
    }
    .modal-box::-webkit-scrollbar { width:4px; }
    .modal-box::-webkit-scrollbar-track { background:transparent; }
    .modal-box::-webkit-scrollbar-thumb { background:rgba(59,142,224,.3); border-radius:2px; }
    .modal-overlay.open .modal-box { transform:scale(1) translateY(0); }

    /* Botón cerrar */
    .modal-close {
      position:absolute; top:14px; right:14px; z-index:20;
      width:34px; height:34px; border-radius:50%;
      background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
      color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
      font-size:.95rem; transition:var(--trans); line-height:1;
    }
    .modal-close:hover { background:rgba(255,255,255,.22); transform:scale(1.08); }

    /* ── Navegación entre unidades ── */
    .modal-nav {
      flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      width:42px; height:42px; border-radius:50%;
      background:rgba(6,14,36,.75); border:1px solid var(--glass-border);
      color:var(--text-2); cursor:pointer;
      transition:var(--trans); backdrop-filter:blur(8px);
    }
    .modal-nav:hover {
      background:rgba(0,98,177,.25); border-color:var(--blue-light);
      color:#fff; transform:scale(1.12);
    }
    .modal-nav svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

    /* Indicador de posición */
    .modal-nav-dots {
      position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
      display:flex; gap:6px; z-index:30;
    }
    .modal-nav-dot {
      width:5px; height:5px; border-radius:50%;
      background:rgba(255,255,255,.2); transition:var(--trans); cursor:pointer;
    }
    .modal-nav-dot.active { background:var(--gold); transform:scale(1.3); }

    /* ── HERO ─────────────────────────────── */
    .modal-hero {
      display:grid; grid-template-columns:1fr 1fr;
      min-height:240px; border-radius:20px 20px 0 0; overflow:hidden;
    }
    .modal-hero-left {
      padding:36px 36px 32px;
      background:linear-gradient(135deg,#030B1E 0%,#060F26 100%);
      display:flex; flex-direction:column; justify-content:center; position:relative;
    }
    .modal-hero-left::after {
      content:''; position:absolute; right:0; top:0; bottom:0; width:1px;
      background:linear-gradient(to bottom, transparent, rgba(59,142,224,.3), transparent);
    }
    .modal-hero-right {
      position:relative; overflow:hidden; min-height:220px;
      display:flex; align-items:center; justify-content:center;
    }
    .modal-hero-right-bg {
      position:absolute; inset:0; background-size:cover; background-position:center;
    }
    /* Hero right — imagen real */
    .modal-hero-right-img {
      position:absolute; inset:0; width:100%; height:100%;
      object-fit:cover; object-position:center top;
      display:block;
    }
    .modal-hero-right-overlay {
      position:absolute; inset:0;
      background:linear-gradient(90deg, rgba(3,11,30,.55) 0%, transparent 65%),
                 linear-gradient(to top, rgba(3,11,30,.4) 0%, transparent 50%);
      pointer-events:none;
    }
    /* Partículas decorativas en el hero derecho */
    .modal-hero-right svg.deco {
      position:absolute; inset:0; width:100%; height:100%; opacity:.9;
    }

    .modal-unit-logo {
      height:72px; width:auto; object-fit:contain;
      margin-bottom:18px; display:block; align-self:flex-start;
    }
    .modal-unit-label {
      font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
      color:var(--gold); margin-bottom:10px; font-weight:600;
    }
    .modal-unit-name {
      font-size:1.55rem; font-weight:400; letter-spacing:.03em;
      line-height:1.1; margin-bottom:8px;
    }
    .modal-category {
      display:inline-block; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
      font-weight:700; padding:4px 12px; border-radius:20px; margin-bottom:16px;
      border:1px solid; opacity:.85;
    }
    .modal-tagline {
      font-size:.95rem; font-weight:500; line-height:1.5; color:#EDF4FF; margin-bottom:10px;
    }
    .modal-tagline em { font-style:normal; }
    .modal-desc {
      font-size:.78rem; color:var(--text-2); line-height:1.75; font-weight:300;
    }

    /* ── CARDS ────────────────────────────── */
    .modal-cards {
      display:grid; gap:10px; padding:16px 16px 0;
      background:rgba(3,9,22,.85);
    }
    .modal-cards.cols-3 { grid-template-columns:repeat(3,1fr); }
    .modal-cards.cols-2 { grid-template-columns:repeat(2,1fr); }

    .modal-card {
      background:rgba(255,255,255,.03);
      border-radius:12px; padding:18px 16px;
      border:1px solid rgba(255,255,255,.07);
    }
    .modal-card-title {
      font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
      margin-bottom:10px; padding-bottom:8px;
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .modal-card-body {
      font-size:.76rem; color:var(--text-2); line-height:1.72; font-weight:300;
    }
    .modal-card-body strong {
      color:var(--text-1); font-weight:700; display:block; margin-bottom:5px;
    }
    .modal-card-body ul { list-style:none; display:flex; flex-direction:column; gap:4px; margin-top:4px; }
    .modal-card-body ul li { display:flex; align-items:flex-start; gap:6px; }
    .modal-card-body ul li::before {
      content:'·'; font-weight:900; margin-top:1px; flex-shrink:0;
    }

    /* ── BENEFICIOS ───────────────────────── */
    .modal-benefits {
      padding:14px 16px 0; background:rgba(3,9,22,.85);
    }
    .modal-benefits-title {
      font-size:.62rem; font-weight:800; letter-spacing:.28em; text-transform:uppercase;
      text-align:center; margin-bottom:12px;
    }
    .modal-benefits-grid {
      display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding-bottom:14px;
    }
    .modal-benefit {
      display:flex; align-items:center; gap:8px;
      background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
      border-radius:8px; padding:9px 14px;
      flex:1; min-width:160px; max-width:220px;
    }
    .modal-benefit-icon {
      width:30px; height:30px; border-radius:7px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      background:rgba(255,255,255,.06);
    }
    .modal-benefit-icon svg { width:16px; height:16px; fill:none; stroke-width:1.6; }
    .modal-benefit-text { font-size:.7rem; color:var(--text-2); font-weight:500; line-height:1.3; }

    /* ── CTA ──────────────────────────────── */
    .modal-cta {
      padding:14px 16px 20px; background:rgba(3,9,22,.85);
      border-radius:0 0 20px 20px;
      display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
    }
    .modal-cta-btn.secondary {
      background:transparent;
      color:var(--btn-accent, var(--gold-light));
      border:1px solid var(--btn-accent, var(--gold));
    }
    .modal-cta-btn.secondary:hover {
      background:var(--btn-accent, var(--gold));
      color:#040B1E;
      box-shadow:0 8px 36px color-mix(in srgb, var(--btn-accent, var(--gold)) 35%, transparent);
    }
    .modal-cta-btn {
      background:transparent;
      color:var(--gold-light); padding:13px 40px;
      border:1px solid var(--gold);
      border-radius:50px;
      font-family:'Montserrat',sans-serif; font-size:.76rem; font-weight:700;
      letter-spacing:.1em; text-transform:uppercase;
      cursor:pointer; transition:var(--trans);
      width:auto; text-align:center;
      text-decoration:none; display:inline-block;
    }
    .modal-cta-btn:hover {
      background:linear-gradient(135deg,#C8A84B,#E8CA7A);
      color:#040B1E; transform:translateY(-2px);
      box-shadow:0 8px 36px rgba(200,168,75,.35);
    }

    @media(max-width:680px) {
      .modal-hero { grid-template-columns:1fr; }
      .modal-hero-right { display:none; }
      .modal-cards.cols-3, .modal-cards.cols-2 { grid-template-columns:1fr; }
      .modal-box { max-height:95vh; }
      .modal-nav { display:none; }
      .modal-frame { gap:0; }
    }

    /* ═══════════════════════════════════════
       METODOLOGÍA — KAIZEN
    ═══════════════════════════════════════ */
    #metodologia {
      padding:120px 24px;
      background:var(--bg-deep);
      overflow:hidden;
    }

    .metod-grid {
      display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
    }

    /* Visual orbital Kaizen */
    .kaizen-visual { position:relative; display:flex; align-items:center; justify-content:center; }

    .kaizen-ring {
      position:relative;
      width:min(380px,100%); height:min(380px,100%);
    }

    .kaizen-ring-outer {
      position:absolute; inset:-12px; border-radius:50%;
      border:1px dashed rgba(59,142,224,.25);
      animation:spin 24s linear infinite;
    }
    .kaizen-ring-inner {
      position:absolute; inset:24px; border-radius:50%;
      border:1px dashed rgba(200,168,75,.18);
      animation:spin 18s linear infinite reverse;
    }
    @keyframes spin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

    .kaizen-dot-outer {
      position:absolute; top:-5px; left:50%; transform:translateX(-50%);
      width:10px; height:10px; border-radius:50%;
      background:var(--blue-light); box-shadow:0 0 14px var(--blue-light);
    }
    .kaizen-dot-inner {
      position:absolute; bottom:-4px; left:50%; transform:translateX(-50%);
      width:8px; height:8px; border-radius:50%;
      background:var(--gold); box-shadow:0 0 12px var(--gold);
    }

    .kaizen-center {
      position:absolute; inset:0; display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      background:radial-gradient(ellipse, rgba(0,98,177,.12) 0%, transparent 70%);
      border-radius:50%;
    }

    .kaizen-k {
      font-size:5rem; font-weight:900; line-height:1;
      background:linear-gradient(135deg, var(--gold), var(--gold-light), var(--blue-light));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .kaizen-label {
      font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
      color:var(--text-3); margin-top:4px;
    }
    .kaizen-sub {
      font-size:.72rem; letter-spacing:.1em; color:var(--blue-light);
      font-weight:600; margin-top:2px;
    }

    /* Contenido texto */
    .metod-content {}

    .metod-intro {
      font-size:.95rem; color:var(--text-2); line-height:1.85; font-weight:300; margin-bottom:12px;
    }
    .metod-intro strong { color:var(--text-1); font-weight:700; }

    .metod-promise {
      font-size:1.1rem; color:var(--text-1); font-weight:600;
      font-style:italic; line-height:1.5; margin-bottom:40px; padding-left:16px;
      border-left:2px solid var(--blue-light);
    }

    .kaizen-cards { display:flex; flex-direction:column; gap:14px; }

    .kaizen-card {
      background:var(--glass); border:1px solid var(--glass-border);
      border-radius:12px; padding:20px 24px;
      display:flex; align-items:center; gap:16px;
      backdrop-filter:blur(12px); transition:var(--trans); cursor:default;
    }
    .kaizen-card:hover {
      background:var(--glass-hover); border-color:rgba(59,142,224,.4);
      transform:translateX(6px);
    }
    .kaizen-num {
      font-size:1.8rem; font-weight:900; color:var(--blue-light); min-width:36px;
      line-height:1;
    }
    .kaizen-card-text strong {
      display:block; font-size:.88rem; font-weight:700; color:var(--text-1);
      letter-spacing:.05em; margin-bottom:2px;
    }
    .kaizen-card-text span { font-size:.8rem; color:var(--text-2); font-weight:300; }

    /* ── Stats + Chart ── */
    .stats-block {
      margin-top:80px; padding-top:60px;
    }
    .stats-grid {
      display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
      margin-top:48px;
    }
    .stat-item {}
    .stat-value {
      font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800;
      background:linear-gradient(135deg, var(--gold-light), var(--blue-light));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
      line-height:1; margin-bottom:6px;
    }
    .stat-label {
      font-size:.78rem; color:var(--text-2); font-weight:400; letter-spacing:.04em;
    }
    /* Chart SVG */
    .stats-chart {
      margin-top:40px; width:100%; overflow:visible;
      background:none; border:none;
      padding:0; position:relative; cursor:crosshair; user-select:none;
    }
    .stats-chart svg { display:block; width:100%; height:auto; overflow:visible; }
    .chart-area-path { fill:url(#chartGrad); opacity:1; }
    .chart-line-path {
      fill:none; stroke:var(--blue-light); stroke-width:1;
      stroke-linecap:round; stroke-linejoin:round;
      stroke-dasharray:1400; stroke-dashoffset:1400;
    }
    .stats-chart.in-view .chart-line-path {
      animation: drawLine 2s cubic-bezier(.4,0,.2,1) forwards;
    }
    @keyframes drawLine { to { stroke-dashoffset:0; } }
    /* Cursor vertical — sólido, sutil */
    .chart-vline {
      stroke:rgba(59,142,224,.25); stroke-width:1;
      opacity:0; transition:opacity .1s; pointer-events:none;
    }
    /* Dot activo — solo en hover */
    .chart-active-dot {
      fill:#fff; stroke:var(--blue-light); stroke-width:1.5;
      r:4; opacity:0; transition:opacity .1s; pointer-events:none;
    }
    /* Tooltip minimalista */
    .chart-tooltip {
      position:absolute; pointer-events:none;
      background:rgba(4,10,28,.88); border:1px solid rgba(59,142,224,.2);
      backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
      border-radius:6px; padding:6px 12px;
      font-family:'Montserrat',sans-serif; white-space:nowrap;
      opacity:0; transition:opacity .1s; z-index:10;
      transform:translate(-50%, -100%);
    }
    .chart-tooltip-value {
      font-size:.82rem; font-weight:700; color:var(--text-1); display:block;
    }
    .chart-tooltip-label {
      font-size:.68rem; color:var(--text-3); font-weight:400;
    }

    /* ═══════════════════════════════════════
       QUÉ HACEMOS
    ═══════════════════════════════════════ */
    #que-hacemos {
      padding:120px 24px;
      background: var(--bg-deep);
      position:relative; overflow:hidden;
    }

    /* Imagen wide con blend — emerge sobre el negro sin quemar el texto */
    .qh-bg {
      position:absolute; inset:0; z-index:0; pointer-events:none;
    }
    .qh-bg img {
      width:100%; height:100%;
      object-fit:cover; object-position:center 35%;
      display:block;
      mix-blend-mode:screen;
      opacity:.68;
    }
    /* Vignette: oscurece bordes y zona de cards para mantener contraste */
    .qh-bg::after {
      content:''; position:absolute; inset:0;
      background:
        radial-gradient(ellipse 80% 60% at 50% 40%, transparent 30%, rgba(1,6,16,.72) 100%),
        linear-gradient(to bottom, var(--bg-deep) 0%, transparent 25%, transparent 72%, var(--bg-deep) 100%);
    }

    /* Container sube sobre la capa de imagen */
    #que-hacemos > .container { position:relative; z-index:1; }

    .services-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
    }

    .svc-card {
      background:var(--glass); border:1px solid var(--glass-border);
      border-radius:16px; padding:36px 28px;
      backdrop-filter:blur(14px); transition:var(--trans);
      cursor:default; position:relative; overflow:hidden;
    }
    .svc-card::before {
      content:''; position:absolute; top:0; left:0; right:0; height:2px;
      background:linear-gradient(90deg, transparent, var(--blue-light), transparent);
      opacity:0; transition:opacity .3s;
    }
    .svc-card:hover::before { opacity:1; }
    .svc-card:hover {
      background:var(--glass-hover); transform:translateY(-5px);
      box-shadow:0 24px 64px rgba(0,98,177,.14);
    }

    .svc-icon {
      height:44px; margin-bottom:28px;
      display:flex; align-items:center;
    }
    .svc-icon img { height:100%; width:auto; object-fit:contain; display:block; }

    .svc-title {
      font-size:.95rem; font-weight:700; letter-spacing:.04em; margin-bottom:10px;
    }
    .svc-desc { font-size:.82rem; color:var(--text-2); line-height:1.75; font-weight:300; }

    /* ═══════════════════════════════════════
       TESTIMONIALES
    ═══════════════════════════════════════ */
    #testimoniales {
      padding:120px 24px;
      background:var(--bg-deep);
      position:relative; overflow:hidden;
    }
    #testimoniales::before, #testimoniales::after {
      content:''; position:absolute; left:0; right:0; height:160px; z-index:0; pointer-events:none;
    }
    #testimoniales::before { top:0; background:linear-gradient(to bottom, var(--bg-deep), transparent); }
    #testimoniales::after  { bottom:0; background:linear-gradient(to top, var(--bg-deep), transparent); }
    #testimoniales > .container { position:relative; z-index:1; }

    .test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

    .test-card {
      background:var(--glass); border:1px solid var(--glass-border);
      border-radius:16px; padding:36px 28px;
      backdrop-filter:blur(14px); transition:var(--trans);
    }
    .test-card:hover { background:var(--glass-hover); transform:translateY(-4px); }

    .test-stars { display:flex; gap:3px; margin-bottom:18px; }
    .test-stars svg { width:14px; height:14px; fill:var(--gold); }

    .test-quote {
      font-size:.88rem; color:var(--text-2); line-height:1.85;
      font-style:italic; font-weight:300; margin-bottom:24px;
    }

    .test-author { display:flex; align-items:center; gap:12px; }
    .test-avatar {
      width:44px; height:44px; border-radius:50%;
      background:linear-gradient(135deg, var(--blue-mid), var(--blue-light));
      display:flex; align-items:center; justify-content:center;
      font-weight:800; font-size:.95rem; color:#fff; flex-shrink:0;
    }
    .test-name { font-size:.88rem; font-weight:700; letter-spacing:.04em; }
    .test-role { font-size:.72rem; color:var(--text-3); margin-top:2px; }

    /* ═══════════════════════════════════════
       FORMULARIO
    ═══════════════════════════════════════ */
    #formulario {
      padding:120px 24px;
      background:var(--bg-deep); position:relative; overflow:hidden;
    }
    #formulario::before, #formulario::after {
      content:''; position:absolute; left:0; right:0; height:160px; z-index:0; pointer-events:none;
    }
    #formulario::before { top:0; background:linear-gradient(to bottom, var(--bg-deep), transparent); }
    #formulario::after  { bottom:0; background:linear-gradient(to top, var(--bg-deep), transparent); }
    #formulario > .container { position:relative; z-index:1; }

    /* ── Aurora Background — traducción CSS vanilla del componente ── */
    @keyframes aurora {
      from { background-position: 50% 50%, 50% 50%; }
      to   { background-position: 350% 50%, 350% 50%; }
    }

    .aurora-bg {
      position:absolute; inset:0; overflow:hidden;
      pointer-events:none; z-index:0;
    }

    .aurora-layer {
      position:absolute; inset:-10px;
      opacity:.55; will-change:transform;
      /* Capa negra con bandas + colores aurora 360Suma */
      background-image:
        repeating-linear-gradient(100deg,
          #000 0%, #000 7%,
          transparent 10%, transparent 12%,
          #000 16%),
        repeating-linear-gradient(100deg,
          #0062B1 10%,
          #3B8EE0 16%,
          #00C9C8 22%,
          #0A1C5B 28%,
          #C8A84B 32%,
          #0062B1 40%);
      background-size: 300%, 200%;
      background-position: 50% 50%, 50% 50%;
      filter: blur(12px);
      animation: aurora 55s linear infinite;
      /* Máscara radial: emerge desde esquina superior-derecha */
      -webkit-mask-image: radial-gradient(ellipse 85% 75% at 75% 0%, #000 10%, transparent 68%);
      mask-image:         radial-gradient(ellipse 85% 75% at 75% 0%, #000 10%, transparent 68%);
    }

    /* Segunda capa animada desfasada con mix-blend-mode: difference */
    .aurora-layer::after {
      content:''; position:absolute; inset:0;
      background-image:
        repeating-linear-gradient(100deg,
          #000 0%, #000 7%,
          transparent 10%, transparent 12%,
          #000 16%),
        repeating-linear-gradient(100deg,
          #0062B1 10%,
          #3B8EE0 16%,
          #00C9C8 22%,
          #0A1C5B 28%,
          #C8A84B 32%,
          #0062B1 40%);
      background-size: 200%, 100%;
      background-attachment: fixed;
      mix-blend-mode: difference;
      animation: aurora 55s linear infinite reverse;
    }

    /* El container sube sobre la aurora */

    .form-card {
      max-width:680px; margin:0 auto;
      background:rgba(1,6,16,.78); border:1px solid rgba(255,255,255,.07);
      border-top:1px solid rgba(200,168,75,.25);
      border-radius:0; padding:64px;
      backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
    }

    .form-2col { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
    .form-group { margin-bottom:22px; }
    .form-group label {
      display:block; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
      color:var(--text-3); margin-bottom:8px; font-weight:600;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width:100%; background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.09); border-radius:10px;
      padding:14px 18px; color:var(--text-1);
      font-family:'Montserrat',sans-serif; font-size:.88rem; font-weight:300;
      transition:var(--trans); outline:none; appearance:none;
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color:var(--blue-light);
      background:rgba(0,98,177,.07);
      box-shadow:0 0 0 3px rgba(0,98,177,.13);
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color:var(--text-3); }
    .form-group select option { background:var(--bg-surface); color:var(--text-1); }
    .form-group textarea { min-height:120px; resize:vertical; }

    .form-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }

    .form-submit {
      flex:1; min-width:220px;
      background:linear-gradient(135deg, var(--blue-mid), var(--blue-light));
      color:#fff; padding:17px; border:none; border-radius:10px;
      font-family:'Montserrat',sans-serif; font-size:.82rem; font-weight:700;
      letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
      transition:var(--trans); box-shadow:0 4px 28px rgba(0,98,177,.32);
    }
    .form-submit:hover { transform:translateY(-2px); box-shadow:0 8px 48px rgba(0,98,177,.5); }

    .form-schedule {
      flex:1; min-width:220px;
      display:flex; align-items:center; justify-content:center;
      background:transparent; color:var(--blue-light);
      padding:17px; border:1px solid var(--glass-border); border-radius:10px;
      font-family:'Montserrat',sans-serif; font-size:.82rem; font-weight:700;
      letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
      text-decoration:none; text-align:center; transition:var(--trans);
    }
    .form-schedule:hover {
      background:rgba(0,98,177,.12); border-color:var(--blue-light);
      transform:translateY(-2px); box-shadow:0 0 48px rgba(0,98,177,.3);
    }

    /* WhatsApp flotante */
    .whatsapp-fab {
      position:fixed; bottom:32px; right:32px; z-index:900;
      width:56px; height:56px; border-radius:50%;
      background:linear-gradient(135deg,#25D366,#128C7E);
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 4px 20px rgba(37,211,102,.4); cursor:pointer;
      transition:var(--trans); text-decoration:none;
    }
    .whatsapp-fab:hover { transform:scale(1.08); box-shadow:0 8px 32px rgba(37,211,102,.55); }
    .whatsapp-fab svg { width:28px; height:28px; fill:#fff; }
    .whatsapp-wrap { position:fixed; bottom:32px; right:32px; z-index:900; display:flex; align-items:center; }
    .whatsapp-wrap .whatsapp-fab { position:static; }
    .whatsapp-tooltip {
      position:absolute; right:68px; bottom:14px; white-space:nowrap;
      background:rgba(4,13,30,.92); border:1px solid rgba(255,255,255,.09);
      backdrop-filter:blur(8px); border-radius:8px; padding:8px 14px;
      font-size:.72rem; font-weight:500; color:var(--text-2);
      opacity:0; transform:translateX(6px); pointer-events:none;
      transition:var(--trans);
    }
    .whatsapp-wrap:hover .whatsapp-tooltip { opacity:1; transform:translateX(0); }

    /* ═══════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════ */
    footer {
      background:var(--bg-surface);
      border-top:1px solid rgba(255,255,255,.05);
      padding:72px 24px 36px;
    }

    .footer-inner {
      max-width:1200px; margin:0 auto;
      display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:60px;
      margin-bottom:56px;
    }

    .footer-brand-logo {
      display:inline-flex; align-items:center;
      margin-bottom:16px; text-decoration:none;
    }
    .footer-logo-img {
      height:40px; width:auto; object-fit:contain;
      filter:brightness(1) drop-shadow(0 0 8px rgba(0,98,177,.3));
      transition:filter .3s ease;
    }
    .footer-brand-logo:hover .footer-logo-img {
      filter:brightness(1.1) drop-shadow(0 0 14px rgba(59,142,224,.5));
    }
    .footer-brand p {
      font-size:.82rem; color:var(--text-3); line-height:1.8; font-weight:300; max-width:280px;
    }

    .footer-col h4 {
      font-size:.65rem; letter-spacing:.25em; text-transform:uppercase;
      color:var(--gold); margin-bottom:20px; font-weight:700;
    }
    .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
    .footer-col ul li a {
      color:var(--text-3); text-decoration:none; font-size:.82rem; font-weight:300;
      transition:color .2s;
    }
    .footer-col ul li a:hover { color:var(--text-2); }

    .footer-bottom {
      max-width:1200px; margin:0 auto;
      padding-top:32px; border-top:1px solid rgba(255,255,255,.05);
      display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
    }
    .footer-bottom p { font-size:.72rem; color:var(--text-3); font-weight:300; }

    .social-row { display:flex; gap:10px; }
    .social-btn {
      width:36px; height:36px; border-radius:8px;
      background:var(--glass); border:1px solid var(--glass-border);
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; transition:var(--trans);
    }
    .social-btn:hover { background:rgba(0,98,177,.2); border-color:var(--blue-light); }
    .social-btn svg { width:16px; height:16px; fill:var(--text-3); transition:fill .2s; }
    .social-btn:hover svg { fill:var(--text-1); }

    /* ═══════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════ */
    @media (max-width:1024px) {
      .services-grid, .test-grid { grid-template-columns:repeat(2,1fr); }
      .footer-inner { grid-template-columns:1fr 1fr; gap:40px; }
    }
    @media (max-width:768px) {
      nav { top:12px; padding:12px 20px; }
      .nav-toggle { display:flex; }
      .nav-links {
        position:absolute; top:calc(100% + 12px); left:0; right:0;
        flex-direction:column; align-items:stretch; gap:0;
        background:rgba(1,8,18,.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
        border:1px solid var(--glass-border); border-radius:16px;
        max-height:0; opacity:0; overflow:hidden; pointer-events:none;
        transition:max-height .35s ease, opacity .25s ease, padding .35s ease;
        padding:0 8px;
      }
      .nav-links.open {
        max-height:400px; opacity:1; pointer-events:auto; padding:10px 8px;
      }
      .nav-links li { width:100%; }
      .nav-links a {
        display:block; padding:14px 12px; text-align:center;
        border-bottom:1px solid rgba(255,255,255,.06);
      }
      .nav-links li:last-child a { border-bottom:none; }
      .nav-links .nav-cta { margin-top:6px; }
      .metod-grid { grid-template-columns:1fr; gap:48px; }
      .kaizen-ring { width:260px; height:260px; }
      .services-grid, .test-grid { grid-template-columns:1fr; }
      .stats-grid { grid-template-columns:repeat(2,1fr); gap:24px; }
      .form-2col { grid-template-columns:1fr; }
      .form-card { padding:32px 24px; }
      .footer-inner { grid-template-columns:1fr; gap:32px; }
      .footer-bottom { flex-direction:column; align-items:flex-start; }
      .hex-legend { grid-template-columns:repeat(2,1fr); }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion:reduce) {
      .kaizen-ring-outer, .kaizen-ring-inner { animation:none; }
      .conn-line { animation:none; }
      .scroll-line { animation:none; }
      .reveal { transition:none; }
    }