/* ========================================================================== LOS LOCOS DE LA IA GENERATIVA — hoja de estilos principal Línea gráfica: negro y amarillo, humor, brochazos y grafiti. Sin frameworks ni compilación. CSS moderno (custom properties, grid, clamp). ========================================================================== */ /* ---------- 1. Variables de diseño ---------- */ :root { /* Color */ --negro: #0C0C0D; --negro-2: #17171A; --negro-3: #232328; --amarillo: #F5B814; --amarillo-claro: #FFD34D; --amarillo-tenue: rgba(245, 184, 20, .12); --morado: #6B2BE8; /* acento secundario de las propuestas */ --hueso: #F6F4EF; --hueso-2: #E9E5DC; --gris: #9A968E; --gris-oscuro: #55524C; --blanco: #FFFFFF; --foco: #4C8DFF; /* Para lo que va sobre papel blanco: la zona privada y lo que se imprime */ --papel: #FFFFFF; --crema: #F6F4EF; --texto: #171A22; --linea: #DDD8CB; /* Tipografía. Solo fuentes del sistema: nada que descargar. */ --f-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --f-titulo: "Haettenschweiler", "Arial Narrow Bold", "Impact", "Segoe UI Black", sans-serif; --t-xs: .8125rem; --t-sm: .9375rem; --t-base: 1.0625rem; --t-lg: 1.1875rem; --t-xl: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); --t-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); --t-3xl: clamp(2.8rem, 1.6rem + 5.2vw, 6rem); /* Espaciado */ --e-1: .5rem; --e-2: .75rem; --e-3: 1rem; --e-4: 1.5rem; --e-5: 2rem; --e-6: 3rem; --e-7: 4rem; --e-8: 5.5rem; /* El aire ENTRE BLOQUES de una página y el de DENTRO de un recuadro. Dos medidas con nombre, y no un número repetido en veinte sitios: es lo que pidió José el 16/09/2026 para que no vuelvan a salir huecos distintos en cada esquina. (Ver «una sola medida entre bloques», más abajo.) */ --entre-bloques: 4rem; /* 64 px */ --aire-caja: 2rem; /* 32 px, el de dentro de los marcos */ /* ⚠ LA SEPARACIÓN ENTRE BLOQUES — UNA SOLA MEDIDA, CON NOMBRE (29/08/2026) Orden de José, mirando la portada: «la distancia entre el banner amarillo y el slider, y la que hay entre el slider y el bloque de abajo, debería ser proporcional… no lo quiero ni tan ancho como el de arriba ni tan estrecho como el de abajo». Y después: «veo demasiada distancia, redúcelo a la mitad, EN TODOS LOS CASOS». Estaba medido y era verdad: 120 px encima del pase y 32 debajo. Los 120 salían de sumar dos cosas —los 88 de la sección más los 32 del bloque—, que es justo lo que pasa cuando la separación no tiene un solo dueño. Ahora la pone SIEMPRE quien va encima, por debajo, y nadie más. Es la misma idea que `--aire` en la zona de trabajo: se cambia aquí y cambia en las nueve páginas de golpe. */ --separacion: 60px; /* Estructura */ --ancho: 1180px; --ancho-pastilla: 680px; /* lo que mide una tarjeta de convocatoria */ --r-sm: 8px; --r-md: 14px; --r-lg: 24px; --sombra: 0 18px 46px rgba(0,0,0,.30); } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--f-base); font-size: var(--t-base); line-height: 1.6; color: var(--hueso); background: var(--negro); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } ::selection { background: var(--amarillo); color: var(--negro); } :focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; } /* ⚠ LO QUE ESTÁ OCULTO, OCULTO SE QUEDA. (28/08/2026) El atributo `hidden` del HTML sólo vale `display:none` en la hoja del navegador, que es la de menos peso: CUALQUIER regla nuestra que ponga `display` lo tumba y el trozo se ve. Y no avisa nadie. Pasó de verdad, y a la vista de la gente de fuera: en la página de apuntarse, el cartel de «Ya estás — Hecho. Estás apuntado» llevaba `hidden`, pero `.con-loquillo` lleva `display:grid`. Resultado: salía desde que se abría la página, ANTES de rellenar nada. Alguien se creyó que ya estaba apuntado y se fue sin apuntarse. Lo cazó José el 28/08. Ya había mordido dos veces antes —`.velo` y `.visor` llevan su parche a mano—. Esta línea lo cierra para toda la web y para siempre: quien escriba mañana una clase con `display` no puede volver a romperlo. Va con `!important` a propósito: es la única forma de ganarle a una regla de clase, que siempre pesa más que un atributo. */ [hidden] { display: none !important; } .contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e-4); } .solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Título de rótulo: mayúsculas, condensado, con aire de cartel */ .rotulo { font-family: var(--f-titulo); font-weight: 400; text-transform: uppercase; letter-spacing: .015em; line-height: .95; margin: 0; } .amarillo { color: var(--amarillo); } /* Brochazo amarillo detrás de una palabra */ .brocha { position: relative; display: inline-block; padding: 0 .18em; color: var(--negro); } .brocha::before { content: ""; position: absolute; inset: .06em -.08em .04em -.08em; background: var(--amarillo); transform: rotate(-1.1deg); clip-path: polygon(1% 8%, 99% 0%, 100% 88%, 97% 100%, 3% 96%, 0% 14%); z-index: -1; } /* Trazo suelto bajo un titular */ .trazo { display: block; width: 118px; height: 9px; margin-top: var(--e-3); background: var(--amarillo); clip-path: polygon(0% 42%, 12% 8%, 38% 30%, 66% 4%, 92% 26%, 100% 52%, 88% 96%, 54% 72%, 26% 100%, 6% 78%); } /* ---------- 3. Botones ---------- */ .boton { display: inline-flex; align-items: center; gap: .5em; padding: .85em 1.5em; border: 2px solid transparent; border-radius: var(--r-sm); font-family: var(--f-base); font-size: var(--t-sm); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .14s ease, background .14s ease, color .14s ease; } .boton:hover { transform: translateY(-2px); } .boton--principal { background: var(--amarillo); color: var(--negro); } .boton--principal:hover { background: var(--amarillo-claro); } .boton--borde { border-color: var(--hueso); color: var(--hueso); } .boton--borde:hover { background: var(--hueso); color: var(--negro); } .boton--negro { background: var(--negro); color: var(--hueso); } /* ---------- 4. Cabecera ---------- */ .cabecera { position: sticky; top: 0; z-index: 90; background: rgba(12,12,13,.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.09); } .cabecera__fila { display: flex; align-items: center; gap: var(--e-4); min-height: 74px; } .marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: 0 0 auto; } .marca img { width: 40px; } .marca__texto { font-family: var(--f-titulo); text-transform: uppercase; line-height: .92; font-size: 1.05rem; } .marca__texto span { display: block; font-family: var(--f-base); font-size: .58rem; letter-spacing: .26em; color: var(--amarillo); font-weight: 700; } .menu { display: flex; gap: var(--e-1); margin-left: auto; align-items: center; } .menu a { padding: .6em .85em; border-radius: var(--r-sm); text-decoration: none; font-size: var(--t-sm); font-weight: 600; color: #C9C5BC; transition: .15s; } .menu a:hover { color: var(--blanco); background: rgba(255,255,255,.07); } /* EL BOTÓN DESTACADO DEL MENÚ. (31/08/2026) José: «necesitamos destacar que en el menú de arriba esté inscripciones, es fundamental». Sale amarillo y relleno, como la llamada a la acción que es. ⚠ Hace falta ganarle a la regla de los enlaces del menú, que le pondría el gris de los demás enlaces: por eso el color va aquí y no se hereda. La marca es de cualquier entrada del menú y se enciende desde MAQUETACIÓN, no está clavada a ésta. */ .menu a.menu__destacado { color: var(--negro); background: var(--amarillo); padding: .7em 1.2em; font-size: .8rem; } .menu a.menu__destacado:hover { color: var(--negro); background: var(--amarillo-claro); } .menu a.menu__destacado.activo { color: var(--negro); } .menu-boton { display: none; margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.25); color: var(--hueso); width: 44px; height: 40px; border-radius: var(--r-sm); cursor: pointer; font-size: 1.1rem; } /* Desplegable del menú (Media = Galería + Vídeos) */ .submenu { position: relative; } .submenu__boton { background: none; border: none; cursor: pointer; font-family: var(--f-base); padding: .6em .85em; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; color: #C9C5BC; transition: .15s; } .submenu__boton:hover { color: var(--blanco); background: rgba(255,255,255,.07); } .submenu--activo > .submenu__boton { color: var(--amarillo); } .submenu__caja { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 160px; background: var(--negro-2); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-sm); padding: 6px; box-shadow: var(--sombra); z-index: 20; } .submenu.abierto .submenu__caja { display: block; } .submenu__caja a { display: block; } /* ---------- 5. Portada ---------- */ .portada { position: relative; overflow: hidden; padding: clamp(2.5rem, 5vw, var(--e-8)) 0 var(--e-7); } .portada::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%; background: radial-gradient(60% 100% at 70% 0%, rgba(245,184,20,.16), transparent 70%); pointer-events: none; } .portada__rejilla { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.82fr); gap: var(--e-6); align-items: center; } .portada__titular { font-size: var(--t-3xl); } .portada__entrada { font-size: var(--t-lg); color: #C4BFB5; max-width: 46ch; margin: var(--e-4) 0 var(--e-5); } .portada__acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; } .portada__logo { justify-self: center; max-width: 330px; filter: drop-shadow(0 24px 50px rgba(0,0,0,.55)); } /* ---------- LA CABECERA DE LA PORTADA, EN DOS (28/08/2026) ---------- José, dictándola con la portada delante: «quiero que la cabecera esté compuesta de dos partes… a la izquierda el logotipo, del tamaño aproximado que está ahora, y a la derecha, en el espacio que queda, la frase». Antes iban centrados, el logotipo arriba y la frase debajo. */ /* ---------- Y REHECHA EL 29/08/2026, con lo que dictó ---------- «Nos reunimos» en una línea, «para hablar» en otra y «de la IA» en la tercera, con el brochazo EN LA MISMA LÍNEA. «IA» un poco más grande y con una ligera inclinación hacia la izquierda —eligió cuatro grados sobre la maqueta—. Y el imagotipo a la altura de esas tres líneas, «siempre un poquito más grande», con el conjunto algo más apartado de los bordes. */ .portada__cab { display: flex; align-items: center; gap: clamp(var(--e-4), 4vw, var(--e-6)); /* «Un poco más centrado, sin llegar a estar centrado del todo». */ padding-inline: clamp(var(--e-4), 6%, 7rem); /* Y sitio de referencia para la chapa de la sede, que va en su esquina. */ position: relative; } /* ---------- LA SEDE OFICIAL, EN LA ESQUINA DE LA CABECERA (29/08/2026) ---- José la dictó como «una especie de nota a pie de página a mano derecha», dentro de lo que él llama el lienzo de la cabecera. Y eligió, sobre tres maquetas, la de UNA SOLA LÍNEA: el rótulo a la izquierda y el logotipo a su derecha. LOS NÚMEROS SON SUYOS, medidos y elegidos uno a uno: · el rótulo, un 20 % más pequeño y más fino — «que se vea un poquito menos»: de 11,5 px a 9, y de grosor 800 a 600; · el logotipo a 68 px, que es el tamaño que aprobó; · y el conjunto 40 px más a la izquierda y 20 más arriba de donde estaba, «un poquito más cerca» del imagotipo y del texto. EL LOGOTIPO VA EN BLANCO Y SUELTO, sin ninguna pastilla. Orden suya: «el logotipo, en todos los casos que aparezca en nuestra web, lo quiero sin fondo blanco… todo va en blanco sobre fondo negro». El archivo blanco se fabricó con `tools/quitar-el-fondo-blanco.js --blanco`. */ .portada__sede { position: absolute; right: 80px; bottom: 54px; display: flex; align-items: center; gap: 16px; } .portada__sede__que { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: #B4AFA5; line-height: 1.35; max-width: 9ch; text-align: right; } .portada__sede__logo { display: block; opacity: .92; transition: opacity .15s ease; } .portada__sede__logo:hover { opacity: 1; } .portada__sede__logo img { display: block; height: 68px; width: auto; } /* En el móvil no hay esquina donde meterla: se pone debajo y centrada. */ @media (max-width: 900px) { .portada__sede { position: static; justify-content: center; margin-top: var(--e-4); } .portada__sede__que { text-align: center; } } /* ⚠ LA ALTURA LA MANDA EL TEXTO, NO LA IMAGEN — y la mide un guion. José: «la altura que te den estas tres o cuatro líneas nos marca la altura del imagotipo… siempre tiene que ser un poquito más grande». ESTO NO SE PUEDE HACER SÓLO CON CSS, y costó un intento fallido: se probó con `align-self:stretch` + `aspect-ratio`, y el navegador **no saca el ancho de una altura que viene de estirarse**. Resultado medido: la caja quedaba en 0 px de ancho y EL IMAGOTIPO NO SE VEÍA en ninguna pantalla de ordenador. Lo cazó José: «mira lo que aparece, que es que no aparece el imagotipo». Así que la altura la mide `ajustarElImagotipoALaFrase()` en `publica.js` y la deja aquí, en `--alto`. Y el número de reserva —260px— no es decorativo: es lo que se ve si ese guion no llega a correr. Nunca 0. Calcularlo a mano en `em` tampoco valía: la última línea lleva «IA» más grande y girada, y la altura real no sale de multiplicar líneas por interlínea. */ .portada__cab .portada__logo { flex: 0 0 auto; position: relative; width: var(--alto, 260px); height: var(--alto, 260px); filter: drop-shadow(0 24px 50px rgba(0,0,0,.55)); } .portada__cab .portada__logo img { width: 100%; height: 100%; object-fit: contain; max-width: none; } /* Un punto menos que el titular suelto: aquí sólo tiene medio ancho, y a tamaño de portada entera se comía la línea. */ .portada__cab .portada__titular { font-size: clamp(2.2rem, 1.1rem + 3.4vw, 4.2rem); margin: 0; line-height: .92; /* LOS SALTOS DE LÍNEA LOS PONE EL TEXTO. Así se decide desde MAQUETACIÓN por dónde parte la frase, sin tocar el código ni esta hoja. */ white-space: pre-line; } /* «IA», un punto más grande y con la inclinación que eligió. Al brochazo se le quita su giro propio de 1,1° o se sumarían los dos. ⚠ Y sigue siendo `inline-block`: en la maqueta anterior se estiró a lo ancho de toda la línea —«se va muchísimo»— porque una regla lo volvía bloque. */ .portada__cab .brocha { font-size: 1.16em; transform: rotate(-4deg); transform-origin: left center; } .portada__cab .brocha::before { transform: none; } /* En el móvil no hay dos columnas que valgan: uno debajo de otro y centrados, que es como estaba antes y ahí funcionaba bien. */ /* En el móvil no hay dos columnas que valgan: uno debajo de otro y centrados. Y AQUÍ EL IMAGOTIPO VUELVE A MANDAR SU TAMAÑO: puesto uno encima de otro ya no hay ninguna altura que seguir, así que se le da un ancho y en paz. Sin esto se quedaría estirado a lo que midiera la frase, que en una pantalla estrecha son cinco o seis líneas. */ @media (max-width: 760px) { .portada__cab { flex-direction: column; align-items: center; text-align: center; padding-inline: 0; } /* ⚠ `!important` a propósito: aquí manda el ancho de la pantalla y no la altura de la frase, porque puestos uno encima de otro ya no hay ninguna altura que seguir. El guion escribe `--alto` en el propio elemento —un estilo en línea, que gana a cualquier hoja—, así que esta es la única forma de que el móvil no herede el tamaño calculado para el ordenador. */ .portada__cab .portada__logo { align-self: center; width: clamp(160px, 52vw, 260px) !important; height: clamp(160px, 52vw, 260px) !important; } } /* ---------- EL MARCO DE LA CABECERA, Y LO DE ABAJO (15/09/2026) ---------- José, sobre dos maquetas —la 14 y la 17 de «100_DESCARGAS PARA JMR»—: la cabecera ENTERA dentro del marco fino amarillo de «Lo último en vídeo», y debajo dos mitades: a la izquierda «Participa en nuestra comunidad», a la derecha la pregunta con «Escríbenos». LOS NÚMEROS SALEN DE SUS CORRECCIONES a la primera maqueta: · la pregunta, un 25 % más pequeña (de 28 a 21 px en un ordenador); · el hueco con la frase grande, un 25 % menor (de 2 rem a 1,2); · cada botón del ancho de SU texto —«le sobra botón por todos los lados»— y sin crecer de alto: 66 px, los mismos que tenía; · «Escríbenos» más grande, que «se lee poco». */ .portada__marco { border: 3px solid var(--amarillo); border-radius: var(--r-md); padding: var(--e-5) var(--e-5) var(--e-6); } /* Los dos botones a la misma altura: por eso las mitades se alinean abajo. */ .portada__abajo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: var(--e-5); margin-top: 1.2rem; } .portada__lado { display: flex; flex-direction: column; align-items: center; text-align: center; } .portada__pregunta { font-family: var(--f-base); font-weight: 700; font-size: clamp(1.1rem, .675rem + .825vw, 1.4rem); line-height: 1.22; color: var(--hueso); margin: 0 0 var(--e-3); text-wrap: balance; } /* Lo amarillo nunca se parte en dos líneas: partido no se lee. */ .portada__pregunta span { color: var(--amarillo); white-space: nowrap; } .portada__boton { font-size: 1rem; justify-content: center; text-align: center; min-height: 4.1rem; padding: .6rem 1.6rem; } /* «ESCRÍBENOS» en una línea, y a continuación «y nos lo cuentas». */ .portada__boton--escribir { font-size: 1.6rem; line-height: 1.1; } .portada__boton--escribir small { font-size: .62em; font-weight: 600; letter-spacing: .02em; text-transform: none; margin-left: .35em; } /* La otra forma, que se elige en MAQUETACIÓN: «y nos lo cuentas» debajo. */ .portada__boton--dos { font-size: 1.4rem; } .portada__boton--dos > span { display: flex; flex-direction: column; align-items: center; gap: .08em; } .portada__boton--dos small { margin-left: 0; letter-spacing: .03em; } /* En el móvil, todo en una columna y los botones de lado a lado de la pantalla, que es como se pulsan con el dedo. Una mitad vacía se quita: aquí sólo dejaría un hueco. */ @media (max-width: 760px) { .portada__marco { padding: var(--e-4) var(--e-4) var(--e-5); } .portada__abajo { grid-template-columns: 1fr; gap: var(--e-4); } .portada__lado:empty { display: none; } .portada__boton { width: 100%; padding-inline: 1rem; } .portada__boton--escribir { font-size: 1.3rem; } /* ⚠ En un teléfono «ESCRÍBENOS y nos lo cuentas» no cabe en una línea, y se partía por la mitad: «y nos lo» arriba y «cuentas» abajo. Medido a 375 px en la web publicada. Aquí la letra pequeña va siempre entera debajo. */ .portada__boton--escribir > span { display: flex; flex-direction: column; align-items: center; gap: .08em; } .portada__boton--escribir small { margin-left: 0; } .portada__boton--dos { font-size: 1.25rem; } .portada__salto { display: none; } } /* Franja del próximo encuentro */ .proximo { margin-top: var(--e-6); background: var(--amarillo); color: var(--negro); border-radius: var(--r-md); padding: var(--e-4) var(--e-5); display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-4); align-items: center; } .proximo__num { font-family: var(--f-titulo); font-size: 3.4rem; line-height: .85; } .proximo__num small { display: block; font-family: var(--f-base); font-size: .58rem; letter-spacing: .2em; font-weight: 800; } .proximo__titulo { font-family: var(--f-titulo); text-transform: uppercase; font-size: 1.6rem; line-height: 1; } .proximo__datos { font-size: var(--t-sm); font-weight: 600; margin-top: .35rem; } /* ---------- 6. Secciones ---------- */ .seccion { padding: var(--separacion) 0; } .seccion--clara { background: var(--hueso); color: var(--negro); } .seccion--clara .seccion__intro { color: var(--gris-oscuro); } .seccion__titulo { font-size: var(--t-2xl); } .seccion__intro { color: #B4AFA5; max-width: 62ch; margin-top: var(--e-4); font-size: var(--t-lg); } /* ---------- 7. Tarjetas de encuentro ---------- */ .encuentros { display: grid; gap: var(--e-3); margin-top: var(--e-6); } .encuentro { display: grid; grid-template-columns: 92px 190px minmax(0,1fr) auto; gap: var(--e-4); align-items: center; background: var(--negro-2); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-md); padding: var(--e-4) var(--e-5); transition: border-color .15s, transform .15s; } .encuentro:hover { border-color: var(--amarillo); transform: translateX(3px); } .encuentro__num { font-family: var(--f-titulo); font-size: 2.6rem; line-height: .85; color: var(--amarillo); } .encuentro__num small { display: block; font-family: var(--f-base); font-size: .55rem; letter-spacing: .2em; color: var(--gris); font-weight: 800; } .encuentro__dia { font-size: var(--t-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--amarillo); } .encuentro__fecha { font-family: var(--f-titulo); font-size: 1.5rem; margin-top: .1rem; } .encuentro__hora { font-size: var(--t-xs); color: var(--gris); } .encuentro__nombre { font-family: var(--f-titulo); text-transform: uppercase; font-size: 1.35rem; line-height: 1; } .encuentro__nombre.vacio { color: var(--gris); font-family: var(--f-base); font-size: var(--t-sm); text-transform: none; font-style: italic; } .encuentro__sitio { font-size: var(--t-sm); color: #ADA79C; margin-top: .3rem; } .etiqueta { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; padding: .35em .7em; border-radius: 99px; white-space: nowrap; } .etiqueta--proximo { background: var(--amarillo); color: var(--negro); } .etiqueta--pasado { background: rgba(255,255,255,.08); color: var(--gris); } /* ---------- 8. Rejilla de contenidos ---------- */ .rejilla-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--e-4); margin-top: var(--e-6); } .tarjeta { background: var(--blanco); color: var(--negro); border: 1px solid var(--hueso-2); border-radius: var(--r-md); padding: var(--e-5); } .tarjeta h3 { font-family: var(--f-titulo); text-transform: uppercase; font-size: 1.3rem; margin: 0 0 .5rem; } .tarjeta p { margin: 0; color: var(--gris-oscuro); font-size: var(--t-sm); } /* Galería */ .galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--e-3); margin-top: var(--e-6); } .galeria figure { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--negro-3); position: relative; } .galeria img { aspect-ratio: 4/3; object-fit: cover; width: 100%; } .galeria figcaption { padding: var(--e-3); font-size: var(--t-xs); color: var(--gris); } .hueco { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(255,255,255,.18); border-radius: var(--r-md); color: var(--gris); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: var(--e-3); } .seccion--clara .hueco { border-color: var(--hueso-2); color: var(--gris); } /* ---------- 9. Contacto ---------- */ .contacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--e-4); margin-top: var(--e-6); } .contacto__via { border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: var(--e-5); background: var(--negro-2); } .contacto__via h3 { font-family: var(--f-titulo); text-transform: uppercase; font-size: 1.2rem; margin: 0 0 .4rem; } .contacto__via p { margin: 0 0 var(--e-3); color: #ADA79C; font-size: var(--t-sm); } /* ---------- 10. Pie ---------- */ /* ---------- EL PIE, EN DOS PISOS (29/08/2026) ---------- José miró el pie y creyó que no había pie: llevaba tres cosas sueltas en una línea. Ahora tiene contenido, y con contenido hace falta orden: · ARRIBA la llamada a la comunidad y los iconos de redes; · ABAJO la letra pequeña — copyright, lo legal, el acceso y la firma. Los separa una raya fina, no un fondo: él imprime, y aquí no hay negros. */ .pie { border-top: 1px solid rgba(255,255,255,.09); padding: var(--e-6) 0; font-size: var(--t-sm); color: var(--gris); } .pie__alto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4) var(--e-5); padding-bottom: var(--e-4); border-bottom: 1px solid rgba(255,255,255,.09); } .pie__llamada { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pie__llamada__que { color: var(--hueso); font-weight: 800; font-size: var(--t-base); } .pie__llamada__mas { font-size: var(--t-xs); } .pie__llamada__boton { flex: 0 0 auto; } /* Las dos vías de contacto, juntas y en su orden: el botón de la comunidad y, al lado, el correo. El correo va como enlace y no como segundo botón a propósito: dos botones iguales compiten entre sí y ninguno destaca. */ .pie__vias { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; } .pie__correo { color: var(--hueso); text-decoration: none; font-weight: 700; font-size: var(--t-sm); border-bottom: 2px solid rgba(245,184,20,.55); padding-bottom: 2px; transition: border-color .15s ease, color .15s ease; } .pie__correo:hover { color: var(--amarillo); border-bottom-color: var(--amarillo); } .pie__bajo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); padding-top: var(--e-4); font-size: var(--t-xs); } .pie__legal { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); } .pie__legal a { white-space: nowrap; } /* La firma de la casa. Discreta a propósito: es una firma, no un anuncio. */ .pie__firma { color: #6F6B63; } .pie__firma a { color: #8C877E; } .pie__firma a:hover { color: var(--amarillo); } .pie a { text-decoration: none; } .pie a:hover { color: var(--amarillo); } /* --- LAS REDES, EN EL PIE DE TODAS LAS PÁGINAS (28/08/2026) --- Pedido por José: «en todas las páginas creo que tiene que haber un acceso a redes sociales». Van en medio del pie, entre el copyright y el acceso del equipo, y en el móvil se van a su propia línea centradas. */ .pie__redes { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } .pie__redes a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--gris); transition: color .15s ease, background-color .15s ease; } .pie__redes a:hover, .pie__redes a:focus-visible { color: var(--negro); background: var(--amarillo); } /* La que todavía no tiene dirección: se ve, ocupa su sitio y NO se puede pinchar. Orden de José el 28/08: «que tengan presencia para que sepamos que están ahí, que los tenemos que activar». */ .pie__redes__apagada { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #4A4740; cursor: default; } .icono-red { display: block; } @media (max-width: 640px) { .pie__alto, .pie__bajo { justify-content: center; text-align: center; } .pie__llamada { text-align: center; } .pie__redes { width: 100%; justify-content: center; } .pie__legal { justify-content: center; } } /* ---------- 10 bis. Convocatorias, banderines, carteles y visor ---------- */ .menu a.activo { color: var(--amarillo); } .subtitulo-bloque { font-size: 1.5rem; margin: var(--e-6) 0 var(--e-2); } /* El cartel del encuentro que viene, en la portada. Mismo ancho que las pastillas de convocatoria y centrado, para que las tres piezas formen una sola columna. Un cartel vertical no desborda: se queda contenido y alto. Puesto el 25/08/2026. */ .cartel-portada { margin-top: var(--e-5); text-align: center; } .cartel-portada:empty { display: none; } .cartel-portada img { display: block; width: 100%; max-width: var(--ancho-pastilla); max-height: 520px; object-fit: contain; margin-inline: auto; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.1); } /* Convocatoria desarrollada */ .convocatorias { display: grid; gap: var(--e-3); margin-top: var(--e-4); } /* La pastilla NO ocupa todo el ancho de la página: se queda en lo que necesita el texto y va CENTRADA. Pedido por José el 07/08/2026 — «que la pastilla en sí sea más corta» y «centradas». Para hacerla más ancha o más estrecha, toca solo el número de --ancho-pastilla. */ .convocatoria { display: grid; grid-template-columns: 128px minmax(0, 1fr); width: 100%; max-width: var(--ancho-pastilla); margin-inline: auto; background: var(--negro-2); border: 1px solid rgba(255,255,255,.1); border-left: 6px solid var(--amarillo); border-radius: var(--r-md); overflow: hidden; } .convocatoria__adorno { display: none; } .convocatoria__fecha { background: var(--amarillo); color: var(--negro); text-align: center; display: flex; flex-direction: column; justify-content: center; padding: var(--e-4) var(--e-2); } .convocatoria__dia { font-size: .6rem; font-weight: 900; letter-spacing: .16em; } .convocatoria__num { font-family: var(--f-titulo); font-size: 3.2rem; line-height: .85; } .convocatoria__mes { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; } .convocatoria__cuerpo { padding: var(--e-4) var(--e-5); align-self: center; } .convocatoria__etiqueta { font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: var(--amarillo); } .convocatoria__titulo { font-size: 1.9rem; margin-top: .25rem; } .convocatoria__sub { color: var(--amarillo-claro); font-style: italic; font-size: var(--t-sm); margin: .3rem 0 0; } .convocatoria__datos { color: #ADA79C; font-size: var(--t-sm); margin: .5rem 0 0; } /* ⚠ LO DE LA CONVOCATORIA EN EL MÓVIL NO SE ESCRIBE AQUÍ. Está en el apartado «12. Pantallas pequeñas», más abajo, y tiene que estar ahí: ese apartado lleva su propia regla para `.convocatoria` y, a igualdad de especificidad, gana la que va después en el fichero. Una regla de móvil escrita en este sitio se guarda bien, se publica y NO HACE NADA. */ /* ========================================================================== EL BANNER DEL PRÓXIMO ENCUENTRO (28/08/2026) Las dos imágenes de la sesión que viene, una al lado de la otra: el cartel apaisado a la izquierda y el vertical de Instagram a la derecha. ⚠ SE LLAMA `pbanner` Y NO `proximo` A PROPÓSITO. La clase `.proximo` ya existe unas líneas más arriba —es la franja amarilla del fichero antiguo `LOS_LOCOS.html`— y le habría puesto a esto un fondo amarillo sin que nadie entendiera de dónde salía. EL REPARTO: 1,45 a 1. Las dos imágenes se enseñan ENTERAS y con la MISMA altura, que es lo que hace que se lean como una sola pieza; el reparto sale de sus proporciones reales —1400x788 y 1080x1350— para que ninguna de las dos quede diminuta al lado de la otra. ========================================================================== */ .pbanner { margin-top: var(--e-5); } .pbanner:empty { display: none; } .pbanner__par { display: grid; grid-template-columns: 1.6fr 0.8fr; /* de reserva: lo bueno lo calcula publica.js */ gap: var(--e-3); align-items: start; } .pbanner__par--uno { grid-template-columns: minmax(0, 1fr); justify-items: center; } .pbanner__par figure { margin: 0; min-width: 0; } .pbanner__par img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.1); } .pbanner__par--uno img { max-width: var(--ancho-pastilla); max-height: 520px; margin-inline: auto; } /* --- El cartón para salir del paso --- Sale cuando el encuentro que viene todavía no tiene ni un cartel. José: «sería como una imagen para salir del paso y que no hubiera un hueco ahí». */ .pbanner--paso { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-4); align-items: center; border: 3px solid var(--amarillo); border-radius: var(--r-md); padding: var(--e-4) var(--e-5); } .pbanner__loquillo img { display: block; width: clamp(110px, 16vw, 190px); height: auto; } .pbanner__etiqueta { font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--amarillo); font-weight: 800; } .pbanner__datos h3 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); margin: .3rem 0 .6rem; } .pbanner__cuando { margin: 0; font-size: var(--t-lg); color: var(--hueso); } .pbanner__donde { margin: .25rem 0 0; font-size: var(--t-sm); color: var(--gris); } @media (max-width: 760px) { /* ⚠ EL `!important` ESTÁ PUESTO A PROPÓSITO Y HAY QUE DEJARLO. (08/09/2026) El reparto de las dos columnas lo escribe `publica.js` EN EL PROPIO ELEMENTO —`style="grid-template-columns: 1.6fr 0.8fr"`—, calculado con las proporciones de verdad de las dos imágenes. Un estilo en línea gana a cualquier regla de esta hoja, así que esta línea llevaba desde que se escribió sin hacer nada: medido en un móvil de 375 px, los dos carteles seguían saliendo uno al lado del otro, el más estrecho a 97 px. Y era justo el ejemplo que puso José: «quiero que estas tres imágenes que componen la parte superior de la home vayan en el móvil una debajo de otra». Una regla que existe y no se aplica es peor que no tenerla: parece que el asunto está resuelto. */ .pbanner__par { grid-template-columns: minmax(0, 1fr) !important; } .pbanner--paso { grid-template-columns: 1fr; justify-items: center; text-align: center; } } /* ========================================================================== RESERVA LA FECHA, CON SU PROPIO MARCO (28/08/2026) José: «que el tamaño de reserva fecha sea más grande, como has hecho de dónde venimos; y que todo el bloque también tuviera su propio marco». Es el mismo marco fino y amarillo que eligió para «De dónde venimos», para que los dos bloques se lean como hermanos y no como dos inventos. ========================================================================== */ .reserva { border: 3px solid var(--amarillo); border-radius: var(--r-md); padding: var(--e-5) var(--e-5) var(--e-6); } .reserva__titulo { font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.8rem); letter-spacing: .055em; margin: 0; } .reserva__intro { color: var(--gris); margin: .7rem 0 0; max-width: 60ch; font-size: var(--t-sm); } /* Banderín cuadrado de solo fecha. ⚠ LAS COLUMNAS LAS PONE `montarPortada()`, NO ESTE FICHERO. El 28/08/2026 José las quiso «cinco arriba y cuatro abajo»; el 29, viéndolo montado, cambió de opinión: «lo veo especialmente grande para algo que está bastante vacío… todas en una única línea». Así que ahora son todas las que haya, hasta un tope de diez para que no queden como sellos. */ .banderines { display: grid; grid-template-columns: repeat(var(--columnas, 6), minmax(0, 1fr)); gap: var(--e-3); margin-top: var(--e-4); } @media (max-width: 740px) { .banderines { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 470px) { .banderines { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .banderin { aspect-ratio: 1; border: 1px solid rgba(245,184,20,.55); border-radius: var(--r-md); background: var(--negro-2); position: relative; overflow: hidden; transition: border-color .15s, transform .15s; } .banderin:hover { border-color: var(--amarillo); transform: translateY(-3px); } .banderin__num { position: absolute; top: 6px; right: 9px; font-family: var(--f-titulo); font-size: .9rem; color: var(--gris); z-index: 3; } /* ⚠ EL PERSONAJE, ABAJO A LA DERECHA. (29/08/2026, opción B de la maqueta) Va COLOCADO con `position:absolute` y no metido dentro, por lo mismo que las piezas del grafismo: metido dentro, una imagen alta empujaría el recuadro y el cuadrado dejaría de ser cuadrado. Aquí manda el marco. Se sale un poco por el borde a propósito —los -6px—, para que se lea como un personaje asomándose y no como una foto pegada en una esquina. */ .banderin__loco { position: absolute; right: -6px; bottom: -6px; z-index: 1; width: 58%; height: 58%; object-fit: contain; object-position: bottom right; pointer-events: none; } /* Y el texto sube arriba a la izquierda, que es lo que deja sitio al personaje. Hasta hoy iba centrado en medio del cuadrado. */ .banderin__texto { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; padding: 11px 10px; } .banderin__dia { font-size: .5rem; font-weight: 900; letter-spacing: .14em; color: var(--amarillo); } .banderin__fecha { font-family: var(--f-titulo); font-size: 1.45rem; line-height: 1; margin-top: .15rem; text-transform: uppercase; } .banderin__anio { font-size: .62rem; color: var(--gris); } .banderin__hora { font-size: .62rem; color: #ADA79C; margin-top: .25rem; } /* Llamada a la comunidad — texto y botón a un lado, el QR al otro */ /* ========================================================================== LA COMUNIDAD, AHORA COMPONIBLE (31/08/2026) Antes era una franja fija: amarilla, el texto a la izquierda y el QR a la derecha, y punto. José: «queremos hacer una composición de otra manera… el texto justificado a la derecha, el QR más grande y centrado en su columna; o el QR a la izquierda y el texto a la derecha. Estos cambios van a ser habituales». Ahora son cuatro botones: el fondo, el reparto, de qué lado va el QR y cómo se alinea el texto. Lo de siempre —amarillo, 60/40, QR a la derecha, texto a la izquierda— es lo que sale si no se toca nada, así que la portada no cambia hasta que él quiera. ========================================================================== */ .comunidad { margin-top: 0; border-radius: var(--r-lg); padding: var(--e-7) var(--e-5); display: grid; gap: var(--e-5) var(--e-7); align-items: center; } /* --- El fondo --- */ .comunidad--relleno { background: var(--amarillo); color: var(--negro); } .comunidad--marco { border: 3px solid var(--amarillo); } .comunidad--nada { padding-left: 0; padding-right: 0; } /* --- El reparto entre el texto y el QR --- */ .comunidad--6040 { grid-template-columns: 60fr 40fr; } .comunidad--5050 { grid-template-columns: 1fr 1fr; } .comunidad--7030 { grid-template-columns: 70fr 30fr; } /* --- De qué lado va el QR. Se cambia el orden, no el HTML: así el que navega escuchando sigue oyendo primero el texto y luego el código. --- */ .comunidad--qr-izquierda .comunidad__texto { order: 2; } .comunidad--qr-izquierda .comunidad__qr { order: 1; } /* --- Cómo se alinea el texto --- */ .comunidad--al-izquierda .comunidad__texto { text-align: left; } .comunidad--al-centro .comunidad__texto { text-align: center; } .comunidad--al-derecha .comunidad__texto { text-align: right; } .comunidad--al-centro .comunidad__texto p { margin-inline: auto; } .comunidad--al-derecha .comunidad__texto p { margin-inline: auto 0; } .comunidad h2 { font-size: var(--t-2xl); } .comunidad p { max-width: 52ch; margin: var(--e-3) 0 var(--e-5); font-weight: 600; } .comunidad__texto { min-width: 0; } /* El QR se centra en su columna y CRECE con ella: era lo que pedía —«más grande, adecuado al espacio que le permite la columna»—. Con un tope, que un código de 400 píxeles no lo escanea mejor nadie. */ .comunidad__qr { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem; } .comunidad__qr img { display: block; width: 100%; max-width: 260px; height: auto; background: #fff; padding: .55rem; border-radius: var(--r-md); box-shadow: 0 .5rem 1.4rem rgba(0,0,0,.22); } .comunidad__qr figcaption { font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; text-align: center; } /* Sin QR, el texto ocupa la franja entera en vez de dejar media vacía. */ .comunidad:not(:has(.comunidad__qr)) { grid-template-columns: 1fr; } /* En pantalla estrecha, uno debajo de otro y todo centrado. */ @media (max-width: 56rem) { .comunidad { grid-template-columns: 1fr; text-align: center; padding: var(--e-6) var(--e-4); } .comunidad .comunidad__texto { text-align: center; } .comunidad p { margin-inline: auto; } .comunidad--qr-izquierda .comunidad__texto, .comunidad--qr-izquierda .comunidad__qr { order: 0; } } /* Cuadrícula de carteles */ .rejilla-carteles { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: var(--e-4); margin-top: var(--e-6); } /* La caja existe para colgar la lupa: el cartel entero es un enlace y el botón de ampliar no puede ir dentro de un enlace. (08/09/2026) */ .cartel-caja { position: relative; } .cartel__lupa { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; background: rgba(6,6,7,.72); border: 1px solid rgba(255,255,255,.28); color: var(--hueso); font-size: 1rem; line-height: 1; cursor: zoom-in; z-index: 2; opacity: 0; transition: opacity .16s, background .16s, color .16s; } .cartel-caja:hover .cartel__lupa, .cartel__lupa:focus-visible { opacity: 1; } .cartel__lupa:hover { background: var(--amarillo); color: var(--negro); border-color: var(--amarillo); } /* En una pantalla táctil no hay «pasar el ratón por encima»: si se escondiera hasta el hover, en el móvil no existiría. Ahí se ve siempre. */ @media (hover: none) { .cartel__lupa { opacity: .92; } } .cartel { display: block; text-decoration: none; border-radius: var(--r-md); overflow: hidden; background: var(--negro-2); border: 1px solid rgba(255,255,255,.1); transition: .16s; } .cartel:hover { border-color: var(--amarillo); transform: translateY(-4px); box-shadow: var(--sombra); } .cartel__imagen { aspect-ratio: 3/4; overflow: hidden; background: var(--negro-3); } .cartel__imagen img { width: 100%; height: 100%; object-fit: cover; } .cartel__sustituto { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2); background: radial-gradient(80% 80% at 50% 30%, rgba(245,184,20,.14), transparent 70%), var(--negro-3); } .cartel__sustituto img { width: 46%; opacity: .92; } .cartel__num { font-family: var(--f-titulo); font-size: 2.2rem; color: var(--amarillo); } .cartel__pie { padding: var(--e-3) var(--e-4) var(--e-4); } .cartel__fecha { display: block; font-size: .64rem; letter-spacing: .16em; font-weight: 900; color: var(--amarillo); } .cartel__titulo { display: block; font-family: var(--f-titulo); text-transform: uppercase; font-size: 1.1rem; line-height: 1.05; margin-top: .3rem; color: var(--hueso); } /* Ficha de una sesión */ .volver-atras { display: inline-block; font-size: var(--t-sm); color: var(--gris); text-decoration: none; margin-bottom: var(--e-5); } .volver-atras:hover { color: var(--amarillo); } .ficha__cabecera { padding-bottom: var(--e-4); border-bottom: 3px solid var(--amarillo); } .ficha__etiqueta { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 900; color: var(--amarillo); } .ficha__titulo { font-size: var(--t-2xl); margin-top: .35rem; } .ficha__datos { color: #ADA79C; font-size: var(--t-sm); margin: var(--e-2) 0 0; } .ficha__texto { margin-top: var(--e-5); font-size: var(--t-lg); color: #C8C3B8; max-width: 68ch; } .bloque-ficha { margin-top: var(--e-6); } .intervienen { list-style: none; padding: 0; margin: var(--e-3) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e-2); } .intervienen li { background: var(--negro-2); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-sm); padding: var(--e-3) var(--e-4); } .intervienen strong { display: block; font-size: var(--t-base); } .intervienen span { font-size: var(--t-xs); color: var(--amarillo); letter-spacing: .1em; text-transform: uppercase; } /* Galería y visor */ .galeria__pieza { padding: 0; border: none; background: none; cursor: zoom-in; border-radius: var(--r-md); overflow: hidden; } .galeria__pieza img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform .25s; } .galeria__pieza:hover img { transform: scale(1.04); } /* ⚠ EL VISOR CON ZOOM — «que pueda LEER bien la información». (08/09/2026) Se amplía cualquier imagen del cuerpo de cualquier página; quién sí y quién no lo decide `assets/js/visor.js`, que lleva la regla escrita. Dos avisos para quien lo toque: · `.visor` la usa TAMBIÉN la zona de trabajo (`app.html` carga esta hoja y luego `app.css`), donde `verGrande()` mete un `` pelado sin ninguna clase. Por eso hay una regla aparte para `.visor > img`: si se quita, el cartel que se abre desde la ficha del encuentro sale a tamaño natural y se va de la pantalla. · El zoom es un `transform` sobre la imagen, así que el freno del arrastre se mide del tamaño de maquetación (`offsetWidth`), no del que se ve. */ /* El velo va casi opaco a propósito. Con un 4 % de transparencia se leía la cabecera amarilla por encima de la foto —comprobado en un móvil de 375—, y aquí se viene a leer, no a adivinar. */ .visor { position: fixed; inset: 0; z-index: 200; background: rgba(6,6,7,.985); display: grid; place-items: center; padding: var(--e-5); } .visor[hidden] { display: none; } html.con-visor, html.con-visor body { overflow: hidden; } /* La versión con zoom: el lienzo ocupa todo menos la barra y la cabecera. */ .visor--grande { padding: 0; } /* ⚠ FLEX Y NO GRID, Y EL MOTIVO ES EL FALLO DE LAS VERTICALES. (09/09/2026) Lo cazó José: «al ampliar los carteles, las horizontales se ven perfectas pero las verticales no, la parte de debajo se la come». Estaba en `display: grid` con `place-items: center`. Una rejilla mide su fila por lo que hay dentro, así que la fila valía lo que medía la imagen; y un `max-height: 100%` que se calcula contra una fila que a su vez depende de la imagen es circular, así que el navegador lo IGNORA. Resultado: la imagen salía a su tamaño natural y el `overflow: hidden` le cortaba lo que sobraba. Medido en la web: un cartel de 1080x1350 en un hueco de 706 de alto —644 px por debajo del borde—. A las apaisadas no les pasaba porque su alto natural ya cabía, y por eso parecía que el visor estaba bien. Con `flex` el hueco tiene altura definida —se la dan sus topes de arriba y abajo— y el `max-height: 100%` sí se resuelve contra ella. El `min-height: 0` está puesto a propósito: sin él, un hijo de flex no se deja encoger por debajo de su contenido y volvería a pasar lo mismo. */ .visor__lienzo { position: absolute; inset: 62px 0 92px; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; } .visor--grande .visor__imagen { max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; width: auto; height: auto; object-fit: contain; border-radius: var(--r-sm); transform-origin: center center; will-change: transform; cursor: zoom-in; -webkit-user-drag: none; } .visor--grande .visor__imagen--cerca { cursor: grab; border-radius: 0; } .visor--grande.visor--cerca .visor__lienzo:active .visor__imagen { cursor: grabbing; } /* El `` pelado que mete la zona de trabajo. No tocar sin leer el aviso. */ .visor > img { max-width: min(1400px, 92vw); max-height: 84vh; object-fit: contain; border-radius: var(--r-sm); } .visor__pie { position: absolute; left: 50%; transform: translateX(-50%); bottom: 58px; margin: 0; max-width: 86vw; text-align: center; color: var(--gris); font-size: var(--t-sm); } .visor__pie[hidden] { display: none; } .visor__cuenta { position: absolute; top: var(--e-4); left: var(--e-4); margin: 0; color: var(--gris); font-size: var(--t-sm); letter-spacing: .1em; } .visor__cuenta[hidden] { display: none; } .visor--solo .visor__flecha { display: none; } .visor__cerrar, .visor__flecha { position: absolute; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: var(--hueso); border-radius: 50%; width: 46px; height: 46px; cursor: pointer; font-size: 1.4rem; } .visor__cerrar { top: var(--e-4); right: var(--e-4); z-index: 2; } .visor__flecha--izq { left: var(--e-3); top: 50%; transform: translateY(-50%); z-index: 2; } .visor__flecha--der { right: var(--e-3); top: 50%; transform: translateY(-50%); z-index: 2; } .visor__cerrar:hover, .visor__flecha:hover, .visor__zoom:hover { background: var(--amarillo); color: var(--negro); } /* Los dos botones de acercar. Existen porque no todo el mundo sabe que se puede pellizcar la pantalla, y él quiere que se pueda LEER, no adivinar. */ .visor__barra { position: absolute; bottom: var(--e-4); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--e-3); z-index: 2; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 5px 8px; } .visor__zoom { background: none; border: 0; color: var(--hueso); cursor: pointer; width: 34px; height: 34px; border-radius: 50%; font-size: 1.3rem; line-height: 1; } .visor__medida { color: var(--gris); font-size: var(--t-sm); min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; } /* La señal de que una imagen se puede abrir. Discreta: la web está llena de imágenes y no puede parecer que todo es un botón. */ img.ampliable { cursor: zoom-in; } img.ampliable:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; } @media (max-width: 700px) { .visor__lienzo { inset: 56px 0 86px; } .visor__cerrar, .visor__flecha { width: 40px; height: 40px; font-size: 1.2rem; } .visor__flecha--izq { left: 2px; } .visor__flecha--der { right: 2px; } .visor__pie { bottom: 52px; font-size: .78rem; } } /* Vídeos */ .video { position: relative; aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; background: var(--negro-3); } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--e-5); margin-top: var(--e-6); } .video-ficha h3 { font-size: 1.2rem; margin: var(--e-3) 0 .2rem; text-transform: uppercase; } .video-ficha__datos { font-size: var(--t-sm); color: var(--gris); margin: 0; } .video-ficha__datos a { color: var(--amarillo); } /* ---------- 11. Marcador de texto pendiente ---------- */ .pendiente { background: repeating-linear-gradient(45deg, var(--amarillo-tenue), var(--amarillo-tenue) 8px, transparent 8px, transparent 16px); border: 1px dashed var(--amarillo); border-radius: var(--r-sm); padding: .1em .45em; font-style: italic; } /* ---------- 12. Pantallas pequeñas ---------- ⚠ AQUÍ ES DONDE MANDA EL MÓVIL, Y HAY QUE ESCRIBIRLO AQUÍ. Este apartado va casi al final del fichero, así que sus reglas ganan a cualquier otra de la misma fuerza escrita más arriba, junto a su pieza. El 08/09/2026 costó media hora: la regla del móvil de `.convocatoria` estaba escrita al lado de la convocatoria, en la línea 568, y el bloque de 900 px de aquí abajo se la comía. Se publicaba, decía «Listo», y en el teléfono seguía saliendo igual. La regla, entonces: si una pieza necesita algo distinto en el móvil, su regla va EN ESTE APARTADO. Junto a la pieza se deja, como mucho, un aviso diciendo dónde está. */ @media (max-width: 900px) { .portada__rejilla { grid-template-columns: 1fr; } .portada__logo { max-width: 230px; order: -1; } .encuentro { grid-template-columns: 64px 1fr; row-gap: var(--e-2); } .encuentro__num { font-size: 2rem; } .proximo { grid-template-columns: auto 1fr; } .convocatoria { grid-template-columns: 96px minmax(0, 1fr); } .convocatoria__num { font-size: 2.3rem; } .convocatoria__cuerpo { padding: var(--e-4); } .convocatoria__titulo { font-size: 1.4rem; } .convocatoria__adorno { display: none; } } /* ⚠ LA CONVOCATORIA, EN VERTICAL EN EL TELÉFONO. (08/09/2026) La pastilla amarilla de la fecha se llevaba 96 px fijos de los 327 que hay en un móvil, y al título —que puede ser «QUÉ NOS DEJA HACER LA LEY CON LA IA»— le quedaban 224 para tres líneas apretadas. José: «en el móvil se ha de plantear el espacio de forma vertical». La fecha no se apila en tres pisos: se pone en una banda de una sola línea —jueves · 24 · septiembre—, que ocupa lo justo. Apilada se comía media pantalla antes de llegar al título, que es lo que se viene a leer. */ @media (max-width: 560px) { .convocatoria { grid-template-columns: minmax(0, 1fr); } .convocatoria__fecha { flex-direction: row; align-items: baseline; justify-content: center; gap: .45rem; padding: var(--e-2) var(--e-3); } .convocatoria__num { font-size: 2.1rem; line-height: 1; } .convocatoria__titulo { font-size: 1.45rem; } } @media (max-width: 720px) { .menu { display: none; position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--negro-2); border-bottom: 1px solid rgba(255,255,255,.1); padding: var(--e-2); } .menu.abierto { display: flex; } .menu-boton { display: block; } .submenu__caja { position: static; display: block; border: none; box-shadow: none; background: transparent; padding: 0 0 0 var(--e-3); } .submenu__boton { display: none; } .seccion { padding: var(--e-7) 0; } } /* ---------- 10 ter. LOS BLOQUES DEL MAQUETADOR (25/08/2026) ---------- Lo que se monta desde la zona de trabajo cae en estos huecos. Una zona sin bloques no ocupa nada: ni margen, ni espacio en blanco, ni rastro. */ .zona-libre:empty { display: none; } /* EL AIRE DE ARRIBA DE UNA PÁGINA CUYO TÍTULO ES UNA PIEZA. (15/09/2026) Hasta ese día el título iba escrito en una `.seccion`, y el aire de encima lo ponía ella. Hecho pieza, lo pone el hueco donde vive: la misma medida, así que la página no se mueve ni un píxel. */ .zona-libre--pagina { padding-top: var(--separacion); } /* En pantalla estrecha la sección tenía 4rem arriba y abajo, no 60 px (ver el `.seccion` de la regla de 720 px): lo mismo aquí, y debajo de la entradilla. */ @media (max-width: 720px) { .zona-libre--pagina { padding-top: var(--e-7); } .bloque--texto.bl-est-entrada:not(.bl-sep-p):not(.bl-sep-0) { padding-bottom: var(--e-7); } /* …y debajo del título cuando la página no tiene entradilla (Contacto). */ .zona-libre--pagina .lienzo > .lienzo__fila:first-child .bloque--titulo:last-child:not(.bl-sep-p):not(.bl-sep-0) { padding-bottom: var(--e-7); } } /* Cada bloque separa por DEBAJO, y sólo por debajo: si separase también por arriba, el hueco contra la sección de encima se sumaría y saldrían 120 px donde se querían 60. Es lo que pasaba hasta el 29/08/2026. */ .bloque { padding: 0 0 var(--separacion); } /* Y entre dos bloques seguidos, la misma medida: la pone el de arriba. */ .bloque:last-child { padding-bottom: var(--separacion); } /* «Espacio debajo», que se elige en cada pieza desde MAQUETACIÓN. (15/09/2026) José quería «unos cuantos píxeles» entre «LO QUE VIENE» y la imagen de apuntarse. Van DESPUÉS de las dos reglas de arriba, a propósito: pesan lo mismo y gana la que va detrás. */ .bloque.bl-sep-p { padding-bottom: 20px; } .bloque.bl-sep-0 { padding-bottom: 0; } /* ⚠ LAS PIEZAS DE COMPONER UN TEXTO. (08/09/2026) Antetítulo · Titular · Subtítulo · Texto · Frase destacada. Dictadas por José: «un antetítulo, un titular, luego una selección de dos frases destacada, luego dos párrafos, luego otro subtítulo». El ancho de lectura es el mismo en las cinco —68 caracteres— para que un texto compuesto con ellas quede alineado y se lea como un artículo, no como cinco piezas sueltas puestas una detrás de otra. */ .bloque__antetitulo { margin: 0 0 .35rem; max-width: 68ch; font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--amarillo); } .bloque__titulo { font-size: 2rem; margin: 0; } .bloque__subtitulo { font-size: 1.35rem; margin: 0; max-width: 68ch; text-transform: uppercase; color: var(--hueso); } .bloque__texto { color: #C9C4B8; line-height: 1.75; max-width: 68ch; } .bloque__texto p { margin: 0 0 1em; } .bloque__texto p:last-child { margin-bottom: 0; } /* La frase destacada: una raya amarilla al lado, no un recuadro relleno. Las comillas las pone el estilo, para que no salgan dobles el día que alguien las escriba también. */ .bloque__destacado { margin: 0; max-width: 60ch; border-left: 4px solid var(--amarillo); padding: .2rem 0 .2rem var(--e-4); } .bloque__destacado p { margin: 0; font-family: var(--f-titulo); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem); line-height: 1.25; color: var(--hueso); } .bloque__destacado p::before { content: '«'; } .bloque__destacado p::after { content: '»'; } .bloque__destacado cite { display: block; margin-top: .55rem; font-style: normal; font-size: var(--t-sm); color: var(--gris); letter-spacing: .06em; } .bloque__imagen { margin: 0; } .bloque__imagen img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.1); } .bloque__imagen figcaption { margin-top: .6rem; font-size: var(--t-sm); color: #ADA79C; font-style: italic; } /* Imagen a un lado y texto al otro. En móvil, la imagen encima. */ .bloque__duo { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--e-5); align-items: center; } .bloque__duo--derecha .bloque__duo-foto { order: 2; } .bloque__duo-foto img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.1); } .bloque__duo-texto { color: #C9C4B8; line-height: 1.75; } .bloque__duo-texto h3 { font-size: 1.6rem; margin: 0 0 .6rem; } .bloque__duo-texto p { margin: 0 0 1em; } .bloque__duo-texto p:last-child { margin-bottom: 0; } .bloque__boton { margin: 0; } /* El vídeo guarda su proporción 16:9 en cualquier ancho. */ .bloque__video { position: relative; padding-top: 56.25%; border-radius: var(--r-md); overflow: hidden; } .bloque__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .bloque__raya { border: 0; border-top: 1px solid rgba(255,255,255,.14); margin: 0; } @media (max-width: 760px) { .bloque__duo { grid-template-columns: 1fr; } .bloque__duo--derecha .bloque__duo-foto { order: 0; } .bloque__titulo { font-size: 1.5rem; } } /* ---------- 10 quater. APUNTARSE A UN ENCUENTRO (25/08/2026) ---------- La página que se reparte por WhatsApp. La mayoría la abrirá en el móvil, así que se piensa primero para pantalla pequeña. */ .ins-etiqueta { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: var(--amarillo); margin: 0 0 .3rem; } .ins-datos { color: #C9C4B8; font-size: var(--t-base); line-height: 1.7; margin: var(--e-3) 0 0; } .ins-direccion { color: #ADA79C; font-size: var(--t-sm); } .ins-aviso { margin: var(--e-4) 0 0; padding: 14px 18px; border-radius: var(--r-sm); border: 1px dashed var(--amarillo); background: var(--amarillo-tenue); color: #D9D4C9; font-size: var(--t-sm); line-height: 1.65; } .ins-form { margin-top: var(--e-5); max-width: 470px; } .ins-campo { display: block; margin-bottom: var(--e-4); } .ins-campo__et { display: block; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--gris); margin-bottom: .35rem; } .ins-obl { color: #8A8578; letter-spacing: .06em; font-weight: 700; text-transform: none; } .ins-campo__ayuda { display: block; font-size: var(--t-sm); color: #8A8578; margin-bottom: .4rem; } .ins-campo input[type="text"], .ins-campo input[type="email"], .ins-campo select { width: 100%; padding: .85em 1em; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.18); background: var(--negro-2); color: var(--hueso); font-family: var(--f-base); font-size: var(--t-base); } .ins-campo input:focus, .ins-campo select:focus { border-color: var(--amarillo); outline: none; } .ins-opciones { display: flex; gap: 18px; padding-top: .2rem; } .ins-opciones label { display: flex; align-items: center; gap: 7px; color: var(--hueso); font-size: var(--t-base); } .ins-error { color: #FF8F7A; font-size: var(--t-sm); min-height: 1.2em; margin: 0 0 .6rem; } .ins-letra-pequena { color: #8A8578; font-size: var(--t-xs); line-height: 1.6; margin-top: var(--e-4); max-width: 470px; } /* ---------- Cuando la inscripción se hace en otra web (16/09/2026) ---------- El cartel es el botón: se pincha entero y lleva fuera. Por eso no lleva lupa —ampliarlo no es lo que quiere quien llega aquí— y por eso crece con el dedo encima, para que se vea que es pinchable. En el móvil ocupa el ancho. */ .fuera-cartel { margin: var(--e-5) 0 0; } .fuera-cartel a { display: inline-block; max-width: 100%; border-radius: var(--r-sm); transition: transform .18s ease; } .fuera-cartel a:hover, .fuera-cartel a:focus-visible { transform: translateY(-2px) scale(1.02); } .fuera-cartel img { display: block; width: 600px; max-width: 100%; height: auto; border-radius: var(--r-sm); } /* ---------- Cuando ya está apuntado ---------- */ .ins-hecho-texto { color: #C9C4B8; font-size: 1.05rem; line-height: 1.7; margin: var(--e-3) 0 0; max-width: 60ch; } .ins-resumen { display: flex; gap: var(--e-4); align-items: center; margin-top: var(--e-5); background: var(--negro-2); border: 1px solid rgba(255,255,255,.1); border-left: 6px solid var(--amarillo); border-radius: var(--r-md); padding: var(--e-4); max-width: 520px; } .ins-resumen__fecha { flex: 0 0 auto; background: var(--amarillo); color: var(--negro); border-radius: var(--r-sm); padding: .7rem 1rem; text-align: center; display: flex; flex-direction: column; line-height: 1.05; } .ins-resumen__fecha span { font-size: .6rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; } .ins-resumen__fecha b { font-family: var(--f-titulo); font-size: 2.1rem; } .ins-resumen__nom { font-weight: 800; color: var(--hueso); } .ins-resumen__datos { color: #ADA79C; font-size: var(--t-sm); margin-top: .2rem; } .ins-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); } /* ---------- ELEGIR CALENDARIO (28/08/2026) ---------- Pedido por José: en vez de entregar un archivo —«un elemento extraño que la gente puede entender mal»—, se le enseñan los calendarios de siempre y cada uno pincha el suyo. Se abre con el botón y se cierra al elegir, al pinchar fuera o con la tecla de escape. El panel vive pegado al botón y en el móvil ocupa todo el ancho, que es donde de verdad se usa: casi todo el mundo llega desde WhatsApp. */ .cal { position: relative; } .cal__flecha { font-size: .8em; transition: transform .14s ease; } .cal__abrir[aria-expanded="true"] .cal__flecha { transform: rotate(180deg); } .cal__lista { position: absolute; z-index: 40; left: 0; top: calc(100% + 8px); min-width: 260px; display: flex; flex-direction: column; padding: 6px; border-radius: var(--r-sm); background: var(--negro-2); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 34px rgba(0,0,0,.5); } .cal__op { display: flex; flex-direction: column; gap: 1px; padding: 11px 14px; border-radius: 8px; color: var(--hueso); text-decoration: none; font-size: var(--t-sm); font-weight: 700; line-height: 1.3; } .cal__op span { font-size: var(--t-xs); font-weight: 400; color: #8A8578; letter-spacing: 0; } .cal__op:hover, .cal__op:focus-visible { background: var(--amarillo); color: var(--negro); } .cal__op:hover span, .cal__op:focus-visible span { color: var(--negro); } @media (max-width: 620px) { /* En el móvil el panel NO va flotando: va en la fila, empujando lo de abajo. Medido el 28/08/2026 en un teléfono de 375: flotando se abría 192 px por debajo de lo que se ve y NO había forma de llegar a él —un panel `absolute` no hace crecer la página, así que no se puede bajar—. En la fila, la página crece y las cinco opciones se ven siempre. */ .cal { width: 100%; } .cal__lista { position: static; min-width: 0; margin-top: 8px; box-shadow: none; } .cal__abrir { width: 100%; justify-content: center; } } /* ---------- El botón de apuntarse, en las tarjetas de la web ---------- */ .convocatoria__apuntarse { margin: .8rem 0 0; } .convocatoria__apuntarse .boton { font-size: .65rem; padding: .6em 1.2em; } .convocatoria__quedan { display: block; margin-top: .4rem; font-size: var(--t-xs); color: #8A8578; } @media (max-width: 620px) { .ins-resumen { flex-direction: column; align-items: flex-start; } .ins-acciones .boton { width: 100%; justify-content: center; } } /* ---------- 10 quinquies. EL ASPECTO DE CADA BLOQUE (26/08/2026) ---------- José: «yo te doy información y tú lo pones como te dé la gana». Con razón. Ahora el tamaño y la posición los elige quien monta la página. Son opciones cerradas a propósito —tres tamaños, tres posiciones— y no números sueltos: así decide él sin que la web pueda quedar descuadrada. */ /* --- Titulares --- */ /* «Como el de una sección»: el mismo tamaño que tenían los títulos escritos a mano antes de ser piezas. Sin esto, «Lo que viene» pasaba de 51 px a 38 al convertirlo en pieza, y la portada cambiaba de aspecto sin que nadie lo hubiera pedido. (01/09/2026) */ /* El título de la caja de una sesión se ve y se mide como cualquier titular: es un titular, sólo que el texto lo pone la fecha. (16/09/2026) */ .bloque--titulo_sesion.bl-tam-xl .bloque__titulo { font-size: var(--t-2xl); } .bloque--titulo_sesion .bloque__titulo { white-space: pre-line; } .bloque--titulo.bl-tam-xl .bloque__titulo { font-size: var(--t-2xl); } .bloque--titulo.bl-tam-g .bloque__titulo { font-size: 2.4rem; } .bloque--titulo.bl-tam-m .bloque__titulo { font-size: 1.7rem; } .bloque--titulo.bl-tam-p .bloque__titulo { font-size: 1.25rem; } .bloque--titulo.bl-pos-c { text-align: center; } .bloque--titulo.bl-pos-c .trazo { margin-inline: auto; } /* --- Textos --- */ .bloque--texto.bl-anc-a .bloque__texto { max-width: none; } .bloque--texto.bl-pos-c .bloque__texto { text-align: center; margin-inline: auto; } /* «Entradilla» (15/09/2026): el texto de entrada que va debajo del título de una página, con la letra, el color y el ancho que tenía cuando iba escrito a mano (`.seccion__intro`). Detrás de un Titular con poco espacio debajo, los 4 px que faltan para los 24 de siempre: así no se mueve nada. */ .bloque--texto.bl-est-entrada .bloque__texto { color: #B4AFA5; max-width: 62ch; font-size: var(--t-lg); line-height: 1.6; } .bloque--texto.bl-est-entrada.bl-anc-a .bloque__texto { max-width: none; } .bloque--titulo.bl-sep-p + .bloque--texto.bl-est-entrada { padding-top: 4px; } /* ⚠ Y EL MARGEN DE DEBAJO QUE SIEMPRE TUVO, medido comparando fotos píxel a píxel: el texto de entrada escrito a mano era un párrafo, y el navegador le ponía 1 em por debajo (unos 19 px). Sin esto, todo lo de debajo subía. */ .bloque--texto.bl-est-entrada .bloque__texto p:last-child { margin-bottom: 1em; } /* --- Imágenes: tres tamaños y tres posiciones --- */ .bloque--imagen.bl-tam-p .bloque__imagen { max-width: 320px; } .bloque--imagen.bl-tam-i .bloque__imagen { max-width: 460px; } /* «Intermedia», 15/09/2026 */ .bloque--imagen.bl-tam-m .bloque__imagen { max-width: 620px; } /* «Usar como botón» (15/09/2026): la imagen ES el botón. Sin el borde fino ni las esquinas de las fotos —en una imagen sin fondo dibujarían un rectángulo—, y se levanta un poco al pasar el ratón, como los botones amarillos. */ .bloque__imagen--boton img { border: 0; border-radius: 0; } .bloque__imagen--boton > a { display: block; transition: transform .14s ease; } .bloque__imagen--boton > a:hover { transform: translateY(-2px); } .bloque--imagen.bl-tam-g .bloque__imagen { max-width: none; } .bloque--imagen.bl-pos-i .bloque__imagen { margin-inline: 0 auto; } .bloque--imagen.bl-pos-c .bloque__imagen { margin-inline: auto; } .bloque--imagen.bl-pos-d .bloque__imagen { margin-inline: auto 0; } .bloque--imagen.bl-pos-c .bloque__imagen figcaption { text-align: center; } .bloque--imagen.bl-pos-d .bloque__imagen figcaption { text-align: right; } /* --- Imagen y texto: cómo se reparten el ancho --- */ .bloque--imagen_texto.bl-prop-3 .bloque__duo { grid-template-columns: minmax(0,3fr) minmax(0,7fr); } .bloque--imagen_texto.bl-prop-7 .bloque__duo { grid-template-columns: minmax(0,7fr) minmax(0,3fr); } .bloque--imagen_texto.bl-prop-3 .bloque__duo--derecha { grid-template-columns: minmax(0,7fr) minmax(0,3fr); } .bloque--imagen_texto.bl-prop-7 .bloque__duo--derecha { grid-template-columns: minmax(0,3fr) minmax(0,7fr); } /* --- Botones --- */ .bloque--boton.bl-pos-c { text-align: center; } .bloque--boton.bl-pos-d { text-align: right; } /* --- Vídeos --- */ .bloque--video.bl-tam-m .bloque__video { max-width: 680px; margin-inline: auto; } .bloque--video.bl-tam-g .bloque__video { max-width: none; } /* --- Redes sociales, como pieza del maquetador (28/08/2026) --- Los iconos toman el color del texto de alrededor, así que la misma pieza vale sobre negro y sobre claro sin hacer dos versiones. */ .bloque__redes { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; } .bloque__redes a { display: inline-flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; padding: .6rem; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.16); transition: color .15s ease, border-color .15s ease, transform .15s ease, background-color .15s ease; } .bloque__redes a:hover, .bloque__redes a:focus-visible { color: var(--negro); background: var(--amarillo); border-color: var(--amarillo); transform: translateY(-2px); } .bloque__redes__apagada { display: inline-flex; align-items: center; justify-content: center; color: #55524C; cursor: default; padding: .6rem; border-radius: var(--r-md); border: 1px dashed rgba(255,255,255,.14); } .bloque--redes.bl-pos-c .bloque__redes { justify-content: center; } .bloque--redes.bl-pos-d .bloque__redes { justify-content: flex-end; } .bloque--redes.bl-pos-c .bloque__titulo, .bloque--redes.bl-pos-c .trazo { text-align: center; margin-inline: auto; } .bloque--redes.bl-pos-d .bloque__titulo { text-align: right; } /* En el móvil no hay sitio para posiciones ni tamaños: todo a lo ancho y una columna. Es lo único sensato en 375 píxeles. */ @media (max-width: 760px) { .bloque--imagen .bloque__imagen { max-width: none !important; margin-inline: 0 !important; } .bloque--imagen_texto .bloque__duo { grid-template-columns: 1fr !important; } .bloque--video .bloque__video { max-width: none !important; } .bloque--titulo.bl-tam-g .bloque__titulo { font-size: 1.7rem; } .bloque--titulo.bl-tam-m .bloque__titulo { font-size: 1.35rem; } } /* ========================================================================== LAS PIEZAS PARA MONTAR CUALQUIER CABECERA (15/09/2026) José: «tenías que dejarme la opción de poder hacer cualquier cosa en la maquetación… una imagen a la izquierda, a la derecha un texto, debajo un logo, dos botones». ========================================================================== */ /* --- El titular --- */ /* Los saltos de línea los pone quien escribe: donde pulse Intro, se parte. Es lo que ya hacía la cabecera de la portada. Un titular sin saltos sale igual. */ .bloque--titulo .bloque__titulo { white-space: pre-line; } /* «Como el de la portada»: el mismo tamaño que la frase de su cabecera. */ .bloque--titulo.bl-tam-portada .bloque__titulo { font-size: clamp(2.2rem, 1.1rem + 3.4vw, 4.2rem); line-height: .92; } /* …y su brochazo, un punto más grande y con la inclinación que eligió José para «IA». Al brochazo se le quita su giro propio o se sumarían los dos. */ .bloque--titulo.bl-tam-portada .brocha { font-size: 1.16em; transform: rotate(-4deg); transform-origin: left center; } .bloque--titulo.bl-tam-portada .brocha::before { transform: none; } .bloque--titulo.bl-pos-d { text-align: right; } .bloque--titulo.bl-pos-d .trazo { margin-left: auto; } /* ⚠ EL BROCHAZO SE PINTA DETRÁS DEL TEXTO (`z-index: -1`), y detrás de una fila con fondo desaparecería: el gris o la foto se pintarían ENCIMA de la mancha amarilla. Un fondo abre su propia capa y la mancha queda dentro. */ .lienzo__fondo--gris, .lienzo__fondo--imagen { isolation: isolate; } /* --- La imagen muy pequeña: un logotipo, un sello --- */ .bloque--imagen.bl-tam-mp .bloque__imagen { max-width: 220px; } /* --- Los botones, uno al lado del otro --- */ .bloque__botones { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; } .bloque--botones.bl-pos-c .bloque__botones { justify-content: center; } .bloque--botones.bl-pos-d .bloque__botones { justify-content: flex-end; } /* La letra pequeña de un botón —«y nos lo cuentas»—, al lado o debajo. */ .bloque__botones .boton small, .bloque__boton .boton small { font-size: .62em; font-weight: 600; letter-spacing: .02em; text-transform: none; margin-left: .35em; } .bl-letra-debajo .boton > span { display: flex; flex-direction: column; align-items: center; gap: .08em; } .bl-letra-debajo .boton small { margin-left: 0; } /* «Grande» es el de la cabecera de la portada; «Muy grande», el de «Escríbenos». */ .bloque--botones.bl-tam-g .boton, .bloque--boton.bl-tam-g .boton { font-size: 1rem; min-height: 4.1rem; padding: .6rem 1.6rem; justify-content: center; text-align: center; } .bloque--botones.bl-tam-xg .boton, .bloque--boton.bl-tam-xg .boton { font-size: 1.6rem; line-height: 1.1; min-height: 4.1rem; padding: .6rem 1.6rem; justify-content: center; text-align: center; } /* --- La nota de la sede: el rótulo y el logotipo, en pequeño --- */ /* Los números son los que eligió José para la cabecera de la portada el 29/08. */ .nota-sede { display: flex; align-items: center; justify-content: flex-end; gap: 16px; } .bloque--nota_sede.bl-pos-i .nota-sede { justify-content: flex-start; } .bloque--nota_sede.bl-pos-c .nota-sede { justify-content: center; } .nota-sede__que { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: #B4AFA5; line-height: 1.35; max-width: 9ch; text-align: right; } .nota-sede__logo { display: block; opacity: .92; transition: opacity .15s ease; } a.nota-sede__logo:hover { opacity: 1; } .nota-sede__logo img { display: block; height: 68px; width: auto; } @media (max-width: 760px) { /* Un logotipo muy pequeño se queda pequeño también en el móvil: a todo el ancho sería un cartel. */ .bloque--imagen.bl-tam-mp .bloque__imagen { max-width: 220px !important; margin-inline: auto !important; } /* Los botones, uno debajo del otro y de lado a lado: así se pulsan con el dedo. */ .bloque__botones { flex-direction: column; align-items: stretch; } .bloque__botones .boton, .bloque--boton.bl-tam-g .boton, .bloque--boton.bl-tam-xg .boton { width: 100%; justify-content: center; text-align: center; } .bloque__botones .boton > span, .bloque__boton .boton > span { display: flex; flex-direction: column; align-items: center; gap: .08em; } .bloque__botones .boton small, .bloque__boton .boton small { margin-left: 0; } .bloque--botones.bl-tam-xg .boton, .bloque--boton.bl-tam-xg .boton { font-size: 1.3rem; } .nota-sede { justify-content: center !important; } .nota-sede__que { text-align: center; } } /* ========================================================================== LOQUILLO EN LA PANTALLA DE «YA ESTÁS» (26/08/2026) José: «a la derecha me gustaría poner nuestro personaje, elegantemente puesto y que haga juego con el conjunto». Tres decisiones, y ninguna es capricho: · El personaje NO empuja al texto: la columna de la izquierda manda y él ocupa lo que sobra. Lo importante sigue siendo lo que hay que leer. · En el móvil se va debajo y más pequeño, porque ahí el ancho es del texto. · Y es decorativo: `aria-hidden`, para que quien navega escuchando la página no oiga «imagen» en mitad de la confirmación. ========================================================================== */ .con-loquillo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); gap: var(--e-5, 34px); align-items: center; } .con-loquillo__texto { min-width: 0; } /* ⚠ El ancho va en el FIGURE, no sólo en la imagen. Con `justify-self:center` el hueco se encoge hasta su contenido, y si la imagen mide «el 100 % del hueco» las dos se persiguen y acaban midiendo cero. */ .loquillo { margin: 0 auto; width: 100%; max-width: 340px; } .loquillo img { display: block; width: 100%; height: auto; /* Se apoya en el fondo con una sombra suave, para que no parezca pegado. */ filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .55)); animation: loquillo-entra .7s cubic-bezier(.2, .8, .3, 1) both; } @keyframes loquillo-entra { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .loquillo img { animation: none; } } @media (max-width: 780px) { .con-loquillo { grid-template-columns: 1fr; gap: var(--e-3, 18px); } .loquillo { max-width: 210px; } } /* ========================================================================== DENTRO DE LA VENTANITA DE LA ZONA DE TRABAJO (26/08/2026) Sólo se aplica cuando la página se está viendo desde MAQUETACIÓN: en la web de verdad nada de esto existe. Sirve para que se vea que una tarjeta se puede pinchar para ir a editarla. ========================================================================== */ .dentro-de-la-ventanita [data-encuentro] { cursor: pointer; position: relative; outline: 2px dashed transparent; outline-offset: 3px; transition: outline-color .12s ease; } .dentro-de-la-ventanita [data-encuentro]:hover { outline-color: var(--amarillo); } .dentro-de-la-ventanita [data-encuentro]:hover::after { content: "Pincha para editarla"; position: absolute; top: 6px; right: 6px; z-index: 5; background: var(--amarillo); color: var(--negro); font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 4px 9px; border-radius: 5px; pointer-events: none; font-family: system-ui, sans-serif; } /* ========================================================================== «DE DÓNDE VENIMOS» — las sesiones celebradas (28/08/2026) Elegido por José mirando dos maquetas, y cada cosa tiene su porqué suyo: · EL CARTEL, SIN OSCURECER. La primera versión llevaba un tono gris y un velo negro que subía hasta arriba. Sus palabras: «las veo oscuras cuando son preciosas». Sólo queda la banda del pie, y no por gusto: sobre un cartel claro, la fecha en blanco no se leería. · MARCO DE 3 PÍXELES. «Que las distinga, que las separe un poquito, que le dé entidad a este bloque.» Sin fondo: eligió el fino y limpio. · EL TÍTULO, GRANDE Y CON AIRE. «Lo veo espeso, se me pegan las letras.» La tipografía es condensada y a tamaño pequeño se cierra; al doble y con las letras separadas, respira. ========================================================================== */ .devenimos { border: 3px solid var(--amarillo); border-radius: var(--r-md, 14px); padding: var(--e-5) var(--e-5) var(--e-6); } .devenimos__titulo { font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.8rem); letter-spacing: .055em; margin: 0; } .devenimos__intro { color: var(--gris); margin: .7rem 0 0; max-width: 60ch; font-size: var(--t-sm); } .devenimos__rejilla { display: grid; grid-template-columns: repeat(var(--columnas, 6), minmax(0, 1fr)); gap: var(--e-3); margin-top: var(--e-4); } .dv { aspect-ratio: 1; position: relative; display: block; overflow: hidden; border-radius: var(--r-md, 14px); text-decoration: none; color: var(--hueso); border: 1px solid rgba(255,255,255,.14); transition: transform .15s ease, border-color .15s ease; } .dv:hover, .dv:focus-visible { transform: translateY(-3px); border-color: var(--amarillo); } /* Sin filtros y sin velo: la imagen tal y como la hicieron. */ .dv__foto { position: absolute; inset: 0; background-image: var(--cartel); background-size: cover; background-position: center; background-color: var(--negro-2); } .dv[data-sin-cartel] .dv__foto { background: var(--negro-2); } .dv__num { position: absolute; top: 6px; right: 9px; font-family: var(--f-titulo); font-size: .95rem; color: var(--amarillo); text-shadow: 0 1px 5px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.85); } .dv__pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 6px 10px; text-align: center; background: rgba(12,12,13,.9); } .dv__fecha { display: block; font-family: var(--f-titulo); font-size: 1.5rem; line-height: 1; text-transform: uppercase; letter-spacing: .02em; } .dv__fecha em { font-style: normal; font-size: .85rem; opacity: .7; } /* En pantallas estrechas no caben seis. Se bajan a tres y a dos antes que dejar unas tarjetas del tamaño de un sello. */ @media (max-width: 900px) { .devenimos__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .devenimos { padding: var(--e-4) var(--e-3) var(--e-5); } .devenimos__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== SLIDER FOTOS — EL PASE DE FOTOS (28/08/2026) Lo dictó José entero: tres, cuatro o cinco a la vista; arranca solo y además con flechas; ritmo lento o normal; APAISADAS y SIN PIE DE FOTO. La proporción 3:2 la decidió Claude entre las apaisadas corrientes: es la que menos recorta. Con 16:9 las fotos quedarían en una tira estrecha y con 4:3 casi cuadradas, que no es lo que él llamó «apaisada». ⚠ Y EL AIRE. Norma de la casa desde el 28/08: nada pegado al borde. Las flechas van FUERA de las fotos, no encima, para no tapar ninguna. ========================================================================== */ .pase { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e-2); } .pase__marco { overflow: hidden; } .pase__pista { display: flex; transition: transform .6s cubic-bezier(.4, 0, .2, 1); will-change: transform; } .pase__foto { flex: 0 0 calc(100% / var(--visibles, 4)); margin: 0; padding: 0 calc(var(--e-1) / 2); box-sizing: border-box; } .pase__foto img { display: block; width: 100%; aspect-ratio: 3 / 2; /* APAISADA, que es lo que él pidió */ object-fit: cover; border-radius: var(--r-md, 14px); border: 1px solid rgba(255, 255, 255, .14); background: var(--negro-2); } /* Las flechas. Van a los lados y no encima de las fotos: encima taparían justo la primera y la última, que es la mitad de lo que se está enseñando. */ .pase__flecha { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--amarillo); background: transparent; color: var(--amarillo); font-size: 1.7rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s ease, color .15s ease, transform .15s ease; } .pase__flecha:hover, .pase__flecha:focus-visible { background: var(--amarillo); color: var(--negro); transform: scale(1.06); } /* En pantallas pequeñas se ven menos fotos, o no se ven: cinco fotos en un teléfono no se ven, se adivinan. El motor lee esta misma variable, así que el paso del pase se ajusta solo. */ @media (max-width: 900px) { .pase { --visibles: 2 !important; } } @media (max-width: 560px) { .pase { --visibles: 1 !important; gap: var(--e-1); } /* ⚠ Y LAS FLECHAS SE VAN DEBAJO, NO A LOS LADOS. (08/09/2026) A los lados se comían 88 de los 327 px que hay en un teléfono: la foto se quedaba en 239 y salía más pequeña que en la propia página. Aquí no valen las razones que tienen en un ordenador —donde van al lado para no tapar la primera y la última foto—, porque en el móvil sólo se ve UNA foto. Debajo y centradas, la foto ocupa el ancho entero y los dos botones caen donde llega el pulgar. Es lo mismo que él pidió para los banners: «en el móvil se ha de plantear el espacio de forma vertical». */ .pase { grid-template-columns: 1fr 1fr; grid-template-areas: 'marco marco' 'antes despues'; row-gap: var(--e-3); column-gap: var(--e-3); } .pase__marco { grid-area: marco; } .pase__flecha--izq { grid-area: antes; justify-self: end; } .pase__flecha--der { grid-area: despues; justify-self: start; } .pase__flecha { width: 44px; height: 44px; font-size: 1.5rem; } } /* Quien haya pedido en su ordenador que las cosas no se muevan solas, no ve el salto: el pase se queda quieto y se mueve sólo con las flechas. */ @media (prefers-reduced-motion: reduce) { .pase__pista { transition: none; } } /* ========================================================================== LAS PÁGINAS LEGALES (29/08/2026) Aviso legal, privacidad y cookies. Se leen, no se navegan: columna estrecha, interlínea generosa y los apartados bien separados. Y sin ningún fondo de color, que José imprime. ========================================================================== */ .legal { max-width: 74ch; } .volver-atras { display: inline-block; margin-bottom: var(--e-4); font-size: var(--t-sm); text-decoration: none; color: var(--gris); } .volver-atras:hover { color: var(--amarillo); } .legal__titulo { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); } .legal__fecha { color: var(--gris); font-size: var(--t-sm); margin: var(--e-2) 0 var(--e-5); } /* Lo que hay que leer sí o sí, dentro de un marco amarillo. Marco, no fondo. */ .legal__aviso { border: 2px solid var(--amarillo); border-radius: var(--r-md); padding: var(--e-4); margin-bottom: var(--e-5); } .legal__aviso p { margin: 0; } .legal h2 { font-size: 1.25rem; margin: var(--e-5) 0 var(--e-2); padding-top: var(--e-4); border-top: 1px solid rgba(255,255,255,.09); color: var(--hueso); } .legal h2:first-of-type { border-top: 0; padding-top: 0; } .legal p, .legal li { color: #C9C4B8; line-height: 1.75; } .legal ul { padding-left: 1.2em; margin: var(--e-2) 0; } .legal li { margin-bottom: .45em; } .legal a { color: var(--amarillo); } .legal b { color: var(--hueso); } /* ========================================================================== «A DÓNDE VAMOS» — LA SEDE OFICIAL (29/08/2026) Mismo marco amarillo y mismo título grande que «De dónde venimos» y «Reserva la fecha»: él lo pidió «en la línea de lo que tenemos en la portada». ⚠ EL REPARTO ES 40 / 60, Y ES AL REVÉS DE LO PRIMERO QUE SE LE ENSEÑÓ. Con 60 para el texto quedaba un vacío enorme en medio —lo vio él: «hay en el centro un porcentaje de espacio vacío que no me gusta»—, porque el texto es corto y no llena una columna ancha. Con 40/60 el hueco que sobra tras la línea más larga pasó de mucho a 35 px, y el mapa creció de 404 a 606. ========================================================================== */ .adonde { border: 3px solid var(--amarillo); border-radius: var(--r-md); /* Abajo, lo justo tras el botón: él lo pidió en «veinte, treinta píxeles», y sobraban 179. */ padding: var(--e-5) var(--e-5) 26px; } .adonde__titulo { font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.8rem); letter-spacing: .055em; margin: 0 0 var(--e-4); } /* ⚠ AQUÍ MANDA EL TEXTO, NO EL MAPA — y es lo que baja el bloque a la mitad. Medido antes: el mapa ocupaba 494 px, el texto 238, y el bloque entero 662. El mapa llevaba una proporción fija y se inflaba solo con el ancho que le tocara. Ahora se ESTIRA a la altura de la columna de al lado, con align-items:stretch, y son la frase, la dirección y el botón los que deciden cuánto mide todo. Es la misma idea que el imagotipo de la cabecera. */ .adonde__rejilla { display: grid; grid-template-columns: 40fr 60fr; gap: var(--e-5); align-items: stretch; margin-top: 0; } .adonde__rejilla--sinmapa { grid-template-columns: minmax(0, 1fr); } .adonde__texto { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } .adonde__intro { color: #C9C4B8; margin: 0 0 .9rem; } /* El nombre de la sede, con su logotipo A LA DERECHA — el orden lo eligió él: «quiero que pongas The Terminal Hub València primero, y al lado el logotipo». En blanco y sin pastilla. */ .sede { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; } .sede__nombre { font-family: var(--f-titulo); font-size: 2.2rem; line-height: 1; text-transform: uppercase; margin: 0 0 .18rem; } .sede__nombre a { color: var(--amarillo); text-decoration: none; border-bottom: 3px solid transparent; transition: border-color .15s ease; } .sede__nombre a:hover, .sede__nombre a:focus-visible { border-bottom-color: var(--amarillo); } .sede__ciudad { color: var(--gris); font-size: .95rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; } .sede__logo { flex: 0 0 auto; display: block; opacity: .92; transition: opacity .15s ease; } .sede__logo:hover { opacity: 1; } .sede__logo img { display: block; height: 56px; width: auto; } .adonde__dir { color: #C9C4B8; margin: var(--e-3) 0 0; line-height: 1.5; } .adonde__ir { margin-top: var(--e-4); display: inline-flex; align-items: center; gap: .5em; padding: .7em 1.3em; border: 2px solid var(--amarillo); border-radius: var(--r-sm); color: var(--amarillo); text-decoration: none; font-size: var(--t-xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; transition: background .15s ease, color .15s ease; } .adonde__ir:hover { background: var(--amarillo); color: var(--negro); } .adonde__mapa { border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: var(--negro-2); /* Sin proporción fija: coge el alto de la fila. El mínimo es para que en un texto muy corto no quede una rendija donde no se vea nada. */ height: 100%; min-height: 280px; } /* Un punto de gris para que el mapa no compita con el amarillo de la marca. */ .adonde__mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.25); } @media (max-width: 820px) { .adonde__rejilla { grid-template-columns: minmax(0, 1fr); } .adonde { padding: var(--e-4) var(--e-3) var(--e-5); } } /* ========================================================================== LOS RÓTULOS PEQUEÑOS, QUE SE PEGABAN Y NO SE LEÍAN (29/08/2026) Lo cazó José en las tarjetas de Contacto: «el texto de los títulos en mayúscula está tan junto que no se lee, y menos en un móvil». Y tenía razón, pero el problema no era de esa página: es de la TIPOGRAFÍA. La de los rótulos —Haettenschweiler y sus sustitutas— es muy condensada, y está pensada para titulares grandes. A 3 rem se lee de maravilla; a 1,2 rem y en mayúsculas, las letras se tocan. ⚠ POR ESO SE ARREGLA EN TODOS LOS DE SU TIPO A LA VEZ, y no sólo donde él lo vio: es norma de la casa, y si no, mañana aparece el mismo problema en otra página y parece nuevo. La regla: cuanto más pequeño es el rótulo, más aire entre letras. Los titulares grandes no se tocan — ahí separar las letras sólo estropearía el cartel. */ .contacto__via h3, .tarjeta h3, .encuentro__nombre, .cartel__titulo, .proximo__titulo, .marca__texto { letter-spacing: .045em; } /* Y el de Contacto, además, un punto más grande: es el titular de su tarjeta y competía en tamaño con el texto de debajo. */ .contacto__via h3 { font-size: 1.35rem; } /* ========================================================================== EL RECUADRO CON MARCO — una pieza más del maquetador (29/08/2026) Un titular y un texto dentro del marco amarillo, hermanos de «Reserva la fecha», «De dónde venimos» y «A dónde vamos», para que la portada se lea como una sola cosa y no como cuatro inventos distintos. ========================================================================== */ .recuadro { border: 3px solid var(--amarillo); border-radius: var(--r-md); padding: var(--e-5) var(--e-5) var(--e-6); } /* ⚠ EL TITULAR, LA MITAD QUE EN LOS DEMÁS BLOQUES. Lo pidió José el 29/08: «el título, la mitad, no es demasiado grande». Y tiene su razón de ser: aquí el titular no anuncia una sección, presenta un texto que hay que leer, y a tamaño de cartel se comía el párrafo que va debajo. */ .recuadro__titulo { font-size: clamp(1.2rem, .9rem + 1.3vw, 1.9rem); letter-spacing: .055em; margin: 0; } /* CON IMAGEN, DOS COLUMNAS: 40 la imagen y 60 el texto. Es el reparto que pidió. Sin imagen, el cuerpo ocupa el ancho entero y esta regla no aplica. */ .recuadro--con-imagen { display: grid; grid-template-columns: 40fr 60fr; gap: var(--e-5); align-items: center; } .recuadro__imagen { margin: 0; } .recuadro__imagen img { display: block; width: 100%; height: auto; } .recuadro__texto { color: #C9C4B8; line-height: 1.75; margin-top: var(--e-4); max-width: 68ch; /* una línea muy larga no se lee: se pierde el renglón */ } .recuadro__texto p { margin: 0 0 1em; } .recuadro__texto p:last-child { margin-bottom: 0; } .recuadro__boton { margin: var(--e-4) 0 0; } /* En pantalla estrecha, la imagen arriba y el texto debajo: dos columnas en /* La intro de «Nosotros» lleva un texto largo, de varios párrafos, escrito desde MAQUETACIÓN. Los saltos que ponga quien lo escriba se respetan: es su texto y sus párrafos, no los que decida el ancho de la caja. */ .seccion__intro--largo { white-space: pre-line; max-width: 68ch; } /* ========================================================================== LA PRESENTACIÓN DE CONTACTO, CON SU PERSONAJE (29/08/2026) El texto a la izquierda y el Loquillo a la derecha, sin caja ni marco: es una presentación, no un bloque más. El dibujo acompaña, no manda — por eso se queda pequeño y cede el sitio al texto en cuanto la pantalla estrecha. ========================================================================== */ .presenta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-5); align-items: center; margin: var(--e-4) 0 var(--e-6); max-width: 62rem; } .presenta__texto { color: #C9C4B8; line-height: 1.75; font-size: var(--t-lg); /* Los párrafos los pone quien escribe el texto, no el ancho de la caja. */ white-space: pre-line; max-width: 62ch; } .presenta__loco { margin: 0; } .presenta__loco img { display: block; width: clamp(130px, 16vw, 200px); height: auto; } /* En el móvil, el dibujo debajo y centrado: en 375 px de ancho no hay dos columnas que valgan, y el texto es lo que se viene a leer. */ @media (max-width: 700px) { .presenta { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .presenta__loco img { width: clamp(120px, 40vw, 180px); } } /* En pantalla estrecha, la imagen arriba y el texto debajo: dos columnas de 40/60 en un móvil dejan el texto en una tira de cuatro palabras. */ @media (max-width: 760px) { .recuadro--con-imagen { grid-template-columns: minmax(0, 1fr); } .recuadro__imagen { max-width: 260px; margin-inline: auto; } } @media (max-width: 560px) { .recuadro { padding: var(--e-4) var(--e-3) var(--e-5); } } /* Cuando el enlace no se puede incrustar —no es de YouTube, o viene raro— no se pinta un marco roto: se ofrece abrirlo aparte. Un vídeo que no se puede meter dentro sigue siendo un vídeo, y esconderlo sería peor. (31/08/2026) */ .video-fuera { margin: var(--e-3) 0 0; } /* ========================================================================== «LO ÚLTIMO EN VÍDEO» — los vídeos de la portada (31/08/2026) José: «debajo del slider de fotografía, un espacio destacado, en dos columnas, con un vídeo en cada una». Va con el mismo marco amarillo que «Reserva la fecha», «De dónde venimos», «A dónde vamos» y el recuadro: la portada se lee como una sola cosa y no como cinco inventos distintos. Eso es lo que le da el «destacado» que pedía, sin sacarse un color nuevo de la manga. ========================================================================== */ .losvideos { border: 3px solid var(--amarillo); border-radius: var(--r-md); padding: var(--e-5) var(--e-5) var(--e-6); } .losvideos__titulo { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.2rem); letter-spacing: .055em; margin: 0; } .losvideos__intro { color: var(--gris); margin: .7rem 0 0; max-width: 60ch; font-size: var(--t-sm); } .losvideos__rejilla { display: grid; grid-template-columns: repeat(var(--columnas, 2), minmax(0, 1fr)); gap: var(--e-4); margin-top: var(--e-4); } .lv { margin: 0; min-width: 0; } .lv__nom { font-family: var(--f-titulo); text-transform: uppercase; font-size: 1.15rem; letter-spacing: .03em; line-height: 1.1; margin: var(--e-2) 0 0; } .lv__pie { font-size: var(--t-xs); color: var(--gris); margin: .3rem 0 0; } .lv__pie a { color: var(--amarillo); } /* En el móvil, uno debajo de otro: dos vídeos a media pantalla no se ven. */ @media (max-width: 720px) { .losvideos { padding: var(--e-4) var(--e-3) var(--e-5); } .losvideos__rejilla { grid-template-columns: 1fr; } } /* ========================================================================== LAS ZONAS SON REJILLAS DE DOCE COLUMNAS (31/08/2026) José, y lo pidió dos veces: «necesito un sistema que nos permita colocar, generar unos bloques y colocarlos como nos conviene mejor… el cartel a la izquierda y el texto a la derecha, o tres columnas: el cartel, el programa y el botón». Hasta hoy cada pieza ocupaba todo el ancho y se apilaban, y no había forma de poner nada al lado de nada. Doce columnas y no cinco ni diez porque doce se parte en mitades, en tercios y en cuartos sin decimales. Y las opciones que se le ofrecen son cerradas —todo, la mitad, un tercio, dos tercios— para que componga sin que la página pueda quedar descuadrada. Es la misma regla que ya se usó con los tamaños y las posiciones el 26/08. ========================================================================== */ /* --------------------------------------------------------------------------- EL LIENZO: FILAS Y COLUMNAS (01/09/2026) Sustituye a la rejilla de doce columnas por pieza del 31/08. Aquella dejaba poner una pieza «a la mitad», pero quién le tocaba al lado dependía de lo que hubiera antes y después: componer era adivinar. Ahora la fila es una cosa con nombre —dos columnas, 60/40— y cada columna lleva lo que se le ponga. El reparto lo escribe la página en `grid-template-columns` («8fr 4fr»), no una clase por cada combinación: así añadir un reparto nuevo no toca el CSS. --------------------------------------------------------------------------- */ .lienzo__fila { display: grid; gap: 0 var(--e-5); align-items: start; } .lienzo__col { min-width: 0; } /* sin esto, una imagen ancha revienta su columna */ /* ⚠ UNA SOLA MEDIDA ENTRE BLOQUES. (16/09/2026) Dictado por José mirando el Programa: «la distancia que hay entre el texto y la línea del recuadro es gigantesca… te lo he pedido veinte veces de veinte maneras diferentes… que no vuelva a ocurrir». Medido ese día: entre el texto de entrada y la primera caja había **111 px**, y entre una caja y el título siguiente **64**. Los 111 no los ponía nadie a propósito: eran la SUMA de tres cosas —el aire de la pieza (60), el margen del marco (32) y el margen del párrafo (19)—. Así que el aire entre bloques lo pone AHORA UNA SOLA COSA, la fila, y nadie más: 64 px, la medida que él dio por buena. Y se llama `--entre-bloques`, para cambiarla en un sitio y que cambie en toda la web. */ .lienzo > * + * { margin-top: var(--entre-bloques); } .lienzo__col > .bloque:last-child { padding-bottom: 0; } .lienzo__col > .bloque:last-child > .bloque__texto > :last-child { margin-bottom: 0; } /* Pero «Espacio debajo» sigue mandando: si la última pieza de la fila pide poco aire —o ninguno—, la fila de abajo lo respeta. Es el mando que él pidió el 15/09 y no se le quita; lo que se quita es que se SUME al de la fila. */ .lienzo__fila:has(> .lienzo__col > .bloque.bl-sep-p:last-child) + * { margin-top: 20px; } .lienzo__fila:has(> .lienzo__col > .bloque.bl-sep-0:last-child) + * { margin-top: 0; } /* ⚠ EN PANTALLA ESTRECHA NO HAY COLUMNAS QUE VALGAN. Media fila en un móvil de 375 son 170 píxeles: ni un cartel ni un texto caben ahí. Todo pasa a ocupar el ancho entero y se apila, que es como se lee en un teléfono. Y va con `!important` a propósito: el reparto lo escribe la propia página en el atributo `style`, y sin esto ganaría él. */ @media (max-width: 780px) { .lienzo__fila { grid-template-columns: minmax(0, 1fr) !important; } } /* «QUE CUADREN» (16/09/2026): las piezas de la fila, a la misma altura y con el ancho que pide su forma. El reparto lo escribe `ajustarLasFilasQueCuadran()` cuando ya se pueden medir las imágenes; esto es lo que hace que lo que no es una imagen —la tarjeta de apuntarse— se estire hasta abajo. */ .lienzo__fila--cuadran { align-items: stretch; } .lienzo__fila--cuadran > .lienzo__col { display: flex; flex-direction: column; } .lienzo__fila--cuadran > .lienzo__col > .bloque { flex: 1 1 auto; display: flex; flex-direction: column; } .lienzo__fila--cuadran > .lienzo__col > .bloque > * { flex: 1 1 auto; } .lienzo__fila--cuadran .bloque__imagen { margin: 0; } .lienzo__fila--cuadran .bloque__imagen img { width: 100%; height: auto; } .lienzo__fila--cuadran .convocatorias, .lienzo__fila--cuadran .convocatoria { height: 100%; } .lienzo__fila--cuadran .convocatoria__cuerpo { justify-content: center; } @media (max-width: 780px) { /* En el móvil se apilan, como todas, y nadie se estira de más. */ .lienzo__fila--cuadran > .lienzo__col, .lienzo__fila--cuadran > .lienzo__col > .bloque { display: block; } .lienzo__fila--cuadran .convocatorias, .lienzo__fila--cuadran .convocatoria { height: auto; } } /* «EN EL MÓVIL: CENTRADO» (15/09/2026). Salió al montar con piezas la cabecera de la portada y mirarla a 375 px: la de verdad lo centra todo al apilarse, y la de piezas dejaba el titular a la izquierda. Sólo actúa donde las columnas ya se han puesto una debajo de otra; en el ordenador no cambia nada. */ @media (max-width: 780px) { .lienzo__fila--movil-centro .bloque, .lienzo__fila--movil-centro .bloque--titulo.bl-pos-d { text-align: center; } .lienzo__fila--movil-centro .trazo { margin-inline: auto; } .lienzo__fila--movil-centro .bloque__imagen { margin-inline: auto !important; } .lienzo__fila--movil-centro .bloque__texto, .lienzo__fila--movil-centro .bloque__antetitulo, .lienzo__fila--movil-centro .bloque__subtitulo { margin-inline: auto; } .lienzo__fila--movil-centro .bloque__botones, .lienzo__fila--movil-centro .nota-sede { justify-content: center; } .lienzo__fila--movil-centro .nota-sede__que { text-align: center; } } /* ========================================================================== LOS PROTAGONISTAS (31/08/2026) «Una cuadrícula con cuatro imágenes por línea, y debajo de cada una su nombre.» Cuatro en el ordenador, dos en la tableta y una en el móvil: la medida mínima de cada casilla lo resuelve sola, sin escribir ni un punto de corte. --------------------------------------------------------------------------- EL ENCUADRE SON TRES NÚMEROS, Y LOS PONE EL NAVEGADOR La foto original no se toca ni se copia. Se guardan tres números y aquí se aplican: · a qué punto se mira -> object-position: X% Y% · cuánto se acerca -> transform: scale(Z) Y el acercamiento tira DEL MISMO PUNTO que se está mirando (`transform-origin`), o al acercarse se escaparía la cara por un lado. ⚠ LA IMAGEN VA COLOCADA ENCIMA, NO METIDA DENTRO. Con `position:absolute; inset:0` el recuadro manda siempre y la casilla guarda su proporción 2:3 pase lo que pase. Metida dentro con `display` normal, una foto muy alta EMPUJA la caja y cada tarjeta acaba con una altura — es exactamente lo que estropeó la pantalla de grafismo el 28/08, y está apuntado como trampa «o» en el CLAUDE.md. No se repite. ========================================================================== */ .protas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e-4); margin-top: var(--e-6); } .prota { margin: 0; } .prota__foto { position: relative; aspect-ratio: 2 / 3; /* retrato: más alto que ancho */ overflow: hidden; border-radius: var(--r-md); background: var(--negro-3); border: 3px solid transparent; transition: border-color .2s, transform .2s; } .prota__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; /* de reserva: la cara suele estar arriba */ display: block; } .prota:hover .prota__foto { border-color: var(--amarillo); transform: translateY(-3px); } .prota__nombre { margin-top: var(--e-2); font-family: var(--f-titulo); font-size: var(--t-lg); letter-spacing: .02em; text-transform: uppercase; line-height: 1.05; } .seccion--clara .prota__foto { background: var(--hueso-2); } /* ========================================================================== EL PASE DE PROTAGONISTAS (01/09/2026) Pedido por José: «un slider de cuatro personas, respetando el formato que tienes en la página de origen, que es la página de protagonistas… en vez de ser de tres imágenes en horizontal, serán cuatro en el formato que tenemos de origen». O sea: el MISMO motor que el pase de fotos —las mismas flechas, el mismo ritmo, la misma defensa contra las pulsaciones seguidas que costó cazar el 28/08— pero con las caras DE PIE, 2:3, y su nombre debajo. Lo único que cambia es el aspecto, y por eso aquí sólo hay aspecto. ========================================================================== */ /* ⚠ EL MARCO MANDA SOBRE LA CARA, NO AL REVÉS. Medido el 01/09/2026: Sébastien está encuadrado al 140 %, y con la imagen suelta pasaba de 230x344 a 321x482 y empujaba a las de al lado. Colocada encima del marco, el hueco es siempre el mismo y el acercamiento recorta en vez de crecer. Es la trampa «o» del CLAUDE.md, la del grafismo. */ .pase__cara-marco { position: relative; aspect-ratio: 2 / 3; /* de pie, como en su página */ overflow: hidden; border-radius: var(--r-md, 14px); border: 1px solid rgba(255, 255, 255, .14); background: var(--negro-2); } .pase--caras .pase__foto img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; /* la proporción la pone el marco */ object-fit: cover; border: none; border-radius: 0; } .pase__cara-nombre { margin-top: var(--e-2); font-family: var(--f-titulo); font-size: var(--t-base); letter-spacing: .02em; text-transform: uppercase; line-height: 1.05; text-align: center; } /* Dentro del marco amarillo el pase respira: sin esto las caras se pegan al borde, y es la norma de la casa desde el 28/08 —nada pegado al borde—. */ .recuadro .pase { margin-top: var(--e-4); } /* ========================================================================== EL CONTENEDOR DE CADA SESIÓN, Y LAS LÍNEAS QUE SEPARAN (02/09/2026) José, mirando la página del Programa: «quiero que cada sesión tenga su propio espacio, su marco de color amarillo, y que dentro recojamos toda la información que queramos meter de esa sesión. Es como un gran contenedor, remarcado con un borde amarillo, como el de la home». El marco es EL MISMO que el de «Reserva la fecha» —mismo borde, mismo radio, mismo aire—: no se inventa uno nuevo, porque dos marcos parecidos pero distintos en la misma página se notan y quedan mal. ========================================================================== */ /* ⚠ EL AIRE DE DENTRO, IGUAL POR LOS CUATRO LADOS. (16/09/2026) Tenía 32 arriba y a los lados y 48 abajo, y José lo vio: «la separación entre unas imágenes y otra debe ser la misma que hay entre las imágenes y el límite superior… tiene que ser todo proporcionado». Una sola medida, `--aire-caja`, y la misma entre las filas de dentro. El margen de fuera lo pone el lienzo. */ .lienzo__marco { border: 3px solid var(--amarillo); border-radius: var(--r-md); padding: var(--aire-caja); } @media (max-width: 700px) { .lienzo__marco { padding: var(--e-4); } } /* ⚠ UN CONTENEDOR PUEDE LLEVAR VARIAS FILAS DENTRO. (08/09/2026) Los dos carteles arriba, mitad y mitad, y la pastilla debajo a todo el ancho —así lo pidió José—. Entre fila y fila, aire; contra el borde del marco, no, que de eso ya se encarga el `padding` de arriba. */ .lienzo__marco > .lienzo__fila + .lienzo__fila { margin-top: var(--aire-caja); } .lienzo__marco > .lienzo__fila { gap: 0 var(--aire-caja); } /* El banner entero lleva a su sesión. No es un `` —dentro hay otro enlace, el de apuntarse— así que hay que decirle a mano que se puede pulsar. */ .lienzo__marco--sesion { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } .lienzo__marco--sesion:hover { border-color: var(--amarillo-claro, #ffd45e); box-shadow: var(--sombra); } .lienzo__marco--sesion:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 4px; } /* Lo de dentro que sí tiene su propio clic vuelve a la flecha normal, para que se note que ahí pasa otra cosa. */ .lienzo__marco--sesion a, .lienzo__marco--sesion button { cursor: pointer; } /* ========================================================================== LAS FILAS: CON FONDO, SIN MARCO O LAS DOS COSAS (15/09/2026) Para poder montar cualquier cabecera desde MAQUETACIÓN. José: «tenías que dejarme la opción de poder hacer cualquier cosa en la maquetación». · Sin marco y con fondo, la caja es LA MISMA con el borde transparente: un recuadro gris y uno con marco miden lo mismo por dentro, y ponerle o quitarle el marco no mueve nada de sitio. · La foto de fondo va oscurecida, y no por gusto: encima van textos claros y botones amarillos, y sobre una foto sin velo no se leerían. · Sin fondo amarillo: por lo mismo, al revés. ========================================================================== */ .lienzo__marco--sin-borde, .lienzo__marco--sin-borde.lienzo__marco--sesion:hover { border-color: transparent; } .lienzo__fondo--gris { background-color: var(--negro-3); } .lienzo__fondo--imagen { background-color: var(--negro-2); background-image: linear-gradient(rgba(12, 12, 13, .74), rgba(12, 12, 13, .74)), var(--fondo-imagen, none); background-size: cover; background-position: center; } /* ========================================================================== LAS IMÁGENES QUE LLEVAN A ALGÚN SITIO (14/09/2026) Desde que cualquier imagen del maquetador puede llevar enlace, entre la caja y la imagen hay un . Un es una caja EN LÍNEA, y las imágenes de aquí se miden por el ancho y el alto de su caja: sin esto, se quedarían torcidas o —la del imagotipo, que ya se quedó una vez a cero— sin tamaño. ========================================================================== */ .cartel-caja > a, .pbanner__loquillo > a { display: block; } .portada__cab .portada__logo > a { display: block; width: 100%; height: 100%; } .comunidad__qr > a { display: block; width: 100%; max-width: 260px; } /* La lupa del cartel dentro de un banner: el clic es del banner, así que ampliar tiene que tener su propio botón. Mismo remedio que en «Sesiones». */ .bloque__imagen--conlupa { position: relative; } .bloque__imagen--conlupa:hover .bloque__lupa, .bloque__lupa:focus-visible { opacity: 1; } @media (hover: none) { .bloque__lupa { opacity: .92; } } /* La línea que separa un bloque de otro. «Una línea elegante, una línea fina de color amarillo», dijo él — con su rótulo encima de la raya, no dentro de una banda: aquí no hay bandas rellenas. */ .lienzo__linea { display: flex; align-items: center; gap: var(--e-3); margin: var(--e-7) 0 var(--e-4); } .lienzo__linea span { font-family: var(--f-titulo); font-size: var(--t-lg); letter-spacing: .1em; text-transform: uppercase; color: var(--amarillo); white-space: nowrap; } /* La raya sale del rótulo y llega hasta el final: así se ve que separa, sin necesidad de una caja. */ .lienzo__linea::after { content: ""; flex: 1 1 auto; height: 2px; background: var(--amarillo); opacity: .45; } /* El vídeo que encabeza la ficha de una sesión. (08/09/2026) Va entre la línea de la cabecera y «Quién intervino», y sólo aparece si hay un vídeo marcado como horizontal — de ahí que aquí no haga falta ninguna regla para cuando no lo hay: sencillamente no se pinta. */ .ficha__video { margin: var(--e-6) 0 var(--e-5); } /* El botón de apuntarse en la ficha de una sesión que aún no se ha celebrado. Quien llega ahí desde el banner del Programa venía justo a esto. (08/09/2026) */ .ficha__apuntarse { margin: var(--e-5) 0 0; } /* Los vídeos que NO encabezan la ficha, en el bloque del final. (08/09/2026) El de pie va estrecho y en 9:16: dentro del marco apaisado de los demás se quedaba en una columnita entre dos franjas negras. */ .ficha__masvideos { display: flex; flex-wrap: wrap; gap: var(--e-5); align-items: flex-start; } .ficha__masvideos .ficha__video { margin: 0; flex: 1 1 320px; } .ficha__video--depie { max-width: 340px; flex-grow: 0; } .ficha__video--depie .video { aspect-ratio: 9/16; } /* ========================================================================== EL TEXTO CON FORMATO, YA EN LA WEB (09/09/2026) Los cuatro escalones de tamaño y los cuatro colores que ofrece el editor. ⚠ Son una lista cerrada a propósito: si se dejara elegir cualquier color, un día habría un párrafo verde chillón en la portada y quien lo puso tendría razón en que se lo dejamos hacer. Para cambiar la escala se tocan estos números y cambia en toda la web de golpe. Los nombres de clase son los mismos que en la pantalla de maquetación, así que lo que se ve al escribir es lo que sale publicado. */ .txt-p { font-size: .85em; } .txt-g { font-size: 1.3em; } .txt-xg { font-size: 1.7em; line-height: 1.15; } .txt-amarillo { color: var(--amarillo); } .txt-blanco { color: var(--blanco); } .txt-gris { color: var(--gris); } /* Lo que se escribe dentro de un texto: listas, enlaces y el resto. Hasta hoy un bloque de texto sólo podía tener párrafos, así que nada de esto tenía estilo y salía con el del navegador. */ .bloque__texto ul, .bloque__texto ol { margin: 0 0 1em; padding-left: 1.5em; } .bloque__texto li { margin: 0 0 .35em; } .bloque__texto a { color: var(--amarillo); text-decoration: underline; text-underline-offset: 2px; } .bloque__texto a:hover { color: var(--amarillo-claro); } .bloque__texto u { text-underline-offset: 2px; } .bloque__texto strong { color: var(--hueso); font-weight: 800; } .bloque__texto blockquote { margin: 0 0 1em; padding-left: var(--e-4); border-left: 3px solid var(--amarillo); }