/* PRESENTACIÓN
   Texto a la izquierda, fotografía y girasoles a la derecha. Todo va
   en flujo: el alto lo decide el texto y nada se monta al estrechar
   la ventana. */
.intro {
  display: grid;
  margin-top: clamp(48px, 5.2vw, 76px);
  padding: 0 var(--gutter);
  gap: clamp(32px, 4vw, 64px);
}

.intro-lead {
  font-size: clamp(1.4375rem, 2.15vw, 1.9375rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.intro-copy > p + p {
  max-width: 38em;
  margin-top: clamp(18px, 1.8vw, 26px);
  color: var(--color-text-soft);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.4;
}

/* El marcador amarillo necesita tinta plena debajo. */
.intro-copy .accent {
  color: var(--color-text);
}

.intro-copy > small {
  display: block;
  margin-top: clamp(28px, 3vw, 44px);
  font-size: clamp(0.875rem, 1.3vw, 1.125rem);
  line-height: 1.5;
  letter-spacing: 0;
}

.intro-images {
  display: grid;
  gap: 10px;
}

.intro-images > img {
  width: 100%;
  height: 100%;
  min-height: clamp(210px, 23.4vw, 337px);
  max-height: 420px;
  border-radius: var(--radius);
  object-fit: cover;
}

/* Lo que alguien quiere saber antes de escribir, y el botón para hacerlo. */
.intro-card {
  display: flex;
  padding: clamp(18px, 1.7vw, 26px);
  gap: 16px;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--night-deep);
  color: #fff;
  --color-focus: var(--star-yellow);
}

.intro-status {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.intro-status i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--signal-available);
}

.intro-card dl {
  display: grid;
  margin-bottom: auto;
}

.intro-card dl > div {
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.intro-card dt {
  color: var(--star-yellow);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.intro-card dd {
  font-size: 1rem;
  line-height: 1.3;
}

@media (min-width: 560px) {
  .intro-images {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    align-items: start;
  }
}