/* ========================================================================== VEGAS DEL VERDE — styles/sections/momentos.css · v3.1 «Blackberry» Bloque #momentos · Banda de carbón entre #planes y #colegios. QUÉ HACE ESTA HOJA: coloca cuatro clips VERTICALES sobre el carbón y nada más. La banda oscura funciona por sustracción —fondo carbón, esquina viva, sin sombra, mucho aire— así que todo lo que se añada aquí resta. Si alguien viene a «mejorarla» con degradados, bordes, hovers vistosos, filtros o un icono de reproducción, la banda deja de ser una pausa y se convierte en otra sección que grita. QUÉ CAMBIÓ EN v3.1: la rejilla 2×2 de fotos apaisadas se retira entera y nace el MURO ESCALONADO de vídeo (§3). El material es metraje de móvil, 720×1280, y se muestra en vertical sin recortar: recortarlo a apaisado sería borrar justamente lo que lo hace parecer grabado por alguien que estaba allí. Lo que sostiene la composición no es el tamaño de las piezas sino su DESIGUALDAD: cuatro anchos distintos y cuatro desfases verticales distintos. En cuanto dos piezas empiezan a medir lo mismo, el muro vuelve a leerse como una rejilla y se pierde el efecto. El fondo carbón NO se declara aquí: lo pone la clase de sistema .seccion--carbon (base.css + tokens.css). Esta hoja sólo se ocupa del muro, del recuadro, del clip y del pie. Depende de tokens.css y base.css; no declara ningún valor literal de color, tamaño de fuente, radio, sombra ni duración. ========================================================================== */ /* ========================================================================== 1. ENCABEZADO Rótulo diminuto + una sola línea de Fraunces fina. No hay entradilla: la sección no tiene nada que explicar, y una entradilla la empujaría a inventarse un hecho para llenarla. ========================================================================== */ .momentos__encabezado { margin-bottom: var(--esp-xl); } /* Los tokens inversos son los mismos que usa .seccion--oscura. Sobre carbón (--carbon, #2B2B2B) la crema da 13.4:1 y la crema al 78 % 11.1:1: AAA holgado en los dos casos, muy por encima del 4.5:1 que pide AA. */ .momentos__titulo { color: var(--color-texto-inverso); /* Titular de una línea: se le deja respirar en ancho de lectura corta en vez de estirarse hasta el borde del contenedor. */ max-width: 22ch; text-wrap: balance; } /* ========================================================================== 2. EL MURO Una sola rejilla de TRECE columnas para los tres tamaños de pantalla. Trece y no doce a propósito: con doce, cuatro piezas de anchos 4+3+3+2 suman exactamente doce y el aire entre ellas queda idéntico —vuelve la sensación de tabla—. Con trece sobra una columna, que se deja VACÍA entre la primera y la segunda pieza: es el hueco que desiguala el ritmo horizontal. `align-items: start` es obligatorio: sin él las piezas se estiran hasta la altura de la fila y los desfases dejan de verse. ========================================================================== */ .momentos__muro { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); align-items: start; column-gap: var(--gap-sm); row-gap: var(--esp-xl); list-style: none; margin: 0; padding: 0; } @media (min-width: 48em) { .momentos__muro { column-gap: var(--gap); row-gap: var(--esp-2xl); } } /* ========================================================================== 3. LA COMPOSICIÓN ESCALONADA Cada pieza declara DÓNDE empieza y cuánto ocupa (`grid-column`) y CUÁNTO baja respecto a sus vecinas (`--desfase`). El desfase es un margen superior, no un `transform`: así el muro reserva la altura que ocupa y no se solapa con el pie de la sección. Los desfases NO son progresivos (0, 1, 2, 3…) sino desordenados a conciencia: si crecieran en escalera, la escalera sería el patrón nuevo. -------------------------------------------------------------------------- */ .momentos__pieza { margin-block-start: var(--desfase, 0); } /* -------------------------------------------------------------------------- 3.1 MÓVIL — tres filas, ninguna alineada con la anterior La protagonista deja libres las dos últimas columnas por la derecha; las dos piezas centrales se reparten la fila con anchos distintos y una de las dos cae más abajo; la última entra sangrada por la izquierda. Ninguna pieza llega a ancho completo: un vertical a 375 px de ancho mide más de 660 px de alto y se comería la pantalla entera él solo. -------------------------------------------------------------------------- */ .momentos__pieza--uno { grid-column: 1 / 12; --desfase: 0; } .momentos__pieza--dos { grid-column: 1 / 8; --desfase: 0; } .momentos__pieza--tres { grid-column: 8 / -1; --desfase: var(--esp-lg); } .momentos__pieza--cuatro { grid-column: 4 / 12; --desfase: 0; } /* -------------------------------------------------------------------------- 3.2 TABLETA — dos filas de dos, cruzadas Las cuatro piezas miden distinto (6 / 4 / 5 / 3 columnas): en cuanto dos de ellas coincidieron en ancho —pasó con la primera versión de este bloque—, la fila de arriba se leyó como un par de tarjetas gemelas y el muro volvió a parecer una rejilla. Ninguna comparte borde superior ni inferior, y las dos de abajo entran desplazadas hacia dentro respecto a las de arriba. -------------------------------------------------------------------------- */ @media (min-width: 48em) { .momentos__pieza--uno { grid-column: 1 / 7; } .momentos__pieza--dos { grid-column: 8 / 12; --desfase: var(--esp-3xl); } .momentos__pieza--tres { grid-column: 2 / 7; --desfase: 0; } .momentos__pieza--cuatro { grid-column: 8 / 11; --desfase: var(--esp-lg); } } /* -------------------------------------------------------------------------- 3.3 ESCRITORIO — una sola banda de cuatro, en diagonal Aquí es donde la composición hace su trabajo: cuatro piezas seguidas de anchos 4 / 3 / 3 / 2 columnas, la columna 5 vacía como respiro, y desfases de 0 → mucho → poco → muchísimo. El borde superior sube y baja; el inferior desciende hacia la derecha. Nada se alinea con nada. -------------------------------------------------------------------------- */ @media (min-width: 64em) { .momentos__pieza--uno { grid-column: 1 / 5; --desfase: 0; } .momentos__pieza--dos { grid-column: 6 / 9; --desfase: var(--esp-3xl); } .momentos__pieza--tres { grid-column: 9 / 12; --desfase: var(--esp-lg); } .momentos__pieza--cuatro { grid-column: 12 / -1; --desfase: var(--esp-4xl); } } .momentos__figura { display: flex; flex-direction: column; gap: var(--esp-sm); } /* ========================================================================== 4. EL RECUADRO Y EL CLIP `aspect-ratio: 9 / 16` es exactamente la proporción de los archivos (720×1280), así que el `cover` no llega a recortar nada: se ve el fotograma entero, que es como se grabó. La proporción va en el RECUADRO y no en el vídeo para que el hueco esté reservado antes de que el clip exista: sin JS, sin red o con el vídeo bloqueado, el alto es el mismo y la página no da ningún salto. ========================================================================== */ .momentos__marco { aspect-ratio: 9 / 16; /* Esquina viva: es la firma de la banda oscura. El radio redondeado pertenece a las secciones claras. */ border-radius: 0; /* Sin sombra: sobre carbón una sombra no se ve y sólo ensucia el borde. El propio contraste imagen/fondo hace de límite. */ box-shadow: none; /* Mientras el póster carga, el hueco es un carbón un punto más abierto que el fondo: se intuye el recuadro sin que aparezca un rectángulo verde. */ background-color: var(--color-fondo-carbon-suave); } /* El clip llena su recuadro. `display: block` quita la línea base de elemento en línea que dejaría una franja de carbón bajo el vídeo. NO hay opacidad ni fundido: el