.hero {
  position: relative;

  min-height:
    calc(
      100vh
      - var(--header-height)
    );

  padding:
    clamp(60px, 5.5vw, 84px)
    0
    34px;

  background:
    radial-gradient(
      circle at 82% 17%,
      rgba(113,185,0,.11),
      transparent 30%
    ),
    radial-gradient(
      circle at 10% 14%,
      rgba(22,148,59,.055),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      var(--canvas) 100%
    );
}


/*
  El hero usa un ancho propio mayor
  que el resto del sitio para darle
  protagonismo a la captura del producto.
*/

.hero__grid {
  width:
    min(
      calc(100% - 56px),
      1500px
    );

  display:
    grid;

  grid-template-columns:
    minmax(470px,.78fr)
    minmax(700px,1.22fr);

  align-items:
    center;

  gap:
    clamp(
      28px,
      3vw,
      48px
    );
}


.hero__content {
  position: relative;

  z-index: 3;

  max-width:
    610px;
}


.hero__eyebrow {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    31px;

  margin:
    0 0 24px;

  padding:
    0 12px;

  color:
    var(--trazza-green-strong);

  background:
    var(--green-soft);

  border:
    1px solid
    var(--green-border);

  border-radius:
    999px;

  font-size:
    11px;

  font-weight:
    850;

  letter-spacing:
    .065em;

  text-transform:
    uppercase;
}


.hero h1 {
  max-width:
    610px;

  margin:
    0;

  color:
    var(--trazza-dark);

  font-size:
    clamp(
      52px,
      4.2vw,
      70px
    );

  font-weight:
    850;

  line-height:
    .99;

  letter-spacing:
    -.052em;
}


.hero h1 span {
  display:
    block;

  margin-top:
    5px;

  color:
    var(--trazza-green);
}


.hero__lead {
  max-width:
    560px;

  margin:
    27px 0 0;

  color:
    var(--muted);

  font-size:
    clamp(
      17px,
      1.22vw,
      20px
    );

  line-height:
    1.68;
}


.hero__actions {
  margin-top:
    32px;
}


.hero__capabilities {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    13px 19px;

  margin-top:
    31px;

  color:
    var(--muted);

  font-size:
    13px;

  font-weight:
    700;
}


.hero__capabilities span {
  position:
    relative;

  padding-left:
    17px;
}


.hero__capabilities span::before {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    0;

  width:
    7px;

  height:
    7px;

  background:
    var(--trazza-lime);

  border-radius:
    50%;

  transform:
    translateY(-50%);
}


/*
  Captura realista y censurada
  de Ruta diaria.
*/

.hero__visual {
  position:
    relative;

  z-index:
    2;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;
}


.hero__visual::before {
  content:
    "";

  position:
    absolute;

  z-index:
    -1;

  width:
    78%;

  height:
    72%;

  top:
    15%;

  left:
    13%;

  background:
    radial-gradient(
      ellipse,
      rgba(71,145,55,.13),
      transparent 68%
    );

  filter:
    blur(30px);
}


.hero-shot {
  position:
    relative;

  width:
    112%;

  margin:
    0 -8% 0 -2%;

  overflow:
    hidden;

  background:
    #ffffff;

  border:
    1px solid
    rgba(16,32,48,.09);

  border-radius:
    15px;

  box-shadow:
    0 28px 64px
    rgba(16,32,48,.14);

  transform:
    perspective(1800px)
    rotateY(-.55deg)
    rotateX(.15deg);

  transform-origin:
    center center;
}


.hero-shot::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  border-radius:
    inherit;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.28);
}


.hero-shot img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  object-fit:
    contain;
}


.hero__footer {
  display:
    flex;

  justify-content:
    center;

  margin-top:
    clamp(
      50px,
      5vw,
      72px
    );

  color:
    var(--muted);

  font-size:
    13px;

  font-weight:
    700;

  text-align:
    center;
}


/*
  Notebook / desktop medio
*/

@media (max-width: 1320px) {

  .hero__grid {
    width:
      min(
        calc(100% - 42px),
        1280px
      );

    grid-template-columns:
      minmax(430px,.82fr)
      minmax(620px,1.18fr);

    gap:
      30px;
  }

  .hero-shot {
    width:
      108%;

    margin:
      0 -5% 0 -1%;
  }

}


/*
  Tablet y pantallas angostas:
  texto arriba, captura abajo.
*/

@media (max-width: 1120px) {

  .hero {
    padding-top:
      62px;
  }

  .hero__grid {
    width:
      min(
        calc(100% - 42px),
        1040px
      );

    grid-template-columns:
      1fr;

    gap:
      56px;
  }

  .hero__content {
    max-width:
      760px;
  }

  .hero h1 {
    max-width:
      720px;
  }

  .hero__lead {
    max-width:
      680px;
  }

  .hero__visual {
    width:
      100%;

    margin-inline:
      auto;
  }

  .hero-shot {
    width:
      100%;

    margin:
      0;

    transform:
      none;
  }

}


/*
  Móvil
*/

@media (max-width: 720px) {

  .hero {
    min-height:
      auto;

    padding:
      50px
      0
      26px;
  }

  .hero__grid {
    width:
      min(
        calc(100% - 28px),
        680px
      );

    gap:
      42px;
  }

  .hero h1 {
    font-size:
      clamp(
        43px,
        11.8vw,
        58px
      );
  }

  .hero__lead {
    font-size:
      17px;
  }

  .hero__actions
  .button {
    width:
      100%;
  }

  .hero__capabilities {
    gap:
      11px 16px;
  }

  .hero-shot {
    border-radius:
      11px;

    box-shadow:
      0 18px 40px
      rgba(16,32,48,.12);
  }

  .hero__footer {
    margin-top:
      42px;
  }

}