/* Portada: amanecer en la granja, logo y «próximamente». */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 84px 16px 64px;
  text-align: center;
}
.hero__fondo, .hero__fondo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hero__fondo img { object-fit: cover; object-position: 50% 55%; animation: acercar 26s ease-out both; }
@keyframes acercar { from { scale: 1.1; } to { scale: 1; } }

/* Luz de amanecer arriba, halo crema detrás del logo y fundido con la sección siguiente */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 58% 52% at 50% 40%, rgba(255, 244, 220, .7), rgba(255, 244, 220, 0) 72%),
    linear-gradient(180deg, rgba(255, 190, 100, .38) 0%, rgba(255, 190, 100, 0) 32%),
    linear-gradient(0deg, var(--crema) 0%, rgba(255, 246, 227, .55) 14%, rgba(255, 246, 227, 0) 34%);
}

.hero__contenido { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.8vh, 18px); }
.hero__logo {
  width: min(560px, 86vw, 58svh);
  filter: drop-shadow(0 16px 22px rgba(60, 28, 6, .38));
  animation: caer 1s var(--rebote) .1s both;
}
@keyframes caer {
  from { opacity: 0; translate: 0 -46px; scale: .9; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

/* Cinta roja con pespunte, como un lazo de feria */
.cinta {
  position: relative;
  max-width: 40ch;
  margin-top: -6px;
  padding: .5em 2.4em;
  font-weight: 800; font-size: clamp(1rem, .88rem + .6vw, 1.32rem); line-height: 1.3;
  color: #fff1d0;
  background: linear-gradient(180deg, #d9473a, var(--rojo) 55%, #ac2c21);
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 50%, 100% 100%, 0 100%, 20px 50%);
  text-shadow: 0 2px 0 rgba(80, 12, 6, .55);
  animation: aparecer .7s ease .55s both;
}
.cinta::before {
  content: ""; position: absolute; inset: 5px 26px;
  border-block: 2px dashed rgba(255, 236, 200, .55);
  pointer-events: none;
}
.pronto {
  margin-top: 4px;
  padding: .1em .9em;
  font-weight: 800; font-size: .88rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--madera-osc);
  background: rgba(255, 246, 227, .88); border-radius: 999px;
  animation: aparecer .6s ease .75s both;
}
.hero .letrero { animation: colgar .9s var(--rebote) both; }
.hero .letrero:nth-child(1) { animation-delay: .85s; }
.hero .letrero:nth-child(2) { animation-delay: .97s; }
.hero .letrero:nth-child(3) { animation-delay: 1.09s; }
.fecha {
  margin-top: 6px;
  padding: .05em .9em;
  font-weight: 700; font-size: .95rem; color: var(--madera-osc);
  background: rgba(255, 246, 227, .8); border-radius: 999px;
  animation: aparecer .6s ease 1.25s both;
}
@keyframes aparecer { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes colgar { from { opacity: 0; translate: 0 -26px; } to { opacity: 1; translate: 0 0; } }

.etiqueta-arte--hero { right: 16px; bottom: 16px; }

@media (max-width: 560px) {
  .hero { padding-top: 76px; }
  .cinta { padding-inline: 1.9em; }
  .letrero { padding: .5em 1.15em .45em; }
}