/* ═══════════════════════════════════════════════════════════════════════ JP COACH DE MÚSICA — maqueta de la landing Concepto: EL VÚMETRO. El isotipo es un monograma JP hecho de bloques cuadrados que suben rojo → naranja → amarillo, como un vúmetro. Ese cuadrado es el único grafismo de la página: viñetas, números, separadores y acentos se construyen con él. Nada de notas musicales. El vúmetro está dos veces, y son el mismo objeto a dos escalas: estirado de fondo en toda la página, y armado como marca —los bloques ecualizando, la letra quieta— en Contacto. El layout es calmo y previsible; la energía vive en esa grilla de bloques, en la fotografía real y en un resalte tipográfico. ═══════════════════════════════════════════════════════════════════ */ /* ───────── Paletas. Se cambian con data-paleta en el ───────── */ :root { /* la rampa del logo no cambia nunca: es la marca */ /* Los tres DETALLE del brandboard. La caída de amarillo a rojo es, textual del manual, «lee como un ecualizador». */ --rojo: #BC1212; --naranja: #F16B11; --amarillo: #FFCF41; --carbon: #222222; /* ACENTO */ --base: #F6F7FF; /* BASE */ /* escala de espaciado — cinco valores gobiernan todo el ritmo */ --xs: 15px; --s: 25px; --m: 40px; --l: 70px; --xl: 140px; --ancho: 1180px; --bloque: 12px; --radio: 0px; /* la esquina viva es la firma */ --transicion: .28s cubic-bezier(.16,1,.3,1); } /* En celular 70 px por bloque sumaban más de 1.100 px de aire: baja a 48. */ @media (max-width: 759px) { :root { --l: 48px; } } /* B — «la del que entra a una empresa». La de arranque. */ body[data-paleta="b"] { --fondo: #FFFFFF; --fondo-alt: #F0EDE7; --fondo-oscuro: #1C1F26; --texto: #1C1F26; --texto-suave: #4D535D; /* un escalón bajo #565C66: con el vúmetro al 26 % sigue en 4,8:1 */ --texto-claro: #F5F3EF; --borde: #E2DED6; --acento: #E08A00; --acento-texto: #1C1F26; /* El ámbar de relleno rinde 6,13:1 con el texto encima, pero como línea fina sobre el crema queda en 2,30:1. Las marcas informativas —estrellas, foco de teclado, subrayados— usan este tono, un escalón más oscuro: 3,65:1 sobre blanco, 3,12:1 sobre el crema, 4,52:1 sobre el oscuro. */ --acento-linea: #BF7500; --sombra-foto: 0 18px 50px rgba(28,31,38,.13); --fondo-retrato: radial-gradient(75% 60% at 63% 30%, #FFFFFF 0%, #F4F1EC 55%, #ECE7DF 100%); } /* A — «la que ya es suya». Sus colores, sobre negro. */ body[data-paleta="a"] { --fondo: #0F0F0F; --fondo-alt: #191817; --fondo-oscuro: #000000; --texto: #F5F3EF; --texto-suave: #BEB8AD; --texto-claro: #F5F3EF; --borde: #2C2926; --acento: #F2B705; --acento-texto: #0F0F0F; /* sobre negro el ámbar del logo ya da 9,75:1: no hace falta bajarlo */ --acento-linea: var(--acento); --sombra-foto: 0 18px 50px rgba(0,0,0,.6); --fondo-retrato: radial-gradient(75% 60% at 63% 30%, #303030 0%, #1C1C1C 50%, #151515 100%); } /* C — «la del contraste». Azul noche con el ámbar del logo. */ body[data-paleta="c"] { --fondo: #101A3D; --fondo-alt: #16224B; --fondo-oscuro: #0A1230; --texto: #F7F5F1; --texto-suave: #BECCE9; --texto-claro: #F7F5F1; --borde: #24315C; --acento: #F2B705; --acento-texto: #101A3D; /* sobre el azul noche da 8,47:1: tampoco hace falta bajarlo */ --acento-linea: var(--acento); --sombra-foto: 0 18px 50px rgba(6,10,26,.55); --fondo-retrato: radial-gradient(75% 60% at 63% 30%, #33427A 0%, #1E2A57 50%, #16214A 100%); } /* ───────── Base ───────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--fondo); color: var(--texto); font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color var(--transicion), color var(--transicion); } @media (min-width: 900px) { body { font-size: 18px; } } img, picture, svg { display: block; max-width: 100%; } img { height: auto; } .contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--s); } @media (min-width: 900px) { .contenedor { padding-inline: var(--m); } } .oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .saltar { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--acento); color: var(--acento-texto); padding: var(--xs) var(--s); font-weight: 700; } .saltar:focus { left: var(--s); top: var(--s); } :where(a, button, input, [tabindex]):focus-visible { outline: 3px solid var(--acento-linea); outline-offset: 3px; } /* ───────── Tipografía ───────── */ .rotulo { margin: 0 0 var(--xs); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; letter-spacing: .16em; color: var(--texto-suave); } .rotulo--claro { color: var(--amarillo); } /* el rótulo del hero lleva la rampa del logo delante */ .rotulo--rampa { display: flex; align-items: center; gap: 8px; } .rotulo--rampa::before { content: ""; width: 34px; height: var(--bloque); background: linear-gradient(90deg, var(--rojo) 0 33.33%, var(--naranja) 33.33% 66.66%, var(--amarillo) 66.66% 100%); } .titulo { margin: 0 0 var(--s); font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 6.4vw, 58px); line-height: .98; letter-spacing: .01em; text-wrap: balance; } .titulo--claro { color: var(--texto-claro); } .entrada { margin: 0 0 var(--m); max-width: 62ch; font-size: 1.05em; color: var(--texto-suave); } /* el resalte: bloque relleno con el texto encima. Es el recurso que él ya usa en Instagram — una sola palabra destacada. Regla dura: el ámbar NUNCA es color de texto, siempre es relleno. El relleno es una franja a la altura de las mayúsculas y no la caja entera de la fuente: en Bebas Neue la caja mide 1,3 em y la letra 0,71, así que con el interlineado apretado de los títulos el ámbar tapaba el renglón vecino. La franja va de 0,16 a 1,03 em, calibrada para Bebas Neue. */ .resalte { background: linear-gradient(var(--acento), var(--acento)) 0 .16em / 100% .87em no-repeat; color: var(--acento-texto); padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .enlace { color: inherit; text-decoration: underline; text-decoration-color: var(--acento-linea); text-decoration-thickness: 2px; text-underline-offset: 3px; } .enlace:hover { text-decoration-thickness: 4px; } /* ───────── El bloque: el grafismo rector ───────── */ .bloque { display: inline-block; width: var(--bloque); height: var(--bloque); flex: none; } .bloque--rojo { background: var(--rojo); } .bloque--naranja { background: var(--naranja); } .bloque--amarillo { background: var(--amarillo); } /* ───────── Foto de fondo de página ───────── Va en z-index -1: debajo del vúmetro (0) y del contenido (1). O sea que el orden de lectura visual es foto → ecualizador → texto. El velo no "oscurece" a secas: funde la foto hacia el color de fondo de la paleta. En las oscuras eso oscurece; en la clara aclara — que es lo que hace falta para que el texto negro siga leyéndose. La foto queda de textura, no de protagonista. */ .fondo-foto { position: fixed; inset: 0; z-index: -1; opacity: 0; pointer-events: none; transition: opacity .7s ease; } .fondo-foto.esta-visible { opacity: 1; } /* el