/* ========================================================================== T-21 Auto Services and Repairs — hoja de estilos Paleta y escala tipografica tomadas del prototipo de National Business Firm. ========================================================================== */ /* Tema claro (por defecto). El oscuro mas abajo solo redefine estos tokens. */ :root{ --cream:#FAF7F2; --surface:#FFFFFF; --surface-2:#F5EFE6; --ink:#1E1A16; --ink-2:#4A4339; --muted:#6E6557; --muted-2:#998E7C; --line:#ECE4D6; --line-2:#DED3BF; --orange:#E07B2C; --orange-d:#C4671F; --orange-l:#FBEEDC; --red:#E0392E; --red-d:#C42A20; --green:#3E8B5C; --wa:#25D366; --wa-d:#1EBE5A; /* Bloques que van oscuros en los dos temas: formulario y pie. */ --panel:#1E1A16; --panel-2:#2A2521; /* Barras translucidas: no pueden usar var() dentro de rgba(), van aparte. */ --topbar-bg:rgba(250,247,242,.88); --bar-bg:rgba(250,247,242,.97); --maxw:1080px; --hd:'Helvetica Neue','Arial Narrow',Impact,system-ui,sans-serif; --bd:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Arial,sans-serif; --sh-sm:0 2px 8px rgba(30,26,22,.06); --sh-md:0 12px 28px rgba(30,26,22,.10); --sh-lg:0 24px 50px rgba(30,26,22,.14); /* La curva que ya se venia repitiendo por toda la hoja, ahora con nombre. */ --ease-out:cubic-bezier(.16,1,.3,1); } /* Tema oscuro. theme.js escribe data-theme="dark" en antes del primer pintado, ya sea por eleccion guardada o por la preferencia del sistema. */ :root[data-theme="dark"]{ --cream:#141210; --surface:#1E1B18; --surface-2:#26221E; --ink:#F4F0E9; --ink-2:#D3CBBE; --muted:#A69B8A; --muted-2:#877C6C; --line:#2E2924; --line-2:#3E3831; --orange:#E8903F; --orange-d:#F0A85F; --orange-l:#3A2A18; --red:#E4483D; --red-d:#CE352A; --green:#5FB37E; --panel:#0F0D0B; --panel-2:#1C1815; --topbar-bg:rgba(20,18,16,.88); --bar-bg:rgba(20,18,16,.97); --sh-sm:0 2px 8px rgba(0,0,0,.35); --sh-md:0 12px 28px rgba(0,0,0,.45); --sh-lg:0 24px 50px rgba(0,0,0,.55); color-scheme:dark; } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth} body{font-family:var(--bd);background:var(--cream);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} section{padding:72px 0;border-top:1px solid var(--line)} h1,h2,h3{font-family:var(--hd);text-transform:uppercase;letter-spacing:.01em;line-height:1.04;font-weight:800;color:var(--ink)} h2{font-size:clamp(28px,4.4vw,44px);margin-bottom:10px} h3{font-size:19px;letter-spacing:.03em} p{color:var(--ink-2)} .eyebrow{font-family:var(--hd);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--orange-d);font-weight:700;margin-bottom:12px;display:inline-flex;align-items:center;gap:8px} .eyebrow::before{content:'';width:22px;height:2px;background:var(--orange);display:inline-block;border-radius:2px} .eyebrow.is-centered{justify-content:center} .sec-head{margin-bottom:36px;max-width:560px} .sec-head.is-centered{text-align:center;margin:0 auto 28px} .sec-sub{color:var(--muted);font-size:17px;margin-top:4px} .centered{text-align:center} /* Accesibilidad: foco visible en todo lo interactivo */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:3px solid var(--orange);outline-offset:3px;border-radius:6px} /* --- Botones ------------------------------------------------------------ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 26px;border-radius:12px;border:none;cursor:pointer;font-family:var(--hd);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:transform .14s ease,background .2s ease,box-shadow .2s ease;width:100%} .btn:active{transform:scale(.98)} .btn-call{background:var(--red);color:#fff;box-shadow:0 10px 24px rgba(224,57,46,.30)} .btn-call:hover{background:var(--red-d);box-shadow:0 14px 30px rgba(224,57,46,.36)} .btn-ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line-2)} .btn-ghost:hover{border-color:var(--orange);color:var(--orange-d)} .btn-solid{background:var(--panel);color:#fff} .btn-solid:hover{background:#000} /* --- Barra superior ----------------------------------------------------- */ .topbar{position:sticky;top:0;z-index:60;background:var(--topbar-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .topbar-in{display:flex;align-items:center;justify-content:space-between;padding:13px 22px;max-width:var(--maxw);margin:0 auto} .brand{font-family:var(--hd);font-weight:800;font-size:20px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px} .brand .dot{width:11px;height:11px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px var(--orange-l)} .top-cta{display:none;gap:10px} @media(min-width:640px){.top-cta{display:inline-flex}} .top-cta .btn{width:auto;padding:11px 18px;font-size:13px} /* --- Hero: foto del local a sangre -------------------------------------- */ .hero{padding:0;border-top:none;position:relative;background:#1A140F;min-height:100svh} @media(min-width:640px){.hero{min-height:clamp(580px,94vh,860px)}} /* Slider del hero: las fotos se cruzan por opacidad y la activa hace un acercamiento muy lento, para que la portada no se sienta congelada. */ .hero-slider{position:absolute;inset:0;overflow:hidden} .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease} .hero-slide.is-on{opacity:1} .hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center 35%; transform:scale(1.04);transition:transform 7s linear} .hero-slide.is-on img{transform:scale(1.11)} .hero-dots{display:flex;gap:9px;justify-content:center;margin-top:22px} .hero-dot{width:9px;height:9px;padding:0;border:none;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.45);transition:all .25s} .hero-dot:hover{background:rgba(255,255,255,.75)} .hero-dot.is-on{background:#FFB347;width:28px;border-radius:6px} .hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 58%, rgba(0,0,0,.55) 100%)} .hero-in{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:0 0 48px} @media(min-width:640px){.hero-in{min-height:clamp(580px,94vh,860px);padding:0 0 64px}} .hero-mark{font-family:var(--hd);font-weight:800;font-size:clamp(28px,8vw,42px);letter-spacing:.04em;text-transform:uppercase;color:#fff;margin-bottom:18px;text-shadow:0 2px 20px rgba(0,0,0,.55);line-height:1.05} .hero-cta{width:auto;min-width:210px} .hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.34);padding:9px 16px;border-radius:100px;margin-bottom:22px;width:max-content} .stars{display:inline-flex;gap:1px} .stars svg{width:15px;height:15px;fill:var(--orange)} .hero-badge .stars svg{fill:#FFB347} .hero-badge .bt{font-size:14px;font-weight:700;color:#fff} .hero-badge .bt span{color:rgba(255,255,255,.82);font-weight:500} .hero h1{font-size:clamp(38px,8.6vw,64px);margin-bottom:16px;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.45)} .hero h1 .accent{color:#FFB347} .hero .tagline{font-size:clamp(17px,2.6vw,21px);color:rgba(255,255,255,.92);max-width:560px;margin-bottom:14px;text-shadow:0 1px 14px rgba(0,0,0,.35)} .hero-ctas{display:flex;flex-direction:column;gap:12px;max-width:440px;margin-top:24px} @media(min-width:520px){.hero-ctas{flex-direction:row}} .hero-ctas .btn{width:auto;flex:1} .hero-ctas .btn-ghost{background:rgba(255,255,255,.18);color:#fff;border:1.5px solid rgba(255,255,255,.32)} .hero-ctas .btn-ghost:hover{background:rgba(255,255,255,.24);border-color:#fff} .hero-stats{display:flex;gap:30px;flex-wrap:wrap;justify-content:center;margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.2);max-width:480px} .hs-num{font-family:var(--hd);font-size:clamp(26px,5vw,34px);font-weight:800;color:#FFB347;letter-spacing:.02em;line-height:1} .hs-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.78);margin-top:6px;font-weight:600} /* --- Datos bajo el hero, sobre fondo claro ------------------------------ */ .hero-meta{background:var(--cream);padding:48px 0 8px;text-align:center} .hero-meta .wrap{display:flex;flex-direction:column;align-items:center} .hero-badge-light{display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);padding:10px 18px;border-radius:100px;margin-bottom:20px;box-shadow:var(--sh-sm)} .hero-badge-light .stars svg{fill:var(--orange)} .hero-badge-light .bt{font-size:14px;font-weight:700;color:var(--ink)} .hero-badge-light .bt span{color:var(--muted);font-weight:500} /* El h1 de la pagina vive aqui: se lee como bajada, no como titulo gritado. */ .hero-meta .lead{font-family:var(--bd);font-size:clamp(17px,2.6vw,21px);font-weight:400;text-transform:none;letter-spacing:normal;color:var(--muted);max-width:560px;margin:0 0 28px;line-height:1.5} .hero-meta .hero-stats{margin-top:0;padding-top:0;border-top:none;max-width:560px} .hero-meta .hs-num{color:var(--orange-d)} .hero-meta .hs-lbl{color:var(--muted)} .hero-meta .hero-ctas{margin-top:28px;flex-direction:column;align-items:center;max-width:none} .hero-meta .hero-ctas .btn-ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line-2)} .hero-meta .hero-ctas .btn-ghost:hover{background:var(--surface-2);border-color:var(--orange);color:var(--orange-d)} .hero-meta .hero-ctas .btn{width:auto;min-width:240px} @media(min-width:520px){.hero-meta .hero-ctas{flex-direction:row;justify-content:center}} /* --- Servicios ---------------------------------------------------------- */ .svc-grid{display:grid;grid-template-columns:1fr;gap:16px} @media(min-width:560px){.svc-grid{grid-template-columns:1fr 1fr}} @media(min-width:920px){.svc-grid{grid-template-columns:1fr 1fr 1fr}} .svc-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s;height:100%} .svc-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--orange-l)} .svc-ico{width:52px;height:52px;border-radius:13px;background:var(--orange-l);display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:background .2s} .svc-card:hover .svc-ico{background:var(--orange)} .svc-ico svg{width:26px;height:26px;stroke:var(--orange-d);fill:none;stroke-width:2;transition:stroke .2s} .svc-card:hover .svc-ico svg{stroke:#fff} .svc-card h3{margin-bottom:7px} .svc-card p{font-size:15px;line-height:1.55;color:var(--muted)} /* --- Proceso ------------------------------------------------------------ */ .proc{background:var(--surface)} .proc-steps{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px} @media(min-width:760px){.proc-steps{grid-template-columns:repeat(4,1fr);gap:18px}} .step{background:var(--surface-2);border:1.5px solid var(--line);border-radius:16px;padding:24px 20px;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);position:relative;text-align:left;font-family:inherit} .step.on{border-color:var(--orange);background:var(--surface);box-shadow:var(--sh-md);transform:translateY(-4px)} .step-num{font-family:var(--hd);font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--orange-d);margin-bottom:12px;display:flex;align-items:center;gap:8px} .step-num .n{width:26px;height:26px;border-radius:50%;border:2px solid var(--orange);color:var(--orange-d);display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .25s} .step.on .step-num .n{background:var(--orange);color:#fff} .step-ico{width:44px;height:44px;border-radius:11px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;margin-bottom:14px;transition:background .25s} .step.on .step-ico{background:var(--orange-l)} .step-ico svg{width:24px;height:24px;stroke:var(--orange-d);fill:none;stroke-width:2} .step h3{margin-bottom:6px;font-size:17px} .step p{font-size:14px;line-height:1.5;color:var(--muted)} .proc-bar{height:6px;border-radius:6px;background:var(--line);margin:0 4px 22px;overflow:hidden} .proc-bar .fill{height:100%;background:linear-gradient(90deg,var(--orange),var(--orange-d));border-radius:6px;transition:width .4s cubic-bezier(.16,1,.3,1)} /* --- Por que T-21 ------------------------------------------------------- */ .why-grid{display:grid;grid-template-columns:1fr;gap:16px} @media(min-width:760px){.why-grid{grid-template-columns:1fr 1fr 1fr}} .why-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px 24px;box-shadow:var(--sh-sm);height:100%} .why-ico{width:46px;height:46px;border-radius:50%;background:var(--orange-l);display:flex;align-items:center;justify-content:center;margin-bottom:16px} .why-ico svg{width:22px;height:22px;stroke:var(--orange-d);fill:none;stroke-width:2.4} .why-card h3{margin-bottom:8px} .why-card p{font-size:15px;line-height:1.55} .why-card .src{display:block;color:var(--orange-d);font-size:12px;font-weight:700;margin-top:10px;text-transform:uppercase;letter-spacing:.08em} /* --- Carrusel de resenas ------------------------------------------------ */ .rev{background:var(--surface-2);position:relative;overflow:hidden} .rev-track{position:relative;min-height:240px} .rev-slide{position:absolute;inset:0;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1);pointer-events:none} .rev-slide.on{opacity:1;transform:translateY(0);pointer-events:auto;position:relative} .rev-card{max-width:680px;margin:0 auto;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:40px 32px;box-shadow:var(--sh-md)} .rev-mark{font-family:Georgia,serif;font-size:64px;line-height:1;color:var(--orange);opacity:.4;margin-bottom:8px} .rev-stars{display:inline-flex;gap:2px;margin-bottom:18px} .rev-stars svg{width:20px;height:20px;fill:var(--orange)} .rev-card p{font-size:clamp(19px,3vw,24px);line-height:1.5;color:var(--ink);font-style:italic;margin-bottom:22px} .rev-who{font-family:var(--hd);text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--orange-d);font-size:15px} .rev-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px} .rev-arrow{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s} .rev-arrow:hover{border-color:var(--orange);color:var(--orange-d);box-shadow:var(--sh-sm)} .rev-arrow svg{width:18px;height:18px;stroke:var(--ink-2);fill:none;stroke-width:2.4} .rev-arrow:hover svg{stroke:var(--orange-d)} .rev-dots{display:flex;gap:8px} .rev-dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);border:none;cursor:pointer;transition:all .25s;padding:0} .rev-dot.on{background:var(--orange);width:26px;border-radius:6px} .rev-head-badge{display:inline-flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:10px 18px;margin-bottom:28px;box-shadow:var(--sh-sm)} .rev-hb-score{font-family:var(--hd);font-size:30px;font-weight:800;color:var(--orange-d);line-height:1} .rev-hb-meta{font-size:13px;color:var(--muted);text-align:left} .rev-hb-meta strong{color:var(--ink)} .rev-head-badge .stars svg{width:16px;height:16px} .read-google{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--orange-d);font-weight:600;font-size:15px;text-decoration:none} .read-google:hover{text-decoration:underline} /* --- Corte con imagen --------------------------------------------------- */ .break-sec{padding:0;border-top:none} .break{position:relative;border-radius:0;overflow:hidden;background:linear-gradient(135deg,#3A2E22,#1E1A16);min-height:220px;display:flex;align-items:center;justify-content:center} .break img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55} .break .bk-ov{position:relative;text-align:center;padding:40px 22px} .break .bk-ov .eyebrow{color:#fff} .break .bk-ov .eyebrow::before{background:var(--orange)} .break h2{color:#fff;font-size:clamp(24px,4vw,36px);max-width:680px;margin:0 auto} .break .bk-note{color:rgba(255,255,255,.7);font-size:13px;margin-top:14px;font-style:italic} /* --- Galeria del taller ------------------------------------------------- Columnas tipo mosaico en vez de una rejilla: las fotos del taller vienen mezcladas en horizontal y vertical, y asi ninguna se recorta. ----------------------------------------------------------------------- */ .shop-grid{column-count:1;column-gap:16px} @media(min-width:600px){.shop-grid{column-count:2}} @media(min-width:960px){.shop-grid{column-count:3}} .shop-grid > *{break-inside:avoid;margin-bottom:16px} .shop-tile{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);box-shadow:var(--sh-sm)} .shop-tile img{display:block;width:100%;height:auto} .shop-tile img.pos-30{aspect-ratio:4/3;object-fit:cover;object-position:center 30%} .shop-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 13px;background:linear-gradient(180deg, rgba(20,16,11,0) 0%, rgba(20,16,11,.82) 100%);color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em;line-height:1.4} /* --- Ubicacion y mapa --------------------------------------------------- */ .loc-grid{display:grid;grid-template-columns:1fr;gap:20px} @media(min-width:800px){.loc-grid{grid-template-columns:.85fr 1.15fr}} .info-box{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--sh-sm)} .info-row{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px} .info-row:last-of-type{margin-bottom:0} .info-row svg{width:21px;height:21px;stroke:var(--orange-d);fill:none;stroke-width:2;flex-shrink:0;margin-top:2px} .info-row .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);margin-bottom:3px;font-weight:600} .info-row .val{color:var(--ink);font-size:16px;line-height:1.45} .info-row .val.is-open{font-size:13px;color:var(--green);font-weight:600;margin-top:4px} .info-row a{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--muted-2)} .info-row a:hover{color:var(--orange-d);border-color:var(--orange-d)} .info-box .btn-call{margin-top:18px} .map-wrap{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-sm);min-height:280px;background:var(--surface-2)} .map-wrap iframe{width:100%;height:100%;min-height:280px;border:0;display:block;filter:saturate(.9)} /* --- Formulario de presupuesto ------------------------------------------ */ .est{background:var(--panel);color:#fff;border-radius:24px;padding:44px 32px;display:grid;grid-template-columns:1fr;gap:30px} @media(min-width:840px){.est{grid-template-columns:.9fr 1.1fr;padding:56px 48px;gap:44px}} .est h2{color:#fff} .est .eyebrow{color:var(--orange)} .est .eyebrow::before{background:var(--orange)} .est p{color:rgba(255,255,255,.7)} .est-call{margin-top:22px} .est-call .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)} .est-call .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff} .est-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.6);margin-bottom:6px;font-weight:600;display:block} .field{width:100%;padding:14px 16px;border-radius:11px;border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;font-size:15px;font-family:var(--bd);margin-bottom:14px;transition:border-color .2s,background .2s} .field::placeholder{color:rgba(255,255,255,.4)} .field:focus{outline:none;border-color:var(--orange);background:rgba(255,255,255,.09)} textarea.field{resize:vertical;min-height:90px} .est .btn{margin-top:4px} .est-success{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;min-height:100%} .est-ok{width:58px;height:58px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center} .est-ok svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:3} .est-success h3{color:#fff;font-size:22px} .est-success p{color:rgba(255,255,255,.75);font-size:15px} .est-note{font-size:11px;color:rgba(255,255,255,.4);margin-top:10px} .is-hidden{display:none !important} /* --- CTA final y pie ---------------------------------------------------- */ .cta-final{text-align:center;padding:68px 0;background:radial-gradient(120% 90% at 50% 100%, var(--orange-l), transparent 55%), var(--cream)} .cta-final h2{margin-bottom:12px} .cta-final p{margin-bottom:28px;font-size:17px;max-width:520px;margin-left:auto;margin-right:auto} .cta-final .btn{max-width:380px;margin:0 auto} footer{background:var(--panel);color:rgba(255,255,255,.7);padding:44px 0;text-align:center} .foot-name{font-family:var(--hd);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;font-size:20px;margin-bottom:6px} .foot-contact{font-size:14px;color:rgba(255,255,255,.65);line-height:1.7} .foot-contact a{color:rgba(255,255,255,.9);text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.3)} .foot-contact a:hover{color:var(--orange)} /* --- Barra fija de llamada en movil ------------------------------------- */ .sticky-call{position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--bar-bg);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px 16px;display:none;box-shadow:0 -6px 20px rgba(30,26,22,.06)} @media(max-width:600px){.sticky-call{display:block}footer{padding-bottom:84px}.hero-in{padding-bottom:84px}} .sticky-call .btn{padding:13px} /* --- Menu de secciones -------------------------------------------------- En pantallas anchas va en linea; por debajo de 940px se pliega en un panel que baja desde la barra. ----------------------------------------------------------------------- */ .topnav{display:none;align-items:center;gap:24px;margin-left:auto;margin-right:22px} @media(min-width:940px){.topnav{display:flex}} .topnav a{font-family:var(--hd);text-transform:uppercase;letter-spacing:.09em;font-size:12.5px; font-weight:700;color:var(--muted);text-decoration:none;padding:4px 0;position:relative; transition:color .2s} .topnav a:hover{color:var(--ink)} .topnav a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px; background:var(--orange);border-radius:2px;transition:right .25s cubic-bezier(.16,1,.3,1)} .topnav a:hover::after{right:0} .topnav a.is-cta{color:var(--orange-d)} .topnav a.is-cta::after{right:0;opacity:.35} .topnav a.is-cta:hover::after{opacity:1} /* .icon-btn se declara mas abajo y tambien fija display, asi que estas dos reglas necesitan un selector mas especifico para ganarle. */ .topbar .nav-toggle{display:inline-flex} @media(min-width:940px){.topbar .nav-toggle{display:none}} .nav-toggle .ico-x{display:none} .topbar.nav-open .nav-toggle .ico-bars{display:none} .topbar.nav-open .nav-toggle .ico-x{display:block} @media(max-width:939px){ /* Fondo solido, no translucido: el desplegable cae sobre la foto del hero y con transparencia el texto se ensucia. */ .topbar.nav-open .topnav{display:flex;flex-direction:column;align-items:stretch;gap:0; position:absolute;left:0;right:0;top:100%;margin:0;padding:8px 22px 16px; background:var(--cream);border-bottom:1px solid var(--line);box-shadow:var(--sh-md)} .topbar.nav-open .topnav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink)} .topbar.nav-open .topnav a:last-child{border-bottom:none} .topbar.nav-open .topnav a::after{display:none} } /* --- Controles de la barra: idioma y tema ------------------------------- */ .topbar-in{position:relative} .top-tools{display:flex;align-items:center;gap:10px} .lang-switch{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:2px} .lang-btn{font-family:var(--hd);font-size:12px;font-weight:800;letter-spacing:.08em;padding:6px 10px;border:none;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;transition:background .2s,color .2s} .lang-btn:hover{color:var(--ink)} .lang-btn.is-on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)} .icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s} .icon-btn:hover{border-color:var(--orange);color:var(--orange-d)} .icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} /* Se muestra el icono de lo que vas a obtener al pulsar, no el estado actual. */ .icon-btn .ico-moon{display:block} .icon-btn .ico-sun{display:none} :root[data-theme="dark"] .icon-btn .ico-moon{display:none} :root[data-theme="dark"] .icon-btn .ico-sun{display:block} /* --- Textos nuevos del hero y el pie ------------------------------------ */ .specialty{font-family:var(--hd);text-transform:uppercase;letter-spacing:.16em;font-size:13px;font-weight:700;color:var(--orange-d);margin-bottom:14px} .vehicle-note{margin-top:22px;font-size:14px;color:var(--muted-2);letter-spacing:.02em} .foot-tagline{font-family:var(--hd);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700;color:var(--orange);margin-bottom:12px} /* --- Formulario: campo opcional, error y trampa antispam ---------------- */ .est-lbl .opt{text-transform:none;letter-spacing:normal;font-weight:400;color:rgba(255,255,255,.4)} .est-error{margin-top:12px;font-size:14px;color:#FF9C93;line-height:1.5} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* --- WhatsApp: boton flotante y panel ----------------------------------- */ .wa{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:12px} @media(max-width:600px){.wa{bottom:82px}} .wa-fab{width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;background:var(--wa);color:#fff; display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(37,211,102,.4); transition:transform .18s cubic-bezier(.16,1,.3,1),background .2s} .wa-fab:hover{background:var(--wa-d);transform:scale(1.06)} .wa-fab svg{width:30px;height:30px} .wa-fab .wa-ico-chat{fill:currentColor;stroke:none} .wa-fab .wa-ico-x{display:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;width:24px;height:24px} .wa.is-open .wa-fab .wa-ico-chat{display:none} .wa.is-open .wa-fab .wa-ico-x{display:block} .wa-panel{width:min(360px,calc(100vw - 36px));background:var(--surface);border:1px solid var(--line); border-radius:18px;box-shadow:var(--sh-lg);overflow:hidden;transform-origin:bottom right; opacity:0;transform:translateY(12px) scale(.96);pointer-events:none; transition:opacity .22s ease,transform .22s cubic-bezier(.16,1,.3,1)} .wa-panel[hidden]{display:none} .wa.is-open .wa-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto} .wa-head{display:flex;align-items:center;gap:11px;padding:14px 16px;background:#075E54;color:#fff} :root[data-theme="dark"] .wa-head{background:#0B4B44} .wa-avatar{width:38px;height:38px;border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;flex-shrink:0} .wa-avatar svg{width:22px;height:22px;fill:#fff} .wa-who{flex:1;min-width:0;line-height:1.3} .wa-who strong{display:block;font-size:15px} .wa-who span{font-size:12px;color:rgba(255,255,255,.75)} .wa-x{width:30px;height:30px;border:none;background:transparent;color:rgba(255,255,255,.8);cursor:pointer;border-radius:8px;flex-shrink:0} .wa-x:hover{background:rgba(255,255,255,.14);color:#fff} .wa-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} .wa-body{padding:16px;max-height:min(46vh,340px);overflow-y:auto;background:var(--surface-2)} .wa-bubble{background:var(--surface);border-radius:4px 14px 14px 14px;padding:12px 14px;font-size:14px; line-height:1.55;color:var(--ink-2);box-shadow:var(--sh-sm);margin-bottom:14px} .wa-chips{display:flex;flex-direction:column;gap:8px} .wa-chip{text-align:left;font-family:inherit;font-size:13.5px;line-height:1.45;padding:10px 13px;border-radius:14px 14px 14px 4px; border:1px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer; transition:border-color .18s,background .18s,transform .14s} .wa-chip:hover{border-color:var(--wa);background:var(--orange-l);transform:translateX(-2px)} .wa-foot{padding:13px 16px 15px;border-top:1px solid var(--line);background:var(--surface)} .wa-line-lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);font-weight:600;margin-bottom:6px} .wa-lines{display:flex;gap:7px;margin-bottom:11px} .wa-line{flex:1;font-size:12.5px;font-weight:600;padding:7px 6px;border-radius:8px;border:1px solid var(--line-2); background:var(--surface);color:var(--muted);cursor:pointer;transition:all .18s;font-family:inherit} .wa-line:hover{color:var(--ink)} .wa-line.is-on{border-color:var(--wa);background:var(--wa);color:#fff} .wa-compose{display:flex;gap:8px;align-items:flex-end} .wa-input{flex:1;font-family:inherit;font-size:14px;line-height:1.45;padding:10px 12px;border-radius:20px; border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);resize:none;max-height:96px;overflow-y:auto} .wa-input::placeholder{color:var(--muted-2)} .wa-input:focus{outline:none;border-color:var(--wa)} .wa-send{width:40px;height:40px;border-radius:50%;border:none;background:var(--wa);color:#fff;cursor:pointer; display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s} .wa-send:hover{background:var(--wa-d)} .wa-send svg{width:19px;height:19px;fill:currentColor;margin-left:2px} .wa-note{font-size:11px;color:var(--muted-2);margin-top:9px;line-height:1.4} /* --- Aparicion al hacer scroll ------------------------------------------ */ .reveal{opacity:0;transform:translateY(22px); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); transition-delay:var(--d,0s)} .reveal.shown{opacity:1;transform:translateY(0)} /* Las fotos entran saliendo de un acercamiento, no apareciendo de golpe. El recorte del contenedor convierte el gesto en un desenfoque de zoom. */ .reveal .shop-tile img{transform:scale(1.06);transition:transform .9s var(--ease-out); transition-delay:var(--d,0s)} .reveal.shown .shop-tile img{transform:none} /* Los numeros cuentan hacia arriba: con cifras de ancho fijo no bailan. */ .hs-num{font-variant-numeric:tabular-nums} /* La barra superior se despega del contenido al hacer scroll. */ .topbar{transition:box-shadow .25s ease} .topbar.is-stuck{box-shadow:var(--sh-sm)} /* Seccion en la que estas: reusa el subrayado que ya tenia el hover. */ .topnav a.is-active{color:var(--ink)} .topnav a.is-active::after{right:0} /* El punto activo del hero se rellena al ritmo del propio slider, para que se vea que va a cambiar solo y cuanto falta. */ .hero-dot{position:relative;overflow:hidden} /* Mas opaco que los inactivos (.45): al empezar el ciclo la pildora esta vacia, y si fuera mas tenue el indicador activo se perderia sobre la foto. */ .hero-dot.is-on{background:rgba(255,255,255,.55)} .hero-dot.is-on::after{content:'';position:absolute;inset:0;background:#FFB347; transform:scaleX(0);transform-origin:left;animation:dot-fill 6s linear forwards} @keyframes dot-fill{to{transform:scaleX(1)}} @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} .reveal{opacity:1;transform:none} .reveal .shop-tile img{transform:none} /* Sin rotacion automatica no hay cuenta atras que mostrar. */ .hero-dot.is-on{background:#FFB347} .hero-dot.is-on::after{display:none} html{scroll-behavior:auto} }