:root{--fondo:#0b1220;--panel:#121b2d;--texto:#efe9dc;--tenue:#9aa3b5;--oro:#b8975a}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--fondo);color:var(--texto);font:400 1rem/1.6 "Jost",system-ui,sans-serif}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;line-height:1.1}
section{padding:5rem 6vw}
h2{font-size:clamp(2.2rem,5vw,3.5rem);margin-bottom:2rem}
h3{font-size:1.7rem;color:var(--oro);margin:3rem 0 1.5rem}
.lead{max-width:30rem;color:var(--tenue);font-size:1.15rem;margin:1.5rem 0 2rem}

/* Portada */
.hero{min-height:100svh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:3rem;padding:4rem 6vw}
.hero h1{font-size:clamp(3.5rem,9vw,7rem)}
.btn{display:inline-block;padding:.9rem 2rem;border:1px solid var(--oro);color:var(--oro);text-decoration:none;transition:background .2s,color .2s}
.btn:hover,.btn:focus-visible{background:var(--oro);color:var(--fondo)}

/* Reloj de la portada */
.reloj{width:min(80vw,380px);aspect-ratio:1;justify-self:center;position:relative;border-radius:50%;
  background:repeating-conic-gradient(var(--oro) 0 .6deg,transparent .6deg 30deg),var(--panel);
  box-shadow:0 0 0 10px var(--fondo),0 0 0 11px var(--oro)}
.reloj::before{content:"";position:absolute;inset:7%;border-radius:50%;background:var(--panel)}
.reloj::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--oro)}
.mano{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;background:var(--texto);border-radius:3px}
#h{width:5px;height:24%;margin-left:-2.5px}
#m{width:3px;height:36%;margin-left:-1.5px}
#s{width:1px;height:40%;background:var(--oro)}

/* Catálogo */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2.5rem 2rem}
.item{border-top:1px solid var(--oro);padding-top:1rem}
.foto{aspect-ratio:4/5;background:linear-gradient(160deg,var(--panel),var(--fondo));margin-bottom:1rem}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.item h4{font-weight:500;font-size:1.05rem}
.precio{color:var(--oro);font-size:1.25rem;margin:.25rem 0 .75rem}
.item a{text-underline-offset:4px}

/* Pasos y contacto */
.pasos{background:var(--panel)}
.pasos ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;counter-reset:paso}
.pasos li{counter-increment:paso;border-top:1px solid var(--oro);padding-top:1rem}
.pasos li::before{content:counter(paso);font-family:"Cormorant Garamond",Georgia,serif;font-size:2.2rem;color:var(--oro)}
.pasos p{color:var(--tenue)}
#contacto{text-align:center}
#contacto .lead{margin-inline:auto}
footer{padding:2rem;text-align:center;color:var(--tenue);font-size:.9rem}

/* Botón flotante */
.flotante{position:fixed;right:1rem;bottom:1rem;padding:.8rem 1.3rem;border-radius:2rem;background:#25d366;color:#0b1220;font-weight:500;text-decoration:none}

@media(max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:2rem}
  .reloj{order:-1;width:min(62vw,260px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}