/* ═══════════════════════════════════════════════════════════════ Landing para negocios locales · Rivero Studio Mismo sistema visual que riverostudio.es: negro cálido, Instrument Serif en titulares, Inter en texto, IBM Plex Mono en etiquetas y el naranja #ff5b3d de los botones. Una sola página, sin dependencias. Landing pública para captación de negocios locales. ═══════════════════════════════════════════════════════════════ */ :root{ --papel:#0c0c0d; --papel-2:#141416; --papel-3:#1a1a1d; --tinta:#f2efe9; --tinta-2:#d8cfc0; --humo:#8e8b84; --linea:#f2efe921; --linea-2:#f2efe912; --brasa:#ff5b3d; --brasa-osc:#b4321b; --serif:'Instrument Serif', Georgia, serif; --sans:'Inter', system-ui, sans-serif; --mono:'IBM Plex Mono', ui-monospace, monospace; --marco:clamp(20px, 5vw, 76px); --aire:clamp(88px, 11vw, 170px); --ancho:1240px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;max-width:100%;overflow-x:clip} body{ margin:0; background:var(--papel); color:var(--tinta); font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; max-width:100%; overflow-x:clip; } a{color:inherit; text-decoration:none} button{font:inherit; color:inherit; background:none; border:0; cursor:pointer} img{max-width:100%; display:block} ::selection{background:var(--brasa); color:#090909} /* grano y viñeta de fondo, como en la web */ .grano{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")} .foco{position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(60% 45% at 70% 0%, #2a1c14 0%, transparent 70%)} /* ═══════════════ tipografía base ═══════════════ */ .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--humo); margin:0 0 22px} .eyebrow b{color:var(--brasa); font-weight:500} h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.02em} h1{font-size:clamp(46px, 7.2vw, 112px); line-height:.96} h2{font-size:clamp(36px, 4.6vw, 68px); line-height:1.02} h3{font-size:clamp(24px, 2.2vw, 32px); line-height:1.15} em{font-style:italic} h1 em,h2 em{color:var(--tinta-2)} .lead{font-size:clamp(17px, 1.35vw, 20px); line-height:1.6; color:var(--tinta-2); max-width:56ch; margin:0} .muted{color:var(--humo)} .num{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--brasa)} /* ═══════════════ botones ═══════════════ */ .btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px; height:50px; padding:0 26px; border-radius:999px; border:1px solid var(--linea); font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; line-height:1; color:var(--tinta); background:transparent; white-space:nowrap; transition:background .5s cubic-bezier(.2,.7,.2,1), color .5s, border-color .5s, transform .5s cubic-bezier(.16,.84,.28,1); } .btn .txt{display:inline-flex; align-items:center; gap:10px; transition:transform .55s cubic-bezier(.16,.84,.28,1)} .btn .txt.clon{position:absolute; left:26px; right:26px; top:0; height:100%; transform:translateY(100%); justify-content:center} .btn:hover .txt{transform:translateY(-100%)} .btn:hover .txt.clon{transform:translateY(0)} .btn:hover{background:var(--tinta); color:#090909; border-color:var(--tinta)} .btn.brasa{background:var(--brasa); color:#090909; border-color:var(--brasa)} .btn.brasa:hover{background:var(--tinta); border-color:var(--tinta)} .btn .fl{font-size:14px} .enlace{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); display:inline-flex; align-items:center; gap:8px; position:relative} .enlace::after{content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--brasa); transform:scaleX(0); transform-origin:right; transition:transform .5s cubic-bezier(.16,.84,.28,1)} .enlace:hover::after{transform:scaleX(1); transform-origin:left} /* ═══════════════ nav ═══════════════ */ .nav{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px var(--marco); transition:background .5s, backdrop-filter .5s, padding .5s; } .nav.compacta{background:#0c0c0dd9; backdrop-filter:blur(10px); padding:14px var(--marco); border-bottom:1px solid var(--linea-2)} .marca{font-family:var(--serif); font-size:21px; letter-spacing:-.01em; line-height:1; display:flex; align-items:center; gap:10px} .marca .logo{width:26px; height:26px; border:1px solid var(--tinta); border-radius:6px; display:grid; place-items:center; font-size:14px; font-style:italic} .marca sup{font-family:var(--mono); font-size:8px; vertical-align:super; color:var(--humo)} .nav-d{display:flex; align-items:center; gap:28px} .nav-d a{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#f2efe9b3; transition:color .35s} .nav-d a:hover{color:var(--tinta)} .nav .btn{height:40px; padding:0 18px} .nav .btn .txt.clon{left:18px; right:18px} @media(max-width:860px){ .nav-d a{display:none} } /* ═══════════════ secciones ═══════════════ */ main{position:relative; z-index:1} section{padding:var(--aire) var(--marco)} .caja{max-width:var(--ancho); margin:0 auto} .linea{height:1px; background:var(--linea); max-width:var(--ancho); margin:0 auto} .cab{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:clamp(40px, 5vw, 72px)} .cab .lead{justify-self:end; max-width:44ch} @media(max-width:900px){ .cab{grid-template-columns:1fr} .cab .lead{justify-self:start} } /* ═══════════════ hero ═══════════════ */ .hero{min-height:min(100svh, 920px); display:flex; flex-direction:column; justify-content:flex-end; padding-top:96px; padding-bottom:124px; position:relative} @media(max-width:900px){ .hero{min-height:auto; justify-content:flex-start; padding-top:112px; padding-bottom:210px} } .hero .caja{width:100%} .hero h1{max-width:none; font-size:clamp(44px, 5.4vw, 80px); white-space:nowrap} @media(max-width:1000px){ .hero h1{font-size:clamp(44px, 9vw, 94px)} } @media(max-width:420px){ .hero h1{white-space:normal} } .hero-abajo{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:end; margin-top:clamp(20px, 3vw, 36px)} .hero-cta{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:30px} .datos{display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border:1px solid var(--linea); border-radius:14px; overflow:hidden; background:#14141699; backdrop-filter:blur(6px)} .dato{padding:18px 20px; border-right:1px solid var(--linea)} .dato:last-child{border-right:0} .dato b{display:block; font-family:var(--serif); font-size:clamp(26px, 2.6vw, 40px); font-weight:400; line-height:1; margin-bottom:8px} .dato span{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--humo); line-height:1.5; display:block} @media(max-width:900px){ .hero-abajo{grid-template-columns:1fr} .datos{grid-template-columns:1fr 1fr 1fr} } @media(max-width:600px){ .datos{grid-template-columns:1fr} .dato{border-right:0; border-bottom:1px solid var(--linea)} .dato:last-child{border-bottom:0} } /* revelado del titular palabra a palabra */ .pal{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em; margin-bottom:-.06em} .pal > span{display:inline-block} .con-js .pal > span{transform:translateY(110%); opacity:0; transition:transform 1.1s cubic-bezier(.16,.84,.28,1), opacity .8s ease} body.listo .pal > span{transform:none; opacity:1} .con-js .sube{opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform 1s cubic-bezier(.16,.84,.28,1)} body.listo .sube{opacity:1; transform:none} body.listo .d1{transition-delay:.35s} body.listo .d2{transition-delay:.5s} body.listo .d3{transition-delay:.65s} @media(max-width:900px){.con-js .hero .sube,.con-js .hero .pal>span{opacity:1;transform:none;transition:none}} /* selector de negocio (pestañas con luz deslizante): cambia el collage y la promesa */ .hero .selector{position:absolute; left:0; right:0; bottom:0; z-index:2; border-top:1px solid var(--linea-2); padding:14px var(--marco) 16px; display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; background:linear-gradient(180deg, transparent, #0c0c0dcc)} .sel-cab{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 300px} .sel-eti{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--humo); white-space:nowrap} .sel-tabs{position:relative; display:flex; gap:2px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:3px; border:1px solid var(--linea); border-radius:999px; background:#14141699; backdrop-filter:blur(8px); max-width:100%} .sel-tabs::-webkit-scrollbar{display:none} .sel-tab{position:relative; z-index:1; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#f2efe9a6; padding:9px 14px; border-radius:999px; white-space:nowrap; transition:color .35s} .sel-tab.activa{color:#090909} .sel-tab:hover:not(.activa){color:var(--tinta)} .sel-luz{position:absolute; top:3px; left:0; height:calc(100% - 6px); width:0; border-radius:999px; background:var(--tinta); z-index:0; transition:left .55s cubic-bezier(.16,.84,.28,1), width .55s cubic-bezier(.16,.84,.28,1)} .sel-linea{margin:0; font-family:var(--serif); font-style:italic; font-size:clamp(17px, 1.4vw, 22px); color:var(--tinta); transition:opacity .3s ease, transform .3s ease; line-height:1.25} .sel-linea.cambia{opacity:0; transform:translateY(6px)} .hero-collage .tarjeta img{transition:opacity .35s ease} .hero-collage .tarjeta.cambio img{opacity:0} body.listo .hero-collage .tarjeta.oculta{opacity:0; scale:.96} @media(max-width:900px){ .hero .selector{gap:12px} .sel-cab{flex-basis:100%; order:2} .sel-tabs{order:1; width:100%} } /* ═══════════════ aparición al scroll ═══════════════ */ .con-js .rev{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform 1s cubic-bezier(.16,.84,.28,1)} .con-js .rev.visto{opacity:1; transform:none} .con-js .rev.r2{transition-delay:.12s} .con-js .rev.r3{transition-delay:.24s} .con-js .rev.r4{transition-delay:.36s} .con-js .rev.r5{transition-delay:.48s} /* ═══════════════ problemas ═══════════════ */ .tres{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:18px; overflow:hidden} .tres > div{background:var(--papel); padding:clamp(24px, 3vw, 40px); display:flex; flex-direction:column; gap:14px; min-height:260px; transition:background .5s} .tres > div:hover{background:var(--papel-2)} .tres h3{margin-top:auto} .tres p{margin:0; color:var(--tinta-2); font-size:15px} @media(max-width:900px){ .tres{grid-template-columns:1fr} .tres > div{min-height:0} } /* ═══════════════ embudo ═══════════════ */ .embudo{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(20px, 3vw, 44px); position:relative} .paso{position:relative; padding-top:28px; border-top:1px solid var(--linea)} .paso::before{content:''; position:absolute; top:-1px; left:0; width:0; height:1px; background:var(--brasa); transition:width 1.4s cubic-bezier(.16,.84,.28,1)} .paso.visto::before{width:100%} .paso .num{display:block; margin-bottom:14px} .paso h3{font-size:clamp(34px, 3.6vw, 52px); margin-bottom:14px} .paso h3 em{color:var(--brasa)} .paso ul{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px} .paso li{position:relative; padding-left:22px; color:var(--tinta-2); font-size:15px; line-height:1.5} .paso li::before{content:'—'; position:absolute; left:0; color:var(--brasa)} .paso p{margin:0; color:var(--humo); font-size:14px} @media(max-width:900px){ .embudo{grid-template-columns:1fr} } /* ═══════════════ incluye ═══════════════ */ .incluye{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px, 5vw, 80px); align-items:start} .incluye .pegado{position:sticky; top:120px} .lista{list-style:none; margin:0; padding:0; border-top:1px solid var(--linea)} .lista li{display:grid; grid-template-columns:44px 1fr auto; gap:16px; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--linea)} .lista li .num{padding-top:4px} .lista li b{font-weight:400; font-size:clamp(17px, 1.4vw, 21px); display:block; margin-bottom:4px} .lista li p{margin:0; color:var(--humo); font-size:14px} .lista li .regalo{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--brasa); white-space:nowrap} @media(max-width:900px){ .incluye{grid-template-columns:1fr} .incluye .pegado{position:static} .lista li{grid-template-columns:36px 1fr} .lista li .regalo{grid-column:2} } /* ═══════════════ precios ═══════════════ */ .precios{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:stretch} .plan{border:1px solid var(--linea); border-radius:20px; padding:clamp(24px, 2.6vw, 36px); background:var(--papel-2); display:flex; flex-direction:column; gap:18px; position:relative; transition:transform .5s cubic-bezier(.16,.84,.28,1), border-color .5s} .plan:hover{transform:translateY(-6px); border-color:#f2efe94d} .plan.estrella{background:linear-gradient(180deg, #1c1613 0%, var(--papel-2) 60%); border-color:#ff5b3d66} .plan .tag{position:absolute; top:-13px; left:24px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; background:var(--brasa); color:#090909; padding:6px 12px; border-radius:999px} .plan .nombre{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--humo)} .plan .precio{font-family:var(--serif); font-size:clamp(52px, 5vw, 76px); line-height:1; letter-spacing:-.03em} .plan .precio small{font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--humo); display:block; margin-top:10px; letter-spacing:.1em; line-height:1.6} .plan .pagos{display:flex; gap:6px} .plan .pagos span{flex:1; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.06em; padding:9px 4px; border:1px solid var(--linea); border-radius:8px; color:var(--tinta-2)} .plan .pagos span b{display:block; font-weight:500; color:var(--tinta); font-size:13px; margin-bottom:2px} .plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1} .plan li{position:relative; padding-left:20px; font-size:14px; color:var(--tinta-2); line-height:1.45} .plan li::before{content:'✓'; position:absolute; left:0; color:var(--brasa); font-family:var(--mono); font-size:12px; top:2px} .plan li.mas{color:var(--tinta)} .plan li.mas::before{content:'+'; font-size:14px; top:0} .plan .nota{font-size:12px; color:var(--humo); margin:0; border-top:1px solid var(--linea); padding-top:14px; line-height:1.5} .plan .btn{align-self:flex-start; margin-top:4px} @media(max-width:1000px){ .precios{grid-template-columns:1fr} .plan{max-width:560px} } .garantia{margin-top:24px; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px} .garantia > div{border:1px solid var(--linea); border-radius:14px; padding:20px 22px; font-size:14px; color:var(--tinta-2); display:flex; gap:14px; align-items:flex-start} .garantia > div > div{min-width:0} .garantia .num{padding-top:3px} .garantia b{display:block; font-weight:400; color:var(--tinta); margin-bottom:4px; font-size:16px} @media(max-width:900px){ .garantia{grid-template-columns:1fr} } .mant{margin-top:20px; font-size:14px; color:var(--humo); max-width:80ch} .mant b{color:var(--tinta-2); font-weight:400} /* ═══════════════ sectores ═══════════════ */ .sectores{display:grid; grid-template-columns:1.25fr 1fr 1fr; grid-auto-rows:minmax(200px, auto); gap:14px} .sector{border:1px solid var(--linea); border-radius:18px; padding:clamp(22px, 2.6vw, 34px); background:var(--papel-2); display:flex; flex-direction:column; gap:12px; transition:border-color .5s, background .5s; position:relative; overflow:hidden} .sector:hover{border-color:#f2efe94d; background:var(--papel-3)} .sector.grande{grid-row:span 2; background:linear-gradient(160deg, #1f1712 0%, var(--papel-2) 70%); border-color:#ff5b3d55} .sector .ico{font-size:26px; line-height:1} .sector h3{font-size:clamp(22px, 2vw, 30px)} .sector.grande h3{font-size:clamp(34px, 3.4vw, 52px)} .sector p{margin:0; color:var(--tinta-2); font-size:14px; line-height:1.55} .sector .que{margin-top:auto; padding-top:14px; border-top:1px solid var(--linea); font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--humo); line-height:1.7} .sector .que i{color:var(--brasa); font-style:normal} @media(max-width:1000px){ .sectores{grid-template-columns:1fr 1fr} .sector.grande{grid-column:span 2; grid-row:auto} } @media(max-width:620px){ .sectores{grid-template-columns:1fr} .sector.grande{grid-column:auto} } /* ═══════════════ caso real ═══════════════ */ .caso{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px, 5vw, 80px); align-items:center} .caso .pantalla{aspect-ratio:4/3; border-radius:18px; border:1px solid var(--linea); position:relative; overflow:hidden; background:radial-gradient(70% 60% at 30% 20%, #3a2718 0%, #141416 60%)} .caso .pantalla .ventana{position:absolute; inset:10% 8% 0 8%; background:#f6f3ee; border-radius:12px 12px 0 0; box-shadow:0 30px 80px #000c; overflow:hidden; transform:perspective(1200px) rotateX(6deg); transform-origin:bottom} .caso .pantalla .ventana::before{content:''; position:absolute; left:0; right:0; top:0; height:28px; background:#e9e4dc} .caso .pantalla .ventana .barra{position:absolute; left:14px; top:9px; display:flex; gap:6px} .caso .pantalla .ventana .barra i{width:9px; height:9px; border-radius:50%; background:#cfc7ba} .caso .pantalla .ventana .cont{position:absolute; inset:40px 18px 0 18px; display:grid; grid-template-columns:1.2fr 1fr; gap:12px} .caso .pantalla .ventana .cont > div{background:#fff; border-radius:8px; box-shadow:0 1px 0 #e5dfd4} .caso .pantalla .ventana .cont .a{height:120px; background:linear-gradient(135deg,#e9c29a,#c9a173); border-radius:8px} .caso .pantalla .ventana .cont .b{display:flex; flex-direction:column; gap:8px; padding:10px} .caso .pantalla .ventana .cont .b i{height:8px; border-radius:4px; background:#e9e4dc; display:block} .caso .pantalla .ventana .cont .b i:nth-child(2){width:70%} .caso .pantalla .ventana .cont .b i:nth-child(3){width:50%; background:var(--brasa)} .caso .pantalla .etiq{position:absolute; left:18px; bottom:18px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta); background:#0c0c0dcc; border:1px solid var(--linea); padding:8px 12px; border-radius:999px; backdrop-filter:blur(6px)} .caso ul{list-style:none; margin:22px 0 28px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px} .caso li{font-size:14px; color:var(--tinta-2); padding-left:18px; position:relative} .caso li::before{content:'·'; position:absolute; left:0; color:var(--brasa); font-size:22px; line-height:.7} @media(max-width:900px){ .caso{grid-template-columns:1fr} } /* ═══════════════ proceso ═══════════════ */ .proceso{display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; counter-reset:p} .proceso > div{border-top:1px solid var(--linea); padding-top:22px; position:relative} .proceso > div::before{content:''; position:absolute; top:-1px; left:0; width:0; height:1px; background:var(--brasa); transition:width 1.2s cubic-bezier(.16,.84,.28,1)} .proceso > div.visto::before{width:100%} .proceso .num{display:block; margin-bottom:12px} .proceso h3{font-size:clamp(22px, 1.9vw, 28px); margin-bottom:10px} .proceso p{margin:0; color:var(--humo); font-size:14px} .proceso .tiempo{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); margin-top:14px; display:block} @media(max-width:1000px){ .proceso{grid-template-columns:1fr 1fr} } @media(max-width:600px){ .proceso{grid-template-columns:1fr} } /* ═══════════════ faq ═══════════════ */ .faq{max-width:860px} .faq details{border-bottom:1px solid var(--linea)} .faq details:first-of-type{border-top:1px solid var(--linea)} .faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; font-family:var(--serif); font-size:clamp(20px, 1.8vw, 26px); transition:color .3s} .faq summary::-webkit-details-marker{display:none} .faq summary .mas{font-family:var(--mono); font-size:18px; color:var(--brasa); transition:transform .4s cubic-bezier(.16,.84,.28,1); flex-shrink:0} .faq details[open] summary .mas{transform:rotate(45deg)} .faq details p{margin:0 0 22px; color:var(--tinta-2); font-size:15px; max-width:64ch} /* ═══════════════ contacto ═══════════════ */ .contacto{background:var(--papel-2); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea)} .contacto .caja{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px, 6vw, 100px); align-items:start} .contacto h2{font-size:clamp(40px, 5.4vw, 84px)} .contacto .lead{margin-top:22px} .form{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--linea)} .campo{display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:center; border-bottom:1px solid var(--linea); padding:6px 0} .campo label{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--humo)} .campo input,.campo textarea,.campo select{width:100%; background:transparent; border:0; color:var(--tinta); font:inherit; font-size:16px; padding:14px 0; outline:none; resize:vertical} .campo select{appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238e8b84' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 4px center} .campo select option{background:#141416; color:var(--tinta)} .campo input::placeholder,.campo textarea::placeholder{color:#f2efe955} .legal{display:flex; gap:12px; align-items:flex-start; font-size:12px; color:var(--humo); margin:18px 0 22px; line-height:1.5} .legal input{margin-top:1px; accent-color:var(--brasa); width:20px; height:20px; flex:0 0 20px} /* La casilla de condiciones se toca con el dedo, y a 13 px se falla. En Decora esto dejó atascadas a 12 personas que ya lo tenían todo relleno, así que aquí va de 20 px y el rótulo entero es pulsable. */ @media (max-width:760px), (pointer:coarse){ .legal{min-height:44px; align-items:center; padding:6px 0} .legal input{width:24px; height:24px; flex:0 0 24px; margin-top:0} } .form .btn{align-self:flex-start} .pie-form{font-size:12px; color:var(--humo); margin:14px 0 0} @media(max-width:900px){ .contacto .caja{grid-template-columns:1fr} .campo{grid-template-columns:1fr; gap:0} .campo input,.campo textarea,.campo select{padding-top:6px} } /* ═══════════════ footer ═══════════════ */ footer{padding:40px var(--marco) 110px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--humo)} footer .caja{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap} footer a:hover{color:var(--tinta)} /* barra fija inferior (móvil) */ .barra-movil{position:fixed; left:0; right:0; bottom:0; z-index:40; display:none; padding:12px var(--marco); background:#0c0c0de6; backdrop-filter:blur(10px); border-top:1px solid var(--linea)} .barra-movil .btn{width:100%; justify-content:center} @media(max-width:860px){ .barra-movil{display:block} footer{padding-bottom:120px} } /* sello de maqueta */ .sello{position:fixed; z-index:50; left:50%; transform:translateX(-50%); bottom:14px; font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--humo); border:1px solid var(--linea); border-radius:999px; padding:5px 12px; background:#141416cc; backdrop-filter:blur(6px); pointer-events:none} @media(max-width:860px){ .sello{display:none} } /* ═══════════════ hero · collage de proyectos reales ═══════════════ */ .hero .caja > *{position:relative; z-index:1} .hero-collage{position:absolute; right:var(--marco); top:110px; width:min(46vw, 640px); height:min(60vh, 540px); z-index:0; pointer-events:none; mask-image:linear-gradient(90deg, transparent 0%, #000 22%); -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 22%)} .hero-collage .tarjeta{position:absolute; border-radius:12px; overflow:hidden; border:1px solid #f2efe92e; box-shadow:0 40px 80px #000000b3; background:#141416; aspect-ratio:16/9} .hero-collage .tarjeta img,.hero-collage .tarjeta video{width:100%; height:100%; object-fit:cover; object-position:top; display:block} .hero-collage .t1{left:0; top:0; width:52%; rotate:-4deg; animation:flota 8s ease-in-out infinite} .hero-collage .t2{right:0; top:12%; width:50%; rotate:3deg; animation:flota 10s ease-in-out infinite reverse} .hero-collage .t3{left:8%; bottom:6%; width:48%; rotate:-2deg; animation:flota 9s ease-in-out infinite 1s} .hero-collage .t4{right:2%; bottom:0; width:46%; rotate:4deg; animation:flota 11s ease-in-out infinite reverse 2s} body.listo .hero-collage .t4{transition-delay:.75s} .hero-collage .etq{position:absolute; left:10px; bottom:10px; font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta); background:#0c0c0dcc; border:1px solid var(--linea); padding:4px 8px; border-radius:999px} @keyframes flota{0%,100%{translate:0 0} 50%{translate:0 -12px}} .con-js .hero-collage .tarjeta{opacity:0; scale:.96; transition:opacity 1.2s ease, scale 1.4s cubic-bezier(.16,.84,.28,1)} body.listo .hero-collage .tarjeta{opacity:1; scale:1} body.listo .hero-collage .t2{transition-delay:.25s} body.listo .hero-collage .t3{transition-delay:.5s} @media(max-width:1000px){ .hero-collage{display:none} } /* ═══════════════ proyectos reales ═══════════════ */ .proyectos{display:grid; grid-template-columns:repeat(6, 1fr); gap:16px} .proy{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--linea); background:var(--papel-2); display:block; color:inherit; transition:border-color .5s, transform .6s cubic-bezier(.16,.84,.28,1)} .proy:hover{border-color:#f2efe94d; transform:translateY(-4px)} .proy.g{grid-column:span 3} .proy.m{grid-column:span 2} .proy .media{position:relative; aspect-ratio:16/9; overflow:hidden; background:#0c0c0d} /* 16/9 recorta la franja inferior de las capturas */ .proy .media img,.proy .media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; display:block} .proy .media img{transition:transform 1.4s cubic-bezier(.16,.84,.28,1), clip-path 1.2s cubic-bezier(.16,.84,.28,1)} .proy:hover .media img{transform:scale(1.04)} .proy .media video{opacity:0; transition:opacity .5s ease} .proy.reproduciendo .media video{opacity:1} .con-js .proy .media img{clip-path:inset(0 0 100% 0)} .con-js .proy.visto .media img{clip-path:inset(0 0 0 0)} .proy .chip{position:absolute; left:12px; top:12px; z-index:2; font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; background:#0c0c0dcc; border:1px solid var(--linea); padding:5px 9px; border-radius:999px; color:var(--tinta); backdrop-filter:blur(4px); display:inline-flex; align-items:center; gap:6px} .proy .chip i{width:6px; height:6px; border-radius:50%; background:var(--brasa); font-style:normal} .proy .pie{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; padding:16px 18px 18px} .proy .pie b{display:block; font-family:var(--serif); font-size:clamp(20px, 1.7vw, 26px); font-weight:400; line-height:1.1; letter-spacing:-.01em} .proy .pie span:not(.ir){display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--humo); margin-top:6px} .proy .pie p{margin:8px 0 0; font-size:13px; color:var(--tinta-2); line-height:1.45} .proy .ir{flex-shrink:0; width:40px; height:40px; border-radius:50%; border:1px solid var(--linea); display:grid; place-items:center; font-size:14px; transition:background .4s, color .4s, border-color .4s} .proy:hover .ir{background:var(--brasa); color:#090909; border-color:var(--brasa)} @media(max-width:1100px){ .proy.m{grid-column:span 3} } @media(max-width:760px){ .proy.g,.proy.m{grid-column:span 6} } .cinta{margin-top:16px; overflow:hidden; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); padding:18px 0; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)} .cinta .pista{display:flex; gap:14px; width:max-content; animation:cinta 70s linear infinite} .cinta:hover .pista{animation-play-state:paused} .cinta a{flex:0 0 auto; width:240px; border-radius:12px; overflow:hidden; border:1px solid var(--linea); background:var(--papel-2); transition:border-color .4s} .cinta a:hover{border-color:#f2efe94d} .cinta a img{width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top; display:block} .cinta a span{display:block; padding:10px 12px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} @keyframes cinta{to{transform:translateX(-50%)}} .proy-pie{display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:22px; flex-wrap:wrap} .proy-pie p{margin:0; font-size:13px; color:var(--humo); max-width:70ch} /* ═══════════════ caso real · captura ═══════════════ */ .caso .pantalla .foto{position:absolute; inset:10% 8% 0 8%; border-radius:12px 12px 0 0; overflow:hidden; box-shadow:0 30px 80px #000c; transform:perspective(1200px) rotateX(6deg); transform-origin:bottom; border:1px solid #f2efe92e; border-bottom:0; background:#141416} .caso .pantalla .foto img{width:100%; height:100%; object-fit:cover; object-position:top; display:block} .caso .pantalla .foto video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; display:block; opacity:0; transition:opacity .6s} .caso .pantalla:hover .foto video{opacity:1} /* ═══════════════ embudo pegajoso (portado del «Sticky Content Wrapper» de hyperiux, 21st.dev) ═══════════════ */ .pegajoso{height:calc(var(--pasos, 3) * 100svh); padding:0; position:relative} .peg-vista{position:sticky; top:0; height:100svh; display:grid; grid-template-columns:42% 1fr; gap:clamp(24px, 4vw, 64px); align-items:stretch; padding:0 var(--marco); max-width:calc(var(--ancho) + 2 * var(--marco)); margin:0 auto; box-sizing:border-box} .peg-textos{position:relative; min-width:0} .peg-paso{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; will-change:opacity, transform; padding-right:8px} .peg-paso .num{display:block; margin-bottom:14px} .peg-paso h3{font-size:clamp(36px, 4vw, 62px); line-height:1.02; margin:0 0 16px} .peg-paso h3 em{color:var(--brasa)} .peg-paso p{margin:0 0 16px; color:var(--tinta-2); font-size:clamp(15px, 1.15vw, 18px); max-width:46ch} .peg-paso ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px} .peg-paso li{position:relative; padding-left:22px; color:var(--tinta-2); font-size:15px; line-height:1.5} .peg-paso li::before{content:'—'; position:absolute; left:0; color:var(--brasa)} .peg-paso .enlace{margin-top:20px} .peg-medios{position:relative; align-self:center; height:min(72svh, 640px); border-radius:18px; overflow:hidden; border:1px solid var(--linea); background:var(--papel-2); box-shadow:0 40px 90px #000000aa} .peg-medio{position:absolute; inset:0; margin:0; will-change:transform, clip-path; transform-origin:center} .peg-medio img,.peg-medio video{width:100%; height:100%; object-fit:cover; object-position:top; display:block} .peg-cap{position:absolute; left:14px; bottom:14px; z-index:10; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta); background:#0c0c0dcc; border:1px solid var(--linea); padding:6px 10px; border-radius:999px; backdrop-filter:blur(6px); transition:opacity .3s} .peg-cap.cambia{opacity:0} .peg-hint{position:absolute; left:var(--marco); bottom:22px; display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--humo); opacity:0; transition:opacity .5s; pointer-events:none} .peg-vista.activa .peg-hint{opacity:1} .peg-hint svg{width:14px; height:20px} .peg-hint polyline{fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; animation:chev 1.4s ease-in-out infinite} .peg-hint polyline:nth-child(2){animation-delay:.22s} .peg-hint polyline:nth-child(3){animation-delay:.44s} @keyframes chev{0%,100%{opacity:.08; transform:translateY(-3px)} 50%{opacity:.6; transform:translateY(2px)}} .peg-progreso{position:absolute; right:var(--marco); bottom:28px; display:flex; gap:8px} .peg-progreso i{width:26px; height:2px; background:var(--linea); border-radius:2px; cursor:pointer; transition:background .4s, width .4s} .peg-progreso i.on{background:var(--brasa); width:40px} @media(max-width:1000px){ .peg-vista{grid-template-columns:1fr; grid-template-rows:36svh 1fr; gap:14px; padding-top:72px; padding-bottom:60px} .peg-medios{height:100%; align-self:stretch; border-radius:14px} .peg-paso{justify-content:flex-start; padding-top:8px} .peg-paso h3{font-size:clamp(30px, 7.5vw, 44px)} .peg-paso p{font-size:15px} .peg-paso li{font-size:14px} .peg-hint{display:none} } body.solo-embudo main > :not(#embudo), body.solo-embudo .nav, body.solo-embudo footer, body.solo-embudo .barra-movil, body.solo-embudo .sello{display:none !important} body.solo-embudo .pegajoso{height:100svh} /* ═══════════════ titulares con máscara (portado del «Text Reveal (Mask)» de soralabs, 21st.dev) ═══════════════ */ .rt .ln{display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em} .rt .ln > span{display:block; transform:translateY(112%); transition:transform .9s cubic-bezier(.19, 1, .22, 1); will-change:transform} .rt.on .ln > span{transform:none} /* ═══════════════ sectores · hecho para ═══════════════ */ .sector .hechos{display:flex; gap:6px; margin-top:auto; padding-top:14px} .sector .hechos a{display:block; width:64px; border-radius:6px; overflow:hidden; border:1px solid var(--linea); transition:transform .5s cubic-bezier(.16,.84,.28,1), border-color .4s} .sector .hechos a:hover{transform:translateY(-4px); border-color:#f2efe94d} .sector .hechos img{width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top; display:block} .sector.grande .hechos a{width:92px} .sector .que{margin-top:12px} @media (prefers-reduced-motion:reduce){ *{animation:none!important; transition-duration:.01ms!important} .con-js .pal > span,.con-js .sube,.con-js .rev{opacity:1!important; transform:none!important} .con-js .proy .media img{clip-path:none!important} .con-js .hero-collage .tarjeta{opacity:1!important; scale:1!important} } /* Zona táctil en el móvil: los enlaces medían 19 px de alto y con el pulgar se fallan. El ::before transparente agranda el área sensible sin mover nada (el subrayado va en ::after y se queda donde estaba). */ @media (max-width: 760px), (pointer: coarse) { .enlace, .btn { position: relative; } .enlace::before, .btn::before { content: ''; position: absolute; inset: -13px -10px; } } /* Los que faltaban de esta página: la marca de la barra, los enlaces de los hechos y el teléfono. Misma zona táctil, sin mover nada. */ @media (max-width: 760px), (pointer: coarse) { .marca, .hechos a, .related-grid a, .hero-cta a, a[href^="tel:"] { position: relative; } .marca::before, .hechos a::before, .related-grid a::before, .hero-cta a::before, a[href^="tel:"]::before { content: ""; position: absolute; inset: -13px -10px; } } /* Los últimos de estas páginas: los enlaces que van dentro de un titular («Coworkings y salas ↗») y el correo y la web del pie. */ @media (max-width: 760px), (pointer: coarse) { article h3 a, footer .caja a { position: relative; } article h3 a::before, footer .caja a::before { content: ""; position: absolute; inset: -13px -10px; } } /* Y las migas de pan y el pie: la clase `caja` va en el propio