/* Landing Voló.ar
 *
 * Implementa "Volo Landing.dc.html" del proyecto "Marca Volo delivery".
 *
 * El mockup esta hecho a un solo ancho (grillas 1.1fr/1fr y repeat(3,1fr), sin
 * breakpoints). Una landing de delivery se ve mayoritariamente desde el telefono,
 * asi que se agregaron dos breakpoints. Es lo unico que se aparta del diseño;
 * colores, tipografia, radios y espaciados salen tal cual de ahi.
 */

:root {
  --violeta: #5a00f5;
  --violeta-osc: #38028f;
  --violeta-medio: #8f2ad1;
  --rosa: #ff0d67;
  --rosa-osc: #c40a54;
  --grad: linear-gradient(90deg, #ff0d67, #5a00f5);
  --grad-135: linear-gradient(135deg, #ff0d67, #5a00f5);

  --texto: #353535;
  --gris-bg: #f5f5f7;
  --blanco: #fff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--blanco);
  font-family: Poppins, system-ui, -apple-system, sans-serif;
  color: var(--texto);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: var(--violeta);
  text-decoration: none;
}

a:hover {
  color: var(--rosa);
}

img,
svg {
  max-width: 100%;
}

.grad-texto {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -------------------------------------------------------------------- nav */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 7vw;
  flex-wrap: wrap;
}

.nav__marca {
  display: flex;
  align-items: center;
  gap: 12px;
}

.marca__texto {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.marca__volo {
  font: 700 26px/1 Poppins, sans-serif;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.marca__ar {
  font: 600 13px Poppins, sans-serif;
  color: var(--texto);
}

.nav__links {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}

.nav__links a {
  font: 600 13.5px Poppins, sans-serif;
}

/* ----------------------------------------------------------------- botones */

.btn {
  border-radius: 999px;
  padding: 10px 22px;
  font: 700 13.5px Poppins, sans-serif;
  cursor: pointer;
  display: inline-block;
}

.btn--grad {
  background: var(--grad);
  color: var(--blanco);
}

.btn--grad:hover {
  opacity: 0.9;
  color: var(--blanco);
}

.btn--blanco {
  background: var(--blanco);
  align-self: flex-start;
  margin-top: 8px;
  padding: 11px 24px;
}

.btn--blanco:hover {
  opacity: 0.9;
}

.btn--violeta-txt {
  color: var(--violeta);
}

.btn--violeta-txt:hover {
  color: var(--violeta);
}

.btn--rosa-txt {
  color: var(--rosa);
}

.btn--rosa-txt:hover {
  color: var(--rosa);
}

/* ------------------------------------------------------------------- hero */

.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 40px 7vw 70px;
}

.hero__texto {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hero h1 {
  margin: 0;
  /* clamp: el titulo escala con el viewport sin necesidad de breakpoints */
  font: 800 clamp(40px, 5.4vw, 72px) / 1.05 Poppins, sans-serif;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.hero__bajada {
  margin: 0;
  font: 500 17px/1.6 Poppins, sans-serif;
  color: rgba(0, 0, 0, 0.6);
  max-width: 440px;
  text-wrap: pretty;
}

.tiendas {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.tienda {
  background: var(--texto);
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blanco);
}

.tienda:hover {
  background: #1f1f1f;
  color: var(--blanco);
}

.tienda__icono {
  font: 700 18px Poppins, sans-serif;
}

.tienda__txt {
  display: flex;
  flex-direction: column;
}

.tienda__txt small {
  font: 500 9px Poppins, sans-serif;
  color: rgba(255, 255, 255, 0.7);
}

.tienda__txt strong {
  font: 700 14px Poppins, sans-serif;
}

.stats {
  display: flex;
  gap: 26px;
  margin: 0;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  flex-direction: column;
}

.stat__valor {
  font: 800 22px Poppins, sans-serif;
  color: var(--violeta);
}

.stat__label {
  margin: 0;
  font: 500 11.5px Poppins, sans-serif;
  color: rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------- mock del telefono */

.hero__mock {
  display: flex;
  justify-content: center;
}

.tel {
  width: 300px;
  background: linear-gradient(160deg, #ff0d67, #5a00f5);
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(90, 0, 245, 0.25);
}

.tel__pantalla {
  background: var(--gris-bg);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tel__top {
  background: var(--grad-135);
  padding: 28px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.marca__volo--blanco {
  font: 700 20px/1 Poppins, sans-serif;
  color: var(--blanco);
}

.marca__ar--blanco {
  font: 600 10px Poppins, sans-serif;
  color: rgba(255, 255, 255, 0.8);
}

.tel__buscador {
  background: var(--blanco);
  border-radius: 11px;
  padding: 9px 12px;
  font: 500 11.5px Poppins, sans-serif;
  color: rgba(0, 0, 0, 0.4);
}

.tel__cats {
  display: flex;
  gap: 7px;
  padding: 12px 14px 4px;
}

.tel__cat {
  flex: 1;
  background: var(--blanco);
  border-radius: 10px;
  padding: 9px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.tel__cat span {
  font: 600 8.5px Poppins, sans-serif;
}

.ico {
  width: 20px;
  height: 20px;
  display: block;
  background: var(--grad-135);
}

.ico--cuadrado {
  border-radius: 7px;
}

.ico--circulo {
  border-radius: 999px;
}

.ico--rombo {
  border-radius: 7px;
  background: var(--violeta);
  transform: rotate(45deg);
}

.ico--rosa {
  border-radius: 7px;
  background: var(--rosa);
}

.tel__card {
  margin: 10px 14px 16px;
  background: var(--blanco);
  border-radius: 12px;
  overflow: hidden;
}

.tel__foto {
  height: 64px;
  background: #ece9f5;
  color: #7a6fa8;
  font: 9px monospace;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.tel__cardpie {
  padding: 9px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 600 11px Poppins, sans-serif;
}

.tel__badge {
  font: 600 8.5px Poppins, sans-serif;
  color: var(--blanco);
  background: var(--grad);
  padding: 3px 9px;
  border-radius: 999px;
}

/* ------------------------------------------------------------------ pasos */

.pasos {
  background: var(--gris-bg);
  padding: 64px 7vw;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.pasos h2 {
  margin: 0;
  font: 700 34px/1.2 Poppins, sans-serif;
  text-align: center;
}

.pasos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.paso {
  background: var(--blanco);
  border-radius: 20px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.paso__n {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--grad-135);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 18px Poppins, sans-serif;
  color: var(--blanco);
}

.paso h3 {
  margin: 0;
  font: 700 18px Poppins, sans-serif;
}

.paso p {
  margin: 0;
  font: 500 13.5px/1.6 Poppins, sans-serif;
  color: rgba(0, 0, 0, 0.55);
}

/* -------------------------------------------------------------------- cta */

.cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 64px 7vw;
}

.cta__caja {
  border-radius: 24px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cta__caja--violeta {
  background: linear-gradient(135deg, #5a00f5, #38028f);
}

.cta__caja--rosa {
  background: linear-gradient(135deg, #ff0d67, #c40a54);
}

.cta__caja h2 {
  margin: 0;
  font: 700 26px Poppins, sans-serif;
  color: var(--blanco);
}

.cta__caja p {
  margin: 0;
  font: 500 14px/1.6 Poppins, sans-serif;
  color: rgba(255, 255, 255, 0.85);
  text-wrap: pretty;
}

/* -------------------------------------------------------------------- pie */

.pie {
  background: var(--texto);
  padding: 36px 7vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: auto;
}

.pie__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 18px Poppins, sans-serif;
  color: var(--blanco);
}

.pie__marca small {
  font: 600 11px Poppins, sans-serif;
  color: rgba(255, 255, 255, 0.6);
}

.pie__legal {
  font: 500 12px Poppins, sans-serif;
  color: rgba(255, 255, 255, 0.55);
}

/* ----------------------------------------------------------- responsive */
/* El mockup es de un solo ancho. Estos breakpoints son agregado propio: una
   landing de delivery se mira sobre todo desde el telefono. */

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-bottom: 48px;
  }

  /* El mock del telefono va primero en el codigo por orden de lectura, pero en
     pantalla chica el titulo tiene que ganar el primer scroll. */
  .hero__mock {
    order: 2;
  }

  .pasos__grid,
  .cta {
    grid-template-columns: 1fr;
  }

  .cta {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

@media (max-width: 640px) {
  .nav {
    justify-content: center;
  }

  .nav__links {
    gap: 18px;
    justify-content: center;
  }

  /* En el telefono, los tres links de texto compiten con el CTA y no entran.
     Se ocultan: las mismas secciones se alcanzan scrolleando. */
  .nav__links a:not(.btn) {
    display: none;
  }

  .pasos h2 {
    font-size: 27px;
  }

  .pie {
    justify-content: center;
    text-align: center;
  }

  .tel {
    width: min(300px, 100%);
  }
}