/* ==========================================================================
   RULO CÁMARAS — sitio público
   Sistema visual: PIXELMORFISMO
   Cámara digital compacta de los 2000 × pixel art × gaming retro × web editorial.
   No es "vintage": es contemporáneo con memoria de interfaz. Layout editorial
   (tipografía grande, mucho aire, jerarquía dura) + cromo de cámara digital
   (visor con brackets, HUD monoespaciado, sombras duras, bordes pixel).
   Paleta: negro + rojo (#BE1704) sobre papel. El rojo es la única acción/énfasis.
   Verde solo en el glifo de WhatsApp (iconografía de marca). Todo el contenido
   sale de /api/bootstrap — nada inventado.
   ========================================================================== */

:root {
  /* --- Superficie --- */
  --paper: #e7e3d7;          /* blanco roto cálido, fondo general */
  --paper-2: #ded9ca;        /* mount / superficie hundida */
  --paper-3: #d3cdbb;
  --ink: #131313;            /* negro, texto y trazos */
  --ink-2: #48453f;          /* texto secundario */
  --ink-3: #85837b;          /* texto terciario / faint */
  --line: #131313;           /* línea dura (borde pixel) */
  --line-soft: rgba(19, 19, 19, 0.16);

  /* --- Acento: rojo (sistema, no decoración) --- */
  --red: #be1704;           /* acción principal, énfasis, estado REC */
  --red-deep: #8f1103;
  --shutter: var(--red);     /* alias histórico */
  --shutter-ink: #fff;
  --lcd: var(--red);         /* indicador/estado — rojo REC */
  --date: var(--red);        /* índices y labels tipo LCD */
  --wa: #3fbf4a;             /* verde: SOLO el glifo de WhatsApp */
  --screen: #141414;         /* pantalla negra, paneles "visor" */
  --screen-ink: #ededed;

  /* --- Métricas --- */
  --px: 4px;                 /* unidad pixel base */
  --container: 1320px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --shadow-hard: 5px 5px 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 var(--ink);

  --font-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-pixel: 'Silkscreen', 'DM Mono', monospace;

  --grain-blend: multiply;
  --grain-opacity: 0.4;
  --map-filter: grayscale(0.4) contrast(1.05) brightness(0.96);
}

/* ==========================================================================
   MODO OSCURO — se invierte papel/tinta manteniendo el rojo de marca.
   theme-init.js pone data-theme="dark" o "light" en <html> antes de pintar.
   ========================================================================== */
:root[data-theme='dark'] {
  --paper: #14130f;
  --paper-2: #1e1c17;
  --paper-3: #29261f;
  --ink: #ece6d9;
  --ink-2: #9c937f;
  --ink-3: #6b6353;
  --line: #ece6d9;
  --line-soft: rgba(236, 230, 217, 0.15);

  --red: #dd3018;
  --red-deep: #b41f0c;

  --shadow-hard: 4px 4px 0 rgba(0, 0, 0, 0.55);
  --shadow-hard-sm: 3px 3px 0 rgba(0, 0, 0, 0.55);

  --grain-blend: overlay;
  --grain-opacity: 0.18;
  --map-filter: grayscale(0.55) contrast(0.95) brightness(0.82);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

::selection { background: var(--shutter); color: #fff; }

:focus-visible {
  outline: var(--px) solid var(--shutter);
  outline-offset: var(--px);
}

/* Renderiza los SVG "pixel" sin suavizado (bordes duros de verdad) */
.px { shape-rendering: crispEdges; }

/* --- Grano: textura fija muy sutil, mata el look "plano de IA" --- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* --- Cinta de película en los márgenes izquierdo y derecho de toda la web.
   La tira es siempre oscura; los "agujeros" toman el color del fondo (var(--paper))
   así se ven troquelados en claro y en oscuro. Se oculta en mobile. --- */
.filmstrip {
  position: fixed;
  top: 0; bottom: 0;
  width: 26px;
  z-index: 240;
  pointer-events: none;
  display: none;
  background:
    radial-gradient(circle at 50% 50%, var(--paper) 0 4.5px, transparent 5.5px) 50% 0 / 100% 20px repeat-y,
    #121212;
}
:root[data-theme='dark'] .filmstrip { background:
  radial-gradient(circle at 50% 50%, var(--paper) 0 4.5px, transparent 5.5px) 50% 0 / 100% 20px repeat-y,
  #050505;
}
.filmstrip--l { left: 0; box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.3); }
.filmstrip--r { right: 0; box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.3); }

@media (min-width: 768px) { .filmstrip { display: block; width: 20px; } }
@media (min-width: 1024px) { .filmstrip { width: 26px; } }

/* ==========================================================================
   Cursor — crosshair estilo Counter-Strike: cruz negra (#000), líneas rectas,
   grosor medio, sin círculo, sin color. Reemplaza el cursor en toda la web.
   Los brazos se separan un poco al pasar sobre algo interactivo (como la
   "inexactitud" dinámica del crosshair de CS). Solo con puntero fino.
   ========================================================================== */
.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  * { cursor: none !important; }

  .cursor {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: 26px; height: 26px;
    z-index: 100000;
    pointer-events: none;
    will-change: transform;
    transform: translate(-50%, -50%);
  }
  /* 4 brazos rectos. --gap controla la separación central (CS-style).
     MODO DÍA  = cruz NEGRA (halo blanco tenue).
     MODO OSCURO = cruz BLANCA (halo negro tenue).
     El color de la cruz es el `background`; el halo va como box-shadow para que
     no dependa del orden de pintado (el ::after con z-index:-1 hacía que el
     halo tapara el brazo y la cruz se viera del color equivocado). */
  .cursor i {
    --gap: 4px;
    --arm: 9px;
    --w: 3px;
    position: absolute;
    top: 50%; left: 50%;
    background: #000;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
    transition: transform 0.09s ease;
  }
  .cursor i:nth-child(1) { width: var(--w); height: var(--arm); transform: translate(-50%, calc(-100% - var(--gap))); } /* arriba */
  .cursor i:nth-child(2) { width: var(--w); height: var(--arm); transform: translate(-50%, var(--gap)); }                /* abajo */
  .cursor i:nth-child(3) { height: var(--w); width: var(--arm); transform: translate(calc(-100% - var(--gap)), -50%); } /* izq */
  .cursor i:nth-child(4) { height: var(--w); width: var(--arm); transform: translate(var(--gap), -50%); }                /* der */

  .cursor.is-active i { --gap: 7px; }

  /* Modo oscuro: cruz blanca, halo negro. */
  :root[data-theme='dark'] .cursor i {
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85);
  }
}

/* ==========================================================================
   Piezas reutilizables
   ========================================================================== */

/* Label monoespaciado / técnico */
.tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tag--pixel {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
}

/* Chip LCD (estado) */
.lcd {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.lcd__dot {
  width: 7px; height: 7px;
  background: var(--lcd);
  box-shadow: 0 0 0 2px rgba(228, 0, 43, 0.22);
  animation: blink 1.6s steps(1) infinite;
}

/* Botón "disparador" — acción principal */
.shutter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--shutter);
  color: var(--shutter-ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.95rem 1.5rem;
  border: var(--px) solid var(--ink);
  box-shadow: var(--shadow-hard);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}
.shutter-btn svg { width: 16px; height: 16px; }
.shutter-btn:hover { background: var(--ink); color: var(--paper); }
.shutter-btn:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--ink);
}
.shutter-btn--ghost {
  background: transparent;
  color: var(--ink);
}
.shutter-btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* WhatsApp: siempre botón negro, texto blanco, glifo verde. */
.shutter-btn--wa { background: #131313; color: #fff; border-color: #131313; }
.shutter-btn--wa svg { color: var(--wa); }
.shutter-btn--wa:hover { background: #000; color: #fff; border-color: var(--wa); }
.shutter-btn--wa:hover svg { color: var(--wa); }

/* Botón de icono */
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: transparent;
  border: var(--px) solid transparent;
  color: var(--ink);
}
.iconbtn svg { width: 18px; height: 18px; }
.iconbtn:hover { border-color: var(--ink); }

/* Marco con esquinas de bracket (visor) */
.brackets { position: relative; }
.brackets > .bk {
  position: absolute;
  width: 16px; height: 16px;
  border: var(--px) solid var(--ink);
  pointer-events: none;
}
.bk--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.bk--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.bk--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.bk--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ==========================================================================
   Boot screen (carga inicial)
   ========================================================================== */
.boot-screen {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
.boot-screen__dot {
  width: 10px; height: 10px;
  background: var(--lcd);
  animation: blink 0.9s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ==========================================================================
   Header
   ========================================================================== */
.hd {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: var(--px) solid var(--ink);
}
/* Compensa la altura del header fijo para que el contenido no quede tapado. */
body { padding-top: var(--hd-h, 62px); }
@media (max-width: 860px) { body { padding-top: var(--hd-h, 66px); } }
.hd__bar {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-right: auto;
}
.wordmark__dot {
  width: 0.42em; height: 0.42em;
  background: var(--shutter);
  margin: 0 0.14em;
  align-self: center;
  animation: pwr 2.4s steps(1) infinite;
}
@keyframes pwr { 0%, 78% { opacity: 1; } 80%, 100% { opacity: 0.25; } }

.hd__nav {
  display: flex;
  gap: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hd__nav a {
  position: relative;
  padding: 0.3rem 0;
  color: var(--ink-2);
  transition: color 0.14s ease;
}
.hd__nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -0.3rem;
  width: 0; height: var(--px);
  background: var(--shutter);
  transition: width 0.18s ease;
}
.hd__nav a:hover,
.hd__nav a[aria-current="page"] { color: var(--ink); }
.hd__nav a:hover::after,
.hd__nav a[aria-current="page"]::after { width: 100%; }

.hd__social { display: flex; gap: 0.5rem; }
.hd__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  background: #131313;
  color: #fff;
  border: var(--px) solid var(--ink);
  box-shadow: var(--shadow-hard-sm);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.14s ease;
}
.hd__btn svg { width: 15px; height: 15px; }
.hd__btn--wa svg { color: var(--wa); }
.hd__btn--ig svg { color: #fff; }
.hd__btn:hover { background: #000; border-color: var(--wa); }
.hd__btn--ig:hover { border-color: var(--red); }
.hd__btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

/* Botones de ícono del header (tema, menú) */
.hd__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  background: var(--paper);
  color: var(--ink);
  border: var(--px) solid var(--ink);
  transition: background 0.14s ease, transform 0.1s ease;
}
.hd__icon svg { width: 17px; height: 17px; }
.hd__icon:hover { background: var(--paper-2); }
.hd__icon:active { transform: translate(2px, 2px); }

/* Toggle = flash de cámara. En modo oscuro el flash aparece TACHADO. */
.hd__theme { position: relative; overflow: hidden; }
.hd__theme svg { transition: opacity 0.14s ease; }
:root[data-theme='dark'] .hd__theme svg { opacity: 0.45; }
.hd__theme::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 3px;
  background: var(--red);
  transform: translate(-50%, -50%) rotate(-45deg) scaleX(0);
  transform-origin: center;
  transition: transform 0.16s ease;
}
:root[data-theme='dark'] .hd__theme::after {
  transform: translate(-50%, -50%) rotate(-45deg) scaleX(1);
}

.hd__menu { display: none; }

.menu { display: none; }

/* ==========================================================================
   Hero / visor
   ========================================================================== */
.hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 2.5rem) var(--gutter) clamp(2rem, 6vw, 4rem);
}
.hero__frame {
  position: relative;
  border: var(--px) solid var(--ink);
  background:
    linear-gradient(var(--paper-2), var(--paper-2)) padding-box;
  padding: clamp(1rem, 3vw, 1.6rem);
  box-shadow: var(--shadow-hard);
}

/* --- HUD del visor: REC · lugar · batería --- */
.hero__hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-bottom: clamp(1rem, 3vw, 1.5rem);
  border-bottom: 2px dashed var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero__rec {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--red);
  font-weight: 500;
}
.hero__rec-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  animation: blink 1.1s steps(1) infinite;
}
.hero__hud .tag { white-space: nowrap; }
.hero__batt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  color: var(--ink-2);
}
.hero__batt svg { width: 22px; height: 13px; color: var(--ink-2); }

