:root{--bg:#081324;--navy:#0d2038;--blue:#3c9cff;--gold:#d8b77b;--ink:#17263b;--muted:#627188;--paper:#f5f7fa}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);line-height:1.6}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}img{max-width:100%}.wrap{width:min(1160px,calc(100% - 40px));margin:auto}.nav{background:#09172a;color:white;position:sticky;top:0;z-index:10;border-bottom:1px solid #ffffff20}.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}.brand{font-size:1.2rem;font-weight:800;letter-spacing:.04em;white-space:nowrap}.brand b{color:var(--gold)}.navlinks{display:flex;gap:24px;align-items:center;font-size:.92rem}.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:#06172c;border:0;border-radius:12px;padding:13px 22px;font-weight:750;cursor:pointer;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px);background:#7dbdff}.btn.alt{background:transparent;border:1px solid #a4b4c8;color:white}.hero{background:radial-gradient(circle at 78% 20%,#1b4772 0,transparent 40%),linear-gradient(135deg,#071325,#112844);color:white;padding:100px 0 105px}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:65px;align-items:center}.eyebrow{color:var(--gold);font-size:.8rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.hero h1{font-size:clamp(2.5rem,5vw,4.6rem);line-height:1.1;letter-spacing:-.055em;margin:20px 0}.hero h1 em{font-style:normal;color:#80bcff}.hero p{color:#c2d0e0;font-size:1.13rem;max-width:600px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.mini{font-size:.86rem;color:#aebed1;margin-top:20px}.preview{border:1px solid #ffffff2d;border-radius:24px;background:#ffffff0b;box-shadow:0 28px 80px #0005;padding:18px;transform:rotate(1deg)}.browser{background:#f9fafc;color:#17263b;border-radius:14px;overflow:hidden}.dots{padding:13px 16px;background:#e7ebf1;color:#98a3b2;letter-spacing:4px;font-size:13px}.screen{padding:32px 25px}.screen .pill{display:inline-block;background:#e6efff;color:#2364a2;border-radius:20px;padding:5px 12px;font-size:.75rem;font-weight:800}.screen h3{font-size:1.8rem;line-height:1.2;margin:17px 0 10px}.screen p{color:#66758b;font-size:.94rem}.screen .bar{height:12px;border-radius:12px;background:#e9edf2;margin:13px 0}.screen .bar:nth-of-type(2){width:70%}.screen .cta{display:inline-block;background:#15375d;color:white;padding:9px 15px;border-radius:8px;font-size:.8rem;margin-top:12px}.section{padding:88px 0}.section.soft{background:var(--paper)}.section.dark{background:var(--bg);color:white}.heading{max-width:740px;margin-bottom:35px}.heading h2{font-size:clamp(2rem,3.4vw,3rem);line-height:1.17;letter-spacing:-.04em;margin:12px 0}.heading p{color:var(--muted);font-size:1.07rem}.dark .heading p{color:#b6c5d5}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{background:white;border:1px solid #e4e9f0;border-radius:20px;padding:28px;box-shadow:0 9px 35px #1c30470a}.card h3{font-size:1.3rem;line-height:1.3;margin:14px 0 10px}.card p{color:var(--muted);margin:0}.symbol{font-size:1.55rem;display:grid;place-items:center;width:48px;height:48px;background:#e8f1ff;border-radius:13px;color:#2468ac}.project{padding:0;overflow:hidden}.project .visual{height:185px;background:linear-gradient(135deg,#0c1c34,#245888);display:flex;align-items:center;justify-content:center;color:white;font-weight:850;font-size:1.55rem;letter-spacing:-.04em;text-align:center;padding:20px}.project .visual.remesas{background:radial-gradient(circle at 65% 40%,#226cb3,#0b1930 70%)}.project .visual.wood{background:linear-gradient(130deg,#422d20,#a0784c)}.project .visual.deco{background:linear-gradient(135deg,#5d3d73,#d4a9cf)}.project .visual.fletes{background:linear-gradient(135deg,#20384b,#4c7f95)}.project .visual.pet{background:linear-gradient(135deg,#305c53,#9dcbb7)}.project .inner{padding:24px}.project .inner h3{margin:0 0 7px}.project .inner p{min-height:72px}.project .inner a{display:inline-block;margin-top:18px;color:#155da3;font-weight:750}.tag{font-size:.74rem;color:#28659d;background:#e7f1fb;border-radius:100px;padding:5px 10px;display:inline-block;margin-bottom:12px}.price{font-size:2rem;font-weight:850;letter-spacing:-.04em;color:#0f3e69;margin:5px 0 15px}.card ul{padding-left:19px;color:#53647b;min-height:180px}.card li{margin:8px 0}.card.featured{border:2px solid #4b9cf2;box-shadow:0 20px 50px #2e77c322}.small{font-size:.82rem;color:var(--muted)}.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.step{border-left:2px solid #5aa6f2;padding:0 20px}.step:before{counter-increment:step;content:'0' counter(step);display:block;color:#8bc5ff;font-weight:850;margin-bottom:10px}.step h3{margin:0 0 7px}.step p{color:#bac9d9;margin:0}.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;align-items:start}.contact-grid p{color:#c2d0e0}.contact-grid a.mail{color:#8bc5ff;font-weight:800;overflow-wrap:anywhere}.form{background:white;border-radius:23px;padding:32px;color:var(--ink);box-shadow:0 25px 70px #0004}.form label{display:block;font-size:.87rem;font-weight:750;margin-bottom:6px}.form input,.form select,.form textarea{width:100%;border:1px solid #d6dfe9;border-radius:10px;padding:12px 13px;background:#fff;color:#1a2a3d}.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid #81b9ff;outline-offset:1px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{margin-bottom:16px}.form .btn{width:100%;margin-top:5px}.form .small{margin-top:12px}.honeypot{position:absolute;left:-9999px;opacity:0}.footer{background:#050d19;color:#aab8c9;padding:32px 0}.footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}.footer a{color:#cde2fa}.thanks{min-height:75vh;display:grid;place-items:center;background:var(--bg);color:white;text-align:center;padding:30px}.thanks article{max-width:600px}.thanks h1{font-size:clamp(2rem,5vw,3.3rem)}@media(max-width:850px){.hero-grid,.contact-grid{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.navlinks{gap:12px;font-size:.8rem}.navlinks a:nth-child(2),.navlinks a:nth-child(3){display:none}.hero{padding:70px 0}.preview{transform:none}}@media(max-width:570px){.grid,.steps,.fields{grid-template-columns:1fr}.navlinks a:not(.btn){display:none}.nav .wrap{min-height:68px}.navlinks .btn{padding:10px 12px;font-size:.78rem}.section{padding:65px 0}.form{padding:22px}.hero h1{font-size:2.55rem}}

#estado-envio{padding:12px 14px;margin:12px 0;border:1px solid #83baff;border-radius:8px;color:#e8f2ff;background:#193553}#estado-envio[hidden]{display:none}button:disabled{opacity:.7;cursor:wait}

/* Portada interactiva: código → diseño → sitio final visible hasta repetir */
section[id]{scroll-margin-top:92px}.preview{transform:none;padding:14px;border-radius:22px;background:#10233a;box-shadow:0 30px 80px #0007}.demo-top,.demo-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#c5d9ee;font-size:.75rem;padding:4px 5px 12px}.demo-live{font-weight:850;letter-spacing:.1em;color:#e9f5ff}.demo-live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4ce2b2;margin-right:6px;box-shadow:0 0 12px #4ce2b2}.demo-window{position:relative;background:#0c1728;border-radius:13px;overflow:hidden;min-height:355px;border:1px solid #ffffff24}.demo-toolbar{height:37px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#1b2a3e;color:#a8b7c8;font-size:.7rem}.demo-dots{color:#f3ad8d;letter-spacing:4px}.demo-code,.demo-build,.demo-site{height:318px}.demo-code{padding:25px 15px;color:#d4e8ff;font:clamp(.66rem,1.05vw,.83rem)/2.05 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap;overflow:hidden}.demo-code div{animation:code-appear .4s both}.demo-code div:nth-child(2){animation-delay:.3s}.demo-code div:nth-child(3){animation-delay:.6s}.demo-code div:nth-child(4){animation-delay:.9s}.demo-code div:nth-child(5){animation-delay:1.2s}.demo-code div:nth-child(6){animation-delay:1.5s}.demo-code div:nth-child(7){animation-delay:1.8s}.demo-code div span{color:#607a96;margin-right:13px}.cursor{color:#8bc5ff;animation:blink .65s steps(1) infinite}.demo-build{display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:12px;padding:22px;color:white;background:radial-gradient(circle at center,#244e76,#0d1b30 70%)}.build-icon{font-size:3rem;color:#e2c18e;animation:float 1.5s ease-in-out infinite}.demo-build strong{font-size:1.2rem}.demo-build span{font-size:.82rem;color:#c3d5e7}.build-progress{width:78%;height:7px;background:#ffffff22;border-radius:20px;overflow:hidden;margin-top:8px}.build-progress i{display:block;height:100%;background:linear-gradient(90deg,#61b6ff,#d9b67e);animation:load 1.8s ease-out forwards}.demo-site{display:none;background:#f9f5ed;color:#17263b;overflow:hidden}.preview[data-stage=build] .demo-code,.preview[data-stage=site] .demo-code{display:none}.preview[data-stage=build] .demo-build{display:flex}.preview[data-stage=site] .demo-site{display:block;animation:site-reveal .65s ease-out both}.restaurant-nav{height:46px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 14px;background:#f9f6ef;font-size:.62rem}.restaurant-nav b{font-size:.81rem;letter-spacing:.04em}.restaurant-nav b span{color:#ad6a3b}.restaurant-nav small{color:#5f5b54}.restaurant-book{background:#243c32;color:white;border-radius:3px;padding:6px 8px}.restaurant-hero{height:222px;position:relative;background:linear-gradient(90deg,#0d1b19ed,#102a2640),url('/restaurante-demo.svg') center/cover}.restaurant-shade{position:absolute;inset:0;padding:23px 23px;color:white}.restaurant-shade>span:first-child{font-size:.55rem;letter-spacing:.17em;color:#e8d6b9}.restaurant-shade h3{font-family:Georgia,serif;font-size:2.1rem;line-height:.97;margin:11px 0 9px;letter-spacing:-.03em}.restaurant-shade h3 em{color:#e8c397;font-weight:normal}.restaurant-shade p{font-size:.68rem;margin:0 0 13px;color:#f5ede2}.restaurant-button{display:inline-block;background:#d9b583;color:#1c2924;padding:7px 10px;font-size:.62rem;font-weight:800;border-radius:3px}.restaurant-categories{height:49px;display:flex;align-items:center;justify-content:space-around;gap:4px;color:#46594b;font-family:Georgia,serif;font-size:.78rem}.demo-bottom{padding:13px 5px 4px}.demo-track{height:4px;background:#ffffff26;border-radius:5px;flex:1;overflow:hidden}.demo-track i{display:block;width:24%;height:100%;background:#8ac4ff;transition:width .65s}.demo-bottom button{border:1px solid #ffffff4b;border-radius:8px;background:transparent;color:white;padding:6px 10px;cursor:pointer;font-size:.73rem}.demo-bottom button:hover{background:#ffffff20}.demo-caption{font-size:.7rem!important;color:#a9bdd2!important;margin:7px 4px 0!important}.remesas-cover{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative;overflow:hidden;padding:18px;text-align:left;background:radial-gradient(circle at 88% 28%,#16558e,transparent 50%),linear-gradient(120deg,#071a33,#0b3158)}.remesas-cover:after{content:'◌';position:absolute;font-size:190px;right:-13px;top:-54px;color:#5ed5ff2c}.remesas-cover small{font-size:.58rem;letter-spacing:.12em;color:#a7e8ff;z-index:1}.remesas-cover strong{font-size:1.65rem;line-height:.98;margin:13px 0 7px;z-index:1}.remesas-cover strong span{color:#4ed6f4}.remesas-cover em{font-size:.67rem;font-style:normal;font-weight:500;color:#cce9fa;z-index:1}.remesas-lines{position:absolute;right:16px;bottom:15px;color:#7de6ff;font-size:1.3rem}.project .visual.remesas{padding:0}.project .visual.remesas .remesas-cover{font-size:initial;letter-spacing:normal}.card.featured{position:relative}.card.featured:before{content:'MÁS CONSULTADO';position:absolute;top:-13px;right:22px;background:#155c9c;color:white;padding:5px 11px;border-radius:30px;font-size:.66rem;letter-spacing:.07em;font-weight:850}@keyframes code-appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes blink{50%{opacity:0}}@keyframes float{50%{transform:translateY(-8px)}}@keyframes load{from{width:5%}to{width:100%}}@keyframes site-reveal{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@media(max-width:570px){.demo-window{min-height:355px}.restaurant-nav small{display:none}.demo-code{font-size:.62rem;padding:20px 10px}.demo-code div span{margin-right:5px}.restaurant-hero{height:222px}.restaurant-shade h3{font-size:1.95rem}}@media(prefers-reduced-motion:reduce){.demo-code div,.build-icon,.build-progress i,.demo-site,.cursor{animation:none!important}html{scroll-behavior:auto}}

/* Restored StudioWebM identity: original layout and selected monitor/phone mark */
.brand{display:inline-flex;align-items:center;gap:10px}.brand-icon{width:43px;height:36px;color:#edf5ff;flex:none}.brand-name{white-space:nowrap}.brand-name>b{color:#d4b184}.brand-name>span{color:#83baff}
/* Expanded quotation form, retaining the earlier site design */
.form-heading{padding-bottom:18px;border-bottom:1px solid #ffffff22;margin-bottom:18px}.form-kicker{font-size:.73rem;letter-spacing:.13em;color:#b9d8ff;font-weight:750}.form-heading h3{font-size:1.45rem;margin:9px 0}.form-heading p{color:#b9c6d5;font-size:.91rem;line-height:1.55}.form-group-label{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:#9fcaff;font-weight:750;margin:23px 0 15px}.form label b{color:#83baff}.form label span{font-weight:400;color:#aebdca}.form .field{margin-bottom:14px}.form .fields{gap:14px}.conditional-web{border:1px solid #8bbcfb55;border-radius:12px;padding:15px;background:#83baff0b}.conditional-web[hidden]{display:none!important}.field-hint{color:#b4c4d5;font-size:.8rem;margin:8px 0 0}.form-submit{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px}.form-privacy{font-size:.8rem;color:#b4c4d5;text-align:center;margin:12px 0 0}.form .honeypot{position:absolute;left:-9999px;opacity:0}.brand-icon rect{vector-effect:non-scaling-stroke}
@media(max-width:480px){.brand-icon{width:34px;height:29px}.brand{gap:6px}.brand-name{font-size:.92rem}.form-heading h3{font-size:1.2rem}}

/* Portafolio: capturas de los sitios publicados, sin reemplazar la identidad elegida. */
#proyectos .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.project{transition:transform .25s ease,box-shadow .25s ease;border-radius:19px}
.project:hover{transform:translateY(-5px);box-shadow:0 22px 55px #132e4d20}
.project .shot-link{display:block;position:relative;overflow:hidden;background:#142943}
.project .portfolio-shot{position:relative;height:auto;aspect-ratio:16/10;padding:0;display:block;background:linear-gradient(145deg,#132944,#244c70);overflow:hidden}
.project .portfolio-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .45s ease;position:relative;z-index:1}
.project:hover .portfolio-shot img{transform:scale(1.035)}
.project .shot-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;color:#d7e6f6;font-size:1.35rem;letter-spacing:-.03em;font-weight:800;background:linear-gradient(145deg,#132944,#244c70)}
.project .shot-ribbon{position:absolute;bottom:13px;left:13px;z-index:2;padding:7px 10px;background:#071626d9;color:#fff;border:1px solid #ffffff3d;border-radius:7px;font-size:.66rem;letter-spacing:.07em;font-weight:750}
.project .inner{padding:22px 24px 25px}.project .inner p{min-height:54px}.project .project-domain{display:block;color:#8190a5;font-size:.76rem;margin:4px 0 12px;overflow-wrap:anywhere}.project .tag{background:#edf3fa;color:#375b7e}.project .inner a{margin-top:14px}
@media(max-width:900px){#proyectos .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:570px){#proyectos .grid{grid-template-columns:1fr}}

/* Páginas individuales del portafolio */
.project-detail{padding-top:90px;padding-bottom:100px}.project-detail .eyebrow a{color:inherit;text-decoration:none}.project-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:center;margin-top:34px}.project-detail h1{font-size:clamp(2.5rem,5vw,4.7rem);letter-spacing:-.055em;line-height:1.08;margin:20px 0}.project-intro{font-size:1.15rem;line-height:1.75;color:#4c5f74}.project-features{font-size:.84rem;font-weight:700;color:#967449;letter-spacing:.02em;margin:24px 0}.project-detail-preview{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:18px;background:#152c48;box-shadow:0 25px 65px #07162724}.project-detail-preview img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top}.project-detail-preview .shot-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:800;color:white}.project-detail .actions{margin:32px 0 20px}@media(max-width:800px){.project-detail-grid{grid-template-columns:1fr;gap:32px}.project-detail{padding-top:52px}}

/* Canales oficiales StudioWebM */
.social-contact{margin-top:22px;padding:19px 20px;border:1px solid rgba(212,177,132,.4);border-radius:16px;background:rgba(255,255,255,.045)}
.social-contact h3{margin:0 0 12px;font-size:1.1rem;color:#fff}.social-contact .social-links{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px}.social-contact .social-links a,.social-contact .social-links span{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:8px 12px;color:#fff;text-decoration:none;font-size:.88rem}.social-contact .social-links span{opacity:.76}.social-contact .social-note{font-size:.82rem;color:#c0cddd;margin:0}.footer-social{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.footer-social a{color:inherit}

/* Enlaces sociales: solo iconos, con etiquetas accesibles. */
.social-icon-link{display:inline-flex!important;align-items:center;justify-content:center;vertical-align:middle;width:46px;min-width:46px;height:46px;padding:0!important;border:1px solid rgba(170,193,219,.36);border-radius:13px;text-decoration:none!important;color:inherit;transition:background .2s,border-color .2s,transform .2s}
.social-icon-link:hover{background:rgba(100,169,236,.13);border-color:#74aef1;transform:translateY(-2px)}
.social-icon-link:focus-visible{outline:3px solid #74aef1;outline-offset:3px}
.social-icon-link svg{display:block;flex:none}