/* -------------------- */ /* TIPOGRAFÍA Y RESETEO */ /* -------------------- */ body{ font-family:'Noto Sans JP',sans-serif; font-size:1rem; line-height:1.6; color:#111; background:#f7f7f7; margin:0; padding:0; overflow-y:auto; } :root { /* Texto tarjetas (HOME) */ --card-line: 1.3; /* interlinea general */ --card-gap-top: 1.8rem; /* tarjeta → título */ --card-gap-title-sub: 0.10rem; /* título → bajada */ --card-gap-sub-bajada: 0.35rem; /* bajada → texto general */ } /* === HOME: texto con ancho fijo, independiente del tamaño de la tarjeta === */ :root{ --home-text-w: 300px; /* ← cambiá este valor y se replica en TODAS */ } /* Permitimos que el texto sobresalga de la tarjeta */ .card{ overflow: visible; } /* Bloque de texto desacoplado del ancho de la tarjeta */ .card .text{ position: absolute; /* ← clave */ width: var(--home-text-w); /* ← ancho fijo global */ padding: 0; line-height: var(--card-line); /* usás tu variable de interlínea */ } /* 3 presets globales (elegí UNO poniendo una clase en ) */ .layout-text-below .card .text{ top: calc(100% + var(--home-text-gap)); left: 0; } .layout-text-right .card .text{ top: 0; left: calc(100% + var(--home-text-gap)); } .layout-text-left .card .text{ top: 0; left: calc(-1 * (var(--home-text-w) + var(--home-text-gap))); } /* Tipos y espaciados internos (siguen tus variables) */ .card .text h2{ margin:0; font-weight:700; font-size:1rem; } .card .text .subtitle{ margin-top: var(--card-gap-title-sub); font-weight:300; font-size:.875rem; color:#888; } .card .text .bajada{ margin-top: var(--card-gap-sub-bajada); font-weight:400; font-size:.875rem; color:#444; } /* MOBILE: en ≤768px volvemos al flujo normal para no superponer */ @media (max-width:768px){ .card .text{ position: static; width: auto; padding-top: var(--card-gap-top); } } main{ padding-top:4rem; } /* para que nada quede debajo del header fijo */ /* -------------------- */ /* HEADER GLOBAL */ /* -------------------- */ header{ position:fixed; inset:0 0 auto 0; width:100%; min-height:4rem; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1rem,3vw,2.5rem); gap:clamp(1rem,3vw,2rem); z-index:100; white-space:nowrap; overflow:hidden; box-sizing:border-box; } /* Logos */ .logo{ color:#111; display:flex; align-items:center; } .logo img{ display:block; width:auto; } .logo-wordmark img{ height:clamp(12px,0.95vw,18px); padding-right:1rem; } .logo-icon img{ height:18px; } /* Nav centro (desktop) */ .header-nav{ display:flex; align-items:center; gap:clamp(1rem,3.5vw,3rem); margin-left:clamp(1rem,4vw,4rem); flex:0 1 auto; justify-content:flex-start; } .svg-btn img{ height:.5625rem; /* ~9px */ width:auto; display:inline-block; vertical-align:middle; transition:filter .2s ease; } .svg-btn img:hover { filter: grayscale(100%); /* se vuelve gris */ opacity: 0.25; /* opcional: baja un poco la intensidad */ cursor: pointer; transition: filter .2s ease, opacity .2s ease; } /* Lado derecho */ .header-right{ display:flex; align-items:center; gap:clamp(.75rem,2.5vw,1.25rem); margin-left:auto; } .icon-btn{ background:transparent; border:0; padding:.25rem; line-height:1; color:#111; cursor:pointer; } /* Idioma: igual que los otros botones */ .btn-lang img{ height:.5625rem; width:auto; display:block; transition:filter .2s ease; } .svg-btn img:hover { filter: grayscale(100%); /* se vuelve gris */ opacity: 0.15; /* opcional: baja un poco la intensidad */ cursor: pointer; transition: filter .2s ease, opacity .2s ease; } /* === Mundo fijo tipo Figma === */ :root{ --world-w: 19200px; /* ← ancho fijo del mundo */ --world-h: 10200px; /* ← alto fijo del mundo */ } /* HOME: MAPA Y CARDS */ #grid-drag-layer{ width:100%; height:100vh; overflow:scroll; position:relative; cursor:grab; } #grid-drag-layer.dragging{ cursor:grabbing; } /* ANTES: 5000px; AHORA: variables fijas */ .grid-wrapper{ width: var(--world-w); /* 19200px */ height: var(--world-h); /* 10200px */ transform-origin: top left; margin-top: var(--header-h); /* << NUEVO */ } .grid{ position:relative; width:100%; height:100%; transform-origin: 0 0; /* importante para que el cálculo funcione */ } .card{ position:absolute; box-sizing:border-box; padding:0; cursor:pointer; } .card { transition: opacity 0.3s ease; /* para que se vea suave */ } .card:hover { transform: scale(1.03); transition: opacity 0.3s ease, transform 0.3s ease; } .card img{ width:100%; height:auto; display:block; } .card .text { padding-top: var(--card-gap-top); line-height: var(--card-line); text-align: left; } .card .text h2 { font-weight: 700; font-size: 1rem; margin: 0; /* sin margen extra */ } .card .text .subtitle { font-weight: 300; font-size: .875rem; color: #888; margin-top: var(--card-gap-title-sub); } .card .text .bajada { font-weight: 400; font-size: .875rem; color: #444; margin-top: var(--card-gap-sub-bajada); } /* ------------------------ */ /* PROYECTO INDIVIDUAL (legacy para compatibilidad) */ /* ------------------------ */ .proyecto-container{ max-width:62.5rem; margin:clamp(7.5rem,15vh,9rem) auto clamp(5rem,10vh,6.25rem); padding:0 1.25rem; background:#fff; } .proyecto-texto h1{ font-size:2.5rem; margin-bottom:1rem; } .proyecto-texto .descripcion{ font-size:1.1rem; margin-bottom:2rem; } .proyecto-imagenes figure{ margin-bottom:2.5rem; } .proyecto-imagenes img{ width:100%; display:block; margin-bottom:.625rem; } .proyecto-imagenes figcaption{ font-size:.9rem; color:#666; } /* -------------------- */ /* PROJECT PAGE (la que usás) */ /* -------------------- */ .project-page{ background:#f1f1f1; padding:clamp(8.75rem,15vh,9rem) clamp(1.25rem,5vw,5rem) clamp(5rem,10vh,6.25rem); } /* Dos columnas; alineación de inicios conservada */ .project-intro{ display:flex; align-items:flex-start; justify-content:center; gap:clamp(2.5rem, 6vw, 8rem); /* ↑ un poco más de aire entre columnas */ max-width:75rem; margin:0 auto; padding-inline:clamp(1.25rem,5vw,2.5rem); } /* Galería: más respiro entre fotos */ .project-gallery{ flex:1; display:flex; flex-direction:column; gap:clamp(1.25rem, 2.2vw, 2.25rem); /* ↑ aire entre fotos */ max-width:31.25rem; } .project-gallery img{ width:100%; height:auto; display:block; } .project-gallery img.zoomable{ cursor:pointer; } /* manito (o usa zoom-in) */ .project-gallery figcaption{ font-size:clamp(.75rem, .7rem + .2vw, .875rem); /* epígrafe fluido */ color:#666; margin-top:.5rem; line-height:1.4; } /* Texto fijo: ancho y tipografía */ .project-texto-fijo{ flex:0 0 auto; align-self:flex-start; position:sticky; top:4rem; max-width:28.125rem; } .project-texto-fijo .texto{ font-family:'Noto Sans JP',sans-serif; color:#111; /* MISMO cuerpo para h1/bajada/p y fluido */ font-size:clamp(.875rem, .8rem + .3vw, 1rem); /* ~14→16px */ line-height:1.55; } .project-texto-fijo .texto h1, .project-texto-fijo .texto .bajada, .project-texto-fijo .texto p{ font-size:inherit; line-height:inherit; margin:.65rem 0; } .project-texto-fijo .texto h1{ font-weight:700; margin-top:0; } .project-texto-fijo .texto .bajada{ font-weight:400; color:#555; margin-bottom:.9rem; } /* ---------------------------- */ /* ÍNDICE MOBILE (HOME) */ /* ---------------------------- */ .index-mobile{ display:none; } /* -------------------- */ /* OVERLAYS (MENÚ / SEARCH) */ /* -------------------- */ .burger{ display:inline-block; position:relative; width:22px; height:16px; } .burger span{ position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px; transform-origin:center; transition:transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease; } .burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:7px; } .burger span:nth-child(3){ bottom:0; } .btn-menu.is-active .burger span:nth-child(1){ top:7px; transform:rotate(45deg); } .btn-menu.is-active .burger span:nth-child(2){ opacity:0; } .btn-menu.is-active .burger span:nth-child(3){ bottom:auto; top:7px; transform:rotate(-45deg); } .mobile-menu{ position:fixed; inset:0; background:rgba(255,255,255,.98); backdrop-filter:blur(8px); z-index:9999; transform:translateY(-100%); opacity:0; transition:transform .28s ease, opacity .28s ease; display:flex; align-items:flex-start; padding-top:4rem; pointer-events:none; } .mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; } .mobile-menu ul{ list-style:none; margin:0; padding:1.25rem clamp(1rem,6vw,3rem); width:100%; display:grid; gap:clamp(1rem,3.5vh,1.75rem); } .mobile-menu a, .mobile-menu .lang-switch{ text-decoration:none; background:none; border:0; text-align:left; color:#111; font-size:clamp(1.125rem,4.8vw,1.5rem); font-weight:600; line-height:1.2; opacity:0; transform:translateY(-8px); transition:opacity .25s ease, transform .25s ease; transition-delay:calc(var(--i,0) * 40ms); } .mobile-menu.open a, .mobile-menu.open .lang-switch{ opacity:1; transform:translateY(0); } .mobile-search{ position:fixed; inset:0; background:rgba(255,255,255,.98); backdrop-filter:blur(8px); z-index:9999; opacity:0; pointer-events:none; transition:opacity .22s ease; display:grid; align-items:start; padding-top:4rem; } .mobile-search.open{ opacity:1; pointer-events:auto; } .mobile-search .search-bar{ display:grid; grid-template-columns:auto 1fr auto; gap:.75rem; align-items:center; padding:.75rem clamp(1rem,6vw,3rem); } .mobile-search input{ font:inherit; border:0; outline:none; padding:.25rem 0; background:transparent; border-bottom:1px solid #ddd; } .search-close{ background:transparent; border:0; font-size:1.25rem; cursor:pointer; } /* Bloqueo scroll + dim (excluimos overlays/lightbox) */ body.dimmed > *:not(header):not(.mobile-menu):not(.mobile-search):not(.lightbox){ filter:blur(1.5px) brightness(.95) saturate(.95); transform:scale(.985); transform-origin:center top; transition:filter .25s ease, transform .25s ease; } main, #grid-drag-layer{ transition:filter .25s ease, transform .25s ease; } /* -------------------- */ /* LIGHTBOX */ /* -------------------- */ :root{ --header-h: 4rem; /* altura real del header fijo */ --mobile-gap: 16px; /* margen extra fijo entre header y contenido en mobile */ } .lightbox{ position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); opacity: 0; transform: scale(1.02); transition: opacity .2s ease, transform .2s ease; z-index: 20000; /* por encima seguro del header */ box-sizing: border-box; padding-top: max(5vh, var(--header-h)); padding-bottom: max(5vh, var(--header-h)); } .lightbox.visible{ opacity:1; transform:scale(1); } .lightbox.hidden{ display:none; } .lightbox-img{ max-width: 90vw; /* resta el padding superior+inferior para garantizar aire simétrico */ max-height: calc(100vh - (max(5vh, var(--header-h)) * 2)); display: block; box-shadow: 0 8px 30px rgba(0,0,0,.35); border-radius: 4px; } .lightbox-close{ position: fixed; top: calc(max(5vh, var(--header-h)) + 14px); right: 18px; background: transparent; border: 0; color: #fff; font-size: 22px; font-family: system-ui, -apple-system, BlinkMacSystemFont; font-weight: 200; line-height: 0; cursor: pointer; z-index: 20001; /* por arriba del lightbox */ padding: 0; } .lightbox-close:hover{ opacity: .7; } /* -------------------- */ /* BREAKPOINTS */ /* -------------------- */ /* Desktop puro (≥1025): nav visible, hamburguesa oculta; ícono oculto */ @media (min-width:1025px){ .header-nav{ display:flex; } .header-right .btn-menu{ display:none; } .mobile-menu{ display:none; } .logo-wordmark{ display:flex; } .logo-icon{ display:none; } } /* <=1024: esconder nav, mostrar hamburguesa e ícono */ /* Y: apilar columnas en la página de proyecto para que las fotos no queden mini */ @media (max-width:1024px){ header{ padding:0 1rem; min-height:4rem; flex-wrap:nowrap; } .header-nav{ display:none; } .header-right{ gap:1rem; } .header-right .btn-menu{ display:inline-flex; } .logo-wordmark{ display:none; } .logo-icon{ display:flex; } .project-intro{ flex-direction:column; align-items:stretch; max-width:48rem; gap:clamp(1rem,3vw,1.5rem); padding-inline:clamp(1rem,4vw,2rem); } .project-texto-fijo{ position:static; top:auto; max-width:100%; } .project-gallery{ max-width:100%; } } /* <=768: layout del home en columna + índice si lo usás */ @media (max-width:768px){ /* ancho “estable” de cada tarjeta en mobile */ :root{ --cardW: clamp(18rem, 88vw, 22rem); /* ajustá si querés más o menos ancho */ } body{ overflow:visible; } #grid-drag-layer{ position:static; width:100%; height:auto; overflow:visible; cursor:default; } .grid-wrapper{ width:100%; height:auto; transform:none; } .grid{ position:static; display:flex; flex-direction:column; align-items:center; gap:2.5rem; padding: calc(var(--header-h) + var(--mobile-gap)) 1.25rem 5rem; } /* tarjetas con ancho fijo en mobile */ .card{ position:static; width: var(--cardW) !important; max-width: var(--cardW); margin-inline: auto; } .card img{ width:100%; height:auto; display:block; } /* índice horizontal (opcional) */ .index-mobile{ display:block; position:fixed; top:4rem; left:0; width:100%; background:#fff; overflow-x:auto; white-space:nowrap; padding:.625rem 1.25rem; box-shadow:0 2px 6px rgba(0,0,0,.1); z-index:9; } .index-mobile a{ display:inline-block; margin-right:1rem; font-size:.875rem; color:#333; text-decoration:none; } .index-mobile a:hover{ color:#000; } } /* Wordmark un poco más chico, fluido */ .logo-wordmark img{ height: clamp(8px, 0.75vw, 14px); width: auto; display: block; padding-right: 1rem; } /* 1) Contenedor de las dos columnas: lo dejamos igual, solo para contexto */ .project-intro{ display:flex; align-items:flex-start; justify-content:center; gap:clamp(2.5rem, 6vw, 8rem); max-width:75rem; margin:0 auto; padding-inline:clamp(1.25rem,5vw,2.5rem); } /* 2) COLUMNA DE IMÁGENES – ancho FLUIDO (ya no fijo) + espaciado */ .project-gallery{ flex:1; display:flex; flex-direction:column; gap:clamp(1.25rem, 2.2vw, 2.25rem); /* aire entre fotos */ max-width: clamp(22rem, 40vw, 36rem); /* ← antes: 31.25rem fijo */ } .project-gallery img{ width:100%; height:auto; display:block; } .project-gallery img.zoomable{ cursor:pointer; } /* 3) EPÍGRAFES – tamaño realmente responsive */ .project-gallery figcaption{ font-size: clamp(0.70rem, 0.55rem + 0.60vw, 0.90rem); /* 11.2 → ~14.4px */ color:#666; margin-top:.5rem; line-height:1.4; } /* 4) COLUMNA DE TEXTO – ancho FLUIDO (ya no 28.125rem) */ .project-texto-fijo{ flex:0 0 auto; align-self:flex-start; position:sticky; top:4rem; max-width: clamp(22rem, 32vw, 36rem); /* ← antes: 28.125rem fijo */ } .project-texto-fijo .texto{ font-family:'Noto Sans JP',sans-serif; color:#111; font-size: clamp(.875rem, .8rem + .3vw, 1rem); /* h1/bajada/p = mismo cuerpo */ line-height:1.55; } .project-texto-fijo .texto h1, .project-texto-fijo .texto .bajada, .project-texto-fijo .texto p{ font-size: inherit; line-height: inherit; margin:.65rem 0; } .project-texto-fijo .texto h1{ font-weight:700; margin-top:0; } .project-texto-fijo .texto .bajada{ font-weight:400; color:#555; margin-bottom:.9rem; } /* ===== Ajustes responsive sin crecimiento indeseado ===== */ /* Variables de control (tope de anchos y cuerpos) */ :root{ --gallery-cap: 31.25rem; /* tope real de la columna de imágenes (~500px) */ --text-cap: 28.125rem; /* tope real de la columna de texto (~450px) */ --gap-cols: clamp(2rem, 6vw, 8rem); /* Cuerpos (más chicos) */ --proj-body: clamp(0.80rem, 0.72rem + 0.22vw, 0.93rem); /* título/bajada/cuerpo */ --cap-body: clamp(0.70rem, 0.64rem + 0.18vw, 0.80rem); /* epígrafes */ } /* columnas (fluido) */ .project-intro{ display:flex; align-items:flex-start; justify-content:center; gap: var(--gap-cols); max-width:75rem; margin:0 auto; padding-inline:clamp(1.25rem,5vw,2.5rem); } /* Galería: fluida pero con CAP fijo; nunca “crece” al achicar */ .project-gallery{ flex:1; display:flex; flex-direction:column; gap:clamp(1.25rem, 2.2vw, 2.25rem); width:100%; max-width: var(--gallery-cap); /* ← cap constante en desktop */ } .project-gallery img{ width:100%; height:auto; display:block; } .project-gallery img.zoomable{ cursor:pointer; } .project-gallery figcaption{ display: block; width: 66.666%; margin-top: .5rem; /* elegí UNA alineación: */ margin-left: 0; /* izquierda */ /* margin-inline: auto; */ /* centrado */ /* margin-left: auto; */ /* derecha */ font-size: var(--cap-body); line-height: 1.4; color: #666; } /* Texto: fluido con cap; cuerpo más chico */ .project-texto-fijo{ flex:0 0 auto; align-self:flex-start; position:sticky; top:4rem; width:100%; max-width: clamp(22rem, 30vw, var(--text-cap)); /* fluido entre 22rem y el cap */ } .project-texto-fijo .texto{ font-family:'Noto Sans JP',sans-serif; color:#111; font-size: var(--proj-body); line-height:1.55; } .project-texto-fijo .texto h1, .project-texto-fijo .texto .bajada, .project-texto-fijo .texto p{ font-size:inherit; line-height:inherit; margin:.65rem 0; } .project-texto-fijo .texto h1{ font-weight:700; margin-top:0; } .project-texto-fijo .texto .bajada{ font-weight:400; color:#555; margin-bottom:.9rem; } /* ≤1024: apilar pero manteniendo los CAPS (no más “max-width:100%”) */ @media (max-width:1024px){ .project-intro{ flex-direction:column; align-items:stretch; max-width:48rem; gap:clamp(1rem,3vw,1.5rem); padding-inline:clamp(1rem,4vw,2rem); } .project-texto-fijo{ position:static; top:auto; max-width: min(100%, var(--text-cap)); /* no se expande por encima del cap */ } .project-gallery{ max-width: min(100%, var(--gallery-cap)); /* ocupa ancho, pero sin crecer del cap */ } } /* === OVERRIDES FINALES: tipografías de proyecto más chicas === */ :root{ --proj-body: clamp(0.72rem, 0.66rem + 0.18vw, 0.85rem); /* título/bajada/cuerpo más chico */ --cap-body: clamp(0.62rem, 0.58rem + 0.14vw, 0.72rem); /* epígrafes más chicos */ } .project-texto-fijo .texto{ font-size: var(--proj-body) !important; line-height: 1.55 !important; } .project-texto-fijo .texto h1, .project-texto-fijo .texto .bajada, .project-texto-fijo .texto p{ font-size: var(--proj-body) !important; line-height: 1.55 !important; } .project-gallery figcaption{ font-size: var(--cap-body) !important; line-height: 1.4 !important; } /* === 1) iPhone: evitar scroll horizontal (overflow-x) === */ html, body { overflow-x: hidden; } .project-page { overflow-x: hidden; } /* Asegurar que en mobile NO quede el grid de desktop activo */ @media (max-width:1024px){ .project-intro{ display:flex; /* desactiva el grid de desktop en mobile */ flex-direction:column; align-items:stretch; max-width:48rem; gap:clamp(1rem,3vw,1.5rem); padding-inline:clamp(1rem,4vw,2rem); } } /* En móviles, si algún fijo empuja el viewport, capear al 100% */ @media (max-width:768px){ .project-gallery, .project-texto-fijo{ max-width:100%; } .index-mobile{ max-width:100vw; } /* evita 100% + padding desborde */ } /* === 2) Hamburguesa: que la “X” NO desaparezca === */ /* Hacemos que el header quede por encima del overlay del menú */ header{ z-index: 10001; } /* header arriba */ .mobile-menu{ z-index: 9999; } /* overlay debajo del header */ /* (opcional si querés más contraste de la X sobre el overlay claro) */ /*.btn-menu{ color:#111; }*/ /* === 3) Idioma: visible sólo fuera del despliegue (sacarlo de adentro) === */ .mobile-menu .lang-switch, .mobile-menu .btn-lang{ display:none !important; } /* === Detalle: la imagen “clickeable” con manito en iPhone también === */ .project-gallery img.zoomable{ cursor: pointer; } /* ==== MOBILE FIX: centrar galería/texto, márgenes simétricos y sin scroll lateral ==== */ html, body { overflow-x: hidden; } /* iPhone / móviles y tablets chicas */ @media (max-width: 900px){ /* El contenedor deja de ser flex para evitar empujes raros */ .project-intro{ display: block; /* <-- reset de flex */ max-width: 48rem; margin-inline: auto; padding-inline: clamp(16px, 6vw, 24px); /* mismo margen izq/der */ } /* Galería y texto comparten el mismo ancho y quedan centrados */ .project-gallery, .project-texto-fijo{ width: min(100%, 36rem); /* tope; no se agranda más */ margin-inline: auto; /* centra realmente */ } /* Imágenes centradas y fluidas */ .project-gallery figure{ width: 100%; margin: 0 0 clamp(14px, 3.5vw, 20px) 0; /* espacio entre fotos */ } .project-gallery img{ display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; /* cinturón y tirantes */ } /* Epígrafes con tamaño fluido (no se quedan gigantes) */ .project-gallery figcaption{ font-size: clamp(0.72rem, 0.64rem + 0.18vw, 0.8rem); line-height: 1.4; color:#666; text-align: left; } /* El texto del proyecto sin sticky en mobile */ .project-texto-fijo{ position: static; top:auto; padding: 0; } } /* ====== MOBILE FIX: centrado real + sin scroll lateral ====== */ /* cinturón y tirantes: que nada provoque ancho extra */ *, *::before, *::after{ box-sizing: border-box; } html, body { overflow-x: hidden !important; } /* Safari iOS mete margen lateral a

*/ .project-gallery figure{ margin:0 !important; } /* Variables para el padding lateral uniforme en móvil */ @media (max-width: 900px){ :root{ --mobile-pad: clamp(16px, 6vw, 24px); } /* 1) La página recibe el padding lateral simétrico */ .project-page{ /* conservá tu padding-top original y solo controlamos laterales */ padding-left: var(--mobile-pad) !important; padding-right: var(--mobile-pad) !important; overflow-x: hidden !important; } /* 2) El contenedor NO debe tener padding adicional ni ser flex/grid */ .project-intro{ display: block !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: auto !important; margin-right: auto !important; max-width: 48rem; /* solo un tope cómodo, no afecta a iPhone */ } /* 3) Galería y texto: mismo ancho, centrados de verdad */ .project-gallery, .project-texto-fijo{ width: 100% !important; max-width: 36rem !important; /* tope de columna en móvil */ margin-left: auto !important; margin-right: auto !important; } /* 4) Imágenes fluidas y centradas */ .project-gallery img{ display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin-left: auto !important; margin-right: auto !important; } /* 5) Texto sin sticky en móvil (evita empujes raros) */ .project-texto-fijo{ position: static !important; top: auto !important; padding: 0 !important; } /* 6) Epígrafes pequeños y fluidos */ .project-gallery figcaption{ font-size: clamp(0.62rem, 0.58rem + 0.14vw, 0.72rem) !important; line-height: 1.4 !important; color:#666 !important; text-align: left !important; } } /* === STICKY SOLO EN DESKTOP (el sticky vive en el CONTENEDOR) === */ @media (min-width:1025px){ .project-texto-fijo{ position: sticky !important; top: var(--header-h, 4rem) !important; align-self: flex-start !important; z-index: 2; } .project-texto-fijo .texto{ position: static !important; margin-top: 0 !important; } } /* En mobile/tablet NO sticky */ @media (max-width:1024px){ .project-texto-fijo{ position: static !important; top: auto !important; } .project-texto-fijo .texto{ position: static !important; } } /* Por las dudas, reseteo fuerte de márgenes que podrían volver a aparecer */ .project-gallery figure{ margin: 0 !important; } .project-texto-fijo .texto > :first-child{ margin-top: 0 !important; } /* el h1 */ /* === Header: buscador inline simple === */ .header-right { display:flex; align-items:center; gap: .75rem; } /* el form arranca cerrado en mobile y “compacto” en desktop */ .header-search { display: inline-flex; align-items: center; width: 0; overflow: hidden; transition: width .22s ease; border-bottom: 1px solid transparent; } .header-search input{ font: inherit; border:0; outline:none; background:transparent; padding:.25rem 0; width: 16rem; /* ancho final en desktop */ } /* abrir/cerrar */ .header-search.open{ width: 16rem; border-bottom-color:#ddd; } .btn-search { line-height:1; } /* Desactivar por completo el viejo overlay si quedara en el DOM */ .mobile-search{ display:none !important; } /* === Buscador inline: tipografía chica, responsive y sin saltos === */ .header-right{ display:flex; align-items:center; gap:.75rem; flex-wrap:nowrap; } /* cerrado: ocupa 0; abierto: ancho fluido con clamp */ .header-search{ display:inline-flex; align-items:center; width:0; overflow:hidden; transition:width .22s ease, border-color .22s ease; border-bottom:1px solid transparent; } .header-search.open{ width: clamp(8rem, 28vw, 16rem); /* ancho responsivo */ border-bottom-color:#ddd; } /* cuerpo del input: más chico y fluido, sin medidas fijas */ .header-search input{ font:inherit; font-size: clamp(.72rem, .64rem + .25vw, .90rem); /* ← más chico, responsive */ line-height: 1.2; border:0; outline:0; background:transparent; padding:.20rem 0; width:100%; } /* IMPORTANTE: mantener inline también en mobile (no absoluto) */ @media (max-width:1024px){ :root{ --actions-w: 150px; } /* ancho del bloque ESP/ENG + hamburguesa */ } @media (max-width:1024px){ /* Contenedor de los botones del lado derecho */ .header-right{ position: relative; } /* La barra de búsqueda no empuja nada: se despliega ABSOLUTA desde la lupa hacia la IZQUIERDA, centrada verticalmente */ .header-search{ position: absolute !important; right: var(--actions-w); /* se detiene antes de ESP/ENG + menú */ /* alinea con la lupa */ top: 50%; transform: translateY(-50%); width: 0; overflow: hidden; pointer-events: none; /* cerrada: no captura toques */ transition: width .22s ease, border-color .22s ease; } .header-search.open{ width: clamp(9rem, 45vw, 18rem); /* se abre sin mover nada */ pointer-events: auto; /* abierta: usable */ } /* Asegura que ESP/ENG y la hamburguesa queden “clavados” arriba */ .header-right .btn-lang, .header-right .btn-menu{ position: relative; z-index: 2; /* por encima del input al desplegarse */ flex: 0 0 auto; /* sin encogerse */ } } /* Desactivar el índice de trabajos en todas las vistas */ .index-mobile{ display:none !important; } .search-go { background: none; border: none; font-size: 0.9rem; padding: 0.4em 0.6em; cursor: pointer; color: #111; } @media (min-width: 1025px) { /* En desktop no mostramos el botón textual porque usamos la lupita */ .search-go { display: none; } } .header-search { display: flex; align-items: center; gap: 0.5rem; } .header-search .search-go { padding: 0.3em 0.8em; font-size: 0.9em; border: none; background: none; cursor: pointer; color: inherit; } @media (min-width: 1025px) { .header-search .search-go { display: none; /* ocultar en desktop si querés */ } } /* === ≤1024px: mismo comportamiento que mobile (texto arriba) === */ @media (max-width:1024px){ /* usamos flex para poder reordenar, pisando cualquier display:block previo */ .project-intro{ display: flex !important; flex-direction: column !important; align-items: stretch; gap: clamp(12px, 3vw, 20px); } /* el texto va primero */ .project-texto-fijo{ order: -1 !important; position: static !important; /* sin sticky en pantallas chicas */ top: auto !important; max-width: 100%; margin: 0; /* por si había márgenes raros */ } /* la galería queda debajo */ .project-gallery{ order: 0 !important; max-width: 100%; } } @media (max-width:1024px){ :root{ --header-h: clamp(3.5rem, 3rem + 1vw, 4rem); /* altura visual del header */ --content-gap: clamp(1rem, 4vw, 2rem); /* aire entre header y contenido */ } /* 1) Compensar header fijo + aire extra */ main{ padding-top: calc(var(--header-h) + var(--content-gap)) !important; } /* 2) Ajustar grilla sin duplicar padding-top */ .grid{ padding-top: 0 !important; padding-left: clamp(1rem, 4vw, 2rem) !important; padding-right: clamp(1rem, 4vw, 2rem) !important; padding-bottom: clamp(2rem, 6vw, 3rem) !important; } } /* === Menú móvil con SVGs (mismo look que desktop) === */ .mobile-menu ul{ list-style:none; margin:0; padding: clamp(1rem, 6vw, 2rem); display:grid; gap: clamp(1rem, 3.5vh, 1.75rem); } .mobile-menu a.svg-btn{ display:inline-flex; align-items:center; padding-block: clamp(.25rem, 1.2vh, .5rem); /* área táctil */ text-decoration:none; opacity:0; transform:translateY(-8px); transition:opacity .25s ease, transform .25s ease, filter .2s ease; transition-delay: calc(var(--i,0) * 40ms); } .mobile-menu a.svg-btn img{ display:block; width:auto; /* alto fluido; ajustá si querés más grande/pequeño */ height: clamp(15px, 3.5vw, 18px); } .mobile-menu.open a.svg-btn{ opacity:1; transform:translateY(0); } /* feedback al toque/hover */ .mobile-menu a.svg-btn:active img, .mobile-menu a.svg-btn:hover img{ filter: invert(1); } /* si querés que aparezca el selector de idioma dentro del menú, eliminá este display:none o comentalo */ .mobile-menu .lang-switch, .mobile-menu .btn-lang{ display:none !important; } /* === MOBILE (≤1024px): tamaño intermedio + epígrafes más grandes === */ @media (max-width:1024px){ /* 2) Distancia duplicada entre texto general y primera foto */ .project-texto-fijo{ margin-bottom: clamp(1.75rem, 6vw, 3.25rem) !important; } /* 3) Asegurar que los epígrafes tomen el nuevo tamaño */ .project-gallery figcaption{ font-size: var(--cap-body) !important; line-height: 1.4; } } /* === FINAL PATCH: tamaños mobile que SÍ pisan todo (≤1024px) === */ @media (max-width:1024px){ :root{ /* ajustá estos dos a gusto */ --proj-body: clamp(0.80rem, 0.75rem + 0.30vw, 1.00rem) !important; /* título+bajada+texto */ --cap-body: clamp(0.80rem, 0.75rem + 0.30vw, 1.00rem) !important; /* epígrafes */ } /* por si algún selector de figcaption te los vuelve a achicar en otro lado */ .project-gallery figcaption{ font-size: var(--cap-body) !important; line-height: 1.45; } } /* === Alineación exacta del logo "F" con el menú móvil y desktop reducido (≤1024px) === */ @media (max-width:1024px){ :root{ /* mismo gutter para header y menú; movelo más a la derecha/izquierda según necesites */ --gutter-left: clamp(1.5rem, 4vw, 4rem); /* micro–ajuste fino, ahora en fracciones de px si querés */ --logo-nudge: -1.5; /* probá valores como -0.5, -1, -1.5, 0.5, etc. */ } /* el header mantiene su padding derecho original; solo fijamos el izquierdo */ header{ padding-left: var(--gutter-left) !important; } /* el listado del menú móvil arranca en el MISMO gutter */ .mobile-menu ul{ padding-left: var(--gutter-left) !important; } /* nudgeo fino de la F para clavarla a la misma vertical del texto */ .logo-icon{ transform: translateX(calc(var(--logo-nudge) * 1px)); } /* por si usás el wordmark en tablets chicas */ .logo-wordmark{ transform: translateX(calc(var(--logo-nudge) * 1px)); } } /* Asegura que la columna de texto arranque arriba y apile contenido */ .project-texto-fijo{ display:flex; flex-direction:column; justify-content:flex-start; /* antes podía estar center */ align-items:flex-start; /* antes podía estar center */ gap:1rem; /* espacio entre texto y logos */ } /* Bloque de logos: fila flexible, sin superponerse */ .project-logos{ display:flex; flex-wrap:wrap; gap:1rem 1.5rem; margin-top:1rem; align-items:center; clear:both; /* por si hay floats en estilos globales */ } /* Cada logo: caja de bloque para evitar solapes con el texto */ .project-logos img{ display:block; /* evita comportamiento inline que pisa texto */ max-height:60px; max-width:150px; height:auto; width:auto; object-fit:contain; } /* Responsivo */ @media (max-width: 768px){ .project-logos { justify-content: flex-start; /* alineado a la izquierda */ gap: .75rem 1rem; } .project-logos img { max-height: 45px; } } /* (Opcional) si .project-intro es un grid/flex contenedor: alinear tope */ .project-intro{ align-items:flex-start; /* solo si veías que todo se centraba en vertical */ } /* === Parche logos en interiores de proyecto === */ /* 1) Evitar centrado vertical del contenedor de columnas */ .project-intro{ /* si tu layout de columnas usa flex o grid, forzamos alineación arriba */ align-items: flex-start !important; justify-content: flex-start !important; place-items: start !important; /* grid */ } /* 3) Contenido de texto: asegurar que no tenga posicionamiento extraño */ .project-texto-fijo .texto{ position: static !important; width: 100%; } .project-texto-fijo .texto > *:first-child{ margin-top: 0; } .project-texto-fijo .texto > *:last-child{ margin-bottom: 0; } /* 4) Bloque de logos: bloque propio, sin superponerse */ .project-logos{ display: flex !important; flex-wrap: wrap; gap: 1rem 1.5rem; width: 100%; align-items: center; margin-top: .5rem; position: relative; z-index: 0; clear: both; /* por si hay floats heredados */ } /* 5) Imágenes de logo: en bloque, contenidas, sin pisar texto */ .project-logos img{ display: block; /* no inline */ max-height: 60px; max-width: 150px; height: auto; width: auto; object-fit: contain; opacity: 0.; } /* 6) Responsivo */ @media (max-width: 768px){ .project-logos{ justify-content: center; gap: .75rem 1rem; } .project-logos img{ max-height: 45px; } } /* Logos siempre al 50% */ .project-logos img{ display:block; max-height:45px; max-width:150px; height:auto; width:auto; object-fit:contain; opacity:.5; } /* En mobile: alineados a la izquierda, sin centrados heredados */ @media (max-width:768px){ .project-texto-fijo{ align-items:flex-start !important; } .project-texto-fijo .project-logos{ display:flex !important; justify-content:flex-start !important; /* ← izquierda */ align-items:center !important; width:100% !important; margin-left:0 !important; padding-left:0 !important; text-align:left !important; /* por si hay text-align:center heredado */ gap:.75rem 1rem; } .project-texto-fijo .project-logos img{ max-height:45px; } } @media (max-width: 768px){ .project-texto-fijo { margin-top: 1.5rem; /* duplicá o ajustá según necesites */ } } /* ===== Parche final de refuerzo para sticky en desktop ===== */ @media (min-width:1025px){ .project-page, .project-intro{ overflow: visible !important; } /* Si alguna regla anterior cambia el layout, nos aseguramos de que el sticky pueda “pegarse” */ .project-intro{ align-items: flex-start !important; } } /* ==== STICKY FIJO SOLO EN DESKTOP (bloque definitivo) ==== */ @media (min-width:1025px){ /* que ningún ancestro corte el sticky */ .project-page, .project-intro{ overflow: visible !important; align-items: flex-start !important; } /* el sticky vive en el CONTENEDOR de la columna derecha */ .project-intro > .project-texto-fijo{ position: sticky !important; top: 4rem !important; /* coincide con la altura del header fijo */ align-self: flex-start !important; z-index: 2; } /* el contenido interno no necesita posicionamiento */ .project-texto-fijo .texto{ position: static !important; margin-top: 0 !important; } } /* En mobile/tablet: sin sticky (lo tenías así) */ @media (max-width:1024px){ .project-texto-fijo{ position: static !important; top:auto !important; } } /* === STICKY INFALIBLE SOLO EN DESKTOP (≥1025px) === */ @media (min-width:1025px){ /* 0) El scroll debe ser el del documento; nada de contenedores que lo corten */ html, body, .project-page, .project-intro, .project-gallery{ overflow: visible !important; } /* 1) Estructura predecible: grid de 2 columnas */ .project-page .project-intro{ display: grid !important; grid-template-columns: minmax(0, var(--gallery-cap, 31.25rem)) minmax(22rem, var(--text-cap, 28.125rem)); column-gap: var(--gap-cols, 6rem); align-items: start !important; justify-content: center; max-width: 75rem; margin: 0 auto; } /* 2) Sticky en la columna de texto (no en el hijo) */ .project-page .project-texto-fijo{ position: sticky !important; top: 4rem !important; /* debajo del header fijo */ align-self: start !important; z-index: 2; } /* 3) El bloque interno no tiene posicionamiento propio */ .project-page .project-texto-fijo .texto{ position: static !important; margin-top: 0 !important; } } /* ≤1024px: explícitamente sin sticky, como querés */ @media (max-width:1024px){ .project-page .project-texto-fijo{ position: static !important; top: auto !important; } } /* === OFFSET EXACTO CON EL HEADER (definitivo, solo desktop) === */ @media (min-width:1025px){ /* 1) Variables: altura del header + aire superior del proyecto */ :root{ --header-h: 0rem; /* ya la usás en el sitio */ --content-top: clamp(8.75rem, 15vh, 9rem); /* mismo valor que .project-page */ } /* 2) Aseguramos que la página use ese padding (por si hubo overrides) */ .project-page{ padding-top: var(--content-top) !important; } /* 3) Sticky compensa header + padding de la página => sin salto */ .project-intro > .project-texto-fijo{ position: sticky !important; top: calc(var(--header-h) + var(--content-top)) !important; align-self: flex-start !important; z-index: 2; } /* 4) Anti-colapso: el primer hijo no empuja hacia abajo */ .project-texto-fijo .texto > *:first-child{ margin-top: 0 !important; } } /* En mobile/tablet: sin sticky */ @media (max-width:1024px){ .project-texto-fijo{ position: static !important; top:auto !important; } } /* ===== Mini audio: inline super minimal ===== */ .audio-mini{ display: flex; align-items: center; gap: .6rem; background: transparent !important; border: none !important; padding: 0 !important; } /* Botón play/pause plano negro */ .audio-btn{ border: none !important; background: transparent !important; padding: 0 !important; font-size: 1.1rem; /* ajusta tamaño */ line-height: 1; color: #111; /* negro */ } .audio-btn:focus{ outline: none; } .audio-btn:active{ transform: none; } /* Quitar mute definitivamente */ .audio-mute{ display: none !important; } /* Título en línea */ .audio-title{ font-size: .9rem; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Barra pequeña */ .audio-bar{ flex: 1; height: 3px; background: #ddd; border-radius: 2px; cursor: pointer; } .audio-progress{ background: #111; border-radius: 2px; width: 0%; height: 100%; } /* Tiempo al final en la misma línea */ .audio-time{ font-size: .8rem; color: #555; min-width: 80px; text-align: right; } /* === Barra de progreso visible, inline === */ .audio-mini{ display:flex; align-items:center; gap:.6rem; } .audio-title{ font-size:.9rem; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; /* permite que el título se achique y deje lugar a la barra */ } /* La barra va en la misma línea y ocupa el espacio libre */ .audio-bar{ flex:1 1 auto; /* se estira */ min-width:120px; /* asegura que no desaparezca en layouts estrechos */ height:4px; background:#ddd; border-radius:2px; position:relative; cursor:pointer; align-self:center; /* centra verticalmente en la fila */ } .audio-progress{ position:absolute; left:0; top:0; bottom:0; width:0%; background:#111; border-radius:2px; } /* Tiempo al final */ .audio-time{ font-size:.8rem; color:#555; min-width:80px; text-align:right; } /* (si aún lo tenés oculto) */ .audio-mute{ display:none !important; } .audio-title{ font-size: .7rem; } .audio-artist{ color: #111; /* negro */ font-weight: normal; } .audio-song{ color: #666; /* gris como la bajada */ font-weight: normal; } /* Nudge fino del botón de play para alinearlo con el texto */ .audio-btn{ position: relative; top: 1px; /* probá 1px–3px según tu ojo */ line-height: 1; /* evita espacio extra vertical */ padding: 0; margin: 0; border: none; background: transparent; color: #111; } /* Evita que al hacer click “salte” y se pierda el ajuste */ .audio-btn:active{ top: 2px; /* mismo valor que arriba */ transform: none; } /* Ocultar minutos/duración */ .audio-time{ display: none !important; } /* Mismo look que las fotos, y sin salto de layout */ .project-gallery video{ display:block; width:100%; height:auto; background:transparent; object-fit:cover; /* Si sabés la relación, podés dejar fija: aspect-ratio: 16 / 9; */ } .grid-wrapper { position: relative; } /* SOLO en el overlay de resultados */ #results-layer .result-clone .text{ position: static !important; width: auto !important; padding-top: var(--card-gap-top); } /* === Mantener visible el overlay de resultados en desktop === */ #results-layer { min-width: 0; /* ← permite encogerse sin recortar la X */ min-height: 280px; contain: layout paint; box-sizing: border-box; /* la X respira con el padding-right dinámico del JS */ } /* Atenuar el mapa mientras hay resultados */ .grid.search-active .card{ opacity:.12; pointer-events:none; filter:grayscale(.2); } /* Clones libres en el espacio */ .result-clone{ position:absolute; will-change: transform; transform-origin: top left; } /* Botón para saltar al original */ .result-clone .see-context{ margin-top:.5rem; background:#111; color:#fff; border:0; padding:.4rem .6rem; cursor:pointer; font: inherit; border-radius:8px; } /* ===== Botón "limpiar" del buscador: X negra, minimal ===== */ /* Si tu clear es un botón propio (texto o SVG) */ .search .clear, .search-clear, [data-role="search-clear"], button[aria-label*="limpiar" i], button[aria-label*="borrar" i], button[aria-label*="clear" i]{ background-color: transparent !important; /* No tocamos width/height para conservar el tamaño actual */ color: transparent !important; /* oculta una “x” de texto si la hubiera */ border: 0 !important; box-shadow: none !important; filter: none !important; display: inline-flex; align-items: center; justify-content: center; /* X negra como SVG embebido */ background-image: url("data:image/svg+xml;utf8,\ "); background-repeat: no-repeat; background-position: center; background-size: 80% 80%; } /* Si adentro había un

en grilla si hay .year o data-year */ .page.bio .bio-content :is(ul,ol) > li:has(> .year), .page.bio .bio-content :is(ul,ol) > li[data-year]{ display: grid; grid-template-columns: 4.2ch minmax(0,1fr); /* AAAA + texto */ column-gap: 1.25rem; align-items: start; margin: .3rem 0; } /* 2) Apariencia del año en */ .page.bio .bio-content .year{ font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* 3) Apariencia del año con data-year */ .page.bio .bio-content li[data-year]::before{ content: attr(data-year); font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* 4) Evitar márgenes raros en el contenido del li */ .page.bio .bio-content :is(ul,ol) > li > *:not(.year){ margin: 0; } /* 5) Responsive fino: achicar gap en móviles */ @media (max-width: 640px){ .page.bio .bio-content :is(ul,ol) > li:has(> .year), .page.bio .bio-content :is(ul,ol) > li[data-year]{ grid-template-columns: 4ch minmax(0,1fr); column-gap: .9rem; } } /* Colchón inferior (desktop + mobile) */ .page.bio{ padding-bottom: clamp(3rem, 6vh, 6rem); } /* ===== BIO — MOBILE como Proyectos: índice ARRIBA + foto/full-width + columna vertical ===== */ @media (max-width: 1024px){ .page.bio{ padding-left: clamp(12px, 4vw, 20px); padding-right: clamp(12px, 4vw, 20px); --top-gap: clamp(12px, 2vh, 20px); /* menos aire bajo el header */ } /* 1 columna: primero el índice, luego el contenido */ .page.bio .bio-hero{ grid-template-columns: 1fr; grid-template-rows: auto auto; grid-template-areas: "index" "content"; gap: clamp(12px, 3vw, 18px); max-width: 100%; margin: 0; } /* Índice arriba, sin sticky y EN COLUMNA */ .page.bio .bio-index{ position: static; top: auto; padding-right: 0; margin: 0 auto; max-width: 48rem; width: 100%; } .page.bio .bio-index::before{ height: var(--top-gap); } .page.bio .bio-index ul{ flex-direction: column !important; align-items: flex-start; gap: clamp(6px, 2vw, 10px); padding: 0 clamp(4px, 2vw, 12px); } .page.bio .bio-index .icon{ width: auto; max-width: 100%; } /* Contenido a todo el ancho (como proyectos) */ .page.bio .bio-content{ grid-area: content; max-width: min(48rem, 100%); width: 100%; margin: 0 auto; } /* Portada full-width dentro de la columna */ .page.bio .bio-content .bio-cover{ margin: 0 0 clamp(14px, 3vw, 20px) 0; } .page.bio .bio-content .bio-cover img{ width: 100%; height: auto; } } /* ===== BIO: fotos intercaladas dentro de la columna ===== */ .page.bio .bio-content .bio-photo{ margin: clamp(16px, 4vw, 32px) 0; } .page.bio .bio-content .bio-photo img{ display: block; width: 100%; height: auto; border: 0; } .page.bio .bio-photo{ margin: 2rem 0; text-align: center; } .page.bio .bio-photo img{ width: 100%; height: auto; display: block; margin: 0 auto; } .page.bio .bio-photo figcaption{ display: block; width: 66.666%; font-size: 0.8rem; color: #555; margin-top: 0.5rem; line-height: 1.4; text-align: left; } /* ----- BIO: offset correcto para anclas (no corta el título) ----- */ .page.bio [id]{ scroll-margin-top: calc(var(--hdr) + var(--top-gap) + 4px); } .page.bio h2[id]{ scroll-margin-top: calc(var(--hdr) + var(--top-gap) + 4px); } .page.bio .bio-section{ scroll-margin-top: calc(var(--hdr) + var(--top-gap) + 4px); } /* (Opcional) scroll suave */ html{ scroll-behavior: smooth; } /* Utilidad para accesibilidad: texto solo-para-lectores */ .sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* Evita que arrastrar una imagen dispare drag&drop nativo */ .grid .card img{ -webkit-user-drag: none; user-select: none; } /* --- Zoom HUD --- */ #zoom-hud{ position: fixed; left: 12px; bottom: 10px; z-index: 90; font-size: 12px; line-height: 1.2; color: #8f8f8f; /* gris clarito */ letter-spacing: .01em; pointer-events: none; /* no interfiere con clicks */ user-select: none; } @media (max-width: 768px){ #zoom-hud{ font-size: 11px; left: 8px; bottom: 8px; } } /* === BIO — Índice en mobile: altura fija y gaps parejos === */ @media (max-width: 1024px){ .page.bio .bio-index ul{ gap: clamp(6px, 2.6vw, 10px) !important; /* separaciones consistentes */ } .page.bio .bio-index .icon{ height: clamp(8px, 3.6vw, 12px) !important; /* tamaño “de fuente” uniforme */ width: auto !important; /* respeta proporciones */ display: block; } } @media (min-width: 769px){ #zoom-tip{ display:none !important; } } /* Apagar el tip estático para siempre: evita el chispazo en el flip de breakpoint */ #zoom-tip{ display:none !important; } /* Home: cards ya visitadas mientras dure la sesión actual */ .card.visited { opacity: .3; filter: grayscale(.15); } /* iPad / táctil: que el layer capture paneo y pinch sin que Safari se lleve el gesto */ #grid-drag-layer{ touch-action: none; /* captura pan/pinch en desktop/iPad */ -webkit-user-select: none; user-select: none; overscroll-behavior: none; /* evita “rebote” atrás/adelante */ } /* MOBILE (≤768px): permitir scroll vertical nativo */ @media (max-width: 768px){ #grid-drag-layer{ touch-action: pan-y !important; /* ← clave para que el dedo scrollee */ overscroll-behavior: auto; /* rebote normal */ } } /* === HUD de zoom — esquina inferior derecha, visible y sobre todo === */ #zoom-hud { position: fixed; bottom: 12px; right: 12px; /* 👉 esquina inferior derecha */ left: auto !important; font-size: 12px; line-height: 1.3; color: #000; /* texto negro */ background: rgba(255, 255, 255, 0.92);/* recuadro blanco semiopaco */ padding: 6px 10px; border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,0.15); z-index: 10000; /* por encima de las cards */ pointer-events: none; user-select: none; } /* === CONTACTO === */ .contacto-placa { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; } .contacto-placa .linea-contacto { max-width: 100%; height: auto; display: block; } .contacto-placa a.link img { transition: opacity 0.25s ease; cursor: pointer; } .contacto-placa a.link img:hover { opacity: 0.6; } .contacto-placa .linea-contacto:nth-child(1) { margin-bottom: 0.4rem; } .contacto-placa .linea-contacto:nth-child(2) { margin-bottom: 0.2rem; } .contacto-placa .linea-contacto:nth-child(3) { margin-top: 0.6rem; } /* ejemplo */ /* =========================== ZOOM BUTTONS (HOME DESKTOP) =========================== */ /* Default: oculto */ #zoom-controls{ display:none; } @media (min-width:1025px){ /* Solo existe en el home porque lo agregamos en index.html */ #zoom-controls{ display: flex; flex-direction: column; /* 👈 uno arriba del otro */ position: fixed; right: 12px; bottom: 48px; gap: 8px; z-index: 120; pointer-events: auto; user-select: none; } #zoom-controls .zoom-btn{ width: 34px; height: 34px; border-radius: 999px; border: 1px solid #d6d6d6; background: rgba(255,255,255,.95); color: #111; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; display:grid; place-items:center; transition: transform .12s ease, opacity .12s ease; } #zoom-controls .zoom-btn:hover{ background: #111; /* invertido */ color: #fff; border-color: #111; transform: translateY(-1px); } } #zoom-controls .zoom-btn:active{ transform: translateY(0); opacity: .75; } #zoom-controls .zoom-btn:focus-visible{ outline: 2px solid #111; outline-offset: 2px; } /* Texto secundario en proyectos (30% más chico) */ .project-secondary-text { font-size: 0.7em; line-height: 1.45; margin-top: 0.1em; opacity: 0.85; /* opcional, borrá si no lo querés */ } .project-secondary-text p:last-child { margin-bottom: 0; } /* ================================ FIX Exhibiciones: espacio arriba en mobile (lo ponemos al final para que pise todo) ================================ */ @media (max-width: 1024px){ /* En mobile,

ya tiene padding-top por el header fijo. Entonces, anulamos el padding extra de la página Exhibiciones. */ .page.exhibiciones{ padding-top: 0 !important; margin-top: 0 !important; } /* Si el primer bloque interno trae margen, lo anulamos acá */ .page.exhibiciones > *:first-child{ margin-top: 0 !important; padding-top: 0 !important; } /* Si el listado es el que mete el margen */ .page.exhibiciones .listado{ margin-top: 0 !important; } } /* CONTACTO: ajuste fino por archivo (cada PNG tiene aire distinto) */ .page.contacto .contacto-placa img.linea-ig{ transform: translateX(-6.5px); } .page.contacto .contacto-placa img.linea-mail{ transform: translateX(1px); } /* ===== Chrome fix: evita "flash" (solo card hovered visible) durante zoom rápido ===== */ html.is-zooming .card { transition: none !important; } html.is-zooming .card:hover { transform: none !important; } .gold-text { color: #A69F85; }