/* ==========================================================================
   Bancada — Contenido extra (Bancada Pro)
   El nombre en la barra y el arranque, la pantalla de primera vez, el diálogo
   del código, la vista previa a pantalla completa y las fichas «+N módulos».
   Sólo tokens: sale igual de bien en claro y en oscuro.
   ========================================================================== */

/* Varios de estos elementos son flex o grid, y a ésos el [hidden] del
   navegador no los esconde. */
.pro-ficha[hidden], .pro-ficha-amb[hidden],
.pro-vista [hidden], .pro-inicio [hidden], .pro-bienvenida [hidden] { display: none !important; }

/* ---- El nombre: «Bancada» pasa a «Bancada Pro» con el contenido abierto ------ */
/* `js/marca-pro.js` pone data-pro en el <head>, antes del primer pintado: por
   eso no hay un instante en que diga «Bancada» y después cambie. */
.marca-pro { display: none; }
:root[data-pro="1"] .marca-pro { display: inline; }

:root[data-pro="1"] .titlebar__marca .marca-pro {
  display: inline-block;
  margin-left: 2px;
  padding: 0 7px;
  height: 17px;
  line-height: 15px;
  vertical-align: 1px;
  border-radius: var(--r-pill);
  background: var(--acc-soft);
  border: 1px solid var(--acc-line);
  color: var(--acc-ink);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .08em;
}
#arranque .marca .marca-pro { color: var(--acc); }

/* ---- El inicio: «Desbloquear contenido» / «Contenido Pro activado» ----------- */
.inicio__interior { position: relative; }
.pro-inicio {
  position: absolute;
  top: var(--s5);
  right: var(--s7);
  z-index: 1;
  display: flex;
  align-items: center;
}
.pro-inicio:empty { display: none; }
.pro-inicio .btn svg { color: var(--acc); }
/* Sin el código: una franja a la vista, arriba del saludo, en lugar de un botón suelto en el rincón. */
.pro-inicio--franja {
  position: static;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s5);
  padding: var(--s2) var(--s4);
  background: var(--acc-soft);
  border: 1px solid var(--acc-line);
  border-radius: var(--r-md);
}
.pro-inicio__texto { font-size: var(--fs-sm); font-weight: 600; color: var(--acc-ink); }
.pro-inicio__acciones { display: flex; align-items: center; gap: var(--s2); }
.pro-enlace-compra { color: var(--acc-ink); font-weight: 640; text-decoration: underline; text-underline-offset: 3px; }
.pro-enlace-compra:hover { text-decoration: none; }
.pro-inicio__activo svg { flex: none; }
/* «Curso Bancada» a la izquierda, solo; la franja del código a la derecha. */
.inicio__superior {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s5);
}
.inicio__superior .pro-inicio--franja { margin-bottom: 0; }

/* ---- Diálogos: el código y la pantalla de primera vez ------------------------ */
.modal--pro { width: min(480px, 100%); }
.modal--pro-ancha { width: min(600px, 100%); }

.pro-ingreso { display: flex; flex-direction: column; gap: var(--s4); }
.pro-ingreso__aparte { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-base); }
.pro-ingreso__texto { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); line-height: var(--lh-base); }

.pro-codigo {
  height: 50px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pro-codigo::placeholder { letter-spacing: .14em; text-transform: none; }
.pro-codigo[aria-invalid="true"] { border-color: var(--bad); }
.pro-codigo[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--bad-soft); }
.pro-codigo[readonly] { background: var(--paper-2); }

/* Lugar fijo para el estado: así el diálogo no salta cuando aparece un error. */
.pro-estado { min-height: 46px; margin-top: calc(var(--s2) * -1); }
.pro-error {
  display: flex; align-items: flex-start; gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--bad-line);
  background: var(--bad-soft);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.pro-error svg { flex: none; margin-top: 1px; color: var(--bad); }

.pro-abriendo { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s2); font-size: var(--fs-sm); color: var(--ink-3); }
.pro-abriendo .progreso__relleno { width: 38% !important; animation: pro-corre 1.15s var(--ease) infinite; }
@keyframes pro-corre { from { transform: translateX(-100%); } to { transform: translateX(270%); } }

