:root {
  --bg:     #0a0a0a;
  --border: #1e1e1e;
  --text:   #f0f0f0;
  --muted:  #666666;
  --font:   'Space Grotesk', sans-serif;
  --nav-h:  60px;
  --strip:  152px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ── NAV ── */
.nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 300; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; transition: background .35s, border-color .35s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(10,10,10,.94); backdrop-filter: blur(14px); border-color: var(--border); }
.nav-wordmark { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; display: flex; align-items: center; gap: .4rem; }
.nav-icon { height: 14px; width: auto; display: inline-block; vertical-align: middle; opacity: .9; }
.nav-links { display: flex; gap: 32px; }
.nav-links a { font-size: .65rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.nav-links a:hover { color: var(--text); }
.nav-sig { position: relative; font-size: .65rem; font-weight: 300; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.52); transition: color .2s; display: flex; align-items: center; gap: .45rem; }
.nav-sig:hover { color: var(--text); }
.nav-rojas-logo { height: 16px; width: auto; opacity: .78; transition: opacity .2s; }
.nav-sig:hover .nav-rojas-logo { opacity: 1; }
.nav-sig::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 10px); right: 0; font-size: .55rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; background: rgba(8,8,16,.95); color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.1); padding: .3rem .7rem; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; }
.nav-sig:hover::after { opacity: 1; transform: translateY(0); }

/* ── CARD ── */
.widget-section { padding: var(--nav-h) 40px 48px; }
.afm-card { position: relative; border-radius: 20px; overflow: hidden; background: #080810; height: calc(100vh - var(--nav-h)); min-height: 620px; display: flex; flex-direction: column; }

/* ── STARFIELD ── */
#star-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: .7; }

/* ── AURORA BLOBS ── */
.aurora-field { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.c-blob { position: absolute; border-radius: 50%; filter: blur(50px); transition: background 1.6s ease, opacity 1.6s ease; }
#cb0 { width: 85%;  height: 130%; top: -14%; left: -18%; animation: cf0 14s ease-in-out infinite; }
#cb1 { width: 70%;  height: 100%; top:  10%; left:  32%; animation: cf1 18s ease-in-out infinite; }
#cb2 { width: 55%;  height:  90%; top: -20%; left:  54%; animation: cf2 11s ease-in-out infinite; }
#cb3 { width: 65%;  height:  85%; top:  30%; left: -12%; animation: cf3 16s ease-in-out infinite; }
#cb4 { width: 48%;  height:  80%; top:  50%; left:  56%; animation: cf4 20s ease-in-out infinite; }
#cb5 { width: 110%; height: 110%; top:  -5%; left:  -5%; animation: cf5 32s ease-in-out infinite; filter: blur(70px); }

@keyframes cf0 { 0%,100% { transform: translate(0,0) scale(1); } 25% { transform: translate(52%,-16%) scale(1.1); } 60% { transform: translate(22%,28%) scale(.9); } 80% { transform: translate(-8%,10%) scale(1.05); } }
@keyframes cf1 { 0%,100% { transform: translate(0,0) scale(1); } 30% { transform: translate(-44%,22%) scale(1.15); } 65% { transform: translate(28%,-32%) scale(.85); } }
@keyframes cf2 { 0%,100% { transform: translate(0,0); } 40% { transform: translate(-60%,44%) scale(1.2); } 75% { transform: translate(20%,-18%); } }
@keyframes cf3 { 0%,100% { transform: translate(0,0); } 35% { transform: translate(70%,12%) scale(.9); } 70% { transform: translate(10%,-24%) scale(1.1); } }
@keyframes cf4 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-55%,-34%) scale(1.2); } }
@keyframes cf5 { 0%,100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.08); } }

/* ── VEIL ── */
.card-veil { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(to right, rgba(8,8,16,.68) 0%, rgba(8,8,16,.28) 55%, rgba(8,8,16,.04) 100%), linear-gradient(to top, rgba(8,8,16,.88) 0%, rgba(8,8,16,.46) 30%, rgba(8,8,16,0) 62%); }

