/* =========================================================
   frame.css — marco fijo: topbar, riel lateral / menú overlay, sello CTA, dock móvil, preview
   El fondo del marco alterna Carbon/Raw según la sección (body[data-frame]).
   ========================================================= */

body { --frame-bg: transparent; --frame-fg: var(--raw); --frame-muted: var(--raw); --frame-line: rgb(244 244 244 / .34); --frame-focus: var(--yellow); --frame-hi: var(--yellow); }
body[data-frame="dark"]  { --frame-bg: var(--carbon); --frame-fg: var(--raw);    --frame-muted: var(--zinc);  --frame-line: var(--steel); --frame-focus: var(--yellow); --frame-hi: var(--yellow); }
body[data-frame="light"] { --frame-bg: var(--raw);    --frame-fg: var(--carbon); --frame-muted: var(--steel); --frame-line: var(--steel); --frame-focus: var(--carbon); --frame-hi: var(--rust); }
body.is-menu-open        { --frame-bg: var(--carbon); --frame-fg: var(--raw);    --frame-muted: var(--zinc);  --frame-line: var(--steel); --frame-focus: var(--yellow); --frame-hi: var(--yellow); }

.topbar, .nav { color: var(--frame-fg); --focus: var(--frame-focus); }

/* ---------- Topbar ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; height: var(--bar-h); z-index: var(--z-topbar); display: flex; align-items: center; gap: 1rem;
  padding: 0 var(--gutter) 0 calc(var(--rail-w) + var(--gutter)); background: var(--frame-bg); border-bottom: 1px solid var(--frame-line);
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); }
.brand { display: flex; align-items: center; min-height: 44px; line-height: 0; }
.brand .logo { width: 140px; height: auto; }
.logo--light { display: none; }
body[data-frame="light"] .logo--dark { display: none; }
body[data-frame="light"] .logo--light { display: block; }
body.is-menu-open .logo--dark { display: block; }
body.is-menu-open .logo--light { display: none; }

.topbar__label { display: none; color: var(--frame-muted); }
.topbar__label b { font-weight: 500; color: var(--frame-hi); margin-right: .7em; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.topbar__tel { display: none; font: 500 .9375rem var(--f-ui); letter-spacing: .06em; min-height: 44px; align-items: center; gap: .55em; }
.topbar .btn { display: none; }
.burger { display: grid; place-items: center; width: 48px; height: 48px; margin-right: -8px; color: var(--frame-fg); }
.burger .i { width: 28px; height: 28px; }
.burger .i--close { display: none; }
body.is-menu-open .burger .i--open { display: none; }
body.is-menu-open .burger .i--close { display: block; }

/* ---------- Nav: overlay en mobile / riel en desktop ---------- */
.nav__brand, .nav__foot { display: none; }
.nav__list { display: grid; }
.nav__link { display: flex; align-items: baseline; gap: .9rem; min-height: 44px; padding: 6px 0; }
.nav__n { font: 500 .8125rem var(--f-ui); color: var(--frame-muted); font-variant-numeric: tabular-nums; min-width: 1.8em; }
.nav__t { position: relative; font: 500 .875rem var(--f-ui); text-transform: uppercase; letter-spacing: .1em; }
.nav__t::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-base) var(--ease-out); }
.nav__link:hover .nav__t::after, .nav__link:focus-visible .nav__t::after, .nav__link[aria-current="true"] .nav__t::after { transform: scaleX(1); }
.nav__link[aria-current="true"] .nav__n { color: var(--frame-hi); }
.nav__social { display: inline-flex; align-items: center; gap: .6em; font: 500 .8125rem var(--f-ui); letter-spacing: .06em; min-height: 44px; }
.nav__social .i { width: 20px; height: 20px; }

