// public/custom-elements/hopp-file-service.js // HOPP File Service — MASTER V2 compact / mockup-oriented class HoppFileService extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); } connectedCallback() { this.render(); this.bindEvents(); } render() { this.shadowRoot.innerHTML = ` <style> :host{ display:block; width:100%; color:#fff; background:#050607; font-family:Arial,Helvetica,sans-serif; --red:#ef2f36; --red2:#ff3a42; --bg:#050607; --panel:#0c0f12; --panel2:#101316; --line:#2b3035; --muted:#aeb4b9; } *{box-sizing:border-box} button{font:inherit} a{color:inherit} .page{ width:100%; overflow:hidden; background: radial-gradient(circle at 84% 7%,rgba(130,0,0,.18),transparent 24%), linear-gradient(180deg,#050607 0%,#090c0f 100%); } .container{ width:min(100% - 36px,1460px); margin:0 auto; } /* ========================= HERO ========================= */ .hero{ position:relative; min-height:500px; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:42px; padding:42px 0 40px; border-bottom:1px solid var(--line); background-image: url("https://static.wixstatic.com/media/3013af_361e952eecfd47308b608d323dae3045~mv2.png"); /* IMPORTANTE: ampliamos la foto para desplazar visualmente el Audi hacia el centro del hero. */ background-size:125% auto; background-position:52% 59%; background-repeat:no-repeat; background-color:#050607; } .hero:before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; /* Dejamos negro sólido detrás del copy, pero liberamos rápidamente el centro para que aparezcan BMW + Audi. */ background: linear-gradient( 90deg, rgba(5,6,7,1) 0%, rgba(5,6,7,.98) 18%, rgba(5,6,7,.82) 31%, rgba(5,6,7,.35) 43%, rgba(5,6,7,.08) 56%, rgba(5,6,7,.03) 100% ); } .hero:after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; /* Oculta principalmente el monitor que viene incorporado en la fotografía para que no compita con nuestro dashboard HTML. */ background: linear-gradient( 180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.22) 22%, rgba(0,0,0,.04) 45%, transparent 62% ); } .hero > *{ position:relative; z-index:2; } /* Ya NO necesitamos el antiguo glow artificial. La fotografía tiene su propia iluminación roja. */ .hero-art{ display:none; } .eyebrow{ color:var(--red); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.10em; margin-bottom:13px; } h1{ margin:0; font-size:clamp(44px,4.65vw,68px); line-height:.92; letter-spacing:-.04em; text-transform:uppercase; font-weight:950; } h1 .accent{color:var(--red)} .hero-sub{ margin:13px 0 9px; font-size:clamp(17px,1.35vw,22px); line-height:1; font-weight:900; text-transform:uppercase; letter-spacing:.01em; } .hero-copy{ max-width:520px; margin:0; color:#d4d7d9; font-size:13px; line-height:1.55; } .hero-pills{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:18px 0 17px; } .mini{ display:flex; align-items:center; gap:9px; min-width:0; } .mini-icon{ flex:0 0 30px; width:30px; height:30px; border:1px solid var(--red); border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:900; } .mini strong{ display:block; font-size:9px; line-height:1.1; text-transform:uppercase; } .mini span{ display:block; margin-top:2px; color:#aeb3b7; font-size:7.8px; line-height:1.2; text-transform:uppercase; } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; } .btn{ border:1px solid transparent; border-radius:5px; min-height:42px; padding:0 22px; cursor:pointer; text-transform:uppercase; font-size:11px; font-weight:900; transition:.2s ease; } .btn:hover{transform:translateY(-2px)} .btn-primary{ color:#fff; background:linear-gradient(90deg,#db2027,var(--red2)); box-shadow:0 10px 24px rgba(239,47,54,.14); } .btn-secondary{ color:#fff; background:#0a0d10; border-color:#494e53; } /* ========================= RESULT CARD ========================= */ .performance{ padding:16px; border:1px solid #353a3f; border-radius:8px; background:linear-gradient(180deg,rgba(15,18,21,.98),rgba(8,10,12,.98)); box-shadow:0 18px 50px rgba(0,0,0,.32); } .performance h3{ margin:0 0 12px; text-align:center; text-transform:uppercase; font-size:15px; } .gain-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; } .gain{ border:1px solid #32373c; border-radius:7px; padding:12px 10px; text-align:center; background:#0b0e11; } .gain span{ display:block; color:#c5c8cb; text-transform:uppercase; font-size:10px; } .gain strong{ display:block; color:var(--red); font-size:28px; line-height:1; margin:6px 0 5px; } .gain small{ font-size:9px; text-transform:uppercase; font-weight:800; } .chart{ border:1px solid #32373c; border-radius:7px; padding:9px 10px 5px; background:#0a0d10; overflow:hidden; } .chart-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:4px; } .chart-label{ color:#aeb4b8; font-size:9px; text-transform:uppercase; } .legend{ display:flex; gap:10px; color:#c7cbce; font-size:8px; } .legend i{ display:inline-block; width:13px; height:2px; margin-right:4px; vertical-align:middle; } .legend .s{background:#9aa0a5} .legend .h{background:var(--red)} .chart svg{ display:block; width:100%; height:auto; } .performance-note{ margin:7px 0 0; text-align:center; color:#93999e; font-size:8px; } /* ========================= TRUST STRIP ========================= */ .trust-strip{ border-bottom:1px solid var(--line); background:#080a0c; } .trust{ display:grid; grid-template-columns:repeat(4,1fr); } .trust-item{ min-height:76px; display:flex; align-items:center; gap:11px; padding:12px 20px; border-right:1px solid var(--line); } .trust-item:last-child{border-right:0} .trust-icon{ color:var(--red); font-size:22px; } .trust-item strong{ display:block; font-size:10px; text-transform:uppercase; } .trust-item span{ display:block; margin-top:3px; color:#aeb4b8; font-size:8px; text-transform:uppercase; } /* ========================= GENERIC SECTION ========================= */ .section{ padding:46px 0; border-bottom:1px solid var(--line); } .section-head{ display:flex; align-items:center; gap:17px; margin-bottom:22px; } .section-head:before, .section-head:after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--red)); } .section-head:after{ background:linear-gradient(90deg,var(--red),transparent); } .section-head h2{ margin:0; white-space:nowrap; text-align:center; text-transform:uppercase; font-size:18px; } /* ========================= SERVICES ========================= */ .services{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } /* ========================= SERVICE CARD ========================= */ .service{ position:relative; overflow:hidden; min-height:178px; padding:20px 18px 18px; border:1px solid #353a3f; border-radius:8px; background: radial-gradient( circle at 18% 12%, rgba(239,47,54,.07), transparent 34% ), linear-gradient( 180deg, #111417 0%, #0b0e11 100% ); box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 12px 28px rgba(0,0,0,.18); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease; } /* ========================= GLOW INTERNO ========================= */ .service:before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient( circle at 16% 8%, rgba(239,47,54,.15), transparent 38% ); opacity:0; transition:opacity .28s ease; } /* ========================= LINEA PREMIUM SUPERIOR ========================= */ .service:after{ content:""; position:absolute; top:0; left:18px; right:18px; height:1px; pointer-events:none; background: linear-gradient( 90deg, transparent 0%, rgba(239,47,54,.60) 35%, rgba(239,47,54,.30) 65%, transparent 100% ); opacity:.35; transition:opacity .28s ease; } /* ========================= CARD HOVER ========================= */ .service:hover{ transform:translateY(-4px); border-color:rgba(239,47,54,.72); background: radial-gradient( circle at 18% 12%, rgba(239,47,54,.10), transparent 38% ), linear-gradient( 180deg, #14181b 0%, #0b0e11 100% ); box-shadow: 0 18px 40px rgba(0,0,0,.32), 0 0 22px rgba(239,47,54,.09), inset 0 1px 0 rgba(255,255,255,.035); } .service:hover:before{ opacity:1; } .service:hover:after{ opacity:.95; } /* ========================= SERVICE ICON ========================= */ .service-icon{ position:relative; z-index:1; width:40px; height:40px; border:1px solid var(--red); border-radius:50%; display:grid; place-items:center; margin-bottom:14px; color:var(--red); background: radial-gradient( circle at 35% 30%, rgba(239,47,54,.16), rgba(239,47,54,.025) 68% ); box-shadow: inset 0 0 0 1px rgba(255,255,255,.015), 0 0 14px rgba(239,47,54,.06); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease; } /* ========================= SVG ICONS ========================= */ .service-icon svg{ width:21px; height:21px; display:block; fill:none !important; stroke:currentColor !important; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; overflow:visible; transition: transform .28s ease, filter .28s ease; } /* Fuerza todos los elementos SVG a trabajar como line-art */ .service-icon svg path, .service-icon svg rect, .service-icon svg circle, .service-icon svg line, .service-icon svg polyline, .service-icon svg polygon{ fill:none !important; stroke:currentColor !important; } /* ========================= ICON HOVER ========================= */ .service:hover .service-icon{ transform:scale(1.07); border-color:#ff3b42; background: radial-gradient( circle at 35% 30%, rgba(239,47,54,.25), rgba(239,47,54,.045) 70% ); box-shadow: 0 0 20px rgba(239,47,54,.18), inset 0 0 0 1px rgba(255,255,255,.025); } .service:hover .service-icon svg{ transform:scale(1.08); filter: drop-shadow( 0 0 5px rgba(239,47,54,.35) ); } /* ========================= SERVICE TITLE ========================= */ .service h3{ position:relative; z-index:1; margin:0 0 10px; text-transform:uppercase; font-size:14px; font-weight:900; letter-spacing:.01em; color:#fff; transition: color .25s ease, transform .25s ease; } .service:hover h3{ color:#fff; transform:translateX(2px); } /* ========================= SERVICE LABEL ========================= */ .service-label{ position:relative; z-index:1; display:block; margin:-5px 0 9px; color:var(--red); font-size:8px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; opacity:.92; } /* ========================= SERVICE DESCRIPTION ========================= */ .service p{ position:relative; z-index:1; margin:0 0 14px; color:#c7cbce; font-size:11px; line-height:1.55; } /* ========================= SERVICE LINK ========================= */ .service a{ position:relative; z-index:1; display:inline-block; color:var(--red); text-decoration:none; font-size:10px; font-weight:900; transition: transform .25s ease, letter-spacing .25s ease, color .25s ease; } .service:hover a{ transform:translateX(3px); letter-spacing:.035em; color:#ff454c; } /* ========================= PROCESS ========================= */ .process-box{ position:relative; overflow:hidden; border:1px solid #30353a; border-radius:8px; padding:24px 20px 25px; background: radial-gradient(circle at 50% 0%,rgba(239,47,54,.055),transparent 30%), linear-gradient(180deg,#0d1013 0%,#090c0f 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 14px 32px rgba(0,0,0,.18); } .process-box h2{ margin:0 0 25px; text-align:center; text-transform:uppercase; font-size:18px; font-weight:950; letter-spacing:.01em; } .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .step{ position:relative; display:flex; gap:13px; align-items:center; min-height:72px; } .step:not(:last-child):after{ content:"→"; position:absolute; right:-16px; top:25px; color:#6f767c; font-size:17px; font-weight:400; } .step-icon{ position:relative; flex:0 0 50px; width:50px; height:50px; border:1px solid #aeb4b9; border-radius:50%; display:grid; place-items:center; color:#fff; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.045),transparent 68%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.012); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; } .step-icon svg{ width:24px; height:24px; display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .step-num{ position:absolute; right:-5px; top:-7px; width:20px; height:20px; border:1px solid var(--red); border-radius:50%; display:grid; place-items:center; color:#fff; background:#0a0d10; box-shadow:0 0 0 2px #0a0d10; font-size:9px; font-weight:900; } .step:hover .step-icon{ transform:translateY(-2px); border-color:#fff; box-shadow:0 0 20px rgba(239,47,54,.10); } .step h3{ margin:0 0 6px; text-transform:uppercase; font-size:10px; font-weight:900; line-height:1.15; } .step p{ margin:0; max-width:205px; color:#b6bbc0; font-size:8.5px; line-height:1.5; } /* ========================= VEHICLES ========================= */ .vehicle-box{ position:relative; display:grid; grid-template-columns:1.38fr .62fr; align-items:stretch; min-height:235px; border:1px solid #30353a; border-radius:8px; overflow:hidden; background: radial-gradient(circle at 82% 70%,rgba(239,47,54,.10),transparent 30%), linear-gradient(180deg,#0b0e11 0%,#080a0c 100%); box-shadow:0 16px 40px rgba(0,0,0,.20); } .vehicle-copy{ position:relative; z-index:3; padding:24px 22px 22px; display:flex; flex-direction:column; justify-content:center; } .vehicle-copy h2{ margin:0 0 24px; text-align:center; text-transform:uppercase; font-size:19px; font-weight:950; } .brands{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:15px; align-items:start; } .brand{ min-width:0; text-align:center; color:#e1e4e6; font-size:9px; font-weight:800; } .brand-mark{ width:54px; height:42px; margin:0 auto 5px; display:flex; align-items:center; justify-content:center; border:0; background:transparent; box-shadow:none; transition:transform .25s ease,filter .25s ease; } .brand-mark img{ display:block; object-fit:contain; opacity:.90; filter:grayscale(1) brightness(1.8); transition:transform .25s ease,opacity .25s ease,filter .25s ease; } /* AUDI */ .brand:nth-child(1) .brand-mark img{ width:102px; max-width:none; max-height:46px; } /* BMW */ .brand:nth-child(2) .brand-mark img{ width:49px; height:49px; max-width:none; } /* MERCEDES */ .brand:nth-child(3) .brand-mark svg{ width:49px; height:49px; display:block; fill:none; stroke:#d9dcde; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; opacity:.90; } /* VOLKSWAGEN */ .brand:nth-child(4) .brand-mark img{ width:49px; height:49px; max-width:none; } /* PORSCHE */ .brand:nth-child(5) .brand-mark img{ width:44px; max-width:none; max-height:49px; } /* MINI */ .brand:nth-child(6) .brand-mark img{ width:108px; max-width:none; max-height:46px; } .brand:hover .brand-mark{ transform:translateY(-3px); filter:drop-shadow(0 0 8px rgba(239,47,54,.16)); } .brand small{ display:block; color:#c3c8cc; font-size:7.5px; font-weight:600; text-transform:uppercase; white-space:nowrap; } .vehicle-action{ margin-top:22px; text-align:center; } .vehicle-action a{ display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 22px; border:1px solid #3a4045; border-radius:5px; color:#fff; background:rgba(10,13,16,.72); text-decoration:none; text-transform:uppercase; font-size:8.5px; font-weight:900; letter-spacing:.02em; transition:transform .25s ease,border-color .25s ease,background .25s ease; } .vehicle-action a:hover{ transform:translateY(-2px); border-color:rgba(239,47,54,.72); background:rgba(239,47,54,.08); } .vehicle-art{ position:relative; min-height:235px; overflow:hidden; background-image: linear-gradient(90deg,#080a0c 0%,rgba(8,10,12,.35) 20%,rgba(8,10,12,0) 46%), url("https://static.wixstatic.com/media/3013af_361e952eecfd47308b608d323dae3045~mv2.png"); background-size:auto 150%; background-position:47% 58%; background-repeat:no-repeat; } .vehicle-art:before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg,#080a0c 0%,transparent 24%), radial-gradient(ellipse at 72% 78%,rgba(239,47,54,.20),transparent 42%); pointer-events:none; } .vehicle-art:after{ content:""; position:absolute; left:-1px; top:12%; bottom:12%; width:70px; background:linear-gradient(90deg,#080a0c,transparent); pointer-events:none; } .vehicle-note{display:none} /* ========================= PROOF ========================= */ .proof-grid{ display:grid; grid-template-columns:.72fr 1.28fr; gap:10px; } .proof-card{ padding:20px; border:1px solid #30353a; border-radius:7px; background:#0a0d10; } .proof-card h2{ margin:0 0 16px; text-transform:uppercase; font-size:16px; } .checks{ display:grid; gap:9px; } .check{ display:flex; gap:9px; align-items:flex-start; color:#d2d6d8; font-size:9px; } .check b{ flex:0 0 18px; width:18px; height:18px; border:1px solid var(--red); border-radius:50%; display:grid; place-items:center; font-size:8px; } .testimonial{ display:grid; grid-template-columns:26px 1fr 26px; gap:10px; align-items:center; } .arrow{ color:#8f969b; text-align:center; font-size:24px; } .quote{ padding:20px; border:1px solid #30353a; border-radius:7px; background:#0d1013; } .stars{ color:var(--red); font-size:15px; letter-spacing:2px; } .quote p{ margin:12px 0; color:#d6d9db; font-size:10px; line-height:1.6; } .quote small{ color:#aeb4b8; font-size:8px; } /* ========================= FINAL CTA ========================= */ .final-wrap{ padding:12px 0 24px; } .final-cta{ display:grid; grid-template-columns:58px 1fr auto; gap:16px; align-items:center; padding:16px 20px; border:1px solid #402b2d; border-radius:7px; background:linear-gradient(90deg,rgba(130,14,18,.66),rgba(30,8,10,.76) 47%,#0c0e10 100%); } .final-icon{ width:46px; height:46px; border:1px solid var(--red); border-radius:50%; display:grid; place-items:center; font-size:18px; } .final-cta h2{ margin:0 0 4px; text-transform:uppercase; font-size:15px; } .final-cta p{ margin:0; color:#e0e2e3; font-size:9px; } /* ========================= FOOTER ========================= */ .footer{ padding:16px 0 22px; border-top:1px solid var(--line); } .footer-row{ display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; } .footer-logo{ font-family:Georgia,serif; font-size:19px; font-weight:900; } .footer-logo span{color:var(--red)} .footer-copy, .footer-contact{ color:#b2b7bb; font-size:8px; } .footer-contact{ display:flex; gap:14px; } /* ========================= RESPONSIVE ========================= */ @media(max-width:1180px){ .vehicle-box{grid-template-columns:1.15fr .85fr} .brands{grid-template-columns:repeat(4,1fr)} } @media(max-width:980px){ .hero{grid-template-columns:1fr} .hero-pills{grid-template-columns:1fr 1fr} .services{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr} .step:nth-child(2):after,.step:nth-child(4):after{display:none} .trust{grid-template-columns:1fr 1fr} .vehicle-box{grid-template-columns:1fr} .vehicle-art{min-height:230px;background-position:50% 58%} .proof-grid{grid-template-columns:1fr} } @media(max-width:620px){ .container{width:min(100% - 24px,1460px)} .hero{min-height:auto;padding:34px 0} h1{font-size:48px} .hero-sub{font-size:18px} .hero-pills{grid-template-columns:1fr} .gain-grid,.services,.steps,.trust,.brands{grid-template-columns:1fr} .trust-item{border-right:0;border-bottom:1px solid var(--line)} .step:after{display:none!important} .section-head h2{white-space:normal} .vehicle-art{min-height:160px} .final-cta{grid-template-columns:1fr;text-align:center} .final-icon{margin:auto} .footer-row{grid-template-columns:1fr;text-align:center} .footer-contact{justify-content:center;flex-wrap:wrap} .testimonial{grid-template-columns:1fr} .arrow{display:none} } /* ========================================================= HOPP FILE SERVICE — MOCKUP 1:1 OVERRIDES ========================================================= */ /* Overall rhythm: compact, continuous, no full-width grey dividers */ .page{ background: radial-gradient(circle at 15% 58%,rgba(255,255,255,.015),transparent 25%), linear-gradient(180deg,#050607 0%,#07090b 100%); } .container{ width:min(calc(100% - 28px),1180px); } .section{ padding:4px 0; border-bottom:0 !important; } .trust-strip{ border:0 !important; background:transparent; padding:4px 0 8px; } .trust{ border:0; } .trust-item{ min-height:68px; padding:10px 18px; border:0 !important; background:transparent; } .trust-icon{ flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; color:var(--red); border:1px solid transparent; font-size:24px; } .trust-item strong{font-size:11px} .trust-item span{font-size:8px} /* SERVICES — one compact framed band, exactly like mockup */ .section-head{ margin:0; padding:20px 0 14px; gap:16px; } .section-head:before, .section-head:after{ max-width:115px; background:linear-gradient(90deg,transparent,rgba(239,47,54,.78)); } .section-head:after{ background:linear-gradient(90deg,rgba(239,47,54,.78),transparent); } .section-head h2{ font-size:18px; font-weight:950; } .section > .container:not(.vehicle-box):has(.services){ border:1px solid #262b2f; border-radius:8px; padding:0 12px 12px; background: radial-gradient(circle at 50% 0%,rgba(239,47,54,.025),transparent 35%), linear-gradient(180deg,#0a0d10,#080a0c); } .services{ gap:12px; } .service{ min-height:168px; padding:14px 14px 15px; display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto 1fr; column-gap:9px; align-items:center; border:1px solid #30353a; border-radius:7px; background: radial-gradient(circle at 18% 8%,rgba(239,47,54,.045),transparent 32%), linear-gradient(180deg,#0e1114,#0a0c0f); box-shadow:none; } .service:after{display:none} .service-label{display:none !important} .service-icon{ grid-column:1; grid-row:1; width:34px; height:34px; margin:0; } .service-icon svg{width:19px;height:19px} .service h3{ grid-column:2; grid-row:1; margin:0; font-size:15px; line-height:1; } .service p{ grid-column:1 / -1; grid-row:2; margin:12px 0 8px; color:#d4d7d9; font-size:11px; line-height:1.52; } .service a{ grid-column:1 / -1; grid-row:3; align-self:end; font-size:10px; } /* PROCESS — exact compact strip */ #how{padding-top:4px} .process-box{ min-height:138px; padding:20px 20px 18px; border:1px solid #2d3237; border-radius:8px; background: radial-gradient(circle at 50% 0%,rgba(255,255,255,.02),transparent 42%), linear-gradient(180deg,#0b0e11,#090b0d); box-shadow:none; } .process-box h2{ margin:0 0 18px; font-size:18px; } .steps{ gap:25px; } .step{ gap:10px; min-height:58px; } .step:not(:last-child):after{ right:-17px; top:20px; color:#7d8388; font-size:18px; } .step-icon{ flex:0 0 44px; width:44px; height:44px; } .step-icon svg{width:21px;height:21px} .step-num{ right:-5px; top:-8px; width:20px; height:20px; font-size:9px; } .step h3{ margin:0 0 4px; font-size:9.3px; white-space:nowrap; } .step p{ max-width:180px; font-size:8.3px; line-height:1.4; } /* MARCAS DISPONIBLES — 1:1 with mockup */ .vehicle-box{ grid-template-columns:1.44fr .56fr; min-height:188px; border:1px solid #2d3237; border-radius:8px; background:#090b0d; box-shadow:none; } .vehicle-copy{ padding:18px 20px 15px; } .vehicle-copy h2{ margin:0 0 16px; font-size:18px; } .brands{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; align-items:center; } .brand-mark{ width:54px; height:40px; margin:0 auto 5px; } .brand-mark img{ width:44px; max-height:32px; filter:grayscale(1) brightness(1.75); opacity:.92; } .brand-mark svg{ width:36px; height:36px; stroke:#d8dcdf; opacity:.92; } .brand small{ color:#b9bec2; font-size:7.4px; } .vehicle-action{ margin-top:15px; } .vehicle-action a{ min-height:29px; padding:0 18px; border-color:#343a3f; border-radius:4px; font-size:7.7px; } .vehicle-art{ min-height:188px; background-image: linear-gradient(90deg,#090b0d 0%,rgba(9,11,13,.34) 16%,rgba(9,11,13,0) 38%), url("data:image/jpeg;base64,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") !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; filter:none !important; } .vehicle-art:before{ background: linear-gradient(90deg,#090b0d 0%,rgba(9,11,13,.28) 20%,transparent 46%), radial-gradient(ellipse at 72% 80%,rgba(239,47,54,.12),transparent 46%); mix-blend-mode:normal; } .vehicle-art:after{ top:0; bottom:0; width:44px; background:linear-gradient(90deg,#090b0d,transparent); } /* PROOF / TESTIMONIAL — same proportions as mockup */ .proof-grid{ grid-template-columns:.64fr 1.36fr; gap:10px; } .proof-card{ min-height:214px; padding:20px 20px; border:1px solid #2d3237; border-radius:7px; background: radial-gradient(circle at 40% 0%,rgba(255,255,255,.015),transparent 35%), #090b0d; } .proof-card h2{ margin:0 0 18px; text-align:center; font-size:16px; } .checks{gap:10px} .check{ align-items:center; font-size:10px; } .check b{ flex:0 0 19px; width:19px; height:19px; font-size:8px; } .testimonial{ grid-template-columns:34px 1fr 34px; gap:12px; } .arrow{font-size:31px} .quote{ max-width:480px; margin:0 auto; padding:20px 24px; border:1px solid #30353a; border-radius:8px; background:#0d1013; } .stars{font-size:14px} .quote p{font-size:10.5px;line-height:1.6} .quote small{font-size:8px} /* CTA */ .final-wrap{ padding:4px 0 7px; } .final-cta{ min-height:92px; grid-template-columns:64px 1fr auto; gap:18px; padding:12px 20px; border:1px solid #37282a; border-radius:7px; background: radial-gradient(circle at 8% 50%,rgba(255,58,66,.24),transparent 18%), linear-gradient(90deg,#6d1116 0%,#2d0d10 32%,#0c0e10 78%); } .final-icon{ width:52px; height:52px; font-size:21px; } .final-cta h2{font-size:16px} .final-cta p{font-size:9px} .final-cta .btn{ min-width:212px; min-height:46px; } /* Footer mockup rhythm */ .footer{ padding:10px 0 14px; border:0 !important; } .footer-row{ min-height:46px; } .footer-logo{font-size:22px} .footer-copy,.footer-contact{font-size:8px} @media(max-width:980px){ .container{width:min(calc(100% - 22px),1180px)} .services{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr} .vehicle-box{grid-template-columns:1fr} .vehicle-art{min-height:210px} .brands{grid-template-columns:repeat(4,1fr)} .proof-grid{grid-template-columns:1fr} } @media(max-width:620px){ .services,.steps,.brands,.trust{grid-template-columns:1fr} .vehicle-art{min-height:180px} .final-cta{grid-template-columns:1fr;text-align:center} .final-icon{margin:auto} .final-cta .btn{width:100%;min-width:0} } /* ===== MARCAS DISPONIBLES — LOGOS XL FINAL ===== */ .brand:nth-child(1) .brand-mark img{width:102px;max-width:none;max-height:46px} .brand:nth-child(2) .brand-mark img{width:49px;height:49px;max-width:none;max-height:none} .brand:nth-child(3) .brand-mark svg{width:49px;height:49px} .brand:nth-child(4) .brand-mark img{width:49px;height:49px;max-width:none;max-height:none} .brand:nth-child(5) .brand-mark img{width:44px;max-width:none;max-height:49px} .brand:nth-child(6) .brand-mark img{width:108px;max-width:none;max-height:46px} /* ===== MARCAS DISPONIBLES — SVG INLINE NORMALIZADOS ===== */ .brand-mark img{display:none !important} .brand-mark svg{ display:block; overflow:visible; fill:none; stroke:none; opacity:.94; filter:none; } .brand-mark svg .logo-stroke{ fill:none; stroke:#d9dcde; stroke-width:2.15; stroke-linecap:round; stroke-linejoin:round; } .brand-mark svg .logo-text{ fill:#d9dcde; stroke:none; font-family:Arial,Helvetica,sans-serif; font-size:6px; font-weight:900; letter-spacing:.5px; } .brand-mark svg .logo-text-small{ font-size:4.5px; letter-spacing:.25px; } .brand-mark svg .logo-text-mini{ font-size:8px; letter-spacing:.7px; } /* Peso visual, no tamaño matemático */ .brand-audi .brand-mark svg{width:88px;height:44px} .brand-bmw .brand-mark svg{width:50px;height:50px} .brand-mercedes .brand-mark svg{width:50px;height:50px} .brand-vw .brand-mark svg{width:51px;height:51px} .brand-porsche .brand-mark svg{width:43px;height:51px} .brand-mini .brand-mark svg{width:92px;height:44px} .brand:hover .brand-mark svg{ opacity:1; filter:drop-shadow(0 0 6px rgba(255,255,255,.10)); } /* ========================================================= AUDI — PNG REAL WIX / OVERRIDE FINAL ========================================================= */ .brand-audi .brand-mark svg{ display:none !important; } .brand-audi .brand-mark img{ display:block !important; width:120px !important; height:58px !important; max-width:none !important; max-height:none !important; object-fit:contain !important; opacity:1 !important; filter:none !important; transform:none !important; } /* ========================================================= MARCAS DISPONIBLES — 6 PNG WIX REALES / FINAL Audi = referencia visual aprobada ========================================================= */ .brand .brand-mark svg{ display:none !important; } .brand .brand-mark img{ display:block !important; max-width:none !important; max-height:none !important; object-fit:contain !important; opacity:1 !important; filter:none !important; transform:none !important; } /* AUDI — tamaño maestro aprobado */ .brand-audi .brand-mark img{ width:120px !important; height:58px !important; } /* BMW */ .brand-bmw .brand-mark img{ width:58px !important; height:58px !important; } /* MERCEDES-BENZ */ .brand-mercedes .brand-mark img{ width:60px !important; height:60px !important; } /* VOLKSWAGEN */ .brand-vw .brand-mark img{ width:60px !important; height:60px !important; } /* PORSCHE */ .brand-porsche .brand-mark img{ width:52px !important; height:60px !important; } /* MINI */ .brand-mini .brand-mark img{ width:120px !important; height:58px !important; } /* FINAL — eliminar botón VER TODOS LOS VEHÍCULOS */ .vehicle-action{display:none !important;} /* ========================================================= HOPP — RITMO FINAL DE TÍTULOS DE SECCIÓN Servicios / Cómo funciona / Marcas ========================================================= */ /* 1. NUESTROS SERVICIOS */ .services-head{ justify-content:center !important; text-align:center !important; margin:0 0 22px !important; padding-top:20px !important; } .services-head h2{ margin:0 !important; text-align:center !important; } .services-head::before, .services-head::after{ display:none !important; } /* 2. ¿CÓMO FUNCIONA? */ .process h2{ text-align:center !important; margin:0 0 24px !important; padding-top:20px !important; } /* 3. MARCAS DISPONIBLES Centrado sobre la zona de logos, no sobre el auto */ .vehicle-copy h2{ text-align:center !important; margin:0 0 22px !important; padding-top:20px !important; } /* Aire inferior uniforme */ .services-grid{ margin-bottom:20px !important; } .process{ padding-bottom:22px !important; } .vehicle-copy{ padding-bottom:22px !important; } /* ========================================================= HOPP — ALINEACIÓN FINAL DE TÍTULOS Regla: todos centrados + mismo ritmo vertical ========================================================= */ /* NUESTROS SERVICIOS */ .services-head{ width:100% !important; display:flex !important; justify-content:center !important; align-items:center !important; text-align:center !important; padding-top:20px !important; margin:0 0 28px !important; } .services-head h2{ width:100% !important; margin:0 !important; padding:0 !important; text-align:center !important; } /* Eliminar líneas decorativas laterales */ .services-head::before, .services-head::after{ display:none !important; content:none !important; } /* ¿CÓMO FUNCIONA? */ .process h2{ width:100% !important; margin:0 0 28px !important; padding-top:20px !important; text-align:center !important; } /* MARCAS DISPONIBLES centrado sobre la zona de logos */ .vehicle-copy h2{ width:100% !important; margin:0 0 28px !important; padding-top:20px !important; text-align:center !important; } /* ========================================================= HOPP — TITULOS 100% UNIFORMES / OVERRIDE DEFINITIVO 1) todos centrados 2) mismo espacio entre título y contenido ========================================================= */ /* NUESTROS SERVICIOS */ .services-head{ width:100% !important; display:flex !important; justify-content:center !important; align-items:center !important; box-sizing:border-box !important; padding:24px 0 0 !important; margin:0 0 32px !important; text-align:center !important; } .services-head h2{ width:100% !important; margin:0 !important; padding:0 !important; text-align:center !important; } .services-head::before, .services-head::after{ display:none !important; content:none !important; } /* ¿CÓMO FUNCIONA? */ .process h2{ width:100% !important; box-sizing:border-box !important; margin:0 0 32px !important; padding:24px 0 0 !important; text-align:center !important; } /* MARCAS DISPONIBLES — centro de la columna de logos */ .vehicle-copy h2{ width:100% !important; box-sizing:border-box !important; margin:0 0 32px !important; padding:24px 0 0 !important; text-align:center !important; } </style> <div class="page"> <section class="container hero"> <div class="hero-art" aria-hidden="true"></div> <div> <div class="eyebrow">File Service</div> <h1> Chiptuning<br> <span class="accent">Profesional</span> </h1> <div class="hero-sub">Potencia. Torque. Eficiencia.</div> <p class="hero-copy"> 28 años de experiencia en desarrollo, optimización y programación de ECUs.<br> Resultados reales, medibles y seguros. </p> <div class="hero-pills"> <div class="mini"><div class="mini-icon">✓</div><div><strong>+28 años</strong><span>de experiencia</span></div></div> <div class="mini"><div class="mini-icon">▦</div><div><strong>Equipos</strong><span>profesionales</span></div></div> <div class="mini"><div class="mini-icon">◷</div><div><strong>Entrega rápida</strong><span>24/7 soporte</span></div></div> <div class="mini"><div class="mini-icon">◆</div><div><strong>Seguro</strong><span>y confiable</span></div></div> </div> <div class="hero-actions"> <button class="btn btn-primary js-upload">Enviar archivo →</button> <button class="btn btn-secondary js-how">Cómo funciona</button> </div> </div> <aside class="performance"> <h3>Resultados comprobados</h3> <div class="gain-grid"> <div class="gain"><span>Potencia</span><strong>+30%</strong><small>Más HP</small></div> <div class="gain"><span>Torque</span><strong>+35%</strong><small>Más Nm</small></div> </div> <div class="chart"> <div class="chart-top"> <div class="chart-label">Potencia / RPM</div> <div class="legend"> <span><i class="s"></i>Stock</span> <span><i class="h"></i>HOPP File</span> </div> </div> <svg viewBox="0 0 500 215" aria-label="Curvas de potencia referenciales"> <g stroke="#20252a" stroke-width="1"> <line x1="52" y1="18" x2="52" y2="180"/> <line x1="52" y1="180" x2="475" y2="180"/> <line x1="52" y1="145" x2="475" y2="145"/> <line x1="52" y1="110" x2="475" y2="110"/> <line x1="52" y1="75" x2="475" y2="75"/> <line x1="52" y1="40" x2="475" y2="40"/> <line x1="135" y1="18" x2="135" y2="180"/> <line x1="218" y1="18" x2="218" y2="180"/> <line x1="301" y1="18" x2="301" y2="180"/> <line x1="384" y1="18" x2="384" y2="180"/> </g> <g fill="#858c92" font-size="8" font-family="Arial"> <text x="27" y="183">0</text> <text x="20" y="148">100</text> <text x="20" y="113">200</text> <text x="20" y="78">300</text> <text x="20" y="43">400</text> <text x="20" y="21">500</text> <text transform="rotate(-90 9 110)" x="9" y="110">Potencia (HP)</text> </g> <path d="M55 168 C98 145, 138 126, 181 109 C224 93, 267 78, 310 66 C351 55, 390 49, 425 53 C445 55, 460 60, 472 65" fill="none" stroke="#92989d" stroke-width="4" stroke-linecap="round"/> <path d="M55 166 C97 131, 139 100, 181 76 C223 52, 266 34, 310 23 C351 13, 389 9, 425 12 C445 13, 460 17, 472 20" fill="none" stroke="#ef2f36" stroke-width="5" stroke-linecap="round"/> <g fill="#9ca2a7" font-size="9" font-family="Arial"> <text x="44" y="198">1500</text> <text x="126" y="198">3000</text> <text x="209" y="198">4500</text> <text x="292" y="198">6000</text> <text x="375" y="198">7500</text> <text x="447" y="198">RPM</text> </g> </svg> </div> <p class="performance-note"> Curvas referenciales. Los resultados pueden variar según vehículo. </p> </aside> </section> <section class="trust-strip"> <div class="container trust"> <div class="trust-item"><div class="trust-icon">☁</div><div><strong>+10.000</strong><span>archivos desarrollados</span></div></div> <div class="trust-item"><div class="trust-icon">▦</div><div><strong>Aplicaciones para</strong><span>múltiples vehículos</span></div></div> <div class="trust-item"><div class="trust-icon">◆</div><div><strong>100% personalizado</strong><span>a tu vehículo</span></div></div> <div class="trust-item"><div class="trust-icon">✓</div><div><strong>Garantía</strong><span>de satisfacción</span></div></div> </div> </section> <section class="section"> <div class="container"> <div class="section-head"><h2>Nuestros servicios</h2></div> <div class="services"> <article class="service"> <div class="service-icon"> <svg viewBox="0 0 24 24" aria-hidden="true"> <path d="M5 17a7 7 0 1 1 14 0"/> <path d="M12 17l4-5"/> <path d="M7.5 14.5l-1.5-1"/> <path d="M9.5 11.5l-.8-1.7"/> <path d="M14.5 11.5l.8-1.7"/> <path d="M16.5 14.5l1.5-1"/> <circle cx="12" cy="17" r="1"/> </svg> </div> <h3>Stage 1</h3> <span class="service-label">BY HOPP OEM+</span> <p>Aumento de potencia y torque optimizando parámetros de fábrica y respetando las tolerancias del fabricante.</p> <a href="#how">Ver más →</a> </article> <article class="service"> <div class="service-icon"> <svg viewBox="0 0 24 24" aria-hidden="true"> <path d="M12 5a7 7 0 1 0 6.2 10.2"/> <path d="M12 5c2.8 0 5.1 1.5 6.3 3.8"/> <path d="M18.3 8.8H21v4"/> <path d="M12 9.5a3.5 3.5 0 1 0 0 7"/> <path d="M12 9.5c1.6 0 2.8.8 3.5 2"/> <path d="M12 13l3-1.5"/> </svg> </div> <h3>Stage 2</h3> <span class="service-label">PERFORMANCE CALIBRATION</span> <p>Calibración avanzada para vehículos con modificaciones en admisión, escape, intercooler y otros componentes de rendimiento.</p> <a href="#how">Ver más →</a> </article> <article class="service"> <div class="service-icon"> <svg viewBox="0 0 24 24" aria-hidden="true"> <rect x="5" y="6" width="14" height="12" rx="2"/> <path d="M8 9v6"/> <path d="M11 9v6"/> <path d="M14 9v6"/> <path d="M17 9v6"/> <path d="M4 4l16 16"/> </svg> </div> <h3>DPF / EGR OFF</h3> <span class="service-label">ECU SOLUTIONS</span> <p>Soluciones de software desarrolladas según la configuración del vehículo y los requerimientos específicos del cliente.</p> <a href="#how">Ver más →</a> </article> <article class="service"> <div class="service-icon"> <svg viewBox="0 0 24 24" aria-hidden="true"> <rect x="7" y="7" width="10" height="10" rx="2"/> <path d="M9.5 10h5"/> <path d="M9.5 12h5"/> <path d="M9.5 14h3"/> <path d="M4 8h3"/> <path d="M4 12h3"/> <path d="M4 16h3"/> <path d="M17 8h3"/> <path d="M17 12h3"/> <path d="M17 16h3"/> <path d="M8 4v3"/> <path d="M12 4v3"/> <path d="M16 4v3"/> <path d="M8 17v3"/> <path d="M12 17v3"/> <path d="M16 17v3"/> </svg> </div> <h3>Soluciones ECU</h3> <span class="service-label">CUSTOM DEVELOPMENT</span> <p>Desarrollo de soluciones ECU a medida para requerimientos específicos, configuraciones especiales y proyectos personalizados.</p> <a href="#how">Ver más →</a> </article> </div> </div> </section> <section class="section" id="how"> <div class="container"> <div class="process-box"> <h2>¿Cómo funciona?</h2> <div class="steps"> <div class="step"> <div class="step-icon"> <svg viewBox="0 0 24 24" aria-hidden="true"> <path d="M7 18h10a4 4 0 0 0 .8-7.9A6 6 0 0 0 6.3 9.2 4.5 4.5 0 0 0 7 18Z"/> <path d="M12 15V9"/> <path d="m9.5 11.5 2.5-2.5 2.5 2.5"/> </svg> <span class="step-num">1</span> </div> <div><h3>Envíanos tu archivo</h3><p>Sube el archivo original leído desde tu ECU.</p></div> </div> <div class="step"> <div class="step-icon"> <svg viewBox="0 0 24 24" aria-hidden="true"> <circle cx="12" cy="12" r="3"/> <path d="M19 13.5v-3l-2-.7a7 7 0 0 0-.8-1.8l.9-1.9-2.2-2.2-1.9.9a7 7 0 0 0-1.8-.8L10.5 2h-3l-.7 2a7 7 0 0 0-1.8.8l-1.9-.9L.9 6.1 1.8 8a7 7 0 0 0-.8 1.8l-2 .7v3l2 .7a7 7 0 0 0 .8 1.8l-.9 1.9 2.2 2.2 1.9-.9a7 7 0 0 0 1.8.8l.7 2h3l.7-2a7 7 0 0 0 1.8-.8l1.9.9 2.2-2.2-.9-1.9a7 7 0 0 0 .8-1.8Z" transform="translate(2.5 0) scale(.79)"/> </svg> <span class="step-num">2</span> </div> <div><h3>Análisis y desarrollo</h3><p>Nuestro equipo analiza y desarrolla la solución según tu requerimiento.</p></div> </div> <div class="step"> <div class="step-icon"> <svg viewBox="0 0 24 24" aria-hidden="true"> <circle cx="12" cy="12" r="8"/> <path d="m8.5 12.2 2.2 2.2 4.8-5"/> </svg> <span class="step-num">3</span> </div> <div><h3>Descarga tu archivo</h3><p>Recibe tu archivo desarrollado y listo para programar.</p></div> </div> <div class="step"> <div class="step-icon"> <svg viewBox="0 0 24 24" aria-hidden="true"> <path d="M5 14 6.5 9h11l1.5 5"/> <path d="M4 14h16v4H4z"/> <circle cx="7" cy="18" r="1.3"/> <circle cx="17" cy="18" r="1.3"/> <path d="M7.5 12h9"/> </svg> <span class="step-num">4</span> </div> <div><h3>Instala y disfruta</h3><p>Programa el archivo, verifica el resultado y disfruta.</p></div> </div> </div> </div> </div> </section> <section class="section"> <div class="container vehicle-box"> <div class="vehicle-copy"> <h2>Marcas disponibles</h2> <div class="brands"> <div class="brand brand-audi"> <div class="brand-mark"> <img src="https://static.wixstatic.com/media/3013af_72221b68c5394b03841c0f951ec395a3~mv2.png" alt="Audi"> </div> </div> <div class="brand brand-bmw"> <div class="brand-mark"> <img src="https://static.wixstatic.com/media/3013af_f0e8c6d2da54404c854a6280fc76acd6~mv2.png" alt="BMW"> </div> </div> <div class="brand brand-mercedes"> <div class="brand-mark"> <img src="https://static.wixstatic.com/media/3013af_c462640370b34dd0acdf519409c435db~mv2.png" alt="Mercedes-Benz"> </div> </div> <div class="brand brand-vw"> <div class="brand-mark"> <img src="https://static.wixstatic.com/media/3013af_e455bc11a41042fda7965164839a3ca8~mv2.png" alt="Volkswagen"> </div> </div> <div class="brand brand-porsche"> <div class="brand-mark"> <img src="https://static.wixstatic.com/media/3013af_88a2bde02ce742fda517f8421edb1f2d~mv2.png" alt="Porsche"> </div> </div> <div class="brand brand-mini"> <div class="brand-mark"> <img src="https://static.wixstatic.com/media/3013af_0560679aa49a49eea4a62a09debfda92~mv2.png" alt="MINI"> </div> </div> </div> </div> <div class="vehicle-art" aria-hidden="true"></div> </div> </section> <section class="section"> <div class="container proof-grid"> <div class="proof-card"> <h2>¿Por qué elegir HOPP?</h2> <div class="checks"> <div class="check"><b>✓</b><span>Experiencia comprobada de 28 años</span></div> <div class="check"><b>✓</b><span>Equipos y software de última generación</span></div> <div class="check"><b>✓</b><span>Archivos personalizados y seguros</span></div> <div class="check"><b>✓</b><span>Soporte técnico antes y después</span></div> <div class="check"><b>✓</b><span>Proceso claro y profesional</span></div> </div> </div> <div class="proof-card"> <h2>Lo que dicen nuestros clientes</h2> <div class="testimonial"> <div class="arrow">‹</div> <div class="quote"> <div class="stars">★★★★★</div> <p>“El cambio fue increíble. Más potencia, mejor respuesta y una entrega mucho más limpia.”</p> <small>— Cliente HOPP · Chile</small> </div> <div class="arrow">›</div> </div> </div> </div> </section> <section class="container final-wrap"> <div class="final-cta"> <div class="final-icon">☁</div> <div> <h2>¿Listo para llevar tu vehículo al siguiente nivel?</h2> <p>Envíanos tu archivo y obtén una solución desarrollada por expertos.</p> </div> <button class="btn btn-primary js-upload">Enviar archivo ahora →</button> </div> </section> <footer class="footer"> <div class="container footer-row"> <div class="footer-logo"><span>✦</span> HOPP</div> <div class="footer-copy">HOPP SpA · Swiss Quality. Maximum Performance.</div> <div class="footer-contact"><span>info@hopp.cl</span><span>Chile</span></div> </div> </footer> </div> `; } bindEvents() { this.shadowRoot.querySelectorAll(".js-upload").forEach(button => { button.addEventListener("click", () => { this.dispatchEvent(new CustomEvent("uploadSelected", { bubbles: true, composed: true })); }); }); this.shadowRoot.querySelectorAll(".js-how").forEach(button => { button.addEventListener("click", () => { this.shadowRoot.querySelector("#how")?.scrollIntoView({ behavior:"smooth", block:"start" }); }); }); this.shadowRoot.querySelectorAll('a[href="#how"]').forEach(link => { link.addEventListener("click", event => { event.preventDefault(); this.shadowRoot.querySelector("#how")?.scrollIntoView({ behavior:"smooth", block:"start" }); }); }); } } if (!customElements.get("hopp-file-service")) { customElements.define("hopp-file-service", HoppFileService); }