body.home .flex > .desc { max-width: 780px; }
body.home .flex p       { margin-bottom: 0; }

.flex                   { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 5px; margin-top: 0.5rem; }
.flex.column            { flex-direction: column; }
.flex.column > .col     { padding: 0; }
.flex.column > .row     { padding: 0 5px; display: flex; flex-flow: row nowrap; }
.flex.column > .row>div { flex: 1 1 100%; }
.flex > .flex           { margin: 0; }
.flex.nowrap            { flex-wrap: nowrap; }
.flex > .col            { padding: 0 5px; }
.flex > .bg             { padding: 0; }
.flex > .col > p        { margin: 0; width: 90%; padding: 0.5rem 30% 0.5rem 8px; background: linear-gradient(to right, rgba(255,255,255,0.95) 60%, transparent); }
.flex > .col img,
.flex > .row img        { width: 55%; min-width: 100px; min-height: 100px; max-height: 130px !important; object-fit: contain; max-width: none; float: right; margin-right: 0.5rem; }
.flex > .col span       { background-color: var(--bg-color); color: var(--color1-100) !important; }
.flex > .col h2         { font-size: 1rem; font-weight: 600; padding: 0; margin: 0.5rem 0; background: var(--color1-100); color: var(--bg-color); padding: 0.5rem; }
.flex > .col h2 span    { font-weight: 400; }
.flex > .col h3         { font-size: 0.9rem; font-weight: 600; }
.flex > .col h4         { font-size: 1rem; }
.flex .iblock           { display: inline-block; }
.flex .iblock *         { width: 100%; }
.flex .block            { display: block; width: 100%; }
.flex > .desc           { font-size: 0.9rem; margin: 0 auto; }
.flex form + form       { display: block; margin-top: 0.5rem; }
.flex .break            { flex-basis: 100%; height: 0; }
.flex .boton.send       { min-width: 200px; margin: 0 auto !important; }

.flex .col.desc ul:not(.list) li    { border: none; }
.flex select:empty ~ button,
.flex select:empty                  { display: none; }

.customBar a,
.customBar a        { width: 40px; height: 40px; line-height: 32px; display: inline-block; border: 1px solid #f0f0f0; padding: 5px; margin: 3px 1px; }
.customBar img,
.customBar img      { width: 100%; height: auto; object-fit: cover; float: none; min-width: auto; min-height: auto; line-height: 36px; max-height: none; margin: 0; }
.customBar .active  { pointer-events: none; filter: saturate(0); opacity: 0.5; }

.flex .col.wBtn.flex                { display: flex; flex-flow: row; flex: none; gap: 0px; }
.flex .col.wBtn.flex > select       { width: auto; padding: 0 4px; }

fieldset.collapsable legend         { width: 100% !important; cursor: pointer; border-radius: 0 !important; }
fieldset.collapsable legend span,
fieldset.collapsable legend span i  { pointer-events: none; }
fieldset.collapsed div              { height: 0 !important; overflow: hidden; padding: 0 !important; }

.flex > .col .objetivo h2           { background: transparent; color: var(--text-color); }

@media screen and (max-width: 899px) {
    .flex .col ul li { --num-elem: 2; flex: 1 1 100% !important; flex-basis: calc((100% / var(--num-elem)) - (var(--gap) * (var(--num-elem) - 1)) /  var(--num-elem)) !important; max-width: none !important; }
}

@media screen and (max-width: 767px) {
    /*.flex.column > .col.bg          { margin-bottom: 5px; border: 1px solid var(--border-gray); padding-top: 42.5%; background-size: contain; background-position: top; }*/
    .flex > .col > p                { background: #f4f5f6; padding: 0.5rem 8px; width: 100%; }

    .flex .wBtn button              { max-width: 32px; }
    .flex > .col > *                { flex: 1 1 100%; }
    .flex:not(.col)                 { display: inline-block; width: 100%; }
    .flex .col.wBtn.flex            { margin: 10px 0; }
}

@media screen and (max-width: 479px) {
    .flex > .col, .flex .send       { flex: 1 1 100% !important; }
    .flex.column > .row             { flex-flow: column nowrap; }
    .flex.column > .row  > div,
    .flex.column > .row  > div > img{ width: 100%; height: auto !important; max-height: none !important; }
    .flex .col ul li { --num-elem: 1; }
}

.image-links > li > :is(a, span) { height: initial; }

@media screen and (max-width: 479px) {
    .ficha_cata_cubierta span { text-align: center;}
}

.context-dropdown-menu-bar                          { background: var(--bg-color); border: 0 none; border-right: 1px solid var(--color1-150); }
.context-dropdown-menu button                       { height: 47px; line-height: 47px; border-bottom: 0 none; border-top: 0 none; border-right: 0 none; }
.context-dropdown-menu:last-child button            { border-width: 1px;}
.context-dropdown-menu button.nobar + ul            { top: 48px; width: 200px; left: auto; right: 0; }
.flex .context-dropdown-menu button.nobar + ul a    { width: 100%; height: auto; margin: 0; }

.conditions > .titulo           { border: solid 3px #279FD9; }
.conditions > .titulo > img     { box-shadow: 0 0 0 20px #279FD9 inset; }
.job > .titulo                  { border: solid 3px #2581c2; }
.job > .titulo > img            { box-shadow: 0 0 0 20px #2581c2 inset; }
.health > .titulo               { border: solid 3px #7B407E; }
.health > .titulo > img         { box-shadow: 0 0 0 20px #7B407E inset; }
.education > .titulo            { border: solid 3px #7ab054; }
.education > .titulo > img      { box-shadow: 0 0 0 20px #7ab054 inset; }
.leisure > .titulo              { border: solid 3px #DD5668; }
.leisure > .titulo > img        { box-shadow: 0 0 0 20px #DD5668 inset; }
.security > .titulo             { border: solid 3px #5F6164; }
.security > .titulo > img       { box-shadow: 0 0 0 20px #5F6164 inset; }
.rights > .titulo               { border: solid 3px #D8A72D; }
.rights > .titulo > img         { box-shadow: 0 0 0 20px #D8A72D inset; }
.environment > .titulo          { border: solid 3px #14B167; }
.environment > .titulo > img    { box-shadow: 0 0 0 20px #14B167 inset; }
.experience > .titulo           { border: solid 3px #E86A3A; }
.experience > .titulo > img     { box-shadow: 0 0 0 20px #E86A3A inset; }

.objetivo                               { clear: both; display: inline-block; padding: 0; width:100%; }
.objetivo .titulo                       { width: 100%; display: inline-block; margin: 0; padding: 0; }
.objetivo .titulo h1                    { color: var(--text-color); }
.objetivo .titulo > img, 
.titulo > img.image                     { float: left; width: 128px; height: 128px; margin: 0; }
.objetivo .titulo > div                 { padding: 1rem; display: inline-block; width: calc(100% - 128px); background-color: white; min-height: 128px; align-content: center; }
.objetivo header div                    { font-size: 1.5rem; font-weight: 600; }
.objetivo article                       { margin-top: 2rem; border: 1px solid rgba(0,0,0,0.2); padding: 5px; border-radius: 12px; }
.objetivo article header                { margin: 0; width: 100%; background: linear-gradient(45deg, #f0f0f0, #f0f0f0); border: 1px solid rgba(0,0,0,0.05); border-radius: 8px; display: inline-block; cursor: pointer; padding: 5px 5px 4px 30px; position: relative; }
.objetivo article table caption         { display: none; }
.objetivo article > .expanded           { z-index: 0; }
.objetivo article > header::before      { left: 5px; top: 6px; }

.objetivo > .cuerpo table                       { border-spacing: 5px; width: 100%; }
.objetivo > .cuerpo table td ,
.secciones > .cuerpo table th                   { margin:0px; padding:4px 4px; white-space: normal; }
.objetivo > .cuerpo table > thead > tr > th     { border-bottom: 1px solid var(--color1-100); font-weight: bold; }
.objetivo > .cuerpo table tr td:first-child, 
.objetivo > .cuerpo table tr th:first-child     { text-align:left; min-width: 200px; }
.objetivo > .cuerpo table tr td:nth-child(2),
.objetivo > .cuerpo table tr th:nth-child(2)    { text-align:center; width: 17%; }
.objetivo > .cuerpo table tr td.nodisp,
.objetivo > .cuerpo table tr td.norel > span    { background-color: #999; padding: 5px; }
.objetivo > .cuerpo table tr td > a,
.objetivo > .cuerpo table tr td > a:visited,
.objetivo > .cuerpo table tr td > a:link,
.objetivo > .cuerpo table tr td > a:active      { color: var(--color1-100); text-decoration: none; font-weight: 400; }
.objetivo > .cuerpo table tr td > a::before     { content: none; }

.toggle-button + .toggle-container              { padding: 0; margin: 0; }
.toggle-button.expanded + .toggle-container     { max-height: 2000px; }
.toggle-button, .toggle-button:link,
.toggle-button:active,
.toggle-button:visited                          { padding: 5px 5px 4px 30px; margin-bottom: 0; line-height: 23px; }

.revista_nipo                                   { font-size: 0.8rem; text-align: center; width: 100%; display: inline-block; position: relative; top: 5px; }

@media(max-width: 650px) {
    th { display: none; }
    td { display: block; }
    td::before { content: attr(data-cell) ": "; font-weight: 700; text-transform: capitalize; }
    .objetivo article table caption { display: block; margin: 0; padding: 0; text-align: center; font-weight: 600; color: var(--text-color-medium); }
    .objetivo > .cuerpo table tr td, 
    .objetivo > .cuerpo table tr td,
    .objetivo > .cuerpo table tr td,
    .objetivo > .cuerpo table tr td { width: 100%; display: inline; }
    .objetivo > .cuerpo table tr td > a,
    .objetivo > .cuerpo table tr td > a:visited,
    .objetivo > .cuerpo table tr td > a:link,
    .objetivo > .cuerpo table tr td > a:active { background: var(--color1-100); color: var(--bg-color); display: inline-block; width: 100%; padding: 0.5rem; margin: 0.5rem 0 0 0; }
}