/* ============================================================
   custom-fix.css
   Local archive patches for Mardiempre / comicscreed.
   Restores layout when the cached external CSS bundles
   (be.css, responsive.css, post-172.css) can't be fetched.
   ============================================================ */

/* Base reset & typography (mirrors betheme base.css) */
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #626262;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
a:hover { color: #f26522; text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    color: #212121;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 15px;
}
h1 { font-size: 46px; }
h2 { font-size: 34px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
p { margin: 0 0 15px; }
ul, ol { list-style: none; margin: 0; padding: 0; }

.clearfix::after { content: ""; display: table; clear: both; }

/* ------------ Wrapper / layout ------------ */
#Wrapper { position: relative; overflow: hidden; }
.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}
.section_wrapper {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}
.section { position: relative; }
.section .section_wrapper { padding-top: 40px; padding-bottom: 40px; }
.section.full-width .section_wrapper { max-width: 100%; padding-left: 0; padding-right: 0; }

/* Betheme column grid */
.column { float: left; margin: 0 1.5% 40px; }
.one          { width: 97%; }
.one-half     { width: 47%; }
.one-third    { width: 30.33%; }
.two-third    { width: 63.66%; }
.one-fourth   { width: 22%; }
.three-fourth { width: 72%; }
.one-fifth    { width: 17%; }
.four-fifth   { width: 77%; }
.one-sixth    { width: 13.66%; }
.five-sixth   { width: 80.33%; }
.column-inner, .mcb-column-inner, .mcb-wrap-inner { width: 100%; }
.wrap { float: left; width: 100%; }
.wrap.one { width: 100%; margin: 0; }
.wrap.one-fourth { width: 25%; margin: 0; padding: 0 15px; }
.wrap.one-third { width: 33.333%; margin: 0; padding: 0 15px; }
.wrap.one-sixth { width: 16.666%; margin: 0; padding: 0 15px; }
.wrap.two-third { width: 66.666%; margin: 0; padding: 0 15px; }
.wrap.one-half { width: 50%; margin: 0; padding: 0 15px; }

.align_center { text-align: center; }
.align_left   { text-align: left; }
.align_right  { text-align: right; }

/* ------------ Header ------------ */
#Header_wrapper {
    position: relative;
    background-color: #232323;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 520px;
    color: #fff;
}
#Header_wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
    pointer-events: none;
}
#Header { position: relative; z-index: 3; }
.header_placeholder { display: none; }

/* Top bar */
#Top_bar {
    position: relative;
    z-index: 30;
    background: rgba(0,0,0,0.55);
    color: #fff;
}
#Top_bar .container { display: flex; align-items: center; justify-content: space-between; min-height: 90px; }
#Top_bar .column.one { display: flex; flex: 1; align-items: center; justify-content: space-between; margin: 0; }
#Top_bar .top_bar_left { display: flex; align-items: center; flex: 1; justify-content: space-between; }
#Top_bar .logo { padding: 10px 25px 10px 0; }
#Top_bar .logo img.logo-main { max-height: 60px; width: auto; display: block; }
#Top_bar .logo img.logo-sticky,
#Top_bar .logo img.logo-mobile,
#Top_bar .logo img.logo-mobile-sticky { display: none; }
#Top_bar .menu_wrapper { flex: 1; }

/* Main navigation */
#Top_bar .menu,
#Top_bar #menu-main-menu,
#menu-main-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu-main-menu > li { position: relative; list-style: none; }
#menu-main-menu > li > a {
    display: block;
    padding: 12px 16px;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s;
}
#menu-main-menu > li > a:hover,
#menu-main-menu > li.current-menu-item > a { color: #f26522; }
#menu-main-menu ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #1a1a1a;
    list-style: none;
    padding: 6px 0;
    margin: 0;
    display: none;
    z-index: 40;
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}
#menu-main-menu li:hover > ul.sub-menu { display: block; }
#menu-main-menu ul.sub-menu li a {
    display: block;
    padding: 10px 18px;
    color: #ddd;
    font-size: 12px;
    text-transform: uppercase;
}
#menu-main-menu ul.sub-menu li a:hover { background: #2a2a2a; color: #f26522; }

/* Hide mobile menu on desktop */
#menu-main-menu-1,
.menu-mobile,
.responsive-menu-toggle { display: none; }

/* Header action icons (search etc.) */
.top_bar_right { display: flex; align-items: center; gap: 8px; }
#Top_bar .search_wrapper { display: none; position: absolute; right: 20px; top: 100%; background: #1a1a1a; padding: 10px; z-index: 40; }
#Top_bar .search_wrapper.active { display: block; }
#Top_bar .search_wrapper input[type="text"] {
    background: #fff; border: 0; padding: 8px 12px; width: 260px; color: #333;
}

/* Slogan / hero text inside Header_wrapper */
.slogan_wrapper { padding: 90px 0 60px; text-align: left; color: #fff; position: relative; z-index: 4; }
.slogan_wrapper h1, .slogan_wrapper h2 { color: #fff; font-size: 60px; line-height: 1.1; letter-spacing: 1px; margin-bottom: 20px; }
.slogan_wrapper p { color: rgba(255,255,255,0.85); font-size: 18px; max-width: 640px; }

/* ------------ Sections / icon boxes ------------ */
.mfn-icon-box {
    display: block;
    text-align: center;
    padding: 30px 20px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mfn-icon-box:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.12); }
.mfn-icon-box .icon-wrapper { margin-bottom: 15px; }
.mfn-icon-box .icon-wrapper i {
    font-size: 44px;
    color: #f26522;
    display: inline-block;
}
.mfn-icon-box .desc-wrapper .title { font-size: 18px; color: #212121; margin: 0; }
.column_icon_box_2 a { color: inherit; text-decoration: none; }
.column_icon_box_2.dark .mfn-icon-box { background: #ffffff; }

/* ------------ Buttons ------------ */
.button, a.button {
    display: inline-block;
    padding: 12px 28px;
    background: #f26522;
    color: #fff !important;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.button:hover { background: #d75517; transform: translateY(-1px); }
.button.button_size_2 { padding: 14px 34px; font-size: 13px; }
.button.button_size_3 { padding: 16px 40px; font-size: 14px; }
.button.button_theme { background: #f26522; }
.button_align { text-align: center; margin-top: 15px; }
.button_align.align_left { text-align: left; }
.button_align.align_center { text-align: center; }

/* Fake CTA "COTIZA AHORA" list bullets - defensive */
.slider_action_buttons, .action_buttons, .slogan_wrapper ul { list-style: none; padding: 0; margin: 20px 0 0; }

/* Ensure any top-level <ul> inside Header hero shows as buttons rather than a bulleted list */
#Header_wrapper ul { list-style: none; margin: 0; padding: 0; }
#Header_wrapper ul li { list-style: none; display: inline-block; margin-right: 10px; }
#Header_wrapper ul li a.button, #Header_wrapper .button {
    display: inline-block;
}

/* ------------ Subheader ------------ */
#Subheader {
    padding: 60px 0;
    background-color: #f4f4f4;
    background-size: cover;
    color: #212121;
}
#Subheader .title { font-size: 34px; margin: 0; }

/* ------------ Blog posts grid ------------
   Betheme layout_ver-21.2.8.css already floats .post-item at width 31.33%
   inside .posts_group.grid.col-3. Use a flex row wrapper so the theme's
   floats collapse cleanly and the cards get equal height. */
.blog_wrapper .posts_group.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
}
.blog_wrapper .posts_group.grid.col-3 .post-item,
.blog_wrapper .posts_group.grid .post-item {
    width: calc((100% - 48px) / 3) !important;
    max-width: calc((100% - 48px) / 3);
    margin: 0 !important;
    float: none !important;
    background: #fff !important;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
}
.blog_wrapper .post-item .post-photo-wrapper {
    position: relative;
    margin: 0;
    line-height: 0;
    width: 100%;
    max-width: 100%;
}
.blog_wrapper .post-item .post-photo-wrapper .image_wrapper {
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
}
.blog_wrapper .post-item .post-photo-wrapper .image_wrapper img {
    width: 100% !important;
    height: auto !important;
    display: block;
    max-width: 100% !important;
    margin: 0 !important;
    top: 0 !important;
    transform: none !important;
}
.blog_wrapper .post-item .post-photo-wrapper .image_wrapper .mask,
.blog_wrapper .post-item .post-photo-wrapper .image_wrapper .image_links { display: none !important; }
.blog_wrapper .post-desc-wrapper {
    padding: 20px 22px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.blog_wrapper .post-desc { display: flex; flex-direction: column; flex: 1; }
.blog_wrapper .post-title h2.entry-title { font-size: 18px; line-height: 1.3; margin: 0 0 10px; }
.blog_wrapper .post-title h2.entry-title a { color: #212121; }
.blog_wrapper .post-title h2.entry-title a:hover { color: #f26522; }
.blog_wrapper .post-excerpt { font-size: 14px; color: #626262; margin-bottom: 15px; flex: 1; }
.blog_wrapper .post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    gap: 12px;
    margin-top: auto;
}
.blog_wrapper .post-footer .button-love { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #999; }
.blog_wrapper .post-footer .button-love .love-text { display: none; }
.blog_wrapper .post-footer .post-links { display: flex; align-items: center; gap: 6px; }
.blog_wrapper .date_label {
    position: absolute !important;
    top: 12px;
    left: 12px;
    padding: 6px 14px;
    background: #f26522;
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block !important;
    border-radius: 3px;
    z-index: 3;
    line-height: 1.3;
}
.blog_wrapper .post-more { color: #f26522; font-weight: 700; text-transform: uppercase; }
.blog_wrapper .post-item.isotope-item { position: static !important; }

/* Fallback: if the post has no image, don't leave an empty white block */
.blog_wrapper .post-item .post-photo-wrapper .image_wrapper:empty,
.blog_wrapper .post-item .post-photo-wrapper .image_wrapper a:empty { display: none; }

@media (max-width: 960px) {
    .blog_wrapper .posts_group.grid.col-3 .post-item,
    .blog_wrapper .posts_group.grid .post-item {
        width: calc((100% - 24px) / 2) !important;
        max-width: calc((100% - 24px) / 2);
    }
}
@media (max-width: 600px) {
    .blog_wrapper .posts_group.grid.col-3 .post-item,
    .blog_wrapper .posts_group.grid .post-item {
        width: 100% !important;
        max-width: 100%;
    }
}

/* ------------ Image frames ------------ */
.image_frame { display: inline-block; max-width: 100%; }
.image_frame .image_wrapper { position: relative; overflow: hidden; }
.image_frame img { display: block; width: 100%; height: auto; }
.image_links { display: none; }

/* Brand logo row (column_image inside the "Marcas que confían en nosotros" section) */
.column_image .image_frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 140px;
    padding: 15px;
    background: transparent;
}
.column_image .image_frame img {
    max-width: 100%;
    max-height: 120px;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    margin: 0 auto;
}

/* ------------ Footer ------------ */
#Footer {
    background: #1a1a1a;
    color: #a8a8a8;
    padding: 60px 0 0;
}
#Footer h4 { color: #fff; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 20px; }
#Footer a { color: #ddd; }
#Footer a:hover { color: #f26522; }
#Footer .widgets_wrapper { padding-bottom: 40px; }
#Footer .widgets_wrapper .container { display: flex; gap: 30px; flex-wrap: wrap; }
#Footer .widgets_wrapper .column { flex: 1 1 260px; margin: 0; }
#Footer .textwidget { font-size: 14px; line-height: 1.7; }
#Footer .copyright {
    border-top: 1px solid #2a2a2a;
    padding: 20px 0;
    font-size: 12px;
    color: #7a7a7a;
    text-align: center;
}

/* ------------ Utility ------------ */
.no_content { display: none; }
.saswp-schema-markup-output { display: none; }
form input.display-none { display: none !important; }
.mcb-background-overlay { display: none; }

/* Icon font fallback (Betheme uses its own icon font served from local fonts folder;
   if it fails the icons show as boxes — hide them so layout remains clean) */
[class^="icon-"]:empty::before, [class*=" icon-"]:empty::before { content: ""; }

/* Search widget on top */
.search-wrapper, .search_wrapper form { display: flex; align-items: center; gap: 8px; }
.search_wrapper input[type="text"] {
    padding: 6px 10px;
    border: 1px solid #444;
    background: rgba(255,255,255,0.06);
    color: #fff;
    border-radius: 3px;
}

/* --- responsive --- */
@media (max-width: 960px) {
    #Top_bar .container { flex-direction: column; align-items: stretch; }
    #Top_bar .column.one { flex-direction: column; }
    #menu-main-menu { justify-content: center; }
    .responsive-menu-toggle { display: none; }
    .wrap.one-fourth, .wrap.one-third, .wrap.one-sixth { width: 50%; }
    .slogan_wrapper h1, .slogan_wrapper h2 { font-size: 40px; }
}
@media (max-width: 600px) {
    .wrap.one-fourth, .wrap.one-third, .wrap.one-sixth, .wrap.one-half { width: 100%; }
    .slogan_wrapper h1, .slogan_wrapper h2 { font-size: 32px; }
    #menu-main-menu > li > a { padding: 8px 10px; font-size: 12px; }
}