@media (max-width: 1023.98px) {
  .nav { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--carbon); color: var(--raw); display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(var(--bar-h) + 28px) var(--gutter) max(24px, env(safe-area-inset-bottom)); overflow-y: auto;
    visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease-io), visibility 0s linear .6s; }
  .nav.is-open { visibility: visible; clip-path: inset(0); transition: clip-path .6s var(--ease-io), visibility 0s; }
  .nav__link { align-items: center; gap: 1.1rem; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--steel); }
  .nav__t { font: 700 clamp(2rem, 9.5vw, 3.6rem)/1 var(--f-display); letter-spacing: -.03em; }
  .nav__t::after { display: none; }
  .nav__n { color: var(--zinc); }
  .nav__foot { display: grid; gap: .25rem; margin-top: 2rem; }
  .nav__foot .meta { color: var(--zinc); }
  .js .nav__link { opacity: 0; transform: translate3d(0, 22px, 0); }
  .js .nav.is-open .nav__link { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms + 260ms); }
}

@media (min-width: 768px) { .brand .logo { width: 160px; } }

@media (min-width: 1024px) {
  .topbar .brand { display: none; }
  .topbar__label { display: block; }
  .topbar__tel { display: inline-flex; }
  .topbar .btn { display: inline-flex; }
  .burger { display: none; }

  .nav { position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: calc(var(--z-topbar) + 1); display: flex; flex-direction: column; justify-content: space-between;
    background: var(--frame-bg); border-right: 1px solid var(--frame-line);
    transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); }
  .nav__brand { display: flex; align-items: center; height: var(--bar-h); padding-inline: 20px; border-bottom: 1px solid var(--frame-line); }
  .nav__brand .logo { width: 132px; }
  .nav__list { flex: 1; align-content: center; padding: 24px 20px; gap: 2px; }
  .nav__foot { display: grid; gap: 10px; padding: 24px 20px 32px; border-top: 1px solid var(--frame-line); }
  .nav__foot .meta { color: var(--frame-muted); font-size: .75rem; }
  /* En el riel solo va el icono de Instagram (el nombre accesible sale del aria-label); el @perfil sigue visible en el menú móvil */
  .nav__social { justify-self: start; min-width: 44px; }
  .nav__social span { display: none; }
}

/* ---------- Sello CTA circular (única excepción al 0px: eco del isotipo) ---------- */
.sticker { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-sticker); display: none; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: var(--yellow); color: var(--carbon);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out); --focus: var(--carbon); }
.sticker .ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 24s linear infinite; }
.sticker .i { width: 30px; height: 30px; stroke-width: 2; transition: transform var(--t-base) var(--ease-out); }
.sticker:hover { transform: scale(1.06); }
.sticker:hover .i { transform: translate(3px, -3px); }
.sticker:hover .ring { animation-duration: 8s; }
.sticker:focus-visible { outline-color: var(--raw); }
.sticker.is-hidden { opacity: 0; pointer-events: none; transform: scale(.8); }
@media (min-width: 768px) { .sticker { display: grid; bottom: 104px; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Dock móvil (70% del tráfico es móvil) ---------- */
.dock { position: fixed; inset: auto 0 0 0; z-index: var(--z-dock); display: grid; grid-template-columns: 1fr 1.5fr; background: var(--carbon); border-top: 1px solid var(--steel);
  padding-bottom: env(safe-area-inset-bottom); transform: translate3d(0, 100%, 0); transition: transform .45s var(--ease-out); --focus: var(--yellow); }
.dock.is-visible { transform: none; }
.dock a { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 60px; font: 700 1.2rem var(--f-ui); text-transform: uppercase; letter-spacing: .02em; }
.dock__call { color: var(--raw); }
.dock__cta { background: var(--blue); color: var(--carbon); }
@media (min-width: 768px) { .dock { display: none; } }

/* ---------- Vista previa de producto (solo puntero fino) ---------- */
.preview { position: fixed; left: 0; top: 0; z-index: var(--z-preview); width: 340px; aspect-ratio: 4 / 3; pointer-events: none; opacity: 0; background: var(--steel); overflow: hidden; transition: opacity var(--t-base) var(--ease-out); }
.preview.is-on { opacity: 1; }
.preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity .35s var(--ease-out), transform .7s var(--ease-out); }
.preview img.is-active { opacity: 1; transform: none; }
@media (hover: none), (pointer: coarse) { .preview { display: none; } }