/* ship-base.css — shared structural base for the "ship" design system.
 *
 * Reset, sticky nav, hero shell, section grid, typography and footer that were
 * previously duplicated inline in every AsesorIAs funnel page's <style> block.
 * Linked by all funnel pages; safe to adopt on other ship-system long-scroll
 * pages (3D Cards, About Me) later.
 *
 * What lives elsewhere, on purpose:
 *   - Funnel components + hero-text variants (.summary/.route-stamp/.question/
 *     .lead) -> asesorias/asesorias.css
 *   - The AEO-managed .sr-only rule stays inline per page (scripts/build-aeo.mjs
 *     injects it between markers and needs a <style> block to host it).
 *
 * Defaults use the roomy "result / landing" vertical rhythm. Compact funnel
 * steps opt in with .ship-hero--tight and .ship-section--compact (same
 * specificity as the base rules, so the responsive overrides below still win
 * at <=768px / <=480px via source order).
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #000; color: #fff; font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #fff; color: #000; }
::-moz-selection { background: #fff; color: #000; }
section.ship-section.light::selection,
section.ship-section.light *::selection { background: #000; color: #fff; }
section.ship-section.light::-moz-selection,
section.ship-section.light *::-moz-selection { background: #000; color: #fff; }
a { color: inherit; }

/* Sticky blur nav: back-arrow (left) + EN/ES toggle (right) */
.ship-nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; min-height: 101px; /* match home .ship-header height */ padding: 0 clamp(24px, 5vw, 80px); background: rgba(0,0,0,0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.10); }
.ship-nav .back-button { position: static; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 4px; margin: -4px; text-decoration: none; transition: opacity .2s ease; }
.ship-nav .back-button:hover { opacity: 0.72; }
.ship-nav .back-button canvas { display: block; }
.ship-lang { display: inline-flex; align-items: center; gap: 6px; font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
.ship-lang a, .ship-lang span { color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color 0.2s ease; }
.ship-lang a:hover { color: #fff; }
.ship-lang .active { color: #fff; font-weight: 600; }
.ship-lang .sep { color: rgba(255, 255, 255, 0.28); }
.ship-lang a { display: inline-flex; align-items: center; padding: 14px 7px; margin: -14px -7px; }
.ship-lang a:focus-visible { outline: 1px solid #fff; outline-offset: 2px; border-radius: 2px; }

/* Hero shell — roomy default; steps add .ship-hero--tight */
.ship-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 96px 24px 96px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.ship-hero--tight { padding: 35px 24px 35px; }
.dot-title-wrap { display: flex; justify-content: center; align-items: center; }
.dot-title-wrap canvas { display: block; image-rendering: pixelated; max-width: 100%; height: auto; }
.ship-hero .eyebrow { display: block; margin-bottom: 24px; }

/* Sections — roomy default; steps add .ship-section--compact */
section.ship-section { padding: 96px 24px; border-bottom: 1px solid rgba(255,255,255,0.10); }
section.ship-section.light { background: #fff; color: #000; border-bottom-color: rgba(0,0,0,0.10); }
section.ship-section--compact { padding: 50px 20px; }
.ship-inner { max-width: 1120px; margin: 0 auto; }
.ship-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; }

.eyebrow { font-family: 'Geist Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.45); }
section.light .eyebrow { color: rgba(0,0,0,0.45); }

h2.ship-h2 { margin: 12px 0 0; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.032em; line-height: 1.1; }
h3.ship-h3 { margin: 12px 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.028em; line-height: 1.15; }
.ship-body p { margin: 0 0 18px; font-size: 1.0625rem; line-height: 1.7; color: rgba(255,255,255,0.78); letter-spacing: -0.005em; }
section.light .ship-body p { color: rgba(0,0,0,0.72); }
.ship-body p:last-child { margin-bottom: 0; }
.ship-body strong { font-weight: 600; }

.ship-footer { padding: 18px 24px; border-top: 1px solid rgba(255,255,255,0.10); display: flex; flex-direction: column; align-items: center; gap: 28px; }
.ship-footer .stamp { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255,255,255,0.30); }

@media (max-width: 768px) {
    .ship-nav { min-height: 77px; padding: 0 20px; }
    section.ship-section { padding: 64px 20px; }
    .ship-hero { padding: 72px 20px 64px; }
    .ship-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px;
    }
    .ship-grid > .col-label,
    .ship-grid > .col-body {
        grid-column: 1 / -1 !important;
        max-width: 100% !important;
        min-width: 0;
    }
}
@media (max-width: 480px) {
    .ship-nav { min-height: 59px; padding: 0 14px; }
    section.ship-section { padding: 48px 16px; }
    section.ship-section > .ship-inner,
    section.ship-section > .ship-inner.ship-grid,
    .ship-section > .ship-inner,
    .ship-section > .ship-inner.ship-grid {
        width: 100%;
        max-width: 100%;
    }
    .ship-hero { padding: 56px 16px 48px; }
    .ship-body p { font-size: 0.9375rem; line-height: 1.65; }
    h2.ship-h2 { font-size: clamp(1.375rem, 6vw, 1.75rem); }
    h3.ship-h3 { font-size: 1.25rem; }
    .ship-footer { padding: 40px 16px; gap: 20px; }
    body { overflow-x: hidden; }
}