.pro-bienvenida { display: flex; flex-direction: column; gap: var(--s3); }
.pro-bienvenida__texto { margin: 0; font-size: var(--fs-base); color: var(--ink-2); line-height: var(--lh-base); }
.pro-bienvenida .mudo { color: var(--ink-3); font-size: var(--fs-sm); }
.pro-bienvenida .pro-adelantos {
  height: 128px;
  margin-bottom: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: radial-gradient(120% 90% at 50% 0%, var(--surface) 0%, var(--acc-soft) 100%);
}

/* El aviso de un trabajo con muebles extra y sin el código. */
.pro-bloqueo { display: flex; flex-direction: column; gap: var(--s3); }
.pro-bloqueo__texto { margin: 0; font-size: var(--fs-base); color: var(--ink-2); line-height: var(--lh-base); overflow-wrap: anywhere; }
.pro-bloqueo .mudo { color: var(--ink-3); font-size: var(--fs-sm); }

/* Adelantos: hasta tres muebles dibujados por el propio motor. */
.pro-adelantos {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s1);
  height: 100%;
  padding: 6px var(--s3);
}
.pro-adelantos__item { flex: 1 1 0; min-width: 0; max-width: 36%; height: 100%; }
.pro-adelantos__item canvas { display: block; width: 100%; height: 100%; }

/* ---- La ficha «+N módulos extra» ------------------------------------------- */
.pro-ficha { background: var(--acc-soft); border-color: var(--acc-line); }
.pro-ficha .cat-tarjeta__mini {
  border-bottom-color: var(--acc-line);
  background: radial-gradient(120% 90% at 50% 0%, var(--surface) 0%, var(--acc-soft-2) 100%);
}
.pro-ficha .cat-tarjeta__nombre { color: var(--acc-ink); }
.pro-ficha .cat-tarjeta__desc { color: var(--ink-2); }
.pro-ficha__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 640; color: var(--acc-ink);
}
.pro-ficha__cta svg { transition: transform var(--t) var(--ease-out); }
.pro-ficha:hover .pro-ficha__cta svg { transform: translateX(3px); }

.pro-ficha-amb { background: var(--acc-soft); border-color: var(--acc-line); min-height: 60px; }
.pro-ficha-amb .amb-elegir__ico { background: var(--acc-soft-2); }
.pro-ficha-amb .amb-elegir__nombre { color: var(--acc-ink); }
.pro-ficha-amb .amb-elegir__desc { color: var(--ink-2); }

/* ==========================================================================
   La vista previa
   ========================================================================== */
.pro-vista {
  position: fixed;
  top: var(--titlebar-h); right: 0; bottom: 0; left: 0;
  z-index: 120;
  display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 520px at 12% -10%, var(--acc-soft) 0%, transparent 62%),
    radial-gradient(900px 460px at 92% 6%, var(--steel-soft) 0%, transparent 58%),
    var(--paper);
  animation: pro-entra var(--t-slow) var(--ease-out);
}
.pro-vista:focus { outline: none; }
.pro-vista--saliendo { animation: pro-sale var(--t) var(--ease) forwards; pointer-events: none; }
@keyframes pro-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pro-sale { to { opacity: 0; transform: translateY(6px); } }

/* ---- Barra de arriba ---- */
.pro-vista__barra {
  flex: none;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s6);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.pro-volver svg { transform: scaleX(-1); }
.pro-vista__marca { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.pro-vista__nombre {
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.014em;
  color: var(--ink);
  white-space: nowrap;
}
.pro-vista__pro { color: var(--acc-ink); }
.pro-acciones { display: flex; align-items: center; gap: var(--s2); flex: none; }
.pro-acciones .btn svg { color: currentColor; }

/* ---- Cuerpo ---- */
.pro-vista__cuerpo { flex: 1; min-height: 0; overflow-y: auto; }
.pro-vista__cuerpo:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--acc); }
.pro-vista__interior { max-width: 1180px; margin: 0 auto; padding: 0 var(--s7); }