/* ── CARD CONTENT ── */
.card-content { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 2.5rem 3rem 1.75rem; overflow: hidden; }
.card-meta-line { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; margin-bottom: .9rem; }
.card-sign { font-size: .72rem; letter-spacing: .04em; color: rgba(255,255,255,.72); }
.card-date { font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.60); }
.card-num-badge { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.60); border: 1px solid rgba(255,255,255,.28); padding: .15rem .55rem; }
.msep { color: rgba(255,255,255,.30); font-size: .7rem; }
.card-title { font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 700; line-height: 1.1; color: #fff; margin-bottom: 1.1rem; max-width: 680px; text-shadow: 0 2px 40px rgba(0,0,0,.5); }
.card-desc { max-width: 640px; margin-bottom: 0; }
.card-desc p { font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.88); margin-bottom: .8rem; letter-spacing: -.01em; }
.card-desc p:last-child { margin: 0; }

/* ── FILMSTRIP ── */
.card-strip { position: relative; z-index: 4; flex: 0 0 var(--strip); background: rgba(6,6,12,.65); border-top: 1px solid rgba(255,255,255,.06); backdrop-filter: blur(16px); }
.strip-scroll { display: flex; height: 100%; overflow-x: auto; scroll-behavior: smooth; gap: 2px; scrollbar-width: none; touch-action: pan-x; }
.strip-scroll::-webkit-scrollbar { display: none; }
.s-tile { flex: 0 0 114px; height: 100%; position: relative; cursor: pointer; overflow: hidden; transition: transform .15s; }
.s-tile:hover { transform: scaleY(1.04); z-index: 2; }
.s-tile.active { outline: 2px solid rgba(255,255,255,.7); outline-offset: -2px; }
.tile-bg { position: absolute; inset: 0; }
.tile-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.04), rgba(0,0,0,.84)); }
.tile-body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: .55rem .6rem; }
.tile-d { font-size: .54rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.76); }
.tile-t { font-size: .59rem; font-weight: 500; line-height: 1.28; color: rgba(255,255,255,.88); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── PAGE SECTIONS ── */
.full-image { width: calc(100% - 80px); margin: 72px 40px; height: 60vh; min-height: 400px; overflow: hidden; border-radius: 20px; }
.full-image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); }
.statement { padding: 72px 40px; background: var(--bg); transition: background 1.6s ease; }
.statement-label { font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 2.5rem; }
.statement-quote { font-size: clamp(1.4rem, 3.2vw, 2.4rem); font-weight: 300; line-height: 1.35; letter-spacing: -.01em; color: var(--text); max-width: 820px; margin-bottom: 2rem; }
.statement-attr { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact { padding: 72px 40px; border-top: 1px solid var(--border); display: grid; grid-template-columns: auto 1fr; gap: 72px; align-items: start; }
.contact-portrait { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 1px solid var(--border); }
.contact-portrait img { width: 100%; height: 100%; object-fit: cover; }
.contact-label { font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 2rem; }
.contact-heading { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 300; letter-spacing: -.01em; margin-bottom: 2.5rem; }
.contact-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 48px; }
.contact-item-label { font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.contact-item-value { font-size: .88rem; }
/* ── LEGAL ACCORDION ── */
.legal-accordion { border-top: 1px solid var(--border); }
.legal-accordion summary { padding: 20px 40px; font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: space-between; list-style: none; user-select: none; transition: color .2s; }
.legal-accordion summary::-webkit-details-marker { display: none; }
.legal-accordion summary:hover { color: var(--text); }
.legal-accordion[open] summary { color: var(--text); border-bottom: 1px solid var(--border); }
.legal-accordion summary::after { content: '+'; font-size: 1.1rem; font-weight: 300; }
.legal-accordion[open] summary::after { content: '−'; }
.legal-body { padding: 40px 40px 56px; max-width: 760px; }
.legal-block { margin-bottom: 32px; }
.legal-block h3 { font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.legal-block p, .legal-block address { font-size: .82rem; line-height: 1.78; color: #888; margin-bottom: 10px; font-style: normal; }
.legal-block a { color: #888; border-bottom: 1px solid var(--border); transition: color .2s, border-color .2s; }
.legal-block a:hover { color: var(--text); border-color: var(--muted); }
.footer { padding: 24px 40px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-copy { font-size: .58rem; color: var(--muted); }
.footer-links { display: flex; gap: 24px; }
.footer-link { font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: color .2s; }
.footer-link:hover { color: var(--text); }

@media (max-width: 768px) {
  .nav { padding: 0 20px; }
  .widget-section { padding: var(--nav-h) 12px 0; }
  .card-content { padding: 1.75rem 1.5rem 1.5rem; }
  .statement, .contact, .legal { padding: 60px 20px; }
  .contact { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer { padding: 20px; }
  .s-tile { flex: 0 0 96px; }
}