/* * Tema Compogs: estilos propios. Se carga después de bridge.css (las reglas de Bridge que usa la web). * * 1. Fuentes (en el tema: sin peticiones a Google). Gotham no se carga: la web la pedía sin tenerla * (solo se ve en los ordenadores que la tienen instalada; en los demás, la de sustitución). * 2. Estructura: cabecera que encoge, logotipo, iconos, pie * 3. Contenido en bloques, con la geometría de WPBakery (del tema de Cibcomtech) * 4. Bloques y piezas de Compogs: portada, botones, separadores, carrusel, entradas, proyectos * 5. CSS propio de la web, tal cual y en su orden: el de las opciones de Bridge, el de WPBakery y el del * tema hijo (este último Bridge solo lo cargaba en Mac; ahora, siempre) * 6. Ajustes del tema nuevo sobre lo anterior * 7. Impresión */ /* ===== 1. Fuentes ===== */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-display: swap; src: url(../fonts/open-sans-italica-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-display: swap; src: url(../fonts/open-sans-italica-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/open-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/open-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/raleway-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/raleway-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ===== 2. Estructura ===== */ :root { --cg-verde: #009383; --cg-texto: #333536; /* Ancho de la rejilla de Bridge (.container_inner y .grid_section .section_inner) y margen de las columnas. */ --cg-rejilla: 1100px; --cg-margen: 15px; } @media only screen and (max-width: 1200px) { :root { --cg-rejilla: 950px; } } @media only screen and (max-width: 1000px) { :root { --cg-rejilla: 768px; } } @media only screen and (max-width: 768px) { :root { --cg-rejilla: 600px; } } @media only screen and (max-width: 600px) { :root { --cg-rejilla: 420px; } } @media only screen and (max-width: 480px) { :root { --cg-rejilla: 300px; } } @media only screen and (max-width: 350px) { :root { --cg-rejilla: 95%; --cg-margen: 0px; } } .has-text-align-left { text-align: left; } .has-text-align-center { text-align: center; } .has-text-align-right { text-align: right; } .has-text-align-justify { text-align: justify; } .cg-sin-vinetas > li { list-style-type: none; } /* Iconos de Font Awesome en SVG (inc/plantilla.php): mismo tamaño que la fuente. */ .cg-icono { display: inline-block; height: 1em; width: auto; fill: currentColor; vertical-align: -0.125em; } .mobile_menu_button .cg-icono { width: 12px; height: 14px; vertical-align: -2px; } /* CSS propio de la web: por debajo de 1300 px el icono del menú es de 20 px. */ @media only screen and (max-width: 1300px) { .mobile_menu_button .cg-icono { width: 17.14px; height: 20px; vertical-align: middle; position: relative; top: -3px; } } /* -3 px: donde quedaba el icono de la fuente */ #back_to_top .cg-icono { position: absolute; top: 15px; left: calc(50% - 10.2188px); width: 20.4375px; height: 22px; fill: #fff; } .portfolio_navigation .cg-icono { height: 26px; vertical-align: middle; } /* Cabecera fija que encoge al bajar (más de 1300 px): --cg-cabecera la pone assets/js/compogs.js. */ @media only screen and (min-width: 1301px) { header.fixed .header_bottom { height: var(--cg-cabecera, 180px); } header.fixed .logo_wrapper, header.fixed .side_menu_button { height: var(--cg-cabecera, 180px); } header.fixed nav.main_menu > ul > li > a { line-height: var(--cg-cabecera, 180px); } } .q_logo a { visibility: visible; height: 70px; } header.scrolled .q_logo a { height: 47px; } .q_logo img.mobile { display: none; } .content.content_top_margin { margin-top: 213px !important; } @media only screen and (max-width: 1300px) { .content.content_top_margin { margin-top: 0 !important; } } /* Pie: lo hicieron en 2025 con bloques de WordPress (columnas, imagen, párrafo) y lo maquetaba el CSS de bloques de WordPress, que este tema no carga. Aquí, sus mismas reglas, solo para el pie. */ footer .wp-block-columns { display: flex; box-sizing: border-box; align-items: normal !important; flex-wrap: wrap !important; gap: 2em; margin-bottom: 0; } footer .wp-block-column { box-sizing: border-box; flex-basis: 0; flex-grow: 1; flex-shrink: 1; min-width: 0; padding: 0; overflow-wrap: break-word; word-break: break-word; } footer .wp-block-column::before, footer .wp-block-column::after { content: none; } footer .wp-block-column[style*="flex-basis"] { flex-grow: 0; } footer .wp-block-image { margin: 0 0 1em; } footer .wp-block-image img { display: inline; box-sizing: border-box; height: auto; max-width: 100%; vertical-align: bottom; } footer .wp-block-image > a, footer .wp-block-image > figure > a { display: inline-block; } footer .wp-block-image.is-resized img, footer .wp-block-image figure.is-resized img { height: auto; } @media (min-width: 782px) { footer .wp-block-columns { flex-wrap: nowrap !important; } } @media (max-width: 781px) { footer .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; } } footer .wp-block-columns.is-not-stacked-on-mobile { flex-wrap: nowrap !important; } footer .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column { flex-basis: 0; flex-grow: 1; } /* ===== 3. Contenido en bloques, con la geometría de WPBakery ===== */ /* Filas: como .vc_row, sobresalen 15 px por cada lado (lo compensan las columnas). */ .cg-fila, .cg-fila-interior { position: relative; margin-left: -15px; margin-right: -15px; } /* Fondo con foto: centrado y sin repetir (div.section de Bridge); WordPress solo pone el tamaño. */ .cg-fila, .cg-fila-interior, .cg-columna { background-position: center center; background-repeat: no-repeat; } /* Rejilla: el contenido al ancho de .section_inner (1100 px, 950, 768…) más los 15 px por lado de .section_inner_margin. Como en Bridge, se centra si cabe; si no, se pega a la izquierda. */ .cg-fila--rejilla > *, .cg-fila-interior--rejilla > * { --cg-ancho: var(--cg-rejilla); box-sizing: border-box; width: calc(var(--cg-ancho) + 2 * var(--cg-margen)); margin-left: calc(max(0px, (100% - var(--cg-ancho)) / 2) - var(--cg-margen)); margin-right: calc(max(0px, (100% - var(--cg-ancho)) / 2) - var(--cg-margen)); } .cg-alinear-izquierda { text-align: left; } .cg-alinear-centro { text-align: center; } .cg-alinear-derecha { text-align: right; } /* Columnas: el relleno de 15 px de .vc_column-inner (y 1 px de alto mínimo, como .vc_col-sm-*); en móvil, una debajo de otra. */ .cg-columna, .wp-block-column { box-sizing: border-box; min-height: 1px; padding-left: 15px; padding-right: 15px; } /* Como .vc_column-inner, las columnas encierran los márgenes de lo que llevan dentro (clearfix): el separador de arriba y el de abajo no se juntan con los de la columna siguiente cuando van apiladas. */ .cg-columna::before, .cg-columna::after, .wp-block-column::before, .wp-block-column::after { content: " "; display: table; } /* (Con !important porque en el editor los estilos de WordPress estiran las columnas a la misma altura.) */ .wp-block-columns { display: flex; flex-wrap: nowrap !important; align-items: flex-start !important; } .wp-block-column { flex-grow: 0; flex-shrink: 0; min-width: 0; } .wp-block-column:not([style*="flex-basis"]) { flex: 1 1 0; } @media (max-width: 767px) { .wp-block-columns { display: block; } } /* «Ocultar en…» de WPBakery, con sus mismos cortes. */ @media (max-width: 767px) { .cg-oculto-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .cg-oculto-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199px) { .cg-oculto-md { display: none !important; } } @media (min-width: 1200px) { .cg-oculto-lg { display: none !important; } } @media only screen and (max-width: 768px) { .cg-fila--rejilla > *, .cg-fila-interior--rejilla > * { --cg-ancho: min(var(--cg-rejilla), 100%); } } /* Textos de WPBakery: el último elemento de cada texto va sin margen inferior (.wpb_text_column :last-child). */ .cg-texto :last-child, .cg-texto p:last-child { margin-bottom: 0; } /* Imágenes (Imagen sencilla de WPBakery). Con alineación, WordPress mete la imagen en un
con la clase de alineación en el
. */ .wp-block-image { margin: 0; } .wp-block-image img { max-width: 100%; height: auto; vertical-align: middle; } .wp-block-image.aligncenter, .wp-block-image .aligncenter { text-align: center; margin-left: auto; margin-right: auto; } /* La imagen de WPBakery no llevaba los 10 px arriba y abajo que Bridge da a .aligncenter (eso es para las imágenes dentro de un texto, que lo siguen teniendo). */ .wp-block-image.aligncenter, .wp-block-image > .aligncenter, .wp-block-image > .alignright { margin-top: 0; margin-bottom: 0; } /* Estilo «círculo» de WPBakery. */ .wp-block-image.cg-circulo img, .wp-block-image .cg-circulo img { border-radius: 50%; overflow: hidden; } .wp-block-image.alignright, .wp-block-image .alignright { text-align: right; } /* Separador transparente de Bridge: 1 px de alto y sus márgenes. */ hr.wp-block-separator.cg-separador { display: block; position: relative; height: 1px; margin: 10px 0; padding: 0; border: 0; background-color: #eaeaea; opacity: 1; } hr.wp-block-separator.cg-separador--transparent { background-color: transparent; } /* Mapa de Google */ .wpb_gmaps_widget .wpb_wrapper { background-color: #f7f7f7; padding: 5px; } .wpb_gmaps_widget .wpb_map_wraper iframe { display: block; width: 100%; margin-bottom: 0; padding: 0; border: none; } /* Aparición al bajar (css_animation de WPBakery): assets/js/compogs.js añade «wpb_start_animation animated». */ .wpb_animate_when_almost_visible { opacity: 0; } .wpb_animate_when_almost_visible:not(.wpb_start_animation) { animation: none; } .wpb_start_animation { opacity: 1; } .animated { animation-duration: 1s; animation-fill-mode: both; } .fadeIn { animation-name: fadeIn; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* ===== 4. Bloques y piezas de Compogs ===== */ /* Foto de portada (el slider de Bridge, con una sola diapositiva): 750 px desde lo alto de la página, por debajo de la cabecera fija; los textos en una caja de 550 px que empieza al 57 % de la altura (más los 10 px de margen de su contenedor en Bridge), alineada con la rejilla. Interlineado de 14 px en los tres textos, como en la diapositiva; el subtítulo iba en un con 13 px de margen debajo. */ .cg-con-portada .content.content_top_margin, .cg-con-titulo .content.content_top_margin { margin-top: 0 !important; } .cg-diapositiva { position: relative; box-sizing: border-box; height: 750px; padding-top: 437.5px; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; text-align: left; } .cg-diapositiva > * { width: 550px; max-width: 100%; margin-left: max(0px, (100% - var(--cg-rejilla)) / 2); font-family: Gotham, sans-serif !important; line-height: 14px; color: #fff; text-shadow: none; } .cg-diapositiva > .cg-diapositiva-titulo { margin-top: 10px; margin-bottom: 20px; letter-spacing: 1px; padding: 0; } .cg-diapositiva > .cg-diapositiva-subtitulo { margin-top: 0; margin-bottom: 0; padding-bottom: 13px; letter-spacing: 1px; } .cg-diapositiva > .cg-diapositiva-texto { margin-top: 10px; margin-bottom: 15px; } /* Responsive del slider de Bridge (sin «advanced responsiveness»), con los tamaños de esta diapositiva: hasta 1200 px el título baja a 0,625 (25 px) con interlineado 1,4 y el subtítulo a 0,8 (21,6 px), y la caja ocupa la mitad de la rejilla; hasta 800 px los textos se centran en vertical a todo el ancho de la rejilla; hasta 567 px el título baja a 0,525 (21 px) y el texto grande, a interlineado 1,4. */ @media (max-width: 1200px) { .cg-diapositiva > * { width: calc(var(--cg-rejilla) / 2); } .cg-diapositiva > .cg-diapositiva-titulo { margin-top: 0; font-size: 25px !important; line-height: 35px; } .cg-diapositiva > .cg-diapositiva-subtitulo { font-size: 21.6px !important; } } @media only screen and (max-width: 800px) { .cg-diapositiva { display: flex; flex-direction: column; justify-content: center; padding-top: 0; } .cg-diapositiva > * { width: var(--cg-rejilla); } } @media (max-width: 567px) { .cg-diapositiva > .cg-diapositiva-titulo { font-size: 21px !important; line-height: 29.4px; } .cg-diapositiva > .cg-diapositiva-texto { line-height: 1.4em; } } /* Botón de Bridge (qbutton mediano). Los colores de cada botón van en sus ajustes. */ .wp-block-buttons { display: block; } .wp-block-button { display: inline-block; } .wp-block-button.is-style-compogs .wp-block-button__link { position: relative; display: inline-block; box-sizing: content-box; width: auto; height: 39px; margin: 0; padding: 0 23px; border: 2px solid #303030; border-radius: 4px; background-color: transparent; color: #303030; font-family: inherit; font-size: 13px; font-style: normal; font-weight: 700; line-height: 39px; letter-spacing: 1px; text-align: center; text-decoration: none; text-shadow: none; text-transform: uppercase; white-space: nowrap; cursor: pointer; outline: 0; transition: color .1s linear, background-color .1s linear, border-color .1s linear; } .wp-block-button.is-style-compogs .wp-block-button__link:not(.has-background):hover { background-color: #1abc9c; border-color: #1abc9c; color: #fff; } @media only screen and (max-width: 768px) { .wp-block-button.is-style-compogs .wp-block-button__link { height: 38px; line-height: 38px; padding: 0 16px; } } /* Separadores de Bridge: fino (1 px gris) y corto (22 px, 2 px de alto); los colores, en sus ajustes. */ hr.wp-block-separator.cg-separador--normal { height: 1px; background-color: #eaeaea; } hr.wp-block-separator.cg-separador--small { width: 22px; height: 2px; margin-left: auto; margin-right: auto; background-color: #303030; } hr.wp-block-separator.cg-separador--small.cg-separador--left { margin-left: 0; margin-right: 0; } hr.wp-block-separator.cg-separador--small.cg-separador--right { margin-left: auto; margin-right: 0; } hr.wp-block-separator.cg-separador--grueso-2 { height: 2px; } hr.wp-block-separator.cg-separador--grueso-3 { height: 3px; } /* Carrusel de fotos (galería «flexslider» de WPBakery). */ .wpb_gallery .wpb_flexslider { position: relative; overflow: hidden; margin: 0 0 60px; } /* el margen de flexslider para sus puntos */ .wpb_gallery::before, .wpb_gallery::after { content: " "; display: table; } /* vc_clearfix: el margen se queda dentro */ .wpb_gallery .wpb_flexslider .slides { display: flex; margin: 0; padding: 0; list-style: none; transition: transform .6s ease; } .wpb_gallery .wpb_flexslider .slides > li { flex: 0 0 100%; } .wpb_gallery .wpb_flexslider .slides img { display: block; width: 100%; height: auto; } /* Proyectos (bloque «Proyectos»): la rejilla «masonry gallery with space» de Bridge. Bridge la dejaba invisible hasta que su JavaScript (Isotope) colocaba las piezas; aquí la coloca el CSS: tres por fila, dos por debajo de 1000 px y una por debajo de 480. */ .projects_masonry_holder { opacity: 1; display: flex; flex-wrap: wrap; } .projects_masonry_holder::after { content: none; } @media only screen and (max-width: 1000px) { .projects_masonry_holder .portfolio_masonry_item, .full_width .projects_masonry_holder.gs3 .portfolio_masonry_item { width: 50%; } } @media only screen and (max-width: 480px) { .projects_masonry_holder .portfolio_masonry_item, .full_width .projects_masonry_holder.gs3 .portfolio_masonry_item { width: 100%; } } /* Mapa web (bloque «Mapa web») */ .wsp-container .wsp-pages-list { list-style: disc inside; } /* ===== 5. CSS propio de la web ===== */ /* ---- Opciones de Bridge › CSS personalizado (custom_css.css) ---- */ .post_text_inner h1 { padding-top: 50px; padding-bottom: 15px; color: #333536; font-size: 40px; font-family: Gotham; font-weight: 500; } .post_text_inner h2 { line-height: 1; padding-top: 40px; padding-bottom: 25px; color: #333536; font-size: 30px; font-family: Gotham; font-weight: 500; } .entradilla { padding: 20px 0px!important; font-family: Gotham, sans-serif!important; font-weight: 400!important; font-size: 22px!important; line-height: 1.3!important; } .blog_holder article .post_info { color: #bebebe !important; } .blog_holder article .post_info a, .blog_holder article .post_text h2 .date { color: #bebebe !important; } a.boton-blog { text-transform: uppercase; border-radius: 4px; letter-spacing: 1px; margin: 40px 0 !important; background-color: #159383; color: #ffffff !important; font-size: 13px; font-family: Gotham, sans-serif; font-weight: 700 !important; font-style: normal !important; padding: 10px 23px; border: none; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; text-decoration: none; display: inline-block; } .boton-blog a{ text-transform: uppercase; border-radius: 4px; letter-spacing: 1px; margin: 40px 0 !important; background-color: #159383; color: #ffffff !important; font-size: 13px; font-family: Gotham, sans-serif; font-weight: 700 !important; font-style: normal !important; padding: 10px 23px; border: none; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; text-decoration: none; display: inline-block; } a.boton-blog:hover, .boton-blog a:hover { text-decoration: none !important; } .cita{ margin: 50px !important; text-align: center !important; line-height: 1.3 !important; /* (aquí había «color: color: #333536; !important;», que el navegador descartaba por mal escrito: se quita) */ font-size: 28px !important; font-family: Gotham, sans-serif !important; font-weight: 400 !important; font-style: italic; } .blog_single .post_image { display: none!important; } .post_text_inner h3 { line-height: 1; padding-top:50px; padding-bottom: 30px; color: #159383; font-size: 26px !important; font-family: Gotham, sans-serif; font-weight: 400; } .post_text_inner h4 { line-height: 1; padding-top:50px; padding-bottom: 30px; font-size: 23px; font-family: Gotham, sans-serif; font-weight: 500; } .post_text_inner h5 { line-height: 1; padding-top:50px; padding-bottom: 30px; font-size: 20px; font-family: Gotham, sans-serif; font-weight: 500; color: #303030; } .post_text_inner h6 { color: #159383; line-height: 1; padding-top:50px; padding-bottom: 30px; font-size: 18px; font-family: Gotham, sans-serif; font-weight: 600; } .title_subtitle_holder { display: none!important; } .blog_holder article .post_info { margin: 0 0 30px; } .single-post .blog_single p { color: #333536; margin-bottom: 22px; font-family: Gotham, sans-serif!important; font-size: 16px; line-height: 26px; font-weight: 400; } .single-post .blog_single p strong { font-weight: 500!important; color: #1b1b1bcf !important; } .post_content_holder{ padding-bottom: 50px!important; } .single-post .blog_single ol { padding: 20px 0px; padding-left: 20px; color: #333536; margin-bottom: 22px; font-family: Gotham, sans-serif; font-size: 16px; line-height: 26px; font-weight: 400; } .single-post .blog_single ol li { margin-bottom: 12px; } .single-post .blog_single ul { padding: 20px 0px; color: #333536; font-family: Gotham, sans-serif; font-size: 16px; line-height: 26px; font-weight: 400; } .single-post .blog_single ul li { text-indent: -1.2em; padding-left: 1em; margin-bottom: 12px; } .single-post .blog_single ol li::marker { color: #159383; font-weight: 500; } .destacado{ color: #159383; font-weight: 500; } .single-post .blog_single .wp-caption-text { padding-top: 10px!important; padding-bottom: 20px; font-family: Gotham, sans-serif; font-weight: 400; font-style: italic; font-size: 14px; color: #333536; line-height: 1.5; } .single-post .blog_single .wp-caption { max-width: 100% !important; width: 100% !important; } .single-post .blog_single .wp-caption img { width: 100% !important; height: auto !important; display: block; } .single-post .blog_single a { font-family: 'Gotham', sans-serif; font-style: italic; font-weight: 400; color: #159383; text-decoration: none; transition: color 0.3s ease, text-decoration 0.2s ease; } .single-post .blog_single a:hover { text-decoration: underline; color: #12796e; } /***************************** (max-width: 1000px)***********************************/ @media (max-width: 1000px) { .post_text_inner h1 { font-size: 40px!important; } .post_text_inner h2 { padding-top: 40px!important; padding-bottom: 20px!important; font-size: 27px!important; } .post_text_inner h3 { padding-top: 40px!important; padding-bottom: 20px!important; font-size: 23px!important; } .post_text_inner h4 { padding-top: 40px!important; padding-bottom: 20px!important; font-size: 20px!important; } .post_text_inner h5, h6 { padding-top: 40px!important; padding-bottom: 20px!important; font-size: 20px!important; } .cita{ font-size: 20px!important; } } /***************************** (max-width: 768px)***********************************/ @media (max-width: 768px) { .post_text_inner h1 { line-height: 1.3; font-size: 30px !important; padding-bottom: 5px!important; } .single-post .blog_single p { font-size: 14px; } .post_text_inner h2 { line-height: 1.3; padding-top: 30px !important; padding-bottom: 20px !important; font-size: 20px !important; } .post_text_inner h3 { line-height: 1.3; padding-top: 30px!important; padding-bottom: 20px!important; font-size: 19px!important; } .post_text_inner h4 { line-height: 1.3; padding-top: 30px!important; padding-bottom: 20px!important; font-size: 18px!important; } .post_text_inner h5, h6 { line-height: 1.3; padding-top: 30px!important; padding-bottom: 20px!important; font-size: 17px!important; } .cita{ margin: 40px 10px !important; line-height: 1.3; font-size: 17px!important; } .post_content_holder { padding-bottom: 30px !important; } .single-post .blog_single ol, .single-post .blog_single ul { font-size: 14px !important; line-height: 22px !important; } .boton-blog a { margin: 20px 0px !important; font-size: 13px!important; padding: 10px 20px!important; } .post_info{ font-size: 12px!important; } .single-post .blog_single .wp-caption-text { font-size: 12px; } } .gallery { display: grid !important; gap: 20px !important; margin: 40px 0 !important; padding: 0; } /* Items */ .gallery-item, .gallery-item dt, .gallery-item a { width: 100% !important; height: 100% !important; display: block !important; } .gallery-item img { width: 100% !important; height: 100% !important; object-fit: cover; display: block !important; border: 2px solid #fff !important; border-radius: 0 !important; } /* Eliminar restos del sistema antiguo */ .gallery br { display: none !important; } .gallery .gallery-item { float: none !important; margin-top: 0 !important; } /* Columnas según clase */ .gallery-columns-1 { grid-template-columns: repeat(1, 1fr) !important; } .gallery-columns-2 { grid-template-columns: repeat(2, 1fr) !important; } .gallery-columns-3 { grid-template-columns: repeat(3, 1fr) !important; } .gallery-columns-4 { grid-template-columns: repeat(4, 1fr) !important; } .gallery-columns-5 { grid-template-columns: repeat(5, 1fr) !important; } .gallery-columns-6 { grid-template-columns: repeat(6, 1fr) !important; } /* Ajuste automático si no hay clase de columnas */ .gallery:not(.gallery-columns-1):not(.gallery-columns-2) :not(.gallery-columns-3):not(.gallery-columns-4) :not(.gallery-columns-5):not(.gallery-columns-6) { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; } /* Responsivo */ @media (max-width: 768px) { .gallery { grid-template-columns: 1fr !important; } } /* ---- WPBakery › CSS personalizado (uploads/js_composer/custom.css) ---- */ h1, h2, h3, h4, h5, h6, p { font-family: 'Gotham', sans-serif !important; } .latest_post_two_holder .latest_post_two_info { display: none; } .latest_post_two_holder .post_info_date { padding-left: 8px; padding-top: 15px; font-size: 13px; font-weight: 400; color: #333536; font-family: 'Gotham', sans-serif; letter-spacing: 0.5px; } .page-id-30 .latest_post_two_holder .latest_post_two_inner { background-color: white; } .latest_post_two_holder .latest_post_two_inner { background-color: #f9f8f8; } .latest_post_two_holder .latest_post_two_text { padding: 25px 8px 0px; } .latest_post_two_holder h3 a{ color: #159383 !important; font-size: 20px; font-family: 'Gotham', sans-serif; font-weight: 500; } .latest_post_two_holder h3:hover{ color: #333536!important; } .latest_post_two_holder p{ font-size: 14px!important; } .latest_post_two_holder h3{ line-height: 1!important; } .separator.small { background-color: #333536!important; } .latest_post_two_holder .leer-mas { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: #007565; text-decoration: none; transition: color 0.3s; } .latest_post_two_holder .leer-mas:hover { color: #333536!important; } .page-id-30 .latest_post_two_holder .latest_post_two_text { padding: 25px 8px 40px; } .titulo-cabecera p{ font-size: 30px!important; } .titulo-principal h1{ font-size: 35px!important; } h2 { padding-bottom: 20px; line-height: 1.2; font-size: 35px; font-weight: 400; } h3 { line-height: 1.2; font-size: 25px !important; font-weight: 400; } h4 { line-height: 1.2; font-size: 25px; font-weight: 400; } h5 { line-height: 1.2; font-size: 22px; font-weight: 400; } h6 { line-height: 1.2; font-size: 15px; font-weight: 300; } p { margin-bottom: 22px; font-size: 16px; line-height: 26px; font-weight: 400; } .portfolio_single h1 { padding-top: 30px; color: #159383!important; font-size: 40px; font-family: 'Gotham', sans-serif; font-weight: 400; line-height: 1.1; letter-spacing: 1px; margin-bottom: 30px; } .portfolio_single{ padding-bottom: 80px; } .portfolio-date{ font-size: 14px!important; font-family: 'Gotham', sans-serif!important; font-weight: 500!important; margin-bottom: 50px!important; } .portfolio_single p { color: #333536; margin-bottom: 22px; font-family: Gotham, sans-serif!important; font-size: 16px; line-height: 26px; font-weight: 400; } .portfolio_single p strong { color: #1b1b1be3 !important; font-weight: 500!important; } .portfolio_single h2 { line-height: 1; padding-top: 40px; padding-bottom: 25px; color: #159383!important; font-size: 30px; font-family: Gotham; font-weight: 400; } .portfolio_single h3 { line-height: 1; padding-top:50px; padding-bottom: 35px; color:#333536; font-size: 28px !important; font-family: Gotham, sans-serif; font-weight: 400; } .portfolio_single h4 { color:#159383; line-height: 1; padding-top:50px; padding-bottom: 30px; font-size: 25px; font-family: Gotham, sans-serif; font-weight: 400; } .portfolio_single h5 { line-height: 1; padding-top:50px; padding-bottom: 30px; font-size: 22px; font-family: Gotham, sans-serif; font-weight: 400; color: #707070; } .portfolio_single h6 { color: #159383; line-height: 1; padding-top:50px; padding-bottom: 30px; font-size: 20px; font-family: Gotham, sans-serif; font-weight: 600; } .portfolio_single a { font-family: 'Gotham', sans-serif; font-style: italic; font-weight: 400; color: #159383; text-decoration: none; transition: color 0.3s ease, text-decoration 0.2s ease; } .portfolio_single a:hover { text-decoration: underline; color: #12796e; } #boton-interior{ font-family: Gotham, sans-serif; font-weight: 700 !important; padding: 0px 40px; border-radius: 4px!important; border-color: #333536!important; color:#009383!important; border: 1px solid #303030!important; } a.boton-proyecto { text-transform: uppercase; border-radius: 4px; letter-spacing: 1px; margin: 40px 0 !important; background-color: #159383; color: #ffffff !important; font-size: 13px; font-family: Gotham, sans-serif; font-weight: 700 !important; font-style: normal !important; padding: 10px 23px; border: none; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; text-decoration: none; display: inline-block; } .boton-proyecto a{ text-transform: uppercase; border-radius: 4px; letter-spacing: 1px; margin: 40px 0 !important; background-color: #159383; color: #ffffff !important; font-size: 13px; font-family: Gotham, sans-serif; font-weight: 700 !important; font-style: normal !important; padding: 10px 23px; border: none; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; text-decoration: none; display: inline-block; } a.boton-proyecto:hover, .boton-proyecto a:hover { text-decoration: none !important; } iframe { padding: 20px 0; } .cita-proyecto{ margin: 50px !important; text-align: center !important; line-height: 1.3 !important; color: #159383!important; font-size: 28px !important; font-family: Gotham, sans-serif !important; font-weight: 400 !important; font-style: italic; } .portfolio_single ol { padding: 20px 0px; padding-left: 20px; color: #333536; margin-bottom: 22px; font-family: Gotham, sans-serif; font-size: 16px!important; line-height: 26px; font-weight: 400; } .portfolio_single ol li { margin-bottom: 12px; } .portfolio_single ul { padding: 20px 0px; color: #333536; font-family: Gotham, sans-serif; font-size: 16px!important; line-height: 26px; font-weight: 400; } .portfolio_single ul li { text-indent: -1.2em; padding-left: 1em; margin-bottom: 12px; } .portfolio_single ol li::marker { color: #159383; font-weight: 500; } .portfolio_single ol li strong { color: #1b1b1be3 !important; font-weight: 500!important; } .portfolio_single ul li strong { color: #1b1b1be3 !important; font-weight: 500!important; } .destacado{ color: #159383; font-weight: 500; } .portfolio_navigation { padding: 75px 0 50px!important; } .portfolio_single .wp-caption-text { padding-top: 10px!important; padding-bottom: 0px; font-family: Gotham, sans-serif; font-weight: 400; font-style: italic; font-size: 14px; color: #333536; line-height: 1.5; } body[class*="portfolio_single"] .title_outer { display: none !important; } .iconos-redes { display: flex!important; justify-content: flex-start!important; gap: 10px!important; align-items: center!important; } .iconos-redes .wp-block-column { flex: 0 0 auto!important; margin: 0!important; } .iconos-redes img { display: block!important; width: 25px!important; height: 25px!important; } .footer_top { text-align:left!important; } .footer_inner p{ font-size: 13px!important; } .main_menu { display: none !important; } header .header_inner_left { position: relative; left: 25px; top: 0; } .header_bottom{ height: auto!important; } @media only screen and (max-width: 1300px) { .header_top { display: none; } .logo_wrapper { left: 50%; } .mobile_menu_button i { font-size: 20px; line-height: 1; } } @media only screen and (max-width: 1000px) { .mobile_menu, .mobile_menu_button { align-items: center; } } @media only screen and (max-width: 1300px) and (min-width: 1001px) { .mobile_menu_button { position: relative; display: flex; align-items: center; justify-content: center; height: 180px; cursor: pointer; } .mobile_menu { display: none; } .logo_wrapper { position: absolute; } .q_logo { display: block; } .logo_wrapper { left: 40%; } .content.content_top_margin { margin-top: 0px !important; } .content.content_top_margin { margin-top: 0px !important; } header.page_header.fixed, header.page_header.scrolled, header.page_header.scrolled_not_transparent { position: relative !important; top: auto !important; width: 100% !important; } header.page_header.fixed .header_bottom { height: auto !important; } } @media only screen and (min-width: 1301px) { .header_top { display:none!important; } .main_menu { display: block !important; } .mobile_menu, .mobile_menu_button { display: none !important; } } @media (max-width: 1000px) { .portfolio_navigation { padding: 20px 0 50px!important; } .portfolio_single h1 { font-size: 35px!important; } .portfolio_single h2 { padding-top: 40px!important; padding-bottom: 20px!important; font-size: 25px!important; } .portfolio_single h3 { padding-top: 40px!important; padding-bottom: 20px!important; font-size: 22px!important; } .portfolio_single h4 { padding-top: 40px!important; padding-bottom: 20px!important; font-size: 20px!important; } .portfolio_single h5, h6 { padding-top: 40px!important; padding-bottom: 20px!important; font-size: 18px!important; } .cita-proyectos{ font-size: 20px!important; } } @media (max-width: 768px) { .footer_top { text-align: center!important; } .iconos-redes { justify-content: center!important; } .portfolio_single h1 { line-height: 1.3; font-size: 30px !important; padding-bottom: 5px!important; } .portfolio_single p { font-size: 14px; } .portfolio_single h2 { line-height: 1.3; padding-top: 30px !important; padding-bottom: 20px !important; font-size: 22px !important; } .portfolio_single h3 { line-height: 1.3; padding-top: 30px!important; padding-bottom: 20px!important; font-size: 20px!important; } .portfolio_single h4 { line-height: 1.3; padding-top: 30px!important; padding-bottom: 20px!important; font-size: 18px!important; } .portfolio_single h5, h6 { line-height: 1.3; padding-top: 30px!important; padding-bottom: 20px!important; font-size: 17px!important; } .cita-proyectos{ margin: 40px 10px !important; line-height: 1.3; font-size: 17px!important; } .portfolio_single { padding-bottom: 30px !important; } .portfolio_single ol, .portfolio_single ul { font-size: 14px !important; line-height: 22px !important; } .boton-proyectos a { margin: 20px 0px !important; font-size: 13px!important; padding: 10px 20px!important; } } /* ---- Tema hijo de Bridge (bridge-child/style.css) ---- */ video{ max-width:100%; display: block; } /* BOTONES*/ .qbutton.big_large { height: 58px; line-height: 58px; font-size: 20px; padding: 0 84px; } /* APLICACIONES INDEX*/ .espacio-textos-index{ height: 91px; } /* APLICACIONES */ .recuadros-aplicaciones{ height: 601px; background-color:#ffffff; } .recuadros-aplicaciones-abajo .vc_column_container>.vc_column-inner{ height: 576; } .recuadros-movil .vc_column_container>.vc_column-inner { height: 790px; } /* BLOG */ .blog_holder article .post_info a, .blog_holder article .post_text h2 .date { color: #000; } .blog_holder article .post_info { display: inline-block; width: 100%; margin: 0 0 30px; color: #000; font-weight: 500; } aside .widget.posts_holder li { padding: 0px 0; margin: 0; } /* EQUIPOS DE COMPOSTAJE */ .espacio-titular { height: 72px; } .textos p { padding-left: 22px; text-align: center; padding-right: 22px; } .textos h4{ line-height: 105px; } .titular-blog a{ color: #009383; font-size: 22px; font-weight: 500; letter-spacing: 0px; text-transform: none; } .consumo { height: 40px; } /* PROYECTOS */ .portfolio_navigation .portfolio_next a, .portfolio_navigation .portfolio_prev a { position: relative; display: inline-block; width: 42px; height: 42px; line-height: 42px; margin: 0 11px 0 0; text-align: center; font-size: 26px; color: #45c2b1; text-decoration: none; text-transform: uppercase; cursor: pointer; white-space: nowrap; border: 1px solid #45c2b1; outline: 0; border-radius: 0px; text-shadow: none; } /* PORTFOLIO */ /*.portfolio_detail{ display: none !important; }*/ /*.title.title_size_large h1 { font-size: 35px; line-height: 60px; }*/ /* ===== 6. Ajustes del tema nuevo ===== */ /* El CSS propio de WPBakery pone todos los separadores cortos en gris oscuro (.separator.small, con !important), por encima del color de cada uno: en el nuevo, lo mismo. */ hr.wp-block-separator.cg-separador--small { background-color: #333536 !important; color: #333536 !important; } /* El botón «BLOG» de la portada llevaba el id «boton-interior», con estilo propio en el CSS de WPBakery: en el bloque Botón el id no puede ir en el enlace, así que va como clase y aquí, su mismo estilo. */ .wp-block-button.boton-interior .wp-block-button__link { font-family: Gotham, sans-serif; font-weight: 700 !important; padding: 0 40px; border-radius: 4px !important; border: 1px solid #303030 !important; color: #009383 !important; } /* ===== 7. Impresión ===== */ @media print { header, footer, .title_outer, header.page_header, #back_to_top { display: none !important; } .content.content_top_margin { margin-top: 0 !important; } }