.pro-hero { padding: var(--s8) 0 var(--s6); }
.pro-hero__etiqueta {
  margin: 0 0 var(--s2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--acc-ink);
}
.pro-hero__titulo {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.028em; line-height: var(--lh-tight);
}
.pro-hero__texto { margin: 0; max-width: 64ch; font-size: var(--fs-md); line-height: var(--lh-base); color: var(--ink-3); }

/* ---- Filtro por familia: se queda arriba mientras se baja ---- */
.pro-filtro {
  position: sticky; top: 0; z-index: 3;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pro-filtro__interior {
  max-width: 1180px; margin: 0 auto; padding: var(--s3) var(--s7);
  display: flex; align-items: center; gap: var(--s4);
}
.pro-filtro__chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pro-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 8px 0 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-sm); font-weight: 560;
  box-shadow: var(--sh-1);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pro-chip:hover { background: var(--paper-2); border-color: var(--line-strong); color: var(--ink); }
.pro-chip:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--acc); }
.pro-chip[aria-pressed="true"] {
  background: var(--acc-soft); border-color: var(--acc); color: var(--acc-ink);
  font-weight: 680; box-shadow: inset 0 0 0 1px var(--acc);
}
.pro-chip__n {
  min-width: 22px; height: 20px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--paper-3); color: var(--ink-3);
  font-size: var(--fs-xs); font-weight: 650;
}
.pro-chip[aria-pressed="true"] .pro-chip__n { background: var(--acc-soft-2); color: var(--acc-ink); }
.pro-filtro__leyenda {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap;
}
.pro-filtro__leyenda svg { color: var(--ink-4); flex: none; }
/* Con una sola familia no hay filtro que mostrar: la leyenda queda a la izquierda. */
.pro-filtro__chips[hidden] + .pro-filtro__leyenda { margin-left: 0; }

/* ---- Secciones y tarjetas ---- */
.pro-secciones { padding: var(--s6) 0 var(--s2); }
.pro-fam { margin-bottom: var(--s7); }
.pro-fam__titulo {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 640; letter-spacing: -.012em;
}
.pro-fam__n { font-size: var(--fs-sm); font-weight: 560; color: var(--ink-4); }
.pro-secciones--una .pro-fam__titulo { display: none; }

.pro-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--s4);
}
.pro-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.pro-card__mini {
  height: 148px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(120% 90% at 50% 0%, var(--surface) 0%, var(--paper-2) 100%);
}
.pro-card__mini canvas { display: block; width: 100%; height: 100%; }
.pro-card__info { display: flex; flex-direction: column; gap: 3px; padding: var(--s3) var(--s4) var(--s2); flex: 1; }
.pro-card__nombre {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md); font-weight: 640; letter-spacing: -.012em; color: var(--ink);
}
.pro-card__desc { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--ink-3); }
.pro-card__pie {
  display: flex; align-items: center; gap: var(--s2);
  padding: 8px var(--s4) 11px;
  font-size: var(--fs-xs); color: var(--ink-3);
}
.pro-card__familia { text-transform: uppercase; letter-spacing: .06em; font-weight: 680; }
.pro-card__medidas { color: var(--ink-3); }

/* ---- Cierre: el código, otra vez a mano ---- */
.pro-cierre {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  margin: var(--s4) 0 var(--s9);
  padding: var(--s5) var(--s6);
  background: var(--acc-soft);
  border: 1px solid var(--acc-line);
  border-radius: var(--r-lg);
}
.pro-cierre__titulo {
  margin: 0 0 3px;
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 650; letter-spacing: -.012em; color: var(--acc-ink);
}
.pro-cierre__texto p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); max-width: 60ch; }

/* ==========================================================================
   El 3D avanzado

   Lo que se abre con el código en el 3D del Ambiente: el estilo, guardar y
   copiar la imagen y la pantalla completa. Sin el código, el panel «Estilo» es
   una tarjeta (`.pro-3d`), los tres botones de imagen y pantalla completa llevan
   candado y la vista previa trae una sección («3D avanzado») con tres capturas
   reales del propio motor.

   Todo el texto va en tinta, con contraste de 4,5:1 o más en claro y en oscuro:
   nada se "apaga" con opacidad. Lo bloqueado se distingue por el candado y el
   color del acento, no por verse gris.
   ========================================================================== */

