/* ============================================================
   Semacovi — Hero del home
   Carretera de noche en perspectiva real (CSS 3D): carril y vialetas
   avanzan hacia el usuario y la señal "se enciende" con los faros,
   igual que la lámina retrorreflejante.
   ============================================================ */

.hp{position:relative;margin-top:var(--nav-h);background:#EEF2F5;color:#000;overflow:hidden;isolation:isolate}

/* ── Escena ───────────────────────────────────────────────── */
.hp-scene{position:absolute;inset:0;z-index:-1;perspective:420px;perspective-origin:68% 30%}
.hp-glow{position:absolute;inset:0;
  /* cielo de día: azul claro arriba, horizonte blanco cálido y campo gris verdoso */
  background:
    radial-gradient(50% 20% at 68% 30%, rgba(255,236,170,.75), transparent 70%),
    linear-gradient(180deg, #CFDDE8 0%, #E4ECF2 22%, #F7F5EE 30%, #DCE0D6 31%, #CCD2C6 60%, #BFC6B9 100%)}
.hp-road{
  position:absolute;left:68%;bottom:-2px;width:760px;height:3400px;margin-left:-380px;
  transform-origin:50% 100%;transform:rotateX(84deg);
  background:
    linear-gradient(90deg,
      transparent 0 5%, #9AA09A 5% 6%, #fff 6% 7.4%,
      #4B5157 7.4% 92.6%,
      #fff 92.6% 94%, #9AA09A 94% 95%, transparent 95%);
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent 75%);mask-image:linear-gradient(to top,#000 30%,transparent 75%)}
.hp-road::after{ /* textura de asfalto */
  content:"";position:absolute;inset:0 7.4%;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px);
  pointer-events:none}
.hp-lane{
  position:absolute;left:50%;top:0;bottom:0;width:22px;margin-left:-11px;
  background:repeating-linear-gradient(to top,#F5C518 0 130px,transparent 130px 300px);
  animation:hpRoll 1.15s linear infinite}
.hp-studs{
  position:absolute;top:0;bottom:0;width:18px;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 3px, #FFD34D 4px 6px, transparent 7px) 0 0/18px 150px repeat-y;
  animation:hpRoll 1.15s linear infinite}
.hp-studs-l{left:calc(50% - 40px)}
.hp-studs-r{left:calc(50% + 22px)}
@keyframes hpRoll{to{background-position-y:300px}}
.hp-studs{animation-name:hpRollStuds}
@keyframes hpRollStuds{to{background-position:0 150px}}

/* Niebla en el horizonte */
.hp-fog{position:absolute;left:0;right:0;top:20%;height:26%;background:linear-gradient(to bottom,transparent 0%,rgba(247,245,238,.95) 42%,rgba(247,245,238,.5) 70%,transparent 100%)}

/* Faros: haz que barre y "enciende" la señal */
.hp-beam{
  position:absolute;left:30%;bottom:-20%;width:90%;height:120%;
  display:none}
@keyframes hpBeam{0%,100%{transform:rotate(-14deg);opacity:0}45%{opacity:1}62%{transform:rotate(4deg);opacity:1}80%{opacity:0}}

.hp-sign{position:absolute;left:82%;top:12%;width:clamp(120px,13vw,200px);transform:translateX(-50%)}
.hp-sign svg{width:100%;height:auto;display:block;overflow:visible}
.hp-sign-face{filter:drop-shadow(0 10px 18px rgba(30,40,50,.25));animation:hpRetro 6s ease-in-out infinite}
@keyframes hpRetro{
  0%,40%,100%{filter:drop-shadow(0 10px 18px rgba(30,40,50,.25))}
  58%{filter:brightness(1.08) drop-shadow(0 0 16px rgba(245,197,24,.7))}}
.hp-sign-shine{opacity:0;transform:translateX(-200px);transform-box:view-box;animation:hpShine 6s ease-in-out infinite;mix-blend-mode:screen}
@keyframes hpShine{0%,48%{opacity:0;transform:translateX(-200px)}58%{opacity:1}68%,100%{opacity:0;transform:translateX(200px)}}

/* Velo para legibilidad del texto */
.hp::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(255,255,255,.95) 0,rgba(255,255,255,.8) 110px,rgba(255,255,255,0) 200px),
    linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 34%,rgba(255,255,255,.4) 56%,rgba(255,255,255,0) 72%)}

/* ── Texto ────────────────────────────────────────────────── */
.hp-inner{display:flex;align-items:center;min-height:clamp(440px,62vh,620px);padding-top:56px;padding-bottom:40px}
.hp-copy{max-width:660px}
.hp-kicker{display:inline-flex;align-items:center;gap:10px;color:#6A5200;font-weight:800;font-size:.95rem;margin-bottom:18px}
.hp-kicker::before{content:"";width:28px;height:4px;background:repeating-linear-gradient(90deg,var(--yellow) 0 8px,transparent 8px 12px)}
.hp h1{font-family:var(--display);font-weight:800;font-style:italic;font-size:clamp(2.3rem,4.4vw,3.9rem);line-height:.95;letter-spacing:-.01em;color:#000;margin:0}
.hp-lead{color:#2B2F33;font-size:clamp(1.02rem,1.4vw,1.16rem);line-height:1.6;max-width:52ch;margin:24px 0 32px}
.hp-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Entrada (una sola, al cargar) */
.hp-copy > *{animation:hpIn .7s cubic-bezier(.2,.7,.2,1) both}
.hp-copy > :nth-child(2){animation-delay:.08s}
.hp-copy > :nth-child(3){animation-delay:.16s}
.hp-copy > :nth-child(4){animation-delay:.24s}
@keyframes hpIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── Credenciales ─────────────────────────────────────────── */
.hp-cred{display:grid;grid-template-columns:repeat(4,1fr);padding-top:26px;padding-bottom:30px;list-style:none}
.hp-cred li{color:#3A3E43;font-size:.95rem;padding:0 18px;border-left:2px solid rgba(0,0,0,.12)}
.hp-cred li:first-child{padding-left:0;border-left:0}
.hp-cred b{display:block;color:#000;font-family:var(--display);font-size:1.45rem;font-weight:800;font-style:italic;line-height:1.15}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:1000px){
  .hp-cred{grid-template-columns:repeat(2,1fr);gap:18px 0}
  .hp-cred li:nth-child(3){padding-left:0;border-left:0}
}
@media(max-width:760px){
  .hp-scene{perspective-origin:50% 22%}
  .hp-road{left:50%}
  .hp-glow{background:radial-gradient(70% 18% at 50% 23%, rgba(255,236,170,.7), transparent 75%),linear-gradient(180deg,#CFDDE8 0%,#E4ECF2 14%,#F7F5EE 22%,#DCE0D6 23%,#CCD2C6 50%,#BFC6B9 100%)}
  .hp-fog{top:16%;height:18%}
  .hp-sign{left:84%;top:6%;width:96px}
  .hp::after{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 30%,rgba(255,255,255,.96) 52%)}
  .hp-inner{min-height:0;padding-top:200px;padding-bottom:28px}
  .hp-actions .btn{flex:1;justify-content:center}
  .hp-cred b{font-size:1.1rem}
}

@media(prefers-reduced-motion:reduce){
  .hp-lane,.hp-studs,.hp-beam,.hp-sign-shine,.hp-copy > *{animation:none}
  .hp-sign-face{animation:none;filter:none}
}

/* Botón secundario sobre fondo claro */
.hp .btn-ghost{border-color:#000;color:#000}
.hp .btn-ghost:hover{background:#000;color:#fff}