/** Shopify CDN: Minification failed

Line 1005:1 Unexpected "/"

**/
/* ==========================================================================
   Kuvrel · Plantilla maestra de producto (kvxp)
   Sistema visual: 75 % arquitectura HiStrips · 25 % aire RYZE · 100 % Kuvrel

   Referencias estructurales leídas:
     references/histrips-ryze/kuvrel_histrips_inspired.html
     references/histrips-ryze/kuvrel_ryze_inspired.html
     references/histrips-ryze/VALIDACION-HISTRIPS-V5.json  (secuencia p01–p16)

   De HiStrips se toma la métrica estructural:
     - .container ancho máximo 1320 px con calle lateral de 44 px
     - .section padding vertical 92 px en escritorio, 66 px en móvil
     - Titulares en versalitas, peso 950, interletrado negativo
     - Botones píldora de 52 px de alto
     - Tarjetas radio 20 px · paneles radio 28 px
     - Cortes responsive en 1040 px y 680 px
     - Carruseles con scroll-snap en móvil

   De RYZE se toma solo el tratamiento visual:
     - Fondos cálidos, nunca blanco puro de catálogo
     - Sombras suaves y difusas
     - Aire generoso entre bloques
     - Tarjetas de paso numeradas para la rutina

   Ningún color, tipografía, texto ni activo procede de las referencias.
   La paleta es la de Kuvrel, heredada de la Fase 1A.

   Todas las medidas de color y espaciado llegan como variables desde el
   atributo style de cada sección, escritas por el personalizador.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Sistema de color unificado de Kuvrel · ronda 1
   La estructura sigue viniendo de HiStrips y el aire de RYZE, pero el color
   NO. Ninguna de las dos paletas se usa como guiño: se sustituyen por una
   escala propia, con un solo acento y neutros cálidos.

   Escala:
     --k-paper    fondo principal, muy claro
     --k-surface  tarjetas, el más claro
     --k-alt      fondo alterno para dar ritmo sin oscurecer
     --k-ink      texto principal
     --k-muted    texto secundario
     --k-line     bordes
     --k-accent   ÚNICO acento
     --k-on-accent  texto sobre el acento

   Regla de ritmo: se alternan --k-paper y --k-alt. Solo un bloque oscuro en
   toda la página, el cierre comercial, que actúa de ancla del CTA final.
   -------------------------------------------------------------------------- */

.kvxp {
  /* Rosa real de Kuvrel. Procede de colors_accent_1 en los ajustes globales
     de la tienda, donde también gobierna checkout_button_color y
     checkout_accent_color. No es un rosa inventado. */
  --kvxp-brand: #ff2bc2;
  --kvxp-brand-soft: #fdeaf8;
  --kvxp-brand-tint: rgba(255, 43, 194, 0.08);

  --kvxp-background: #fffdfe;
  --kvxp-surface: #ffffff;
  --kvxp-surface-alt: #fdf4fb;
  --kvxp-text: #1a1520;
  --kvxp-text-muted: #6b6673;
  --kvxp-border: #ece2ef;
  --kvxp-dark: #1d1622;
  --kvxp-dark-text: #fdf9fc;

  /* Alias internos: el resto de la hoja ya los usa. Se remapean a la paleta
     nueva para no reescribir cada regla. */
  --k-paper: var(--kvxp-background);
  --k-surface: var(--kvxp-surface);
  --k-alt: var(--kvxp-surface-alt);
  --k-ink: var(--kvxp-text);
  --k-muted: var(--kvxp-text-muted);
  --k-line: var(--kvxp-border);
  --k-accent: var(--kvxp-brand);
  --k-accent-soft: var(--kvxp-brand-tint);
  --k-on-accent: #ffffff;
  --k-deep: var(--kvxp-dark);
}

/* --------------------------------------------------------------------------
   1. Base común
   -------------------------------------------------------------------------- */