/* El botón principal de lo nuevo: ámbar profundo con texto que se lee (el ámbar
   claro del resto de los botones primarios queda en 3,8:1 con el texto blanco). */
.btn--pro { background: var(--acc-ink); border-color: var(--acc-ink); color: var(--sobre-acc); box-shadow: var(--sh-1); }
.btn--pro:hover { background: var(--acc-press); border-color: var(--acc-press); color: var(--sobre-acc); }
.btn--pro svg { color: currentColor; }

.pro-enlace {
  padding: 0; border: 0; background: none;
  font: inherit; font-weight: 640; color: var(--acc-ink);
  text-decoration: underline; text-decoration-color: var(--acc-line); text-underline-offset: 3px;
  cursor: pointer; border-radius: var(--r-sm);
}
.pro-enlace:hover { color: var(--acc); text-decoration-color: currentColor; }

/* El anillo de siempre (`--ring`) es un halo claro: sobre el fondo del acento casi no se ve. Lo nuevo
   lleva además un contorno en tinta del acento, que se lee en claro y en oscuro. */
.pro-enlace:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: 2px; box-shadow: none; }
.btn--pro:focus-visible,
.amb3d__btn--bloqueado:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: 2px; }

/* ---- Los botones con candado del 3D (Guardar imagen, Copiar imagen, Pantalla completa) -- */
.amb3d__candado { display: inline-flex; align-items: center; flex: none; color: var(--acc-ink); }
.amb3d__candado[hidden] { display: none !important; }
.amb3d__btn--bloqueado { background: var(--acc-soft); border-color: var(--acc-line); color: var(--acc-ink); }
.amb3d__btn--bloqueado:hover { background: var(--acc-soft-2); border-color: var(--acc); color: var(--acc-ink); }
.amb3d__btn--bloqueado:focus-visible { border-color: var(--acc); }
.amb3d__btn--bloqueado svg { color: currentColor; }

/* ---- La pestaña «Estilo» con su candado ---- */
.amb-pest { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.amb-pest__candado { display: inline-flex; align-items: center; flex: none; color: var(--acc-ink); }
.amb-pest__candado[hidden] { display: none !important; }

/* ---- La tarjeta que reemplaza al panel «Estilo» ---- */
.pro-3d {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4);
  background: var(--acc-soft);
  border: 1px solid var(--acc-line);
  border-radius: var(--r-md);
}
.pro-3d__cab { display: flex; align-items: flex-start; gap: var(--s3); }
.pro-3d__candado {
  flex: none; width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--acc-soft-2); color: var(--acc-ink);
}
.pro-3d__titulo {
  margin: 0;
  font-size: var(--fs-base); font-weight: 680; line-height: var(--lh-snug);
  color: var(--acc-ink);
}
.pro-3d__texto { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--ink-2); }
.pro-3d__acciones { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pro-3d__rotulo {
  margin: var(--s2) 0 0;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acc-ink);
}
.pro-3d__fotos { display: flex; flex-direction: column; gap: var(--s3); }

.pro-3d-foto { margin: 0; min-width: 0; }
.pro-3d-foto img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper-2);
}
.pro-3d-foto__pie { margin-top: 5px; font-size: var(--fs-xs); font-weight: 620; line-height: var(--lh-snug); color: var(--ink-2); }

/* ---- La sección «3D avanzado» de la vista previa ---- */
.pro-hero__extra { margin: var(--s3) 0 0; font-size: var(--fs-md); line-height: var(--lh-base); color: var(--ink-2); }

