:root{--blue:#0647b5;--dark:#07152f;--orange:#ff7b22;--light:#f5f8ff;--text:#26324d;--muted:#66708a;--white:#fff;--shadow:0 18px 45px rgba(7,21,47,.12);--radius:22px;} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.65}.container{width:min(1180px,92%);margin:auto}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}.topbar{background:var(--dark);color:#fff;font-size:.92rem}.topbar .container{display:flex;justify-content:space-between;gap:15px;padding:8px 0}.navbar{position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);z-index:50;border-bottom:1px solid #e9eef9}.navwrap{display:flex;align-items:center;justify-content:space-between;padding:12px 0}.logo{height:58px;width:auto}.menu{display:flex;gap:18px;align-items:center;font-weight:700;font-size:.93rem}.menu a{padding:8px 4px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--orange),#ff9a4a);color:#fff!important;padding:13px 20px;border-radius:999px;font-weight:800;box-shadow:0 8px 22px rgba(255,123,34,.25);border:0;cursor:pointer}.btn.blue{background:linear-gradient(135deg,var(--blue),#1772ff);box-shadow:0 8px 22px rgba(6,71,181,.25)}.btn.ghost{background:#fff;color:var(--blue)!important;border:1px solid #d8e2f4;box-shadow:none}.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 80% 10%,#eaf2ff 0,#fff 35%,#f7faff 100%);padding:70px 0}.hero:before{content:"";position:absolute;inset:auto -100px -120px auto;width:360px;height:360px;background:rgba(255,123,34,.14);border-radius:50%}.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}.eyebrow{display:inline-block;background:#eef5ff;color:var(--blue);padding:8px 14px;border-radius:999px;font-weight:800;margin-bottom:14px}h1,h2,h3{color:var(--dark);line-height:1.12;margin:0 0 16px}h1{font-size:clamp(2.3rem,5vw,4.8rem)}h2{font-size:clamp(1.9rem,3vw,3rem)}h3{font-size:1.25rem}p{margin:0 0 16px}.lead{font-size:1.18rem;color:#46536c}.hero-card{background:#fff;border-radius:34px;padding:22px;box-shadow:var(--shadow);position:relative}.hero-card img{border-radius:28px;display:block}.badges{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}.badge{background:#fff;border:1px solid #e1e9f7;border-radius:999px;padding:8px 12px;font-weight:700;color:#33415c}.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.section{padding:74px 0}.section.alt{background:var(--light)}.section-title{max-width:850px;margin:0 auto 36px;text-align:center}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.card{background:#fff;border:1px solid #e8eef8;border-radius:var(--radius);padding:24px;box-shadow:0 8px 26px rgba(7,21,47,.05);transition:.25s}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.icon{font-size:2rem;margin-bottom:8px}.project-card{padding:0;overflow:hidden}.project-img{height:160px;background:linear-gradient(135deg,var(--blue),#49a2ff);display:flex;align-items:center;justify-content:center;color:#fff;font-size:2.4rem;font-weight:900;text-align:center}.project-card .body{padding:22px}.tag{display:inline-block;color:var(--orange);font-weight:900;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.stat{background:#fff;padding:26px;border-radius:var(--radius);text-align:center;border:1px solid #e8eef8}.stat strong{font-size:2rem;color:var(--blue);display:block}.split{display:grid;grid-template-columns:1fr 1fr;gap:34px}.list{display:grid;gap:12px}.check{display:flex;gap:10px;align-items:flex-start}.check:before{content:"✓";background:#eaf7ef;color:#17964b;border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:none}.darkband{background:linear-gradient(135deg,var(--dark),#0b3a86);color:#fff;border-radius:34px;padding:46px}.darkband h2,.darkband h3{color:#fff}.footer{background:var(--dark);color:#cfd9ee;padding:48px 0 20px}.footer h3{color:#fff}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:28px}.footer a{display:block;margin:8px 0;color:#dbe6ff}.copy{border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:18px;font-size:.9rem}.whatsapp{position:fixed;right:18px;bottom:18px;background:#25d366;color:#fff!important;width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;z-index:80;box-shadow:0 12px 28px rgba(0,0,0,.25)}.cookie{position:fixed;left:18px;right:18px;bottom:18px;background:#fff;border:1px solid #dfe7f4;border-radius:22px;padding:20px;box-shadow:var(--shadow);z-index:100;display:none}.cookie .row{display:flex;gap:18px;align-items:center;justify-content:space-between}.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}.legal-content{background:#fff;border-radius:var(--radius);padding:34px;border:1px solid #e8eef8}.article-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.form{display:grid;gap:14px}.form input,.form textarea{width:100%;padding:14px 16px;border-radius:14px;border:1px solid #d8e2f4;font:inherit}.mobile-toggle{display:none}.seo-note{background:#fff7f1;border-left:4px solid var(--orange);padding:16px;border-radius:14px;margin:18px 0}.breadcrumbs{font-size:.9rem;color:var(--muted);margin-bottom:18px}.service-hero{background:linear-gradient(135deg,#f8fbff,#eef5ff);padding:52px 0}.pricing-text{font-weight:800;color:var(--blue)} @media(max-width:900px){.grid2,.split{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.menu{display:none}.mobile-toggle{display:block}.hero{padding:42px 0}.cookie .row{display:block}.cookie-actions{margin-top:12px}.article-list{grid-template-columns:1fr}} @media(max-width:560px){.cards,.stats,.footer-grid{grid-template-columns:1fr}.topbar .container{display:block}.logo{height:48px}h1{font-size:2.1rem}.section{padding:52px 0}.hero-card{padding:12px}.whatsapp{width:56px;height:56px}.btn{width:100%}.cta-row{display:grid}.project-img{height:135px}} /* Mejoras visuales para la sección de proyectos */ .section.alt .section-title h2{max-width:920px;margin-left:auto;margin-right:auto}.project-card{position:relative;border:0;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);box-shadow:0 14px 35px rgba(7,21,47,.08)}.project-card:before{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1px;background:linear-gradient(135deg,rgba(6,71,181,.35),rgba(255,123,34,.32));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.project-img{height:175px;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.32),transparent 28%),linear-gradient(135deg,#052d7a 0%,var(--blue) 48%,var(--orange) 100%);font-size:2.05rem;letter-spacing:.02em;position:relative;overflow:hidden}.project-img:after{content:"";position:absolute;width:120px;height:120px;border:1px solid rgba(255,255,255,.25);border-radius:50%;right:-34px;bottom:-38px}.project-card .body{min-height:245px;display:flex;flex-direction:column}.project-card .body .btn{margin-top:auto}.tag{background:#fff3e9;color:#d85d10;padding:6px 10px;border-radius:999px;margin-bottom:10px}.project-card h3{font-size:1.18rem}.project-card p{color:#546179}.project-card:hover .project-img{filter:saturate(1.08);} /* Rediseño corporativo moderno SIATUWEB */ body{background:linear-gradient(180deg,#ffffff 0%,#f7faff 45%,#ffffff 100%)} .navbar{box-shadow:0 10px 30px rgba(7,21,47,.06)} .hero{background:linear-gradient(135deg,#07152f 0%,#093d91 46%,#0d6efd 100%);color:#fff;min-height:720px;display:flex;align-items:center;} .hero:before{width:520px;height:520px;background:radial-gradient(circle,rgba(255,122,0,.38),rgba(255,122,0,0) 68%);right:-140px;bottom:-170px;animation:pulseBlob 6s ease-in-out infinite;} .hero:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.17) 1px, transparent 1px);background-size:28px 28px;opacity:.32;} .hero .container{position:relative;z-index:2}.hero h1{color:#fff;letter-spacing:-.04em;font-size:clamp(3rem,7vw,6.1rem);max-width:820px;text-shadow:0 18px 44px rgba(0,0,0,.24)} .hero .lead{color:#eaf2ff;font-size:1.24rem;max-width:720px}.hero .eyebrow{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)} .hero .badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(8px)} .hero-card{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.78));box-shadow:0 28px 70px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.45);transform:rotate(1.5deg)} .hero-card:before{content:"SIATUWEB";position:absolute;left:-18px;top:32px;background:var(--orange);color:#fff;font-weight:900;letter-spacing:.08em;border-radius:999px;padding:9px 17px;box-shadow:0 12px 25px rgba(255,122,0,.25);z-index:2;font-size:.76rem}.hero-card img{transform:rotate(-1.5deg)} @keyframes pulseBlob{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}} .section{position:relative}.section:nth-of-type(2){background:#fff}.section:nth-of-type(2) .cards .card:nth-child(1){border-top:5px solid var(--blue)}.section:nth-of-type(2) .cards .card:nth-child(2){border-top:5px solid var(--orange)}.section:nth-of-type(2) .cards .card:nth-child(3){border-top:5px solid #27a7ff}.section:nth-of-type(2) .cards .card:nth-child(4){border-top:5px solid #20c997} .portfolio-zone{background:linear-gradient(180deg,#f4f8ff 0%,#ffffff 100%)} .portfolio-zone:before{content:"";position:absolute;left:0;top:0;width:100%;height:180px;background:linear-gradient(90deg,rgba(6,71,181,.08),rgba(255,122,0,.08));} .section-title h2{letter-spacing:-.025em}.section-title p{font-size:1.08rem;color:#59677f}.project-card{border-radius:28px;overflow:hidden;box-shadow:0 24px 55px rgba(7,21,47,.11)} .project-img{height:190px;background:linear-gradient(135deg,#07152f 0%,#0647b5 48%,#ff7b22 100%);font-size:1.85rem;text-transform:uppercase;} .project-card:nth-child(2n) .project-img{background:linear-gradient(135deg,#ff7b22 0%,#0647b5 70%,#07152f 100%)} .project-card:nth-child(3n) .project-img{background:linear-gradient(135deg,#07152f 0%,#132f65 50%,#0d6efd 100%)} .project-card .body{background:#fff}.project-card:hover{transform:translateY(-9px) scale(1.01)} .stats-zone{background:#07152f;color:#fff}.stats-zone .stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(8px)}.stats-zone .stat strong{color:#fff}.stats-zone .stat span{color:#d7e3f8} .brand-strip{padding:30px 0;background:linear-gradient(90deg,#ff7b22,#0647b5)}.brand-panel{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.brand-panel span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;padding:10px 14px;border-radius:999px;font-weight:900;backdrop-filter:blur(8px)} .darkband{background:linear-gradient(135deg,#07152f 0%,#0a3e93 55%,#ff7b22 160%);box-shadow:0 32px 70px rgba(7,21,47,.18);} .btn{transition:.25s}.btn:hover{transform:translateY(-2px);filter:saturate(1.08)}.btn.ghost:hover{background:#f5f9ff;color:var(--blue)!important} .whatsapp{font-size:0;background:#25d366}.whatsapp:before{content:"☎";font-size:28px;color:#fff}.cookie{max-width:1080px;margin:auto;left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 36px);} @media(max-width:900px){.hero{min-height:auto}.hero h1{font-size:clamp(2.6rem,12vw,4.2rem)}.hero-card{transform:none}.hero-card img{transform:none}.hero-card:before{left:16px;top:16px}.brand-panel{justify-content:flex-start}} /* ========================================================= UNIFICACIÓN DISEÑO HOME + PÁGINAS INTERNAS Mantiene la misma línea visual corporativa en toda la web ========================================================= */ .service-hero{ background:linear-gradient(135deg,#07152f 0%,#093d91 48%,#0d6efd 100%); color:#fff; padding:86px 0 78px; position:relative; overflow:hidden; } .service-hero:before{ content:""; position:absolute; width:420px; height:420px; right:-130px; top:-150px; border-radius:50%; background:radial-gradient(circle,rgba(255,122,0,.38),rgba(255,122,0,0) 68%); animation:pulseBlob 6s ease-in-out infinite; } .service-hero:after{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.15) 1px, transparent 1px); background-size:28px 28px; opacity:.28; } .service-hero .container{position:relative;z-index:2;max-width:980px} .service-hero h1{color:#fff;font-size:clamp(2.4rem,5vw,4.4rem);letter-spacing:-.035em;max-width:850px} .service-hero .lead{color:#eaf2ff;max-width:780px;font-size:1.18rem} .service-hero .eyebrow{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px)} .service-hero .breadcrumbs,.service-hero .breadcrumbs a{color:#dbe8ff} .service-hero .btn.ghost{border-color:rgba(255,255,255,.38);color:#fff;background:rgba(255,255,255,.08)} .service-hero .btn.ghost:hover{background:#fff;color:var(--blue)!important} main > .section:nth-of-type(2){background:#fff} main > .section:nth-of-type(3){background:linear-gradient(180deg,#f4f8ff 0%,#ffffff 100%)} main > .section:nth-of-type(4){background:#07152f;color:#fff} main > .section:nth-of-type(4) h2, main > .section:nth-of-type(4) h3{color:#fff} .section .container.split > div:first-child{ position:relative; } .section .container.split > div:first-child:before{ content:""; display:block; width:72px; height:6px; border-radius:999px; background:linear-gradient(90deg,var(--orange),var(--blue)); margin-bottom:20px; } .legal-content, .form, .article-list .card, .section .card{ border-radius:28px; } .section .card{ border:1px solid rgba(6,71,181,.12); position:relative; overflow:hidden; } .section .card:after{ content:""; position:absolute; left:0;right:0;top:0;height:4px; background:linear-gradient(90deg,var(--blue),var(--orange)); opacity:.9; } .seo-note{ background:linear-gradient(135deg,#fff7f1,#f5f9ff); border-left:5px solid var(--orange); box-shadow:0 10px 28px rgba(7,21,47,.05); } /* Páginas de contacto y legales con estética uniforme */ .legal-content{ box-shadow:0 18px 48px rgba(7,21,47,.08); border-top:5px solid var(--blue); } .form input,.form textarea{ background:#f8fbff; transition:.2s; } .form input:focus,.form textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(13,110,253,.11); background:#fff; } /* Botones más uniformes y llamativos en todas las páginas */ .btn{ background:linear-gradient(135deg,var(--orange),#ff9b45); box-shadow:0 12px 26px rgba(255,122,0,.2); } .btn.blue{ background:linear-gradient(135deg,var(--blue),#2e8bff); box-shadow:0 12px 26px rgba(13,110,253,.18); } .btn.ghost{ background:#fff; box-shadow:none; } /* Cabeceras internas: mismo impacto que Home pero más compactas */ @media(max-width:900px){ .service-hero{padding:60px 0 54px} .service-hero h1{font-size:clamp(2.2rem,11vw,3.5rem)} } /* === SIATUWEB dynamic corporate preview === */ :root{--blue:#0a5bd7;--blue2:#062a68;--navy:#071c3a;--orange:#ff7a00;--orange2:#ff9d2e;--white:#fff;--soft:#f3f7ff;--text:#1d2b3f} body{overflow-x:hidden;background:#fff;color:var(--text)} .hero.dynamic-hero{position:relative;min-height:720px;display:flex;align-items:center;background:radial-gradient(circle at 12% 18%,rgba(255,122,0,.28),transparent 28%),radial-gradient(circle at 88% 12%,rgba(48,141,255,.35),transparent 30%),linear-gradient(135deg,#061833 0%,#0b53c9 55%,#ffffff 55%,#ffffff 100%);isolation:isolate;overflow:hidden} .dynamic-hero:before,.dynamic-hero:after{content:"";position:absolute;border-radius:999px;filter:blur(10px);opacity:.6;animation:floatOrb 9s ease-in-out infinite;z-index:-1}.dynamic-hero:before{width:330px;height:330px;background:rgba(255,122,0,.23);right:7%;top:12%}.dynamic-hero:after{width:220px;height:220px;background:rgba(255,255,255,.18);left:4%;bottom:10%;animation-delay:-3s}@keyframes floatOrb{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-28px) scale(1.07)}} .dynamic-hero h1{font-size:clamp(3rem,7vw,6.8rem);letter-spacing:-.07em;line-height:.86;margin:.25em 0;color:#fff;text-wrap:balance}.dynamic-hero .lead{font-size:1.25rem;max-width:650px;color:rgba(255,255,255,.9)}.dynamic-hero .eyebrow{color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.23);padding:.58rem 1rem;border-radius:999px;display:inline-flex}.dynamic-hero .badge{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.24);backdrop-filter:blur(12px)}.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}.btn.big{padding:1rem 1.35rem;font-size:1rem}.btn.white{background:#fff;color:#0a4cb0!important}.btn.white:hover{transform:translateY(-3px);box-shadow:0 18px 45px rgba(0,0,0,.18)} .hero-visual{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center}.portrait-frame{position:relative;width:min(430px,80vw);aspect-ratio:1/1.08;border-radius:42px;background:linear-gradient(145deg,#fff,#edf5ff);box-shadow:0 40px 90px rgba(0,38,100,.28);overflow:hidden;transform:rotate(2deg);animation:softTilt 6s ease-in-out infinite}.portrait-frame img{width:100%;height:100%;object-fit:cover;display:block}.portrait-frame:before{content:"";position:absolute;inset:18px;border:1px solid rgba(255,122,0,.45);border-radius:32px;z-index:2;pointer-events:none}.metric-pill{position:absolute;background:#fff;border-radius:18px;padding:1rem 1.2rem;box-shadow:0 18px 55px rgba(6,32,74,.18);font-weight:800;color:#062a68;animation:floatCard 5s ease-in-out infinite}.metric-pill small{display:block;font-size:.75rem;color:#63728a;font-weight:600}.metric-pill.one{left:-20px;bottom:90px}.metric-pill.two{right:-10px;top:65px;animation-delay:-2s}@keyframes softTilt{0%,100%{transform:rotate(2deg) translateY(0)}50%{transform:rotate(0deg) translateY(-10px)}}@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}} .wave-divider{height:95px;background:linear-gradient(180deg,#fff 0%,#f3f7ff 100%);clip-path:polygon(0 35%,100% 0,100% 100%,0 100%)} .flow-section{padding:95px 0;background:#f3f7ff;position:relative}.flow-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:center}.flow-title h2{font-size:clamp(2rem,4vw,4rem);line-height:1;letter-spacing:-.05em;color:#071c3a}.flow-title p{font-size:1.12rem;color:#536277}.service-flow{display:grid;gap:1rem}.service-row{position:relative;display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:1.2rem;padding:1.15rem 1.25rem;border-radius:28px;background:#fff;box-shadow:0 18px 55px rgba(10,50,120,.08);overflow:hidden;transition:.3s ease}.service-row:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--orange),var(--blue))}.service-row:hover{transform:translateX(10px);box-shadow:0 24px 70px rgba(10,50,120,.15)}.service-row .num{font-size:1.8rem;font-weight:900;color:rgba(10,91,215,.2)}.service-row h3{margin:0;color:#071c3a}.service-row p{margin:.2rem 0 0;color:#65748a}.service-row .arrow{font-size:1.6rem;color:var(--orange)} .contrast-band{background:linear-gradient(135deg,#071c3a,#0a5bd7);color:#fff;padding:90px 0;position:relative;overflow:hidden}.contrast-band:before{content:"";position:absolute;inset:auto -10% -35% auto;width:520px;height:520px;border-radius:50%;background:rgba(255,122,0,.25);filter:blur(20px)}.kpi-line{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}.kpi{padding:1.7rem;border-radius:28px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09);backdrop-filter:blur(13px)}.kpi strong{display:block;font-size:clamp(2.2rem,5vw,4rem);line-height:1;color:#fff}.kpi span{color:rgba(255,255,255,.78)} .showcase{padding:105px 0;background:#fff}.showcase-head{display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:3rem}.showcase-head h2{font-size:clamp(2rem,4.5vw,4.5rem);letter-spacing:-.055em;line-height:.95;margin:0;color:#071c3a}.showcase-head p{max-width:560px;color:#536277}.project-showcase{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.project-tile{min-height:360px;border-radius:34px;position:relative;overflow:hidden;background:linear-gradient(135deg,#eff5ff,#fff);box-shadow:0 22px 70px rgba(6,38,88,.1);isolation:isolate}.project-tile:nth-child(4n+2),.project-tile:nth-child(4n+3){background:linear-gradient(135deg,#071c3a,#0a5bd7);color:#fff}.project-tile .browser{position:absolute;left:7%;right:7%;top:12%;height:55%;border-radius:22px;background:#fff;box-shadow:0 24px 55px rgba(0,0,0,.14);overflow:hidden;transform:rotate(-1deg);transition:.45s ease}.project-tile:nth-child(even) .browser{transform:rotate(1deg);background:#f9fbff}.browser-bar{height:32px;background:#eef3fb;display:flex;align-items:center;gap:7px;padding-left:14px}.browser-bar i{width:9px;height:9px;border-radius:50%;background:var(--orange);display:block}.mock-content{height:100%;display:grid;place-items:center;background:linear-gradient(135deg,rgba(10,91,215,.12),rgba(255,122,0,.18))}.logo-slot{width:150px;height:76px;border-radius:20px;background:#fff;display:grid;place-items:center;color:#071c3a;font-weight:900;letter-spacing:-.04em;text-align:center;padding:.6rem;box-shadow:0 12px 30px rgba(8,42,90,.12)}.project-info{position:absolute;left:0;right:0;bottom:0;padding:2rem;background:linear-gradient(180deg,transparent,rgba(7,28,58,.08) 25%,rgba(7,28,58,.9));color:#fff}.project-tile:not(:nth-child(4n+2)):not(:nth-child(4n+3)) .project-info{background:linear-gradient(180deg,transparent,rgba(255,255,255,.92) 28%,#fff);color:#071c3a}.project-info h3{font-size:1.6rem;margin:.2rem 0}.project-info p{margin:0;color:inherit;opacity:.78}.project-tile:hover .browser{transform:rotate(0deg) translateY(-14px) scale(1.03)}.project-tile:hover{box-shadow:0 32px 90px rgba(6,38,88,.18)}.chip{display:inline-block;background:var(--orange);color:#fff;padding:.36rem .75rem;border-radius:999px;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.project-link{position:absolute;inset:0;z-index:3}.subtle-note{text-align:center;margin-top:2rem;color:#66758b} .cta-modern{padding:100px 0;background:linear-gradient(135deg,#ff7a00,#ff9d2e);color:#fff;position:relative;overflow:hidden}.cta-modern:before{content:"";position:absolute;inset:-30% auto auto -10%;width:400px;height:400px;border-radius:50%;background:rgba(255,255,255,.16)}.cta-box{display:grid;grid-template-columns:1.3fr auto;gap:2rem;align-items:center}.cta-box h2{font-size:clamp(2rem,5vw,4.7rem);line-height:.95;letter-spacing:-.06em;margin:0}.cta-box p{font-size:1.15rem;max-width:690px;color:rgba(255,255,255,.88)} .reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease, transform .75s ease}.reveal.visible{opacity:1;transform:none} @media(max-width:900px){.dynamic-hero{background:linear-gradient(135deg,#061833,#0b53c9);min-height:auto;padding:80px 0}.grid2,.flow-grid,.cta-box{grid-template-columns:1fr!important}.hero-visual{min-height:430px}.metric-pill{display:none}.kpi-line,.project-showcase{grid-template-columns:1fr}.showcase-head{display:block}.dynamic-hero h1{font-size:3.4rem}.service-row{grid-template-columns:60px 1fr}.service-row .arrow{display:none}} /* Correcciones de contraste: botones claros y textos sobre fondos blancos */ .btn.white, a.btn.white, button.btn.white{color:#0a4cb0!important;background:#fff!important;} .btn.ghost, a.btn.ghost, button.btn.ghost{color:#0a4cb0!important;background:#fff!important;} .hero-actions .btn.white{color:#0a4cb0!important;} .section:not(.contrast-band):not(.cta-modern) .lead, .showcase-head p, .subtle-note{color:#536277;} .project-tile:not(:nth-child(4n+2)):not(:nth-child(4n+3)) .project-info h3, .project-tile:not(:nth-child(4n+2)):not(:nth-child(4n+3)) .project-info p{color:#071c3a!important;} /* === Ajustes finales SIATUWEB: ARCA separado, previews reales y WhatsApp visible === */ .arca-feature{position:relative;overflow:hidden;background:radial-gradient(circle at 10% 15%,rgba(255,122,0,.28),transparent 25%),linear-gradient(135deg,#071c3a 0%,#0a5bd7 62%,#ffffff 62%,#ffffff 100%);padding:105px 0;color:#fff}.arca-feature.compact{padding:78px 0}.arca-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}.arca-copy h2{font-size:clamp(2.4rem,6vw,5.6rem);line-height:.9;color:#fff;letter-spacing:-.06em}.arca-copy .lead{color:rgba(255,255,255,.9);max-width:720px}.eyebrow.light{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff}.arca-points{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.4rem 0}.arca-points span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.55rem .9rem;font-weight:800}.ghost-dark{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important;box-shadow:none!important}.phone-mock{width:min(340px,82vw);height:610px;border:12px solid #071c3a;border-radius:48px;background:#101828;margin-inline:auto;box-shadow:0 42px 100px rgba(0,0,0,.34);padding:14px;transform:rotate(2deg);animation:softTilt 6s ease-in-out infinite}.phone-screen{height:100%;border-radius:34px;background:radial-gradient(circle at 25% 12%,rgba(255,122,0,.42),transparent 25%),linear-gradient(160deg,#0a5bd7,#071c3a);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;color:#fff}.phone-screen h3{color:#fff;font-size:2rem}.phone-screen p{color:rgba(255,255,255,.82)}.app-badge{width:108px;height:108px;border-radius:30px;display:grid;place-items:center;background:#fff;color:#0a5bd7;font-weight:900;font-size:1.8rem;margin-bottom:1.5rem;box-shadow:0 16px 45px rgba(0,0,0,.18)} .project-showcase.six-projects{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.55rem}.project-showcase.six-projects .project-tile{min-height:430px}.live-browser{height:62%!important;left:6%!important;right:6%!important;top:7%!important;background:#fff}.browser-bar span{font-size:.72rem;color:#65748a;margin-left:.5rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-browser iframe{width:160%;height:160%;border:0;transform:scale(.625);transform-origin:0 0;pointer-events:none;background:#fff}.project-tile.live-preview .project-info{padding:1.55rem}.project-tile.live-preview .project-info:after{content:"Visitar web";display:inline-flex;margin-top:.8rem;background:#ff7a00;color:#fff;border-radius:999px;padding:.45rem .85rem;font-weight:900;font-size:.82rem}.showcase-head p{font-size:1.05rem}.whatsapp{right:22px!important;bottom:22px!important;width:auto!important;min-width:148px;height:56px!important;padding:0 18px!important;border-radius:999px!important;background:#25D366!important;color:#fff!important;font-size:0!important;gap:8px;z-index:9999!important;box-shadow:0 18px 40px rgba(0,0,0,.25)!important;animation:waPulse 2.4s infinite}.whatsapp:before{content:""!important;width:24px;height:24px;display:inline-block;background:#fff;mask:url('data:image/svg+xml;utf8,') center/contain no-repeat}.whatsapp span{font-size:.9rem;font-weight:900;color:#fff!important}.whatsapp span:after{content:"\A 675 01 23 32";white-space:pre;font-size:.72rem;font-weight:700;opacity:.92}@keyframes waPulse{0%,100%{transform:translateY(0);box-shadow:0 18px 40px rgba(0,0,0,.25),0 0 0 0 rgba(37,211,102,.35)}50%{transform:translateY(-3px);box-shadow:0 22px 46px rgba(0,0,0,.28),0 0 0 12px rgba(37,211,102,0)}} @media(max-width:1000px){.project-showcase.six-projects{grid-template-columns:repeat(2,minmax(0,1fr))}.arca-grid{grid-template-columns:1fr}.arca-feature{background:linear-gradient(135deg,#071c3a,#0a5bd7)}} @media(max-width:640px){.project-showcase.six-projects{grid-template-columns:1fr}.project-showcase.six-projects .project-tile{min-height:390px}.whatsapp{min-width:58px!important;width:58px!important;padding:0!important}.whatsapp span{display:none}.phone-mock{height:520px}.arca-feature{padding:72px 0}} /* Ajuste previews: ocultar banners de cookies de las webs previsualizadas */ .live-browser{overflow:hidden!important;position:absolute!important;} .live-browser:after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:5;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0),#ffffff 58%,#f3f7ff 100%);border-radius:0 0 18px 18px;} .live-browser:before{content:"Previsualización web";position:absolute;right:14px;bottom:14px;z-index:6;background:rgba(10,37,64,.88);color:#fff;font-size:.72rem;font-weight:900;padding:.38rem .62rem;border-radius:999px;letter-spacing:.02em;} .outline-ios{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.7)!important;color:#fff!important;box-shadow:none!important;} /* Previsualizaciones con capturas reales aportadas por SIATUWEB */ .screenshot-browser{height:64%!important;background:#fff;overflow:hidden;} .screenshot-browser img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center;transition:transform .55s ease, filter .55s ease;} .project-tile:hover .screenshot-browser img{transform:scale(1.045);filter:saturate(1.05) contrast(1.02);} .live-browser iframe{display:none!important;} @media(max-width:640px){.screenshot-browser{height:58%!important}.project-tile.live-preview .project-info{padding:1.25rem}} /* Corrección menú móvil */ .mobile-menu-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:46px;height:46px;border:1px solid #dce6f6;border-radius:14px;background:#fff;cursor:pointer;box-shadow:0 8px 20px rgba(7,21,47,.08);z-index:10001} .mobile-menu-toggle span{width:22px;height:2px;background:#07152f;border-radius:99px;display:block;transition:.25s} .mobile-menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)} .mobile-menu-toggle.active span:nth-child(2){opacity:0} .mobile-menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:900px){ .navwrap{position:relative;gap:12px} .mobile-menu-toggle{display:flex} .navbar .btn.blue{display:none} .menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid #e3ebf8;border-radius:0 0 22px 22px;box-shadow:0 22px 50px rgba(7,21,47,.16);padding:14px;z-index:9999;max-height:calc(100vh - 90px);overflow:auto} .menu.open{display:grid!important;grid-template-columns:1fr;gap:4px} .menu a{display:block;padding:13px 14px;border-radius:13px;color:#07152f!important;background:#f7faff;font-weight:800} .menu a:hover{background:#eef5ff;color:#0647b5!important} } @media(max-width:560px){ .topbar{font-size:.78rem} .navwrap{padding:10px 0} .logo{height:44px} } /* === Ajustes responsive finales: móvil limpio y sin solapes === */ @media (max-width: 900px){ .navbar{z-index:10000!important;} .navwrap{min-height:66px;} .navwrap > .btn, .navbar .navwrap > a.btn, .navbar .btn.blue{display:none!important;} .mobile-menu-toggle{display:flex!important;position:relative;flex:0 0 auto;margin-left:auto;} .menu{top:calc(100% + 1px)!important;} .topbar .container{display:flex;justify-content:center;text-align:center;} .topbar .container span:last-child{display:none!important;} .hero{min-height:auto;padding:58px 0 70px;} .hero-actions{display:grid;grid-template-columns:1fr;gap:12px;} .hero-actions .btn{width:100%;} .arca-grid,.flow-grid,.grid2,.split{grid-template-columns:1fr!important;} } @media (max-width: 640px){ body{overflow-x:hidden;} .topbar{display:none!important;} .container{width:min(100% - 28px,1180px);} .navbar{position:sticky;top:0;} .navwrap{padding:9px 0;} .logo{height:42px!important;max-width:210px;object-fit:contain;} .mobile-menu-toggle{width:44px;height:44px;border-radius:13px;} .menu{left:0!important;right:0!important;max-height:calc(100vh - 66px)!important;} .hero h1{font-size:clamp(2.55rem,15vw,3.45rem)!important;} .hero .lead{font-size:1.02rem;} .badges{gap:8px}.badge{font-size:.85rem;padding:7px 10px;} .portrait-frame,.hero-card{transform:none!important;} .project-showcase.six-projects{grid-template-columns:1fr!important;gap:1.2rem;} .project-showcase.six-projects .project-tile{min-height:405px;} .screenshot-browser{height:56%!important;} .arca-copy h2{font-size:clamp(2.8rem,17vw,4.1rem)!important;} .arca-points{gap:.5rem}.arca-points span{font-size:.82rem;padding:.48rem .72rem;} .phone-mock{height:470px;width:min(300px,88vw);border-radius:42px;} .cta-box{padding:28px 20px;} .cookie{left:10px!important;right:10px!important;bottom:10px!important;padding:16px!important;border-radius:18px!important;max-height:75vh;overflow:auto;} .cookie-actions .btn{width:100%;} .whatsapp{right:14px!important;bottom:14px!important;min-width:56px!important;width:56px!important;height:56px!important;padding:0!important;border-radius:50%!important;} }