/* ==========================================================================
   HERO — La Jaula de Papel
   Este archivo se carga SOLO en portada (is_front_page)
   ========================================================================== */

.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 55% 55% at 75% 15%, rgba(126,184,247,.06) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 85%, rgba(201,169,110,.04) 0%, transparent 60%),
    var(--bg);
  clip-path:polygon(
    0 0, 100% 0, 100% 92%,
    94% 96%, 88% 91%, 82% 97%, 76% 93%,
    70% 98%, 64% 92%, 58% 96%, 52% 91%,
    46% 97%, 40% 93%, 34% 98%, 28% 92%,
    22% 96%, 16% 91%, 10% 97%, 4% 93%,
    0 96%
  );
  -webkit-clip-path:polygon(
    0 0, 100% 0, 100% 92%,
    94% 96%, 88% 91%, 82% 97%, 76% 93%,
    70% 98%, 64% 92%, 58% 96%, 52% 91%,
    46% 97%, 40% 93%, 34% 98%, 28% 92%,
    22% 96%, 16% 91%, 10% 97%, 4% 93%,
    0 96%
  );
}

/* Capa 1: barrotes / pentagrama */
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(
    90deg,
    rgba(232,232,224,.05) 0px,
    rgba(232,232,224,.05) 1px,
    transparent 1px,
    transparent 64px
  );
  pointer-events:none;
  z-index:0;
}

/* Capa 2: grano de papel */
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:0;
}

/* El contenido de texto debe ir por encima de las capas decorativas */
.hero > *{
  position:relative;
  z-index:1;
}

/* --- Textos del Hero --- */

.hero-tag{
  font-family:'Space Mono', monospace;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:28px;
}

.hero-title{
  font-family:'Playfair Display', serif;
  font-size:clamp(50px, 8.5vw, 115px);
  line-height:.93;
  font-weight:400;
  font-style:italic;
  max-width:820px;
  margin-bottom:36px;
  color:var(--text);
}
.hero-title em{
  font-style:normal;
  color:var(--paper);
}

.hero-sub{
  font-size:14px;
  color:var(--muted);
  max-width:420px;
  line-height:1.8;
  margin-bottom:52px;
}

.hero-scroll{
  font-family:'Space Mono', monospace;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
}
.hero-scroll::before{
  content:'';
  display:block;
  width:44px;
  height:1px;
  background:var(--muted);
}