/* --------------------------------------------------------------------------- Héroe de la portada. --------------------------------------------------------------------------- Es lo único que se conservó del «rediseño 2026», que vivía solo en la copia local y nunca se desplegó. El rediseño entero está archivado en backups/redisenno-2026/ por si algún día se retoma. Autosuficiente a propósito: - No depende de rediseno-2026.css ni de la clase `fdm26` del . Las variables que necesita se definen aquí abajo, en el propio bloque. - No depende de \utils\Icono: los iconos son de Font Awesome, que la plantilla pública ya carga. - La tipografía Rajdhani la importa publico.css desde hace años. Para quitar el héroe: borrar la línea que carga esta hoja en fw/plantilla/plantillaPublico.php y el bloque
de fw/web/publico/index.php. Las imágenes que usa (img/hero/portada.jpg y img/hero/cartel.jpg) están en local pero NO en producción: si algún día sube, hay que subirlas con él. --------------------------------------------------------------------------- */ .fdm-hero { --fdm-display: 'Rajdhani', 'Segoe UI', system-ui, sans-serif; --fdm-crema: #FFF8EC; --fdm-oro: #BFA760; --fdm-oro-claro: #E3D3A2; --fdm-oro-filete: rgba(255, 231, 175, .34); --fdm-radio-s: 8px; --fdm-sombra-alta: 0 30px 60px -20px rgba(58, 0, 1, .50); --fdm-vino-osc: #7A1012; --fdm-noche: #403334; position: relative; min-height: clamp(210px, 28vh, 320px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; /* Respaldo real cuando no carga la imagen: degradado de marca, nunca blanco. */ background-image: linear-gradient(135deg, var(--fdm-vino-osc) 0%, var(--fdm-noche) 55%), radial-gradient(600px 300px at 12% 20%, rgba(255, 231, 175, .18), transparent 70%); background-size: cover; } /* publico.css pinta los
de blanco y les pone sombra y radio. El héroe va a sangre, así que hay que deshacerlo. */ section.fdm-hero { background-color: transparent; border-radius: 0; box-shadow: none; margin-bottom: 0; /* #contenido tiene padding-top: 5px y fondo blanco, y esos 5 pixeles se ven como una raya blanca entre la marquesina y el banner. Se sube el heroe por encima. La marquesina lleva z-index 1000, asi que sigue tapando lo que quede debajo. */ margin-top: -5px; } .fdm-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center 42%; z-index: -2; transform: scale(1.02); } .fdm-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(64, 51, 52, .55) 0%, rgba(64, 51, 52, .18) 34%, rgba(64, 51, 52, .97) 100%), linear-gradient(90deg, rgba(112, 0, 1, .55) 0%, rgba(112, 0, 1, .04) 62%); } .fdm-hero__inner { width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(1.75rem, 4vw, 3rem) 1.5rem clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2.5rem; } /* La clase .logo--solo la pone la plantilla en la portada, donde el logotipo va sin el bloque de nombre y eslogan. Aqui habia un `width: auto` para que el logotipo no arrastrase el 42% que publico.css reserva a .logo. Quitaba el hueco, pero descuadraba el menu: arrancaba en un sitio distinto que en el resto de paginas. Entre un poco de aire de mas y un menu que se mueve al navegar, se prefiere el aire, asi que .logo mantiene su ancho de siempre y el menu queda anclado en todas las paginas. La clase se deja puesta por si hace falta como gancho. */ .fdm-hero__titulo { font-family: var(--fdm-display); font-weight: 700; font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: .95; letter-spacing: .01em; text-transform: uppercase; color: #FFF; margin: 0 0 .5rem; text-shadow: 0 4px 26px rgba(58, 0, 1, .35); } /* publico.css colorea los titulares con un selector de ID, que gana por especificidad. Hay que igualarla para que el título quede en blanco. */ #contenido .fdm-hero__titulo { color: #FFF; } .fdm-hero__lema { font-size: clamp(1rem, 1.6vw, 1.18rem); font-weight: 300; color: var(--fdm-crema); max-width: 46ch; margin: 0 0 1.5rem; } .fdm-hero__fechas { display: inline-flex; align-items: center; gap: .8rem; font-family: var(--fdm-display); font-weight: 600; font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fdm-oro-claro); padding: .45rem 1rem; border: 1px solid var(--fdm-oro-filete); border-radius: 999px; background: rgba(112, 0, 1, .45); margin-bottom: 1.6rem; } /* Es un enlace y cabe la duda de si se puede pulsar, así que se marca. */ .fdm-hero__cartel { display: block; cursor: pointer; width: clamp(110px, 12vw, 160px); border-radius: var(--fdm-radio-s); overflow: hidden; box-shadow: var(--fdm-sombra-alta); border: 1px solid var(--fdm-oro-filete); transform: rotate(-2deg); transition: transform .28s cubic-bezier(.16, 1, .3, 1); } .fdm-hero__cartel img { display: block; width: 100%; height: auto; } .fdm-hero__cartel:hover, .fdm-hero__cartel:focus-visible { transform: rotate(0deg) translateY(-4px); } .fdm-hero__cartel:focus-visible { outline: 3px solid var(--fdm-oro); outline-offset: 4px; } @media (max-width: 991px) { .fdm-hero__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: end; } .fdm-hero__cartel { width: clamp(92px, 24vw, 150px); align-self: end; transform: rotate(-2deg); } } @media (max-width: 576px) { .fdm-hero__titulo { font-size: clamp(1.85rem, 8.4vw, 2.7rem); } #contenido .fdm-hero__titulo { font-size: clamp(1.85rem, 8.4vw, 2.7rem); } .fdm-hero__lema { font-size: .95rem; margin-bottom: 1.1rem; } .fdm-hero__cartel { width: clamp(80px, 25vw, 118px); } .fdm-hero__inner { gap: .9rem; } } @media (prefers-reduced-motion: reduce) { .fdm-hero__cartel { transition: none; } }