:root { --navy:#062f5e; --blue:#075090; --canvas:#f6f9fd; --ink:#13284b; --muted:#63728b; --line:#e2eaf3; --orange:#ff6b19; --green:#0da66f; --white:#fff; --shadow:0 20px 48px rgba(9,42,79,.11); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--canvas); color:var(--ink); font-family:"Trebuchet MS","Avenir Next",sans-serif; } a { color:inherit; text-decoration:none; } button { font:inherit; cursor:pointer; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { color:var(--navy); letter-spacing:-.045em; } p { line-height:1.6; }
.site-header { display:flex; align-items:center; min-height:82px; max-width:1220px; padding:0 34px; margin:auto; border-bottom:1px solid var(--line); } .brand img { display:block; width:128px; height:auto; } .site-nav { display:flex; align-items:center; gap:27px; margin-left:auto; color:#4e5e75; font-size:.9rem; font-weight:700; } .site-nav > a:not(.button):hover,.site-nav > a:not(.button):focus-visible,.back-link:hover { color:var(--blue); } .menu-toggle { display:none; } .language-picker { display:flex; gap:2px; padding:3px; background:#edf2f8; border-radius:8px; } .language-picker button { min-width:30px; padding:5px 6px; color:#64748b; border:0; border-radius:5px; background:transparent; font-size:.7rem; font-weight:800; } .language-picker button[aria-pressed="true"] { color:var(--navy); background:var(--white); box-shadow:0 1px 3px rgba(0,0,0,.09); } .button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:11px 19px; border:1px solid var(--blue); border-radius:9px; color:var(--white); background:var(--blue); font-size:.86rem; font-weight:800; transition:transform .18s ease,background-color .18s ease; } .button:hover,.button:focus-visible { transform:translateY(-2px); background:var(--navy); outline:none; } .button--small { min-height:38px; padding:8px 14px; } .button--light { color:var(--navy); background:var(--white); border-color:var(--white); } .button--light:hover,.button--light:focus-visible { color:var(--white); background:transparent; }
.hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(310px,.95fr); align-items:center; gap:45px; max-width:1120px; min-height:530px; padding:70px 34px 56px; margin:auto; } .eyebrow { margin-bottom:12px; color:var(--orange); font-size:.7rem; font-weight:800; letter-spacing:.14em; } h1 { max-width:650px; margin-bottom:19px; font-size:clamp(2.6rem,5vw,4.85rem); line-height:.98; } .hero-text { max-width:545px; margin-bottom:27px; color:var(--muted); font-size:1.08rem; } .hero-actions { display:flex; align-items:center; gap:24px; } .text-link { color:var(--blue); font-size:.88rem; font-weight:800; } .text-link:hover { text-decoration:underline; } .hero-art { position:relative; display:grid; min-height:350px; place-items:center; overflow:hidden; border-radius:32px; background:linear-gradient(145deg,#dff1ff 0%,#f7fbff 70%); } .hero-art img { position:relative; z-index:2; max-width:90%; max-height:325px; object-fit:contain; } .hero-orbit { position:absolute; width:290px; height:290px; border:2px solid rgba(7,80,144,.12); border-radius:50%; } .hero-orbit--two { width:400px; height:400px; border-color:rgba(255,107,25,.13); }
.intro { max-width:790px; padding:84px 34px 33px; margin:auto; text-align:center; } .intro h2,.hub-prompt h2,.info-main h1 { margin-bottom:13px; font-size:clamp(2rem,4vw,3.1rem); line-height:1.05; } .intro > p:last-child { margin-bottom:0; color:var(--muted); } .product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:17px; max-width:1150px; padding:30px 34px 88px; margin:auto; } .product-panel { min-height:276px; padding:24px; background:var(--white); border:1px solid var(--line); border-radius:17px; } .product-panel--active { border-color:#b9daf7; box-shadow:0 13px 26px rgba(15,62,109,.08); } .product-icon { display:grid; width:54px; height:54px; padding:10px; place-items:center; background:#fff1e8; border-radius:14px; } .product-icon img { width:100%; height:100%; object-fit:contain; } .product-icon--cuota { background:#e7f9f2; } .product-icon--auto { background:#e8f3ff; } .product-icon--garantia { background:#f3edff; } .availability { display:inline-flex; padding:4px 8px; margin:17px 0 10px; color:#68758a; background:#edf1f5; border-radius:999px; font-size:.66rem; font-weight:800; } .availability--active { color:var(--white); background:var(--green); } .product-panel h3 { margin-bottom:8px; font-size:1.18rem; } .product-panel > p:not(.availability) { margin-bottom:0; color:var(--muted); font-size:.86rem; } .product-link { display:inline-flex; gap:8px; margin-top:17px; color:var(--blue); font-size:.82rem; font-weight:800; } .product-link:hover { text-decoration:underline; }
.hub-prompt { display:flex; align-items:center; justify-content:space-between; gap:30px; max-width:1080px; padding:56px 64px; margin:0 auto 86px; color:var(--white); background:var(--navy); border-radius:22px; } .hub-prompt h2 { color:var(--white); } .hub-prompt p:last-child { max-width:560px; margin:0; color:#c5d7ea; } .site-footer { display:flex; align-items:center; gap:28px; justify-content:space-between; min-height:120px; padding:26px max(34px,calc((100% - 1150px)/2)); color:#d9e7f4; background:#062f5e; font-size:.77rem; } .site-footer img { width:104px; height:auto; } .site-footer nav { display:flex; gap:20px; } .site-footer a:hover { color:var(--white); } .site-footer p { margin:0; }
.back-link { margin-left:auto; margin-right:22px; color:var(--blue); font-size:.86rem; font-weight:800; } .hub-main { max-width:1070px; padding:70px 34px 95px; margin:auto; } .hub-heading { max-width:650px; margin-bottom:38px; } .hub-heading h1 { margin-bottom:13px; font-size:clamp(2.5rem,5vw,4.1rem); } .hub-heading p:last-child { margin-bottom:0; color:var(--muted); font-size:1.05rem; } .hub-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .hub-card { display:flex; gap:21px; min-height:215px; padding:30px; background:var(--white); border:1px solid var(--line); border-radius:19px; } .hub-card--work { border-color:#b9daf7; box-shadow:var(--shadow); } .hub-card .availability { margin:0 0 10px; } .hub-card h2 { margin-bottom:7px; font-size:1.25rem; } .hub-card p:not(.availability) { margin-bottom:18px; color:var(--muted); font-size:.89rem; } .button--work { min-height:39px; padding:8px 13px; font-size:.76rem; }
.info-main { width:min(780px,100%); min-height:calc(100vh - 202px); padding:82px 34px; margin:auto; } .info-main h1 { margin-bottom:30px; } .info-card { padding:26px; margin-bottom:16px; background:var(--white); border:1px solid var(--line); border-radius:15px; } .info-card h2 { margin-bottom:8px; font-size:1.2rem; } .info-card p { margin:0; color:var(--muted); }
.info-card label { display:grid; gap:7px; margin-bottom:16px; color:var(--ink); font-size:.86rem; font-weight:700; } .info-card input,.info-card select { width:100%; min-height:42px; padding:9px 11px; border:1px solid #bdc9d8; border-radius:8px; background:#fff; color:var(--ink); font:inherit; font-weight:400; } .info-card input:focus,.info-card select:focus { border-color:var(--blue); outline:3px solid #dcefff; }
@media (max-width:800px) { .site-header { position:relative; min-height:70px; padding:0 20px; } .brand img { width:110px; } .menu-toggle { display:grid; gap:4px; width:40px; height:40px; padding:10px; margin-left:auto; border:0; background:transparent; } .menu-toggle span { height:2px; background:var(--navy); border-radius:2px; } .site-nav { position:absolute; z-index:5; top:calc(100% + 7px); right:15px; display:none; width:min(290px,calc(100vw - 30px)); padding:14px; background:var(--white); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); } .site-nav.is-open { display:grid; } .site-nav > a { padding:9px; } .site-nav .button { justify-content:center; } .hero { grid-template-columns:1fr; min-height:0; padding:60px 20px 48px; } .hero-art { min-height:260px; order:-1; } .hero-art img { max-height:240px; } h1 { font-size:clamp(2.55rem,12vw,4rem); } .intro { padding:67px 20px 24px; text-align:left; } .product-grid { grid-template-columns:1fr; padding:26px 20px 65px; } .product-panel { min-height:0; } .hub-prompt { display:block; padding:38px 27px; margin:0 20px 66px; } .hub-prompt .button { margin-top:22px; } .site-footer { display:grid; gap:20px; padding:30px 20px; } .site-footer nav { flex-wrap:wrap; } .hub-main { padding:56px 20px 65px; } .hub-grid { grid-template-columns:1fr; } .hub-card { min-height:0; padding:24px; } .info-main { min-height:calc(100vh - 190px); padding:58px 20px; } }
@media (max-width:430px) { .hero-actions { align-items:flex-start; flex-direction:column; gap:15px; } .hub-card { gap:15px; padding:20px; } .product-icon { flex:0 0 49px; width:49px; height:49px; } }