/* La fuente Manrope se carga desde el de cada página (preconnect + link) en vez de con @import aquí, para que no bloquee la carga en cascada. */ /* Paleta real de Reformas Aljumaz, tomada directamente de su logo (azul #3898C8 y carbón #2F3C43 de "aljumaz · reformas · proyectos"). */ :root{ color-scheme: light; --ink:#2F3C43; --paper:#FFFFFF; --paper-line:#CFE3EF; --signal:#3898C8; /* azul principal de marca, del logo — botones, iconos, texto grande */ --signal-text:#256E93; /* mismo azul, más oscuro — para texto pequeño, cumple contraste AA */ --signal-light:#E7F3F8; --radius:10px; } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; max-width:100%; overflow-x:hidden; } body{ font-family:'Manrope', -apple-system, "Helvetica Neue", Arial, sans-serif; color:var(--ink); background:var(--paper); line-height:1.5; } h1,h2,h3,h4,h5,h6{ font-weight:800; } img{ max-width:100%; display:block; } a{ color:inherit; } .aviso-placeholder{ background:#FFF4EC; border:1px dashed #C97A3C; border-radius:8px; padding:10px 14px; font-size:13px; margin:0 0 24px; } header.site{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--paper-line); } @media (max-width:700px){ header.site{ flex-wrap:wrap; row-gap:10px; } header.site nav{ width:100%; } } header.site nav a{ margin-left:18px; text-decoration:none; font-size:15px; } header.site .logo{ display:flex; align-items:center; text-decoration:none; } header.site .logo img{ height:36px; width:auto; } /* furgoneta mini con el rótulo de la empresa, recorriendo el hueco entre el logo y el menú, y volviendo a salir desde el logo en bucle. */ .mini-van-track{ flex:1; position:relative; align-self:stretch; min-width:60px; margin:0 18px; pointer-events:none; } .mini-van{ position:absolute; bottom:2px; left:0; animation:van-drive 9s linear infinite, van-bump-simple .5s ease-in-out infinite; } @keyframes van-drive{ 0%{ left:0%; } 95%{ left:calc(100% - 90px); } 100%{ left:calc(100% - 90px); } } @keyframes van-bump-simple{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } } @media (prefers-reduced-motion:reduce){ .mini-van{ animation:none; left:0; } } @media (max-width:760px){ .mini-van-track{ display:none; } } main{ max-width:1100px; margin:0 auto; padding:32px 24px; } .hero{ position:relative; padding:64px 0 48px; min-height:600px; box-sizing:border-box; overflow:hidden; } .hero-mark-wrap{ position:absolute; top:50%; left:50%; width:min(50vw, 560px); transform:translate(-50%,-50%); z-index:0; pointer-events:none; --mx:50%; --my:35%; } .hero-mark{ display:block; width:100%; height:auto; /* marca de agua tenue por defecto; el "foco" que sigue al cursor revela el color y la opacidad completos justo alrededor del ratón, recortando esta misma imagen con una máscara radial (sin capas extra). */ -webkit-mask-image:radial-gradient(circle 210px at var(--mx) var(--my), rgba(0,0,0,1) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.14) 75%, rgba(0,0,0,.14) 100%); mask-image:radial-gradient(circle 210px at var(--mx) var(--my), rgba(0,0,0,1) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.14) 75%, rgba(0,0,0,.14) 100%); } @media (prefers-reduced-motion:reduce), (hover:none), (pointer:coarse){ .hero-mark{ -webkit-mask-image:none; mask-image:none; opacity:.14; } } @media (max-width:760px){ .hero{ min-height:0; } .hero-mark-wrap{ width:min(80vw, 420px); } } .hero h1, .hero p, .hero .cta{ position:relative; z-index:1; } .hero h1{ font-size:clamp(28px,4vw,44px); margin:0 0 12px; max-width:20ch; } .hero p{ font-size:17px; max-width:56ch; color:#3a3a3a; } .cta{ display:inline-block; margin-top:18px; padding:12px 22px; background:var(--signal); color:#fff; border-radius:var(--radius); text-decoration:none; font-weight:600; } .grid-servicios{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:28px 0; } .grid-servicios a{ display:block; padding:18px; background:var(--signal-light); border:1px solid var(--paper-line); border-left:3px solid var(--signal); border-radius:var(--radius); text-decoration:none; } .grid-servicios a b{ display:block; margin-bottom:4px; color:var(--signal-text); } footer.site{ background:var(--ink); color:var(--signal-light); padding:24px; font-size:14.5px; text-align:center; } .footer-inner{ max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; } .footer-legal{ max-width:1100px; margin:14px auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; padding-top:14px; border-top:1px solid rgba(231,243,248,.15); } .footer-legal a{ color:var(--signal-light); opacity:.75; text-decoration:underline; font-size:14px; } .footer-legal a:hover{ opacity:1; } .legal-wrap, .servicio-wrap{ max-width:720px; } .legal-wrap h1, .servicio-wrap h1{ margin-bottom:6px; } .legal-update{ font-size:13.5px; color:#778; margin:0 0 32px; } .legal-wrap h2, .servicio-wrap h2{ font-size:18px; margin:34px 0 12px; color:var(--ink); } .legal-wrap h2:first-of-type, .servicio-wrap h2:first-of-type{ margin-top:0; } .legal-wrap p, .servicio-wrap p{ font-size:16px; line-height:1.65; color:#444; margin:0 0 14px; } .legal-wrap ul, .servicio-wrap ul{ margin:0 0 14px; padding-left:20px; } .legal-wrap li, .servicio-wrap li{ font-size:16px; line-height:1.6; color:#444; margin-bottom:6px; } .legal-wrap a, .servicio-wrap a{ color:var(--signal-text); font-weight:600; } .servicio-lede{ font-size:17.5px !important; color:var(--ink) !important; } .servicio-precio{ display:inline-block; background:var(--signal-light); border-radius:10px; padding:10px 18px; margin:4px 0 24px; } .servicio-precio b{ display:block; font-size:20px; color:var(--signal); } .servicio-precio span{ font-size:14.5px; color:#556; } .servicio-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; } .servicio-galeria{ margin:30px 0; } .servicio-galeria .badge-prueba{ display:inline-block; background:#F2A93B; color:#241a00; font-weight:700; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; padding:5px 12px; border-radius:20px; margin-bottom:14px; } .servicio-galeria-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .servicio-galeria-grid div{ aspect-ratio:4/3; border-radius:12px; background:var(--signal-light); border:1px dashed var(--paper-line); display:flex; align-items:center; justify-content:center; font-size:13px; color:#556; text-align:center; padding:10px; line-height:1.4; } @media (max-width:600px){ .servicio-galeria-grid{ grid-template-columns:1fr 1fr; } } .btn-cta{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:10px; font-weight:700; font-size:14.5px; text-decoration:none; } .btn-cta-primary{ background:var(--signal); color:#fff !important; } .btn-cta-outline{ background:#fff; color:var(--ink) !important; border:1px solid var(--paper-line); } .legal-pending{ display:inline-block; background:#FFF4EC; border:1px dashed #C97A3C; border-radius:6px; padding:2px 8px; font-size:13px; color:#8a4a1c; font-style:normal; }