:root { --indigo:#2f3a6b; --tinta:#161a22; --panel:#151827; --porcelana:#f3ede1; --superficie:#fbf8f2; --linea:rgba(22,26,34,.17); --display:Newsreader,serif; --texto:'Hanken Grotesk',sans-serif; --datos:'Fragment Mono',monospace; }
* { box-sizing:border-box; } html { color:var(--tinta); background:var(--porcelana); font-family:var(--texto); scroll-behavior:smooth; } body { min-width:320px; margin:0; } button { font:inherit; } a { color:inherit; } .saltar { position:fixed; z-index:30; top:8px; left:8px; padding:10px 14px; color:#fff; background:var(--tinta); transform:translateY(-150%); } .saltar:focus { transform:translateY(0); }
.barra { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; width:min(1220px,100%); margin:auto; padding:1.2rem clamp(20px,4vw,64px); } .marca { position:relative; display:inline-block; color:var(--tinta); font:600 1.75rem/.85 var(--display); text-decoration:none; } .marca__arco { position:absolute; right:-.15rem; bottom:-.5rem; width:3.7rem; height:.9rem; color:var(--indigo); } .marca__arco svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; } .barra nav { display:flex; gap:1.4rem; font-size:.88rem; } .barra nav a { text-decoration:none; } .barra nav a:hover { color:var(--indigo); }
.boton { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:.55rem; padding:.8rem 1.1rem; border:1px solid transparent; cursor:pointer; font-weight:700; font-size:.88rem; line-height:1; text-decoration:none; transition:background 180ms cubic-bezier(.23,1,.32,1),color 180ms cubic-bezier(.23,1,.32,1),transform 150ms ease-out,box-shadow 180ms cubic-bezier(.23,1,.32,1); } .boton:active { transform:scale(.97); } .boton .icono-flecha,.enlace svg { width:1rem; height:1rem; } .boton--nav { color:#fff; background:var(--indigo); } .boton--indigo { color:#fff; background:var(--indigo); box-shadow:0 8px 20px rgba(47,58,107,.2); } .boton--claro { color:var(--panel); background:var(--superficie); } .boton--grande { min-height:48px; padding-inline:1.4rem; }
.hero { overflow:hidden; } .hero__interior { display:grid; grid-template-columns:minmax(0,.88fr) minmax(24rem,1.12fr); align-items:center; gap:clamp(2rem,7vw,8rem); width:min(1220px,100%); min-height:calc(100svh - 82px); margin:auto; padding:clamp(3rem,7vw,7rem) clamp(20px,4vw,64px); } .eyebrow,.datos { margin:0 0 .85rem; color:#45558b; font:500 10px/1.4 var(--datos); letter-spacing:.1em; text-transform:uppercase; } h1,h2,h3,h4 { margin:0; font-family:var(--display); font-weight:500; letter-spacing:-.045em; } h1 { font-size:clamp(3.7rem,7vw,7rem); line-height:.86; } h1 em { color:var(--indigo); } .hero__bajada { max-width:31rem; margin:1.5rem 0 2rem; color:rgba(22,26,34,.75); font-size:clamp(1rem,1.5vw,1.13rem); line-height:1.55; } .hero__acciones { display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; } .enlace { display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:.9rem; text-underline-offset:.3em; } .hero__visual { position:relative; min-width:0; } .hero__visual img { display:block; width:100%; min-height:31rem; aspect-ratio:1.05; object-fit:cover; border-radius:44% 44% 2px 2px; filter:saturate(.78) contrast(.97); } .arco { position:absolute; top:12%; left:-10%; width:92%; color:var(--indigo); fill:none; stroke:currentColor; stroke-width:3.5; stroke-linecap:round; } .arco path { stroke-dasharray:400; stroke-dashoffset:400; animation:dibujar-arco 820ms cubic-bezier(.77,0,.175,1) 340ms forwards; } .hero__sello { position:absolute; right:-1.1rem; bottom:1.7rem; display:flex; flex-direction:column; gap:.25rem; margin:0; padding:.85rem 1rem; color:#fff; background:var(--panel); box-shadow:12px 12px 0 rgba(22,26,34,.12); } .hero__sello span { font:500 9px/1.3 var(--datos); letter-spacing:.08em; text-transform:uppercase; color:#bdc7f3; } .hero__sello b { font:500 1.25rem/1 var(--display); }
.introduccion,.servicios,.visita { width:min(1120px,100%); margin:auto; padding-inline:clamp(20px,5vw,64px); } .introduccion { max-width:60rem; padding-top:clamp(5rem,10vw,9rem); padding-bottom:clamp(5rem,10vw,9rem); text-align:center; } .introduccion h2,.seccion__cabecera h2 { font-size:clamp(2.7rem,5.3vw,5.3rem); line-height:.92; } .introduccion > p:last-child { max-width:38rem; margin:1.25rem auto 0; color:rgba(22,26,34,.7); line-height:1.55; }
.servicios { padding-bottom:clamp(5rem,10vw,9rem); } .seccion__cabecera { max-width:45rem; margin-bottom:3.3rem; } .servicios__grupo { padding:2.1rem 0; border-top:1px solid var(--linea); } .servicios__grupo:last-child { border-bottom:1px solid var(--linea); } .servicios__grupo > header { display:grid; grid-template-columns:minmax(11rem,.7fr) 1fr; gap:2rem; align-items:end; margin-bottom:1.25rem; } .servicios__grupo h3 { font-size:clamp(2rem,3.4vw,3.2rem); line-height:.9; } .servicios__grupo header > p:last-child { max-width:25rem; margin:0; color:rgba(22,26,34,.68); font-size:.93rem; line-height:1.45; } .servicios__lista { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem; } .servicio { position:relative; min-width:0; min-height:12rem; padding:1.35rem 1.2rem 1.15rem; border:1px solid var(--linea); background:var(--superficie); transition:transform 180ms cubic-bezier(.23,1,.32,1),box-shadow 180ms cubic-bezier(.23,1,.32,1); } .servicio__numero { color:#6675a8; font:500 10px/1 var(--datos); } .servicio h4 { max-width:12rem; margin-top:1.8rem; font-size:1.55rem; line-height:.95; } .servicio p { margin:.65rem 0 1rem; color:rgba(22,26,34,.68); font-size:.87rem; line-height:1.45; } .servicio button { display:inline-flex; align-items:center; gap:.3rem; padding:0; border:0; color:var(--indigo); background:transparent; cursor:pointer; font:600 .76rem/1 var(--datos); } .servicio button svg { width:.9rem; } @media (hover:hover) and (pointer:fine) { .servicio:hover { transform:translateY(-4px); box-shadow:0 15px 26px rgba(22,26,34,.11); } .boton:hover { box-shadow:0 11px 23px rgba(22,26,34,.16); } }
.puntualidad { color:#fff; background:var(--panel); } .puntualidad__interior { display:grid; grid-template-columns:minmax(0,.92fr) minmax(20rem,1.08fr); gap:clamp(3rem,9vw,9rem); width:min(1120px,100%); margin:auto; padding:clamp(5rem,10vw,9rem) clamp(20px,5vw,64px); } .eyebrow--claro { color:#b9c4f5; } .puntualidad h2 { font-size:clamp(2.8rem,5vw,5rem); line-height:.91; } .puntualidad__texto > p:not(.eyebrow) { max-width:31rem; margin:1.25rem 0 1.9rem; color:rgba(255,255,255,.74); line-height:1.55; } .puntualidad__datos { display:grid; gap:.65rem; } .puntualidad__datos > div { display:grid; grid-template-columns:2.1rem 1fr; column-gap:1rem; padding:1.15rem; border:1px solid rgba(255,255,255,.18); } .puntualidad__datos span { grid-row:1 / span 2; color:#bdc7f3; font:500 10px var(--datos); } .puntualidad__datos strong { font:500 1.35rem/1 var(--display); } .puntualidad__datos p { margin:.4rem 0 0; color:rgba(255,255,255,.69); font-size:.88rem; line-height:1.4; }
.visita { display:grid; grid-template-columns:minmax(18rem,.85fr) 1fr; align-items:center; gap:clamp(3rem,9vw,9rem); padding-block:clamp(5rem,10vw,9rem); } .visita__placa { display:flex; min-height:20rem; flex-direction:column; align-items:center; justify-content:center; padding:2rem; border:1px solid var(--linea); background:var(--superficie); text-align:center; } .visita__placa span { display:grid; width:3.5rem; height:3.5rem; place-items:center; color:#fff; background:var(--indigo); } .visita__placa svg { width:1.7rem; height:1.7rem; } .visita__placa p { margin:1rem 0 .4rem; font:500 1.7rem/1 var(--display); } .visita__placa small { color:rgba(22,26,34,.62); font:500 9px/1.4 var(--datos); } .visita__texto h2 { font-size:clamp(2.6rem,4.3vw,4.2rem); line-height:.92; } .visita__texto > p:not(.eyebrow) { margin:1rem 0 0; color:rgba(22,26,34,.7); line-height:1.5; } .enlace--indigo { margin-top:1.25rem; color:var(--indigo); }
.cta { padding:clamp(5.5rem,11vw,10rem) clamp(20px,5vw,64px); color:#fff; background:var(--indigo); text-align:center; } .cta .eyebrow { color:#e4e8ff; } .cta h2 { max-width:52rem; margin:auto; font-size:clamp(2.8rem,5.8vw,5.7rem); line-height:.9; } .cta > p:not(.eyebrow) { max-width:39rem; margin:1.25rem auto 2rem; color:rgba(255,255,255,.84); line-height:1.55; } footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:2rem clamp(20px,4vw,64px); color:#d3d6e4; background:#10121c; font-size:.78rem; } footer .marca,footer a { color:#fff; } footer p { margin:0; } footer > a:last-child { display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; }
html.js .hero-entrada,html.js .revelar,html.js .servicios__lista > *,html.js .puntualidad__datos > * { opacity:0; transform:translateY(16px) scale(.98); transition:opacity 260ms cubic-bezier(.23,1,.32,1) var(--rvl-d,0ms),transform 260ms cubic-bezier(.23,1,.32,1) var(--rvl-d,0ms); } html.js .en,html.anim-fallback .hero-entrada,html.anim-fallback .revelar,html.anim-fallback .servicios__lista > *,html.anim-fallback .puntualidad__datos > * { opacity:1; transform:none; } @keyframes dibujar-arco { to { stroke-dashoffset:0; } }
@media (max-width:760px) { .barra { padding-block:1rem; } .barra nav { display:none; } .boton--nav { min-height:42px; padding-inline:.8rem; font-size:.77rem; } .hero__interior { grid-template-columns:1fr; gap:2.5rem; min-height:auto; padding-top:4.2rem; } .hero__visual img { min-height:20rem; aspect-ratio:1.15; } .hero__sello { right:0; bottom:1rem; } .introduccion { text-align:left; } .servicios__grupo > header { grid-template-columns:1fr; gap:.9rem; } .servicios__lista { grid-template-columns:1fr; } .servicio { min-height:0; } .puntualidad__interior,.visita { grid-template-columns:1fr; gap:2.6rem; } .visita__placa { min-height:16rem; } footer { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; } .boton:hover,.boton:focus-visible,.servicio:hover { transform:none; } }
.servicio__numero { color:#4d5c88; }