/* ═══════════════════════════════════════════════════════════
   CITY STRATEGIC PAGE — Design System
   Architecture: Authority → Context → Method → Evidence → Conversion
   ═══════════════════════════════════════════════════════════ */

/* ── S1: Hero Estratégico ── */
.cy-hero { background: linear-gradient(170deg, #0f1117 0%, #1a1025 50%, #0f1117 100%); padding: 9rem 0 4rem; position: relative; overflow: hidden; }
.cy-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 30% 80%, rgba(108,92,231,0.08) 0%, transparent 60%), radial-gradient(ellipse at 70% 20%, rgba(108,92,231,0.05) 0%, transparent 50%); pointer-events: none; }
.cy-hero .container { position: relative; z-index: 1; max-width: 800px; }
.cy-hero-label { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(108,92,231,0.1); border: 1px solid rgba(108,92,231,0.2); color: var(--violet); padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; margin-bottom: 1.5rem; letter-spacing: 0.02em; }
.cy-hero h1 { font-size: 2.75rem; font-weight: 800; color: var(--soft-white); line-height: 1.15; margin-bottom: 1.25rem; letter-spacing: -0.02em; }
.cy-hero h1 span { color: var(--violet); }
.cy-hero-sub { font-size: 1.15rem; color: var(--gray-tech); line-height: 1.7; margin-bottom: 2rem; max-width: 650px; }
.cy-hero-cta { display: inline-block; padding: 1rem 2.5rem; background: var(--violet); color: white; border-radius: 10px; font-weight: 700; font-size: 1.05rem; text-decoration: none; transition: var(--transition); box-shadow: 0 4px 20px rgba(108,92,231,0.3); }
.cy-hero-cta:hover { background: var(--violet-hover); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(108,92,231,0.4); }
.cy-hero-micro { margin-top: 1rem; font-size: 0.8rem; color: var(--gray-tech); opacity: 0.7; }
.cy-hero-micro span { margin: 0 0.5rem; opacity: 0.3; }

/* ── S2: Contexto Empresarial ── */
.cy-context { padding: 5rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.cy-context .container { max-width: 900px; }
.cy-section-label { display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--violet); font-weight: 700; margin-bottom: 0.75rem; }
.cy-section-title { font-size: 1.75rem; font-weight: 800; color: var(--soft-white); margin-bottom: 1.25rem; letter-spacing: -0.01em; line-height: 1.25; }
.cy-context-intro { font-size: 1.05rem; color: var(--gray-tech); line-height: 1.8; margin-bottom: 2rem; }
.cy-context-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.cy-context-card { background: var(--dark-card); border: 1px solid rgba(255,255,255,0.04); border-radius: var(--radius); padding: 1.5rem; transition: var(--transition); }
.cy-context-card:hover { border-color: rgba(108,92,231,0.15); }
.cy-context-card h3 { font-size: 0.95rem; font-weight: 700; color: var(--soft-white); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.cy-context-card h3 .cy-icon { color: var(--violet); flex-shrink: 0; }
.cy-context-card p { font-size: 0.88rem; color: var(--gray-tech); line-height: 1.65; }

/* ── S3: Enfoque Consultivo ── */
.cy-method { padding: 5rem 0; background: var(--dark-alt); border-bottom: 1px solid rgba(255,255,255,0.04); }
.cy-method .container { max-width: 900px; }
.cy-method-intro { font-size: 1.05rem; color: var(--gray-tech); line-height: 1.8; margin-bottom: 2.5rem; max-width: 700px; }
.cy-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.cy-steps::before { content: ''; position: absolute; top: 28px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, rgba(108,92,231,0.3), transparent); }
.cy-step { text-align: center; position: relative; z-index: 1; }
.cy-step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--dark-card); border: 2px solid rgba(108,92,231,0.3); color: var(--violet); font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; transition: var(--transition); }
.cy-step:hover .cy-step-num { background: rgba(108,92,231,0.15); border-color: var(--violet); }
.cy-step h4 { font-size: 0.85rem; font-weight: 700; color: var(--soft-white); margin-bottom: 0.35rem; }
.cy-step p { font-size: 0.78rem; color: var(--gray-tech); line-height: 1.5; padding: 0 0.25rem; }

