/* ==========================================================
   HERO — revelado por bloque de color, zoom ken burns y acciones
   ========================================================== */

/* ---------- HERO ---------- */
.hero{
  background:var(--navy);
  color:var(--paper);
  padding:72px 32px 0;
  position:relative;
  overflow:hidden;
}
.hero-inner{
  max-width:1120px; margin:0 auto; position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:end;
}
.hero-copy{padding-bottom:72px;}
.hero-eyebrow{
  font-size:13px; color:var(--accent); letter-spacing:0.02em; margin-bottom:22px; max-width:520px;
}
.hero h1{
  color:var(--paper);
  font-size:clamp(28px, 3.6vw, 44px);
  max-width:600px;
  font-style:normal;
}
.hero h1 em{font-style:italic; color:var(--accent);}
.hero-sub{
  max-width:480px; margin-top:26px; font-size:16px; color:rgba(246,243,236,0.82);
}
.hero-actions{display:flex; gap:18px; margin-top:38px; flex-wrap:wrap;}

/* Revelado por bloque de color (block reveal): una barra barre el texto
   de izquierda a derecha para mostrarlo. Equivalente en CSS del
   "sfx_effect: blockfromleft" de Slider Revolution, con colores de marca. */
.reveal-line{display:table; position:relative;}
.reveal-line > span{display:inline-block;}
.js .hero .reveal-line > span{opacity:0;}
.js .hero.is-ready .reveal-line > span{
  animation:fb-fade .01s linear forwards;
  animation-delay:calc(var(--d, 0ms) + 330ms);
}
/* Color de la barra. El valor por defecto ya es --accent, así que el título
   que lo usaba explícitamente no necesita modificador. */
.reveal-line--bar-soft {--bar:var(--accent-soft);}
.reveal-line--bar-brass{--bar:var(--brass);}
.reveal-line::after{
  content:""; position:absolute; left:-2px; right:-2px; top:0; bottom:0;
  background:var(--bar, var(--accent));
  transform:scaleX(0); transform-origin:left;
  pointer-events:none;
}
.js .hero.is-ready .reveal-line::after{
  animation:fb-block .75s var(--ease-flip) forwards;
  animation-delay:var(--d, 0ms);
}
@keyframes fb-block{
  0%  {transform:scaleX(0); transform-origin:left;}
  44% {transform:scaleX(1); transform-origin:left;}
  56% {transform:scaleX(1); transform-origin:right;}
  100%{transform:scaleX(0); transform-origin:right;}
}

.hero-portrait{
  position:relative; align-self:end;
  max-width:420px; margin-left:auto;
  aspect-ratio:4/5;
  overflow:hidden;
  border-top:2px solid var(--brass);
}
.hero-portrait img{
  width:100%; height:100%; object-fit:cover; object-position:50% 12%;
  display:block;
}
/* Zoom lento tipo ken burns, apenas perceptible */
.js .hero.is-ready .hero-portrait img{
  animation:fb-kenburns 18s ease-out both;
}
@keyframes fb-kenburns{from{transform:scale(1.075)} to{transform:scale(1)}}
.hero-portrait::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(200deg, rgba(19,41,75,0.35) 0%, transparent 42%);
  pointer-events:none;
}
.hero-portrait-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:linear-gradient(0deg, rgba(10,24,48,0.94) 0%, rgba(10,24,48,0.7) 45%, transparent 100%);
  padding:44px 22px 18px;
}
.hero-portrait-cap strong{
  display:block; font-family:'Libre Baskerville', serif; font-size:16px; color:var(--paper); font-weight:700;
}
.hero-portrait-cap span{
  display:block; font-size:12px; color:var(--accent); margin-top:4px; letter-spacing:0.01em;
}

@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr; align-items:stretch;}
  .hero-copy{padding-bottom:40px; order:2;}
  .hero-portrait{max-width:320px; margin:0 auto; order:1; margin-top:24px; align-self:center;}
}