/* Hero + overlay */
.hero {
    position: relative;
    isolation: isolate
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, .9) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 84px 0 56px
}

.hero h1 {
    font: 800 48px/1.1 Montserrat, sans-serif;
    margin: 0 0 14px;
    color: #515151;
    text-align: center
}

/* Iconos bajo el título */
.hero-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin: 14px 0 8px;
    opacity: .85
}

.hero-icons img {
    display: block;
    width: 50px;
    height: auto
}

/* Bloque de logos/CTA */
.cta-inline {
    display: flex;
    justify-content: center;
    margin: 18px 0
}

.logos {
    padding: 22px 0 8px;
    text-align: center
}

.logos h3 {
    font: 700 24px Montserrat, sans-serif;
    margin: 0
}

.logos p {
    color: var(--gray);
    margin: 6px 0 14px
}

/* ===== Logos animados ===== */
.logos-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: center;
  justify-items: center;
}

.logo-item, .is-featured {
  max-height: 150px;
  width: auto;
  opacity: 0;                     /* se revelan con la animación */
  filter: grayscale(10%);
  transform: translateY(10px) scale(0.98);
  will-change: transform, opacity, filter;
  animation:
    logoIn .8s ease forwards,
    floatY 6s ease-in-out .8s infinite alternate;
}

/* Escalonamos la entrada por posición */
.logos-row .logo-item:nth-child(1){ animation-delay: .05s, .85s; }
.logos-row .logo-item:nth-child(2){ animation-delay: .15s, .95s; }
.logos-row .logo-item:nth-child(3){ animation-delay: .25s, 1.05s; }
.logos-row .logo-item:nth-child(4){ animation-delay: .35s, 1.15s; }
.logos-row .logo-item:nth-child(5){ animation-delay: .45s, 1.25s; }

/* Hover: quita gris, escala leve y sombra suave */
.logo-item:hover{
  filter: none;
  transform: translateY(0) scale(1.04);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Destacado: Praderas con halo muy sutil */
.logo-item.is-featured{
  filter: none; /* sin gris para resaltarlo */
  animation:
    logoIn .8s ease forwards,
    floatY 6.2s ease-in-out .8s infinite alternate,
    glow 3.6s ease-in-out 1.2s infinite;
}

/* Keyframes */
@keyframes logoIn{
  from{ opacity:0; transform: translateY(12px) scale(0.96); }
  to  { opacity:1; transform: translateY(0)    scale(1);    }
}
@keyframes floatY{
  from{ transform: translateY(0);   }
  to  { transform: translateY(-6px); }
}
@keyframes glow{
  0%,100% { filter: drop-shadow(0 0 0 rgba(29,193,165,0)); }
  50%     { filter: drop-shadow(0 0 10px rgba(29,193,165,.35)); }
}

/* Accesibilidad: respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce){
  .logo-item{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Responsive (si lo necesitas en 2 col / 1 col) */
@media (max-width: 900px){
  .logos-row{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .logos-row{ grid-template-columns: 1fr; }
}


/* === Enlace destacado (Praderas) === */
.is-featured-link {
  display: inline-block;
  position: relative;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.is-featured-link:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(29, 193, 165, 0.4));
}

/* Imagen destacada (solo Praderas) */
.is-featured {
  filter: none;
  animation:
    logoIn .8s ease forwards,
    floatY 6.2s ease-in-out .8s infinite alternate,
    glowPulse 3.6s ease-in-out 1.2s infinite;
}

/* Brillo pulsante para destacar el logo */
@keyframes glowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(29, 193, 165, 0));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(29, 193, 165, 0.45));
  }
}