:root{
  --text:#3b2a12;
  --text-soft: rgba(59,42,18,.80);
  --accent:#B47A21;
}

*{ box-sizing:border-box; }

html,body{height:100%;margin:0}

/* Fondo blanco premium */
body{
  background:#fff;
  font-family:'Montserrat',system-ui,Arial,sans-serif;
  color:var(--text);
  display:grid;
  place-items:center;
  overflow:hidden;
}

/* Tapiz MUY sutil (blanco, sin “dorado fuerte”) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.75;
  background:
    radial-gradient(1px 1px at 22% 28%, rgba(0,0,0,.020) 50%, transparent 51%) 0 0/ 12px 12px,
    radial-gradient(1px 1px at 78% 72%, rgba(0,0,0,.016) 50%, transparent 51%) 0 0/ 14px 14px,
    repeating-linear-gradient(
      45deg,
      rgba(180,122,33,.030) 0 2px,
      transparent 2px 16px
    );
}

.hero{
  position:relative;
  z-index:1;
  width:min(92vw,420px);
  aspect-ratio:4/5;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.16);
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.hero:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 70px rgba(0,0,0,.20);
}

.hero img.bg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Degradado sutil detrás del texto */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.15) 55%,
    rgba(0,0,0,.35) 100%
  );
}

/* Contenido encima */
.hero-content{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding:2.2rem 1.5rem;
  text-align:center;
  color:#fff;
  gap:.7rem;
}

/* Sobre PNG */
.envelope{
  width: min(44vw, 150px);
  height:auto;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.22));
  transform: translateY(6px);
  opacity:.98;
}

.hero-content h1{
  font-family:'Playfair Display', serif;
  font-size:2.35rem;
  margin:.2rem 0 0;
  letter-spacing:.5px;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}

.hero-content .date{
  margin:0;
  font-size:1rem;
  opacity:.92;
  letter-spacing:.08em;
  text-shadow: 0 2px 14px rgba(0,0,0,.25);
}

/* Cupos (desde JSON) */
.seats{
  margin-top:.6rem;
  font-size:.78rem;
  letter-spacing:.08em;
  color:rgba(255,255,255,.85);
  text-transform:uppercase;
}

.cta{
  margin-top:.9rem;
  padding:.4rem 1rem;
  border:none;
  border-radius:999px;
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.85;
}

.hero:hover .cta{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Accesibilidad */
.hero:focus{
  outline: 3px solid rgba(180,122,33,.35);
  outline-offset: 6px;
}

@media (max-width:480px){
  .hero::after{
    background:linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.22) 50%,
      rgba(0,0,0,.45) 100%
    );
  }

  /* Letras un poco más sutiles en móvil */
  .hero-content h1{ font-size:2.05rem; }
  .hero-content .date{ font-size:.95rem; }
  .seats{ font-size:.74rem; }
  .cta{ font-size:.78rem; }
}