/* ==========================================================================
   Diseñador de ruletas (/disena-tu-ruleta). Tres colores de la web:
   rojo #c8102e, tinta #0e1a2b y marfil #f4f0e8. Sin fondos lisos.
   ========================================================================== */

.rd-seccion {
  position: relative; isolation: isolate;
  padding: 16px 0 clamp(40px, 5vw, 70px);
  background:
    radial-gradient(circle at 1px 1px, rgba(14, 26, 43, .09) 1px, transparent 1.6px) 0 0 / 22px 22px,
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(200, 16, 46, .10), transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(36, 70, 122, .12), transparent 70%),
    linear-gradient(180deg, #f4f0e8 0%, #fbf9f5 60%, #f4f0e8 100%);
}
.rd {
  --rd-r: 14px;
  --rd-borde: rgba(14, 26, 43, .12);
  width: calc(100% - 2 * var(--gutter, 16px)); max-width: 1640px; margin-inline: auto;
  font-family: var(--f-texto, system-ui, sans-serif); color: #1f2a3a;
}
.rd *, .rd *::before, .rd *::after, .rd-pop *, .rd-modal * { box-sizing: border-box; }
/* Título y entradilla (8-oct-2026, pedido por Jordi): entradilla en un marco
   rectangular algo inclinado, con letra Righteous (redondeada, fácil de leer). */
