/* =========================================================
   TRIUNŌ · Encabezado y portada "Tres luces"
   ========================================================= */

/* ---------- Encabezado ---------- */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(18,18,20,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .4s var(--ease)}
.cabecera.con-borde{border-bottom-color:var(--linea)}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.cabecera__logo{display:block;padding:6px 0}
.cabecera__logo img{height:38px;width:auto}
.nav{display:none;gap:36px}
.nav a{position:relative;font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--tinta-suave);padding:12px 0;transition:color var(--t-hover) var(--ease)}
.nav a::after{content:"";position:absolute;left:0;bottom:6px;width:100%;height:1px;background:var(--acento);transform:scaleX(0);transform-origin:left;transition:transform var(--t-hover) var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--tinta)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 4px;background:none;border:0;color:var(--tinta);font:600 .75rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.menu-btn__icono{display:flex;align-items:flex-end;gap:3px;height:16px}
.menu-btn__icono i{display:block;width:3px;background:currentColor}
.menu-btn__icono i:nth-child(1),.menu-btn__icono i:nth-child(3){height:11px}
.menu-btn__icono i:nth-child(2){height:16px}
@media (min-width:880px){.nav{display:flex}.menu-btn{display:none}.cabecera__logo img{height:40px}}

/* ---------- Portada ---------- */
.portada{position:relative;display:grid;gap:36px;padding-block:28px 56px;overflow:hidden}
.portada__texto{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.portada__titulo{font-size:var(--t-display);line-height:1.02;letter-spacing:-.035em;max-width:11ch}
.portada__titulo .serif-acento{display:block;font-size:1.12em;font-weight:500;letter-spacing:-.02em;line-height:.9;padding-right:.08em}
.portada__bajada{max-width:36ch;color:var(--tinta-suave);font-size:1.05rem;text-wrap:pretty}
.portada__accion{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:6px}

.portada__escena{position:relative;height:clamp(300px,44svh,400px);display:flex;align-items:flex-end;justify-content:center}
.portada__barras{z-index:2;height:100%;width:auto}
.portada__barras .b1{--x:-62%}
.portada__barras .b2{--x:-41%}
.portada__barras .b3{--x:-50%}
.portada__brillo{position:absolute;z-index:1;left:50%;bottom:10%;width:120%;aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(185,138,75,.38),rgba(185,138,75,.12) 45%,transparent 72%);pointer-events:none}
.portada__suelo{position:absolute;z-index:3;left:-8%;right:-8%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--bronce) 22%,var(--bronce) 78%,transparent);transform-origin:center}
.portada__arco{position:absolute;z-index:1;inset:-10% -30% 0 -30%;width:160%;height:110%;pointer-events:none;overflow:visible}
.portada__arco path{fill:none;stroke:var(--bronce);stroke-width:1;opacity:.55;vector-effect:non-scaling-stroke}

@media (min-width:880px){
  .portada{grid-template-columns:1.05fr .95fr;align-items:center;gap:48px;min-height:calc(100svh - 72px);padding-block:40px 64px}
  .portada__escena{height:min(70svh,620px)}
  .portada__bajada{font-size:1.125rem}
}

/* Estados iniciales de la firma: solo con JS (sin JS todo se ve completo) */
.js .portada [data-pieza]{opacity:0}
.js .portada .barra__in{transform:translateY(101%)}
.js .portada__suelo{transform:scaleX(0)}
.js .portada__brillo{opacity:0}
.js .portada__titulo{visibility:hidden}