.pro-3d-seccion {
  margin: 0 0 var(--s7);
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  scroll-margin-top: 76px;       /* el filtro, que se queda arriba, no tapa el título */
}
.pro-3d-seccion:focus { outline: none; }
.pro-3d-seccion:focus-visible { box-shadow: 0 0 0 2px var(--acc); }
.pro-3d-seccion__titulo {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; line-height: var(--lh-tight);
  color: var(--ink);
}
.pro-3d-seccion__texto { margin: 0; max-width: 64ch; font-size: var(--fs-md); line-height: var(--lh-base); color: var(--ink-2); }
.pro-3d-seccion__lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s2) var(--s6);
  margin: var(--s5) 0 var(--s4); padding: 0; list-style: none;
}
.pro-3d-seccion__item {
  display: flex; align-items: flex-start; gap: var(--s2);
  font-size: var(--fs-base); line-height: var(--lh-snug); color: var(--ink-2);
}
.pro-3d-seccion__tilde { flex: none; margin-top: 1px; color: var(--ok); }
.pro-3d-seccion__libre {
  margin: 0 0 var(--s5); padding: var(--s3) var(--s4);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--ink-2);
}
.pro-3d-seccion__fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); }
.pro-3d-seccion .pro-3d-foto__pie { margin-top: var(--s2); font-size: var(--fs-sm); }

@media (max-width: 880px) {
  .pro-vista__barra { padding: var(--s3) var(--s4); flex-wrap: wrap; }
  .pro-vista__interior, .pro-filtro__interior { padding-left: var(--s4); padding-right: var(--s4); }
  .pro-filtro__interior { flex-wrap: wrap; }
  .pro-filtro__leyenda { margin-left: 0; }
  .pro-cierre { flex-direction: column; align-items: flex-start; }
  .pro-3d-seccion { padding: var(--s4); }
  .pro-3d-seccion__titulo { font-size: var(--fs-xl); }
}

/* ---- La pantalla de primera vez: tres caminos del mismo tamaño ---- */
.pro-opciones { display: flex; flex-direction: column; gap: var(--s2); }
.pro-opcion {
  position: relative;
  display: flex; flex-direction: row; align-items: center; gap: var(--s3);
  width: 100%; height: auto; min-height: 64px;
  padding: var(--s3) var(--s4);
  text-align: left; white-space: normal;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.pro-opcion:hover { transform: translateY(-1px); border-color: var(--acc-line); background: var(--acc-soft); box-shadow: var(--sh-2); }
.pro-opcion:active { transform: translateY(0); }
.pro-opcion__ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--acc-soft);
  border: 1px solid var(--acc-line);
  color: var(--acc-ink);
}
.pro-opcion__texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pro-opcion__titulo { font-size: var(--fs-md); font-weight: 680; line-height: var(--lh-snug); color: var(--ink); }
.pro-opcion__detalle { font-size: var(--fs-sm); font-weight: 450; line-height: var(--lh-snug); color: var(--ink-3); }
.pro-opcion__flecha { flex: none; display: inline-flex; color: var(--ink-3); transition: transform var(--t) var(--ease-out), color var(--t) var(--ease); }
.pro-opcion:hover .pro-opcion__flecha { transform: translateX(3px); color: var(--acc-ink); }
.pro-bienvenida .pro-opcion { color: inherit; }
.pro-opcion.pro-opcion--principal {
  background: linear-gradient(135deg, var(--acc-ink), var(--acc-press));
  border-color: var(--acc-ink);
  box-shadow: var(--sh-2);
  min-height: 72px;
}
.pro-opcion.pro-opcion--principal:hover { background: linear-gradient(135deg, var(--acc-press), var(--acc-ink)); border-color: var(--acc-press); box-shadow: var(--sh-2); }
.pro-opcion--principal .pro-opcion__ico { background: var(--sobre-acc); border-color: var(--sobre-acc); color: var(--acc-ink); }
.pro-opcion--principal .pro-opcion__titulo { color: var(--sobre-acc); font-size: var(--fs-lg); }
.pro-opcion--principal .pro-opcion__detalle,
.pro-opcion--principal .pro-opcion__flecha,
.pro-opcion--principal:hover .pro-opcion__flecha { color: var(--sobre-acc); }
.pro-opcion:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: 2px; }