/* ============================================================
   mayoristas.css — Rastro Fitness
   Landing del canal mayorista. Móvil primero.
   Referencia: frame "Mayoristas · Desktop 1440".
   https://www.figma.com/design/32nxqpSmVmX4nvo0zyCRSs/?node-id=74-3
   ============================================================ */

/* ============================================================
   Encabezado
   ============================================================ */

.may-hero {
  grid-template-columns: 1fr;
}

.may-hero__texto {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-20);
  padding: var(--espaciado-40) var(--margen-mobile) var(--espaciado-48);
}

.may-hero__titulo {
  max-width: 14ch;
}

.may-hero__bajada {
  max-width: 52ch;
  color: var(--color-text-secondary);
}

.may-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaciado-12);
  margin-top: var(--espaciado-8);
}

.may-hero__lado {
  display: flex;
  flex-direction: column;
  gap: var(--hairline);
  background-color: var(--color-border-subtle);
}

.may-hero__foto {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-bg-base);
}

.may-hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.42);
}

.may-hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-accent-base);
  mix-blend-mode: multiply;
  opacity: 0.7;
}

.may-hero__pie {
  position: absolute;
  left: var(--espaciado-20);
  bottom: var(--espaciado-16);
  z-index: 1;
  color: var(--color-text-primary);
}

.may-cifras {
  grid-template-columns: 1fr;
}

.may-cifras__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espaciado-16);
  padding: var(--espaciado-16) var(--espaciado-20);
}

.may-cifras__fila dt {
  color: var(--color-text-secondary);
}

.may-cifras__fila dd {
  color: var(--color-text-primary);
}

/* ============================================================
   A quién le vendemos
   ============================================================ */

.may-publicos__grilla {
  grid-template-columns: 1fr;
}

.may-publico {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-12);
  min-height: 160px;
  padding: var(--espaciado-24);
}

.may-publico__indice {
  color: var(--color-accent-text);
}

.may-publico__texto {
  color: var(--color-text-secondary);
}

/* ============================================================
   Cómo trabajamos
   ============================================================ */

.may-pasos__lista {
  grid-template-columns: 1fr;
}

.may-paso {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-12);
  padding: var(--espaciado-32) var(--espaciado-24);
}

/* El número es la única cifra grande de la página y va en plata, como
   el resto de los números del sitio (CLAUDE.md §5.6). */
.may-paso__numero {
  background: var(--plata);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--espaciado-8);
}

.may-paso__texto {
  color: var(--color-text-secondary);
}

/* ============================================================
   Cotización
   ============================================================ */

.cotizar__cuerpo {
  grid-template-columns: 1fr;
}

.cotizar__texto {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-24);
  padding: var(--espaciado-32) var(--margen-mobile) var(--espaciado-40);
  background-color: var(--color-accent-base);
  color: var(--color-accent-on);
}

.cotizar__claim {
  max-width: 22ch;
}

.cotizar__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-8);
}

/* La marca de lista es un guion largo y no un punto: es el mismo signo
   que usa la ficha técnica del resto del sitio. */
.cotizar__lista li::before {
  content: "— ";
  opacity: 0.7;
}

.cotizar__wsp {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-4);
  margin-top: auto;
  padding-top: var(--espaciado-16);
  border-top: var(--hairline) solid currentColor;
}

.cotizar__wsp-enlace {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================================
   Escritorio
   ============================================================ */

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

  .may-cifras {
    grid-template-columns: repeat(3, 1fr);
  }

  .may-cifras__fila {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espaciado-8);
  }
}

@media (min-width: 900px) {
  .may-pasos__lista {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1040px) {
  .may-hero {
    grid-template-columns: minmax(0, 1fr) 620px;
    align-items: stretch;
  }

  .may-hero__texto {
    justify-content: center;
    padding: var(--espaciado-64) var(--espaciado-48) var(--espaciado-64) var(--margen-desktop);
  }

  /* La columna se estira al alto del texto, así que la foto se queda con
     lo que sobra en vez de mantener su proporción y dejar un hueco negro
     debajo de las cifras. */
  .may-hero__foto {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 340px;
  }

  .may-publicos__grilla {
    grid-template-columns: repeat(3, 1fr);
  }

  .may-publico {
    padding: var(--espaciado-32);
  }

  .may-paso {
    padding: var(--espaciado-40) var(--espaciado-32);
  }

  .cotizar__cuerpo {
    grid-template-columns: 480px minmax(0, 1fr);
  }

  .cotizar__texto {
    padding: var(--espaciado-48) var(--espaciado-40) var(--espaciado-48) var(--margen-desktop);
  }

  /* Sólo el de esta página: el formulario del login o el del botón de
     arrepentimiento no viven en una retícula a sangre. */
  .cotizar__cuerpo .formulario {
    padding: var(--espaciado-48) var(--margen-desktop) var(--espaciado-48) var(--espaciado-40);
  }
}