/* ============================================================ FUENTE DEL TÍTULO — Archivo Expanded Extenda 30 Deca es comercial (de pago). Usamos Archivo en su ancho máximo (ExtraExpanded), que es la gratuita con licencia libre (OFL) más parecida: sans ancha, geométrica, editorial. Se carga desde Google Fonts en el , no hay archivo que subir. Si algún día comprás Extenda 30 Deca, subís el archivo a assets/fonts/ y descomentás el @font-face de abajo: el título pasa a Extenda sin tocar nada más. ============================================================ */ /* --- Para activar Extenda 30 Deca cuando la tengas: --- @font-face { font-family: 'Extenda 30 Deca'; src: url('../fonts/Extenda30Deca.woff2') format('woff2'), url('../fonts/Extenda30Deca.woff') format('woff'); font-weight: 400 900; font-display: swap; } */ /* ============================================================ GALERÍA EDITORIAL — collage tipo moodboard de viajes Las fotos son recortes pegados sobre un tablero verde profundo, con cinta, sombras y rotaciones sutiles. No es una grilla: cada pieza tiene su posición, tamaño y ángulo. Paleta: --verde-tablero #013927 fondo (pedido en el brief) --crema-papel #f4efe4 borde de foto tipo revista --oro #d9a441 cinta y acentos --cielo brillo superior sutil ============================================================ */ .collage { --verde-tablero: #013927; --crema-papel: #f4efe4; --oro: #d9a441; position: relative; min-height: 100vh; /* al menos una pantalla; crece si hace falta */ background: var(--verde-tablero); overflow: hidden; padding: 28px 24px 40px; /* aire arriba para que el título no toque el nav */ isolation: isolate; /* Centramos verticalmente encabezado + collage como un bloque */ display: flex; flex-direction: column; justify-content: center; } /* Brillo tenue arriba, da profundidad al tablero */ .collage-cielo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, rgba(217,164,65,.14), transparent 60%), radial-gradient(90% 60% at 80% 110%, rgba(0,0,0,.35), transparent 70%); } /* Textura de papel/grano sutil sobre todo el tablero: le saca lo plano al verde sin competir con las fotos. */ .collage::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.045) 0.5px, transparent 0.5px), radial-gradient(rgba(0,0,0,.06) 0.5px, transparent 0.5px); background-size: 4px 4px, 6px 6px; background-position: 0 0, 2px 2px; } /* ---- Encabezado ---- */ .collage-cab { position: relative; z-index: 3; text-align: center; width: 100%; margin: 0 0 18px; /* ocupa todo el ancho: centra de verdad */ flex: 0 0 auto; } .collage-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--oro); padding: 5px 14px; border: 1px solid rgba(217,164,65,.4); border-radius: 999px; margin-bottom: 12px; transform: rotate(-1.5deg); } .collage-titulo { /* Extenda 30 Deca (comercial, se sube a assets/fonts/). Respaldo: una fuente ancha del sistema para que, si aún no está la fuente, el título siga leyéndose ancho y no colapse a algo angosto. NUNCA se sustituye en silencio: el respaldo es solo provisorio. */ /* 'Extenda 30 Deca' primero por si algún día se sube; si no, Archivo en su ancho máximo hace de reemplazo gratuito. */ font-family: 'Extenda 30 Deca', 'Archivo', 'Arial Black', sans-serif; /* Archivo es variable: pedimos el ancho máximo (125 = ExtraExpanded) para que se vea bien ancha, como Extenda. */ font-stretch: 125%; font-variation-settings: 'wdth' 125, 'wght' 800; /* MAYÚSCULAS, ancho y presencia */ text-transform: uppercase; font-weight: 800; letter-spacing: 0.11em; /* dentro del rango 0.08–0.15em pedido */ /* Tamaños por dispositivo: mobile 42–56px · tablet 70–90px · desktop 90–140px El clamp cubre todo el rango de forma fluida. */ font-size: clamp(34px, 6vw, 88px); line-height: 0.98; white-space: nowrap; /* el título en UN renglón */ max-width: 96vw; /* nunca toca los bordes */ margin: 0 auto; /* centrado horizontal real */ text-align: center; color: #F5F5F3; text-shadow: none; } .collage-titulo em { /* En este título todo va del mismo color y estilo: la palabra destacada mantiene la identidad ancha en vez de pasar a itálica (que rompería el look editorial). */ font-style: normal; color: #F5F5F3; } /* Ajustes finos por franja para respetar EXACTO los rangos pedidos */ @media (min-width: 1024px) { /* Desktop */ .collage-titulo { font-size: clamp(60px, 6vw, 88px); } } @media (min-width: 641px) and (max-width: 1023px) { /* Tablet */ .collage-titulo { font-size: clamp(46px, 7vw, 66px); } } @media (max-width: 640px) { /* Mobile: acá sí puede ir en 2 renglones */ .collage-titulo { font-size: clamp(34px, 10vw, 48px); letter-spacing: 0.06em; white-space: normal; /* en celular permitimos que baje */ } } .collage-sub { margin-top: 8px; font-size: clamp(13px, 1.4vw, 16px); color: rgba(244,239,228,.7); } /* ---- Tablero donde se pegan las piezas ---- */ .collage-tablero { position: relative; z-index: 2; width: 100%; max-width: 1080px; margin: 0 auto; flex: 1 1 auto; /* toma el alto que sobra tras el encabezado */ } /* ---- Cada recorte ---- */ .recorte { position: absolute; cursor: grab; /* invita a arrastrar */ touch-action: none; /* el arrastre no scrollea la página */ user-select: none; -webkit-user-select: none; border-radius: 3px; background: var(--crema-papel); padding: 7px 7px 24px; /* marco polaroid más finito */ box-shadow: 0 2px 4px rgba(0,0,0,.22), 0 14px 34px rgba(0,0,0,.42); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, opacity .7s ease; will-change: transform, opacity; } .recorte img, .recorte video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1px; background: #0a2b20; -webkit-user-drag: none; /* que no arranque el drag nativo de la imagen */ pointer-events: none; /* los eventos los maneja la pieza, no el medio */ } /* Algunas sin marco: se ven como foto impresa a sangre */ .recorte.sangre { padding: 0; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.28), 0 22px 50px rgba(0,0,0,.45); } .recorte.sangre img, .recorte.sangre video { border-radius: 4px; } /* Etiqueta manuscrita en el borde blanco */ .recorte .nota { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 13px; color: #3a2f1c; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Cinta washi que "pega" el recorte */ .recorte .cinta { position: absolute; z-index: 2; width: 78px; height: 26px; background: rgba(217,164,65,.62); box-shadow: 0 1px 3px rgba(0,0,0,.2); } .recorte .cinta::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 6px, transparent 6px 12px); } .recorte .cinta.tl { top: -12px; left: 14px; transform: rotate(-24deg); } .recorte .cinta.tr { top: -12px; right: 14px; transform: rotate(22deg); } .recorte .cinta.top { top: -13px; left: 50%; transform: translateX(-50%) rotate(-3deg); } /* Marca de video */ .recorte .play { position: absolute; z-index: 3; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: rgba(1,57,39,.78); display: grid; place-items: center; color: #fff; font-size: 14px; backdrop-filter: blur(3px); } /* Estado de entrada (JS lo saca al aparecer) */ /* Mientras se arrastra: cursor cerrado y sin transición ni hover */ .recorte.arrastrando-pieza { cursor: grabbing; box-shadow: 0 8px 20px rgba(0,0,0,.35), 0 40px 80px rgba(0,0,0,.6); } .recorte:active { cursor: grabbing; } .recorte.entrando { opacity: 0; } .recorte.desde-izq { transform: translateX(-60px) rotate(var(--rot,0deg)); } .recorte.desde-der { transform: translateX(60px) rotate(var(--rot,0deg)); } .recorte.desde-abajo{ transform: translateY(60px) rotate(var(--rot,0deg)); } /* Hover: crece, se endereza un poco, sube al frente */ .recorte:hover { transform: scale(1.04) rotate(0deg) !important; box-shadow: 0 6px 14px rgba(0,0,0,.3), 0 34px 70px rgba(0,0,0,.55); z-index: 50 !important; } /* ---- Garabatos decorativos ---- */ .collage-garabato { position: absolute; z-index: 1; pointer-events: none; opacity: .5; } /* ---- Botón de entrada a la galería completa ---- */ .collage-entrar { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; margin: 70px auto 0; padding: 16px 32px; background: var(--oro); color: #2a1e05; border: none; border-radius: 999px; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 30px rgba(217,164,65,.35); transition: transform .25s ease, box-shadow .25s ease; } .collage-entrar:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 40px rgba(217,164,65,.5); } .collage-entrar .fl { transition: transform .25s ease; } .collage-entrar:hover .fl { transform: translateX(5px); } /* ============================================================ GALERÍA COMPLETA — se abre como sección aparte ============================================================ */ .galeria-full { position: fixed; inset: 0; z-index: 400; background: var(--verde-tablero, #013927); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; } .galeria-full.on { opacity: 1; visibility: visible; } .gf-barra { display: flex; align-items: center; gap: 20px; padding: 22px 28px; border-bottom: 1px solid rgba(244,239,228,.12); flex-wrap: wrap; } .gf-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #d9a441; } .gf-titulo { font-family: 'Fraunces', Georgia, serif; font-size: 26px; color: #f4efe4; font-weight: 600; } .gf-filtros { display: flex; gap: 8px; margin-left: auto; } .gf-chip { padding: 8px 18px; border-radius: 999px; background: transparent; color: rgba(244,239,228,.7); border: 1px solid rgba(244,239,228,.25); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s ease; } .gf-chip:hover { border-color: rgba(244,239,228,.5); color: #f4efe4; } .gf-chip.on { background: #d9a441; color: #2a1e05; border-color: #d9a441; } .gf-cerrar { width: 44px; height: 44px; border-radius: 50%; background: rgba(244,239,228,.1); color: #f4efe4; border: none; font-size: 20px; cursor: pointer; transition: background .2s ease; } .gf-cerrar:hover { background: rgba(244,239,228,.2); } /* Muro tipo mampostería (columnas), no grid rígido */ .gf-muro { flex: 1; overflow-y: auto; padding: 28px; column-gap: 18px; columns: 4; } .gf-pieza { break-inside: avoid; margin-bottom: 18px; position: relative; cursor: pointer; border-radius: 6px; overflow: hidden; background: #0a2b20; box-shadow: 0 10px 30px rgba(0,0,0,.3); transform: rotate(var(--r, 0deg)); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; opacity: 0; } .gf-pieza.visible { opacity: 1; } .gf-pieza:hover { transform: scale(1.03) rotate(0deg); box-shadow: 0 20px 50px rgba(0,0,0,.5); z-index: 5; } .gf-pieza img, .gf-pieza video { display: block; width: 100%; } .gf-pieza .play { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(1,57,39,.8); color: #fff; display: grid; place-items: center; font-size: 13px; } .gf-pieza figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; font-size: 13px; font-family: 'Fraunces', Georgia, serif; font-style: italic; } @media (max-width: 1000px) { .gf-muro { columns: 3; } } @media (max-width: 680px) { .gf-muro { columns: 2; padding: 16px; } } /* ============================================================ LIGHTBOX ============================================================ */ .lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(3,18,13,.96); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; } .lightbox.on { opacity: 1; visibility: visible; } .lb-escenario { max-width: 90vw; max-height: 84vh; display: flex; align-items: center; justify-content: center; } .lb-escenario img, .lb-escenario video { max-width: 90vw; max-height: 84vh; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.6); object-fit: contain; } .lb-escenario img.zoom { cursor: zoom-out; transform: scale(1.6); transition: transform .3s ease; } .lb-escenario img { cursor: zoom-in; transition: transform .3s ease; } .lb-cerrar { position: absolute; top: 22px; right: 26px; width: 48px; height: 48px; border-radius: 50%; background: rgba(244,239,228,.1); color: #f4efe4; border: none; font-size: 22px; cursor: pointer; z-index: 2; transition: background .2s ease; } .lb-cerrar:hover { background: rgba(244,239,228,.22); } .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(244,239,228,.1); color: #f4efe4; border: none; font-size: 32px; cursor: pointer; z-index: 2; display: grid; place-items: center; transition: background .2s ease; } .lb-nav:hover { background: rgba(244,239,228,.22); } .lb-prev { left: 22px; } .lb-next { right: 22px; } .lb-pie { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: rgba(244,239,228,.8); font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 15px; } /* ============================================================ RESPONSIVE — el collage se adapta sin volverse grilla ============================================================ */ @media (max-width: 720px) { .collage { padding: 60px 14px 90px; } .collage-tablero { min-height: 520px; } /* En mobile las piezas se apilan más verticales; el JS recalcula posiciones con menos superposición. */ } /* Menos movimiento: sin entradas animadas ni videos en loop */ @media (prefers-reduced-motion: reduce) { .recorte, .gf-pieza { transition: none; opacity: 1 !important; } .recorte.entrando { opacity: 1; transform: rotate(var(--rot,0deg)); } } /* ========================================================= MOSAICO DENSO — fotos pegadas tipo revista + logo central (referencia street style) ========================================================= */ /* En modo mosaico, las piezas van a sangre: sin marco polaroid, pegadas unas contra otras llenando la grilla. */ .recorte.mosaico { padding: 0; border-radius: 2px; background: #0a2b20; box-shadow: 0 4px 14px rgba(0,0,0,.35); /* borde finito oscuro para separar apenas una foto de otra */ outline: 2px solid rgba(1,57,39,.9); } .recorte.mosaico img, .recorte.mosaico video { border-radius: 2px; } .recorte.mosaico .cinta, .recorte.mosaico .nota { display: none; } /* el mosaico no lleva cinta ni nota */ .recorte.mosaico:hover { transform: scale(1.05) rotate(0deg) !important; z-index: 60 !important; box-shadow: 0 10px 30px rgba(0,0,0,.55); } /* Bloque central con el logo, encima del mosaico */ .collage-logo { position: absolute; z-index: 40; display: grid; place-items: center; padding: 10px; pointer-events: none; /* no estorba el arrastre de las fotos de atrás */ } .cl-bloque { width: 100%; height: 100%; display: grid; place-items: center; background: #0d0d0d; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 4px rgba(13,13,13,.9); /* borde irregular tipo pincelada, tapa el fondo detrás del logo */ padding: 8% 10%; } .cl-bloque img { max-width: 88%; max-height: 82%; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); } .cl-bloque span { color: #fff; font-family: 'Fraunces', Georgia, serif; font-size: clamp(20px, 3vw, 40px); font-weight: 700; text-align: center; font-style: italic; } /* En el mosaico el tablero ocupa todo el ancho, sin límite */ .collage.collage-mosaico .collage-tablero { max-width: 100%; } /* En modo mosaico el encabezado es más chico: el protagonista es el mosaico con el logo en el centro. */ .collage-mosaico .collage-cab { margin-bottom: 14px; } .collage-mosaico .collage-titulo { font-size: clamp(30px, 4.5vw, 62px); } .collage-mosaico .collage-tablero { margin-top: 4px; } /* ========================================================= COLLAGE URBANO — fotos cortadas a mano, bordes rasgados (referencia street style) ========================================================= */ .recorte.urbano { background: #f4efe4; /* papel crema que asoma en el rasgado */ border-radius: 0; outline: none; box-shadow: 0 4px 12px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.5); /* borde de papel más ancho: hace que el rasgado se vea marcado */ padding: 10px; } .recorte.urbano img, .recorte.urbano video { border-radius: 0; width: 100%; height: 100%; object-fit: cover; } .recorte.urbano .cinta, .recorte.urbano .nota { display: none; } /* Hover: se levanta y endereza, al frente */ .recorte.urbano:hover { transform: scale(1.05) rotate(0deg) !important; z-index: 60 !important; box-shadow: 0 8px 20px rgba(0,0,0,.4), 0 26px 60px rgba(0,0,0,.6); } /* El tablero urbano ocupa buen ancho para fotos grandes */ .collage-mosaico .collage-tablero { max-width: 100%; } /* Modo mosaico: fotos a todo el ancho de la pantalla (full-bleed). Sacamos el padding lateral y el límite del tablero. */ .collage.collage-mosaico { padding-left: 0; padding-right: 0; } .collage.collage-mosaico .collage-cab { padding-left: 24px; padding-right: 24px; /* el texto sí respeta margen */ } .collage.collage-mosaico .collage-tablero { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } /* El tablero del mosaico contiene sus fotos: aunque roten o tengan sombra, no generan scroll horizontal en la página. */ .collage-mosaico .collage-tablero { overflow: hidden; } .collage.collage-mosaico { overflow-x: hidden; max-width: 100vw; }