/* ===================================================================== Student-athlete BMX recruiting profile — TEMPLATE Design tokens ----------------------------------------------------------------- Color: --ink #0E1B2A deep night-pitch navy (base dark) --blue #1B4C8C primary accent blue --sky #6FB7E0 training-kit sky blue (secondary accent) --gold #C9A227 trophy gold (achievements) --paper #F5F4F0 warm off-white (light backgrounds) --slate #52606D secondary text on light Type: Display: "Oswald" — condensed, athletic, scoreboard character Body: "Inter" — clean, highly legible humanist sans ===================================================================== */ :root { --ink: #0e1b2a; --ink-2: #142a40; --ink-rgb: 14,27,42; --blue: #1b4c8c; --blue-2: #123a6e; --sky: #6fb7e0; --gold: #c9a227; --paper: #f5f4f0; --paper-2: #ebe9e2; --blue-tint: #eaf1f8; --slate: #52606d; --slate-light: #8393a2; --white: #ffffff; --line: rgba(14, 27, 42, 0.12); --line-dark: rgba(255, 255, 255, 0.14); --font-display: "Oswald", "Arial Narrow", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --maxw: 1180px; --radius: 3px; } /* ===================================================================== TEMAS DE COLOR — se activan poniendo data-theme="clave" en . Cada tema redefine solo los tonos de acento (ink/blue/gold/sky/tint); los neutros (paper, slate, line) se mantienen iguales en todos para que el contraste y la legibilidad no cambien. ===================================================================== */ /* 1) Sapphire & Gold — azul profundo clásico, dorado de trofeo (default) */ :root[data-theme="sapphire"] { --ink-rgb: 14,27,42; --ink: #0e1b2a; --ink-2: #142a40; --blue: #1b4c8c; --blue-2: #123a6e; --sky: #6fb7e0; --gold: #c9a227; --blue-tint: #eaf1f8; } /* 2) Crimson & Ember — rojo intenso con dorado cálido */ :root[data-theme="crimson"] { --ink-rgb: 38,11,13; --ink: #260b0d; --ink-2: #3a1216; --blue: #9c1f28; --blue-2: #7a161e; --sky: #eab08a; --gold: #e8b93f; --blue-tint: #fbecea; } /* 3) Forest & Bronze — verde bosque con bronce */ :root[data-theme="forest"] { --ink-rgb: 13,33,26; --ink: #0d211a; --ink-2: #163529; --blue: #1f6b4a; --blue-2: #164f37; --sky: #8fd6b4; --gold: #c98a3d; --blue-tint: #e8f3ee; } /* 4) Sunset & Slate — naranja atardecer con pizarra morada */ :root[data-theme="sunset"] { --ink-rgb: 36,31,46; --ink: #241f2e; --ink-2: #362f45; --blue: #d9622b; --blue-2: #b34f22; --sky: #f2b880; --gold: #f2c744; --blue-tint: #fdf0e6; } /* 5) Royal & Silver — púrpura real con dorado clásico */ :root[data-theme="royal"] { --ink-rgb: 26,19,48; --ink: #1a1330; --ink-2: #281f47; --blue: #6b3fa0; --blue-2: #52317d; --sky: #c9aee0; --gold: #d4af37; --blue-tint: #f2ecf8; } /* 6) Teal & Coral — turquesa moderno con coral */ :root[data-theme="teal"] { --ink-rgb: 8,44,46; --ink: #082c2e; --ink-2: #0f4245; --blue: #1a8f94; --blue-2: #136d71; --sky: #7fd8dc; --gold: #ff6f59; --blue-tint: #e6f5f5; } /* 7) Maroon & Gold — colegial/universitario, muy reconocido en EE.UU. */ :root[data-theme="maroon"] { --ink-rgb: 42,14,19; --ink: #2a0e13; --ink-2: #3d151c; --blue: #7a1f2b; --blue-2: #5e181f; --sky: #e8b4bb; --gold: #c9a227; --blue-tint: #f7e9ea; } /* 8) Steel & Amber — azul acero con ámbar, look tech/deportivo moderno */ :root[data-theme="steel"] { --ink-rgb: 20,32,43; --ink: #14202b; --ink-2: #1e3040; --blue: #3a6ea5; --blue-2: #2c5581; --sky: #9fc4e0; --gold: #e0982a; --blue-tint: #eaf0f6; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; margin: 0; } p { margin: 0 0 1em; max-width: 62ch; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .section { padding: 96px 0; border-top: 1px solid var(--line); } .section-head { max-width: 640px; margin-bottom: 48px; } .section-head h2 { font-size: clamp(2rem, 4vw, 2.85rem); margin-bottom: 14px; } .section-head p { color: var(--slate); font-size: 1.05rem; } .section--dark { background: var(--ink); color: var(--paper); border-top: none; } .section--dark .section-head p { color: #b7c2cc; } .section--dark h2, .section--dark h3 { color: var(--white); } .section--paper2 { background: var(--blue-tint); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; font-weight: 600; padding: 14px 26px; border-radius: var(--radius); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn--primary { background: var(--gold); color: var(--ink); } .btn--primary:hover { filter: brightness(1.08); } .btn--outline { border-color: currentColor; background: transparent; } .btn--outline:hover { background: rgba(255,255,255,0.1); } .btn--outline-dark { border-color: var(--ink); color: var(--ink); } .btn--outline-dark:hover { background: var(--ink); color: var(--white); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(var(--ink-rgb), 0.96); backdrop-filter: blur(6px); color: var(--white); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 76px; } .brand { font-family: var(--font-display); text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.03em; text-decoration: none; color: var(--white); display: flex; align-items: baseline; gap: 10px; } .brand .num { color: var(--gold); font-size: 1rem; } .main-nav { display: none; } .header-actions { display: flex; align-items: center; gap: 14px; } .lang-btn { font-family: var(--font-body); background: transparent; border: 1px solid rgba(255,255,255,0.35); color: var(--white); border-radius: var(--radius); padding: 7px 14px; font-size: 0.85rem; cursor: pointer; } .lang-btn:hover { border-color: var(--white); } .nav-toggle { display: block; background: none; border: none; color: var(--white); font-size: 1.6rem; cursor: pointer; line-height: 1; padding: 4px 2px; } .mobile-nav { display: none; background: var(--ink-2); border-top: 1px solid rgba(255,255,255,0.12); max-height: 70vh; overflow-y: auto; } .mobile-nav.open { display: block; } .mobile-nav ul { list-style: none; margin: 0; padding: 8px 0; columns: 1; } .mobile-nav a { display: block; padding: 14px 28px; color: #dfe6ec; text-decoration: none; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); } @media (min-width: 640px) { .mobile-nav ul { columns: 2; column-gap: 0; } } @media (min-width: 960px) { .mobile-nav ul { columns: 3; column-gap: 0; } } @media (max-width: 480px) { .brand { font-size: 0.92rem; } .site-header .container { height: 64px; } .header-actions { gap: 8px; } .lang-btn { padding: 6px 10px; font-size: 0.78rem; } } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; color: var(--white); background-color: var(--ink); background-size: cover; background-position: top center; } .hero-inner { padding-bottom: 64px; width: 100%; } .hero-kicker { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.82rem; color: var(--sky); margin-bottom: 18px; } .hero h1 { font-size: clamp(3.2rem, 9vw, 7.2rem); line-height: 0.95; margin-bottom: 14px; } .hero .position { font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.25rem); color: #dfe6ec; font-weight: 500; max-width: 620px; margin-bottom: 34px; } .hero-ctas { display: flex; gap: 16px; margin-bottom: 48px; flex-wrap: wrap; } .hero-facts { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid rgba(255,255,255,0.22); padding-top: 22px; gap: 18px; } .hero-fact .value { font-family: var(--font-display); font-size: 1.3rem; color: var(--white); } .hero-fact .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sky); margin-top: 2px; } @media (max-width: 900px) { .hero-facts { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .hero-facts { grid-template-columns: repeat(2, 1fr); } } /* ---------- About ---------- */ .about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; } @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } } .about-body p { font-size: 1.08rem; max-width: 60ch; } .quote-label { font-family: var(--font-display); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.1em; color: var(--blue); margin-bottom: 10px; } .hobbies-box { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--gold); padding: 26px 28px; border-radius: var(--radius); } .hobbies-box h3 { font-size: 1.05rem; margin-bottom: 12px; } .hobbies-box p { color: var(--slate); font-size: 0.98rem; margin: 0; } /* ---------- Profile / strengths ---------- */ .profile-overall { font-size: 1.1rem; max-width: 78ch; margin-bottom: 52px; padding-bottom: 46px; border-bottom: 1px solid var(--line); } .profile-overall p { max-width: 78ch; color: var(--ink); } h3.subsection { font-size: 0.85rem; letter-spacing: 0.08em; color: var(--blue); margin-bottom: 24px; } .profile-quickfacts { display: flex; flex-wrap: wrap; gap: 32px; padding: 22px 0 46px; border-bottom: 1px solid var(--line); margin-bottom: 46px; } .profile-quickfacts .value { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); } .profile-quickfacts .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue); margin-top: 2px; } .strengths-grid { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 60px; } .strength-card { background: var(--paper); padding: 28px 26px; flex: 1 1 300px; } .strength-card h4 { font-size: 1rem; text-transform: none; font-family: var(--font-body); font-weight: 700; margin-bottom: 10px; } .strength-card p { font-size: 0.94rem; color: var(--slate); margin: 0; } @media (max-width: 600px) { .strength-card { flex-basis: 100%; } } .dim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } @media (max-width: 700px) { .dim-grid { grid-template-columns: 1fr; } } .dim-card h4 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--gold); } .dim-card ul { margin: 0; padding: 0; list-style: none; } .dim-card li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--slate); font-size: 0.96rem; } .dim-card li:last-child { border-bottom: none; } .dim-card--full { margin-top: 24px; border: 1px solid var(--line); padding: 24px 28px; background: var(--paper); } .dim-card--full h4 { border-bottom-color: var(--blue); } /* ---------- Stats ---------- */ .stats-table { width: 100%; border-collapse: collapse; margin-bottom: 44px; } .stats-table th, .stats-table td { text-align: left; padding: 16px 10px; border-bottom: 1px solid var(--line-dark); } .section--dark .stats-table th, .section--dark .stats-table td { border-bottom: 1px solid rgba(255,255,255,0.14); } .stats-table th { font-family: var(--font-display); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--sky); font-weight: 500; } .stats-table td { font-size: 1rem; } .stats-table td.num { font-family: var(--font-display); font-size: 1.3rem; color: var(--white); } .stats-table tr td:first-child { color: #cfd8e0; } .physical-row { display: flex; gap: 48px; flex-wrap: wrap; } .physical-item .value { font-family: var(--font-display); font-size: 2rem; color: var(--gold); } .physical-item .label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: #b7c2cc; } /* ---------- Schedule ---------- */ .schedule-list { border-top: 1px solid var(--line); } .schedule-row { display: grid; grid-template-columns: 130px 190px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .schedule-row .day { font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem; color: var(--blue); } .schedule-row .time { font-size: 0.88rem; color: var(--slate); font-weight: 600; } .schedule-row .text { color: var(--ink); font-size: 0.98rem; } @media (max-width: 720px) { .schedule-row { grid-template-columns: 1fr; gap: 4px; } } /* ---------- Performances ---------- */ .filter-row { display: flex; gap: 12px; margin-bottom: 32px; } .filter-btn { font-family: var(--font-display); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.05em; background: transparent; border: 1.5px solid var(--line); color: var(--slate); padding: 9px 18px; border-radius: var(--radius); cursor: pointer; } .filter-btn.active { background: var(--blue); border-color: var(--blue); color: var(--white); } .perf-list { border-top: 1px solid var(--line); } .perf-row { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1.4fr 0.9fr 1fr auto; gap: 20px; align-items: center; } .perf-row .name { font-family: var(--font-display); font-size: 1.05rem; } .perf-row .team { color: var(--slate); font-size: 0.88rem; margin-top: 4px; } .perf-row .result { font-size: 0.92rem; } .perf-row .badge { display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 20px; background: var(--paper-2); color: var(--slate); margin-bottom: 6px; } .perf-row .badge.champion { background: var(--gold); color: var(--ink); } .perf-row .stats-text { font-size: 0.9rem; color: var(--ink); } .perf-row .link a { font-size: 0.82rem; text-decoration: none; color: var(--blue); border-bottom: 1px solid var(--blue); white-space: nowrap; } @media (max-width: 860px) { .perf-row { grid-template-columns: 1fr; gap: 8px; } } /* ---------- Career path timeline ---------- */ .timeline { position: relative; padding-left: 28px; border-left: 2px solid var(--line); } .timeline-item { position: relative; padding-bottom: 40px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-item::before { content: ""; position: absolute; left: -34px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--paper); box-shadow: 0 0 0 2px var(--gold); } .timeline-item .year { font-family: var(--font-display); font-size: 1.3rem; color: var(--blue); margin-bottom: 6px; } .timeline-item p { color: var(--slate); margin: 0; max-width: 68ch; } /* ---------- Awards ---------- */ .awards-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } .award-row { background: var(--paper); padding: 24px 28px; display: grid; grid-template-columns: 280px 1fr; gap: 24px; } .award-row h4 { font-family: var(--font-body); text-transform: none; font-weight: 700; font-size: 1rem; } .award-row p { margin: 0; color: var(--slate); font-size: 0.95rem; } @media (max-width: 720px) { .award-row { grid-template-columns: 1fr; gap: 8px; } } /* ---------- Academics ---------- */ .academics-grid { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); } .academic-item { background: var(--paper); padding: 22px 26px; flex: 1 1 320px; } .academic-item .label { font-family: var(--font-display); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--blue); margin-bottom: 6px; } .academic-item .value { font-size: 1rem; } @media (max-width: 700px) { .academic-item { flex-basis: 100%; } } /* ---------- Recommendation ---------- */ .recommend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 24px; } .recommend-card { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--blue); padding: 36px; } .recommend-card blockquote { margin: 0 0 22px; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; text-transform: none; letter-spacing: 0; line-height: 1.35; color: var(--ink); white-space: pre-line; } .recommend-name { font-weight: 700; } .recommend-title, .recommend-contact { color: var(--slate); font-size: 0.92rem; } /* ---------- Media / gallery ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 56px; } .gallery-grid a { display: block; overflow: hidden; border-radius: var(--radius); } .gallery-grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; transition: transform 0.35s ease; } .gallery-grid a:hover img { transform: scale(1.04); } .gallery-grid .span-2 { grid-column: span 2; grid-row: span 2; } .gallery-grid .span-2 img { aspect-ratio: 1/1; } @media (max-width: 860px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid .span-2 { grid-column: span 2; } } .video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .video-card { position: relative; } .video-card .frame { aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--ink-2); } .video-card iframe { width: 100%; height: 100%; border: 0; } .video-card .video-title { margin-top: 10px; font-size: 0.95rem; font-weight: 600; } .video-placeholder { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 60px 30px; text-align: center; color: var(--slate); } .video-placeholder h4 { font-family: var(--font-body); text-transform: none; font-weight: 700; margin-bottom: 8px; color: var(--ink); } @media (max-width: 860px) { .video-grid { grid-template-columns: 1fr; } } /* lightbox */ .lightbox { position: fixed; inset: 0; background: rgba(6,12,20,0.92); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 40px; } .lightbox.open { display: flex; } .lightbox img { max-height: 88vh; max-width: 92vw; border-radius: 2px; } .lightbox-close { position: absolute; top: 24px; right: 32px; background: none; border: none; color: var(--white); font-size: 2rem; cursor: pointer; line-height: 1; } /* ---------- Featured video ---------- */ .featured-video-section { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); color: var(--white); border-top: none; } .featured-video-section .section-head p { color: #b7c2cc; } .featured-video-main { max-width: 920px; margin: 0 auto; } .frame--main { aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--ink-2); border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55); } .frame--main iframe { width: 100%; height: 100%; border: 0; } .video-title--main { margin-top: 16px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.05rem; color: var(--sky); text-align: center; } .video-grid--secondary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 920px; margin: 40px auto 0; } @media (max-width: 860px) { .video-grid--secondary { grid-template-columns: 1fr; } } .video-placeholder--big { max-width: 700px; margin: 0 auto; border-color: rgba(255,255,255,0.25); color: #b7c2cc; } .video-placeholder--big h4 { color: var(--white); } /* ---------- Press ---------- */ .press-section { background: var(--paper); } .press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .press-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .press-grid { grid-template-columns: 1fr; } } .press-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .press-card .frame { aspect-ratio: 16/9; background: var(--ink-2); } .press-card .frame iframe { width: 100%; height: 100%; border: 0; } .press-card-body { padding: 18px 20px; } .press-source { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue); margin-bottom: 6px; } .press-title { font-weight: 700; font-size: 1rem; margin-bottom: 10px; } .press-link { font-size: 0.85rem; color: var(--blue); text-decoration: none; border-bottom: 1px solid var(--blue); } /* ---------- Instagram CTA ---------- */ .instagram-cta { background: var(--blue); color: var(--white); border-top: none; } .instagram-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .instagram-inner h2 { color: var(--white); margin-bottom: 8px; font-size: clamp(1.7rem, 3.4vw, 2.3rem); } .instagram-inner p { color: #dbe6f2; margin: 0; } .instagram-cta .btn--primary { flex-shrink: 0; } /* ---------- Social icons (dynamic, admin-configurable) ---------- */ .social-icons-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.35); color: var(--white); transition: background 0.15s ease, border-color 0.15s ease; flex-shrink: 0; } .social-icon:hover { background: rgba(255,255,255,0.12); border-color: var(--white); } .direct-contact .social-icon { border-color: var(--line); color: var(--ink); } .direct-contact .social-icon:hover { background: var(--blue-tint); border-color: var(--blue); } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .field { margin-bottom: 20px; } .field label { display: block; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate); margin-bottom: 7px; font-weight: 600; } .field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.98rem; background: var(--white); color: var(--ink); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); } .field textarea { resize: vertical; min-height: 130px; } .form-note { font-size: 0.82rem; color: var(--slate-light); margin-top: 10px; } .form-status { margin-top: 16px; font-size: 0.92rem; padding: 12px 14px; border-radius: var(--radius); display: none; } .form-status.show { display: block; } .form-status.ok { background: #e5f3e8; color: #1c6b34; } .form-status.error { background: #fbe7e7; color: #9c2727; } .direct-contact { display: grid; gap: 24px; align-content: start; } .direct-item .label { font-family: var(--font-display); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--blue); margin-bottom: 6px; } .direct-item .value { font-size: 1.15rem; } .direct-item a { text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); color: #93a1ac; padding: 40px 0; font-size: 0.85rem; } .site-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; } .site-footer a { color: #cfd8e0; text-decoration: none; } .footer-social a { margin-left: 16px; } /* utility */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ===================================================================== IMPRESIÓN / PDF — se activa al usar el botón "PDF" (window.print()) o Cmd/Ctrl+P. Oculta navegación, formularios y video; simplifica la portada para que quede legible y ordenada en papel. ===================================================================== */ @media print { .site-header, .mobile-nav, .lightbox, .instagram-cta, .lang-btn, #pdf-btn, .nav-toggle, .filter-row, #contact-form, .form-note, .form-status, .featured-video-section, .press-section, .site-footer .footer-social { display: none !important; } body { background: var(--white); } .section { padding: 22px 0; border-top: 1px solid #ccc; break-inside: avoid; } .section--dark, .section--paper2 { background: var(--white) !important; color: var(--ink) !important; } .section--dark .section-head p, .section--dark h2, .section--dark h3, .section--dark td, .section--dark th, .section--dark .physical-item .value, .section--dark .physical-item .label { color: var(--ink) !important; } .stats-table th, .stats-table td { border-color: #ccc; } .stats-table td.num { color: var(--ink) !important; } .hero { min-height: auto; background-color: var(--white) !important; background-image: none !important; color: var(--ink); padding: 10px 0 20px; } .hero-inner { padding-bottom: 0; } .hero-kicker { color: var(--blue); } .hero h1 { font-size: 2.6rem; color: var(--ink); } .hero .position { color: var(--ink); } .hero-ctas { display: none; } .hero-facts { border-top-color: #ccc; } .hero-fact .value { color: var(--ink) !important; } .hero-fact .label { color: var(--blue) !important; } .gallery-grid { grid-template-columns: repeat(3, 1fr); } .gallery-grid .span-2 { grid-column: span 1; grid-row: span 1; } .gallery-grid .span-2 img { aspect-ratio: 4/5; } .perf-row, .award-row, .academic-item, .strength-card, .recommend-card, .press-card { break-inside: avoid; } a[href]::after { content: none !important; } .site-footer { background: var(--white); color: var(--slate); } }