/* ================================================================= Tritemius VC — Stylesheet Identidad visual independiente del grupo (light theme, paleta y layout específicos). La VC es una marca dentro de la marca: público institucional, estética sobria. ARQUITECTURA: Todos los selectores están scope-prefijados con body.page-vc. Esto garantiza estructuralmente que ninguna regla de este archivo pueda aplicar fuera de una página marcada con , incluso si en el futuro vc.css se carga junto a otras CSS. Las CSS custom properties (--bg, --ink, ...) se definen en body.page-vc en lugar de :root por la misma razón: aislamiento. UNIDADES: rem para tamaños y espaciados (1rem = 16px por defecto). px solo en hairlines de borde/outline, micro-transforms del hover, filtros (blur) y breakpoints @media. ================================================================= */ /* Reglas globales (afectan al document root, no se pueden scopear bajo body.page-vc). Como vc.css solo se carga en /vc/, no hay riesgo de colisión con otras páginas. */ html { scroll-behavior: smooth; scrollbar-gutter: stable; } /* ================================================================= TOKENS Y BASE ================================================================= */ body.page-vc { /* Paleta light */ --bg: #FFFFFF; --bg-2: #F6F7FB; --bg-3: #EEF1F6; --surface: #FAFBFD; --ink: #0B1638; --ink-2: #1F2A52; --ink-3: #4A5578; --ink-4: #8A95B5; --primary: #3199FA; --accent: #1F2A52; --accent-bright: #39D6F3; --line: rgba(11, 22, 56, 0.10); --line-strong: rgba(11, 22, 56, 0.18); /* Tokens semánticos cross-theme (mantienen su significado en ambos modos) */ --header-bg: rgba(255, 255, 255, 0.92); --contact-bg: #1F2A52; /* sección de contacto en light es dark blue */ --contact-card-bg: #FFFFFF; /* card sobre la sección contact */ --btn-deck-bg: #1F2A52; /* CTA principal: alto contraste sobre light */ --btn-deck-bg-hover: #3199FA; --status-active-bg: rgba(49, 153, 250, 0.06); --status-active-border: rgba(49, 153, 250, 0.30); margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.35s ease, color 0.35s ease; } /* Paleta dark — inversión de la del handoff manteniendo identidad VC. Activada con (theme-toggle.js sincroniza data-theme entre y ). */ html[data-theme="dark"] body.page-vc { --bg: #0B1638; --bg-2: #182143; --bg-3: #1F2A52; --surface: #28335C; --ink: #FFFFFF; --ink-2: #E8ECF5; --ink-3: #B5BCC9; --ink-4: #8A95B5; --primary: #3199FA; /* invariante: identidad de marca */ --accent: #E8ECF5; --accent-bright: #39D6F3; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.18); --header-bg: rgba(11, 22, 56, 0.78); --contact-bg: #06102A; /* en dark, contact es más profundo que el bg */ --contact-card-bg: #1F2A52; /* card elevada sobre contact */ --btn-deck-bg: #3199FA; /* en dark, el CTA principal es el azul vibrante */ --btn-deck-bg-hover: #39D6F3; --status-active-bg: rgba(49, 153, 250, 0.14); --status-active-border: rgba(49, 153, 250, 0.42); } body.page-vc *, body.page-vc *::before, body.page-vc *::after { box-sizing: border-box; margin: 0; padding: 0; } body.page-vc section[id] { scroll-margin-top: 5rem; } body.page-vc ::selection { background: var(--ink-2); color: #FFFFFF; } body.page-vc h1, body.page-vc h2, body.page-vc h3, body.page-vc h4, body.page-vc h5 { font-family: 'Barlow', sans-serif; color: var(--ink-2); letter-spacing: -0.015em; font-weight: 700; } body.page-vc a { color: inherit; text-decoration: none; } body.page-vc .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body.page-vc .eyebrow { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--primary); } /* ================================================================= HEADER ================================================================= */ body.page-vc .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.125rem 4rem; background: var(--header-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; transition: padding 0.3s ease, background 0.35s ease; } /* El logo VC se muestra tal cual en ambos temas. Se probó invertirlo en dark mode para mejorar contraste con el header oscuro, pero el filter producía un resultado visualmente pobre (decisión de marca: mantener la identidad del logo intacta). */ body.page-vc .header.scrolled { padding: 0.75rem 4rem; } body.page-vc .logo { display: flex; align-items: center; } body.page-vc .logo-img { height: 3rem; width: auto; display: block; transition: height 0.3s ease; } body.page-vc .header.scrolled .logo-img { height: 2.5rem; } body.page-vc .nav { display: flex; align-items: center; gap: 2.25rem; } body.page-vc .nav a { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.875rem; color: var(--ink-2); position: relative; padding-bottom: 0.25rem; transition: color 0.2s ease; } body.page-vc .nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--primary); transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } body.page-vc .nav a:hover { color: var(--primary); } body.page-vc .nav a:hover::after { width: 100%; } body.page-vc .lang-switch { display: inline-flex; align-items: center; gap: 2px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.75rem; color: var(--ink-4); letter-spacing: 0.08em; border: 1px solid var(--line); border-radius: 100px; padding: 0.3125rem 0.75rem; cursor: pointer; background: transparent; transition: all 0.25s ease; } body.page-vc .lang-switch:hover { color: var(--ink-2); border-color: var(--ink-2); } body.page-vc .lang-switch [data-lang-code] { opacity: 0.45; transition: opacity 0.25s ease, color 0.25s ease; } body.page-vc .lang-switch [data-lang-code].is-active { opacity: 1; color: var(--primary); } body.page-vc .lang-switch .lang-sep { opacity: 0.35; margin: 0 0.25rem; } /* ================================================================= MOBILE NAV TOGGLE (hamburguesa) Solo visible bajo 1024px (ver responsive) ================================================================= */ body.page-vc .nav-toggle { display: none; width: 2.75rem; height: 2.75rem; background: transparent; border: 1px solid var(--line-strong); border-radius: 100px; cursor: pointer; position: relative; padding: 0; align-items: center; justify-content: center; transition: border-color 0.25s ease, background 0.25s ease; z-index: 101; } body.page-vc .nav-toggle:hover { border-color: var(--primary); } body.page-vc .nav-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } body.page-vc .nav-toggle-bar { display: block; width: 1.125rem; height: 1.5px; background: var(--ink-2); border-radius: 1px; position: absolute; left: 50%; transform: translateX(-50%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease, top 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } body.page-vc .nav-toggle-bar:nth-child(1) { top: 0.9375rem; } body.page-vc .nav-toggle-bar:nth-child(2) { top: 1.3125rem; } body.page-vc .nav-toggle-bar:nth-child(3) { top: 1.6875rem; } body.page-vc .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { top: 1.3125rem; transform: translateX(-50%) rotate(45deg); } body.page-vc .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; transform: translateX(-50%) scaleX(0); } body.page-vc .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { top: 1.3125rem; transform: translateX(-50%) rotate(-45deg); } body.page-vc.nav-open { overflow: hidden; } /* ================================================================= BUTTONS ================================================================= */ body.page-vc .btn-deck { display: inline-flex; align-items: center; gap: 0.625rem; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.04em; padding: 1rem 1.75rem; background: var(--btn-deck-bg); color: #FFFFFF; border-radius: 2px; border: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); text-transform: uppercase; } body.page-vc .btn-deck:hover { background: var(--btn-deck-bg-hover); transform: translateY(-1px); box-shadow: 0 0.625rem 1.75rem rgba(49, 153, 250, 0.28); } html[data-theme="dark"] body.page-vc .btn-deck:hover { color: var(--bg); } body.page-vc .btn-deck:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } body.page-vc .btn-deck .arrow { width: 0.875rem; height: 0.875rem; transition: transform 0.3s ease; } body.page-vc .btn-deck:hover .arrow { transform: translateX(4px); } /* ================================================================= HERO ================================================================= */ body.page-vc .hero { /* min-height con dvh para evitar el bug de Safari iOS donde 100vh incluye la barra del navegador y corta el contenido. */ min-height: 100dvh; /* Top padding fluido: 7.5rem en mobile, escala hasta 11.25rem en desktop. Side y bottom se ajustan vía media queries (más estable que con vw). */ padding: clamp(7.5rem, 4rem + 8vw, 11.25rem) 4rem 6.25rem; position: relative; background: var(--bg); overflow: hidden; border-bottom: 1px solid var(--line); display: flex; align-items: center; } body.page-vc .hero-art { position: absolute; top: 50%; left: 82%; width: 45rem; height: 45rem; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; opacity: 0.9; animation: vcHeroBreathe 7s ease-in-out infinite; will-change: opacity, transform; } @keyframes vcHeroBreathe { 0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.96); } 50% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.04); } } @media (prefers-reduced-motion: reduce) { body.page-vc .hero-art { animation: none; } } body.page-vc .hero-art svg { width: 100%; height: 100%; display: block; } body.page-vc .hero-inner { position: relative; z-index: 2; max-width: 82.5rem; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: 5rem; align-items: end; } body.page-vc .hero-eyebrow { margin-bottom: 2rem; display: inline-block; } body.page-vc .hero h1 { font-family: 'Barlow', sans-serif; font-weight: 700; /* Fluid: 40px en mobile, escala suave hasta 64px en desktop ancho. Formula: base 2rem + 2.5vw da una pendiente proporcional. */ font-size: clamp(2.5rem, 2rem + 2.5vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink-2); margin-bottom: 2rem; max-width: 56.25rem; } body.page-vc .hero h1 em { font-style: italic; font-weight: 500; color: var(--ink-3); } body.page-vc .hero p.lead { /* Fluid sutil: 16px en mobile, 17px en desktop — mantiene legibilidad. */ font-size: clamp(1rem, 0.875rem + 0.4vw, 1.0625rem); color: var(--ink-3); max-width: 36.25rem; line-height: 1.65; margin-bottom: 2rem; } body.page-vc .hero-cta-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } body.page-vc .hero-aside { display: flex; flex-direction: column; gap: 2rem; border-left: 1px solid var(--line); padding-left: 3rem; } body.page-vc .hero-stat { display: flex; flex-direction: column; gap: 0.375rem; } body.page-vc .hero-stat-num { font-family: 'Barlow', sans-serif; font-weight: 700; /* Fluid: las cifras destacan visualmente, escalan con el viewport. */ font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.25rem); line-height: 1; color: var(--ink-2); letter-spacing: -0.02em; } body.page-vc .hero-stat-label { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); } /* ================================================================= SECTIONS BASE ================================================================= */ body.page-vc section { padding: 7.5rem 4rem; position: relative; } body.page-vc .section-inner { max-width: 82.5rem; margin: 0 auto; } body.page-vc .section-head { margin-bottom: 5rem; max-width: 57.5rem; } body.page-vc .section-head .eyebrow { display: block; margin-bottom: 1.5rem; } body.page-vc .section-head h2 { font-family: 'Barlow', sans-serif; font-weight: 700; /* Fluid: 36px en mobile, escala hasta 52px en desktop. */ font-size: clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem); line-height: 1.08; letter-spacing: -0.015em; margin-bottom: 1.5rem; } body.page-vc .section-head .intro { font-size: clamp(1rem, 0.875rem + 0.4vw, 1.0625rem); color: var(--ink-3); max-width: 46.25rem; line-height: 1.65; } /* ================================================================= THESIS ================================================================= */ body.page-vc .thesis { background: var(--bg); border-bottom: 1px solid var(--line); } body.page-vc .thesis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-strong); } body.page-vc .thesis-card { padding: 3.5rem 2.5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; transition: background 0.3s ease; position: relative; } body.page-vc .thesis-card:last-child { border-right: none; } body.page-vc .thesis-card:hover { background: var(--surface); } body.page-vc .thesis-card h3 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1.2; margin-bottom: 1.25rem; } body.page-vc .thesis-card .desc { font-size: 0.9375rem; color: var(--ink-3); line-height: 1.65; margin-bottom: 2.25rem; flex: 1; } body.page-vc .thesis-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; /* Reservar espacio para 2 líneas de tags (alto tag ~1.65rem + gap 0.5rem) y alinear el contenido al inicio de esa zona. Así, aunque una card tenga 1 línea y otra 2, la primera línea queda siempre a la misma Y en las tres cards del thesis-grid en desktop. */ min-height: 4rem; align-content: flex-start; } body.page-vc .thesis-tag { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.04em; padding: 0.375rem 0.75rem; border-radius: 100px; background: rgba(49, 153, 250, 0.08); color: var(--primary); border: 1px solid rgba(49, 153, 250, 0.18); } /* ================================================================= HOW WE INVEST ================================================================= */ body.page-vc .how { background: var(--bg-2); border-bottom: 1px solid var(--line); } body.page-vc .how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 1.5rem; } body.page-vc .how-item { display: flex; flex-direction: column; gap: 1rem; padding: 2rem 0 0 0; border-top: 2px solid var(--ink-2); } body.page-vc .how-item-label { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4); } body.page-vc .how-item-value { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.75rem; line-height: 1.05; color: var(--ink-2); letter-spacing: -0.015em; } body.page-vc .how-item-desc { font-size: 0.875rem; color: var(--ink-3); line-height: 1.55; } /* ================================================================= PORTFOLIO TABLE ================================================================= */ body.page-vc .portfolio { background: var(--bg); border-bottom: 1px solid var(--line); padding-bottom: 5rem; } body.page-vc .portfolio-table-wrap { overflow-x: auto; border-top: 1px solid var(--line-strong); } body.page-vc .portfolio-table { width: 100%; border-collapse: collapse; font-family: 'Inter', sans-serif; } body.page-vc .portfolio-table thead th { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4); text-align: left; padding: 1.5rem 1.5rem 1.5rem 0; border-bottom: 1px solid var(--line); } body.page-vc .portfolio-table thead th:first-child { padding-left: 0; } body.page-vc .portfolio-table tbody td { padding: 1.75rem 1.5rem 1.75rem 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink); vertical-align: middle; transition: background 0.2s ease; } body.page-vc .portfolio-table tbody tr:hover td { /* Oscurecimiento sutil pero notable. Se usa un alpha sobre el ink-2 para que en dark mode (cuando se reactive) también funcione: el mismo overlay produce un darkening en light y un lightening en dark. */ background: rgba(11, 22, 56, 0.06); } body.page-vc .portfolio-table tbody td:first-child { padding-left: 0; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.125rem; color: var(--ink-2); } body.page-vc .portfolio-table tbody td:first-child a { color: var(--ink-2); transition: color 0.2s ease; border-bottom: 1px solid transparent; } body.page-vc .portfolio-table tbody td:first-child a:hover { color: var(--primary); border-bottom-color: var(--primary); } body.page-vc .portfolio-table tbody td:first-child a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; } body.page-vc .portfolio-table .status { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.06em; padding: 0.3125rem 0.75rem; border-radius: 100px; border: 1px solid var(--line); } body.page-vc .portfolio-table .status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; } body.page-vc .portfolio-table .status.active { background: var(--status-active-bg); border-color: var(--status-active-border); color: var(--primary); } body.page-vc .portfolio-table .status.active::before { background: var(--primary); } body.page-vc .portfolio-table .status.exited { background: rgba(0, 128, 96, 0.06); border-color: rgba(0, 128, 96, 0.28); color: #007858; } body.page-vc .portfolio-table .status.exited::before { background: #007858; } body.page-vc .portfolio-footnote { margin-top: 2rem; font-size: 0.8125rem; color: var(--ink-4); font-style: italic; display: flex; align-items: center; gap: 0.75rem; } /* ================================================================= TEAM ================================================================= */ body.page-vc .team { background: var(--bg); border-bottom: 1px solid var(--line); padding-top: 5rem; } body.page-vc .team-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2.5rem; } body.page-vc .team-grid > .team-card:nth-child(1) { grid-column: 2 / span 2; } body.page-vc .team-grid > .team-card:nth-child(2) { grid-column: 4 / span 2; } body.page-vc .team-grid > .team-card:nth-child(3) { grid-column: 1 / span 2; } body.page-vc .team-grid > .team-card:nth-child(4) { grid-column: 3 / span 2; } body.page-vc .team-grid > .team-card:nth-child(5) { grid-column: 5 / span 2; } body.page-vc .team-card { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; transition: border-color 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; overflow: hidden; } body.page-vc .team-card:hover { border-color: var(--line-strong); box-shadow: 0 0.75rem 2rem rgba(11, 22, 56, 0.06); } body.page-vc .team-portrait { width: 100%; aspect-ratio: 4 / 5; background: var(--bg-2); overflow: hidden; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); } body.page-vc .team-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(15%); transition: filter 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } body.page-vc .team-card:hover .team-portrait img { filter: grayscale(0%); transform: scale(1.03); } body.page-vc .team-body { padding: 1.75rem 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; } body.page-vc .team-body .name { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.375rem; color: var(--ink-2); line-height: 1.2; } body.page-vc .team-body .role { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4); } /* ================================================================= CONTACT (dark) ================================================================= */ body.page-vc .contact { background: var(--contact-bg); color: #FFFFFF; position: relative; overflow: hidden; transition: background 0.35s ease; } body.page-vc .contact::before { content: ''; position: absolute; top: -12.5rem; right: -12.5rem; width: 43.75rem; height: 43.75rem; background: radial-gradient(circle, rgba(49, 153, 250, 0.35) 0%, transparent 70%); border-radius: 50%; filter: blur(60px); pointer-events: none; } body.page-vc .contact h2, body.page-vc .contact .contact-text h3, body.page-vc .contact .eyebrow { color: #FFFFFF; } body.page-vc .contact .eyebrow { color: var(--accent-bright); } body.page-vc .contact .contact-action h3 { color: var(--ink-2); } body.page-vc .contact-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.4fr 1fr; gap: 6rem; align-items: center; } body.page-vc .contact-text h2 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: clamp(2.5rem, 2rem + 2.5vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; color: #FFFFFF; margin: 1rem 0 2rem; } body.page-vc .contact-text p { font-size: clamp(1rem, 0.875rem + 0.4vw, 1.0625rem); color: rgba(255, 255, 255, 0.78); line-height: 1.65; margin-bottom: 1.5rem; max-width: 35rem; } body.page-vc .contact-action { background: var(--contact-card-bg); border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 4px; padding: 2.5rem; display: flex; flex-direction: column; gap: 1.75rem; box-shadow: 0 1.125rem 3rem rgba(0, 0, 0, 0.20); } html[data-theme="dark"] body.page-vc .contact-action { border-color: var(--line-strong); } /* En dark mode el h3 de la contact-action (sobre fondo dark del card) usa el color de texto principal en lugar de --ink-2 (que en dark es claro). */ html[data-theme="dark"] body.page-vc .contact .contact-action h3 { color: var(--ink); } body.page-vc .contact-action-label { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--primary); display: block; margin-bottom: 0.625rem; } body.page-vc .contact-action h3 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--ink-2); line-height: 1.2; } body.page-vc .contact-action-divider { padding-top: 1.5rem; border-top: 1px solid var(--line); } body.page-vc .contact-email { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.0625rem; color: var(--primary); display: inline-flex; align-items: center; gap: 0.625rem; transition: color 0.2s ease; } body.page-vc .contact-email:hover { color: var(--ink-2); } body.page-vc .contact-email:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; } body.page-vc .contact-email .arrow { width: 0.875rem; height: 0.875rem; transition: transform 0.3s ease; } body.page-vc .contact-email:hover .arrow { transform: translateX(4px); } body.page-vc .contact-btn-pitch { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.04em; padding: 1.125rem 2rem; background: var(--primary); color: #FFFFFF; border-radius: 2px; border: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); text-transform: uppercase; } body.page-vc .contact-btn-pitch:hover { background: var(--ink-2); transform: translateY(-2px); box-shadow: 0 0.75rem 2rem rgba(31, 42, 82, 0.32); } body.page-vc .contact-btn-pitch:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; } body.page-vc .contact-btn-pitch .arrow { width: 0.875rem; height: 0.875rem; transition: transform 0.3s ease; } body.page-vc .contact-btn-pitch:hover .arrow { transform: translateX(4px); } /* ================================================================= FOOTER (minimal) ================================================================= */ body.page-vc footer { background: var(--bg); border-top: 1px solid var(--line); padding: 3.5rem 4rem 2rem; transition: background 0.35s ease; } body.page-vc .footer-inner { max-width: 82.5rem; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; } body.page-vc .footer-brand { display: flex; align-items: center; } body.page-vc .footer-logo-img { height: 2.5rem; width: auto; display: block; } body.page-vc .footer-nav { display: flex; gap: 2rem; font-size: 0.8125rem; color: var(--ink-3); flex-wrap: wrap; } body.page-vc .footer-nav a { transition: color 0.2s ease; } body.page-vc .footer-nav a:hover { color: var(--primary); } body.page-vc .footer-bottom { max-width: 82.5rem; margin: 2rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.75rem; color: var(--ink-4); letter-spacing: 0.02em; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } body.page-vc .footer-bottom a { color: var(--ink-4); border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } body.page-vc .footer-bottom a:hover { color: var(--primary); border-bottom-color: var(--primary); } body.page-vc .footer-bottom a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; } /* ================================================================= THEME TOGGLE (botón flotante claro/oscuro) ================================================================= */ body.page-vc .theme-toggle { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 2.875rem; height: 2.875rem; border-radius: 100px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 90; transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; box-shadow: 0 0.375rem 1.125rem rgba(11, 22, 56, 0.10); } html[data-theme="dark"] body.page-vc .theme-toggle { box-shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, 0.32); } body.page-vc .theme-toggle:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-2px); } body.page-vc .theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } body.page-vc .theme-toggle svg { width: 1.125rem; height: 1.125rem; } /* Iconos sol/luna: en light se ve el sol (para indicar "puedes ir a dark"), en dark se ve la luna (para indicar "puedes ir a light"). */ body.page-vc .theme-toggle .icon-sun { display: none; } body.page-vc .theme-toggle .icon-moon { display: inline-block; } html[data-theme="dark"] body.page-vc .theme-toggle .icon-sun { display: inline-block; } html[data-theme="dark"] body.page-vc .theme-toggle .icon-moon { display: none; } /* ================================================================= REVEAL ANIMATIONS ================================================================= */ body.page-vc .reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); } body.page-vc .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { body.page-vc .reveal { opacity: 1; transform: none; transition: none; } } /* ================================================================= RESPONSIVE Breakpoints en px por convención (estabilidad ante zoom de fuente). ================================================================= */ @media (max-width: 1024px) { body.page-vc .header, body.page-vc section, body.page-vc footer { padding-left: 2rem; padding-right: 2rem; } /* Hamburger visible, nav se convierte en overlay full-screen */ body.page-vc .nav-toggle { display: inline-flex; } body.page-vc .nav { display: flex; position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; background: var(--bg); flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; padding: 6rem 2rem 4rem; margin: 0; z-index: 99; transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none; transition: none; overflow-y: auto; } body.page-vc.nav-ready .nav { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, visibility 0s linear 0.4s; } body.page-vc .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; } body.page-vc.nav-ready .nav.is-open { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, visibility 0s linear 0s; } body.page-vc .nav a { font-size: 1.375rem; color: var(--ink-2); padding: 0.5rem 0; } body.page-vc .nav .lang-switch { margin-top: 1rem; } /* En tablet: el clamp ya da el top correcto, solo ajustamos sides y bottom */ body.page-vc .hero { padding-left: 2rem; padding-right: 2rem; padding-bottom: 5rem; } body.page-vc .hero-art { width: 30rem; height: 30rem; left: auto; right: -7.5rem; top: 7.5rem; transform: none; opacity: 0.6; } body.page-vc .hero-inner, body.page-vc .thesis-grid, body.page-vc .how-grid, body.page-vc .team-grid, body.page-vc .contact-inner { grid-template-columns: 1fr; gap: 3rem; } body.page-vc .team-grid { grid-template-columns: repeat(2, 1fr); } body.page-vc .team-grid > .team-card:nth-child(n) { grid-column: auto; } body.page-vc .hero-aside { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 2rem; flex-direction: row; gap: 3rem; flex-wrap: wrap; } body.page-vc .thesis-card { border-right: none; } body.page-vc .how-grid { grid-template-columns: 1fr 1fr; } body.page-vc .footer-bottom { flex-direction: column; align-items: flex-start; } body.page-vc .portfolio-table-wrap { font-size: 0.875rem; } } @media (max-width: 640px) { body.page-vc .header { padding: 0.875rem 1.5rem; } body.page-vc section, body.page-vc footer { padding-left: 1.5rem; padding-right: 1.5rem; } /* En mobile: el clamp ya da el top correcto (7.5rem es el min), solo ajustamos sides y bottom */ body.page-vc .hero { padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 4rem; } body.page-vc .hero-art { display: none; } body.page-vc .how-grid, body.page-vc .team-grid { grid-template-columns: 1fr; } body.page-vc .footer-inner { flex-direction: column; align-items: flex-start; } body.page-vc .footer-nav { flex-wrap: wrap; gap: 1rem; } body.page-vc .contact-action { padding: 2rem 1.5rem; } }