/* ── S4: Grilla Estratégica de Conferencistas ── */
.cy-speakers { padding: 5rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.cy-speakers .container { max-width: 1100px; }
.cy-speakers-header { text-align: center; margin-bottom: 2.5rem; }
.cy-speakers-header .cy-section-title { margin-bottom: 0.5rem; }
.cy-speakers-sub { font-size: 1rem; color: var(--gray-tech); }
.cy-filters { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.cy-filter-btn { padding: 0.45rem 1.1rem; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); background: transparent; color: var(--gray-tech); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: var(--transition); font-family: inherit; }
.cy-filter-btn:hover, .cy-filter-btn.active { background: rgba(108,92,231,0.12); border-color: rgba(108,92,231,0.3); color: var(--violet); }
.cy-spk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.cy-spk-card { background: var(--dark-card); border: 1px solid rgba(255,255,255,0.04); border-radius: var(--radius); overflow: hidden; transition: var(--transition); text-decoration: none; display: block; }
.cy-spk-card:hover { border-color: rgba(108,92,231,0.3); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(108,92,231,0.1); }
.cy-spk-img { width: 100%; height: 260px; object-fit: cover; background: var(--dark-alt); }
.cy-spk-body { padding: 1.25rem; }
.cy-spk-name { font-size: 1.05rem; font-weight: 700; color: var(--soft-white); margin-bottom: 0.3rem; }
.cy-spk-spec { font-size: 0.82rem; color: var(--violet); font-weight: 600; margin-bottom: 0.4rem; }
.cy-spk-tag { font-size: 0.8rem; color: var(--gray-tech); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; margin-bottom: 0.75rem; }
.cy-spk-meta { display: flex; align-items: center; justify-content: space-between; }
.cy-spk-avail { font-size: 0.72rem; background: rgba(16,185,129,0.1); color: #34d399; padding: 0.2rem 0.6rem; border-radius: 10px; font-weight: 600; }
.cy-spk-link { font-size: 0.82rem; color: var(--violet); font-weight: 600; }

/* ── S5: Transición Inteligente ── */
.cy-bridge { padding: 3.5rem 0; text-align: center; }
.cy-bridge .container { max-width: 700px; }
.cy-bridge-text { font-size: 1.1rem; color: var(--gray-tech); line-height: 1.7; margin-bottom: 1.5rem; }
.cy-bridge-cta { display: inline-block; padding: 0.75rem 2rem; border: 1px solid rgba(108,92,231,0.3); color: var(--violet); border-radius: 8px; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: var(--transition); }
.cy-bridge-cta:hover { background: rgba(108,92,231,0.1); border-color: var(--violet); transform: translateY(-2px); }

/* ── S6: Diferenciación ── */
.cy-diff { padding: 5rem 0; background: var(--dark-alt); border-bottom: 1px solid rgba(255,255,255,0.04); }
.cy-diff .container { max-width: 900px; }
.cy-diff-intro { font-size: 1.05rem; color: var(--gray-tech); line-height: 1.8; margin-bottom: 2.5rem; max-width: 700px; }
.cy-diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.cy-diff-item { background: var(--dark-card); border: 1px solid rgba(255,255,255,0.04); border-radius: var(--radius); padding: 1.5rem; }
.cy-diff-item h3 { font-size: 0.95rem; font-weight: 700; color: var(--soft-white); margin-bottom: 0.5rem; }
.cy-diff-item p { font-size: 0.88rem; color: var(--gray-tech); line-height: 1.65; }

/* ── S7: FAQ Local ── */
.cy-faq { padding: 5rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.cy-faq .container { max-width: 800px; }
.cy-faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.cy-faq-item { background: var(--dark-card); border: 1px solid rgba(255,255,255,0.04); border-radius: var(--radius); overflow: hidden; }
.cy-faq-q { padding: 1.25rem 1.5rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 0.95rem; color: var(--soft-white); transition: var(--transition); }
.cy-faq-q:hover { color: var(--violet); }
.cy-faq-q .cy-faq-icon { font-size: 1.25rem; color: var(--violet); transition: transform 0.3s ease; flex-shrink: 0; margin-left: 1rem; }
.cy-faq-item.open .cy-faq-icon { transform: rotate(45deg); }
.cy-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.cy-faq-a-inner { padding: 0 1.5rem 1.25rem; font-size: 0.9rem; color: var(--gray-tech); line-height: 1.7; }

/* ── S8: CTA Final ── */
.cy-cta-final { padding: 5rem 0; text-align: center; background: linear-gradient(170deg, #0f1117 0%, #1a1025 100%); position: relative; }
.cy-cta-final::before { content: ''; position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(108,92,231,0.08), transparent 70%); transform: translate(-50%, -50%); pointer-events: none; }
.cy-cta-final .container { position: relative; z-index: 1; max-width: 650px; }
.cy-cta-final h2 { font-size: 2rem; font-weight: 800; color: var(--soft-white); margin-bottom: 1.25rem; line-height: 1.2; }
.cy-cta-final-btn { display: inline-block; padding: 1rem 2.5rem; background: var(--violet); color: white; border-radius: 10px; font-weight: 700; font-size: 1.05rem; text-decoration: none; transition: var(--transition); box-shadow: 0 4px 20px rgba(108,92,231,0.3); }
.cy-cta-final-btn:hover { background: var(--violet-hover); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(108,92,231,0.4); }
.cy-cta-final .cy-hero-micro { margin-top: 1.25rem; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .cy-spk-grid { grid-template-columns: repeat(2, 1fr); }
    .cy-steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .cy-steps::before { display: none; }
}
@media (max-width: 768px) {
    .cy-hero h1 { font-size: 2rem; }
    .cy-section-title { font-size: 1.4rem; }
    .cy-context-grid, .cy-diff-grid { grid-template-columns: 1fr; }
    .cy-steps { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .cy-spk-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .cy-hero { padding: 7rem 0 3rem; }
}
@media (max-width: 480px) {
    .cy-hero h1 { font-size: 1.65rem; }
    .cy-steps { grid-template-columns: 1fr; }
}