del componente React original: el sitio no tiene build step y el efecto no necesita markup. Fijos al viewport, sin animación y sin pointer-events: el coste es una capa compuesta, no repaints al hacer scroll. ========================================================================== */ body::before, body::after { content: ''; position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; } /* Franjas: degradado rojo que cae de arriba a abajo, recortado en bandas verticales por la máscara y sesgado 45° como en la referencia. */ body::before { background: linear-gradient(rgba(204, 0, 0, 0.55) 0%, rgba(204, 0, 0, 0) 85%); -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 17%, rgba(0,0,0,0.28) 27%, rgb(0,0,0) 38%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.13) 62%, rgb(0,0,0) 74%, rgba(0,0,0,0.42) 86%, rgba(0,0,0,0) 97%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 17%, rgba(0,0,0,0.28) 27%, rgb(0,0,0) 38%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.13) 62%, rgb(0,0,0) 74%, rgba(0,0,0,0.42) 86%, rgba(0,0,0,0) 97%); transform: skewX(45deg); opacity: 0.2; } /* Retícula de puntos + grano. El grano es un feTurbulence SVG inline: el componente original tiraba de una PNG de framerusercontent.com y este sitio no carga nada de terceros (todo el banner de cookies se apoya en eso). */ body::after { background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.5) 1px, transparent 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); background-size: 20px 20px, 150px 150px; opacity: 0.12; } /* El [hidden]{display:none} del navegador tiene especificidad de tipo, así que cualquier `display` propio lo anula en silencio: .btn es inline-flex y el botón "ver más" seguía visible tras ocultarlo desde JS. */ [hidden] { display: none !important; } img, video { max-width: 100%; display: block; } /* El margin del user-agent (1em 40px) descuadraba figures caso por caso */ figure { margin: 0; } a { color: inherit; } /* Archivo no es caps-only como Bebas: el uppercase que antes venía "gratis" de la fuente ahora lo pone el CSS, para conservar el mismo lenguaje visual. */ h1, h2, h3 { font-family: var(--font-display); font-weight: 800; font-stretch: 125%; letter-spacing: 0.01em; text-transform: uppercase; margin: 0; } p { margin: 0; } button { font-family: inherit; cursor: pointer; } .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100%; left: 16px; background: var(--red); color: var(--white); padding: 10px 18px; z-index: var(--z-skip); font-family: var(--font-mono); font-size: 0.85rem; text-decoration: none; transition: top 0.2s var(--ease); } .skip-link:focus { top: 16px; } /* Anillo blanco con halo negro: visible sobre rojo, foto, video y gradiente por igual (el anillo rojo anterior desaparecía sobre superficies rojas) */ :focus-visible { outline: 2px solid var(--white); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.85); } /* ========================================================================== Nav ========================================================================== */ /* Tres zonas reales: logo a la izquierda, menú centrado de verdad y CTA a la derecha (elegido por el usuario 10/08/26). Con las columnas 1fr auto 1fr el menú queda centrado respecto al viewport, no respecto al hueco que dejan los otros dos — que es lo que delata a una barra hecha con space-between. */ .nav { position: fixed; top: 0; left: 0; right: 0; min-height: var(--nav-height); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding-inline: var(--gutter); z-index: var(--z-nav); background: rgba(8, 8, 8, 0.66); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); /* Hairline casi imperceptible + el rojo de la referencia reducido a un rastro: el marco rojo arriba/abajo es decisión documentada, pero al 0.2 se leía como una línea de color, no como un borde. */ border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 1px 0 rgba(204, 0, 0, 0.12); transition: background 0.3s ease, backdrop-filter 0.3s ease; } .nav__logo { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; justify-self: start; transition: opacity 0.3s ease; } .nav__logo:hover { opacity: 0.75; } /* El punto pasa de disco plano a punto con halo: mismo acento, menos peso. */ .nav__logo::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.18); transition: box-shadow 0.3s ease; } .nav__logo:hover::before { box-shadow: 0 0 0 5px rgba(204, 0, 0, 0.22); } .nav__links { display: flex; gap: clamp(18px, 2.4vw, 34px); list-style: none; margin: 0; padding: 0; justify-self: center; /* Inter en vez de Space Mono (elegido por el usuario 10/08/26): ya está self-hosted, así que no añade ni un KB ni una petición. El tracking amplio es lo que da el aire; el mono ya traía el suyo y se apelmazaba. */ font-family: var(--font-body); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; } .nav__links a { position: relative; text-decoration: none; color: var(--muted); padding-block: 6px; transition: color 0.3s ease; } /* Subrayado fino que crece desde el centro. Con scaleX desde el centro en vez de animar left/right: esas dos también disparan layout en cada frame. */ .nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--ease); } .nav__links a:hover, .nav__links a:focus-visible { color: var(--white); } .nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); } .nav__booking { justify-self: end; background: var(--red); color: var(--white); font-family: var(--font-body); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 10px 20px; border-radius: 2px; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .nav__booking:hover, .nav__booking:focus-visible { color: var(--white); } .nav__toggle { display: none; background: none; border: none; color: var(--white); width: 32px; height: 24px; position: relative; } .nav__toggle span, .nav__toggle::before, .nav__toggle::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--white); transition: transform 0.25s var(--ease), opacity 0.2s; } .nav__toggle::before { top: 0; } .nav__toggle span { top: 11px; } .nav__toggle::after { top: 22px; } @media (max-width: 767px) { /* En móvil los enlaces se van al overlay, así que la retícula de tres columnas se queda sin su columna central: logo | CTA | hamburguesa. */ .nav { display: flex; justify-content: flex-start; gap: 14px; } .nav__booking { margin-left: auto; } .nav__toggle { order: 1; } .nav__toggle { display: block; z-index: calc(var(--z-nav) + 1); } /* Overlay a pantalla completa como la referencia. visibility:hidden saca los 8 enlaces del recorrido de teclado cuando el menú está cerrado (2.4.3/2.4.7) */ .nav__links { position: fixed; inset: 0; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.96); padding: var(--nav-height) var(--gutter); gap: 4vh; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease); } .nav__links a { font-family: var(--font-display); font-weight: 800; font-stretch: 125%; font-size: clamp(1.5rem, 5.5vw, 2.6rem); letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); } .nav__booking { padding: 10px 28px; } .nav__links[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; } /* Hamburguesa → X */ .nav__toggle[aria-expanded="true"]::before { transform: translateY(11px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span { opacity: 0; } .nav__toggle[aria-expanded="true"]::after { transform: translateY(-11px) rotate(-45deg); } } /* ========================================================================== Marquee (banner de texto en scroll continuo) ========================================================================== */ .marquee { overflow: hidden; white-space: nowrap; padding-block: 14px; background: var(--red); border-top: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .marquee__track { display: inline-flex; gap: 2.5rem; animation: marquee 28s linear infinite; } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } .marquee { overflow-x: auto; } } /* Letrero de club, no cinta de advertencia: blanco en Bebas como la referencia (y de paso 5.89:1 sobre --red — el negro a 13.6px daba 3.57:1, bajo AA) */ .marquee__track span { font-family: var(--font-display); font-weight: 800; font-stretch: 125%; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } .marquee__track span em { color: rgba(255, 255, 255, 0.7); font-style: normal; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; /* Anula el padding global de section: el hero es 100svh exactos y .hero__content ya trae el suyo */ padding-block: 0; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; /* Fallback mientras el video carga (o si no carga): mismo gradiente que la referencia */ background: radial-gradient(circle at 50% 42%, rgba(140,0,0,0.55) 0%, rgba(50,0,0,0.5) 45%, var(--black) 100%); } /* Video de fondo a sangre completa, centrado, siempre cubriendo el viewport */ .hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero__media video { position: absolute; top: 50%; left: 50%; width: 177.78vh; /* 16/9 del alto del viewport */ height: 56.25vw; /* 9/16 del ancho del viewport */ min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; } /* Oscurece el video para sostener el contraste del texto en cualquier frame */ .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.75) 100%), radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%); } /* En móvil el texto ocupa casi todo el frame y los highlights del video (platos, pantallas) caían justo detrás del wordmark: chip 3.08:1, título 2.86:1 medidos. Scrim más denso solo donde hace falta. */ @media (max-width: 640px) { .hero__scrim { background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 30%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.8) 100%), radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.6) 100%); } } /* Con el banner de cookies abierto, el indicador Scroll quedaría debajo. */ html[data-consent="none"] .hero__scroll { display: none; } .hero__content { position: relative; z-index: 2; padding: calc(var(--nav-height) + 40px) var(--gutter) 96px; width: 100%; max-width: 1100px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; } .hero__chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--white); border: 1px solid rgba(204,0,0,0.75); background: rgba(204,0,0,0.18); backdrop-filter: blur(8px); padding: 8px 14px 8px 12px; margin-bottom: 28px; } .hero__chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red-light); animation: chip-pulse 1.6s ease-in-out infinite; } @keyframes chip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { .hero__chip-dot { animation: none; } } .hero__title { /* Archivo Expanded Black es ~2x más ancha por carácter que Bebas: el clamp baja de 22vw a 12.5vw para que "SEVEN77" siga ocupando ~70% del ancho. */ font-size: clamp(2.75rem, 12.5vw, 11rem); font-weight: 900; line-height: 0.9; letter-spacing: 0; } .hero__bio { margin-top: 20px; font-family: var(--font-mono); font-size: clamp(0.65rem, 1.8vw, 0.78rem); letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone); } .hero__line { width: 44px; height: 1px; margin-top: 28px; background: linear-gradient(90deg, var(--red), transparent); } .hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 28px; } .hero__scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .hero__scroll::before { content: ''; width: 1px; height: 36px; background: linear-gradient(180deg, transparent, var(--muted)); } @media (prefers-reduced-motion: reduce) { .hero__scroll { display: none; } } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; /* Sin marco (pedido del usuario 10/08/26): el relieve define el botón. El fondo sólido es lo que da cuerpo a la perla — sobre transparente los sombreados interiores no llegan a leerse como volumen. */ border: 0; border-radius: 2px; color: var(--white); background: #111; transition: color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s var(--ease); min-height: 44px; } /* El hover levanta y enciende en rojo — nunca invierte a blanco (referencia). El relieve vive en la sección "Relieve perla" al final del archivo. */ .btn:hover, .btn:focus-visible { color: var(--red-light); } .btn--primary { background: var(--red); } .btn--primary:hover, .btn--primary:focus-visible { color: var(--white); } /* ========================================================================== Section shell ========================================================================== */ section { padding-block: clamp(64px, 10vw, 120px); /* +24px para que el título no quede pegado al borde del nav translúcido */ scroll-margin-top: calc(var(--nav-height) + 24px); } .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 6vw, 56px); flex-wrap: wrap; } .section__eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red-light); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .section__eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--red-light); } .section__title { /* El mínimo lo fija "PRODUCCIONES" (la palabra más larga de un título): a 320px de viewport necesita ≤27px para no desbordar el container. */ font-size: clamp(1.6rem, 7vw, 4.6rem); line-height: 0.95; text-transform: uppercase; margin-bottom: 24px; } .section__head .section__title { margin-bottom: 0; } /* Cada línea del título como bloque: evita el 'Groove TimeRecords' pegado que produce
en textContent/scrapers */ .h-line { display: block; } .section__lead { color: var(--muted); max-width: 50ch; margin-bottom: 40px; } .section__cta { margin-top: 24px; } .note-mono { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); } /* ========================================================================== Agenda ========================================================================== */ .agenda-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); } .agenda-row { display: grid; grid-template-columns: 140px 1fr auto; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--border); } .agenda-row__date { font-family: var(--font-mono); font-size: 0.85rem; color: var(--red-light); } .agenda-row__event strong { display: block; font-family: var(--font-display); font-weight: 800; font-stretch: 125%; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.02em; } .agenda-row__event span { font-size: 0.88rem; color: var(--muted); } @media (max-width: 640px) { .agenda-row { grid-template-columns: 1fr; gap: 6px; } } .agenda-note { margin: 24px 0 0; color: var(--muted); font-size: 0.95rem; max-width: 52ch; } /* Las fechas sin confirmar no van en --red-light: ese acento marca lo que ya está cerrado. En gris se leen como estado, no como fecha. */ .agenda-row__date--tba { color: var(--muted); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.1em; line-height: 1.5; } .agenda-past { margin-top: 56px; } /* Columna de contenido + retrato sticky, como la referencia (.dates-split) */ .agenda-split { display: grid; grid-template-columns: 1fr 360px; gap: 60px; align-items: start; } .agenda-portrait { position: sticky; top: calc(var(--nav-height) + 42px); aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--border); } .agenda-portrait img { width: 100%; height: 100%; object-fit: cover; } .agenda-portrait::after { /* Marcas rojas de esquina */ content: ''; position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-top: 2px solid var(--red); border-right: 2px solid var(--red); } .agenda-portrait figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px 14px; background: linear-gradient(0deg, rgba(0,0,0,0.85) 30%, transparent); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); } @media (max-width: 900px) { .agenda-split { grid-template-columns: 1fr; } .agenda-portrait { display: none; } } .agenda-past__label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; display: block; } /* ========================================================================== About ========================================================================== */ .about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; } @media (max-width: 900px) { .about { grid-template-columns: minmax(0, 1fr); } } .about__lead { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 300; color: var(--bone); line-height: 1.35; } .about__body { color: var(--muted); font-size: 0.98rem; } .about__body p { margin-bottom: 1.1em; } .about__more { display: none; } .about__more[data-open="true"] { display: block; } /* En desktop la columna tiene sitio de sobra: se muestra toda la bio y el toggle solo existe en móvil (la referencia muestra sus párrafos siempre) */ @media (min-width: 900px) { .about__more { display: block; } .about__toggle { display: none; } } .about__toggle { margin-top: 18px; background: none; border: none; color: var(--red-light); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 0; } .about__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; list-style: none; padding: 0; } .about__tags li { border: 1px solid var(--border); padding: 8px 14px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone); } /* Clubes donde ha pinchado — índice, no nube de etiquetas. -------------------------------------------------------------------------- Antes eran 19 fichas con borde en un flex-wrap: los bordes de cada ficha se partían en filas de distinto largo y el bloque quedaba con el borde derecho dentado. Aquí cada club es una fila con una sola hairline inferior, en columnas de igual ancho — el mismo recurso que ya ordena la Agenda. Las hairlines se alinean entre columnas, así que el bloque lee como una retícula aunque la última fila esté incompleta. */ .clubs { margin-top: 72px; } .clubs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 6vw, 88px); margin: 10px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); } .club { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 2px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--bone); transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } /* El nombre de cada sala en la tipografía de titulares, igual que el DJ de cada clip en Support y el evento de cada fila de Agenda: en este sitio los NOMBRES propios van en Archivo Expanded Black. En mono se leían como metadatos — etiquetas de formulario, no salas donde ha pinchado. */ .club__name { font-family: var(--font-display); font-weight: 800; font-stretch: 125%; text-transform: uppercase; font-size: clamp(0.95rem, 1.35vw, 1.12rem); letter-spacing: 0.015em; line-height: 1.15; transition: transform 0.25s var(--ease); } .club:hover, .club:focus-visible { color: var(--white); border-bottom-color: var(--red); } /* Se desplaza con transform, no con padding: la caja no cambia y las filas vecinas no se mueven. */ .club:hover .club__name, .club:focus-visible .club__name { transform: translateX(4px); } /* Casi invisible en reposo: 19 iconos a plena opacidad competían con los nombres. Solo se enciende en la fila que se está señalando. */ .club__ig { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.22; transition: opacity 0.25s var(--ease); } .club:hover .club__ig, .club:focus-visible .club__ig { opacity: 1; } /* Una sola columna antes de que el nombre más largo parta en dos líneas y el índice pierda su renglón. El umbral está MEDIDO barriendo anchos: a dos columnas, "Casa del Mar Bonafé Ibiza" parte a 800px. El corte va en 820 para dejar margen. */ @media (max-width: 820px) { .clubs__list { grid-template-columns: 1fr; } } .about__photo { border: 1px solid var(--border); position: relative; aspect-ratio: 3 / 4; overflow: hidden; } .about__photo img, .about__photo video { width: 100%; height: 100%; object-fit: cover; } .about__photo::after { /* Marcas rojas de esquina, como la referencia */ content: ''; position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-top: 2px solid var(--red); border-right: 2px solid var(--red); } .about__photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px 14px; /* Gradiente que cubre el 100% de los glifos: las fotos de estudio tienen fondo blanco y un text-shadow no cuenta como mecanismo de contraste */ background: linear-gradient(0deg, rgba(0,0,0,0.85) 30%, transparent); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; color: var(--bone); } .about__label { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); } .about__label img { height: 34px; width: auto; margin-bottom: 12px; } .about__label p { font-size: 0.88rem; color: var(--muted); } /* ========================================================================== Música / Videos — grids ========================================================================== */ .platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 48px; } /* Solo el grid de Música (el del Sello comparte clase y tiene 2 enlaces, no 3: con repeat(3) se le quedaba una columna vacía). Tres columnas fijas, no auto-fit, porque el emparejamiento link↔reproductor solo se lee si las tres caen en la misma fila. */ .platform-grid--players { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 56px; } .platform-col { display: grid; grid-template-rows: auto 1fr; gap: 14px; min-width: 0; } /* Los tres reproductores a la MISMA altura. Sus alturas nativas son distintas (SoundCloud 166, Spotify 352, Beatport 400) y en una fila eso dejaba huecos bajo los más bajos — el mismo problema por el que antes estaban apilados en una sola columna. Con la altura fija, SoundCloud y Spotify muestran además su lista de tracks en vez del reproductor compacto. */ .platform-col .embed-frame, .platform-col .embed-frame iframe, .platform-col .embed-placeholder { height: 400px; } /* Por debajo de 900px tres columnas dejan cada reproductor bajo 230px, donde SoundCloud y Spotify recortan el nombre del track: pasan a apilarse. */ @media (max-width: 900px) { .platform-grid--players { grid-template-columns: 1fr; } .platform-col .embed-frame, .platform-col .embed-frame iframe, .platform-col .embed-placeholder { height: 352px; } } .platform-link { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border: 1px solid var(--border); text-decoration: none; font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; transition: border-color 0.2s, background 0.2s; } .platform-link:hover, .platform-link:focus-visible { border-color: var(--red); background: rgba(204, 0, 0, 0.08); } /* Icono + nombre a la izquierda; la flecha queda sola a la derecha gracias al space-between que ya tenía .platform-link. Los enlaces sin icono (Música) siguen siendo un solo nodo de texto y no cambian. */ .platform-link__name { display: inline-flex; align-items: center; gap: 11px; } .platform-link__icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .platform-link__icon .is-solid { fill: currentColor; stroke: none; } /* Objeto grande con acento rojo, como el .sc-wrap de la referencia */ .embed-frame { position: relative; border: 1px solid rgba(204, 0, 0, 0.22); box-shadow: 0 0 80px rgba(204, 0, 0, 0.06), 0 40px 80px rgba(0, 0, 0, 0.5); } .embed-frame iframe { width: 100%; border: 0; display: block; } .embed-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 166px; padding: 24px; text-align: center; background: var(--dark); color: var(--muted); font-family: var(--font-mono); font-size: 0.8rem; } /* ========================================================================== Muro de clips de cabina (#videos) -------------------------------------------------------------------------- 22 grabaciones de móvil con proporciones dispares: verticales de 720x1178, 16/9, y alguna casi cuadrada. Va en columnas CSS y no en grid porque cada tarjeta conserva su proporción real — un grid uniforme obligaba a recortar (perdiendo al DJ) o a poner bandas negras. El alto de cada video sale de sus atributos width/height, así que no hay salto de layout al cargar el poster. ========================================================================== */ .clip-wall { columns: 3; column-gap: 20px; margin-top: 8px; } .clip { break-inside: avoid; margin: 0 0 20px; border: 1px solid var(--border); background: var(--black); transition: border-color 0.2s; } .clip:hover, .clip:focus-within { border-color: rgba(204, 0, 0, 0.45); } .clip__video { display: block; width: 100%; height: auto; background: var(--black); } .clip__cap { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; } .clip__dj { font-family: var(--font-display); font-weight: 800; font-stretch: 125%; text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.02em; line-height: 1.1; color: var(--white); } .clip__meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .clip__track { font-size: 0.9rem; color: var(--bone); margin-top: 4px; } .clip__cred { font-size: 0.8rem; color: var(--muted); line-height: 1.35; } /* Rojo de fondo, nunca de texto: blanco sobre #cc0000 mide 5.89:1 */ .clip__tag { display: inline-block; margin-left: 6px; padding: 1px 7px; background: var(--red); color: var(--white); font-family: var(--font-mono); font-size: 0.62rem; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 1px; } .clip-wall__more { display: block; margin: 8px auto 0; } @media (max-width: 1024px) { .clip-wall { columns: 2; } } @media (max-width: 640px) { .clip-wall { columns: 1; } } /* Aviso de consentimiento dentro de un embed (lo construye main.js) */ .embed-consent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 166px; padding: 24px; text-align: center; color: var(--bone); font-family: var(--font-mono); font-size: 0.8rem; } /* ========================================================================== Galería — carrusel coverflow -------------------------------------------------------------------------- Sustituye a la retícula 3x2 + lightbox (decidido con el usuario 10/08/26). Sin librería: la posición de cada diapositiva la calcula js/main.js y la escribe en --cf-x / --cf-scale / --cf-z, y aquí solo se componen. Todo el movimiento va por transform y opacity, que son propiedades compuestas: el arrastre no dispara layout en ningún frame. ========================================================================== */ .cf { position: relative; /* Sin background propio: un color opaco aquí tapaba las franjas y el grano del fondo global (van en body::before/::after, fijos y en z-index -1). Las fotos de estudio siguen recortando porque el fondo global también es oscuro; lo que cambia es que la sección deja de ser una banda negra pegada encima de la web. */ padding: clamp(32px, 5vw, 64px) 0 clamp(20px, 3vw, 36px); margin-top: 40px; overflow: hidden; /* la profundidad del coverflow necesita perspectiva en el contenedor */ perspective: 1400px; perspective-origin: 50% 45%; } .cf__track { position: relative; height: clamp(320px, 52vw, 560px); margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; cursor: grab; touch-action: pan-y; /* el gesto horizontal es nuestro, el vertical del scroll */ -webkit-user-select: none; user-select: none; } .cf__track[data-dragging="true"] { cursor: grabbing; } .cf__track:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; } .cf__slide { position: absolute; top: 0; left: 50%; width: clamp(190px, 34vw, 340px); margin-left: calc(clamp(190px, 34vw, 340px) / -2); height: 100%; transform: translate3d(var(--cf-x, 0px), 0, var(--cf-z, 0px)) rotateY(var(--cf-rot, 0deg)) scale(var(--cf-scale, 1)); opacity: var(--cf-op, 1); z-index: var(--cf-order, 0); transition: transform 0.45s var(--ease), opacity 0.45s var(--ease); will-change: transform; } /* Durante el arrastre no hay transición: la diapositiva sigue al dedo. */ .cf__track[data-dragging="true"] .cf__slide { transition: none; } .cf__slide picture, .cf__slide img { display: block; width: 100%; height: 100%; border-radius: 18px; } .cf__slide img { object-fit: cover; background: var(--dark); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9); -webkit-user-drag: none; } /* Las laterales se oscurecen para que la central mande. */ .cf__slide::after { content: ''; position: absolute; inset: 0; border-radius: 18px; background: rgba(0, 0, 0, 0.55); opacity: var(--cf-dim, 1); transition: opacity 0.45s var(--ease); pointer-events: none; } .cf__slide[data-active="true"]::after { opacity: 0; } .cf__counter { margin-top: clamp(18px, 3vw, 30px); text-align: center; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.16em; color: var(--bone); } /* Sin JS el track no se posiciona: se degrada a una fila desplazable para que las fotos sigan siendo accesibles. */ .cf:not([data-ready="true"]) .cf__track { display: flex; gap: 16px; height: auto; overflow-x: auto; padding-inline: var(--gutter); } .cf:not([data-ready="true"]) .cf__slide { position: static; margin-left: 0; flex: 0 0 auto; height: clamp(320px, 52vw, 560px); transform: none; opacity: 1; } .cf:not([data-ready="true"]) .cf__slide::after { opacity: 0; } /* ========================================================================== Booking / Formulario ========================================================================== */ .booking { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); } @media (max-width: 900px) { .booking { grid-template-columns: 1fr; } } .booking__direct { border-top: 1px solid var(--border); padding-top: 24px; margin-top: 24px; } .booking__direct p { margin-bottom: 8px; } .booking__direct a { font-family: var(--font-mono); text-decoration: underline; text-underline-offset: 4px; } /* Rider técnico — vivía en la sección Prensa, que se eliminó (10/08/26); va aquí porque es información que pide quien contrata, justo donde contrata. */ .booking__rider { border-top: 1px solid var(--border); padding-top: 24px; margin-top: 24px; } .booking__rider > .note-mono { margin-bottom: 12px; } .rider-list { list-style: none; margin: 0 0 12px; padding: 0; } .rider-list li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; } .rider-list__k { color: var(--muted); } .rider-list__v { font-family: var(--font-mono); font-size: 0.85rem; color: var(--bone); text-align: right; } .rider-note { margin-bottom: 18px; } /* El botón hereda .btn/.btn--primary; aquí solo se alinea el icono con el texto, igual que en .platform-link. */ .rider-download { display: inline-flex; align-items: center; gap: 10px; } .rider-download__icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .field { margin-bottom: 20px; } .field label { display: block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; color: var(--muted); } .field input, .field textarea { width: 100%; background: var(--dark); border: 1px solid var(--border); color: var(--white); padding: 13px 14px; font-family: var(--font-body); font-size: 0.95rem; min-height: 44px; } .field textarea { min-height: 120px; resize: vertical; } /* Sin outline:none — el anillo global de :focus-visible aplica también aquí */ .field input:focus, .field textarea:focus { border-color: var(--red); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } } .form-status { margin-top: 16px; font-family: var(--font-mono); font-size: 0.85rem; min-height: 1.2em; } .form-status[data-state="ok"] { color: var(--ok); } .form-status[data-state="error"] { color: var(--red-light); } /* ========================================================================== Footer ========================================================================== */ .footer { border-top: 1px solid rgba(204, 0, 0, 0.2); padding-block: 40px; } .footer__brand { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; } .footer__logo { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 8px; } .footer__logo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); } .footer__tagline { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; } .footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .footer__top { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-decoration: none; color: var(--muted); } .footer__top:hover, .footer__top:focus-visible { color: var(--white); } .footer__socials { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; } /* El aspecto de estos enlaces lo da el sistema Pearl (variante icono) al final del archivo; aquí solo queda la disposición. */ .footer__top { font-size: 1rem; } .footer__legal { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); margin-top: 24px; } .footer__legal a { text-decoration: underline; text-underline-offset: 3px; } .footer__legal a:hover, .footer__legal a:focus-visible { color: var(--white); } .footer__credit { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); } .footer__credit a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .footer__credit a:hover { color: var(--white); } /* ========================================================================== Cookie banner ========================================================================== */ /* El estado del banner se decide ANTES del primer paint: un inline script en el estampa data-consent en leyendo localStorage. Así la reserva de espacio no produce layout shift (CLS) al abrirse el banner. */ html[data-consent="none"] body { padding-bottom: 120px; scroll-padding-bottom: 120px; } html[data-consent="none"] .cookie-banner { display: flex; } @media (max-width: 640px) { html[data-consent="none"] body { padding-bottom: 190px; scroll-padding-bottom: 190px; } } .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-banner); display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--gutter); background: var(--dark); border-top: 1px solid var(--border); } .cookie-banner p { margin: 0; max-width: 60ch; font-size: 0.85rem; color: var(--muted); } .cookie-banner a { color: var(--bone); } .cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; } /* ========================================================================== Páginas legales ========================================================================== */ .legal h2 { color: var(--bone); font-size: 1.1rem; font-weight: 500; margin-top: 2em; margin-bottom: 0.6em; } .legal a { color: var(--red-light); } /* ========================================================================== Sello — símbolo animado ========================================================================== */ .sello__title { margin-bottom: 28px; } .sello__body { max-width: 62ch; } /* Lema + enlaces + correo van bajo el símbolo animado, en la columna derecha (pedido del usuario 10/08/26): es el bloque accionable del sello y antes quedaba sepultado al final de cuatro párrafos de copy. La hairline lo separa del símbolo. */ .sello__intro { padding-top: 30px; margin-top: 30px; border-top: 1px solid var(--border); } .sello__platforms { margin-top: 20px; margin-bottom: 20px; } .sello__motto { color: var(--bone); font-size: 1.1rem; line-height: 1.45; } /* Símbolo animado del sello: cuadrado, arriba de su columna (decidido 10/08/26). SIN marco — el usuario pidió que no se viera "encerrado" (10/08/26): fuera el borde, el fondo de caja y las marcas rojas de esquina que hereda de .about__photo. El video ya viene sobre negro, así que se funde con el fondo de la página. El aspect-ratio pasa de la figura al video para que el figcaption, ahora fuera del overlay, fluya debajo sin desbordar la caja. */ .sello__aside { align-self: start; } /* Al colapsar a una columna, el aside caería DESPUÉS de los cuatro párrafos y el bloque accionable volvería a quedar sepultado — que es justo lo que se quería evitar. En móvil va símbolo + lema + enlaces primero, copy después. */ @media (max-width: 900px) { .sello__aside { order: -1; margin-bottom: 40px; } } .sello__symbol { aspect-ratio: auto; background: transparent; border: 0; overflow: visible; } .sello__symbol video { aspect-ratio: 1 / 1; height: auto; /* El mp4 viene sobre negro puro. Contra el fondo texturado nuevo eso se veía como un rectángulo recortado — otra vez "encerrado". Con screen el negro del video es transparente y solo queda el anillo sobre el fondo. */ mix-blend-mode: screen; } .sello__symbol::after { content: none; } /* ========================================================================== SISTEMA PEARL — estilo único de botón para toda la web -------------------------------------------------------------------------- Cristal oscuro skeuomórfico (pedido del usuario 10/08/26): píldora, fondo translúcido, brillo interior superior fuerte, sombra interior inferior y drop-shadow que lo despega del fondo. Un solo sitio para el efecto. Las clases de componente que ya existían se enganchan aquí con una lista de selectores en vez de repartir .pearl por cientos de nodos del HTML — mismo resultado, diff mucho menor, y sigue habiendo un único punto donde tocar el sistema. Fuera del sistema, con motivo: - .about__toggle — enlace de texto ("Ver más"), no una pieza sólida. - .nav__toggle — la hamburguesa son tres líneas, no tiene caja. (.gallery-more y los controles del lightbox estaban aquí; desaparecieron al sustituir la galería por el carrusel.) ========================================================================== */ .pearl, .btn, .platform-link, .nav__booking, .footer__socials a { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; /* Rectangular con esquina apenas redondeada (pedido del usuario 10/08/26), no píldora: encaja mejor con el lenguaje de esquina viva del sitio. */ border-radius: 12px; background: rgba(20, 20, 20, 0.72); color: var(--bone); text-decoration: none; /* overflow recorta el círculo del ripple a la píldora. No afecta al drop-shadow: box-shadow se pinta fuera de la caja y overflow no lo toca. isolation crea contexto de apilamiento para que el ::before del ripple pueda ir a z-index -1 y quedar sobre el fondo pero DEBAJO del texto. */ overflow: hidden; isolation: isolate; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65); box-shadow: inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.28), inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7), inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.1), 0 1.2rem 1.8rem -0.9rem rgba(0, 0, 0, 0.8), 0 0.4rem 0.7rem -0.35rem rgba(0, 0, 0, 0.75); transition: transform 0.3s var(--ease), box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease; } /* Casquete de reflejo: la mitad superior recibe la luz, como en cristal. */ .pearl::after, .btn::after, .platform-link::after, .nav__booking::after, .footer__socials a::after { content: ''; position: absolute; left: 8%; right: 8%; top: 6%; bottom: 48%; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 78%); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } .pearl:hover, .pearl:focus-visible, .btn:hover, .btn:focus-visible, .platform-link:hover, .platform-link:focus-visible, .nav__booking:hover, .nav__booking:focus-visible, .footer__socials a:hover, .footer__socials a:focus-visible { /* El texto se queda blanco: va sobre el relleno rojo (5.89:1) o, en los primarios, sobre el relleno oscuro (19.6:1). Los iconos usan fill:currentColor, así que acompañan. */ color: var(--white); transform: translateY(-2px) scale(1.03); box-shadow: inset 0 0.3rem 0.7rem rgba(255, 255, 255, 0.38), inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7), inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.18), 0 1.6rem 2.2rem -0.9rem rgba(0, 0, 0, 0.85), 0 0.5rem 0.9rem -0.35rem rgba(0, 0, 0, 0.8); } .pearl:hover::after, .pearl:focus-visible::after, .btn:hover::after, .btn:focus-visible::after, .platform-link:hover::after, .platform-link:focus-visible::after, .nav__booking:hover::after, .nav__booking:focus-visible::after, .footer__socials a:hover::after, .footer__socials a:focus-visible::after { transform: translateY(4%); opacity: 0.85; } .pearl:active, .btn:active, .platform-link:active, .nav__booking:active, .footer__socials a:active { transform: translateY(2px) scale(0.99); box-shadow: inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.4), inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.85), inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.14), 0 0.2rem 0.5rem -0.3rem rgba(0, 0, 0, 0.85); } /* --- Variante primaria (CTA en rojo) -------------------------------------- El brillo superior baja de 0.28 a 0.16 SOLO aquí: sobre #cc0000 un reflejo al 0.28 aclara el rojo hasta rgb(219,77,77) y el texto blanco cae a 4.08:1, por debajo de AA. Al 0.16 se queda en ~5:1. Medido, no estimado. */ .btn--primary, .nav__booking, .pearl--primary { background: var(--red); color: var(--white); box-shadow: inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.16), inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.55), inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.08), 0 1.2rem 1.8rem -0.9rem rgba(0, 0, 0, 0.8), 0 0.4rem 0.7rem -0.35rem rgba(0, 0, 0, 0.75); } .btn--primary::after, .nav__booking::after, .pearl--primary::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 78%); } .btn--primary:hover, .btn--primary:focus-visible, .nav__booking:hover, .nav__booking:focus-visible, .pearl--primary:hover, .pearl--primary:focus-visible { background: var(--red); color: var(--white); box-shadow: inset 0 0.3rem 0.7rem rgba(255, 255, 255, 0.2), inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.6), inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.12), 0 0 34px rgba(204, 0, 0, 0.45), 0 1.6rem 2.2rem -0.9rem rgba(0, 0, 0, 0.85); } /* --- Variante icono (redes sociales) -------------------------------------- */ /* Cuadrado redondeado, no círculo, para no romper con el resto de botones tras quitar la píldora. Si se prefieren circulares, aquí vuelve el 50%. */ .pearl--icon, .footer__socials a { width: 44px; height: 44px; padding: 0; gap: 0; border-radius: 12px; } .pearl--icon::after, .footer__socials a::after { left: 14%; right: 14%; top: 8%; bottom: 52%; border-radius: 8px 8px 0 0; } .social-icon { width: 18px; height: 18px; fill: currentColor; /* Resplandor sutil: el logo se despega del cristal en vez de quedar pegado. */ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.18)); transition: filter 0.3s ease; } .footer__socials a:hover .social-icon, .footer__socials a:focus-visible .social-icon { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 9px rgba(255, 255, 255, 0.35)); } /* Logo dentro de un botón de texto (enlaces de plataforma). */ .platform-link .social-icon { width: 17px; height: 17px; } /* --- Ajustes de los componentes al entrar en el sistema ------------------- */ /* La píldora necesita más aire lateral que la caja recta que había antes. */ .btn { padding: 14px 30px; } .platform-link { justify-content: space-between; padding: 16px 24px; font-size: 0.8rem; } .nav__booking { padding: 11px 22px; } /* El grid de plataformas ya no necesita separar cajas pegadas. */ .platform-grid { gap: 16px; } /* ========================================================================== Relleno direccional que sigue al cursor -------------------------------------------------------------------------- Pedido del usuario 10/08/26. El círculo blanco crece desde el punto EXACTO por donde entra el puntero y se contrae hacia donde sale: js/main.js escribe --ripple-x / --ripple-y en píxeles (clientX/Y menos getBoundingClientRect) y aquí solo se posiciona. Sin JS o con foco de teclado caen al 50%/50%, que es un origen centrado razonable. z-index -1 en vez de envolver cada texto en un : el contenedor tiene isolation:isolate, así que el ::before queda sobre el fondo del botón pero debajo del texto, que es lo que se buscaba con el span. Son ~30 botones y varios llevan SVG dentro; esto lo resuelve sin tocar el HTML. La altura sale de padding-bottom en % (que se resuelve contra el ANCHO del contenedor), truco necesario porque el círculo tiene que ser cuadrado. ========================================================================== */ .pearl::before, .btn::before, .platform-link::before, .nav__booking::before, .footer__socials a::before { content: ''; position: absolute; top: var(--ripple-y, 50%); left: var(--ripple-x, 50%); width: 250%; height: 0; padding-bottom: 250%; border-radius: 50%; /* Rojo de marca, no blanco: es el único acento del sitio y aquí actúa como FONDO, que es el uso permitido de #cc0000 (nunca como color de texto). Blanco sobre #cc0000 mide 5.89:1, por encima de AA. */ background: var(--red); transform: translate(-50%, -50%) scale(0); transition: transform 0.5s ease-out; pointer-events: none; z-index: -1; } .pearl:hover::before, .pearl:focus-visible::before, .btn:hover::before, .btn:focus-visible::before, .platform-link:hover::before, .platform-link:focus-visible::before, .nav__booking:hover::before, .nav__booking:focus-visible::before, .footer__socials a:hover::before, .footer__socials a:focus-visible::before { transform: translate(-50%, -50%) scale(1); } /* El casquete de reflejo estorba sobre el relleno blanco. */ .pearl:hover::after, .btn:hover::after, .platform-link:hover::after, .nav__booking:hover::after, .footer__socials a:hover::after { opacity: 0; } @media (prefers-reduced-motion: reduce) { .pearl::before, .btn::before, .platform-link::before, .nav__booking::before, .footer__socials a::before { transition: none; } } /* Los CTA ya son rojos: un relleno rojo sobre rojo no se vería. Se invierten hacia el oscuro de la paleta, así los dos tipos de botón se cruzan al pasar el cursor — oscuro→rojo y rojo→oscuro. Blanco sobre #0a0a0a: 19.6:1. */ .btn--primary::before, .nav__booking::before, .pearl--primary::before { background: var(--dark); } /* Rim rojo muy tenue en reposo: ata el botón a la marca sin encender nada. */ .pearl, .btn, .platform-link, .nav__booking, .footer__socials a { outline: 1px solid rgba(204, 0, 0, 0.16); outline-offset: -1px; } .pearl:focus-visible, .btn:focus-visible, .platform-link:focus-visible, .nav__booking:focus-visible, .footer__socials a:focus-visible { /* El anillo global de foco manda: no dejar que el rim lo pise. */ outline: 2px solid var(--white); outline-offset: 3px; }