/*
Theme Name: Tso Reformas
Theme URI: https://www.reformaloya.es
Description: Tema Tso Reformas. Basat en Enclosed 1.2.0. Compatibilitat WordPress 6.9+, PHP 8.3, MySQL 8.x/9.x.
Author: ReformaloyaTheme
Author URI: https://www.reformaloya.es
Version: 2.0.0
License: GNU General Public License 2.0
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: enclosed-child
*/

/* ENCLOSED BASE CSS - necessari perquè cpotheme-main apunta al nostre style.css */


/*
INDEX

1. GENERAL ELEMENTS
Styles basic elements such as headings or hyperlinks, affecting the overall site but not its layout.

2. LAYOUT
Defines the structure and design of the site. All styles that displace elements go here.
Special layout elements such as breadcrums or page-specific stuff also goes here.

3. NAVIGATION
Defines the styles for menus and cross-post navigation. Any specific element related to site traversing goes here.

4. POSTS
Styles the appearance of posts and overall content, as well as typography. 
Must be in line with editor-style.css, so that both styles match.

5. COMMENTS
Sets the appearance of the comment system, structuring both entries and posting forms.

6. WIDGETS
Establishes the layout of widgets. Whereas the layout section affects the site in general, 
this section determines widget appearance for both their layout and contents.

*/


/* --------------------------------------------------------------
1. GENERAL ELEMENTS
-------------------------------------------------------------- */

