/* HERO SLIDER · Convocatoria Marzo 2027 · webproX  (v2) ─────────────────────
   El arte es 2.55:1 y mide 1200x470. Dos decisiones que ordenan todo lo demás:

   ESCRITORIO — la tarjeta se topa en 1240 px. Antes el arte iba a 100vw y en
   una pantalla ancha se agrandaba hasta un 60%: por eso se veía blando. Ahora
   nunca crece más de un 3%. La banda de alrededor la pinta .ujp-hero-wrap, que
   ya es guinda profunda y full-bleed.

   TELÉFONO — el arte no se recorta: a 390 px se veía menos de un tercio y el
   titular impreso quedaba partido, encima del titular en HTML. El teléfono arma
   su propia pieza: la foto (recorte del mismo arte, sin letras) y el texto en
   HTML, sobre los colores del propio banner. Cuando lleguen los verticales de
   1080x1350, entran como fondo de .whs-mob-ph y este bloque no cambia. */

/* El header del sitio flota (position:absolute) sobre el hero y mide 126 px en
   escritorio y 68 en telefono. Sin este despeje arriba se comia los primeros
   90 px del arte — literalmente le cortaba la cabeza a uno de los chicos. */
.wpx-hero-wrap .wpx-hero-slider{
  position:relative; z-index:2;
  flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  padding:142px clamp(16px,3vw,40px) clamp(20px,3vw,40px);
}

.wpx-hero-slider .whs-track{
  position:relative;
  width:100%; max-width:1240px; margin:0 auto;
  flex:0 0 auto;                 /* que el flex no lo achate y le rompa la proporcion */
  aspect-ratio:1200/470;
  border-radius:16px; overflow:hidden;
  background:#2A0610;
  box-shadow:0 22px 50px -26px rgba(0,0,0,.85);
}

.wpx-hero-slider .whs-slide{
  position:absolute; inset:0; display:block; text-decoration:none;
  opacity:0; visibility:hidden; transition:opacity .55s ease;
}
.wpx-hero-slider .whs-slide.is-on{ opacity:1; visibility:visible; }

.wpx-hero-slider .whs-art{ position:absolute; inset:0; }
.wpx-hero-slider .whs-art picture{ display:block; height:100%; }
.wpx-hero-slider .whs-art img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center;
}

.wpx-hero-slider .whs-mob{ display:none; }

/* Botones: los pinta el sistema (.ujp-btn-wine / .ujp-btn-orbit de componentes.css).
   Acá sólo se los ubica; ni un color ni un radio propio, para que sigan al sistema
   si alguna vez cambia. */
.wpx-hero-slider .whs-btn-d{
  position:absolute; left:clamp(18px,3.4vw,44px); bottom:clamp(16px,3.2vw,36px);
  z-index:3;
  /* El padding va explicito: el de componentes.css no llega hasta el boton
     dentro del slider y quedaba una pildora de 28 px de alto. Los valores estan
     entre los del boton borgona (15/38) y los del hero (21/56). */
  padding:18px 44px; font-size:.96rem;
}
.wpx-hero-slider .whs-btn-d span{ display:inline-flex; align-items:center; gap:9px; }
.wpx-hero-slider .whs-btn-d svg{ width:18px; height:18px; flex-shrink:0; }
.wpx-hero-slider .whs-slide:hover .whs-btn-d{ transform:translateY(-2px); }

/* puntitos */
.wpx-hero-slider .whs-dots{
  position:absolute; right:clamp(16px,2.6vw,32px); bottom:clamp(16px,3.2vw,36px);
  display:flex; gap:9px; z-index:4;
}
.wpx-hero-slider .whs-dot{
  width:10px; height:10px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:rgba(251,248,244,.5); box-shadow:0 0 0 1px rgba(0,0,0,.18);
  transition:background .2s ease, transform .2s ease;
}
.wpx-hero-slider .whs-dot.is-on{ background:#E6D4A8; transform:scale(1.25); }
.wpx-hero-slider.is-uno .whs-dots{ display:none; }

/* ── TELÉFONO ─────────────────────────────────────────────────────────────
   El arte se ve ENTERO y en su proporción original: nada recortado, nada
   ampliado. Debajo, el texto en HTML sobre papel — a 390 px las letras impresas
   del banner quedan chicas, así que el mensaje lo carga el texto. El botón es el
   mismo de escritorio. */
@media (max-width:820px){

  .wpx-hero-wrap .wpx-hero-slider{ padding:78px 0 0; }

  /* 328 y no mas: con el topbar de dos lineas, el bloque entero (barra + header +
     arte + texto + hitos) tiene que entrar en la pantalla sin desbordar. */
  .wpx-hero-slider .whs-track{
    aspect-ratio:auto; height:328px;
    max-width:none; border-radius:0; box-shadow:none;
  }

  .wpx-hero-slider .whs-slide{ display:flex; flex-direction:column; }

  .wpx-hero-slider .whs-art{ position:static; flex:0 0 auto; }
  .wpx-hero-slider .whs-art picture{ height:auto; }
  .wpx-hero-slider .whs-art img{
    height:auto; aspect-ratio:1200/470; object-fit:contain;   /* proporción original, sin recorte */
  }

  .wpx-hero-slider .whs-mob{
    display:flex; flex-direction:column; justify-content:center; gap:9px;
    flex:1 1 auto; min-height:0;
    padding:14px 18px 16px;
    background:var(--s-bg); color:var(--s-ink);
  }

  .wpx-hero-slider .whs-kick{
    font:700 10.5px/1.35 Inter,system-ui,-apple-system,sans-serif;
    letter-spacing:.15em; text-transform:uppercase; color:var(--s-kick);
  }
  .wpx-hero-slider .whs-tit{
    font:700 18px/1.22 Georgia,"Times New Roman",serif; color:var(--s-ink);
    overflow-wrap:break-word; text-wrap:balance;
  }

  .wpx-hero-slider .whs-btn-d{ display:none; }
  .wpx-hero-slider .whs-btn-m{
    align-self:flex-start; margin-top:2px;
    padding:11px 20px; font-size:.85rem;
  }

  .wpx-hero-slider .whs-dots{ right:14px; bottom:12px; }
  .wpx-hero-slider .whs-dot{ background:rgba(0,0,0,.28); }
  .wpx-hero-slider .whs-dot.is-on{ background:#5E1626; }
}

/* pantallas muy angostas: la foto cede espacio al texto */
@media (max-width:360px){
  .wpx-hero-slider .whs-mob{ grid-template-columns:30% 1fr; }
  .wpx-hero-slider .whs-tit{ font-size:17.5px; }
  .wpx-hero-slider .whs-mob-tx{ padding:16px 16px 16px 14px; }
}