/* NT502 · Obsidiana — portada (patterns/homepage.php). Depende de base.css. */

/* ── Hero con video ─────────────────────────────────────────── */
.nt-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: calc(100svh - var(--nt-header-h) - 41px); overflow: hidden; border-bottom: 1px solid var(--nt-rule); background: var(--nt-ink); }
.nt-hero__media { position: absolute; inset: 0; z-index: -2; }
.nt-hero__video { width: 100%; height: 100%; object-fit: cover; }
/* Velo arriba y fundido a tinta abajo, donde van el texto y las fichas: desde el 55 % el velo
   es ≥ .78, así el texto secundario (soft) supera 4.5:1 incluso sobre el píxel más claro del poster. */
.nt-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        repeating-linear-gradient(0deg, var(--nt-grid-line) 0 1px, transparent 1px var(--nt-grid)),
        repeating-linear-gradient(90deg, var(--nt-grid-line) 0 1px, transparent 1px var(--nt-grid)),
        linear-gradient(180deg, rgb(var(--nt-ink-rgb) / .5) 0%, rgb(var(--nt-ink-rgb) / .45) 28%, rgb(var(--nt-ink-rgb) / .78) 55%, var(--nt-ink) 100%);
}
.nt-hero__inner { display: grid; gap: clamp(28px, 5vh, 48px); padding-block: clamp(56px, 12vh, 140px) clamp(28px, 5vh, 56px); }
.nt-hero__copy { display: grid; gap: 20px; justify-items: start; max-width: 1000px; }
.nt-hero__title { margin: 0; max-width: 24ch; font-size: clamp(32px, 4.2vw, 58px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; text-shadow: 0 2px 24px rgb(0 0 0 / .6); }
.nt-hero__lead { margin: 0; max-width: 60ch; color: var(--nt-soft); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; text-shadow: 0 1px 10px rgb(0 0 0 / .9); }

/* Con mouse, el texto del hero queda oculto para que luzca el video y aparece al pasar el cursor por la
   portada o al llegar con el teclado. Sigue en el HTML (lectores de pantalla y buscadores). En pantallas
   táctiles no cambia nada: ahí no hay "hover" y se muestra el poster. El velo de arriba se aclara mientras
   el texto está oculto (::before) y recupera su oscuridad con el texto (::after), para mantener el contraste. */
@media (hover: hover) and (pointer: fine) {
    .nt-hero__copy { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .5s var(--nt-ease), transform .5s var(--nt-ease); }
    .nt-hero:hover .nt-hero__copy, .nt-hero:focus-within .nt-hero__copy { opacity: 1; transform: none; }
    .nt-hero::before {
        background:
            repeating-linear-gradient(0deg, var(--nt-grid-line) 0 1px, transparent 1px var(--nt-grid)),
            repeating-linear-gradient(90deg, var(--nt-grid-line) 0 1px, transparent 1px var(--nt-grid)),
            linear-gradient(180deg, rgb(var(--nt-ink-rgb) / .12) 0%, rgb(var(--nt-ink-rgb) / .1) 40%, rgb(var(--nt-ink-rgb) / .55) 72%, var(--nt-ink) 100%);
    }
    .nt-hero::after {
        content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s var(--nt-ease);
        background: linear-gradient(180deg, rgb(var(--nt-ink-rgb) / .45) 0%, rgb(var(--nt-ink-rgb) / .4) 28%, rgb(var(--nt-ink-rgb) / .62) 55%, rgb(var(--nt-ink-rgb) / .3) 82%, transparent 100%);
    }
    .nt-hero:hover::after, .nt-hero:focus-within::after { opacity: 1; }
}

/* ── Promoción (bloque nt502/plans-promo, inc/service-layout.php) ── */
/* Arriba del hero, siempre visible (también mientras el texto del hero está oculto). Entra con un salto
   y la etiqueta late; base.css detiene ambas animaciones con prefers-reduced-motion y html.nt-paused. */
.nt-promo {
    position: absolute; top: clamp(16px, 3vh, 32px); left: 50%; z-index: 2;
    display: inline-flex; align-items: center; gap: 14px; max-width: calc(100% - 2 * var(--nt-pad));
    min-height: 52px; padding: 6px 18px 6px 6px;
    border: 1px solid var(--nt-accent); background: rgb(var(--nt-ink-rgb) / .86); color: var(--nt-paper);
    box-shadow: 0 18px 40px -16px rgb(0 0 0 / .9), 0 0 0 0 rgb(var(--nt-accent-rgb) / .5);
    text-decoration: none; transform: translate3d(-50%, 0, 0);
    animation: nt-promo-in .7s var(--nt-ease) .4s both, nt-promo-glow 2.4s ease-out 1.3s infinite;
    transition: background-color .2s, color .2s;
}
.nt-promo:hover { background: var(--nt-accent); color: var(--nt-ink); }
.nt-promo:focus-visible { outline: 2px solid var(--nt-paper); outline-offset: 3px; }
.nt-promo__tag { flex: none; padding: 10px 12px; background: var(--nt-accent); color: var(--nt-ink); font: 600 12px/1 var(--nt-mono); letter-spacing: .14em; text-transform: uppercase; transition: background-color .2s; }
.nt-promo:hover .nt-promo__tag { background: var(--nt-ink); color: var(--nt-accent); }
.nt-promo__text { font-size: 15px; line-height: 1.3; }
.nt-promo__text strong { color: var(--nt-accent); font-weight: 700; transition: color .2s; }
.nt-promo:hover .nt-promo__text strong { color: var(--nt-ink); }
.nt-promo .nt-icon { width: 18px; height: 18px; transition: transform .3s var(--nt-ease); }
.nt-promo:hover .nt-icon, .nt-promo:focus-visible .nt-icon { transform: translateX(4px); }
@keyframes nt-promo-in {
    from { opacity: 0; transform: translate3d(-50%, -24px, 0) scale(.9); }
    60% { opacity: 1; transform: translate3d(-50%, 4px, 0) scale(1.03); }
    to { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
}
@keyframes nt-promo-glow {
    0% { box-shadow: 0 18px 40px -16px rgb(0 0 0 / .9), 0 0 0 0 rgb(var(--nt-accent-rgb) / .5); }
    70%, 100% { box-shadow: 0 18px 40px -16px rgb(0 0 0 / .9), 0 0 0 14px rgb(var(--nt-accent-rgb) / 0); }
}

/* ── Aviso del último evento (bloque nt502/event-banner, inc/events.php) ── */
.nt-event-banner {
    background:
        radial-gradient(60% 140% at 100% 0%, rgb(var(--nt-blue-rgb) / .22), transparent 70%),
        repeating-linear-gradient(0deg, var(--nt-grid-line) 0 1px, transparent 1px var(--nt-grid)),
        repeating-linear-gradient(90deg, var(--nt-grid-line) 0 1px, transparent 1px var(--nt-grid)),
        var(--nt-steel);
}
.nt-event-banner__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: clamp(28px, 4vw, 56px); padding-block: clamp(36px, 5vw, 56px); }
.nt-event-banner__inner.is-text-only { grid-template-columns: minmax(0, 1fr); }
.nt-event-banner__copy { display: grid; gap: 14px; justify-items: start; }
.nt-event-banner__title { margin: 0; max-width: 22ch; font-size: clamp(26px, 2.5vw, 36px); }
.nt-event-banner__text { margin: 0; max-width: 46ch; color: var(--nt-soft); font-size: 17px; line-height: 1.5; }
.nt-event-banner__copy .nt-actions { margin-top: 8px; }
.nt-event-banner__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.nt-event-banner__thumb { border: 1px solid var(--nt-rule-hi); background: var(--nt-ink); }
.nt-event-banner__img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* ── Nosotros ───────────────────────────────────────────────── */
.nt-about .nt-about__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 96px); align-items: start; }
.nt-about__copy { display: grid; gap: 20px; justify-items: start; }
.nt-about__copy p { margin: 0; max-width: 58ch; color: var(--nt-soft); font-size: 17px; }

/* ── Contacto ───────────────────────────────────────────────── */
/* Columna izquierda del panel con formulario (base.css: .nt-quote-panel). */
.nt-contact .nt-section__title { font-size: clamp(30px, 3.4vw, 50px); }

@media (max-width: 860px) {
    .nt-hero { min-height: 0; }
    .nt-hero__inner { padding-top: clamp(120px, 34vh, 260px); }
    .nt-about .nt-about__grid { grid-template-columns: 1fr; }
    .nt-event-banner__inner { grid-template-columns: minmax(0, 1fr); }
    .nt-event-banner__thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
}
@media (max-width: 560px) {
    .nt-promo { gap: 10px; width: calc(100% - 2 * var(--nt-pad)); padding-right: 12px; }
    .nt-promo__tag { padding: 8px 10px; font-size: 11px; }
    .nt-promo__text { flex: 1; font-size: 14px; }
    .nt-hero .nt-actions .nt-btn, .nt-contact .nt-actions .nt-btn, .nt-event-banner .nt-actions .nt-btn { flex: 1 1 100%; }
    .nt-event-banner__copy .nt-actions { justify-self: stretch; }
}