@font-face { font-family: "RPRD Righteous"; font-weight: 400; font-display: swap; src: url(../fuentes/righteous.woff2) format("woff2"); }
.rd-intro {
  width: calc(100% - 2 * var(--gutter, 16px)); max-width: 1640px; margin: 6px auto 22px; text-align: left;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px;
}
.rd-intro h1 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.15; color: #0e1a2b; }
.rd-intro h1::after { content: none; }
.rd-intro p {
  position: relative; margin: 0; max-width: 640px; padding: 12px 20px 12px 46px;
  font-family: "RPRD Righteous", var(--f-titulo, system-ui), sans-serif; font-size: clamp(.95rem, 1.3vw, 1.08rem); line-height: 1.4; letter-spacing: .01em;
  color: #f4f0e8;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) 1px, transparent 1.6px) 0 0 / 14px 14px,
    radial-gradient(ellipse 60% 120% at 100% 0%, rgba(200, 16, 46, .45), transparent 70%),
    linear-gradient(135deg, #1b2a40, #0e1a2b);
  border: 2px solid rgba(244, 240, 232, .85);
  border-radius: 4px;
  transform: rotate(-1.6deg);
  box-shadow: 6px 6px 0 #c8102e, 0 18px 30px -18px rgba(14, 26, 43, .8);
}
/* Minirruleta de sello a la izquierda del texto. */
.rd-intro p::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: radial-gradient(circle, #0e1a2b 0 3px, #f4f0e8 3.5px 4.5px, transparent 5px), repeating-conic-gradient(#c8102e 0 30deg, #f4f0e8 0 60deg);
  box-shadow: 0 0 0 2px rgba(244, 240, 232, .6);
  animation: rd-sello 12s linear infinite;
}
/* Cinta adhesiva en la esquina. */
.rd-intro p::after {
  content: ""; position: absolute; right: -10px; top: -9px; width: 54px; height: 18px; transform: rotate(28deg);
  background: repeating-linear-gradient(90deg, rgba(244, 240, 232, .9) 0 6px, rgba(244, 240, 232, .7) 6px 12px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
@keyframes rd-sello { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .rd-intro { gap: 12px; margin-bottom: 18px; }
  .rd-intro p { padding: 10px 16px 10px 42px; transform: rotate(-1deg); box-shadow: 4px 4px 0 #c8102e; }
}
@media (prefers-reduced-motion: reduce) { .rd-intro p::before { animation: none; } }
.rd-cargando, .rd-noscript { text-align: center; padding: 80px 16px; font-weight: 700; color: #556071; }
/* Mientras carga, el hueco ya tiene el alto del diseñador montado: sin él, todo lo de debajo
   saltaba (CLS 0,37 en móvil en PageSpeed, 8-oct-2026). Altos medidos a cada ancho. */
.rd:has(> .rd-cargando) { min-height: 910px; }
@media (max-width: 1280px) { .rd:has(> .rd-cargando) { min-height: 1040px; } }
@media (max-width: 900px) { .rd:has(> .rd-cargando) { min-height: 1870px; } }
.rd svg { display: block; }
:where(.rd, .rd-pop, .rd-modal) button { font: inherit; cursor: pointer; letter-spacing: normal; text-transform: none; line-height: 1.2; }
.rd button:disabled { opacity: .4; cursor: not-allowed; }
.rd :focus-visible, .rd-pop :focus-visible, .rd-modal :focus-visible { outline: 3px solid rgba(200, 16, 46, .55); outline-offset: 2px; }

/* ---------- Barra superior ---------- */
.rd-barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px; margin-bottom: 14px; border-radius: 18px;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1.5px, transparent 1.5px 16px),
    radial-gradient(ellipse 40% 120% at 100% 0%, rgba(200, 16, 46, .35), transparent 70%),
    linear-gradient(160deg, #24467a 0%, #1a3560 50%, #13284a 100%);
  box-shadow: 0 24px 50px -34px rgba(14, 26, 43, .8);
}
.rd-modelos { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-modelo {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #f4f0e8; text-align: left;
  transition: background .2s, border-color .2s, transform .2s;
}
.rd-modelo:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
.rd-modelo.es-activo { background: #f4f0e8; color: #0e1a2b; border-color: #f4f0e8; box-shadow: 0 0 0 3px rgba(200, 16, 46, .7); }
.rd-modelo__d { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.rd-modelo.es-activo .rd-modelo__d { background: rgba(14, 26, 43, .07); }
.rd-modelo__d i { display: block; width: calc(10px + 22px * var(--t)); aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(#c8102e 0 30deg, #f4f0e8 0 60deg); box-shadow: 0 0 0 2px #0e1a2b; }
.rd-modelo__t { display: flex; flex-direction: column; line-height: 1.15; }
.rd-modelo__t b { font-family: var(--f-titulo, inherit); font-size: .86rem; font-weight: 700; }
.rd-modelo__t small { font-size: .72rem; opacity: .7; }
.rd-acciones { display: flex; gap: 6px; flex-wrap: wrap; }

.rd-ico {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 10px;
  border-radius: 10px; border: 1px solid var(--rd-borde); background: #fff; color: #0e1a2b; font-weight: 700; font-size: .85rem;
}
.rd-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rd-barra .rd-ico { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #f4f0e8; }
.rd-barra .rd-ico:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.rd-barra .rd-ico.es-activo { background: rgba(244, 240, 232, .18); border-color: rgba(244, 240, 232, .5); }
.rd-barra .rd-ico--rojo, .rd-barra .rd-ico--rojo:hover:not(:disabled) { background: #c8102e; border-color: #c8102e; color: #fff; }

/* ---------- Cuerpo en tres columnas ---------- */
.rd-cuerpo { display: grid; grid-template-columns: minmax(330px, 400px) minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.rd-panel, .rd-tarjeta {
  background: #fff; border: 1px solid var(--rd-borde); border-radius: 18px;
  box-shadow: 0 30px 60px -44px rgba(14, 26, 43, .55);
}
.rd-panel { position: sticky; top: calc(var(--cabecera, 76px) + 12px); display: flex; flex-direction: column; max-height: calc(100vh - var(--cabecera, 76px) - 28px); overflow: hidden; }
.rd-tabs { flex: none; display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--rd-borde); background: linear-gradient(180deg, #fbf9f5, #f4f0e8); overflow-x: auto; scrollbar-width: none; }
.rd-tab { flex: 1 0 auto; padding: 9px 9px; border: 0; border-radius: 10px; background: transparent; color: #556071; font-weight: 700; font-size: .82rem; white-space: nowrap; }
.rd-tab:hover { color: #0e1a2b; background: rgba(14, 26, 43, .05); }
.rd-tab.es-activo { background: #0e1a2b; color: #fff; }
.rd-panel__cont { flex: 1 1 auto; min-height: 0; padding: 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

/* ---------- Escenario ---------- */
.rd-escenario { position: sticky; top: calc(var(--cabecera, 76px) + 12px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rd-lienzo {
  position: relative; width: 100%; max-width: min(760px, calc(100vh - var(--cabecera, 76px) - 120px)); aspect-ratio: 1; cursor: pointer;
  border-radius: 28px; overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .9) 0 30%, transparent 70%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(14, 26, 43, .035) 0 7.5deg, transparent 7.5deg 15deg),
    linear-gradient(rgba(14, 26, 43, .05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(14, 26, 43, .05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(160deg, #ffffff, #efe9dd);
  border: 1px solid var(--rd-borde);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .6), 0 40px 70px -50px rgba(14, 26, 43, .7);
}
/* Sombra fija bajo la rueda (no gira con ella) y se apaga al girar. */
.rd-sombra { position: absolute; left: 6.9%; top: 6.9%; width: 86.2%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  box-shadow: 0 18px 34px -6px rgba(14, 26, 43, .45); transition: opacity .35s; }
.rd-lienzo.es-girando .rd-sombra { opacity: 0; }
.rd-rueda { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.rd-rueda svg { width: 100%; height: 100%; }
/* Puntero fijo arriba (el SVG del editor deja un margen de 0,16 R). */
.rd-puntero {
  position: absolute; left: 50%; top: 2.2%; width: 7.4%; aspect-ratio: .78; transform: translateX(-50%); pointer-events: none;
  background: #c8102e; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35));
}
.rd-puntero::after { content: ""; position: absolute; left: 50%; top: 14%; width: 34%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #0e1a2b; }
.rd-resultado {
  position: absolute; left: 50%; bottom: 6%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 20px; border-radius: 14px; text-align: center; background: rgba(14, 26, 43, .92); color: #fff;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); transition: opacity .3s, transform .3s; max-width: 86%;
}
.rd-resultado small { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #ff8a98; }
.rd-resultado b { font-family: var(--f-titulo, inherit); font-size: 1.15rem; }
.rd-resultado.es-visible { opacity: 1; transform: translate(-50%, 0); }
.rd-medida { font-size: .88rem; color: #556071; text-align: center; }
.rd-medida b { color: #0e1a2b; font-family: var(--f-titulo, inherit); }
.rd-leyenda { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; font-size: .76rem; color: #556071; text-align: center; }
.rd-leyenda span { display: inline-block; width: 18px; height: 0; border-top: 2px dashed; }
.rd-leyenda .v { color: #16a34a; } .rd-leyenda .r { color: #ec008c; border-top-style: solid; } .rd-leyenda .z { color: #ef4444; }

/* ---------- Columna derecha ---------- */
.rd-lado { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--cabecera, 76px) + 12px); }
.rd-tarjeta { padding: 16px; }
/* h2 y no h3: van justo después del h1 (orden de títulos, PageSpeed). */
.rd-tarjeta h2 { margin: 0 0 10px; font-family: inherit; font-weight: 800; font-size: 1rem; line-height: 1.3; letter-spacing: 0; text-transform: none; color: inherit; }
.rd-tarjeta h2::before, .rd-tarjeta h2::after { content: none; }
.rd-tarjeta--accion { background: linear-gradient(160deg, #fff, #fbf9f5); }
.rd-tarjeta--pro {
  color: #f4f0e8; border: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .08) 1px, transparent 1.6px) 0 0 / 18px 18px,
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(200, 16, 46, .5), transparent 70%),
    linear-gradient(160deg, #1b2a40, #0e1a2b);
}
.rd-tarjeta--pro h2 { color: #fff; }
.rd-tarjeta--pro p { font-size: .9rem; margin: 0 0 10px; color: rgba(244, 240, 232, .85); }
.rd-precio strong { color: #fff; }
.rd-mini { margin: 14px 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #556071; }
.rd-fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rd-avisos p { display: flex; gap: 8px; margin: 0 0 8px; font-size: .86rem; line-height: 1.4; }
.rd-avisos svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rd-ok { color: #157347; font-weight: 700; }
.rd-aviso { color: #8a5a00; }
.rd-aviso.es-grave { color: #b3122e; font-weight: 700; }

/* ---------- Botones ---------- */
.rd-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 16px;
  border-radius: 12px; border: 1px solid transparent; font-weight: 800; font-size: .92rem; text-decoration: none; line-height: 1.2;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.rd-boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rd-boton:hover:not(:disabled) { transform: translateY(-1px); }
.rd-boton--rojo { background: linear-gradient(135deg, #d7183a, #a10d25); color: #fff; box-shadow: 0 14px 26px -16px rgba(200, 16, 46, .9); }
.rd-boton--tinta { background: #f4f0e8; color: #0e1a2b; width: 100%; }
.rd-boton--claro { background: #fff; color: #0e1a2b; border-color: var(--rd-borde); }
.rd-boton--claro:hover { border-color: rgba(14, 26, 43, .3); }
.rd-boton--grande { width: 100%; min-height: 52px; font-size: 1.02rem; }
.rd-boton--ancho { width: 100%; margin-top: 10px; }

/* ---------- Controles del panel ---------- */
.rd-grupo { border: 0; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px dashed var(--rd-borde); min-width: 0; }
.rd-grupo:last-child { border-bottom: 0; margin-bottom: 0; }
.rd-grupo legend { padding: 0; margin-bottom: 10px; font-family: var(--f-titulo, inherit); font-weight: 700; font-size: .95rem; color: #0e1a2b; }
.rd-nota { margin: -4px 0 10px; font-size: .8rem; color: #556071; line-height: 1.4; }
.rd-sub { margin: 12px 0 6px; font-size: .78rem; font-weight: 700; color: #556071; }
.rd-campo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; font-size: .86rem; font-weight: 600; }
.rd-campo > span:first-child { display: flex; justify-content: space-between; gap: 8px; color: #1f2a3a; }
.rd-campo output { font-weight: 800; color: #c8102e; font-variant-numeric: tabular-nums; }
.rd-campo input[type=text], .rd-campo select, .rd-campo textarea, .rd-campo input[type=email], .rd-campo input[type=tel], .rd-campo input[type=number], .rd-campo input[type=date] {
  width: 100%; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(14, 26, 43, .2); background: #fff; font: inherit; font-weight: 500; color: #0e1a2b;
}
.rd-campo input[type=range] { width: 100%; accent-color: #c8102e; }
.rd-campo--color { flex-direction: row; align-items: center; justify-content: space-between; }
.rd-color { display: flex; align-items: center; gap: 6px; }
.rd input[type=color], .rd-modal input[type=color] {
  width: 38px; height: 32px; padding: 2px; border-radius: 8px; border: 1px solid rgba(14, 26, 43, .2); background: #fff; cursor: pointer;
}
.rd-campo--inter { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; }
.rd-campo--inter input { position: absolute; opacity: 0; pointer-events: none; }
.rd-inter { flex: none; width: 38px; height: 22px; border-radius: 22px; background: #cfd5de; position: relative; transition: background .2s; }
.rd-inter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.rd-campo--inter input:checked + .rd-inter { background: #c8102e; }
.rd-campo--inter input:checked + .rd-inter::after { transform: translateX(16px); }
.rd-campo--inter input:focus-visible + .rd-inter { outline: 3px solid rgba(200, 16, 46, .55); outline-offset: 2px; }
.rd-seg { display: flex; padding: 3px; border-radius: 11px; background: #f1ede5; gap: 3px; }
.rd-seg button { flex: 1; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; font-weight: 700; font-size: .82rem; color: #556071; }
.rd-seg button.es-activo { background: #fff; color: #0e1a2b; box-shadow: 0 2px 6px rgba(14, 26, 43, .15); }
.rd-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rd-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(14, 26, 43, .18);
  background: #fff; color: #0e1a2b; font-weight: 700; font-size: .8rem; cursor: pointer;
}
.rd-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.rd-chip:hover { border-color: #0e1a2b; }
.rd-chip.es-activo { background: #0e1a2b; border-color: #0e1a2b; color: #fff; }
.rd-num { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; }
.rd-num input { width: 76px; text-align: center; padding: 8px; border-radius: 10px; border: 1px solid rgba(14, 26, 43, .2); font: inherit; font-weight: 800; font-size: 1.1rem; }

/* Lista de casillas */
.rd-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rd-casilla {
  display: grid; grid-template-columns: 22px 38px minmax(0, 1fr) 40px 40px; align-items: center; gap: 6px; padding: 6px; border-radius: 12px;
  border: 1px solid transparent; background: #fbf9f5; transition: border-color .2s, background .2s;
}
.rd-casilla.es-sel { border-color: rgba(200, 16, 46, .5); background: #fff; box-shadow: 0 8px 20px -14px rgba(200, 16, 46, .6); }
.rd-casilla__n { font-size: .75rem; font-weight: 800; color: #8a94a3; text-align: center; }
.rd-casilla textarea {
  width: 100%; min-height: 36px; resize: none; overflow: hidden; padding: 7px 9px; border-radius: 9px; border: 1px solid rgba(14, 26, 43, .16);
  font: inherit; font-weight: 600; font-size: .9rem; line-height: 1.3; background: #fff; color: #0e1a2b;
}
.rd-ico--graf { padding: 0; width: 40px; overflow: hidden; color: #8a94a3; }
.rd-ico--graf.tiene { color: #0e1a2b; border-color: rgba(14, 26, 43, .3); }
.rd-ico--graf img { width: 100%; height: 100%; object-fit: contain; }
.rd-ico--peligro { color: #b3122e; }
.rd-casilla__mas { grid-column: 1 / -1; padding: 8px 4px 2px; border-top: 1px dashed var(--rd-borde); margin-top: 4px; }
.rd-fila-botones { display: flex; gap: 6px; justify-content: flex-end; }

/* Paletas, letras y plantillas */
.rd-paletas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rd-paleta { display: flex; height: 30px; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--rd-borde); }
.rd-paleta i { flex: 1; }
.rd-paleta.es-activo { border-color: #0e1a2b; box-shadow: 0 0 0 2px #c8102e; }
.rd-propios { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.rd-propio { position: relative; }
.rd-x { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 0; background: #0e1a2b; color: #fff; display: grid; place-items: center; }
.rd-x svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; }
.rd-letras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.rd-letras button { padding: 9px 4px; border-radius: 9px; border: 1px solid var(--rd-borde); background: #fff; font-size: .95rem; color: #0e1a2b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-letras button.es-activo { background: #0e1a2b; color: #fff; border-color: #0e1a2b; }
.rd-plantillas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rd-plantilla { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 14px; border: 1px solid var(--rd-borde); background: linear-gradient(160deg, #fff, #f4f0e8); font-weight: 700; font-size: .84rem; color: #0e1a2b; transition: transform .2s, box-shadow .2s; }
.rd-plantilla:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(14, 26, 43, .6); }
.rd-plantilla svg { width: 100%; height: auto; }
.rd-logo { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.rd-logo-vista { flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: #8a94a3; border: 1px dashed rgba(14, 26, 43, .3);
  background: repeating-conic-gradient(#f1ede5 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.rd-logo-vista--ancha { border-radius: 14px; width: 110px; }
.rd-logo-vista img { width: 100%; height: 100%; object-fit: contain; }
.rd-logo-vista svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rd-logo__acc { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* Selector de iconos */
.rd-pop {
  position: absolute; z-index: 1000; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid rgba(14, 26, 43, .14);
  box-shadow: 0 30px 60px -20px rgba(14, 26, 43, .45); font-family: var(--f-texto, system-ui, sans-serif);
}
.rd-pop__acc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rd-pop__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; max-height: 260px; overflow-y: auto; }
.rd-pop__rejilla button { aspect-ratio: 1; padding: 8px; border-radius: 9px; border: 1px solid transparent; background: #fbf9f5; color: #0e1a2b; }
.rd-pop__rejilla button:hover { border-color: #0e1a2b; }
.rd-pop__rejilla button.es-activo { background: #c8102e; color: #fff; }
.rd-pop__rejilla svg { width: 100%; height: 100%; }

/* Aviso flotante */
.rd-toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 1001; transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  padding: 11px 18px; border-radius: 12px; background: #0e1a2b; color: #fff; font-weight: 700; font-size: .9rem; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6);
  transition: opacity .25s, transform .25s; max-width: calc(100vw - 32px);
}
.rd-toast.es-visible { opacity: 1; transform: translate(-50%, 0); }
.rd-toast.es-malo { background: #b3122e; }

/* ---------- Ventana de envío ---------- */
.rd-modal { padding: 0; border: 0; border-radius: 22px; width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px); background: transparent; color: #1f2a3a; font-family: var(--f-texto, system-ui, sans-serif); }
.rd-modal::backdrop { background: rgba(14, 26, 43, .62); backdrop-filter: blur(3px); }
.rd-modal__in {
  position: relative; padding: clamp(22px, 3.5vw, 36px); border-radius: 22px;
  background:
    radial-gradient(circle at 1px 1px, rgba(14, 26, 43, .06) 1px, transparent 1.6px) 0 0 / 20px 20px,
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(200, 16, 46, .10), transparent 70%),
    linear-gradient(170deg, #fff, #f8f5ef);
}
.rd-modal__in::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 22px 22px 0 0; background: linear-gradient(90deg, #c8102e, #ff5c6e 60%, #0e1a2b); }
.rd-modal h2 { margin: 0 0 8px; font-size: clamp(1.4rem, 3vw, 1.8rem); }
.rd-modal__ante { margin: 0 0 6px; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #c8102e; }
.rd-modal__x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rd-borde, rgba(14, 26, 43, .12)); background: #fff; display: grid; place-items: center; }
.rd-modal__x svg { width: 18px; height: 18px; fill: none; stroke: #0e1a2b; stroke-width: 2.4; stroke-linecap: round; }
.rd-form__vista { display: flex; align-items: center; gap: 16px; margin: 14px 0 0; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid rgba(14, 26, 43, .1); }
.rd-form__vista img { flex: none; width: 150px; height: 150px; border-radius: 50%; object-fit: contain; background: #f4f0e8; }
.rd-form__vista figcaption { font-weight: 700; color: #0e1a2b; font-size: .92rem; }
.rd-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-top: 16px; }
.rd-form__ancho { grid-column: 1 / -1; }
.rd-campo--f { margin-bottom: 12px; }
.rd-campo--f.es-error input, .rd-campo--f.es-error textarea { border-color: #b3122e; box-shadow: 0 0 0 3px rgba(179, 18, 46, .15); }
.rd-campo--check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; font-size: .9rem; font-weight: 600; cursor: pointer; }
.rd-campo--check input { margin-top: 3px; width: 18px; height: 18px; accent-color: #c8102e; flex: none; }
.rd-campo--check.es-error span { color: #b3122e; }
.rd-error { display: block; font-style: normal; font-size: .8rem; color: #b3122e; font-weight: 700; }
.rd-error:empty { display: none; }
.rd-tarro { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rd-modal__pie { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.rd-progreso { margin: 8px 0; }
.rd-progreso__barra { height: 8px; border-radius: 8px; background: #ebe5d9; overflow: hidden; }
.rd-progreso__barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c8102e, #ff5c6e); transition: width .3s; }
.rd-progreso span { display: block; margin-top: 6px; font-size: .82rem; font-weight: 700; color: #556071; }
.rd-pro-precio { display: flex; align-items: center; gap: 16px; margin: 16px 0; padding: 16px; border-radius: 16px; color: #f4f0e8; background: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(200, 16, 46, .55), transparent 70%), linear-gradient(160deg, #1b2a40, #0e1a2b); }
.rd-pro-precio b { font-family: var(--f-marca, var(--f-titulo, inherit)); font-size: 2.6rem; line-height: 1; color: #fff; }
.rd-pro-precio span { font-weight: 700; }
.rd-modal__in--ok { text-align: center; }
.rd-modal__in--ok .rd-modal__pie { justify-content: center; }
.rd-ok-grande { width: 74px; height: 74px; margin: 6px auto 14px; border-radius: 50%; display: grid; place-items: center; background: #157347; box-shadow: 0 0 0 8px rgba(21, 115, 71, .15); }
.rd-ok-grande svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rd-ref b { font-family: var(--f-titulo, inherit); letter-spacing: .04em; color: #c8102e; }

/* ---------- Texto de apoyo ---------- */
.rd-info {
  padding: clamp(46px, 6vw, 80px) 0;
  background:
    repeating-linear-gradient(115deg, rgba(14, 26, 43, .03) 0 1.5px, transparent 1.5px 18px),
    radial-gradient(ellipse 50% 60% at 0% 0%, rgba(200, 16, 46, .08), transparent 70%),
    linear-gradient(180deg, #fff, #f4f0e8);
}
.rd-info__cab { text-align: center; max-width: 760px; margin: 0 auto 28px; }
.rd-pasos { list-style: none; margin: 0 auto 50px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 1200px; }
.rd-pasos li { flex: 1 1 240px; max-width: 280px; padding: 24px 20px; border-radius: 18px; background: #fff; border: 1px solid rgba(14, 26, 43, .1); text-align: center; box-shadow: 0 30px 60px -48px rgba(14, 26, 43, .6); }
.rd-pasos h3 { margin: 12px 0 6px; font-size: 1.05rem; }
.rd-pasos p { margin: 0; font-size: .93rem; color: #556071; }
.rd-pasos__n { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; font-family: var(--f-titulo, inherit); font-weight: 800; font-size: 1.2rem;
  background: repeating-conic-gradient(#c8102e 0 30deg, #a10d25 0 60deg); box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(200, 16, 46, .4); }
.rd-faq { max-width: 860px; margin: 0 auto; }
.rd-faq h2 { text-align: center; margin-bottom: 18px; }
.rd-faq details { margin-bottom: 10px; border-radius: 14px; background: #fff; border: 1px solid rgba(14, 26, 43, .1); }
.rd-faq summary { padding: 16px 20px; font-weight: 700; color: #0e1a2b; cursor: pointer; }
.rd-faq details p { margin: 0; padding: 0 20px 16px; color: #556071; }

/* ---------- Pantallas medianas y móvil ---------- */
@media (max-width: 1280px) {
  .rd-cuerpo { grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); }
  .rd-lado { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .rd-cuerpo { grid-template-columns: 1fr; }
  .rd-escenario { order: -1; position: sticky; top: calc(var(--cabecera, 64px) + 4px); z-index: 5; padding: 6px 0; background: linear-gradient(180deg, #f4f0e8 85%, rgba(244, 240, 232, 0)); }
  .rd-lienzo { max-width: min(46vh, 100%); border-radius: 20px; }
  .rd-leyenda, .rd-medida small { display: none; }
  .rd-panel { position: static; max-height: none; }
  .rd-lado { grid-template-columns: 1fr; }
  .rd-modelo__t small { display: none; }
  .rd-barra { justify-content: center; }
  .rd-modelos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; padding: 3px; scroll-snap-type: x mandatory; }
  .rd-modelo { flex: none; scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .rd-form { grid-template-columns: 1fr; }
  .rd-modelo { padding: 6px 10px 6px 6px; }
  .rd-modelo__d { width: 28px; height: 28px; }
  .rd-ico span { display: none; }
  .rd-paletas { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rd-rueda { transition: none !important; }
  .rd-modelo, .rd-boton, .rd-plantilla { transition: none; }
}