:root{ --ink:#141619;--ink-2:#1E2128;--ink-3:#2A2F38; --red:#E43018;--red-bright:#FF4326;--silver:#C0C0C0; --paper:#F5F6F8;--paper-2:#ECEEF1;--line:#DCDFE5; --text:#141619;--muted:#6A7280;--on-dark:#EEF0F3;--on-dark-muted:#A7AEB8;--white:#FFF; --radius:16px;--shadow:0 18px 44px -20px rgba(0,0,0,.5);--shadow-sm:0 8px 22px -12px rgba(10,12,16,.3); --wrap:1180px; --grad-red:linear-gradient(135deg,#E43018,#FF5A2A); --orange:#FF6A00;--grad-orange:linear-gradient(135deg,#FF6A00,#FF9100); /* El naranja de marca, un paso mas arriba: sobre negro el #FF6A00 se apaga. Es el acento electrico que pidio el cliente, y el mismo que usa el contorno de la pieza encendida en la seccion 3D. */ --elec:#FF8A1F; /* 🔑 UN SOLO FONDO para toda la pagina. Antes alternaba entre papel claro, `--ink`, `--ink-2` y un radial gris: cada seccion parecia de un sitio distinto. Las secciones ya no traen fondo propio; lo que las separa es el aire y un filo de 1px, no un cambio de color. */ --noche:#07080A; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--noche);color:var(--on-dark);font-family:"Hanken Grotesk",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased} h1,h2,h3{font-family:"Saira","Hanken Grotesk",sans-serif;line-height:1.05;margin:0;letter-spacing:-.01em} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px} .eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red)} .section{padding:88px 0;border-top:1px solid rgba(255,255,255,.07)} .section:first-of-type{border-top:0} @media(max-width:720px){.section{padding:58px 0}} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:600;font-size:1rem;padding:14px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .2s} .btn:hover{transform:translateY(-2px)} .btn-red{background:var(--grad-red);color:#fff;box-shadow:0 10px 24px -14px rgba(0,0,0,.55)} .btn-orange{background:var(--grad-orange);color:#fff;box-shadow:0 10px 24px -14px rgba(0,0,0,.55)} .btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.4)} .btn-ghost:hover{border-color:var(--red);color:var(--red-bright)} .btn-lg{padding:16px 32px;font-size:1.05rem} .btn-block{width:100%} .demobar{background:rgba(0,0,0,.6);backdrop-filter:blur(16px);color:var(--on-dark-muted);font-size:.78rem;text-align:center;padding:7px 12px} .demobar strong{color:var(--red-bright)} .util{background:rgba(7,8,10,.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);color:var(--on-dark-muted);font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.07)} .util .wrap{display:flex;gap:20px;justify-content:space-between;align-items:center;padding:8px 20px;flex-wrap:wrap} .util span{display:inline-flex;align-items:center;gap:7px} .util svg{width:15px;height:15px;stroke:var(--elec);fill:none} /* Header NEGRO con el nav en naranja fosforescente. El vidrio blanco era lo ultimo que quedaba del tema claro y partia la pagina en dos mundos: ahora flota sobre el mismo negro que todo lo demas. El filo inferior es naranja muy bajo — a tope de opacidad se convierte en una raya, no en un borde. */ header.nav{position:sticky;top:0;z-index:50;background:rgba(7,8,10,.74);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border-bottom:1px solid rgba(255,138,31,.22); transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1)} /* Mientras dura la experiencia el header SE RETIRA: la barra blanca se come el titulo del render —«La experiencia PARK N WASH · Cada pieza que lavamos»— justo cuando empieza a leerse. Vuelve al salir de la seccion. */ header.nav.replegado{opacity:0;transform:translateY(-100%);pointer-events:none} .demobar,.util{transition:opacity .5s cubic-bezier(.16,1,.3,1)} body.en-experiencia .demobar,body.en-experiencia .util{opacity:0;pointer-events:none} .nav .wrap{display:flex;align-items:center;gap:24px;padding:14px 20px} /* El logo es el vector del cliente (`logo.svg`, trazado desde su PNG HD con scripts/vectorizar_logo.py), en sus colores: rojo y gris plata. Sin halo: el naranja alrededor de un logo rojo lo ensuciaba. */ .logo-img{height:46px;width:auto;display:block} nav.menu{margin-left:auto;display:flex;gap:26px} /* Fosforescente: el color solido ya resalta sobre negro; el halo corto es lo que lo hace parecer encendido en vez de pintado. Al pasar el raton sube a blanco, que es mas brillante que el propio acento. */ nav.menu a{color:var(--elec);font-size:.95rem;font-weight:600;letter-spacing:.01em; text-shadow:0 0 14px rgba(255,138,31,.45);transition:color .2s,text-shadow .2s} nav.menu a:hover{color:#FFF3E6;text-shadow:0 0 18px rgba(255,170,80,.75)} nav.menu a:focus-visible{outline:2px solid var(--elec);outline-offset:4px;border-radius:4px} .menu .menu-cta{display:none} .burger{display:none;background:rgba(255,138,31,.08);border:1px solid rgba(255,138,31,.34); border-radius:10px;width:44px;height:44px;cursor:pointer;padding:0;place-items:center} .burger svg{width:24px;height:24px;stroke:var(--elec);fill:none} @media(max-width:900px){ .nav .wrap{justify-content:space-between;gap:12px} .nav-cta{display:none} .burger{display:grid} /* El desplegable tambien va en negro: abierto sobre fondo claro era una lamina blanca encima de una pagina oscura. */ nav.menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0; background:rgba(7,8,10,.96);backdrop-filter:blur(18px); border-bottom:1px solid rgba(255,138,31,.22);padding:8px 20px 16px; display:none} header.nav.open nav.menu{display:flex} nav.menu a{padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.08);font-size:1.02rem;opacity:1} .menu .menu-cta{display:block;margin-top:12px;border-bottom:0;background:var(--grad-orange); color:#140B02;text-align:center;border-radius:999px;padding:14px;font-weight:700; text-shadow:none} } /* HERO con foto */ /* HERO — negro, sin fotografia. La foto de stock contradecia el mundo que acaba de establecer la seccion 3D, que es un showroom oscuro. El hero hereda ese mundo: negro, la luz naranja entrando desde un lado y nada mas. La profundidad la dan tres planos a distinta distancia, no una imagen. */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff; overflow:hidden;background:#07080A;isolation:isolate} /* Plano 1 — el resplandor que entra por la derecha, de donde venia el coche. */ .hero .bg{position:absolute;inset:-20% -10%; background:radial-gradient(70% 72% at 50% 46%, rgba(255,138,31,.30) 0%, rgba(255,106,0,.11) 34%, transparent 68%), radial-gradient(45% 55% at 12% 88%, rgba(228,48,24,.16) 0%, transparent 62%); filter:blur(14px)} /* Plano 2 — oscurece SOLO el lado del texto y la base. ⚠️ Cubriendo también el lado derecho, el resplandor del plano 1 desaparecía por completo: el hero quedaba negro liso y la profundidad se perdía. */ .hero .scrim{position:absolute;inset:0; background:radial-gradient(78% 68% at 50% 50%, transparent 24%, rgba(7,8,10,.80) 78%), linear-gradient(0deg, rgba(7,8,10,.97) 0%, transparent 44%)} /* Plano 3 — las tiras del showroom, continuadas. La sección de arriba termina en una nave con LED en diagonal; el hero las deja entrar al fondo para que los dos planos sean el mismo sitio. */ .hero .leds{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.5} .hero .leds i{position:absolute;top:-22%;height:144%;width:2px;transform:rotate(14deg); background:linear-gradient(180deg, transparent, rgba(255,255,255,.62) 24%, rgba(255,255,255,.62) 74%, transparent)} .hero .leds i:nth-child(1){left:14%;opacity:.42} .hero .leds i:nth-child(2){left:80%;opacity:.42} .hero .leds i:nth-child(3){left:92%;opacity:.26} /* Plano 4 — la viñeta, que cierra el cuadro y empuja el texto al frente. */ .hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background:radial-gradient(120% 100% at 50% 50%, transparent 42%, rgba(0,0,0,.66) 100%)} /* contenido recargado a la izquierda, alineado a la izquierda */ /* Centrado: el hero ya no reparte el cuadro entre texto a un lado y foto al otro —la foto se fue—, asi que el titular manda desde el eje. */ .hero .wrap{position:relative;max-width:900px;margin:0 auto;text-align:center; padding:64px 20px 70px clamp(20px,6vw,110px);} .hero .eyebrow,.hero p.lead,.hero .actions,.hero .seals{margin-left:auto;margin-right:auto} .hero h1{font-size:clamp(2.1rem,4.4vw,3.5rem);max-width:19ch;text-transform:uppercase; font-weight:800;margin:0 auto;letter-spacing:-.022em;text-wrap:balance} /* El acento es el naranja ELECTRICO, en color solido: sobre negro el peso y el tono bastan, y un degradado en el texto solo le quitaria filo. El halo es corto y del mismo tono — es luz, no una sombra de profundidad. */ .hero h1 .hl{color:var(--elec);text-shadow:0 0 22px rgba(255,138,31,.38),0 0 5px rgba(255,138,31,.22)} .hero p.lead{font-size:1.04rem;color:#C9D0D9;max-width:52ch;margin:20px auto 32px} .hero .actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center} .hero .seals{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap;justify-content:center} /* APARICIÓN AL BAJAR — un solo gesto, no un efecto por bloque. Las palabras del titular entran escalonadas desde abajo, desenfocadas, y se van enfocando: así el titular se "arma" mientras bajas en vez de aparecer de golpe. El resto del hero sigue el mismo gesto, más tenue y más tarde, de modo que lee como UN movimiento y no como cinco animaciones sueltas. La curva es un ease-out exponencial: casi todo el recorrido ocurre al principio, que es lo que lo hace sentir suave y no mecánico. */ /* ⚠️ El `display` lo ponen SOLO los spans de palabra. Aplicado a `.rev` en general, un `h2` o un `div.actions` pasaban a inline-block y se salían de su flujo: en la sección de cierre el titular y su párrafo acabaron uno al lado del otro en vez de apilados. */ span.rev{display:inline-block} .rev{opacity:0;transform:translateY(.52em);filter:blur(9px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0ms);will-change:opacity,transform,filter} .visible .rev{opacity:1;transform:none;filter:blur(0)} /* Sin el estado inicial, un lector sin JS se queda con el texto invisible. */ .no-js .rev{opacity:1;transform:none;filter:none} @media(prefers-reduced-motion:reduce){ .rev{transition:none;opacity:1;transform:none;filter:none} } .seal{display:flex;align-items:center;gap:10px;font-size:.85rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:10px 16px;border-radius:999px} .seal svg{width:18px;height:18px;stroke:var(--red-bright);fill:none;flex:0 0 auto} /* servicios (tarjetas oscuras, tipo referencia) */ .services{background:transparent;color:var(--on-dark)} .shead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:38px;flex-wrap:wrap} .shead h2{color:#fff;font-size:clamp(1.5rem,2.8vw,2.1rem);text-transform:uppercase} .shead a{color:var(--red-bright);font-weight:600;font-size:.95rem} /* paquetes: tarjetas metálicas con elevación real */ .tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch} @media(max-width:960px){.tiers{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.tiers{grid-template-columns:1fr}} .tier{--metal1:#E9ECF1;--metal2:#A9AFB9;position:relative;display:flex;flex-direction:column; background:linear-gradient(180deg,#22262E 0%, #171A20 100%); border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:30px 26px 28px; box-shadow:0 26px 50px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06); transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s} .tier:hover{transform:translateY(-8px);box-shadow:0 40px 70px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.09)} /* filo metálico superior — la firma de profundidad de cada nivel */ .tier .edge{position:absolute;top:0;left:26px;right:26px;height:4px;border-radius:0 0 4px 4px; background:linear-gradient(90deg,var(--metal2),var(--metal1),var(--metal2))} .tier .metal{font-family:"Saira";font-weight:800;font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em; background:linear-gradient(180deg,var(--metal1),var(--metal2)); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 1px 0 rgba(0,0,0,.5))} .tier .washes{color:var(--on-dark-muted);font-size:.92rem;margin-top:2px} .tier .price{font-family:"Saira";font-weight:700;font-size:2.6rem;color:#fff;line-height:1;margin-top:18px} .tier .price small{font-size:.85rem;color:var(--on-dark-muted);font-weight:500;font-family:"Hanken Grotesk";margin-left:4px} .tier .perwash{color:var(--red-bright);font-weight:600;font-size:.85rem;margin-top:6px} .tier ul{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:10px;flex-grow:1} .tier li{display:flex;gap:10px;font-size:.9rem;color:var(--on-dark)} .tier li svg{width:18px;height:18px;stroke:var(--red-bright);fill:none;flex:0 0 auto;margin-top:3px} .tier .btn{margin-top:auto} /* nivel destacado: más elevado y con luz ambiental detrás */ .tier.pop{background:linear-gradient(180deg,#2A2018 0%, #1A1613 100%);border-color:rgba(212,175,55,.5); transform:translateY(-10px);box-shadow:0 48px 84px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(246,218,132,.14)} .tier.pop:hover{transform:translateY(-16px)} .tier .flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap; background:linear-gradient(180deg,#F4D67A,#C79A2E);color:#3a2a05;font-size:.72rem;font-weight:800; letter-spacing:.06em;padding:6px 14px;border-radius:999px;text-transform:uppercase;box-shadow:0 6px 16px -6px rgba(0,0,0,.6)} /* paletas por metal */ .tier-bronce{--metal1:#F0B685;--metal2:#9C6432} .tier-plata {--metal1:#EDEFF3;--metal2:#9AA1AC} .tier-oro {--metal1:#F6DA84;--metal2:#C79A2E} .tier-titanio{--metal1:#D4DAE2;--metal2:#767C87} /* franja "más que un lavado" + membresía */ .why{background:transparent;color:var(--on-dark)} .why h2{color:#fff;font-size:clamp(1.4rem,2.5vw,1.9rem);text-transform:uppercase;margin-bottom:24px} .why .feats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:8px} @media(max-width:820px){.why .feats{grid-template-columns:1fr 1fr}} @media(max-width:520px){.why .feats{grid-template-columns:1fr}} .why .feat{display:flex;gap:12px;align-items:flex-start} .why .feat svg{width:24px;height:24px;stroke:var(--red-bright);fill:none;flex:0 0 auto;margin-top:2px} .why .feat b{color:#fff;display:block;font-size:.98rem} .why .feat span{color:var(--on-dark-muted);font-size:.85rem} /* 3 pasos */ .steps-s .head{text-align:center;max-width:600px;margin:0 auto 44px} .steps-s .head h2{font-size:clamp(1.5rem,2.8vw,2.1rem);text-transform:uppercase;margin:12px 0} .steps-s .head p{color:var(--on-dark-muted)} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:760px){.steps{grid-template-columns:1fr}} /* ⚠️ Eran tarjetas BLANCAS, lo último del tema claro: con el texto claro de la página encima, el titular no se leía. Van como las tarjetas de misión. */ .step{background:linear-gradient(180deg,#1E2128,#171A20);border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);padding:32px 28px;box-shadow:0 26px 50px -32px rgba(0,0,0,.9)} .step .n{font-family:"Saira";font-weight:700;color:#fff;width:44px;height:44px;border-radius:12px;background:var(--grad-red);display:grid;place-items:center;font-size:1.2rem;margin-bottom:16px} .step h3{font-size:1.2rem;text-transform:uppercase;margin-bottom:8px} .step p{color:var(--on-dark-muted);margin:0;font-size:.95rem} /* misión + métricas */ .about{background:transparent;color:var(--on-dark)} .about .grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} @media(max-width:820px){.about .grid{grid-template-columns:1fr;gap:32px}} .about h2{font-size:clamp(1.45rem,2.6vw,1.95rem);text-transform:uppercase;margin:12px 0 16px} .about p{color:var(--on-dark-muted);font-size:1rem} .about .sign{margin-top:20px;font-family:"Saira";font-weight:700;color:#fff} .about .sign small{display:block;color:var(--on-dark-muted);font-weight:400;font-family:"Hanken Grotesk";font-size:.85rem} .metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .metric{background:linear-gradient(180deg,#1E2128,#171A20);border:1px solid rgba(255,255,255,.08); color:#fff;border-radius:var(--radius);padding:28px;text-align:center} .metric .num{font-family:"Saira";font-weight:700;font-size:2.1rem;color:var(--red-bright);line-height:1} .metric small{color:var(--on-dark-muted);font-size:.85rem} /* experiencia: image-sequence scrubbing + rótulos ligados a la pieza */ /* La seccion es OSCURA: el coche negro necesita contra que recortarse, y el fondo del canvas es un ciclorama de estudio, no un color plano. */ /* Altura = cuánto scroll CUESTA el recorrido. Eran 1360vh: trece pantallas y media para ocho capítulos, y avanzar se sentía como empujar el coche a mano. Ahora son ~85vh por capítulo: una pantalla de scroll por pieza. */ .exp{position:relative;height:680vh;background:#0b0c0e} .exp-sticky{position:sticky;top:0;height:100vh;overflow:hidden} .exp-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1} .exp-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible} .exp-head{position:absolute;top:24px;left:0;right:0;text-align:center;z-index:3;pointer-events:none;padding:0 20px} .exp-head .eyebrow{color:var(--red-bright)} .exp-head h2{color:var(--on-dark);font-size:clamp(1.1rem,2.1vw,1.55rem);text-transform:uppercase;margin-top:6px;opacity:.9} /* rótulo editorial a un lado, ligado por línea a la pieza */ .exp-ann{position:absolute;z-index:4;top:50%;width:min(34vw,380px); opacity:0;transform:translateY(-44%);transition:opacity .4s ease, transform .4s ease;pointer-events:none} .exp-ann.side-left{left:5.5vw;text-align:left} .exp-ann.side-right{left:auto;right:5.5vw;text-align:right} .exp-ann.on{opacity:1;transform:translateY(-50%)} /* El rotulo cae sobre el coche, y el coche cambia de claro a oscuro cuando la pieza se enciende: un halo detras del texto lo sostiene en los dos casos. Va difuminado hasta cero para que no se lea como una caja encima. */ .exp-ann::before{content:"";position:absolute;inset:-12vh -7vw -12vh -9vw;z-index:-1; background:radial-gradient(ellipse at center, rgba(8,9,11,.86) 0%, rgba(8,9,11,.55) 42%, rgba(8,9,11,0) 74%); pointer-events:none} .exp-ann .k{display:block;font-family:"Saira";font-weight:800;letter-spacing:.2em;text-transform:uppercase; font-size:.82rem;color:var(--red-bright);margin-bottom:6px} .exp-ann h3{color:var(--on-dark);font-family:"Saira";font-weight:800;font-size:clamp(1.55rem,3.2vw,2.4rem); text-transform:uppercase;margin:0 0 10px;line-height:.95;letter-spacing:-.01em} .exp-ann p{color:var(--on-dark-muted);font-size:.96rem;line-height:1.5;max-width:34ch;margin:0} .exp-ann.side-right p{margin-left:auto} .exp-progress{position:absolute;left:6vw;right:6vw;bottom:26px;height:3px;border-radius:999px; background:rgba(255,255,255,.14);z-index:3} .exp-progress i{display:block;height:100%;width:0;background:var(--grad-red);border-radius:999px} .exp-hint{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:3; color:var(--on-dark-muted);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s} @media(max-width:760px){ .exp{height:540vh} .exp-ann,.exp-ann.side-left,.exp-ann.side-right{left:18px;right:18px;width:auto;top:auto;bottom:80px;transform:translateY(16px);text-align:left} .exp-ann.side-right p{margin-left:0} .exp-ann.on{transform:none} .exp-ann h3{font-size:clamp(1.35rem,6.2vw,1.8rem)} } @media(prefers-reduced-motion:reduce){ .exp{height:auto} .exp-sticky{position:static;height:72vh} .exp-hint{display:none} } /* misión y visión */ .mv{background:transparent;color:var(--on-dark)} .mv .head{text-align:center;max-width:560px;margin:0 auto 36px} .mv .head h2{color:#fff;font-size:clamp(1.5rem,2.8vw,2.1rem);text-transform:uppercase;margin:12px 0} .mv .grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} @media(max-width:760px){.mv .grid{grid-template-columns:1fr}} .mv .card2{background:linear-gradient(180deg,#1E2128,#171A20);border:1px solid rgba(255,255,255,.08); border-radius:18px;padding:36px;box-shadow:0 26px 50px -32px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)} .mv .ic{width:54px;height:54px;border-radius:14px;background:rgba(228,48,24,.14);display:grid;place-items:center;margin-bottom:18px} .mv .ic svg{width:27px;height:27px;stroke:var(--red-bright);fill:none} .mv h3{color:#fff;font-size:1.5rem;text-transform:uppercase;margin-bottom:12px} .mv p{color:var(--on-dark-muted);margin:0;font-size:1rem;line-height:1.6} /* ubicaciones — mapa con profundidad */ .loc{background:transparent;color:var(--on-dark);position:relative;overflow:hidden} .loc .grid{display:grid;grid-template-columns:1.35fr .9fr;gap:44px;align-items:center} @media(max-width:860px){.loc .grid{grid-template-columns:1fr;gap:28px}} .loc h2{color:#fff;font-size:clamp(1.5rem,2.8vw,2.1rem);text-transform:uppercase;margin:12px 0 14px} .loc p{color:var(--on-dark-muted);max-width:44ch} .map-wrap{position:relative} /* piso de luz bajo el mapa: da la sensación de que flota sobre la mesa */ .map-wrap::after{content:"";position:absolute;left:8%;right:8%;bottom:2%;height:42px;border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.6), transparent);filter:blur(6px);z-index:0} .map-wrap img{position:relative;z-index:1;width:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6)); animation:float 7s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @media(prefers-reduced-motion:reduce){.map-wrap img{animation:none}} .loc-list{display:grid;gap:14px} .loc-item{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px; background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1)} .loc-item:hover{transform:translateX(4px);border-color:rgba(228,48,24,.5)} .loc-item .pin{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto; background:linear-gradient(180deg,#F6DA84,#C79A2E);box-shadow:0 8px 18px -8px rgba(0,0,0,.6)} .loc-item .pin svg{width:22px;height:22px;stroke:#2a2005;fill:none} .loc-item b{color:#fff;font-family:"Saira";font-weight:700;font-size:1.1rem;text-transform:uppercase;display:block} .loc-item span{color:var(--on-dark-muted);font-size:.86rem} /* cta final con foto */ .final{position:relative;color:#fff;text-align:center;overflow:hidden;background:var(--noche)} /* «Tu auto merece lo mejor» — blanco con LUZ, no blanco plano. La profundidad sale de dos capas: un blanco frio arriba y uno calido abajo dentro de la propia letra —asi es como una superficie pulida devuelve la luz— y debajo un resplandor amplio que la despega del fondo. El blanco puro plano sobre negro se ve recortado; este tiene volumen. */ .final h2{font-size:clamp(1.75rem,3.6vw,2.8rem);text-transform:uppercase;letter-spacing:-.025em; background:linear-gradient(176deg,#FFFFFF 18%,#E8EDF5 44%,#AEB9C9 78%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 2px 18px rgba(214,228,255,.34)) drop-shadow(0 1px 2px rgba(255,255,255,.5)); text-wrap:balance} /* Sin `background-clip` el texto quedaria invisible: se declara el color real. */ @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .final h2{color:#fff;background:none} } .final .bg{position:absolute;inset:0;background:url('../hero-lavado.jpg') center/cover no-repeat;transform:scaleX(-1)} .final .scrim{position:absolute;inset:0;background:rgba(10,11,13,.8)} .final .wrap{position:relative;padding:88px 20px} .final h2{font-size:clamp(1.6rem,3vw,2.1rem);text-transform:uppercase} .final p{color:#D6DBE2;max-width:46ch;margin:14px auto 28px} footer{background:#0C0D0F;color:var(--on-dark-muted);padding:56px 0 26px} .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:34px} @media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.fgrid{grid-template-columns:1fr}} footer h4{color:#fff;font-family:"Saira";font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 16px} footer a{display:block;color:var(--on-dark-muted);font-size:.92rem;padding:5px 0} footer a:hover{color:var(--red-bright)} footer .about-f{font-size:.92rem;max-width:32ch;margin-top:14px} .foot-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:38px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem} /* ── CATÁLOGO ─────────────────────────────────────────────────────────── Filas compactas, no trece tarjetas: con tarjetas la sección se vuelve kilométrica y todos los servicios pesan lo mismo. El naranja eléctrico se reserva para tres cosas —lo seleccionado, el precio activo y los CTA—; si tiñe también los títulos deja de señalar nada. */ .catalogo{background:var(--noche);color:var(--on-dark)} .cat-head{max-width:34ch;margin-bottom:38px} .cat-head h2{font-size:clamp(1.5rem,2.6vw,2.15rem);text-transform:uppercase;margin-top:10px; letter-spacing:-.02em;text-wrap:balance} .cat-paso{display:flex;align-items:center;justify-content:space-between;gap:20px 40px; flex-wrap:wrap;margin-bottom:30px} .cat-paso-txt{display:flex;flex-direction:column;align-items:flex-start;gap:12px} /* El dibujo del vehículo: se funde de uno a otro al cambiar de tamaño, en vez de saltar, para que se note QUÉ cambió. */ .veh-fig{margin:0;width:min(300px,100%);text-align:center} .veh-dibujos{position:relative;aspect-ratio:240/100} .veh-dibujos img{position:absolute;inset:0;width:100%;height:100%;opacity:0; transform:translateX(14px);transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1)} .veh-dibujos img.on{opacity:1;transform:none} .veh-fig figcaption{color:var(--on-dark-muted);font-size:.86rem;margin-top:6px} @media(prefers-reduced-motion:reduce){.veh-dibujos img{transition:none}} .cat-nota{color:var(--on-dark-muted);font-size:.9rem} .veh-sel{display:inline-flex;padding:4px;gap:4px;border-radius:999px; border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)} .veh{appearance:none;border:0;background:transparent;color:var(--on-dark-muted); font:600 .95rem/1 "Hanken Grotesk",system-ui,sans-serif;padding:11px 20px; border-radius:999px;cursor:pointer;transition:color .2s,background .25s} .veh:hover{color:var(--on-dark)} .veh.on{background:var(--elec);color:#140B02} .veh:focus-visible{outline:2px solid var(--elec);outline-offset:3px} .cat-cuerpo{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start} .cat-filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px} .filtro{appearance:none;background:transparent;color:var(--on-dark-muted);cursor:pointer; border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 16px; font:600 .85rem/1 "Hanken Grotesk",system-ui,sans-serif;transition:color .2s,border-color .2s} .filtro:hover{color:var(--on-dark);border-color:rgba(255,255,255,.3)} .filtro.on{color:var(--elec);border-color:var(--elec)} .filtro:focus-visible{outline:2px solid var(--elec);outline-offset:3px} .cat-lista{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.1)} .cat-fila{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:16px; padding:17px 6px;border-bottom:1px solid rgba(255,255,255,.1);cursor:pointer; transition:background .2s;position:relative} .cat-fila:hover{background:rgba(255,255,255,.035)} .cat-fila:focus-visible{outline:2px solid var(--elec);outline-offset:-2px} .cat-marca{width:19px;height:19px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3); display:grid;place-items:center;transition:border-color .2s,background .2s} .cat-marca svg{width:11px;height:11px;stroke:#140B02;stroke-width:3;fill:none; opacity:0;transition:opacity .18s} .cat-fila.on .cat-marca{background:var(--elec);border-color:var(--elec)} .cat-fila.on .cat-marca svg{opacity:1} .cat-nombre{font-weight:600;font-size:.97rem} .cat-desc{display:block;color:var(--on-dark-muted);font-size:.88rem;margin-top:2px} .cat-precio{font-family:"Saira",sans-serif;font-weight:700;font-size:1.04rem; font-variant-numeric:tabular-nums;transition:color .2s} .cat-fila.on .cat-precio{color:var(--elec)} /* El paquete: la misma rejilla de la lista, pero con aire y un filo encendido. */ .cat-paquete{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center; margin-top:30px;padding:30px;border-radius:16px; border:1px solid rgba(255,138,31,.34); background:linear-gradient(180deg,rgba(255,138,31,.07),rgba(255,138,31,.02))} .cat-paquete h3{font-size:1.38rem;text-transform:uppercase;margin:8px 0 8px} .cat-paquete p{color:var(--on-dark-muted);margin:0;max-width:46ch} .pq-ver{appearance:none;background:transparent;border:0;cursor:pointer;margin-top:14px;padding:0; color:var(--elec);font:600 .92rem/1 "Hanken Grotesk",system-ui,sans-serif; border-bottom:1px solid currentColor} .pq-lista{list-style:none;margin:16px 0 0;padding:0;columns:2;column-gap:28px; color:var(--on-dark-muted);font-size:.9rem} .pq-lista li{padding:3px 0;break-inside:avoid} .pq-precio{text-align:right} .pq-num{font-family:"Saira",sans-serif;font-weight:800;font-size:2.05rem;line-height:1; font-variant-numeric:tabular-nums} .pq-veh{color:var(--on-dark-muted);font-size:.84rem;text-transform:uppercase; letter-spacing:.12em;margin:6px 0 16px} .cat-paquete.on{border-color:var(--elec);background:linear-gradient(180deg,rgba(255,138,31,.16),rgba(255,138,31,.05))} /* El resumen acompaña la lista mientras se recorre. */ .cat-resumen{position:sticky;top:92px;padding:24px;border-radius:16px; border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)} .res-veh{font-family:"Saira",sans-serif;font-weight:700;font-size:1.12rem;margin:8px 0 14px} .res-lista{list-style:none;margin:0;padding:0} .res-lista li{display:flex;justify-content:space-between;gap:12px;padding:7px 0; font-size:.92rem;border-bottom:1px solid rgba(255,255,255,.07)} .res-lista b{font-variant-numeric:tabular-nums;font-weight:600} .res-vacio{color:var(--on-dark-muted);font-size:.9rem;margin:4px 0 0} .res-total{display:flex;justify-content:space-between;align-items:baseline; margin:18px 0 18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16)} .res-total b{font-family:"Saira",sans-serif;font-size:1.42rem;color:var(--elec); font-variant-numeric:tabular-nums} .res-cta{width:100%} .res-cta[aria-disabled="true"]{opacity:.42;pointer-events:none} .cat-legal{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1); color:var(--on-dark-muted);font-size:.88rem} .cat-legal .info{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%; border:1px solid currentColor;font-size:.68rem;font-weight:700;margin-right:7px; font-family:"Saira",sans-serif} .legal-ver{appearance:none;background:transparent;border:0;padding:0;margin-top:10px;cursor:pointer; color:var(--on-dark);font:600 .88rem/1 "Hanken Grotesk",system-ui,sans-serif; border-bottom:1px solid rgba(255,255,255,.3)} .legal-txt{margin-top:16px;max-width:76ch;line-height:1.65} /* Rótulo de dato sin confirmar. Existe porque la demo se enseña fuera: lo que no está verificado tiene que decirlo donde se lee, no en un comentario. */ .dato-muestra{display:inline-block;margin:0 0 14px;padding:5px 11px;border-radius:999px; border:1px dashed rgba(255,138,31,.5);color:var(--elec); font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700} .metrics-wrap .dato-muestra{margin-bottom:12px} .res-barra{display:none} @media(max-width:1000px){ .cat-cuerpo{grid-template-columns:1fr;gap:28px} /* En un teléfono el panel lateral no cabe: el resumen baja a una barra fija. */ .cat-resumen{display:none} .res-barra{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex; align-items:center;justify-content:space-between;gap:14px; padding:12px 18px;background:rgba(10,11,13,.92); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-top:1px solid rgba(255,255,255,.12);color:var(--on-dark)} .res-barra span{font-weight:600;font-size:.95rem} .cat-paquete{grid-template-columns:1fr;gap:20px} .pq-precio{text-align:left} .pq-lista{columns:1} } @media(max-width:560px){ .cat-paso{gap:12px} .cat-paso-txt{width:100%} .veh-fig{width:min(260px,80%);margin:0 auto} .veh-sel{width:100%} .veh{flex:1;padding:11px 8px;font-size:.88rem} .cat-fila{grid-template-columns:22px 1fr auto;gap:12px} } /* ── MARCA DE AGUA DE DEMOSTRACIÓN ────────────────────────────────────── Lo que protege un trabajo que se enseña antes de cobrarlo no es un aviso en una barra —se recorta en cualquier captura—, sino una trama que viaja CON el contenido: sale en la foto de pantalla y en el PDF que alguien reenvíe. Va floja a propósito (6%) y por encima de todo salvo del propio diálogo del navegador; `pointer-events:none` la deja fuera del camino de cualquier clic. Se quita borrando este bloque y el sello: ningún otro estilo depende de ellos. */ body::after{content:"";position:fixed;inset:-50%;z-index:9998;pointer-events:none; transform:rotate(-28deg);opacity:.034; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='250'%3E%3Ctext x='0' y='40' font-family='Segoe UI,Arial,sans-serif' font-size='30' font-weight='700' letter-spacing='5' fill='%23ffffff'%3EDEMOSTRACI%C3%93N%3C/text%3E%3C/svg%3E")} /* El sello: dice de quién es el trabajo y que todavía no es definitivo. */ .sello-demo{position:fixed;right:16px;bottom:16px;z-index:9999;pointer-events:none; display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px; background:rgba(7,8,10,.82);border:1px solid rgba(255,138,31,.4); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); font-size:.74rem;letter-spacing:.1em;text-transform:uppercase; color:var(--on-dark-muted);font-weight:600} .sello-demo b{color:var(--elec);font-weight:800;letter-spacing:.12em} .sello-demo i{width:7px;height:7px;border-radius:50%;background:var(--elec); box-shadow:0 0 9px rgba(255,138,31,.9)} @media(max-width:1000px){ /* En móvil la barra de resumen vive abajo: el sello se aparta. */ .sello-demo{bottom:70px;right:12px;font-size:.68rem;padding:7px 11px} } /* Impresa sube: una captura en papel es justo donde mas falta hace. */ @media print{ body::after{opacity:.13} } /* ══ SITIO DE VARIAS PÁGINAS (23-oct-2026) ═════════════════════════════════ La landing de una sola página se partió en Experiencia · Servicios · Misión y visión · Galería · Facturación · Contacto. Todo lo de abajo es lo que solo existe desde entonces. */ /* El enlace de la página en la que se está. */ nav.menu a[aria-current="page"]{color:#FFF3E6;text-shadow:0 0 18px rgba(255,170,80,.75)} nav.menu a[aria-current="page"]::after{content:"";display:block;height:2px;margin-top:4px;border-radius:2px; background:var(--elec);box-shadow:0 0 8px rgba(255,138,31,.6)} @media(max-width:900px){nav.menu a[aria-current="page"]::after{display:none}} /* Cabecera de las páginas interiores: el titular manda, sin foto. */ .pagina-head{position:relative;padding:72px 0 46px;overflow:hidden; background:radial-gradient(60% 120% at 50% 0%, rgba(255,138,31,.14), transparent 70%)} .pagina-head h1{font-size:clamp(1.9rem,4vw,3rem);text-transform:uppercase;margin-top:10px; letter-spacing:-.02em;text-wrap:balance} .pagina-head p{color:var(--on-dark-muted);max-width:56ch;margin:14px 0 0} /* Redes sociales: un icono por red, con su función —abrir el perfil o el chat—. */ .redes{display:flex;gap:10px;margin-top:18px} .redes a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;padding:0; border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03); transition:border-color .2s,background .2s,transform .2s} .redes a:hover{border-color:var(--elec);background:rgba(255,138,31,.1);transform:translateY(-2px)} .redes a:focus-visible{outline:2px solid var(--elec);outline-offset:3px} .redes svg{width:20px;height:20px;fill:var(--on-dark)} .redes a:hover svg{fill:var(--elec)} /* Sucursales: tarjeta con dirección y enlace al mapa. */ .sucursales{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px} @media(max-width:900px){.sucursales{grid-template-columns:1fr}} .sucursal{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:16px; background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1)} .sucursal .pin{width:44px;height:44px;border-radius:12px;display:grid;place-items:center; background:linear-gradient(180deg,#FF9A3D,#E86A00)} .sucursal .pin svg{width:22px;height:22px;stroke:#140B02;fill:none} .sucursal b{font-family:"Saira";font-weight:700;font-size:1.15rem;text-transform:uppercase;color:#fff} .sucursal address{font-style:normal;color:var(--on-dark-muted);font-size:.92rem;line-height:1.5} .sucursal .mapa{margin-top:auto;color:var(--elec);font-weight:600;font-size:.92rem} .sucursal .mapa:hover{color:#FFF3E6} /* Galería: collage de alturas distintas. Mientras no haya fotos, cada hueco dice que lo es: no se rellena con imágenes de stock. */ .collage{columns:3 260px;column-gap:16px} .collage figure{break-inside:avoid;margin:0 0 16px;border-radius:14px;overflow:hidden; border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)} .collage img{width:100%;height:auto} .collage .hueco{display:grid;place-items:center;color:var(--on-dark-muted);font-size:.85rem; letter-spacing:.08em;text-transform:uppercase; background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 12px,transparent 12px 24px)} /* Formularios (facturación y contacto): el envío es un mensaje de WhatsApp. */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px} @media(max-width:720px){.form-grid{grid-template-columns:1fr}} .campo{display:flex;flex-direction:column;gap:7px} .campo.ancho{grid-column:1/-1} .campo label{font-weight:600;font-size:.92rem} .campo label small{color:var(--on-dark-muted);font-weight:400} .campo input,.campo select,.campo textarea{font:500 1rem/1.4 "Hanken Grotesk",system-ui,sans-serif; color:var(--on-dark);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16); border-radius:12px;padding:13px 14px;transition:border-color .2s,background .2s} .campo select option{background:#14171C} .campo textarea{min-height:120px;resize:vertical} .campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--elec); background:rgba(255,138,31,.05)} .campo input:user-invalid,.campo select:user-invalid{border-color:#FF4326} .form-caja{max-width:860px;padding:34px;border-radius:18px;border:1px solid rgba(255,255,255,.1); background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015))} @media(max-width:720px){.form-caja{padding:22px}} .form-aviso{display:flex;gap:12px;align-items:flex-start;margin:24px 0;padding:16px 18px;border-radius:12px; border:1px dashed rgba(255,138,31,.45);color:var(--on-dark-muted);font-size:.92rem} .form-aviso b{color:var(--on-dark)} .form-acciones{display:flex;gap:14px;align-items:center;flex-wrap:wrap} .form-acciones small{color:var(--on-dark-muted)} /* Contacto: los canales como tarjetas que ya hacen algo al tocarlas. */ .canales{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:42px} @media(max-width:860px){.canales{grid-template-columns:1fr}} .canal{display:flex;gap:14px;align-items:center;padding:20px;border-radius:14px; background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);transition:border-color .2s} .canal:hover{border-color:var(--elec)} .canal svg{width:24px;height:24px;flex:0 0 auto;fill:var(--elec)} .canal b{display:block;color:#fff} .canal span{color:var(--on-dark-muted);font-size:.9rem} /* Red sin enlace todavía: el icono se queda, apagado, para que se vea el diseño completo sin mandar a nadie a una página que no existe. */ .redes a[data-pendiente]{opacity:.4;cursor:not-allowed} .redes a[data-pendiente]:hover{transform:none;border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.03)} .form-aviso .info{display:inline-grid;place-items:center;flex:0 0 auto;width:20px;height:20px;border-radius:50%; border:1px solid var(--elec);color:var(--elec);font:700 .74rem/1 "Saira",sans-serif} /* La sección de sucursales ya no lleva mapa: el texto va a todo lo ancho. */ .loc p{max-width:56ch} /* ⚠️ Sin esto el