/* Portfolio por sectores — se carga después de style.css */

/* ---------- Hub ---------- */
.hub-hero { text-align: center; padding: 80px 5vw 56px; max-width: 820px; margin: 0 auto; }
.hub-hero h1 { font-size: 2.6rem; margin-bottom: 18px; }
.hub-hero .t { font-size: 1rem; color: #444; max-width: 600px; margin: 0 auto; }

.hub { background: var(--bg-black); color: var(--text-white); padding: 0 5vw 90px; }
.hub + .pf-cta { margin-top: 0; border-top: 1px solid var(--divider-w); }
.hub-list { max-width: 1100px; margin: 0 auto; list-style: none; border-top: 1px solid var(--divider-w); }
.hub-row { position: relative; border-bottom: 1px solid var(--divider-w); overflow: hidden; }
.hub-row a { position: relative; z-index: 2; display: grid; grid-template-columns: 90px 1fr 190px; align-items: center; gap: 20px; padding: 44px 10px; text-decoration: none; color: inherit; min-height: 150px; }
.hub-n { font-size: .72rem; letter-spacing: .3em; color: var(--muted-w); }
.hub-name { text-align: center; }
.hub-name strong { display: block; font-weight: 300; font-size: 2rem; letter-spacing: .12em; text-transform: uppercase; transition: letter-spacing .6s cubic-bezier(.16,1,.3,1); }
.hub-name small { display: block; margin-top: 8px; font-size: .78rem; color: var(--muted-w); letter-spacing: .04em; }
.hub-go { justify-self: end; text-align: right; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #cfcfcb; }
.hub-go em { font-style: normal; display: block; font-size: .64rem; color: var(--muted-w); margin-bottom: 6px; letter-spacing: .12em; }
.hub-bg { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .7s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.hub-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.45); transform: scale(1.04); transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.hub-row:hover .hub-bg, .hub-row:focus-within .hub-bg { opacity: 1; }
.hub-row:hover .hub-bg img, .hub-row:focus-within .hub-bg img { transform: scale(1); }
.hub-row:hover .hub-name strong, .hub-row:focus-within .hub-name strong { letter-spacing: .2em; }
.hub-row.soon .hub-name strong { color: #d8d8d4; }

/* ---------- Página de sector ---------- */
.sec-hero { text-align: center; padding: 90px 5vw 80px; }
.sec-hero .eyebrow { margin-bottom: 22px; }
.sec-hero h1 { font-size: 3rem; font-weight: 300; letter-spacing: .06em; text-transform: uppercase; max-width: 900px; margin: 0 auto 22px; }
.sec-hero .lead { max-width: 600px; margin: 0 auto; font-size: .98rem; color: #bdbdb9; }
.sec-meta { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 34px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-w); flex-wrap: wrap; }
.sec-meta span::before { content: ''; display: inline-block; width: 28px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 14px; opacity: .6; }
.sec-meta span:first-child::before { display: none; }

.share { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; padding: 26px 5vw; border-bottom: 1px solid var(--divider); }
.share .lbl { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
.share a, .share button { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--text-black); border: 1px solid var(--divider); background: transparent; padding: 9px 16px; cursor: pointer; transition: background .3s, color .3s; font-family: inherit; }
.share a:hover, .share button:hover { background: var(--text-black); color: var(--bg-cream); border-color: var(--text-black); }

.pf-s { flex: 0 0 min(400px, 100%); aspect-ratio: 1/1; }
.pf-p { flex: 0 0 min(330px, 100%); aspect-ratio: 3/4; }
.pf-count { display: block; margin-top: 6px; }

.soon-box { max-width: 640px; margin: 80px auto 40px; padding: 60px 40px; border: 1px solid var(--divider); text-align: center; }
.soon-box h2 { font-size: 1.4rem; margin-bottom: 14px; font-weight: 400; }
.soon-box p { font-size: .92rem; color: #555; margin-bottom: 26px; }

.others { text-align: center; padding: 70px 5vw 20px; }
.others h2 { font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; font-weight: 500; margin-bottom: 26px; }
.others ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.others a { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--divider); padding: 10px 20px; transition: background .3s, color .3s; }
.others a:hover { background: var(--text-black); color: var(--bg-cream); border-color: var(--text-black); }

@media (max-width: 900px) {
    .hub-row a { grid-template-columns: 1fr; gap: 8px; padding: 36px 6px; text-align: center; min-height: 0; }
    .hub-n { text-align: center; }
    .hub-go { justify-self: center; text-align: center; }
    .hub-name strong { font-size: 1.5rem; }
    .hub-bg { opacity: .55; }
    .sec-hero h1 { font-size: 2rem; }
    .pf-s, .pf-p { flex-basis: calc(50% - 7px); }
}
@media (max-width: 600px) {
    .hub-hero h1 { font-size: 2rem; }
    .soon-box { padding: 40px 24px; margin-top: 50px; }
}

/* Reparto equilibrado de vídeos verticales (3 por fila si caben así de simétricos) */
@media (min-width: 901px) {
    .pf-grid.k3 .pf-v { flex-basis: calc(33.333% - 14.7px); }
}