/* ============================================================
   HERO PIN — superficie plena de marca, el rotulo de la pagina
   centrado y fichas de foto que se solapan con la palabra.
   Encima, etiquetas flotantes tipo busqueda. La escena mantiene
   su proporcion para que la composicion no se descuadre.
   ============================================================ */
.hero-pin{position:relative;overflow:hidden;
  background:var(--brand);color:var(--on-brand);
  min-height:100vh;min-height:100svh;
  margin-block-start:calc(var(--header-h) * -1);
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--header-h) + clamp(1rem,4vh,3rem)) var(--gutter)
          clamp(1.5rem,5vh,3.5rem)}
.hero-pin__escena{position:relative;width:100%;max-width:1240px;
  aspect-ratio:1200/658}
@supports (container-type:inline-size){
  .hero-pin__escena{container-type:inline-size}
}

/* Tonos: la misma pieza sobre distintas superficies de marca */
.hero-pin--profundo{background:var(--brand-deep)}
.hero-pin--ink{background:var(--ink)}
.hero-pin--papel{background:var(--papel);color:var(--ink)}
/* Sobre superficie clara el rotulo va en negro y las pastillas
   necesitan filete para despegarse del fondo. */
.hero-pin--papel .hero-pin__palabra{color:var(--ink)}
.hero-pin--papel .hero-pin__foto{background:rgba(12,12,12,.07)}
.hero-pin--papel .hero-pin__tag{border:1px solid var(--ink);box-shadow:none}

/* El rotulo, centrado. Texto real (no SVG) para que el prosado sea
   exacto: los glifos conservan su dibujo y el tracking negativo se
   aplica igual en todas las paginas. El cuerpo va en unidades de la
   escena, asi que escala con ella sin deformarse. */
.hero-pin__marca{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);margin:0;z-index:2;
  user-select:none;text-align:center;width:100%}
