/* Sección "Con tu color y tu logo": un PDF y la pantalla del cliente que cambian de color con una paleta. Sin scroll atado:
   se ve entera, y elegir un color lo cambia al momento. */

.marca-bloque { position: relative; padding-top: var(--curva); }
.marca-bloque::after { content: ""; display: block; height: var(--curva); }
.marca-bloque { background: radial-gradient(60% 45% at 50% 55%, rgb(203 165 30 / 0.1), transparent 70%), radial-gradient(50% 50% at 100% 0%, rgb(255 255 255 / 0.04), transparent 70%); }

.marca-rejilla { display: grid; gap: 40px; align-items: center; padding-block: clamp(56px, 9vw, 110px); }
.marca-texto { display: grid; gap: 20px; justify-items: start; }
.marca-texto .parrafo-ancho { color: var(--suave); }
.marca-pista { color: var(--suave); font-size: 0.95rem; }

/* La vista: el PDF y, delante, el móvil del cliente (mismo color) */
.marca-vista { position: relative; width: min(100%, 520px); margin-inline: auto; aspect-ratio: 1.05 / 1; }
.marca-pdf {
  position: absolute; left: 0; top: 0; width: 66%; aspect-ratio: 0.7073 / 1; background: #fff; border-radius: 4px;
  box-shadow: 0 40px 70px -30px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(0 0 0 / 0.08); rotate: -2deg;
}
.marca-pdf img, .marca-tel .tel-pantalla img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s var(--ease); }
.marca-pdf img { border-radius: inherit; }
.marca-pdf img.activo, .marca-tel .tel-pantalla img.activo { opacity: 1; }
.marca-tel { position: absolute; right: 0; bottom: 0; width: 34%; margin: 0; rotate: 3deg; }
.marca-tel .tel-pantalla { position: relative; }

/* La paleta */
.paleta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.paleta-grupo { display: flex; gap: 8px; }
.muestra { width: 48px; height: 48px; padding: 5px; border-radius: 50%; border: 2px solid transparent; background: transparent; cursor: pointer; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); }
.muestra-c { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); }
.muestra[aria-checked="true"] { border-color: var(--oro-claro); }
.muestra:active { transform: scale(0.92); }
.muestra[data-clave="teal"] .muestra-c { background: #0f766e; }
.muestra[data-clave="oro"] .muestra-c { background: #cba51e; }
.muestra[data-clave="azul"] .muestra-c { background: #2563eb; }
.muestra[data-clave="granate"] .muestra-c { background: #be123c; }
.muestra[data-clave="naranja"] .muestra-c { background: #ea580c; }
.muestra[data-clave="pizarra"] .muestra-c { background: #475569; }
.paleta-texto { color: var(--suave); font-size: 0.95rem; min-width: 11ch; }
.paleta-nombre { color: var(--texto); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .muestra:hover { transform: scale(1.1); } }

@media (min-width: 900px) {
  .marca-rejilla { grid-template-columns: 0.9fr 1.1fr; gap: 64px; }
}