/* =========================================================================
   BANDADA HC · /personas-numeros
   Landing del webinar «De las personas a los números del negocio», jueves
   15 de octubre de 2026 a las 12:00, con Highdare. Un solo botón que lleva
   al registro del webinar en Zoom; Zoom confirma, recuerda y da el acceso.

   Se monta sobre op.css, que trae la paleta y las tres tipografías. La
   portada repite la composición de las piezas de la campaña: la alianza
   arriba, el titular al ancho, la fecha grande y las tres personas de pie
   sobre un campo de oro con corte diagonal. Ester pidió que no hubiera
   nada más: solo la portada.

   Colores: el esquema «morado» de la campaña (pieza 03), pedido por Ester
   el 1-oct: campo morado de Highdare, oro brillante de acento y papel para
   el texto. El morado vive solo aquí, porque es de la alianza y no de la
   marca.
   ========================================================================= */

body[data-campana="personas-numeros"]{
  --morado:#534998;     /* el morado del isotipo de Highdare */
}

/* El fondo de la página es el mismo morado de la portada: en el celular la
   portada no llenaba la pantalla y abajo quedaba una franja de papel. Además
   la portada ocupa al menos una pantalla completa, con las personas abajo. */
body[data-campana="personas-numeros"]{background:var(--morado)}
main.pn{max-width:none}
.pn__caja{max-width:1100px;margin:0 auto}

/* La portada ------------------------------------------------------------ */
.portada{position:relative;background:var(--morado);color:var(--hueso);
  overflow:hidden;padding:clamp(16px,2vw,26px) var(--pad) 0;isolation:isolate;
  min-height:100svh;display:flex;flex-direction:column}
.portada__campo{position:absolute;left:0;right:0;bottom:0;height:34%;
  background:var(--salmon);clip-path:polygon(0 38%,100% 0,100% 100%,0 100%);z-index:0}
.portada__filo{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:0;
  width:100%;pointer-events:none}
.portada > .pn__caja{position:relative;z-index:1;text-align:center;
  display:flex;flex-direction:column;align-items:center;flex:1;width:100%}

.alianza{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap}
.alianza__hd{height:clamp(26px,3.2vw,40px);width:auto;display:block}
.alianza__amp{font-family:var(--serif);font-weight:300;
  font-size:clamp(22px,2.6vw,34px);line-height:1;opacity:.92}
.alianza__bhc{display:flex;align-items:center;gap:clamp(8px,1.2vw,14px);
  font-family:var(--grotesca);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(18px,2.2vw,28px);color:var(--hueso);text-decoration:none}
/* Alto explícito: un svg con <use> y sin viewBox propio no tiene proporción,
   y con height:auto toma 150 px y deja la fila de logos flotando en aire. */
.alianza__bhc .marcaB{width:clamp(22px,2.6vw,34px);height:clamp(25px,2.9vw,38px);color:var(--hueso)}

.portada .grito{color:var(--hueso);font-size:clamp(30px,4.6vw,66px);max-width:none;
  margin:clamp(34px,5vw,64px) auto 0}
.portada .grito em{color:var(--salmon)}
.portada .bajada{color:rgba(242,238,229,.84);max-width:82ch;margin:clamp(16px,2vw,24px) auto 0;
  font-size:clamp(16px,1.3vw,20px)}
.portada .bajada b{color:var(--hueso)}

.cuando{margin-top:clamp(26px,3.6vw,46px);display:flex;flex-wrap:wrap;
  justify-content:center;align-items:flex-end;gap:14px clamp(22px,3vw,44px)}
.cuando__fecha,.cuando__hora{font-family:var(--grotesca);font-weight:900;
  letter-spacing:-.03em;line-height:1;margin:0;
  font-size:clamp(22px,2.7vw,36px)}
.cuando__fecha{color:var(--salmon)}
.cuando__hora{color:var(--hueso)}
.cuando__hora span{font-weight:400;font-size:.4em;letter-spacing:0;
  color:rgba(242,238,229,.78)}

.inscribir{position:relative;display:inline-flex;align-items:center;gap:14px;
  text-decoration:none;background:var(--tinta);color:var(--salmon);
  font-family:var(--grotesca);font-weight:900;font-size:clamp(17px,1.5vw,20px);
  letter-spacing:-.005em;padding:18px 30px;margin-top:clamp(24px,3.2vw,38px);
  box-shadow:6px 6px 0 var(--hueso);
  transition:background .15s,color .15s,transform .15s,box-shadow .15s}
/* Negro con letras de oro, elegido por Ester el 1-oct entre cinco colores:
   en oro se confundía con la fecha y la franja de abajo, que también son oro.
   El halo: un anillo de oro que sale del botón y se desvanece, cada dos
   segundos y medio. Vive en un pseudoelemento y nunca toca la opacidad ni
   la posición del botón: si la animación no corre, el botón está igual. */
.inscribir::after{content:"";position:absolute;inset:0;pointer-events:none;
  animation:pn-halo 2.6s ease-out infinite}
@keyframes pn-halo{
  0%{box-shadow:0 0 0 0 rgba(231,169,59,.75)}
  70%,100%{box-shadow:0 0 0 18px rgba(231,169,59,0)}}
.inscribir svg{width:22px;height:22px;flex:none;transition:transform .15s}
/* Al pasar el mouse se invierte: fondo oro y letras negras. Oro sobre papel
   no se lee (1,79 de contraste), por eso el fondo no pasa a papel. */
.inscribir:hover,.inscribir:focus-visible{background:var(--salmon);color:var(--tinta);
  transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--hueso)}
.inscribir:hover svg,.inscribir:focus-visible svg{transform:translateX(4px)}
.inscribir:focus-visible{outline:3px solid var(--hueso);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.inscribir::after{animation:none}}

.gente{display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(6px,3vw,44px);margin-top:auto;padding-top:clamp(28px,5vw,64px)}
.gente img{height:clamp(140px,22vw,320px);width:auto;display:block;flex:none}
.gente img:nth-child(2){height:clamp(154px,24vw,350px)}

@media (max-width:760px){
  .portada__campo,.portada__filo{height:28%}
  .cuando{gap:12px 22px}
}
@media (max-width:480px){
  .alianza{gap:12px}
  .portada__campo,.portada__filo{height:30%}
  .gente{gap:2px;padding-top:40px}
  .gente img{height:clamp(170px,44vw,230px)}
  .gente img:nth-child(2){height:clamp(190px,49vw,255px)}
  .inscribir{width:100%;justify-content:center}
}