.hero-pin__palabra{display:block;font-family:var(--font-display);
  font-weight:400;font-size:calc(var(--marca-fs,17) * 1vw);
  line-height:.82;letter-spacing:-.03em;text-transform:uppercase;
  white-space:nowrap;color:#fff}
@supports (container-type:inline-size){
  .hero-pin__palabra{font-size:calc(var(--marca-fs,17) * 1cqw)}
}
.hero-pin__palabra sup{font-family:var(--font-grotesk);font-weight:600;
  font-size:.15em;letter-spacing:0;vertical-align:super;
  margin-inline-start:.06em}

/* Fichas de foto: unas por detras del rotulo y otras por delante */
.hero-pin__foto{position:absolute;margin:0;overflow:hidden;
  border-radius:14px;background:rgba(255,255,255,.10)}
.hero-pin__foto img{width:100%;height:100%;object-fit:cover;display:block}
.hero-pin__foto--tras{z-index:1}
.hero-pin__foto--ante{z-index:3}
.hero-pin__foto--1{left:13.5%;top:26%;width:14%;height:30%}
.hero-pin__foto--2{left:9.5%;top:56.5%;width:22%;height:31%}
.hero-pin__foto--3{left:80.5%;top:26%;width:14.5%;height:30%}
.hero-pin__foto--4{left:77%;top:56.5%;width:14.5%;height:30%}

/* Etiquetas flotantes: pastilla blanca, lupa a la izquierda y
   flecha de tendencia a la derecha */
.hero-pin__tag{position:absolute;z-index:4;
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;color:var(--ink);border-radius:999px;
  padding:.5rem .9rem;
  font-family:var(--font-grotesk);font-weight:500;
  font-size:clamp(.625rem,1.02vw,.875rem);letter-spacing:-.01em;
  line-height:1;white-space:nowrap;
  box-shadow:0 2px 12px rgba(0,0,0,.16)}
.hero-pin__tag svg{width:1.05em;height:1.05em;flex:0 0 auto;opacity:.75}
.hero-pin__tag .tend{opacity:.9}
.hero-pin__tag--1{left:2%;top:17%}
.hero-pin__tag--2{left:19%;top:85%}
.hero-pin__tag--3{left:79%;top:79%}

/* --- Variante B: menos fichas, mas aire, columna derecha baja --- */
.hero-pin--b .hero-pin__foto--1{left:7%;top:19%;width:15%;height:32%}
.hero-pin--b .hero-pin__foto--2{left:4.5%;top:59%;width:20%;height:28%}
.hero-pin--b .hero-pin__foto--3{left:80%;top:45%;width:16%;height:34%}
.hero-pin--b .hero-pin__tag--1{left:25%;top:11%}
.hero-pin--b .hero-pin__tag--2{left:60%;top:85%}

/* --- Variante C: cinco fichas escalonadas, una sobre el rotulo --- */
.hero-pin--c .hero-pin__foto--1{left:2%;top:31%;width:12%;height:26%}
.hero-pin--c .hero-pin__foto--2{left:14%;top:63%;width:16%;height:26%}
.hero-pin--c .hero-pin__foto--3{left:85%;top:21%;width:13%;height:28%}
.hero-pin--c .hero-pin__foto--4{left:71%;top:64%;width:15%;height:25%}
.hero-pin--c .hero-pin__foto--5{left:44%;top:4%;width:13%;height:22%}
.hero-pin--c .hero-pin__tag--1{left:0;top:20%}
.hero-pin--c .hero-pin__tag--2{left:33%;top:89%}
.hero-pin--c .hero-pin__tag--3{left:62%;top:9%}

/* --- Variante D: fichas mas juntas al rotulo --- */
.hero-pin--d .hero-pin__foto--1{left:3.5%;top:24%;width:13%;height:28%}
.hero-pin--d .hero-pin__foto--2{left:9%;top:60%;width:18%;height:27%}
.hero-pin--d .hero-pin__foto--3{left:83%;top:24%;width:15%;height:29%}
.hero-pin--d .hero-pin__foto--4{left:75%;top:61%;width:13%;height:26%}
.hero-pin--d .hero-pin__tag--1{left:0;top:13%}
.hero-pin--d .hero-pin__tag--2{left:31%;top:88%}
.hero-pin--d .hero-pin__tag--3{left:73%;top:12%}

@media (max-width:900px){
  .hero-pin__escena{aspect-ratio:900/760}
  .hero-pin__marca{width:74%}
  .hero-pin__foto--1{left:6%;top:22%;width:20%;height:22%}
  .hero-pin__foto--2{left:3%;top:56%;width:30%;height:24%}
  .hero-pin__foto--3{left:74%;top:22%;width:21%;height:22%}
  .hero-pin__foto--4{left:70%;top:56%;width:21%;height:24%}
  .hero-pin__tag--1{left:0;top:12%}
  .hero-pin__tag--2{left:14%;top:84%}
  .hero-pin__tag--3{right:0;left:auto;top:47%}
  /* En pantalla estrecha todas las variantes comparten reparto: el
     rotulo manda y las fichas se reducen a las cuatro esquinas. */
  .hero-pin--b .hero-pin__foto--1,
  .hero-pin--c .hero-pin__foto--1,
  .hero-pin--d .hero-pin__foto--1{left:6%;top:22%;width:20%;height:22%}
  .hero-pin--b .hero-pin__foto--2,
  .hero-pin--c .hero-pin__foto--2,
  .hero-pin--d .hero-pin__foto--2{left:3%;top:56%;width:30%;height:24%}
  .hero-pin--b .hero-pin__foto--3{left:74%;top:56%;width:21%;height:24%}
  .hero-pin--c .hero-pin__foto--3,
  .hero-pin--d .hero-pin__foto--3{left:74%;top:22%;width:21%;height:22%}
  .hero-pin--c .hero-pin__foto--4,
  .hero-pin--d .hero-pin__foto--4{left:70%;top:56%;width:21%;height:24%}
  .hero-pin--c .hero-pin__foto--5{display:none}
  .hero-pin--b .hero-pin__tag--1{left:0;top:12%}
  .hero-pin--b .hero-pin__tag--2{left:20%;top:84%}
  .hero-pin--c .hero-pin__tag--1,
  .hero-pin--d .hero-pin__tag--1{left:0;top:12%}
  .hero-pin--c .hero-pin__tag--2,
  .hero-pin--d .hero-pin__tag--2{left:14%;top:84%}
  .hero-pin--c .hero-pin__tag--3,
  .hero-pin--d .hero-pin__tag--3{right:0;left:auto;top:47%}
}
@media (max-width:560px){
  .hero-pin__marca{width:86%}
  .hero-pin--b .hero-pin__marca,
  .hero-pin--c .hero-pin__marca,
  .hero-pin--d .hero-pin__marca{width:90%}
  .hero-pin__tag{padding:.42rem .7rem;gap:.35rem}
}

/* ============================================================
   AJUSTES DE MONTAJE EN WORDPRESS
   Elementor envuelve cada seccion en sus propios contenedores;
   aqui los neutralizamos para que el diseno siga siendo a sangre.
   ============================================================ */
.elementor-widget-html,
.elementor-widget-container{margin:0;padding:0}
.e-con,.e-con-inner,
.elementor-section,.elementor-container{max-width:none!important;
  margin:0!important;padding:0!important;width:100%}
.elementor-widget:not(:last-child){margin-block-end:0}
/* El enlace de cierre a sangre va suelto, sin envoltorio */
.sr-cierre{display:block}

/* ============================================================
   FICHAS DE ARTISTA — la rejilla abre la pagina, asi que arranca
   pegada al header y las fotos son verticales: llenan el primer
   vistazo y dan mas presencia a cada artista.
   ============================================================ */
.fichas{border-block:0}
.ficha img{aspect-ratio:4/5}
/* La primera fila ocupa lo que queda de pantalla bajo el header */
.fichas .ficha:nth-child(-n+3) img{
  min-height:calc((100svh - var(--header-h)) * .92)}
.ficha__pie{
  padding:clamp(3rem,7vw,5.5rem) clamp(.9rem,1.8vw,1.5rem) clamp(1rem,2vw,1.5rem)}
.ficha__nombre{font-size:clamp(1.125rem,2.4vw,2rem)}

@media (max-width:900px){
  .ficha img{aspect-ratio:3/4}
  .fichas .ficha:nth-child(-n+3) img{min-height:0}
  .fichas .ficha:nth-child(-n+2) img{
    min-height:calc((100svh - var(--header-h)) * .58)}
}
@media (max-width:680px){
  .fichas .ficha:nth-child(-n+2) img{min-height:0}
  .fichas .ficha:first-child img{
    min-height:calc((100svh - var(--header-h)) * .62)}
}