/* BODY */
body { font-family:'Open sans', Arial, Helvetica, sans-serif; background:#aaa; color:#777; font-size:0.875em; line-height:1.6; }

/* HEADINGS */
h1, h2, h3, h4, h5, h6 { font-family:'Roboto Condensed', Verdada, Arial, Helvetica, sans-serif; color:#333; line-height:1.2em; margin:0 0 20px; }
h1 { font-size:3em; } 
h2 { font-size:2em; } 
h3 { font-size:1.8em; } 
h4 { font-size:1.3em; } 
h5 { font-size:1.2em; } 
h6 { font-size:1.1em; }

/* HYPERLINKS */
a:link, a:visited { color:#258; text-decoration:none; }
a:hover { color:#3366AA; text-decoration:underline; }

/* GENERAL TYPOGRAPHY */
p, address { margin-bottom:1.6em; }
span, div, p, dl, td, th, ul, ol, blockquote { }

/* LISTS */
ul li { list-style:circle; margin:0 0 5px 20px; list-style-position:outside; }
ol li { list-style:decimal; margin:0 0 5px 20px; list-style-position:outside; }
ol ol li { list-style:upper-alpha; }
ol ol ol li { list-style:lower-roman; }
ol ol ol ol li { list-style:lower-alpha; }
ul ul, ol ol, ul ol, ol ul { margin-bottom:0; }
ul, ol, dd, pre, hr { margin-bottom:24px; }
ul ul, ol ol, ul ol, ol ul { margin-bottom:0; }

dl { margin:0 0 24px 0; }
dt { font-weight:bold; }
dd { margin-bottom:18px; }
strong, b { font-weight:bold; }
cite, em, i { border:none; font-style:italic; }
big { font-size:131.25%; }
ins { background:#ffc; border:none; }
del { text-decoration:line-through; }

/* ADDRESSES */
address { font-size:0.9em; line-height:1.2em; }

/* CITATIONS */
blockquote { display:block; font-style:italic; padding:0 5%; margin:25px 0; }
blockquote cite, blockquote em, blockquote i { font-style:normal; }

/* PREDEFINED TEXT */
pre { font-family:Courier, monospace; background:#f5f5f5; border:1px solid #ccc; color:#222; line-height:18px; margin-bottom:18px; padding:1.5em; display:block; overflow:auto; margin:25px 0; }

abbr, acronym { border-bottom:1px dotted #666; cursor:help; }
ins { text-decoration:none; }
sup, sub { font-size:0.7em; height:0; line-height:1; position:relative; vertical-align:baseline; }
sup { bottom:1ex; }
sub { top:.5ex; }
pre, kbd, tt, var { line-height:21px; }
code { font-size:1.05em; }

/* CODE */
code, code var { font-family:Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; }

/* TABLES */
table { border:1px solid #bbb; border-collapse:collapse; border-spacing:0; margin:0 0 24px; text-align:left; width:100%; }
tr th, thead th { border:none; color:#888; font-weight:bold; line-height:1.2em; padding:9px 24px; }
tr td { border:none; padding:6px 24px; }
tr th, thead th, tr th, thead th { background:#ddd; }

/* FORM FIELDS */
input, textarea { font-size:1em; }

/* HEADING LINE */
hr { background-color:#fff; border:0; border-top:1px solid #bbb; border-bottom:1px solid #fff; clear:both; height:0; margin:40px 0; }

/* INLINE IMAGES */
img { margin:0; max-width:100%; line-height:0; height:auto; }
.alignleft, img.alignleft { display:inline; float:left; margin-right:30px; margin-top:4px; }
.alignright, img.alignright { display:inline; float:right; margin-left:30px; margin-top:4px; }
.aligncenter, img.aligncenter { display:block; margin-left:auto; margin-right:auto; }
img.alignleft, img.alignright, img.aligncenter { margin-bottom:12px; }

/* IMAGE CAPTIONS */
.wp-caption { margin-bottom:20px; padding:5px 0; max-width:100%; text-align:center; background:url(images/shades/black_10.png); line-height:0em; }
.wp-caption .wp-caption-text{ }
.wp-caption img { margin:0; padding:0; max-width:100%; line-height:0em; }
.wp-caption p { margin:10px 0 10px; color:#666; line-height:1.2em; font-size:12px; }
.wp-smiley { margin:0; }

/* FORMS */
label { display:block; width:100%; padding:8px 0px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
input[type=text], input[type=password], input[type=input], 
input[type=tel], input[type=url], input[type=email], 
input[type=number], input[type=range], input[type=search], input[type=color], 
input[type=time], input[type=week], input[type=month], input[type=date], input[type=datetime], 
textarea, select { font-family:inherit; border:1px solid #ddd; padding:8px; margin:0 0 20px; width:100%; background:#f3f3f3; box-shadow:inset 0 1px 2px #bbb; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-appearance:none; }
input[type=submit] { width:auto; -webkit-appearance:none; }

/* MAIN THEME COLORS */
.sticky { }
.primary-color { color:#258; }
.primary-color-bg { background-color:#258; }
.secondary-color { color:#555; }
.secondary-color-bg { background-color:#555; }

/* SHORTCODE CUSTOM STYLING */

/* BUTTONS */
.button, .button:visited, input[type=submit] { border-radius:8px; }
.button-default, .button-default:visited, input[type=submit] { background:#258;
background:-moz-linear-gradient(top, #258 0%, #002356 100%);
background:-webkit-linear-gradient(top, #258 0%,#002356 100%); 
background:linear-gradient(to bottom, #258 0%,#002356 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#258', endColorstr='#002356',GradientType=0 );
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.5); border:none; box-shadow:none; }
.button-default:hover, input[type=submit]:hover { background:#258; }

/* --------------------------------------------------------------
2. LAYOUT
-------------------------------------------------------------- */

/* WRAPPERS */
.outer { overflow:hidden; width:100%; }
.wrapper { background:#fff; margin:0 auto; width:980px; margin:0 auto; max-width:980px; box-shadow:0 0 3px 1px rgba(0,0,0,0.5); -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.wrapper-margin { margin-top:50px; }
.container { padding:0 30px; margin:0 auto; max-width:980px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.clear { clear:both; width:100%; height:0; margin:0; padding:0; }

/* TOPMENU */
.topbar { display:block; color:#fff; background:url(images/shades/black_10.png); line-height:1; font-size:0.9em;margin:0 auto; overflow:hidden; width:100%;}
.topbar .topmenu  li a { color:#fff; text-decoration:underline;}


/* LANGUAGE SWITCHER */
.languages { float:right; padding-left:10px; }
.languages .language-item { display:inline-block; margin:12px 0 12px 10px; }
.languages img { margin-right:5px; }


/* HEADER */
.header { position:relative; width:100%; padding:30px 0; }
.header .logo { float:left; }
.header .logo a { display:block; line-height:1em; }
.header .title { display:block; line-height:1em; margin:0; }
.header .title a { display:inline; }
.header .title a:hover { text-decoration:none; }
.header .logo .description { display:none; text-transform:capitalize; letter-spacing:2px; }
.header .hidden { display:none; }
.header .subheader { float:right; text-align:right; padding:20px 0 0 20px; }


/* HOMEPAGE SLIDES */
.slider { padding:0; margin:0 0 0; position:relative; height:450px; text-align:center; -moz-transition:0.3s all; -webkit-transition:0.3s all; transition:0.3s all; }
.slider-slides { display:block; overflow:hidden; padding:0; margin:0; height:450px; border-radius:5px 5px 0 0; }
.slider-slides .slide { overflow:hidden; background-color:#AAA; position:relative; list-style:none; width:100%; height:450px; margin:0; padding:0; }
.slider-slides .container { position:relative; height:450px; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.4); }
.slider-slides .slide-content { overflow:hidden; margin:0 auto; }
.slider-slides .slide-textbox {text-align:left; overflow:hidden; position:absolute; margin:0; padding:20px; top:100px; left:100px; width:50%;}
.slider-slides .slide-right .slide-textbox {text-align:right; right:100px; left:auto; }
.slider-slides .slide-textbox .slide-title { font-size:3em;}
.slider-slides .slide-textbox p:last-child { margin-bottom:0; }
.slider-slides .slide-light{ color:#eee; }
.slider-slides .slide-light .slide-title{ color:#fff; text-shadow:0 -1px 0 #444; }
/* Slider Controls */
.slider-prev,
.slider-next,
.slider:hover .slider-prev,
.slider:hover .slider-next,
.slider:hover .slider-pages { opacity:1; }
.slider-prev,
.slider-next { position:absolute; width:50px; height:50px; font-size:20px; line-height:50px; margin-top:-25px; top:50%; text-align:center; color:#fff; z-index:999; cursor:pointer; }
.slider-prev { left:20px; top:50%; width:50px; height:50px; border-radius:50%;background:url(images/shades/white_50.png) repeat; }
.slider-prev:before { color:#555555; font-size:17px; font-family:'fontawesome'; content:'\f0d9'; }
.slider-next { right:20px; top:50%; width:50px; height:50px; border-radius:50%;background:url(images/shades/white_50.png) repeat;  }
.slider-next:before { color:#555555; font-size:17px; font-family:'fontawesome'; content:'\f0da'; }


/* PAGE BANNERS AND TITLES */
.pagetitle { overflow:hidden; position:relative; padding:0; margin:0; max-height:400px; }
.pagetitle .pagetitle-title { margin:0; padding:30px 30px 0; }
.pagetitle .pagetitle-image { width:100%; height:auto; }
.pagetitle .has-thumbnail { position:absolute; bottom:0; left:0; right:0; margin:0; padding:30px; color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,0.5) }


/* BREADCRUMBS */
.breadcrumb { margin:20px 0 0; }
.breadcrumb a { position:relative; padding-right:12px; margin-right:12px; border-right:1px solid #ddd; }
.breadcrumb a:first-child {  }
.breadcrumb a:hover {  }
.breadcrumb span { }


/* HOMEPAGE MINI FEATURES */
.minifeatures { margin:0; }
.minifeatures .feature { margin-bottom:40px; text-align:center;}
.minifeatures .feature .icon { float:left; font-family:'fontawesome'; text-align:center; width:50px; height:50px; font-size:25px; color:#fff; margin:0 20px 10px 0; line-height:50px; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; }
.minifeatures .feature img { line-height:0; max-width:75px; width:50%; height:auto; border-radius: 3px; }
.minifeatures .feature .feature-title { font-size:1.4em; margin-top:0.5em; }
.minifeatures .feature .feature-content { clear:both; }


/* PAGE CONTENT */
.main { overflow:hidden; padding:0; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.content { float:left; padding:0; margin:30px 0; width:65%;} 
.sidebar-left .content { float:right; margin:0 0 30px 5%; }
.content-wide { float:none; width:auto; }

/* SIDEBARS */
.sidebar { float:right; width:30%; margin:30px 0; padding:0; }
.sidebar ul { margin-bottom:0px; }
.widget { overflow:hidden; margin:0 0 30px; }


/* SIDE NAVIGATION */
.submenu { float:left; width:25%; padding:30px 0 30px 30px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

/* FOOTER SIDEBARS */
.subfooter { overflow:hidden; padding:30px 0 30px; color:#DDDDDD;}
.subfooter a, .subfooter a:link, .subfooter a:visited { color:#DDDDDD; }
.subfooter .widget .widget-title { color:#fff; text-shadow:0 -1px 0 #222;}
.subfooter .widget { float:left; width:100%; margin:0 4% 0 0; }
.subfooter .widget img{}


/* FOOTER */
.footer { display:block; background:url(images/shades/black_10.png); color:#999; overflow:hidden; padding:30px 0; clear:both; }
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 { color:#BBB; }
.footer a { color:#fff; }


/* --------------------------------------------------------------
3. NAVIGATION
-------------------------------------------------------------- */

/* TOP MENU */
.topmenu { float:right; }
.menu-top { overflow:hidden; float:left; margin:9px 0 8px; line-height:1em; font-size:12px; padding:0; }
.menu-top > ul { overflow:visible; margin:0;  }
/* Menu Elements */
.menu-top li { float:left; list-style:none; margin:0 15px 0 0; padding:0; }
.menu-top li:last-child { border-right:0; }
.menu-top li a { display:block; color:#fff; float:left; padding:0; }
.menu-top li a:hover,
.menu-top li:hover > a { text-decoration:underline; }
.menu-top .menu-top .current-menu-item > a { text-decoration:underline; }


/* MAIN MENU */
.menu-main { padding-top:5px; float:right; }
.menu-main { margin:0; }
.menu-main > ul { display:block; margin:0; padding:0; } /* Fix for extra wrapper in default menu markup */ 
/* Menu Elements */
.menu-main li { float:left; position:relative; margin:0px; padding:0px; list-style:none; }
.menu-main li a { display:block; float:left; text-decoration:none; font-family:'Roboto Condensed', Verdada, Arial, Helvetica, sans-serif; padding:5px 10px; margin:0; color:#fff; font-size:16px; text-transform:uppercase; border-radius:6px; -moz-transition:0.2s all; -webkit-transition:0.2s all; transition:0.2s all; }
.menu-main li a .menu-description { display:none; }
.menu-main li a:hover,
.menu-main li:hover > a { text-decoration:none; text-shadow:0 0 5px #fff; }
/* Current item highlight both normally and on hover */
.menu-main .current-menu-ancestor > a,.menu-main .current-menu-item > a { background:#fff; background:rgba(255, 255, 255, 0.9); color:#333; }
.menu-main .current_page_ancestor > a:hover,.menu-main .current-menu-item:hover > a { text-decoration:none; }
/* Children Elements */
.menu-main  ul, .menu-main  li, .menu-main  a { -moz-transition:0.4s all; -webkit-transition:0.4s all; transition:0.4s all; }
.menu-main li ul { visibility:hidden; overflow:hidden; width:0; margin:0px; position:absolute; background:#fff; top:98%; left:0px; opacity:0; z-index:9999; border:1px solid #ddd; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
.menu-main li ul li a { text-align:left; color:#555; padding:8px 15px; margin:0px; width:140px; font-size:12px; text-transform:capitalize; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; }
.menu-main li ul li a:hover { background:#eee; }
/* Children display on hover */
.menu-main li > ul { display:block; }
.menu-main li:hover > ul { visibility:visible; opacity:1; width:170px; }
/* Children indicator for parents */
.has-children, .has-children:hover > a { }
/* Additional Children */
.menu-main li ul ul { top:0px; left:100%; }

/* FOOTER MENU */
.footermenu { float:right; overflow:hidden;}
.menu-footer { font-size:12px;  margin:0; padding:0; float:right; }
.menu-footer > ul { overflow:visible; margin:0; padding:0; }
/* Menu Elements */
.menu-footer li { float:left; position:relative; margin:0px; list-style:none; }
.menu-footer li a { display:block; float:left; margin:0px 0px 0px 20px; padding:0px; color:#fff; text-decoration:none; }
.menu-footer li a:hover,
.menu-footer li:hover > a { }
.menu-footer .current_page_item > a, 
.menu-footer .current-menu-item > a { text-decoration:underline; }

/* SUBMENU NAVIGATION */
.menu-sub { margin:0 0 30px; padding:0; }
.menu-sub li { position:relative; list-style:none; margin:0; }
.menu-sub li:before { display:block; position:absolute; top:50%; left:10px; list-style:none;  color:#999; margin-top:-7px; line-height:1; }
.sidebar-left .menu-sub li:before { left:auto; right:10px;}
.sidebar-left .menu-sub li a { padding:8px 30px 8px 10px; }
.menu-sub li a { display:block; padding:8px 10px 8px 30px; }
.menu-sub li:first-child a { border:none; }
.menu-sub li a:hover { text-decoration:none; color:#5588DD; }
.menu-sub .current_page_item, .menu-sub .current-cat { border-bottom:0; }
.menu-sub .current_page_item a, .menu-sub .current-cat a { background-color:#666666; color:#FFFFFF; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;}
.menu-sub .current_page_item a:hover, .menu-sub .current-cat a:hover{ color:#FFFFFF; }
.menu-sub li ul { display:none; font-size:1em; }

/* PORTFOLIO NAVIGATION */
.menu-portfolio { overflow:hidden; margin:0 0 30px; padding:0; text-align:left;}
.menu-portfolio li { list-style:none; display:inline-block; padding:0; margin:0; }
.menu-portfolio li a { background:none repeat scroll 0 0 #DDDDDD; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; color:#666666; display:block; padding:8px 10px; text-decoration:none; }
.menu-portfolio li a:hover { background:url(images/shades/black_5.png); text-decoration:none; color:#666666; }
.menu-portfolio .back a { position:relative; padding:8px 15px; margin-right:10px; }
.menu-portfolio .back a:before { display:block; position:absolute; top:50%; left:0; list-style:none; font-family:'fontawesome'; content:'\f104'; font-size:14px; color:#999; margin-top:-7px; line-height:1; }
.menu-portfolio .current_page_item, .menu-portfolio .current-cat { border-bottom:0; }
.menu-portfolio .current_page_item a, .menu-portfolio .current-cat a { color:#fff;  background:#333; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
.menu-portfolio li ul { display:none; font-size:1em; }

.portfoliomenu { float:right; text-align:center; }
.portfoliomenu .icon { display:inline-block; background:#333; width:30px; height:30px; line-height:30px; color:#fff; text-align:center; margin:10px 0 0 5px; }
.portfoliomenu .icon:hover { background:#555; text-decoration:none; }

/* NEXT/PREV POST NAVIGATION */
.navigation { width:100%; margin:0; padding:20px 0; float:left; }
.navigation .prev { float:left; width:50%; text-align:right; }
.navigation .next { float:right; width:50%;  }
.navigation a:link, .navigation a:visited { display:inline-block; padding:6px 15px; margin:0 3px; font-size:14px; background:#ddd; background:-moz-linear-gradient(top, #f5f5f5 0%, #cccccc 100%); background:-webkit-linear-gradient(top, #f5f5f5 0%,#cccccc 100%); background:linear-gradient(to bottom, #f5f5f5 0%,#cccccc 100%); border:1px solid #ccc; border-bottom:1px solid #aaa; color:#444; text-shadow:0 1px 0 #f2f2f2; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
.navigation a:active,
.navigation a:hover { background:#fff; }


/* NUMBERED PAGINATION */
.page-link { clear:both; }
.pagination { overflow:hidden; margin:0 0 30px; }
.pagination span, .pagination a { display:inline-block; color:#777; margin:0 3px; padding:5px 10px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
.pagination span { color:#fff; background:url(images/shades/black_10.png); background-color:#999; box-shadow:inset 0 1px 2px #999;}
.pagination a:hover { background:#eee; text-decoration:none; }
.pagination .current { }


/* IN-POST PAGINATION */
.page-link { clear:both; }
.postpagination { overflow:hidden; margin:10px 0px 30px; float:left; background:#ddd; background:-moz-linear-gradient(top, #f5f5f5 0%, #cccccc 100%); background:-webkit-linear-gradient(top, #f5f5f5 0%,#cccccc 100%); background:linear-gradient(to bottom, #f5f5f5 0%,#cccccc 100%); border:1px solid #ccc; border-bottom:1px solid #aaa; color:#444; text-shadow:0 1px 0 #f2f2f2; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
.postpagination span { display:block; float:left; color:#777; background:#ccc; padding:5px 10px; font-size:14px; }
.postpagination a span { display:block; float:left; padding:5px 10px; font-size:14px; background:none; }
.postpagination a span:hover { background:#eee; text-decoration:none; }
.postpagination .current { text-shadow:0 1px 0 #fff;  }


/* --------------------------------------------------------------
4. POSTS & PAGES
-------------------------------------------------------------- */

/* POSTS */
.post  { margin:0 0 30px; overflow:hidden; }
.post .post-image { float:left; margin:0 20px 20px 0; line-height:0em; height:auto; width:25%;}
.post .post-image img { display:block; margin:0; line-height:0em; height:auto; border-radius: 3px; }
.post .post-title { padding:0; margin:0 0 10px; }
.post .post-title a { color:inherit; }
.post .post-byline { font-size:0.9em; }
.post .post-byline div { margin-bottom:10px; display:inline-block; padding:0 10px 0 0;}
.post .post-byline .post-date{ text-transform:capitalize; }
.post .post-byline .post-author{ border-left:1px solid #ddd; padding:0 10px;}
.post .post-byline .post-category{ border-left:1px solid #ddd; padding:0 10px; }
.post .post-tags { display:block; margin:0 0 30px; padding:0; }
.post .post-tags li { display:inline-block; list-style:none; padding:0 5px; margin:0; border-radius:3px; }
.post .post-tags li a { color:#fff; }
.post .post-content { padding:0;}
.post .post-content p:last-child { margin-bottom:0; }
.post .separator { clear:both; width:100%; }
.post .readmore { margin:0; font-size:11px;}


/* SPECIAL POST FORMATS */
.video { margin:30px 0; position:relative; padding-bottom:56.25%; padding-top:25px; height:0; }
.video iframe { position:absolute; top:0; left:0; width:100%; height:100%; }


/* INDIVIDUAL PORTFOLIO ITEMS */
.cpo_portfolio .portfolio-media { margin:0 0 20px; }
.cpo_portfolio .portfolio-item-image { height:auto; line-height:0; max-height:500px; overflow:hidden; position:relative; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.4); }
.cpo_portfolio .portfolio-item-image img{ width:100%; }
.cpo_portfolio .portfolio-item-title{ color:#fff; position:absolute; left:3%; bottom:0; width: 60%; text-shadow:0 -1px 0 #222222;}
.cpo_portfolio .portfolio-item-description {bottom:0; color:#FFFFFF; font-size:16px; line-height:1.5em; margin:0 0 10px; padding:30px 30px 0; position:absolute; right:0; text-align:right; text-shadow:0 -1px 0 #222222; width:35%;}
.cpo_portfolio .portfolio-details { padding-left:5%; margin-bottom:30px; border-left:1px solid #ddd; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.cpo_portfolio .portfolio-details div { margin:0 0 10px; padding-left:30px; position:relative; }
.cpo_portfolio .portfolio-details .portfolio-icon { position:absolute; display:block; width:15px; margin-top:1px; font-size:1.3em; text-align:center; left:0; top:0.1em; }
.cpo_portfolio .portfolio-content { }


/* GALLERIES IN POSTS AND PORTFOLIOS */
.gallery { margin:0; position:relative; padding:0; overflow:hidden;  }
.gallery .item { float:left; overflow:hidden; list-style:none; width:32%; text-align:center; margin:0 2% 2% 0; padding:0; }
.gallery .item_last { margin:0 0 2%; }
.gallery .item img { line-height:0; width:100%; height:auto; }
.gallery .item .content { position:absolute; width:60%; margin:30px 15%; padding:20px 5%; bottom:0; background:url(images/shades/black_10.png); color:#fff; }
.gallery .separator { clear:both; }


/* AUTHOR BIOS */
.author-info { overflow:hidden; padding:20px; background:#eee; }
.author-info .author-image { float:left; display:block; margin:0 20px 0 0; }
.author-info .author-image img { display:block; line-height:0; margin:0; }
.author-info .author-name { margin:0 0 10px; }
.author-info .author-content { margin:0; padding:10px 10px;}
.author-info .readmore { float:right; margin:20px 0 0; }


/* PORTFOLIO SHOWCASE */
.portfolio { margin:0; clear:both; padding:0; }
.portfolio-heading { text-align:center; margin-bottom:30px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.portfolio-content { }
.portfolio-item { display:block; position:relative; text-align:center; list-style:none; padding:0; margin:0 0 30px; -moz-transition:0.4s all; -webkit-transition:0.4s all; transition:0.4s all; }
.portfolio-item-image { display:block; position:relative; }
.portfolio-item-image img { display:block; max-width:100%; margin:0 auto; width:100%; height:auto; line-height:0; border-radius:2px;}
.portfolio-item .portfolio-item-title { padding:5px 10px; margin:0 10px; font-size:1.4em; -moz-transition:0.4s all; -webkit-transition:0.4s all; transition:0.4s all; }
.portfolio-item .portfolio-item-overlay { opacity:0; position:absolute; top:0; z-index:9999; width:100%; top:0; bottom:0; -moz-transition:0.4s all; -webkit-transition:0.4s all; transition:0.4s all; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;}
.portfolio-item .portfolio-item-icon { display:block; position:absolute; top:10%; left:50%; font-size:32px; line-height:60px; color:#fff; margin:-30px 0 0 -30px; width:60px; height:60px; z-index:99999; -moz-transition:0.3s all; -webkit-transition:0.3s all; transition:0.3s all; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
.portfolio-item a:hover { text-decoration:none; }
.portfolio-item:hover .portfolio-item-overlay { opacity:0.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
.portfolio-item:hover .portfolio-item-icon { top:50%; opacity:1; text-shadow:0 0 10px #fff; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.portfolio-item .readmore { display:block; }


/* 404 PAGE */
.notfound { padding:100px;}
.notfound-image { font-size:200px; font-weight:bold; text-align:right; line-height:1; margin-left:28%;}
.notfound-title { }
.notfound-content {margin-left:24%; width:65%;}


/* SEARCH PAGE */
.search-result { margin:0 0 30px; }
.search-form { margin:0 0 30px; }
.search-title { margin:0; }
.search-byline { font-size:0.8em; }
.search-content p { margin:0; }


/* CONTACT FORM */
.contact-form  { width:100% }
.test { left:-9999px; position:absolute; top:-9999px; }
.field { overflow:hidden; margin:0 0 5px; }
.field label{ float:left; width:10%; margin:0 15% 0 0; }
.field input[type=text] { width:50%; background:none; box-shadow:0 0 0; border:1px solid #BBBBBB; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.field textarea{ height:200px; max-height:600px; min-height:200px; resize:vertical; width:70%; background:none; box-shadow:0 0 0; border:1px solid #BBBBBB; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.field .error{ display:block; margin-left:20%; color:#F30; font-weight:bold; font-size:0.9em; }
.field input[type=submit]{ margin:0; }


/* --------------------------------------------------------------
5. COMMENTS
-------------------------------------------------------------- */


/* COMMENTS */
.comments { clear:left; margin:0 0 30px; }
.commentlist { list-style:none; padding:0; margin:10px 0 30px 0; }
.commentlist-title{ margin:20px 0;}
.comment { overflow:hidden; list-style:none;  margin:0 0 0px 0px; padding:0; }
.comment .comment-avatar { float:left; border:5px solid #bbb; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; display:block; overflow:hidden;}
.comment .comment-avatar img { display:block; line-height:0; }
.comment .comment-title { padding:0; margin-left:100px; }
.comment .comment-author { font-size:1.3em; }
.comment .comment-date { display:block; width:220px; font-size:0.9em; }
.comment .comment-approval { display:block; background:#eee; padding:0 10px 0; margin:0; }
.comment .comment-content { margin:10px 0 0 100px; padding:0; float:none; }
.comment .comment-options { padding:0; overflow:hidden; margin-bottom:20px; }
.comment .comment-options a { display:block; float:right; margin-left:10px; font-size:0.9em; }
/* Contents Styling for Comment Body */
.comment .comment-content ul, .comment .comment-content ol { margin-bottom:18px; }
.comment .comment-content p:last-child { margin-bottom:6px; }
.comment .comment-content blockquote p:last-child { margin-bottom:24px; }
/* Nested Comments */
.comment .children { list-style:none; margin:0 0 0 50px; }
.nopassword, .nocomments { margin:20px 0; padding:0; }
/* Pingbacks & Trackbacks */
.comments ol.pinglist { margin:0; }
.comments .pingback { list-style:none; margin:0 0 10px 0; }
.comments .pingback .url { font-style:italic; }


/* COMMENT FORM*/
.comment-respond { margin:0 0 30px; overflow:hidden; position:relative; }
.comment-respond p { display:block; padding:0; margin:0 0 0; }
.children .comment-respond { margin:0 48px 0 0; }
/* Fields */
.comment-respond .comment-notes { display:none; }
.comment-respond .required { display:none; color:#ff4b33; font-weight:bold; }
.comment-respond label{ display:block; float:left; padding:8px 30px 8px 0; width:40%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.comment-respond input[type=text] { width:55%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; background:none; box-shadow:0 0 0; border:1px solid #BBBBBB; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.comment-respond textarea{ height:200px; width:95%; max-height:400px; min-height:200px; resize:vertical; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; background:none; box-shadow:0 0 0; border:1px solid #BBBBBB; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
/* Nested Form */
#cancel-comment-reply-link { display:block; font-size:0.9em; font-weight:normal; line-height:18px; }
/* Allowed Tags */
.comment-respond .form-allowed-tags { display:block; color:#888; font-size:0.9em;}
.comment-respond .form-allowed-tags code { display:block; font-size:12px; }
.comment-respond .form-submit {  }

/* --------------------------------------------------------------
6. WIDGETS
Includes all widget-related elements
-------------------------------------------------------------- */

/* GENERAL WIDGET STYLING */
.widget ul { margin-bottom:0; }
.widget li { list-style:none; margin-left:0;  }
.widget li ul { margin-left:20px; margin-top:5px; }

/* SEARCH WIDGET STYLING */
.widget_search input[type="text"] { border:3px solid #aaa; background:#fff; box-shadow:none; border-radius:6px; }

/* CPOTHEMES FLICKR WIDGET */
.cpotheme-flickr { overflow:hidden; }
.cpotheme-flickr a { display:block; line-height:0; }
.cpotheme-flickr .flickr_badge_image { width:28%; float:left; overflow:hidden; margin:0px 5% 5% 0px; border:3px solid #fff; border-radius:5px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }

/* CPOTHEMES LATESTS POSTS*/
.cpotheme-recent .recent-item .recent-image{ width:50px; }
.cpotheme-recent .recent-item img { border:3px solid #fff; border-radius:5px; }
.cpotheme-recent .recent-item .recent-title  { text-decoration:underline;}

/* --------------------------------------------------------------
7. EXTERNAL RESOURCES
Includes styles for additional libraries and resources
-------------------------------------------------------------- */




/* TSO REFORMAS OVERRIDES */

/* =========================================================
   CHILD THEME OVERRIDES
   Amplía ancho, mejora layout, lightbox moderno, fixes WP 6.9
   ========================================================= */

/* ---------------------------------------------------------
   1. WRAPPERS - Ampliar ancho de 980px a 1280px
   --------------------------------------------------------- */

.outer { overflow: hidden; width: 100%; }

.wrapper {
    background: #fff;
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
    box-shadow: 0 0 6px 2px rgba(0,0,0,0.4);
    border-radius: 0 0 5px 5px;
}

.container {
    padding: 0 40px;
    margin: 0 auto;
    max-width: 1280px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

/* ---------------------------------------------------------
   2. HEADER - Logo gran a l'esquerra, menú a la dreta
   --------------------------------------------------------- */

/* Fons vermell que ocupa tot l'ample */
#header,
.header {
    position: relative;
    width: 100%;
    padding: 18px 0;
    background: #cc0000;
    overflow: visible;
    /* Reset del tema pare */
    display: block;
}

/* Container del header en fila horitzontal */
.header .container {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 20px;
}

/* ---- LOGO ---- */
.header #logo,
.header .logo {
    float: none !important;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* Imatge del logo */
.header .logo a.site-logo img,
.header .logo .site-logo img,
.header #logo a img {
    display: block;
    height: 70px !important;
    width: auto !important;
    max-height: 70px !important;
    max-width: none !important;
}

/* Custom logo de WordPress (si s'usa) */
.header .custom-logo-link img.custom-logo {
    height: 70px !important;
    width: auto !important;
    max-height: 70px !important;
}

/* Títol del lloc (text) - ocult si hi ha logo imatge */
.header .title,
.header h1.title,
.header .site-title {
    color: #fff;
    font-size: 2em;
    margin: 0;
    line-height: 1.1;
}
.header .title a,
.header .site-title a {
    color: #fff;
    text-decoration: none;
}
.header .hidden { display: none !important; }

/* ---- MENÚ PRINCIPAL ---- */
/* El wrapper del menú a la dreta */
.header .menu-main,
#navigation .menu-main,
nav.menu-main {
    float: none !important;
    flex: 1 1 auto;
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    padding-top: 0;
    margin: 0;
}

/* La llista d'ítems */
.menu-main ul,
.menu-main > ul {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
}

/* Cada ítem del menú */
.menu-main li {
    float: none !important;
    position: relative;
    margin: 0;
    padding: 0;
}

/* Link de cada ítem */
.menu-main li a {
    display: block !important;
    float: none !important;
    font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #fff !important;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 5px;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
    line-height: 1.3;
}

/* Hover */
.menu-main li a:hover,
.menu-main li:hover > a {
    background: rgba(255,255,255,0.18);
    text-decoration: none;
    text-shadow: none;
    color: #fff !important;
}

/* Ítem actiu (pàgina actual) - fons blanc, text fosc */
.menu-main .current-menu-item > a,
.menu-main .current-menu-ancestor > a,
.menu-main .current_page_item > a,
.menu-main .current_page_ancestor > a {
    background: #fff !important;
    color: #333 !important;
    border-radius: 5px;
}
.menu-main .current-menu-item > a:hover,
.menu-main .current_page_item > a:hover {
    background: #f0f0f0 !important;
    color: #333 !important;
    text-decoration: none;
}

/* Submenú desplegable */
.menu-main li ul {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 6px 0;
}
.menu-main li:hover > ul {
    visibility: visible;
    opacity: 1;
    width: auto;
    min-width: 180px;
    overflow: visible;
}
.menu-main li ul li { float: none !important; }
.menu-main li ul li a {
    color: #444 !important;
    padding: 8px 16px;
    font-size: 13px;
    text-transform: none;
    border-radius: 0;
    white-space: nowrap;
    background: transparent !important;
}
.menu-main li ul li a:hover {
    background: #f5f5f5 !important;
    color: #c00 !important;
}

/* Topbar - mínima o oculta si no s'usa */
.topbar {
    background: rgba(0,0,0,0.18);
    width: 100%;
    overflow: hidden;
    min-height: 0;
}
.topbar .container { padding-top: 0; padding-bottom: 0; }
/* Si el topbar és buit, amagar */
.topbar:empty { display: none; }

/* El tema pare afegeix un <div class="clear"> dins el container del header
   que trenca el layout flex - el neutralitzem */
.header .container .clear,
.header .container > .clear {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ---------------------------------------------------------
   3. SLIDER - Más alto para pantallas grandes
   --------------------------------------------------------- */

.slider,
.slider-slides,
.slider-slides .slide,
.slider-slides .container { height: 520px; }

@media (max-width: 900px) {
    .slider,
    .slider-slides,
    .slider-slides .slide,
    .slider-slides .container { height: 320px; }
}

@media (max-width: 600px) {
    .slider,
    .slider-slides,
    .slider-slides .slide,
    .slider-slides .container { height: 220px; }
    .slider-slides .slide-textbox { top: 10px; left: 10px; width: 85%; padding: 10px; }
    .slider-slides .slide-textbox .slide-title { font-size: 1.4em; }
}

/* ---------------------------------------------------------
   4. PORTFOLIO GRID - Mejorado para imágenes de obras
   --------------------------------------------------------- */

/* Grid de portfolio más amplio */
#portfolio .portfolio-items,
.portfolio-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    align-items: stretch;
}

#portfolio .portfolio-items .column,
.portfolio-items .column.col4 {
    width: calc(25% - 15px) !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Imatge del portfolio: alçada fixa per alinear tots els quadrats */
.portfolio-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.portfolio-item-image {
    flex: 1;
}
.portfolio-item-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

@media (max-width: 1024px) {
    #portfolio .portfolio-items .column,
    .portfolio-items .column.col4 {
        width: calc(33.333% - 14px) !important;
    }
}
@media (max-width: 768px) {
    #portfolio .portfolio-items .column,
    .portfolio-items .column.col4 {
        width: calc(50% - 10px) !important;
    }
}
@media (max-width: 480px) {
    #portfolio .portfolio-items .column,
    .portfolio-items .column.col4 {
        width: 100% !important;
    }
}

/* Imagen de portfolio: siempre visible, buen aspecto */
.portfolio-item {
    margin: 0 0 0 !important;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    background: #f0f0f0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.portfolio-item:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    transform: translateY(-2px);
}

.portfolio-item-image {
    display: block;
    position: relative;
    flex: 1;
    overflow: hidden;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: #ddd;
}

.portfolio-item-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.portfolio-item:hover .portfolio-item-image img {
    transform: scale(1.05);
    height: 200px;
    object-fit: cover;
}

/* Overlay mejorado */
.portfolio-item-overlay {
    opacity: 0 !important;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(180,0,0,0.7) !important;
    transition: opacity 0.35s ease !important;
    z-index: 2;
    border-radius: 0;
}
.portfolio-item:hover .portfolio-item-overlay {
    opacity: 0.75 !important;
}

.portfolio-item-icon {
    position: absolute;
    top: 50% !important;
    left: 50%;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 28px;
    color: #fff;
    margin: -30px 0 0 -30px;
    z-index: 3;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    text-align: center;
}
.portfolio-item:hover .portfolio-item-icon {
    opacity: 1 !important;
}

/* Botón de lightbox en imágenes del portfolio */
.portfolio-item .lightbox-btn {
    display: block;
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 12px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease;
    text-decoration: none;
    line-height: 1.4;
}
.portfolio-item:hover .lightbox-btn { opacity: 1; }

/* ---------------------------------------------------------
   5. MINI FEATURES (cuadros de servicio en home)
   --------------------------------------------------------- */

#minifeatures {
    padding: 30px 0;
}

#minifeatures .column.col4 {
    transition: transform 0.25s;
}
#minifeatures .column.col4:hover {
    transform: translateY(-4px);
}

.minifeatures .feature img {
    max-width: 100%;
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.minifeatures .feature .feature-title {
    font-size: 1.1em;
    margin-top: 10px;
    color: #222;
    font-weight: 700;
}

/* ---------------------------------------------------------
   6. CONTENT AREA - Más ancho
   --------------------------------------------------------- */

.content {
    float: left;
    padding: 0;
    margin: 30px 0;
    width: 67%;
}

.sidebar { width: 28%; }

/* Wide content */
.content-wide { float: none; width: auto; }

/* ---------------------------------------------------------
   7. IMÁGENES EN CONTENIDO - Visibilidad máxima
   --------------------------------------------------------- */

/* Todas las imágenes del contenido son clickables al lightbox */
.entry img,
.portfolio-content img,
.post-content img {
    cursor: zoom-in;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
    border-radius: 3px;
}
.entry img:hover,
.portfolio-content img:hover {
    opacity: 0.92;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* =============================================
   GALERIA DE WORDPRESS - Compatible amb totes les versions
   Gestiona: figure.gallery-item > div.gallery-icon > img
   I: .gallery-item directament amb img
   ============================================= */
.gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 0 0 24px !important;
    align-items: center !important;
    /* Netejar el float del tema pare */
    float: none !important;
    clear: both;
    width: 100% !important;
}

/* Reset del tema pare que usa float en gallery-item */
.gallery-item {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    overflow: visible !important;
    background: transparent !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Amplada per nombre de columnes */
.gallery-columns-1 .gallery-item  { flex-basis: 100% !important; }
.gallery-columns-2 .gallery-item  { flex-basis: calc(50% - 6px) !important; }
.gallery-columns-3 .gallery-item  { flex-basis: calc(33.33% - 8px) !important; }
.gallery-columns-4 .gallery-item  { flex-basis: calc(25% - 9px) !important; }
.gallery-columns-5 .gallery-item  { flex-basis: calc(20% - 10px) !important; }
.gallery-columns-6 .gallery-item  { flex-basis: calc(16.66% - 10px) !important; }
.gallery-columns-7 .gallery-item  { flex-basis: calc(14.28% - 10px) !important; }
.gallery-columns-8 .gallery-item  { flex-basis: calc(12.5% - 10px) !important; }
.gallery-columns-9 .gallery-item  { flex-basis: calc(11.11% - 11px) !important; }

/* ---- gallery-item: VERTICAL (imatge dalt, títol a sota) ---- */
.gallery-item {
    flex-direction: column !important;  /* <- FIX clau: evita que caption vagi al costat */
    align-items: center !important;
    justify-content: flex-start !important;
}

/* El div.gallery-icon wrapper (generat per WP en galeries clàssiques) */
.gallery-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    width: 100% !important;
    flex: 0 0 auto;
}

/* La imatge: NO estirar, centrar, respectar proporcions originals */
.gallery-item img,
.gallery-icon img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    transition: opacity 0.2s ease;
    max-height: 140px;    /* logo/miniatura per defecte */
}
.gallery-item:hover img,
.gallery-icon:hover img { opacity: 0.82; }

/* Peu de foto (figcaption) — sempre a sota de la imatge */
.gallery-caption,
.gallery-item figcaption,
figcaption.wp-element-caption,
figcaption.gallery-caption {
    font-size: 0.78em;
    color: #666;
    text-align: center;
    padding: 4px 6px 6px;
    width: 100%;
    flex: 0 0 auto;
    line-height: 1.3;
}

/* Galeries de fotos grans (1-3 columnes) - alçada major */
.gallery-columns-1 .gallery-item img,
.gallery-columns-2 .gallery-item img,
.gallery-columns-3 .gallery-item img {
    max-height: 280px;
}

/* Galeries de fotos de projectes (4+ columnes) */
.gallery-columns-4 .gallery-item img,
.gallery-columns-5 .gallery-item img {
    max-height: 180px;
}

/* Responsive galeria */
@media (max-width: 768px) {
    .gallery-columns-4 .gallery-item,
    .gallery-columns-5 .gallery-item,
    .gallery-columns-6 .gallery-item,
    .gallery-columns-7 .gallery-item,
    .gallery-columns-8 .gallery-item,
    .gallery-columns-9 .gallery-item { flex-basis: calc(33.33% - 8px) !important; }
}
@media (max-width: 480px) {
    .gallery-columns-3 .gallery-item,
    .gallery-columns-4 .gallery-item,
    .gallery-columns-5 .gallery-item,
    .gallery-columns-6 .gallery-item,
    .gallery-columns-7 .gallery-item,
    .gallery-columns-8 .gallery-item,
    .gallery-columns-9 .gallery-item { flex-basis: calc(50% - 6px) !important; }
    .gallery-columns-1 .gallery-item,
    .gallery-columns-2 .gallery-item { flex-basis: 100% !important; }
}

/* ---------------------------------------------------------
   8. FOOTER
   --------------------------------------------------------- */

/* Footer base - aplicat per defecte (el customizer ho sobreescriu amb !important) */
.footer {
    background-color: #cc0000 !important;
    background-image: none !important;
    color: rgba(255,255,255,0.85) !important;
    padding: 16px 0 20px;
    border-top: 1px solid rgba(255,255,255,0.2) !important;
}
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 { color: #ffffff !important; }
.footer a, .footer a:link, .footer a:visited { color: rgba(255,255,255,0.85) !important; }
.footer a:hover { color: #ffffff !important; }

.footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    text-align: center;
}

.subfooter {
    background-color: #cc0000 !important;
    background-image: none !important;
    color: #ffffff !important;
    padding: 30px 0 0 0;
    font-size: 1.05em;
    border-bottom: none !important;
}
.subfooter a, .subfooter a:link, .subfooter a:visited { color: rgba(255,255,255,0.85) !important; }
.subfooter a:hover { color: #ffffff !important; text-decoration: underline; }
.subfooter .widget { float: none !important; width: 100% !important; margin: 0 0 20px !important; text-align: center; }

/* ---------------------------------------------------------
   9. MENÚ MÒBIL (toggle hamburguesa)
   --------------------------------------------------------- */

#menu_toggle,
#ry-menu-toggle {
    display: none;
    cursor: pointer;
    padding: 8px 12px;
    font-size: 22px;
    color: #fff;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    line-height: 1;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------
   10. RESPONSIVE - Mòbil
   --------------------------------------------------------- */

@media (max-width: 1300px) {
    .wrapper { max-width: 100%; border-radius: 0; }
    .container { padding: 0 20px; }
}

@media (max-width: 960px) {
    /* Reduir lletra del menú lleugerament */
    .menu-main li a { font-size: 15px; padding: 8px 12px; }
}

/* ---- MÒBIL: Hamburguesa i menú desplegable ---- */
@media (max-width: 800px) {
    /* Header: logo esquerra + toggle dreta, menú a sota */
    .header .container {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 0;
        padding-bottom: 0;
    }

    .header .logo { order: 1; flex: 1 1 auto; }
    #ry-menu-toggle, #menu_toggle {
        order: 2;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    /* Menú SEMPRE OCULT en mòbil fins que s'activi */
    .header .menu-main,
    #navigation .menu-main,
    nav.menu-main {
        order: 3;
        width: 100%;
        display: none !important;
        flex-direction: column;
        justify-content: flex-start;
        padding: 6px 0 10px;
    }

    /* Quan el JS afegeix .ry-menu-open al body */
    body.ry-menu-open .header .menu-main,
    body.ry-menu-open #navigation .menu-main,
    body.ry-menu-open nav.menu-main,
    .header .menu-main.ry-open,
    #navigation .menu-main.ry-open,
    nav.menu-main.ry-open {
        display: flex !important;
    }

    /* Llista d'ítems en columna */
    .menu-main ul,
    .menu-main > ul {
        flex-direction: column !important;
        width: 100%;
        gap: 2px;
        padding: 4px 0;
        background: rgba(0,0,0,0.12);
        border-radius: 4px;
    }
    .menu-main li { width: 100%; float: none !important; }
    .menu-main li a {
        padding: 12px 20px !important;
        border-radius: 3px;
        font-size: 15px !important;
        font-weight: 600;
        letter-spacing: 0.5px;
        white-space: normal !important;
    }

    /* Submenú en mòbil: estàtic */
    .menu-main li ul {
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
        box-shadow: none;
        border: none;
        background: rgba(0,0,0,0.08);
        overflow: visible !important;
    }
    .menu-main li ul li a {
        color: #fff !important;
        padding: 8px 20px 8px 36px !important;
        font-size: 13px !important;
    }

    /* Contingut */
    .content { width: 100%; float: none; margin: 20px 0; }
    .sidebar { width: 100%; float: none; margin: 0 0 20px; }
    .submenu { width: 100%; float: none; padding: 20px; }

    /* Footer widgets apilats */
    .subfooter .widget { width: 100%; margin: 0 0 20px; }
}

@media (max-width: 600px) {
    h1 { font-size: 2em; }
    h2 { font-size: 1.6em; }
    .topbar { font-size: 0.75em; }
    .notfound { padding: 40px 20px; }
    .notfound-image { font-size: 100px; }
    .notfound-content { margin-left: 0; width: 100%; }

    /* Logo més petit en mòbil petit */
    .header .logo a.site-logo img,
    .header #logo a img { height: 50px !important; }
}

/* Touch devices - ocultar overlay i icona de lupa */
@media (hover: none) {
    .portfolio-item-overlay { opacity: 0 !important; }
    .portfolio-item-icon { opacity: 0 !important; display: none !important; }
    .portfolio-item .lightbox-btn { opacity: 0 !important; display: none !important; }
}

/* ---------------------------------------------------------
   11. ACCESSIBILITY - Foco visible
   --------------------------------------------------------- */

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid #c00;
    outline-offset: 2px;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #c00;
    color: #fff;
    padding: 8px 16px;
    z-index: 99999;
    transition: top 0.2s;
    font-size: 14px;
}
.skip-link:focus { top: 0; color: #fff; text-decoration: none; }

/* ---------------------------------------------------------
   12. LIGHTBOX MODERNO (reemplaza prettyPhoto)
   --------------------------------------------------------- */

/* Overlay */
.ry-lb-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.92);
    z-index: 99999;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    cursor: pointer;
}
.ry-lb-overlay.active { display: flex; align-items: center; justify-content: center; }

/* Contenedor principal */
.ry-lb-wrap {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
    animation: ry-lb-fade-in 0.25s ease;
}

@keyframes ry-lb-fade-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

/* Imagen */
.ry-lb-img {
    display: block;
    max-width: 92vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.7);
    user-select: none;
    -webkit-user-drag: none;
}

/* Caption */
.ry-lb-caption {
    color: #eee;
    font-size: 0.9em;
    margin-top: 12px;
    text-align: center;
    max-width: 80vw;
    line-height: 1.5;
    min-height: 20px;
}

/* Contador */
.ry-lb-counter {
    position: absolute;
    top: -32px;
    left: 0;
    color: rgba(255,255,255,0.6);
    font-size: 0.8em;
}

/* Botón cerrar */
.ry-lb-close {
    position: fixed;
    top: 16px;
    right: 20px;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    color: #fff;
    width: 42px;
    height: 42px;
    font-size: 22px;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
    z-index: 100001;
    transition: background 0.2s;
    user-select: none;
}
.ry-lb-close:hover { background: rgba(200,0,0,0.7); border-color: rgba(200,0,0,0.8); }

/* Flechas navegación */
.ry-lb-prev,
.ry-lb-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.25);
    color: #fff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 48px;
    text-align: center;
    cursor: pointer;
    z-index: 100001;
    transition: background 0.2s, transform 0.2s;
    user-select: none;
}
.ry-lb-prev { left: 16px; }
.ry-lb-next { right: 16px; }
.ry-lb-prev:hover { background: rgba(200,0,0,0.65); transform: translateY(-50%) scale(1.1); }
.ry-lb-next:hover { background: rgba(200,0,0,0.65); transform: translateY(-50%) scale(1.1); }
.ry-lb-prev.hidden,
.ry-lb-next.hidden { display: none; }

/* Spinner cargando */
.ry-lb-spinner {
    display: none;
    width: 46px;
    height: 46px;
    border: 4px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ry-lb-spin 0.7s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -23px 0 0 -23px;
}
@keyframes ry-lb-spin {
    to { transform: rotate(360deg); }
}

/* Miniaturas (strip) */
.ry-lb-thumbs {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 85vw;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.ry-lb-thumb {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: 2px;
    cursor: pointer;
    opacity: 0.55;
    border: 2px solid transparent;
    transition: opacity 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.ry-lb-thumb:hover { opacity: 0.85; }
.ry-lb-thumb.active {
    opacity: 1;
    border-color: #c00;
}

/* Mobile lightbox */
@media (max-width: 600px) {
    .ry-lb-prev { left: 6px; width: 40px; height: 40px; line-height: 36px; font-size: 18px; }
    .ry-lb-next { right: 6px; width: 40px; height: 40px; line-height: 36px; font-size: 18px; }
    .ry-lb-close { top: 10px; right: 10px; width: 36px; height: 36px; line-height: 32px; font-size: 18px; }
    .ry-lb-img { max-height: 75vh; }
    .ry-lb-thumbs { display: none; }
}

/* ---------------------------------------------------------
   13. CACHE / PERFORMANCE
   --------------------------------------------------------- */

/* Imágenes con lazy loading nativo */
img[loading="lazy"] { min-height: 1px; }

/* Evitar FOUC (flash of unstyled content) */
.wrapper { opacity: 1; transition: none; }

/* ---------------------------------------------------------
   14. PRINT
   --------------------------------------------------------- */

@media print {
    .ry-lb-overlay,
    .topbar,
    .menu-main,
    .slider,
    .footer,
    .subfooter { display: none !important; }
    .wrapper { box-shadow: none; max-width: 100%; }
    .content { width: 100%; float: none; }
}

/* ---------------------------------------------------------
   FOOTER - Grid, contacte i xarxes socials
   --------------------------------------------------------- */

/* Grid del subfooter — tot centrat, una sola columna vertical */
.ry-subfooter-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 0;
    text-align: center;
    width: 100%;
}

.ry-footer-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.ry-footer-col .widget-title {
    font-size: 1.1em;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(255,255,255,0.15);
    width: 100%;
    text-align: center;
}

/* Contacte */
.ry-footer-contact { text-align: center; }
.ry-footer-contact p { font-size: 1em; margin: 6px 0; line-height: 1.6; text-align: center; }
.ry-footer-contact a { text-decoration: none; }
.ry-footer-contact a:hover { text-decoration: underline; }
.ry-footer-about { font-size: 0.88em; line-height: 1.6; margin-bottom: 14px; text-align: center; }

/* Footer inferior - tot centrat */
.footer .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px;
    padding: 20px 40px;
}
.footer-copy { font-size: 0.95em; margin: 0; text-align: center; width: 100%; }
.ry-footer-legal { font-size: 0.78em; margin: 0; text-align: center; width: 100%; }

/* ---- XARXES SOCIALS ---- */
.ry-social-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    justify-content: center;
}

/* Botons socials — grans, color oficial sempre */
.ry-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    color: #333;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.ry-social-btn svg { display: block; width: 26px; height: 26px; }
.ry-social-btn:hover {
    transform: scale(1.12) translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    color: #fff;
    text-decoration: none;
}

/* Colors oficials sempre visibles */
.ry-social-facebook  { background: #1877F2 !important; color: #fff !important; }
.ry-social-instagram { background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important; color: #fff !important; }
.ry-social-tiktok    { background: #010101 !important; color: #fff !important; }
.ry-social-youtube   { background: #FF0000 !important; color: #fff !important; }
.ry-social-twitter   { background: #000000 !important; color: #fff !important; }
.ry-social-linkedin  { background: #0A66C2 !important; color: #fff !important; }
.ry-social-pinterest { background: #E60023 !important; color: #fff !important; }
.ry-social-whatsapp  { background: #25D366 !important; color: #fff !important; }

/* Estil: icones quadrades */
.ry-social-style-icons_sq .ry-social-btn { border-radius: 10px; }

/* Estil: icones grans */
.ry-social-style-icons_large .ry-social-btn { width: 60px; height: 60px; }
.ry-social-style-icons_large .ry-social-btn svg { width: 30px; height: 30px; }

/* Estil: text amb icona */
.ry-social-style-text .ry-social-btn {
    width: auto;
    border-radius: 8px;
    padding: 8px 16px;
    gap: 8px;
    font-size: 0.88em;
    font-weight: 600;
}
.ry-social-label { font-size: 0.82em; }

/* Responsive footer */
@media (max-width: 800px) {
    .ry-subfooter-grid { gap: 20px; padding: 16px 0; }
    .ry-footer-col { flex: 1 1 100%; }
    .footer .container { padding: 16px 20px; }
}

/* ---- COOKIE BANNER ---- */
.ry-cookie-banner {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #222;
    color: #eee;
    padding: 14px 24px;
    z-index: 99990;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    font-size: 0.88em;
    border-top: 3px solid #c00;
}
.ry-cookie-banner p { margin: 0; flex: 1 1 auto; color: #ddd; }
.ry-cookie-banner a { color: #aaa; text-decoration: underline; }
.ry-cookie-btn {
    background: #c00;
    color: #fff;
    border: none;
    padding: 9px 22px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s;
    flex: 0 0 auto;
}
.ry-cookie-btn:hover { background: #900; }

@media (max-width: 600px) {
    .ry-cookie-banner { flex-direction: column; align-items: flex-start; padding: 12px 16px; }
    .ry-cookie-btn { width: 100%; text-align: center; }
}

/* =========================================================
   FIXES ADDICIONALS: menú gran, footer centrat, mòbil
   ========================================================= */

/* ---- MINIFEATURES MÒBIL: 2 columnes per fila, títol sencer ---- */
@media (max-width: 800px) {
    /* Les columnes de minifeatures: 2 per fila */
    #minifeatures .column.col4 {
        width: calc(50% - 10px) !important;
        float: left !important;
        margin-bottom: 16px !important;
    }
    /* Títols no retallats */
    .minifeatures .feature .feature-title,
    #minifeatures .feature-title,
    #minifeatures p,
    #minifeatures h4, #minifeatures h3 {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: break-word;
    }
    /* Imatges de minifeatures s'adapten */
    .minifeatures .feature img { height: 120px; }
}
@media (max-width: 420px) {
    #minifeatures .column.col4 { width: 100% !important; float: none !important; }
}

/* ---- SLIDER MÒBIL: forçar visibilitat de les imatges ---- */
@media (max-width: 800px) {
    .slider-slides .slide {
        background-size: cover !important;
        background-position: center center !important;
    }
    /* Si el slider usa <img> */
    .slider-slides .slide img,
    .slider .slide-image,
    .slider .slide-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* Flexslider override */
    .flexslider .slides > li,
    .flexslider .slides img {
        width: 100% !important;
        height: 240px !important;
        object-fit: cover !important;
    }
}
@media (max-width: 600px) {
    .flexslider .slides > li,
    .flexslider .slides img { height: 200px !important; }
}

/* ---- FOOTER: TOT CENTRAT + COLORS BASE ---- */
.subfooter,
.footer { text-align: center !important; }
.ry-footer-col-about,
.ry-footer-col-widget {
    text-align: center !important;
    align-items: center !important;
}
.ry-social-wrap,
.ry-footer-social-wrap { justify-content: center !important; }
.footermenu { text-align: center !important; }
.menu-footer {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0; margin: 0 0 10px;
}
.menu-footer li a { text-decoration: none; font-size: 0.85em; }
.menu-footer li a:hover { color: #fff; }
.subfooter .widget { text-align: center !important; float: none !important; }
.subfooter .widget ul { list-style: none; padding: 0; }
.subfooter .widget ul li { text-align: center; }

/* ---- ELIMINAR EL PRIMER "ReformaloYa" DUPLICAT ---- */
/* El title del widget es mostra a .ry-footer-col h4.widget-title
   però NO volem mostrar-lo si coincideix amb el company name
   (ho fem via CSS ocultant-lo - el footer.php ja no l'imprimeix) */
.ry-footer-col-about > h4.widget-title { display: none !important; }

/* Títol de l'empresa al footer (no ocultar) */
.ry-company-title {
    display: block !important;
    color: #fff;
    font-size: 1.15em;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    text-align: center;
}

/* =========================================================
   PÀGINA D'ADJUNT (attachment.php)
   ========================================================= */

.attachment-page { padding: 30px 0 50px; }

/* Breadcrumb tornar */
.attachment-breadcrumb { margin-bottom: 16px; }
.attachment-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c00;
    font-size: 0.9em;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}
.attachment-back-link:hover { color: #900; text-decoration: underline; }

/* Títol de la imatge (mai mostrar IDs numèrics) */
.attachment-title {
    font-size: 1.4em;
    color: #333;
    margin-bottom: 16px;
    font-weight: 700;
}

/* Imatge principal */
.attachment-image-wrap {
    display: inline-block;
    max-width: 100%;
    text-align: center;
}
.attachment-full-link { display: block; cursor: zoom-in; }
.attachment-main-image {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    transition: box-shadow 0.2s;
}
.attachment-full-link:hover .attachment-main-image {
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.attachment-caption {
    color: #666;
    font-size: 0.88em;
    text-align: center;
    padding: 8px 0 0;
    font-style: italic;
}

/* Navegació prev/next */
.attachment-navigation {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.attachment-navigation a {
    color: #c00;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9em;
}
.attachment-navigation a:hover { text-decoration: underline; }

/* Ocultar comentaris a les pàgines d'adjunt */
.attachment #comments,
.attachment .comments-area,
.attachment #respond,
.attachment .comment-respond {
    display: none !important;
}

/* Portfolio item title - visible i no tallat */
.portfolio-item-title,
h3.portfolio-item-title {
    font-size: 0.95em !important;
    line-height: 1.3 !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    text-align: center;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    display: block !important;
    color: #333 !important;
}
.portfolio-item > a:last-child {
    display: block;
    background: #fff;
    border-top: 1px solid #eee;
}
@media (max-width: 600px) {
    .portfolio-item-title,
    h3.portfolio-item-title {
        font-size: 0.88em !important;
        padding: 6px 8px !important;
    }
}


/* Portfolio: background-image per màxima qualitat (com el slider) */
.portfolio-item-image.portfolio-item-bg {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 200px;
}
.portfolio-item-image.portfolio-item-bg img { display: none !important; }

/* =========================================================
   PORTFOLIO TÍTOLS — fora de la imatge, text fosc visible
   ========================================================= */

/* Neutralitzar qualsevol overlay blanc/absolut del tema pare */
.portfolio-item-title,
h3.portfolio-item-title {
    position: static !important;
    left: auto !important; right: auto !important;
    bottom: auto !important; top: auto !important;
    transform: none !important;
    font-size: 0.92em !important;
    line-height: 1.35 !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    hyphens: auto;
    display: block !important;
    text-align: center !important;
    color: #222 !important;
    background: #fff !important;
    border-top: 1px solid #eee !important;
    min-height: 2.7em;
    opacity: 1 !important;
}
.portfolio-item > a:last-of-type { display: block; }
@media (max-width: 768px) {
    .portfolio-item-title,
    h3.portfolio-item-title { font-size: 0.85em !important; padding: 6px 8px !important; }
}

/* =========================================================
   PORTFOLIO — estructura nova amb ry-portfolio-wrap
   títol fora del portfolio-item per evitar override del tema pare
   ========================================================= */
.ry-portfolio-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ry-portfolio-wrap .portfolio-item {
    flex: 1;
}
.ry-portfolio-wrap .portfolio-item-image {
    display: block;
    width: 100%;
    height: 200px;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #ddd;
    position: relative;
    overflow: hidden;
}
/* Neutralitzar qualsevol img dins del portfolio-item-image */
.ry-portfolio-wrap .portfolio-item-image img { display: none !important; }

/* Títol amb classe pròpia — el tema pare no el pot afectar */
.ry-portfolio-title-link {
    display: block;
    text-decoration: none;
    background: #fff;
    border-top: 2px solid #cc0000;
}
.ry-portfolio-title-link:hover { background: #f5f5f5; }
.ry-portfolio-title {
    font-size: 1.1em !important;
    line-height: 1.35 !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    color: #222 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    hyphens: auto;
    text-align: center !important;
    position: static !important;
    background: transparent !important;
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 600px) {
    .ry-portfolio-wrap .portfolio-item-image { height: 160px; }
    .ry-portfolio-title { font-size: 1em !important; }
}