/* --- Gauge inferior del visor: timecode · regla · HD --- */
.hero__gauge {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  padding: clamp(0.85rem, 2.5vw, 1.15rem) 0;
  border-top: 2px dashed var(--line-soft);
  border-bottom: 2px dashed var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.hero__gauge [data-tc] { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hero__ruler {
  flex: 1;
  height: 16px;
  position: relative;
  background: repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 14px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hero__ruler::after {
  content: '';
  position: absolute;
  left: 50%; top: -2px;
  width: 2px; height: 20px;
  background: var(--red);
  transform: translateX(-50%);
}

.hero__stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 5vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 5vw, 3rem) 0 clamp(1.25rem, 4vw, 2rem);
}
.hero__title {
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: clamp(2rem, 9vw, 4.9rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  -webkit-font-smoothing: none;
}
.hero__title b {
  display: inline-block;
  width: 0.5em; height: 0.5em;
  background: var(--red);
  margin-left: 0.16em;
  vertical-align: baseline;
}

.hero__lead {
  max-width: 42ch;
  margin: clamp(1.1rem, 3vw, 1.8rem) 0 0;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
}
.hero__lead a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
  transition: color 0.14s ease;
}
.hero__lead a:hover { color: var(--red); }
.hero__cam {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(1.25rem, 4vw, 1.75rem);
}
.hero__cta .tag { max-width: 30ch; }

/* ==========================================================================
   Cámara 3D del hero — compacta plateada estilo point-and-shoot de los 2000,
   flotando y girando 360° sobre una mini plataforma octogonal. 100% CSS 3D,
   sin dependencias. Sombreado de caras fijo (low-poly con luz "horneada").
   ========================================================================== */
.cam3d-wrap {
  --u: 0.82;                     /* escala global (sube en desktop) */
  --w: calc(196px * var(--u));   /* ancho cuerpo */
  --h: calc(118px * var(--u));   /* alto cuerpo */
  --d: calc(44px * var(--u));    /* profundidad cuerpo */
  --barR: calc(33px * var(--u)); /* radio del barril de lente */
  --barL: calc(27px * var(--u)); /* largo del barril */
  /* Color del plástico del cuerpo. main.js lo cambia en cada carga
     (rojo/rosa/violeta/azul/dorado). Si el JS no corre, queda grafito. */
  --cam-tint: #5b5f66;
  --tint-hi: color-mix(in srgb, var(--cam-tint) 40%, #f2f3f4);
  --tint-mid: color-mix(in srgb, var(--cam-tint) 74%, #dfe1e3);
  --tint-lo: color-mix(in srgb, var(--cam-tint) 84%, #111318);
  --tint-edge: color-mix(in srgb, var(--cam-tint) 62%, #05070a);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1500px;
  perspective-origin: 50% 46%;
}
/* Escenario de tamaño fijo: garantiza que cámara y base queden centradas y
   equilibradas siempre, sin importar el barrido de la rotación. */
.cam3d__rig {
  position: relative;
  width: calc(var(--w) * 2);
  height: calc(var(--h) * 2.35);
  transform-style: preserve-3d;
}
.cam3d {
  position: absolute;
  left: 50%; top: 34%;
  width: var(--w); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  transform-style: preserve-3d;
  transform: rotateX(-8deg);
  animation: cam-bob 6s ease-in-out infinite;
}
.cam3d__spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: cam-orbit 20s linear infinite;
}
.cam3d__face {
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 0 0 2px rgba(0, 0, 0, 0.16);
}
.cam3d__face--front,
.cam3d__face--back {
  width: var(--w); height: var(--h); left: 0; top: 0;
}
.cam3d__face--front {
  transform: translateZ(calc(var(--d) / 2));
  background: linear-gradient(125deg, var(--tint-hi) 0%, var(--tint-mid) 40%, var(--tint-hi) 50%, var(--tint-lo) 82%, var(--tint-mid) 100%);
}
.cam3d__face--back {
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  background: linear-gradient(125deg, var(--tint-mid), var(--tint-lo));
}
.cam3d__face--right,
.cam3d__face--left {
  width: var(--d); height: var(--h); top: 0; left: calc(50% - var(--d) / 2);
  background: linear-gradient(90deg, var(--tint-mid), var(--tint-lo) 92%);
}
.cam3d__face--right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.cam3d__face--left  { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.cam3d__face--top,
.cam3d__face--bottom {
  width: var(--w); height: var(--d); left: 0; top: calc(50% - var(--d) / 2);
}
.cam3d__face--top {
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
  background: linear-gradient(180deg, var(--tint-hi), var(--tint-mid));
}
.cam3d__face--bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--h) / 2));
  background: linear-gradient(180deg, var(--tint-edge), #0a0c10);
}

/* --- Detalles cara frontal (simétricos: visor y flash arriba, lente al centro) --- */
.cam3d__vf {
  position: absolute; top: 10%; left: 8%;
  width: 16%; height: 14%;
  background: linear-gradient(135deg, #2b2f36, #0c0e11);
  box-shadow: inset 0 0 0 2px #dcdfe2, 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.cam3d__flash {
  position: absolute; top: 10%; right: 8%;
  width: 20%; height: 14%;
  background: repeating-linear-gradient(90deg, #f7f5ec 0 3px, #dad7c7 3px 6px);
  box-shadow: inset 0 0 0 2px #bcc1c6, 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.cam3d__lamp {
  position: absolute; top: 30%; right: 11%;
  width: 5.5%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff9a9a, #c1121f 72%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.cam3d__grip {
  position: absolute; top: 5%; right: 2%; bottom: 5%;
  width: 10%;
  background: radial-gradient(rgba(0, 0, 0, 0.32) 1px, transparent 1.5px) 0 0 / 5px 5px,
    linear-gradient(90deg, var(--tint-lo), var(--tint-mid));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* --- Barril de lente octogonal, telescópico, centrado en la cara frontal --- */
.cam3d__lens {
  position: absolute;
  left: calc(50% - var(--barR));
  top: calc(50% - var(--barR));
  width: calc(var(--barR) * 2);
  height: calc(var(--barR) * 2);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--d) / 2 + var(--barL) / 2));
}
.cam3d__seg {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--barR) * 0.83);
  height: var(--barL);
  margin: calc(var(--barL) / -2) 0 0 calc(var(--barR) * -0.415);
  background: linear-gradient(90deg, #202329, #565b62 42%, #2b2e33 68%, #40444a);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.cam3d__seg:nth-child(1) { transform: rotateZ(0deg)   translateY(var(--barR)) rotateX(-90deg); }
.cam3d__seg:nth-child(2) { transform: rotateZ(45deg)  translateY(var(--barR)) rotateX(-90deg); }
.cam3d__seg:nth-child(3) { transform: rotateZ(90deg)  translateY(var(--barR)) rotateX(-90deg); }
.cam3d__seg:nth-child(4) { transform: rotateZ(135deg) translateY(var(--barR)) rotateX(-90deg); }
.cam3d__seg:nth-child(5) { transform: rotateZ(180deg) translateY(var(--barR)) rotateX(-90deg); }
.cam3d__seg:nth-child(6) { transform: rotateZ(225deg) translateY(var(--barR)) rotateX(-90deg); }
.cam3d__seg:nth-child(7) { transform: rotateZ(270deg) translateY(var(--barR)) rotateX(-90deg); }
.cam3d__seg:nth-child(8) { transform: rotateZ(315deg) translateY(var(--barR)) rotateX(-90deg); }
.cam3d__glass {
  position: absolute; inset: 0;
  border-radius: 50%;
  transform: translateZ(calc(var(--barL) / 2));
  background: radial-gradient(circle at 38% 32%, #9ab0bf 0 6%, #40576a 22%, #16222c 52%, #05090d 84%);
  box-shadow: inset 0 0 0 4px #cbcfd3, inset 0 0 0 6px #16181b, inset 0 0 18px rgba(0, 0, 0, 0.8);
}
.cam3d__glass::after {
  content: '';
  position: absolute; top: 14%; left: 18%;
  width: 30%; height: 22%;
  border-radius: 50%;
  transform: rotate(-18deg);
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
}
.cam3d__lens::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  transform: translateZ(calc(var(--barL) / -2));
  box-shadow: 0 0 0 3px #bcc1c6, 0 0 0 5px #6a6e73;
}

/* --- Detalles cara superior --- */
.cam3d__shutter {
  position: absolute; top: calc(50% - 11px); right: 22%;
  width: 22px; height: 22px; border-radius: 50%;
  transform: translateZ(4px);
  background: radial-gradient(circle at 34% 30%, #f6f7f8, #bfc4c9 58%, #83898f);
  box-shadow: 0 0 0 3px var(--red), 0 0 0 4px rgba(0, 0, 0, 0.45);
}
.cam3d__dial {
  position: absolute; top: calc(50% - 14px); right: 6%;
  width: 28px; height: 28px; border-radius: 50%;
  transform: translateZ(3px);
  background: repeating-conic-gradient(#3c3f44 0 9deg, #26282c 9deg 18deg);
  box-shadow: inset 0 0 0 3px #a6abb1, 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.cam3d__power {
  position: absolute; top: calc(50% - 4px); left: 16%;
  width: 15px; height: 8px;
  transform: translateZ(2px);
  background: linear-gradient(#e9ebed, #aab0b6);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.cam3d__mic {
  position: absolute; top: calc(50% - 1.5px); left: 34%;
  width: 14px; height: 3px;
  background: radial-gradient(rgba(0, 0, 0, 0.7) 40%, transparent 45%) 0 0 / 3px 3px;
}

/* --- Detalles cara trasera --- */
.cam3d__lcd {
  position: absolute; left: 7%; top: 13%;
  width: 58%; height: 72%;
  background:
    linear-gradient(135deg, #262a31 0%, #0c0e11 62%),
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.1) 47%, transparent 53%);
  background-blend-mode: screen;
  box-shadow: inset 0 0 0 3px #ccd0d4, 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.cam3d__lcd::after {
  content: '';
  position: absolute; right: 7%; top: 9%;
  width: 5px; height: 5px;
  background: var(--red);
}
.cam3d__pad {
  position: absolute; right: 9%; top: calc(50% - 14px);
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #d6dade, #9ba1a7);
  box-shadow: inset 0 0 0 7px rgba(0, 0, 0, 0.12), inset 0 0 0 8px #7e8389, 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.cam3d__btn {
  position: absolute; right: 11%;
  width: 12px; height: 8px;
  background: linear-gradient(#e6e8ea, #aab0b6);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.cam3d__btn--a { top: 11%; }
.cam3d__btn--b { bottom: 11%; }

/* --- Correa de mano: un lazo de cordón que cuelga de la esquina superior.
   Gira con la cámara y se balancea apenas. Detalle ultra simple. --- */
.cam3d__strap {
  position: absolute;
  top: calc(var(--h) * -0.14);
  left: calc(var(--w) * -0.12);
  width: calc(var(--w) * 0.34);
  height: calc(var(--h) * 0.85);
  border: 4px solid #171717;
  border-radius: 50% 50% 46% 46% / 62% 62% 30% 30%;
  background: transparent;
  transform: translateZ(calc(var(--d) / 2 - 4px)) rotate(-16deg);
  transform-origin: 76% 6%;
  animation: cam-strap 6s ease-in-out infinite;
}
@keyframes cam-strap {
  0%, 100% { transform: translateZ(calc(var(--d) / 2 - 4px)) rotate(-19deg); }
  50%      { transform: translateZ(calc(var(--d) / 2 - 4px)) rotate(-12deg); }
}

/* --- Mini plataforma octogonal low-poly (estática, la cámara flota encima) --- */
.cam3d__base {
  position: absolute;
  left: 50%; bottom: 13%;
  width: calc(var(--w) * 0.8);
  height: calc(var(--w) * 0.36);
  transform: translateX(-50%) rotateX(62deg);
  transform-style: preserve-3d;
}
.cam3d__base::before,
.cam3d__base-top {
  content: '';
  position: absolute; inset: 0;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.cam3d__base::before {
  background: linear-gradient(#6a6f74, #3c4044);   /* canto del pedestal */
  transform: translateY(9px) translateZ(-9px);
}
.cam3d__base-top {
  background: linear-gradient(150deg, #f0f2f4, #c1c5c9 52%, #9ea3a8);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.18), inset 0 0 0 5px rgba(255, 255, 255, 0.25);
}

/* --- Sombra de contacto sobre la plataforma --- */
.cam3d__shadow {
  position: absolute;
  left: 50%; bottom: calc(14% + var(--w) * 0.12);
  width: calc(var(--w) * 0.52);
  height: calc(var(--w) * 0.17);
  transform: translateX(-50%) rotateX(62deg);
  background: radial-gradient(ellipse at center, rgba(8, 8, 8, 0.38), transparent 72%);
  filter: blur(3px);
  animation: cam-shadow 6s ease-in-out infinite;
}

@keyframes cam-bob {
  0%, 100% { transform: rotateX(-8deg) translateY(-7px); }
  50%      { transform: rotateX(-8deg) translateY(7px); }
}
@keyframes cam-orbit {
  to { transform: rotateY(360deg); }
}
@keyframes cam-shadow {
  0%, 100% { opacity: 0.28; transform: translateX(-50%) rotateX(62deg) scale(0.9); }
  50%      { opacity: 0.44; transform: translateX(-50%) rotateX(62deg) scale(1.05); }
}

/* ==========================================================================
   Catálogo
   ========================================================================== */
.cat {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) var(--gutter) clamp(3rem, 9vw, 6rem);
  scroll-margin-top: 74px;
}
.cat__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding-bottom: 1rem;
  border-bottom: var(--px) solid var(--ink);
}
.cat__title {
  font-size: clamp(2rem, 6vw, 3.4rem);
  text-transform: uppercase;
}
.cat__count {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  margin: 0 0 0.35rem;
}
.cat__count [data-count] { color: var(--shutter); font-weight: 500; }

.cat__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}

/* mode dial — selector de categoría. Nunca hace wrap: si no entra, scrollea
   horizontal (importante en mobile, donde "CÁMARAS DIGITALES" es larga). */
.dial {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border: var(--px) solid var(--ink);
  box-shadow: var(--shadow-hard-sm);
  background: var(--paper);
}
.dial::-webkit-scrollbar { display: none; }
.dial__opt {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0.6rem 1rem;
  background: transparent;
  border: 0;
  border-right: var(--px) solid var(--ink);
  color: var(--ink-2);
  transition: background 0.12s ease, color 0.12s ease;
}
.dial__opt:last-child { border-right: 0; }
.dial__opt:hover { color: var(--ink); background: var(--paper-2); }
.dial__opt.is-on {
  background: var(--ink);
  color: var(--paper);
}

.cat__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cat__search input {
  width: 0;
  padding: 0;
  border: 0;
  border-bottom: var(--px) solid transparent;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink);
  outline: none;
  transition: width 0.25s ease, padding 0.25s ease, border-color 0.25s ease;
}
.cat__search.is-open input {
  width: min(52vw, 240px);
  padding: 0.35rem 0.2rem;
  border-bottom-color: var(--ink);
}
.cat__search input::placeholder { color: var(--ink-3); }

/* --- Grilla: 2 col (mobile) → 6 col (desktop) --- */
.cat__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.9rem, 2.4vw, 1.5rem) clamp(0.7rem, 2vw, 1.25rem);
}
.cat__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

/* --- Paginación del catálogo (todo dentro del mismo catálogo) --- */
.cat__pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin-top: clamp(2rem, 5vw, 3.25rem);
  border: var(--px) solid var(--ink);
  box-shadow: var(--shadow-hard-sm);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.cat__page {
  min-width: 40px;
  padding: 0.6rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  background: var(--paper);
  color: var(--ink-2);
  border: 0;
  border-right: var(--px) solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.cat__page:last-child { border-right: 0; }
.cat__page svg { width: 13px; height: 13px; }
.cat__page:hover:not(:disabled):not(.is-on) { background: var(--paper-2); color: var(--ink); }
.cat__page.is-on { background: var(--ink); color: var(--paper); font-weight: 500; }
.cat__page:disabled { opacity: 0.32; }
.cat__page--dots { opacity: 0.5; min-width: 28px; padding-inline: 0.35rem; }

/* ==========================================================================
   Tarjeta de producto
   ========================================================================== */
.pc {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
/* El atributo [hidden] pierde contra `.pc { display:flex }` por especificidad;
   esta regla lo restablece para que el filtro de categoría/búsqueda oculte de verdad. */
.pc[hidden] { display: none; }
.pc__frame {
  position: relative;
  background: var(--paper-2);
  border: var(--px) solid var(--ink);
  aspect-ratio: 1;
  overflow: hidden;
  transition: box-shadow 0.16s ease;
}
.pc__media { display: block; width: 100%; height: 100%; position: relative; }
.pc__media img,
.pc__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.55s ease;
}
.pc__slide { opacity: 0; }
.pc__slide.is-on { opacity: 1; }
/* fallback: si es una sola imagen (no .pc__slide) */
.pc__media > img:only-child { opacity: 1; }

.pc__dots {
  position: absolute;
  left: 0; right: 0; bottom: 5px;
  display: flex;
  justify-content: center;
  gap: 4px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.pc__dot {
  width: 5px; height: 5px;
  background: rgba(255, 255, 255, 0.55);
  outline: 1px solid rgba(19, 19, 19, 0.5);
}
.pc__dot.is-on { background: var(--red); }

.pc__ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--ink-3);
}
.pc__ph svg { width: 40%; height: 40%; }

.pc__idx {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-pixel);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--red);
  padding: 3px 5px 2px;
  z-index: 3;
}
.pc--off .pc__media img,
.pc--off .pc__slide { filter: grayscale(1); opacity: 0.45; }
.pc--off .pc__name,
.pc--off .pc__price { opacity: 0.6; }

/* Sello de disponibilidad (RESERVADA / VENDIDA) sobre la foto de la tarjeta.
   Abajo-izquierda para no chocar con el índice (arriba-izq), el toggle "+"
   (arriba-der en mobile) ni los dots del carrusel (abajo-centro). */
.pc__stamp {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 3;
  pointer-events: none;
  font-family: var(--font-pixel);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  padding: 4px 6px 3px;
}
.pc--reserved .pc__stamp { background: #b26a00; }
.pc--off .pc__stamp { background: var(--red); }

.pc__info {
  padding: 0.7rem 0.1rem 0;
}
.pc__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.pc__name span { display: block; color: var(--ink-2); font-weight: 600; }
.pc__price {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  margin: 0.35rem 0 0;
  font-variant-numeric: tabular-nums;
}
.pc__off-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Panel revelado (hover desktop / tap mobile) */
.pc__panel {
  border: var(--px) solid var(--ink);
  background: var(--screen);
  color: var(--screen-ink);
  padding: 0.9rem;
  display: grid;
  gap: 0.75rem;
}
.pc__panel-cat {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--red) 45%, #ffffff);
  margin: 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.pc__desc {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.5;
  margin: 0;
  white-space: pre-line;
  color: var(--screen-ink);
}
.pc__panel-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pc__wa, .pc__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0.7rem;
  border: 2px solid currentColor;
}
.pc__wa { background: #000; color: #fff; border-color: #000; }
.pc__wa svg { width: 13px; height: 13px; color: var(--wa); }
.pc__wa:hover { background: #000; color: #fff; border-color: var(--wa); }
.pc__more { color: var(--screen-ink); border-color: var(--screen-ink); }
.pc__more:hover { background: var(--screen-ink); color: var(--screen); }

.pc__toggle {
  position: absolute;
  right: 6px; bottom: calc(100% - 100%);
  display: none;
}

/* ---- Desktop: al hover, la descripción aparece AL COSTADO de la tarjeta,
   del lado que tiene más espacio libre (lo decide el JS con .pc--left/--right)
   y a la altura que queda visible (.pc--v-top/-mid/-bot). ---- */
@media (hover: hover) and (pointer: fine) {
  .pc__panel {
    position: absolute;
    width: 100%;
    max-height: 62vh;
    overflow-y: auto;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    box-shadow: var(--shadow-hard);
    /* En reposo el panel queda apilado sobre la tarjeta (invisible) para no
       generar scroll horizontal. Solo se desplaza al costado durante el hover. */
    left: 0; top: 0;
  }
  .pc:hover.pc--right .pc__panel { left: 100%; right: auto; width: 250px; max-width: 60vw; margin-left: 8px; }
  .pc:hover.pc--left .pc__panel  { right: 100%; left: auto; width: 250px; max-width: 60vw; margin-right: 8px; }
  .pc:hover.pc--v-mid .pc__panel { top: 50%; bottom: auto; transform: translateY(-50%); }
  .pc:hover.pc--v-bot .pc__panel { top: auto; bottom: 0; }

  .pc { transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .pc:hover { z-index: 40; transform: scale(1.03); }
  .pc:hover .pc__frame { box-shadow: var(--shadow-hard); }
  .pc:hover .pc__media > img:only-child { transform: scale(1.06); }
  .pc:hover .pc__dots { opacity: 1; }
  .pc:hover .pc__panel {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---- Touch: tap sobre la tarjeta = previsualizar (carrusel + descripción) ---- */
@media (hover: none), (pointer: coarse) {
  .pc__panel {
    display: none;
    box-shadow: var(--shadow-hard-sm);
  }
  .pc.is-open {
    grid-column: 1 / -1;
    position: relative;
    z-index: 3;
  }
  .pc.is-open .pc__frame {
    aspect-ratio: 4 / 3;
    box-shadow: var(--shadow-hard);
  }
  .pc.is-open .pc__panel {
    display: grid;
    animation: pc-panel-in 0.22s ease both;
  }
  .pc.is-open .pc__dots { opacity: 1; }
  .pc.is-open .pc__slide { transition-duration: 0.5s; }

  .pc__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 5px; right: 5px;
    width: 30px; height: 30px;
    background: var(--ink);
    color: var(--paper);
    border: 0;
    font-family: var(--font-mono);
    font-size: 1.15rem;
    line-height: 1;
    z-index: 5;
    transition: transform 0.16s ease, background 0.16s ease;
  }
  .pc.is-open .pc__toggle {
    background: var(--red);
    transform: rotate(45deg); /* + => × */
  }
}
@keyframes pc-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Ficha de producto
   ========================================================================== */
.pd {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) var(--gutter) clamp(3rem, 9vw, 6rem);
}
.pd__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 2rem;
}
.pd__back:hover { color: var(--ink); }
.pd__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 5vw, 3.5rem);
}
.pd__gallery-main {
  position: relative;
  border: var(--px) solid var(--ink);
  background: var(--paper-2);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  box-shadow: var(--shadow-hard);
}
.pd__gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.pd__gallery-main .pc__ph { color: var(--ink-3); }
.pd__thumbs { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.pd__thumb {
  width: 64px; height: 64px;
  border: var(--px) solid var(--ink);
  background: var(--paper-2);
  padding: 0;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.14s ease;
}
.pd__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd__thumb:hover, .pd__thumb.is-on { opacity: 1; }

.pd__kicker {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shutter);
  margin: 0 0 0.6rem;
}
.pd__title {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  text-transform: uppercase;
}
.pd__name { color: var(--ink-2); margin: 0.4rem 0 0; }
.pd__price {
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin: 1rem 0 1.5rem;
  font-variant-numeric: tabular-nums;
}
.pd__unavailable {
  font-family: var(--font-pixel);
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
  margin: 1rem 0 1.5rem;
}
.pd__reserved {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b26a00;
  margin: -0.75rem 0 1.25rem;
}
.pd .shutter-btn { width: 100%; justify-content: center; }
.pd__desc {
  margin-top: 1.75rem;
  white-space: pre-line;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.pd__specs {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.75rem;
}
.pd__specs th, .pd__specs td {
  text-align: left;
  padding: 0.6rem 0;
  border-bottom: 2px dashed var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.pd__specs th { color: var(--ink-3); font-weight: 400; width: 42%; }

/* ==========================================================================
   Secciones dentro de la home — Sobre nosotros / Dónde estamos
   ========================================================================== */
.section {
  border-top: var(--px) solid var(--ink);
  scroll-margin-top: 74px;
}
.section__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--gutter) clamp(3rem, 8vw, 5.5rem);
}
.section--loc { background: var(--paper-2); }
.section__title {
  font-size: clamp(2rem, 6vw, 3.4rem);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
/* Contenido de texto de las secciones — misma tipografía y escala en
   "Sobre nosotros" y "Dónde estamos". */
.section__lead,
.section__body,
.loc__info p,
.loc__hours {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink);
  max-width: 52ch;
}
.section__lead { margin-bottom: 1.25rem; }
.section__lead p,
.section__body p { margin: 0 0 1rem; }
.section__body p { color: var(--ink-2); }
.section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.section__actions .shutter-btn svg { width: 15px; height: 15px; }

.values {
  margin: 2.5rem 0 0;
  border-top: var(--px) solid var(--ink);
  max-width: 60ch;
}
.value {
  display: grid;
  grid-template-columns: 3ch 1fr;
  gap: 1.25rem;
  padding: 1.4rem 0;
  border-bottom: 2px dashed var(--line-soft);
}
.value__idx {
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  color: var(--red);
}
.value__body h3 { font-size: 1.1rem; text-transform: uppercase; margin-bottom: 0.4rem; }
.value__body p { color: var(--ink-2); font-size: 0.92rem; margin: 0; }

.about-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
}
.about-gallery img {
  border: var(--px) solid var(--ink);
  aspect-ratio: 1;
  object-fit: cover;
}

