.elementor-widget-container [data-tippy-root] > .tippy-box{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-container [data-tippy-root] > .tippy-box .tippy-arrow{color:var( --e-global-color-primary );}.elementor-2907 .elementor-element.elementor-element-ea85476{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-html [data-tippy-root] > .tippy-box{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-html [data-tippy-root] > .tippy-box .tippy-arrow{color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7 input:not([type="submit"]){background-color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7 select{background-color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7 textarea{background-color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7 label{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-html ::placeholder{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7-submit{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7 input[type="submit"]:hover{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}.elementor-widget-shortcode [data-tippy-root] > .tippy-box{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-shortcode [data-tippy-root] > .tippy-box .tippy-arrow{color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7 input:not([type="submit"]){background-color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7 select{background-color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7 textarea{background-color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7 label{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-shortcode ::placeholder{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7-submit{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7 input[type="submit"]:hover{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-d9572cb */:root{
      /* Paleta oficial BIENCEL (según imagen) */
      /* --accent:#d28030;      Primario */
      --accent:#d28030;
      --accent2:#568bc5;    /* Secundario */
     --accent3:#d89331;    /* Resalte (naranja) */
     /* --accent3:#FF8A00; */
      --accentDark:#234579; /* Resalte (azul) */

      --bg:#ffffff;
      --text:#0b1220;
      --muted:#5b6473;
      --line:rgba(11,18,32,.10);
      --shadow: 0 24px 60px rgba(11,18,32,.08);
      --shadow2: 0 10px 22px rgba(11,18,32,.10);

      --radius: 20px;
      --radius2: 28px;
      --max: 1160px;
      --ease: cubic-bezier(.2,.8,.2,1);

      /* Motion vars */
      --mx: 35%;
      --my: 35%;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:var(--bg);
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    .container{width:min(var(--max), calc(100% - 48px)); margin:0 auto;}
    .muted{color:var(--muted)}
    .sr{position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0)}

    /* UI */
    .chip{
      display:inline-flex; align-items:center; gap:10px;
      padding:5px 14px; border:1px solid var(--line); border-radius:999px;
      background:#fff; box-shadow: 0 1px 0 rgba(11,18,32,.03);
      font-size:14px;
    }
    .dot{
      width:9px;height:9px;border-radius:50%;
      background:var(--accent);
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:14px 18px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#ffffff;
      box-shadow: 0 1px 0 rgba(11,18,32,.03);
      font-weight:650;
      transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
      will-change: transform;
    }
    .btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow2); border-color: rgba(11,18,32,.18); }
    .btn.primary{
      border:none;
      color:#fff;
      background: var(--accent3);
      position:relative;
      overflow:hidden;
    }

    /* Top nav */
    .nav{
      position:sticky; top:0; z-index:1000;
      backdrop-filter: blur(10px);
      background: rgba(255,255,255,.75);
      border-bottom: 1px solid rgba(11,18,32,.06);
    }
    .nav-inner{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0;
    }
    .brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px}
    .logo{
      width:36px; height:36px; border-radius:12px;
      background: linear-gradient(135deg,var(--accent),var(--accent2));
      box-shadow: 0 12px 28px rgba(210,128,48,.18);
      position:relative; overflow:hidden;
    }
    .logo:before{
      content:"";
      position:absolute; inset:-60px;
      background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 45%);
      opacity:.75;
      pointer-events:none;
    }
    .logo-img {
      height: 45px !important; /* Ajusta según prefieras */
      width: auto;
      display: block;
    }
    .nav-links{display:flex; align-items:center; gap:18px; font-size:14px; color:var(--muted)}
    .nav-links a{padding:10px 10px; border-radius:999px; transition: background .2s var(--ease), color .2s var(--ease)}
    .nav-links a:hover{background: rgba(11,18,32,.04); color:var(--text)}
    .nav-cta{display:flex; align-items:center; gap:10px}
    .burger{display:none}

    /* Hero */
    .hero{
      position:relative;
      padding: 56px 0 36px;
      overflow:hidden;
    }
    .backdrop{
      position:absolute; inset:-240px -240px -240px -240px;
      pointer-events:none;
      filter: blur(40px);
      opacity:.65;
      z-index:0;
    }
    .blob{
      position:absolute;
      width: 560px; height: 560px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, rgba(210,128,48,.22), transparent 55%),
                  radial-gradient(circle at 70% 60%, rgba(86,139,197,.22), transparent 55%);
      animation: drift 18s var(--ease) infinite alternate;
    }
    .blob.b2{
      width: 460px; height: 460px;
      left: 55%;
      top: 25%;
      opacity:.55;
      animation-duration: 22s;
      animation-delay:-6s;
    }
    @keyframes drift{
      from{ transform: translate3d(0,0,0) scale(1); }
      to  { transform: translate3d(120px,-70px,0) scale(1.06); }
    }

    .hero-grid{
      display:grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 44px;
      align-items:center;
      min-height: 560px;
      position:relative;
      z-index:1;
    }
    .kicker{margin-bottom:14px}
    h1{
      font-size: clamp(34px, 5vw, 60px);
      line-height: 1.05;
      margin: 0 0 16px;
      letter-spacing:-.8px;
    }
    .subtitle{
      font-size: clamp(15px, 1.6vw, 18px);
      line-height: 1.6;
      color:var(--muted);
      margin:0 0 22px;
      max-width: 54ch;
    }
    .hero-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
    .hero-points{display:flex; flex-wrap:wrap; gap:10px; margin-top: 18px;}

    .scroll-hint{
      display:inline-flex; align-items:center; gap:10px;
      margin-top: 26px;
      color: rgba(11,18,32,.55);
      font-size: 13px;
      user-select:none;
    }
    .mouse{
      width: 22px; height: 32px; border-radius: 999px;
      border: 1.5px solid rgba(11,18,32,.28);
      position:relative;
      overflow:hidden;
    }
    .mouse:before{
      content:""; position:absolute; left:50%; top:7px;
      width:4px; height:6px; border-radius:999px;
      background: rgba(11,18,32,.45);
      transform: translateX(-50%);
      animation: wheel 1.5s var(--ease) infinite;
    }
    @keyframes wheel{
      0%{ transform: translate(-50%,0); opacity:.25 }
      50%{ transform: translate(-50%,10px); opacity:.8 }
      100%{ transform: translate(-50%,0); opacity:.25 }
    }

    /* SIM mock (v2) */
    .sim-wrap{position:relative; z-index:1; display:flex; justify-content:center; align-items:center;}
    .sim-stage{
      width:min(420px, 92%);
      aspect-ratio:3/4;
      perspective: 900px;
      transform-style: preserve-3d;
      position:relative;
    }
    .sim{
      width:100%;
      height:100%;
      border-radius: var(--radius2);
      /*background: #fff;*/
      
      /* --- NUEVAS LÍNEAS PARA LA IMAGEN --- */
      
      background: url('https://www.biencel.mx/wp-content/uploads/2026/02/promobien.png');
      background-size: 101%;
      background-position: center; 
      background-repeat: no-repeat;
      /* ------------------------------------ */
      
      border: 1px solid rgba(11,18,32,.10);
      box-shadow: var(--shadow);
      transform: rotateX(var(--rx, 10deg)) rotateY(var(--ry, -14deg)) translateY(var(--ty, 0px));
      /*transition: transform .15s var(--ease);*/
      transition: transform 0.1s ease-out !important; 
  
      /* Esto le dice al navegador que se prepare para mover la imagen usando la tarjeta de video */
      will-change: transform;
      transform-style: preserve-3d;
      position:relative;
      overflow:hidden;
    }
    .sim:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(circle at 30% 20%, rgba(210,128,48,.28), transparent 48%),
        radial-gradient(circle at 70% 80%, rgba(86,139,197,.28), transparent 52%),
        linear-gradient(180deg, rgba(11,18,32,.02), transparent 40%);
      opacity:.9;
    }
    .sim:after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(circle at var(--mx,35%) var(--my,35%), rgba(255,255,255,.60), transparent 44%);
      opacity:.75;
      mix-blend-mode: soft-light;
      pointer-events:none;
    }
    .sim-inner{
      position:absolute; inset:20px;
      display:flex; flex-direction:column; justify-content:space-between;
      z-index:1;
    }
    .sim-top{display:flex; align-items:center; justify-content:space-between}
    .sim-mark{
      font-weight:900;
      letter-spacing:.2px;
      font-size:16px;
      display:flex; align-items:center; gap:10px;
    }
    .sim-mark .mini{width:12px;height:12px;border-radius:3px;background:linear-gradient(135deg,var(--accent),var(--accent2))}
    .sim-badge{
      font-size:12px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(11,18,32,.12);
      background: rgba(255,255,255,.7);
    }
    .sim-mid{display:grid; gap:12px}
    .sim-title{font-size:34px; letter-spacing:-.6px; margin:0}
    .sim-sub{color:var(--muted); line-height:1.5; margin:0}
    .sim-chip{
      width: 58%;
      height: 84px;
      border-radius: 18px;
      border:1px solid rgba(11,18,32,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.35));
      position:relative;
      overflow:hidden;
    }
    .sim-chip:before{
      content:"";
      position:absolute; inset:-40px;
      background:
        radial-gradient(circle at 30% 30%, rgba(210,128,48,.18), transparent 55%),
        radial-gradient(circle at 70% 60%, rgba(86,139,197,.18), transparent 55%);
      animation: chipGlow 10s var(--ease) infinite alternate;
    }
    @keyframes chipGlow{
      from{ transform: translate3d(0,0,0) rotate(0deg); opacity:.8;}
      to  { transform: translate3d(30px,-18px,0) rotate(6deg); opacity:1;}
    }
    .sim-bottom{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      color:var(--muted); font-size:13px;
    }
    .sig{display:flex; align-items:center; gap:8px; color: #FFFFFF;}
    .bars{display:flex; gap:3px; align-items:flex-end}
    .bars span{
      width:4px; border-radius:2px;
      background: linear-gradient(180deg, var(--accent), #FFFFFF);
      opacity:.9;
      animation: bars 1.2s var(--ease) infinite;
      height:7px;
    }
    .bars span:nth-child(2){height:10px; animation-delay:.1s}
    .bars span:nth-child(3){height:14px; animation-delay:.2s}
    .bars span:nth-child(4){height:18px; animation-delay:.3s}
    .bars span:nth-child(5){height:22px; animation-delay:.4s}
    @keyframes bars{
      0%,100%{ transform: translateY(0); opacity:.55 }
      50%{ transform: translateY(-3px); opacity:.95 }
    }

    /* Sections */
    section{padding: 84px 0; position:relative;}
    .section-head{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:18px; margin-bottom: 26px;
    }
    .section-head h2{
      font-size: clamp(24px, 3.2vw, 40px);
      letter-spacing:-.6px;
      margin:0;
      line-height:1.15;
    }
    .section-head p{margin:0; color:var(--muted); max-width: 62ch; line-height:1.6}

    /* Minimal feature list (v2) */
    .feature-list{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px 26px;
      padding-top: 6px;
    }
    .feature{
      display:flex; gap:14px;
      padding: 12px 0;
      border-bottom: 1px solid rgba(11,18,32,.06);
    }
    .ico{
      width:34px; height:34px; border-radius:12px;
      background: rgba(11,18,32,.04);
      display:grid; place-items:center;
      flex:0 0 auto;
    }
    .ico svg{width:18px; height:18px}
    .feature strong{display:block; margin-bottom:4px}
    .feature span{color:var(--muted); font-size:14px; line-height:1.55}

    /* NEW: Photo spaces (only addition) */
    .photoSplit{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      align-items:center;
    }
    .photoCard{
      border-radius: 28px;
      border: 1px solid rgba(11,18,32,.10);
      background:#fff;
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
      min-height: 420px;
      transform: translateY(6px);
      transition: transform .35s var(--ease), box-shadow .35s var(--ease);
      will-change: transform;
    }
    .photoCard:hover{ transform: translateY(-6px); box-shadow: 0 30px 70px rgba(11,18,32,.12); }
    .photo{
      position:absolute; inset:0;
      /* Placeholder: reemplazar por background-image: url(...) */
      background:
        radial-gradient(circle at 20% 20%, rgba(210,128,48,.18), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(86,139,197,.18), transparent 55%),
        linear-gradient(180deg, rgba(11,18,32,.02), transparent 60%);
      transform: translate3d(0,0,0) scale(1.02);
    }
    .photo:after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 48%);
      opacity:.55;
      mix-blend-mode: soft-light;
    }
    .photoLabel{
      position:absolute; left:16px; right:16px; bottom:16px;
      border-radius: 18px;
      border: 1px solid rgba(11,18,32,.12);
      background: rgba(255,255,255,.82);
      backdrop-filter: blur(10px);
      padding: 12px 12px;
      display:flex; justify-content:space-between; align-items:center; gap:12px;
    }
    .photoLabel strong{font-weight:950}
    .photoLabel small{color:var(--muted)}
    .pillSmall{
      display:inline-flex; gap:8px; align-items:center;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(11,18,32,.10);
      background:#fff;
      font-size:12px;
      font-weight:800;
    }
    .copyBlock h3{margin:0 0 10px; font-size: 28px; letter-spacing:-.5px;}
    .copyBlock p{margin:0 0 16px; line-height:1.75; color:var(--muted)}
    .bullets{display:grid; gap:10px; margin-top: 14px}
    .bullet{display:flex; gap:12px; align-items:flex-start; padding: 10px 0; border-bottom: 1px solid rgba(11,18,32,.06);}
    .bullet i{width:22px;height:22px;border-radius:8px;background: rgba(11,18,32,.04);display:grid;place-items:center;margin-top:2px}
    .bullet i svg{width:14px;height:14px}

    /* Plans .elementor-2907 .elementor-element.elementor-element-d9572cb + rows (data real) */
    .tabs{
      display:flex; flex-wrap:wrap; gap:10px;
      margin-bottom: 14px;
    }
    .tab{
      padding:10px 12px;
      border-radius:999px;
      border:1px solid rgba(11,18,32,.10);
      background:#fff;
      color:#2b3340;
      font-weight:800;
      font-size:13px;
      cursor:pointer;
      transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
      user-select:none;
    }
    .tab:hover{ transform: translateY(-1px); box-shadow: var(--shadow2); border-color: rgba(11,18,32,.16); }
    .tab.active{
      border:none;
      color:#fff;
      background: var(--accent);
      box-shadow: 0 18px 44px rgba(35,69,121,.18);
    }

    .plans{display:grid; gap: 12px;}
    .plan-row{
      display:grid;
      grid-template-columns: 1.1fr .65fr 1fr;
      gap: 16px;
      align-items:center;
      padding: 18px 18px;
      border: 1px solid rgba(11,18,32,.08);
      border-radius: 18px;
      background: #fff;
      transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
    }
    .plan-row:hover{ transform: translateY(-2px); box-shadow: var(--shadow2); border-color: rgba(11,18,32,.16); }
    .plan-name{font-weight:950; letter-spacing:-.2px}
    .plan-meta{color:var(--muted); font-size:14px; margin-top:4px; line-height:1.5}
    .plan-price{font-weight:950; font-size:26px; text-align:right}
    .priceSub{color:var(--muted); font-size:12px; font-weight:750}
    .strike{color: rgba(11,18,32,.45); text-decoration: line-through; font-weight:800; margin-right:10px}
    .plan-bullets{color:var(--muted); font-size:14px; line-height:1.6}
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      border:1px solid rgba(11,18,32,.10);
      background: rgba(255,255,255,.88);
      font-size:12px;
      color: #2b3340;
      font-weight:800;
    }
    .plan-cta{display:flex; justify-content:flex-end}
    .note{
      margin-top: 12px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    /* Steps (v2) */
    .steps{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 10px;
    }
    .step{padding: 6px 0;}
    .step-num{
      width:40px; height:40px; border-radius:14px;
      display:grid; place-items:center;
      background: var(--accent);
      font-weight:850;
      margin-bottom: 12px;
    }
    .step p{margin:0; color:var(--muted); line-height:1.6}
    .step strong{display:block; margin-bottom:6px}
    .line{
      height:2px; width:100%;
      background: rgba(11,18,32,.06);
      border-radius:999px;
      overflow:hidden;
      margin: 16px 0 0;
      position:relative;
    }
    .line:before{
      content:"";
      position:absolute; inset:0;
      width:0%;
      background: var(--accent);
      border-radius:999px;
      transition: width 1s var(--ease);
    }
    .reveal.in .line:before{ width:100%; }

    .mini-bar{height:8px; border-radius:999px; background: var(--accent); overflow:hidden; width: 58%}
    .mini-bar i{display:block; height:100%; width: 72%; background: var(--accent)}
    .tag{
      font-size:12px; padding:7px 10px; border-radius:999px;
      border: 1px solid rgba(11,18,32,.10);
      background:#fff;
      color:#2b3340;
      font-weight:800;
    }

    /* FAQ (v2) */
    .faq{display:grid; gap:10px; max-width: 100%}
    details{
      border: 1px solid rgba(11,18,32,.08);
      border-radius: 16px;
      padding: 14px 16px;
      background:#fff;
      box-shadow: 0 1px 0 rgba(11,18,32,.03);
    }
    summary{
      cursor:pointer;
      list-style:none;
      font-weight:750;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    summary::-webkit-details-marker{display:none}
    .chev{
      width: 14px; height: 14px;
      border-right: 2px solid rgba(11,18,32,.55);
      border-bottom:2px solid rgba(11,18,32,.55);
      transform: rotate(45deg);
      transition: transform .2s var(--ease);
      margin-top:-2px;
      flex:0 0 auto;
    }
    details[open] .chev{ transform: rotate(225deg); }
    details p{margin:10px 0 0; color:var(--muted); line-height:1.65}

    /* Footer CTA (v2) */
    .cta{padding: 72px 0 92px;}
    .cta-box{
      border-radius: 28px;
      border: 1px solid rgba(11,18,32,.10);
      background:
        radial-gradient(circle at 20% 20%, rgba(210,128,48,.10), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(86,139,197,.10), transparent 45%),
        #fff;
      box-shadow: var(--shadow);
      padding: 34px 28px;
      display:flex; align-items:center; justify-content:space-between; gap:18px;
    }
    .cta-box h3{margin:0 0 10px; font-size:28px; letter-spacing:-.4px}
    .cta-box p{margin:0; color:var(--muted); line-height:1.6; max-width: 62ch}

    /* Reveal animations (v2) */
    .reveal{
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .8s var(--ease), transform .8s var(--ease);
      will-change: transform, opacity;
    }
    .reveal.in{opacity:1; transform: translateY(0)}
    .delay1{transition-delay:.08s}
    .delay2{transition-delay:.16s}
    .delay3{transition-delay:.24s}
    .delay4{transition-delay:.32s}

    /* Responsive */
    @media (max-width: 980px){
      .hero-grid{grid-template-columns: 1fr; min-height:auto}
      .sim-stage{width:min(460px, 100%)}
      .feature-list{grid-template-columns: 1fr}
      .photoSplit{grid-template-columns: 1fr}
      .app-grid{grid-template-columns: 1fr}
      .cta-box{flex-direction:column; align-items:flex-start}
      .plan-row{grid-template-columns: 1fr; gap:10px}
      .plan-price{text-align:left}
      .plan-cta{justify-content:flex-start}
      .steps{grid-template-columns: 1fr}
      
      /* --- Ajustes de Cabecera --- */
      .nav-links{display:none} /* Oculta links */
      
      .nav-cta .btn:not(.primary) {
        display: none; /* Oculta "Ver planes" para que quepa todo */
      }
    
      .btn.primary {
        padding: 10px 16px; /* Botón más compacto */
        font-size: 14px;
      }
    
      .burger {
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
        width: 44px; 
        height: 44px; 
        border-radius: 12px; /* Un poco más cuadrado para que haga match con el logo */
        border: 1px solid rgba(11,18,32,.10); 
        background:#fff;
        padding: 0;
        flex-shrink: 0; /* Que no se aplaste */
      }
    
      .burger svg {
        width: 24px;
        height: 24px;
      }
    
      .dot {
        width: 5px;        /* Punto un poco más pequeño acorde al texto */
        height: 5px;
      }
      .section-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Alinea chip, h2 y p a la izquierda */
        text-align: left !important;
        gap: 12px !important;
        width: 100% !important;
      }
    
      .section-head h2, 
      .section-head p {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
      }
    
      /* El chip específico para que no se mueva */
      .chip, .pill {
        align-self: flex-start !important;
        margin-left: 0 !important;
      }
      .logo-img {
          height: 25px !important; /* Ajusta según prefieras */
          width: auto;
          display: block;
        }
      
    }
    
    @media (max-width: 400px) {
      .brand span:not(.logo) {
        display: none; /* Deja solo el icono del logo para dar aire */
      }
    }

    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      .blob, .bars span, .mouse:before{animation:none}
      .reveal{transition:none}
      .btn, .sim{transition:none}
    }
    
    /* Contenedor principal de la marquesina */
    .marquee {
      position: relative;
      /* 1. Ajuste al 80% y centrado */
      width: 60%; 
      margin: 0 auto; 
      border-top: 1px solid rgba(11,18,32,.06);
      border-bottom: 1px solid rgba(11,18,32,.06);
      
      /* 2. Esconde las etiquetas que salen de ese 80% */
      overflow: hidden; 
      padding: 15px 0;
      display: flex;
    
      /* 3. Opcional: Máscara para desvanecer los bordes (fade effect) */
      mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }
    
    .track {
      display: flex;
      white-space: nowrap;
      gap: 12px;
      animation: marqueeAnim 30s linear infinite; 
      width: max-content;
    }
    
    /* Estilo de las etiquetas individuales */
    .tagPill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 20px;
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(11, 18, 32, 0.1);
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
      color: #2b3340;
      backdrop-filter: blur(5px);
      white-space: nowrap;
    }
    
    /* El punto decorativo (naranja fuerte para combinar con tus barras) */
    .tagPill .dot {
      width: 8px;
      height: 8px;
      background: var(--accent3);/* Naranja fuerte */
      border-radius: 50%;
      display: inline-block;
    }
    
    /* Animación de desplazamiento */
    @keyframes marqueeAnim {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); } /* Se mueve hasta la mitad (donde inicia el duplicado) */
    }
    
    /* Pausar al pasar el mouse para facilitar la lectura */
    .marquee:hover .track {
      animation-play-state: paused;
    }
    
    .scroll-progress-container {
       position: absolute;
       bottom: 0; /* Se pega al borde inferior del header */
       left: 0;
       width: 100%;
       height: 2px; /* Un poco más delgada para que se vea elegante */
       background: rgba(0,0,0,0.05); /* Un riel muy tenue */
       overflow: hidden;
    }
    
    /* La barra que se mueve */
    .scroll-progress-bar {
        height: 100%;
        background: linear-gradient(to right, #ff6b00, #0047ff); /* Ajusta a tus variables --accent */
        width: 0%; 
        transition: width 0.1s ease-out;
        box-shadow: 0 0 10px rgba(255, 107, 0, 0.5); /* Brillo sutil */
    }
    
    /* Estilos del Drawer */
    .mobile-menu {
      position: fixed; top: 0; right: -100%; /* Escondido a la derecha */
      width: 280px; height: 100%; background: #fff;
      z-index: 2000; transition: right 0.4s var(--ease);
      padding: 24px; box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    }
    
    .mobile-menu.active { right: 0; } /* Se desliza hacia adentro */
    
    .menu-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.5);
      backdrop-filter: blur(4px); z-index: 1999;
      opacity: 0; pointer-events: none; transition: opacity 0.4s;
    }
    
    .menu-overlay.active { opacity: 1; pointer-events: auto; }
    
    .menu-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 40px;
    }
    
    .close-menu {
      background: none; border: none; font-size: 32px; color: var(--text); cursor: pointer;
    }
    
    .mobile-links { display: flex; flex-direction: column; gap: 20px; }
    
    .mobile-links a {
      font-size: 18px; font-weight: 600; color: var(--text); text-decoration: none;
    }
    
    .mobile-links hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }


    .section{padding: 84px 0;}
    .section-head{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:18px; margin-bottom: 22px;
    }
    .section-head h2{
      font-size: clamp(24px, 3.2vw, 40px);
      letter-spacing:-.6px;
      margin:10px 0 0;
      line-height:1.15;
    }
    .section-head p{margin:0; color:var(--muted); max-width: 62ch; line-height:1.6}

    /* Wrapper */
    .wrap{
      border: 1px solid rgba(11,18,32,.08);
      border-radius: 28px;
      background:
        radial-gradient(circle at 18% 20%, rgba(210,128,48,.08), transparent 45%),
        radial-gradient(circle at 82% 70%, rgba(86,139,197,.10), transparent 45%),
        #fff;
      box-shadow: 0 1px 0 rgba(11,18,32,.03);
      padding: 24px 18px 22px;
      overflow:hidden;
      position:relative;
    }
    .kickers{
      display:flex; align-items:center; justify-content:space-between; gap:14px;
      flex-wrap:wrap;
      margin-bottom: 12px;
    }
    .kicker{
      display:flex; align-items:center; gap:10px;
      color:var(--muted);
      font-size:14px;
      font-weight:750;
    }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px;
      border-radius:999px;
      border: 1px solid rgba(11,18,32,.10);
      background: rgba(255,255,255,.85);
      font-weight: 900;
      color:#2b3340;
    }

    /* STEPPED DIAGRAM */
    .diagram{
      position:relative;
      padding: 24px 10px 10px;
    }

    /* Axis baseline */
    .axis{
      position:absolute;
      left: 34px;
      right: 34px;
      bottom: 26px;
      height: 3px;
      background: rgba(11,18,32,.14);
      border-radius: 999px;
      opacity:.85;
    }

    /* Stepped path via SVG container */
    .svgWrap{
      position:relative;
      width:100%;
      height: 230px;
    }
    svg{width:100%; height:100%; display:block}

    .stepPath{
      fill:none;
      stroke: url(#grad);
      stroke-width: 8;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 14px 24px rgba(35,69,121,.12));
    }
    .stepPathGlow{
      fill:none;
      stroke: rgba(255,255,255,.7);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity:.65;
    }

    /* Markers (dots) */
    .mk{
      fill:#fff;
      stroke: rgba(11,18,32,.18);
      stroke-width: 2;
    }
    .mkInner{
      fill: url(#grad);
      opacity:.95;
    }

    /* Labels (like Rakuten) */
    .labels{
      position:absolute;
      inset: 0;
      pointer-events:none;
    }
    .label{
      position:absolute;
      width: min(300px, 28vw);
      border-radius: 18px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(11,18,32,.10);
      box-shadow: 0 12px 26px rgba(11,18,32,.08);
      padding: 12px 12px 10px;
      pointer-events:auto;
      transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    }
    .label:hover{
      transform: translateY(-3px);
      box-shadow: var(--shadow2);
      border-color: rgba(11,18,32,.16);
    }

    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding: 7px 10px;
      border-radius: 999px;
      background: var(--accent);
      color:#fff;
      font-weight: 950;
      font-size: 12px;
      letter-spacing:.2px;
      margin-bottom: 8px;
    }
    .badge i{
      width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.85);
      display:inline-block;
    }
    .t{
      font-size: 18px;
      font-weight: 950;
      letter-spacing: -.3px;
      margin:0 0 4px;
      color: var(--text);
    }
    .s{
      margin:0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    /* Position labels roughly aligned to steps */
    .l1{ left: 2%;  top: 18px;}
    .l2{ left: 38%; top: 64px;}
    .l3{ right: 2%; top: 110px;}

    /* Small captions under axis points */
    .capRow{
      display:flex;
      justify-content:space-between;
      gap: 12px;
      margin-top: 6px;
      padding: 0 34px;
      color: rgba(11,18,32,.55);
      font-size: 12px;
      font-weight: 750;
    }

    /* Mobile: stacked cards + vertical step line */
    @media (max-width: 920px){
    /* Aseguramos que el contenedor del diagrama tenga espacio para mostrarse */
     .marquee {
      width: 80%; 
    }
    
  .diagram {
    padding: 20px 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .svgWrap {
    display: block !important; /* Forzamos visibilidad */
    width: 100% !important;
    min-height: 500px !important; /* Altura fija para que el SVG tenga donde dibujarse */
    position: relative;
    overflow: visible; /* Permite que los destellos se vean */
    margin-bottom: 20px;
  }

  svg {
    width: 100% !important;
    height: auto !important;
    /* Mantenemos la proporción pero permitimos que se ajuste al ancho del celular */
  }

  /* Ajuste de etiquetas para que no se amontonen */
  .labels {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    inset: auto !important; /* Eliminamos el posicionamiento absoluto del desktop */
  }

  .label {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    box-sizing: border-box;
  }

  /* Ocultamos elementos que estorban en pantallas pequeñas */
  .axis, .capRow {
    display: none !important;
  }
  
  .section-head {
    text-align: left !important;
    align-items: flex-start !important;
    display: flex;
    flex-direction: column;
  }

  .section-head div {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
  }

  /* El párrafo que marcaste en rojo para que no se mueva */
  .section-head p {
    margin-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
  }
      
    }

    @media (prefers-reduced-motion: reduce){
      .label{ transition:none; }
    }
  

/* Contenedor principal del footer */
.footer-wrapper {
  display: grid;
  gap: 100px;
  grid-template-columns: repeat(3, auto); /* 'auto' para que las columnas no fuercen un ancho del 100% */
  justify-content: center; /* ESTO centra las 3 columnas como un bloque en el medio */
  align-items: start;
  max-width: 1200px;
  margin: 0 auto; /* Centra el contenedor padre */
  padding: 0 20px;
}

/* Cada columna individual */
.footer-col-contacto, 
.footer-col-app, 
.footer-col-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* ESTO alinea el contenido (imágenes/links) a la IZQUIERDA */
  text-align: left;        /* ESTO asegura que el texto no se centre */
}

/* Ajustes específicos para la columna de links */
.footer-col-links div {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Links alineados a la izquierda */
}

/* Responsive para Móvil */
@media (max-width: 768px) {
  .footer-wrapper {
    grid-template-columns: 1fr 1.2fr; 
    justify-content: start; /* En móvil regresamos a la izquierda */
    gap: 20px;
  }

  .footer-col-links {
    border-left: 1px solid #eee;
    padding-left: 15px;
  }
}
  @media (max-width: 480px) {
    .bl-icon-wrap {
    width: 100px;  /* Ajusta este tamaño según necesites */
    height: 100px; /* Debe ser igual al ancho para ser cuadrado */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    }
    .bl-icon-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Mantiene la proporción sin deformar */
    }
}

/* Contenedor principal del botón */
#ast-scroll-top {
    background-color: #234579 !important; /* Azul Biencel */
    color: #ffffff !important;
    border-radius: 12px !important; /* Bordes redondeados modernos */
    width: 35px !important;
    height: 35px !important;
    line-height: 35px !important;
    bottom: 30px !important; /* Separación del borde inferior */
    right: 30px !important;  /* Separación del borde derecho */
    transition: all 0.3s ease !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 8px 20px rgba(35,69,121,0.2) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Efecto al pasar el mouse (Hover) */
#ast-scroll-top:hover {
    background-color: #d28030 !important; /* Cambia a naranja al hacer hover */
    transform: translateY(-5px) !important; /* Pequeño salto hacia arriba */
    box-shadow: 0 12px 24px rgba(210,128,48,0.3) !important;
}

/* Ajuste del ícono SVG dentro del botón */
#ast-scroll-top .ast-icon svg {
    fill: currentColor !important;
    width: 18px !important;
    height: 18px !important;
    transition: transform 0.3s ease !important;
}

