:root{
    --miel:#6C4EF5;
    --miel-suave:#E4DEFC;
    --tinta:#181229;
    --gris:#665F80;
    --linea:#E9E5FA;
  }
  .clofik{font-family:'Manrope',system-ui,sans-serif;background:#fff;color:var(--tinta);overflow-x:hidden}
  .clofik *{box-sizing:border-box}
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
  h2{
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    letter-spacing: -1px;
    padding: 3rem 0 1rem 0;
    font-weight: 800;
  }
 
  /* HERO */
  .hero::before{
    content:"";position:absolute;left:50%;top:34%;width:1050px;height:1050px;
    transform:translate(-50%,-14%);
    background:radial-gradient(circle at 50% 55%,
      rgba(108,78,245,.28) 0%,rgba(228,222,252,.22) 30%,rgba(241,238,254,.12) 50%,rgba(255,255,255,0) 68%);
    filter:blur(6px);z-index:0;pointer-events:none;
  }
  .pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
    padding:7px 15px;border:1px solid var(--linea);border-radius:999px;background:#fff;color:var(--gris);margin-bottom:24px}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--miel)}
  .hero h1{margin:0 auto;max-width:880px;font-size:clamp(2.4rem,6.2vw,4.4rem);line-height:1.03;
    font-weight:800;letter-spacing:-1.8px;text-align:center; color: white;}
    
  .hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--miel) 0%,#4B2FD1 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
    
  .hero p{margin:22px auto 0;max-width:520px;color:#b7b1cf;line-height:1.6}
  .cta{margin-top:32px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .btn{padding:14px 26px;border-radius:999px;font-weight:700;text-decoration:none;font-size:.95rem;transition:.18s;display:inline-block}
  .btn-1{background:var(--tinta);color:#fff}
  .btn-1:hover{transform:translateY(-2px)}
  .btn-2{background:#fff;color:var(--tinta);border:1px solid #ddd}
 
  
  
  
  
  
  
        .hero h1 em{
          font-style:normal;
          background:linear-gradient(0deg, var(--violeta) 0%, var(--lavanda_media) 100%);
          -webkit-background-clip:text;
          background-clip:text;
          color:transparent;
        }
        
        .hero{
          position: relative;
            text-align: center;
            padding: 96px 24px 0;
            overflow: hidden;
            --hero_progreso: 0;
            background: 
         color-mix(in srgb, #0c0029, #ffffff calc(var(--hero_progreso) * 100%));
            transition: background-color .25s ease-out;
            background-image: radial-gradient(ellipse 90% 70% at 50% 30%, oklch(0.52 0.21 299.01 / 0.65) 0%, oklch(0.11 0.06 303.8) 62%);
        }
        
        .hero::before{
          content:"";
          position:absolute;
          left:50%;top:34%;
          width:1050px;height:1050px;
          transform:translate(-50%,-14%);
          background:radial-gradient(circle at 50% 55%,
            rgba(108,78,245,.42) 0%, rgba(228,222,252,.32) 30%, rgba(241,238,254,.20) 50%, rgba(255,255,255,0) 68%);
          filter:blur(6px) brightness(calc(1 + var(--hero_progreso) * 2.4));
          z-index:0;
          pointer-events:none;
          animation:hero_halo 7s ease-in-out infinite;
          transition:filter .2s ease-out;
        }
        
        .hero>*{position:relative; z-index:1;}
        
        .hero .hero_glow_1,
        .hero .hero_glow_2{
          position:absolute;
          z-index:0;
          pointer-events:none;
          border-radius:50%;
          filter:blur(40px) brightness(calc(1 + var(--hero_progreso) * 2.2));
          transition:filter .2s ease-out;
        }
        .hero .hero_glow_1{
          left:6%;top:10%;
          width:340px;height:340px;
          background:radial-gradient(circle, rgba(228,222,252,.30) 0%, rgba(108,78,245,.14) 45%, transparent 75%);
          animation:hero_flotar_1 9s ease-in-out infinite;
        }
        .hero .hero_glow_2{
          right:8%;bottom:6%;
          width:280px;height:280px;
          background:radial-gradient(circle, rgba(255,122,89,.16) 0%, rgba(108,78,245,.12) 45%, transparent 75%);
          animation:hero_flotar_2 11s ease-in-out infinite;
        }
        
        @keyframes hero_halo{
          0%,100%{opacity:.85; transform:translate(-50%,-14%) scale(1);}
          50%{opacity:1; transform:translate(-50%,-14%) scale(1.06);}
        }
        
        @keyframes hero_flotar_1{
          0%,100%{transform:translate(0,0) scale(1); opacity:.8;}
          50%{transform:translate(18px,-14px) scale(1.1); opacity:1;}
        }
        @keyframes hero_flotar_2{
          0%,100%{transform:translate(0,0) scale(1); opacity:.7;}
          50%{transform:translate(-16px,12px) scale(1.08); opacity:.95;}
        }
        
        @media(prefers-reduced-motion:reduce){
          .hero::before,
          .hero .hero_glow_1,.hero .hero_glow_2{animation:none;}
        }
        
        
        .hero>.hero_estrellas_capa{
          position:absolute;
          z-index:0;
          left:50%;top:34%;
          width:900px;height:900px;
          transform:translate(-50%,-14%);
          pointer-events:none;
          border-radius:50%;
          mask-image:radial-gradient(circle, #000 55%, transparent 78%);
          -webkit-mask-image:radial-gradient(circle, #000 55%, transparent 78%);
          overflow:hidden;
        }
        
        .hero_estrellas_capa .estrella{
          position:absolute;
          bottom:600px;
          width:var(--e_tam, 9px);
          height:var(--e_tam, 9px);
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 L6.3 3.7 L10 5 L6.3 6.3 L5 10 L3.7 6.3 L0 5 L3.7 3.7 Z' fill='white'/%3E%3C/svg%3E");
          background-size:contain;
          background-repeat:no-repeat;
          filter:drop-shadow(0 0 6px rgba(255,255,255,1)) drop-shadow(0 0 14px rgba(255,255,255,.8));
          opacity:0;
          animation-name:estrella_subir;
          animation-timing-function:ease-out;
          animation-iteration-count:infinite;
        }
        
        @keyframes estrella_subir{
          0%{ opacity:0; transform:translateY(0); }
          15%{ opacity:1; }
          80%{ opacity:.9; }
          100%{ opacity:0; transform:translateY(-620px); }
        }
        
        @media(prefers-reduced-motion:reduce){
          .hero_estrellas_capa .estrella{animation:none; opacity:0;}
        }

        /* ===== Refuerzos visuales: patrones y animaciones ===== */
        .logos{
          position:relative;
          overflow:hidden;
        }
        .logos::before{
          content:"";
          position:absolute;
          inset:0;
          background-image:radial-gradient(circle, rgba(108,78,245,.10) 1.5px, transparent 1.5px);
          background-size:22px 22px;
          pointer-events:none;
          z-index:0;
        }
        .logos span{position:relative;z-index:1;}

        .pill .dot{
          animation:dot_pulso 1.8s ease-in-out infinite;
        }
        @keyframes dot_pulso{
          0%,100%{opacity:.5; transform:scale(.85);}
          50%{opacity:1; transform:scale(1.15);}
        }

        .card{
          transition:transform .28s ease, box-shadow .28s ease;
        }
        .card:hover{
          transform:translateY(-6px);
          box-shadow:0 18px 40px rgba(108,78,245,.16);
        }
        .card .body h3{
          transition:transform .25s ease;
        }
        .card:hover .body h3{
          transform:translateX(3px);
        }

        .saber-mas, .mas-info{
          position:relative;
        }
        .saber-mas::after, .mas-info::after{
          content:"";
          position:absolute;
          left:0; bottom:-2px;
          width:0%; height:2px;
          background:currentColor;
          transition:width .25s ease;
        }
        .saber-mas:hover::after, .mas-info:hover::after{width:100%;}

        .btn, .boton_nav_cta{
          position:relative;
          overflow:hidden;
          transition:transform .2s ease, box-shadow .2s ease;
        }
        .btn:hover, .boton_nav_cta:hover{
          transform:translateY(-2px);
          box-shadow:0 10px 24px rgba(108,78,245,.25);
        }
        .btn::before, .boton_nav_cta::before{
          content:"";
          position:absolute;
          top:0; left:-60%;
          width:40%; height:100%;
          background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
          transform:skewX(-20deg);
          transition:left .5s ease;
          pointer-events:none;
        }
        .btn:hover::before, .boton_nav_cta:hover::before{left:120%;}

        .num.on{
          animation:num_aparece .5s ease both;
        }
        @keyframes num_aparece{
          0%{opacity:0; transform:translateY(14px);}
          100%{opacity:1; transform:translateY(0);}
        }

        .chip{
          transition:transform .2s ease;
        }
        .chip:hover{transform:translateY(-3px) scale(1.03);}

        .tabla-comp tbody tr{
          transition:background-color .2s ease;
        }
        .tabla-comp tbody tr:hover{
          background-color:rgba(108,78,245,.05);
        }

        @media(prefers-reduced-motion:reduce){
          .card, .btn, .boton_nav_cta, .num, .chip, .pill .dot,
          .saber-mas::after, .mas-info::after{animation:none !important; transition:none !important;}
        }
  
  
  
 
  /* MOCKUP */
  .shot{max-width:960px;margin:56px auto 0;position:relative;z-index:1}
  .shot img{
      width: 100%;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 0px 800px 0px rgb(255 255 255 / 51%);
        display: block;
  }
  .badge-flot{position:absolute;background:#fff;border:1px solid var(--linea);border-radius:14px;
    padding:12px 16px;box-shadow:0 12px 30px -12px rgba(0,0,0,.25);font-size:.85rem;font-weight:700}
  .badge-flot span{display:block;font-weight:500;color:var(--gris);font-size:.75rem}
  .bf-1{left:-10px;top:22%}
  .bf-2{right:-10px;bottom:16%}
  @media(max-width:820px){.badge-flot{display:none}}
 
  /* LOGOS */
  .logos{display:flex;gap:38px;justify-content:center;flex-wrap:wrap;padding:52px 0;
    color:#b6b6b6;font-weight:800;letter-spacing:1px;font-size:.95rem;border-bottom:1px solid var(--linea)}
 
  /* SECCIONES */
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
  .card{border:1px solid var(--linea);border-radius:16px;overflow:hidden;background:#fff;transition:.2s}
  .card:hover{border-color:var(--miel);box-shadow:0 14px 34px -18px rgba(108,78,245,.45)}
  .card img{width:100%;height:170px;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.16,.8,.24,1)}
  .card:hover img{transform:scale(1.06)}
  .card .body{padding:18px 20px 22px}
  .card h3{margin:0 0 6px;font-size:1.02rem}
  .card p{margin:0;color:var(--gris);font-size:.9rem;line-height:1.55}
  .card .saber-mas{display:inline-block;margin-top:10px;color:var(--tinta);font-weight:700;font-size:.83rem;
    text-decoration:none;border-bottom:2px solid var(--miel-suave)}
  .card .saber-mas:hover{border-color:var(--miel)}
 
  /* GRAFICO BARRAS */
  .panel{border:1px solid var(--linea);border-radius:20px;padding:34px;background:#fafafa;transition:.25s}
  .panel:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(0,0,0,.2)}
  .bars{display:flex;align-items:flex-end;gap:18px;height:230px;margin-top:10px}
  .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
  .bar i{width:100%;height:0;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,var(--miel-suave),#fff);
    border:1px solid #DDD6FB;display:block;transition:height 1.1s cubic-bezier(.16,.8,.24,1)}
  .bars.on .bar i{height:var(--h)}
  .bar.on i{background:linear-gradient(180deg,var(--miel),#8B7FF0);border-color:var(--miel)}
  .bar b{font-size:.8rem}
  .bar small{color:var(--gris);font-size:.72rem}
 
  /* DONUT */
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  @media(max-width:880px){.duo{grid-template-columns:1fr}}
  .donut{width:170px;height:170px;border-radius:50%;margin:6px auto 0;
    background:conic-gradient(var(--miel) 0 78%, #ededed 78% 100%);
    display:flex;align-items:center;justify-content:center;position:relative}
  .donut::after{content:"";position:absolute;width:112px;height:112px;background:#fafafa;border-radius:50%}
  .donut b{position:relative;z-index:1;font-size:1.9rem;letter-spacing:-1px}
 
  /* TIMELINE LEY */
  .ley{background:#fafafa;border:1px solid var(--linea);border-radius:22px;padding:40px;display:grid;
    grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
  @media(max-width:880px){.ley{grid-template-columns:1fr;padding:28px}}
  .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
    color:#4B2FD1;background:var(--miel-suave);padding:5px 11px;border-radius:6px;margin-bottom:14px}
  .ley h2{margin-bottom:14px}
  .ley p{color:#3d3d3d;line-height:1.65;margin:0 0 18px;font-size:.97rem}
  .ley .mas-info{display:inline-flex;align-items:center;gap:6px;color:var(--tinta);font-weight:700;
    text-decoration:none;font-size:.9rem;border-bottom:2px solid var(--miel-suave);margin-bottom:20px}
  .ley .mas-info:hover{border-color:var(--miel)}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{background:#fff;border:1px solid var(--linea);border-radius:999px;padding:7px 13px;font-size:.83rem;font-weight:600}
  .ley img{width:100%;border-radius:16px;display:block}
 
  .linea-t{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px;border-top:2px solid #e6e6e6;position:relative}
  .paso{padding:20px 14px 0;position:relative}
  .paso::before{content:"";position:absolute;top:-8px;left:0;width:14px;height:14px;border-radius:50%;background:#ddd}
  .paso.hoy::before{background:var(--miel);box-shadow:0 0 0 5px rgba(108,78,245,.22)}
  .paso b{display:block;font-size:.95rem}
  .paso span{color:var(--gris);font-size:.85rem}
 
  /* TABLA COMPARATIVA */
  .tabla-comp{width:100%;border-collapse:collapse;margin-top:8px;font-size:.92rem}
  .tabla-comp th,.tabla-comp td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--linea)}
  .tabla-comp th{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;color:var(--gris);font-weight:700}
  .tabla-comp tbody tr:last-child td{border-bottom:none}
  .tabla-comp tr.fila-clofik td{background:#F5F3FE;font-weight:700}
  .tabla-comp tr.fila-clofik td:first-child{border-radius:12px 0 0 12px}
  .tabla-comp tr.fila-clofik td:last-child{border-radius:0 12px 12px 0}
  .tabla-comp .ok{color:#1a8a4a;font-weight:700}
  .tabla-comp .no{color:#b23b3b}
  .tabla-scroll{overflow-x:auto;border:1px solid var(--linea);border-radius:16px;padding:20px}
 
  /* NUMEROS */
  .nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;text-align:center}
  .num{padding:26px 14px;border:1px solid var(--linea);border-radius:14px;transition:.25s}
  .num:hover{transform:translateY(-3px);border-color:var(--miel-suave)}
  .num strong{display:block;font-size:2.1rem;letter-spacing:-1.5px}
  .num span{color:var(--gris);font-size:.86rem}
 
  /* FAQ */
  .faq details{border:1px solid var(--linea);border-radius:14px;padding:18px 22px;margin-bottom:12px;background:#fff;transition:.15s}
  .faq details[open]{border-color:var(--miel-suave)}
  .faq summary{cursor:pointer;font-weight:700;font-size:1rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-size:1.4rem;color:var(--miel);font-weight:800;flex-shrink:0}
  .faq details[open] summary::after{content:"–"}
  .faq p{margin:14px 0 0;color:var(--gris);line-height:1.65;font-size:.92rem}
 
 
  /* CIERRE */
  .cierre{text-align:center;padding:92px 24px;position:relative;overflow:hidden}
  .cierre::after{content:"";position:absolute;left:50%;bottom:-400px;width:900px;height:900px;transform:translateX(-50%);
    background:radial-gradient(circle,rgba(108,78,245,.22) 0%,rgba(255,255,255,0) 65%);z-index:0}
  .cierre>*{position:relative;z-index:1}
 
  /* ANIMACIONES AL HACER SCROLL */
  .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.16,.8,.24,1),transform .8s cubic-bezier(.16,.8,.24,1)}
  .reveal.on{opacity:1;transform:translateY(0)}
  .reveal-img{opacity:0;transform:translateY(70px) scale(1.02);transition:opacity 1s cubic-bezier(.16,.8,.24,1),transform 1s cubic-bezier(.16,.8,.24,1)}
  .reveal-img.on{opacity:1;transform:translateY(0) scale(1)}
  .reveal-1{transition-delay:.08s}
  .reveal-2{transition-delay:.18s}
  .reveal-3{transition-delay:.28s}
  .reveal-4{transition-delay:.38s}
  @media(prefers-reduced-motion:reduce){
    .reveal,.reveal-img{transition:none!important;opacity:1!important;transform:none!important}
  }