:root{
      --tsp-blue: #1E1FB5;
      --tsp-blue-deep: #181A9C;
      --tsp-blue-dark: #11127A;
      --tsp-teal: #2DD4BF;
      --tsp-teal-soft: #5EEAD4;
      --tsp-ink: #0B0C4D;
      --tsp-muted: #6B7280;
      --tsp-bg: #F7F8FF;
    }
    html{scroll-behavior:smooth;}
    body{
      font-family:'Inter', system-ui, -apple-system, sans-serif;
      color:var(--tsp-ink);
      background:#fff;
      -webkit-font-smoothing:antialiased;
    }
    h1,h2,h3,h4,h5{font-weight:800; letter-spacing:-0.02em;}
    .text-blue{color:var(--tsp-blue) !important;}
    .text-teal{color:var(--tsp-teal) !important;}
    .bg-blue{background:var(--tsp-blue) !important;}
    .bg-blue-dark{background:var(--tsp-blue-dark) !important;}
    .bg-soft{background:var(--tsp-bg);}

    /* Navbar */
    .navbar{
      backdrop-filter: blur(12px);
      background:rgba(255,255,255,0.85) !important;
      border-bottom:1px solid rgba(30,31,181,0.08);
      transition: all .25s ease;
    }
    .navbar.scrolled{box-shadow:0 6px 24px rgba(11,12,77,0.07);}
    .brand-logo{display:flex; align-items:center; gap:.55rem; text-decoration:none;}
    .brand-logo .b1{color:var(--tsp-blue); font-weight:800; font-size:1.25rem; letter-spacing:-0.03em;}
    .brand-logo .b2{color:var(--tsp-teal); font-weight:800; font-size:1.25rem; letter-spacing:-0.03em;}
    .brand-arrow{
      display:inline-flex; width:22px; height:22px; border-radius:6px;
      background:linear-gradient(135deg, var(--tsp-teal), var(--tsp-teal-soft));
      color:#fff; align-items:center; justify-content:center; font-size:.85rem;
    }
    .nav-link{color:#1f2937 !important; font-weight:500; font-size:.95rem;}
    .nav-link:hover{color:var(--tsp-blue) !important;}

    /* Buttons */
    .btn{border-radius:999px; font-weight:600; padding:.7rem 1.4rem;}
    .btn-primary{background:var(--tsp-blue); border-color:var(--tsp-blue);}
    .btn-primary:hover{background:var(--tsp-blue-deep); border-color:var(--tsp-blue-deep);}
    .btn-teal{background:var(--tsp-teal); border-color:var(--tsp-teal); color:#0B0C4D;}
    .btn-teal:hover{background:var(--tsp-teal-soft); border-color:var(--tsp-teal-soft); color:#0B0C4D;}
    .btn-outline-light-blue{border:1.5px solid rgba(255,255,255,0.5); color:#fff;}
    .btn-outline-light-blue:hover{background:#fff; color:var(--tsp-blue);}

    /* Hero */
    .hero{
      position:relative;
      background:
        radial-gradient(1100px 500px at 80% -10%, rgba(45,212,191,0.25), transparent 60%),
        radial-gradient(800px 400px at 0% 100%, rgba(94,234,212,0.18), transparent 60%),
        linear-gradient(135deg, var(--tsp-blue-dark) 0%, var(--tsp-blue) 60%, var(--tsp-blue-deep) 100%);
      color:#fff; overflow:hidden;
      padding:7rem 0 5rem;
    }
    .hero::before{
      content:""; position:absolute; inset:0;
      background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06) 1px, transparent 1px),
        radial-gradient(circle at 70% 70%, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 40px 40px, 60px 60px;
      pointer-events:none;
    }
    .hero h1{font-size:clamp(2.2rem, 4.5vw, 3.6rem); line-height:1.05;}
    .hero .lead{color:rgba(255,255,255,0.85); font-size:1.15rem;}
    .hero .badge-pill{
      display:inline-flex; align-items:center; gap:.5rem;
      padding:.5rem 1rem; border-radius:999px;
      background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
      font-size:.85rem; font-weight:500; color:#fff;
    }
    .hero .badge-pill .dot{width:8px; height:8px; border-radius:50%; background:var(--tsp-teal); box-shadow:0 0 0 4px rgba(45,212,191,0.25);}

    .hero-card{
      background:rgba(255,255,255,0.08);
      border:1px solid rgba(255,255,255,0.15);
      backdrop-filter: blur(10px);
      border-radius:24px; padding:1.5rem;
    }
    .hero-stat{
      background:rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.12);
      border-radius:16px; padding:1rem 1.1rem;
    }
    .hero-stat .num{font-size:1.75rem; font-weight:800; color:var(--tsp-teal-soft); letter-spacing:-0.03em;}
    .hero-stat .lbl{font-size:.82rem; color:rgba(255,255,255,0.7);}

    .hero-logo-card{
      background:var(--tsp-blue-deep);
      border:1px solid rgba(255,255,255,0.1);
      border-radius:28px;
      padding:2.5rem 2rem;
      text-align:center;
    }
    .hero-logo-card .l1, .hero-logo-card .l2{
      font-weight:800; letter-spacing:-0.035em; line-height:0.95;
      font-size:clamp(2rem, 5vw, 3rem);
    }
    .hero-logo-card .l1{color:#fff;}
    .hero-logo-card .l2{color:var(--tsp-teal);}
    .hero-logo-card .pill{
      display:inline-block; margin-top:1.4rem; padding:.65rem 1.5rem;
      border:1.5px solid #fff; border-radius:999px;
      color:#fff; font-size:.8rem; letter-spacing:.18em; font-weight:600;
    }
    .hero-logo-card .arrow{
      display:inline-block; width:38px; height:38px; vertical-align:-8px; margin-left:.2rem;
    }

    /* Sections */
    section{padding:5rem 0;}
    .eyebrow{
      display:inline-block; padding:.35rem .9rem; border-radius:999px;
      background:rgba(30,31,181,0.08); color:var(--tsp-blue);
      font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
      margin-bottom:1rem;
    }
    .section-title{font-size:clamp(1.8rem, 3.2vw, 2.6rem); line-height:1.1;}
    .section-sub{color:var(--tsp-muted); font-size:1.05rem; max-width:680px;}

    /* Service cards */
    .service-card{
      background:#fff; border:1px solid #EEF0FF; border-radius:20px;
      padding:1.75rem; height:100%;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .service-card:hover{
      transform: translateY(-4px);
      box-shadow:0 20px 40px -20px rgba(30,31,181,0.25);
      border-color: rgba(45,212,191,0.5);
    }
    .service-icon{
      width:52px; height:52px; border-radius:14px;
      display:inline-flex; align-items:center; justify-content:center;
      background:linear-gradient(135deg, rgba(30,31,181,0.1), rgba(45,212,191,0.15));
      color:var(--tsp-blue); font-size:1.4rem; margin-bottom:1.1rem;
    }
    .service-card h5{font-size:1.1rem; margin-bottom:.5rem;}
    .service-card p{color:var(--tsp-muted); font-size:.95rem; margin:0;}

    /* 7% feature */
    .seven-section{
      background: linear-gradient(135deg, var(--tsp-blue-dark) 0%, var(--tsp-blue) 100%);
      color:#fff; border-radius:32px; padding:3.5rem 2.5rem;
      position:relative; overflow:hidden;
    }
    .seven-section::before{
      content:""; position:absolute; right:-100px; top:-100px;
      width:380px; height:380px; border-radius:50%;
      background: radial-gradient(circle, rgba(45,212,191,0.35), transparent 70%);
    }
    .seven-big{
      font-size:clamp(5rem, 12vw, 8rem); font-weight:900; line-height:1;
      background:linear-gradient(135deg, var(--tsp-teal-soft), var(--tsp-teal));
      -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
      letter-spacing:-0.05em;
    }

    /* Process steps */
    .step{
      position:relative; padding:1.5rem; background:#fff;
      border-radius:18px; border:1px solid #EEF0FF; height:100%;
    }
    .step-num{
      position:absolute; top:-18px; left:1.5rem;
      width:36px; height:36px; border-radius:50%;
      background:var(--tsp-blue); color:#fff;
      display:inline-flex; align-items:center; justify-content:center;
      font-weight:700; font-size:.95rem;
      box-shadow:0 8px 20px -5px rgba(30,31,181,0.4);
    }
    .step h5{margin-top:.5rem; font-size:1.05rem;}
    .step p{color:var(--tsp-muted); font-size:.92rem; margin:0;}

    /* Comparison */
    .compare-card{
      background:#fff; border:1px solid #EEF0FF; border-radius:20px;
      padding:1.75rem; height:100%;
    }
    .compare-card.featured{
      background:linear-gradient(180deg, #fff 0%, #F0FEFB 100%);
      border:2px solid var(--tsp-teal); position:relative;
    }
    .compare-card.featured::before{
      content:"Mejor opción"; position:absolute; top:-13px; right:1.5rem;
      background:var(--tsp-teal); color:#0B0C4D; font-size:.72rem; font-weight:700;
      padding:.25rem .8rem; border-radius:999px; letter-spacing:.05em;
    }
    .compare-card ul{list-style:none; padding:0; margin:1rem 0 0;}
    .compare-card ul li{padding:.45rem 0; font-size:.94rem; color:#374151; display:flex; gap:.5rem; align-items:flex-start;}
    .compare-card ul li i{flex-shrink:0; margin-top:3px;}
    .check{color:var(--tsp-teal);}
    .cross{color:#9CA3AF;}

    /* FAQ */
    .accordion-item{
      border:1px solid #EEF0FF !important;
      border-radius:14px !important; overflow:hidden;
      margin-bottom:.75rem; background:#fff;
    }
    .accordion-button{
      font-weight:600; color:var(--tsp-ink); background:#fff;
      padding:1.1rem 1.25rem;
    }
    .accordion-button:not(.collapsed){
      color:var(--tsp-blue); background:rgba(30,31,181,0.04);
      box-shadow:none;
    }
    .accordion-button:focus{box-shadow:none; border-color:transparent;}
    .accordion-body{color:#4B5563; font-size:.96rem; padding:0 1.25rem 1.25rem;}

    /* CTA */
    .cta-section{
      background: linear-gradient(135deg, var(--tsp-blue) 0%, var(--tsp-blue-deep) 100%);
      color:#fff; border-radius:32px; padding:4rem 2.5rem;
      position:relative; overflow:hidden;
    }
    .cta-section::before{
      content:""; position:absolute; left:-80px; bottom:-80px;
      width:300px; height:300px; border-radius:50%;
      background: radial-gradient(circle, rgba(45,212,191,0.3), transparent 70%);
    }

    /* Footer */
    footer{
      background:var(--tsp-blue-dark); color:rgba(255,255,255,0.75);
      padding:3.5rem 0 1.5rem;
    }
    footer h6{color:#fff; font-weight:700; margin-bottom:1rem; font-size:1rem;}
    footer a{color:rgba(255,255,255,0.75); text-decoration:none;}
    footer a:hover{color:var(--tsp-teal-soft);}
    .footer-bottom{
      border-top:1px solid rgba(255,255,255,0.1);
      padding-top:1.25rem; margin-top:2.5rem; font-size:.85rem;
    }

    /* WhatsApp float */
    .wa-float{
      position:fixed; bottom:24px; right:24px; z-index:1050;
      background:#25D366; color:#fff; width:60px; height:60px;
      border-radius:50%; display:flex; align-items:center; justify-content:center;
      font-size:1.8rem; box-shadow:0 12px 28px rgba(37,211,102,0.45);
      text-decoration:none; transition:transform .2s ease;
    }
    .wa-float:hover{transform:scale(1.08); color:#fff;}

    /* Form */
    .form-control, .form-select{
      border-radius:12px; border:1px solid #E5E7EB; padding:.75rem 1rem;
      font-size:.95rem;
    }
    .form-control:focus, .form-select:focus{
      border-color:var(--tsp-blue); box-shadow:0 0 0 4px rgba(30,31,181,0.1);
    }
    .form-label{font-weight:500; font-size:.9rem; color:#374151;}

    @media (max-width: 768px){
      .hero{padding:6rem 0 3rem;}
      .seven-section, .cta-section{padding:2.5rem 1.5rem;}
    }
  
/* Ajustes WordPress + conversión */
body.admin-bar .navbar{top:32px}.hero-benefits{display:flex;flex-wrap:wrap;gap:.75rem 1.1rem;color:rgba(255,255,255,.9);font-size:.92rem}.hero-benefits span{display:inline-flex;align-items:center;gap:.4rem}.hero-benefits i{color:var(--tsp-teal-soft)}.hero-stats-row .hero-stat{height:100%}.contact-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.12);display:inline-flex;align-items:center;justify-content:center}.cta-section small{color:rgba(255,255,255,.72)}.hero #cotiza-hero{scroll-margin-top:100px}.tsp-content-page{min-height:65vh}.seven-section li span{color:rgba(255,255,255,.9)}@media(max-width:782px){body.admin-bar .navbar{top:46px}}@media(max-width:991px){.hero{padding-top:7.5rem}.hero-stats-row{margin-bottom:1rem}.navbar-collapse{background:#fff;border-radius:0 0 18px 18px;padding:1rem;box-shadow:0 18px 35px rgba(11,12,77,.12)}}@media(max-width:575px){.hero h1{font-size:2.25rem}.hero .lead{font-size:1rem}.hero-stat{padding:.75rem .55rem;text-align:center}.hero-stat .num{font-size:1.35rem}.hero-stat .lbl{font-size:.68rem}.wa-float{width:54px;height:54px;right:16px;bottom:16px}}


/* Hover uniforme de tarjetas: conserva el diseño original en reposo */
.hero-stat,.service-card,.compare-card,.step,.accordion-item{
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  will-change:transform;
}
.hero-stat:hover,.service-card:hover,.compare-card:hover,.step:hover,.accordion-item:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -20px rgba(30,31,181,.28);
}
@media (hover:none){
  .hero-stat:hover,.service-card:hover,.compare-card:hover,.step:hover,.accordion-item:hover{transform:none;box-shadow:none;}
}