/* Estilos que dependen del CMS (diseño global editable, vista previa, campos nuevos). Va al final. */
body { background: var(--paper); color: var(--ink); }
h1, h2, h3, .logo, .hero-title, .section-title, .page-title, .ig-logo, .footer-claim { font-family: var(--font-heading, var(--font)); }

/* Hero administrable */
.hero-bg { background-image: var(--hero-img, url('../assets/baku/web/baku-09.jpg')); background-position: var(--hero-pos, 50% 40%); background-size: cover; background-repeat: no-repeat; background-color: #1b1b1d; }
/* dos fotos en la portada */
.hero-bg.is-multi { background: #111 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.hero-bg.is-multi .hb { background-image: var(--i); background-size: cover; background-position: var(--hero-pos, 50% 40%); background-repeat: no-repeat; background-color: #1b1b1d; }
.hero-bg.is-fade { display: block; }
/* fundido lento + zoom casi imperceptible (efecto "Ken Burns") */
.hero-bg.is-fade .hb { position: absolute; inset: 0; opacity: 0; transform: scale(1.02); transition: opacity 2.6s cubic-bezier(.45, 0, .2, 1); will-change: opacity, transform; backface-visibility: hidden; }
.hero-bg.is-fade .hb.on { opacity: 1; z-index: 2; }
.hero-bg.is-fade .hb.leaving { opacity: 0; z-index: 1; }
.hero-bg.is-fade .hb.on, .hero-bg.is-fade .hb.leaving { animation: heroKB 14s cubic-bezier(.3, .1, .3, 1) both; }
.hero-bg.is-fade .hb:nth-child(even).on, .hero-bg.is-fade .hb:nth-child(even).leaving { animation-name: heroKB2; }
@keyframes heroKB { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1.4%, -.9%, 0); } }
@keyframes heroKB2 { from { transform: scale(1.1) translate3d(1.2%, .8%, 0); } to { transform: scale(1.02) translate3d(0, 0, 0); } }
@media (max-width: 700px) {
  .hero-bg.is-multi .hb { background-image: var(--im, var(--i)); }
  .hero-bg.is-split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hero-bg.is-fade .hb { transition: none; transform: none; animation: none !important; } }
@media (max-width: 700px) { .hero-bg { background-image: var(--hero-img-m, var(--hero-img, url('../assets/baku/web/baku-09.jpg'))); } }
.hero-overlay { opacity: var(--hero-ov, 1); }

/* Colores globales */
.site-header { background: color-mix(in srgb, var(--header-bg, #ffffff) 96%, transparent); }
.site-footer { background: var(--footer-bg, #0b0b0c); color: var(--footer-text, #ffffff); }
.card-media, .cat-ph { background-color: var(--surface, #f1f0ee); }
.card-media { aspect-ratio: var(--card-ratio, 1 / 1.25); }
.section-title { color: var(--ink); }

/* Radios y ancho */
.card-media, .cat, .rv-card, .rv-photo, .pd-main, .pd-thumb, .btn-brown, .btn-light, .btn-ghost, .btn-outline, .btn-solid, .ig-photo, .card-add, .search-results a, .cart-drawer, .sheet, .modal-card, .fld input, .perk, .faq, .join-form { border-radius: var(--radius, 0); }
.new-in { max-width: var(--content-max, 1320px); }
.page { max-width: min(var(--content-max, 1320px), 1120px); }
html[data-btn="outline"] .btn-brown, html[data-btn="outline"] .btn-light, html[data-btn="outline"] .btn-solid { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
html[data-btn="outline"] .hero .btn-light { color: #fff; border-color: #fff; }

/* Elementos nuevos del catálogo */
.logo-img { height: 30px; width: auto; display: block; }
.price s { color: var(--muted); font-weight: 400; margin-right: 6px; }
.tag-promo { background: var(--accent); color: #0b0b0c; }
.pd-gallery.single { grid-template-columns: 1fr; }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-desc { font-size: 14px; line-height: 1.6; color: #55555a; margin: 12px 0 14px; }
.pd-copy p, .pd-copy li { font-size: 13px; line-height: 1.7; color: #55555a; margin-bottom: 8px; }
.pd-copy ul.plain { padding-left: 18px; list-style: disc; }
.co-error { color: #c8312b; font-size: 13px; margin-top: 14px; }

/* Vista previa del borrador */
.preview-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: #ff7a00; color: #0b0b0c; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-align: center; padding: 9px 12px; }

/* ---------- Logo (imagen con fondo transparente) ---------- */
.logo.has-img { padding-right: 0; transform: none; font-size: 0; line-height: 0; display: inline-flex; align-items: center; }
.logo.has-img::after { display: none; }
.logo.has-img:hover { transform: none; }
.logo-img { display: block; height: 54px; width: auto; filter: drop-shadow(0 2px 8px rgba(255,122,0,.28)); transition: transform .5s cubic-bezier(.34,1.56,.64,1), filter .4s, height .4s cubic-bezier(.22,1,.36,1); animation: logoIn .9s cubic-bezier(.22,1,.36,1) both .15s; }
.site-header.is-scrolled .logo-img { height: 44px; }
.logo:hover .logo-img { transform: scale(1.07) rotate(-1.5deg); filter: drop-shadow(0 4px 14px rgba(255,122,0,.5)); }
@keyframes logoIn { from { opacity: 0; transform: translateY(-10px) scale(.9); } to { opacity: 1; transform: none; } }
.co-top .logo-img { height: 56px; }
.footer-brand span.is-img { transform: translateY(calc((1 - var(--p)) * 40%)); line-height: 0; font-size: 0; padding: 0; }
.footer-brand span.is-img img { height: min(100%, 34vw); max-height: 420px; width: auto; max-width: 100%; display: block; filter: drop-shadow(0 6px 22px rgba(255,122,0,.3)); padding: 20px; box-sizing: border-box; }
.site-footer.is-static .footer-brand span.is-img { transform: none; }
.site-footer.is-static .footer-brand span.is-img img { height: auto; width: min(78vw, 520px); }
.ig-logo img { height: clamp(54px, 9vw, 132px); width: auto; display: block; filter: drop-shadow(0 6px 22px rgba(255,122,0,.3)); }
.ig-logo:has(img)::after { display: none; }
.ig-logo:has(img) { transform: none; }
@media (max-width: 900px) { .logo-img { height: 42px; } .site-header.is-scrolled .logo-img { height: 36px; } }
@media (prefers-reduced-motion: reduce) { .logo-img { animation: none; } }

/* Submenú de ayuda dentro del menú móvil */
.nav-sub { display: none; }
@media (max-width: 900px) {
  .nav-sub.is-open { display: grid; padding: 4px 0 10px 16px; border-bottom: 1px solid #eee; animation: subIn .45s cubic-bezier(.22,1,.36,1) both; }
  .main-nav .nav-sub a { padding: 13px 0; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; border: 0; color: #55555a; }
  .main-nav .nav-sub a::after { display: none; }
  #megaBtn::before { content: '+'; float: right; font-weight: 400; font-size: 22px; line-height: 1; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
  #megaBtn[aria-expanded="true"]::before { transform: rotate(45deg); }
  #mega { display: none !important; }
}
@keyframes subIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }