/**
 * Página Retoma – KTM Via Motos
 * Estilos específicos: bloques de valor, requisitos, factores de avalúo, CTA.
 * Minimalista, lectura rápida, compatible con paleta KTM/Husqvarna y tema claro/oscuro.
 */

/* ----- Intro: valor y confianza ----- */
#retoma-heading {
  text-align: center;
}

.jvm-retoma-intro {
  max-width: 65ch;
  margin-bottom: var(--jvm--space-4, 2rem);
}

/* Subtítulo de sección dentro del mismo contenedor (requisitos) */
.jvm-retoma-subtitle {
  margin-top: 2.5rem;
}

.jvm-retoma-intro .jvm-section__lead {
  margin-bottom: var(--jvm--space-2, 1rem);
}

/* ----- Grid de bloques (requisitos / factores) ----- */
.jvm-retoma-grid {
  display: grid;
  gap: var(--jvm--space-3, 1.5rem);
  grid-template-columns: 1fr;
  margin-top: var(--jvm--space-3, 1.5rem);
  margin-bottom: var(--jvm--space-4, 2rem);
}

@media (min-width: 640px) {
  .jvm-retoma-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .jvm-retoma-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Bloque con icono: título + texto breve */
.jvm-retoma-block {
  display: flex;
  flex-direction: column;
  gap: var(--jvm--space-2, 1rem);
  padding: var(--jvm--space-3, 1.5rem);
  background: var(--jvm-bg-surface, var(--jvm-background-white));
  border: 1px solid var(--jvm-border-subtle, rgba(0, 0, 0, 0.08));
  transition: border-color var(--jvm--transition), box-shadow var(--jvm--transition);
}

.jvm-retoma-block:hover {
  border-color: var(--jvm-border-orange);
  box-shadow: var(--jvm--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.jvm-section--dark .jvm-retoma-block {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--jvm-gray-border, rgba(255, 255, 255, 0.2));
}

.jvm-section--dark .jvm-retoma-block:hover {
  border-color: var(--jvm-background-orange);
}

.jvm-retoma-block__icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  color: var(--jvm-color-text-orange);
}

body[data-brand="husqvarna"] .jvm-retoma-block__icon {
  color: var(--jvm-color-text-orange, #ffed00);
}

.jvm-section--dark .jvm-retoma-block__icon {
  color: var(--jvm-background-orange);
}

.jvm-retoma-block__title {
  font-family: var(--jvm-font-trade-gothic);
  font-size: var(--jvm--font-size-sm, 1.125rem);
  font-weight: var(--jvm-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--jvm-color-text);
}

.jvm-section--dark .jvm-retoma-block__title {
  color: var(--jvm-color-text-white);
}

.jvm-retoma-block__text {
  font-size: var(--jvm--font-size-m, 0.875rem);
  line-height: var(--jvm--line-height-relaxed);
  margin: 0;
  color: var(--jvm-color-text);
  opacity: 0.95;
}

.jvm-section--dark .jvm-retoma-block__text {
  color: var(--jvm-color-text-white);
}

/* Factores de avalúo: texto justificado para mejor lectura */
#retoma-avaluo .jvm-retoma-block__text {
  text-align: justify;
  text-justify: inter-word;
}

/* Lista de requisitos dentro de sección (lista con check) */
.jvm-retoma-list {
  list-style: none;
  padding: 0;
  margin: var(--jvm--space-2, 1rem) 0 0;
}

.jvm-retoma-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--jvm--space-2, 1rem);
  margin-bottom: var(--jvm--space-2, 1rem);
  font-size: var(--jvm--font-size-m, 0.875rem);
  line-height: var(--jvm--line-height-relaxed);
}

.jvm-retoma-list li:last-child {
  margin-bottom: 0;
}

.jvm-retoma-list__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--jvm-background-orange);
}

body[data-brand="husqvarna"] .jvm-retoma-list__icon {
  color: #ffed00;
}

/* Bloque seguridad/tranquilidad: mensaje destacado */
.jvm-retoma-highlight {
  padding: var(--jvm--space-4, 2rem);
  margin-top: var(--jvm--space-4, 2rem);
  margin-bottom: var(--jvm--space-4, 2rem);
  background: var(--jvm-background-orange-subtle, rgba(255, 102, 0, 0.08));
  border-left: 4px solid var(--jvm-background-orange);
}

.jvm-section--dark .jvm-retoma-highlight {
  background: rgba(255, 102, 0, 0.15);
  border-left-color: var(--jvm-background-orange);
}

.jvm-retoma-highlight__title {
  font-family: var(--jvm-font-trade-gothic);
  font-size: var(--jvm--font-size-sm, 1.125rem);
  font-weight: var(--jvm-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--jvm--space-2, 1rem);
  color: var(--jvm-color-text);
}

.jvm-section--dark .jvm-retoma-highlight__title {
  color: var(--jvm-color-text-white);
}

.jvm-retoma-highlight__text {
  margin: 0;
  font-size: var(--jvm--font-size-m, 0.875rem);
  line-height: var(--jvm--line-height-relaxed);
  color: var(--jvm-color-text);
  text-align: justify;
  text-justify: inter-word;
}

.jvm-section--dark .jvm-retoma-highlight__text {
  color: var(--jvm-color-text-white);
  opacity: 0.95;
}

/* CTA bloque: alineación horizontal, tamaño simétrico, centrado en el contenedor */
.jvm-retoma-cta {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--jvm--space-2, 1rem);
  margin-top: var(--jvm--space-4, 2rem);
  margin-bottom: var(--jvm--space-4, 2rem);
  margin-left: auto;
  margin-right: auto;
}

.jvm-retoma-cta .jvm-cta {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

/* Texto largo en desktop */
.jvm-retoma-cta .jvm-cta__text-desktop {
  display: inline;
}

.jvm-retoma-cta .jvm-cta__text-mobile {
  display: none;
}

/* Móvil y tablet: texto corto y tamaño reducido */
@media (max-width: 1023px) {
  .jvm-retoma-cta .jvm-cta {
    font-size: var(--jvm--font-size-m, 0.875rem);
    padding: 0.6rem 1rem;
    min-height: 44px;
  }

  .jvm-retoma-cta .jvm-cta__text-desktop {
    display: none;
  }

  .jvm-retoma-cta .jvm-cta__text-mobile {
    display: inline;
  }
}

@media (max-width: 479px) {
  .jvm-retoma-cta {
    gap: 0.75rem;
  }

  .jvm-retoma-cta .jvm-cta {
    font-size: var(--jvm--font-size-s, 0.8125rem);
    padding: 0.5rem 0.75rem;
    min-height: 40px;
    min-width: 5rem;
  }
}

/* Resumen citeable: mismo estilo que otras páginas */
#retoma .jvm-resumen-citeable {
  margin-top: var(--jvm--space-4, 2rem);
  padding-top: var(--jvm--space-3, 1.5rem);
  border-top: 1px solid var(--jvm-border-subtle, rgba(0, 0, 0, 0.1));
}

/* En retoma-seguridad: separación clara entre CTA y resumen (evitar solapamiento) */
#retoma-seguridad #resumen-retoma {
  margin-top: var(--jvm--space-4, 2rem);
  padding-top: var(--jvm--space-3, 1.5rem);
  border-top: 1px solid var(--jvm-border-subtle, rgba(0, 0, 0, 0.1));
}

#resumen-retoma .jvm-resumen-citeable {
  text-align: justify;
  text-justify: inter-word;
}

#retoma-seguridad .jvm-section--alt #resumen-retoma {
  border-top-color: rgba(0, 0, 0, 0.12);
}

.jvm-section--dark #retoma .jvm-resumen-citeable {
  border-top-color: var(--jvm-gray-border);
}

/* Acordeón requisitos: mismo componente que FAQ */
#retoma-requisitos .jvm-accordion {
  margin-top: var(--jvm--space-2, 1rem);
}

@media (prefers-reduced-motion: reduce) {
  .jvm-retoma-block:hover {
    transition-duration: 0.01ms;
  }
}