/* Cuentella — identidad visual compartida (asistente, «Mi cuento», tarjetas, checkout).
 * Para cambiar un color de toda la tienda alcanza con cambiarlo acá.
 * Para que sigan los colores globales de Elementor, apuntá las variables a las de tu kit, por ejemplo:
 *   --cu-primario: var(--e-global-color-primary);
 */
:root {
  --cu-primario: #173F8F;
  --cu-primario-oscuro: #0F2F72;
  --cu-cielo: #DDF3FF;
  --cu-acento: #FF5B6E;
  --cu-crema: #FFF9EE;
  --cu-tinta: #12254A;
  --cu-suave: #60708D;
  --cu-borde: #D7E4F0;
  --cu-ok: #27835B;
  --cu-error: #B3261E;
  --cu-ancho: 1280px; /* ancho máximo de todo lo que arma el plugin (igual que el header y el footer del sitio) */
  --cu-margen: clamp(16px, 4vw, 32px); /* aire lateral cuando la pantalla es más angosta que --cu-ancho */
  --cu-radio: 24px;
  --cu-radio-grande: 32px;
  --cu-sombra: 0 18px 60px rgba(23, 63, 143, .12);
  --cu-fuente: Manrope, "Helvetica Neue", Arial, sans-serif;
  --cu-fuente-titulo: "Bubblegum Sans", Manrope, "Helvetica Neue", Arial, sans-serif; /* títulos: una sola grosor (400), sin negrita ni tracking negativo */
}

/* Etiqueta sobre los títulos: línea coral + texto en mayúsculas */
.cu-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 12px/1.2 var(--cu-fuente); letter-spacing: .12em; text-transform: uppercase; color: var(--cu-primario);
}
.cu-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--cu-acento); flex: none; }

/* Botones en píldora */
.cu-boton, .cu-boton-sec {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box;
  padding: 16px 28px; border-radius: 999px; border: 2px solid transparent;
  font: 800 15px/1.2 var(--cu-fuente); text-decoration: none; text-align: center; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cu-boton { background: var(--cu-acento); color: #fff; box-shadow: 0 12px 28px rgba(255, 91, 110, .28); }
.cu-boton:hover, .cu-boton:focus-visible { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(255, 91, 110, .34); color: #fff; }
.cu-boton-sec { background: #fff; color: var(--cu-primario); border-color: var(--cu-borde); }
.cu-boton-sec:hover, .cu-boton-sec:focus-visible { border-color: var(--cu-primario); color: var(--cu-primario); }
.cu-boton:disabled, .cu-boton-sec:disabled { opacity: .55; cursor: wait; transform: none; }
.cu-boton:focus-visible, .cu-boton-sec:focus-visible { outline: 3px solid var(--cu-primario); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cu-boton, .cu-boton-sec { transition: none; }
}