/* ProCampo.ar — landings por especie.
   Reutiliza el hero del inicio pero sin video y con una escala
   tipográfica proporcionada a una página interior.
   Usa las variables ya definidas en site.css. */

.hero-sub { min-height: 58svh; }

.hero-sub .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
}

.hero-sub .hero-content {
  padding: 148px 0 64px;
  grid-template-columns: minmax(0, 1fr);
}

/* el h1 del inicio llega a 7.8rem: es el titular del sitio, no el de
   una página interior. */
.hero-sub h1 {
  max-width: 21ch;
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  line-height: .95;
  letter-spacing: -.05em;
}

.hero-sub .hero-lead { max-width: 700px; }

/* bloques de texto corrido dentro de una .section */
.sol-prosa { max-width: 880px; margin: 0 auto; }
.sol-prosa p { margin: 0 0 18px; }
.sol-prosa p:last-child { margin-bottom: 0; }
.sol-prosa small { color: var(--ink-soft); font-size: .88rem; line-height: 1.6; }

/* tarjetas de "otras soluciones": el título es un enlace */
.species-card h3 a {
  color: inherit;
  text-decoration: none;
}
.species-card h3 a:hover,
.species-card h3 a:focus-visible { text-decoration: underline; }

@media (max-width: 720px) {
  /* site.css fija .hero { min-height: 880px } acá: sin video no hace falta */
  .hero-sub { min-height: 0; }

  /* el degradado móvil del inicio llega a .96 abajo porque ahí el texto va
     al pie; acá va arriba y dejaba el hero casi negro. */
  .hero-sub .hero-overlay {
    background: linear-gradient(180deg,
      rgba(4, 17, 10, .58) 0%,
      rgba(4, 17, 10, .74) 55%,
      rgba(4, 17, 10, .90) 100%);
  }
  .hero-sub .hero-media img { object-position: 50% 42%; }
  .hero-sub .hero-content { padding: 118px 0 50px; }
  .hero-sub h1 { font-size: clamp(2.15rem, 9vw, 3.15rem); max-width: none; }
}

/* Las tarjetas grandes del inicio alojan widgets y por eso miden 520px.
   Las de solución son solo texto: sin ese contenido quedan huecas. */
.sol-bento .feature-card.large,
.sol-bento .feature-card.tall { min-height: 430px; }

@media (max-width: 720px) {
  .sol-bento .feature-card.large,
  .sol-bento .feature-card.tall { min-height: 360px; }
}

/* Sin foto propia de la especie el hero quedaría negro plano.
   Fondo trabajado con la paleta del sitio en lugar de una imagen prestada. */
.hero-plain {
  background:
    radial-gradient(125% 105% at 76% 16%, #17663f 0%, #0d422a 46%, #08281a 100%);
}

.hero-plain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 52% at 86% 10%, rgba(230, 188, 74, .17) 0%, rgba(230, 188, 74, 0) 70%),
    radial-gradient(48% 44% at 8% 92%, rgba(125, 227, 167, .10) 0%, rgba(125, 227, 167, 0) 72%);
}

/* --- Capturas del producto dentro de las landings de especie --- */
.pc-shot { margin: 34px auto 0; max-width: 940px; }
.pc-shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-sm, 16px);
  border: 1px solid var(--line, rgba(11, 22, 16, .10));
  box-shadow: var(--shadow, 0 24px 70px rgba(11, 38, 24, .10));
  background: var(--white, #fff);
}
.pc-shot figcaption {
  margin-top: 12px; font-size: .95rem; line-height: 1.55;
  color: var(--ink-soft, #425047);
}
@media (max-width: 640px) {
  .pc-shot { margin-top: 22px; }
  .pc-shot figcaption { font-size: .9rem; }
}

/* Guias relacionadas al pie de una seccion de prosa. */
.guia-relacionada{margin-top:18px;padding:14px 16px;border-left:3px solid var(--gold,#e6bc4a);background:var(--surface,#f5f6f3);border-radius:0 12px 12px 0;font-size:.95rem;line-height:1.6}
.guia-relacionada a{color:var(--forest,#0b3d25);font-weight:600}

/* Enlace de vuelta desde una guia hacia la solucion que le corresponde. */
.solucion-relacionada{margin-top:18px;padding:14px 16px;border-left:3px solid var(--forest,#0b3d25);background:var(--surface,#f5f6f3);border-radius:0 12px 12px 0;font-size:.95rem;line-height:1.6}
.solucion-relacionada a{color:var(--forest,#0b3d25);font-weight:600}