.kvxp {
  box-sizing: border-box;
  background: var(--kvxp-bg, #fffdfe);
  color: var(--kvxp-text, #1a1520);
  padding-top: var(--kvxp-pt-m, 56px);
  padding-bottom: var(--kvxp-pb-m, 56px);
  font-size: var(--kvxp-body-m, 15px);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.kvxp *,
.kvxp *::before,
.kvxp *::after {
  box-sizing: inherit;
}

.kvxp__shell {
  width: min(var(--kvxp-max, 1320px), calc(100% - 28px));
  margin-inline: auto;
}

.kvxp--full .kvxp__shell {
  width: 100%;
  max-width: none;
  padding-inline: 14px;
}

.kvxp-hide-mobile {
  display: none;
}

/* --------------------------------------------------------------------------
   2. Tipografía · escala HiStrips
   -------------------------------------------------------------------------- */

.kvxp__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  color: var(--kvxp-accent, #ff2bc2);
}

.kvxp__kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kvxp-accent, #ff2bc2);
}

.kvxp-align--center .kvxp__kicker {
  justify-content: center;
}

.kvxp__title {
  margin: 0 0 14px;
  font-size: var(--kvxp-title-m, 30px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 800;
}

.kvxp__title--caps {
  text-transform: uppercase;
  letter-spacing: -0.05em;
}

.kvxp__sub {
  margin: 0 0 12px;
  font-size: calc(var(--kvxp-body-m, 15px) + 2px);
  font-weight: 650;
  line-height: 1.3;
  color: var(--kvxp-text, #1a1520);
}

.kvxp__copy {
  font-size: var(--kvxp-body-m, 15px);
  line-height: 1.7;
  color: var(--kvxp-muted, #6b6673);
  max-width: 690px;
}

.kvxp-align--center .kvxp__copy {
  margin-inline: auto;
}

.kvxp__copy > :first-child { margin-top: 0; }
.kvxp__copy > :last-child { margin-bottom: 0; }
.kvxp__copy a { color: var(--kvxp-accent, #ff2bc2); }

/* El filtro metafield_tag envuelve el texto enriquecido en un div propio. Sin
   estas dos reglas el primer párrafo recuperaría su margen superior y la
   sección se separaría más que con el ajuste manual. Solo iguala el espaciado:
   no cambia ningún otro estilo. */
.kvxp__copy > [class^="metafield-"] > :first-child { margin-top: 0; }
.kvxp__copy > [class^="metafield-"] > :last-child { margin-bottom: 0; }
.kvxp-compare__note > [class^="metafield-"] > :first-child { margin-top: 0; }
.kvxp-compare__note > [class^="metafield-"] > :last-child { margin-bottom: 0; }

.kvxp__head {
  margin-bottom: 28px;
}

.kvxp-align--center .kvxp__head {
  text-align: center;
  max-width: 850px;
  margin-inline: auto;
}

/* Marcador de contenido pendiente. Visible a propósito: nunca debe
   confundirse con contenido aprobado. */
.kvxp__pending {
  display: inline-block;
  padding: 6px 10px;
  border: 1px dashed var(--kvxp-line, #ece2ef);
  border-radius: 8px;
  background: rgba(255, 43, 194, 0.06);
  color: var(--kvxp-muted, #6b6673);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. Botones · píldora HiStrips
   -------------------------------------------------------------------------- */

.kvxp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.kvxp__btn--primary {
  background: var(--kvxp-accent, #ff2bc2);
  color: var(--kvxp-accent-text, #ffffff);
}

.kvxp__btn--ghost {
  background: transparent;
  color: var(--kvxp-text, #1a1520);
  border-color: var(--kvxp-text, #1a1520);
}

.kvxp__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 22px;
}

.kvxp-align--center .kvxp__actions {
  justify-content: center;
}

@media (hover: hover) {
  .kvxp__btn:hover { transform: translateY(-2px); }
  .kvxp__btn--ghost:hover {
    background: var(--kvxp-text, #1a1520);
    color: var(--kvxp-bg, #fffdfe);
  }
}

.kvxp a:focus-visible,
.kvxp button:focus-visible,
.kvxp summary:focus-visible {
  outline: 3px solid var(--kvxp-accent, #ff2bc2);
  outline-offset: 3px;
  border-radius: 4px;
}

.kvxp__media-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--kvxp-line, #ece2ef);
  fill: var(--kvxp-muted, #6b6673);
}

/* --------------------------------------------------------------------------
   4 bis. p02 · Franja de confianza premium
   Sustituye a la timeline genérica de despacho. Tres o cuatro tarjetas
   sobrias, sin efectos 3D, con el icono en un disco de acento suave.
   -------------------------------------------------------------------------- */

.kvxp-trust {
  display: grid;
  grid-template-columns: repeat(var(--kvxp-cols-m, 1), minmax(0, 1fr));
  gap: var(--kvxp-gap-m, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kvxp-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  height: 100%;
  padding: 20px;
  border: var(--kvxp-border-w, 1px) solid var(--kvxp-line, #ece2ef);
  border-radius: var(--kvxp-card-radius, 18px);
  background: var(--kvxp-card-bg, #ffffff);
}

.kvxp-trust--center .kvxp-trust__item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.kvxp-trust__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--k-accent-soft, rgba(255, 43, 194, 0.08));
  color: var(--kvxp-accent, #ff2bc2);
}

.kvxp-trust__icon svg { width: 21px; height: 21px; }

.kvxp-trust__body { min-width: 0; }

.kvxp-trust__body b {
  display: block;
  font-size: 0.92rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--kvxp-text, #1a1520);
}

.kvxp-trust__body small {
  display: block;
  margin-top: 4px;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--kvxp-muted, #6b6673);
}

@media (min-width: 768px) {
  .kvxp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kvxp-gap, 14px); }
}

@media (min-width: 1040px) {
  .kvxp-trust { grid-template-columns: repeat(var(--kvxp-cols, 4), minmax(0, 1fr)); }
  .kvxp-trust__item { padding: 24px; }
}

/* --------------------------------------------------------------------------
   4. p02 · Variante marquesina · se conserva como opción
   -------------------------------------------------------------------------- */

.kvxp-strip {
  overflow: hidden;
  border-top: 1px solid var(--kvxp-line, #ece2ef);
  border-bottom: 1px solid var(--kvxp-line, #ece2ef);
}

.kvxp-strip__track {
  display: flex;
  width: max-content;
  animation: kvxp-marquee 34s linear infinite;
}

.kvxp-strip--static .kvxp-strip__track {
  animation: none;
  width: 100%;
  justify-content: space-around;
  flex-wrap: wrap;
}

.kvxp-strip__chip {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 190px;
  padding: 18px 16px;
  border-right: 1px solid var(--kvxp-line, #ece2ef);
}

.kvxp-strip__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--kvxp-accent, #ff2bc2);
  color: var(--kvxp-accent-text, #ffffff);
}

.kvxp-strip__icon svg { width: 20px; height: 20px; }
.kvxp-strip__chip b { display: block; font-size: 0.76rem; text-transform: uppercase; }
.kvxp-strip__chip small { display: block; margin-top: 2px; font-size: 0.68rem; color: var(--kvxp-muted, #6b6673); }

@keyframes kvxp-marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   5. p03 · Propuesta técnica · problema + datos, fondo oscuro HiStrips
   -------------------------------------------------------------------------- */

.kvxp-tech__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.kvxp-tech__visual {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border-radius: var(--kvxp-radius, 24px);
  background: var(--kvxp-line, #ece2ef);
}

.kvxp-tech__visual img,
.kvxp-tech__visual .kvxp__media-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.kvxp-tech__list {
  display: grid;
  gap: 11px;
  margin-top: 22px;
}

.kvxp-tech__item {
  display: flex;
  gap: 13px;
  padding: 17px;
  border: 1px solid var(--kvxp-line, #ece2ef);
  border-radius: 15px;
  min-width: 0;
}

.kvxp-tech__no {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: var(--kvxp-accent, #ff2bc2);
  color: var(--kvxp-accent-text, #ffffff);
  font-weight: 800;
  font-size: 0.85rem;
}

.kvxp-tech__item b { display: block; font-size: 0.88rem; text-transform: uppercase; }
.kvxp-tech__item small { display: block; margin-top: 3px; color: var(--kvxp-muted, #6b6673); line-height: 1.5; }

/* --------------------------------------------------------------------------
   6. p04 · Respaldo · marquesina de menciones
   -------------------------------------------------------------------------- */

.kvxp-logos__title {
  margin: 0 0 18px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kvxp-muted, #6b6673);
}

.kvxp-logos__track {
  display: flex;
  width: max-content;
  gap: 56px;
  align-items: center;
  animation: kvxp-marquee 30s linear infinite;
}

.kvxp-logos--static .kvxp-logos__track {
  animation: none;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 34px;
}

.kvxp-logos__item {
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--kvxp-text, #1a1520);
  opacity: 0.75;
}

.kvxp-logos__img { max-height: 44px; width: auto; object-fit: contain; }

/* --------------------------------------------------------------------------
   7. p05 · Contenido en movimiento · rejilla UGC HiStrips
   -------------------------------------------------------------------------- */

.kvxp-motion__grid {
  display: grid;
  grid-template-columns: repeat(var(--kvxp-cols-m, 1), minmax(0, 1fr));
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kvxp-motion__cell { min-width: 0; }

.kvxp-motion__card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  height: 100%;
  padding: 18px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--kvxp-line, #ece2ef);
  color: #fff;
}

.kvxp-motion__media,
.kvxp-motion__card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.kvxp-motion__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.62) 100%);
}

.kvxp-motion__meta { position: relative; z-index: 2; }
.kvxp-motion__meta b { display: block; text-transform: uppercase; font-size: 0.9rem; }
.kvxp-motion__meta small { color: rgba(255, 255, 255, 0.75); }

.kvxp-motion__play {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: #000;
}

.kvxp-motion__play svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   8. p06 · Preparación · pasos numerados, aire RYZE
   -------------------------------------------------------------------------- */

.kvxp-mix__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}

.kvxp-mix__visual {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border-radius: var(--kvxp-radius, 24px);
  background: var(--kvxp-line, #ece2ef);
}

.kvxp-mix__visual img,
.kvxp-mix__visual .kvxp__media-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.kvxp-steps {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.kvxp-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  padding: 18px;
  border: 1px solid var(--kvxp-line, #ece2ef);
  border-radius: 17px;
  background: var(--kvxp-card-bg, #ffffff);
}

.kvxp-step__no {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--kvxp-accent, #ff2bc2);
  color: var(--kvxp-accent-text, #ffffff);
  font-weight: 800;
}

.kvxp-step b { display: block; font-size: 0.95rem; }
.kvxp-step small { display: block; margin-top: 3px; color: var(--kvxp-muted, #6b6673); line-height: 1.55; }

/* --------------------------------------------------------------------------
   9. p07 · Formato del producto · fichas técnicas
   -------------------------------------------------------------------------- */

.kvxp-format__grid {
  display: grid;
  grid-template-columns: repeat(var(--kvxp-cols-m, 2), minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kvxp-format__item {
  min-width: 0;
  padding: 20px;
  text-align: center;
  border: 1px solid var(--kvxp-line, #ece2ef);
  border-radius: 16px;
  background: var(--kvxp-card-bg, #ffffff);
}

.kvxp-format__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--kvxp-bg, #fffdfe);
  color: var(--kvxp-accent, #ff2bc2);
}

.kvxp-format__icon svg { width: 22px; height: 22px; }
.kvxp-format__item b { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.kvxp-format__item small { display: block; margin-top: 5px; color: var(--kvxp-muted, #6b6673); font-size: 0.8rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   10. p09 · Evidencia · tarjetas con cita
   -------------------------------------------------------------------------- */

.kvxp-proof__grid {
  display: grid;
  grid-template-columns: repeat(var(--kvxp-cols-m, 1), minmax(0, 1fr));
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kvxp-proof__card {
  min-width: 0;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--kvxp-line, #ece2ef);
  border-radius: 18px;
  background: var(--kvxp-card-bg, #ffffff);
}

.kvxp-proof__label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kvxp-accent, #ff2bc2);
}

.kvxp-proof__card h3 { margin: 0 0 8px; font-size: 1.15rem; line-height: 1.25; }
.kvxp-proof__card p { margin: 0; color: var(--kvxp-muted, #6b6673); font-size: 0.88rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   11. p10 · Datos verificables · panel HiStrips
   -------------------------------------------------------------------------- */

.kvxp-stats__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--kvxp-line, #ece2ef);
  border-radius: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kvxp-stat {
  min-width: 0;
  padding: 32px;
  border-bottom: 1px solid var(--kvxp-line, #ece2ef);
}

.kvxp-stat:last-child { border-bottom: 0; }

.kvxp-stat strong {
  display: block;
  font-size: 3.2rem;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--kvxp-accent, #ff2bc2);
}

.kvxp-stat span { display: block; margin-top: 8px; font-size: 0.84rem; font-weight: 800; text-transform: uppercase; }
.kvxp-stat p { margin: 5px 0 0; color: var(--kvxp-muted, #6b6673); font-size: 0.84rem; line-height: 1.55; }

/* --------------------------------------------------------------------------
   12. p11 · Formas de uso · tarjetas con imagen
   -------------------------------------------------------------------------- */

.kvxp-uses__grid {
  display: grid;
  grid-template-columns: repeat(var(--kvxp-cols-m, 1), minmax(0, 1fr));
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kvxp-use {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--kvxp-line, #ece2ef);
  border-radius: 20px;
  background: var(--kvxp-card-bg, #ffffff);
}

.kvxp-use__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--kvxp-media-ratio, 4 / 3);
  overflow: hidden;
  background: var(--kvxp-line, #ece2ef);
}

.kvxp-use__media img,
.kvxp-use__media .kvxp__media-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.kvxp-use__body { padding: 18px; }
.kvxp-use__body h3 { margin: 0 0 7px; font-size: 1rem; text-transform: uppercase; letter-spacing: -0.01em; }
.kvxp-use__body p { margin: 0; color: var(--kvxp-muted, #6b6673); font-size: 0.85rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   13. p12 · Comparador · tabla HiStrips
   -------------------------------------------------------------------------- */

.kvxp-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.kvxp-compare {
  min-width: 620px;
  overflow: hidden;
  border: 1px solid var(--kvxp-line, #ece2ef);
  border-radius: 24px;
  background: var(--kvxp-card-bg, #ffffff);
}

.kvxp-compare__row {
  display: grid;
  grid-template-columns: 1.6fr repeat(var(--kvxp-compare-cols, 2), minmax(0, 1fr));
  border-bottom: 1px solid var(--kvxp-line, #ece2ef);
}

.kvxp-compare__row:last-child { border-bottom: 0; }

.kvxp-compare__cell {
  min-width: 0;
  padding: 16px;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.45;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.kvxp-compare__cell:first-child { text-align: left; font-weight: 750; }

.kvxp-compare__row--head {
  background: var(--kvxp-text, #1a1520);
  color: var(--kvxp-bg, #fffdfe);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kvxp-compare__cell--brand {
  background: rgba(255, 43, 194, 0.09);
  font-weight: 800;
}

.kvxp-compare__row--head .kvxp-compare__cell--brand {
  background: var(--kvxp-accent, #ff2bc2);
  color: var(--kvxp-accent-text, #ffffff);
}

.kvxp-compare__note {
  margin: 14px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--kvxp-muted, #6b6673);
}

.kvxp-compare__yes { color: #13724f; font-weight: 800; }

/* --------------------------------------------------------------------------
   13 ter. Comparador · una sola tabla enfrentada, también en móvil
   La tabla NO se parte en tarjetas. Se mantiene la comparación cara a cara y
   se reduce tipografía, relleno y anchos para que quepa en 360 px sin
   desbordar. minmax(0,1fr) y min-width:0 son lo que impide el overflow.
   -------------------------------------------------------------------------- */

.kvxp-compare__scroll {
  display: block;
  overflow-x: visible;
  width: 100%;
  max-width: 100%;
}

.kvxp-compare {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.kvxp-compare__row {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
}

.kvxp-compare__row--3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

.kvxp-compare__cell {
  min-width: 0;
  padding: 10px 7px;
  font-size: 0.76rem;
  line-height: 1.35;
  hyphens: none;
  overflow-wrap: break-word;
}

.kvxp-compare__cell:first-child {
  padding-left: 10px;
  font-size: 0.74rem;
  font-weight: 750;
}

.kvxp-compare__row--head .kvxp-compare__cell {
  padding-block: 11px;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}

.kvxp-compare__mark {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.kvxp-compare__mark--yes { background: rgba(19, 114, 79, 0.12); color: #13724f; }
.kvxp-compare__mark--no { background: rgba(150, 60, 45, 0.1); color: #9c4030; }

@media (min-width: 480px) {
  .kvxp-compare__cell { padding: 13px 10px; font-size: 0.84rem; }
  .kvxp-compare__cell:first-child { font-size: 0.82rem; }
  .kvxp-compare__row--head .kvxp-compare__cell { font-size: 0.68rem; }
}

@media (min-width: 768px) {
  .kvxp-compare__row { grid-template-columns: 1.6fr repeat(var(--kvxp-compare-cols, 2), minmax(0, 1fr)); }
  .kvxp-compare__row--3 { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
  .kvxp-compare__cell { padding: 17px; font-size: 0.88rem; }
  .kvxp-compare__cell:first-child { font-size: 0.88rem; }
  .kvxp-compare__row--head .kvxp-compare__cell { font-size: 0.75rem; }
  .kvxp-compare__mark { width: 26px; height: 26px; font-size: 0.85rem; }
}

/* --------------------------------------------------------------------------
   13 bis. OBSOLETO · tarjetas apiladas del comparador
   Se retira el marcado en el Liquid. Estas reglas quedan neutralizadas para
   que ninguna instancia antigua vuelva a mostrarlas.
   -------------------------------------------------------------------------- */

.kvxp-compare__cards { display: none !important; }

/* Bloque anterior, sin efecto
   Antes la tabla obligaba a arrastrar en horizontal para entenderla. Debajo
   de 768 px la tabla se oculta y cada criterio pasa a ser una tarjeta con
   las dos columnas apiladas y etiquetadas. Se lee en vertical, sin arrastre.
   -------------------------------------------------------------------------- */

.kvxp-compare__cards {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kvxp-compare__card {
  overflow: hidden;
  border: var(--kvxp-border-w, 1px) solid var(--kvxp-line, #ece2ef);
  border-radius: var(--kvxp-card-radius, 18px);
  background: var(--kvxp-card-bg, #ffffff);
}

.kvxp-compare__card-label {
  display: block;
  padding: 14px 16px;
  border-bottom: 1px solid var(--kvxp-line, #ece2ef);
  background: var(--k-alt, #fdf4fb);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--kvxp-text, #1a1520);
}

.kvxp-compare__card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 12px;
  align-items: baseline;
  padding: 13px 16px;
  border-bottom: 1px solid var(--kvxp-line, #ece2ef);
}

.kvxp-compare__card-row:last-child { border-bottom: 0; }

.kvxp-compare__card-row--brand { background: var(--k-accent-soft, rgba(255, 43, 194, 0.08)); }

.kvxp-compare__who {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kvxp-muted, #6b6673);
}

.kvxp-compare__card-row--brand .kvxp-compare__who { color: var(--kvxp-accent, #ff2bc2); }

.kvxp-compare__val {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--kvxp-text, #1a1520);
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.kvxp-compare__card-row--brand .kvxp-compare__val { font-weight: 750; }

*/

/* --------------------------------------------------------------------------
   14. p13 · Preguntas frecuentes · acordeón nativo
   -------------------------------------------------------------------------- */

.kvxp-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}

.kvxp-faq__list { display: grid; gap: 0; }

.kvxp-faq__item { border-bottom: 1px solid var(--kvxp-line, #ece2ef); }

.kvxp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.kvxp-faq__q::-webkit-details-marker { display: none; }

.kvxp-faq__q::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--kvxp-accent, #ff2bc2);
  transition: transform 0.2s ease;
}

.kvxp-faq__item[open] .kvxp-faq__q::after { transform: rotate(45deg); }

.kvxp-faq__a {
  padding: 0 0 18px;
  color: var(--kvxp-muted, #6b6673);
  line-height: 1.7;
  font-size: 0.92rem;
}

.kvxp-faq__a > :first-child { margin-top: 0; }
.kvxp-faq__a > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   15. p14 · Zona de ofertas · anclaje visual para Kaching Bundles
   El widget lo inyecta la aplicación. Aquí solo se reserva el espacio,
   el encabezado y el borde. No se recrea ninguna oferta.
   -------------------------------------------------------------------------- */

.kvxp-offers__slot {
  padding: 26px;
  border: 1px dashed var(--kvxp-line, #ece2ef);
  border-radius: 24px;
  background: var(--kvxp-card-bg, #ffffff);
  text-align: center;
}

.kvxp-offers__note {
  margin: 14px 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--kvxp-muted, #6b6673);
}

/* --------------------------------------------------------------------------
   16. p16 · Cierre comercial
   -------------------------------------------------------------------------- */

.kvxp-close__panel {
  padding: 34px 24px;
  border-radius: 28px;
  background: var(--kvxp-panel-bg, #1a1520);
  color: var(--kvxp-panel-text, #ffffff);
  text-align: center;
}

.kvxp-close__panel .kvxp__title { color: inherit; }
.kvxp-close__panel .kvxp__copy { color: rgba(255, 255, 255, 0.72); margin-inline: auto; }
.kvxp-close__panel .kvxp__kicker { color: inherit; }
.kvxp-close__panel .kvxp__kicker::before { background: currentColor; }
.kvxp-close__panel .kvxp__actions { justify-content: center; }

.kvxp-close__reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  margin-top: 22px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.72);
}

.kvxp-close__reassure span { display: inline-flex; align-items: center; gap: 7px; }
.kvxp-close__reassure svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   17. Tablet · 768 px a 1039 px
   Dos columnas donde la referencia usa cuatro, para que el texto respire.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .kvxp__shell { width: min(var(--kvxp-max, 1320px), calc(100% - 44px)); }

  .kvxp-motion__grid,
  .kvxp-proof__grid,
  .kvxp-uses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  .kvxp-format__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .kvxp-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kvxp-stat { border-bottom: 0; border-right: 1px solid var(--kvxp-line, #ece2ef); }
  .kvxp-stat:last-child { border-right: 0; }

  .kvxp-tech__grid,
  .kvxp-mix__grid { grid-template-columns: 0.85fr 1.15fr; gap: 38px; }

  .kvxp-tech__visual,
  .kvxp-mix__visual { min-height: 420px; }

  .kvxp-faq__grid { grid-template-columns: 0.75fr 1.25fr; gap: 44px; }

  .kvxp-close__panel { padding: 48px 40px; }
}

/* --------------------------------------------------------------------------
   18. Escritorio · 1040 px en adelante
   Aquí se recupera la métrica completa de HiStrips.
   -------------------------------------------------------------------------- */

@media (min-width: 1040px) {
  .kvxp {
    padding-top: var(--kvxp-pt, 92px);
    padding-bottom: var(--kvxp-pb, 92px);
    font-size: var(--kvxp-body, 17px);
  }

  .kvxp__title { font-size: var(--kvxp-title, 48px); }
  .kvxp__copy { font-size: var(--kvxp-body, 17px); }
  .kvxp__head { margin-bottom: 36px; }

  .kvxp-align--left { text-align: left; }
  .kvxp-align--center { text-align: center; }

  .kvxp-motion__grid,
  .kvxp-proof__grid,
  .kvxp-uses__grid { grid-template-columns: repeat(var(--kvxp-cols, 4), minmax(0, 1fr)); gap: 16px; }

  .kvxp-format__grid { grid-template-columns: repeat(var(--kvxp-cols, 5), minmax(0, 1fr)); }

  .kvxp-motion__card { min-height: 390px; }
  .kvxp-tech__visual, .kvxp-mix__visual { min-height: 560px; }
  .kvxp-stat { padding: 42px; }
  .kvxp-stat strong { font-size: 4.4rem; }

  .kvxp-compare { min-width: 0; }
  .kvxp-compare__cell { padding: 17px; }

  .kvxp-hide-mobile { display: block; }
  .kvxp-hide-desktop { display: none; }
}

/* --------------------------------------------------------------------------
   19. Móvil estrecho · carruseles con arrastre, como la referencia
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .kvxp-carousel .kvxp-motion__grid,
  .kvxp-carousel .kvxp-uses__grid,
  .kvxp-carousel .kvxp-proof__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .kvxp-carousel .kvxp-motion__cell,
  .kvxp-carousel .kvxp-uses__grid > li,
  .kvxp-carousel .kvxp-proof__grid > li {
    flex: 0 0 auto;
    width: 80vw;
    max-width: 320px;
    scroll-snap-align: center;
  }
}

/* --------------------------------------------------------------------------
   20. Estilo visual, sombra, borde y ancho · paridad con kvx-histrips-*
   -------------------------------------------------------------------------- */

.kvxp__shell {
  width: min(var(--kvxp-max, 1320px), calc(100% - 28px));
  max-width: var(--kvxp-width-m, 100%);
}

.kvxp-shadow--soft .kvxp-card,
.kvxp-shadow--soft .kvxp-motion__card,
.kvxp-shadow--soft .kvxp-use,
.kvxp-shadow--soft .kvxp-proof__card,
.kvxp-shadow--soft .kvxp-step,
.kvxp-shadow--soft .kvxp-format__item,
.kvxp-shadow--soft .kvxp-compare {
  box-shadow: 0 12px 30px rgba(26, 21, 32, 0.09);
}

.kvxp-shadow--strong .kvxp-card,
.kvxp-shadow--strong .kvxp-motion__card,
.kvxp-shadow--strong .kvxp-use,
.kvxp-shadow--strong .kvxp-proof__card,
.kvxp-shadow--strong .kvxp-step,
.kvxp-shadow--strong .kvxp-format__item,
.kvxp-shadow--strong .kvxp-compare {
  box-shadow: 0 24px 60px rgba(26, 21, 32, 0.18);
}

/* Grosor de borde y radio configurables en todas las tarjetas */
.kvxp .kvxp-motion__card,
.kvxp .kvxp-use,
.kvxp .kvxp-proof__card,
.kvxp .kvxp-step,
.kvxp .kvxp-format__item,
.kvxp .kvxp-compare,
.kvxp .kvxp-stats__grid,
.kvxp .kvxp-tech__item,
.kvxp .kvxp-offers__slot {
  border-width: var(--kvxp-border-w, 1px);
  border-radius: var(--kvxp-card-radius, 20px);
}

/* Separación entre tarjetas y entre columnas */
.kvxp .kvxp-motion__grid,
.kvxp .kvxp-uses__grid,
.kvxp .kvxp-proof__grid,
.kvxp .kvxp-format__grid,
.kvxp .kvxp-steps { gap: var(--kvxp-gap-m, 13px); }

.kvxp .kvxp-tech__grid,
.kvxp .kvxp-mix__grid,
.kvxp .kvxp-faq__grid { gap: var(--kvxp-col-gap-m, 28px); }

/* Alto y encaje de las imágenes de tarjeta */
.kvxp--fixed-media .kvxp-use__media {
  aspect-ratio: auto;
  height: var(--kvxp-media-h-m, 220px);
}

.kvxp .kvxp-use__media img,
.kvxp .kvxp-motion__media,
.kvxp .kvxp-tech__visual img,
.kvxp .kvxp-mix__visual img {
  object-fit: var(--kvxp-fit-m, cover);
}

/* --------------------------------------------------------------------------
   21. Carrusel · scroll-snap nativo, como en kvx-histrips-*
   El arrastre táctil lo aporta el navegador. Flechas y puntos son opcionales.
   -------------------------------------------------------------------------- */

.kvxp-car { position: relative; }

.kvxp-car__track {
  display: flex;
  gap: var(--kvxp-gap-m, 13px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  margin: 0;
  padding-inline: 0;
  list-style: none;
  scrollbar-width: thin;
}

.kvxp-car__track > * {
  flex: 0 0 auto;
  width: var(--kvxp-card-w-m, 80%);
  scroll-snap-align: center;
}

.kvxp-car__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.kvxp-car__btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--kvxp-arrow-border, #ece2ef);
  border-radius: 50%;
  background: var(--kvxp-arrow-bg, #ffffff);
  color: var(--kvxp-arrow-color, #1a1520);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.kvxp-car__btn svg { width: 18px; height: 18px; }
.kvxp-car__btn[disabled] { opacity: 0.35; cursor: default; }

@media (hover: hover) {
  .kvxp-car__btn:not([disabled]):hover { transform: translateY(-2px); }
}

.kvxp-car__dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.kvxp-car__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--kvxp-dot-color, #ece2ef);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.kvxp-car__dot.is-active {
  background: var(--kvxp-dot-active, #ff2bc2);
  transform: scale(1.35);
}

/* En escritorio el carrusel puede volver a rejilla si así se configura */
@media (min-width: 1040px) {
  .kvxp-car--mobile-only .kvxp-car__track {
    display: grid;
    grid-template-columns: repeat(var(--kvxp-cols, 4), minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
  }

  .kvxp-car--mobile-only .kvxp-car__track > * { width: auto; }
  .kvxp-car--mobile-only .kvxp-car__nav { display: none; }
}

@media (min-width: 768px) and (max-width: 1039.98px) {
  .kvxp-car__track > * { width: var(--kvxp-card-w-t, 48%); }
}

@media (min-width: 1040px) {
  .kvxp-car__track > * { width: var(--kvxp-card-w-d, 32%); }
}

/* --------------------------------------------------------------------------
   21 bis. Carrusel continuo infinito
   Movimiento constante, sin pausas entre tarjetas y sin salto al reiniciar.

   Cómo se consigue el bucle sin salto: el Liquid imprime la lista DOS veces.
   La animación desplaza el track exactamente -50 %, es decir el ancho de la
   primera copia. Cuando termina, el fotograma final es idéntico píxel a píxel
   al inicial, así que el reinicio es invisible. No hay salto porque no hay
   nada que saltar.

   La velocidad controla la DURACIÓN de una vuelta completa, no un intervalo
   entre diapositivas.
   -------------------------------------------------------------------------- */

.kvxp-mq {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.kvxp-mq__track {
  display: flex;
  width: max-content;
  gap: var(--kvxp-gap-m, 13px);
  margin: 0;
  padding: 0;
  list-style: none;
  animation: kvxp-mq-left var(--kvxp-mq-dur, 40s) linear infinite;
  will-change: transform;
}

.kvxp-mq--right .kvxp-mq__track { animation-name: kvxp-mq-right; }

.kvxp-mq__track > * {
  flex: 0 0 auto;
  width: var(--kvxp-card-w-m, 78vw);
  max-width: 340px;
}

/* La pausa al pasar el cursor es opcional: solo si el ajuste está activo. */
.kvxp-mq--pause:hover .kvxp-mq__track,
.kvxp-mq--pause:focus-within .kvxp-mq__track { animation-play-state: paused; }

/* Pausa temporal durante el arrastre, la reanuda el script al soltar. */
.kvxp-mq.is-dragging .kvxp-mq__track { animation-play-state: paused; }

.kvxp-mq.is-dragging { cursor: grabbing; }

@keyframes kvxp-mq-left { to { transform: translateX(-50%); } }
@keyframes kvxp-mq-right { from { transform: translateX(-50%); } to { transform: none; } }

@media (min-width: 768px) {
  .kvxp-mq__track { gap: var(--kvxp-gap, 16px); }
  .kvxp-mq__track > * { width: var(--kvxp-card-w-t, 42vw); max-width: 420px; }
}

@media (min-width: 1040px) {
  .kvxp-mq__track > * { width: var(--kvxp-card-w-d, 26vw); max-width: 460px; }
}

/* En modo "solo móvil", a partir de 1040 px vuelve a cuadrícula estática. */
@media (min-width: 1040px) {
  .kvxp-mq--mobile-only { overflow: visible; }
  .kvxp-mq--mobile-only .kvxp-mq__track {
    display: grid;
    grid-template-columns: repeat(var(--kvxp-cols, 4), minmax(0, 1fr));
    width: 100%;
    animation: none;
    transform: none;
  }
  .kvxp-mq--mobile-only .kvxp-mq__track > * { width: auto; max-width: none; }
  .kvxp-mq--mobile-only .kvxp-mq__dup { display: none; }
  .kvxp-mq--mobile-only + .kvxp-car__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kvxp-mq__track { animation: none; }
  .kvxp-mq { overflow-x: auto; scroll-snap-type: x mandatory; }
  .kvxp-mq__track > * { scroll-snap-align: center; }
}

/* --------------------------------------------------------------------------
   21 ter. Proceso de entrega · tres etapas con línea conectora
   -------------------------------------------------------------------------- */

.kvxp-ship {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Línea conectora detrás de los iconos. Va de centro a centro del primer y
   del último icono, es decir del 16,6 % al 83,3 %, para no sobresalir. */
.kvxp-ship::before {
  content: "";
  position: absolute;
  left: 16.66%;
  right: 16.66%;
  top: calc(var(--kvxp-ship-icon-m, 52px) / 2);
  height: var(--kvxp-ship-line-w, 2px);
  background: var(--kvxp-ship-line, #ece2ef);
  transform: translateY(-50%);
  z-index: 0;
}

.kvxp-ship__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  padding-inline: 4px;
}

.kvxp-ship__icon {
  display: grid;
  place-items: center;
  width: var(--kvxp-ship-icon-m, 52px);
  height: var(--kvxp-ship-icon-m, 52px);
  border-radius: 50%;
  overflow: hidden;
  /* Acabado con volumen: degradado, luz superior y sombra proyectada. */
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(150deg, var(--kvxp-ship-icon-top, #ff5ad2) 0%, var(--kvxp-ship-icon-bottom, #d1009b) 100%);
  color: var(--kvxp-ship-icon-color, #fffdf9);
  box-shadow:
    inset 0 1.5px 2px rgba(255, 255, 255, 0.55),
    inset 0 -2px 4px rgba(0, 0, 0, 0.18),
    0 8px 16px rgba(120, 20, 90, 0.22);
}

.kvxp-ship__icon svg {
  width: 46%;
  height: 46%;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
}

.kvxp-ship__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kvxp-ship__date {
  display: block;
  margin-top: 12px;
  font-size: var(--kvxp-ship-date-m, 13px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--kvxp-ship-date-color, #1a1520);
}

.kvxp-ship__label {
  display: block;
  margin-top: 3px;
  font-size: var(--kvxp-ship-label-m, 11px);
  line-height: 1.35;
  color: var(--kvxp-ship-label-color, #6b6673);
}

@media (min-width: 768px) {
  .kvxp-ship::before { top: calc(var(--kvxp-ship-icon, 68px) / 2); }
  .kvxp-ship__icon { width: var(--kvxp-ship-icon, 68px); height: var(--kvxp-ship-icon, 68px); }
  .kvxp-ship__date { margin-top: 16px; font-size: var(--kvxp-ship-date, 16px); }
  .kvxp-ship__label { font-size: var(--kvxp-ship-label, 13px); }
}

/* --------------------------------------------------------------------------
   22. Animaciones de entrada
   El contenido nunca se queda oculto: si no hay IntersectionObserver, si el
   visitante pide reducir movimiento, o si estamos en el personalizador, el
   script añade .kvxp-in de inmediato.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  [data-kvxp-anim] {
    opacity: 0;
    transition:
      opacity var(--kvxp-anim-dur, 600ms) ease-out var(--kvxp-anim-delay-total, 0ms),
      transform var(--kvxp-anim-dur, 600ms) ease-out var(--kvxp-anim-delay-total, 0ms);
    --kvxp-anim-delay-total: calc(var(--kvxp-anim-delay, 0ms) + var(--kvxp-anim-delay-item, 0ms));
  }

  [data-kvxp-anim='fade-up'] { transform: translateY(22px); }
  [data-kvxp-anim='left'] { transform: translateX(-28px); }
  [data-kvxp-anim='right'] { transform: translateX(28px); }
  [data-kvxp-anim='scale'] { transform: scale(0.94); }

  [data-kvxp-anim].kvxp-in {
    opacity: 1;
    transform: none;
  }
}

/* Desactivar animaciones solo en móvil, si así se configura */
@media (max-width: 767.98px) {
  .kvxp-noanim-mobile [data-kvxp-anim] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-kvxp-anim] { opacity: 1; transform: none; transition: none; }

  .kvxp-strip__track,
  .kvxp-logos__track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; }

  .kvxp-car__track { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   23. Escritorio · sobrescrituras de las medidas configurables
   -------------------------------------------------------------------------- */

@media (min-width: 1040px) {
  .kvxp__shell { max-width: var(--kvxp-width-d, 100%); }

  .kvxp .kvxp-motion__grid,
  .kvxp .kvxp-uses__grid,
  .kvxp .kvxp-proof__grid,
  .kvxp .kvxp-format__grid,
  .kvxp .kvxp-steps { gap: var(--kvxp-gap, 16px); }

  .kvxp .kvxp-tech__grid,
  .kvxp .kvxp-mix__grid,
  .kvxp .kvxp-faq__grid { gap: var(--kvxp-col-gap, 44px); }

  .kvxp--fixed-media .kvxp-use__media { height: var(--kvxp-media-h, 300px); }

  .kvxp .kvxp-use__media img,
  .kvxp .kvxp-motion__media,
  .kvxp .kvxp-tech__visual img,
  .kvxp .kvxp-mix__visual img { object-fit: var(--kvxp-fit, cover); }
}

/* --------------------------------------------------------------------------
   21. Editor de Shopify · nunca ocultar ni animar dentro del personalizador
   -------------------------------------------------------------------------- */

.shopify-design-mode .kvxp { display: block; }
.shopify-design-mode .kvxp__shell { animation: none; opacity: 1; transform: none; }

/* Cierre comercial sobre panel de marca: el botón se invierte a blanco para
   no desaparecer sobre el rosa, y las garantías suben su contraste. */
.kvxp-close__panel .kvxp__btn--primary {
  background: #ffffff;
  color: var(--kvxp-panel-bg, #ff2bc2);
}

.kvxp-close__reassure { color: rgba(255, 255, 255, 0.88); }