/* siluetas.eu — hero "corte" (solo portada, .hero--cut). Ver hero-cut.js */

/* Hoja negra que tapa la foto antes del corte */
.hero--cut .hero-sheet{
  position:absolute;inset:0;background:#0a0a0a;
  opacity:0;transition:opacity 1.2s ease;pointer-events:none;
}
.hero--cut .hero-sheet.on{opacity:1;}

/* El papel cayendo se dibuja aquí */
.hero--cut .cut-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}

/* Caja de la silueta: a la derecha en escritorio, lejos del título */
.hero--cut .cut-box{
  position:absolute;right:9%;top:13%;height:72%;
  aspect-ratio:563.0/954;pointer-events:none;
}
.hero--cut .cut-box svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.hero--cut .cut-piece path{fill:#0a0a0a;stroke:#0a0a0a;stroke-width:2.4;stroke-linejoin:round;transition:stroke .6s ease;}
.hero--cut .cut-piece.cut path{stroke:rgba(243,237,225,.75);}
.hero--cut .cut-overlay{transition:opacity .8s ease;}
.hero--cut .cut-overlay.gone{opacity:0;}
.hero--cut .cut-line{
  fill:none;stroke:#fbf3dc;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 2.5px rgba(227,199,102,.95)) drop-shadow(0 0 7px rgba(201,162,39,.55));
}
.hero--cut .cut-blade{fill:#d8d8d6;stroke:#1d1d1d;stroke-width:1.4;stroke-linejoin:round;}
.hero--cut .cut-ring{fill:none;stroke:#c9a227;stroke-width:4.2;}

/* Tablet: silueta centrada arriba */
@media (max-width:1023px){
  .hero--cut .cut-box{right:auto;left:50%;transform:translateX(-50%);top:11%;height:50%;}
}

/* Móvil: sin descripción; título más contenido.
   Durante el corte solo queda el botón; al terminar vuelven la etiqueta y el título. */
@media (max-width:768px){
  .hero--cut .lede{display:none;}
  .hero--cut h1{font-size:clamp(1.7rem,7.4vw,2.08rem);}
  /* Durante el corte la etiqueta y el título se pliegan (no solo se ocultan),
     así el botón baja al pie y la silueta tiene la pantalla para ella. */
  .hero--cut .hero-content .eyebrow,
  .hero--cut .hero-content h1{max-height:14em;overflow:hidden;transition:opacity 1s ease, max-height 1s ease, margin 1s ease;}
  .hero--cut.is-cutting .hero-content .eyebrow,
  .hero--cut.is-cutting .hero-content h1{opacity:0;max-height:0;margin-top:0;margin-bottom:0;}
  /* El hero ocupa la pantalla visible (svh: sin contar la barra de Safari) y el botón
     se apoya abajo, sin los 200px vacíos que dejaban los márgenes generales. */
  .hero--cut{min-height:100vh;min-height:100svh;padding-bottom:0;}
  .hero--cut .hero-content{padding-bottom:44px;}
  /* Silueta centrada en el hueco libre: entre la cabecera (~100px) y el botón
     (44px de margen + 46px de botón + 24px de aire = 114px desde abajo). */
  .hero--cut .cut-box{
    top:108px;bottom:114px;margin:auto 0;
    height:min(calc(100% - 222px), calc((100vw - 72px) * 954 / 563));
  }
}

/* Texto del hero alineado a la izquierda con el logo.
   .hero es flex, así que .hero-content (que es un .wrap) se encogía al ancho del texto
   y quedaba centrado; y su padding 150px 0 90px anulaba el margen lateral del .wrap. */
.hero--cut .hero-content{width:100%;padding-left:28px;padding-right:28px;}

/* Escritorio: el bloque de texto algo hacia dentro (donde estaba antes),
   más estrecho y con letra más pequeña, para dejar sitio a la silueta de la derecha. */
@media (min-width:1024px){
  .hero--cut .hero-content{padding-left:calc(28px + min(152px, 10vw));}
  .hero--cut h1{font-size:clamp(2.1rem,3.3vw,3.5rem);max-width:600px;}
  .hero--cut .lede{font-size:1rem;max-width:470px;}
}

/* Scroll: el hero se queda fijo mientras el hueco crece (hero-cut.js añade .hero-pin) */
.hero-pin{position:relative;}
.hero--cut.is-pinned{position:sticky;top:0;}
.hero--cut .cut-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font:500 .7rem/1 var(--sans, sans-serif);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75);
  opacity:0;transition:opacity .6s ease;pointer-events:none;
}
.hero--cut .cut-hint.on{opacity:1;}
.hero--cut .cut-hint span{width:1px;height:30px;background:linear-gradient(#e3c766,transparent);animation:cutHint 1.6s ease-in-out infinite;}
@keyframes cutHint{0%,100%{opacity:.3}50%{opacity:1}}
@media (max-width:768px){ .hero--cut .cut-hint{display:none;} }