/* ============================================================================ Brothers — landing + detalle de evento Sin frameworks. Mobile-first. Paleta y tipografia del sitio real del cliente. ========================================================================== */ /* ---------------------------------------------------------------- tokens -- */ :root { --ink: #060606; --hairline: #ffffff21; --hairline-strong: #ffffff38; --acid: #f5e14b; --magenta: #ff3d92; --violet: #a78bfa; --notch: 11px; --display: "Anton", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif; --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --maxw: 1440px; --pad: clamp(18px, 2.4vw, 34px); --tk-gap: 14px; --ease: cubic-bezier(.22, .61, .36, 1); --t: .38s var(--ease); --w-90: rgba(255, 255, 255, .9); --w-70: rgba(255, 255, 255, .7); --w-55: rgba(255, 255, 255, .55); --w-40: rgba(255, 255, 255, .4); } @media (min-width: 900px) { :root { --tk-gap: 14px; } } /* ------------------------------------------------------------------ base -- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--ink); color: #fff; font-family: var(--body); font-weight: 300; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, picture, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--acid); color: var(--ink); } /* Skip link accesible */ .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: #fff; color: var(--ink); padding: 10px 16px; font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; } .skip:focus { left: 8px; top: 8px; } /* ------------------------------------------------------------ tipografia -- */ .display, .h1, .h2, .h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0; /* Nunca por debajo de 1: con menos, las mayúsculas acentuadas (Ú, Á, É) se cortan contra la línea de arriba. */ line-height: 1; } .h2 { font-size: clamp(30px, 5.2vw, 46px); line-height: 1.03; } .h3 { font-size: clamp(22px, 3vw, 28px); } /* Kicker con hairline acid: la firma editorial que separa esta landing del sitio viejo del cliente sin salirse de la paleta. */ .kicker { font-family: var(--body); font-weight: 700; font-size: 10px; letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; color: var(--w-55); margin-bottom: 14px; display: flex; align-items: center; gap: 11px; } .kicker::before { content: ""; flex: 0 0 auto; width: 22px; height: 1px; background: var(--acid); } .label { font-family: var(--body); font-weight: 700; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; } .lede { font-weight: 300; font-size: 14px; line-height: 1.65; color: var(--w-70); } /* ---------------------------------------------------------------- layout -- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .section { padding-block: clamp(52px, 7vw, 92px); border-top: 1px solid var(--hairline); } .section--flush { border-top: 0; } /* Animacion de entrada sutil. Va detras de .js-reveal (clase que app.js pone en al arrancar): si el JS no corre, el contenido queda visible en vez de una pagina en blanco. */ .js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); will-change: opacity, transform; } .js-reveal .reveal.is-in { opacity: 1; transform: none; } /* ---------------------------------------------------------------- header -- */ .hdr { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--hairline); background: rgba(6, 6, 6, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background var(--t), border-color var(--t); } .hdr.is-scrolled { background: rgba(6, 6, 6, .82); border-bottom-color: var(--hairline-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .hdr__in { max-width: var(--maxw); margin-inline: auto; padding: 14px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .hdr__logo img { height: 22px; width: auto; } @media (min-width: 900px) { .hdr__logo img { height: 26px; } } .btn-outline { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--hairline-strong); border-radius: 3px; padding: 11px 18px; font-family: var(--body); font-weight: 700; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #fff; white-space: nowrap; transition: border-color var(--t), background var(--t), color var(--t); } .btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .06); } .btn-outline .arrow { font-size: 11px; opacity: .8; } @media (min-width: 900px) { .btn-outline { padding: 12px 26px; } } /* ------------------------------------------------------------------ hero -- */ .hero { position: relative; min-height: 78vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; margin-top: -1px; } @media (min-width: 900px) { .hero { min-height: 92vh; } } .hero__media { position: absolute; inset: 0; z-index: 0; } /* Capa que se mueve con el parallax. El overlay (::after de .hero__media) queda fuera para que el degradé no se despegue del texto al scrollear. */ .hero__layer { position: absolute; inset: 0; will-change: transform; } /* picture es inline por defecto: la img se posiciona absoluta para cubrir */ .hero__media picture { display: block; } .hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 62%; } /* El video entra con cross-fade recién cuando puede reproducir: hasta ahí se ve el poster/imagen y nunca hay un flash negro. */ .hero__media video { opacity: 0; transition: opacity .9s var(--ease); pointer-events: none; } .hero__media video.is-ready { opacity: 1; } /* Doble overlay: oscurece izquierda/abajo y deja respirar arriba/derecha */ .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--ink) 0%, rgba(6, 6, 6, .6) 34%, rgba(6, 6, 6, .04) 80%), linear-gradient(to right, rgba(6, 6, 6, .88) 0%, rgba(6, 6, 6, .5) 40%, rgba(6, 6, 6, .04) 100%); } .hero__in { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 0 var(--pad) clamp(38px, 8vw, 115px); } .hero__title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 10.1vw, 145px); line-height: 1.04; letter-spacing: -.005em; } .hero__title span { display: block; } .hero__sub { margin-top: clamp(18px, 2.4vw, 30px); font-weight: 300; font-size: 13px; line-height: 1.55; color: var(--w-70); max-width: 42ch; } /* ----------------------------------------------------------------- about -- */ .about__grid { display: grid; gap: clamp(26px, 4vw, 44px); } .about__title { font-size: clamp(32px, 4.1vw, 60px); line-height: 1.06; } .about__title span { display: block; } .about__text { max-width: 46ch; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); } .stat { padding: 4px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .stat + .stat { border-left: 1px solid var(--hairline); } .stat__icon { width: clamp(28px, 3vw, 42px); height: auto; aspect-ratio: 1; } .stat__icon--star { color: var(--acid); } .stat__icon--ticket { color: var(--magenta); } .stat__icon--globe { color: var(--violet); } .stat__value { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.9vw, 42px); line-height: 1; letter-spacing: .01em; } .stat__label { font-weight: 700; font-size: 9px; letter-spacing: .18em; line-height: 1.6; text-transform: uppercase; color: var(--w-55); max-width: 13ch; } @media (min-width: 900px) { .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.1fr); align-items: start; gap: clamp(28px, 3.4vw, 48px); } .about__text { font-size: 14px; max-width: 28ch; } .stat { padding: 8px 14px 4px; gap: 18px; } .stat:first-child { border-left: 1px solid var(--hairline); } } /* ---------------------------------------------------------------- eventos -- */ .events__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 3vw, 34px); } .events__title { max-width: 16ch; } .rail-nav { display: none; gap: 10px; flex-shrink: 0; } @media (min-width: 900px) { .rail-nav:not([hidden]) { display: flex; } } .rail-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: 3px; color: #fff; transition: border-color var(--t), background var(--t), opacity var(--t); } .rail-btn:hover:not(:disabled) { border-color: #fff; background: rgba(255, 255, 255, .06); } .rail-btn:disabled { opacity: .3; cursor: default; } .rail-btn svg { width: 17px; height: 17px; } .rail-outer { max-width: var(--maxw); margin-inline: auto; } .rail { display: flex; gap: var(--tk-gap); padding-inline: var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline-start: var(--pad); -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; } .rail::-webkit-scrollbar { display: none; } /* 1–2 eventos: sin carrusel, cards centradas con su ancho natural */ .rail--few { overflow-x: visible; scroll-snap-type: none; justify-content: center; flex-wrap: wrap; } .rail--few .ticket { flex: 0 0 auto; width: min(332px, calc(100vw - var(--pad) * 2)); } /* ------------------------------------------------------------ ticket card -- */ .ticket { position: relative; flex: 0 0 min(70vw, 300px); aspect-ratio: .757; scroll-snap-align: start; border-radius: 5px; padding: 20px; display: flex; flex-direction: column; color: var(--tk-ink, #060606); background: linear-gradient(150deg, var(--tk-from, #d8e626), var(--tk-to, #4fd18b)); transition: transform var(--t), box-shadow var(--t), filter var(--t); } .ticket:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .85); } .ticket:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } @media (min-width: 900px) { .rail:not(.rail--few) .ticket { flex: 0 0 calc((100% - var(--tk-gap) * 3) / 4); } } .ticket__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .ticket__city { font-weight: 700; font-size: 10px; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; max-width: 8em; overflow-wrap: anywhere; } .ticket__date { text-align: right; line-height: 1; } .ticket__day { display: block; font-family: var(--display); font-size: clamp(34px, 2.9vw, 42px); line-height: .86; letter-spacing: .01em; } .ticket__mon { display: block; font-family: var(--display); font-size: 12px; letter-spacing: .06em; margin-top: 6px; } .ticket__yr { display: block; font-weight: 700; font-size: 9px; letter-spacing: .1em; opacity: .75; margin-top: 3px; } .ticket__name { margin-top: clamp(18px, 2vw, 28px); font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(36px, 3.9vw, 56px); line-height: 1; letter-spacing: 0; overflow-wrap: anywhere; } .ticket__venue { margin-top: auto; font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; } /* Perforacion: linea punteada full-bleed + notches medio afuera */ .ticket__perf { position: relative; margin: 20px -20px 0; border-top: 1px dashed rgba(0, 0, 0, .35); } .ticket__perf::before, .ticket__perf::after { content: ""; position: absolute; top: 0; width: calc(var(--notch) * 2); height: calc(var(--notch) * 2); border-radius: 50%; background: var(--ink); transform: translateY(-50%); } .ticket__perf::before { left: calc(var(--notch) * -1); } .ticket__perf::after { right: calc(var(--notch) * -1); } .ticket__stub { margin-top: 16px; padding-bottom: clamp(10px, 2.4vw, 34px); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } /* Acción del talón: ocupa el lugar que tenía el precio (lo maneja la ticketera) y le da al lado izquierdo el mismo peso visual que el barcode del derecho. */ .ticket__cta { font-weight: 700; font-size: clamp(12px, 1vw, 14px); letter-spacing: .12em; text-transform: uppercase; padding-bottom: 5px; border-bottom: 1px solid currentColor; opacity: .75; transition: opacity var(--t); } .ticket:hover .ticket__cta, .ticket:focus-visible .ticket__cta { opacity: 1; } .ticket__right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .ticket__plus { width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 400; line-height: 1; opacity: .8; } /* Barcode decorativo, barras de ancho variado */ .ticket__barcode { width: clamp(70px, 6vw, 92px); height: 28px; opacity: .85; background-image: repeating-linear-gradient( 90deg, #000 0 2px, transparent 2px 4px, #000 4px 5px, transparent 5px 7px, #000 7px 10px, transparent 10px 11px, #000 11px 12px, transparent 12px 15px, #000 15px 17px, transparent 17px 18px ); } /* Estados */ .ticket--soldout { filter: grayscale(.62); } .ticket--soldout::after { content: ""; position: absolute; inset: 0; border-radius: 5px; background: rgba(6, 6, 6, .2); pointer-events: none; } .ticket__badge { position: absolute; top: 54%; left: 50%; transform: translate(-50%, -50%) rotate(-4deg); z-index: 2; background: var(--ink); color: #fff; font-family: var(--display); font-size: 18px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 16px 6px; border-radius: 2px; white-space: nowrap; } /* Empty state de eventos */ .empty { text-align: center; padding-block: clamp(30px, 5vw, 56px); display: grid; justify-items: center; gap: 18px; } .empty p { max-width: 44ch; } .btn-solid { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); border-radius: 3px; padding: 14px 26px; font-family: var(--body); font-weight: 700; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; transition: opacity var(--t), transform var(--t); } .btn-solid:hover { opacity: .85; } /* ------------------------------------------------------------------- bag -- */ .bag { text-align: center; } .bag img { width: 200px; margin-inline: auto; } @media (min-width: 900px) { .bag img { width: 205px; } } .bag__caption { margin-top: clamp(20px, 2.6vw, 30px); font-weight: 300; font-size: 13px; color: var(--w-90); } /* ------------------------------------------------------------ newsletter -- */ .nl__grid { display: grid; gap: clamp(24px, 3vw, 40px); } @media (min-width: 900px) { .nl__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; gap: clamp(40px, 6vw, 110px); } } .nl__title span { display: block; } .nl__text { max-width: 46ch; font-size: 13px; } .nl__form { margin-top: 18px; position: relative; max-width: 360px; } .nl__form input { width: 100%; background: transparent; border: 1px solid var(--hairline); border-radius: 4px; padding: 15px 52px 15px 16px; font-weight: 300; font-size: 13px; color: #fff; transition: border-color var(--t); } .nl__form input::placeholder { color: var(--w-40); } .nl__form input:focus { border-color: var(--hairline-strong); outline: none; } .nl__form input:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; } .nl__submit { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 3px; color: var(--w-70); transition: color var(--t), background var(--t); } .nl__submit:hover { color: #fff; background: rgba(255, 255, 255, .07); } .nl__submit svg { width: 17px; height: 17px; } .nl__submit[aria-busy="true"] { opacity: .5; pointer-events: none; } .nl__msg { margin-top: 12px; font-size: 12px; font-weight: 400; min-height: 1.2em; } .nl__msg[data-state="ok"] { color: var(--acid); } .nl__msg[data-state="error"] { color: var(--magenta); } .nl__msg[data-state="loading"] { color: var(--w-55); } /* ---------------------------------------------------------------- footer -- */ .ftr { border-top: 1px solid var(--hairline); padding-block: 26px 30px; } .ftr__in { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); display: flex; flex-direction: column; gap: 18px; } .ftr__brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ftr__brand img { height: 18px; width: auto; } .ftr__note { font-weight: 300; font-size: 11px; color: var(--w-40); } .ftr__social { display: flex; gap: 22px; flex-wrap: wrap; } .ftr__social a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--w-70); transition: color var(--t); } .ftr__social a:hover { color: #fff; } .ftr__social svg { width: 14px; height: 14px; } @media (min-width: 900px) { .ftr { padding-block: 22px; } .ftr__in { flex-direction: row; align-items: center; justify-content: space-between; } .ftr__brand { gap: 34px; flex: 1; justify-content: flex-start; } } /* ================================================== pagina de evento ====== */ .ev-hero { position: relative; min-height: 58vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; } @media (min-width: 900px) { .ev-hero { min-height: 64vh; } } .ev-hero__bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; } /* Sin flyer: gradiente del tema + negro fuerte, sigue viendose premium */ .ev-hero__bg--theme { background-image: linear-gradient(150deg, var(--tk-from), var(--tk-to)); } .ev-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--ink) 2%, rgba(6, 6, 6, .78) 34%, rgba(6, 6, 6, .3) 100%), linear-gradient(to right, rgba(6, 6, 6, .9) 0%, rgba(6, 6, 6, .45) 55%, rgba(6, 6, 6, .25) 100%); } .ev-hero__bg--theme::after { background: linear-gradient(to top, var(--ink) 8%, rgba(6, 6, 6, .74) 46%, rgba(6, 6, 6, .18) 100%), linear-gradient(to right, rgba(6, 6, 6, .78) 0%, rgba(6, 6, 6, .38) 62%, rgba(6, 6, 6, .1) 100%); } .ev-hero__in { width: 100%; max-width: var(--maxw); margin-inline: auto; padding: clamp(30px, 5vw, 56px) var(--pad) clamp(30px, 4.5vw, 58px); } .back-link { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--w-55); transition: color var(--t); } .back-link:hover { color: #fff; } .ev-hero__kicker { margin: clamp(22px, 3vw, 34px) 0 12px; } .ev-hero__title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 7.6vw, 100px); line-height: 1; letter-spacing: -.005em; max-width: 15ch; } .ev-badge { display: inline-block; margin-top: 16px; border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--w-70); } .ev-badge--soldout { border-color: var(--magenta); color: var(--magenta); } .ev-badge--soon { border-color: var(--acid); color: var(--acid); } .ev-meta { margin-top: clamp(24px, 3.4vw, 38px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; border-top: 1px solid var(--hairline); padding-top: 20px; } .ev-meta__item { padding: 2px 20px 2px 0; border-right: 1px solid var(--hairline); } /* Mobile: 2 columnas. El de la derecha cierra la fila, no lleva divisor. */ .ev-meta__item:nth-child(2n) { border-right: 0; } /* Cantidad impar (el caso normal: FECHA | HORA | VENUE, sin precio): el último toma la fila entera en vez de quedar solo en media columna con un divisor colgando al lado de la nada. */ .ev-meta__item:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; padding-right: 0; } @media (min-width: 900px) { .ev-meta { display: flex; flex-wrap: wrap; } .ev-meta__item { margin-right: 20px; border-right: 1px solid var(--hairline); } /* En una sola fila el divisor va entre TODOS los datos: acá no hay columna par que cierre nada, así que se revierte la regla de mobile. */ .ev-meta__item:nth-child(2n) { border-right: 1px solid var(--hairline); } .ev-meta__item:last-child { border-right: 0; margin-right: 0; padding-right: 0; } } .ev-meta__k { display: block; font-weight: 700; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--w-40); margin-bottom: 6px; } .ev-meta__v { display: block; font-weight: 400; font-size: 13px; color: var(--w-90); } /* ============================================================ zona widget == El widget de venta es EL punto del detalle: va centrado, ancho y alto. No es una columna lateral. El alto es contenido de terceros y cross-origin: no se puede medir desde acá. Por eso lo define el panel (`height` del widget → --w-h, lo escribe event.js) con un default generoso, y el CSS le agrega un piso relativo al viewport para que nunca quede una ventanita con scroll adentro. ========================================================================== */ .widget-zone { width: 100%; max-width: 1180px; margin-inline: auto; margin-top: clamp(22px, 3vw, 34px); } /* En mobile el iframe se queda con casi todo el ancho: el padding del wrap le roba lo que el proveedor necesita para su grilla de tickets. */ .widget-zone--frame { margin-inline: calc(var(--pad) * -.6); width: auto; } @media (min-width: 700px) { .widget-zone--frame { margin-inline: auto; width: 100%; } } .widget-frame { border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; background: #0c0c0e; } .widget-frame__el { display: block; width: 100%; border: 0; height: var(--w-h, 1100px); min-height: 520px; } @supports (height: 100svh) { /* Piso: el widget siempre ocupa el viewport útil, aunque venga configurado corto. Nunca por encima del alto pedido en el panel. */ .widget-frame__el { min-height: min(660px, calc(100svh - var(--hdr-h, 64px) - 24px)); } } /* Sin iframe (link directo o "próximamente") la zona sigue siendo el centro de la página, pero como panel: nunca una caja rota ni un hueco vacío. */ .widget-zone--link, .widget-zone--soon { max-width: 720px; border: 1px solid var(--hairline); border-radius: 10px; padding: clamp(26px, 4vw, 44px); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)); } .widget-cta { max-width: 420px; margin-inline: auto; text-align: center; display: grid; gap: 14px; justify-items: center; } .btn-buy { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; background: #fff; color: var(--ink); border-radius: 4px; padding: 20px 28px 17px; font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: .02em; text-transform: uppercase; transition: transform var(--t), box-shadow var(--t); } .btn-buy:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -16px rgba(255, 255, 255, .5); } .widget-cta__note { font-size: 12px; color: var(--w-55); } .widget-note { margin-top: 16px; text-align: center; font-weight: 300; font-size: 11px; color: var(--w-40); } #widget-mount { min-height: 60px; } /* Info del evento — debajo del widget, nunca compitiendo con él. */ .ev-info__grid { display: grid; gap: clamp(30px, 4vw, 48px); } @media (min-width: 900px) { .ev-info__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: start; } } .ev-desc { font-weight: 300; font-size: 15px; line-height: 1.7; color: var(--w-90); max-width: 62ch; } .lineup { list-style: none; border-top: 1px solid var(--hairline); } .lineup li { border-bottom: 1px solid var(--hairline); padding: 14px 0; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.1; text-transform: uppercase; } /* Estado evento inexistente / dado de baja. Es una pantalla del sitio, no un 404 pelado de nginx: se llega acá tanto por un slug inventado como por una fiesta que el panel despublicó. */ .ev-missing { min-height: 62vh; display: grid; align-content: center; justify-items: start; gap: 20px; max-width: 620px; padding-block: clamp(60px, 10vw, 120px); } .ev-missing .kicker { color: var(--w-40); margin-bottom: 0; } .ev-missing__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 6px; } /* ============================================================================ CAPA MODERNA — grain, reveal por líneas, scroll cue, marquee, countdown, profundidad en los tickets, contadores y transición entre páginas. Todo aditivo: si el JS no corre o hay reduced-motion, se cae a lo de arriba. ========================================================================== */ /* ----------------------------------------------------------------- grain -- */ /* Ruido generado con feTurbulence inline (data-URI). Sin pedidos de red. */ .grain::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 170px 170px; animation: grainBoil 1.1s steps(1, end) infinite; } @keyframes grainBoil { 0%, 100% { background-position: 0px 0px; } 10% { background-position: -13px -7px; } 20% { background-position: 9px -14px; } 30% { background-position: -17px 11px; } 40% { background-position: 14px 6px; } 50% { background-position: -6px 16px; } 60% { background-position: 12px -9px; } 70% { background-position: -14px -12px; } 80% { background-position: 7px 13px; } 90% { background-position: -9px 5px; } } /* ------------------------------------------------- reveal linea por linea -- */ /* .ln = máscara. El padding + margen negativo dan aire arriba para que la máscara no coma los acentos de las mayúsculas (Ú, Á, É) sin tocar el interlineado real, que sigue >= 1. */ .ln { display: block; overflow: hidden; padding-top: .14em; margin-top: -.14em; padding-bottom: .08em; margin-bottom: -.08em; } .ln > span { display: block; } /* El estado oculto vive detrás de .lines, que la pone el JS justo antes de animar: sin JS (o con JS caído) el título se ve igual que siempre. */ .lines .ln > span { transform: translateY(115%); opacity: 0; } .lines.is-in .ln > span, .reveal.is-in .lines .ln > span { animation: lineUp .9s var(--ease) both; } @keyframes lineUp { from { transform: translateY(115%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ------------------------------------------------------------ scroll cue -- */ .hero__cue { position: absolute; right: var(--pad); bottom: clamp(30px, 5vw, 58px); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none; } .hero__cue-label { font-weight: 700; font-size: 9px; letter-spacing: .28em; line-height: 1; text-transform: uppercase; color: var(--w-40); writing-mode: vertical-rl; } .hero__cue-line { position: relative; width: 1px; height: 56px; overflow: hidden; background: var(--hairline-strong); } .hero__cue-line::after { content: ""; position: absolute; inset: 0 auto auto 0; width: 1px; height: 46%; background: var(--acid); animation: cueRun 2s var(--ease) infinite; } @keyframes cueRun { 0% { transform: translateY(-110%); } 100% { transform: translateY(230%); } } /* --------------------------------------------------------------- marquee -- */ .mq { position: relative; display: flex; align-items: center; height: 44px; overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--ink); } /* La banda ya aporta su propia hairline: la sección siguiente no repite. */ .mq + .section { border-top: 0; } @media (min-width: 900px) { .mq { height: 54px; } } .mq__track { display: flex; flex: 0 0 auto; width: max-content; will-change: transform; animation: mqRun var(--mq-dur, 26s) linear infinite; } .mq:hover .mq__track { animation-play-state: paused; } .mq__set { display: flex; align-items: center; flex: 0 0 auto; } .mq__item { font-family: var(--display); font-weight: 400; font-size: 19px; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: var(--w-90); } .mq__sep { color: var(--acid); font-size: 15px; line-height: 1; padding: 0 16px; } @media (min-width: 900px) { .mq__item { font-size: 22px; } .mq__sep { padding: 0 24px; } } @keyframes mqRun { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Sin movimiento: una sola tanda, centrada y quieta. */ .mq__track--static { animation: none; width: auto; margin-inline: auto; flex-wrap: wrap; justify-content: center; } /* Sin loop no hay a qué separar: fuera el bullet final. */ .mq__track--static .mq__set > .mq__sep:last-child { display: none; } /* ------------------------------------------------------------- countdown -- */ .cd { position: relative; display: block; overflow: hidden; border: 1px solid var(--hairline); border-radius: 6px; padding: clamp(20px, 2.6vw, 30px); margin-bottom: clamp(26px, 3.4vw, 40px); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)); transition: border-color var(--t), background var(--t); } .cd:hover { border-color: var(--hairline-strong); } .cd::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 22%; background: var(--acid); transition: width .5s var(--ease); } .cd:hover::before { width: 100%; } .cd .kicker { color: var(--acid); margin-bottom: 10px; } .cd__name { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.04; text-transform: uppercase; } .cd__meta { margin-top: 8px; font-weight: 300; font-size: 12px; color: var(--w-55); } .cd__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 20px; } .cd__cell { text-align: center; padding: 2px 4px; } .cd__cell + .cd__cell { border-left: 1px solid var(--hairline); } .cd__num { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 5.4vw, 52px); line-height: 1.02; letter-spacing: .01em; font-variant-numeric: tabular-nums; } .cd__lbl { display: block; margin-top: 8px; font-weight: 700; font-size: 9px; letter-spacing: .18em; line-height: 1.4; text-transform: uppercase; color: var(--w-40); } @media (min-width: 900px) { .cd { display: flex; align-items: center; justify-content: space-between; gap: clamp(30px, 5vw, 70px); } .cd__grid { margin-top: 0; flex: 0 0 auto; min-width: 430px; } } /* Variante del detalle: no es link, va en la columna angosta y no repite la meta del evento (fecha/venue ya están en el hero). */ .cd.cd--self { display: block; margin-bottom: 0; } .cd.cd--self::before { width: 100%; } .cd.cd--self .cd__grid { margin-top: 16px; min-width: 0; } .cd.cd--self .cd__num { font-size: clamp(28px, 3.4vw, 44px); } /* ------------------------------------------- profundidad en los tickets --- */ @media (hover: hover) and (pointer: fine) { /* Barrido de luz diagonal en hover. pointer-events:none para no comerse el click del link ni tapar los notches de la perforación. */ .ticket::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 5px; pointer-events: none; opacity: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .5) 47%, rgba(255, 255, 255, 0) 63%); transform: translateX(-115%); } .ticket:hover::before { animation: tkShine .85s var(--ease) forwards; } /* Durante el tilt el transform lo maneja el rAF: sin transición para que no vaya atrasado. Al salir vuelve la transición y el retorno es suave. */ .ticket.is-tilt { transition: box-shadow var(--t), filter var(--t); will-change: transform; } } @keyframes tkShine { 0% { transform: translateX(-115%); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateX(115%); opacity: 0; } } /* Cada ticket "prende" con el color de su propio tema. */ @supports (color: color-mix(in srgb, red 50%, transparent)) { .ticket:hover { box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .85), 0 18px 64px -26px color-mix(in srgb, var(--tk-from, #d8e626) 75%, transparent); } } /* ------------------------------------------- detalle: la venta, al medio --- Antes el widget era una columna lateral sticky. Ahora es el bloque central y ancho de la página: entrás al detalle para comprar, no para leer. */ .section--sell { border-top: 0; /* pegado al hero, sin línea de corte */ padding-top: clamp(32px, 4.4vw, 58px); } .ev-sell { max-width: 1180px; margin-inline: auto; } .ev-sell__head { display: grid; justify-items: center; text-align: center; } .ev-sell__head .kicker { justify-content: center; } .ev-sell__title { margin-bottom: 0; } /* Cuenta regresiva al evento, entre el título y el widget. */ .ev-sell__cd { max-width: 760px; margin: clamp(22px, 3vw, 30px) auto 0; } .ev-sell__cd .cd { margin-bottom: 0; } /* ------------------------------------------------ transición entre páginas */ @view-transition { navigation: auto; } body[data-page="event"] .ev-hero { view-transition-name: ev-media; } ::view-transition-old(ev-media), ::view-transition-new(ev-media) { animation-duration: .5s; animation-timing-function: var(--ease); } /* Skeleton del hero mientras llega el JSON, sólo durante una view transition. */ .ev-hero--skeleton .ev-hero__in { visibility: hidden; } /* -------------------------------------------------- reduced motion / print */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js-reveal .reveal { opacity: 1; transform: none; } .rail { scroll-behavior: auto; } .ticket:hover { transform: none; } /* El reset de arriba dejaría el marquee clavado en su posición final: lo desactivamos del todo y queda estático. */ .mq__track { animation: none !important; transform: none !important; } .grain::after { animation: none !important; } .hero__cue-line::after { animation: none !important; transform: none !important; opacity: .55; } .lines .ln > span { transform: none !important; opacity: 1 !important; animation: none !important; } .ticket::before { animation: none !important; opacity: 0 !important; } .hero__media video { transition: none !important; } @view-transition { navigation: none; } }