/* ===================================================
   CITEM — Theme: "Neo-Playbill 2026"
   Estricto 3 Colores · Editorial Brutalista
   =================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Inter:wght@400;600;900&display=swap');

:root {
    --c-cream:   #FAF7F2;
    --c-navy:    #0D2B56;
    --c-crimson: #9E1B22;
    --font-heading: 'Archivo Black', system-ui, sans-serif;
    --font-serif: 'Playfair Display', serif;
    --font-body: 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body { background:var(--c-cream); color:var(--c-navy); font-family:var(--font-body); padding:2rem; -webkit-font-smoothing:antialiased; }
::selection { background:var(--c-crimson); color:var(--c-cream); }

/* WRAPPER */
.site-wrapper { max-width:1200px; margin:0 auto; border:8px solid var(--c-navy); box-shadow:18px 18px 0 var(--c-navy); background:var(--c-cream); }

/* HEADER */
.site-header { display:flex; border-bottom:8px solid var(--c-navy); }
.header-brand { background:var(--c-crimson); color:var(--c-cream); padding:1.5rem 3rem; border-right:8px solid var(--c-navy); }
.brand-name { font-family:var(--font-heading); font-size:3.5rem; letter-spacing:-2px; line-height:1; }
.header-nav { display:flex; flex-grow:1; align-items:center; justify-content:flex-end; padding:0 3rem; gap:2rem; }
.header-nav a { color:var(--c-navy); text-decoration:none; font-weight:900; font-size:1.1rem; text-transform:uppercase; border-bottom:3px solid transparent; transition:all .2s; }
.header-nav a:hover { color:var(--c-crimson); border-bottom-color:var(--c-crimson); }

/* HERO */
.hero { display:grid; grid-template-columns:1fr 400px; border-bottom:8px solid var(--c-navy); }
.hero-main { padding:4rem; border-right:8px solid var(--c-navy); }
.hero-kicker { font-weight:900; font-size:1.2rem; text-transform:uppercase; color:var(--c-crimson); margin-bottom:1rem; }
.hero-title { font-family:var(--font-heading); font-size:clamp(4rem,8vw,8rem); line-height:.85; letter-spacing:-3px; text-transform:uppercase; }
.hero-accent { color:var(--c-crimson); }
.hero-aside { background:var(--c-navy); color:var(--c-cream); padding:3rem; display:flex; flex-direction:column; justify-content:center; }
.hero-card-label { font-weight:900; letter-spacing:2px; margin-bottom:1rem; opacity:.8; text-transform:uppercase; }
.hero-card-heading { font-family:var(--font-serif); font-size:2.5rem; line-height:1.1; font-style:italic; margin-bottom:1.5rem; }
.hero-card-text { font-size:1.1rem; margin-bottom:2.5rem; }

/* BUTTON */
.btn-primary { display:inline-block; background:var(--c-crimson); color:var(--c-cream); padding:1rem 2rem; font-family:var(--font-heading); font-size:1.1rem; text-decoration:none; text-transform:uppercase; border:3px solid var(--c-crimson); transition:all .2s; }
.btn-primary:hover { background:var(--c-cream); color:var(--c-crimson); }

/* MARQUEE */
.marquee { border-bottom:8px solid var(--c-navy); padding:1rem 0; overflow:hidden; white-space:nowrap; display:flex; gap:2rem; font-family:var(--font-heading); font-size:1.5rem; }

/* PILLARS */
.section-pillars { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:8px solid var(--c-navy); }
.pillar { padding:3rem; border-right:8px solid var(--c-navy); position:relative; }
.pillar:last-child { border-right:none; }
.pillar-num { font-family:var(--font-serif); font-size:5rem; font-weight:900; font-style:italic; line-height:1; display:block; margin-bottom:1rem; }
.pillar--accent .pillar-num { color:var(--c-crimson); }
.pillar--accent .pillar-title { color:var(--c-crimson); }
.pillar-title { font-family:var(--font-heading); font-size:2.2rem; line-height:1; letter-spacing:-1px; margin-bottom:1.5rem; }
.pillar-text { font-size:1.1rem; font-weight:600; line-height:1.6; }

/* ROUTES */
.section-routes { display:grid; grid-template-columns:1fr 1fr; border-bottom:8px solid var(--c-navy); }
.route { padding:3rem; border-right:8px solid var(--c-navy); }
.route:last-child { border-right:none; }
.route-title { font-family:var(--font-heading); font-size:2rem; margin-bottom:1rem; text-transform:uppercase; }
.route-desc { font-size:1.1rem; font-weight:600; }

/* COMMUNITY */
.section-community { padding:4rem; border-bottom:8px solid var(--c-navy); background:var(--c-navy); color:var(--c-cream); }
.community-heading { font-family:var(--font-heading); font-size:3rem; margin-bottom:1.5rem; text-transform:uppercase; }
.community-text { font-size:1.2rem; margin-bottom:2rem; max-width:700px; }
.community-benefits { list-style:none; margin-bottom:2.5rem; }
.community-benefits li { padding:.5rem 0; border-bottom:1px solid rgba(250,247,242,.15); font-weight:600; }
.community-benefits li::before { content:"→ "; color:var(--c-crimson); }

/* QUOTE */
.section-quote { padding:4rem; border-bottom:8px solid var(--c-navy); text-align:center; }
.quote-text { font-family:var(--font-serif); font-size:2rem; font-style:italic; line-height:1.3; max-width:800px; margin:0 auto 1.5rem; }
.quote-cite { color:var(--c-crimson); font-weight:700; text-transform:uppercase; letter-spacing:2px; font-style:normal; }

/* FOUNDERS */
.section-founders { display:grid; grid-template-columns:1fr 1fr; border-bottom:8px solid var(--c-navy); }
.founder { padding:3rem; border-right:8px solid var(--c-navy); }
.founder:last-child { border-right:none; }
.founder-name { font-family:var(--font-heading); font-size:1.8rem; margin-bottom:.5rem; }
.founder-role { font-weight:600; color:var(--c-crimson); text-transform:uppercase; letter-spacing:1px; }

/* CTA */
.section-cta { border-bottom:8px solid var(--c-navy); padding:6rem; text-align:center; background-image:radial-gradient(var(--c-navy) 2px,transparent 2px); background-size:24px 24px; }
.cta-inner { background:var(--c-cream); border:8px solid var(--c-navy); padding:4rem; max-width:800px; margin:0 auto; box-shadow:12px 12px 0 var(--c-navy); }
.cta-heading { font-family:var(--font-serif); font-size:3.5rem; font-style:italic; font-weight:900; line-height:1.1; margin-bottom:1.5rem; }
.cta-text { font-size:1.2rem; font-weight:600; max-width:500px; margin:0 auto 2.5rem; }

/* FOOTER */
.site-footer { padding:2rem; text-align:center; font-weight:bold; opacity:.6; }

/* RESPONSIVE */
@media(max-width:992px){
    .hero{grid-template-columns:1fr} .hero-main{border-right:none;border-bottom:8px solid var(--c-navy)}
    .section-pillars{grid-template-columns:1fr} .pillar{border-right:none;border-bottom:8px solid var(--c-navy)} .pillar:last-child{border-bottom:none}
    .section-routes{grid-template-columns:1fr} .route{border-right:none;border-bottom:8px solid var(--c-navy)} .route:last-child{border-bottom:none}
    .section-founders{grid-template-columns:1fr} .founder{border-right:none;border-bottom:8px solid var(--c-navy)} .founder:last-child{border-bottom:none}
    .header-nav{display:none}
}