.loc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}
.loc__info p {
  display: flex;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
}
.loc__info svg { width: 20px; height: 20px; color: var(--red); flex-shrink: 0; margin-top: 0.25rem; }
.loc__hours { margin: 0.5rem 0 0; }
.loc__hours strong {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--ink-3);
  margin-bottom: 0.35rem;
}
.loc__hours p { margin: 0 0 0.25rem; }
.loc__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.loc__map {
  position: relative;
  border: var(--px) solid var(--ink);
  box-shadow: var(--shadow-hard);
}
.loc__map iframe {
  width: 100%; height: 320px; border: 0; display: block;
  filter: var(--map-filter);
}

/* ==========================================================================
   Footer — editorial, tipografía grande (lenguaje del footer de HelloHello,
   contenido 100% Rulo Cámaras)
   ========================================================================== */
.ft {
  /* El footer es una "isla oscura" en los dos temas: fija sus propios colores. */
  --paper: #e7e3d7;
  --paper-2: #ded9ca;
  --ink: #131313;
  --ink-2: #48453f;
  --ink-3: #8a8474;
  --red: #dd3018;
  --shutter: #dd3018;
  --line-soft: rgba(236, 230, 217, 0.14);
  border-top: var(--px) solid #000;
  background: #131313;
  color: #e7e3d7;
  margin-top: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
}
.ft__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--gutter) 0;
}
.ft__statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 46ch;
  text-wrap: pretty;
}
.ft__sys {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--screen-ink);
  margin: clamp(1.75rem, 5vw, 3rem) 0;
  padding: 0.75rem 0;
  border-top: 2px dashed rgba(255, 255, 255, 0.2);
  border-bottom: 2px dashed rgba(255, 255, 255, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.ft__cols {
  display: grid;
  /* Mobile: 4 celdas en 2×2 (antes iban todas en una sola columna y ocupaba
     muchísimo alto). */
  grid-template-columns: repeat(2, 1fr);
  gap: 1.9rem 1.25rem;
  padding-bottom: clamp(2.5rem, 7vw, 4rem);
}
.ft__col h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.9rem;
}
.ft__col a, .ft__col p {
  display: block;
  color: var(--paper);
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0 0 0.5rem;
  overflow-wrap: anywhere;
  transition: color 0.14s ease;
}
@media (min-width: 560px) {
  .ft__col a, .ft__col p { font-size: 0.95rem; }
}
.ft__col a:hover { color: var(--shutter); }

