/* ───────────────────────────────────────────────────────────── FLUSS SENSE — hoja de estilos compartida Tokens alineados a flusscontrol.com (mismo sistema de marca) ───────────────────────────────────────────────────────────── */ *{margin:0;padding:0;box-sizing:border-box} :root{ --blue:#1952c8; --blue-h:#1340a5; --blue-lt:#eff6ff; --blue-bd:#bfdbfe; --blue-mid:#3b82f6; --g900:#0f172a; --g800:#1e293b; --g700:#334155; --g500:#64748b; --g400:#94a3b8; --g200:#e2e8f0; --g100:#f1f5f9; --g50:#f8fafc; --white:#fff; --border:#e2e8f0; --green:#15803d; --green-bg:#f0fdf4; --green-bd:#bbf7d0; --amber:#b45309; --amber-bg:#fffbeb; --amber-bd:#fde68a; --red:#b91c1c; --red-bg:#fef2f2; --red-bd:#fecaca; --f:'Plus Jakarta Sans',system-ui,sans-serif; --mono:ui-monospace,'SF Mono',Menlo,monospace; } /* el overflow-x va también en : si sólo está en , el viewport de layout se ensancha con el contenido scrolleable y arrastra al nav fijo */ html{scroll-behavior:smooth;overflow-x:hidden} body{font-family:var(--f);background:var(--white);color:var(--g800);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6} img,svg{max-width:100%} :focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px} .icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .icon svg{stroke-linecap:round;stroke-linejoin:round;fill:none} .wrap{max-width:1200px;margin:0 auto;padding:0 2rem} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ── NAV ── */ nav{position:fixed;top:0;left:0;width:100%;z-index:999;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)} nav.sc{box-shadow:0 1px 12px rgba(15,23,42,.06)} .ni{max-width:1200px;margin:0 auto;padding:0 2rem;height:64px;display:flex;align-items:center;justify-content:space-between;gap:2rem} .logo{font-size:1.25rem;font-weight:800;color:var(--g900);text-decoration:none;letter-spacing:-.4px} .logo em{font-style:normal;color:var(--blue)} .nl{display:flex;gap:1.9rem;list-style:none} .nl a{color:var(--g500);text-decoration:none;font-size:.875rem;font-weight:500;transition:color .2s} .nl a:hover{color:var(--g900)} .nr{display:flex;align-items:center;gap:.75rem} .nbtn-ghost{color:var(--g500);text-decoration:none;font-size:.875rem;font-weight:500;padding:.44rem 1rem;border:1px solid var(--border);border-radius:7px;transition:all .2s} .nbtn-ghost:hover{border-color:var(--g400);color:var(--g800)} .nbtn-solid{background:var(--blue);color:var(--white);border:none;padding:.44rem 1rem;border-radius:7px;font-size:.875rem;font-weight:600;cursor:pointer;font-family:var(--f);text-decoration:none;display:inline-block;white-space:nowrap;transition:background .2s} .nbtn-solid:hover{background:var(--blue-h)} .nav-tog{display:none;background:none;border:1px solid var(--border);border-radius:7px;padding:.4rem .55rem;cursor:pointer} /* ── BOTONES ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--f);font-size:.95rem;font-weight:700;padding:.825rem 1.875rem;border-radius:8px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:all .2s;line-height:1.2} .btn-p{background:var(--blue);color:var(--white)} .btn-p:hover{background:var(--blue-h);transform:translateY(-1px)} .btn-s{background:var(--white);color:var(--g800);border-color:var(--border);font-weight:600} .btn-s:hover{border-color:var(--g400);background:var(--g50)} .btn-w{background:var(--green);color:var(--white)} .btn-w:hover{background:#126b33} .btn-lg{padding:.825rem 1.875rem;font-size:.95rem} /* ── SECCIONES ── */ .sec{padding:4rem 0;border-top:1px solid var(--border)} .sec-alt{background:var(--g50)} .eyebrow{display:block;margin-bottom:.9rem} .eyebrow-dot{display:none} .eyebrow span{font-size:.7rem;color:var(--blue);font-weight:700;letter-spacing:2px;text-transform:uppercase} .sec h2{font-size:2.4rem;font-weight:800;color:var(--g900);line-height:1.1;letter-spacing:-.6px;margin-bottom:1.2rem;text-wrap:balance} .sec h2 em{font-style:normal;color:var(--blue)} .lead{font-size:1.02rem;color:var(--g500);max-width:660px;line-height:1.78} .sec-head{margin-bottom:2.5rem;max-width:760px} .sec-head.ctr{margin-left:auto;margin-right:auto;text-align:center} .sec-head.ctr .lead{margin:0 auto} /* ── HERO ── */ .hero{padding:8.5rem 0 0;background:var(--white)} .hero-body{max-width:1200px;margin:0 auto;padding:0 2rem 3.5rem;display:grid;grid-template-columns:1.05fr 1fr;gap:4.5rem;align-items:center} .hero h1{font-size:3.1rem;font-weight:800;color:var(--g900);line-height:1.08;letter-spacing:-1px;margin-bottom:1.35rem} .hero h1 em{font-style:normal;color:var(--blue)} .hero p.sub{font-size:1.05rem;color:var(--g500);line-height:1.78;margin-bottom:2.2rem;max-width:540px} .hero-cta{display:flex;gap:.85rem;flex-wrap:wrap} .hero-note{margin-top:1.35rem;font-size:.83rem;color:var(--g400)} /* ── CABECERA DE PÁGINA INTERNA ── */ .page-hero{padding:8.5rem 0 3.5rem;background:var(--white)} .page-hero h1{font-size:2.6rem;font-weight:800;color:var(--g900);line-height:1.12;letter-spacing:-1px;margin-bottom:1.1rem;max-width:900px;text-wrap:balance} .page-hero h1 em{font-style:normal;color:var(--blue)} .page-hero .lead{margin-bottom:2rem;font-size:1.06rem;max-width:700px} .page-hero .hero-cta{margin-bottom:0} .page-hero .hero-note{margin-top:1.2rem} .crumb + .page-hero{padding-top:1.5rem} /* ── BANDA DE CIERRE ── */ .cta-band{background:var(--g900);text-align:center;border-top:none} .cta-band h2{color:var(--white);font-size:2rem;letter-spacing:-.8px;margin-bottom:.9rem} .cta-band p{color:var(--g400);font-size:1rem;line-height:1.65;max-width:620px;margin:0 auto 2rem} .cta-band .hero-cta{justify-content:center} .cta-band .btn-s{background:transparent;color:var(--white);border-color:var(--g700)} .cta-band .btn-s:hover{border-color:var(--g400);background:rgba(255,255,255,.05)} /* barra de credenciales */ .creds{border-top:1px solid var(--border);background:var(--g50)} .creds-in{max-width:1200px;margin:0 auto;padding:1.15rem 2rem;display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;align-items:center;justify-content:center} .cred{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--g700);font-weight:600} .cred .icon svg{stroke:var(--blue);stroke-width:2} /* ── GRÁFICO DEL HERO ── */ .chart-card{background:var(--white);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 40px rgba(15,23,42,.09);overflow:hidden} .chart-top{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;border-bottom:1px solid var(--border);background:var(--g50)} .chart-title{font-size:.86rem;font-weight:700;color:var(--g900)} .chart-sub{font-size:.72rem;color:var(--g500);margin-top:.1rem} .pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:.26rem .6rem;border-radius:100px;border:1px solid} .pill-red{background:var(--red-bg);color:var(--red);border-color:var(--red-bd)} .pill-green{background:var(--green-bg);color:var(--green);border-color:var(--green-bd)} .pill-amber{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-bd)} .pill-blue{background:var(--blue-lt);color:var(--blue);border-color:var(--blue-bd)} .pill-dot{width:5px;height:5px;border-radius:50%;background:currentColor} .chart-body{padding:.6rem .4rem .2rem} .chart-foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border)} .chart-kpi{padding:.85rem 1.1rem;border-right:1px solid var(--border)} .chart-kpi:last-child{border-right:none} .chart-kpi .k{font-size:.66rem;color:var(--g400);text-transform:uppercase;letter-spacing:.6px;font-weight:700} .chart-kpi .v{font-size:1.02rem;color:var(--g900);font-weight:800;margin-top:.15rem;font-variant-numeric:tabular-nums} .chart-kpi .v.alert{color:var(--red)} /* ── GRILLAS ── */ .grid{display:grid;gap:1.25rem} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:1.6rem} .card-alt{background:var(--g50)} .card h3{font-size:.98rem;font-weight:700;color:var(--g900);margin-bottom:.4rem;letter-spacing:-.2px} .card p{font-size:.845rem;color:var(--g500);line-height:1.65} .card-ico{width:36px;height:36px;border-radius:8px;background:var(--g100);border:none;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem} .card-ico svg{stroke:var(--blue);stroke-width:1.9;width:19px;height:19px} .card-num{font-size:.7rem;font-weight:800;color:var(--blue);letter-spacing:1px;margin-bottom:.6rem} /* card enlazada (rubros) */ a.card-link{display:block;text-decoration:none;transition:all .2s} a.card-link:hover{border-color:var(--blue-bd);box-shadow:0 6px 22px rgba(25,82,200,.09);transform:translateY(-2px)} a.card-link .more{margin-top:.9rem;font-size:.82rem;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:.3rem} a.card-link:hover .more{gap:.55rem} /* ── LISTA DE VARIABLES ── */ .var-row{display:flex;gap:1.1rem;padding:1.35rem 0;border-bottom:1px solid var(--border);align-items:flex-start} .var-row:last-child{border-bottom:none} .var-ico{width:40px;height:40px;border-radius:10px;background:var(--blue-lt);border:1px solid var(--blue-bd);display:flex;align-items:center;justify-content:center;flex-shrink:0} .var-ico svg{stroke:var(--blue);stroke-width:1.9;width:20px;height:20px} .var-txt h3{font-size:.98rem;font-weight:700;color:var(--g900);margin-bottom:.3rem} .var-txt p{font-size:.88rem;color:var(--g500);line-height:1.6} .var-tags{margin-top:.55rem;display:flex;gap:.35rem;flex-wrap:wrap} .tag{font-size:.68rem;font-weight:600;color:var(--g700);background:var(--g100);border:1px solid var(--g200);border-radius:5px;padding:.16rem .5rem} /* ── TABS PLATAFORMA ── */ .tabs{display:flex;gap:.4rem;border:1px solid var(--border);background:var(--white);border-radius:10px;padding:.32rem;margin-bottom:2.5rem;max-width:520px} .tab{flex:1;background:none;border:none;font-family:var(--f);font-size:.9rem;font-weight:700;color:var(--g500);padding:.65rem .5rem;border-radius:7px;cursor:pointer;transition:all .2s} .tab:hover{color:var(--g900)} .tab[aria-selected="true"]{background:var(--blue);color:var(--white)} .tabpanel{display:none} .tabpanel.on{display:block;animation:fade .25s ease} @keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} .feat{display:flex;gap:.85rem;align-items:flex-start;padding:1.05rem 0;border-bottom:1px solid var(--border)} .feat:last-child{border-bottom:none} .feat-check{width:20px;height:20px;border-radius:50%;background:var(--blue-lt);border:1px solid var(--blue-bd);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.15rem} .feat-check svg{stroke:var(--blue);stroke-width:2.6;width:11px;height:11px} .feat b{display:block;font-size:.94rem;color:var(--g900);font-weight:700;margin-bottom:.2rem} .feat span{font-size:.88rem;color:var(--g500);line-height:1.6} /* variante sin título: el bullet ES la frase, así que pesa más */ .feat > div > span:only-child{font-size:.97rem;color:var(--g700);line-height:1.65} .quote{margin-top:.6rem;font-family:var(--mono);font-size:.82rem;color:var(--blue);background:var(--blue-lt);border:1px solid var(--blue-bd);border-radius:7px;padding:.55rem .8rem;display:inline-block} /* ── TABLA COMPARATIVA ── */ .tbl-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--white)} table.cmp{width:100%;border-collapse:collapse;min-width:640px} table.cmp th,table.cmp td{padding:.85rem 1.1rem;text-align:left;font-size:.87rem;border-bottom:1px solid var(--border)} table.cmp thead th{background:var(--g50);font-weight:700;color:var(--g900);font-size:.8rem;letter-spacing:.2px} table.cmp thead th.us{background:var(--blue-lt);color:var(--blue)} table.cmp td.us{background:#f8faff} table.cmp tbody tr:last-child td{border-bottom:none} table.cmp td:first-child{color:var(--g700);font-weight:600} table.cmp td.c{text-align:center} .yes{color:var(--green);font-weight:800} .no{color:var(--g400);font-weight:700} /* ── HIGHLIGHT / BANDA ── */ .band{background:var(--g700);color:var(--white)} .band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .band-item{text-align:center;padding:1.75rem 1rem;border-right:1px solid rgba(255,255,255,.08)} .band-item:last-child{border-right:none} .band-item .n{font-size:2.75rem;font-weight:800;line-height:1;color:var(--white)} /* la unidad va en celeste, como en flusscontrol.com */ .band-item .n em{font-style:normal;color:#93c5fd} .band-item .l{font-size:.8rem;color:rgba(255,255,255,.45);margin-top:.5rem;line-height:1.5;max-width:120px;margin-left:auto;margin-right:auto} .hl{background:var(--blue-lt);border:1px solid var(--blue-bd);border-radius:14px;padding:2.2rem 2.4rem} .hl h3{font-size:1.35rem;font-weight:800;color:var(--g900);letter-spacing:-.4px;margin-bottom:.7rem} .hl p{font-size:.95rem;color:var(--g700);line-height:1.7;max-width:720px} /* ── PRECIOS ── Tarjetas con las medidas de flusscontrol.com (.price-card / .pr-*). */ .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;align-items:start} /* Con cuatro planes cada tarjeta queda en ~272px: menos aire adentro. */ .plans .price-card{padding:1.6rem 1.35rem} .plans .pr-amount{font-size:2.3rem} .price-card{position:relative;background:var(--g50);border:1px solid var(--border);border-radius:12px;padding:2rem;display:flex;flex-direction:column;height:100%} .price-card.pr-feat{background:var(--white);border:1.5px solid var(--blue);box-shadow:0 6px 36px rgba(25,82,200,.1)} .pr-badge{position:absolute;top:.7rem;right:.7rem;font-size:.6rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--blue);background:var(--blue-lt);padding:.18rem .5rem;border-radius:3px} .pr-name{font-size:.76rem;font-weight:700;color:var(--g400);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:.875rem} .pr-price{display:block} .pr-curr{display:inline-block;vertical-align:top;font-size:1.1rem;font-weight:700;color:var(--g500)} .pr-amount{font-size:2.6rem;font-weight:800;color:var(--g900);line-height:1.1} .pr-amount.tbd{font-size:1.4rem;color:var(--g400)} .pr-per{font-size:.78rem;font-weight:400;color:var(--g400)} .pr-desc{font-size:.78rem;color:var(--g400);line-height:1.5;margin-bottom:1.375rem} .pr-divider{border-top:1px solid var(--border);margin:1.375rem 0} .pr-list{list-style:none;flex:1;margin-bottom:1.375rem} .pr-list li{font-size:.835rem;color:var(--g500);padding:.3rem 0 .3rem 1.35rem;position:relative;line-height:1.5} .pr-list li::before{position:absolute;left:0;top:.3rem;font-weight:700} .pr-list li.ok::before{content:"✓";color:var(--green)} .pr-list li.no{color:#b0b9ca} .pr-list li.no::before{content:"✕";color:#cbd5e1} .pr-btn{display:block;width:100%;text-align:center;padding:.825rem;border-radius:8px;font-family:var(--f);font-size:.875rem;font-weight:600;text-decoration:none;background:var(--white);color:var(--g800);border:1px solid var(--border);transition:all .2s} .pr-btn:hover{border-color:var(--g400);background:var(--g50)} .pr-btn-p{background:var(--blue);color:var(--white);border-color:var(--blue)} .pr-btn-p:hover{background:var(--blue-h);border-color:var(--blue-h);color:var(--white)} .pr-notas{font-size:.8rem;color:var(--g400);line-height:1.7;margin-top:1.5rem} /* tabla de hardware */ .hw-tbl{width:100%;border-collapse:collapse} .hw-tbl th,.hw-tbl td{padding:.85rem 1.1rem;text-align:left;font-size:.88rem;border-bottom:1px solid var(--border)} .hw-tbl thead th{background:var(--g50);font-size:.78rem;font-weight:700;color:var(--g900);text-transform:uppercase;letter-spacing:.5px} .hw-tbl tbody tr:last-child td{border-bottom:none} .hw-tbl td b{color:var(--g900)} .hw-tbl td .d{font-size:.8rem;color:var(--g500);display:block;margin-top:.15rem;line-height:1.5} .hw-tbl td.p{text-align:right;font-weight:700;color:var(--g900);white-space:nowrap;font-variant-numeric:tabular-nums} .hw-tbl td.p.tbd{color:var(--g400);font-weight:600} /* ── ETIQUETA DE DIFERENCIAL ── El patrón "EXCLUSIVO" de flusscontrol.com: marca de un vistazo lo que ningún competidor tiene. */ .feat-tag{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);background:var(--blue-lt);border:1px solid var(--blue-bd);border-radius:4px;padding:.2rem .55rem;margin-bottom:.7rem} /* ── APARICIÓN AL SCROLLEAR ── Mismo tiempo y curva que flusscontrol.com. Se desactiva solo si el visitante pidió menos movimiento (ver @media al final). */ .rv{transition:opacity .65s ease,transform .65s cubic-bezier(.16,1,.3,1)} html.anim .rv{opacity:0;transform:translateY(14px)} html.anim .rv.on{opacity:1;transform:none} /* ── CALCULADORA ── */ .calc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start} form.calc{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:1.8rem} form.calc .fg{margin-bottom:1.1rem} .calc-checks{display:grid;gap:.7rem;margin-top:.3rem} .calc-check{display:flex;gap:.6rem;align-items:flex-start} .calc-check input{margin-top:.3rem;accent-color:var(--blue);flex-shrink:0} .calc-check label{font-size:.87rem;color:var(--g700);line-height:1.5;cursor:pointer} .calc-check label b{color:var(--g900);font-weight:700} .calc-res{background:var(--g900);border-radius:14px;padding:1.8rem;color:var(--white)} .calc-plan{padding-bottom:1.1rem;border-bottom:1px solid var(--g700);margin-bottom:1.1rem} .calc-lb{display:block;font-size:.68rem;color:var(--g400);text-transform:uppercase;letter-spacing:.9px;font-weight:800} .calc-plan strong{font-size:1.7rem;font-weight:800;letter-spacing:-.8px;color:var(--white);display:block;margin-top:.2rem} .calc-list{list-style:none;display:grid;gap:.1rem} .calc-list li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--g800);font-size:.89rem;color:var(--g400)} .calc-list li b{color:var(--white);font-weight:800;font-variant-numeric:tabular-nums} .calc-list li.tot{border-bottom:none;border-top:1px solid var(--g700);margin-top:.4rem;padding-top:.8rem;color:var(--white);font-weight:700} .calc-list li.tot b{color:var(--blue-mid);font-size:1.1rem} .calc-note{font-size:.78rem;color:var(--g400);line-height:1.6;margin-top:1.1rem} @media(max-width:860px){.calc-wrap{grid-template-columns:1fr}} /* ── CASOS ── */ .caso{background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden} .caso-h{padding:1.35rem 1.6rem;border-bottom:1px solid var(--border);background:var(--g50)} .caso-h .n{font-size:.68rem;font-weight:800;color:var(--blue);letter-spacing:1px;margin-bottom:.3rem} .caso-h h3{font-size:1.04rem;font-weight:700;color:var(--g900);letter-spacing:-.2px} .caso-h p{font-size:.83rem;color:var(--g500);margin-top:.3rem;line-height:1.55} .caso-b{padding:1.5rem 1.6rem;display:grid;gap:1.15rem} .caso-b .blk .lb{font-size:.67rem;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--g400);margin-bottom:.35rem} .caso-b .blk p{font-size:.88rem;color:var(--g700);line-height:1.6} .caso-b .blk.res{background:var(--green-bg);border:1px solid var(--green-bd);border-radius:9px;padding:.9rem 1rem} .caso-b .blk.res .lb{color:var(--green)} .caso-b .blk.res p{color:var(--g800)} /* ── PASOS ── */ .steps{counter-reset:s;display:grid;gap:0} .step{display:flex;gap:1.35rem;padding:1.5rem 0;border-bottom:1px solid var(--border);align-items:flex-start} .step:last-child{border-bottom:none} .step-n{width:32px;height:32px;border-radius:50%;background:var(--blue);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:800;flex-shrink:0} .step h3{font-size:1rem;font-weight:700;color:var(--g900);margin-bottom:.28rem} .step p{font-size:.9rem;color:var(--g500);line-height:1.6} /* ── FAQ ── */ .faq{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--white)} .faq details{border-bottom:1px solid var(--border)} .faq details:last-child{border-bottom:none} .faq summary{padding:1.15rem 1.5rem;font-size:.96rem;font-weight:700;color:var(--g900);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:background .15s} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{background:var(--g50)} .faq summary::after{content:"+";font-size:1.3rem;font-weight:400;color:var(--blue);line-height:1;flex-shrink:0} .faq details[open] summary::after{content:"−"} .faq details[open] summary{background:var(--g50)} .faq .ans{padding:0 1.5rem 1.35rem;font-size:.91rem;color:var(--g500);line-height:1.7} /* ── FORMULARIO ── */ .form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start} form.fs{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:2rem;box-shadow:0 2px 16px rgba(15,23,42,.05)} .fr{display:grid;grid-template-columns:1fr 1fr;gap:.875rem;margin-bottom:0} .fg{margin-bottom:1rem} .fg.full{grid-column:1/-1} /* Campos de formulario: mismas medidas que flusscontrol.com (.fi/.fsel/.fta) */ .fg label{display:block;font-size:.71rem;font-weight:600;color:var(--g800);margin-bottom:.3rem;letter-spacing:.1px} .fg label .req{color:inherit;font-weight:600} /* Ojo: excluir checkbox y radio. flusscontrol aplica esto a la clase .fi, que sólo está en los campos de texto; con el selector de elemento el width:100% también agarra los checkboxes y los estira. */ .fg input:not([type=checkbox]):not([type=radio]),.fg select,.fg textarea{width:100%;padding:.7rem .9rem;border:1px solid var(--border);border-radius:7px;font-family:var(--f);font-size:.875rem;color:var(--g800);background:var(--white);transition:border-color .2s;outline:none;line-height:1.4} .fg input:not([type=checkbox]):not([type=radio]):focus,.fg select:focus,.fg textarea:focus{border-color:var(--blue)} /* El select trae flecha propia: sin esto cada navegador dibuja la suya y los combos no se ven iguales entre Chrome, Safari y Firefox. */ .fg select{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:auto;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E") no-repeat right .9rem center;padding-right:2.2rem} .fg textarea{resize:vertical;min-height:86px} .chips{display:flex;flex-wrap:wrap;gap:.45rem} .chip{position:relative} .chip input{position:absolute;opacity:0;width:0;height:0} .chip span{display:inline-block;font-size:.82rem;font-weight:600;color:var(--g700);background:var(--white);border:1px solid var(--g200);border-radius:7px;padding:.42rem .8rem;cursor:pointer;transition:all .2s} .chip input:checked+span{background:var(--blue-lt);border-color:var(--blue);color:var(--blue)} .chip input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px} .consent{display:flex;gap:.6rem;align-items:flex-start;margin:.2rem 0 1rem} .consent input{margin-top:.25rem;flex-shrink:0;accent-color:var(--blue)} .consent label{font-size:.78rem;color:var(--g500);line-height:1.6;cursor:pointer} .consent a{color:var(--blue)} .form-alt{font-size:.85rem;color:var(--g500);text-align:center;margin-top:1rem} .form-alt a{color:var(--green);font-weight:700;text-decoration:none} .hp{position:absolute;left:-9999px} .form-msg{border-radius:9px;padding:1rem;font-size:.9rem;font-weight:600;line-height:1.55;margin-bottom:1rem;border:1px solid} .form-ok{background:var(--green-bg);border-color:var(--green-bd);color:var(--green)} .form-warn{background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber)} .form-err{background:var(--red-bg);border-color:var(--red-bd);color:var(--red)} button[type="submit"][disabled]{opacity:.6;cursor:progress} .contact-side h3{font-size:1.06rem;font-weight:700;color:var(--g900);margin-bottom:.6rem} .contact-side p{font-size:.92rem;color:var(--g500);line-height:1.7;margin-bottom:1.7rem} .ci{display:flex;gap:.75rem;align-items:center;margin-bottom:.65rem} .ci .icon{width:30px;height:30px;border-radius:7px;background:var(--blue-lt);flex-shrink:0;display:flex;align-items:center;justify-content:center} .ci .icon svg{stroke:var(--blue);stroke-width:1.8;width:13px;height:13px} .ci b{display:none} .ci span,.ci a{font-size:.85rem;color:var(--g500);font-weight:400;text-decoration:none} .ci a:hover{color:var(--blue)} /* ── TELEGRAM FLOTANTE ── */ .tg{position:fixed;right:1.5rem;bottom:1.5rem;z-index:900;display:inline-flex;align-items:center;gap:.55rem;background:#229ed9;color:#fff;font-family:var(--f);font-size:.88rem;font-weight:700;padding:.75rem 1.15rem;border-radius:100px;text-decoration:none;box-shadow:0 6px 24px rgba(34,158,217,.4);transition:transform .2s} .tg:hover{transform:translateY(-2px)} .tg svg{width:19px;height:19px;fill:#fff;stroke:none} /* ── FOOTER ── Copiado de flusscontrol.com para que los dos sitios cierren igual: mismo fondo, mismos tamaños, mismas opacidades. */ footer{background:var(--g700);padding:1.5rem 0 1.25rem} .ft-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:3rem;margin-bottom:1.25rem} .ft-logo{font-size:1.2rem;font-weight:800;color:var(--white);letter-spacing:-.4px;text-decoration:none;display:inline-block;margin-bottom:.875rem} .ft-logo em{font-style:normal;color:#93c5fd} .ft-brand-desc{font-size:.82rem;color:rgba(255,255,255,.38);line-height:1.65} .ft-col h4{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:.875rem} .ft-col a{display:block;font-size:.82rem;color:rgba(255,255,255,.38);text-decoration:none;margin-bottom:.42rem;transition:color .2s} .ft-col a:hover{color:var(--white)} .ft-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem} .ft-copy{font-size:.78rem;color:rgba(255,255,255,.3)} .ft-links{display:flex;gap:1.5rem} .ft-links a{font-size:.78rem;color:rgba(255,255,255,.3);text-decoration:none;transition:color .2s} .ft-links a:hover{color:var(--white)} /* ── BREADCRUMB (landings) ── */ /* La miga de pan encabeza una página centrada: alineada a la izquierda quedaba suelta, sin nada con qué alinear debajo. */ .crumb{padding:6.5rem 0 0;font-size:.82rem;color:var(--g400);text-align:center} .crumb a{color:var(--g500);text-decoration:none} .crumb a:hover{color:var(--blue)} /* ── TABLA DE ZONAS (landings) ── */ .zonas{width:100%;border-collapse:collapse;background:var(--white)} .zonas th,.zonas td{padding:.8rem 1.1rem;text-align:left;font-size:.87rem;border-bottom:1px solid var(--border)} .zonas thead th{background:var(--g50);font-size:.75rem;font-weight:800;color:var(--g900);text-transform:uppercase;letter-spacing:.5px} .zonas tbody tr:last-child td{border-bottom:none} .zonas td:first-child{font-weight:700;color:var(--g900)} .zonas td.rango{font-family:var(--mono);font-size:.83rem;color:var(--blue);white-space:nowrap} .zonas td.vars{color:var(--g500)} /* ── RESPONSIVE ── */ @media(max-width:1000px){ .hero-body{grid-template-columns:1fr;gap:3rem} .hero h1{font-size:2.5rem} .form-wrap{grid-template-columns:1fr;gap:2.5rem} .g4{grid-template-columns:repeat(2,1fr)} .band .wrap{grid-template-columns:repeat(2,1fr);gap:1.8rem} .plans{grid-template-columns:repeat(2,1fr);max-width:none} .plan.hot{order:-1} } @media(max-width:860px){ .nl{display:none} .nav-tog{display:inline-flex} nav.open .nl{display:flex;position:absolute;top:64px;left:0;width:100%;flex-direction:column;background:var(--white);border-bottom:1px solid var(--border);padding:1rem 2rem 1.5rem;gap:1rem} .g3,.g2{grid-template-columns:1fr} .sec{padding:4rem 0} .sec h2{font-size:1.85rem} .hero{padding:7rem 0 0} .hero h1{font-size:2.15rem;letter-spacing:-.8px} .ft-top{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .plans{grid-template-columns:1fr;max-width:460px;margin-inline:auto} .wrap,.ni,.hero-body,.creds-in{padding-left:1.15rem;padding-right:1.15rem} /* en pantallas chicas la barra sólo aguanta un CTA + el menú */ .ni{gap:.6rem} .logo{font-size:1.08rem} .nr{gap:.45rem} .nbtn-ghost{display:none} .nbtn-solid{padding:.44rem .8rem;font-size:.78rem} .g4{grid-template-columns:1fr} .hero h1{font-size:1.9rem} .fr{grid-template-columns:1fr} .chart-foot{grid-template-columns:1fr;} .chart-kpi{border-right:none;border-bottom:1px solid var(--border)} .chart-kpi:last-child{border-bottom:none} .ft-top{grid-template-columns:1fr} .tabs{max-width:100%} .tab{font-size:.8rem;padding:.6rem .3rem} .band .wrap{grid-template-columns:1fr;text-align:center} .tg span{display:none} .tg{padding:.85rem;border-radius:50%} form.fs{padding:1.4rem} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .rv{opacity:1;transform:none} html{scroll-behavior:auto} } /* La escena que abre cada caso: el momento concreto en que aparece el problema. Va antes del desafío, con la tipografía un punto más grande para que se lea como relato y no como ficha técnica. */ .caso-b .blk.esc{border-left:2.5px solid var(--blue);padding-left:.95rem} .caso-b .blk.esc p{font-size:.91rem;color:var(--g800)} /* ── CENTRADO DE ENCABEZADOS ── Mismo recurso que .tc en flusscontrol.com: el bloque de texto mantiene su medida de lectura (~660px) pero se centra dentro de la columna de 1200px. Así el espacio sobrante queda repartido a los dos lados en vez de dejar un hueco muerto a la derecha. No se justifica el texto: flusscontrol tampoco, y en columnas anchas la justificación abre ríos entre palabras. */ .page-hero.ctr .wrap{text-align:center} .page-hero.ctr h1{margin-left:auto;margin-right:auto} .page-hero.ctr .lead{margin-left:auto;margin-right:auto} .page-hero.ctr .hero-cta{justify-content:center} .page-hero.ctr .eyebrow{text-align:center} .page-hero.ctr .hero-note{text-align:center} /* El recuadro destacado ocupaba 720px dentro de una caja mucho más ancha. */ .hl p{max-width:none} /* Nota al pie de precios, centrada como la .pr-note de flusscontrol. */ .pr-notas{text-align:center}