/* CSS propio de fucomp.es. Aquí viven los ajustes de apariencia editables por el sistema (colores, tipografías, espaciados) como código, no en el Personalizador. Cada petición de estilo de riesgo bajo edita este fichero, pasa por el pipeline (PR -> smoke -> deploy) y es reversible por git. */ /* Ancho máximo del contenido, centrado. Tras migrar de Elementor y usar la plantilla fullwidth del tema, el contenido ocupaba todo el ancho de la pantalla; se limita a una columna centrada legible. */ .page-builder .container, .entry-content .container { max-width: 1170px; margin-left: auto; margin-right: auto; float: none; } /* Las imágenes nunca superan el ancho de su columna. */ .page img, .entry-content img, .wp-block-image img { max-width: 100%; height: auto; } /* La rejilla Bootstrap heredada no debe forzar scroll horizontal. */ .page-builder .row, .entry-content .row { margin-left: 0; margin-right: 0; } /* ── Secuelas de retirar Elementor ───────────────────────────────────────── Al desactivar Elementor dejó de cargarse SU hoja de estilos, y el marcado que quedó en el contenido conserva clases que ya no las pinta nadie. Esto recupera el aspecto anterior con CSS propio, que es reversible por git y no depende de un plugin de terceros. */ /* La portada no lleva franja de título: su plantilla de Elementor la suprimía y la del tema (page.php / fullwidth.php) la pinta vía index-banner. Solo se oculta en la portada; el resto de páginas la mantienen, como en producción. */ .home .page-title-section { display: none; } /* NO tocar `.small-link` aquí. Los botones ya los estiliza el CSS adicional del Personalizador (botón turquesa #0eb19b, padding 8px 12px), que es idéntico en producción y en el clon. Una regla propia con más especificidad lo pisaba y alejaba el clon del original en vez de acercarlo. Si algún día hay que cambiar ese botón, se cambia donde vive: en el Personalizador, no aquí. */ /* ── Portada: igualar el envoltorio al de Elementor ──────────────────────── El contenido interior es el mismo marcado en las dos webs; lo que cambia es quién lo envuelve. En producción lo envuelve el contenedor de Elementor (ancho 1140px, sin relleno propio). Aquí lo envuelve la plantilla del tema, que añade 80px por arriba, 10px a la derecha y 60px por abajo, y recorta a 1170px. Sin esto el contenido baja, se descentra y queda más ancho. Medido contra fucomp.es, no estimado. Solo en la portada: las demás páginas usan la plantilla del tema también en producción, con esos rellenos. */ .home .page-builder { padding-top: 0; } .home .blog-lg-area-left { padding: 0; overflow: visible; } .home .page-builder .container { max-width: 1140px; } /* Botones de la portada: 18px y sin subrayado. El CSS del Personalizador encadena varias reglas sobre estos botones y la última que aplica los deja en 10px (`.button-container .small-link`), con una variante de 9px para `.horizontal-conep`. Se necesita un selector con más especificidad que aquellas: se añade el elemento (a.small-link) para ganar sin recurrir a !important. El subrayado se fija aquí también porque solo lo quitaba la regla base `.small-link`, que es la de menor especificidad de la cadena. */ .home .button-container a.small-link, .home .button-container.horizontal-conep a.small-link { font-size: 18px; text-decoration: none; } .home .button-container a.small-link:hover, .home .button-container a.small-link:focus { text-decoration: none; } /* ── Portadas de evento, una al lado de otra ─────────────────────────────── `.eventos-section` y `.evento-box` solo estaban definidas dentro del @media de móvil del Personalizador, y ni siquiera había un `display: grid` en ninguna hoja: en escritorio eran div corrientes y las portadas se apilaban siempre, por mucho que el nombre de la clase sugiriese lo contrario. Aquí se le da la rejilla que le faltaba. `auto-fit` con un mínimo de 280px las pone en paralelo cuando caben y las apila solas cuando no, así que sirve para dos portadas o para cuatro. ACOTADO al PRIMER `portada-container`, que es la zona por la que se preguntó. La página de inicio tiene DOS, y no se distinguen por ancestros: el

de la cabecera no se cierra nunca, así que ambos cuelgan de `section-heading-title > h1` exactamente igual. Lo único que los separa es el orden: son hermanos, y el de la cabecera es el primer div del h1. Sin este acotado la regla reordenaba también la sección de Europa y Mujer, que nadie había pedido tocar. */ .section-heading-title > h1 > .portada-container:first-of-type .eventos-section { display: grid; /* Dos columnas fijas y el bloque centrado. Con `auto-fit` sobraba una pista vacía a la derecha y el par quedaba descolgado hacia la izquierda, con un hueco blanco grande. `minmax(0, 1fr)` evita que una imagen ancha ensanche su columna y descuadre el par. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; justify-items: center; max-width: 920px; margin-left: auto; margin-right: auto; } /* Las dos portadas se ven a la MISMA altura aunque los originales no tengan ni el mismo tamaño ni la misma proporción (una apaisada, otra vertical). `contain` encaja cada una dentro de su hueco sin recortarla ni deformarla: la vertical deja aire a los lados y la apaisada ocupa el ancho. Se anula el `max-width: 800px` del Personalizador, pensado para cuando iban a ancho completo y que aquí desbordaría la columna. */ .section-heading-title > h1 > .portada-container:first-of-type .evento-box .image-container img { width: 100%; height: 340px; max-width: none; object-fit: contain; margin: 0 auto 16px; } /* Cada tanda de botones bajo SU imagen, partiendo línea si no cabe. Sin esto, la caja con cuatro botones los sacaba de su columna y quedaban centrados a media página, como si no pertenecieran a ninguna de las dos portadas. */ .section-heading-title > h1 > .portada-container:first-of-type .button-container { flex-wrap: wrap; justify-content: center; } /* ── Cabecera: que el menú y la lupa quepan en una sola línea ────────────── Al crecer el menú principal, el