html{scroll-behavior:smooth}
section[id]{scroll-margin-top:84px}
@media (max-width: 900px){
  [style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width: 760px){
  [style*="grid-template-columns: repeat"]{grid-template-columns:1fr!important}
  h1{font-size:40px!important;line-height:1.05!important}
  h2{font-size:30px!important}
  [style*="padding: 80px 24px"]{padding-top:56px!important;padding-bottom:56px!important}
  [style*="padding: 88px 24px"]{padding-top:48px!important}
  [style*="font-size: 20px; max-width: 660px"]{font-size:17px!important}
  section[style*="padding: 32px"]{padding:20px!important}
  aside[style*="padding: 28px"]{padding:20px!important}
}

/* ---------- Navegación ---------- */
/* Encabezado fijo arriba al hacer scroll */
header{position:sticky!important;top:0;z-index:50;background:rgba(15,15,14,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
header nav a{position:relative;transition:color .15s}
header nav a:hover{color:#F3EFE6!important}
/* Sección en la que está el visitante */
header nav a[data-activo]{color:#D4AF6A!important}
header nav a[data-activo]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:#D4AF6A}
a:focus-visible,button:focus-visible{outline:2px solid #D4AF6A;outline-offset:3px;border-radius:6px}

/* Botón volver arriba */
#volver-arriba{position:fixed;right:20px;bottom:20px;z-index:60;width:46px;height:46px;border-radius:999px;border:1px solid #34312C;background:#1A1917;color:#F3EFE6;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.4);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s}
#volver-arriba.visible{opacity:1;transform:none;pointer-events:auto}
#volver-arriba:hover{border-color:#D4AF6A;color:#D4AF6A}

@media (max-width: 760px){
  section[id]{scroll-margin-top:118px}
  /* Encabezado compacto: logo + botón en una fila, secciones debajo */
  header > div{padding:10px 16px!important;row-gap:8px!important}
  header > div > a:first-child{order:1}
  header > div > a[href="/configurador/"]{order:2;margin-left:auto;padding:9px 16px!important}
  header > div > nav{order:3;width:100%;flex-wrap:nowrap!important;overflow-x:auto;gap:8px!important;padding:2px 0 4px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  header > div > nav::-webkit-scrollbar{display:none}
  header nav a{flex:none;font-size:13px;padding:7px 12px;border:1px solid #2A2824;border-radius:999px;white-space:nowrap}
  header nav a[data-activo]{border-color:#D4AF6A;background:rgba(212,175,106,.12)}
  header nav a[data-activo]::after{display:none}
  #volver-arriba{right:16px;bottom:16px}
  /* Enlaces del pie más fáciles de tocar */
  footer nav a, #contacto a[href^="mailto"], #contacto a[href^="tel"]{display:inline-block;padding:8px 0}
}
@media (max-width: 420px){
  header > div > a:first-child > span:last-child > span{display:none}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}#volver-arriba{transition:none}}