/* ============================================================ tr!x — Domingo Urrutia · Portafolio Sistema visual: Figma vkloDriow2RrKrur7Tv7Ne Tokens semánticos + dark mode reactivo a la luz. ============================================================ */ :root { --color-bg: #ffffff; --color-negro: #000000; /* tinta: texto, líneas, rellenos sólidos */ --color-acento: #e5004a; /* magenta (constante en ambos temas) */ --color-gris: #d9d9d9; /* placeholder de fotos */ --color-hairline: #ececec; /* separadores sutiles */ --color-muted: #595959; /* texto secundario */ --color-faint: #9a9a9a; /* texto terciario */ --on-accent: #ffffff; /* texto sobre magenta */ --fuente-display: 'MuseoModerno', sans-serif; --fuente-cuerpo: 'PPGoshaSans', sans-serif; --line: 1.5px; /* grosor único de línea en TODO el sitio */ --radio: 999px; --nav-h: 104px; --sec: clamp(56px, 8vw, 100px); --px: clamp(20px, 6.25vw, 90px); --dur: 220ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); color-scheme: light; } /* El sitio abre SIEMPRE en claro, sin importar el modo del sistema. El modo oscuro existe solo como elección manual con el botón de tema (data-theme='dark', persistida en localStorage). */ :root[data-theme='dark'] { --color-bg: #0d0d0f; --color-negro: #f4f4f5; --color-gris: #25252a; --color-hairline: #2a2a2f; --color-muted: #b6b6bb; --color-faint: #74747a; /* El magenta de día (#e5004a) sobre el fondo oscuro queda en 4.06:1 y no llega al mínimo AA de 4.5:1 en textos chicos (p. ej. EN/ES activo). Esta variante sube a 5.4:1 contra el fondo, y la tinta sobre magenta pasa a ser oscura para mantener también 5.4:1 en el sentido inverso. */ --color-acento: #ff2e6b; --on-accent: #0d0d0f; color-scheme: dark; } :root[data-theme='light'] { color-scheme: light; } /* ---------- Fuentes locales ---------- WOFF2 primero (pesa ~44% menos que el OTF); el .otf queda como respaldo para navegadores anteriores a 2016. */ @font-face { font-family: 'PPGoshaSans'; src: url('../fonts/PPGoshaSans-Regular.woff2') format('woff2'), url('../fonts/PPGoshaSans-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'PPGoshaSans'; src: url('../fonts/PPGoshaSans-Bold.woff2') format('woff2'), url('../fonts/PPGoshaSans-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Fondo también en : Safari iOS lo usa para pintar la zona de su barra inferior y el rebote del scroll — sin esto puede "adivinar" un color de la página (p. ej. el magenta) y teñir la barra. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--color-bg); } body { background: var(--color-bg); color: var(--color-negro); font-family: var(--fuente-cuerpo); font-size: clamp(1rem, 0.92rem + 0.35vw, 1.18rem); line-height: 1.65; padding-top: var(--nav-h); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--dur), color var(--dur); } /* height:auto es obligatorio junto a los atributos width/height del HTML: sin él, el alto del atributo se toma literal y la imagen sale estirada. Las reglas más específicas (.marquee-card img, .siguiente-thumb…) siguen mandando. */ img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } :focus-visible { outline: var(--line) solid var(--color-acento); outline-offset: 3px; } /* ============================================================ NAVBAR ============================================================ */ .navbar { position: fixed; inset: 0 0 auto 0; z-index: 200; height: var(--nav-h); background: var(--color-bg); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--px); border-bottom: var(--line) solid transparent; transition: border-color var(--dur), box-shadow var(--dur), background var(--dur); } .navbar.scrolled { border-bottom-color: var(--color-hairline); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } .logo-link { display: inline-flex; } .nav-logo { display: block; width: 88px; /* viewBox 625x285 ≈ 2.19 a 40px de alto */ height: 40px; background-color: var(--color-negro); -webkit-mask: url('../assets/logo-full.svg') no-repeat center / contain; mask: url('../assets/logo-full.svg') no-repeat center / contain; transition: background-color var(--dur) var(--ease); } .logo-link:hover .nav-logo { background-color: var(--color-acento); } .nav-right { display: flex; align-items: center; gap: 12px; } .nav-links { display: flex; align-items: center; gap: 12px; } /* ---------- Herramientas del navbar: idioma + tema ---------- */ .nav-tools { display: flex; align-items: center; gap: 10px; } /* Selector de idioma EN / ES (el activo se pinta magenta) */ .lang-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 14px 20px; border: var(--line) solid var(--color-negro); border-radius: var(--radio); background: var(--color-bg); font-family: var(--fuente-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; line-height: 1; cursor: pointer; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .lang-toggle:hover { border-color: var(--color-acento); } .lang-toggle:active { transform: scale(0.96); } .lang-toggle .lang-opt { color: var(--color-faint); transition: color var(--dur); } .lang-toggle .lang-opt.active { color: var(--color-acento); } .lang-toggle .lang-sep { color: var(--color-hairline); } /* Botón de tema: disco día/noche que rota al cambiar */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: var(--line) solid var(--color-negro); border-radius: var(--radio); background: var(--color-bg); cursor: pointer; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .theme-toggle:hover { border-color: var(--color-acento); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle .theme-dot { width: 18px; height: 18px; border-radius: 50%; border: var(--line) solid var(--color-negro); background: linear-gradient(90deg, var(--color-negro) 50%, transparent 50%); transition: transform 0.5s var(--ease), border-color var(--dur), background var(--dur); } .theme-toggle:hover .theme-dot { border-color: var(--color-acento); background: linear-gradient(90deg, var(--color-acento) 50%, transparent 50%); } .theme-toggle.is-dark .theme-dot { transform: rotate(180deg); } /* ---------- Nav pill ---------- */ .btn-nav { display: inline-flex; align-items: center; justify-content: center; padding: 14px 30px; border: var(--line) solid var(--color-negro); border-radius: var(--radio); background: var(--color-negro); color: var(--color-bg); font-family: var(--fuente-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; line-height: 1; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .btn-nav:hover, .btn-nav.active { background: var(--color-acento); border-color: var(--color-acento); color: var(--on-accent); } .btn-nav:active { transform: scale(0.96); } /* ---------- Hamburguesa ---------- */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 6px; background: none; border: none; cursor: pointer; } .hamburger span { display: block; height: 2px; width: 100%; background: var(--color-negro); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur); transform-origin: center; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ BOTONES SECUNDARIOS ============================================================ */ .btn-mas, .btn-enviar { display: inline-flex; align-items: center; justify-content: center; padding: 15px 36px; border-radius: var(--radio); border: var(--line) solid var(--color-acento); background: var(--color-bg); font-family: var(--fuente-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; line-height: 1; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .btn-mas { color: var(--color-negro); } .btn-enviar { color: var(--color-acento); align-self: flex-start; } .btn-mas:hover, .btn-enviar:hover { background: var(--color-acento); color: var(--on-accent); } .btn-mas:active, .btn-enviar:active { transform: scale(0.97); } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: var(--line) solid var(--color-hairline); padding: 30px var(--px); margin-top: var(--sec); } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .footer-mark { display: block; width: 18px; /* viewBox 155x293 ≈ 0.53 a 34px de alto */ height: 34px; background-color: var(--color-negro); -webkit-mask: url('../assets/logo-mark.svg') no-repeat center / contain; mask: url('../assets/logo-mark.svg') no-repeat center / contain; transition: background-color var(--dur) var(--ease); } .logo-link:hover .footer-mark { background-color: var(--color-acento); } .footer-links { display: flex; align-items: center; gap: 26px; font-family: var(--fuente-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; } .footer-links a { transition: color var(--dur); } .footer-links a:hover { color: var(--color-acento); } /* Los logos usan mask con background = --color-negro, que ya se aclara solo en dark mode. El hover los pinta magenta. (sin filter) */ /* ============================================================ UTILIDADES ============================================================ */ .section-label { font-family: var(--fuente-display); font-weight: 700; font-size: clamp(1.25rem, 0.95rem + 1vw, 1.6rem); /* ~24px como el Figma */ letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-acento); margin-bottom: 28px; } .placeholder { background: var(--color-gris); } /* ============================================================ INDEX — ZONA DE TAGS (física / gravedad con Matter.js) ============================================================ */ .tags-zone { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px; padding: 36px var(--px) 12px; position: relative; } .tags-zone.physics-armed, .tags-zone.physics-on { display: block; height: clamp(440px, 58vh, 640px); padding: 0; margin: 20px var(--px) 0; overflow: hidden; user-select: none; /* pan-y: deslizar en vertical SIEMPRE scrollea la página; las pills se arrastran en horizontal (y ruedan con el giroscopio en el celu). */ touch-action: pan-y; } /* Mientras la intro corre, la zona ya reserva su alto pero las pills siguen ocultas: evita verlas en su layout estático antes de caer (y el salto de layout). */ .tags-zone.physics-armed .tag-pill { opacity: 0; } .tag-pill { display: inline-flex; align-items: center; padding: 16px 38px; border: var(--line) solid var(--color-acento); /* borde magenta (texto se queda en tinta) */ border-radius: var(--radio); background: var(--color-bg); font-family: var(--fuente-cuerpo); font-size: clamp(1.2rem, 0.75rem + 2vw, 2.5rem); white-space: nowrap; } .tags-zone.physics-on .tag-pill { position: absolute; top: 0; left: 0; cursor: grab; will-change: transform; touch-action: pan-y; } .tags-zone.physics-on .tag-pill.grabbing { cursor: grabbing; z-index: 5; } /* ============================================================ INDEX — TÍTULO HERO (centrado, TRIXIE a pantalla completa) ============================================================ */ .hero-title-section { padding: clamp(6px, 1.5vw, 22px) clamp(12px, 2.5vw, 40px) var(--sec); text-align: center; } .hero-title { font-family: var(--fuente-display); letter-spacing: -0.03em; } .hero-title .line1 { display: block; font-weight: 400; /* normal, NO bold — contrasta con TRIXIE */ font-size: clamp(38px, 10.5vw, 220px); line-height: 1; color: var(--color-negro); margin-bottom: clamp(8px, 1.4vw, 26px); /* pequeño espacio entre líneas */ } .hero-title .line2 { display: block; font-weight: 900; /* bold */ font-size: clamp(66px, 23.6vw, 520px); line-height: 0.85; color: var(--color-acento); text-transform: uppercase; } /* ============================================================ MARQUEE — carrusel auto con bordes difuminados (MIS TRABAJOS en index + categorías en proyectos) ============================================================ */ .marquee { position: relative; overflow: hidden; cursor: pointer; padding: 36px 0; /* aire para que la tarjeta crezca y "salga" al hover */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%); } .marquee-track { display: flex; gap: 24px; width: max-content; will-change: transform; } .marquee-item { flex: 0 0 auto; width: clamp(280px, 30vw, 440px); color: var(--color-negro); position: relative; } .marquee-card { display: block; width: 100%; aspect-ratio: 16 / 10; background: var(--color-gris); border-radius: 12px; overflow: hidden; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); } .marquee-card img { width: 100%; height: 100%; object-fit: cover; } /* Al posicionarse sobre el carrusel, todas las tarjetas crecen un poco (cue de clic) */ .marquee:hover .marquee-card { transform: scale(1.02); } /* La tarjeta bajo el cursor crece más y "sale" de la grilla */ .marquee-item:hover { z-index: 4; } .marquee-item:hover .marquee-card { transform: scale(1.13) translateY(-3%); box-shadow: 0 26px 64px rgba(0, 0, 0, 0.26); } /* Index: MIS TRABAJOS a sangre completa para ver las fotos salir por los lados */ .works-section { margin-bottom: var(--sec); } .works-section .section-label { padding: 0 var(--px); } .works-marquee .marquee-item { width: clamp(300px, 34vw, 520px); } /* ============================================================ INDEX — BIO "UN POQUITO SOBRE MÍ" ============================================================ */ .bio-section { padding: 0 var(--px); margin-bottom: var(--sec); } .bio-grid { display: grid; grid-template-columns: 0.9fr 1.9fr auto; gap: clamp(28px, 4vw, 56px); align-items: start; } .bio-photo { aspect-ratio: 3 / 4; background: var(--color-gris); border-radius: 12px; } .bio-text { line-height: 1.72; } .bio-cta { padding-top: 6px; } /* ============================================================ PROYECTOS ============================================================ */ .proyectos-page { padding-top: var(--sec); } .cat-section { padding: 0 var(--px); margin-bottom: clamp(56px, 9vw, 112px); } .cat-row { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; } .cat-row.txt-left { grid-template-columns: 0.62fr 1fr; } .cat-row.txt-right { grid-template-columns: 1fr 0.62fr; } .cat-row.txt-right .cat-imgs { order: -1; } .cat-text { display: flex; flex-direction: column; gap: 16px; } .cat-title { font-family: var(--fuente-display); font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem); line-height: 1.05; text-transform: uppercase; color: var(--color-acento); } .cat-desc { line-height: 1.7; color: var(--color-muted); max-width: 46ch; } /* La columna de imágenes es un marquee (mismo lenguaje que MIS TRABAJOS) */ .cat-imgs .marquee-item { width: clamp(240px, 22vw, 340px); } /* ============================================================ SOBRE MÍ ============================================================ */ .sobre-page { padding-top: var(--sec); } .sobre-top { padding: 0 var(--px); margin-bottom: var(--sec); } .sobre-grid { display: grid; grid-template-columns: 0.85fr 1.3fr 1.3fr; grid-template-areas: "photo title ." "photo bio cont"; column-gap: clamp(28px, 4vw, 56px); align-items: start; } .sobre-photo { grid-area: photo; aspect-ratio: 2 / 3; background: var(--color-gris); border-radius: 12px; filter: grayscale(1); } .sobre-titulo { grid-area: title; font-family: var(--fuente-display); font-weight: 900; font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem); line-height: 1; text-transform: uppercase; color: var(--color-acento); margin-bottom: 24px; } .sobre-bio { grid-area: bio; line-height: 1.72; } .sobre-col-cont { grid-area: cont; line-height: 1.72; } .sobre-bio p + p, .sobre-col-cont p + p { margin-top: 16px; } .cv-section { padding: var(--sec) var(--px) 0; border-top: var(--line) solid var(--color-hairline); margin-bottom: var(--sec); } .cv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); } .cv-col-title { font-family: var(--fuente-display); font-weight: 900; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-acento); margin-bottom: 28px; } .cv-item { margin-bottom: 24px; padding-bottom: 24px; border-bottom: var(--line) solid var(--color-hairline); } .cv-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .cv-item-name { font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.4; margin-bottom: 6px; } .cv-item-inst { font-size: 0.86rem; color: var(--color-muted); line-height: 1.45; } .cv-item-meta { font-size: 0.8rem; color: var(--color-faint); margin-top: 5px; } /* ============================================================ CONTACTO ============================================================ */ .contacto-page { padding-top: var(--sec); } .contacto-section { padding: 0 var(--px); } .contacto-grid { display: grid; grid-template-columns: 0.85fr 1.25fr; gap: clamp(40px, 6vw, 90px); align-items: start; } .contacto-titulo { font-family: var(--fuente-display); font-weight: 900; font-size: clamp(2.6rem, 1.6rem + 3vw, 3.6rem); line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; color: var(--color-acento); margin-bottom: 28px; } .contacto-desc { line-height: 1.72; max-width: 40ch; } .contact-form { display: flex; flex-direction: column; gap: 16px; } .form-field { width: 100%; padding: 18px 30px; border: var(--line) solid var(--color-negro); border-radius: var(--radio); background: var(--color-bg); font-family: var(--fuente-display); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-negro); outline: none; appearance: none; -webkit-appearance: none; transition: border-color var(--dur), background var(--dur), color var(--dur); } .form-field::placeholder { color: var(--color-negro); opacity: 1; } .form-field:focus { border-color: var(--color-acento); } textarea.form-field { border-radius: 28px; resize: none; min-height: 104px; line-height: 1.5; } /* ============================================================ PROYECTO — template ============================================================ */ .proyecto-page { padding-top: var(--sec); } .proyecto-header { padding: 0 var(--px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 70px); margin-bottom: var(--sec); align-items: start; } .proyecto-brand { font-family: var(--fuente-display); font-weight: 900; font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; color: var(--color-acento); /* título en magenta (lenguaje de títulos) */ margin-bottom: 12px; } .proyecto-cliente { font-size: 1rem; color: var(--color-muted); } .proy-sobre-label { font-family: var(--fuente-display); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; } .proy-desc { line-height: 1.72; color: var(--color-muted); } .proyecto-hero { margin: 0 var(--px); height: clamp(260px, 34vw, 493px); background: var(--color-gris); border-radius: 14px; overflow: hidden; cursor: pointer; } /* Con imagen: foto completa, sin recortar (respeta tu proporción). La regla .has-img es el MISMO efecto puesto por JS: fallback para navegadores sin :has() — van separadas a propósito, porque un selector no soportado invalidaría la lista completa. */ .proyecto-hero:has(img) { height: auto; background: transparent; } .proyecto-hero.has-img { height: auto; background: transparent; } .proyecto-hero img { width: 100%; height: auto; display: block; } .proyecto-meta { padding: 34px var(--px) 0; margin: 28px 0 var(--sec); border-top: var(--line) solid var(--color-hairline); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 70px); } .meta-label { font-family: var(--fuente-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; } .meta-value { color: var(--color-muted); line-height: 1.6; } .galeria { padding: 0 var(--px); display: flex; flex-direction: column; gap: 22px; } .gal-full { width: 100%; height: clamp(260px, 34vw, 493px); background: var(--color-gris); border-radius: 14px; overflow: hidden; cursor: pointer; transition: opacity var(--dur); } .gal-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .gal-item { height: clamp(240px, 30vw, 493px); background: var(--color-gris); border-radius: 14px; overflow: hidden; cursor: pointer; transition: opacity var(--dur); } .gal-full:hover, .gal-item:hover { opacity: 0.92; } /* Con imagen: sin recorte, altura natural (+ fallback .has-img sin :has) */ .gal-full:has(img), .gal-item:has(img) { height: auto; background: transparent; } .gal-full.has-img, .gal-item.has-img { height: auto; background: transparent; } .gal-full img, .gal-item img { width: 100%; height: auto; display: block; } /* ============================================================ LIGHTBOX ============================================================ */ .lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(0, 0, 0, 0.9); display: none; align-items: center; justify-content: center; padding: 40px; } .lightbox.active { display: flex; } .lightbox-stage { max-width: 88vw; max-height: 84vh; border-radius: 10px; overflow: hidden; } .lightbox-stage img { max-width: 88vw; max-height: 84vh; object-fit: contain; display: block; } .lightbox-stage.is-placeholder { width: min(80vw, 1100px); height: min(70vh, 620px); background: var(--color-gris); display: flex; align-items: center; justify-content: center; font-family: var(--fuente-display); font-weight: 700; color: var(--color-bg); font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; } .lb-btn { position: fixed; background: rgba(255, 255, 255, 0.12); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--dur); } .lb-btn:hover { background: rgba(255, 255, 255, 0.24); } .lb-close { top: 22px; right: 28px; width: 50px; height: 50px; border-radius: 50%; font-size: 1.6rem; } .lb-nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; font-size: 1.4rem; } .lb-prev { left: 24px; } .lb-next { right: 24px; } /* ============================================================ REVEAL al hacer scroll — seguro: solo oculta si el JS activa `.reveal-ready`; sin JS el contenido se ve normal. ============================================================ */ html.reveal-ready .reveal-item { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } html.reveal-ready .reveal-item.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.reveal-ready .reveal-item { opacity: 1; transform: none; transition: none; } } /* ============================================================ INTRO LOADER — DrawSVG del logo + Flip al navbar (solo index) Se muestra una vez por sesión; respeta reduced-motion. El JS (intro.js) controla todo el estado visual del trazo. ============================================================ */ #intro-loader { position: fixed; inset: 0; z-index: 1000; display: none; /* oculto salvo durante la intro */ align-items: center; justify-content: center; background: var(--color-bg); padding: var(--px); } html.intro-playing #intro-loader { display: flex; } html.intro-playing .nav-logo { opacity: 0; } /* el logo real espera el aterrizaje */ html.intro-playing body { overflow: hidden; } /* sin scroll mientras corre */ #intro-logo { width: min(72vw, 760px); height: auto; overflow: visible; /* el contorno no se recorta en los bordes */ } /* Estado previo al JS: invisible (evita un destello del logo antes del trazo). */ #intro-logo .draw { fill: transparent; } /* ============================================================ RESPONSIVE · 768px ============================================================ */ @media (max-width: 768px) { :root { --nav-h: 84px; } #intro-logo { width: 82vw; } .hamburger { display: flex; } .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 10px; padding: 18px var(--px) 26px; background: var(--color-bg); border-bottom: var(--line) solid var(--color-hairline); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); } .nav-links.open { display: flex; } .nav-links .btn-nav { width: 100%; padding: 16px; } /* Idioma + tema quedan siempre a la vista, junto a la hamburguesa */ .nav-right { gap: 8px; } .nav-tools { gap: 8px; } .lang-toggle { padding: 12px 14px; font-size: 0.76rem; } .theme-toggle { width: 42px; height: 42px; } .tag-pill { font-size: clamp(1.05rem, 4.2vw, 1.55rem); padding: 13px 26px; } /* Zona de pills más compacta en el celu: menos pantalla que cruzar para llegar al contenido. */ .tags-zone.physics-armed, .tags-zone.physics-on { height: clamp(300px, 42vh, 420px); } .bio-grid { grid-template-columns: 1fr; } .bio-photo { max-width: 320px; } .cat-row.txt-left, .cat-row.txt-right { grid-template-columns: 1fr; } .cat-row.txt-right .cat-imgs { order: 0; } .cat-imgs .marquee-item { width: clamp(220px, 60vw, 300px); } .sobre-grid { grid-template-columns: 1fr; grid-template-areas: "photo" "title" "bio" "cont"; /* En una columna el column-gap no separa nada: el aire vertical entre foto, título y textos lo pone el row-gap. */ row-gap: 28px; } .sobre-grid .sobre-titulo { margin-bottom: 0; } .sobre-photo { max-width: 320px; } .cv-grid { grid-template-columns: 1fr; } .contacto-grid { grid-template-columns: 1fr; } .proyecto-header { grid-template-columns: 1fr; } .proyecto-meta { grid-template-columns: 1fr; gap: 28px; } .gal-duo { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; align-items: flex-start; gap: 18px; } .footer-links { gap: 18px; flex-wrap: wrap; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .marquee { overflow-x: auto; } .marquee-item:hover .marquee-card { transform: none; } } /* ============================================================ SALTAR AL CONTENIDO Primero en el orden de tabulación; invisible hasta recibir foco, para no obligar a pasar por todo el navbar en cada página. ============================================================ */ .skip-link { position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 300; padding: 14px 28px; border-radius: 0 0 var(--radio) var(--radio); background: var(--color-acento); color: var(--on-accent); font-family: var(--fuente-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; transition: transform var(--dur) var(--ease); } .skip-link:focus-visible { transform: translate(-50%, 0); outline-offset: -6px; } /* ============================================================ SIGUIENTE PROYECTO + INVITACIÓN A ESCRIBIR Cierra cada caso: antes el único camino de salida era el botón atrás del navegador. ============================================================ */ .proyecto-siguiente { margin-top: var(--sec); padding: clamp(34px, 4vw, 52px) var(--px) 0; border-top: var(--line) solid var(--color-hairline); display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(32px, 5vw, 70px); align-items: center; } .siguiente-link { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); min-width: 0; } .siguiente-texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .siguiente-label { font-family: var(--fuente-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); } .siguiente-nombre { font-family: var(--fuente-display); font-weight: 900; font-size: clamp(1.6rem, 1rem + 2.2vw, 2.9rem); line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; transition: color var(--dur) var(--ease); } .siguiente-thumb { flex: 0 0 auto; width: clamp(96px, 13vw, 168px); height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; transition: transform var(--dur) var(--ease); } .siguiente-link:hover .siguiente-nombre { color: var(--color-acento); } .siguiente-link:hover .siguiente-thumb { transform: scale(1.05); } .siguiente-link:focus-visible { outline-offset: 6px; border-radius: 18px; } .siguiente-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .siguiente-pregunta { font-family: var(--fuente-display); font-weight: 700; font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.4rem); line-height: 1.25; text-wrap: balance; } /* ============================================================ ETIQUETAS DEL FORMULARIO El placeholder desaparecía al escribir y dejaba el campo sin referencia; la etiqueta queda siempre visible sobre cada campo. ============================================================ */ .field { display: flex; flex-direction: column; gap: 8px; } .field-label { padding-left: 30px; /* alineada con el texto dentro del campo */ font-family: var(--fuente-display); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); } .field:focus-within .field-label { color: var(--color-acento); } @media (max-width: 768px) { .proyecto-siguiente { grid-template-columns: 1fr; gap: 32px; align-items: start; } .siguiente-thumb { width: clamp(84px, 24vw, 120px); } } /* ============================================================ 404 ============================================================ */ .error-page { min-height: calc(100vh - var(--nav-h) - 160px); display: grid; place-items: center; padding: var(--sec) var(--px); } .error-inner { max-width: 46ch; text-align: center; } .error-codigo { font-family: var(--fuente-display); font-weight: 900; font-size: clamp(5rem, 3rem + 14vw, 13rem); line-height: 0.82; letter-spacing: -0.04em; color: var(--color-acento); margin-bottom: 18px; } .error-titulo { font-family: var(--fuente-display); font-weight: 800; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; margin-bottom: 14px; } .error-texto { color: var(--color-muted); margin-bottom: 34px; text-wrap: pretty; } .error-acciones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } /* ============================================================ VIUDAS TIPOGRÁFICAS ------------------------------------------------------------ `pretty` hace que el navegador use un algoritmo de salto de línea más caro pero más cuidado: revisa las últimas líneas del párrafo y las reajusta para que no quede una palabra sola al final. No cambia ni una palabra del texto, así que sigue valiendo igual al alternar ES/EN. Firefox todavía no lo implementa y maqueta como siempre: no rompe nada. ============================================================ */ p { text-wrap: pretty; } /* Los nombres del CV van en una columna angosta: ahí `pretty` no tiene margen para reacomodar y aun así dejaba sola la última palabra («…por emprendimiento»). Al ser rótulos de dos o tres líneas, `balance` sí puede repartirlas parejas y la elimina. */ .cv-item-name { text-wrap: balance; }