/* ========================================= Reset ========================================= */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; padding: 0; } ul { list-style: none; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; } /* ========================================= Tokens ========================================= */ /* :root = tema CLARO por defecto. El tema OSCURO se activa con [data-theme="dark"] en . --bg-rgb existe para poder usar el color de fondo con alpha en gradientes (rgba(var(--bg-rgb), 0.45)), que también flippean. */ :root { --bg: #F2EEE3; --bg-deep: #E8E4D7; --bg-rgb: 242, 238, 227; --ink: #0E0E10; --ink-hover: #1d1d20; --ink-soft: #3A3A3D; --muted: #8B8B8F; --line: rgba(14, 14, 16, 0.10); --accent: #2C3FFF; --green: #16B055; --radius-pill: 999px; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-serif: 'Playfair Display', 'Times New Roman', serif; } /* Tema OSCURO — sobrescribe sólo los tokens cromáticos. Tipografía, radios y acentos se mantienen. */ :root[data-theme="dark"] { --bg: #0E0E10; --bg-deep: #18181B; --bg-rgb: 14, 14, 16; --ink: #F2EEE3; --ink-hover: #E0DCD1; --ink-soft: #C5C5C9; --muted: #6E6E72; --line: rgba(242, 238, 227, 0.12); --accent: #5A6BFF; } /* Transición global suave al alternar tema. Sólo afecta a propiedades cromáticas para no degradar otras animaciones. */ html, body, .topbar, .site-header::after, .modal__panel, .contact-link, .contact-link-icon, .pill, .servicio-row, .proyecto-row, .btn-primary, .btn-submit { transition: background-color .35s ease, color .35s ease, border-color .35s ease; } html, body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { padding-top: 62px; } /* ========================================= Fixed top navigation ========================================= */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; /* Grid 1fr auto 1fr: brand y actions ocupan columnas iguales, el nav queda en la columna central -> centrado real respecto al viewport. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 16px 40px; background: var(--bg); border-bottom: 1px solid var(--line); } /* ========================================= Site header ========================================= */ .site-header { position: relative; overflow: hidden; } .site-header-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.9; pointer-events: none; } .site-header::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(var(--bg-rgb), 0.45) 0%, rgba(var(--bg-rgb), 0) 18%, rgba(var(--bg-rgb), 0) 82%, rgba(var(--bg-rgb), 0.45) 100% ); z-index: 0; pointer-events: none; } .hero { position: relative; z-index: 1; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; color: var(--ink); } .brand-dot { width: 9px; height: 9px; background: var(--accent); border-radius: 50%; } .topnav { display: flex; gap: 36px; } .topnav a { font-size: 13.5px; font-weight: 500; color: var(--ink); transition: opacity 0.2s ease; } .topnav a:hover { opacity: 0.55; } /* ========================================= Menú hamburguesa (móvil) ---------------------------------------- El botón está oculto en escritorio y solo aparece en ≤900px (ver media query más abajo). Las 3 barras se animan a una "X" cuando el botón tiene aria-expanded="true". El área táctil es de 44x44px (recomendación de accesibilidad). ========================================= */ .nav-toggle { display: none; /* visible solo en ≤900px */ align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); flex-shrink: 0; } .nav-toggle__bars { position: relative; display: block; width: 20px; height: 14px; } .nav-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s ease, opacity .2s ease, top .3s ease; } .nav-toggle__bars span:nth-child(1) { top: 0; } .nav-toggle__bars span:nth-child(2) { top: 6px; } .nav-toggle__bars span:nth-child(3) { top: 12px; } /* Estado abierto: barra superior e inferior forman la "X", la del medio se desvanece. */ .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); } /* Fondo oscuro detrás del drawer. Oculto vía [hidden] cuando el menú está cerrado; el JS quita [hidden] y luego togglea .is-visible. */ .nav-backdrop { position: fixed; inset: 0; z-index: 90; /* debajo del topbar (100) y del drawer (110) */ background: rgba(14, 14, 16, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s ease; } .nav-backdrop[hidden] { display: none; } .nav-backdrop.is-visible { opacity: 1; } @media (prefers-reduced-motion: reduce) { .nav-toggle__bars span, .nav-backdrop { transition: none; } } /* Cluster derecho del topbar: agrupa theme-toggle + lang-toggle y se alinea al borde derecho de su columna del grid. */ .topbar__actions { display: inline-flex; align-items: center; gap: 12px; justify-self: end; } .lang-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 12px; letter-spacing: 0.04em; } .lang-btn { font-size: 12px; font-weight: 500; color: var(--muted); padding: 0; letter-spacing: 0.04em; transition: color 0.2s ease; } .lang-btn.is-active { color: var(--ink); font-weight: 600; } .lang-btn:hover { color: var(--ink); } .lang-sep { color: var(--muted); } /* ---- Hero ---- */ .hero { position: relative; /* Bottom reducido para acercar el puente al final del hero. */ padding: 44px 40px 40px; } .hero-meta { display: flex; justify-content: space-between; gap: 24px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); text-shadow: 0 1px 2px rgba(var(--bg-rgb), 0.85); padding-bottom: 56px; } .hero-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(60px, 11vw, 170px); line-height: 0.95; letter-spacing: -0.02em; margin-bottom: 88px; } .hero-title-line { display: block; white-space: nowrap; } .hero-title-accent { font-style: italic; font-weight: 400; color: var(--accent); } .hero-bottom { display: flex; justify-content: flex-end; align-items: flex-end; gap: 40px; flex-wrap: wrap; } .hero-cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } /* Status pill */ .status-pill { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); } .status-pulse { position: relative; width: 8px; height: 8px; background: var(--green); border-radius: 50%; } .status-pulse::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: var(--green); opacity: 0.3; animation: pulse 1.8s ease-out infinite; } @keyframes pulse { 0% { transform: scale(0.7); opacity: 0.4; } 100% { transform: scale(2.1); opacity: 0; } } .status-label { font-weight: 700; color: var(--ink); letter-spacing: 0.06em; } /* CTA button */ .btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; background: var(--ink); color: #fff; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; transition: transform 0.2s ease, background 0.2s ease; } .btn-primary:hover { background: var(--ink-hover); transform: translateY(-1px); } .btn-primary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Vertical text */ .hero-vertical { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); writing-mode: vertical-rl; font-size: 10px; letter-spacing: 0.45em; text-transform: uppercase; color: var(--muted); } /* ========================================= Page sections — base común ========================================= */ main { display: block; } main > section { padding-block: clamp(80px, 11vw, 160px); padding-inline: clamp(20px, 4vw, 60px); max-width: 1440px; margin: 0 auto; position: relative; } main > section + section { border-top: 1px solid var(--line); } /* La primera sección de
recibe menos padding superior: el bloque .bridge ya ocupa parte del espacio entre hero y "Sobre nosotros". */ main > section:first-of-type { padding-block-start: clamp(32px, 4.5vw, 72px); } /* ========================================= Bridge — puente editorial entre hero y "Sobre nosotros" ---------------------------------------- Pausa minimal: sin caja, sin borde, sin íconos. Tres niveles tipográficos: eyebrow / servicios / ancla en serif. ========================================= */ .bridge { max-width: 1440px; margin: 0 auto; padding-block: clamp(36px, 4.5vw, 64px); padding-inline: clamp(20px, 4vw, 60px); text-align: center; } .bridge__eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; } .bridge__services { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 auto; font-family: var(--font-sans); font-size: clamp(15px, 1.4vw, 18px); font-weight: 400; color: var(--ink); line-height: 1.6; } .bridge__services li { position: relative; padding: 0 18px; } /* Punto medio entre items (no después del último). En mobile, cuando pase a columna, lo ocultamos. */ .bridge__services li:not(:last-child)::after { content: "·"; position: absolute; right: -3px; top: 50%; transform: translateY(-55%); color: var(--muted); font-weight: 700; } /* ---- Bridge variante "quote" (entre Servicios y Proyectos) ---- Sin eyebrow ni lista: solo una frase en serif itálica + flecha guía. */ .bridge--quote { padding-block: clamp(16px, 2vw, 32px); } .bridge__quote { font-family: var(--font-serif); font-style: italic; font-weight: 400; /* 44px → 56px: presencia editorial real. */ font-size: clamp(2.75rem, 4.5vw, 3.5rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-soft); max-width: 26ch; margin: 0 auto; } /* Flecha guía hacia "Trabajos recientes". Color violeta (var(--accent)), centrada, con bounce sutil. */ .bridge__arrow { display: flex; justify-content: center; margin-top: clamp(32px, 3.5vw, 40px); color: var(--accent); animation: bridge-arrow-bounce 1.5s ease-in-out infinite; } .bridge__arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @keyframes bridge-arrow-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } /* Respetar a usuarios que prefieren menos movimiento. */ @media (prefers-reduced-motion: reduce) { .bridge__arrow { animation: none; } } /* Recorta el aire entre "Proceso" y "Proyectos" para acomodar el bridge sin agrandar el gap total. Reducción ~40-50% respecto al default clamp(80px, 11vw, 160px) que viene de "main > section". */ #proceso { padding-block-end: clamp(24px, 3vw, 48px); } #proyectos { padding-block-start: clamp(24px, 3vw, 48px); } /* Recorte suave entre "Sobre nosotros" (stats) y "Servicios". Reducción ~30% respecto al default — solo lo justo para apretar el ritmo. */ #sobre-mi { padding-block-end: clamp(56px, 7.5vw, 110px); } #servicios { padding-block-start: clamp(56px, 7.5vw, 110px); } /* Recorte suave entre "Servicios" y "Proceso" (sin bridge entremedio). */ #servicios { padding-block-end: clamp(56px, 7.5vw, 110px); } #proceso { padding-block-start: clamp(56px, 7.5vw, 110px); } /* Recorte entre "Proyectos" y "Contacto" (~40% respecto al default). */ #proyectos { padding-block-end: clamp(48px, 6vw, 96px); } #contacto { padding-block-start: clamp(48px, 6vw, 96px); } /* Etiquetas de sección */ .section-meta, .seccion-label, .left .label { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 32px; } /* H2 de sección — serif grande, similar al hero pero más contenido */ main > section h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 56px; max-width: 22ch; } /* ========================================= Sobre mí ========================================= */ .sobre-mi { display: grid; /* ~40 / 60: foto a la izquierda, contenido a la derecha. */ grid-template-columns: 2fr 3fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .sobre-columna-der h2 { margin-bottom: 40px; } .sobre-columna-der p { /* 20px (mínimo) → 22px (máximo). */ font-size: clamp(1.25rem, 1.5vw, 1.375rem); line-height: 1.7; color: var(--ink-soft); max-width: 60ch; } /* ---- Foto editorial ---- */ .sobre-foto { position: relative; width: 100%; aspect-ratio: 4 / 5; /* retrato editorial */ border-radius: 10px; overflow: hidden; background: var(--bg-deep); /* placeholder mientras carga */ border: 1px solid var(--line); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.32), 0 14px 28px -16px rgba(0, 0, 0, 0.18); transition: box-shadow .35s ease, transform .5s cubic-bezier(.22, 1, .36, 1); } .sobre-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Overlay sutil: degradado oscuro en la base de la foto. Suma profundidad sin oscurecer la imagen, integra con la paleta. */ .sobre-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.18) 100% ); pointer-events: none; } /* En tema oscuro la sombra se intensifica para “despegar” el bloque. */ [data-theme="dark"] .sobre-foto { box-shadow: 0 32px 70px -28px rgba(0, 0, 0, 0.65), 0 14px 28px -16px rgba(0, 0, 0, 0.45); } [data-theme="dark"] .sobre-foto::after { background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.28) 100% ); } .stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(56px, 8vw, 112px); padding-top: 56px; border-top: 1px solid var(--line); } .stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; position: relative; } .stat:not(:last-child)::after { content: ''; position: absolute; right: -1.5vw; top: 8px; bottom: 8px; width: 1px; background: var(--line); } .stat-numero { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 0.9; color: var(--ink); } .stat-label { font-size: 13px; color: var(--muted); letter-spacing: 0.02em; } /* ========================================= Servicios + Proyectos (mismo patrón de fila) ========================================= */ .servicios h2, .proyectos h2 { margin-bottom: 64px; } .servicios-list, .proyectos-list { border-top: 1px solid var(--line); } /* Filas (servicios usa