/* ==========================================================
   Adeimo — anuncio en la tarjeta del hero
   Contenido en /anuncio.json · Imágenes en /anuncios/
   ----------------------------------------------------------
   El flyer sustituye al logo dentro de .hero-card y la tarjeta
   entera se vuelve un enlace. Se apoya en lo que el sitio ya
   tiene: .hero-card:hover ya endereza y levanta la tarjeta, y
   .hero-stat-chip ya es la pastilla navy del hero.
   ========================================================== */

.anuncio-enlace {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* El flyer llena la tarjeta de lado a lado: trae su propio fondo y
   su propio diseño, así que el marco blanco sobraba.
   Sin overflow:hidden, para no recortar la cinta adhesiva que el
   sitio dibuja asomando por encima del borde superior. */
.anuncio-enlace .hero-card {
  padding: 0;
  max-width: 430px; /* tope de seguridad por si el flyer no es cuadrado */
  margin: 0 auto;
}

.anuncio-enlace .hero-card img {
  border-radius: 26px; /* acompaña el redondeo de la tarjeta */

  /* IMPRESCINDIBLE. El CSS del sitio declara `.hero-card img{width:100%}`
     pero no fija la altura, así que el atributo height="1080" que lleva
     la imagen se aplicaba tal cual y estiraba el flyer: la tarjeta
     pasaba a medir 424x1080 y el hero saltaba de 691px a 1318px.
     Ese atributo está para reservar la proporción mientras carga; con
     height:auto cumple su función sin deformar nada. */
  height: auto;
}

/* Accesibilidad: foco visible al navegar con teclado */
.anuncio-enlace:focus-visible {
  outline: none;
}
.anuncio-enlace:focus-visible .hero-card {
  outline: 3px solid var(--orange);
  outline-offset: 8px;
}

/* La pastilla hereda .hero-stat-chip del sitio; aquí solo se ajusta
   lo propio del anuncio. */
.anuncio-chip {
  cursor: pointer;
  z-index: 2;
}

/* El chip no encoge al mismo ritmo que la tarjeta: con los tamaños del
   sitio ocupa el 36% del ancho del flyer en escritorio, pero el 49% en
   tablet y el 60% en móvil, donde tapa buena parte del diseño.
   Estos tamaños lo devuelven a ~40% y ~43%, en línea con el escritorio. */
@media (max-width: 980px) {
  .anuncio-chip {
    padding: 10px 14px;
    border-radius: 15px;
    left: 20px;
  }
  .anuncio-chip strong {
    font-size: 18px;
  }
  .anuncio-chip span {
    font-size: 10.5px;
  }
}

@media (max-width: 480px) {
  .anuncio-chip {
    padding: 7px 10px;
    border-radius: 12px;
    left: 10px;
    bottom: 2px;
  }
  .anuncio-chip strong {
    font-size: 14px;
  }
  .anuncio-chip span {
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .anuncio-enlace .hero-card img {
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anuncio-enlace .hero-card {
    transition: none;
  }
}