/* Girar el ícono ligeramente en hover */
#ast-scroll-top:hover .ast-icon svg {
    transform: scale(1.1);
}

/* Ocultar en pantallas muy pequeñas si estorba al botón de WhatsApp */
@media (max-width: 480px) {
    #ast-scroll-top {
        width: 30px !important;
        height: 30px !important;
        bottom: 20px !important;
        right: 20px !important;
    }
}

.app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
  gap: 40px;
  align-items: center; /* Centra verticalmente el texto con la imagen */
  margin-top: 40px;
}

/* En móviles se apilan automáticamente */
@media (max-width: 920px) {
  .app-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }
  
  /* Centramos los bloques de texto y contenedores de botones en móvil */
  .app-grid .reveal {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* REGLA CLAVE: Solo afecta a los chips dentro de la sección APP */
  #app .chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* El punto se queda a la izquierda */
    text-align: left !important;
    width: auto !important;
  }

  /* Aseguramos que el dot dentro de esta sección no se centre */
  #app .dot {
    margin-right: 8px !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Centramos el contenedor de los chips como grupo */
  .app-grid .reveal div[style*="display:flex"] {
    justify-content: center !important;
    width: 100%;
  }
}

#form-field-imei:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(210, 128, 48, 0.1);
}

/* Quitar flechas del input number para que se vea limpio */
#form-field-imei::-webkit-inner-spin-button,
#form-field-imei::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#result_message.success {
    background: rgba(40, 167, 69, 0.1);
    color: #1e7e34;
    border: 1px solid rgba(40, 167, 69, 0.2);
}

#result_message.error {
    background: rgba(220, 53, 69, 0.1);
    color: #bd2130;
    border: 1px solid rgba(220, 53, 69, 0.2);
}
#form-field-imei::placeholder {
    color: #a0a0a0; /* Un gris neutro */
    opacity: 1;     /* Asegura que se vea igual en todos los navegadores */
}

/* Opcional: Color un poco más oscuro cuando el usuario hace clic */
#form-field-imei:focus::placeholder {
    color: #cbcbcb;
}/* End custom CSS */