/* Klarock — mejoras de UX transversales: contacto rápido, video bajo demanda, cookies compactas, accesibilidad. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section[id], main[id] { scroll-margin-top: 5.5rem; }
:focus-visible { outline: 2px solid #d4b45f; outline-offset: 3px; }

/* ---- Botones flotantes de contacto (WhatsApp / llamar) ---- */
.kl-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.kl-fab a { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; border-radius: 999px; color: #fff; text-decoration: none; font: 600 .95rem/1 Inter, system-ui, sans-serif; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); transition: transform .15s ease, box-shadow .15s ease; }
.kl-fab a:hover { transform: translateY(-2px); }
.kl-fab svg { width: 1.7rem; height: 1.7rem; flex: none; fill: currentColor; }
.kl-fab .kl-wa { background: #1fa855; height: 3.5rem; min-width: 3.5rem; padding: 0 1.1rem; }
.kl-fab .kl-call { background: #16294a; border: 1px solid rgba(212, 180, 95, .6); color: #d4b45f; width: 3rem; height: 3rem; }
.kl-fab .kl-call svg { width: 1.35rem; height: 1.35rem; }
.kl-fab .kl-label { display: none; }
@media (min-width: 768px) { .kl-fab .kl-label { display: inline; } .kl-fab { right: 1.5rem; bottom: 1.5rem; } }
/* mientras el aviso de cookies está abierto, el botón flotante se oculta en celular para no tapar nada */
@media (max-width: 767px) { body:has(#cookie-banner) .kl-fab { display: none; } }

/* ---- Aviso de cookies compacto en celular ---- */
@media (max-width: 640px) {
  #cookie-banner { left: .5rem; right: .5rem; bottom: .5rem; padding: .9rem 1rem; }
  #cookie-banner p { font-size: .8rem; line-height: 1.35; margin-top: .3rem; }
  #cookie-banner p:first-child { font-size: .95rem; margin-top: 0; }
  #cookie-banner > div { flex-direction: row; margin-top: .7rem; gap: .5rem; }
  #cookie-banner button { flex: 1; padding: .65rem .5rem; min-height: 44px; }
}

/* ---- Video de YouTube bajo demanda (no carga ~4 MB hasta dar play) ---- */
.yt-lite { position: relative; display: block; width: 100%; padding: 0; cursor: pointer; overflow: hidden; background: #0b1626; border: 1px solid rgba(255, 255, 255, .1); }
.yt-lite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, opacity .3s ease; opacity: .9; }
.yt-lite:hover img { transform: scale(1.03); opacity: 1; }
.yt-lite .yt-play { position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 4.5rem; margin: -2.25rem 0 0 -2.25rem; border-radius: 999px; background: rgba(11, 22, 38, .82); border: 2px solid #d4b45f; }
.yt-lite .yt-play::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -.8rem 0 0 -.55rem; border-style: solid; border-width: .8rem 0 .8rem 1.35rem; border-color: transparent transparent transparent #d4b45f; }
.yt-lite .yt-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .9rem; font: 600 .8rem/1.2 Inter, system-ui, sans-serif; color: #f3efe4; background: linear-gradient(0deg, rgba(11, 22, 38, .85), rgba(11, 22, 38, 0)); text-align: left; }

/* ---- Filtro de categorías del blog ---- */
.kl-chipbar { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.kl-chip { min-height: 44px; padding: .45rem 1rem; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #cbd5e1; font: 600 .85rem/1 Inter, system-ui, sans-serif; border-radius: 2px; cursor: pointer; }
.kl-chip:hover { border-color: #d4b45f; color: #fff; }
.kl-chip[aria-pressed="true"] { background: #d4b45f; border-color: #d4b45f; color: #0b1626; }

/* ---- Atajos por ciudad en la home ---- */
.kl-quick { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; font: 500 .95rem/1.4 Inter, system-ui, sans-serif; color: #cbd5e1; }
.kl-quick span { color: #94a3b8; }
.kl-quick a { display: inline-block; padding: .55rem 0; color: #f3efe4; text-decoration: underline; text-decoration-color: rgba(212, 180, 95, .5); text-underline-offset: 5px; }
.kl-quick a:hover { color: #d4b45f; text-decoration-color: #d4b45f; }

/* ---- Áreas táctiles más grandes en pie de página ---- */
footer a, footer button { display: inline-block; padding-top: .3rem; padding-bottom: .3rem; }