/* ========================================================================== El Mangrullo — sistema Negro con un toque cálido + tiza. El color lo traen las fiestas (fotos y el color propio de cada evento), nunca la interfaz. ========================================================================== */ @font-face{ font-family:'Jakarta'; font-style:normal; font-weight:200 800; font-display:swap; src:url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Jakarta'; font-style:italic; font-weight:200 800; font-display:swap; src:url('../fonts/plus-jakarta-sans-italic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root{ /* Escala proporcional: todo se mide en rem, y 1rem = 16px en las pantallas de referencia (desktop: MacBook Pro 14" = 1512px de ancho · mobile: iPhone 16 Pro Max = 440px). --vw es 1vw topeado: en desktop deja de crecer en 1920px, en mobile en 560px. */ --vw: min(1vw, 19.2px); /* Color · relaciones medidas con contrast.py sobre --bg */ --bg: #060504; /* negro con un toque cálido, profundo sin llegar al negro pleno */ --surface: #1A1918; --chalk: #E6E2DA; /* tiza · 15.0:1 */ --muted: #A09B94; /* texto secundario · 7.0:1 */ --dim: #8A8680; /* metadatos chicos · 5.4:1, es el piso */ --hairline: rgba(230,226,218,.14); /* decorativo, nunca texto */ --line: rgba(230,226,218,.32); /* Rojo de acento (laboratorio, 23/09): carmín con luz. Base, filo iluminado y lado en sombra */ --rojo: #9C1F33; --rojo-luz: #D24B5E; --rojo-sombra: #520F1B; --rojo-rgb: 156,31,51; --rojo-luz-rgb:210,75,94; /* línea iluminada: oscura en las puntas, clara donde le pega la luz */ --linea-roja: linear-gradient(90deg, transparent, var(--rojo-sombra) 12%, var(--rojo) 35%, var(--rojo-luz) 55%, var(--rojo) 75%, var(--rojo-sombra) 92%, transparent); --font: 'Jakarta', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --gutter: 3.5rem; --maxw: 90rem; --nav-h: 4.75rem; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-io: cubic-bezier(.76,0,.24,1); } *,*::before,*::after{ box-sizing:border-box; } html{ font-size:calc(var(--vw) * 100 / 94.5); overflow-x:clip; -webkit-text-size-adjust:100%; background:var(--bg); } html.lenis, html.lenis body{ height:auto; } .lenis.lenis-smooth{ scroll-behavior:auto !important; } body{ text-wrap:pretty; /* el fondo va en : si lo tiene el body, tapa al lienzo fijo de z-index negativo */ margin:0; color:var(--chalk); font-family:var(--font); font-weight:300; font-size:1rem; line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } b,strong{ font-weight:700; } button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; } ::selection{ background:var(--chalk); color:var(--bg); } :focus-visible{ outline:2px solid var(--chalk); outline-offset:0.25rem; border-radius:0.25rem; } .vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } /* El par light/bold es LA voz de la marca: "NUESTRO MANIFIESTO" */ .l{ font-weight:200; } .volanta{ margin:0 0 3rem; font-size:0.75rem; font-weight:300; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:0.875rem; } .volanta b{ color:var(--chalk); font-weight:700; } .volanta::before{ content:""; width:1.75rem; height:1px; background:linear-gradient(90deg, var(--rojo-sombra), var(--rojo) 40%, var(--rojo-luz)); box-shadow:0 0 0.375rem rgba(var(--rojo-rgb),.6); } .volanta--chica{ margin-bottom:0.625rem; font-size:0.6875rem; letter-spacing:.2em; display:block; } .volanta--chica::before{ display:none; } .titulo-xl{ margin:0; font-size:calc(var(--vw) * 4.2); line-height:.98; letter-spacing:-.04em; font-weight:700; text-wrap:balance; } /* ---------- Grano y fondo de pizarrón ---------- */ body::before{ /* pizarrón: manchas de tiza muy tenues, como las piezas impresas */ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(calc(var(--vw) * 60) 40vh at 18% 12%, rgba(230,226,218,.035), transparent 70%), radial-gradient(calc(var(--vw) * 50) 50vh at 85% 70%, rgba(230,226,218,.028), transparent 70%), var(--bg); } .grano{ position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.07; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grano 1s steps(6) infinite; } @keyframes grano{ 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} } /* Lienzo de partículas: fijo detrás de todo */ .campo{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; } /* Sin WebGL: el molino vectorial, quieto y tenue, ocupa su lugar */ .sin-webgl .campo{ display:none; } .sin-webgl .hero__pin::before{ content:""; position:absolute; inset:18% 20% 30%; z-index:-1; opacity:.12; background:var(--chalk); -webkit-mask:url('../svg/molino-rueda.svg') center/contain no-repeat; mask:url('../svg/molino-rueda.svg') center/contain no-repeat; } /* ---------- Cursor (sólo puntero fino) ---------- */ .cursor{ display:none; } @media (hover:hover) and (pointer:fine){ .js .cursor{ display:block; position:fixed; left:0; top:0; z-index:80; pointer-events:none; width:2.25rem; height:2.25rem; margin:-1.125rem 0 0 -1.125rem; mix-blend-mode:difference; } .cursor span{ display:block; width:100%; height:100%; border-radius:50%; border:1px solid rgba(230,226,218,.7); transform:scale(.25); background:var(--chalk); transition:transform .45s var(--ease-out), background-color .3s, border-color .3s; } .cursor.is-link span{ transform:scale(1.4); background:transparent; border-color:var(--chalk); } .cursor.is-oculto span{ transform:scale(0); } } /* ========================================================================== Precarga — CSS la anima y la retira. JS sólo decide si se ve. ========================================================================== */ .precarga{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; align-content:center; gap:1.75rem; background:var(--bg); color:var(--chalk); animation:precarga-salir 1.1s var(--ease) 2.1s forwards; /* fundido sobre el home mientras se disuelve (SALE en precarga.js) */ } /* Lienzo del ensamble de partículas. El SVG queda como respaldo si el lienzo no arranca. */ .precarga__lienzo{ position:absolute; inset:0; width:100%; height:100%; } .precarga-lienzo .precarga__molino{ visibility:hidden; } .precarga__molino{ width:11.875rem; overflow:visible; /* el eje de las paletas (x 257.95 de 399.12) va al centro, no el centro del dibujo: (199.56 - 257.95) / 399.12 = -14.63% */ translate:-14.63% 0; } .precarga__rueda{ transform-box:view-box; transform-origin:257.95px 141.17px; animation:rueda-entra 1.4s var(--ease-out) both; } .precarga__cola{ animation:cola-entra .7s var(--ease-out) .35s both; } .precarga__txt{ /* fuera del flujo: así el eje de las paletas queda en el centro exacto también en vertical. Medio alto del molino = ancho × 282.33/399.12/2 = ancho × .354 */ position:absolute; left:0; right:0; text-align:center; top:calc(50% + var(--radio, 11.875rem * .354) + 2.125rem); margin:0; font-size:0.6875rem; letter-spacing:.3em; text-transform:uppercase; font-weight:700; animation:txt-entra .8s var(--ease-out) 1.2s both; /* entra cuando el molino ya casi está lleno */ } .precarga__txt span{ font-weight:200; color:var(--muted); } @keyframes rueda-entra{ 0%{ transform:rotate(-220deg) scale(.55); opacity:0; } 30%{ opacity:1; } 100%{ transform:rotate(0) scale(1); opacity:1; } } @keyframes cola-entra{ from{ transform:translateX(1.5rem); opacity:0; } to{ transform:none; opacity:1; } } @keyframes txt-entra{ from{ opacity:0; letter-spacing:.6em; } to{ opacity:1; } } @keyframes precarga-salir{ 0%{ opacity:1; } 99%{ opacity:0; visibility:visible; } 100%{ opacity:0; visibility:hidden; } } .espera .precarga, .espera .precarga *{ animation-play-state:paused; } .sin-precarga .precarga{ display:none; } /* ========================================================================== Nav ========================================================================== */ .nav{ position:fixed; top:0; left:0; right:0; z-index:50; height:var(--nav-h); display:flex; align-items:center; gap:1.5rem; padding-inline:var(--gutter); transition:transform .6s var(--ease-out), background-color .4s; } .nav__logo{ width:11.875rem; color:var(--chalk); flex:none; display:flex; min-height:44px; align-items:center; } .nav__logo svg{ width:100%; height:auto; } .nav__links{ margin-inline:auto; display:flex; gap:0.25rem; padding:0.3125rem; border:1px solid var(--hairline); border-radius:6.25rem; background:rgba(14,13,12,.45); backdrop-filter:blur(0.875rem); -webkit-backdrop-filter:blur(0.875rem); } .nav__links a{ font-size:0.8125rem; line-height:1.125rem; padding:0.8125rem 1rem; border-radius:6.25rem; color:var(--muted); transition:color .3s, background-color .3s; } .nav__links a:hover, .nav__links a.is-activo{ color:var(--chalk); background:rgba(230,226,218,.08); } .nav__cta{ flex:none; font-size:0.8125rem; font-weight:600; padding:0.75rem 1.25rem; border-radius:6.25rem; background:var(--chalk); color:var(--bg); transition:translate .3s var(--ease-out); } /* translate (no transform): transform lo usa la animación de entrada y no se tienen que pisar */ .nav__cta:hover{ translate:0 -1px; } .nav__tickets{ position:relative; flex:none; } .nav__cta{ display:inline-flex; align-items:center; gap:0.5rem; font-family:inherit; border:0; cursor:pointer; } .nav__flecha{ width:0.375rem; height:0.375rem; border-right:1.5px solid; border-bottom:1.5px solid; transform:translateY(-2px) rotate(45deg); transition:transform .4s var(--ease-out); } .nav__cta[aria-expanded="true"] .nav__flecha{ transform:translateY(1px) rotate(225deg); } .nav__desplegable{ position:absolute; top:calc(100% + 0.625rem); right:0; width:15.625rem; display:flex; flex-direction:column; gap:0.5rem; padding:0.5rem; border:1px solid var(--hairline); border-radius:1.75rem; background:rgba(14,13,12,.82); backdrop-filter:blur(0.875rem); -webkit-backdrop-filter:blur(0.875rem); opacity:0; visibility:hidden; pointer-events:none; translate:0 -0.375rem; transition:opacity .3s, translate .4s var(--ease-out), visibility 0s .4s; } .nav__tickets.is-abierto .nav__desplegable{ opacity:1; visibility:visible; pointer-events:auto; translate:0 0; transition:opacity .3s, translate .4s var(--ease-out); } .nav__desplegable .btn{ justify-content:center; min-height:2.875rem; padding:0.75rem 1.25rem; font-size:0.8125rem; } .nav__menu{ display:none; } .nav.is-escondido{ transform:translateY(-110%); } /* fondo del header fijo: degradé que se funde con la página, aparece al scrollear */ .nav::before{ content:""; position:absolute; inset:0 0 -1.5rem; z-index:-1; pointer-events:none; opacity:0; transition:opacity .4s; background:linear-gradient(rgba(6,5,4,.94), rgba(6,5,4,.78) 60%, rgba(6,5,4,0)); } .nav.is-solido::before{ opacity:1; } .menu{ position:fixed; inset:0; z-index:49; background:var(--bg); display:flex; flex-direction:column; justify-content:center; padding:calc(var(--nav-h) + 1rem) var(--gutter) 2.5rem; overflow-y:auto; } .menu[hidden]{ display:none; } .menu nav{ display:flex; flex-direction:column; } .menu nav a{ display:flex; align-items:baseline; gap:1rem; padding:0.75rem 0; border-bottom:1px solid var(--hairline); font-size:3rem; font-weight:700; letter-spacing:-.04em; line-height:1.05; } .menu nav a small{ font-size:0.75rem; font-weight:300; color:var(--dim); letter-spacing:.1em; } .menu__acciones{ display:flex; flex-direction:column; gap:0.625rem; margin-top:2rem; } .menu__acciones .btn{ justify-content:center; } /* ========================================================================== Hero ========================================================================== */ .hero{ position:relative; height:260vh; } .hero__pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:grid; grid-template-rows:1fr auto auto; padding:calc(var(--nav-h) + 1.25rem) var(--gutter) 1.75rem; } .hero__volanta{ align-self:start; margin:0; font-size:0.75rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:0.75rem; } .punto{ width:0.375rem; height:0.375rem; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--rojo-luz), var(--rojo) 55%, var(--rojo-sombra)); filter:drop-shadow(0 0 0.25rem rgba(var(--rojo-luz-rgb),.75)); box-shadow:0 0 0 0 rgba(var(--rojo-rgb),.55); animation:latido 2.4s var(--ease) infinite; } @keyframes latido{ 0%{box-shadow:0 0 0 0 rgba(var(--rojo-rgb),.55)} 70%{box-shadow:0 0 0 0.75rem rgba(var(--rojo-rgb),0)} 100%{box-shadow:0 0 0 0 rgba(var(--rojo-rgb),0)} } .hero__titulo{ margin:0 0 clamp(1.75rem,5vh,3.5rem); font-size:calc(var(--vw) * 6.2); line-height:.94; letter-spacing:-.05em; font-weight:700; } .hero__titulo .l{ letter-spacing:-.055em; } .hero__segundo{ /* debajo del molino de partículas, que tiene el eje de las paletas en el centro exacto: la rueda mide 0.9 del alto/2 de radio → termina en 50% + 22.5vh */ position:absolute; left:0; right:0; top:calc(50% + 22.5vh + 1.75rem); display:flex; flex-direction:column; align-items:center; opacity:0; pointer-events:none; } .hero__marca{ width:14.375rem; height:auto; color:var(--chalk); } .hero__pie{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:1.125rem; border-top:1px solid transparent; background:var(--linea-roja) top / 100% 1px no-repeat, radial-gradient(50% 100% at 50% 0, rgba(var(--rojo-luz-rgb),.22), transparent) top / 100% 0.625rem no-repeat; font-size:0.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .hero__pie b{ color:var(--chalk); } .hero__prox{ color:var(--chalk); display:inline-flex; min-height:44px; align-items:center; gap:.4em; } /* flex se come los espacios entre texto y */ .hero__prox:hover{ text-decoration:underline; text-underline-offset:0.25rem; } .hero__scroll{ display:inline-flex; align-items:center; gap:0.625rem; } .hero__scroll i{ width:1px; height:1.75rem; background:linear-gradient(var(--chalk),transparent); animation:baja 2s var(--ease-io) infinite; transform-origin:top; } @keyframes baja{ 0%{transform:scaleY(0)} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom} } /* Entrada del titular: cada línea sube desde una máscara */ .linea{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; white-space:nowrap; } /* cada línea del titular es fija */ .linea > span{ display:inline-block; will-change:transform; } /* ========================================================================== Próxima fecha ========================================================================== */ .fecha{ position:relative; padding-block:12.5rem; isolation:isolate; } .fecha__glow{ position:absolute; inset:-30vh 0 -55vh; z-index:-1; pointer-events:none; opacity:0; -webkit-mask:linear-gradient(transparent, #000 28%, #000 58%, transparent); mask:linear-gradient(transparent, #000 28%, #000 58%, transparent); background: radial-gradient(55% 40% at 72% 45%, color-mix(in srgb, var(--evento) 30%, transparent), transparent 72%), radial-gradient(45% 30% at 18% 62%, color-mix(in srgb, var(--evento) 14%, transparent), transparent 72%); } .fecha__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:calc(var(--vw) * 6); align-items:end; } .fecha__num{ margin:0; font-size:calc(var(--vw) * 21); line-height:.8; letter-spacing:-.07em; font-weight:800; display:flex; } .fecha__sep{ font-weight:200; color:var(--evento); } .fecha__meta{ margin:1.75rem 0 0; font-size:0.875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .fecha__meta b{ color:var(--chalk); } .fecha__falta{ margin:0.625rem 0 0; font-size:0.875rem; color:var(--chalk); min-height:1.5em; } .fecha__falta b{ font-weight:700; } .fecha__titulo{ margin:0; font-size:calc(var(--vw) * 3.3); line-height:1; letter-spacing:-.04em; font-weight:700; white-space:nowrap; } .fecha__lugar{ margin:1.125rem 0 0; display:flex; align-items:center; gap:0.625rem; font-size:0.9375rem; color:var(--chalk); } .fecha__lugar svg{ width:1.125rem; color:var(--evento); } .fecha__lugar span{ color:var(--muted); } .lineup{ list-style:none; margin:2.25rem 0 0; padding:0; border-top:1px solid var(--hairline); } .lineup li{ padding:0.875rem 0; border-bottom:1px solid var(--hairline); font-size:1.5rem; font-weight:600; letter-spacing:-.02em; display:flex; align-items:baseline; gap:0.625rem; } .lineup li i{ font-weight:200; font-style:normal; color:var(--muted); } .lineup small{ font-size:0.6875rem; font-weight:400; letter-spacing:.16em; color:var(--muted); } .lineup__head{ font-size:4.4rem !important; font-weight:800 !important; letter-spacing:-.05em !important; line-height:1; padding-block:2rem 1.125rem !important; } .fecha__acciones{ margin-top:2.25rem; display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; } .btn{ position:relative; display:inline-flex; align-items:center; gap:0.625rem; min-height:3.25rem; padding:0.875rem 1.625rem; border-radius:6.25rem; font-size:0.875rem; font-weight:600; overflow:hidden; isolation:isolate; transition:transform .4s var(--ease-out), color .4s var(--ease-out), border-color .4s; } .btn::before{ /* relleno que sube desde abajo al pasar */ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; transform:translateY(101%); transition:transform .5s var(--ease-out); } .btn:active{ transform:translateY(1px) scale(.99); } .btn--primario{ background:var(--chalk); color:var(--bg); } .btn--primario::before{ background:#fff; } .btn--linea{ border:1px solid var(--line); color:var(--chalk); } .btn--linea::before{ background:var(--chalk); } .btn:hover::before{ transform:none; } .btn--linea:hover{ color:var(--bg); border-color:var(--chalk); } .enlace{ display:inline-flex; align-items:center; min-height:44px; padding-inline:0.375rem; font-size:0.875rem; color:var(--muted); background:linear-gradient(currentColor,currentColor) left 78%/0 1px no-repeat; transition:background-size .5s var(--ease-out), color .3s; } .enlace:hover{ color:var(--chalk); background-size:100% 1px; } .enlace--grande{ font-size:1.7rem; color:var(--chalk); font-weight:600; padding-inline:0; } /* ========================================================================== Manifiesto ========================================================================== */ .manifiesto{ padding-block:11.25rem; } .manifiesto__texto{ margin:0; font-size:calc(var(--vw) * 2.1); line-height:1.2; letter-spacing:-.025em; font-weight:300; text-wrap:pretty; } .manifiesto__texto b{ font-weight:700; } .manifiesto__texto p{ margin:0; } .manifiesto__texto p + p{ margin-top:.9em; } .manifiesto__texto .pal{ opacity:.16; transition:opacity .3s linear; } .manifiesto__cols{ margin-top:7.5rem; display:grid; grid-template-columns:repeat(2,minmax(0,25rem)); gap:2.5rem 4rem; } .manifiesto__cols p{ margin:0; color:var(--muted); font-size:0.9375rem; } .manifiesto__cols b{ color:var(--chalk); } /* Cinta de palabras */ .cinta{ border-block:1px solid var(--hairline); overflow:hidden; padding-block:1rem; } .cinta__pista, .residentes__pista{ display:flex; width:max-content; align-items:center; will-change:transform; } .cinta__pista span{ font-size:1.25rem; font-weight:700; letter-spacing:-.01em; padding-inline:1.1em; } .cinta__pista span.l{ font-weight:200; } /* separador: el molinito de la marca, sólo la rueda */ .cinta__pista i, .residentes__pista i{ flex:none; width:0.875rem; height:0.875rem; background:var(--muted); -webkit-mask:url('../svg/rueda.svg') center/contain no-repeat; mask:url('../svg/rueda.svg') center/contain no-repeat; } /* ========================================================================== Venues — recorrido horizontal (desktop) ========================================================================== */ .venues{ position:relative; } .venues__pin{ height:100vh; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding-top:var(--nav-h); } .venues__cabeza{ display:flex; justify-content:space-between; align-items:baseline; } .venues__cabeza .volanta{ margin-bottom:1.75rem; } .venues__contador{ margin:0; font-size:0.8125rem; color:var(--muted); letter-spacing:.1em; font-variant-numeric:tabular-nums; } .venues__actual{ color:var(--chalk); font-weight:700; } .venues__pista{ display:flex; gap:2.5rem; padding-inline:var(--gutter); width:max-content; will-change:transform; } .venue{ position:relative; flex:none; width:67.5rem; height:min(64vh, 38.75rem); border:1px solid var(--hairline); border-radius:1.25rem; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; background:rgba(26,25,24,.55); } .venue__arte{ display:grid; place-items:center; padding:8%; color:var(--chalk); border-right:1px solid var(--hairline); } .venue__arte svg{ height:100%; max-height:25rem; width:auto; opacity:.92; } /* el molino con torre es alto y angosto: a igual alto pesa más que los otros dos */ .venue--campo .venue__arte svg{ height:74%; max-height:18.125rem; translate:-14.72% 0; } /* eje de las paletas al centro: x 296.6 de 458.29 → (229.15-296.6)/458.29 */ .venue--bosque .venue__arte svg{ height:60%; max-height:13.75rem; } .venue__arte--foto{ position:relative; padding:0; overflow:hidden; } .venue__arte--foto svg{ position:relative; z-index:1; height:52%; max-height:10.625rem; width:auto; } .venue__foto{ position:absolute; inset:0; display:block; } .venue__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(6,5,4,.55), rgba(6,5,4,.72)); } .venue__foto img{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); } .venue__txt{ padding:3.5rem; display:flex; flex-direction:column; justify-content:flex-end; } .venue__n{ margin:0 0 auto; font-size:0.8125rem; color:var(--dim); letter-spacing:.14em; } .venue h3{ margin:0 0 1.25rem; font-size:calc(var(--vw) * 5); line-height:.95; letter-spacing:-.05em; font-weight:200; } .venue h3 b{ font-weight:700; } .venue__txt > p:not([class]){ margin:0; color:var(--muted); max-width:42ch; font-size:0.9375rem; } .venue__tag{ margin:1.75rem 0 0; padding-top:1.125rem; border-top:1px solid var(--hairline); font-size:0.75rem; letter-spacing:.14em; text-transform:uppercase; } .venue__tag span{ color:var(--muted); } /* ========================================================================== Archivo ========================================================================== */ .archivo{ padding-block:11.25rem 8.75rem; position:relative; } .galeria{ margin-block:6rem; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; cursor:grab; } .galeria::-webkit-scrollbar{ display:none; } .galeria.is-arrastrando{ cursor:grabbing; } .galeria__pista{ display:flex; gap:0.875rem; padding-inline:var(--gutter); width:max-content; align-items:center; } .g{ margin:0; flex:none; height:clamp(20rem,52vh,35rem); overflow:hidden; border-radius:0.875rem; background:var(--surface); } .g--v{ aspect-ratio:2/3; } .g--h{ aspect-ratio:3/2; } .g img{ width:100%; height:100%; object-fit:cover; transform:scale(1.14); transition:filter .6s; filter:saturate(.92); user-select:none; -webkit-user-drag:none; pointer-events:none; } .g:hover img{ filter:saturate(1.1); } .ediciones{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline); } .edicion{ position:relative; display:grid; grid-template-columns:7.5rem 1.2fr 1.6fr auto; gap:1.5rem; align-items:baseline; padding:1.625rem 0; border-bottom:1px solid var(--hairline); transition:padding .5s var(--ease-out), color .4s; } .edicion::before{ content:""; position:absolute; inset:0 calc(-1 * var(--gutter)); background:rgba(230,226,218,.04); transform:scaleY(0); transform-origin:bottom; transition:transform .5s var(--ease-out); z-index:-1; } .edicion:hover::before{ transform:none; } .edicion__fecha{ font-size:0.8125rem; color:var(--dim); letter-spacing:.08em; font-variant-numeric:tabular-nums; } .edicion__nombre{ font-size:2.6rem; line-height:1; letter-spacing:-.04em; font-weight:200; } .edicion__nombre b{ font-weight:700; } .edicion__line{ font-size:0.875rem; color:var(--muted); } .edicion__lugar{ font-size:0.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .ediciones__preview{ position:fixed; left:0; top:0; z-index:40; width:16.25rem; aspect-ratio:4/5; pointer-events:none; border-radius:0.75rem; overflow:hidden; opacity:0; transform:scale(.8); transition:opacity .35s var(--ease), transform .5s var(--ease-out); } .ediciones__preview.is-visible{ opacity:1; transform:scale(1); } .ediciones__preview img{ width:100%; height:100%; object-fit:cover; } /* ========================================================================== Diferencial ========================================================================== */ .diferencial{ padding-block:10rem; } .dif{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); border-block:1px solid var(--hairline); } .dif li{ padding:1.75rem 1.5rem 2rem 1.25rem; border-right:1px solid var(--hairline); display:flex; flex-direction:column; } .dif li:first-child{ padding-left:0; } .dif li:last-child{ border-right:0; } .dif__n{ font-size:0.75rem; color:var(--dim); letter-spacing:.14em; } .dif h3{ margin:3.5rem 0 0.625rem; min-height:2.3em; font-size:1.35rem; letter-spacing:-.02em; font-weight:700; line-height:1.15; } .dif p{ margin:0; font-size:0.875rem; color:var(--muted); } /* ========================================================================== Residentes ========================================================================== */ .residentes{ padding-block:6.25rem; overflow:hidden; } .residentes .volanta{ margin-bottom:1.5rem; } .residentes__cinta{ border-block:1px solid var(--hairline); padding-block:1.125rem; } .residentes__cinta{ overflow:hidden; } .residentes__pista span{ font-size:1.5rem; font-weight:700; letter-spacing:-.03em; line-height:1.1; padding-inline:1em; white-space:nowrap; } .residentes__pista span.l{ font-weight:200; } .residentes__pista i{ width:0.875rem; height:0.875rem; background:var(--chalk); } /* ========================================================================== Mangru Crew — el marco de corchetes de sus piezas ========================================================================== */ .crew{ padding-block:11.25rem; } .crew__marco{ position:relative; max-width:47.5rem; margin-inline:auto; text-align:center; padding:5.5rem 4.5rem; } .crew__marco::before, .crew__marco::after{ content:""; position:absolute; top:0; bottom:0; width:3rem; border:1px solid var(--line); border-radius:1.375rem; } .crew__marco::before{ left:0; border-right:0; border-top-right-radius:0; border-bottom-right-radius:0; } .crew__marco::after{ right:0; border-left:0; border-top-left-radius:0; border-bottom-left-radius:0; } .crew__arriba{ margin:0; font-size:2rem; font-weight:200; letter-spacing:-.02em; text-transform:uppercase; } .crew__titulo{ margin:0.25rem 0 0; font-size:7.4rem; line-height:.9; letter-spacing:-.06em; font-weight:200; text-transform:uppercase; } .crew__titulo b{ font-weight:800; } .crew__molino{ width:5.25rem; margin:2.5rem auto 1.75rem; color:var(--chalk); overflow:visible; translate:-14.63% 0; } .crew__rueda{ transform-box:view-box; transform-origin:257.95px 141.17px; } .crew__txt{ margin:0 auto 2rem; max-width:46ch; color:var(--muted); font-size:0.9375rem; } .crew__txt b{ color:var(--chalk); } /* ========================================================================== Marcas ========================================================================== */ .marcas{ padding-block:8.75rem; border-top:1px solid var(--hairline); } .marcas__grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:end; } .marcas__txt{ margin:0 0 1.5rem; color:var(--muted); font-size:1.15rem; max-width:44ch; text-wrap:pretty; } /* sin palabras viudas */ .marcas__txt b{ color:var(--chalk); } /* ========================================================================== Pie ========================================================================== */ .pie{ padding-top:7.5rem; padding-bottom:1.75rem; border-top:1px solid var(--hairline); background:rgba(14,13,12,.7); } .pie__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; } .pie__cols a{ font-size:0.9375rem; display:inline-block; min-height:44px; padding-block:2px; transition:color .3s; } .pie__cols a:hover{ color:var(--muted); } /* Líneas entre secciones en rojo con luz (las verticales de .dif en desktop quedan en hairline: el degradé es horizontal) */ .marcas, .pie, .lineup, .pie__marcas, .edicion{ border-image:var(--linea-roja) 1; } /* Marca | firma: dos columnas iguales con la línea en el medio, así la línea cae en el centro exacto de la pantalla. Los dos logos comparten el mismo alto (--alto-marca). */ .pie__marcas{ --alto-marca:1.375rem; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:2.25rem; margin-top:6.25rem; padding-block:1.75rem; border-top:1px solid var(--hairline); } .pie__marca{ justify-self:end; display:flex; align-items:center; min-height:44px; color:var(--chalk); } .pie__marca svg{ height:calc(var(--alto-marca) * 1.2); width:auto; } /* compensa: sus letras ocupan sólo 27% del alto del logo */ .pie__sep{ width:1px; height:calc(var(--alto-marca) * 1.8); background:var(--line); } .pie__base{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:0.75rem; color:var(--dim); letter-spacing:.06em; } .pie__base a{ min-height:44px; display:inline-flex; align-items:center; margin-block:-0.875rem; } .pie__base a:hover{ color:var(--chalk); } /* Firma de la agencia: va en todos los sitios de Crossity, enlazada a crossity.ar. El PNG es negro; se pinta con máscara para tomar el color de la tiza. */ .firma{ justify-self:start; display:inline-flex; align-items:center; gap:0.625rem; min-height:44px; font-size:0.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); transition:color .3s; } .firma__logo{ height:var(--alto-marca); aspect-ratio:358/102; background:currentColor; -webkit-mask:url('../img/crossity.png') center/contain no-repeat; mask:url('../img/crossity.png') center/contain no-repeat; } .firma:hover{ color:var(--chalk); } /* Revelados genéricos (los arma el JS; sin JS todo queda visible) */ .js [data-reveal]{ opacity:0; transform:translateY(1.75rem); } /* ========================================================================== Mobile: el corte es 900px (tablet vertical queda del lado mobile) ========================================================================== */ @media (max-width:900px){ :root{ --vw:min(1vw, 5.6px); } html{ font-size:calc(var(--vw) * 100 / 27.5); } /* valores que en la referencia mobile (440) resuelven distinto que en desktop (1512) */ :root{ --gutter:calc(var(--vw) * 4); } .volanta{ margin:0 0 1.75rem; } .volanta--chica{ margin-bottom:0.625rem; } .titulo-xl{ font-size:2rem; } .precarga__molino{ width:7.5rem; } .precarga__txt{ top:calc(50% + var(--radio, 7.5rem * .354) + 2.125rem); } .nav__logo{ width:9.375rem; } .menu nav a{ font-size:calc(var(--vw) * 9); } .hero__marca{ width:10.625rem; } .fecha{ padding-block:6.875rem; } .fecha__grid{ gap:2.5rem; } .fecha__titulo{ font-size:1.7rem; } .lineup li{ font-size:1.15rem; } .lineup__head{ font-size:2.4rem !important; } .enlace--grande{ font-size:1.3rem; } .manifiesto{ padding-block:6.25rem; } .manifiesto__texto{ font-size:1.3rem; } .manifiesto__cols{ margin-top:4rem; } .cinta__pista span{ font-size:.95rem; } .venues__pista{ gap:1.25rem; } .venue__txt{ padding:1.75rem; } .venue h3{ font-size:2.4rem; } .archivo{ padding-block:6.875rem 5rem; } .galeria{ margin-block:3.5rem; } .edicion__nombre{ font-size:1.6rem; } .diferencial{ padding-block:5.625rem; } .dif h3{ font-size:1.1rem; } .residentes{ padding-block:3.75rem; } .residentes__pista span{ font-size:1.05rem; } .crew{ padding-block:6.25rem; } .crew__marco{ padding:3rem calc(var(--vw) * 5); } .crew__arriba{ font-size:1.2rem; } .crew__titulo{ font-size:3rem; } .marcas{ padding-block:5rem; } .marcas__txt{ font-size:1rem; } .pie{ padding-top:4.375rem; } .pie__marcas{ column-gap:1.25rem; } .pie__marcas{ margin-top:3.5rem; } :root{ --nav-h:4rem; } .nav__links, .nav__tickets{ display:none; } .nav{ justify-content:space-between; } .nav__menu{ display:grid; place-content:center; gap:0.375rem; width:44px; height:44px; margin-right:-0.625rem; position:relative; z-index:2; } .nav__menu span:not(.vh){ display:block; width:1.375rem; height:1.5px; background:var(--chalk); transition:transform .4s var(--ease-out); } .nav__menu[aria-expanded="true"] span:nth-child(1){ transform:translateY(0.2344rem) rotate(45deg); } .nav__menu[aria-expanded="true"] span:nth-child(2){ transform:translateY(-0.2344rem) rotate(-45deg); } .hide-m{ display:none !important; } .hero{ height:220vh; } /* tres líneas, elegidas en el laboratorio (C: ancho 75 · exper 88 · linea3 125 · aire 1.22): "exclusivas" ocupa el 75% del ancho útil, "Experiencias" el 88% de eso y "en locaciones únicas" el 125%. Tamaños en cqw del titular (= ancho útil) a partir de anchos medidos: palabra = k × tamaño de fuente, k Experiencias 5.395 · exclusivas 4.757 · en locaciones únicas 8.854. El vw de antes es respaldo (ancho útil ≈ 91.5vw). */ .hero__titulo{ font-size:calc(var(--vw) * 7.4); line-height:1.22; container-type:inline-size; } .hero__titulo .linea:first-child > span{ display:block; } .hero__titulo .linea:first-child > span > *{ display:block; } .hero__titulo .linea:first-child .l{ font-size:calc(var(--vw) * 11.19); font-size:12.23cqw; } .hero__titulo .linea:first-child b{ font-size:calc(var(--vw) * 14.43); font-size:15.77cqw; } .hero__titulo .linea:nth-child(2){ font-size:calc(var(--vw) * 9.69); font-size:10.59cqw; } .hero__pie{ font-size:0.6875rem; } .fecha__grid{ grid-template-columns:1fr; align-items:start; } .fecha__num{ font-size:calc(var(--vw) * 36); } .manifiesto__cols{ grid-template-columns:1fr; } .manifiesto__texto br.d{ display:none; } /* en mobile el texto corre libre */ /* Venues: sin pin horizontal; carrusel con scroll-snap */ .venues__pin{ height:auto; padding-block:5.625rem 2.5rem; } .venues__pista{ width:auto; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:0.5rem; transform:none !important; scroll-padding-inline:var(--gutter); } .venues__pista::-webkit-scrollbar{ display:none; } .venue{ width:calc(var(--vw) * 86); height:auto; grid-template-columns:1fr; grid-template-rows:auto 1fr; scroll-snap-align:start; } .venue__arte{ border-right:0; border-bottom:1px solid var(--hairline); height:15rem; padding:1.75rem; } .venue__foto{ border-right:0; border-bottom:1px solid var(--hairline); height:15rem; } .venue__n{ margin-bottom:1rem; } .g{ height:58vh; max-height:28.75rem; } .edicion{ grid-template-columns:1fr auto; gap:0.375rem 1rem; padding:1.375rem 0; } .edicion__fecha{ grid-column:1; grid-row:1; } .edicion__lugar{ grid-column:2; grid-row:1; } .edicion__nombre{ grid-column:1 / -1; } .edicion__line{ grid-column:1 / -1; } .ediciones__preview{ display:none; } .dif{ grid-template-columns:1fr; } .dif li:last-child{ border-bottom:0; } .dif li{ border-image:var(--linea-roja) 1; border-right:0; border-bottom:1px solid var(--hairline); padding:1.5rem 0; min-height:0; display:grid; grid-template-columns:2.5rem 1fr; column-gap:0.75rem; } .dif__n{ grid-row:1 / 3; margin:0.25rem 0 0; } .dif h3{ margin:0 0 0.375rem; min-height:0; } .marcas__grid{ grid-template-columns:1fr; } .pie__cols{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ /* pie elegido en el laboratorio (B, en px del iPhone de 440): logo 23.5 · Crossity 15.5 · "Powered by" 7.5 · hueco 4 · a cada lado de la línea 20 */ .pie__marcas{ --alto-marca:0.96875rem; column-gap:1.25rem; } .pie__marca svg{ height:1.46875rem; } .pie__sep{ height:2.1875rem; } .firma{ font-size:0.46875rem; gap:0.25rem; } .pie__cols{ grid-template-columns:1fr; gap:1.25rem; } .fecha__acciones .btn{ width:100%; justify-content:center; } } /* ========================================================================== Movimiento reducido: sin precarga, sin grano animado, todo quieto y visible ========================================================================== */ @media (prefers-reduced-motion:reduce){ .precarga{ display:none; } .grano{ animation:none; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .js [data-reveal]{ opacity:1; transform:none; } .manifiesto__texto .pal{ opacity:1; } .hero{ height:auto; } .hero__pin{ position:relative; } }