/* ENTRADA de Historia y Fortalezas (22-oct): misma familia que Admisiones —palabra gigante que entra a la foto y se vuelve
   blanca adentro, línea dorada que se dibuja alrededor— con otra forma por página: arco (Historia) y rectángulo (Fortalezas). */
.hx{ --W:min(46vw, 700px); --fx:4vw; position:relative; height:100vh; height:100svh; min-height:600px; overflow:hidden; background:#fff; }
.hx-foto{ position:absolute; z-index:3; top:calc(var(--cab-h,105px) + 3svh); bottom:4svh; width:var(--W); overflow:hidden; background:var(--crema); }
.hx--der .hx-foto{ right:var(--fx); }
.hx--izq .hx-foto{ left:var(--fx); }
.hx-foto--arco{ border-radius:calc(var(--W) / 2) calc(var(--W) / 2) 0 0; }
.hx-foto img{ display:block; width:100%; height:100%; object-fit:cover; }
.hx-foto::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; }
.hx--der .hx-foto::after{ background:linear-gradient(to right, rgba(12,31,79,.55) 0%, rgba(12,31,79,.2) 35%, rgba(12,31,79,0) 60%); }
.hx--izq .hx-foto::after{ background:linear-gradient(to left, rgba(12,31,79,.55) 0%, rgba(12,31,79,.2) 35%, rgba(12,31,79,0) 60%); }
.hx-copia{ position:absolute; z-index:2; left:0; top:0; white-space:nowrap; pointer-events:none; font-family:var(--f-display); font-weight:500; color:#fff; line-height:.92; letter-spacing:-.025em; text-shadow:0 2px 24px rgba(12,31,79,.35); }
.hx-trazo{ position:absolute; z-index:4; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.hx-trazo path{ fill:none; stroke:var(--oro-vivo,#F9C658); stroke-width:1.5; stroke-dasharray:1 2; }
.hx-txt{ position:absolute; z-index:2; left:0; right:0; top:var(--cab-h,105px); bottom:clamp(26px,5svh,60px); display:flex; flex-direction:column; justify-content:flex-end; }
.hx--izq .hx-txt{ align-items:flex-end; text-align:right; }
.hx-eyebrow{ margin:0 0 10px; font-size:var(--t-label,12.5px); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); }
.hx-eyebrow::before{ content:""; display:block; width:72px; height:1px; margin-bottom:14px; background:var(--navy); transform-origin:left center; }
.hx--izq .hx-eyebrow::before{ margin-left:auto; transform-origin:right center; }
.hx-h1{ margin:0; white-space:nowrap; font-family:var(--f-display); font-weight:500; color:var(--tinta); font-size:clamp(76px, min(15vw, 30svh), 270px); line-height:.92; letter-spacing:-.025em; }
.hx-apoyo{ margin:clamp(12px,2.2svh,22px) 0 0; max-width:30ch; font-family:var(--f-display); font-weight:500; font-size:clamp(20px, min(1.9vw, 4svh), 32px); line-height:1.2; color:var(--tinta); }
.hx-apoyo em{ font-style:italic; color:var(--navy); }
.hx-nota{ margin:clamp(8px,1.4svh,14px) 0 0; max-width:40ch; font-size:clamp(15px,1.1vw,17px); line-height:1.5; color:rgba(12,31,79,.78); }
.hx .hs-linea{ max-width:min(100%, calc(100vw - var(--W) - var(--fx) - 12vw)); margin:clamp(18px,3.4svh,36px) 0 0; }
.hx .hs-linea__anio{ font-size:clamp(34px, min(3.2vw, 6svh), 58px); }
@media (prefers-reduced-motion:no-preference){
  .hx-foto{ animation:hx-abre 1.5s cubic-bezier(.65,0,.25,1) .25s both; }
  .hx-foto img{ animation:hx-asienta 6s cubic-bezier(.22,1,.28,1) .25s both; }
  .hx-trazo path{ animation:hx-compas 2.4s cubic-bezier(.45,0,.3,1) 1s both; }
  .hx-eyebrow::before{ animation:hx-raya .9s cubic-bezier(.22,1,.28,1) .2s both; }
  .hx-eyebrow, .hx-apoyo, .hx-nota{ animation:hx-aparece .8s ease-out both; }
  .hx-apoyo{ animation-delay:1.1s; } .hx-nota{ animation-delay:1.3s; }
  .hx-h1, .hx-copia{ animation:hx-escribe 1.3s cubic-bezier(.65,0,.25,1) .55s both; }
  .hx--izq .hx-h1, .hx--izq .hx-copia{ animation-name:hx-escribe-izq; }
}
@keyframes hx-abre{ from{ clip-path:inset(100% 0 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes hx-asienta{ from{ transform:scale(1.12); } to{ transform:scale(1); } }
@keyframes hx-compas{ from{ stroke-dashoffset:1.001; } to{ stroke-dashoffset:0; } }
@keyframes hx-raya{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes hx-aparece{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes hx-escribe{ from{ clip-path:inset(-.3em 100% -.3em 0); } to{ clip-path:inset(-.3em -.05em -.3em 0); } }
@keyframes hx-escribe-izq{ from{ clip-path:inset(-.3em 0 -.3em 100%); } to{ clip-path:inset(-.3em 0 -.3em -.05em); } }
@media (max-width:900px){
  .hx{ height:auto; min-height:0; display:flex; flex-direction:column; padding:calc(var(--cab-h,72px) + 22px) 0 32px; --W:86vw; }
  .hx-txt{ position:relative; top:auto; bottom:auto; }
  .hx--izq .hx-txt{ align-items:flex-start; text-align:left; }
  .hx--izq .hx-eyebrow::before{ margin-left:0; }
  .hx-foto{ position:relative; order:2; top:auto; bottom:auto; height:auto; aspect-ratio:4/3; margin:26px 0 0; }
  .hx--der .hx-foto{ right:auto; margin-left:auto; margin-right:-6vw; }
  .hx--izq .hx-foto{ left:auto; margin-left:-6vw; }
  .hx-foto--arco{ aspect-ratio:3/4; width:70vw; border-radius:35vw 35vw 0 0; }
  .hx-foto::after, .hx-trazo, .hx-copia{ display:none; }
  .hx-h1{ font-size:clamp(58px,19vw,96px); }
  .hx-apoyo{ font-size:clamp(21px,6vw,26px); }
  .hx .hs-linea{ max-width:none; }
  .hx-h1, .hx-copia{ animation-name:hx-escribe !important; }
}
@media (prefers-reduced-motion:reduce){ .hx *{ animation:none !important; } }
/* la foto aérea trae un adorno amarillo abajo a la izquierda: se encuadra a la derecha */
.hx-foto--arco img{ object-position:78% 45%; }
/* Fortalezas (texto a la derecha): el bloque sube para dejar libre la esquina de Porfirio (251 px desde la derecha) */
@media (min-width:901px){ .hx--izq .hx-txt{ bottom:clamp(96px,15svh,130px); } }

.hx--pildora{ --W:min(30vw, 470px); --fx:22vw; }
.hx-foto--pildora{ border-radius:calc(var(--W) / 2); }
.hx-foto--pildora img{ object-position:72% 45%; }
.hx--pildora .hs-linea{ max-width:min(100%, calc(100vw - var(--W) - var(--fx) - 8vw)); }
@media (max-width:900px){
  .hx--pildora .hx-foto{ width:58vw; aspect-ratio:3/5; border-radius:29vw; margin-right:auto; margin-left:auto; }
}
/* píldora más angosta que alta en toda pantalla (lados rectos visibles); su posición la fija entrada.js según dónde termina "Historia" */
@media (min-width:901px){ .hx--pildora{ --W:min(26vw, calc((100svh - var(--cab-h,105px) - 7svh) * .6)); } }
@media (max-width:900px){ .hx--pildora .hs-linea{ max-width:none; } }

.hx--media .hx-foto{ width:auto; right:0; border-radius:9999px 0 0 9999px; }
.hx--media .hx-foto::after{ background:linear-gradient(to right, rgba(12,31,79,.5) 0%, rgba(12,31,79,.15) 30%, rgba(12,31,79,0) 55%); }
.hx-foto--media img{ object-position:85% 45%; }
@media (max-width:900px){
  .hx--media .hx-foto{ width:auto; align-self:stretch; aspect-ratio:auto; height:62vw; margin:26px -16px 0 12vw; border-radius:9999px 0 0 9999px; }
  .hx--media .hs-linea{ max-width:none; }
}