/* Selector de propuestas de color (12-10-2026). Herramienta temporal para que el
   cliente elija paleta: se quita borrando este archivo, paletas.js y sus dos
   líneas en cada página. Todas las propuestas usan solo los colores de marca:
   #FE0026 · #000000 · #726F6F · #8C8888 · #999999 · #EFEFEF. */

/* ---------- Propuesta 2 · Grafito ---------- */
html[data-paleta="grafito"]{--panel:#EFEFEF;--fondo-2:#EFEFEF;--panel-2:#e4e3e3;--acento-t:#726F6F}
html[data-paleta="grafito"] .franja,
html[data-paleta="grafito"] .pie{
  --fondo:#726F6F;--fondo-2:#726F6F;--panel:#8C8888;--panel-2:#999999;--c:255,255,255;
  --linea:rgba(255,255,255,.22);--linea-2:rgba(255,255,255,.35);
  --texto:#fff;--texto-2:#EFEFEF;--fuerte:#fff;--tenue:#EFEFEF;--tenue-2:#EFEFEF;--acento-t:#fff;--gris-t:#EFEFEF;--gris-logo:#fff;
  background:#726F6F;color:var(--texto)}
html[data-paleta="grafito"] .franja span::after{background:#EFEFEF}
html[data-paleta="grafito"] .pie .logo span b{color:#fff}
/* 13-10: la clienta pidió las palabras destacadas en rojo (terreno, marcas, destacados…), así que
   aquí quedan con el rojo por defecto de estilos.css; solo en las franjas grises van en blanco con
   subrayado rojo (más abajo), porque rojo sobre #726F6F no se lee (contraste 1,2). */
html[data-paleta="grafito"] .btn-gris{background:#726F6F}
html[data-paleta="grafito"] .btn-gris:hover{background:#000}

/* ---------- Propuesta 3 · Negro y rojo ---------- */
html[data-paleta="negro"]{--panel:#EFEFEF;--fondo-2:#EFEFEF;--panel-2:#e4e3e3}
html[data-paleta="negro"] .cab,
html[data-paleta="negro"] .pie,
html[data-paleta="negro"] .cifras{
  --fondo:#000;--fondo-2:#0d0d0d;--panel:#1a1a1a;--panel-2:#262626;--c:255,255,255;
  --linea:rgba(255,255,255,.14);--linea-2:rgba(255,255,255,.26);
  --texto:#EFEFEF;--texto-2:#EFEFEF;--fuerte:#fff;--tenue:#999999;--tenue-2:#999999;--acento-t:#ff4d68;--gris-t:#999999;--gris-logo:#EFEFEF;
  color:var(--texto)}
html[data-paleta="negro"] .cab{background:rgba(0,0,0,.94)}
html[data-paleta="negro"] .pie{background:#000}
html[data-paleta="negro"] .cifras{background:#000;border-radius:var(--r);overflow:hidden}
html[data-paleta="negro"] .franja{background:#FE0026;--texto:#fff;--texto-2:#fff;--tenue:#fff;--acento-t:#000;--fuerte:#fff}
html[data-paleta="negro"] .franja span::after{background:#000}
html[data-paleta="negro"] .btn-gris{background:#000}

/* ---------- Bloques que cambian de fondo en las propuestas 2 y 3 ---------- */
html[data-paleta="grafito"] .banda,
html[data-paleta="grafito"] .pre-pie,
html[data-paleta="negro"] .banda,
html[data-paleta="negro"] .pre-pie{
  --c:255,255,255;--linea:rgba(255,255,255,.18);--linea-2:rgba(255,255,255,.32);
  --texto:#fff;--texto-2:#EFEFEF;--fuerte:#fff;--tenue:#EFEFEF;--tenue-2:#EFEFEF;--gris-t:#EFEFEF;color:var(--texto)}
html[data-paleta="grafito"] .banda,
html[data-paleta="grafito"] .pre-pie{background:#726F6F;--acento-t:#fff}
html[data-paleta="negro"] .banda,
html[data-paleta="negro"] .pre-pie{background:#000;--acento-t:#ff4d68}
html[data-paleta="grafito"] .banda .h2 em,html[data-paleta="grafito"] .pre-pie .h2 em{color:#fff;text-decoration:underline;text-decoration-color:#FE0026;text-decoration-thickness:.08em;text-underline-offset:.12em}
html[data-paleta] .banda .paso{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
html[data-paleta] .banda .paso:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
html[data-paleta="grafito"] .banda .btn-gris,html[data-paleta="negro"] .banda .btn-gris{background:#fff;color:#000}
html[data-paleta="grafito"] .marcas-sec{background:#EFEFEF}
html[data-paleta="negro"] .pre-pie{border-top-color:#000}

/* ---------- Botón y panel del selector ---------- */
.paletas-btn{position:fixed;right:0;top:50%;z-index:90;transform:translateY(-50%);display:flex;align-items:center;gap:8px;
  writing-mode:vertical-rl;padding:16px 10px;border:0;border-radius:12px 0 0 12px;cursor:pointer;
  background:#000;color:#fff;font:700 13px/1 var(--titulo);letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 8px 28px rgba(0,0,0,.28)}
.paletas-btn:hover{background:#FE0026}
/* como WhatsApp y la flecha: se oculta mientras hay un panel abierto (menú móvil, cotización, filtros, visor) */
body.bloq .paletas-btn,body.bloq .paletas-panel{display:none}
.paletas-btn:focus-visible{outline:3px solid #FE0026;outline-offset:2px}
.paletas-btn .gota{width:12px;height:12px;border-radius:50%;background:conic-gradient(#FE0026 0 33%,#726F6F 0 66%,#EFEFEF 0)}
.paletas-panel{position:fixed;right:58px;top:50%;z-index:91;transform:translate(16px,-50%);opacity:0;visibility:hidden;
  width:min(320px,calc(100vw - 76px));max-height:calc(100dvh - 32px);overflow:auto;padding:18px;border-radius:16px;
  background:#fff;color:#111;box-shadow:0 24px 60px rgba(0,0,0,.3);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1),visibility .2s}
.paletas-panel.abierto{opacity:1;visibility:visible;transform:translate(0,-50%)}
.paletas-panel h2{margin:0 0 4px;font:700 18px/1.2 var(--titulo)}
.paletas-panel p{margin:0 0 14px;font-size:13.5px;line-height:1.45;color:#555}
.paletas-op{display:flex;align-items:center;gap:12px;width:100%;margin-top:8px;padding:12px;border:2px solid #e4e3e3;border-radius:12px;
  background:#fff;color:#111;text-align:left;cursor:pointer;font:inherit}
.paletas-op:hover{border-color:#999999}
.paletas-op[aria-pressed="true"]{border-color:#FE0026;box-shadow:0 0 0 1px #FE0026}
.paletas-op .muestras{display:flex;flex:none}
.paletas-op .muestras i{width:22px;height:40px;display:block}
.paletas-op .muestras i:first-child{border-radius:8px 0 0 8px}
.paletas-op .muestras i:last-child{border-radius:0 8px 8px 0}
.paletas-op b{display:block;font:700 15px/1.2 var(--titulo)}
.paletas-op small{display:block;margin-top:3px;font-size:12.5px;line-height:1.35;color:#666}
.paletas-cerrar{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:#EFEFEF;cursor:pointer;font-size:18px;line-height:1;color:#111}
@media (max-width:600px){
  .paletas-btn{top:auto;bottom:96px;transform:none;padding:12px 8px;font-size:12px}
  .paletas-panel{right:12px;left:12px;width:auto;top:auto;bottom:16px;transform:translateY(16px)}
  .paletas-panel.abierto{transform:none}
}
@media (prefers-reduced-motion:reduce){.paletas-panel{transition:none}}