. */ section.block{padding:88px 0} .sec-head{max-width:680px;margin:0 auto 52px;text-align:center} .sec-head h2{margin-bottom:.4em} .sec-head h2 em{font-style:normal;color:var(--blue)} .sec-head p{color:var(--muted);font-size:1.08rem} /* ---------- steps ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .step{ position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:34px 28px;transition:transform .18s,box-shadow .18s,border-color .18s; } .step:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(0,71,255,.4);border-color:rgba(0,71,255,.35)} .step .num{ font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem; display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px; border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--blue-400),var(--blue-600)); box-shadow:var(--glow);margin-bottom:18px; } .step h3{font-size:1.22rem;margin-bottom:.5em;color:var(--ink)} .step p{color:var(--muted);font-size:.98rem} /* ---------- divider (barras de señal) ---------- */ .divider{display:flex;justify-content:center;align-items:flex-end;gap:7px;height:34px;margin:0 auto;padding:0} .divider span{width:6px;border-radius:3px;background:linear-gradient(180deg,var(--blue-400),var(--blue-600));opacity:.9} .divider span:nth-child(1){height:10px}.divider span:nth-child(2){height:18px} .divider span:nth-child(3){height:28px}.divider span:nth-child(4){height:34px;background:linear-gradient(180deg,var(--cyan),var(--blue-400))} .divider span:nth-child(5){height:34px;background:linear-gradient(180deg,var(--cyan),var(--blue-400))} .divider span:nth-child(6){height:28px}.divider span:nth-child(7){height:18px}.divider span:nth-child(8){height:10px} /* ---------- precios ---------- */ .precios{background:var(--mist)} .precios-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .pcard{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:30px 24px;text-align:center;display:flex;flex-direction:column; transition:transform .18s,box-shadow .18s,border-color .18s; } .pcard:hover{transform:translateY(-5px);box-shadow:0 26px 55px -28px rgba(0,71,255,.45);border-color:rgba(0,71,255,.35)} .pcard .icn{width:52px;height:52px;margin:0 auto 16px;display:grid;place-items:center;border-radius:14px;background:rgba(0,71,255,.08)} .pcard .icn svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.6} .pcard h3{font-size:1.02rem;letter-spacing:.02em;color:var(--ink);margin-bottom:14px} .pcard ul{list-style:none;padding:0;margin:0 0 18px;color:var(--muted);font-size:.86rem;text-align:left} .pcard li{padding:7px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px} .pcard li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);flex:none} .pcard .desde{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-weight:600} .pcard .price{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2rem;color:var(--blue);margin:2px 0 18px;letter-spacing:-.02em} .pcard .btn{margin-top:auto} /* ---------- services ---------- */ .services{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .svc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 26px;transition:transform .18s,box-shadow .18s,border-color .18s} .svc:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(0,71,255,.4);border-color:rgba(0,71,255,.35)} .svc .ring{width:54px;height:54px;display:grid;place-items:center;border-radius:14px;background:rgba(0,71,255,.08);margin-bottom:18px} .svc .ring svg{width:27px;height:27px;stroke:var(--blue);fill:none;stroke-width:1.6} .svc h3{font-size:1.1rem;margin-bottom:.5em;color:var(--ink)} .svc p{color:var(--muted);font-size:.95rem} /* ========================================================================== SYSTEMS / ENGINEERING ========================================================================== */ .systems{background: linear-gradient(rgba(0,71,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(0,71,255,.035) 1px,transparent 1px),#fff; background-size:42px 42px; } .systems-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden} .systems-grid article{background:#fff;padding:34px 28px;min-height:240px} .systems-grid article>span{font-family:'Space Grotesk',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.18em;color:var(--blue)} .systems-grid h3{font-size:1.18rem;color:var(--ink);margin:34px 0 12px} .systems-grid p{color:var(--muted);font-size:.92rem;line-height:1.65} .signal-panel{display:grid;grid-template-columns:repeat(4,1fr);margin-top:24px;border-radius:18px;overflow:hidden;background:var(--ink);box-shadow:0 25px 60px -32px rgba(0,20,80,.65)} .signal-panel div{display:flex;align-items:center;gap:14px;padding:24px;border-right:1px solid rgba(255,255,255,.1)} .signal-panel div:last-child{border-right:0} .signal-panel b{font-family:'Space Grotesk',sans-serif;color:var(--cyan);letter-spacing:.08em} .signal-panel span{color:#B9C4E6;font-size:.86rem} .industry{background:var(--mist)} .industry-in{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center} .industry h2{color:var(--ink);margin-bottom:18px} .industry p{color:var(--muted);font-size:1.05rem} .industry-tags{display:grid;grid-template-columns:1fr 1fr;gap:12px} .industry-tags span{display:flex;align-items:center;min-height:54px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-weight:600;font-size:.9rem} .industry-tags span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(0,71,255,.08);margin-right:12px} /* ========================================================================== DARK BLOCK (ventajas) ========================================================================== */ .darkblock{ position:relative;overflow:hidden;color:#fff; background: radial-gradient(900px 500px at 85% 20%, rgba(0,71,255,.5), transparent 60%), radial-gradient(700px 420px at 5% 90%, rgba(34,227,227,.12), transparent 55%), var(--ink); } .darkblock::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.6; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:46px 46px; } .brown-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .darkblock h2{margin-bottom:.5em} .darkblock h2 em{font-style:normal;background:linear-gradient(100deg,var(--cyan),#8FB0FF);-webkit-background-clip:text;background-clip:text;color:transparent} .darkblock .lead{color:#B9C4E6;font-size:1.1rem;margin-bottom:30px} .adv{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px} .adv li{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.045);border:1px solid var(--line-d);border-radius:12px;padding:14px 16px;font-size:.96rem} .adv svg{width:20px;height:20px;stroke:var(--cyan);fill:none;stroke-width:2.4;flex:none} /* ========================================================================== FAQs ========================================================================== */ .faqs-in{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px} .faq{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;transition:border-color .18s} .faq[open]{border-color:rgba(0,71,255,.4);box-shadow:0 18px 44px -28px rgba(0,71,255,.4)} .faq summary{ list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px; font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.05rem;color:var(--ink); } .faq summary::-webkit-details-marker{display:none} .faq .plus{position:relative;width:18px;height:18px;flex:none} .faq .plus::before,.faq .plus::after{content:"";position:absolute;background:var(--blue);border-radius:2px;transition:transform .2s} .faq .plus::before{top:8px;left:0;width:18px;height:2px} .faq .plus::after{top:0;left:8px;width:2px;height:18px} .faq[open] .plus::after{transform:scaleY(0)} .faq .answer{padding:0 22px 22px;color:var(--muted);font-size:.98rem} /* ========================================================================== UBICACIONES (cobertura) ========================================================================== */ .locs .locs-region{ font-family:'Space Grotesk',sans-serif;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);display:flex;align-items:center;gap:16px;margin:44px 0 24px; } .locs .locs-region:first-of-type{margin-top:8px} .locs .locs-region span{white-space:nowrap} .locs .locs-region::after{content:"";flex:1;height:1px;background:var(--line)} .locs-grid{column-count:3;column-gap:26px} .locs-ccaa{break-inside:avoid;margin-bottom:22px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:#fff} .locs-ccaa h4{font-size:.98rem;color:var(--ink);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)} .locs-prov{margin:0 0 10px} .locs-prov .prov{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.9rem;color:var(--blue);margin-bottom:3px} .locs-prov span.prov{color:var(--ink)} .locs-prov .munis{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:3px} .locs-prov .munis a{font-size:.82rem;color:var(--muted);line-height:1.4} .locs-prov .munis a:hover{color:var(--blue)} .locs-prov .munis--intl a{font-size:.88rem} @media(max-width:900px){.locs-grid{column-count:2}} @media(max-width:600px){.locs-grid{column-count:1}} /* ---------- prose / seo ---------- */ .prose{max-width:900px;margin:0 auto} .prose p{color:var(--muted);margin-bottom:18px;font-size:1.02rem} /* ========================================================================== FOOTER ========================================================================== */ .site-footer{background:var(--ink);color:var(--muted-d);padding-top:72px;font-size:.95rem} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;padding-bottom:44px} .footer-brand p{margin-top:18px;color:#8C99BD;font-size:.95rem;max-width:420px} .footer-op{color:#5E6B8E;font-size:.76rem;letter-spacing:.08em;margin-top:16px!important} .site-footer h4{font-family:'Space Grotesk',sans-serif;color:#fff;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px} .site-footer .footer-grid>div p{margin:9px 0} .site-footer a{color:var(--muted-d)} .site-footer a:hover{color:var(--cyan)} .footer-bottom{border-top:1px solid var(--line-d);padding:22px 0;text-align:center;color:#5E6B8E;font-size:.82rem} /* ========================================================================== RESPONSIVE ========================================================================== */ @media(max-width:960px){ .nav-link{display:none} .steps,.precios-grid,.services,.trust-grid,.systems-grid{grid-template-columns:repeat(2,1fr)} .systems-grid{gap:1px} .signal-panel{grid-template-columns:repeat(2,1fr)} .industry-in{grid-template-columns:1fr;gap:36px} .brown-in{grid-template-columns:1fr;gap:36px} .footer-grid{grid-template-columns:1fr 1fr;gap:30px} .footer-brand{grid-column:1/-1} } /* La cabecera no tiene menú hamburguesa: por debajo de 1024px los enlaces no caben junto a marca+teléfono+CTA y el flex los partía (el teléfono llegaba a romperse en vertical sobre el logo). Se ocultan enlaces primero y el teléfono después — sigue visible en la topbar. (2026-08-06) */ @media(max-width:1024px){ .nav-link{display:none} } @media(max-width:600px){ section.block{padding:64px 0} .hero{padding:70px 0 90px} .hero h1{font-size:clamp(2rem,8.8vw,2.2rem)} .quote-grid{grid-template-columns:1fr} .steps,.precios-grid,.services,.trust-grid,.adv,.footer-grid,.systems-grid,.signal-panel,.industry-tags{grid-template-columns:1fr} .trust-grid{gap:18px} .nav{gap:14px} .nav-tel{display:none} .topbar-op{display:none} .brand-top{display:none} } @media(max-width:480px){ .brand-emblem{width:40px;height:40px} .brand-main{font-size:1.02rem} .header-in .btn{padding:12px 18px;font-size:.92rem} }