.ft__wordmark {
  font-family: var(--font-pixel);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(2.4rem, 13vw, 7.5rem);
  line-height: 1.05;
  padding: clamp(1.5rem, 5vw, 3rem) var(--gutter) 0;
  max-width: var(--container);
  margin: 0 auto;
  color: var(--paper);
  overflow: hidden;
  -webkit-font-smoothing: none;
}
.ft__wordmark b {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  background: var(--red);
  margin-left: 0.15em;
  vertical-align: baseline;
}
.ft__legal {
  border-top: var(--px) solid rgba(255, 255, 255, 0.18);
  padding: 1.25rem var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ft__socials { display: flex; gap: 1rem; }
.ft__socials a { color: var(--screen-ink); }
.ft__socials a:hover { color: var(--shutter); }
.ft__socials svg { width: 18px; height: 18px; }

/* ==========================================================================
   404 / errores
   ========================================================================== */
.err {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(4rem, 12vw, 8rem) var(--gutter);
  text-align: center;
}
.err h1 { font-size: clamp(2rem, 6vw, 3.5rem); text-transform: uppercase; margin-bottom: 1rem; }
.err p { color: var(--ink-2); font-family: var(--font-mono); font-size: 0.9rem; margin-bottom: 2rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Mobile: el dial de categorías ocupa el ancho completo y scrollea; la
   búsqueda va debajo. Así no se rompe con "CÁMARAS DIGITALES". */
@media (max-width: 620px) {
  .cat__controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    margin-bottom: 2rem;
  }
  .dial {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .dial__opt { scroll-snap-align: start; padding: 0.65rem 0.95rem; }
  .cat__search { align-self: flex-start; }
  .cat__search.is-open input { width: min(70vw, 260px); }
}

@media (min-width: 560px) {
  .cat__grid { grid-template-columns: repeat(3, 1fr); }
  .loc { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (min-width: 768px) {
  .hero__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
  }
  .hero__cam { padding-left: clamp(0.5rem, 3vw, 2rem); }
  .cam3d-wrap { --u: 0.9; }
  .cat__grid { grid-template-columns: repeat(4, 1fr); }
  .ft__cols { grid-template-columns: repeat(3, 1fr); }
  .pd__grid { grid-template-columns: 1.1fr 1fr; }
  .pd .shutter-btn { width: auto; }
}

@media (min-width: 1024px) {
  .cat__grid { grid-template-columns: repeat(5, 1fr); }
  .cam3d-wrap { --u: 1.05; }
  .ft__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

@media (min-width: 1200px) {
  .cat__grid { grid-template-columns: repeat(6, 1fr); }
}

/* Desktop angosto: los botones sociales quedan solo con ícono para no apretar el nav */
@media (min-width: 861px) and (max-width: 1120px) {
  .hd__btn span { display: none; }
  .hd__btn { padding: 0.5rem; }
  .hd__nav { gap: 1.1rem; }
}

/* --- Header colapsado --- */
@media (max-width: 860px) {
  .hd__nav--desktop, .hd__social { display: none; }
  .hd__menu { display: inline-flex; }
  .menu {
    display: block;
    max-height: 0;
    overflow: hidden;
    border-top: 0;
    transition: max-height 0.28s ease;
    background: var(--screen);
    color: var(--screen-ink);
  }
  .menu.is-open {
    max-height: 340px;
    border-top: var(--px) solid var(--ink);
  }
  .menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem var(--gutter);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.15);
  }
  .menu a:last-child { border-bottom: 0; }
  .menu a svg { width: 14px; height: 14px; color: var(--lcd); }
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .cam3d { animation: none !important; transform: rotateX(-8deg); }
  .cam3d__spin { animation: none !important; transform: rotateY(-30deg); }
  .cam3d__shadow { animation: none !important; opacity: 0.3; transform: translateX(-50%) rotateX(60deg); }
  .cam3d__strap { animation: none !important; transform: translateZ(calc(var(--d) / 2 - 4px)) rotate(-16deg); }
  .hero__rec-dot { animation: none !important; }
  /* El crosshair se mantiene: no es motion gratuito, sigue la mano del usuario. */
}

/* ==========================================================================
   v13 — pedidos de los chicos: header con accesos rápidos, novedades,
   burbujas de categorías, grilla tipo Instagram en celular, feed, vender.
   ========================================================================== */
:root { --hd-h: 104px; }
@media (max-width: 860px) { body { padding-top: var(--hd-h, 104px); } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header: barra (logo + menú) y debajo la tira de accesos rápidos */
.hd__menu { display: inline-flex; }
.hd__bar { padding: 0.6rem var(--gutter); }
.hd__quick {
  display: flex;
  gap: 0.45rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hd__quick::-webkit-scrollbar { display: none; }
@media (min-width: 861px) { .hd__quick { justify-content: center; } }
.hd__q {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  background: var(--paper);
  border: var(--px) solid var(--ink);
}
.hd__q svg { width: 13px; height: 13px; }
.hd__q--wa { background: #000; color: #fff; }
.hd__q--wa svg { color: var(--wa); }
.hd__q--ig { background: #000; color: #fff; }
.hd__q--sell { background: var(--red); color: #fff; border-color: var(--ink); }
.hd__q:hover { background: var(--ink); color: var(--paper); }
.hd__q--sell:hover { background: var(--ink); }

/* Menú (☰): en todos los tamaños */
.menu { display: block; max-height: 0; overflow: hidden; background: var(--screen); color: var(--screen-ink); transition: max-height 0.28s ease; }
.menu.is-open { max-height: 82vh; overflow-y: auto; border-top: var(--px) solid var(--ink); }
.menu__link {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 0.95rem var(--gutter);
  font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: inherit; background: none; border: 0; border-bottom: 2px dashed rgba(255, 255, 255, 0.15);
  text-align: left; cursor: pointer;
}
.menu__link svg { width: 14px; height: 14px; color: var(--lcd); flex-shrink: 0; }
.menu__caret svg { transition: transform 0.18s ease; }
.menu__group.is-open .menu__caret svg { transform: rotate(90deg); }
.menu__subs { display: none; background: rgba(255, 255, 255, 0.05); }
.menu__group.is-open .menu__subs { display: block; }
.menu__sub {
  display: block; padding: 0.75rem calc(var(--gutter) + 1rem);
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}
.menu__theme::after { display: none; }
.menu__theme svg { width: 18px; height: 18px; color: var(--screen-ink); }
:root[data-theme='dark'] .menu__theme svg { opacity: 0.55; }

/* Novedades: carrusel horizontal 3:4 */
.news { max-width: var(--container); margin: 0 auto; padding: 1rem 0 0.5rem; }
.news__track {
  display: flex; gap: 0.6rem; overflow-x: auto; padding: 0 var(--gutter) 0.4rem;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.news__track::-webkit-scrollbar { display: none; }
.news__card {
  flex: 0 0 min(62vw, 250px); aspect-ratio: 3 / 4; scroll-snap-align: start;
  border: var(--px) solid var(--ink); background: var(--paper-2); overflow: hidden; display: block;
}
.news__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.news__card:hover { box-shadow: var(--shadow-hard); }

/* Burbujas de categorías (como las destacadas de IG) */
.cat { padding-top: 1rem; }
.dial {
  display: flex; gap: 1rem; overflow-x: auto; padding: 0.4rem var(--gutter) 0.2rem;
  border: 0; box-shadow: none; background: none; width: auto; max-width: var(--container); margin: 0 auto 0.8rem;
  scrollbar-width: none;
}
.dial__opt.bubble {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem; flex-shrink: 0;
  padding: 0; border: 0; background: none; color: var(--ink); min-width: 68px; letter-spacing: 0;
}
.bubble__ring { width: 66px; height: 66px; border-radius: 50%; padding: 3px; border: 2px solid var(--ink-3); transition: border-color 0.14s ease; }
.dial__opt.bubble.is-on .bubble__ring, .dial__opt.bubble:hover .bubble__ring { border-color: var(--red); }
.bubble__img { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--paper-2); font-family: var(--font-pixel); font-size: 1.2rem; }
.bubble__img img { width: 100%; height: 100%; object-fit: cover; }
.bubble__label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; max-width: 84px; line-height: 1.15; }
.dial__opt.bubble.is-on { background: none; color: var(--ink); }

.cat__controls { max-width: var(--container); margin: 0 auto 1rem; padding: 0 var(--gutter); flex-direction: row; align-items: center; justify-content: space-between; gap: 0.6rem; }
.cat__sort select {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.6rem 0.7rem; background: var(--paper); color: var(--ink); border: var(--px) solid var(--ink); max-width: 200px;
}
@media (max-width: 620px) { .cat__controls { flex-direction: row; } }

/* Fotos de producto 3:4, borde fino */
.pc__frame { aspect-ratio: 3 / 4; border-width: 2px; }
.pc--off .pc__frame { border-color: var(--ink-3); }

/* CELULAR: grilla de solo fotos, 3 de ancho, tipo perfil de Instagram */
@media (max-width: 760px) {
  .cat__grid { grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0; }
  .cat__grid .pc__info, .cat__grid .pc__panel, .cat__grid .pc__toggle, .cat__grid .pc__dots { display: none; }
  .cat__grid .pc__frame { border: 0; aspect-ratio: 3 / 4; }
  .cat__grid .pc__stamp { font-size: 0.42rem; padding: 2px 3px; }
  .cat { padding-inline: 0; }
  .cat__controls, .dial { padding-inline: 0.7rem; }
  .cat__pages { margin-inline: auto; }
}
body.feed-open { overflow: hidden; }

/* Feed a pantalla completa (mobile) */
.feed { position: fixed; inset: 0; z-index: 300; background: var(--paper); display: flex; flex-direction: column; }
.feed__bar { flex-shrink: 0; padding: 0.6rem 0.8rem; border-bottom: var(--px) solid var(--ink); background: var(--paper); }
.feed__back { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; background: none; border: 0; color: var(--ink); }
.feed__back svg { width: 22px; height: 22px; }
.feed__scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.feed__post { border-bottom: var(--px) solid var(--ink); padding-bottom: 1rem; }
.feed__head { display: flex; flex-direction: column; padding: 0.7rem 0.9rem; font-size: 0.95rem; text-transform: uppercase; }
.feed__head span { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; color: var(--ink-2); }
.feed__media { position: relative; aspect-ratio: 3 / 4; background: var(--paper-2); }
.feed__imgs { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.feed__imgs::-webkit-scrollbar { display: none; }
.feed__imgs img, .feed__imgs .pc__ph { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.feed__media.is-sold .feed__imgs img { filter: grayscale(1); opacity: 0.5; }
.feed__dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.feed__dots i { width: 6px; height: 6px; background: rgba(255,255,255,.6); outline: 1px solid rgba(19,19,19,.5); }
.feed__dots i.is-on { background: var(--red); }
.feed__body { padding: 0.8rem 0.9rem 0; display: grid; gap: 0.7rem; }
.feed__price { font-family: var(--font-mono); font-size: 1.15rem; margin: 0; }
.feed__desc { font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.55; margin: 0; white-space: pre-line; }
.feed__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.feed .pc__more { color: var(--ink); border-color: var(--ink); }

/* Vender mi cámara + envíos */
.section--sell { background: var(--paper-2); }
.loc__ship { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 6vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; color: var(--red); margin: 0 0 1.5rem; }

.dial__opt.bubble { width: 84px; }
.bubble__label { white-space: normal; overflow-wrap: anywhere; }
.bubble__img svg { width: 55%; height: 55%; color: var(--ink-2); }

/* ==========================================================================
   v14 — mobile first: header lineal, carrusel "selección de personaje",
   buscador+orden alineados, recuadros más marcados, videos, modo oscuro crema
   ========================================================================== */
:root { --hd-h: 60px; }
@media (max-width: 860px) { body { padding-top: var(--hd-h, 60px); } }
body { padding-top: var(--hd-h, 60px); }

/* Header: UNA sola fila. Logo · accesos (scroll horizontal si no entran) · ☰ */
.hd__bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem var(--gutter); max-width: var(--container); margin: 0 auto; }
.wordmark { font-size: clamp(0.95rem, 4vw, 1.25rem); margin-right: 0; flex-shrink: 0; }
.hd__quick {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 0.4rem;
  overflow-x: auto; padding: 0.15rem 0.1rem 0.25rem; margin: 0; max-width: none;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hd__quick::-webkit-scrollbar { display: none; }
@media (min-width: 861px) { .hd__quick { justify-content: flex-start; margin-left: 0.6rem; } }
.hd__q { padding: 0.42rem 0.7rem; font-size: 0.66rem; gap: 0.35rem; }
button.hd__q { font: inherit; cursor: pointer; font-family: var(--font-mono); font-size: 0.66rem; }
.hd__q--icon { padding: 0.42rem 0.55rem; }
.hd__q--icon svg { width: 16px; height: 16px; }
.hd__q--icon .hd__q-text { display: none; }
@media (min-width: 861px) { .hd__q--wa .hd__q-text, .hd__q--ig .hd__q-text { display: inline; } .hd__q--icon { padding: 0.42rem 0.8rem; } .hd__theme.hd__q--icon { padding: 0.42rem 0.55rem; } }
.hd__q.hd__theme { position: relative; overflow: hidden; }
.hd__q.hd__theme::after { width: 20px; }
.hd__q--sell { flex-shrink: 0; }
.hd__menu { width: 38px; height: 38px; }
.menu.is-open { max-height: calc(100vh - 60px); }

/* Carrusel de novedades (centro iluminado, costados apagados) */
.news { position: relative; max-width: none; padding: 1.1rem 0 0.4rem; overflow: hidden; }
.news__track {
  --cw: min(58vw, 250px);
  display: flex; gap: 0.75rem; align-items: center;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 0.9rem calc(50% - var(--cw) / 2) 1.1rem;
}
.news__card {
  --d: 1;
  flex: 0 0 var(--cw); width: var(--cw); aspect-ratio: 3 / 4; scroll-snap-align: center;
  border: 3px solid var(--ink); background: var(--paper-2);
  transform: scale(calc(1 - 0.2 * var(--d)));
  opacity: calc(1 - 0.5 * var(--d));
  filter: brightness(calc(1 - 0.35 * var(--d))) saturate(calc(1 - 0.4 * var(--d)));
  box-shadow: calc(4px * (1 - var(--d))) calc(4px * (1 - var(--d))) 0 var(--ink);
  transition: box-shadow 0.15s ease;
}
.news__step { display: none; }
@media (min-width: 861px) {
  .news__track { --cw: 280px; }
  .news__step {
    display: grid; place-items: center; position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px;
    transform: translateY(-50%); background: var(--paper); color: var(--ink); border: var(--px) solid var(--ink);
  }
  .news__step svg { width: 22px; height: 22px; }
  .news__step--prev { left: calc(50% - 300px); }
  .news__step--next { right: calc(50% - 300px); }
}

/* Buscador + orden en la MISMA fila, alineados */
.cat__controls { display: flex; flex-direction: row; align-items: stretch; gap: 0.5rem; padding: 0 var(--gutter); max-width: var(--container); margin: 0 auto 1rem; }
.cat__search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem;
  border: 2px solid var(--ink); background: var(--paper); padding: 0 0.7rem; height: 44px;
}
.cat__search .cat__search-ico { display: grid; place-items: center; flex-shrink: 0; }
.cat__search .cat__search-ico svg { width: 18px; height: 18px; }
.cat__search input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; outline: none; padding: 0; height: 100%; }
.cat__search input::placeholder { color: var(--ink-3); text-transform: uppercase; }
.cat__sort { flex: 0 0 auto; display: block; }
.cat__sort select { height: 44px; padding: 0 0.6rem; font-size: 0.68rem; border: 2px solid var(--ink); max-width: 46vw; }
@media (max-width: 620px) { .cat__controls { flex-direction: row; align-items: stretch; } }

/* Recuadro de productos más marcado */
.pc__frame { border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.pc--off .pc__frame { border-color: var(--ink-3); box-shadow: 3px 3px 0 var(--ink-3); }
@media (max-width: 760px) {
  .cat__grid { gap: 10px 8px; padding: 0 0.7rem; }
  .cat__grid .pc__frame { border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
  .cat__grid .pc--off .pc__frame { border-color: var(--ink-3); box-shadow: 2px 2px 0 var(--ink-3); }
}
.pc__vidbadge { position: absolute; top: 6px; right: 6px; z-index: 3; width: 22px; height: 22px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-size: 0.6rem; border: 2px solid var(--paper); }

/* Mini reproductor horizontal */
.vid { display: inline-flex; align-items: center; gap: 0.6rem; width: 100%; aspect-ratio: 16 / 9; justify-content: center; background: var(--screen); color: var(--screen-ink); border: 3px solid var(--ink); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; padding: 0; overflow: hidden; }
.vid__play { display: grid; place-items: center; width: 44px; height: 44px; background: var(--red); color: #fff; }
.vid--player { padding: 0; cursor: default; }
.vid--player video, .vid--player iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.pd__videos { display: grid; gap: 0.7rem; margin-top: 1rem; }
.feed__videos { display: grid; gap: 0.6rem; }

/* Modo oscuro más lindo: fondo cálido (no negro puro), recuadros BEIGE/CREMA */
:root[data-theme='dark'] {
  --paper: #211e19;
  --paper-2: #2b2720;
  --paper-3: #36312a;
  --ink: #d8ceb3;
  --ink-2: #ada38a;
  --ink-3: #7d7561;
  --line: #d8ceb3;
  --line-soft: rgba(216, 206, 179, 0.16);
  --shadow-hard: 4px 4px 0 rgba(0, 0, 0, 0.45);
  --shadow-hard-sm: 3px 3px 0 rgba(0, 0, 0, 0.45);
}
:root[data-theme='dark'] .hd { background: var(--paper); border-bottom-color: var(--ink); }
/* cajas crema con texto oscuro (en vez de negro/blanco invertido) */
:root[data-theme='dark'] .hd__q:not(.hd__q--wa):not(.hd__q--ig):not(.hd__q--sell),
:root[data-theme='dark'] .hd__icon,
:root[data-theme='dark'] .cat__search,
:root[data-theme='dark'] .cat__sort select,
:root[data-theme='dark'] .cat__page:not(.is-on),
:root[data-theme='dark'] .news__step { background: #d8ceb3; color: #1f1c17; border-color: #d8ceb3; }
:root[data-theme='dark'] .cat__search input { color: #1f1c17; }
:root[data-theme='dark'] .cat__search input::placeholder { color: #6b6350; }
:root[data-theme='dark'] .hd__q--wa, :root[data-theme='dark'] .hd__q--ig { background: #14120f; border-color: #d8ceb3; }
:root[data-theme='dark'] .hd__q--sell { border-color: #d8ceb3; }
:root[data-theme='dark'] .bubble__img { background: #d8ceb3; color: #1f1c17; }
:root[data-theme='dark'] .bubble__img svg { color: #1f1c17; }
:root[data-theme='dark'] .pc__frame { background: #d8ceb3; border-color: #d8ceb3; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5); }
:root[data-theme='dark'] .pc--off .pc__frame { border-color: var(--ink-3); background: #6f6856; }
:root[data-theme='dark'] .news__card { border-color: #d8ceb3; background: #d8ceb3; }
:root[data-theme='dark'] .section--sell { background: var(--paper-2); }
:root[data-theme='dark'] .feed, :root[data-theme='dark'] .feed__bar { background: var(--paper); }
:root[data-theme='dark'] .hd__q--icon svg, :root[data-theme='dark'] .hd__theme svg { opacity: 1; }
:root[data-theme='dark'] .hd__theme::after { background: var(--red); }

@media (max-width: 860px) {
  .hd__bar { gap: 0.45rem; padding: 0.5rem 0.7rem; }
  .wordmark { font-size: 0.86rem; }
  .hd__quick { gap: 0.3rem; }
  .hd__q, button.hd__q { padding: 0.36rem 0.5rem; font-size: 0.58rem; border-width: 2px; letter-spacing: 0.04em; }
  .hd__q--icon { padding: 0.36rem 0.42rem; }
  .hd__q--icon svg { width: 15px; height: 15px; }
  .hd__menu { width: 34px; height: 34px; border-width: 2px; }
  :root { --hd-h: 54px; }
}

/* ==========================================================================
   v15 — header desktop completo (sin ☰), mobile solo logo + ☰; secciones
   con el mismo fondo; carrusel infinito
   ========================================================================== */
.hd__bar { display: flex; align-items: center; gap: 0.8rem; max-width: var(--container); margin: 0 auto; padding: 0.55rem var(--gutter); }
.hd__nav, .hd__right { display: none; }
.hd__menu { display: inline-flex; margin-left: auto; }
.hd__q--wa span, .hd__q--ig span { display: inline; }

@media (min-width: 861px) {
  :root { --hd-h: 64px; }
  .hd__nav { display: flex; align-items: center; gap: 0.5rem; margin-left: 1.2rem; }
  .hd__right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
  .hd__menu, .menu { display: none !important; }
  .hd__q, button.hd__q { padding: 0.5rem 0.85rem; font-size: 0.72rem; }
  .hd__theme.hd__q { padding: 0.5rem 0.6rem; }
  .hd__theme.hd__q svg { width: 16px; height: 16px; }
}
@media (max-width: 860px) {
  .hd__bar { padding: 0.5rem 0.9rem; }
  .wordmark { font-size: 1.05rem; }
  .hd__menu { width: 40px; height: 40px; }
  :root { --hd-h: 58px; }
  .menu.is-open { max-height: calc(100vh - 58px); }
}

/* Todas las secciones con el mismo fondo (el de "¡Vender mi cámara!") */
.section, .section--loc, .section--sell { background: var(--paper-2); }
:root[data-theme='dark'] .section, :root[data-theme='dark'] .section--loc, :root[data-theme='dark'] .section--sell { background: var(--paper-2); }

/* Header: links de texto limpios (sin cajas gruesas) */
.hd__bar { gap: 1.4rem; }
.hd__nav { gap: 0.2rem; }
.hd__nav .hd__q {
  border: 0; background: transparent; color: var(--ink); box-shadow: none;
  font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; letter-spacing: 0.02em; text-transform: none;
  padding: 0.4rem 0.75rem; position: relative;
}
.hd__nav .hd__q::after {
  content: ''; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.1rem; height: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.16s ease;
}
.hd__nav .hd__q:hover { background: transparent; color: var(--ink); }
.hd__nav .hd__q:hover::after { transform: scaleX(1); }
.hd__nav .hd__q svg { width: 15px; height: 15px; }
.hd__nav .hd__q--sell {
  background: var(--red); color: #fff; border: var(--px) solid var(--ink); padding: 0.35rem 0.9rem; margin: 0 0.4rem;
  box-shadow: 3px 3px 0 var(--ink);
}
.hd__nav .hd__q--sell::after { display: none; }
.hd__nav .hd__q--sell:hover { background: var(--ink); color: #fff; }
/* iconos de la derecha: botones cuadrados chicos, iguales entre sí */
.hd__right { gap: 0.4rem; }
.hd__right .hd__q { padding: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.hd__right .hd__q span { display: none; }
.hd__right .hd__q svg { width: 18px; height: 18px; }

/* ==========================================================================
   v17 — HEADER: una sola escala. Alto 40px para todo lo interactivo, borde de
   2px, tipografía Pixelify Sans, grupos separados por una línea pixel.
   Izquierda: logo | navegación · Derecha: WhatsApp · Instagram | tema
   ========================================================================== */
:root { --hd-h: 64px; --hd-ctl: 40px; }
.hd { background: var(--paper); border-bottom: 2px solid var(--ink); }
.hd__bar { display: flex; align-items: center; gap: 1rem; height: var(--hd-h); padding: 0 var(--gutter); max-width: var(--container); margin: 0 auto; }
body { padding-top: var(--hd-h); }

.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1; letter-spacing: -0.03em; display: inline-flex; align-items: center; margin: 0; }
.wordmark__dot { width: 0.34em; height: 0.34em; margin: 0 0.22em; align-self: center; }

.hd__sep { width: 2px; height: 24px; background: var(--ink); opacity: 0.25; flex-shrink: 0; }
.hd__sep--l { display: none; }
.hd__nav, .hd__right { display: none; }

.hd__link {
  display: inline-flex; align-items: center; height: var(--hd-ctl); padding: 0 0.95rem;
  font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: 0.02em; line-height: 1;
  color: var(--ink); border: 2px solid transparent; background: none; position: relative;
}
.hd__link:hover { border-color: var(--ink); }
.hd__link--sell { background: var(--red); border-color: var(--ink); color: #fff; }
.hd__link--sell:hover { background: var(--ink); color: #fff; }

.hd__sq, .hd__menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--hd-ctl); height: var(--hd-ctl); padding: 0; flex-shrink: 0;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: none;
}
.hd__sq svg, .hd__menu svg { width: 18px; height: 18px; }
.hd__sq:hover, .hd__menu:hover { background: var(--ink); color: var(--paper); }
.hd__sq--wa svg { color: var(--wa); }
.hd__sq--wa:hover svg { color: var(--wa); }
.hd__theme { position: relative; overflow: hidden; }
.hd__menu { margin-left: auto; }

@media (min-width: 861px) {
  .hd__sep--l { display: block; margin-left: 0.4rem; }
  .hd__nav { display: flex; align-items: center; gap: 0.25rem; }
  .hd__right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
  .hd__menu, .menu { display: none !important; }
}
@media (max-width: 860px) {
  :root { --hd-h: 58px; }
  .hd__bar { gap: 0.6rem; }
  .wordmark { font-size: 1.2rem; }
}
:root[data-theme='dark'] .hd__sq, :root[data-theme='dark'] .hd__menu { background: transparent; color: var(--ink); border-color: var(--ink); }
:root[data-theme='dark'] .hd__sq:hover, :root[data-theme='dark'] .hd__menu:hover { background: var(--ink); color: var(--paper); }
:root[data-theme='dark'] .hd__sep { background: var(--ink); }

/* Términos y condiciones */
.terms { max-width: 46rem; margin: 0 auto; padding: 2rem var(--gutter) 3rem; }
.terms__title { font-family: var(--font-display); font-size: clamp(1.8rem, 6vw, 2.8rem); margin: 1rem 0 1.5rem; }
.terms__body h2 { font-family: var(--font-display); font-size: 1.35rem; margin: 2rem 0 0.5rem; }
.terms__body p { white-space: pre-line; margin: 0 0 1rem; line-height: 1.65; }

.hd__nav a.hd__link::after { display: none; }
.hd__nav { margin-left: 0; }
.hd__nav .hd__link { color: var(--ink); font-size: 1rem; }
.hd__nav .hd__link--sell, .hd__nav .hd__link--sell:hover { color: #fff; }
.hd__nav .hd__link:hover { color: var(--ink); }
.hd__nav .hd__link--sell:hover { background: var(--ink); }

/* "¡Vender mi cámara!": espacio parejo a los dos lados y sin oscurecerse al pasar el mouse */
.hd__nav { gap: 0.5rem; }
.hd__nav .hd__link { padding: 0 0.9rem; }
.hd__nav .hd__link--sell { margin: 0 0.5rem; padding: 0 1.1rem; background: var(--red); border-color: var(--red); color: #fff; }
.hd__nav .hd__link--sell:hover,
.hd__nav .hd__link--sell:focus-visible { background: var(--paper); color: var(--red); border-color: var(--red); }
.hd__nav .hd__link:not(.hd__link--sell):hover { background: transparent; border-color: var(--ink); }

/* CELULAR: 3 columnas, cada producto con su nombre y precio debajo */
@media (max-width: 760px) {
  .cat__grid { gap: 14px 8px; }
  .cat__grid .pc__info { display: block; padding: 0.45rem 0.1rem 0; min-width: 0; }
  .cat__grid .pc__name { font-size: 0.68rem; line-height: 1.1; letter-spacing: 0; overflow-wrap: anywhere; }
  .cat__grid .pc__name span { font-size: 0.62rem; }
  .cat__grid .pc__price { font-size: 0.72rem; margin-top: 0.25rem; }
  .cat__grid .pc__off-label { font-size: 0.6rem; }
}

/* ==========================================================================
   C1 — carrusel de novedades sin parpadeos: solo transform/opacity por frame
   (antes: filter + box-shadow animados en cada tarjeta = repintado constante)
   ========================================================================== */
.news__track { contain: paint; overscroll-behavior-x: contain; }
.news__card {
  position: relative;
  filter: none;
  box-shadow: none;
  transition: none;
  will-change: transform, opacity;
  transform: translateZ(0) scale(calc(1 - 0.2 * var(--d)));
  opacity: calc(1 - 0.45 * var(--d));
  -webkit-user-drag: none;
  user-select: none;
}
.news__card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: #000; opacity: calc(0.3 * var(--d));
}
.news__card.is-center { box-shadow: 4px 4px 0 var(--ink); }
.news__card img { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .news__track { scroll-behavior: auto; }
}

/* ==========================================================================
   B1 · B2 · B3 — HEADER
   Todo parametrizado con variables. Escala: celular / tablet / PC / PC grande.
   ========================================================================== */
:root {
  --hd-h: 60px;           /* alto del header */
  --hd-ctl: 40px;         /* alto de botones del header */
  --hd-logo: 34px;        /* alto del logo */
  --hd-font: 0.95rem;     /* texto de los botones */
  --hd-word: 1.15rem;     /* "RULO · CÁMARAS" */
  --hd-gap: 0.5rem;       /* espacio entre botones */
  --hd-pad-x: var(--gutter);
  --hd-border: 2px;
  --hd-brand-border: 3px; /* recuadro rojo del logo */
  --hd-speed: 180ms;      /* transición hover */
}
@media (min-width: 861px) {
  :root { --hd-h: 76px; --hd-ctl: 44px; --hd-logo: 40px; --hd-font: 1rem; --hd-word: 1.3rem; --hd-gap: 0.55rem; --hd-pad-x: clamp(1.5rem, 3vw, 3rem); }
}
@media (min-width: 1280px) {
  :root { --hd-h: 84px; --hd-ctl: 48px; --hd-logo: 44px; --hd-font: 1.08rem; --hd-word: 1.45rem; --hd-gap: 0.7rem; }
}
@media (min-width: 1920px) {
  :root { --hd-h: 96px; --hd-ctl: 54px; --hd-logo: 50px; --hd-font: 1.2rem; --hd-word: 1.65rem; --hd-gap: 0.85rem; --hd-pad-x: 4rem; }
}

body { padding-top: var(--hd-h); }
.hd { border-bottom: var(--hd-border) solid var(--ink); }
/* B3: el header ocupa TODO el ancho (sin quedar flotando en el centro) y se
   reparte en 3 columnas: marca | navegación centrada | acciones. */
.hd__bar {
  height: var(--hd-h); max-width: none; margin: 0; padding: 0 var(--hd-pad-x);
  display: flex; align-items: center; gap: var(--hd-gap);
}
@media (min-width: 861px) {
  .hd__bar { display: grid; grid-template-columns: 1fr auto 1fr; }
  .hd__brand { justify-self: start; }
  .hd__nav { justify-self: center; gap: var(--hd-gap); margin: 0; }
  .hd__right { justify-self: end; gap: var(--hd-gap); margin: 0; }
  .hd__sep--l { display: none !important; }
}

/* B1: marca dentro de un recuadro rojo, bien separada del menú */
.hd__brand.wordmark {
  display: inline-flex; align-items: center; gap: 0.55rem;
  height: calc(var(--hd-ctl) + 8px); padding: 0 0.8rem 0 0.4rem;
  border: var(--hd-brand-border) solid var(--red);
  background: var(--paper);
  font-size: var(--hd-word); font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  color: var(--ink); white-space: nowrap; margin: 0;
}
.hd__logo { height: var(--hd-logo); width: auto; display: block; flex-shrink: 0; }
.wordmark__text { display: inline-flex; align-items: center; }
.hd__brand:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 380px) {
  .hd__brand.wordmark { gap: 0.4rem; padding-right: 0.6rem; font-size: 1.02rem; }
}

/* B2: todos los botones con recuadro; hover/foco en rojo; activo invertido */
.hd__nav .hd__link {
  height: var(--hd-ctl); padding: 0 1.05em;
  font-size: var(--hd-font); font-weight: 600;
  color: var(--ink); background: transparent;
  border: var(--hd-border) solid var(--ink);
  transition: background-color var(--hd-speed) ease, border-color var(--hd-speed) ease, color var(--hd-speed) ease;
}
.hd__nav .hd__link:hover,
.hd__nav .hd__link:focus-visible {
  background: var(--red); border-color: var(--red); color: #fff; outline: none;
}
.hd__nav .hd__link:focus-visible { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--red); }
.hd__nav .hd__link[aria-current='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hd__nav .hd__link[aria-current='true']:hover,
.hd__nav .hd__link[aria-current='true']:focus-visible { background: var(--red); border-color: var(--red); color: #fff; }
/* "¡Vender mi cámara!": rojo de base; en hover se oscurece el rojo */
.hd__nav .hd__link--sell { background: var(--red); border-color: var(--red); color: #fff; margin: 0; padding: 0 1.2em; }
.hd__nav .hd__link--sell:hover,
.hd__nav .hd__link--sell:focus-visible { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.hd__nav .hd__link--sell[aria-current='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Acciones de la derecha: mismo alto que los botones */
.hd__sq, .hd__menu { width: var(--hd-ctl); height: var(--hd-ctl); border-width: var(--hd-border); transition: background-color var(--hd-speed) ease, border-color var(--hd-speed) ease, color var(--hd-speed) ease; }
.hd__sq svg, .hd__menu svg { width: calc(var(--hd-ctl) * 0.42); height: calc(var(--hd-ctl) * 0.42); }
.hd__sq:hover, .hd__sq:focus-visible, .hd__menu:hover, .hd__menu:focus-visible { background: var(--red); border-color: var(--red); color: #fff; outline: none; }
.hd__sq--wa:hover svg, .hd__sq--wa:focus-visible svg { color: #fff; }
.hd__sep { height: calc(var(--hd-ctl) * 0.6); }

:root[data-theme='dark'] .hd__brand.wordmark { background: transparent; color: var(--ink); }
:root[data-theme='dark'] .hd__nav .hd__link { color: var(--ink); border-color: var(--ink); }
:root[data-theme='dark'] .hd__nav .hd__link[aria-current='true'] { background: var(--ink); color: var(--paper); }
:root[data-theme='dark'] .hd__nav .hd__link:hover { background: var(--red); border-color: var(--red); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .hd__nav .hd__link, .hd__sq, .hd__menu { transition: none; }
}

/* B3 ajustes: nada se corta ni se superpone */
.hd__nav .hd__link { white-space: nowrap; }
.hd__brand.wordmark { min-width: max-content; flex-shrink: 0; }
/* Tablet horizontal / notebooks chicas: menos espacio, se ordena en fila */
@media (min-width: 861px) and (max-width: 1199px) {
  :root { --hd-font: 0.9rem; --hd-gap: 0.4rem; --hd-pad-x: 1.25rem; }
  .hd__bar { display: flex; }
  .hd__nav { margin-left: 0.4rem; }
  .hd__right { margin-left: auto; }
  .hd__nav .hd__link { padding: 0 0.7em; }
}
@media (min-width: 861px) and (max-width: 1099px) {
  .wordmark__text { display: none; }  /* queda el logo dentro del recuadro rojo */
  .hd__brand.wordmark { padding: 0 0.4rem; }
}

/* Escala por ancho (PC): que entre todo sin cortarse */
@media (min-width: 1200px) and (max-width: 1439px) {
  :root { --hd-font: 0.9rem; --hd-word: 1.3rem; --hd-gap: 0.55rem; }
  .hd__nav .hd__link { padding: 0 0.8em; }
}
@media (min-width: 1440px) {
  :root { --hd-font: 1.02rem; }
  .hd__nav .hd__link { padding: 0 1em; }
}
@media (min-width: 1920px) {
  :root { --hd-font: 1.18rem; }
}

/* ==========================================================================
   D1 · D2 · D3 — CATÁLOGO
   ========================================================================== */
:root {
  --cat-max: var(--container);   /* ancho máximo del catálogo */
  --cat-cols: 2;                 /* columnas (ver breakpoints) */
  --cat-gap-x: clamp(0.7rem, 1.4vw, 1.25rem);
  --cat-gap-y: clamp(1rem, 2vw, 1.75rem);
  --cat-ctl-h: 44px;             /* alto de buscador y "ordenar" */
  --cat-ctl-font: 0.8rem;
  --bubble: 66px;                /* diámetro de las burbujas de categoría */
  --bubble-on-scale: 1.13;       /* agrandado de la categoría elegida */
  --bubble-speed: 180ms;
}
@media (min-width: 761px) { :root { --bubble: 72px; --cat-ctl-h: 48px; --cat-ctl-font: 0.86rem; } }
@media (min-width: 1200px) { :root { --cat-max: 1680px; --cat-cols: 6; --bubble: 80px; --cat-ctl-h: 54px; --cat-ctl-font: 0.95rem; } }
@media (min-width: 1600px) { :root { --cat-max: 1880px; --cat-cols: 8; } }
@media (min-width: 1920px) { :root { --cat-ctl-h: 58px; --cat-ctl-font: 1rem; --bubble: 88px; } }

/* D2: la grilla ocupa más ancho en PC (6 columnas; 8 en pantallas ≥1600px) */
@media (min-width: 1200px) {
  .cat { max-width: var(--cat-max); }
  .cat__grid { grid-template-columns: repeat(var(--cat-cols), minmax(0, 1fr)); gap: var(--cat-gap-y) var(--cat-gap-x); }
}
/* D3: burbujas, buscador y "ordenar" usan el MISMO ancho que la grilla */
@media (min-width: 761px) {
  .cat .dial, .cat .cat__controls { max-width: none; padding-inline: 0; margin-inline: 0; }
}
.cat__controls { gap: 0.6rem; margin-bottom: 1.25rem; }
.cat__search { height: var(--cat-ctl-h); padding: 0 0.9rem; gap: 0.6rem; }
.cat__search .cat__search-ico svg { width: calc(var(--cat-ctl-h) * 0.4); height: calc(var(--cat-ctl-h) * 0.4); }
.cat__search input { font-size: var(--cat-ctl-font); }
.cat__sort select { height: var(--cat-ctl-h); font-size: var(--cat-ctl-font); padding: 0 2.2rem 0 0.9rem; min-width: 11em; }
.cat__search:focus-within, .cat__sort select:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
@media (max-width: 760px) { .cat__sort { max-width: 40%; } .cat__sort select { min-width: 0; width: 100%; padding-right: 1.6rem; } }

/* D1: categoría elegida bien visible (se agranda + anillo rojo) sin mover el resto */
.dial { padding-top: 0.7rem; padding-bottom: 0.4rem; overflow-y: visible; }
.dial__opt.bubble { width: calc(var(--bubble) + 18px); }
.bubble__ring {
  width: var(--bubble); height: var(--bubble);
  transform-origin: center;
  transition: transform var(--bubble-speed) ease, border-color var(--bubble-speed) ease, box-shadow var(--bubble-speed) ease;
}
.bubble__label { transition: color var(--bubble-speed) ease, transform var(--bubble-speed) ease; }
.dial__opt.bubble:hover .bubble__ring { border-color: var(--red); }
.dial__opt.bubble.is-on .bubble__ring {
  transform: scale(var(--bubble-on-scale));
  border-color: var(--red);
  box-shadow: 0 0 0 2px var(--red);
}
.dial__opt.bubble.is-on .bubble__label { color: var(--red); font-weight: 700; transform: translateY(calc(var(--bubble) * (var(--bubble-on-scale) - 1) / 2)); }
.dial__opt.bubble:focus-visible { outline: none; }
.dial__opt.bubble:focus-visible .bubble__ring { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .bubble__ring, .bubble__label { transition: none; }
}

/* ==========================================================================
   C2 — texto de las tarjetas de producto ~25% más grande
   (pendiente de confirmar qué textos: se aplicó a nombre, modelo y precio
   de las tarjetas, que es donde quedaba más vacío; las novedades son solo foto)
   ========================================================================== */
:root { --card-text-scale: 1.25; }
.pc__name { font-size: calc(clamp(0.9rem, 1.15vw, 1.02rem) * var(--card-text-scale)); line-height: 1.08; }
.pc__price { font-size: calc(0.86rem * var(--card-text-scale)); margin-top: 0.45rem; }
.pc__off-label { font-size: calc(0.62rem * var(--card-text-scale)); }
@media (max-width: 760px) {
  .cat__grid { row-gap: 18px; }
  .cat__grid .pc__info { padding-top: 0.5rem; }
  .cat__grid .pc__name { font-size: calc(0.68rem * var(--card-text-scale)); line-height: 1.15; }
  .cat__grid .pc__name span { font-size: calc(0.62rem * var(--card-text-scale)); }
  .cat__grid .pc__price { font-size: calc(0.72rem * var(--card-text-scale)); margin-top: 0.3rem; }
  .cat__grid .pc__off-label { font-size: calc(0.6rem * var(--card-text-scale)); }
}

/* ==========================================================================
   C3 — celular: línea negra que separa las novedades del catálogo
   ========================================================================== */
:root { --section-rule: 3px; --section-rule-gap: 1.1rem; }
@media (max-width: 760px) {
  .news { padding-bottom: var(--section-rule-gap); }
  .news + .cat::before {
    content: ''; display: block;
    height: var(--section-rule); background: var(--ink);
    margin: 0 var(--gutter) var(--section-rule-gap);
  }
  .news + .cat { padding-top: 0; }
}

/* ==========================================================================
   D4 — pantalla de carga con el logo (Configuración → Logo; sin logo, el nombre)
   ========================================================================== */
:root {
  --boot-logo: clamp(96px, 28vw, 140px); /* alto del logo (ver BOOT_LOGO_PX en el backend) */
  --boot-pulse: 1.6s;                    /* duración de un "latido" */
}
.boot-screen { min-height: calc(100vh - var(--hd-h, 60px)); min-height: calc(100svh - var(--hd-h, 60px)); gap: 1.4rem; padding: 2rem var(--gutter); text-align: center; }
.boot-screen__brand {
  display: grid; place-items: center;
  padding: 0.8rem 1.1rem;
  border: var(--hd-brand-border, 3px) solid var(--red);
  background: var(--paper);
  animation: boot-pulse var(--boot-pulse) ease-in-out infinite;
}
.boot-screen__logo { display: block; height: var(--boot-logo); width: auto; max-width: min(70vw, 360px); object-fit: contain; }
.boot-screen__name {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1; color: var(--ink);
}
.boot-screen__label { display: inline-flex; align-items: center; gap: 0.6rem; }
@keyframes boot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.96); opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce) {
  .boot-screen__brand, .boot-screen__dot { animation: none; }
}

/* ==========================================================================
   E1 — encuadre del ícono de categoría (punto focal + zoom del panel)
   ========================================================================== */
.bubble__img img {
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  transform: scale(var(--fz, 1));
  transform-origin: var(--fx, 50%) var(--fy, 50%);
}

/* ==========================================================================
   Header v2 — botones rellenos:
   · "¡Vender mi cámara!" y "Dónde estamos": rojo → negro al pasar el mouse
   · "Catálogo" y "Sobre nosotros": negro → rojo al pasar el mouse
   · Sección actual (activa): subrayado grueso, distinto del hover
   ========================================================================== */
:root { --hd-red: var(--red); --hd-dark: var(--ink); --hd-on: #fff; }
:root[data-theme='dark'] { --hd-red: #b8200c; --hd-on-dark: var(--paper); }
:root .hd__nav .hd__link.hd__link--red,
:root .hd__nav .hd__link.hd__link--dark { margin: 0; padding: 0 1.1em; }
:root .hd__nav .hd__link.hd__link--red { background: var(--hd-red); border-color: var(--hd-red); color: var(--hd-on); }
:root .hd__nav .hd__link.hd__link--dark { background: var(--hd-dark); border-color: var(--hd-dark); color: var(--hd-on-dark, var(--hd-on)); }
:root .hd__nav .hd__link.hd__link--red:hover,
:root .hd__nav .hd__link.hd__link--red:focus-visible { background: var(--hd-dark); border-color: var(--hd-dark); color: var(--hd-on-dark, var(--hd-on)); }
:root .hd__nav .hd__link.hd__link--dark:hover,
:root .hd__nav .hd__link.hd__link--dark:focus-visible { background: var(--hd-red); border-color: var(--hd-red); color: var(--hd-on); }
:root .hd__nav .hd__link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--hd-red); }
/* Activa: mismo color de base + subrayado (no se confunde con el hover) */
.hd__nav .hd__link[aria-current='true'] {
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px;
}
:root .hd__nav .hd__link.hd__link--red[aria-current='true'] { background: var(--hd-red); border-color: var(--hd-red); color: var(--hd-on); }
:root .hd__nav .hd__link.hd__link--dark[aria-current='true'] { background: var(--hd-dark); border-color: var(--hd-dark); color: var(--hd-on-dark, var(--hd-on)); }
:root .hd__nav .hd__link.hd__link--red[aria-current='true']:hover { background: var(--hd-dark); border-color: var(--hd-dark); color: var(--hd-on-dark, var(--hd-on)); }
:root .hd__nav .hd__link.hd__link--dark[aria-current='true']:hover { background: var(--hd-red); border-color: var(--hd-red); color: var(--hd-on); }

/* ==========================================================================
   Carrusel de novedades v2 — se mueve de a UNA imagen (arrastre, rueda,
   flechas) y avanza solo cada 2.5 s. Sin scroll nativo: la tira se desplaza
   con transform (liviano para la GPU).
   ========================================================================== */
:root {
  --news-speed: 560ms;                          /* duración de cada paso */
  --news-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* arranca ágil y frena suave */
}
.news.is-js { contain: paint; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.news.is-js .news__track {
  overflow: visible; scroll-snap-type: none; contain: none;
  transition: transform var(--news-speed) var(--news-ease);
  will-change: transform;
  cursor: grab;
}
.news.is-js .news__card {
  scroll-snap-align: none;
  transition: transform var(--news-speed) var(--news-ease), opacity var(--news-speed) var(--news-ease), box-shadow var(--news-speed) ease;
}
.news.is-js .news__card::after { transition: opacity var(--news-speed) var(--news-ease); }
.news.is-dragging .news__track { cursor: grabbing; }
.news.is-dragging .news__track,
.news.is-dragging .news__card,
.news.is-dragging .news__card::after,
.news.is-jumping .news__track,
.news.is-jumping .news__card,
.news.is-jumping .news__card::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :root { --news-speed: 1ms; }
}

/* ==========================================================================
   Catálogo 6×6 — columnas fijas por tamaño de pantalla (--cat-cols) y
   buscador/"Ordenar" alineados a la grilla:
   · "Ordenar" mide exactamente lo mismo que una tarjeta (1 columna)
   · el buscador ocupa el resto, con el mismo espacio entre ellos que entre
     tarjetas, y la misma distancia a la grilla que entre filas
   ========================================================================== */
:root { --cat-cols: 3; --cat-gap-x: 8px; --cat-gap-y: 18px; }
@media (min-width: 768px) { :root { --cat-cols: 4; --cat-gap-x: clamp(0.7rem, 1.4vw, 1.25rem); --cat-gap-y: clamp(1rem, 2vw, 1.75rem); } }
@media (min-width: 1024px) { :root { --cat-cols: 5; } }
@media (min-width: 1200px) { :root { --cat-cols: 6; --cat-max: 1680px; } }
@media (min-width: 1600px) { :root { --cat-cols: 6; --cat-max: 1680px; } }

.cat .cat__grid {
  grid-template-columns: repeat(var(--cat-cols), minmax(0, 1fr));
  column-gap: var(--cat-gap-x);
  row-gap: var(--cat-gap-y);
}
.cat .cat__controls {
  display: grid;
  grid-template-columns: repeat(var(--cat-cols), minmax(0, 1fr));
  column-gap: var(--cat-gap-x);
  margin-bottom: var(--cat-gap-y);
}
.cat .cat__search { grid-column: 1 / -2; min-width: 0; }
.cat .cat__sort { grid-column: -2 / -1; min-width: 0; max-width: none; width: 100%; }
.cat .cat__sort select { width: 100%; min-width: 0; max-width: none; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .cat .cat__sort select { padding-left: 0.5rem; padding-right: 0.25rem; font-size: 0.72rem; letter-spacing: 0; }
}
/* Celular: buscador/ordenar con el mismo margen lateral que la grilla */
@media (max-width: 760px) {
  .cat .cat__controls { padding-inline: var(--cat-inset, 0.7rem); }
  .cat .cat__grid { padding-inline: var(--cat-inset, 0.7rem); }
}

/* ==========================================================================
   Secciones con imagen: "¡Vender mi cámara!" (texto izq. / imagen der.) y
   "Sobre nosotros" (imagen izq. / texto der.). En celular se apilan.
   ========================================================================== */
:root {
  --media-gap: clamp(1.5rem, 5vw, 4.5rem);
  --media-logo-max: 360px;   /* ancho máximo del logo en "Vender" */
  --media-photo-ratio: 4 / 3;
}
.section--media .section__inner { display: grid; gap: var(--media-gap); align-items: center; }
.section__text { min-width: 0; }
.section__media { margin: 0; min-width: 0; }
.section__media img { display: block; width: 100%; height: auto; }
.section__media--logo { justify-self: center; width: min(100%, var(--media-logo-max)); }
.section__media--photo img {
  aspect-ratio: var(--media-photo-ratio); object-fit: cover;
  border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
}
@media (max-width: 860px) {
  .section__media--logo { width: min(70%, 280px); }
  .section__media--photo { margin-right: 6px; } /* deja lugar a la sombra */
}
@media (min-width: 861px) {
  .section--media .section__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .section--media-left .section__inner { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}

/* ==========================================================================
   Envíos y entregas — tarjetas (1 columna en celular, 3 en PC)
   ========================================================================== */
:root { --ship-gap: clamp(0.8rem, 2vw, 1.4rem); }
.ship { display: grid; gap: var(--ship-gap); grid-template-columns: 1fr; margin-bottom: 1.5rem; }
@media (min-width: 761px) { .ship { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.ship__card {
  border: 3px solid var(--ink); background: var(--paper); box-shadow: 5px 5px 0 var(--ink);
  padding: clamp(1rem, 2.5vw, 1.5rem); display: grid; gap: 0.5rem; align-content: start;
}
.ship__icon { display: grid; place-items: center; width: 44px; height: 44px; background: var(--red); color: #fff; }
.ship__icon svg { width: 22px; height: 22px; }
.ship__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 2.4vw, 1.35rem); text-transform: uppercase; letter-spacing: -0.01em; }
.ship__body { white-space: pre-line; line-height: 1.5; font-size: 1.02rem; }
:root[data-theme='dark'] .ship__card { background: var(--paper-2); }

/* ==========================================================================
   Menú del celular: sin mover la página de atrás, se cierra tocando afuera,
   y también se puede abrir desde las publicaciones (☰ arriba a la derecha).
   ========================================================================== */
html.menu-open, html.menu-open body { overflow: hidden; overscroll-behavior: none; }
.menu { overscroll-behavior: contain; }
.menu.no-anim { transition: none !important; }
.menu-backdrop {
  position: fixed; inset: 0; z-index: -1;
  background: rgba(0, 0, 0, 0.45);
  touch-action: none;
}
.menu-backdrop[hidden] { display: none; }
@media (min-width: 861px) { .menu-backdrop { display: none !important; } }
/* con las publicaciones abiertas, el header (y su menú) pasa por encima */
html.menu-open body.feed-open .hd { z-index: 320; }
.feed__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.feed__menu {
  display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink);
}
.feed__menu svg { width: 20px; height: 20px; }

/* ==========================================================================
   Comprar / Compartir / Ver ficha — más claro cómo se compra
   ========================================================================== */
:root {
  --buy-bg: #25d366;      /* verde WhatsApp: llamativo */
  --buy-bg-hover: #1ebe5b;
  --buy-ink: #0b0b0b;     /* texto negro sobre verde (contraste alto) */
  --cta-h: 44px;
}
.cta-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.buy-btn, .share-btn, .more-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: var(--cta-h); padding: 0 0.95rem;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  border: 2px solid var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.buy-btn svg, .share-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.buy-btn { background: var(--buy-bg); color: var(--buy-ink); border-color: var(--buy-ink); box-shadow: 3px 3px 0 var(--buy-ink); flex: 1 1 auto; }
.buy-btn svg { color: var(--buy-ink); }
.buy-btn:hover, .buy-btn:focus-visible { background: var(--buy-bg-hover); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--buy-ink); outline: none; }
.share-btn { background: transparent; color: var(--red); border-color: var(--red); }
.share-btn:hover, .share-btn:focus-visible { background: var(--red); color: #fff; outline: none; }
.more-btn { width: 100%; background: var(--paper); color: var(--ink); border-color: var(--ink); font-size: 0.86rem; min-height: 48px; }
.more-btn:hover, .more-btn:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.buy-btn--big, .share-btn--big { min-height: 54px; font-size: 0.92rem; padding: 0 1.3rem; }
.cta-row--pd { margin: 0.4rem 0 1.4rem; }
.cta-row--pd .buy-btn { flex: 0 1 auto; min-width: 12rem; }

/* Panel de la tarjeta (fondo oscuro): Compartir y Ver ficha en claro */
.pc__panel-actions { display: grid; gap: 0.5rem; }
.pc__panel .share-btn { color: #ff6a55; border-color: #ff6a55; }
.pc__panel .share-btn:hover { background: #ff6a55; color: #000; }
.pc__panel .more-btn { background: var(--screen-ink); color: var(--screen); border-color: var(--screen-ink); }
.pc__panel .more-btn:hover { background: transparent; color: var(--screen-ink); }
.pc__panel .buy-btn { box-shadow: none; }

/* Publicaciones: precio + Comprar + Compartir arriba, "Ver ficha" abajo a todo el ancho */
.feed__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.feed__top .feed__price { font-size: 1.35rem; }
.feed__body .more-btn { margin: 0.2rem 0 1rem; }

/* Compartir en PC: ventanita */
.share-sheet { position: fixed; inset: 0; z-index: 400; background: rgba(0, 0, 0, 0.5); display: grid; place-items: end center; padding: 1rem; }
@media (min-width: 600px) { .share-sheet { place-items: center; } }
.share-sheet__box { width: min(100%, 26rem); background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 1rem 1.1rem 1.2rem; display: grid; gap: 0.75rem; }
.share-sheet__head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; }
.share-sheet__close { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.share-sheet__close svg { width: 16px; height: 16px; }
.share-sheet__title { font-weight: 600; }
.share-sheet__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.share-sheet__opt { display: grid; justify-items: center; gap: 0.35rem; padding: 0.75rem 0.3rem; border: 2px solid var(--ink); background: var(--paper-2); color: var(--ink); font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.share-sheet__opt svg, .share-sheet__opt b { width: 22px; height: 22px; font: 800 1.3rem/22px var(--font-display); text-align: center; }
.share-sheet__opt:hover, .share-sheet__opt:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.share-sheet__opt--wa svg { color: #1ebe5b; }
.share-sheet__opt.is-done { background: var(--buy-bg); color: var(--buy-ink); }
.share-sheet__hint { font-size: 0.85rem; color: var(--ink-2); }

/* Fotos de una publicación: SIEMPRE de a una por deslizamiento, sin importar la fuerza */
.feed__imgs { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.feed__imgs > * { scroll-snap-align: center; scroll-snap-stop: always; }
@media (max-width: 480px) {
  .feed__top .cta-row { flex: 1 1 100%; }
  .feed__top .cta-row > * { flex: 1 1 0; }
}


/* ==========================================================================
   MODO OSCURO — revisión
   · En todas las pantallas: modelo, categoría y líneas divisorias en un rojo
     bien marcado (antes pasaban desapercibidos en gris/crema).
   · Celular: menos crema. Marcos de las cámaras en rojo, buscador y "Ordenar"
     grises, menú desplegable rojo, burbujas y botones en grises.
   ========================================================================== */
:root[data-theme='dark'] {
  --dk-red: #ec4632;       /* acento sobre fondo oscuro (texto chico legible) */
  --dk-red-line: #c9301b;  /* líneas y marcos */
  --dk-menu: #a8180a;      /* menú desplegable */
  --dk-gray: #34312c;      /* superficies (buscador, ordenar) */
  --dk-gray-2: #46423c;    /* bordes */
  --dk-gray-3: #6a655d;    /* bordes que tienen que verse */
  --dk-text: #ece6d9;
}
/* modelo y categoría */
:root[data-theme='dark'] .pc__name span,
:root[data-theme='dark'] .pc__panel-cat,
:root[data-theme='dark'] .feed__head span,
:root[data-theme='dark'] .pd__kicker { color: var(--dk-red); }
/* líneas divisorias */
:root[data-theme='dark'] .hd { border-bottom-color: var(--dk-red-line); }
:root[data-theme='dark'] .section { border-top-color: var(--dk-red-line); }
:root[data-theme='dark'] .news + .cat::before { background: var(--dk-red-line); }
:root[data-theme='dark'] .feed__bar { border-bottom-color: var(--dk-red-line); }
:root[data-theme='dark'] .pd__specs tr, :root[data-theme='dark'] .pd__specs th, :root[data-theme='dark'] .pd__specs td { border-color: var(--dk-gray-2); }
/* tarjetas de Envíos: sin el borde crema grueso */
:root[data-theme='dark'] .ship__card { border-color: var(--dk-gray-3); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5); }
/* botones de la ficha / publicaciones */
:root[data-theme='dark'] .more-btn { background: var(--dk-gray); color: var(--dk-text); border-color: var(--dk-gray-3); }
:root[data-theme='dark'] .more-btn:hover { background: var(--dk-text); color: #14130f; }
:root[data-theme='dark'] .share-btn { color: var(--dk-red); border-color: var(--dk-red); }
:root[data-theme='dark'] .share-btn:hover { background: var(--dk-red); color: #fff; }
:root[data-theme='dark'] .buy-btn { box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6); }

@media (max-width: 860px) {
  /* marcos de las cámaras en rojo (vendidas en gris) */
  :root[data-theme='dark'] .pc__frame { background: var(--dk-gray); border-color: var(--dk-red-line); box-shadow: none; }
  :root[data-theme='dark'] .pc--off .pc__frame { border-color: var(--dk-gray-3); background: var(--dk-gray); }
  :root[data-theme='dark'] .news__card { border-color: var(--dk-gray-3); background: var(--dk-gray); }
  :root[data-theme='dark'] .news__card.is-center { border-color: var(--dk-red-line); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6); }
  /* buscador y "Ordenar" grises */
  :root[data-theme='dark'] .cat__search,
  :root[data-theme='dark'] .cat__sort select { background: var(--dk-gray); color: var(--dk-text); border-color: var(--dk-gray-3); }
  :root[data-theme='dark'] .cat__search input { color: var(--dk-text); }
  :root[data-theme='dark'] .cat__search input::placeholder { color: #a39b8b; }
  :root[data-theme='dark'] .cat__search svg { color: var(--dk-text); }
  :root[data-theme='dark'] .cat__page:not(.is-on) { background: var(--dk-gray); color: var(--dk-text); border-color: var(--dk-gray-3); }
  /* burbujas: aro gris, la elegida roja */
  :root[data-theme='dark'] .bubble__ring { border-color: var(--dk-gray-3); }
  :root[data-theme='dark'] .bubble__img { background: var(--dk-gray); color: var(--dk-text); }
  :root[data-theme='dark'] .bubble__img svg { color: var(--dk-text); }
  :root[data-theme='dark'] .dial__opt.bubble.is-on .bubble__ring { border-color: var(--dk-red); box-shadow: 0 0 0 2px var(--dk-red); }
  /* botón del menú y menú desplegable rojo */
  :root[data-theme='dark'] .hd__menu, :root[data-theme='dark'] .feed__menu { background: var(--dk-gray); color: var(--dk-text); border-color: var(--dk-gray-3); }
  :root[data-theme='dark'] .menu { background: var(--dk-menu); color: #fff; }
  :root[data-theme='dark'] .menu.is-open { border-top-color: var(--dk-red-line); }
  :root[data-theme='dark'] .menu__link, :root[data-theme='dark'] .menu__sub { color: #fff; border-color: rgba(0, 0, 0, 0.28); }
  :root[data-theme='dark'] .menu__link svg, :root[data-theme='dark'] .menu__theme svg { color: #fff; opacity: 1; }
  :root[data-theme='dark'] .menu__subs { background: rgba(0, 0, 0, 0.18); }
  /* logo del header: recuadro rojo más visible */
  :root[data-theme='dark'] .hd__brand.wordmark { border-color: var(--dk-red); }
}

/* ==========================================================================
   Publicaciones (celular): foto en un recuadro como el de la página principal
   (no de borde a borde), y fotos de a una (ver initPhotoStrip en views.js)
   ========================================================================== */
:root { --feed-inset: 14px; --feed-max-h: 56svh; }
.feed__media {
  width: min(calc(100% - 2 * var(--feed-inset)), calc(var(--feed-max-h) * 3 / 4));
  margin: 0 auto;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  overflow: hidden;
}
:root[data-theme='dark'] .feed__media { border-color: var(--dk-red-line); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6); }
.feed__head { padding-inline: var(--feed-inset); }
.feed__body { padding-inline: var(--feed-inset); }
.feed__media.is-js .feed__imgs {
  overflow: visible; scroll-snap-type: none;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.feed__media.is-js .feed__imgs.is-dragging { transition: none; }
.feed__media.is-js .feed__imgs > * { scroll-snap-align: none; -webkit-user-drag: none; }
@media (prefers-reduced-motion: reduce) { .feed__media.is-js .feed__imgs { transition-duration: 1ms; } }

/* Panel de la tarjeta (PC): Comprar, Compartir y Ver ficha del mismo tamaño */
.pc__panel .cta-row { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.pc__panel .buy-btn, .pc__panel .share-btn, .pc__panel .more-btn { width: 100%; min-height: var(--cta-h); font-size: 0.8rem; padding: 0 0.8rem; }
/* Publicaciones: Comprar y Compartir siempre del mismo ancho */
.feed__top .cta-row > * { flex: 1 1 0; min-height: var(--cta-h); }

/* ==========================================================================
   EASTER EGG — Pac-Man se come el logo (ver js/pacman.js)
   Solo actúa mientras dura la animación (.is-pac); no cambia ningún tamaño.
   ========================================================================== */
:root { --pac-yellow: #ffd21f; --pac-eye: #131313; --pac-chomp: 240ms; }
.hd__brand.is-pac { position: relative; overflow: clip; }
.pacman {
  position: absolute; left: 0; top: 50%;
  width: var(--pac); height: var(--pac); margin-top: calc(var(--pac) / -2);
  pointer-events: none; z-index: 2; will-change: transform;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.3));
}
.pacman__svg { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
/* boca: 4 cuadros fijos (cerrada → media → abierta → media), sin transición suave */
.pacman__f { opacity: 0; animation: pac-frame var(--pac-chomp) step-end infinite; }
.pacman__f--1 { animation-delay: calc(var(--pac-chomp) * -0.75); }
.pacman__f--2 { animation-delay: calc(var(--pac-chomp) * -0.5); }
.pacman__f--3 { animation-delay: calc(var(--pac-chomp) * -0.25); }
@keyframes pac-frame { 0% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pacman { display: none; } }

/* ==========================================================================
   Celular: sin zoom, con tope al llegar arriba/abajo, buscador cómodo
   ========================================================================== */
html { touch-action: manipulation; }          /* sin zoom por doble toque */
html, body { overscroll-behavior-y: none; }   /* sin "rebote" que muestra fondo vacío al final */
@media (max-width: 760px) {
  /* iPhone hace zoom solo si el texto del campo es < 16px */
  .cat .cat__search input { font-size: 16px; }
}
.cat__search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ==========================================================================
   Burbujas de categoría: nombres largos sin cortar palabras ("PROFESIONALE/S")
   y más grandes en PC. Cada opción se ensancha lo justo para la palabra más larga.
   ========================================================================== */
:root { --bubble-label: 0.64rem; }
@media (min-width: 761px) { :root { --bubble-label: 0.72rem; } }
@media (min-width: 1200px) { :root { --bubble-label: 0.82rem; } }
@media (min-width: 1920px) { :root { --bubble-label: 0.9rem; } }
.dial__opt.bubble { width: auto; min-width: calc(var(--bubble) + 18px); }
.bubble__label {
  font-size: var(--bubble-label);
  max-width: 10.5em;
  white-space: normal; overflow-wrap: normal; word-break: keep-all; hyphens: none;
  line-height: 1.2;
}

/* Pantalla de carga: solo el logo, sin recuadro */
.boot-screen__brand { border: 0; padding: 0; background: transparent; }

/* ==========================================================================
   Logo del header: más vivo y prolijo, sin cambiar su tamaño
   · sombra dura desplazada (como el resto de los botones del sitio)
   · cada ~9 s un reflejo de luz cruza el recuadro (como un vidrio)
   · al pasar el mouse: el recuadro "se levanta" y el logo se inclina
   ========================================================================== */
:root {
  --brand-shadow: var(--ink);
  --brand-sheen: rgba(255, 255, 255, 0.6);
  --brand-sheen-every: 9s;
  --brand-speed: 180ms;
}
:root[data-theme='dark'] { --brand-shadow: rgba(0, 0, 0, 0.7); --brand-sheen: rgba(255, 255, 255, 0.16); }
.hd__brand.wordmark {
  position: relative; overflow: clip; isolation: isolate;
  box-shadow: 3px 3px 0 var(--brand-shadow);
  transition: transform var(--brand-speed) ease, box-shadow var(--brand-speed) ease;
}
.hd__brand.wordmark::after {
  content: ''; position: absolute; top: -40%; bottom: -40%; left: 0; width: 38%;
  background: linear-gradient(100deg, transparent 0%, var(--brand-sheen) 50%, transparent 100%);
  transform: translateX(-160%) skewX(-18deg);
  animation: brand-sheen var(--brand-sheen-every) ease-in-out infinite 2s;
  pointer-events: none; z-index: 1;
}
@keyframes brand-sheen {
  0%, 82% { transform: translateX(-160%) skewX(-18deg); }
  96%, 100% { transform: translateX(380%) skewX(-18deg); }
}
.hd__logo { transition: transform var(--brand-speed) ease; }
.hd__brand.wordmark:hover, .hd__brand.wordmark:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--brand-shadow);
}
.hd__brand.wordmark:hover .hd__logo, .hd__brand.wordmark:focus-visible .hd__logo { transform: rotate(-8deg) scale(1.06); }
.hd__brand.wordmark:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--brand-shadow); }
/* mientras pasa el Pac-Man, sin reflejo */
.hd__brand.is-pac::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hd__brand.wordmark::after { animation: none; display: none; }
  .hd__brand.wordmark, .hd__logo { transition: none; }
}

/* FIX encuadre: la foto ocupa SIEMPRE el círculo exacto. Antes, dentro de un
   grid, "height: 100%" se resolvía contra la fila (que crecía con la foto): una
   foto vertical quedaba alta y pegada arriba → la cámara salía baja y cortada,
   distinto de la vista previa del panel. */
.bubble__img { position: relative; }
.bubble__img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* ==========================================================================
   Ficha del producto (mobile first): barra Volver / Inicio, foto 3:4 como el
   resto del sitio (toca → pantalla completa con zoom) y título más medido
   ========================================================================== */
.pd__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.pd__bar .pd__back { margin: 0; min-height: 44px; }
.pd__home {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.9rem;
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border: 2px solid var(--ink); color: var(--ink); background: transparent;
}
@media (hover: hover) { .pd__home:hover { background: var(--ink); color: var(--paper); } }
.pd__gallery-main { aspect-ratio: 3 / 4; cursor: zoom-in; }
@media (min-width: 861px) {
  .pd__gallery-main { width: min(100%, calc(76vh * 3 / 4)); margin-inline: auto; }
}
.pd__zoom {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: grid; place-items: center; width: 36px; height: 36px;
  background: rgba(19, 19, 19, 0.72); color: #fff; pointer-events: none;
}
.pd__zoom svg { width: 18px; height: 18px; }
.pd__title { font-size: clamp(1.35rem, 5.4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pd__name { font-size: 0.95rem; }

/* Visor de fotos a pantalla completa */
html.lb-open, html.lb-open body { overflow: hidden; }
.lb {
  --lb-fade: 1;
  position: fixed; inset: 0; z-index: 600;
  background: rgba(8, 8, 8, calc(0.96 * var(--lb-fade)));
  display: grid; grid-template-rows: auto 1fr auto; color: #fff;
}
.lb__top { display: flex; align-items: center; justify-content: space-between; padding: max(10px, env(safe-area-inset-top)) 12px 8px; }
.lb__count { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.1em; }
.lb__close { display: grid; place-items: center; width: 44px; height: 44px; background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.7); cursor: pointer; }
.lb__close svg { width: 18px; height: 18px; }
.lb__stage { position: relative; overflow: hidden; display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.lb__img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; will-change: transform; -webkit-user-drag: none; }
.lb__img.is-anim { transition: transform 220ms ease; }
.lb.is-zoomed .lb__stage { cursor: grab; }
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px;
  background: rgba(0, 0, 0, 0.55); color: #fff; border: 2px solid rgba(255, 255, 255, 0.6); cursor: pointer;
}
.lb__nav svg { width: 20px; height: 20px; }
.lb__nav--prev { left: 10px; }
.lb__nav--next { right: 10px; }
.lb.is-zoomed .lb__nav { opacity: 0; pointer-events: none; }
.lb__hint { text-align: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; opacity: 0.7; padding: 10px 12px max(14px, env(safe-area-inset-bottom)); margin: 0; }
@media (hover: none) { .lb__nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .lb__img.is-anim { transition: none; } }
.pd__bar .pd__back svg { width: 20px; height: 20px; flex-shrink: 0; }
.pd__bar .pd__back span { white-space: nowrap; }
@media (max-width: 760px) {
  .cta-row--pd > * { flex: 1 1 0; min-width: 0; }
}
/* visor: fondo negro sólido (solo se aclara al deslizar hacia abajo para cerrar) */
.lb { background: rgb(8 8 8 / var(--lb-fade)); }

/* Modo oscuro (celular): menú desplegable con brillo bajo — fondo gris oscuro,
   punteado y texto en rojo (antes todo el fondo rojo, demasiado fuerte) */
@media (max-width: 860px) {
  :root[data-theme='dark'] .menu { background: #1d1b18; color: var(--dk-red); }
  :root[data-theme='dark'] .menu.is-open { border-top-color: var(--dk-red-line); }
  :root[data-theme='dark'] .menu__link,
  :root[data-theme='dark'] .menu__sub { color: var(--dk-red); border-bottom-color: rgba(201, 48, 27, 0.55); }
  :root[data-theme='dark'] .menu__link svg,
  :root[data-theme='dark'] .menu__theme svg { color: var(--dk-red); }
  :root[data-theme='dark'] .menu__subs { background: rgba(0, 0, 0, 0.28); }
  :root[data-theme='dark'] .menu__sub { color: #e8a59a; }
}

/* Logo del header en celular: sin "hover pegado" (en el teléfono el estado
   hover quedaba activo después de tocar → el logo seguía girado), sin el
   resaltado gris del toque ni el recuadro de foco al tocarlo. Los efectos
   de mouse quedan solo para PC. */
.hd__brand { -webkit-tap-highlight-color: transparent; }
.hd__brand:focus:not(:focus-visible) { outline: none; }
@media (hover: none), (pointer: coarse) {
  .hd__brand.wordmark:hover, .hd__brand.wordmark:focus { transform: none; box-shadow: 3px 3px 0 var(--brand-shadow); outline: none; }
  .hd__brand.wordmark:hover .hd__logo, .hd__brand.wordmark:focus .hd__logo { transform: none; }
  .hd__brand.wordmark:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--brand-shadow); }
}

/* ==========================================================================
   "Ordenar": menú propio (mismo tamaño que tenía el selector)
   ========================================================================== */
.sortdd { position: relative; }
.sortdd__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  width: 100%; height: var(--cat-ctl-h); padding: 0 0.7rem;
  font-family: var(--font-mono); font-size: var(--cat-ctl-font); letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sortdd__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sortdd__btn svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 160ms ease; }
.sortdd.is-open .sortdd__btn svg { transform: rotate(180deg); }
.sortdd.has-value .sortdd__btn { color: var(--red); border-color: var(--red); }
.sortdd__btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.sortdd__list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: max(100%, 11.5rem); margin: 0; padding: 0; list-style: none;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
}
.sortdd__opt {
  display: flex; align-items: center; min-height: 44px; padding: 0 0.9rem;
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink); cursor: pointer; border-bottom: 1px dashed var(--line-soft, rgba(0, 0, 0, 0.12));
}
.sortdd__opt:last-child { border-bottom: 0; }
.sortdd__opt[aria-selected='true'] { color: var(--red); font-weight: 700; }
.sortdd__opt[aria-selected='true']::before { content: ''; width: 8px; height: 8px; background: var(--red); margin-right: 0.55rem; }
.sortdd__opt:hover, .sortdd__opt:focus { background: var(--ink); color: var(--paper); outline: none; }
@media (max-width: 760px) {
  .sortdd__btn { font-size: 0.72rem; letter-spacing: 0; padding: 0 0.5rem; }
}
:root[data-theme='dark'] .sortdd__list { background: var(--paper-2); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6); }
@media (max-width: 860px) {
  :root[data-theme='dark'] .sortdd__btn { background: var(--dk-gray); color: var(--dk-text); border-color: var(--dk-gray-3); }
  :root[data-theme='dark'] .sortdd.has-value .sortdd__btn { color: var(--dk-red); border-color: var(--dk-red); }
  :root[data-theme='dark'] .sortdd__list { background: var(--dk-gray); border-color: var(--dk-gray-3); }
  :root[data-theme='dark'] .sortdd__opt { color: var(--dk-text); border-bottom-color: var(--dk-gray-2); }
  :root[data-theme='dark'] .sortdd__opt[aria-selected='true'] { color: var(--dk-red); }
}

/* ==========================================================================
   Ficha: "También te puede interesar" — 6 disponibles al azar
   Celular: fila que se desliza de costado. PC: 6 en fila.
   ========================================================================== */
:root { --rel-gap: clamp(0.6rem, 1.6vw, 1.1rem); --rel-card-w: 42vw; }
.rel {
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 3px solid var(--ink);
}
.rel__title { font-size: clamp(1.15rem, 3.2vw, 1.6rem); text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 1.1rem; }
.rel__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--rel-card-w); gap: var(--rel-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; padding: 0 0 8px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}
.rel__row::-webkit-scrollbar { display: none; }
.rel__card { display: grid; gap: 0.35rem; align-content: start; color: var(--ink); scroll-snap-align: start; min-width: 0; }
.rel__frame {
  display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden;
  border: 3px solid var(--ink); background: var(--paper-2); box-shadow: 3px 3px 0 var(--ink);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.rel__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rel__frame svg { width: 30%; height: auto; color: var(--ink-3); }
.rel__name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 1.1;
  font-size: clamp(0.82rem, 1.2vw, 1rem); margin-top: 0.3rem; overflow-wrap: anywhere;
}
.rel__name span { display: block; color: var(--ink-2); font-weight: 600; }
.rel__price { font-family: var(--font-mono); font-size: clamp(0.85rem, 1.1vw, 1rem); }
@media (hover: hover) and (pointer: fine) {
  .rel__card:hover .rel__frame { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
}
@media (min-width: 761px) { :root { --rel-card-w: 30vw; } }
@media (min-width: 1024px) {
  .rel__row { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
}
:root[data-theme='dark'] .rel { border-top-color: var(--dk-red-line); }
:root[data-theme='dark'] .rel__name span { color: var(--dk-red); }
@media (max-width: 860px) {
  :root[data-theme='dark'] .rel__frame { border-color: var(--dk-red-line); box-shadow: none; background: var(--dk-gray); }
}

/* ==========================================================================
   Catálogo (PC): ☰ arriba a la derecha de cada producto
   · mouse sobre la tarjeta → solo las fotos (carrusel, zoom)
   · mouse sobre ☰ → se abre la ficha al costado (y queda abierta mientras
     el mouse siga en la tarjeta o en la ficha)
   ========================================================================== */
.pc__ficha { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pc__ficha {
    position: absolute; top: 6px; right: 6px; z-index: 6;
    display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    background: var(--ink); color: var(--paper); border: 2px solid var(--paper);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); cursor: pointer;
    transition: background-color 150ms ease, transform 150ms ease;
  }
  .pc__ficha svg { width: 16px; height: 16px; }
  .pc__ficha:hover, .pc__ficha:focus-visible, .pc.is-ficha .pc__ficha { background: var(--red); color: #fff; outline: none; }
  .pc.is-ficha .pc__ficha { transform: scale(1.06); }
  /* el ▶ de "tiene video" pasa a la izquierda para no chocar con ☰ */
  .pc__vidbadge { right: auto; left: 6px; }
  /* el hover ya NO abre la ficha: solo ☰ */
  .pc:hover .pc__panel { opacity: 0; pointer-events: none; }
  .pc.is-ficha .pc__panel { opacity: 1; pointer-events: auto; }
  .pc.is-ficha.pc--right .pc__panel { left: 100%; right: auto; width: 250px; max-width: 60vw; margin-left: 8px; }
  .pc.is-ficha.pc--left .pc__panel  { right: 100%; left: auto; width: 250px; max-width: 60vw; margin-right: 8px; }
  .pc.is-ficha.pc--v-mid .pc__panel { top: 50%; bottom: auto; transform: translateY(-50%); }
  .pc.is-ficha.pc--v-bot .pc__panel { top: auto; bottom: 0; }
  .pc.is-ficha { z-index: 41; }
}
:root[data-theme='dark'] .pc__ficha { background: #14130f; color: var(--dk-text, #ece6d9); border-color: var(--dk-text, #ece6d9); }

/* ☰: la ficha es solo una vista previa mientras el mouse está sobre ☰ (no se
   puede "entrar" a ella ni tapa la cámara de al lado al recorrer el catálogo) */
@media (hover: hover) and (pointer: fine) {
  .pc.is-ficha .pc__panel { pointer-events: none; }
  .pc__ficha { cursor: pointer; }
}

/* Ficha de ☰ con texto largo: pista "ruedita para leer más" pegada abajo */
.pc__wheelhint {
  position: sticky; bottom: -0.9rem; margin: 0 -0.9rem -0.9rem; padding: 1.4rem 0.9rem 0.55rem;
  background: linear-gradient(to bottom, transparent, var(--screen) 55%);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; color: #ff6a55;
  transition: opacity 160ms ease;
}
.pc__wheelhint.is-end { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .pc__panel { scrollbar-width: thin; }
}

/* PC: la ficha de ☰ es una vista previa (se cierra al salir de ☰), así que sus
   botones no se podían tocar → se ocultan y se indica cómo abrir la ficha
   completa. En pantallas táctiles la ficha sí se toca: ahí siguen los botones. */
.pc__panel-more { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pc__panel .pc__panel-actions { display: none; }
  .pc__panel-more {
    display: block; margin: 0; padding-top: 0.6rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.22);
    font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: #ff6a55;
  }
}

/* ==========================================================================
   Descripciones más legibles (ficha, publicaciones del celular y vista previa
   de ☰): letra de texto (Inter) en vez de monoespaciada, más grande, con más
   interlineado y en el color de texto principal (contraste pleno en claro y
   oscuro). Renglones de ancho cómodo.
   ========================================================================== */
:root { --desc-size: 1rem; --desc-lh: 1.65; }
@media (min-width: 861px) { :root { --desc-size: 1.06rem; } }
.pd__desc {
  font-family: var(--font-body);
  font-size: var(--desc-size);
  line-height: var(--desc-lh);
  color: var(--ink);
  max-width: 62ch;
}
.feed__desc {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink);
}
.pc__desc {
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* Pantallas táctiles anchas (tablets, >760 px): el viejo "+" (no hacía nada)
   ahora es ☰ y abre la ficha completa de la cámara, igual que en PC. */
.pc__toggle svg { width: 15px; height: 15px; }
@media (hover: none), (pointer: coarse) {
  .pc__toggle { text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .pc__toggle:active { background: var(--red); }
}

/* Botón de la ficha: «+» solo en PC (con mouse). En tablets y celulares no hay
   botón: tocar la foto abre las publicaciones. */
.pc__toggle { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  .pc__ficha svg { width: 16px; height: 16px; display: block; }
}

/* Visor: la foto SIEMPRE entra entera en la pantalla (antes la fila del medio
   crecía al alto real de la foto y quedaba recortada) */
.lb { grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100dvh; }
.lb__stage { min-height: 0; min-width: 0; }
.lb__img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }

/* Ficha en PC: "Volver al catálogo" e "Inicio" más grandes y fáciles de tocar */
.pd__bar .pd__back {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 48px; padding: 0 1.1rem 0 0.9rem;
  border: 2px solid var(--ink); color: var(--ink); background: var(--paper);
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.08em;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, color 150ms ease;
}
.pd__bar .pd__back svg { width: 22px; height: 22px; }
.pd__home { min-height: 48px; padding: 0 1.1rem; font-size: 0.86rem; box-shadow: 3px 3px 0 var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .pd__bar .pd__back:hover { background: var(--ink); color: var(--paper); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
}
@media (min-width: 1200px) {
  .pd__bar .pd__back, .pd__home { min-height: 52px; font-size: 0.95rem; }
  .pd__bar .pd__back svg { width: 24px; height: 24px; }
}
@media (max-width: 760px) {
  .pd__bar .pd__back { min-height: 44px; padding: 0 0.8rem 0 0.6rem; font-size: 0.74rem; box-shadow: 2px 2px 0 var(--ink); }
  .pd__home { min-height: 44px; font-size: 0.74rem; box-shadow: 2px 2px 0 var(--ink); }
}
:root[data-theme='dark'] .pd__bar .pd__back { background: transparent; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6); }
:root[data-theme='dark'] .pd__home { box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6); }
.lb__img { position: absolute; inset: 0; }