.hs-por{ display:grid; align-content:center; min-height:100vh; min-height:100svh; padding:calc(var(--cab-h,105px) + clamp(18px,4vh,44px)) 0 clamp(24px,5vh,56px); background:#fff; }
.hs-por__in{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr); grid-template-areas:"txt foto" "linea linea"; gap:clamp(22px,4.4vh,52px) clamp(32px,5vw,96px); align-items:start; }
.hs-por__txt{ grid-area:txt; }
.hs-por__h1{ margin:0; max-width:21ch; font-family:var(--f-display); font-weight:500; font-size:clamp(36px, min(4.3vw, 7.4vh), 78px); line-height:1.03; letter-spacing:-.02em; color:var(--tinta); }
.hs-por__h1 em{ font-style:italic; color:var(--navy); }
.hs-por__foto{ grid-area:foto; position:relative; margin:6px 0 0 14px; isolation:isolate; }
.hs-por__foto img{ display:block; width:100%; height:auto; aspect-ratio:3/4; max-height:calc(100svh - var(--cab-h,105px) - 300px); min-height:160px; object-fit:cover; object-position:50% 50%; }
.hs-por__foto::after{ content:""; position:absolute; inset:-14px 14px 14px -14px; border:1.5px solid var(--oro-vivo); z-index:-1; }
/* línea de tiempo horizontal: la raya dorada se traza de izquierda a derecha y cada año aparece al pasar */
.hs-linea{ grid-area:linea; position:relative; list-style:none; margin:0; padding:22px 0 0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px,2.4vw,40px); }
.hs-linea::before{ content:""; position:absolute; left:0; right:0; top:7px; height:2px; background:var(--oro-vivo); transform-origin:left; }
.hs-linea__hito{ position:relative; display:flex; flex-direction:column; }
.hs-linea__punto{ position:absolute; left:0; top:-22px; width:15px; height:15px; border-radius:50%; background:var(--oro-vivo); box-shadow:0 0 0 5px #fff; }
.hs-linea__anio{ margin-top:6px; font-family:var(--f-display); font-weight:500; font-size:clamp(40px, min(4vw, 7vh), 72px); line-height:1; letter-spacing:-.02em; color:var(--tinta); }
.hs-linea__nom{ margin-top:8px; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); }
html.fz-js:not(.fz-quieto) .hs-por__txt > *{ opacity:0; transform:translateY(18px); animation:fz-sube .9s cubic-bezier(.22,1,.28,1) forwards; }
html.fz-js:not(.fz-quieto) .hs-por__h1{ animation-delay:.12s; }
html.fz-js:not(.fz-quieto) .hs-por__foto img{ clip-path:inset(0 0 100% 0); animation:fz-cortina 1.1s cubic-bezier(.65,0,.35,1) .2s forwards; }
html.fz-js:not(.fz-quieto) .hs-por__foto::after{ opacity:0; animation:fz-sube .8s ease 1.1s forwards; }
html.fz-js:not(.fz-quieto) .hs-linea::before{ transform:scaleX(0); animation:hs-traza 1.6s cubic-bezier(.65,0,.35,1) .7s forwards; }
html.fz-js:not(.fz-quieto) .hs-linea__hito{ opacity:0; transform:translateY(12px); animation:fz-sube .8s cubic-bezier(.22,1,.28,1) forwards; }
html.fz-js:not(.fz-quieto) .hs-linea__hito:nth-child(1){ animation-delay:.8s; } html.fz-js:not(.fz-quieto) .hs-linea__hito:nth-child(2){ animation-delay:1.3s; } html.fz-js:not(.fz-quieto) .hs-linea__hito:nth-child(3){ animation-delay:1.8s; }
@keyframes hs-traza{ to{ transform:scaleX(1); } }
/* video de 15 años: espacio reservado hasta que llegue el enlace de YouTube */
.hs-video{ background:var(--crema); }
.hs-video__in{ display:grid; gap:clamp(16px,3vh,32px); }
.hs-video__tit{ margin:0; max-width:24ch; font-family:var(--f-display); font-weight:500; font-size:clamp(32px, min(3.6vw, 6vh), 62px); line-height:1.05; letter-spacing:-.015em; color:var(--tinta); }
.hs-video__marco{ position:relative; width:min(100%, calc((100svh - var(--cab-h,105px) - 250px) * 16 / 9)); aspect-ratio:16/9; overflow:hidden; background:var(--tinta); }
.hs-video__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hs-video__velo{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,31,79,.15), rgba(12,31,79,.6)); }
.hs-video__play{ position:absolute; left:50%; top:50%; width:clamp(64px,6vw,92px); aspect-ratio:1; transform:translate(-50%,-50%); display:grid; place-items:center; border:1.5px solid rgba(255,255,255,.85); border-radius:50%; }
.hs-video__play svg{ width:34%; height:34%; fill:#fff; margin-left:6%; }
.hs-video__pronto{ position:absolute; left:clamp(16px,2vw,28px); bottom:clamp(14px,2vh,24px); margin:0; font-family:var(--f-display); font-style:italic; font-size:clamp(16px,1.3vw,21px); color:#fff; }
.hs-fin .fz-fin__frase{ max-width:19ch; }
@media (max-width:900px){
  .hs-por{ min-height:0; padding-top:calc(var(--cab-h,72px) + 28px); }
  .hs-por__in{ grid-template-columns:1fr; grid-template-areas:"txt" "linea" "foto"; }
  .hs-por__h1{ font-size:clamp(32px,9vw,44px); }
  .hs-por__foto{ max-width:78%; margin:8px 0 0 14px; }
  .hs-por__foto img{ aspect-ratio:4/3; max-height:none; }
  .hs-linea{ grid-template-columns:1fr; gap:18px; padding:0 0 0 30px; }
  .hs-linea::before{ left:7px; right:auto; top:0; bottom:0; width:2px; height:auto; transform-origin:top; }
  html.fz-js:not(.fz-quieto) .hs-linea::before{ transform:scaleY(0); animation-name:hs-traza-v; }
  .hs-linea__punto{ left:-30px; top:14px; }
  .hs-video__marco{ width:100%; }
}
@keyframes hs-traza-v{ to{ transform:scaleY(1); } }
@media (prefers-reduced-motion:reduce){ .hs-por__txt > *, .hs-por__foto img, .hs-por__foto::after, .hs-linea::before, .hs-linea__hito{ animation:none !important; opacity:1 !important; transform:none !important; clip-path:none !important; } }
/* ajustes: la línea deja libre la esquina de Porfirio; el video va a la derecha, grande, con el título a su izquierda */
@media (min-width:901px){
  .hs-linea{ margin-right:clamp(0px, 15vw, 260px); }
  .hs-video__in{ grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); align-items:end; gap:clamp(28px,4vw,72px); }
  .hs-video__marco{ width:100%; max-height:calc(100svh - var(--cab-h,105px) - 150px); }
  .hs-video__tit{ font-size:clamp(30px, min(3vw, 5.6vh), 52px); }
}
.hs-por{ min-height:0; padding-bottom:clamp(16px,3vh,36px); }
.hs-video .fz-cierre{ grid-column:1 / -1; margin-top:clamp(18px,3.4vh,40px); }
@media (min-width:901px){ .hs-video__marco{ max-height:calc(100svh - var(--cab-h,105px) - 250px); } .hs-video.fz-pag{ padding-block:clamp(26px,4.6vh,60px); } }
/* la foto aérea trae un adorno amarillo abajo a la izquierda (sitio viejo): en celular se encuadra a la derecha para dejarlo fuera */
@media (max-width:900px){ .hs-por__foto img{ object-position:88% 50%; } }