(horizontal), no en la página — así que html/body ya no scrollean */ overflow: hidden; /* fondo de respaldo oscuro: si el navegador llega a "soltar" un frame del .sky fijo durante el snap rápido entre secciones, que se vea negro y no el blanco por defecto del navegador (el "flashazo"). Solo en — no en — para no interferir con el apilamiento del fondo animado (.sky) que va por encima. */ background: var(--night); } body { margin: 0; height: 100%; font-family: var(--font-body); color: var(--ink); overflow: hidden; } main { display: flex; flex-direction: row; width: 100vw; height: 100vh; height: 100svh; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* ocultamos la barra nativa: la navegación va por los puntos */ scrollbar-width: none; } main::-webkit-scrollbar { display: none; } @media (prefers-reduced-motion: reduce) { main { scroll-behavior: auto; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } img { max-width: 100%; display: block; } /* ========================================================== Fondo animado — ciclo de día ========================================================== */ .sky { position: fixed; inset: 0; z-index: -1; background: var(--paper); transition: background 1.1s ease; } /* cada sección es una variación de negro con un leve tinte rosado que se intensifica levemente hacia el final del scroll. */ .sky[data-scene="0"] { background: var(--paper); } .sky[data-scene="1"] { background: linear-gradient(160deg, var(--paper), var(--paper-dim)); } .sky[data-scene="2"] { background: linear-gradient(160deg, var(--paper-dim), #1c1420); } .sky[data-scene="3"] { background: linear-gradient(160deg, #1c1420, #170b18); } .sky[data-scene="4"] { background: linear-gradient(160deg, #170b18, #100a14); } .sky[data-scene="5"] { background: var(--night); } /* resplandor rosado sutil y fijo, para dar profundidad al negro */ .sky::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 45% at 15% 15%, rgba(255,110,199,0.10), transparent), radial-gradient(50% 40% at 90% 80%, rgba(198,49,140,0.12), transparent); pointer-events: none; } /* ========================================================== Estrellas — tres capas con distinta profundidad, se desplazan (parallax) vía JS a medida que se hace scroll. ========================================================== */ .stars-layer { position: absolute; inset: -10% -10%; background-repeat: repeat; pointer-events: none; will-change: transform; } .stars--far { background-image: radial-gradient(1.18px 1.18px at 14.9% 83.4%, #ffffff, transparent), radial-gradient(1.04px 1.04px at 13.3% 75.1%, #ffffff, transparent), radial-gradient(0.81px 0.81px at 77.7% 11.0%, #ffffff, transparent), radial-gradient(0.8px 0.8px at 43.5% 75.2%, #ffffff, transparent), radial-gradient(1.1px 1.1px at 27.6% 79.0%, #ffffff, transparent), radial-gradient(0.81px 0.81px at 88.5% 4.9%, #ffe9f4, transparent), radial-gradient(1.14px 1.14px at 2.9% 86.6%, #ffffff, transparent), radial-gradient(1.18px 1.18px at 71.7% 52.7%, #ffffff, transparent), radial-gradient(1.14px 1.14px at 55.1% 35.2%, #ffffff, transparent), radial-gradient(1.01px 1.01px at 93.4% 90.9%, #ffe9f4, transparent), radial-gradient(1.11px 1.11px at 90.5% 11.6%, #ffe9f4, transparent), radial-gradient(0.97px 0.97px at 84.6% 13.6%, #ffe9f4, transparent), radial-gradient(1.28px 1.28px at 95.4% 50.1%, #ffe9f4, transparent), radial-gradient(0.95px 0.95px at 81.7% 66.3%, #ffe9f4, transparent); background-size: 480px 480px; opacity: 0.55; animation: twinkle 6s ease-in-out infinite; } .stars--mid { background-image: radial-gradient(1.23px 1.23px at 93.8% 93.0%, #ffffff, transparent), radial-gradient(1.69px 1.69px at 36.7% 18.2%, #ffd3ec, transparent), radial-gradient(1.22px 1.22px at 26.2% 22.4%, #ff9fd4, transparent), radial-gradient(1.44px 1.44px at 17.2% 43.3%, #ff9fd4, transparent), radial-gradient(1.42px 1.42px at 84.6% 50.9%, #ffd3ec, transparent), radial-gradient(1.72px 1.72px at 50.2% 88.5%, #ffd3ec, transparent), radial-gradient(1.43px 1.43px at 46.6% 32.6%, #ff9fd4, transparent), radial-gradient(1.34px 1.34px at 17.8% 19.0%, #ffffff, transparent), radial-gradient(1.51px 1.51px at 33.2% 15.1%, #ff9fd4, transparent), radial-gradient(1.74px 1.74px at 66.8% 19.5%, #ffd3ec, transparent), radial-gradient(1.66px 1.66px at 72.5% 89.0%, #ff9fd4, transparent), radial-gradient(1.78px 1.78px at 36.0% 96.2%, #ffffff, transparent), radial-gradient(1.64px 1.64px at 93.7% 40.4%, #ff9fd4, transparent), radial-gradient(1.75px 1.75px at 52.9% 49.0%, #ff9fd4, transparent); background-size: 620px 620px; opacity: 0.7; animation: twinkle 8s ease-in-out infinite 1.2s; } .stars--near { background-image: radial-gradient(1.97px 1.97px at 24.8% 54.2%, #ffb6e0, transparent), radial-gradient(2.21px 2.21px at 47.5% 57.8%, #ff6ec7, transparent), radial-gradient(2.6px 2.6px at 26.9% 24.5%, #ff6ec7, transparent), radial-gradient(2.0px 2.0px at 53.9% 54.8%, #ffffff, transparent), radial-gradient(2.53px 2.53px at 24.3% 16.6%, #ff6ec7, transparent), radial-gradient(1.66px 1.66px at 73.2% 66.5%, #ffb6e0, transparent), radial-gradient(2.42px 2.42px at 6.1% 76.9%, #ff6ec7, transparent), radial-gradient(2.48px 2.48px at 47.4% 71.0%, #ffb6e0, transparent), radial-gradient(2.33px 2.33px at 77.7% 43.0%, #ffb6e0, transparent), radial-gradient(2.48px 2.48px at 44.7% 91.8%, #ffffff, transparent); background-size: 760px 760px; opacity: 0.9; animation: twinkle 5s ease-in-out infinite 0.5s; } @keyframes twinkle { 0%, 100% { opacity: var(--twinkle-base, 0.7); } 50% { opacity: calc(var(--twinkle-base, 0.7) * 0.55); } } /* ========================================================== Secciones / panels ========================================================== */ .panel { flex: 0 0 100vw; width: 100vw; height: 100vh; height: 100svh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; padding: 6vh 5.5vw; perspective: 1400px; /* red de seguridad: si algún contenido (ej. las filas al expandirse) no cupiera en 100vh, esta sección scrollea sola en vertical sin romper el paginado horizontal de

*/ overflow-y: auto; scrollbar-width: none; /* la opacidad la controla el JS cuadro a cuadro según el scroll — sin transition acá para que siga el dedo/rueda en tiempo real sin arrastre extra */ will-change: opacity; } .panel::-webkit-scrollbar { display: none; } /* "mi camino" tiene filas que se expanden hacia abajo al hover: la ancla arriba (en vez de centrarla) para que ese despliegue tenga espacio dentro de la pantalla y no quede tapado abajo */ #sobre-mi { align-items: flex-start; padding-top: 11vh; } .panel--night, .panel[data-scene="3"], .panel[data-scene="4"] { color: var(--cream); } .panel-inner { max-width: var(--content-max); width: 100%; transform: rotateX(8deg) translateY(36px); opacity: 0; transition: transform 0.9s cubic-bezier(.2,.7,.3,1), opacity 0.9s ease; transform-origin: bottom center; } .panel-inner.in-view { transform: rotateX(0deg) translateY(0); opacity: 1; } /* ========================================================== Tipografía general ========================================================== */ .eyebrow { font-family: var(--font-pixel); font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); opacity: 0.65; margin: 0 0 1.25rem; } .panel--night .eyebrow, .panel[data-scene="3"] .eyebrow, .panel[data-scene="4"] .eyebrow { color: var(--cream); opacity: 0.7; } .hero-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 7vw, 4.5rem); line-height: 1.05; margin: 0 0 1rem; } .hero-title .dot { color: var(--accent); } .hero-sub { font-size: clamp(1rem, 2vw, 1.25rem); max-width: 62ch; line-height: 1.5; margin: 0 0 2.5rem; text-align: justify; text-justify: inter-word; hyphens: none; } .wink { opacity: 0.6; } .panel-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 5vw, 3rem); margin: 0 0 1.25rem; } .title-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem; } .title-row .panel-title { margin-bottom: 1.25rem; } .panel-text { font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; /* sin tope en ch: así queda alineado al mismo ancho que el contenido de abajo (ej. las columnas de experiencia/estudios) */ margin: 0 0 1.5rem; text-align: justify; text-justify: inter-word; hyphens: none; } /* ========================================================== Hero — layout de dos columnas + foto ========================================================== */ .hero-layout { display: flex; align-items: center; justify-content: space-between; gap: 3rem; max-width: var(--content-max); } .hero-text { flex: 1; min-width: 0; order: 2; } .hero-photo { position: relative; flex-shrink: 0; width: 220px; height: 220px; order: 1; animation: hero-float 5.5s ease-in-out infinite; } @keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .hero-photo-frame { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,0.06); border: 3px solid rgba(255,110,199,0.4); box-shadow: 0 0 0 6px rgba(255,110,199,0.08); } .hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; } .hero-avatar-badge { position: absolute; right: -8px; bottom: -8px; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,0.08); border: 4px solid var(--paper); box-shadow: 0 4px 16px rgba(0,0,0,0.45); image-rendering: pixelated; } .hero-avatar-badge img { width: 100%; height: 100%; object-fit: cover; } .hero-photo-frame.img-missing, .hero-avatar-badge.img-missing { display: flex; align-items: center; justify-content: center; } .hero-photo-frame.img-missing img, .hero-avatar-badge.img-missing img { display: none; } .hero-photo-frame.img-missing::after, .hero-avatar-badge.img-missing::after { content: "sube tu foto"; font-family: var(--font-pixel); font-size: 0.45rem; text-align: center; padding: 0.5rem; color: var(--ink); opacity: 0.5; } .hero-avatar-badge.img-missing::after { font-size: 0.35rem; padding: 0.2rem; } @media (max-width: 720px) { .hero-layout { flex-direction: column; gap: 2rem; text-align: center; } .hero-photo { width: 160px; height: 160px; } .hero-avatar-badge { width: 64px; height: 64px; } } .scroll-cue { font-size: 0.85rem; opacity: 0.7; } .arrow { display: inline-block; animation: bob 1.6s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } /* ========================================================== Experiencia / Estudios / Certificaciones — tres columnas ========================================================== */ .info-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 1.75rem; max-height: 52vh; overflow-y: auto; /* overflow-y distinto de visible fuerza a los navegadores a recortar también en X — este padding evita que el puntito/línea de la primera columna (que sobresale un poco a la izquierda) quede cortado por ese recorte. */ padding-left: 0.6rem; padding-right: 0.5rem; scrollbar-width: thin; scrollbar-color: rgba(255,110,199,0.5) transparent; } .info-columns::-webkit-scrollbar { width: 6px; } .info-columns::-webkit-scrollbar-thumb { background: rgba(255,110,199,0.45); border-radius: 999px; } /* ========================================================== Experiencia / Estudios / Certificaciones — lista con hover (sin tarjetas: separadores finos, listado compacto) ========================================================== */ .info-rows { display: flex; flex-direction: column; margin-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.12); } .info-row { position: relative; padding: 0.9rem 0; border-bottom: 1px solid rgba(255,255,255,0.12); cursor: pointer; } .info-row-header { display: flex; align-items: center; gap: 0.75rem; } .info-row-header .column-title { margin: 0; transition: color 0.3s ease; } .info-row:hover .column-title, .info-row:focus-within .column-title { color: var(--cream); } .info-row-chevron { margin-left: auto; opacity: 0.4; transition: transform 0.35s ease, opacity 0.35s ease; font-size: 0.85rem; } .info-row:hover .info-row-chevron, .info-row:focus-within .info-row-chevron { transform: rotate(180deg); opacity: 1; } /* el detalle empuja el resto de las filas hacia abajo al expandirse (flujo normal) — la pantalla ya quedó anclada arriba con espacio de sobra para que esto se despliegue sin taparse */ .info-row-content { max-height: 0; opacity: 0; overflow: hidden; border-top: 1px solid transparent; padding-left: 1.3rem; padding-top: 0; margin-top: 0; transition: max-height 0.5s ease, opacity 0.4s ease, padding-top 0.4s ease, margin-top 0.4s ease, border-color 0.4s ease; } .info-row:hover .info-row-content, .info-row:focus-within .info-row-content { max-height: 640px; opacity: 1; border-top-color: rgba(255,255,255,0.15); padding-top: 1.1rem; margin-top: 1.1rem; } /* en touch/mobile no hay hover confiable: mostrar todo siempre abierto */ @media (hover: none), (max-width: 720px) { .info-row-chevron { display: none; } .info-row-content { max-height: none; opacity: 1; overflow: visible; border-top-color: rgba(255,255,255,0.15); padding-top: 1.1rem; margin-top: 1.1rem; } .info-row { cursor: default; } } .column-title { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; margin: 0 0 1rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.02em; } .timeline { list-style: none; margin: 0; padding: 0 0 0 0.9rem; border-left: 2px solid rgba(255,110,199,0.3); display: flex; flex-direction: column; gap: 0.9rem; } .timeline-item { position: relative; } .timeline-item::before { content: ""; position: absolute; left: -1.16rem; top: 0.3rem; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(255,110,199,0.15); } .timeline-dates { display: block; font-family: var(--font-pixel); font-size: 0.5rem; letter-spacing: 0.03em; opacity: 0.6; margin-bottom: 0.25rem; } .timeline-item h4 { margin: 0 0 0.15rem; font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; } .timeline-item p { margin: 0; font-size: 0.8rem; opacity: 0.75; } .cv-link { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; color: var(--accent-soft); text-decoration: none; border: 1px solid var(--accent-soft); border-radius: 999px; padding: 0.55rem 1.1rem; transition: background 0.25s ease; } .cv-link:hover, .cv-link:focus-visible { background: rgba(255,182,224,0.15); } /* ========================================================== Chips / tags ========================================================== */ .chip-row { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 1.5rem 0 0; } .chip { font-size: 0.8rem; padding: 0.4rem 0.9rem; border-radius: 999px; background: rgba(255,110,199,0.12); border: 1px solid rgba(255,110,199,0.35); } /* ========================================================== Pasos del proceso — línea de tiempo vertical (progresiva) ========================================================== */ .steps { list-style: none; padding: 0 0 0 0.9rem; margin: 2rem 0 0; border-left: 2px solid rgba(255,110,199,0.3); display: flex; flex-direction: column; gap: 1.75rem; } .step { position: relative; } .step::before { content: ""; position: absolute; left: -1.18rem; top: 0.4rem; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(255,110,199,0.15); } .step h4 { margin: 0 0 0.5rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; } .step-badge { font-family: var(--font-pixel); font-size: 0.5rem; letter-spacing: 0.03em; text-transform: uppercase; background: var(--accent); color: var(--night); padding: 4px 8px; border-radius: 6px; } .step-title { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--ink); } .step p { margin: 0; opacity: 0.85; font-size: 0.95rem; text-align: justify; text-justify: inter-word; hyphens: none; } /* variante de dos columnas (metodología / skills) — reutiliza .info-columns pero con proporción propia y sin límite de alto */ .info-columns--2 { grid-template-columns: 5fr 4fr; max-height: none; overflow: visible; } /* subgrupos dentro de la columna de Skills: cada uno con su propio título en miniatura, mismo lenguaje visual del sitio (pixel font, igual que el eyebrow / las fechas del timeline) */ .skill-group + .skill-group { margin-top: 1.1rem; } .skill-group-title { font-family: var(--font-pixel); font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); opacity: 0.8; margin: 0 0 0.75rem; } .skill-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem 0.6rem; } .skill-badge { font-family: var(--font-body); font-weight: 500; font-size: 0.85rem; color: var(--accent-soft); background: transparent; border: 1px solid var(--accent-soft); border-radius: 999px; padding: 0.1rem 0.95rem; line-height: 1.5; transition: background 0.25s ease, color 0.25s ease; } .skill-badge:hover { background: rgba(255,182,224,0.15); } @media (max-width: 980px) { .info-columns--2 { grid-template-columns: 1fr; } } /* ========================================================== Proyectos — se ven de a uno, con un índice numérico a la izquierda (20%) y el proyecto activo a la derecha (80%). La navegación entre proyectos es vertical y queda acotada a esta sección: el

general sigue navegando en horizontal. ========================================================== */ .projects-layout { display: flex; flex-direction: column; height: 78vh; } .projects-body { display: flex; flex: 1; min-height: 0; gap: 2rem; margin-top: 1rem; } .projects-index { width: 20%; flex-shrink: 0; position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); } .projects-index-track { display: flex; flex-direction: column; align-items: center; position: absolute; left: 0; right: 0; will-change: transform; } .project-number { height: 96px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 100%; border: none; background: transparent; cursor: pointer; font-family: var(--font-pixel); font-size: 1.1rem; color: rgba(255,182,224,0.35); transition: color 0.3s ease, transform 0.3s ease; } .project-number.active { color: var(--accent); transform: scale(1.3); } .projects-viewport { width: 80%; height: 100%; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scrollbar-width: none; } .projects-viewport::-webkit-scrollbar { display: none; } .projects-stage { display: flex; flex-direction: column; } .project-slide { height: 78vh; flex-shrink: 0; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 0; } /* card horizontal, estilo panel HUD/cyberpunk: esquinas achaflanadas, marco negro, un triangulito de acento y la imagen "enmarcada" con su propio margen dentro de la card */ .project-card-h { --chamfer: 22px; position: relative; display: flex; flex-direction: column; align-items: stretch; background: #ffffff; border: 2px solid var(--night); height: 82%; box-shadow: 0 24px 48px rgba(0,0,0,0.28); clip-path: polygon( var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer) ); } /* cuando la card es un link a su caso completo (ej. "How's See My Kitchen?"): mismo look, pero clicable con un pequeño feedback */ .project-card-link { text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .project-card-link:hover, .project-card-link:focus-visible { transform: translateY(-4px); box-shadow: 0 30px 56px rgba(0,0,0,0.38); outline: none; } /* triangulito de acento, tipo marca de HUD */ .project-card-h::before { content: ''; position: absolute; top: 14px; right: 16px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid var(--night); z-index: 2; } .project-card-media { --chamfer-media: 14px; width: auto; height: 68%; flex-shrink: 0; margin: 16px 16px 0; display: flex; align-items: center; justify-content: center; border: 2px solid var(--night); clip-path: polygon( var(--chamfer-media) 0, 100% 0, 100% calc(100% - var(--chamfer-media)), calc(100% - var(--chamfer-media)) 100%, 0 100%, 0 var(--chamfer-media) ); background: repeating-linear-gradient(135deg, #ececec, #ececec 14px, #f6f6f6 14px, #f6f6f6 28px); color: #bdbdbd; } .project-card-media .media-icon { width: 12%; height: auto; } .project-card-media-img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* franja diagonal tipo "hazard stripe", acento cyberpunk entre la imagen y el texto */ .project-card-stripe { height: 8px; margin: 10px 16px 0; background: repeating-linear-gradient( -45deg, var(--night), var(--night) 6px, transparent 6px, transparent 12px ); opacity: 0.85; } .project-card-body { flex: 1; min-width: 0; min-height: 0; padding: 0.6rem 1.5rem 0.9rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.4rem; } .project-card-title { font-family: var(--font-pixel); color: var(--night); text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(0.75rem, 1.3vw, 0.95rem); line-height: 1.4; margin: 0 0 0.35rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(20,20,20,0.25); width: 100%; } .project-card-body .wink { color: #8a8a8a; text-transform: none; letter-spacing: normal; } .project-card-body .skill-badge { color: #7a7a7a; border-color: #cfcfcf; border-radius: 3px; } .project-card-body .skill-badge:hover { background: rgba(0,0,0,0.05); } @media (max-width: 720px) { .project-card-media { height: 96px; margin: 12px 12px 0; } .project-card-stripe { margin: 8px 12px 0; } .project-card-body { padding: 0.5rem 1.1rem 0.75rem; } } .tag { display: inline-block; font-size: 0.65rem; font-family: var(--font-pixel); background: var(--accent); color: var(--night); padding: 3px 7px; border-radius: 6px; margin-top: 0.9rem; } /* ========================================================== Off-work — hobbies (lista simple, sin cajas ni bordes) ========================================================== */ .hobby-grid { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.75rem; } .hobby-card h3 { margin: 0 0 0.4rem; font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: var(--accent); } .hobby-card p { margin: 0; font-size: 0.95rem; opacity: 0.85; line-height: 1.6; text-align: justify; text-justify: inter-word; hyphens: none; } /* ========================================================== Contacto ========================================================== */ .contact-links { display: flex; gap: 1.5rem; margin-bottom: 2rem; } .contact-link { color: var(--cream); font-weight: 500; text-decoration: none; border-bottom: 2px solid rgba(255,110,199,0.5); padding-bottom: 2px; transition: border-color 0.3s ease, color 0.3s ease; } .contact-link:hover, .contact-link:focus-visible { color: var(--accent); border-bottom-color: var(--accent); } .footer-note { font-size: 0.75rem; opacity: 0.6; } /* ========================================================== Progreso — mini-carrusel de estrellitas La activa siempre queda centrada; el resto se desliza detrás como un slider, y se van desvaneciendo hacia los bordes. ========================================================== */ .progress-track { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 0.7rem; } /* flechitas de apoyo junto a las estrellitas: un extra discreto para quienes no puedan scrollear en horizontal, no protagonismo */ .nav-arrow { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; cursor: pointer; color: rgba(255,110,199,0.4); transition: color 0.25s ease, transform 0.25s ease; } .nav-arrow svg { width: 14px; height: 14px; } .nav-arrow:hover, .nav-arrow:focus-visible { color: rgba(255,110,199,0.85); transform: scale(1.15); } .nav-arrow:disabled { opacity: 0.2; cursor: default; pointer-events: none; } .progress-viewport { width: 168px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent); } .progress-strip { display: flex; align-items: center; will-change: transform; } .progress-dot { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: none; box-shadow: none; cursor: pointer; padding: 0; --spin: 0deg; --star-scale: 1; } .progress-dot::before { content: "✦"; display: inline-block; font-size: 0.9rem; line-height: 1; color: rgba(255,110,199,0.4); /* --spin lo actualiza el JS en cada cuadro de scroll (sin transition, para que siga el gesto en tiempo real); el tamaño sí se anima suave al hacer hover/quedar activa */ transform: rotate(var(--spin)) scale(var(--star-scale)); transition: color 0.3s ease, --star-scale 0.3s ease; } .progress-dot:hover::before, .progress-dot:focus-visible::before { color: rgba(255,110,199,0.8); --star-scale: 1.2; } .progress-dot.active::before { color: var(--accent); --star-scale: 1.5; } @media (max-width: 720px) { .progress-track { display: none; } .projects-body { gap: 1rem; } .projects-index { width: 15%; } .projects-viewport { width: 85%; } .project-number { font-size: 0.9rem; } } /* Foco visible para accesibilidad */ a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }