/* Paletas de Rojo Creativo: el rojo de la marca no cambia; cambia el color que lo acompaña.
   Roles: fondo (la página), superficie (tarjetas), campo (bandas de color propio), tinta, tenue, línea, acento. */
:root {
  --rojo: #d10a24;
  --rojo-hondo: #a8061b;
  --sobre-rojo: #ffffff;
  --sobre-rojo-tenue: #ffeaed;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}
:root, [data-paleta="blanco"] {
  --fondo: #f3f1f2;
  --superficie: #ffffff;
  --campo: #e9e3e4;
  --sobre-campo: #1b1514;
  --sobre-campo-tenue: #5b5556;
  --tinta: #1b1514;
  --tenue: #5b5556;
  --linea: #e4dfe0;
  --acento: #fde3e6;
  --acento-2: #fff1f3;
}
[data-paleta="rosa"] {
  --fondo: #fdeff2;
  --superficie: #ffffff;
  --campo: #f8c3cf;
  --sobre-campo: #4d0614;
  --sobre-campo-tenue: #7a2a3a;
  --tinta: #2b0a10;
  --tenue: #6b4950;
  --linea: #f2d6dc;
  --acento: #f8c3cf;
  --acento-2: #fde3e9;
}
[data-paleta="mantequilla"] {
  --fondo: #fff6dd;
  --superficie: #ffffff;
  --campo: #ffcf4d;
  --sobre-campo: #3a1500;
  --sobre-campo-tenue: #6b3d12;
  --tinta: #2a1610;
  --tenue: #6a5242;
  --linea: #f0e2b8;
  --acento: #ffe39a;
  --acento-2: #fff0c4;
}
[data-paleta="vino"] {
  --fondo: #f8f3f3;
  --superficie: #ffffff;
  --campo: #5c0a1a;
  --sobre-campo: #ffe9ec;
  --sobre-campo-tenue: #e7b9c1;
  --tinta: #24090e;
  --tenue: #685156;
  --linea: #eadcdf;
  --acento: #f3d9de;
  --acento-2: #f9ecee;
}
[data-paleta="cielo"] {
  --fondo: #eef5fc;
  --superficie: #ffffff;
  --campo: #bfe0ff;
  --sobre-campo: #0d2a4a;
  --sobre-campo-tenue: #2f5175;
  --tinta: #13202e;
  --tenue: #4d5c6b;
  --linea: #d8e5f2;
  --acento: #d5eaff;
  --acento-2: #e8f3ff;
}

::selection { background: var(--rojo); color: var(--sobre-rojo); }
html { accent-color: var(--rojo); caret-color: var(--rojo); scrollbar-color: color-mix(in srgb, var(--rojo) 55%, var(--fondo)) var(--fondo); }

/* ---------- barra de propuestas y paletas (solo para comparar; no va en el sitio final) ---------- */
.prop-bar {
  position: fixed; left: 50%; bottom: 16px; z-index: 40; translate: -50% 0;
  display: flex; align-items: center; gap: 6px; padding: 6px; max-width: calc(100vw - 24px);
  border-radius: 999px; background: #1b1514; color: #fff; font: 600 14px/1 "Onest", system-ui, sans-serif;
  box-shadow: 0 14px 34px -14px rgb(20 8 10 / 0.55);
  transition: translate 260ms var(--ease-out), opacity 200ms ease;
}
.prop-bar.lejos { translate: -50% calc(100% + 24px); opacity: 0; }
.prop-bar nav, .prop-bar .swatches { display: flex; align-items: center; gap: 2px; }
.prop-bar a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  color: #d8cfd0; text-decoration: none; white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.prop-bar a[aria-current="page"] { background: #fff; color: #1b1514; }
.prop-bar a:active, .prop-bar .sw:active { transform: scale(0.95); }
.prop-bar .sep { width: 1px; height: 22px; background: #4a3e40; margin-inline: 6px; }
.prop-bar .sw {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: transparent; transition: transform 160ms var(--ease-out);
}
.prop-bar .sw span {
  width: 24px; height: 24px; border-radius: 50%;
  background: conic-gradient(var(--rojo) 0 50%, var(--c) 50% 100%);
  border: 1px solid rgb(255 255 255 / 0.3);
}
.prop-bar .sw[aria-pressed="true"] { outline: 2px solid #fff; outline-offset: -2px; }
.prop-bar :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .prop-bar a:not([aria-current]):hover { background: #34292b; color: #fff; } }
@media (max-width: 560px) {
  .prop-bar { bottom: 10px; font-size: 12.5px; gap: 0; padding: 4px; }
  .prop-bar a { padding: 0 8px; min-height: 34px; }
  .prop-bar .sw { width: 28px; height: 34px; }
  .prop-bar .sw span { width: 20px; height: 20px; }
  .prop-bar .sep { margin-inline: 2px; }
}
@media (prefers-reduced-motion: reduce) { .prop-bar { transition: none; } }

/* Esqueleto de carga de los pósters y del 3D en vivo (lo pone comun.js; desaparece al llegar la imagen).
   Ocupa el lugar real para que nada brinque, y se dibuja un poco más chico, como la silueta del objeto. */
.esqueleto {
  display: block; height: 100%; width: auto; max-width: 100%; margin-inline: auto; border-radius: 16px; scale: 0.8;
  background:
    linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.5) 50%, transparent 65%) 0 0 / 250% 100% no-repeat,
    color-mix(in srgb, currentColor 9%, transparent);
  animation: rc-brillo 1.6s linear infinite;
}
.esqueleto.flotante { position: absolute; inset: 0; width: auto; height: auto; max-width: none; scale: 0.6; }
@keyframes rc-brillo { from { background-position: 150% 0, 0 0; } to { background-position: -150% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }